/* ============================================================================
   SZN UI — Sözenler AŞ ortak tasarım sistemi
   TEK kaynak. Tüm modüller buna bağlanır:
     <link rel="stylesheet" href="https://szn.com.tr/static/szn-ui.css?v=1">
   Tema: açık (light) + kurumsal mavi. Mobil-öncelikli.
   Framework-bağımsız: token'lar CSS değişkeni; Bootstrap (--bs-*) köprüsü dahil.
   ============================================================================ */

/* ---- Font ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   1) TASARIM TOKEN'LARI
   ============================================================================ */
:root {
  /* Marka — kurumsal mavi */
  --szn-primary:        #2563eb;
  --szn-primary-600:    #2563eb;
  --szn-primary-700:    #1d4ed8;
  --szn-primary-500:    #3b82f6;
  --szn-primary-100:    #dbeafe;
  --szn-primary-50:     #eff6ff;
  --szn-primary-rgb:    37, 99, 235;

  /* Koyu yüzeyler (üst-bar, marka) */
  --szn-navy:           #0f172a;
  --szn-navy-2:         #1e293b;

  /* Nötrler */
  --szn-bg:             #f4f6fb;
  --szn-surface:        #ffffff;
  --szn-surface-2:      #f8fafc;
  --szn-text:           #0f172a;
  --szn-text-muted:     #64748b;
  --szn-border:         #e5e9f0;

  /* Anlamsal */
  --szn-success:        #16a34a;
  --szn-warning:        #d97706;
  --szn-danger:         #dc2626;
  --szn-info:           #0ea5e9;

  /* Tipografi */
  --szn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Yarıçap */
  --szn-r:      14px;
  --szn-r-sm:   10px;
  --szn-r-lg:   20px;
  --szn-r-pill: 999px;

  /* Gölge */
  --szn-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --szn-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --szn-shadow-lg: 0 12px 32px rgba(15,23,42,.14);

  /* Ölçü */
  --szn-topbar-h: 56px;
  --szn-container: 1100px;
}

/* ============================================================================
   2) BOOTSTRAP KÖPRÜSÜ — CeTakip gibi Bootstrap modüller markaya uysun
   ============================================================================ */
:root {
  --bs-primary: var(--szn-primary);
  --bs-primary-rgb: var(--szn-primary-rgb);
  --bs-link-color: var(--szn-primary-700);
  --bs-link-hover-color: var(--szn-primary-700);
  --bs-body-bg: var(--szn-bg);
  --bs-body-color: var(--szn-text);
  --bs-border-color: var(--szn-border);
  --bs-border-radius: var(--szn-r-sm);
  --bs-font-sans-serif: var(--szn-font);
}
.btn-primary {
  --bs-btn-bg: var(--szn-primary);
  --bs-btn-border-color: var(--szn-primary);
  --bs-btn-hover-bg: var(--szn-primary-700);
  --bs-btn-hover-border-color: var(--szn-primary-700);
  --bs-btn-active-bg: var(--szn-primary-700);
}
.bg-dark { background: var(--szn-navy) !important; }
.text-primary { color: var(--szn-primary) !important; }

/* ============================================================================
   3) TEMEL
   ============================================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.szn {
  margin: 0;
  font-family: var(--szn-font);
  background: var(--szn-bg);
  color: var(--szn-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.szn a { color: var(--szn-primary-700); text-decoration: none; }
.szn a:hover { text-decoration: underline; }

.szn-container {
  width: 100%;
  max-width: var(--szn-container);
  margin: 0 auto;
  padding: 0 16px;
}

/* ============================================================================
   4) ÜST-BAR (tüm modüllerde ortak)
   ============================================================================ */
