/* ============================================================
   RUMI SOLO — MODE APLIKASI
   Di HP (atau saat sudah dipasang ke layar utama), tampilan
   memenuhi layar: bingkai ponsel tiruan dan panel samping
   disembunyikan. Di desktop tetap tampil sebagai pratinjau.
   ============================================================ */

/* ---------- HP atau sudah dipasang ---------- */
@media (max-width: 780px) {
  .stage{
    display:block; padding:0; gap:0; min-height:100vh; min-height:100dvh;
    background:var(--paper);
  }
  .stage-side{ display:none; }
  .phone{
    width:100%; max-width:none; height:100vh; height:100dvh;
    border-radius:0; padding:0; box-shadow:none; background:var(--paper);
  }
  .phone::before{ display:none; }
  .viewport{ border-radius:0; height:100%; }
}

/* ---------- Sudah dipasang ke layar utama ---------- */
@media all and (display-mode: standalone) {
  .stage{ display:block; padding:0; gap:0; min-height:100dvh; background:var(--paper); }
  .stage-side{ display:none; }
  .phone{
    width:100%; max-width:none; height:100dvh;
    border-radius:0; padding:0; box-shadow:none; background:var(--paper);
  }
  .phone::before{ display:none; }
  .viewport{ border-radius:0; height:100%; }

  /* status bar HP asli sudah tampil — yang tiruan disembunyikan,
     ruangnya dipakai untuk menghindari poni/kamera */
  .statusbar{
    height:auto; padding-top:env(safe-area-inset-top, 12px);
    padding-bottom:4px; visibility:hidden;
  }
  .tabbar{ padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
  .actionbar{ padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
  .splash-foot{ padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Ajakan pasang aplikasi ---------- */
.pasang{
  position:absolute; left:14px; right:14px; bottom:96px; z-index:180;
  background:linear-gradient(150deg,var(--nila-900),var(--nila-700));
  border-radius:20px; padding:14px 15px; color:#fff;
  box-shadow:0 20px 46px -14px rgba(5,15,46,.65);
  display:none; align-items:center; gap:12px; overflow:hidden;
  animation:pasangNaik .32s var(--ease);
}
.pasang.show{ display:flex; }
@keyframes pasangNaik{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.pasang .kawung-ovl{ position:absolute; inset:0; }
.pasang > *{ position:relative; z-index:2; }
.pasang .ik{
  width:44px;height:44px;border-radius:13px;flex:none;overflow:hidden;
  background:var(--nila-950); box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.pasang .ik img{ width:100%;height:100%;object-fit:cover;display:block; }
.pasang .tx{ flex:1; min-width:0; }
.pasang .tx b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.pasang .tx span{ display:block; font-size:11.5px; color:#B9C4DC; margin-top:2px; line-height:1.45; }
.pasang .go{
  background:var(--kunyit-500); color:var(--nila-950); border:0; border-radius:12px;
  padding:11px 17px; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; flex:none;
}
.pasang .go:active{ transform:scale(.96); }
.pasang .x{
  background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:50%;
  width:26px;height:26px; font-size:14px; cursor:pointer; flex:none; line-height:1;
}

/* ---------- Panduan pemasangan iPhone ---------- */
.pandu{
  position:absolute; inset:0; z-index:190; background:rgba(5,15,46,.7);
  backdrop-filter:blur(4px); display:none; align-items:flex-end;
}
.pandu.show{ display:flex; }
.pandu-card{
  width:100%; background:#fff; border-radius:26px 26px 0 0; padding:18px 20px 30px;
  animation:pasangNaik .3s var(--ease);
}
.pandu-card h4{
  font-family:var(--f-display); font-size:19px; font-weight:600; margin:0 0 4px;
  letter-spacing:-.02em; font-variation-settings:'SOFT' 40,'WONK' 1;
}
.pandu-card p{ font-size:12.5px; color:var(--ink-3); margin:0 0 16px; line-height:1.55; }
.pandu-step{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.pandu-step:last-of-type{ border-bottom:0; }
.pandu-step i{
  width:27px;height:27px;border-radius:9px;background:var(--nila-900);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;
  font-style:normal;flex:none;
}
.pandu-step span{ font-size:13.5px; font-weight:600; }
.pandu-card .tutup{
  width:100%; margin-top:16px; padding:15px; border:0; border-radius:var(--r-full);
  background:var(--nila-900); color:#fff; font-family:inherit; font-size:14.5px;
  font-weight:700; cursor:pointer;
}

/* ============================================================
   Tanpa status bar palsu — beri ruang aman di puncak layar
   ============================================================ */
.screen{ padding-top:0; }

/* layar dengan appbar terang */
.screen > .appbar:first-child{ padding-top:calc(14px + env(safe-area-inset-top, 0px)); }

/* layar dengan header gelap (beranda, profil) */
.home-hero, .profile-hero{ padding-top:calc(14px + env(safe-area-inset-top, 0px)); }
.detail-hero .bar{ padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
.pay-hero{ padding-top:calc(18px + env(safe-area-inset-top, 0px)); }
#s-success .success-wrap{ padding-top:calc(40px + env(safe-area-inset-top, 0px)); }
.sw-wrap, .lg-wrap{ padding-top:calc(8px + env(safe-area-inset-top, 0px)); }

/* di browser biasa (bukan terpasang) ruangnya lebih kecil */
@media not all and (display-mode: standalone) {
  .screen > .appbar:first-child{ padding-top:14px; }
  .home-hero, .profile-hero{ padding-top:14px; }
}

/* isian data pemesan */
.form-baris input::placeholder{ color:var(--ink-4); font-weight:500; }
.form-baris input:focus{ outline:none; }
.form-grup:focus-within{ border-color:var(--nila-300); }