/* ==========================================================================
   MasaşNet Portal — Stil
   ==========================================================================
   KAYNAK: desktop/masasnet/ui/theme.py
   Renkler, ölçüler ve yazı ölçeği ORADAN alındı; birebir aynı değerler.
   theme.py başlığındaki kural bu dosya için de geçerli:
   "iki arayüz yan yana konduğunda aynı ürün gibi görünmeli."

   apps/dahililer/css/dahililer.css de aynı paleti kullanıyor. Bir renk
   değişecekse ÜÇÜ birlikte değişmeli, yoksa portal ile içine gömülü
   uygulama farklı görünür.

   ÖLÇEK (--olcek)
   theme.py'deki Metrics.from_scale ile aynı kural:
     ölçeklenen    → yazı boyutları, kart ölçüleri, simge kutusu, alan
                     yüksekliği, üst şerit yüksekliği
     ölçeklenmeyen → köşe yarıçapı, kenarlık kalınlığı, sayfa boşluğu
   Sebep: yazı büyürken kenarlığın da büyümesi tasarımı kabalaştırıyor.
   Ölçek adımları core/prefs.py SCALES ile aynı: 1 · 1,125 · 1,25 · 1,4

   TEMA ÜÇ DURUMLU
     data-theme="light" → her zaman açık
     data-theme="dark"  → her zaman koyu
     öznitelik yok      → işletim sistemi ayarına uy (prefers-color-scheme)
   ========================================================================== */

:root {
  --olcek: 1;

  /* --- Marka (logo mavisi #005DAB, logo grisi #A1A1A5) --- */
  --marka: #005dab;
  --marka-guclu: #004a88;
  --marka-yumusak: #eaf3fb;
  --logo-gri: #a1a1a5;

  /* --- Yüzeyler --- */
  --zemin: #f4f7fa;
  --yuzey: #ffffff;
  --yuzey-2: #f8fafc;
  --kenar: #e3e9f0;
  --kenar-guclu: #cfd9e4;

  /* --- Yazı --- */
  --yazi: #16202b;
  --yazi-soluk: #55677a;
  --yazi-sessiz: #8494a5;

  /* --- Durum (vurgu renginden ayrı: yalnız iş durumunu anlatır) --- */
  --ton-eylem: #d14343;
  --ton-uyari: #b26a00;
  --ton-artis: #1e8e5a;

  /* --- Kategori ve ürün vurguları --- */
  --v-erp: #005dab;
  --v-rapor: #0e7a6e;
  --v-uretim: #a96a08;
  --v-ofis: #4a5a6a;
  --v-ik: #5b4b9e;
  --v-satis: #9e3b5c;
  --v-kurumsal: #4a5a6a;
  --v-netsis: #b72d2d;
  --v-powerbi: #b07e08;
  --v-excel: #107c41;
  --v-word: #18509e;
  --v-teams: #5a5ca8;
  --v-outlook: #006ab0;
  --v-sharepoint: #037476;

  /* --- BT panelinden seçilebilen kart renkleri ---
     core/app_admin.ACCENT_CHOICES ile AYNI adlar. Oradaki listeye bir renk
     eklenirse buraya da eklenmeli; yoksa kart sessizce grup rengine düşer.

     Değerler koyu temada ayrıca tanımlı: aynı renk açık zeminde koyu,
     koyu zeminde açık olmak zorunda — yoksa metin okunmaz hâle geliyor
     (grup etiketi bu renkle yazılıyor). */
  --v-mavi: #005dab;
  --v-lacivert: #1f3a68;
  --v-turkuaz: #067c86;
  --v-yesil: #16794f;
  --v-mor: #5b4b9e;
  --v-bordo: #96304c;
  --v-turuncu: #a55a0a;
  --v-gri: #4a5a6a;

  /* Teams'in kurumsal moru. Yalnız "Teams'te Yaz" düğmesinde kullanılıyor;
     ürünün kendi rengi olduğu için düğme tanınır oluyor. Vurgu paletinden
     AYRI duruyor: kart rengi olarak seçilebilir bir ton değil. */
  --teams: #5b5fc7;
  --teams-guclu: #4a4ea8;
  --teams-yumusak: #eef0fc;

  /* --- Gölge --- */
  --golge: 0 1px 2px rgb(16 32 48 / 6%);
  --golge-kalk: 0 6px 16px -4px rgb(16 32 48 / 14%);

  /* --- Giriş ekranı fotoğrafı ve perdesi --- */
  --foto-saydam: 0.88;
  --perde-ust: rgb(255 255 255 / 28%);
  --perde-orta: rgb(255 255 255 / 46%);
  --perde-alt: rgb(255 255 255 / 94%);

  /* --- Köşe yarıçapı ve kenarlık: ÖLÇEKLENMEZ --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-hap: 999px;
  --kenar-kalinlik: 1px;
  --sayfa-bosluk: 24px;

  /* --- Yazı boyutları: theme.py Metrics ile aynı (rem × 16 × ölçek) --- */
  --f-xs: calc(11px * var(--olcek));
  --f-sm: calc(13px * var(--olcek));
  --f-base: calc(15px * var(--olcek));
  --f-md: calc(16px * var(--olcek));
  --f-lg: calc(20px * var(--olcek));
  --f-xl: calc(28px * var(--olcek));

  /* --- Yerleşim ölçüleri: ölçeklenir --- */
  --ust-serit-h: calc(64px * var(--olcek));
  --kart-min-g: calc(200px * var(--olcek));
  --kart-h: calc(148px * var(--olcek));
  --simge-kutu: calc(52px * var(--olcek));
  --simge-cizim: calc(26px * var(--olcek));
  --izgara-bosluk: calc(14px * var(--olcek));
  --alan-h: calc(44px * var(--olcek));
  --dugme-h: calc(48px * var(--olcek));
  --logo-h: calc(44px * var(--olcek));
  /* Giriş kartı: login_window.py kartı card_min_w × 2,0 yapıyor. Oradaki
     not bunu ölçerek bulmuş — daha darında hata metni sarıp alanların
     üstüne biniyordu. */
  --giris-kart-g: calc(392px * var(--olcek));
}

/* Koyu tema — sistem ayarı. data-theme="light" varsa devreye GİRMEZ:
   kullanıcının portalda yaptığı seçim sistemden güçlüdür. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marka: #4a9be0;
    --marka-guclu: #7bb8ec;
    --marka-yumusak: #12283c;

    --zemin: #0d141c;
    --yuzey: #16212d;
    --yuzey-2: #1b2836;
    --kenar: #26374a;
    --kenar-guclu: #33485e;

    --yazi: #e7eef6;
    --yazi-soluk: #a6b6c7;
    --yazi-sessiz: #7d8fa2;

    --ton-eylem: #e86a6a;
    --ton-uyari: #d89a3c;
    --ton-artis: #4fbf8b;

    --v-erp: #5ca5e2;
    --v-rapor: #3eb0a0;
    --v-uretim: #d8983c;
    --v-ofis: #96a8ba;
    --v-ik: #9686e0;
    --v-satis: #e07a9e;
    --v-kurumsal: #96a8ba;
    --v-netsis: #e86e6e;
    --v-powerbi: #e2b03c;
    --v-excel: #48be82;
    --v-word: #6ca8ec;
    --v-teams: #9698e2;
    --v-outlook: #5cb0e8;
    --v-sharepoint: #46bec0;


    --v-mavi: #5ca5e2;
    --v-lacivert: #7d9ad0;
    --v-turkuaz: #46bec0;
    --v-yesil: #4fbf8b;
    --v-mor: #9686e0;
    --v-bordo: #e07a9e;
    --v-turuncu: #dc9a4c;
    --v-gri: #96a8ba;

    --teams: #8b8ee0;
    --teams-guclu: #a5a8ea;
    --teams-yumusak: #22244a;

    --golge: 0 1px 2px rgb(0 0 0 / 30%);
    --golge-kalk: 0 6px 16px -4px rgb(0 0 0 / 55%);

    --foto-saydam: 0.62;
    --perde-ust: rgb(13 20 28 / 46%);
    --perde-orta: rgb(13 20 28 / 68%);
    --perde-alt: rgb(13 20 28 / 95%);
  }
}

/* Koyu tema — kullanıcının açık seçimi. Yukarıdaki blokla aynı değerler;
   ikisi de gerekiyor çünkü biri sistem ayarına, diğeri seçime bakıyor. */
:root[data-theme="dark"] {
  --marka: #4a9be0;
  --marka-guclu: #7bb8ec;
  --marka-yumusak: #12283c;

  --zemin: #0d141c;
  --yuzey: #16212d;
  --yuzey-2: #1b2836;
  --kenar: #26374a;
  --kenar-guclu: #33485e;

  --yazi: #e7eef6;
  --yazi-soluk: #a6b6c7;
  --yazi-sessiz: #7d8fa2;

  --ton-eylem: #e86a6a;
  --ton-uyari: #d89a3c;
  --ton-artis: #4fbf8b;

  --v-erp: #5ca5e2;
  --v-rapor: #3eb0a0;
  --v-uretim: #d8983c;
  --v-ofis: #96a8ba;
  --v-ik: #9686e0;
  --v-satis: #e07a9e;
  --v-kurumsal: #96a8ba;
  --v-netsis: #e86e6e;
  --v-powerbi: #e2b03c;
  --v-excel: #48be82;
  --v-word: #6ca8ec;
  --v-teams: #9698e2;
  --v-outlook: #5cb0e8;
  --v-sharepoint: #46bec0;

  --v-mavi: #5ca5e2;
  --v-lacivert: #7d9ad0;
  --v-turkuaz: #46bec0;
  --v-yesil: #4fbf8b;
  --v-mor: #9686e0;
  --v-bordo: #e07a9e;
  --v-turuncu: #dc9a4c;
  --v-gri: #96a8ba;

  --teams: #8b8ee0;
  --teams-guclu: #a5a8ea;
  --teams-yumusak: #22244a;

  --golge: 0 1px 2px rgb(0 0 0 / 30%);
  --golge-kalk: 0 6px 16px -4px rgb(0 0 0 / 55%);

  --foto-saydam: 0.62;
  --perde-ust: rgb(13 20 28 / 46%);
  --perde-orta: rgb(13 20 28 / 68%);
  --perde-alt: rgb(13 20 28 / 95%);
}

/* ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--f-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marka); }

svg.simge {
  width: var(--simge-cizim);
  height: var(--simge-cizim);
  flex: none;
}

/* Klavyeyle gezinen kullanıcı nerede olduğunu görmeli. Fareyle tıklamada
   çıkmıyor (:focus-visible), o yüzden görsel gürültü yapmıyor. */
:focus-visible {
  outline: 2px solid var(--marka);
  outline-offset: 2px;
}

/* ==========================================================================
   GİRİŞ EKRANI
   ========================================================================== */
body.giris {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

/* Fotoğraf ve perde AYRI katman: saydamlık yalnız fotoğrafa uygulanmalı.
   Tek katmanda yapılsaydı perdenin rengi de soluklaşır ve alt şeritteki
   metnin kontrastı düşerdi (theme.py'de ölçülmüş bir sorun). */
body.giris::before,
body.giris::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
}

body.giris::before {
  background-image: var(--giris-foto);
  background-size: cover;
  background-position: center;
  opacity: var(--foto-saydam);
}

/* PERDE ÜÇ DURAKLI. Alt durak güçlü: alt şeritteki metin (tema, ölçek,
   sürüm) doğrudan fotoğrafın üstünde duruyor ve perde ortada açılınca
   kontrastı 2:1'e düşüyordu — okunmuyordu. */
body.giris::after {
  background: linear-gradient(
    to bottom,
    var(--perde-ust) 0%,
    var(--perde-orta) 55%,
    var(--perde-alt) 100%
  );
}

.giris-orta {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sayfa-bosluk);
}

.giris-kart {
  width: 100%;
  max-width: var(--giris-kart-g);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-kalk);
  padding: calc(26px * var(--olcek));
  display: flex;
  flex-direction: column;
  gap: calc(var(--izgara-bosluk) * 0.75);
}

/* Marka kilidi: işaret │ MasaşNet / Kurumsal Uygulamalar Portalı */
.marka-kilidi {
  display: flex;
  align-items: center;
  gap: calc(var(--izgara-bosluk) * 0.8);
}

.marka-isaret {
  height: var(--logo-h);
  width: auto;
  flex: none;
}

.marka-cizgi {
  width: var(--kenar-kalinlik);
  align-self: stretch;
  background: var(--kenar-guclu);
  flex: none;
}

.marka-ad {
  font-size: var(--f-xl);
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--marka);
  line-height: 1.15;
}

.marka-slogan {
  font-size: var(--f-sm);
  color: var(--yazi-sessiz);
}

.giris-alt-baslik {
  font-size: var(--f-base);
  color: var(--yazi-soluk);
  margin: 0;
}

/* --- Form alanları --- */
.alan-etiket {
  display: block;
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--yazi-soluk);
  margin-bottom: calc(var(--izgara-bosluk) * 0.25);
}

input[type="text"],
input[type="password"],
input[type="search"] {
  width: 100%;
  height: var(--alan-h);
  padding: 0 calc(12px * var(--olcek));
  font: inherit;
  font-size: var(--f-md);
  color: var(--yazi);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar-guclu);
  border-radius: var(--r-sm);
}

input::placeholder { color: var(--yazi-sessiz); }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  border-color: var(--marka);
  outline: 2px solid var(--marka);
  outline-offset: -1px;
}

.hatirla {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--olcek));
  font-size: var(--f-sm);
  color: var(--yazi-soluk);
  cursor: pointer;
}

.hatirla input { accent-color: var(--marka); width: 16px; height: 16px; }

/* --- Düğmeler --- */
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: var(--r-sm);
}

.dugme-birincil {
  width: 100%;
  height: var(--dugme-h);
  font-size: var(--f-md);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  background: var(--marka);
}

.dugme-birincil:hover { background: var(--marka-guclu); }
.dugme-birincil:disabled { background: var(--yazi-sessiz); cursor: default; }

.yardim-metni {
  margin: 0;
  text-align: center;
  font-size: var(--f-sm);
  color: var(--yazi-sessiz);
}

/* --- Hata / uyarı şeritleri --- */
.hata-serit,
.uyari-serit {
  border-radius: var(--r-sm);
  padding: calc(10px * var(--olcek)) calc(12px * var(--olcek));
  font-size: var(--f-sm);
  /* core/auth.py mesajları satır sonu içeriyor; korunması gerekiyor. */
  white-space: pre-line;
}

.hata-serit {
  color: var(--ton-eylem);
  background: color-mix(in srgb, var(--ton-eylem) 10%, var(--yuzey));
  border: var(--kenar-kalinlik) solid color-mix(in srgb, var(--ton-eylem) 35%, var(--yuzey));
}

.uyari-serit {
  color: var(--ton-uyari);
  background: color-mix(in srgb, var(--ton-uyari) 12%, var(--yuzey));
  border: var(--kenar-kalinlik) solid color-mix(in srgb, var(--ton-uyari) 35%, var(--yuzey));
}

/* Başarılı işlem bildirimi (kayıt eklendi / silindi / geri alındı).
   Uyarı şeridinden AYRI renk: "eklendi" ile "dikkat" aynı sarıda
   görünürse kullanıcı iyi haberi kötü sanıp duruyor. */
.bilgi-serit {
  border-radius: var(--r-sm);
  padding: calc(10px * var(--olcek)) calc(12px * var(--olcek));
  margin-bottom: var(--sayfa-bosluk);
  font-size: var(--f-sm);
  white-space: pre-line;
  color: var(--ton-artis);
  background: color-mix(in srgb, var(--ton-artis) 12%, var(--yuzey));
  border: var(--kenar-kalinlik) solid color-mix(in srgb, var(--ton-artis) 35%, var(--yuzey));
}

/* --- Giriş ekranı alt şeridi: tema · yazı ölçeği · sürüm --- */
.giris-alt-serit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--izgara-bosluk) * 0.5);
  padding: 0 var(--sayfa-bosluk) calc(var(--sayfa-bosluk) * 0.6);
  font-size: var(--f-xs);
  color: var(--yazi-soluk);
  flex-wrap: wrap;
}

.sessiz-dugme {
  height: calc(28px * var(--olcek));
  min-width: calc(28px * var(--olcek));
  padding: 0 calc(9px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--yazi-soluk);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-sm);
}

.sessiz-dugme:hover { color: var(--yazi); border-color: var(--kenar-guclu); }
.sessiz-dugme:disabled { opacity: 0.45; cursor: default; }

