/* ============================================================================
   AOGOLD - gaya situs
   ----------------------------------------------------------------------------
   Tema: MERAH DAN HITAM.

   Angka-angka gerak di bawah bukan selera, melainkan hasil pengukuran. Tiga
   situs game profesional diperiksa dengan Playwright pada 3 September 2026:

     Diablo IV  203 dari 958 elemen bertransisi; 0,35s dipakai 127 kali,
                0,2s 42 kali; kurva `ease` 130 kali. Merahnya rgb(165,9,5) -
                merah darah gelap, bukan merah menyala.
     Lost Ark    73 elemen bertransisi; 0,35s 61 kali, 0,2s 8 kali; `ease` 44
                kali, `ease-in-out` 29 kali.
     Path of Exile 2  hampir tanpa transisi - bertumpu pada seni statis, jadi
                bukan acuan gerak.

   Dua situs yang benar-benar terasa hidup sepakat pada angka yang sama, jadi
   itulah yang dipakai: 0,35 detik untuk hampir segalanya, 0,2 detik untuk hal
   kecil yang harus terasa seketika.

   Yang TIDAK ditiru: warna merek, logo, dan suasana milik mereka. Yang diambil
   hanya polanya - kegelapan pekat, aksen merah yang jarang tapi tegas, tombol
   berbingkai, dan gerak yang halus.
   ========================================================================== */

:root {
    /* Hitam kemerahan, bukan abu-abu netral. Latar yang benar-benar netral
       membuat aksen merah tampak menempel; latar yang sedikit condong ke merah
       membuatnya menyatu. */
    --latar:        #0a0708;
    --latar-2:      #120e0f;
    --latar-3:      #1a1416;
    --latar-4:      #241b1d;
    --garis:        #2e2224;
    --garis-terang: #453335;

    /* Satu merah, tiga tingkat. Merah menyala dihindari: ia terbaca murah dan
       melelahkan mata pada latar sepekat ini. */
    --merah:        #a8161c;
    --merah-terang: #d8272f;
    --merah-gelap:  #5e0b0f;
    --merah-kabut:  rgba(168, 22, 28, .28);

    --teks:         #ece4e1;
    --teks-2:       #a3948f;
    --teks-redup:   #6d605d;

    --hijau:        #4fa76b;
    --kuning:       #d0a03c;

    /* Diperlebar dari 1160px agar layar 1920x1080 tidak menyisakan lajur kosong
       lebar di kiri dan kanan. Pada laptop 1366 dan di bawahnya, lebar ini tidak
       pernah tercapai - yang membatasi adalah padding .wadah - jadi satu nilai
       ini melayani keduanya tanpa perlu titik henti tambahan. */
    --lebar:        1600px;

    /* Batas terpisah untuk PARAGRAF. Melebarkan kontainer tanpa membatasi teks
       akan menghasilkan baris sepanjang 180 karakter di layar 1920 - mata
       kehilangan tempatnya saat berpindah ke baris berikutnya, dan halaman yang
       lebih lebar justru menjadi lebih sulit dibaca. */
    --lebar-teks:   74ch;

    --sudut:        3px;

    /* Diukur dari situs acuan - lihat catatan di atas. */
    --gerak:        .35s;
    --gerak-cepat:  .2s;
    --gerak-lambat: .6s;
    --lengkung:     cubic-bezier(0, 0, .2, 1);

    --serif: 'Eczar', 'Palatino Linotype', Georgia, serif;
    --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--latar);
    color: var(--teks);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Bara yang berdenyut pelan di kejauhan. Sangat lambat (18 detik) dan sangat
   samar - yang dicari adalah kesan ruangan yang hidup, bukan gerakan yang
   disadari. Gerak yang disadari di latar belakang justru mengganggu membaca. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 1000px 620px at 50% -8%,  rgba(168, 22, 28, .16), transparent 68%),
        radial-gradient(ellipse 700px 460px at 92% 12%,   rgba(168, 22, 28, .07), transparent 70%),
        radial-gradient(ellipse 600px 400px at 4% 78%,    rgba(168, 22, 28, .05), transparent 70%);
    animation: bara 18s ease-in-out infinite;
}
@keyframes bara { 50% { opacity: .62; } }

body > * { position: relative; z-index: 1; }

a { color: var(--teks); text-decoration: none; transition: color var(--gerak-cepat) ease; }
a:hover { color: var(--merah-terang); }

