/* v469 CAM BİLEŞEN — Görev 3 (MIMARI §E5–E7, E9–E13): düğme, segment, form, sayfa, menü, bildirim, çip, boş/iskelet. LF.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   Yalnız TÜKETİR: --cam-* çekirdek token'ları css/cam-temel.css'te (Görev 1). Bu dosyanın kendi ekleri --cam-b-* önekli.
   KAPSAM: bütün kurallar :root[data-cam-etkin] önekli (D18) → ?demo=1&cam=kapali = aynı yapıda v468 görünümü. JS YOK.
   ⚠️ Komuta seçicisi YAZILMAZ (#komutaGorunum, .foton, .fk-*, .km-*) — D2. Komuta'dan açılan sayfa/bildirim ortak katmandır.
   ⚠️ Bulanıklık (§C-1) bu dosyada YALNIZ: sayfa (.modal-fon > .modal, kalın), bildirim (.cam-bildirim, Regular), açılır menü
      (.cam-menu, kalın), grafik ipucu (.grafik-ipucu[data-cam], ince). Perde (.modal-fon) BULANIKSIZ. Segment/çip/düğme/alan
      içerik katmanında → bulanıklık YOK (cam üstüne cam da yok: sayfa içindeki kontroller dolgu + ton).
   ⚠️ Backdrop kökü (§C-4): sayfanın atası .modal-fon'a opaklık animasyonu VERİLMEZ (eskisi: fonGiris/fonCikis) → perde ::before'a
      taşındı; sayfa kendi opaklığını/ölçeğini canlandırır (öğenin KENDİ opaklığı kök yapmaz). Filtre değeri asla canlanmaz (§C-2).
   ⚠️ Kontur YOK (D6): sayfa içinde --cizgi saydamlaşır (bütün "1px solid var(--cizgi)" kenarları tek yerde söner), kalan ince
      kenarlar tek tek ezilir → kenar = ışık bandı (--cam-isik) + gölge. İstisna: odak halkası, form odağı (2 px iç halka), radyo
      dairesi (2 px), prefers-contrast: more, forced-colors.
   ⚠️ Renkli dış ışıma YOK (birincil düğme ve segment göstergesinin vurgu gölgesi kalkar → nötr gölge). transition: all YOK.
   ⚠️ pencereKapat akışı (v422, js/modal.js) DEĞİŞMEDİ: kapanış .kapaniyor sınıfı + 160 ms zamanlayıcı; burada yalnız görünüm.
   Sınıf sözleşmesi: bildirim markup'ı js/cam.js ▸ bildirimGoster (Görev 1) · .cam-menu yeni sözleşme (bugün kullanan yok — envanter
   aşağıda §8) · .grafik-ipucu[data-cam] (grafiktema.js / analiz.js / grafik3b-sahne.js üretir; css/grafik.css'ten SONRA yüklenir).
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ---------- 0) Bileşen token'ları (--cam-b-*) ---------- */
:root[data-cam-etkin] {
  --cam-b-dugme-yuk: 44px;                                     /* birincil / ikincil kapsül (sayfa altında 46) */
  --cam-b-dugme-kucuk: 36px;
  --cam-b-alan-yuk: 48px;                                      /* form alanı */
  --cam-b-damla-golge: 0 2px 8px -2px rgba(0, 0, 0, .30);      /* segment "damla"sı (E6) */
  --cam-b-damla-isik: inset 0 2px 8px -4px rgba(255, 255, 255, .22);   /* damlanın üst ışık bandı (küçük öğede --cam-isik'in alt iç gölgesi lekelenir) */
  --cam-b-birincil-isik: radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 50%);
  --cam-b-birincil-golge: inset 0 2px 10px -4px rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .18);
  /* Seçim işareti (✓) ve seçici oku — maske: renk background-color'dan (currentColor) */
  --cam-b-tik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cam-b-ok-asagi-koyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C3D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  --cam-b-ok-asagi-acik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A465C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  --cam-b-ok-asagi: var(--cam-b-ok-asagi-koyu);
}
:root[data-cam-etkin][data-tema="aydinlik"] {
  --cam-b-damla-golge: 0 2px 8px -2px rgba(24, 38, 74, .22);
  --cam-b-damla-isik: inset 0 2px 8px -4px rgba(255, 255, 255, .90);
  --cam-b-birincil-isik: radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 50%);
  --cam-b-birincil-golge: inset 0 2px 10px -4px rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(24, 38, 74, .50), 0 2px 6px rgba(24, 38, 74, .14);
  --cam-b-ok-asagi: var(--cam-b-ok-asagi-acik);
}

/* =====================================================================================================================
   1) DÜĞMELER (E5) — .btn, .btn-birincil, .btn-ikincil, .btn-metin, .btn-tehlike, .btn-kucuk, .yuvarlak-btn, .ikon-btn
   ===================================================================================================================== */
:root[data-cam-etkin] .btn {
  min-height: var(--cam-b-dugme-yuk); padding: 0 18px; gap: 8px;
  border: 0; border-radius: var(--cam-r-kapsul);
  font: 600 15px/20px var(--cam-font); letter-spacing: var(--cam-iz-govde);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--cam-bas) ease, background-color 120ms ease, color 120ms ease, filter 120ms ease;
}
:root[data-cam-etkin] .btn svg.ikon { width: 18px; height: 18px; }
:root[data-cam-etkin] .btn:active:not(:disabled) { transform: scale(.97); filter: none; }
:root[data-cam-etkin] .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }

/* Birincil: vurgu dolgu + üst-sol beyaz parıltı + iç ışık + NÖTR gölge (renkli ışıma YASAK) */
:root[data-cam-etkin] .btn-birincil {
  background: var(--cam-b-birincil-isik), var(--vurgu); color: var(--vurgu-metin);
  box-shadow: var(--cam-b-birincil-golge);
}
:root[data-cam-etkin] .btn-birincil svg.ikon { stroke-width: 2.2; }
@media (hover: hover) {
  :root[data-cam-etkin] .btn-birincil:hover:not(:disabled) { filter: brightness(1.06); }
}
:root[data-cam-etkin] .btn-birincil:disabled { box-shadow: none; }

/* İkincil: --cam-ic dolgu, kenar yok */
:root[data-cam-etkin] .btn-ikincil { background: var(--cam-ic); color: var(--metin); }
@media (hover: hover) {
  :root[data-cam-etkin] .btn-ikincil:hover:not(:disabled) { background-color: var(--cam-ust); filter: none; }
}

/* Metin: dolgusuz, vurgu yazı, 44 px isabet; yıkıcı metin düğmeleri (Sil, Kaydı sil) tehlike */
:root[data-cam-etkin] .btn-metin { background: none; color: var(--vurgu); padding: 0 14px; }
:root[data-cam-etkin] .btn-metin:is(.tehlike-metin, [id$="Sil"]) { color: var(--tehlike); }
@media (hover: hover) {
  :root[data-cam-etkin] .btn-metin:hover:not(:disabled) { background-color: var(--cam-ic); text-decoration: none; filter: none; }
}

/* Tehlike: ikincil biçim + tehlike yazı; sayfanın ONAY düğmesi (altta son düğme) dolgulu */
:root[data-cam-etkin] .btn-tehlike { background: color-mix(in srgb, var(--tehlike) 14%, transparent); color: var(--tehlike); box-shadow: none; }
:root[data-cam-etkin] .modal-alt > .btn-tehlike:last-child { background: var(--tehlike); color: var(--tehlike-metin); }
@media (hover: hover) {
  :root[data-cam-etkin] .btn-tehlike:hover:not(:disabled) { filter: brightness(1.06); }
}

/* Küçük: 36 px kapsül (dokunmatikte 44 — mikro.css kuralı burada yeniden yazılır; özgüllük) */
:root[data-cam-etkin] .btn-kucuk { min-height: var(--cam-b-dugme-kucuk); padding: 0 14px; font-size: 13px; line-height: 18px; border-radius: var(--cam-r-kapsul); }
:root[data-cam-etkin] .btn-kucuk svg.ikon { width: 16px; height: 16px; }
@media (pointer: coarse) {
  :root[data-cam-etkin] .btn-kucuk { min-height: 44px; }
}

/* Daire düğme: 36 px (fare) / 44 px (dokunmatik), --cam-ic. Kabuktakiler (ay çubuğu, araç çubuğu) cam-kabuk.css'te daha yüksek
   özgüllükle kendi biçimini alır — bu taban geri kalanlar içindir. ⚠️ Üst çubuk (.ust-bar) HARİÇ: Komuta kipinde de görünür ve
   cam-kabuk.css orayı body:not(.komuta-modu) ile korur; bu taban oraya değseydi Komuta 390 px'te 1.576 piksel değişiyordu (D2). */
:root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *) {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cam-ic); color: var(--metin);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
}
@media (hover: hover) { :root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *):hover { background: var(--cam-ust); color: var(--metin); } }
:root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *):active { transform: scale(.94); }
@media (pointer: coarse) { :root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *) { width: 44px; height: 44px; } }

/* Satır içi ikon düğmesi (sil/düzenle): ölçü aynen (28 / dokunmatik 40–44 — satır yerleşimi bozulmasın), şekil daire,
   üzerine gelme yumuşak ton; silme düğmelerindeki kırmızı ton (anlam) korunur. */
:root[data-cam-etkin] .ikon-btn {
  border: 0; border-radius: 50%;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, color 120ms ease, transform var(--cam-bas) ease;
}
:root[data-cam-etkin] .ikon-btn:active { transform: scale(.94); }

