/* kabuk.css — web istemcisi bileşen kabuğu (Plan 3 Task 1). design/_shell-web.css "4 · UYGULAMA DÜZENİ" + "5 · ORTAK
   BİLEŞENLER" kurallarının TAŞINMIŞ hâli (+ ayarlar showcase'inden .anahtar/.secici/.radyo). Renk YALNIZ takma adlardan
   (css/tasarim-adlari.css → --t- ve --f- ön ekli token'lar); ham renk YOK (test/renk-kapisi.test.mjs). TAŞINMAYANLAR: showcase sahnesi/pencere
   çerçevesi (.sahne, .win), .cift, .pano, .gal-, .tema-anahtari, durum anahtarları (?durum=, .wh-secici…), "animasyon yok"
   (W6 yalnız deterministik çekim için). Nunito YAYINLANIR (fonts/, OFL): @font-face aşağıda; ?v= fontun içerik sürümüdür (SW ön-önbellek
   anahtarıyla aynı — test/yazi-tipi.test.mjs); font değişirse bu değer de güncellenir.
   Daraltılmış düzenler (.win--1100/.win--dar showcase sınıfları) Task 3'te medya sorgusuna çevrilir. */

/* ---- Yazı tipi: showcase (design/_shell-web.css) ile AYNI bildirim; font-display swap (ağ yavaşken metin sistem yığınıyla görünür). ---- */
@font-face{ font-family:"Nunito"; src:url("/fonts/Nunito-Variable.ttf?v=bb55a5ca5c20") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }

/* ---- Taban tipografi (design/_shell-web.css "2 · TİPOGRAFİ" gövde kuralları): showcase ile birebir satır yüksekliği/yazı tipi. ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ font-family:var(--font); font-size:var(--fs-body); line-height:1.45; -webkit-font-smoothing:antialiased; }
button, input{ font-family:inherit; font-size:inherit; color:inherit; }
code{ font-family:var(--font-mono); font-size:.86em; }
button{ cursor:pointer; }

.ik{ width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; }
.ik--16{ width:16px; height:16px; } .ik--18{ width:18px; height:18px; } .ik--24{ width:24px; height:24px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- 4 · Uygulama düzeni ---- */
.app{ height:100vh; min-height:0; display:grid; position:relative;
  grid-template-columns: var(--ray-w) var(--liste-w) minmax(0,1fr);
  background:var(--app-bg); }
.app.bilgi-acik{ grid-template-columns: var(--ray-w) var(--liste-w) minmax(0,1fr) var(--bilgi-w); }

/* Daraltılmış düzenler (≤1100 liste daralır + bilgi paneli sohbetin ÜSTÜNE biner; ≤820 tek bölme .app[data-dar]) Task 3'te. */
.sohbet-bas .geri{ display:none; }

/* ---- 4a · Sol ray ---------------------------------------------------------- */
.ray{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 0;
  background:var(--sheet-2); border-right:1px solid var(--line); }
.ray-ogesi{ position:relative; width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent;
  border-radius:var(--r-md); color:var(--sub); }
.ray-ogesi .ik{ width:22px; height:22px; }
.ray-ogesi.aktif{ background:var(--primary-soft); color:var(--on-primary-soft); box-shadow:var(--shadow-ic); }
.ray-ogesi .rozet{ position:absolute; top:-3px; right:-7px; box-shadow:0 0 0 2px var(--sheet-2); }
.ray-ogesi .rozet--nokta{ top:3px; right:3px; }
/* Etiketli ray (kurucu 2026-10-26: geniş ekranda etiketli, dar ekranda etiketsiz). Etiket yalnız `.ray--etiketli` içindeki `.et` ile görünür. */
.ray--etiketli{ gap:6px; }
.ray--etiketli .ray-ogesi{ width:76px; height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.ray--etiketli .ray-ogesi .et, .ray--etiketli .ray-profil .et{ font-size:var(--fs-micro); font-weight:var(--fw-bold); line-height:1.1; }
.ray--etiketli .ray-ogesi .rozet{ top:2px; right:12px; }
.ray--etiketli .ray-ayrac{ width:52px; }
.ray--etiketli .ray-profil{ border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--sub); padding:4px 0; }
.ray-ara{ flex:1; }
.ray-ayrac{ width:28px; height:1px; background:var(--line); margin:6px 0; }

