/* ═══════════════════════════════════════════════════════════
   kenalan.css — panggung interaktif mode Kenalan (index.php)
   Latar: assets/scene/*.webp · Pemeran: assets/char/*.webp
   ═══════════════════════════════════════════════════════════ */
html, body.is-stage{ height:100%; overflow:hidden; }
body.is-stage .shell-top{ position:fixed; left:0; right:0; top:0; padding-top:calc(env(safe-area-inset-top,0px) + 12px); background:rgba(13,30,56,.72); }
body.is-stage .shell-main{ padding:0; max-width:none; }

.kn-stage{ position:fixed; inset:0; overflow:hidden; background:var(--navy); }

/* Latar: dua lapis untuk crossfade antar tempat */
.kn-bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; opacity:0; transform:scale(1.04);
  transition:opacity .9s ease, transform 6s ease-out; }
.kn-bg.on{ opacity:1; transform:scale(1); }
.kn-stage::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(13,30,56,.55) 0%, rgba(13,30,56,0) 24%, rgba(13,30,56,0) 48%, rgba(13,30,56,.85) 78%, var(--navy) 100%); z-index:2; }
.kn-place{ position:absolute; z-index:4; left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top,0px) + 104px);
  padding:5px 14px; border-radius:99px; background:rgba(13,30,56,.7); border:1px solid var(--line); backdrop-filter:blur(8px);
  font-size:.74rem; font-weight:700; letter-spacing:.4px; color:var(--ink-soft); white-space:nowrap; transition:opacity .4s ease; }

/* Pemeran */
.kn-cast{ position:absolute; left:0; right:0; z-index:3; top:calc(env(safe-area-inset-top,0px) + 132px); bottom:var(--cast-bottom, 22vh); pointer-events:none; }
.kn-char{ position:absolute; bottom:0; transform:translateX(-50%) scale(var(--s,1)); transform-origin:50% 100%;
  height:calc(var(--h) * 100%); max-height:100%; width:auto;
  transition:left .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease, filter .35s ease, transform .35s ease;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.kn-char.dim{ --s:.93; filter:brightness(.62) saturate(.75) drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.kn-char.speak{ --s:1.03; z-index:2; animation:knTalk 2.4s ease-in-out infinite; }
.kn-char.out{ opacity:0; }
@keyframes knTalk{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }

/* Kotak dialog */
.kn-dialog{ position:absolute; z-index:5; left:0; right:0; bottom:0; margin:0 auto; max-width:620px;
  padding:0 14px calc(env(safe-area-inset-bottom,0px) + 14px); max-height:62%; display:flex; flex-direction:column; }
.kn-box{ position:relative; background:rgba(13,30,56,.94); border:1px solid var(--line); border-radius:20px;
  padding:26px 18px 16px; backdrop-filter:blur(14px); box-shadow:0 -10px 40px rgba(0,0,0,.35); overflow-y:auto; overscroll-behavior:contain; }

/* Scrollbar tipis & senada tema untuk kotak dialog & lembar kalender (bukan bar abu-abu bawaan browser) */
.kn-box, .kn-cal{
  scrollbar-width:thin; scrollbar-color:var(--lime) rgba(255,255,255,.06);
}
.kn-box::-webkit-scrollbar, .kn-cal::-webkit-scrollbar{ width:7px; }
.kn-box::-webkit-scrollbar-track, .kn-cal::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:99px; margin:6px 0; }
.kn-box::-webkit-scrollbar-thumb, .kn-cal::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--lime), var(--cyan)); border-radius:99px; border:1.5px solid transparent; background-clip:padding-box;
}
.kn-box::-webkit-scrollbar-thumb:hover, .kn-cal::-webkit-scrollbar-thumb:hover{ background:var(--lime-2); background-clip:padding-box; }
.kn-tag{ position:relative; z-index:2; align-self:flex-start; margin:0 0 -14px 14px; display:flex; align-items:center; gap:8px; padding:5px 14px 5px 5px;
  border-radius:99px; background:var(--c, var(--navy-2)); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.35); max-width:calc(100% - 28px); transition:background .3s ease; }
