/* ==========================================================================
   Vienev İş Takip Merkezi — ORTAK TEMA SİSTEMİ
   Üç tema: sedef (açık, varsayılan) · gece (koyu) · renkli (açık + dolgun vurgu)
   Nasıl çalışır: <html data-tema="sedef|gece|renkli"> — tüm renkler bu
   dosyadaki CSS custom property token'larından okunur. Sayfa gövdesindeki
   (index/satis/yapilanlar/urun) gömülü <style> blokları artık sabit renk
   kodu değil, buradaki var(--...) token'larını kullanır.
   FOUC'u önlemek için her sayfanın <head>'inde şu satır bu dosyadan ÖNCE
   çalışır: document.documentElement.dataset.tema = localStorage.getItem('tema')||'sedef'
   ========================================================================== */

/* ---------- Evrensel reset + gövde tabanı ---------- */
*{box-sizing:border-box;margin:0}
/* 06/09: body'ye height:100% + overflow-x:hidden verilince KAYDIRAN KUTU body
   oluyordu; window.scrollY hep 0 dönüyor, "başa dön", kart kapanışında konum
   koruma ve gömülü çerçeve ölçüsü çalışmıyordu. Sayfayı yine pencere kaydırır. */
html{height:100%;overflow-x:hidden}
body{min-height:100%;overflow-x:hidden}
body{
  font-family:-apple-system,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  transition:background-color .25s ease,color .25s ease;
}

/* ==========================================================================
   TOKEN TANIMLARI
   ========================================================================== */

/* ---------- SEDEF (varsayılan / açık) ---------- */
:root{
  --zemin:#f5f5f7;
  --kart:#ffffff;
  --kart-ust:#eef1f4;
  --metin:#1c1c1e;
  --soluk:#6b7280;
  --cizgi:rgba(60,60,67,.12);
  --golge:0 2px 6px rgba(16,24,32,.04),0 16px 40px rgba(16,24,32,.08);

  --mavi:#007aff;
  --yesil:#34c759;
  --amber:#ff9500;
  --kirmizi:#ff3b30;
  --mor:#af52de;

  /* rozet / kolon / kart iç zemin tonları — accent'lerin düşük opaklıklı hali */
  --tint-mavi:rgba(0,122,255,.12);
  --tint-yesil:rgba(52,199,89,.14);
  --tint-amber:rgba(255,149,0,.14);
  --tint-kirmizi:rgba(255,59,48,.12);
  --tint-mor:rgba(175,82,222,.12);
  --tint-gri:rgba(120,120,128,.10);

  --odak-halka:rgba(0,122,255,.35);

  --aside-zemin:rgba(255,255,255,.72);
  --aside-metin:#3a3a3c;
  --aside-sec:var(--mavi);
  --aside-sec-metin:#ffffff;

  --logo-filter:none;
}

/* ---------- GECE (gerçek koyu mod) ---------- */
html[data-tema="gece"]{
  --zemin:#101216;
  --kart:#1a1d23;
  --kart-ust:#22262d;
  --metin:#e8eaee;
  --soluk:#8a8f98;
  --cizgi:rgba(255,255,255,.08);
  --golge:0 2px 8px rgba(0,0,0,.35),0 18px 42px rgba(0,0,0,.45);

  --mavi:#4c8dff;
  --yesil:#3dd68c;
  --amber:#ffb020;
  --kirmizi:#ff5c5c;
  --mor:#c77dff;

  --tint-mavi:rgba(76,141,255,.18);
  --tint-yesil:rgba(61,214,140,.16);
  --tint-amber:rgba(255,176,32,.16);
  --tint-kirmizi:rgba(255,92,92,.16);
  --tint-mor:rgba(199,125,255,.16);
  --tint-gri:rgba(255,255,255,.09);

  --odak-halka:rgba(76,141,255,.45);

  --aside-zemin:#0c0e12;
  --aside-metin:#b7bcc6;
  --aside-sec:#1f232a;
  --aside-sec-metin:#ffffff;

  --logo-filter:invert(1) brightness(1.6);
}

/* ---------- RENKLİ (açık zemin + dolgun gradyan vurgular) ---------- */
html[data-tema="renkli"]{
  --tint-mavi:rgba(0,122,255,.14);
  --tint-yesil:rgba(52,199,89,.16);
  --tint-amber:rgba(255,149,0,.16);
  --tint-kirmizi:rgba(255,59,48,.14);
  --tint-mor:rgba(175,82,222,.14);
  --tint-gri:rgba(120,120,128,.12);
}

/* ==========================================================================
   ORTAK BİLEŞEN İSKELETİ (tüm sayfalarda aynı görünüm)
   ========================================================================== */

.gizle{display:none!important}

