/* ORBİ — telefon ekranı (v9 · Obsidian Atölye)
 * Tek kaynak: TASARIM.md — §3.1 ortak tokenlar (masaüstüyle birebir), §3.2 telefon eki, §4 bileşenler [T], §7 telefon.
 * Kural: bileşen CSS'inde sabit hex/rgba yazılmaz; yalnız token. Sınıf adlarını app.js ve ekip.js üretir — yeniden adlandırmayın.
 */
/* <TOKENLAR> ORBİ v9 · Obsidian Atölye — 1–13. bölümler masaüstüyle (arayuz_web/stil.css) BİREBİR aynı (14.10 eşitlendi);
   14. bölüm (geçiş takma adları) yalnız telefonda.
   Kural: bileşen CSS'inde sabit hex/rgba yazılmaz; yalnız bu değişkenler kullanılır. */
:root{
  color-scheme: dark;

  /* 1 · YÜZEY KATMANLARI — soğuk obsidyen; ayrım kenar çizgisiyle değil ton farkıyla */
  --zemin:   #07090c;   /* sayfa */
  --yaprak:  #0f1319;   /* ana "kâğıt": Gündem, pencere gövdesi, 3B kabı, telefon alt sayfası */
  --kat:     #171c24;   /* pencere, popover, komut kutusu, toast, palet, diyalog */
  --kat-2:   #202631;   /* kat üstünde girdi, seçili segment, ipucu, "Siz" balonu, ikincil düğme */
  --kat-3:   #2a313e;   /* basılı / sürüklenen / kaydırma tutamacı */
  --perde:   rgba(3,5,8,.68);            /* modal arka planı; yalnız burada blur(8px) */
  --hale:    radial-gradient(900px 640px at 12% 42%, rgba(69,216,255,.05), transparent 64%); /* TEK hale: ORBİ kolonunun arkası */
  --ust-isik: inset 0 1px 0 rgba(255,255,255,.04);   /* yüzen katmanlarda izinli tek süs */
  --vurgu-hover:  rgba(255,255,255,.045);
  --vurgu-secili: rgba(255,255,255,.08);

  /* 2 · ÇİZGİLER (hairline) */
  --cizgi-ince:  rgba(220,230,245,.07);  /* satır/grup ayırıcı, bölüm etiketi çizgisi */
  --cizgi:       rgba(220,230,245,.11);  /* künye alt çizgisi, kolon ve rakam ayırıcı, pencere kenarı */
  --cizgi-guclu: rgba(220,230,245,.18);  /* boş dilim, boş halka, hover'da girdi kenarı */
  --hud-kose:    rgba(69,216,255,.34);   /* YALNIZ .kose (ORBİ kolonu + ULTRA) */
  --odak:        #45d8ff;
  --odak-hale:   0 0 0 3px rgba(69,216,255,.16);

  /* 3 · METİN (zemin #07090c üzerinde kontrast) */
  --m-1: #eef2f7;   /* ≈17:1  başlık, satır metni */
  --m-2: #b3bccb;   /* ≈10:1  ikincil metin, açıklama (kat-2 üstünde ≈8:1) */
  --m-3: #8e99ab;   /* ≈6.9:1 etiket, meta, zaman, placeholder (kat-2 ≈5.3:1, kat-3 ≈4.5:1) */
  --m-4: #5c6778;   /* ≈3.5:1 YALNIZ devre dışı, süs, pasif ikon — okunacak metinde (sayı dahil) KULLANILMAZ */
  --m-ters: #06090d;/* dolu düğme ve rozet üstündeki yazı */
  --saf-beyaz: #fff;  /* YALNIZ gömülü içerik zemini (QR, iframe) ve birincil düğme hover'ı: tema değişse de beyaz kalır */
  --saf-siyah: #000;  /* YALNIZ medya (görsel/video) arka zemini ve maske rengi (maske yalnız saydamlığı okur) */

  /* 4 · VURGU (ölçülü) */
  --canli:   #45d8ff;  --canli-2: #a6eeff;  --canli-zemin: rgba(69,216,255,.10);  /* şu an oluyor */
  --altin:   #d8b46e;  --altin-2: #f1dcaa;  --altin-zemin: rgba(216,180,110,.10); /* marka tarih, onay, Şef, incelenecek */

  /* 5 · DURUM (doygun; yalnız durum anlatır) */
  --tamam:  #37dfa0;  --tamam-zemin:  rgba(55,223,160,.10);
  --uyari:  #ff9d5c;  --uyari-zemin:  rgba(255,157,92,.10);   /* öncelikli + dikkat (eski sarı) */
  --kritik: #ff5b6e;  --kritik-zemin: rgba(255,91,110,.10);   /* acil + hata + tehlike */
  --notr:   #8a95a6;                                          /* normal öncelik halkası */

  /* 6 · ROL PALETİ (mat, eşit parlaklık; anahtarlar ekip.py ROLLER id'leri) — yalnız avatar halkası, monogram, 6 px nokta */
  --rol-sef: var(--altin);  --rol-analist: #86b4d0;  --rol-reklamci: #97a3dd;  --rol-icerik: #d697b8;
  --rol-metin: #d8a083;     --rol-tasarim: #b59ddb;  --rol-video: #d99393;     --rol-arastirmaci: #a6c784;
  --rol-yetenek: #c4c27c;   --rol-musteri: #7fc6c2;  --rol-seo: #8ccaa3;       --rol-denetci: #a3abb6;
  --rol-kreatif: #cf8fd8;   /* Kreatif Direktör: orkide (Şef'in altınından ayrı; tasarım lavantası ile içerik pembesi arası) */
  --rol-kullanici: var(--m-1);  --rol-sistem: var(--m-3);

  /* 7 · YAZI */
  --yazi:   "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --baslik: "Inter", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --mono:   "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --t-kicker:  11px;    /* mono 500 BÜYÜK HARF .1em: bölüm etiketi, tarih satırı, rakam etiketi (v9: en küçük yazı 11 px) */
  --t-meta:    12px;    /* zaman/sayı (mono, tnum), düğme, çip, ikincil bilgi */
  --t-govde:   13.5px;  /* satır başlığı, gövde */
  --t-okuma:   15px;    /* sohbet, md önizleme, açılan açıklama, diyalog metni */
  --t-baslik:  18px;    /* pencere ve diyalog başlığı (400) */
  --t-pencere: 24px;    /* telefon kapak manşeti, ULTRA panel başlığı (300) */
  --t-manset:  32px;    /* künye manşeti "Autopol" (300) */
  --t-rakam:   44px;    /* künye rakamları (300, tnum) */
  --t-sunum:   64px;    /* yalnız ULTRA */
  --a-ince: 300; --a-normal: 400; --a-orta: 500;          /* 200/600/700 kullanılmaz (v9: 200 ClearType'ta siliktir) */
  --s-sik: -.02em; --s-rakam: -.03em; --s-kicker: .1em; --s-marka: .28em;  /* --s-marka yalnız "ORBİ" kelime markası */
  --sy-rakam: 1; --sy-baslik: 1.2; --sy-ui: 1.45; --sy-okuma: 1.6;

  /* 8 · BOŞLUK (4 tabanlı; başka değer yok) */
  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 24px; --b-6: 32px; --b-7: 48px;

  /* 9 · YARIÇAP */
  --r-0: 4px;      /* kbd, dilim */
  --r-1: 6px;      /* satır hover, çip, 24 px ikon düğme, menü öğesi */
  --r-2: 10px;     /* düğme, girdi, segment kabı, toast, popover, kamera, önizleme */
  --r-3: 16px;     /* yaprak, pencere, diyalog, palet, 3B sahne, telefon alt sayfası */
  --r-tam: 999px;  /* avatar, nokta, halka, anahtar, rozet */

  /* 10 · GÖLGE (yalnız yüzen katmanlarda; v9: yüzen katmanın 1 px kenarı gölgenin içinde) */
  --g-1: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.05), 0 12px 32px -16px rgba(0,0,0,.8);   /* popover, toast, ipucu */
  --g-2: 0 0 0 1px rgba(255,255,255,.06), 0 32px 80px -28px rgba(0,0,0,.85);    /* pencere, diyalog, palet */

  /* 11 · HAREKET (v9: tek eğri — pencere, menü, toast, satır açılımı aynı yavaşlayan eğriyle) */
  --egri: cubic-bezier(.16,1,.3,1);
  --egri-cik: cubic-bezier(.4,0,1,1);
  --h-1: 120ms;   /* hover, renk */
  --h-2: 180ms;   /* popover, satır açılımı, toast */
  --h-3: 260ms;   /* pencere giriş/çıkış, küre küçülme */
  --h-don: 1.4s;  /* "çalışıyor" yayı (doğrusal) */

  /* 12 · ÖLÇÜLER VE YERLEŞİM */
  --ust-h: 52px;
  --kenar-pay: clamp(16px, 1.8vw, 32px);
  --sayfa-max: 1760px;
  --kolon-orbi: clamp(264px, 20vw, 320px);
  --kolon-ekip: clamp(248px, 19vw, 312px);
  --kolon-ara: 32px;
  --kure-boy: clamp(148px, 24vh, 220px);
  --satir-h: 36px; --grup-h: 28px; --daha-h: 32px; --kadro-h: 32px;
  --dugme-h: 32px; --dugme-k: 24px;
  --ikon-d: 32px;  --ikon-k: 24px; --ikon: 16px;
  --girdi-h: 44px; --form-h: 36px;
  --halka: 14px;   --nokta: 6px;
  --pencere-ust: max(48px, 6vh);     /* pencereler toast şeridinin altından başlar */
  --pencere-dar: 440px; --pencere-orta: 960px; --pencere-genis: min(1560px, 96vw); --cekmece: 480px;
  /* Toast üst bandın ortasında; sağ blok (Sistem · saat · 6 ikon) en çok ≈401 px ("Claude kopuk" metniyle; "Veri 5/6"
     ile ≈366) + 9 px pay = 410. Toast iki yana eşit açıldığından blok iki kez düşülür: 1120/1280/1366 px'te Sistem
     düğmesinin üstüne binmez (en kötü durumda 9 px boşluk; başsız Chrome'da ölçüldü 14.10). */
  --palet-w: 640px; --toast-max: min(560px, 40vw, calc(100vw - 2 * (var(--kenar-pay) + 410px))); --ipucu-max: 320px;

  /* 13 · KATMAN SIRASI (mevcut değerler) */
  --z-katman: 20; --z-ultra: 30; --z-diyalog: 35; --z-bildirim: 40; --z-palet: 45; --z-acilis: 50; --z-ipucu: 60;

  /* 14 · GEÇİŞ TAKMA ADLARI — eski CSS ve JS'teki var(--x) bozulmasın; YENİ KODDA KULLANILMAZ */
  --bg: var(--zemin); --bg2: var(--yaprak); --cam: var(--yaprak); --cam-dolu: var(--kat); --panel: var(--yaprak);
  --kart: rgba(255,255,255,.025); --kart-hover: var(--vurgu-hover);
  --metin: var(--m-1); --soluk: var(--m-2); --silik: var(--m-3); --titan: var(--m-2);
  --mavi: var(--canli); --mavi2: var(--canli-2); --altin2: var(--altin-2); --marka: #003463; /* marka laciverti: UI'da kullanılmaz */
  --yesil: var(--tamam); --sari: var(--uyari); --turuncu: var(--uyari); --kirmizi: var(--kritik);
  --pembe: var(--rol-icerik); --golge: var(--g-2); --yaricap: var(--r-3);
  --kenar: linear-gradient(transparent, transparent);  /* ışıyan cam kenarlarını tek hamlede söndürür */
  --kenar-ozel: linear-gradient(transparent, transparent);
  --kose: transparent;                                  /* eski köşe braketlerini söndürür (yeni imza: --hud-kose) */
}
@media (max-width: 1320px){ :root{ --kolon-ekip: 216px; --kolon-ara: 24px; } }
@media (max-height: 760px){ :root{ --ust-h: 48px; --t-manset: 26px; --t-rakam: 36px; --kure-boy: 148px; } }
@media (prefers-reduced-motion: reduce){ :root{ --h-1: 0ms; --h-2: 0ms; --h-3: 0ms; --h-don: 0s; } }
/* </TOKENLAR> */

/* ── §3.2 Telefon eki ─────────────────────────────────────────────── */
:root{
  --t-govde: 15px; --t-meta: 12.5px; --t-rakam: 30px; --t-manset: 24px;
  --satir-h: 44px; --grup-h: 32px; --daha-h: 40px; --kadro-h: 44px;
  --dugme-h: 40px; --dugme-k: 32px; --ikon-d: 40px; --ikon-k: 32px; --ikon: 20px;
  --girdi-h: 48px; --form-h: 44px; --halka: 16px;
  --ust-h: 48px; --nav-h: 56px; --yazma-h: 56px; --sayfa-bas-h: 52px;
  --kenar-pay: 16px; --kure-boy: min(52vw, 220px); --kure-sohbet: 112px;
  --guvenli-alt: env(safe-area-inset-bottom, 0px);
  --toast-max: min(560px, calc(100vw - 32px));   /* blokta masaüstü değeri var; telefonda bu geçerli */
}
@media (max-width: 360px){ :root{ --t-rakam: 26px; --kure-boy: 168px; } }
input, textarea, select{ font-size: max(16px, 1em); }   /* iOS odak yakınlaştırmasını engeller */