/* ---- 4b · Orta sütun: liste ------------------------------------------------ */
.liste{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--sheet); border-right:1px solid var(--line); }
.liste-bas{ height:var(--bas-h); flex:none; display:flex; align-items:center; gap:4px; padding:0 12px 0 18px; }
.liste-bas h1{ flex:1; margin:0; font-size:var(--fs-h1); font-weight:var(--fw-x); letter-spacing:-.3px; }
.liste-ara{ padding:2px 12px 8px; flex:none; }
.ara-kutu{ height:38px; display:flex; align-items:center; gap:10px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--line-soft); color:var(--muted); font-size:var(--fs-sub); border:1.5px solid transparent; }
.ara-kutu.odak{ background:var(--sheet); border-color:var(--primary-tint); }
.ara-kutu .ik{ width:18px; height:18px; }
.ara-kutu .yer{ flex:1; }
.cipler{ display:flex; gap:8px; padding:4px 12px 10px; flex:none; flex-wrap:wrap; }
.liste-kaydir{ flex:1; min-height:0; overflow:hidden; }

/* ---- 4c · Sağ sohbet paneli ---------------------------------------------- */
.sohbet{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--chat-bg); position:relative; }
.sohbet-bas{ height:var(--bas-h); flex:none; display:flex; align-items:center; gap:12px; padding:0 12px 0 16px;
  background:var(--sheet); border-bottom:1px solid var(--line); }
.sohbet-bas .kim{ flex:1; min-width:0; }
.sohbet-bas .ad{ font-size:var(--fs-h3); font-weight:var(--fw-x); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sohbet-bas .alt{ font-size:var(--fs-cap); color:var(--sub); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.sohbet-bas .alt.yaziyor{ color:var(--primary-deep); font-weight:var(--fw-semi); }
.mesajlar{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  padding:16px 7% 12px; }
.sohbet-bos{ flex:1; display:grid; place-items:center; text-align:center; padding:40px; background:var(--app-bg); }

/* ---- 4d · Sağ bilgi paneli ------------------------------------------------ */
.app:not(.bilgi-acik) > .bilgi{ display:none; }
.bilgi{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--sheet); border-left:1px solid var(--line); }
.bilgi-bas{ height:var(--bas-h); flex:none; display:flex; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid var(--line);
  font-weight:var(--fw-bold); font-size:var(--fs-h3); }
.bilgi-govde{ flex:1; min-height:0; overflow:hidden; padding:20px; display:flex; flex-direction:column; gap:14px; }
.bilgi-kimlik{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.bilgi-kimlik .ad{ font-size:var(--fs-h2); font-weight:var(--fw-x); }
.bilgi-kimlik .tel{ color:var(--sub); font-size:var(--fs-sub); }
.bolum{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
.bolum--eylemler{ display:flex; flex-direction:column; gap:8px; }
.bolum-baslik{ font-size:var(--fs-cap); font-weight:var(--fw-bold); color:var(--sub); margin:0 0 6px; }

/* ---------------------------------------------------------------------------
   5 · ORTAK BİLEŞENLER
   ------------------------------------------------------------------------- */

/* ---- İkon düğmesi --------------------------------------------------------- */
.ikon-btn{ width:40px; height:40px; flex:none; display:grid; place-items:center; border:0; background:transparent;
  border-radius:var(--r-pill); color:var(--sub); }
.ikon-btn.aktif{ background:var(--line-soft); color:var(--ink); }
.ikon-btn--kucuk{ width:32px; height:32px; }

/* ---- Buton hiyerarşisi (DOLU YEŞİL BİRİNCİL YOK) ------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px;
  border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--sheet); color:var(--ink);
  font-size:var(--fs-sub); font-weight:var(--fw-bold); white-space:nowrap; box-shadow:var(--shadow-sm); }
.btn .ik{ width:18px; height:18px; }
.btn--birincil{ background:var(--primary-soft); border-color:var(--primary-tint); color:var(--on-primary-soft); box-shadow:var(--shadow-ic), var(--shadow-sm); }
.btn--ikincil{ /* = .btn: sheet + line çerçeve */ }
.btn--hayalet{ background:transparent; border-color:transparent; color:var(--primary-deep); box-shadow:none; }
.btn--kritik{ background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger-ink) 28%, transparent); color:var(--on-danger-soft); box-shadow:var(--shadow-ic), var(--shadow-sm); }
.btn--altin{ background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold-ink); }
.btn--buyuk{ height:46px; padding:0 22px; font-size:var(--fs-body); }
.btn--kucuk{ height:30px; padding:0 12px; font-size:var(--fs-cap); }
.btn[disabled], .btn.pasif{ background:var(--line-soft); border-color:var(--line-soft); color:var(--muted); box-shadow:none; }