/* =====================================================================================================================
   2) SEGMENTLİ KONTROL (E6) — .segment (kayan "damla": js/kaydirma.js hap göstergesi), .ikili, .uc-segment, .tema-secici,
      .sekme-serit / .periyot-secici (görünüm alt sekmeleri), #hareketSecici / #zeminCanlilikSecici / #ucSecici / #camSecici
   Kap: kapsül, 3 px iç dolgu, ARA ÇİZGİ YOK. Seçili = "damla": --cam-dolgu-kalin + --cam-isik + yumuşak nötr gölge, yazı --metin.
   Kart/sayfa içinde kap = --cam-ic (cam değil, dolgu). Kanvas üstünde (görünüm alt sekmeleri) kap = içerik penceresi malzemesi
   (--cam-pencere: v467 doğrulanmış opaklık; --cam-ic orada zemine karışırdı) — bulanıklık HİÇBİR segmentte yok (§C-1).
   ===================================================================================================================== */
:root[data-cam-etkin] :is(.segment, .ikili:has(> button), .uc-segment, .tema-secici) {
  border: 0; border-radius: var(--cam-r-kapsul); padding: 3px; gap: 2px;
  background: var(--cam-ic); box-shadow: none;
}
:root[data-cam-etkin] :is(.segment, .ikili, .uc-segment, .tema-secici) > button {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--cam-r-kapsul);
  font: 400 13px/18px var(--cam-font); letter-spacing: 0; color: var(--cam-soluk); background: transparent;   /* seçilmemiş 400, seçili 600 (01.10; D7 400/600/700) */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, background-color 120ms ease;
}
@media (hover: hover) {
  :root[data-cam-etkin] :is(.segment, .ikili, .uc-segment, .tema-secici) > button:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--metin); }
}
/* Seçili (kendi zemini — gösterge yokken ya da göstergesiz kaplarda) */
:root[data-cam-etkin] :is(.segment, .ikili, .uc-segment, .tema-secici) > button:is(.secili, [aria-checked="true"], [aria-pressed="true"]) {
  color: var(--metin); font-weight: 600;
  background: var(--cam-dolgu-kalin); box-shadow: var(--cam-b-damla-isik), var(--cam-b-damla-golge);
}
/* Kayan gösterge hazırsa seçili düğmenin zemini saydam, damla göstergede (style.css kuralı aynen; yalnız görünüm değişir) */
:root[data-cam-etkin] [data-gosterge="hap"][data-gosterge-hazir] > button:is(.secili, [aria-checked="true"]) { background: transparent; box-shadow: none; }
:root[data-cam-etkin] .kaydirma-gosterge.hap {
  border-radius: var(--cam-r-kapsul);
  background: var(--cam-dolgu-kalin); box-shadow: var(--cam-b-damla-isik), var(--cam-b-damla-golge);
  transition: transform var(--cam-giris) var(--cam-yay), opacity .2s ease;
}
:root[data-cam-etkin] .kaydirma-gosterge.hap[data-ilk] { transition: none; }
:root[data-cam-etkin] :is(.segment, .ikili, .uc-segment, .tema-secici) > button:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; }
:root[data-cam-etkin] :is(.segment, .ikili, .uc-segment, .tema-secici) > button:focus-visible { outline: 2px solid var(--cam-odak); outline-offset: -2px; }

/* .ikili: düğmeliyse segment (eşit sütunlu ızgara; 5'li yöntem seçimi satır içi stil ile). Düğmesizse yalnız İKİ SÜTUNLU YERLEŞİM
   (Sigorta ▸ Tutar + Fatura no, Çek ▸ Banka + Seri no) → kap görünümü yok */
:root[data-cam-etkin] .ikili:has(> button) { gap: 2px; }
:root[data-cam-etkin] .ikili:not(:has(> button)) { background: none; border: 0; border-radius: 0; padding: 0; gap: 10px; box-shadow: none; }
:root[data-cam-etkin] .ikili > button { min-height: 30px; padding: 0 8px; }
/* .uc-segment (2B | 3B, panel başlığı): 12 px altı yok, ara çizgi kalkar (grafik3b.css:39) */
:root[data-cam-etkin] .uc-segment > button { min-height: 26px; min-width: 32px; padding: 0 10px; font-size: 12px; }
:root[data-cam-etkin] .uc-segment > button + button { border-left: 0; }
/* Ayarlar ▸ Görünüm segmentleri (Hareket · Arka plan canlılığı · 3B · Cam): ayarlar-gorunum.css'in kimlikli kuralları ezilir */
:root[data-cam-etkin] #gorunumAyarlari .segment { border: 0; background: var(--cam-ic); }
:root[data-cam-etkin] #gorunumAyarlari .segment > button { min-height: 32px; font: 600 13px/18px var(--cam-font); color: var(--cam-soluk); }
:root[data-cam-etkin] #gorunumAyarlari .segment > button[aria-checked="true"] { color: var(--metin); font-weight: 600; }
:root[data-cam-etkin] #gorunumAyarlari .segment:not([data-gosterge-hazir]) > button[aria-checked="true"] { background: var(--cam-dolgu-kalin); }
:root[data-cam-etkin] #gorunumAyarlari .segment > button[aria-disabled="true"] { color: var(--cam-soluk); font-weight: 600; opacity: .55; }
:root[data-cam-etkin] .tema-secici > button.secili { color: var(--metin); }
:root[data-cam-etkin] .akis-harita-kontrol .segment { border: 0; padding: 3px; }
:root[data-cam-etkin] .akis-harita-kontrol .segment > button { padding: 0 12px; font-size: 13px; }
:root[data-cam-etkin] .akis-harita-kontrol .segment > button.secili { color: var(--metin); }
@media (pointer: coarse) {
  :root[data-cam-etkin] :is(.segment, .ikili, .tema-secici) > button,
  :root[data-cam-etkin] #gorunumAyarlari .segment > button { min-height: 44px; }
}

/* Görünüm alt sekmeleri ve dönem seçici: sarmalayan kapsül kap + damla (kayan çizgi göstergesi cam dilinde gizli → seçim damla) */
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) {
  gap: 2px; padding: 3px; border: 0; border-radius: 19px;            /* tek satırda kapsül (38/2); sarmalarsa yumuşak dikdörtgen */
  width: fit-content; max-width: 100%;
  background: var(--cam-pencere); box-shadow: var(--cam-isik), var(--cam-golge-1);
}
:root[data-cam-etkin] .panel :is(.sekme-serit, .periyot-secici),
:root[data-cam-etkin] .modal :is(.sekme-serit, .periyot-secici) { background: var(--cam-ic); box-shadow: none; }
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 16px;  /* 19 − 3 eşmerkezli */
  font: 400 13px/18px var(--cam-font); letter-spacing: 0; color: var(--soluk); background: transparent; box-shadow: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, background-color 120ms ease;
}
@media (hover: hover) {
  :root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button:hover:not(.secili) { color: var(--metin); background: var(--cam-ust); border-color: transparent; }
}
/* 01.10 (okunurluk ZORUNLU): .gorunum içinde --soluk = --metin (v465) ve ağırlık 600/600 → seçili damla ile iz farkı 1,07–1,20:1, yazı
   farkı 1,00 (v468: zemin 10,9, yazı 16,6) — Takvim/Kira Sözleşmeleri gibi alt sekmelerde hangisinin seçili olduğu görülmüyordu.
   Seçili = vurgu dolgu + --vurgu-metin (D10: vurgu seçim göstergesinde serbest), seçilmemiş 400 (D7: 400/600/700). Ölçüm: damla/iz 6,5–9,8, yazı 7,1–11,2. */
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button.secili {
  color: var(--vurgu-metin); font-weight: 600; border-color: transparent;
  background: var(--vurgu); box-shadow: var(--cam-b-damla-isik), var(--cam-b-damla-golge);   /* gölge ölçeği aynen (B.2: yeni gölge değeri yok) */
}
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button:focus-visible { outline: 2px solid var(--cam-odak); outline-offset: -2px; }
/* Seçili sekme vurgu dolgulu → odak halkası (--cam-odak, vurgu tonu) dolguda kayboluyordu (değişim 1,14:1, odak-tara 01.10): seçili
   düğmede halka İÇERİDE dolgunun yazı renginde (kap taşmayı kırpabileceği için dışarı taşırılmaz) */
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button.secili:focus-visible { outline-color: var(--vurgu-metin); outline-offset: -4px; }
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .kaydirma-gosterge.cizgi { display: none; }
:root[data-cam-etkin] .rapor-arac .periyot-secici { flex: 0 1 auto; margin-right: auto; }   /* kap içeriğe sarılır (tam genişlik boş kapsül değil) */
:root[data-cam-etkin] .rapor-arac .periyot-secici > button { padding: 0 12px; font-size: 13px; }
@media (pointer: coarse) {
  :root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button { min-height: 44px; border-radius: 22px; }
  :root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) { border-radius: 25px; }
}

/* =====================================================================================================================
   3) FORM (E7) — .alan, .alan input|select|textarea, .tutar-alan, .onay-satir, .adim-serit, .gun-izgara, .secim-kart,
      .siklik-secim, .sifre-sarmal, .kaydirac
   Apple form: 48 px alan, köşe 12, --cam-ic dolgu, KENAR YOK, görünür etiket üstte 13/400 --cam-soluk, değer 15/400 --metin (duzeltme-2: 500 → 400 — ağırlık yalnız 400/600/700, D7)
   (dokunmatikte 16). Odak: vurgu tonlu dolgu + 2 px vurgu İÇ halka (outline, negatif ofset — forced-colors'ta da görünür).
   ===================================================================================================================== */