.olcek-yuzde {
  min-width: calc(42px * var(--olcek));
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.satir-form { display: inline-flex; gap: inherit; align-items: center; }

/* ==========================================================================
   ÜST ŞERİT
   ========================================================================== */
.ust-serit {
  /* position+z-index: kullanıcı menüsü paneli sayfa içeriğinin ÜSTÜNDE
     açılsın. Olmadan panel, altındaki kartların arkasına düşüyor. */
  position: relative;
  z-index: 40;
  min-height: var(--ust-serit-h);
  background: var(--yuzey);
  border-bottom: var(--kenar-kalinlik) solid var(--kenar);
  box-shadow: var(--golge);
  padding: calc(8px * var(--olcek)) var(--sayfa-bosluk);
  display: flex;
  align-items: center;
  gap: calc(var(--izgara-bosluk) * 0.8);
  flex-wrap: wrap;
}

.ust-marka {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--olcek));
  text-decoration: none;
  color: inherit;
  flex: none;
}

.ust-marka img { height: calc(32px * var(--olcek)); width: auto; }

.ust-marka-ad {
  font-size: var(--f-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--marka);
}

.arama-form { flex: 1 1 clamp(180px, 30vw, 420px); display: flex; }
.arama-form input { height: calc(38px * var(--olcek)); }

.ust-eylem {
  height: calc(38px * var(--olcek));
  min-width: calc(38px * var(--olcek));
  padding: 0 calc(11px * var(--olcek));
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--yazi-soluk);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--olcek));
}

.ust-eylem:hover { color: var(--yazi); border-color: var(--kenar-guclu); }
.ust-eylem:disabled { opacity: 0.45; cursor: default; }

/* --------------------------------------------------------------------------
   KULLANICI ADI MENÜSÜ
   Rehber, yönetim ekranları ve çıkış buranın içinde (bkz.
   templates/_ust_serit.html). <details>/<summary> ile açılıyor: portal
   betik çalıştırmadığı için (CSP: script-src 'none') açılır menünün
   betiksiz tek doğru yolu bu.
   -------------------------------------------------------------------------- */
.kullanici-menu { position: relative; flex: none; }

/* list-style ve ::marker: tarayıcının <summary> önüne koyduğu üçgen
   işareti kaldırılıyor — kendi okumuzu çiziyoruz. İkisi birden gerekli,
   biri WebKit'i biri diğerlerini kapsıyor. */
.kullanici-menu > summary {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--olcek));
  padding: calc(5px * var(--olcek)) calc(9px * var(--olcek));
  border: var(--kenar-kalinlik) solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  list-style: none;
  line-height: 1.25;
}

.kullanici-menu > summary::-webkit-details-marker { display: none; }
.kullanici-menu > summary::marker { content: ""; }

.kullanici-menu > summary:hover {
  background: var(--yuzey-2);
  border-color: var(--kenar);
}

.kullanici-menu[open] > summary {
  background: var(--yuzey-2);
  border-color: var(--kenar-guclu);
}

/* Baş harfler: ad ne kadar uzun olursa olsun şerit taşmıyor. */
.kullanici-bas-harf {
  flex: none;
  width: calc(34px * var(--olcek));
  height: calc(34px * var(--olcek));
  border-radius: var(--r-hap);
  display: grid;
  place-items: center;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--marka);
  background: var(--marka-yumusak);
  border: var(--kenar-kalinlik) solid
          color-mix(in srgb, var(--marka) 25%, transparent);
}

.kullanici-metin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.kullanici-ad { font-size: var(--f-sm); font-weight: 600; }
.kullanici-birim { font-size: var(--f-xs); color: var(--yazi-sessiz); }

.menu-oku {
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
  transition: transform .12s ease;
}
.kullanici-menu[open] .menu-oku { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-oku { transition: none; }
}

/* Açılan panel. right:0 — şeridin sağ kenarına yapışıyor, ekran dışına
   taşmıyor. z-index üst şeridin kendisinden büyük olmak zorunda. */
.kullanici-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: calc(236px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar-guclu);
  border-radius: var(--r-md);
  box-shadow: var(--golge-kalk);
  padding: calc(6px * var(--olcek));
}

.menu-bolum-baslik {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--yazi-sessiz);
  padding: calc(6px * var(--olcek)) calc(9px * var(--olcek))
           calc(3px * var(--olcek));
}

.menu-kilit { display: inline-flex; color: var(--yazi-sessiz); }
.menu-kilit svg.simge {
  width: calc(13px * var(--olcek));
  height: calc(13px * var(--olcek));
}

/* Menü satırı: bağlantı ve çıkış düğmesi AYNI görünüyor. Biri <a> biri
   <button> olmak zorunda (çıkış POST olmalı), o yüzden düğmenin kendi
   görünümü sıfırlanıyor. */
.menu-satir {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--olcek));
  width: 100%;
  padding: calc(9px * var(--olcek)) calc(9px * var(--olcek));
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-size: var(--f-sm);
  font-weight: 500;
  color: var(--yazi);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.menu-satir:hover { background: var(--marka-yumusak); color: var(--marka); }
.menu-satir svg.simge { color: var(--yazi-sessiz); }
.menu-satir:hover svg.simge { color: var(--marka); }

.menu-cikis:hover { background: color-mix(in srgb, var(--ton-eylem) 12%, transparent); color: var(--ton-eylem); }
.menu-cikis:hover svg.simge { color: var(--ton-eylem); }

.menu-ayirac {
  height: var(--kenar-kalinlik);
  background: var(--kenar);
  margin: calc(5px * var(--olcek)) calc(4px * var(--olcek));
}

/* ==========================================================================
   ANA İÇERİK VE KART IZGARASI
   ========================================================================== */
main {
  /* Sağ kolon eklendiği için sayfa biraz genişledi: sol 2/3'te üç kart
     rahat sığsın, sağdaki liste de ad/unvanı kesmesin. */
  max-width: calc(1320px * var(--olcek));
  margin: 0 auto;
  padding: var(--sayfa-bosluk);
}

.bolum-baslik {
  font-size: var(--f-lg);
  font-weight: 700;
  margin: 0 0 calc(2px * var(--olcek));
}

.bolum-alt {
  margin: 0 0 var(--sayfa-bosluk);
  font-size: var(--f-sm);
  color: var(--yazi-soluk);
}

/* Kart genişliği kolon sayısını belirliyor — theme.py'deki card_min_w
   notunun web karşılığı. */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kart-min-g), 1fr));
  gap: var(--izgara-bosluk);
}

/* --------------------------------------------------------------------------
   KART — 2026-09-24 KURUMSAL YENİDEN TASARIM (Tugay: "çok daha profesyonel")

   İlham: kurumsal uygulama başlatıcıları (Microsoft 365 uygulama
   başlatıcısı, Okta / Atlassian panoları). Ortak dilleri:
     · Sakin beyaz yüzey, ince kenarlık, çok hafif gölge — renk kartın
       TAMAMINA değil yalnız kimlik öğesine (simge kutusu) veriliyor.
     · Simge kutusu kartın rengiyle DOLU, simge beyaz: kart bir bakışta
       tanınıyor. Eski açık tonlu kutu ekran görüntüsünde silik kalıyordu.
     · Alt satır ne olacağını söylüyor: "Aç" + çapraz ok. Üzerine
       gelince ok kayıyor ve kart hafifçe kalkıyor.
     · Grup çipi kartlardan kalktı: grup artık BÖLÜM BAŞLIĞI.

   Tek renk kaynağı hâlâ --vurgu (gruptan ya da kartın kendi renginden).
   -------------------------------------------------------------------------- */
.kart {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(164px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: calc(var(--r-md) + 2px);
  box-shadow: 0 1px 2px rgb(16 32 48 / 4%), 0 1px 1px rgb(16 32 48 / 3%);
  padding: calc(18px * var(--olcek)) calc(18px * var(--olcek)) calc(14px * var(--olcek));
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--olcek));
  text-decoration: none;
  color: inherit;
}

/* Üzerine gelince kartın rengiyle çok hafif bir aydınlanma — yalnız
   etkileşimde. Durağan hâlde kart tamamen sakin. */
.kart::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    140% 90% at 0% 0%,
    color-mix(in srgb, var(--vurgu, var(--marka)) 8%, transparent),
    transparent 60%
  );
  transition: opacity .18s ease;
}

.kart-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(8px * var(--olcek));
  margin-bottom: calc(10px * var(--olcek));
}

/* SİMGE KUTUSU: rengin kendisi + koyuya doğru hafif geçiş. Koyu temada
   vurgu tonları açık olduğu için geçişin koyu ucu beyaz simgenin
   okunurluğunu koruyor. */
.kart-simge {
  width: calc(46px * var(--olcek));
  height: calc(46px * var(--olcek));
  border-radius: calc(var(--r-md));
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--vurgu, var(--marka)),
    color-mix(in srgb, var(--vurgu, var(--marka)) 70%, #000)
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 6px 14px -8px color-mix(in srgb, var(--vurgu, var(--marka)) 80%, transparent);
}
.kart-simge svg.simge {
  width: calc(23px * var(--olcek));
  height: calc(23px * var(--olcek));
  stroke-width: 1.8;
}

/* TÜR ROZETİ — sessiz bilgi: tıklayınca ne açılacak. */
.kart-tur {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--yazi-sessiz);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-hap);
  padding: calc(2px * var(--olcek)) calc(9px * var(--olcek));
  white-space: nowrap;
}
.kart-tur svg.simge { width: calc(12px * var(--olcek)); height: calc(12px * var(--olcek)); }

/* Parola korumalı kart: rozet kartın rengini alıyor, kilit simgeli. */
.kart-tur-kilit {
  color: var(--vurgu, var(--marka));
  background: color-mix(in srgb, var(--vurgu, var(--marka)) 9%, var(--yuzey));
  border-color: color-mix(in srgb, var(--vurgu, var(--marka)) 30%, transparent);
}

.kart-ad {
  font-size: calc(15.5px * var(--olcek));
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.15px;
  color: var(--yazi);
}

/* En çok iki satır: uzun açıklama kartları farklı boylara itmesin. */
.kart-aciklama {
  font-size: var(--f-sm);
  color: var(--yazi-soluk);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top:auto — alt satır kartın dibine yapışıyor; aynı sıradaki
   bütün kartların alt satırı aynı hizada. */
.kart-alt {
  margin-top: auto;
  padding-top: calc(12px * var(--olcek));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--olcek));
}

.kart-eylem {
  font-size: calc(12.5px * var(--olcek));
  font-weight: 650;
  color: var(--vurgu, var(--marka));
  letter-spacing: 0.1px;
}

.kart-ok {
  display: inline-grid;
  place-items: center;
  width: calc(26px * var(--olcek));
  height: calc(26px * var(--olcek));
  border-radius: var(--r-hap);
  color: var(--yazi-sessiz);
  background: var(--yuzey-2);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.kart-ok svg.simge { width: calc(14px * var(--olcek)); height: calc(14px * var(--olcek)); stroke-width: 2; }

a.kart { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }

a.kart:hover {
  border-color: color-mix(in srgb, var(--vurgu, var(--marka)) 40%, var(--kenar));
  box-shadow: 0 14px 30px -18px rgb(16 32 48 / 35%), 0 2px 6px -2px rgb(16 32 48 / 8%);
  transform: translateY(-3px);
}
a.kart:hover::after { opacity: 1; }
a.kart:hover .kart-ok {
  color: #fff;
  background: var(--vurgu, var(--marka));
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  a.kart, .kart-ok, .kart::after { transition: none; }
  a.kart:hover, a.kart:hover .kart-ok { transform: none; }
}

/* Arama eşleşmesi — core/search.match_span ile bulunan aralık */
.kart mark {
  background: color-mix(in srgb, var(--marka) 22%, var(--yuzey));
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* ADRESİ HENÜZ VERİLMEMİŞ KART — "Yakında". Silik değil ama belli ki
   henüz hazır değil: kesikli kenar, soluk zemin, simge doygunluğu düşük. */
.kart-yakinda {
  background: var(--yuzey-2);
  border-style: dashed;
  border-color: var(--kenar-guclu);
  box-shadow: none;
}
.kart-yakinda .kart-simge { filter: saturate(.55); opacity: .8; box-shadow: none; }
.kart-yakinda .kart-ad { color: var(--yazi-soluk); }

.kart-yakinda-rozet {
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ton-uyari);
  background: color-mix(in srgb, var(--ton-uyari) 11%, transparent);
  border-radius: var(--r-hap);
  padding: calc(3px * var(--olcek)) calc(10px * var(--olcek));
}

.kart.baglantisiz { opacity: 0.8; }

.kart-not {
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
}

.bos-liste {
  background: var(--yuzey);
  border: var(--kenar-kalinlik) dashed var(--kenar-guclu);
  border-radius: var(--r-md);
  padding: calc(32px * var(--olcek));
  text-align: center;
  color: var(--yazi-soluk);
}

/* --------------------------------------------------------------------------
   KART BÖLÜMLERİ — gruplu görünüm (ana.html). Başlıkta grubun rengini
   taşıyan küçük nokta, ad, kart sayısı ve sağa uzanan ince çizgi.
   -------------------------------------------------------------------------- */
.kart-bolum { margin-bottom: calc(28px * var(--olcek)); }
.kart-bolum:last-child { margin-bottom: 0; }

.kart-bolum-baslik {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--olcek));
  margin: 0 0 calc(12px * var(--olcek));
  font-size: calc(12px * var(--olcek));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
}
.kart-bolum-baslik::after {
  content: "";
  flex: 1;
  height: var(--kenar-kalinlik);
  background: var(--kenar);
}

.kart-bolum-nokta {
  width: calc(8px * var(--olcek));
  height: calc(8px * var(--olcek));
  border-radius: var(--r-hap);
  background: var(--vurgu, var(--marka));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu, var(--marka)) 18%, transparent);
}

.kart-bolum-sayi {
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--yazi-sessiz);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-hap);
  padding: 0 calc(7px * var(--olcek));
  line-height: calc(18px * var(--olcek));
}

.kart-bolum:where([data-grup="erp"]) { --vurgu: var(--v-erp); }
.kart-bolum:where([data-grup="rapor"]) { --vurgu: var(--v-rapor); }
.kart-bolum:where([data-grup="uretim"]) { --vurgu: var(--v-uretim); }
.kart-bolum:where([data-grup="ofis"]) { --vurgu: var(--v-ofis); }
.kart-bolum:where([data-grup="ik"]) { --vurgu: var(--v-ik); }
.kart-bolum:where([data-grup="satis"]) { --vurgu: var(--v-satis); }
.kart-bolum:where([data-grup="kurumsal"]) { --vurgu: var(--v-kurumsal); }
.kart-bolum:where([data-grup="diger"]) { --vurgu: var(--logo-gri); }

/* --- Vurgu renkleri: gruba göre ---
   :where() ÖNEMLİ — özgüllüğü ".kart" düzeyinde tutuyor. Aşağıdaki
   [data-vurgu] kuralları öznitelik seçicisi olduğu için normalde bu
   kuralları YENEMEZDİ; :where() sayesinde iki taraf eşit ağırlıkta ve
   sonra yazılan (yani kartın kendi rengi) kazanıyor. */
.kart:where([data-grup="erp"]) { --vurgu: var(--v-erp); }
.kart:where([data-grup="rapor"]) { --vurgu: var(--v-rapor); }
.kart:where([data-grup="uretim"]) { --vurgu: var(--v-uretim); }
.kart:where([data-grup="ofis"]) { --vurgu: var(--v-ofis); }
.kart:where([data-grup="ik"]) { --vurgu: var(--v-ik); }
.kart:where([data-grup="satis"]) { --vurgu: var(--v-satis); }
.kart:where([data-grup="kurumsal"]) { --vurgu: var(--v-kurumsal); }

/* --- Kartın kendi rengi (AppRecord.accent) ---
   SEÇİCİDE ".kart" YOK: aynı kurallar BT panelindeki renk seçme
   yuvarlaklarında da geçerli (bkz. .renk-ornek). İki ayrı yerde iki
   ayrı renk listesi tutmak, birinin güncellenip diğerinin eskimesi
   demekti — bu projedeki hataların bilinen kaynağı.

   İlk grup: katalogdan gelen ürün tonları (theme.py: "tanınırlığı
   yüksek ürünlerde marka tonu geçilir").
   İkinci grup: BT panelinden seçilebilen palet
   (bkz. core/app_admin.ACCENT_CHOICES — adlar birebir aynı olmalı). */
[data-vurgu="netsis"] { --vurgu: var(--v-netsis); }
[data-vurgu="powerbi"] { --vurgu: var(--v-powerbi); }
[data-vurgu="excel"] { --vurgu: var(--v-excel); }
[data-vurgu="word"] { --vurgu: var(--v-word); }
[data-vurgu="teams"] { --vurgu: var(--v-teams); }
[data-vurgu="outlook"] { --vurgu: var(--v-outlook); }
[data-vurgu="sharepoint"] { --vurgu: var(--v-sharepoint); }

[data-vurgu="mavi"] { --vurgu: var(--v-mavi); }
[data-vurgu="lacivert"] { --vurgu: var(--v-lacivert); }
[data-vurgu="turkuaz"] { --vurgu: var(--v-turkuaz); }
[data-vurgu="yesil"] { --vurgu: var(--v-yesil); }
[data-vurgu="mor"] { --vurgu: var(--v-mor); }
[data-vurgu="bordo"] { --vurgu: var(--v-bordo); }
[data-vurgu="turuncu"] { --vurgu: var(--v-turuncu); }
[data-vurgu="gri"] { --vurgu: var(--v-gri); }

