/* v469 CAM KABUK — Görev 2 (MIMARI §E1–E3): kenar çubuğu, görünüm başlığı/araç çubuğu, dar ekran sekme çubuğu. LF.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   Yalnız TÜKETİR: --cam-* çekirdek token'ları css/cam-temel.css'te (Görev 1). Bu dosyanın kendi ekleri --cam-k-* önekli.
   KAPSAM: bütün kurallar :root[data-cam-etkin] önekli (D18) → ?demo=1&cam=kapali = aynı yapıda v468 görünümü.
   ⚠️ Komuta seçicisi YAZILMAZ (#komutaGorunum, .foton, .fk-*, .km-*). Komuta'yı etkileyebilecek her kural (main, .ust-bar,
      .alt-menu'nün display'i, alt perde) body:not(.komuta-modu) ile korunur → Komuta piksel farkı 0 (D2).
   ⚠️ Özgüllük: css/zemin.css'in ray/alt menü opaklık kuralları (0,4,0) → burada :root[data-cam-etkin][data-tema] .alt-menu (0,4,0)
      yazılır ve bu dosya SONRA yüklendiği için kazanır. !important YOK.
   ⚠️ Bulanıklık (§C-1 listesi, başka yere yazılmaz): araç çubuğu grupları (≥ 1024, sabit) · dar ekran sekme çubuğu · dar ekran
      Menü sayfası · üst daire düğme (< 760) · kompakt rayın AÇIK hâli · kaydırma kenarı şeridi (yalnız sivi + kaydırılmış).
      Kenar çubuğu ≥ 1280 ve kompakt rayın kapalı hâli BULANIKSIZ. Filtre değeri asla transition/animation almaz (§C-2).
   ⚠️ Yerleşim animasyonu YOK: width / margin-left / left geçişi yazılmaz (eski ray genişlik + main itmesi burada ezilir);
      kompakt ray clip-path ile açılır (kendi üstünde; ata değil → sabit çocuk sorunu yok). .alt-menu'ye transform YOK
      (dar ekran Menü sayfasının 240 ms açılış animasyonu dışında — dolgusuz, bitince transform kalmaz).
   ⚠️ Kontur YOK (D6): kabuktaki bütün ≤ 1,5 px kenarlar (ust-bar alt çizgisi, ray sağ çizgisi, alt menü üst çizgisi, arama kutusu,
      raptiye, Hesap üst çizgisi, Menü/Kapat çizgisi, ay çubuğu kutusu, aktif sekmenin 1 px halkası) kalkar → ışık bandı + gölge.
   DOM sözleşmesi (entegratör index.html'e ekler): #gorunumUst > #gorunumBaslik + #gorunumAlt · .ray-bolum (Nakit/Finans/Operasyon)
   · Özet başında .gorunum-arac > .ay-bar.arac-grup + .eylemler. Kısa sekme etiketi: js/mobilmenu.js ▸ MM_KISA → [data-kisa].
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ---------- 0) Kabuk ölçüleri (--cam-k-*) ---------- */
:root[data-cam-etkin] {
  --cam-k-ray-gen: 228px;            /* kenar çubuğunun gerçek genişliği (kompakt rayda da — clip-path ile görünen 64) */
  --cam-k-ray-kenar: 12px;           /* yüzen ray ↔ ekran kenarı (içe çekilmiş, Apple Mac sidebar) */
  --cam-k-ray-dar: 64px;             /* kompakt rayın görünen genişliği (1024–1279) */
  --cam-k-icerik-sol: 252px;         /* main margin-left = 12 + 228 + 12 (≥ 1280) · 1024–1279: 12 + 64 + 12 = 88 */
  --cam-k-icerik-max: 1400px;        /* = style.css .gorunum max-width (≥ 1600: 1680) — başlık ve araç çubuğu içerikle hizalı */
  --cam-k-arac-gen: 440px;           /* sabit araç çubuğunun başlık satırında ayırdığı yer (ay grubu 212 + 44 + birincil ~140 + aralıklar) */
  --cam-k-sekme-yuk: 64px;           /* dar ekran sekme çubuğu */
  /* Süs ikonları (maske — renk currentColor yerine background-color'dan; SF Symbols çizgisi 1,75) */
  --cam-k-ikon-ara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 4.5 4.5'/%3E%3C/svg%3E");
  --cam-k-ikon-ayar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 13.5a7.6 7.6 0 0 0 0-3l2-1.5-2-3.4-2.3 1a7.5 7.5 0 0 0-2.6-1.5L14 2.6h-4l-.5 2.5A7.5 7.5 0 0 0 6.9 6.6l-2.3-1-2 3.4 2 1.5a7.6 7.6 0 0 0 0 3l-2 1.5 2 3.4 2.3-1a7.5 7.5 0 0 0 2.6 1.5l.5 2.5h4l.5-2.5a7.5 7.5 0 0 0 2.6-1.5l2.3 1 2-3.4z'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) and (max-width: 1279px) { :root[data-cam-etkin] { --cam-k-icerik-sol: 88px; } }
@media (min-width: 1600px) { :root[data-cam-etkin] { --cam-k-icerik-max: 1680px; } }

/* #uygulama giriş solması (style.css: uygulamaGel .3 sn "both") — sonu zaten opaklık 1; "both" yerine "backwards": bittiğinde
   hiçbir dolgu (fill) kalmaz → #uygulama yığın bağlamı / backdrop kökü olmaz (§C-4; ölçüldü: "both" ile #uygulama yığın bağlamı
   kalıyor). ⚠️ KOMUTA HARİÇ: Komuta'nın z −1 katmanları (.fk-zemin/.fk-tuval) o yığın bağlamına göre boyanıyor — kural Komuta'da
   da geçerliyken Komuta 1280×800 koyu 527.934 / aydınlık 2.689 piksel değişti (komuta-fark.mjs); body:not(.komuta-modu) ile 0. */
:root[data-cam-etkin] body:not(.komuta-modu) #uygulama:not(.gizli) { animation-fill-mode: backwards; }

/* Görünüm solması (.gorunum.aktif opaklık .55→1, 180 ms) araç çubuğu TAŞIYAN görünümde çocuklara taşınır (§C-4): opaklığı < 1 olan
   ata, sabit cam araç çubuğunun backdrop kökü olurdu. :where → özgüllük 0: çocuğun kendi animasyonu (lum-belir vb.) varsa o kazanır.
   ⚠️ ENTEGRATÖR (v469 birleştirme, ölçüldü): ".gorunum.aktif:has(> .gorunum-arac)" yazımı Komuta'yı (#komutaGorunum.gorunum.aktif) da
   ":has etkilenen" öğe yapıyordu → kural hiç eşleşmediği hâlde v468 CANLI ile Komuta 1280×800 koyu 527.934 / aydınlık 2.689 piksel
   farkı (cam=kapali'de bile; :has → :is ile 0). Araç çubuğu YALNIZ Özet'te → seçici #ozetGorunum, :has YOK
   (tasarim-v469/uygulama/entegrator/komuta/). Başka görünüme .gorunum-arac eklenirse buraya kimliği eklenir (:has DEĞİL). */
:root[data-cam-etkin] #ozetGorunum.aktif { animation: none; }
:where(:root[data-cam-etkin] #ozetGorunum.aktif) > :where(:not(.gorunum-arac)) { animation: gorunumGel .18s ease; }
@media (prefers-reduced-motion: reduce) {
  :where(:root[data-cam-etkin] #ozetGorunum.aktif) > :where(:not(.gorunum-arac)) { animation: none; }
}

/* =====================================================================================================================
   1) GÖRÜNÜM BAŞLIĞI — #gorunumUst (E2). H1 = etkin görünüm (js/cam.js yazar), alt satır kanvas üstünde → --metin (v465).
   Kaydırmayla gider (yapışkan değil). Komuta'da gizli.
   ===================================================================================================================== */
:root[data-cam-etkin] #gorunumUst {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 52px; max-width: var(--cam-k-icerik-max); margin: 0 0 20px; padding: 0;
}
:root[data-cam-etkin] #gorunumBaslik {
  margin: 0; font: var(--cam-y-buyuk); letter-spacing: var(--cam-iz-buyuk); color: var(--metin);
  overflow-wrap: anywhere; text-wrap: balance;
}
:root[data-cam-etkin] #gorunumAlt { margin: 0; font: var(--cam-y-alt); letter-spacing: var(--cam-iz-alt); color: var(--metin); }
:root[data-cam-etkin] #gorunumAlt:empty { display: none; }
:root[data-cam-etkin] body.komuta-modu #gorunumUst { display: none; }

/* =====================================================================================================================
   2) ARAÇ ÇUBUĞU — .gorunum-arac (Özet: ay grubu + ikincil ikon düğmesi + birincil eylem en sonda) (E2, HIG Toolbars)
   ===================================================================================================================== */
:root[data-cam-etkin] .gorunum-arac { display: flex; align-items: center; gap: 10px; }
/* Grup: cam Regular kapsül 44 px, 4 px iç dolgu; düğme 36 px, köşe 18 (22 − 4 eşmerkezli) */
:root[data-cam-etkin][data-tema] .gorunum-arac :is(.ay-bar, .arac-grup) {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
  min-height: 44px; margin: 0; padding: 4px; border: 0; border-radius: var(--cam-r-kapsul);
  background: var(--cam-parilti), var(--cam-dolgu);
  box-shadow: var(--cam-isik), var(--cam-golge-2);
  isolation: isolate;
}
:root[data-cam-etkin] .gorunum-arac :is(.ay-bar, .arac-grup) .yuvarlak-btn {
  width: 36px; height: 36px; border: 0; border-radius: var(--cam-r-arac); background: transparent; color: var(--metin);
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:root[data-cam-etkin] .gorunum-arac :is(.ay-bar, .arac-grup) .yuvarlak-btn svg.ikon { width: 18px; height: 18px; stroke-width: 1.75; }
:root[data-cam-etkin] .gorunum-arac .ay-bar .ay-adi {
  min-width: 132px; padding: 0 8px; text-align: center;
  font: 600 14px/20px var(--cam-font); letter-spacing: -.01em; color: var(--metin);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
:root[data-cam-etkin] .gorunum-arac .eylemler {
  display: flex; align-items: center; gap: 10px; margin: 0; grid-template-columns: none;
}
/* Birincil en sonda (HIG: birincil eylem araç çubuğunun sonunda); biçimi Görev 3 (E5 .btn-birincil) */
:root[data-cam-etkin] .gorunum-arac #btnOdemeEkle { order: 2; flex: none; margin: 0; white-space: nowrap; }
/* İkincil "Ödeme Planına Ekle" → tek ikonlu cam daire (maket: "Plana Ekle" ikon düğmesi). Metin DOM'da kalır (font-size 0):
   erişilebilir ad aynen "Ödeme Planına Ekle"; görsel ipucu için entegratör title ekler. */
:root[data-cam-etkin] .gorunum-arac #btnPlanaEkle {
  order: 1; flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; margin: 0;
  border: 0; border-radius: 50%; font-size: 0; line-height: 0; color: var(--metin);
  background: var(--cam-parilti), var(--cam-dolgu);
  box-shadow: var(--cam-isik), var(--cam-golge-2);
  isolation: isolate; filter: none;
  transition: transform var(--cam-bas) ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:root[data-cam-etkin] .gorunum-arac #btnPlanaEkle svg.ikon { width: 18px; height: 18px; stroke-width: 1.75; }
@media (hover: hover) {
  :root[data-cam-etkin] .gorunum-arac :is(.ay-bar, .arac-grup) .yuvarlak-btn:hover { background: var(--cam-ust); color: var(--metin); }
  :root[data-cam-etkin] .gorunum-arac #btnPlanaEkle:hover {
    background: linear-gradient(var(--cam-ust), var(--cam-ust)), var(--cam-parilti), var(--cam-dolgu); filter: none;
  }
}
:root[data-cam-etkin] .gorunum-arac :is(.ay-bar, .arac-grup) .yuvarlak-btn:active,
:root[data-cam-etkin] .gorunum-arac #btnPlanaEkle:active { transform: scale(.97); }
:root[data-cam-etkin] .gorunum-arac :is(.yuvarlak-btn, #btnPlanaEkle, #btnOdemeEkle):focus-visible {
  outline: 2px solid var(--cam-odak); outline-offset: 2px;
}

/* Masaüstü: sağ üstte SABİT cam araç çubuğu (içerik altından kayar → bulanık). Sağ kenar, içerik sütununun sağ kenarıyla hizalı
   (geniş ekranda .gorunum max-width'i dolunca ekran kenarına kaçmaz). top 26 = başlık satırının (52) ortası − 22. */
@media (min-width: 1024px) {
  :root[data-cam-etkin] .gorunum-arac {
    position: fixed; z-index: 30; top: 26px;
    right: max(28px, calc(100% - var(--cam-k-icerik-sol) - 20px - var(--cam-k-icerik-max)));
    margin: 0;
  }
  :root[data-cam-etkin][data-tema] .gorunum-arac :is(.ay-bar, .arac-grup),
  :root[data-cam-etkin] .gorunum-arac #btnPlanaEkle {
    -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre);
  }
  /* Başlık satırı araç çubuğuna yer bırakır; görünümden önce görünen İLK şerit (hatırlatma/uyarı, #gorunumUst'tan önce
     duruyorsa) de aynı satıra düşer → onun sağı da ayrılır (araç çubuğu şeridin düğmelerini örtmesin). */
  :root[data-cam-etkin] main:has(> .gorunum.aktif > .gorunum-arac) > #gorunumUst { padding-right: var(--cam-k-arac-gen); }
  :root[data-cam-etkin] main:has(> .gorunum.aktif > .gorunum-arac) > :is(.hatirlatma-serit, .uyari-serit):not(.gizli):nth-child(1 of :is(.hatirlatma-serit, .uyari-serit):not(.gizli)):not(#gorunumUst ~ *) {
    margin-right: var(--cam-k-arac-gen);
  }
}
/* Dar ekran: araç çubuğu akışta, başlığın altında tam genişlik; ay kapsülü içerikle birlikte kayar → BULANIKSIZ Regular cam
   (doğrulanmış ray opaklığı; arkasında yalnız zemin var). Birincil eylem esner, ikincil cam daire yanında. */