/* ── §3.3 Temel kurallar ──────────────────────────────────────────── */
html{ background: var(--zemin); }
body{ background: var(--hale), var(--zemin); color: var(--m-1);
      font: var(--a-normal) var(--t-govde)/var(--sy-ui) var(--yazi);
      font-feature-settings: "cv11","ss01"; -webkit-font-smoothing: antialiased; }
body::before, body::after{ content: none !important; }
.kicker{ font: var(--a-orta) var(--t-kicker)/1 var(--mono); letter-spacing: var(--s-kicker);
         text-transform: uppercase; color: var(--m-3); }
.sayi, time, .zaman, .saat, .tarih{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible{ outline: 2px solid var(--odak); outline-offset: 2px; }   /* v9: 2 px halka, hale yok (masaüstüyle aynı) */
::selection{ background: var(--canli-zemin); }
::-webkit-scrollbar{ width: 8px; height: 8px; } ::-webkit-scrollbar-thumb{ background: var(--kat-3); border-radius: var(--r-0); }
.gorunmez{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Sıfırlama ────────────────────────────────────────────────────── */
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body{ margin: 0; height: 100%; }
html{ touch-action: manipulation; }   /* iki parmakla yakınlaştırma açık (WCAG 1.4.4); çift dokunuş yakınlaştırması kapalı */
body{ overflow: hidden; }
button{ font: inherit; color: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; color: inherit; }
.hidden{ display: none !important; }
[hidden]{ display: none !important; }
svg{ width: var(--ikon); height: var(--ikon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
     stroke-linecap: round; stroke-linejoin: round; }
@keyframes don{ to{ transform: rotate(360deg); } }
@keyframes belir{ from{ opacity: 0; } }
@keyframes yuksel{ from{ transform: translateY(24px); opacity: 0; } }

/* ── Çerçeve: üst bant 48 + (yazma 56) + sekme 56 ─────────────────── */
.uyg{ position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.ust{ flex: none; height: calc(var(--ust-h) + env(safe-area-inset-top, 0px));
      padding: env(safe-area-inset-top, 0px) 2px 0 var(--kenar-pay);
      display: flex; align-items: center; gap: var(--b-2); border-bottom: 1px solid var(--cizgi-ince); }
.ust .logo{ width: 18px; height: 18px; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ust .ad{ font: var(--a-orta) 12px/1 var(--yazi); letter-spacing: var(--s-marka); color: var(--m-1); }
/* Seçili sektör (23.10): bütün sekmeler bu sektörün; dokununca açık sektörler listesi */
.sektor-sec{ display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 52vw; height: 32px; margin-left: 4px;
             padding: 0 8px 0 10px; border: 1px solid var(--cizgi-ince); border-radius: var(--r-tam); background: none;
             color: var(--m-1); font: var(--a-orta) 13px/1 var(--yazi); }
.sektor-sec span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sektor-sec svg{ flex: none; width: 14px; height: 14px; }
.sektor-sec[hidden]{ display: none; }
.sektor-sec:disabled{ border-color: transparent; }
/* Tek birleşik bağlantı noktası: renk yalnız CSS ile (app.js baglantiCiz → data-durum).
   yeşil = masaüstü ORBİ + sesli asistan hazır · turuncu = bağlanıyor ya da yalnız ses yok · kırmızı = /api çalışmıyor */
.bag{ margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: var(--r-2);
      display: grid; place-items: center; }
.bag:active{ background: var(--vurgu-hover); }
.bag-nokta{ width: 8px; height: 8px; border-radius: var(--r-tam); background: var(--uyari); transition: background var(--h-2); }
.bag[data-durum="y"] .bag-nokta{ background: var(--tamam); }
.bag[data-durum="k"] .bag-nokta{ background: var(--kritik); }

.gorunumler{ flex: 1; min-height: 0; position: relative; }
/* 10.4 · Reklam alarmı şeridi (masaüstüyle aynı anlam): üst bandın altında, kalıcı; sorun çözülünce kalkar */
.alarm-serit{ flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 9px var(--kenar-pay);
      background: #b3122a; color: #fff; font: var(--a-normal) 13px/1.35 var(--yazi); }
.alarm-serit > span:not(.alarm-ikon){ flex: 1; min-width: 0; }
.alarm-serit b{ font-weight: var(--a-orta); display: block; }
.alarm-serit em{ font-style: normal; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alarm-ikon{ display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%;
      background: #fff; color: #b3122a; font: var(--a-orta) 12px/1 var(--yazi); }
.gorunum{ position: absolute; inset: 0; display: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch; padding: var(--b-2) var(--kenar-pay) var(--b-5); }
.gorunum.aktif{ display: block; animation: belir var(--h-2) var(--egri); }

/* B10 [T] alt sekme çubuğu */
.sekmeler{ flex: none; height: calc(var(--nav-h) + var(--guvenli-alt)); padding-bottom: var(--guvenli-alt);
           display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
           border-top: 1px solid var(--cizgi-ince); background: var(--zemin); }
.sekme{ position: relative; min-width: 0; border: 0; background: none; padding: 0; color: var(--m-3);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        font: var(--a-orta) var(--t-kicker)/1 var(--yazi); letter-spacing: 0; transition: color var(--h-1); }
.sekme svg{ width: 20px; height: 20px; }
.sekme.aktif{ color: var(--m-1); }
.sekme.aktif::before{ content: ""; position: absolute; top: -1px; left: 50%; width: 16px; height: 2px; margin-left: -8px;
                      border-radius: 1px; background: var(--m-1); }
/* B9 rozet: #rozet-is (className ezilir: 'rozet [kritik] [hidden]') */
.rozet{ position: absolute; top: 5px; left: calc(50% + 5px); min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: var(--r-tam); display: grid; place-items: center;
        font: var(--a-orta) var(--t-kicker)/1 var(--mono); letter-spacing: 0; color: var(--m-ters); background: var(--kritik); }
#rozet-ekip{ top: 9px; left: calc(50% + 9px); min-width: 0; width: 6px; height: 6px; padding: 0; font-size: 0; background: var(--altin); }

/* ── B11 birleşik yazma alanı (.yazma) ────────────────────────────── */
.alt-cubuk{ flex: none; padding: 4px var(--kenar-pay); background: var(--zemin); }
.yazma{ display: flex; align-items: flex-end; min-height: var(--girdi-h); border-radius: 12px; background: var(--kat);
        border: 1px solid transparent; transition: border-color var(--h-1), box-shadow var(--h-1); }
.yazma:focus-within{ border-color: var(--odak); box-shadow: var(--odak-hale); }
.yazma input, .yazma textarea{ flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--m-1);
        font: var(--a-normal) 16px/1.4 var(--yazi); }
.yazma input{ height: 46px; padding: 0 6px; }
.yazma textarea{ height: 46px; max-height: 120px; padding: 12px 6px; resize: none; display: block; }
.yazma input::placeholder, .yazma textarea::placeholder{ color: var(--m-3); }
.yazma input:focus-visible, .yazma textarea:focus-visible{ outline: none; box-shadow: none; }
/* Mikrofon / kamera / gönder: 20 px ikon, 44 px dokunma alanı */
.ctl, .gonder{ flex: none; position: relative; width: 44px; height: 46px; padding: 0; border: 0; border-radius: 11px;
               background: none; color: var(--m-3); display: grid; place-items: center; transition: color var(--h-1), background var(--h-1); }
.ctl svg, .gonder svg{ width: 20px; height: 20px; }
.ctl:active, .gonder:active{ background: var(--vurgu-secili); }
/* dugmeYaz() <span>METİN</span> yazar: görünmez ama erişilebilir ad olarak kalır */
.ctl span:not(.kayit-nokta){ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Kayıtta: ikon --kritik + 1.5 px kırmızı halka + halkanın sağ üstünde 6 px kayıt noktası (ikon kalır: mikrofon ≠ kamera) */
.ctl.rec{ color: var(--kritik); }
.ctl.rec::before{ content: ""; position: absolute; inset: 7px 6px; border-radius: var(--r-tam); box-shadow: inset 0 0 0 1.5px var(--kritik); }
.ctl .kayit-nokta{ position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: var(--r-tam);
                   background: var(--kritik); box-shadow: 0 0 0 2px var(--kat); }
.gonder{ color: var(--canli); }
#text-form:has(#text-input:placeholder-shown) .gonder, #ek-form:has(#ek-metin:placeholder-shown) .gonder{ color: var(--m-3); }
/* Ekip mesajı giderken Gönder kilitli (ekipGonder): soluk, dokunulmaz */
.gonder[disabled]{ color: var(--m-4); cursor: default; pointer-events: none; }
/* #tap-start her zaman gizli; dokunma istendiğinde mikrofon iki kez nabız atar */
.tap-start{ display: none !important; }
body:has(#tap-start:not(.hidden)) #btn-mic{ color: var(--m-1); animation: mik-nabiz 1.8s var(--egri) 2; }
@keyframes mik-nabiz{ from{ box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 var(--canli); } to{ box-shadow: inset 0 0 0 0 transparent, 0 0 0 10px transparent; } }
/* Kime hapı (avatar 20 + ad + ▾) */
.kime-hap{ flex: none; position: relative; display: flex; align-items: center; gap: 6px; height: 28px; max-width: 42%;
           margin: 9px 2px 9px 9px; padding: 0 6px 0 4px; border: 0; border-radius: var(--r-1); background: var(--kat-2);
           color: var(--m-2); font: var(--a-orta) 12.5px/1 var(--yazi); }
.kime-hap::after{ content: ""; position: absolute; inset: -9px -2px -9px -9px; }
.kime-hap > span:not(.avatar){ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kime-hap > svg{ width: 12px; height: 12px; color: var(--m-3); }

/* ── B8 düğmeler ──────────────────────────────────────────────────── */
.btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2);
      height: var(--dugme-h); padding: 0 14px; border: 0; border-radius: var(--r-2); background: var(--kat-2); color: var(--m-1);
      font: var(--a-orta) 12.5px/1 var(--yazi); letter-spacing: 0; white-space: nowrap;
      transition: background var(--h-1), color var(--h-1), transform var(--h-1); }
.btn::after{ content: ""; position: absolute; inset: -2px 0; }          /* 44 px dokunma alanı */
.btn svg{ width: 16px; height: 16px; }
.btn:active{ background: var(--kat-3); transform: translateY(1px); }
.btn.dolu{ background: var(--m-1); color: var(--m-ters); }
.btn.dolu:active{ background: var(--m-2); }
.btn.dolu.yesil{ background: var(--altin); }          /* Karar: yalnız onay diyaloğunda */
.btn.dolu.kirmizi{ background: var(--kritik); }       /* Yıkıcı: geri dönüşü olmayan işlem */
.btn.gri, .btn.hayalet{ background: transparent; color: var(--m-2); }
.btn.gri:active, .btn.hayalet:active{ background: var(--vurgu-hover); color: var(--m-1); }
.btn.kirmizi:not(.dolu){ background: transparent; color: var(--kritik); }
.btn.kirmizi:not(.dolu):active{ background: var(--kritik-zemin); }
.btn.kucuk{ height: var(--dugme-k); padding: 0 10px; }
.btn.kucuk::after{ inset: -6px -2px; }
.btn.genis{ width: 100%; }
.btn[disabled]{ opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn .donen{ width: 12px; height: 12px; }
.ikon{ position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-2); background: none;
       color: var(--m-3); display: grid; place-items: center; }
.ikon:active{ background: var(--vurgu-hover); color: var(--m-1); }
.baglanti{ position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
           color: var(--m-2); font: var(--a-normal) 12.5px/1.3 var(--yazi); text-decoration: none; white-space: nowrap; }
.baglanti::after{ content: ""; position: absolute; inset: -14px -8px; }
.baglanti:active{ color: var(--m-1); text-decoration: underline; text-underline-offset: 3px; }
.donen{ display: inline-block; flex: none; width: 14px; height: 14px; border-radius: var(--r-tam);
        border: 1.5px solid var(--cizgi-guclu); border-top-color: var(--canli); animation: don var(--h-don) linear infinite; }

/* ── B4 işaretler ─────────────────────────────────────────────────── */
.nokta{ display: inline-block; flex: none; width: 6px; height: 6px; border-radius: var(--r-tam); background: var(--m-3); }
.nokta.y{ background: var(--tamam); } .nokta.s{ background: var(--uyari); } .nokta.k{ background: var(--kritik); }
.nokta.c{ background: var(--canli); } .nokta.a{ background: var(--altin); }
.nokta.bos{ position: static; padding: 0; background: var(--m-4); }   /* .bos (B16 boş durum) dolgusunu sıfırla */
.kritik{ --o: var(--kritik); } .yuksek{ --o: var(--uyari); } .normal{ --o: var(--notr); } .dusuk{ --o: var(--m-4); } .onay{ --o: var(--altin); }

/* ── B2 bölüm etiketi ─────────────────────────────────────────────── */
.grup{ display: flex; align-items: center; gap: var(--b-2); min-height: var(--grup-h); margin: var(--b-3) 0 2px; padding: 0 4px; color: var(--m-3); }
.grup:first-child{ margin-top: var(--b-1); }
.grup > i{ flex: none; width: 5px; height: 5px; border-radius: var(--r-tam); background: var(--o, var(--m-3)); }
.grup::after{ content: ""; order: 1; flex: 1; height: 1px; background: var(--cizgi-ince); }
.grup .sag{ order: 2; flex: none; font: var(--a-normal) 12px/1 var(--yazi); color: var(--m-3); display: inline-flex; align-items: center; gap: 6px; }
.grup .sag .nokta{ width: 5px; height: 5px; }
button.grup{ width: 100%; border: 0; background: none; min-height: 44px; margin-bottom: 0; text-align: left; }
button.grup > svg{ order: 3; width: 12px; height: 12px; color: var(--m-3); transition: transform var(--h-2) var(--egri); }
button.grup.acik > svg{ transform: rotate(180deg); }
.grup .bilgi-ikon{ order: 2; position: relative; width: 24px; height: 24px; margin: -10px 0; border: 0; background: none; padding: 0;
                   color: var(--m-3); display: grid; place-items: center; }
.grup .bilgi-ikon::after{ content: ""; position: absolute; inset: -10px; }
.grup .bilgi-ikon svg{ width: 16px; height: 16px; }
.katli-govde{ padding-bottom: var(--b-2); }
.isi-lejant{ margin: 10px 0 0 4px; color: var(--m-3); }
.isi-lejant svg{ width: 14px; height: 14px; }

/* ── B3 satır (Gündem, onay, sektör) ──────────────────────────────── */
.liste{ display: flex; flex-direction: column; }
.is{ position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
     min-height: var(--satir-h); padding: 0 4px; border-radius: var(--r-1); cursor: pointer;
     transition: background var(--h-1), opacity var(--h-2); }
.is:active{ background: var(--vurgu-hover); }
.is > .halka, .is > .isaret{ grid-row: 1; grid-column: 1; }
.halka{ position: relative; width: 44px; height: 44px; margin: -12px; padding: 0; border: 0; border-radius: var(--r-tam);
        background: none; display: grid; place-items: center; }
.halka::before, .halka::after{ grid-area: 1 / 1; }
.halka::before{ content: ""; width: var(--halka); height: var(--halka); border-radius: var(--r-tam); border: 1.5px solid var(--o, var(--notr));
                transition: box-shadow var(--h-1); }
.halka:active::before{ box-shadow: inset 0 0 0 8px var(--vurgu-secili); }
.isaret{ width: 20px; height: 20px; display: grid; place-items: center; }
.isaret::before{ content: ""; width: var(--halka); height: var(--halka); border-radius: var(--r-tam); border: 1.5px solid var(--altin);
                 background: radial-gradient(circle, var(--altin) 0 2px, transparent 2.5px); }
.isaret.bulgu::before{ border-color: var(--uyari); background: radial-gradient(circle, var(--uyari) 0 2px, transparent 2.5px); }
.is-metin{ grid-row: 1; grid-column: 2; min-width: 0; display: flex; align-items: baseline; overflow: hidden; white-space: nowrap; padding: 11px 0; }
.is .baslik{ min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--m-1); font-size: var(--t-govde); }
.is .ek{ flex: none; padding-left: 5px; color: var(--m-3); font-size: var(--t-meta); }
.is.onay .baslik{ font-weight: var(--a-orta); }
.is.dusuk .baslik{ color: var(--m-2); }
.is-son{ grid-row: 1; grid-column: 3; display: flex; align-items: center; }
.is .tarih{ padding-left: 4px; font: var(--a-normal) var(--t-meta)/1 var(--mono); color: var(--m-3); white-space: nowrap; }
.is .tarih.acil{ color: var(--kritik); }
.is .para{ padding: 0 6px; font: var(--a-normal) 13px/1 var(--mono); color: var(--altin); }
.is .para.kapi{ font-size: var(--t-meta); color: var(--uyari); white-space: nowrap; }   /* kalite kapısında (Kreatif denetimi sürüyor) */
.is .ok{ display: grid; place-items: center; width: 20px; color: var(--m-3); }
.is .ok svg{ width: 16px; height: 16px; }
.is .aciklama{ display: none; grid-row: 2; grid-column: 2 / -1; padding: 0 0 12px; color: var(--m-2);
               font-size: 13.5px; line-height: var(--sy-okuma); white-space: pre-line; overflow-wrap: anywhere; }
.is .aciklama .baglanti{ margin-top: 8px; }
.is .aciklama .m3{ color: var(--m-3); }
.is.acik{ align-items: start; }
.is.acik .aciklama{ display: block; }
.is.acik .is-metin{ display: block; white-space: normal; }
.is.acik .is-metin .baslik{ overflow: visible; }
.is.acik > .halka, .is.acik > .isaret{ margin-top: 12px; }
.is.acik > .halka{ margin-top: 0; }
.is.acik .is-son{ align-self: start; min-height: 44px; }
.is.acik .is-son .tarih, .is.acik .is-son .para, .is.acik .is-son .ok{ align-self: center; }
/* Satır onayı: ✓ ✕ her zaman görünür (32 px görsel, 44 px dokunma) */
.mini{ position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--m-3); display: grid; place-items: center; }
.mini::before{ content: ""; grid-area: 1 / 1; width: 32px; height: 32px; border-radius: var(--r-tam); transition: background var(--h-1); }
.mini svg{ grid-area: 1 / 1; position: relative; width: 16px; height: 16px; }
.mini.yesil{ color: var(--tamam); }
.mini.yesil::before{ background: var(--tamam-zemin); }
.mini:active::before{ background: var(--vurgu-secili); }
.mini:not(.yesil):active{ color: var(--kritik); }
.mini[disabled]{ opacity: .45; pointer-events: none; }
.is.bitti{ opacity: .4; pointer-events: none; }
.is.bitti .halka::before{ background: var(--tamam); border-color: var(--tamam); }
.is.bitti .halka::after{ content: ""; width: 7px; height: 4px; margin-top: -2px; border-left: 1.5px solid var(--m-ters);
                         border-bottom: 1.5px solid var(--m-ters); transform: rotate(-45deg); }
.is.bitti .baslik{ text-decoration: line-through; }
.filtre{ display: flex; padding: 4px 0 2px; }
.cip-sec{ position: relative; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 10px;
          border: 1px solid var(--cizgi-guclu); border-radius: var(--r-tam); background: var(--kat-2); color: var(--m-1);
          font: var(--a-normal) 12.5px/1 var(--yazi); }
.cip-sec::after{ content: ""; position: absolute; inset: -9px -4px; }
.cip-sec svg{ width: 12px; height: 12px; color: var(--m-3); }
/* B19 "+N daha" */
.daha{ display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 0 0 34px; border: 0; background: none;
       color: var(--m-2); font: var(--a-normal) 12.5px/1 var(--yazi); text-align: left; }
.daha:active{ color: var(--m-1); }

/* ── B16 boş / yükleniyor / hata ──────────────────────────────────── */
.bos{ position: relative; padding: 10px 10px 10px 34px; color: var(--m-3); font-size: 13.5px; line-height: var(--sy-ui); }
.bos.olumlu::before, .bos.hata::before{ content: ""; position: absolute; left: 11px; top: 18px; width: 6px; height: 6px;
        border-radius: var(--r-tam); background: var(--tamam); }
.bos.hata::before{ background: var(--kritik); }
.bos .baglanti{ margin-left: 6px; }
.iskelet{ display: flex; align-items: center; gap: 10px; height: var(--satir-h); padding: 0 6px; }
.iskelet::before{ content: ""; flex: none; width: 16px; height: 16px; border-radius: var(--r-tam); background: var(--vurgu-secili); }
.iskelet::after{ content: ""; flex: 1; max-width: 72%; height: 10px; border-radius: var(--r-0); background: var(--vurgu-secili);
                 animation: iskelet 1.2s ease-in-out infinite alternate; }
.iskelet:nth-child(2)::after{ max-width: 54%; } .iskelet:nth-child(3)::after{ max-width: 64%; }
@keyframes iskelet{ to{ opacity: .35; } }

/* ── B15 durum şeridi ─────────────────────────────────────────────── */
.serit{ display: flex; align-items: center; gap: var(--b-3); min-height: 36px; margin: var(--b-2) 0; padding: 8px 12px;
        border-radius: var(--r-1); background: var(--vurgu-hover); box-shadow: inset 2px 0 0 var(--m-3);
        color: var(--m-1); font-size: 13px; line-height: 1.4; }
.serit > span:not(.donen){ flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.serit > span em{ font-style: normal; color: var(--m-3); }
.serit.k{ background: var(--kritik-zemin); box-shadow: inset 2px 0 0 var(--kritik); }
.serit.s{ background: var(--uyari-zemin); box-shadow: inset 2px 0 0 var(--uyari); }
.serit.a{ background: var(--altin-zemin); box-shadow: inset 2px 0 0 var(--altin); }
.serit.c{ background: var(--canli-zemin); box-shadow: inset 2px 0 0 var(--canli); }
.serit .btn{ flex: none; }

/* ── Asistan ──────────────────────────────────────────────────────── */
#v-asistan.aktif{ display: flex; flex-direction: column; align-items: stretch; }
.kure-kap{ flex: none; width: var(--kure-boy); height: var(--kure-boy); margin: var(--b-2) auto 0;
           transition: width var(--h-3) var(--egri), height var(--h-3) var(--egri); }
.kure-kap canvas{ width: 100%; height: 100%; display: block; }
/* #status: durum() 'durum live|yesil|sari|kirmizi' yazar → noktanın rengi */
.durum{ --d: var(--m-3); max-width: 100%; min-height: 20px; margin: 2px 0 0; text-align: center; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; font-size: 13px; line-height: 20px; color: var(--m-2); }
.durum::before{ content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: var(--r-tam);
                background: var(--d); vertical-align: middle; transition: background var(--h-2); }
.durum.live{ --d: var(--canli); } .durum.yesil{ --d: var(--tamam); } .durum.sari{ --d: var(--uyari); } .durum.kirmizi{ --d: var(--kritik); }
/* Sohbet başlayınca küre 112 px'e küçülür ve sola geçer */
#v-asistan.aktif.sohbetli{ display: grid; grid-template-columns: var(--kure-sohbet) minmax(0, 1fr); column-gap: var(--b-3); align-content: start; }
#v-asistan.sohbetli > *{ grid-column: 1 / -1; }
#v-asistan.sohbetli .kure-kap{ grid-column: 1; grid-row: 1; width: var(--kure-sohbet); height: var(--kure-sohbet); margin: 0; }
#v-asistan.sohbetli .durum{ grid-column: 2; grid-row: 1; align-self: center; text-align: left; margin: 0; }
/* Sohbetli düzende sütun dar: durum metni (ör. "Erişim anahtarı hatalı · QR'ı yeniden okutun") 2 satıra sarar */
#v-asistan.sohbetli .durum{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 18px; }
/* B6 × 3 rakam şeridi: kutusuz, telefonun tek özet yeri */
.ozet-serit{ flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--b-4);
             border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.ozet-serit:empty{ display: none; }
.serit-oge{ position: relative; min-width: 0; min-height: 64px; padding: 10px 12px; border: 0; border-left: 1px solid var(--cizgi);
            background: none; color: var(--m-3); text-align: left; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
            transition: background var(--h-1); }
.serit-oge:first-child{ border-left: 0; }
.serit-oge:active{ background: var(--vurgu-hover); }
.serit-oge b{ display: block; font: var(--a-ince) var(--t-rakam)/var(--sy-rakam) var(--yazi); letter-spacing: var(--s-rakam);
              font-variant-numeric: tabular-nums; color: var(--h, var(--m-1)); white-space: nowrap; }
.serit-oge b small{ font: var(--a-normal) 15px/1 var(--yazi); letter-spacing: 0; color: var(--m-3); }
.serit-oge .alt{ display: block; margin-top: -2px; font-size: 12px; line-height: 1.2; color: var(--uyari); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 4 öğe (Kontrol · Onay · İş · Harcama dün): para rakamı daha geniş sütunda; 7+ haneli değer biraz küçülür */
.ozet-serit.dort{ --t-rakam: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1.6fr); }
.ozet-serit.dort .serit-oge{ padding: 10px 8px; }
.ozet-serit.dort .serit-oge:first-child{ padding-left: 4px; }
@media (max-width: 360px){ .ozet-serit.dort{ --t-rakam: 23px; } }
.serit-oge.uzun b{ font-size: calc(var(--t-rakam) * .8); }
/* Ekip satırı (app.js ozetEkipCiz): şeridin altında tek satır, yalnız iş varken; altta 2 px ilerleme. Dokununca Ekip sekmesi */
.ozet-ekip{ flex: none; }
.ozet-ekip:empty{ display: none; }
.oe{ position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0;
     border-bottom: 1px solid var(--cizgi); background: none; color: var(--m-3); text-align: left; font: var(--a-normal) 13px/1.3 var(--yazi);
     transition: background var(--h-1); }
.oe:active{ background: var(--vurgu-hover); }
.oe > .ek-led{ margin: 0 7px; }
.oe-ad{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-ad b{ font-weight: var(--a-orta); color: var(--m-1); }
.oe-sure{ flex: none; font-size: 12.5px; color: var(--m-2); white-space: nowrap; }
/* Nöbet satırı ("Bekliyor · devam 12:16 · 9 iş sırada"): sığmayan parça bütün olarak ikinci satıra kayar ve görünmez */
.oe-ad.parca{ display: flex; flex-wrap: wrap; height: 1.3em; }
.oe-ad.parca > *{ flex: none; white-space: pre; }
.oe-ad.parca > b{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Sohbet */
.sohbet{ display: flex; flex-direction: column; gap: var(--b-3); margin-top: var(--b-4); }
.sohbet .row{ max-width: 100%; color: var(--m-2); font-size: var(--t-okuma); line-height: 1.5; overflow-wrap: anywhere; }
.sohbet .row small{ display: block; margin-bottom: 5px; font: var(--a-orta) var(--t-kicker)/1 var(--mono); letter-spacing: var(--s-kicker);
                    text-transform: uppercase; color: var(--m-3); }
.sohbet .row.user{ align-self: flex-end; max-width: 86%; padding: 9px 12px; border-radius: 12px; background: var(--kat-2); color: var(--m-1); }
.sohbet .row.user small{ display: none; }
.sohbet .row.sys{ align-self: center; text-align: center; font-size: 12.5px; color: var(--m-3); }
/* B23 kamera önizleme: çerçeve videonun gerçek oranını alır (app.js kameraOrani → --oran, --oran-s); dikey çekim
   kırpılmaz, ekranın yarısını aşmaz. Ayna YALNIZ ön kamerada (.ayna); modele giden kare hiç aynalanmaz. */
#cam-wrap{ position: relative; flex: none; width: min(100%, calc(52vh * var(--oran-s, 1.7778))); aspect-ratio: var(--oran, 16 / 9);
           margin: var(--b-4) auto 0; border-radius: 12px; overflow: hidden; background: var(--yaprak); }
#cam{ width: 100%; height: 100%; object-fit: cover; display: block; }
#cam-wrap.ayna #cam{ transform: scaleX(-1); }
.cam-cevir{ position: absolute; right: 2px; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none;
            color: var(--m-1); display: grid; place-items: center; }
.cam-cevir::before{ content: ""; grid-area: 1 / 1; width: 32px; height: 32px; border-radius: var(--r-tam); background: var(--perde); }
.cam-cevir svg{ grid-area: 1 / 1; position: relative; width: 18px; height: 18px; }
.cam-cevir:active::before{ background: var(--kat-3); }
.cam-cevir[disabled]{ opacity: .5; pointer-events: none; }
.cam-live{ position: absolute; left: 10px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
           border-radius: var(--r-1); background: var(--perde); color: var(--m-1); font-size: 12px; }
.cam-live::before{ content: ""; width: 6px; height: 6px; border-radius: var(--r-tam); background: var(--kritik); }

/* ── Gündem ───────────────────────────────────────────────────────── */
#gunluk-ozet, #sayaclar{ display: none !important; }
#pano-uyari:empty{ display: none; }

/* ── Autopol kapağı ───────────────────────────────────────────────── */
.kapak{ padding: var(--b-4) 4px var(--b-5); border-bottom: 1px solid var(--cizgi); }
.kapak .tarih-satiri{ color: var(--altin); }
.kapak-ad{ margin: 10px 0 0; font: var(--a-ince) var(--t-manset)/var(--sy-baslik) var(--baslik); letter-spacing: var(--s-sik); color: var(--m-1); }
.kapak-alt{ margin-top: 4px; font-size: 13px; color: var(--m-2); }
.kapak-kontrol{ padding: var(--b-2) 0 var(--b-4); }
.kapak-rakam{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--b-3); margin: var(--b-2) 4px var(--b-3); }
.kapak-rakam b{ font: var(--a-ince) var(--t-rakam)/var(--sy-rakam) var(--yazi); letter-spacing: var(--s-rakam); font-variant-numeric: tabular-nums; }
.kapak-rakam b small{ font: var(--a-normal) 15px/1 var(--yazi); letter-spacing: 0; color: var(--m-3); }
.kapak-not{ font-size: 12px; color: var(--m-3); }
.kapak-not .s{ color: var(--uyari); } .kapak-not .k{ color: var(--kritik); } .kapak-not .y{ color: var(--tamam); }
.kapak .ilerleme-buyuk, .kapak-kontrol .ilerleme-buyuk{ margin: 0 4px; }
.kapak-satirlar{ border-top: 1px solid var(--cizgi); padding-top: var(--b-2); }
.kapak-git{ display: flex; align-items: center; gap: var(--b-3); width: 100%; min-height: 48px; padding: 0 4px; border: 0;
            border-radius: var(--r-1); background: none; color: var(--m-1); font: var(--a-normal) var(--t-govde)/1.3 var(--yazi); text-align: left; }
.kapak-git:active{ background: var(--vurgu-hover); }
.kapak-git > span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kapak-git > svg{ width: 16px; height: 16px; color: var(--m-3); }
.kapak-git.acik > svg:last-child{ transform: rotate(180deg); }
.kart.kilitli{ color: var(--m-3); padding-left: 32px; }
.kart.kilitli > svg:first-child{ color: var(--m-4); }
/* Kapak üst satırı: tarih + "Veri n/N" çipi (dokununca kaynak listesi) */
.kapak-ust{ display: flex; align-items: center; justify-content: space-between; gap: var(--b-2); min-height: 24px; }
.veri-cip{ position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
           border: 0; border-radius: var(--r-tam); background: var(--vurgu-hover); color: var(--m-2);
           font: var(--a-normal) 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.veri-cip::after{ content: ""; position: absolute; inset: -10px -4px; }
.veri-cip:active{ background: var(--vurgu-secili); color: var(--m-1); }
/* DİKKAT uyarısı (en çok 2): dokununca tamamı alttan açılır */
button.serit.kapak-uyari{ width: 100%; border: 0; text-align: left; font: var(--a-normal) 13px/1.4 var(--yazi); }
button.serit.kapak-uyari:active{ background: var(--uyari-zemin); filter: brightness(1.2); }
/* Göstergeler: satır başına ad · değer (mono); kötüleşen trendde başta turuncu halka, dokununca trend metni */
.kapak-kpi{ padding: var(--b-1) 0 var(--b-2); }
.kp{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; width: 100%;
     min-height: 40px; padding: 0 4px; border: 0; border-radius: var(--r-1); background: none; color: var(--m-1); text-align: left;
     font: var(--a-normal) var(--t-govde)/1.3 var(--yazi); }
.kp[data-a]{ cursor: pointer; }
.kp[data-a]:active{ background: var(--vurgu-hover); }
.kp-halka{ grid-row: 1; grid-column: 1; justify-self: center; width: 5px; height: 5px; border-radius: var(--r-tam); background: var(--m-4); }
.kp.kotu .kp-halka{ width: 12px; height: 12px; background: none; box-shadow: inset 0 0 0 1.5px var(--uyari); }
.kp-ad{ grid-row: 1; grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m-2); }
.kp-deger{ grid-row: 1; grid-column: 3; font: var(--a-normal) 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--m-1); white-space: nowrap; }
.kp-trend{ display: none; grid-row: 2; grid-column: 2 / -1; padding: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--m-3); overflow-wrap: anywhere; }
.kp.acik .kp-trend{ display: block; }
.kp.acik .kp-ad{ white-space: normal; padding: 10px 0 4px; }
.kp.acik{ align-items: start; }
.kp.acik .kp-halka{ margin-top: 15px; } .kp.kotu.acik .kp-halka{ margin-top: 11px; }
.kp.acik .kp-deger{ padding-top: 12px; }
/* Instagram satırı ve alt sayfası: durum halkası (y hazır · s durduruldu/bekleniyor · k hata · c yükleniyor · a sırada) */
.ig-kapak{ border-top: 0; padding-top: 0; }
.ig-halka{ flex: none; width: 16px; height: 16px; display: grid; place-items: center; font-style: normal; --c: var(--m-4); }
.ig-halka::before{ content: ""; width: 12px; height: 12px; border-radius: var(--r-tam); box-shadow: inset 0 0 0 1.5px var(--c); }
.ig-halka.y{ --c: var(--tamam); } .ig-halka.s{ --c: var(--uyari); } .ig-halka.k{ --c: var(--kritik); }
.ig-halka.c{ --c: var(--canli); } .ig-halka.a{ --c: var(--altin); }
.ig-halka.c::before{ box-shadow: none; border: 1.5px solid var(--cizgi-guclu); border-top-color: var(--canli); animation: don var(--h-don) linear infinite; }
.kapak-git.ig-satir{ gap: 10px; }
.ig-satir > span b{ font-weight: var(--a-orta); font-size: 14px; }
.ig-satir > span em{ font-style: normal; font-size: 12.5px; color: var(--m-2); }
.kapak-git.ig-satir > svg{ width: 14px; height: 14px; }
@media (max-width: 399px){ .ig-satir .genis{ display: none; } }
.is > .ig-halka, .is > .tik{ grid-row: 1; grid-column: 1; justify-self: center; }
.ig-is .ig-saat{ flex: none; padding-right: 8px; font: var(--a-normal) var(--t-meta)/1 var(--mono); color: var(--m-2); }
.ig-is .ig-bicim{ flex: none; padding-right: 8px; font-size: var(--t-meta); color: var(--m-3); }
.ig-is .ig-durum{ padding-right: 6px; font-size: 12px; color: var(--canli); white-space: nowrap; }
.ig-is.yayin:not([data-a]){ cursor: default; }
/* Kaçan paylaşım: "Yeniden planla" karar rengi (sarı); diyalogda tarih-saat alanı */
.ig-is .ig-durum.ig-planla{ color: var(--altin); }
.ig-is:not([data-a]){ cursor: default; }
.diyalog .ig-tarih{ margin-top: var(--b-3); }
.ig-gun{ padding: 10px 4px 2px 34px; }
.sayfa-bas .ig-hesap{ font-size: 13px; color: var(--m-3); }
.anahtar-satir em{ font-style: normal; color: var(--m-3); }
.anahtar-satir.pasif{ cursor: default; color: var(--m-2); }
.anahtar-satir.pasif:active{ background: none; }
.anahtar-satir[disabled]{ opacity: .5; pointer-events: none; }

/* B7 dilim çubuğu (kontrol ilerlemesi) */
.ilerleme-buyuk{ height: 4px; border-radius: 1px; background: var(--cizgi-guclu); overflow: hidden; }
.ilerleme-buyuk span{ display: block; height: 100%; background: var(--tamam); }
.ilerleme-buyuk.dilimli{ display: flex; gap: 2px; background: none; overflow: visible; }
.ilerleme-buyuk.dilimli i{ flex: 1; min-width: 0; border-radius: 1px; background: var(--cizgi-guclu); }
.ilerleme-buyuk.dilimli i.y{ background: var(--tamam); }
.ilerleme-buyuk.dilimli i.d{ background: var(--uyari); }
.ilerleme-buyuk.dilimli i.k{ background: var(--kritik); }
.ilerleme-buyuk.dilimli i.v{ background: var(--m-4); opacity: .5; }
.gunluk-kart .cubuk.seg i.y{ background: var(--tamam); }

/* ── Alt sayfa (sektör, depo, kurallar, görüşme, kadro) ───────────── */
.katman{ position: fixed; inset: 0; z-index: var(--z-katman); background: var(--perde);
         -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: flex-end; }
.katman[hidden]{ display: none; }
.sayfa{ position: relative; width: 100%; height: calc(100% - 28px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column;
        background: var(--yaprak); border-radius: var(--r-3) var(--r-3) 0 0; overflow: hidden; animation: yuksel var(--h-3) var(--egri); }
.sayfa-bas{ flex: none; display: flex; align-items: center; gap: var(--b-2); height: var(--sayfa-bas-h); padding: 0 4px;
            border-bottom: 1px solid var(--cizgi-ince); }
.sayfa-bas h3{ flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
               font: var(--a-normal) 17px/1.2 var(--baslik); color: var(--m-1); }
/* Depo dosya adı: iki satıra kadar tam görünür (uzantı ve "raporu-7/-8" gibi ayırt edici sonek kesilmez) */
.sayfa-bas h3.ed-ad{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                     overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; }
.sayfa-bas .kapat{ position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-2);
                   background: none; color: var(--m-3); display: grid; place-items: center; }
.sayfa-bas .kapat:active{ background: var(--vurgu-hover); color: var(--m-1); }
.sayfa-bas > .nokta{ margin: 0 2px 0 -2px; }
/* Satır yüksekliği 16 px: yatay kırpma (overflow) "bugün"deki g'nin, "hepsi"deki p'nin inişini kesmesin */
.sayfa-sag{ flex: none; max-width: 45%; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font: var(--a-normal) 12px/16px var(--yazi); color: var(--m-3); }   /* Inter; yalnız <time> mono (§2.9) */
.sayfa-govde{ flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: var(--b-2) var(--kenar-pay) var(--b-6); }
.sayfa-alt{ flex: none; display: flex; align-items: center; gap: var(--b-2); padding: 8px var(--kenar-pay) calc(8px + var(--guvenli-alt));
            border-top: 1px solid var(--cizgi-ince); background: var(--yaprak); }
.sayfa-alt:empty{ display: none; }
.sayfa-alt .btn{ flex: 1 1 0; min-width: 0; }
.sayfa-alt .btn.kirmizi:not(.dolu){ flex: 0 0 auto; }
.sayfa-alt .ed-alt-not{ flex: 1; min-width: 0; text-align: right; font-size: 12.5px; color: var(--m-3); }   /* rapor: yalnız Sil */
.sayfa-alt.not-modu{ flex-direction: column; align-items: stretch; }
.sayfa-alt.not-modu .eylemler{ display: flex; justify-content: flex-end; gap: var(--b-2); }
.sayfa-alt.not-modu .eylemler .btn{ flex: 0 0 auto; }
.not-etiket{ font-size: 12px; color: var(--m-3); }
.not-etiket.uyari{ color: var(--uyari); }
/* B11 form alanı */
.alan{ width: 100%; min-width: 0; min-height: var(--form-h); padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-2);
       background: var(--kat-2); color: var(--m-1); line-height: 1.45; outline: 0; transition: border-color var(--h-1), box-shadow var(--h-1); }
.alan:focus{ border-color: var(--odak); box-shadow: var(--odak-hale); }
textarea.alan{ resize: vertical; display: block; }
select.alan, .ek-secim select{ -webkit-appearance: none; appearance: none; padding-right: 32px;
       background-image: linear-gradient(45deg, transparent 50%, var(--m-3) 50%), linear-gradient(135deg, var(--m-3) 50%, transparent 50%);
       background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.alan::placeholder{ color: var(--m-3); }

/* Sektör ayrıntısı */
.anahtar-satir{ display: flex; align-items: center; gap: var(--b-3); width: 100%; min-height: 44px; padding: 0 4px; border: 0;
                border-radius: var(--r-1); background: none; color: var(--m-1); font: var(--a-normal) var(--t-govde)/1.3 var(--yazi); text-align: left; }
.anahtar-satir > span:first-child{ flex: 1; }
.anahtar-satir:active{ background: var(--vurgu-hover); }
.anahtar{ position: relative; flex: none; width: 28px; height: 16px; border-radius: var(--r-tam); background: var(--kat-3); transition: background var(--h-1); }
.anahtar::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--r-tam);
                 background: var(--m-3); transition: transform var(--h-1) var(--egri), background var(--h-1); }
.anahtar[data-acik="1"]{ background: var(--canli); }
.anahtar[data-acik="1"]::after{ transform: translateX(12px); background: var(--m-ters); }
.tur-satir{ display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; }
.tur-satir .ilerleme-buyuk{ flex: 1; min-width: 40px; }
/* B9 etiket çipi */
.tur{ flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-1);
      font: var(--a-orta) 11px/1 var(--yazi); text-transform: lowercase; color: var(--m-3); background: var(--vurgu-hover); }
.tur.yapildi{ color: var(--tamam); background: var(--tamam-zemin); }
.tur.hata{ color: var(--kritik); background: var(--kritik-zemin); }
.tur.kacirildi{ color: var(--uyari); background: var(--uyari-zemin); }
.tur.bekliyor{ color: var(--m-2); background: var(--vurgu-hover); }
.tur.kapali{ color: var(--m-4); background: transparent; }
.kontrol, .islem{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
                  min-height: var(--satir-h); padding: 0 4px; border-radius: var(--r-1); cursor: pointer; }
.kontrol:active, .islem:active{ background: var(--vurgu-hover); }
.kontrol > .tik, .islem > .tik{ grid-row: 1; grid-column: 1; }
.kontrol .k-ad, .islem .i-ad{ grid-row: 1; grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-govde); }
.kontrol .k-alt, .islem .z{ grid-row: 1; grid-column: 3; font: var(--a-normal) var(--t-meta)/1 var(--mono); color: var(--m-3); white-space: nowrap; }
.kontrol .k-alt.elle{ font-family: var(--yazi); }   /* "Elle" bir sözcük: Inter 12.5 --m-3 */
.kontrol .k-not, .islem .o{ display: none; grid-row: 2; grid-column: 2 / -1; padding-bottom: 12px; font-size: 13.5px; line-height: var(--sy-okuma); color: var(--m-2); }
.kontrol .k-not.tamam{ color: var(--m-2); } .kontrol .k-not.dikkat{ color: var(--m-2); } .kontrol .k-not.kritik{ color: var(--m-2); }
.kontrol.acik, .islem.acik{ align-items: start; }
.kontrol.acik .k-not, .islem.acik .o{ display: block; }
.islem .o{ overflow-wrap: anywhere; }   /* uzun dosya yolu satırı taşırmasın */
.kontrol.acik .k-ad, .islem.acik .i-ad{ white-space: normal; padding: 11px 0; }
.kontrol.acik > .tik, .islem.acik > .tik{ margin-top: 12px; }
.kontrol.acik > button.tik{ margin-top: 0; }
.kontrol.acik .k-alt, .islem.acik .z{ padding-top: 16px; }
/* .tik → B4 halka */
.tik{ position: relative; width: 20px; height: 20px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--m-ters); }
.tik::before, .tik::after{ grid-area: 1 / 1; }
.tik::before{ content: ""; width: var(--halka); height: var(--halka); border-radius: var(--r-tam); border: 1.5px solid var(--kat-3); }
button.tik{ width: 44px; height: 44px; margin: -12px; }
button.tik:active::before{ box-shadow: inset 0 0 0 8px var(--vurgu-secili); }
.tik.bekle::before{ border-color: var(--notr); }
.tik.onay::before{ border-color: var(--altin); }
.tik.veri::before{ border: 1.5px dashed var(--m-4); }
.tik.d::before{ border-color: var(--uyari); background: radial-gradient(circle, var(--uyari) 0 2px, transparent 2.5px); }
.tik.yapildi::before{ border-color: var(--tamam); background: var(--tamam); }
.tik.yapildi::after{ content: ""; width: 7px; height: 4px; margin-top: -2px; border-left: 1.5px solid var(--m-ters);
                     border-bottom: 1.5px solid var(--m-ters); transform: rotate(-45deg); }