/* ==========================================================================
   REHBER (DAHİLİLER) — herkese açık görünüm
   ========================================================================== */
.rehber-arama-serit {
  display: flex;
  align-items: center;
  gap: calc(var(--izgara-bosluk) * 0.6);
  margin-bottom: var(--sayfa-bosluk);
}

.rehber-arama-serit .arama-form { flex: 1 1 auto; display: flex; }
.rehber-arama-serit .arama-form input { height: var(--alan-h); }

/* "filtreleme kısmının yanına küçük bir telefon imgesi" — arama kutusunun
   hemen yanındaki yuvarlak işaret, rehberin ne olduğunu görsel olarak
   pekiştiriyor. */
.rehber-telefon-isaret {
  width: var(--alan-h);
  height: var(--alan-h);
  border-radius: var(--r-hap);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--marka);
  background: var(--marka-yumusak);
}

.rehber-telefon-isaret svg.simge {
  width: calc(20px * var(--olcek));
  height: calc(20px * var(--olcek));
}

.birim-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--olcek));
  margin-bottom: var(--sayfa-bosluk);
}

.cip {
  height: calc(32px * var(--olcek));
  padding: 0 calc(13px * var(--olcek));
  border-radius: var(--r-hap);
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--yazi-soluk);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--olcek));
}

.cip:hover { border-color: var(--kenar-guclu); color: var(--yazi); }
.cip.secili { background: var(--marka); border-color: var(--marka); color: #fff; }
.cip .sayac { opacity: 0.75; }

.rehber-listesi {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--olcek));
}

.rehber-satir {
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  box-shadow: var(--golge);
  padding: calc(14px * var(--olcek)) calc(16px * var(--olcek));
  display: flex;
  align-items: center;
  gap: var(--izgara-bosluk);
  flex-wrap: wrap;
}

.rehber-kisi { flex: 1 1 220px; min-width: 0; }
.rehber-ad { font-weight: 600; font-size: var(--f-base); }
.rehber-meta { font-size: var(--f-sm); color: var(--yazi-soluk); }

.rehber-numaralar {
  display: flex;
  gap: calc(8px * var(--olcek));
  flex-wrap: wrap;
}

/* Numaraya tıklamak aratıyor: tel: bağlantısı, telefonu olan bir cihazda
   (masaüstünde kayıtlı bir yumuşak telefon varsa orada da) çeviriyor. */
.numara-baglanti {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--olcek));
  height: calc(36px * var(--olcek));
  padding: 0 calc(13px * var(--olcek));
  border-radius: var(--r-hap);
  background: var(--marka-yumusak);
  color: var(--marka-guclu);
  font-weight: 600;
  font-size: var(--f-sm);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.numara-baglanti:hover { background: color-mix(in srgb, var(--marka) 22%, var(--yuzey)); }
.numara-baglanti svg.simge { width: calc(16px * var(--olcek)); height: calc(16px * var(--olcek)); }

.rehber-yonet { margin: calc(-6px * var(--olcek)) 0 var(--sayfa-bosluk); }
.rehber-yonet a { font-size: var(--f-sm); font-weight: 600; }

/* ==========================================================================
   BT PANELİ
   ========================================================================== */
.panel-sekmeler {
  display: flex;
  gap: calc(6px * var(--olcek));
  border-bottom: var(--kenar-kalinlik) solid var(--kenar);
  margin-bottom: var(--sayfa-bosluk);
}

.panel-sekme {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--olcek));
  padding: calc(10px * var(--olcek)) calc(4px * var(--olcek)) calc(12px * var(--olcek));
  margin-bottom: -1px;
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--yazi-soluk);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.panel-sekme:hover { color: var(--yazi); }
.panel-sekme.aktif { color: var(--marka); border-bottom-color: var(--marka); }
.panel-sekme svg.simge { width: calc(18px * var(--olcek)); height: calc(18px * var(--olcek)); }

.rozet-bt {
  display: inline-flex;
  align-items: center;
  height: calc(24px * var(--olcek));
  padding: 0 calc(9px * var(--olcek));
  border-radius: var(--r-hap);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--marka-guclu);
  background: var(--marka-yumusak);
}

.panel-govde {
  display: flex;
  gap: var(--sayfa-bosluk);
  align-items: flex-start;
  flex-wrap: wrap;
}

.panel-liste-kolon { flex: 3 1 360px; min-width: 300px; }
.panel-form-kolon { flex: 2 1 300px; min-width: 280px; }

.panel-form-kart {
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--golge);
  padding: calc(20px * var(--olcek));
}

.panel-form-baslik { font-size: var(--f-md); font-weight: 700; margin: 0 0 var(--izgara-bosluk); }

.panel-alan { margin-bottom: calc(var(--izgara-bosluk) * 0.7); }

.alan-hata {
  display: block;
  min-height: calc(16px * var(--olcek));
  font-size: var(--f-xs);
  color: var(--ton-eylem);
  margin-top: calc(3px * var(--olcek));
}

select {
  width: 100%;
  height: var(--alan-h);
  padding: 0 calc(10px * var(--olcek));
  font: inherit;
  font-size: var(--f-md);
  color: var(--yazi);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar-guclu);
  border-radius: var(--r-sm);
}

.panel-eylemler {
  display: flex;
  gap: calc(8px * var(--olcek));
  margin-top: var(--izgara-bosluk);
  flex-wrap: wrap;
}

.dugme-ikincil {
  height: var(--dugme-h);
  padding: 0 calc(16px * var(--olcek));
  font-size: var(--f-md);
  font-weight: 700;
  color: var(--yazi);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar-guclu);
}
.dugme-ikincil:hover { border-color: var(--marka); }

.dugme-tehlike {
  height: var(--dugme-h);
  padding: 0 calc(16px * var(--olcek));
  font-size: var(--f-md);
  font-weight: 700;
  color: #ffffff;
  background: var(--ton-eylem);
}
.dugme-tehlike:hover { background: color-mix(in srgb, var(--ton-eylem) 85%, black); }

.panel-satir {
  display: flex;
  align-items: center;
  gap: var(--izgara-bosluk);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  padding: calc(12px * var(--olcek)) calc(14px * var(--olcek));
  margin-bottom: calc(8px * var(--olcek));
  text-decoration: none;
  color: inherit;
}

.panel-satir:hover { border-color: var(--kenar-guclu); box-shadow: var(--golge); }
.panel-satir.secili { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka) inset; }
.panel-satir.pasif { opacity: 0.62; }

.panel-satir-bilgi { flex: 1; min-width: 0; }
.panel-satir-ad { font-weight: 600; }
.panel-satir-meta { font-size: var(--f-sm); color: var(--yazi-soluk); }
.panel-satir-numara { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--marka); flex: none; }

.panel-satir-durum {
  font-size: var(--f-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--yazi-sessiz);
  flex: none;
}

.panel-arama-satir {
  display: flex;
  gap: calc(8px * var(--olcek));
  margin-bottom: calc(var(--izgara-bosluk) * 0.6);
  flex-wrap: wrap;
}
.panel-arama-satir .arama-form { flex: 1 1 220px; display: flex; }
.panel-arama-satir .arama-form input { height: var(--alan-h); }

.panel-yeni-baglanti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--alan-h);
  padding: 0 calc(14px * var(--olcek));
  border-radius: var(--r-sm);
  background: var(--marka);
  color: #ffffff;
  font-weight: 700;
  font-size: var(--f-sm);
  text-decoration: none;
  flex: none;
}
.panel-yeni-baglanti:hover { background: var(--marka-guclu); }

.onay-kutusu .panel-eylemler { margin-top: calc(var(--izgara-bosluk) * 0.6); }

/* İşlem geçmişi — kişinin altında "kim ne zaman ne yaptı" listesi.
   Tarih ve kişi ikinci satırda değil, sağda: göz önce OLAYI okuyor,
   ayrıntıyı sonra arıyor. */
.gecmis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--olcek));
}

.gecmis li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--olcek));
  padding-bottom: calc(6px * var(--olcek));
  border-bottom: var(--kenar-kalinlik) dashed var(--kenar);
}

.gecmis li:last-child { border-bottom: 0; padding-bottom: 0; }
.gecmis-islem { font-size: var(--f-sm); font-weight: 600; }
.gecmis-kim {
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.panel-yakinda {
  background: var(--yuzey);
  border: var(--kenar-kalinlik) dashed var(--kenar-guclu);
  border-radius: var(--r-md);
  padding: calc(40px * var(--olcek));
  text-align: center;
  color: var(--yazi-soluk);
}

/* ==========================================================================
   HATA SAYFASI
   ========================================================================== */
body.hata-sayfa { display: grid; place-items: center; min-height: 100vh; padding: var(--sayfa-bosluk); }

.hata-kutu {
  max-width: calc(560px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-kalk);
  padding: calc(28px * var(--olcek));
}

.hata-kutu h1 { font-size: var(--f-lg); color: var(--ton-eylem); margin-top: 0; }

.hata-kutu pre {
  white-space: pre-wrap;
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--f-sm);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-sm);
  padding: calc(12px * var(--olcek));
  overflow-x: auto;
}

.dipnot {
  margin: calc(20px * var(--olcek)) 0 0;
  padding-top: calc(16px * var(--olcek));
  border-top: var(--kenar-kalinlik) solid var(--kenar);
  color: var(--yazi-sessiz);
  font-size: var(--f-xs);
  text-align: center;
}

/* ==========================================================================
   DAR EKRAN
   ==========================================================================
   Portal masaüstü için tasarlandı ama üretimdeki panolarda ve telefondan
   da açılıyor. Üst şerit sarılıyor, arama tam satıra geçiyor. */
@media (max-width: 640px) {
  .arama-form { flex-basis: 100%; order: 10; }
  .kullanici-cipi { align-items: flex-start; }
  main { padding: calc(var(--sayfa-bosluk) * 0.6); }
  .panel-govde { flex-direction: column; }
  .rehber-satir { flex-direction: column; align-items: flex-start; }
  .panel-satir { flex-wrap: wrap; }
}

/* Yerel program / ağ paylaşımı kartındaki yol.
   SEÇİLEBİLİR olmalı: kullanıcı kopyalayıp Gezgin'e yapıştırıyor.
   Tek satırda taşarsa kesilmiyor, satır kırılıyor — yol yarım
   gösterilirse kopyalamak işe yaramaz. */
.kart-yol {
  margin-top: calc(4px * var(--olcek));
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--f-xs);
  color: var(--yazi);
  background: var(--yuzey-2, var(--yuzey));
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: calc(4px * var(--olcek));
  padding: calc(4px * var(--olcek)) calc(6px * var(--olcek));
  user-select: all;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   ANA EKRAN DÜZENİ — kartlar + yan kolon
   ==========================================================================
   Kur paneli kartların YANINDA, altında değil: göz kartlara giderken kur
   çevresel görüşte kalıyor ve kimse aşağı kaydırmak zorunda kalmıyor.

   Kur paneli kapalıysa (.env içinde KUR_ADRESI boş) ızgara tek kolona
   düşüyor — boş bir sütun bırakmak kartları ortadan kaydırırdı.

   minmax(0, 1fr) ŞART: sadece "1fr" yazılırsa uzun bir kart adı ızgarayı
   genişletip yan kolonu ekran dışına itiyor. */
.portal-duzen {
  display: grid;
  /* 2/3 — 1/3. SABİT PİKSEL DEĞİL, ORAN: sabit genişlikte sağ kolon
     geniş ekranda cılız kalıyor, ad ve unvanlar "Ahmet Ç..." diye
     kesiliyordu. Oranla her ekranda aynı denge kuruluyor.
     minmax(0, ...) ŞART: yalnız "2fr 1fr" yazılırsa uzun bir kart adı
     sol kolonu şişirip sağ kolonu ezer (ızgara öğesinin varsayılan en
     küçük genişliği içeriği kadardır). */
  /* 2026-09-24: sağ kolon ORANLA DEĞİL SINIRLI GENİŞLİKLE — gruplu kart
     görünümünde sol tarafa satır başına 4 kart sığsın, sayfa gereksiz
     uzamasın. clamp alt sınırı ad/unvan kesilmesin diye (eski not). */
  grid-template-columns: minmax(0, 1fr) clamp(320px, 27%, 390px);
  gap: var(--sayfa-bosluk);
  align-items: start;
}

.portal-duzen.tek-kolon { grid-template-columns: minmax(0, 1fr); }

/* 1000 pikselin altında yan kolon kartların ALTINA geçiyor: iki kolon
   sıkıştığında kart ızgarası tek sütuna düşüyor ve ekran uzuyor. */
@media (max-width: 1000px) {
  .portal-duzen { grid-template-columns: minmax(0, 1fr); }
}

.yan-kolon {
  display: flex;
  flex-direction: column;
  gap: var(--izgara-bosluk);
}

/* ==========================================================================
   GERİ DÜĞMESİ
   ==========================================================================
   Portalın kendi ekranlarında (Rehber, BT Paneli, hata sayfası) kart
   ekranına dönmenin görünür yolu. Önceden tek yol üst şeritteki logoydu ve
   logonun bir "geri" düğmesi olduğunu kimse bilmiyordu.

   TARAYICI GEÇMİŞİNE DEĞİL sabit adrese gidiyor: history.back() betik
   gerektirir (CSP yasaklıyor) ve "bir önceki sayfa" bir formu yeniden
   göndermek gibi beklenmedik sonuçlar da verebilir. */
.geri-dugmesi {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--olcek));
  margin-bottom: calc(12px * var(--olcek));
  padding: calc(6px * var(--olcek)) calc(12px * var(--olcek))
           calc(6px * var(--olcek)) calc(9px * var(--olcek));
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--yazi-soluk);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-hap);
  text-decoration: none;
}

.geri-dugmesi:hover {
  color: var(--marka);
  border-color: var(--marka);
  background: var(--marka-yumusak);
}

.geri-ok { font-size: var(--f-md); line-height: 1; }

/* ==========================================================================
   BLOKLU LİSTE — BT panelindeki dahili listesi
   ==========================================================================
   Aktif ve silinmiş kayıtlar ayrı bloklarda; aktifler birim başlıkları
   altında (bkz. main._dahili_bloklari). Önceden hepsi tek alfabetik
   listede iç içeydi.

   BAŞLIK YAPIŞKAN (sticky): uzun bir birim listesini kaydırırken hangi
   birimde olduğunuz ekranda kalıyor. */
.liste-blok { margin-bottom: calc(14px * var(--olcek)); }

.liste-blok-baslik {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--olcek));
  padding: calc(7px * var(--olcek)) calc(10px * var(--olcek));
  margin-bottom: calc(6px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  /* Zemin ŞART: yapışkan başlık altından kayan satırların üstünü
     kapatmalı, yoksa metinler üst üste biniyor. */
  background: var(--zemin);
  border-bottom: 2px solid var(--kenar-guclu);
}

.liste-blok-baslik .sayac {
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--yazi-sessiz);
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-hap);
  padding: 0 calc(7px * var(--olcek));
}

/* Silinmiş bloğu: başlık eylem tonunda (kırmızı) ve satırlar soluk.
   Blok başlığı zaten "Silinmiş kayıtlar" diyor; renk onu pekiştiriyor. */
.blok-silinmis .liste-blok-baslik {
  color: var(--ton-eylem);
  border-bottom-color: color-mix(in srgb, var(--ton-eylem) 45%, transparent);
}

/* ==========================================================================
   RENK SEÇİMİ — BT panelinde yeni/düzenlenen kart formu
   ==========================================================================
   Betiksiz radyo düğmesi: gerçek <input type="radio"> gizli, görünen şey
   ona bağlı etiketin içindeki yuvarlak. Seçim ":checked" ile
   çerçeveleniyor. Klavyeyle de çalışıyor (odak halkası etiketin
   üzerinde görünüyor). */
.renk-secim {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(112px * var(--olcek)), 1fr));
  gap: calc(6px * var(--olcek));
}

.renk-secenek {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--olcek));
  padding: calc(7px * var(--olcek)) calc(9px * var(--olcek));
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-sm);
  background: var(--yuzey);
  cursor: pointer;
  font-size: var(--f-xs);
}

.renk-secenek:hover { border-color: var(--kenar-guclu); background: var(--yuzey-2); }

/* Gerçek radyo düğmesi gizli ama ERİŞİLEBİLİR kalıyor: display:none
   yazılsaydı klavye ve ekran okuyucu onu hiç görmezdi. */
.renk-secenek input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.renk-ornek {
  flex: none;
  width: calc(18px * var(--olcek));
  height: calc(18px * var(--olcek));
  border-radius: var(--r-hap);
  background: var(--vurgu, var(--v-kurumsal));
  border: var(--kenar-kalinlik) solid rgb(0 0 0 / 12%);
}