@media (max-width: 1023px) {
  :root[data-cam-etkin] .gorunum-arac { flex-wrap: wrap; margin: 0 0 18px; }
  :root[data-cam-etkin][data-tema] .gorunum-arac :is(.ay-bar, .arac-grup) { flex: 1 1 100%; }
  :root[data-cam-etkin] .gorunum-arac .ay-bar .ay-adi { flex: 1 1 auto; font-size: 15px; }
  :root[data-cam-etkin] .gorunum-arac .eylemler { flex: 1 1 100%; }
  :root[data-cam-etkin] .gorunum-arac #btnOdemeEkle { flex: 1 1 auto; }
}

/* İçerikteki ay çubukları (Ödeme Planı, Tahsilat, Raporlar, karşılaştırma) ve Özet'te araç çubuğundan ayrılan ay özeti satırı:
   araç çubuğu DEĞİL, içerik penceresi (kart malzemesi, bulanıklık YOK — §C-1; v467 opaklık tablosu aynen). Eski 1 px kutu kalkar. */
:root[data-cam-etkin][data-tema] .gorunum > :is(.ay-bar, .ay-ozet) {
  gap: 8px 12px; margin: 0 0 18px; padding: 8px 14px 8px 8px;
  border: 0; border-radius: var(--cam-r-kart);
  background: var(--cam-parilti-pencere), var(--cam-pencere);
  box-shadow: var(--cam-isik), var(--cam-golge-1);
}
:root[data-cam-etkin][data-tema] .gorunum > .ay-ozet { margin-left: 0; padding: 8px; }
:root[data-cam-etkin][data-tema] .gorunum > .ay-ozet:empty { display: none; }
:root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cam-ic); color: var(--metin);
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn svg.ikon { width: 18px; height: 18px; stroke-width: 1.75; }
@media (hover: hover) {
  :root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn:hover { background: var(--cam-ust); color: var(--metin); }
}
:root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn:active { transform: scale(.94); }
:root[data-cam-etkin] .gorunum > .ay-bar .ay-adi {
  min-width: 150px; font: 600 17px/22px var(--cam-font); letter-spacing: var(--cam-iz-baslik); color: var(--metin);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 1023px) {
  :root[data-cam-etkin][data-tema] .gorunum > :is(.ay-bar, .ay-ozet) { border-radius: var(--cam-r-kart-dar); padding: 6px; }
  :root[data-cam-etkin] .gorunum > .ay-bar .ay-adi { flex: 1 1 auto; min-width: 0; text-align: center; }
  :root[data-cam-etkin] .gorunum > .ay-bar > .ay-ozet { flex: 1 1 100%; margin-left: 0; padding: 0 2px 2px; }
}