:root[data-cam-etkin] .alan { gap: 6px; }
:root[data-cam-etkin] :is(.alan, .modal .ikili, .modal .alan-ikili) label:not(.onay-satir, .onay, .siklik-ozel) { font: 400 13px/18px var(--cam-font); letter-spacing: var(--cam-iz-alt); color: var(--cam-soluk); }
:root[data-cam-etkin] .alan .ipucu { font: 400 12px/16px var(--cam-font); color: var(--cam-soluk); }
:root[data-cam-etkin] :is(.alan, .modal) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"]), select, textarea) {
  min-height: var(--cam-b-alan-yuk); padding: 0 14px;
  border: 0; border-radius: var(--cam-r-alan);
  background-color: var(--cam-ic); color: var(--metin);
  font: var(--cam-y-girdi); font-weight: 400; letter-spacing: var(--cam-iz-govde);
  font-variant-numeric: tabular-nums lining-nums;
  outline: 0 solid transparent; outline-offset: -2px; box-shadow: none;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
:root[data-cam-etkin][data-tema="koyu"] :is(.alan, .modal) :is(input, select, textarea) { color-scheme: dark; }
:root[data-cam-etkin][data-tema="aydinlik"] :is(.alan, .modal) :is(input, select, textarea) { color-scheme: light; }
:root[data-cam-etkin] :is(.alan, .modal) textarea { min-height: 96px; padding: 12px 14px; line-height: 21px; resize: vertical; }
:root[data-cam-etkin] :is(.alan, .modal) :is(input, textarea)::placeholder { color: var(--cam-soluk); opacity: 1; }   /* yer tutucu "…" ile biter (FO-12); değerden RENKLE ayrılır (--cam-soluk ↔ --metin; ağırlık ikisinde de 400 — D7) */
:root[data-cam-etkin] :is(.alan, .modal) :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea):focus {
  outline: 2px solid var(--vurgu); outline-offset: -2px;
  background-color: color-mix(in srgb, var(--vurgu) 10%, var(--cam-ic));
}
:root[data-cam-etkin] :is(.alan, .modal) :is(input, select, textarea)[aria-invalid="true"] { outline: 2px solid var(--tehlike); outline-offset: -2px; }
:root[data-cam-etkin] :is(.alan, .modal) :is(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
/* select: yerel kalır (FO-17: açık background-color + color + color-scheme), sağda ok */
:root[data-cam-etkin] :is(.alan, .modal) select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: var(--cam-b-ok-asagi); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
:root[data-cam-etkin] :is(.alan, .modal) select option { background-color: var(--panel); color: var(--metin); }
/* tarih seçici ikonu temaya uysun */
:root[data-cam-etkin][data-tema="koyu"] :is(.alan, .modal) input::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .8; }
:root[data-cam-etkin] :is(.alan, .modal) input::-webkit-calendar-picker-indicator { cursor: pointer; }
/* İnşaat ▸ içe aktarma: yapıştırılan ham veri (sekme ayrımlı) — kod dizisi gibi mono kalır (D8), 12 → 13 px; dokunmatikte 16 */
:root[data-cam-etkin] .modal #insIceAktarMetin { font: 400 13px/18px var(--cam-font-kod); letter-spacing: 0; padding: 12px 14px; }
@media (pointer: coarse) { :root[data-cam-etkin] .modal #insIceAktarMetin { font-size: 16px; line-height: 22px; } }
/* Hata kutusu / bilgi notu: kenar yok, ton dolgu (durum = ikon + metin + renk; v463) */
:root[data-cam-etkin] .hata-kutu {
  border: 0; border-radius: var(--cam-r-satir); padding: 12px 14px;
  background: color-mix(in srgb, var(--tehlike) 14%, transparent); color: var(--tehlike);
  font: 400 13px/18px var(--cam-font);
}

/* Tutar: büyük, sağa yaslı, tabular; birim (TL) içte sağda */
:root[data-cam-etkin] :is(.alan, .modal) .tutar-alan input {
  font: 600 22px/28px var(--cam-font); letter-spacing: var(--cam-iz-bolum); text-align: right;
  font-variant-numeric: tabular-nums lining-nums; padding-right: 52px; min-height: 52px;
}
:root[data-cam-etkin] .tutar-alan .simge { right: 16px; color: var(--cam-soluk); font: 600 15px/20px var(--cam-font); }
/* Ödeme Ekle ▸ tutar adımı: tek ve ana alan → maketteki büyük ortalı tutar (yalnız stil; akış aynen) */
:root[data-cam-etkin] #odemeEkleModal .adim[data-adim="3"] .tutar-alan input {
  font: var(--cam-y-kahraman); letter-spacing: var(--cam-iz-kahraman); text-align: center;
  min-height: 84px; border-radius: 20px; padding: 0 64px;
}
:root[data-cam-etkin] #odemeEkleModal .adim[data-adim="3"] .tutar-alan .simge { right: 22px; font-size: 17px; }
:root[data-cam-etkin] :is(.alan, .modal) .kira-gecmis-satir .tutar-alan input { font-size: 15px; line-height: 20px; min-height: 44px; padding-right: 40px; letter-spacing: 0; }
:root[data-cam-etkin] .kira-gecmis-satir .tutar-alan .simge { right: 12px; font-size: 13px; }
/* Satır içi küçük sayı (Düzenli ▸ "her __ ayda bir") */
:root[data-cam-etkin] .siklik-ozel { font: 400 13px/18px var(--cam-font); color: var(--cam-soluk); }
:root[data-cam-etkin] .alan .siklik-ozel input { min-height: 36px; width: 72px; padding: 0 10px; text-align: center; border-radius: 10px; font-family: var(--cam-font); }
@media (pointer: coarse) {
  :root[data-cam-etkin] .alan .siklik-ozel input { min-height: 44px; }
  :root[data-cam-etkin] :is(.alan, .modal) .kira-gecmis-satir .tutar-alan input { font-size: 16px; }
  /* FO-18: dokunmatikte HİÇBİR girdi 16 px altında kalmaz (iOS yakınlaştırması) — bileşen kuralları zaten ≥ 16 */
  :root[data-cam-etkin] :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { font-size: 16px; }
}

/* Onay satırı: 48 px, --cam-ic, kenar yok; işaretliyken seçim tonu */
:root[data-cam-etkin] .onay-satir {
  align-items: center; min-height: 48px; padding: 12px 14px;
  border: 0; border-radius: var(--cam-r-alan); background: var(--cam-ic);
  transition: background-color 120ms ease;
}
@media (hover: hover) { :root[data-cam-etkin] .onay-satir:hover { background: var(--cam-ust); border-color: transparent; } }
:root[data-cam-etkin] .onay-satir:has(input:checked) { background: var(--cam-sec); }
:root[data-cam-etkin] .onay-satir input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0; accent-color: var(--vurgu); }
:root[data-cam-etkin] .onay-satir > span { font: 400 15px/20px var(--cam-font); }
:root[data-cam-etkin] .onay-satir .alt { font: 400 13px/18px var(--cam-font); color: var(--cam-soluk); }

/* Adım göstergesi: 4 px kapsüller, tamam vurgu, iz --cam-ic */
:root[data-cam-etkin] .adim-serit { gap: 6px; }
:root[data-cam-etkin] .adim-serit span { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--metin) 14%, transparent); }
:root[data-cam-etkin] .adim-serit span.tamam { background: var(--vurgu); }

/* Gün ızgarası: hücrede ortalı daire (iOS takvim), seçili vurgu dolgu */
:root[data-cam-etkin] .gun-izgara { gap: 6px 4px; }
:root[data-cam-etkin] .gun-izgara button {
  width: min(44px, 100%); aspect-ratio: 1; justify-self: center;
  border: 0; border-radius: 50%; background: var(--cam-ic); color: var(--metin);
  font: 400 15px/1 var(--cam-font); font-variant-numeric: tabular-nums lining-nums;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
}
@media (hover: hover) { :root[data-cam-etkin] .gun-izgara button:hover:not(.secili) { background: var(--cam-ust); } }
:root[data-cam-etkin] .gun-izgara button:active { transform: scale(.94); }
:root[data-cam-etkin] .gun-izgara button.secili { background: var(--vurgu); color: var(--vurgu-metin); font-weight: 700; }

/* Seçim kartları (ödeme tipi, kredi türü…): dolgu kart, seçili = seçim tonu + ışık + ✓ (renk tek işaret değil) */
:root[data-cam-etkin] .secim-izgara { gap: 8px; }
:root[data-cam-etkin] .secim-kart {
  min-height: 48px; padding: 12px 40px 12px 14px; gap: 4px; align-content: center;
  border: 0; border-radius: var(--cam-r-satir); background: var(--cam-ic);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
}
@media (hover: hover) { :root[data-cam-etkin] .secim-kart:hover:not(.secili) { background: var(--cam-ust); } }
:root[data-cam-etkin] .secim-kart:active { transform: scale(.98); }
:root[data-cam-etkin] .secim-kart .ad { font: 600 15px/20px var(--cam-font); letter-spacing: var(--cam-iz-govde); color: var(--metin); }
:root[data-cam-etkin] .secim-kart .aciklama { font: 400 12px/16px var(--cam-font); color: var(--cam-soluk); }
:root[data-cam-etkin] .secim-kart.secili { background: var(--cam-sec); box-shadow: var(--cam-isik); }
:root[data-cam-etkin] .secim-kart.secili .ad { color: var(--metin); }
:root[data-cam-etkin] .secim-kart .tik { top: 50%; right: 12px; transform: translateY(-50%); color: var(--vurgu); }
:root[data-cam-etkin] .secim-kart .tik .ikon { width: 20px; height: 20px; }

