/* Source: view-kompas.php Kumo UI + Compass Rose */

/* Section wrapper */
.akk-section {
    width: 100%;
    background: #fff;
    padding: 48px 0 56px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}
.akk-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(26,92,52,.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.akk-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Header */
.akk-header { text-align: center; margin-bottom: 20px; }
.akk-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 30px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(26,92,52,.1);
}
.akk-badge-dot {
    width: 7px; height: 7px;
    background: #16a34a;
    border-radius: 50%;
    animation: akk-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes akk-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.55); opacity: .4; }
}
.akk-heading {
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
    letter-spacing: -.022em;
    line-height: 1.22;
}
.akk-hl { color: #1a5c34; }
.akk-subheading {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    max-width: 420px;
    margin: 0 auto;
}

/* Location pill */
.akk-loc-pill {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 auto 20px;
    letter-spacing: .01em;
}
.akk-loc-region { background: #eff6ff; color: #1d4ed8; border: 1.5px solid #93c5fd; }
.akk-loc-gps    { background: #f0fdf4; color: #15803d; border: 1.5px solid #86efac; }
.akk-loc-spin {
    width: 11px; height: 11px;
    border: 2px solid rgba(22,163,74,.25);
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: akk-spin .75s linear infinite;
    flex-shrink: 0;
}
@keyframes akk-spin { to { transform: rotate(360deg); } }

/*  Compass stage  */
.akk-stage {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px;
    aspect-ratio: 1;
}

/* Permission overlay */
.akk-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50%;
}
.akk-start-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 130px; height: 130px;
    background: linear-gradient(145deg, #1a5c34, #25874a);
    color: #fff;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 0 0 8px rgba(26,92,52,.08), 0 12px 32px rgba(26,92,52,.35);
    transition: transform .18s, box-shadow .18s;
    outline: none;
    position: relative;
}
.akk-start-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(26,92,52,.25);
    animation: akk-border-spin 8s linear infinite;
}
@keyframes akk-border-spin { to { transform: rotate(360deg); } }
.akk-start-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(26,92,52,.1), 0 16px 40px rgba(26,92,52,.42); }
.akk-start-btn:active { transform: scale(.97); }
.akk-start-label { font-size: 13px; line-height: 1.35; text-align: center; }
.akk-start-label small { font-size: 11px; opacity: .85; font-weight: 400; }
.akk-overlay-hint { font-size: 11.5px; color: #6b7280; text-align: center; max-width: 150px; line-height: 1.6; margin: 0; }

/*  Compass dial  */
.akk-dial {
    position: absolute;
    inset: 0;
    width: 100%;
    aspect-ratio: 1;
}

/* Outer bezel  metallic conic gradient */
.akk-bezel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        #b8bcc4 0deg, #e8eaed 30deg, #d0d3d9 60deg,
        #f0f2f5 90deg, #c4c8d0 120deg, #e8eaed 150deg,
        #b8bcc4 180deg, #e8eaed 210deg, #d0d3d9 240deg,
        #f0f2f5 270deg, #c4c8d0 300deg, #e8eaed 330deg,
        #b8bcc4 360deg
    );
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,.9),
        inset 0 -3px 6px rgba(0,0,0,.18),
        0 20px 56px rgba(0,0,0,.22),
        0 8px 20px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

