/**
 * assets/kabuk.css — TELEFON KABUĞU (üst çubuk 🔔·başlık·☰, sağdan kayan yan menü, alt 5'li çubuk + orta "Tarlam")
 *
 * İki yerde aynı görünüm:
 *   .app-modu    → Android/TWA uygulaması (header.php; app-mode.css ayrıca uygulamaya özel gizlemeleri yapar)
 *   .mobil-kabuk → normal web, telefon genişliği (≤768px; header.php <head>'deki betik ilk çizimden önce ekler)
 * Web'de YALNIZ "çerçeve" değişir: sayfa içeriği, sayfa yolu (breadcrumb), footer, ana sayfa araç ızgarası AYNEN kalır
 * (SEO: mobil öncelikli dizinleme bunları görür). Masaüstü (>768px) hiç etkilenmez.
 * Yükleme: header.php → web'de media="(max-width:768px)", app modunda koşulsuz. Varsayılan gizleme (.app-menu) header'da satır içi.
 */

/* ── Web telefonda uygulama modundaki çerçeve kuralları (app-mode.css'teki .app-modu karşılıklarıyla aynı değerler) ── */
.mobil-kabuk .site-header { display: none !important; }
.mobil-kabuk main.wrap { padding-top: 0; padding-bottom: 88px; }
.mobil-kabuk .app-ust {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 54px 12px; background: var(--bg-card);
}
.mobil-kabuk .app-ust b { font-family: 'Fraunces', serif; font-weight: 600; text-align: center; }
.mobil-kabuk .app-alt {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--bg-card); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mobil-kabuk .app-alt a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--ink-muted); font-size: 10.5px; font-weight: 600; padding: 6px 2px; border-radius: 10px;
}
.mobil-kabuk .app-alt a.aktif { color: var(--accent); }
/* 29.09: AI sohbet balonu telefonda yok (çok göze batıyordu) — yan menüdeki "Piyasa Asistanı" açar (kabuk.js data-asistan).
   Panel alt çubuğun hemen üstünde, üst çubuğun altında kalacak boyda. Masaüstünde balon aynen durur. */
:is(.app-modu, .mobil-kabuk) #ai-fab { display: none !important; }
:is(.app-modu, .mobil-kabuk) #ai-panel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important; width: calc(100vw - 24px) !important; height: min(560px, calc(100vh - 160px - env(safe-area-inset-bottom, 0px))) !important; }
/* iPhone "ana ekrana ekle" balonu (footer.php, yalnız web) alt çubuğun üstünde dursun */
.mobil-kabuk #pf-ios-ekle { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