/* Seçilebilir çip (süzgeç — Düzenli ▸ sıklık): 32 px, --cam-ic; seçili = vurgu %30 dolgu + ✓ + ışık (HALKA/KONTUR YOK) */
:root[data-cam-etkin] .siklik-secim { gap: 8px; }
:root[data-cam-etkin] .siklik-secim button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 13px;
  border: 0; border-radius: var(--cam-r-kapsul); background: var(--cam-ic); color: var(--metin);
  font: 600 13px/18px var(--cam-font);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease;
}
:root[data-cam-etkin] .siklik-secim button.secili { background: color-mix(in srgb, var(--vurgu) 30%, transparent); color: var(--metin); box-shadow: var(--cam-isik); }
:root[data-cam-etkin] .siklik-secim button.secili::before {
  content: ""; width: 14px; height: 14px; margin-left: -3px; flex: none; background-color: currentColor;
  -webkit-mask: var(--cam-b-tik) center / contain no-repeat; mask: var(--cam-b-tik) center / contain no-repeat;
}
@media (pointer: coarse) { :root[data-cam-etkin] .siklik-secim button { min-height: 44px; } }

/* Şifre göster düğmesi (giriş) — kenar yok, daire */
:root[data-cam-etkin] .sifre-goster { border-radius: 50%; }
/* Yazı boyutu kaydıracı: iz --cizgi yerine görünür ton (sayfada --cizgi saydam) */
:root[data-cam-etkin] .kaydirac { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--metin) 20%, transparent); }
:root[data-cam-etkin] .kaydirac::-webkit-slider-thumb { width: 22px; height: 22px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
:root[data-cam-etkin] .kaydirac::-moz-range-thumb { width: 22px; height: 22px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

/* =====================================================================================================================
   4) ROZET / ÇİP (E9) — .rozet, .rozet-*, .ay-ozet > span (Plan/Tahsilat ay özeti)
   12/600 sans, 22 px kapsül, 0 9 px; kategori rozeti renk %16 dolgu + renk yazı (v467 açık tonu aynen); dolgulu hap = durum (§ 9G).
   ===================================================================================================================== */
:root[data-cam-etkin] .rozet {
  min-height: 22px; padding: 0 9px; gap: 5px; border: 0; border-radius: var(--cam-r-kapsul);
  font: 600 12px/16px var(--cam-font); letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums;
}
:root[data-cam-etkin] .rozet .rozet-tik { width: 12px; height: 12px; }
/* TÜR (kategori) rozetleri — duzeltme-2 (taste-2 T4, renk disiplini D10): Özet haftalık kartlarında ve Plan satırlarında "Kredi",
   "Kredi Kartı", "Vergi", "Tahsilat" … kategori RENGİNDE yazılıyordu (dolgusuz, style.css:5263) → satırda 4–5 renkli yazı. Yazı NÖTR
   (--metin, 600), kategori rengi YALNIZ 7 px noktada (Apple Takvim/Anımsatıcılar liste noktası). Durum rozetleri (dolgulu hap = durum,
   § 9G: Ödendi, Vadesi geçti, Kısmi …) AYNEN. zemin.css'in koyu "açık ton" yazı kuralları (0,5,0) ve style.css'in aydınlık kuralları
   (0,3,0) aşağıdaki (1,5,0) seçiciyle geçilir; Komuta hariç. */
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet:is(.rozet-kredi_karti, .rozet-kredi, .rozet-vergi, .rozet-kira, .rozet-maas, .rozet-diger, .rozet-tahsilat) {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--metin); font-weight: 600; letter-spacing: 0;
}
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet:is(.rozet-kredi_karti, .rozet-kredi, .rozet-vergi, .rozet-kira, .rozet-maas, .rozet-diger, .rozet-tahsilat)::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cam-b-rozet-kat, var(--soluk));
}
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-kredi_karti { --cam-b-rozet-kat: var(--kat-kart-sirket); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-kredi { --cam-b-rozet-kat: var(--kat-kredi); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-vergi { --cam-b-rozet-kat: var(--kat-vergi, var(--uyari)); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-kira { --cam-b-rozet-kat: var(--kat-kira); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-maas { --cam-b-rozet-kat: var(--kat-maas); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-diger { --cam-b-rozet-kat: var(--kat-diger, var(--soluk)); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .rozet-tahsilat { --cam-b-rozet-kat: var(--vurgu); }
/* Değişim hapı (▲▼ %, "geçen aya göre") ve durum hapı: durum rozeti — ton dolgu + ikon + metin; 700 → 600 (3 ağırlık) */
:root[data-cam-etkin] .fark {
  min-height: 22px; padding: 0 9px; gap: 4px; border-radius: var(--cam-r-kapsul);
  font: 600 12px/16px var(--cam-font); font-variant-numeric: tabular-nums lining-nums;
}
:root[data-cam-etkin] .durum-hap {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px; border-radius: var(--cam-r-kapsul);
  font: 600 12px/16px var(--cam-font); color: var(--tehlike); background: color-mix(in srgb, var(--tehlike) 15%, transparent);
}
:root[data-cam-etkin] .durum-hap svg { width: 13px; height: 13px; stroke-width: 2.2; }
/* Ay özeti çipleri: 32 px --cam-ic kapsül; etiket 13 --soluk, tutar 15/600 */
:root[data-cam-etkin] .ay-ozet { gap: 8px; font: 400 13px/18px var(--cam-font); }
:root[data-cam-etkin] .ay-ozet > span:not(.degisim-serit) {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 6px 12px;
  border: 0; border-radius: var(--cam-r-kapsul); background: var(--cam-ic);
}
:root[data-cam-etkin] .ay-ozet b { font: 600 15px/20px var(--cam-font); letter-spacing: var(--cam-iz-govde); font-variant-numeric: tabular-nums lining-nums; }
:root[data-cam-etkin] .ay-ozet i { font-style: normal; font-variant-numeric: tabular-nums; }
/* "Vadesi geçti" = durum: tehlike ton dolgu + tehlike yazı (dolgulu hap = durum) */
:root[data-cam-etkin] .ay-ozet > .plan-ozet-geciken { background: color-mix(in srgb, var(--tehlike) 14%, transparent); }

/* =====================================================================================================================
   5) SAYFA (MODAL) (E10) — .modal-fon, .modal, .modal-ust, .modal-govde, .modal-alt, .kapat
   Perde BULANIKSIZ (koyu .46 / aydınlık .20 — --cam-perde, cam-temel.css) ::before'da; sayfa kalın cam bulanık (--cam-dolgu-kalin
   + --cam-filtre-kalin), köşe 28 (dar 32), kenar yok, --cam-golge-3. Dar ekranda (< 640) alttan 8 px içeride, tutamaklı.
   ===================================================================================================================== */
:root[data-cam-etkin] .modal-fon {
  background: transparent; overscroll-behavior: contain;
  /* ⚠️ ENTEGRATÖR (ölçüldü): v468'de #uygulama giriş animasyonunun "both" dolgusu onu yığın bağlamı yapıyordu → içindeki kenar
     çubuğu (z 50) sayfanın (z 40) ALTINDA kalırdı. cam-kabuk.css dolguyu Komuta dışında kaldırdığı için (§C-4: cam duvar kâğıdını
     görsün) ray kök bağlamda z 50 ile sayfa perdesinin ÜSTÜNE çıkıyordu (masaüstünde sayfa açıkken ray kararmıyor ve tıklanıyordu).
     Sayfa katmanı rayın (50) ve DEMO rozetinin (50) üstüne, bildirimin (70) altına alınır. */
  z-index: 60;
  --soluk: var(--cam-soluk);                                   /* sayfa içinde ikincil yazı cam rolüyle (§E10) */
  --cizgi: transparent;                                        /* D6: sayfa içindeki bütün "1px solid var(--cizgi)" kenarları söner */
  /* Vurgu YAZISI (metin düğmesi, bağlantı, önizleme notu) sayfa camında: kökte çözülmüş vurgu --metin'e doğru --cam-vurgu-kaldir
     (cam-temel §4b kalıbı). Ölçüm: aydınlık Klasik canlı, arkada koyu içerik pikseli → ham vurgu 3,85 → kaldırılmış ≥ 4,5.
     Dolgular (birincil, seçili gün) da aynı tonu alır: --vurgu-metin ile kontrastı ARTAR. Koyuda gerekmedi (ham vurgu ≥ 4,5 —
     modal-tara.mjs 12 koyu senaryo) → koyu sayfa maketteki doygun vurguyu korur. */
}
:root[data-cam-etkin][data-tema="aydinlik"] .modal-fon {
  --vurgu: color-mix(in srgb, var(--metin) var(--cam-vurgu-kaldir, 35%), var(--zemin-kok-vurgu, var(--st-primary)));
}
:root[data-cam-etkin] .modal-fon::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--cam-perde);
}
:root[data-cam-etkin] .modal-fon > .modal {
  max-width: 560px; border: 0; border-radius: var(--cam-r-sayfa);
  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);
  isolation: isolate; color: var(--metin);
}
:root[data-cam-etkin] .modal-fon > .modal.modal-genis { max-width: min(900px, calc(100vw - 32px)); }
:root[data-cam-etkin] .modal-ust {
  gap: 12px; padding: 20px 20px 10px 22px; border-bottom: 0;
}
:root[data-cam-etkin] .modal-ust h2 { font: 600 19px/24px var(--cam-font); letter-spacing: -.02em; color: var(--metin); }
:root[data-cam-etkin] .modal-alt-baslik { font: 400 13px/18px var(--cam-font); color: var(--cam-soluk); }
/* Kapat: 32 px --cam-ic daire görünür, isabet 44 px (dışı saydam) */
:root[data-cam-etkin] .modal-ust .kapat {
  flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: -6px -8px -6px auto;
  display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--cam-soluk);
  background: radial-gradient(circle closest-side, var(--cam-ic) 0 15.5px, transparent 16px);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--cam-bas) ease, color 120ms ease;
}
:root[data-cam-etkin] .modal-ust .kapat .ikon { width: 16px; height: 16px; stroke-width: 2.2; }
@media (hover: hover) {
  :root[data-cam-etkin] .modal-ust .kapat:hover { color: var(--metin); background: radial-gradient(circle closest-side, var(--cam-ust) 0 15.5px, transparent 16px); }
}
:root[data-cam-etkin] .modal-ust .kapat:active { transform: scale(.94); }
:root[data-cam-etkin] .modal-govde {
  padding: 8px 22px 18px; gap: 16px;
  /* Kaydırma kenarı (Apple scroll edge): içerik başlık/alt çubuğun altına girerken yumuşakça söner — çizgi yok. Sönme bölgeleri
     dolgunun içinde → kaydırılmamış içerik hiç solmaz. Maske sayfanın (cam) ATASI değil çocuğu → backdrop kökü sorunu yok. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%);
}
/* Sihirbaz adımı ve ayar blokları: alan grupları arasında nefes (gruplama boşlukla, çizgiyle değil) */
:root[data-cam-etkin] .modal :is(.adim, .ayar-blok) { display: grid; gap: 18px; min-width: 0; }
:root[data-cam-etkin] .modal .ayar-blok { gap: 10px; }
:root[data-cam-etkin] .modal-alt {
  gap: 10px; padding: 12px 22px 22px; border-top: 0;
}
:root[data-cam-etkin] .modal-alt .btn { min-height: 46px; }
:root[data-cam-etkin] .modal-alt.yan-yana { display: flex; flex-wrap: wrap; align-items: stretch; }
:root[data-cam-etkin] .modal-alt.yan-yana > .btn { flex: 1 1 128px; min-width: 0; }
:root[data-cam-etkin] .modal-alt.yan-yana > :is(.btn-birincil, .btn-tehlike:last-child) { flex-grow: 1.4; }
:root[data-cam-etkin] .modal-alt.yan-yana > .btn-metin { flex: 0 0 auto; }
:root[data-cam-etkin] .modal-alt > .yan-yana { gap: 10px; }
:root[data-cam-etkin] .modal-alt .btn { text-align: center; text-wrap: balance; }

/* Sayfa içi kutular → kenarsız ton (kutu içinde kutu yok; gruplama boşluk + tonla) */
:root[data-cam-etkin] .modal :is(.not-kutu) {
  border: 0; border-radius: var(--cam-r-satir); padding: 12px 14px;
  background: color-mix(in srgb, var(--uyari) 12%, transparent); color: var(--cam-soluk);
  font: 400 13px/19px var(--cam-font);
}
:root[data-cam-etkin] .modal .not-kutu:is(.uyari, .tehlike) { background: color-mix(in srgb, var(--tehlike) 12%, transparent); }
:root[data-cam-etkin] .modal .not-kutu.olumlu { background: color-mix(in srgb, var(--vurgu) 12%, transparent); color: var(--metin); }
:root[data-cam-etkin] .modal .not-kutu.bilgi { background: var(--cam-ic); }
:root[data-cam-etkin] .modal :is(.hesap-panel, .etki, .onizleme-satir) { border: 0; background: var(--cam-ic); border-radius: var(--cam-r-satir); }
:root[data-cam-etkin] .modal .hesap-panel .baslik {
  padding: 12px 14px 4px; background: none; text-transform: none; letter-spacing: 0;
  font: 600 13px/18px var(--cam-font); color: var(--metin);
}
:root[data-cam-etkin] .modal .hesap-satir { border-bottom: 0; padding: 9px 14px; font: 400 15px/20px var(--cam-font); }
:root[data-cam-etkin] .modal .hesap-satir .deger { font-variant-numeric: tabular-nums lining-nums; }
:root[data-cam-etkin] .modal .hesap-satir.one-cikan { background: var(--cam-sec); }
:root[data-cam-etkin] .modal .hesap-satir.one-cikan :is(.etiket, .deger) { color: var(--metin); font-weight: 600; }
:root[data-cam-etkin] .modal .onizleme-satir { border-radius: var(--cam-r-alan); }
/* Sayfa içi tablolar (kur, kira geçmişi, sigorta dağıtımı…): ayraç yok → ritim + zebra ton; başlık başlık biçiminde */
:root[data-cam-etkin] .modal table :is(th, td) { border-bottom: 0; border-top: 0; }
:root[data-cam-etkin] .modal table th { text-transform: none; letter-spacing: 0; font: 600 12px/16px var(--cam-font); color: var(--cam-soluk); }
:root[data-cam-etkin] .modal table tbody tr:nth-child(odd) > td { background: var(--cam-ic); }
:root[data-cam-etkin] .modal table tbody tr > td:first-child { border-radius: 10px 0 0 10px; }
:root[data-cam-etkin] .modal table tbody tr > td:last-child { border-radius: 0 10px 10px 0; }
:root[data-cam-etkin] .modal table { border-collapse: separate; border-spacing: 0; }
/* Ayarlar sayfası kartları ve renk örnekleri: kenar yerine ton + yumuşak iç ışık */
:root[data-cam-etkin] .modal :is(.ayar-kart, #gorunumAyarlari .ayar-satir) { border: 0; background: var(--cam-ic); border-radius: var(--cam-r-satir); }
:root[data-cam-etkin] .modal :is(.vurgu-secici, .arkaplan-secici) button { border: 0; box-shadow: inset 0 1px 3px rgba(255, 255, 255, .28), inset 0 -1px 3px rgba(0, 0, 0, .25); }
:root[data-cam-etkin] .modal #gorunumAyarlari :is(.palet-kart, .zemin-kart) { border-color: transparent; background: var(--cam-ic); }
@media (hover: hover) { :root[data-cam-etkin] .modal #gorunumAyarlari :is(.palet-kart, .zemin-kart):hover { border-color: transparent; background: var(--cam-ust); } }
/* Palet önizleme kartları (Ayarlar ▸ Görünüm): minyatür de v469 dilinde — kenar yerine ışık bandı; 12 px altı yazı yok */
:root[data-cam-etkin] .modal #gorunumAyarlari .palet-kart .palet-ornek { border: 0; box-shadow: inset 0 1px 8px -3px rgba(255, 255, 255, .22); }
:root[data-cam-etkin] .modal #gorunumAyarlari .po-panel { border: 0; box-shadow: inset 0 2px 6px -3px rgba(255, 255, 255, .30); }
:root[data-cam-etkin] .modal #gorunumAyarlari :is(.palet-ruh, .zemin-rozet) { font-size: 12px; line-height: 16px; color: var(--cam-soluk); }
:root[data-cam-etkin] .modal .istege-bagli { font-size: max(12px, .9em); }
/* Bölüm başlığı (Maaş sayfası grupları): BÜYÜK HARF mikro etiket yok → başlık biçimi */
:root[data-cam-etkin] .modal .maas-grup-baslik { text-transform: none; letter-spacing: 0; font: 600 13px/18px var(--cam-font); color: var(--metin); }

/* Dar ekran (< 640): alttan sayfa, kenarlardan 8 px içeride, köşe 32, tutamak */
@media (max-width: 639.98px) {
  :root[data-cam-etkin] .modal-fon { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  :root[data-cam-etkin] .modal-fon > .modal {
    border-radius: var(--cam-r-sayfa-dar); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
  }
  :root[data-cam-etkin] .modal-fon > .modal::before {
    content: ""; flex: none; align-self: center; width: 36px; height: 5px; margin-top: 8px; border-radius: 3px;
    background: color-mix(in srgb, var(--cam-soluk) 40%, transparent);
  }
  :root[data-cam-etkin] .modal-ust { padding: 10px 18px 8px 20px; }
  :root[data-cam-etkin] .modal-govde { padding: 6px 18px 16px; }
  :root[data-cam-etkin] .modal-alt { padding: 10px 18px 18px; }
  :root[data-cam-etkin] .modal-fon > .modal.modal-genis { width: 100%; }
}

/* =====================================================================================================================
   6) AÇILIR MENÜ / POPOVER (E11) — .cam-menu (yeni sözleşme) + grafik ipucu cam ezmesi
   ENVANTER (01.10, grep "acilir|menu-araclar|popover" index.html js/*.js): uygulamada ÖZEL açılır menü YOK — açılırlar yerel <select>
   (§3'te biçimlendi); .menu-araclar = kenar çubuğu araması (Görev 2); .maas-satir .acilir = açılım oku (menü değil);
   2 <details> (ayarlar) yerinde açılır. .cam-menu, ileride eklenecek menüler için hazır sözleşmedir (JS yok).
   ===================================================================================================================== */
:root[data-cam-etkin] .cam-menu {
  z-index: 55; min-width: 200px; max-width: min(320px, calc(100vw - 32px)); padding: 6px;
  display: grid; gap: 0; border: 0; border-radius: 18px;
  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); isolation: isolate;
  color: var(--metin); font: 400 14px/20px var(--cam-font);
  transform-origin: var(--cam-b-menu-koken, top right);
  animation: camMenuGel 180ms var(--cam-yay), camSolGel 180ms ease-out;
}
:root[data-cam-etkin] .cam-menu[hidden] { display: none; }
:root[data-cam-etkin] .cam-menu > :is(button, a, [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--metin); text-align: left; text-decoration: none;
  font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:root[data-cam-etkin] .cam-menu > * svg { width: 18px; height: 18px; flex: none; color: var(--cam-soluk); }
:root[data-cam-etkin] .cam-menu > :is(button, a, [role^="menuitem"]):is(:hover, :focus-visible) { background: var(--cam-ust); outline: 0; }
:root[data-cam-etkin] .cam-menu > :is(button, a, [role^="menuitem"]):focus-visible { box-shadow: inset 0 0 0 2px var(--cam-odak); }
:root[data-cam-etkin] .cam-menu > [aria-checked="true"]::after {
  content: ""; width: 16px; height: 16px; margin-left: auto; flex: none; background-color: var(--vurgu);
  -webkit-mask: var(--cam-b-tik) center / contain no-repeat; mask: var(--cam-b-tik) center / contain no-repeat;
}
:root[data-cam-etkin] .cam-menu > :is(.tehlike, [data-tehlike]) { color: var(--tehlike); }
:root[data-cam-etkin] .cam-menu > :is(.cam-menu-ayrac, hr) { height: 8px; margin: 0; border: 0; background: none; }
:root[data-cam-etkin] .cam-menu > .cam-menu-baslik { padding: 6px 12px 2px; font: 600 12px/16px var(--cam-font); color: var(--cam-soluk); }
@media (pointer: coarse) { :root[data-cam-etkin] .cam-menu > :is(button, a, [role^="menuitem"]) { min-height: 44px; } }

/* Grafik ipucu (§C-1: ince cam, bulanık — grafiğin üstünde, alan < %1). Komuta'da yok (seçici görünüm/sayfa kapsamlı). */
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] {
  padding: 8px 12px; border: 0; border-radius: var(--cam-r-satir);
  background: var(--cam-parilti), var(--cam-dolgu-ince);
  -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre);
  box-shadow: var(--cam-isik), var(--cam-golge-2); isolation: isolate;
  font: 400 12px/16px var(--cam-font);
}
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] :is(.grafik-ipucu-baslik, .grafik-ipucu-toplam, .grafik-ipucu-dip.ilk) { border: 0; }
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] .grafik-ipucu-baslik {
  padding-bottom: 2px; margin-bottom: 4px; font: 400 12px/16px var(--cam-font); color: var(--cam-soluk);
}
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] :is(.grafik-ipucu-satir > span, .grafik-ipucu-alt, .grafik-ipucu-fazla, .grafik-ipucu-dip) {
  font-size: 12px; color: var(--cam-soluk);
}
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] .grafik-ipucu-satir.tek > span { color: var(--metin); }
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] :is(.grafik-ipucu-satir > b, .grafik-ipucu-toplam > b) {
  font: 600 14px/18px var(--cam-font); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--metin);
}
:root[data-cam-etkin] :is(main > .gorunum:not(#komutaGorunum), .modal-fon) .grafik-ipucu[data-cam] :is(.grafik-ipucu-toplam, .grafik-ipucu-dip.ilk) { margin-top: 6px; padding-top: 0; }

/* Sayfa İÇİNDEKİ grafik ipucu: cam üstüne cam YOK (§C-4) → bulanıklıksız, opak dolgu (sayfanın kendisi zaten kalın cam) */
:root[data-cam-etkin] .modal-fon:not(#komutaGorunum) > .modal .grafik-ipucu[data-cam] {   /* özgüllük (1,6,0) > görünüm kuralı (1,5,1) */
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cam-parilti), var(--cam-dolgu-opak);
}

/* =====================================================================================================================
   7) BİLDİRİM (E12) — #camBildirimKok, .cam-bildirim (markup: js/cam.js ▸ bildirimGoster)
   Sağ altta yüzen cam kapsül yığını (≤ 3); dar ekranda sekme çubuğunun üstünde ortalı. Regular cam BULANIK, --cam-golge-2.
   İçerik altından kayan cam → yalnız --metin ve vurgu (kabuk §4b vurgu kaldırması cam-temel.css'te #camBildirimKok kapsamında).
   ===================================================================================================================== */
:root[data-cam-etkin] #camBildirimKok {
  position: fixed; z-index: 70; right: 28px; bottom: 28px; left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  max-width: calc(100vw - 32px); pointer-events: none;
}
:root[data-cam-etkin] .cam-bildirim {
  display: flex; align-items: center; gap: 12px; min-height: 52px; max-width: min(460px, 100%);
  padding: 8px 18px 8px 13px; border: 0; border-radius: 26px;
  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;
  color: var(--metin); font: 400 14px/20px var(--cam-font); letter-spacing: -.01em;
  pointer-events: auto;
  animation: camBildirimGel var(--cam-giris) var(--cam-yay), camSolGel var(--cam-giris) ease-out;
}
:root[data-cam-etkin] .cam-bildirim:has(> button) { padding-right: 8px; }
:root[data-cam-etkin] .cam-bildirim.kapaniyor { animation: camBildirimCik var(--cam-cikis) var(--egri-cikis, ease-in) forwards; pointer-events: none; }
:root[data-cam-etkin] .cam-bildirim { --cam-b-tur: var(--bilgi); }
:root[data-cam-etkin] .cam-bildirim[data-tur="basari"] { --cam-b-tur: var(--basari); }
:root[data-cam-etkin] .cam-bildirim[data-tur="uyari"] { --cam-b-tur: var(--uyari); }
:root[data-cam-etkin] .cam-bildirim[data-tur="hata"] { --cam-b-tur: var(--tehlike); }
:root[data-cam-etkin] .cam-bildirim-ikon {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: var(--cam-b-tur); background: color-mix(in srgb, var(--cam-b-tur) 20%, transparent);
}
:root[data-cam-etkin] .cam-bildirim-ikon svg { width: 16px; height: 16px; }
:root[data-cam-etkin] .cam-bildirim-metin { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }   /* uyar() metinlerindeki \n satır kırar */
:root[data-cam-etkin] .cam-bildirim-eylem {
  flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  background: var(--cam-ic); color: var(--vurgu); font: 600 14px/20px var(--cam-font); letter-spacing: -.01em; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
}
:root[data-cam-etkin] .cam-bildirim-kapat {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--cam-ic); color: var(--metin); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform var(--cam-bas) ease;
}
:root[data-cam-etkin] .cam-bildirim-kapat svg { width: 16px; height: 16px; }
@media (hover: hover) { :root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat):hover { background: var(--cam-ust); } }
:root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat):active { transform: scale(.97); }
:root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat):focus-visible { outline: 2px solid var(--cam-odak); outline-offset: 2px; }
@media (pointer: coarse) { :root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat) { min-height: 44px; min-width: 44px; } }
@media (max-width: 1023px) {
  :root[data-cam-etkin] #camBildirimKok { left: 16px; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); align-items: center; max-width: none; }
}
/* YIĞIN (duzeltme-2, yönetici kararı (2) — js/cam.js ▸ camYiginKarar/camYiginDuzenle): kalıcı hata yığın sınırında SİLİNMEZ, beklemeye
   alınır (.bekliyor: DOM'da, gizli) ve kökün başında "+N hata daha · Göster" özet kapsülü çıkar (cam Regular, 36 px, --metin 13/600 —
   içerik altından kayan camda yalnız --metin, D-2). Tıklayınca kök .tumu: bütün bildirimler görünür, yığın ekran boyunu aşarsa kayar. */
