/* =====================================================================
   Latih Si Kecil — tampilan baru (v2). Dimuat setelah app.css.
   Gaya: latar aurora lembut, kartu kaca, satu kartu utama yang menonjol.
   ===================================================================== */
:root {
  --v-ink: #1f1b2e; --v-soft: #7b7690; --v-coral: #FF7A6B; --v-lav: #8C7BF5; --v-mint: #2fbf98; --v-sun: #F7B731;
  --v-grad: linear-gradient(120deg, #FF7A6B, #F0657F 50%, #9B8CFF);
  --v-aur: radial-gradient(circle 560px at 0% 0%, rgba(255,122,107,.24), transparent), radial-gradient(circle 560px at 100% 8%, rgba(140,123,245,.26), transparent), radial-gradient(circle 560px at 88% 100%, rgba(47,191,152,.18), transparent), radial-gradient(circle 460px at 6% 100%, rgba(247,183,49,.18), transparent), #fbf9ff;
  --v-glass: rgba(255,255,255,.74);
}
body { font-family: 'Plus Jakarta Sans', Nunito, system-ui, sans-serif; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
.aur { background: var(--v-aur); }
.glass { background: var(--v-glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 12px 34px rgba(60,40,120,.08), inset 0 0 0 1.5px rgba(255,255,255,.95); }
.btn { border-radius: 999px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.01em; }
.btn.primary { background: var(--v-grad); border-color: transparent; box-shadow: 0 12px 24px -10px rgba(240,101,127,.6); }
.btn.dark { background: var(--v-ink); border-color: var(--v-ink); color: #fff; }
.btn.white { background: #fff; border-color: #fff; color: var(--v-ink); box-shadow: 0 6px 16px rgba(60,40,120,.12); }
.btn.grad { background: var(--v-grad); border-color: transparent; color: #fff; box-shadow: 0 14px 28px -10px rgba(240,101,127,.6); }

/* ---------- HALAMAN DEPAN ---------- */
.lp2 { color: var(--v-ink); overflow-x: hidden; padding-bottom: 76px; }
.lp2 .w { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .lp2 .w.narrow { max-width: 760px; }
.lp2 .grow { flex: 1; } .lp2 .muted { color: var(--v-soft); } .lp2 .c { text-align: center; }
.lp2-nav { position: sticky; top: 14px; z-index: 40; max-width: 1100px; margin: 14px auto 0; padding: 10px 12px 10px 22px; border-radius: 999px; display: flex; align-items: center; gap: 8px; }
.lp2-nav .logo { font: 600 21px Fredoka, sans-serif; color: var(--v-coral); text-decoration: none; display: flex; gap: 8px; align-items: center; }
.lp2-nav .logo i { font-style: normal; }
.lp2-nav .lnk { text-decoration: none; font-weight: 700; font-size: 14px; color: var(--v-soft); padding: 8px 12px; }
.lp2-nav .lnk:hover { color: var(--v-ink); }
.lp2-nav .btn.sm { padding: 9px 16px; font-size: 14px; border-radius: 999px; }
.lp2-hero { margin-top: -78px; padding: 150px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.chip2 { display: inline-block; background: var(--v-glass); border-radius: 999px; padding: 8px 14px; font: 800 13px 'Plus Jakarta Sans'; box-shadow: inset 0 0 0 1.5px #fff; }
.lp2-hero h1 { font: 800 clamp(38px, 5.6vw, 66px)/1.02 'Plus Jakarta Sans', sans-serif; letter-spacing: -.05em; margin: 18px 0 0; }
.lp2 em { font-style: normal; background: var(--v-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp2 .lead { font-size: 19px; color: var(--v-soft); font-weight: 600; margin: 20px 0 28px; max-width: 30em; }
.lp2-hero .btn.big { padding: 15px 26px; font-size: 16px; }
.trust { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; font-weight: 700; color: var(--v-soft); }
.hero-dev { position: relative; height: 560px; }
.dv { border-radius: 34px; background: #0d0d0f; padding: 8px; box-shadow: 0 40px 70px -26px rgba(40,30,80,.5), inset 0 0 0 2px #3a3a3e; }
.dv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 27px; }
.dv.phone { aspect-ratio: 300/650; border-radius: 32px; padding: 6px; } .dv.phone img { border-radius: 26px; }
.dv.tablet { aspect-ratio: 480/690; } .dv.tabl { aspect-ratio: 760/528; } .dv.mini { aspect-ratio: 360/518; border-radius: 26px; padding: 6px; } .dv.mini img { border-radius: 20px; }
.dv.laptop { border-radius: 16px 16px 0 0; padding: 10px 10px 12px; }
.dv.laptop img { border-radius: 8px; height: auto; }
.hero-dev .tablet { position: absolute; width: 300px; left: 50%; margin-left: -150px; top: 0; transform: rotate(-3deg); }
.hero-dev .phone { position: absolute; width: 190px; z-index: 2; }
.hero-dev .phone.a { left: -6px; top: 200px; transform: rotate(-8deg); }
.hero-dev .phone.b { right: -10px; top: 250px; transform: rotate(7deg); }
.fl { position: absolute; z-index: 3; padding: 11px 16px; font: 800 14px 'Plus Jakarta Sans'; border-radius: 18px; background: var(--v-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 26px rgba(60,40,120,.14), inset 0 0 0 1.5px #fff; animation: bob 4s ease-in-out infinite; }
.fl.f1 { left: 6px; top: 20px; } .fl.f2 { right: 0; bottom: 24px; animation-delay: -2s; }
.sec2 { padding: 84px 0; } .sec2.white { background: #fff; }
.eb { font: 800 12px 'Plus Jakarta Sans'; letter-spacing: .14em; text-transform: uppercase; color: var(--v-coral); }
.sec2 h2 { font: 800 clamp(28px, 4.2vw, 44px)/1.06 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; margin-top: 6px; text-wrap: balance; }
.sec2 .sub { color: var(--v-soft); font-weight: 600; margin-top: 10px; }
.samples2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.sm2 { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: #f7f5ff; text-decoration: none; transition: transform .15s; box-shadow: inset 0 0 0 1.5px #fff; }
.sm2:hover { transform: translateY(-3px); }
.sm2 .t { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 30px; flex: none; }
.sm2 .tx { flex: 1; min-width: 0; } .sm2 .tx b { display: block; font-size: 16px; } .sm2 .tx span { font-size: 13px; color: var(--v-soft); font-weight: 600; }
.sm2 .go { background: var(--v-ink); color: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: 14px; }
.devs { position: relative; height: 520px; margin-top: 40px; }
.devs .laptop { position: absolute; left: 20px; top: 20px; width: 560px; } .devs .laptop::after { content: ""; position: absolute; left: -44px; right: -44px; bottom: -22px; height: 20px; background: linear-gradient(#d9d9de, #9d9da6); border-radius: 0 0 22px 22px; }
.devs .tabl { position: absolute; left: 470px; top: 140px; width: 470px; transform: rotate(-3deg); }
.devs .phone.c { position: absolute; right: 10px; top: 60px; width: 205px; transform: rotate(5deg); }
.lv2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.lvc { border-radius: 30px; padding: 26px; position: relative; overflow: hidden; min-height: 250px; box-shadow: 0 20px 40px -20px rgba(60,40,120,.3); }
.lvc.paud { background: linear-gradient(150deg, #FFE9A8, #FFD27A); } .lvc.tk { background: linear-gradient(150deg, #CDEFE0, #9FE3C8); } .lvc.sd { background: linear-gradient(150deg, #DDD5FA, #B9ADFF); }
.lvc .e { position: absolute; right: 14px; top: 6px; font-size: 90px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.15)); }
.lvc h3 { font: 600 38px Fredoka, sans-serif; } .lvc ul { margin: 14px 0 0; padding-left: 18px; font-weight: 600; font-size: 14px; display: grid; gap: 4px; }
.bento2 { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 18px; margin-top: 34px; }
.bt { background: #f7f5ff; border-radius: 26px; padding: 24px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1.5px #fff; }
.bt h4 { font: 800 20px 'Plus Jakarta Sans'; } .bt p { font-size: 14px; color: var(--v-soft); font-weight: 600; margin: 4px 0 0; }
.bt .ic { position: absolute; right: 18px; bottom: 10px; font-size: 44px; }
.bt.big { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, #fff3ee, #f1edff); display: grid; grid-template-columns: 1fr 170px; gap: 14px; }
.bt.big h4 { font-size: 28px; } .bt.big p { font-size: 16px; } .bt.big .stk { font-size: 40px; margin-top: 22px; letter-spacing: 6px; }
.bt.big .dv { align-self: start; width: 170px; }
.steps2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.st2 { padding: 26px; border-radius: 24px; background: var(--v-glass); box-shadow: 0 12px 34px rgba(60,40,120,.08), inset 0 0 0 1.5px #fff; }
.st2 b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--v-ink); color: #fff; font: 800 18px 'Plus Jakarta Sans'; margin-bottom: 14px; }
.st2 h4 { font: 800 20px 'Plus Jakarta Sans'; } .st2 p { margin: 6px 0 0; color: var(--v-soft); font-weight: 600; }
.prices2 { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 18px; margin-top: 40px; align-items: end; }
.pc { padding: 26px; border-radius: 26px; display: flex; flex-direction: column; gap: 6px; background: #fff; box-shadow: 0 12px 34px rgba(60,40,120,.08), inset 0 0 0 1.5px #ece8f7; position: relative; }
.pc.paud { background: #fffaf0; } .pc.tk { background: #f2fbf7; } .pc.sd { background: #f6f4ff; }
.pc .e { font-size: 38px; } .pc h4 { font: 800 19px 'Plus Jakarta Sans'; }
.pc .amt { font: 800 36px/1 'Plus Jakarta Sans'; letter-spacing: -.04em; margin-top: 8px; } .pc .per { font-size: 13px; color: var(--v-soft); font-weight: 700; }
.pc ul { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; gap: 8px; font-size: 14px; font-weight: 600; flex: 1; } .pc li::before { content: "✓"; color: var(--v-mint); font-weight: 800; margin-right: 8px; }
.pc .btn { width: 100%; }
.pc.full { color: #fff; background: linear-gradient(150deg, #1f1b2e, #3a2f66); box-shadow: 0 34px 60px -24px rgba(31,27,46,.8); padding: 32px 28px; }
.pc.full .muted, .pc.full .per { color: #c9c3e6; } .pc.full li::before { color: #7df0cf; }
.pc .old { text-decoration: line-through; color: #a7a2bd; font: 700 18px 'Plus Jakarta Sans'; margin-top: 10px; } .pc.full .amt { font-size: 50px; margin-top: 2px; }
.badge2 { position: absolute; top: -14px; right: 22px; background: linear-gradient(120deg, #FF7A6B, #F7B731); color: #fff; font: 800 12px 'Plus Jakarta Sans'; padding: 7px 14px; border-radius: 99px; box-shadow: 0 10px 18px -6px rgba(255,122,107,.7); }
.faq2 { display: grid; gap: 12px; margin-top: 30px; }
.faq2 details { border-radius: 20px; padding: 18px 22px; } .faq2 summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: "＋"; color: var(--v-soft); } .faq2 details[open] summary::after { content: "－"; }
.faq2 p { margin: 10px 0 0; color: var(--v-soft); font-weight: 600; }
.cta2 { padding-bottom: 50px; }
.ctab { border-radius: 38px; padding: 64px 30px; text-align: center; color: #fff; background: radial-gradient(circle 420px at 15% 0%, rgba(255,122,107,.45), transparent), radial-gradient(circle 460px at 90% 100%, rgba(140,123,245,.55), transparent), #14111c; }
.ctab .logo2 { font: 600 28px Fredoka, sans-serif; color: #ff9a8d; } .ctab h2 { font: 800 clamp(28px, 4.4vw, 46px)/1.08 'Plus Jakarta Sans'; letter-spacing: -.04em; margin: 10px 0 24px; }
.lp2-foot { max-width: 1140px; margin: 0 auto; padding: 22px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--v-soft); font-weight: 600; border-top: 1px solid #ece8f7; }
.lp2-sticky { display: none; }

/* ---------- LOGIN ---------- */
.auth { background: var(--v-aur); }
.auth-card { background: var(--v-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 34px; box-shadow: 0 30px 60px -24px rgba(60,40,120,.3), inset 0 0 0 1.5px #fff; }
.auth-card h1 { font: 800 28px 'Plus Jakarta Sans'; letter-spacing: -.04em; }
.inp { border-radius: 16px; background: rgba(255,255,255,.9); }

/* ---------- BERANDA MEMBER ---------- */
.mapp { background: var(--v-aur); }
.mside { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 0; box-shadow: 1px 0 0 rgba(255,255,255,.9); }
.nav.on { background: var(--v-ink); color: #fff; box-shadow: 0 8px 18px rgba(31,27,46,.22); }
.plan { background: linear-gradient(135deg, #FF8E7C, #9B8CFF); color: #fff; } .plan.exp { background: linear-gradient(135deg, #F7B731, #FF7A6B); }
.card { background: var(--v-glass); border: 0; border-radius: 26px; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 12px 34px rgba(60,40,120,.08), inset 0 0 0 1.5px rgba(255,255,255,.95); }
.hi { background: linear-gradient(120deg, #FF7A6B 0%, #F0657F 45%, #9B8CFF 100%); color: #fff; border-radius: 30px; box-shadow: 0 22px 44px -16px rgba(240,101,127,.55); min-height: 196px; padding: 26px 28px; }
.hi::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% -10%, rgba(255,255,255,.35), transparent 50%); pointer-events: none; }
.hi h2 { font: 600 32px/1.1 Fredoka, sans-serif; } .hi p { opacity: .94; font-weight: 600; } .hi .btn { background: #fff; border-color: #fff; color: var(--v-ink); box-shadow: 0 8px 18px rgba(60,10,40,.2); position: relative; z-index: 1; }
.hi .art { z-index: 1; font-size: 110px; filter: drop-shadow(0 16px 18px rgba(60,10,40,.3)); }
.streak { display: inline-block; background: rgba(255,255,255,.25); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 13px; margin-bottom: 8px; position: relative; z-index: 1; }
.cc { border-radius: 28px; box-shadow: 0 14px 30px -14px rgba(60,40,120,.3); overflow: hidden; }
.cc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); pointer-events: none; }
.cc h3 { font: 600 28px Fredoka, sans-serif; position: relative; } .cc p, .cc .ring { position: relative; } .cc .ico { font-size: 56px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.14)); }
.wi { background: rgba(255,255,255,.75); border-radius: 18px; }
.st { background: rgba(255,255,255,.7); border-radius: 18px; }
.bars div { background: linear-gradient(180deg, #a99cff, #8C7BF5); } .bars div.t { background: linear-gradient(180deg, #FFB86B, #FF7A6B); }
.mobilebar { background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mobilebar a.on { background: #FFE9E4; }

/* ---------- ADMIN ---------- */
.adm { background: radial-gradient(circle 520px at 100% 0%, rgba(140,123,245,.16), transparent), radial-gradient(circle 520px at 0% 100%, rgba(47,191,152,.12), transparent), #f7f6fb; }
.aside { background: linear-gradient(180deg, #17141f, #211a38); }
.abtn { border-radius: 999px; padding: 10px 18px; background: linear-gradient(135deg, #8C7BF5, #6A5AE0); }
.abtn.g { background: #fff; border-radius: 999px; }
.kpi, .panel { border: 0; border-radius: 22px; box-shadow: 0 12px 34px rgba(60,40,120,.07), inset 0 0 0 1.5px rgba(255,255,255,.95); }
.kpis:has(.kpi.rev) { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.kpi.rev { color: #fff; background: linear-gradient(135deg, #1f1b2e, #3a2f66); box-shadow: 0 20px 40px -18px rgba(31,27,46,.7); }
.kpi.rev span { color: #c9c3e6; } .kpi.rev b { font-size: 32px; letter-spacing: -.03em; }

/* ---------- TABLET ---------- */
@media (min-width: 821px) and (max-width: 1100px) {
  .mapp, .adm { grid-template-columns: 200px 1fr; }
  .mmain { padding: 18px 18px 60px; } .hi h2 { font-size: 28px; }
  .cc h3 { font-size: 24px; } .cc .ico { font-size: 46px; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; } .lp2-hero { padding-top: 130px; }
  .hero-dev { max-width: 520px; width: 100%; margin: 0 auto; height: 520px; }
  .samples2, .lv2, .steps2 { grid-template-columns: 1fr; }
  .bento2 { grid-template-columns: 1fr 1fr; } .prices2 { grid-template-columns: 1fr 1fr; }
  .devs { height: 460px; } .devs .laptop { width: 460px; } .devs .tabl { left: 380px; width: 400px; top: 120px; } .devs .phone.c { width: 170px; }
  .kpis:has(.kpi.rev) { grid-template-columns: 1fr 1fr; } .kpi.rev { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .lp2-nav .lnk { display: none; } .lp2-nav { margin: 10px 12px 0; }
  .lp2 .w { padding: 0 18px; } .sec2 { padding: 56px 0; }
  .hero-dev { height: 440px; } .hero-dev .tablet { width: 230px; margin-left: -115px; } .hero-dev .phone { width: 140px; } .hero-dev .phone.a { top: 150px; } .hero-dev .phone.b { top: 190px; }
  .lp2-nav { padding: 8px 8px 8px 14px; gap: 6px; } .lp2-nav .logo { white-space: nowrap; font-size: 17px; } .lp2-nav .logo i { font-size: 20px; }
  .lp2-nav .btn.sm { padding: 8px 12px; font-size: 13px; }
  .devs { height: 400px; } .devs .laptop { display: none; } .devs .tabl { left: 0; width: 300px; top: 70px; } .devs .phone.c { width: 150px; right: 0; top: 10px; }
  .bento2 { grid-template-columns: 1fr; grid-auto-rows: auto; } .bt { min-height: 150px; } .bt.big { grid-column: auto; grid-row: auto; grid-template-columns: 1fr 120px; } .bt.big .dv { width: 120px; }
  .prices2 { grid-template-columns: 1fr; } .pc.full { order: -1; }
  .lp2 { padding-bottom: 96px; }
  .lp2-sticky { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(31,27,46,.22), inset 0 0 0 1.5px #fff; }
  .lp2-sticky small { display: block; font-size: 11px; color: var(--v-soft); font-weight: 700; } .lp2-sticky b { font-size: 18px; } .lp2-sticky b small { display: inline; font-size: 12px; }
  .lp2-sticky .btn { padding: 13px 20px; }
  .hi h2 { font-size: 26px; }
}

/* ---------- CHECKOUT & HASIL PEMBAYARAN ---------- */
.pay-card { width: min(480px, 100%) !important; }
.pay-card .back { float: left; text-decoration: none; font-weight: 700; font-size: 14px; }
.pay-card form { margin-top: 6px; } .pay-card .owl { clear: both; }
.paysum { clear: both; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; margin: 18px 0 8px; border-radius: 22px; background: linear-gradient(150deg, #1f1b2e, #3a2f66); color: #fff; box-shadow: 0 20px 40px -20px rgba(31,27,46,.7); }
.paysum .e { font-size: 38px; } .paysum .tx { flex: 1; min-width: 0; } .paysum b { display: block; font-size: 17px; } .paysum span { font-size: 12px; opacity: .75; font-weight: 600; }
.paysum .amt { font: 800 22px 'Plus Jakarta Sans'; letter-spacing: -.03em; }
.sep-line { font: 800 12px 'Plus Jakarta Sans'; letter-spacing: .12em; text-transform: uppercase; color: var(--v-soft); margin: 18px 0 10px; text-align: left; }
.acct { display: grid; gap: 8px; margin: 16px 0; text-align: left; }
.acct > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.5px #fff; }
.acct span { color: var(--v-soft); font-weight: 700; font-size: 13px; } .acct b { text-align: right; word-break: break-all; }
.pc .walink { display: block; text-align: center; font-size: 13px; font-weight: 700; color: var(--v-soft); text-decoration: none; margin-top: 8px; }
.pc.full .walink { color: #c9c3e6; } .pc .walink:hover { text-decoration: underline; }
.paysum .amt { white-space: nowrap; font-size: 20px; } .paysum b { font-size: 16px; }

.pc .btn.dark { width: 100%; }

/* ---------- CHAT MELAYANG & KONTAK ---------- */
.chatw { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: 'Plus Jakarta Sans', sans-serif; }
body.has-sticky .chatw { bottom: calc(16px + env(safe-area-inset-bottom)); }
.chatfab { display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 14px 20px; border-radius: 999px; background: var(--v-grad); color: #fff; font: 800 15px 'Plus Jakarta Sans'; box-shadow: 0 16px 34px -10px rgba(240,101,127,.7); }
.chatfab i { font-style: normal; font-size: 20px; }
.chatp { width: min(340px, calc(100vw - 32px)); border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(31,27,46,.45), 0 0 0 1px rgba(31,27,46,.06); animation: up .2s ease; }
.chatp[hidden] { display: none; }
.chath { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: #fff; background: linear-gradient(120deg, #FF7A6B, #F0657F 50%, #9B8CFF); }
.chath .av { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 20px; }
.chath div { flex: 1; min-width: 0; } .chath b { display: block; font-size: 15px; } .chath div span { font-size: 12px; opacity: .9; font-weight: 600; }
.chath .x { border: 0; background: rgba(255,255,255,.2); color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.chatb { padding: 16px 16px 6px; background: #faf8ff; display: grid; gap: 12px; }
.chatb .bub { background: #fff; border-radius: 18px 18px 18px 6px; padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--v-ink); box-shadow: 0 4px 12px rgba(60,40,120,.08); }
.qs { display: grid; gap: 8px; padding-bottom: 10px; }
.qs a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: #fff; text-decoration: none; color: var(--v-ink); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1.5px #ece8f7; }
.qs a:hover { box-shadow: inset 0 0 0 1.5px var(--v-coral); } .qs a i { font-style: normal; font-size: 18px; } .qs a em { margin-left: auto; font-style: normal; color: var(--v-soft); }
.chatf { display: block; text-align: center; padding: 12px; font-weight: 800; font-size: 13px; color: var(--v-soft); text-decoration: none; border-top: 1px solid #ece8f7; }
.kontak .qs { margin-top: 6px; text-align: left; } .kontak .qs.big a { padding: 14px 16px; }
@media (max-width: 720px) { body.has-sticky .chatw { bottom: calc(92px + env(safe-area-inset-bottom)); } .chatfab span { display: none; } .chatfab { padding: 14px 16px; } }

/* ---------- HALAMAN KEBIJAKAN ---------- */
.legal-wrap { align-items: start; padding-top: 32px; padding-bottom: 60px; }
.auth-card.legal { width: min(780px, 100%); text-align: left; padding: 34px 38px; }
.legal .back { text-decoration: none; font-weight: 700; font-size: 14px; }
.legal h1 { font: 800 clamp(26px, 4vw, 34px)/1.1 'Plus Jakarta Sans'; letter-spacing: -.04em; margin: 14px 0 4px; }
.legal .upd { font-size: 13px; margin: 0 0 14px; } .legal .intro { font-weight: 600; color: var(--v-ink); }
.legal h2 { font: 800 17px 'Plus Jakarta Sans'; letter-spacing: -.02em; margin: 24px 0 6px; }
.legal .lb { color: #433f55; font-size: 15px; line-height: 1.65; } .legal .lb ul { margin: 6px 0; padding-left: 20px; display: grid; gap: 6px; } .legal .lb a, .legal .intro a { color: #E8604E; font-weight: 700; }
.legal-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid #ece8f7; }
.legal-nav a { padding: 8px 14px; border-radius: 999px; background: #f3f0fb; color: var(--v-ink); font-weight: 700; font-size: 13px; text-decoration: none; } .legal-nav a.on { background: var(--v-ink); color: #fff; }
.lp2-foot span:last-child { display: flex; gap: 6px 14px; flex-wrap: wrap; } .lp2-foot a { color: inherit; }
@media (max-width: 720px) { .auth-card.legal { padding: 24px 20px; } }

/* ---------- BACA & UCAPKAN (suara) ---------- */
.step-ucap { text-align: center; }
.ucap-show { display: grid; place-items: center; gap: 6px; margin: 6px 0 10px; }
.ucap-word { font: 800 44px/1.1 'Plus Jakarta Sans', Nunito, sans-serif; letter-spacing: .06em; color: var(--v-ink, #221f33); }
.ucap-word.big { font-size: clamp(110px, 24vw, 190px); letter-spacing: 0; line-height: 1; }
.ucap-ctl { display: flex; gap: 14px; justify-content: center; align-items: center; margin: 8px 0; }
.mic { width: 86px; height: 86px; border-radius: 50%; border: 0; font-size: 38px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #FF8A7A, #E8604E); box-shadow: 0 10px 26px rgba(232, 96, 78, .4); }
.mic.on { animation: micp 1s infinite; background: linear-gradient(135deg, #7CC6FE, #4C8DF6); }
@keyframes micp { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 141, 246, .5); } 50% { box-shadow: 0 0 0 22px rgba(76, 141, 246, 0); } }
.ucap-st { min-height: 22px; color: #6b6785; font-weight: 600; margin: 6px 0; }
.ucap-par { margin-top: 6px; opacity: .85; } .ucap-par .btn { font-size: 13px; }
.pr-ucap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .pr-ucap .pu { border: 2px dashed #bbb; border-radius: 14px; padding: 12px; text-align: center; } .pr-ucap .pw { font: 800 44px Nunito, sans-serif; letter-spacing: .06em; } .pr-ucap .pc { font-size: 12px; color: #555; margin-top: 6px; }

/* ---------- ADMIN: GAMBAR SOAL ---------- */
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.icard { border: 1.5px solid #ece8f7; border-radius: 14px; padding: 10px; display: grid; gap: 6px; background: #fff; text-align: center; }
.icard.rep { border-color: #8EDCB5; background: #f2fbf6; }
.icard .ipic { height: 76px; display: grid; place-items: center; font-size: 52px; line-height: 1; }
.icard .ipic img { max-width: 76px; max-height: 76px; object-fit: contain; border-radius: 8px; }
.icard .imeta { font-size: 11.5px; color: #6b6785; display: grid; gap: 1px; } .icard .imeta b { color: #1C7A4E; }
.icard .iact { display: flex; gap: 4px; justify-content: center; }

/* ---------- LABEL KURIKULUM ---------- */
.wc .kur { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; margin: 4px 0 2px; font-size: 11.5px; line-height: 1.3; }
.wc .kur span { font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #EEF4FF; color: #2F5FB3; }
.wc .kur.k-merdeka span { background: #E7F7EF; color: #1C7A4E; } .wc .kur.k-k13 span { background: #FFF1DD; color: #9A5B00; } .wc .kur.k-pengayaan span { background: #F3F0FB; color: #6A5AE0; }
.wc .kur small { color: #8a86a0; font-weight: 600; } .wc .kur small.n { flex-basis: 100%; color: #9A5B00; }
.kurchips { align-items: center; }