/* Suhara Nakliyat — "Kalın & Kutulu" tasarım sistemi.
   Bold, net sınırlı kutular; koyu lacivert ana renk + amber ikincil renk;
   Archivo (başlık) + IBM Plex Sans (gövde) + IBM Plex Mono (rakam/kod). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --color-bg: #F5F2EA;
  --color-surface: #FFFFFF;
  --color-text: #1B1F27;
  --color-accent: #1A2C4C;      /* lacivert — birincil (derinleştirilmiş) */
  --color-accent-2: #E8912B;    /* amber — ikincil / uyarı */
  --color-divider: #C7C1AF;

  /* Nötr (gri) rampa */
  --color-neutral-100: #F1EFE8;
  --color-neutral-200: #E4E1D6;
  --color-neutral-300: #D0CCBC;
  --color-neutral-400: #ADA894;
  --color-neutral-500: #8A8570;
  --color-neutral-600: #6B6754;
  --color-neutral-700: #524F40;
  --color-neutral-800: #37352B;
  --color-neutral-900: #211F19;

  /* Lacivert rampa (birincil vurgu) */
  --color-accent-100: #E7EBF3;
  --color-accent-200: #CBD6EA;
  --color-accent-300: #9DB2D4;
  --color-accent-400: #6E8DBB;
  --color-accent-500: #4C6FA0;
  --color-accent-600: #385780;
  --color-accent-700: #1A2C4C;
  --color-accent-800: #12213A;
  --color-accent-900: #0C1729;

  /* Amber rampa (ikincil vurgu / durum renkleri) */
  --color-accent-2-100: #FBEBD5;
  --color-accent-2-200: #F6D9B0;
  --color-accent-2-300: #F0C48A;
  --color-accent-2-400: #EAA958;
  --color-accent-2-500: #E8912B;
  --color-accent-2-600: #C97817;
  --color-accent-2-700: #A15E10;
  --color-accent-2-800: #7A470C;
  --color-accent-2-900: #4E2E08;

  --color-ok: #2F7D4F;
  --color-ok-bg: #DEEFE2;
  --color-danger: #B3402A;
  --color-danger-bg: #F5E1DC;

  /* Teklif Al formuna özel canlı kırmızı vurgu (GUNCELLEME-62) — kullanıcının
     gönderdiği referans tasarımdaki net kırmızıyı yansıtmak için eklendi;
     sitenin genel lacivert/amber marka renklerinden bilerek ayrı tutuldu ve
     sadece bu forma uygulanıyor, --color-danger (hata durumları) ile
     karıştırılmaması için ayrı bir değişken olarak tanımlandı. */
  --color-teklif-vurgu: #E0342B;
  --color-teklif-vurgu-koyu: #B8271F;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-5: 17px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 0 rgba(22,35,63,0.05), 0 3px 8px -4px rgba(22,35,63,0.25);
  --shadow-md: 0 2px 0 rgba(22,35,63,0.06), 0 10px 24px -12px rgba(22,35,63,0.35);
  --shadow-lg: 0 3px 0 rgba(22,35,63,0.08), 0 20px 40px -16px rgba(22,35,63,0.45);
}

html { color-scheme: light only; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 2px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: hidden; border-radius: var(--radius-lg); }
/* Eski "blueprint" tasarımının köşe tescil işaretleri yeni temada kullanılmıyor. */
.blueprint > .corner { display: none; }

/* "duotone" renk filtresi kaldırıldı — eklenen görseller artık her yerde
   kendi orijinal renkleriyle gösteriliyor. */
.duotone{position:relative;overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════════
   Bileşenler
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; font-weight: 600; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--color-accent-2); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* — rules — */
.hr {
  height: 3px; border: 0; margin: var(--space-4) 0;
  background: var(--color-accent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: var(--color-surface); border: 2px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.3);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:hover { border-color: var(--color-accent); }
.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-accent-100); }
.btn-secondary:active { background: var(--color-accent-200); }
.btn-ghost { color: var(--color-accent); border-color: transparent; background: transparent; padding-inline: var(--space-2); }
.btn-ghost:hover { background: var(--color-accent-100); border-color: var(--color-accent-100); }
.btn-ghost:active { background: var(--color-accent-200); }
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.btn-accent2 { background: var(--color-accent-2); color: #fff; border-color: var(--color-accent-2); }
.btn-accent2:hover { background: var(--color-accent-2-600); border-color: var(--color-accent-2-600); }
.btn-accent2:active { background: var(--color-accent-2-700); border-color: var(--color-accent-2-700); }

/* — forms — */
.field > label {
  display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px;
  color: var(--color-text);
}
.input {
  width: 100%; min-height: 42px; padding: 8px 12px; font: inherit;
  font-size: 14.5px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 2px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-divider)); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 100px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--color-divider); background: var(--color-surface);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-surface);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 2px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: var(--color-surface);
}
.seg-opt + .seg-opt { border-left: 2px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-accent-100); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-2); outline-offset: -2px; }

/* — Teklif Al formu, özel karşılama tasarımı (GUNCELLEME-62) — */
.teklif-form-kart { max-width: 560px; margin: 0 auto; border-radius: 20px; box-shadow: var(--shadow-lg); }
.teklif-form-etiket {
  color: var(--color-teklif-vurgu); font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px;
}
.teklif-form-baslik { font-size: 25px; margin: 0 0 var(--space-2); }
.teklif-form .field > label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 7px;
}
.teklif-form-kvkk { font-size: 12.5px; color: var(--color-neutral-600); margin: -4px 0 0; }
.teklif-form-kvkk a { color: var(--color-text); text-decoration: underline; font-weight: 600; }
.btn-teklif-gonder {
  background: linear-gradient(180deg, var(--color-teklif-vurgu), var(--color-teklif-vurgu-koyu));
  border: none; color: #fff; border-radius: 999px; font-size: 15px; padding: 13px var(--space-4);
  text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 10px 20px -10px rgba(224,52,43,0.55);
}
.btn-teklif-gonder:hover { filter: brightness(1.06); }
.btn-teklif-gonder:active { filter: brightness(0.94); }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 2px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
  min-width: 0; /* bir grid hücresindeki görsel, komşu sütunları küçültmesin */
}
.card-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13.5px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags / rozetler — */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; padding: 5px 12px;
  border-radius: 999px;
}
.tag::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex: none; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 2px solid var(--color-accent); color: var(--color-accent); padding: 3px 10px; }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; margin-right: auto; color: var(--color-accent-900);
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 800; color: var(--color-accent-900);
  padding: var(--space-2) var(--space-3) var(--space-2); border-bottom: 3px solid var(--color-accent);
}
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:nth-child(even) { background: var(--color-accent-100); }
.table tbody tr:hover { background: var(--color-accent-2-100); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-accent-900) 55%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Suhara Nakliyat — projeye özel ek stiller (görsel yer tutucular, panel
   (admin/müşteri) yerleşimi, durum etiketleri, uyarı kutuları, tablo aksiyonları)
   ══════════════════════════════════════════════════════════════════════ */

