/* ==========================================================================
   MTQ Nasional XXXI 2026 — Kota Semarang
   Sistem desain sisi pengunjung.
   Palet diambil dari poster resmi: pirus/hijau zamrud + emas + gading.
   ========================================================================== */

:root {
    /* Pirus — warna utama */
    --mtq-950: #032422;
    --mtq-900: #05403c;
    --mtq-800: #06554f;
    --mtq-700: #086c64;
    --mtq-600: #0b857a;
    --mtq-500: #12a093;
    --mtq-400: #2fbcac;
    --mtq-300: #6bd6c8;
    --mtq-200: #a5e8de;
    --mtq-100: #d5f2ed;
    --mtq-50: #eefaf8;

    /* Emas — aksen */
    --gold-800: #7d560f;
    --gold-700: #a9761a;
    --gold-600: #c99225;
    --gold-500: #e0a92e;
    --gold-400: #f2c14e;
    --gold-300: #f8d782;
    --gold-200: #fbe6b4;
    --gold-100: #fdf3dd;

    /* Netral hangat */
    --cream: #fffbf0;
    --sand: #f6f1e4;
    --ink: #08201f;
    --ink-soft: #3f5a58;
    --ink-muted: #6b8785;
    --line: rgba(6, 85, 79, .12);
    --white: #ffffff;

    /* Elevasi — permainan bayangan & cahaya */
    --shadow-xs: 0 1px 2px rgba(3, 36, 34, .06);
    --shadow-sm: 0 2px 8px rgba(3, 36, 34, .06), 0 1px 2px rgba(3, 36, 34, .04);
    --shadow-md: 0 8px 24px -6px rgba(3, 36, 34, .12), 0 2px 6px rgba(3, 36, 34, .05);
    --shadow-lg: 0 22px 48px -12px rgba(3, 36, 34, .20), 0 6px 14px rgba(3, 36, 34, .07);
    --shadow-xl: 0 40px 80px -20px rgba(3, 36, 34, .30), 0 12px 24px rgba(3, 36, 34, .10);
    --glow-gold: 0 0 0 1px rgba(224, 169, 46, .35), 0 12px 32px -8px rgba(224, 169, 46, .45);
    --glow-teal: 0 0 0 1px rgba(18, 160, 147, .25), 0 16px 40px -12px rgba(11, 133, 122, .40);
    --inset-top: inset 0 1px 0 rgba(255, 255, 255, .55);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --header-h: 80px;

    --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Amiri', 'Traditional Arabic', serif;
    /* Huruf latin bergaya kaligrafi arab untuk judul utama */
    --font-display: 'Rakkas', 'Amiri', Georgia, serif;
}

/* --------------------------------------------------------------------------
   Dasar
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--mtq-900);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1rem; }

a { color: var(--mtq-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-600); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--gold-300); color: var(--mtq-950); }

.container-mtq {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* --------------------------------------------------------------------------
   Ornamen & utilitas
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Kisi netral
   Motif islami sepenuhnya ditangani lapisan siluet SVG, bukan ubin berulang.
   -------------------------------------------------------------------------- */

.pattern-layer,
.grid-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .09;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 26px);
}

/* --------------------------------------------------------------------------
   Pemisah antar seksi
   Satu ragam saja: garis lurus dengan seberkas cahaya emas dan wajik kecil
   di titik tengah.
   -------------------------------------------------------------------------- */

/*
   Tingginya nol sehingga latar kedua seksi bertemu langsung tanpa pita warna
   perantara; penanda hanya melayang tepat di garis temunya.
*/
.sec-line {
    position: relative;
    z-index: 4;
    height: 0;
    overflow: visible;
}

/* Berkas cahaya tipis */
.sec-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 84%);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(248, 215, 130, .95), transparent);
    box-shadow: 0 0 12px rgba(224, 169, 46, .85);
}

/* Pendar lembut di sekitar berkas cahaya */
.sec-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 66%);
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(224, 169, 46, .45), transparent 70%);
    filter: blur(8px);
}

/* Wajik kecil di titik tengah garis */
.sec-line-mark {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 2px;
    background: linear-gradient(140deg, var(--gold-300), var(--gold-600));
    box-shadow:
        0 0 0 4px rgba(224, 169, 46, .16),
        0 0 18px rgba(224, 169, 46, .85);
}
.bloom {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-700);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500));
}

.eyebrow.on-dark { color: var(--gold-300); }
.eyebrow.on-dark::before { background: linear-gradient(90deg, transparent, var(--gold-300)); }

.section {
    position: relative;
    padding: clamp(64px, 8vw, 112px) 0;
}

.section-head {
    max-width: 720px;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

/* Judul di kiri, tombol di kanan */
.section-head-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    max-width: none;
}

.section-head-split > div { max-width: 620px; }
.section-head-split h2 { margin-bottom: 6px; }

.section-head.center .eyebrow::after {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
}

.section-head p {
    font-size: 1.05rem;
    color: var(--ink-muted);
    margin-bottom: 0;
}

.section-dark {
    background: linear-gradient(160deg, var(--mtq-900) 0%, var(--mtq-800) 55%, var(--mtq-700) 100%);
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
}

.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .section-head p { color: rgba(255, 255, 255, .72); }

.section-sand { background: var(--sand); }

/*
   Pola ragam hias berulang sebagai latar seksi.

   Berkas polanya bergaris hijau di atas bidang putih, bukan transparan,
   jadi tidak bisa ditumpuk begitu saja. Pada seksi terang dipakai
   mix-blend-mode: multiply supaya bidang putihnya lenyap sendiri dan
   hanya garisnya yang tersisa.

   Mask gradasi membuat pola meredup di tepi atas dan bawah agar
   perbatasan dengan seksi tetangga tidak terpotong mendadak.
*/
.section-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: var(--pattern-img);
    background-repeat: repeat;
    background-size: clamp(150px, 15vw, 220px);
    opacity: .07;
    mix-blend-mode: multiply;

    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/*
   Di seksi berlatar gelap, multiply justru menenggelamkan polanya. Berkas
   dibalik lebih dulu: bidang putih menjadi hitam, garis hijau menjadi abu
   terang. Dengan mix-blend-mode: screen, bagian hitam tidak berpengaruh
   sama sekali dan yang tampak hanya garisnya sebagai ragam hias terang.
*/
.section-dark .section-pattern {
    filter: grayscale(1) invert(1);
    mix-blend-mode: screen;
    opacity: .1;
}

/* Pembatas bergelombang antar seksi */
.divider-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px auto 0;
    max-width: 220px;
}

.divider-ornament span {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold-400));
}

.divider-ornament span:last-child {
    background: linear-gradient(90deg, var(--gold-400), transparent);
}

.divider-ornament i { color: var(--gold-500); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------------- */

.btn-mtq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
    text-align: center;
}

.btn-mtq:hover { transform: translateY(-2px); }
.btn-mtq:active { transform: translateY(0); }

.btn-gold {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    box-shadow: var(--glow-gold), var(--inset-top);
}

.btn-gold:hover {
    color: var(--mtq-950);
    box-shadow: 0 0 0 1px rgba(224, 169, 46, .5), 0 18px 40px -10px rgba(224, 169, 46, .6);
}

.btn-teal {
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    color: var(--white);
    box-shadow: var(--glow-teal), var(--inset-top);
}

.btn-teal:hover { color: var(--white); }

.btn-ghost {
    background: rgba(255, 255, 255, .08);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: var(--white);
}

/*
   Merah bergradasi untuk tombol buku pedoman di hero.

   Merahnya dijaga hangat dan agak kecokelatan, bukan merah menyala, supaya
   bisa berdampingan dengan emas dan pirus tanpa saling menjerit.
*/
.btn-crimson {
    background: linear-gradient(140deg, #e2604f, #b32b2b 55%, #7d1622);
    color: var(--white);
    box-shadow:
        0 0 0 1px rgba(226, 96, 79, .34),
        0 14px 32px -12px rgba(150, 28, 36, .6),
        var(--inset-top);
}

.btn-crimson:hover {
    color: var(--white);
    box-shadow:
        0 0 0 1px rgba(226, 96, 79, .55),
        0 20px 42px -12px rgba(150, 28, 36, .75),
        var(--inset-top);
}

.btn-outline {
    background: transparent;
    color: var(--mtq-700);
    border: 1.5px solid var(--line);
    box-shadow: var(--shadow-xs);
}

.btn-outline:hover {
    border-color: var(--gold-400);
    color: var(--gold-700);
    box-shadow: var(--shadow-sm);
}

.btn-sm { padding: 10px 20px; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Header & navigasi
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}

.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 36, 34, .55), transparent);
    z-index: -1;
    transition: opacity .35s var(--ease);
}

.site-header.is-stuck {
    background: rgba(255, 251, 240, .92);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--shadow-md);
}

.site-header.is-stuck::after { opacity: 0; }

.nav-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: -.03em;
    color: var(--mtq-950);
    background: linear-gradient(140deg, var(--gold-300), var(--gold-500));
    box-shadow: var(--glow-gold), var(--inset-top);
    flex-shrink: 0;
}

/*
   Logo yang diunggah menggantikan teks "XXXI" di dalam lambang emas.
   Ukurannya dibatasi lewat max-width/max-height, bukan width/height penuh:
   gambar mengecil sampai muat lalu berhenti, sehingga sisi terpanjangnya
   pas di dalam kotak dan sisanya menyisakan ruang kosong yang seimbang.
   place-items: center pada .brand-mark yang menengahkan hasilnya.
*/
/* Padding bawah dibuat lebih tebal daripada atas: bidang isi ikut bergeser,
   sehingga logo yang ditengahkan grid duduk sedikit lebih tinggi dari titik
   tengah kotak - lebih enak dipandang karena tumpuan bayangan ada di bawah. */
.brand-mark.has-logo { padding: 6px 9px 12px; }

.brand-mark .brand-logo,
.brand-mark img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.brand-text { line-height: 1.15; }

.brand-title {
    display: block;
    font-weight: 800;
    font-size: 1rem;
    color: var(--white);
    letter-spacing: -.01em;
    transition: color .35s var(--ease);
}

.brand-sub {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-300);
    transition: color .35s var(--ease);
}

.is-stuck .brand-title { color: var(--mtq-900); }
.is-stuck .brand-sub { color: var(--gold-700); }

.nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.nav-item { position: relative; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease);
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, .14);
    color: var(--white);
}

.is-stuck .nav-link { color: var(--mtq-800); }

.is-stuck .nav-link:hover,
.is-stuck .nav-link.active {
    background: var(--mtq-50);
    color: var(--mtq-900);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .22s var(--ease);
}

.nav-item:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mtq-800);
}

.nav-dropdown a:hover { background: var(--mtq-50); color: var(--mtq-900); }

/* Tombol tiga garis yang berubah menjadi tanda silang */
.nav-toggle {
    display: none;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .25s var(--ease);
}

.is-stuck .nav-toggle { background: var(--mtq-50); }

.nav-toggle-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
    margin: 0 auto;
}

.nav-toggle-bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--white);
    transition: transform .35s var(--ease), opacity .2s var(--ease), width .35s var(--ease);
}

.is-stuck .nav-toggle-bars i { background: var(--mtq-800); }

.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 7px; width: 70%; }
.nav-toggle-bars i:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel navigasi seluler — turun dari atas, ringkas dua kolom */
.nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    padding-top: var(--header-h);
    background: linear-gradient(170deg, var(--mtq-950) 0%, var(--mtq-800) 100%);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: 0 30px 70px -18px rgba(3, 36, 34, .6);
    transform: translateY(-102%);
    transition: transform .45s var(--ease);
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-mobile.open { transform: translateY(0); }

/* Kisi tipis di latar panel */
.nav-mobile::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .09;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 26px);
}

.nav-mobile-inner {
    position: relative;
    z-index: 1;
    padding: 14px 16px 18px;
}

/* Lambang penyelenggara di kepala panel */
.nav-mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 0 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.nav-brand-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.nav-mobile-brand img { height: 44px; width: auto; flex-shrink: 0; }
.nav-mobile-brand img.is-city { height: 48px; }

.nav-mobile-brand .brand-mark { width: 44px; height: 44px; flex-shrink: 0; }

/* Padding disetarakan dengan kotak 44 px milik panel, bukan 52 px header */
.nav-mobile-brand .brand-mark.has-logo { padding: 5px 7px 9px; }

/* Aturan .nav-mobile-brand img di atas berlaku untuk lambang kota; logo di
   dalam lambang emas harus muat pada kotaknya, bukan tinggi tetap itu. */
.nav-mobile-brand .brand-mark img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Nama pendamping, ukurannya diselaraskan dengan tinggi lambang */
.nav-brand-text { line-height: 1.22; text-align: left; }

.nav-brand-text b {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
}

.nav-brand-text small {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-300);
    white-space: nowrap;
}

.nav-mobile-brand-sep {
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, transparent, rgba(248, 215, 130, .6), transparent);
}

.nav-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Setiap butir muncul berurutan saat panel dibuka */
.nav-mobile-brand,
.nav-mobile-grid > li,
.nav-mobile-foot {
    opacity: 0;
    transform: translateY(-10px);
}

.nav-mobile.open .nav-mobile-brand,
.nav-mobile.open .nav-mobile-grid > li,
.nav-mobile.open .nav-mobile-foot {
    animation: navItemIn .42s var(--ease) both;
    animation-delay: calc(70ms + var(--i) * 36ms);
}

@keyframes navItemIn {
    from { opacity: 0; transform: translateY(-12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/*
   Kartu terang agar terbaca tegas di atas panel gelap. Warnanya bukan putih
   rata: ada gradasi lembut ke arah pirus, semburat emas di sudut, dan pita
   tipis di tepi kiri sebagai aksen.
*/
.nav-mobile-grid a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px 11px 16px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 52%, var(--mtq-50) 100%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 8px 18px -8px rgba(3, 36, 34, .55);
    font-size: .87rem;
    font-weight: 700;
    color: var(--mtq-900);
    transition: background .2s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease);
}

/* Pita aksen di tepi kiri */
.nav-mobile-grid > li > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--gold-400), var(--mtq-400));
}

/* Semburat emas lembut di sudut kanan atas */
.nav-mobile-grid > li > a::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 169, 46, .22), transparent 70%);
    pointer-events: none;
    transition: transform .35s var(--ease);
}

.nav-mobile-grid a:active { transform: scale(.97); }

.nav-mobile-grid a:hover {
    background: linear-gradient(135deg, #ffffff 30%, var(--mtq-100) 100%);
    color: var(--mtq-900);
    box-shadow: 0 12px 24px -10px rgba(3, 36, 34, .6);
}

.nav-mobile-grid > li > a:hover::after { transform: scale(1.35); }

/* Ikon berbingkai lembut */
.nav-mobile-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--mtq-100), var(--mtq-50));
    color: var(--mtq-700);
    font-size: .95rem;
}

.nav-mobile-grid a:hover .nav-mobile-icon {
    background: linear-gradient(145deg, var(--gold-300), var(--gold-500));
    color: var(--mtq-950);
}

.nav-mobile-grid a span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-mobile-grid .sub {
    grid-column: 1 / -1;
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 12px;
    display: grid;
    gap: 4px;
}

.nav-mobile-grid .sub a {
    padding: 9px 12px;
    font-size: .8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
    color: rgba(255, 255, 255, .8);
}

.nav-mobile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Ikon media sosial menggantikan keterangan teks */
.nav-mobile-social {
    display: flex;
    gap: 8px;
}

.nav-mobile-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .88);
    font-size: 1.02rem;
    transition: all .22s var(--ease);
}

.nav-mobile-social a:hover {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    border-color: transparent;
    color: var(--mtq-950);
    transform: translateY(-2px);
}

.nav-mobile-foot button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    margin-left: auto;
}

.nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(3, 36, 34, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: all .3s var(--ease);
    z-index: 1050;
}

.nav-scrim.open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: min(100svh, 860px);
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 48px) 0 72px;
    background: linear-gradient(155deg, var(--mtq-950) 0%, var(--mtq-800) 45%, var(--mtq-600) 100%);
    overflow: hidden;
    isolation: isolate;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.2s var(--ease), transform 7s linear;
    z-index: -2;
}

.hero-slide.active { opacity: .5; transform: scale(1); }

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 22%, rgba(47, 188, 172, .40), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(224, 169, 46, .28), transparent 52%),
        linear-gradient(180deg, rgba(3, 36, 34, .35), rgba(3, 36, 34, .78));
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    position: relative;
    z-index: 2;
}

/*
   Seluruh isi kolom teks hero rata tengah. Ditetapkan pada wadahnya, bukan
   satu per satu pada anaknya: lambang penyelenggara berupa inline-flex,
   sehingga ia ikut tertata oleh text-align yang sama - satu pernyataan yang
   menjaga seluruh isinya tetap selurus.
*/
.hero-copy {
    padding-bottom: clamp(8px, 3vw, 40px);
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px 7px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    color: var(--gold-200);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}

.hero-badge b {
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    font-size: .72rem;
    letter-spacing: .1em;
}

/*
   Lambang penyelenggara di kepala hero, menggantikan pil "XXXI".
   Tampil polos tanpa alas; bayangan lembut dipakai agar tepi logo tetap
   terbaca di atas gradasi hijau gelap hero.
*/
.hero-logos {
    display: inline-flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 26px);
    margin-bottom: 20px;
}

.hero-logo-event {
    height: clamp(112px, 12vw, 152px);
    width: auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}

.hero-logo-city {
    height: clamp(86px, 9.2vw, 118px);
    width: auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}

/*
   Garis pemisah tipis, memudar di kedua ujung agar tidak terkesan kaku.
   Bagian tengahnya dibuat pekat pada rentang 22% - 78% supaya tetap terbaca
   di atas foto slider yang terang, dibantu bayangan gelap tipis sebagai
   pemisah bila kebetulan jatuh di bidang berwarna muda.
*/
.hero-logos-sep {
    width: 1px;
    align-self: stretch;
    margin: 12px 0;
    background: linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, .72) 22%,
            rgba(255, 255, 255, .72) 78%,
            transparent);
    box-shadow: 0 0 5px rgba(3, 36, 34, .45);
}

