/* =========================================================
   TEMEL TASARIM TOKENLARI — tüm sayfalarda ortak
   ========================================================= */
:root{
  --navy:#101B30;
  --navy-2:#182849;
  --navy-3:#213863;
  --paper:#EEEAE0;
  --paper-2:#E4DFD2;
  --concrete:#8A93A6;
  --concrete-light:#B7BECC;
  --amber:#FFB627;
  --amber-dark:#D99400;
  --steel:#5B8DBE;
  --danger:#D6544A;
  --success:#4C9A6A;
  --ink:#181C22;
  --grid-line: rgba(255,255,255,0.045);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--navy);
  color:var(--paper);
  min-height:100vh;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--concrete-light);
}

.panel{
  background: var(--paper);
  color:var(--ink);
  border-radius:9px;
  padding:18px 18px 16px;
  position:relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.corner{ position:absolute; width:9px; height:9px; opacity:0.35; border-color: var(--navy-2); }
.corner.tl{top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; border-radius:2px 0 0 0;}
.corner.br{bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; border-radius:0 0 2px 0;}

/* Butonlar */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600; font-size:14px;
  padding:12px 22px;
  border-radius:7px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition: transform .12s ease, background .15s;
}
.btn:active{ transform: translateY(1px); }
.btn-amber{ background:var(--amber); color:var(--ink); }
.btn-amber:hover{ background:var(--amber-dark); }
.btn-outline{ background:transparent; color:var(--paper); border-color: rgba(255,255,255,0.25); }
.btn-outline:hover{ background:rgba(255,255,255,0.08); }
.btn-block{ width:100%; }

/* Form alanları */
.field{ margin-bottom:16px; }
.field label{
  display:block; margin-bottom:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--concrete);
}
.field input, .field select{
  width:100%;
  padding:11px 13px;
  border-radius:6px;
  border:1px solid var(--paper-2);
  background:#fff;
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
}
.field input:focus, .field select:focus{
  outline:2px solid var(--steel);
  outline-offset:1px;
}
.field-hint{ font-size:11.5px; color:var(--concrete); margin-top:5px; }
.field-error{
  background: rgba(214,84,74,0.12);
  border:1px solid rgba(214,84,74,0.4);
  color:#8E2E26;
  border-radius:6px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:16px;
}

/* =========================================================
   MOBİL NAVİGASYON — sidebar 768px altında kayar panele döner
   (768px kasıtlı düşük tutuldu: laptop/masaüstü pencereleri
   tam ekran olmasa bile yanlışlıkla mobil moda geçmesin)
   ========================================================= */
.hamburger-btn{
  display:none;
  width:36px; height:36px; border-radius:7px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  color:var(--paper); align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.hamburger-btn svg{ width:19px; height:19px; }

.menu-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e05252; color:#fff; font-size:10px; font-weight:700; font-family:'IBM Plex Mono'; margin-left:auto; }
.icon-btn{ position:relative; }
.icon-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.icon-btn .bell-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e05252; color:#fff; font-size:9px; font-weight:700; font-family:'IBM Plex Mono'; display:flex; align-items:center; justify-content:center; }


.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(6,10,20,0.62);
  z-index:55;
}
.sidebar-backdrop.acik{ display:block; }