/* =====================================================================================================================
   3) MASAÜSTÜ KENAR ÇUBUĞU (≥ 1024) — Apple Mac sidebar (E1)
   ===================================================================================================================== */
/* Sayaç rozeti (Teslimat bekleyen dosya — js/teslimat.js yazar; Komuta rozetin METNİNİ okur, görünümünü değil): style.css 10/800 →
   12/700, kapsül 20 px (duzeltme-2, taste-2 T1: 12 px altı yazı 0, ağırlık yalnız 400/600/700). Her genişlikte (ray, dar Menü sayfası). */
:root[data-cam-etkin] .alt-menu .menu-rozet {
  min-width: 20px; height: 20px; padding: 0 6px; font: 700 12px/20px var(--cam-font);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0;
}
@media (min-width: 1024px) {
  :root[data-cam-etkin][data-tema] .alt-menu {
    top: var(--cam-k-ray-kenar); bottom: var(--cam-k-ray-kenar); left: var(--cam-k-ray-kenar); right: auto;
    width: var(--cam-k-ray-gen);
    padding: 14px 10px 0; border: 0; border-radius: var(--cam-r-kabuk);   /* alt boşluk Hesap kutusunda (yapışkan) */
    background: var(--cam-parilti), var(--cam-dolgu);            /* Regular = v467 sol ray opaklığı (doğrulanmış) */
    box-shadow: var(--cam-isik), var(--cam-golge-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;         /* içerikle çakışmaz → bulanıklık yok (§C-1) */
    isolation: isolate;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    scroll-padding-block: 8px 88px;                               /* scrollIntoView (menu.js aktifiGoster) Hesap kutusunun ALTINA bırakmasın */
    transition: none;                                             /* eski width .22s + zemin.css background geçişi kalkar */
  }
  /* Sütun düzeni (flex): Hesap kutusu en altta. Komuta'da ray display:none kalır (komuta.css) — bu yüzden :not(.komuta-modu). */
  /* "Menü" aç/kapa düğmesi (mobilmenu.js her genişlikte ekler) yalnız dar ekranın; masaüstü rayda anlamsız ve en dipte Hesap'ın
     altında asılı kalıyordu → gizli (klavye sırasından da çıkar). */
  :root[data-cam-etkin] .alt-menu .menu-ac-kapa { display: none; }
  :root[data-cam-etkin] body:not(.komuta-modu) .alt-menu { display: flex; flex-direction: column; gap: 2px; }
  :root[data-cam-etkin] .alt-menu > *, :root[data-cam-etkin] .alt-menu button, :root[data-cam-etkin] .alt-menu .menu-grup > * { flex-shrink: 0; }

  /* Marka: monogram 32 (köşe 9) 13/700 + ad 15/600 + alt satır 12/400 (BÜYÜK HARF yok). duzeltme-2 (taste-2 T1): 13,5 → 13 (ölçek),
     500 → 400 (ağırlık yalnız 400/600/700 — D7) */
  :root[data-cam-etkin] .alt-menu .yan-marka { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px 8px; }
  :root[data-cam-etkin] .alt-menu .yan-logo { width: 32px; height: 32px; border-radius: 9px; font: 700 13px/1 var(--cam-font); }
  :root[data-cam-etkin] .alt-menu .yan-ad { font: 600 15px/18px var(--cam-font); letter-spacing: -.015em; }
  :root[data-cam-etkin] .alt-menu .yan-alt-ad {
    font: 400 12px/16px var(--cam-font); letter-spacing: 0; text-transform: none; color: var(--cam-soluk);
  }
  /* Raptiye (yalnız kompakt aralıkta anlamlı; ≥ 1280'de ray hep açık — S5) */
  :root[data-cam-etkin] .alt-menu .menu-sabit-btn {
    width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--cam-soluk);
    transition: background-color 120ms ease, color 120ms ease;
  }
  :root[data-cam-etkin] .alt-menu .menu-sabit-btn[aria-pressed="true"] { background: var(--cam-sec); color: var(--vurgu); }

  /* Arama kapsülü 32 px (--cam-ic, kenar yok) + büyüteç */
  :root[data-cam-etkin] .alt-menu .menu-araclar { position: relative; padding: 0 2px 8px; }
  :root[data-cam-etkin] .alt-menu .menu-araclar::before {
    content: ""; position: absolute; left: 12px; top: 7px; width: 18px; height: 18px; pointer-events: none;
    background: var(--cam-soluk);
    -webkit-mask: var(--cam-k-ikon-ara) center / contain no-repeat; mask: var(--cam-k-ikon-ara) center / contain no-repeat;
  }
  :root[data-cam-etkin] .alt-menu #menuAra {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 32px; padding: 0 12px 0 34px; border: 0; border-radius: var(--cam-r-kapsul);
    background: var(--cam-ic); color: var(--metin); font: 400 13px/18px var(--cam-font);
  }
  :root[data-cam-etkin] .alt-menu #menuAra::placeholder { color: var(--cam-soluk); opacity: 1; }
  :root[data-cam-etkin] .alt-menu #menuAra:focus-visible { outline: 2px solid var(--cam-odak); outline-offset: 0; }

  /* Bölüm başlıkları (Nakit · Finans · Operasyon) — 12/600 --cam-soluk, başlık biçimi; aramada gizli */
  :root[data-cam-etkin] .alt-menu .ray-bolum {
    padding: 12px 10px 4px; font: 600 12px/16px var(--cam-font); letter-spacing: 0; text-transform: none; color: var(--cam-soluk);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :root[data-cam-etkin] .alt-menu .menu-araclar + .ray-bolum { padding-top: 6px; }

  /* Öğe: 32 px, köşe 16 (26 − 10), 14/400 --metin (duzeltme-2: 500 → 400, macOS kenar çubuğu öğesi Regular; D7 3 ağırlık), ikon 18 --cam-soluk; aktif = --cam-sec + 600 + ikon --vurgu; eski sol vurgu
     şeridi (::before) ve 1 px halka kalkar. Odak halkası içeride (ray kırpmasın). */
  :root[data-cam-etkin] .alt-menu button[data-gorunum] {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: center; justify-items: start;
    height: 32px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--cam-r-ray-oge);
    font: 400 14px/18px var(--cam-font); letter-spacing: -.01em; text-align: left; color: var(--metin);
    background: transparent; box-shadow: none;
    transition: background-color 120ms ease, color 120ms ease, transform var(--cam-bas) ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  :root[data-cam-etkin] .alt-menu button[data-gorunum] svg.ikon { width: 18px; height: 18px; stroke-width: 1.75; color: var(--cam-soluk); }
  :root[data-cam-etkin] .alt-menu button[data-gorunum] .menu-yazi { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  :root[data-cam-etkin] .alt-menu button[data-gorunum].aktif { background: var(--cam-sec); color: var(--metin); font-weight: 600; box-shadow: none; }
  :root[data-cam-etkin] .alt-menu button[data-gorunum].aktif svg.ikon { color: var(--vurgu); }
  :root[data-cam-etkin] .alt-menu button[data-gorunum].aktif::before { content: none; }
  :root[data-cam-etkin] .alt-menu button[data-gorunum]:active { transform: scale(.97); }
  :root[data-cam-etkin] .alt-menu .menu-rozet { top: 6px; right: 8px; }   /* 32 px satırın dikey ortası (rozet 20 px — dosyanın üstünde) */
  :root[data-cam-etkin] .alt-menu :is(button, input):focus-visible { outline: 2px solid var(--cam-odak); outline-offset: -2px; }

  /* Projeler grubu başlığı = bölüm başlığı + açılır ok (sağda). Eski yapışkan degrade bant kalkar. */
  :root[data-cam-etkin] .alt-menu .menu-grup-ust {
    position: static; display: flex; align-items: center; gap: 6px;
    height: 28px; min-height: 28px; margin-top: 8px; padding: 0 10px; border: 0; border-radius: 14px;
    background: none; box-shadow: none; opacity: 1;
    font: 600 12px/16px var(--cam-font); letter-spacing: 0; text-transform: none; color: var(--cam-soluk);
    transition: background-color 120ms ease, color 120ms ease;
  }
  :root[data-cam-etkin] .alt-menu .menu-grup-ust .oklu { order: 2; margin-left: auto; width: 12px; height: 12px; stroke-width: 2; }

  /* Hesap kutusu: en altta, yapışkan (uzun menü — Projeler açıkken 800 px yükseklikte ~400 px taşar — kayarken hep görünür);
     eski üst çizgi yerine boşluk. Altından kayan öğeler 18 px'lik yumuşak bir kenarda söner (çizgi YOK; ray ile aynı nötr dolgu,
     daha opak). Kutu: --cam-ic tonu, avatar 30 (vurgu→bilgi degrade daire), sağda dişli. */
  :root[data-cam-etkin] .alt-menu .yan-alt {
    display: block; position: sticky; bottom: 0; z-index: 1;
    margin: auto -10px 0; padding: 18px 10px 10px; border: 0;
    background: linear-gradient(180deg, transparent 0, var(--panel) 18px);   /* yedek (view timeline yoksa): %90 bile sızdırıyordu */
  }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; column-gap: 10px;
    width: 100%; height: 52px; padding: 0 12px 0 10px; border: 0; border-radius: var(--cam-r-ray-oge);
    background: linear-gradient(var(--cam-ic), var(--cam-ic)), color-mix(in srgb, var(--panel-ust) 92%, transparent);
    color: var(--metin); text-align: left; box-shadow: none;
    transition: background-color 120ms ease, transform var(--cam-bas) ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan svg.ikon {
    width: 30px; height: 30px; padding: 7px; border-radius: 50%; stroke-width: 1.9; color: var(--metin);
    background: linear-gradient(140deg, color-mix(in srgb, var(--vurgu) 55%, var(--panel)), color-mix(in srgb, var(--bilgi) 50%, var(--panel)));
  }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan .menu-yazi { min-width: 0; font: 600 13px/16px var(--cam-font); color: var(--metin); }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan .menu-yazi::after {
    content: "Ayarlar · Görünüm"; content: "Ayarlar · Görünüm" / "";
    display: block; font: 400 12px/16px var(--cam-font); color: var(--cam-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* v470 düzeltme turu (okunurluk ÖNERİ): aydınlıkta Ayarlar penceresinin perdesi altında alt yazı 4,24:1'e iniyordu (Yıldız Işığı + Kumul
     canlı; canlı v469 Porselen 4,47) → rengi %20 metne kaydır. Yalnız EKLEME (üstteki kural aynen). */
  :root[data-cam-etkin][data-tema="aydinlik"] .alt-menu #btnAyarlarYan .menu-yazi::after { color: color-mix(in srgb, var(--cam-soluk) 80%, var(--metin)); }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan::after {
    content: ""; width: 18px; height: 18px; background: var(--cam-soluk);
    -webkit-mask: var(--cam-k-ikon-ayar) center / contain no-repeat; mask: var(--cam-k-ikon-ayar) center / contain no-repeat;
  }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan:active { transform: scale(.98); }

  @media (hover: hover) {
    :root[data-cam-etkin] .alt-menu button[data-gorunum]:not(.aktif):hover,
    :root[data-cam-etkin] .alt-menu .menu-grup-ust:hover,
    :root[data-cam-etkin] .alt-menu .menu-sabit-btn:hover { background: var(--cam-ust); color: var(--metin); }
    :root[data-cam-etkin] .alt-menu #btnAyarlarYan:hover {
      background: linear-gradient(var(--cam-ust), var(--cam-ust)), color-mix(in srgb, var(--panel-ust) 92%, transparent);
    }
  }

  /* Kaydırma kenarı (ray içi): uzun menüde öğeler Hesap kutusunun altına girerken YUMUŞAKÇA SÖNER — kaydırmaya bağlı opaklık
     (view timeline; alt kenar = kutunun üstü, 80 px). Kutu böylece maketteki gibi yalnız --cam-ic tonunda kalır (çizgi/bant yok).
     Desteklemeyen tarayıcıda (Firefox) üstteki yedek geçerli: bant + neredeyse opak kutu. */
  @supports (animation-timeline: view()) {
    :root[data-cam-etkin] .alt-menu :is(button[data-gorunum], .menu-grup-ust, .ray-bolum) {
      animation: camKabukRayKenar linear both;
      animation-timeline: view(block 0px 62px);   /* 01.10: 80 → 62 (Hesap düğmesi 52 + alt dolgu 10). 80 kutunun 18 px saydam üst dolgusunu
                                                    da kapsıyordu → en alttaki görünür öğe hiç kaydırılmadan ~.6 opaklıkta duruyordu (aydınlık 2,81–3,04) */
      animation-range: entry 0% entry 100%;
    }
    :root[data-cam-etkin] .alt-menu .yan-alt { background: none; }
    :root[data-cam-etkin] .alt-menu #btnAyarlarYan { background: var(--cam-ic); }
    :root[data-cam-etkin] .alt-menu #btnAyarlarYan:hover { background: var(--cam-ust); }
  }

  /* İçerik: rayın yanında, GEÇİŞ YOK (eski margin-left .22s ve body:has(.alt-menu:hover)/menu-genis itmesi burada ezilir) */
  :root[data-cam-etkin] body:not(.komuta-modu) main {
    margin-left: var(--cam-k-icerik-sol); padding: 22px 28px 48px 20px; max-width: none; transition: none;
  }
}