/* — görsel yer tutucu (gerçek görsel yüklenene kadar) — */
.img-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, var(--color-neutral-100), var(--color-neutral-100) 10px, var(--color-neutral-200) 10px, var(--color-neutral-200) 20px);
  color: var(--color-neutral-700);
  font-size: 12px; font-weight: 600; text-align: center; padding: var(--space-2);
}
.img-slot img, .blueprint img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* — logo çerçevesi (referans/firma logoları) — fotoğraflardan farklı olarak
   logolar kırpılırsa (özellikle kenara yakın yazılar) okunaksız hale gelir;
   bu yüzden çerçeveyi doldurup kırpmak yerine, logonun tamamı biraz boşluk
   payıyla çerçeveye sığdırılır. — Suhara Nakliyat'a özel */
.logo-cerceve { padding: var(--space-3); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.logo-cerceve img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* — panel yerleşimi (admin / müşteri) — */
.panel-shell { display: flex; min-height: 100vh; background: var(--color-bg); }
.panel-sidebar {
  width: 240px; flex: none; background: var(--color-surface); border-right: 3px solid var(--color-accent-900);
  padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1);
}
.panel-sidebar .brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; margin-bottom: var(--space-4); color: var(--color-accent-900); }
.panel-sidebar a {
  display: block; padding: var(--space-2) var(--space-3); color: var(--color-text);
  text-decoration: none; font-size: 14px; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius-md);
}
.panel-sidebar a:hover { background: var(--color-accent-100); }
.panel-sidebar a.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.panel-sidebar .alt { margin-top: auto; padding-top: var(--space-4); border-top: 2px solid var(--color-divider); }
.panel-main { flex: 1; padding: var(--space-6) var(--space-8); max-width: 1100px; }
.panel-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }

/* — kenar çubuğu, koyu lacivert değişkeni (şu an sadece Depo panelinde
     kullanılıyor — kullanıcının gönderdiği referans tasarımdaki koyu lacivert
     + amber vurgu renk paletiyle eşleşsin diye; Admin/Müşteri panelleri bu
     sınıfı eklemedikleri için beyaz kenar çubuğu tasarımlarını korurlar).
     Renkler sitenin zaten var olan --color-accent-900 (lacivert) /
     --color-accent-2 (amber) değişkenlerinden geliyor, yeni renk eklenmedi. */
