/* Halaman beranda: hero dan panel berita.
   Panel berita sebelumnya berupa dokumen terpisah (eventos.html) yang dimuat
   lewat iframe; gayanya kini menyatu di sini. */

/* ---------- Hero ---------- */
/* Tinggi hero diikat ke tinggi viewport supaya bagian berita selalu ikut
   terlihat di bawah lipatan layar, bukan terdorong jauh ke bawah. */
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:end; min-height:min(820px,76vh); padding:128px max(24px,calc((100% - 1180px)/2)) 56px; overflow:hidden; background:linear-gradient(90deg,rgba(7,7,7,.96) 0%,rgba(7,7,7,.82) 31%,rgba(7,7,7,.34) 61%,rgba(7,7,7,.12) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(11,10,8,.45) 22%,transparent 50%),url("../images/event-rise-of-trimurti.png") 58% center/cover no-repeat; }
.hero::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 68% 31%,rgba(224,159,73,.14),transparent 24rem),linear-gradient(180deg,rgba(0,0,0,.32),transparent 26%); pointer-events:none; }
.hero::after { position:absolute; right:0; bottom:0; left:0; height:90px; content:""; background:linear-gradient(transparent,var(--bg)); }
.hero-glow { position:absolute; top:29%; left:48%; width:520px; height:520px; opacity:.7; border-radius:50%; background:rgba(211,134,40,.1); filter:blur(90px); }
.hero-content, .server-card { position:relative; z-index:2; }
.hero-content { max-width:660px; padding-bottom:16px; }

.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 20px; color:var(--gold-light); font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow span { width:34px; height:1px; background:var(--gold); }

