/* ═══════════════════════════════════════════════════════════════════
   mobile-header.css — Mobil Header & Menü Tam Uyumluluk
   Düzeltmeler: portrait modda link/buton tıklama sorunları giderildi,
   touch-action:none kaldırıldı, z-index çakışmaları düzeltildi,
   iOS safe-area desteği eklendi
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scrollbar Gizleme ──────────────────────────────────────────── */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── iOS Safe Area Desteği ──────────────────────────────────────── */
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-area-pt {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── Genel Mobil Overflow Koruması ──────────────────────────────── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Landscape Hızlı Nav (Yatay Mod) ───────────────────────────── */
.cc-mobile-landscape-nav {
  display: none;
}

/* DÜZELTME: Landscape nav sticky — header'ın hemen altında (HTML sırası doğru).
   position:sticky + top:0 ile header scroll edilince nav de yapışır. */
@media (orientation: landscape) and (max-height: 500px) {
  #mobileLandscapeNav {
    position: sticky;
    top: 0;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape nav çubuğunu gizle — header yeterli */
  .cc-mobile-landscape-nav {
    display: none !important;
  }
}

/* ── Landscape: Header portrait ile aynı kompakt düzen ─────────── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape'de desktop nav gizle — hamburger menü kullanılır */
  header nav.hidden.md\:flex,
  header .desktop-nav {
    display: none !important;
  }
  /* Header sabit yükseklik, tek satır — koyu arka plan */
  header.sticky,
  header.landscape-header {
    background: #0d0d1a !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  /* İçerik düzeni: logo + arama + butonlar yan yana */
  header.sticky > div,
  header > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 0.75rem !important;
    height: 48px !important;
    flex-wrap: nowrap !important;
  }

  /* Logo — siyah arka plan üstünde beyaz metin */
  .landscape-logo-bg {
    background: #1e293b !important;
  }
  .landscape-logo-img {
    filter: invert(1) brightness(1.2) !important;
  }
  .landscape-site-name {
    color: #ffffff !important;
  }

  /* Arama kutusu — landscape'de koyu */
  #mobileHeaderSearch,
  #landscapeHeaderSearch {
    font-size: 0.8rem !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
  }
  #mobileHeaderSearch::placeholder,
  #landscapeHeaderSearch::placeholder {
    color: rgba(255,255,255,0.45) !important;
  }
  .mobile-search-icon {
    color: rgba(255,255,255,0.4) !important;
  }

  /* Logo küçük ikon boyutu */
  header a[aria-label] img,
  header.sticky .container-app > a img {
    height: 1.75rem !important;
    width: auto !important;
    max-width: 100px !important;
  }

  /* Hamburger landscape'de görünür — siyah arka plan üstünde */
  #mobileMenuButton {
    display: inline-flex !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
  }

  /* Tema butonu landscape'de görünür */
  header #themeToggle {
    display: inline-flex !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
  }
  header #themeToggle span {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
  }

  /* Header butonları kompakt */
  header.sticky button,
  header.sticky .btn {
    min-height: unset !important;
    min-width: unset !important;
  }
}

/* ── Landscape search kutusu — sadece landscape'de görünür ─────── */
.landscape-search-box {
  display: none;
}
@media (orientation: landscape) and (max-height: 500px) {
  .landscape-search-box {
    display: block !important;
  }
}

/* ── Mobile-only / Desktop-only logo visibility ─────────────────── */
/* Portrait mobil: mobile logo görünür, desktop logo gizli         */
/* Landscape mobil (max-height:500px): mobile logo görünür          */
/* Tablet/Desktop (min-height:501px ve md+): desktop logo görünür   */
.mobile-only-logo {
  display: flex;
}
.desktop-only-logo {
  display: none;
}
@media (min-width: 768px) and (min-height: 501px) {
  .mobile-only-logo {
    display: none !important;
  }
  .desktop-only-logo {
    display: flex !important;
  }
}

