/* ============================================================================
   AOFREEDOM - gaya situs
   ----------------------------------------------------------------------------
   Arah desain: "tinta dan emas". Latar arang hangat, aksen emas tua, huruf
   judul berkait, garis-garis tipis yang mengingatkan pada peta dan naskah lama.
   Dipilih karena Atlantica berlatar dunia sejarah dan mitos - bukan gaya neon
   yang lazim dipakai situs private server, supaya AOFREEDOM punya wajah sendiri.

   Ditulis tangan, tanpa kerangka kerja. Alasannya sederhana: situs ini hanya
   lima halaman, dan tidak ada yang lebih cepat rusak daripada rantai peralatan
   yang tidak dipahami orang yang harus merawatnya nanti.
   ========================================================================== */

:root {
    --latar:        #13110d;
    --latar-2:      #1b1712;
    --latar-3:      #241f18;
    --garis:        #382e21;
    --garis-terang: #4a3d2c;

    --emas:         #c9a227;
    --emas-terang:  #e6c766;
    --emas-redup:   #8a7020;

    --teks:         #ebe5d8;
    --teks-2:       #b5ab99;
    --teks-redup:   #7d7466;

    --hijau:        #5fb37c;
    --kuning:       #d9a441;
    --merah:        #c4614e;

    --lebar:        1120px;
    --sudut:        4px;

    /* Marcellus adalah huruf pahatan Romawi - bentuknya meniru pahatan pada batu,
       cocok untuk dunia Atlantica yang berlatar Mediterania kuno. Dipilih
       menggantikan Cinzel yang dipakai hampir semua situs game bergaya epik dan
       karenanya sudah tidak berkata apa-apa. Dipasangkan dengan IBM Plex Sans
       yang angkanya rapi berkolom - penting untuk tabel peringkat. */
    --serif: 'Marcellus', 'Trajan Pro', '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;
    -webkit-font-smoothing: antialiased;
}

/* Tekstur halus supaya latar gelap tidak terasa mati. Dibuat dengan gradien,
   bukan berkas gambar - tidak ada yang perlu diunduh. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 900px 600px at 50% -10%, rgba(201, 162, 39, .10), transparent 70%),
        radial-gradient(ellipse 600px 400px at 90% 20%, rgba(201, 162, 39, .045), transparent 70%);
}

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

a { color: var(--emas-terang); text-decoration: none; }
a:hover { color: var(--emas); text-decoration: underline; text-underline-offset: 3px; }

/* Berat 400 di mana pun Marcellus dipakai. Huruf ini hanya punya satu berat;
   meminta 600 atau 700 membuat peramban memalsukan tebalnya dengan menebalkan
   garis secara mekanis, dan bentuk pahatannya langsung hilang. Hierarki dibangun
   dari ukuran, warna, dan jarak huruf - bukan dari ketebalan. */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.25; margin: 0 0 .6em; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }

.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 24px; }

/* --- kepala halaman ------------------------------------------------------ */

.kepala {
    position: sticky; top: 0; z-index: 50;
    background: rgba(19, 17, 13, .93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--garis);
}

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

.merek { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; letter-spacing: .16em; color: var(--teks); white-space: nowrap; }
.merek:hover { text-decoration: none; color: var(--emas-terang); }
.merek span { color: var(--emas); }

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

.nav a {
    padding: 8px 14px;
    color: var(--teks-2);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-radius: var(--sudut);
    transition: color .15s, background .15s;
}
.nav a:hover { color: var(--teks); background: var(--latar-3); text-decoration: none; }
.nav a.aktif { color: var(--emas-terang); background: rgba(201, 162, 39, .10); }

.tombol-menu { display: none; margin-left: auto; background: none; border: 1px solid var(--garis-terang); color: var(--teks); border-radius: var(--sudut); padding: 7px 12px; font-size: 1rem; cursor: pointer; }

@media (max-width: 860px) {
    .tombol-menu { display: block; }
    .nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--latar-2); border-bottom: 1px solid var(--garis); padding: 8px; }
    .nav.buka { display: flex; }
    .nav a { padding: 12px 14px; }
}

/* --- tombol -------------------------------------------------------------- */

.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px;
    font-family: var(--sans); font-size: .88rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    border-radius: var(--sudut); border: 1px solid transparent;
    cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s;
}
.tombol:hover { text-decoration: none; transform: translateY(-1px); }

