/* =========================================================
   MOBİL YOĞUNLUK SİSTEMİ
   assets/css/mobile.css
   =========================================================

   AMAÇ
   Mobil arayüz mockuplara göre "bir beden büyük" duruyordu. Sorun
   fontlarda değil; kart boşlukları, dış marjlar, avatar ölçüsü,
   radius ve gereksiz dikey hacimde. Burası o hacmi tek yerden
   yönetir.

   MASAÜSTÜNE HİÇBİR ETKİSİ YOKTUR — her kural bir media query içinde.

   İKİ KIRILIM VAR, KARIŞTIRMA:
     ≤640px  YOĞUNLUK   kart ölçüleri, boşluklar, radius, avatar
     ≤767px  KABUK      üst bar, sol çekmece, alt navigasyon

   Neden ayrı: alt navigasyon markup'ta "md:hidden" ile geliyor,
   yani 768'in altında görünür. Kabuğu 640'a bağlasaydım 641-767
   bandında alt nav görünür ama üst bar, çekmece ve masaüstü sol
   menüsü birden yok olurdu — o bantta menüye ulaşılamazdı.

   Yeni YOĞUNLUK kuralı yazarken 640, yeni KABUK kuralı yazarken
   767 kullan.

   YÜKLEME SIRASI (layout.php)
     inline <style>  →  app.css  →  bileşen CSS'leri  →  BU DOSYA
     →  $GLOBALS['page_css']
   Yani buradaki kurallar Tailwind'i ve bileşen CSS'ini ezer,
   sayfaya özel CSS de bunu ezebilir. Kasıtlı sıralama.

   DEĞER DEĞİŞTİRMEK İSTERSEN
   Aşağıdaki --m-* değişkenlerini değiştir, hepsi buradan besleniyor.
   ========================================================= */


@media (max-width: 640px) {

/* ---------------------------------------------------------
   1) YOĞUNLUK DEĞİŞKENLERİ
   ---------------------------------------------------------
   ":root, html.dark" İKİSİ BİRDEN yazılmak ZORUNDA.
   layout.php'de html.dark bu değişkenleri daha yüksek özgüllükle
   yeniden tanımlıyor; yalnızca :root yazarsak KOYU TEMADA
   masaüstü değerleri kalır ve mobil sıkıştırma çalışmaz. */
:root, html.dark {

    /* --- KABUK (layout.php:794 bloğundaki değerleri ezer) --- */
    --shell-radius:  15px;   /* eski 20px — kart kenara yaklaşınca 20 hacimli duruyordu */
    --shell-pad-x:   12px;   /* eski 16px — hero/sekme yan boşluğu */
    --shell-overlap: 12px;   /* eski 16px — iki kartın üst üste binme payı */

    /* --- MOBİL YOĞUNLUK DİLİ ---
       Bunları post_card.css ve home.css tüketiyor. Tek dil olsun
       diye orada sabit sayı yazılmadı. */
    --m-gutter:      6px;    /* kartın ekran kenarına uzaklığı (Tumblr yaklaşımı) */
    --m-card-gap:    8px;    /* kartlar arası dikey boşluk */
    --m-card-pad-x:  12px;   /* kart iç yan boşluk */
    --m-card-pad-y:  10px;   /* kart iç üst/alt boşluk */
    --m-card-radius: 14px;   /* 6px kenarda 24px radius fazla yuvarlaktı */
    --m-avatar:      36px;   /* eski 40px */
}


} /* /@media 640 — yoğunluk */



/* Masaüstünde kabuk hiç çizilmesin — alt navigasyonun "md:hidden"
   sınırıyla aynı nokta. */
@media (min-width: 768px) {
    .mobile-header,
    .mobile-drawer,
    .mobile-drawer-scrim { display: none !important; }
}


/* =========================================================
   MOBİL KABUK  (üst bar · sol çekmece · alt navigasyon)
   ---------------------------------------------------------
   KIRILIM 767px, 640 DEĞİL. Sebep: alt navigasyon markup'ta
   "md:hidden" ile geliyor, yani 768px'in altında görünüyor. Kabuğu
   640'a bağlasaydım 641-767 bandında alt nav görünür ama üst bar,
   çekmece ve masaüstü sol menüsü birden yok olurdu — o bantta
   menüye hiç ulaşılamazdı.

   Yoğunluk (kart ölçüleri) 640'ta kalıyor; o ayrı bir mesele.
   ========================================================= */