/* ---- Filtre çipi ---------------------------------------------------------- */
.cip{ height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--line-soft); border:1.5px solid transparent; color:var(--sub); font-size:var(--fs-sub); font-weight:var(--fw-semi); }
.cip.aktif{ background:var(--primary-soft); border-color:var(--primary-tint); color:var(--on-primary-soft); font-weight:var(--fw-bold); }
.cip .say{ font-size:var(--fs-micro); font-weight:var(--fw-x); }

/* ---- Avatar --------------------------------------------------------------- */
.av{ position:relative; display:inline-block; width:48px; height:48px; flex:none; border-radius:50%; }
.av > img, .av > .bas{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; object-fit:cover; }
.av > .bas{ background:var(--primary-soft); color:var(--on-primary-soft); font-weight:var(--fw-x); font-size:var(--fs-sub); letter-spacing:.3px; }
.av > .bas.mercan{ background:var(--accent-soft); color:var(--on-accent-soft); }
.av > .bas.altin{ background:var(--gold-soft); color:var(--gold-ink); }
.av > .bas.not{ background:var(--note-soft); color:var(--note-accent); }
.av--24{ width:24px; height:24px; } .av--24 > .bas{ font-size:var(--fs-micro); }
.av--32{ width:32px; height:32px; } .av--32 > .bas{ font-size:var(--fs-micro); }
.av--40{ width:40px; height:40px; }
.av--64{ width:64px; height:64px; } .av--64 > .bas{ font-size:var(--fs-h3); }
.av--120{ width:120px; height:120px; } .av--120 > .bas{ font-size:var(--fs-display); }
.av .pres{ position:absolute; right:-1px; bottom:-1px; }
.av--120 .pres{ right:6px; bottom:6px; width:20px; height:20px; }
/* Durum halkası (story): görülmemiş = marka yeşili, görülmüş = çizgi */
.av.halka{ padding:3px; box-shadow:0 0 0 2px var(--primary); }
.av.halka.gorulmus{ box-shadow:0 0 0 2px var(--line); }

/* ---- Presence rozeti: RENK + ŞEKİL + METİN (D17) ------------------------- */
.pres{ width:14px; height:14px; border-radius:50%; display:inline-block; flex:none; position:relative;
  box-shadow:0 0 0 2.5px var(--sheet); background:var(--presence-online); }
.pres--online{ background:var(--presence-online); }                                       /* ● dolu */
.pres--away{ background:linear-gradient(90deg, var(--presence-away) 50%, var(--sheet) 50%);
  border:2px solid var(--presence-away); }                                                  /* ◐ yarım */
.pres--dnd{ background:var(--presence-dnd); }                                             /* ⊖ çizgili */
.pres--dnd::after{ content:""; position:absolute; left:3px; right:3px; top:50%; height:2px; margin-top:-1px; border-radius:2px; background:var(--fixed-white); }
.pres--invisible{ background:var(--presence-invisible); }                                 /* ● gri (kurucu 2026-07-27: içi dolu) */
.pres-etiket{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px 0 8px; border-radius:var(--r-pill);
  font-size:var(--fs-cap); font-weight:var(--fw-bold); }
.pres-etiket .pres{ width:10px; height:10px; box-shadow:none; }
.pres-etiket .pres--away{ border-width:1.5px; background:linear-gradient(90deg, var(--presence-away) 50%, transparent 50%); }
.pres-etiket .pres--dnd::after{ left:2px; right:2px; height:1.5px; }
.pres-etiket--online{ background:var(--presence-online-soft); color:var(--on-primary-soft); }
.pres-etiket--away{ background:var(--presence-away-soft); color:var(--gold-ink); }
.pres-etiket--dnd{ background:var(--presence-dnd-soft); color:var(--on-danger-soft); }
.pres-etiket--invisible{ background:var(--presence-invisible-soft); color:var(--sub); }

/* ---- E2E kilit rozeti ----------------------------------------------------- */
.e2e{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-pill);
  background:var(--sheet-2); border:1px solid var(--line); color:var(--sub); font-size:var(--fs-micro); font-weight:var(--fw-bold); }
.e2e .ik{ width:14px; height:14px; color:var(--primary-deep); }
.e2e--kucuk{ height:auto; padding:0; border:0; background:transparent; }