/* "Grup rengi (varsayılan)" seçeneği: tek bir renk göstermek yanlış
   olurdu — kartın rengi grubuna göre değişiyor. Çapraz şerit "sabit
   değil" demenin görsel yolu. */
.renk-ornek[data-vurgu=""] {
  background: repeating-linear-gradient(
    45deg,
    var(--v-kurumsal) 0 3px,
    var(--yuzey) 3px 6px
  );
}

.renk-ad { color: var(--yazi-soluk); }

.renk-secenek:has(input:checked) {
  border-color: var(--vurgu, var(--marka));
  background: color-mix(in srgb, var(--vurgu, var(--marka)) 10%, var(--yuzey));
  box-shadow: inset 0 0 0 1px var(--vurgu, var(--marka));
}

.renk-secenek:has(input:checked) .renk-ad { color: var(--yazi); font-weight: 600; }

/* :has() desteklemeyen eski tarayıcı için yedek — işaretli düğmenin
   yuvarlağı büyüyor. Tek başına yeterli değil ama seçim kaybolmuyor. */
.renk-secenek input:checked + .renk-ornek {
  box-shadow: 0 0 0 2px var(--yuzey), 0 0 0 4px var(--vurgu, var(--marka));
}

/* Odak halkası: klavyeyle gezen kullanıcı hangi renkte olduğunu görmeli. */
.renk-secenek:focus-within {
  outline: 2px solid var(--marka);
  outline-offset: 1px;
}

/* ==========================================================================
   DÖVİZ ŞERİDİ — üst barda, borsa bandı düzeni
   ==========================================================================
   Zemini YOK, aralar ince dikey çizgi: şeridin bir parçası gibi duruyor,
   üstüne yapıştırılmış bir kutu gibi değil. Kur bir dönem sağ kolonda ayrı
   bir kutuydu; sayfanın sağını kaplıyor ve yalnız ana ekranda görünüyordu.

   Rakamlar TABULAR: her hane aynı genişlikte, kur değiştiğinde şerit
   sağa sola oynamıyor. Orantılı rakamlarda 48,4777 → 48,1111 geçişinde
   bant görünür biçimde titriyor. */
.kur-serit {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--olcek));
  flex: none;
  padding: 0 calc(4px * var(--olcek));
  font-size: var(--f-sm);
  white-space: nowrap;
}

.kur-oge {
  display: inline-flex;
  align-items: baseline;
  gap: calc(6px * var(--olcek));
  position: relative;
}

/* Ayraç çizgi: öğeler arasında, sonuncudan sonra yok. Gerçek bir kenarlık
   yerine ::before kullanılıyor — boşluk ortasında duran ince bir çizgi
   isteniyor, kutu kenarı değil. */
.kur-oge + .kur-oge::before,
.kur-tarih::before {
  content: "";
  position: absolute;
  left: calc(-7px * var(--olcek));
  top: 50%;
  transform: translateY(-50%);
  width: var(--kenar-kalinlik);
  height: calc(16px * var(--olcek));
  background: var(--kenar-guclu);
}

.kur-kod {
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--yazi-sessiz);
}

.kur-deger {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--yazi);
}

.kur-tarih {
  position: relative;
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
  font-variant-numeric: tabular-nums;
}

/* Dar ekranda şerit gizleniyor: arama kutusu ve kullanıcı menüsü öncelikli.
   Kur bilgisi önemli ama zorunlu değil; sıkışınca ilk o feda ediliyor. */
@media (max-width: 1180px) {
  .kur-serit { display: none; }
}

/* ==========================================================================
   HIZLI İLETİŞİM & TEAMS PANELİ — sağ kolon
   ==========================================================================
   Kişiler dahili rehberinden geliyor (bkz. main._iletisim_listesi).
   Teams sohbetleri portalın İÇİNDE gösterilemiyor: Microsoft
   "frame-ancestors 'none'" ile gömülmeyi yasaklıyor — ölçüldü, tahmin
   değil. Bu panel o işin yerini tutmuyor, yerini açıyor. */
.iletisim-panel {
  position: relative;
  overflow: hidden;
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  box-shadow: var(--golge);
  display: flex;
  flex-direction: column;
  /* Üst şerit + sayfa boşluğu düşülerek ekranın kalanı. Panel kendi
     içinde kayıyor, sayfayı metrelerce uzatmıyor. */
  max-height: calc(100vh - var(--ust-serit-h) - (var(--sayfa-bosluk) * 4));
}

/* Üst bant — kartlardaki .kart-bant ile aynı fikir, Teams renginde. */
.iletisim-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--teams),
    color-mix(in srgb, var(--teams) 25%, transparent)
  );
}

.iletisim-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--olcek));
  padding: calc(15px * var(--olcek)) calc(15px * var(--olcek))
           calc(11px * var(--olcek));
  border-bottom: var(--kenar-kalinlik) solid var(--kenar);
  flex: none;
}

.iletisim-baslik-ad {
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--olcek));
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--yazi);
}

.iletisim-baslik-ad svg.simge {
  width: calc(17px * var(--olcek));
  height: calc(17px * var(--olcek));
  color: var(--teams);
}

.iletisim-tumu {
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--marka);
  text-decoration: none;
  white-space: nowrap;
}

.iletisim-tumu:hover { text-decoration: underline; }

/* Liste kendi içinde kayıyor — panelin başlığı hep görünür kalıyor. */
.iletisim-liste {
  list-style: none;
  margin: 0;
  padding: calc(6px * var(--olcek));
  overflow-y: auto;
  flex: 1;
}

/* SATIRIN TAMAMI BAĞLANTI (e-postası olan kayıtta): hedef büyük olsun,
   kullanıcı isme ya da profile bastığında da Teams açılsın. */
.iletisim-satir {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--olcek));
  padding: calc(8px * var(--olcek));
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
}

a.iletisim-satir:hover { background: var(--teams-yumusak); }
a.iletisim-satir:hover .teams-dugme { background: var(--teams-guclu); }

/* E-postası olmayan kayıt: tıklanmıyor, üzerine gelince vurgu da yok —
   tıklanabilir görünüp hiçbir şey yapmamak kullanıcıyı yanıltır. */
.iletisim-satir-pasif { cursor: default; }

/* Baş harfler — üst şeritteki kullanıcı çipiyle aynı dil. */
.iletisim-avatar {
  flex: none;
  width: calc(36px * var(--olcek));
  height: calc(36px * var(--olcek));
  border-radius: var(--r-hap);
  display: grid;
  place-items: center;
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--teams);
  background: var(--teams-yumusak);
  border: var(--kenar-kalinlik) solid
          color-mix(in srgb, var(--teams) 25%, transparent);
}

/* min-width:0 ŞART: olmadan uzun bir ad kolonu genişletip düğmeyi
   panelin dışına itiyor (flex öğesinin varsayılan en küçük genişliği
   içeriği kadardır). */
.iletisim-kisi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}

.iletisim-ad {
  font-size: var(--f-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iletisim-unvan {
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Teams'te Yaz" — ürünün kendi moru. Tıklayınca msteams:// adresi
   Windows'taki Teams uygulamasını o kişinin sohbetiyle açıyor. */
.teams-dugme {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--olcek));
  padding: calc(6px * var(--olcek)) calc(10px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 600;
  color: #fff;
  background: var(--teams);
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease;
}

/* Artık <span>: tıklama satırın kendisine ait. Üzerine gelme vurgusunu
   satır veriyor (a.iletisim-satir:hover kuralı). */
.teams-dugme svg.simge {
  width: calc(14px * var(--olcek));
  height: calc(14px * var(--olcek));
}

@media (prefers-reduced-motion: reduce) {
  .teams-dugme { transition: none; }
}

/* E-postası olmayan kayıt: düğme yerine dahili numara. Çalışmayacak bir
   düğme göstermek, kartlarda yasakladığımız "sessiz ölü tıklama". */
.iletisim-tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--olcek));
  padding: calc(6px * var(--olcek)) calc(9px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--yazi-soluk);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
}

/* Artık <span>: numara okunacak bir bilgi, tıklanacak bir düğme değil
   (bkz. ana.html — tel: bağlantısı Windows'ta Teams'i tetikliyordu). */
.iletisim-tel svg.simge {
  width: calc(13px * var(--olcek));
  height: calc(13px * var(--olcek));
}

.iletisim-yok {
  margin: 0;
  padding: calc(16px * var(--olcek));
  font-size: var(--f-xs);
  line-height: 1.5;
  color: var(--yazi-sessiz);
}

/* ===========================================================================
   SOHBET (Faz 2) — ana ekranda hep açık panel (ana.html, "yan-kolon" içinde)
   ve <iframe> ile açılan ayrı akış belgesi (sohbet_akis.html). İkisi ayrı
   HTML belgesi ama TEK stil dosyasını paylaşıyor (bkz. sohbet_akis.html
   <head>, aynı ?s= damgalı /static/masasnet.css bağlantısı).
   =========================================================================== */
.sohbet-panel {
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* BÜYÜK / DİKKAT ÇEKİCİ BAŞLIK (Tugay'ın isteği): panel ana ekranın
   kalıcı bir parçası, göz önce buraya gitsin diye simge ve yazı diğer
   panel başlıklarından (bkz. .iletisim-baslik) belirgin şekilde büyük
   ve markalı bir zemin üzerinde. */
.sohbet-panel-baslik {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--olcek));
  padding: calc(16px * var(--olcek)) calc(16px * var(--olcek));
  background: color-mix(in srgb, var(--marka) 12%, var(--yuzey));
  border-bottom: calc(2px * var(--olcek)) solid var(--marka);
}

.sohbet-panel-simge {
  display: grid;
  place-items: center;
  width: calc(34px * var(--olcek));
  height: calc(34px * var(--olcek));
  border-radius: var(--r-sm);
  background: var(--marka);
  color: #fff;
  font-size: var(--f-lg);
  line-height: 1;
  flex: none;
}

.sohbet-panel-baslik-yazi {
  font-size: var(--f-md);
  font-weight: 800;
  color: var(--yazi);
  letter-spacing: 0.01em;
}

.sohbet-liste {
  list-style: none;
  margin: 0;
  padding: calc(6px * var(--olcek));
  max-height: calc(220px * var(--olcek));
  overflow-y: auto;
}

.sohbet-satir {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--olcek));
  padding: calc(8px * var(--olcek)) calc(10px * var(--olcek));
  border-radius: var(--r-sm);
  color: var(--yazi);
  text-decoration: none;
}

a.sohbet-satir:hover { background: var(--yuzey-2); }

.sohbet-satir-aktif {
  background: color-mix(in srgb, var(--marka) 10%, var(--yuzey));
}

/* Avatar (isim/başlık) + metin sütununu yan yana tutan sarmalayıcı —
   Teams'ten ilham: satırı taramadan önce göz bir "kimlik" yakalasın. */
.sohbet-satir-metin {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--olcek));
}

.sohbet-satir-baslik {
  font-size: var(--f-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sohbet-satir-onizleme {
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AVATAR DAİRELERİ — baş harfler, sabit (id'ye bağlı) renkli zemin.
   .sohbet-avatar normal boy (liste satırı, mesaj göndereni);
   .sohbet-avatar-kucuk daha küçük yerlerde (yeni sohbet listesi, mesaj
   başlığı) kullanılıyor. Renk sınıfları (avatar-c0..c5) portalın genel
   ton paletinden türetiliyor, markaya aykırı canlı renkler yok. */
.sohbet-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(30px * var(--olcek));
  height: calc(30px * var(--olcek));
  border-radius: 50%;
  color: #fff;
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0;
}

.sohbet-avatar-kucuk {
  width: calc(20px * var(--olcek));
  height: calc(20px * var(--olcek));
  font-size: calc(9px * var(--olcek));
  vertical-align: middle;
  margin-right: calc(5px * var(--olcek));
}

.avatar-c0 { background: var(--marka); }
.avatar-c1 { background: #2f6f4e; }
.avatar-c2 { background: #8a5a2b; }
.avatar-c3 { background: #4a5a8a; }
.avatar-c4 { background: #7a4a8a; }
.avatar-c5 { background: #55707d; }

.sohbet-rozet {
  flex: none;
  min-width: calc(18px * var(--olcek));
  height: calc(18px * var(--olcek));
  padding: 0 calc(5px * var(--olcek));
  border-radius: var(--r-hap);
  background: var(--ton-eylem);
  color: #fff;
  font-size: var(--f-xxs, 11px);
  font-weight: 700;
  display: grid;
  place-items: center;
}

.sohbet-yok {
  padding: calc(10px * var(--olcek));
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
}

.sohbet-yeni {
  padding: calc(8px * var(--olcek)) calc(15px * var(--olcek)) calc(12px * var(--olcek));
  border-top: var(--kenar-kalinlik) solid var(--kenar);
}

.sohbet-yeni summary {
  cursor: pointer;
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--yazi-soluk);
  padding: calc(4px * var(--olcek)) 0;
}

.sohbet-yeni-form {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--olcek));
  margin-top: calc(8px * var(--olcek));
}

.sohbet-yeni-form:not(:last-child) {
  padding-bottom: calc(10px * var(--olcek));
  border-bottom: var(--kenar-kalinlik) dashed var(--kenar);
}

.sohbet-yeni-form input[type="text"] {
  height: calc(34px * var(--olcek));
  font-size: var(--f-xs);
}

/* KİŞİ SEÇME KUTUSU YERİNE (Tugay'ın isteği): her çalışan tek tıkla
   sohbet açan bir satır — gizli kullanici_id'li küçük bir <form>,
   satır gibi görünen bir <button>. */
.sohbet-calisanlar-liste {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--olcek));
  max-height: calc(160px * var(--olcek));
  overflow-y: auto;
  margin-top: calc(8px * var(--olcek));
  padding-bottom: calc(10px * var(--olcek));
  border-bottom: var(--kenar-kalinlik) dashed var(--kenar);
}

.sohbet-calisan-form { margin: 0; }

.sohbet-calisan-satir {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: calc(7px * var(--olcek)) calc(9px * var(--olcek));
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--yazi);
  font-size: var(--f-xs);
  font-weight: 600;
  cursor: pointer;
}

.sohbet-calisan-satir:hover {
  background: var(--yuzey-2);
}

.sohbet-grup-secim {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--olcek));
  max-height: calc(110px * var(--olcek));
  overflow-y: auto;
  font-size: var(--f-xs);
  color: var(--yazi-soluk);
}

.sohbet-yeni-form button {
  height: calc(32px * var(--olcek));
  font-size: var(--f-xs);
}

/* <iframe> — ayrı belge (sohbet_akis.html), kendi meta-refresh'iyle
   kendini yeniliyor; ana sayfa hiç etkilenmiyor (bkz. ana.html notu). */
.sohbet-cerceve {
  width: 100%;
  height: calc(360px * var(--olcek));
  border: none;
  border-top: var(--kenar-kalinlik) solid var(--kenar);
}

/* --- sohbet_akis.html (iframe İÇİNDEKİ belge) --- */
.sohbet-akis-govde {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--yuzey);
  color: var(--yazi);
  font-family: inherit;
}

.sohbet-mesaj-listesi {
  flex: 1;
  overflow-y: auto;
  padding: calc(10px * var(--olcek));
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--olcek));
}

.sohbet-bos {
  margin: auto;
  font-size: var(--f-xs);
  color: var(--yazi-sessiz);
}

.sohbet-mesaj {
  align-self: flex-start;
  max-width: 80%;
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  padding: calc(7px * var(--olcek)) calc(10px * var(--olcek));
}

.sohbet-mesaj-kendi {
  align-self: flex-end;
  background: color-mix(in srgb, var(--marka) 10%, var(--yuzey));
  border-color: color-mix(in srgb, var(--marka) 30%, var(--yuzey));
}

.sohbet-gonderen {
  font-size: var(--f-xxs, 11px);
  font-weight: 700;
  color: var(--yazi-soluk);
  margin-bottom: calc(2px * var(--olcek));
}

.sohbet-metin {
  font-size: var(--f-xs);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.sohbet-ek {
  display: inline-block;
  font-size: var(--f-xs);
  color: var(--yazi);
}

.sohbet-zaman {
  margin-top: calc(2px * var(--olcek));
  font-size: 10px;
  color: var(--yazi-sessiz);
  text-align: right;
}

.sohbet-yaz-form {
  flex: none;
  display: flex;
  gap: calc(6px * var(--olcek));
  padding: calc(8px * var(--olcek));
  border-top: var(--kenar-kalinlik) solid var(--kenar);
  background: var(--yuzey);
}

.sohbet-yaz-form input[type="text"] {
  flex: 1;
  height: calc(34px * var(--olcek));
  font-size: var(--f-xs);
}

.sohbet-yaz-form button {
  height: calc(34px * var(--olcek));
  padding: 0 calc(14px * var(--olcek));
  font-size: var(--f-xs);
}

/* ==========================================================================
   2026-09-24 KURUMSAL YENİDEN TASARIM — üst şerit, karşılama bandı,
   kilit ekranı, İK parolaları paneli
   ========================================================================== */

/* ÜST ŞERİT: en üstte 3 piksellik marka şeridi — kurumsal portalların
   ortak imzası; sayfanın "resmî" bir araç olduğunu ilk bakışta söylüyor. */
.ust-serit {
  border-top: 3px solid var(--marka);
  box-shadow: 0 1px 0 var(--kenar), 0 4px 16px -12px rgb(16 32 48 / 25%);
}

.ust-marka-metin { display: flex; flex-direction: column; line-height: 1.1; }
.ust-marka-alt {
  font-size: calc(10.5px * var(--olcek));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yazi-sessiz);
}