:focus-visible { outline: 2px solid var(--merah-terang); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
    font-family: var(--serif);
    line-height: 1.18;
    margin: 0 0 .6em;
    text-wrap: balance;
}
/* Batas atas dinaikkan untuk layar 1920: pada 3,6rem judulnya tampak mengecil
   sendiri di tengah halaman yang lebar. */
h1 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-weight: 700; letter-spacing: .005em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.14rem; font-weight: 600; }

p { margin: 0 0 1em; }

.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wadah { padding: 0 20px; } }

/* Untuk bagian yang isinya paragraf panjang berurutan - panduan pemasangan,
   daftar aturan. Kolom yang lebih sempit dan TERPUSAT terbaca sebagai pilihan;
   teks rata kiri yang berhenti di tengah halaman selebar 1600px terbaca sebagai
   halaman yang rusak. Judul bagiannya ikut menyempit supaya tetap sejajar. */
.wadah.sempit { max-width: 1080px; }

/* Paragraf panjang dibatasi lebarnya walaupun kontainernya lebar. Kartu tidak
   ikut dibatasi karena kartunya sendiri sudah sempit. */
.berita-item p,
.langkah p,
.daftar-rapi li { max-width: var(--lebar-teks); }
.sorot p { max-width: 88ch; }

/* ============================ KEPALA ===================================== */

.kepala {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 7, 8, .82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--gerak) ease, border-color var(--gerak) ease,
                box-shadow var(--gerak) ease;
}
/* Kelas ini dipasang situs.js begitu halaman digulung. Kepala yang berubah saat
   menggulung adalah salah satu isyarat paling murah bahwa halaman ini hidup. */
.kepala.tergulung {
    background: rgba(10, 7, 8, .96);
    border-bottom-color: var(--garis);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.kepala-isi { display: flex; align-items: center; gap: 28px; height: 68px; }

.merek {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--serif); font-weight: 700; font-size: 1.34rem;
    letter-spacing: .13em; color: var(--teks); white-space: nowrap;
}
/* Merah TERANG di sini, bukan merah dasar.
   Diukur: "AO" dan "FREEDOM" berukuran persis sama - tinggi 39,00px, tepi atas
   dan bawah identik. Yang membuat keduanya tampak berbeda ukuran adalah warna:
   pada latar hitam, peramban merender teks terang lebih TIPIS dan teks gelap
   tetap tebal. Merah dasar #a8161c terlalu gelap dibanding putih, sehingga
   "FREEDOM" tampak lebih berat dan karenanya lebih besar.
   Merah terang mempersempit jarak terang keduanya, dan kesan itu hilang. */
.merek-teks em { font-style: normal; color: var(--merah-terang); transition: color var(--gerak) ease, text-shadow var(--gerak) ease; }
.merek:hover { color: var(--teks); }
.merek:hover .merek-teks em { color: var(--merah-terang); text-shadow: 0 0 18px var(--merah-kabut); }

/* Lambang baru berbentuk LEBAR - monogram AF bersayap, rasio sekitar 1,8:1.
   Karena itu ukurannya ditentukan TINGGI dengan lebar menyesuaikan, dan
   pemotongan melingkar yang dulu dipakai untuk medali bundar sudah dibuang:
   lingkaran pada bentuk selebar ini akan memenggal kedua sayapnya.
   Latar berkasnya sudah berwarna sama dengan latar situs, jadi tepinya menyatu
   tanpa perlu dipotong sama sekali. */
.merek-lambang {
    height: 40px; width: auto; flex: none;
    /* Kepala halaman tembus pandang, sedangkan latar berkas lambangnya pekat -
       tanpa ini, kotak persegi samar terlihat mengelilinginya di atas gambar
       pembuka. `screen` membuat piksel hitam menjadi tidak berpengaruh sama
       sekali, sehingga yang tersisa hanya emas dan bajanya. Cocok justru karena
       lambang ini terang di atas hitam; untuk lambang gelap ia akan menghilang. */
    mix-blend-mode: screen;
}
/* Lambang ini SENGAJA tidak bergerak saat disentuh. Versi sebelumnya memutarnya
   dan membesarkannya sedikit - pada medali bundar itu wajar, tetapi pada emblem
   bersayap hasilnya terlihat goyah, seolah gambarnya lepas dari tempatnya.
   Tulisan di sebelahnya tetap bereaksi, jadi kepala halaman tidak terasa mati. */
@media (max-width: 640px) {
    .merek { font-size: 1.14rem; gap: 9px; }
    .merek-lambang { height: 32px; width: auto; }
}

.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }

.nav a {
    position: relative;
    padding: 9px 15px;
    color: var(--teks-2);
    font-size: .81rem; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    transition: color var(--gerak-cepat) ease;
}
/* Garis yang tumbuh dari tengah. Dipilih daripada sekadar mengubah warna karena
   ia memberi arah - mata mengikuti garisnya, dan tautan terasa "dibuka". */
.nav a::after {
    content: '';
    position: absolute; left: 50%; right: 50%; bottom: 6px;
    height: 2px; background: var(--merah);
    transition: left var(--gerak) var(--lengkung), right var(--gerak) var(--lengkung);
}
.nav a:hover { color: var(--teks); }
.nav a:hover::after { left: 15px; right: 15px; }
.nav a.aktif { color: var(--teks); }
.nav a.aktif::after { left: 15px; right: 15px; background: var(--merah); }

/* ---- tautan Discord di kepala halaman ------------------------------------ */
.tombol-discord {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 18px; padding: 8px 14px;
    border: 1px solid var(--garis-terang); border-radius: var(--sudut);
    color: var(--teks-2);
    font-size: .74rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    white-space: nowrap;
    transition: border-color var(--gerak-cepat) ease, color var(--gerak-cepat) ease,
                background var(--gerak-cepat) ease, transform var(--gerak) var(--lengkung);
}
/* Sengaja TIDAK memakai biru khas Discord. Warna itu akan menjadi satu-satunya
   biru di seluruh halaman merah-hitam dan terbaca seperti tempelan dari situs
   lain. Bentuk lambangnya sendiri sudah cukup dikenali tanpa warnanya. */
.tombol-discord svg { width: 18px; height: 18px; flex: none; }
.tombol-discord:hover {
    border-color: var(--merah); color: var(--teks);
    background: rgba(168, 22, 28, .1);
    transform: translateY(-1px);
}

@media (max-width: 880px) {
    .tombol-discord { order: -1; margin-left: auto; padding: 7px 10px; }
    .tombol-discord .teks-discord { display: none; }
}

.tombol-menu {
    display: none; margin-left: 10px;
    background: none; border: 1px solid var(--garis-terang); color: var(--teks);
    border-radius: var(--sudut); padding: 8px 13px; font-size: 1rem; cursor: pointer;
    transition: border-color var(--gerak-cepat) ease, color var(--gerak-cepat) ease;
}
.tombol-menu:hover { border-color: var(--merah); color: var(--merah-terang); }

@media (max-width: 880px) {
    .tombol-menu { display: block; }
    .nav {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: rgba(10, 7, 8, .98); border-bottom: 1px solid var(--garis);
        padding: 8px;
    }
    .nav.buka { display: flex; animation: turun var(--gerak) var(--lengkung); }
    .nav a { padding: 13px 15px; }
    .nav a::after { display: none; }
}
@keyframes turun { from { opacity: 0; transform: translateY(-10px); } }

/* ============================ TOMBOL ===================================== */

.tombol {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 30px;
    font-family: var(--sans); font-size: .85rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: var(--sudut); border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--gerak) var(--lengkung),
                box-shadow var(--gerak) ease,
                border-color var(--gerak) ease,
                background var(--gerak) ease,
                color var(--gerak) ease;
}
/* Kilau yang menyapu dari kiri ke kanan saat disentuh. Satu sapuan, bukan
   berulang - efek yang berulang terus menarik perhatian yang tidak diminta. */
.tombol::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -80%;
    width: 60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
    transform: skewX(-18deg);
    transition: left var(--gerak-lambat) var(--lengkung);
}
.tombol:hover::before { left: 130%; }
.tombol:hover { transform: translateY(-2px); }
.tombol:active { transform: translateY(0); transition-duration: .08s; }

.tombol-utama {
    background: linear-gradient(180deg, var(--merah), var(--merah-gelap));
    border-color: var(--merah-terang);
    color: #fff3f1;
    box-shadow: 0 3px 18px rgba(168, 22, 28, .3);
}
.tombol-utama:hover {
    color: #fff;
    box-shadow: 0 8px 34px rgba(168, 22, 28, .5), 0 0 0 1px var(--merah-terang) inset;
}

.tombol-garis { border-color: var(--garis-terang); color: var(--teks); background: transparent; }
.tombol-garis:hover {
    border-color: var(--merah); color: #fff;
    background: rgba(168, 22, 28, .1);
    box-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}