.tik.k::before{ border-color: var(--kritik); background: var(--kritik); }
.tik.k::after{ content: "!"; font: var(--a-orta) 11px/1 var(--yazi); color: var(--m-ters); }
.kontrol-ozet{ padding: 6px 4px 4px 34px; font-size: 12.5px; color: var(--m-3); }
.ozet-metin{ padding: 4px 4px 4px 34px; color: var(--m-2); font-size: 13.5px; line-height: var(--sy-okuma); cursor: pointer;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ozet-metin.acik{ display: block; }
.uyari-satir{ display: flex; gap: 10px; align-items: baseline; padding: 6px 4px 6px 34px; position: relative; font-size: 13.5px; color: var(--m-2); }
.uyari-satir::before{ content: ""; position: absolute; left: 11px; top: 13px; width: 6px; height: 6px; border-radius: var(--r-tam); background: var(--uyari); }
.gosterge{ display: flex; align-items: baseline; gap: var(--b-2); min-height: 36px; padding: 8px 4px 0 34px; font-size: 13.5px; }
.gosterge .ad{ color: var(--m-2); }
.gosterge .dolgu{ flex: 1; min-width: 16px; border-bottom: 1px dotted var(--cizgi-guclu); }
.gosterge .deger{ font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--m-1); }
/* Son 14 gün ısı haritası (lejant ⓘ'de) */
.isi{ padding: 6px 0 4px; }
/* Hücreler sabit 13 px'e kadar; kalan genişlik kontrol adına gider (360 px'te ≈118 px) */
.isi-satir{ display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n, 14), minmax(9px, 13px)); gap: 2px; align-items: center; margin: 2px 0; }
.isi-ad{ padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--m-2); }
.isi-bas span{ text-align: center; font: var(--a-normal) var(--t-kicker)/1 var(--mono); letter-spacing: -.02em; color: var(--m-3); white-space: nowrap; }
.isi-bas span.bugun{ color: var(--m-1); }      /* altın yalnız 4 anlamda (§3.4): "bugün" nötr vurgu */
.isi-satir i{ height: 12px; border-radius: 2px; background: var(--vurgu-hover); }
.isi-satir i.y{ background: var(--tamam); opacity: .75; }
.isi-satir i.d{ background: var(--uyari); opacity: .8; }
.isi-satir i.k{ background: var(--kritik); }
.isi-satir i.v{ background: var(--m-4); opacity: .45; }
.isi-satir i.bugun{ outline: 1px solid var(--m-1); outline-offset: 1px; }
/* Eski adlar (gizli alanlar ve geriye uyum) */
.gunluk-kart, .sayaclar{ display: none; }
.ozet-kutu{ margin: var(--b-2) 0; color: var(--m-2); font-size: var(--t-okuma); line-height: var(--sy-okuma); }