@media (max-width: 768px){
  main{ width:100%; padding:16px 14px 26px !important; grid-template-columns:1fr !important; }

  .sidebar{
    position:fixed !important; top:0; left:0; bottom:0;
    width:250px; max-width:80vw;
    height:100vh;
    z-index:60;
    transform:translateX(-100%);
    transition:transform .22s ease;
    display:flex !important;
    box-shadow:0 0 60px rgba(0,0,0,0.5);
  }
  .sidebar.acik{ transform:translateX(0); }

  .hamburger-btn{ display:flex; }

  /* Grid'ler tek sütuna insin */
  .kpi-row{ grid-template-columns:repeat(2,1fr) !important; }
  .map-layout{ grid-template-columns:1fr !important; }
  .settings-grid{ grid-template-columns:1fr !important; }
  .hero{ grid-template-columns:1fr !important; }
  .features{ grid-template-columns:repeat(2,1fr) !important; }

  .grid-cards{ grid-template-columns:1fr !important; }

  table.datatable{ font-size:12px; }

  /* Üst istatistik şeridi mobilde: TEK SATIR, kompakt. Hamburger sol üstte
     sabit küçük kare, ortada 4 istatistik, sağda küçültülmüş bildirim/çıkış
     ikonları (bildirim rozeti mobilde de görünmeli — tamamen gizlenmez).
     Yazılar küçültülüp taşarsa "..." ile kesilir — dikey yer asla büyümez. */
  .topbar{ align-items:center !important; height:auto !important; min-height:56px; padding:8px 8px 8px 44px !important; position:relative; gap:6px; }
  .stat-strip{
    display:flex !important; flex-wrap:nowrap !important; overflow-x:visible !important;
    gap:5px; flex:1 1 auto; min-width:0; align-items:center;
  }
  .hamburger-btn{ position:absolute; top:50%; left:8px; transform:translateY(-50%); width:28px; height:28px; }
  .hamburger-btn svg{ width:15px; height:15px; }
  .icon-actions{ display:flex !important; flex-shrink:0; gap:4px; }
  .icon-actions .icon-btn{ width:26px; height:26px; }
  .icon-actions .icon-btn svg{ width:13px; height:13px; }
  .icon-btn .bell-badge{ top:-3px; right:-3px; min-width:13px; height:13px; font-size:8px; padding:0 3px; }
  .stat{ flex:1 1 0; min-width:0; border-right:none !important; padding:0 !important; display:block !important; text-align:center; }
  .stat:first-child{ flex:1.6 1 0; text-align:left; }
  .stat svg{ display:none; }
  .stat .val{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.02em; }
  .stat .lbl{ font-size:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

@media (max-width: 480px){
  .kpi-row{ grid-template-columns:1fr !important; }
  .features{ grid-template-columns:1fr !important; }
  .hero h1{ font-size:26px !important; }
  .page-head{ flex-direction:column; align-items:flex-start !important; gap:6px; }
  .panel-head h2, .page-head h1{ font-size:15px !important; }
}

/* Tablo taşmasını önlemek için sarmalayıcı */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Bildirim (zil) dropdown + duyuru detay popup — tüm sayfalarda ortak */
.bildirim-dropdown{ display:none; position:absolute; top:44px; right:0; width:300px; max-height:400px; overflow-y:auto; background:var(--paper); color:var(--ink); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,0.35); z-index:70; text-align:left; }
.bildirim-dropdown.acik{ display:block; }
.bildirim-baslik{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--concrete); padding:12px 14px 4px; }
.bildirim-item{ display:block; padding:10px 14px; font-size:12.5px; border-top:1px solid var(--paper-2); cursor:pointer; color:var(--ink); text-decoration:none; }
.bildirim-item:first-child{ border-top:none; }
.bildirim-item:hover{ background:var(--paper-2); }
.bildirim-item.okunmadi{ font-weight:700; }
.bildirim-item.okunmadi::before{ content:'●'; color:var(--amber); font-size:8px; margin-right:6px; vertical-align:middle; }
.bildirim-item .tarih{ display:block; font-size:10px; color:var(--concrete); margin-top:2px; font-weight:400; }
.bildirim-bos{ padding:16px 14px; font-size:12px; color:var(--concrete); text-align:center; }

.duyuru-modal-arkaplan{ display:none; position:fixed; inset:0; background:rgba(6,10,20,0.65); z-index:90; align-items:center; justify-content:center; padding:20px; }
.duyuru-modal-arkaplan.acik{ display:flex; }
.duyuru-modal{ background:var(--paper); color:var(--ink); border-radius:12px; padding:22px; max-width:420px; width:100%; max-height:80vh; overflow-y:auto; }
.duyuru-modal h3{ font-family:'Space Grotesk'; font-size:17px; margin:0 0 12px; }
.duyuru-modal p{ font-size:13.5px; line-height:1.6; white-space:pre-wrap; color:var(--concrete); margin:0 0 18px; }

/* Sayfa-özel eğitici (tutorial) popup'ı — tüm sayfalarda ortak */
.tutorial-modal-arkaplan{ display:none; position:fixed; inset:0; background:rgba(6,10,20,0.72); z-index:95; align-items:center; justify-content:center; padding:20px; }
.tutorial-modal-arkaplan.acik{ display:flex; }
.tutorial-modal{ background:var(--paper); color:var(--ink); border-radius:14px; padding:26px; max-width:440px; width:100%; max-height:82vh; overflow-y:auto; position:relative; }
.tutorial-rozet{ display:inline-block; background:rgba(255,182,39,0.15); color:var(--amber); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:10px; }
.tutorial-modal h3{ font-family:'Space Grotesk'; font-size:19px; margin:0 0 14px; }
.tutorial-adimlar{ margin:0 0 20px; padding:0 0 0 18px; }
.tutorial-adimlar li{ font-size:13.5px; line-height:1.7; color:var(--concrete); margin-bottom:9px; }
.tutorial-adimlar li strong{ color:var(--ink); }
.tutorial-modal #tutorialAnladimBtn{ width:100%; padding:12px; font-size:13.5px; }

/* "Ana Ekrana Ekle" bildirimi — mobilde, sayfanın altında sabit durur */
.pwa-banner{
  display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:200;
  background:var(--paper); color:var(--ink); border-radius:12px; padding:12px 12px 12px 14px;
  align-items:center; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.pwa-banner.acik{ display:flex; }
.pwa-banner img{ width:38px; height:38px; border-radius:9px; flex-shrink:0; object-fit:cover; }
.pwa-banner-metin{ flex:1; min-width:0; }
.pwa-banner-baslik{ font-weight:700; font-size:13px; line-height:1.3; }
.pwa-banner-alt{ font-size:11px; color:var(--concrete); margin-top:2px; line-height:1.35; }
.pwa-banner-kur{ background:var(--amber); color:#1A1200; border:none; border-radius:7px; padding:9px 14px; font-size:12.5px; font-weight:700; cursor:pointer; flex-shrink:0; }
.pwa-banner-kapat{ background:none; border:none; color:var(--concrete); font-size:15px; cursor:pointer; padding:4px 2px; flex-shrink:0; line-height:1; }
@media (min-width:769px){ .pwa-banner{ display:none !important; } }