/* ==========================================================================
   X-Rapor — Mobil & PWA Kararlılık (Faz M1)
   base.html'de EN SON yüklenir (neumorphism'den sonra) — mobil override'lar otoriter.
   ========================================================================== */

/* --- Safe-area (çentik / status-bar / home-indicator) --- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* --- Overscroll / momentum / dokunma (native his) --- */
html, body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
body { -webkit-tap-highlight-color: transparent; }
/* Uygulama kabuğunda metin seçimi kapalı (içerik/formlar hariç) */
.navbar, .x-sidebar, .pwa-bottom-nav-bar, .btn, .nav-link, .time-btn,
.nav-pills, .x-sidebar-link, .pwa-tab-item { -webkit-user-select: none; user-select: none; }
button, a, .btn, .nav-link, .pwa-tab-item { touch-action: manipulation; } /* 300ms tap gecikmesi yok */

/* --- Viewport kararlılığı: 100vh yerine dinamik yükseklik (URL çubuğu zıplamaz) --- */
html, body { min-height: 100vh; min-height: 100dvh; }

/* ==========================================================================
   MOBİL (<992px) — safe-area uygulaması + input zoom fix
   ========================================================================== */
@media (max-width: 991.98px) {

  /* iOS: input font <16px ise odakta otomatik zoom yapar → 16px'e sabitle */
  .form-control, .form-select, textarea,
  input[type="text"], input[type="password"], input[type="email"],
  input[type="search"], input[type="number"], input[type="tel"], input[type="url"] {
    font-size: 16px !important;
  }

  /* Üst fixed navbar: çentik payı (içerik status-bar altına girmez) */
  .navbar.fixed-top { padding-top: calc(0.5rem + var(--safe-top)) !important; }
  /* Fixed navbar'lı sayfalarda gövde offset'ini çentik kadar artır (inline padding'i ezer) */
  body:not(.landing-body):has(.navbar.fixed-top) {
    padding-top: calc(57px + var(--safe-top)) !important;
  }

  /* Yatay safe-area (yatay/çentikli cihaz) */
  .container, .container-fluid, .content-wrapper > .container {
    padding-left: calc(0.75rem + var(--safe-left));
    padding-right: calc(0.75rem + var(--safe-right));
  }

  /* Sidebar'lı sayfalarda mobilde içerik üst/alt payı (sidebar gizli).
     AI chat HARİÇ — orası tam-ekran 100dvh app-layout kullanır; bu padding composer'ı taşırıp kırpıyordu. */
  body:not(.landing-body):not(.ai-chat-page):not(.m-native) .content-wrapper,
  body:not(.landing-body):not(.ai-chat-page):not(.m-native) .main-wrapper {
    padding-top: calc(16px + var(--safe-top)) !important;
    padding-bottom: calc(80px + var(--safe-bottom)) !important;  /* bottom-nav + home-indicator */
  }

  /* Alt navigasyon: yüzen dock (geometri layout.css'te; home-indicator payı bottom offset'te) */
  .pwa-bottom-nav-bar {
    height: auto !important;
    padding: 8px !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   Faz M2 — Native app hissi
   ========================================================================== */

/* --- Dokunma geri bildirimi (fiziksel basma hissi) --- */
.btn:active, .nav-link:active, .x-sidebar-link:active, .time-btn:active,
.page-link:active, .dropdown-item:active, .list-group-item:active,
.feature-tab-link:active, .ai-len-btn:active {
  transform: scale(0.97);
}
.pwa-tab-item:active { transform: scale(0.90); }
.pwa-tab-item:active i { transform: scale(0.90); }
/* Tıklanabilir kartlar dokununca çökme hissi */
[role="button"]:active, .card[onclick]:active, .kpi-card[onclick]:active,
a.card:active, .clickable:active {
  box-shadow: var(--neu-shadow-inset-sm) !important;
  transform: translateY(1px);
}

/* --- Skeleton yükleyici (neu shimmer) — sayfalarda .skeleton ile kullanılır --- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--neu-surface);
  box-shadow: var(--neu-shadow-inset-sm);
  border-radius: var(--neu-radius);
  min-height: 1rem;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--neu-accent-rgb), .07), transparent);
  animation: neu-shimmer 1.4s infinite;
}
@keyframes neu-shimmer { 100% { transform: translateX(100%); } }

/* ==========================================================================
   MOBİL (<992px) — modaller alt-sheet (native bottom sheet)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Apple/emil: ORTALANMIŞ KOMPAKT kart (tam-genişlik alt-sheet DEĞİL) → daha küçük görünür */
  .modal:not(.modal-fullscreen-mobile-off) .modal-dialog {
    position: relative; left: auto; right: auto; bottom: auto; top: auto;
    margin: 1rem auto !important;
    width: auto !important;
    max-width: min(90vw, 380px) !important;
    min-height: calc(100% - 2rem);
    display: flex; align-items: center;   /* dikey ortala */
  }
  .modal:not(.modal-fullscreen-mobile-off) .modal-content {
    width: 100%;
    border-radius: var(--neu-radius-lg, 20px) !important;   /* tüm köşeler yuvarlak */
    max-height: 82dvh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Alt-sheet grabber çubuğu KALDIRILDI (kart görünümü) */
  .modal .modal-content::before { content: none !important; }
  /* Giriş: emil scale + fade (masaüstü standardıyla aynı) */
  .modal.fade .modal-dialog {
    transform: translateY(12px) scale(.98);
    transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1), opacity .3s ease;
  }
  .modal.show .modal-dialog { transform: none; }
  .modal-header, .modal-footer { border: none !important; }
}

/* --- Hareket azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none !important; }
  .skeleton::after { animation: none !important; }
  .btn:active, .pwa-tab-item:active, [role="button"]:active { transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Faz M3 — Mobilde hafif gölge (paint performansı + akıcılık)
   Token'lar mobilde yeniden tanımlanır → tüm bileşenler otomatik hafifler.
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --neu-shadow-sm:  4px 4px 8px rgba(163,177,198,.4),  -4px -4px 8px rgba(255,255,255,.7);
    --neu-shadow:     5px 5px 10px rgba(163,177,198,.45), -5px -5px 10px rgba(255,255,255,.8);
    --neu-shadow-lg:  8px 8px 16px rgba(163,177,198,.5),  -8px -8px 16px rgba(255,255,255,.9);
    --neu-shadow-inset:    inset 4px 4px 8px rgba(163,177,198,.45), inset -4px -4px 8px rgba(255,255,255,.8);
    --neu-shadow-inset-sm: inset 3px 3px 6px rgba(163,177,198,.4),  inset -3px -3px 6px rgba(255,255,255,.75);
  }
  html[data-bs-theme="dark"] {
    --neu-shadow-sm:  4px 4px 8px rgba(0,0,0,.45), -4px -4px 8px rgba(255,255,255,.04);
    --neu-shadow:     5px 5px 10px rgba(0,0,0,.5), -5px -5px 10px rgba(255,255,255,.04);
    --neu-shadow-lg:  8px 8px 16px rgba(0,0,0,.55), -8px -8px 16px rgba(255,255,255,.05);
    --neu-shadow-inset:    inset 4px 4px 8px rgba(0,0,0,.5),  inset -4px -4px 8px rgba(255,255,255,.04);
    --neu-shadow-inset-sm: inset 3px 3px 6px rgba(0,0,0,.45), inset -3px -3px 6px rgba(255,255,255,.04);
  }
}

/* ==========================================================================
   PWA üstten gelen banner (Uygulamayı Yükle + Güncelleme) — tüm cihazlar
   ========================================================================== */
.pwa-top-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  width: calc(100% - 24px); max-width: 560px;
  margin: calc(env(safe-area-inset-top, 0px) + 10px) auto 0;
  background: var(--neu-surface); color: var(--neu-text);
  border-radius: var(--neu-radius-lg); box-shadow: var(--neu-shadow-lg);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  transform: translateY(-180%); transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.pwa-top-banner.show { transform: translateY(0); }
.pwa-top-banner .ptb-icon {
  width: 40px; height: 40px; border-radius: var(--neu-radius); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
  background: linear-gradient(145deg, var(--neu-accent-hi), var(--neu-accent-lo)); box-shadow: var(--neu-shadow-sm);
}
.pwa-top-banner .ptb-text { flex: 1; min-width: 0; }
.pwa-top-banner .ptb-title { font-weight: 700; font-size: 0.9rem; }
.pwa-top-banner .ptb-sub { font-size: 0.76rem; color: var(--neu-text-muted); }
.pwa-top-banner .ptb-btn {
  border: 0; background: linear-gradient(145deg, var(--neu-accent-hi), var(--neu-accent-lo)); color: #fff;
  font-weight: 700; font-size: 0.82rem; padding: 8px 16px; border-radius: 999px;
  box-shadow: var(--neu-shadow-sm); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.pwa-top-banner .ptb-btn:active { transform: translateY(1px); box-shadow: var(--neu-shadow-inset-sm); }
.pwa-top-banner .ptb-close {
  border: 0; background: transparent; color: var(--neu-text-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 4px; flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .pwa-top-banner { transition: none; } }

/* ==========================================================================
   Native cila — View Transitions + standalone + hide-on-scroll
   ========================================================================== */

/* 1) Sayfalar arası yumuşak geçiş (native ekran geçişi hissi) — destekleyen tarayıcıda */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .24s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Yön-duyarlı kayma (dock sırasına göre): sağdaki sayfaya → yeni sayfa SAĞDAN; soldaki → SOLDAN.
   pwa_page_transitions.js <html>'e vt-forward / vt-back sınıfını ekler (destekleyen tarayıcıda). */
html.vt-forward::view-transition-old(root) { animation: xr-out-left .30s cubic-bezier(0.23,1,0.32,1) both; }
html.vt-forward::view-transition-new(root) { animation: xr-in-right .30s cubic-bezier(0.23,1,0.32,1) both; }
html.vt-back::view-transition-old(root)    { animation: xr-out-right .30s cubic-bezier(0.23,1,0.32,1) both; }
html.vt-back::view-transition-new(root)    { animation: xr-in-left  .30s cubic-bezier(0.23,1,0.32,1) both; }
@keyframes xr-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes xr-out-left { from { transform: translateX(0); } to { transform: translateX(-28%); } }
@keyframes xr-in-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes xr-out-right{ from { transform: translateX(0); } to { transform: translateX(28%); } }

/* 5) Kaydırınca çubukları gizle/göster (native scroll) */
.navbar.fixed-top { transition: transform .3s cubic-bezier(.4,0,.2,1); will-change: transform; }
.navbar.fixed-top.nav-hidden { transform: translateY(-105%); }
.pwa-bottom-nav-bar { transition: transform .3s cubic-bezier(.4,0,.2,1); will-change: transform; }
.pwa-bottom-nav-bar.nav-hidden { transform: translateY(130%); }

/* 4) Kurulu uygulamaya (standalone) özel — native app kabuğu hissi */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, select, [contenteditable], .selectable { -webkit-user-select: text; user-select: text; }
  a, button, .btn, .pwa-tab-item, .x-sidebar-link { -webkit-touch-callout: none; } /* uzun-bas menüsü yok */
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  html.vt-forward::view-transition-old(root), html.vt-forward::view-transition-new(root),
  html.vt-back::view-transition-old(root), html.vt-back::view-transition-new(root) { animation: none !important; }
  .navbar.fixed-top, .pwa-bottom-nav-bar { transition: none !important; }
}

/* ==========================================================================
   Faz M4 — Mobil yatay taşma koruması ("kayan element" düzeltmesi)
   Amaç: hiçbir öğe viewport'u aşıp sayfayı yana kaydırmasın; geniş içerik
   (tablo/medya/uzun metin) kendi kutusunda kalsın veya satır kaydırsın.
   ========================================================================== */
@media (max-width: 991.98px) {

  /* Sayfa asla yatay kaymasın.
     overflow-x:clip kullanıyoruz çünkü 'hidden' overflow-y'yi auto'ya ZORLAR ve
     sticky-top (ör. kitle raporu tablo başlığı) bozulur; 'clip' bunu yapmaz. */
  html, body { overflow-x: clip; max-width: 100%; }
  /* İstisna: PDF çıktı modunda (1200px export layout) kırpma yapma */
  html:has(.pdf-export-mode), body:has(.pdf-export-mode) { overflow-x: visible; max-width: none; }

  /* Geniş medya kutusuna sığsın (sabit genişlikli görsel/iframe/grafik taşmasın) */
  img, svg, video, canvas, iframe { max-width: 100%; }

  /* Tüm tablo sarmalayıcıları kendi kutusunda yatay kaysın (veri kırpılmaz, sayfa kaymaz) */
  .table-responsive, .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Uzun kırılmayan metin (URL, kullanıcı adı, hashtag, kelime bulutu) gerektiğinde satır kaydırsın */
  a, .badge, .ig-pill, .ig-link, .ig-liker, .igwc,
  .word-cloud, .wordcloud, .break-anywhere {
    overflow-wrap: anywhere;
  }

  /* Buton/sekme/filtre satırları taşarsa alta sarsın (tek satırda sıkışıp taşmaz) */
  .nav-pills, .nav-tabs, .btn-group, .btn-toolbar {
    flex-wrap: wrap;
  }

  /* Ön-biçimli metin/kod kutusunda kaysın */
  pre, code, kbd, samp { max-width: 100%; overflow-x: auto; }
}

/* ==========================================================================
   Faz M5 — Analiz sayfası mobil düzeni (dönem seçici + platform sekmeleri)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Dönem seçici (Günlük/Haftalık/…): alt satıra sarmasın — tek satır yatay kaydırılır */
  .time-filter-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
  }
  .time-filter-group::-webkit-scrollbar { display: none; }  /* WebKit */
  .time-btn { flex: 0 0 auto; padding: 6px 14px; }

  /* Platform sekmeleri (X/Twitter · Instagram): yan yana, eşit genişlik, LOGO-only */
  #analizTabs {
    flex-wrap: nowrap;
    gap: 10px;
    border-bottom: none;
  }
  #analizTabs .nav-item { flex: 1 1 0; min-width: 0; }
  #analizTabs .nav-link {
    width: 100%;
    padding: 0.7rem 0.4rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #analizTabs .nav-link .tab-label { display: none; }   /* mobilde metin gizli */
  #analizTabs .nav-link i,
  #analizTabs .nav-link svg { margin: 0 !important; font-size: 1.55rem; line-height: 1; }
  #analizTabs .nav-link svg { width: 1.55rem; height: 1.55rem; }  /* inline X logosu */
}