:root[data-cam-etkin] #camBildirimKok > .cam-bildirim.bekliyor { display: none; }
:root[data-cam-etkin] #camBildirimKok > .cam-bildirim-ozet {
  min-height: 36px; padding: 0 16px; gap: 0; justify-content: center; cursor: pointer;
  font: 600 13px/18px var(--cam-font); letter-spacing: 0; color: var(--metin);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:root[data-cam-etkin] #camBildirimKok > .cam-bildirim-ozet::before {   /* durum = renk + metin: küçük tehlike noktası ("hata" sözcüğü metinde) */
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--tehlike);
}
:root[data-cam-etkin] #camBildirimKok > .cam-bildirim-ozet:focus-visible { outline: 2px solid var(--cam-odak); outline-offset: 2px; }
@media (pointer: coarse) { :root[data-cam-etkin] #camBildirimKok > .cam-bildirim-ozet { min-height: 44px; } }
:root[data-cam-etkin] #camBildirimKok.tumu { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; }

/* =====================================================================================================================
   8) BOŞ DURUM VE YÜKLENİYOR İSKELETİ (E13) — .bos-durum, .bos-ikon, .iskelet, .iskelet-satir, .iskelet-daire
   Shimmer (background-position) YOK → yalnız opaklık nabzı; azaltılmış harekette durgun .7.
   ===================================================================================================================== */
:root[data-cam-etkin] .bos-durum { gap: 10px; padding: 36px 16px; font: 400 13px/19px var(--cam-font); }
:root[data-cam-etkin] .bos-durum p { max-width: 32ch; }
:root[data-cam-etkin] .bos-durum :is(h3, h4, strong) { font: 600 17px/22px var(--cam-font); letter-spacing: var(--cam-iz-baslik); color: var(--metin); }
:root[data-cam-etkin] .bos-ikon { width: 56px; height: 56px; background: var(--cam-ic); color: var(--cam-soluk); }
:root[data-cam-etkin] .bos-ikon .ikon { width: 26px; height: 26px; stroke-width: 1.75; }
:root[data-cam-etkin] :is(.iskelet-satir, .iskelet-daire) {
  border-radius: 8px; background: var(--cam-ic); background-size: auto; opacity: .9;
  animation: camNabiz 1.2s ease-in-out infinite alternate;
}
:root[data-cam-etkin] .iskelet-satir { min-height: 12px; }
:root[data-cam-etkin] .iskelet-daire { border-radius: 50%; }
:root[data-cam-etkin] .panel .iskelet-satir,
:root[data-cam-etkin] .modal .iskelet-satir { background: color-mix(in srgb, var(--metin) 9%, transparent); }
:root[data-cam-etkin] .iskelet-daire { background: color-mix(in srgb, var(--metin) 7%, transparent); }

/* =====================================================================================================================
   9) HAREKET (D16) — yalnız transform/opacity; konum/ölçek yay (--cam-yay), opaklık ease-out; giriş 240 / çıkış 160 ms.
   Başlangıç karesi içeriği GÖRÜNMEZ yapmaz (≥ .55). hareketDuzeyi() kapısı: html.hareket-kapali (style.css) + prefers-reduced-motion.
   ===================================================================================================================== */
@keyframes camPerdeGel   { from { opacity: .35; } to { opacity: 1; } }
@keyframes camPerdeCik   { from { opacity: 1; } to { opacity: 0; } }
@keyframes camSayfaGel   { from { transform: translateY(16px) scale(.985); } to { transform: none; } }
@keyframes camSayfaAlttan { from { transform: translateY(40px); } to { transform: none; } }
@keyframes camSolGel     { from { opacity: .55; } to { opacity: 1; } }
@keyframes camSayfaCik   { from { transform: none; opacity: 1; } to { transform: translateY(12px) scale(.98); opacity: 0; } }
@keyframes camMenuGel    { from { transform: scale(.96); } to { transform: none; } }
@keyframes camBildirimGel { from { transform: translateY(12px); } to { transform: none; } }
@keyframes camBildirimCik { from { transform: none; opacity: 1; } to { transform: translateY(8px) scale(.98); opacity: 0; } }
@keyframes camSolCik     { from { opacity: 1; } to { opacity: 0; } }
@keyframes camNabiz      { from { opacity: .55; } to { opacity: .9; } }

/* Sayfa: perde (::before) ve sayfa ayrı canlanır; .modal-fon'un KENDİ animasyonu kalkar (backdrop kökü olmasın — §C-4) */
:root[data-cam-etkin] .modal-fon:not(.gizli),
:root[data-cam-etkin] .modal-fon.kapaniyor { animation: none; }
:root[data-cam-etkin] .modal-fon:not(.gizli)::before { animation: camPerdeGel var(--cam-giris) ease-out; }
:root[data-cam-etkin] .modal-fon:not(.gizli) > .modal { animation: camSayfaAlttan var(--cam-giris) var(--cam-yay), camSolGel var(--cam-giris) ease-out; }
@media (min-width: 640px) {
  :root[data-cam-etkin] .modal-fon:not(.gizli) > .modal { animation-name: camSayfaGel, camSolGel; }
}
:root[data-cam-etkin] .modal-fon.kapaniyor::before { animation: camPerdeCik var(--cam-cikis) var(--egri-cikis, ease-in) forwards; }
:root[data-cam-etkin] .modal-fon.kapaniyor > .modal { animation: camSayfaCik var(--cam-cikis) var(--egri-cikis, ease-in) forwards; }

/* §9b — v507 "GÖZ AT": Ayarlar ▸ Panel opaklığı kaydırıcısı sürüklenirken (js/ayarlar-gorunum.js ▸ poOnizleme) pencere çekilir —
   perde söner, sayfa camı (dolgu, gölge, bulanıklık) kalkar, sayfadaki her şey görünmez olur, YALNIZ kaydırıcı kartı kalır → arkadaki
   veri panelleri gerçek opaklığıyla görünür (dar ekranda pencere ekranı kapladığı için şart). visibility yerleşimi KORUR: kaydırıcı
   parmağın altında yerinden oynamaz. Kartın dolgusu yayılan gölgeyle (14 px) — dolgu/boşluk değişmez, kayma yok. Bulanıklık
   yalnız KALDIRILIR (none; animasyonlanmaz — §C-2). Bırakınca 450 ms sonra pencere geri gelir. */
:root[data-cam-etkin] #ayarModal::before { transition: opacity 200ms ease-out; }
:root[data-cam-etkin] #ayarModal.po-onizleme::before { opacity: 0; }
:root[data-cam-etkin] #ayarModal.po-onizleme.modal-fon > .modal {   /* ".modal-fon > .modal": §C-1 listesindeki yüzey (test) */
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-cam-etkin] #ayarModal.po-onizleme > .modal * { visibility: hidden; }
:root[data-cam-etkin] #ayarModal.po-onizleme #panelOpaklikAyar,
:root[data-cam-etkin] #ayarModal.po-onizleme #panelOpaklikAyar * { visibility: visible; }
:root[data-cam-etkin] #ayarModal.po-onizleme #panelOpaklikAyar {
  border-radius: 8px; background: var(--cam-dolgu-opak);
  box-shadow: 0 0 0 14px var(--cam-dolgu-opak), var(--cam-golge-3);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-cam-etkin] #ayarModal::before { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-cam-etkin] .modal-fon:not(.gizli)::before,
  :root[data-cam-etkin] .modal-fon:not(.gizli) > .modal,
  :root[data-cam-etkin] .modal-fon.kapaniyor::before,
  :root[data-cam-etkin] .modal-fon.kapaniyor > .modal { animation: none; }
  :root[data-cam-etkin] .cam-menu { animation: none; }
  :root[data-cam-etkin] .cam-bildirim { animation: camSolGel var(--cam-giris) ease-out; }       /* azaltılmışta yalnız solma */
  :root[data-cam-etkin] .cam-bildirim.kapaniyor { animation: camSolCik var(--cam-cikis) ease-in forwards; }
  :root[data-cam-etkin] :is(.iskelet-satir, .iskelet-daire) { animation: none; opacity: .7; }
  :root[data-cam-etkin] :is(.btn, .yuvarlak-btn, .ikon-btn, .gun-izgara button, .secim-kart, .kapat):active { transform: none; }
  :root[data-cam-etkin] .kaydirma-gosterge.hap { transition: none; }
}
html.hareket-kapali[data-cam-etkin] :is(.iskelet-satir, .iskelet-daire) { animation: none; opacity: .7; }

