/* ==========================================================================
   Cam gezinme çubuğu · ortak bileşen (premium-1011/_ortak/cam-nav)
   Kaynak: kurucunun 11.11 reels'i, video 33 «Navigation Tabs V10».
   Üç çeşit: .cn--a yazılı sekmeler · .cn--b genişleyen hap + yuvarlak düğme
             .cn--c yükselen baloncuk + oyuklu üst kenar
   Yeni (12.11): [data-cn-cesit="d|e|f|g|h"] ışık izi · sahne ışığı · damla · dikey ray · açılan kat (aşağıda)
   Renk ve ölçü değişkenleri (ürün ya da herhangi bir üst öğe verir):
     --cn-cam  --cn-kenar  --cn-vurgu  --cn-yazi  --cn-yukseklik
   İsteğe bağlı: --cn-vurgu-ust --cn-vurgu-alt --cn-vurgu-yazi --cn-vurgu-kenar
     --cn-ustunde --cn-isik --cn-golge --cn-isima --cn-bulanik --cn-rozet --cn-cizgi
   KURAL: backdrop-filter olan öğede filter canlandırması yok (WebKit çöker).
   Hareket yalnız transform, opacity ve genişlik.
   ========================================================================== */

.cn {
  --_cam: var(--cn-cam, rgba(36, 30, 28, .44));
  --_kenar: var(--cn-kenar, rgba(255, 255, 255, .5));
  --_vurgu: var(--cn-vurgu, #4A6AA6);
  --_yazi: var(--cn-yazi, rgba(255, 255, 255, .94));
  --_yuk: var(--cn-yukseklik, 64px);
  --_vurgu-ust: var(--cn-vurgu-ust, var(--_vurgu));
  --_vurgu-alt: var(--cn-vurgu-alt, var(--_vurgu));
  --_vurgu-yazi: var(--cn-vurgu-yazi, #fff);
  --_vurgu-kenar: var(--cn-vurgu-kenar, rgba(255, 255, 255, .5));
  --_ustunde: var(--cn-ustunde, #7FE3D0);
  --_isik: var(--cn-isik, rgba(255, 255, 255, .28));
  --_golge: var(--cn-golge, 0 10px 22px -12px rgba(0, 0, 0, .6));
  --_isima: var(--cn-isima, rgba(74, 106, 166, .55));
  --_bulanik: var(--cn-bulanik, 18px);
  --_suzgec: var(--cn-suzgec, blur(var(--_bulanik)) brightness(1.12) saturate(.9));
  --_rozet: var(--cn-rozet, #D42A3C);
  --_cizgi: var(--cn-cizgi, rgba(255, 255, 255, .62));
  --_sheen: var(--cn-parilti, linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 62%));
  position: relative;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.cn *, .cn *::before, .cn *::after { box-sizing: border-box; }
.cn a, .cn button { font: inherit; color: inherit; text-decoration: none; }
.cn button { background: none; border: 0; padding: 0; cursor: pointer; }
.cn-oge, .cn-yuvarlak { cursor: pointer; outline: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* Simge: çizgi. Seçilince (b) dolar; hiç dolmayacak parça fill="none" taşır. */
.cn-simge { display: block; flex: none; width: 20px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: fill .2s ease; }

/* Ortak malzeme: arkasını bulandıran cam, 1 px açık kenar, üstte iç parlama, altta yumuşak gölge.
   Süzgeç videodan ölçüldü (olcu.md §2): koyu zeminde +18, ahşapta +28 parlaklık = beyaz %10 + brightness 1.12. */
.cn-cam, .cn--a:not(.cn--hazir) .cn-oge, .cn--b .cn-cubuk, .cn--b .cn-yuvarlak, .cn-serit {
  background: var(--_sheen), var(--_cam);
  -webkit-backdrop-filter: var(--_suzgec);
  backdrop-filter: var(--_suzgec);
}
.cn-cam, .cn--a:not(.cn--hazir) .cn-oge, .cn--b .cn-cubuk, .cn--b .cn-yuvarlak {
  border: 1px solid var(--_kenar);
  box-shadow: inset 0 1px 0 var(--_isik), var(--_golge);
}

/* Odak: iç koyu + dış açık iki halka; her zeminde biri en az 3:1 seçilir. */
.cn-oge:focus-visible, .cn-yuvarlak:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #0B0B10;
}
.cn--c .cn-oge:focus-visible { outline-offset: -5px; box-shadow: none; }
.cn--c .cn-oge:focus-visible::after { content: ""; position: absolute; inset: 7px; border-radius: 13px; box-shadow: 0 0 0 2px #0B0B10; pointer-events: none; }

/* ------------------------------------------------------------------ (a) */
.cn--a {
  --_h: max(44px, calc(var(--_yuk) * .75));   /* ürün küçük yükseklik verse de dokunma alanı ≥ 44 px */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  width: 100%;
  min-height: var(--_h);
}
.cn--a .cn-oge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--_h);
  min-width: 44px;
  padding: 0 20px;
  border-radius: calc(var(--_h) * .27);
  color: var(--_yazi);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: color .22s ease;
}
.cn--a .cn-oge[aria-current] { padding: 0 32px; }
.cn--a .cn-ad { display: inline-block; white-space: nowrap; }
.cn--a .cn-oge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(165deg, var(--_vurgu-ust), var(--_vurgu-alt));
  box-shadow: inset 0 0 0 1px var(--_vurgu-kenar), inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 26px -6px var(--_isima);
  opacity: 0;
  transition: opacity .13s linear;          /* eski hap: video k019 %85 · k020 %59 · k021 %40 (olcu.md §2) */
}
.cn--a .cn-oge[aria-current] { color: var(--_vurgu-yazi); }
/* Yeni hap bir kare geç başlar: videoda k020'de daha boş, k021 %46, k024 %86 (olcu.md §2). */
.cn--a .cn-oge[aria-current]::before { opacity: 1; transition: opacity .28s cubic-bezier(.2, .7, .3, 1) .04s; }
@media (hover: hover) {
  .cn--a .cn-oge:not([aria-current]):hover { color: var(--_ustunde); }
}
.cn--a .cn-oge.cn-ustunde:not([aria-current]) { color: var(--_ustunde); }

/* Betik hazırsa: sekmeler ölçülüp yerleştirilir (transform + genişlik).
   Cam her sekmenin içinde ayrı katman (.cn-cam); birleşik kapsülde ilk sekmenin camı
   bütün grubu kaplar, ötekilerin camı gizlenir: birleşik kapsülde dikiş olmaz. */
.cn--a.cn--hazir { display: block; height: var(--_h); min-height: 0; }
.cn--a.cn--hazir .cn-oge { position: absolute; left: 0; top: 0; padding: 0; }
.cn--a .cn-cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; border-radius: inherit; pointer-events: none; }
.cn--a.cn--dar .cn-oge { font-size: 14px; }
.cn--a.cn--en-dar .cn-oge { font-size: 13px; }
.cn--a.cn--kaydir { overflow-x: auto; overflow-y: hidden; height: calc(var(--_h) + 22px); padding-bottom: 22px; scrollbar-width: none; }
.cn--a.cn--kaydir::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ (b) */
.cn--b {
  --_ic: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--cn-b-en, 400px);
  margin-inline: auto;
}
.cn--b .cn-cubuk {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--_yuk);
  padding: var(--_ic);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.cn--b .cn-oge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--_yuk) - 2 * var(--_ic) - 2px);
  min-width: 44px;
  border-radius: 999px;
  color: var(--_yazi);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s ease;
}
/* Etiket genişliği (simgeyle arasındaki 8 px dahil) yalnız max-width ile açılır. */
.cn--b .cn-ad {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width .32s cubic-bezier(.3, 1.15, .4, 1), opacity .1s ease;
}
.cn--b .cn-ad::before { content: ""; display: inline-block; width: 8px; }
.cn--b .cn-oge[aria-current] { color: var(--_vurgu-yazi); }
.cn--b .cn-oge[aria-current] .cn-simge { fill: currentColor; }
.cn--b .cn-oge[aria-current] .cn-ad {
  max-width: var(--_ad-en, 168px);
  opacity: 1;
  transition: max-width .32s cubic-bezier(.3, 1.15, .4, 1), opacity .18s ease .08s;
}
.cn--b.cn--yalin .cn-oge[aria-current] .cn-ad { max-width: 0; opacity: 0; }
@media (hover: hover) {
  .cn--b .cn-oge:not([aria-current]):hover, .cn--b .cn-yuvarlak:hover { color: var(--_ustunde); }
}
.cn--b .cn-oge.cn-ustunde:not([aria-current]) { color: var(--_ustunde); }
/* Betiksiz hâl: seçili öğe kendisi dolu hap olur. */
.cn--b:not(.cn--hazir) .cn-oge[aria-current] { padding: 0 16px; background: linear-gradient(165deg, var(--_vurgu-ust), var(--_vurgu-alt)); box-shadow: inset 0 0 0 1px var(--_vurgu-kenar); }
.cn--b.cn--hazir .cn-cubuk { display: block; }
/* Betik hazırsa öğe, etiket ve hap aynı karelerden canlanır (cam-nav.js bKare): etiket yalnız hapın
   içinde açılır, hap geçtiği öğenin etiketini taşır (video k110 «Search»). Öğe taşanı keser;
   odak halkası outline olduğu için kesilmez. */
