/* ===== css/ayarlar-gorunum.css — Hesap ▸ Ayarlar ▸ Görünüm (v463, SPEC §5 · davranış js/ayarlar-gorunum.js) =====
   style.css'ten SONRA yüklenir. Kapsam: #gorunumAyarlari (+ yalnız Ayarlar penceresinin genişliği).
   • Seçili durum RENK TEK İŞARET DEĞİL: kartlarda 2 px --vurgu halka + onay ikonu; segmentte dolu zemin + kalın yazı.
   • Önizleme kartı kendi paletinin token'larıyla boyanır: data-palet-onizle kapsamı (css/tema-paletleri.css §3/§3b/§4)
     --zemin/--panel/--metin/--vurgu ve --st-zemin-*, --st-sampanya, --st-bilgi'yi O ÖĞEDE yeniden tanımlar.
   • Minyatürler DURAĞAN: animasyon yok, WebGL yok; renkler var(--st-zemin-*) → palet değişince kendiliğinden.
   ⚠️ backdrop-filter / filter: blur YOK · köke değişken yazılmaz · kaplara transform YOK (eğilme js/egim.js ▸ .egim-ic).
   ⚠️ 400 px'te yatay taşma 0: ızgaralar minmax(0, 1fr) / min(…, 100%), metinler sarar, taşan rakam kırpılır. */

/* ---------- Pencere: palet + arka plan kartları sığsın diye Ayarlar biraz geniş (yalnız bu pencere) ----------
   v468 son: Sıvı Metal kartı kalktı (7 → 6 kart) → v468 konseptindeki 760 px genişletmesi GERİ ALINDI (v467'deki gibi 680 px, 6 sütun)
   v470: tema başına 6 palet (3 × 2) + 7 arka plan kartı (4 × 2, Otomatik iki sütun) → ≥ 820 px'te pencere 760 px (ferah); 640–820 px'te 680 px */
@media (min-width: 640px) {
  #ayarModal > .modal { max-width: min(680px, calc(100vw - 32px)); }
}
@media (min-width: 820px) {
  #ayarModal > .modal { max-width: min(760px, calc(100vw - 32px)); }
}

/* ---------- Izgara: ≥ 640 px 3 sütun (style.css .ayar-izgara); Tema · Palet · Arka plan tam satır, Hareket 2 sütun ---------- */
#gorunumAyarlari { min-width: 0; }
#gorunumAyarlari > .ipucu { font-size: 12.5px; line-height: 1.4; color: var(--soluk); margin: 0 0 14px; }
#gorunumAyarlari .gorunum-izgara { min-width: 0; }
@media (min-width: 640px) {
  #gorunumAyarlari .gorunum-izgara > .genis { grid-column: 1 / -1; }
  #gorunumAyarlari .gorunum-izgara > .ayar-satir-hareket { grid-column: span 2; }
}

/* Satır kartı = .ayar-kart görünümü. Boşluk "gap" ile değil kardeş kenar boşluğuyla: boş aria-live satırı (ör. #ucDurum)
   yer kaplamaz ama erişilebilirlik ağacında KALIR (display:none olsaydı ilk duyuru kaçabilirdi). */
#gorunumAyarlari .ayar-satir {
  padding: 14px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--cizgi);
  display: block; min-width: 0;
}
#gorunumAyarlari .ayar-satir > * + * { margin-top: 10px; }
#gorunumAyarlari .ayar-satir > .ipucu:empty { margin-top: 0; }
#gorunumAyarlari .ayar-satir h4 { font-size: 13.5px; font-weight: 600; margin: 0; }
#gorunumAyarlari .ayar-satir .ipucu,
#gorunumAyarlari .ayar-kart .ipucu { font-size: 12px; line-height: 1.4; color: var(--soluk); overflow-wrap: anywhere; }
#gorunumAyarlari .ayar-satir .ipucu + .ipucu { margin-top: 4px; }

/* ---------- Ortak: radyo öğesinin odak halkası (§4: 2 px --vurgu, 2 px boşluk) ---------- */
#gorunumAyarlari [role="radio"]:focus-visible,
#gorunumAyarlari summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
#gorunumAyarlari .palet-kart:focus-visible,
#gorunumAyarlari .zemin-kart:focus-visible { outline-offset: 3px; }        /* seçili halkanın (2 px) dışında görünsün */

/* ---------- Tema ---------- */
#gorunumAyarlari #temaSeciciModal { max-width: 460px; }
@media (max-width: 480px) {                                    /* 400 px: üç düğme ikon + ad ile sığsın (taşma yerine … yok) */
  #gorunumAyarlari #temaSeciciModal > button { padding-left: 8px; padding-right: 8px; gap: 6px; }
}

/* ---------- Segment (Hareket · 3B) — .segment sınıfı kaydirma.js'in kayan hap göstergesini de alır (.secili izler) ---------- */
#gorunumAyarlari .segment {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px;
  padding: 3px; border-radius: 999px; border: 1px solid var(--cizgi);          /* hap: uygulamadaki segmentlerle aynı */
  background: color-mix(in srgb, var(--panel-ust) var(--yuzey-op), transparent);
  min-width: 0; max-width: 460px;
}
#gorunumAyarlari .segment > button {
  min-height: 38px; min-width: 0; padding: 8px 6px; border-radius: 999px;
  font-size: 12.5px; color: var(--soluk); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s, color .14s;
}
#gorunumAyarlari .segment > button:hover { color: var(--metin); }
#gorunumAyarlari .segment > button[aria-checked="true"] { color: var(--vurgu-metin); font-weight: 600; }
/* Gösterge konumlanmadıysa (pencere yeni açıldı, ölçü yok) seçili zemin düğmenin kendisinde → seçim hiç kaybolmaz */
#gorunumAyarlari .segment:not([data-gosterge-hazir]) > button[aria-checked="true"] { background: var(--vurgu); }
/* İşletim sistemi "hareketi azalt" diyorsa "Tam" seçilemez (açıklama #hareketDurum'da) */
#gorunumAyarlari .segment > button[aria-disabled="true"] { cursor: not-allowed; color: var(--soluk); font-weight: 400; }
#gorunumAyarlari .segment > button[aria-disabled="true"]:hover { color: var(--soluk); }
@media (pointer: coarse) {
  #gorunumAyarlari .segment > button,
  #gorunumAyarlari .tema-secici.genis > button { min-height: 44px; }   /* dokunma hedefi ≥ 44 px (§4) */
}

