/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE GUARD — yatay taşmayı kaynağında engelleyen koruma katmanı
   v2.12.5

   AMAÇ: Her cihaz ve tarayıcıda sayfanın yana kaymasını önlemek.
   Bu dosya style.css'ten SONRA yüklenir ve yalnızca taşmaya yol açan
   bilinen desenleri hedefler — görsel tasarımı değiştirmez.

   NEDEN BÖYLE: "her şeyi sığdır" diye tek bir kural yoktur. Taşmanın
   gerçek sebepleri sınırlıdır (geniş görsel, uzun metin, tablo, flex
   çocuğunun min-width:auto değeri, sabit genişlikler). Her biri ayrı
   ele alınır; tabloların kendi içinde kaydırılması gibi doğru davranış
   korunur.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) Kutu modeli: genişlik hesabına padding/border dahil ───────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/* ── 2) Sayfa gövdesi ekranı aşmasın ─────────────────────────────────── */
html,
body {
  max-width: 100%;
  overflow-x: hidden;   /* son savunma hattı */
}

/* ── 3) Gömülü içerik kabına sığsın ──────────────────────────────────── */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}
img,
video { height: auto; }

/* ── 4) Uzun metinler taşırmasın ─────────────────────────────────────────
   Kırılmayan uzun diziler (URL, şasi no, e-posta, takip numarası)
   mobilde en sık taşma sebebidir. */
/* 'anywhere' YERİNE 'break-word': kelime ancak SATIRA SIĞMIYORSA kırılır.
   ('anywhere' marka adını "PARL / ISTO" diye ortadan bölüyordu.) */
p, td, th, li, dd, dt,
label, .card-title, .acct-sub {
  overflow-wrap: break-word;
}

/* Kırılmaması gereken öğeler — marka, başlık, düğme, rozet */
.brand,
.brand-name,
h1, h2, h3, h4, h5, h6,
button, .btn, .badge,
.topbar a,
.nav-link {
  overflow-wrap: normal;
  word-break: normal;
}

/* Marka adı asla bölünmesin */
.topbar .brand-name,
.brand-name {
  white-space: nowrap;
}

/* Kod/çıktı blokları kırılmak yerine kendi içinde kaysın */
pre, code, samp, kbd {
  overflow-x: auto;
  max-width: 100%;
}

/* ── 5) Flex ve grid çocukları küçülebilsin ──────────────────────────────
   Flex/grid çocuklarının varsayılan min-width değeri 'auto'dur; içerik
   ne kadar genişse o kadar yer kaplar ve kabı taşırır. Bu, taşmanın en
   sık görülen ama en az bilinen sebebidir. */
.topbar > *,
.topbar-inner > *,
.page-header > *,
.card > *,
.form-row > *,
.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > * { min-width: 0; }

/* ── 6) Tablolar: yerleşimi kırmak yerine kendi içinde kaysın ─────────── */
table { max-width: 100%; }

.table-wrap,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sarmalayıcısı olmayan tablolar: yalnızca YATAY KAYDIRMA ver.
   (display:block yapmak sütun hizalamasını bozuyordu.) */
.card > table,
.content > table {
  max-width: 100%;
}

/* ── 7) Form öğeleri kabını aşmasın ──────────────────────────────────── */
input,
select,
textarea,
button {
  max-width: 100%;
}
textarea { resize: vertical; }

/* ── 8) Konumlandırılmış katmanlar ekran dışına taşmasın ─────────────── */
.acct-dropdown,
.nav-dropdown-menu,
.notif-panel,
.modal,
.modal-content,
.dropdown-menu {
  max-width: calc(100vw - 16px);
}

/* ═══════════════════════════════════════════════════════════════════════
   DAR EKRAN DÜZENLEMELERİ
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Üst çubuk: sığmayan öğeler alt satıra inmek yerine daralsın */
  .topbar .topbar-inner,
  .topbar > .container {
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Yan yana duran form alanları alt alta insin */
  .form-row {
    flex-wrap: wrap;
  }
  .form-row > .form-group {
    flex: 1 1 100%;
  }

  /* Sabit genişlikli kutular ekrana uysun */
  .card,
  .panel,
  .box { max-width: 100%; }
}

@media (max-width: 480px) {
  /* Çok dar ekranlarda yatay boşlukları kıs */
  .container { padding-left: 12px; padding-right: 12px; }
  .topbar-inner { padding-left: 10px; padding-right: 10px; }

  /* Marka adı gerekirse kısalsın; logo ve hesap menüsü öncelikli */
  .topbar .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Sağdaki eylemler (zil, hesap) asla sıkışıp taşmasın */
  .topbar .user-menu,
  .topbar .acct-menu { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ÜST ÇUBUK KATMAN SIRASI (v2.12.7)
   Hesap menüsü sayfa içeriğinin ARKASINDA kalıyordu. Sticky üst çubuk
   kendi yığın bağlamını (stacking context) oluşturduğu için içindeki
   menünün z-index değeri sayfa içeriğiyle yarışamıyordu.
   ═══════════════════════════════════════════════════════════════════════ */
.topbar { z-index: 1000 !important; }
.acct-menu { position: relative; z-index: 1001; }
.acct-dropdown { z-index: 2000 !important; }

/* Üst çubuk taşan menüyü kırpmasın */
.topbar,
.topbar-inner,
.topbar .acct-menu { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════════
   PUBLIC ÜST ÇUBUK (giriş yapılmamış sayfalar)
   Logo ile menü bağlantıları dar ekranda üst üste biniyordu.
   ═══════════════════════════════════════════════════════════════════════ */
.public-header {
  flex-wrap: nowrap;
  gap: 10px;
}
.public-header > * { min-width: 0; }
/* Marka BÜTÜN görünür: kesilmez, daralmaz.
   (Önce ellipsis vardı ve "PARLIS..." diye kırpılıyordu.) */
.public-logo { flex-shrink: 0; }
.public-logo img { flex-shrink: 0; }
.public-logo .logo-text { white-space: nowrap; }

/* Yer sıkışırsa menü bağlantıları daralsın, marka değil */
.public-header .nav { flex-shrink: 1; min-width: 0; }

@media (max-width: 700px) {
  .public-header { padding: 10px 12px; }
  .public-logo .logo-text { font-size: 17px; letter-spacing: 0; }
  .public-logo img { height: 32px; }
  .public-header .nav { gap: 10px; }
  .public-header .nav a { font-size: 13px; }
  .public-header .nav a.cta { padding: 7px 12px; }
}

@media (max-width: 420px) {
  /* Marka yazısı GİZLENMEZ, KESİLMEZ — yalnızca küçülür.
     Yer sıkışırsa menü bağlantıları küçülür, marka olduğu gibi kalır. */
  .public-logo .logo-text { font-size: 15px; letter-spacing: 0; }
  .public-logo img { height: 28px; }
  .public-header { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .public-header .nav { gap: 7px; }
  .public-header .nav a { font-size: 12px; }
  .public-header .nav a.cta { padding: 6px 10px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TAŞMA DENETİM MODU
   URL'ye ?debug=layout eklendiğinde taşan öğeler kırmızı çerçeveyle
   işaretlenir. Yalnızca geliştirme/teşhis içindir.
   ═══════════════════════════════════════════════════════════════════════ */
body.debug-layout .is-overflowing {
  outline: 2px solid #dc2626 !important;
  outline-offset: -2px;
  background: rgba(220, 38, 38, .07) !important;
}