/* ÜRETİLMİŞ DOSYA — elle düzenlemeyin. Kaynak: velvet-shell.css · üretici: scripts/build-ortak-css.py
   Kabuk ile pazarlama/giriş sayfalarının ortak katmanı: tokenlar, on dört tema, yazı tipi, buton sistemi.
   docs/spec-pazarlama-dashboard-dili.md */


/* ---- Tokenlar (varsayılan: dark) ---- */
:root {
  /* ---- Velvet kendi paleti ----
     Renkler artık Studio iframe'inden okunmuyor. Sebebi: ürünün kimliği motorun temasına bağlı kalmasın
     ve tema değişince bizim ekranlarımız bozulmasın. Studio sekmesi kendi görünümünde kalır (ayrı belge).
     Zemin nötr-soğuk bir gri dizisi; her kademe bir öncekinden belirgin ayrılsın diye adımlar geniş. */
  --bg: #0f1012;          /* sayfa zemini */
  --bg-1: #17191c;        /* kart ve panel */
  --bg-2: #1f2226;        /* vurgulanan satır, hover */
  --bg-3: #272b30;        /* girdi alanı, seçili */
  --line: #2a2e33;        /* ayırıcı */
  --line-2: #3a3f46;      /* kart kenarı, odak */
  --fg: #f2f4f6;          /* ana metin */
  --fg-dim: #b3b9c0;      /* ikincil metin */
  --fg-mute: #7d848c;     /* üçüncül, etiket */
  --input: #14161a;

  /* Vurgu: markanın soğuk mavisi. Yalnız birincil eylem ve seçili durum için; bilgi taşımaz. */
  --accent: #3d8bfd; --accent-hover: #5b9ffe; --accent-soft: #16223a;

  /* ---- Durum dili ----
     Dört durum, her biri bir metin rengi ve bir yumuşak zemin. Uyarılar bu ikiliyle çizilir; ekranda
     kırmızı metin, gri chip ve soluk açıklama gibi dört ayrı dil kalmasın. */
  --ok: #4ade80;       --ok-soft: #12251a;
  --warn: #f0b429;     --warn-soft: #2a2011;
  --danger: #f4676b;   --danger-soft: #2d1417;
  --info: #7aa2f7;     --info-soft: #16203a;

  /* ---- Tipografi ölçeği ----
     Altı kademe, her biri bir öncekinin belirgin üstünde. Öncesinde her şey 12–15 arasındaydı, bu yüzden
     hiyerarşi okunmuyordu. */
  --t-xs: 11.5px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 26px;
  --lh-tight: 1.25; --lh: 1.55;

  /* ---- Boşluk skalası ---- dikey ritim bu değerlerden çıkar, gelişigüzel piksel yok */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- Tema motoru (docs/spec-tema-motoru.md) ----
     Aşağıdakiler daha önce 84 yerde doğrudan yazılıydı; tokena alındılar ki tema değişince
     gölge, perde ve durum kenarları da değişsin. Değerler BUGÜNKÜYLE AYNI: bu adım bir
     yeniden tasarım değil, sızıntının kapatılması. */

  /* Vurgu yüzeyinin üstündeki yazı. İki tane olmasının sebebi bugünkü tasarımda iki ayrı
     kullanım olması: birincil düğmede koyu yazı, yuvarlak ikon düğmesi/rozette açık yazı. */
  --on-accent: #06101f;
  --on-accent-alt: #ffffff;

  /* Perde ve gölgenin TABANI bir RGB üçlüsü; opaklık kullanım yerinde kalır, çünkü aynı
     temada farklı yoğunluklar var (.35 kutu gölgesi, .74 inceleme perdesi). */
  --shadow-rgb: 0 0 0;
  --scrim: rgb(var(--shadow-rgb) / .5);
  --scrim-strong: rgb(var(--shadow-rgb) / .74);
  --shadow-1: 0 6px 20px rgb(var(--shadow-rgb) / .35);
  --shadow-2: 0 10px 28px rgb(var(--shadow-rgb) / .45);
  --shadow-3: 0 18px 50px rgb(var(--shadow-rgb) / .5);

  /* Kullanıcının görseli/videosu: arkasındaki mat zemin ve üstündeki rozetler. Görüntüye
     filtre uygulanmaz; tema yalnız etrafını boyar. */
  --media-bg: #000000;
  --media-bg-2: #151713;       /* model çıktısı kutusu */
  --media-bg-duvar: #0a0a0a;   /* duvar simülatörünün sahnesi: ölçüm yüzeyi, temayla değişmez */
  --on-media: #ffffff;
  /* Görselin ÜSTÜNDEKİ rozetler temadan BAĞIMSIZDIR: altlarında kullanıcının karesi var,
     aydınlık temada beyaz rozet kareyi okunmaz yapardı. Yine de token, çünkü ekranda
     serbest renk kalmamalı — tema bloklarında yeniden tanımlanmazlar. */
  --on-media-bg: rgb(0 0 0 / .55);
  --on-media-bg-soft: rgb(0 0 0 / .35);
  --on-media-bg-2: rgb(0 0 0 / .6);
  --on-media-bg-3: rgb(0 0 0 / .85);
  --on-media-bg-4: rgb(0 0 0 / .69);   /* çıktı künyesi şeridi */
  --on-media-shadow: 0 2px 8px rgb(0 0 0 / .5);
  /* Medyanın üstündeki metin ve İKONLARIN rengi de aynı aileden gelir. Tema tokenları (--fg-mute,
     --ok, --warn, --info, --danger) aydınlık temada KOYULAŞIR ve koyu perdenin üstünde kaybolur;
     bu beş token perdenin üstü için seçildi ve temayla değişmez. Değerler koyu temanın kendi
     hâlleridir: perde her temada koyu olduğu için orada zaten ölçülüydüler. */
  --on-media-dim: #d9dde2;
  --on-media-ok: #4ade80; --on-media-warn: #f0b429; --on-media-info: #7aa2f7;
  --on-media-danger: #f4676b;
  --present-bg: #05060a;
  /* Sağlayıcı logoları beyaz plakada durur (logolar öyle tasarlanmış); tema değiştirmez. */
  --logo-plate: #ffffff; --logo-plate-line: #deded8; --logo-fallback: #333333;
  --danger-veil: rgb(230 102 170 / .08);
  --edge-hi: rgb(255 255 255 / .055); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(12 13 15 / .46); --dock-bg-solid: rgb(12 13 15 / .8);

  /* Durum kenarlıkları ve simülasyon dili */
  --ok-line: #2f6b3f; --warn-line: #6a5a2a; --danger-line: #7a3a55;
  --sim: #e6c46a; --sim-line: #6a5a2a;

  /* Kategorik renkler: iz türleri ve senaryo durumu. Bilgi taşırlar, vurgudan ayrıdır. */
  --hue-person: #7aa2f7; --hue-place: #9ece6a; --hue-time: #e0af68; --hue-thing: #bb9af7;
  --hue-idle: #8b8b93; --hue-off: #565663;

  /* Yüzey üstü ince perdeler */
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(120 160 255 / .18);
  --focus: var(--accent);
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Arama eşleşmesinin işaretlenmesi (metin görünümü) */
  --hit: #4a3a12; --on-hit: #ffe9a8;

  /* Tema seçicisinin önizleme örnekleri (Ayarlar › Görünüm). Her tema için zemin·yüzey·vurgu.
     Aktif temayla DEĞİŞMEZ: seçici bütün temaları aynı anda gösterir. Tema bloğu değişirse
     buradaki üçlü de güncellenmeli. */
  --prev-dark-1: #0f1012;   --prev-dark-2: #1f2226;   --prev-dark-3: #3d8bfd;
  --prev-nordic-1: #2e3440; --prev-nordic-2: #3b4252; --prev-nordic-3: #88c0d0;
  --prev-light-1: #f6f7f9;  --prev-light-2: #e4e7ec;  --prev-light-3: #1a63d6;
  --prev-matrix-1: #000000; --prev-matrix-2: #0a170c; --prev-matrix-3: #00ff66;
  --prev-midnight-1: #0b1220; --prev-midnight-2: #1a2540; --prev-midnight-3: #4cc9f0;
  --prev-mocha-1: #1a1412;    --prev-mocha-2: #2e231e;    --prev-mocha-3: #e08a55;
  --prev-forest-1: #0e1512;   --prev-forest-2: #1c2822;   --prev-forest-3: #4fc1a6;
  --prev-plum-1: #14101c;     --prev-plum-2: #261e35;     --prev-plum-3: #c084fc;
  --prev-contrast-1: #000000; --prev-contrast-2: #141414; --prev-contrast-3: #ffd400;
  --prev-sepia-1: #f4ecdf;    --prev-sepia-2: #e9dfce;    --prev-sepia-3: #9c5426;
  --prev-bordo-1: #1a1014;    --prev-bordo-2: #2e1b21;    --prev-bordo-3: #e0607e;
  --prev-puslu-1: #1c1f24;    --prev-puslu-2: #2a2f36;    --prev-puslu-3: #6ea8fe;
  --prev-claude-1: #f0eee6;   --prev-claude-2: #e8e5da;   --prev-claude-3: #b85636;
  --prev-buz-1: #eef3f8;      --prev-buz-2: #e2eaf2;      --prev-buz-3: #0b6bb5;

  --sidebar-w: 244px; --sidebar-w-collapsed: 60px; --dock-max: 1040px;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  /* Hareket tokenları: hover 120–160ms, panel/modal 180–240ms, zarif ve hızlı */
  --dur-hover: 160ms; --dur-panel: 210ms; --ease: cubic-bezier(.2, .0, .0, 1);
  /* HOVER NİYETİ (uygulamalar menüsü, 20 Eylül). Bir menü fare üstünden GEÇERKEN açılmamalı;
     düğmeden menüye inerken de kapanmamalı. Açılma gecikmesi niyeti ölçer, kapanma gecikmesi
     yolculuğa süre tanır. Token, çünkü İKİ yüzey okuyor: ana kabuk (velvet-shell.css/.js) ve
     uygulama sayfaları (velvet-uygulama.css, ortak katman üstünden) — ve kabuğun JS'i
     `aria-expanded`ı aynı değerlerle günceller, ikinci bir sayı YAZMAZ. */
  --menu-niyet-ac: 140ms; --menu-niyet-kapat: 280ms;
  color-scheme: dark;
}