/* Judul hero memakai huruf latin bergaya kaligrafi arab */
.hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--white);
    font-size: clamp(2.05rem, 4.6vw, 3.1rem);
    line-height: 1.2;
    letter-spacing: .01em;
    text-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    margin-bottom: 12px;
    /* Kedua barisnya dipenggal serata mungkin - baris yang menyisakan satu
       dua kata terlihat menggantung begitu judulnya ditengahkan. */
    text-wrap: balance;
}

/* Baris atas sedikit lebih kecil daripada baris emas, bukan jauh lebih kecil */
.hero h1 .hero-title-top {
    display: block;
    font-size: .78em;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .94);
}

.hero h1 .gold {
    display: block;
    background: linear-gradient(120deg, var(--gold-300), var(--gold-500) 55%, var(--gold-200));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*
   Ornamen pemisah di bawah judul.

   Kedua ekornya sama panjang dan arah pudarnya saling menjauhi berlian di
   tengah, lalu keseluruhannya ditengahkan terhadap kolom teks. Bentuk berat
   sebelah yang dipakai sebelumnya - ekor kiri pendek dan tetap - hanya masuk
   akal bila ornamennya menempel di tepi kiri; sebagai penanda jeda antara
   judul dan tema, letak di tengah yang membuatnya terbaca seimbang.
*/
.hero-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(300px, 100%);
    margin: 0 auto 20px;
}

.hero-rule span {
    height: 1px;
    flex: 1 1 0;
    background: linear-gradient(90deg, var(--gold-400), transparent);
}

.hero-rule span:first-child {
    background: linear-gradient(90deg, transparent, var(--gold-400));
}

.hero-rule i {
    font-size: .5rem;
    color: var(--gold-400);
    filter: drop-shadow(0 0 7px rgba(224, 169, 46, .85));
}

/*
   Tema acara - dibatasi dua baris supaya hero tidak memanjang.

   Ditengahkan tanpa garis tepi di kiri: tanda kutip pada teksnya sudah
   menandai bahwa ini kutipan, dan garis tepi kiri pada teks yang ditengahkan
   adalah dua isyarat perataan yang saling bertentangan.

   Lebarnya dibiarkan sepenuh kolom, sama persis dengan judul di atasnya.
   Batas 30em yang dipakai sebelumnya menyempitkannya beberapa puluh piksel
   di tiap sisi - selisih yang justru terbaca sebagai dua blok yang tidak
   selurus, bukan sebagai bidang baca yang lebih nyaman.
*/
.hero-theme {
    position: relative;
    font-family: var(--font-arabic);
    font-size: clamp(1rem, 1.9vw, 1.28rem);
    line-height: 1.55;
    color: var(--gold-200);
    max-width: 100%;
    margin: 0 auto 22px;
    text-align: center;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
   Tanggal dan kota ditulis polos, tanpa lapik berbentuk pil.

   Bentuk pil membuat keduanya tampak dapat ditekan dan menyaingi sepasang
   tombol tepat di bawahnya - padahal ini keterangan, bukan ajakan bertindak.
   Yang membedakannya kini tinggal lambang emas dan satu garis pemisah tipis.
*/
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    margin-bottom: 26px;
}

.hero-facts .fact {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .93);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 2px 10px rgba(3, 36, 34, .55);
    white-space: nowrap;
}

/* Garis tegak tipis di sela keduanya, digambar pada jarak antar kolom */
.hero-facts .fact + .fact::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    width: 1px;
    height: 15px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .28);
}

.hero-facts .fact i { color: var(--gold-300); font-size: 1.05rem; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/*
   ---- Sepasang tombol utama hero ----

   Keduanya mendapat kilau yang menyapu saat disorot. Yang emas - satu-satunya
   ajakan bertindak di layar pertama - juga berdenyut sendiri tanpa diminta;
   denyut itulah yang menariknya keluar dari latar foto slider yang ramai.

   Denyutnya dimatikan begitu disorot, bukan sekadar dijeda: perhatian sudah
   didapat pada saat itu, dan denyut yang dibekukan di tengah langkah akan
   mengunci bayangannya sehingga bayangan sorot tidak pernah tampil.
*/
.hero-btn {
    position: relative;
    /* Kilaunya dipangkas mengikuti lengkung tombol */
    overflow: hidden;
    /* Konteks penumpukan sendiri agar kilau ber-z-index negatif berhenti di
       atas latar tombol, tidak tenggelam ke belakang hero */
    isolation: isolate;
    /*
       Dirampingkan agar ketiganya muat satu baris. Kolom teks hero hanya
       separuh lebar halaman di layar lebar - dengan ukuran tombol sebelumnya
       yang ketiga selalu terlempar ke baris kedua. Lapik dan hurufnya
       mengikuti lebar layar lewat clamp, jadi di layar sempit - saat hero
       menjadi satu lajur dan ruangnya melimpah - ukurannya kembali lega.
    */
    padding: 12px clamp(11px, 1.3vw, 20px);
    font-size: clamp(.75rem, .88vw, .88rem);
    gap: 7px;
    flex: 0 1 auto;
    min-width: 0;
}

/* Nama tombol tidak boleh terpenggal jadi dua baris - itu yang membuat
   tingginya berbeda-beda dan barisnya terlihat berantakan. */
.hero-btn span { white-space: nowrap; }

.hero-btn i {
    font-size: .98rem;
    transition: transform .4s var(--ease);
}

/*
   Siluet wajik pada badan tombol - ragam hias yang sama dengan latar hero,
   dirapatkan dari jarak 26 px menjadi 13 px agar pola utuhnya tetap terbaca
   di bidang sesempit ini.

   Warnanya mengikuti warna tulisan tombol lewat currentColor, jadi ia gelap
   di atas emas dan terang di atas pirus tanpa perlu dua aturan terpisah.
   Bagian tengahnya dilubangi dengan mask supaya tulisan dan lambangnya
   selalu jatuh di bidang bersih - ragam hias yang menerus di belakang huruf
   akan mengaburkannya justru pada tombol yang paling ingin dibaca.
*/
.hero-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background-image:
        repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 13px),
        repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 13px);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 40%, transparent 60%, #000);
    mask-image: linear-gradient(90deg, #000, transparent 40%, transparent 60%, #000);
}

.hero-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    z-index: -1;
    width: 42%;
    transform: skewX(-18deg);
    transition: left .65s var(--ease);
}

.hero-btn:hover::after,
.hero-btn:focus-visible::after { left: 130%; }

.hero-btn.btn-gold::after {
    background: linear-gradient(100deg, transparent, rgba(255, 251, 240, .8), transparent);
}

.hero-btn.btn-teal::after {
    background: linear-gradient(100deg, transparent, rgba(213, 242, 237, .55), transparent);
}

.hero-btn.btn-gold { animation: heroPulse 3.4s var(--ease) infinite; }
.hero-btn.btn-gold:hover { animation: none; }

@keyframes heroPulse {
    0%, 100% { box-shadow: var(--glow-gold), var(--inset-top); }
    45% {
        box-shadow:
            0 0 0 8px rgba(224, 169, 46, .17),
            0 20px 44px -10px rgba(224, 169, 46, .62),
            var(--inset-top);
    }
}

/* Pirus penuh sebagai pendamping tombol emas - warna pokok tema, cukup pekat
   untuk berdiri di atas foto slider tanpa menyaingi emas di sebelahnya. */
.hero-btn.btn-teal:hover {
    box-shadow:
        0 0 0 1px rgba(18, 160, 147, .4),
        0 20px 44px -12px rgba(11, 133, 122, .7),
        var(--inset-top);
}

.hero-btn.btn-crimson::after {
    background: linear-gradient(100deg, transparent, rgba(255, 240, 232, .62), transparent);
}

/*
   Tombol buku pedoman berdenyut sendiri seperti tombol emas, tetapi dengan
   irama berbeda - 4,2 detik berbanding 3,4 detik. Dua denyut sepanjang siklus
   yang sama akan berdetak serempak dan terbaca seperti satu blok berkedip;
   irama yang tidak sepadan membuat keduanya bergantian menarik perhatian.
*/
.hero-btn.btn-crimson { animation: heroGuideGlow 4.2s var(--ease) infinite; }
.hero-btn.btn-crimson:hover { animation: none; }

@keyframes heroGuideGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(226, 96, 79, .34),
            0 14px 32px -12px rgba(150, 28, 36, .6),
            var(--inset-top);
    }
    50% {
        box-shadow:
            0 0 0 7px rgba(226, 96, 79, .16),
            0 18px 40px -12px rgba(150, 28, 36, .72),
            var(--inset-top);
    }
}

/*
   Bukunya terbuka sekejap tiap satu putaran, bukan bergoyang terus-menerus.
   Gerak yang tak henti di layar pertama melelahkan; jeda panjang di antara
   dua kedipan justru yang membuatnya tertangkap mata.
*/
.hero-btn.btn-crimson i { animation: heroBookFlip 4.2s var(--ease) infinite; }

/* Dimatikan saat disorot supaya gerak ikon versi sorot yang berlaku -
   animasi selalu mengalahkan transform dari aturan biasa. */
.hero-btn.btn-crimson:hover i { animation: none; }

@keyframes heroBookFlip {
    0%, 70%, 100% { transform: none; }
    76% { transform: rotate(-11deg) translateY(-2px); }
    84% { transform: rotate(7deg); }
    91% { transform: rotate(-3deg); }
}

.hero-btn.btn-crimson:hover i { transform: translateY(-2px) scale(1.12); }

/* Almanak terangkat sedikit; jarum kompas berputar mencari arah */
.hero-btn.btn-gold:hover i { transform: translateY(-2px) scale(1.12); }
.hero-btn.btn-teal:hover i { transform: rotate(72deg); }

/* Cincin fokus terang - latar hero terlalu ramai untuk garis tepi tipis.
   Denyutnya ikut dimatikan: animasi mengalahkan pernyataan biasa, jadi
   selama ia berjalan cincin fokus tidak akan pernah tampak. */
.hero-actions .hero-btn:focus-visible {
    outline: 0;
    animation: none;
    box-shadow:
        0 0 0 3px rgba(3, 36, 34, .6),
        0 0 0 6px var(--gold-300);
}

/* --- Panggung visual: foto pimpinan --- */

.hero-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 420px;
}

/*
   Foto pimpinan sengaja tanpa bayangan maupun lapisan cahaya di belakangnya,
   supaya yang tampak benar-benar hanya siluet figurnya.
*/
.hero-leaders {
    position: relative;
    margin: 0;
    text-align: center;
    animation: leadersRise 1.1s var(--ease) both;
}

/* Tepi bawah dilarutkan agar potongan foto tidak terlihat terpancung */
.hero-leaders img {
    max-height: min(58vh, 480px);
    width: auto;
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

.hero-leaders figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: -10px;
}

.hero-leaders figcaption span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(6, 40, 38, .55);
    border: 1px solid rgba(248, 215, 130, .35);
    backdrop-filter: blur(10px);
    font-size: .78rem;
    font-weight: 700;
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.hero-leaders figcaption span small {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-300);
}

@keyframes leadersRise {
    from { opacity: 0; transform: translateY(36px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   Tombol mengambang Semarang Virtual Tour (sisi kiri layar)
   Bentuk dan animasi mengikuti tombol Virtual Tour pada situs Dialog Nasional
   MBG: lingkaran berdenyut, sapuan kilau melintang, cincin emas di dalam, dan
   logo yang menyembul keluar dari bibir lingkaran.
   -------------------------------------------------------------------------- */

.vt-float {
    position: fixed;
    left: 22px;
    bottom: 26px;
    z-index: 950;

    width: 198px;
    height: 198px;
    padding: 16px 12px;
    border-radius: 50%;
    isolation: isolate;
    overflow: visible;
    text-align: center;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(248, 215, 130, .42);
    background: radial-gradient(circle at 30% 28%,
            rgba(224, 169, 46, .34),
            rgba(6, 85, 79, .90) 52%,
            rgba(3, 36, 34, .96) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(3, 36, 34, .42);
    cursor: pointer;
    transition:
        width .34s var(--ease),
        height .34s var(--ease),
        padding .34s var(--ease),
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        filter .3s ease;
    animation: vtPulse 2.8s ease-in-out infinite;
}

/*
   Saat digulir turun lencana mengecil supaya tidak menutupi isi halaman;
   kelas ini dipasang dan dilepas oleh app.js mengikuti arah gulir.
*/
.vt-float.is-mini {
    width: 92px;
    height: 92px;
    padding: 0;
}

.vt-float.is-mini .vt-caption { display: none; }

.vt-float.is-mini .vt-logo {
    width: 98px;
    max-height: 98px;
    margin-top: -14px;
}

@keyframes vtPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(3, 36, 34, .42); }
    50% { box-shadow: 0 14px 32px rgba(224, 169, 46, .32), 0 0 0 7px rgba(224, 169, 46, .12); }
}

/* Sapuan kilau melintasi lingkaran */
.vt-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 32%,
            rgba(255, 255, 255, .18) 44%,
            rgba(255, 255, 255, .48) 50%,
            rgba(255, 255, 255, .18) 56%,
            rgba(255, 255, 255, 0) 68%);
    background-size: 240% 240%;
    background-position: -180% 50%;
    animation: vtShine 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes vtShine {
    0% { background-position: -180% 50%; opacity: 0; }
    18% { opacity: .85; }
    38% { background-position: 160% 50%; opacity: 0; }
    100% { background-position: 160% 50%; opacity: 0; }
}

/* Cincin emas tipis di dalam lingkaran */
.vt-float::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1px solid rgba(224, 169, 46, .34);
    opacity: .8;
    pointer-events: none;
    z-index: 1;
}

/* Logo menyembul keluar dari bibir atas lingkaran.
   Tinggi mengikuti rasio gambar supaya tidak ada bidang kosong di bawahnya. */
.vt-logo {
    width: 166px;
    height: auto;
    max-height: 168px;
    margin-top: -44px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(3, 36, 34, .45));
    animation: vtFloatLogo 3.6s ease-in-out infinite;
    position: relative;
    z-index: 2;
    transition: width .34s var(--ease), max-height .34s var(--ease), margin-top .34s var(--ease);
}

.vt-logo-fallback {
    display: grid;
    place-items: center;
    font-size: 4.4rem;
    color: var(--gold-300);
}

@keyframes vtFloatLogo {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1.8deg); }
}

.vt-caption {
    position: relative;
    z-index: 2;
    margin-top: -4px;
    max-width: 148px;
}

.vt-caption small {
    display: block;
    margin-bottom: 1px;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
    transition: color .3s ease, letter-spacing .3s ease;
}

.vt-caption b {
    display: block;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: .01em;
    color: var(--gold-300);
    text-shadow: 0 2px 10px rgba(3, 36, 34, .55);
    animation: vtTextPulse 2.8s ease-in-out infinite;
}

@keyframes vtTextPulse {
    0%, 100% { opacity: .92; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

.vt-float:hover {
    transform: translateY(-7px) scale(1.045);
    border-color: rgba(248, 215, 130, .85);
    box-shadow: 0 14px 34px rgba(224, 169, 46, .3), 0 0 0 8px rgba(224, 169, 46, .1);
    filter: saturate(1.08);
}

.vt-float:hover .vt-logo { animation-duration: 2s; }
.vt-float:hover .vt-caption b { color: var(--gold-200); }

.vt-float:hover .vt-caption small {
    color: rgba(255, 255, 255, .95);
    letter-spacing: .14em;
}

/* --------------------------------------------------------------------------
   Maskot mengambang (khusus layar sempit)

   Di desktop maskot menempel pada bilah hitung mundur. Di ponsel ruangnya
   tidak cukup, jadi bentuknya diubah menjadi lencana bundar yang menumpuk
   di atas tombol Virtual Tour, memakai bahasa visual yang sama: gradasi
   hijau-emas, cincin tipis, denyut bayangan, dan gambar menyembul ke atas.
   -------------------------------------------------------------------------- */

.mascot-float { display: none; }

@media (max-width: 768px) {
    .mascot-float {
        position: fixed;
        left: 10px;
        bottom: 110px;
        z-index: 949;

        width: 84px;
        height: 84px;
        border-radius: 50%;
        isolation: isolate;
        overflow: visible;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid rgba(248, 215, 130, .42);
        background: radial-gradient(circle at 30% 28%,
                rgba(224, 169, 46, .34),
                rgba(6, 85, 79, .90) 52%,
                rgba(3, 36, 34, .96) 100%);
        backdrop-filter: blur(6px);
        animation: vtPulse 2.8s ease-in-out infinite;
        transition: width .34s var(--ease), height .34s var(--ease), bottom .34s var(--ease);

        /* Murni hiasan, jadi tidak boleh menghalangi sentuhan pada konten */
        pointer-events: none;
    }

    /* Ikut mengecil bersama tombol Virtual Tour agar tumpukannya tetap rapat */
    .mascot-float.is-mini { width: 62px; height: 62px; }
    .mascot-float.is-mini:not(.is-alone) { bottom: 88px; }
    .mascot-float.is-mini .mascot-float-img { width: 62px; margin-top: -18px; }

    /* Tanpa tombol Virtual Tour, lencana turun ke posisi dasarnya */
    .mascot-float.is-alone { bottom: 12px; }

    /* Cincin emas tipis di dalam lingkaran */
    .mascot-float::after {
        content: '';
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        border: 1px solid rgba(224, 169, 46, .34);
        opacity: .8;
    }

    /* Menyembul keluar dari bibir atas lingkaran */
    .mascot-float-img {
        position: relative;
        z-index: 2;
        width: 82px;
        height: auto;
        margin-top: -26px;
        filter: drop-shadow(0 8px 18px rgba(3, 36, 34, .55));
        transition: width .34s var(--ease), margin-top .34s var(--ease);
    }

    /* Di ponsel lencana sudah kecil, jadi penyusutannya dibuat lebih ringan */
    .vt-float.is-mini { width: 62px; height: 62px; }
    .vt-float.is-mini .vt-logo { width: 66px; max-height: 66px; margin-top: -8px; }
}

/* --------------------------------------------------------------------------
   Bilah hitung mundur
   -------------------------------------------------------------------------- */

.countdown-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    flex-wrap: wrap;
    margin-top: clamp(24px, 4vw, 40px);
    padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 32px);
    border-radius: var(--radius-lg);
    background: linear-gradient(115deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .20);
    backdrop-filter: blur(18px);
    box-shadow:
        0 32px 64px -18px rgba(3, 36, 34, .60),
        0 12px 24px -8px rgba(3, 36, 34, .35),
        var(--inset-top);
}