/* ---------- Renk paleti kartları ---------- */
#gorunumAyarlari .palet-kartlar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0;
}
/* v470: tema başına 6 palet (Klasik + 3 + 2 Apple bitişi) → ≥ 560 px'te 3 × 2 (4 sütunda 4 + 2 sahipsiz satır olurdu) */
@media (min-width: 560px) {
  #gorunumAyarlari .palet-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#gorunumAyarlari .palet-kart,
#gorunumAyarlari .zemin-kart {
  position: relative; display: block; min-width: 0; width: 100%;
  padding: 6px 6px 8px; border-radius: var(--r);
  border: 1px solid var(--cizgi); background: transparent;
  text-align: left; color: var(--metin);
  transition: border-color .15s, box-shadow .15s;
}
#gorunumAyarlari .palet-kart:hover,
#gorunumAyarlari .zemin-kart:hover { border-color: var(--kenar-vurgu); }
#gorunumAyarlari .palet-kart[aria-checked="true"],
#gorunumAyarlari .zemin-kart[aria-checked="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--vurgu); }
#gorunumAyarlari .palet-kart > .egim-ic,
#gorunumAyarlari .zemin-kart > .egim-ic { display: grid; gap: 4px; min-width: 0; }

/* Onay ikonu (renk tek işaret değil): sağ üstte dolu rozet, yalnız seçili kartta */
#gorunumAyarlari .secili-isaret {
  position: absolute; top: -7px; right: -7px; z-index: 3;
  width: 20px; height: 20px; padding: 3px; border-radius: 999px;
  background: var(--vurgu); color: var(--vurgu-metin); stroke-width: 3;
  box-shadow: 0 0 0 2px var(--panel);
  display: none;
}
#gorunumAyarlari [aria-checked="true"] > .secili-isaret { display: block; }

/* Önizleme: yalnız bu öğenin içinde kartın paletinin token'ları geçerli (data-palet-onizle) */
#gorunumAyarlari .palet-kart .palet-ornek {
  --po-guc: 24%;
  position: relative; display: block; height: 64px; overflow: hidden;
  border-radius: calc(var(--r) - 4px); border: 1px solid var(--cizgi);
  background: var(--st-zemin-taban); color: var(--metin);
  isolation: isolate;
}
#gorunumAyarlari .palet-kart[data-palet-tema="aydinlik"] .palet-ornek { --po-guc: 55%; }
#gorunumAyarlari .po-zemin {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 85% at 8% 0%, color-mix(in srgb, var(--st-zemin-isik-1) var(--po-guc), transparent), transparent 70%),
    radial-gradient(80% 90% at 100% 100%, color-mix(in srgb, var(--st-zemin-isik-2) var(--po-guc), transparent), transparent 70%),
    linear-gradient(160deg, var(--st-zemin-taban), var(--st-zemin-derin));
}
#gorunumAyarlari .po-panel {
  position: absolute; left: 9%; right: 9%; top: 26%; bottom: 0; z-index: 1;
  border-radius: 6px 6px 0 0; padding: 5px 6px 0; overflow: hidden;
  background: color-mix(in srgb, var(--panel) var(--yuzey-op, 72%), transparent);
  border: 1px solid var(--st-panel-kenar, var(--cizgi)); border-bottom: 0;
}
#gorunumAyarlari .po-rakam {
  display: block; font-family: var(--st-font-rakam, var(--font)); font-weight: 300; font-size: 11.5px; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
  color: var(--metin); white-space: nowrap; overflow: hidden;
}
#gorunumAyarlari .po-cubuk { position: absolute; bottom: 0; width: 8%; border-radius: 2px 2px 0 0; }
#gorunumAyarlari .po-cubuk.k1 { right: 34%; height: 38%; background: var(--vurgu); }
#gorunumAyarlari .po-cubuk.k2 { right: 22%; height: 58%; background: var(--st-sampanya); }
#gorunumAyarlari .po-cubuk.k3 { right: 10%; height: 28%; background: var(--st-bilgi); }
#gorunumAyarlari .po-vurgu {                                   /* vurgu hapı (üst çubuktaki düğme) */
  position: absolute; left: 9%; top: 9%; z-index: 2;
  width: 22px; height: 6px; border-radius: 999px; background: var(--vurgu);
}
#gorunumAyarlari .po-cizgi {                                   /* şampanya kıl çizgi: panelin üst kenarında ışık */
  position: absolute; left: 9%; right: 9%; top: 26%; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--st-sampanya), transparent);
  opacity: .85;
}
#gorunumAyarlari .palet-ad { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; padding: 0 2px; }
#gorunumAyarlari .palet-ruh { font-size: 11px; line-height: 1.3; color: var(--soluk); overflow-wrap: anywhere; padding: 0 2px; }

/* Diğer temanın paleti (<details>) */
#gorunumAyarlari .diger-tema-paletleri > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  min-height: 32px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--soluk); border-radius: 4px;
}
#gorunumAyarlari .diger-tema-paletleri > summary::-webkit-details-marker { display: none; }
#gorunumAyarlari .diger-tema-paletleri > summary::before { content: "▸"; color: var(--soluk); }
#gorunumAyarlari .diger-tema-paletleri[open] > summary::before { content: "▾"; }
#gorunumAyarlari .diger-tema-paletleri > summary b { font-weight: 600; color: var(--metin); }
#gorunumAyarlari .diger-tema-paletleri > summary:hover .diger-degistir { color: var(--metin); text-decoration: underline; }
#gorunumAyarlari .diger-tema-paletleri > .palet-kartlar { margin-top: 10px; }

/* ---------- Arka plan kartları ----------
   v470: 7 kart, Apple duvar kâğıdı seçicisi gibi FERAH: dar ekranda 2 sütun, ≥ 560 px 4 sütun; Otomatik (önerilen = Işık Heykeli) İKİ sütun
   geniş "kahraman" kart → 1. satır Otomatik · Cam Küreler · Kumul, 2. satır Aurora · İpek · Derin Uzay (v475; eski Takımyıldız) · Düz (boş hücre yok, her ekranda).
   Minyatür daha yüksek (64 → 84 px): arka planın dili okunur. */
