.bg{background-color:#0a0f1d;background-size:cover;background-position:center}
.hero{position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;background:radial-gradient(ellipse at 50% 55%,#0c1224 0,#070b18 70%)}
.logo{font-family:"Courier New",monospace;font-weight:900;font-size:56px;letter-spacing:.04em;color:#4aa3ff;text-shadow:0 0 18px #2f7bff,0 0 40px #1b4fd6,3px 3px 0 #1b3f9c}
.sub{margin-top:-2px;font-size:9px;font-weight:700;letter-spacing:.08em;background:#2b2e36;border:1px solid #555;padding:2px 10px;color:#ddd}
.hero p{max-width:300px;margin-top:14px;font-size:9px;line-height:1.55;color:#a7acba}
.pills{display:flex;gap:8px;margin-top:14px}
.pill{font-size:8px;padding:4px 9px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#b5bac8;display:flex;align-items:center;gap:5px}
.pill b{width:5px;height:5px;border-radius:50%;background:#3ecf6e;display:inline-block}
.pill b.r{background:#e0383d}
.btns{display:flex;gap:8px;margin-top:14px}
.btn{font-size:9px;font-weight:600;padding:8px 14px;border-radius:5px;color:#fff;display:inline-flex;align-items:center;gap:6px}.btn svg{width:12px;height:12px;flex:none}
.btn.d{background:var(--discord)}.btn.y{background:var(--red)}
.sec{position:relative;min-height:100vh;min-height:100svh;display:flex;padding:0 12px 56px}
.sec.l{align-items:flex-end;justify-content:flex-start}
.sec.r{align-items:center;justify-content:flex-end;text-align:right}
.sec::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(7,11,24,.55),rgba(7,11,24,.45))}
.sec>div{position:relative;z-index:2;max-width:300px}
h2{font-weight:900;font-size:52px;line-height:.9;letter-spacing:-.045em;text-transform:none}
.sec p{margin-top:12px;font-size:11px;line-height:1.55;color:#b4b8c4}
.s1{background:linear-gradient(180deg,#070b18 0,#0d1426 40%,#101a2c 100%)}
.s2{background:linear-gradient(180deg,#101a2c 0,#2a1d14 55%,#1a1812 100%)}
.s3{background:linear-gradient(180deg,#1a1812 0,#1b2230 60%,#0f1522 100%)}
footer{position:relative;background:var(--blue)}
.f1{display:flex;justify-content:space-between;align-items:center;padding:14px 12px}
.copy{font-size:8px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.18);padding:8px 10px;border-radius:4px;display:flex;gap:18px}
.soc{display:flex;gap:8px}.soc a{width:26px;height:26px;border-radius:5px;background:rgba(255,255,255,.18);display:grid;place-items:center;color:#fff}.soc svg{width:15px;height:15px}
.ph{position:absolute;inset:0;display:block;background:var(--img,none) center/cover}
.ph em{position:absolute;top:64px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7d86a0;border:1px dashed #3a4565;padding:6px 12px;border-radius:4px;background:rgba(7,11,24,.6)}
.ph[style*="url"] em{display:none}
/* Background hero digelapkan seperti Rove. --dim = tingkat gelap (0 = gambar asli, 1 = hitam penuh) */
.hero{--dim:.88}
.hero .ph[style*="url"]::after{content:"";position:absolute;inset:0;background:rgba(7,11,24,var(--dim))}
.hero>*:not(.ph){position:relative;z-index:2}
.logo-ph{width:170px;height:84px;display:grid;place-items:center;border:1px dashed #3a4565;border-radius:6px;font-size:9px;font-weight:600;letter-spacing:.08em;color:#7d86a0;background:rgba(7,11,24,.6)}
.f2{background:#1d4fb8;font-size:8px;padding:9px 12px;color:#dbe6ff;display:flex;gap:10px;flex-wrap:wrap}
.f2 span:last-child{opacity:.7}
.wl{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;align-items:center;gap:6px;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#d5d8e2;pointer-events:none}
.wl i{width:4px;height:4px;border-radius:50%;background:#e8b923}
.view[hidden]{display:none}body.news .wl{display:none}

/* ===== Blend halus antar gambar (crossfade) =====
   --fade = tinggi area pudar. Antar section dibuat saling tumpang tindih sebesar --fade
   sehingga gambar atas memudar keluar tepat saat gambar bawah memudar masuk.
   Ubah angka clamp() di bawah kalau mau lebih halus/tegas. */
:root{--fade:clamp(130px,22vw,300px)}
.sec{--fade:clamp(130px,22vw,300px)}
.sec .ph{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) calc(var(--fade)*0.0),rgba(0,0,0,0.028) calc(var(--fade)*0.1),rgba(0,0,0,0.104) calc(var(--fade)*0.2),rgba(0,0,0,0.216) calc(var(--fade)*0.3),rgba(0,0,0,0.352) calc(var(--fade)*0.4),rgba(0,0,0,0.500) calc(var(--fade)*0.5),rgba(0,0,0,0.648) calc(var(--fade)*0.6),rgba(0,0,0,0.784) calc(var(--fade)*0.7),rgba(0,0,0,0.896) calc(var(--fade)*0.8),rgba(0,0,0,0.972) calc(var(--fade)*0.9),rgba(0,0,0,1.000) calc(var(--fade)*1.0),rgba(0,0,0,0.972) calc(100% - var(--fade)*0.9),rgba(0,0,0,0.896) calc(100% - var(--fade)*0.8),rgba(0,0,0,0.784) calc(100% - var(--fade)*0.7),rgba(0,0,0,0.648) calc(100% - var(--fade)*0.6),rgba(0,0,0,0.500) calc(100% - var(--fade)*0.5),rgba(0,0,0,0.352) calc(100% - var(--fade)*0.4),rgba(0,0,0,0.216) calc(100% - var(--fade)*0.3),rgba(0,0,0,0.104) calc(100% - var(--fade)*0.2),rgba(0,0,0,0.028) calc(100% - var(--fade)*0.1),rgba(0,0,0,0.000) calc(100% - var(--fade)*0.0));mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) calc(var(--fade)*0.0),rgba(0,0,0,0.028) calc(var(--fade)*0.1),rgba(0,0,0,0.104) calc(var(--fade)*0.2),rgba(0,0,0,0.216) calc(var(--fade)*0.3),rgba(0,0,0,0.352) calc(var(--fade)*0.4),rgba(0,0,0,0.500) calc(var(--fade)*0.5),rgba(0,0,0,0.648) calc(var(--fade)*0.6),rgba(0,0,0,0.784) calc(var(--fade)*0.7),rgba(0,0,0,0.896) calc(var(--fade)*0.8),rgba(0,0,0,0.972) calc(var(--fade)*0.9),rgba(0,0,0,1.000) calc(var(--fade)*1.0),rgba(0,0,0,0.972) calc(100% - var(--fade)*0.9),rgba(0,0,0,0.896) calc(100% - var(--fade)*0.8),rgba(0,0,0,0.784) calc(100% - var(--fade)*0.7),rgba(0,0,0,0.648) calc(100% - var(--fade)*0.6),rgba(0,0,0,0.500) calc(100% - var(--fade)*0.5),rgba(0,0,0,0.352) calc(100% - var(--fade)*0.4),rgba(0,0,0,0.216) calc(100% - var(--fade)*0.3),rgba(0,0,0,0.104) calc(100% - var(--fade)*0.2),rgba(0,0,0,0.028) calc(100% - var(--fade)*0.1),rgba(0,0,0,0.000) calc(100% - var(--fade)*0.0))}
.hero .ph{--fade:clamp(130px,22vw,300px);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fade)),rgba(0,0,0,0.972) calc(100% - var(--fade)*0.9),rgba(0,0,0,0.896) calc(100% - var(--fade)*0.8),rgba(0,0,0,0.784) calc(100% - var(--fade)*0.7),rgba(0,0,0,0.648) calc(100% - var(--fade)*0.6),rgba(0,0,0,0.500) calc(100% - var(--fade)*0.5),rgba(0,0,0,0.352) calc(100% - var(--fade)*0.4),rgba(0,0,0,0.216) calc(100% - var(--fade)*0.3),rgba(0,0,0,0.104) calc(100% - var(--fade)*0.2),rgba(0,0,0,0.028) calc(100% - var(--fade)*0.1),rgba(0,0,0,0.000) calc(100% - var(--fade)*0.0));mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fade)),rgba(0,0,0,0.972) calc(100% - var(--fade)*0.9),rgba(0,0,0,0.896) calc(100% - var(--fade)*0.8),rgba(0,0,0,0.784) calc(100% - var(--fade)*0.7),rgba(0,0,0,0.648) calc(100% - var(--fade)*0.6),rgba(0,0,0,0.500) calc(100% - var(--fade)*0.5),rgba(0,0,0,0.352) calc(100% - var(--fade)*0.4),rgba(0,0,0,0.216) calc(100% - var(--fade)*0.3),rgba(0,0,0,0.104) calc(100% - var(--fade)*0.2),rgba(0,0,0,0.028) calc(100% - var(--fade)*0.1),rgba(0,0,0,0.000) calc(100% - var(--fade)*0.0))}
#secs{margin-top:calc(var(--fade)*-.5)}
.sec+.sec{margin-top:calc(var(--fade)*-1)}
/* section yang punya gambar: latar polos dihilangkan supaya gambar di bawahnya tembus saat crossfade */
.sec:has(.ph[style*="url"]){background:none}
/* lapisan gelap ikut ter-mask bersama gambar (sebelumnya kotak penuh -> muncul garis tegas) */
.sec:has(.ph[style*="url"])::before{display:none}
.sec .ph[style*="url"]::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,11,24,.55),rgba(7,11,24,.45))}