/* ==========================================================================
   ServisPanel CRM — tasarım katmanı
   Modern ve canlı: beyaz kartlar, renkli simge çipleri, yumuşak tonlu zeminler, ince çerçeve,
   hafif gölge. Düz renkli büyük bloklar yok. Bağlantılar hiçbir durumda altı çizili değil.
   Dış kütüphane yok. Renk kuralları ve sınıf tablosu: TASARIM-SISTEMI.md · canlı örnek: /tasarim
   ========================================================================== */

/* Inter (kendi sunucumuzdan; CSP dış yazı tipine izin vermez) — Türkçe harfler ve ₺ latin-ext'te */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Belirteçler
   Her renk dört adımlı: dolgu (beyaz yazı ≥ 4.5:1), koyu (üzerine gelince),
   açık (zemin), metin (açık zemin üstünde yazı ≥ 6:1). Amber dolguda yazı koyu.
   -------------------------------------------------------------------------- */
:root {
  --mavi: #2563eb;    --mavi-koyu: #1d4ed8;    --mavi-acik: #eff4ff;    --mavi-metin: #1e40af;
  --yesil: #04825a;   --yesil-koyu: #036b4a;   --yesil-acik: #ebfaf3;   --yesil-metin: #065f46;
  --amber: #f59e0b;   --amber-koyu: #d97706;   --amber-acik: #fff8e6;   --amber-metin: #92400e;
  --amber-dugme: #b45309; --amber-dugme-koyu: #92400e; /* amber dolu düğme: beyaz yazı 5:1 (sarı zeminde koyu yazı öbür düğmelerle uyumsuzdu) */
  --kirmizi: #e11d48; --kirmizi-koyu: #be123c; --kirmizi-acik: #fff0f3; --kirmizi-metin: #9f1239;
  --turuncu: #cf440d; --turuncu-koyu: #b33a0b; --turuncu-acik: #fff3eb; --turuncu-metin: #9a3412;
  --mor: #7c3aed;     --mor-koyu: #6d28d9;     --mor-acik: #f4f1ff;     --mor-metin: #5b21b6;
  --pembe: #db2777;   --pembe-koyu: #be185d;   --pembe-acik: #fdf0f7;   --pembe-metin: #9d174d;
  --teal: #0b8077;    --teal-koyu: #0a6b64;    --teal-acik: #eafaf7;    --teal-metin: #115e59;
  --indigo: #4f46e5;  --indigo-koyu: #4338ca;  --indigo-acik: #eef0ff;  --indigo-metin: #3730a3;
  --gri: #64748b;     --gri-koyu: #475569;     --gri-acik: #f1f5f9;     --gri-metin: #475569;

  --marka: var(--mavi);
  --marka-koyu: var(--mavi-koyu);
  --marka-acik: var(--mavi-acik);

  /* Bileşenlerin kullandığı ton (varsayılan marka mavisi; .ton-* sınıfları değiştirir) */
  --ok-asagi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* açılır liste oku: select.girdi ve aramalı liste (as-dugme) */
  --ton: var(--mavi); --ton-koyu: var(--mavi-koyu); --ton-acik: var(--mavi-acik); --ton-metin: var(--mavi-metin); --ton-yazi: #fff;

  --zemin: #f5f7fa;
  --yuzey: #ffffff;
  --yuzey-2: #f8fafc;
  --cizgi: #e6e9ef;
  --cizgi-koyu: #d3d9e2;
  --metin: #0f172a;
  --metin-2: #475569;
  --metin-3: #5b6a7e;  /* gri zeminlerde de ≥ 4,5:1 (eskisi #64748b f1f5f9 üstünde 4,34) */

  /* Kenar menü açık: beyaz, ince çizgi; etkin öğe yumuşak mavi */
  --kenar: #ffffff;
  --kenar-2: #f1f5f9;
  --kenar-metin: #334155;
  --kenar-soluk: #6b7789;

  /* Gölgeler: kartlarda çok hafif, yüzen katmanlarda (açılır menü, toast, modal) belirgin */
  --golge-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --golge-kart: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --golge-ust: 0 6px 16px -6px rgba(16, 24, 40, .14), 0 2px 4px rgba(16, 24, 40, .04);
  --golge-yuzen: 0 16px 36px -10px rgba(15, 23, 42, .22), 0 3px 8px rgba(15, 23, 42, .06);
  --halka: 0 0 0 3px rgba(37, 99, 235, .2);

  --yaricap: 8px;     /* düğme, girdi, küçük kutular */
  --yaricap-k: 6px;   /* çip, menü öğesi */
  --yaricap-b: 8px;  /* kart, kutucuk, başlık, modal */
  --yazi: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tonlar — bir bileşene renk vermek için: class="kart kart-tonlu ton-yesil" */
.ton-mavi    { --ton: var(--mavi);    --ton-koyu: var(--mavi-koyu);    --ton-acik: var(--mavi-acik);    --ton-metin: var(--mavi-metin);    --ton-yazi: #fff; }
.ton-yesil   { --ton: var(--yesil);   --ton-koyu: var(--yesil-koyu);   --ton-acik: var(--yesil-acik);   --ton-metin: var(--yesil-metin);   --ton-yazi: #fff; }
.ton-amber   { --ton: var(--amber);   --ton-koyu: var(--amber-koyu);   --ton-acik: var(--amber-acik);   --ton-metin: var(--amber-metin);   --ton-yazi: #1f1300; }
.ton-kirmizi { --ton: var(--kirmizi); --ton-koyu: var(--kirmizi-koyu); --ton-acik: var(--kirmizi-acik); --ton-metin: var(--kirmizi-metin); --ton-yazi: #fff; }
.ton-turuncu { --ton: var(--turuncu); --ton-koyu: var(--turuncu-koyu); --ton-acik: var(--turuncu-acik); --ton-metin: var(--turuncu-metin); --ton-yazi: #fff; }
.ton-mor     { --ton: var(--mor);     --ton-koyu: var(--mor-koyu);     --ton-acik: var(--mor-acik);     --ton-metin: var(--mor-metin);     --ton-yazi: #fff; }
.ton-pembe   { --ton: var(--pembe);   --ton-koyu: var(--pembe-koyu);   --ton-acik: var(--pembe-acik);   --ton-metin: var(--pembe-metin);   --ton-yazi: #fff; }
.ton-teal    { --ton: var(--teal);    --ton-koyu: var(--teal-koyu);    --ton-acik: var(--teal-acik);    --ton-metin: var(--teal-metin);    --ton-yazi: #fff; }
.ton-indigo  { --ton: var(--indigo);  --ton-koyu: var(--indigo-koyu);  --ton-acik: var(--indigo-acik);  --ton-metin: var(--indigo-metin);  --ton-yazi: #fff; }
.ton-gri     { --ton: var(--gri);     --ton-koyu: var(--gri-koyu);     --ton-acik: var(--gri-acik);     --ton-metin: var(--gri-metin);     --ton-yazi: #fff; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14px/1.5 var(--yazi);
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
p { margin: 0; }
/* Kural: bağlantılar hiçbir durumda altı çizili değil — üzerine gelince yalnız renk koyulaşır */
a, a:hover, a:focus, a:active { text-decoration: none; }
:where(a) { color: var(--marka); transition: color .15s; }
:where(a:hover) { color: var(--marka-koyu); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
small { font-size: max(11px, .85em); } /* tarayıcının "smaller"ı 13 px tabloda 10,8 px'e iniyordu */
code { font: 12.5px/1.4 Consolas, "Courier New", monospace; background: var(--yuzey-2); padding: 2px 6px; border-radius: var(--yaricap-k); }

.ikon-seti { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.soluk { color: var(--metin-3); }
.sag { text-align: right; }
.zorunlu { color: var(--kirmizi); }
.renkli-metin { color: var(--ton); }

/* --------------------------------------------------------------------------
   Düğmeler — renk işlevden gelir (TASARIM-SISTEMI.md):
   birincil mavi · kaydet yeşil · düzenle amber · sil kırmızı · bilgi teal ·
   yazdır mor · ikincil (vazgeç) beyaz · hayalet saydam. .dugme-acik: aynı rengin açık hali.
   -------------------------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--yaricap);
  font-weight: 650; font-size: 14px; line-height: 1; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
  white-space: nowrap;
}
.dugme:active:not([disabled]) { transform: translateY(1px); }
.dugme:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 28%, transparent); }
.dugme[disabled], .dugme.bekliyor { opacity: .6; cursor: progress; }

.dugme-birincil { --ton: var(--mavi);    --ton-koyu: var(--mavi-koyu);    --ton-acik: var(--mavi-acik);    --ton-metin: var(--mavi-metin);    --ton-yazi: #fff; }
.dugme-kaydet, .dugme-vurgu { --ton: var(--yesil); --ton-koyu: var(--yesil-koyu); --ton-acik: var(--yesil-acik); --ton-metin: var(--yesil-metin); --ton-yazi: #fff; }
.dugme-duzenle, .dugme-renkli.ton-amber { --ton: var(--amber-dugme); --ton-koyu: var(--amber-dugme-koyu); --ton-acik: var(--amber-acik); --ton-metin: var(--amber-metin); --ton-yazi: #fff; }
.dugme-sil      { --ton: var(--kirmizi); --ton-koyu: var(--kirmizi-koyu); --ton-acik: var(--kirmizi-acik); --ton-metin: var(--kirmizi-metin); --ton-yazi: #fff; }
.dugme-bilgi    { --ton: var(--teal);    --ton-koyu: var(--teal-koyu);    --ton-acik: var(--teal-acik);    --ton-metin: var(--teal-metin);    --ton-yazi: #fff; }
.dugme-yazdir   { --ton: var(--mor);     --ton-koyu: var(--mor-koyu);     --ton-acik: var(--mor-acik);     --ton-metin: var(--mor-metin);     --ton-yazi: #fff; }

/* Dolu düğme: tonun düz dolgusu, kalın beyaz yazı; üzerine gelince koyulaşır (renkli parlama / gölge yok) */
.dugme-birincil, .dugme-kaydet, .dugme-vurgu, .dugme-duzenle, .dugme-sil, .dugme-bilgi, .dugme-yazdir, .dugme-renkli {
  background: var(--ton); color: var(--ton-yazi); box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.dugme-birincil:hover, .dugme-kaydet:hover, .dugme-vurgu:hover, .dugme-duzenle:hover, .dugme-sil:hover, .dugme-bilgi:hover, .dugme-yazdir:hover, .dugme-renkli:hover {
  background: var(--ton-koyu); color: var(--ton-yazi); box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
/* Açık düğme (dolu düğmenin eşi, ör. Filtrele + Sıfırla): beyaz zemin, tonlu çerçeve ve yazı; üzerine gelince tonun açık zemini */
.dugme.dugme-acik { background: var(--yuzey); color: var(--ton-metin); border-color: color-mix(in srgb, var(--ton) 40%, #fff); box-shadow: var(--golge-xs); }
.dugme.dugme-acik:hover { background: var(--ton-acik); color: var(--ton-metin); border-color: color-mix(in srgb, var(--ton) 60%, #fff); box-shadow: var(--golge-xs); }
.dugme.dugme-acik .ikon { color: currentColor; }
/* İkincil: beyaz, ince çerçeve; simge yazıyla aynı koyulukta (okunurluk) */
.dugme-ikincil { --ton: var(--mavi); background: var(--yuzey); color: var(--metin); border-color: var(--cizgi-koyu); box-shadow: var(--golge-xs); }
.dugme-ikincil:hover { background: var(--yuzey-2); border-color: #b9c1cd; color: var(--metin); }
.dugme-ikincil .ikon { color: var(--metin-2); }
.dugme-ikincil:hover .ikon { color: var(--metin); }
.dugme-hayalet { --ton: var(--gri); background: transparent; color: var(--metin-2); }
.dugme-hayalet:hover { background: var(--gri-acik); color: var(--metin); }
/* Beyaz: tonlu başlık / kart üstünde; simgesi tonun renginde */
.dugme-beyaz { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi-koyu); box-shadow: var(--golge-xs); }
.dugme-beyaz .ikon { color: var(--ton); }
.dugme-beyaz:hover { background: var(--yuzey-2); border-color: #c3cad5; color: var(--metin); }
/* Yumuşak düğme (kullanıcı, 19.10.2026: beyaz / saydam düğme düz yazı gibi görünüyordu): tonun açık zemini, tonlu çerçeve
   ve yazı — rengi işlevinden. Yardımcı işlemlerde ton-* ile: class="dugme dugme-yumusak ton-mor".
   Hazır işlevler: dugme-temizle (süzgeci / seçimi temizle, sıfırla) turuncu · dugme-vazgec (vazgeç, geri, dön) gri ·
   dugme-kaldir (kaldır, iptal et, kapat) kırmızı */
.dugme-temizle { --ton: var(--turuncu); --ton-koyu: var(--turuncu-koyu); --ton-acik: var(--turuncu-acik); --ton-metin: var(--turuncu-metin); }
.dugme-vazgec  { --ton: var(--gri);     --ton-koyu: var(--gri-koyu);     --ton-acik: var(--gri-acik);     --ton-metin: var(--gri-metin); }
.dugme-kaldir  { --ton: var(--kirmizi); --ton-koyu: var(--kirmizi-koyu); --ton-acik: var(--kirmizi-acik); --ton-metin: var(--kirmizi-metin); }
.dugme-yumusak, .dugme-temizle, .dugme-vazgec, .dugme-kaldir {
  background: var(--ton-acik); color: var(--ton-metin); border-color: color-mix(in srgb, var(--ton) 30%, #fff); box-shadow: var(--golge-xs);
}
.dugme-yumusak .ikon, .dugme-temizle .ikon, .dugme-vazgec .ikon, .dugme-kaldir .ikon { color: var(--ton); }
.dugme-yumusak:hover, .dugme-temizle:hover, .dugme-vazgec:hover, .dugme-kaldir:hover {
  background: color-mix(in srgb, var(--ton) 15%, #fff); border-color: color-mix(in srgb, var(--ton) 55%, #fff); color: var(--ton-metin);
}
.dugme-vazgec { border-color: var(--cizgi-koyu); }
.dugme-blok { display: flex; width: 100%; }
.dugme-buyuk { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 8px; }
.dugme-kucuk { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--yaricap-k); }

.dugme-ikon {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  background: var(--yuzey); color: var(--metin-2); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dugme-ikon:hover { background: var(--yuzey-2); border-color: var(--cizgi-koyu); color: var(--metin); }
.dugme-ikon:focus-visible { outline: none; box-shadow: var(--halka); }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.alan { display: grid; gap: 6px; }
.alan > label { font-weight: 650; font-size: 13.5px; color: var(--metin); }
.alan-ipucu { font-size: 12.5px; color: var(--metin-3); margin-top: -8px; }
.uyari-metni { color: var(--amber-metin); margin-top: 0; }

.girdi {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap);
  background: var(--yuzey); outline: none; box-shadow: var(--golge-xs);
  transition: border-color .15s, box-shadow .15s;
}
textarea.girdi { height: auto; padding: 10px 14px; resize: vertical; }
/* Normal açılır liste aramalı listeyle aynı görünsün (tarayıcı oku ve iç boşluğu farklıydı) */
select.girdi:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: var(--ok-asagi); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px; }
select.girdi:disabled { cursor: not-allowed; }
.girdi:hover { border-color: #b9c1cd; }
.girdi:focus { border-color: var(--marka); box-shadow: var(--halka); }
.girdi:disabled { background: var(--yuzey-2); color: var(--metin-3); box-shadow: none; cursor: not-allowed; }
.girdi::placeholder { color: var(--metin-3); }

.girdi-kap { position: relative; }
.girdi-kap .girdi { padding-left: 42px; }
.girdi-kap .girdi:has(~ .girdi-dugme) { padding-right: 46px; }
.girdi-ikon { position: absolute; left: 13px; top: 13px; color: var(--metin-3); pointer-events: none; }
.girdi-dugme {
  position: absolute; right: 4px; top: 4px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; background: transparent; color: var(--metin-3); border-radius: var(--yaricap-k); cursor: pointer;
}
.girdi-dugme:hover { color: var(--metin); background: var(--yuzey-2); }

.captcha { display: flex; align-items: center; gap: 10px; }
.captcha img { border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: #f4f8fc; }

.onay-kutusu { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.onay-kutusu input { width: 18px; height: 18px; accent-color: var(--marka); margin: 0; }

/* --------------------------------------------------------------------------
   Bildirimler: satır içi uyarı (giriş/kilit formu), toast, modal
   Tür → renk: basari yeşil · hata kırmızı · uyari amber · bilgi mavi
   -------------------------------------------------------------------------- */
.uyari-basari, .toast-basari { --ton: var(--yesil);   --ton-koyu: var(--yesil-koyu);   --ton-acik: var(--yesil-acik);   --ton-metin: var(--yesil-metin);   --ton-yazi: #fff; }
.uyari-hata,   .toast-hata   { --ton: var(--kirmizi); --ton-koyu: var(--kirmizi-koyu); --ton-acik: var(--kirmizi-acik); --ton-metin: var(--kirmizi-metin); --ton-yazi: #fff; }
.uyari-uyari,  .toast-uyari  { --ton: var(--amber);   --ton-koyu: var(--amber-koyu);   --ton-acik: var(--amber-acik);   --ton-metin: var(--amber-metin);   --ton-yazi: #1f1300; }
.uyari-bilgi,  .toast-bilgi  { --ton: var(--mavi);    --ton-koyu: var(--mavi-koyu);    --ton-acik: var(--mavi-acik);    --ton-metin: var(--mavi-metin);    --ton-yazi: #fff; }

.uyari {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--ton) 22%, transparent); border-radius: 8px;
  background: var(--ton-acik); color: var(--ton-metin); font-weight: 500;
}
.uyari > span { flex: 1; }
.uyari .ikon { margin-top: 1px; color: var(--ton); }
.uyari-uyari .ikon { color: var(--amber-metin); }
.uyari-kapat { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
.uyari-kapat:hover { opacity: 1; }
.uyari .uyari-kapat .ikon { color: inherit; }

/* Toast — sağ üstte, beyaz kart; renk simgede ve süre çizgisinde. Başarı/bilgi kendiliğinden kapanır, hata kalır */
.toast-alani {
  position: fixed; top: 80px; right: 20px; z-index: 100;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 16px; overflow: hidden; pointer-events: auto;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-b); background: var(--yuzey); color: var(--metin);
  font-weight: 550; box-shadow: var(--golge-yuzen);
  animation: toast-gir .22s ease-out;
}
.toast > span { flex: 1; padding-top: 3px; }
.toast > .ikon { flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 4px; margin: 0; border-radius: var(--yaricap); background: var(--ton); color: var(--ton-yazi); }
.toast-kapat { flex: none; border: 0; padding: 2px; background: none; color: var(--metin-3); cursor: pointer; border-radius: var(--yaricap-k); }
.toast-kapat:hover { color: var(--metin); background: var(--gri-acik); }
.toast-sure { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ton); opacity: .85; transform-origin: left; animation: toast-sure var(--sure, 5s) linear forwards; }
.toast.cikiyor { opacity: 0; transform: translateX(24px); transition: opacity .2s, transform .2s; }
@keyframes toast-gir { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-sure { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Modal — <dialog class="modal ton-…">: beyaz; başlıkta renkli simge çipi (üstte renk şeridi yok) */
.modal {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: 8px; background: var(--yuzey); color: var(--metin);
  box-shadow: var(--golge-yuzen);
}
.modal-genis { width: min(760px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(15, 23, 42, .45); }
.modal[open] { animation: modal-gir .18s ease-out; }
@keyframes modal-gir { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-ust {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px;
  background: transparent; color: var(--metin); border-bottom: 1px solid var(--cizgi);
}
.modal-ust h3 { flex: 1; font-size: 16.5px; font-weight: 700; }
.modal-ust > .ikon { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 8px; background: var(--ton); color: var(--ton-yazi); }
.modal-kapat { border: 0; padding: 4px; background: none; color: var(--metin-3); cursor: pointer; display: grid; border-radius: var(--yaricap-k); }
.modal-kapat:hover { color: var(--metin); background: var(--gri-acik); }
.modal-govde { padding: 18px 20px; color: var(--metin-2); font-size: 14.5px; }
.modal-alt { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; background: var(--yuzey-2); border-top: 1px solid var(--cizgi); border-radius: 0 0 8px 8px; }

/* --------------------------------------------------------------------------
   Rozetler, durum rozetleri, avatar
   Durum → renk: bekliyor amber · işlemde mavi · tamamlandı yeşil · iptal kırmızı ·
   ertelendi mor · randevu pembe · ulaşılamadı turuncu · pasif gri
   -------------------------------------------------------------------------- */
.rozet-yesil, .rozet-tamam        { --ton: var(--yesil);   --ton-acik: var(--yesil-acik);   --ton-metin: var(--yesil-metin);   --ton-yazi: #fff; }
.rozet-kirmizi, .rozet-iptal      { --ton: var(--kirmizi); --ton-acik: var(--kirmizi-acik); --ton-metin: var(--kirmizi-metin); --ton-yazi: #fff; }
.rozet-sari, .rozet-bekliyor      { --ton: var(--amber);   --ton-acik: var(--amber-acik);   --ton-metin: var(--amber-metin);   --ton-yazi: #1f1300; }
.rozet-mavi, .rozet-islemde       { --ton: var(--mavi);    --ton-acik: var(--mavi-acik);    --ton-metin: var(--mavi-metin);    --ton-yazi: #fff; }
.rozet-gri, .rozet-pasif          { --ton: var(--gri);     --ton-acik: var(--gri-acik);     --ton-metin: var(--gri-metin);     --ton-yazi: #fff; }
.rozet-ertelendi                  { --ton: var(--mor);     --ton-acik: var(--mor-acik);     --ton-metin: var(--mor-metin);     --ton-yazi: #fff; }
.rozet-randevu                    { --ton: var(--pembe);   --ton-acik: var(--pembe-acik);   --ton-metin: var(--pembe-metin);   --ton-yazi: #fff; }
.rozet-ulasilamadi                { --ton: var(--turuncu); --ton-acik: var(--turuncu-acik); --ton-metin: var(--turuncu-metin); --ton-yazi: #fff; }

.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 8px;
  background: var(--ton-acik); color: var(--ton-metin);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 20%, transparent);
  font-size: 12px; font-weight: 650; line-height: 1.6; white-space: nowrap;
}
.rozet .ikon { width: 14px; height: 14px; }
.rozet-dolu, .etiket-rozet { background: var(--ton); color: var(--ton-yazi); box-shadow: none; }
.rozet-nokta::before { content: ""; width: 7px; height: 7px; border-radius: 8px; background: var(--ton); }
.rozet-dolu.rozet-nokta::before { background: currentColor; }

.avatar {
  position: relative; overflow: hidden;
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 8px;
  background: var(--marka); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.avatar-kucuk { width: 34px; height: 34px; font-size: 13px; }
.avatar-buyuk { width: 72px; height: 72px; font-size: 24px; }
.avatar-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* --------------------------------------------------------------------------
   Giriş ve kilit ekranı
   -------------------------------------------------------------------------- */
.giris-sayfasi { background: var(--yuzey); }
.giris-duzen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); min-height: 100vh; }

.giris-marka {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px; color: #fff; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(9, 70, 120, .9) 0%, rgba(11, 114, 173, .76) 55%, rgba(21, 128, 61, .72) 100%),
    url("../img/giris-arka.jpg") center / cover no-repeat;
}
.giris-marka-orta h1 { font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.giris-saat { font-size: 52px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.giris-tarih { color: rgba(255, 255, 255, .85); font-size: 15px; }

.giris-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 24px; }
.giris-kutu { width: 100%; max-width: 400px; }
.giris-logo { display: block; width: 190px; height: auto; margin: 0 auto 32px; }
.giris-baslik { font-size: 24px; font-weight: 700; }
.giris-baslik + .form { margin-top: 22px; }
.giris-alt-baslik { display: flex; align-items: center; gap: 6px; margin: 6px 0 22px; color: var(--metin-2); }
.giris-altbilgi { margin-top: 32px; font-size: 12px; color: var(--metin-3); }

/* Cihazdaki kullanıcı kartları */
.kart-listesi { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.kullanici-karti { position: relative; }
.kullanici-karti > form:first-child { margin: 0; }
.kullanici-karti-dugme {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 52px 12px 14px; text-align: left;
  border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--marka)); border-radius: var(--yaricap); background: var(--yuzey);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.kullanici-karti-dugme:hover { border-color: var(--marka); background: var(--marka-acik); }
.kullanici-karti-dugme:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
.kullanici-karti-metin { display: grid; flex: 1; min-width: 0; }
.kullanici-karti-metin strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kullanici-karti-metin small { color: var(--metin-3); font-size: 12.5px; }
.kullanici-karti-ok { color: var(--marka); }
.kullanici-karti-kaldir { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); margin: 0; opacity: 0; transition: opacity .15s; }
.kullanici-karti:hover .kullanici-karti-kaldir, .kullanici-karti-kaldir:focus-within { opacity: 1; }
.kullanici-karti-kaldir .dugme-ikon { width: 30px; height: 30px; border-color: transparent; background: transparent; }
.kullanici-karti-kaldir .dugme-ikon:hover { background: var(--kirmizi-acik); color: var(--kirmizi); }
.kullanici-karti-kaldir .dugme-ikon .ikon { width: 15px; height: 15px; }
.cihaz-kullanicilari + section, [data-giris-formu] > .dugme { margin-top: 12px; }

/* Yönetim paneli girişi: kullanıcı kodu → SMS kodu → hatırlanan cihaz (mobil paneldeki akış) */
.giris-marka-etiket {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; background: rgba(255, 255, 255, .14);
  font-size: 13px; font-weight: 650; letter-spacing: .01em;
}
.giris-marka-etiket .ikon { width: 16px; height: 16px; }
.giris-adim-rozet {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 10px;
  border-radius: 8px; background: var(--mavi-acik); color: var(--mavi-metin);
  font-size: 12.5px; font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mavi) 18%, transparent);
}
.giris-adim-rozet .ikon { width: 14px; height: 14px; color: var(--mavi); }
.giris-alt-baslik-blok { display: block; }
.giris-numara { color: var(--metin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.giris-formu { display: grid; gap: 16px; }

.kod-kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kod-kutular-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kod-kutu {
  width: 100%; height: 62px; padding: 0; text-align: center;
  border: 1.5px solid var(--cizgi); border-radius: 8px; background: var(--yuzey-2); color: var(--metin);
  font: inherit; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; caret-color: var(--mavi);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.kod-kutular-6 .kod-kutu { height: 56px; font-size: 24px; }
.kod-kutu.dolu { background: var(--yuzey); border-color: color-mix(in srgb, var(--mavi) 45%, var(--cizgi)); }
.kod-kutu:focus, .kod-kutu.etkin { outline: none; background: var(--yuzey); border-color: var(--mavi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 20%, transparent); }
.kod-kutular.hata { animation: kod-sars .38s ease; }
.kod-kutular.hata .kod-kutu { border-color: var(--kirmizi); }
@keyframes kod-sars { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.giris-uyari {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px;
  background: var(--kirmizi-acik); color: var(--kirmizi-metin); font-size: 13.5px; font-weight: 550; line-height: 1.45;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kirmizi) 20%, transparent);
}
.giris-uyari .ikon { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.giris-uyari-basari { background: var(--yesil-acik); color: var(--yesil-metin); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yesil) 22%, transparent); }
.giris-deneme {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 12px; border-radius: 8px;
  background: var(--amber-acik); color: var(--amber-metin); font-size: 13px; font-weight: 550;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 28%, transparent);
}
.giris-deneme .ikon { flex: none; width: 16px; height: 16px; }
.giris-deneme strong { font-size: 15px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }

.hatirla-kutu {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hatirla-kutu:hover { border-color: color-mix(in srgb, var(--yesil) 40%, var(--cizgi)); }
.hatirla-kutu:has(input:checked) { border-color: color-mix(in srgb, var(--yesil) 45%, var(--cizgi)); background: color-mix(in srgb, var(--yesil-acik) 55%, var(--yuzey)); }
.hatirla-kutu input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hatirla-isaret {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid #cbd5e1; border-radius: 6px; background: var(--yuzey); color: transparent; transition: background .15s, border-color .15s;
}
.hatirla-isaret .ikon { width: 13px; height: 13px; }
.hatirla-kutu input:checked + .hatirla-isaret { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.hatirla-kutu input:focus-visible + .hatirla-isaret { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yesil) 25%, transparent); }
.hatirla-metin { display: grid; gap: 2px; min-width: 0; }
.hatirla-metin strong { font-size: 14px; color: var(--metin); }
.hatirla-metin small { font-size: 12.5px; line-height: 1.45; color: var(--metin-3); }

.giris-alt-eylem { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.giris-alt-eylem-orta { justify-content: center; }
.baglanti-dugme {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; border-radius: 6px; background: none;
  color: var(--mavi); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; text-decoration: none;
}
.baglanti-dugme:hover:not([disabled]) { color: var(--mavi-koyu); }
.baglanti-dugme:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
.baglanti-dugme[disabled] { color: var(--metin-3); cursor: default; }
.baglanti-dugme .ikon { width: 15px; height: 15px; }
.baglanti-dugme-soluk { color: var(--metin-2); }
.giris-ipucu { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--metin-3); text-align: center; }
.giris-ipucu .ikon { flex: none; width: 14px; height: 14px; }
.dugme.basarili { --ton: var(--yesil); --ton-koyu: var(--yesil-koyu); opacity: 1; cursor: default; }

.taninan-kart {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey);
  box-shadow: inset 3px 0 0 var(--yesil), var(--golge-kart);
}
.taninan-kart .avatar { width: 52px; height: 52px; font-size: 18px; }
.taninan-metin { display: grid; gap: 2px; flex: 1; min-width: 0; }
.taninan-metin strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taninan-metin small { font-size: 13px; color: var(--metin-3); }
.taninan-onay { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--yesil); color: #fff; }
.taninan-onay .ikon { width: 16px; height: 16px; }
.cihaz-rozet {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 18px; padding: 5px 10px;
  border-radius: 8px; background: var(--yuzey-2); color: var(--metin-2); font-size: 12.5px; font-weight: 550;
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
.cihaz-rozet .ikon { width: 14px; height: 14px; }
@media (max-width: 420px) {
  .kod-kutular { gap: 8px; }
  .kod-kutular-6 { gap: 6px; }
  .kod-kutu { height: 54px; font-size: 24px; }
  .kod-kutular-6 .kod-kutu { height: 48px; font-size: 20px; }
}

/* Kilit ekranı */
.kilit-kimlik { display: grid; justify-items: center; text-align: center; margin-bottom: 18px; }
.kilit-kimlik .avatar { margin-bottom: 12px; }
.kilit-kimlik .giris-alt-baslik { margin: 4px 0 0; }
.kilit-durum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 20px;
  background: var(--amber-acik); box-shadow: inset 3px 0 0 var(--serit-renk, var(--amber)); border-radius: var(--yaricap);
}
.kilit-sure { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-metin); font-variant-numeric: tabular-nums; font-weight: 600; }
.kilit-alt { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.kilit-alt form { margin: 0; }

/* --------------------------------------------------------------------------
   Uygulama yerleşimi (sol menülü)
   -------------------------------------------------------------------------- */
/* Üst bar tam genişlik (logo solda, kenar menünün üstünde), kenar menü ve içerik altında */
.uyg { display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "ust ust" "kenar ana"; min-height: 100vh; }

.kenar {
  grid-area: kenar; position: sticky; top: var(--ust-y); height: calc(100vh - var(--ust-y)); padding-top: 14px;
  display: flex; flex-direction: column;
  background: var(--kenar); color: var(--kenar-metin); border-right: 1px solid var(--cizgi);
}
.kenar-menu { flex: 1; overflow-y: auto; padding: 6px 12px 12px; scrollbar-width: thin; scrollbar-color: #d5dbe3 transparent; }
/* Modül renkleri (kullanıcı, 17.10.2026): her modülün simge çipi kendi tonunda (MenuService::SIMGE_TON); etkin modül
   tonun dolgusunda beyaz yazıyla (amber'de koyu), etkin alt öğe tonun açık zemininde. Ton değişkenleri .ton-* sınıfından. */
.kenar-baglanti {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 5px 10px 5px 5px; margin-bottom: 3px; border-radius: 8px;
  color: var(--kenar-metin); font-weight: 600; text-decoration: none !important;
  transition: background .15s, color .15s, box-shadow .15s;
}
.menu-simge {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: var(--ton-acik); color: var(--ton);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 16%, transparent);
  transition: background .15s, color .15s, box-shadow .15s;
}
.kenar .ton-amber { --ton: var(--amber-dugme); --ton-koyu: var(--amber-dugme-koyu); --ton-yazi: #fff; } /* açık zeminde sarı simge okunmuyordu; etkin hâli de düğmeler gibi beyaz yazılı */
.menu-simge .ikon { width: 18px; height: 18px; }
.kenar-baglanti:hover { background: var(--kenar-2); color: var(--ton-metin); }
.kenar-baglanti:hover .menu-simge { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 34%, transparent); }
.kenar-baglanti.aktif, .kenar-grup[data-aktif-grup] > summary {
  background: var(--ton); color: var(--ton-yazi); font-weight: 650;
  box-shadow: none;
}
.kenar-baglanti.aktif .menu-simge, .kenar-grup[data-aktif-grup] > summary .menu-simge {
  background: rgba(255, 255, 255, .18); color: var(--ton-yazi); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.kenar-bolum { margin: 18px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kenar-soluk); }
.kenar-alt-bilgi { padding: 14px 24px; border-top: 1px solid var(--cizgi); }
.kenar-surum { font-size: 11.5px; color: var(--kenar-soluk); }

/* Menüde ara */
.kenar-ara { position: relative; margin: 0 12px 8px; }
.kenar-ara .ikon { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--kenar-soluk); pointer-events: none; }
.kenar-ara input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  background: var(--yuzey-2); color: var(--metin); outline: none; font-size: 13px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.kenar-ara input::placeholder { color: var(--kenar-soluk); }
.kenar-ara input:focus { border-color: var(--marka); background: #fff; box-shadow: var(--halka); }

/* Gruplar */
.kenar-baslik { margin: 18px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--kenar-soluk); }
.kenar-grup { margin-bottom: 2px; }
.kenar-grup > summary { list-style: none; cursor: pointer; user-select: none; }
.kenar-grup > summary::-webkit-details-marker { display: none; }
.kenar-ok { margin-left: auto; width: 15px; height: 15px; color: var(--kenar-soluk); transition: transform .15s; }
.kenar-grup[open] > summary .kenar-ok { transform: rotate(180deg); }
.kenar-grup[data-aktif-grup] > summary .kenar-ok { color: var(--ton-yazi); }
/* Alt öğeler: noktası modül simgesinin altında, yazısı modül adı hizasında */
.kenar-alt { padding: 3px 0 8px; margin-left: 30px; }
.kenar-alt-baglanti {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 1px; border-radius: 8px; font-size: 13px; font-weight: 550;
  color: var(--metin-2); text-decoration: none !important;
  transition: background .15s, color .15s;
}
.menu-nokta { flex: none; width: 6px; height: 6px; border-radius: 8px; background: var(--cizgi-koyu); transition: background .15s, transform .15s; }
.kenar-alt-baglanti:hover { background: var(--kenar-2); color: var(--ton-metin); }
.kenar-alt-baglanti:hover .menu-nokta { background: var(--ton); }
.kenar-alt-baglanti.aktif { background: var(--ton-acik); color: var(--ton-metin); font-weight: 650; }
.kenar-alt-baglanti.aktif .menu-nokta { background: var(--ton); transform: scale(1.35); }
.kenar-alt-baglanti.soluk-oge { opacity: .5; }
/* Sınıf adları reklam engelleyici filtrelerine takılmasın: menu-ad, is-ad ve .ad gizleniyordu (21.10.2026) */
.menu-yazi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rozet {
  flex: none; min-width: 22px; padding: 1px 7px; border-radius: 8px;
  background: var(--gri-acik); color: var(--metin-2); font-size: 11.5px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.kenar-baglanti.aktif .menu-rozet, .kenar-grup[data-aktif-grup] > summary .menu-rozet { background: rgba(255, 255, 255, .22); color: var(--ton-yazi); }
.kenar-alt-baglanti.aktif .menu-rozet { background: var(--ton); color: var(--ton-yazi); }
.durum-nokta { flex: none; width: 8px; height: 8px; border-radius: 8px; background: var(--renk, var(--kenar-soluk)); }
.kenar-bos { margin: 12px; font-size: 12.5px; color: var(--metin-3); }
.kenar-menu [hidden] { display: none !important; }

/* Hazırlanıyor sayfası */
.hazirlaniyor { display: grid; justify-items: center; gap: 12px; padding: 40px 28px; text-align: center; }
.hazirlaniyor h2 { font-size: 22px; }
.hazirlaniyor > p { max-width: 560px; color: var(--metin-2); }
.hazirlaniyor-ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--yaricap); background: var(--ton); color: var(--ton-yazi); }
.hazirlaniyor-ikon .ikon { width: 30px; height: 30px; }
.hazirlaniyor-ayrinti { width: 100%; max-width: 480px; text-align: left; margin: 6px 0; }
.hazirlaniyor-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.hazirlaniyor .uyari { max-width: 560px; margin: 6px 0 0; text-align: left; }
.kenar-perde { display: none; }

.ana { grid-area: ana; display: flex; flex-direction: column; min-width: 0; }
.ust {
  grid-area: ust; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: var(--ust-y); padding: 0 20px 0 0;
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
.ust-menu-dugme { display: none; }
/* Logo hücresi kenar menüyle aynı genişlikte; altındaki koyu menüyle çizgiyle ayrılır */
.ust-logo { display: flex; align-items: center; flex: none; width: 272px; height: 100%; padding: 0 24px; border-right: 1px solid var(--cizgi); }
.ust-logo img { width: auto; height: 38px; }
.ust-baslik { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-sag { display: flex; align-items: center; gap: 12px; }
.ust-saat { display: inline-flex; align-items: center; gap: 6px; color: var(--metin-2); font-variant-numeric: tabular-nums; font-weight: 600; }

.kullanici-dugme {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: var(--yaricap);
  background: transparent; cursor: pointer; text-align: left;
}
.kullanici-dugme:hover, .acilir.acik .kullanici-dugme { background: var(--yuzey-2); border-color: var(--cizgi); }
.kullanici-dugme-metin { display: grid; line-height: 1.25; }
.kullanici-dugme-metin small { color: var(--metin-3); font-size: 12px; }

/* Üst bar simge düğmeleri ve sayaçlar */
.ust-ikon { position: relative; border-color: transparent; background: transparent; }
.ust-ikon:hover, .acilir.acik > .ust-ikon { background: var(--yuzey-2); border-color: var(--cizgi); }
.ust-ikon .ikon { width: 20px; height: 20px; }
.sayac {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 8px; border: 2px solid #fff;
  background: var(--kirmizi); color: #fff; font-size: 11px; font-weight: 700; line-height: 14px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Üst bar müşteri araması */
.ust-ara { position: relative; flex: 0 1 380px; min-width: 200px; }
.ust-ara-ikon { position: absolute; left: 12px; top: 11px; color: var(--metin-3); pointer-events: none; }
.ust-ara input {
  width: 100%; height: 40px; padding: 0 14px 0 40px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ust-ara input:focus { border-color: var(--marka); background: #fff; box-shadow: var(--halka); }
.ara-sonuc {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45;
  max-height: 420px; overflow-y: auto; padding: 6px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge-yuzen);
}
.ara-oge {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
  padding: 9px 10px; border-radius: var(--yaricap-k); color: var(--metin); text-decoration: none !important;
}
.ara-oge .avatar { grid-row: span 2; width: 34px; height: 34px; font-size: 12.5px; }
.ara-oge strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ara-oge small { color: var(--metin-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ara-oge:hover, .ara-oge.secili { background: var(--marka-acik); }
.ara-oge mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
.panel-bos { padding: 14px 12px; color: var(--metin-3); font-size: 13px; text-align: center; }
.panel-bos .dugme { margin-top: 10px; }

/* Hatırlatma zili paneli */
.zil-panel { width: 360px; max-height: 480px; overflow-y: auto; }
.zil-bolum { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.zil-oge { display: grid; gap: 2px; padding: 9px 10px; box-shadow: inset 3px 0 0 var(--serit-renk, var(--pembe)); border-radius: var(--yaricap-k); margin-bottom: 4px; color: var(--metin); text-decoration: none !important; }
.zil-oge:hover { background: var(--pembe-acik); }
.zil-oge strong { font-size: 13.5px; }
.zil-oge small { color: var(--metin-2); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zil-oge .zil-tarih { font-size: 11.5px; color: var(--metin-3); }
.zil-oge.gecikmis { --serit-renk: var(--kirmizi); }
.zil-oge.gecikmis:hover { background: var(--kirmizi-acik); }
.zil-oge.gecikmis .zil-tarih { color: var(--kirmizi); font-weight: 600; }
.zil-alt { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--cizgi); text-align: center; font-weight: 600; }

.icerik { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }   /* tek kolon içerikten geniş olmasın: geniş tablo kendi kabında kayar */
.icerik > .uyari { margin-bottom: 0; }

/* Açılır menü */
.acilir { position: relative; }
.acilir-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 230px; padding: 6px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  box-shadow: var(--golge-yuzen);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.acilir-sag { left: auto; right: 0; }
.acilir.acik .acilir-menu { opacity: 1; visibility: visible; transform: none; }
.acilir-menu form { margin: 0; }
.acilir-baslik { padding: 8px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.acilir-baslik-alt { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--metin-2); }
.acilir-oge {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--yaricap-k); background: none;
  text-align: left; cursor: pointer; color: var(--metin);
}
.acilir-oge:hover, .acilir-oge:focus-visible { background: var(--yuzey-2); outline: none; }
a.acilir-oge { text-decoration: none !important; }
.acilir-tehlike { color: var(--kirmizi-metin); }
.acilir-tehlike:hover { background: var(--kirmizi-acik); }

/* --------------------------------------------------------------------------
   Kartlar ve widget'lar
   .kart: beyaz, 1px çizgi, çok hafif gölge · .kart-tonlu: tonu simge çipine verir (renk şeridi yok)
   .kutucuk: düz renkli gösterge kutucuğu (KPI) · .simge-kutu: renkli simge karesi
   -------------------------------------------------------------------------- */
.izgara { display: grid; gap: 16px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-b); padding: 20px; box-shadow: var(--golge-kart); }
.kart-tonlu { box-shadow: var(--golge-kart); } /* ton yalnız simge çipini ve vurguları renklendirir; üstte renk şeridi yok (kullanıcı, 17.10.2026) */
.kart-baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--metin-2); }
.kart-baslik h3 { font-size: 15px; color: var(--metin); }
.kart-vurgu { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kart-ust-sol { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kart-ust h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.kart-ust p { margin-top: 1px; font-size: 13px; color: var(--metin-3); }

/* Simge kutusu: tonun kendisi, hafif ışık geçişi */
.simge-kutu {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--ton); color: var(--ton-yazi);
}
.simge-kutu .ikon { width: 20px; height: 20px; }
.simge-kutu-acik { background: var(--ton-acik); color: var(--ton); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 16%, transparent); }

/* Gösterge kutucuğu (KPI): beyaz kart, renkli simge çipi, köşede tonun soft çizimi (aşağıda "Süslemeler") */
.kutucuk-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kutucuk {
  position: relative; display: flex; align-items: center; gap: 16px; overflow: hidden;
  min-height: 108px; padding: 18px 20px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-b);
  background: var(--yuzey);
  color: var(--metin); box-shadow: var(--golge-kart);
  text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.kutucuk { color: var(--metin); }
a.kutucuk:hover { color: var(--metin); border-color: color-mix(in srgb, var(--ton) 35%, var(--cizgi)); box-shadow: var(--golge-ust); transform: translateY(-1px); }
.kutucuk-simge {
  position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 8px;
  background: var(--ton); color: var(--ton-yazi);
}
.kutucuk-simge .ikon { width: 24px; height: 24px; }
.kutucuk-govde { position: relative; display: grid; gap: 3px; min-width: 0; }
.kutucuk-etiket { font-size: 13px; font-weight: 600; color: var(--metin-2); }
.kutucuk-deger { font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -.025em; color: var(--metin); font-variant-numeric: tabular-nums; }
.kutucuk-not { font-size: 12.5px; font-weight: 500; color: var(--metin-3); }
/* Eski "büyük silik simge" görünümü kalktı */
.kutucuk-filigran { display: none; }
/* Açık kutucuk (ikincil göstergeler): düz beyaz, simge çipi yumuşak tonlu */
.kutucuk-acik { background: var(--yuzey); }
.kutucuk-acik .kutucuk-simge { background: var(--ton-acik); color: var(--ton); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 16%, transparent); }

/* Karşılama bandı (diğer roller ana sayfası): beyaz, sağda tonun soft çizimi */
.karsilama {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-b);
  background: var(--yuzey);
  color: var(--metin); box-shadow: var(--golge-kart);
}
.karsilama .avatar { background: var(--ton); color: var(--ton-yazi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ton) 14%, #fff); }
.karsilama h2 { font-size: 22px; }
.karsilama p { margin-top: 4px; color: var(--metin-2); }

.bilgi-listesi { margin: 0; display: grid; gap: 10px; }
.bilgi-listesi > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--cizgi); }
.bilgi-listesi > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bilgi-listesi dt { color: var(--metin-3); }
.bilgi-listesi dd { margin: 0; font-weight: 600; text-align: right; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.asama-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.asama { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.asama-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--yaricap); background: var(--gri-acik); font-weight: 700; color: var(--metin-2); flex: none; }
.asama-bitti { box-shadow: inset 3px 0 0 var(--serit-renk, var(--yesil)); }
.asama-bitti .asama-no { background: var(--yesil); color: #fff; }
.asama-sirada { box-shadow: inset 3px 0 0 var(--serit-renk, var(--mavi)); background: var(--mavi-acik); }
.asama-sirada .asama-no { background: var(--mavi); color: #fff; }
.asama-metin { display: grid; flex: 1; min-width: 0; }
.asama-metin small { color: var(--metin-3); }

.tablo { width: 100%; border-collapse: collapse; background: var(--yuzey); }
.tablo td, .tablo th { padding: 11px 12px; border-bottom: 1px solid #eef0f4; text-align: left; }
.tablo th { font-size: 12px; font-weight: 650; color: var(--metin-3); background: var(--yuzey-2); letter-spacing: .01em; border-bottom-color: var(--cizgi); }
.tablo tfoot th, .tablo tfoot td { color: var(--metin); background: var(--yuzey-2); border-top: 1px solid var(--cizgi); }

.bos-kutu { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; text-align: center; color: var(--metin-3); background: var(--yuzey-2); border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap-b); }
.bos-kutu strong { color: var(--metin); font-size: 14px; }
.bos-kutu-simge { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 8px; background: var(--ton-acik); color: var(--ton); }

/* --------------------------------------------------------------------------
   Çalışma alanı (sol menüsüz): müşteri temsilcisi, memnuniyet
   -------------------------------------------------------------------------- */
.calisma-alani { background: var(--zemin); --serit: 76px; --serit-zemin: #ffffff; }

/* Sol ikon şeridi (koyu); etkin sayfa kendi modül renginde */
.serit {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: var(--serit);
  display: flex; flex-direction: column; align-items: center; padding: 14px 0;
  background: var(--serit-zemin); border-right: 1px solid var(--cizgi);
}
.serit-monogram {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 8px; background: linear-gradient(145deg, #3b82f6, var(--marka) 70%); color: #fff;
  box-shadow: none;
  font-size: 19px; font-weight: 800; text-decoration: none !important; letter-spacing: -.02em;
}
/* W hariç bütün ikonlar şeridin dikey ortasında */
/* Üst ve alttaki eşit boşluk: kısa ekranda W ile çakışmaz, ikonlar yine tam ortada kalır */
.serit-ogeler { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding-block: 58px; }
.serit-ogeler form { margin: 0; }
.serit-ayrac { width: 24px; height: 1px; margin: 4px 0; background: var(--cizgi); }
.serit-oge {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer;
  text-decoration: none !important; transition: background .15s, color .15s;
}
.serit-oge .ikon { width: 21px; height: 21px; }
.serit-oge:hover { background: var(--kenar-2); color: var(--metin); }
.serit-oge:focus-visible { outline: none; box-shadow: var(--halka); }
.serit-oge.aktif { background: var(--ton); color: var(--ton-yazi); }
.serit-sayac {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 8px; border: 2px solid var(--serit-zemin); background: var(--kirmizi); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 13px; text-align: center;
}

/* Şerit ipuçları (yalnız ikon olduğu için) */
.serit [data-ipucu]:hover::after, .serit [data-ipucu]:focus-visible::after {
  content: attr(data-ipucu); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: var(--yaricap); background: #111827; color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 50;
}

/* Gövde + açık üst bar */
.calisma-govde { margin-left: var(--serit); min-height: 100vh; display: flex; flex-direction: column; }
.calisma-ust {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  height: 68px; padding: 0 20px; background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.calisma-ara { position: relative; flex: 0 1 520px; min-width: 0; }
.calisma-ara input {
  width: 100%; height: 42px; padding: 0 14px 0 42px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.calisma-ara input:focus { border-color: var(--marka); background: #fff; box-shadow: var(--halka); }
.calisma-ara .ust-ara-ikon { position: absolute; left: 13px; top: 12px; color: var(--metin-3); pointer-events: none; }
.calisma-sag { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.calisma-icerik { display: grid; gap: 16px; align-content: start; width: 100%; padding: 20px; }
.calisma-icerik > .uyari { margin-bottom: 0; }

/* Temsilci / memnuniyet başlığı */
.temsilci-giris {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: var(--yaricap-b);
  background: var(--yuzey);
  border: 1px solid var(--cizgi); box-shadow: var(--golge-kart);
}
.temsilci-kimlik { display: flex; align-items: center; gap: 16px; }
.temsilci-kimlik h2 { font-size: 21px; }
.temsilci-kimlik p { margin-top: 3px; color: var(--metin-2); }

.kpi-etiket { display: inline-flex; align-items: center; gap: 8px; color: var(--metin-2); font-weight: 600; font-size: 13px; }
.kpi-deger { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--metin); }
.kpi-deger small { font-size: 15px; font-weight: 600; color: var(--metin-3); letter-spacing: 0; }
.kpi-not { font-size: 12.5px; font-weight: 600; }
.kpi-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--metin-3); }
.fark { font-weight: 700; }
.fark-iyi { color: var(--yesil-metin); }
.fark-kotu { color: var(--kirmizi-metin); }
.fark-notr { color: var(--metin-2); }

/* Ulaşılan / ulaşılamayan dağılımı — grafik paleti (dataviz doğrulaması: mavi/turuncu, renk körlüğüne uygun) */
.lejant-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.lejant-ulasilan { background: #0e7fc0; }
.lejant-ulasilamayan { background: #eb6834; }
.dagilim-etiketler { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 13px; color: var(--metin-2); }
.dagilim-etiketler > span { display: inline-flex; align-items: center; gap: 7px; }

/* Ölçer: dolgu tonun kendisi, iz tonun açığı */
.olcer { height: 8px; border-radius: 2px; background: var(--ton-acik); overflow: hidden; margin: 4px 0 2px; }
.olcer-dolgu { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ton); transition: width .4s ease; }

/* Halka (ulaşma oranı): SVG öznitelikleri, satır içi stil yok */
.halka { width: 52px; height: 52px; flex: none; transform: rotate(-90deg); }
.halka-iz { fill: none; stroke: var(--ton-acik); stroke-width: 3.6; }
.halka-dolgu { fill: none; stroke: var(--ton); stroke-width: 3.6; stroke-linecap: butt; }

/* Kıvılcım çubukları (son 7 gün ciro) */
.kivilcim { display: flex; align-items: flex-end; gap: 4px; flex: none; width: 52px; height: 44px; }
.kivilcim-cubuk { flex: 1; height: 4px; min-height: 4px; border-radius: 1px; background: var(--ton); transition: height .4s ease; }
.kivilcim-cubuk.bos { background: var(--ton-acik); }

.tablo-ac { margin-top: 16px; }
.tablo-ac > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--marka); font-weight: 600; font-size: 13px; }
.tablo-ac[open] > summary { margin-bottom: 10px; }
.tablo-sayilar { border: 1px solid var(--cizgi); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Pano bileşenleri (temsilci panosu ve sonraki ana sayfalar)
   -------------------------------------------------------------------------- */
.sayfa-baslik {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-b);
  background: var(--yuzey);
  color: var(--metin); box-shadow: var(--golge-kart);
}
.sayfa-baslik h2 { font-size: 24px; font-weight: 750; letter-spacing: -.025em; margin-top: 8px; color: var(--metin); }
.sayfa-baslik p { margin-top: 4px; font-weight: 450; color: var(--metin-2); }
.sayfa-baslik .etiket-rozet { background: color-mix(in srgb, var(--ton) 12%, #fff); color: var(--ton-metin); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 22%, transparent); }
.sayfa-baslik .etiket-rozet .ikon { color: var(--ton); }

/* Süslemeler (kullanıcı, 17.10.2026: köşe gradyanı yerine soft renkli çizimler) — tonun renginde SVG maske; çizimin
   saydamlığı rengi yumuşatır. ::before içeriğin altında kalır (içerik position: relative), tıklamayı engellemez. */
.sayfa-baslik, .karsilama, .temsilci-giris, .kutucuk { position: relative; overflow: hidden; isolation: isolate; }
.sayfa-baslik > *, .karsilama > *, .temsilci-giris > * { position: relative; }
.sayfa-baslik::before, .karsilama::before, .temsilci-giris::before, .kutucuk::before {
  content: ""; position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none; background: var(--ton);
  -webkit-mask: var(--suslem) right top / auto 100% no-repeat; mask: var(--suslem) right top / auto 100% no-repeat;
}
.sayfa-baslik::before, .karsilama::before, .temsilci-giris::before { width: min(400px, 62%); height: 100%; --suslem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='180' viewBox='0 0 380 180' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='336' cy='22' r='122' fill='%23000' fill-opacity='.045' stroke='none'/%3E%3Ccircle cx='336' cy='22' r='62' stroke-opacity='.2'/%3E%3Ccircle cx='336' cy='22' r='90' stroke-opacity='.13'/%3E%3Ccircle cx='336' cy='22' r='120' stroke-opacity='.08'/%3E%3Cpath d='M128 178c48-32 98-40 148-25s80 6 104-24' stroke-opacity='.14'/%3E%3Cpath d='M164 182c42-23 88-29 134-16s62 2 82-15' stroke-opacity='.09'/%3E%3Cg fill='%23000' fill-opacity='.24' stroke='none'%3E%3Ccircle cx='176' cy='30' r='1.7'/%3E%3Ccircle cx='176' cy='46' r='1.7'/%3E%3Ccircle cx='176' cy='62' r='1.7'/%3E%3Ccircle cx='176' cy='78' r='1.7'/%3E%3Ccircle cx='176' cy='94' r='1.7'/%3E%3Ccircle cx='192' cy='30' r='1.7'/%3E%3Ccircle cx='192' cy='46' r='1.7'/%3E%3Ccircle cx='192' cy='62' r='1.7'/%3E%3Ccircle cx='192' cy='78' r='1.7'/%3E%3Ccircle cx='192' cy='94' r='1.7'/%3E%3Ccircle cx='208' cy='30' r='1.7'/%3E%3Ccircle cx='208' cy='46' r='1.7'/%3E%3Ccircle cx='208' cy='62' r='1.7'/%3E%3Ccircle cx='208' cy='78' r='1.7'/%3E%3Ccircle cx='208' cy='94' r='1.7'/%3E%3Ccircle cx='224' cy='30' r='1.7'/%3E%3Ccircle cx='224' cy='46' r='1.7'/%3E%3Ccircle cx='224' cy='62' r='1.7'/%3E%3Ccircle cx='224' cy='78' r='1.7'/%3E%3Ccircle cx='224' cy='94' r='1.7'/%3E%3Ccircle cx='240' cy='30' r='1.7'/%3E%3Ccircle cx='240' cy='46' r='1.7'/%3E%3Ccircle cx='240' cy='62' r='1.7'/%3E%3Ccircle cx='240' cy='78' r='1.7'/%3E%3Ccircle cx='240' cy='94' r='1.7'/%3E%3Ccircle cx='256' cy='30' r='1.7'/%3E%3Ccircle cx='256' cy='46' r='1.7'/%3E%3Ccircle cx='256' cy='62' r='1.7'/%3E%3Ccircle cx='256' cy='78' r='1.7'/%3E%3Ccircle cx='256' cy='94' r='1.7'/%3E%3C/g%3E%3Crect x='232' y='110' width='30' height='30' rx='8' transform='rotate(18 247 125)' stroke-opacity='.22'/%3E%3Cpath d='M306 124v14M299 131h14' stroke-opacity='.3' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='204' cy='140' r='6' stroke-opacity='.24'/%3E%3Ccircle cx='358' cy='150' r='3' fill='%23000' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='150' cy='46' r='2.5' fill='%23000' fill-opacity='.18' stroke='none'/%3E%3C/svg%3E"); }
.sayfa-baslik::before { height: min(100%, 168px); } /* süzgeç satırı varsa çizim yalnız başlık satırında */
.kutucuk::before { width: 132px; height: 132px; --suslem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='132' cy='0' r='46' fill='%23000' fill-opacity='.05' stroke='none'/%3E%3Ccircle cx='132' cy='0' r='46' stroke-opacity='.18'/%3E%3Ccircle cx='132' cy='0' r='68' stroke-opacity='.11'/%3E%3Ccircle cx='132' cy='0' r='90' stroke-opacity='.06'/%3E%3Cg fill='%23000' fill-opacity='.2' stroke='none'%3E%3Ccircle cx='98' cy='10' r='1.4'/%3E%3Ccircle cx='98' cy='20' r='1.4'/%3E%3Ccircle cx='98' cy='30' r='1.4'/%3E%3Ccircle cx='108' cy='10' r='1.4'/%3E%3Ccircle cx='108' cy='20' r='1.4'/%3E%3Ccircle cx='108' cy='30' r='1.4'/%3E%3Ccircle cx='118' cy='10' r='1.4'/%3E%3Ccircle cx='118' cy='20' r='1.4'/%3E%3Ccircle cx='118' cy='30' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }

.pano-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }

/* Durum dağılımı (yatay çubuk listesi) */
.durum-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.durum-listesi li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 12px; }
.durum-adi { font-size: 13px; font-weight: 600; color: var(--metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.durum-cubuk { height: 12px; border-radius: 2px; background: var(--yuzey-2); overflow: hidden; }
.durum-dolgu { display: block; width: 0; height: 100%; border-radius: 2px; transition: width .4s ease; }
.durum-dolgu.ulasildi { background: #0e7fc0; }
.durum-dolgu.ulasilamadi { background: #eb6834; }
.durum-sayi { min-width: 64px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.durum-sayi small { margin-left: 6px; font-weight: 600; color: var(--metin-3); }

/* Dönem özeti */
.donem-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--cizgi); }
.donem-hero > div { display: grid; gap: 2px; }
.hero-deger { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--yesil); }
.mini-istatistik { display: flex; gap: 22px; margin: 0; }
.mini-istatistik div { display: grid; gap: 2px; }
.mini-istatistik dt { font-size: 12px; font-weight: 600; color: var(--metin-3); }
.mini-istatistik dd { margin: 0; font-size: 22px; font-weight: 800; color: var(--ton); }
.donem-kolonlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.donem-kolon { display: grid; gap: 4px; padding: 14px; border-radius: var(--yaricap); background: var(--ton-acik); color: var(--metin); }
.donem-kolon.vurgulu { background: var(--ton); color: var(--ton-yazi); }
.donem-adi { font-size: 12px; font-weight: 700; color: var(--ton-metin); text-transform: uppercase; letter-spacing: .04em; }
.donem-kolon.vurgulu .donem-adi { color: inherit; }
.donem-ciro { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.donem-kolon ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.donem-kolon:not(.vurgulu) ul { color: var(--metin-2); }

/* Ekip cirosu */
.ekip-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ekip-listesi li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--yaricap); }
.ekip-listesi li.ben { background: var(--ton-acik); }
.ekip-sira { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--yaricap-k); background: var(--gri-acik); font-size: 12.5px; font-weight: 800; color: var(--metin-2); flex: none; }
.ekip-listesi li:first-child .ekip-sira { background: var(--amber); color: #1f1300; }
.ekip-listesi .avatar { background: var(--ton); }
.ekip-govde { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ekip-ust { display: flex; justify-content: space-between; gap: 10px; }
.ekip-ust strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ekip-ust span { font-weight: 750; font-variant-numeric: tabular-nums; }
.ekip-govde small { color: var(--metin-3); font-size: 12px; }
.ekip-cubuk { height: 6px; border-radius: 2px; background: var(--yuzey-2); overflow: hidden; }
.ekip-cubuk span { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ton); opacity: .45; transition: width .4s ease; }
.ekip-listesi li.ben .ekip-cubuk span { opacity: 1; }
.ekip-ayrac { justify-content: center; padding: 0 !important; color: var(--metin-3); }

/* Hedef listesi */
.hedef-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hedef-listesi li { display: grid; gap: 4px; }
.hedef-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--metin-2); }
.hedef-ust > span { display: inline-flex; align-items: center; gap: 6px; }
.hedef-ust strong { color: var(--ton-metin); font-size: 15px; font-variant-numeric: tabular-nums; }
.hedef-listesi small { color: var(--metin-3); font-size: 12px; }
.hedef-sade { padding-top: 12px; border-top: 1px solid var(--cizgi); }

@media (max-width: 1200px) {
  .kutucuk-izgara, .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pano-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kutucuk-izgara, .izgara-4, .donem-kolonlar { grid-template-columns: 1fr; }
  .hero-deger { font-size: 36px; }
  .sayfa-baslik h2 { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Sade sayfalar (hata, sağlık)
   -------------------------------------------------------------------------- */
.sade-sayfa { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.sade-kutu { width: 100%; max-width: 560px; }
.sade-logo { display: block; width: 160px; height: auto; margin: 0 auto 28px; }
.hata-kutu { text-align: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 36px 28px; }
.hata-kod { font-size: 64px; font-weight: 800; line-height: 1; color: var(--marka); letter-spacing: -.03em; }
.hata-kutu h1 { margin-top: 12px; font-size: 22px; }
.hata-kutu p { margin-top: 10px; color: var(--metin-2); }
.hata-ref { font-size: 13px; }
.hata-dugmeler { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.saglik { display: grid; gap: 16px; }
.saglik-ozet { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--yaricap); color: #fff; }
.saglik-ozet .ikon { width: 30px; height: 30px; }
.saglik-ozet h1 { font-size: 18px; }
.saglik-ozet.iyi { background: var(--yesil); }
.saglik-ozet.kotu { background: var(--kirmizi); }
.saglik .tablo { border: 1px solid var(--cizgi); }

/* --------------------------------------------------------------------------
   Mesajlaşma (/mesajlar) — modül rengi mor; kendi baloncuğum açık yeşil,
   okundu tiki mavi. Ekranı kaplar (sayfa değil sohbet kayar).
   -------------------------------------------------------------------------- */
.uygulama { --ust-y: 64px; }
.calisma-alani { --ust-y: 68px; }
.avatar[class*=" ton-"] { background: var(--ton); color: var(--ton-yazi); }
.avatar .ikon { width: 20px; height: 20px; }

.sohbet {
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  height: calc(100vh - var(--ust-y) - 40px); height: calc(100dvh - var(--ust-y) - 40px); min-height: 440px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden;
}

/* Sol: konuşmalar */
.sohbet-yan { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--cizgi); }
.sohbet-yan-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.sohbet-yan-ust h2 { font-size: 18px; }
.sohbet-ara { position: relative; margin: 0 16px 10px; }
.sohbet-ara .ikon { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--metin-3); pointer-events: none; }
.sohbet-ara input {
  width: 100%; height: 38px; padding: 0 12px 0 34px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); outline: none;
}
.sohbet-ara input:focus { border-color: var(--mor); background: #fff; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.sekmeler { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--cizgi); }
.sekme {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 9px 10px 10px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--metin-2); font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.sekme:hover { color: var(--metin); }
.sekme.aktif { color: var(--mor-metin); border-bottom-color: var(--mor); }
.sekme:focus-visible { outline: 2px solid var(--mor); outline-offset: -2px; }
.sekme-sayi { min-width: 18px; padding: 0 5px; border-radius: 8px; background: var(--mor); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.konusma-kaydir { flex: 1; min-height: 0; overflow-y: auto; }
.konusma-listesi { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.konusma-oge, .arama-oge {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px;
  border: 0; border-radius: var(--yaricap); background: none; color: var(--metin); text-align: left; cursor: pointer;
}
.konusma-oge:hover, .arama-oge:hover { background: var(--yuzey-2); }
.konusma-oge.aktif { background: var(--mor-acik); }
.konusma-oge:focus-visible, .arama-oge:focus-visible { outline: 2px solid var(--mor); outline-offset: -2px; }
.konusma-govde { flex: 1; min-width: 0; display: grid; gap: 2px; }
.konusma-satir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.konusma-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 650; }
.konusma-zaman { flex: none; font-size: 12px; color: var(--metin-3); }
.konusma-oge.okunmamis .konusma-zaman { color: var(--mor-metin); font-weight: 700; }
.konusma-son { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--metin-3); }
.konusma-son .ikon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.konusma-oge.okunmamis .konusma-son { color: var(--metin); font-weight: 600; }
.konusma-isaretler { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--metin-3); }
.konusma-isaretler .ikon { width: 15px; height: 15px; }
.okunmamis-rozet { min-width: 20px; padding: 0 6px; border-radius: 8px; background: var(--mor); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; }
.konusma-oge.sessiz .okunmamis-rozet { background: var(--gri); }
.liste-bilgi { list-style: none; padding: 18px 12px; text-align: center; color: var(--metin-3); font-size: 13px; }
.arama-sonuclari { padding: 0 6px 10px; border-top: 1px solid var(--cizgi); }
.arama-baslik { padding: 12px 10px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.arama-oge mark { background: #ffe58a; color: inherit; border-radius: 2px; }

/* Sağ: açık sohbet */
.sohbet-pano { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #eef1f5; }
.sohbet-bos { margin: auto; display: grid; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--metin-3); }
.sohbet-bos strong { color: var(--metin); font-size: 16px; }
.sohbet-bos .simge-kutu { width: 56px; height: 56px; margin-bottom: 6px; }
.sohbet-bos .simge-kutu .ikon { width: 28px; height: 28px; }
.sohbet-acik { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sohbet-ust { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 16px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.sohbet-geri { display: none; }
.sohbet-kapat { flex: none; }
.sohbet-baslik { flex: 1; min-width: 0; display: grid; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.sohbet-baslik strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet-baslik small { font-size: 12.5px; color: var(--metin-3); }
.sohbet-durum { display: inline-flex; gap: 6px; color: var(--metin-3); }
.sohbet-durum .ikon { width: 16px; height: 16px; }

.mesaj-alani {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 5% 12px;
  background-color: #eef1f5; background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px); background-size: 18px 18px;
}
.mesaj-yukleniyor { padding: 6px; text-align: center; font-size: 12.5px; color: var(--metin-3); }
.mesaj-akis { display: flex; flex-direction: column; gap: 6px; }
.gun-ayirac, .okunmamis-ayirac { display: flex; justify-content: center; margin: 10px 0 4px; }
.gun-ayirac span { padding: 4px 10px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); font-size: 12px; font-weight: 600; color: var(--metin-2); }
.okunmamis-ayirac span { width: 100%; padding: 5px; border-radius: var(--yaricap); background: var(--mor-acik); color: var(--mor-metin); font-size: 12px; font-weight: 700; text-align: center; }

.mesaj { position: relative; display: flex; align-items: center; gap: 6px; max-width: min(72%, 680px); align-self: flex-start; }
.mesaj.benim { align-self: flex-end; flex-direction: row-reverse; }
.mesaj.ardisik { margin-top: -3px; }
.balon {
  position: relative; min-width: 76px; padding: 6px 9px 5px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); color: var(--metin);
  overflow-wrap: anywhere;
}
.mesaj.benim .balon { background: #dcf3e2; border-color: #c3e6cd; }
.mesaj.vurgulu .balon { animation: mesaj-vurgu 1.8s ease-out; }
@keyframes mesaj-vurgu { 0%, 45% { outline: 3px solid var(--amber); outline-offset: 1px; } 100% { outline: 3px solid transparent; outline-offset: 1px; } }
.balon-kimden { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--ton-metin); }
.balon-metin { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.balon-metin a { color: var(--mavi); font-weight: 600; }
.silindi-metin { display: inline-flex; align-items: center; gap: 5px; font-style: italic; color: var(--metin-3); }
.silindi-metin .ikon { width: 14px; height: 14px; }
.balon-alt { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; font-size: 11px; line-height: 1; color: var(--metin-3); }
.tik { display: inline-grid; }
.tik .ikon { width: 16px; height: 16px; }
.tik-okundu { color: var(--mavi); }

.yanit-alinti {
  display: grid; gap: 1px; width: 100%; margin: 2px 0 6px; padding: 5px 8px;
  border: 0; box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap-k); background: rgba(15, 23, 42, .05);
  font: inherit; font-size: 12.5px; color: var(--metin-2); text-align: left;
}
button.yanit-alinti { cursor: pointer; }
button.yanit-alinti:hover { background: rgba(15, 23, 42, .09); }
.yanit-alinti strong { font-size: 12.5px; color: var(--ton-metin); }
.yanit-alinti span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yanit-alinti .ikon { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }

.balon-ekler { display: grid; gap: 4px; margin: 2px 0 4px; }
.ek-resim { display: block; padding: 0; border: 0; border-radius: var(--yaricap-k); background: none; line-height: 0; overflow: hidden; cursor: zoom-in; }
.ek-resim img { display: block; max-width: 100%; height: auto; background: var(--gri-acik); }
.ek-dosya-kap { display: flex; align-items: center; gap: 6px; min-width: 230px; padding: 6px; border-radius: var(--yaricap-k); background: rgba(15, 23, 42, .05); }
.ek-dosya { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--metin); text-decoration: none !important; }
.ek-dosya .simge-kutu { width: 38px; height: 38px; }
.ek-dosya-metin { min-width: 0; display: grid; }
.ek-dosya-metin strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-dosya-metin small { font-size: 11.5px; color: var(--metin-3); }
.ek-indir { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--yaricap-k); color: var(--metin-2); }
.ek-indir:hover { background: rgba(15, 23, 42, .08); color: var(--metin); }

.mesaj-islemler { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.mesaj:hover .mesaj-islemler, .mesaj:focus-within .mesaj-islemler { opacity: 1; }
.mesaj-islem { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); background: var(--yuzey); color: var(--metin-2); cursor: pointer; }
.mesaj-islem .ikon { width: 15px; height: 15px; }
.mesaj-islem:hover { color: var(--metin); background: var(--yuzey-2); }
.mesaj-islem[data-islem="sil"]:hover { color: var(--kirmizi); background: var(--kirmizi-acik); }

.asagi-dugme {
  position: absolute; right: 22px; bottom: 86px; z-index: 5;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); color: var(--metin-2);
  cursor: pointer; box-shadow: var(--golge-yuzen);
}
.asagi-sayi { position: absolute; top: -6px; right: -4px; min-width: 18px; padding: 0 5px; border-radius: 8px; background: var(--mor); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }

/* Yazma alanı */
.yazma { display: grid; gap: 8px; padding: 10px 14px 12px; background: var(--yuzey); border-top: 1px solid var(--cizgi); }
.yazma-yanit { display: flex; align-items: center; gap: 8px; }
.yazma-yanit .yanit-alinti { margin: 0; }
.yazma-ekler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ek-cip { display: flex; align-items: center; gap: 8px; max-width: 250px; padding: 5px 5px 5px 6px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); }
.ek-cip img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--yaricap-k); }
.ek-cip .simge-kutu { width: 40px; height: 40px; }
.ek-cip-metin { min-width: 0; display: grid; }
.ek-cip-metin strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-cip-metin small { font-size: 11.5px; color: var(--metin-3); }
.ek-cip .dugme-ikon { width: 28px; height: 28px; border-color: transparent; background: transparent; }
.yazma-satir { display: flex; align-items: flex-end; gap: 8px; }
.yazma-ek { position: relative; flex: none; width: 42px; height: 42px; cursor: pointer; }
.yazma-ek:focus-within { outline: 2px solid var(--mor); outline-offset: 2px; }
.gizli-girdi { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.yazma-metin {
  flex: 1; min-height: 42px; max-height: 160px; padding: 10px 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey);
  font-size: 14px; line-height: 1.4; resize: none; outline: none;
}
.yazma-metin:focus { border-color: var(--mor); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.yazma-gonder { flex: none; width: 42px; height: 42px; padding: 0; }
.birak-perde {
  position: absolute; inset: 62px 0 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--mor); background: rgba(124, 58, 237, .1); color: var(--mor-metin);
  font-size: 16px; font-weight: 700; pointer-events: none;
}

/* Sohbet pencereleri: kişi seçimi, grup bilgisi, resim */
.sekmeler-modal { margin: -6px 0 12px; padding: 0; }
.grup-ad-alani { margin-bottom: 12px; }
.sohbet-ara-modal { margin: 0 0 10px; }
.kisi-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.kisi-listesi-kisa { max-height: 230px; }
.kisi-oge { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--yaricap); background: none; color: var(--metin); text-align: left; cursor: pointer; }
.kisi-oge:hover { background: var(--yuzey-2); }
.kisi-oge.secili { background: var(--mor-acik); }
.kisi-oge:focus-visible { outline: 2px solid var(--mor); outline-offset: -2px; }
.kisi-metin { flex: 1; min-width: 0; display: grid; }
.kisi-metin strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kisi-metin small { font-size: 12px; color: var(--metin-3); }
.kisi-secim { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--cizgi-koyu); border-radius: var(--yaricap-k); color: transparent; }
.kisi-secim .ikon { width: 14px; height: 14px; }
.kisi-oge.secili .kisi-secim { border-color: var(--mor); background: var(--mor); color: #fff; }
.kisi-satir { display: flex; align-items: center; gap: 8px; }
.kisi-satir .kisi-oge { flex: 1; cursor: default; }
.kisi-satir .kisi-oge:hover { background: none; }
.secili-sayi { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--metin-2); }
.bilgi-alt-baslik { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3); }
.bilgi-not { padding: 10px 12px; box-shadow: inset 3px 0 0 var(--serit-renk, var(--indigo)); border-radius: var(--yaricap); background: var(--indigo-acik); color: var(--indigo-metin); font-size: 13px; }
.modal-govde > .alan + .sohbet-ara, .modal-govde > .alan { margin-bottom: 12px; }
a.modal-kapat { text-decoration: none !important; }
.modal-resim { width: min(1100px, calc(100vw - 32px)); background: #111827; }
.modal-resim .modal-ust h3 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resim-govde { display: grid; place-items: center; max-height: calc(100vh - 140px); overflow: auto; background: #111827; }
.resim-govde img { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }

@media (max-width: 1100px) {
  .sohbet { grid-template-columns: 300px minmax(0, 1fr); }
  .mesaj { max-width: 82%; }
}
@media (max-width: 760px) {
  .calisma-alani .sohbet { height: calc(100dvh - var(--ust-y) - 32px - 64px); }
  .sohbet { grid-template-columns: 1fr; height: calc(100dvh - var(--ust-y) - 32px); }
  .sohbet-pano { display: none; }
  .sohbet.konusma-acik .sohbet-yan { display: none; }
  .sohbet.konusma-acik .sohbet-pano { display: flex; }
  .sohbet-geri { display: inline-grid; }
  .sohbet-kapat { display: none; }
  .mesaj { max-width: 88%; }
  .mesaj-alani { padding: 12px 10px; }
  .ek-dosya-kap { min-width: 0; }
}
@media (hover: none) {
  .mesaj-islemler { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Çağrı ekranı (/temsilci/cagri) — Aşama 4C
   Geniş ekranda (≥1101 × ≥620) sayfa kaymaz: kimlik + özet şeridi sabit; müşteri dosyası
   sekmesinin içi ve sağ panel kendi içinde kayar (1366×768'de bütün dosya tek ekranda).
   -------------------------------------------------------------------------- */
.cagri { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cagri > .uyari { margin: 0; padding-top: 8px; padding-bottom: 8px; }
/* Müşteri profili (Aşama 6): çağrı ekranının düzeni, kimlik bandı sunucudan yeniden çizilir */
.profil-kimlik { display: grid; gap: 10px; }
.profil-kimlik > .uyari { margin: 0; padding-top: 8px; padding-bottom: 8px; }
.kimlik-pasif { opacity: .85; background: var(--yuzey-2); }
.profil-bilgi-ozet { margin-bottom: 4px; font-size: 13px; }
.profil-form .form-izgara-3 .alan-genis { grid-column: span 2; }
.kapali-hatirlatmalar li { display: grid; gap: 2px; }
.not-sil:hover { color: var(--kirmizi); }

/* Kimlik bandı — sade: ad + adım, tek satır künye, telefonlar, yalnız dikkat isteyen çipler */
.cagri-kimlik {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 10px 14px; border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--mavi)); border-radius: var(--yaricap); background: var(--yuzey);
}
.avatar-orta { width: 46px; height: 46px; font-size: 16px; }
.cagri-kimlik-govde { flex: 1; min-width: 0; display: grid; gap: 5px; }
.cagri-ad-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.cagri-kimlik h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.cagri-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; color: var(--metin-2); font-size: 13px; }
.cagri-alt i { font-style: normal; color: var(--cizgi-koyu); }
.cagri-alt .cagri-adres { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin-3); }
.cagri-telefonlar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cagri-tel {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: var(--yaricap); background: var(--mavi-acik); color: var(--mavi-metin);
  font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none !important;
}
.cagri-tel .ikon { width: 14px; height: 14px; }
.cagri-tel:hover { background: var(--mavi); color: #fff; }
.cagri-telefonlar .dugme-kucuk { height: 30px; }
.cagri-telefonlar .dugme .ikon { width: 15px; height: 15px; }

/* Durum çipleri — yalnız dikkat isteyen durumlar; tıklayınca ilgili sekme */
.durum-cipleri { display: contents; }
.durum-cip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border: 0; border-radius: var(--yaricap-k); background: var(--ton-acik); color: var(--ton-metin);
  font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.durum-cip .ikon { width: 14px; height: 14px; }
button.durum-cip:hover { background: var(--ton); color: var(--ton-yazi); }
span.durum-cip { cursor: default; }

/* "Ulaşamadık SMS'i" listesi: her numara kendi satırında */
.sms-menu { min-width: 320px; }
.sms-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--yaricap-k); }
.sms-satir + .sms-satir { border-top: 1px dashed var(--cizgi); }
.sms-tel { display: grid; line-height: 1.3; }
.sms-tel strong { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sms-tel small { font-size: 12px; color: var(--metin-3); }
.sms-not { margin: 4px 10px 6px; font-size: 12px; color: var(--metin-3); }
.acilir-pasif { color: var(--metin-3); cursor: default; }
.acilir-pasif:hover { background: none; }

/* Son arama + kaydet + diğer işlemler */
.cagri-kimlik-sag { display: flex; align-items: center; gap: 10px; flex: none; }
.son-arama { display: grid; gap: 3px; min-width: 210px; padding: 2px 14px; border-left: 1px solid var(--cizgi); }
.son-arama-etiket { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3); }
.son-arama-etiket .ikon { width: 13px; height: 13px; }
.son-arama-ust { display: flex; align-items: center; gap: 8px; }
.son-arama-ust time { font-size: 13px; font-weight: 700; color: var(--metin); white-space: nowrap; }
.son-arama-alt { font-size: 12px; color: var(--metin-3); white-space: nowrap; }
.son-arama-ilk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mavi-metin); }
.son-arama-ilk .ikon { width: 15px; height: 15px; }
.avatar-mini { width: 22px; height: 22px; font-size: 10px; }
.cagri-diger { width: 48px; height: 48px; }

/* Özet sekmesindeki gösterge kutuları — tıklayınca ilgili sekme */
.ozet-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ozet-kutu {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px;
  border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap);
  background: var(--yuzey); color: var(--metin); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.ozet-kutu:hover { background: var(--ton-acik); }
.ozet-kutu:focus-visible { outline: 2px solid var(--ton); outline-offset: 1px; }
.ozet-kutu .simge-kutu { width: 30px; height: 30px; }
.ozet-kutu .simge-kutu .ikon { width: 16px; height: 16px; }
.ozet-govde { display: grid; min-width: 0; line-height: 1.25; }
.ozet-govde small { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3); }
.ozet-govde strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ton-metin); }
.ozet-govde em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 12px; color: var(--metin-2); }
.ozet-uyari { background: var(--kirmizi-acik); }

/* Izgara: müşteri dosyası + sağ panel */
.cagri-izgara { display: flex; flex-direction: column; min-height: 0; }   /* tam genişlik: sağ sütun yok */
.cagri-dosya { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
/* Sekmeler: hap biçimi, etkin sekme kendi modül renginde dolu. "Bilgileri düzenle" indigo (müşteri rengi); amber
   işlem düğmesinin (Cari güncelle) rengi, sekmede kullanılmaz. Gruplar ince ayraçla, "Bilgileri düzenle" en sağda.
   Kaydırma çubuğu yok: geniş ekranda gerekirse alt satıra geçer, dar ekranda gizli yatay kaydırma. */
.dosya-sekmeler {
  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 8px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2);
}
.dosya-sekme {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--yaricap); background: transparent;
  color: var(--metin-2); font-weight: 650; font-size: 13.5px; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dosya-sekme:hover { background: var(--yuzey); border-color: var(--cizgi); color: var(--metin); }
.dosya-sekme.aktif { background: var(--ton); border-color: var(--ton); color: var(--ton-yazi); }
.dosya-sekme:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.dosya-sekme .sekme-sayi {
  min-width: 20px; padding: 0 6px; border-radius: var(--yaricap-k);
  background: var(--ton-acik); color: var(--ton-metin); font-size: 11.5px; line-height: 19px;
}
.dosya-sekme .sekme-sayi.bos { background: var(--gri-acik); color: var(--metin-3); }
.dosya-sekme.aktif .sekme-sayi { background: rgba(255, 255, 255, .24); color: var(--ton-yazi); }
.dosya-sekme-ayrac { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--cizgi-koyu); }
.dosya-sekme-son { margin-left: auto; }
.dosya-govde { flex: 1; min-height: 0; padding: 12px; overflow-y: auto; }
.dosya-panel[hidden] { display: none; }
.dosya-govde .bos-kutu { padding: 22px 16px; }

/* Özet sekmesi */
.ozet-izgara { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.ozet-izgara > .ozet-blok:first-child { grid-row: span 2; }
.ozet-blok { min-width: 0; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.ozet-blok-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.ozet-blok-ust h4 { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 750; }
.ozet-blok-ust h4 .ikon { width: 16px; height: 16px; color: var(--ton); }
.ozet-blok .liste-bilgi { padding: 10px 4px; text-align: left; }
.mini-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.mini-oge { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 0; border-top: 1px dashed var(--cizgi); }
.mini-oge:first-child { border-top: 0; }
.mini-oge > .rozet, .mini-oge > .dugme { flex: none; }
.mini-tarih { flex: none; width: 76px; font-size: 12.5px; font-weight: 700; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.mini-govde { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mini-govde > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.mini-govde small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--metin-3); }
.mini-govde small strong { color: var(--metin-2); }
.mini-rozetler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

.panel-arac { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--metin-3); }

/* Cihaz kartları */
.cihaz-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cihaz-kart { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--turuncu)); border-radius: var(--yaricap); background: var(--yuzey); }
.cihaz-kart.acik { --serit-renk: var(--mavi); }
.cihaz-kart-ust { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cihaz-kart-ust h4 { font-size: 15px; font-weight: 800; }
.cihaz-kart-ust h4 span { font-weight: 600; color: var(--metin-2); }
.cihaz-kart-ust p { font-size: 12.5px; color: var(--metin-3); }
.cihaz-kart-ust p strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.cihaz-bilgi { margin: 0; display: grid; gap: 6px 14px; }
.cihaz-bilgi { grid-template-columns: 1fr 1fr; }
.cihaz-bilgi dt { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); }
.cihaz-bilgi dd { margin: 0; font-size: 13px; color: var(--metin); overflow-wrap: anywhere; }
.cihaz-bilgi .genis { grid-column: 1 / -1; }
.cihaz-kart-alt { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--cizgi); }

/* Servisler sekmesi: üstte tek satır özet, her servis tek satır (durum renginde sol şerit), ayrıntı açılır */
.servis-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; font-size: 13px; color: var(--metin-2); }
.servis-ust i { font-style: normal; margin: 0 6px; color: var(--cizgi-koyu); }
.servis-ust strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.servis-cari { line-height: 2; }
.servis-cari .rozet { margin-left: 10px; font-size: 12.5px; }
.servis-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.servis-oge { box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); }
.servis-oge + .servis-oge { border-top: 1px solid var(--cizgi); }
.servis-oge:first-child { border-top-left-radius: var(--yaricap); }
.servis-oge:last-child { border-bottom-left-radius: var(--yaricap); }
.servis-oge.acik { background: var(--yuzey-2); }
.servis-ana { display: grid; grid-template-columns: 86px minmax(0, 1fr) 170px 120px 200px; align-items: center; gap: 12px; min-height: 52px; padding: 7px 10px; }
.servis-tarih { display: grid; line-height: 1.3; }
.servis-tarih strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.servis-tarih small, .servis-is small, .servis-para small { font-size: 12px; color: var(--metin-3); }
.servis-is { display: grid; min-width: 0; line-height: 1.35; }
.servis-is strong, .servis-is small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.servis-is strong { font-size: 13.5px; }
.servis-durum { justify-self: start; max-width: 100%; white-space: normal; line-height: 1.3; }
.servis-para { display: grid; justify-items: end; line-height: 1.35; }
.servis-para strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.servis-para small.yesil-metin, .servis-para small.kirmizi-metin, .servis-para small.turuncu-metin { font-weight: 600; }
.servis-dugmeler { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.dugme-kare { width: 32px; padding: 0; }
.servis-ac-kapa .ikon { transition: transform .15s; }
.servis-oge.acik .servis-ac-kapa .ikon { transform: rotate(180deg); }
.servis-detay { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 0; padding: 4px 12px 12px 108px; }
.servis-detay[hidden] { display: none; }
.servis-detay dt { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); }
.servis-detay dd { margin: 0; font-size: 13px; color: var(--metin); overflow-wrap: anywhere; }
.servis-detay .genis { grid-column: 1 / -1; }
.kirmizi-metin { color: var(--kirmizi-metin); }
.yesil-metin { color: var(--yesil-metin); }
.turuncu-metin { color: var(--turuncu-metin); }
/* Sık tablolar (aramalar, memnuniyet) */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.tablo-sik td, .tablo-sik th { padding: 7px 10px; font-size: 13px; vertical-align: top; }
.tablo-sik th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.tablo-sik tbody tr:last-child td { border-bottom: 0; }
.tablo-sik tbody tr:hover td { background: var(--yuzey-2); }
.tablo-sik td small { display: block; margin-top: 2px; }
.tablo .sag { text-align: right; }
.tutar { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tutar-arti { color: var(--yesil-metin); }
.cari-aciklama { min-width: 200px; }

/* Bilgiler sekmesi (cari formu) */
.cagri-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.form-izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-izgara .alan-genis { grid-column: span 2; }
.form-izgara .alan-tam { grid-column: 1 / -1; }
.form-izgara .girdi[readonly] { background: var(--yuzey-2); color: var(--metin-2); }
.alan-baslik { font-weight: 650; font-size: 13.5px; color: var(--metin); }
.form-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.form-alt .alan-ipucu { margin: 0; }
.secim-cipleri { display: flex; flex-wrap: wrap; gap: 8px; }
.secim-cip { position: relative; cursor: pointer; }
.secim-cip input { position: absolute; opacity: 0; pointer-events: none; }
.secim-cip span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; min-height: 40px; padding: 0 14px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); font-weight: 700; color: var(--metin); white-space: nowrap; }
.secim-cip:hover span { border-color: var(--metin-3); }
.secim-cip input:checked + span { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.secim-cip input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.modal .secim-cip input:checked + span { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.secim-cip input:disabled + span { opacity: .45; cursor: not-allowed; }

/* Görüşmeler sekmesi: notların üstünde tek satır giriş (yazdıkça büyür), altında notlar */
.not-satir {
  position: sticky; top: -12px; z-index: 2; display: flex; align-items: flex-end; gap: 8px;
  margin: -12px -12px 12px; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); background: var(--teal-acik);
}
.not-satir .girdi { flex: 1; min-width: 0; height: 40px; min-height: 40px; padding: 9px 12px; line-height: 1.45; resize: none; overflow-y: auto; background: var(--yuzey); }
.not-satir .rozet { align-self: center; }
.not-satir .dugme { flex: none; }
.not-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.not-oge { padding: 9px 12px; border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--teal)); border-radius: var(--yaricap); background: var(--yuzey); }
.not-oge.sabit { --serit-renk: var(--amber); background: var(--amber-acik); }
.not-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12.5px; }
.not-ust strong { color: var(--metin); }
.not-ust time { color: var(--metin-3); }
.not-ust .rozet { padding: 1px 7px; font-size: 11px; }
.not-sabit { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--yaricap-k); background: none; color: var(--metin-3); cursor: pointer; }
.not-sabit:hover { background: var(--amber-acik); color: var(--amber-metin); }
.not-oge.sabit .not-sabit { color: var(--amber-metin); }
.not-sabit .ikon { width: 15px; height: 15px; }
.not-oge p { padding-left: 30px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }

/* Takip sekmesi: gün içi geri arama, hatırlatmalar */
.takip-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.takip-kart { padding: 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.takip-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.takip-ust h3 { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 750; }
.takip-ust h3 .ikon { width: 17px; height: 17px; color: var(--ton); }
.takip-ust .soluk { font-size: 12px; font-variant-numeric: tabular-nums; }.satir-form { display: flex; gap: 8px; }
.satir-form .girdi { flex: 1; min-width: 0; }
.hizli-saatler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hizli-saatler:empty { display: none; }
.hizli-saatler .suzgec-cip { height: 28px; padding: 0 10px; font-size: 12.5px; color: var(--mavi-metin); border-color: var(--mavi-acik); background: var(--mavi-acik); }
.hizli-saatler .suzgec-cip:hover { border-color: var(--mavi); }
.hatirlatma-form { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; }
.takip-kart .panel-liste { margin-top: 10px; }

/* Arama sonucu penceresi — adım adım: 1 ulaşım kartları, 2 o yolun sonuçları, 3 ayrıntı; altta seçim özeti */
.sonuc-modal { width: min(780px, calc(100vw - 32px)); }
.modal-ust h3 small { margin-left: 6px; font-size: 14px; font-weight: 600; opacity: .85; }
.sonuc-govde { gap: 18px; }
.sonuc-adim { display: grid; gap: 10px; }
.sonuc-adim[hidden] { display: none; }
.sonuc-adim + .sonuc-adim { padding-top: 16px; border-top: 1px solid var(--cizgi); }
.sonuc-adim h4 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 750; color: var(--metin); }
.adim-no { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--yaricap-k); background: var(--ton); color: var(--ton-yazi); font-size: 13px; font-weight: 800; }
.ulasim-kartlari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ulasim-kart { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); cursor: pointer; transition: border-color .12s, background .12s; }
.ulasim-kart input { position: absolute; opacity: 0; pointer-events: none; }
.ulasim-kart strong { display: block; font-size: 15.5px; color: var(--metin); }
.ulasim-kart small { display: block; font-size: 12.5px; color: var(--metin-3); }
.ulasim-kart .simge-kutu { background: var(--ton-acik); color: var(--ton-metin); }
.ulasim-kart:hover { border-color: var(--ton); }
.ulasim-kart:has(input:checked) { border-color: var(--ton); background: var(--ton-acik); box-shadow: inset 0 0 0 1px var(--ton); }
.ulasim-kart:has(input:checked) .simge-kutu { background: var(--ton); color: var(--ton-yazi); }
.ulasim-kart:has(input:focus-visible) { outline: 2px solid var(--ton); outline-offset: 2px; }
.sonuc-gruplari { display: grid; gap: 10px; }
.sonuc-adim > .uyari, .sonuc-adim > .alan-ipucu { margin: 0; }
.sonuc-alt { align-items: center; }
.sonuc-ozet { margin-right: auto; font-size: 13.5px; color: var(--metin-2); }
.sonuc-ozet strong { color: var(--metin); }
.sonuc-ozet-uyari { color: var(--amber-metin); }
/* Sonuç kuralları: müşteri durumu çipleri, kilitli (seçilemeyen) sonuç ve yol kartı */
.sonuc-olgular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--yaricap); background: var(--yuzey-2); font-size: 13px; }
.sonuc-olgular-baslik { margin-right: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-2); }
.olgu-cip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: var(--yaricap-k); background: var(--teal-acik); color: var(--teal-metin); font-weight: 650; }
.olgu-cip .ikon { width: 14px; height: 14px; }
.sonuc-kural-ipucu { margin: 0; font-size: 13px; }
.sonuc-kural-ipucu[hidden] { display: none; }
.sonuc-cip.kural-kapali { cursor: not-allowed; }
.sonuc-cip.kural-kapali > span, .sonuc-cip.kural-kapali:hover > span { border-style: dashed; border-color: var(--cizgi-koyu); background: var(--yuzey-2); color: var(--metin-3); }
.sonuc-cip .kural-kilit { display: inline-flex; min-height: 0; margin-left: 6px; padding: 0; border: 0; background: none; color: inherit; }
.sonuc-cip .kural-kilit .ikon { width: 13px; height: 13px; margin: 0; }
.ulasim-kart.kart-kapali { cursor: not-allowed; border-style: dashed; background: var(--yuzey-2); }
.ulasim-kart.kart-kapali:hover { border-color: var(--cizgi-koyu); }
.ulasim-kart.kart-kapali strong, .ulasim-kart.kart-kapali .simge-kutu { opacity: .5; }
.ulasim-kart.kart-kapali small { color: var(--amber-metin); font-weight: 600; }

/* Kapanış formu parçaları (sonuç ve memnuniyet pencereleri): sonuç çipleri + sonuca göre açılan alanlar */
.sonuc-secim { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sonuc-secim legend { margin-bottom: 6px; padding: 0; font-weight: 700; font-size: 13px; color: var(--metin-2); }
.sonuc-grup { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 8px; align-items: start; }
.sonuc-grup-ad { padding-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ton-metin); }
.sonuc-cipleri { display: flex; flex-wrap: wrap; gap: 6px; }
.sonuc-cip { position: relative; cursor: pointer; }
.sonuc-cip input { position: absolute; opacity: 0; pointer-events: none; }
.sonuc-cip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 13px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey);
  font-size: 13.5px; font-weight: 600; color: var(--metin); transition: background .12s, border-color .12s;
}
.sonuc-cip:hover span { border-color: var(--ton); background: var(--ton-acik); }
.sonuc-cip input:checked + span { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.sonuc-cip input:focus-visible + span { outline: 2px solid var(--ton); outline-offset: 2px; }
.sonuc-ek { display: grid; gap: 8px; padding: 12px; box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap); background: var(--ton-acik); }
.sonuc-ek[hidden], .sonuc-geri[hidden] { display: none; }
.sonuc-ek > label, .sonuc-ek-baslik { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ton-metin); }
.sonuc-ek-baslik .ikon { width: 16px; height: 16px; }
.sonuc-ek .girdi { background: var(--yuzey); }
.sonuc-ek .alan-ipucu { margin: 0; color: var(--ton-metin); }
.sonuc-ek .onay-kutusu small { font-weight: 500; }
.sonuc-ek .satir-form .sonuc-tarih { flex: 0 0 160px; }
.sonuc-geri { display: grid; gap: 8px; }
.sonuc-geri > .girdi { max-width: 160px; }
.sonuc-geri .hizli-saatler { margin-top: 0; }
.sonuc-ek .hizli-saatler .suzgec-cip { background: var(--yuzey); border-color: var(--cizgi-koyu); color: var(--mavi-metin); }
.sonuc-ek .hizli-saatler .suzgec-cip:hover { border-color: var(--mavi); }
.sonuc-uyari { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--metin-3); }
.sonuc-uyari .ikon { width: 15px; height: 15px; }
.panel-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.panel-liste:empty { display: none; }
.panel-oge { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap); }
.panel-oge-govde { flex: 1; min-width: 0; display: grid; gap: 1px; }
.panel-oge-govde strong { font-size: 13.5px; overflow-wrap: anywhere; }
.panel-oge-govde small { font-size: 12px; color: var(--metin-3); }
.panel-oge .panel-saat { font-size: 18px; font-weight: 800; color: var(--mavi-metin); font-variant-numeric: tabular-nums; }

/* İşlem pencereleri (cihaz, servis, korsan, telefon, silme) */
.modal-konu { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--yaricap); background: var(--ton-acik); color: var(--ton-metin); font-size: 13.5px; font-weight: 700; }
.modal-konu:empty { display: none; }
.modal-genis .modal-govde { max-height: calc(100vh - 180px); overflow-y: auto; }
.modal-govde.form { gap: 14px; }
.modal-govde .alan-ipucu { margin-top: 0; }
.modal-govde .uyari .dugme { flex: none; margin-left: auto; }
.korsan-hata { margin: 2px 0 0; padding: 6px 10px; border-radius: var(--yaricap); background: var(--kirmizi-acik); color: var(--kirmizi-metin); font-size: 12.5px; font-weight: 650; }
.korsan-hata[hidden] { display: none; }
.sonuc-ozet .sonuc-ozet-dugme { margin-left: 8px; vertical-align: middle; }
.secim-cip span small { font-size: 12px; font-weight: 500; opacity: .8; }
.secim-cip span .ikon { width: 16px; height: 16px; flex: none; }
.tur-kutusu { margin: 0; padding: 0; border: 0; min-width: 0; }
.tur-kutusu legend { margin-bottom: 8px; padding: 0; font-weight: 600; font-size: 13px; color: var(--metin-2); }
.tur-kutusu legend small { font-weight: 500; color: var(--metin-3); }
.tur-cipleri { display: flex; flex-wrap: wrap; gap: 6px; }
.tur-cip { position: relative; cursor: pointer; }
.tur-cip input { position: absolute; opacity: 0; pointer-events: none; }
.tur-cip span { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); font-size: 13.5px; font-weight: 600; color: var(--metin); }
.tur-cip:hover span { border-color: var(--ton); }
.tur-cip input:checked + span { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.tur-cip input:focus-visible + span { outline: 2px solid var(--ton); outline-offset: 2px; }
.onay-kutusu { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--metin); cursor: pointer; }
.alan .onay-kutusu { margin-top: 2px; font-weight: 600; }