/* ── B12 [T] alttan açılan liste ──────────────────────────────────── */
.alt-kat{ position: fixed; inset: 0; z-index: calc(var(--z-katman) + 5); background: var(--perde);
          -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: flex-end; }
.alt-liste{ width: 100%; max-height: 82%; overflow-y: auto; padding: 8px 8px calc(12px + var(--guvenli-alt));
            border-radius: var(--r-3) var(--r-3) 0 0; background: var(--kat); box-shadow: var(--g-2); animation: yuksel var(--h-2) var(--egri); }
.tutamak{ display: block; width: 32px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: var(--cizgi-guclu); }
.alt-bas{ padding: 4px 12px 8px; }
.liste-oge, .ek-chip, .ed-bolum button{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
            border: 0; border-radius: var(--r-1); background: none; color: var(--m-1); font: var(--a-normal) 15px/1.3 var(--yazi); text-align: left; }
.liste-oge:active, .ek-chip:active, .ed-bolum button:active{ background: var(--vurgu-hover); }
.liste-oge > svg, .ed-bolum button > svg{ width: 20px; height: 20px; color: var(--m-3); }
.liste-oge > span:not(.nokta):not(.meta), .ek-chip > span:not(.avatar), .ed-bolum button > span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-oge .meta{ flex: none; margin-left: auto; font: var(--a-normal) 12.5px/1 var(--yazi); color: var(--m-3); }
/* ⓘ açıklaması (alttan liste): toast gibi kesilmez, tamamı okunur; dokununca kapanır */
.alt-bilgi{ padding: 2px 12px 8px; font-size: var(--t-okuma); line-height: var(--sy-okuma); color: var(--m-2); white-space: pre-line; overflow-wrap: anywhere; }
.liste-oge.bilgi{ cursor: default; }
.liste-oge.bilgi:active{ background: none; }
/* Bilgi satırı (Bağlantı): ad tam görünür, uzun durum metni sağda kısalır (tamamı title'da) */
.liste-oge.bilgi > span:not(.nokta):not(.meta){ flex: none; }
.liste-oge.bilgi .meta{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-chip.secili, .ed-bolum button.secili{ background: var(--vurgu-secili); }
.ek-chip > svg{ width: 16px; height: 16px; color: var(--m-1); }
.ed-bolum{ display: flex; flex-direction: column; }
.ed-bolum i{ flex: none; min-width: 20px; text-align: right; font: var(--a-normal) 12.5px/1 var(--mono); font-style: normal; color: var(--m-3); }
/* "İncelenecek var" = 6 px altın nokta (B9 "yeni"); sayı rozeti yok — görünümde dolu altın yüzey çoğalmasın (§3.4) */
.ed-bolum b{ flex: none; width: 6px; height: 6px; border-radius: var(--r-tam); background: var(--altin); }
.ed-bolum button.cop{ color: var(--m-4); }

/* ── Ekip ─────────────────────────────────────────────────────────── */
#v-ekip.aktif{ display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* Sektör seçici (23.10): birden çok açık sektörde tek satır; seçili sektörün ekibi, Depo'su ve kuralları görünür */
.ek-sektorler{ flex: none; display: flex; gap: 2px; margin: 8px var(--kenar-pay) 0; padding: 2px; overflow-x: auto;
               scrollbar-width: none; border: 1px solid var(--cizgi-ince); border-radius: var(--r-tam); }
.ek-sektorler[hidden]{ display: none; }
.ek-sektor{ flex: 1 0 auto; min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-tam); background: none;
            color: var(--m-3); font: var(--a-orta) 12.5px/1 var(--yazi); white-space: nowrap; }