.tombol[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.tombol[aria-disabled="true"]:hover { transform: none; box-shadow: 0 3px 18px rgba(168, 22, 28, .3); }
.tombol[aria-disabled="true"]:hover::before { left: -80%; }

/* ============================ HERO ======================================= */

.hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    /* Sengaja BUKAN 100vh. Pembuka setinggi layar penuh mendorong seluruh isi
       halaman keluar dari pandangan pertama, dan pengunjung tidak punya alasan
       untuk menduga ada yang di bawah. 72vh menyisakan bagian berikutnya
       mengintip di tepi bawah - itu yang mengundang gulir. */
    min-height: min(72vh, 720px);
    padding: 96px 0 80px;
    text-align: center;
    border-bottom: 1px solid var(--garis);
}
.hero > .wadah { width: 100%; }
.hero-gambar {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    /* Dinaikkan dari .2 sesudah gambar sungguhan terpasang. Angka rendah itu
       melindungi judul dari kotak penanda yang terang dan penuh tulisan. Gambar
       hero yang sekarang memang dibuat gelap dan sepi di bagian tengahnya - itu
       syarat yang ditulis tegas di dalam prompt-nya - jadi ia sanggup jauh lebih
       kuat tanpa menelan judul. Kalau diganti dengan gambar yang lebih terang di
       tengah, turunkan lagi angka ini, bukan buat ulang gambarnya. */
    opacity: .92;
    /* Perbesaran sangat pelan. Gambar diam terasa seperti poster; gambar yang
       merangkak masuk terasa seperti adegan. 28 detik supaya tidak disadari. */
    animation: merangkak 28s ease-in-out infinite alternate;
}
@keyframes merangkak { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Di layar sempit, `cover` pada gambar 2:1 hanya menyisakan sepertiga tengahnya
   - dan tengah gambar ini memang sengaja dibuat gelap dan kosong supaya judul
   terbaca di layar lebar. Akibatnya di ponsel gambarnya seolah tidak ada.
   Titik pandangnya digeser ke 26% supaya ksatria di kiri masuk ke bingkai.
   Judulnya tetap aman karena di ponsel ia duduk lebih tinggi, di atas langit. */
@media (max-width: 720px) {
    .hero-gambar { background-position: 26% center; opacity: .8; }
}

/* Lapisan gelap di atas gambar. Diringankan bersama kenaikan opacity di atas:
   dulu keduanya sama-sama pekat supaya kotak penanda yang terang tidak menelan
   judul, dan hasilnya gambar sungguhan pun ikut tenggelam.
   Yang tersisa hanya dua tugas: menggelapkan sedikit bagian tengah tempat judul
   duduk, dan meluruhkan tepi bawah gambar ke warna latar supaya sambungannya ke
   bagian berikutnya tidak terlihat sebagai garis. */
.hero-gambar::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 62% 55% at 50% 45%, rgba(10, 7, 8, .55), transparent 78%),
        linear-gradient(180deg, rgba(10, 7, 8, .35) 0%, rgba(10, 7, 8, .2) 45%, var(--latar) 100%);
}
.hero > .wadah { position: relative; z-index: 1; }

.hero h1 { margin-bottom: .3em; text-shadow: 0 2px 26px rgba(10, 7, 8, .9); }
.hero .semboyan { text-shadow: 0 1px 14px rgba(10, 7, 8, .9); }
.hero h1 em {
    font-style: normal; color: var(--merah-terang);
    text-shadow: 0 0 42px rgba(216, 39, 47, .38);
}
.semboyan { max-width: 720px; margin: 0 auto 36px; color: var(--teks-2); font-size: clamp(1.02rem, 1.1vw, 1.18rem); }
.hero-tombol { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hiasan {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin: 0 auto 26px; max-width: 340px; color: var(--merah);
}
.hiasan::before, .hiasan::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--merah));
}
.hiasan::after { background: linear-gradient(90deg, var(--merah), transparent); }
.hiasan span {
    font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
    white-space: nowrap; color: var(--teks-2);
}

/* Isyarat gulir. Diambil dari situs acuan: pemain harus tahu ada yang di bawah. */
.isyarat-gulir {
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: 46px;
    font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--teks-redup);
    transition: color var(--gerak) ease;
}
.isyarat-gulir:hover { color: var(--merah-terang); }
.isyarat-gulir::after {
    content: '↓'; font-size: 1rem;
    animation: melayang 2.2s ease-in-out infinite;
}
@keyframes melayang { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

/* ============================ BAGIAN ===================================== */

.bagian { padding: 76px 0; }
.bagian + .bagian { border-top: 1px solid var(--garis); }

.judul-bagian {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 30px;
}
.judul-bagian h2 { margin: 0; position: relative; padding-left: 18px; }
/* Batang merah kecil di kiri judul - penanda yang murah tapi mengikat seluruh
   halaman menjadi satu bahasa. */
.judul-bagian h2::before {
    content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 3px; background: var(--merah);
}
.judul-bagian a {
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--teks-2); font-weight: 600;
}
.judul-bagian a:hover { color: var(--merah-terang); }

