/* ============================================================
   KOPI DAKAS - Welcome Page (onboarding sebelum halaman utama)
   Semua class/id berawalan "kdw" supaya tidak bentrok dengan
   index.html, extra.css, dan revision.css
   ============================================================ */

html.kdw-open,html.kdw-open body{overflow:hidden}

#kdw{position:fixed;inset:0;z-index:98;background:#e6e8f6;display:flex;justify-content:center;transition:opacity .35s ease}
#kdw.out{opacity:0;pointer-events:none}

.kdw-st{position:relative;width:100%;max-width:480px;height:100%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle at 20% 12%,rgba(255,255,255,.18),transparent 45%),linear-gradient(160deg,#0000E7 0%,#2a3dff 55%,#5b94ff 100%)}

/* ---------- Track gambar + chip ---------- */
.kdw-tr{position:absolute;inset:0;display:flex;will-change:transform;transition:transform .45s cubic-bezier(.22,.8,.26,1)}
.kdw-tr.drag,.kdw-ct.drag{transition:none}
.kdw-sl{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.kdw-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none;-webkit-user-drag:none}

/* tampilan cadangan kalau welcome1/2/3.png belum ada */
.kdw-fb{position:absolute;left:0;right:0;top:15%;display:none;justify-content:center;pointer-events:none}
.kdw-fb img{height:54px;width:auto}
.kdw-sl.noimg .kdw-fb{display:flex}

/* gradasi putih di bawah gambar tempat teks berada */
.kdw-fd{position:absolute;left:0;right:0;bottom:0;height:56%;pointer-events:none;
  background:linear-gradient(to top,#fff 60%,rgba(255,255,255,.92) 72%,rgba(255,255,255,0))}

/* ---------- Chip melayang ---------- */
.kdw-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 15px 10px 11px;background:#fff;border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,70,.2);color:#0a0a55;font-size:14.5px;font-weight:700;line-height:1.15;white-space:nowrap;
  opacity:0;transform:translateY(10px) scale(.94)}
.kdw-chip svg{width:22px;height:22px;stroke:#0000E7;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kdw-chip.c1{left:5%;top:34%}
.kdw-chip.c2{right:4%;top:34%}
.kdw-chip.c3{left:10%;top:42%}
.kdw-chip.c4{right:8%;top:42%}
.kdw-sl.on .kdw-chip{animation:kdwPop .5s cubic-bezier(.22,.9,.3,1.2) forwards}
.kdw-sl.on .kdw-chip.c2{animation-delay:.08s}
.kdw-sl.on .kdw-chip.c3{animation-delay:.16s}
.kdw-sl.on .kdw-chip.c4{animation-delay:.24s}
@keyframes kdwPop{to{opacity:1;transform:none}}

/* ---------- Panel bawah: titik, teks, tombol ---------- */
.kdw-pn{position:absolute;left:0;right:0;bottom:0;padding:0 24px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.kdw-dots{display:flex;gap:9px;align-items:center;margin-bottom:22px}
.kdw-dots button{width:9px;height:9px;border-radius:50%;background:rgba(0,0,231,.28);padding:0;transition:width .3s,background .3s}
.kdw-dots button.on{width:26px;border-radius:9px;background:#0000E7}

.kdw-cv{width:calc(100% + 48px);margin:0 -24px;overflow:hidden;min-height:132px}
.kdw-ct{display:flex;will-change:transform;transition:transform .45s cubic-bezier(.22,.8,.26,1)}
.kdw-cp{flex:0 0 100%;padding:0 28px;text-align:center}
.kdw-cp h2{font-size:25px;line-height:1.2;font-weight:800;color:#0000E7;padding:0 0 10px;letter-spacing:-.2px}
.kdw-cp p{font-size:15.5px;line-height:1.5;color:#26283f}

.kdw-go{width:100%;height:56px;margin-top:22px;border-radius:30px;background:#0000E7;color:#fff;font-size:18px;font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,231,.32);transition:transform .15s,box-shadow .15s}
.kdw-go:active{transform:scale(.97);box-shadow:0 4px 12px rgba(0,0,231,.3)}
.kdw-sk{margin-top:6px;padding:14px 18px;font-size:16px;font-weight:700;color:#0000E7}
.kdw-sk:active{opacity:.6}
.kdw-go.kdw-solo{margin-bottom:14px}

#kdw button:focus-visible{outline:3px solid #5b94ff;outline-offset:3px}

/* layar pendek (HP kecil / landscape): rapatkan jarak */
@media (max-height:700px){
  .kdw-cp h2{font-size:22px;padding-bottom:6px}
  .kdw-cp p{font-size:14.5px}
  .kdw-cv{min-height:112px}
  .kdw-dots{margin-bottom:14px}
  .kdw-go{height:50px;margin-top:14px}
  .kdw-chip{font-size:13px;padding:8px 12px 8px 9px}
  .kdw-chip.c1,.kdw-chip.c2{top:30%}
  .kdw-chip.c3,.kdw-chip.c4{top:38%}
}

@media (prefers-reduced-motion:reduce){
  .kdw-tr,.kdw-ct,#kdw{transition:none}
  .kdw-sl.on .kdw-chip{animation:none;opacity:1;transform:none}
}