:root{color-scheme:dark;--bg:#0a121f;--panel:#101d2e;--line:#293c52;--ink:#f4f7fd;--muted:#afbdd1;--sky:#8bdbff;--navy:#0a1725;--font:"DM Sans","Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);min-height:100vh;display:flex;flex-direction:column}
main{flex:1} a{color:inherit;text-decoration:none} button,select{font:inherit} a,button,select{touch-action:manipulation}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0 0 .65em} h1,h2,h3{line-height:1.12;letter-spacing:-.032em} h2{font-size:clamp(1.45rem,3.2vw,2.15rem)} h3{font-size:1.25rem} p,li,small{color:var(--muted)}
.wrap{width:min(1180px,calc(100% - 72px));margin-inline:auto}
.skip{position:absolute;top:0;left:0;transform:translateY(-110%);background:var(--sky);color:var(--navy);padding:.6rem 1rem;z-index:5}.skip:focus{transform:none}
.top{background:#0a1321;border-bottom:1px solid var(--line)}
.header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;gap:9px;align-items:center;font-weight:900;letter-spacing:.13em;font-size:1.03rem}.brand span span{color:var(--sky)}
nav{display:flex;gap:clamp(.85rem,2.6vw,2rem);align-items:center} nav a{font-size:.9rem;color:var(--muted);font-weight:650;white-space:nowrap} nav a:hover,nav a[aria-current],.support-link:hover,.support-link[aria-current]{color:var(--sky)}
.support-link{white-space:nowrap;border:1px solid #405873;border-radius:6px;padding:.4rem .85rem;font-size:.88rem;font-weight:700}.support-link span{margin-left:.25rem;color:var(--sky)}
.hero{border-bottom:1px solid var(--line);background:#10243a;position:relative;isolation:isolate;overflow:hidden}
.hero::before{position:absolute;content:"";inset:0;z-index:-1;background:linear-gradient(90deg,#081320 5%,#091522e8 28%,#0b17265c 61%,#0b152915),linear-gradient(0deg,#0a1321c9,transparent 40%),url("gerbang.webp") right 44% / cover no-repeat}
.hero-inner{padding-block:clamp(80px,9vw,135px);min-height:525px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}
.eyebrow{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--sky);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow i{width:7px;height:7px;background:var(--sky);transform:rotate(45deg)}
.hero h1{font-size:clamp(3.15rem,7.3vw,6.7rem);line-height:.98;margin:.22em 0 .26em;letter-spacing:-.069em;font-weight:780}.hero em{font-style:normal;color:var(--sky)}
.hero p{font-size:clamp(1rem,1.5vw,1.16rem);max-width:465px;color:#ccd8e9;margin-bottom:1.8rem}
.actions,.tags,.card-top,.card-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;background:var(--sky);border:1px solid transparent;border-radius:7px;padding:.67rem 1rem;color:var(--navy);font-weight:750;font-size:.9rem;cursor:pointer;transition:background .18s,border-color .18s}
.button:hover{background:#bfeaff}.button.secondary{background:#0c192bd9;border-color:#4b6480;color:var(--ink)}.button.secondary:hover{background:#1a304a;border-color:var(--sky)}
.home-content{padding-block:48px 68px;display:grid;gap:49px}.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}.section-title h2{margin:0}
.arrow{color:var(--sky);font-weight:700;font-size:.9rem}.arrow:hover{text-decoration:underline;text-underline-offset:4px}
.feature{display:grid;grid-template-columns:35% 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.feature-art{min-height:228px;display:grid;place-items:center;background:linear-gradient(135deg,#0b1824b0,#142943ba),url("gerbang.webp") right 48% / cover no-repeat;font-family:Georgia,serif;font-size:clamp(3rem,7vw,5.4rem);letter-spacing:-.08em;color:#e7f1ff}.feature-art>span{padding:.08em .33em .15em;border:1px solid #9bbee780}.feature-art>span>span{color:var(--sky)}
.feature-copy{padding:clamp(22px,3.5vw,42px)}.feature-copy h3{margin:.6rem 0 .75rem;font-size:clamp(1.65rem,4vw,2.8rem)}.feature-copy p{margin:.85rem 0}
.status{display:inline-flex;align-items:center;gap:.55em;color:#a9ead6;font-weight:750;font-size:.78rem}.status::before{content:"";width:.44rem;height:.44rem;border-radius:50%;background:#81e0bc}
.tags{gap:.4rem}.tags span{font-size:.74rem;border:1px solid #3a506b;padding:.14em .65em;border-radius:5px;color:#d4e0f0}
.journal-row{display:grid;grid-template-columns:200px 1fr;gap:1.4rem;border-top:1px solid var(--line);padding:1.35rem 0}.journal-row:last-child{border-bottom:1px solid var(--line)}.journal-row small,.summary small{display:block}.journal-row p{max-width:72ch}
.interior{padding-block:clamp(40px,7vw,82px)}.pagehead{max-width:800px;margin-bottom:2.15rem}.pagehead h1{font-size:clamp(2.7rem,6vw,5.3rem);margin:.13em 0 .22em;letter-spacing:-.06em}.pagehead p{font-size:1.1rem;max-width:64ch}.interior>.arrow+.pagehead{margin-top:1.4rem}
.filters{display:flex;align-items:end;flex-wrap:wrap;gap:.85rem;margin-bottom:1.1rem}.filters label{display:grid;gap:.25rem;flex:1 1 140px;font-weight:700;font-size:.88rem}
select{border:1px solid #455c78;background:var(--panel);color:var(--ink);border-radius:6px;padding:.65rem;min-width:0}
.cards,.stack{display:grid;gap:1rem}.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr))}.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:clamp(20px,3vw,32px)}.card h2{margin:.7rem 0 .45rem}.card h2 a:hover{color:var(--sky)}.card-bottom{justify-content:space-between;border-top:1px solid var(--line);padding-top:.75rem;margin-top:1.2rem}
.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(245px,1fr);gap:1rem;align-items:start}.summary>*{margin-bottom:.85rem}.panel h2{font-size:1.55rem}.panel h3{margin-top:1.1rem}.panel p:last-child,.panel li:last-child,.panel ol:last-child,.panel ul:last-child{margin-bottom:0}.panel li+li{margin-top:.35rem}.panel ol,.panel ul{padding-left:1.4em}.reading{max-width:840px}
.notice{border-left:2px solid var(--sky);padding:.45rem .75rem;background:#0c1827;margin-top:1rem}.support-panel{background:linear-gradient(90deg,#0c1829 25%,#0e1b2cd4 65%,#132d48a8),url("gerbang.webp") right 51% / cover no-repeat;margin-bottom:1.3rem}.support-panel>div{max-width:570px}
progress{width:100%;height:12px;accent-color:var(--sky)} .muted{color:var(--muted)} .screenshots{display:grid;gap:1rem}.screenshots img{display:block;max-width:100%;border-radius:6px}
footer{border-top:1px solid var(--line);background:#0a1321}.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:25px}.foot p{margin:0;font-size:.85rem}.foot>a{font-size:.85rem;color:var(--muted)}.foot>a:hover{color:var(--sky)}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.header{display:grid;grid-template-columns:1fr auto;gap:9px;padding-top:12px}.header nav{grid-row:2;grid-column:1/-1;gap:1rem;flex-wrap:wrap;padding:0 0 .6rem}.hero-inner{min-height:465px}.hero::before{background-position:66% center}.detail-grid{grid-template-columns:1fr}.summary{grid-row:1}.journal-row{grid-template-columns:140px 1fr}}
@media(max-width:500px){.wrap{width:calc(100% - 32px)}nav a{font-size:.78rem}.header nav{gap:.45rem .85rem}.hero-inner{min-height:0;padding-block:73px 58px}.hero::before{background-image:linear-gradient(90deg,#081320e8,#08132085),linear-gradient(0deg,#0a1321d9,transparent 65%),url("gerbang.webp");background-position:62% center}.feature,.journal-row{grid-template-columns:1fr}.feature-art{min-height:150px}.journal-row{gap:.55rem}.section-title{flex-wrap:wrap}.foot{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}