/* Garis emas tipis di tepi atas */
.countdown-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.countdown-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 300px;
    min-width: 0;
}

/* Maskot sudah menjadi jangkar visual, jaraknya dirapatkan agar teks
   "Menuju Pembukaan" ikut bergeser ke kiri. */
.has-mascot .countdown-lead { gap: 12px; }

/*
   Maskot mengisi ujung kiri bilah hitung mundur. Tingginya sengaja jauh
   melebihi bilah dan ditarik ke atas lewat margin negatif supaya kepalanya
   menyembul keluar - bilah tidak memakai overflow:hidden, jadi aman.
   Margin kiri negatif membuatnya menempel rata dengan tepi bilah.
*/
.countdown-mascot {
    align-self: flex-end;
    position: relative;
    z-index: 3;
    height: clamp(158px, 16vw, 216px);
    width: auto;
    flex-shrink: 0;
    margin: -86px 4px -16px clamp(-18px, -1.6vw, -10px);
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5));
    pointer-events: none;
}

/* Ruang di sisi kiri agar isi tidak tertutup tombol mengambang Virtual Tour.
   Bila maskot dipasang, dialah yang mengisi sisi kiri, jadi bilah kembali
   rata kiri seperti biasa. */
@media (min-width: 1200px) {
    .countdown-bar:not(.has-mascot) { padding-left: 216px; }
}

.countdown-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--gold-300), var(--gold-600));
    color: var(--mtq-950);
    font-size: 1.5rem;
    box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: cdTilt 4s ease-in-out infinite;
}

@keyframes cdTilt {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(6deg); }
}

.countdown-text { min-width: 0; }

.countdown-text small {
    display: block;
    font-size: clamp(.92rem, 1.5vw, 1.12rem);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-300);
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(3, 36, 34, .5);
}

.countdown-text b {
    display: block;
    font-size: clamp(1.02rem, 1.7vw, 1.28rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.35;
}

.countdown-text em {
    display: block;
    font-style: normal;
    font-size: .86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}

.countdown-text em i { color: var(--gold-300); }

.countdown-units {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-left: auto;
}

.cd-unit {
    position: relative;
    min-width: 78px;
    padding: 12px 10px 10px;
    text-align: center;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(3, 36, 34, .58), rgba(3, 36, 34, .34));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 10px 22px -8px rgba(0, 0, 0, .5);
    overflow: hidden;
}

/* Kilau emas di puncak setiap kotak angka */
.cd-unit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.cd-unit b {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 16px rgba(224, 169, 46, .45);
}

.cd-unit span {
    display: block;
    margin-top: 2px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

/* Kotak detik berdenyut halus sebagai penanda hitungan berjalan */
.cd-unit.is-live b { animation: cdTick 1s ease-in-out infinite; }

@keyframes cdTick {
    0%, 100% { transform: scale(1); color: var(--white); }
    50% { transform: scale(1.07); color: var(--gold-300); }
}

.countdown-note {
    flex-basis: 100%;
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gold-200);
}

.countdown-note:empty { display: none; }

/*
   Peralihan hero ke seksi pertama: lengkung dangkal menghadap ke atas.
   Digambar sebagai SVG agar busurnya menyatu penuh dari tepi ke tepi; dengan
   border-radius, sudut yang terpotong menyisakan baji bersisi lurus.
*/
.hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    display: block;
    width: 100%;
    height: clamp(20px, 2.6vw, 38px);
    z-index: 2;
    pointer-events: none;
}

.hero-wave path { fill: var(--cream); }

.hero-dots {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.hero-dots button {
    width: 28px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: all .3s var(--ease);
    padding: 0;
}

.hero-dots button.active { background: var(--gold-400); width: 44px; }

/* --------------------------------------------------------------------------
   Bilah statistik
   -------------------------------------------------------------------------- */

.stat-strip {
    position: relative;
    margin-top: -60px;
    z-index: 5;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.stat-item {
    position: relative;
    padding: 30px 20px 26px;
    text-align: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 26px 54px -16px rgba(3, 36, 34, .28),
        0 8px 18px -6px rgba(3, 36, 34, .12),
        var(--inset-top);
    transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}

.stat-item:hover {
    transform: translateY(-7px);
    box-shadow:
        0 38px 70px -18px rgba(3, 36, 34, .34),
        0 12px 24px -8px rgba(3, 36, 34, .16);
}

/* Pita emas yang memanjang saat kartu disorot */
.stat-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-400), var(--mtq-400));
    transform: scaleX(0);
    transition: transform .4s var(--ease);
}

.stat-item:hover::after { transform: scaleX(1); }

/* Cahaya lembut di sudut kartu */
.stat-item::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 169, 46, .16), transparent 70%);
    transition: transform .5s var(--ease);
}

.stat-item:hover::before { transform: scale(1.5); }

.stat-icon {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: 1.5rem;
    color: var(--mtq-800);
    background: linear-gradient(150deg, var(--mtq-100), var(--mtq-50));
    box-shadow: var(--shadow-sm), var(--inset-top);
    transition: background .32s var(--ease), color .32s var(--ease), transform .32s var(--ease);
}

.stat-item:hover .stat-icon {
    background: linear-gradient(150deg, var(--gold-300), var(--gold-500));
    color: var(--mtq-950);
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: var(--glow-gold), var(--inset-top);
}

.stat-value {
    position: relative;
    z-index: 1;
    display: block;
    font-size: clamp(1.9rem, 3.6vw, 2.65rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.03em;
    background: linear-gradient(140deg, var(--mtq-800), var(--mtq-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-label {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 4px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--mtq-800);
}

.stat-note {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 6px;
    font-size: .76rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Kartu umum
   -------------------------------------------------------------------------- */

.card-mtq {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-mtq::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--mtq-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.card-mtq:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.card-mtq:hover::after { transform: scaleX(1); }

.card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(140deg, var(--mtq-700), var(--mtq-500));
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.card-mtq:hover .card-media img { transform: scale(1.06); }

.card-media .placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .45);
    font-size: 2rem;
}

.card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-body h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.card-body p {
    font-size: .9rem;
    color: var(--ink-muted);
    margin-bottom: 14px;
}

.card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .82rem;
    font-weight: 600;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--mtq-50);
    color: var(--mtq-700);
}

.chip-gold { background: var(--gold-100); color: var(--gold-800); }
.chip-solid { background: linear-gradient(140deg, var(--gold-400), var(--gold-600)); color: var(--mtq-950); }

.chip-float {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(255, 251, 240, .94);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
}

/* Pembungkus yang tidak ikut membentuk tata letak - anaknya naik menjadi
   anak langsung induknya. Dipakai agar satu markup bisa melayani dua bentuk:
   kisi biasa dan rel geser, tanpa mencabang di dua tempat. */
.contents { display: contents; }

.grid {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Tentang
   -------------------------------------------------------------------------- */

/*
   Kedua kolom dimulai dari atas, bukan ditengahkan.

   Perataan tengah masuk akal ketika kedua kolomnya sama-sama pendek. Begitu
   naskah sambutan memanjang menjadi dua kolom, foto yang jauh lebih rendah
   ikut terdorong turun ke tengah tumpukan teks - terlihat seperti melayang
   tanpa pijakan, jauh di bawah kalimat pembukanya.

   Dengan start, puncak topi - yang menyembul 8% ke atas dari bingkai foto -
   jatuh sedikit di atas baris pertama naskah, kira-kira dua puluhan piksel.
   Jarak itulah yang membuat keduanya terbaca sebagai satu sapaan.
*/
.about-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

/*
   Kartu foto pejabat. Fotonya sengaja ditarik ke atas sejauh --pop sehingga
   bagian topi menyembul keluar dari kartu. Latar putih pada jalur teratas
   berkas gambar sudah dibuat transparan, jadi yang tampak di luar kartu hanya
   siluet topinya. Rasio kartu dipilih agar foto tidak terpotong sisi kanan-kiri:
   0,81 = rasio asli foto (0,75) dikali tinggi total 108%.
*/
.about-figure {
    --pop: 8%;
    position: relative;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    aspect-ratio: .81;
    margin-top: 44px;
    background: var(--white);
}

.about-figure img {
    position: absolute;
    left: 0;
    top: calc(-1 * var(--pop));
    width: 100%;
    height: calc(100% + var(--pop));
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-xl);
}

.about-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, transparent 50%, rgba(3, 36, 34, .75));
}

.about-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    color: var(--white);
}

.about-caption strong { display: block; font-size: 1.05rem; }
.about-caption span { font-size: .82rem; color: var(--gold-300); }

/*
   ---- Sambutan Wali Kota ----

   Naskah yang panjang disusun bergaya cetak: dua kolom rata kanan-kiri yang
   dipisah garis putus-putus, huruf pertama dibesarkan setinggi tiga baris
   dengan huruf judul berlanggam kaligrafi, dan tanda kutip dibiarkan
   menyembul di sudut sebagai cap air. Hasilnya sambutan terbaca separuh
   lebih pendek tanpa satu kata pun dipangkas.

   Kelas is-columns dipasang dari Blade hanya bila naskahnya memang panjang -
   sambutan pendek yang dipaksa dua kolom hanya menyisakan kolom kedua yang
   nyaris kosong.
*/
/* Jarak atas menyediakan ruang bagi cap air tanda kutip yang menyembul
   keluar dari sisi atas blok, agar tidak menabrak paragraf pengantar. */
.about-message {
    position: relative;
    margin-top: 22px;
}

.quote-mark {
    position: absolute;
    top: -38px;
    right: -2px;
    z-index: 0;
    font-family: Georgia, serif;
    font-size: 5.6rem;
    line-height: 1;
    color: var(--gold-300);
    opacity: .34;
    pointer-events: none;
    display: block;
}

/* Garis emas penutup sambutan, sekaligus jeda sebelum daftar poin */
.about-message::after {
    content: '';
    display: block;
    width: 66px;
    height: 3px;
    margin-top: 18px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-400), rgba(224, 169, 46, 0));
}

.about-text {
    position: relative;
    z-index: 1;
    font-size: 1.02rem;
}

.about-text p { margin: 0 0 14px; }
.about-text p:last-child { margin-bottom: 0; }

.about-text.is-columns {
    /*
       Lebar minimum ikut disebut bersama jumlah kolom: pada bidang sempit -
       misalnya layar 1000 px yang lajur teksnya tinggal 470-an px - peramban
       kembali menyusunnya satu kolom sendiri, alih-alih memaksakan dua kolom
       selebar dua puluhan huruf yang membuat rata kanan-kiri penuh celah.
    */
    column-width: 250px;
    column-count: 2;
    column-gap: 36px;
    column-rule: 1px dashed var(--mtq-200);
    font-size: .95rem;
    line-height: 1.82;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    /* Sebaris tunggal yang terlempar ke kolom sebelah terlihat seperti salah
       cetak; dua baris menjadi batas terkecil yang boleh berpindah. */
    orphans: 2;
    widows: 2;
}

.about-text.is-columns > p:first-child::first-letter {
    float: left;
    margin: 8px 10px 0 0;
    font-family: var(--font-display);
    font-size: 3.3rem;
    line-height: .74;
    color: var(--gold-600);
}

/* --------------------------------------------------------------------------
   Cabang lomba
   -------------------------------------------------------------------------- */

/*
   Maskot berwarna asli sebagai latar seksi cabang lomba. Diletakkan di
   sisi kanan bawah dan sedikit meluber keluar tepi supaya tidak terkesan
   sekadar ditempel; kartu berada di depannya lewat z-index bawaan
   .container-mtq.
*/
.has-watermark { overflow: hidden; }

.branch-watermark {
    position: absolute;
    right: clamp(-70px, -3.6vw, -18px);
    bottom: -22px;
    z-index: 0;
    width: clamp(320px, 38vw, 580px);
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 18px 34px rgba(3, 36, 34, .22));
}

/* Pendamping di sisi kiri, dibuat sedikit lebih kecil agar sisi kanan
   tetap menjadi titik berat dan seksi tidak terasa simetris kaku. */
.branch-watermark.is-left {
    right: auto;
    left: clamp(-64px, -3.2vw, -16px);
    width: clamp(280px, 33vw, 500px);
}

.branch-card {
    position: relative;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.branch-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 169, 46, .16), transparent 70%);
    transition: transform .5s var(--ease);
}

.branch-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.branch-card:hover::before { transform: scale(1.5); }

.branch-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--mtq-800);
    background: linear-gradient(145deg, var(--mtq-100), var(--mtq-50));
    box-shadow: var(--shadow-sm), var(--inset-top);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.branch-card:hover .branch-icon {
    background: linear-gradient(145deg, var(--gold-300), var(--gold-500));
    color: var(--mtq-950);
}

/* --------------------------------------------------------------------------
   Tabel di dalam naskah

   Dipakai tabel golongan dan tempat pelaksanaan pada halaman cabang lomba.
   Tabel adalah satu-satunya isi naskah yang tidak bisa dipaksa menyempit -
   kolomnya punya lebar minimum sendiri. Karena itu ia digeser di dalam
   pembungkusnya, bukan dibiarkan mendorong seluruh halaman ikut melebar.
   -------------------------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    margin: 18px 0 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    -webkit-overflow-scrolling: touch;
}

.prose table {
    width: 100%;
    /* Di bawah lebar ini kolom Tempat mulai terpenggal per kata */
    min-width: 440px;
    border-collapse: collapse;
    font-size: .88rem;
    background: var(--white);
}

.prose thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    white-space: nowrap;
}

.prose tbody td {
    padding: 11px 16px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    vertical-align: top;
}

/* Kolom pertama - nama golongan - dipertegas sebagai kunci barisnya */
.prose tbody td:first-child { font-weight: 700; color: var(--mtq-900); }

/* Nomor majelis dijaga tidak terpenggal jadi dua baris */
.prose tbody td:nth-child(2) { white-space: nowrap; color: var(--gold-700); font-weight: 700; }

.prose tbody tr:nth-child(even) td { background: var(--mtq-50); }

/* Penghitung sisa golongan - dibedakan dari chip berisi nama golongan
   supaya tidak terbaca sebagai salah satu golongan itu sendiri. */
.chip.is-more {
    background: transparent;
    border: 1px dashed var(--mtq-200);
    color: var(--ink-muted);
    font-weight: 600;
}

.branch-card h3 { font-size: 1.08rem; margin-bottom: 8px; position: relative; z-index: 1; }
.branch-card p { font-size: .88rem; color: var(--ink-muted); position: relative; z-index: 1; }

.branch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Jadwal / Rangkaian Kegiatan
   -------------------------------------------------------------------------- */

/* Ringkasan angka di bawah judul seksi */
/*
   Ringkasan "N hari / N kegiatan". Ditengahkan dari kelasnya sendiri: kepala
   seksi di atasnya memang sudah rata tengah, tetapi text-align tidak mengatur
   letak anak sebuah wadah flex - itu urusan justify-content.
*/
.agenda-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.agenda-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
}

.agenda-meta i { color: var(--gold-300); }

/* --- Pemilih hari --- */

/* --- Pemilih hari yang dapat digeser --- */

.day-scroller {
    position: relative;
    margin-bottom: 30px;
}

.day-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;

    /* Ruang di kiri-kanan disediakan untuk tombol panah, supaya tab pertama
       dan terakhir tidak pernah tertutup saat strip digeser sampai mentok. */
    padding: 6px 48px 10px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scroll-padding-inline: 48px;

    /* Bilah gulir bawaan disembunyikan; isyarat masih bisa digeser cukup
       diwakili tombol panah. Peredupan tepi sengaja tidak dipakai karena
       ikut meredupkan tab terpilih ketika berada di ujung. */
    scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar { display: none; }

/* Tanpa luapan, tombol panah tidak diperlukan dan tab cukup ditengahkan */
.day-scroller.is-static .day-tabs {
    justify-content: center;
    flex-wrap: wrap;
    padding-inline: 0;
}

.day-scroller.is-static .day-nav { display: none; }

.day-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(3, 36, 34, .72);
    backdrop-filter: blur(10px);
    color: var(--gold-300);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all .25s var(--ease);
}

.day-nav.prev { left: -8px; }
.day-nav.next { right: -8px; }

.day-nav:hover {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    border-color: transparent;
    color: var(--mtq-950);
    transform: translateY(-50%) scale(1.08);
}

.day-nav[disabled] { opacity: 0; pointer-events: none; }

.day-tab {
    flex-shrink: 0;
    scroll-snap-align: center;
    min-width: 116px;
    padding: 16px 20px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: all .28s var(--ease);
    backdrop-filter: blur(6px);
}

.day-tab small {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .72;
}

.day-tab b {
    display: block;
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
}

.day-tab span { display: block; font-size: .78rem; font-weight: 600; }

.day-tab em {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .78;
}

.day-tab:hover {
    background: rgba(255, 255, 255, .13);
    color: var(--white);
    transform: translateY(-2px);
}

.day-tab.active {
    background: linear-gradient(150deg, var(--gold-300), var(--gold-600));
    border-color: transparent;
    color: var(--mtq-950);
    box-shadow: var(--glow-gold);
    transform: translateY(-3px);
}

