/* ══════════════════════════════════════════════════════════════
 * EduLive frontend-3 — Aurora global CSS
 * Kaynak token: frontend-2/.../Themes/aurora-tokens.css (Aurora UI)
 * Yön: sade üst-bar · geniş kart-hub gezinme · glassmorphism · kusursuz animasyon
 * Karar: [[2026-07-10-frontend-3-html-mockuptan-razora-gecis]]
 * ════════════════════════════════════════════════════════════ */
:root {
  --sayfa-alt-golge: 0 -18px 44px -16px var(--scrim);
  --ust-amblem-golge: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.22));
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --green-500: #10b981;
  --green-600: #059669;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --n-100: #f1f5f9;
  --n-200: #e2e8f0;
  --n-300: #cbd5e1;
  --n-400: #94a3b8;
  --n-500: #64748b;
  --n-600: #475569;
  --n-700: #334155;
  --n-800: #1e293b;
  --n-900: #0f172a;

  --brand: #2c44a5;
  --marka-400: #3b59ce;
  --marka-500: #2c44a5;
  --marka-600: #203188;
  --marka-700: #131d52;
  --turkuaz-400: #61f5a1;
  --turkuaz-500: #07d2bf;
  --turkuaz-600: #2c44a5;
  --basari: #61f5a1;
  --basari-acik: #b8fad5;

  --basari-metin: #0b6b3f;
  --marka-degrade: linear-gradient(135deg, #2c44a5 0%, #07d2bf 52%, #61f5a1 100%);
  --marka-degrade-buton: linear-gradient(135deg, #2c44a5 0%, #3b59ce 100%);

  --turkuaz-rozet-metin: #036f6b;

  --turkuaz-degrade-ucu: #3b59ce;
  --marka-rampa-orta: #3875b7;
  --marka-rampa-uc: #207e8e;
  --marka-rampa-serit: linear-gradient(94deg, var(--marka-500) 0%, var(--marka-rampa-orta) 58%, var(--marka-rampa-uc) 100%);
  --danger: #e11d48;            /* yıkıcı eylem vurgusu (sil) — E6 2026-08-21 */

  /* Analiz modülü başarı ekseni (E6 2026-08-21) — KIRMIZI/YEŞİL DEĞİL (renk körlüğü kararı) */
  --analiz-iyi: #0891b2;        --analiz-iyi-acik: #cffafe;
  --analiz-orta: #8b5cf6;       --analiz-orta-acik: #ede9fe;
  --analiz-dikkat: #d97706;     --analiz-dikkat-acik: #fef3c7;

  /* METİN İÇİN KOYU EŞLER — WCAG AA (4.5:1).

     Yukarıdaki üç renk BAR, ROZET ve DOLGU içindir; grafik öğesi olarak
     3:1 yeterlidir. Aynı renkler METİN olarak kullanıldığında kart zemininde
     (cam %60, sayfa degradesinin en koyu durağı üstünde) 3,05–4,05:1'de
     kalıyordu (ölçüm 2026-08-23). Dolgu rengini koyulaştırmak grafiklerin
     okunurluğunu bozardı; bu yüzden AYRI metin eşleri var.
     Ölçülen: iyi 4,56 · dikkat 4,57 · accent 4,56.

     Üç eş de 2026-08-26'da yeniden ölçüldü ve KART zemini yetmiyordu:
     analiz filtre çubuğunun (`.af-cubuk`) ve rapor şeridinin (`.az-serit`)
     kendi zemini YOK — `.aas__sifirla` ve `.ab-karne` doğrudan sayfa
     degradesinin üstüne düşüyor. Orada #0977af 4,39'da kalıyordu. Ton ve
     doygunluk korunup açıklık düşürüldü (göz farkı yok: dE 0,9).
     Yeni en zayıf 4,52 (sayfanın #eaf3ff durağı) · cam %60 4,83 · beyaz 5,06.

     Aynı açık `--analiz-iyi-metin` (`.ak-yukari`) ve `--analiz-dikkat-metin`
     (`.af-uyari`, `.ak-asagi`) için de vardı: sayfa üstünde 4,26 ve 4,27.
     İkisi de aynı yolla düzeltildi (dE 2,0 ve 2,3 — göz farkı eşiğinde).
     RENK KÖRLÜĞÜ EKSENİ ÖLÇÜLDÜ, KORUNUYOR: iyi↔dikkat ayrımı normal görmede
     90,5→87,9 · protanopi 70,2→68,0 · döteranopi 85,0→83,3 · tritanopi
     151,1→147,3 dE. Dolgu renkleri (`--analiz-iyi/orta/dikkat`) DEĞİŞMEDİ.

     `--analiz-orta` için metin eşi YOK: bugün hiçbir yerde metin rengi olarak
     kullanılmıyor (ölçüldü). Kullanılacağı gün eklenir — kullanılmayan token
     ölü koddur ve "var sanılıp" yanlış yere uygulanır. Hesaplanmış değeri
     kayıt olsun diye: #8250f5 → 4,55:1. */
  --analiz-iyi-metin: #077894;
  --analiz-dikkat-metin: #a65c05;
  --accent-metin: #233a99;

  /* ROZET ZEMİNİ AYRI BİR ZEMİNDİR. Yukarıdaki metin eşleri KART/SAYFA zeminine
     göre hesaplanmıştı; rozetler ise kendi renkli zeminlerinde
     (`--analiz-*-acik`) duruyor ve o zeminde AA'yı geçmiyorlar. Ölçüm
     2026-08-23 — beş rozet çiftinin BEŞİ de kalıyordu:
       at-rozet--iyi     #077d9a / #cffafe = 4,25
       at-rozet--dikkat  #ac5f05 / #fef3c7 = 4,29
       az-rozet--iyi     #0891b2 / #cffafe = 3,29
       az-rozet--orta    #8b5cf6 / #ede9fe = 3,57
       az-rozet--dikkat  #d97706 / #fef3c7 = 2,86   ← en kötüsü
     Zemin açılamaz (rozet rengi anlam taşıyor), bu yüzden metin koyulaştırıldı.
     Ton korunur, yalnız açıklık düşürülür. Ölçülen: 4,556 · 4,567 · 4,553. */
  --analiz-iyi-rozet-metin: #077893;
  --analiz-orta-rozet-metin: #7841f5;
  --analiz-dikkat-rozet-metin: #a75b05;

  /* `--danger` (#e11d48) METİN olarak kart zemininde 4,494:1 — AA'nın (4,5)
     bir kıl altında. Dolgu/kenarlık olarak sorun yok; metin için koyu eş.
     Ölçülen: 4,851:1. Marj bilerek geniş tutuldu — 4,5'e teğet bir değer,
     paletin ileride azıcık değişmesiyle sessizce sınırın altına düşerdi. */
  --danger-metin: #d71c45;

  --danger-rozet-metin: #bb183c;
  --brand-strong: #203188;
  --accent: #3b59ce;
  --wallet: #d97706;
  --on-brand: #ffffff;
  --fg: #0f172a;
  --fg-soft: #334155;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.07);

  /* CEVAP ANAHTARI EKSENİ — optik kâğıt üzerine çizilen işaretler (FAZ 3).

     NEDEN KIRMIZI/YEŞİL, oysa `--analiz-*` ekseni bunu bilerek kullanmıyor:
     o eksen bir ÖLÇÜM eksenidir (iyi/orta/dikkat) ve orada renk körlüğü
     kararı doğrudur — "başarı" soyut bir kavramdır, rengi keyfîdir. Burası
     farklı bir soruyu yanıtlıyor: öğretmenin kâğıt üzerinde ZATEN kullandığı
     evrensel kod. Kırmızı tükenmez kalemle yanlışı işaretlemek bir tasarım
     tercihi değil, otuz yıllık bir alışkanlık.

     AYRI BİR AİLE olması ikinci bir işe yarar: `--analiz-iyi` ile
     `--cevap-dogru`nun birbirinin yerine kullanılmasını engeller. Aynı
     token'ı iki anlamda kullanmak, iki anlamın zamanla birbirine karışması
     demektir.

     RENK TEK İŞARET DEĞİLDİR — bu ailenin kullanıldığı her yerde ÜÇ AYRI
     ŞEKİL de vardır (dolu daire / çarpı+kalın halka / kesikli halka) ve
     dökümde durum KELİMEYLE yazılıdır. Renk ayırt edemeyen operatör hiçbir
     bilgi kaybetmez.

     Ölçüt 3:1 (WCAG 1.4.11 grafik öğesi) — bunlar metin DEĞİL, kontur ve
     dolgudur. Zemin taranmış kâğıttır (beyaza yakın) ve uygulama zemini de
     ölçülür; ikisinin KÖTÜSÜ tutulur. `AnalizRenkKontrastiTests` kilitliyor. */
  --cevap-dogru: #15803d;
  --cevap-yanlis: #dc2626;
  --cevap-anahtar: #1d4ed8;

  /* Modal/dialog arkaplan karartması — tek kaynak (ConfirmDialog, SecretRevealPanel scrim'i). */
  --scrim: rgba(15, 23, 42, 0.35);

  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.85);
  --glass-hover: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
  --panel-golge: 0 24px 64px rgba(15, 23, 42, 0.18);
  --panel-golge-odak: 0 24px 64px rgba(15, 23, 42, 0.22);

  --page-bg: linear-gradient(135deg, #f7fbff 0%, #eaf3ff 46%, #f0fdf4 100%);
  --radius-xl: 26px;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  --font-display: "Exo 2", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --icerik-yan: clamp(24px, 4.5vw, 72px);
  --icerik-ic: 8px;
  --ust-h-dar: 60px;
  --topbar-h: var(--ust-h-dar);
  --ust-h-genis: 56px;
  --ust-kobalt-600: #203188;
  --ust-kobalt-500: #364694;
  --ust-kobalt-450: #44529b;
  --ust-kobalt-400: #515ea2;
  --ust-kobalt-soluk: #c1c5de;
  --ust-kobalt-soluk-uzeri: #e0e2ee;
  --ust-zemin: var(--ust-kobalt-600);
  --ust-golge: 0 12px 34px rgba(32, 49, 136, 0.26);
  --ust-cam: var(--ust-kobalt-500);
  --ust-cam-uzeri: var(--ust-kobalt-400);
  --ust-cam-ikon: var(--ust-kobalt-450);
  --ust-cam-ikon-uzeri: var(--ust-kobalt-400);
  --ust-cizgi: var(--ust-kobalt-400);
  --ust-cizgi-uzeri: var(--ust-kobalt-400);
  --ust-ayrac: var(--ust-kobalt-450);
  --ust-ayrac-uzeri: var(--ust-kobalt-400);
  --ust-metin: var(--on-brand);
  --ust-metin-soluk: var(--ust-kobalt-soluk);
  --ust-metin-soluk-uzeri: var(--ust-kobalt-soluk-uzeri);
  --ust-metin-ok: var(--ust-kobalt-soluk);
  --ust-dolu: #ffffff;
  --ust-dolu-golge: 0 6px 18px rgba(32, 49, 136, 0.3);
  --ust-nokta-halka: var(--ust-kobalt-600);

  --yuzey: #ffffff;
  --yuzey-alt: #fbfcfe;
  --yuzey-cizgi: #e4e9f2;
  --yuzey-cizgi-koyu: #cfd8e6;

  /* YENİ DİL renk rolleri (docs/mobil/YENI-DIL.md §2.1) — masaüstü vitrinlerinin
     yerel eşleri (ör. analiz-vitrin `--anv-hat`) bunlara bağlanır. */
  --hat-kart: #dbe6f5;
  --hat-girdi: #cfdff7;
  /* Tablo satır ayracı / hücre içi ince hat. analiz-vitrin `--anv-hat-ince` ile aynı
     değer; oradaki yerel tanım korunur, bu token vitrin dışı sayfalar içindir. */
  --hat-ince: rgba(12, 58, 116, 0.08);
  --metin-murekkep: #0b1a2b;
  --metin-ikincil: #3f5266;
  --metin-ipucu: #8496ad;

  /* Şekil imzası: kesik sol üst köşe (§2.2). */
  --kose-dugme: 3px 10px 10px 10px;
  --kose-kart: 3px 14px 14px 14px;
  --kose-bolum: 3px 3px 22px 22px;
  --kose-sayfa: 22px 22px 0 0;
  --foto-perde: linear-gradient(
    to bottom,
    rgba(8, 22, 52, 0.56) 0px,
    rgba(8, 22, 52, 0.5) 100px,
    rgba(8, 22, 52, 0.1) 210px,
    rgba(8, 22, 52, 0.06) 40%,
    rgba(8, 22, 52, 0.3) 58%,
    rgba(8, 22, 52, 0.78) 100%
  );
  --foto-zemin: linear-gradient(135deg, #e8f1ff 0%, #dbe9ff 100%);

  --giris-cam-zemin: linear-gradient(
    150deg,
    #e8f2ff 0%,
    #dcedff 38%,
    #e4fbe6 100%
  );
  --giris-cam-kart: rgba(255, 255, 255, 0.8);
  --giris-cam-kart-cizgi: rgba(255, 255, 255, 0.9);
  --giris-cam-kart-golge: 0 20px 54px rgba(32, 49, 136, 0.14);
  --giris-cam-alan: rgba(255, 255, 255, 0.86);
  --giris-cam-alan-cizgi: rgba(255, 255, 255, 0.95);
  --giris-cam-alan-ic: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  --giris-cam-pil: rgba(255, 255, 255, 0.72);
  --giris-cam-pil-cizgi: rgba(255, 255, 255, 0.9);
  --giris-cam-amblem: rgba(255, 255, 255, 0.9);
  --giris-cam-amblem-golge: 0 12px 30px rgba(32, 49, 136, 0.16);
  --giris-blob-marka: rgba(44, 68, 165, 0.34);
  --giris-blob-turkuaz: rgba(7, 210, 191, 0.32);
  --giris-blob-yesil: rgba(97, 245, 161, 0.32);

  --hub-ton-yonetim: #2483f4;
  --hub-ton-akademik: #0a5ff2;
  --hub-ton-mufredat: #2043c4;
  --hub-ton-analiz: #262c87;
  --hub-ton-planlama: #0198c9;
  --hub-ton-icerik: #017e9e;
  --hub-ton-medya: #057964;
  --hub-ton-sosyal: #005649;
  --hub-ton-yayinci: #00a29c;
  --hub-ton-gorev: #00a17e;
  --hub-ton-finans: #4aab65;
  --hub-ton-ogrenci: #76bd49;
  --hub-ton-hesap: #0096a9;

  --hub-ton-guvenlik: #0a5ff2;
  --hub-ton-yetkidevri: #0b7abc;
  --hub-ton-bildirim: #0e8688;

  --hub-bant-koyu: #062f7a;
  --hub-bant-koyu-hover: #04246b;
  --hub-bant-vurgu: #0cae62;
  --hub-bant-vurgu-derin: #005f4a;

  --hub-ton-ilerleme: #0a5ff2;
  --hub-ton-gorevlerim: #0d54cc;
  --hub-ton-sinav: #0a6ec4;
  --hub-ton-sonuc: #0b7fb8;
  --hub-ton-transkript: #0d7fa5;
  --hub-ton-seri: #0e8494;
  --hub-ton-oneri: #0f8a76;
  --hub-ton-neden: #128a5c;
  --hub-ton-veri: #16904a;

  --hub-ton-kullanici: #0a5ff2;
  --hub-ton-rol: #0d55d0;
  --hub-ton-orgbirim: #0b69c6;
  --hub-ton-kurum: #0b7abc;
  --hub-ton-sso: #0c7fad;
  --hub-ton-api: #0e829c;
  --hub-ton-abonelik: #0e8688;
  --hub-ton-kisalink: #108a6e;
  --hub-ton-kartvizit: #138b58;
  --hub-ton-formlar: #158d50;
  --hub-ton-soruinceleme: #168f49;
  --hub-ton-denetim: #1a8a3c;

  --hub-ton: var(--brand);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--page-bg);
  background-attachment: fixed;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
.disp {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin: 0;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Web genelinde dış odak halkası kullanılmaz (23.09.2026 kullanıcı tercihi).
   Sayfa/scoped stillerini tek merkezden bastırmak için !important gerekir.
   Odak davranışı, normal kenarlıklar ve hata renkleri korunur. */
body.edulive-web :is(:focus, :focus-visible, :focus-within),
body.edulive-web .app-dt__panel:focus-visible .app-dt__gun.is-odak,
body.edulive-web .pbm__input:focus-visible + .pbm__text {
  outline: none !important;
}
body.edulive-web :is(:focus, :focus-visible),
body.edulive-web :is(.search, .baslat__arama, .grid-search, .aa-kompozer,
  .app-input, .app-select__control):focus-within,
body.edulive-web .au-check:focus-visible::before {
  box-shadow: none !important;
}
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
  outline: none;
}
#blazor-error-ui {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: none;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
  font-size: 13px;
}

/* Ambient bloblar */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.b1 {
  width: 560px;
  height: 560px;
  top: -180px;
  right: -120px;
  background: radial-gradient(
    circle,
    rgba(44, 68, 165, 0.35),
    transparent 70%
  );
  animation: drift1 24s var(--ease-smooth) infinite alternate;
}
.b2 {
  width: 480px;
  height: 480px;
  bottom: -200px;
  left: -140px;
  background: radial-gradient(circle, rgba(7, 210, 191, 0.3), transparent 70%);
  animation: drift2 30s var(--ease-smooth) infinite alternate;
}
.b3 {
  width: 360px;
  height: 360px;
  top: 40%;
  left: 55%;
  background: radial-gradient(
    circle,
    rgba(236, 72, 153, 0.16),
    transparent 70%
  );
  animation: drift1 34s var(--ease-smooth) infinite alternate-reverse;
}
@keyframes drift1 {
  to {
    transform: translate(50px, 60px) scale(1.15);
  }
}
@keyframes drift2 {
  to {
    transform: translate(-40px, -50px) scale(1.12);
  }
}

/* ─── Üst bar ─── */
.topbar {
  --ust-yan-hiza: max(calc(var(--icerik-yan, 24px) + var(--icerik-ic, 8px)), calc((100% - var(--ust-hiza-icerik, 1600px)) / 2 + var(--ust-hiza-ic, var(--icerik-ic, 8px))));
  position: sticky;
  top: 0;
  z-index: 50;
  --ust-aralik: 18px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--ust-aralik);
  padding: 0 var(--ust-yan-dolgu, var(--ust-yan-hiza));
  background: var(--glass-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line);
}