/* ── Mobil Header Gizleme Kuralları (≤767px) ────────────────────── */
@media (max-width: 767px) {
  /* Dil seçici */
  #langToggle,
  #langMenu,
  div:has(> #langToggle) {
    display: none !important;
  }

  /* Giriş / Kayıt butonları — drawer içinde gösterilir */
  header .container-app .flex.items-center.gap-0\.5 > a[href="/login"],
  header .container-app .flex.items-center.gap-0\.5 > a[href="/register"] {
    display: none !important;
  }

  /* Bildirim, saat dilimi, kullanıcı menüsü — drawer içinde gösterilir */
  /* themeToggle portrait+landscape'de görünür kalıyor */
  header #notification-toggle,
  header #timezoneToggle,
  header #mobileLandscapeMenuToggle,
  header #userMenuToggle {
    display: none !important;
  }

  /* Header yüksekliği kompakt */
  header .container-app {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Logo boyutu küçük ekranlarda */
  header a[aria-label] img {
    height: 2rem;
    max-width: 120px;
  }

  /* Giriş/Kayıt butonları — drawer içinde */
  header a[href="/login"],
  header a[href="/register"] {
    display: none !important;
  }

  /* Tema butonu her zaman görünür */
  header #themeToggle {
    display: inline-flex !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    min-height: unset !important;
    min-width: unset !important;
  }

  /* Hamburger her zaman görünür */
  #mobileMenuButton {
    display: inline-flex !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    min-height: unset !important;
    min-width: unset !important;
  }
}

/* ── Hamburger Butonu — Görünürlük Kontrolü ─────────────────────── */
/* Varsayılan: görünür */
#mobileMenuButton {
  display: inline-flex !important;
}

/* Tablet/Desktop (768px+ VE yükseklik 501px+): gizle */
@media (min-width: 768px) and (min-height: 501px) {
  #mobileMenuButton {
    display: none !important;
  }
}

/* Landscape mobil (max-height:500px): her zaman görünür */
@media (orientation: landscape) and (max-height: 500px) {
  #mobileMenuButton {
    display: inline-flex !important;
  }
}

/* ── Mobile Menu Drawer ─────────────────────────────────────────── */
#mobileMenu {
  display: none;
  z-index: 9999;
}

#mobileMenu:not(.hidden) {
  display: block !important;
}

#mobileMenuPanel {
  z-index: 10000;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
}

#mobileMenuPanel:not(.-translate-x-full) {
  transform: translateX(0);
}

/* Backdrop geçiş animasyonu */
#mobileMenu > .absolute {
  transition: opacity 300ms ease;
}

/* Menü kapalıyken backdrop görünmez */
#mobileMenu.hidden > .absolute {
  opacity: 0;
  pointer-events: none;
}

/* ── DÜZELTME: Drawer açıkken scroll kilidi ─────────────────────── */
/* touch-action:none KALDIRILDI — bu portrait modda tüm tıklamaları
   engelliyordu. Sadece overflow:hidden yeterli. */
body.menu-open {
  overflow: hidden;
  /* touch-action: none; — KALDIRILDI, tıklamaları engelliyordu */
}

/* Drawer içindeki nav item — dokunma geri bildirimi */
.mobile-nav-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  /* Portrait modda tıklama için yeterli alan */
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Aktif nav item ikonu vurgusu */
.mobile-nav-item.active .nav-item-icon {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Drawer scroll alanı — iOS momentum scroll */
#mobileMenuPanel .flex-1.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Admin Mobil Menü Z-Index Katmanları ────────────────────────── */
/* Admin bottom nav: z-60 */
/* Admin overlay: z-70 */
/* Admin full menu: z-80 */
/* Admin header (sticky): z-50 */
/* Normal mobile menu: z-9999 */

#adminMobileMenuOverlay {
  z-index: 70;
}

#adminMobileMenu {
  z-index: 80;
}

/* Admin mobil menü animasyon düzeltmesi */
#adminMobileMenu.hidden {
  display: none !important;
}