/* ≥ 1600: içerik sütunu (en çok --cam-k-icerik-max = 1680) ana alanın ORTASINDA (duzeltme-2, ≥ 1440 düzeni). 2560 px @1 ekranda sütun
   rayın yanına yaslı kalıyor, sağda ~600 px ölü şerit açılıyordu (KURALLAR v469 "bilinen riskler"). Fazla genişlik iki yana eşit: main'in
   iç boşluğuna eklenir (% = #uygulama genişliği, kaydırma çubuğu HARİÇ — sabit araç çubuğunun 100%'ü ile aynı ölçü, kaymaz). Sütun
   1680'e ulaşmadıkça (≤ 1979 px) ek = 0 → 1600–1979 px düzeni birebir aynı. Komuta HARİÇ (main kuralı body:not(.komuta-modu)). */
@media (min-width: 1600px) {
  :root[data-cam-etkin] body:not(.komuta-modu) main {
    --cam-k-orta: max(0px, (100% - var(--cam-k-icerik-sol) - 48px - var(--cam-k-icerik-max)) / 2);
    padding-left: calc(20px + var(--cam-k-orta)); padding-right: calc(28px + var(--cam-k-orta));
  }
  :root[data-cam-etkin] .gorunum-arac {
    right: calc(28px + max(0px, (100% - var(--cam-k-icerik-sol) - 48px - var(--cam-k-icerik-max)) / 2));
  }
}