/* Jumlah kolom dinyatakan tegas, bukan diserahkan pada auto-fit. Dengan
   kontainer selebar 1600px, `repeat(auto-fit, minmax(290px, 1fr))` diam-diam
   memecah empat kartu menjadi empat kolom sempit dan tinggi - susunan yang
   tidak pernah diminta dan hanya muncul di layar besar. */
.kisi { display: grid; gap: 20px; }
.kisi-2, .kisi-3 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
    .kisi-2 { grid-template-columns: repeat(2, 1fr); }
    .kisi-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .kisi-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================ KARTU ====================================== */

.kartu {
    position: relative;
    background: var(--latar-2);
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    padding: 26px;
    transition: transform var(--gerak) var(--lengkung),
                border-color var(--gerak) ease,
                background var(--gerak) ease,
                box-shadow var(--gerak) ease;
}
.kartu h3 { color: var(--teks); margin-bottom: .5em; transition: color var(--gerak) ease; }
.kartu p { color: var(--teks-2); }
.kartu p:last-child { margin-bottom: 0; }

.kartu:hover {
    transform: translateY(-4px);
    border-color: var(--merah);
    background: var(--latar-3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.kartu:hover h3 { color: var(--merah-terang); }

.kartu-bergambar { padding: 0; overflow: hidden; }
.kartu-bergambar > :not(.bingkai-gambar) { padding-left: 26px; padding-right: 26px; }
.kartu-bergambar > h3 { padding-top: 22px; }
.kartu-bergambar > p:last-child { padding-bottom: 26px; }

.bingkai-gambar { position: relative; overflow: hidden; border-bottom: 1px solid var(--garis); }
.bingkai-gambar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 7, 8, .55));
    opacity: 0; transition: opacity var(--gerak) ease;
}
.kartu-gambar {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    background: var(--latar-3);
    transition: transform var(--gerak-lambat) var(--lengkung), filter var(--gerak) ease;
    filter: saturate(.75) brightness(.85);
}
.kartu:hover .kartu-gambar { transform: scale(1.07); filter: saturate(1) brightness(1); }
.kartu:hover .bingkai-gambar::after { opacity: 1; }

/* ============================ STATUS ===================================== */

.status-papan {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px; background: var(--garis);
    border: 1px solid var(--garis); border-radius: var(--sudut); overflow: hidden;
}
.status-sel {
    background: var(--latar-2); padding: 26px 18px; text-align: center;
    transition: background var(--gerak) ease;
}
.status-sel:hover { background: var(--latar-3); }
.status-angka {
    font-family: var(--serif); font-size: 2rem; font-weight: 700;
    color: var(--teks); line-height: 1.2;
    font-variant-numeric: tabular-nums;
    transition: color var(--gerak) ease, text-shadow var(--gerak) ease;
}
.status-sel:hover .status-angka { color: var(--merah-terang); text-shadow: 0 0 24px var(--merah-kabut); }
.status-label {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--teks-redup); margin-top: 6px;
}