/* ---- Okunmamış sayacı + rozet --------------------------------------------- */
.rozet{ min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); display:inline-grid; place-items:center;
  background:var(--primary-fill); color:var(--fixed-white); font-size:var(--fs-micro); font-weight:var(--fw-x); line-height:1; }
.rozet--sessiz{ background:var(--line); color:var(--sub); }
.rozet--nokta{ min-width:10px; width:10px; height:10px; padding:0; background:var(--primary); }

/* ---- Sohbet satırı -------------------------------------------------------- */
.satir{ display:flex; align-items:center; gap:12px; height:72px; padding:0 14px 0 12px; margin:0 8px; border-radius:var(--r-md); position:relative; }
.satir .govde{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding:2px 0; }
.satir .ust, .satir .alt{ display:flex; align-items:center; gap:8px; min-width:0; }
.satir .ad{ flex:1; min-width:0; font-size:var(--fs-body); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.satir .saat{ font-size:var(--fs-micro); color:var(--muted); flex:none; font-weight:var(--fw-semi); }
.satir .onizle{ flex:1; min-width:0; display:flex; align-items:center; gap:4px; font-size:var(--fs-sub); color:var(--sub); white-space:nowrap; overflow:hidden; }
.satir .onizle span{ overflow:hidden; text-overflow:ellipsis; }
.satir .onizle.yaziyor{ color:var(--primary-deep); font-weight:var(--fw-semi); }
.satir .isaret{ display:flex; align-items:center; gap:4px; color:var(--muted); flex:none; }
.satir .isaret .ik{ width:16px; height:16px; }
.satir.okunmamis .saat{ color:var(--primary-deep); font-weight:var(--fw-bold); }
.satir.okunmamis .onizle{ color:var(--ink); font-weight:var(--fw-semi); }
.satir.secili{ background:var(--line-soft); }
.satir.ustunde{ background:color-mix(in srgb, var(--line-soft) 60%, transparent); }
.satir + .satir::before{ content:""; position:absolute; left:72px; right:0; top:0; height:1px; background:var(--line-soft); }
.satir.secili::before, .satir.secili + .satir::before{ display:none; }
.liste-bolum{ padding:14px 22px 6px; font-size:var(--fs-micro); font-weight:var(--fw-x); letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }

/* ---- Mesaj satırı + balon ------------------------------------------------- */
.msj{ display:flex; margin-top:2px; }
.msj.giden{ justify-content:flex-end; }
.msj.grup-ilk{ margin-top:10px; }
.msj.tepkili{ margin-bottom:18px; }
.balon{ position:relative; max-width:min(560px, 68%); padding:6px 9px 7px 10px; border-radius:var(--r-balon);
  font-size:var(--fs-body); line-height:1.4; box-shadow:var(--shadow-balon); overflow-wrap:anywhere; }
.msj.gelen .balon{ background:var(--bubble-in); color:var(--bubble-in-ink); }
.msj.giden .balon{ background:var(--bubble-out); color:var(--bubble-out-ink);
  box-shadow:var(--shadow-balon), inset 0 0 0 1px color-mix(in srgb, var(--primary-tint) 55%, transparent); }
.msj.gelen.grup-ilk .balon{ border-top-left-radius:4px; }
.msj.giden.grup-ilk .balon{ border-top-right-radius:4px; }
.balon .gonderen{ display:block; font-size:var(--fs-cap); font-weight:var(--fw-x); color:var(--accent-deep); margin-bottom:1px; }
/* Saat + tik: metnin sağ altına yüzer; boşluk tutucu ile son satıra oturur */
.meta{ float:right; position:relative; top:7px; margin:-4px 0 0 12px; display:inline-flex; align-items:center; gap:3px;
  font-size:var(--fs-micro); color:var(--bubble-meta); white-space:nowrap; line-height:1; }
.tik{ width:17px; height:17px; flex:none; margin:-2px 0; color:var(--tick-sent); }
.tik.okundu{ color:var(--tick-read); }
/* Yanıt alıntısı */
.alinti{ display:flex; gap:0; margin:2px -4px 6px -5px; border-radius:8px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 6%, transparent); }
.alinti::before{ content:""; width:4px; flex:none; background:var(--primary-deep); }
.alinti .ic{ padding:6px 10px; min-width:0; }
.alinti .kim{ font-size:var(--fs-cap); font-weight:var(--fw-x); color:var(--primary-deep); }
.alinti .ne{ font-size:var(--fs-cap); color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msj.giden .alinti .ne, .msj.gelen .alinti .ne{ color:color-mix(in srgb, var(--bubble-in-ink) 72%, transparent); }
/* Tepki çipi (balonun alt kenarına biner) */
.tepkiler{ position:absolute; bottom:-19px; display:flex; gap:2px; padding:1px 8px; height:28px; align-items:center;
  border-radius:var(--r-pill); background:var(--sheet); border:2px solid var(--reaction-edge); box-shadow:var(--shadow-sm);
  font-size:var(--fs-body); line-height:1; }
.msj.gelen .tepkiler{ left:10px; } .msj.giden .tepkiler{ right:10px; }
.tepkiler .n{ font-size:var(--fs-micro); color:var(--sub); font-weight:var(--fw-bold); margin-left:2px; }
/* Dosya eki (vscode-icons renkli dosya ikonu) */
.ek-dosya{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin:-2px -5px 4px -6px; border-radius:8px; min-width:280px;
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ek-dosya img{ width:36px; height:36px; flex:none; }
.ek-dosya .ad{ font-weight:var(--fw-bold); font-size:var(--fs-sub); }
.ek-dosya .boy{ font-size:var(--fs-micro); color:var(--muted); }
.ek-dosya .ikon-btn{ margin-left:auto; color:var(--sub); border:1.5px solid var(--line); width:36px; height:36px; }
/* Tarih + sistem hapı */
.hap{ align-self:center; margin:10px 0 6px; padding:5px 12px; border-radius:var(--r-sm); background:var(--sheet); color:var(--sub);
  font-size:var(--fs-micro); font-weight:var(--fw-bold); box-shadow:var(--shadow-balon); }
.hap--sistem{ max-width:520px; text-align:center; background:var(--gold-soft); color:var(--gold-ink); font-weight:var(--fw-semi); line-height:1.4; display:flex; gap:8px; align-items:flex-start; padding:8px 14px; }
.hap--sistem .ik{ width:14px; height:14px; margin-top:2px; }

/* ---- Composer ------------------------------------------------------------- */
.composer{ flex:none; display:flex; align-items:flex-end; gap:6px; padding:10px 14px; background:var(--sheet); border-top:1px solid var(--line); }
.composer .ikon-btn{ width:42px; height:42px; }
.composer .ikon-btn .ik{ width:24px; height:24px; }
.yaz-alani{ flex:1; min-height:42px; display:flex; align-items:center; padding:9px 16px; border-radius:var(--r-lg);
  background:var(--line-soft); border:1.5px solid transparent; color:var(--muted); font-size:var(--fs-body); }
.yaz-alani.dolu{ color:var(--ink); }
.yaz-alani.odak{ background:var(--sheet); border-color:var(--primary-tint); }
.mik-btn{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--primary-soft); border:1.5px solid var(--primary-tint); color:var(--primary-deep); box-shadow:var(--shadow-ic); }
.mik-btn .ik{ width:22px; height:22px; }

/* ---- Şerit / banner ------------------------------------------------------- */
.serit{ display:flex; align-items:center; gap:14px; padding:12px 14px; margin:0 12px 8px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--card-bg); box-shadow:var(--shadow-sm); }
.serit .simge{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:var(--r-md); font-size:24px; line-height:1;
  box-shadow:var(--shadow-ic); }