/* Gold accent ring */
.akk-gold-ring {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(145deg, #c9a227 0%, #f0d060 30%, #a07820 60%, #e5bd45 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    box-shadow: 0 0 12px rgba(201,162,39,.5), inset 0 1px 2px rgba(255,255,255,.4);
}

/* Dark inner face */
.akk-face {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #1c2d42 0%, #0d1e30 55%, #070f1c 100%);
    box-shadow: inset 0 8px 28px rgba(0,0,0,.85), inset 0 -2px 8px rgba(255,255,255,.03);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tick SVG */
.akk-ticks {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Cardinal ring (rotates with device orientation) */
.akk-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    will-change: transform;
    transition: transform 50ms linear;
}

/* Compass rose SVG */
.akk-rose {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Cardinal direction letters */
.akk-dir {
    position: absolute;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    user-select: none;
    font-size: 13px;
}
.akk-N {
    top: 5px; left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #f87171;
    text-shadow: 0 0 14px rgba(248,113,113,.9), 0 0 28px rgba(248,113,113,.4);
}
.akk-E { right: 7px; top: 50%; transform: translateY(-50%); color: #94a3b8; text-shadow: 0 0 8px rgba(148,163,184,.4); }
.akk-S { bottom: 5px; left: 50%; transform: translateX(-50%); color: #94a3b8; text-shadow: 0 0 8px rgba(148,163,184,.4); }
.akk-W { left: 7px; top: 50%; transform: translateY(-50%); color: #94a3b8; text-shadow: 0 0 8px rgba(148,163,184,.4); }

/*  Qibla needle (gold arrow, outside ring = fixed to qibla bearing)  */
.akk-needle {
    position: absolute;
    top: 50%; left: 50%;
    /* Width proporsional kompas, height 90% diameter face */
    width: 24px;
    height: 80%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
    transition: none;
    z-index: 30;
    filter:
        drop-shadow(0 0 5px rgba(201,162,39,.8))
        drop-shadow(0 0 12px rgba(201,162,39,.4))
        drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.akk-arrow-svg {
    width: 100%; height: 100%;
    overflow: visible;
}

/*  Ka'bah center icon (static)  */
.akk-kaaba-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    border-radius: 10px;
    background: linear-gradient(160deg, #1a1a1a 0%, #000 100%);
    border: 2px solid #3d3d3d;
    box-shadow:
        0 0 0 3px rgba(201,162,39,.4),
        0 0 22px rgba(201,162,39,.8),
        0 0 44px rgba(201,162,39,.3),
        0 4px 14px rgba(0,0,0,.7);
    z-index: 35;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.akk-kaaba-body {
    width: 100%; height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.akk-kaaba-band {
    position: absolute;
    top: 5px; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #92400e, #e5bd20, #fde68a, #e5bd20, #92400e);
    box-shadow: 0 0 10px rgba(229,189,32,.9), 0 0 20px rgba(229,189,32,.4);
}
.akk-kaaba-door {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 55%; height: 62%;
    background: #0a0a0a;
    border-top: 2px solid #c9a227;
    border-left: 1.5px solid #c9a227;
    border-right: 1.5px solid #c9a227;
    border-radius: 2px 2px 0 0;
}

/*  Stat cards  */
.akk-stats {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.akk-stats.is-visible { display: grid; }
.akk-stat {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .18s, box-shadow .18s;
}
.akk-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.akk-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
}
.akk-stat-angle::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.akk-stat-angle:hover    { border-color: #ddd6fe; }
.akk-stat-dist::before   { background: linear-gradient(90deg, #c9a227, #f59e0b); }
.akk-stat-dist:hover     { border-color: #fde68a; }
.akk-stat-azimuth::before { background: linear-gradient(90deg, #10b981, #059669); }
.akk-stat-azimuth:hover   { border-color: #a7f3d0; }
.akk-stat-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: #9ca3af; font-weight: 700; display: block; margin-bottom: 5px; text-align: center; }
.akk-stat-val { font-size: 28px; font-weight: 800; color: #111827; display: flex; align-items: baseline; gap: 3px; line-height: 1; justify-content: center; }
.akk-stat-unit { font-size: 12px; color: #9ca3af; font-weight: 500; }
.akk-stat-sub { font-size: 11px; color: #9ca3af; margin-top: 6px; line-height: 1.4; text-align: center; }
.akk-stat-sub span { color: #6b7280; font-weight: 600; }


/*  Azimuth result  */
.akk-result {
    display: none;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1.5px solid #86efac;
    border-radius: 18px;
    padding: 16px 18px;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.akk-result.is-visible { display: flex; }
.akk-result-circle {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #86efac;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(26,92,52,.12);
    font-size: 20px; font-weight: 900; color: #1a5c34; line-height: 1;
}
.akk-result-body { flex: 1; min-width: 0; }
.akk-result-title { font-size: 13px; font-weight: 700; color: #166534; margin: 0 0 4px; }
.akk-result-sub { font-size: 12px; color: #4ade80; margin: 0; line-height: 1.5; }
.akk-result-sub span { color: #15803d; font-weight: 600; }

/*  GPS CTA  */
.akk-gps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1a5c34, #25874a);
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(26,92,52,.28);
    transition: transform .18s, box-shadow .18s;
    position: relative; overflow: hidden;
}
.akk-gps-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
}
.akk-gps-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26,92,52,.38); color: #fff; text-decoration: none; }
.akk-gps-sub { font-size: 11px; opacity: .78; font-weight: 400; }

/*  Info cards  */
.akk-info-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.akk-info-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 16px;
    padding: 15px 16px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.akk-info-card:hover { border-color: #bbf7d0; box-shadow: 0 4px 14px rgba(26,92,52,.07); transform: translateY(-1px); }
.akk-info-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.akk-icon-a { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.akk-icon-b { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.akk-icon-c { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.akk-icon-d { background: linear-gradient(135deg, #fdf4ff, #f5d0fe); }
.akk-info-body { flex: 1; min-width: 0; }
.akk-info-title { font-size: 13px; font-weight: 700; color: #111827; margin: 0 0 4px; line-height: 1.3; }
.akk-info-text { font-size: 12px; color: #6b7280; line-height: 1.65; margin: 0; }
.akk-info-text strong { color: #1a5c34; }
.akk-coord-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: #fff7ed; border: 1px solid #fed7aa;
    border-radius: 8px; font-size: 10.5px; color: #92400e; font-weight: 600; margin-top: 7px;
}



/* AK GUIDE SECTION Premium Redesign */
.ak-guide-section {
    width: 100%;
    background: #fff;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/*  Dekorasi latar belakang  */
.ak-guide-bg {
    position: relative;
    background: linear-gradient(170deg, #f0fdf4 0%, #ffffff 42%, #fff9f0 100%);
    border-top: 1px solid #e9f5ee;
    padding: 52px 0 56px;
}
.ak-guide-bg::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(26,92,52,.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ak-guide-bg::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(201,162,39,.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/*  Inner container  */
.ak-guide-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/*  Section header  */
.ak-guide-header {
    text-align: center;
    margin-bottom: 36px;
}
.ak-guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(26,92,52,.08);
}
.ak-guide-badge-dot {
    width: 6px; height: 6px;
    background: #16a34a;
    border-radius: 50%;
    animation: ak-pulse-dot 2s ease-in-out infinite;
}
@keyframes ak-pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}
.ak-guide-header h2 {
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
    letter-spacing: -.022em;
    line-height: 1.25;
}
.ak-guide-header h2 .ak-green { color: #1a5c34; }
.ak-guide-header p {
    font-size: 14.5px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

/*  Lokasi bar  */
.ak-loc-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 36px;
    max-width: 540px;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 600;
    transition: all .3s;
}
.ak-loc-bar.gps {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    color: #15803d;
}
.ak-loc-bar.region {
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    color: #1d4ed8;
}
.ak-loc-bar .ak-loc-spinner {
    width: 14px; height: 14px;
    border: 2.5px solid rgba(22,163,74,.25);
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: ak-spin .75s linear infinite;
    flex-shrink: 0;
}
@keyframes ak-spin { to { transform: rotate(360deg); } }

/*  Steps grid  */
.ak-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 36px;
}
@media (min-width: 500px) { .ak-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .ak-steps-grid { grid-template-columns: repeat(4, 1fr); } }

/*  Step card  */
.ak-step-card {
    position: relative;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    cursor: default;
}
.ak-step-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(26,92,52,.035) 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity .2s;
}
.ak-step-card:hover {
    border-color: #86efac;
    box-shadow: 0 6px 24px rgba(26,92,52,.1);
    transform: translateY(-3px);
}
.ak-step-card:hover::before { opacity: 1; }

/*  Step number badge  */
.ak-step-num {
    position: absolute;
    top: 14px; right: 16px;
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #1a5c34, #2e9d5a);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(26,92,52,.3);
}

/*  Step icon  */
.ak-step-icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.ak-step-icon-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ak-step-icon-2 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.ak-step-icon-3 { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.ak-step-icon-4 { background: linear-gradient(135deg, #fdf2f8, #f5d0fe); }

/*  Step text  */
.ak-step-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin: 0;
    position: relative; z-index: 1;
}
.ak-step-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
    position: relative; z-index: 1;
}
.ak-step-desc strong { color: #1a5c34; }

/*  Connector lines between steps (desktop)  */
@media (min-width: 800px) {
    .ak-steps-grid {
position: relative;
    }
    .ak-step-card::after {
content: '';
position: absolute;
right: -22px; top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #d1d5db;
z-index: 10;
font-weight: 300;
    }
    .ak-step-card:last-child::after { display: none; }
}

/*  Stats bar  */
.ak-stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
@media (min-width: 600px) { .ak-stats-bar { grid-template-columns: repeat(4, 1fr); } }

.ak-stat-card {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 16px;
    padding: 16px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ak-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.ak-stat-card-1:hover { border-color: #86efac; }
.ak-stat-card-2:hover { border-color: #fde68a; }
.ak-stat-card-3:hover { border-color: #ddd6fe; }
.ak-stat-card-4:hover { border-color: #fed7aa; }
.ak-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}
.ak-stat-card-1::before { background: linear-gradient(90deg, #16a34a, #22d3ee); }
.ak-stat-card-2::before { background: linear-gradient(90deg, #c9a227, #f59e0b); }
.ak-stat-card-3::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.ak-stat-card-4::before { background: linear-gradient(90deg, #f97316, #ef4444); }

.ak-stat-icon {
    font-size: 18px;
    margin-bottom: 6px;
    display: block;
}
.ak-stat-value {
    font-size: clamp(16px, 3vw, 22px);
    font-weight: 800;
    color: #111827;
    display: block;
    line-height: 1.1;
    margin-bottom: 4px;
}
.ak-stat-value.pending {
    font-size: 12px;
    font-style: italic;
    color: #9ca3af;
    animation: ak-blink 1.6s ease-in-out infinite;
}
@keyframes ak-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: .45; }
}
.ak-stat-label {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    display: block;
}

/*  Info ribbon (lower section)  */
.ak-info-ribbon {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) { .ak-info-ribbon { grid-template-columns: repeat(3, 1fr); } }

.ak-ribbon-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 16px;
    transition: border-color .2s, box-shadow .2s;
}
.ak-ribbon-card:hover {
    border-color: #bbf7d0;
    box-shadow: 0 4px 16px rgba(26,92,52,.08);
}
.ak-ribbon-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ak-ribbon-icon-a { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ak-ribbon-icon-b { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.ak-ribbon-icon-c { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.ak-ribbon-card-body { flex: 1; min-width: 0; }
.ak-ribbon-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.3;
}
.ak-ribbon-card-text {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}
.ak-ribbon-card-text strong { color: #1a5c34; }

/* Source: view-maps.php Kumo UI */

.akk-maps-section {
    background: #f8fafc;
    border-top: 1px solid #f0f0f0;
}

.akk-maps-wrap-outer {
    max-width: 960px;
}

/* Map frame */
.akk-map-frame {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        0 10px 40px rgba(0,0,0,.1);
    border: 1.5px solid #e5e7eb;
    min-height: 360px;
}

.akk-map-canvas {
    width: 100%;
    min-height: 360px;
    background: #e5e7eb;
}

/* Bottom gradient fade */
.akk-map-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50px;
    background: linear-gradient(to top, rgba(15,23,42,.3) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* Legend overlay */
.akk-map-legend {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.akk-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.akk-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.akk-legend-green { background: #16a34a; box-shadow: 0 0 6px rgba(22,163,74,.5); }
.akk-legend-gold  { background: #c9a227; box-shadow: 0 0 6px rgba(201,162,39,.5); }

.akk-legend-line {
    width: 16px; height: 2px;
    background: linear-gradient(90deg, #16a34a, #c9a227);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Compact map  same size as compass */
.akk-map-compact {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 20px;
    text-align: center;
}

.akk-map-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9ca3af;
    margin: 0 0 10px;
}

.akk-map-round {
    border-radius: 18px;
    aspect-ratio: 9 / 16;
    min-height: 360px;
    position: relative;
}

.akk-map-round .akk-map-canvas {
    min-height: auto;
    height: 100% !important;
    position: absolute;
    inset: 0;
}

/* Source: view-region-grid.php */

/*  REGION GRID  PREMIUM  */
.rg-section {
    width: 100%;
    padding: 32px 0 48px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

/* Decorative background */
.rg-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(26,92,52,.06) 0%, transparent 70%);
    pointer-events: none;
}
.rg-section::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(26,92,52,.04) 0%, transparent 70%);
    pointer-events: none;
}

.rg-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/*  Header  */
.rg-header {
    text-align: center;
    margin-bottom: 32px;
}

.rg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 30px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
}

.rg-title {
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.rg-title strong {
    background: linear-gradient(135deg, #1a5c34, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rg-subtitle {
    font-size: 13.5px;
    color: #6b7280;
    max-width: 480px;
    margin: 0 auto 14px;
    line-height: 1.7;
}

/* Stats bar */
.rg-stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 30px;
    font-size: 12px;
    color: #6b7280;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.rg-stats strong { color: #1a5c34; font-weight: 800; }
.rg-stats-dot { width: 4px; height: 4px; background: #d1d5db; border-radius: 50%; }

/*  Grid  */
.rg-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) {
    .rg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .rg-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
}

/*  City Card  */
.rg-card {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1.5px solid #f0f0f0;
    background: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    transition: all .18s ease;
    position: relative;
    overflow: hidden;
    line-height: 1.3;
}
.rg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(26,92,52,.04));
    opacity: 0;
    transition: opacity .2s;
}
.rg-card:hover {
    border-color: #86efac;
    background: #f0fdf4;
    color: #14532d;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(26,92,52,.1);
    text-decoration: none;
}
.rg-card:hover::before { opacity: 1; }

/* Same province highlight */
.rg-card.rg-same-prov {
    border-color: #d1fae5;
    background: #f6fef9;
}

/* Active city */
.rg-card.rg-active {
    background: linear-gradient(135deg, #14532d 0%, #1a5c34 50%, #15803d 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,92,52,.3);
}
.rg-card.rg-active::before { display: none; }
.rg-card.rg-active:hover {
    background: linear-gradient(135deg, #166534 0%, #1a5c34 50%, #16a34a 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26,92,52,.35);
}

/* Hidden (filter) */
.rg-card.rg-hidden { display: none; }

/* Card icon */
.rg-card-icon {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
    transition: transform .2s;
}
.rg-card:hover .rg-card-icon { transform: scale(1.15); }

/* Card name */
.rg-card-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active pulse dot */
.rg-pulse {
    width: 7px;
    height: 7px;
    background: #86efac;
    border-radius: 50%;
    flex-shrink: 0;
    animation: rgPulse 1.8s ease-in-out infinite;
}
@keyframes rgPulse {
    0%   { box-shadow: 0 0 0 0 rgba(134,239,172,.7); }
    70%  { box-shadow: 0 0 0 6px rgba(134,239,172,0); }
    100% { box-shadow: 0 0 0 0 rgba(134,239,172,0); }
}

/*  No results  */
.rg-no-result {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 16px;
    color: #9ca3af;
    font-size: 13px;
}

/*  Footer  */
.rg-footer {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.rg-footer-meta {
    font-size: 12px;
    color: #9ca3af;
}
.rg-footer-meta strong { color: #374151; }
.rg-ref {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #9ca3af;
}
.rg-ref a {
    color: #1a5c34;
    font-weight: 700;
    text-decoration: none;
}
.rg-ref a:hover { text-decoration: underline; }

/*  Mode badge  */
.rg-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 3px 11px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/*  Province Group  */
.rg-prov-group {
    margin-bottom: 28px;
}
.rg-prov-group:last-child { margin-bottom: 0; }

.rg-prov-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f8fafc 100%);
    border: 1.5px solid #d1fae5;
    border-radius: 12px;
    transition: all .2s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.rg-prov-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a5c34, #2ecc71);
    border-radius: 12px 0 0 12px;
}
.rg-prov-header:hover {
    border-color: #86efac;
    box-shadow: 0 2px 10px rgba(26,92,52,.08);
    background: linear-gradient(135deg, #ecfdf5 0%, #dcfce7 50%, #f0fdf4 100%);
}

.rg-prov-icon {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}
.rg-prov-name {
    flex: 1;
    font-size: 14.5px;
    font-weight: 700;
    color: #14532d;
    letter-spacing: -.01em;
}
.rg-prov-count {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.rg-prov-toggle {
    font-size: 12px;
    color: #9ca3af;
    transition: transform .25s ease;
    flex-shrink: 0;
    line-height: 1;
}
.rg-prov-group.rg-collapsed .rg-prov-toggle {
    transform: rotate(-90deg);
}
.rg-prov-body {
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
    max-height: 2000px;
    opacity: 1;
}
.rg-prov-group.rg-collapsed .rg-prov-body {
    max-height: 0;
    opacity: 0;
}

/* Province group hidden by search */
.rg-prov-group.rg-prov-hidden { display: none; }

/* Search box for province mode */
.rg-search-wrap {
    position: relative;
    max-width: 420px;
    margin: 16px auto 0;
}
.rg-search-wrap input {
    width: 100%;
    padding: 10px 40px 10px 38px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.rg-search-wrap input:focus {
    border-color: #86efac;
    box-shadow: 0 0 0 3px rgba(134,239,172,.15);
}
.rg-search-wrap input::placeholder {
    color: #9ca3af;
}
.rg-search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9ca3af;
    pointer-events: none;
}
.rg-search-clear {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 22px; height: 22px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.rg-search-clear.visible { display: flex; }

/* Source: view-region-hero.php */

/* AK REGION HERO Featured Snippet Optimized */
.ak-hero-section {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

/* Dekorasi background */
.ak-hero-section::before {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(26,92,52,.045) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ak-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 20px 0;
    position: relative;
    z-index: 1;
}

/*  Breadcrumb  */
.ak-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #9ca3af;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ak-hero-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color .15s;
}
.ak-hero-breadcrumb a:hover { color: #1a5c34; }
.ak-hero-breadcrumb .sep { color: #d1d5db; }
.ak-hero-breadcrumb .ak-crumb-active { color: #1a5c34; font-weight: 600; }

/*  Layout dua kolom  */
.ak-hero-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ak-hero-col-main { flex: 1; min-width: 280px; }
.ak-hero-col-side {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
}
@media (min-width: 700px) {
    .ak-hero-col-side { margin: 0; }
    .ak-hero-layout { flex-wrap: nowrap; }
}

/*  Badge + Judul  */
.ak-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 13px;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}
.ak-hero-badge-dot {
    width: 6px; height: 6px;
    background: #16a34a;
    border-radius: 50%;
    animation: ak-hero-pulse 2s ease-in-out infinite;
}
@keyframes ak-hero-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.4; transform:scale(.6); }
}

.ak-hero-h1 {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px;
    line-height: 1.22;
    letter-spacing: -.022em;
}
.ak-hero-h1 .ak-hl { color: #1a5c34; }

/*  Featured Snippet Answer Block  */
/* Google mengindeks blok ini sebagai "definitive answer" */
.ak-hero-answer-block {
    background: linear-gradient(135deg, #f0fdf4 0%, #f9fffe 100%);
    border: 1.5px solid #bbf7d0;
    border-left: 4px solid #1a5c34;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 18px;
    font-size: 14.5px;
    color: #1f2937;
    line-height: 1.75;
}
.ak-hero-answer-block strong { color: #1a5c34; }
.ak-hero-answer-block .ak-answer-live {
    font-weight: 700;
    color: #1a5c34;
    background: #dcfce7;
    padding: 1px 7px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
}

/*  Quick Facts Table (Featured Snippet Table Format)  */
.ak-hero-quick-facts {
    margin: 0 0 18px;
}
.ak-hero-quick-facts caption {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 0 8px;
    caption-side: top;
}
.ak-hero-quick-facts table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.ak-hero-quick-facts th,
.ak-hero-quick-facts td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.ak-hero-quick-facts th {
    width: 38%;
    font-weight: 700;
    color: #374151;
    background: #f9fafb;
    white-space: nowrap;
}
.ak-hero-quick-facts td {
    color: #111827;
    font-weight: 500;
}
.ak-hero-quick-facts tr:last-child th,
.ak-hero-quick-facts tr:last-child td { border-bottom: none; }
.ak-hero-quick-facts .ak-td-live {
    font-weight: 700;
    color: #1a5c34;
}
.ak-hero-quick-facts .ak-td-loading {
    color: #9ca3af;
    font-style: italic;
    font-size: 12px;
}

/*  Chips row  */
.ak-hero-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.ak-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.ak-chip-green { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.ak-chip-blue  { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.ak-chip-gold  { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

/*  Side card (data ringkas)  */
.ak-hero-side-card {
    background: linear-gradient(160deg, #1a5c34 0%, #22854b 100%);
    border-radius: 18px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 12px 32px rgba(26,92,52,.28), 0 4px 10px rgba(26,92,52,.15);
    position: relative;
    overflow: hidden;
}
.ak-hero-side-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    pointer-events: none;
}
.ak-hero-side-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.65);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ak-hero-side-stat {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.ak-hero-side-stat:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.ak-hero-side-stat-label {
    font-size: 10.5px;
    color: rgba(255,255,255,.6);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ak-hero-side-stat-val {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ak-hero-side-stat-val sup { font-size: 13px; font-weight: 600; }
.ak-hero-side-stat-sub {
    font-size: 11.5px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}
.ak-hero-side-kaaba {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 11px;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
}
.ak-hero-side-kaaba strong { color: rgba(255,255,255,.85); font-size: 12px; }

/*  Divider  */
.ak-hero-divider {
    margin: 24px 0 0;
    border: none;
    border-top: 1px solid #f3f4f6;
}
/* =================================================================
   Layout: Stats | Kompas | Peta  responsive 3-column
   ================================================================= */

/* --- Mobile: stack vertical --- */
.akk-sidebyside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.akk-col-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 300px;
}

.akk-map-compact {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.akk-map-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9ca3af;
    margin: 0 0 10px;
}

.akk-map-round {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    min-height: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.12);
    border: 1.5px solid #e5e7eb;
}

.akk-map-round .akk-map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: auto;
    background: #e5e7eb;
}

/* --- Desktop: 3 kolom sejajar, centered --- */
@media (min-width: 768px) {
    .akk-wrap {
        max-width: 100%;
        padding: 0 32px;
    }

    .akk-sidebyside {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
        flex-wrap: nowrap;
    }

    /* Kolom kiri: stats */
    .akk-col-stats {
        flex: 0 0 240px;
        max-width: 240px;
        align-items: stretch;
    }

    .akk-col-stats .akk-stats {
        display: flex;
        flex-direction: column;
        gap: 10px;
        grid-template-columns: unset;
        width: 100%;
    }

    .akk-col-stats .akk-stat { width: 100%; }

    .akk-col-stats .akk-result {
        width: 100%;
        margin: 0;
        max-width: 100%;
    }

    .akk-col-stats .akk-gps-btn {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    /* Kolom tengah: kompas auto size */
    .akk-sidebyside .akk-stage {
        flex: 0 0 auto;
        max-width: 340px;
        width: 340px;
    }

    /* Kolom kanan: peta ukuran HP portrait */
    .akk-sidebyside .akk-map-compact {
        flex: 0 0 260px;
        max-width: 260px;
        margin: 0;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
    }

    .akk-sidebyside .akk-map-round {
        width: 100%;
        aspect-ratio: 9 / 16;
        min-height: 400px;
        border-radius: 24px;
    }

    .akk-sidebyside .akk-map-round .akk-map-canvas {
        position: absolute;
        inset: 0;
        height: 100% !important;
    }
}

.ak-step-icon svg {
    width: 24px;
    height: 24px;
}
.ak-step-icon-1 svg { stroke: #b45309; }
.ak-step-icon-2 svg { stroke: #1d4ed8; }
.ak-step-icon-3 svg { stroke: #16a34a; }
.ak-step-icon-4 svg { stroke: #9333ea; }

/* Stat icon wrap (replaces emoji) */
.ak-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}
.ak-stat-icon-1 { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #16a34a; }
.ak-stat-icon-2 { background: linear-gradient(135deg, #fefce8, #fef9c3); color: #ca8a04; }
.ak-stat-icon-3 { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #7c3aed; }
.ak-stat-icon-4 { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #ea580c; }

.ak-stat-icon-1 svg { stroke: #16a34a; }
.ak-stat-icon-2 svg { stroke: #ca8a04; }
.ak-stat-icon-3 svg { stroke: #7c3aed; }
.ak-stat-icon-4 svg { stroke: #ea580c; }

.ak-stat-value--coords {
    font-size: 13px !important;
    line-height: 1.35;
}

/* Location bar improvements */
.ak-loc-bar { display: flex; align-items: center; gap: 8px; }
.ak-loc-bar--region { color: #16a34a; }
.ak-loc-bar--gps { color: #6b7280; }
.ak-loc-bar-icon { flex-shrink: 0; stroke: currentColor; }

/* Ribbon card SVG icons */
.ak-ribbon-card-icon svg {
    width: 22px;
    height: 22px;
}
.ak-ribbon-icon-a svg { stroke: #b45309; }
.ak-ribbon-icon-b svg { stroke: #2563eb; }
.ak-ribbon-icon-c svg { stroke: #16a34a; }

/* HowTo article */
.ak-howto { margin-bottom: 32px; }
.ak-guide-subtitle {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}

/*  Region Grid: 1-col mobile, 2-col desktop  */
@media (max-width: 767px) {
    .rg-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 768px) {
    .rg-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px;
    }
}

/* Region Grid Kumo UI/UX Sync (v1.7.2) */

/* Stats bar */
.rg-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}
.rg-stats-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6b7280;
}
.rg-stats-item svg { stroke: #9ca3af; flex-shrink: 0; }
.rg-stats-active { color: #16a34a; font-weight: 600; }
.rg-stats-active svg { stroke: #16a34a; }

.rg-subtitle {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.7;
    margin: 8px auto 0;
    max-width: 580px;
}
.rg-header { text-align: center; margin-bottom: 28px; }
.rg-header .akk-heading { margin-top: 8px; }

/* Mode pill */
.rg-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
}
.rg-mode-pill svg { stroke: #16a34a; }

/* Card SVG icons */
.rg-card-icon { stroke: #9ca3af; flex-shrink: 0; transition: stroke .2s; }
.rg-card:hover .rg-card-icon { stroke: #16a34a; }
.rg-card-icon--active { stroke: #16a34a; }
.rg-card-icon--nearby { stroke: #2563eb; }

/* Province group SVG */
.rg-prov-icon { stroke: #6b7280; flex-shrink: 0; }
.rg-prov-toggle { stroke: #9ca3af; flex-shrink: 0; transition: transform .25s; margin-left: auto; }
.rg-prov-header[aria-expanded="false"] .rg-prov-toggle { transform: rotate(-90deg); }

/* Search icon */
.rg-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); stroke: #9ca3af; pointer-events: none; }
.rg-search-wrap { position: relative; }
.rg-search-wrap input { padding-left: 38px; }

/* Footer */
.rg-footer { text-align: center; }
.rg-ref { display: inline-flex; align-items: center; gap: 4px; }
.rg-ref svg { stroke: #9ca3af; }

/*  Province header & body fix (v1.7.4)  */
.rg-prov-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
}
.rg-prov-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    stroke: #1a5c34;
}
.rg-prov-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    stroke: #9ca3af;
    transition: transform .25s ease;
    margin-left: auto;
}
.rg-prov-group.rg-collapsed .rg-prov-toggle {
    transform: rotate(-90deg);
}
.rg-prov-name {
    flex: 1;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #14532d;
}

/* ═══════════════════════════════════════════════════════════
   Region Hero - Kumo UI/UX Sync (v1.7.9)
   ═══════════════════════════════════════════════════════════ */

/* Breadcrumb */
.ak-hero-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 24px;
}
.ak-hero-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.ak-hero-breadcrumb a:hover { color: #15803d; text-decoration: underline; }
.ak-crumb-sep { color: #d1d5db; }
.ak-crumb-active { color: #374151; font-weight: 600; }

/* H1 */
.ak-hero-h1 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}

/* Answer block */
.ak-hero-answer-block {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.ak-hero-answer-block p { margin: 0; font-size: 14.5px; color: #1f2937; line-height: 1.7; }
.ak-hero-answer-note { margin-top: 8px !important; font-size: 12.5px !important; color: #6b7280 !important; }
.ak-answer-live { font-weight: 700; color: #16a34a; }

/* Quick facts table */
.ak-hero-quick-facts {
    margin-bottom: 20px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.ak-hero-facts-caption {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ak-hero-facts-caption svg { stroke: #16a34a; }
.ak-hero-quick-facts table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ak-hero-quick-facts th,
.ak-hero-quick-facts td { padding: 9px 14px; text-align: left; border-bottom: 1px solid #f3f4f6; }
.ak-hero-quick-facts tbody tr:last-child th,
.ak-hero-quick-facts tbody tr:last-child td { border-bottom: none; }
.ak-hero-quick-facts thead th { background: #f9fafb; font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ak-hero-quick-facts tbody th { color: #374151; font-weight: 600; width: 52%; }
.ak-hero-quick-facts tbody td { color: #111827; }
.ak-td-live { font-weight: 700; color: #16a34a; }
.ak-td-loading { color: #9ca3af !important; font-weight: 400 !important; font-style: italic; }

/* Chips */
.ak-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ak-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.ak-chip-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.ak-chip-green svg { stroke: #16a34a; }
.ak-chip-blue  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ak-chip-blue svg { stroke: #2563eb; }
.ak-chip-gold  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.ak-chip-gold svg { stroke: #b45309; }

/* Side card */
.ak-hero-side-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    position: sticky;
    top: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.ak-hero-side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #14532d;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.ak-hero-side-title svg { stroke: #16a34a; flex-shrink: 0; }
.ak-hero-side-stat { margin-bottom: 12px; }
.ak-hero-side-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; font-weight: 600; margin-bottom: 2px; }
.ak-hero-side-stat-val { font-size: 28px; font-weight: 800; color: #111827; line-height: 1; }
.ak-hero-side-stat-val--dist { font-size: 20px; }
.ak-hero-side-stat-val sup { font-size: 14px; color: #6b7280; }
.ak-hero-side-stat-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }
.ak-hero-side-divider { height: 1px; background: #f0f0f0; margin: 12px 0; }
.ak-hero-side-kaaba {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-top: 4px;
    font-size: 11.5px;
    color: #374151;
    line-height: 1.5;
}
.ak-hero-side-kaaba svg { stroke: #16a34a; flex-shrink: 0; margin-top: 2px; }
.ak-hero-side-kaaba strong { color: #14532d; }
.ak-hero-kaaba-sub { color: #6b7280; font-size: 10.5px; }

/* Divider */
.ak-hero-divider { border: none; border-top: 1px solid #f0f0f0; margin: 24px 0 0; }

/* Responsive */
@media (max-width: 767px) {
    .ak-hero-col-side { display: none; }
    .ak-hero-layout { display: block; }
}

/* ── Download Button (view-kompas.php) ───────────────────────── */
.akk-download-wrap {
    display: flex;
    justify-content: center;
    margin: 16px auto 0;
}

.akk-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
    letter-spacing: .01em;
}

.akk-download-btn:hover {
    background: #f8fafc;
    border-color: #148F29;
    color: #148F29;
    box-shadow: 0 2px 8px rgba(20,143,41,.12);
    transform: translateY(-1px);
}

.akk-download-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.akk-download-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.akk-download-btn svg {
    flex-shrink: 0;
    transition: stroke .2s;
}

/* Download wrap di dalam akk-stage (kolom tengah kompas) */
.akk-stage .akk-download-wrap {
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 0;
}