/* =====================================================================================================================
   10) ERİŞİLEBİLİRLİK — yüksek kontrast ve zorlanmış renkler
   ===================================================================================================================== */
@media (prefers-contrast: more) {
  /* cam-temel.css --cam-isik'i 2 px --kenar-vurgu iç halkaya çevirir; bileşenler o token'ı kullandığı için kenar kendiliğinden gelir.
     Işığı olmayan dolgu bileşenlerine (alan, ikincil düğme, çip) aynı halka */
  :root[data-cam-etkin] :is(.alan, .modal) :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea),
  :root[data-cam-etkin] :is(.btn-ikincil, .siklik-secim button, .gun-izgara button, .secim-kart, .onay-satir, .ay-ozet > span) {
    box-shadow: inset 0 0 0 2px var(--kenar-vurgu);
  }
  :root[data-cam-etkin] :is(.alan, .modal) :is(input, select, textarea)::placeholder { color: var(--cam-soluk); }
}
@media (forced-colors: active) {
  /* Seçim ve odak dolguyla anlatılıyordu → sistem rengiyle halka */
  :root[data-cam-etkin] :is(.segment, .ikili, .uc-segment, .tema-secici, .sekme-serit, .periyot-secici) > button:is(.secili, [aria-checked="true"], [aria-pressed="true"]),
  :root[data-cam-etkin] :is(.secim-kart.secili, .siklik-secim button.secili, .gun-izgara button.secili, .onay-satir:has(input:checked)) {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
  :root[data-cam-etkin] .kaydirma-gosterge.hap { background: Highlight; }
  :root[data-cam-etkin] :is(.btn, .modal, .cam-bildirim, .cam-menu, .grafik-ipucu[data-cam], .alan input, .alan select, .alan textarea) { border: 1px solid CanvasText; }
  :root[data-cam-etkin] .modal-fon::before { background: rgba(0, 0, 0, .5); }
}

/* =====================================================================================================================
   11) DOĞRULAMA EKLERİ (01.10.2026)
   ===================================================================================================================== */
/* Segment damlası (okunurluk ÖNERİ): koyu temada kalın cam damla iz ile 1,05–1,48:1 idi (seçim yalnız yazı tonundan okunuyordu) →
   metin %30 karışımı (sınandı: damla/iz 1,55–1,85, seçili yazı 6,5). Seçilmemiş yazı 400, seçili 600 (§2). Aydınlıkta beyaz damla + gölge (Apple). */
:root[data-cam-etkin][data-tema="koyu"] :is(.segment, .ikili, .uc-segment, .tema-secici) > button:is(.secili, [aria-checked="true"], [aria-pressed="true"]),
:root[data-cam-etkin][data-tema="koyu"] .kaydirma-gosterge.hap { background: color-mix(in srgb, var(--metin) 30%, var(--panel)); }
:root[data-cam-etkin][data-tema="koyu"] [data-gosterge="hap"][data-gosterge-hazir] > button:is(.secili, [aria-checked="true"]) { background: transparent; }
/* ET-11/12 artığı (Vercel): odaklanabilir grafik tuvalleri ve gecikmiş satırlar dokunmatikte çift dokunma yakınlaştırması ve mavi vurgu */
:root[data-cam-etkin] :is(.grafik-kutu > canvas[tabindex], .plan-geciken-satir, #btnPlanGecikmis, #btnTahsilatGecikmis) {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* =====================================================================================================================
   12) v470 MİKRO ETKİLEŞİMLER (KURALLAR v470 ▸ "Mikro etkileşimler") — YALNIZ EKLEME; yukarıdaki kurallar aynen.
   Hepsi yalnız transform / opacity (odak halkasının 180 ms "oturması" tek istisna: outline-offset + renk, yalnız odaklanan öğede,
   boyama — yerleşim değil). Kapı: hareketDuzeyi() — html.hareket-kapali (style.css süreleri .001 ms) + prefers-reduced-motion (aşağıda)
   + JS'li olanlar (damla, FLIP) yalnız "tam". Token'lar css/cam-temel.css §8.
   ===================================================================================================================== */
/* ---- a) BASMA: gecikmesiz içe (70 ms ease-out) + yayla bırakış (460 ms, --cam-yay-birak). Seçiciler v469 kurallarının AYNISI (özgüllük
   eşit, bu blok sonra gelir) ve geçiş listeleri aynı özellikleri taşır — yalnız transform'un süresi/eğrisi değişir. ---- */
:root[data-cam-etkin] .btn {
  transition: transform var(--cam-birak) var(--cam-yay-birak), background-color 120ms ease, color 120ms ease, filter 120ms ease;
}
:root[data-cam-etkin] .btn:active:not(:disabled) {
  transition: transform var(--cam-bas-in) var(--cam-bas-egri), background-color 120ms ease, color 120ms ease, filter 120ms ease;
}
/* Metin düğmesi (dolgusuz): iOS gibi basılıyken yazı söner (.7) — ölçek tek başına dolgusuz düğmede seçilmiyordu */
:root[data-cam-etkin] .btn-metin:active:not(:disabled) { opacity: .7; }
:root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *),
:root[data-cam-etkin] .gun-izgara button,
:root[data-cam-etkin] .secim-kart,
:root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat) {
  transition: background-color 120ms ease, transform var(--cam-birak) var(--cam-yay-birak);
}
:root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *):active,
:root[data-cam-etkin] .gun-izgara button:active,
:root[data-cam-etkin] .secim-kart:active,
:root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat):active {
  transition: background-color 120ms ease, transform var(--cam-bas-in) var(--cam-bas-egri);
}
:root[data-cam-etkin] .ikon-btn { transition: background-color 120ms ease, color 120ms ease, transform var(--cam-birak) var(--cam-yay-birak); }
:root[data-cam-etkin] .ikon-btn:active { transition: background-color 120ms ease, color 120ms ease, transform var(--cam-bas-in) var(--cam-bas-egri); }
:root[data-cam-etkin] .modal-ust .kapat { transition: transform var(--cam-birak) var(--cam-yay-birak), color 120ms ease; }
:root[data-cam-etkin] .modal-ust .kapat:active { transition: transform var(--cam-bas-in) var(--cam-bas-egri), color 120ms ease; }