.day-tab.active em { border-top-color: rgba(3, 36, 34, .25); opacity: .8; }

.day-panel { display: none; }
.day-panel.active { display: block; animation: fadeUp .45s var(--ease); }

/* --- Ringkasan hari terpilih --- */

.agenda-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 26px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(115deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}

.agenda-summary-date { min-width: 0; }

.agenda-summary-date b {
    display: block;
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
}

.agenda-summary-date span { font-size: .9rem; color: var(--gold-300); font-weight: 600; }

.agenda-summary-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.agenda-summary-facts span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(3, 36, 34, .4);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .86);
}

.agenda-summary-facts i { color: var(--mtq-200); }
.agenda-summary-facts .is-star { border-color: rgba(248, 215, 130, .45); }
.agenda-summary-facts .is-star i { color: var(--gold-300); }

/* --- Daftar kegiatan: kartu putih agar terbaca seperti daftar acara resmi --- */

.agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.agenda-card {
    position: relative;
    display: grid;
    grid-template-columns: 122px 1fr;
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    box-shadow:
        0 18px 38px -16px rgba(3, 36, 34, .45),
        0 3px 8px rgba(3, 36, 34, .14);
    transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}

.agenda-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 28px 54px -18px rgba(3, 36, 34, .52),
        0 6px 14px rgba(3, 36, 34, .18);
}

/* Pita warna kategori di tepi kiri */
.agenda-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    z-index: 2;
    background: var(--mtq-400);
}

.agenda-card.tone-gold::before { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
.agenda-card.tone-teal::before { background: linear-gradient(180deg, var(--mtq-400), var(--mtq-700)); }
.agenda-card.tone-soft::before { background: var(--mtq-200); }

.agenda-card.is-highlight {
    box-shadow:
        0 0 0 2px var(--gold-400),
        0 22px 46px -16px rgba(3, 36, 34, .5);
}

/* Kolom waktu */
.agenda-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 12px;
    background: var(--mtq-50);
    border-right: 1px solid var(--line);
    text-align: center;
}

/*
   Jam yang belum ditentukan. Sengaja lebih redup dan lebih kecil daripada
   angka jam supaya deretan kartu tetap terbaca berurutan waktu - kartu tanpa
   jam tidak boleh tampak sepenting kartu yang jadwalnya sudah pasti.
*/
.agenda-time-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--ink-muted);
}

.agenda-time-empty i {
    font-size: 1.32rem;
    color: var(--mtq-200);
}

.agenda-time-empty small {
    /* Kolom waktu hanya selebar 122 px, sedangkan keterangannya tiga kata.
       Hurufnya dikecilkan, jarak antarhuruf dilepas, dan teksnya dibiarkan
       melipat rapi di tengah - dipaksa satu baris ia akan meluber. */
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    max-width: 92px;
    text-wrap: balance;
}

/* Penanda "s.d." saat hanya jam selesai yang terisi */
.agenda-time-note {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.agenda-time b {
    font-size: 1.24rem;
    font-weight: 900;
    color: var(--mtq-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.agenda-time b.end { color: var(--ink-muted); font-size: 1.04rem; font-weight: 700; }

.agenda-time-sep {
    width: 2px;
    height: 14px;
    margin: 5px 0;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold-500), rgba(224, 169, 46, .2));
}

/* Isi kegiatan */
.agenda-body { padding: 20px 24px; min-width: 0; }

/*
   Gambar acara. Kolom ketiga hanya dibuat pada kartu yang benar-benar punya
   gambar, sehingga kartu tanpa gambar tetap memakai dua kolom seperti semula
   dan tidak menyisakan bidang kosong.
*/
.agenda-card.has-image { grid-template-columns: 122px 1fr 220px; }

.agenda-figure {
    margin: 0;
    overflow: hidden;
    background: var(--mtq-50);
}

.agenda-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}

.agenda-card.has-image:hover .agenda-figure img { transform: scale(1.05); }

.agenda-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 9px;
}

.agenda-cat {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--mtq-50);
    color: var(--mtq-700);
}

.tone-gold .agenda-cat { background: linear-gradient(140deg, var(--gold-300), var(--gold-500)); color: var(--mtq-950); }
.tone-teal .agenda-cat { background: var(--mtq-100); color: var(--mtq-800); }

.agenda-star {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--gold-400);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--gold-700);
}

.agenda-body h4 {
    color: var(--mtq-900);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.32;
    margin: 0 0 6px;
}

.agenda-body p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 0;
}

/*
   Gambar keterangan di dalam badan kartu.

   Tidak dipangkas: isinya tulisan - susunan acara, denah, tata tertib - dan
   memangkasnya berarti membuang justru bagian yang perlu dibaca. Tingginya
   dibatasi supaya lampiran yang tegak tidak memanjangkan kartu berlipat-lipat,
   dan seluruhnya ditautkan ke berkas asli sebagai jalan keluarnya.
*/
.agenda-info {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--mtq-50);
    line-height: 0;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.agenda-info:hover {
    border-color: var(--mtq-300);
    box-shadow: var(--shadow-sm);
}

.agenda-info img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
}

.agenda-info-hint {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(3, 36, 34, .72);
    backdrop-filter: blur(6px);
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.agenda-info:hover .agenda-info-hint,
.agenda-info:focus-visible .agenda-info-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Layar sentuh tidak punya keadaan sorot - petunjuknya dibiarkan tampak */
@media (hover: none) {
    .agenda-info-hint { opacity: 1; transform: none; }
}

/*
   Lokasi yang dapat diketuk. Bentuk dasarnya sengaja sama persis dengan versi
   yang tidak bertaut - yang membedakan hanya lambang tautan luar dan tanggapan
   saat disorot. Pil yang berubah rupa hanya karena bisa diklik akan membuat
   dua kartu bersebelahan terlihat seperti dua jenis keterangan yang berbeda.
*/
.agenda-loc.is-link { cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }

.agenda-loc.is-link:hover {
    background: var(--mtq-50);
    color: var(--mtq-900);
    box-shadow: inset 0 0 0 1px var(--mtq-200);
}

.agenda-loc-out { font-size: .68rem; opacity: .55; }
.agenda-loc.is-link:hover .agenda-loc-out { opacity: 1; }

.agenda-loc.is-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--mtq-400);
}

.agenda-loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sand);
    font-size: .82rem;
    font-weight: 700;
    color: var(--mtq-700);
}

.agenda-loc i { color: var(--gold-600); }

/* Pemisah antar hari pada halaman jadwal lengkap */
.agenda-day-block + .agenda-day-block { margin-top: 44px; }

/* --------------------------------------------------------------------------
   Main Event & Side Event

   Satu seksi dua kolom: acara utama di kiri dengan kartu mendatar yang lebih
   besar, acara pendamping di kanan sebagai daftar bergulir. Tinggi kolom kanan
   dibatasi sendiri lewat max-height, sehingga panjang daftar tidak lagi
   menentukan tinggi seksi.
   -------------------------------------------------------------------------- */

/* ---- Tab pemilih jenis acara ----

   Dua tab berbagi lebar sama rata. Tab aktif memakai gradasi emas yang sama
   dengan pemilih tanggal pada seksi jadwal, ditambah penunjuk segitiga di
   bawahnya sebagai penghubung ke daftar di bawah.
*/

/* ---- Pengantar seksi ---- */

.event-intro {
    max-width: 640px;
    margin-bottom: clamp(26px, 3.2vw, 40px);
}

/*
   Dengan maskot, pengantar menjadi dua kolom: teks di kiri, maskot di kanan.
   Batas lebar dilepas agar maskot benar-benar duduk di sisi kanan seksi,
   bukan menempel di tengah.

   Maskot sengaja ditarik masuk lewat margin negatif sehingga tepi kirinya
   menyelinap ke belakang blok teks. Tumpang tindih tipis itu membuat keduanya
   terbaca sebagai satu susunan berlapis, bukan dua kotak bersebelahan.
*/
.event-intro.has-mascot {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 640px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

/* Teks berada di lapisan atas supaya ia yang menutupi maskot */
.event-intro-text {
    position: relative;
    z-index: 1;
}

.event-intro-mascot {
    position: relative;
    z-index: 0;
    margin: 0 0 0 clamp(-120px, -7vw, -50px);
    pointer-events: none;
}

.event-intro-mascot img {
    width: clamp(230px, 30vw, 400px);
    height: auto;
    display: block;
    filter: drop-shadow(0 22px 38px rgba(3, 36, 34, .3));
}

/* Baris pembuka memakai huruf display, sengaja dimiringkan agar terbaca
   seperti tulisan tangan - pembeda dari eyebrow seksi lain yang berupa
   huruf kapital renggang. */
.event-intro-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    color: var(--gold-600);
}

.event-intro h2 {
    font-size: clamp(1.7rem, 3.8vw, 2.7rem);
    line-height: 1.16;
    margin-bottom: 14px;
}

.event-intro p {
    font-size: clamp(.92rem, 1.4vw, 1.02rem);
    color: var(--ink-muted);
    line-height: 1.75;
    margin-bottom: 20px;
}

/*
   Tab dibentuk seperti map arsip: sudut atas dibulatkan tipis, sisi bawah
   rata, lalu seluruh baris berdiri di atas satu garis dasar. Bentuk persegi
   ini lebih tegas daripada pil membulat dan menegaskan hubungan tab dengan
   daftar di bawahnya.
*/
.event-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin-bottom: clamp(30px, 3.6vw, 46px);
    padding-bottom: 3px;
    border-bottom: 3px solid rgba(6, 85, 79, .12);
}

.event-tab {
    position: relative;
    padding: 15px 18px 14px;
    border: 1px solid rgba(6, 85, 79, .1);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: rgba(255, 255, 255, .66);
    font-family: inherit;
    text-align: center;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}

.event-tab:hover {
    background: var(--white);
    color: var(--mtq-900);
    transform: translateY(-2px);
}

/* Garis dasar tab aktif, menutupi garis abu di bawahnya */
.event-tab::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: transparent;
    transition: background .28s var(--ease);
}

.event-tab.active::before { background: var(--gold-600); }

.event-tab b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .01em;
}

.event-tab span {
    display: block;
    margin-top: 3px;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .82;
}

.event-tab.active {
    background: linear-gradient(150deg, var(--gold-300), var(--gold-600));
    border-color: transparent;
    color: var(--mtq-950);
    box-shadow: 0 -6px 18px -8px rgba(224, 169, 46, .8);
    transform: none;
}

/* Penunjuk segitiga di bawah tab aktif */
.event-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--gold-600);
    transform: translateX(-50%) rotate(45deg);
}

/* ---- Panel isi ---- */

.event-panel { display: none; }

.event-panel.active {
    display: block;
    animation: eventPanelIn .38s var(--ease) both;
}

@keyframes eventPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* ---- Kolom pencarian tiap tab ---- */

.event-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.event-search > i {
    position: absolute;
    left: 16px;
    color: var(--gold-600);
    font-size: .92rem;
    pointer-events: none;
}

.event-search input {
    width: 100%;
    padding: 12px 132px 12px 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-family: inherit;
    font-size: .88rem;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.event-search input::placeholder { color: var(--ink-muted); }
.event-search input::-webkit-search-cancel-button { display: none; }

.event-search input:focus {
    outline: 0;
    border-color: var(--mtq-400);
    box-shadow: 0 0 0 4px rgba(47, 188, 172, .16);
}

.event-search-clear {
    position: absolute;
    right: 104px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--mtq-50);
    color: var(--mtq-700);
    font-size: .68rem;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.event-search-clear:hover { background: var(--mtq-100); }

.event-search-count {
    position: absolute;
    right: 18px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--ink-muted);
    white-space: nowrap;
    pointer-events: none;
}

/*
   Jumlah kolom berbeda per tab: Main Event empat, Side Event lima karena
   isinya lebih ringkas. Karena jumlah kolomnya tetap, kartu berikutnya turun
   ke baris berikutnya dengan sendirinya.
*/
.event-list {
    display: grid;
    gap: clamp(14px, 1.5vw, 20px);
}

.event-list.is-main { grid-template-columns: repeat(4, 1fr); }
.event-list.is-side { grid-template-columns: repeat(5, 1fr); }

/* Lima kolom membuat kartu sangat sempit; isinya dirapatkan seperlunya */
.event-list.is-side .event-body { padding: 11px 12px 12px; gap: 4px; }
.event-list.is-side .event-body h4 { font-size: .86rem; }
.event-list.is-side .event-eyebrow { font-size: .58rem; letter-spacing: .12em; }
.event-list.is-side .event-loc { font-size: .69rem; }
.event-list.is-side .event-more { font-size: .71rem; padding-top: 6px; }
.event-list.is-side .event-media .event-when { font-size: .63rem; padding: 4px 8px; }

/* Ringkasan dilepas pada kartu tersempit - judul dan waktu sudah cukup */
.event-list.is-side .event-body p { display: none; }

/*
   Kartu yang lolos saringan masuk bergiliran. Kelasnya dipasang ulang tiap
   penyaringan oleh app.js, lalu dicabut kembali setelah animasinya habis -
   kalau dibiarkan, isian akhir animasi akan mengunci transform kartu dan
   efek angkat saat disorot ikut mati.
*/
.event-list.is-refreshed .event-card:not([hidden]) {
    animation: eventCardIn .42s var(--ease) both;
    animation-delay: var(--card-delay, 0ms);
}

@keyframes eventCardIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* ---- Keadaan "sedang mencari" ----

   Penyaringan sendiri berlangsung seketika; jeda 280 ms pada app.js yang
   memberinya waktu tampil, sekaligus menahan keterangan kosong agar tidak
   berkedip di sela ketikan.
*/

.event-search.is-searching > i {
    color: var(--mtq-500);
    animation: eventSeek 1s var(--ease) infinite;
}

@keyframes eventSeek {
    0%, 100% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(3px, -2px) scale(1.12); }
    65% { transform: translate(-3px, 2px) scale(1.12); }
}

/* Berkas cahaya tipis yang menyapu bawah kolom selama pencarian berjalan */
.event-search::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mtq-400), var(--gold-400), transparent);
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}

.event-search.is-searching::after {
    opacity: 1;
    animation: eventScan 1.1s var(--ease) infinite;
}

@keyframes eventScan {
    from { transform: translateX(-60%) scaleX(.45); }
    to { transform: translateX(60%) scaleX(.45); }
}

.event-search.is-searching .event-search-count { color: var(--mtq-600); }

/* ---- Tidak ada hasil ----

   Sebidang penuh di bawah kolom pencarian, menggantikan kisi kartu yang
   kosong. Ilustrasinya SVG sebaris pada partial event-empty.
*/

.event-empty[hidden] { display: none; }

.event-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 24px 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--white), var(--mtq-50));
    border: 1px dashed var(--mtq-200);
    box-shadow: var(--shadow-xs);
    animation: eventEmptyIn .45s var(--ease) both;
}

@keyframes eventEmptyIn {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.event-empty-art {
    width: min(260px, 78%);
    margin-bottom: 4px;
}

.event-empty-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.event-empty h4 {
    margin: 0 0 6px;
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: var(--mtq-900);
}

.event-empty p {
    margin: 0;
    max-width: 46ch;
    font-size: .88rem;
    color: var(--ink-muted);
}

.event-empty p b {
    color: var(--gold-700);
    font-weight: 800;
    word-break: break-word;
}

.event-empty-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    color: var(--white);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.event-empty-reset[hidden] { display: none; }

.event-empty-reset:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-teal);
}

/* ---- Gerak pada ilustrasi ----

   Seluruh bagian diputar dari titik tengahnya sendiri, jadi tiap elemen SVG
   yang bergerak perlu transform-box: fill-box. Semua durasinya diredam
   sendiri oleh aturan "kurangi gerak" di bagian Animasi.
*/

.event-empty-svg [class^="ee-"] {
    transform-box: fill-box;
    transform-origin: center;
}

.ee-halo {
    fill: var(--mtq-100);
    opacity: .6;
    animation: eeHalo 4.5s ease-in-out infinite;
}

@keyframes eeHalo {
    0%, 100% { transform: scale(1); opacity: .5; }
    50% { transform: scale(1.07); opacity: .85; }
}

.ee-orbit {
    fill: none;
    stroke: var(--mtq-300);
    stroke-width: 2;
    stroke-dasharray: 3 14;
    stroke-linecap: round;
    opacity: .7;
    animation: eeSpin 22s linear infinite;
}

@keyframes eeSpin {
    to { transform: rotate(360deg); }
}

.ee-shadow {
    fill: rgba(6, 85, 79, .12);
    animation: eeShadow 3.6s ease-in-out infinite;
}

@keyframes eeShadow {
    0%, 100% { transform: scaleX(1); opacity: .55; }
    50% { transform: scaleX(.88); opacity: .3; }
}

.ee-doc {
    animation: eeFloat 3.6s ease-in-out infinite alternate;
}

@keyframes eeFloat {
    from { transform: translateY(-5px); }
    to { transform: translateY(5px); }
}

.ee-doc > rect:first-child {
    fill: var(--white);
    stroke: var(--mtq-200);
    stroke-width: 2;
}

.ee-doc-tag { fill: var(--gold-300); }

.ee-line {
    fill: var(--mtq-100);
    animation: eeLine 2.4s ease-in-out infinite;
}

/* Empat baris berkedip bergantian, seperti isi yang sedang ditelusuri.
   Hitungan nth-of-type ikut menghitung bingkai dan label di atasnya, jadi
   baris pertama jatuh pada urutan ketiga di antara sesama <rect>. */
.ee-line:nth-of-type(4) { animation-delay: .15s; }
.ee-line:nth-of-type(5) { animation-delay: .3s; }
.ee-line:nth-of-type(6) { animation-delay: .45s; }