/* ── Ortak: üst çubuk (🔔 sol, başlık orta, ☰ sağ; yapışkan) ── */
html:is(.app-modu, .mobil-kabuk) body { overflow-x: clip; }   /* body overflow-x:hidden yapışkanı bozuyordu; clip bozmaz */
:is(.app-modu, .mobil-kabuk) .app-ust {
  position: sticky; top: 0; z-index: 600; margin-bottom: 12px;
  padding-left: 54px; padding-right: 54px; box-shadow: 0 1px 0 var(--line, #e6e0d4);
}
:is(.app-modu, .mobil-kabuk) .app-ust b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
:is(.app-modu, .mobil-kabuk) .app-ust .app-zil {
  position: absolute; right: auto; left: 8px; top: calc(4px + env(safe-area-inset-top, 0px));
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--ink, #222); line-height: 1;
}
.app-ust .app-hamburger { display: none; }
:is(.app-modu, .mobil-kabuk) .app-ust .app-hamburger {
  display: flex; align-items: center; justify-content: center; position: absolute; right: 6px; top: calc(4px + env(safe-area-inset-top, 0px));
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink, #222); cursor: pointer;
}
:is(.app-modu, .mobil-kabuk) .app-ust .app-hamburger:active,
:is(.app-modu, .mobil-kabuk) .app-ust .app-hamburger[aria-expanded="true"] { background: var(--bg, #f6f1e7); }
:is(.app-modu, .mobil-kabuk) .site-header { display: none !important; }

/* ── Ortak: alt çubuk + ORTA düğme (Tarlam: büyük, yuvarlak, çubuğun üstüne taşan yeşil) ── */
.app-svg { display: block; flex: 0 0 auto; }
:is(.app-modu, .mobil-kabuk) .app-alt { overflow: visible; }
:is(.app-modu, .mobil-kabuk) .app-alt a .app-ikon { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 0; }
:is(.app-modu, .mobil-kabuk) .app-alt a.app-orta { position: relative; justify-content: flex-end; color: #0a4b2d; font-weight: 800; }
:is(.app-modu, .mobil-kabuk) .app-alt a.app-orta::before { content: ""; display: block; height: 24px; }   /* yazı diğerleriyle aynı hizada */
:is(.app-modu, .mobil-kabuk) .app-alt a.app-orta .app-ikon {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: 60px; height: 60px; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, #3a8f47, #1f6b30);
  border: 4px solid var(--bg-card, #fffdf7); box-shadow: 0 6px 16px rgba(31, 107, 48, .38); transition: transform .15s ease, box-shadow .15s ease;
}
:is(.app-modu, .mobil-kabuk) .app-alt a.app-orta:active .app-ikon { transform: translateX(-50%) scale(.94); box-shadow: 0 3px 8px rgba(31, 107, 48, .35); }
:is(.app-modu, .mobil-kabuk) .app-alt a.app-orta.aktif { color: #1f6b30; }
:is(.app-modu, .mobil-kabuk) .app-alt a.app-orta.aktif .app-ikon { box-shadow: 0 0 0 3px rgba(58, 143, 71, .25), 0 6px 16px rgba(31, 107, 48, .38); }

/* Alt çubuğun arkasında kalmasın: ana sayfa ⓘ panelleri (telefonda altta açılır), Pazar sihirbazının Geri/Devam şeridi */
:is(.app-modu, .mobil-kabuk) .info-toggle[open] .info-panel { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
:is(.app-modu, .mobil-kabuk) .pz-nav { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }

/* ── Ortak: sağdan kayan yan menü ── */
:is(.app-modu, .mobil-kabuk) .app-menu { display: block; position: fixed; inset: 0; z-index: 3000; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
:is(.app-modu, .mobil-kabuk) .app-menu.acik { visibility: visible; pointer-events: auto; transition: visibility 0s; }
html.app-menu-acik, html.app-menu-acik body { overflow: hidden; }
html.app-menu-acik #ai-fab, html.app-menu-acik #ai-panel { visibility: hidden; }   /* AI balonu menünün üstüne binmesin */
.app-menu-perde { position: absolute; inset: 0; background: rgba(20, 24, 18, .45); opacity: 0; transition: opacity .28s ease; }
.app-menu.acik .app-menu-perde { opacity: 1; }
.app-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--bg-card, #fffdf7); display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform .3s cubic-bezier(.22, .8, .24, 1);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .18); outline: none; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-menu.acik .app-menu-panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .app-menu-panel, .app-menu-perde { transition: none; } }
.app-menu-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0a4b2d; color: #fff; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 18px; }
.app-menu-marka { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; }
.app-menu-marka img { border-radius: 8px; background: #fff; }
.app-menu-kapat { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.app-menu-kisi { padding: 14px 16px; border-bottom: 1px solid var(--line, #e6e0d4); display: flex; flex-direction: column; gap: 10px; }
.app-menu-kisi p { margin: 0; font-size: 14px; color: var(--ink-soft, #555); }
.app-menu-profil { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink, #222); }
.app-menu-profil b { display: block; font-size: 17px; }
.app-menu-profil small { display: block; font-size: 13px; color: #2d7a3a; font-weight: 700; }
.app-menu-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #2d7a3a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.app-menu-giris { display: flex; gap: 8px; }
.app-menu-giris a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; font-weight: 800; font-size: 15px; text-decoration: none; border: 2px solid #2d7a3a; color: #0a4b2d; }
.app-menu-giris a.ana { background: #2d7a3a; color: #fff; }
.app-menu-bildirim { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; background: var(--bg, #f6f1e7); border: 1px solid var(--line, #e6e0d4); font-weight: 700; font-size: 14.5px; color: var(--ink, #222); text-decoration: none; }
.app-menu-yukle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; background: #e8f3e6; color: #0a4b2d; font-weight: 800; font-size: 14.5px; text-decoration: none; }
.app-menu-urun { padding: 10px 16px 12px; border-bottom: 1px solid var(--line, #e6e0d4); }
.app-menu-urun h3 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted, #888); }
.app-menu-urun div { display: flex; flex-wrap: wrap; gap: 6px; }
.app-menu-urun a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line, #e6e0d4); background: var(--bg, #f6f1e7); color: var(--ink, #222); font-size: 14px; font-weight: 700; text-decoration: none; }
.app-menu-urun a.aktif { background: var(--accent-deep, #a84d1e); border-color: var(--accent-deep, #a84d1e); color: #fff; }
.app-menu-liste { padding: 6px 8px 10px; }
.app-menu-liste h3 { margin: 14px 10px 4px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted, #888); }
.app-menu-liste a { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 10px; border-radius: 12px; text-decoration: none; color: var(--ink, #222); font-size: 16px; font-weight: 600; }
.app-menu-liste a span { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft, #555); font-size: 20px; }
.app-menu-liste a em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--accent, #c0612b); padding: 3px 7px; border-radius: 999px; }
.app-menu-liste a:active { background: var(--bg, #f6f1e7); }
.app-menu-liste a.aktif { background: #e8f3e6; color: #0a4b2d; }
.app-menu-liste a.aktif span { color: #1f6b30; }
.app-menu-liste a.cikis, .app-menu-liste a.cikis span { color: #9b2c1f; }
.app-menu-alt { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 14px 18px 18px; border-top: 1px solid var(--line, #e6e0d4); }
.app-menu-alt a { font-size: 13px; color: var(--ink-muted, #888); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }

/* ── 30.09.2026 YEREL ANDROID UYGULAMASI (android/ projesi — WebView kimliği "PamukFiyatApp", uygulama <html>'e .pf-yerel ekler;
   header.php'deki ilk betik de aynı sınıfı yedek olarak ekler). Üst ve alt çubuk uygulamanın KENDİ (native) çubukları →
   web'dekiler gizli, alta sabitlenen öğeler web alt çubuğunun payını bırakmaz. Web push yerine uygulama kendi bildirimini
   yönettiği için web'in bildirim düğmeleri ve "uygulamayı yükle" bağlantısı da gizli. Web ve TWA görünümü hiç etkilenmez. ── */
html.pf-yerel .app-ust, html.pf-yerel .app-alt { display: none !important; }
html.pf-yerel main.wrap { padding-top: 12px !important; padding-bottom: 20px !important; }
html.pf-yerel [data-bildirim], html.pf-yerel .app-menu-yukle, html.pf-yerel #bpWrap, html.pf-yerel #pf-ios-ekle { display: none !important; }
html.pf-yerel #ai-panel { bottom: 12px !important; height: min(560px, calc(100vh - 24px)) !important; }
html.pf-yerel .info-toggle[open] .info-panel { bottom: 12px !important; }
html.pf-yerel .pz-nav { bottom: 0 !important; }
html.pf-yerel .tl-fab { bottom: 16px !important; }
/* 2.1+ (Firebase bildirimleri): uygulama <html>'e .pf-bildirim de ekler → menüdeki "Bildirimler" görünür, dokununca
   uygulama kendi izin/ayar ekranını açar (MainActivity). 2.0'da bildirim yok, düğme gizli kalır. */
html.pf-yerel.pf-bildirim .app-menu-bildirim[data-bildirim] { display: flex !important; }