.cn--b.cn--hazir .cn-oge { position: absolute; left: 0; top: var(--_ic); overflow: hidden; }
.cn--b.cn--hazir .cn-ad { transition: none; }
/* Seçili simge hap gelince dolar (video k111), giden simge hemen boşalır. */
.cn--b.cn--hazir .cn-oge[aria-current] .cn-simge { transition: fill .15s ease .1s; }
.cn-hap {
  position: absolute;
  left: 0;
  top: var(--_ic);
  height: calc(var(--_yuk) - 2 * var(--_ic) - 2px);
  border-radius: 999px;
  background: linear-gradient(165deg, var(--_vurgu-ust), var(--_vurgu-alt));
  box-shadow: inset 0 0 0 1px var(--_vurgu-kenar), inset 0 1px 0 rgba(255, 255, 255, .34), 0 8px 18px -10px var(--_isima);
  pointer-events: none;
}
.cn--b .cn-yuvarlak {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--_yuk);
  height: var(--_yuk);
  border-radius: 50%;
  color: var(--_yazi);
  transition: color .2s ease;
}
.cn--b .cn-yuvarlak .cn-simge { width: 24px; height: 24px; }
.cn-rozet {
  position: absolute;
  top: 8px;
  right: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--_rozet);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 2px 6px rgba(0, 0, 0, .35);
}
.cn--b.cn--sik { gap: 8px; }
.cn--b.cn--sik .cn-yuvarlak { width: calc(var(--_yuk) - 8px); height: calc(var(--_yuk) - 8px); }