@keyframes eeLine {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.ee-glass {
    animation: eeSweep 4.2s ease-in-out infinite;
}

@keyframes eeSweep {
    0%, 100% { transform: translate(-24px, 8px) rotate(-7deg); }
    50% { transform: translate(22px, -8px) rotate(6deg); }
}

.ee-handle {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.ee-lens { stroke-width: 6; }

.ee-ping {
    fill: none;
    stroke: var(--mtq-400);
    stroke-width: 3;
    opacity: 0;
    animation: eePing 2.6s var(--ease) infinite;
}

@keyframes eePing {
    0% { transform: scale(1); opacity: .55; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
}

.ee-lens-ring {
    fill: none;
    stroke: var(--mtq-300);
    stroke-width: 2.5;
    stroke-dasharray: 4 6;
    animation: eeSpin 8s linear infinite reverse;
}

.ee-cross {
    fill: none;
    stroke: var(--gold-600);
    stroke-width: 3;
    stroke-linecap: round;
    animation: eeCross 2.6s var(--ease) infinite;
}

@keyframes eeCross {
    0%, 60%, 100% { opacity: 1; transform: scale(1); }
    30% { opacity: .35; transform: scale(.82); }
}

.ee-shine {
    fill: none;
    stroke: var(--white);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .85;
}

.ee-spark {
    fill: var(--gold-400);
    animation: eeTwinkle 2.8s ease-in-out infinite;
}

.ee-spark:nth-of-type(2) { animation-delay: .9s; }
.ee-spark:nth-of-type(3) { animation-delay: 1.6s; }

@keyframes eeTwinkle {
    0%, 100% { opacity: .18; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1); }
}

/* ---- Kartu ----

   Bersusun tegak dengan gambar sebagai bidang utama di atas. Rasio 16:10 dan
   badan kartu yang ringkas membuat foto memegang porsi terbesar; keterangan
   waktu ditumpangkan pada gambar supaya bidang teks tidak ikut memanjang.
*/

/* Kartu yang tersaring keluar; display:none diperlukan karena kartu ini
   anggota kisi, dan atribut hidden saja kalah oleh display:flex di bawah. */
.event-card[hidden] { display: none; }

.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.event-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(140deg, var(--mtq-100), var(--mtq-50));
}

.event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease);
}

.event-card:hover .event-media img { transform: scale(1.07); }

/* Isian saat acara belum punya gambar */
.event-media-blank {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.2rem;
    color: var(--mtq-300);
}

.event-body {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 13px 15px 14px;
    min-width: 0;
}

/* Aksen cahaya emas di pojok, mengikuti gaya kartu cabang lomba */
.event-body::after {
    content: '';
    position: absolute;
    top: -54px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 169, 46, .2), transparent 70%);
    transition: transform .55s var(--ease);
    pointer-events: none;
}

.event-card:hover .event-body::after { transform: scale(1.6); }

/* Isi kartu harus di atas aksen */
.event-body > * { position: relative; z-index: 1; }

.event-eyebrow {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold-700);
}

.event-body h4 {
    font-size: clamp(.92rem, 1.15vw, 1.02rem);
    line-height: 1.32;
    margin: 0;
    transition: color .3s var(--ease);

    /* Judul panjang dipangkas dua baris agar tinggi kartu sebaris tetap rata */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card:hover .event-body h4 { color: var(--mtq-700); }

/*
   Waktu acara tampil dua rupa. Di dalam kartu ia menjadi lencana gelap yang
   ditumpangkan pada gambar; di dalam modal cukup teks biasa sebaris dengan
   lokasi. Gaya lencana karena itu diikat khusus ke .event-media.
*/
.event-when {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft);
    min-width: 0;
}

.event-when i { flex-shrink: 0; color: var(--mtq-600); }

.event-media .event-when {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(3, 36, 34, .78);
    backdrop-filter: blur(8px);
    color: var(--gold-300);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-media .event-when i { color: inherit; }

.event-loc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: .73rem;
    font-weight: 600;
    color: var(--ink-soft);
    min-width: 0;

    /* Nama tempat yang panjang dipotong, bukan melebarkan kartu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-loc i { color: var(--gold-600); flex-shrink: 0; }

/* Lokasi bertautan peta dibuat jelas dapat diklik */
a.event-loc.is-map {
    color: var(--mtq-700);
    text-decoration: none;
    transition: color .2s var(--ease);
}

a.event-loc.is-map:hover { color: var(--gold-600); }

.event-loc-out { font-size: .62rem; opacity: .55; }

.event-body p {
    font-size: .8rem;
    color: var(--ink-muted);
    line-height: 1.55;
    margin: 1px 0 0;

    /* Ringkasan dipangkas; teks utuhnya tersedia di modal */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 8px 0 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 800;
    color: var(--mtq-700);
    cursor: pointer;
    transition: gap .25s var(--ease), color .25s var(--ease);
}

.event-more:hover,
.event-card:hover .event-more { color: var(--gold-600); }

.event-more:hover { gap: 13px; }

/* ---- Modal rincian ---- */

.event-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 36, 34, .72);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .22s var(--ease);
}

/*
   WAJIB. Atribut hidden bekerja lewat aturan bawaan peramban
   [hidden] { display: none }, dan aturan itu kalah oleh display: grid di atas.
   Tanpa baris ini, hamparan modal tetap menutupi seluruh layar pada z-index
   1200 - tak terlihat karena opacity 0, tetapi menelan SEMUA klik di halaman.
*/
.event-modal[hidden] { display: none; }

/* Lapis pengaman kedua: selama belum terbuka, hamparan tidak menangkap klik */
.event-modal:not(.open) { pointer-events: none; }
.event-modal.open { pointer-events: auto; }

.event-modal.open { opacity: 1; }

.event-modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: min(88vh, 780px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: 0 40px 90px -30px rgba(3, 36, 34, .7);
    transform: translateY(14px) scale(.98);
    transition: transform .26s var(--ease);
}

.event-modal.open .event-modal-panel { transform: translateY(0) scale(1); }

.event-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(3, 36, 34, .55);
    backdrop-filter: blur(6px);
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.event-modal-close:hover { background: rgba(3, 36, 34, .8); }

/*
   Gambar acara pada modal ditampilkan utuh, tidak dipangkas.

   Patokan 16:9 dengan object-fit: cover dilepas: poster acara kerap tegak,
   dan pemangkasan ke bidang lebar justru membuang bagian yang paling ingin
   dibaca - susunan acara, nama pengisi, tanggal. Di kartu pemangkasan tetap
   dipertahankan karena di sana gambar memang hanya penggoda; begitu dibuka,
   yang dicari pengunjung adalah isinya.

   Ukuran gambar dibiarkan dituntun ukuran aslinya, dibatasi lebar panel dan
   tinggi layar. Kedua batas itu bekerja bersama tanpa merusak perbandingan
   sisi, sehingga tidak perlu object-fit sama sekali. Latar gelap membuat
   bidang sisa pada gambar tegak terbaca sebagai panggung, bukan celah.
*/
.event-modal-media {
    margin: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(150deg, var(--mtq-900), var(--mtq-950));
}

.event-modal-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* Sisakan ruang bagi judul dan keterangan di bawahnya - tanpa batas ini
       poster tegak bisa mengisi seluruh panel dan teksnya tidak terlihat
       sampai digulir. */
    max-height: 58vh;
}

.event-modal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px 26px;
}

.event-modal-body h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin: 0; }

.event-modal-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 12px 0;
    width: 100%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.event-modal-body p {
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 4px 0 0;
    white-space: pre-line;
}

.event-modal-body .btn-mtq { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Lokasi
   -------------------------------------------------------------------------- */

/*
   Sepasang ragam hias pada seksi lokasi, dipasang diagonal: kiri atas dan
   kanan bawah. Keduanya ditarik keluar tepi lewat offset negatif lalu
   dipotong oleh overflow milik seksi, sehingga terbaca sebagai ornamen yang
   menerus di balik halaman - bukan stiker yang ditempel di sudut.
   Rasionya dikunci ke ukuran asli berkas karena height dibiarkan auto.
*/
.has-ornament { overflow: hidden; }

.venue-ornament {
    position: absolute;
    top: clamp(-200px, -12vw, -80px);
    left: clamp(-215px, -13vw, -86px);
    z-index: 0;
    width: clamp(320px, 36vw, 560px);
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: .13;
}

/*
   Pasangan di kanan bawah berukuran sama persis - width diwarisi dari aturan
   di atas, tidak ditimpa - dan hanya berbeda opasitas supaya sudut kanan
   bawah tidak menarik pandangan menjauh dari isi seksi. Offset-nya pun
   dicerminkan dengan nilai yang sama agar porsi yang terpotong tepi setara.
*/
.venue-ornament.is-bottom {
    top: auto;
    left: auto;
    right: clamp(-215px, -13vw, -86px);
    bottom: clamp(-200px, -12vw, -80px);
    opacity: .08;
}

/* ---- Alat: pencarian + jumlah titik ---- */

.venue-tools {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.venue-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    min-width: 0;
}

.venue-search > i {
    position: absolute;
    left: 16px;
    color: var(--gold-600);
    font-size: .95rem;
    pointer-events: none;
}

.venue-search input {
    width: 100%;
    padding: 13px 44px 13px 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-family: inherit;
    font-size: .9rem;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.venue-search input::placeholder { color: var(--ink-muted); }

.venue-search input:focus {
    outline: 0;
    border-color: var(--mtq-400);
    box-shadow: 0 0 0 4px rgba(47, 188, 172, .16);
}

/* Peramban menampilkan tombol silang bawaan pada input search - dimatikan
   agar tidak berdempet dengan tombol bersihkan milik kita. */
.venue-search input::-webkit-search-cancel-button { display: none; }

.venue-search-clear {
    position: absolute;
    right: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--mtq-50);
    color: var(--mtq-700);
    font-size: .72rem;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.venue-search-clear:hover { background: var(--mtq-100); }

.venue-count {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* ---- Geseran mendatar ---- */

.venue-slider { position: relative; }

.venue-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 14px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--mtq-300) transparent;
}

.venue-track::-webkit-scrollbar { height: 6px; }
.venue-track::-webkit-scrollbar-track { background: transparent; }

.venue-track::-webkit-scrollbar-thumb {
    background: var(--mtq-200);
    border-radius: 3px;
}

.venue-nav {
    position: absolute;
    top: calc(50% - 7px);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--mtq-800);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: opacity .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}

.venue-nav.prev { left: -14px; }
.venue-nav.next { right: -14px; }

.venue-nav:hover { background: var(--mtq-700); color: var(--white); }
.venue-nav:disabled { opacity: .3; cursor: default; }
.venue-nav:disabled:hover { background: var(--white); color: var(--mtq-800); }

/* Bila seluruh kartu sudah muat, tombol geser tidak diperlukan */
.venue-slider.is-static .venue-nav { display: none; }

/* ---- Kartu titik lokasi ---- */

.venue-card {
    flex: 0 0 clamp(260px, 30%, 320px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.venue-card[hidden] { display: none; }

.venue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.venue-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(140deg, var(--mtq-700), var(--mtq-500));
    overflow: hidden;
}

.venue-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform .55s var(--ease);
}

.venue-card:hover .venue-media img { transform: scale(1.06); }

.venue-chip {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(3, 36, 34, .78);
    backdrop-filter: blur(8px);
    color: var(--gold-300);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.venue-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    padding: 16px 18px 18px;
}

.venue-body h3 { font-size: 1rem; margin: 0; line-height: 1.32; }

.venue-address {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .8rem;
    color: var(--ink-muted);
    margin: 0;
}

.venue-address i { color: var(--gold-600); margin-top: 2px; flex-shrink: 0; }

/*
   Keterangan kegiatan yang digelar di titik ini.

   Diberi kotak sendiri, bukan dibiarkan sebagai paragraf polos: tepat di
   atasnya ada baris alamat yang juga berupa lambang diikuti teks kelabu, dan
   tanpa bidang pembeda keduanya terbaca sebagai satu blok yang sama.
*/
.venue-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    /*
       Didorong ke dasar kartu, tepat di atas tombol. Judul dan alamat di
       atasnya memakan satu sampai tiga baris yang berbeda-beda tiap lokasi;
       bila kotak ini mengikuti alirannya, tepinya jatuh di ketinggian yang
       berlainan pada tiap kartu meski seluruh kartunya sama tinggi.
    */
    margin: auto 0 0;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--mtq-50);
    border: 1px solid rgba(6, 85, 79, .08);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Sisa ruang sudah diserap kotak keterangan; barisan tombol tinggal
   mengikutinya. Kartu tanpa keterangan tetap memakai margin auto pada
   tombolnya sendiri sehingga tombolnya tetap menempel di dasar. */
.venue-note + .venue-actions { margin-top: 0; }

.venue-note i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gold-600);
    font-size: .9rem;
}

/* Tinggi dikunci dua baris - keterangan sebaris di sebelah keterangan tiga
   baris membuat deretan kotaknya bergerigi walau tepi bawahnya sudah rata. */
.venue-note span {
    flex: 1;
    /* Tanpa ini teks panjang menolak menyempit dan mendorong lambang keluar */
    min-width: 0;
    display: -webkit-box;
    /* Tiga baris, bukan dua: cabang terpanjang - kaligrafi dengan lima
       golongannya - memakan 108 huruf dan akan terpotong di tengah nama
       golongan bila hanya diberi dua baris. */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 3 baris x tinggi baris 1,5 */
    min-height: 4.5em;
}

/*
   Sepasang tombol di kaki kartu, lebarnya dibagi rata. margin-top: auto
   dipindahkan ke barisnya - bukan pada tombolnya - agar keduanya turun
   bersama ke dasar kartu, berapa pun panjang keterangan di atasnya.

   Keduanya sengaja tidak sederajat: melihat letak di peta adalah langkah
   penjajakan, sedangkan meminta penunjuk arah adalah tindakan yang benar-
   benar dituju. Karena itu yang pertama bergaya garis tepi dan yang kedua
   berlatar pirus penuh.
*/
.venue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 4px;
}

.venue-btn {
    position: relative;
    /* Kilau penyapu dipangkas oleh tepi tombol, bukan meluber keluar */
    overflow: hidden;
    /* Konteks penumpukan sendiri agar kilau ber-z-index negatif berhenti di
       atas latar tombol, tidak tenggelam ke belakang kartu */
    isolation: isolate;
    flex: 1 1 0;
    min-width: 112px;
    padding: 11px 14px;
    font-size: .82rem;
    justify-content: center;
    white-space: nowrap;
}

.venue-btn i {
    font-size: .95rem;
    transition: transform .35s var(--ease);
}

/* Seberkas cahaya menyapu dari kiri ke kanan sekali tiap kali disorot */
.venue-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    z-index: -1;
    width: 45%;
    transform: skewX(-18deg);
    transition: left .6s var(--ease);
}

.venue-btn:hover::after,
.venue-btn:focus-visible::after { left: 125%; }

/* ---- Buka Peta: garis tepi yang menghangat saat disorot ---- */

.venue-btn.is-map {
    background: var(--white);
    border-color: rgba(6, 85, 79, .16);
    color: var(--mtq-700);
}

.venue-btn.is-map::after {
    background: linear-gradient(100deg, transparent, rgba(47, 188, 172, .28), transparent);
}

.venue-btn.is-map:hover {
    background: var(--mtq-50);
    border-color: var(--mtq-300);
    color: var(--mtq-800);
    box-shadow: 0 12px 24px -14px rgba(11, 133, 122, .6);
}

/* Peta terangkat sedikit, seolah lembarannya diangkat untuk dilihat */
.venue-btn.is-map:hover i { transform: translateY(-2px) scale(1.12); }

/* ---- Navigasi: pirus penuh sebagai tindakan utama ---- */

.venue-btn.is-nav::after {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}

.venue-btn.is-nav:hover {
    box-shadow:
        0 0 0 1px rgba(18, 160, 147, .35),
        0 16px 30px -12px rgba(11, 133, 122, .65),
        var(--inset-top);
}

/* Rambu belok bergeser maju - arah yang ditunjuknya sendiri */
.venue-btn.is-nav:hover i { transform: translateX(3px); }

/* Kedua tombol adalah tautan; cincin fokus dibuat tegas untuk penjelajah papan
   tik. Ditulis lewat wadahnya agar bobotnya menyamai aturan :hover di atas -
   kalau kalah, tombol yang sedang difokus sekaligus disorot kehilangan
   cincinnya justru pada saat cincin itu paling dibutuhkan. */
.venue-actions .venue-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--mtq-400);
}


.map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--white);
    background: var(--white);
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* --------------------------------------------------------------------------
   Pesona Semarang
   -------------------------------------------------------------------------- */

.destination-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--shadow-md);
    background: linear-gradient(150deg, var(--mtq-700), var(--mtq-500));
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.destination-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

.destination-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

.destination-card:hover img { transform: scale(1.08); }

.destination-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 36, 34, .05) 35%, rgba(3, 36, 34, .88));
}

.destination-body {
    position: relative;
    z-index: 2;
    padding: 24px;
    color: var(--white);
    width: 100%;
}

.destination-body h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 6px; }

.destination-body p {
    font-size: .86rem;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.destination-card.tall { min-height: 100%; }

/* --------------------------------------------------------------------------
   Galeri
   -------------------------------------------------------------------------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    background: var(--mtq-100);
}

.gallery-item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }

.gallery-item::after {
    content: '\F52A';
    font-family: 'bootstrap-icons';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--white);
    background: linear-gradient(180deg, rgba(3, 36, 34, .1), rgba(3, 36, 34, .65));
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after { opacity: 1; }

/* Petak galeri adalah figure yang dijadikan tombol lewat JS - cincin fokusnya
   harus dibuat sendiri, tidak ada bawaan dari peramban untuk elemen ini. */
.gallery-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--mtq-500);
}

/* ---- Tab jenis pada halaman galeri ----

   Sebentuk dengan tab Main/Side Event supaya pengunjung mengenalinya sebagai
   perkakas yang sama. Bedanya berupa tautan, bukan tombol - lihat alasannya
   pada berkas gallery-index.blade.php.
*/