/* Aurora ışığı şeridi — 7. tur 5. varyantı. Doku ::before'da durur, çünkü
   barın kendisine overflow/mask verilirse içindeki mutlak konumlu açılırlar
   kırpılır. */
@media (min-width: 1280px),
       (min-width: 1024px) and (max-width: 1279px) and (hover: hover),
       (min-width: 1024px) and (max-width: 1279px) and (pointer: fine) {
  /* Yükseklik `.topbar`a değil değişkene yazılır: analiz perdesi, katman
     şeridi ve asistan yüksekliği `--topbar-h`ye bakıyor; doğrudan yazılsaydı
     üçü de 8 px kayardı. */
  :root {
    --topbar-h: var(--ust-h-genis);
    --ust-yan-masaustu: 24px;
  }
  /* Öğrenci düzeninin kendi barı degradeye katılmıyor; değişken yükselince
     onunla birlikte büyümemesi için kendi yüksekliğine sabitlenir. */
  body .student-topbar {
    height: var(--ust-h-dar);
  }
  .topbar {
    --ust-yan-dolgu: var(--ust-yan-masaustu, 24px);
    background: var(--ust-zemin);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: var(--ust-golge);
  }
  .topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
  }
  .topbar > * {
    position: relative;
    z-index: 2;
  }
  .topbar .pos,
  .topbar .ou-switch,
  .topbar .kurum-sec,
  .topbar .nbell {
    z-index: 60;
  }
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
}