:root {
  /* Ali, 16 Eylül: "fonları şeffaf olacak". Katmanın camı arkadaki sayfayı SEZDİRİR; %96
     saydamlık cam değil, boyalı bir yüzeydi. Okunurluğu asıl veren bulanıklık, bu yüzden
     saydamlığı artırıp bulanıklığı koruyoruz. */
  --glass: color-mix(in srgb, var(--bg-2) 82%, transparent);
  --glass-strong: color-mix(in srgb, var(--bg-2) 88%, transparent);
  --glass-blur: saturate(165%) blur(20px);
  --glass-edge: inset 0 1px 0 var(--edge-hi);
}

/* ---- Temalar ---- */
:root[data-theme="nordic"] {
  --bg: #2e3440; --bg-1: #353c4a; --bg-2: #3b4252; --bg-3: #434c5e; --input: #2b313c;
  --line: #3b4252; --line-2: #4c566a;
  /* #9aa5b6, --bg-1 üstünde 4,45:1 idi — küçük metin eşiğinin (4,5) hemen altı; on bir ekranda
     155 sönük metin öğesinin tek sebebi bu tokendı. #9ca7b8 ile 4,55. ÖLÇÜLDÜ, zemin zemin:
     --bg 5,01→5,13 · --bg-1 4,45→4,55 · --bg-2 4,04→4,14 · --bg-3 3,46→3,55 · --input 5,25→5,37.
     Yani --bg-2 ve --bg-3 hâlâ eşiğin ALTINDA ve bu token bunu tek başına çözemez: orada doğru
     cevap --fg-dim'dir (rozetin zemininde işçilik turu tam bunu yaptı). Yön yalnız artırıyor. */
  --fg: #eceff4; --fg-dim: #d8dee9; --fg-mute: #9ca7b8;
  --accent: #88c0d0; --accent-hover: #8fbcbb; --accent-soft: #2f3d47;
  --on-accent: #1b2530; --on-accent-alt: #1b2530;
  --ok: #a3be8c;   --ok-soft: #2c3a2c;   --ok-line: #4f6b47;
  --warn: #ebcb8b; --warn-soft: #3b3526; --warn-line: #6f6242;
  /* #d07b84 kendi yumuşak zemininde 4,42:1 idi — küçük metin eşiğinin (4,5) hemen altı. Üretim
     kartındaki "RED" rozeti ölçülünce çıktı; kusur rozette değil tokenda, `.msg.err` de dahil
     nordic'te --danger'ı zemininde taşıyan her yerde. Yön yalnız kontrastı artırıyor: 5,04:1. */
  --danger: #d78891; --danger-soft: #3a2a2e; --danger-line: #7b4a51;
  --info: #81a1c1; --info-soft: #2b3644;
  --sim: #ebcb8b; --sim-line: #6f6242;
  --hue-person: #81a1c1; --hue-place: #a3be8c; --hue-time: #ebcb8b;
  --hue-thing: #b48ead; --hue-idle: #8892a4; --hue-off: #5b6474;
  --shadow-rgb: 12 15 22;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(136 192 208 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .06);
  --dock-bg: rgb(36 42 52 / .5); --dock-bg-solid: rgb(36 42 52 / .82);
  --present-bg: #262b35;
  --danger-veil: rgb(208 123 132 / .1);
  --hit: #46402a; --on-hit: #ebcb8b;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f7f9; --bg-1: #ffffff; --bg-2: #eef0f4; --bg-3: #e4e7ec; --input: #ffffff;
  --line: #e4e7ec; --line-2: #bcc4cf;
  /* --fg-mute #6b7480 panel zemininde 4,42:1 idi: aydınlık temada küçük ikincil metnin (kart alt
     satırı, .meta, .empty-note) tamamı AA'nın altında kalıyordu. #656e7a → 4,86:1. Gözle neredeyse
     ayırt edilmez, ölçümde eşiği geçer. */
  --fg: #14171c; --fg-dim: #454d59; --fg-mute: #656e7a;
  --accent: #1a63d6; --accent-hover: #1558c2; --accent-soft: #e4edfc;
  --on-accent: #ffffff; --on-accent-alt: #ffffff;
  --ok: #137a3c;   --ok-soft: #e3f4e9;   --ok-line: #9ed3b2;
  --warn: #8a5a00; --warn-soft: #fbf0d9; --warn-line: #ddbe7e;
  --danger: #c22a33; --danger-soft: #fbe6e7; --danger-line: #e2a3a7;
  --info: #1f5fd0; --info-soft: #e4edfc;
  --sim: #8a5a00; --sim-line: #ddbe7e;
  --hue-person: #2563c9; --hue-place: #2f7a43; --hue-time: #8a5a00;
  --hue-thing: #7a3fb0; --hue-idle: #79818d; --hue-off: #aeb5bf;
  --shadow-rgb: 15 23 42;
  /* Aydınlıkta perdeler koyu KALIR (modalin altı kararmalı) ama gölgeler zayıflar. */
  --scrim: rgb(15 23 42 / .38); --scrim-strong: rgb(15 23 42 / .55);
  --shadow-1: 0 6px 18px rgb(15 23 42 / .1);
  --shadow-2: 0 10px 26px rgb(15 23 42 / .13);
  --shadow-3: 0 18px 44px rgb(15 23 42 / .16);
  --veil: rgb(15 23 42 / .05); --veil-2: rgb(15 23 42 / .1);
  --flash: rgb(26 99 214 / .12);
  --edge-hi: rgb(255 255 255 / .9); --edge-hi-2: rgb(255 255 255 / .7); --edge-hi-3: rgb(255 255 255 / .9);
  --dock-bg: rgb(255 255 255 / .72); --dock-bg-solid: rgb(255 255 255 / .95);
  --present-bg: #0f1012;      /* sunum kipi aydınlıkta da karanlık: kareler öne çıksın */
  --danger-veil: rgb(194 42 51 / .08);
  --hit: #fff1b8; --on-hit: #3d2f00;
  color-scheme: light;
}
:root[data-theme="matrix"] {
  --bg: #000000; --bg-1: #060d07; --bg-2: #0a170c; --bg-3: #0f2312; --input: #040a05;
  --line: #123318; --line-2: #1d5528;
  --fg: #b9ffcb; --fg-dim: #6ee89a; --fg-mute: #3f9a60;
  --accent: #00ff66; --accent-hover: #6bff9f; --accent-soft: #06230f;
  --on-accent: #001a08; --on-accent-alt: #001a08;
  --ok: #00ff66;   --ok-soft: #06230f;   --ok-line: #1d7a3c;
  --warn: #ffd166; --warn-soft: #241d06; --warn-line: #7a6320;
  --danger: #ff5c6c; --danger-soft: #250a0e; --danger-line: #7a2630;
  --info: #6ee8ff; --info-soft: #05232b;
  --sim: #ffd166; --sim-line: #7a6320;
  --hue-person: #6ee8ff; --hue-place: #00ff66; --hue-time: #ffd166;
  --hue-thing: #c48bff; --hue-idle: #3f9a60; --hue-off: #1d5528;
  --shadow-rgb: 0 0 0;
  --veil: rgb(0 255 102 / .07); --veil-2: rgb(0 255 102 / .14);
  --flash: rgb(0 255 102 / .16);
  --edge-hi: rgb(0 255 102 / .1); --edge-hi-2: rgb(0 255 102 / .07); --edge-hi-3: rgb(0 255 102 / .12);
  --dock-bg: rgb(0 12 4 / .6); --dock-bg-solid: rgb(0 12 4 / .9);
  --present-bg: #000000;
  --danger-veil: rgb(255 92 108 / .1);
  --hit: #06340f; --on-hit: #b9ffcb;
  color-scheme: dark;
}
:root[data-theme="midnight"] {
  --bg: #0b1220; --bg-1: #121b2d; --bg-2: #1a2540; --bg-3: #22304f; --input: #0e1626;
  --line: #1e2a44; --line-2: #33436a;
  --fg: #e8eefc; --fg-dim: #b6c2dc; --fg-mute: #8593b0;
  --accent: #4cc9f0; --accent-hover: #7ad8f5; --accent-soft: #10283a;
  --on-accent: #04141d; --on-accent-alt: #04141d;
  --ok: #5bd68a;   --ok-soft: #0f2a1c;   --ok-line: #2f6b48;
  --warn: #f2c14e; --warn-soft: #2b2412; --warn-line: #6d5c2a;
  --danger: #ff7080; --danger-soft: #2e1420; --danger-line: #7c3a4c;
  --info: #7aa2f7; --info-soft: #16203a;
  --sim: #f2c14e; --sim-line: #6d5c2a;
  --hue-person: #7aa2f7; --hue-place: #5bd68a; --hue-time: #f2c14e;
  --hue-thing: #b89cf7; --hue-idle: #8593b0; --hue-off: #4a5670;
  --shadow-rgb: 4 8 18;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(76 201 240 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(10 17 30 / .5); --dock-bg-solid: rgb(10 17 30 / .84);
  --present-bg: #04080f;
  --danger-veil: rgb(255 112 128 / .1);
  --hit: #3f3a16; --on-hit: #ffe9a8;
  color-scheme: dark;
}
:root[data-theme="mocha"] {
  --bg: #1a1412; --bg-1: #241b18; --bg-2: #2e231e; --bg-3: #392c25; --input: #150f0e;
  --line: #33261f; --line-2: #4d3a2c;
  --fg: #f4ece4; --fg-dim: #d4c5b6; --fg-mute: #a08d7c;
  --accent: #e08a55; --accent-hover: #eda172; --accent-soft: #33200f;
  --on-accent: #1c0e05; --on-accent-alt: #1c0e05;
  --ok: #9cc879;   --ok-soft: #1e2614;   --ok-line: #4e6b3c;
  --warn: #e3b341; --warn-soft: #2a2211; --warn-line: #6a5a2a;
  --danger: #f07178; --danger-soft: #2d1417; --danger-line: #7a3a40;
  --info: #7fb3d5; --info-soft: #14232e;
  --sim: #e3b341; --sim-line: #6a5a2a;
  --hue-person: #7fb3d5; --hue-place: #9cc879; --hue-time: #e3b341;
  --hue-thing: #c99ae0; --hue-idle: #a08d7c; --hue-off: #5d4c40;
  --shadow-rgb: 18 10 6;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(224 138 85 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(21 15 13 / .5); --dock-bg-solid: rgb(21 15 13 / .84);
  --present-bg: #0d0908;
  --danger-veil: rgb(240 113 120 / .1);
  --hit: #4a3512; --on-hit: #ffe9a8;
  color-scheme: dark;
}
:root[data-theme="forest"] {
  --bg: #0e1512; --bg-1: #151e19; --bg-2: #1c2822; --bg-3: #24332b; --input: #0b110e;
  --line: #1f2c25; --line-2: #35493c;
  --fg: #e9f1ea; --fg-dim: #bdcdc1; --fg-mute: #86998b;
  --accent: #4fc1a6; --accent-hover: #74d3bd; --accent-soft: #0f2a26;
  --on-accent: #04150f; --on-accent-alt: #04150f;
  --ok: #9fd77a;   --ok-soft: #17240f;   --ok-line: #46682f;
  --warn: #e3b341; --warn-soft: #26200e; --warn-line: #665827;
  --danger: #ef7a7e; --danger-soft: #2a1416; --danger-line: #74383c;
  --info: #7fb0d8; --info-soft: #13212e;
  --sim: #e3b341; --sim-line: #665827;
  --hue-person: #7fb0d8; --hue-place: #9fd77a; --hue-time: #e3b341;
  --hue-thing: #b79ae0; --hue-idle: #86998b; --hue-off: #47594d;
  --shadow-rgb: 4 10 7;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(79 193 166 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(9 15 12 / .5); --dock-bg-solid: rgb(9 15 12 / .84);
  --present-bg: #060b08;
  --danger-veil: rgb(239 122 126 / .1);
  --hit: #3c3a14; --on-hit: #f2e9b0;
  color-scheme: dark;
}
:root[data-theme="plum"] {
  --bg: #14101c; --bg-1: #1d1729; --bg-2: #261e35; --bg-3: #312744; --input: #100c17;
  --line: #2a2138; --line-2: #413655;
  --fg: #f0ecf8; --fg-dim: #c7bedb; --fg-mute: #948aad;
  --accent: #c084fc; --accent-hover: #d3a6fd; --accent-soft: #2a1c3e;
  --on-accent: #14061f; --on-accent-alt: #14061f;
  --ok: #6ddc9b;   --ok-soft: #10261b;   --ok-line: #30684a;
  --warn: #eebb4d; --warn-soft: #2a2211; --warn-line: #6b5a29;
  --danger: #ff7591; --danger-soft: #2f1420; --danger-line: #7d3a4f;
  --info: #82a9f7; --info-soft: #171f3a;
  --sim: #eebb4d; --sim-line: #6b5a29;
  --hue-person: #82a9f7; --hue-place: #6ddc9b; --hue-time: #eebb4d;
  --hue-thing: #d8a0ff; --hue-idle: #948aad; --hue-off: #524766;
  --shadow-rgb: 10 6 18;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(192 132 252 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(16 12 23 / .5); --dock-bg-solid: rgb(16 12 23 / .84);
  --present-bg: #0a0710;
  --danger-veil: rgb(255 117 145 / .1);
  --hit: #453118; --on-hit: #ffe6a5;
  color-scheme: dark;
}
:root[data-theme="bordo"] {
  --bg: #1a1014; --bg-1: #241519; --bg-2: #2e1b21; --bg-3: #3a2229; --input: #150c10;
  --line: #2e1b21; --line-2: #4a2c35;
  --fg: #f5e9ec; --fg-dim: #d3bcc3; --fg-mute: #a08790;
  --accent: #e0607e; --accent-hover: #ea849b; --accent-soft: #3a1620;
  --on-accent: #1c0209; --on-accent-alt: #1c0209;
  --ok: #7fcf96;   --ok-soft: #10251a;   --ok-line: #336b47;
  --warn: #e8bd55; --warn-soft: #2b2210; --warn-line: #6d5a28;
  --danger: #ff8095; --danger-soft: #35141d; --danger-line: #86404f;
  --info: #8fb0e8; --info-soft: #161f33;
  --sim: #e8bd55; --sim-line: #6d5a28;
  --hue-person: #8fb0e8; --hue-place: #7fcf96; --hue-time: #e8bd55;
  --hue-thing: #c79ae0; --hue-idle: #a08790; --hue-off: #5c3f48;
  --shadow-rgb: 14 6 9;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(224 96 126 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(21 12 16 / .5); --dock-bg-solid: rgb(21 12 16 / .84);
  --present-bg: #0c0609;
  --danger-veil: rgb(255 128 149 / .1);
  --hit: #46351a; --on-hit: #ffe9a8;
  color-scheme: dark;
}
:root[data-theme="puslu"] {
  --bg: #1c1f24; --bg-1: #22262c; --bg-2: #2a2f36; --bg-3: #333942; --input: #191c21;
  --line: #2a2f36; --line-2: #3f4650;
  --fg: #e6e9ee; --fg-dim: #b9c0c9; --fg-mute: #8a939e;
  --accent: #6ea8fe; --accent-hover: #8dbcff; --accent-soft: #1b2a3f;
  --on-accent: #06101f; --on-accent-alt: #06101f;
  --ok: #5fd18a;   --ok-soft: #14271c;   --ok-line: #336b48;
  --warn: #e8bd55; --warn-soft: #2a2312; --warn-line: #6a5b2a;
  --danger: #f0757f; --danger-soft: #2d171b; --danger-line: #76393f;
  --info: #8ab4f8; --info-soft: #1a2436;
  --sim: #e8bd55; --sim-line: #6a5b2a;
  --hue-person: #8ab4f8; --hue-place: #5fd18a; --hue-time: #e8bd55;
  --hue-thing: #b79cf0; --hue-idle: #8a939e; --hue-off: #525a66;
  --shadow-rgb: 8 10 14;
  --veil: rgb(255 255 255 / .06); --veil-2: rgb(255 255 255 / .12);
  --flash: rgb(110 168 254 / .18);
  --edge-hi: rgb(255 255 255 / .05); --edge-hi-2: rgb(255 255 255 / .04); --edge-hi-3: rgb(255 255 255 / .07);
  --dock-bg: rgb(22 25 29 / .5); --dock-bg-solid: rgb(22 25 29 / .84);
  --present-bg: #0d0f12;
  --danger-veil: rgb(240 117 127 / .1);
  --hit: #3d3a18; --on-hit: #ffe9a8;
  color-scheme: dark;
}
:root[data-theme="contrast"] {
  --bg: #000000; --bg-1: #0a0a0a; --bg-2: #141414; --bg-3: #1f1f1f; --input: #000000;
  --line: #3a3a3a; --line-2: #6a6a6a;
  --fg: #ffffff; --fg-dim: #e6e6e6; --fg-mute: #b3b3b3;
  --accent: #ffd400; --accent-hover: #ffe34d; --accent-soft: #2b2400;
  --on-accent: #000000; --on-accent-alt: #000000;
  --ok: #3ef07a;   --ok-soft: #06210f;   --ok-line: #2f7a44;
  --warn: #ffb000; --warn-soft: #2b1e00; --warn-line: #7a5600;
  --danger: #ff6b6b; --danger-soft: #2b0d0d; --danger-line: #8a3a3a;
  --info: #6bc6ff; --info-soft: #06202b;
  --sim: #ffb000; --sim-line: #7a5600;
  --hue-person: #6bc6ff; --hue-place: #3ef07a; --hue-time: #ffb000;
  --hue-thing: #d59bff; --hue-idle: #b3b3b3; --hue-off: #6e6e6e;
  --shadow-rgb: 0 0 0;
  --veil: rgb(255 255 255 / .08); --veil-2: rgb(255 255 255 / .16);
  --flash: rgb(255 212 0 / .2);
  --edge-hi: rgb(255 255 255 / .12); --edge-hi-2: rgb(255 255 255 / .08); --edge-hi-3: rgb(255 255 255 / .16);
  --dock-bg: rgb(0 0 0 / .6); --dock-bg-solid: rgb(0 0 0 / .92);
  --present-bg: #000000;
  --danger-veil: rgb(255 107 107 / .12);
  --hit: #4a3f00; --on-hit: #ffffff;
  color-scheme: dark;
}
:root[data-theme="sepia"] {
  --bg: #f4ecdf; --bg-1: #fbf6ec; --bg-2: #e9dfce; --bg-3: #ded2bd; --input: #fffaf1;
  --line: #ded2bd; --line-2: #b3a289;
  --fg: #2b2218; --fg-dim: #4f4334; --fg-mute: #6b5e4d;
  --accent: #9c5426; --accent-hover: #86471f; --accent-soft: #f1e2d0;
  --on-accent: #ffffff; --on-accent-alt: #ffffff;
  --ok: #2f7a3f;   --ok-soft: #e6f1e0;   --ok-line: #a8c69c;
  --warn: #8a5a00; --warn-soft: #f6ecd6; --warn-line: #d5bc86;
  --danger: #b3322c; --danger-soft: #f7e3df; --danger-line: #dfa79f;
  --info: #2a5fa8; --info-soft: #e3ecf7;
  --sim: #8a5a00; --sim-line: #d5bc86;
  --hue-person: #2a5fa8; --hue-place: #2f7a3f; --hue-time: #8a5a00;
  --hue-thing: #7a3fb0; --hue-idle: #6b5e4d; --hue-off: #a99a83;
  --shadow-rgb: 61 47 30;
  /* Aydınlık'taki gibi: perdeler koyu kalır, gölgeler zayıflar. */
  --scrim: rgb(61 47 30 / .38); --scrim-strong: rgb(61 47 30 / .55);
  --shadow-1: 0 6px 18px rgb(61 47 30 / .1);
  --shadow-2: 0 10px 26px rgb(61 47 30 / .13);
  --shadow-3: 0 18px 44px rgb(61 47 30 / .16);
  --veil: rgb(61 47 30 / .05); --veil-2: rgb(61 47 30 / .1);
  --flash: rgb(156 84 38 / .12);
  --edge-hi: rgb(255 255 255 / .9); --edge-hi-2: rgb(255 255 255 / .7); --edge-hi-3: rgb(255 255 255 / .9);
  --dock-bg: rgb(255 250 241 / .72); --dock-bg-solid: rgb(255 250 241 / .95);
  --present-bg: #0f1012;      /* sunum kipi sepyada da karanlık: kareler öne çıksın */
  --danger-veil: rgb(179 50 44 / .08);
  --hit: #f6e2a8; --on-hit: #3d2f00;
  color-scheme: light;
}
:root[data-theme="claude"] {
  --bg: #f0eee6; --bg-1: #faf9f5; --bg-2: #e8e5da; --bg-3: #ddd9cb; --input: #ffffff;
  --line: #ddd9cb; --line-2: #bfb9a6;
  --fg: #1f1e1d; --fg-dim: #4a4741; --fg-mute: #6b665c;
  --accent: #b85636; --accent-hover: #a8492b; --accent-soft: #f5e5de;
  --on-accent: #ffffff; --on-accent-alt: #ffffff;
  --ok: #2f7a3f;   --ok-soft: #e6f1e0;   --ok-line: #a8c69c;
  --warn: #8a5a00; --warn-soft: #f6ecd6; --warn-line: #d5bc86;
  --danger: #b3322c; --danger-soft: #f7e3df; --danger-line: #dfa79f;
  --info: #2a5fa8; --info-soft: #e3ecf7;
  --sim: #8a5a00; --sim-line: #d5bc86;
  --hue-person: #2a5fa8; --hue-place: #2f7a3f; --hue-time: #8a5a00;
  --hue-thing: #7a3fb0; --hue-idle: #6b665c; --hue-off: #b3ac9a;
  --shadow-rgb: 40 35 25;
  --scrim: rgb(40 35 25 / .38); --scrim-strong: rgb(40 35 25 / .55);
  --shadow-1: 0 6px 18px rgb(40 35 25 / .1);
  --shadow-2: 0 10px 26px rgb(40 35 25 / .13);
  --shadow-3: 0 18px 44px rgb(40 35 25 / .16);
  --veil: rgb(40 35 25 / .05); --veil-2: rgb(40 35 25 / .1);
  --flash: rgb(184 86 54 / .12);
  --edge-hi: rgb(255 255 255 / .9); --edge-hi-2: rgb(255 255 255 / .7); --edge-hi-3: rgb(255 255 255 / .9);
  --dock-bg: rgb(250 249 245 / .72); --dock-bg-solid: rgb(250 249 245 / .95);
  --present-bg: #0f1012;
  --danger-veil: rgb(179 50 44 / .08);
  --hit: #f6e2a8; --on-hit: #3d2f00;
  color-scheme: light;
}
:root[data-theme="buz"] {
  --bg: #eef3f8; --bg-1: #ffffff; --bg-2: #e2eaf2; --bg-3: #d3dee9; --input: #ffffff;
  --line: #d3dee9; --line-2: #a9bacb;
  --fg: #101a24; --fg-dim: #3d4c5c; --fg-mute: #5f7084;
  --accent: #0b6bb5; --accent-hover: #095a99; --accent-soft: #dceaf7;
  --on-accent: #ffffff; --on-accent-alt: #ffffff;
  --ok: #16794a;   --ok-soft: #dff2e8;   --ok-line: #97cbb1;
  --warn: #8a5a00; --warn-soft: #f7edd8; --warn-line: #d9bf86;
  --danger: #b52d2d; --danger-soft: #f9e2e2; --danger-line: #e0a3a3;
  --info: #1d5fa8; --info-soft: #dfeaf7;
  --sim: #8a5a00; --sim-line: #d9bf86;
  --hue-person: #1d5fa8; --hue-place: #16794a; --hue-time: #8a5a00;
  --hue-thing: #6b3fa8; --hue-idle: #5f7084; --hue-off: #9fb0c1;
  --shadow-rgb: 18 32 48;
  --scrim: rgb(18 32 48 / .38); --scrim-strong: rgb(18 32 48 / .55);
  --shadow-1: 0 6px 18px rgb(18 32 48 / .1);
  --shadow-2: 0 10px 26px rgb(18 32 48 / .13);
  --shadow-3: 0 18px 44px rgb(18 32 48 / .16);
  --veil: rgb(18 32 48 / .05); --veil-2: rgb(18 32 48 / .1);
  --flash: rgb(11 107 181 / .12);
  --edge-hi: rgb(255 255 255 / .9); --edge-hi-2: rgb(255 255 255 / .7); --edge-hi-3: rgb(255 255 255 / .9);
  --dock-bg: rgb(255 255 255 / .72); --dock-bg-solid: rgb(255 255 255 / .95);
  --present-bg: #0f1012;
  --danger-veil: rgb(181 45 45 / .08);
  --hit: #ffeeae; --on-hit: #3d2f00;
  color-scheme: light;
}

/* ---- Yazı tipi ---- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/velvet-static/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/velvet-static/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root[data-font="dm"] { --font-ui: 'DM Sans', system-ui, sans-serif; }
:root[data-font="serif"] { --font-ui: Iowan Old Style, Palatino, Georgia, 'Times New Roman', serif; }
:root[data-font="daktilo"] { --font-ui: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace; }

/* ---- Buton sistemi (kabuk CSS bölüm 194) ---- */
.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- Ölçü tokenları. Kademeler spec-tasarim-sistemi.md'deki .iconbtn kademeleriyle aynıdır
   (s=26 · m=30 · l=36); buton, ikon düğmesi, çip ve segment aynı yükseklikte yan yana durur.
   xs=22 DÖRDÜNCÜ kademedir (dilim 3, 18 Eylül): bir görselin ya da kartın üstüne oturan hapın
   İÇİNDEKİ ikon düğmeleri. Onlar bağımsız denetim değil, hapın içeriğidir; 26'ya çıkınca hap
   büyüyüp altındaki görseli yer. Ölçüldü: bugün orada 20, 22 ve 24 px yan yana duruyordu. */
:root {
  --ctl-xs: 22px; --ctl-s: 26px;  --ctl-m: 30px;  --ctl-l: 36px;         /* yükseklik */
  --ctl-pad-xs: 6px; --ctl-pad-s: 8px; --ctl-pad-m: 12px; --ctl-pad-l: 16px; /* yatay iç boşluk */
  --ctl-ico-xs: 12px; --ctl-ico-s: 13px; --ctl-ico-m: 14px; --ctl-ico-l: 16px;    /* metnin yanındaki ikon */
  --ctl-solo-xs: 13px; --ctl-solo-s: 15px; --ctl-solo-m: 16px; --ctl-solo-l: 18px; /* tek başına ikon: anlamı o taşır, bir tık büyük */
  --ctl-gap: 6px;
}

/* ---- Taban. Yükseklik padding'den değil tokendan gelir; içerik ne olursa olsun kademe tutar. */
.btn, .iconbtn {
  --_h: var(--ctl-m); --_pad: var(--ctl-pad-m); --_ico: var(--ctl-ico-m); --_solo: var(--ctl-solo-m); --_fs: var(--t-sm);
  /* ton: ikincil (varsayılan) */
  --_fg: var(--fg); --_bg: var(--bg-1); --_bd: var(--line-2);
  --_fg-h: var(--fg); --_bg-h: var(--bg-2); --_bd-h: var(--fg-mute);
  --_bg-a: var(--bg-3);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ctl-gap);
  box-sizing: border-box; height: var(--_h); min-width: var(--_h); padding: 0 var(--_pad);
  border: 1px solid var(--_bd); border-radius: var(--radius-sm);
  background: var(--_bg); color: var(--_fg);
  font-size: var(--_fs); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; flex: none;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease), transform 80ms var(--ease);
}
/* :where → özgüllük (0,1,0): `.setcorner svg`, `.dk-sil svg` gibi yerel ikon ölçüleri kazanmaya devam eder. */
:where(.btn, .iconbtn) .icon { width: var(--_ico); height: var(--_ico); stroke-width: 1.9; }
.btn .lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---- Boyut */
.btn.xs, .iconbtn.xs { --_h: var(--ctl-xs); --_pad: var(--ctl-pad-xs); --_ico: var(--ctl-ico-xs); --_solo: var(--ctl-solo-xs); --_fs: var(--t-xs); }
.btn.sm, .iconbtn.sm { --_h: var(--ctl-s); --_pad: var(--ctl-pad-s); --_ico: var(--ctl-ico-s); --_solo: var(--ctl-solo-s); --_fs: var(--t-xs); }
.btn.lg, .iconbtn.lg { --_h: var(--ctl-l); --_pad: var(--ctl-pad-l); --_ico: var(--ctl-ico-l); --_solo: var(--ctl-solo-l); --_fs: var(--t-md); }
:where(.btn.lg, .iconbtn.lg) .icon { stroke-width: 1.7; }

/* ---- Ton */
.btn.primary { --_fg: var(--on-accent); --_bg: var(--accent); --_bd: transparent;
  --_fg-h: var(--on-accent); --_bg-h: var(--accent-hover); --_bd-h: transparent; --_bg-a: var(--accent); font-weight: 600; }
.btn.ghost, .iconbtn { --_fg: var(--fg-dim); --_bg: transparent; --_bd: transparent;
  --_fg-h: var(--fg); --_bg-h: var(--bg-2); --_bd-h: transparent; --_bg-a: var(--bg-3); }
/* Tehlike iki kılıkta: çerçeveli hâli HER ZAMAN kırmızıdır (onay adımı, "Projeyi sil");
   ghost hâli dururken nötrdür, üstüne gelince kızarır (satır ve kartlarda tekrar eden çöp kutusu —
   yirmi satırda yirmi kırmızı ikon hiyerarşiyi bozar). */
.btn.danger, .btn.warn { --_fg: var(--danger); --_bg: transparent; --_bd: color-mix(in srgb, var(--danger) 45%, var(--line-2));
  --_fg-h: var(--danger); --_bg-h: var(--danger-soft); --_bd-h: var(--danger); --_bg-a: var(--danger-soft); }
.btn.ghost.danger, .iconbtn.warn { --_fg: var(--fg-dim); --_bd: transparent;
  --_fg-h: var(--danger); --_bg-h: var(--danger-soft); --_bd-h: transparent; }
/* Satır içi düzenlemenin onayı (✓): tek anlam, tek renk. */
.btn.ghost.ok, .iconbtn.ok { --_fg: var(--ok); --_fg-h: var(--ok); --_bg-h: var(--ok-soft); --_bg-a: var(--ok-soft); }
.btn.ghost.accent, .iconbtn.go { --_fg: var(--accent); --_fg-h: var(--accent-hover); --_bg-h: var(--accent-soft); --_bg-a: var(--accent-soft); }

/* ---- İçerik */
/* Yalnız ikon: kare. aria-label + title ZORUNLU (kabul ölçütü 6). */
.btn.solo, .iconbtn { width: var(--_h); min-width: 0; padding: 0; --_ico: var(--_solo); }
/* display yazan her kural [hidden]'ı ezer; geri verilir. */
.btn[hidden], .iconbtn[hidden] { display: none; }
/* Optik denge: ikon, metinden görsel olarak hafiftir; ikonun olduğu kenar 2 px dar olur. */
.btn:not(.solo):has(> .icon:first-child) { padding-left: calc(var(--_pad) - 2px); }
.btn:not(.solo):has(> .icon:last-child) { padding-right: calc(var(--_pad) - 2px); }
/* Sondaki ikon yalnız yön bildirir (chevron = katman açar, ok = başka ekrana götürür); soluktur. */
.btn:not(.solo) > .lbl ~ .icon { opacity: .7; }

/* ---- Durum */
.btn:hover:not([disabled], [aria-disabled="true"], [aria-busy="true"]),
.iconbtn:hover:not([disabled], [aria-disabled="true"], [aria-busy="true"]) { --_fg: var(--_fg-h); --_bg: var(--_bg-h); --_bd: var(--_bd-h); }
.btn:active:not([disabled], [aria-disabled="true"], [aria-busy="true"]),
.iconbtn:active:not([disabled], [aria-disabled="true"], [aria-busy="true"]) { --_bg: var(--_bg-a); transform: translateY(1px); }
.btn:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"], .iconbtn[disabled], .iconbtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Aç/kapa düğmesi: basılıyken zemin tutar. */
.btn[aria-pressed="true"]:not(.primary), .iconbtn[aria-pressed="true"] { --_fg: var(--fg); --_bg: var(--bg-3); }
.btn[aria-pressed="true"]:not(.primary):not(.ghost) { --_bd: var(--fg-mute); }
/* Meşgul: içerik yerinde kalır ama görünmez olur — genişlik kendiliğinden kilitlenir, ekran zıplamaz. */
.btn[aria-busy="true"], .iconbtn[aria-busy="true"] { position: relative; color: transparent; cursor: progress; }
.btn[aria-busy="true"] > *, .iconbtn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after, .iconbtn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--_fg) 28%, transparent); border-top-color: var(--_fg);
  animation: spin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .btn, .iconbtn { transition: none; }
  .btn:active, .iconbtn:active { transform: none; }
  .btn[aria-busy="true"]::after, .iconbtn[aria-busy="true"]::after { animation: none; }
}