.gallery-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin-bottom: clamp(26px, 3.2vw, 40px);
    padding-bottom: 3px;
    border-bottom: 3px solid rgba(6, 85, 79, .12);
}

.gallery-tab {
    position: relative;
    padding: 14px 18px 13px;
    border: 1px solid rgba(6, 85, 79, .1);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: rgba(255, 255, 255, .66);
    text-align: center;
    color: var(--ink-soft);
    transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}

.gallery-tab:hover {
    background: var(--white);
    color: var(--mtq-900);
    transform: translateY(-2px);
}

/* Garis dasar tab aktif, menutupi garis abu di bawahnya */
.gallery-tab::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: transparent;
    transition: background .28s var(--ease);
}

.gallery-tab.active::before { background: var(--gold-600); }

.gallery-tab b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 400;
    line-height: 1.15;
}

.gallery-tab span {
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .82;
}

.gallery-tab.active {
    background: linear-gradient(150deg, var(--gold-300), var(--gold-600));
    border-color: transparent;
    color: var(--mtq-950);
    box-shadow: 0 -6px 18px -8px rgba(224, 169, 46, .8);
    transform: none;
}

.gallery-tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--mtq-500);
}

/* ---- Kisi seragam untuk halaman daftar ----

   Petak besar di sudut dilepas: mosaik enak dilihat sebagai cuplikan di
   beranda, tetapi pada daftar berhalaman ia membuat tiap halaman bertata
   letak berbeda, dan halaman terakhir - yang jarang penuh - jadi ompong.
   Rasio 4:3 dipilih menggantikan bujur sangkar karena foto kegiatan
   umumnya melintang; dipaksa bujur sangkar, sisi kiri-kanannya terpangkas.
*/
.gallery-grid.is-uniform .gallery-item { aspect-ratio: 4 / 3; }
.gallery-grid.is-uniform .gallery-item:nth-child(6n + 1) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }

/* Kartu video menyisakan ruang untuk judul di bawah sampulnya, jadi rasionya
   tidak lagi berlaku untuk keseluruhan kartu - hanya untuk sampulnya. Kelasnya
   dipasang dari Blade, bukan disimpulkan lewat :has(), supaya tidak bergantung
   pada dukungan pemilih yang belum merata di semua peramban. */
.gallery-item.has-title { aspect-ratio: auto; }

.gallery-item.has-title img {
    aspect-ratio: 16 / 9;
    height: auto;
}

.gallery-title {
    display: block;
    padding: 12px 14px 14px;
    background: var(--white);
    text-align: left;
}

.gallery-title b {
    /* Dua baris, supaya tinggi kartunya tetap sama satu sama lain */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--mtq-900);
}

.gallery-title small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* Lapisan gelap tombol putar hanya menutupi sampulnya, bukan judul di bawahnya */
.gallery-item.has-title .gallery-play { bottom: auto; aspect-ratio: 16 / 9; }

/* ---- Kelompok Foto dan Video ---- */

.gallery-group + .gallery-group { margin-top: clamp(28px, 4vw, 44px); }

.gallery-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.gallery-group-title i { color: var(--gold-600); font-size: 1.05rem; }

.gallery-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

/*
   Kisi video memakai rasio 16:9 dan tanpa petak besar di sudut. Sampul YouTube
   selalu melintang; dipaksa ke petak bujur sangkar atau petak ganda seperti
   kisi foto, bagian atas dan bawahnya justru terpangkas.
*/
.gallery-grid.is-video { grid-template-columns: repeat(4, 1fr); }
.gallery-grid.is-video .gallery-item { aspect-ratio: 16 / 9; }
.gallery-grid.is-video .gallery-item:nth-child(6n + 1) { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }

/* Lambang kaca pembesar bawaan diganti - yang ini diputar, bukan diperbesar */
.gallery-item.is-video::after { content: none; }

.gallery-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(3, 36, 34, .12), rgba(3, 36, 34, .55));
    transition: background .3s var(--ease);
}

.gallery-play i {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #b32b2b;
    font-size: 1.7rem;
    padding-left: 4px;
    box-shadow: 0 10px 26px -8px rgba(3, 36, 34, .7);
    transition: transform .3s var(--ease), background .3s var(--ease);
}

.gallery-item.is-video:hover .gallery-play { background: linear-gradient(180deg, rgba(3, 36, 34, .05), rgba(3, 36, 34, .45)); }
.gallery-item.is-video:hover .gallery-play i { transform: scale(1.12); background: var(--white); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(3, 36, 34, .92);
    backdrop-filter: blur(6px);
}

.lightbox.open { display: grid; }

.lightbox img {
    max-width: min(1100px, 94vw);
    max-height: 86vh;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
}

.lightbox img[hidden],
.lightbox-video[hidden] { display: none; }

/*
   Pemutar video. Lebarnya mengikuti layar dan tingginya ikut rasio 16:9 -
   pemutar YouTube tidak boleh dipatok tinggi tetap, karena pada layar sempit
   ia akan menyisakan bidang hitam di atas dan bawah gambar.
*/
.lightbox-video {
    width: min(1100px, 94vw);
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-xl);
}

.lightbox-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    font-size: 1.3rem;
    cursor: pointer;
}

.lightbox-caption {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    text-align: center;
    max-width: 80vw;
}

/* --------------------------------------------------------------------------
   Berita
   -------------------------------------------------------------------------- */

.news-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .78rem;
    color: var(--ink-muted);
    margin-bottom: 10px;
}

.news-feature {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--white);
    margin-bottom: 28px;
}

.news-feature .media {
    position: relative;
    min-height: 340px;
    background: linear-gradient(140deg, var(--mtq-700), var(--mtq-500));
}

.news-feature .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.news-feature .body { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }

/* --------------------------------------------------------------------------
   Dokumen & FAQ
   -------------------------------------------------------------------------- */

.doc-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}

.doc-item:hover { transform: translateX(5px); box-shadow: var(--shadow-md); }

.doc-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 15px;
    font-size: 1.4rem;
    color: var(--white);
    background: linear-gradient(145deg, var(--mtq-600), var(--mtq-800));
    box-shadow: var(--shadow-sm);
}

.doc-item b { display: block; color: var(--mtq-900); font-size: .98rem; }
.doc-item small { color: var(--ink-muted); }

.faq-item {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .28s var(--ease);
}

.faq-item.open { box-shadow: var(--shadow-md); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mtq-900);
    text-align: left;
    cursor: pointer;
}

.faq-q i { color: var(--gold-600); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(45deg); }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
}

.faq-a-inner {
    padding: 0 24px 22px;
    font-size: .93rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Mitra
   -------------------------------------------------------------------------- */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 30px 22px;
}

/* Tanpa kartu putih: logo langsung di atas latar seksi. Jarak antar sel
   dilebarkan supaya tiap logo tetap punya ruang napas sendiri. */
.partner-item {
    display: grid;
    place-items: center;
    padding: 6px;
    transition: transform .28s var(--ease), filter .28s var(--ease);
}

.partner-item:hover { transform: translateY(-4px); filter: saturate(1.08); }

/*
   Kotak pembatas seragam untuk semua logo. object-fit: contain menjaga
   rasio asli masing-masing berkas, sementara tinggi dan lebar kotak yang
   sama membuat bobot visualnya setara - logo lebar tidak lagi terlihat
   jauh lebih besar daripada logo yang kotak.
*/
.partner-item img {
    width: 100%;
    height: 84px;
    object-fit: contain;
    object-position: center;
}

.partner-item span {
    display: grid;
    place-items: center;
    height: 84px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mtq-700);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Kontak
   -------------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 32px;
}

.contact-info {
    display: grid;
    gap: 14px;
    align-content: start;
}

/*
   Daftar narahubung WhatsApp pada seksi Kontak.

   Tiap nama berupa tautan tersendiri, bukan satu blok teks: yang dicari
   pengunjung adalah orangnya, dan menekan nama yang tepat harus langsung
   membuka percakapan dengannya - bukan menyalin nomor lalu mengetiknya ulang.
*/
.contact-persons {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.contact-persons a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.contact-persons a:hover {
    background: rgba(37, 211, 102, .16);
    border-color: rgba(37, 211, 102, .45);
    color: var(--white);
    transform: translateX(3px);
}

.contact-persons a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(3, 36, 34, .8), 0 0 0 6px var(--gold-300);
}

.contact-persons b { font-size: .92rem; font-weight: 700; }

.contact-persons em {
    font-style: normal;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    opacity: .8;
}

/* Barisnya memuat daftar, bukan satu nilai - lambangnya disejajarkan ke atas */
.contact-line.is-persons { align-items: flex-start; }

.contact-line {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(6px);
}

.contact-line i {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    font-size: 1.05rem;
}

.contact-line small {
    display: block;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.contact-line strong { color: var(--white); font-size: .95rem; font-weight: 600; }
.contact-line a { color: var(--white); }
.contact-line a:hover { color: var(--gold-300); }

.contact-form {
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-xl);
}

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mtq-800);
    margin-bottom: 7px;
}

.field .req { color: #c0392b; }

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-family: inherit;
    font-size: .93rem;
    color: var(--ink);
    background: var(--cream);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 0;
    background: var(--white);
    border-color: var(--mtq-400);
    box-shadow: 0 0 0 4px rgba(47, 188, 172, .15);
}

.field textarea { resize: vertical; min-height: 130px; }

.field .err { display: block; margin-top: 6px; font-size: .78rem; color: #c0392b; }

/*
   Umpan jebakan anti-robot. Disembunyikan dengan menggeser ke luar layar,
   bukan display:none, supaya pengisi otomatis tetap menemukannya sementara
   pengguna dan pembaca layar tidak terganggu.
*/
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: .78rem;
    color: var(--ink-muted);
}

.form-note i { color: var(--mtq-500); flex-shrink: 0; }

/* Widget reCAPTCHA dikecilkan agar muat pada layar paling sempit */
.g-recaptcha { transform-origin: 0 0; }

@media (max-width: 360px) {
    .g-recaptcha { transform: scale(.86); }
}

/* --------------------------------------------------------------------------
   Kotak pemberitahuan SweetAlert, diselaraskan dengan palet situs
   -------------------------------------------------------------------------- */

.swal-mtq {
    border-radius: var(--radius-lg) !important;
    padding: 28px 26px 24px !important;
    font-family: var(--font-sans) !important;
    box-shadow: var(--shadow-xl) !important;
    border-top: 4px solid var(--gold-400);
}

.swal-mtq .swal2-title {
    font-size: 1.24rem !important;
    font-weight: 800 !important;
    color: var(--mtq-900) !important;
    letter-spacing: -.02em;
}

.swal-mtq .swal2-html-container {
    font-size: .93rem !important;
    line-height: 1.6;
    color: var(--ink-soft) !important;
    margin-top: 6px !important;
}

.swal-mtq .swal2-actions { margin-top: 20px !important; }

.swal-mtq .swal2-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 30px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--glow-gold);
    transition: transform .2s var(--ease);
}

.swal-mtq .swal2-confirm:hover { transform: translateY(-2px); }

/* Daftar galat validasi di dalam kotak */
.swal-errors {
    margin: 0;
    padding-left: 20px;
    text-align: left;
    display: grid;
    gap: 5px;
}

.swal-errors li { font-size: .89rem; }

/* Ikon centang mengikuti warna utama situs */
.swal-mtq .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--mtq-500) !important; }
.swal-mtq .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(18, 160, 147, .35) !important; }

/* Pada layar sempit kotaknya dirapatkan agar seluruh isinya tetap muat */
@media (max-width: 520px) {
    /* Satu kartu penuh dengan sedikit intipan kartu berikutnya */
    .news-rail-track > .card-mtq { flex-basis: 86%; max-width: 86%; }

    /* Tulisan pada tombol cari dilepas; lambang panah sudah cukup menjelaskan
       maksudnya, dan ruang yang dihematnya kembali kepada kolom ketiknya. */
    .find-bar input { padding: 15px 60px 15px 42px; font-size: .86rem; }
    .find-bar > i { left: 16px; font-size: .95rem; }
    .find-bar button { padding: 12px 15px; }
    .find-bar button span { display: none; }

    .swal-mtq { padding: 20px 18px 18px !important; }
    .swal-mtq .swal2-icon { width: 62px !important; height: 62px !important; margin: 4px auto 12px !important; }
    .swal-mtq .swal2-title { font-size: 1.08rem !important; }
    .swal-mtq .swal2-html-container { font-size: .88rem !important; }
    .swal-mtq .swal2-actions { margin-top: 16px !important; }
    .swal-errors { padding-left: 17px; }
    .swal-errors li { font-size: .85rem; }
}

.alert-mtq {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.alert-ok { background: var(--mtq-50); color: var(--mtq-800); border: 1px solid var(--mtq-200); }
.alert-err { background: #fdeceb; color: #a03028; border: 1px solid #f5c6c2; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    background: linear-gradient(170deg, var(--mtq-950), var(--mtq-900));
    color: rgba(255, 255, 255, .62);
    padding-top: clamp(56px, 7vw, 80px);
    overflow: hidden;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 48px;
    position: relative;
    z-index: 1;
}

.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }

/*
   Latar footer hijau gelap, jadi logo diberi bayangan agar tepinya tegas.

   Ukurannya ditakar dari lebar, bukan tinggi: berkas logonya melintang
   dengan perbandingan hampir 3 : 1, sehingga tinggi yang terdengar wajar
   justru melebar melewati kolomnya sendiri.
*/
.footer-logo {
    width: min(300px, 100%);
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}
.footer-about { font-size: .92rem; max-width: 340px; }

.footer-brand strong { color: var(--white); font-size: 1.05rem; display: block; }
.footer-brand span { color: var(--gold-300); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }

.site-footer h4 {
    color: var(--white);
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: rgba(255, 255, 255, .62); font-size: .9rem; }
.footer-links a:hover { color: var(--gold-300); }

.social-row { display: flex; gap: 10px; margin-top: 18px; }

.social-row a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .8);
    font-size: 1.05rem;
    transition: all .25s var(--ease);
}

.social-row a:hover {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    border-color: transparent;
    color: var(--mtq-950);
    transform: translateY(-3px);
    box-shadow: var(--glow-gold);
}

/*
   Pencacah pengunjung di kaki halaman.

   Dua kotak berdampingan: jumlah keseluruhan dan jumlah hari ini. Angkanya
   memakai angka berlebar tetap supaya tidak bergeser-geser saat berubah -
   di kaki halaman yang tenang, angka yang meloncat lebih menarik perhatian
   daripada isinya sendiri.
*/
.footer-visitors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* Lapik bawah dilebihkan dari lapik atas supaya pita ini tidak menempel
       pada garis pemisah baris hak cipta di bawahnya - jarak yang sama di
       kedua sisi membuatnya terbaca menempel, karena garis itu sendiri sudah
       menjadi batas visual. */
    padding: 18px 0 26px;
}

.visitor-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
}

.visitor-box > i {
    font-size: 1.15rem;
    color: var(--gold-400);
}

.visitor-box small {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.visitor-box b {
    display: block;
    margin-top: 1px;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    font-size: .84rem;
    position: relative;
    z-index: 1;
}

.to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: var(--glow-gold);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .3s var(--ease);
    z-index: 900;
}

.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Tombol musik latar

   Diletakkan tepat di atas tombol "kembali ke atas" dengan posisi tetap,
   bukan mengikuti kemunculan tombol itu, supaya tidak melompat saat digulir.
   -------------------------------------------------------------------------- */

.music-toggle {
    position: fixed;
    right: 22px;
    bottom: 80px;
    z-index: 900;

    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;

    border: 1px solid rgba(248, 215, 130, .5);
    border-radius: 15px;
    background: linear-gradient(140deg, var(--mtq-700), var(--mtq-900));
    color: var(--gold-300);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(3, 36, 34, .6);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}

.music-toggle:hover {
    transform: translateY(-3px);
    color: var(--gold-200);
    box-shadow: 0 14px 28px -10px rgba(224, 169, 46, .5);
}

.music-toggle:focus-visible {
    outline: 2px solid var(--gold-300);
    outline-offset: 3px;
}

/* Saat menyala, tombol berganti rupa menjadi emas */
.music-toggle.is-playing {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    border-color: rgba(255, 255, 255, .45);
}

/* Ikon nada tampil saat senyap, batang penyetara saat berbunyi */
.music-icon,
.music-bars { grid-area: 1 / 1; }

.music-bars {
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 17px;
}

.music-bars span {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    animation: musicBar .9s ease-in-out infinite;
}

.music-bars span:nth-child(2) { animation-delay: .18s; }
.music-bars span:nth-child(3) { animation-delay: .36s; }

@keyframes musicBar {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

.music-toggle.is-playing .music-icon { display: none; }
.music-toggle.is-playing .music-bars { display: flex; }

/* Sebagian pengguna menonaktifkan animasi; batangnya dibekukan pada
   ketinggian berbeda agar tetap terbaca sebagai penyetara yang menyala. */
@media (prefers-reduced-motion: reduce) {
    .music-bars span:nth-child(1) { transform: scaleY(.5); }
    .music-bars span:nth-child(2) { transform: scaleY(1); }
    .music-bars span:nth-child(3) { transform: scaleY(.7); }
}

/* --------------------------------------------------------------------------
   Halaman dalam
   -------------------------------------------------------------------------- */

.page-hero {
    position: relative;
    padding: calc(var(--header-h) + 64px) 0 64px;
    background: linear-gradient(150deg, var(--mtq-950), var(--mtq-800) 60%, var(--mtq-600));
    overflow: hidden;
    text-align: center;
}

.page-hero h1 { color: var(--white); margin-bottom: 10px; }
.page-hero p { color: rgba(255, 255, 255, .74); max-width: 640px; margin-inline: auto; }

.breadcrumb-mtq {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    font-size: .84rem;
    color: rgba(255, 255, 255, .55);
}

.breadcrumb-mtq a { color: var(--gold-300); }
.breadcrumb-mtq li + li::before { content: '/'; margin-right: 8px; opacity: .5; }

.prose { font-size: 1.02rem; color: var(--ink-soft); }

/*
   Paragraf naskah berita menjorok pada baris pertamanya.

   Yang pertama dalam satu naskah, dan yang langsung menyusul judul bagian,
   sengaja tidak dijorokkan: tidak ada paragraf sebelumnya yang perlu
   dibedakan darinya, dan menjorokkannya justru membuat awal naskah terlihat
   seperti terdorong tanpa sebab.
*/
.prose.is-indented p { text-indent: 1.8em; }

.prose.is-indented > p:first-child,
.prose.is-indented h2 + p,
.prose.is-indented h3 + p,
.prose.is-indented h4 + p,
.prose.is-indented blockquote + p,
.prose.is-indented ul + p,
.prose.is-indented ol + p { text-indent: 0; }
.prose h2 { font-size: 1.6rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow-md); margin: 1.4em 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
    margin: 1.5em 0;
    padding: 18px 24px;
    border-left: 4px solid var(--gold-400);
    background: var(--gold-100);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--mtq-800);
}