.kn-tag[hidden]{ display:none; }
.kn-tag img{ width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:top; background:rgba(255,255,255,.92); flex-shrink:0; }
.kn-tag span{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.kn-tag b{ font-size:.86rem; white-space:nowrap; }
.kn-tag small{ font-weight:600; opacity:.85; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kn-text, .kn-dalil, .kn-you{ font-family:var(--fbody), 'Noto Naskh Arabic', serif; }
.kn-text{ font-size:1rem; line-height:1.6; min-height:3.2em; }
.kn-text .cursor{ display:inline-block; width:2px; height:1em; background:var(--lime); vertical-align:-2px; margin-left:2px; animation:knBlink .8s steps(1) infinite; }
@keyframes knBlink{ 50%{ opacity:0; } }
.kn-you{ width:fit-content; max-width:85%; margin:0 0 10px auto; padding:8px 14px; border-radius:14px 14px 4px 14px;
  background:var(--lime); color:var(--navy-3); font-weight:600; font-size:.9rem; }
.kn-why{ margin-top:8px; font-size:.8rem; color:var(--ink-soft); display:flex; gap:6px; }
.kn-why .ico{ color:var(--cyan); flex-shrink:0; }
.kn-step{ position:absolute; top:8px; right:14px; font-size:.7rem; color:var(--ink-mute); font-weight:700; }

/* Kartu dalil & doa */
.kn-dalil{ margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(155,197,61,.1); border-left:3px solid var(--lime); font-size:.86rem; line-height:1.55; animation:sqPop .35s ease both; }
.kn-dalil .ar{ font-family:'Noto Naskh Arabic', 'Amiri', serif; font-size:1.6rem; line-height:1.9; direction:rtl; text-align:center; color:#fff; margin-bottom:4px; }
.kn-dalil .lat{ text-align:center; font-style:italic; color:var(--lime-2); margin-bottom:6px; }
.kn-dalil cite{ display:block; margin-top:6px; font-style:normal; font-size:.74rem; font-weight:700; color:var(--lime); }
.kn-doa{ text-align:center; }

/* Zona jawaban */
.kn-input{ margin-top:14px; }
.kn-input:empty{ display:none; }
.kn-input .sq-choice-row{ flex-direction:column; }
.kn-input .sq-choice{ text-align:left; }
.kn-input .sq-choice-row.grid{ display:grid; grid-template-columns:1fr 1fr; }
.kn-input .sq-choice-row.grid .primary{ grid-column:1 / -1; }
.kn-input .sq-choice.primary{ background:var(--lime); color:var(--navy-3); border-color:var(--lime); text-align:center; }
.kn-input .sq-choice small{ display:block; font-weight:500; font-size:.74rem; opacity:.75; }
.kn-links{ display:flex; justify-content:space-between; gap:10px; margin-top:8px; }
.kn-links button{ background:none; border:none; color:var(--ink-soft); font:inherit; font-size:.8rem; text-decoration:underline; cursor:pointer; padding:4px 0; }
.kn-next{ display:flex; justify-content:flex-end; margin-top:12px; }
.kn-next .btn{ padding:11px 20px; }

/* Sampul */
.kn-cover h1{ font-family:var(--fdisplay); font-weight:800; font-size:clamp(1.45rem, 5.6vw, 1.9rem); line-height:1.15; margin-bottom:6px; }
.kn-cover p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:12px; }
.kn-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.kn-chips span{ font-size:.74rem; padding:5px 10px; border-radius:99px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-soft); }
.kn-chips span b{ color:var(--lime); margin-right:4px; }

/* ─── Mode kalender (tanggal lahir) ───
   Tombol pemicu dibuat setinggi & seragam sama .sq-text-row input lain,
   panelnya sendiri (.kn-cal-*) dipasang ke <body> lewat JS supaya tidak
   kepotong overflow:hidden milik .kn-box. */
.kn-date-btn{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px; text-align:left;
  padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--navy-4); color:var(--ink); font-family:var(--fbody); font-size:1rem; cursor:pointer;
}
.kn-date-btn:hover{ border-color:var(--lime); }
.kn-date-ico{ width:19px; height:19px; flex-shrink:0; color:var(--lime-2); }
.kn-date-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kn-date-label.ph{ color:var(--ink-mute); }