/* ---- b) SEKME ŞERİDİ / DÖNEM SEÇİCİ — GEÇİCİ SEÇİM DAMLASI (js/cam.js ▸ camSecimDamlasi; js/kaydirma.js ▸ yerlestir tetikler) ----
   Seçim değişince NÖTR cam damla (segment damlasıyla aynı malzeme) eski sekmeden yenisine esneyerek kayar (~420 ms); damla VARINCA
   (yolun %42'si) vurguyla dolar (::after opaklığı) ve hedefin yazısı seçili rengine geçer — "damla konar, vurguyla dolar". Neden
   nötr: vurgu renkli damla kayarken üstünden geçtiği sekmelerin AÇIK yazısı vurgu zeminde okunmuyordu (ölçüldü, kare dizisi
   tasarim-v470/mikro); nötr camda her ara karede yazı okunur. Bitince damla gizlenir; dinlenme hâli §2 ile BİREBİR (doğrulanmış kontrast
   aynen). Kap izole (damla z −1 kabın zemininin ÜSTÜNDE, yazının ALTINDA); izolasyon bulanıklık kökü DEĞİL (içinde cam yok). */
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) { isolation: isolate; }
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .cam-damla {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; transform-origin: 0 0;
  border-radius: 16px; background: var(--cam-dolgu-kalin); box-shadow: var(--cam-b-damla-isik), var(--cam-b-damla-golge);
  opacity: 0;
}
:root[data-cam-etkin][data-tema="koyu"] :is(.sekme-serit, .periyot-secici) > .cam-damla { background: color-mix(in srgb, var(--metin) 30%, var(--panel)); }
@media (pointer: coarse) { :root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .cam-damla { border-radius: 22px; } }
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .cam-damla[data-cam-damla-etkin] { opacity: 1; }
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .cam-damla::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--vurgu); box-shadow: var(--cam-b-damla-isik); opacity: 0;          /* vurgu dolgusu: yalnız OPAKLIKLA (js/cam.js) */
}
:root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > button.secili[data-cam-damla-hedef] { background: transparent; box-shadow: none; }

