/* ==========================================================================
   FSPPB — lapisan tampilan MOBILE (iPhone Safari & Android Chrome)
   Dimuat setelah app.css. Hanya aktif di layar <= 900px, desktop tidak berubah.
   ========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body.nolock{overflow:hidden;touch-action:none}
.mtab,.nav-ov,.nav-h,.tmenu{display:none}

@media(max-width:900px){
  :root{--tab:62px;--sab:env(safe-area-inset-bottom,0px)}
  html{scroll-padding-top:12px}
  body{padding-bottom:calc(var(--tab) + var(--sab) + 8px);overscroll-behavior-y:none}
  a,button,summary,[role=button]{touch-action:manipulation}
  img,video,iframe{max-width:100%}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---- Header atas: ringkas, logo + pencarian ---- */
  .top{padding-top:env(safe-area-inset-top,0px);background:#fff;box-shadow:0 1px 0 var(--line)}
  .top .wrap{height:auto;min-height:60px;padding-top:8px;padding-bottom:8px;gap:12px;flex-wrap:wrap}
  .logo-img{height:44px;width:auto}
  .top .tr{flex:1 1 150px;min-width:0;margin-left:auto}
  .search{width:100%;display:flex;align-items:center;background:#f1f0f8;border-radius:999px;padding:0 6px 0 16px;border:1px solid transparent;transition:.2s}
  .search:focus-within{background:#fff;border-color:var(--navy2);box-shadow:0 0 0 3px rgba(82,66,163,.15)}
  .search input{flex:1;min-width:0;width:100%;height:42px;border:0;background:transparent;outline:0;font-size:16px;color:var(--ink)}
  .search button{flex:0 0 40px;height:40px;border:0;background:none;color:var(--navy);font-size:20px;cursor:pointer;border-radius:50%}

  /* ---- Bilah menu lama disembunyikan; menu = panel geser dari kanan ---- */
  .navbar{position:static;height:0;background:none;box-shadow:none;overflow:visible}
  .navbar .wrap{height:0;padding:0;display:block}
  .mlabel,.burger{display:none!important}
  .nav-ov{display:block;position:fixed;inset:0;background:rgba(14,10,40,.55);-webkit-backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;z-index:140}
  .nav-ov.on{opacity:1;visibility:visible}
  .nav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(88vw,360px);height:100%;max-height:none!important;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;
    padding:env(safe-area-inset-top,0px) 0 calc(24px + var(--sab));background:linear-gradient(180deg,#2f2670,#2b2462);
    transform:translateX(104%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:150;box-shadow:-18px 0 50px rgba(10,6,40,.45)}
  .nav.open{transform:none}
  .nav-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;color:#fff;position:sticky;top:0;background:#2f2670;z-index:2}
  .nav-h b{font-size:15px;letter-spacing:.06em;text-transform:uppercase}
  .nav-h button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer}
  .nav>a,.dd>a{min-height:54px;height:auto;padding:14px 20px;font-size:14.5px;letter-spacing:.02em}
  .nav>a:active,.dd>a:active{background:rgba(255,255,255,.1)}
  .menu a,.menu.mega a{min-height:46px;display:flex;align-items:center;padding:10px 28px}
  .ncek{border-top:1px solid rgba(255,255,255,.12);margin-top:8px}

  /* ---- Bilah tab bawah (seperti aplikasi) ---- */
  .mtab{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:120;height:calc(var(--tab) + var(--sab));padding:6px 6px var(--sab);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid rgba(43,36,98,.1);box-shadow:0 -6px 24px rgba(43,36,98,.08)}
  .mtab a,.mtab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#6b7686;font:600 10.5px/1.1 'Plus Jakarta Sans',system-ui,sans-serif;
    letter-spacing:.01em;cursor:pointer;border-radius:14px;position:relative;min-width:0;padding:0 2px;transition:color .2s}
  .mtab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  .mtab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mtab .on{color:var(--navy2)}
  .mtab .on:before{content:"";position:absolute;top:-7px;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 4px 4px;background:var(--navy2)}
  .mtab .on svg{transform:translateY(-1px) scale(1.06)}
  .mtab a:active,.mtab button:active{background:rgba(82,66,163,.1)}
  .mtab .hi{color:#fff}
  .mtab .hi i{display:grid;place-items:center;width:46px;height:46px;margin-top:-18px;border-radius:50%;background:linear-gradient(135deg,var(--navy2),var(--navyd));box-shadow:0 8px 18px rgba(43,36,98,.35);border:3px solid #fff}
  .mtab .hi svg{stroke:#fff}
  .mtab .hi span{color:var(--navy2);margin-top:1px}

  /* ---- Elemen melayang tidak menutupi tab bar ---- */
  .totop{bottom:calc(var(--tab) + var(--sab) + 14px);right:max(14px,env(safe-area-inset-right))}
  .progress{top:0;z-index:160}
  .ticker{font-size:13px}

  /* ---- Konten lebih nyaman dibaca / diketuk ---- */
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .art h1{font-size:clamp(22px,6.2vw,28px);line-height:1.25;overflow-wrap:anywhere}
  .body{font-size:17px;line-height:1.8;overflow-wrap:anywhere}
  .art figure img,.lead img{border-radius:14px}
  input,select,textarea{font-size:16px!important}  /* cegah iPhone memperbesar layar saat mengetik */
  .btn,.share a,.share button,.pager a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pager{flex-wrap:wrap;justify-content:center;gap:8px}
  .cf input,.cf textarea{width:100%}
  .foot{padding-bottom:8px}
  .copy .wrap{padding-bottom:10px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:480px){
  .mtab{height:calc(52px + var(--sab))}.mtab span{display:none}.mtab .hi i{margin-top:-6px;width:38px;height:38px}
  body{padding-bottom:calc(60px + var(--sab))}
}
@media(max-width:360px){.mtab a,.mtab button{font-size:9.5px}.logo-img{height:38px}}
@media(prefers-reduced-motion:reduce){.nav,.nav-ov{transition:none}}
@media print{.mtab,.nav-ov{display:none!important}body{padding-bottom:0}}

/* ==========================================================================
   v2 — penyempurnaan HP: tombol menu di header, dropdown halus, hero, iklan
   ========================================================================== */
@media(max-width:900px){
  html,body{max-width:100%}
  body{overflow-x:clip}

  /* Header: logo | cari | tombol menu (dropdown ada di panel menu) */
  .tmenu{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:14px;background:var(--navy);color:#fff;cursor:pointer;
    box-shadow:0 4px 12px rgba(43,36,98,.28);transition:transform .2s,background .2s}
  .tmenu svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}
  .tmenu:active{transform:scale(.92);background:var(--navy2)}
  .top .tr{order:2}.tmenu{order:2}.topad{order:3}
  .top .wrap{flex-wrap:wrap;align-items:center}
  .logo{order:1;margin-right:auto}
  .top .tr{flex:1 1 130px;max-width:240px;margin-left:0}

  /* Panel menu: tinggi layar dinamis (Safari iPhone & Chrome Android) */
  .nav{height:100vh;height:100dvh;padding-left:env(safe-area-inset-left,0px)}
  .nav-h{padding-top:max(14px,env(safe-area-inset-top,0px))}
  .nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--cy);outline-offset:-2px}
  .dd>a.has:before{width:8px;height:8px;margin-right:2px}
  .dd.open>a{background:rgba(255,255,255,.08);color:var(--cy)}
  .nav>a.on,.dd>a.on{box-shadow:inset 3px 0 0 var(--cy)}
  .nav>a:after,.dd>a:after{display:none}

  /* Dropdown membuka/menutup halus (satu per satu) */
  .menu,.menu.mega{display:block;max-height:0;overflow:hidden;padding:0;margin:0;background:rgba(0,0,0,.22);
    transition:max-height .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s}
  .dd:not(.open)>.menu,.dd:not(.open)>.menu.mega{visibility:hidden;opacity:1;transform:none}
  .dd.open>.menu,.dd.open>.menu.mega{display:block;visibility:visible;max-height:62vh;max-height:62dvh;overflow-y:auto;padding:4px 0 8px;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;transition:max-height .38s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .menu a,.menu.mega a{padding-left:30px;padding-right:20px;line-height:1.35;color:#e9e6ff}
  .menu a:hover{padding-left:30px}
  .menu.mega a.all{padding-left:30px;color:var(--cy)}

  /* Hero: lebih proporsional di HP */
  .hero{height:clamp(280px,74vw,380px)}
  .cap{padding-bottom:40px}
  .cap span{display:-webkit-box;width:fit-content;max-width:100%;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:1.4;padding:4px 12px;border-radius:14px;margin-bottom:8px}
  .cap h2{font-size:clamp(18px,5.2vw,26px);line-height:1.22;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* Iklan: tidak terlalu tinggi, di tengah, rapi */
  .rail-inline{margin-bottom:14px}
  .rail-inline .as img,.ad-right .as img{max-height:300px;object-fit:contain}
  .ad-right .adslide,.rail-inline .adslide{border-radius:16px}
  .topad{border-radius:12px}

  /* Daftar video (reels): geser halus & berhenti pas di kartu */
  .rl-track{-webkit-overflow-scrolling:touch;scroll-padding-left:2px;overscroll-behavior-x:contain}
}
@media(max-width:480px){
  .top .tr{max-width:none}
  .rl{flex-basis:calc((100% - 20px)/2.4)}
  .soc a{min-height:74px}
}
@media(max-width:359px){.tmenu{flex-basis:40px;width:40px;height:40px}.hero{height:260px}}
@media(hover:none){.dd:hover>a:not(.on){background:none;color:#fff}.dd.open:hover>a{background:rgba(255,255,255,.08);color:var(--cy)}.menu a:hover{background:none;color:#e9e6ff}}

/* ==========================================================================
   v3 — iklan HP: header tidak terpotong, kiri+kanan jadi satu slider
   ========================================================================== */
@media(max-width:900px){
  /* Iklan header: rasio mengikuti ukuran asli (1440×128) agar gambar tidak terpotong */
  .topad{aspect-ratio:1440/128;height:auto;background:#fff}
  .topad .ta-s img,.topad .ta-s video{object-fit:contain}
  .topad .ta-ar{display:none}
  .topad .ta-d{bottom:2px}.topad .ta-d i{width:5px;height:5px}.topad .ta-d i.on{width:14px}
}
/* Di bawah 1200px iklan kiri + kanan sudah digabung di .rail-inline, jadi slot kanan disembunyikan */
@media(max-width:1199px){.ad-right{display:none}}