.tombol-utama { background: linear-gradient(180deg, var(--emas-terang), var(--emas)); color: #221b08; box-shadow: 0 2px 14px rgba(201, 162, 39, .22); }
.tombol-utama:hover { color: #221b08; box-shadow: 0 4px 20px rgba(201, 162, 39, .34); }

.tombol-garis { border-color: var(--garis-terang); color: var(--teks); background: transparent; }
.tombol-garis:hover { border-color: var(--emas-redup); color: var(--emas-terang); background: rgba(201, 162, 39, .06); }

.tombol[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- hero ---------------------------------------------------------------- */

/* --- gambar --------------------------------------------------------------- */

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

/* Gambar latar pembuka. Dibuat samar dan ditimpa gradien gelap ke arah bawah
   supaya tulisan di atasnya tetap terbaca apa pun gambar yang dipasang nanti -
   termasuk gambar terang. Tanpa lapisan ini, mengganti gambar bisa diam-diam
   membuat judulnya hilang di dalam latar. */
.hero-gambar {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    /* Sengaja samar. Judul dan gambar sama-sama berada di tengah, jadi apa pun
       yang ada di gambar akan beradu dengan tulisan di atasnya. Kalau nanti
       dipasang foto gelap yang tenang, angka ini boleh dinaikkan sampai sekitar
       .35 tanpa mengganggu keterbacaan. */
    opacity: .18;
}
.hero-gambar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(19,17,13,.55) 0%, rgba(19,17,13,.80) 60%, var(--latar) 100%);
}
.hero > .wadah { position: relative; z-index: 1; }

.kartu-bergambar { padding: 0; overflow: hidden; }
.kartu-bergambar > :not(.kartu-gambar) { padding-left: 24px; padding-right: 24px; }
.kartu-bergambar > h3 { padding-top: 20px; }
.kartu-bergambar > p:last-child { padding-bottom: 24px; }
.kartu-gambar { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--latar-3); border-bottom: 1px solid var(--garis); }

.gambar-lebar { margin: 30px 0 0; }
.gambar-lebar img { width: 100%; border: 1px solid var(--garis); border-radius: var(--sudut); }

.hero { position: relative; overflow: hidden; padding: 88px 0 72px; text-align: center; border-bottom: 1px solid var(--garis); }
.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--emas); }
.hero .semboyan { max-width: 620px; margin: 0 auto 34px; color: var(--teks-2); font-size: 1.08rem; }
.hero-tombol { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hiasan { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 26px; max-width: 300px; color: var(--emas-redup); }
.hiasan::before, .hiasan::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--garis-terang)); }
.hiasan::after { background: linear-gradient(90deg, var(--garis-terang), transparent); }
.hiasan span { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }

/* --- bagian & kartu ------------------------------------------------------ */

.bagian { padding: 64px 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: 28px; }
.judul-bagian h2 { margin: 0; }
.judul-bagian a { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }

.kisi { display: grid; gap: 18px; }
.kisi-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kisi-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.kartu {
    background: var(--latar-2);
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    padding: 24px;
}
.kartu h3 { color: var(--emas-terang); margin-bottom: .5em; }
.kartu p:last-child { margin-bottom: 0; }

.kartu-tautan { transition: border-color .15s, background .15s; }
.kartu-tautan:hover { border-color: var(--garis-terang); background: var(--latar-3); }

/* --- status server ------------------------------------------------------- */

.status-papan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--garis); border: 1px solid var(--garis); border-radius: var(--sudut); overflow: hidden; }
.status-sel { background: var(--latar-2); padding: 22px 18px; text-align: center; }
.status-angka { font-family: var(--serif); font-size: 1.85rem; font-weight: 400; color: var(--emas-terang); line-height: 1.2; }
.status-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teks-redup); margin-top: 5px; }

.lencana { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.titik { width: 9px; height: 9px; border-radius: 50%; background: var(--teks-redup); flex: none; }
.titik.online { background: var(--hijau); box-shadow: 0 0 0 4px rgba(95, 179, 124, .16); animation: denyut 2.4s ease-in-out infinite; }
.titik.gangguan { background: var(--kuning); box-shadow: 0 0 0 4px rgba(217, 164, 65, .16); }
.titik.offline { background: var(--merah); box-shadow: 0 0 0 4px rgba(196, 97, 78, .16); }
@keyframes denyut { 50% { opacity: .45; } }

.online-teks   { color: var(--hijau); }
.gangguan-teks { color: var(--kuning); }
.offline-teks  { color: var(--merah); }

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

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

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

table.peringkat { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; }
table.peringkat th {
    text-align: left; padding: 13px 16px;
    background: var(--latar-3);
    font-size: .71rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--teks-redup); font-weight: 600;
    border-bottom: 1px solid var(--garis);
    white-space: nowrap;
}
table.peringkat td { padding: 13px 16px; border-bottom: 1px solid var(--garis); }
table.peringkat tbody tr:last-child td { border-bottom: none; }
table.peringkat tbody tr:hover { background: var(--latar-2); }

