/* SYNTRAKA — tema sinematik global. Dimuat paling akhir agar seluruh halaman seragam. */
:root{
  --cinema-bg:#030b18;
  --cinema-bg-2:#061426;
  --cinema-panel:#0a1b31;
  --cinema-panel-2:#102544;
  --cinema-line:rgba(96,181,255,.24);
  --cinema-text:#f4f8ff;
  --cinema-muted:#afc3dc;
  --cinema-cyan:#54dcff;
  --cinema-blue:#348cff;
  --cinema-violet:#765cf5;
}

html{background:var(--cinema-bg);color-scheme:dark;scroll-behavior:smooth}
body,.game-page{
  color:var(--cinema-text);
  background:
    radial-gradient(circle at 12% 15%,rgba(27,111,210,.18),transparent 30rem),
    radial-gradient(circle at 88% 58%,rgba(106,67,226,.14),transparent 34rem),
    linear-gradient(180deg,#04101f 0%,#061426 48%,#020915 100%);
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(93,174,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(93,174,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}

/* Navigasi */
.nav-wrap{
  background:rgba(4,16,32,.84)!important;border-color:rgba(91,184,255,.28)!important;
  box-shadow:0 16px 50px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand,.nav-links a,.menu-btn{color:var(--cinema-text)!important}
.brand small{color:#82cfff!important}.brand-mark{color:#051222!important;background:linear-gradient(145deg,#58e8ff,#328cff)!important;box-shadow:0 0 24px rgba(67,202,255,.35)}
.button{background:linear-gradient(110deg,#238fe9,#6558f5)!important;color:#fff!important;border-color:rgba(105,205,255,.45)!important;box-shadow:0 12px 30px rgba(40,113,240,.22)}
.button:hover{filter:brightness(1.12);transform:translateY(-2px)}
.button-ghost{background:rgba(10,31,56,.72)!important;color:#eaf6ff!important;border-color:rgba(97,183,255,.48)!important;box-shadow:none}

/* Beranda versi HP dan transisi di bawah gambar utama desktop */
.hero{color:var(--cinema-text)}
.hero:after{background:linear-gradient(135deg,rgba(34,199,255,.12),rgba(116,86,246,.16))!important}
.hero h1,.section-head h2,.service h2,.brief-section h2,.faq h2{color:var(--cinema-text)!important}
.hero h1 span{background:linear-gradient(100deg,#62e6ff,#3f91ff 52%,#9175ff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hero .lead,.lead-small,.section-head>p,.brief-section p,.price-note{color:var(--cinema-muted)!important}
.hero-promo{background:linear-gradient(110deg,rgba(87,39,139,.55),rgba(36,95,190,.45))!important;color:#ffd7f2!important;border:1px solid rgba(188,119,255,.38);box-shadow:0 0 35px rgba(98,60,205,.16)!important}
.trust-row{border-color:var(--cinema-line)!important;color:var(--cinema-muted)}
.trust-row b{background:rgba(32,125,210,.19)!important;color:var(--cinema-cyan)!important}
.choice-band{background:#06172b!important;color:#fff!important;border-block:1px solid var(--cinema-line)}
.choice-band p{color:var(--cinema-muted)!important}.choice-band .index{color:var(--cinema-cyan)!important}
.home-cinematic #services{border-top-color:var(--cinema-line)!important}

/* Semua bagian utama */
.section,.service,.brief-section,.faq,.detail-section,.detail-section.alt,.detail-cta{
  color:var(--cinema-text);background:transparent!important;
}
#games,#pricing,.faq{position:relative}
#games:before,#pricing:before,.faq:before{
  content:"";position:absolute;left:50%;top:0;width:min(1180px,calc(100% - 32px));height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(74,181,255,.35),transparent);
}
.eyebrow,.pill{color:#62cfff!important;text-shadow:0 0 18px rgba(50,167,255,.18)}
.filters,.price-tabs{background:rgba(5,18,35,.72);border:1px solid var(--cinema-line);border-radius:999px;padding:5px;width:max-content}
.filter,.price-tab{background:transparent!important;color:#9eb8d2!important;border-color:transparent!important}
.filter.active,.price-tab.active{background:linear-gradient(110deg,#157fd7,#6053ed)!important;color:#fff!important;box-shadow:0 6px 18px rgba(44,107,230,.28)}

/* Kartu katalog */
.game-card{
  background:linear-gradient(155deg,rgba(15,39,70,.98),rgba(5,18,34,.98))!important;
  border-color:var(--cinema-line)!important;box-shadow:0 22px 65px rgba(0,0,0,.32)!important;
}
.game-info{background:transparent!important}.game-info h3,.game-info li{color:var(--cinema-text)!important}
.game-info>p{color:var(--cinema-muted)!important}.game-info a{color:var(--cinema-cyan)!important;border-color:var(--cinema-line)!important}
.game-info .game-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto;padding-top:18px;border-top:1px solid var(--cinema-line)!important}
.game-info .game-card-actions a{display:flex;align-items:center;justify-content:center;min-height:43px;padding:9px 10px;border:1px solid var(--cinema-line);border-radius:11px;text-align:center;text-decoration:none;font-size:.78rem;font-weight:850}
.game-info .game-card-actions .demo-link{color:#fff!important;background:linear-gradient(110deg,#238fe9,#6558f5);box-shadow:0 9px 24px rgba(40,113,240,.2)}
.game-info .game-card-actions a:hover{filter:brightness(1.12);transform:translateY(-1px)}
.game-card:hover{border-color:rgba(88,211,255,.58)!important;box-shadow:0 28px 75px rgba(12,73,145,.34)!important}
.play-launch{padding:34px 0;border-block:1px solid var(--cinema-line);background:linear-gradient(110deg,rgba(14,50,91,.94),rgba(28,23,91,.9))}.play-launch-grid{display:flex;align-items:center;justify-content:space-between;gap:32px}.play-launch h2{margin:0;color:var(--cinema-text);font-size:clamp(1.7rem,4vw,2.8rem)}.play-launch p:not(.eyebrow){max-width:760px;margin:10px 0 0;color:var(--cinema-muted);line-height:1.65}.play-launch .button{flex:0 0 auto}.game-visual.nusarah{display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:radial-gradient(circle at 70% 30%,rgba(54,143,233,.35),transparent 45%),linear-gradient(145deg,#061b32,#0c3150 62%,#39234f)!important}.nusarah-wordmark{align-self:center;text-align:center;color:#fff;font-family:Georgia,serif;font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:.14em;text-shadow:0 0 22px rgba(85,206,255,.35)}.nusarah-wordmark small{display:block;margin-top:8px;color:#ffc16b;font-family:Inter,system-ui,sans-serif;font-size:.58rem;letter-spacing:.16em}.game-visual.nusarah>b{align-self:flex-end;color:#7ee4ff!important}
@media(max-width:900px){.play-launch-grid{display:block}.play-launch .button{margin-top:20px}}

/* Jasa pembuatan */
.service{
  background:linear-gradient(115deg,rgba(4,19,37,.98),rgba(10,31,60,.96),rgba(26,21,68,.92))!important;
  border-block:1px solid var(--cinema-line);
}
.process{border-color:var(--cinema-line)!important}.process li{border-color:var(--cinema-line)!important}
.process h3{color:var(--cinema-text)!important}.process p{color:var(--cinema-muted)!important}.process span{color:var(--cinema-cyan)!important}

/* Harga dan promo */
.promo-badge{background:linear-gradient(110deg,#5a32c9,#176ec8)!important;color:#fff!important;border:1px solid rgba(153,190,255,.42);box-shadow:0 0 30px rgba(93,67,231,.25)!important}
.promo-terms{background:linear-gradient(110deg,rgba(55,31,104,.82),rgba(13,55,102,.86))!important;color:#e6eeff!important;border-color:rgba(151,118,255,.42)!important;box-shadow:0 18px 50px rgba(0,0,0,.24)!important}
.promo-terms span:before{background:#59dcff!important;box-shadow:0 0 10px #59dcff}
.price-panel article{
  background:linear-gradient(155deg,rgba(15,38,68,.98),rgba(5,17,32,.98))!important;
  border-color:var(--cinema-line)!important;color:var(--cinema-text)!important;box-shadow:0 22px 60px rgba(0,0,0,.3)!important;
}
.price-panel article.popular{border-color:#4e9cff!important;box-shadow:0 0 0 1px rgba(85,137,255,.3),0 25px 70px rgba(40,75,190,.24)!important}
.price-panel h3,.amount strong,.promo-amount strong{color:var(--cinema-text)!important;background:none!important;-webkit-text-fill-color:initial!important}
.price-panel article>p,.price-panel li,.amount span{color:var(--cinema-muted)!important}
.price-panel del{color:#7e91a8!important}.price-panel ul{border-color:var(--cinema-line)!important}

/* Formulir */
.brief-section{
  background:linear-gradient(135deg,#041426 0%,#071b34 56%,#181547 130%)!important;
  border-block:1px solid var(--cinema-line);
}
.brief-guide span{background:rgba(42,137,219,.12);border-color:rgba(83,198,255,.42)!important;color:var(--cinema-cyan)!important}
.mini-note{background:rgba(31,128,183,.2)!important;color:#d7f7ff!important;border:1px solid rgba(83,205,255,.2)}
.brief-form{
  background:linear-gradient(155deg,rgba(13,34,61,.98),rgba(5,17,33,.98))!important;color:var(--cinema-text)!important;
  border:1px solid var(--cinema-line);box-shadow:0 28px 80px rgba(0,0,0,.4)!important;
}
.brief-form label,.brief-form legend,.feature-picker label{color:#edf6ff!important}
.brief-form input,.brief-form select,.brief-form textarea{
  background:#071a30!important;color:#f3f8ff!important;border-color:#294d6e!important;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.18);
}
.brief-form input:focus,.brief-form select:focus,.brief-form textarea:focus{border-color:#53cfff!important;outline:2px solid rgba(83,207,255,.18)}
.brief-form ::placeholder{color:#7792ad!important;opacity:1}.feature-picker{background:rgba(5,21,40,.62);border-color:#294d6e!important}
.feature-picker legend small{color:#91abc4!important}.brief-result textarea{background:#061527!important}

/* FAQ dan kaki halaman */
.accordion details{border-color:var(--cinema-line)!important;background:rgba(8,26,48,.72)!important;border-radius:14px;margin-bottom:10px;padding-inline:20px}
.accordion summary{color:var(--cinema-text)!important}.accordion details p{color:var(--cinema-muted)!important}
footer{background:#020813!important;color:var(--cinema-muted)!important;border-top:1px solid var(--cinema-line)!important}
footer .brand,footer a{color:var(--cinema-text)!important}.copyright{border-color:var(--cinema-line)!important;color:#7892ac!important}

/* Halaman setiap game */
.game-page .nav-wrap{position:sticky}
.detail-hero{
  background:radial-gradient(circle at 82% 35%,rgba(47,121,255,.26),transparent 28rem),linear-gradient(145deg,#031022 0%,#091e39 62%,#17206c 140%)!important;
  border-bottom:1px solid var(--cinema-line);
}
.detail-heading h2,.detail-cta h2{color:var(--cinema-text)!important}
.detail-heading p,.detail-cta p{color:var(--cinema-muted)!important}
.detail-section{border-bottom:1px solid rgba(86,164,230,.12)}
.detail-section.alt{background:linear-gradient(110deg,rgba(7,25,47,.82),rgba(17,18,57,.76))!important}
.feature-grid article,.mode-card{
  background:linear-gradient(150deg,rgba(14,38,68,.96),rgba(5,18,34,.96))!important;
  border-color:var(--cinema-line)!important;box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.feature-grid h3,.mode-card h3{color:var(--cinema-text)!important}.feature-grid p,.mode-card p{color:var(--cinema-muted)!important}
.feature-grid span{color:var(--cinema-cyan)!important}
.steps article{background:linear-gradient(145deg,#0d2949,#09182c)!important;border:1px solid var(--cinema-line);box-shadow:0 16px 38px rgba(0,0,0,.22)}
.steps article:before{color:var(--cinema-cyan)!important}.steps p{color:var(--cinema-muted)!important}
.detail-cta{background:radial-gradient(circle at 50% 100%,rgba(80,73,228,.22),transparent 65%),#041120!important}
.gameplay-section{border-block:1px solid var(--cinema-line)!important}
.game-page footer p{color:var(--cinema-muted)!important}

@media(max-width:900px){
  .nav-links.open{background:rgba(4,16,32,.98)!important;border-color:var(--cinema-line)!important;box-shadow:0 20px 50px rgba(0,0,0,.45)!important}
  .home-cinematic>.nav-wrap{display:block}
  .section{padding-top:72px;padding-bottom:72px}
  .filters,.price-tabs{width:100%;border-radius:16px}
  .accordion details{padding-inline:15px}
}
@media(max-width:420px){.game-info .game-card-actions{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Rekaman gameplay asli KATTARA dan TemuKata */
.gameplay-video-shell{
  min-height:0!important;display:flex;flex-direction:column;align-items:stretch;
  background:radial-gradient(circle at 50% 28%,rgba(47,137,255,.2),transparent 36%),linear-gradient(145deg,rgba(13,34,63,.98),rgba(3,11,24,.99))!important;
}
.gameplay-video-shell .screen-bar{width:100%;margin-bottom:18px}
.gameplay-video{
  display:block;width:min(100%,390px);aspect-ratio:478/850;max-height:680px;margin:0 auto;
  object-fit:contain;background:#020711;border:1px solid rgba(103,190,255,.28);border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 35px rgba(40,123,255,.12);
}
.video-hint{margin:14px 0 0;text-align:center;color:#8fa7c1;font-size:.78rem;line-height:1.45}
@media(max-width:560px){
  .gameplay-video-shell{padding:14px!important}
  .gameplay-video{width:min(100%,340px);max-height:72vh;border-radius:15px}
  .video-hint{font-size:.72rem}
}

/* Penjelasan harga tambahan TikTok untuk game custom */
.custom-base-note{grid-column:1/-1;margin:0 0 2px;padding:14px 18px;border:1px solid rgba(83,207,255,.28);border-radius:14px;background:rgba(21,94,153,.16);color:var(--cinema-muted);font-size:.9rem}
.custom-base-note strong{color:var(--cinema-text)}
.tiktok-addons{margin-top:34px;padding:30px;border:1px solid rgba(112,164,255,.28);border-radius:26px;background:linear-gradient(145deg,rgba(13,35,65,.94),rgba(10,15,38,.96));box-shadow:0 24px 65px rgba(0,0,0,.26)}
.addon-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:22px}
.addon-heading .eyebrow{margin-bottom:8px}.addon-heading h3{margin:0;color:var(--cinema-text);font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.1}
.addon-heading>p{max-width:440px;margin:0;color:var(--cinema-muted)}
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.addon-grid article{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;padding:21px;border:1px solid var(--cinema-line);border-radius:18px;background:linear-gradient(150deg,rgba(15,42,75,.95),rgba(6,20,38,.98));overflow:hidden}
.addon-grid article.addon-complete{border-color:rgba(132,105,255,.55);background:linear-gradient(145deg,rgba(44,32,100,.82),rgba(8,29,54,.98));box-shadow:0 14px 38px rgba(79,53,205,.16)}
.addon-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(86,207,255,.3);border-radius:13px;background:rgba(41,130,215,.16);font-size:1.2rem}
.addon-grid .pill{margin:0 0 5px}.addon-grid h4{margin:0 0 6px;color:var(--cinema-text);font-size:1.08rem}.addon-grid strong{display:block;color:#69ddff;font-size:1.05rem}.addon-grid article>div>p:last-child{margin:12px 0 0;color:var(--cinema-muted);font-size:.86rem;line-height:1.55}
.bundle-saving{position:absolute;top:13px;right:-35px;width:145px;padding:6px 0;text-align:center;transform:rotate(35deg);background:linear-gradient(110deg,#8e56ff,#2b9cff);color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.03em;box-shadow:0 8px 22px rgba(67,103,255,.25)}
.bundle-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.bundle-price del{color:#788ba3;font-size:.78rem;text-decoration-color:#ff6688;text-decoration-thickness:2px}.bundle-price strong{margin:0}
.addon-totals{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:14px;border:1px solid rgba(117,92,245,.38);border-radius:14px;background:rgba(70,49,151,.16);color:var(--cinema-muted);font-size:.82rem}.addon-totals>strong{color:#e8e2ff;margin-right:4px}.addon-totals span{padding:6px 9px;border-radius:9px;background:rgba(4,17,34,.55)}.addon-totals b{color:#75e0ff}
.addon-disclaimer{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--cinema-line);color:#91a9c2;font-size:.8rem}.addon-disclaimer b{color:#dcecff}
.tiktok-form-note{margin:0;padding:12px 14px;border:1px solid rgba(84,198,255,.28);border-radius:12px;background:rgba(19,91,148,.14);color:#9fb8d1;font-size:.8rem;line-height:1.5}.tiktok-form-note strong{color:#dff5ff}
@media(max-width:900px){.addon-heading{display:block}.addon-heading>p{margin-top:12px}.addon-grid{grid-template-columns:1fr}.tiktok-addons{padding:22px}.addon-totals{align-items:stretch;flex-direction:column}}
@media(max-width:560px){.tiktok-addons{padding:18px;border-radius:20px}.addon-grid article{grid-template-columns:38px 1fr;padding:17px}.addon-icon{width:38px;height:38px}}