/* ---------- 3a) ≥ 1280: HER ZAMAN AÇIK (raptiye gizli — S5) ---------- */
@media (min-width: 1280px) {
  :root[data-cam-etkin][data-tema] .alt-menu { clip-path: none; }
  :root[data-cam-etkin] .alt-menu :is(.menu-yazi, .yan-lockup, .menu-araclar) { opacity: 1; }
  :root[data-cam-etkin] .alt-menu .menu-araclar { pointer-events: auto; }
  :root[data-cam-etkin] .alt-menu .menu-sabit-btn { display: none; }
}

/* ---------- 3b) 1024–1279: KOMPAKT RAY 64 px — üzerine gelince / klavye odağında / raptiyede clip-path ile İÇERİĞİN ÜSTÜNE açılır
   (kalın cam, bulanık). İçerik itilmez. Açılış 220 ms yay, kapanış 140 ms (çıkış girişten hızlı); yalnız clip-path + opaklık.
   :focus-within DEĞİL :has(:focus-visible): fareyle tıklanan düğme odakta kalınca ray açık kalmasın. ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root[data-cam-etkin][data-tema] .alt-menu {
    padding: 14px 12px 0;
    clip-path: inset(0 calc(var(--cam-k-ray-gen) - var(--cam-k-ray-dar)) 0 0 round var(--cam-r-kabuk));
    box-shadow: var(--cam-isik);                         /* dış gölge kırpılırdı; kapalı şerit yalnız iç ışıkla */
    transition: clip-path 140ms ease-out;
  }
  :root[data-cam-etkin][data-tema] .alt-menu:hover,
  :root[data-cam-etkin][data-tema] .alt-menu:has(:focus-visible),
  :root[data-cam-etkin][data-tema] body.menu-genis .alt-menu {
    clip-path: inset(-48px -64px -64px -12px round var(--cam-r-kabuk));   /* negatif kırpma: kalın gölge görünsün */
    background: var(--cam-parilti), var(--cam-dolgu-kalin);
    -webkit-backdrop-filter: var(--cam-filtre-kalin); backdrop-filter: var(--cam-filtre-kalin);
    box-shadow: var(--cam-isik), var(--cam-golge-3);
    transition: clip-path 220ms var(--cam-yay);
  }
  /* Kapalıyken öğe 40×40 ikon düğmesi (köşe 14), etiketler/başlıklar saydam ama YER TUTAR (açılınca ikonlar zıplamaz) */
  :root[data-cam-etkin] .alt-menu button[data-gorunum] { width: 40px; height: 40px; min-height: 40px; padding: 0 11px; border-radius: 14px; }
  :root[data-cam-etkin] .alt-menu .yan-marka { padding: 4px 2px 12px 4px; }
  :root[data-cam-etkin] .alt-menu .ray-bolum { padding: 10px 10px 2px; }
  :root[data-cam-etkin] .alt-menu .menu-grup-ust { width: 100%; }
  :root[data-cam-etkin] .alt-menu .yan-alt { margin: auto -12px 0; padding: 18px 12px 10px; }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan { padding: 0 12px 0 5px; background: transparent; }
  :root[data-cam-etkin] .alt-menu :is(.menu-yazi, .yan-lockup, .menu-araclar, .menu-sabit-btn),
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan::after {
    opacity: 0; transition: opacity 100ms ease-out;
  }
  /* Bölüm başlıkları opaklığı ray içi kaydırma kenarı animasyonuna ait → kapalıyken renkle saydamlaşır */
  :root[data-cam-etkin] .alt-menu :is(.ray-bolum, .menu-grup-ust) { color: transparent; transition: color 100ms ease-out; }
  :root[data-cam-etkin] .alt-menu .menu-araclar { pointer-events: none; }

  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) button[data-gorunum] { width: auto; }
  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) :is(.menu-yazi, .yan-lockup, .menu-araclar, .menu-sabit-btn),
  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) #btnAyarlarYan::after {
    opacity: 1; transition: opacity 160ms ease-out 40ms;
  }
  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) :is(.ray-bolum, .menu-grup-ust) {
    color: var(--cam-soluk); transition: color 160ms ease-out 40ms;
  }
  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) .menu-araclar { pointer-events: auto; }
  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) #btnAyarlarYan {
    padding: 0 12px 0 5px;
    background: linear-gradient(var(--cam-ic), var(--cam-ic)), color-mix(in srgb, var(--panel-ust) 92%, transparent);
  }
  @supports (animation-timeline: view()) {
    :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) #btnAyarlarYan { background: var(--cam-ic); }
  }
}

/* Kaydırma kenarı (masaüstü): içerik araç çubuğunun altına kayarken üst 48 px yumuşak bulanıklıkla erir (maske — çizgi YOK).
   Öğe js/cam.js'te (body sonuna); YALNIZ sivi kademesinde ve kaydırılmışken; giriş ekranında ve Komuta'da yok. Ölçüm kapısından
   (§C-6) geçmezse ilk kaldırılacak katman budur. */
:root[data-cam-etkin] .cam-kaydirma-kenari { display: none; }
@media (min-width: 1024px) {
  :root[data-cam-etkin="sivi"].cam-kaydirildi body:not(.komuta-modu):has(> #uygulama:not(.gizli)) > .cam-kaydirma-kenari {
    display: block; position: fixed; z-index: 25; top: 0; left: var(--cam-k-icerik-sol); right: 0; height: 48px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%);
  }
}

/* =====================================================================================================================
   4) DAR EKRAN (< 1024) — iOS 26: yüzen kapsül sekme çubuğu, alttan cam Menü sayfası, kanvas üstü üst çubuk (E3)
   ===================================================================================================================== */