.kolom-angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Harus lebih spesifik daripada `table.peringkat th` di atas, yang memasang
   text-align: left untuk SEMUA judul kolom. Tanpa baris ini judul kolom angka
   rata kiri sementara angkanya rata kanan - keduanya tampak benar sendiri-
   sendiri, dan yang salah hanya terlihat kalau tabelnya benar-benar dilihat. */
table.peringkat th.kolom-angka { text-align: right; }
.kolom-urutan { width: 62px; text-align: center; font-family: var(--serif); font-weight: 400; color: var(--teks-redup); }
tr.juara-1 .kolom-urutan { color: #e6c766; }
tr.juara-2 .kolom-urutan { color: #c9c9c9; }
tr.juara-3 .kolom-urutan { color: #c08a52; }
.nama-karakter { font-weight: 600; color: var(--teks); }
.lencana-gm { display: inline-block; margin-left: 7px; padding: 1px 7px; font-size: .64rem; letter-spacing: .1em; border: 1px solid var(--emas-redup); border-radius: 2px; color: var(--emas); vertical-align: middle; }

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

.berita-item { padding: 22px 0; border-bottom: 1px solid var(--garis); }
.berita-item:last-child { border-bottom: none; }
.berita-meta { display: flex; gap: 12px; align-items: center; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-redup); margin-bottom: 8px; }
.label-jenis { padding: 2px 9px; border: 1px solid var(--garis-terang); border-radius: 2px; }
.label-jenis.penting { border-color: var(--merah); color: var(--merah); }
.label-jenis.event { border-color: var(--emas-redup); color: var(--emas); }
.berita-item h3 { margin-bottom: .35em; }

/* --- langkah bernomor ---------------------------------------------------- */

.langkah { counter-reset: langkah; list-style: none; padding: 0; margin: 0; }
.langkah > li { counter-increment: langkah; position: relative; padding: 0 0 22px 52px; }
.langkah > li::before {
    counter: langkah; content: counter(langkah);
    position: absolute; left: 0; top: 0;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--emas-redup); color: var(--emas);
    font-family: var(--serif); font-weight: 400; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
}
.langkah > li:not(:last-child)::after {
    content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 1px; background: var(--garis);
}
.langkah h3 { margin-bottom: .3em; }
.langkah p:last-child { margin-bottom: 0; }

/* --- lain-lain ----------------------------------------------------------- */

.sorot { background: var(--latar-3); border-left: 2px solid var(--emas); border-radius: 0 var(--sudut) var(--sudut) 0; padding: 18px 22px; margin: 22px 0; }
.sorot p:last-child { margin-bottom: 0; }
.sorot strong { color: var(--emas-terang); }

code, .kode { font-family: 'SF Mono', Consolas, 'Courier New', monospace; font-size: .9em; background: var(--latar-3); border: 1px solid var(--garis); border-radius: 3px; padding: 2px 7px; color: var(--emas-terang); }

.daftar-rapi { list-style: none; padding: 0; margin: 0 0 1em; }
.daftar-rapi li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.daftar-rapi li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 5px; height: 5px; background: var(--emas-redup); transform: rotate(45deg); }

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

.spek { display: flex; flex-wrap: wrap; gap: 8px; }
.spek span { padding: 5px 13px; background: var(--latar-3); border: 1px solid var(--garis); border-radius: 2px; font-size: .8rem; color: var(--teks-2); }

/* --- kaki ---------------------------------------------------------------- */

.kaki { border-top: 1px solid var(--garis); padding: 40px 0 32px; margin-top: 40px; color: var(--teks-redup); font-size: .86rem; }
.kaki-isi { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.kaki-tautan { display: flex; gap: 20px; flex-wrap: wrap; }
.kaki small { display: block; margin-top: 6px; font-size: .78rem; color: var(--teks-redup); opacity: .75; }