.article-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/*
   Gambar utama berita ditampilkan utuh, tidak dipangkas.

   Patokan 16:8 dengan object-fit: cover dilepas: berita kerap membawa poster
   atau selebaran yang tegak, dan pemangkasan ke bidang lebar justru membuang
   bagian yang paling ingin dibaca. Ukurannya dituntun ukuran asli gambar,
   dibatasi lebar kartu dan tinggi layar - keduanya bekerja bersama tanpa
   merusak perbandingan sisi, sehingga object-fit tidak diperlukan sama sekali.
*/
.article-card .cover {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(150deg, var(--mtq-900), var(--mtq-950));
}

.article-card .cover img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* Sisakan ruang agar judul dan awal naskah tetap terlihat tanpa digulir */
    max-height: 78vh;
}

/* ---- Foto tambahan pada berita ---- */

.news-gallery {
    margin-top: clamp(28px, 3.5vw, 40px);
    padding-top: clamp(20px, 2.5vw, 28px);
    border-top: 1px solid var(--line);
}

.news-gallery-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.news-gallery-title i { color: var(--gold-600); font-size: 1.05rem; }

.news-gallery-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

/* Kartu berita lebih sempit daripada halaman galeri - tiga kolom sudah padat */
.news-gallery .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---- Sumber berita ---- */

.news-source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: .85rem;
    color: var(--ink-muted);
}

.news-source i { color: var(--gold-600); }

.news-source a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--mtq-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s var(--ease);
}

.news-source a:hover { color: var(--gold-700); }
.news-source a i { font-size: .72rem; color: inherit; opacity: .7; }

/* Tautan sumber pada kartu sorotan - sebaris dengan tanggal di news-meta */
.news-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mtq-700);
    font-weight: 700;
    transition: color .25s var(--ease);
}

.news-source-link:hover { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; }
.news-source-link i:last-child { font-size: .7rem; opacity: .65; }
.article-card .inner { padding: clamp(24px, 4vw, 48px); }

.pagination-mtq {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination-mtq .page-link,
.pagination-mtq span.dots {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow-xs);
    font-size: .9rem;
    font-weight: 600;
    color: var(--mtq-800);
}

.pagination-mtq .page-link:hover { box-shadow: var(--shadow-sm); color: var(--gold-700); }

.pagination-mtq .page-link.active {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--mtq-950);
    box-shadow: var(--glow-gold);
}

.pagination-mtq .disabled { opacity: .4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Pencarian menyeluruh

   Satu bentuk untuk dua tempat: bilah pada beranda - di bawah ringkasan angka,
   di atas sambutan - dan bilah pada halaman hasilnya. Keduanya memakai kelas
   yang sama supaya pengunjung mengenalinya sebagai satu perkakas.
   -------------------------------------------------------------------------- */

/*
   Lebarnya dibiarkan penuh mengikuti wadah, tanpa batas tersendiri. Dengan
   begitu tepi kiri-kanannya lurus dengan kartu ringkasan angka tepat di
   atasnya di beranda, dan dengan daftar hasil di halaman pencarian - batas
   selebar 720 px membuatnya menggantung sempit di tengah, tidak segaris
   dengan apa pun.
*/
.find-bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 26px;
}

.find-bar > i {
    position: absolute;
    left: 26px;
    font-size: 1.15rem;
    color: var(--gold-600);
    pointer-events: none;
}

.find-bar input {
    width: 100%;
    padding: 21px 158px 21px 60px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    box-shadow: var(--shadow-md);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.find-bar input::-webkit-search-cancel-button { display: none; }
.find-bar input::placeholder { color: var(--ink-muted); }

.find-bar input:focus {
    outline: 0;
    border-color: var(--mtq-400);
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(47, 188, 172, .16);
}

.find-bar button {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 30px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    color: var(--white);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.find-bar button:hover {
    transform: translateX(2px);
    box-shadow: var(--glow-teal);
}

.find-bar button i { transition: transform .3s var(--ease); }
.find-bar button:hover i { transform: translateX(3px); }

/*
   Bilah pada beranda berdiri sendiri di antara dua seksi, jadi jarak atasnya
   diatur di sini - bukan diserahkan pada lapik seksi sambutan di bawahnya,
   yang jauh lebih longgar dan akan membuat bilah ini terlihat lebih dekat ke
   sambutan daripada ke kartu ringkasan angka yang menjadi asalnya.
*/
.site-search {
    position: relative;
    z-index: 4;
    padding-top: 34px;
}

.site-search .find-bar { margin-bottom: 0; }

/*
   Seksi tepat di bawah bilah pencarian dirapatkan. Lapik bawaan seksi setinggi
   112 px ditakar untuk jarak antar seksi yang berdiri sendiri; di sini bilah
   pencarian dan sambutan adalah satu tarikan yang sama, dan jarak sebesar itu
   memutusnya menjadi dua bagian yang tak berhubungan.

   Dipilih lewat kesebelahan, bukan kelas pada seksinya: bilah ini boleh
   dipindah kapan saja, dan begitu ia pindah aturan ini ikut berhenti sendiri.
   Kemungkinan adanya pemisah di antara keduanya - yang muncul bila ringkasan
   angka dikosongkan - ikut diperhitungkan.
*/
.site-search + .section,
.site-search + .sec-line + .section { padding-top: clamp(30px, 3.6vw, 52px); }

.find-summary {
    text-align: center;
    font-size: .9rem;
    color: var(--ink-muted);
    margin: 0 0 18px;
}

.find-summary b { color: var(--mtq-900); }

/* ---- Daftar hasil ---- */

.find-list {
    display: grid;
    gap: 12px;
    margin-bottom: 34px;
}

.find-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--line);
    color: inherit;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.find-card:hover {
    transform: translateX(4px);
    border-color: var(--mtq-200);
    box-shadow: var(--shadow-md);
}

.find-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(150deg, var(--mtq-100), var(--mtq-50));
    color: var(--mtq-800);
    font-size: 1.05rem;
    transition: background .28s var(--ease), color .28s var(--ease);
}

.find-card:hover .find-icon {
    background: linear-gradient(150deg, var(--gold-300), var(--gold-500));
    color: var(--mtq-950);
}

.find-body {
    flex: 1;
    /* Tanpa ini cuplikan panjang menolak menyempit dan mendorong panah keluar */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.find-type {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-700);
}

.find-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--mtq-900);
}

.find-snippet {
    font-size: .84rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

.find-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: .76rem;
    color: var(--ink-muted);
}

.find-meta i { color: var(--mtq-400); }

/* Kata yang cocok ditandai, termasuk yang tersembunyi jauh di dalam isi -
   tanpa penanda ini pengunjung harus menebak mengapa satu hasil ikut muncul. */
.find-card mark {
    background: var(--gold-100);
    color: var(--gold-800);
    padding: 0 2px;
    border-radius: 3px;
}

.find-go {
    flex-shrink: 0;
    align-self: center;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mtq-50);
    color: var(--mtq-700);
    transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}

.find-card:hover .find-go {
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    color: var(--white);
    transform: translateX(3px);
}

.filter-pill b {
    margin-left: 3px;
    font-weight: 800;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   Bilah alat Pesona Semarang

   Dua perkakas dalam satu papan: pengurutan menurut jarak di kiri, pencarian
   nama di kanan. Keduanya satu borang GET - pilihan pengunjung tersimpan di
   alamat halaman, jadi hasil pencarian dapat dibagikan atau ditandai.
   -------------------------------------------------------------------------- */

.place-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
    padding: 18px 22px;
    margin-bottom: 22px;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.place-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.place-field.is-sort { flex: 1 1 320px; }
.place-field.is-search { flex: 1 1 300px; }

.place-field label {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.place-select,
.place-search {
    position: relative;
    display: flex;
    align-items: center;
}

.place-select > i,
.place-search > i {
    position: absolute;
    left: 15px;
    color: var(--gold-600);
    font-size: .92rem;
    pointer-events: none;
}

.place-select select,
.place-search input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.place-select select {
    appearance: none;
    /* Ruang bagi tanda panah yang digambar sendiri di bawah ini */
    padding-right: 42px;
    cursor: pointer;
}

/* Tanda panah sendiri: bentuk bawaan peramban berbeda-beda dan tidak dapat
   diwarnai, sementara kolom ini harus seragam dengan kotak pencariannya. */
.place-select::after {
    content: '';
    position: absolute;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--mtq-700);
    border-bottom: 2px solid var(--mtq-700);
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.place-search input { font-weight: 500; padding-right: 48px; }
.place-search input::-webkit-search-cancel-button { display: none; }

.place-select select:focus,
.place-search input:focus {
    outline: 0;
    border-color: var(--mtq-400);
    box-shadow: 0 0 0 4px rgba(47, 188, 172, .16);
}

.place-search button {
    position: absolute;
    right: 6px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    color: var(--white);
    font-size: .85rem;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.place-search button:hover { transform: scale(1.06); box-shadow: var(--glow-teal); }

/* Keterangan izin lokasi; selebar papan agar tidak menghimpit kedua kolom */
.place-note {
    flex: 1 0 100%;
    margin: 0;
    font-size: .82rem;
    color: var(--ink-muted);
}

.place-note[hidden] { display: none; }
.place-note.is-error { color: var(--gold-700); font-weight: 600; }

.place-note.is-busy::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid var(--mtq-200);
    border-top-color: var(--mtq-600);
    border-radius: 50%;
    vertical-align: -1px;
    animation: eeSpin .8s linear infinite;
}

/* Keterangan titik acuan yang sedang dipakai */
.place-origin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 18px;
    margin-bottom: 22px;
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--mtq-50), var(--white));
    border: 1px dashed var(--mtq-200);
    font-size: .84rem;
    color: var(--ink-soft);
}

.place-origin i { color: var(--gold-600); }
.place-origin span { flex: 1; min-width: 200px; }
.place-origin b { color: var(--mtq-900); }

.place-origin a {
    font-weight: 700;
    color: var(--mtq-700);
    text-decoration: underline;
}

/* Lencana jarak pada kartu destinasi */
.place-distance {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 251, 240, .94);
    color: var(--mtq-900);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
}

.place-distance i { color: var(--gold-600); font-size: .82rem; }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
}

.filter-pill {
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--white);
    box-shadow: var(--shadow-xs);
    font-size: .86rem;
    font-weight: 700;
    color: var(--mtq-700);
    transition: all .25s var(--ease);
}

.filter-pill:hover { box-shadow: var(--shadow-sm); color: var(--gold-700); }

.filter-pill.active {
    background: linear-gradient(140deg, var(--mtq-600), var(--mtq-800));
    color: var(--white);
    box-shadow: var(--glow-teal);
}

/* --------------------------------------------------------------------------
   Rel geser kartu berita

   Dipakai hanya ketika kartunya lebih dari empat. Empat kartu masih muat satu
   baris; yang kelima dan seterusnya akan melipat menjadi baris kedua yang
   setengah kosong - dan itu terlihat seperti kekurangan isi, bukan pilihan.

   Modul putar otomatisnya sama dengan cabang lomba dan Main/Side Event, jadi
   berhenti saat disorot dan menghitung titik penandanya sendiri.
   -------------------------------------------------------------------------- */

.news-rail { position: relative; }

.news-rail-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Bayangan kartu ikut terpangkas oleh overflow mendatar - sedikit lapik
       menyelamatkannya. */
    padding: 6px 0 12px;
}

.news-rail-track::-webkit-scrollbar { display: none; }

.news-rail-track > .card-mtq {
    flex: 0 0 calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
    scroll-snap-align: start;
}

/* Jeda bertahap dilepas di dalam rel: kartu di luar bidang baru muncul saat
   digeser ke dalam, dan penundaan membuatnya terasa tertinggal. */
.news-rail-track > .reveal { transition-delay: 0ms !important; }

/* --------------------------------------------------------------------------
   Titik penanda rel geser

   Dipakai bersama oleh cabang lomba dan Main/Side Event. Titiknya dibuat oleh
   app.js sebanyak halaman yang ada, dan seluruh wadahnya disembunyikan bila
   deretnya memang muat tanpa perlu digeser - yang di layar lebar selalu.
   -------------------------------------------------------------------------- */

.rail-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
}

.rail-dots[hidden] { display: none; }

.rail-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--mtq-200);
    cursor: pointer;
    transition: width .35s var(--ease), background .35s var(--ease);
}

.rail-dots button.active {
    width: 24px;
    background: linear-gradient(90deg, var(--gold-400), var(--mtq-500));
}

.empty-state {
    padding: 64px 24px;
    text-align: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink-muted);
}

