/* =====================================================================
   ANATOLIA SHILD — Garanti Sistemi Teması ("Charming Black")
   Tüm panel sayfalarında sayfanın kendi <style> bloğundan SONRA yüklenir;
   HTML / PHP yapısına dokunmadan görünümü kurumsal hale getirir.

   Renk:   siyah zemin · grafit yüzeyler · kalkan kırmızısı #B3202A
   Yazı:   Saira (başlıklar, logodaki eğik karakter) · Figtree (arayüz)
   ===================================================================== */

:root{
  --as-black:#000000;
  --as-surface:#111214;
  --as-surface-2:#17181b;
  --as-surface-3:#1e2024;
  --as-field:#0b0c0e;
  --as-line:rgba(255,255,255,.075);
  --as-line-2:rgba(255,255,255,.13);
  --as-red:#B3202A;
  --as-red-hi:#CC2C36;
  --as-red-deep:#7A141B;
  --as-red-tint:rgba(179,32,42,.14);
  --as-silver:#C9CDD3;
  --as-text:#F3F4F6;
  --as-muted:#8F949C;
  --as-ok:#2FA872;
  --as-warn:#D39B2A;
  --as-bad:#E0464E;
  --as-r-lg:16px;
  --as-r-md:12px;
  --as-r-sm:9px;
  --as-font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --as-display:"Saira","Figtree",ui-sans-serif,system-ui,sans-serif;

  /* sayfaların kendi değişkenlerini markaya çek */
  --bg:#000; --bg-soft:#111214; --bg-soft-2:#17181b; --card:#111214; --card-2:#17181b; --card2:#17181b;
  --panel:#111214; --panel2:#17181b; --stroke:rgba(255,255,255,.075); --stroke-2:rgba(255,255,255,.13);
  --bd:rgba(255,255,255,.075); --bd2:rgba(255,255,255,.13);
  --text:#F3F4F6; --muted:#8F949C; --muted-2:#6b7078; --muted2:#6b7078;
  --brand:#B3202A; --brand-2:#7A141B; --red:#B3202A; --red2:#CC2C36;
  --red1:#B3202A;
  --ok:#2FA872; --warn:#D39B2A; --bad:#E0464E;
  --shadow:none; --shadow2:none;
}

/* ---------- Zemin & tipografi ---------- */
html{background:var(--as-black)}
body{margin:0}
body{
  background:var(--as-black) !important;
  color:var(--as-text) !important;
  font-family:var(--as-font) !important;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
}
/* Sayfanın en üstünde ince kalkan kırmızısı film çizgisi */
body::before{
  content:"";position:fixed;left:0;right:0;top:0;height:2px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--as-red) 18%,var(--as-red) 82%,transparent 100%);
}

h1,h2,h3,h4,
.title,.sectionTitle,.brandtitle,.brandName,.heroTitle,.asideTitle,.modal-title{
  font-family:var(--as-display) !important;
  letter-spacing:.005em;
  color:var(--as-text);
}
/* Sayfa başlıkları: logodaki gibi eğik, kalkan işaretiyle */
.top > div > h2:first-child,
.top h2,
.topbar .title,
.wrap > .top h1,
.page > .topbar .title{
  font-style:italic;
  font-weight:700;
  font-size:24px;
  display:flex;align-items:center;gap:10px;
}
.top > div > h2:first-child::before,
.top h2::before,
.topbar .title::before{
  content:"";width:18px;height:20px;flex:0 0 18px;
  background:var(--as-red);
  -webkit-mask:url(/garanti/assets/brand/shield.svg) center/contain no-repeat;
          mask:url(/garanti/assets/brand/shield.svg) center/contain no-repeat;
}
h3{font-weight:600;font-size:17px}