.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  background: transparent;
  filter: drop-shadow(0 6px 12px rgba(44, 68, 165, 0.35));
}
.brand-logo__amblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(44, 68, 165, 0.35));
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--marka-500), var(--accent-metin));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 640px) {
  .brand-word {
    display: none;
  }
}

.search {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 46px;
  padding: 0 18px;
  background: var(--n-100);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--muted);
  transition:
    background 0.25s var(--ease-smooth),
    border-color 0.25s,
    box-shadow 0.25s,
    max-width 0.35s var(--ease-smooth);
}
.search:focus-within {
  background: #fff;
  border-color: var(--marka-400);
  box-shadow: 0 0 0 5px rgba(44, 68, 165, 0.11);
  max-width: 640px;
}
.search svg {
  flex-shrink: 0;
  transition: color 0.2s;
}
.search:focus-within svg {
  color: var(--brand);
}
.search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: 14.5px;
  color: var(--fg);
}
.search kbd {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--n-400);
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 6px;
  padding: 2px 7px;
}
@media (max-width: 640px) {
  .search kbd {
    display: none;
  }
}

.top-right {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 13px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.14),
    rgba(217, 119, 6, 0.09)
  );
  border: 1px solid rgba(217, 119, 6, 0.26);
  color: var(--amber-600);
  font-weight: 700;
  font-size: 13.5px;
  transition:
    transform 0.22s var(--ease-bounce),
    box-shadow 0.22s;
}
.wallet:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -7px rgba(217, 119, 6, 0.4);
}
.wallet small {
  font-weight: 500;
  opacity: 0.78;
}
@media (max-width: 520px) {
  .wallet small,
  .wallet .wnum {
    display: none;
  }
  .wallet {
    padding: 0 13px;
  }
}
/* Üst-bar kurum değiştirici — aktif kurum adı + hızlı erişim (avatar menüsünden terfi). */
.topbar-tenant {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  max-width: 240px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  color: var(--fg-soft);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.22s var(--ease-bounce);
}
.topbar-tenant:hover {
  background: var(--glass-hover);
  border-color: var(--marka-400);
  color: var(--fg);
  transform: translateY(-1px);
}
.topbar-tenant:focus-visible {
  outline: 2px solid var(--marka-400);
  outline-offset: 2px;
}
.topbar-tenant__name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-tenant__label {
  font-weight: 500;
  opacity: 0.7;
  font-size: 12px;
}
.topbar-tenant__ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.topbar-tenant__yazi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.topbar-tenant__ok {
  flex: 0 0 auto;
  opacity: 0.7;
}
/* Degrade şeridin dışındaki genişliklerde hap tek satır kalır: etiket satırı
   düşer, ikon + ad + ok sırası bugünkü hâliyle sürer. */