/* Arama kutusu: içinde büyüteç simgesi. Simge <input>'un üstünde duruyor,
   tıklamayı engellemiyor (pointer-events: none). */
.arama-form { position: relative; align-items: center; }
.arama-simge {
  position: absolute;
  left: calc(12px * var(--olcek));
  display: inline-flex;
  color: var(--yazi-sessiz);
  pointer-events: none;
}
.arama-simge svg.simge { width: calc(17px * var(--olcek)); height: calc(17px * var(--olcek)); }
.arama-form:has(.arama-simge) input {
  padding-left: calc(38px * var(--olcek));
  background: var(--yuzey-2);
  border-radius: var(--r-hap);
}
.arama-form:has(.arama-simge) input:focus { background: var(--yuzey); }

/* --------------------------------------------------------------------------
   KARŞILAMA BANDI — lacivertten marka mavisine geçiş, sağda özet kutuları.
   Desen iki yumuşak ışık halkasıyla çiziliyor (resim dosyası yok).
   -------------------------------------------------------------------------- */
.karsilama {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sayfa-bosluk);
  flex-wrap: wrap;
  margin-bottom: calc(26px * var(--olcek));
  padding: calc(26px * var(--olcek)) calc(30px * var(--olcek));
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(120deg, #0b2545 0%, #0f3d73 45%, var(--marka, #005dab) 100%);
  box-shadow: 0 18px 40px -26px rgb(0 45 95 / 70%);
}
.karsilama::before,
.karsilama::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.karsilama::before {
  width: 420px; height: 420px;
  right: -120px; top: -220px;
  background: radial-gradient(circle, rgb(255 255 255 / 14%), transparent 65%);
}
.karsilama::after {
  width: 300px; height: 300px;
  right: 180px; bottom: -210px;
  background: radial-gradient(circle, rgb(120 190 255 / 18%), transparent 65%);
}

.karsilama-ust {
  margin: 0 0 calc(4px * var(--olcek));
  font-size: var(--f-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 72%);
}
.karsilama-baslik {
  margin: 0;
  font-size: calc(26px * var(--olcek));
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.karsilama-alt {
  margin: calc(6px * var(--olcek)) 0 0;
  font-size: var(--f-sm);
  color: rgb(255 255 255 / 80%);
}

.karsilama-ozet { display: flex; gap: calc(12px * var(--olcek)); }
.ozet-kutu {
  min-width: calc(112px * var(--olcek));
  padding: calc(12px * var(--olcek)) calc(16px * var(--olcek));
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 16%);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
}
.ozet-sayi { font-size: calc(24px * var(--olcek)); font-weight: 700; line-height: 1.1; }
.ozet-etiket { font-size: var(--f-xs); color: rgb(255 255 255 / 75%); font-weight: 600; }

/* Koyu temada band biraz daha koyu: sayfa zemini zaten koyu. */
:root[data-theme="dark"] .karsilama {
  background: linear-gradient(120deg, #071a31 0%, #0c2f58 50%, #11508f 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karsilama {
    background: linear-gradient(120deg, #071a31 0%, #0c2f58 50%, #11508f 100%);
  }
}

@media (max-width: 640px) {
  .karsilama { padding: calc(20px * var(--olcek)); }
  .karsilama-baslik { font-size: var(--f-lg); }
}

/* Sağ kolon panelleri kartlarla aynı dilde: aynı köşe, aynı gölge. */
.sohbet-panel,
.iletisim-panel {
  border-radius: calc(var(--r-md) + 2px);
  box-shadow: 0 1px 2px rgb(16 32 48 / 4%), 0 8px 24px -20px rgb(16 32 48 / 30%);
}

/* --------------------------------------------------------------------------
   KİLİT EKRANI — İK Yönetim Sistemi (kilit.html)
   -------------------------------------------------------------------------- */
.kilit-sayfa { max-width: calc(560px * var(--olcek)); }

.kilit-kart {
  margin-top: calc(18px * var(--olcek));
  padding: calc(34px * var(--olcek)) calc(34px * var(--olcek)) calc(28px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-top: 4px solid var(--vurgu, var(--marka));
  border-radius: var(--r-lg);
  box-shadow: 0 20px 40px -28px rgb(16 32 48 / 40%);
  text-align: center;
}

.kilit-simge {
  position: relative;
  width: calc(68px * var(--olcek));
  height: calc(68px * var(--olcek));
  margin: 0 auto calc(14px * var(--olcek));
  border-radius: calc(var(--r-lg) + 2px);
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--vurgu, var(--marka)),
              color-mix(in srgb, var(--vurgu, var(--marka)) 68%, #000));
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--vurgu, var(--marka)) 80%, transparent);
}
.kilit-simge > svg.simge { width: calc(32px * var(--olcek)); height: calc(32px * var(--olcek)); }
.kilit-rozet {
  position: absolute;
  right: calc(-6px * var(--olcek));
  bottom: calc(-6px * var(--olcek));
  width: calc(26px * var(--olcek));
  height: calc(26px * var(--olcek));
  border-radius: var(--r-hap);
  display: grid;
  place-items: center;
  background: var(--yuzey);
  color: var(--vurgu, var(--marka));
  border: 2px solid var(--yuzey);
  box-shadow: 0 2px 6px rgb(16 32 48 / 20%);
}
.kilit-rozet svg.simge { width: calc(15px * var(--olcek)); height: calc(15px * var(--olcek)); }

.kilit-baslik { margin: 0; font-size: var(--f-lg); font-weight: 700; }
.kilit-alt { margin: calc(6px * var(--olcek)) 0 calc(18px * var(--olcek)); color: var(--yazi-soluk); font-size: var(--f-sm); }

.kilit-form { display: flex; flex-direction: column; gap: calc(8px * var(--olcek)); text-align: left; }
.kilit-etiket { font-size: var(--f-sm); font-weight: 600; }
.kilit-dugme {
  margin-top: calc(6px * var(--olcek));
  height: var(--dugme-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--olcek));
  font-weight: 650;
  color: #fff;
  background: var(--vurgu, var(--marka));
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.kilit-dugme:hover { background: color-mix(in srgb, var(--vurgu, var(--marka)) 85%, #000); }
.kilit-dugme svg.simge { width: calc(18px * var(--olcek)); height: calc(18px * var(--olcek)); }
.kilit-not { margin: calc(14px * var(--olcek)) 0 0; font-size: var(--f-xs); color: var(--yazi-sessiz); }
.kilit-tanimsiz {
  padding: calc(16px * var(--olcek));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ton-uyari) 10%, var(--yuzey));
  color: var(--yazi);
  font-size: var(--f-sm);
}

/* --------------------------------------------------------------------------
   BT PANELİ · İK PAROLALARI (panel_ik_parolalari.html)
   -------------------------------------------------------------------------- */
.ik-panel-aciklama { font-size: var(--f-sm); color: var(--yazi-soluk); margin: 0 0 calc(14px * var(--olcek)); }

.ik-tablo {
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ik-satir {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) calc(100px * var(--olcek)) minmax(0, 2fr);
  gap: calc(12px * var(--olcek));
  align-items: center;
  padding: calc(10px * var(--olcek)) calc(14px * var(--olcek));
  border-top: var(--kenar-kalinlik) solid var(--kenar);
  font-size: var(--f-sm);
}
.ik-satir:first-child { border-top: none; }
.ik-baslik-satir {
  background: var(--yuzey-2);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yazi-sessiz);
}
.ik-satir.oncelikli { background: color-mix(in srgb, var(--v-ik) 4%, var(--yuzey)); }
.ik-satir.pasif { opacity: .6; }
.ik-kisi { display: flex; flex-direction: column; }
.ik-kisi small { color: var(--yazi-sessiz); font-size: var(--f-xs); }
.ik-durum {
  display: inline-block;
  font-size: var(--f-xs);
  font-weight: 700;
  padding: calc(2px * var(--olcek)) calc(9px * var(--olcek));
  border-radius: var(--r-hap);
  color: var(--yazi-sessiz);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
}
.ik-durum-var {
  color: var(--ton-artis);
  background: color-mix(in srgb, var(--ton-artis) 10%, var(--yuzey));
  border-color: color-mix(in srgb, var(--ton-artis) 30%, transparent);
}
.ik-form { display: flex; gap: calc(6px * var(--olcek)); align-items: center; }
.ik-form input[type="password"] { height: calc(34px * var(--olcek)); flex: 1; min-width: 0; font-size: var(--f-sm); }
.ik-form button { height: calc(34px * var(--olcek)); font-size: var(--f-xs); padding: 0 calc(12px * var(--olcek)); }
.ik-kaldir { color: var(--ton-eylem); }

@media (max-width: 900px) {
  .ik-satir { grid-template-columns: minmax(0, 1fr); }
  .ik-baslik-satir { display: none; }
}

/* Üst şerit TEK SATIR (geniş ekranda): kur şeridi eklenince kullanıcı
   menüsü alt satıra düşüyordu. Arama kutusu esniyor, diğerleri sabit. */
@media (min-width: 1200px) {
  .ust-serit { flex-wrap: nowrap; }
  .ust-serit > .arama-form { flex: 1 1 220px; min-width: 200px; max-width: 520px; }
  .ust-serit > .kur-serit { flex: none; }
  .ust-serit > .kullanici-menu { margin-left: auto; }
}

/* ==========================================================================
   2026-09-24 (2) — ERİŞİM YETKİLERİ: yetkisiz kart, Yetkiniz yok sayfası,
   Erişim Yetkileri paneli, Aktiviteler paneli
   ========================================================================== */

/* YETKİSİZ KART: görünüyor ama belli ki kapalı. Silik değil (okunabilir
   kalmalı), simge gri, rozet ve alt satır kilitli. */
.kart-yetkisiz { background: var(--yuzey-2); }
.kart-yetkisiz .kart-simge {
  background: linear-gradient(135deg, #8a97a6, #5d6b7a);
  box-shadow: none;
}
.kart-yetkisiz .kart-ad { color: var(--yazi-soluk); }
.kart-tur-yetkisiz {
  color: var(--yazi-soluk);
  background: var(--yuzey);
  border-color: var(--kenar-guclu);
}
.kart-eylem-yetkisiz { color: var(--yazi-sessiz); }
a.kart-yetkisiz:hover { border-color: var(--kenar-guclu); transform: none; box-shadow: var(--golge); }
a.kart-yetkisiz:hover::after { opacity: 0; }
a.kart-yetkisiz:hover .kart-ok { background: var(--yazi-soluk); color: var(--yuzey); transform: none; }

/* Karşılama bandı: "3/15" gösterimindeki küçük payda + bağlantılı kutu. */
.ozet-sayi small { font-size: 0.55em; font-weight: 600; opacity: .75; margin-left: 2px; }
a.ozet-kutu { color: inherit; text-decoration: none; }
a.ozet-kutu:hover { background: rgb(255 255 255 / 16%); }
.ozet-uyari { border-color: rgb(255 190 120 / 55%); background: rgb(255 170 80 / 16%); }

/* YETKİNİZ YOK SAYFASI — kilit ekranıyla aynı kart, uyarı renginde. */
.yetkisiz-kart { border-top-color: var(--ton-eylem); }
.yetkisiz-simge { background: linear-gradient(135deg, #8a97a6, #5d6b7a); box-shadow: none; }
.yetkisiz-simge .kilit-rozet { color: var(--ton-eylem); }
.yetkisiz-ust {
  margin: 0 0 calc(2px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ton-eylem);
}
.yetkisiz-not {
  margin: 0 0 calc(16px * var(--olcek));
  padding: calc(10px * var(--olcek));
  border-radius: var(--r-sm);
  font-size: var(--f-xs);
  color: var(--yazi-soluk);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) dashed var(--kenar-guclu);
}
.yetkisiz-dugme { text-decoration: none; background: var(--marka); width: 100%; }
.yetkisiz-dugme:hover { background: var(--marka-guclu); }

/* ERİŞİM YETKİLERİ PANELİ — solda kart listesi, sağda form. */
.yetki-duzen {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--sayfa-bosluk);
  align-items: start;
}
@media (max-width: 900px) { .yetki-duzen { grid-template-columns: minmax(0, 1fr); } }

.yetki-kartlar {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  padding: calc(6px * var(--olcek));
  position: sticky;
  top: calc(12px * var(--olcek));
}
.yetki-kart-satir {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--olcek));
  padding: calc(8px * var(--olcek)) calc(10px * var(--olcek));
  border-radius: var(--r-sm);
  color: var(--yazi);
  text-decoration: none;
}
.yetki-kart-satir:hover { background: var(--yuzey-2); }
.yetki-kart-satir.secili {
  background: color-mix(in srgb, var(--marka) 10%, var(--yuzey));
  box-shadow: inset 3px 0 0 var(--marka);
}
.yetki-kart-simge {
  width: calc(30px * var(--olcek));
  height: calc(30px * var(--olcek));
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(135deg, var(--vurgu, var(--marka)), color-mix(in srgb, var(--vurgu, var(--marka)) 70%, #000));
}
.yetki-kart-simge svg.simge { width: calc(16px * var(--olcek)); height: calc(16px * var(--olcek)); }
.yetki-kart-metin { display: flex; flex-direction: column; min-width: 0; }
.yetki-kart-metin strong { font-size: var(--f-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yetki-kart-metin small { font-size: var(--f-xs); color: var(--yazi-sessiz); }
.yetki-kart-satir:where([data-grup="erp"]) { --vurgu: var(--v-erp); }
.yetki-kart-satir:where([data-grup="rapor"]) { --vurgu: var(--v-rapor); }
.yetki-kart-satir:where([data-grup="uretim"]) { --vurgu: var(--v-uretim); }
.yetki-kart-satir:where([data-grup="ofis"]) { --vurgu: var(--v-ofis); }
.yetki-kart-satir:where([data-grup="ik"]) { --vurgu: var(--v-ik); }
.yetki-kart-satir:where([data-grup="satis"]) { --vurgu: var(--v-satis); }
.yetki-kart-satir:where([data-grup="kurumsal"]) { --vurgu: var(--v-kurumsal); }

.yetki-form {
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
  padding: calc(20px * var(--olcek)) calc(22px * var(--olcek));
}
.yetki-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.yetki-baslik h2 { margin: 0; font-size: var(--f-lg); }
.yetki-ozet {
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--marka);
  background: var(--marka-yumusak);
  border-radius: var(--r-hap);
  padding: calc(3px * var(--olcek)) calc(12px * var(--olcek));
}
.yetki-bolum {
  margin: calc(18px * var(--olcek)) 0 0;
  padding: 0;
  border: none;
}
.yetki-bolum legend {
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  margin-bottom: calc(10px * var(--olcek));
}
.yetki-secenek {
  display: flex;
  align-items: flex-start;
  gap: calc(10px * var(--olcek));
  padding: calc(10px * var(--olcek)) calc(12px * var(--olcek));
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-sm);
  margin-bottom: calc(6px * var(--olcek));
  cursor: pointer;
}
.yetki-secenek:has(input:checked) {
  border-color: var(--marka);
  background: color-mix(in srgb, var(--marka) 6%, var(--yuzey));
}
.yetki-secenek span { display: flex; flex-direction: column; }
.yetki-secenek small { color: var(--yazi-sessiz); font-size: var(--f-xs); }
.yetki-departmanlar {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6px * var(--olcek));
  margin: 0 0 calc(8px * var(--olcek)) calc(28px * var(--olcek));
}
.cip-secim {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--olcek));
  font-size: var(--f-xs);
  font-weight: 600;
  padding: calc(4px * var(--olcek)) calc(10px * var(--olcek));
  border: var(--kenar-kalinlik) solid var(--kenar-guclu);
  border-radius: var(--r-hap);
  cursor: pointer;
}
.cip-secim:has(input:checked) { border-color: var(--marka); color: var(--marka); background: var(--marka-yumusak); }
.yetki-aciklama { margin: 0 0 calc(10px * var(--olcek)); font-size: var(--f-xs); color: var(--yazi-sessiz); }
.yetki-tablo { border: var(--kenar-kalinlik) solid var(--kenar); border-radius: var(--r-sm); overflow: hidden; }
.yetki-satir {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) calc(150px * var(--olcek)) calc(96px * var(--olcek));
  gap: calc(10px * var(--olcek));
  align-items: center;
  padding: calc(8px * var(--olcek)) calc(12px * var(--olcek));
  border-top: var(--kenar-kalinlik) solid var(--kenar);
  font-size: var(--f-sm);
}
.yetki-satir:first-child { border-top: none; }
.yetki-baslik-satir { background: var(--yuzey-2); font-size: var(--f-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yazi-sessiz); }
.yetki-satir.istisna { background: color-mix(in srgb, var(--ton-uyari) 6%, var(--yuzey)); }
.yetki-satir select { height: calc(32px * var(--olcek)); font-size: var(--f-sm); width: 100%; }
.yetki-bt { font-size: var(--f-xs); font-weight: 700; color: var(--marka); }
.yetki-yok { color: var(--ton-eylem); background: color-mix(in srgb, var(--ton-eylem) 9%, var(--yuzey)); border-color: color-mix(in srgb, var(--ton-eylem) 28%, transparent); }
.yetki-kaydet { margin-top: calc(16px * var(--olcek)); display: flex; justify-content: flex-end; }
.yetki-kaydet .kilit-dugme { padding: 0 calc(22px * var(--olcek)); }