/* ==========================================================================
   Masaüstü PWA (standalone, ≥992px) — sidebar kullanılır, alt menü GİZLİ
   ========================================================================== */
@media (display-mode: standalone) and (min-width: 992px) {
  .pwa-bottom-nav-bar { display: none !important; }
}

/* ==========================================================================
   Legacy dark PWA alt menüsü (Panom/Rapor+/Kitle/Paketler) — KESİN gizle.
   Eski cache'lenmiş theme.js bu barı oluştursa BİLE CSS ile görünmez kalır.
   (Kalıcı bottom-nav = #pwaMobileTabBar; bu ise kaldırılan legacy #mobileBottomTabBar)
   ========================================================================== */
#mobileBottomTabBar,
.mobile-tab-bar,
#smartPwaInstallBanner,
.pwa-mobile-banner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Tam-ekran app layout (AI chat) — global content-wrapper içerik-kaydırma payından MUAF.
   Aksi halde composer alt-nav'dan çok yukarıda kalıyordu (çift boşluk).
   ========================================================================== */
@media (max-width: 991.98px) {
  body .content-wrapper:has(.xrapor-app-layout) {
    padding: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Native+ (pwa_native_plus.js): modal aşağı-sürükle-kapat tutamacı (#3)
   + content-visibility yardımcısı (#11). Yalnız görsel/opt-in; markup değişmez.
   ========================================================================== */
@media (max-width: 991.98px) {
  .modal-content.np-sheet { position: relative; will-change: transform; }
  /* Grabber kaldırıldı — ortalanmış kart görünümü (Apple/emil) */
  .modal-content.np-sheet::before { content: none !important; }
}

/* #11 content-visibility: uzun listelerde opt-in ile render maliyetini düşür.
   Kullanım: uzun liste kapsayıcısına class="cv-auto" ver. */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
@media (prefers-reduced-motion: reduce) {
  .modal-dialog { transition: none !important; }
}