@media (max-width: 1023px),
       (min-width: 1024px) and (max-width: 1279px) and (hover: none) and (pointer: coarse) {
  .topbar-tenant__label {
    display: none;
  }
}
@media (max-width: 640px) {
  .topbar-tenant__name,
  .topbar-tenant__label {
    display: none;
  }
  .topbar-tenant__yazi,
  .topbar-tenant__ok {
    display: none;
  }
  .topbar-tenant {
    padding: 0 12px;
  }
}

/* 260 px ayraçlı seçici — 7. tur 5. varyantı. Masaüstünde (degrade şeritle
   aynı sorgu) etiket satırı + değer satırı + sağ kenara itilmiş ok. Dar
   ekranlarda cihaz.css'in ikon-hap düzeni geçerli kalır. */
@media (min-width: 1280px),
       (min-width: 1024px) and (max-width: 1279px) and (hover: hover),
       (min-width: 1024px) and (max-width: 1279px) and (pointer: fine) {
  .topbar .topbar-tenant {
    width: auto;
    min-width: 224px;
    max-width: 340px;
    height: 40px;
    gap: 10px;
    padding: 0 13px 0 10px;
    border-radius: 12px;
    background: var(--ust-cam);
    border-color: var(--ust-cizgi);
    color: var(--ust-metin);
    box-shadow: none;
  }
  .topbar .topbar-tenant:hover {
    background: var(--ust-cam-uzeri);
    border-color: var(--ust-cizgi-uzeri);
    color: var(--ust-metin);
    box-shadow: none;
  }
  .topbar .topbar-tenant:focus-visible {
    outline-color: var(--ust-dolu);
  }
  .topbar .topbar-tenant__ikon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ust-cam-ikon);
    color: var(--ust-metin);
  }
  .topbar .topbar-tenant__yazi {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-left: 10px;
    border-left: 1px solid var(--ust-ayrac);
    text-align: left;
  }
  .topbar .topbar-tenant__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 1;
    color: var(--ust-metin-soluk);
  }
  .topbar .topbar-tenant__name {
    max-width: none;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    color: var(--ust-metin);
  }
  .topbar .topbar-tenant__ok {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--ust-metin-ok);
  }
  .topbar .topbar-tenant:hover .topbar-tenant__ikon {
    background: var(--ust-cam-ikon-uzeri);
  }
  .topbar .topbar-tenant:hover .topbar-tenant__yazi {
    border-left-color: var(--ust-ayrac-uzeri);
  }
  .topbar .topbar-tenant:hover .topbar-tenant__label {
    color: var(--ust-metin-soluk-uzeri);
  }
}