/* Kenar menü (aside) — index / satis / yapilanlar ortak */
aside{
  width:230px;
  background:var(--aside-zemin);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--cizgi);
  padding:22px 14px;
  flex-shrink:0;
  transition:background-color .25s ease,border-color .25s ease;
}
.marka{text-align:center}
.marka img{filter:var(--logo-filter);transition:filter .25s ease}

nav a{
  transition:background-color .15s ease,color .15s ease;
}
nav a:hover:not(.sec){background:var(--tint-gri)}
nav a:focus-visible{outline:2px solid var(--mavi);outline-offset:2px;border-radius:11px}
nav a.sec{background:var(--aside-sec);color:var(--aside-sec-metin)}
html[data-tema="gece"] nav a.sec{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* Form kontrolleri — odak & hover cilası */
button{font-family:inherit;transition:filter .12s ease,background-color .15s ease,transform .12s ease}
button:not(:disabled):hover{filter:brightness(.96)}
input,textarea,select{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--mavi);
  outline-offset:2px;
}

/* Kart yüzeyleri — tema geçişinde yumuşak animasyon (sınıf adı hangi sayfada
   geçiyorsa orada devreye girer, eşleşmeyen sayfada etkisi yok) */
.kart,.kpi .kart,.panel,.kolon,.kartg,.gorev,.olay,.giris-kutu,.kutu,table,.suz button,.rozet{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}

/* Panel — index & yapılanlar'da ortak taban (dış görünüm; iç boşluk/tipografi
   sayfa içindeki <style>'da kalır) */
.panel{background:var(--kart);box-shadow:var(--golge)}
.panel h2{color:var(--soluk)}

/* Rozet — tek formül, tüm temalarda otomatik uyum sağlar */
.rozet{display:inline-block;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;white-space:nowrap}
.r-ACIK{background:var(--tint-amber);color:var(--amber)}
.r-DUZELTILDI_KONTROL_BEKLIYOR{background:var(--tint-mavi);color:var(--mavi)}
.r-KAPANDI{background:var(--tint-yesil);color:var(--yesil)}
.r-GERI_ACILDI{background:var(--tint-kirmizi);color:var(--kirmizi)}
.r-ATANMAMIS{background:var(--tint-mor);color:var(--mor)}
.rozet.mini{padding:2px 8px;font-size:10px}
.r-YENI{background:var(--tint-mavi);color:var(--mavi)}
.r-GEC{background:var(--tint-kirmizi);color:var(--kirmizi)}

/* Kanban kolonları — hafif renk tonlu zemin (sedef'te ferah, gece'de de
   aynı formülle otomatik koyu-uyumlu çalışır; token'lar hallediyor) */
.kolon{background:var(--kart-ust)}
.kolon:nth-child(1){background:linear-gradient(180deg,var(--tint-amber),transparent 65%),var(--kart-ust)}
.kolon:nth-child(2){background:linear-gradient(180deg,var(--tint-mavi),transparent 65%),var(--kart-ust)}
.kolon:nth-child(3){background:linear-gradient(180deg,var(--tint-yesil),transparent 65%),var(--kart-ust)}
.kolon:nth-child(4){background:linear-gradient(180deg,var(--tint-gri),transparent 65%),var(--kart-ust)}

/* ---------- RENKLİ tema — kolon başlıkları dolgun gradyan şerit,
   kartlarda ince renkli sol kenar ---------- */
html[data-tema="renkli"] .kolon{background:var(--kart);box-shadow:var(--golge);padding:0;overflow:hidden}
html[data-tema="renkli"] .kolon>h3{color:#fff;padding:11px 14px;margin-bottom:8px;border-radius:0}
html[data-tema="renkli"] .kolon>h3 .adet{color:rgba(255,255,255,.85)}
html[data-tema="renkli"] .kolon>h3 .nokta{display:none}
html[data-tema="renkli"] .kolon:nth-child(1)>h3{background:linear-gradient(90deg,var(--amber),#f7a94b)}
html[data-tema="renkli"] .kolon:nth-child(2)>h3{background:linear-gradient(90deg,var(--mavi),#5b8cf2)}
html[data-tema="renkli"] .kolon:nth-child(3)>h3{background:linear-gradient(90deg,var(--yesil),#4dbd82)}
html[data-tema="renkli"] .kolon:nth-child(4)>h3{background:linear-gradient(90deg,var(--soluk),#b0b0b5)}
html[data-tema="renkli"] .kartg{margin:0 9px 9px;border-left:3px solid var(--cizgi)}
html[data-tema="renkli"] .kolon:nth-child(1) .kartg{border-left-color:var(--amber)}
html[data-tema="renkli"] .kolon:nth-child(2) .kartg{border-left-color:var(--mavi)}
html[data-tema="renkli"] .kolon:nth-child(3) .kartg{border-left-color:var(--yesil)}
html[data-tema="renkli"] .kolon:nth-child(4) .kartg{border-left-color:var(--soluk)}