.ek-sektor.secili{ color: var(--m-1); background: var(--kat-2); }
.ek-akis .bos .m3{ display: block; margin-top: 4px; color: var(--m-3); font-size: 12.5px; }
.ek-ust{ flex: none; display: flex; align-items: center; gap: var(--b-3); height: 52px; padding: 0 2px 0 var(--kenar-pay);
         border-bottom: 1px solid var(--cizgi-ince); }
.ek-ust:empty{ border-bottom-color: transparent; }
.ek-durum{ flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; text-align: left;
           display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ek-durum b, .ek-durum span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-durum b{ font: var(--a-orta) 14px/1.25 var(--yazi); color: var(--m-1); }
.ek-durum span{ font-size: 12.5px; line-height: 1.25; color: var(--m-3); }
.ek-led{ flex: none; width: 6px; height: 6px; margin: 0 8px; border-radius: var(--r-tam); background: var(--m-4); }
.ek-led.acik{ background: var(--tamam); } .ek-led.calisiyor{ background: var(--canli); }
/* Bağlantı uyarısı (app.js baglantiCiz): yalnız bağlantı yokken, başlığın hemen altında tek şerit */
.ek-uyari{ flex: none; padding: 0 var(--kenar-pay); }
.ek-uyari:empty{ display: none; }
.ek-uyari .serit{ margin: var(--b-2) 0; }
/* Kadro şeridi: 12 avatar, yatay kaydırma, sağda solma (yalnız kaydırılacak içerik varken: .tasiyor, ekip.js kadroMaske).
   Avatar 54 px öğede ortalı (9 px iç pay): ilk avatar 16 px kenar payına hizalansın diye dolgu ve snap payı kenar − 9 */
.ek-kadro{ flex: none; display: flex; gap: 2px; height: 72px; padding: 8px calc(var(--kenar-pay) - 9px) 6px; overflow-x: auto; overflow-y: hidden;
           scroll-snap-type: x proximity; scroll-padding-inline: calc(var(--kenar-pay) - 9px); scrollbar-width: none;
           border-bottom: 1px solid var(--cizgi-ince); }
.ek-kadro.tasiyor{ -webkit-mask-image: linear-gradient(90deg, var(--m-1) calc(100% - 28px), transparent);
                   mask-image: linear-gradient(90deg, var(--m-1) calc(100% - 28px), transparent); }
.ek-kadro::-webkit-scrollbar{ display: none; }
.ek-kadro:empty{ display: none; }
.kadro-oge{ flex: none; width: 54px; padding: 0; border: 0; background: none; scroll-snap-align: start; color: var(--m-3);
            display: flex; flex-direction: column; align-items: center; gap: 5px; font: var(--a-orta) var(--t-kicker)/1.1 var(--yazi); }
.kadro-oge > span:last-child{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kadro-oge.calisiyor > span:last-child{ color: var(--m-1); }
.kadro-oge:active .avatar{ transform: scale(.96); }
/* B5 avatar */
.avatar{ --boy: 22px; position: relative; flex: none; width: var(--boy); height: var(--boy); border-radius: var(--r-tam);
         display: inline-grid; place-items: center; font: var(--a-orta) calc(var(--boy) * .4)/1 var(--yazi); letter-spacing: 0;
         color: var(--c, var(--m-2)); background: var(--kat-2); background: color-mix(in srgb, var(--c, var(--m-2)) 14%, var(--kat));
         box-shadow: inset 0 0 0 1.5px var(--c, var(--m-2)); transition: transform var(--h-1), opacity var(--h-2); }
.avatar.a20{ --boy: 20px; } .avatar.a28{ --boy: 28px; } .avatar.a36{ --boy: 36px; }
.avatar.a40{ --boy: 40px; box-shadow: inset 0 0 0 2px var(--c, var(--m-2)); }
.avatar.bosta{ opacity: .5; }
.avatar.kapali{ box-shadow: none; outline: 1.5px dashed var(--c, var(--m-2)); outline-offset: -1.5px; }
.avatar.calisiyor{ box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.avatar.calisiyor::before{ content: ""; position: absolute; inset: 0; border-radius: var(--r-tam);
         background: conic-gradient(var(--canli) 0 72%, transparent 0);
         -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), var(--m-1) calc(100% - 1.5px));
         mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), var(--m-1) calc(100% - 1.5px));
         animation: don var(--h-don) linear infinite; }