#gorunumAyarlari .zemin-kartlar {
  --zo-guc: 26%; --zo-aurora: 46%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0;
}
/* v472: Cam Küreler kartı gizli → 6 kart. Geniş Otomatik (2 sütun) 6 kartta her ızgarada TEK boş hücre bırakıyordu (2+5=7) →
   Otomatik tek sütun; dar ekran 2 × 3, ≥ 560 px 3 × 2 — boş hücre yok. */
#gorunumAyarlari .zemin-kart[data-zemin-secim="oto"] { grid-column: auto; }
/* v494: + Kozmik (James Webb esinli) → 7 kart. Kozmik GENİŞ kart (2 sütun; minyatürde uçurum + sütunlar + kırınımlı yıldız okunur) → 8 hücre:
   dar ekran 2 × 4, ≥ 560 px 4 × 2 — boş hücre yok (dense: dar ekranda Düz, Kozmik'in önündeki boşluğu doldurur). Varsayılan / öneri DEĞİL. */
#gorunumAyarlari .zemin-kartlar { grid-auto-flow: row dense; }
#gorunumAyarlari .zemin-kart.zemin-kart-genis { grid-column: span 2; }
/* v501: + Hubble (gerçek Hubble fotoğrafları) → TAM genişlik kart (her ızgarada kendi satırı: dar 2 × 4 + 1 satır, ≥ 560 px 4 × 2 + 1 satır — boş
   hücre yok). Minyatür geniş bir panorama şeridi; altında ZORUNLU atıf satırı (CC BY 4.0). */