/* Degrade şerit üstündeki diğer kontroller: cam/dolu karşıtlığı. */
@media (min-width: 1280px),
       (min-width: 1024px) and (max-width: 1279px) and (hover: hover),
       (min-width: 1024px) and (max-width: 1279px) and (pointer: fine) {
  .topbar .brand {
    width: 36px;
    height: 36px;
  }
  .topbar .brand-logo__amblem {
    filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.22));
  }
  .topbar .brand-word {
    display: none;
  }
  .topbar .nbell .nbell__btn {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ust-cam);
    border-color: var(--ust-cizgi);
    color: var(--ust-metin);
  }
  .topbar .nbell .nbell__btn:hover {
    background: var(--ust-cam-uzeri);
    color: var(--ust-metin);
  }
  .topbar .nbell .nbell__btn svg {
    width: 18px;
    height: 18px;
  }
  .topbar .nbell .nbell__dot {
    background: var(--basari);
    box-shadow: 0 0 0 2px var(--ust-nokta-halka);
  }
  .topbar .avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid var(--ust-cizgi);
    background: var(--ust-cam);
    color: var(--ust-metin);
  }
  .topbar .avatar:hover {
    border-color: var(--ust-cizgi-uzeri);
    background: var(--ust-cam-uzeri);
    color: var(--ust-metin);
    box-shadow: none;
  }
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--n-600);
  position: relative;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.icon-btn:hover {
  background: var(--n-100);
  color: var(--fg);
  transform: translateY(-2px);
}
.icon-btn .dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-500);
  border: 2px solid #fff;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--marka-500), var(--turkuaz-degrade-ucu));
  cursor: pointer;
  transition:
    transform 0.22s var(--ease-bounce),
    box-shadow 0.22s;
}
.avatar:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -7px rgba(44, 68, 165, 0.5);
}
.pos {
  position: relative;
}