.avatar.sirada::after, .avatar.hata::after, .avatar.onayda::after{ content: ""; position: absolute; right: -1px; bottom: -1px;
         width: 7px; height: 7px; border-radius: var(--r-tam); background: var(--m-2); box-shadow: 0 0 0 2px var(--zemin); }
.avatar.hata::after{ background: var(--kritik); } .avatar.onayda::after{ background: var(--altin); }
.sayfa .avatar.sirada::after, .sayfa .avatar.hata::after, .sayfa .avatar.onayda::after{ box-shadow: 0 0 0 2px var(--yaprak); }
/* Sohbet akışı */
.ek-akis{ flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
          padding: var(--b-3) var(--kenar-pay) var(--b-2); display: flex; flex-direction: column; gap: var(--b-4); }
.ek-msj{ display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.ek-msj > .avatar{ margin-top: 1px; }
.ek-kim{ display: flex; align-items: baseline; gap: var(--b-2); min-width: 0; font: var(--a-orta) 13px/1.3 var(--yazi); color: var(--m-1); }
.ek-kim > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-saat{ flex: none; font: var(--a-normal) 11px/1 var(--mono); color: var(--m-3); }
.ek-metin{ margin-top: 3px; color: var(--m-2); font-size: var(--t-okuma); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ek-msj.ben{ display: block; align-self: flex-end; max-width: 86%; padding: 9px 12px; border-radius: 12px; background: var(--kat-2); }
.ek-msj.ben .ek-metin{ margin: 0; color: var(--m-1); }
.ek-msj.ben .ek-saat{ display: block; margin-top: 4px; text-align: right; }
/* Uzun mesaj 4 satırda kesilir (ekip.js ekMesajMetni/ekMesajOlc); "Devamı" / "Daha az" */
.ek-metin.kisa{ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ek-devam{ margin-top: 4px; color: var(--m-3); }
.ek-msj.ben .ek-devam{ display: flex; }
/* Mesajdaki çıktı yolu: dokununca Depo'da açılır */
.ek-yol{ color: var(--m-1); text-decoration: underline dotted var(--m-3); text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.ek-yol:active{ color: var(--canli); }
/* Çekim gönder: yazma alanındaki kamera düğmesi + yükleme satırı (ad · % · ✕, altta 2 px ilerleme) */
.ek-form .ek-cekim{ width: 40px; }
.ek-yuk{ flex: none; position: relative; display: flex; align-items: center; gap: var(--b-2); min-height: 40px;
         padding: 0 2px 0 var(--kenar-pay); font-size: 12.5px; color: var(--m-2); }
.ek-yuk > svg{ width: 16px; height: 16px; color: var(--m-3); }
.ek-yuk .ad{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-yuk .yz{ flex: none; font: var(--a-normal) 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--m-1); }
.ek-yuk .ek-cubuk{ left: var(--kenar-pay); right: var(--kenar-pay); bottom: 0; --c: var(--canli); transition: transform 300ms linear; }
.ek-yuk .ek-cubuk.toplam{ bottom: 4px; opacity: .45; }   /* çoklu gönderimde toplam ilerleme */
/* Ekip ⋯ menüsündeki aç/kapat anahtarı */
.liste-oge > .anahtar{ margin-left: auto; }
.ek-yaziyor{ flex: none; display: flex; align-items: center; gap: var(--b-2); min-height: 28px; padding: 0 var(--kenar-pay); font-size: 12.5px; color: var(--m-3); }
.ek-yaziyor:empty{ min-height: 0; }
.ek-nokta{ flex: none; width: 12px; height: 12px; border-radius: var(--r-tam); border: 1.5px solid var(--cizgi-guclu); border-top-color: var(--canli);
           animation: don var(--h-don) linear infinite; }
.ek-nokta i{ display: none; }
.ek-form{ flex: none; padding: 4px var(--kenar-pay); }
.ek-kime:not([hidden]){ display: flex; flex-direction: column; }
/* Kadro alt sayfası */
.rol-kimlik{ display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) 4px var(--b-2); }
.rol-kimlik > div{ min-width: 0; }
.rol-kimlik b{ display: block; font-weight: var(--a-orta); font-size: var(--t-govde); }
.rol-kimlik > div > span{ display: block; margin-top: 2px; font-size: 13px; color: var(--m-3); }
.gorev .tik.calis::before{ border-color: var(--cizgi-guclu); border-top-color: var(--canli); animation: don var(--h-don) linear infinite; }
/* Kalan süre sayacı (app.js sayacYaz): "02:15 · ~3 dk kaldı" + 2 px ilerleme çizgisi (rol rengi, %0→%95).
   Tahmin aşılınca çizgi %95'te bekler ve hafifçe nabız atar (.asti); azaltılmış harekette nabız ve kayma yok. */
.ek-ust{ position: relative; }
.ek-cubuk{ position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--c, var(--canli));
           transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s linear; pointer-events: none; }
.ek-cubuk.asti{ animation: sy-nabiz 2.4s ease-in-out infinite; }
@keyframes sy-nabiz{ 50%{ opacity: .4; } }
.ek-durum > .ek-s1{ display: flex; align-items: baseline; gap: var(--b-2); }
.ek-s1 > b{ flex: 0 1 auto; min-width: 0; }
/* Rol adı + "çalışıyor" (ekip.js ekipUstCiz): parçalar tek satıra dizilir; sağdaki süreye yer kalmazsa "çalışıyor"
   bütün olarak ikinci satıra kayar ve görünmez (yarım "çalışı…" yazılmaz). Blok en az rol adı kadardır: ad kesilmez. */
.ek-s1 > b.ek-ikili{ display: flex; flex-wrap: wrap; column-gap: .28em; min-width: min-content; height: 1.25em; overflow: hidden; }
.ek-durum b.ek-ikili > span{ flex: none; overflow: visible; font: inherit; color: inherit; }
.ek-durum .ek-sure{ flex: none; margin-left: auto; padding-right: 2px; color: var(--m-2); }
/* Başlıkta kalan kısa ifadeyle yazılır ("1:06:41 · uzun sürüyor"; ekip.js): en uzun rol adıyla 360 px'e de sığar.
   Güvenlik ağı (ızgara): süre sütunu önce tam genişliğini alır, ad sütunu artanı (sığmazsa "çalışıyor" düşer); yine de
   sığmazsa ad en az rol adı kadar kalır, süre harf ortasından kesilmez, "…" ile kısalır. (Esnek kutuda süre de
   orantılı daralıp yer varken "…" alıyordu.) */
.ek-durum > .ek-s1:has(> b.ek-ikili){ display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content); }
.ek-s1:has(> b.ek-ikili) > .ek-sure{ min-width: 0; margin-left: 0; }   /* otomatik kenar boşluğu öğeyi sütundan taşırırdı */
.ek-sure > time, .oe-sure > time, .ek-simdi .alt time{ font: var(--a-normal) 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--m-3); }
.ek-sure > span[data-sy], .oe-sure > span[data-sy]{ color: var(--m-2); }
.ek-sure > time + span::before, .oe-sure > time + span::before{ content: "·"; margin: 0 5px; color: var(--m-3); }
/* İş akışı alt sayfası (ekip.js ekipAkisSayfa): Şimdi (tam başlık + kalan süre + ilerleme) ve Sırada (ne zaman başlar) */
.ek-simdi{ position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 3px;
           align-items: start; padding: 8px 4px 14px; margin-bottom: var(--b-1); }