.lencana { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.titik { width: 9px; height: 9px; border-radius: 50%; background: var(--teks-redup); flex: none; }
.titik.online   { background: var(--hijau);  box-shadow: 0 0 0 0 rgba(79, 167, 107, .6); animation: denyut 2.4s ease-out infinite; }
.titik.gangguan { background: var(--kuning); box-shadow: 0 0 0 4px rgba(208, 160, 60, .16); }
.titik.offline  { background: var(--merah);  box-shadow: 0 0 0 4px var(--merah-kabut); }
/* Gelombang yang menyebar keluar, bukan sekadar berkedip. Berkedip terbaca
   sebagai peringatan; menyebar terbaca sebagai denyut nadi. */
@keyframes denyut {
    0%   { box-shadow: 0 0 0 0 rgba(79, 167, 107, .55); }
    70%  { box-shadow: 0 0 0 11px rgba(79, 167, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 167, 107, 0); }
}
.online-teks { color: var(--hijau); } .gangguan-teks { color: var(--kuning); } .offline-teks { color: var(--merah-terang); }

.catatan-segar { margin-top: 16px; font-size: .79rem; color: var(--teks-redup); text-align: center; }

/* ============================ PERINGKAT ================================== */

/* ---- kartu filter papan peringkat --------------------------------------- */

.filter-peringkat { margin-bottom: 34px; }

.kartu-filter {
    display: block; width: 100%; text-align: left;
    padding: 0; overflow: hidden;
    font-family: inherit; font-size: inherit; color: inherit;
    cursor: pointer;
}
.kartu-filter > :not(.bingkai-gambar) { padding-left: 24px; padding-right: 24px; }
.kartu-filter > h3 { padding-top: 20px; }
.kartu-filter > p { font-size: .92rem; }

/* Papan yang sedang dibuka ditandai TIGA hal sekaligus: bingkai merah, gambar
   yang tidak lagi diredam, dan garis merah di sisi kiri. Satu penanda saja
   mudah terlewat pada kartu yang sudah gelap semua. */
.kartu-filter.aktif {
    border-color: var(--merah);
    background: var(--latar-3);
    box-shadow: inset 3px 0 0 var(--merah), 0 12px 34px rgba(0, 0, 0, .5);
}
.kartu-filter.aktif h3 { color: var(--merah-terang); }
.kartu-filter.aktif .kartu-gambar { filter: saturate(1) brightness(1); }

.jumlah-papan {
    display: inline-block; margin: 0 24px 22px;
    padding: 3px 10px;
    border: 1px solid var(--garis-terang); border-radius: 2px;
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--teks-redup);
    transition: border-color var(--gerak) ease, color var(--gerak) ease;
}
.kartu-filter.aktif .jumlah-papan { border-color: var(--merah); color: var(--merah-terang); }

.kepala-tabel {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.kepala-tabel h2 { margin: 0; }

/* ---- penomoran halaman --------------------------------------------------- */

.halaman-peringkat { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.halaman-peringkat button {
    min-width: 38px; padding: 8px 12px;
    background: var(--latar-2); border: 1px solid var(--garis);
    border-radius: var(--sudut);
    color: var(--teks-2); font-family: var(--sans); font-size: .84rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--gerak-cepat) ease, color var(--gerak-cepat) ease,
                background var(--gerak-cepat) ease;
}
.halaman-peringkat button:hover:not(:disabled) { border-color: var(--merah); color: var(--teks); }
.halaman-peringkat button.aktif { border-color: var(--merah); background: rgba(168, 22, 28, .14); color: var(--merah-terang); }
.halaman-peringkat button:disabled { opacity: .3; cursor: default; }

/* ---- tabel ---------------------------------------------------------------- */

.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--sudut); }

/* Tinggi dibatasi supaya penomoran halaman dan keterangan di bawahnya tetap
   terlihat tanpa menggulung seluruh halaman lebih dulu. Isinya menggulung di
   dalam bingkainya sendiri. */
.tabel-gulir { max-height: 620px; overflow-y: auto; }

/* Batang gulir digambar sesuai tema. Tanpa ini ia muncul sebagai batang abu-abu
   terang bawaan Windows - satu-satunya benda terang di seluruh halaman gelap,
   dan mata langsung tertarik ke sana alih-alih ke isinya. */
.tabel-gulir::-webkit-scrollbar { width: 10px; }
.tabel-gulir::-webkit-scrollbar-track { background: var(--latar-2); }
.tabel-gulir::-webkit-scrollbar-thumb {
    background: var(--garis-terang); border-radius: 5px;
    border: 2px solid var(--latar-2);
}
.tabel-gulir::-webkit-scrollbar-thumb:hover { background: var(--merah); }
.tabel-gulir { scrollbar-width: thin; scrollbar-color: var(--garis-terang) var(--latar-2); }

/* Kepala tabel ikut tersangkut di atas saat isinya digulung, supaya nama kolom
   tidak hilang di baris ke-20. */
.tabel-gulir table.peringkat thead th { position: sticky; top: 0; z-index: 2; }

table.peringkat { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
table.peringkat th {
    text-align: left; padding: 14px 16px;
    background: var(--latar-3);
    font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--teks-redup); font-weight: 600;
    border-bottom: 1px solid var(--garis); white-space: nowrap;
}
table.peringkat th.kolom-angka { text-align: right; }
table.peringkat td { padding: 14px 16px; border-bottom: 1px solid var(--garis); transition: none; }
table.peringkat tbody tr {
    transition: background var(--gerak-cepat) ease, box-shadow var(--gerak-cepat) ease;
}
table.peringkat tbody tr:last-child td { border-bottom: none; }
table.peringkat tbody tr:hover { background: var(--latar-3); box-shadow: inset 3px 0 0 var(--merah); }