/* Üst bar açılırlarının barın alt çizgisinden başlaması için ortak kayma.
   Sarmalayıcı buton kadar yüksektir; barın dibine inmek için artan boşluğun
   yarısı kadar itilir. Buton yüksekliği bantlara göre değiştiğinden değer
   yüksekliğin yazıldığı yerde ezilir. */
.topbar .pos {
  --acilir-kayma: calc((var(--topbar-h) - 42px) / 2);
}
.topbar .nbell {
  --acilir-kayma: calc((var(--topbar-h) - 38px) / 2);
}
.topbar .kurum-sec,
.topbar .ou-switch {
  --acilir-kayma: calc((var(--topbar-h) - 42px) / 2);
}

@media (min-width: 1280px),
       (min-width: 1024px) and (max-width: 1279px) and (hover: hover),
       (min-width: 1024px) and (max-width: 1279px) and (pointer: fine) {
  .topbar .pos,
  .topbar .nbell {
    --acilir-kayma: calc((var(--topbar-h) - 36px) / 2);
  }
  .topbar .kurum-sec,
  .topbar .ou-switch {
    --acilir-kayma: calc((var(--topbar-h) - 40px) / 2);
  }
}
.menu {
  position: absolute;
  top: calc(100% + var(--acilir-kayma, 12px));
  right: 0;
  min-width: 230px;
  background: var(--glass-strong);
  backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px -14px rgba(32, 49, 136, 0.28);
  padding: 8px;
  z-index: 70;
  transform-origin: top right;
  animation: menuIn 0.2s var(--ease-bounce);
  max-height: var(--acilir-en-cok-yukseklik, none);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu.acilir--yukari {
  top: auto;
  bottom: calc(100% + var(--acilir-kayma, 12px));
  transform-origin: bottom right;
}
@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.topbar .ustbar-sheet-kapat {
  display: none;
}

.menu .mt {
  padding: 9px 12px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-400);
}
.menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--fg-soft);
  text-align: left;
  transition: 0.15s;
}
.menu button:hover {
  background: var(--n-100);
  color: var(--fg);
}
.menu hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}
.notif {
  display: flex;
  gap: 11px;
  padding: 10px 10px;
  border-radius: 11px;
  transition: 0.16s;
  text-align: left;
  width: 100%;
}
.notif:hover {
  background: var(--n-100);
}
.notif-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.notif-ico.g {
  background: rgba(16, 185, 129, 0.13);
  color: var(--green-600);
}
.notif-ico.b {
  background: rgba(44, 68, 165, 0.13);
  color: var(--brand);
}
.notif-ico.a {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-600);
}
.notif p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-soft);
}
.notif time {
  font-size: 11px;
  color: var(--n-400);
}
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
}