.empty-state i { font-size: 2.4rem; color: var(--mtq-200); display: block; margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Animasi
   -------------------------------------------------------------------------- */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsif
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    /* Tiga kartu per langkah - sejalan dengan kisi grid-4 yang di lebar ini
       juga turun menjadi tiga kolom. */
    .news-rail-track > .card-mtq {
        flex-basis: calc((100% - 48px) / 3);
        max-width: calc((100% - 48px) / 3);
    }

    .nav-list { display: none; }
    .nav-toggle { display: grid; place-items: center; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }

    /* Kolom dikurangi satu tingkat agar kartu tidak menyempit berlebihan */
    .event-list.is-main { grid-template-columns: repeat(3, 1fr); }
    .event-list.is-side { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 992px) {
    .news-rail-track { gap: 16px; }

    .news-rail-track > .card-mtq {
        flex-basis: calc((100% - 32px) / 3);
        max-width: calc((100% - 32px) / 3);
    }

    .event-list.is-main { grid-template-columns: repeat(2, 1fr); }
    .event-list.is-side { grid-template-columns: repeat(3, 1fr); }

    /* ---- Hero satu lajur ----
       Rata tengahnya sendiri sudah berlaku sejak aturan dasar; di sini kolom
       teks dan kolom foto tinggal ditumpuk, lalu ornamen pemisah dirapatkan
       mengikuti lebar layar. Tema sengaja tidak dibatasi lebarnya supaya
       tetap seiring judul di atasnya. */
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { padding-bottom: 0; }
    .hero-rule { width: min(280px, 78%); }

    .hero-stage { min-height: 0; margin-top: 16px; }
    .hero-leaders img { max-height: 46vh; }
    .vt-float { left: 14px; width: 172px; height: 172px; padding: 12px 10px; }
    .vt-logo { width: 142px; height: auto; margin-top: -38px; }
    .vt-caption { max-width: 116px; }
    .vt-caption b { font-size: .78rem; }
    .about-grid { grid-template-columns: 1fr; }

    /* Rasio kartu dipertahankan seperti versi desktop agar foto tidak
       terpotong; yang dikecilkan hanya lebarnya. */
    .about-figure {
        max-width: 320px;
        margin-inline: auto;
    }
    .contact-grid { grid-template-columns: 1fr; }
    .news-feature { grid-template-columns: 1fr; }
    .news-feature .media { min-height: 240px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid,
    .gallery-grid.is-video { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    /* Dua kartu per langkah; kartu berita terlalu berisi untuk dipaksa tiga */
    .news-rail-track > .card-mtq {
        flex-basis: calc((100% - 14px) / 2);
        max-width: calc((100% - 14px) / 2);
    }

    .news-rail-track { gap: 14px; }

    :root { --header-h: 68px; }

    .section { padding: 56px 0; }
    .brand-mark { width: 44px; height: 44px; border-radius: 12px; font-size: .85rem; }
    .brand-mark.has-logo { padding: 5px 7px 9px; }
    .brand-title { font-size: .9rem; }
    .brand-sub { font-size: .62rem; }
    .hero { min-height: auto; padding: calc(var(--header-h) + 30px) 0 44px; }
    .hero-logo-event { height: 96px; }
    .hero-logo-city { height: 74px; }

    /*
       Jarak tegak antar elemen hero dirapatkan menyeluruh. Ukuran bawaannya
       ditakar untuk kolom lebar yang berdampingan dengan foto pimpinan; begitu
       semuanya bertumpuk satu lajur, jarak yang sama membuat judul, ornamen,
       tema, dan keterangan tampak terserak menjadi empat blok terpisah alih-
       alih satu kesatuan.
    */
    .hero-logos { gap: 14px; margin-bottom: 11px; }
    .hero h1 { margin-bottom: 7px; }
    .hero-rule { margin-bottom: 12px; }

    .hero-theme {
        -webkit-line-clamp: 3;
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    /* Kepala seksi: judul dan label ditengahkan, tombol ikut di tengah */
    .section-head-split {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .section-head-split .eyebrow { justify-content: center; }
    .section-head-split .eyebrow::after {
        content: '';
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--gold-500), transparent);
    }

    /*
       ---- Sambutan ----

       Seluruh seksi dirapatkan agar tidak menghabiskan satu layar sendirian.
       Label, judul, dan tanda kutip ditengahkan; isi sambutan dibuat rata
       kanan-kiri dengan baris terakhir jatuh di tengah, sehingga bidang teks
       tampak rapi dan tetap seimbang terhadap judul yang juga di tengah.

       Pemenggalan kata dinyalakan karena rata kanan-kiri pada layar sempit
       mudah menyisakan jarak antar kata yang menganga.
    */
    .about-grid { gap: 24px; }

    .about-grid .eyebrow { justify-content: center; width: 100%; }
    .about-grid > div:last-child > h2 { text-align: center; }


    .about-grid p,
    .about-text {
        text-align: justify;
        text-align-last: center;
        text-justify: inter-word;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .about-grid > div:last-child > p { font-size: .86rem; }
    .about-text { font-size: .92rem; line-height: 1.72; }

    /*
       Naskah sambutan tetap dua kolom di layar sempit supaya tingginya
       terpangkas separuh. Lebar minimum kolom justru harus dilepas di sini:
       pada bidang selebar 320 px aturan itu akan mengembalikannya menjadi
       satu kolom. Sebagai gantinya huruf, jarak antar kolom, dan huruf
       pembuka diciutkan agar tiap baris masih memuat dua puluhan huruf.
    */
    .about-text.is-columns {
        column-width: auto;
        column-count: 2;
        column-gap: 16px;
        font-size: .8rem;
        line-height: 1.68;
    }

    /* Baris terakhir di tengah hanya cocok untuk satu lajur penuh; di dalam
       kolom sempit ia justru memutus alur bacanya. */
    .about-text.is-columns,
    .about-text.is-columns p { text-align-last: auto; }

    .about-text.is-columns p { margin-bottom: 10px; }

    .about-text.is-columns > p:first-child::first-letter {
        margin: 5px 7px 0 0;
        font-size: 2.3rem;
        line-height: .76;
    }

    .about-grid .quote-mark {
        position: static;
        opacity: 1;
        text-align: center;
        font-size: 2.6rem;
        margin-bottom: -8px;
    }

    .about-message::after { margin-inline: auto; }

    /* Foto diciutkan; jarak atasnya cukup menampung topi yang menyembul */
    .about-figure {
        max-width: clamp(170px, 46vw, 220px);
        margin-top: 28px;
    }

    .about-caption { left: 14px; right: 14px; bottom: 14px; }
    .about-caption strong { font-size: .84rem; }
    .about-caption span { font-size: .7rem; }

    /* Kartu poin dikecilkan: lambang, jarak, dan hurufnya turun serentak */



    /* Tanggal dan kota dijaga tetap satu baris ringkas */
    .hero-facts {
        flex-wrap: nowrap;
        gap: 14px;
        margin-bottom: 6px;
    }

    .hero-facts .fact {
        flex: 0 1 auto;
        min-width: 0;
        font-size: .74rem;
        font-weight: 700;
        gap: 6px;
    }

    /* Garis pemisah digeser mengikuti jarak antar kolom yang menyempit */
    .hero-facts .fact + .fact::before { left: -7px; height: 12px; }

    .hero-facts .fact i { font-size: .88rem; }

    /* Tombol hero ikut diciutkan; ukuran layar penuh tidak muat di sini */
    .hero-btn { padding: 14px 24px; font-size: .92rem; }
    .hero-btn i { font-size: 1.02rem; }

    /*
       Tombol ajakan dipindah ke bawah foto pimpinan. Isi kolom teks diangkat
       menjadi anak langsung hero-grid lewat display:contents, supaya urutannya
       bisa diatur bersama hero-stage.
    */
    /* align-items pada flex kolom mengatur sumbu mendatar, jadi nilai "end"
       dari aturan dasar harus dinetralkan agar isi tidak rata kanan. */
    .hero-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-copy { display: contents; }

    /* Rata tengahnya sendiri sudah diatur sejak 992 px; di sini hanya
       penyesuaian yang timbul karena hero-copy berubah menjadi display:
       contents - anaknya naik menjadi anak langsung hero-grid, sehingga
       perataan mendatarnya kembali diatur masing-masing. */
    .hero-badge,
    .hero-logos { align-self: center; }

    /* Cahaya latar di belakang foto dikecilkan agar tidak menambah kesan jarak */
    .hero-leaders::before { width: 96%; filter: blur(34px); }
    .hero-stage { order: 5; flex-direction: column; align-items: center; margin-top: 2px; }

    .hero-actions {
        order: 6;
        margin-top: 16px;
    }

    .hero-actions .btn-mtq { flex: 1 1 100%; }

    /* Di layar sempit tombol diringkas menjadi logo saja agar hemat ruang.
       Nama tetap terbaca pembaca layar lewat aria-label. */
    .vt-float {
        left: 10px;
        bottom: 12px;
        width: 84px;
        height: 84px;
        padding: 0;
    }
    .vt-float:hover { transform: scale(1.06); }
    .vt-logo { width: 92px; height: auto; margin-top: -10px; }
    .vt-caption { display: none; }

    .countdown-bar { padding: 18px; gap: 16px; }
    .countdown-icon { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 14px; }
    .countdown-lead { gap: 10px; }

    /* Maskot pindah menjadi lencana mengambang, jadi versi dalam bilah dilepas */
    .countdown-mascot { display: none; }
    .countdown-units { margin-left: 0; width: 100%; justify-content: space-between; gap: 6px; }
    .cd-unit { flex: 1; min-width: 0; padding: 10px 4px 8px; }
    .stat-strip { margin-top: -32px; }

    /*
       Empat ringkasan angka dirapatkan menjadi dua baris berisi dua kartu.
       Ukurannya diciutkan menyeluruh - lapik, lambang, angka, sampai
       keterangan - supaya keempatnya terbaca sekali pandang tanpa perlu
       digulir panjang. Bayangan ikut ditipiskan karena kartu sekecil ini
       terlihat berat bila memakai elevasi versi lebar.
    */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-item {
        padding: 16px 12px 14px;
        border-radius: var(--radius);
        box-shadow:
            0 16px 32px -14px rgba(3, 36, 34, .24),
            0 4px 10px -4px rgba(3, 36, 34, .1),
            var(--inset-top);
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 9px;
        border-radius: 13px;
        font-size: 1.05rem;
    }

    .stat-value { font-size: clamp(1.5rem, 7vw, 2rem); }
    .stat-label { font-size: .76rem; margin-top: 2px; }
    .stat-note { font-size: .64rem; margin-top: 4px; line-height: 1.45; }
    /* Ornamen dikecilkan dan disamarkan agar tidak melawan isi di layar sempit */
    .venue-ornament { width: clamp(240px, 60vw, 330px); top: -74px; left: -86px; opacity: .09; }

    .venue-ornament.is-bottom {
        right: -86px;
        bottom: -74px;
        opacity: .055;
    }

    /* Gambar acara pindah ke bawah isi agar kartu tidak terlalu sempit */
    .agenda-card.has-image { grid-template-columns: 1fr; }
    .agenda-figure { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

    /*
       Main dan Side Event ikut menjadi rel geser yang berputar sendiri.
       Main Event satu kartu per langkah dengan gambar lebih lebar; Side Event
       dua sekaligus karena kartunya ringkas.
    */
    .event-slider { position: relative; }

    .event-list {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 6px 0 10px;
    }

    .event-list::-webkit-scrollbar { display: none; }

    .event-card { scroll-snap-align: start; }

    .event-list.is-main .event-card { flex: 0 0 100%; max-width: 100%; }
    .event-list.is-main .event-media { aspect-ratio: 16 / 9; }

    .event-list.is-side .event-card {
        flex: 0 0 calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }

    .event-tab { padding: 12px 10px 11px; }
    .event-tab span { font-size: .66rem; }

    /* Bilah pencarian diciutkan - ukuran layar lebar terlalu tinggi di sini */
    .site-search { padding-top: 26px; }
    .find-bar { margin-bottom: 20px; }
    .find-bar > i { left: 18px; font-size: 1rem; }
    .find-bar input { padding: 16px 124px 16px 46px; font-size: .9rem; }
    .find-bar button { padding: 12px 22px; font-size: .84rem; }

    /* Bilah alat Pesona Semarang ditumpuk; keduanya butuh lebar penuh */
    .place-tools { padding: 14px 16px; gap: 14px; }
    .place-field.is-sort,
    .place-field.is-search { flex: 1 1 100%; }
    .place-origin { font-size: .8rem; padding: 11px 14px; }
    .place-distance { top: 10px; left: 10px; font-size: .72rem; padding: 5px 10px; }

    /* Ruang sempit: jumlah hasil dilepas, kolom pencarian dapat lebar penuh */
    .event-search input { padding-right: 44px; }
    .event-search-clear { right: 8px; }
    .event-search-count { display: none; }

    /* Maskot dilepas agar teks pengantar tidak terhimpit di layar sempit */
    .event-intro.has-mascot { display: block; }
    .event-intro-mascot { display: none; }

    /* Kartu hampir selebar layar dengan sedikit intipan kartu berikutnya
       sebagai penanda bahwa deretnya masih bisa digeser. */
    .venue-card { flex-basis: 84%; }
    .venue-nav { display: none; }
    .venue-tools { gap: 12px; }
    .venue-count { width: 100%; text-align: center; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /*
       Cabang lomba berubah menjadi rel geser: dua kartu terpampang penuh tiap
       langkah, dan app.js memutarnya sendiri. Lebar kartu dihitung dari sisa
       ruang setelah satu jarak antar kolom, jadi satu langkah selebar bidang
       tampak persis memindahkan dua kartu - tanpa sisa yang mengintip.
    */
    .branch-slider { position: relative; }

    .branch-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* Overflow mendatar ikut memangkas sisi atas-bawah; sedikit lapik
           menyelamatkan bayangan kartu agar tidak terpotong. */
        padding: 6px 0 10px;
    }

    .branch-grid::-webkit-scrollbar { display: none; }

    .branch-card {
        flex: 0 0 calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
        scroll-snap-align: start;
    }

    /* Jeda bertahap dilepas di dalam rel: kartu di luar bidang baru muncul
       saat digeser ke dalam, dan penundaan membuatnya terasa tertinggal. */
    .branch-grid > .reveal { transition-delay: 0ms !important; }

    /* Kartu jadi dua kolom dan rapat, maskot dikecilkan serta disamarkan
       supaya tidak melawan isi di layar sempit. */
    .branch-watermark {
        width: clamp(200px, 54vw, 320px);
        right: -46px;
        bottom: -14px;
        opacity: .38;
    }

    /* Dua maskot sekaligus terlalu ramai di layar sempit, sisi kiri dilepas */
    .branch-watermark.is-left { display: none; }

    /*
       Empat logo per baris, sisanya turun ke baris berikutnya. Memakai flex,
       bukan kisi berkolom tetap: hanya dengan cara ini baris terakhir yang
       tidak penuh ikut tertata di tengah, bukan menggantung di kiri.

       Lebar tiap logo dihitung dari sisa ruang setelah tiga jarak antar
       kolom, sehingga tetap pas empat sejajar berapa pun lebar layarnya.
    */
    .partner-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 10px;
    }

    .partner-item {
        flex: 0 0 calc((100% - 30px) / 4);
        max-width: calc((100% - 30px) / 4);
        padding: 2px;
    }

    .partner-item img,
    .partner-item span { height: clamp(40px, 12vw, 58px); }

    .partner-item span { font-size: .66rem; line-height: 1.3; }

    .branch-card { padding: 20px 16px; }
    .branch-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1.2rem; margin-bottom: 12px; }
    .branch-card h3 { font-size: .95rem; }
    .branch-card p { font-size: .8rem; }
    .branch-tags .chip { font-size: .64rem; padding: 4px 9px; }

    /*
       Deretan kartu yang panjang diubah menjadi geseran mendatar dengan
       titik henti, sehingga terasa seperti slider tanpa perlu skrip tambahan.
       Kartu berikutnya sengaja mengintip sebagai penanda masih ada isi lain.
    */
    .card-rail {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-inline: -20px;
        padding: 4px 20px 8px;
    }

    .card-rail::-webkit-scrollbar { display: none; }

    .card-rail > * {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: center;
    }

    .gallery-grid,
    .gallery-grid.is-video { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gallery-play i { width: 44px; height: 44px; font-size: 1.35rem; }
    .gallery-item:nth-child(6n + 1) { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
    /*
       ---- Footer ----

       Dua kolom tautan dilepas: seluruh isinya sudah dapat dicapai dari menu
       geser, dan berjajar ke bawah keduanya hanya memanjangkan kaki halaman.
       Yang tersisa - identitas dan sekretariat - ditumpuk satu lajur dan
       ditengahkan, dengan keterangan dibuat rata kanan-kiri serta baris
       terakhirnya jatuh di tengah agar bidang teksnya rapi.
    */
    .footer-col.is-links,
    .footer-col.is-info { display: none; }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 34px;
        text-align: center;
    }

    /* Logo dibesarkan sebagai penanda utama kaki halaman: keterangan portal
       dilepas, jadi seluruh peran pengenal jatuh pada lambangnya. */
    .footer-brand { justify-content: center; margin-bottom: 0; }
    .footer-logo { width: min(360px, 86%); }

    /* Keterangan portal dilepas - isinya mengulang sambutan di badan halaman
       dan hanya memanjangkan kaki halaman di layar sempit. */
    .footer-about { display: none; }

    .social-row { justify-content: center; margin-top: 18px; }
    .social-row a { width: 38px; height: 38px; border-radius: 11px; font-size: .95rem; }

    .site-footer h4 { font-size: .74rem; margin-bottom: 12px; }

    .footer-links { gap: 10px; justify-items: center; }
    .footer-links a { font-size: .85rem; }

    /* Baris sekretariat: lambang dan teksnya ditengahkan sebagai satu satuan,
       teks panjang tetap terbaca karena dibatasi selebar bidang baca. */
    .footer-links li {
        justify-content: center;
        max-width: 34ch;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;
        justify-content: center;
        text-align: center;
        padding: 18px 0;
        font-size: .78rem;
    }
    /* Jadwal: kolom waktu pindah ke atas agar isi tetap lebar */
    .day-tab { min-width: 96px; padding: 12px 14px 10px; }
    .day-tab b { font-size: 1.5rem; }
    .agenda-summary { padding: 16px 18px; gap: 12px; }
    .agenda-summary-facts { margin-left: 0; width: 100%; }
    .agenda-summary-date b { font-size: 1.1rem; }

    .agenda-card { grid-template-columns: 1fr; }

    .agenda-time {
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
        padding: 11px 18px 11px 22px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .agenda-time b { font-size: 1.05rem; }
    .agenda-time b.end { font-size: .95rem; }
    .agenda-time-sep { width: 14px; height: 2px; margin: 0; background: linear-gradient(90deg, var(--gold-500), rgba(224, 169, 46, .2)); }
    .agenda-body { padding: 16px 18px 18px 22px; }
    .day-nav { width: 36px; height: 36px; font-size: .9rem; }
    .day-nav.prev { left: -4px; }
    .day-nav.next { right: -4px; }
    .agenda-body h4 { font-size: 1.02rem; }

    .map-frame iframe { height: 300px; }
    .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
    .music-toggle { right: 14px; bottom: 66px; width: 44px; height: 44px; }
}

@media (max-width: 420px) {
    /* Kolom sambutan makin sempit, hurufnya ikut turun satu tingkat lagi */
    .about-text.is-columns { column-gap: 13px; font-size: .76rem; }
    .about-text.is-columns > p:first-child::first-letter { font-size: 2.1rem; margin-right: 6px; }

    /* Tetap dua kolom - satu kolom membuat ringkasan angka memanjang jauh ke
       bawah dan mendorong seluruh isi halaman. Yang diciutkan hanya isinya. */
    .stat-grid { gap: 8px; }
    .stat-item { padding: 14px 9px 12px; }
    .stat-icon { width: 34px; height: 34px; border-radius: 11px; font-size: .92rem; margin-bottom: 7px; }
    .stat-label { font-size: .7rem; }
    .stat-note { font-size: .6rem; }

    .cd-unit b { font-size: 1.35rem; }
    .cd-unit span { font-size: .56rem; letter-spacing: .06em; }
    .hero-facts { gap: 11px; }
    .hero-facts .fact { font-size: .68rem; gap: 5px; }
    .hero-facts .fact + .fact::before { left: -6px; height: 11px; }
    .hero-facts .fact i { font-size: .8rem; }
    .mascot-float { width: 72px; height: 72px; bottom: 96px; }
    .mascot-float-img { width: 70px; margin-top: -22px; }

    .vt-float.is-mini { width: 56px; height: 56px; }
    .vt-float.is-mini .vt-logo { width: 58px; max-height: 58px; margin-top: -6px; }
    .mascot-float.is-mini { width: 56px; height: 56px; }
    .mascot-float.is-mini:not(.is-alone) { bottom: 80px; }
    .mascot-float.is-mini .mascot-float-img { width: 56px; margin-top: -16px; }
    /* Lambang dan nama pendamping dikecilkan agar tetap muat berdampingan */
    .nav-mobile-brand { gap: 10px; }
    .nav-mobile-brand img { height: 38px; }
    .nav-mobile-brand img.is-city { height: 42px; }
    .nav-mobile-brand .brand-mark { width: 38px; height: 38px; font-size: .74rem; }
    .nav-mobile-brand .brand-mark.has-logo { padding: 4px 6px 8px; }
    .nav-brand-item { gap: 7px; }
    .nav-brand-text b { font-size: .72rem; }
    .nav-brand-text small { font-size: .54rem; letter-spacing: .04em; }

    /* Layar tersempit: Side Event ikut satu kartu per langkah */
    .event-list.is-side .event-card { flex-basis: 100%; max-width: 100%; }
    .event-list.is-side .event-body p { display: -webkit-box; }
    .event-tab b { font-size: 1.15rem; }

    .vt-float { width: 72px; height: 72px; }
    .vt-logo { width: 80px; height: auto; margin-top: -8px; }
    .branch-card { padding: 16px 13px; }
    .branch-card h3 { font-size: .88rem; }
    .card-rail > * { flex-basis: 84%; max-width: 84%; }
}