@media (max-width: 767px) {
/* iOS: <16px yazılı bir alana odaklanınca sayfayı zorla yakınlaştırır.
   Tek çare 16px. maximum-scale=1 yazma — parmakla yakınlaştırmayı öldürür. */
input, textarea, select { font-size: 16px; }

/* Sınıf seçicileri eleman seçicisini yener; özgüllüğü body ile eşitliyoruz */
body .msg-input,
body .msg-search-input,
body .explore-search-input { font-size: 16px; }
:root, html.dark {
    --m-nav-h:    52px;   /* etiketler kalkınca 58 → 52; dokunma hedefi yine 52px */
    --m-header-h: 48px;   /* üst barın yüksekliği */
    --m-drawer-w: 280px;  /* sol çekmecenin genişliği */
}
.mobile-drawer:focus,
.mobile-drawer a:focus,
.mobile-drawer button:focus { outline: none; box-shadow: none; }

.mobile-drawer a:focus-visible,
.mobile-drawer button:focus-visible {
    outline: 2px solid #1d9bf0; outline-offset: -2px; border-radius: 10px;
}

.mdrawer-stats { display: flex; gap: 18px; padding: 2px 16px 12px; }
.mdrawer-stats a { color: #8b929d; font-size: 13px; text-decoration: none; }
.mdrawer-stats strong { color: #0f1419; font-weight: 700; }
html.dark .mdrawer-stats strong { color: #f3f4f6; }
/* ---------------------------------------------------------
   2) ALT NAVİGASYON
   ---------------------------------------------------------
   Markup: layout.php'deki <nav class="mobile-nav md:hidden ...">
   Ölçüler Tailwind sınıflarından geliyordu (px-2 py-2, py-1.5, w-6).
   !important KULLANILMADI: bu dosya app.css'ten SONRA yükleniyor ve
   seçiciler Tailwind'in tek sınıflık seçicilerinden daha özgül.

   ÖLÇÜLDÜ (390px genişlik, Chromium):  70px  →  58px
   Gerçek iPhone'da buna ayrıca home-indicator payı eklenir.

   ETİKETLER 10px KALIYOR. Projede "12px altı yazı yok" kuralı var
   ama alt navigasyon etiketleri iOS ve Android'de standart olarak
   10px'tir; 12'ye çıkarmak barı yeniden büyütür. Bilinçli istisna. */
/* NE DEĞİŞTİ: markup artık Tailwind sınıfı taşımıyor (layout.php'de
   temizlendi), bu yüzden konumlandırma ve zemin de buradan geliyor.
   Etiketler kalktı, altı giriş dörde indi. */
.mobile-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    padding: 0 4px env(safe-area-inset-bottom, 0px);

    /* ÜST ÇİZGİ KALDIRILDI. Eskiden "border-top: 1px solid #e8ebef"
       vardı — gri bir ton. İstemedin, gitti. Geri istersen bu satırı
       aç:  border-top: 1px solid #e8ebef;
       Uyarı: çizgi gidince bar ile akış arasında hiçbir ayrım kalmıyor;
       beyaz zeminli bir gönderi bara yapışık görünebilir. */
    border-top: 0;
    background: #fff;

    /* DÜMDÜZ. Barın üstünde görünen gölgenin kaynağını dosyada
       bulamadım — burada gölge kuralı hiç yoktu. Bu yüzden kaynağını
       aramak yerine bütün ihtimalleri kapatıyorum: bar kendisi gölge,
       filtre veya bulanıklık üretmesin.

       Tek ayrım çizgisi üstteki 1px kenarlık. Gölge ile çizgi farklı
       şeyler: gölge barı içeriğin "üstünde yüzen" bir katman gibi
       gösterir, çizgi ise "burada bir sınır var" der. İkon-only bir
       barda ikincisi doğru — bar bir panel değil, bir kenar. */
    box-shadow: none;
    filter: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
html.dark .mobile-nav {
    border-top: 0;
    background: #000;
}

/* Barın İÇİNDEKİ hiçbir şey de gölge üretmesin — ikon SVG'lerine
   bir yerden drop-shadow/filter gelmiş olabilir (app.css purge
   çıktısı, satır içi stil, tema kuralı). Hepsini burada kesiyorum. */
.mobile-nav *,
.mobile-nav svg,
.mobile-nav svg * {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Dokunma hedefi 52px — Apple 44, Google 48 diyor; etiket gidince
   yer açıldı, hedefi büyütmemek için sebep yok. */
.mnav-item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: var(--m-nav-h);
    color: #6b7280;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
html.dark .mnav-item { color: #8b929d; }

.mnav-item svg { width: 25px; height: 25px; }

/* Eskiden basınca gri bir zemin beliriyordu (rgba(0,0,0,.05)).
   "Gri ton istemiyorum" dedin — zemin gitti. Geri bildirimi
   kaybetmemek için ikon hafifçe küçülüyor: zemin yok, his var. */
.mnav-item:active svg { transform: scale(.9); }
.mnav-item svg { transition: transform .12s ease; }

.mnav-item:focus-visible {
    outline: 2px solid #1d9bf0;
    outline-offset: -3px;
    border-radius: 12px;
}

/* AKTİF SEKME. Etiket olmayınca hangi sayfada olduğun yalnız ikonun
   rengiyle anlaşılırdı; üstteki kısa çizgi bunu bir bakışta veriyor. */
/* AKTİF SEKME — ÜSTTEKİ ÇİZGİ KALDIRILDI, YERİNE DOLGU.

   Eskiden ::before ile 22x2px bir çizgi çiziliyordu. Artık ikonun
   kendisi doluyor: pasif = ince kontur, aktif = dolu siluet. Bu,
   ikon-only barlarda standart yöntem (Instagram, X, Apple hepsi böyle)
   ve sebebi şu: çizgi ikonun DIŞINDA ayrı bir işaret, göz iki şeye
   birden bakmak zorunda. Dolgu ise ikonun kendisini değiştiriyor —
   tek nesne, tek okuma.

   fill CSS'ten geliyor; markup'taki fill="none" özniteliğini ezer
   (CSS her zaman sunum özniteliğinden güçlüdür). */
.mnav-item.is-active { color: #0f1419; }
html.dark .mnav-item.is-active { color: #fff; }

.mnav-item.is-active svg,
.mnav-item.is-active svg path,
.mnav-item.is-active svg circle {
    fill: currentColor;
}
.mnav-item.is-active svg { stroke-width: 1.4; }

/* Rozet: ikon ortalandığı için sağ üstüne göre konumlanıyor. */
.mnav-badge {
    position: absolute;
    top: 9px; left: 50%;
    margin-left: 5px;
    display: flex;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #0f1419;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
}
html.dark .mnav-badge { background: #fff; color: #0f1419; }


/* ---------------------------------------------------------
   3) SABİT NAVİGASYONUN ALTINDA KALAN İÇERİK
   ---------------------------------------------------------
   DÜZELTME: bunu önce body'ye vermiştim, YANLIŞTI. layout.php'de
   <main> zaten "pb-16" (64px) taşıyor; ikisi toplanınca dipte
   ~130px ölü boşluk oluyordu.

   Tek yerde ve doğru hesapla: bar yüksekliği + iPhone'un home
   göstergesi payı. main.flex-1 (0,1,1) Tailwind'in .pb-16'sından
   (0,1,0) özgül, !important gerekmiyor. */
main.flex-1 {
    padding-bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px) + 10px);
}


/* ---------------------------------------------------------
   4) ÜST BAR
   ---------------------------------------------------------
   Solda avatar (çekmeceyi açar), ortada logo, sağda simetri için
   avatarla aynı genişlikte boş bir kutu — logo tam ortada dursun.

   position: sticky (fixed DEĞİL): akışta yer kapladığı için
   içeriğe ayrıca padding-top vermek gerekmiyor. */
.mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 45;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    border-bottom: 1px solid #e8ebef;
    background: #ffffff;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transition: transform .24s ease;
}
html.dark .mobile-header {
    background: #000000;
    /* KOYU TEMA KENARLIĞI — silinirse açık temanın #e8ebef çizgisi
       siyah zeminde beyaz bir şerit olarak kalır. */
    border-bottom-color: rgba(255, 255, 255, .09);
}

.mobile-header-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
}
.mobile-header-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    object-fit: cover;
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}

.mobile-header-title {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-align: center; font-size: 16.5px; font-weight: 700;
    letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap;
}

/* Başlık + geri oku artık üst barda; sayfa içindeki kopyaları gitsin. */
body:has(.mobile-header) .page-hero-title,
body:has(.mobile-header) .msg-sidebar-title,
body:has(.mobile-header) .entity-title-line,
body:has(.mobile-header) .tag-title-line,
body:has(.mobile-header) .gl-title-line,
body:has(.mobile-header) .pd-hero-left { display: none; }

/* Geriye yalnız sayaç/etiket kaldıysa ince bir şerit bırak — SOLA yaslı. */
body:has(.mobile-header) .page-hero-head,
body:has(.mobile-header) .msg-sidebar-head {
    justify-content: flex-start;
    padding-top: 12px;
    padding-bottom: 8px;
}
body:has(.mobile-header) .msg-sidebar-head { justify-content: flex-end; }

/* Hiçbir şey kalmadıysa şeridi tamamen kaldır (gönderi sayfası böyle). */
/* İzin listesi: bu çocuklardan biri varsa şerit KALIR. .reviews-stat-row
   sonradan eklendi — değerlendirmeler sayfasındaki "İstatistiklerin ·
   17 puan · 8 beğeni" satırı sadece <span>'lerden oluştuğu için listede
   olmadığından mobilde tamamen gizleniyordu. */
body:has(.mobile-header) .page-hero-head:not(:has(.page-hero-note, .entity-kind, .reviews-stat-row, button, input, select)) {
    display: none;
}

.mobile-header-logo img { width: 22px; height: 22px; }
.mobile-header-logo span {
    font-family: var(--inbook-display, inherit);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Logoyu tam ortada tutan görünmez denge kutusu. */
.mobile-header-spacer { flex: 0 0 32px; }


/* ---------------------------------------------------------
   5) KABUĞU GİZLE/GÖSTER
   ---------------------------------------------------------
   Sınıfı assets/js/mobile-nav.js açıp kapatıyor. Aşağı kaydırınca
   üst bar VE sekme barı birlikte yukarı kayar.

   .page-tabs yapışkan; üst bar akışta yer kapladığı için sekme
   barının yapışma noktası üst barın yüksekliği kadar aşağı iner.
   Kabuk gizlenince ikisi de ekran dışına çıkar. */
/* DİKKAT: yapışma noktası YALNIZCA üst bar varken kaydırılıyor.
   Üst bar "if ($user)" ile basılıyor; misafir kullanıcıda yok. Koşulsuz
   yazsaydım misafirde sekme barı 34px aşağıda yapışır, tepede boşluk
   kalırdı. :has() desteklenmezse kural düşer ve bugünkü davranış kalır. */
body:has(.mobile-header) .page-tabs,
body:has(.mobile-header) .page-subbar {
    top: calc(var(--m-header-h) + (var(--shell-overlap) * -1 - 2px));
}

.page-tabs,
.page-subbar { transition: transform .24s ease; }

html.chrome-hidden .mobile-header { transform: translateY(-100%); }
html.chrome-hidden .page-tabs,
html.chrome-hidden .page-subbar {
    transform: translateY(calc(-100% - var(--m-header-h)));
}



@media (prefers-reduced-motion: reduce) {
    .mobile-header, .page-tabs, .page-subbar { transition: none !important; }
}


/* ---------------------------------------------------------
   6) SOL ÇEKMECE
   ---------------------------------------------------------
   Masaüstündeki sol menü (layout.php:992) "hidden md:flex" —
   768px ALTINDA HİÇ YOKTU. Yani mobilde logo, Akış/Profil/
   Değerlendirmeler bağlantıları, tema düğmesi, premium ve çıkış
   hiçbir yerden görünmüyordu. Bu çekmece o menünün mobil karşılığı;
   bağlantı verisi aynı $items dizisinden geliyor, kopyalanmadı. */
.mobile-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .24s ease;
}
html.drawer-open .mobile-drawer-scrim { opacity: 1; }
.mobile-drawer-scrim[hidden] { display: none; }

.mobile-drawer {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: var(--m-drawer-w);
    max-width: 86vw;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
    overflow-y: auto;
    background: #fff;

    /* SOLDAKİ GÖLGENİN KAYNAĞI BURASIYDI.
       Çekmece translateX(-100%) ile ekranın solunda duruyor — ama
       40px bulanıklıklı gölgesi ekran dışında kalmıyor, sayfanın sol
       kenarına taşıyordu. Kapalı bir panelin gölgesi görünmemeli.
       Gölge artık yalnızca çekmece AÇIKKEN veriliyor. */
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22, .7, .2, 1);
    overscroll-behavior: contain;
}
html.dark .mobile-drawer {
    background: #000;   /* #0f1115 yanlış siyahtı (SIYAH_20261026) */
    box-shadow: 1px 0 0 rgba(255, 255, 255, .14);
}
html.drawer-open .mobile-drawer {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(15, 23, 42, .22);
}
html.dark.drawer-open .mobile-drawer { box-shadow: 0 0 40px rgba(0, 0, 0, .7); }

/* Çekmece açıkken arkadaki sayfa kaymasın. html zaten kaydırma
   kutusu (input.css'te overflow-y:scroll) — kilit oraya konuyor.
   scrollbar-gutter:stable açık olduğu için genişlik oynamıyor. */
html.drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer, .mobile-drawer-scrim { transition: none !important; }
}

/* --- çekmece: kullanıcı kartı --- */
.mdrawer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 14px;
    color: inherit;
    text-decoration: none;
}
.mobile-drawer a:focus,
.mobile-drawer button:focus { outline: none; }

.mobile-drawer a:focus-visible,
.mobile-drawer button:focus-visible {
    outline: 2px solid #1d9bf0;
    outline-offset: -2px;
    border-radius: 10px;
}
.mdrawer-user img {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    object-fit: cover;
}
.mdrawer-user-name {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mdrawer-user-handle {
    display: block;
    margin-top: 1px;
    overflow: hidden;
    color: #8b929d;
    font-size: 12.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mdrawer-user-copy { min-width: 0; }

.mdrawer-sep {
    height: 1px;
    margin: 4px 16px 8px;
    background: #eceff3;
}
html.dark .mdrawer-sep { background: rgba(255, 255, 255, .08); }

/* --- çekmece: bağlantılar --- */
.mdrawer-list { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }

.mdrawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.mdrawer-link:hover { background: rgba(0, 0, 0, .05); }
html.dark .mdrawer-link:hover { background: rgba(255, 255, 255, .06); }
.mdrawer-link.is-active { font-weight: 700; }
.mdrawer-link svg { width: 22px; height: 22px; flex: 0 0 22px; stroke-width: 1.7; }

/* --- çekmece: alt bölüm --- */
.mdrawer-foot { flex: 0 0 auto; padding-top: 6px; }

.mdrawer-action {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.mdrawer-action:hover { background: rgba(0, 0, 0, .05); }
html.dark .mdrawer-action:hover { background: rgba(255, 255, 255, .06); }
.mdrawer-action.is-danger { color: #ef4444; }


} /* /@media 767 — kabuk */
@media (max-width: 767px) {
    .mobile-nav { transition: transform .24s ease; }
    html.chrome-hidden .mobile-nav { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav { transition: none; }
}

@media (max-width: 767px) {
    .mobile-header-back {
        display: flex; flex: 0 0 auto;
        align-items: center; justify-content: center;
        width: 32px; height: 32px; margin-left: -6px;
        border-radius: 9999px; color: inherit;
    }
    .mobile-header-back svg { width: 22px; height: 22px; }
}

@media (max-width: 767px) {
    body:has(.mobile-header) .explore-hero-search { padding-top: 14px; }

    /* Arama kutusu: 44px → 40px. Daha fazla inemez —
       yazı 16px'in altına düşerse iOS sayfayı yine yakınlaştırır. */
    body .explore-search-input { padding-top: 9px; padding-bottom: 9px; }
}

@media (max-width: 767px) {
    /* Keşfet hero'su explore.css'te zaten sticky; top:0 olduğu için
       üst barın ALTINA yapışıyordu. Diğer yapışkan barlarla aynı hiza. */
    body:has(.mobile-header) .explore-hero { top: var(--m-header-h); }
    .explore-hero { transition: transform .24s ease; }
    html.chrome-hidden .explore-hero {
        transform: translateY(calc(-100% - var(--m-header-h)));
    }

    /* Başlık üst bara gitti, aramanın üst tamponu kalmadı. */
    body:has(.mobile-header) .explore-hero-search { padding-top: 14px; }

    /* Arama kutusu 44px → 40px. Daha aşağı İNEMEZ: yazı 16px'in altına
       düşerse iOS odaklanınca sayfayı zorla yakınlaştırır. */
    body .explore-search-input { padding-top: 9px; padding-bottom: 9px; }
}

/* =========================================================
   OLUŞTUR DÜĞMESİ (FAB) + SEÇİM SAYFASI
   ========================================================= */
@media (max-width: 767px) {

.mfab {
    position: fixed;
    right: 16px;
    /* 14px → 28px: düğme çubuğa yapışık duruyordu ve başparmakla
       alt navigasyona yanlışlıkla basılıyordu. */
    /* 28px -> 52px. Düğme akışın üstünde duruyor; alt bara ne kadar
       yakınsa başparmak o kadar sık yanlışlıkla ikisinden birine
       basıyor. 52px, bir gönderi kartının alt eylem satırını da
       aşıyor — artık "Beğen / rebook" düğmelerinin üstüne binmiyor. */
    bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px) + 52px);
    z-index: 44;                     /* alt nav 40, üst bar 45 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #1d9bf0;
    color: #fff;

    /* ESKİDEN: box-shadow: 0 6px 18px rgba(29, 155, 240, .26);
       18px bulanıklıklı MAVİ bir ışımaydı ve düğme barın yalnızca 28px
       üstünde duruyor — ışığın bir kısmı doğrudan navigasyon barına
       düşüyordu. Bar "dümdüz beyaz" görünmemesinin en olası sebebi bu.

       Yerine dar ve nötr bir gölge: düğme hâlâ yüzüyor, ama ışık
       yayılmıyor ve renk taşımıyor.

       Gölgeyi tamamen istemiyorsan bu satırı sil. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
    cursor: pointer;
    /* SOLGUN DURUYOR. Tam opak mavi bir daire içeriğin üstünde sürekli
       dikkat çekiyordu; okurken rahatsız ediyor. Dokununca tam opak
       oluyor, yani geri bildirim kaybolmuyor. Eleman opaklığı bilinçli
       tercih: yalnız zemini şeffaflaştırmak ikonu zemine karıştırırdı. */
    /* .78 -> .62. Daha saydam istedin. Dokununca ve odaklanınca yine
       tam opak oluyor, yani geri bildirim kaybolmuyor.

       TERS ANLADIYSAM: "opaklık ver" ile daha KATI olmasını
       kastettiysen bu satırdaki sayıyı .92 yap. Tek değişecek yer. */
    opacity: .62;
    transition: transform .24s ease, opacity .18s ease;
}
.mfab svg { width: 24px; height: 24px; }
.mfab:active { transform: scale(.94); opacity: 1; }
.mfab:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* Alt nav gizlenince FAB boşluğa insin, havada asılı kalmasın. */
html.chrome-hidden .mfab {
    transform: translateY(calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)));
}

.mfab-scrim {
    position: fixed;
    inset: 0;
    z-index: 118;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .22s ease;
}
html.fab-open .mfab-scrim,
html.rev-open .mfab-scrim { opacity: 1; }
.mfab-scrim[hidden] { display: none; }

.mfab-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -16px 44px rgba(15, 23, 42, .22);
    transform: translateY(102%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
}
html.dark .mfab-sheet { background: #0f1117; box-shadow: 0 -16px 44px rgba(0,0,0,.65); }
html.fab-open .mfab-sheet { transform: none; visibility: visible; }

.mfab-grab {
    display: block;
    width: 38px; height: 4px;
    margin: 2px auto 12px;
    border-radius: 99px;
    background: rgba(120, 130, 145, .35);
}

.mfab-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 12px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.mfab-item:active { background: rgba(0, 0, 0, .05); }
html.dark .mfab-item:active { background: rgba(255, 255, 255, .06); }
.mfab-item > svg { width: 22px; height: 22px; flex: 0 0 22px; color: #1d9bf0; }
.mfab-item strong { display: block; font-size: 15px; font-weight: 650; line-height: 1.2; }
.mfab-item small  { display: block; margin-top: 2px; color: #8b929d; font-size: 12px; line-height: 1.3; }

/* Alt sayfa açıkken arka sayfa kaymasın — kaydırma kutusu html'de. */
html.fab-open, html.rev-open { overflow: hidden; }

}

@media (prefers-reduced-motion: reduce) {
    .mfab, .mfab-sheet, .mfab-scrim { transition: none !important; }
}

/* =========================================================
   KİTAP SEÇ / MANUEL EKLE MODALLARI  —  MOBİL
   ---------------------------------------------------------
   İKİ AYRI HATA VARDI:

   1) ALTTA KALIYORLARDI.
      layout.php'de ikisi de Tailwind "z-50" taşıyor. Gönderi alt
      sayfası z-130'a çıkınca, onun içinden açılan "Kitap Seç"
      modalı alt sayfanın ARKASINDA kalıyordu. Burada 150'ye
      çıkarılıyor — alt sayfanın (130) ve karartmanın (118) üstünde.
      layout.php'ye dokunmak gerekmiyor: #id (1,0,0) Tailwind'in
      .z-50 sınıfını (0,1,0) her hâlükârda yener.

   2) ZOOM.
      İçlerindeki alanlar Tailwind "text-sm" (14px). iOS Safari,
      odaklanılan alanın yazısı 16px'in ALTINDAysa sayfayı zorla
      yakınlaştırır. #id seçicisi text-sm'i yendiği için !important
      gerekmiyor.
   ========================================================= */
@media (max-width: 767px) {
    #bookModal,
    #manualBookModal { z-index: 150; }

    #bookSearchInput,
    #manualTitle,
    #manualAuthor { font-size: 16px; }

    /* Sonuç listesi klavye açıkken de kullanılabilir kalsın. */
    #bookResults { max-height: 46dvh; }
}


/* Çekmece açıkken arka plan kilidi.
   Gerçek kilidi assets/js/mobile-nav.js koyuyor (body'yi sabitliyor);
   bu satır yalnızca kaydırma çubuğunu da kapatan yedek. */
html.sheet-lock { overflow: hidden; }


/* FAB seçim sayfası da aşağı çekilerek kapansın (mobile-nav.js).
   Sürüklerken metin seçilmesin, dikey hareket bize gelsin. */
@media (max-width: 767px) {
    .mfab-sheet {
        -webkit-user-select: none;
                user-select: none;
        touch-action: pan-y;
    }
}


/* =========================================================
   SEKME BARI YÜKSEKLİĞİ — SITE GENELİ
   ---------------------------------------------------------
   Masaüstü ve mobil ana page-tab yüksekliği aynı: 52px.
   Hero overlap dolgusu .page-tabs üzerinde kalır; sekmenin
   kendi görünen yüksekliği küçültülmez.
   ========================================================= */
@media (max-width: 640px) {
    .page-tab {
        min-height: 52px;
        height: 52px;
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* =========================================================
   BOŞ HERO'NUN HAYALET ÇİZGİSİ
   ---------------------------------------------------------
   Bildirimler, Kaydedilenler gibi sayfalarda .page-hero'nun İÇİNDE
   yalnızca başlık satırı var. Başlığı üst bara taşıyınca o satır
   gizleniyor ve kart SIFIR YÜKSEKLİĞE iniyor — ama kendi zemini,
   gölgesi (aydınlık) ve alt kenarlığı (koyu) duruyor. Sıfır yükseklikli
   bir kutunun gölgesi ince bir bant, kenarlığı ise çizgi olarak
   görünüyor: üst barın altındaki o gereksiz şerit buydu.

   display:none YAZILMIYOR — kart akıştan çıkarsa negatif alt payı da
   (margin-bottom: -overlap) gider ve sekme barı 12px aşağı kayar;
   o zaman bu sayfalar anasayfayla aynı hizada durmaz. Kart yerinde
   kalıyor, yalnızca görünümü siliniyor.

   Koşul, başlığı gizleyen kuralla AYNI izin listesini kullanıyor:
   başlık satırı görünür kalıyorsa (ör. etiket sayfasındaki "2 gönderi")
   karta dokunulmuyor.
   ========================================================= */
@media (max-width: 767px) {
    body:has(.mobile-header) .page-hero:has(> .page-hero-head:only-child):not(:has(.page-hero-note, .entity-kind, .reviews-stat-row, button, input, select)),
    html.dark body:has(.mobile-header) .page-hero:has(> .page-hero-head:only-child):not(:has(.page-hero-note, .entity-kind, .reviews-stat-row, button, input, select)) {
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}