@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#0b0b0b;--ink-2:#141414;--red:#d71902;--red-dark:#9a0a0a;--gold:#f8a201;--paper:#f4f1eb;--white:#fff;--muted:#b5aaa7;--line:rgba(255,255,255,.15);font-family:'DM Sans',Arial,sans-serif;font-synthesis:none;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}html{scroll-padding-top:84px}body{margin:0;background:var(--ink);color:var(--white);min-width:320px}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%}::selection{background:var(--gold);color:var(--ink)}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.skip-link{position:absolute;left:20px;top:-60px;z-index:100;background:var(--gold);color:#111;padding:12px}.skip-link:focus{top:12px}.announcement{min-height:34px;display:flex;gap:11px;align-items:center;justify-content:center;background:#ad110b;padding:7px 20px;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.03em}.announcement__mark{width:7px;height:7px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}.announcement a{text-decoration:underline;text-underline-offset:3px}.site-header{position:relative;z-index:20;background:#0b0b0b;border-bottom:1px solid var(--line)}.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;flex:none}.brand img{width:175px;height:60px;object-fit:contain;object-position:left center}.nav{display:flex;align-items:center;gap:34px;font-size:.88rem;font-weight:700}.nav>a:not(.nav__action){color:#cfc8c4;transition:color .2s}.nav>a:hover{color:#fff}.nav__action{border:1px solid #70433a;padding:12px 18px;border-radius:3px;transition:background .2s,border-color .2s}.nav__action:hover{background:#42140f;border-color:#a64635}.nav__action span,.button span{margin-left:18px}.menu-toggle{display:none}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 67% 47%,#501408 0,#220b08 30%,#0b0b0b 70%);isolation:isolate}.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 48%,rgba(255,190,113,.035) 48.08%,transparent 48.18%),repeating-linear-gradient(90deg,transparent 0 83px,rgba(255,255,255,.035) 84px,transparent 85px);mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}.hero__glow{position:absolute;width:540px;height:540px;border-radius:50%;right:4%;top:15%;background:#d71902;opacity:.12;filter:blur(100px);pointer-events:none}.hero__grid{min-height:610px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:38px;padding-block:75px 58px}.hero__copy{position:relative;z-index:2}.eyebrow,.section-kicker{font-size:.72rem;font-weight:800;letter-spacing:.19em;line-height:1.5}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold);margin:0 0 30px}.eyebrow__line{width:24px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Manrope,'DM Sans',Arial,sans-serif;letter-spacing:-.055em}h1{font-size:clamp(3.3rem,5.3vw,5.8rem);line-height:1.05;margin-bottom:24px;font-weight:800;white-space:nowrap}h1 em,.feature h2 em{font-style:normal;color:var(--gold)}.hero__lede{max-width:570px;color:#c9b9b3;font-size:1.06rem;line-height:1.8;margin-bottom:32px}.hero__actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:14px 20px;font-size:.89rem;font-weight:800;border-radius:3px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button--primary{background:var(--red);color:#fff;box-shadow:0 12px 35px rgba(215,25,2,.2)}.button--primary:hover{background:#ef260f}.text-link,.inline-link{font-size:.89rem;font-weight:800;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#8c6053}.text-link:hover,.inline-link:hover{text-decoration-color:var(--gold)}.text-link span,.inline-link span{margin-left:8px;color:var(--gold)}.hero__art{position:relative;min-height:460px;display:grid;place-items:center}.hero__frame{position:relative;width:min(100%,420px);aspect-ratio:1 / 1.03;padding:25px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(140deg,rgba(255,255,255,.09),transparent 30%),radial-gradient(circle at 75% 75%,#d71902,transparent 55%),linear-gradient(140deg,#340b08,#a00f08 65%,#3a0b08);border:1px solid rgba(255,201,106,.55);box-shadow:24px 24px 0 rgba(171,27,10,.19),0 40px 80px rgba(0,0,0,.48);transform:rotate(-3deg)}.hero__frame::before,.hero__frame::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;aspect-ratio:1;width:520px;right:-290px;top:-130px}.hero__frame::after{width:400px;right:-230px;top:-66px}.frame-index,.frame-caption{font-size:.7rem;font-weight:800;letter-spacing:.2em;position:relative;z-index:1}.frame-caption{color:#f4c49b}.hero__monogram{align-self:flex-end;font-family:Manrope,sans-serif;font-size:clamp(6rem,13vw,11rem);font-weight:800;letter-spacing:-.13em;line-height:1;color:rgba(255,255,255,.96);position:relative;z-index:1}.hero__monogram span{color:var(--gold)}.hero__frame p{font-family:Manrope,sans-serif;font-size:clamp(2rem,3.4vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.07em;margin:0;position:relative;z-index:1}.hero__edge{position:absolute;left:-5px;bottom:18px;background:#0b0b0b;border:1px solid rgba(248,162,1,.48);color:var(--gold);padding:12px 17px;font-size:.64rem;font-weight:800;letter-spacing:.17em;transform:rotate(4deg);box-shadow:0 10px 30px #0008}.hero__edge span{padding-inline:8px}.hero__bottom{padding-block:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#b39e97;font-size:.66rem;letter-spacing:.18em;font-weight:800}.hero__bottom span span{color:var(--gold);margin-left:10px}
.section{padding-block:105px}.section-kicker{color:var(--red);margin-bottom:23px}.section h2{font-size:clamp(2.5rem,4vw,4.3rem);line-height:1.13;margin:0;font-weight:800}.section h2 span{color:#a69c98}.intro{background:var(--paper);color:#171414}.intro__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:100px}.intro__body{padding-top:45px;color:#4e4946;font-size:1rem;line-height:1.85}.intro__body p{margin-bottom:18px}.inline-link{color:#9a0a0a;display:inline-block;margin-top:7px}.guide{background:#111}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:42px}.section-heading>p{max-width:305px;color:#b4aaa6;line-height:1.7;margin:0 0 5px}.guide__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.guide-card{min-height:285px;padding:29px;background:#1b1918;border:1px solid #36302e;transition:border-color .25s,transform .25s}.guide-card:hover{border-color:#ae4733;transform:translateY(-4px)}.guide-card__number{font-size:.7rem;color:#bd8b76;font-weight:800;letter-spacing:.15em}.guide-card__symbol{font-size:2.7rem;color:var(--gold);margin:27px 0 20px;line-height:1}.guide-card h3{font-family:Manrope,sans-serif;font-size:1.18rem;margin:0 0 10px}.guide-card p{font-size:.92rem;color:#b7aba6;line-height:1.65;margin:0}.feature{background:linear-gradient(110deg,#c4210c,#a80e08 63%,#660b08);position:relative;overflow:hidden}.feature::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(125deg,transparent 0 67px,rgba(255,255,255,.05) 68px,transparent 69px)}.feature__inner{position:relative;display:grid;grid-template-columns:1fr .75fr;align-items:center;gap:80px}.feature .section-kicker{color:#ffd17d}.feature h2 span{color:#ffd2bd}.feature h2{margin-bottom:22px}.feature p:not(.section-kicker){max-width:470px;line-height:1.75;color:#ffe4d9;margin-bottom:27px}.button--light{background:var(--paper);color:#51110d}.button--light:hover{background:#fff}.feature__side{height:280px;border:1px solid #ffffff55;display:flex;align-items:center;justify-content:center;position:relative;background:#ffffff0a}.feature__side>span{font-family:Manrope,sans-serif;font-size:clamp(8rem,18vw,16rem);font-weight:800;letter-spacing:-.16em;margin-right:.16em;line-height:1;color:#ffffff17}.feature__side small{position:absolute;bottom:18px;right:22px;letter-spacing:.2em;font-size:.65rem;font-weight:800}.faq{background:var(--paper);color:#151313}.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.faq__hint{color:#6f6460;margin-top:19px}.faq__items{border-top:1px solid #c9c0ba}.faq details{border-bottom:1px solid #c9c0ba}.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:1rem;font-weight:800}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--red);font-size:1.5rem;font-weight:400;line-height:1;transition:transform .2s}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{color:#655b57;line-height:1.75;max-width:600px;margin:0 0 22px}.footer{background:#0b0b0b}.footer__top{padding-block:55px;display:flex;justify-content:space-between;gap:40px;align-items:center}.footer__top p{max-width:300px;color:#a99d98;line-height:1.6;margin:0}.footer__bottom{border-top:1px solid #292422;padding-block:22px;display:flex;justify-content:space-between;gap:20px;color:#a99d98;font-size:.78rem}.footer__bottom a:hover{color:var(--gold)}
@media(max-width:1000px){.hero__grid{grid-template-columns:1fr .8fr;gap:10px}.hero__art{min-height:390px}.intro__grid,.faq__grid{gap:50px}h1{font-size:clamp(3.05rem,5vw,4.5rem)}}
@media(max-width:800px){.container{width:min(100% - 36px,640px)}.header-inner{min-height:68px}.brand img{width:175px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:43px;height:43px;padding:10px;border:1px solid #56413a;background:transparent;border-radius:3px}.menu-toggle span{width:100%;height:2px;background:#fff}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#12100f;border-bottom:1px solid #4d2720;padding:20px max(18px,calc((100vw - 640px)/2));align-items:stretch;flex-direction:column;gap:0;box-shadow:0 25px 30px #0008}.nav.is-open{display:flex}.nav a{padding:14px 4px}.nav .nav__action{margin-top:8px;padding:14px}.hero__grid{grid-template-columns:1fr;padding-block:70px 55px;gap:58px}.hero__copy{max-width:650px}h1{font-size:clamp(3.1rem,9vw,5.4rem)}.hero__art{min-height:430px}.hero__frame{width:min(77%,380px)}.hero__edge{left:4%}.section{padding-block:78px}.intro__grid,.faq__grid,.feature__inner{grid-template-columns:1fr;gap:30px}.intro__body{padding-top:0}.feature__side{display:none}.section-heading{align-items:start;flex-direction:column;gap:14px}.guide__grid{grid-template-columns:1fr}.guide-card{min-height:0}.guide-card__symbol{margin:20px 0 14px}.footer__top{align-items:start;flex-direction:column;gap:20px}}
@media(max-width:480px){.announcement{font-size:.67rem;gap:7px}.announcement__mark{display:none}.hero__grid{padding-block:55px 45px;gap:42px}h1{white-space:normal;font-size:clamp(3.1rem,13vw,4.3rem)}.hero__lede{font-size:1rem}.hero__actions{gap:23px}.hero__art{min-height:315px}.hero__frame{width:min(83%,285px);padding:17px}.hero__monogram{font-size:6rem}.hero__frame p{font-size:2rem}.frame-index,.frame-caption{font-size:.55rem}.hero__edge{font-size:.52rem;padding:10px;left:0;bottom:0}.hero__bottom{font-size:.57rem}.section h2{font-size:2.6rem}.footer__bottom{flex-direction:column}.footer__top{padding-block:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Banner dan ikon bisa diganti tanpa mengubah tata letak. */
.hero__frame{aspect-ratio:1;padding:0;transform:rotate(-2deg);background:#310d0b}.hero__frame::before,.hero__frame::after{display:none}.hero__frame img{width:100%;height:100%;object-fit:cover}.games{background:#171312}.games .section-kicker{color:var(--gold)}.games__notice{display:flex;align-items:flex-start;gap:14px;border:1px solid #74573c;background:#33251b;padding:16px 18px;margin-bottom:22px;color:#efdfcb}.games__notice p{margin:0;font-size:.86rem;line-height:1.6}.games__notice strong{color:#fff}.games__notice-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:8px}.games__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.game-card{background:#221d1b;border:1px solid #453832;padding:22px;border-radius:7px}.game-card__head{display:flex;align-items:center;gap:15px;min-width:0}.game-card__head img{flex:none;width:64px;height:64px;object-fit:cover;aspect-ratio:1;border-radius:12px;background:#48261e;border:1px solid #735345}.game-card__head h3{font-family:Manrope,sans-serif;font-size:1.05rem;margin:0 0 3px}.game-card__head p{color:#b5a49c;font-size:.82rem;line-height:1.4;margin:0}.game-card__meter-label{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:26px 0 10px;color:#bfb0a8;font-size:.81rem}.game-card__meter-label strong{font-family:Manrope,sans-serif;font-size:1.35rem;color:#ffca78;font-variant-numeric:tabular-nums}.game-card__track{height:10px;border-radius:20px;overflow:hidden;background:#4c3832}.game-card__fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#a91b0b,#f8a201);transition:width .5s ease}.games__updated{text-align:right;color:#b6a39b;font-size:.76rem;margin:18px 0 0}
@media(max-width:800px){.games__grid{grid-template-columns:1fr}}
@media(max-width:480px){.hero__frame{width:min(83%,285px)}.game-card{padding:17px}.game-card__head img{width:56px;height:56px}.games__updated{text-align:left}}
/* Mobile punya komposisi sendiri, bukan sekadar kolom desktop yang ditumpuk. */
.mobile-dock,.games__swipe{display:none}
@media(max-width:800px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .announcement{justify-content:center;min-height:31px}
  .site-header{background:#100e0d}
  .hero{background:linear-gradient(180deg,#2f0b08 0%,#0b0b0b 75%)}
  .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-block:0 43px}
  .hero__art{order:-1;min-height:0;width:min(100%,500px);margin-inline:auto;display:block}
  .hero__frame{display:block;width:100%;aspect-ratio:1;transform:none;box-shadow:none;border:0;border-radius:0 0 22px 22px}
  .hero__frame img{width:100%;height:100%;object-fit:cover}
  .hero__edge{left:auto;right:12px;bottom:14px;transform:none;background:#111e;backdrop-filter:blur(7px);border-color:#f8a20199}
  .hero__copy{padding-top:35px}
  .hero__bottom{display:none}
  .eyebrow{margin-bottom:17px}
  h1{white-space:normal;font-size:clamp(3.1rem,8.6vw,4.6rem)}
  .hero__lede{max-width:600px}
  .intro{border-top:1px solid #d1b8a2}
  .mobile-dock{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);min-height:70px;padding-bottom:env(safe-area-inset-bottom);background:#17100feF;backdrop-filter:blur(18px);border-top:1px solid #855341;box-shadow:0 -10px 35px #0008}
  .mobile-dock a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:68px;color:#ebd8cb;font-size:.7rem;font-weight:800;letter-spacing:.02em}
  .mobile-dock a span{display:grid;place-items:center;width:28px;height:28px;color:var(--gold);font-size:1.3rem;line-height:1}
  .mobile-dock a:focus-visible,.mobile-dock a:hover{background:#5c1c13;color:#fff}
}
@media(max-width:600px){
  .container{width:calc(100% - 36px)}
  .hero__art{width:calc(100% + 36px);margin-left:-18px;margin-right:-18px;max-width:none}
  .hero__frame{border-radius:0}
  .hero__copy{padding-top:31px}
  .hero__actions{align-items:stretch}
  .hero__actions .button{flex:1;justify-content:space-between}
  .section{padding-block:64px}
  .games{overflow:hidden}
  .games .section-heading{margin-bottom:20px}
  .games__notice{padding:13px 14px;margin-bottom:18px}
  .games__swipe{display:flex;justify-content:space-between;margin:0 0 12px;color:#f8c178;font-size:.75rem;font-weight:800;letter-spacing:.02em}
  .games__grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:18px;scrollbar-width:none;overscroll-behavior-inline:contain;width:calc(100% + 36px);margin-left:-18px;padding:0 18px 14px}
  .games__grid::-webkit-scrollbar{display:none}
  .game-card{flex:0 0 min(82vw,340px);min-height:211px;scroll-snap-align:start;border-radius:14px;box-shadow:0 12px 24px #0003}
  .games__updated{text-align:left;margin-top:3px}
  .guide__grid{gap:10px}
  .guide-card{display:grid;grid-template-columns:38px 1fr;gap:2px 14px;padding:20px;border-radius:9px}
  .guide-card__number{grid-row:1 / span 2;padding-top:4px}
  .guide-card__symbol{display:none}
  .guide-card h3{margin:0 0 5px}
  .guide-card p{grid-column:2}
  .feature{background:linear-gradient(145deg,#d0270c,#8a0d08)}
  .faq summary{padding:19px 0}
}
@media(max-width:380px){.announcement a{display:none}.hero__copy h1{font-size:2.85rem}.hero__edge{font-size:.46rem;right:8px;bottom:10px}.mobile-dock a{font-size:.65rem}}
/* Dua jalur akses eksternal, selalu sama lebar pada desktop dan mobile. */
.access-bar{background:#130f0e;border-bottom:1px solid #3b2823}
.access-bar__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-block:13px}
.access-bar__button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:12px 42px;color:#fff;font-family:Manrope,'DM Sans',Arial,sans-serif;font-weight:800;font-size:.94rem;letter-spacing:.04em;text-align:center;text-transform:uppercase;border-radius:5px;transition:transform .2s,filter .2s,background .2s}
.access-bar__button:hover{transform:translateY(-2px);filter:brightness(1.12)}
.access-bar__button span{position:absolute;right:19px;font-size:1.15rem;line-height:1;font-weight:500}
.access-bar__button--login{background:#251a17;border:1px solid #a44e3b}
.access-bar__button--register{background:linear-gradient(100deg,#e8a01e,#ffd272);border:1px solid #ffd272;color:#21120a;box-shadow:0 6px 22px #f8a20124}
@media(max-width:800px){.access-bar__inner{gap:9px;padding-block:10px}.access-bar__button{min-height:49px;font-size:.88rem;padding-inline:30px}.access-bar__button span{right:12px}}
@media(max-width:380px){.access-bar__inner{gap:7px}.access-bar__button{min-height:46px;font-size:.8rem}.access-bar__button span{right:9px;font-size:1rem}}