#gorunumAyarlari .zemin-kart.zemin-kart-tam { grid-column: 1 / -1; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zemin-kartlar { --zo-guc: 55%; --zo-aurora: 70%; }
@media (min-width: 560px) {
  #gorunumAyarlari .zemin-kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }   /* v494: 3 → 4 sütun (7 kart + geniş Kozmik = 8 hücre) */
}
#gorunumAyarlari .zemin-ornek {
  position: relative; display: block; height: 64px; overflow: hidden;
  overflow: clip; overflow-clip-margin: 1px;                  /* v470: kırpma kenarlığı da kapsar (SVG minyatür kenarlığın altına uzanır) */
  border-radius: calc(var(--r) - 4px); border: 1px solid var(--cizgi);
  background: linear-gradient(160deg, var(--st-zemin-taban), var(--st-zemin-derin));
  isolation: isolate;
}
@media (min-width: 560px) { #gorunumAyarlari .zemin-ornek { height: 84px; } }
/* v470: kart içeriği ÜSTTEN dizilir (düğme içeriği varsayılan olarak dikeyde ORTALANIR → aynı satırda açıklaması iki satıra saran kartın
   yanındaki kartların minyatürü aşağı kayıyordu — Kutup Işığı / Gece Yarısı, ölçüldü) */
#gorunumAyarlari .palet-kart,
#gorunumAyarlari .zemin-kart { display: flex; flex-direction: column; }
#gorunumAyarlari .palet-kart > .egim-ic,
#gorunumAyarlari .zemin-kart > .egim-ic { align-content: start; justify-content: stretch; }   /* .egim-ic kartın yerleşimini MİRAS alır (mikro.css §9) */
/* v470: minyatür degradeleri KENARLIK kutusundan başlar — yoksa döşeme 1 px'lik kenarlığın altında karşı kenardan TEKRARLANIYOR, geniş
   Otomatik kartında sol kenarda ince parlak çizgi olarak görünüyordu (ölçüldü). Tür kuralları "background" kısaltmasıyla origin'i sıfırladığı
   için özgüllük (1,4,0) ≥ tema/palet kapsamlı tür kuralları (1,3,0). */
#gorunumAyarlari .zemin-kart > .egim-ic > .zemin-ornek.zemin-ornek { background-origin: border-box; }
#gorunumAyarlari .zemin-ad { font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; padding: 0 2px; }
#gorunumAyarlari .zemin-rozet { font-size: 11px; line-height: 1.25; color: var(--soluk); overflow-wrap: anywhere; padding: 0 2px; }
#gorunumAyarlari .zemin-atif { font-size: 10.5px; line-height: 1.3; color: var(--soluk); overflow-wrap: anywhere; padding: 0 2px; opacity: .85; }   /* v501 Hubble: CC BY 4.0 atfı */

/* v475 Aurora — KUTUP IŞIĞI PERDELERİ: gök (taban → derin) + gövdelerin hava ışıması (CSS) · üç ışık perdesi (satır içi SVG, ayarlar-gorunum.js ▸
   ayarAuroraYollari — büyük arka planın alt kenar ailesi, açılış anı): radyanta yakınsayan IŞIN DİLİMLERİ, her biri alttan üste degrade (parlak
   alt bant → gövde → saydam uç; boy ve opaklık dilimden dilime değişir); arka perde soluk. ÇİZGİ / stroke YOK.
   Rol renkleri PALET KİMLİĞİ (zemin-hesap.js ▸ ZEMIN_AURORA_KIMLIK) ile aynı: --zo-a-alt (bant), --zo-a-orta (gövde), --zo-a-ust (ışın ucu). (v465–v474: dört radyal ışık havuzu.) */
#gorunumAyarlari .zo-akis {
  --zo-a-alt: var(--st-zemin-isik-1); --zo-a-orta: var(--st-zemin-isik-2); --zo-a-ust: var(--st-zemin-isik-3);
  background:
    radial-gradient(70% 62% at 64% 74%, color-mix(in srgb, var(--zo-a-orta) 22%, transparent), transparent 72%),
    radial-gradient(45% 55% at 10% 6%, color-mix(in srgb, var(--st-zemin-taban) 70%, transparent), transparent 70%),
    linear-gradient(180deg, var(--st-zemin-taban), var(--st-zemin-derin));
}
#gorunumAyarlari .zo-a-d0 { stop-color: var(--zo-a-alt); stop-opacity: .95; }   /* dilim: parlak alt bant (kenar keskin) */
#gorunumAyarlari .zo-a-d1 { stop-color: var(--zo-a-alt); stop-opacity: .62; }
#gorunumAyarlari .zo-a-d2 { stop-color: var(--zo-a-orta); stop-opacity: .34; }  /* gövde */
#gorunumAyarlari .zo-a-d3 { stop-color: var(--zo-a-ust); stop-opacity: 0; }     /* ışın ucu söner */
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-akis {
  background:
    radial-gradient(70% 62% at 64% 74%, color-mix(in srgb, var(--zo-a-orta) 26%, transparent), transparent 72%),
    linear-gradient(180deg, var(--st-zemin-taban), var(--st-zemin-derin));
}
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-a-d0 { stop-opacity: .85; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-a-d2 { stop-opacity: .40; }
/* palet kimliği (ZEMIN_AURORA_KIMLIK ile aynı roller; "i1/i2/i3" = --st-zemin-isik-1/2/3) */
:root[data-tema="koyu"]:not([data-palet]) #gorunumAyarlari .zo-akis { --zo-a-alt: var(--st-zemin-isik-3); --zo-a-orta: #2EC4D6; --zo-a-ust: #7C8CE0; }
:root[data-tema="koyu"][data-palet="grafit"] #gorunumAyarlari .zo-akis { --zo-a-orta: #8FA6BE; }
:root[data-tema="koyu"][data-palet="obsidyen-zumrut"] #gorunumAyarlari .zo-akis { --zo-a-orta: #14A88E; --zo-a-ust: #2FA9C9; }
:root[data-tema="koyu"][data-palet="gece-yarisi"] #gorunumAyarlari .zo-akis { --zo-a-alt: #8FE3FF; --zo-a-ust: #5A48C8; }
:root[data-tema="koyu"][data-palet="uzay-siyahi"] #gorunumAyarlari .zo-akis { --zo-a-alt: #A9D4F5; --zo-a-orta: #9C9AB8; }
:root[data-tema="aydinlik"]:not([data-palet]) #gorunumAyarlari .zo-akis { --zo-a-alt: #2FB3C6; --zo-a-orta: #7E9CF0; --zo-a-ust: #C79BE8; }
:root[data-tema="aydinlik"][data-palet="porselen"] #gorunumAyarlari .zo-akis { --zo-a-orta: #8FC6D8; --zo-a-ust: var(--st-zemin-isik-2); }
:root[data-tema="aydinlik"][data-palet="fildisi-varak"] #gorunumAyarlari .zo-akis { --zo-a-orta: #9CC9D9; --zo-a-ust: var(--st-zemin-isik-2); }
:root[data-tema="aydinlik"][data-palet="yildiz-isigi"] #gorunumAyarlari .zo-akis { --zo-a-alt: var(--st-zemin-isik-2); --zo-a-orta: #E5C8CF; --zo-a-ust: #E8CDB5; }
:root[data-tema="aydinlik"][data-palet="dogal-titanyum"] #gorunumAyarlari .zo-akis { --zo-a-alt: var(--st-zemin-isik-2); --zo-a-orta: var(--st-zemin-isik-1); --zo-a-ust: var(--st-zemin-isik-3); }

/* v468 Işık Heykeli (ve Otomatik = Işık Heykeli): büyük arka planın dili — sağa yükselen üç katmanlı tabaka; her tabakanın üst
   kenarı ışıkta parlayan yuvarlak dudak (geniş degrade, ince çizgi YOK), içi derin tona iner; arkadaki tabaka bulanık ve soluk.
   Katmanlar: öndeki önce (CSS'te ilk arka plan en üsttedir). Renkler var(--st-zemin-*) → palet değişince kendiliğinden. */
#gorunumAyarlari .zo-heykel,
#gorunumAyarlari .zo-oto {
  background:
    radial-gradient(150% 130% at 100% 200%, color-mix(in srgb, var(--st-zemin-isik-1) 22%, var(--st-zemin-taban)) 0 84%, color-mix(in srgb, var(--st-zemin-isik-1) 62%, var(--st-zemin-taban)) 95%, color-mix(in srgb, var(--st-zemin-isik-1) 80%, #fff) 99%, transparent 100%),
    radial-gradient(140% 135% at 110% 160%, color-mix(in srgb, var(--st-zemin-isik-2) 16%, var(--st-zemin-taban)) 0 82%, color-mix(in srgb, var(--st-zemin-isik-2) 55%, var(--st-zemin-taban)) 94%, color-mix(in srgb, var(--st-zemin-isik-2) 78%, #fff) 99%, transparent 100%),
    radial-gradient(150% 130% at 115% 120%, color-mix(in srgb, var(--zo-heykel-arka, var(--st-zemin-isik-3)) 14%, var(--st-zemin-taban)) 0 78%, color-mix(in srgb, var(--zo-heykel-arka, var(--st-zemin-isik-3)) 45%, var(--st-zemin-taban)) 94%, transparent 101%),
    radial-gradient(60% 70% at 70% 20%, color-mix(in srgb, var(--st-zemin-isik-1) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--st-zemin-taban), var(--st-zemin-derin));
}
/* v468 son: Klasik koyu PALET KİMLİĞİ (zemin-hesap.js ▸ ZEMIN_HEYKEL_KIMLIK) — arka tabaka derin LACİVERT; nane yalnız geçirgenlikte */
:root[data-tema="koyu"]:not([data-palet]) #gorunumAyarlari :is(.zo-heykel, .zo-oto) { --zo-heykel-arka: #1E2C73; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-heykel,
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-oto {
  background:
    radial-gradient(150% 130% at 100% 200%, color-mix(in srgb, var(--st-zemin-isik-1) 55%, var(--st-zemin-taban)) 0 84%, color-mix(in srgb, var(--st-zemin-isik-1) 28%, #fff) 95%, #fff 99%, transparent 100%),
    radial-gradient(140% 135% at 110% 160%, color-mix(in srgb, var(--st-zemin-isik-2) 50%, var(--st-zemin-taban)) 0 82%, color-mix(in srgb, var(--st-zemin-isik-2) 26%, #fff) 94%, #fff 99%, transparent 100%),
    radial-gradient(150% 130% at 115% 120%, color-mix(in srgb, var(--st-zemin-isik-3) 40%, var(--st-zemin-taban)) 0 78%, color-mix(in srgb, var(--st-zemin-isik-3) 20%, #fff) 94%, transparent 101%),
    linear-gradient(160deg, var(--st-zemin-taban), var(--st-zemin-derin));
}

/* v470 Cam Küreler — büyük arka planın KOMPOZİSYONU (düzeltme turu, 02.10): kahraman küre sağ kenarda (bir kısmı dışarıda), uydu üstte, iki uzak
   bulanık küre altta. Küre DOLGU IŞIĞIYLA anlatılır: gövde diski kenara doğru YUMUŞAKÇA söner (%62 → %100, bokeh — parlak kenar HALKASI YOK;
   taste: "Ayarlar'da kontur halkaları"), sol üstten içeri düşen dolgu ışığı (ışık yönü büyük arka planla aynı) + küçük yumuşak parıltı.
   Katmanlar: parıltı → dolgu ışığı → gövde → ışık lobları → taban. Damla konumu/yarıçapı minyatürün yüksekliğine göre (px) — 64 / 84 px'te aynı oran. */
#gorunumAyarlari .zo-kure {
  --zo-kure-govde: color-mix(in srgb, var(--st-zemin-isik-1) 34%, var(--st-zemin-taban));
  --zo-kure-dolgu: color-mix(in srgb, var(--st-zemin-isik-1) 58%, transparent);
  --zo-kure-parilti: color-mix(in srgb, var(--st-zemin-isik-1) 70%, #fff);
  --zo-kure-golge: color-mix(in srgb, #000 45%, transparent);
  --zo-r: 28px;                                     /* kahraman yarıçapı (84 px minyatürde; 64 px'te aşağıda) */
  background:
    radial-gradient(ellipse calc(var(--zo-r) * .26) calc(var(--zo-r) * .15) at calc(89% - var(--zo-r) * .38) calc(60% - var(--zo-r) * .42), color-mix(in srgb, var(--zo-kure-parilti) 85%, transparent), transparent),
    radial-gradient(circle calc(var(--zo-r) * .66) at calc(89% - var(--zo-r) * .30) calc(60% - var(--zo-r) * .30), var(--zo-kure-dolgu), transparent),
    radial-gradient(circle calc(var(--zo-r) * .24) at calc(61% - var(--zo-r) * .11) calc(9% - var(--zo-r) * .11), var(--zo-kure-dolgu), transparent),
    radial-gradient(circle var(--zo-r) at 89% 60%, var(--zo-kure-govde) 0 62%, transparent 100%),
    radial-gradient(circle calc(var(--zo-r) * .36) at 61% 9%, var(--zo-kure-govde) 0 55%, transparent 100%),
    radial-gradient(circle calc(var(--zo-r) * 1.15) at calc(89% + var(--zo-r) * .22) calc(60% + var(--zo-r) * .28), var(--zo-kure-golge), transparent 80%),
    radial-gradient(circle calc(var(--zo-r) * .42) at 52% 100%, color-mix(in srgb, var(--zo-kure-govde) 70%, transparent) 0 40%, transparent 100%),
    radial-gradient(circle calc(var(--zo-r) * .56) at 11% 96%, color-mix(in srgb, var(--zo-kure-govde) 70%, transparent) 0 40%, transparent 100%),
    radial-gradient(60% 80% at 78% 18%, color-mix(in srgb, var(--st-zemin-isik-1) 30%, transparent), transparent 70%),
    radial-gradient(55% 70% at 15% 95%, color-mix(in srgb, var(--st-zemin-isik-2) 16%, transparent), transparent 70%),
    linear-gradient(160deg, var(--st-zemin-taban), var(--st-zemin-derin));
}
@media (max-width: 559.98px) { #gorunumAyarlari .zo-kure { --zo-r: 21px; } }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kure {
  --zo-kure-govde: color-mix(in srgb, #fff 45%, var(--st-zemin-isik-1));
  --zo-kure-dolgu: color-mix(in srgb, #fff 90%, transparent);
  --zo-kure-parilti: #fff;
  --zo-kure-golge: color-mix(in srgb, var(--st-zemin-isik-2) 55%, transparent);
}
/* v475 Kumul: gök (tepe → ufuk ışıması) + sağ üstte ay / güneş halesi (CSS) · satır içi SVG (ayarlar-gorunum.js ▸ ayarKumulYollari — büyük arka
   planın sırt ailesi): üç uzak tepe (yamaç gölge ↔ aydın durakları, uzak tepe sise karışır) + BIÇAK SIRTLI kahraman: kayma yüzü (gölge, dibe doğru
   yansıyan ışık) ve rüzgâr yüzü (aydın, sırtta parlak). Rol renkleri PALET KİMLİĞİ (zemin-hesap.js ▸ ZEMIN_KUMUL_KIMLIK) ile aynı:
   --zo-k-isik (aydın yüz), --zo-k-golge (kayma yüzü), --zo-k-ufuk (ufuk ışıması), --zo-k-hale, --zo-k-gok. İnce çizgi / kontur YOK. */
#gorunumAyarlari .zo-kumul {
  --zo-k-isik: var(--st-zemin-isik-2); --zo-k-golge: color-mix(in srgb, var(--st-zemin-isik-1) 40%, #10183A); --zo-k-ufuk: var(--st-zemin-isik-1);
  --zo-k-hale: var(--zo-k-isik); --zo-k-gok: var(--st-zemin-taban);
  --zo-k-a: color-mix(in srgb, var(--zo-k-isik) 70%, var(--st-zemin-taban)); --zo-k-g: color-mix(in srgb, var(--zo-k-golge) 55%, var(--st-zemin-taban));
  --zo-k-s: color-mix(in srgb, var(--zo-k-golge) 30%, color-mix(in srgb, var(--zo-k-ufuk) 18%, var(--st-zemin-taban)));
  background:
    radial-gradient(34% 40% at 84% 22%, color-mix(in srgb, var(--zo-k-hale) 26%, transparent), transparent 72%),
    linear-gradient(180deg, var(--zo-k-gok) 0%, var(--st-zemin-taban) 14%, color-mix(in srgb, var(--zo-k-ufuk) 42%, var(--st-zemin-taban)) 36%, var(--st-zemin-taban) 62%);
}
#gorunumAyarlari .zo-kumul .zo-k-aydin-ust { stop-color: color-mix(in srgb, var(--zo-k-isik) 86%, var(--st-zemin-taban)); }
#gorunumAyarlari .zo-kumul .zo-k-aydin-alt { stop-color: color-mix(in srgb, var(--zo-k-isik) 46%, var(--st-zemin-taban)); }
#gorunumAyarlari .zo-kumul .zo-k-golge-ust { stop-color: color-mix(in srgb, var(--zo-k-golge) 22%, var(--st-zemin-taban)); }
#gorunumAyarlari .zo-kumul .zo-k-golge-alt { stop-color: color-mix(in srgb, var(--zo-k-golge) 48%, var(--st-zemin-taban)); }
:root[data-tema="koyu"]:not([data-palet]) #gorunumAyarlari .zo-kumul { --zo-k-golge: #1E2C73; }
:root[data-tema="koyu"][data-palet="grafit"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-isik-3); --zo-k-golge: #2A2F3A; --zo-k-ufuk: var(--st-zemin-isik-2); }
:root[data-tema="koyu"][data-palet="obsidyen-zumrut"] #gorunumAyarlari .zo-kumul { --zo-k-isik: #C9D2CE; --zo-k-golge: #0B3A30; --zo-k-ufuk: var(--st-zemin-isik-2); --zo-k-hale: #C9D2CE; }
:root[data-tema="koyu"][data-palet="kutup-isigi"] #gorunumAyarlari .zo-kumul { --zo-k-golge: var(--st-zemin-isik-3); --zo-k-ufuk: var(--st-zemin-isik-1); }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kumul {
  --zo-k-isik: #EBC9A0; --zo-k-golge: var(--st-zemin-isik-1); --zo-k-ufuk: #F2D3B3; --zo-k-hale: #FFF3DE; --zo-k-gok: var(--st-zemin-isik-2);
  --zo-k-a: color-mix(in srgb, var(--zo-k-isik) 70%, #fff); --zo-k-g: color-mix(in srgb, var(--zo-k-golge) 55%, #fff);
  --zo-k-s: color-mix(in srgb, var(--zo-k-ufuk) 40%, #fff);
  background:
    radial-gradient(34% 40% at 84% 22%, color-mix(in srgb, var(--zo-k-hale) 85%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--zo-k-gok) 45%, #fff) 0%, color-mix(in srgb, var(--zo-k-ufuk) 55%, #fff) 38%, var(--st-zemin-taban) 62%);
}
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kumul .zo-k-aydin-ust { stop-color: color-mix(in srgb, var(--zo-k-isik) 62%, #fff); }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kumul .zo-k-aydin-alt { stop-color: color-mix(in srgb, var(--zo-k-isik) 78%, #fff); }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kumul .zo-k-golge-ust { stop-color: color-mix(in srgb, var(--zo-k-golge) 62%, #fff); }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kumul .zo-k-golge-alt { stop-color: color-mix(in srgb, var(--zo-k-golge) 44%, #fff); }
:root[data-tema="aydinlik"][data-palet="porselen"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-isik-2); --zo-k-golge: var(--st-zemin-isik-3); --zo-k-ufuk: var(--st-zemin-isik-2); --zo-k-gok: var(--st-zemin-isik-3); }
:root[data-tema="aydinlik"][data-palet="fildisi-varak"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-isik-2); --zo-k-golge: #E2C49A; --zo-k-ufuk: var(--st-zemin-cizgi); --zo-k-gok: var(--st-zemin-taban); }
:root[data-tema="aydinlik"][data-palet="buzul-safagi"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-cizgi); --zo-k-golge: var(--st-zemin-isik-3); --zo-k-ufuk: var(--st-zemin-cizgi); --zo-k-gok: var(--st-zemin-isik-2); }
/* Apple bitişi paletlerinin Kumul kimliği (zemin-hesap.js ▸ ZEMIN_KUMUL_KIMLIK ile aynı roller) — v475 Uzay Siyahı: titanyum sırt, grafit-çelik gölge, BAKIR ufuk */
:root[data-tema="koyu"][data-palet="gece-yarisi"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-isik-1); --zo-k-golge: var(--st-zemin-isik-3); --zo-k-ufuk: var(--st-zemin-isik-2); --zo-k-hale: var(--st-zemin-cizgi); }
:root[data-tema="koyu"][data-palet="uzay-siyahi"] #gorunumAyarlari .zo-kumul { --zo-k-isik: #C9C3B8; --zo-k-golge: #3A4658; --zo-k-ufuk: var(--st-zemin-isik-3); --zo-k-hale: #C2CAD6; }
:root[data-tema="aydinlik"][data-palet="yildiz-isigi"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-isik-1); --zo-k-golge: var(--st-zemin-isik-2); --zo-k-ufuk: var(--st-zemin-isik-1); --zo-k-gok: var(--st-zemin-taban); }
:root[data-tema="aydinlik"][data-palet="dogal-titanyum"] #gorunumAyarlari .zo-kumul { --zo-k-isik: var(--st-zemin-isik-3); --zo-k-golge: var(--st-zemin-isik-2); --zo-k-ufuk: var(--st-zemin-isik-3); --zo-k-gok: var(--st-zemin-taban); }

/* Düz: taban + çok hafif iki radyal (css/zemin.css ▸ #zeminKok[data-tip="duz"] ile aynı dil) */
#gorunumAyarlari .zo-duz {
  background:
    radial-gradient(120% 90% at 12% -10%, color-mix(in srgb, var(--st-zemin-isik-1) 7%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 110%, color-mix(in srgb, var(--st-zemin-isik-2) 8%, transparent), transparent 60%),
    var(--st-zemin-taban);
}

/* v494 KOZMİK ("kozmik" kartı): tuval minyatürü büyük arka planın KENDİ JS eşiyle, gerçek dokuların küçültülmüş atlasından (zemin.js ▸ kozmikAtlasIste;
   palet + tema renkleriyle). Atlas inene dek / zemin.js yoksa yer tutucu aynı kompozisyonda: üstte derin mavi gaz, altta kehribar kenarlı uçurum,
   sağda sütunlar. Çizgi / halka / ışın YOK. */
#gorunumAyarlari .zo-kozmik {
  background: radial-gradient(60% 34% at 50% 100%, color-mix(in srgb, #C8672A 40%, var(--st-zemin-taban)), transparent 72%),
    radial-gradient(18% 46% at 86% 78%, color-mix(in srgb, #9A5428 42%, var(--st-zemin-taban)), transparent 75%),
    radial-gradient(46% 40% at 30% 46%, color-mix(in srgb, #2F6DB8 34%, var(--st-zemin-taban)), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, #0B1C3A 60%, var(--st-zemin-taban)), var(--st-zemin-taban));
}
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-kozmik {
  background: radial-gradient(60% 34% at 50% 100%, color-mix(in srgb, #E9B48A 55%, var(--st-zemin-taban)), transparent 72%),
    radial-gradient(46% 40% at 30% 46%, color-mix(in srgb, #A9C4EA 45%, var(--st-zemin-taban)), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, #C9D6EE 40%, var(--st-zemin-taban)), var(--st-zemin-taban));
}
/* v501 HUBBLE ("hubble" kartı, TAM genişlik): tuval minyatürü büyük arka planın KENDİ JS eşiyle, üç sahnenin durağan bileşim ATLASINDAN
   (zemin.js ▸ hubbleAtlasIste; o anki sahne + tema). Atlas inene dek / zemin.js yoksa yer tutucu: Karina'nın sıcak kızıl-turuncu gazı + serin
   camgöbeği iyonize gaz. Çizgi / halka / ışın YOK. */
#gorunumAyarlari .zo-hubble { height: 96px; }
@media (min-width: 560px) { #gorunumAyarlari .zo-hubble { height: 104px; } }
#gorunumAyarlari .zo-hubble {
  background: radial-gradient(40% 70% at 22% 55%, color-mix(in srgb, #8FB8B4 30%, var(--st-zemin-taban)), transparent 72%),
    radial-gradient(45% 80% at 78% 40%, color-mix(in srgb, #B5653A 38%, var(--st-zemin-taban)), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, #3A1E14 45%, var(--st-zemin-taban)), var(--st-zemin-taban));
}
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-hubble {
  background: radial-gradient(40% 70% at 22% 55%, color-mix(in srgb, #BFD8D4 45%, var(--st-zemin-taban)), transparent 72%),
    radial-gradient(45% 80% at 78% 40%, color-mix(in srgb, #E8BFA3 50%, var(--st-zemin-taban)), transparent 74%),
    var(--st-zemin-taban);
}
/* Hubble sahnesi seçici + atıf (yalnız Hubble seçiliyken) */
#gorunumAyarlari .zemin-hubble { display: grid; gap: 8px; margin-top: 14px; justify-items: start; }
#gorunumAyarlari .zemin-hubble.gizli { display: none; }
#gorunumAyarlari .zemin-hubble h5 { margin: 0; font-size: 13px; font-weight: 600; color: var(--metin); }
#gorunumAyarlari .zemin-hubble .ipucu { margin: 0; }
#gorunumAyarlari .zemin-hubble .segment { max-width: 100%; flex-wrap: wrap; }
#gorunumAyarlari .zemin-hubble-atif { font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
#gorunumAyarlari .zemin-hubble-atif a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Derin Uzay / İpek: satır içi SVG (ayarlar-gorunum.js bir kez üretir) */
#gorunumAyarlari .zemin-ornek > svg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); display: block; }
/* v475 birleşim: Aurora + Derin Uzay minyatürü TUVAL — büyük arka planın kendi JS eşiyle çizilen açılış karesi (ayarlar-gorunum.js ▸
   zeminTuvalMinyaturleri / zemin.js ▸ zemin.minyatur); SVG yalnız zemin.js yoksa yedek. Tuval de kenarlığın altına uzanır. */
#gorunumAyarlari .zemin-ornek > canvas.zo-tuval { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); display: block; object-fit: cover; }
/* v470: SVG minyatür KENARLIĞIN altına da uzanır (kenarlık yarı saydam: altında kalan degrade kenarda açık bir çerçeve çiziyordu — Kumul aydınlık) */
/* v475 DERİN UZAY ("takimyildiz" kartı): koyu gök + bulanık salma/yansıma bulutları + yıldızlar + kahraman hale. Roller büyük arka planın
   palet kimliğiyle aynı (zemin-hesap.js ▸ ZEMIN_DERIN_KIMLIK): --zo-du-s salma · --zo-du-y yansıma. Çizgi / halka / ışın YOK. */
#gorunumAyarlari .zo-takimyildiz {
  --zo-du-s: var(--st-zemin-isik-1); --zo-du-y: var(--st-zemin-isik-2);
  /* v475 birleşim: tuval çizilene dek yer tutucu da büyük arka planın kompozisyonunda — sol üst koyu, sol alttan sağ üste nehir */
  background: radial-gradient(34% 30% at 24% 80%, color-mix(in srgb, var(--zo-du-s) 30%, transparent), transparent 72%),
    radial-gradient(38% 34% at 80% 28%, color-mix(in srgb, var(--zo-du-s) 26%, transparent), transparent 72%),
    radial-gradient(60% 26% at 52% 56%, color-mix(in srgb, var(--zo-du-y) 16%, transparent), transparent 75%),
    linear-gradient(170deg, var(--st-zemin-derin), var(--st-zemin-taban));
}
:root[data-tema="koyu"]:not([data-palet]) #gorunumAyarlari .zo-takimyildiz { --zo-du-s: #3A7BD5; --zo-du-y: var(--st-zemin-isik-3); }
:root[data-tema="koyu"][data-palet="grafit"] #gorunumAyarlari .zo-takimyildiz { --zo-du-y: var(--st-zemin-isik-3); }
:root[data-tema="koyu"][data-palet="obsidyen-zumrut"] #gorunumAyarlari .zo-takimyildiz { --zo-du-y: #1E6F8F; }
:root[data-tema="koyu"][data-palet="kutup-isigi"] #gorunumAyarlari .zo-takimyildiz { --zo-du-s: #4F63E0; --zo-du-y: var(--st-zemin-isik-1); }
:root[data-tema="koyu"][data-palet="gece-yarisi"] #gorunumAyarlari .zo-takimyildiz { --zo-du-s: var(--st-zemin-isik-2); --zo-du-y: #3FA8E0; }
:root[data-tema="koyu"][data-palet="uzay-siyahi"] #gorunumAyarlari .zo-takimyildiz { --zo-du-s: color-mix(in srgb, var(--st-zemin-isik-3) 70%, #D2742E); --zo-du-y: color-mix(in srgb, var(--st-zemin-isik-2) 40%, #3D7BD8); }
#gorunumAyarlari .zo-du-bulut.s { fill: var(--zo-du-s); opacity: .85; }
#gorunumAyarlari .zo-du-bulut.y { fill: var(--zo-du-y); opacity: .75; }
#gorunumAyarlari .zo-du-yildiz.i1 { fill: color-mix(in srgb, #9BB0FF 60%, #fff); }
#gorunumAyarlari .zo-du-yildiz.i2 { fill: color-mix(in srgb, #FFE7C5 45%, #fff); }
#gorunumAyarlari .zo-du-hale0 { stop-color: color-mix(in srgb, var(--zo-du-y) 55%, #fff); stop-opacity: .55; }
#gorunumAyarlari .zo-du-hale1 { stop-color: var(--zo-du-y); stop-opacity: 0; }
#gorunumAyarlari .zo-du-cekirdek { fill: #F4F7FF; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-takimyildiz { background: linear-gradient(170deg, var(--st-zemin-derin), var(--st-zemin-taban)); }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-du-bulut.s { opacity: .62; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-du-bulut.y { opacity: .50; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-du-yildiz { fill: color-mix(in srgb, var(--st-zemin-cizgi) 45%, #fff); }   /* zemin-son: aydınlıkta mürekkep nokta yok — açık pastel pırıltı (yedek) */
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-du-hale0 { stop-color: var(--zo-du-y); stop-opacity: .45; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-du-cekirdek { fill: color-mix(in srgb, var(--zo-du-y) 45%, #fff); }
#gorunumAyarlari .zo-serit { opacity: .42; }
:root[data-tema="aydinlik"] #gorunumAyarlari .zo-serit { opacity: .75; }
#gorunumAyarlari .zo-ipek-a0 { stop-color: var(--st-zemin-isik-1); }  #gorunumAyarlari .zo-ipek-b0 { stop-color: var(--st-zemin-isik-3); }
#gorunumAyarlari .zo-ipek-a1 { stop-color: var(--st-zemin-isik-2); }  #gorunumAyarlari .zo-ipek-b1 { stop-color: var(--st-zemin-isik-1); }
#gorunumAyarlari .zo-ipek-a2 { stop-color: var(--st-zemin-isik-3); }  #gorunumAyarlari .zo-ipek-b2 { stop-color: var(--st-zemin-isik-2); }

/* ---------- Vurgu: ilk örnek "Palet" (etkin paletin kendi vurgusu; data-palet-onizle kapsamı) ---------- */
/* ⚠️ data-palet-onizle öğeye background/color da yazar (tema-paletleri.css §4); örnek rengi --ornek'ten gelsin */
#gorunumAyarlari .vurgu-secici > button[data-palet-onizle] { background: var(--ornek); }

/* ---------- Zorunlu renkler (Windows yüksek karşıtlık): seçim halkası sistem rengiyle görünür kalsın ---------- */
@media (forced-colors: active) {
  #gorunumAyarlari .palet-kart[aria-checked="true"],
  #gorunumAyarlari .zemin-kart[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: 1px; }
  #gorunumAyarlari .segment > button[aria-checked="true"] { outline: 2px solid Highlight; }
}

/* v464 — Arka plan ▸ Canlılık (Sade / Dengeli / Canlı): kart ızgarasının altında, durum satırından sonra */
#gorunumAyarlari .zemin-canlilik { display: grid; gap: 8px; margin-top: 14px; justify-items: start; }
#gorunumAyarlari .zemin-canlilik h5 { margin: 0; font-size: 13px; font-weight: 600; color: var(--metin); }
#gorunumAyarlari .zemin-canlilik .ipucu { margin: 0; }

/* ---------- v469 Cam (Sıvı · Buzlu · Düz) — satırı js/ayarlar-gorunum.js ▸ camSatiriKur üretir (tam satır, Arka plan'dan sonra) ----------
   Segment görünümü yukarıdaki ortak .segment kuralından; burada yalnız genişlik. #camDurum aria-live (boşken yer kaplamaz). */
#gorunumAyarlari #camSecici { max-width: 360px; }

/* ---------- v507 Arka plan ▸ Panel opaklığı (kaydırıcı; davranış js/ayarlar-gorunum.js ▸ panelOpaklik*, formül css/cam-temel.css §9) ----------
   Canlılık'ın altında (ikisi de "arka plan ↔ panel" dengesi). Değer okuması sağ üstte (tabular), uç etiketleri izin altında, varsayılan
   konumu izin altında küçük nokta (--po-sifir = (0 − min) / (max − min); JS kaydırıcının KENDİ kabına yazar — köke değil).
   "Göz at" kipi (sürüklerken pencerenin çekilmesi) css/cam-bilesen.css §9b'de. Cam kapalıyken (?cam=kapali) satır gizli: etkisi de yok. */
#gorunumAyarlari .panel-opaklik { display: grid; gap: 4px; margin-top: 16px; max-width: 520px; min-width: 0; }
#gorunumAyarlari .panel-opaklik .po-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
#gorunumAyarlari .panel-opaklik h5 { margin: 0; font-size: 13px; font-weight: 600; color: var(--metin); }
#gorunumAyarlari .panel-opaklik h5 label { cursor: pointer; }
#gorunumAyarlari .panel-opaklik .po-deger { font-size: 13px; font-weight: 600; color: var(--metin); font-variant-numeric: tabular-nums lining-nums; }
#gorunumAyarlari .panel-opaklik .po-iz { position: relative; --po-sifir: .2308; padding-bottom: 6px; }
#gorunumAyarlari .panel-opaklik .po-iz::after {                /* varsayılan konumu: başparmak yarıçapı kadar içeriden (22 px başparmak) */
  content: ""; position: absolute; bottom: 0; left: calc(11px + (100% - 22px) * var(--po-sifir));
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--soluk); pointer-events: none;
}
#gorunumAyarlari .panel-opaklik .po-kaydirac { display: block; margin: 10px 0 4px; touch-action: pan-y; }
#gorunumAyarlari .panel-opaklik .po-kaydirac:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; }
#gorunumAyarlari .panel-opaklik .po-etiket { gap: 12px; }
#gorunumAyarlari .panel-opaklik .po-etiket > span:last-child { text-align: right; }
#gorunumAyarlari .panel-opaklik .ipucu { margin: 4px 0 0; }
#gorunumAyarlari .panel-opaklik .po-sifirla { justify-self: start; min-height: 44px; margin: 0 0 -10px -14px; font-size: 13px; }
#gorunumAyarlari .panel-opaklik .po-sifirla:disabled { opacity: .45; cursor: default; }
:root:not([data-cam-etkin]) #panelOpaklikAyar { display: none; }
@media (forced-colors: active) {
  #gorunumAyarlari .panel-opaklik .po-iz::after { background: CanvasText; }
}