.szn-topbar {
  position: sticky; top: 0; z-index: 1000;
  height: var(--szn-topbar-h);
  background: linear-gradient(90deg, var(--szn-navy) 0%, var(--szn-navy-2) 100%);
  color: #fff;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; overflow-x: auto;
  padding: 0 12px;
  box-shadow: var(--szn-shadow-md);
}
.szn-topbar__back, .szn-topbar__action {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px;
  border-radius: var(--szn-r-pill);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  color: #e2e8f0; background: rgba(255,255,255,.08);
  border: none; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .15s;
}
.szn-topbar__back:hover, .szn-topbar__action:hover {
  background: rgba(255,255,255,.16); color: #fff; text-decoration: none;
}
.szn-topbar__brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 1rem; letter-spacing: .3px;
  color: #fff; margin-right: auto;
}
.szn-topbar__brand .szn-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--szn-primary-500), var(--szn-primary-700));
  display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .9rem;
}
.szn-topbar__spacer { margin-right: auto; }
.szn-topbar__user { font-size: .82rem; color: #cbd5e1; display: flex; align-items: center; gap: 6px; }
.szn-topbar__exit { color: #fca5a5 !important; }
.szn-topbar__exit:hover { background: rgba(239,68,68,.18); color: #fecaca !important; }
/* dar ekranda kullanıcı adını gizle */
@media (max-width: 560px) { .szn-hide-sm { display: none !important; } }

/* ============================================================================
   5) KART & MODÜL IZGARASI
   ============================================================================ */
.szn-page { padding: 22px 0 40px; }
.szn-page__title { font-size: 1.4rem; font-weight: 800; margin: 0 0 2px; }
.szn-page__sub { color: var(--szn-text-muted); margin: 0 0 20px; font-size: .92rem; }

.szn-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .szn-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 980px) { .szn-grid { grid-template-columns: repeat(4, 1fr); } }

.szn-card {
  background: var(--szn-surface);
  border: 1px solid var(--szn-border);
  border-radius: var(--szn-r);
  box-shadow: var(--szn-shadow-sm);
  padding: 18px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.szn-card:hover { transform: translateY(-4px); box-shadow: var(--szn-shadow-lg); border-color: var(--szn-primary-100); }

/* Modül kartı (dashboard) */
.szn-module {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: var(--szn-text); min-height: 132px;
}
.szn-module:hover { text-decoration: none; color: var(--szn-text); }
.szn-module__icon {
  width: 48px; height: 48px; border-radius: var(--szn-r-sm);
  display: grid; place-items: center; font-size: 1.5rem; color: #fff;
  background: var(--szn-primary); margin-bottom: 12px;
}
.szn-module__icon.is-primary { background: var(--szn-primary); }
.szn-module__icon.is-success { background: var(--szn-success); }
.szn-module__icon.is-info    { background: var(--szn-info); }
.szn-module__icon.is-warning { background: var(--szn-warning); }
.szn-module__title { font-weight: 700; font-size: 1.02rem; margin: 0 0 4px; }
.szn-module__desc  { font-size: .82rem; color: var(--szn-text-muted); margin: 0; }

/* ============================================================================
   6) BUTONLAR
   ============================================================================ */
.szn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: var(--szn-r-sm); border: 1px solid transparent;
  font-family: var(--szn-font); font-weight: 600; font-size: .92rem;
  cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s;
}
.szn-btn:active { transform: translateY(1px); }
.szn-btn--primary { background: var(--szn-primary); color: #fff; }
.szn-btn--primary:hover { background: var(--szn-primary-700); color: #fff; text-decoration: none; }
.szn-btn--ghost { background: var(--szn-surface); color: var(--szn-text); border-color: var(--szn-border); }
.szn-btn--ghost:hover { background: var(--szn-surface-2); }
.szn-btn--danger { background: var(--szn-danger); color: #fff; }
.szn-btn--block { width: 100%; }

/* ============================================================================
   7) FORMLAR
   ============================================================================ */
.szn-field { margin-bottom: 16px; }
.szn-label { display: block; font-size: .85rem; font-weight: 600; color: var(--szn-text); margin-bottom: 6px; }
.szn-input, .szn-select, .szn-textarea {
  width: 100%; height: 46px; padding: 0 14px;
  font-family: var(--szn-font); font-size: .95rem; color: var(--szn-text);
  background: var(--szn-surface);
  border: 1px solid var(--szn-border); border-radius: var(--szn-r-sm);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.szn-textarea { height: auto; padding: 12px 14px; }
.szn-input:focus, .szn-select:focus, .szn-textarea:focus {
  border-color: var(--szn-primary-500);
  box-shadow: 0 0 0 3px rgba(var(--szn-primary-rgb), .15);
}
.szn-input-group { position: relative; }
.szn-input-group .szn-input { padding-left: 42px; }
.szn-input-group__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--szn-text-muted); }

/* ============================================================================
   8) DİĞER
   ============================================================================ */
.szn-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--szn-r-pill);
  font-size: .72rem; font-weight: 600; background: var(--szn-primary-50); color: var(--szn-primary-700);
}
.szn-alert { padding: 12px 14px; border-radius: var(--szn-r-sm); font-size: .9rem; border: 1px solid transparent; }
.szn-alert--danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.szn-alert--success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.szn-alert--info    { background: var(--szn-primary-50); color: var(--szn-primary-700); border-color: var(--szn-primary-100); }

.szn-auth-bg {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(135deg, var(--szn-navy) 0%, #16213e 55%, #0f3460 100%);
}
.szn-auth-card {
  width: 100%; max-width: 400px; background: var(--szn-surface);
  border-radius: var(--szn-r-lg); box-shadow: var(--szn-shadow-lg); padding: 32px 28px;
}

/* ============================================================================
   9) GENİŞ / KATLANABİLİR EKRAN (Galaxy Z Fold açık, tabletler)
   Bu aralıkta (katlanır açık ~800px + tabletler) içerik dar kalmasın,
   tüm genişlik verimli kullanılsın. Telefon (kapalı/dar) ve masaüstü (>1100)
   etkilenmez.
   ============================================================================ */
@media (min-width: 600px) and (max-width: 1100px) {
  .szn-container { max-width: 100%; }
  /* Bootstrap kapsayicilari (CeTakip) tam genislik */
  .container, .container-sm, .container-md, .container-lg,
  .container-xl, .container-xxl { max-width: 100% !important; }
  /* OGM / SZN ana icerik alani tam genislik */
  main, .main-content { max-width: 100% !important; }
}