@media (max-width: 1023px) {
  /* ---- Sekme çubuğu: kenarlardan 16 px, 64 px kapsül, cam Regular BULANIK (içerik altından kayar) ---- */
  :root[data-cam-etkin][data-tema] .alt-menu {
    --mm-yukseklik: var(--cam-k-sekme-yuk);
    left: 16px; right: 16px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom));
    height: var(--cam-k-sekme-yuk); max-height: var(--mm-yukseklik);
    padding: 6px; gap: 0; border: 0; border-radius: 32px;
    background: var(--cam-parilti), var(--cam-dolgu);
    -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre);
    box-shadow: var(--cam-isik), var(--cam-golge-2);
    isolation: isolate;
  }
  /* Sekme: ikon 23 + etiket 12/600 (duzeltme-2, taste-2 T1: eski 11,5 px istisnası kalktı — 12 px altı yazı 0; 5 sütunda 69 px,
     en uzun kısa etiket "Ödemeler" 12/600 ≈ 56 px sığar), köşe 26 (32 − 6 eşmerkezli).
     İkincil gri YOK (D-2): seçili --vurgu, diğerleri --metin. */
  :root[data-cam-etkin] .alt-menu button:is(.hizli, .menu-ac-kapa) {
    display: grid; justify-items: center; align-content: center; gap: 3px;
    height: 52px; min-height: 0; padding: 0 2px; border: 0; border-radius: var(--cam-r-damla);
    font: 600 12px/14px var(--cam-font); letter-spacing: -.01em; color: var(--metin);
    background: transparent; box-shadow: none;
    transition: background-color 120ms ease, color 120ms ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  :root[data-cam-etkin] #btnMenuAcKapa { color: var(--metin); }
  :root[data-cam-etkin] .alt-menu button:is(.hizli, .menu-ac-kapa) svg.ikon { width: 23px; height: 23px; stroke-width: 1.8; }
  :root[data-cam-etkin] .alt-menu button:is(.hizli, .menu-ac-kapa) .menu-yazi { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root[data-cam-etkin] body:not(.menu-acik) .alt-menu button.hizli.aktif { color: var(--vurgu); background: var(--cam-sec); box-shadow: var(--cam-isik); }
  :root[data-cam-etkin] .alt-menu button:focus-visible { outline: 2px solid var(--cam-odak); outline-offset: -2px; }
  /* Kısa etiket (mobilmenu.js ▸ MM_KISA): kapalı çubukta data-kisa görünür; tam ad aria-label'da ve Menü sayfasında */
  :root[data-cam-etkin] body:not(.menu-acik) .alt-menu button.hizli[data-kisa] .menu-yazi { display: none; }
  :root[data-cam-etkin] body:not(.menu-acik) .alt-menu button.hizli[data-kisa]::after {
    content: attr(data-kisa); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---- Menü sayfası (body.menu-acik): çubuk değil ALTTAN SAYFA — kalın cam bulanık, tutamak, 3 sütun ızgara ----
     max-height geçişi YOK (style.css:845 notu); açılış transform+opaklık 240 ms (dolgusuz → bitince transform kalmaz). */
  :root[data-cam-etkin][data-tema] body.menu-acik .alt-menu {
    --mm-yukseklik: 76vh;
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    height: auto; max-height: 76vh;
    padding: 8px 10px 10px; gap: 4px; border-radius: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--cam-parilti), var(--cam-dolgu-kalin);
    -webkit-backdrop-filter: var(--cam-filtre-kalin); backdrop-filter: var(--cam-filtre-kalin);
    box-shadow: var(--cam-isik), var(--cam-golge-3);
    overflow-y: auto; overscroll-behavior: contain;
    animation: camKabukSayfaYukari var(--cam-giris) var(--cam-yay), camKabukSolma var(--cam-giris) ease-out;
  }
  :root[data-cam-etkin][data-tema] body.menu-acik .alt-menu::before {
    position: static; width: 36px; height: 5px; margin: 0 0 4px; border-radius: 3px;
    background: color-mix(in srgb, var(--cam-soluk) 40%, transparent);
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu .menu-araclar {
    grid-column: 1 / -1; position: relative; top: auto; z-index: auto; padding: 0 0 4px; background: none;
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu .menu-araclar::before {
    content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; pointer-events: none;
    background: var(--cam-soluk);
    -webkit-mask: var(--cam-k-ikon-ara) center / contain no-repeat; mask: var(--cam-k-ikon-ara) center / contain no-repeat;
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu #menuAra {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 44px; padding: 0 14px 0 40px; border: 0; border-radius: var(--cam-r-kapsul);
    background: var(--cam-ic); color: var(--metin); font: 400 16px/22px var(--cam-font);   /* 16: iOS yakınlaştırması (FO-18) */
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu #menuAra::placeholder { color: var(--cam-soluk); opacity: 1; }
  :root[data-cam-etkin] body.menu-acik .alt-menu #menuAra:focus-visible { outline: 2px solid var(--cam-odak); outline-offset: 0; }
  :root[data-cam-etkin] body.menu-acik .alt-menu .ray-bolum {
    grid-column: 1 / -1; padding: 10px 12px 2px; font: 600 12px/16px var(--cam-font); color: var(--cam-soluk);
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu.menu-ariyor .ray-bolum { display: none; }
  :root[data-cam-etkin] body.menu-acik .alt-menu button[data-gorunum] {
    display: grid; justify-items: center; align-content: center; gap: 4px;
    height: auto; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 18px;
    font: 600 12px/16px var(--cam-font); letter-spacing: -.005em; color: var(--metin);
    background: transparent; box-shadow: none; white-space: normal;
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu button[data-gorunum] svg.ikon { width: 24px; height: 24px; stroke-width: 1.75; }
  :root[data-cam-etkin] body.menu-acik .alt-menu button[data-gorunum] .menu-yazi {
    max-width: 100%; text-align: center; white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu button[data-gorunum].aktif { color: var(--vurgu); background: var(--cam-sec); box-shadow: var(--cam-isik); }
  :root[data-cam-etkin] body.menu-acik .alt-menu .menu-grup-ust {
    width: 100%; min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 14px;
    font: 600 12px/16px var(--cam-font); letter-spacing: 0; text-transform: none; opacity: 1; color: var(--cam-soluk); background: none;
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu .menu-grup-ust .oklu { order: 2; margin-left: auto; width: 14px; height: 14px; }
  :root[data-cam-etkin] body.menu-acik .alt-menu .menu-grup-icerik { gap: 4px; }
  :root[data-cam-etkin] body.menu-acik .alt-menu .yan-alt { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; border: 0; }
  :root[data-cam-etkin] body.menu-acik .alt-menu #btnAyarlarYan {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 0;
    border-radius: 16px; background: var(--cam-ic); color: var(--metin); font: 600 15px/20px var(--cam-font);
  }
  :root[data-cam-etkin] body.menu-acik .alt-menu #btnAyarlarYan svg.ikon { width: 22px; height: 22px; stroke-width: 1.75; }
  /* Kapat: sayfanın dibinde yapışkan kapsül. Altından öğe geçer → koyu zeminde %10 sızıntı bile okunuyor (ölçüldü: 37 vs 16 düzey)
     → yedekte OPAK alt katman; kaydırmaya bağlı solma destekleniyorsa öğeler kapsüle varmadan söner, kapsül cam tonunda kalır. */
  :root[data-cam-etkin][data-tema] body.menu-acik #btnMenuAcKapa {
    position: sticky; bottom: 0; grid-column: 1 / -1;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    height: 44px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: var(--cam-r-kapsul);
    font: 600 15px/20px var(--cam-font); color: var(--metin);
    background: linear-gradient(var(--cam-ic), var(--cam-ic)), var(--panel);
    box-shadow: var(--cam-isik);
  }
  :root[data-cam-etkin] body.menu-acik #btnMenuAcKapa svg.ikon { width: 18px; height: 18px; }
  @supports (animation-timeline: view()) {
    :root[data-cam-etkin] body.menu-acik .alt-menu :is(button[data-gorunum], .menu-grup-ust, .ray-bolum, .yan-alt) {
      animation: camKabukRayKenar linear both;
      animation-timeline: view(block 0px 74px);   /* kapsül (44) + 4 + 10 dolgu + 16 söndürme payı */
      animation-range: entry 0% entry 100%;
    }
    :root[data-cam-etkin][data-tema] body.menu-acik #btnMenuAcKapa {
      background: linear-gradient(var(--cam-ust), var(--cam-ust)), color-mix(in srgb, var(--panel) 85%, transparent);
    }
  }

  @media (hover: hover) {
    :root[data-cam-etkin] body.menu-acik .alt-menu button[data-gorunum]:not(.aktif):hover { background: var(--cam-ust); }
  }

  /* ---- Alt kaydırma kenarı: BULANIKSIZ degrade perde (ucuz) — içerik sekme çubuğunun altında yumuşakça söner.
     Üst %27'si saydam: main alt boşluğundaki (96 px) son içerik satırı hiç perdelenmez (okunurluk). ---- */
  :root[data-cam-etkin] body:not(.komuta-modu) #uygulama::after {
    content: ""; position: fixed; z-index: 29; left: 0; right: 0; bottom: 0; pointer-events: none;
    height: calc(132px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0, transparent 27%,
      color-mix(in srgb, var(--st-zemin-taban) 78%, transparent) 62%, color-mix(in srgb, var(--st-zemin-taban) 92%, transparent) 100%);
  }
  :root[data-cam-etkin] body:not(.komuta-modu) main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* Üst kaydırma kenarı (iOS scroll edge): YALNIZ kaydırılmışken, bulanıksız degrade — içerik yüzen monogram ve cam dairenin
     altından geçerken sakinleşir; kaydırma başındayken zemin tam görünür (perde saydam). */
  :root[data-cam-etkin] body:not(.komuta-modu) #uygulama::before {
    content: ""; position: fixed; z-index: 19; left: 0; right: 0; top: 0; pointer-events: none;
    height: calc(76px + env(safe-area-inset-top));
    background: linear-gradient(180deg, color-mix(in srgb, var(--st-zemin-taban) 86%, transparent) 0,
      color-mix(in srgb, var(--st-zemin-taban) 62%, transparent) 55%, transparent 100%);
    opacity: 0; transition: opacity 160ms ease-out;
  }
  :root[data-cam-etkin] body.kaydirildi:not(.komuta-modu) #uygulama::before { opacity: 1; }

  /* ---- Üst çubuk: arka plan YOK (kanvas), alt çizgi yok; monogram 36 solda, sağda 44 px cam daire. Yapışkan kalır; saydam
     alanı tıklamayı içeriğe geçirir. Kaydırılınca (760–1023) şirket adı söner; monogram Komuta düğmesi olduğu için kalır. ---- */
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar {
    gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) 16px 6px;
    background: transparent; border-bottom: 0; box-shadow: none; pointer-events: none; transition: none;
  }
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar > * { pointer-events: auto; }
  /* Monogram = "Komuta merkezine dön" düğmesi (komuta.js ▸ logoyuBagla): görsel 36 (köşe 10), isabet 44 (dolgu + içerik kutusu boyası) */
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .logo {
    width: 44px; height: 44px; padding: 4px; margin: 0 -4px; border-radius: 14px; background-clip: content-box; font-size: 14px;
  }
  :root[data-cam-etkin] body:not(.komuta-modu) #ustBaslik {
    font: 600 17px/22px var(--cam-font); letter-spacing: -.016em; color: var(--metin); transition: opacity 160ms ease-out;
  }
  :root[data-cam-etkin] body.kaydirildi:not(.komuta-modu) #ustBaslik { opacity: 0; }   /* içerik üstünde yüzen yazı kalmasın */
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn {
    width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--metin);
    background: var(--cam-parilti), var(--cam-dolgu-kayan);       /* 760–1023: bulanıksız → içerik altından kayan cam opaklığı */
    box-shadow: var(--cam-isik), var(--cam-golge-2);
    isolation: isolate; transition: transform var(--cam-bas) ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn svg.ikon { width: 20px; height: 20px; stroke-width: 1.75; }
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn:active { transform: scale(.94); }

  /* ---- Görünüm başlığı: iOS büyük başlık (32/38 < 760 — token cam-temel.css) ---- */
  :root[data-cam-etkin] #gorunumUst { min-height: 0; margin: 0 4px 16px; }
}
@media (max-width: 759px) {
  /* Şirket adı görsel olarak gizli (ekran okuyucuda kalır) — büyük başlık #gorunumUst'ta */
  :root[data-cam-etkin] body:not(.komuta-modu) #ustBaslik {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Cam daire (ince, BULANIK — §C-1: sabit, içerik altından kayar) */
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn {
    background: var(--cam-parilti), var(--cam-dolgu-ince);
    -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre);
  }
}