.serit .metin{ flex:1; min-width:0; }
.serit .baslik{ font-size:var(--fs-sub); font-weight:var(--fw-x); }
.serit .aciklama{ font-size:var(--fs-cap); color:var(--sub); line-height:1.35; }
.serit--bilgi{ background:var(--note-soft); border-color:color-mix(in srgb, var(--note-accent) 22%, transparent); }
.serit--bilgi .simge{ background:var(--sheet); }
.serit--uyari{ background:var(--gold-soft); border-color:var(--gold-line); }
.serit--uyari .simge{ background:var(--sheet); }
.serit--uyari .aciklama{ color:var(--gold-ink); }
.serit--tehlike{ background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger-ink) 28%, transparent); }
.serit--tehlike .baslik, .serit--tehlike .aciklama{ color:var(--on-danger-soft); }
/* Sohbet üstü tam genişlik şerit (bağlantı durumu) */
.serit--tam{ margin:0; border-radius:0; border-width:0 0 1px; box-shadow:none; padding:10px 16px; }

/* ---- Modal ---------------------------------------------------------------- */
.perde{ position:absolute; inset:0; background:var(--scrim); display:grid; place-items:center; z-index:20; }
.modal{ width:440px; max-width:calc(100% - 48px); background:var(--sheet); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:24px; display:flex; flex-direction:column; gap:12px; }
.modal .simge{ width:56px; height:56px; border-radius:var(--r-lg); display:grid; place-items:center; font-size:30px; background:var(--danger-soft); }
.modal h2{ margin:0; font-size:var(--fs-h2); font-weight:var(--fw-x); }
.modal p{ margin:0; color:var(--sub); font-size:var(--fs-sub); }
.modal .eylemler{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.modal--yerinde{ position:relative; }   /* galeride perdesiz gösterim */

/* ---- Toast ---------------------------------------------------------------- */
.toast{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--r-md);
  background:var(--ink); color:var(--sheet); font-size:var(--fs-sub); font-weight:var(--fw-semi); box-shadow:var(--shadow-md); }