.ek-simdi.olcer::after{ content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 1px; background: var(--cizgi); }
.ek-simdi > .avatar{ grid-row: 1 / span 2; grid-column: 1; }
.ek-simdi .ad{ grid-row: 1; grid-column: 2; padding-top: 4px; font-size: var(--t-govde); line-height: 1.4; color: var(--m-1); overflow-wrap: anywhere; }
.ek-simdi .alt{ grid-row: 2; grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--m-3); }
.ek-simdi .alt > :is(span, b){ white-space: nowrap; }    /* "~1 dk", "04:16 geçti" bölünmez; satır ayraçta kırılır */
.ek-simdi .not{ grid-row: 3; grid-column: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                font-size: 12px; line-height: 1.4; color: var(--m-3); }
.ek-simdi .kalan{ font-weight: var(--a-orta); color: var(--m-1); }
/* Kadro alt sayfasında çalışan işin kalanı sözcüktür: Inter (mono yalnız saat ve ETA) */
.islem .z.kalan{ font-family: var(--yazi); color: var(--m-2); }
.ek-simdi .ek-cubuk{ left: 4px; right: 4px; bottom: 0; z-index: 1; }
.ek-akis-grup .sag{ flex: 0 1 auto; min-width: 0; }
.ek-sira-ozet{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; }   /* iniş kesilmesin */
.ek-akis-not{ margin: -2px 0 4px; padding: 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--m-3); }
.ek-sira > .avatar{ grid-row: 1; grid-column: 1; }
.ek-sira.acik > .avatar{ margin-top: 12px; }
/* İş akışı ✕ (ekip.js ekipIsIptal): çalışan işte başlığın sağında, sıradakilerde ETA'nın sağında */
.ek-simdi{ grid-template-columns: 28px minmax(0, 1fr) auto; }
.ek-simdi > .ek-iptal{ grid-row: 1 / span 2; grid-column: 3; align-self: start; margin: -6px -10px 0 0; }
.islem.ek-sira{ grid-template-columns: 20px minmax(0, 1fr) auto auto; }
.islem.ek-sira > .ek-iptal{ grid-row: 1; grid-column: 4; margin-right: -10px; }
.islem.ek-sira.acik > .ek-iptal{ margin-top: 0; }
@media (prefers-reduced-motion: reduce){ .ek-cubuk{ transition: none; } .ek-cubuk.asti{ animation: none; } }
/* Kurallar */
.ek-kural{ display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; min-height: 44px; padding: 0 4px;
           border-radius: var(--r-1); cursor: pointer; }
.ek-kural:active{ background: var(--vurgu-hover); }
.ek-kural .no{ padding-top: 13px; font: var(--a-normal) 12px/1 var(--mono); color: var(--m-3); font-variant-numeric: tabular-nums; }
.ek-kural .m{ padding: 11px 0; font-size: var(--t-govde); line-height: 1.45; color: var(--m-1); overflow-wrap: anywhere; }
.ek-kural button{ position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--m-3);
                  display: grid; place-items: center; visibility: hidden; }
.ek-kural.acik button{ visibility: visible; }
.ek-kural button:active{ color: var(--kritik); }
.ek-kural button svg{ width: 16px; height: 16px; }
.ek-kural-form{ display: flex; gap: var(--b-2); align-items: center; margin: var(--b-4) 0 var(--b-2); }
.ek-kural-form .alan{ flex: 1; }
/* Sınıra yaklaşan alanın sayacı ("930/1000"; ekip.js sayacGuncelle) */
.sayac{ flex: none; font: var(--a-normal) var(--t-meta)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--m-3); white-space: nowrap; }
.sayac.dolu{ color: var(--uyari); }
.sayfa-alt.not-modu .eylemler .sayac{ align-self: center; margin-right: auto; }
.ek-not{ padding: 6px 4px; font-size: 12.5px; color: var(--m-3); }
/* Teslimler (geriye uyum) */
.ek-secim{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-2); margin: var(--b-2) 0 var(--b-3); }
.ek-secim select, select{ width: 100%; min-width: 0; }
.ek-secim select{ height: var(--form-h); padding: 0 32px 0 12px; border: 1px solid transparent; border-radius: var(--r-2); background-color: var(--kat-2); color: var(--m-1); }
/* ekipMd(): başlık, liste, tablo, çizgi, kod */
.ek-md{ font-size: var(--t-okuma); line-height: var(--sy-okuma); color: var(--m-2); overflow-wrap: anywhere; }
.ek-md h4{ margin: var(--b-5) 0 var(--b-2); font: var(--a-orta) var(--t-govde)/1.35 var(--yazi); color: var(--m-1); }
.ek-md h4:first-child{ margin-top: var(--b-2); }
.ek-md p{ margin: 6px 0; }
.ek-md b{ font-weight: var(--a-orta); color: var(--m-1); }
.ek-md code{ padding: 1px 5px; border-radius: var(--r-0); background: var(--kat-2); font: 13px var(--mono); color: var(--m-1); }
.ek-md pre{ margin: var(--b-2) 0; padding: 10px 12px; border-radius: var(--r-2); background: var(--kat); overflow-x: auto; font: 12.5px/1.5 var(--mono); color: var(--m-1); white-space: pre; }
.ek-md hr{ margin: var(--b-4) 0; border: 0; border-top: 1px solid var(--cizgi); }
.ek-md blockquote{ margin: var(--b-2) 0; padding-left: 12px; box-shadow: inset 2px 0 0 var(--cizgi-guclu); color: var(--m-2); }
.ek-li{ display: grid; grid-template-columns: 18px minmax(0, 1fr); margin: 4px 0; }
.ek-li-no{ color: var(--m-3); font-family: var(--mono); font-size: 12.5px; padding-top: 2px; }
.md-tablo{ margin: var(--b-2) 0; overflow-x: auto; }
.md-tablo table{ border-collapse: collapse; font-size: 13px; line-height: 1.4; min-width: 100%; }
.md-tablo th, .md-tablo td{ padding: 6px 10px 6px 0; border-bottom: 1px solid var(--cizgi-ince); text-align: left; vertical-align: top; }
.md-tablo th{ font: var(--a-orta) var(--t-kicker)/1.2 var(--mono); letter-spacing: var(--s-kicker); text-transform: uppercase; color: var(--m-3); }
.md-tablo td{ color: var(--m-2); }
/* .ek-md'nin overflow-wrap:anywhere'i hücrelere geçmesin: aksi hâlde min-content 1 harfe iner, sözcükler harf harf
   kırılır ve yatay kaydırma hiç devreye girmez. Tablo içerik genişliğinde kalır, sığmazsa .md-tablo yatay kayar. */
.md-tablo th, .md-tablo td{ overflow-wrap: normal; word-break: normal; }
.md-tablo th{ white-space: nowrap; }
/* Depo */
.ed-oge{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; width: 100%; min-height: 48px;
         padding: 0 4px; border: 0; border-radius: var(--r-1); background: none; color: var(--m-1); text-align: left; font: inherit; }
.ed-oge:active{ background: var(--vurgu-hover); }
/* Ad = kök + uzantı: kısalma kökte olur, uzantı hep görünür (aynı adlı .png / .html eşleri ayırt edilir) */
.ed-oge .ad{ display: flex; min-width: 0; white-space: nowrap; font-size: var(--t-govde); }
.ed-oge .ad .kok{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-oge .ad .uz{ flex: none; color: var(--m-2); }
.ed-oge .z{ font: var(--a-normal) var(--t-meta)/1 var(--mono); color: var(--m-3); white-space: nowrap; }
/* Alt klasördeki dosya: adın altında soluk klasör satırı (aynı adlı dosyalar ayırt edilsin) */
.ed-oge.klasorlu{ row-gap: 2px; padding-block: 6px; }
.ed-oge .klasor{ grid-column: 2 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                 font-size: 12px; line-height: 1.3; color: var(--m-3); }
.ed-durum > span:last-child{ min-width: 0; overflow-wrap: anywhere; }
/* Depo durum halkası (em.d-<durum>) */
.isaret-d{ width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; }
.isaret-d::before, .isaret-d::after{ grid-area: 1 / 1; }
.isaret-d::before{ content: ""; width: var(--halka); height: var(--halka); border-radius: var(--r-tam); border: 1.5px solid var(--m-4); }
.isaret-d.d-inceleniyor::before{ border: 1.5px dashed var(--altin); }
.isaret-d.d-yeniden::before{ border-color: var(--uyari); border-top-color: transparent; }
.isaret-d.d-onaylandi::before{ border-color: var(--tamam); background: var(--tamam); }
.isaret-d.d-onaylandi::after{ content: ""; width: 7px; height: 4px; margin-top: -2px; border-left: 1.5px solid var(--m-ters);
                              border-bottom: 1.5px solid var(--m-ters); transform: rotate(-45deg); }
.isaret-d.d-silindi::before{ border-color: var(--m-4); }
.isaret-d.d-rapor::before{ border-color: var(--tamam); }     /* Kreatif / Denetim raporu: karar beklemez */
/* Karar bekleyen (kapıdan geçmiş son medya / sabah raporu): altın halka + nokta ve tek satırda çip; bilgi notu sönük gri,
   7 günden eski arşiv çok sönük (masaüstü akis.css ile aynı anlam) */
.isaret-d.d-karar_bekleyen::before{ border-color: var(--altin); background: radial-gradient(circle, var(--altin) 0 2px, transparent 2.5px); }
.isaret-d.d-bilgi::before{ border-color: var(--m-4); }
.isaret-d.d-arsiv::before{ border-color: var(--cizgi-guclu); }
.ed-oge[data-durum="karar_bekleyen"]{ grid-template-columns: 20px minmax(0, 1fr) auto auto; }
.ed-cip{ height: 20px; padding: 0 7px; border-radius: var(--r-1); background: var(--altin-zemin); color: var(--altin);
         font: var(--a-orta) 11px/20px var(--yazi); white-space: nowrap; }
.ed-oge[data-durum="bilgi"] .ad{ color: var(--m-2); }
.ed-oge[data-durum="arsiv"] .ad, .ed-oge[data-durum="arsiv"] .ad .uz{ color: var(--m-3); }
.isaret-d.d-eski_surum::before{ border-color: var(--cizgi-guclu); }
.ed-oge[data-durum="eski_surum"] .ad, .ed-oge[data-durum="eski_surum"] .ad .uz{ color: var(--m-3); }
.d-inceleniyor{ color: var(--altin); } .d-onaylandi{ color: var(--tamam); } .d-yeniden{ color: var(--uyari); } .d-silindi{ color: var(--kritik); }
.d-rapor{ color: var(--m-3); }
.bolum-sec{ position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 58%; height: 32px; margin-right: 8px;
            padding: 0 8px 0 10px; border: 0; border-radius: var(--r-2); background: var(--kat-2); color: var(--m-1);
            font: var(--a-normal) 13px/1 var(--yazi); }
.bolum-sec::after{ content: ""; position: absolute; inset: -6px -4px; }
.bolum-sec > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolum-sec > svg{ width: 12px; height: 12px; color: var(--m-3); }
.ed-durum{ display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; font-size: 13px; color: var(--m-2); }
.ed-durum .isaret-d{ flex: none; }
.ed-icerik{ display: flex; justify-content: center; padding-top: var(--b-2); }
.ed-icerik video, .ed-icerik img{ max-width: 100%; max-height: 62vh; border-radius: 12px; background: var(--zemin); }
/* HTML önizleme: sarmalayıcı köşeyi kırpar; ölçekli tasarımda iframe tasarım ölçüsünde, scale() ile küçülür (ekip.js depoHtmlOlcekle) */
.ed-html{ flex: none; width: 100%; overflow: hidden; border-radius: 12px; background: var(--m-1); }
.ed-html iframe{ display: block; width: 100%; height: 62vh; border: 0; background: var(--m-1); }
.ed-html.olcekli iframe{ max-width: none; transform-origin: 0 0; }
.ed-icerik > .ek-md{ width: 100%; }
.ed-icerik > .bos{ width: 100%; }
/* Kilitli sektör: yalnız ad + kilit */
.kilit-ikon{ display: grid; place-items: center; width: 20px; color: var(--m-3); }
.kilit-ikon svg{ width: 16px; height: 16px; }
.kilit-not{ display: flex; gap: 10px; align-items: flex-start; padding: var(--b-5) 4px; color: var(--m-2); font-size: 14px; line-height: var(--sy-okuma); }
.kilit-not svg{ width: 18px; height: 18px; margin-top: 2px; color: var(--m-3); }

/* ── Arama Merkezi ────────────────────────────────────────────────── */
#v-arama{ padding-top: 0; }
.ar-bas{ position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--b-2); height: 52px;
         margin: 0 calc(-1 * var(--kenar-pay)) var(--b-2); padding: 0 var(--kenar-pay) 0 0; background: var(--zemin);
         border-bottom: 1px solid var(--cizgi-ince); }
.ar-bas .geri{ position: relative; flex: none; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 6px;
               border: 0; background: none; color: var(--m-2); font: var(--a-normal) 13px/1 var(--yazi); }