@keyframes camKabukRayKenar { from { opacity: 0; } to { opacity: 1; } }
@keyframes camKabukSayfaYukari { from { transform: translateY(24px); } to { transform: none; } }
@keyframes camKabukSolma { from { opacity: .55; } to { opacity: 1; } }

/* =====================================================================================================================
   5) HAREKET AZALTMA — yalnız solma; kompakt ray anında açılır/kapanır
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root[data-cam-etkin][data-tema] .alt-menu,
  :root[data-cam-etkin][data-tema] .alt-menu:hover,
  :root[data-cam-etkin][data-tema] .alt-menu:has(:focus-visible),
  :root[data-cam-etkin][data-tema] body.menu-genis .alt-menu { transition: none; }
  :root[data-cam-etkin][data-tema] body.menu-acik .alt-menu { animation: camKabukSolma var(--cam-cikis) ease-out; }
  :root[data-cam-etkin] .alt-menu :is(.menu-yazi, .yan-lockup, .ray-bolum, .menu-grup-ust, .menu-araclar, .menu-sabit-btn),
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan::after,
  :root[data-cam-etkin] :is(.alt-menu:hover, .alt-menu:has(:focus-visible), body.menu-genis .alt-menu) :is(.menu-yazi, .yan-lockup, .ray-bolum, .menu-grup-ust, .menu-araclar, .menu-sabit-btn),
  :root[data-cam-etkin] body:not(.komuta-modu) #ustBaslik,
  :root[data-cam-etkin] body:not(.komuta-modu) #uygulama::before { transition: none; }
}

/* =====================================================================================================================
   6) ENTEGRATÖR EKLERİ (v469 birleştirme — Görev 2 notu 5 + Görev 1 notu 3). Komuta dışı (body:not(.komuta-modu)).
   ===================================================================================================================== */
/* Okuma ilerleme şeridi: ekranın tepesinde 2 px vurgu degrade ÇİZGİ (style.css .kaydirma-ilerleme) — ince çizgi yok (D6) → gizli */
:root[data-cam-etkin] body:not(.komuta-modu) .kaydirma-ilerleme { display: none; }
/* Başa dön düğmesi: 1 px vurgu kenarı kalkar → içerik altından kayan cam daire. BULANIKSIZ (§C-1 listesinde yok, bütçeye girmez):
   bulanıklık yokken kayan cam opaklığı (--cam-dolgu-kayan %88) — arkasından geçen yazı düğmeye karışmaz. */
