/* ============================================================================
   OKU-APP — mushaf okuyucusunun MOBİL görünümü, mobil uygulamanın okuma
   kabuğunun birebir portudur (kaynak: islamarsivi-mobil/www/styles.css
   `.readtools`, `.rt-play*`, `.oku-bar*` blokları).

   ⚠ MASAÜSTÜNE DOKUNULMAZ: mobil çubuklar (.mh-mtop/.mh-bbar) zaten yalnız
   ≤900px'te görünür; buradaki her kural da o kırılımın içindedir.
   kuran-okuma.css'ten SONRA yüklenir ve onu değiştirmez (kütüphane dersi).
   ============================================================================ */

@media (max-width: 900px) {

  /* ── ALT ÇUBUK = app `.readtools` ──────────────────────────────────────
     Ekranın dibine yapışık bant değil; kenarlardan boşluklu, yuvarlak,
     buzlu cam yüzen ada. App ile aynı ölçüler: 56px, radius 20, blur 8. */
  .mh-bbar {
    display: flex !important;
    position: fixed;
    left: 14px; right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    height: 56px;
    z-index: 95;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    padding: 0 12px;
    background: rgba(255, 253, 248, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid #F0EAE0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(44, 24, 16, .16) !important;
    overflow: visible;
  }

  .mh-bbar .mh-bbar-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 7px 6px;
    min-height: 0;
    border: 0; background: none;
    border-radius: 14px;
    color: #8B5A2B;
    transition: background .15s ease;
  }
  .mh-bbar .mh-bbar-btn i { font-size: 21px; color: #8B5A2B; }
  .mh-bbar .mh-bbar-label {
    font-size: 9.5px; font-weight: 600; color: #6A5A4E;
    max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: 0;
  }
  /* etkin durum (app: button.on) */
  .mh-bbar .mh-bbar-btn.on { background: rgba(181, 101, 29, .13); }
  .mh-bbar .mh-bbar-btn.on i,
  .mh-bbar .mh-bbar-btn.on .mh-bbar-label { color: #B5651D; }
  .mh-bbar .mh-bbar-btn:active { background: rgba(181, 101, 29, .10); }

  /* ── Ortadaki "Oku" = app `.rt-play` (28px bakır daire) ──────────────── */
  .mh-bbar #mhBbarAudio { background: none !important; }
  .mh-bbar .rt-play-ic {
    width: 28px; height: 28px; border-radius: 50%;
    background: #B5651D;
    display: flex; align-items: center; justify-content: center;
  }
  .mh-bbar .rt-play-ic i { font-size: 14px; color: #fff; margin-left: 1px; }
  .mh-bbar .rt-play .mh-bbar-label { color: #8B5A2B; font-weight: 700; }

  /* çubuk yüzdüğü için içerik altına app kadar boşluk */
  .mushaf-main, .mushaf-content { padding-bottom: 92px; }

  /* ── ÜST BAR = app `.oku-bar` ──────────────────────────────────────────
     Arapça sûre adı (Reem Kufi, bakır) · Latin ad (Playfair) · sayfa/cüz. */
  .mh-mtop {
    background: rgba(255, 253, 248, .96);
    border-bottom: 1px solid #F0EAE0;
    box-shadow: 0 2px 10px rgba(42, 23, 16, .05);
    gap: 10px;
    padding: 8px 12px;
    align-items: center;
  }
  .mh-mtop-back { color: #8B5A2B; }

  .mh-mtop-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: row; align-items: baseline; gap: 9px;
    background: none; border: 0; padding: 0; margin: 0;
    text-align: left; cursor: pointer; min-height: 0;
  }
  .mh-mtop-ar {
    flex: 0 0 auto;
    font-family: "Reem Kufi", "Amiri", serif;
    font-size: 15px; line-height: 1.45; color: #B5651D;
  }
  .mh-mtop-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .mh-mtop .mh-mtop-surah {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px; font-weight: 700; line-height: 1.2; color: #2A1710;
    letter-spacing: 0;
  }
  .mh-mtop .mh-mtop-page {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px; line-height: 1.4; letter-spacing: .03em; color: #9C8C80;
    text-transform: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* sayfa atlama alanı: küçük ve sessiz (app'te yok, sitede işe yarıyor) */
  .mh-mtop-jump { flex: 0 0 auto; }
  .mh-mtop-jump input {
    width: 56px; min-height: 0; height: 32px;
    padding: 0 8px; font-size: 12.5px;
    border: 1px solid #EAE1D5; border-radius: 10px;
    background: #FFFDF9; color: #2A1710; text-align: center;
  }
  .mh-mtop-jump input:focus { outline: none; border-color: #D4956A; }

  .mh-mtop-ayar {
    flex: 0 0 auto;
    width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #EAE1D5; border-radius: 11px;
    background: #F7F4EE; color: #8B5A2B; font-size: 14px;
  }
  .mh-mtop-ayar:active { background: rgba(181, 101, 29, .12); }

  /* ── Sheet / popover kartları app diliyle ─────────────────────────────── */
  .ko-settings-sheet {
    border-radius: 22px 22px 0 0;
    background: #FFFDF9;
  }
  .ko-settings-sheet-title {
    font-family: "Playfair Display", Georgia, serif;
    color: #2A1710;
  }
  .mh-pop {
    border-radius: 18px !important;
    border: 1px solid #EAE1D5 !important;
    background: #FFFDF9 !important;
    box-shadow: 0 18px 50px rgba(28, 15, 9, .28) !important;
  }

  /* Düğme sırası — app `readtools` ile aynı 5 hücre; Oku TAM ORTADA:
     Meal · Okuyucu · (Oku) · Mushaf · Sayfa */
  #mhBbarMeal{ order:1; }
  #mhBbarKari{ order:2; }
  #mhBbarAudio{ order:3; }
  #mhBbarMushaf{ order:4; }
  #mhBbarSayfa{ order:5; }

  /* ── "Oku" — birincil eylem: çubuktan yükselen bakır daire ──────────────
     Okuyucu düğmesi kaldırıldıktan sonra çubuk 4 hücre; Oku görsel olarak
     baskın olsun diye 46px daireye çıkarıldı, beyaz halkayla çubuktan ayrıldı
     ve 12px yukarı taşındı (app rt-play'in web'e uyarlanmış hâli). */
  .mh-bbar .rt-play{ position:relative; }
  .mh-bbar .rt-play-ic{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(150deg,#C97A2E,#9C4F12);
    border:3px solid #FFFDF9;
    box-shadow:0 6px 18px rgba(156,79,18,.38), 0 2px 6px rgba(42,23,16,.18);
    display:flex; align-items:center; justify-content:center;
    transform:translateY(-11px);
    transition:transform .16s ease, box-shadow .16s ease, background .2s ease;
  }
  .mh-bbar .rt-play:active .rt-play-ic{ transform:translateY(-11px) scale(.94); }
  .mh-bbar .rt-play-ic svg{ width:19px; height:19px; fill:#FFF7EC; display:block; }
  .mh-bbar .rt-play-ic .rt-ic-pause{ display:none; }
  .mh-bbar .rt-play-ic.caliyor .rt-ic-play{ display:none; }
  .mh-bbar .rt-play-ic.caliyor .rt-ic-pause{ display:block; }
  .mh-bbar .rt-play-ic.caliyor{
    background:linear-gradient(150deg,#3A2418,#241308);
    box-shadow:0 6px 18px rgba(42,23,16,.34);
  }
  /* etiket daire yükseldiği için yukarı çekilir, çubuk içinde hizalı kalır */
  .mh-bbar .rt-play .mh-bbar-label{
    color:#8B5A2B; font-weight:700; margin-top:-8px; position:relative; z-index:1;
  }

  /* ── SAYFA SEC alt-sayfası (2026) ─────────────────────────────────────── */
  .ks-sheet{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; }
  .ks-sheet[hidden]{ display:none !important; }
  .ks-backdrop{ position:absolute; inset:0; background:rgba(26,15,8,.45);
    opacity:0; transition:opacity .22s ease; }
  .ks-sheet.on .ks-backdrop{ opacity:1; }
  .ks-card{ position:relative; width:100%; max-width:520px;
    background:#FFFDF9; border-radius:24px 24px 0 0;
    padding:8px 18px calc(20px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 40px rgba(42,23,16,.26);
    transform:translateY(102%); transition:transform .26s cubic-bezier(.22,.7,.3,1); }
  .ks-sheet.on .ks-card{ transform:translateY(0); }
  .ks-grab{ display:block; width:40px; height:4px; border-radius:3px; background:#E4DACC; margin:6px auto 12px; }
  .ks-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .ks-title{ font-family:'Playfair Display',Georgia,serif; font-size:18px; font-weight:700; color:#2A1710; }
  .ks-hb{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .ks-sub{ font-size:11.5px; color:#9C8C80; }
  .ks-list{ max-height:56vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    margin:0 -4px; padding:2px 4px 6px; }
  /* app `ayp-grid` karşılığı: 604 sayfalık çip ızgarası */
  .ks-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  .ks-chip{ height:46px; min-height:0; padding:0; display:flex; align-items:center; justify-content:center;
    border:1px solid #EAE1D5; border-radius:12px; background:#FFFFFF; color:#2A1710;
    font-size:14px; font-weight:600; font-family:inherit; font-variant-numeric:tabular-nums;
    box-shadow:0 1px 2px rgba(42,23,16,.04); }
  .ks-chip:active{ background:#F7F1E7; }
  .ks-chip.on{ background:linear-gradient(150deg,#C97A2E,#9C4F12); color:#FFF7EC;
    border-color:transparent; box-shadow:0 4px 12px rgba(156,79,18,.30); }
  @media (min-width:420px){ .ks-grid{ grid-template-columns:repeat(6,1fr); } }

  /* çarpı — font ikonuna bağlı değil, CSS ile çizili */
  .ks-x, .mh-pop-x{
    position:relative; flex:0 0 auto; width:34px; height:34px; min-width:0; min-height:0;
    padding:0; border:1px solid #EAE1D5; border-radius:50%; background:#F3ECE1; cursor:pointer;
  }
  .ks-x::before, .ks-x::after, .mh-pop-x::before, .mh-pop-x::after{
    content:''; position:absolute; left:50%; top:50%; width:14px; height:2px; border-radius:2px;
    background:#8B5A2B; transform-origin:center;
  }
  .ks-x::before, .mh-pop-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .ks-x::after,  .mh-pop-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
  .ks-x:active, .mh-pop-x:active{ background:rgba(181,101,29,.16); }

  /* ── Okuyucu / Sûreler paneli: masaüstü dropdown yerine 2026 alt-sayfa ──
     Paneller <body>'ye taşınır (portal); açıkken .ks-acik sınıfı gelir. */
  .ks-portal{ position:fixed; inset:0; z-index:210; display:none;
    align-items:flex-end; justify-content:center; background:rgba(26,15,8,.45); }
  .ks-portal.ks-acik{ display:flex; }
  /* ⚠ `.mh-pop-wrap:not(.open) .mh-pop{display:none}` portal'ı da yakalıyor —
     portal `open` yerine `ks-acik` taşıdığı için display'i AÇIKÇA geri veriyoruz. */
  .ks-portal .mh-pop{ display:none !important; }
  .ks-portal.ks-acik .mh-pop{
    display:block !important;
    position:relative !important; inset:auto !important;
    width:100% !important; max-width:520px !important; max-height:78vh; overflow-y:auto;
    visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
    transform:none !important;
    border-radius:24px 24px 0 0 !important; border:0 !important;
    background:#FFFDF9 !important;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    box-shadow:0 -10px 40px rgba(42,23,16,.26) !important;
    animation:ksUp .26s cubic-bezier(.22,.7,.3,1);
  }
  @keyframes ksUp{ from{ transform:translateY(102%); } to{ transform:translateY(0); } }
  .ks-pop-grab{ display:block; width:40px; height:4px; border-radius:3px;
    background:#E4DACC; margin:2px auto 12px; }
  .ks-pop-head{ display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin:0 0 12px; }
  .ks-portal .mh-pop-title{
    font-family:'Playfair Display',Georgia,serif; font-size:18px; font-weight:700;
    color:#2A1710; margin:0; padding:0; text-transform:none; letter-spacing:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
  }
  .ks-portal .mh-pop-list{ max-height:58vh; }

  .ks-portal .mh-pop-search input{ height:44px; border-radius:12px; }


  /* ── Meal görünümünde âyet numarası (Türkçe rakam — render'dan gelir) ──
     Mobilde rozet biçimi: yumuşak bakır daire, tabular rakam. */
  .interlinear-ayet-no{
    width:28px !important; height:28px !important;
    background:#F3ECE1 !important; border:1px solid #EAE1D5 !important;
    color:#8B5A2B !important; box-shadow:none !important;
    font-family:'Inter',-apple-system,'Segoe UI',sans-serif !important;
    font-size:12.5px !important; font-weight:700 !important;
    font-variant-numeric:tabular-nums; letter-spacing:0 !important;
  }
}