/* ---- c) BİLDİRİM GİRİŞ / ÇIKIŞ (markup js/cam.js ▸ bildirimGoster; yığın kayması FLIP — camYiginFlipBitir) ----
   Giriş: 18 px aşağıdan + ölçek .96 → yerine YAYLA (%4 aşma, 460 ms), opaklık .55 → 1 (≥ .55 kuralı §9). Köken sağ alt (yığının ucu).
   Çıkış (--cam-cikis 160 ms — js/cam.js kaldırma zamanı bu süreyi okur): masaüstünde SAĞA süzülerek (macOS bildirimi), dar ekranda
   aşağı; ölçek .96, opaklık 0, ease-in. */
@keyframes camBildirimGelYay { from { transform: translateY(18px) scale(.96); } to { transform: none; } }
@keyframes camBildirimCikSag { from { transform: none; opacity: 1; } to { transform: translateX(40px) scale(.96); opacity: 0; } }
@keyframes camBildirimCikAlt { from { transform: none; opacity: 1; } to { transform: translateY(16px) scale(.96); opacity: 0; } }
:root[data-cam-etkin] .cam-bildirim {
  transform-origin: 100% 100%;
  animation: camBildirimGelYay var(--cam-birak) var(--cam-yay-bildirim), camSolGel var(--cam-giris) ease-out;
}
:root[data-cam-etkin] .cam-bildirim.kapaniyor { animation: camBildirimCikSag var(--cam-cikis) cubic-bezier(.4, 0, 1, 1) forwards; }
@media (max-width: 1023px) {
  :root[data-cam-etkin] .cam-bildirim { transform-origin: 50% 100%; }
  :root[data-cam-etkin] .cam-bildirim.kapaniyor { animation-name: camBildirimCikAlt; }
}

/* ---- d) İSKELET IŞILTISI (Rapor yükleniyor — #raporYukleniyor) ----
   §8'in opaklık nabzı yerine TEK ışık süzmesi: bütün satırlar ve daire AYNI anda, aynı ışıkla (ışık katmanı kartın genişliğinde, her
   şekil kendi yarıçapıyla kırpılır → çizgiler ayrı ayrı değil tek yüzey gibi parlar). Yalnız transform (translateX), 1,6 sn, %40 duraklama. */
@keyframes camIskeletIsik { 0% { transform: translateX(-100%); } 62%, 100% { transform: translateX(100%); } }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .panel.iskelet { position: relative; }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire) { animation: none; opacity: 1; }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet .iskelet-satir { clip-path: inset(0 round 8px); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet .iskelet-daire { clip-path: circle(50%); }
:root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire)::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .075) 46%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .075) 54%, transparent 72%);
  transform: translateX(-100%);
  animation: camIskeletIsik 1.6s cubic-bezier(.45, 0, .35, 1) infinite;
}
:root[data-cam-etkin][data-tema="aydinlik"] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire)::after {
  background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .6) 54%, transparent 72%);
}

/* ---- e) ODAK HALKASI — Apple "oturma": halka 7 px dışarıdan saydam başlar, 180 ms'de kontrolün KENDİ ofset ve rengine oturur (macOS
   odak halkası). Renk, kalınlık, ofset v469'daki gibi her bileşenin kendi kuralından (doğrulanmış ≥ 3:1) — yalnız varış canlanır. Kendi
   animasyonu olan öğeler listede YOK (kenar çubuğu öğeleri kaydırmaya bağlı söner; bildirim özeti giriş animasyonu taşır). ---- */
@keyframes camOdakOtur { from { outline-offset: 7px; outline-color: transparent; } }
:root[data-cam-etkin] :is(.ust-bar, #gorunumUst, main > .gorunum:not(#komutaGorunum), .modal-fon, #camBildirimKok)
  :is(.btn, .yuvarlak-btn, .ikon-btn, .kapat, .segment > button, .ikili > button, .uc-segment > button, .tema-secici > button,
      .sekme-serit > button, .periyot-secici > button, .gun-izgara button, .secim-kart, .siklik-secim button, .cam-bildirim-eylem,
      .cam-bildirim-kapat, input, select, textarea, a[href], summary):focus-visible {
  animation: camOdakOtur var(--cam-odak-sure) cubic-bezier(.2, .8, .2, 1);
}

/* ---- f) HAREKET KAPISI ---- */
@media (prefers-reduced-motion: reduce) {
  :root[data-cam-etkin] .btn:active:not(:disabled),
  :root[data-cam-etkin] .yuvarlak-btn:not(.ust-bar *):active,
  :root[data-cam-etkin] .gun-izgara button:active,
  :root[data-cam-etkin] .secim-kart:active,
  :root[data-cam-etkin] :is(.cam-bildirim-eylem, .cam-bildirim-kapat):active,
  :root[data-cam-etkin] .ikon-btn:active,
  :root[data-cam-etkin] .modal-ust .kapat:active { transform: none; }
  :root[data-cam-etkin] .cam-bildirim { animation: camSolGel var(--cam-giris) ease-out; }
  :root[data-cam-etkin] .cam-bildirim.kapaniyor { animation: camSolCik var(--cam-cikis) ease-in forwards; }
  :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire)::after { animation: none; content: none; }
  :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire) { opacity: .7; }
  :root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .cam-damla { display: none; }
  :root[data-cam-etkin] :is(.ust-bar, #gorunumUst, main > .gorunum:not(#komutaGorunum), .modal-fon, #camBildirimKok)
    :is(.btn, .yuvarlak-btn, .ikon-btn, .kapat, .segment > button, .ikili > button, .uc-segment > button, .tema-secici > button,
        .sekme-serit > button, .periyot-secici > button, .gun-izgara button, .secim-kart, .siklik-secim button, .cam-bildirim-eylem,
        .cam-bildirim-kapat, input, select, textarea, a[href], summary):focus-visible { animation: none; }   /* özgüllük §12e ile EŞİT */
}
html.hareket-kapali[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire)::after { animation: none; content: none; }
html.hareket-kapali[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire) { opacity: .7; }
@media (forced-colors: active) {
  :root[data-cam-etkin] :is(.sekme-serit, .periyot-secici) > .cam-damla { display: none; }
  :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .iskelet :is(.iskelet-satir, .iskelet-daire)::after { content: none; }
}