a{color:#e7787f}
a:hover{color:#ff9aa0}
::selection{background:var(--as-red);color:#fff}

.muted,.mini,.subText,.sectionDesc,.statHint,.noteText,.miniSub,.infoHint{color:var(--as-muted) !important}
.mono{font-family:var(--as-display) !important;letter-spacing:.02em;color:var(--as-silver)}
.eyebrow,.kicker,.chipLabel,.statLabel{text-transform:none !important;letter-spacing:0 !important}

/* ---------- Yerleşim ---------- */
.wrap,.page,.container{max-width:1320px}
.top,.topbar{
  padding:14px 0 18px !important;
  margin-bottom:18px !important;
  border-bottom:1px solid var(--as-line);
  background:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border-top:0 !important;border-left:0 !important;border-right:0 !important;
}
.page > .topbar.panel{padding:14px 4px 18px !important}

/* ---------- Yüzeyler ---------- */
.card,.panel,.heroCard,.infoCard,.noteCard,.statCard,.kpi,.tile,.box,.zoneCard,.kindTab,.carBox,.modal-box,.brandbar{
  background:var(--as-surface) !important;
  border:1px solid var(--as-line) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.card,.panel{border-radius:var(--as-r-lg) !important;padding:18px}
.card::before,.card:before,.brandbar::after{display:none !important}
.card.hover:hover{transform:none;filter:none}
.box{border-radius:var(--as-r-md) !important}
.kpi,.statCard{border-radius:var(--as-r-md) !important}
.kpi .n,.statValue,.kpi b,.ssKpi b{font-family:var(--as-display) !important;font-weight:700;font-size:28px;color:var(--as-text)}
.statCard{border-top:2px solid var(--as-red) !important}

.divider{background:var(--as-line) !important}

/* ---------- Butonlar ---------- */
.btn,button.btn,a.btn,.pagebtn,.miniBtn,.qrBtn{
  font-family:var(--as-font) !important;
  font-weight:700 !important;
  letter-spacing:.005em;
  border-radius:var(--as-r-sm) !important;
  background:var(--as-surface-3) !important;
  border:1px solid var(--as-line-2) !important;
  color:var(--as-text) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover,.pagebtn:hover{background:#272a30 !important;border-color:rgba(255,255,255,.22) !important;filter:none !important;transform:none !important}
.btn.red,.btn.primary,.btn.danger,button.red,.pagebtn.on,.qrBtn.red{
  background:var(--as-red) !important;
  border-color:var(--as-red) !important;
  color:#fff !important;
}
.btn.red:hover,.btn.primary:hover,.pagebtn.on:hover{background:var(--as-red-hi) !important;border-color:var(--as-red-hi) !important}
.btn.red::after{display:none !important}
.btn.edit,.btn.blue{background:rgba(201,205,211,.08) !important;border-color:rgba(201,205,211,.28) !important;color:var(--as-silver) !important}
.btn.outline,.btn.secondary,.btn.link,.btn.gray,.btnSoft{background:transparent !important}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--as-red-hi);outline-offset:2px}

/* ---------- Form alanları ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select,textarea{
  background:var(--as-field) !important;
  border:1px solid var(--as-line-2) !important;
  color:var(--as-text) !important;
  border-radius:var(--as-r-sm) !important;
  font-family:var(--as-font) !important;
  font-size:14px !important;
  box-shadow:none !important;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--as-red) !important;
  box-shadow:0 0 0 3px rgba(179,32,42,.22) !important;
  outline:none !important;
}
input::placeholder,textarea::placeholder{color:#5d626a !important}
select option,select optgroup{background:#15161a;color:var(--as-text)}
input[type=file]{color:var(--as-muted);font-family:var(--as-font)}
input[type=file]::file-selector-button{
  margin-right:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--as-line-2);
  background:var(--as-surface-3);color:var(--as-text);font-weight:700;cursor:pointer;font-family:var(--as-font)
}
input[type=checkbox],input[type=radio]{accent-color:var(--as-red)}
label,.field label{color:var(--as-muted) !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important}
/* Tarayıcı otomatik doldurması (Chrome açık mavi zemin + beyaz yazı sorununu önler) */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):-webkit-autofill,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):-webkit-autofill:hover,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--as-field) inset !important;box-shadow:0 0 0 60px var(--as-field) inset !important;
  -webkit-text-fill-color:var(--as-text) !important;caret-color:var(--as-text);transition:background-color 9999s ease-out 0s}

/* ---------- Tablolar ---------- */
table{border-collapse:collapse}
th{
  color:var(--as-muted) !important;
  font-weight:600 !important;
  font-size:12px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  background:var(--as-surface-2) !important;
  border-bottom:1px solid var(--as-line-2) !important;
}
td{border-bottom:1px solid var(--as-line) !important;color:var(--as-text)}
tbody tr:hover td{background:rgba(255,255,255,.022)}
.tableWrap,.table-wrap{border-radius:var(--as-r-md);border:1px solid var(--as-line)}
.tableWrap table,.table-wrap table{margin:0}