:root[data-cam-etkin] body:not(.komuta-modu) .kaydirma-yukari {
  border: 0; background: var(--cam-parilti), var(--cam-dolgu-kayan); box-shadow: var(--cam-isik), var(--cam-golge-2); isolation: isolate;
}
@media (hover: hover) {
  :root[data-cam-etkin] body:not(.komuta-modu) .kaydirma-yukari:hover {
    background: linear-gradient(var(--cam-ust), var(--cam-ust)), var(--cam-parilti), var(--cam-dolgu-kayan);
  }
}
/* Dokunma (ET-11/12): kabuktaki bütün düğmeler — denetim.mjs touchActionYok ölçümünde ray/sekme düğmeleri ve Projeler grup başlığı kaldı */
:root[data-cam-etkin] :is(.alt-menu, .ust-bar, .gorunum-arac) :is(button, a, [role="button"], [tabindex]:not([tabindex="-1"])),
:root[data-cam-etkin] body:not(.komuta-modu) .kaydirma-yukari,
:root[data-cam-etkin] main > .gorunum:not(#komutaGorunum) summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* DEMO rozeti (yalnız ?demo=1; js/demo.js satır içi "bottom: calc(12px + var(--cam-k-demo-alt, 0px))") dar ekranda yüzen sekme
   çubuğunun ORTASINI örtüyordu → çubuğun üstüne çıkar. Gerçek kullanıcıda öğe yok. */
/* ⚠️ 01.10 (doğrulama, yönetici (d)): altta ortada rozet Özet'te "Tabloyu göster"i, Para'da "Hesap Ekle"yi, Plan/Tahsilat satırlarını
   örtüyordu → ekranın TEPESİNE, boş banda: dar ekranda logo ile profil düğmesi arası; ≥ 1160 px'te başlık ile sabit araç çubuğu arası
   (1024–1159'da Özet araç çubuğuyla çakışacağı için altta kalır). js/demo.js satır içi: top: var(--cam-k-demo-ust, auto);
   bottom: var(--cam-k-demo-alt, 12px) — değişken yokken (Komuta, cam kapalı) v468 konumu AYNEN. */
@media (max-width: 1023px) {
  :root[data-cam-etkin] body:not(.komuta-modu) { --cam-k-demo-ust: calc(8px + env(safe-area-inset-top)); --cam-k-demo-alt: auto; }
}
@media (min-width: 1160px) {
  :root[data-cam-etkin] body:not(.komuta-modu) { --cam-k-demo-ust: 8px; --cam-k-demo-alt: auto; }
}

/* =====================================================================================================================
   7) DOĞRULAMA DÜZELTMELERİ (01.10.2026 — Vercel §1, okunurluk, kod incelemesi; kanıt tasarim-v469/dogrula/duzeltme/)
   ===================================================================================================================== */
/* OD-02 (WCAG 2.2 2.4.11): klavyeyle odaklanan öğe sabit cam araç çubuğunun (top 22 + 44) ve 48 px kaydırma kenarı şeridinin, dar ekranda
   yüzen sekme çubuğunun altında kalıyordu (masaüstü v469 ile geldi: Özet'te "Tahsil Edildi"/"Düzenle" %100 örtülü). Sıralı odak
   kaydırması bu payları bırakır. Boyamayı etkilemez (Komuta farkı 0 ölçüldü). */
@media (min-width: 1024px) {
  :root[data-cam-etkin] { scroll-padding-top: 80px; }
}
@media (max-width: 1023px) {
  :root[data-cam-etkin] {
    scroll-padding-top: calc(64px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(var(--cam-k-sekme-yuk) + 32px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 1024px) {
  /* Masaüstü arama süzerken bölüm başlıkları gizli (E1; dar ekran Menü sayfasında zaten vardı — §4 menu-ariyor) */
  :root[data-cam-etkin] .alt-menu.menu-ariyor .ray-bolum { display: none; }
}
/* Yüksek kontrast: rayın dibindeki kaydırmaya bağlı sönme yok (öğe devre dışı gibi görünmesin — prefers-contrast 3,14 ölçüldü) */
@media (prefers-contrast: more) {
  :root[data-cam-etkin] .alt-menu :is(button[data-gorunum], .menu-grup-ust, .ray-bolum) { animation: none; }
  /* sönme yokken altına kayan öğe Hesap kutusunun ardında görünmesin: §3'teki opak alt bant yedeği (view timeline'sız tarayıcılarla aynı) */
  :root[data-cam-etkin] .alt-menu .yan-alt { background: linear-gradient(180deg, transparent 0, var(--panel) 18px); }
}
/* Dar ekran: başa dön düğmesi (↑, alttan 88 + 44 px) sayfa sonunda son kartın düğmelerine biniyordu → içerik alt boşluğu düğmeyi aşar */
@media (max-width: 1023px) {
  :root[data-cam-etkin] body:not(.komuta-modu) main { padding-bottom: calc(144px + env(safe-area-inset-bottom)); }
}

/* =====================================================================================================================
   8) v470 MİKRO ETKİLEŞİMLER — kabuk (KURALLAR v470 ▸ "Mikro etkileşimler"). YALNIZ EKLEME; yukarıdaki kurallar aynen.
   ===================================================================================================================== */
/* ---- a) SEÇİM DAMLASI (js/cam.js ▸ camSecimDamlasi; #altMenu gözcüsü): kenar çubuğunda seçim eski öğeden yenisine DİKEY, dar ekran
   sekme çubuğunda YATAY esneyerek kayar; bitince gizlenir, öğe KENDİ seçili zeminine döner (dinlenme hâli §3/§4 ile birebir). Damla =
   seçili öğenin dolgusu (kenar çubuğu --cam-sec, köşe 16 · sekme çubuğu --cam-sec + --cam-isik, köşe 26). #altMenu zaten izole
   (isolation) → z −1: rayın camının üstünde, yazının ve yapışkan Hesap kutusunun (z 1) altında. Menü sayfası açıkken yok. ---- */
:root[data-cam-etkin] .alt-menu > .cam-damla {
  display: block; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; transform-origin: 0 0;
  margin: 0; padding: 0; border: 0; border-radius: var(--cam-r-ray-oge); background: var(--cam-sec); box-shadow: none;
  opacity: 0;
}
:root[data-cam-etkin] .alt-menu > .cam-damla[data-cam-damla-etkin] { opacity: 1; }
:root[data-cam-etkin] body .alt-menu button[data-gorunum].aktif[data-cam-damla-hedef] { background: transparent; box-shadow: none; }
@media (max-width: 1023px) {
  :root[data-cam-etkin] .alt-menu > .cam-damla { border-radius: var(--cam-r-damla); box-shadow: var(--cam-isik); }
  :root[data-cam-etkin] body:not(.menu-acik) .alt-menu button.hizli.aktif[data-cam-damla-hedef] { background: transparent; box-shadow: none; }
}
:root[data-cam-etkin] body.menu-acik .alt-menu > .cam-damla,
:root[data-cam-etkin] body.komuta-modu .alt-menu > .cam-damla { display: none; }

/* ---- b) BASMA — gecikmesiz içe + yayla bırakış (cam-temel §8; cam-bilesen §12a ile aynı dil). Seçiciler ve geçiş özellikleri v469
   kurallarının AYNISI, yalnız transform'un süre/eğrisi. ---- */
:root[data-cam-etkin] .gorunum-arac #btnPlanaEkle,
:root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn { transition: transform var(--cam-birak) var(--cam-yay-birak); }
:root[data-cam-etkin] .gorunum-arac #btnPlanaEkle:active,
:root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn:active { transition: transform var(--cam-bas-in) var(--cam-bas-egri); }
:root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn { transition: background-color 120ms ease, transform var(--cam-birak) var(--cam-yay-birak); }
:root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn:active { transition: background-color 120ms ease, transform var(--cam-bas-in) var(--cam-bas-egri); }
@media (min-width: 1024px) {
  :root[data-cam-etkin] .alt-menu button[data-gorunum] {
    transition: background-color 120ms ease, color 120ms ease, transform var(--cam-birak) var(--cam-yay-birak);
  }
  :root[data-cam-etkin] .alt-menu button[data-gorunum]:active {
    transition: background-color 120ms ease, color 120ms ease, transform var(--cam-bas-in) var(--cam-bas-egri);
  }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan { transition: background-color 120ms ease, transform var(--cam-birak) var(--cam-yay-birak); }
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan:active { transition: background-color 120ms ease, transform var(--cam-bas-in) var(--cam-bas-egri); }
}
/* Dar ekran sekme çubuğu: iOS 26 sekmesi basılıyken içerik hafifçe küçülür (.94), bırakınca yayla döner */
@media (max-width: 1023px) {
  :root[data-cam-etkin] .alt-menu button:is(.hizli, .menu-ac-kapa) {
    transition: background-color 120ms ease, color 120ms ease, transform var(--cam-birak) var(--cam-yay-birak);
  }
  :root[data-cam-etkin] body:not(.menu-acik) .alt-menu button:is(.hizli, .menu-ac-kapa):active {
    transform: scale(.94);
    transition: background-color 120ms ease, color 120ms ease, transform var(--cam-bas-in) var(--cam-bas-egri);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-cam-etkin] .alt-menu > .cam-damla { display: none; }
  :root[data-cam-etkin] .gorunum-arac #btnPlanaEkle:active,
  :root[data-cam-etkin] body:not(.komuta-modu) .ust-bar .yuvarlak-btn:active,
  :root[data-cam-etkin] .gorunum > .ay-bar .yuvarlak-btn:active,
  :root[data-cam-etkin] body:not(.menu-acik) .alt-menu button:is(.hizli, .menu-ac-kapa):active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  :root[data-cam-etkin] .alt-menu button[data-gorunum]:active,
  :root[data-cam-etkin] .alt-menu #btnAyarlarYan:active { transform: none; }
}
@media (forced-colors: active) {
  :root[data-cam-etkin] .alt-menu > .cam-damla { display: none; }
}