/* ─── İçerik (GENİŞ) ─── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 56px) var(--icerik-yan) 80px;
}
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hero .eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.hero h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero h1 .grad {
  background: linear-gradient(
    120deg,
    var(--marka-600),
    var(--marka-500) 55%,
    var(--turkuaz-degrade-ucu)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 16px;
  max-width: 460px;
}
.who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--fg-soft);
}
.chip .m {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  background: #4a90a4;
}
.chip.role {
  background: rgba(44, 68, 165, 0.1);
  border-color: transparent;
  color: var(--brand-strong);
}
.chip.role::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.sec-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 4px 18px;
}
.sec-label h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-soft);
}
.sec-label span {
  font-size: 13px;
  color: var(--n-400);
}

/* Kart grid */
.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(clamp(260px, 28vw, 320px), 1fr)
  );
  gap: clamp(16px, 1.8vw, 22px);
}
.card {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  isolation: isolate;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    transform 0.4s var(--ease-bounce),
    box-shadow 0.4s var(--ease-smooth),
    background 0.4s;
  will-change: transform;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.25)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.card .halo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    320px circle at 50% 0%,
    var(--c-glow),
    transparent 62%
  );
}
.card:hover {
  transform: translateY(-9px);
  background: var(--glass-hover);
}
.card:hover .halo {
  opacity: 1;
}
.card-ico {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: var(--glass-strong);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
  margin-bottom: 20px;
  color: var(--c-ico);
  transition:
    transform 0.4s var(--ease-bounce),
    box-shadow 0.4s;
}
.card:hover .card-ico {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 12px 26px -6px var(--c-glow);
}
.card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
.card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  min-height: 40px;
}
.card .foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card .badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--n-100);
  color: var(--n-600);
}
.card .go {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--c-ico);
  background: var(--glass-strong);
  transition:
    transform 0.3s var(--ease-bounce),
    background 0.3s;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}