#adminMobileMenu:not(.hidden) {
  display: flex !important;
}

/* ── Küçük Ekran (≤380px) Kompakt Düzen ────────────────────────── */
@media (max-width: 380px) {
  header .container-app {
    gap: 0.125rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #mobileMenuButton {
    padding: 0.375rem;
  }

  #mobileMenuPanel {
    width: 92vw;
    max-width: 92vw;
  }
}

/* ── Tablet (768px–1023px) Düzeni ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet'te nav header'da gösteriliyor — landscape nav gizle */
  .cc-mobile-landscape-nav {
    display: none !important;
  }

  /* Tüm sağ araçlar tablet'te görünür */
  header #themeToggle,
  header #notification-toggle,
  header #userMenuToggle {
    display: inline-flex !important;
  }

  header #langToggle,
  div:has(> #langToggle) {
    display: block !important;
  }

  header #timezoneToggle,
  div:has(> #timezoneToggle) {
    display: block !important;
  }

  /* Tablet'te nav-link font biraz küçük tutulsun */
  header nav .nav-link {
    font-size: 0.7rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }

  /* Logo tablet'te orta boy */
  header a[aria-label] img {
    height: 2.75rem;
    max-width: 200px;
  }
}

/* ── Yatay Mod (Landscape) Genel Düzeltmeler ────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Sticky header yüksekliği azalt */
  header.sticky {
    position: sticky;
    top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  header.sticky .container-app {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  #mobileMenuPanel {
    height: 100dvh;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.menu-open {
    overflow: hidden;
  }

  #adminMobileMenu {
    top: 0.5rem;
    bottom: 4.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mobileLandscapeDropdown {
    z-index: 9999 !important;
    position: absolute;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── FeaturedLive — Landscape Mobil Düzeltme ────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .featured-mobile-cards  { display: block  !important; }
  .featured-desktop-table { display: none   !important; }
  .featured-card-header   { flex-direction: column !important; }
  .featured-mobile-btns   { display: flex   !important; }
  .featured-desktop-btns  { display: none   !important; }
}

/* ── Admin Mobil Menü — Landscape Genişletme ────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  #adminMobileMenu {
    inset-inline: 0 !important;
    top: 0 !important;
    bottom: 4.5rem !important;
    border-radius: 0 !important;
  }
}

/* overflow-x:hidden olan html/body landscape dropdown'ı kesebilir. */
@media (orientation: landscape) and (max-height: 500px) {
  #mobileLandscapeDropdown {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999 !important;
  }
}

/* ── Yatay Mod (Landscape) Z-Index Hiyerarşisi ──────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  header.sticky { z-index: 9998 !important; }
  .cc-mobile-landscape-nav { z-index: 9997 !important; }
  #mobileLandscapeDropdown { z-index: 9999 !important; }
  #mobileMenu { z-index: 100000 !important; }
  #mobileMenuPanel { z-index: 100001 !important; }
}

/* ── Landscape: Menü açıkken header stacking context kır ─────────── */
/* backdrop-filter olan header, fixed drawer'ı klipliyor.            */
/* Menü açıkken header'ın backdrop-filter'ını devre dışı bırak.     */
@media (orientation: landscape) and (max-height: 500px) {
  body.menu-open header.sticky,
  body.menu-open header.landscape-header,
  html.menu-is-open header.sticky,
  html.menu-is-open header.landscape-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    will-change: auto !important;
    isolation: auto !important;
  }

  /* Menü açıkken html/body overflow kısıtlamalarını kaldır */
  body.menu-open,
  html.menu-is-open,
  html.menu-is-open body {
    overflow: hidden !important;
    overflow-x: visible !important;
  }

  /* Menü overlay tam ekran — fixed + overflow visible */
  #mobileMenu {
    position: fixed !important;
    inset: 0 !important;
    overflow: visible !important;
    z-index: 999999 !important;
  }

  #mobileMenu:not(.hidden) {
    display: block !important;
    visibility: visible !important;
  }

  /* Panel sol kenar — tüm yükseklik */
  #mobileMenuPanel {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 999999 !important;
    transform: translateX(-100%) !important;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Panel açıkken transform sıfırla */
  #mobileMenuPanel:not(.-translate-x-full) {
    transform: translateX(0) !important;
  }

  /* Panel kapalıyken gizle */
  #mobileMenuPanel.-translate-x-full {
    transform: translateX(-100%) !important;
  }

  /* Backdrop görünür */
  #mobileMenu:not(.hidden) > .absolute {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ── Dikey Mod (Portrait) Düzeltmeler ───────────────────────────── */