.toast .eylem{ color:var(--primary-tint); font-weight:var(--fw-x); margin-left:8px; }
[data-theme="dark"] .toast .eylem{ color:var(--primary-press); }
.toast--yer{ position:absolute; left:50%; bottom:88px; transform:translateX(-50%); z-index:15; }

/* ---- Menü (bağlam menüsü) ------------------------------------------------- */
.menu{ min-width:220px; padding:6px; background:var(--sheet); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.menu-ogesi{ display:flex; align-items:center; gap:12px; height:38px; padding:0 10px; border-radius:var(--r-sm); font-size:var(--fs-sub); color:var(--ink); }
.menu-ogesi .ik{ width:18px; height:18px; color:var(--sub); }
.menu-ogesi.secili{ background:var(--line-soft); }
.menu-ogesi.kritik, .menu-ogesi.kritik .ik{ color:var(--danger-ink); }
.menu-ogesi .kbd-grup{ margin-left:auto; }

/* ---- Kısayol rozeti (kbd) ------------------------------------------------- */
.kbd{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:var(--r-xs);
  background:var(--sheet); border:1px solid var(--line); border-bottom-width:2.5px; color:var(--sub);
  font-family:var(--font); font-size:var(--fs-micro); font-weight:var(--fw-bold); line-height:1; }
.kbd-grup{ display:inline-flex; align-items:center; gap:3px; }

/* ---- Boş durum / bölüm kartı --------------------------------------------- */
.bos{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:440px; }
.bos .gorsel{ width:120px; height:120px; border-radius:32px; display:grid; place-items:center; font-size:64px;
  background:var(--card-bg); border:1px solid var(--line); box-shadow:var(--shadow-md), var(--shadow-ic); }
.bos .gorsel img{ width:84px; height:84px; }
.bos h2{ margin:4px 0 0; font-size:var(--fs-h1); font-weight:var(--fw-x); }
.bos p{ margin:0; color:var(--sub); font-size:var(--fs-sub); }

/* ---- Ayarlar bileşenleri (design/web_ayarlar-showcase/ayarlar.css) ---- */
/* ---- Anahtar (switch): çerçeveli iz + nokta. AÇIK = primary-soft iz + --primary nokta (dolu yeşil blok YOK) */
.anahtar{ width:44px; height:26px; flex:none; position:relative; border-radius:var(--r-pill);
  background:var(--line-soft); border:1.5px solid var(--line); }
.anahtar::after{ content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:var(--muted); }
.anahtar.acik{ background:var(--primary-soft); border-color:var(--primary-tint); box-shadow:var(--shadow-ic); }
.anahtar.acik::after{ left:auto; right:3px; background:var(--primary); box-shadow:var(--shadow-sm); }

/* ---- Segmentli seçici ----------------------------------------------------- */
.secici{ display:inline-flex; flex:none; padding:3px; gap:2px; border-radius:var(--r-pill); background:var(--line-soft); border:1px solid var(--line); }
.secici > span{ height:30px; padding:0 13px; display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  font-size:var(--fs-cap); font-weight:var(--fw-bold); color:var(--sub); white-space:nowrap; }
.secici > span.aktif{ background:var(--primary-soft); color:var(--on-primary-soft); box-shadow:var(--shadow-ic), 0 0 0 1px var(--primary-tint); }
.secici--genis{ display:flex; } .secici--genis > span{ flex:1; justify-content:center; }

/* ---- Radyo listesi -------------------------------------------------------- */
.radyo{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid var(--muted); position:relative; }
.radyo.secili{ border-color:var(--primary); }
.radyo.secili::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary); }