/* AKTİVİTELER PANELİ */
.aktivite-tablo { background: var(--yuzey); border: var(--kenar-kalinlik) solid var(--kenar); border-radius: var(--r-md); overflow: hidden; }
.aktivite-satir {
  display: grid;
  grid-template-columns: calc(150px * var(--olcek)) calc(150px * var(--olcek)) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 2fr) calc(110px * var(--olcek));
  gap: calc(10px * var(--olcek));
  align-items: center;
  padding: calc(9px * var(--olcek)) calc(14px * var(--olcek));
  border-top: var(--kenar-kalinlik) solid var(--kenar);
  font-size: var(--f-sm);
}
.aktivite-satir:first-child { border-top: none; }
.aktivite-baslik { background: var(--yuzey-2); font-size: var(--f-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yazi-sessiz); }
.aktivite-zaman, .aktivite-ip { font-variant-numeric: tabular-nums; color: var(--yazi-soluk); font-size: var(--f-xs); }
.aktivite-aciklama { color: var(--yazi-soluk); font-size: var(--f-xs); }
.aktivite-tur {
  display: inline-block;
  font-size: var(--f-xs);
  font-weight: 700;
  padding: calc(2px * var(--olcek)) calc(9px * var(--olcek));
  border-radius: var(--r-hap);
  color: var(--yazi-soluk);
  background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
  white-space: nowrap;
}
.aktivite-satir[data-tur="YETKISIZ_ERISIM"] .aktivite-tur,
.aktivite-satir[data-tur="IK_KILIT_HATALI"] .aktivite-tur {
  color: var(--ton-eylem);
  background: color-mix(in srgb, var(--ton-eylem) 9%, var(--yuzey));
  border-color: color-mix(in srgb, var(--ton-eylem) 28%, transparent);
}
.aktivite-satir[data-tur="GIRIS_HATALI"] .aktivite-tur {
  color: var(--ton-uyari);
  background: color-mix(in srgb, var(--ton-uyari) 10%, var(--yuzey));
  border-color: color-mix(in srgb, var(--ton-uyari) 30%, transparent);
}
.aktivite-satir[data-tur="GIRIS"] .aktivite-tur,
.aktivite-satir[data-tur="IK_KILIT_ACILDI"] .aktivite-tur {
  color: var(--ton-artis);
  background: color-mix(in srgb, var(--ton-artis) 9%, var(--yuzey));
  border-color: color-mix(in srgb, var(--ton-artis) 28%, transparent);
}
.aktivite-satir[data-tur="YETKI_DEGISTI"] .aktivite-tur,
.aktivite-satir[data-tur="IK_PAROLA"] .aktivite-tur {
  color: var(--marka);
  background: var(--marka-yumusak);
  border-color: color-mix(in srgb, var(--marka) 28%, transparent);
}
@media (max-width: 1000px) {
  .aktivite-satir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aktivite-baslik { display: none; }
}

/* ===================================================================
   SOHBET v2 — ana ekrandaki panel (çerçeve /sohbet?gomulu=1)
   =================================================================== */
.sohbet-panel-v2 { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sohbet-panel-v2 .sohbet-panel-baslik { padding: 14px 16px 12px; margin: 0; border-bottom: var(--kenar-kalinlik) solid var(--kenar); }
.sohbet-tam-ekran {
  margin-left: auto; font-size: var(--f-xs); font-weight: 650; white-space: nowrap;
  color: var(--marka); text-decoration: none; padding: 5px 10px; border-radius: var(--r-hap);
  background: var(--marka-yumusak);
}
.sohbet-tam-ekran:hover { background: var(--marka); color: #fff; }
.sohbet-cerceve-v2 { display: block; width: 100%; height: min(640px, 72vh); border: 0; background: var(--yuzey); }
@media (max-width: 760px) { .sohbet-cerceve-v2 { height: 78vh; } }

/* ===================================================================
   DUYURULAR + SON DAKİKA (v2, 24.09.2026) — kart alanının başında
   İki kutu yan yana; 900px altında alt alta. Yükseklikler eşit (grid
   stretch) ve SINIRLI: liste uzarsa kutu büyümüyor, kartlar aşağı
   itilmiyor.
   =================================================================== */
.bilgi-alani {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--izgara-bosluk);
  margin-bottom: var(--izgara-bosluk);
}
.bilgi-alani > .bilgi-kutu:only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .bilgi-alani { grid-template-columns: minmax(0, 1fr); } }

.bilgi-kutu {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--golge);
  overflow: hidden;
}
.bilgi-bas {
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px * var(--olcek)) calc(16px * var(--olcek));
  border-bottom: var(--kenar-kalinlik) solid var(--kenar);
}
.bilgi-simge {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--marka); background: var(--marka-yumusak);
}
.bilgi-simge svg { width: 16px; height: 16px; }
.bilgi-baslik { margin: 0; font-size: var(--f-md); font-weight: 700; color: var(--yazi); }
.bilgi-eylem {
  margin-left: auto; font-size: var(--f-xs); font-weight: 650; white-space: nowrap;
  color: var(--marka); text-decoration: none; padding: 5px 10px;
  border-radius: var(--r-hap); background: var(--marka-yumusak);
}
.bilgi-eylem:hover { background: var(--marka); color: #fff; }
.bilgi-not { margin-left: auto; font-size: var(--f-xs); color: var(--yazi-sessiz); white-space: nowrap; }
.bilgi-bos { margin: 0; padding: calc(18px * var(--olcek)) 16px; font-size: var(--f-sm); color: var(--yazi-sessiz); }

/* --- Duyurular --- */
.duyuru-liste { list-style: none; margin: 0; padding: 0; }
.duyuru-liste > li + li { border-top: var(--kenar-kalinlik) solid var(--kenar); }
.duyuru-oge > summary {
  display: flex; gap: 12px; align-items: flex-start;
  padding: calc(12px * var(--olcek)) 16px;
  cursor: pointer; list-style: none;
}
.duyuru-oge > summary::-webkit-details-marker { display: none; }
.duyuru-oge > summary:hover { background: var(--yuzey-2); }
.duyuru-oge > summary:focus-visible { outline: 2px solid var(--marka); outline-offset: -2px; }
.duyuru-tarih {
  flex: none; width: 44px; padding: 5px 0 6px; border-radius: 10px; text-align: center;
  background: var(--marka-yumusak); color: var(--marka);
  font-size: var(--f-xs); font-weight: 650; line-height: 1.1; text-transform: uppercase;
}
.duyuru-tarih b { display: block; font-size: calc(18px * var(--olcek)); font-weight: 800; }
.duyuru-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.duyuru-ust { display: flex; align-items: center; gap: 8px; min-width: 0; }
.duyuru-ust strong {
  font-size: var(--f-sm); color: var(--yazi); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duyuru-yeni {
  flex: none; font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ton-artis); padding: 2px 7px; border-radius: var(--r-hap);
  background: color-mix(in srgb, var(--ton-artis) 12%, var(--yuzey));
}
.duyuru-onizleme {
  font-size: var(--f-sm); color: var(--yazi-soluk); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.duyuru-tam { display: none; font-size: var(--f-sm); color: var(--yazi-soluk); line-height: 1.5; white-space: pre-wrap; }
.duyuru-oge[open] .duyuru-onizleme { display: none; }
.duyuru-oge[open] .duyuru-tam { display: block; }
.duyuru-oge[open] .duyuru-ust strong { white-space: normal; }
.duyuru-govde small { font-size: var(--f-xs); color: var(--yazi-sessiz); }

/* --- Son Dakika --- */
.canli-nokta {
  width: 10px; height: 10px; margin: 0 4px 0 6px; flex: none; border-radius: 50%;
  background: var(--ton-eylem);
  animation: canli-nabiz 2s infinite;
}
@keyframes canli-nabiz {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ton-eylem) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .canli-nokta { animation: none; } }
.haber-liste { list-style: none; margin: 0; padding: 4px 0; }
.haber-liste a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: calc(8px * var(--olcek)) 16px;
  color: var(--yazi); text-decoration: none;
}
.haber-liste a:hover { background: var(--yuzey-2); }
.haber-liste a:hover .haber-metin { color: var(--marka); }
.haber-saat {
  font-size: var(--f-xs); font-weight: 700; color: var(--ton-eylem);
  font-variant-numeric: tabular-nums; min-width: 38px;
}
.haber-metin {
  font-size: var(--f-sm); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.haber-kaynak {
  font-size: 10px; font-weight: 650; color: var(--yazi-sessiz); white-space: nowrap;
  padding: 2px 7px; border: var(--kenar-kalinlik) solid var(--kenar); border-radius: var(--r-hap);
}
/* Telefonda başlık kesilmesin: iki satıra kadar aksın, kaynak alta insin. */
@media (max-width: 640px) {
  .haber-liste a { grid-template-columns: auto minmax(0, 1fr); row-gap: 3px; }
  .haber-kaynak { grid-column: 2; justify-self: start; }
  .duyuru-ust strong { white-space: normal; }
}

/* ===================================================================
   BT Paneli · Duyurular
   =================================================================== */
.duyuru-ekle-form {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--olcek));
  max-width: 640px;
  margin-bottom: calc(28px * var(--olcek));
  padding: calc(18px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
}
.duyuru-form-baslik { margin: 0 0 4px; font-size: var(--f-md); color: var(--yazi); }
.duyuru-ekle-form label { font-size: var(--f-sm); font-weight: 600; color: var(--yazi-soluk); }
.duyuru-ekle-form textarea { resize: vertical; font: inherit; }
.duyuru-ekle-dugme { align-self: flex-start; margin-top: 4px; width: auto; padding: 0 22px; height: var(--dugme-h); }
.duyuru-liste-baslik { font-size: var(--f-md); margin: 0 0 10px; color: var(--yazi); }
.duyuru-tablo { display: flex; flex-direction: column; gap: 10px; }
.duyuru-satir {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px * var(--olcek));
  background: var(--yuzey);
  border: var(--kenar-kalinlik) solid var(--kenar);
  border-radius: var(--r-md);
}
.duyuru-satir.pasif { opacity: 0.6; }
.duyuru-satir-metin { flex: 1; min-width: 0; }
.duyuru-satir-metin strong { display: block; color: var(--yazi); }
.duyuru-satir-metin p { margin: 4px 0; color: var(--yazi-soluk); font-size: var(--f-sm); white-space: pre-wrap; }
.duyuru-satir-metin small { color: var(--yazi-sessiz); font-size: var(--f-xs); }
.duyuru-islem { display: flex; gap: 8px; flex: none; }

/* ===================================================================
   GÖRÜNÜM v3 (24.09.2026) — telefon düzeni + küçük masaüstü rötuşları
   Tugay: "tek portaldan hizmet, mobil uyumlu; görsel olarak daha güzel"
   =================================================================== */

/* Uygulamalar başlığı — kart ızgarasının neyin listesi olduğunu söylüyor. */
.kartlar-baslik {
  display: flex; align-items: center; gap: 8px;
  margin: calc(4px * var(--olcek)) 0 calc(12px * var(--olcek));
  font-size: var(--f-md); font-weight: 700; color: var(--yazi);
}
.kartlar-sayi {
  font-size: var(--f-xs); font-weight: 700; color: var(--yazi-sessiz);
  padding: 2px 8px; border-radius: var(--r-hap); background: var(--yuzey-2);
  border: var(--kenar-kalinlik) solid var(--kenar);
}

/* Sayfa zemini: üstte markadan gelen çok hafif bir ışık — düz gri zeminden
   daha derinlikli, içerikle yarışmıyor. */
body:not(.giris):not(.giris-zemin):not(.sohbet-govde):not(.sohbet-gomulu) {
  background:
    radial-gradient(1200px 380px at 50% -120px, color-mix(in srgb, var(--marka) 10%, transparent), transparent 70%),
    var(--zemin);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Telefon öğeleri masaüstünde yok. */
.alt-menu, .hesap-sayfa { display: none; }

@media (max-width: 760px) {
  /* --- ÜST ŞERİT: tek satır marka + tam genişlik arama --- */
  .ust-serit {
    position: sticky; top: 0;
    padding: 8px 14px 10px; gap: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .ust-serit > .satir-form,
  .ust-serit > .kullanici-menu,
  .ust-marka-alt { display: none; }
  .ust-marka img { height: 28px; }
  .ust-marka-ad { font-size: 18px; }
  .ust-serit .arama-form { flex-basis: 100%; order: 10; }
  .ust-serit .arama-form input { height: 40px; }

  main { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); }

  /* --- ALT SEKME ÇUBUĞU --- */
  .alt-menu {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--yuzey) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: var(--kenar-kalinlik) solid var(--kenar);
    box-shadow: 0 -6px 20px -14px rgb(16 32 48 / 35%);
  }
  .alt-menu-oge {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px 4px; border-radius: 12px;
    font-size: 11px; font-weight: 600; color: var(--yazi-sessiz); text-decoration: none;
  }
  .alt-menu-oge svg.simge { width: 22px; height: 22px; stroke-width: 1.8; }
  .alt-menu-oge.aktif { color: var(--marka); }
  .alt-menu-oge.aktif::before {
    content: ""; position: absolute; top: -6px; left: 30%; right: 30%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--marka);
  }
  .alt-menu-oge:active { background: var(--yuzey-2); }
  .alt-menu-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 9.5px; font-weight: 800; color: #fff; background: var(--marka);
  }
  .alt-menu-rozet {
    position: absolute; top: 2px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 800; color: #fff; background: var(--ton-eylem);
    box-shadow: 0 0 0 2px var(--yuzey);
  }

  /* --- HESABIM: alttan açılan sayfa (CSS :target) --- */
  .hesap-sayfa:target { display: block; position: fixed; inset: 0; z-index: 70; }
  .hesap-perde { position: absolute; inset: 0; background: rgb(8 18 30 / 45%); }
  .hesap-kutu {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 86vh; overflow-y: auto;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
    background: var(--yuzey); border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px -10px rgb(8 18 30 / 45%);
    animation: hesap-ac .22s ease-out;
  }
  .hesap-kutu::before {
    content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 10px;
    border-radius: 2px; background: var(--kenar-guclu);
  }
  @keyframes hesap-ac { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  .hesap-bas { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; }
  .hesap-kim { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .hesap-kim strong { font-size: var(--f-md); color: var(--yazi); }
  .hesap-kim small { font-size: var(--f-xs); color: var(--yazi-sessiz); }
  .hesap-kapat {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--yuzey-2); color: var(--yazi-soluk); text-decoration: none; font-size: 15px;
  }
  .hesap-gorunum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 8px; margin-bottom: 6px;
    border-top: var(--kenar-kalinlik) solid var(--kenar);
    border-bottom: var(--kenar-kalinlik) solid var(--kenar);
  }
  .hesap-satirlar .menu-satir { padding: 12px 10px; font-size: var(--f-base); border-radius: 10px; }
  .hesap-satirlar .menu-satir svg.simge { width: 19px; height: 19px; }

  /* --- KARŞILAMA: kısa, özet kutuları taşmadan 3 sütun --- */
  .karsilama { padding: 16px 16px 14px; gap: 12px; margin-bottom: 14px; border-radius: 16px; }
  .karsilama-baslik { font-size: 21px; }
  .karsilama-alt { display: none; }
  .karsilama-ozet { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .ozet-kutu { min-width: 0; padding: 9px 10px; }
  .ozet-sayi { font-size: 20px; }
  .ozet-etiket { font-size: 10.5px; line-height: 1.25; }

  /* --- Ana ekrandaki gömülü sohbet: telefonda alt çubuktaki Sohbet sekmesi
         aynı işi tam ekran yapıyor; burada 78vh'lik kutu sayfayı uzatıyordu. --- */
  .sohbet-panel-v2 { display: none; }

  .bilgi-alani { gap: 12px; margin-bottom: 14px; }
  /* Alt çubukta Ana Sayfa var: "Uygulamalara dön" düğmesi telefonda fazlalık. */
  .geri-dugmesi { display: none; }
  /* BT paneli sekmeleri: taşınca yana kaydırılıyor (kesilmiyor). */
  .panel-sekmeler {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px;
  }
  .panel-sekmeler::-webkit-scrollbar { display: none; }
  .panel-sekme { flex: none; white-space: nowrap; }
  /* Telefonda en yeni 3 haber — kutu ekranı kaplamasın. */
  .haber-liste li:nth-child(n+4) { display: none; }
}

