:root{--violet:#6657f5;--coral:#ff5574}
body{background:linear-gradient(180deg,#fbfdff 0,#fff 26%,#f7faff 55%,#fff 100%);overflow-x:hidden}
.nav-wrap{top:10px;width:min(1240px,calc(100% - 28px));margin:10px auto 0;border:1px solid rgba(177,199,226,.45);border-radius:20px;background:rgba(255,255,255,.82);box-shadow:0 14px 45px rgba(8,34,74,.08)}
.nav{height:68px;width:calc(100% - 28px)}
.brand-mark{transform:rotate(-8deg);border-radius:10px}.nav-cta{min-height:44px}
.hero{width:min(1240px,calc(100% - 40px));min-height:690px;grid-template-columns:.9fr 1.1fr;gap:46px;padding-top:74px;padding-bottom:64px}
.hero:after{content:"";position:absolute;z-index:-1;width:760px;height:580px;right:-340px;top:-100px;background:linear-gradient(135deg,rgba(36,200,255,.16),rgba(116,86,246,.12));filter:blur(2px);transform:rotate(-18deg);border-radius:120px}
.hero-promo{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:10px 16px;border-radius:999px;background:#fff0f3;color:#e7385d;text-decoration:none;font-size:.82rem;font-weight:760;box-shadow:0 10px 30px rgba(255,85,116,.1)}
.hero-promo span{font-size:1rem}.hero-promo i{font-style:normal;margin-left:5px}.hero-copy .eyebrow{margin-bottom:12px}
.hero h1{font-size:clamp(3.3rem,5.6vw,5.25rem);max-width:650px;line-height:.93}.hero .lead{max-width:570px;font-size:1.16rem}
.trust-row{gap:20px;border-top:1px solid #e1eaf4;padding-top:22px}.trust-row span{font-size:.78rem}.trust-row b{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e7f4ff;color:#1473e6;margin-right:5px}
.hero-showcase{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:1.18fr .82fr;gap:12px;min-height:520px;align-self:center}
.showcase-card{position:relative;overflow:hidden;border-radius:24px;padding:20px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.15);box-shadow:0 24px 65px rgba(4,19,45,.2);transition:transform .3s,box-shadow .3s}
.showcase-card:hover{transform:translateY(-5px);box-shadow:0 34px 80px rgba(4,19,45,.27)}
.showcase-kattara{grid-column:1/-1;background:radial-gradient(circle at 78% 10%,#244ed1 0,transparent 34%),linear-gradient(135deg,#071a39,#0b2851)}
.showcase-temukata{background:radial-gradient(circle at 90% 5%,#674de5,transparent 42%),linear-gradient(145deg,#062f42,#10204b)}
.showcase-iconica{background:radial-gradient(circle at 85% 10%,#6047cd,transparent 45%),linear-gradient(145deg,#18103f,#0d1736)}
.showcase-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.06) 50%,transparent 65%);transform:translateX(-120%);transition:.8s}.showcase-card:hover:before{transform:translateX(120%)}
.showcase-tag,.showcase-action,.showcase-link{position:relative;z-index:2;font-size:.68rem;font-weight:750}.showcase-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#dbeaff}.showcase-tag i{width:6px;height:6px;border-radius:50%;background:#ff5574;box-shadow:0 0 10px #ff5574}.event-tag{color:#ffeaa9}.showcase-action{position:absolute;right:18px;top:18px;padding:8px 12px;background:linear-gradient(110deg,#178df2,#6758f5);border-radius:999px}.showcase-link{position:absolute;bottom:15px;left:18px;color:#fff}
.showcase-card img{position:relative;z-index:1;display:block;object-fit:contain;object-position:left center}.showcase-kattara img{width:230px;max-height:70px;margin:18px 0 8px}.showcase-temukata img{width:145px;max-height:48px;margin:15px 0 9px}.showcase-iconica img{width:160px;max-height:55px;margin:16px 0 8px;filter:brightness(0) invert(1)}
.semantic-demo{position:absolute;z-index:2;right:20px;bottom:68px;width:52%;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.96);color:#0b1830;display:grid;grid-template-columns:1fr auto}.semantic-demo small{grid-column:1/-1;color:#72829a;font-size:.55rem;letter-spacing:.1em}.semantic-demo strong{font-size:.9rem}.semantic-demo em{font-style:normal;color:#176ff2;font-weight:850}
.mini-scores{position:absolute;z-index:2;left:20px;right:20px;bottom:17px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mini-scores b{padding:7px 9px;border-radius:8px;background:rgba(12,52,82,.88);font-size:.58rem;color:#aebed2}.mini-scores span{float:right;color:#fff}
.cross-grid{position:absolute;right:15px;top:66px;display:grid;grid-template-columns:repeat(5,26px);grid-template-rows:repeat(4,26px);gap:4px}.cross-grid b{display:grid;place-items:center;border-radius:6px;font-size:.65rem}.cross-grid .r{background:rgba(255,255,255,.06);color:#7588a6}.cross-grid .h{background:linear-gradient(145deg,#14d8c4,#3d78ff 60%,#7658f5);box-shadow:0 0 16px rgba(44,181,255,.45)}.showcase-temukata .showcase-link,.showcase-iconica .showcase-link{padding:6px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px}
.emoji-mini{position:absolute;right:14px;top:88px;display:flex;gap:6px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.95);font-size:1.1rem}.emoji-mini i{font-style:normal;color:#846f4a;font-size:.65rem}
.choice-band{display:none}
#games{padding-top:90px}.section-head h2{max-width:740px}.game-grid{align-items:stretch}.game-card{border:1px solid rgba(158,185,218,.34);box-shadow:0 18px 55px rgba(8,35,74,.07)}.game-card:hover{transform:translateY(-8px)}
.service{position:relative;overflow:hidden}.service:after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;right:-260px;top:-170px;background:rgba(102,87,245,.12);filter:blur(35px)}
#pricing{position:relative}.price-panel article{box-shadow:0 16px 50px rgba(8,35,74,.06)}.promo-terms{box-shadow:0 14px 40px rgba(241,177,52,.09)}
.brief-section{position:relative}.brief-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
@media(max-width:1050px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{max-width:780px}.hero-showcase{width:100%;min-height:560px}.hero h1{max-width:760px}}
@media(max-width:700px){.nav-wrap{top:6px;margin-top:6px;border-radius:16px}.hero{width:min(100% - 28px,1240px);padding-top:48px}.hero h1{font-size:clamp(2.8rem,14vw,4rem)}.hero-promo{font-size:.7rem;flex-wrap:wrap}.hero-showcase{grid-template-columns:1fr;grid-template-rows:250px 220px 220px;min-height:auto}.showcase-kattara{grid-column:auto}.semantic-demo{width:55%;bottom:64px}.showcase-temukata img,.showcase-iconica img{width:175px}.cross-grid{right:18px}.trust-row{display:grid;grid-template-columns:1fr}.mini-scores b:nth-child(3){display:none}.mini-scores{grid-template-columns:1fr 1fr}.section{padding-top:76px;padding-bottom:76px}}
@media(max-width:430px){.showcase-card{padding:16px}.showcase-action{font-size:0;width:34px;height:34px;border-radius:50%;padding:0}.showcase-action:after{content:"→";font-size:.8rem;position:absolute;inset:0;display:grid;place-items:center}.semantic-demo{right:14px;width:60%}.cross-grid{grid-template-columns:repeat(5,23px);grid-template-rows:repeat(4,23px);top:72px}.showcase-temukata img{width:120px}.showcase-iconica img{width:140px}.emoji-mini{top:88px}}

/* Cadangan untuk browser HP yang meminta halaman versi desktop. */
@media(max-device-width:900px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 .container,.hero{width:calc(100% - 28px);max-width:none}
 .nav-wrap{width:calc(100% - 12px);top:6px;margin:6px auto 0;border-radius:16px}
 .nav{width:calc(100% - 24px);height:64px;gap:10px}
 .nav-links,.nav-cta{display:none}
 .menu-btn{display:block;margin-left:auto;border:0;background:transparent;font-weight:750}
 .nav-links.open{display:flex;position:absolute;top:65px;left:6px;right:6px;background:#fff;padding:18px;flex-direction:column;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 45px rgba(8,35,74,.12)}
 .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;min-height:auto;padding:44px 0 56px}
 .hero-copy{min-width:0}
 .hero h1{font-size:clamp(2.65rem,13vw,4rem);line-height:.96;max-width:100%}
 .hero .lead{font-size:1rem}
 .hero-promo{font-size:.7rem;flex-wrap:wrap;margin-bottom:18px}
 .hero-actions{flex-direction:column}
 .hero-actions .button{width:100%}
 .trust-row{display:grid;grid-template-columns:1fr;gap:10px}
 .hero-showcase{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:250px 220px 220px;min-height:auto}
 .showcase-kattara{grid-column:auto}
 .showcase-card{min-width:0}
 .semantic-demo{width:58%;right:14px}
 .mini-scores{grid-template-columns:1fr 1fr}.mini-scores b:nth-child(3){display:none}
 .choice-grid,.service-grid,.brief-grid,.faq{grid-template-columns:minmax(0,1fr)}
 .game-grid,.price-panel.active{grid-template-columns:minmax(0,1fr)}
 .game-card:last-child,.price-panel article:last-child{grid-column:auto}
 .section-head{align-items:start;flex-direction:column;gap:15px}
 .service-grid,.brief-grid,.faq{gap:42px}
 .brief-form{grid-template-columns:minmax(0,1fr)}
 .brief-form label,.brief-form .wide{grid-column:1}
 .footer-grid{grid-template-columns:minmax(0,1fr)}
 .footer-grid>p{grid-column:auto}
 .filters,.price-tabs{max-width:100%;overflow:auto}
}
.mobile-device body{width:100%;max-width:100%;overflow-x:hidden}
.mobile-device .container,.mobile-device .hero{width:calc(100% - 28px);max-width:none}
.mobile-device .nav-links,.mobile-device .nav-cta{display:none}
.mobile-device .menu-btn{display:block;margin-left:auto}
.mobile-device .hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding-top:44px}
.mobile-device .hero-showcase{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:250px 220px 220px}
.mobile-device .showcase-kattara{grid-column:auto}
.mobile-device .game-grid,.mobile-device .price-panel.active{grid-template-columns:minmax(0,1fr)}
.mobile-device .game-card:last-child,.mobile-device .price-panel article:last-child{grid-column:auto}
.mobile-device .choice-grid,.mobile-device .service-grid,.mobile-device .brief-grid,.mobile-device .faq{grid-template-columns:minmax(0,1fr)}
.mobile-device .section-head{align-items:start;flex-direction:column;gap:15px}
.mobile-device .brief-form{grid-template-columns:minmax(0,1fr)}
.mobile-device .brief-form label,.mobile-device .brief-form .wide{grid-column:1}
.mobile-device .footer-grid{grid-template-columns:minmax(0,1fr)}
.mobile-device .footer-grid>p{grid-column:auto}

.cinematic-landing{display:none}
@media(min-width:901px){
 .home-cinematic{background:#061426}
 .home-cinematic>.nav-wrap,.home-cinematic .hero,.home-cinematic #games,.home-cinematic .whatsapp-float{display:none}
 .cinematic-landing{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#061426;overflow:hidden}
 .cinematic-landing>img{display:block;width:100%;height:100%;object-fit:cover}
 .cinematic-hotspot{position:absolute;z-index:3;display:block;border-radius:12px}
 .cinematic-hotspot:focus-visible{outline:3px solid #5fe3ff;outline-offset:3px;background:rgba(56,207,255,.12)}
 .cinematic-brand{left:4.5%;top:2.2%;width:22%;height:7%}
 .cinematic-nav-catalog{left:28.5%;top:2.2%;width:6.5%;height:7%}
 .cinematic-nav-custom{left:35.2%;top:2.2%;width:9%;height:7%}
 .cinematic-nav-price{left:44.8%;top:2.2%;width:5.5%;height:7%}
 .cinematic-nav-faq{left:50.6%;top:2.2%;width:5%;height:7%}
 .cinematic-nav-offer{left:79.7%;top:2.3%;width:14.2%;height:6.3%}
 .cinematic-promo{left:7%;top:43.4%;width:27.7%;height:6.3%}
 .cinematic-anchor{position:absolute;left:0;top:57%;width:1px;height:1px}
 .cinematic-kattara{left:3.9%;top:60.2%;width:30.6%;height:35.8%}
 .cinematic-temukata{left:35.7%;top:60.2%;width:28.6%;height:35.8%}
 .cinematic-iconica{left:65.6%;top:60.2%;width:30.4%;height:35.8%}
 .home-cinematic #services{border-top:1px solid #17334f}
}

/* Versi desktop yang mengikuti mockup final SYNTRAKA. */
@media(min-width:1051px){
 .nav-wrap{width:min(1520px,calc(100% - 36px));background:rgba(255,255,255,.9)}
 .hero{width:min(1520px,calc(100% - 76px));min-height:720px;grid-template-columns:.9fr 1.1fr;gap:64px;padding-top:76px;padding-bottom:66px}
 .hero-showcase{grid-template-columns:1.12fr .88fr;grid-template-rows:1.18fr .82fr;gap:14px;min-height:570px;position:relative}
 .hero-showcase:after{content:"Dari penonton,\A jadi pemain nyata.";white-space:pre;position:absolute;right:-108px;top:118px;color:#3153a0;font-family:cursive;font-size:.84rem;font-style:italic;line-height:1.35;transform:rotate(-6deg)}
}
.showcase-kattara img{width:285px;max-height:105px;margin:12px 0 0;object-position:center}
.showcase-temukata img{width:190px;max-height:62px;margin:18px 0 5px}
.showcase-iconica img{width:210px;max-height:66px;margin:18px 0 5px}
.showcase-tagline{position:absolute;z-index:2;left:22px;top:145px;margin:0;color:#8cece2;font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.kattara-play{position:absolute;z-index:2;left:35%;right:20px;bottom:23px;top:82px;display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:end}
.kattara-play .semantic-demo{position:relative;right:auto;bottom:auto;width:auto;padding:15px 16px;border-radius:14px;box-shadow:0 16px 35px rgba(0,0,0,.18)}
.rank-board{display:grid;gap:5px;padding:12px;border:1px solid rgba(122,204,255,.27);border-radius:14px;background:rgba(5,25,55,.84)}
.rank-board>small{color:#82a7ce;font-size:.53rem;letter-spacing:.1em}.rank-board b{display:grid;grid-template-columns:22px 1fr auto;gap:5px;align-items:center;padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.055);font-size:.58rem}.rank-board i{font-style:normal;color:#58d6ff}.rank-board span{color:#fff}
.showcase-description{position:relative;z-index:2;max-width:145px;margin:0;color:#c6d7ea;font-size:.7rem;line-height:1.35}
.cross-grid{right:18px;top:62px;grid-template-columns:repeat(5,30px);grid-template-rows:repeat(4,30px);gap:5px}
.cross-grid b{border-radius:7px;font-size:.7rem}
.emoji-mini{right:18px;top:92px;padding:13px 15px;border-radius:13px;font-size:1.25rem;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.showcase-temukata .showcase-link,.showcase-iconica .showcase-link{padding:7px 11px}
@media(min-width:1051px) and (max-width:1320px){.hero{width:min(1240px,calc(100% - 42px));gap:38px}.hero-showcase:after{display:none}.kattara-play{left:32%}.cross-grid{grid-template-columns:repeat(5,27px);grid-template-rows:repeat(4,27px)}}
@media(max-width:700px), (max-device-width:900px){
 .hero-showcase,.mobile-device .hero-showcase{grid-template-rows:290px 230px 230px}
 .showcase-kattara img,.mobile-device .showcase-kattara img{width:190px;max-height:82px}
 .showcase-tagline,.mobile-device .showcase-tagline{top:122px}
 .kattara-play,.mobile-device .kattara-play{left:16px;right:16px;top:158px;bottom:18px;grid-template-columns:1fr .72fr}
 .rank-board{padding:8px;gap:3px}.rank-board b{padding:4px 5px}
 .cross-grid{grid-template-columns:repeat(5,24px);grid-template-rows:repeat(4,24px);top:72px}
 .showcase-temukata img{width:125px}.showcase-iconica img{width:145px}
 .showcase-description{max-width:120px;font-size:.63rem}
}