.kn-cal-wrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .22s ease; }
.kn-cal-wrap.on{ opacity:1; pointer-events:auto; }
.kn-cal-backdrop{ position:absolute; inset:0; background:rgba(6,14,28,.6); backdrop-filter:blur(2px); }
.kn-cal{
  position:relative; width:100%; max-width:400px; max-height:min(560px, 88vh); overflow-y:auto;
  background:rgba(15,33,61,.98); border:1px solid var(--line); border-radius:22px 22px 0 0;
  padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  box-shadow:0 -18px 44px rgba(0,0,0,.45);
  transform:translateY(16px); transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.kn-cal-wrap.on .kn-cal{ transform:translateY(0); }
.kn-cal-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kn-cal-head select{
  flex:1; min-width:0; padding:10px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--navy-4); color:var(--ink); font-family:var(--fbody); font-weight:700; font-size:.92rem;
}
.kn-cal-head select:first-of-type{ flex:1.4; }
.kn-cal-head select option{ color:#fff; background:#0f213d; }   /* daftar tahun/bulan pas dibuka — teks putih, jangan abu-abu bawaan browser */
.kn-cal-close{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--navy-4);
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.kn-cal-close .ico{ width:14px; height:14px; }
.kn-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.kn-cal-dow span{ text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-mute); padding:4px 0; }
.kn-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.kn-cal-grid span{ aspect-ratio:1; }
.kn-cal-grid button{
  aspect-ratio:1; border-radius:11px; border:1px solid transparent; background:none; color:var(--ink);
  font-family:var(--fbody); font-size:.92rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kn-cal-grid button:hover{ border-color:var(--lime); }
.kn-cal-grid button.today{ border-color:var(--cyan); color:var(--cyan); }
.kn-cal-grid button.sel{ background:var(--lime); border-color:var(--lime); color:var(--navy-3); font-weight:800; }
.kn-cal-grid button:disabled{ color:var(--ink-mute); opacity:.3; cursor:not-allowed; }

@media (min-width:560px){
  .kn-cal-wrap{ align-items:center; }
  .kn-cal{ border-radius:22px; transform:translateY(10px) scale(.97); }
  .kn-cal-wrap.on .kn-cal{ transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .kn-cal-wrap, .kn-cal{ transition:none; }
}

@media (min-width:760px){
  .kn-cast{ bottom:var(--cast-bottom, 16vh); }
  .kn-bg{ background-position:center 40%; }
}
@media (prefers-reduced-motion: reduce){
  .kn-char.speak{ animation:none; }
  .kn-bg{ transition:opacity .2s ease; transform:none; }
}
/* ═══════════ Semua perangkat: tinggi layar nyata & keyboard ═══════════
   --app-h / --vv-top diisi spmb.js dari visualViewport, jadi panggung selalu
   pas di area yang terlihat (termasuk saat keyboard HP muncul, iOS & Android).
   Transisi halus supaya perubahan ukuran saat keyboard buka/tutup tidak terasa "kepotong". */
.kn-stage{ top:var(--vv-top, 0px); bottom:auto; height:var(--app-h, 100dvh); transition:height .22s ease, top .22s ease; }

/* Keyboard terbuka (HP/tablet): panggung dipadatkan tapi teks & kolom TETAP ukuran normal
   (bukan diperkecil) — yang berubah cuma tokoh/latar disembunyikan supaya kolom ketik & pertanyaan
   selalu kelihatan penuh, bukan kesan mengecil. */
body.kb-open .shell-top{ display:none; }
body.kb-open .kn-place, body.kb-open .kn-cast, body.kb-open .tr-rooms{ opacity:0; pointer-events:none; }
body.kb-open .kn-dialog{ max-height:100%; padding-top:calc(env(safe-area-inset-top,0px) + 18px); padding-bottom:8px; display:flex; flex-direction:column; justify-content:flex-end; transition:padding .22s ease; }
body.kb-open .kn-box{ padding:22px 16px 14px; transition:padding .22s ease; }
body.kb-open .kn-text{ min-height:0; }
body.kb-open .kn-tag img{ width:32px; height:32px; }
body.kb-open .kn-why, body.kb-open .kn-dalil{ display:none; }
body.kb-open .kn-stage::after{ background:linear-gradient(to bottom, rgba(13,30,56,.5), rgba(13,30,56,.94)); }
@media (prefers-reduced-motion: reduce){
  .kn-stage, body.kb-open .kn-dialog, body.kb-open .kn-box{ transition:none; }
}

/* Layar pendek (HP miring beneran, jendela kecil): tokoh di kiri, dialog di kanan.
   PENTING: dipicu lewat kelas .is-landscape (diisi spmb.js dari screen.orientation, bukan
   media feature `orientation` CSS) — soalnya `orientation:landscape` CSS itu cuma bandingin
   lebar vs tinggi VIEWPORT: begitu keyboard HP muncul di HP portrait, tinggi viewport ke-potong
   sampai lebih kecil dari lebarnya, jadi CSS ngira "landscape" padahal HP-nya tetap tegak —
   itu sebabnya tata letak dulu ikut nyamping/setengah layar pas keyboard dibuka. screen.orientation
   pakai ukuran layar fisik, jadi tidak kepengaruh keyboard. */
@media (max-height:540px){
  :root.is-landscape body.is-stage .shell-top .steps{ display:none; }
  :root.is-landscape body.is-stage .shell-top{ padding-top:calc(env(safe-area-inset-top,0px) + 8px); padding-bottom:8px; }
  :root.is-landscape .kn-place{ top:calc(env(safe-area-inset-top,0px) + 60px); left:25%; }
  :root.is-landscape .kn-cast{ top:calc(env(safe-area-inset-top,0px) + 86px); bottom:0 !important; right:52%; }
  :root.is-landscape .kn-dialog{ left:auto; right:0; width:52%; max-width:none; max-height:calc(100% - 70px); padding-right:calc(env(safe-area-inset-right,0px) + 12px); }
  :root.is-landscape .kn-stage::after{ background:linear-gradient(to right, rgba(13,30,56,0) 30%, rgba(13,30,56,.85) 60%); }
  :root.is-landscape .kn-text{ font-size:.93rem; }
}
/* Layar sangat sempit (≤360px) */
@media (max-width:360px){
  .kn-box{ padding:22px 14px 14px; }
  .kn-text{ font-size:.94rem; }
  .kn-tag b{ font-size:.8rem; }
  .kn-input .sq-choice-row.grid{ grid-template-columns:1fr; }
}
/* Layar lebar: dialog sedikit lebih lebar & tokoh lebih lega */
@media (min-width:1100px){
  .kn-dialog{ max-width:680px; }
}
/* Penomoran langkah: di dalam alur (tidak absolut) supaya tidak menimpa teks di layar kecil */
.kn-box > .kn-step{ position:static; display:block; text-align:right; margin:-10px 0 2px; min-height:1em; font-size:.7rem; color:var(--ink-mute); font-weight:700; }
.kn-box > .kn-step:empty{ display:none; }