/* --- KARTLAR: UYGULAMA BAŞLATICI (Görünüm v3.1 — masaüstü + telefon) ---
   Microsoft 365 / Okta başlatıcılarının dili: büyük renkli simge, altında
   ad, bir satır açıklama. Kart başına 200px yerine ~150px; aynı alanda
   iki kat uygulama, göz simgeden tanıyor. "Aç" satırı kalktı — kartın
   tamamı tıklanıyor, üzerine gelince yükseliyor ve ok beliriyor. */
.kartlar { grid-template-columns: repeat(auto-fill, minmax(calc(158px * var(--olcek)), 1fr)); gap: calc(14px * var(--olcek)); }
.kart {
  min-height: 0; align-items: center; text-align: center; gap: 0;
  padding: calc(22px * var(--olcek)) calc(12px * var(--olcek)) calc(18px * var(--olcek));
  border-radius: 18px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kart-ust { margin: 0 0 calc(12px * var(--olcek)); justify-content: center; }
.kart-simge {
  width: calc(58px * var(--olcek)); height: calc(58px * var(--olcek)); border-radius: 17px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%),
              0 10px 20px -10px color-mix(in srgb, var(--vurgu, var(--marka)) 85%, transparent);
}
.kart-simge svg.simge { width: calc(27px * var(--olcek)); height: calc(27px * var(--olcek)); }
.kart-ad {
  font-size: calc(14.5px * var(--olcek)); font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kart-aciklama {
  margin-top: 3px; font-size: calc(12px * var(--olcek)); line-height: 1.4; color: var(--yazi-sessiz);
  -webkit-line-clamp: 2;
}
.kart .kart-alt, .kart .kart-not, .kart .kart-yol { display: none; }
/* Köşede küçük ok — yalnız üzerine gelince. */
a.kart::before {
  content: "↗"; position: absolute; top: 10px; right: 12px;
  font-size: 13px; font-weight: 700; color: var(--vurgu, var(--marka));
  opacity: 0; transform: translate(-3px, 3px); transition: opacity .16s ease, transform .16s ease;
}
a.kart:hover::before { opacity: 1; transform: none; }
a.kart:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--vurgu, var(--marka)) 35%, var(--kenar));
  box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--vurgu, var(--marka)) 60%, rgb(16 32 48 / 40%));
}
a.kart:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
/* Rozet yazısı yerine köşede küçük kilit (ayrıntı title'da). */
.kart-tur {
  position: absolute; top: 9px; left: 9px;
  padding: 0; width: 22px; height: 22px; justify-content: center;
  font-size: 0; gap: 0;
}
.kart-tur svg.simge { width: 12px; height: 12px; }
.kart-tur:not(:has(svg)) {
  /* Uzak Masaüstü / E-posta / Portal gibi yazılı rozetler: küçük hap. */
  width: auto; height: auto; padding: 1px 8px; font-size: 10px; left: 50%; transform: translateX(-50%);
  top: 8px; opacity: .85;
}
.kart-yakinda .kart-alt, .kart-yetkisiz .kart-alt { display: flex; justify-content: center; margin: 0; padding-top: 8px; }
.kart-yakinda .kart-yakinda-rozet { font-size: 10.5px; padding: 1px 9px; }
.kart-yetkisiz .kart-alt .kart-ok { display: none; }
.kart-yetkisiz .kart-eylem-yetkisiz { font-size: 11px; }
.kart:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .kart, a.kart::before { transition: none; } a.kart:hover { transform: none; } }