/* Pencere formları — tek aralık (gap), net ve koyu etiketler, alan yüksekliğinde (44 px) çipler */
.modal-govde.form > .alan, .modal-govde.form > .tur-kutusu, .modal-govde.form > .sonuc-secim, .modal-govde.form > .sonuc-ek,
.modal-govde.form > .uyari, .modal-govde.form > p, .modal-govde.form > .form-izgara { margin-top: 0; margin-bottom: 0; }
.modal-govde.form { gap: 16px; padding: 20px; }
.modal .alan { gap: 6px; }
.modal .alan > label, .modal .alan-baslik, .modal .tur-kutusu legend, .modal .sonuc-secim legend { font-size: 13.5px; font-weight: 650; color: var(--metin); }
.modal .tur-kutusu legend small { margin-left: 2px; font-weight: 500; color: var(--metin-3); }
.modal .alan-ipucu { margin: 0; font-size: 12.5px; color: var(--metin-3); }
.modal .form-izgara { gap: 16px; align-items: start; }
.modal .secim-cip span { min-height: 44px; }
.modal-konu { line-height: 1.4; }
.onay-kutusu input { width: 18px; height: 18px; accent-color: var(--yesil); }
.onay-kutusu small { font-weight: 500; color: var(--metin-3); }

.cagri-bos .bos-kutu { padding: 48px 20px; }
.cagri-bos .ornek-satir { justify-content: center; margin-top: 10px; }

