/* Kerangka bersama seluruh halaman Tantra Legacy: token warna, reset,
   header/navigasi, dan footer. Dimuat lebih dulu oleh tl_header(), sehingga
   stylesheet per halaman yang dimuat sesudahnya tetap dapat menimpa nilainya. */

@font-face { font-family: "Ethnocentric"; src: url("../Fonts/ETHNOCEN.TTF") format("truetype"); font-display: swap; }

:root { --bg:#0b0a08; --surface:#14120e; --surface-2:#1b1812; --line:rgba(224,177,87,.18); --gold:#d7a444; --gold-light:#f2d397; --text:#f6f1e8; --muted:#a9a195; --green:#7edc85; --shadow:0 24px 70px rgba(0,0,0,.42); --shell:min(1180px,calc(100% - 48px)); }

* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 80% 10%,rgba(155,96,32,.12),transparent 28rem),var(--bg); font-family:Inter,"Segoe UI",Arial,sans-serif; line-height:1.6; }
body::before { position:fixed; inset:0; z-index:-1; content:""; opacity:.025; background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px); background-size:48px 48px; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; z-index:50; top:-100px; left:12px; padding:12px 18px; color:#1b1308; background:var(--gold); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:top .2s ease; }
.skip-link:focus { top:12px; }

/* Header berada di aliran normal supaya halaman tanpa hero tidak tertimpa.
   Hanya beranda yang menumpuknya di atas artwork hero. */
.site-header { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; width:var(--shell); height:88px; margin:0 auto; border-bottom:1px solid rgba(255,255,255,.12); }
.page-beranda .site-header { position:absolute; top:0; left:50%; margin:0; transform:translateX(-50%); }

.brand { display:flex; align-items:center; gap:13px; }
.brand-mark { display:block; width:42px; aspect-ratio:1; filter:drop-shadow(0 0 14px rgba(215,164,68,.24)); }
.brand-mark img { display:block; width:100%; height:100%; }
.brand-copy { display:flex; flex-direction:column; line-height:1.15; }
.brand-copy strong { font:15px/1.2 Ethnocentric,Georgia,serif; letter-spacing:.04em; }
.brand-copy small { margin-top:5px; color:var(--gold); font-size:10px; letter-spacing:.22em; text-transform:uppercase; }

.main-nav { display:flex; align-items:center; gap:7px; }
/* nowrap wajib: nav adalah flex nowrap tanpa flex-shrink:0, jadi item boleh
   menyusut di bawah lebar teksnya. Tanpa ini, label dua kata ("Top Up Taney",
   "Player Online") terlipat jadi dua baris di dalam header setinggi 88px. */
.main-nav a { position:relative; padding:12px 16px; color:#c9c3ba; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:color .2s ease; }
.main-nav a::after { position:absolute; right:16px; bottom:5px; left:16px; height:1px; content:""; background:var(--gold); transform:scaleX(0); transition:transform .2s ease; }
.main-nav a:hover, .main-nav a.active { color:#fff; }
.main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); }
.main-nav .nav-logout { color:#8d857a; }
.main-nav .nav-logout:hover { color:#ee9d8f; }
.main-nav .nav-logout::after { background:#ee7b6d; }

/* Nav berisi 8 item untuk pengunjung anonim, 9 setelah masuk, dan 10 untuk
   admin (Akun, Add Taney, Keluar). Di layar menengah paddingnya dirapatkan
   agar barisnya tetap muat; batas atasnya 1260px karena di bawah itu --shell
   belum mencapai 1180px penuh. Di bawah 1080px nav collapse ke .menu-toggle:
   pada 901px pun lebar tersisa hanya ~709px, sedangkan nav admin butuh
   ~875px, jadi rentang 901-1079px tidak pernah benar-benar cukup. */
@media (max-width:1260px) and (min-width:1080px) {
  .main-nav a { padding:12px 9px; letter-spacing:.04em; }
}

/* Nav admin (10 item) tidak muat dengan padding 16px bahkan pada --shell
   penuh: butuh ~1052px, tersedia 1036px. Dirapatkan hanya saat item ke-10
   benar-benar ada, supaya pengunjung biasa tetap dapat jarak yang lega. */
.main-nav:has(a:nth-child(10)) { gap:5px; }
.main-nav:has(a:nth-child(10)) a { padding:12px 9px; letter-spacing:.04em; }

.menu-toggle { display:none; }

.site-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; width:var(--shell); margin:0 auto; padding:38px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.site-footer div { display:flex; flex-direction:column; }
.site-footer strong { color:var(--text); font:700 14px Ethnocentric,Georgia,serif; }
.site-footer span { color:var(--gold); letter-spacing:.16em; text-transform:uppercase; }
.site-footer a { color:var(--gold-light); font-weight:700; text-transform:uppercase; }

/* Header tetap selebar --shell di rentang 901-1079px supaya tepinya lurus
   dengan konten halaman; penyempitan ke 100%-32px hanya untuk layar kecil. */
@media (max-width:900px) {
  .site-header { width:calc(100% - 32px); }
}

@media (max-width:1079px) {
  .menu-toggle { display:grid; gap:5px; padding:11px; border:1px solid var(--line); background:rgba(10,9,7,.8); }
  .menu-toggle span:not(.sr-only) { display:block; width:20px; height:1px; background:var(--text); }
  .main-nav { position:absolute; z-index:20; top:76px; right:0; display:none; width:min(280px,calc(100vw - 32px)); padding:12px; border:1px solid var(--line); background:#100e0b; box-shadow:var(--shadow); }
  .main-nav.open { display:grid; }
  .main-nav a { padding:13px 15px; }
  .main-nav a::after { right:auto; left:0; width:2px; height:auto; inset-block:9px; transform:scaleY(0); }
  .main-nav a:hover::after, .main-nav a.active::after { transform:scaleY(1); }
}

@media (max-width:600px) {
  .site-header { height:76px; }
  .brand-copy strong { font-size:12px; }
  .brand-mark { width:38px; }
  .site-footer { width:calc(100% - 28px); align-items:flex-start; flex-direction:column; }
  .site-footer p { margin:0; }
}

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; } }