/* ------------------------------------------------------------------ (c) */
.cn--c {
  --_balon: 44px;
  --_ust: 20px;            /* baloncuğun çubuktan taşan payı */
  --_c-ic: 8px;
  width: 100%;
  max-width: var(--cn-c-en, 440px);
  margin-inline: auto;
  padding-top: var(--_ust);
}
.cn-ogeler {
  position: relative;
  z-index: 2;
  display: flex;
  height: var(--_yuk);
  padding: 0 var(--_c-ic);
}
.cn--c .cn-oge {
  position: relative;
  flex: 1 1 0;
  min-width: 44px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--_yazi);
  transition: color .2s ease;
}
.cn--c .cn-simge { width: 24px; height: 24px; transition: opacity .1s ease; }
.cn--c .cn-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) {
  .cn--c .cn-oge:not([aria-current]):hover { color: var(--_ustunde); }
}
.cn--c .cn-oge.cn-ustunde:not([aria-current]) { color: var(--_ustunde); }
/* Betiksiz hâl: seçili simge dolu dairede. */
.cn--c:not(.cn--hazir) { padding-top: 0; border-radius: 999px; background: var(--_sheen), var(--_cam); border: 1px solid var(--_kenar); -webkit-backdrop-filter: var(--_suzgec); backdrop-filter: var(--_suzgec); }
.cn--c:not(.cn--hazir) .cn-ogeler { display: flex; }
.cn--c:not(.cn--hazir) .cn-oge[aria-current]::before { content: ""; position: absolute; width: var(--_balon); height: var(--_balon); border-radius: 50%; background: var(--_vurgu); z-index: -1; }
.cn--c:not(.cn--hazir) .cn-oge[aria-current] { color: var(--_vurgu-yazi); z-index: 0; }
.cn--c.cn--hazir .cn-oge[aria-current] .cn-simge { opacity: 0; }

.cn-kabuk {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: var(--_ust);
  height: var(--_yuk);
  border-radius: calc(var(--_yuk) / 2);
  overflow: hidden;
  box-shadow: var(--_golge);
  pointer-events: none;
}
/* Kayan cam şerit: çubuğun iki katı genişlikte, oyuk ortasında. Yalnız transform ile kayar. */
.cn-serit {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  --_oyuk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='40' viewBox='0 0 98 40'%3E%3Cpath d='M0 0C21 0 24 31 49 31C74 31 77 0 98 0V40H0Z'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(#000, #000), var(--_oyuk), linear-gradient(#000, #000), linear-gradient(#000, #000);
  /* Katmanlar 1 px üst üste biner: kesirli piksellerde katman sınırında saç teli çizgi kalmaz. */
  -webkit-mask-size: calc(50% - 48px) 100%, 98px 40px, 98px calc(100% - 39px), calc(50% - 48px) 100%;
  -webkit-mask-position: 0 0, 50% 0, 50% 100%, 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), var(--_oyuk), linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: calc(50% - 48px) 100%, 98px 40px, 98px calc(100% - 39px), calc(50% - 48px) 100%;
  mask-position: 0 0, 50% 0, 50% 100%, 100% 0;
  mask-repeat: no-repeat;
}
/* Kenar halkası: şeridin içinde ama ters yönde kayar, yani yerinde durur; oyuk maskesi onu da keser. */
.cn-halka {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: calc(var(--_yuk) / 2);
  border: 1px solid var(--_kenar);
  box-shadow: inset 0 1px 0 var(--_isik);
}
.cn-oyuk-cizgi {
  position: absolute;
  left: calc(50% - 49px);
  top: 0;
  width: 98px;
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: var(--_kenar);
  stroke-width: 2;
}
.cn-gosterge {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 100px;
  height: 4px;
  margin-left: -50px;
  border-radius: 2px;
  background: var(--_cizgi);
}
.cn--c[data-cn-cizgi="yok"] .cn-gosterge { display: none; }
.cn-balon {
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc(var(--_ust) + 2px - var(--_balon) / 2);
  width: var(--_balon);
  height: var(--_balon);
  border-radius: 50%;
  background: radial-gradient(120% 90% at 30% 12%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, var(--_vurgu-ust), var(--_vurgu-alt));
  box-shadow: inset 0 0 0 1px var(--_vurgu-kenar), 0 8px 16px -6px rgba(0, 0, 0, .45), 0 6px 18px -8px var(--_isima);
  color: var(--_vurgu-yazi);
  pointer-events: none;
}
.cn-balon-ic { position: absolute; inset: 0; display: grid; place-items: center; }
.cn-balon .cn-simge { width: 22px; height: 22px; }
.cn-balon .cn-simge { stroke-width: 1.9; }

/* ------------------------------------------------------------------ açık zemin (KARAR-Y9, 12.11)
   Açık cam (Hairise, Tailmedic gibi) açık zemine binince beyaz kenar kaybolur, kapsül köşeli
   bir dikdörtgen gibi okunur. data-cn-zemin="acik" nav'a ya da üst öğeye konur: 1 px koyu saydam
   kenar + yumuşak gölge; yuvarlak uçlar ve (c)'nin oyuğu seçilir. Yalnız renk/gölge; hareket yok. */