@media (max-width: 640px) {
  .kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kart { padding: 14px 6px 12px; border-radius: 16px; }
  .kart-ust { margin: 0 0 8px; }
  .kart-simge { width: 52px; height: 52px; border-radius: 15px; }
  .kart-simge svg.simge { width: 25px; height: 25px; }
  .kart-ad { font-size: 12.5px; line-height: 1.25; }
  .kart-aciklama { display: none; }
  .kart-tur:not(:has(svg)) { display: none; }
  .kart-tur { top: 6px; left: auto; right: 6px; }
  .kart-yakinda .kart-alt, .kart-yetkisiz .kart-alt { padding-top: 6px; }
  .kart-yakinda .kart-yakinda-rozet { font-size: 10px; padding: 1px 8px; }
  a.kart::before { display: none; }
}
@media (max-width: 360px) {
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===========================================================================
   GÖRÜNÜM v4 (29.09.2026) — İŞ AKIŞI KLASÖRLERİ + PİYASA ŞERİDİ
   Tugay: "iOS mantığı ile, kartlar gruplar altında; döviz, borsa, altın,
   gümüş renkli vurgularla, Bloomberg TV gibi". Renk seçimi: C — Masaş
   laciverdi (sarı/siyah yok). Betik yok.
   =========================================================================== */

/* --- Yeni grupların vurgu rengi (mevcut palet değişkenleri; koyu temada
       o değişkenler zaten yeniden tanımlı) --- */
:where(.kart[data-grup="iletisim"]), :where(.grup-klasor[data-grup="iletisim"]) { --vurgu: var(--v-mavi); }
:where(.kart[data-grup="dokuman"]),  :where(.grup-klasor[data-grup="dokuman"])  { --vurgu: var(--v-turkuaz); }
:where(.kart[data-grup="bankalar"]), :where(.grup-klasor[data-grup="bankalar"]) { --vurgu: var(--v-lacivert); }
:where(.kart[data-grup="tv"]),       :where(.grup-klasor[data-grup="tv"])       { --vurgu: var(--v-bordo); }
:where(.kart[data-grup="bt"]),       :where(.grup-klasor[data-grup="bt"])       { --vurgu: var(--v-gri); }
:where(.grup-klasor[data-grup="satis"])  { --vurgu: var(--v-satis); }
:where(.grup-klasor[data-grup="uretim"]) { --vurgu: var(--v-uretim); }
:where(.grup-klasor[data-grup="rapor"])  { --vurgu: var(--v-rapor); }
:where(.grup-klasor[data-grup="ik"])     { --vurgu: var(--v-ik); }
:where(.grup-klasor[data-grup="diger"])  { --vurgu: var(--logo-gri); }
:where(.yetki-kart-satir[data-grup="iletisim"]) { --vurgu: var(--v-mavi); }
:where(.yetki-kart-satir[data-grup="dokuman"])  { --vurgu: var(--v-turkuaz); }
:where(.yetki-kart-satir[data-grup="bankalar"]) { --vurgu: var(--v-lacivert); }
:where(.yetki-kart-satir[data-grup="tv"])       { --vurgu: var(--v-bordo); }
:where(.yetki-kart-satir[data-grup="bt"])       { --vurgu: var(--v-gri); }

/* --- Klasörler --- */
.grup-klasorleri {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--olcek)); margin-top: calc(6px * var(--olcek));
}
.grup-klasor {
  background: var(--yuzey); border: var(--kenar-kalinlik, 1px) solid var(--kenar);
  border-radius: 22px; padding: calc(14px * var(--olcek)) calc(14px * var(--olcek)) calc(10px * var(--olcek));
  box-shadow: 0 1px 2px rgb(16 32 48 / 4%), 0 10px 24px -18px rgb(16 32 48 / 22%);
  min-width: 0;
}
.grup-klasor.genis { grid-column: 1 / -1; }
.grup-bas { display: flex; align-items: center; gap: 10px; margin: 0 4px calc(10px * var(--olcek)); }
.grup-simge {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--vurgu, var(--marka)); color: #fff;
}
.grup-simge svg.simge { width: 16px; height: 16px; }
.grup-yazi { display: flex; flex-direction: column; min-width: 0; }
.grup-yazi h2 { margin: 0; font-size: calc(15px * var(--olcek)); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.grup-yazi small { font-size: calc(12px * var(--olcek)); color: var(--yazi-sessiz); line-height: 1.3; }
.grup-sayi { margin-left: auto; font-size: 12px; font-weight: 650; color: var(--yazi-sessiz); }

/* Klasör içindeki kartlar: kutusuz, simge + ad (iOS ana ekran gibi). */
.kartlar.kartlar-klasor {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(4px * var(--olcek));
}
.grup-klasor.genis .kartlar-klasor { grid-template-columns: repeat(auto-fill, minmax(calc(112px * var(--olcek)), 1fr)); }
.grup-klasor .kart {
  background: transparent; border-color: transparent; box-shadow: none;
  padding: calc(10px * var(--olcek)) calc(4px * var(--olcek)) calc(8px * var(--olcek));
  border-radius: 16px;
}
.grup-klasor a.kart:hover {
  transform: none; background: var(--yuzey-2); border-color: var(--kenar); box-shadow: none;
}
.grup-klasor .kart-ust { margin-bottom: calc(8px * var(--olcek)); }
.grup-klasor .kart-simge { width: calc(56px * var(--olcek)); height: calc(56px * var(--olcek)); border-radius: 15px; }
.grup-klasor .kart-ad { font-size: calc(13px * var(--olcek)); font-weight: 600; }
.grup-klasor .kart-aciklama { font-size: calc(11px * var(--olcek)); -webkit-line-clamp: 1; }
.grup-klasor a.kart::before { top: 6px; right: 8px; }

@media (max-width: 1180px) { .grup-klasorleri { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .grup-klasorleri { gap: 12px; }
  .grup-klasor { border-radius: 18px; padding: 12px 8px 6px; }
  .kartlar.kartlar-klasor, .grup-klasor.genis .kartlar-klasor { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .grup-klasor .kart { padding: 8px 2px 6px; }
  .grup-klasor .kart-simge { width: 52px; height: 52px; border-radius: 14px; }
  .grup-klasor .kart-ad { font-size: 11.5px; }
}
@media (max-width: 360px) {
  .kartlar.kartlar-klasor, .grup-klasor.genis .kartlar-klasor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Piyasa şeridi (C: Masaş laciverdi) --- */
.piyasa-serit {
  --p-yukari: #3ee08f; --p-asagi: #ff6b6b; --p-soluk: #9fc3ea; --p-altin: #ffd66b;
  background: linear-gradient(90deg, #0a2a52, #0b3b73); color: #fff;
  font-variant-numeric: tabular-nums;
}
.piyasa-ic { max-width: var(--sayfa-genislik, 1440px); margin: 0 auto; display: flex; align-items: stretch; min-width: 0; }
.piyasa-etiket {
  flex: none; display: flex; flex-direction: column; justify-content: center;
  padding: 9px 16px; background: rgb(255 255 255 / 9%); border-right: 1px solid rgb(255 255 255 / 12%);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; white-space: nowrap;
}
.piyasa-etiket small { font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--p-soluk); }
.piyasa-kutular {
  flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr);
  overflow-x: auto; scrollbar-width: none;
}
.piyasa-kutular::-webkit-scrollbar { display: none; }
.piyasa-kutu { position: relative; padding: 8px 14px 9px; border-left: 1px solid rgb(255 255 255 / 8%); min-width: 0; }
.piyasa-kutu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.piyasa-kutu.u::after { background: var(--p-yukari); }
.piyasa-kutu.d::after { background: var(--p-asagi); }
.piyasa-ad { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--p-soluk); white-space: nowrap; }
.piyasa-deger { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.piyasa-kutu.altin .piyasa-deger { color: var(--p-altin); }
.piyasa-degisim { font-size: 12px; font-weight: 650; white-space: nowrap; }
.piyasa-degisim em { font-style: normal; font-weight: 500; opacity: .6; margin-left: 3px; }
.piyasa-serit .yukari { color: var(--p-yukari); }
.piyasa-serit .asagi { color: var(--p-asagi); }
.piyasa-kivilcim { position: absolute; right: 10px; top: 12px; width: 50px; height: 20px; fill: none; stroke-width: 1.6; stroke: var(--p-soluk); opacity: .9; }
.piyasa-kutu.u .piyasa-kivilcim { stroke: var(--p-yukari); }
.piyasa-kutu.d .piyasa-kivilcim { stroke: var(--p-asagi); }
.piyasa-mesaj { padding: 12px 16px; font-size: 13px; color: var(--p-soluk); }
.piyasa-kayan { background: #082243; border-top: 1px solid rgb(255 255 255 / 8%); font-size: 12.5px; }
.piyasa-sd { flex: none; background: #e11d2e; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .1em; padding: 6px 14px; display: flex; align-items: center; }
.piyasa-haberler { display: flex; gap: 0; overflow: hidden; white-space: nowrap; min-width: 0; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.piyasa-haberler a { color: #d6e4f5; text-decoration: none; padding: 6px 14px; border-right: 1px solid rgb(255 255 255 / 10%); }
.piyasa-haberler a:hover { color: #fff; text-decoration: underline; }
.piyasa-haberler b { color: #fff; font-weight: 650; margin-right: 4px; }
@media (max-width: 1180px) { .piyasa-kivilcim { display: none; } }
@media (max-width: 640px) {
  .piyasa-etiket { padding: 8px 10px; font-size: 10px; }
  .piyasa-etiket small { display: none; }
  .piyasa-kutular { grid-auto-columns: 112px; }
  .piyasa-kutu { padding: 7px 10px 8px; }
  .piyasa-deger { font-size: 16px; }
  .piyasa-haberler a:nth-child(n+2) { display: none; }
  .piyasa-haberler a { overflow: hidden; text-overflow: ellipsis; }
}

/* --- Altın & Gümüş kutusu (lacivert) --- */
.altin-kutu { background: linear-gradient(160deg, #0b3b73, #0a2a52); border-color: transparent; color: #fff; }
.altin-kutu .bilgi-baslik { color: #fff; }
.altin-kutu .bilgi-not { color: #9fc3ea; }
.altin-kutu .bilgi-simge.altin-simge { background: rgb(255 214 107 / 18%); color: #ffd66b; }
.altin-kutu .bilgi-bos { color: #9fc3ea; }
.altin-liste { list-style: none; margin: 0; padding: 2px 16px 10px; font-variant-numeric: tabular-nums; }
.altin-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgb(255 255 255 / 10%); }
.altin-satir:first-child { border-top: 0; }
.altin-ad { font-size: 13.5px; font-weight: 650; display: flex; flex-direction: column; }
.altin-ad small { font-size: 11px; font-weight: 500; color: #9fc3ea; }
.altin-sag { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.altin-deger { font-size: 17px; font-weight: 700; }
.altin-altin .altin-deger { color: #ffd66b; }
.altin-kutu .piyasa-degisim.yukari { color: #3ee08f; }
.altin-kutu .piyasa-degisim.asagi { color: #ff6b6b; }

/* Piyasa şeridi varken üst bardaki TCMB kur satırı gizleniyor: aynı sayfada
   iki farklı dolar değeri (resmî günlük kur ve piyasa) kafa karıştırıyordu.
   Diğer sayfalarda TCMB satırı yerinde duruyor. */
.piyasa-serit + .ust-serit .kur-serit { display: none; }
/* Telefonda Altın & Gümüş kutusu uygulamaların ALTINA iniyor: şerit zaten
   gram altını gösteriyor; ilk ekranda uygulamalar görünmeli. */
@media (max-width: 640px) {
  .portal-ana { display: flex; flex-direction: column; gap: 12px; }
  .portal-ana > .bilgi-alani { display: contents; }
  .portal-ana .altin-kutu { order: 5; }
}

/* --- BT Paneli · Kart Grupları (30.09.2026) --- */
.grup-panel-satir {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--yuzey); border: var(--kenar-kalinlik) solid var(--kenar); border-radius: 14px;
}
.grup-panel-satir.secili { border-color: var(--marka); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marka) 18%, transparent); }
.grup-panel-satir.pasif { opacity: .55; }
.grup-panel-sira { width: 22px; text-align: center; font-weight: 700; color: var(--yazi-sessiz); font-variant-numeric: tabular-nums; }
.grup-panel-simge { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--vurgu, var(--marka)); color: #fff; }
.grup-panel-simge svg.simge { width: 17px; height: 17px; }
.grup-panel-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.grup-panel-bilgi strong { font-size: 14.5px; }
.grup-panel-bilgi small { font-size: 12px; color: var(--yazi-sessiz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grup-panel-bilgi:hover strong { color: var(--marka); text-decoration: underline; }
.grup-panel-eylem { display: flex; gap: 6px; flex: none; }
.grup-panel-eylem form { margin: 0; }
.grup-panel-eylem button {
  width: 34px; height: 30px; border-radius: 8px; cursor: pointer;
  border: var(--kenar-kalinlik) solid var(--kenar); background: var(--yuzey-2); color: var(--yazi); font-size: 12px;
}
.grup-panel-eylem button:hover:not(:disabled) { border-color: var(--marka); color: var(--marka); }
.grup-panel-eylem button:disabled { opacity: .35; cursor: default; }

/* --- Piyasa canlı güncelleme (30.09.2026) --- */
.piyasa-gecikme { font-style: normal; font-weight: 600; font-size: 9px; letter-spacing: .04em; padding: 0 4px; border-radius: 4px; background: rgb(255 255 255 / 14%); color: #d6e4f5; vertical-align: 1px; }
@keyframes parla-yukari { 0% { background-color: rgb(62 224 143 / 35%); } 100% { background-color: transparent; } }
@keyframes parla-asagi  { 0% { background-color: rgb(255 107 107 / 35%); } 100% { background-color: transparent; } }
.piyasa-kutu.parla-u, .altin-satir.parla-u { animation: parla-yukari 1.4s ease-out; }
.piyasa-kutu.parla-d, .altin-satir.parla-d { animation: parla-asagi 1.4s ease-out; }
.piyasa-kivilcim polyline[points=""] { display: none; }
@media (prefers-reduced-motion: reduce) { .piyasa-kutu.parla-u, .piyasa-kutu.parla-d, .altin-satir.parla-u, .altin-satir.parla-d { animation: none; } }

/* ===========================================================================
   GÖRÜNÜM v5 (30.09.2026) — iOS KLASÖRLERİ + SIK KULLANDIKLARIN
   =========================================================================== */
.bolum-etiket {
  margin: calc(6px * var(--olcek)) 2px calc(8px * var(--olcek));
  font-size: calc(12px * var(--olcek)); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--yazi-sessiz);
}

/* Sık kullandıkların: tek satır, kutusuz simgeler */
.sik-kullan {
  background: var(--yuzey); border: var(--kenar-kalinlik) solid var(--kenar); border-radius: 20px;
  padding: calc(10px * var(--olcek)) calc(12px * var(--olcek)) calc(6px * var(--olcek));
  margin-bottom: calc(14px * var(--olcek));
  box-shadow: 0 1px 2px rgb(16 32 48 / 4%), 0 10px 24px -18px rgb(16 32 48 / 22%);
}
.sik-kullan .bolum-etiket { margin-top: 0; }
.kartlar.kartlar-sik { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }

/* Klasör ve sık kullanılan içindeki kartlar: iOS ana ekran gibi, kutusuz */
.kartlar-sik .kart, .klasor-panel .kart {
  background: transparent; border-color: transparent; box-shadow: none;
  padding: calc(8px * var(--olcek)) 2px calc(6px * var(--olcek)); border-radius: 16px;
}
.kartlar-sik a.kart:hover, .klasor-panel a.kart:hover { transform: none; background: var(--yuzey-2); border-color: var(--kenar); box-shadow: none; }
.kartlar-sik .kart-ust, .klasor-panel .kart-ust { margin-bottom: calc(6px * var(--olcek)); }
.kartlar-sik .kart-simge, .klasor-panel .kart-simge { width: calc(48px * var(--olcek)); height: calc(48px * var(--olcek)); border-radius: 14px; }
.kartlar-sik .kart-simge svg.simge, .klasor-panel .kart-simge svg.simge { width: calc(24px * var(--olcek)); height: calc(24px * var(--olcek)); }
.kartlar-sik .kart-ad, .klasor-panel .kart-ad { font-size: calc(12.5px * var(--olcek)); font-weight: 600; }
.kartlar-sik .kart-aciklama, .klasor-panel .kart-aciklama { display: none; }
.kartlar-sik .kart-tur:not(:has(svg)), .klasor-panel .kart-tur:not(:has(svg)) { display: none; }
.kartlar-sik a.kart::before, .klasor-panel a.kart::before { top: 4px; right: 6px; }

/* Klasör ızgarası */
.klasor-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--olcek)), 1fr));
  gap: calc(14px * var(--olcek)) calc(8px * var(--olcek));
}
details.klasor { min-width: 0; }
.klasor-kutu {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 6px 2px; border-radius: 18px; text-align: center;
}
.klasor-kutu::-webkit-details-marker { display: none; }
.klasor-kutu:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
.klasor-kapak {
  width: calc(88px * var(--olcek)); height: calc(88px * var(--olcek)); border-radius: 24px;
  padding: calc(10px * var(--olcek)); display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content;
  gap: calc(7px * var(--olcek)); align-content: start;
  background: color-mix(in srgb, var(--vurgu, var(--marka)) 13%, var(--yuzey));
  border: 1px solid color-mix(in srgb, var(--vurgu, var(--marka)) 22%, var(--kenar));
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--vurgu, var(--marka)) 70%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.klasor-kutu:hover .klasor-kapak { transform: translateY(-2px) scale(1.03); }
.klasor-kapak .kart-simge.mini {
  width: calc(29px * var(--olcek)); height: calc(29px * var(--olcek)); border-radius: 9px; box-shadow: none;
}
.klasor-kapak .kart-simge.mini svg.simge { width: calc(15px * var(--olcek)); height: calc(15px * var(--olcek)); }
.klasor-ad { font-size: calc(13px * var(--olcek)); font-weight: 650; line-height: 1.25; }
.klasor-sayi { font-size: calc(11.5px * var(--olcek)); color: var(--yazi-sessiz); margin-top: -3px; }

/* Mini simgelerin rengi: kartın rengi yoksa grubunun rengi */
:where(.kart-simge.mini[data-grup="erp"]) { --vurgu: var(--v-erp); }
:where(.kart-simge.mini[data-grup="rapor"]) { --vurgu: var(--v-rapor); }
:where(.kart-simge.mini[data-grup="uretim"]) { --vurgu: var(--v-uretim); }
:where(.kart-simge.mini[data-grup="ofis"]) { --vurgu: var(--v-ofis); }
:where(.kart-simge.mini[data-grup="ik"]) { --vurgu: var(--v-ik); }
:where(.kart-simge.mini[data-grup="satis"]) { --vurgu: var(--v-satis); }
:where(.kart-simge.mini[data-grup="kurumsal"]) { --vurgu: var(--v-kurumsal); }
:where(.kart-simge.mini[data-grup="iletisim"]) { --vurgu: var(--v-mavi); }
:where(.kart-simge.mini[data-grup="dokuman"]) { --vurgu: var(--v-turkuaz); }
:where(.kart-simge.mini[data-grup="bankalar"]) { --vurgu: var(--v-lacivert); }
:where(.kart-simge.mini[data-grup="tv"]) { --vurgu: var(--v-bordo); }
:where(.kart-simge.mini[data-grup="bt"]) { --vurgu: var(--v-gri); }

/* Açık klasör: ekranın ortasında panel, arkası bulanık. Arka plan summary'nin
   ::before'u — ona tıklamak summary'ye tıklamak demek, klasör kapanır (betiksiz). */
details.klasor[open] > .klasor-kutu::before {
  content: ""; position: fixed; inset: 0; z-index: 80; cursor: default;
  background: rgb(8 20 40 / 38%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
details.klasor[open] > .klasor-kutu .klasor-kapak { visibility: hidden; }
.klasor-panel {
  position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow: auto;
  background: var(--yuzey); border-radius: 28px; padding: 18px 18px 12px;
  box-shadow: 0 30px 70px -20px rgb(8 20 40 / 55%);
  animation: klasor-ac .18s ease-out;
}
@keyframes klasor-ac { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.klasor-panel-bas { display: flex; align-items: center; gap: 10px; margin: 0 4px 10px; }
.klasor-panel-bas .grup-yazi h2 { font-size: calc(17px * var(--olcek)); }
.klasor-panel .kartlar-klasor { grid-template-columns: repeat(auto-fill, minmax(calc(104px * var(--olcek)), 1fr)); gap: 4px; }
@media (prefers-reduced-motion: reduce) { .klasor-panel { animation: none; } .klasor-kutu:hover .klasor-kapak { transform: none; } }

@media (max-width: 1180px) { .kartlar.kartlar-sik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kartlar.kartlar-sik { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .klasor-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 4px; }
  .klasor-kapak { width: 80px; height: 80px; border-radius: 22px; padding: 9px; gap: 6px; }
  .klasor-kapak .kart-simge.mini { width: 26px; height: 26px; border-radius: 8px; }
  /* Telefonda klasör alttan açılır (iOS sayfa gibi) */
  .klasor-panel {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto;
    max-height: 82vh; border-radius: 26px 26px 0 0; padding: 14px 12px calc(18px + env(safe-area-inset-bottom));
    animation: klasor-alttan .2s ease-out;
  }
  .klasor-panel::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--kenar-guclu); margin: -4px auto 10px; }
  .klasor-panel .kartlar-klasor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @keyframes klasor-alttan { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
/* Telefonda uygulamalar önce: duyurular ve altın kutusu klasörlerin altına iner. */
@media (max-width: 640px) {
  .portal-ana > .bilgi-alani > .bilgi-kutu { order: 4; }
  .portal-ana .altin-kutu { order: 5; }
}

/* ===================================================================
   MASAŞ YAPAY ZEKA paneli (01.10.2026) — sohbetten ayrı, sağ kolonda
   =================================================================== */
.yz-panel-baslik { background: linear-gradient(120deg, color-mix(in srgb, #4f6bed 14%, var(--yuzey)), color-mix(in srgb, #9b5de5 12%, var(--yuzey))); }
.yz-simge { background: linear-gradient(135deg, #005dab 0%, #4f6bed 55%, #9b5de5 100%); }
.yz-simge .as-yildiz { width: 20px; height: 20px; fill: #fff; stroke: none; }
.yz-cerceve { height: min(560px, 66vh); }
@media (max-width: 760px) {
  .alt-menu:has(.alt-menu-asistan) { grid-template-columns: repeat(5, 1fr); }
  .alt-menu-asistan .as-yildiz { width: 22px; height: 22px; fill: currentColor; stroke: none; }
  .alt-menu-asistan:not(.aktif) .as-yildiz { color: #4f6bed; }
}

/* ===================================================================
   SOHBET KOLONU (01.10.2026) — üç yerleşim, betik yok:
     ≥1760 px : sayfanın solundaki boşlukta ayrı, yapışkan kolon
     1001–1759: uygulamaların altında (sol taraf), iki bölmeli
     ≤1000 px : tek kolon, uygulamaların altında; telefonda gizli
   =================================================================== */
.portal-duzen:has(> .sol-kolon) {
  grid-template-areas: "ana yan" "sohbet yan";
  grid-template-rows: auto 1fr;
}
.portal-duzen:has(> .sol-kolon) > .portal-ana { grid-area: ana; }
.portal-duzen:has(> .sol-kolon) > .yan-kolon { grid-area: yan; }
.sol-kolon { grid-area: sohbet; align-self: start; min-width: 0; }
.sohbet-cerceve-sol { height: min(620px, 72vh); }
@media (max-width: 1000px) {
  .portal-duzen:has(> .sol-kolon) { grid-template-areas: "ana" "sohbet" "yan"; grid-template-rows: auto; }
}
@media (min-width: 1760px) {
  main:has(> .portal-duzen > .sol-kolon) { max-width: calc((1320px + 300px + var(--sayfa-bosluk)) * var(--olcek)); }
  .portal-duzen:has(> .sol-kolon) {
    grid-template-columns: 300px minmax(0, 1fr) clamp(320px, 27%, 390px);
    grid-template-areas: "sohbet ana yan";
    grid-template-rows: auto;
  }
  .sol-kolon { position: sticky; top: 12px; }
  .sol-kolon .sohbet-cerceve-sol { height: calc(100vh - 110px); max-height: 900px; }
}
/* Sağ kolonda artık yalnız yapay zekâ var: daha uzun olabilir. */
.yan-kolon .yz-cerceve { height: min(760px, 78vh); }
@media (min-width: 1760px) {
  .sol-kolon .sohbet-panel-baslik-yazi { font-size: var(--f-base); }
  .sol-kolon .sohbet-panel-baslik { padding: 12px 12px 10px; gap: 8px; }
}

/* Duyurular tam genişlikte (01.10.2026): Altın & Gümüş kutusu kaldırıldı.
   Geniş alanda duyurular iki sütun, kutu yüksekliği içerik kadar. */
.bilgi-alani:has(> .bilgi-kutu:only-child) .duyuru-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bilgi-alani:has(> .bilgi-kutu:only-child) .duyuru-liste > li:nth-child(2n) { border-left: var(--kenar-kalinlik) solid var(--kenar); }
.bilgi-alani:has(> .bilgi-kutu:only-child) .duyuru-liste > li { border-top: 0; }
@media (max-width: 900px) {
  .bilgi-alani:has(> .bilgi-kutu:only-child) .duyuru-liste { grid-template-columns: minmax(0, 1fr); }
  .bilgi-alani:has(> .bilgi-kutu:only-child) .duyuru-liste > li:nth-child(2n) { border-left: 0; }
}

/* ===================================================================
   KARŞILAMA BANDI — İNCE ŞERİT (01.10.2026, Tugay: "yer kaplıyor")
   ~130 px'lik band tek satıra indi (~48 px): selam + tarih solda,
   sayılar sağda küçük haplar. Açıklama satırı kaldırıldı (bilgi
   kartların kilit işaretinde zaten var).
   =================================================================== */
.karsilama {
  flex-wrap: nowrap; gap: 12px;
  margin-bottom: calc(14px * var(--olcek));
  padding: calc(9px * var(--olcek)) calc(10px * var(--olcek)) calc(9px * var(--olcek)) calc(18px * var(--olcek));
  border-radius: 14px;
  box-shadow: 0 10px 24px -20px rgb(0 45 95 / 70%);
}
.karsilama::before { width: 260px; height: 260px; top: -170px; right: -60px; }
.karsilama::after { display: none; }
.karsilama-metin { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.karsilama-baslik { font-size: calc(18px * var(--olcek)); letter-spacing: -0.2px; white-space: nowrap; }
.karsilama-ust { margin: 0; font-size: var(--f-sm); font-weight: 500; white-space: nowrap; }
.karsilama-alt { display: none; }
.karsilama-ozet { gap: 6px; flex: 0 0 auto; }
.ozet-kutu {
  flex-direction: row; align-items: baseline; gap: 5px; min-width: 0;
  padding: calc(5px * var(--olcek)) calc(12px * var(--olcek)); border-radius: 999px;
  white-space: nowrap;
}
.ozet-sayi { font-size: calc(15px * var(--olcek)); }
.ozet-sayi small { font-size: .8em; opacity: .75; }
.ozet-etiket { font-size: var(--f-xs); font-weight: 600; }
@media (max-width: 760px) {
  .karsilama { flex-wrap: wrap; padding: 10px 12px; gap: 8px; margin-bottom: 12px; border-radius: 14px; }
  .karsilama-baslik { font-size: 17px; }
  .karsilama-ozet { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .ozet-kutu { padding: 4px 10px; flex: 0 1 auto; }
}

/* Piyasa şeridi daha ince (01.10.2026): değer ve değişim aynı satırda
   (~78 px → ~56 px). Fark (+0,01) yalnız çok geniş ekranda. */
.piyasa-kutu { padding: 6px 14px 7px; }
.piyasa-deger { display: inline-block; font-size: 18px; line-height: 1.2; margin-right: 6px; }
.piyasa-kutu .piyasa-degisim { font-size: 11.5px; }
.piyasa-degisim em { display: none; }
@media (min-width: 1700px) { .piyasa-degisim em { display: inline; } }
.piyasa-kivilcim { top: 6px; height: 16px; width: 44px; }
.piyasa-etiket { padding: 6px 16px; }
.piyasa-sd, .piyasa-haberler a { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 640px) {
  .piyasa-kutular { grid-auto-columns: 128px; }
  .piyasa-deger { font-size: 15px; display: block; margin: 0; }
}

/* Duyurular başlığı daha ince */
.bilgi-alani .bilgi-bas { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 760px) {
  .karsilama-ust { display: none; }
  .karsilama-ozet { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .karsilama-ozet::-webkit-scrollbar { display: none; }
  .ozet-kutu { padding: 3px 9px; flex: 0 0 auto; }
  .ozet-sayi { font-size: 14px; }
  .ozet-etiket { font-size: 10.5px; }
}

/* BT Paneli · İK İzinli Kullanıcılar (02.10.2026) */
.ik-izin-form { margin: 0 0 calc(10px * var(--olcek)); flex-wrap: wrap; }
.ik-izin-form textarea, .ik-izin-form input[type="text"] {
  flex: 1 1 calc(220px * var(--olcek)); min-width: 0; font: inherit; font-size: var(--f-sm);
  padding: calc(6px * var(--olcek)) calc(10px * var(--olcek)); resize: vertical;
}
.ik-izin-form input[type="text"] { height: calc(34px * var(--olcek)); }
.ik-izin-tablo { margin-top: calc(14px * var(--olcek)); }
.ik-izin-tablo .ik-satir { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto; }
@media (max-width: 720px) { .ik-izin-tablo .ik-satir { grid-template-columns: 1fr; } }