.hero h1 { max-width:760px; margin:0; color:#fff; font:700 clamp(55px,7.3vw,100px)/.92 Georgia,"Times New Roman",serif; letter-spacing:-.055em; text-shadow:0 4px 40px #000; }
.hero h1 em { color:var(--gold-light); font-weight:400; }
.hero-tagline { margin:22px 0 0; color:var(--gold-light); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.hero-copy { max-width:540px; margin:30px 0 0; color:#d8d2c8; font-size:16px; text-shadow:0 2px 18px rgba(0,0,0,.85); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 25px; border:1px solid rgba(255,255,255,.2); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { gap:18px; color:#1b1308; border-color:var(--gold); background:linear-gradient(135deg,var(--gold-light),var(--gold)); }
.button-primary:hover { background:var(--gold-light); }
.button-ghost:hover { border-color:var(--gold); background:rgba(215,164,68,.1); }

.server-card { align-self:end; margin-bottom:34px; padding:24px; border:1px solid rgba(232,195,123,.2); background:rgba(12,11,9,.88); box-shadow:var(--shadow); backdrop-filter:blur(15px); }
.server-card-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.server-card-head span { color:#eef6ec; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.server-card-head small { color:var(--muted); }
.status-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(126,220,133,.1),0 0 12px var(--green); }
.server-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:20px 0; }
.server-stats div { display:flex; flex-direction:column; min-width:0; }
.server-stats strong { overflow:hidden; color:var(--gold-light); font:700 14px Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.server-stats span { margin-top:4px; color:#8c857b; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.server-card p { margin:0; color:var(--muted); font-size:12px; }

/* ---------- Bagian berita ---------- */
.content-section { width:var(--shell); margin:56px auto 100px; scroll-margin-top:24px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:34px; }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading h2 { margin:0; font:700 clamp(32px,4vw,50px)/1.05 Georgia,serif; letter-spacing:-.03em; }
.section-heading>p { max-width:450px; margin:0; color:var(--muted); font-size:14px; }

.news-panel { position:relative; padding:34px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.news-panel::before { position:absolute; top:0; left:0; width:90px; height:2px; content:""; background:var(--gold); }
.news-panel p { color:var(--muted); font-size:13px; line-height:1.7; }

.featured { position:relative; min-height:400px; padding:34px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(90deg,rgba(12,10,7,.94),rgba(12,10,7,.2) 68%),linear-gradient(0deg,rgba(10,8,6,.84),transparent 68%),url("../assets/tantra-artwork/tantra-guardian-banner.png") center/cover; }
.featured::before { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(10,8,6,.82),transparent 62%); }
.featured-content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-height:330px; }
.featured h2 { max-width:480px; margin:16px 0 10px; font:700 clamp(30px,5vw,48px)/1.02 Georgia,serif; letter-spacing:-.03em; text-shadow:0 3px 22px #000; }
.featured p { max-width:500px; margin:0; color:#d3ccc1; text-shadow:0 2px 12px #000; }
.tag { align-self:flex-start; padding:6px 10px; color:#171109; background:var(--gold); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- Event harian ---------- */
/* Panel ini berisi ajakan bertindak, jadi dibedakan dari kartu informasi lain
   dengan aksen emas di tepi kiri dan latar bergradasi. */
.event { margin-top:24px; padding:26px 28px; border:1px solid var(--line); border-left:2px solid var(--gold); background:linear-gradient(120deg,rgba(215,164,68,.1),var(--surface-2) 58%); }
.event .tag { display:inline-block; }
.event h3 { margin:14px 0 0; font:700 clamp(25px,3vw,33px)/1.1 Georgia,serif; letter-spacing:-.02em; }
/* Dinaikkan ke dua kelas: `.news-panel p` lebih spesifik daripada satu kelas,
   jadi font-size/line-height di sini kalah kalau hanya `.event-time`. */
.event .event-time { display:inline-flex; align-items:center; gap:9px; margin:14px 0 0; padding:7px 13px; color:var(--gold-light); border:1px solid rgba(215,164,68,.35); background:rgba(215,164,68,.08); font:700 12px/1.2 Consolas,"Courier New",monospace; letter-spacing:.04em; }
.event-time svg { flex:none; width:14px; height:14px; }
.event-lead { max-width:70ch; margin:16px 0 0; }
.event-lead strong { color:var(--gold-light); }
.event-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 24px; margin:24px 0 0; padding:0; list-style:none; counter-reset:step; }
.event-steps li { position:relative; padding-left:30px; color:var(--muted); font-size:12px; line-height:1.65; counter-increment:step; }
.event-steps li::before { position:absolute; top:2px; left:0; width:20px; height:20px; content:counter(step); color:#171109; background:var(--gold); font:700 10px/20px Consolas,"Courier New",monospace; text-align:center; }
.event-step-label { display:block; margin-bottom:3px; color:var(--text); font:700 13px/1.35 Georgia,serif; }
.event-foot { display:flex; align-items:center; flex-wrap:wrap; gap:16px 22px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.event-foot .button { flex:none; gap:14px; min-height:46px; }
.event .event-note { flex:1 1 320px; margin:0; font-size:12px; }
.event-note strong { color:var(--text); }

/* ---------- Kartu sosial media ---------- */
/* Seluruh kartu adalah tautan, jadi teks pendukung memakai <span> (bukan <p>)
   agar tetap valid di dalam <a>. */
.community { margin-top:34px; }
.social-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.social { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.social:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow); }
.social-facebook { background:linear-gradient(120deg,rgba(24,119,242,.16),#191610 64%); }
.social-instagram { background:linear-gradient(120deg,rgba(228,64,95,.16),#191610 64%); }
.social-discord { background:linear-gradient(120deg,rgba(88,101,242,.18),#191610 64%); }
.social-icon { flex:none; display:block; width:42px; height:42px; }
.social-icon svg { display:block; width:100%; height:100%; }
.social-copy { min-width:0; }
.social-copy strong { display:block; color:var(--text); font:700 17px/1.25 Georgia,serif; }
.social-copy span { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.65; }
.social-arrow { flex:none; margin-left:auto; color:var(--gold); font-size:16px; transition:transform .2s ease; }
.social:hover .social-arrow { transform:translateX(4px); }

.features { margin-top:34px; }
/* Dipakai bersama oleh .community, .features, dan .live-tools. Diikat ke
   .news-panel, bukan didaftar per section, supaya subbagian berikutnya tidak
   perlu menambah selektor lagi. */
.news-panel .section-title { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.news-panel .section-title h3 { margin:0; font:700 21px/1.2 Georgia,serif; }
.news-panel .section-title span { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.feature { padding:24px; border:1px solid var(--line); background:#191610; }
.feature h3 { margin:10px 0 6px; font:700 18px/1.25 Georgia,serif; }
.feature p { margin:0; }
.feature .feature-extra { margin-top:14px; }
.feature-extra strong { color:var(--gold-light); font-weight:700; }
.card-index { color:var(--gold); font:400 22px Georgia,serif; }
.feature code { display:inline-block; margin-top:10px; padding:8px 10px; color:var(--gold); border:1px dashed var(--line); border-radius:3px; background:rgba(215,164,68,.07); font:600 12px/1.6 Consolas,"Courier New",monospace; word-break:break-word; }
.kbd { display:inline-block; min-width:26px; margin-top:10px; padding:6px 10px; color:var(--gold); border:1px solid var(--line); border-bottom-width:3px; border-radius:4px; background:rgba(215,164,68,.07); font:700 13px Consolas,"Courier New",monospace; text-align:center; }

/* Sumber bahan crafting: dipisah dari kartu fitur karena daftar bossnya jauh
   lebih panjang daripada isi kartu lain — di dalam kolom kartu ia hanya jadi
   dinding teks dan memaksa dua kartu tetangganya ikut meninggi. */
.drops { margin-top:16px; padding:22px 24px; border:1px solid var(--line); border-left:2px solid var(--gold); background:rgba(215,164,68,.05); }
.drops-title { display:block; color:var(--gold-light); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.drops-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 24px; margin:16px 0 0; padding:0; list-style:none; counter-reset:drop; }
.drops-list li { position:relative; padding-left:30px; color:var(--muted); font-size:12px; line-height:1.65; counter-increment:drop; }
.drops-list li::before { position:absolute; top:2px; left:0; width:20px; height:20px; content:counter(drop); color:var(--gold); border:1px solid rgba(215,164,68,.35); font:700 10px/19px Consolas,"Courier New",monospace; text-align:center; }
.drops-label { display:block; margin-bottom:3px; color:var(--text); font:700 13px/1.35 Georgia,serif; }

/* ---------- Pintasan halaman live ---------- */
/* Dipisah dari .feature-grid karena keduanya tautan ke halaman lain, bukan
   perintah in-game — dan lima kartu di grid auto-fit akan menyisakan satu
   kartu yatim di baris kedua. */
.live-tools { margin-top:34px; }
.live-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.live { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); background:linear-gradient(120deg,rgba(126,220,133,.09),#191610 62%); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.live:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow); }
.live-icon { flex:none; display:grid; place-items:center; width:42px; height:42px; color:var(--green); border:1px solid rgba(126,220,133,.25); background:rgba(126,220,133,.08); }
.live-icon svg { display:block; width:21px; height:21px; }
.live-copy { min-width:0; }
.live-copy strong { display:flex; align-items:flex-start; gap:9px; color:var(--text); font:700 17px/1.25 Georgia,serif; }
.live-copy > span { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.65; }
/* margin-top mendudukkan titik di tengah baris pertama (21px) saat judulnya
   terlipat dua baris di layar sempit, bukan di tengah kedua baris. */
.live-dot { flex:none; width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(126,220,133,.12),0 0 10px var(--green); }
.live-arrow { flex:none; margin-left:auto; color:var(--gold); font-size:16px; transition:transform .2s ease; }
.live:hover .live-arrow { transform:translateX(4px); }

.notice { display:flex; align-items:center; gap:14px; margin-top:24px; padding:18px 20px; border-left:2px solid var(--gold); background:rgba(215,164,68,.06); }
.notice strong { display:block; font-size:12px; }
.notice span { color:var(--muted); font-size:11px; }

@media (min-width:1500px) { .hero { background-position:63% center; } }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; min-height:min(820px,76vh); padding-inline:24px; background:linear-gradient(90deg,rgba(7,7,7,.93),rgba(7,7,7,.55) 65%,rgba(7,7,7,.2)),linear-gradient(0deg,var(--bg),transparent 47%),url("../images/event-rise-of-trimurti.png") 62% center/cover no-repeat; }
  .server-card { display:none; }
  .section-heading { display:block; }
  .section-heading>p { margin-top:18px; }
}

@media (max-width:700px) {
  .news-panel { padding:20px; }
  .event { padding:22px 20px; }
  .event-foot .button { flex:1 1 auto; width:100%; }
  .featured { min-height:360px; padding:24px; background-position:58% center; }
  .featured-content { min-height:290px; }
}

@media (max-width:600px) {
  /* Badge jam harus tetap satu baris; kalau pecah, "WIB" jatuh sendirian. */
  .event .event-time { padding:7px 11px; font-size:11px; white-space:nowrap; }
  .hero { min-height:min(760px,76vh); padding-top:126px; padding-bottom:56px; background:linear-gradient(90deg,rgba(7,7,7,.92),rgba(7,7,7,.46)),linear-gradient(0deg,var(--bg),transparent 55%),url("../images/event-rise-of-trimurti.png") 61% center/auto 100% no-repeat,#090806; }
  .hero::before { background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 25%); }
  .hero h1 { font-size:clamp(47px,16vw,68px); }
  .hero-copy { font-size:14px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .button { width:100%; }
  .content-section { width:calc(100% - 28px); margin:40px auto 72px; }
}

/* Layar pendek (ponsel kecil, laptop 768px): rapatkan hero supaya judul
   bagian berita tetap terlihat tanpa harus menggulir dulu. */
@media (max-height:720px) {
  .hero { padding-top:104px; padding-bottom:40px; }
  .hero h1 { font-size:clamp(42px,13vw,60px); }
  .hero-copy { margin-top:20px; }
  .hero-actions { margin-top:24px; }
  .hero-content { padding-bottom:0; }
  .content-section { margin-top:40px; }
}

@media (max-height:660px) {
  .hero { padding-bottom:32px; }
  .content-section { margin-top:28px; }
}

/* ---------- Tentang server & FAQ ---------- */
.about-section, .faq-section { width:var(--shell); margin:0 auto 100px; }
.about-section .section-heading, .faq-section .section-heading { margin-bottom:28px; }

.prose { max-width:78ch; }
.prose p { margin:0 0 18px; color:#c3bcb1; font-size:15px; line-height:1.85; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--text); font-weight:700; }
.prose a { color:var(--gold-light); text-decoration:underline; text-decoration-color:rgba(215,164,68,.4); text-underline-offset:3px; transition:text-decoration-color .2s ease; }
.prose a:hover { text-decoration-color:var(--gold); }

.faq-list { display:grid; gap:1px; border:1px solid var(--line); background:var(--line); }
.faq-item { background:var(--surface); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; color:var(--text); font:700 16px/1.4 Georgia,serif; cursor:pointer; list-style:none; transition:background .2s ease,color .2s ease; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--gold-light); background:var(--surface-2); }
.faq-item summary i { position:relative; flex:none; width:13px; height:13px; }
.faq-item summary i::before, .faq-item summary i::after { position:absolute; top:50%; left:0; width:13px; height:1.5px; content:""; background:var(--gold); transition:transform .2s ease; }
.faq-item summary i::after { transform:rotate(90deg); }
.faq-item[open] summary { color:var(--gold-light); }
.faq-item[open] summary i::after { transform:rotate(0deg); }
.faq-answer { padding:0 26px 24px; }
.faq-answer p { max-width:74ch; margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.faq-answer a { color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; }
.faq-answer code { padding:2px 7px; color:var(--gold); border:1px dashed var(--line); border-radius:3px; background:rgba(215,164,68,.07); font:600 13px Consolas,"Courier New",monospace; }

@media (max-width:600px) {
  .about-section, .faq-section { width:calc(100% - 28px); margin-bottom:72px; }
  .prose p { font-size:14px; }
  .faq-item summary { padding:18px 20px; font-size:15px; }
  .faq-answer { padding:0 20px 20px; }
}