.ar-bas .geri svg{ width: 18px; height: 18px; }
.ar-bas h2{ flex: none; margin: 0; font: var(--a-normal) 17px/1.2 var(--baslik); color: var(--m-1); white-space: nowrap; }
.ar-durum{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--m-3); }
.ar-durum > span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satir-a{ display: flex; justify-content: space-between; align-items: center; gap: var(--b-3); min-height: 36px; padding: 0 4px; font-size: 14px; }
.satir-a span{ color: var(--m-3); }
.satir-a b{ font-weight: var(--a-normal); color: var(--m-1); text-align: right; }
.satir-a b.y{ color: var(--tamam); } .satir-a b.s{ color: var(--uyari); } .satir-a b.k{ color: var(--kritik); }
.ar-eylem{ display: flex; flex-direction: column; gap: var(--b-2); margin: var(--b-3) 0 var(--b-1); }
.ses-satir{ display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 6px; align-items: center; min-height: 48px; padding: 0 4px 0 0;
            border-radius: var(--r-1); }
.ses-satir.kilitli{ opacity: .55; }
.ses-satir .dinle{ position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--m-2); display: grid; place-items: center; }
.ses-satir .dinle::before{ content: ""; grid-area: 1 / 1; width: 32px; height: 32px; border-radius: var(--r-tam); background: var(--kat-2); }
.ses-satir .dinle svg{ grid-area: 1 / 1; position: relative; width: 14px; height: 14px; }
.ses-satir .dinle.caliyor{ color: var(--canli); }
.ses-satir .bilgi{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-govde); }
.ses-satir .bilgi span{ color: var(--m-3); font-size: var(--t-meta); }
.ses-satir .secili-yazi{ display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; font-size: 12.5px; color: var(--m-1); }
.ses-satir .secili-yazi svg{ width: 14px; height: 14px; color: var(--tamam); }
.ses-satir.secili .bilgi{ font-weight: var(--a-orta); }
.gorusme{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 44px; padding: 0 4px;
          border-radius: var(--r-1); cursor: pointer; }
.gorusme:active{ background: var(--vurgu-hover); }
.gorusme .g-isaret{ display: grid; place-items: center; }
.gorusme .g-baslik{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-govde); }
.gorusme .g-baslik em{ font-style: normal; color: var(--m-3); font-size: var(--t-meta); }
.gorusme .g-z{ font: var(--a-normal) var(--t-meta)/1 var(--mono); color: var(--m-3); white-space: nowrap; }
details.metin{ margin-top: var(--b-2); }
details.metin > summary{ list-style: none; display: flex; align-items: center; gap: var(--b-2); min-height: 44px; padding: 0 4px; cursor: pointer; color: var(--m-3); }
details.metin > summary::-webkit-details-marker{ display: none; }
details.metin > summary::after{ content: ""; order: 1; flex: 1; height: 1px; background: var(--cizgi-ince); }
details.metin > summary svg{ order: 2; width: 12px; height: 12px; transition: transform var(--h-2) var(--egri); }
details.metin[open] > summary svg{ transform: rotate(180deg); }
.etiket-b{ display: block; margin: var(--b-3) 4px 6px; font-size: 12.5px; color: var(--m-3); }
.veriler{ margin: var(--b-2) 0; }
.veri-satir{ display: flex; gap: var(--b-3); justify-content: space-between; align-items: baseline; min-height: 32px; padding: 6px 4px; font-size: 14px; border-bottom: 1px solid var(--cizgi-ince); }
.veri-satir span{ flex: none; color: var(--m-3); }
.veri-satir b{ font-weight: var(--a-normal); color: var(--m-1); text-align: right; overflow-wrap: anywhere; }
.balon{ max-width: 86%; margin: var(--b-3) 0; font-size: 14.5px; line-height: 1.5; color: var(--m-2); }
.balon small{ display: block; margin-bottom: 4px; }
.balon.asistan{ margin-right: auto; }
.balon.musteri{ margin-left: auto; padding: 9px 12px; border-radius: 12px; background: var(--kat-2); color: var(--m-1); }

/* ── B13 [T] diyalog (alttan) ve B14 [T] toast (alttan) ───────────── */
.diyalog-kat{ position: fixed; inset: 0; z-index: var(--z-diyalog); background: var(--perde);
              -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
              display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + var(--guvenli-alt)); }
.diyalog{ width: 100%; max-width: var(--pencere-dar); max-height: 80vh; overflow-y: auto; padding: var(--b-5); border-radius: var(--r-3);
          background: var(--kat); box-shadow: var(--g-2); animation: yuksel var(--h-3) var(--egri); }
.diyalog h4{ margin: 0; font: var(--a-normal) var(--t-baslik)/var(--sy-baslik) var(--baslik); color: var(--m-1); }
.diyalog p{ margin: var(--b-3) 0 0; color: var(--m-2); font-size: var(--t-okuma); line-height: var(--sy-okuma); white-space: pre-line; overflow-wrap: anywhere; }
.diyalog .serit{ margin: var(--b-4) 0 0; }
/* Ret nedeni (app.js retNedeniSor): masaüstüyle aynı çipler (çoklu seçim) + isteğe bağlı kısa not */
.ret-cipler{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--b-4); }
.ret-cip{ position: relative; height: 30px; padding: 0 11px; border: 1px solid var(--cizgi-guclu); border-radius: var(--r-tam);
          background: none; color: var(--m-2); font: var(--a-normal) 13px/1 var(--yazi); transition: background var(--h-1), color var(--h-1); }
.ret-cip::after{ content: ""; position: absolute; inset: -7px -3px; }
.ret-cip[aria-pressed="true"]{ background: var(--kritik-zemin); border-color: var(--kritik); color: var(--m-1); }
.diyalog .ret-not{ margin-top: var(--b-3); }
.diyalog .eylemler{ display: flex; justify-content: flex-end; gap: var(--b-2); margin-top: var(--b-5); }
.bildirim{ position: fixed; left: var(--kenar-pay); right: var(--kenar-pay); z-index: var(--z-bildirim);
           bottom: calc(var(--nav-h) + var(--yazma-h) + 12px + var(--guvenli-alt));
           display: flex; flex-direction: column; gap: var(--b-2); pointer-events: none; }
body:has(> .katman:not([hidden])) .bildirim{ bottom: calc(16px + var(--guvenli-alt)); }
body:has(> .katman:not([hidden]) .sayfa-alt:not(:empty)) .bildirim{ bottom: calc(72px + var(--guvenli-alt)); }
/* Diyalog ya da alt liste açıkken toast üste çıkar: para/yayın şeridini ve Vazgeç/Onayla'yı örtmez.
   #bildirim (id) yukarıdaki sınıf seçicilerini her durumda yener. */
body:has(> .diyalog-kat, > .alt-kat) #bildirim{ top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
body:has(> .diyalog-kat, > .alt-kat) #bildirim .b{ animation-name: toast-ust; }
/* "Yeniden yap" notu açıkken alt çubuk ~200 px: toast not alanının üstüne binmesin, üste çıkar */
body:has(> .katman:not([hidden]) .sayfa-alt.not-modu) #bildirim{ top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
body:has(> .katman:not([hidden]) .sayfa-alt.not-modu) #bildirim .b{ animation-name: toast-ust; }
@keyframes toast-ust{ from{ opacity: 0; transform: translateY(-6px); } }
.bildirim .b{ pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
              border-radius: var(--r-2); background: var(--kat); box-shadow: var(--g-1); color: var(--m-1);
              font: var(--a-orta) 13px/1.35 var(--yazi); animation: toast-gir var(--h-2) var(--egri); }
.bildirim .b > i{ flex: none; width: 6px; height: 6px; border-radius: var(--r-tam); background: var(--m-2); }
.bildirim .b.basari > i{ background: var(--tamam); }
.bildirim .b.hata > i{ background: var(--kritik); }
.bildirim .b.calisiyor > i{ width: 12px; height: 12px; background: none; border: 1.5px solid var(--cizgi-guclu); border-top-color: var(--canli);
                            animation: don var(--h-don) linear infinite; }
.bildirim .b .bm{ flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Kesilen toast'a dokununca tamamı açılır (bildir(): .genis); çok uzunsa kendi içinde kayar */
.bildirim .b.genis .bm{ display: block; -webkit-line-clamp: unset; max-height: 40vh; overflow-y: auto; }
.bildirim .b .bm span{ font-weight: var(--a-normal); font-size: 12.5px; color: var(--m-3); }
.bildirim .b .kac{ flex: none; font: var(--a-normal) 12px/1 var(--mono); color: var(--m-3); }
.bildirim .b .kac:empty{ display: none; }
.bildirim .b.cikis{ opacity: 0; transform: translateY(6px); transition: opacity 160ms var(--egri-cik), transform 160ms var(--egri-cik); }
@keyframes toast-gir{ from{ opacity: 0; transform: translateY(6px); } }

/* ── Anahtar ekranı (herkese açık mod) ────────────────────────────── */
#key-screen{ position: fixed; inset: 0; z-index: var(--z-acilis); background: var(--zemin); display: flex; align-items: center; justify-content: center; padding: 20px; }
.key-box{ width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--b-3); }
.key-title{ display: flex; align-items: center; gap: 10px; font: var(--a-orta) 14px/1 var(--yazi); letter-spacing: var(--s-marka); color: var(--m-1); }
.key-title img{ width: 22px; height: 22px; }
.key-sub{ margin: var(--b-2) 0 var(--b-2); font-size: var(--t-okuma); line-height: var(--sy-okuma); color: var(--m-2); }
.key-etiket{ font-size: 12.5px; color: var(--m-3); }
.key-box .btn{ width: 100%; }
.key-link{ align-self: flex-start; color: var(--m-2); }
.key-note{ display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--m-3); }
.key-note svg{ width: 16px; height: 16px; margin-top: 1px; }

/* ── Geniş ekran ve azaltılmış hareket ────────────────────────────── */
@media (min-width: 720px){
  .gorunum{ padding-left: max(var(--kenar-pay), calc(50% - 340px)); padding-right: max(var(--kenar-pay), calc(50% - 340px)); }
  .alt-cubuk, .ek-form{ padding-left: max(var(--kenar-pay), calc(50% - 340px)); padding-right: max(var(--kenar-pay), calc(50% - 340px)); }
  .sayfa, .alt-liste{ max-width: 760px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce){
  .gorunum.aktif, .sayfa, .diyalog, .alt-liste, .bildirim .b, .iskelet::after, body:has(#tap-start:not(.hidden)) #btn-mic{ animation: none; }
}
/* ── Onay önizlemesi (masaüstündeki gibi): açılan onay satırında görsel/video, paylaşım metni, video planı ── */
.is .aciklama .oniz{ display: block; margin: 2px 0 10px; white-space: normal; color: var(--m-2); }
.oniz-bos{ padding: 4px 0; color: var(--m-3); }
.oniz-bos.hata{ color: var(--kritik); }
.oniz-not{ margin: 0 0 8px; color: var(--m-1); }
.oniz-not.plan{ color: var(--altin); }
.oniz-medya{ display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.oniz-medya img, .oniz-medya video{ display: block; flex: none; max-width: 100%; max-height: 52vh; border-radius: 10px;
  background: #000; scroll-snap-align: start; }
.oniz.buyuk .oniz-medya img{ max-height: 80vh; }
.oniz-bilgi{ display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 4px; font-size: 12.5px; color: var(--m-1); }
.oniz-bilgi i{ margin-right: 5px; font-style: normal; color: var(--m-3); }
.oniz .kicker{ display: block; margin: 10px 0 4px; }
.oniz-metin{ margin: 0; white-space: pre-line; color: var(--m-1); }
.oniz-sahne{ display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.oniz-sahne li{ display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: start;
  padding: 6px 8px; border-radius: 8px; background: var(--kat-2); }
.oniz-sahne .sh-ad{ font: var(--a-orta) 12px/1.6 var(--mono); color: var(--altin); }
.oniz-sahne .sh-ic{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oniz-sahne .sh-ic b{ font-weight: var(--a-orta); color: var(--m-1); }
.oniz-sahne .sh-ic b.soluk{ color: var(--m-3); }
.oniz-sahne .sh-ses{ font-style: italic; color: var(--m-2); }
.oniz-sahne .sh-gor{ font-size: 12px; color: var(--m-3); }
.oniz-sahne .sh-kare{ display: flex; gap: 4px; }
.oniz-sahne .sh-kare img{ display: block; height: 48px; width: auto; max-width: 72px; object-fit: cover; border-radius: 4px; background: #000; }
.oniz.buyuk .oniz-sahne .sh-kare img{ max-width: none; }
.oniz-kirik{ padding: 10px 12px; border-radius: 8px; background: var(--kat-2); color: var(--m-3); font-size: 12.5px; }
.oniz.buyuk .oniz-sahne .sh-kare img{ height: 160px; }
.oniz-alt{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.oniz-durum{ color: var(--m-3); }
/* Depo / teslim belgesinde yolu geçen görsel/video: adres yerine kendisi */
.ek-md .md-medya{ margin: 6px 0 12px; }
.ek-md .md-bag{ text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.ek-md .md-hedef{ font-size: .85em; opacity: .7; word-break: break-all; }
.ek-md .md-medya img, .ek-md .md-medya video{ display: block; max-width: 100%; max-height: 60vh; border-radius: 10px; background: #000; }