/* Geniş ekran: sayfa sabit, iç alanlar kayar */
@media (min-width: 1101px) and (min-height: 620px) {
  .cagri { height: calc(100vh - var(--ust-y, 68px) - 40px); }
  .cagri-izgara { flex: 1; }
  .cagri-dosya { flex: 1; }
}
@media (max-width: 1280px) {
  .son-arama { min-width: 180px; }
  .servis-ana { grid-template-columns: 86px minmax(0, 1fr) 150px 110px 196px; gap: 10px; }
  .cagri-alt .cagri-adres { max-width: 260px; }
}
@media (max-width: 1100px) {
  .takip-izgara { grid-template-columns: 1fr; }
  .cagri-kimlik { flex-wrap: wrap; }
  .cagri-kimlik-sag { width: 100%; }
  .son-arama { flex: 1; min-width: 0; padding-left: 0; border-left: 0; }
  .dosya-govde { max-height: none; }
}
@media (max-width: 760px) {
  .form-izgara, .form-izgara-3 { grid-template-columns: 1fr 1fr; }
  .form-izgara .alan-genis { grid-column: 1 / -1; }
  .form-alt { flex-direction: column; align-items: stretch; }
  .cagri-kimlik > .avatar-orta { display: none; }
  .cagri-kimlik-sag { flex-wrap: wrap; }
  .son-arama { flex-basis: 100%; }
  .cagri-kimlik-sag > .dugme-buyuk { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 14px; }
  .ozet-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dosya-sekmeler { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .dosya-sekmeler::-webkit-scrollbar { display: none; }
  .dosya-sekme-son { margin-left: 0; }
  .not-satir { flex-wrap: wrap; }
  .not-satir .girdi { flex-basis: 100%; }
  .hatirlatma-form { grid-template-columns: 1fr auto; }
  .hatirlatma-form [name="aciklama"] { grid-column: 1 / -1; grid-row: 1; }
  .sonuc-grup { grid-template-columns: 1fr; gap: 4px; }
  .ulasim-kartlari { grid-template-columns: 1fr; }
  .sonuc-alt { flex-wrap: wrap; }
  .sonuc-ozet { flex-basis: 100%; }
  .sonuc-grup-ad { padding-top: 0; }
  .ozet-izgara { grid-template-columns: 1fr; }
  .ozet-izgara > .ozet-blok:first-child { grid-row: auto; }
  .servis-ana { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .servis-tarih { grid-column: 1; grid-row: 1; }
  .servis-para { grid-column: 2; grid-row: 1; }
  .servis-is { grid-column: 1 / -1; }
  .servis-durum { grid-column: 1; }
  .servis-dugmeler { grid-column: 2; }
  .servis-detay { padding-left: 12px; }
  .cihaz-bilgi { grid-template-columns: 1fr; }
  .cihaz-kartlar { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Memnuniyet araması (/memnuniyet) — Aşama 4D. Çağrı ekranının düzenini kullanır (.cagri), teal tonunda.
   -------------------------------------------------------------------------- */
.memnuniyet .cagri-kimlik { --serit-renk: var(--teal); }
.anket-sayac { display: grid; gap: 2px; padding: 2px 14px; border-left: 1px solid var(--cizgi); font-size: 12.5px; color: var(--metin-2); white-space: nowrap; }
.anket-sayac strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.anket-servis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex: none;
  padding: 10px 14px; border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap); background: var(--yuzey);
}
.anket-servis .simge-kutu { width: 36px; height: 36px; }
.anket-servis-govde { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.35; }
.anket-servis-govde small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); }
.anket-servis-govde strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.anket-servis-govde span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--metin-2); }
.anket-servis-ucret { display: grid; justify-items: end; line-height: 1.3; }
.anket-servis-ucret small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); }
.anket-servis-ucret strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.anket-servis-ucret em { font-style: normal; font-size: 12px; color: var(--metin-2); }
.anket-diger { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--cizgi); }
.anket-diger small { font-size: 12px; color: var(--metin-3); }
.anket-diger .durum-cip { text-decoration: none !important; }
.bos-sayac { margin-top: 6px; font-size: 13px; color: var(--metin-2); }