.kolom-angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kolom-urutan { width: 64px; text-align: center; font-family: var(--serif); font-weight: 700; color: var(--teks-redup); }
tr.juara-1 .kolom-urutan { color: var(--merah-terang); text-shadow: 0 0 16px var(--merah-kabut); }
tr.juara-2 .kolom-urutan { color: #c3b6b3; }
tr.juara-3 .kolom-urutan { color: #a06a52; }
.nama-karakter { font-weight: 600; color: var(--teks); }
.lencana-gm {
    display: inline-block; margin-left: 8px; padding: 1px 8px;
    font-size: .62rem; letter-spacing: .12em;
    border: 1px solid var(--merah); border-radius: 2px; color: var(--merah-terang);
    vertical-align: middle;
}

/* Baris peringkat muncul berurutan saat tabel selesai dimuat. Jeda antar baris
   dipasang situs.js lewat --tunda. */
tr.masuk { animation: barisMasuk var(--gerak) var(--lengkung) backwards; animation-delay: var(--tunda, 0s); }
@keyframes barisMasuk { from { opacity: 0; transform: translateX(-14px); } }

/* ============================ BERITA ===================================== */

.berita-daftar { display: grid; gap: 0 56px; }
@media (min-width: 1080px) { .berita-daftar { grid-template-columns: repeat(2, 1fr); } }

.berita-item {
    padding: 26px 0; border-bottom: 1px solid var(--garis);
    transition: border-color var(--gerak) ease;
}
/* Di susunan dua kolom, "yang terakhir" bukan lagi satu-satunya yang tanpa
   garis - dua kartu terakhir sama-sama berada di baris paling bawah. */
.berita-item:last-child { border-bottom: none; }
@media (min-width: 1080px) {
    .berita-daftar > .berita-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}
.berita-item h3 { margin-bottom: .35em; transition: color var(--gerak) ease; }
.berita-item:hover h3 { color: var(--merah-terang); }
.berita-item p { color: var(--teks-2); }
.berita-meta {
    display: flex; gap: 12px; align-items: center;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--teks-redup); margin-bottom: 10px;
}
.label-jenis {
    padding: 3px 10px; border: 1px solid var(--garis-terang); border-radius: 2px;
    transition: border-color var(--gerak) ease, color var(--gerak) ease;
}
.label-jenis.penting { border-color: var(--merah); color: var(--merah-terang); }
.label-jenis.event { border-color: var(--kuning); color: var(--kuning); }
.berita-item:hover .label-jenis { border-color: var(--merah); }

/* ============================ LANGKAH ==================================== */

.langkah { counter-reset: langkah; list-style: none; padding: 0; margin: 0; }
.langkah > li { counter-increment: langkah; position: relative; padding: 0 0 26px 58px; }
.langkah > li::before {
    counter: langkah; content: counter(langkah);
    position: absolute; left: 0; top: 0;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--merah); background: var(--latar-2); color: var(--merah-terang);
    font-family: var(--serif); font-weight: 700; font-size: .98rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--gerak) ease, color var(--gerak) ease,
                box-shadow var(--gerak) ease, transform var(--gerak) var(--lengkung);
}
.langkah > li:hover::before {
    background: var(--merah); color: #fff;
    box-shadow: 0 0 26px var(--merah-kabut);
    transform: scale(1.08);
}
.langkah > li:not(:last-child)::after {
    content: ''; position: absolute; left: 19px; top: 44px; bottom: 4px;
    width: 1px; background: var(--garis);
}
.langkah h3 { margin-bottom: .3em; }
.langkah p { color: var(--teks-2); }
.langkah p:last-child { margin-bottom: 0; }

/* ============================ LAIN-LAIN ================================== */

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

/* Penanda bahwa gambarnya ilustrasi, bukan tangkapan layar permainan.
   Kecil dan tidak menuntut perhatian - tugasnya hanya mencegah salah sangka.
   HAPUS penandanya begitu tangkapan layar sungguhan dipasang; membiarkannya
   justru akan membuat gambar asli tampak seperti gambar karangan. */