@media (max-width: 767px) and (orientation: portrait) {
  /* Drawer tam yükseklik */
  #mobileMenuPanel {
    height: 100dvh;
    height: 100vh; /* fallback */
  }

  /* Portrait modda tüm linkler ve butonlar tıklanabilir olmalı */
  a, button, [role="button"], label[for], input[type="submit"],
  input[type="button"], input[type="reset"] {
    /* Tıklama alanını engelleme */
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* Portrait modda z-index hiyerarşisi */
  header {
    z-index: 9998 !important;
    position: sticky !important;
    top: 0 !important;
  }

  /* Sayfanın üstünü kapatan overlay olmadığından emin ol */
  #mobileMenu.hidden {
    pointer-events: none !important;
    display: none !important;
  }
}

/* ── Admin Paneli Mobil Padding (Bottom Nav için) ───────────────── */
@media (max-width: 1023px) {
  body:has(nav.lg\\:hidden.fixed.bottom-0) {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Footer Mobil Düzeltmeler ───────────────────────────────────── */
@media (max-width: 639px) {
  footer .container-app {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  footer .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* ── Dropdown Menüler: backdrop-filter stacking context fix ─────── */
/* header.sticky backdrop-filter:blur stacking context oluşturur.   */
/* position:fixed + JS ile konumlandırma ile aşılır (tüm ekranlar). */
#userMenu,
#langMenu,
#timezoneMenu {
  position: fixed !important;
  z-index: 10010 !important;
  /* top / right değerleri app.js initUserDropdown() tarafından     */
  /* getBoundingClientRect() ile dinamik hesaplanır.                 */
}

#timezoneMenu {
  max-height: 60vh;
  overflow-y: auto;
}

/* Notification dropdown: önceden fixed, korunuyor */
@media (max-width: 767px) {
  #notifications-dropdown {
    position: fixed !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    top: 3.5rem !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    z-index: 10010 !important;
  }
}

/* ── PWA Banner Mobil Düzeltme ──────────────────────────────────── */
@media (max-width: 767px) {
  #pwa-banner {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    max-width: none !important;
    justify-content: center;
    /* Taşmayı önle */
    box-sizing: border-box;
    width: calc(100vw - 1.5rem) !important;
  }
  /* PWA banner içindeki butonlar taşmasın */
  #pwa-banner button,
  #pwa-banner a {
    flex-shrink: 0;
    white-space: nowrap;
  }
  #pwa-banner .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ── Genel Dokunma Hedefi — Portrait & Landscape ────────────────── */
/* DÜZELTME: Genel button/a[href] için min-height/min-width uygulamak
   portrait modda layout'u bozuyor ve tıklamaları engelliyor.
   touch-action:manipulation yeterli — boyut kısıtlaması yok. */