.panel-sidebar.panel-sidebar-koyu { background: var(--color-accent-900); border-right: none; }
.panel-sidebar.panel-sidebar-koyu .brand { color: #fff; }
.panel-sidebar.panel-sidebar-koyu .brand span { color: var(--color-accent-2-300); }
.panel-sidebar.panel-sidebar-koyu a { color: var(--color-accent-200); border-left: 3px solid transparent; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.panel-sidebar.panel-sidebar-koyu a:hover { background: var(--color-accent-800); color: #fff; }
.panel-sidebar.panel-sidebar-koyu a.active { background: var(--color-accent-700); color: #fff; border-color: transparent; border-left-color: var(--color-accent-2); }
.panel-sidebar.panel-sidebar-koyu .alt { border-top-color: var(--color-accent-700); }
.panel-sidebar.panel-sidebar-koyu .alt a { color: var(--color-accent-300); }
.panel-sidebar.panel-sidebar-koyu .alt a:hover { color: #fff; }

/* — istatistik kartları (.stat-grid içindeki .card'lar otomatik olarak
     renkli sol şerit alır; sıradaki 1./2./3./4. kutu farklı renk vurgusu kullanır) — */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-grid .card {
  border-left: 6px solid var(--color-accent); box-shadow: var(--shadow-md);
}
.stat-grid .card:nth-child(2) { border-left-color: var(--color-accent-2); }
.stat-grid .card:nth-child(3) { border-left-color: var(--color-ok); }
.stat-grid .card:nth-child(4) { border-left-color: var(--color-neutral-600); }
.stat-grid .card .card-title { font-size: 30px !important; }
/* Eski kullanılmayan .stat-card / .val / .lbl uyumluluk için bırakıldı. */
.stat-card { padding: var(--space-4); border: 2px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.stat-card .val { font-family: var(--font-heading); font-size: 30px; font-weight: var(--font-heading-weight); }
.stat-card .lbl { font-size: 12px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: .06em; }

/* — durum etiketleri (.tag ile birlikte kullanılır) — */
.durum-depoda { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.durum-yolda { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.durum-teslim { background: var(--color-ok-bg); color: var(--color-ok); }
.durum-yeni { background: var(--color-accent-100); color: var(--color-accent-800); }
.durum-incelemede { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.durum-yanitlandi { background: var(--color-ok-bg); color: var(--color-ok); }
.durum-aktif { background: var(--color-ok-bg); color: var(--color-ok); }
.durum-pasif { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.durum-geri { background: var(--color-danger-bg); color: var(--color-danger); }
.onay-var { background: var(--color-ok-bg); color: var(--color-ok); }
.onay-yok { background: var(--color-danger-bg); color: var(--color-danger); }

/* — depoda kaldığı gün rozeti (Depo > Stok Takip) — */
.gun-rozet { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; width: fit-content; }
.gun-taze { background: var(--color-ok-bg); color: var(--color-ok); }
.gun-orta { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.gun-eski { background: var(--color-danger-bg); color: var(--color-danger); }
.gun-tamamlandi { background: var(--color-neutral-200); color: var(--color-neutral-700); }

/* — Stok Takip: Durum sütununda tıklayarak hızlı durum değiştirme — */
.durum-tetik { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; }
.durum-secim { font-size: 12.5px; padding: 4px 8px; min-width: 140px; }

/* — Sevkiyat Tarama (QR): yüklenen ürünü listeden çıkarma butonu — */
.urun-sil-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--color-danger-bg); color: var(--color-danger); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.urun-sil-x:hover { background: var(--color-danger); color: #fff; }

/* — sevkiyat (araç çıkışı) listesi — */
.plaka-etiket { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .02em; background: var(--color-accent-900); color: #fff; padding: 5px 10px; border-radius: var(--radius-sm); }
tr.satir-onaysiz { background: color-mix(in srgb, var(--color-danger-bg) 55%, var(--color-surface)); }
tr.satir-onaysiz:hover { background: var(--color-danger-bg); }
.islem-link { font-size: 13px; font-weight: 700; color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.islem-link.onayla { color: var(--color-ok); }
.islem-link:hover { text-decoration: underline; }
.saat-yok { opacity: .45; }

/* — sevkiyat modalı (Yeni/Düzenle Araç Çıkışı) — */
.modal-box.sevk-modal { max-width: 760px; text-align: left; padding: 0; overflow: hidden; }
.sevk-baslik { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 2px solid var(--color-divider); }
.sevk-baslik h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.sevk-kapat { border: none; background: transparent; cursor: pointer; color: var(--color-text); opacity: .55; padding: 4px; line-height: 0; }
.sevk-kapat:hover { opacity: 1; }
.sevk-govde { padding: var(--space-6); max-height: 72vh; overflow-y: auto; }
.sevk-bolum + .sevk-bolum { margin-top: var(--space-6); }
.sevk-bolum-baslik { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.sevk-bolum-baslik .cizgi { flex: 1; height: 2px; background: var(--color-divider); }
.sevk-kutu { border: 2px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-surface); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.sevk-onay { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); font-size: 14px; font-weight: 600; cursor: pointer; }
.sevk-onay input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent-2); flex: none; }
.sevk-yardim { font-size: 12px; color: var(--color-text); opacity: .65; margin: var(--space-2) 0 0 26px; }
.sevk-arama { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.sevk-arama .input { flex: 1; }
.urun-liste { display: flex; flex-direction: column; gap: var(--space-2); max-height: 220px; overflow-y: auto; padding-right: 4px; }
.urun-satir { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 2px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); }
.urun-bilgi { flex: 1; min-width: 0; }
.urun-bilgi .ad { font-weight: 700; font-size: 14px; }
.urun-bilgi .stok { font-size: 12px; opacity: .7; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.stok-kutu { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 6px; border: 2px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-neutral-100); font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; }
.adet-kutu { width: 64px; min-height: 36px; padding: 4px 8px; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.btn-ekle { background: var(--color-accent); color: #fff; border-color: var(--color-accent); min-height: 36px; padding: 0 16px; font-size: 13px; flex: none; }
.btn-ekle:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-kaldir { background: transparent; color: var(--color-danger); border-color: var(--color-danger); min-height: 32px; padding: 0 12px; font-size: 12.5px; flex: none; }
.btn-kaldir:hover { background: var(--color-danger-bg); }
.eklenen-satir { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-ok-bg); flex-wrap: wrap; row-gap: 6px; }
.eklenen-satir .ad { flex: 1; font-weight: 700; font-size: 13.5px; }
.eklenen-satir .adet { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.stok-duzenle-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 2px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; font-size: 12px; line-height: 1; flex: none; }
.stok-duzenle-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.stok-duzenle-alan:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.stok-duzenle-alan .input { width: 70px; min-height: 26px; padding: 2px 6px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; }
.stok-duzenle-alan button { min-height: 24px; padding: 0 8px; font-size: 11.5px; flex: none; }
.sevk-alt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 2px solid var(--color-divider); background: var(--color-surface); }

/* — telefon genişliğinde Ürün Ekle / Bu Araca Eklenenler satırları: bilgi
   üstte tam genişlikte, adet + buton altta yan yana — üst üste binmeyi önler */
@media (max-width: 640px) {
  .urun-satir { flex-wrap: wrap; }
  .urun-satir .urun-bilgi { flex: 1 1 100%; }
  .urun-satir .adet-kutu { flex: 1; width: auto; }
  .urun-satir .btn-ekle { flex: 1; }
  .eklenen-satir .ad { flex: 1 1 100%; }
  .eklenen-satir .adet { flex: 1; }
  .eklenen-satir .btn-kaldir { flex: 1; }
  .sevk-govde { padding: var(--space-4); }
  .sevk-baslik, .sevk-alt { padding: var(--space-3) var(--space-4); }
}

/* — uyarı / bildirim kutuları — */
.alert { padding: var(--space-3) var(--space-4); border: 2px solid var(--color-divider); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 14px; font-weight: 600; background: var(--color-surface); }
.alert-ok { border-color: var(--color-ok); background: var(--color-ok-bg); color: var(--color-ok); }
.alert-hata { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }

/* — tablo içi aksiyon linkleri/formları — */
.table form { display: inline; }
.table .row-actions { display: flex; gap: var(--space-2); align-items: center; }
.table select.input, .table .input { min-height: 34px; padding: 4px 8px; font-size: 13.5px; }
.table select.input { min-width: 132px; }

/* — giriş (login) kutusu — */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: var(--space-4); }
.login-box { width: 100%; max-width: 400px; padding: var(--space-6); }

/* — sekme çubuğu (tabs) — dolgulu pill görünüm, JS gerektirmez — */
.tabbar { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; }
.tabbar a {
  padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  text-decoration: none; color: var(--color-text); background: var(--color-surface);
  border: 2px solid var(--color-divider); border-radius: 999px;
}
.tabbar a:hover { border-color: var(--color-accent); }
.tabbar a.active { color: var(--color-accent); border-color: var(--color-accent); border-width: 3px; background: var(--color-accent-100); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .panel-shell { flex-direction: column; }
  .panel-sidebar { width: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 3px solid var(--color-accent-900); }
  .panel-sidebar .brand, .panel-sidebar .alt { display: none; }
}

/* — Referanslar sayfası: kartlar diğer 2 sütunlu ızgaralardan (grid-2) bağımsız,
   kendi ölçeğinde — normalde 2 sütun olacak kartlar burada 3 sütuna sığdırılarak
   yaklaşık %40 daha küçük gösteriliyor. */
.referans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .referans-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .referans-grid { grid-template-columns: 1fr; } }

/* — sekme çubuğu (tabs) — alt çizgili düz görünüm (Depo modülü) — */
.tabbar-line { display: flex; gap: var(--space-6); border-bottom: 2px solid var(--color-divider); margin-bottom: var(--space-6); }
.tabbar-line a {
  padding: var(--space-2) 0 var(--space-3); font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  text-decoration: none; color: var(--color-text); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabbar-line a:hover { color: var(--color-accent); }
.tabbar-line a.active { color: var(--color-accent-2-700); border-color: var(--color-accent-2); }

/* — depo araç çubuğu (arama / filtre / eylem butonları) — */
.depo-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.depo-toolbar .search-field { position: relative; flex: 1; min-width: 220px; }
.depo-toolbar .search-field input { padding-left: 36px; width: 100%; box-sizing: border-box; }
.depo-toolbar .search-field svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }
.depo-toolbar select.input { max-width: 180px; }

/* — grup başlıklı tablo (Depo Stok tablosu) — */
.table thead tr.group-row th {
  background: var(--color-accent-900); color: #fff; text-transform: uppercase;
  font-size: 11px; letter-spacing: .05em; font-weight: 700; padding: 8px 12px; border-bottom: none;
}
.table thead tr.group-row th.no-group { background: transparent; color: var(--color-accent-900); }

/* — küçük ikon butonları (Depo satır aksiyonları) — */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 2px solid var(--color-divider); background: #fff; color: var(--color-accent-700); cursor: pointer;
}
.icon-btn:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.icon-btn svg { width: 16px; height: 16px; display: block; }
.icon-btn.danger:hover { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }

/* — modal (QR kod gösterimi) — */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(22,35,63,0.55); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: var(--space-4);
}
.modal-backdrop.acik { display: flex; }
.modal-box { background: #fff; border: 2px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); max-width: 340px; width: 100%; text-align: center; }
.modal-box canvas { max-width: 100%; }

/* — modal (müşteri paneli: "Son Hareketler" fatura/hareket detayı) —
   Not: bu modal, diğer tüm .modal-box'lar gibi position:fixed bir
   .modal-backdrop içinde açılır; bu yüzden sayfanın akışına gömülü
   değildir ve her zaman ekranın önünde, ortalanmış olarak görünür. */
.modal-box.fatura-modal { max-width: 620px; width: 100%; max-height: calc(100vh - var(--space-8)); overflow-y: auto; text-align: left; }
.fatura-modal-baslik {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 3px solid var(--color-accent);
}
.fatura-modal-baslik h4 { margin: 0; font-family: var(--font-heading); font-size: 20px; color: var(--color-accent-900); }
.fatura-modal-baslik .alt { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 2px; }
.modal-kapat-x {
  border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--color-neutral-600); padding: 2px 6px; border-radius: var(--radius-md); flex: none;
}
.modal-kapat-x:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
.fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.fd-alan { background: var(--color-accent-100); border-radius: var(--radius-md); padding: var(--space-3); min-width: 0; }
.fd-alan .k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700); }
.fd-alan .v { font-family: var(--font-mono, monospace); font-size: 15.5px; font-weight: 600; color: var(--color-accent-900); margin-top: 3px; overflow-wrap: break-word; }
.fd-alan.buyuk { grid-column: span 3; background: var(--color-accent); }
.fd-alan.buyuk .k { color: var(--color-accent-200); }
.fd-alan.buyuk .v { color: #fff; font-size: 22px; }
.fd-bolum-baslik {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin: var(--space-4) 0 var(--space-2);
}
.fd-satir { display: flex; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
.fd-satir:last-child { border-bottom: none; }
.fd-satir .k { color: var(--color-neutral-700); }
.fd-satir .v { font-weight: 700; font-family: var(--font-mono, monospace); }
.fd-aciklama-kutu { background: var(--color-neutral-100); border-radius: var(--radius-md); padding: var(--space-3); font-size: 13.5px; white-space: pre-line; line-height: 1.5; }
.fd-evrak-satir {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--color-neutral-100); border-radius: var(--radius-md); margin-bottom: var(--space-2);
}
.fd-evrak-satir .ad { flex: 1; font-size: 13.5px; font-weight: 600; }
.fd-evrak-satir .tarih { font-size: 12px; color: var(--color-neutral-600); }
.satir-tiklanabilir { cursor: pointer; }
.satir-tiklanabilir:hover { background: var(--color-accent-2-100) !important; }
.satir-tiklanabilir td:last-child { color: var(--color-accent); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  .fd-grid { grid-template-columns: 1fr 1fr; }
  .fd-alan.buyuk { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kurumsal (halka açık) siteye özel bileşenler — üst menü, ana sayfa hero,
   özellik şeridi, hizmet kartları, sayfa başlığı bandı, alt bilgi.
   Not: bu bölüm sadece includes/header.php + includes/footer.php'yi kullanan
   sayfaları (index, hakkımızda, hizmetlerimiz, araçlarımız, referanslar,
   iletişim, teklif-al) etkiler — depo/admin/müşteri panelleri kendi menü
   yapısını kullandığı için buradan etkilenmez.
   ══════════════════════════════════════════════════════════════════════ */

/* — üst menü — */
.pub-nav-wrap {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid var(--color-divider);
}
.pub-nav {
  max-width: 1240px; margin: 0 auto; padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
}
.pub-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: var(--space-2); }
.pub-logo-mark { width: 34px; height: 34px; flex: none; }
/* Admin panelinden yüklenen özel logo görseli varsayılan SVG simgenin yerini
   alır; kare alana kırpılmadan (contain) sığdırılır — Suhara Nakliyat'a özel */
.pub-logo-mark img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; border-radius: 8px; }
/* Özel logo yüklendiğinde (.ozel-logo): artık küçük kare bir "simge" değil,
   yanındaki metni de içeren TAM bir logo olarak ele alınır — bu yüzden kare
   kutuya sıkıştırılmaz: sabit bir YÜKSEKLİK verilir, genişlik görselin kendi
   en-boy oranına göre otomatik ayarlanır (object-fit:contain ile birlikte),
   köşeler yuvarlatılmaz. max-width, çok geniş bir logonun mobilde "Teklif
   Al" butonu ve menü ikonuyla çakışmasını önler. */
.pub-logo-mark.ozel-logo { height: 42px; width: auto; flex: none; }
.pub-logo-mark.ozel-logo img {
  width: auto; height: 100%; max-width: 220px; object-fit: contain;
  object-position: left center; border-radius: 0;
}
@media (max-width: 480px) {
  .pub-logo-mark.ozel-logo { height: 34px; }
  .pub-logo-mark.ozel-logo img { max-width: 150px; }
}
.pub-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.pub-logo-text strong { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-accent-900); }
.pub-logo-text small { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--color-accent-2-600); }
.pub-nav-links { display: flex; align-items: center; gap: var(--space-4); margin-right: auto; }
.pub-nav-links a {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--color-neutral-800); text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.pub-nav-links a:hover { color: var(--color-accent); }
.pub-nav-links a[aria-current='page'] { color: var(--color-accent); border-bottom-color: var(--color-accent-2); }
.pub-nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.pub-nav-link { font-size: 13.5px; font-weight: 700; color: var(--color-accent-700); text-decoration: none; white-space: nowrap; }
.pub-nav-link:hover { color: var(--color-accent-900); }
.pub-cta { white-space: nowrap; }
.pub-nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 2px solid var(--color-divider); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.pub-nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 940px) {
  .pub-nav-links, .pub-nav-actions .pub-nav-link { display: none; }
  .pub-nav-toggle { display: inline-flex; }
  .pub-nav-wrap.menu-acik .pub-nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
    width: 100%; padding: var(--space-4) var(--space-6) 0;
  }
  .pub-nav-wrap.menu-acik .pub-nav-actions .pub-nav-link { display: block; }
  .pub-nav-wrap.menu-acik .pub-nav { flex-wrap: wrap; }
  .pub-nav-wrap.menu-acik .pub-nav-actions {
    width: 100%; padding: var(--space-3) var(--space-6) var(--space-4); flex-wrap: wrap;
  }
}

/* — Ana Sayfa "Referanslarımız" bölümü: logolar artık sabit bir ızgara yerine,
   soldan sağa doğru kesintisiz kayan bir şerit halinde gösteriliyor. İçerik
   PHP tarafında iki kez art arda basılıyor (bkz. index.php) ki şerit sona
   gelince "dikişsiz" şekilde baştan devam etsin. Fare üzerine gelince şerit
   duruyor — bir logoyu incelemek/tıklamak isteyen ziyaretçi kaçırmasın diye.
   Kenarlarda ince bir "solma" (mask) efektiyle şeridin aniden kesilmediği
   hissi veriliyor. Referanslar sayfasındaki büyük, açıklamalı kartlar bu
   değişiklikten etkilenmiyor, onlar sabit kalmaya devam ediyor.
   — Suhara Nakliyat'a özel */
.ref-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.ref-marquee-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation-name: ref-marquee-kaydir;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ref-marquee-viewport:hover .ref-marquee-track { animation-play-state: paused; }
.ref-marquee-track-ters { animation-direction: reverse; }
.ref-marquee-kart { width: 220px; aspect-ratio: 4/3; flex: none; }
@keyframes ref-marquee-kaydir {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-marquee-track { animation: none; }
}
@media (max-width: 560px) {
  .ref-marquee-kart { width: 160px; }
}

/* — ana sayfa hero — */
.pub-hero { max-width: 1240px; margin: 0 auto; padding: var(--space-8) var(--space-6) calc(var(--space-8) * 1.4); }
.pub-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--space-8) * 1.2); align-items: center; }
.pub-headline { font-size: 52px; line-height: 1.04; margin: var(--space-4) 0 var(--space-3); text-wrap: balance; }
.pub-headline .vurgu { color: var(--color-accent-2-600); }
.pub-subhead { font-size: 17px; font-weight: 700; color: var(--color-accent-800); margin: 0 0 var(--space-2); }
.pub-lead { font-size: 15.5px; max-width: 50ch; opacity: 0.82; margin: 0 0 var(--space-5); }
.pub-hero-visual {
  position: relative; aspect-ratio: 776/493; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.pub-hero-visual img, .pub-hero-visual svg { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .pub-hero-grid { grid-template-columns: 1fr; }
  .pub-headline { font-size: 38px; }
}

/* — özellik şeridi — */
.pub-features { background: var(--color-surface); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.pub-features-grid {
  max-width: 1240px; margin: 0 auto; padding: var(--space-6); display: grid;
  grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
}
.pub-feature { display: flex; align-items: flex-start; gap: var(--space-3); }
.pub-icon-circle {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-100); color: var(--color-accent-700);
}
.pub-icon-circle svg { width: 22px; height: 22px; }
.pub-icon-circle.amber { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.pub-feature-title { font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; letter-spacing: 0.01em; margin-bottom: 3px; }
.pub-feature-text { font-size: 13px; opacity: 0.78; margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .pub-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pub-features-grid { grid-template-columns: 1fr; } }

/* — hizmet kartları (ikon üstte) — */
.pub-hizmet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pub-hizmet-kart {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); padding: var(--space-6) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s;
}
.pub-hizmet-kart:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pub-hizmet-kart .pub-icon-circle { margin-bottom: var(--space-1); }
.pub-hizmet-kart h3, .pub-hizmet-kart h4 { margin: 0; font-size: 17px; }
.pub-hizmet-kart p { margin: 0; font-size: 13.5px; opacity: 0.8; line-height: 1.55; }
@media (max-width: 900px) { .pub-hizmet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pub-hizmet-grid { grid-template-columns: 1fr; } }

/* — anasayfa "Hizmetlerimiz" bölümü: fotoğraflı, numaralı kartlar — */
.pub-hizmet-foto-baslik { font-size: 34px; line-height: 1.1; margin: var(--space-2) 0 var(--space-2); text-wrap: balance; }
.pub-hizmet-foto-baslik .vurgu2 { color: var(--color-accent-2-600); }
.pub-hizmet-foto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pub-hizmet-foto-kart {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s;
}
.pub-hizmet-foto-kart:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pub-hizmet-foto-img {
  position: relative; height: 190px; background-size: cover; background-position: center;
  padding: var(--space-3);
}
.pub-hizmet-foto-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,23,41,0) 45%, rgba(12,23,41,.6) 100%);
}
.pub-hizmet-foto-no {
  position: relative; z-index: 1; display: inline-block; font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  color: #fff; opacity: .9; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.pub-hizmet-foto-no::after {
  content: ''; display: block; width: 22px; height: 3px; margin-top: 7px; border-radius: 2px;
  background: var(--color-accent-2); box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pub-hizmet-foto-img.yedek-1 { background-image: linear-gradient(160deg, var(--color-accent-500) 0%, var(--color-accent-800) 100%); }
.pub-hizmet-foto-img.yedek-2 { background-image: linear-gradient(160deg, var(--color-accent-600) 0%, var(--color-accent-900) 100%); }
.pub-hizmet-foto-img.yedek-3 { background-image: linear-gradient(160deg, var(--color-accent-2-600) 0%, var(--color-accent-800) 100%); }
.pub-hizmet-foto-img.yedek-4 { background-image: linear-gradient(160deg, var(--color-accent-400) 0%, var(--color-accent-800) 100%); }
.pub-hizmet-foto-ikon-suslu { position: absolute; right: -12px; bottom: -18px; opacity: .16; }
.pub-hizmet-foto-ikon-suslu svg { width: 100px; height: 100px; color: #fff; }
.pub-hizmet-foto-info {
  background: var(--color-accent-800); color: #fff; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); flex: 1; position: relative;
}
.pub-hizmet-foto-icon { margin-top: -38px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.pub-hizmet-foto-info h3 { margin: 0; font-size: 17px; color: #fff; }
.pub-hizmet-foto-info p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); flex: 1; }
.pub-hizmet-foto-link {
  color: var(--color-accent-2-400); font-weight: 600; font-size: 13.5px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.pub-hizmet-foto-link:hover { color: var(--color-accent-2-300); }
.pub-hizmet-foto-link span { transition: transform .15s; }
.pub-hizmet-foto-link:hover span { transform: translateX(3px); }
@media (max-width: 980px) { .pub-hizmet-foto-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .pub-hizmet-foto-grid { grid-template-columns: 1fr; }
  .pub-hizmet-foto-baslik { font-size: 26px; }
}

/* — renkli çağrı bandı (CTA) — */
.pub-cta-band {
  background: linear-gradient(135deg, var(--color-accent-900), var(--color-accent-700));
  color: #fff; text-align: center; padding: calc(var(--space-8) * 1.3) var(--space-6);
}
.pub-cta-band h2 { color: #fff; margin-bottom: var(--space-2); }
.pub-cta-band p { color: color-mix(in srgb, #fff 78%, transparent); max-width: 52ch; margin: 0 auto var(--space-5); }

/* — video tanıtım bandı (ana sayfa) — */
.pub-video-band {
  background: linear-gradient(135deg, var(--color-accent-900), var(--color-accent-700));
  padding: var(--space-8) var(--space-6);
}
.pub-video-band-grid {
  max-width: 1240px; margin: 0 auto; display: grid;
  grid-template-columns: 1.1fr 1fr; gap: calc(var(--space-8) * 1.2); align-items: center;
}
.pub-video-band h2 { color: #fff; margin: var(--space-3) 0 var(--space-2); font-size: 27px; }
.pub-video-band p { color: color-mix(in srgb, #fff 78%, transparent); margin: 0 0 var(--space-4); font-size: 14.5px; max-width: 48ch; }
.pub-video-thumb {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-700), var(--color-accent-900));
  border: 1px solid rgba(255,255,255,.14); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.pub-video-play {
  width: 68px; height: 68px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
}
.pub-video-play svg { width: 26px; height: 26px; }
.pub-video-thumb-label { position: absolute; left: var(--space-4); bottom: var(--space-3); color:#fff; font-size:12px; font-weight:700; letter-spacing:.03em; }
@media (max-width: 900px) { .pub-video-band-grid { grid-template-columns: 1fr; } }

/* — tanıtım videosu modalı — */
.video-modal {
  display: none; position: fixed; inset: 0; background: rgba(10,16,28,.82);
  z-index: 500; align-items: center; justify-content: center; padding: var(--space-6);
}
.video-modal.acik { display: flex; }
.video-modal-panel { position: relative; width: 100%; max-width: 920px; }
.video-modal-panel video { width: 100%; border-radius: var(--radius-lg); display: block; background: #000; }
.video-modal-kapat {
  position: absolute; top: -42px; right: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 22px; line-height: 1; cursor: pointer;
}
.video-modal-kapat:hover { background: rgba(255,255,255,.22); }

/* — iç sayfa başlık bandı (Hizmetlerimiz / Araçlarımız vb.) — */
.pub-page-banner {
  position: relative; overflow: hidden;
  background: var(--color-accent-100);
  padding: calc(var(--space-8) * 1.1) var(--space-6) var(--space-8);
}
.pub-page-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 62%, var(--color-accent-2-200) 62%, var(--color-accent-2-200) 66%, var(--color-accent-900) 66%, var(--color-accent-900) 100%);
  opacity: 0.35;
}
.pub-page-banner-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.pub-page-banner h1 { font-size: 40px; margin: var(--space-2) 0 var(--space-3); }
.pub-page-banner p { max-width: 62ch; opacity: 0.82; margin: 0; }

/* — alt bilgi (footer) — */
.pub-footer { border-top: 1px solid var(--color-divider); background: var(--color-surface); }
.pub-footer-grid {
  max-width: 1240px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-6);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6);
}
.pub-footer-col h6 { color: var(--color-accent-900); margin-bottom: var(--space-3); }
.pub-footer-col a { display: block; color: var(--color-neutral-700); text-decoration: none; font-size: 13.5px; font-weight: 600; margin-bottom: var(--space-2); }
.pub-footer-col a:hover { color: var(--color-accent); }
.pub-footer-bottom {
  max-width: 1240px; margin: 0 auto; padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-divider); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2); font-size: 12.5px; color: var(--color-neutral-600);
}
@media (max-width: 780px) { .pub-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pub-footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Depo Sayımı (QR etiket okutarak fiziksel sayım)                        */
/* ---------------------------------------------------------------------- */
.sayim-tarama-kutu {
  background: var(--color-accent-900); border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md); flex-wrap: wrap;
}
.sayim-tarama-ikon {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-md);
  background: var(--color-accent-2); display: flex; align-items: center; justify-content: center;
}
.sayim-tarama-alan { flex: 1; min-width: 220px; }
.sayim-tarama-alan label { display: block; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 6px; opacity: .85; }
.sayim-tarama-input {
  width: 100%; min-height: 52px; padding: 10px 16px; font-size: 17px; font-family: var(--font-mono);
  border: 3px solid var(--color-accent-2); border-radius: var(--radius-md); background: #fff; color: var(--color-accent-900);
}
.sayim-tarama-yardim { color: var(--color-accent-200, #C9D3E4); font-size: 12.5px; margin-top: 6px; }
.sayim-oturum { flex: none; text-align: right; color: #fff; }
.sayim-oturum .etiket { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.sayim-oturum .deger { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.fark-rozet {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700;
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.fark-dogru { background: var(--color-ok-bg); color: var(--color-ok); }
.fark-eksik { background: var(--color-danger-bg); color: var(--color-danger); }
.fark-fazla { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.eksi-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid var(--color-divider); background: var(--color-surface);
  cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1;
}
.eksi-btn:hover { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-bg); }
.legend-kutu {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4);
  border: 2px dashed var(--color-divider); border-radius: var(--radius-md); margin-top: var(--space-6); font-size: 13px;
}
.son-taranan-satir { animation: sayimVurgu 1.6s ease-out; }
@keyframes sayimVurgu { from { background: var(--color-accent-2-100); } to { background: transparent; } }
@media (max-width: 640px) {
  .sayim-tarama-kutu { padding: var(--space-4); }
  .sayim-oturum { text-align: left; width: 100%; }
}
.modal-box.kamera-modal { max-width: 420px; }
.kamera-video-kutu {
  background: #000; border-radius: var(--radius-md); overflow: hidden; line-height: 0;
  border: 3px solid var(--color-accent-2);
}
.kamera-video-kutu video { width: 100%; height: auto; display: block; max-height: 60vh; object-fit: cover; }

/* — Ana Sayfa "Sevkiyat Ağı" bölümü: 2 şube (İstanbul Esenyurt, Diyarbakır
   Bağlar) ve admin panelinden eklenen sevkiyat noktalarını stilize bir
   Türkiye haritası üzerinde gösterir. Harita kesin bir kadastro haritası
   değildir — okunaklı bir "kapsama alanı" grafiğidir. Koordinat hesaplaması
   includes/functions.php içindeki sevkiyat_harita_verisi() fonksiyonunda
   yapılır. — Suhara Nakliyat'a özel */
.sevkiyat-panel {
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1.5fr 1fr; overflow: hidden;
}
.sevkiyat-harita-alan { padding: var(--space-4); background: linear-gradient(180deg, #F8F6F0, #F1EEE4); position: relative; }
.sevkiyat-harita-alan svg { width: 100%; height: auto; display: block; }
.sevkiyat-hedef-nokta, .sevkiyat-sube-nokta { cursor: pointer; }

/* Bir noktanın üzerine gelince çıkan isim etiketi (tooltip). JS tarafından
   konumlandırılır (bkz. index.php); varsayılan olarak görünmez. */
.sevkiyat-tooltip {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  background: var(--color-accent-900); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  transform: translate(-50%, -145%); opacity: 0; transition: opacity .12s ease;
  box-shadow: var(--shadow-md);
}
.sevkiyat-tooltip.gorunur { opacity: 1; }
.sevkiyat-tooltip.sube { background: var(--color-accent-2); }
.sevkiyat-tooltip::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--color-accent-900);
}
.sevkiyat-tooltip.sube::after { border-top-color: var(--color-accent-2); }

.sevkiyat-yan-panel {
  padding: var(--space-6) var(--space-5); border-left: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.sevkiyat-istatistikler { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.sevkiyat-istatistik b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 21px; color: var(--color-accent-900); }
.sevkiyat-istatistik span { display: block; font-size: 10px; letter-spacing: .05em; color: var(--color-neutral-600); text-transform: uppercase; margin-top: 2px; }

.sevkiyat-legend { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; }
.sevkiyat-legend-item { display: flex; align-items: center; gap: var(--space-2); }
.sevkiyat-nokta { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.sevkiyat-nokta.sube { background: var(--color-accent-2); box-shadow: 0 0 0 3px rgba(232,145,43,.25); }
.sevkiyat-nokta.hedef { background: var(--color-accent); }

.sevkiyat-il-etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.sevkiyat-il-etiketler span {
  font-size: 11px; font-weight: 600; color: var(--color-accent-700);
  background: var(--color-accent-100); border-radius: 999px; padding: 4px 10px;
}

.sevkiyat-sube-liste { font-size: 12.5px; color: var(--color-neutral-700); line-height: 1.7; }
.sevkiyat-sube-liste b { color: var(--color-accent-900); }

.sevkiyat-il { fill: var(--color-accent-100); stroke: var(--color-accent-300); stroke-width: .6; transition: fill .15s ease; cursor: pointer; }
.sevkiyat-il.aktif { fill: var(--color-accent-200); }
.sevkiyat-il:hover { fill: var(--color-accent-300); }
.sevkiyat-baglanti path { stroke: var(--color-accent-300); stroke-width: 1; stroke-dasharray: 3 3; fill: none; opacity: .85; }
.sevkiyat-hedef-nokta { fill: var(--color-accent); stroke: #fff; stroke-width: 1.5; }
.sevkiyat-sube-nokta { fill: var(--color-accent-2); stroke: #fff; stroke-width: 2; }
.sevkiyat-sube-halka { fill: none; stroke: var(--color-accent-2); stroke-width: 1.5; opacity: .5; }
.sevkiyat-etiket-sube { font-family: var(--font-heading); font-size: 9.5px; font-weight: 800; fill: var(--color-accent-900); }

@media (max-width: 760px) {
  .sevkiyat-panel { grid-template-columns: 1fr; }
  .sevkiyat-yan-panel { border-left: none; border-top: 1px solid var(--color-divider); }
}

/* — Araçlarımız: fotoğraf + özellik listesi kartları — Suhara Nakliyat'a özel */
.arac-filo-kart {
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(22,35,63,.05);
}
.arac-filo-foto { aspect-ratio: 4/3; width: 100%; }
.arac-filo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arac-filo-govde { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.arac-filo-baslik { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-accent-900); }
.arac-filo-ozellikler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.arac-filo-ozellikler li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--color-neutral-700); line-height: 1.4; }
.arac-filo-ozellikler li svg { flex: none; margin-top: 2px; color: var(--color-accent-2); }

/* — Muhasebe modülü — Suhara Nakliyat'a özel — */
.badge-yeni {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .03em;
  background: var(--color-accent-2); color: #fff; border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: middle;
}
.muh-ustmenu { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--color-divider); margin-bottom: var(--space-5); }
.muh-ustmenu a {
  padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--color-neutral-600);
  text-decoration: none; border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.muh-ustmenu a:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
.muh-ustmenu a.aktif { color: var(--color-accent-900); border-bottom-color: var(--color-accent-2); background: var(--color-accent-100); }
.muh-icerik { min-width: 0; }
.muh-bolum-baslik { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-neutral-500); margin: var(--space-3) 0 0; }

.musteri-arac-satir { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; flex-wrap: wrap; }
.musteri-arama { flex: 1; min-width: 180px; max-width: 260px; }
.musteri-arama .input { min-height: 38px; padding: 7px 12px; font-size: 13.5px; }
.filtre-pil { display: flex; gap: 3px; background: var(--color-neutral-100); border-radius: 999px; padding: 3px; }
.filtre-pil a { font-size: 12px; font-weight: 700; color: var(--color-neutral-700); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.filtre-pil a.aktif { background: var(--color-accent); color: #fff; }

.musteri-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: start; }
.musteri-liste { background: var(--color-surface); border: 2px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; }
.musteri-satir { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; border-bottom: 2px solid var(--color-divider); text-decoration: none; color: inherit; }
.musteri-satir:last-child { border-bottom: none; }
.musteri-satir:hover { background: var(--color-accent-100); }
.musteri-satir.aktif-satir { background: var(--color-accent-100); }
.musteri-satir .ad { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; }
.musteri-bakiye { font-size: 12.5px; font-weight: 700; flex: none; text-align: right; }
.musteri-bakiye.pos { color: var(--color-ok); }
.musteri-bakiye.neg { color: var(--color-danger); }

/* Satışlar / Alışlar / Kasa-Banka gibi sonraki Muhasebe sayfalarında da kullanılacak durum rozetleri */
.tag-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.tag-warn { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.tevkifat-kutu { border: 2px dashed var(--color-accent-2); background: var(--color-accent-2-100); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-2); }

/* — Muhasebe > Güncel Durum (özet panosu) — */
.muh-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-divider); flex-wrap: wrap; }
.muh-tab { padding: 10px 20px; font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; color: var(--color-neutral-500); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.muh-tab.aktif { color: var(--color-accent-900); border-bottom-color: var(--color-accent-2); }
.muh-tab.pasif { cursor: default; opacity: .7; }
.muh-tarih { font-weight: 700; color: var(--color-accent-800); font-size: 13.5px; }
.muh-durum-ust { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }

.muh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-5); }
.muh-kart {
  border-radius: var(--radius-lg); padding: var(--space-5); color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-4); min-height: 128px;
}
.muh-kart-ust { display: flex; align-items: center; gap: var(--space-4); }
.muh-kart-icon {
  width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.muh-kart-tutar { font-family: var(--font-heading); font-weight: 800; font-size: 23px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.muh-kart-alt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; opacity: .95; margin-top: auto; }
.muh-kart-rozet { background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.muh-kart-cift { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12.5px; font-weight: 700; }
.muh-kart-cift b { opacity: .85; font-weight: 600; font-variant-numeric: tabular-nums; }

.muh-kart-kasa { background: linear-gradient(135deg, #0E9C8E, #0B7F73); }
.muh-kart-banka { background: linear-gradient(135deg, #3E8BE0, #2E6FBE); }
.muh-kart-cari { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-900)); }
.muh-kart-satis { background: linear-gradient(135deg, #3FA65C, #2C8046); }
.muh-kart-alis { background: linear-gradient(135deg, #E0554F, #BE3A35); }

.muh-durum-not { margin-top: var(--space-5); font-size: 12.5px; color: var(--color-neutral-500); }

@media (max-width: 900px) {
  .musteri-split { grid-template-columns: 1fr; }
  .muh-grid { grid-template-columns: 1fr; }
}

/* — KVKK Aydınlatma Metni sayfası (GUNCELLEME-63) — */
.kvkk-hero { background: var(--color-accent-900); padding: calc(var(--space-8)*1.8) var(--space-6) var(--space-8); text-align: center; }
.kvkk-hero-ic { max-width: 760px; margin: 0 auto; }
.kvkk-eyebrow {
  color: var(--color-accent-2-300); font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: var(--space-4);
}
.kvkk-baslik { margin: 0 0 var(--space-3); }
.kvkk-baslik span {
  display: inline-block; background: var(--color-accent-700); color: #fff;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-md);
  font-size: 30px;
}
.kvkk-tarih { color: var(--color-accent-300); font-size: 13px; margin: 0; }

.kvkk-govde { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-6) calc(var(--space-8)*1.5); }
.kvkk-bolum h2 { font-size: 19px; color: var(--color-accent-700); margin: 0 0 var(--space-3); }
.kvkk-bolum p { margin: 0 0 var(--space-2); line-height: 1.7; }
.kvkk-bolum ul { margin: var(--space-2) 0 0; padding-left: 1.3em; line-height: 1.8; }
.kvkk-cizgi { height: 2px; background: var(--color-divider); margin: var(--space-6) 0; }
.kvkk-iletisim-kutu {
  display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3);
  background: var(--color-neutral-100); border: 2px solid var(--color-divider);
  border-radius: var(--radius-md); padding: var(--space-4); font-size: 14px;
}
.kvkk-iletisim-kutu strong { font-size: 15px; }

@media (max-width: 560px) {
  .kvkk-baslik span { font-size: 22px; padding: var(--space-2) var(--space-3); }
}