/* ==========================================================================
   Tema "hutan peri" untuk halaman pembeli. CSS biasa (tidak butuh build).
   Token warna, bingkai akar, dan komponen. Tailwind dipakai untuk tata letak.
   ========================================================================== */

:root {
    --bg-0: #070d09;
    --bg-1: #0d1610;
    --bg-2: #142219;
    --line: #3f5a3a;
    --moss: #8fc58a;
    --leaf: #6fae7a;
    --gold: #e6dc9a;
    --gold-deep: #c9a74f;
    --bark: #6b4c2a;
    --text: #d6dcc4;
    --text-dim: #8da386;   /* kontras 6,7:1 di atas --bg-1 */
    --danger: #e07a6a;

    /* token yang berbeda antara tema gelap dan terang */
    --head-bg: rgba(7, 13, 9, .88);
    --foot-bg: rgba(7, 13, 9, .7);
    --strip-bg: #1d3524;
    --choice-on: #1b3024;
    --btn-bg: #e6dc9a;
    --btn-bg-hover: #c9a74f;
    --btn-fg: #14210f;
    --danger-text: #f6c9c1;
    --cover-fb: linear-gradient(145deg, #1b3324, #0d1610 70%);
    --panel-shadow: rgba(0, 0, 0, .72);
    --ctl-bg: rgba(7, 13, 9, .75);
    --head-line: rgba(63, 90, 58, .5);
    --wp-top: rgba(7, 13, 9, .78);
    --wp-bottom: rgba(7, 13, 9, .93);
    color-scheme: dark;

    --f-display: 'Cinzel Variable', 'Cinzel', Georgia, 'Times New Roman', serif;
    --f-body: 'EB Garamond Variable', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --f-ui: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---------- tema terang (dipilih lewat tombol matahari/bulan di header) ---------- */
html[data-theme="light"] {
    --bg-0: #d7e4c9;
    --bg-1: #e4eed6;
    --bg-2: #eef4e3;
    --line: #a3b98c;
    --moss: #2f6b3a;
    --leaf: #3f7d4a;
    --gold: #5e4410;
    --gold-deep: #8a6a1c;
    --text: #1b2a19;
    --text-dim: #4b5b45;
    --danger: #b3382a;
    --head-bg: #e1ebd1;   /* pekat (bukan tembus pandang) supaya isi halaman yang lewat di bawah header tidak menyatu dengannya */
    --foot-bg: rgba(196, 216, 174, .9);
    --strip-bg: #c3d9aa;
    --choice-on: #d6e7bd;
    --btn-bg: #2f6b3a;
    --btn-bg-hover: #255a30;
    --btn-fg: #ffffff;
    --danger-text: #8a2a1f;
    --cover-fb: linear-gradient(145deg, #cfe0b6, #b4cf9a 70%);
    --panel-shadow: rgba(48, 70, 30, .34);
    --ctl-bg: rgba(238, 244, 227, .9);
    --head-line: rgba(100, 135, 78, .5);
    --wp-top: rgba(215, 228, 201, .82);
    --wp-bottom: rgba(215, 228, 201, .95);
    color-scheme: light;
}
html[data-theme="light"] body.t-forest {
    background:
        radial-gradient(900px 520px at 8% 0%, rgba(96, 150, 92, .4), transparent 62%),
        radial-gradient(800px 600px at 96% 28%, rgba(205, 215, 130, .45), transparent 60%),
        radial-gradient(1100px 700px at 50% 105%, rgba(80, 135, 90, .36), transparent 62%),
        linear-gradient(180deg, #e3edd3 0%, #d3e2c3 100%);
    background-color: var(--bg-0);
    /* singkatan "background:" di atas mengembalikan attachment ke scroll; tanpa baris ini latar ikut bergulir dan makin pekat/hijau ke bawah halaman */
    background-attachment: fixed;
}
/* ---------- dasar ---------- */
body.t-forest {
    background:
        radial-gradient(circle at 12% 28%, rgba(143, 197, 138, .14), transparent 38%),
        radial-gradient(circle at 88% 52%, rgba(230, 220, 154, .12), transparent 34%),
        radial-gradient(circle at 58% 90%, rgba(143, 197, 138, .12), transparent 40%),
        radial-gradient(1400px 700px at 50% -8%, #1f3a29 0%, #0f1c14 48%, var(--bg-0) 78%);
    background-color: var(--bg-0);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 1.6;
}

.t-forest h1, .t-forest h2, .t-forest h3 { font-family: var(--f-display); color: var(--gold); font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
/* :where() membuat aturan ini berspesifisitas nol, sehingga warna tombol dan tautan khusus tidak tertimpa */
:where(.t-forest) a { color: inherit; }
.t-forest .ui { font-family: var(--f-ui); }
.t-forest .dim { color: var(--text-dim); }
.t-forest .gold { color: var(--gold); }

.t-forest a:focus-visible,
.t-forest button:focus-visible,
.t-forest input:focus-visible,
.t-forest select:focus-visible,
.t-forest textarea:focus-visible,
.t-forest summary:focus-visible {
    outline: 3px solid var(--moss);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- strip info toko ---------- */
.strip { text-align: center; font-family: var(--f-ui); font-size: 14px; padding: 8px 16px; }
.strip--info { background: var(--strip-bg); color: var(--gold); border-bottom: 1px solid var(--line); }
.strip--tutup { background: #6b2a22; color: #fff; }

/* ---------- header ---------- */
/* header menempel di atas layar saat halaman digulir; mengecil sedikit supaya tidak memakan ruang */
html { scroll-padding-top: 140px; }
.site-head { position: sticky; top: var(--uji-h, 0px); z-index: 60; border-bottom: 1px solid var(--head-line); background: var(--head-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* lebar isi toko: 81rem = 1296px dengan sisi 24px, jadi isi 1248px (dulu 1104px, terasa sempit di layar lebar). Satu angka untuk header, isi, hero, dan footer. */
html { --wrap: 81rem; }
.wrap-toko { max-width: var(--wrap); }
.head-row, .head-nav { max-width: var(--wrap); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
/* header mengecil saat digulir TANPA animasi tinggi: tinggi yang beranimasi menggeser isi halaman sedikit demi sedikit dan tidak bisa ditutup margin (lihat skrip "header mengecil" di layouts/app) */
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 14px; }
@media (min-width: 768px) { .head-row, .head-nav { padding-left: 24px; padding-right: 24px; } }
.brand { flex: none; display: block; }
.brand-logo { display: block; height: 33px; width: auto; max-width: 280px; object-fit: contain; }
@media (min-width: 768px) { .brand-logo { height: 56px; } }
@media (max-width: 479px) { .lang .lang-name { display: none; } .lang-list { min-width: 200px; } }
.head-row .search { flex: 1 1 100%; order: 3; max-width: none; }
@media (min-width: 768px) { .head-row .search { flex: 1 1 0; order: 0; max-width: 36rem; } }
.head-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (max-width: 767px) { .head-row { gap: 10px 12px; } }
.site-head.compact .head-row { padding-top: 8px; }
.site-head.compact .brand-logo { height: 28px; }
@media (min-width: 768px) { .site-head.compact .brand-logo { height: 34px; } }
.site-head.compact .wordmark { font-size: 18px; }
@media (max-width: 767px) { .site-head.compact .search { display: none; } }
.wordmark { font-family: var(--f-display); font-weight: 700; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; font-size: 22px; }
.search { position: relative; }
.search input {
    width: 100%; min-height: 46px; padding: 0 16px 0 44px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
    font-family: var(--f-ui); font-size: 16px; /* 16px: iPhone memperbesar halaman sendiri saat kolom isian berfont lebih kecil */
}
.search input::placeholder { color: var(--text-dim); }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-dim); }
.menu { position: relative; display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; font-family: var(--f-display); font-weight: 500; letter-spacing: .06em; font-size: 15px; }
/* garis penanda menu: satu elemen yang meluncur ke menu yang ditunjuk kursor (atau difokus keyboard) dan kembali ke halaman aktif saat kursor pergi
   (skrip di layouts/app.blade.php). Tanpa JavaScript, garis statis di bawah menu aktif (border) tetap dipakai. */
.menu-garis {
    position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none;
    background: var(--moss); box-shadow: 0 0 8px color-mix(in srgb, var(--moss) 55%, transparent);
}
.menu-garis.siap { transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .menu-garis.siap { transition: none; } }
.menu.menu--garis a[aria-current="page"] { border-bottom-color: transparent; }
.menu::-webkit-scrollbar { display: none; }
.menu a { padding: 12px 0; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--text); text-decoration: none; }
.menu a:hover { color: var(--gold); }
/* tema terang: header diberi garis bawah tegas dan bayangan supaya jelas terpisah dari isi halaman (mencegah salah ketuk),
   dan menu dibuat lebih tebal serta berubah warna jelas saat disentuh */
html[data-theme="light"] .site-head { border-bottom: 2px solid #6f9459; box-shadow: 0 6px 18px rgba(32, 55, 22, .3); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="light"] .menu { font-weight: 600; }
html[data-theme="light"] .menu a:hover { color: #1f4d28; }
html[data-theme="light"] .menu a[aria-current="page"] { color: #1f4d28; }

/* ---------- pemilih bahasa dan tombol tema ---------- */
.ctl {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px;
    background: var(--ctl-bg); border: 1px solid var(--line); color: var(--text); cursor: pointer;
    font-family: var(--f-ui); font-size: 14px; font-weight: 600; line-height: 1; list-style: none;
}
.ctl::-webkit-details-marker { display: none; }
.ctl:hover { border-color: var(--moss); }
.flag { width: 24px; height: 16px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); display: block; }
.lang { position: relative; }
.lang .caret { width: 10px; height: 10px; opacity: .7; transition: transform .15s ease; }
.lang[open] .caret { transform: rotate(180deg); }
.lang-list {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 220px; margin: 0; padding: 6px; list-style: none;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.lang-list a {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; text-decoration: none;
    font-family: var(--f-ui); font-size: 15px; color: var(--text);
}
.lang-list a:hover, .lang-list a:focus-visible { background: var(--choice-on); }
.lang-list a[aria-current="true"] { font-weight: 700; color: var(--gold); }
.theme-btn { width: 40px; padding: 0; justify-content: center; }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-sun { display: block; }
html[data-theme="light"] .theme-btn .i-moon { display: none; }
.menu a[aria-current="page"] { border-bottom-color: var(--moss); color: var(--gold); }

/* ---------- bingkai: gaya CADANGAN (dipakai jika JS mati atau gambar bingkai tidak ada) ----------
   Bila hutan.js berhasil memuat gambar, hutan.css (dimuat setelah file ini) menggantikannya dengan bingkai akar di kanvas. */
.frame {
    position: relative;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid #1d2b1c;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(63, 90, 58, .6), 0 0 0 1px rgba(156, 138, 70, .35);
}
.frame--card  { --pad: 16px 18px; }
.frame--wide  { --pad: 20px 22px; }
.frame--panel { --pad: 26px 30px; }
.frame--hero  { --pad: 56px 110px; }
.frame-body { position: relative; z-index: 2; padding: var(--pad, 16px); }

@media (max-width: 767px) {
    .frame--hero { --pad: 38px 38px; }
    .frame--panel { --pad: 20px 20px; }
}

/* kartu yang bisa diklik */
.tile { display: block; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); }
.tile .cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; display: block; background: var(--bg-2); }
.tile .cover-fallback {
    background: var(--cover-fb);
    aspect-ratio: 1 / 1; border-radius: 4px; display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-weight: 700; font-size: 44px; color: var(--gold);
}
.tile .name { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .03em; color: var(--text); margin-top: 10px; line-height: 1.25; }
.tile .meta { font-family: var(--f-ui); font-size: 13px; color: var(--text-dim); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    .tile, .btn-gold, .choice-box { transition: none; }
    .tile:hover, .tile:focus-visible { transform: none; }
}

/* ---------- tombol & isian ---------- */
.btn-gold {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
    background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: 8px; cursor: pointer;
    font-family: var(--f-ui); font-weight: 700; font-size: 16px; text-decoration: none; transition: background .15s ease;
}
.btn-gold:hover { background: var(--btn-bg-hover); }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
    background: transparent; color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 8px; cursor: pointer;
    font-family: var(--f-ui); font-weight: 600; font-size: 14px; text-decoration: none;
}
.btn-ghost:hover { background: rgba(230, 220, 154, .1); }

/* tombol "kembali": pil dengan panah, tinggi 44px (area ketuk cukup untuk jempol), panah bergeser sedikit saat disentuh kursor */
.kembali-baris { margin-bottom: 30px; }   /* jarak ke bingkai di bawahnya: bingkai akar menonjol ±10px ke atas, jadi sisanya ±20px */
.btn-kembali {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold-deep) 70%, var(--line));
    background: color-mix(in srgb, var(--bg-2) 85%, transparent); color: var(--gold);
    font-family: var(--f-ui); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22); -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-kembali svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.btn-kembali:hover { background: color-mix(in srgb, var(--gold) 14%, var(--bg-2)); border-color: var(--gold); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.btn-kembali:hover svg { transform: translateX(-3px); }
.btn-kembali:active { transform: scale(.97); }
.btn-kembali:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }

.field-label { display: block; font-family: var(--f-ui); font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.field {
    display: block; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 8px;
    background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
    font-family: var(--f-ui); font-size: 16px;
}
.field::placeholder { color: var(--text-dim); text-transform: none; }

/* nomor WhatsApp: pilihan kode negara menyatu dengan kolom nomor, tinggi dan garis sama persis */
.wa-group { display: flex; align-items: stretch; }
.wa-group .field { height: 48px; box-sizing: border-box; }
.wa-group select.field { flex: 0 0 auto; width: 10.75rem; padding-left: 10px; padding-right: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wa-group input.field { flex: 1 1 auto; min-width: 0; border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wa-group .field:focus { position: relative; z-index: 1; }
.wa-group input.field:focus { border-left-width: 1px; margin-left: -1px; }
@media (max-width: 480px) {
    /* di HP: pilihan negara di atas, nomor di bawah, keduanya selebar kolom */
    .wa-group { flex-direction: column; }
    .wa-group select.field { width: 100%; border-radius: 8px 8px 0 0; padding-right: 14px; }
    .wa-group input.field { border-left-width: 1px; border-top-width: 0; border-radius: 0 0 8px 8px; }
    .wa-group input.field:focus { margin-left: 0; margin-top: -1px; border-top-width: 1px; }
}

/* huruf Mandarin, Jepang, dan Korea: font bawaan perangkat (font tema tidak memuat aksara itu) */
html:lang(zh-Hans) { --f-display: 'Cinzel Variable', 'Noto Serif SC', 'Songti SC', 'SimSun', 'Microsoft YaHei', serif; --f-body: 'EB Garamond Variable', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; --f-ui: 'Plus Jakarta Sans Variable', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }
html:lang(ja) { --f-display: 'Cinzel Variable', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif; --f-body: 'EB Garamond Variable', 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', 'Meiryo', system-ui, sans-serif; --f-ui: 'Plus Jakarta Sans Variable', 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', 'Meiryo', system-ui, sans-serif; }
html:lang(ko) { --f-display: 'Cinzel Variable', 'Noto Serif KR', 'Batang', serif; --f-body: 'EB Garamond Variable', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; --f-ui: 'Plus Jakarta Sans Variable', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; }
.field:focus { border-color: var(--moss); }

.alert { border-radius: 8px; padding: 12px 16px; font-family: var(--f-ui); font-size: 15px; border: 1px solid; }
.alert--danger { background: rgba(224, 122, 106, .12); border-color: var(--danger); color: var(--danger-text); }
.alert--info { background: rgba(230, 220, 154, .08); border-color: var(--gold-deep); color: var(--gold); }

/* ---------- pilihan (nominal, metode bayar) ---------- */
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-box {
    position: relative; --os: 22px;
    border: 1px solid var(--line); background: var(--bg-2); border-radius: 8px; padding: 14px 16px; height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.choice:hover .choice-box { border-color: var(--leaf); }
.choice input:focus-visible + .choice-box { outline: 3px solid var(--moss); outline-offset: 3px; }
.choice-box .price { font-family: var(--f-ui); font-weight: 700; color: var(--gold); }

/* pilihan yang dipilih: bingkai emas tebal dengan cahaya, lencana centang, dan akar yang tumbuh di empat sudut */
.choice input:checked + .choice-box {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--choice-on), color-mix(in srgb, var(--moss) 24%, var(--choice-on)));
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 8px color-mix(in srgb, var(--moss) 28%, transparent), 0 10px 26px rgba(0, 0, 0, .35);
}
.choice input:checked + .choice-box .label { color: var(--gold); }
.choice input:checked + .choice-box::after {
    content: ''; position: absolute; z-index: 7; top: -11px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 2px var(--bg-0);
}
.choice input:checked + .choice-box::before {
    content: ''; position: absolute; z-index: 8; top: -6px; right: -2px; width: 6px; height: 11px;
    border: solid var(--bg-0); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.choice-box > .tile-roots { --rs: 46px; inset: -13px; opacity: 0; transition: opacity .15s ease; }
.choice-box > .tile-roots path { stroke-width: 2.4; }
.choice-box > .tile-roots .twig { stroke-width: 1.6; }
.choice input:checked + .choice-box > .tile-roots { opacity: 1; }
.choice input:checked + .choice-box > .tile-roots path { stroke-dashoffset: 0; opacity: 1; }
.choice input:checked + .choice-box > .tile-roots ellipse { transform: scale(1); }

/* ---------- daftar nominal: kartu sama tinggi, harga selalu rata di dasar kartu, paket/langganan dipisah ---------- */
.nominal-grup + .nominal-grup { margin-top: 34px; }
.nominal-judul {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
    font-family: var(--f-ui); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.nominal-judul::after { content: ''; flex: 1; min-width: 20px; height: 1px; background: var(--head-line); }
.nominal-catatan { margin: -4px 0 14px; font-family: var(--f-ui); font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.nominal-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .nominal-grid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nominal-box { display: flex; flex-direction: column; gap: 10px; min-height: 104px; padding: 14px 14px 13px; }
.nominal-kepala { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nominal-ikon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
    background: color-mix(in srgb, var(--moss) 16%, transparent); border: 1px solid color-mix(in srgb, var(--moss) 32%, transparent);
}
.nominal-label { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.nominal-ket { font-size: 15px; line-height: 1.35; color: var(--text-dim); }
.nominal-harga { margin-top: auto; }
/* ukuran harga mengecil di layar sempit (clamp) supaya "Rp1.201.200" tidak keluar dari kartu pada HP 320px */
.nominal-harga .price { font-size: clamp(16px, 5.2vw, 19px); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* HP: kartu dua kolom sempit, jadi ikon dan tulisan dikecilkan sedikit agar kata "Diamond" tidak terpotong di tengah */
@media (max-width: 479px) {
    .nominal-box { padding: 12px; gap: 8px; }
    .nominal-kepala { gap: 8px; }
    .nominal-ikon { width: 30px; height: 30px; border-radius: 9px; }
    .nominal-ikon .ikon-nominal { width: 20px; height: 20px; }
    .nominal-label { font-size: 15.5px; }
}
.nominal-promo { margin-bottom: 2px; }
.nominal-coret { margin-bottom: 2px; }
/* paket/langganan: sedikit bernuansa emas supaya jelas bukan isi ulang biasa */
.choice--paket .choice-box { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--bg-2)), var(--bg-2)); border-color: color-mix(in srgb, var(--gold-deep) 55%, var(--line)); }
.choice--paket .nominal-ikon { background: color-mix(in srgb, var(--gold) 18%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* ---------- mode uji admin: spanduk kuning dan catatan pesanan fiktif ---------- */
.uji-bar { position: sticky; top: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 14px; background: #f2c14e; color: #2a1d00; font-family: var(--f-ui); font-size: 14px; line-height: 1.4; text-align: center; }
.uji-bar strong { letter-spacing: .06em; }
.uji-bar a { color: #2a1d00; font-weight: 700; text-decoration: underline; }
.uji-bar button { background: #2a1d00; color: #f2c14e; border: 0; border-radius: 6px; padding: 3px 10px; font-weight: 700; cursor: pointer; }
.uji-catatan { padding: 12px 16px; border: 2px dashed #f2c14e; border-radius: 10px; background: rgba(242, 193, 78, .12); font-family: var(--f-ui); font-size: 15px; }
.uji-catatan strong { color: #f2c14e; }
html[data-theme="light"] .uji-catatan strong { color: #7a5200; }

/* ---------- ikon metode bayar dan ikon nominal ---------- */
.ikon-metode { display: inline-flex; flex: none; width: 44px; height: 28px; border-radius: 6px; overflow: hidden; }
.ikon-metode svg, .ikon-metode img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ikon-nominal { display: inline-flex; flex: none; width: 22px; height: 22px; }
.ikon-nominal svg, .ikon-nominal img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- riwayat ID di kolom ID game ---------- */
.riwayat-daftar { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 4px; overflow: hidden; border: 1px solid var(--moss); border-radius: 8px; background: var(--bg-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.riwayat-daftar[hidden] { display: none; }
.riwayat-judul { padding: 8px 14px 4px; font-family: var(--f-ui); font-size: 12px; letter-spacing: .04em; color: var(--text-dim); }
.riwayat-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: var(--text); font-family: var(--f-ui); font-size: 15px; text-align: left; cursor: pointer; }
.riwayat-item:hover, .riwayat-item:focus-visible { background: var(--choice-on); outline: none; }
.riwayat-nick { color: var(--gold); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riwayat-hapus { display: block; width: 100%; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text-dim); font-family: var(--f-ui); font-size: 13px; text-align: left; cursor: pointer; }
.riwayat-hapus:hover { color: var(--danger-text); }

/* ---------- nickname pemain di game (setelah ID terisi) ---------- */
/* Hasil cek nickname BUKAN kolom isian: lencana (pil) tanpa garis tepi, dengan ikon bulat di depan, selebar isinya saja. Dulu berupa kotak
   bergaris selebar kolom seperti .field sehingga terkesan bisa diketik. */
.nick-status { position: relative; display: block; width: fit-content; max-width: 100%; justify-self: start; min-height: 36px; padding: 7px 16px 7px 40px; border-radius: 20px; font-family: var(--f-ui); font-size: 14.5px; line-height: 1.4; user-select: none; -webkit-user-select: none; cursor: default; }
.nick-status[hidden] { display: none; }
.nick-status::before { position: absolute; left: 8px; top: calc(50% - 12px); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; }
.nick-cek { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); }
.nick-cek::before { content: ""; box-sizing: border-box; border: 2.5px solid color-mix(in srgb, var(--text-dim) 40%, transparent); border-top-color: var(--text-dim); animation: nick-putar .8s linear infinite; }
.nick-ok { color: var(--moss); background: color-mix(in srgb, var(--moss) 16%, transparent); }
.nick-ok::before { content: "\2713"; background: var(--moss); color: var(--btn-fg); }
.nick-ok strong { color: var(--gold); font-size: 16.5px; }
.nick-salah { color: var(--danger-text); background: rgba(224, 122, 106, .16); }
.nick-salah::before { content: "\2715"; background: var(--danger); color: var(--btn-fg); }
@keyframes nick-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nick-cek::before { animation: none; } }

/* ---------- langkah bernomor ---------- */
.step { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; }
.step-no {
    flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gold-deep); color: var(--gold); font-family: var(--f-display); font-weight: 700;
}
.step h2 { font-size: 22px; }

/* ---------- halaman top up: dua kolom di layar lebar (pilihan di kiri, ringkasan + tombol bayar menempel di kanan) ---------- */
.order-side { margin-top: 30px; }
.side-judul { font-size: 22px; margin: 0 0 6px; }
.side-langkah { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--head-line); }
.side-langkah .step-no { width: 30px; height: 30px; font-size: 14px; }
.side-langkah h3 { font-size: 17px; }
@media (min-width: 1024px) {
    .order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 0 40px; align-items: start; }
    .order-side { margin-top: 34px; }
}
/* menempel di bawah header hanya bila layar cukup tinggi, supaya tombol di dasar kartu tidak terpotong */
@media (min-width: 1024px) and (min-height: 760px) {
    .order-side { position: sticky; top: calc(var(--uji-h, 0px) + 104px); }
}

/* ---------- banner geser ---------- */
.carousel { position: relative; min-width: 0; max-width: 100%; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 14px;
    /* banner tampil seperti gambar berbingkai: garis emas tipis, sedikit cahaya, dan bayangan, bukan kotak gelap yang menempel di hutan */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-deep) 75%, transparent), 0 0 24px color-mix(in srgb, var(--moss) 22%, transparent), 0 14px 34px rgba(0, 0, 0, .55); }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: center; }
.carousel-slide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carousel-slide { position: relative; }
/* teks opsional di atas gambar banner (diisi di admin > Tampilan): di sisi kiri, di atas lapisan gelap tipis supaya terbaca */
.carousel-slide:has(.banner-teks)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 9, 6, .78), rgba(4, 9, 6, 0) 62%); pointer-events: none; }
.banner-teks { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); max-width: 48%; display: grid; gap: .35em; pointer-events: none; text-shadow: 0 2px 10px rgba(0, 0, 0, .75); }
.banner-teks strong { font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 2.6vw, 34px); line-height: 1.1; color: #f1e6b0; text-transform: uppercase; letter-spacing: .02em; }
.banner-teks span { font-family: var(--f-ui); font-size: clamp(10px, 1.2vw, 16px); line-height: 1.3; color: #b9e7b0; }
/* panah kecil dan halus: bulat 28px, hampir transparan, makin jelas saat kursor di atas banner */
.carousel-btn, .carousel-btn-inline {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--ctl-bg) 70%, transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    cursor: pointer; backdrop-filter: blur(3px); transition: opacity .2s ease, background .15s ease, border-color .15s ease;
}
.carousel-btn svg, .carousel-btn-inline svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* layar sentuh: panah fakta diperbesar supaya mudah diketuk jari (ukuran tampilan tetap halus) */
@media (pointer: coarse) { .carousel-btn-inline { width: 42px; height: 42px; } .carousel-btn-inline svg { width: 16px; height: 16px; } }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); opacity: .55; }
.carousel:hover .carousel-btn, .carousel:focus-within .carousel-btn { opacity: 1; }
.carousel-btn:hover, .carousel-btn-inline:hover { background: var(--ctl-bg); border-color: var(--moss); }
.carousel-btn--prev { left: 8px; }
.carousel-btn--next { right: 8px; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; padding: 0; }
.carousel-dots button[aria-current="true"] { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* ---------- artikel (halaman kebijakan) ---------- */
.prose-forest { max-width: 68ch; }
.prose-forest h2 { font-size: 24px; margin: 38px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prose-forest p { margin: 12px 0; }
.prose-forest ul { list-style: none; padding-left: 0; margin: 12px 0; }
.prose-forest li { position: relative; padding-left: 28px; margin: 8px 0; }
.prose-forest li::before {
    content: ''; position: absolute; left: 4px; top: .6em; width: 12px; height: 12px; background: var(--moss);
    clip-path: polygon(50% 0, 100% 40%, 80% 100%, 20% 100%, 0 40%); /* daun kecil */
}
.prose-forest a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.prose-forest strong { color: var(--gold); font-weight: 600; }

/* ---------- footer ---------- */
.site-foot { border-top: 0; background: var(--foot-bg); margin-top: 56px; }
.site-foot h3 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; font-family: var(--f-ui); font-size: 15px; }
.site-foot li { margin: 8px 0; }
.site-foot a { color: var(--text); text-decoration: none; }
.site-foot a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- status pesanan ---------- */
.status { display: flex; align-items: center; gap: 14px; border-radius: 8px; padding: 14px 18px; border: 1px solid; font-family: var(--f-ui); font-weight: 600; }
.status svg { flex: none; width: 28px; height: 28px; }
.status--ok { border-color: var(--moss); background: rgba(143, 197, 138, .1); color: var(--moss); }
.status--bad { border-color: var(--danger); background: rgba(224, 122, 106, .1); color: var(--danger); }
.status--wait { border-color: var(--gold-deep); background: rgba(230, 220, 154, .08); color: var(--gold); }
.spin { animation: spin 1.4s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--head-line); font-family: var(--f-ui); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; text-align: right; font-weight: 600; word-break: break-all; }

/* ---------- hero lebar penuh (hutan di belakang bingkai) ---------- */
/* margin atas 0: dulu 8px, sehingga saat gulir mentok ke atas ada celah berwarna lain antara header dan hero */
.hero-wrap { position: relative; overflow: hidden; isolation: isolate; padding: 64px 0 96px; margin-top: 0; background: linear-gradient(180deg, #0f2418, #08100b); }

/* ---------- "Cara kerja" ---------- */
.steps { display: grid; gap: 32px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.st { text-align: center; position: relative; z-index: 1; }
.st .ring {
    width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-1); border: 2px solid var(--line); color: var(--moss);
    transition: border-color .3s ease, color .3s ease;
}
.st .ring svg { width: 34px; height: 34px; }
.st.lit .ring { border-color: var(--gold-deep); color: var(--gold); }
.st h3 { font-size: 18px; }
.st p { margin-top: 6px; font-size: 17px; }

/* ---------- footer: ruang untuk akar yang menjuntai ---------- */
.site-foot { position: relative; overflow: hidden; padding-top: 120px; }

/* ---------- banner bawaan (dipakai selama admin belum mengunggah banner) ---------- */
.promo {
    aspect-ratio: 16 / 9; display: flex; align-items: center; gap: 22px; padding: 0 clamp(18px, 4vw, 40px); border-radius: 6px;
    background: radial-gradient(ellipse at 85% 110%, rgba(230, 220, 154, .22), transparent 60%), linear-gradient(135deg, #1b3a27, #0d1a12);
    color: #e9e4c4;
}
@media (max-width: 767px) {
    .promo { aspect-ratio: auto; min-height: 168px; flex-direction: column; justify-content: center; text-align: center; gap: 10px; padding: 18px 14px; }
    .carousel-btn { display: none; }  /* di HP cukup digeser dengan jari, titik di bawah menunjukkan posisi */
}
.promo-icon { flex: none; width: clamp(44px, 11vw, 96px); height: clamp(44px, 11vw, 96px); color: #e6dc9a; }
.promo-icon svg { width: 100%; height: 100%; }
.promo strong { display: block; font-family: var(--f-display); font-size: clamp(20px, 3.2vw, 32px); line-height: 1.15; color: #e6dc9a; }
.promo span.sub { display: block; margin-top: 8px; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.4; }
.promo--2 { background: radial-gradient(ellipse at 15% 110%, rgba(143, 197, 138, .28), transparent 60%), linear-gradient(135deg, #17331f, #0b1710); }
.promo--3 { background: radial-gradient(ellipse at 80% -10%, rgba(230, 220, 154, .2), transparent 55%), linear-gradient(135deg, #20382a, #0e1b13); }
html[data-theme="light"] .promo { background: radial-gradient(ellipse at 85% 110%, rgba(201, 167, 79, .3), transparent 60%), linear-gradient(135deg, #dfead0, #c7d8b0); color: #223019; }
html[data-theme="light"] .promo-icon, html[data-theme="light"] .promo strong { color: #2f5a30; }
html[data-theme="light"] .promo--2 { background: radial-gradient(ellipse at 15% 110%, rgba(111, 174, 122, .35), transparent 60%), linear-gradient(135deg, #e6eed6, #cddcb8); }
html[data-theme="light"] .promo--3 { background: radial-gradient(ellipse at 80% -10%, rgba(201, 167, 79, .3), transparent 55%), linear-gradient(135deg, #ecf0da, #d4dfbd); }

/* ---------- maskot kecil (dipakai sebagai pemanis, bukan sebagai iklan) ---------- */
.maskot-kecil { display: block; height: 92px; width: auto; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.maskot-mini { display: block; height: 56px; width: auto; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.maskot-404 { display: block; height: 120px; width: auto; margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }

/* ---------- riwayat pesanan ---------- */
.hist-row { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--head-line); }
.hist-row:last-child { border-bottom: 0; }

/* ---------- kalkulator ---------- */
.calc-result { font-family: var(--f-display); font-size: 34px; font-weight: 700; color: var(--gold); }

/* ---------- latar penuh: tidak ada batas keras antara hero dan isi halaman ---------- */
html { background: var(--bg-0); }
.hero-wrap { background: transparent; padding-bottom: 44px; }
/* Hutan di belakang banner memudar pelan ke latar halaman lewat kurva halus (sekitar 290px dari dasar hero, dihitung dari bawah supaya sama di HP
   dan di layar lebar). Yang dipudarkan HANYA lapisan hutan: banner di depannya tetap utuh, dan tidak ada tepi keras di antara hero dan isi halaman. */
.hero-wrap > [data-hutan-forest] {
    -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 3px, rgba(0,0,0,.05) 36px, rgba(0,0,0,.16) 84px, rgba(0,0,0,.34) 132px, rgba(0,0,0,.56) 180px, rgba(0,0,0,.78) 228px, rgba(0,0,0,.93) 266px, #000 300px);
            mask-image: linear-gradient(to top, transparent 0, transparent 3px, rgba(0,0,0,.05) 36px, rgba(0,0,0,.16) 84px, rgba(0,0,0,.34) 132px, rgba(0,0,0,.56) 180px, rgba(0,0,0,.78) 228px, rgba(0,0,0,.93) 266px, #000 300px);
}
/* tema event memakai latar hero sendiri (events.css): tetap dipudarkan seperti semula */
html[data-event] .hero-wrap {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
}
/* isi pertama di bawah hero (Trending atau Pilih game) tidak perlu jarak lebar lagi: hero sudah memudar sendiri */
.hero-wrap + main > section:first-of-type { margin-top: 22px; }

/* ---------- kartu game: semua sama tinggi dan sejajar ---------- */
.game-grid { display: grid; gap: 22px; align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile { position: relative; height: 100%; }
.tile > .frame { height: 100%; }
.tile .frame-body { height: 100%; display: flex; flex-direction: column; }
.tile .cover, .tile .cover-fallback { aspect-ratio: 3 / 4; }
/* nama penerbit tepat di bawah nama game */
.tile .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .meta { margin-top: 3px; padding-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- akar yang "terbuka" di empat sudut bingkai saat kursor di atasnya (atau kartu difokus) ---------- */
.frame--card  { --rs: 40px; }
.frame--wide  { --rs: 48px; }
.frame--panel { --rs: 66px; }
.tile-roots { position: absolute; inset: -12px; pointer-events: none; z-index: 6; }
.tile-roots .orn { display: none; }
.tile-roots .rt { position: absolute; width: var(--rs, 48px); height: var(--rs, 48px); overflow: visible; }
.tile-roots .rt-tl { left: 0; top: 0; }
.tile-roots .rt-tr { right: 0; top: 0; transform: scaleX(-1); }
.tile-roots .rt-bl { left: 0; bottom: 0; transform: scaleY(-1); }
.tile-roots .rt-br { right: 0; bottom: 0; transform: scale(-1, -1); }
.tile-roots path { fill: none; stroke: var(--moss); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .6s ease-out, opacity .15s ease; }
.tile-roots .twig { stroke-width: 1.1; transition-delay: .25s; }
.tile-roots ellipse { fill: var(--moss); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .35s ease-out .45s; }
.frame:hover > .tile-roots path, .tile:focus-visible .tile-roots path { stroke-dashoffset: 0; opacity: 1; }
.frame:hover > .tile-roots ellipse, .tile:focus-visible .tile-roots ellipse { transform: scale(1); }@media (prefers-reduced-motion: reduce) {
    .tile-roots path, .tile-roots ellipse { transition: none; }
}

/* ---------- spanduk promo di beranda ---------- */
.promo-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--gold-deep); background: linear-gradient(135deg, rgba(224, 122, 106, .16), rgba(230, 220, 154, .1)); }
.promo-bar-nama { font-family: var(--f-display); font-size: 19px; color: var(--gold); }

/* ---------- lencana promo ---------- */
.promo-lencana { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.promo-pita { position: absolute; z-index: 5; top: 14px; right: 14px; padding: 3px 11px; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.tile .frame-body { position: relative; }

/* ---------- banner fakta Mobile Legends ---------- */
.fakta-kepala { display: flex; align-items: center; gap: 12px; }
.fakta-lencana { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--gold-deep); color: var(--gold); font-family: var(--f-display); font-weight: 700; font-size: 20px; }
.fakta-isi { min-height: 11.5em; display: flex; align-items: center; margin: 18px 0 10px; }
.fakta-isi > div:not([hidden]) { width: 100%; }
.fakta-game { display: inline-block; margin-bottom: 8px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--gold-deep); color: var(--gold); font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.fakta-teks { margin: 0; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5; color: var(--text); }
.fakta-sumber { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }
.fakta-teks[hidden] { display: none; }
/* fakta ringkas di halaman game: satu kalimat, berganti sendiri */
.fakta-ringkas { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.fakta-ringkas-isi { flex: 1; min-width: 0; min-height: 4.2em; display: flex; align-items: center; }
.fakta-ringkas-isi p { margin: 0; font-size: 18px; line-height: 1.5; animation: fakta-masuk .45s ease; }
.fakta-ringkas-isi p[hidden] { display: none; }
.fakta-ringkas-btn { flex: none; display: flex; gap: 6px; }
@media (max-width: 480px) { .fakta-ringkas { flex-wrap: wrap; } .fakta-ringkas-isi { flex-basis: calc(100% - 50px); } .fakta-ringkas-btn { margin-left: auto; } }
@keyframes fakta-masuk { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fakta-ringkas-isi p { animation: none; } }
.fakta-kendali { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.fakta-kendali .carousel-dots { flex-wrap: wrap; justify-content: center; max-width: 18rem; row-gap: 6px; }

/* ---------- footer rapi: kolom sejajar di atas, jarak sama, ada baris metode pembayaran dan baris bawah ---------- */
.foot-inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 16px 28px; }
@media (min-width: 768px) { .foot-inner { padding-left: 24px; padding-right: 24px; } }
.foot-grid { display: grid; gap: 34px 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }
.foot-brandrow { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 14px; }
.foot-brandrow .maskot-mini { height: 48px; }
.foot-tag { margin: 0; font-size: 17px; max-width: 26rem; }
.site-foot .foot-col h3 { margin: 0 0 14px; line-height: 48px; height: 48px; display: flex; align-items: center; }
.site-foot .foot-col ul { display: grid; gap: 11px; }
.site-foot .foot-col li { margin: 0; }
.foot-bawah { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--head-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
@media (max-width: 767px) { .site-foot .foot-col h3 { height: auto; line-height: 1.2; margin-bottom: 12px; } .foot-brandrow { min-height: 0; } }