/* Anket penceresi */
.anket-buyuk .sonuc-cip span { min-height: 42px; padding: 6px 18px; font-size: 14.5px; }
.sonuc-cip span .ikon { width: 16px; height: 16px; margin-right: 6px; }
.puan-cipleri { display: flex; flex-wrap: wrap; gap: 6px; }
.puan-cipleri .sonuc-cip span { justify-content: center; width: 42px; min-height: 38px; padding: 0; font-size: 15px; font-weight: 800; }
.anket-dal { display: grid; gap: 10px; }
.anket-dal[hidden] { display: none; }
.anket-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anket-ikili .sonuc-ek .girdi { max-width: 220px; }
@media (max-width: 760px) {
  .anket-sayac { border-left: 0; padding-left: 0; flex-basis: 100%; }
  .anket-servis-ucret { justify-items: start; }
  .anket-ikili { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Takvim (/takvim) — hatırlatma pembe, geri arama mavi; durum: günü geçti kırmızı,
   tamamlandı yeşil tik + soluk, zamanı geldi amber, kaçırıldı turuncu
   -------------------------------------------------------------------------- */
.takvim { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.takvim-ana { display: grid; gap: 12px; padding: 16px; }
.takvim-arac { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.takvim-gezinti { display: flex; align-items: center; gap: 8px; }
.takvim-baslik { margin-left: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.takvim-sag { display: flex; align-items: center; gap: 10px; }
.bolumlu { display: inline-flex; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); overflow: hidden; }
.bolumlu button { padding: 0 14px; height: 36px; border: 0; border-right: 1px solid var(--cizgi-koyu); background: var(--yuzey); color: var(--metin-2); font-weight: 600; cursor: pointer; }
.bolumlu button:last-child { border-right: 0; }
.bolumlu button:hover { background: var(--yuzey-2); color: var(--metin); }
.bolumlu button.aktif { background: var(--pembe); color: #fff; }
.bolumlu button:focus-visible { outline: 2px solid var(--pembe); outline-offset: -2px; }
.takvim-suzgec { display: flex; flex-wrap: wrap; gap: 8px; }
.suzgec-cip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey);
  color: var(--metin-3); font-size: 13px; font-weight: 600; cursor: pointer;
}
.suzgec-nokta { width: 10px; height: 10px; border-radius: 2px; border: 2px solid var(--ton); }
.suzgec-cip.aktif { border-color: var(--ton); background: var(--ton-acik); color: var(--ton-metin); }
.suzgec-cip.aktif .suzgec-nokta { background: var(--ton); }

/* Olay çipi (ay ve hafta) */
.olay-cip {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 3px 6px;
  border: 0; box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap-k);
  background: var(--ton-acik); color: var(--ton-metin); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer;
}
.olay-cip:hover { background: var(--ton); color: var(--ton-yazi); }
.olay-cip:focus-visible { outline: 2px solid var(--ton); outline-offset: 1px; }
.olay-cip .ikon { width: 13px; height: 13px; flex: none; }
.olay-saat { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; }
.olay-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olay-alt { display: none; }
.olay-cip.durum-tamam { opacity: .62; }
.olay-cip.durum-tamam .olay-ad { text-decoration: line-through; }
.olay-cip.durum-gecikti, .ajanda-kart.durum-gecikti { --ton: var(--kirmizi); --ton-acik: var(--kirmizi-acik); --ton-metin: var(--kirmizi-metin); --ton-yazi: #fff; }
.olay-cip.durum-kacirildi, .ajanda-kart.durum-kacirildi { --ton: var(--turuncu); --ton-acik: var(--turuncu-acik); --ton-metin: var(--turuncu-metin); --ton-yazi: #fff; }
.olay-cip.durum-sirada, .ajanda-kart.durum-sirada { --ton: var(--amber); --ton-acik: var(--amber-acik); --ton-metin: var(--amber-metin); --ton-yazi: #1f1300; }

/* Ay görünümü */
.ay-ust { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--cizgi); border-bottom: 0; border-radius: var(--yaricap) var(--yaricap) 0 0; background: var(--yuzey-2); }
.ay-ust span { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--metin-2); text-transform: uppercase; letter-spacing: .04em; }
.ay-ust .hafta-sonu { color: var(--pembe-metin); }
.ay-izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--cizgi); border-top: 1px solid var(--cizgi); }
.ay-gun { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 112px; padding: 4px 5px 6px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); background: var(--yuzey); cursor: pointer; }
.ay-gun:hover { background: #fcf7fa; }
.ay-gun.hafta-sonu { background: var(--yuzey-2); }
.ay-gun.diger-ay { background: #fafbfc; }
.ay-gun.diger-ay .ay-gun-no { color: var(--metin-3); font-weight: 500; }
.ay-gun-no { align-self: flex-start; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: var(--yaricap-k); background: none; color: var(--metin); font-weight: 700; font-size: 13px; cursor: pointer; }
.ay-gun-no:hover { background: var(--pembe-acik); color: var(--pembe-metin); }
.ay-gun.bugun { box-shadow: inset 0 0 0 2px var(--pembe); }
.ay-gun.bugun .ay-gun-no { background: var(--pembe); color: #fff; }
.ay-olaylar { display: grid; gap: 3px; flex: 1; align-content: start; }
.ay-daha { align-self: flex-start; padding: 0 4px; border: 0; background: none; color: var(--pembe-metin); font-size: 12px; font-weight: 700; cursor: pointer; }
.ay-daha:hover { color: var(--marka-koyu); }
.ay-noktalar { display: flex; gap: 3px; flex-wrap: wrap; padding: 0 4px; }
.ay-nokta { width: 7px; height: 7px; border-radius: 8px; background: var(--ton); }
.ay-nokta.durum-tamam { opacity: .45; }

/* Hafta görünümü */
.hafta-gorunum { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.hafta-gun { display: flex; flex-direction: column; min-height: 420px; border-right: 1px solid var(--cizgi); background: var(--yuzey); }
.hafta-gun:last-child { border-right: 0; }
.hafta-gun.hafta-sonu { background: var(--yuzey-2); }
.hafta-gun-ust { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--cizgi); background: none; color: var(--metin-2); cursor: pointer; }
.hafta-gun-ust:hover { background: var(--pembe-acik); }
.hafta-gun-adi { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hafta-gun-no { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: var(--yaricap); font-size: 17px; color: var(--metin); }
.hafta-gun.bugun .hafta-gun-no { background: var(--pembe); color: #fff; }
.hafta-olaylar { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 6px; cursor: pointer; }
.hafta-olaylar .olay-cip { flex-wrap: wrap; padding: 5px 7px; }
.hafta-olaylar .olay-alt { display: block; width: 100%; font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hafta-bos { color: var(--cizgi-koyu); text-align: center; padding-top: 10px; }

/* Gün görünümü ve ajanda kartları */
.gun-gorunum { display: grid; gap: 8px; }
.gun-bolum { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3); }
.ajanda-kart {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); border-radius: var(--yaricap);
  background: var(--yuzey); color: var(--metin); text-align: left; cursor: pointer;
}
.ajanda-kart:hover { background: var(--ton-acik); }
.ajanda-kart:focus-visible { outline: 2px solid var(--ton); outline-offset: 1px; }
.ajanda-saat { flex: none; min-width: 46px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ton-metin); }
.ajanda-govde { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ajanda-ust { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ajanda-ust .ikon { width: 15px; height: 15px; flex: none; color: var(--ton); }
.ajanda-ust strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajanda-alt { font-size: 12.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajanda-kart.durum-tamam strong { text-decoration: line-through; color: var(--metin-3); }
.ajanda-kart .rozet { flex: none; }
.ajanda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.ajanda-kart.kisa { padding: 8px 10px; gap: 10px; }
.ajanda-kart.kisa .ajanda-saat { min-width: 40px; font-size: 12.5px; }
.ajanda-kart.kisa .rozet { display: none; }
.takvim-yan { display: grid; gap: 16px; }
.takvim-yan .kart { padding: 16px; }

/* Ayrıntı ve form pencereleri */
.olay-bilgi { margin: 0; display: grid; gap: 10px; }
.olay-bilgi > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.olay-bilgi dt { color: var(--metin-3); font-size: 13px; }
.olay-bilgi dd { margin: 0; color: var(--metin); white-space: pre-wrap; overflow-wrap: anywhere; }
.olay-bilgi dd a { font-weight: 600; }
.modal-govde > .alan { margin-top: 14px; }
.modal-govde .uyari { margin-bottom: 0; }
.modal-alt-bosluk { flex: 1; }
.modal-alt { flex-wrap: wrap; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .form { gap: 0; }
.modal-govde.form { display: grid; gap: 14px; }
.musteri-sec { position: relative; }
.musteri-sonuc { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; list-style: none; margin: 0; padding: 4px; max-height: 230px; overflow-y: auto; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge-yuzen); }
.musteri-oge { display: grid; width: 100%; padding: 7px 9px; border: 0; border-radius: var(--yaricap-k); background: none; text-align: left; cursor: pointer; color: var(--metin); }
.musteri-oge:hover, .musteri-oge:focus-visible { background: var(--pembe-acik); outline: none; }
.musteri-oge small { color: var(--metin-3); font-size: 12px; }
.secili-musteri { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--pembe); border-radius: var(--yaricap); background: var(--pembe-acik); }
.secili-musteri-ad { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--pembe-metin); }
.secili-musteri-ad small { color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secili-musteri .dugme-ikon { width: 30px; height: 30px; border-color: transparent; background: transparent; }

@media (max-width: 1200px) {
  .takvim { grid-template-columns: 1fr; }
  .takvim-yan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .takvim-yan { grid-template-columns: 1fr; }
  .takvim-baslik { font-size: 17px; }
  .takvim-sag .dugme span { display: none; }
  .ay-gun { min-height: 56px; padding: 3px; }
  .ay-ust span { padding: 6px 4px; text-align: center; }
  .hafta-gorunum { grid-template-columns: 1fr; }
  .hafta-gun { min-height: 0; border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .hafta-gun-ust { grid-auto-flow: column; justify-content: start; gap: 8px; }
  .hafta-olaylar { cursor: default; }
  .form-satir { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Standart ana sayfa (/) — Aşama 4A: müşteri sorgula (mavi) + zamanı gelen hatırlatmalar (pembe)
   -------------------------------------------------------------------------- */
.ana-izgara { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ana-izgara > .kart { min-width: 0; }

.sorgu-turler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.sorgu-tur {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 40px; padding: 0 10px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey);
  color: var(--metin-2); font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.sorgu-tur .ikon { width: 16px; height: 16px; flex: none; }
.sorgu-tur:hover { border-color: var(--ton); color: var(--ton-metin); }
.sorgu-tur.aktif { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.sorgu-tur:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.sorgu-girdi .girdi { height: 50px; font-size: 16px; }
.sorgu-girdi .girdi-ikon { top: 16px; }
.sorgu-sonuc { margin-top: 12px; min-height: 60px; }
.sorgu-sonuc[aria-busy="true"] { opacity: .6; }
.sorgu-bilgi { padding: 10px 2px; font-size: 13px; color: var(--metin-3); }
.sorgu-bos { display: grid; justify-items: start; gap: 4px; padding: 14px 16px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey-2); font-size: 13.5px; color: var(--metin-3); }
.sorgu-bos strong { color: var(--metin); }
.sorgu-bos .dugme { margin-top: 6px; }
.sorgu-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.sorgu-liste li + li { border-top: 1px solid var(--cizgi); }
.sorgu-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px; color: var(--metin); text-decoration: none !important; }
.sorgu-satir:hover, .sorgu-satir:focus-visible { background: var(--ton-acik); outline: none; }
.sorgu-govde { display: grid; gap: 2px; min-width: 0; }
.sorgu-ana { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sorgu-ana strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sorgu-govde small { font-size: 12.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sorgu-satir mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
.sorgu-tel { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.sorgu-tel-cip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--yaricap-k); background: var(--yuzey-2); font-size: 12.5px; font-weight: 650; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.sorgu-tel-cip .ikon { width: 12px; height: 12px; }
.sorgu-bakiye { display: grid; justify-items: end; min-width: 92px; font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.sorgu-bakiye small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3); }
.sorgu-bakiye.borclu { color: var(--kirmizi-metin); }
.sorgu-bakiye.alacakli { color: var(--yesil-metin); }
.sorgu-bakiye.sifir { color: var(--metin-3); }
.sorgu-no { padding: 1px 6px; border-radius: var(--yaricap-k); background: var(--yuzey-2); font-size: 12.5px; font-weight: 700; color: var(--metin-2); }
.sorgu-kaynak { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; grid-column: span 2; }
.sorgu-servis-no { font-size: 12.5px; color: var(--metin-3); font-variant-numeric: tabular-nums; }

.hatir-kart { display: grid; gap: 8px; }
.hatir-kart .kart-ust { margin-bottom: 4px; }
.hatir-baslik { display: flex; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ton-metin); }
.hatir-baslik-geciken { margin-top: 6px; color: var(--kirmizi-metin); }
.hatir-baslik-geciken .sayi-rozet { background: var(--kirmizi); }
.hatir-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hatir-bag { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--yaricap); box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); background: var(--ton-acik); color: var(--metin); text-decoration: none !important; }
.hatir-geciken .hatir-bag { --serit-renk: var(--kirmizi); background: var(--yuzey-2); }
.hatir-bag:hover { filter: brightness(.97); }
.hatir-zaman { font-size: 12.5px; font-weight: 750; color: var(--ton-metin); font-variant-numeric: tabular-nums; }
.hatir-geciken .hatir-zaman { color: var(--metin-2); }
.hatir-govde { display: grid; min-width: 0; }
.hatir-govde strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hatir-govde small { font-size: 12.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hatir-tumu { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ton-metin); }
.hatir-tumu .ikon { width: 14px; height: 14px; }
/* Temsilci panosu: Bugünkü hatırlatmalarım (bugün · bugün tekrar ara · günü geçmiş yan yana; dar ekranda alt alta) */
.temsilci-hatir { margin-bottom: 16px; }
.temsilci-hatir-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 16px; align-items: start; }
.temsilci-hatir-izgara > div { display: grid; gap: 6px; min-width: 0; }
.temsilci-hatir-izgara .hatir-baslik-geciken { margin-top: 0; }   /* yan yana sütunlarda başlıklar aynı hizada */

@media (max-width: 1100px) {
  .ana-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sorgu-turler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sorgu-satir { grid-template-columns: minmax(0, 1fr) auto; }
  .sorgu-tel { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .sorgu-kaynak { grid-column: 1 / -1; justify-content: flex-start; }
}
/* --------------------------------------------------------------------------
   Teknik servis ana sayfası (/) — Aşama 4B: sahada telefondan; iş kartı, tek dokunuşla arama ve yol tarifi
   -------------------------------------------------------------------------- */
.teknik-uyari { margin: 0; align-items: center; }
.teknik-uyari .dugme { flex: none; }
.teknik-izgara { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.teknik-izgara > * { min-width: 0; }
.teknik-yan { display: grid; gap: 16px; }
.teknik-isler { padding: 0; overflow: hidden; }
.teknik-sekmeler { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); overflow-x: auto; scrollbar-width: none; }
.teknik-sekmeler::-webkit-scrollbar { display: none; }
.teknik-sekme {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 38px; padding: 0 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey);
  color: var(--metin-2); font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.teknik-sekme .sayi-rozet { margin-left: 0; background: var(--ton-acik); color: var(--ton-metin); }
.teknik-sekme:hover { border-color: var(--ton); }
.teknik-sekme.aktif { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.teknik-sekme.aktif .sayi-rozet { background: rgba(255, 255, 255, .25); color: inherit; }
.teknik-sekme:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.teknik-panel { display: grid; gap: 10px; padding: 12px; }
.teknik-panel[hidden] { display: none; }
.teknik-ara-baslik { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mor-metin); }

.is-kart { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--serit-renk, var(--turuncu)); border-radius: var(--yaricap); background: var(--yuzey); }
.is-demo { --serit-renk: var(--mor); }
.is-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.is-tarih { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 750; color: var(--metin); font-variant-numeric: tabular-nums; }
.is-tarih .ikon { width: 15px; height: 15px; color: var(--metin-3); }
.is-no { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.is-unvan { font-size: 16px; font-weight: 800; color: var(--metin); }
.is-unvan small { font-size: 13px; font-weight: 600; color: var(--metin-3); }
.is-adres, .is-not { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: var(--metin-2); }
.is-adres .ikon, .is-not .ikon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--metin-3); }
.is-adres strong { color: var(--metin); white-space: nowrap; }
.is-not { padding: 8px 10px; border-radius: var(--yaricap); background: var(--amber-acik); color: var(--amber-metin); font-weight: 600; }
.is-not .ikon { color: inherit; }
.is-erteleme { background: var(--mor-acik); color: var(--mor-metin); }
.is-isler { display: flex; flex-wrap: wrap; gap: 5px; }
.is-isler span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--yaricap-k); background: var(--turuncu-acik); color: var(--turuncu-metin); font-size: 12.5px; font-weight: 700; }
.is-bilgi { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 13px; }
.is-bilgi:empty { display: none; }
.is-bilgi div { display: grid; }
.is-bilgi dt { font-size: 11.5px; font-weight: 700; color: var(--metin-3); }
.is-bilgi dd { margin: 0; font-weight: 650; color: var(--metin); }
.is-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.is-dugmeler .dugme { font-variant-numeric: tabular-nums; }

.teknik-sayac { font-size: 13px; }
.teknik-sayac th, .teknik-sayac td { padding: 7px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.teknik-sayac tbody th { text-align: left; font-weight: 650; color: var(--metin-2); background: none; }
.teknik-sayac thead th { background: var(--yuzey-2); }
.teknik-sayac-alt th { font-size: 11.5px; color: var(--metin-3); }
.teknik-sayac-toplam td, .teknik-sayac-toplam th { font-weight: 800; color: var(--metin) !important; }

@media (max-width: 1100px) {
  .teknik-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .teknik-uyari { flex-wrap: wrap; }
  .teknik-uyari > span { flex-basis: calc(100% - 30px); }
  .teknik-uyari .dugme { width: 100%; justify-content: center; }
  .is-dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
}
/* --------------------------------------------------------------------------
   Yeni müşteri / hızlı evrak kaydı (/musteri/yeni, /musteri/hizli) — Aşama 6B
   -------------------------------------------------------------------------- */
.ekle-son, .ekle-cakisan { margin: 0; align-items: center; }
.ekle-son .dugme { flex: none; }
.ekle-cakisan a { font-weight: 700; }
.telefon-uyari { margin-top: 0; color: var(--amber-metin); font-weight: 600; }
.telefon-uyari[hidden] { display: none; }

/* Sihirbaz: adım göstergesi (etkin indigo, biten yeşil, açılmamış gri) · alanlar 12 sütunlu ızgarada · sağda kayıt
   kartı · alt çubuk. Yerleşim formun genişliğine göre (container query): dar kapta kart gizlenir, alanlar alt alta. */
.sihirbaz { container: sihirbaz / inline-size; display: grid; gap: 0; padding: 0; }
.sihirbaz-adimlar { display: flex; gap: 0; margin: 0; padding: 14px 20px; list-style: none; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.sihirbaz-adim { position: relative; flex: 1 1 0; min-width: 0; }
.sihirbaz-adim + .sihirbaz-adim::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 2px; margin: 0 22px; background: var(--cizgi-koyu); }
.sihirbaz-adim.bitti + .sihirbaz-adim::before { background: var(--yesil); }
.sihirbaz-adim button { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0 4px; border: 0; background: none; font: inherit; color: var(--metin-3); cursor: pointer; }
.sihirbaz-adim button:disabled { cursor: default; }
.sihirbaz-no { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--cizgi-koyu); border-radius: 8px; background: var(--yuzey); font-weight: 800; font-variant-numeric: tabular-nums; }
.sihirbaz-ad { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sihirbaz-adim.etkin .sihirbaz-no { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.sihirbaz-adim.etkin .sihirbaz-ad { color: var(--indigo-metin); font-weight: 750; }
.sihirbaz-adim.bitti .sihirbaz-no { border-color: var(--yesil); background: var(--yesil-acik); color: var(--yesil-metin); }
.sihirbaz-adim.bitti .sihirbaz-ad { color: var(--metin-2); }
.sihirbaz-adim button:not(:disabled):hover .sihirbaz-no { border-color: var(--indigo); }
.sihirbaz-adim button:focus-visible { outline: none; }
.sihirbaz-adim button:focus-visible .sihirbaz-no { outline: 2px solid var(--indigo); outline-offset: 2px; }

.sihirbaz-govde { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.sihirbaz-ana { min-width: 0; }
.sihirbaz-panel { display: grid; align-content: start; gap: 14px; padding: 20px; }
.sihirbaz-panel + .sihirbaz-panel { border-top: 1px solid var(--cizgi); }
.sihirbaz-panel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; font-weight: 750; color: var(--metin); }
.sihirbaz-panel h3 small { font-size: 13px; font-weight: 500; }
.sihirbaz-grup { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-bottom: 8px; border-bottom: 2px solid var(--ton-acik); color: var(--ton-metin); font-size: 13px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.sihirbaz-grup .ikon { width: 16px; height: 16px; color: var(--ton); }

/* 12 sütun: s-3 dörtte bir, s-4 üçte bir, s-6 yarım, s-8 üçte iki, s-12 tam */
.sihirbaz-izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.sihirbaz-izgara > .s-3 { grid-column: span 3; }
.sihirbaz-izgara > .s-4 { grid-column: span 4; }
.sihirbaz-izgara > .s-6 { grid-column: span 6; }
.sihirbaz-izgara > .s-8 { grid-column: span 8; }
.sihirbaz-izgara > .s-12 { grid-column: 1 / -1; }
.sihirbaz-izgara .alan-ipucu { margin-top: -2px; }
.sihirbaz-izgara .secim-cipleri { flex-wrap: nowrap; }
.sihirbaz-izgara .secim-cip { flex: 1 1 0; }
.sihirbaz-izgara .secim-cip span { width: 100%; min-width: 0; height: 44px; }

.tip-kartlari .ulasim-kart { min-height: 96px; padding: 18px 20px; }
.tip-kartlari .simge-kutu { width: 48px; height: 48px; }

.cihaz-listesi-ekle { display: grid; gap: 12px; }
.cihaz-listesi-ekle:empty { display: none; }
.cihaz-satir { display: grid; gap: 12px; padding: 12px 16px 16px; border: 1px solid var(--cizgi-koyu); box-shadow: inset 3px 0 0 var(--serit-renk, var(--turuncu)); border-radius: var(--yaricap); background: var(--yuzey); }
.cihaz-satir header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.cihaz-satir header strong { display: inline-flex; align-items: center; gap: 8px; color: var(--turuncu-metin); }
.cihaz-satir [data-cihaz-cikar]:hover { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.cihaz-bos { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey-2); color: var(--metin-2); }
.cihaz-bos .simge-kutu { background: var(--ton-acik); color: var(--ton-metin); }
.sihirbaz-panel [data-cihaz-ekle-satir] { justify-self: start; }

.sihirbaz-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.sihirbaz-ozet > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cizgi); }
.sihirbaz-ozet dt { color: var(--metin-3); font-weight: 600; }
.sihirbaz-ozet dd { margin: 0; color: var(--metin); font-weight: 650; overflow-wrap: anywhere; white-space: pre-line; }

/* Kayıt kartı: yazdıkça dolar (tip rengi: bireysel indigo, kurumsal mor) */
.sihirbaz-yan { display: grid; gap: 12px; align-self: stretch; align-content: start; padding: 20px; border-left: 1px solid var(--cizgi); background: var(--yuzey-2); }
.kayit-karti { position: sticky; top: calc(var(--ust-y, 68px) + 16px); display: grid; gap: 4px; padding: 16px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.kayit-karti:has(.avatar.ton-mor) { border-top-color: var(--mor); }
.kayit-karti-ust { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cizgi); }
.kayit-karti-ust > div { display: grid; min-width: 0; }
.kayit-karti-ust strong { overflow: hidden; color: var(--metin); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.kayit-karti-ust small { overflow: hidden; color: var(--metin-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.kayit-karti .avatar { background: var(--ton); }
.kayit-karti dl { display: grid; margin: 0; }
.kayit-karti dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.kayit-karti dl > div + div { border-top: 1px solid var(--cizgi); }
.kayit-karti dt { display: inline-flex; align-items: center; gap: 6px; color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.kayit-karti dt .ikon { width: 14px; height: 14px; }
.kayit-karti dd { margin: 0; overflow: hidden; color: var(--metin); font-size: 13px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sihirbaz-ipucu { display: flex; gap: 8px; margin: 0; color: var(--metin-2); font-size: 12.5px; line-height: 1.5; }
.sihirbaz-ipucu .ikon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--teal); }

.sihirbaz-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--cizgi); background: var(--yuzey-2); }
.sihirbaz-durum { margin-right: auto; color: var(--metin-3); font-weight: 700; font-variant-numeric: tabular-nums; }

@container sihirbaz (max-width: 1080px) {
  .sihirbaz-govde { grid-template-columns: minmax(0, 1fr); }
  .sihirbaz-yan { display: none; }
}
@container sihirbaz (max-width: 760px) {
  .sihirbaz-izgara > .s-3, .sihirbaz-izgara > .s-4 { grid-column: span 6; }
  .sihirbaz-izgara > .s-6, .sihirbaz-izgara > .s-8 { grid-column: 1 / -1; }
  .sihirbaz-ozet { grid-template-columns: 1fr; }
}
@container sihirbaz (max-width: 520px) {
  .sihirbaz-izgara > [class*="s-"] { grid-column: 1 / -1; }
  .sihirbaz-ozet > div { grid-template-columns: 110px minmax(0, 1fr); }
  .sihirbaz-adimlar { padding: 12px 6px; }
  .sihirbaz-adim:not(.etkin) .sihirbaz-ad { visibility: hidden; }
  .sihirbaz-panel { padding: 16px; }
  .sihirbaz-alt { padding: 12px 16px; }
  .sihirbaz-alt [data-kaydet], .sihirbaz-alt [data-sihirbaz-ileri] { flex: 1 1 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
   Cihaz çizimleri (public/assets/img/cihaz/*.svg, CihazModeli) — sihirbaz cihaz kartı, resimli model seçici,
   kayıt kartı, Cihazlar sekmesi, cihaz ekle / düzenle penceresi. Cihaz rengi turuncu (servis).
   -------------------------------------------------------------------------- */
.cihaz-satir-govde { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 16px; align-items: start; }
.cihaz-gorsel { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey-2); font: inherit; color: var(--metin-3); text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.cihaz-gorsel:hover, .cihaz-gorsel:focus-visible { border-color: var(--turuncu); background: var(--turuncu-acik); outline: none; }
.cihaz-gorsel img { width: 120px; height: 120px; opacity: .4; }
.cihaz-gorsel strong { color: var(--metin); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.cihaz-gorsel small { display: inline-flex; align-items: center; gap: 4px; color: var(--turuncu-metin); font-size: 12px; font-weight: 650; }
.cihaz-gorsel small .ikon { width: 14px; height: 14px; }
.cihaz-satir.model-secili .cihaz-gorsel { border-style: solid; border-color: var(--cizgi); background: var(--yuzey); }
.cihaz-satir.model-secili .cihaz-gorsel:hover { border-color: var(--turuncu); }
.cihaz-satir.model-secili .cihaz-gorsel img { opacity: 1; }

.model-secici { width: min(980px, calc(100vw - 32px)); }
.model-secici .modal-govde { display: grid; gap: 18px; max-height: min(72vh, 680px); overflow-y: auto; }
.model-grup h4 { margin: 0 0 8px; color: var(--metin-3); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.model-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.model-kart { display: grid; justify-items: center; gap: 6px; padding: 10px 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); font: inherit; color: var(--metin); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.model-kart img { width: 96px; height: 96px; }
.model-kart:hover, .model-kart:focus-visible { border-color: var(--turuncu); background: var(--turuncu-acik); outline: none; }
.model-kart.secili { border-color: var(--turuncu); background: var(--turuncu-acik); box-shadow: inset 0 0 0 1px var(--turuncu); }

.kk-cihazlar { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.kk-cihazlar:empty { display: none; }
.kk-cihazlar img { width: 52px; height: 52px; padding: 2px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); }

/* Cihazlar sekmesi: çizim kartın solunda */
.cihaz-kartlar { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.cihaz-kart { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
.cihaz-kart-cizim { display: grid; place-items: center; align-self: start; margin: 0; padding: 4px; border-radius: var(--yaricap); background: var(--yuzey-2); }
.cihaz-kart-cizim img { width: 88px; height: 88px; }
.cihaz-kart-icerik { display: grid; align-content: start; gap: 10px; min-width: 0; }
.cihaz-kart .cihaz-kart-alt { grid-column: 1 / -1; }

/* Cihaz ekle / düzenle penceresi: solda seçilen modelin çizimi */
.cihaz-modal-govde { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.cihaz-onizleme { display: grid; justify-items: center; gap: 6px; margin: 0; padding: 10px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); text-align: center; }
.cihaz-onizleme img { width: 124px; height: 124px; }
.cihaz-onizleme figcaption { color: var(--metin); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

@container sihirbaz (max-width: 760px) {
  .cihaz-satir-govde { grid-template-columns: 1fr; }
  .cihaz-gorsel { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; text-align: left; }
  .cihaz-gorsel img { grid-row: span 2; width: 68px; height: 68px; }
}
@media (max-width: 760px) {
  .cihaz-modal-govde { grid-template-columns: 1fr; }
  .cihaz-onizleme { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .cihaz-onizleme img { width: 64px; height: 64px; }
  .cihaz-kart { grid-template-columns: 72px minmax(0, 1fr); }
  .cihaz-kart-cizim img { width: 64px; height: 64px; }
  .model-izgara { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .model-kart img { width: 72px; height: 72px; }
}
/* --------------------------------------------------------------------------
   Yönetim: çağrı ekibi ve sorunlu müşteri listeleri — Aşama 4G
   Görev renkleri: giden arama mavi · sorunlu arama kırmızı · memnuniyet teal; ekip sayfası mor.
   -------------------------------------------------------------------------- */
.ajax-sayfa { display: contents; }
.ajax-sayfa[aria-busy="true"] > * { opacity: .6; }
.gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sayi-rozet { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: var(--yaricap-k); background: var(--ton); color: var(--ton-yazi); font-size: 12.5px; font-weight: 800; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.ekip-uyari { margin: 0; }

.ekip-grup { display: grid; gap: 12px; }
.ekip-grup-baslik { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ton); }
.ekip-grup-baslik h3 { font-size: 17px; font-weight: 800; color: var(--metin); }
.ekip-grup-baslik p { margin-top: 2px; font-size: 13px; color: var(--metin-3); }
.ekip-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; }

.uye-kart { display: grid; gap: 14px; padding: 16px; scroll-margin-top: 90px; }
.uye-kart:target { outline: 2px solid var(--ton); outline-offset: 2px; }
.uye-ust { display: flex; align-items: center; gap: 12px; }
.uye-ust .avatar { background: var(--ton); }
.uye-kimlik { display: grid; flex: 1; min-width: 0; }
.uye-kimlik strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uye-kimlik small { font-size: 12.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uye-etiket { font-size: 12px; font-weight: 700; color: var(--metin-2); text-transform: uppercase; letter-spacing: .04em; }

.uye-gorev { display: grid; gap: 6px; }
.gorev-secim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gorev-secim button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 38px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
.gorev-secim button .ikon { width: 16px; height: 16px; flex: none; }
.gorev-secim button.aktif, .gorev-secim button.aktif:hover { background: var(--ton); color: var(--ton-yazi); cursor: default; }
.gorev-secim button:not(.aktif):hover { background: var(--ton-acik); color: var(--ton-metin); }
.gorev-secim button:focus-visible { outline: 2px solid var(--ton); outline-offset: -2px; }

.uye-sayilar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.uye-sayilar > div { display: grid; gap: 1px; min-width: 96px; padding: 8px 10px; border-radius: var(--yaricap); background: var(--yuzey-2); }
.uye-sayilar dt { font-size: 12px; color: var(--metin-3); font-weight: 600; }
.uye-sayilar dd { margin: 0; font-size: 17px; font-weight: 800; color: var(--metin); font-variant-numeric: tabular-nums; }
.uye-sayilar .uye-acik { flex: 1; min-width: 140px; }
.uye-sayilar .uye-acik dd { font-size: 13.5px; font-weight: 650; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.uye-bolgeler { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--cizgi-koyu); }
.bolge-yok { margin: 0; padding: 8px 12px; font-size: 13px; }
.bolge-cipleri { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bolge-cip { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding-left: 10px; border: 1px solid var(--kirmizi); border-radius: var(--yaricap); background: var(--kirmizi-acik); color: var(--kirmizi-metin); font-size: 13px; font-weight: 700; }
.bolge-cip small { font-weight: 600; opacity: .85; }
.bolge-cip form { display: contents; }
.bolge-sil { display: grid; place-items: center; width: 28px; height: 30px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--yaricap-k); }
.bolge-sil .ikon { width: 14px; height: 14px; }
.bolge-sil:hover { background: var(--kirmizi); color: #fff; }
.bolge-ekle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
.bolge-ekle .girdi { height: 38px; padding: 0 10px; }
.bolge-ekle .dugme { height: 38px; }

/* Sorunlu listeleri: süzgeç, toplu işlem çubuğu, tablo */
.liste-suzgec { display: flex; flex-wrap: wrap; gap: 8px; }
.liste-suzgec .suzgec-cip { height: 34px; text-decoration: none; color: var(--metin-2); }
.liste-suzgec .suzgec-cip strong { font-variant-numeric: tabular-nums; color: var(--metin); }
.liste-suzgec .suzgec-cip.aktif strong { color: inherit; }
.liste-kart { padding: 0; overflow: hidden; }
.liste-kart > .bos-kutu { margin: 16px; }
.liste-kart .tablo-kap { border: 0; border-radius: 0; }
.toplu-cubuk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.toplu-sayi { font-size: 13px; font-weight: 600; color: var(--metin-3); }
.toplu-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sorunlu-tablo td { vertical-align: top; font-size: 13.5px; }
.sorunlu-tablo th { white-space: nowrap; }
.sorunlu-tablo .sec-kolon { width: 40px; padding-right: 0; }
.sorunlu-tablo .sec-kolon input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marka); }
.sorunlu-tablo tbody tr:hover { background: var(--yuzey-2); }
.sorunlu-tablo tr.secili-satir { background: var(--marka-acik); }
.sorunlu-tablo tr.kilitli-satir { background: var(--yuzey-2); }
.musteri-bag { font-weight: 700; color: var(--metin); }
.musteri-bag:hover { color: var(--marka); }
.hucre-alt { display: block; margin-top: 3px; font-size: 12px; color: var(--metin-3); }
.kilit-not { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-metin); font-weight: 600; }
.kilit-not .ikon { width: 13px; height: 13px; }
.tel-hucre { white-space: nowrap; font-variant-numeric: tabular-nums; }
.not-hucre { min-width: 220px; max-width: 360px; color: var(--metin-2); }
.islem-hucre { white-space: nowrap; }
.islem-hucre .dugme + .dugme { margin-left: 6px; }
.islem-hucre .dugme { vertical-align: middle; } /* simgeli ve simgesiz düğme yan yana kaymasın */
.liste-alt { padding: 10px 14px; border-top: 1px solid var(--cizgi); font-size: 13px; }

@media (max-width: 760px) {
  .gorev-secim { grid-template-columns: 1fr; }
  .bolge-ekle { grid-template-columns: 1fr; }
  .toplu-dugmeler { margin-left: 0; }
}
/* --------------------------------------------------------------------------
   Arama sonuç kuralları (/yonetim/ayarlar/sonuc-kurallari): olmalı yeşil · olmamalı kırmızı · fark etmez gri
   -------------------------------------------------------------------------- */
.kural-uyari { margin: 0; }
.kural-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.kural-ana { display: grid; gap: 16px; min-width: 0; }
.kural-kart .kart-ust { margin-bottom: 12px; }
.kural-kart .kart-ust p strong { color: var(--metin-2); }
.kural-lejant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; font-size: 12.5px; color: var(--metin-3); }
.kural-lejant > span:not(.kural-ornek) { margin-right: 8px; }
.kural-ornek { display: inline-grid; place-items: center; width: 28px; height: 24px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap-k); background: var(--yuzey); font-weight: 700; color: var(--metin-3); }
.kural-ornek .ikon { width: 14px; height: 14px; }
.kural-ornek[data-deger="gerekli"] { border-color: var(--yesil); background: var(--yesil); color: #fff; }
.kural-ornek[data-deger="engel"] { border-color: var(--kirmizi); background: var(--kirmizi); color: #fff; }

.kural-tablo { font-size: 13px; }
.kural-tablo th, .kural-tablo td { padding: 6px 4px; }
.kural-tablo thead th { position: sticky; top: 0; z-index: 1; vertical-align: bottom; }
.kural-olgu-kolon { width: 60px; min-width: 60px; text-align: center !important; font-size: 11.5px; line-height: 1.2; cursor: help; }
.kural-olgu-kolon .ikon { display: block; width: 16px; height: 16px; margin: 0 auto 4px; color: var(--metin-3); }
.kural-sonuc { min-width: 150px; padding-left: 8px !important; text-align: left !important; font-weight: 650; color: var(--metin); white-space: nowrap; }
.kural-sonuc small { font-weight: 600; }
tbody .kural-sonuc { box-shadow: inset 3px 0 0 var(--serit-renk, var(--ton)); }
.kural-grup th { padding: 8px 10px; background: var(--ton-acik); color: var(--ton-metin); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kural-bag-kolon { width: 72px; min-width: 72px; }
.kural-bag[data-gizli] { visibility: hidden; }
.kural-ana > * { min-width: 0; }
.kural-hucre { text-align: center; }
.kural-dugme { display: inline-grid; place-items: center; width: 40px; height: 30px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap-k); background: var(--yuzey); color: var(--metin-3); font-weight: 700; cursor: pointer; }
.kural-dugme:hover { border-color: var(--metin-3); }
.kural-dugme:focus-visible { outline: 2px solid var(--marka); outline-offset: 1px; }
.kural-dugme .ikon { width: 16px; height: 16px; }
.kural-dugme > span { display: none; }
.kural-hucre:not([data-deger="gerekli"]):not([data-deger="engel"]) .kd-bos, .kural-hucre[data-deger="gerekli"] .kd-gerekli, .kural-hucre[data-deger="engel"] .kd-engel { display: inline-grid; }
.kural-hucre[data-deger="gerekli"] .kural-dugme { border-color: var(--yesil); background: var(--yesil); color: #fff; }
.kural-hucre[data-deger="engel"] .kural-dugme { border-color: var(--kirmizi); background: var(--kirmizi); color: #fff; }
.kural-sec { width: 100%; min-width: 64px; height: 30px; padding: 0 4px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap-k); background: var(--yuzey); color: var(--metin-3); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.kural-sec:focus-visible { outline: 2px solid var(--marka); outline-offset: 1px; }
.kural-bag { color: var(--metin-2); }
.kural-tablo tbody tr[data-kural-satir]:hover { background: var(--yuzey-2); }

.kural-sure { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.kural-sure .onay-kutusu { gap: 8px; }
.kural-ay { width: 76px; height: 36px; padding: 0 10px; }
.kural-tanim summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--marka); }
.kural-tanim[open] summary { margin-bottom: 12px; }
.kural-tanimlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.kural-tanimlar dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--metin); }
.kural-tanimlar dt .ikon { width: 15px; height: 15px; color: var(--metin-3); }
.kural-tanimlar dd { margin: 2px 0 0 21px; font-size: 13px; color: var(--metin-3); }

.kural-deneme { position: sticky; top: 84px; display: grid; gap: 12px; }
.kural-deneme .kart-ust { margin-bottom: 0; }
.deneme-olgular { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--cizgi-koyu); font-size: 13.5px; }
.deneme-sonuc { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.deneme-sonuc .uyari { margin: 0; font-size: 13px; }
.deneme-baslik { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-2); }
.deneme-cipler { display: flex; flex-wrap: wrap; gap: 5px; }
.deneme-cip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: var(--yaricap-k); background: var(--ton-acik); color: var(--ton-metin); font-size: 12.5px; font-weight: 700; }
.deneme-kilitli { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.deneme-kilitli li { display: grid; padding: 5px 8px; border-radius: var(--yaricap-k); background: var(--yuzey-2); }
.deneme-kilitli strong { color: var(--metin-2); }
.deneme-kilitli small { color: var(--metin-3); }
.kural-kaydet { padding-top: 12px; border-top: 1px solid var(--cizgi); }

@media (max-width: 1280px) {
  .kural-duzen { grid-template-columns: 1fr; }
  .kural-deneme { position: static; }
}
@media (max-width: 760px) {
  .kural-tanimlar { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   Tasarım rehberi (/tasarim)
   -------------------------------------------------------------------------- */
.rehber-bolum h3 { font-size: 16px; margin-bottom: 4px; }
.rehber-bolum > p { color: var(--metin-3); font-size: 13px; margin-bottom: 14px; }
.renk-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.renk-ornek { display: grid; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; font-size: 12.5px; }
.renk-ornek-dolgu { display: flex; align-items: flex-end; height: 64px; padding: 8px 10px; background: var(--ton); color: var(--ton-yazi); font-weight: 700; }
.renk-ornek-acik { padding: 6px 10px; background: var(--ton-acik); color: var(--ton-metin); font-weight: 600; }
.renk-ornek-is { padding: 6px 10px; color: var(--metin-2); }
.ornek-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ornek-satir + .ornek-satir { margin-top: 12px; }
.tablo + .ornek-satir { margin-top: 18px; }
.tablo-renk td:first-child { width: 36px; }
.tablo-renk .renk-nokta { display: block; width: 18px; height: 18px; border-radius: var(--yaricap-k); background: var(--ton); }

/* --------------------------------------------------------------------------
   Duyarlı
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .izgara-3 { grid-template-columns: 1fr 1fr; }
  .calisma-ust .kullanici-dugme-metin { display: none; }
}
@media (max-width: 960px) {
  .giris-duzen { grid-template-columns: 1fr; }
  .giris-marka { display: none; }

  .uyg { grid-template-columns: 1fr; grid-template-areas: "ust" "ana"; }
  .kenar { position: fixed; left: 0; top: 0; z-index: 60; width: 270px; height: 100vh; transform: translateX(-100%); transition: transform .2s; }
  .ust-logo { width: auto; padding: 0 4px; border-right: 0; }
  .ust-logo img { height: 32px; }
  body.menu-acik .kenar { transform: none; }
  body.menu-acik .kenar-perde { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .4); }
  .ust-menu-dugme { display: inline-grid; }
  .ust { padding: 0 16px 0 8px; gap: 10px; }
  .icerik { padding: 16px; }
  .ust-saat, .kullanici-dugme-metin { display: none; }
}
@media (max-width: 760px) {
  /* Telefonda şerit alta yatay çubuk olur */
  .serit { top: auto; right: 0; width: auto; height: 64px; flex-direction: row; justify-content: space-around; padding: 0 8px; }
  .serit-monogram, .serit-ayrac { display: none; }
  .serit-ogeler { flex-direction: row; gap: 4px; padding-block: 0; }
  .serit [data-ipucu]:hover::after { display: none; }
  .calisma-govde { margin-left: 0; padding-bottom: 64px; }
  .calisma-ust { padding: 0 12px; gap: 8px; }
  .calisma-ust .dugme span { display: none; }
  .calisma-icerik { padding: 16px; }
  .izgara-2 { grid-template-columns: 1fr; }
  .ust-baslik { display: none; }
  .ust-ara { flex: 1; min-width: 0; }
  .zil-panel { width: min(360px, calc(100vw - 32px)); }
  .toast-alani { top: 76px; right: 16px; }
}
@media (max-width: 520px) {
  /* Arama kutusu olan üst barda logo telefonda gizlenir: 390 px'de aramaya ~46 px kalıyor, kutu zil düğmesinin altına giriyordu */
  .ust:has(.ust-ara) .ust-logo { display: none; }
}
@media (max-width: 640px) {
  .izgara-3 { grid-template-columns: 1fr; }
  .kilit-durum { flex-direction: column; align-items: flex-start; }
  .karsilama { padding: 18px; }
  .kullanici-karti-kaldir { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* --------------------------------------------------------------------------
   Sayfalama (partials/sayfalama) — liste altında; bağlantılar sayfa yenilenmeden
   -------------------------------------------------------------------------- */
.sayfalama { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 0; }
.sayfalama-bilgi { color: var(--metin-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.sayfalama-bilgi strong { color: var(--metin); }
.sayfalama-dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sayfa-dugme { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); color: var(--metin-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.sayfa-dugme .ikon { width: 16px; height: 16px; }
a.sayfa-dugme:hover { border-color: var(--marka); color: var(--marka); }
.sayfa-dugme.etkin { border-color: var(--marka); background: var(--marka); color: #fff; }
.sayfa-dugme.pasif { opacity: .4; }
.sayfa-ara { padding: 0 4px; color: var(--metin-3); }
[data-liste-sonuc][aria-busy="true"] > * { opacity: .55; transition: opacity .15s; }
/* --------------------------------------------------------------------------
   Müşteri listeleri (/musteriler, Aşama 8) — görünüm çipleri, süzgeçler, tablo (telefonda kart)
   -------------------------------------------------------------------------- */
/* Süzgeç formu — .liste-suzgec (4G sorunlu listesinin çip satırı) ayrı sınıf; aynı ad o sayfayı bozuyordu */
.liste-suzgec-form { display: grid; gap: 14px; }
.gorunum-cipleri { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.gorunum-cip { position: relative; cursor: pointer; }
.gorunum-cip input { position: absolute; opacity: 0; pointer-events: none; }
.gorunum-cip span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); color: var(--metin-2); font-weight: 700; }
.gorunum-cip span .ikon { width: 17px; height: 17px; color: var(--ton); }
.gorunum-cip:hover span { border-color: var(--ton); }
.gorunum-cip input:checked + span { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.gorunum-cip input:checked + span .ikon { color: inherit; }
.gorunum-cip input:focus-visible + span { outline: 2px solid var(--ton); outline-offset: 2px; }
/* Süzgeç satırı ekran genişliğini sağdan sola doldurur (kullanıcı, 19.10.2026): alanlar büyüyerek satırı kaplar, sığmayan
   alt satıra geçer; arama ve tür alanı iki kat; Temizle sağa yaslı */
.suzgec-izgara { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.suzgec-izgara > * { flex: 1 1 170px; min-width: 0; }
.suzgec-izgara > .suzgec-ara, .suzgec-izgara > .suzgec-tip { flex: 2 1 340px; }
.suzgec-izgara > .suzgec-dar { flex: 0 1 110px; }
.suzgec-izgara > .suzgec-eylem { flex: 0 0 auto; margin-left: auto; }
.suzgec-tip .secim-cip { flex: 1 1 0; }
.suzgec-tip .secim-cip span { width: 100%; }
.suzgec-izgara .alan { gap: 5px; }
.suzgec-izgara .alan > label, .suzgec-izgara .alan-baslik { font-size: 12.5px; color: var(--metin-2); }
.suzgec-izgara .girdi { height: 40px; }
.suzgec-izgara .secim-cip span { min-width: 0; min-height: 40px; padding: 0 10px; font-size: 13px; }
.suzgec-izgara .secim-cipleri { flex-wrap: nowrap; gap: 4px; }
.suzgec-eylem { display: flex; justify-content: flex-end; }
.suzgec-eylem .dugme { height: 40px; }

.liste-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--metin-2); }
.liste-ozet strong { color: var(--metin); font-size: 16px; font-variant-numeric: tabular-nums; }
.musteri-tablo td { vertical-align: top; font-size: 13.5px; }
.musteri-tablo th { white-space: nowrap; }
.musteri-tablo tbody tr:hover { background: var(--yuzey-2); }
.musteri-tablo td small { display: block; margin-top: 3px; font-size: 12px; }
.musteri-tablo .sag { text-align: right; }
.musteri-ad { color: var(--metin); font-weight: 750; text-decoration: none; }
.musteri-ad:hover { color: var(--marka); }
.musteri-rozetler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.musteri-rozetler:empty { display: none; }
.musteri-rozetler .rozet { height: 20px; padding: 0 6px; font-size: 11.5px; }
.musteri-tel a { color: var(--metin); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; }
.musteri-tel a:hover { color: var(--marka); }
.musteri-tablo .musteri-tel small { display: inline; margin-left: 4px; }
.liste-cihazlar { display: inline-flex; align-items: center; gap: 2px; }
.liste-cihazlar img { width: 30px; height: 30px; }
.liste-cihazlar strong { margin-left: 4px; font-variant-numeric: tabular-nums; }
.satir-pasif td { color: var(--metin-3); }
.satir-pasif .musteri-ad { color: var(--metin-2); }
.tutar-borc { color: var(--kirmizi-metin); font-weight: 750; font-variant-numeric: tabular-nums; }
.tutar-alacak { color: var(--yesil-metin); font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .suzgec-izgara > .suzgec-ara, .suzgec-izgara > .suzgec-tip { flex-basis: 100%; }
  .suzgec-izgara > * { flex-basis: 140px; }
  .musteri-tablo thead { display: none; }
  .musteri-tablo, .musteri-tablo tbody, .musteri-tablo tr, .musteri-tablo td { display: block; width: 100%; }
  .musteri-tablo tr { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
  .musteri-tablo td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; border: 0; text-align: left; }
  .musteri-tablo td::before { content: attr(data-etiket); flex: 0 0 100px; color: var(--metin-3); font-size: 12px; font-weight: 700; }
  .musteri-tablo td small { display: inline; margin-top: 0; }
  .musteri-tablo td:first-child { display: block; padding-bottom: 6px; }
  .musteri-tablo td:first-child::before { content: none; }
  .musteri-tablo .sag { text-align: left; }
}
[data-liste-sayi].sayiliyor { color: var(--metin-3); }
[data-liste-sayi].sayiliyor::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 2px solid var(--cizgi-koyu); border-top-color: var(--marka); border-radius: 8px; vertical-align: 1px; animation: dondur .8s linear infinite; }
.liste-sinir-notu { margin: 4px 0 0; }
@keyframes dondur { to { transform: rotate(360deg); } }
/* --------------------------------------------------------------------------
   Servis listeleri (/servisler, Aşama 7A) — müşteri listesi stilleri + seçim, cihaz, iş çipleri, toplu atama çubuğu
   -------------------------------------------------------------------------- */
.servis-tablo .sec-kolon { width: 40px; padding-right: 0; }
.servis-tablo .sec-kolon input, .servis-tablo th.sec-kolon input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marka); }
.servis-tablo tr.secili-satir { background: var(--marka-acik); }
.servis-cihaz { display: inline-flex; align-items: flex-start; gap: 6px; }
.servis-cihaz img { flex: none; width: 34px; height: 34px; }
.servis-cihaz small { display: block; }
.servis-isler { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.is-cip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--yaricap-k); background: var(--turuncu-acik); color: var(--turuncu-metin); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.is-cip.soluk { background: var(--gri-acik); color: var(--gri-metin); }
.toplu-ata { position: sticky; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--marka); border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge-yuzen); }
.toplu-ata strong { color: var(--marka-koyu); font-variant-numeric: tabular-nums; }
.toplu-ata select.girdi { width: auto; min-width: 220px; height: 40px; }
.toplu-ata .onay-kutusu { font-size: 13px; }
@media (max-width: 760px) {
  .toplu-ata select.girdi { flex: 1 1 100%; }
  .toplu-ata .dugme { flex: 1 1 auto; justify-content: center; }
}
/* --------------------------------------------------------------------------
   Servis ayrıntısı (/servis/{no}, Aşama 7B) — solda bilgiler, sağda düzenleme ve işlemler
   -------------------------------------------------------------------------- */
.sayfa-baslik-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.servis-baslik-durum { margin-left: 8px; vertical-align: 4px; font-size: 13px; letter-spacing: 0; }
.servis-kutucuk .kutucuk { min-height: 92px; }
.servis-kutucuk .kutucuk-deger { font-size: 21px; }
.servis-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.sk-ana, .servis-yan { display: grid; gap: 16px; min-width: 0; }
.servis-yan { position: sticky; top: calc(var(--ust-y, 68px) + 16px); }
.sk-ana h3, .servis-yan h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 750; color: var(--metin); }
.sk-ana h3 .ikon, .servis-yan h3 .ikon { width: 18px; height: 18px; color: var(--turuncu); }
.servis-kim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.servis-musteri { display: grid; align-content: start; gap: 4px; }
.servis-musteri p { margin: 4px 0 0; color: var(--metin-2); font-size: 13.5px; }
.servis-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--metin); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.servis-tel .ikon { width: 15px; height: 15px; color: var(--mavi); }
.servis-cihaz-kart { display: flex; gap: 14px; align-items: flex-start; padding-left: 20px; border-left: 1px solid var(--cizgi); }
.servis-cihaz-kart img { flex: none; width: 120px; height: 120px; padding: 4px; border-radius: var(--yaricap); background: var(--yuzey-2); }
.servis-cihaz-kart > div { display: grid; gap: 3px; }
.servis-cihaz-kart small { color: var(--metin-3); font-size: 12.5px; }
.servis-bolum .servis-isler { max-width: none; }
.servis-not { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--yaricap); background: var(--yuzey-2); color: var(--metin); font-size: 13.5px; white-space: pre-line; }
.servis-not.ton-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.is-cip.is-yapildi { background: var(--yesil-acik); color: var(--yesil-metin); }
.servis-fotolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.servis-fotolar figure { position: relative; margin: 0; }
.servis-fotolar img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); }
.servis-fotolar form { position: absolute; top: 4px; right: 4px; }
.servis-fotolar .dugme-ikon { background: rgba(255, 255, 255, .92); }
.foto-yukle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.foto-yukle label.dugme { cursor: pointer; }
.servis-gecmis { display: grid; margin: 0; padding: 0; list-style: none; }
.servis-gecmis li { display: grid; grid-template-columns: 70px 90px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--cizgi); font-size: 13px; }
.servis-gecmis li:first-child { border-top: 0; }
.servis-gecmis a { font-weight: 750; }
.servis-duzen { gap: 12px; }
.servis-duzen .alan-ipucu { margin-top: 0; }
.servis-iki { grid-template-columns: 1fr 1fr; }
.servis-katla { border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 8px 12px; }
.servis-katla summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--metin-2); }
.servis-katla[open] summary { margin-bottom: 10px; }
.servis-katla .alan { margin-top: 10px; }
.servis-kutular { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.servis-kutular .onay-kutusu { font-size: 13px; }
.servis-islemler { display: grid; gap: 8px; }
.servis-islemler form .dugme { width: 100%; justify-content: center; }
.servis-meta { display: grid; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--cizgi); }
.servis-meta > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.servis-meta dt { color: var(--metin-3); }
.servis-meta dd { margin: 0; text-align: right; color: var(--metin); font-weight: 600; }
@media (max-width: 1180px) {
  .servis-izgara { grid-template-columns: 1fr; }
  .servis-yan { position: static; }
}
@media (max-width: 760px) {
  .servis-kim { grid-template-columns: 1fr; }
  .servis-cihaz-kart { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--cizgi); }
  .servis-gecmis li { grid-template-columns: 60px 1fr auto; }
  .servis-gecmis li > :nth-child(n+4) { display: none; }
  .servis-kutular { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   Teknisyenin servis ekranı (/teknik/servis/{no}, Aşama 7C) — telefon öncelikli, büyük dokunma alanları
   -------------------------------------------------------------------------- */
.tk-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.tk-sol, .tk-sag { display: grid; gap: 16px; min-width: 0; }
.tk-izgara h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 750; }
.tk-izgara h3 .ikon { width: 18px; height: 18px; color: var(--teal); }
.tk-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-dugmeler .dugme { flex: 1 1 auto; justify-content: center; min-height: 46px; }
.tk-adres { display: flex; gap: 8px; margin: 12px 0 0; color: var(--metin-2); }
.tk-adres .ikon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--teal); }
.tk-cihaz { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.tk-cihaz img { flex: none; width: 88px; height: 88px; padding: 2px; border-radius: var(--yaricap); background: var(--yuzey-2); }
.tk-cihaz > div { display: grid; gap: 2px; }
.tk-cihaz small { color: var(--metin-3); }
.tk-ucret { margin: 10px 0 0; }
.tk-form { gap: 14px; }
.tk-isler { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-isler .secim-cip span, .tk-odeme .secim-cip span { min-height: 44px; }
.tk-isler .secim-cip input:checked + span { border-color: var(--yesil); background: var(--yesil); color: #fff; }
.tk-odeme .secim-cip { flex: 1 1 0; }
.tk-odeme .secim-cip span { width: 100%; }
.tk-buyuk { height: 48px; font-size: 17px; }
.tk-sonuclar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tk-sonuc { position: relative; cursor: pointer; }
.tk-sonuc input { position: absolute; opacity: 0; pointer-events: none; }
.tk-sonuc span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 10px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); font-weight: 700; text-align: center; }
.tk-sonuc input:checked + span { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.tk-sonuc input:focus-visible + span { outline: 2px solid var(--ton); outline-offset: 2px; }
.tk-kaydet { min-height: 50px; justify-content: center; font-size: 16px; }
.tk-buyuk-dugme { min-height: 46px; cursor: pointer; }
@media (max-width: 900px) {
  .tk-izgara { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   Duvar ekranı (/duvar/{anahtar}, Aşama 12A) — sinevizyon / TV: koyu, yüksek karşıtlık, uzaktan okunur.
   Yazılar ekrana sığacak şekilde ölçeklenir (--duvar-olcek, duvar.js).
   -------------------------------------------------------------------------- */
.duvar-govde { margin: 0; background: #0b1220; color: #e7eef8; font-family: var(--yazi); overflow: hidden; }
.duvar { --duvar-olcek: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; padding: 1.6vh 2vw; gap: 1.4vh; box-sizing: border-box; }
.duvar-ust { display: flex; align-items: center; justify-content: space-between; gap: 2vw; padding-bottom: 1.2vh; border-bottom: 1px solid #22304a; }
.duvar-baslik { display: flex; align-items: center; gap: 1.4vw; }
.duvar-baslik img { height: 4.2vh; width: auto; padding: .6vh .8vw; border-radius: 6px; background: #fff; }
.duvar-baslik h1 { margin: 0; font-size: 3.6vh; font-weight: 800; letter-spacing: -.02em; }
.duvar-baslik p { margin: .2vh 0 0; color: #94a7c3; font-size: 2vh; font-weight: 600; }
.duvar-saat { display: grid; justify-items: end; }
.duvar-saat strong { font-size: 5.4vh; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.duvar-saat small { margin-top: .6vh; color: #94a7c3; font-size: 1.6vh; }
.duvar-canli { color: #34d399; font-weight: 800; }
.duvar-canli::before { content: ""; display: inline-block; width: 1vh; height: 1vh; margin-right: .5vh; border-radius: 8px; background: currentColor; animation: duvar-nabiz 2s ease-in-out infinite; }
.duvar-canli.kopuk { color: #f87171; }
.duvar-canli.kopuk::before { animation: none; }
@keyframes duvar-nabiz { 50% { opacity: .25; } }
.duvar-icerik { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(1.4vh * var(--duvar-olcek)); min-width: 0; min-height: 0; }
.duvar-toplamlar { display: grid; grid-template-columns: 1.4fr repeat(7, minmax(0, 1fr)); gap: .8vw; }
.duvar-toplam { display: grid; gap: .3vh; padding: calc(1.2vh * var(--duvar-olcek)) 1vw; border: 1px solid #22304a; border-radius: 8px; background: #111b2e; }
.duvar-toplam span { color: #94a7c3; font-size: max(13px, calc(1.9vh * var(--duvar-olcek))); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duvar-toplam strong { font-size: calc(4.4vh * var(--duvar-olcek)); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.duvar-toplam.ana { border-color: #2563eb; background: #12245a; }
.duvar-toplam.ana strong { color: #fff; }
.duvar-toplam.iptal strong { color: #fca5a5; }
.duvar-tablo { width: 100%; border-collapse: separate; border-spacing: 0 calc(.5vh * var(--duvar-olcek)); font-variant-numeric: tabular-nums; }
.duvar-tablo th { padding: 0 calc(.6vw * var(--duvar-olcek)) calc(.4vh * var(--duvar-olcek)); color: #94a7c3; font-size: max(13px, calc(1.8vh * var(--duvar-olcek))); font-weight: 800; text-align: center; white-space: nowrap; }
.duvar-tablo th.isim { text-align: left; }
.duvar-tablo td { padding: calc(.9vh * var(--duvar-olcek)) calc(.6vw * var(--duvar-olcek)); background: #111b2e; font-size: calc(2.9vh * var(--duvar-olcek)); font-weight: 800; text-align: center; transition: background .4s; }
.duvar-tablo td:first-child { border-radius: 8px 0 0 8px; }
.duvar-tablo td:last-child { border-radius: 0 8px 8px 0; }
.duvar-tablo td.isim { text-align: left; font-weight: 750; white-space: nowrap; }
.duvar-tablo td.sira { width: 4vw; }
.duvar-tablo td.iptal { color: #fca5a5; }
.duvar-tablo td.net { min-width: 6vw; font-size: calc(3.3vh * var(--duvar-olcek)); }
.duvar-tablo td.net.iyi { background: #15803d; color: #fff; }
.duvar-tablo td.net.orta { background: #c2410c; color: #fff; }
.duvar-tablo td.net.dusuk { background: #991b1b; color: #fff; }
.duvar-tablo td.artti { background: #1d4ed8; color: #fff; }
.duvar-avatar { display: inline-grid; place-items: center; width: calc(3.6vh * var(--duvar-olcek)); height: calc(3.6vh * var(--duvar-olcek)); margin-right: .8vw; border-radius: 8px; background: #22304a; color: #cfe0ff; font-size: calc(1.6vh * var(--duvar-olcek)); vertical-align: middle; }
.duvar-madalya { display: inline-grid; place-items: center; width: calc(3.6vh * var(--duvar-olcek)); height: calc(3.6vh * var(--duvar-olcek)); border-radius: 8px; background: #1b2740; color: #cbd5e1; font-size: calc(2vh * var(--duvar-olcek)); }
.duvar-madalya.m1 { background: #eab308; color: #1f1300; }
.duvar-madalya.m2 { background: #cbd5e1; color: #111827; }
.duvar-madalya.m3 { background: #d97706; color: #1f1300; }
.duvar-bos { margin: 0; padding: 6vh 2vw; border: 1px dashed #22304a; border-radius: 8px; color: #94a7c3; font-size: 3vh; font-weight: 700; text-align: center; }
.duvar-kolonlar { display: grid; gap: 1.6vw; align-items: start; min-width: 0; }
.duvar-kolonlar.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* İki sütun: başlıklar iki satıra inebilir, avatar gizli, uzun ad kısalır */
.duvar-kolonlar.iki .duvar-tablo th { white-space: normal; line-height: 1.1; vertical-align: bottom; }
.duvar-kolonlar.iki .duvar-avatar { display: none; }
.duvar-kolonlar.iki .duvar-tablo td.sira { width: 2.6vw; }
.duvar-kolonlar.iki .duvar-tablo td.net { min-width: 3.6vw; }
.duvar-kolonlar.iki .duvar-ad { display: inline-block; max-width: 14vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Alt alta (duvar.js, yazı daha büyük çıkıyorsa seçer: dar / 4:3 perde) */
.duvar-kolonlar.iki.alt-alta { grid-template-columns: minmax(0, 1fr); gap: calc(.8vh * var(--duvar-olcek)); }
.duvar-kolonlar.iki.alt-alta .duvar-avatar { display: inline-grid; }
.duvar-kolonlar.iki.alt-alta .duvar-ad { max-width: none; }
.duvar-bekleyen { display: flex; flex-wrap: wrap; align-items: center; gap: .6vh .6vw; padding-top: calc(1vh * var(--duvar-olcek)); border-top: 1px solid #22304a; }
.duvar-bekleyen h2 { display: inline-flex; align-items: center; gap: .5vw; margin: 0 .4vw 0 0; color: #94a7c3; font-size: max(12px, calc(1.9vh * var(--duvar-olcek))); font-weight: 800; }
.duvar-bekleyen h2 span { padding: .1vh .6vw; border-radius: 8px; background: #22304a; color: #e7eef8; }
.duvar-bekleyen ul { display: flex; flex-wrap: wrap; gap: .6vh .5vw; margin: 0; padding: 0; list-style: none; }
.duvar-bekleyen li { padding: calc(.4vh * var(--duvar-olcek)) .7vw; border: 1px solid #22304a; border-radius: 8px; background: #111b2e; color: #94a7c3; font-size: max(12px, calc(1.8vh * var(--duvar-olcek))); font-weight: 700; white-space: nowrap; }
.duvar-alt { margin: 0; color: #5b6b85; font-size: max(11px, calc(1.5vh * var(--duvar-olcek))); }
.duvar-tam { position: fixed; right: 1.4vw; bottom: 1.4vh; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #22304a; border-radius: 8px; background: #111b2e; color: #94a7c3; font: inherit; font-size: 13px; cursor: pointer; opacity: .6; }
.duvar-tam:hover { opacity: 1; }
.duvar.tam .duvar-tam { display: none; }
.duvar-tam .ikon { width: 16px; height: 16px; }
/* Yönetim › Duvar ekranı */
.duvar-ayar-izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.duvar-ayar { display: grid; gap: 12px; }
.duvar-ayar h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 750; }
.duvar-ayar p { margin: 0; color: var(--metin-2); }
.duvar-baglanti { display: flex; gap: 8px; }
.duvar-baglanti .girdi { font-family: Consolas, monospace; font-size: 12.5px; }
.duvar-ayar-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .duvar-ayar-izgara { grid-template-columns: 1fr; } }

/* ==========================================================================
   Canlı pano (yönetim ana sayfası, Aşama 12B) — "cp-" önekli (temsilci panosunun .pano-* sınıflarıyla çakışmasın)
   ========================================================================== */
/* Yalnız ekran okuyucu için (grafiklerin veri tablosu). Tablo 1px yüksekliğe uymaz; blok yapılmazsa görünmez tablo sayfanın
   altına taşar ve sayfayı uzatır (sayfa altında boşluk, kenar menünün bitmesi) — display: block şart */
.gorunmez { position: absolute !important; display: block; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sayfa-baslik-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.sayfa-baslik .baslik-bag { color: var(--ton-metin); font-weight: 700; }
.sayfa-baslik .baslik-bag:hover { color: var(--ton); }
.pano-canli { font-weight: 800; }
.pano-canli::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 8px; background: #22c55e; vertical-align: 1px; animation: duvar-nabiz 2s ease-in-out infinite; }
.pano-canli.kopuk::before { background: #f43f5e; animation: none; }
.bolum-baslik { display: flex; align-items: center; gap: 8px; margin: 4px 0 -6px; font-size: 15px; font-weight: 750; color: var(--metin-2); }
.bolum-baslik .ikon { width: 18px; height: 18px; }

.cp-govde { display: grid; gap: 16px; min-width: 0; }
.cp-kpi .kutucuk { min-height: 100px; padding: 16px 18px; }
.cp-kpi .kutucuk-deger small { font-size: 16px; font-weight: 650; color: var(--metin-3); }
.cp-kpi .kutucuk-not { font-variant-numeric: tabular-nums; }
.cp-fark { font-weight: 800; }
.cp-degisti { animation: cp-parla 2.5s ease-out; }
@keyframes cp-parla { 0%, 30% { color: var(--ton); } 100% { color: inherit; } }
.kutucuk-acik .cp-degisti { animation-name: cp-parla-acik; }
@keyframes cp-parla-acik { 0%, 30% { color: var(--ton); } 100% { color: inherit; } }

.cp-ust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cp-ust > .kart { min-width: 0; }
.cp-temsilci { min-width: 0; }
.cp-temsilci .kart-ust { flex-wrap: wrap; }
.cp-durumlar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cp-durum { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 18%, transparent); background: var(--ton-acik); color: var(--ton-metin); font-size: 12.5px; font-weight: 650; }
.cp-durum strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.cp-durum .ikon { width: 14px; height: 14px; }
.cp-durum.sifir { opacity: .55; }
.cp-tablo td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.cp-tablo td small { color: var(--metin-3); font-size: 12px; }
.cp-tablo th.sag, .cp-tablo td.sag { text-align: right; }
.cp-ad { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cp-ad strong, .cp-ad small { display: block; white-space: nowrap; }
.cp-ad strong { font-weight: 700; }
.cp-ad .avatar { flex: none; }
.cp-durum-hucre { min-width: 170px; }
.cp-rozet { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--ton); color: var(--ton-yazi); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cp-rozet .ikon { width: 14px; height: 14px; }
.cp-rozet.ton-gri { background: var(--gri-acik); color: var(--gri-metin); }
.cp-durum-hucre small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Satır uyarısı — liste sınıflarından ayrı ad (satıra display:flex gelirse tablo bozulur) */
.cp-satir-uyari td:first-child { box-shadow: inset 4px 0 0 var(--amber); }
.cp-satir-tehlike td:first-child { box-shadow: inset 4px 0 0 var(--kirmizi); }
.cp-satir-uyari td { background: #fffaf0; }
.cp-satir-tehlike td { background: #fff5f5; }
.cp-girmedi { margin: 12px 0 0; font-size: 13px; color: var(--metin-3); }
.cp-girmedi strong { color: var(--metin-2); }

.cp-uyarilar .kart-ust { margin-bottom: 12px; }
.cp-uyari-listesi { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 372px; overflow-y: auto; }
.cp-uyari-oge { --ton: var(--mavi); display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ton) 18%, transparent); background: var(--mavi-acik); color: var(--metin); font-size: 13px; font-weight: 600; }
.cp-uyari-oge > a { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; }
.cp-uyari-oge > a:hover span { color: var(--marka); }
.cp-uyari-oge span { flex: 1; min-width: 0; }
.cp-uyari-oge .ikon { flex: none; width: 16px; height: 16px; color: var(--mavi); }
.cp-uyari-oge.cp-tur-tehlike { --ton: var(--kirmizi); background: var(--kirmizi-acik); }
.cp-uyari-oge.cp-tur-tehlike .ikon { color: var(--kirmizi); }
.cp-uyari-oge.cp-tur-uyari { --ton: var(--amber); background: var(--amber-acik); }
.cp-uyari-oge.cp-tur-uyari .ikon { color: var(--amber-metin); }

.cp-servis-kutular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-servis-kutu { display: grid; grid-template-rows: 1fr auto; gap: 2px; padding: 11px 13px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ton) 20%, transparent); background: var(--ton-acik); color: var(--ton-metin); text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.cp-servis-kutu:first-child { grid-column: 1 / -1; }
.cp-servis-kutu:hover { background: color-mix(in srgb, var(--ton) 16%, #fff); border-color: color-mix(in srgb, var(--ton) 40%, transparent); color: var(--ton-metin); }
.cp-servis-ust { display: flex; align-items: flex-start; line-height: 1.3; gap: 6px; font-size: 12.5px; font-weight: 700; }
.cp-servis-ust .ikon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.cp-servis-kutu strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

.cp-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cp-alt > .kart { min-width: 0; }
.cp-lejant { display: flex; gap: 12px; font-size: 12.5px; color: var(--metin-2); white-space: nowrap; }
.cp-lejant > span { display: inline-flex; align-items: center; gap: 6px; }
.cp-lejant-cubuk { display: inline-block; width: 10px; height: 12px; border-radius: 2px 2px 0 0; background: var(--ton); }
.cp-lejant-cizgi { position: relative; display: inline-block; width: 18px; height: 2px; background: var(--gri); }
.cp-lejant-cizgi::after { content: ""; position: absolute; left: 6px; top: -3px; width: 7px; height: 7px; border-radius: 8px; background: var(--gri); }
.cp-cizelge { display: block; width: 100%; height: auto; overflow: visible; }
.cp-cizelge .c-izgara { stroke: var(--cizgi); stroke-width: 1; }
.cp-cizelge .c-taban { stroke: var(--cizgi-koyu); stroke-width: 1; }
.cp-cizelge .c-eksen { fill: var(--metin-3); font-size: 12px; font-family: var(--yazi); font-variant-numeric: tabular-nums; }
.cp-cizelge .c-bugun { fill: var(--mavi); }
.cp-cizelge .c-bugun.c-devam { fill: #8cc3e3; }
.cz-turuncu .c-bugun { fill: var(--turuncu); }
.cz-turuncu .c-bugun.c-devam { fill: #eba27f; }
.cz-yesil .c-bugun { fill: var(--yesil); }
.cz-yesil .c-bugun.c-devam { fill: #86c79c; }
.cz-mor .c-bugun { fill: var(--mor); }
.cz-mor .c-bugun.c-devam { fill: #bfa3f5; }
.cp-cizelge .c-dun { fill: none; stroke: var(--gri); stroke-width: 2; stroke-linejoin: round; }
.cp-cizelge .c-dun-nokta { fill: var(--gri); stroke: var(--yuzey); stroke-width: 2; }
.cp-cizelge .c-alan { fill: transparent; }
.cp-cizelge .c-alan.etkin { fill: rgba(15, 23, 42, .05); }
.cp-ipucu { position: fixed; z-index: 60; max-width: 300px; padding: 7px 10px; border-radius: var(--yaricap-k); background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; box-shadow: var(--golge-yuzen); font-variant-numeric: tabular-nums; }
.durum-dolgu.karisik { background: var(--gri); }

@media (max-width: 1200px) {
  .cp-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-ust > .cp-sonuclar { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cp-alt, .cp-ust { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Temsilci takibi (Aşama 12C) — "tkp-" önekli (tk- teknik servis ekranının)
   ========================================================================== */
.tkp-suzgec-izgara { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.tkp-suzgec-izgara > .alan { width: 210px; }
.tkp-suzgec-izgara .alan { gap: 5px; }
.tkp-suzgec-izgara .alan > label { font-size: 12.5px; color: var(--metin-2); }
.tkp-sonuc { display: grid; gap: 16px; min-width: 0; }
.tkp-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tkp-ust p { margin: 0; color: var(--metin-2); font-size: 13.5px; }
.tkp-ust p strong { color: var(--metin); font-size: 15px; }
.tkp-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.tkp-kpi .kutucuk { min-height: 96px; padding: 16px 18px; }
.tkp-kpi .kutucuk-deger small { font-size: 16px; font-weight: 650; color: var(--metin-3); }
.tkp-fark { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kutucuk .tkp-artis, .tablo .tkp-artis { color: var(--yesil-metin); }
.kutucuk .tkp-azalis, .tablo .tkp-azalis { color: var(--kirmizi-metin); }
.tkp-ayni { color: var(--metin-3); }

.tkp-cubuklar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tkp-cubuklar .durum-listesi { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.tkp-cubuklar .durum-adi { color: var(--metin-2); text-decoration: none; }
.tkp-cubuklar a.durum-adi:hover { color: var(--marka); }
.durum-dolgu.tkp-net { background: var(--turuncu); }
.durum-dolgu.tkp-arama { position: relative; background: #9cc8e3; }
.tkp-ulasilan { position: absolute; inset: 0 auto 0 0; display: block; width: 0; border-radius: 2px; background: var(--mavi); transition: width .4s ease; }

.tkp-tablo-kart { padding: 0; overflow: hidden; }
.tkp-tablo-kart .tablo-kap { border: 0; border-radius: 0; }
.tkp-tablo td, .tkp-tablo th { font-variant-numeric: tabular-nums; vertical-align: middle; }
.tkp-tablo th.sag, .tkp-tablo td.sag { text-align: right; }
.tkp-tablo td small, .tkp-tablo th small { display: block; color: var(--metin-3); font-size: 11.5px; font-weight: 600; }
.tkp-tablo tfoot th { background: var(--yuzey-2); border-top: 2px solid var(--cizgi-koyu); color: var(--metin); }
.tkp-tablo tfoot .tkp-ortalama th { font-weight: 600; color: var(--metin-2); border-top: 0; }
.tkp-sirala { color: inherit; text-decoration: none; white-space: nowrap; }
.tkp-sirala:hover { color: var(--marka); }
.tkp-sirala.etkin { color: var(--marka); }
.tkp-kisi { display: flex; align-items: center; gap: 10px; min-width: 190px; color: inherit; text-decoration: none; }
.tkp-kisi strong, .tkp-kisi small { display: block; white-space: nowrap; }
.tkp-kisi strong { font-weight: 700; }
.tkp-kisi:hover strong { color: var(--marka); }
.tkp-kisi .avatar { flex: none; }
.tkp-bos td { color: var(--metin-3); }
.tkp-bos .avatar { opacity: .5; }
.tkp-not { margin: 0; padding: 10px 14px 14px; }

.tkp-baslik { display: flex; align-items: center; gap: 16px; }
.tkp-baslik .avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cizgi); } /* açık başlıkta (eski koyu başlığın yarı saydam beyazı görünmüyordu) */
.tkp-hedef-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.tkp-hedef-oge { display: grid; gap: 6px; }
.tkp-hedef-ust { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--metin-2); }
.tkp-hedef-ust strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.tkp-hedef-oge small { color: var(--metin-3); font-size: 12.5px; }
.tkp-olcer { display: block; height: 10px; border-radius: 2px; background: var(--yuzey-2); overflow: hidden; }
.tkp-olcer-dolgu { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--mor); transition: width .4s ease; }
.tkp-olcer-dolgu.tamam { background: var(--yesil); }

.tkp-gun-kart .kart-ust { flex-wrap: wrap; }
.tkp-gun-kart[aria-busy="true"] { opacity: .6; }
.tkp-gun-nav { display: flex; gap: 8px; }
.tkp-gun { display: block; width: 100%; height: auto; overflow: visible; }
.tkp-gun .c-serit { fill: var(--yuzey-2); }
.tkp-gun .c-serit-ad { fill: var(--metin-2); font-size: 12px; font-weight: 700; font-family: var(--yazi); }
.tkp-gun .c-izgara { stroke: var(--cizgi); stroke-width: 1; }
.tkp-gun .c-eksen { fill: var(--metin-3); font-size: 11px; font-family: var(--yazi); }
.tkp-gun .c-arama { fill: #0e7fc0; }
.tkp-gun .c-arama.ulasilamadi { fill: #eb6834; }
.tkp-gun .c-servis { fill: var(--yesil); stroke: var(--yuzey); stroke-width: 2; }
.tkp-gun .c-mola { fill: var(--amber); }
.tkp-gun .c-mola.etkin { fill: var(--amber-koyu); }
.tkp-gun .c-alan { fill: transparent; }
.tkp-gun .c-alan.etkin { fill: rgba(15, 23, 42, .08); }
.tkp-lejant-servis { background: var(--yesil); transform: rotate(45deg) scale(.85); }
.tkp-lejant-mola { background: var(--amber); }

@media (max-width: 1100px) {
  .tkp-cubuklar, .tkp-hedef-izgara { grid-template-columns: 1fr; }
}

/* Yazdırma: menü, üst bar, süzgeç ve düğmeler gizli; içerik tam genişlik */
/* Yazdırma kuralları dosyanın sonunda (dar ekran kurallarını ezsin diye) */
}

/* ==========================================================================
   Servis takibi (Aşama 12D) — "svt-" önekli
   ========================================================================== */
.svt-suzgec { display: grid; gap: 14px; }
.svt-suzgec .gorunum-cipleri { padding-bottom: 14px; }
.svt-sonuc { display: grid; gap: 16px; min-width: 0; }
.svt-kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .svt-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svt-not { margin: -6px 0 0; }
.svt-kart-ust { padding: 16px 20px 0; }
.svt-akis { display: flex; gap: 2px; height: 26px; border-radius: var(--yaricap-k); overflow: hidden; background: var(--yuzey-2); }
.svt-akis-parca { flex: none; width: 0; height: 100%; background: var(--ton); transition: width .4s ease; }
.svt-akis-lejant { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--metin-2); }
.svt-akis-lejant li { display: inline-flex; align-items: center; gap: 6px; }
.svt-akis-lejant strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.svt-akis-lejant small { color: var(--metin-3); }
.svt-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--ton); }
.durum-dolgu.svt-is { position: relative; background: #f2b59a; }
.svt-is-tamam { position: absolute; inset: 0 auto 0 0; display: block; width: 0; border-radius: 2px; background: var(--turuncu); transition: width .4s ease; }
.durum-dolgu.svt-iptal { background: var(--kirmizi); }
.svt-kirmizi { color: var(--kirmizi-metin); font-weight: 800; }
.svt-tablo { min-width: 1280px; }
.svt-is-hucre { min-width: 82px; }
.svt-tablo th.svt-is-hucre { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.svt-bolge-satir th { background: var(--turuncu-acik) !important; color: var(--turuncu-metin); font-size: 13px; text-align: left; border-top: 2px solid var(--turuncu); }
.svt-bolge-satir small { margin-left: 8px; color: var(--turuncu-metin); opacity: .85; font-weight: 600; }
.svt-atanmamis td { background: var(--amber-acik); }
.svt-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.svt-uclu .durum-listesi { max-height: 380px; overflow-y: auto; padding-right: 4px; }
.svt-iptal-tablo td { vertical-align: top; }
.svt-not-hucre { min-width: 220px; max-width: 360px; white-space: normal; }
@media (max-width: 1200px) {
  .svt-uclu { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Rapor merkezi (Aşama 12E) — "rpm-" önekli
   ========================================================================== */
.rpm-kategori { display: grid; gap: 12px; }
.rpm-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rpm-kart { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: inherit; text-decoration: none; }
.rpm-kart:hover { border-color: var(--ton); background: var(--ton-acik); }
.rpm-kart-metin { display: grid; gap: 3px; flex: 1; min-width: 0; }
.rpm-kart-metin strong { font-size: 15px; font-weight: 750; color: var(--metin); }
.rpm-kart-metin small { color: var(--metin-3); font-size: 12.5px; line-height: 1.4; }
.rpm-ok { flex: none; width: 18px; height: 18px; color: var(--metin-3); }
.rpm-kart:hover .rpm-ok { color: var(--ton); }
.rpm-sonuc { display: grid; gap: 16px; min-width: 0; }
.rpm-bloklar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rpm-bloklar.tek { grid-template-columns: minmax(0, 1fr); }
.rpm-bloklar.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpm-bloklar > .kart { min-width: 0; }
.rpm-bloklar .durum-listesi { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.durum-dolgu.rpm-mavi { background: var(--mavi); }
.durum-dolgu.rpm-teal { background: var(--teal); }
.durum-dolgu.rpm-pembe { background: var(--pembe); }
.durum-dolgu.rpm-amber { background: var(--amber); }
.durum-dolgu.rpm-turuncu { background: var(--turuncu); }
.durum-dolgu.rpm-mor { background: var(--mor); }
.durum-dolgu.rpm-kirmizi { background: var(--kirmizi); }
.durum-dolgu.rpm-yesil { background: var(--yesil); }
.durum-dolgu.rpm-indigo { background: var(--indigo); }
.durum-dolgu.rpm-gri { background: var(--gri); }
.rpm-tablo td { vertical-align: top; }
.rpm-tablo td small, .rpm-tablo th small { display: block; color: var(--metin-3); font-size: 11.5px; font-weight: 600; }
/* Gruplu başlık (günlük özet): üst satır sütun gruplarını, grup / ara toplam satırları bölgeleri ayırır */
.rpm-tablo .kalin { font-weight: 700; color: var(--metin); }
.rpm-tablo-gruplu thead th { white-space: nowrap; }
.rpm-ust-baslik th { padding-top: 8px; padding-bottom: 6px; border-bottom: 0; text-align: center; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--metin-3); }
.rpm-ust-baslik th.rpm-ust-dolu { color: var(--metin-2); box-shadow: inset 0 -2px 0 var(--cizgi-koyu); }
.rpm-ust-baslik th + th.rpm-ust-dolu { border-left: 8px solid transparent; background-clip: padding-box; }
.rpm-grup th { padding: 7px 12px; background: var(--indigo-acik); color: var(--indigo-metin); font-size: 12.5px; font-weight: 700; text-align: left; box-shadow: inset 3px 0 0 var(--indigo); }
.rpm-ara td { background: var(--yuzey-2); font-weight: 700; color: var(--metin); }
.rpm-bos { margin: 16px; }
.rpm-iyi { color: var(--yesil-metin); font-weight: 800; }
.rpm-kotu { color: var(--kirmizi-metin); font-weight: 800; }
.rpm-orta { color: var(--amber-metin); font-weight: 800; }
.rpm-uzun { display: block; min-width: 220px; max-width: 420px; white-space: normal; }
@media (max-width: 1200px) {
  .rpm-bloklar, .rpm-bloklar.uclu { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Demolar (Aşama 9) — "dm-" önekli. Demo modül rengi mor; durumlar Demolar::TON.
   ========================================================================== */
.dm-ozet { gap: 10px; }
.dm-indir { margin-left: auto; }
.dm-tablo td { vertical-align: top; }
.dm-tablo td small { display: block; margin-top: 3px; }
.dm-gun { font-variant-numeric: tabular-nums; }
.dm-not { display: block; max-width: 280px; color: var(--metin-2); font-size: 13px; }
.dm-son { margin-bottom: 0; }
.dm-son a { font-weight: 700; }

.dm-form { display: grid; gap: 18px; }
.dm-bolum { display: grid; gap: 12px; }
.dm-bolum + .dm-bolum { padding-top: 18px; border-top: 1px solid var(--cizgi); }
.dm-bolum-baslik { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--metin-2); }
.dm-bolum-baslik .ikon { width: 17px; height: 17px; color: var(--mor); }
.dm-izgara-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.dm-genis { grid-column: span 2; }
.dm-tam { grid-column: 1 / -1; }
.dm-tel-uyari { margin-top: 0; color: var(--amber-metin); }
.dm-tel-uyari.dm-tel-engel { color: var(--kirmizi-metin); font-weight: 600; }
.dm-tel-uyari a { font-weight: 700; }
.dm-form-alt { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--cizgi); }

.dm-baslik .dm-durum { padding: 4px 11px; }
.dm-baslik p a { color: inherit; font-weight: 600; }
.dm-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.dm-izgara > .dm-form .dm-izgara-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-izgara > .dm-form .dm-genis { grid-column: 1 / -1; }
.dm-yan { display: grid; gap: 16px; min-width: 0; }

.dm-sonuc-form { display: grid; gap: 12px; }
.dm-sonuc-secim { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dm-sonuc-secim .secim-cip span { min-width: 0; min-height: 36px; padding: 0 12px; font-size: 13px; }
.dm-sonuc-secim .secim-cip input:checked + span { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.dm-sonuc-secim .secim-cip:hover span { border-color: var(--ton); }
.dm-ertele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-ertele[hidden] { display: none; }
.dm-sonuc-ozet { margin-bottom: 14px; }
.dm-sonuc-ozet dd { text-align: right; max-width: 70%; }
.dm-ata { display: flex; gap: 8px; }
.dm-ata .girdi { flex: 1; min-width: 0; height: 40px; }

.dm-gecmis { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-height: 420px; overflow-y: auto; }
.dm-gecmis li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.dm-gecmis-ikon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ton-acik); color: var(--ton); }
.dm-gecmis-ikon .ikon { width: 16px; height: 16px; }
.dm-gecmis strong { font-size: 13.5px; }
.dm-gecmis p { margin-top: 2px; font-size: 13px; color: var(--metin-2); overflow-wrap: anywhere; }
.dm-gecmis small { display: block; margin-top: 2px; font-size: 12px; color: var(--metin-3); }

.dm-modal-govde { display: grid; gap: 12px; }
.dm-modal-kim { font-weight: 650; color: var(--metin); }
@media (max-width: 1100px) {
  .dm-izgara { grid-template-columns: minmax(0, 1fr); }
  .dm-izgara-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dm-izgara-form, .dm-izgara > .dm-form .dm-izgara-form, .dm-ertele { grid-template-columns: minmax(0, 1fr); }
  .dm-genis { grid-column: auto; }
  .dm-form-alt .dugme { flex: 1; }
}

/* ==========================================================================
   Profilim (Aşama 10) — "pf-" önekli
   ========================================================================== */
.pf-kimlik { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pf-avatar { width: 76px; height: 76px; font-size: 26px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cizgi); }
.pf-kimlik h2 { margin-top: 6px; }
.pf-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pf-sutun { display: grid; gap: 16px; min-width: 0; }
.pf-resim { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pf-resim-onizleme { width: 120px; height: 120px; font-size: 38px; flex: none; }
.pf-resim-islem { display: grid; gap: 10px; flex: 1; min-width: 220px; }
.pf-resim-islem form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pf-dosya { position: relative; overflow: hidden; max-width: 100%; }
.pf-dosya span { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pf-dosya input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pf-dosya:focus-within { box-shadow: var(--halka); }
.pf-sifre { gap: 14px; }
.pf-kurallar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--metin-3); }
.pf-kurallar li { display: inline-flex; align-items: center; gap: 6px; }
.pf-kurallar li::before { content: ""; width: 8px; height: 8px; border-radius: 8px; background: var(--cizgi-koyu); transition: background .15s; }
.pf-kurallar li.tamam { color: var(--yesil-metin); font-weight: 600; }
.pf-kurallar li.tamam::before { background: var(--yesil); }
.pf-cihazlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf-cihazlar li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 8px; }
.pf-cihazlar form { margin: 0 0 0 auto; }
.pf-cihaz-simge { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--mavi-acik); color: var(--mavi); }
.pf-cihaz-metin { display: grid; gap: 3px; min-width: 0; }
.pf-cihaz-metin strong { font-size: 13.5px; overflow-wrap: anywhere; }
.pf-cihaz-metin small { font-size: 12px; color: var(--metin-3); }
@media (max-width: 1000px) {
  .pf-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Talep onayları (Aşama 11) — "tl-" önekli
   ========================================================================== */
.tl-kart { padding: 0; overflow: hidden; }
.tl-kart > .kart-ust { padding: 18px 20px 0; }
.tl-kart > .bos-kutu { margin: 16px; }
.tl-tablo td { vertical-align: top; }
.tl-cihaz { font-size: 13.5px; }
.tl-sebep { max-width: 320px; font-size: 13px; color: var(--metin-2); overflow-wrap: anywhere; }
.tl-karar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.tl-karar form { display: flex; gap: 6px; margin: 0; }
.tl-ret .girdi { width: 170px; height: 32px; padding: 0 10px; font-size: 13px; }
.tl-mevcut, .tl-istenen { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-mevcut { font-size: 12.5px; color: var(--metin-2); }
.tl-mevcut.tl-degisen { color: var(--metin-3); opacity: .75; }
.tl-istenen { margin-top: 2px; font-weight: 700; color: var(--metin); }
.tl-mevcut.tl-degisen + .tl-istenen { color: var(--mavi-metin); }
.tl-uyari { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-metin); font-weight: 600; }
.tl-uyari .ikon { width: 14px; height: 14px; }
.tl-not { padding: 0 20px 16px; margin: 0; }
.tl-kararlar { list-style: none; margin: 0; padding: 4px 20px 18px; display: grid; gap: 8px; font-size: 13.5px; }
.tl-kararlar small { display: block; margin-top: 2px; color: var(--metin-3); font-size: 12px; }

/* ==========================================================================
   Kullanıcılar (Aşama 17A) — ky-
   ========================================================================== */
.girdi[aria-invalid="true"], .girdi-kap .girdi[aria-invalid="true"] { border-color: var(--kirmizi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kirmizi) 18%, transparent); }
.baglanti-dugme { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--marka); font: inherit; font-weight: 650; cursor: pointer; }
.baglanti-dugme:hover { color: var(--marka-koyu); }
.baglanti-dugme .ikon { width: 14px; height: 14px; }

/* Liste */
.ky-ozet { margin: 0; }
.ky-liste-kart { padding: 0; overflow: hidden; }
.ky-liste-kart .bos-kutu { margin: 20px; }
.ky-liste-kart .liste-alt { padding: 10px 16px 14px; margin: 0; }
.ky-tablo td { vertical-align: top; }
.ky-tablo th { white-space: nowrap; }
.ky-eksik { color: var(--amber-metin) !important; font-weight: 600; }
.ky-eksik .ikon { width: 13px; height: 13px; vertical-align: -2px; }
.ky-teknik-eksik { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ky-teknik-eksik small { display: block; margin-top: 2px; color: var(--metin-2); }
.ky-teknik-eksik form { margin: 0; }
.ky-depo-izgara { margin-top: 14px; }
.ky-kisi { display: flex; align-items: center; gap: 10px; color: var(--metin); min-width: 200px; }
.ky-kisi:hover strong { color: var(--marka); }
.ky-kisi > span { display: grid; gap: 1px; min-width: 0; }
.ky-kisi small { color: var(--metin-3); font-size: 12.5px; }
.ky-rol { white-space: nowrap; }
.ky-yetki { display: inline-flex !important; align-items: center; gap: 4px; color: var(--mor-metin); font-weight: 600; }
.ky-yetki .ikon { width: 13px; height: 13px; }
.ky-cevrimici { display: inline-flex; align-items: center; gap: 6px; color: var(--yesil-metin); font-weight: 650; }
.ky-nokta { width: 8px; height: 8px; border-radius: 8px; background: var(--yesil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yesil) 20%, transparent); }
.ky-islemler { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.ky-islemler form { margin: 0; }
.ky-tablo .satir-pasif .ky-kisi { opacity: .7; }

/* Kayıt */
.ky-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ky-ana { display: grid; gap: 14px; min-width: 0; }
.ky-yan { display: grid; gap: 16px; position: sticky; top: 84px; }
.ky-sekmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ky-sekme {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); color: var(--metin-2);
  font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ky-sekme .ikon { width: 16px; height: 16px; color: var(--ton); }
.ky-sekme:hover { border-color: var(--ton); color: var(--metin); }
.ky-sekme.aktif { background: var(--ton); border-color: var(--ton); color: var(--ton-yazi); }
.ky-sekme.aktif .ikon { color: currentColor; }
.ky-sekme:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.ky-sekme.aktif .sekme-sayi { background: rgba(255, 255, 255, .25); }
.ky-sekme-ayrac { width: 1px; height: 22px; margin: 0 4px; background: var(--cizgi-koyu); }
.ky-form { padding: 0; }
.ky-panel { padding: 22px 22px 6px; }
.ky-panel-kart { padding: 22px; }
.ky-panel-ust { margin-bottom: 16px; }
.ky-panel-ust h3 { font-size: 16px; }
.ky-panel-ust p { margin-top: 3px; color: var(--metin-3); font-size: 13px; }
.ky-panel-ara { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--cizgi); }
.ky-panel .sihirbaz-izgara { margin-bottom: 16px; }
.ky-yetkiler { display: grid; gap: 10px; }
.ky-secenek { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); cursor: pointer; transition: border-color .15s, background .15s; }
.ky-secenek:hover { border-color: var(--cizgi-koyu); }
.ky-secenek:has(input:checked) { border-color: var(--marka); background: var(--mavi-acik); }
.ky-secenek input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marka); flex: none; }
.ky-secenek span { display: grid; gap: 2px; }
.ky-secenek small { color: var(--metin-3); font-size: 12.5px; line-height: 1.45; }
.ky-kaydet-cubuk {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--cizgi); border-radius: 0 0 var(--yaricap-b) var(--yaricap-b);
  background: var(--yuzey); box-shadow: 0 -8px 16px -12px rgba(15, 23, 42, .22); /* saydam değil: altındaki alanlar yazının arkasından görünüyordu */
}
.ky-kaydet-cubuk[hidden] { display: none; }
.ky-kaydet-not { margin-right: auto; font-size: 13px; }
.ky-degisti { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--amber-metin); font-weight: 650; font-size: 13px; }
.ky-degisti[hidden] { display: none; }
.ky-degisti:not([hidden]) + .ky-kaydet-not { display: none; }
.ky-degisti .ikon { width: 16px; height: 16px; }
.ky-sifre-kap { position: relative; }
.ky-durum-islem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ky-durum-islem form { margin: 0; }
.ky-sifre-form { display: grid; gap: 12px; }
.ky-sifre-form .dugme { justify-self: start; }
.ky-resim .pf-resim-onizleme { width: 88px; height: 88px; font-size: 30px; }
.ky-adimlar { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--metin-2); font-size: 13.5px; }

/* Belgeler */
.ky-belge-form { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto auto; gap: 12px; align-items: end; padding: 14px; margin-bottom: 18px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey-2); }
.ky-belge-form .ky-genis { grid-column: 1 / -1; margin: 0; }
.ky-belgeler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ky-belge { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.ky-belge-onizleme { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: var(--yaricap-k); background: var(--mor-acik); color: var(--mor-metin); }
.ky-belge-onizleme img { width: 100%; height: 100%; object-fit: cover; }
.ky-belge-pdf { display: grid; place-items: center; gap: 2px; font-size: 11px; font-weight: 800; }
.ky-belge-pdf .ikon { width: 22px; height: 22px; }
.ky-belge-metin { display: grid; gap: 3px; min-width: 0; }
.ky-belge-metin .rozet { justify-self: start; }
.ky-belge-metin strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ky-belge-metin small { color: var(--metin-3); font-size: 12px; }
.ky-belge-islem { display: flex; flex-direction: column; gap: 4px; }
.ky-belge-islem form { margin: 0; }
.ky-sil:hover { color: var(--kirmizi); }

/* Geçmiş */
.ky-gecmis { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ky-gecmis li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.ky-gecmis li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--cizgi); }
.ky-gecmis-simge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ton-acik); color: var(--ton); }
.ky-gecmis-simge .ikon { width: 16px; height: 16px; }
.ky-gecmis p { margin: 5px 0 2px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ky-gecmis small { color: var(--metin-3); font-size: 12px; }

@media (max-width: 1100px) {
  .ky-izgara { grid-template-columns: 1fr; }
  .ky-yan { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .ky-belge-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ky-sekme { height: 34px; padding: 0 11px; font-size: 13px; }
  .ky-belge-form { grid-template-columns: 1fr; }
  .ky-panel { padding: 18px 16px 4px; }
  .ky-kaydet-cubuk { padding: 12px 16px; }
}
.ky-islemler { flex-wrap: nowrap; align-items: center; }
.ky-ikon-dugme { width: 34px; padding: 0; justify-content: center; color: var(--ton); }
.ky-ikon-dugme:hover { background: var(--ton-acik); color: var(--ton); }
.ky-ikon-dugme .ikon { width: 17px; height: 17px; }
.ky-tel { white-space: nowrap; }

/* ==========================================================================
   Arama sonuç kuralları (17.10.2026 yeniden) — sk-
   ========================================================================== */
.sk-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sk-ana { display: grid; gap: 16px; min-width: 0; }
.sk-kart .kart-ust { margin-bottom: 8px; }
.sk-grup { margin-top: 14px; }
.sk-grup-baslik { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ton-metin); }
.sk-grup-baslik small { padding: 1px 7px; border-radius: 8px; background: var(--ton-acik); color: var(--ton-metin); font-size: 11.5px; letter-spacing: 0; }
.sk-grup-nokta { width: 9px; height: 9px; border-radius: 8px; background: var(--ton); }
.sk-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.sk-satir { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 14px; background: var(--yuzey); }
.sk-satir + .sk-satir { border-top: 1px solid #eef0f4; }
.sk-satir:hover { background: var(--yuzey-2); }
.sk-ad { display: grid; gap: 1px; }
.sk-ad strong { font-size: 14px; }
.sk-ad small { color: var(--metin-3); font-size: 12px; }
.sk-ozet { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sk-kosul { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.sk-kosul .ikon { width: 13px; height: 13px; flex: none; }
.sk-acik { background: var(--yesil-acik); color: var(--yesil-metin); }
.sk-kapali { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.sk-islem { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sk-sure { display: grid; gap: 10px; }
.sk-ay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--metin-2); font-size: 13.5px; }
.sk-ay .girdi { width: 84px; height: 36px; }
.sk-sure-alt { display: flex; justify-content: flex-end; }
.sk-deneme { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }

.sk-modal { width: min(640px, calc(100vw - 32px)); }
.sk-modal-not { margin: 0 0 14px; font-size: 13.5px; }
.sk-olgular { display: grid; gap: 8px; }
.sk-olgu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.sk-olgu legend { float: left; display: flex; align-items: center; gap: 7px; padding: 0; color: var(--metin); font-weight: 600; font-size: 13.5px; }
.sk-olgu legend .ikon { width: 16px; height: 16px; color: var(--metin-3); }
.sk-uclu { display: inline-flex; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); overflow: hidden; }
.sk-uclu label { position: relative; cursor: pointer; }
.sk-uclu input { position: absolute; opacity: 0; pointer-events: none; }
.sk-uclu span { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; font-size: 12.5px; font-weight: 650; color: var(--metin-2); white-space: nowrap; }
.sk-uclu span .ikon { width: 13px; height: 13px; }
.sk-uclu label + label span { border-left: 1px solid var(--cizgi-koyu); }
.sk-uclu label:hover span { background: var(--yuzey-2); }
.sk-uclu input:checked + span { background: var(--gri); color: #fff; }
.sk-uclu .sk-olmali input:checked + span { background: var(--yesil); }
.sk-uclu .sk-olmamali input:checked + span { background: var(--kirmizi); }
.sk-uclu input:focus-visible + span { outline: 2px solid var(--marka); outline-offset: -2px; }
.sk-sabit-isaret { display: none; color: var(--metin-3); }
.sk-sabit-isaret .ikon { width: 13px; height: 13px; }
.sk-olgu.sk-sabit { background: var(--yuzey-2); }
.sk-olgu.sk-sabit .sk-sabit-isaret { display: inline-flex; }
.sk-olgu.sk-sabit .sk-uclu label { cursor: not-allowed; }
.sk-olgu.sk-sabit .sk-uclu label:hover span { background: transparent; }
.sk-olgu.sk-sabit .sk-uclu input:not(:checked) + span { opacity: .45; }
.sk-modal-not .ikon { width: 13px; height: 13px; vertical-align: -2px; }
.sk-bag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; padding: 10px 12px; border-radius: var(--yaricap); background: var(--amber-acik); }
.sk-bag[hidden] { display: none; }
.sk-onizleme { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--yaricap); background: var(--mavi-acik); color: var(--mavi-metin); font-weight: 600; font-size: 13.5px; }
.sk-onerilen { margin-right: auto; }

@media (max-width: 1100px) {
  .sk-izgara { grid-template-columns: 1fr; }
  .sk-deneme { position: static; max-height: none; }
}
@media (max-width: 700px) {
  .sk-satir { grid-template-columns: 1fr; gap: 8px; }
  .sk-islem { justify-content: flex-start; }
  .sk-olgu { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ayarlar: mola sebepleri, servis durumları (Aşama 17B/C) — ays-, sd- (ay- takvimin ay görünümünün öneki)
   ========================================================================== */
.ays-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ays-kart .kart-ust { margin-bottom: 12px; }
.ays-yeni { position: sticky; top: 84px; }
.ays-form { display: grid; gap: 14px; }
.ays-form > .dugme { justify-self: start; }
.ays-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.ays-satir { display: grid; grid-template-columns: minmax(0, 1fr) 180px 210px; gap: 14px; align-items: center; padding: 10px 14px; background: var(--yuzey); }
.ays-satir + .ays-satir { border-top: 1px solid #eef0f4; }
.ays-soluk .ays-ad-form .girdi { color: var(--metin-3); }
.ays-ad-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.ays-ad-form .girdi { height: 38px; max-width: 320px; font-weight: 600; }
.ays-bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ays-islem { display: flex; justify-content: flex-end; gap: 6px; }
.ikon-ters { transform: rotate(180deg); }
.ays-uyari { margin: 0; }
/* Teknisyen ekranı: kullanılan ürünler (yapılan işler stok hareketinden) */
.tk-urunler { display: grid; gap: 6px; }
.ays-islem form { margin: 0; }
.ays-palet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ays-renk { width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: 8px; background: var(--renk, #64748b); box-shadow: 0 0 0 1px var(--cizgi-koyu); cursor: pointer; }
.ays-renk[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--metin); }
.ays-renk-ozel { position: relative; display: inline-grid; width: 26px; height: 26px; border: 2px solid #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--cizgi-koyu); cursor: pointer; }
.ays-renk-ozel input { position: absolute; inset: -8px; width: 42px; height: 42px; padding: 0; border: 0; cursor: pointer; }
.ays-roller { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.ays-roller .alan-ipucu { margin: -2px 0 2px; }
.sd-tablo td { vertical-align: middle; }
.sd-sira { width: 92px; }
.sd-oklar { display: flex; gap: 2px; margin: 0; }
.sd-yukari .ikon { transform: rotate(180deg); }
.sd-ad { display: inline-flex; align-items: center; gap: 8px; }
.sd-nokta { width: 12px; height: 12px; }
.sd-roller { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 1100px) {
  .ays-izgara { grid-template-columns: minmax(0, 1fr); }
  .ays-yeni { position: static; }
}
@media (max-width: 700px) {
  .ays-satir { grid-template-columns: 1fr; gap: 8px; }
  .ays-islem { justify-content: flex-start; }
}

/* ==========================================================================
   Çağrı ekibi (17.10.2026 sadeleştirildi) — ce-
   ========================================================================== */
.ce-ozet { margin: 0; }
.ce-bolge-kart { margin-bottom: 0; }
.ce-kapsanmayan { margin: 0 0 12px; }
.ce-bos-not { margin: 4px 0 0; }
.ce-bolgeler { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.ce-bolge-satir { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 12px 14px; background: var(--yuzey); }
/* Kişi solda iki satır boyu; çipler ikinci sütunun tamamında (üç sütunda çiplere ~270 px kalıyor, alt alta diziliyordu), ekleme formu altında */
.ce-bolge-satir > .ce-kisi { grid-row: span 2; }
.ce-bolge-satir + .ce-bolge-satir { border-top: 1px solid #eef0f4; }
.ce-bolge-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-bolge-cipler .bolge-cip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid color-mix(in srgb, var(--kirmizi) 30%, transparent); border-radius: 8px; background: var(--kirmizi-acik); color: var(--kirmizi-metin); font-weight: 700; font-size: 12.5px; }
.ce-bolge-cipler .bolge-cip small { font-weight: 500; opacity: .8; }
.ce-bolge-cipler .bolge-cip form { margin: 0; }
.ce-bolge-ekle { display: flex; gap: 6px; align-items: center; margin: 0; }
.ce-bolge-ekle .girdi { height: 36px; width: 150px; }
.ce-kisi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ce-kisi > span { display: grid; gap: 1px; min-width: 0; }
.ce-kisi small { color: var(--metin-3); font-size: 12.5px; }
.ce-rol-uyari { display: inline-flex !important; align-items: center; gap: 4px; color: var(--amber-metin) !important; font-weight: 600; }
.ce-rol-uyari .ikon { width: 13px; height: 13px; }
.ce-ekip-kart { padding: 0; overflow: hidden; }
.ce-ekip-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.ce-ekle { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.ce-ekle .girdi { height: 36px; width: auto; min-width: 150px; }
.ce-araclar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 20px 14px; border-bottom: 1px solid var(--cizgi); }
.ce-ara { width: 240px; }
.ce-ara .girdi { height: 38px; }
.ce-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-cipler .gorunum-cip span { height: 34px; padding: 0 12px; font-size: 13px; }
.ce-cipler .gorunum-cip strong { margin-left: 2px; font-variant-numeric: tabular-nums; }
.ce-tablo td { vertical-align: middle; }
.ce-tablo tr[hidden] { display: none; }
.ce-gorev { position: relative; display: inline-flex; align-items: center; margin: 0; }
.ce-gorev-ikon { position: absolute; left: 10px; display: grid; color: var(--ton); pointer-events: none; }
.ce-gorev-ikon .ikon { width: 16px; height: 16px; }
.ce-gorev .girdi { height: 36px; min-width: 170px; padding-left: 34px; border-color: color-mix(in srgb, var(--ton) 40%, var(--cizgi-koyu)); background-color: var(--ton-acik); color: var(--ton-metin); font-weight: 650; }
.ce-ekip-kart > .ce-bos-not { padding: 0 20px 16px; }
.ce-ekip-kart > .bos-kutu { margin: 16px 20px 20px; }

@media (max-width: 1100px) {
  .ce-bolge-satir { grid-template-columns: 1fr; gap: 10px; }
  .ce-bolge-satir > .ce-kisi { grid-row: auto; }
}
@media (max-width: 640px) {
  .ce-ara { width: 100%; }
  .ce-bolge-ekle { flex-wrap: wrap; }
}
.ky-nokta { display: inline-block; flex: none; }

/* ==========================================================================
   Rapor merkezi (17.10.2026 yeniden) — rpm-
   ========================================================================== */
.rpm-ozet { display: grid; gap: 8px; } /* boşluğu içerik kabının gap'i verir (eskiden 16 + 18 px eklenip 54 px oluyordu) */
.rpm-ozet-baslik { display: inline-flex; align-items: center; gap: 6px; color: var(--metin-3); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.rpm-ozet-baslik .ikon { width: 14px; height: 14px; }
.rpm-izgara { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.rpm-yan { position: sticky; top: 84px; display: grid; gap: 16px; padding: 16px; }
.rpm-ara .girdi { height: 40px; }
.rpm-kategoriler { display: grid; gap: 2px; }
.rpm-kat { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--yaricap); color: var(--metin-2); font-weight: 600; font-size: 13.5px; }
.rpm-kat .ikon { width: 17px; height: 17px; color: var(--ton); flex: none; }
.rpm-kat span { flex: 1; }
.rpm-kat small { min-width: 22px; padding: 1px 7px; border-radius: 8px; background: var(--ton-acik); color: var(--ton-metin); font-size: 11.5px; font-weight: 750; text-align: center; }
.rpm-kat:hover { background: var(--yuzey-2); color: var(--metin); }
.rpm-son { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.rpm-son .alan-baslik { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--metin-3); }
.rpm-son .ikon { width: 14px; height: 14px; }
.rpm-son ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rpm-son a { display: block; padding: 6px 10px; border-radius: var(--yaricap-k); font-size: 13px; font-weight: 600; }
.rpm-son a:hover { background: var(--mavi-acik); }
.rpm-ana { display: grid; gap: 16px; min-width: 0; }
.rpm-bolum { padding: 16px 18px 18px; scroll-margin-top: 84px; }
.rpm-bolum[hidden] { display: none; }
.rpm-bolum-baslik { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; }
.rpm-bolum-baslik .simge-kutu { width: 34px; height: 34px; }
.rpm-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.rpm-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; background: var(--yuzey); transition: background .15s; }
.rpm-satir + .rpm-satir { border-top: 1px solid #eef0f4; }
.rpm-satir[hidden] { display: none; }
.rpm-satir:hover { background: var(--yuzey-2); }
.rpm-satir-ana { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--metin); }
.rpm-satir-ana:hover strong { color: var(--ton-metin); }
.rpm-satir-simge { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--ton-acik); color: var(--ton); }
.rpm-satir-simge .ikon { width: 19px; height: 19px; }
.rpm-satir-metin { display: grid; gap: 2px; min-width: 0; }
.rpm-satir-metin strong { font-size: 14px; }
.rpm-satir-metin small { color: var(--metin-3); font-size: 12.5px; line-height: 1.45; }
.rpm-kisayol { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rpm-donem { padding: 4px 9px; border: 1px solid var(--cizgi); border-radius: 8px; color: var(--metin-2); font-size: 12px; font-weight: 650; white-space: nowrap; }
.rpm-donem:hover { border-color: var(--ton); color: var(--ton-metin); background: var(--ton-acik); }
.rpm-anlik { font-size: 12px; margin-right: 4px; }
.rpm-ara-bos { margin: 0; padding: 20px; text-align: center; }

@media (max-width: 1000px) {
  .rpm-izgara { grid-template-columns: 1fr; }
  .rpm-yan { position: static; }
  .rpm-kategoriler { display: flex; flex-wrap: wrap; gap: 6px; }
  .rpm-kat { border: 1px solid var(--cizgi); }
}
@media (max-width: 640px) {
  .rpm-satir { grid-template-columns: 1fr; gap: 8px; }
  .rpm-kisayol { justify-content: flex-start; }
}

/* ==========================================================================
   Aramalı seçim kutusu (secim.js) — as-  · 15+ seçenekli listeler kendiliğinden
   ========================================================================== */
.as-kap { position: relative; min-width: 0; }
.as-asil { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; pointer-events: none; }
.as-dugme {
  display: flex; align-items: center; width: 100%; padding-right: 34px; text-align: left; cursor: pointer; font: inherit; color: var(--metin);
  background-image: var(--ok-asagi); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.as-dugme:disabled { cursor: not-allowed; }
.as-dugme[aria-expanded="true"] { border-color: var(--marka); box-shadow: var(--halka); }
.as-dugme[aria-invalid="true"] { border-color: var(--kirmizi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kirmizi) 18%, transparent); }
.as-deger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-dugme.as-bos .as-deger { color: var(--metin-2); }
.as-panel {
  position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge-yuzen);
}
.as-ara { flex: none; height: 38px; }
.as-liste { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.as-grup { position: sticky; top: 0; padding: 8px 10px 4px; background: var(--yuzey); color: var(--metin-3); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.as-oge { padding: 7px 10px; border-radius: var(--yaricap-k); color: var(--metin); font-size: 14px; cursor: pointer; }
.as-grupta { padding-left: 18px; }
.as-oge.as-aktif { background: var(--mavi-acik); color: var(--mavi-metin); }
.as-oge[aria-selected="true"] { font-weight: 700; }
.as-oge[aria-selected="true"]::after { content: "✓"; float: right; margin-left: 8px; color: var(--marka); }
.as-oge[aria-disabled="true"] { color: var(--metin-3); cursor: default; }
.as-oge[hidden], .as-grup[hidden] { display: none; }
.as-bos-not { margin: 4px 10px 6px; color: var(--metin-3); font-size: 13px; }

/* Demo: kayıtlı müşteri eşleşmesi, salt okunur bilgiler (17.10.2026) */
.dm-eslesen { align-items: flex-start; }
.dm-eslesen-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.dm-eslesen-liste form { margin: 0; }
.dm-alanlar { margin: 0; padding: 0; border: 0; min-width: 0; }
.dm-alanlar[disabled] .girdi { background: var(--yuzey-2); }
.servis-demo-ac { margin-left: auto; }

/* Süzgeç başlık kartının içinde (kullanıcı, 17.10.2026: "alt alta kartlarla sayfayı uzatma") — form display: contents:
   görünüm düğmeleri başlık satırının sağında, süzgeçler alttaki tam genişlik satırda; tek kart. */
.sayfa-baslik > .sayfa-suzgec { display: contents; }
.sayfa-baslik > .sayfa-suzgec > * { position: relative; }
.sayfa-baslik > .sayfa-suzgec > .gorunum-cipleri { padding-bottom: 0; border-bottom: 0; }
.sayfa-baslik > .sayfa-suzgec > .tkp-suzgec-izgara { flex: 1 0 100%; padding-top: 16px; border-top: 1px solid var(--cizgi); }

/* Dönem seçici: açılır liste yerine düğme dizisi (kullanıcı, 17.10.2026); seçili dönem marka mavisi dolgu */
.dn-secici { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; min-width: 0; }
.dn-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-cip { position: relative; cursor: pointer; }
.dn-cip input { position: absolute; opacity: 0; pointer-events: none; }
.dn-cip span {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge-xs);
  color: var(--metin-2); font-size: 13.5px; font-weight: 650; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.dn-cip span .ikon { width: 16px; height: 16px; color: var(--mavi); }
.dn-cip:hover span { border-color: color-mix(in srgb, var(--mavi) 45%, #fff); color: var(--mavi-metin); }
.dn-cip input:checked + span { border-color: var(--mavi); background: var(--mavi); color: #fff; }
.dn-cip input:checked + span .ikon { color: inherit; }
.dn-cip input:focus-visible + span { outline: 2px solid var(--mavi); outline-offset: 2px; }
.dn-aralik { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dn-aralik .alan { width: 160px; gap: 5px; }
.dn-aralik .alan > label { font-size: 12.5px; color: var(--metin-2); }
.dn-aralik .girdi, .dn-aralik .dugme { height: 40px; }
@media (max-width: 640px) {
  .dn-cip span { height: 36px; padding: 0 10px; font-size: 13px; }
  .tkp-suzgec-izgara > .alan, .dn-aralik .alan { width: 100%; }
}

/* Servis atama panosu (17.10.2026, önek ap-) — sürükle-bırak: havuz, teknisyen kartları, günler. Renkler işlevden:
   servis turuncu, bekleyen amber, atanan mavi, tamamlanan yeşil; bırakma hedefi tonun açık zemini + kesikli çerçeve. */
/* Başlık kartı tek parça: gün ve gezinti üstte, gün şeridi ve süzgeçler alttaki tam genişlik satırlarda */
.ap-ust h2 { font-size: 22px; }
.ap-ust-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px !important; }
.ap-ipucu { font-size: 13px; color: var(--metin-3); }
.ap-ust-dugmeler { align-items: center; }
.ap-ust > .ap-gunler, .ap-ust > .ap-suzgec { flex: 1 0 100%; }
.ap-gezinti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-gezinti .dugme-kare { width: 32px; }
.ap-suzgec { display: grid; grid-template-columns: repeat(2, minmax(160px, 220px)) minmax(220px, 1fr) auto; align-items: end; gap: 14px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.ap-suzgec-form { display: contents; }
.ap-sms { height: 44px; font-size: 13px; color: var(--metin-2); white-space: nowrap; }
.ap-sms input { accent-color: var(--turuncu); }

.ap-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ap-baslik h3 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; }
.ap-baslik h3 .ikon { color: var(--turuncu); }
.ap-baslik p { margin-top: 2px; font-size: 12.5px; color: var(--metin-3); }

/* Gün planı */
.ap-gunler { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.ap-gun {
  display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-b);
  background: var(--yuzey); color: var(--metin); text-decoration: none !important;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ap-gun:hover { color: var(--metin); border-color: var(--cizgi-koyu); box-shadow: var(--golge-xs); }
.ap-gun-ust { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.ap-gun-ad { font-size: 12.5px; font-weight: 700; color: var(--metin-2); }
.ap-gun-tarih { font-size: 13.5px; font-weight: 700; }
.ap-gun-alt { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 4px; }
.ap-gun-alt strong { font-size: 24px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.ap-gun-alt small { font-size: 11.5px; font-weight: 650; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.ap-gun.gecmis { background: var(--yuzey-2); }
.ap-gun.gecmis .ap-gun-tarih, .ap-gun.gecmis strong { color: var(--metin-3); }
.ap-gun.bekleyen-var .ap-gun-alt small { color: var(--amber-metin); }
.ap-gun.secili { border-color: var(--turuncu); background: var(--turuncu-acik); box-shadow: inset 0 0 0 1px var(--turuncu); }
.ap-gun.secili .ap-gun-ad, .ap-gun.secili strong { color: var(--turuncu-metin); }
.ap-gun-gecikmis { border-color: color-mix(in srgb, var(--kirmizi) 30%, var(--cizgi)); }
.ap-gun-gecikmis strong { color: var(--kirmizi-metin); }
.ap-gun-gecikmis.secili { border-color: var(--kirmizi); background: var(--kirmizi-acik); box-shadow: inset 0 0 0 1px var(--kirmizi); }
.ap-gun-gecikmis.secili .ap-gun-ad, .ap-gun-gecikmis.secili strong { color: var(--kirmizi-metin); }

/* Ana alan: havuz solda yapışkan, teknisyenler sağda */
.ap-ana { display: grid; grid-template-columns: minmax(270px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ap-havuz { position: sticky; top: calc(var(--ust-y, 68px) + 16px); display: flex; flex-direction: column; max-height: calc(100vh - var(--ust-y, 68px) - 32px); }
.ap-havuz-liste { display: grid; align-content: start; gap: 8px; min-height: 120px; overflow-y: auto; margin: 0 -6px; padding: 2px 6px 6px; scrollbar-width: thin; }
.ap-sayac { min-width: 34px; padding: 4px 10px; border-radius: 8px; background: var(--gri-acik); color: var(--metin-2); font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.ap-sayac.dolu { background: var(--amber-acik); color: var(--amber-metin); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.ap-grup-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 2px 0; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.ap-grup-baslik span { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ap-bos { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap-b); text-align: center; color: var(--metin-2); }
.ap-bos p { font-size: 13px; color: var(--metin-3); }
.ap-kesildi { margin: 0; }
.ap-temiz { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--yesil) 25%, var(--cizgi)); border-radius: var(--yaricap); background: var(--yesil-acik); }
.ap-temiz strong { color: var(--yesil-metin); }
.ap-temiz p { font-size: 12.5px; color: var(--metin-2); }
.ap-grup-baslik.secili { color: var(--turuncu-metin); }
.ap-grup-baslik em { margin-right: auto; margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: var(--turuncu-acik); font-style: normal; font-size: 11px; letter-spacing: 0; text-transform: none; }
.ap-havuz-bos { padding: 9px 12px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); font-size: 12.5px; color: var(--metin-3); }

/* Seçim çubuğu (klavye / dokunmatik: seç → Ata ya da Güne taşı) */
.ap-secim { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--mavi) 30%, var(--cizgi)); border-radius: var(--yaricap); background: var(--mavi-acik); }
.ap-secim-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--mavi-metin); }
.ap-secim p { font-size: 12.5px; color: var(--metin-2); }
.ap-secim-tasi { display: flex; gap: 8px; }
.ap-secim-tasi .girdi { height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; }

/* Servis kartı */
.ap-kart {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey);
  box-shadow: inset 3px 0 0 var(--turuncu), var(--golge-xs); cursor: grab; user-select: none;
  transition: border-color .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.ap-kart:hover { border-color: var(--cizgi-koyu); box-shadow: inset 3px 0 0 var(--turuncu), var(--golge-ust); }
.ap-kart:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--turuncu), var(--halka); }
.ap-kart.secili { border-color: var(--mavi); background: var(--mavi-acik); box-shadow: inset 3px 0 0 var(--mavi), 0 0 0 1px var(--mavi); }
.ap-kart.surukleniyor { opacity: .45; transform: scale(.98); }
.ap-kart.bekliyor { opacity: .55; pointer-events: none; }
.ap-kart-tamam { cursor: default; background: var(--yuzey-2); box-shadow: inset 3px 0 0 var(--yesil); }
.ap-kart-tamam:hover { box-shadow: inset 3px 0 0 var(--yesil); }
.ap-kart-tamam .ap-kart-ad { color: var(--metin-2); }
.ap-sec { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--mavi); cursor: pointer; }
.ap-kart-tik { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 8px; background: var(--yesil-acik); color: var(--yesil); }
.ap-kart-tik .ikon { width: 13px; height: 13px; }
.ap-kart-govde { display: grid; gap: 4px; min-width: 0; flex: 1; }
.ap-kart-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-kart-ad { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--metin); }
.ap-kart-ad:hover { color: var(--turuncu-metin); }
.ap-kart-no { flex: none; font-size: 11.5px; font-weight: 650; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.ap-kart-bilgi { display: grid; gap: 1px; font-size: 12.5px; color: var(--metin-2); }
.ap-kart-bilgi span { overflow-wrap: anywhere; }
.ap-kart-bilgi span + span { color: var(--metin-3); }
.ap-kart-cipler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ap-kart-cipler .rozet { font-size: 11.5px; padding: 0 7px; }
/* Kartın sağ kenarında ayrıntı simgesi (pencere açar) */
.ap-kart-eylem { flex: none; display: flex; flex-direction: column; gap: 2px; margin: -4px -6px -4px 0; }
.ap-kart-dugme {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--yaricap-k); background: none; color: var(--metin-3); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ap-kart-dugme:hover { border-color: color-mix(in srgb, var(--teal) 30%, #fff); background: var(--teal-acik); color: var(--teal-metin); }
.ap-kart-dugme:focus-visible { outline: none; box-shadow: var(--halka); }
.ap-kart-dugme .ikon { width: 16px; height: 16px; }

/* Teknisyen kartları */
.ap-bolge { display: grid; gap: 10px; }
.ap-bolge + .ap-bolge { margin-top: 18px; }
.ap-teknisyenler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ap-tek {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 9px; padding: 12px; min-width: 0;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-b); background: var(--yuzey);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ap-tek-pasif { background: var(--yuzey-2); }
.ap-tek-ust { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ap-avatar { width: 34px; height: 34px; border-radius: 8px; font-size: 12.5px; background: var(--teal); }
.ap-tek-ad { display: grid; min-width: 0; flex: 1; }
.ap-tek-ad strong { overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.3; }
.ap-tek-ust .rozet { flex: none; align-self: flex-start; }
.ap-tek-ad small { font-size: 12px; color: var(--metin-3); }
.ap-ilerleme { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ap-ilerleme-cubuk { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: 8px; background: var(--gri-acik); }
.ap-ilerleme-cubuk span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--yesil); transition: width .3s; }
.ap-ilerleme small { font-size: 11.5px; font-weight: 700; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.ap-tek-alt { display: flex; align-items: center; gap: 8px; }
.ap-hafta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 650; color: var(--metin-3); white-space: nowrap; }
.ap-hafta .ikon { width: 14px; height: 14px; }
.ap-tek-alt .dugme-kucuk { height: 30px; padding: 0 10px; }
.ap-tek-alt .dugme[disabled] { opacity: .5; cursor: not-allowed; }
.ap-tek-isler { display: grid; align-content: start; gap: 6px; min-height: 44px; max-height: 312px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey-2); }
.ap-tek-bos { display: grid; place-items: center; min-height: 30px; font-size: 12px; color: var(--metin-3); }

/* Sürükleme: bırakılabilen hedefler belirginleşir, üzerindeki hedef tonla dolar */
.ap-surukleniyor [data-ap-hedef]:not([data-ap-kapali]) .ap-tek-isler,
.ap-surukleniyor .ap-havuz .ap-havuz-liste { border-color: color-mix(in srgb, var(--mavi) 45%, #fff); }
.ap-surukleniyor .ap-gun[data-ap-hedef] { border-style: dashed; border-color: color-mix(in srgb, var(--turuncu) 55%, #fff); }
.ap-tek.uzerinde { border-color: var(--mavi); box-shadow: 0 0 0 1px var(--mavi); }
.ap-tek.uzerinde .ap-tek-isler { border-style: solid; border-color: var(--mavi); background: var(--mavi-acik); }
.ap-havuz.uzerinde { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.ap-havuz.uzerinde .ap-havuz-liste { background: var(--amber-acik); border-radius: var(--yaricap); }
.ap-gun.uzerinde { border-style: solid; border-color: var(--turuncu); background: var(--turuncu-acik); }
[data-ap-pano][aria-busy="true"] .ap-ana { opacity: .7; transition: opacity .15s; }

/* Toast'ta "Geri al" */
.toast-eylem { flex: none; align-self: center; height: 28px; padding: 0 10px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap-k); background: var(--yuzey); color: var(--metin); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.toast-eylem:hover { background: var(--yuzey-2); }

@media (max-width: 1360px) {
  .ap-teknisyenler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ap-ana { grid-template-columns: minmax(0, 1fr); }
  .ap-teknisyenler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-havuz { position: static; max-height: none; }
  .ap-havuz-liste { max-height: 420px; }
  .ap-suzgec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-ara { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ap-suzgec { grid-template-columns: minmax(0, 1fr); }
  .ap-gunler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ap-gun { padding: 10px; }
  .ap-gun-alt strong { font-size: 20px; }
  .ap-teknisyenler { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 900px) {
  .ap-teknisyenler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Servis ayrıntısı penceresi (kart simgesi → görüntüle, Düzenle → ofis düzenlemesi) */
.apd-modal { width: min(820px, calc(100vw - 32px)); }
.apd-modal .modal-ust h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apd-govde { display: grid; gap: 16px; max-height: min(64vh, 640px); overflow-y: auto; }
.apd-ust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.apd-blok { display: grid; gap: 4px; align-content: start; min-width: 0; font-size: 13.5px; color: var(--metin-2); }
.apd-blok .servis-isler { max-width: none; }
.apd-blok .servis-not { margin-top: 6px; }
.apd-etiket { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.apd-etiket .ikon { width: 15px; height: 15px; color: var(--turuncu); }
.apd-ad { font-size: 16px; font-weight: 750; color: var(--metin); overflow-wrap: anywhere; }
.apd-ad:hover { color: var(--turuncu-metin); }
.apd-teller { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.apd-teller a { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.apd-teller .ikon { width: 15px; height: 15px; }
.apd-bilgi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); }
.apd-bilgi div { min-width: 0; }
.apd-bilgi dt { font-size: 11.5px; font-weight: 650; color: var(--metin-3); }
.apd-bilgi dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 650; color: var(--metin); overflow-wrap: anywhere; }
.apd-not { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-3); }
.apd-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.apd-talep { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.apd-talep legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--metin); }
.apd-modal .modal-alt { align-items: center; }
.apd-modal .apd-sayfa { margin-right: auto; }
.apd-dugmeler { display: flex; gap: 10px; }
.apd-yukleniyor { padding: 48px 20px; text-align: center; color: var(--metin-3); }
@media (max-width: 640px) {
  .apd-ust, .apd-alanlar, .apd-bilgi { grid-template-columns: minmax(0, 1fr); }
  .apd-modal .modal-alt { flex-wrap: wrap; }
}

/* ==========================================================================
   Yazdırma (Yazdır → yazıcı ya da "PDF olarak kaydet") — dosyanın sonunda: dar ekran kuralları (@media max-width)
   kâğıt genişliğinde de çalışıp göstergeleri 2 sütuna düşürüyordu; burada ezilir. Eskiden yan menünün 260 px'lik
   sütunu yazdırmada da ayrılıyordu: içerik sağa kayıp kesiliyordu.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 11mm 10mm 12mm; }
  html, body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kenar, .kenar-perde, .ust, .liste-suzgec-form, .tkp-suzgec, .tkp-eylem, .tkp-gun-nav, .sayfa-baslik-dugmeler, .toast-alani, .cp-ipucu,
  .as-panel, .zil-panel, [data-yazdir], .serit, .calisma-ust { display: none !important; }
  .uyg { display: block !important; min-height: 0 !important; }
  .icerik, .calisma-icerik { margin: 0 !important; padding: 0 !important; width: auto !important; gap: 10px !important; }
  .calisma-govde { margin: 0 !important; padding: 0 !important; }
  .sayfa-baslik { background: #fff !important; box-shadow: none !important; border: 1px solid #cbd5e1 !important; padding: 10px 14px !important; }
  .sayfa-baslik h2 { font-size: 20px; }
  .kart, .kutucuk { break-inside: avoid; box-shadow: none !important; border: 1px solid #d3d9e2 !important; }
  .kutucuk-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .kutucuk-izgara.svt-kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .kutucuk { padding: 10px 12px !important; gap: 10px !important; }
  .kutucuk-simge { width: 34px !important; height: 34px !important; }
  .kutucuk-deger { font-size: 20px !important; }
  .kutucuk-filigran { display: none !important; }
  .rpm-bloklar, .tkp-cubuklar, .izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .rpm-bloklar.tek { grid-template-columns: 1fr !important; }
  .tkp-cubuklar .durum-listesi, .tablo-kap { max-height: none !important; overflow: visible !important; }
  .tablo, .tkp-tablo { font-size: 10px !important; }
  .tablo th, .tablo td { padding: 4px 6px !important; }
  .tablo thead { display: table-header-group; }
  .tablo tfoot { display: table-row-group; } /* toplam her sayfanın altında tekrarlanmasın, yalnız sonda */
  .tablo tr { break-inside: avoid; }
  .tkp-tablo-kart { break-inside: auto; }
  .sayfa-baslik .dugme { display: none !important; }
  /* Geniş tablolar (temsilci takibi ~15 sütun): yazı küçülür, avatar gizlenir, başlık sarılır; sığmazsa yatay sayfa */
  .tablo th { white-space: normal !important; }
  .tkp-tablo .avatar { display: none !important; }
  .tkp-tablo { font-size: 9px !important; }
  .tkp-tablo th, .tkp-tablo td { padding: 3px 4px !important; }
  .tkp-sonuc .tkp-tablo-kart { page: yatay; }
  a { color: inherit !important; text-decoration: none !important; }
}
@page yatay { size: A4 landscape; margin: 10mm; }

/* ==========================================================================
   Yönetim paneli ana sayfası
   ========================================================================== */
.pano-kap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.pano-kap[aria-busy="true"] { opacity: .6; transition: opacity .15s; pointer-events: none; }
.pano-guncel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--metin-3); }
.pano-guncel .ikon { width: 14px; height: 14px; }
.sayfa-baslik-dugmeler { align-items: center; }

/* Bölge süzgeci ve bölge rozeti (bütün bölgeleri gören rollerde; her bölgenin rengi her yerde aynı) */
.bolge-suzgec { display: flex; flex-wrap: wrap; gap: 8px; }
.bolge-sec {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--cizgi-koyu); border-radius: 8px; background: var(--yuzey);
  color: var(--metin-2); font-size: 13.5px; font-weight: 650; text-decoration: none; box-shadow: var(--golge-xs);
  transition: border-color .15s, background .15s, color .15s;
}
.bolge-sec .ikon { width: 16px; height: 16px; color: var(--ton); }
.bolge-sec:hover { border-color: var(--ton); color: var(--metin); }
.bolge-sec:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.bolge-sec.aktif { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.bolge-sec.aktif .ikon { color: currentColor; }
.bolge-nokta { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--ton); }
.bolge-sec.aktif .bolge-nokta { background: currentColor; }
.bolge-bag { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--metin); text-decoration: none; }
a.bolge-bag:hover { color: var(--ton-metin); }
.pano-kap[aria-busy="true"] .bolge-suzgec { pointer-events: none; }

/* ==========================================================================
   Tanımlar ve depolar
   ========================================================================== */
.tanim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tanim-kart {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); color: var(--metin);
  box-shadow: var(--golge-kart); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tanim-kart:hover { color: var(--metin); border-color: color-mix(in srgb, var(--ton) 40%, var(--cizgi)); box-shadow: var(--golge-ust); transform: translateY(-1px); }
.tanim-kart .kutucuk-simge { width: 44px; height: 44px; }
.tanim-kart-govde { display: grid; gap: 4px; flex: 1; min-width: 0; }
.tanim-kart-govde strong { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tanim-kart-govde small { font-size: 12.5px; line-height: 1.45; color: var(--metin-3); }
.tanim-kart-ok { flex: none; color: var(--ton); }

.tnm-tek { display: grid; }
.tnm-sayi { flex: none; }
.tnm-ara { position: relative; display: block; width: min(280px, 100%); }
.tnm-ara .ikon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--metin-3); }
.tnm-ara .girdi { height: 38px; padding-left: 36px; }
.ays-kart .kart-ust { flex-wrap: wrap; }
.tnm-satir { grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) 40px; }
.tnm-satir[hidden] { display: none; }
.tnm-sol { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tnm-sol .ays-ad-form { flex: 1; min-width: 0; }
.tnm-sol .ays-ad-form .girdi { max-width: none; }
.tnm-ad { font-weight: 650; }
.tnm-cizim { flex: none; width: 40px; height: 40px; padding: 4px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey-2); object-fit: contain; }
.tnm-bilgi { gap: 4px 8px; }
.tnm-not { font-size: 12.5px; line-height: 1.4; color: var(--metin-2); }
.tnm-not.soluk { color: var(--metin-3); }
.tnm-bilgi .rozet .ikon { width: 13px; height: 13px; }
.tnm-sil:hover { background: var(--kirmizi-acik); color: var(--kirmizi); }
.tnm-bos { padding: 16px; text-align: center; }
.tnm-kisi { display: flex; align-items: center; gap: 6px; justify-self: end; min-width: 0; max-width: 100%; font-size: 13px; color: var(--metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnm-kisi .ikon { flex: none; width: 15px; height: 15px; color: var(--metin-3); }

.tnm-satir-sms { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 40px; align-items: start; }
.tnm-sms { flex: 1; min-width: 0; }
.tnm-sms > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; cursor: pointer; list-style: none; }
.tnm-sms > summary::-webkit-details-marker { display: none; }
.tnm-sms-onizleme { grid-column: 1; font-size: 12.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnm-sms-ac { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--mavi); }
.tnm-sms-ac .ikon { width: 15px; height: 15px; }
.tnm-sms[open] .tnm-sms-onizleme { display: none; }
.tnm-sms-form { display: grid; gap: 12px; margin-top: 12px; }
.tnm-sms-form > .dugme { justify-self: start; }


@media (max-width: 980px) {
  .ays-izgara { grid-template-columns: minmax(0, 1fr); }
  .ays-yeni { position: static; }
  .tnm-satir, .tnm-satir-sms { grid-template-columns: 1fr; gap: 8px; }
  .tnm-kisi { justify-self: start; }
}
.tnm-kisi-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Stok kartları ve depo stoğu
   ========================================================================== */
.bolge-radyo { position: relative; cursor: pointer; }
.bolge-radyo input { position: absolute; opacity: 0; pointer-events: none; }
.bolge-radyo input:checked + .bolge-sec { border-color: var(--ton); background: var(--ton); color: var(--ton-yazi); }
.bolge-radyo input:checked + .bolge-sec .ikon { color: currentColor; }
.bolge-radyo input:checked + .bolge-sec .bolge-nokta { background: currentColor; }
.bolge-radyo input:focus-visible + .bolge-sec { outline: 2px solid var(--ton); outline-offset: 2px; }
.liste-suzgec-form .bolge-suzgec { padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.stok-bag { color: var(--metin); text-decoration: none; }
.stok-bag:hover { color: var(--mavi); }
.stok-tablo td small, .tablo-sik td small.soluk { display: block; margin-top: 2px; font-size: 12px; }
.stok-adet { min-width: 48px; justify-content: center; font-variant-numeric: tabular-nums; }
.stok-kart-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.stok-kart-izgara > .kart { min-width: 0; }
.stok-form { display: grid; gap: 4px; }
.stok-form-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.stok-form-izgara .alan-genis { grid-column: 1 / -1; }
.stok-form-izgara .alan { align-content: start; }
.stok-form-izgara .alan-ipucu { margin-top: 0; }
.stok-seviye > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; color: var(--mavi); }
.stok-seviye > summary small { font-weight: 500; color: var(--metin-3); }
.stok-seviye > summary .ikon { width: 16px; height: 16px; }
.stok-seviye-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 980px) {
  .stok-kart-izgara, .stok-form-izgara { grid-template-columns: 1fr; }
}

/* Gönderimler, iade alma, sayım */
.gonderim-form .gorunum-cipleri { padding-bottom: 14px; }
.gonderim-urunler { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.gonderim-urunler-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gonderim-urunler-ust h3 { font-size: 15px; }
.gonderim-urunler-ust .alan-ipucu { margin-top: 2px; }
.gonderim-arac { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gonderim-yalniz { white-space: nowrap; font-size: 13px; }
.gonderim-tablo td { vertical-align: middle; }
.gonderim-tablo td:first-child { min-width: 280px; }
.gonderim-adet-kolon { width: 140px; }
.gonderim-adet { height: 38px; max-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.gonderim-tablo-kap { max-height: min(62vh, 640px); overflow-y: auto; }
.gonderim-tablo .gonderim-tek-kolon { display: none; }
.gonderim-tablo.gonderim-tek .gonderim-tek-kolon { display: table-cell; }
.gonderim-tablo td.sag small { display: block; font-size: 11.5px; }
.gonderim-urun { display: grid; gap: 1px; }
.gonderim-urun small { font-size: 12px; }
.gonderim-kullanilan > td { background: color-mix(in srgb, var(--mor-acik) 70%, var(--yuzey)); }
.gonderim-yazili > td:first-child { box-shadow: inset 3px 0 0 var(--mor); }
.tablo-ara-baslik > td { padding: 8px 12px; background: var(--yuzey-2); color: var(--metin-3); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.gonderim-ozet { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.gonderim-ozet.dolu { color: var(--mor-metin); }
.gonderim-bos { padding: 8px 2px; }
.gonderim-kime { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.gonderim-kime .ikon { width: 15px; height: 15px; color: var(--mor); }
.gonderim-olaylar { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.gonderim-olaylar li { display: grid; gap: 2px; padding: 10px 12px 10px 14px; border-radius: 8px; background: var(--yuzey-2); box-shadow: inset 3px 0 0 var(--mor); }
.gonderim-olaylar li span { font-size: 13px; color: var(--metin-2); }
.gonderim-bilgi { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.gonderim-bilgi dt { color: var(--metin-3); font-weight: 600; }
.gonderim-bilgi dd { margin: 0; }
.sayim-ekle { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.sayim-ekle .alan { flex: 1 1 320px; }
/* Bölge çipleri de satırı doldurur (kullanıcı, 19.10.2026) */
.bolge-suzgec > .bolge-sec, .bolge-suzgec > .bolge-radyo { flex: 1 1 auto; }
.bolge-suzgec > .bolge-sec, .bolge-radyo > .bolge-sec { justify-content: center; }
.bolge-radyo > .bolge-sec { width: 100%; }

/* Görünüm çipleri satırı doldurur (kullanıcı, 19.10.2026: içerik sağda boşluk bırakmadan ekran genişliğine yayılsın) */
.gorunum-cipleri > .gorunum-cip { flex: 1 1 auto; }
.gorunum-cipleri > .gorunum-cip > span { width: 100%; justify-content: center; }

/* Stok kartları listesi — eski OIM düzeni: stok grubuna göre başlık satırları, alış kırmızı, satış koyu yeşil kalın;
   yöneticide hücreler listede değişir (çift tıkla / kalem) */
.stok-grup-satir th {
  padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--ton) 25%, var(--cizgi));
  background: color-mix(in srgb, var(--ton-acik) 85%, #fff); color: var(--ton-metin); text-align: left;
}
.stok-grup-satir th .rozet { margin-left: 8px; }
.stok-grup-ad { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 750; letter-spacing: .01em; }
.stok-tablo .stok-kod { font-size: 12.5px; color: var(--metin-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stok-tablo .stok-ad { font-weight: 700; }
.stok-tablo .stok-alis { color: var(--kirmizi-metin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stok-tablo .stok-satis { color: var(--yesil-metin); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stok-tablo .stok-aciklama { max-width: 280px; color: var(--metin-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stok-tablo td.hizli { position: relative; cursor: text; }
.stok-tablo td.hizli:hover { background: color-mix(in srgb, var(--mavi-acik) 70%, #fff); }
.hizli-ac {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 6px; background: transparent; color: var(--mavi); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.hizli-ac .ikon { width: 14px; height: 14px; }
td.hizli:hover .hizli-ac, .hizli-ac:focus-visible { opacity: 1; }
.hizli-ac:hover { background: var(--mavi-acik); }
.hizli-ac:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }
.hizli-girdi { height: 32px; min-width: 120px; padding: 0 8px; font-weight: 650; }
.hizli-girdi.sag { text-align: right; }
td.hizli-kaydedildi { animation: hizli-parla 1.2s ease; }
@keyframes hizli-parla { 0% { background: var(--yesil-acik); } 100% { background: transparent; } }
.depo-gec { display: block; min-width: 260px; }
.depo-gec .girdi, .depo-gec .as-dugme { height: 40px; }
.soluk-bag { display: block; margin-top: 2px; font-size: 12px; color: var(--mor-metin); text-decoration: none; }
.soluk-bag:hover { color: var(--mor); }
@media (hover: none) { .hizli-ac { opacity: 1; } }

/* ==========================================================================
   Cari hesaplar ve ekstre (O4)
   ========================================================================== */
.ekstre-suzgec { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.ekstre-donem { margin: 0 0 10px; font-size: 13px; color: var(--metin-2); }
.ekstre-tablo td { vertical-align: top; }
.ekstre-tablo .ekstre-tarih { white-space: nowrap; }
.ekstre-tablo td .rozet { margin: 4px 4px 0 0; }
.ekstre-tablo tr.ekstre-devir td { background: var(--yuzey-2); }
.ekstre-tablo tr.ekstre-sayilmaz td { color: var(--metin-2); background: color-mix(in srgb, var(--amber-acik) 45%, transparent); }
.ekstre-sayilmayan { color: var(--amber-metin); font-weight: 650; }
.ekstre-tablo tfoot th { font-size: 12.5px; }
@media print {
  .ekstre-suzgec, [data-yazdir] { display: none !important; }
  .ekstre-tablo tr.ekstre-sayilmaz td { background: #fff7e6 !important; }
}
.cari-hareket-form { display: grid; gap: 14px; }
.cari-form-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.cari-form-izgara .alan-genis { grid-column: 1 / -1; }
.cari-form-izgara .alan { align-content: start; }
.cari-hareket-form .form-alt { margin-top: 0; }
.hd-ozet { margin: 0 0 12px; font-weight: 650; color: var(--metin); }
.hd-fatura { margin-top: 14px; }
.ekstre-eylem { width: 1%; white-space: nowrap; text-align: right; }
.ekstre-eylem .dugme-ikon { width: 32px; height: 32px; }
.ekstre-eylem .dugme-ikon + .dugme-ikon { margin-left: 4px; }
.ekstre-sil:hover { color: var(--kirmizi-metin); border-color: var(--kirmizi); }
.ekstre-kilit { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--metin-3); cursor: help; }
.ekstre-kilit .ikon { width: 15px; height: 15px; }
/* Kilitli satırdan düzeltildiği ekrana (K6) */
.ekstre-git { color: var(--indigo, var(--mavi)); }
.ekstre-git .ikon { width: 15px; height: 15px; }
/* Kurumsal tahsilatın tevkifatı / damgası (K6) */
.ekstre-tevkifat { display: block; margin-top: 2px; color: var(--mor-metin); font-size: 12px; font-weight: 600; }
@media print { .ekstre-eylem { display: none !important; } }

/* Cari kartı: kimlik bandı, sekmeli gövde (eski OIM kartı gibi), pencere formları */
.cari-baslik { flex-wrap: wrap; }
.cari-baslik .sayfa-baslik-metin { flex: 1 1 360px; min-width: 0; }
.cari-avatar {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 8px;
  background: var(--ton); color: var(--ton-yazi); font-size: 22px; font-weight: 800; letter-spacing: .02em; box-shadow: var(--golge-xs);
}
.cari-firma { margin-top: 2px; font-weight: 650; color: var(--metin-2); }
.cari-iletisim { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--metin-2); }
.cari-iletisim li { display: inline-flex; align-items: center; gap: 6px; }
.cari-iletisim .ikon { width: 15px; height: 15px; color: var(--ton); }
.kart.cari-dosya { padding: 0; overflow: hidden; }
.cari-dosya .dosya-sekmeler { padding: 8px 10px; }
.cari-dosya-govde { padding: 18px 20px 20px; }
.cari-panel[hidden] { display: none !important; }
.cari-panel-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cari-panel-ust p { margin: 0; color: var(--metin-3); font-size: 13px; }
.donem-cipleri, .hizli-cipler, .hf-turler, .secim-cipleri { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-turler > *, .secim-cipleri > * { flex: 1 1 140px; }
.hf-turler .bolge-sec, .secim-cipleri .bolge-sec { width: 100%; justify-content: center; }
.hizli-cip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: 8px; background: var(--yuzey-2); color: var(--metin-2);
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.hizli-cip:hover { border-color: var(--indigo); color: var(--indigo-metin); background: var(--indigo-acik); }
.hizli-cip.aktif { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.hizli-cip .ikon { width: 15px; height: 15px; }
.cari-hareket-form, #hareket-ekle .modal-govde, #hareket-duzelt .modal-govde, #bilgi-duzenle .modal-govde, #cari-ac .modal-govde { display: grid; gap: 16px; }
#hareket-ekle .modal-govde > .alan, #hareket-duzelt .modal-govde > .alan, #bilgi-duzenle .modal-govde > .alan, #cari-ac .modal-govde > .alan { margin: 0; }   /* aralık ızgaradan */
.cari-dosya .dosya-sekme { padding: 0 10px; }
.hf-tutar { display: grid; gap: 8px; }
.hf-tutar > label, .alan-etiket { font-weight: 650; font-size: 13.5px; color: var(--metin); }
.alan > .alan-etiket { display: block; margin-bottom: 2px; }
.tutar-girdi { position: relative; }
.tutar-girdi .girdi { height: 58px; padding-right: 46px; font-size: 26px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tutar-birim { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 750; color: var(--metin-3); pointer-events: none; }
.alan-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alan-baslik label { font-weight: 650; font-size: 13.5px; color: var(--metin); }
.hizli-bag { display: inline-flex; gap: 4px; }
.hizli-bag button {
  height: 24px; padding: 0 8px; border: 1px solid var(--cizgi-koyu); border-radius: 6px; background: var(--yuzey-2);
  color: var(--indigo-metin); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.hizli-bag button:hover { border-color: var(--indigo); background: var(--indigo-acik); }
.hf-donem { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.hf-donem .ikon { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.hf-fatura small { display: block; font-weight: 500; }
.hf-tevkifat { display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--cizgi); border-radius: 8px; }
.hf-tevkifat legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 13px; font-weight: 650; }
.hf-tevkifat legend .ikon { width: 14px; height: 14px; color: var(--mor-metin); }
.hf-tevkifat legend small { color: var(--metin-3); font-weight: 500; }
.hf-tevkifat-ozet { margin: 0; color: var(--mor-metin); font-weight: 600; }
.hf-tevkifat .tutar-girdi .girdi { height: auto; padding-right: 34px; font-size: inherit; font-weight: 600; }
.hd-ozet { margin: 0; }
.ekstre-suzgec .donem-cipleri { margin-bottom: 2px; }
.cari-ozet-serit { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; background: var(--yuzey-2); font-size: 13.5px; }
.cari-cihazlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cari-notlar { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cari-notlar li { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--cizgi); }
.cari-notlar li:last-child { border-bottom: 0; }
.cari-notlar li.sabit { background: var(--pembe-acik); border-radius: 8px; padding: 12px; }
.cari-notlar p { margin: 0 0 3px; color: var(--metin); font-size: 14px; line-height: 1.5; }
.cari-not-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--pembe-acik); color: var(--pembe-metin); font-size: 12px; font-weight: 800; }
/* Kart altı hatırlatmalar (K7) */
.cari-hatirlatmalar { display: grid; margin: 0; padding: 0; list-style: none; }
.cari-hatirlatmalar li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--cizgi); }
.cari-hatirlatmalar li:last-child { border-bottom: 0; }
.cari-hatirlatmalar li.gecikmis .ch-tarih { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.cari-hatirlatmalar li.bugun .ch-tarih { background: var(--amber-acik); color: var(--amber-metin); }
.cari-hatirlatmalar li.kapandi { opacity: .75; }
.ch-tarih { display: grid; flex: none; min-width: 104px; padding: 6px 10px; border-radius: 8px; background: var(--yuzey-2); text-align: center; }
.ch-tarih strong { font-size: 13.5px; font-weight: 750; }
.ch-tarih small { font-size: 11.5px; font-weight: 600; }
.ch-govde { flex: 1; min-width: 0; }
.ch-govde p { margin: 0 0 3px; color: var(--metin); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ch-tamam { color: var(--yesil-metin); }
.ch-kapanan { margin-top: 12px; }
.ch-kapanan summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--metin-2); }
.hf-vade-hatirlat { margin-top: 6px; font-size: 13px; }
.hf-vade-hatirlat small { display: block; font-weight: 500; color: var(--metin-3); }
.cari-bilgi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 22px; margin: 0; }
.cari-bilgi-izgara > div { min-width: 0; padding-bottom: 10px; border-bottom: 1px dashed var(--cizgi); }
.cari-bilgi-izgara > div.genis { grid-column: 1 / -1; }
.cari-bilgi-izgara dt { font-size: 12px; font-weight: 650; color: var(--metin-3); }
.cari-bilgi-izgara dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--metin); overflow-wrap: anywhere; }
@media (max-width: 720px) { .cari-avatar { width: 48px; height: 48px; font-size: 17px; } .tutar-girdi .girdi { font-size: 22px; } }
@media print {
  .cari-dosya .dosya-sekmeler, .cari-panel:not([data-cari-panel="hareketler"]), .cari-avatar, .donem-cipleri { display: none !important; }
  .cari-panel[data-cari-panel="hareketler"] { display: block !important; }
  .kart.cari-dosya { border: 0 !important; }
  .cari-dosya-govde { padding: 0 !important; }
}
.cari-baslik .etiket-rozet { max-width: 100%; white-space: normal; flex-wrap: wrap; }
.cari-not-govde { flex: 1; min-width: 0; }
.cari-not-eylem { display: flex; align-items: flex-start; gap: 4px; flex: none; }
.cari-not-eylem form { margin: 0; }
.cari-not-eylem .dugme-ikon { width: 32px; height: 32px; }
.cari-not-eylem .dugme-ikon.aktif { color: var(--pembe); border-color: var(--pembe); background: var(--pembe-acik); }
/* Cihaz (demirbaş) etiketi */
body.etiket-sayfa { margin: 0; padding: 24px; background: #f3f4f6; }
.etiket-eylem { max-width: 92mm; margin: 0 auto 12px; text-align: right; }
.etiket { box-sizing: border-box; width: 92mm; margin: 0 auto; padding: 4mm 5mm; border: 1px solid #111; border-radius: 4px; background: #fff; color: #111; font-size: 11px; }
.etiket-ust { display: flex; align-items: center; gap: 8px; padding-bottom: 3mm; border-bottom: 1px solid #111; }
.etiket-ust div { display: grid; line-height: 1.25; }
.etiket-ust small { color: #444; }
.etiket-baslik { margin: 2.5mm 0 2mm; font-size: 12.5px; letter-spacing: .06em; text-align: center; }
.etiket-musteri { margin: 0 0 2mm; }
.etiket-musteri span { color: #444; }
.etiket-tablo { width: 100%; border-collapse: collapse; }
.etiket-tablo th, .etiket-tablo td { padding: 1.2mm 1.5mm; border: 1px solid #111; text-align: left; vertical-align: top; }
.etiket-tablo th { width: 34%; font-weight: 700; background: #f3f4f6; }
@media print {
  body.etiket-sayfa { padding: 0; background: #fff; }
  .etiket-eylem { display: none; }
  .etiket { margin: 0; }
  @page { size: auto; margin: 6mm; }
}
/* Cihaz kartı: üstte çizim + ad / marka + düğmeler (yatay), altında bilgiler ve rozetler (tam genişlik) */
.cari-cihazlar { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cari-cihaz { display: grid; gap: 12px; align-content: start; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); box-shadow: var(--golge-xs); }
.cari-cihaz-ust { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cari-cihaz-cizim { flex: none; width: 56px; height: 56px; object-fit: contain; padding: 4px; border-radius: 8px; background: var(--teal-acik); }
.cari-cihaz-baslik { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cari-cihaz-baslik strong { font-size: 15px; line-height: 1.3; color: var(--metin); overflow-wrap: anywhere; }
.cari-cihaz-baslik span { font-size: 13px; color: var(--metin-3); }
.cari-cihaz-eylem { display: flex; align-items: center; gap: 4px; flex: none; }
.cari-cihaz-eylem form { margin: 0; display: flex; }
.cari-cihaz-eylem .dugme-ikon { width: 32px; height: 32px; }
.dugme-ikon-kilit { color: var(--metin-3); cursor: help; background: var(--yuzey-2); }
.cari-cihaz-bilgi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--cizgi); }
.cari-cihaz-bilgi > div { min-width: 0; }
.cari-cihaz-bilgi > div.genis { grid-column: 1 / -1; }
.cari-cihaz-bilgi dt { font-size: 11.5px; font-weight: 650; color: var(--metin-3); }
.cari-cihaz-bilgi dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; color: var(--metin); overflow-wrap: anywhere; }
.cari-cihaz-rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
.cari-cihaz-rozetler .rozet { white-space: normal; }
/* Cari bilgileri: silme bölümü (merkez) ve bilgi formunun özel fiyat bloğu */
.cari-sil-bolum { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--kirmizi) 22%, transparent); border-radius: 8px; background: var(--kirmizi-acik); }
.cari-sil-simge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: color-mix(in srgb, var(--kirmizi) 14%, transparent); color: var(--kirmizi); }
.cari-sil-simge .ikon { width: 20px; height: 20px; }
.cari-sil-metin { flex: 1; min-width: 0; }
.cari-sil-metin strong { color: var(--kirmizi-metin); }
.cari-sil-metin p { margin: 2px 0 0; font-size: 13px; color: var(--metin-2); }
.cari-sil-bolum form { margin: 0; flex: none; }
@media (max-width: 640px) { .cari-sil-bolum { flex-wrap: wrap; } .cari-sil-bolum form, .cari-sil-bolum .dugme { width: 100%; } }
.cari-ozel-fiyat { display: grid; gap: 10px; padding: 12px 14px; border: 1px dashed var(--cizgi-koyu); border-radius: 8px; }
.cari-ozel-fiyat .alan-ipucu .ikon { width: 14px; height: 14px; vertical-align: -2px; }
.cari-tekrar { padding: 10px 12px; border-radius: 8px; background: var(--amber-acik); }
.cari-sil-bolum.kapali { border-color: var(--cizgi); background: var(--yuzey-2); }
.cari-sil-bolum.kapali .cari-sil-simge { background: var(--gri-acik); color: var(--metin-3); }
.cari-sil-bolum.kapali .cari-sil-metin strong { color: var(--metin); }
/* Cari kartı: servis aç / düzenle (K4) */
.sf-isler { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px; }
.sf-isler .bolge-sec { width: 100%; justify-content: flex-start; }
.sf-isler .bolge-sec .ikon { opacity: .25; }
.sf-isler input:checked + .bolge-sec .ikon { opacity: 1; }
.sf-isler input:disabled + .bolge-sec { opacity: .6; cursor: not-allowed; }
.servis-sms { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--cizgi-koyu); border-radius: 8px; }
.servis-sms .onay-kutusu { flex-wrap: wrap; align-items: flex-start; }
.servis-sms .onay-kutusu small { flex-basis: 100%; padding-left: 28px; margin-top: -4px; }
.servis-sms .onay-kutusu:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.cari-servis-tablo td small { display: block; margin-top: 2px; }
.cari-servis-tablo tr.servis-pasif td { background: var(--yuzey-2); }
.cari-servis-tablo tr.servis-pasif td:first-child { box-shadow: inset 3px 0 0 var(--cizgi-koyu); }
.servis-eylem { display: inline-flex; align-items: center; gap: 4px; }
.servis-eylem form { margin: 0; display: flex; }
.servis-eylem .dugme-ikon { width: 32px; height: 32px; }
.servis-suzgec { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; background: var(--teal-acik); color: var(--metin); }
.servis-suzgec > .ikon { width: 18px; height: 18px; color: var(--teal); }
.servis-suzgec .dugme { margin-left: auto; }
.rozet-dugme { border: 0; cursor: pointer; font: inherit; }
.rozet-dugme:hover { filter: brightness(.95); text-decoration: none; }
.dugme-ikon-servis { color: var(--mavi); }
.sf-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-izgara .sf-iki { grid-column: span 2; }
.sf-izgara .secim-cipleri > * { flex-basis: 110px; }
@media (max-width: 640px) { .sf-izgara { grid-template-columns: minmax(0, 1fr); } .sf-izgara .sf-iki { grid-column: auto; } }
/* Stok bakiyesi bakım sayfası (PLAN-OIM-03) */
.stok-bakiye-islem { display: grid; gap: 0; padding: 0; }
.stok-bakiye-satir { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.stok-bakiye-satir + .stok-bakiye-satir { border-top: 1px solid var(--cizgi); }
.stok-bakiye-satir > div { flex: 1; min-width: 0; }
.stok-bakiye-satir h3 { margin: 0 0 4px; font-size: 15px; }
.stok-bakiye-satir p { margin: 0 0 6px; font-size: 13.5px; color: var(--metin-2); max-width: 820px; }
.stok-bakiye-satir form { margin: 0; flex: none; }
@media (max-width: 640px) { .stok-bakiye-satir { flex-wrap: wrap; } .stok-bakiye-satir form, .stok-bakiye-satir .dugme { width: 100%; } }
/* Cari formları: türe göre alan grupları */
.alan-grup { display: grid; gap: 10px; padding-top: 4px; }
.alan-grup-baslik { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--metin-3); }
.alan-grup-baslik .ikon { width: 15px; height: 15px; }
.cari-panel-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
#bilgi-duzenle .modal-govde, #cari-ac-musteri .modal-govde, #cari-ac-tedarikci .modal-govde, #cari-ac-bayi .modal-govde, #tur-degistir .modal-govde { display: grid; gap: 16px; }
#bilgi-duzenle .modal-govde > .alan, #cari-ac-musteri .modal-govde > .alan, #cari-ac-tedarikci .modal-govde > .alan, #cari-ac-bayi .modal-govde > .alan, #tur-degistir .modal-govde > .alan { margin: 0; }
/* Dönüşümler (PLAN-OIM-04 §2) */
.donusum-liste { display: grid; gap: 14px; }
.donusum { display: grid; gap: 12px; padding: 16px 18px; border-left: 4px solid var(--ton); }
.donusum-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.donusum-ust h3 { margin: 6px 0 0; font-size: 16px; }
.donusum-aciklama { margin: 0; font-size: 13.5px; color: var(--metin-2); max-width: 900px; }
.donusum-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.donusum-adimlar li { display: flex; align-items: flex-start; gap: 10px; }
.donusum-adimlar li small { display: block; margin-top: 2px; }
.donusum-isaret { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cizgi-koyu); color: #fff; }
.donusum-isaret .ikon { width: 14px; height: 14px; }
.donusum-adimlar li.tamam .donusum-isaret { border-color: var(--yesil); background: var(--yesil); }
.donusum-adimlar li.sirada .donusum-isaret { border-color: var(--mavi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 18%, transparent); }
.donusum-denetim { padding: 10px 12px; border-radius: 8px; background: var(--yuzey-2); font-size: 13px; }
.donusum-denetim ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.donusum-denetim .ikon { width: 14px; height: 14px; vertical-align: -2px; }
.donusum-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.donusum-dugmeler form { margin: 0; }
.donusum-suruyor { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mavi); }
.donusum-gecmis summary, .donusum-tamamlananlar > summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--metin-2); }
.donusum-gecmis ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; }
.donusum-gecmis small { display: block; }
.donusum-tamamlananlar { padding: 14px 18px; display: grid; gap: 12px; }
.donusum-tamamlananlar > summary { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.donusum-tamamlananlar[open] > summary { margin-bottom: 12px; }

/* Tedarikçinin öbür yetkilileri (PLAN-OIM-04): ad, görev, telefon, e-posta satırları */
.yetkili-liste { display: grid; gap: 8px; }
.yetkili-liste:empty { display: none; }
.yetkili-satir { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 36px; grid-template-areas: "ad gorev tel email sil"; gap: 8px; align-items: center; }
.yetkili-satir [name="yetkili_ad[]"] { grid-area: ad; }
.yetkili-satir [name="yetkili_gorev[]"] { grid-area: gorev; }
.yetkili-satir [name="yetkili_tel[]"] { grid-area: tel; }
.yetkili-satir [name="yetkili_email[]"] { grid-area: email; }
.yetkili-satir .dugme-ikon { grid-area: sil; width: 36px; height: 36px; }
.yetkili-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.yetkili-alt .alan-ipucu { margin: 0; }
/* Grup / marka seçimi: çipler içerik genişliğinde (son satır yayılmaz) */
.secim-cipleri.cipler-serbest > * { flex: 0 0 auto; }
.secim-cipleri.cipler-serbest .bolge-sec { width: auto; padding-inline: 14px; }
.girdi-iban { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cari-form-izgara .alan-iban { grid-column: span 2; }
.cari-bilgi-izgara dd { white-space: pre-line; }
@media (max-width: 720px) {
  .yetkili-satir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; grid-template-areas: "ad ad sil" "gorev tel tel" "email email email"; padding-bottom: 10px; border-bottom: 1px dashed var(--cizgi); }
  .cari-form-izgara .alan-iban { grid-column: 1 / -1; }
}

/* Servis hesabı (PLAN-OIM-02 K5) */
.servis-kalem-tablo tfoot td, .servis-kalem-tablo tfoot th { padding-top: 6px; padding-bottom: 6px; }
.servis-kalem-tablo tfoot .toplam-satir th { font-size: 15px; border-top: 2px solid var(--cizgi); }
.kdv-form { display: inline-flex; align-items: center; gap: 8px; }
.kdv-form label { font-weight: 600; }
.girdi-kucuk { min-height: 32px; padding: 4px 8px; width: auto; }
.alt-baslik { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 14px; }
.alt-baslik .ikon { width: 16px; height: 16px; color: var(--mor); }
.alt-baslik small { font-weight: 500; }
.alan-dar { max-width: 160px; }
.bos-kutu-metin { margin: 4px 0; color: var(--metin-3); }
.metin-dugme { border: 0; background: none; padding: 0; color: var(--mavi); font: inherit; font-weight: 650; cursor: pointer; }
.metin-dugme:hover { color: var(--mavi-koyu); }
.soru-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.soru-kart { border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.soru-kart.bekliyor { border-color: var(--turuncu); box-shadow: inset 3px 0 0 var(--turuncu); }
.soru-kart h4 { margin: 0; font-size: 14.5px; }
.soru-kart p { margin: 0; font-size: 13px; }
.soru-cevap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Servis hesabı: çok satırlı kalem / iade, online kart (PLAN-OIM-02 K5) */
.kalem-satirlar { display: grid; gap: 10px; }
.kalem-satir { display: grid; grid-template-columns: minmax(0, 1fr) 110px 36px; gap: 10px; align-items: end; }
.kalem-satir .alan { margin: 0; }
.kalem-satir .alan-dar { max-width: none; }
.kalem-satir .dugme-ikon { width: 36px; height: 40px; }
.online-kart { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--mavi-acik); }
.online-kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 14px; }
.online-kart-izgara .alan-genis { grid-column: span 2; }
.kart-tarih { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.online-cekildi { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--yesil); }
.online-cekildi .ikon { width: 18px; height: 18px; }
.online-kart > .dugme { justify-self: start; }
.banka-cerceve { width: min(720px, calc(100vw - 32px)); }
.banka-iframe { width: 100%; height: min(560px, 70vh); border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: #fff; }
.odeme-sonuc { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 8px 0; }
.odeme-sonuc h1 { margin: 0; font-size: 20px; }
.odeme-sonuc p { margin: 0; }
.odeme-sonuc-simge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ton, var(--mavi)); color: #fff; }
.odeme-sonuc-simge .ikon { width: 28px; height: 28px; }
.odeme-deneme-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
@media (max-width: 720px) {
  .kalem-satir { grid-template-columns: minmax(0, 1fr) 80px 36px; }
  .online-kart-izgara .alan-genis { grid-column: 1 / -1; }
}
.kalem-satir + .kalem-satir .alan-etiket { display: none; }   /* başlıklar yalnız ilk satırda */

/* Ofis satışı (servissiz satış fişi): fiyatlı satır, toplam önizlemesi, peşin tahsilat; kartta fiş kalemleri */
.kalem-satir.kalem-satir-fiyatli { grid-template-columns: minmax(0, 1fr) 90px 140px 36px; }
.satis-ozet { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--mavi-metin); }
.satis-ozet:empty { display: none; }
.satis-pesin { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yesil-acik); }
.fis-kalemler summary { cursor: pointer; font-variant-numeric: tabular-nums; color: var(--mavi-metin); font-weight: 600; }
.fis-kalemler ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; min-width: 280px; text-align: left; font-size: 12.5px; }
.fis-kalemler li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: baseline; }
.fis-kalemler li > span:first-child { overflow-wrap: anywhere; }
.fis-kalemler li > .soluk, .fis-kalemler li > strong { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 720px) {
  .kalem-satir.kalem-satir-fiyatli { grid-template-columns: minmax(0, 1fr) 70px 110px 36px; }
}
@media (max-width: 480px) {
  .kalem-satir.kalem-satir-fiyatli { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .kalem-satir.kalem-satir-fiyatli > .alan:first-child { grid-column: 1 / -1; }
  .kalem-satir.kalem-satir-fiyatli + .kalem-satir .alan-etiket { display: block; }
  .fis-kalemler ul { min-width: 0; }
}
.ekstre-onay { color: var(--yesil-metin); border-color: color-mix(in srgb, var(--yesil) 40%, transparent); background: var(--yesil-acik); }
.ekstre-onay:hover { color: #fff; background: var(--yesil); border-color: var(--yesil); }

/* İade deposu ekranında (bölge depo sorumlusu) satır seçimi */
.iade-sec-kolon { width: 44px; }
.iade-sec { width: 18px; height: 18px; accent-color: var(--turuncu); cursor: pointer; vertical-align: middle; }

/* Depolar: bölge başına ofis depoları (kutucuk) + teknisyen depoları (tablo) + kullanılmayanlar (katlanır) */
.dp-kart > .kart-ust { margin-bottom: 4px; flex-wrap: wrap; }
.dp-bolge + .dp-bolge { margin-top: 28px; }
.dp-bolge[hidden] { display: none; }
.dp-bolge-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0 10px; border-bottom: 1px solid var(--cizgi); }
.dp-bolge-ad { font-size: 16px; font-weight: 700; }
.dp-bolge-sayi { font-size: 13px; }
.dp-ofis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.dp-kutu { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--cizgi); border-top: 3px solid var(--ton); border-radius: var(--yaricap-b); background: var(--yuzey); box-shadow: var(--golge-kart); transition: box-shadow .15s, border-color .15s; }
.dp-kutu:hover { box-shadow: var(--golge-ust); border-color: color-mix(in srgb, var(--ton) 35%, var(--cizgi)); border-top-color: var(--ton); }
.dp-kutu[hidden] { display: none; }
.dp-kutu-ust { display: flex; align-items: flex-start; gap: 10px; }
.dp-kutu-ust .simge-kutu { flex: none; width: 38px; height: 38px; }
.dp-kutu-baslik { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dp-kutu-ad { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dp-kutu-tur { font-size: 12.5px; font-weight: 600; color: var(--ton-metin); }
.dp-ad-dugme { flex: none; width: 32px; height: 32px; }
.dp-sayilar { display: flex; gap: 22px; }
.dp-sayi { display: grid; gap: 1px; }
.dp-sayi strong { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--metin); }
.dp-sayi span { font-size: 12px; color: var(--metin-3); }
.dp-kisi { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-kisi .ikon { flex: none; width: 15px; height: 15px; color: var(--metin-3); }
.dp-not { margin: -4px 0 0; font-size: 12.5px; color: var(--metin-3); }
.dp-kutu-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.dp-alt-baslik { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--metin); }
.dp-alt-baslik .ikon { width: 17px; height: 17px; color: var(--metin-3); }
.dp-tablo td { vertical-align: middle; }
.dp-tablo tr[hidden] { display: none; }
.dp-kisi-hucre { display: inline-flex; align-items: center; gap: 8px; }
.dp-kisi-hucre .ikon { flex: none; width: 16px; height: 16px; color: var(--metin-3); }
.dp-ad-hucre { color: var(--metin-2); font-size: 13px; }
.dp-stok-hucre { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-islem { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dp-katla { margin-top: 18px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--yuzey-2); }
.dp-katla > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 650; font-size: 13.5px; }
.dp-katla > summary::-webkit-details-marker { display: none; }
.dp-katla > summary .ikon { width: 16px; height: 16px; color: var(--metin-3); transition: transform .15s; }
.dp-katla[open] > summary .ikon { transform: rotate(180deg); }
.dp-katla > summary .soluk { font-weight: 400; font-size: 12.5px; }
.dp-katla > .tablo-kap { margin: 0 12px 12px; background: var(--yuzey); }
@media (max-width: 720px) {
  .dp-ofis { grid-template-columns: minmax(0, 1fr); }
  .dp-kart .tnm-ara { width: 100%; }
  .dp-tablo-tek .dp-ad-hucre { display: none; }
}

/* Sayım raporları: fark çıkmayan satır soluk; "Neden?" dökümü (pencere) */
.soluk-satir > td { color: var(--metin-3); }
.dokum-ozet { margin: 0 0 12px; line-height: 1.6; }
.dokum-baslik { margin: 16px 0 8px; font-size: 13.5px; font-weight: 700; }
.dokum-turler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.dokum-turler li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); font-size: 13px; }
.dokum-turler strong { font-variant-numeric: tabular-nums; }
.dokum-tablo-kap { max-height: 46vh; overflow-y: auto; }
.dokum-bu > td { background: var(--mor-acik); font-weight: 650; }
.uyari-satir { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--yaricap); background: var(--amber-acik); color: var(--amber-metin); font-size: 13px; }
.uyari-satir .ikon { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* Arama en az 3 harfle: 1–2 harf yazılmış kutu (aranmıyor) */
.girdi.ara-kisa { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }

/* Sayım denetimi: bildirim şeridi, fatura bağlantıları */
.sr-ayar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.sr-ayar p { flex: 1; margin: 0; font-size: 13.5px; color: var(--metin-2); }
.sr-ayar .simge-kutu { flex: none; width: 34px; height: 34px; }
.sr-uyari { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.sr-uyari-bekliyor { border-color: color-mix(in srgb, var(--amber) 45%, var(--cizgi)); background: var(--amber-acik); }
.sr-uyari-metin { flex: 1; display: grid; gap: 2px; }
.sr-uyari-metin p { margin: 0; font-size: 13.5px; color: var(--metin-2); }
.sr-uyari .simge-kutu { flex: none; }
.sr-belge { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: var(--yaricap-k); background: var(--yesil-acik); font-size: 12.5px; color: var(--yesil-metin); }
.sr-belge > .ikon { flex: none; width: 14px; height: 14px; }
.sr-belge > span { flex: 1; min-width: 0; }
.sr-belge form { margin: 0; }
.sr-belge .dugme-ikon { width: 26px; height: 26px; }
.sr-islem { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
td.sag > small { display: block; font-size: 11.5px; }
@media (max-width: 720px) {
  .sr-ayar, .sr-uyari { flex-wrap: wrap; }
}

/* Depo / zimmet ekstresi: depo ve dönem süzgeci, altı toplam kutucuğu, ürün tablosu (sayım farkı işaretli); yazdırınca imza alanı */
.de-baslik .kart-ust { margin-bottom: 0; flex-wrap: wrap; }
.kart-ust-sag { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.de-kutucuklar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1500px) { .de-kutucuklar { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .de-kutucuklar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .de-kutucuklar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .de-kutucuklar .kutucuk { padding: 12px; gap: 10px; }
  .de-kutucuklar .kutucuk-simge { display: none; }
  .de-kutucuklar .kutucuk-deger { font-size: 22px; }
}
.de-tablo td, .de-tablo th { font-variant-numeric: tabular-nums; }
.de-tablo td small { display: block; }
.de-tablo tr.de-sayim-farki > td { background: var(--amber-acik); }
.de-eylem { width: 1%; white-space: nowrap; text-align: right; }
.de-eylem .dugme-ikon { width: 32px; height: 32px; }
.de-imza { display: none; }
@media print {
  .de-eylem, .kart-ust-sag, .de-ekranda, .de-sayfa-baslik p, .de-sayfa-baslik .etiket-rozet { display: none !important; }
  .de-kutucuklar .kutucuk { padding: 8px 10px !important; }
  .de-kutucuklar .kutucuk-simge { display: none !important; }
  .de-kutucuklar .kutucuk-deger { font-size: 17px !important; }
  .de-kutucuklar .kutucuk-etiket, .de-kutucuklar .kutucuk-not { font-size: 9.5px !important; }
  .de-kutucuklar { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .de-tablo tr.de-sayim-farki > td { background: #fff7e6 !important; }
  .de-imza { display: grid !important; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 26px; break-inside: avoid; font-size: 11px; }
  .de-imza > div { display: grid; gap: 4px; }
  .de-imza-tarih { grid-column: 1 / -1; margin: 0; color: #475569; }
  .de-imza-cizgi { display: block; height: 34px; border-bottom: 1px solid #64748b; }
  .de-imza small { color: #64748b; }
}

/* Sayım raporu görünümleri: görünüm çipleri, tekrarlayan fark uyarısı, belgesiz girişler (iki dönem başlıklı tablo) */
.sr-gorunum { padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.sr-gorunum .secim-cip span { width: 100%; }
.sr-tekrar-uyari { align-items: flex-start; }
.sr-tekrar-ozet { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--metin-2); }
.sr-tekrar-ozet li + li { margin-top: 2px; }
.sr-belgesiz th.sr-donem { text-align: center; border-bottom: 1px solid var(--cizgi); }
.sr-belgesiz .sr-donem-once { border-left: 1px solid var(--cizgi); }
.sr-belgesiz td small, .sr-belgesiz tfoot th small { display: block; }
@media print { .sr-gorunum, .sr-tekrar-uyari .dugme { display: none !important; } }

/* Teknisyen kasası: sekmeli kart, teslim tutarları, teslim satırları, yazdırılabilir teslim fişi */
.tk-sekmeli .dosya-sekmeler { margin-bottom: 16px; }
.tk-panel > .liste-suzgec-form { margin-bottom: 12px; }
.tk-tutarlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; margin-bottom: 14px; }
.tk-hareket tr.tk-teslim-satir > td { background: var(--yesil-acik); }
.tk-hareket td small, .tk-teslimler td small, .tk-liste td small { display: block; }
.tk-yeni-fis { align-items: center; }
.tk-kontrol-not { margin-top: 14px; }
.tk-fis-ust { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 18px; margin-bottom: 16px; }
.tk-fis-ust > div { display: grid; gap: 2px; }
.tk-fis-ust .soluk { font-size: 12px; }
.tk-fis-not { margin: 12px 0 0; font-size: 13.5px; }
.tk-imza { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 30px; }
.tk-imza > div { display: grid; gap: 4px; }
.tk-imza .de-imza-tarih { grid-column: 1 / -1; margin: 0; color: var(--metin-3); font-size: 12px; }
.tk-imza .de-imza-cizgi { display: block; height: 44px; border-bottom: 1px solid var(--cizgi-koyu); }
@media (max-width: 640px) { .tk-imza { grid-template-columns: 1fr; } }
@media print {
  .tk-fis-baslik p, .tk-fis-baslik .etiket-rozet { display: none !important; }
  .tk-imza { display: grid !important; }
}
.tk-panel > .alan-ipucu, .tk-panel .tablo-kap + .alan-ipucu { margin-top: 12px; }
@media (max-width: 640px) {
  .tk-kutucuklar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tk-kutucuklar .kutucuk { padding: 12px; gap: 10px; }
  .tk-kutucuklar .kutucuk-simge { display: none; }
  .tk-kutucuklar .kutucuk-deger { font-size: 22px; }
}
.tk-cift td small { display: block; }

/* Kasa defteri: kasa çipleri, kutucuklar, satır türleri, kategori penceresi */
.kd-kasalar { padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.kd-kasalar .secim-cip span { width: 100%; }
.kd-baslik .kart-ust { margin-bottom: 0; flex-wrap: wrap; }
.kd-tablo td small { display: block; }
.kd-tablo .rozet { margin-right: 6px; }
.kd-eylem { width: 1%; white-space: nowrap; text-align: right; }
.kd-eylem form { display: inline; }
.kd-eylem .dugme-ikon { width: 32px; height: 32px; }
.kd-tablo tr.kd-teslim > td, .kd-tablo tr.kd-tahsilat > td { background: var(--yuzey-2); }
.kd-kat-form { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px 56px auto; gap: 8px; align-items: center; }
.kd-kat-form .girdi { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.kd-kategoriler td { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 640px) {
  .kd-kutucuklar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kd-kutucuklar .kutucuk { padding: 12px; gap: 10px; }
  .kd-kutucuklar .kutucuk-simge { display: none; }
  .kd-kutucuklar .kutucuk-deger { font-size: 22px; }
  .kd-kat-form { grid-template-columns: 1fr 1fr; }
}
@media print { .kd-eylem, .kd-kasalar, .kd-baslik .kart-ust-sag { display: none !important; } }
.kd-kat-bas { font-size: 12px; font-weight: 700; color: var(--metin-3); text-transform: none; }

/* Banka hesapları: hesap kartları */
.bk-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bk-kart { display: grid; gap: 12px; align-content: start; }
.bk-kart-ust { display: flex; align-items: center; gap: 12px; }
.bk-kart-ad { flex: 1; display: grid; min-width: 0; }
.bk-kart-ad strong { font-size: 15px; }
.bk-kart-ad .soluk { font-size: 12.5px; }
.bk-bakiye { display: grid; gap: 2px; }
.bk-bakiye strong { font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk-bakiye .soluk:first-child { font-size: 12px; }
.bk-iban { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--metin-2); }
.bk-iban small { display: block; font-family: inherit; }
.bk-kart-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-pasif { opacity: .62; }

/* Çek / senet: plan bölücü, plan satırları, tahsil yeri çipleri */
.cs-bol { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 6px 0 12px; padding: 12px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap); }
.cs-bol > strong { align-self: center; margin-right: 4px; }
.cs-bol label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--metin-2); }
.cs-bol .girdi { min-width: 120px; }
.cs-plan .girdi { min-height: 36px; }
.cs-plan td:first-child { width: 36px; color: var(--metin-3); }
.cs-yerler { margin-bottom: 14px; }
.cs-yerler .secim-cip span { width: 100%; }
.cs-tablo td small { display: block; }
/* Kasa defteri: dekontun ödeme şekli (nakit / havale / kart) */
.kd-odeme { display: grid; gap: 6px; }
.kd-odeme-baslik { font-size: 13px; font-weight: 700; color: var(--metin-2); }
.kd-sekiller .secim-cip span { width: 100%; }

/* Batak müşteri uyarısı (K9): kaldır düğmesi sağda, dar ekranda alta iner */
.cari-batak { flex-wrap: wrap; align-items: center; }
.cari-batak > span { min-width: 220px; }
.cari-batak form { flex: none; margin: 0; }


/* ==========================================================================
   Teklif (K9): pencere satırları ve toplam, kart listesi, yazdırılan belge
   ========================================================================== */
.teklif-pencere { width: min(1040px, calc(100vw - 32px)); }
.kalem-satir.kalem-satir-teklif { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 76px 130px 120px 36px; }
.teklif-satir-tutar output { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* .girdi ile aynı yükseklik: başlıklar hizalı */
.teklif-toplam { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--mor-acik); }
.teklif-toplam > .alan { width: 180px; margin: 0; }
.teklif-toplam-liste { display: grid; gap: 4px; margin: 0; min-width: 260px; font-variant-numeric: tabular-nums; }
.teklif-toplam-liste > div { display: flex; justify-content: space-between; gap: 24px; }
.teklif-toplam-liste dt { color: var(--metin-2); }
.teklif-toplam-liste dd { margin: 0; font-weight: 600; }
.teklif-toplam-liste .teklif-genel { padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--mor) 25%, transparent); font-size: 16px; }
.teklif-toplam-liste .teklif-genel dt, .teklif-toplam-liste .teklif-genel dd { color: var(--mor-metin); font-weight: 750; }
.teklif-eylem { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; }
.teklif-eylem form { margin: 0; }
.teklif-eylem .dugme-ikon { width: 32px; height: 32px; }
.teklif-kabul:hover { color: var(--yesil-metin); border-color: var(--yesil); }
.teklif-tablo td small { display: block; }
@media (max-width: 860px) {
  .kalem-satir.kalem-satir-teklif { grid-template-columns: minmax(0, 1fr) 70px 110px 100px 36px; }
  .kalem-satir.kalem-satir-teklif > .alan:first-child { grid-column: 1 / -1; }
  .kalem-satir.kalem-satir-teklif > .alan:nth-child(2) { grid-column: 1 / 2; }
  .kalem-satir.kalem-satir-teklif + .kalem-satir .alan-etiket { display: block; }
  .kalem-satir.kalem-satir-teklif + .kalem-satir { padding-top: 10px; border-top: 1px dashed var(--cizgi); }
}
@media (max-width: 520px) {
  /* ürün + kaldır düğmesi üstte, açıklama altında, adet · fiyat · tutar en altta (fiyat kutusu dar kalmasın) */
  .kalem-satir.kalem-satir-teklif { grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, .75fr) 36px; }
  .kalem-satir.kalem-satir-teklif > .alan:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .kalem-satir.kalem-satir-teklif > [data-kalem-satir-sil] { grid-column: 4; grid-row: 1; }
  .kalem-satir.kalem-satir-teklif > .alan:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .kalem-satir.kalem-satir-teklif > .alan:nth-child(3) { grid-column: 1; grid-row: 3; }
  .kalem-satir.kalem-satir-teklif > .alan:nth-child(4) { grid-column: 2; grid-row: 3; }
  .kalem-satir.kalem-satir-teklif > .alan:nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
  .teklif-toplam > .alan, .teklif-toplam-liste { width: 100%; min-width: 0; }
}

/* Yazdırılan teklif: ekranda kâğıt önizlemesi, baskıda yalnız belge (A4) */
.teklif-belge { display: grid; gap: 18px; max-width: 900px; padding: 32px 36px; color: var(--metin); }
.tb-ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; padding-bottom: 18px; border-bottom: 2px solid var(--mor); }
.tb-firma { display: flex; gap: 16px; align-items: flex-start; }
.tb-firma > div { display: grid; gap: 2px; font-size: 12.5px; color: var(--metin-2); }
.tb-firma strong { font-size: 15px; color: var(--metin); }
.tb-logo { width: 150px; height: auto; }
.tb-baslik { text-align: right; }
.tb-baslik h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; color: var(--mor-metin); }
.tb-baslik dl { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.tb-baslik dl > div { display: flex; justify-content: flex-end; gap: 12px; }
.tb-baslik dt { color: var(--metin-2); }
.tb-baslik dd { margin: 0; min-width: 84px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tb-musteri { display: grid; gap: 2px; font-size: 13px; }
.tb-musteri strong { font-size: 15px; }
.tb-giris { margin: 0; }
.tb-kalemler { font-size: 13px; }
.tb-kalemler td small { display: block; color: var(--metin-2); }
.tb-kalemler .tb-sira { width: 32px; color: var(--metin-2); }
.tb-kalemler td.sag { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 32px; }
.tb-sartlar { flex: 1 1 320px; font-size: 12.5px; color: var(--metin-2); }
.tb-sartlar ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.tb-not { margin: 10px 0 0; color: var(--metin); }
.tb-toplam { display: grid; gap: 4px; margin: 0; min-width: 280px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tb-toplam > div { display: flex; justify-content: space-between; gap: 28px; }
.tb-toplam dt { color: var(--metin-2); }
.tb-toplam dd { margin: 0; font-weight: 600; }
.tb-toplam .tb-genel { margin-top: 4px; padding: 8px 10px; border-radius: var(--yaricap); background: var(--mor-acik); font-size: 16px; }
.tb-toplam .tb-genel dt, .tb-toplam .tb-genel dd { color: var(--mor-metin); font-weight: 750; }
.tb-imza { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 10px; font-size: 12px; }
.tb-imza > div { display: grid; gap: 4px; }
.tb-imza .de-imza-cizgi { display: block; height: 40px; border-bottom: 1px solid var(--metin-3); }
.tb-imza small { color: var(--metin-3); }
.tb-saygi { margin: 0; font-size: 12.5px; color: var(--metin-2); }
@media (max-width: 600px) {
  .teklif-belge { padding: 20px 16px; }
  .tb-baslik { text-align: left; }
  .tb-baslik dl > div { justify-content: flex-start; }
  .tb-toplam { min-width: 0; width: 100%; }
  .tb-imza { grid-template-columns: 1fr; gap: 18px; }
}
@media print {
  .teklif-yazdir-baslik { display: none !important; }
  .kart.teklif-belge { max-width: none; padding: 0 !important; border: 0 !important; gap: 12px; }
  .tb-ust { border-bottom-color: #6d28d9 !important; }
  .tb-kalemler { font-size: 11px !important; }
  .tb-kalemler th, .tb-kalemler td { padding: 5px 6px !important; }
  .tb-toplam .tb-genel { background: #f4f1ff !important; }
  .tb-imza, .tb-alt { break-inside: avoid; }
}