/* ---- Grup: yan yana eylemler. Aralık tek yerden gelir. */
.btns { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.btns.tight { gap: 2px; }   /* ghost ikon dizileri: zeminleri yok, sıkı dururlar */

/* ---- Uygulamalar şeridi (kabuk CSS'inden) ---- */
/* ——— UYGULAMALAR ŞERİDİ: tık = sayfa, üstüne gel = satır İÇİNDE açılır ————————————————
   ORTAK KATMANA ÇIKAR (ortak_stil.ortak_css) — uygulama sayfaları da AYNI kuralları yükler.
   İki yüzeyin aynı şeridi için iki kopya CSS yazmak, bir gün iki ayrı his demektir; üstelik
   uygulama sayfasının çubuğu kabuğunkiyle piksel piksel aynı olmak zorunda.

   Ali, 20 Eylül: "header'daki dropdown bizim dropdown'larımız gibi açılmıyor; yandaki
   dropdown'lara bakar mısın — altında değil, SATIR İÇİNDE açılıyor, ikonu ile uyumlu şekilde."

   DESEN ÖLÇÜLDÜ, kaynağı hemen yanındaki arama (`.findtop`, kabuk CSS 104/144): kutu açmaz,
   üst çubukta SOLA doğru genişler (kendisi sağda sabit kalır, çünkü `.right` sağa yaslı),
   genişleme `--dur-panel` + `--ease`, içerik `--dur-hover` ile solar. Şerit onu birebir izler:
   ızgara ikonu YERİNDE KALIR, uygulamalar onun SOLUNDA dizilir. Ayırıcı çizgi
   `.topbar .projtop::after`ın aynısı (1 px × 18 px, --line-2): iki ayrı şey, göz onları ayırsın.
   Kutu, gölge ve zemin YOK — şerit bir kutu değil, satırın kendisi.

   GENİŞLİK ÖĞE SAYISINDAN, ama İŞARETLEMEDE SAYI YOK: `.appsrow.n6` gibi bir sınıf `--apps-n`i
   kurar. Üç yol denendi ve ikisi ÖLÇÜMDE elendi: (1) satır içi `style="--apps-n:6"` —
   uygulama dilinin yasağı (`uygulama_dili_test`, "eski kılığın izi yok"); (2) `inline-grid`
   sütununu `0fr → 1fr` yapmak — 1440'ta doğru genişliyor ama 375'te kabuğun `.right`i
   `flex: 1 0 100%` olduğu için `fr` serbest alan bulamıyor ve şerit SIFIR genişlikte açılıyordu
   (tarayıcıda ölçüldü: sol 211 · sağ 211). Kalan yol sınıf merdiveni: öngörülebilir, ölçülebilir,
   ve her öğe tam olarak `--ctl-m` genişliğinde olduğu için hedef genişlik KESİN.

   Aşağı açılan kutu sürümü KALDIRILDI: iki desen yaşamasın. */
/* `flex: none`: 375'te kabuğun `.right`i sarılabilir bir satır ve şeridi EZİYORDU — açık
   şerit 195 px yerine 12 px çıkıyordu (tarayıcıda ölçüldü). Sığmazsa satır sarar, ezilmez. */
.appsnav { display: inline-flex; align-items: center; min-width: 0; flex: none; }
.appsrow {
  display: flex; align-items: center; gap: 2px; min-width: 0; flex: none;
  /* Açık genişlik TEK YERDE: hover ve odak kuralları ikisi de bunu okur. */
  --apps-acik: min(calc(var(--apps-n, 6) * (var(--ctl-m) + 2px) + 5px), calc(100vw - 180px));
  max-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  visibility: hidden; opacity: 0;
  transition: max-width var(--dur-panel) var(--ease) var(--menu-niyet-kapat),
              opacity var(--dur-hover) var(--ease) var(--menu-niyet-kapat),
              visibility 0s linear calc(var(--menu-niyet-kapat) + var(--dur-panel));
}
.appsrow::-webkit-scrollbar { display: none; }
/* Açık genişlik: n × (düğme + aralık) + ayırıcı. Ekrana sığmazsa şerit KENDİ İÇİNDE kayar —
   uygulama sessizce kaybolmaz, üst çubuğun öteki öğeleri de ezilmez. */
.appsnav:focus-within > .appsrow { visibility: visible; opacity: 1; max-width: var(--apps-acik); }
.appsrow.n1 { --apps-n: 1 } .appsrow.n2 { --apps-n: 2 } .appsrow.n3 { --apps-n: 3 }
.appsrow.n4 { --apps-n: 4 } .appsrow.n5 { --apps-n: 5 } .appsrow.n6 { --apps-n: 6 }
.appsrow.n7 { --apps-n: 7 } .appsrow.n8 { --apps-n: 8 } .appsrow.n9 { --apps-n: 9 }
.appsrow.n10 { --apps-n: 10 } .appsrow.n11 { --apps-n: 11 } .appsrow.n12 { --apps-n: 12 }
/* Açılma hover NİYETİ kadar gecikir; hover kuralı YALNIZ hover'ı olan aygıtta — dokunmatikte
   şerit açılmaz, dokunuş doğrudan katalog sayfasına gider ("tık = sayfa" sözü bozulmaz). */
@media (hover: hover) {
  .appsnav:hover > .appsrow {
    visibility: visible; opacity: 1; max-width: var(--apps-acik);
    transition: max-width var(--dur-panel) var(--ease) var(--menu-niyet-ac),
                opacity var(--dur-hover) var(--ease) var(--menu-niyet-ac),
                visibility 0s linear var(--menu-niyet-ac);
  }
}
/* Klavye BEKLEMEZ: Tab ile gelen için gecikme bir kusurdur, niyet ölçümü değil. */
.appsnav:focus-within > .appsrow { transition: none; }
/* DAR EKRANDA KABUĞUN ÜST ÇUBUĞU: 700 px altında çubuk zaten ikinci satıra sarıyor ve sağ grup
   ~196 px kalıyor (375'te ölçüldü). 195 px'lik şerit orada çubuğu yeniden akıtıyor, ızgara
   düğmesi imlecin ALTINDAN kaçıyor ve şerit kendi kendini kapatıyor — animasyonun ortasında
   yakalandı: görünür ama max-width 0,02 px. Orada hover ile AÇILMAZ. Klavye açmaya devam eder:
   odak yeniden akıştan kaçmaz, ve dar ekranda klavye erişimini kesmek için bir sebep yok.
   Uygulama sayfalarının çubuğu düz bir satır, orada 375'te de açılıyor (ölçüldü: 195 px). */
@media (max-width: 700px) {
  .topbar .appsnav:hover:not(:focus-within) > .appsrow { visibility: hidden; opacity: 0; max-width: 0; }
}
/* Esc: JS kapatır (yalnız kabukta JS var). CSS'in hover/focus kuralını ezmenin tek yolu bu bayrak. */
.appsnav[data-kapali="1"] > .appsrow { visibility: hidden; opacity: 0; max-width: 0; transition: none; }
/* Ayırıcı: şerit ile ızgara ikonu arasında, `.topbar .projtop::after`ın aynısı. */
.appsrow::after { content: ""; flex: none; width: 1px; height: 18px; margin: 0 2px;
                  background: var(--line-2); }
.appsrow .appsapp[aria-current="page"] { --_fg: var(--fg); --_bg: var(--bg-2); }
.appsrow .appsbos { padding: 0 var(--s2); color: var(--fg-dim); font-size: var(--t-sm); white-space: nowrap; }
/* İKON ETİKETİ — kabuğun İLK özel ipucu deseni (Ali, 20 Eylül: "ikonlar üzerine gelince adı
   gözüksün"). Kabuk her yerde tarayıcının yerleşik `title`ını kullanıyor; o ~1 sn gecikiyor,
   silik ve temasız. Bu desen genel bir adla (`ikon-etiket`) ve ortak katmanda duruyor ki
   sonra başka ikon-düğmeler de kullanabilsin, ama BU DİLİMDE yalnız uygulamalar şeridine
   uygulanıyor — kabuğun öteki `title`larına dokunulmadı.

   ŞERİDİN DIŞINDA, `.appsnav`a bağlı: `.appsrow` dört durumun dördünde de `overflow-x: auto`
   + `overflow-y: hidden` hesaplıyor (şerit kaymasa bile) ve satırın İÇİNE konan etiket
   `elementFromPoint`e hiç görünmüyor — ölçüldü. Konumu betik veriyor (velvet-serit.js);
   betik yoksa `title` yerinde kalır ve bugünkü davranış sürer.

   Yüzey menü kutularıyla aynı tokenlardan: --bg-2 zemin, --line-2 kenar, --shadow-1.
   `pointer-events: none` — etiket imleci yakalayıp şeridi açık tutmaz/kapatmaz. */
.appsnav { position: relative; }
.ikon-etiket {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 46;
  max-width: min(18rem, calc(100vw - 16px));
  padding: 4px var(--s2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg-2); box-shadow: var(--shadow-1);
  color: var(--fg); font-size: var(--t-xs); font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease);
}
.ikon-etiket[data-acik="1"] { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .ikon-etiket { transition: none; } }
@media (prefers-reduced-motion: reduce) { .appsrow { transition: none; } }
/* Bildirim sayacı (docs/spec-bildirim.md). ŞERİDİN İÇİNDE, çünkü uygulama sayfaları da aynı rozeti
   çiziyor ve ortak katman (`velvet-ortak.css`) bu bölümden TÜRER. TEK rozet biçimi: hesap düğmesindeki
   `#queue-count`un ölçüleri ve tokenları (vurgu zemini, 13 px, 9 px rakam). Rozet `aria-hidden`; okunan
   şey düğmenin adıdır ("Web sitesi — 3 yeni"). `pointer-events: none`: tıklamayı ve hover niyetini
   yakalamaz. Şerit `overflow-x: auto` hesaplıyor; rozet ikonun KENDİ kutusunda kaldığı için kırpılmaz. */