[data-cn-zemin="acik"] .cn, .cn[data-cn-zemin="acik"] {
  --cn-kenar: var(--cn-kenar-acik, rgba(22, 24, 29, .18));
  --cn-golge: var(--cn-golge-acik, 0 1px 2px rgba(22, 24, 29, .10), 0 10px 26px -10px rgba(22, 24, 29, .32));
  /* Chromium (c) şeridinin bulanıklığını kabuğun yuvarlak köşesiyle değil dikdörtgenle keser; köşe
     dışında kalan parça parlatılırsa açık zeminde soluk bir dikdörtgen olarak görünür. Parlatma yok:
     düz zeminde köşe zeminle aynı kalır. (clip-path ile kırpmak camın bulanıklığını öldürüyor, ölçüldü.) */
  --cn-suzgec: var(--cn-suzgec-acik, blur(18px) saturate(1.2));
}
/* (c): kenar maskeyle kesilen halkada; kabuğun gölgesi maske dışında kalmasın diye halkaya da ince dış çizgi. */
[data-cn-zemin="acik"] .cn--c .cn-halka, .cn--c[data-cn-zemin="acik"] .cn-halka { box-shadow: inset 0 1px 0 var(--_isik), inset 0 -1px 0 rgba(22, 24, 29, .06); }

/* ==================================================================== YENİ ÇEŞİTLER (d–h)
   Seçici: <nav class="cn" data-cn-cesit="d|e|f|g|h">. Öğeler (c) gibi doğrudan nav'ın içinde: a.cn-oge > svg.cn-simge + span.cn-ad.
   Aynı motor (cam-nav.js), aynı değişkenler (--cn-cam, --cn-kenar, --cn-vurgu, --cn-yazi, --cn-yukseklik, temalar, data-cn-zemin).
   Kaynaklar: video 02 «Glassy Navigation Tabs V5» ve 03 «Dashboard V18» (ikisi de video 33'ün sahibi, code.xr).
   (d) ışık izi · 02 çubuk A   (e) sahne ışığı · 02 çubuk B   (f) damla · 02 çubuk D
   (g) dikey ray · 03 sol ray   (h) açılan kat (arama) · 02 çubuk A'nın arama kutusu
   KURAL: cam öğede (backdrop-filter) yalnız transform ve opacity canlanır; filter, genişlik, maske canlanmaz. */
.cn[data-cn-cesit="d"], .cn[data-cn-cesit="e"], .cn[data-cn-cesit="f"], .cn[data-cn-cesit="h"] {
  --_ic: var(--cn-ic, 8px);   /* çubuğun iç yan payı; öğeler kalan genişliği eşit paylaşır */
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--cn-yeni-en, 440px);
  height: var(--_yuk);
  margin-inline: auto;
  padding: 0 var(--_ic);
}
.cn[data-cn-cesit="d"], .cn[data-cn-cesit="h"] { --_yuk: var(--cn-yukseklik, 68px); }
.cn[data-cn-cesit="f"] { --_yuk: var(--cn-yukseklik, 72px); --_f-yaricap: var(--cn-f-yaricap, calc(var(--_yuk) * .27)); }
/* Betiksiz hâl ve betik hazır olmadan önce: nav'ın kendisi cam. */
.cn[data-cn-cesit]:not(.cn--hazir) {
  background: var(--_sheen), var(--_cam);
  -webkit-backdrop-filter: var(--_suzgec);
  backdrop-filter: var(--_suzgec);
  border: 1px solid var(--_kenar);
  box-shadow: inset 0 1px 0 var(--_isik), var(--_golge);
  border-radius: 999px;
}
.cn[data-cn-cesit="f"]:not(.cn--hazir) { border-radius: var(--_f-yaricap); }
.cn[data-cn-cesit].cn--hazir { padding: 0; }
/* Cam gövde: süs katmanı; öğeler onun üstünde ayrı kapta (odak halkası kesilmesin). */
.cn-govde {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  background: var(--_sheen), var(--_cam);
  -webkit-backdrop-filter: var(--_suzgec);
  backdrop-filter: var(--_suzgec);
  border: 1px solid var(--_kenar);
  box-shadow: inset 0 1px 0 var(--_isik), var(--_golge);
}
.cn[data-cn-cesit] .cn-ogeler { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; padding: 4px var(--_ic); }
.cn[data-cn-cesit]:not(.cn--hazir) .cn-ogeler { padding: 0; }
.cn[data-cn-cesit] .cn-oge {
  position: relative;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--_yazi);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .2s ease;
}
.cn[data-cn-cesit]:not(.cn--hazir) > .cn-oge { flex: 1 1 0; }
/* KARAR-NAV6 (12.11): satır 14→16 px. 13 px yazıda Ü/İ noktası ve ğ/g/ş kuyruğu 14 px'lik kutudan ~1 cihaz pikseli taşıyıp
   overflow ile kırpılıyordu (inceleme/13px-olcum.md). Kırpma yatayda kalır (… ve yalın ölçümü scrollWidth'e bakar). */