@media (max-width: 1023px) {
  .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  header button,
  header a[href] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Tüm interaktif elementler için dokunma iyileştirmesi */
  a[href],
  button,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Portrait Modda Sayfa İçi Link/Buton Tıklama Düzeltmesi ─────── */
/* Bazı sayfalar fixed/absolute overlay'ler nedeniyle tıklamaları
   engelleyebilir. Bu kural o durumu önler. */
@media (max-width: 767px) {
  /* page-transition overlay tıklamaları engellememeli */
  #pageTransition {
    pointer-events: none !important;
  }

  /* Kapalı mobile menu tıklamaları engellememeli */
  #mobileMenu.hidden,
  #mobileMenu[style*="display: none"],
  #mobileMenu[style*="display:none"] {
    pointer-events: none !important;
  }

  /* Scroll candle tıklamaları engellememeli */
  .scroll-candle,
  .mouse-candle {
    pointer-events: auto;
    z-index: 70;
  }

  /* iOS'ta -webkit-overflow-scrolling ile scroll içindeki linkler */
  .overflow-y-auto a,
  .overflow-x-auto a,
  [style*="overflow"] a {
    pointer-events: auto;
    position: relative;
    z-index: 1;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ADMİN PANELİ MOBİL DİKEY (PORTRAIT) DÜZELTMELER
   Sorunlar: sayfa aşağı inmiyor, butonlar çalışmıyor,
   tema toggle, header menü sorunları
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Admin body — tüm sayfalarda admin-page sınıfı zorunlu ───── */
/* Sidebar.php'den gelen bottom nav varsa padding uygula */
@media (max-width: 1023px) {
  /* :has() desteklemeyen tarayıcılar için fallback */
  body.admin-page {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
  /* :has() destekleyen tarayıcılar için daha kesin kural */
  body:has(#adminMobileMenu) {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 2. Admin main — overflow-x-hidden scroll'u ENGELLEMESIN ────── */
/* overflow-x:hidden + position:sticky çakışmasını önle */
@media (max-width: 1023px) {
  body.admin-page main,
  body.admin-dashboard-page main,
  body[class*="admin-"] main {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
  }

  /* Admin grid container — scroll engelleme */
  body.admin-page .grid.lg\:grid-cols-12,
  body[class*="admin-"] .grid.lg\:grid-cols-12 {
    overflow: visible;
  }
}

/* ── 3. Admin header (sticky) — z-index ve tıklama düzeltmesi ───── */
@media (max-width: 1023px) {
  /* Admin sayfalarındaki sticky header */
  body.admin-page header.sticky,
  body.admin-page header.lg\:hidden,
  body[class*="admin-"] header.lg\:hidden {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    /* Tıklama alanı tam */
    pointer-events: auto !important;
  }

  /* Header içindeki tüm butonlar tıklanabilir */
  body.admin-page header button,
  body.admin-page header a,
  body[class*="admin-"] header button,
  body[class*="admin-"] header a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }
}

/* ── 4. Admin tema toggle butonu — her zaman görünür ve çalışır ─── */
@media (max-width: 1023px) {
  /* Admin header'daki tema butonu */
  body.admin-page header button[onclick*="toggleAdminTheme"],
  body.admin-page header button[onclick*="Theme"],
  body[class*="admin-"] header button[onclick*="toggleAdminTheme"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* ── 5. Admin mobil menü — portrait modda tam çalışma ───────────── */
@media (max-width: 1023px) {
  /* Menü paneli scroll edilebilir */
  #adminMobileMenu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Menü içindeki tüm linkler ve butonlar tıklanabilir */
  #adminMobileMenu a,
  #adminMobileMenu button,
  #adminMobileMenu [role="button"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Menü overlay — tıklama geçirmez (sadece kapat için) */
  #adminMobileMenuOverlay {
    pointer-events: auto !important;
    cursor: pointer;
  }
}

/* ── 6. Admin bottom nav — portrait modda tıklama düzeltmesi ────── */
@media (max-width: 1023px) {
  /* Bottom nav sabit konumda, tıklanabilir */
  nav.lg\:hidden.fixed.bottom-0 {
    pointer-events: auto !important;
    z-index: 60 !important;
    /* iOS safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  nav.lg\:hidden.fixed.bottom-0 a,
  nav.lg\:hidden.fixed.bottom-0 button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── 7. Admin sayfa içeriği — scroll ve tıklama düzeltmesi ──────── */
@media (max-width: 1023px) {
  /* Sidebar (desktop) mobilde gizli — tıklamaları engellemesin */
  body.admin-page aside.hidden,
  body[class*="admin-"] aside.hidden {
    display: none !important;
    pointer-events: none !important;
  }

  /* Ana içerik alanı tam genişlik */
  body.admin-page .col-span-12.lg\:col-span-7,
  body.admin-page .col-span-12.lg\:col-span-9,
  body.admin-page .col-span-12.lg\:col-span-10,
  body[class*="admin-"] section.col-span-12 {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  /* Kartlar ve tablolar scroll edilebilir */
  body.admin-page .overflow-x-auto,
  body[class*="admin-"] .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Butonlar ve form elemanları tıklanabilir */
  body.admin-page button,
  body.admin-page a[href],
  body.admin-page input,
  body.admin-page select,
  body.admin-page textarea,
  body[class*="admin-"] button,
  body[class*="admin-"] a[href],
  body[class*="admin-"] input,
  body[class*="admin-"] select {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── 8. Menü açıkken sayfa scroll kilidi — sadece overflow ──────── */
/* position:fixed KULLANILMIYOR — portrait modda tıklamaları kilitler */
body.admin-page.menu-open,
body[class*="admin-"].menu-open {
  overflow: hidden !important;
  position: relative !important;
  /* position, top, width AYARLANMIYOR */
}

/* ── 9. Admin overlay'ler — kapalıyken tıklama geçirmez ─────────── */
#adminMobileOverlay.hidden,
#adminMobileMenuOverlay.hidden,
#adminMobileOverlay-dashboard.hidden {
  pointer-events: none !important;
  display: none !important;
}

/* opacity-0 durumunda da (animasyon geçişi sırasında) tıklama geçirmez */
#adminMobileMenuOverlay.opacity-0,
#adminMobileMenuOverlay.pointer-events-none {
  pointer-events: none !important;
}

/* ── 10. Portrait modda z-index hiyerarşisi ─────────────────────── */
@media (max-width: 1023px) and (orientation: portrait) {
  /* Admin sticky header */
  body.admin-page header.sticky,
  body[class*="admin-"] header.sticky {
    z-index: 50 !important;
  }

  /* Bottom nav */
  nav.lg\:hidden.fixed.bottom-0 {
    z-index: 60 !important;
  }

  /* Overlay */
  #adminMobileMenuOverlay {
    z-index: 70 !important;
  }

  /* Tam menü paneli */
  #adminMobileMenu {
    z-index: 80 !important;
  }

  /* Dropdownlar (modal, tooltip vb.) */
  .admin-dropdown,
  [data-admin-dropdown] {
    z-index: 90 !important;
  }
}

/* ── 11. coins-create.php — admin-page sınıfı eksik, fallback ───── */
body.h-full.bg-gradient-to-br {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* ── 12. Admin sayfalarında overflow-x-hidden olan main düzeltmesi  */
/* overflow-x:hidden olan main içinde position:sticky çalışmaz.
   clip kullanarak yatay taşmayı önle ama sticky'yi kırma */
@media (max-width: 1023px) {
  main.overflow-x-hidden {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PWA / MOBİL TAŞMA EK DÜZELTMELERİ
   Sayfanın alt kısımlarındaki overflow sorunları
   ═══════════════════════════════════════════════════════════════════ */

/* ── Genel Site Taşma Koruması ──────────────────────────────────── */
@media (max-width: 1023px) {
  /* Tüm sayfalar için temel yatay overflow engeli */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    /* scrollbar-gutter: auto — stable PWA'da genişlik ekler */
    scrollbar-gutter: auto !important;
  }

  /* Sezgisel overflow koruması: tüm direkt children */
  body > * {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Fixed elementler dışarı taşmasın */
  body > *:not([style*="position: fixed"]):not([style*="position:fixed"]) {
    max-width: 100%;
  }
}

/* ── PWA Standalone Modu — Alt Kısım Sorunları ─────────────────── */
@media (display-mode: standalone) {
  /* Ana sayfa alt kısmı safe area inset ile kapansın */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
  }

  body.has-bottom-bar {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Footer alt kısım safe area */
  footer#site-footer,
  footer.footer-neon {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem) !important;
  }

  /* PWA bottom bar — iPhone home indicator üzerinde olsun */
  #mobileBottomNavContainer {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* PWA banner — alt safearea + menü handle çakışmasın */
  #pwa-banner {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Scrollable içerik alanı tam ekran kullanabilsin */
  main {
    min-height: calc(100dvh - 4rem);
    min-height: calc(100vh - 4rem); /* fallback */
  }
}

/* ── Footer Responsive Düzeltmeler ─────────────────────────────── */
@media (max-width: 767px) {
  /* Footer ana grid — tek sütun */
  footer .grid.gap-8.lg\:grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Footer orta sütun (linkler) — 2x kolon */
  footer .grid.grid-cols-2.gap-8.sm\:grid-cols-3,
  footer .grid.grid-cols-2.gap-8 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 1rem !important;
  }

  /* Footer brand sütunu tam genişlik */
  footer .lg\:col-span-4 {
    grid-column: span 1 !important;
  }

  /* Footer newsletter sütunu tam genişlik */
  footer .lg\:col-span-3 {
    grid-column: span 1 !important;
  }

  /* Footer links sütunları */
  footer .lg\:col-span-5 {
    grid-column: span 1 !important;
  }

  /* Footer CTA butonu tam genişlik */
  footer .lg\:col-span-3 > div.mt-6 > a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Footer bottom bar */
  footer .border-t > .container-app.flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Footer bottom bar sağ: "not advice" + back to top */
  footer .border-t .flex.items-center.gap-4 {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Footer ad banner — mobilde düzgün görünsün */
  footer ~ .border-t a.flex,
  .border-t .container-app a.flex {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ── Ana Sayfa Alt Bölüm Özel Düzeltmeler ──────────────────────── */
@media (max-width: 639px) {
  /* Ana sayfa modüller grid tek sütun */
  .mt-6.grid.gap-4.lg\:grid-cols-12,
  .mt-8.grid.gap-4.lg\:grid-cols-12,
  .mt-6.grid.gap-6.lg\:grid-cols-12,
  .mt-8.grid.gap-6.lg\:grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Haber akışı cart'lar — yatay taşmasın */
  [data-home-stream="true"] {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Stream kontrol butonları — tam satır */
  [data-home-stream="true"] > div.flex.items-center.justify-between > div:last-child {
    flex: 0 0 auto !important;
  }

  /* Poll kart — tam genişlik, yatay taşmasın */
  [data-poll-slider="true"] {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Whale alert dashboard grid — 2 sütun */
  .whale-stats-dashboard {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Coin featured kart listesi — iç padding düzenle */
  .featured-mobile-cards > .space-y-2 > a {
    padding: 0.625rem !important;
  }

  /* Buy buton — featured coin kartında taşmasın */
  .featured-mobile-cards a[href*="dex"],
  .featured-mobile-cards a[href*="swap"],
  .featured-mobile-cards a.btn {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.5rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Tablolarda 4. sütun (market cap gibi) gizle — alan kazandır */
  .overflow-x-auto table th:nth-child(n+5),
  .overflow-x-auto table td:nth-child(n+5) {
    display: none !important;
  }

  /* Tablolarda coin ismi sütunu küçük ekranda wrap */
  .overflow-x-auto table td:first-child,
  .overflow-x-auto table th:first-child {
    max-width: 8rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ── Yatay Mod (Landscape) Ek Korumaları ───────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape'de footer kompakt */
  footer.footer-neon {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  footer.footer-neon .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* Landscape'de hero section daha kısa */
  section .container-app.py-6,
  section .container-app.py-10 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Landscape'de haber grid 2 sütun */
  .mt-5.grid.gap-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Landscape'de banner slider sabit yükseklik */
  #mobileBannerSlider > [data-banner-index] {
    height: 60px !important;
  }
}