/* ---------- Etiketler ---------- */
.pill,.badge,.bchip,.catTag,.salesTag,.ssBadge,.qrBadge,.dealerBadge{
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--as-line-2) !important;
  color:var(--as-silver) !important;
  box-shadow:none !important;
}
.pill.on,.badge.ok,.badge.green{background:rgba(47,168,114,.12) !important;border-color:rgba(47,168,114,.4) !important;color:#7fd8ae !important}
.pill.off,.badge.bad,.badge.red{background:rgba(224,70,78,.12) !important;border-color:rgba(224,70,78,.42) !important;color:#f19aa0 !important}
.badge.warn,.badge.yellow{background:rgba(211,155,42,.12) !important;border-color:rgba(211,155,42,.42) !important;color:#e9c27a !important}
.ssBadge.top{background:var(--as-red-tint) !important;border-color:rgba(179,32,42,.55) !important;color:#f3b3b7 !important}

.chip{border-radius:999px !important;background:transparent !important;border:1px solid var(--as-line-2) !important;color:var(--as-silver) !important;font-weight:700 !important}
.chip.on{background:var(--as-red) !important;border-color:var(--as-red) !important;color:#fff !important}

/* ---------- Mesajlar ---------- */
.msg,.alert{border-radius:var(--as-r-md) !important;padding:12px 14px !important;font-weight:600;border-left-width:3px !important}
.msg.ok,.alert.ok,div.ok:not(.pill):not(.badge):not(.seal):not(.dot){background:rgba(47,168,114,.09) !important;border:1px solid rgba(47,168,114,.35) !important;border-left:3px solid var(--as-ok) !important;color:#c6f0db !important}
.msg.bad,.msg.err,.alert.bad,div.bad:not(.pill):not(.badge):not(.seal):not(.dot),div.err{background:rgba(224,70,78,.09) !important;border:1px solid rgba(224,70,78,.35) !important;border-left:3px solid var(--as-bad) !important;color:#f8cfd2 !important}

/* ---------- Sekmeler / adımlar (bayi paneli) ---------- */
.navTabs a{border-radius:999px !important}
.navTabs a.on{background:var(--as-red) !important;border-color:var(--as-red) !important}
.stepPill{background:transparent !important;border:1px solid var(--as-line) !important;border-radius:999px !important}
.stepNo{background:var(--as-red-tint) !important;color:#f3b3b7 !important;border:1px solid rgba(179,32,42,.45) !important}
.kindTab{border-radius:var(--as-r-md) !important}
.kindTab.on{border-color:var(--as-red) !important;background:linear-gradient(180deg,rgba(179,32,42,.16),rgba(179,32,42,.05)) !important;box-shadow:inset 0 -2px 0 var(--as-red) !important}
.kindTab b{font-family:var(--as-display);font-weight:700;font-size:15px}
.kIcon{background:var(--as-surface-3) !important}
.zoneCard.on{border-color:var(--as-red) !important;background:linear-gradient(180deg,rgba(179,32,42,.12),rgba(179,32,42,.03)) !important}
.zoneCard.on .zoneCheck{background:var(--as-red) !important;border-color:var(--as-red) !important}
.carSvg .g.on{fill:var(--as-red) !important;stroke:#f3b3b7 !important}
.transferBar{background:rgba(17,18,20,.92) !important;border:1px solid var(--as-red) !important}
.ssPerFilter a.on{background:var(--as-red) !important;border-color:var(--as-red) !important}
.ssKpi div{background:var(--as-surface-2) !important;border:1px solid var(--as-line) !important}

/* Üst bar logosu (koyu zemin versiyonu) */
.logoBox{background:transparent !important;border:0 !important;width:auto !important;height:auto !important;min-width:0;padding:0 !important;box-shadow:none !important}
.logoBox img{height:46px !important;width:auto !important;max-width:none;padding:0 !important;object-fit:contain}
.topbar::before,.topbar::after,.top::before,.top::after{display:none !important}
.titleBox .t1{font-family:var(--as-display) !important;font-style:italic;font-weight:700 !important;font-size:22px !important;letter-spacing:.005em !important}
.titleBox .t2{color:var(--as-muted) !important}
.seg{background:var(--as-surface) !important;border:1px solid var(--as-line) !important}
.seg a.on{background:var(--as-red) !important;color:#fff !important;border-color:var(--as-red) !important}
.zoneGrid .zoneCard:last-child:nth-child(odd){grid-column:1 / -1}
.kIcon svg{width:22px;height:22px;stroke:var(--as-silver);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kindTab.on .kIcon svg{stroke:#fff}
.kindTab.on .kIcon{background:var(--as-red) !important}
.brandlogo{background:transparent !important;border:0 !important;width:auto !important}
.brandlogo img{height:38px;width:auto !important}

/* Modal */
.modal-overlay{background:rgba(0,0,0,.72) !important;backdrop-filter:blur(4px)}
.modal-box{border-radius:var(--as-r-lg) !important}

/* QR tarama ekranı */
.qrOverlay{background:#000 !important}

/* Kaydırma çubuğu */
*{scrollbar-color:#2a2d33 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a2d33;border-radius:10px;border:2px solid #000}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media (max-width:700px){
  .top > div > h2:first-child,.top h2,.topbar .title{font-size:20px}
  .card,.panel{padding:14px}
}

/* ---------- Ek düzeltmeler ---------- */
*,*::before,*::after{box-sizing:border-box}
.ssBadge{white-space:nowrap;padding:6px 12px !important}
.preview{background:var(--as-surface-2) !important;border:1px dashed var(--as-line-2) !important}
.serialBig{color:var(--as-text) !important;font-family:var(--as-display) !important;letter-spacing:.04em !important}
.err{background:rgba(224,70,78,.09) !important;border:1px solid rgba(224,70,78,.35) !important;color:#f8cfd2 !important}
h1,h2,h3,b,strong,.val,.v,.infoValue,.statValue{color:inherit}
.card h1,.card h2,.card h3,.panel h2,.panel h3{color:var(--as-text) !important}
td,th,label,p,li,span{border-color:var(--as-line)}
body > *{color:var(--as-text)}