.cn[data-cn-cesit] .cn-ad { display: block; line-height: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Düzeltme turu 3: Chromium 2×/3× ekranda 12 px adların harf aralığını yuvarlıyordu («Öğre nci», «Prog ram», «Öde me»).
   Yalnız yeni çeşitlerde (d–h); eski (a)/(b)/(c) 16 px'te kırılmıyor ve görüntüleri aynı kalmalı. */
.cn[data-cn-cesit] .cn-ad { text-rendering: geometricPrecision; }
@media (hover: hover) {
  .cn[data-cn-cesit] .cn-oge:not([aria-current]):hover { color: var(--_ustunde); }
}
.cn[data-cn-cesit] .cn-oge.cn-ustunde:not([aria-current]) { color: var(--_ustunde); }
.cn[data-cn-cesit] .cn-oge[aria-current] .cn-simge { fill: currentColor; }
.cn-gizli-ad { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* En uzun ad bile öğeye sığmıyorsa (dar ekran, uzun ad) adlar yalnız ekran okuyucuda kalır, simge ortalanır. */
.cn[data-cn-cesit].cn--yalin .cn-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cn[data-cn-cesit].cn--yalin .cn-simge { margin-bottom: 0; }

/* ---------------------------------------------------------- (d) ışık izi: alt kenar çizgisi seçilende tümsek olur
   Video 02 çubuk A: nane çizgi çubuğun alt kenarı boyunca uzanır, seçili öğede çan biçiminde yukarı kalkar;
   simge dolar, altında nokta. Çizgi iki kat genişlikte bir şerit; yalnız transform ile kayar (k007→k019 ölçülen eğri). */
.cn[data-cn-cesit="d"] .cn-simge, .cn[data-cn-cesit="h"] .cn-simge { width: 20px; height: 20px; margin-bottom: 12px; }
.cn-iz-kap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Uçlarda düz çizgi yuvarlak köşenin dışına taşmasın: orta bant + üst yarı + iki uç dairesi görünür. */
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000),
    radial-gradient(circle at calc(var(--_yuk) / 2) 50%, #000 calc(var(--_yuk) / 2 - 2.5px), transparent calc(var(--_yuk) / 2 - 2px)),
    radial-gradient(circle at calc(100% - var(--_yuk) / 2) 50%, #000 calc(var(--_yuk) / 2 - 2.5px), transparent calc(var(--_yuk) / 2 - 2px));
  -webkit-mask-size: calc(100% - var(--_yuk)) 100%, 100% 50%, 100% 100%, 100% 100%;
  -webkit-mask-position: 50% 0, 0 0, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000),
    radial-gradient(circle at calc(var(--_yuk) / 2) 50%, #000 calc(var(--_yuk) / 2 - 2.5px), transparent calc(var(--_yuk) / 2 - 2px)),
    radial-gradient(circle at calc(100% - var(--_yuk) / 2) 50%, #000 calc(var(--_yuk) / 2 - 2.5px), transparent calc(var(--_yuk) / 2 - 2px));
  mask-size: calc(100% - var(--_yuk)) 100%, 100% 50%, 100% 100%, 100% 100%;
  mask-position: 50% 0, 0 0, 0 0, 0 0;
  mask-repeat: no-repeat;
}
.cn-iz, .cn-iz-uc { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cn-iz path, .cn-iz-uc path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cn-iz .cn-iz-hale, .cn-iz-uc .cn-iz-hale { stroke: var(--cn-iz, var(--_vurgu-ust)); stroke-width: 7; opacity: .26; }
.cn-iz .cn-iz-cizgi, .cn-iz-uc .cn-iz-cizgi { stroke: var(--cn-iz, var(--_vurgu-ust)); stroke-width: 2.5; }
.cn-iz .cn-iz-dolgu { fill: var(--cn-iz, var(--_vurgu-ust)); stroke: none; opacity: .13; }
.cn-iz circle { fill: var(--cn-iz, var(--_vurgu-ust)); }
.cn[data-cn-cesit="d"]:not(.cn--hazir) .cn-oge[aria-current]::after,
.cn[data-cn-cesit="h"]:not(.cn--hazir) .cn-oge[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 60%; height: 2.5px; margin-left: -30%; border-radius: 2px; background: var(--_vurgu-ust);
}

/* ---------------------------------------------------------- (e) sahne ışığı: üst kenarda kısa ışık, aşağı açılan koni
   Video 02 çubuk B: seçili simgenin üstünde kısa nane çubuk + aşağı açılan ışık konisi; seçilmeyen simgeler sönük. */
.cn[data-cn-cesit="e"] { --_yuk: var(--cn-yukseklik, 64px); }
.cn[data-cn-cesit="e"] .cn-simge { width: var(--cn-e-simge, 26px); height: var(--cn-e-simge, 26px); transition: opacity .2s ease; }
/* Videoda seçilmeyen simgeler sönük (~.72) ama bu, üstüne gelme renginin karşıtlığını 4,5'in altına düşürüyor (ölçüldü):
   varsayılan 1; seçili simgeyi ışık ve kalın çizgi ayırır. */
.cn[data-cn-cesit="e"] .cn-oge:not([aria-current]) .cn-simge { opacity: var(--cn-e-sonuk, 1); }
.cn[data-cn-cesit="e"] .cn-oge[aria-current] .cn-simge { fill: transparent; stroke-width: 2.1; }
.cn[data-cn-cesit="e"]:not([data-cn-etiket="goster"]) .cn-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cn[data-cn-cesit="e"][data-cn-etiket="goster"] .cn-simge { width: 22px; height: 22px; margin-bottom: 3px; }
.cn-spot { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; }
.cn-spot svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.cn-spot stop, .cn-iz-uc stop { stop-color: var(--cn-spot, var(--cn-iz, var(--_vurgu-ust))); }
/* Koninin gücü: videodaki tam güç (1) açık renkli ışıkta seçili simgenin karşıtlığını 4,5'in altına düşürüyor (ölçüldü). */
.cn-spot-koni { opacity: var(--cn-spot-guc, .5); }
.cn-spot-cubuk { fill: var(--cn-spot, var(--_vurgu-ust)); }
.cn-spot-hale { fill: var(--cn-spot, var(--_vurgu-ust)); opacity: .35; }
.cn[data-cn-cesit="e"]:not(.cn--hazir) .cn-oge[aria-current]::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 3px; margin-left: -18px; border-radius: 0 0 3px 3px; background: var(--_vurgu-ust);
}

/* ---------------------------------------------------------- (f) damla: seçilen simge camdan bir damlayla yükselip geri iner
   Video 02 çubuk D: köşesi %27 yuvarlak renkli cam; seçili etiket kalın + altında nokta. Tıklanınca simge çubuktan
   boyunla kopan bir cam damlada yukarı çıkar (kopunca çubukta kısa bir kabarıklık kalır), süzülür, iner; çubuktan kalkan
   bir tümsek damlayı karşılar, ikisi tek gövde olur ve çubuğa çekilir; çubuk o sırada daralır, inince esneyip oturur.
   Parçalar yalnız transform ile canlanır (cam-nav.js fDamla, k119→k160 ölçülen çizelge, olcu-cesit.md §6). */
.cn[data-cn-cesit="f"] .cn-govde { border-radius: var(--_f-yaricap); transform-origin: 50% 50%; }
.cn[data-cn-cesit="f"] .cn-simge { width: 22px; height: 22px; margin-bottom: 4px; }
.cn[data-cn-cesit="f"] .cn-oge::before {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: currentColor; opacity: 0; transition: opacity .12s ease;
}
.cn[data-cn-cesit="f"] .cn-oge[aria-current]::before { opacity: 1; transition: opacity .12s ease .2s; }
.cn[data-cn-cesit="f"] .cn-oge[aria-current] { font-weight: 700; transition: color .2s ease, font-weight 0s linear .2s; }
.cn[data-cn-cesit="f"] .cn-oge[aria-current] .cn-simge { fill: transparent; stroke-width: 2.2; }
/* Damla tek gövde gibi çizilir (düzeltme turu 2, video k120–k160):
   · parçalar: damla (daire), boyun (kum saati, bağlıyken), tümsek (çubuktan kalkan içbükey yamaçlı koni; kopunca kalan
     kabarıklık, inişte damlayı karşılayan tepe) ve kuyruk (damladan sarkan sivri uç, boğulma anında);
   · cam bulanıklığı her parçanın kendi katmanında, neredeyse renksiz (backdrop-filter + %8 cam rengi, betik yazar);
   · renk ve kenar tek SVG'de (.cn-f-renk): parçalar grup saydamlığıyla birleşir, üst üste binen yerde renk bir kat,
     içeride kenar çizgisi yok (kenar yalnız birleşik siluetin dışında);
   · hepsi çubuğun üst kenarında kesilen kapta (.cn-f-kap): damlanın çubuğa inen kısmı görünmez, damla çubuğa akar.
   Yalnız transform canlanır; saydamlık yalnız uçuşun ilk ve son karesinde. Boşta kap gizli (cam katmanı yok). */
.cn-f-kap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2px);    /* alt kenar: çubuğun üst kenarının 2 px altı (çubuğun 1 px kenar çizgisini örter) */
  height: calc(var(--_yuk) * 1.8 + 4px);
  overflow: hidden;
  pointer-events: none;
  /* z-index yok (kap ayrı yığın bağlamı kurmaz); sıra DOM'dan: gövde (z 0) < kap < öğeler (z 2) < uçan simge (z 4). */
  visibility: hidden;
}
.cn-f-kap.cn-f-ucus { visibility: visible; }
.cn-f-camkap { position: absolute; left: 0; right: 0; top: 0; bottom: 2px; overflow: hidden; pointer-events: none; }
.cn-damla, .cn-boyun, .cn-tumsek, .cn-kuyruk {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 0;
  background: transparent;
  -webkit-backdrop-filter: var(--_suzgec);
  backdrop-filter: var(--_suzgec);
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%; mask-repeat: no-repeat;
}
.cn-damla { border-radius: 50%; }
.cn-f-renk { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.cn-f-renk path, .cn-f-renk circle { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.cn-f-kenar path, .cn-f-kenar circle { stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* Uçan simge: damlanın ortasında, çubuğun öğelerinin üstünde (çubuğa inerken de görünür, sonra yerindeki simgeye devreder). */
.cn-damla-simge { position: absolute; left: 0; top: 0; z-index: 4; width: 22px; height: 22px; color: var(--_yazi); pointer-events: none; opacity: 0; }
.cn-damla-simge .cn-simge { width: 22px; height: 22px; margin: 0; fill: transparent; stroke-width: 2.2; }

/* ---------------------------------------------------------- (g) dikey ray: kenarda simge rayı, seçili simge renkli dairede
   Video 03 «Dashboard V18»: ince hap ray; seçili simge dolu dairede, rayın kenarında küçük yarım çıkıntı; ad balonu yanda.
   Telefonda ekranın sol ya da sağ kenarında yüzer (data-cn-yan="sag" balonu sola açar). */
.cn[data-cn-cesit="g"] {
  --_ray: var(--cn-ray-en, 56px);
  --_adim: var(--cn-ray-adim, 52px);
  --_g-ic: 8px;
  display: block;
  width: var(--_ray);
  padding: var(--_g-ic) 0;
  border-radius: calc(var(--_ray) / 2);
}
.cn[data-cn-cesit="g"] .cn-govde { border-radius: calc(var(--_ray) / 2); }
.cn[data-cn-cesit="g"] .cn-ogeler { flex-direction: column; height: auto; padding: var(--_g-ic) 0; }
.cn[data-cn-cesit="g"]:not(.cn--hazir) .cn-ogeler { display: flex; flex-direction: column; }
.cn[data-cn-cesit="g"] .cn-oge { flex: none; height: var(--_adim); width: 100%; min-width: 0; border-radius: 50%; }
.cn[data-cn-cesit="g"] .cn-simge { width: 22px; height: 22px; }
.cn[data-cn-cesit="g"] .cn-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cn[data-cn-cesit="g"] .cn-oge[aria-current] { color: var(--_vurgu-yazi); }
.cn[data-cn-cesit="g"] .cn-oge[aria-current] .cn-simge { fill: transparent; }
.cn[data-cn-cesit="g"]:not(.cn--hazir) .cn-oge[aria-current]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--_vurgu); z-index: -1; }
.cn[data-cn-cesit="g"]:not(.cn--hazir) .cn-oge[aria-current] { z-index: 0; }
.cn-isaret { --_d: var(--cn-ray-daire, 42px); position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: var(--_d); pointer-events: none; }
.cn-isaret::before {   /* seçili daire */
  content: ""; position: absolute; left: 50%; top: 0; width: var(--_d); height: var(--_d); margin-left: calc(var(--_d) / -2); border-radius: 50%;
  background: radial-gradient(120% 90% at 30% 12%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, var(--_vurgu-ust), var(--_vurgu-alt));
  box-shadow: inset 0 0 0 1px var(--_vurgu-kenar), 0 6px 14px -8px var(--_isima);
}
.cn-isaret::after {    /* rayın kenarındaki yarım çıkıntı (video 03) */
  content: ""; position: absolute; top: calc(var(--_d) / 2 - 8px); right: -6px; width: 8px; height: 16px; border-radius: 0 8px 8px 0;
  background: var(--cn-cikinti, var(--_vurgu-alt));
}
.cn[data-cn-cesit="g"][data-cn-yan="sag"] .cn-isaret::after { right: auto; left: -6px; border-radius: 8px 0 0 8px; }
.cn-ad-balon {
  position: absolute; left: calc(100% + 12px); top: 0; z-index: 4; pointer-events: none;
  height: 28px; padding: 0 12px; border-radius: 9px; display: flex; align-items: center;
  background: var(--cn-balon-zemin, #16181D); color: var(--cn-balon-yazi, #fff);
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0;
  text-rendering: geometricPrecision;   /* Chromium küçük yazıda harf aralığını yuvarlıyordu («Pro file», «Bug ün»); ölçüldü, bu düzeltir */
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
  transition: opacity .16s ease;
}
.cn[data-cn-cesit="g"][data-cn-yan="sag"] .cn-ad-balon { left: auto; right: calc(100% + 12px); }
.cn-ad-balon.cn-gorunur { opacity: 1; }

/* ---------------------------------------------------------- (h) açılan kat: çubuğun üstünde arama katı doğar
   Video 02 çubuk A'nın arama kutusu (k008→k021 açılış, k026→k034 kapanış): önce boş cam hap soldan büyür,
   sonra büyüteç, yer tutucu ve ✕ gelir. Seçim: dolu simge + altında kayan nokta (aynı çubuğun noktası).
   Cam kat yalnız transform/opacity ile canlanır: kap yuvarlak kesik, içindeki cam soldan kayarak büyür. */
.cn-nokta { position: absolute; left: 0; top: 0; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: var(--cn-iz, var(--_vurgu-ust)); pointer-events: none; }
.cn-kat-kap {
  position: absolute;
  left: var(--cn-kat-sol, 0px);
  bottom: calc(100% + var(--cn-kat-ara, 12px));
  width: var(--cn-kat-en, 100%);
  height: var(--cn-kat-yukseklik, 52px);
  border-radius: 999px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.cn-kat-kap.cn-acik { pointer-events: auto; }
.cn-kat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  color: var(--_yazi);
  background: var(--_sheen), var(--_cam);
  -webkit-backdrop-filter: var(--_suzgec);
  backdrop-filter: var(--_suzgec);
  border: 1px solid var(--_kenar);
  box-shadow: inset 0 1px 0 var(--_isik);
}
.cn-kat[hidden] { display: none; }
.cn-kat .cn-simge { width: 20px; height: 20px; }
.cn-kat-giris {
  flex: 1 1 auto; min-width: 0; height: 44px; border: 0; padding: 0; background: transparent; color: inherit;
  font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
  text-rendering: geometricPrecision;   /* düzeltme turu 3: yer tutucu da kırılıyordu («ür ün», «any thing»); kat yalnız (h)'de */
}
.cn-kat-giris::placeholder { color: inherit; opacity: .96; }   /* .92'de Odakly açık zeminde WebKit 4,49 ölçtü */
.cn-kat-giris::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.cn-kat-kapat {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.cn-kat-kapat::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: currentColor; opacity: .1; }
.cn-kat-kapat svg { position: relative; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.cn-kat-kapat:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px #0B0B10; }
/* Giriş odakta: kutunun içinde ikinci çerçeve yerine katın kendisi vurgu rengiyle çerçevelenir (imleç de görünür). */
.cn-kat-giris:focus-visible { outline: none; }
.cn-kat:focus-within { box-shadow: inset 0 0 0 2px var(--cn-iz, var(--_vurgu-ust)), inset 0 1px 0 var(--_isik); }
.cn[data-cn-cesit="h"] .cn-oge[data-cn-kat] .cn-simge { fill: transparent; }
/* Kat açıkken: düğmenin simgesi kata uçmuştur (video k010–k026'da sekmede simge yok), seçili simge boşalır. */
.cn[data-cn-cesit="h"] .cn-oge.cn-ac-acik .cn-simge { opacity: 0; }
.cn[data-cn-cesit="h"].cn-kat-acik .cn-oge[aria-current] .cn-simge { fill: transparent; }
.cn-ucan { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; color: var(--_yazi); pointer-events: none; opacity: 0; }
.cn-ucan .cn-simge { width: 20px; height: 20px; margin: 0; }

/* Açık zeminde yeni çeşitler: aynı koyu saydam kenar + gölge (KARAR-Y9 ile aynı değişkenler). */
[data-cn-zemin="acik"] .cn-kat, .cn[data-cn-zemin="acik"] .cn-kat { box-shadow: inset 0 1px 0 var(--_isik), 0 1px 2px rgba(22, 24, 29, .10), 0 8px 20px -10px rgba(22, 24, 29, .30); }

/* ------------------------------------------------------------------ ürün renkleri
   data-cn-tema nav'ın kendisine ya da herhangi bir üst öğeye konur.
   Her tema hem koyu fotoğraf hem açık zemin üstünde 4,5:1 verecek camla kuruldu (olcu.md §5). */
[data-cn-tema="hairise"] {          /* açık zemin, kırmızı: açık cam + koyu yazı */
  --cn-cam: rgba(248, 248, 250, .72);
  --cn-kenar: rgba(255, 255, 255, .92);
  --cn-yazi: #16181D;
  --cn-vurgu: #D82300; --cn-vurgu-ust: #D82300; --cn-vurgu-alt: #AE1A00;
  --cn-vurgu-yazi: #fff; --cn-vurgu-kenar: rgba(255, 196, 180, .55);
  --cn-ustunde: #8A1500;              /* üstüne gelme: her iki zeminde ≥ 4,5 (olcu.md §8) */
  --cn-isik: rgba(255, 255, 255, .95);
  --cn-isima: rgba(216, 35, 0, .42);
  --cn-golge: 0 10px 24px -12px rgba(70, 24, 12, .38), 0 0 0 .5px rgba(22, 24, 29, .10);
  --cn-parilti: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
  --cn-cizgi: rgba(22, 24, 29, .32);
  --cn-suzgec: blur(18px) saturate(1.4) brightness(1.04);
}
[data-cn-tema="wenu"] {             /* fotoğraf üstü cam, turkuaz: koyu cam + açık yazı */
  --cn-cam: rgba(8, 18, 34, .70);     /* %70: açık zeminde üstüne gelme rengi de ≥ 4,5 (olcu.md §8) */
  --cn-kenar: rgba(255, 255, 255, .38);
  --cn-yazi: #F2FBFA;
  --cn-vurgu: #2CCFBC; --cn-vurgu-ust: #8AF3E2; --cn-vurgu-alt: #22BFAE;
  --cn-vurgu-yazi: #04221F; --cn-vurgu-kenar: rgba(220, 255, 250, .7);
  --cn-ustunde: #8AF3E2;
  --cn-isik: rgba(255, 255, 255, .26);
  --cn-isima: rgba(46, 220, 200, .5);
  --cn-suzgec: blur(22px) saturate(1.4);
}
[data-cn-tema="odakly"] {           /* koyu çivit, sarı: çivit cam + açık yazı */
  --cn-cam: rgba(26, 18, 74, .70);
  --cn-kenar: rgba(190, 178, 255, .45);
  --cn-yazi: #EEF0FF;
  --cn-vurgu: #FFE14D; --cn-vurgu-ust: #FFEB85; --cn-vurgu-alt: #FFD21F;
  --cn-vurgu-yazi: #15131F; --cn-vurgu-kenar: rgba(255, 250, 220, .75);
  --cn-ustunde: #FFE14D;
  --cn-isik: rgba(200, 190, 255, .35);
  --cn-isima: rgba(255, 214, 40, .38);
  --cn-suzgec: blur(20px) saturate(1.3);
}
[data-cn-tema="tailmedic"] {        /* pastel, nane: nane cam + koyu yazı, koyu yeşil hap */
  --cn-cam: rgba(232, 247, 240, .72);
  --cn-kenar: rgba(255, 255, 255, .92);
  --cn-yazi: #141216;
  --cn-vurgu: #1C6A42; --cn-vurgu-ust: #1F7547; --cn-vurgu-alt: #175A38;
  --cn-vurgu-yazi: #fff; --cn-vurgu-kenar: rgba(208, 240, 226, .6);
  --cn-ustunde: #0F4A2C;              /* üstüne gelme: her iki zeminde ≥ 4,5 (olcu.md §8) */
  --cn-isik: rgba(255, 255, 255, .95);
  --cn-isima: rgba(46, 158, 98, .40);
  --cn-golge: 0 10px 24px -12px rgba(20, 60, 40, .35), 0 0 0 .5px rgba(20, 18, 22, .10);
  --cn-parilti: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
  --cn-cizgi: rgba(20, 18, 22, .30);
  --cn-suzgec: blur(18px) saturate(1.3) brightness(1.04);
}

/* Hareket azaltma: kayma yok; yalnız kısa renk/saydamlık geçişi. */
@media (prefers-reduced-motion: reduce) {
  .cn *, .cn *::before, .cn *::after { transition-property: opacity, color, fill !important; transition-duration: .12s !important; transition-delay: 0s !important; }
}