.appsnav .iconbtn { position: relative; }
.bildirim-sayi { position: absolute; top: 1px; right: 0; min-width: 13px; height: 13px; padding: 0 3px;
  box-sizing: border-box; border-radius: 999px; background: var(--accent); color: var(--on-accent-alt);
  font-size: 9px; font-style: normal; font-weight: 600; line-height: 13px; text-align: center;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.bildirim-sayi:empty { display: none; }

/* ---- Kabuk çubuğunun eşi (kabuk CSS'inden) ---- */
/* ——— KABUK ÇUBUĞUNUN SUNUCUDA ÇİZİLEN EŞİ ————————————————————————————————————————————
   ORTAK KATMANA ÇIKAR (ortak_stil.ortak_css) — kuralları uygulama sayfaları yükler.

   Ali, 20 Eylül: "uygulama sayfalarına girince velvet kabuğundan çıkıyormuş gibi oluyoruz."
   Sebebi ölçüldü: uygulama sayfasının tepesi "Velvet / İş takibi" ekmek kırıntısıydı; kabuğun
   üst çubuğuyla ortak bir tek pikseli yoktu. Artık sayfalar kabuğun üst çubuğunun SUNUCUDA
   çizilmiş eşini taşıyor ve uygulamanın kendi adı ONUN ALTINDA ikinci sıra olarak kalıyor.

   DEĞERLER KABUĞUN KENDİ KURALLARINDAN ÖLÇÜLDÜ, uydurulmadı (kabuk CSS 186 · 2977–2983 ·
   2991–2999 · 3018–3025 · 3997–4005 · 4066–4068):
     çubuk 56 px · gap 14 · dolgu 12/20, sol --s4 · alt çizgi 1 px saydam
     gezinme öğesi 6/10, radius 8, ikon 15, gap 7, --t-sm
     marka 16 px, opaklık .8 · proje 30×30, ikon 17, sağında 1×18 ayırıcı
     avatar 30×30, radius 9, ikon 18 · sağ küme gap 8
   Ortalama da kabuğun kendi yolu: ≥761 px'te sol (gezinme) ve sağ küme EŞİT esner
   (`flex: 1 1 0`), marka aralarında kalır — JS yok, olması da gerekmiyor.

   AYRI SINIF ADI (`uyg-kabuk-*`), `.topbar` DEĞİL: kabuğun kuralları altı bin satıra yayılı,
   yarısı `.shell`/`.main` ızgarasına ve JS'in yazdığı niteliklere bağlı. Onları buraya taşımak
   kabuğun yerleşimini oynatırdı. Eşitlik BURADA DEĞİL ÖLÇÜMDE tutuluyor:
   `test-shell-uygulama-menusu-browser` iki yüzeyi öğe öğe karşılaştırıyor ve fark 1 px'i
   aşarsa düşüyor — biri değişip öteki değişmezse test söyler.

   ÇİZİLMEYENLER ve nedenleri: arama (kabuğun projesinde arar, uygulama sayfasının verisinde
   değil) · presence (kabuk oturumuna bağlı) · ekran eylemleri (kabuk ekranının araçları) ·
   yardım (kabuk ekranlarını anlatır). Hesap MENÜSÜ de yeniden yazılmadı: avatar kabuğa
   götürür, menü kabuğun. */
.uyg-kabuk {
  /* ÖLÇÜLEN hâl: kabuğun `.topbar`ı üç kuralın toplamıdır — 192 (taban), 1092 (sol dolgu
     --s4), 4090 (yükseklik --topbar-h) ve 5318 (dikey dolgu 8). Tarayıcıda hesaplanmış
     değerleri okundu: padding 8/20/8/16, min-height 62. Aynısı burada, aynı tokenlardan. */
  display: flex; align-items: center; gap: 14px; min-width: 0;
  /* `--topbar-h` kabuğun DÖRDÜNCÜ `:root` bloğunda (4089) ve ortak katman yalnız ilk ikisini
     taşıyor; yedek değer onunla AYNI. Ayrışırsa tarayıcı kıyası (test-shell-uygulama-menusu)
     yakalar: iki çubuğun yüksekliği 1 px'i aşarsa test düşer. */
  min-height: var(--topbar-h, 62px); padding: 8px 20px 8px var(--s4);
  border-bottom: 1px solid transparent; position: relative;
}
.uyg-kabuk-nav { display: flex; align-items: center; gap: 2px; padding: 0; margin-left: var(--s2);
                 min-width: 0; overflow: auto; scrollbar-width: none; }
.uyg-kabuk-nav::-webkit-scrollbar { display: none; }
.uyg-kabuk-oge {
  display: flex; align-items: center; width: auto; flex: none; gap: 7px;
  padding: 6px 10px; border-radius: 8px; color: var(--fg-dim); font-size: var(--t-sm);
  white-space: nowrap; text-decoration: none;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.uyg-kabuk-oge svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
                     stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uyg-kabuk-oge:hover { color: var(--fg); background: var(--bg-1); }
.uyg-kabuk-oge[aria-current="page"] { color: var(--fg); background: var(--bg-2); }
.uyg-kabuk-marka { display: inline-flex; align-items: center; flex: none; min-width: 0;
                   color: var(--fg); text-decoration: none; opacity: .8; }
.uyg-kabuk-marka:hover { opacity: 1; }
/* Marka kabuktaki ÖLÇÜSÜNDE ve aynı tokendan: kabuk `--marka-boy` ile ölçüyor
   (`.topbar #brand-home .vbrand`, kabuk CSS 4093). Satır içi `style` YOK — `brand_lockup(0)`
   ölçüyü CSS'e bırakıyor, çünkü uygulama dilinde satır içi stil yasak. */
/* Kabukta `--marka-boy`u JS yazıyor: clamp(32, innerWidth*0.024, 42) (kabuk JS 505).
   JS'siz yüzeyde AYNI FORMÜL CSS'te — iki yerde iki ölçü değil, bir formülün iki yazımı.
   JS'in yuvarlaması yüzünden 1440'ta 34,56 ↔ 35 px; ölçülen fark budur. */
.uyg-kabuk-marka .vbrand { font-size: var(--marka-boy, clamp(32px, 2.4vw, 42px)); line-height: 1; }
.uyg-kabuk-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.uyg-kabuk-proje { width: 30px; height: 30px; padding: 0; margin-right: var(--s3);
                   display: inline-flex; align-items: center; justify-content: center;
                   border-radius: 8px; color: var(--fg); text-decoration: none; position: relative;
                   transition: background var(--dur-hover) var(--ease); }
.uyg-kabuk-proje:hover { background: var(--bg-2); }
.uyg-kabuk-proje svg { width: 17px; height: 17px; color: var(--fg-mute); flex: none;
                       fill: none; stroke: currentColor; stroke-width: 1.6;
                       stroke-linecap: round; stroke-linejoin: round; }
/* Proje ile hesap arasına çizgi: kabuktaki `.topbar .projtop::after`ın aynısı. */
.uyg-kabuk-proje::after { content: ""; position: absolute; right: calc(var(--s3) * -1 - 1px);
                          top: 50%; transform: translateY(-50%); width: 1px; height: 18px;
                          background: var(--line-2); }
.uyg-kabuk-hesap { display: inline-flex; align-items: center; justify-content: center;
                   padding: 0; border-radius: 10px; text-decoration: none; }
.uyg-kabuk-hesap .avatar {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  background: var(--bg-2); color: var(--fg-dim); overflow: hidden;
  transition: color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.uyg-kabuk-hesap .avatar svg { width: 18px; height: 18px; fill: currentColor; }
.uyg-kabuk-hesap:hover .avatar { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Uygulamanın kendi çubuğu (ad + sekmeler) kabuk çubuğunun ALTINDA ikinci sıra olarak kalır. */
.uyg-kabuk + main.uyg { padding-top: var(--s4); }
@media (min-width: 761px) {
  .uyg-kabuk-nav { flex: 1 1 0; justify-content: flex-start; }
  .uyg-kabuk-sag { flex: 1 1 0; justify-content: flex-end; }
  /* Kabuk 117: sekmeler YALNIZ İKON; ad üstüne gelince ya da klavye odağında açılır — yine
     satır içi genişleme, yine `--dur-hover`. Uygulamalar şeridiyle aynı dil. */
  .uyg-kabuk-oge { gap: 0; padding: 7px; }
  .uyg-kabuk-oge .label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
    transition: max-width var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease),
                margin-left var(--dur-hover) var(--ease); }
  .uyg-kabuk-oge:hover .label, .uyg-kabuk-oge:focus-visible .label { max-width: 140px; opacity: 1; margin-left: 7px; }
}
@media (max-width: 1100px) { .uyg-kabuk-oge .label { display: none; } .uyg-kabuk-oge { padding: 7px; } }
@media (max-width: 760px) {
  .uyg-kabuk { flex-wrap: wrap; row-gap: 8px; }
  .uyg-kabuk-sag { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 560px) {
  /* Kabukta da böyle: dar ekranda gezinme çubuktan kalkar, marka DURUR. */
  .uyg-kabuk-nav { display: none; }
  .uyg-kabuk-marka { margin-right: var(--s2); }
}