/* ============================================================
   style.css — Ortak Stil Dosyası — SCAUT Brand Edition
   Primary Navy: #0B1F3B | Accent Cyan: #23D5E8
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --navy:       #0B1F3B;
  --navy-dark:  #060f1f;
  --navy-mid:   #112948;
  --navy-light: #1a3a5c;
  --blue-bright:#2563eb;
  --accent:     #23D5E8;
  --accent-dark:#1ab5c8;
  --accent-glow:rgba(35,213,232,.25);
  --white:      #ffffff;
  --gray-200:   #e2e8f0;
  --gray-300:   #cbd5e1;
  --gray-400:   #94a3b8;
  --gray-500:   #64748b;
  --gray-600:   #475569;
  --success:    #10b981;
  --danger:     #ef4444;
  --radius:     12px;
  --radius-sm:  8px;
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--navy);
  color: var(--white);
  min-height: 100vh;
}

/* ─── ARKAPLAN ─── */
.bg-mesh {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(37,99,235,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(30,77,155,.14) 0%, transparent 60%),
    linear-gradient(160deg, #0a1628 0%, #0d2244 50%, #0a1628 100%);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.content { position: relative; z-index: 1; }

/* ─── TOPBAR ─── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,22,40,.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.tb-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 3px; color: #fff;
}
.tb-logo img { height: 26px; width: 26px; }
.tb-logo span { color: var(--accent); }
.tb-div { width: 1px; height: 22px; background: rgba(255,255,255,.1); margin: 0 12px; }
.tb-nav { display: flex; gap: 3px; }
.nav-btn {
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: none; background: transparent;
  color: var(--gray-400); font-size: 13px; font-weight: 500;
  font-family: 'Barlow', sans-serif; cursor: pointer; transition: all .2s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.nav-btn:hover { background: rgba(255,255,255,.06); color: var(--white); }
.nav-btn.active { background: rgba(35,213,232,.12); color: #23D5E8; }
.user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px; background: rgba(255,255,255,.06);
  border-radius: 999px; font-size: 12px; color: var(--gray-300);
}
.uavatar {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #23D5E8, #1ab5c8);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #0B1F3B;
}
.btn-logout {
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.1); background: transparent;
  color: var(--gray-400); font-size: 12px; cursor: pointer;
  font-family: 'Barlow', sans-serif; transition: all .2s; margin-left: 8px;
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }

/* ─── BUTONLAR ─── */
.btn {
  display: inline-block; padding: 12px 20px;
  border: none; border-radius: var(--radius-sm);
  color: var(--white); font-size: 14px; font-weight: 700;
  font-family: 'Barlow', sans-serif; cursor: pointer;
  transition: all .2s; text-decoration: none; text-align: center;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-blue   { background: linear-gradient(135deg, #23D5E8, #1ab5c8); color: #0B1F3B !important; box-shadow: 0 4px 14px rgba(35,213,232,.35); }
.btn-teal   { background: linear-gradient(135deg, #0B1F3B, #112948); border: 1px solid rgba(35,213,232,.3); }
.btn-purple { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.btn-red    { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.btn-ghost  { background: transparent; border: 1px solid rgba(255,255,255,.15); color: var(--gray-300); }
.btn-ghost:hover { border-color: var(--white); color: var(--white); filter: none; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-full { width: 100%; }

/* ─── FORM ELEMANLARI ─── */
.fg { margin-bottom: 16px; }
.fl { display: block; font-size: 12px; font-weight: 600; color: var(--gray-300); margin-bottom: 6px; }
.freq { color: var(--accent); margin-left: 2px; }

.fi, .fs, .ft, .fsel {
  width: 100%; padding: 11px 13px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-sm);
  color: var(--white); font-size: 14px;
  font-family: 'Barlow', sans-serif;
  outline: none; transition: all .2s;
}
.fi:focus, .fs:focus, .ft:focus, .fsel:focus {
  border-color: var(--blue-bright);
  background: rgba(37,99,235,.08);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.fi::placeholder, .ft::placeholder { color: var(--gray-500); }

/* ─── .fsel — rapor-form.html'in dropdown'ları İÇİN ──────────────────
   NEDEN AYRI BİR SINIF: rapor-form.html'in KENDİ İÇİNDE (sayfaya özel
   <style> bloğunda) ".fs" adında TAMAMEN FARKLI, ilgisiz bir sınıf DAHA
   var (form BÖLÜMÜ/panel container'ı). Aynı isim iki farklı amaçla
   kullanılınca CSS cascade'i karışıyordu. Dropdown'lar çakışmasız,
   benzersiz bir isme (fsel) taşındı — saha satışta KANITLANMIŞ çalışan
   koyu lacivert renkler birebir uygulanıyor. */
select.fsel { background: #0f1e35; color: #e2e8f0; cursor: pointer; }
select.fsel option { background: #0f1e35; color: #e2e8f0; }
select.fsel:focus { border-color: var(--accent); outline: none; }

/* select.fi'nin (saha satış formu) KENDİ İÇİNDE tanımlı, kanıtlanmış
   çalışan koyu lacivert stili — .fs'ye de birebir uygulanıyor. Önceki
   düzeltme SADECE option'a dokunmuştu, SELECT'in KENDİSİNE (kapalı
   haldeki kutu) değil — bu yüzden görünüm hâlâ farklıydı. */
select.fs { background: #0f1e35; color: #e2e8f0; cursor: pointer; }
select.fs option { background: #0f1e35; color: #e2e8f0; }
select.fs:focus { border-color: var(--accent); outline: none; }
.ft { resize: vertical; min-height: 86px; }

/* ─── ÖZEL DROPDOWN (ozel-select.js, v2) ────────────────────────────────
   Native <select>'in açık listesindeki hover/odaklanmış satır bazı
   masaüstü tarayıcılarda (Windows Chrome/Edge) işletim sistemi
   renkleriyle çizilip CSS'i yok sayıyordu. Bu blok, native select'i
   DISPLAY:NONE ile render ağacından tamamen çıkarıp (v1'deki mükerrer
   görünüm hatası BÖYLECE imkansız hale geliyor) yerine tam kontrol
   ettiğimiz bir sahte buton + liste koyuyor — sadece masaüstünde aktif. */
.ozs-sarmalayici { position: relative; }
.ozs-native { display: none; } /* v1'de opacity:0 idi, mükerrer görünüme yol açıyordu */
.ozs-tetik {
  width: 100%; padding: 11px 13px; padding-right: 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-sm);
  color: var(--white); font-size: 14px; text-align: left;
  font-family: 'Barlow', sans-serif;
  outline: none; transition: all .2s; cursor: pointer;
  position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.ozs-tetik::after {
  content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); font-size: 11px; pointer-events: none;
}
.ozs-tetik.ozs-bos { color: var(--gray-500); }
.ozs-tetik.ozs-tetik-acik, .ozs-tetik:focus {
  border-color: var(--blue-bright);
  background: rgba(37,99,235,.08);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.ozs-tetik.ozs-devredisi { opacity: .5; cursor: not-allowed; }
.ozs-liste {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; z-index: 50;
  background: var(--navy-mid); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: 4px;
}
.ozs-liste.ozs-acik { display: block; }
.ozs-item {
  padding: 9px 12px; border-radius: 6px; font-size: 13.5px;
  color: var(--gray-200); cursor: pointer; transition: background .12s;
  outline: none;
}
.ozs-item:hover, .ozs-item:focus { background: rgba(37,99,235,.18); color: var(--white); }
.ozs-item.ozs-sec { background: rgba(37,99,235,.28); color: var(--white); font-weight: 600; }

/* Radio & Checkbox */
.rg, .cg { display: flex; flex-wrap: wrap; gap: 6px; }
.ro, .co {
  padding: 7px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all .2s;
  font-size: 12px; color: var(--gray-300); user-select: none;
}
.ro:hover, .co:hover { border-color: rgba(37,99,235,.4); }
.ro.sel, .co.sel {
  background: rgba(37,99,235,.15);
  border-color: var(--blue-bright); color: var(--white);
}

/* Evet / Hayır */
.yn { display: flex; gap: 6px; }
.ynb {
  padding: 7px 16px; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); background: transparent;
  color: var(--gray-300); font-size: 12px; font-weight: 600;
  font-family: 'Barlow', sans-serif; cursor: pointer; transition: all .2s;
}
.ynb.y.on { background: rgba(16,185,129,.15); border-color: var(--success); color: #6ee7b7; }
.ynb.n.on { background: rgba(239,68,68,.15);  border-color: var(--danger);  color: #fca5a5; }

/* ─── KARTLAR & TABLOLAR ─── */
.card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); overflow: hidden;
}
.card-head {
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.card-title { font-size: 14px; font-weight: 600; }

table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 10px 18px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .7px;
  color: var(--gray-400); text-transform: uppercase;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
tbody td {
  padding: 13px 18px; font-size: 13px; color: var(--gray-200);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
tbody tr:hover { background: rgba(37,99,235,.05); }
tbody tr:last-child td { border-bottom: none; }

/* ─── BADGE ─── */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.b-blue   { background: rgba(59,130,246,.15); color: #93c5fd; }
.b-green  { background: rgba(16,185,129,.15); color: #6ee7b7; }
.b-red    { background: rgba(239,68,68,.15);  color: #fca5a5; }
.b-yellow { background: rgba(245,158,11,.15); color: #fcd34d; }

/* ─── TOAST ─── */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; }
.toast {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  animation: toastIn .3s ease; min-width: 230px;
}
.toast.ok   { background: rgba(16,185,129,.93); color: #fff; }
.toast.err  { background: rgba(239,68,68,.93);  color: #fff; }
.toast.info { background: rgba(37,99,235,.93);  color: #fff; }

/* ─── ALERT ─── */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; display: none; }
.alert.show { display: block; }
.alert.err { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert.ok  { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }

/* ─── MODAL ─── */
.modal-bg {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
  overflow-y: auto; padding: 28px 16px;
}
.modal-box {
  max-width: 820px; margin: 0 auto;
  background: #fff; border-radius: 16px;
  padding: 40px; color: #1e293b;
  font-family: 'Barlow', sans-serif;
}
.confirm-bg {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.confirm-box {
  background: #0d2244; border: 1px solid rgba(239,68,68,.3);
  border-radius: 16px; padding: 32px;
  max-width: 400px; width: 90%;
  box-shadow: 0 8px 48px rgba(0,0,0,.5);
}

/* ─── SAYFA BAŞLIĞI ─── */
.page-header { margin-bottom: 24px; }
.page-title { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 800; }
.page-title span { color: var(--accent); }
.page-sub { color: var(--gray-400); font-size: 13px; margin-top: 3px; }

/* ─── BOŞ DURUM ─── */
.empty { text-align: center; padding: 40px 20px; color: var(--gray-500); }
.empty-ic { font-size: 40px; margin-bottom: 10px; }

/* ─── YÜKLEME ─── */
.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}

/* ─── ANİMASYONLAR ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.anim-up { animation: fadeUp .5s ease; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .topbar { padding: 0 14px; }
  .tb-nav .nav-btn span { display: none; }
}
@media print {
  body { background: #fff !important; color: #1e293b !important; }
  .no-print { display: none !important; }
}

/* ============================================================
   RESPONSIVE — Mobil Uyumluluk
   ============================================================ */

/* ─── HAMBURGER MENÜ ─── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: transparent;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--gray-300);
  border-radius: 2px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobil nav overlay */
.mob-nav {
  display: none;
  position: fixed;
  top: 60px; left: 0; right: 0;
  background: rgba(10,22,40,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 16px;
  z-index: 99;
  flex-direction: column;
  gap: 4px;
}
.mob-nav.open { display: flex; }
.mob-nav .nav-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 8px;
  justify-content: flex-start;
}
/* Mobil menü üstündeki SCAUT marka başlığı */
.mob-nav-baslik {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px;
  color: #e2e8f0;
}

/* ─── TABLET (768px) ─── */
@media (max-width: 900px) {
  .main { padding: 20px 16px; }
}

/* ─── MOBİL (640px ve altı) ─── */
@media (max-width: 640px) {

  /* iOS Safari, 16px'in altındaki input/select/textarea'lara odaklanınca
     otomatik yakınlaştırma (zoom) yapıyor — rahatsız edici. Bu proje
     genelinde kullanılan .fi/.fs/.ft input'ları için merkezi düzeltme. */
  .fi, .fs, .ft, .fsel { font-size: 16px; }

  /* Topbar */
  .topbar { padding: 0 14px; height: 56px; }
  .tb-nav { display: none; }
  .hamburger { display: flex; }
  .tb-div { display: none; }
  .user-pill span { display: none; }
  /* Yeni sadeleştirilmiş topbar (admin-drawer.js kullanan sayfalar) —
     hızlı linkler mobilde gizlenir, navigasyon tamamen drawer'a taşınır. */
  .tb-quicklink { display: none; }
  /* Logo ve user-pill artık drawer'ı açan BİRİNCİL tetikleyiciler —
     önceden sadece statik bir linkti, küçük olması sorun değildi.
     Şimdi 44px dokunma alanı garantiliyoruz. */
  .tb-logo { min-height: 44px; padding: 4px 0; }
  .user-pill { min-height: 44px; box-sizing: border-box; }
  /* Çıkış butonu artık hamburger menüsünün içine taşındı — mobilde ayrı gösterilmiyor */
  .btn-logout { display: none; }
  /* Mesajlaşma modülünün topbar simgesi de hamburger menüsüne taşındı */
  .msj-topbar-btn { display: none !important; }

  /* Hamburger menüsündeki özel öğeler (Mesajlar, Çıkış) */
  .mob-nav .mob-divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 4px; }
  .mob-nav .mob-cikis { color: var(--danger, #f87171); }
  .mob-nav .mob-cikis:hover, .mob-nav .mob-cikis:active { background: rgba(239,68,68,.08); }

  /* Menünün EN ÜSTÜNDEKİ hızlı çıkış — uzun link listesine kadar
     inmeden erişilsin diye. Aynı kırmızı renk, altında ayırıcı çizgi. */
  .mob-nav .mob-cikis-ust { color: var(--danger, #f87171); border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; padding-bottom: 14px; }
  .mob-nav .mob-cikis-ust:hover, .mob-nav .mob-cikis-ust:active { background: rgba(239,68,68,.08); }

  /* Ana içerik */
  .main { padding: 14px 12px; }
  .page-title { font-size: 20px; }
  .page-sub { font-size: 12px; }
  .page-header { margin-bottom: 16px; }

  /* Kartlar */
  .tcard { padding: 14px; border-radius: 12px; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .card-title { font-size: 13px; }

  /* Form alanları — parmakla tıklamaya uygun */
  .fi, .fs, .ft, .fsel {
    font-size: 16px !important; /* iOS zoom engelle */
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 8px;
  }
  .ft { min-height: 88px; }
  select.fs, select.fsel { min-height: 44px; }

  /* Grid'ler tek sütuna dön */
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Rapor form bölümleri */
  .fsh { padding: 12px 14px; }
  .fsh .sl { font-size: 13px; }
  .fsh .sn { width: 28px; height: 28px; font-size: 12px; }
  .fsb { padding: 14px 12px; }
  .fd { margin-bottom: 12px; }
  .fl { font-size: 12px; margin-bottom: 5px; }

  /* Radio/Checkbox butonlar — daha büyük dokunma alanı */
  .ro, .co {
    padding: 10px 14px !important;
    font-size: 12px !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .rg, .cg { gap: 6px !important; }

  /* Evet/Hayır butonları */
  .ynb { min-height: 44px; font-size: 13px; padding: 8px 16px; }

  /* Ana butonlar */
  .btn { padding: 12px 18px; font-size: 13px; min-height: 44px; }
  .btn-sm { padding: 10px 14px; font-size: 12px; min-height: 44px; }
  .btn-full { width: 100%; }

  /* Rapor form üst buton grubu */
  .rapor-btn-grup {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rapor-btn-grup .btn {
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }

  /* Tablo → mobilde yatay scroll */
  .tbl-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  thead th { padding: 8px 10px; font-size: 10px; }
  tbody td { padding: 9px 10px; font-size: 11px; }

  /* Raporlar listesi kart görünümü */
  .rapor-satir {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .rapor-butonlar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rapor-butonlar .btn, .rapor-butonlar a {
    flex: 1;
    min-width: 36px;
    text-align: center;
  }

  /* Modal tam ekran */
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal-box {
    padding: 16px 14px;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
  }
  .confirm-box {
    padding: 20px 16px;
    border-radius: 16px;
    width: 92%;
    max-width: 92%;
  }

  /* Rapor önizleme */
  #rep-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #rep-content > div { min-width: unset !important; max-width: 100% !important; }
  #rep-content table { font-size: 10px !important; min-width: 500px; }
  #rep-content td { padding: 5px 8px !important; font-size: 10px !important; }
  #rep-content h3 { font-size: 10px !important; padding: 7px 10px !important; }

  /* Fotoğraf yükleme */
  .foto-yukle-alan {
    min-height: 80px;
    padding: 14px;
  }
  .foto-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* CAT bölümü grid tek sütun */
  #fs11a .g2,
  #fs11a [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats / İstatistik sayfası */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-kart { padding: 12px !important; }

  /* UW Panel */
  .rapor-kart { padding: 12px 14px; }

  /* Modal başlık */
  .modal-bg { padding: 8px; }

  /* Toast — sahadaki güneş altında okunabilir */
  .toast-container { bottom: 16px; right: 12px; left: 12px; }
  .toast {
    min-width: unset; width: 100%;
    font-size: 14px; font-weight: 600;
    padding: 14px 16px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }

  /* Section başlık küçültme */
  .sb { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ─── KÜÇÜK MOBİL (390px ve altı — iPhone SE, Galaxy S) ─── */
@media (max-width: 390px) {
  .topbar { padding: 0 10px; }
  .main { padding: 10px 8px; }
  .page-title { font-size: 18px; }
  .fsh .sl { font-size: 12px; }
  .fi, .fs, .ft, .fsel { font-size: 16px !important; }
  .btn { font-size: 12px; padding: 10px 14px; min-height: 44px; }
  .btn-sm { font-size: 11px; padding: 8px 12px; min-height: 42px; }
  .foto-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
}

/* ─── DOKUNMA İYİLEŞTİRMELERİ (tüm mobil) ─── */
@media (hover: none) and (pointer: coarse) {
  /* Dokunmatik cihazlarda hover efektlerini kapat */
  .nav-btn:hover { background: transparent; }

  /* Tıklama alanlarını büyüt */
  .ro, .co { min-height: 44px; }
  .ynb { min-height: 44px; }
  .btn { min-height: 44px; }

  /* iOS safari input zoom engelle */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Aktif state için görsel feedback */
  .btn:active { opacity: 0.75; transform: scale(0.98); }
  .ro:active, .co:active { opacity: 0.75; }
}


/* ─── MOBİL EK İYİLEŞTİRMELER ─── */
@media (max-width: 640px) {

  /* Koordinat alanları yan yana değil alt alta */
  .koordinat-grup { flex-direction: column !important; }

  /* CAT risk grid tek sütun */
  #cat-deprem-wrap, #cat-sel-wrap, #cat-heyelan-wrap,
  #cat-firtina-wrap, #cat-kar-wrap, #cat-dolu-wrap,
  #cat-sivılasma-wrap, #cat-orman-wrap, #cat-tsunami-wrap {
    width: 100% !important;
  }

  /* Fotoğraf yükleme butonu tam genişlik */
  .foto-ekle-btn { width: 100%; margin-bottom: 8px; }

  /* Rapor form üst butonlar dikey */
  .rapor-ust-butonlar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .rapor-ust-butonlar .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Inline style grid override */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Bölüm kaydet butonu */
  .bolum-kaydet-bar { padding: 8px 12px; }
  .bolum-kaydet { width: 100%; border-radius: 8px; min-height: 44px; }

  /* Filtre butonları scroll */
  .filtre-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .filtre-btn, .fb {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* İstatistik canvas */
  canvas { max-width: 100% !important; height: auto !important; }

  /* UW karar butonları */
  .karar-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Karşılaştır sayfası */
  .sec-kart { min-width: unset !important; }

  /* Diff tablosu scroll */
  .diff-tablo { min-width: 500px; }
  .diff-tablo td, .diff-tablo th { font-size: 10px !important; padding: 6px 8px !important; }

  /* UW form grid */
  .uw-form-grid { grid-template-columns: 1fr !important; }

  /* Admin tablo */
  #users-tbl { overflow-x: auto; }
  #users-tbl table { min-width: 600px; }

  /* Rapor kopyala/karşılaştır arama */
  .sec-kart input.fi { font-size: 16px !important; }

  /* Login sayfası */
  .login-box { padding: 24px 16px !important; margin: 10px !important; }

  /* Geçmiş afet paneli */
  #cat-gecmis-icerik { font-size: 12px; line-height: 2; }

  /* Fotoğraf grid 2 kolon */
  .rapor-foto-grid { grid-template-columns: 1fr 1fr !important; }

  /* Araç gereç sayfası */
  .tools-grid { grid-template-columns: 1fr !important; }

  /* Puan kartı */
  .puan-kart { flex-direction: column !important; gap: 12px !important; }
  .puan-kart .pk-skor { font-size: 36px !important; }

  /* Raporlar filtre bar scroll */
  #filtre-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  /* Rapor önizleme butonları */
  #preview-butonlar {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #preview-butonlar button {
    width: 100%;
  }

  /* Dropdown arama */
  .ara-dropdown { max-height: 200px; }

  /* İnput group (yan yana input + buton) */
  div[style*="display:flex"] > .fi + .btn,
  div[style*="display: flex"] > .fi + .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ─── TABLET (641-1024px) ─── */
@media (min-width: 641px) and (max-width: 1024px) {
  .g3 { grid-template-columns: 1fr 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; }
  .main { padding: 16px 20px; }
  .modal-box { max-width: 680px; }
}

/* ─── SAFE AREA (iPhone notch) ─── */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .main {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .modal-box {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ── Bildirim Badge ─────────────────────────────────────────────── */
.nav-bildirim-badge {
  display: none;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 0 5px; border-radius: 999px;
  margin-left: 5px; vertical-align: middle;
  animation: badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN/MÜHENDİS DRAWER — saha satışla AYNI görsel dil, admin tarafının
   13 sayfasında PAYLAŞILAN tek bir tanım. /js/admin-drawer.js tarafından
   kullanılır. ID'ler saha satışın #ss-drawer'ından bilinçli olarak farklı
   (admin-drawer-*) — iki sistem hiçbir zaman aynı sayfada olmasa da,
   karışıklığı önlemek için netlik sağlıyor.
   ═══════════════════════════════════════════════════════════════════════ */
#admin-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;backdrop-filter:blur(4px);}
#admin-drawer-overlay.acik{display:block;}
#admin-drawer{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:85vw;background:#0a1628;border-right:1px solid rgba(255,255,255,.1);z-index:201;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom));}
#admin-drawer.acik{transform:translateX(0);}
.ad-profil{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.ad-profil-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#23D5E8,#0ea5e9);color:#0a1628;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;overflow:hidden;}
.ad-profil-avatar img{width:100%;height:100%;object-fit:cover;}
.ad-profil-bilgi{flex:1;min-width:0;}
.ad-profil-ad{font-size:14px;font-weight:700;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ad-profil-email{font-size:11px;color:#475569;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ad-profil-rol{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:4px;display:inline-block;background:rgba(37,99,235,.15);color:#93c5fd;}
.ad-kapat{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);border:none;color:#64748b;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ad-nav{flex:1;padding:12px 0;overflow-y:auto;}
.ad-nav a,.ad-nav button.ad-item{display:flex;align-items:center;gap:12px;padding:14px 20px;color:#e2e8f0;text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;background:none;border:none;width:100%;text-align:left;transition:background .15s;}
.ad-nav a:hover,.ad-nav button.ad-item:hover,.ad-nav a.aktif,.ad-nav a:focus,.ad-nav button.ad-item:focus{background:rgba(35,213,232,.08);color:#23D5E8;outline:none;}
.ad-nav a .dicon,.ad-nav button.ad-item .dicon{font-size:18px;width:24px;text-align:center;flex-shrink:0;}
.ad-bolme{height:1px;background:rgba(255,255,255,.06);margin:8px 16px;}
.ad-grup-baslik{padding:10px 20px 4px;font-size:10px;font-weight:700;letter-spacing:1px;color:#475569;text-transform:uppercase;}
.ad-nav .cikis-btn{color:#f87171;}
.ad-badge{background:#7c3aed;color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;margin-left:auto;}

@media(max-width:640px){
  #admin-drawer{width:280px;}
  .ad-kapat{width:44px;height:44px;}
}