/* ============================================================
   uyum.css — masaüstü / tablet / mobil uyum düzeltmeleri
   Her sayfanın kendi <style> bloğundan SONRA yüklenir.
   ============================================================ */

/* Sürüm damgası — admin panel bu değeri okuyup önbellek uyarısı gösterir */
:root { --uyum-version: 6; }

html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
pre, code, .mono { overflow-wrap: anywhere; }

/* Modal / pencere ortalama — her boyutta */
.modal-overlay, .overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.modal, .modal-box, .sheet {
  max-width: min(720px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  margin: auto !important;
}
/* giriş / kayıt / doğrulama pencereleri dar kalsın */
.modal.auth, .auth-modal, #authOverlay .modal, .login-box {
  max-width: min(440px, calc(100vw - 32px)) !important;
}

/* Giriş / kayıt kutusundaki logo kutuyu tam ortalasın */
.auth-logo, .modal .brand-logo, .login-box .brand-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* Tablolar kendi kabında kaysın, sayfayı genişletmesin */
.table-scroll, .panel table, .card table, .cms-table {
  max-width: 100%;
}
.panel > table, .card > table {
  display: table;
  width: 100%;
}

@media (max-width: 1024px) {
  .wrap, .container, .shell { padding-left: 20px !important; padding-right: 20px !important; }
  .grid-2, .grid-3, .two-col { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 820px) {
  .wrap, .container, .shell { padding-left: 15px !important; padding-right: 15px !important; }
  .grid, .grid-2, .grid-3, .two-col, .catalog-layout, .hero-inner,
  .pkg-grid, .catalog-grid, .stat-row, .cards { grid-template-columns: 1fr !important; }
  .panel, .card { padding: 16px !important; }
  .panel table, .card table { display: block; overflow-x: auto; white-space: nowrap; }
  .panel table th, .panel table td, .card table th, .card table td { white-space: normal; }
  h1 { font-size: clamp(1.35rem, 6vw, 1.9rem) !important; }
  h2 { font-size: clamp(1.2rem, 5.4vw, 1.6rem) !important; }
}

@media (max-width: 560px) {
  .wrap, .container, .shell { padding-left: 13px !important; padding-right: 13px !important; }
  .btn, .btn-primary, .btn-ghost { width: auto; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .modal, .modal-box { padding: 18px !important; }
}

/* ---- Yatay taşma kesin çözüm: off-canvas menüler sayfayı genişletmesin ---- */
html { overflow-x: clip; }
body { overflow-x: clip; position: relative; }

/* ---- Üst menü: dar ekranda sarmalı, taşmamalı ---- */
nav { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
.nav-right { flex-wrap: wrap; min-width: 0; justify-content: flex-end; }

@media (max-width: 1080px) {
  .nav-links { display: none !important; }
}
@media (max-width: 1000px) {
  .nav-cta.desktop-only { display: none !important; }
}
@media (max-width: 820px) {
  nav { padding-left: 14px !important; padding-right: 14px !important; }
  .nav-right { gap: 8px !important; }
  .nav-right .icon-link span:not(.cart-count) { display: none; }
}

/* ---- Sepet çekmecesi ve bildirim panelleri ekrana sığsın ---- */
.cart-drawer, #cartDrawer {
  max-width: min(400px, calc(100vw - 20px)) !important;
  right: 10px !important;
}
@media (max-width: 520px) {
  .cart-drawer, #cartDrawer { left: 10px !important; right: 10px !important; max-width: none !important; width: auto !important; }
}

/* ---- Çekmece (hamburger) menüsü ---- */
.drawer { max-width: min(320px, 88vw) !important; }

/* ---- Giriş / kayıt kartları: logo kutuyu tam ortalasın ---- */
.card > .brand, .card > .brand-logo,
.login-card .brand, .auth-card .brand {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

/* Yalnızca GİRİŞ / KAYIT kartları dar ve ortalı olsun.
   (Genel .card kuralı admin panelin ve editörlerin tüm kartlarını
   400px'e sıkıştırıyordu — masaüstü düzeni bu yüzden bozuluyordu.) */
.login-card, .auth-card, .login-box,
body.auth-page .card,
.auth-wrap .card {
  max-width: min(420px, calc(100vw - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Admin panel ve editör kartları kabının tamamını kullansın */
.view .card, .view .panel,
.wrap > .card, .wrap > form.card,
.split .card {
  max-width: 100% !important;
  width: 100%;
}

/* --- admin panel tabloları --- */
.panel table, .card table { width: 100%; }
@media (max-width: 900px) {
  .panel > table, .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .panel > table th, .panel > table td, .card > table th, .card > table td { white-space: normal; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  .toolbar { flex-wrap: wrap; gap: 7px; }
  .cms-block input, .cms-block textarea, .field input, .field textarea, .field select { width: 100%; }
  .link-row { flex-wrap: wrap; gap: 7px; }
  .link-row input { min-width: 0; flex: 1 1 140px; }
  .stat-edit-row { flex-wrap: wrap; gap: 7px; }
  .stat-edit-row input { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 560px) {
  .app { grid-template-columns: 1fr !important; }
  .view { padding: 14px !important; }
  h1 { font-size: 1.25rem !important; }
}


/* ============================================================
   MASAÜSTÜ DÜZENİ (1025px ve üzeri)
   Yukarıdaki kurallar yalnızca dar ekranları düzeltir; bu blok
   masaüstünde panellerin gerçekten geniş açılmasını garanti eder.
   ============================================================ */
@media (min-width: 1025px) {

  /* --- admin panel iskeleti --- */
  .app {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    min-height: 100vh;
  }
  .app > .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .app > main, .app > .content, .app > .main { min-width: 0; }

  /* içerik alanı ferah ve tam genişlikte */
  .view { padding: 30px 34px 70px !important; max-width: 1560px; margin: 0 auto; }
  .view > .panel, .view > .card { width: 100%; max-width: 100% !important; }
  .panel, .card { padding: 20px 22px; }

  /* KPI kutuları tek sırada */
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* editör ve içerik ızgaraları iki kolon */
  .cms-grid, .grid-2, .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3, .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* tablolar tam genişlik, blok moduna DÜŞMESİN */
  .panel > table, .card > table, .panel table, .card table {
    display: table !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .table-scroll { overflow-x: visible; }

  /* üst çubuk yan yana */
  .topbar { flex-direction: row !important; align-items: center !important; justify-content: space-between; }

  /* form alanları ölçülü — tam ekran genişliğine yayılmasın */
  .cms-block input, .cms-block textarea, .cms-block select { max-width: 720px; }
  textarea { min-height: 200px; }

  /* editör sayfaları (blog-yonet / sayfa-yonet) */
  body > .wrap { max-width: 1180px !important; margin: 0 auto; padding: 30px 34px 70px; }
  .wrap > .card, .wrap > form.card { max-width: 100% !important; }

  /* müşteri paneli iki kolon */
  .grid { grid-template-columns: minmax(0, 1fr) 340px !important; gap: 22px; }
}

@media (min-width: 1600px) {
  .view { max-width: 1720px; }
  body > .wrap { max-width: 1320px !important; }
}