.card:hover .go {
  transform: translateX(4px);
  background: #fff;
}
.m-q {
  --c-ico: var(--marka-600);
  --c-glow: rgba(44, 68, 165, 0.28);
}
.m-c {
  --c-ico: var(--turkuaz-rozet-metin);
  --c-glow: rgba(7, 210, 191, 0.26);
}
.m-p {
  --c-ico: var(--green-600);
  --c-glow: rgba(16, 185, 129, 0.26);
}
.m-a {
  --c-ico: var(--blue-600);
  --c-glow: rgba(59, 130, 246, 0.26);
}
.m-s {
  --c-ico: var(--orange-600);
  --c-glow: rgba(249, 115, 22, 0.24);
}
.m-m {
  --c-ico: var(--pink-600);
  --c-glow: rgba(236, 72, 153, 0.26);
}
.m-g {
  --c-ico: var(--purple-600);
  --c-glow: rgba(139, 92, 246, 0.28);
}
.m-t {
  --c-ico: var(--amber-600);
  --c-glow: rgba(245, 158, 11, 0.26);
}

/* Son etkinlik */
.recent {
  margin-top: clamp(36px, 5vw, 52px);
}
.rgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.rcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  width: 100%;
  text-align: left;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    transform 0.32s var(--ease-bounce),
    box-shadow 0.32s;
  cursor: pointer;
}
.rcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px -14px rgba(32, 49, 136, 0.22);
}
.rcard .ri {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.rcard b {
  font-size: 13.5px;
  font-weight: 600;
  display: block;
}
.rcard .rs {
  font-size: 12px;
  color: var(--muted);
}
.rcard .st {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.st-ok {
  background: rgba(16, 185, 129, 0.13);
  color: var(--green-600);
}
.st-wait {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-600);
}
.st-live {
  background: rgba(44, 68, 165, 0.13);
  color: var(--brand-strong);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.st-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* stagger giriş */
.rise {
  opacity: 0;
  transform: translateY(20px);
  animation: rise 0.6s var(--ease-smooth) forwards;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise {
    opacity: 1;
    transform: none;
  }
  .card:hover {
    transform: none;
  }
  .card:hover .card-ico {
    transform: none;
  }
}