.label-ilustrasi {
    position: absolute; right: 8px; bottom: 8px;
    padding: 2px 8px;
    background: rgba(10, 7, 8, .72);
    border: 1px solid var(--garis-terang);
    border-radius: 2px;
    font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--teks-2);
    pointer-events: none;
}

.gambar-lebar { position: relative; margin: 34px 0 0; overflow: hidden; border: 1px solid var(--garis); border-radius: var(--sudut); }
.gambar-lebar img {
    width: 100%;
    filter: saturate(.8) brightness(.9);
    transition: transform var(--gerak-lambat) var(--lengkung), filter var(--gerak) ease;
}
.gambar-lebar:hover img { transform: scale(1.03); filter: saturate(1) brightness(1); }

.sorot {
    background: linear-gradient(90deg, rgba(168, 22, 28, .1), transparent 60%);
    border-left: 2px solid var(--merah);
    border-radius: 0 var(--sudut) var(--sudut) 0;
    padding: 20px 24px; margin: 26px 0;
}
.sorot p:last-child { margin-bottom: 0; }
.sorot strong { color: var(--merah-terang); }

code, .kode {
    font-family: 'IBM Plex Mono', Consolas, monospace; font-size: .89em;
    background: var(--latar-3); border: 1px solid var(--garis); border-radius: 2px;
    padding: 2px 7px; color: var(--merah-terang);
}

.daftar-rapi { list-style: none; padding: 0; margin: 0 0 1em; }
.daftar-rapi li { position: relative; padding-left: 24px; margin-bottom: 11px; color: var(--teks-2); }
.daftar-rapi li strong { color: var(--teks); }
.daftar-rapi li::before {
    content: ''; position: absolute; left: 4px; top: .6em;
    width: 6px; height: 6px; background: var(--merah); transform: rotate(45deg);
}

.kosong { padding: 46px 20px; text-align: center; color: var(--teks-redup); }

.spek { display: flex; flex-wrap: wrap; gap: 9px; }
.spek span {
    padding: 6px 14px; background: var(--latar-3); border: 1px solid var(--garis);
    border-radius: 2px; font-size: .79rem; color: var(--teks-2);
    transition: border-color var(--gerak) ease, color var(--gerak) ease, transform var(--gerak) var(--lengkung);
}
.spek span:hover { border-color: var(--merah); color: var(--teks); transform: translateY(-2px); }

/* ============================ KAKI ======================================= */

.kaki {
    border-top: 1px solid var(--garis);
    padding: 46px 0 36px; margin-top: 46px;
    color: var(--teks-redup); font-size: .85rem;
    background: linear-gradient(180deg, transparent, rgba(168, 22, 28, .05));
}
.kaki-isi { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; align-items: center; }
.kaki-tautan { display: flex; gap: 22px; flex-wrap: wrap; }
.kaki-tautan a { color: var(--teks-2); font-size: .82rem; letter-spacing: .06em; }
.kaki-tautan a:hover { color: var(--merah-terang); }
.kaki small { display: block; margin-top: 8px; font-size: .76rem; opacity: .72; }

/* ============================ MUNCUL ===================================== */
/*
   Bagian halaman naik dan memudar masuk saat tergulung ke layar.

   PENTING: keadaan bawaannya TERLIHAT. Kelas .siap hanya dipasang oleh
   situs.js, dan hanya kalau IntersectionObserver tersedia. Kalau JavaScript
   gagal atau diblokir, seluruh isi halaman tetap terbaca - yang hilang cuma
   geraknya. Kebalikannya (bawaan tersembunyi, ditampilkan JavaScript) adalah
   cara termudah membuat situs yang kosong melompong tanpa ada yang tahu sebabnya.
*/
.muncul.siap { opacity: 0; transform: translateY(26px); }
.muncul.siap.terlihat {
    opacity: 1; transform: none;
    transition: opacity var(--gerak-lambat) var(--lengkung),
                transform var(--gerak-lambat) var(--lengkung);
    transition-delay: var(--tunda, 0s);
}

/* ============================ GERAK DIKURANGI ============================ */
/*
   Sebagian orang merasa mual atau pusing oleh gerak di layar - bukan sekadar
   tidak suka. Sistem operasi menyediakan pengaturan untuk itu, dan menghormatinya
   bukan kemurahan hati melainkan syarat kelayakan.
*/
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .muncul.siap { opacity: 1; transform: none; }
    .hero-gambar { animation: none; }
    .tombol:hover { transform: none; }
    .kartu:hover { transform: none; }
    .kartu:hover .kartu-gambar { transform: none; }
}