/* ═════════════════════════════════════════════════════════════════════════
   Ortak işçilik katmanı (tema kalitesi, 2026-09-28) — EMA Plast'taki işçilik seviyesinin (ışık, derinlik, hover, ilerleme,
   belirme, bölüm üstü marka çizgisi) temalara taşınan ortak kısmı. Şartname: scratchpad tema-kalite/analiz.md bölüm 3.
   Bağlama: her _TemaLayout bu dosyayı tema.css'ten ÖNCE bağlar → tema her kuralı ezebilir.
   Kural: YALNIZ ik-* sınıfları ve data-ik-* öznitelikleriyle devreye girer; eklenmeyen öğeyi etkilemez, onaylı yerleşim
   (başlık çubuğu, açılış imza düzeneği, renk, bölüm sırası) değişmez. Ayrıca: TemelKod imzası (.tk-imza), demo / sahip
   şeridi (.tk-serit) ve demo form notu (.tk-demo-form) — bunlar sınıfları çekirdek parçalar basar.

   Tema :root eşlemesi (hepsinin varsayılanı aşağıda):
     --ik-vurgu      temanın tek doygun rengi (varsayılan var(--vurgu))
     --ik-murekkep   gölge ve perde mürekkebi, RGB üçlüsü "15 28 41" (siyah değil, markaya çekik)
     --ik-zemin-yumusak  bölüm dönüşümü / görsel yüklenirken zemin
     --ik-r          kart köşesi (föy 2px, güven 24px)
     --ik-egri, --ik-hizli / --ik-orta / --ik-yavas, --ik-golge-1/2/3, --ik-isik (görsel üstü ışık gücü, 0–1)
   ═════════════════════════════════════════════════════════════════════════ */
:root {
    --ik-vurgu: var(--vurgu, #1f5fbf);
    --ik-murekkep: 15 28 41;
    --ik-zemin-yumusak: #f5f7f9;
    --ik-r: 14px;
    --ik-egri: cubic-bezier(.2, .8, .3, 1);
    --ik-hizli: .15s;
    --ik-orta: .25s;
    --ik-yavas: .6s;
    --ik-isik: .16;
    --ik-golge-1: 0 1px 2px rgb(var(--ik-murekkep) / .06), 0 4px 16px rgb(var(--ik-murekkep) / .06);
    --ik-golge-2: 0 1px 2px rgb(var(--ik-murekkep) / .06), 0 12px 38px rgb(var(--ik-murekkep) / .09);
    --ik-golge-3: 0 2px 4px rgb(var(--ik-murekkep) / .08), 0 24px 54px rgb(var(--ik-murekkep) / .18);
}
@supports (background: color-mix(in oklab, red 3%, white)) {
    :root { --ik-zemin-yumusak: color-mix(in oklab, var(--ik-vurgu) 3%, #fff); }
}

/* ── İK-1 Görsel ışığı: efekt görselin ÜSTÜNE biner (opak görsel kuralı), arka plana konmaz ── */
.ik-foto { position: relative; overflow: hidden; border-radius: inherit; isolation: isolate; }
.ik-foto::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: radial-gradient(125% 78% at 50% 4%, rgb(255 255 255 / var(--ik-isik)), transparent 58%);
    box-shadow: inset 0 -28px 28px -28px rgb(var(--ik-murekkep) / .22);
    transition: box-shadow var(--ik-orta) ease;
}
.ik-foto--acik { --ik-isik: .55; }
.ik-foto img, .ik-foto video { transition: transform var(--ik-yavas) ease; }
.ik-kart:hover .ik-foto::after, .ik-kart.ik-hover .ik-foto::after { box-shadow: inset 0 -34px 30px -30px rgb(var(--ik-murekkep) / .32); }
.ik-kart:hover .ik-foto img, .ik-kart.ik-hover .ik-foto img { transform: scale(1.045); }

/* ── İK-2 Kart hover: kart yerinde durur; halka + derin gölge + ok rozeti ── */
.ik-kart { position: relative; border-radius: var(--ik-r); box-shadow: var(--ik-golge-1); transition: box-shadow var(--ik-orta) ease; }
.ik-kart:hover, .ik-kart:focus-within, .ik-kart.ik-hover { box-shadow: 0 0 0 1.5px var(--ik-vurgu), var(--ik-golge-2); }
/* Ok rozeti adı .ik-rozet: temaların kendi ok SİMGESİ sınıfı (.ik-ok, hafriyat ailesi) ile çakışmasın (birleşim 2026-09-28).
   Dekoratiftir: kartı kaplayan bağlantının tıklamasını yutmaz (pointer-events: none). */
.ik-rozet {
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; inline-size: 34px; block-size: 34px; border-radius: 999px;
    display: grid; place-items: center; background: var(--ik-vurgu); color: var(--vurgu-uzeri, #fff); pointer-events: none;
    opacity: 0; transform: translateY(-6px) scale(.9);
    transition: opacity var(--ik-orta) ease, transform var(--ik-orta) var(--ik-egri);
}
.ik-rozet svg { inline-size: 16px; block-size: 16px; }
.ik-kart:hover .ik-rozet, .ik-kart:focus-within .ik-rozet, .ik-kart.ik-hover .ik-rozet { opacity: 1; transform: none; }
[dir="rtl"] .ik-rozet svg { transform: scaleX(-1); }
@media (hover: none) { .ik-rozet { opacity: 1; transform: none; } }

/* ── İK-3 Foto karo perdesi: yazı fotoğrafın üstündeyse ── */
.ik-perde { position: relative; overflow: hidden; }
.ik-perde::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgb(var(--ik-murekkep) / .94) 0%, rgb(var(--ik-murekkep) / .78) 20%,
        rgb(var(--ik-murekkep) / .44) 42%, rgb(var(--ik-murekkep) / .12) 66%, transparent 88%);
}
/* Gizli öğe display:flex olmalı: inline-flex satır kutusu üretir, opacity:0 yer tutar (EMA'daki 61 px boşluk) */
.ik-perde .ik-gizli {
    display: flex; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .32s var(--ik-egri), opacity .3s ease, margin-top .32s ease;
}
.ik-perde:hover .ik-gizli, .ik-perde:focus-within .ik-gizli { max-height: 3em; opacity: 1; margin-top: 12px; }
@media (hover: none) { .ik-perde .ik-gizli { max-height: 3em; opacity: 1; margin-top: 12px; } }

/* ── İK-4 Bölüm üstü marka çizgisi: etiket satırı ── */
.ik-ust { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ik-vurgu); }
.ik-ust::before { content: ""; inline-size: 34px; block-size: 2px; border-radius: 2px; flex: none; background: linear-gradient(90deg, transparent, var(--ik-vurgu)); }
[dir="rtl"] .ik-ust::before { background: linear-gradient(270deg, transparent, var(--ik-vurgu)); }
.ik-ust--orta::after { content: ""; inline-size: 34px; block-size: 2px; border-radius: 2px; flex: none; background: linear-gradient(90deg, var(--ik-vurgu), transparent); }
[dir="rtl"] .ik-ust--orta::after { background: linear-gradient(270deg, var(--ik-vurgu), transparent); }

/* ── İK-5 Açılış ilerleme çizgisi: temanın MEVCUT slayt düğmesi / sekmesi / noktası (yeni şerit kurulmaz).
      Süre --ik-sure (varsayılan 6 sn; iscilik.js video slaytında kalan süreye eşitler). Kök .durdu → durur. ── */
[data-ik-ilerleme] { position: relative; }
[data-ik-ilerleme]::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; block-size: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
[dir="rtl"] [data-ik-ilerleme]::after { transform-origin: 100% 50%; }
[data-ik-ilerleme][aria-current="true"]::after, [data-ik-ilerleme][aria-selected="true"]::after,
[data-ik-ilerleme].etkin::after, [data-ik-ilerleme].aktif::after { animation: ikIlerle var(--ik-sure, 6s) linear forwards; }
.durdu [data-ik-ilerleme]::after, .duraklatildi [data-ik-ilerleme]::after { animation-play-state: paused; }
@keyframes ikIlerle { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    [data-ik-ilerleme][aria-current="true"]::after, [data-ik-ilerleme][aria-selected="true"]::after,
    [data-ik-ilerleme].etkin::after, [data-ik-ilerleme].aktif::after { animation: none; transform: scaleX(1); }
}

/* ── İK-6 Cam şerit: yalnız temanın zaten video üstünde duran paneli / listesi / denetimi ── */
.ik-cam {
    background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.ik-cam--koyu { background: rgb(4 14 24 / .42); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ik-cam { background: rgb(4 14 24 / .62); } }

/* ── İK-7 Manşet perdesi ve vinyet: video görünür kalır (sis / beyaz perde yok) ── */
.ik-vinyet { position: relative; }
.ik-vinyet::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgb(4 14 24 / .72) 0%, rgb(4 14 24 / .28) 34%, transparent 66%),
        radial-gradient(130% 100% at 50% 42%, transparent 42%, rgb(4 14 24 / .38) 100%);
}

/* ── İK-8 Sayaç bandı: rakam ölçeği, hücre ayraçları, üstte ortası parlayan çizgi. Veri yoksa bant hiç basılmaz. ── */
.ik-sayac b, .ik-sayac .ik-rakam { font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ik-sayac > * + * { position: relative; }
.ik-sayac > * + *::before { content: ""; position: absolute; inset-inline-start: 0; top: 12%; bottom: 12%; inline-size: 1px; background: var(--ik-ayrac, rgb(255 255 255 / .18)); }
.ik-bant { position: relative; }
.ik-bant::after { content: ""; position: absolute; top: 0; inset-inline: 0; block-size: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .28) 50%, transparent); }

/* ── İK-9 Kaydırmada belirme: yalnız hareket tercihi olan ziyaretçide ve betik çalışınca (içerik hiç saklı kalmaz).
      Belirme geçişi yalnız belirme süresince geçerli: iscilik.js belirme bitince .ik-bitti ekler (ve kademe gecikmesini
      siler) → öğenin kendi geçişleri (ör. kartın hover halkası / gölgesi) yeniden devrededir, gecikmesiz. ── */
@media (prefers-reduced-motion: no-preference) {
    html.ik-js [data-ik-rv]:not(.ik-in) { opacity: 0; transform: translateY(22px); }
    html.ik-js [data-ik-rv="kay"]:not(.ik-in) { opacity: 1; }
    html.ik-js [data-ik-rv]:not(.ik-bitti) { transition: opacity var(--ik-yavas) ease, transform var(--ik-yavas) var(--ik-egri); }
}

/* ── İK-10 Düğme mikro hareketi ── */
.ik-dugme { transition: transform var(--ik-hizli) ease, box-shadow var(--ik-orta) ease, background-color var(--ik-hizli) ease; }
.ik-dugme:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgb(var(--ik-murekkep) / .45); }
.ik-dugme .ok, .ik-bag .ok { transition: transform var(--ik-orta) var(--ik-egri); }
.ik-dugme:hover .ok, .ik-bag:hover .ok { transform: translateX(5px); }
[dir="rtl"] .ik-dugme .ok, [dir="rtl"] .ik-bag .ok { transform: scaleX(-1); }
[dir="rtl"] .ik-dugme:hover .ok, [dir="rtl"] .ik-bag:hover .ok { transform: translateX(-5px) scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .ik-dugme:hover { transform: none; } }

/* ── İK-11 Görsel yükleme geçişi: yüklenene kadar yumuşak zemin, sonra .4s belirir (complete olan hemen görünür) ── */
.ik-foto[data-ik-yukle] { background: var(--ik-zemin-yumusak); }
html.ik-js .ik-foto[data-ik-yukle] img { opacity: 0; transition: opacity .4s ease, transform var(--ik-yavas) ease; }
html.ik-js .ik-foto[data-ik-yukle].ik-yuklendi img { opacity: 1; }

/* ── İK-12 Alt bilgi zenginliği ── */
.ik-alt { position: relative; }
.ik-alt::before { content: ""; position: absolute; top: 0; inset-inline: 0; block-size: 2px; pointer-events: none; background: linear-gradient(90deg, var(--ik-vurgu), transparent 70%); }
[dir="rtl"] .ik-alt::before { background: linear-gradient(270deg, var(--ik-vurgu), transparent 70%); }
/* Sosyal bağlantı: simgeliyse 36 px karo, metinse (çekirdek sosyal ağları adıyla basar) aynı yükseklikte hap */
.ik-alt .ik-sosyal a { min-inline-size: 36px; block-size: 36px; padding-inline: .8rem; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: .8125rem; font-weight: 600; text-decoration: none; background: rgb(255 255 255 / .09); transition: background var(--ik-hizli) ease, color var(--ik-hizli) ease; }
.ik-alt .ik-sosyal a:has(> svg:only-child) { inline-size: 36px; padding-inline: 0; border-radius: 9px; }
.ik-alt .ik-sosyal a:hover, .ik-alt .ik-sosyal a:focus-visible { background: var(--ik-vurgu); color: var(--vurgu-uzeri, #fff); }

/* ── İK-13 Koyu bant dokusu (2. tur): EMA'nın koyu bandındaki ince çapraz çizgi deseni (%5) + üstten merkezi ışık.
      Bandın İLK çocuğu olarak <span class="ik-doku" aria-hidden="true"></span> basılır (temanın ::before / ::after süsleri
      ve arka plan yığını korunur); bant .ik-dokulu alır. Renk ayarı: --ik-doku (çizgi saydamlığı), --ik-doku-isik,
      --ik-doku-renk (RGB üçlüsü; açık zeminli bantta koyu çizgi için). ── */
.ik-dokulu { position: relative; isolation: isolate; }
.ik-doku {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(58% 70% at 50% -12%, rgb(255 255 255 / var(--ik-doku-isik, .13)), transparent 70%),
        repeating-linear-gradient(135deg, rgb(var(--ik-doku-renk, 255 255 255) / var(--ik-doku, .05)) 0 1px, transparent 1px 12px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 100%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 100%);
}
.ik-dokulu > :not(.ik-doku) { position: relative; z-index: 1; }

/* ── İK-14 Görsel tonu (2. tur): temsili / düz renkli görsellerde EMA'nın video ayarındaki hafif doygunluk + kontrast
      (saturate 1.05, contrast 1.08). Görsele değil kabına verilir: .ik-ton img / video. ── */
.ik-ton img, .ik-ton video, img.ik-ton { filter: saturate(1.05) contrast(1.08); }

/* ═══ TemelKod imzası (alt bilgide, telif satırının altında; renk alt bilginin renginden gelir) ═══
   Saydamlık YOK (opacity .78 koyu alt bilgide kontrastı 3,7:1'e düşürüyordu — AA 4,5:1): renk temanın alt bilgi ikincil metin
   renginden, gerekirse tema ezer. Başta TemelKod işareti (currentColor, 1.15em) — satır "bırakılmış imza" gibi okunur. */
.tk-imza { display: flex; align-items: center; gap: .55em; margin: .35rem 0 0; font-size: .8125rem; line-height: 1.5; flex-basis: 100%; }
.tk-imza-isaret { flex: none; inline-size: 1.2em; block-size: 1.2em; fill: currentColor; }
.tk-imza a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.tk-imza a:hover, .tk-imza a:focus-visible { border-bottom-width: 2px; }
.tk-imza-kap { padding-block: 0 1rem; }

/* ═══ Şerit: tema demosu (herkese) / yayına alınmamış site (yalnız sahibine). Temanın başlık çubuğunu itmez:
       köşede yüzen, küçük bir not. Telefonda temaların alt eylem çubuğunun üstünde durur. ═══ */
.tk-serit {
    position: fixed; z-index: 2147483000; inset-inline-start: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    inline-size: fit-content; max-inline-size: min(620px, calc(100vw - 24px)); padding: .6rem .9rem; border-radius: 12px;
    font: 500 .8125rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: normal; text-transform: none;
    color: #fff; background: rgb(12 18 26 / .92); box-shadow: 0 2px 4px rgb(0 0 0 / .12), 0 18px 40px rgb(0 0 0 / .28);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tk-serit p { margin: 0; }
.tk-serit a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.tk-serit--sahip { background: rgb(120 72 0 / .95); }
/* Duyuru şeridi (panel standardı): sağ alt köşede, vurgu renkli kenar — demo rozetiyle çakışmaz */
.tk-serit--duyuru { inset-inline-start: auto; inset-inline-end: 12px; border-inline-start: 4px solid var(--vurgu, #f59e0b); }
.tk-serit--duyuru a { white-space: normal; }
/* Telefonda temanın alt sabit çubuğunun üstünde (yükseklik iscilik.js'te ölçülür: --tk-alt-cubuk; ölçülmeden önce eski 84 px) +
   güvenli alan; duyuru, sol alttaki demo rozetiyle aynı anda varsa onun üstüne çıkar (--tk-rozet-ust) */
@media (max-width: 900px) {
    .tk-serit { bottom: max(calc(var(--tk-alt-cubuk, 72px) + 10px), calc(12px + env(safe-area-inset-bottom, 0px))); }
    .tk-serit--duyuru { bottom: max(calc(var(--tk-alt-cubuk, 72px) + 10px), calc(12px + env(safe-area-inset-bottom, 0px)), var(--tk-rozet-ust, 0px)); }
}
@media print { .tk-serit { display: none; } }

/* ═══ Demo sitede form notu (_FormGizli) ═══ */
.tk-demo-form { margin: 0 0 .9rem; padding: .55rem .8rem; border-radius: 8px; font-size: .875rem; line-height: 1.45;
    background: #fff6e0; color: #6b4a00; border: 1px solid #f1dca5; }
.tk-serit { display: flex; align-items: flex-start; gap: .6rem; }
.tk-serit-kapat { flex: none; margin: -.2rem -.35rem 0 0; inline-size: 28px; block-size: 28px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgb(255 255 255 / .12); color: #fff; font: 600 .8rem/1 system-ui, sans-serif; }
.tk-serit-kapat:hover, .tk-serit-kapat:focus-visible { background: rgb(255 255 255 / .24); }
.tk-serit[hidden] { display: none; }
/* ═══ Demo rozeti "Örnek site" (mobil düzeltme 2026-10-04) — _Cekirdek/_TemelKodSerit: <tk-ornek-rozet> + gölge DOM.
   İçerik (hap, açıklama, kapat) gölge DOM'da kendi <style>'ıyla: tema CSS'i SIZAMAZ (eski hata: makine-isik / makine-pafta'da
   temanın .tk-serit alt boşluğu çekirdeğin üst konumuyla birleşip ekran boyu dikey hap oluyordu). Burada yalnız konum, hepsi
   !important (temanın genel kuralları da ezemez). Her temada aynı küçük boyut.
     · Masaüstü: sol alt 12 px; tema açılışındaki bir öğeyi örtüyorsa --tk-rozet-alt ile yükseltir (ör. ana sayfa cam şeridi).
     · Telefonda tema --tk-rozet-alt-mobil verebilir (yoksa --tk-rozet-alt); alt sabit çubuk varsa rozet her durumda onun üstünde.
     · Telefon (≤ 900 px): sol alt, temanın alt sabit çubuğunun ÜSTÜ (iscilik.js --tk-alt-cubuk ölçer) + güvenli alan; açılış ekranında
       düğme / sekme / yazı örtüyorsa sol kenarda, alt çeyrekte ilk boş yere kalkar (--tk-rozet-kaldir; boş yer yoksa açılışta görünmez, ekranın üçte
       biri kaydırılınca belirir — html.tk-rozet-bekle), kaydırınca çubuğun üstüne döner. Açılış
       hareketi bitince (yeri kesinleşince — html.tk-rozet-yerinde) belirir.
     · Menü / çekmece açıkken (ya da sayfa kaydırması kilitliyken — html.tk-kilitli), sayfa sonunda (html.tk-sonda: alt bilginin son
       satırlarını örtmesin) ve telefonda form alanı odaktayken (html.tk-yaziyor) gizli; kapatılınca oturum boyunca yok. ═══ */
tk-ornek-rozet {
    position: fixed !important; z-index: 2147483000 !important; display: block !important;
    inset-inline-start: 12px !important; inset-inline-end: auto !important; top: auto !important;
    bottom: calc(var(--tk-rozet-alt, 12px) + env(safe-area-inset-bottom, 0px)) !important;
    inline-size: auto !important; block-size: auto !important; min-inline-size: 0 !important; min-block-size: 0 !important;
    max-inline-size: none !important; max-block-size: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important; transform: none !important; filter: none !important; clip-path: none !important;
    opacity: 1 !important; float: none !important; visibility: visible !important; pointer-events: auto !important;
}
tk-ornek-rozet[hidden] { display: none !important; }
@media (max-width: 900px) {
    tk-ornek-rozet { bottom: calc(max(calc(var(--tk-alt-cubuk, 72px) + 10px), calc(var(--tk-rozet-alt-mobil, var(--tk-rozet-alt, 12px)) + env(safe-area-inset-bottom, 0px))) + var(--tk-rozet-kaldir, 0px)) !important;
        transition: opacity .3s ease, visibility .3s, bottom .25s ease !important; }
    html:is(.ik-js, .tk-rozet-js):not(.tk-rozet-yerinde) tk-ornek-rozet, html:is(.tk-rozet-bekle, .tk-sonda, .tk-yaziyor) tk-ornek-rozet { opacity: 0 !important; visibility: hidden !important; }
}
:is(html.menu-acik, html.cekmece-acik, html.tk-kilitli, html:has(.menu-acik, .cekmece-acik, body.kilit)) tk-ornek-rozet { visibility: hidden !important; }
@media print { tk-ornek-rozet { display: none !important; } }

/* ═══ Açılış güvenliği (mobil düzeltme 2026-10-04; _Cekirdek/_AcilisGuvenligi + _ortak/acilis.js) — hareket azaltma tercihinde
   giriş / belirme hareketi yok: içerik ilk karede son hâlinde (temanın kendi azaltma kuralına ek; tema kimliği değişmez). ═══ */
@media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after { animation-delay: 0s !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-delay: 0s !important; transition-duration: .001ms !important; }
}

/* ═══ Yüzen düğmeler: paylaş + sosyal hesaplar (2026-09-29 — _Cekirdek/_YuzenDugmeler, _ortak/yuzen.js) ═══
   Masaüstünde kenara yapışık küçük sekmeler (dikey orta): paylaş bir kenarda, sosyal öteki kenarda (panelden yer değişir).
   Telefonda iki yuvarlak düğme altta; temanın telefon eylem çubuğu varsa üstünde durur, çubukta WhatsApp varsa tekrarlanmaz.
   Renk temanın vurgu değişkeninden (panelde seçilen ana renkle değişir; bilinmiyorsa nötr). Sabit konumlu: yerleşim kaymaz (CLS yok). */
.yd { --yd-renk: var(--marka-metin, var(--vurgu-metin, var(--vurgu, #1f2a30)));
  --yd-zemin: #fff; --yd-yazi: #1f2a30; --yd-cizgi: rgba(16, 24, 27, .12); --yd-alt: 18px;
  --yd-golge: 0 12px 28px -14px rgba(16, 24, 27, .38), 0 2px 6px rgba(16, 24, 27, .08);
  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--yd-yazi); }
.yd[hidden] { display: none !important; }
.yd .gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.yd-ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yd-dugme, .yd-ag { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--yd-cizgi);
  background: var(--yd-zemin); color: var(--yd-yazi); cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s; }
.yd-dugme:hover, .yd-ag:hover { color: var(--yd-renk); background: color-mix(in srgb, var(--yd-renk) 9%, #fff); }
.yd-dugme:focus-visible, .yd-ag:focus-visible, .yd-panel a:focus-visible, .yd-panel button:focus-visible {
  outline: 3px solid var(--yd-renk); outline-offset: 2px; }
.yd-paylas, .yd-sosyal { position: fixed; z-index: 70; top: 50%; transform: translateY(-50%); }
.yd-paylas { inset-inline-start: 0; }
.yd-sosyal { inset-inline-end: 0; }
.yd-ters .yd-paylas { inset-inline-start: auto; inset-inline-end: 0; }
.yd-ters .yd-sosyal { inset-inline-end: auto; inset-inline-start: 0; }
.yd-paylas-ac { border-inline-start: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; box-shadow: var(--yd-golge); color: var(--yd-renk); }
.yd-ters .yd-paylas-ac { border-inline-start: 1px solid var(--yd-cizgi); border-inline-end: 0; border-radius: 0;
  border-start-start-radius: 12px; border-end-start-radius: 12px; }
.yd-sosyal-ac { display: none; }
.yd-sosyal-liste { display: grid; gap: 2px; margin: 0; padding: 5px; list-style: none; background: var(--yd-zemin);
  border: 1px solid var(--yd-cizgi); border-inline-end: 0; border-start-start-radius: 14px; border-end-start-radius: 14px; box-shadow: var(--yd-golge); }
.yd-ters .yd-sosyal-liste { border-inline-end: 1px solid var(--yd-cizgi); border-inline-start: 0; border-radius: 0;
  border-start-end-radius: 14px; border-end-end-radius: 14px; }
.yd-sosyal-liste .yd-ag { width: 38px; height: 38px; border: 0; border-radius: 10px; }
.yd-panel { position: absolute; top: 50%; inset-inline-start: calc(100% + 10px); transform: translateY(-50%); min-width: 224px; padding: 10px;
  background: #fff; border: 1px solid var(--yd-cizgi); border-radius: 14px; box-shadow: var(--yd-golge); }
.yd-ters .yd-panel { inset-inline-start: auto; inset-inline-end: calc(100% + 10px); }
.yd-panel[hidden] { display: none; }
.yd-panel-bas { margin: 4px 8px 8px; font-size: 12.5px; font-weight: 700; color: #5e6d73; }
.yd-panel ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.yd-panel a, .yd-panel button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--yd-yazi); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.yd-panel a:hover, .yd-panel button:hover { background: color-mix(in srgb, var(--yd-renk) 9%, #fff); color: var(--yd-renk); }
.yd-panel .yd-ik { color: var(--yd-renk); }
.yd-durum { margin: 6px 8px 2px; font-size: 12.5px; color: #1d6b3a; }
.yd-durum:empty { display: none; }
/* Masaüstü (2026-10-05 — kapak denetimi: sekme başlık paragrafının ilk harfini örtüyordu): sekme sayfanın metnini ya da küçük bir
   denetimini örtüyorsa yuzen.js kutuya .yd-cekil koyar → düğme / liste kenara kayar, 12 px'lik kulp kalır (iç kenarında temanın vurgu
   renginde 3 px çizgi). Üstüne gelince, klavye odağında ve paylaş paneli açıkken tam çıkar. Kutunun boş alanı tıklamayı ve imleci
   yutmaz (yalnız görünen parça etkileşir). */
@media (min-width: 761px) {
  .yd-paylas, .yd-sosyal { pointer-events: none; }
  .yd-paylas > *, .yd-sosyal > * { pointer-events: auto; }
  .yd-hazir .yd-paylas-ac, .yd-hazir .yd-sosyal-liste { transition: translate .3s cubic-bezier(.2, .7, .2, 1), background .2s, color .2s, border-color .2s; }
  .yd-cekil .yd-paylas-ac:not([aria-expanded="true"]):not(:hover):not(:focus-visible),
  .yd-cekil .yd-sosyal-liste:not(:hover):not(:focus-within) {
    translate: calc(var(--yd-yon, -1) * (100% - 12px)) 0; box-shadow: var(--yd-golge), inset calc(var(--yd-yon, -1) * 3px) 0 0 var(--yd-renk); }
}
@media (max-width: 760px) {
  /* Telefonda alt köşelerde: temanın alt sabit çubuğunun üstü (iscilik.js --tk-alt-cubuk; betiksiz :has yedeği --yd-alt) + güvenli
     alan; demo rozeti sol altta (satır başı kenarı) olduğundan o kenardaki düğme rozetin üstüne çıkar (--tk-rozet-ust). Sayfa sonunda
     (html.tk-sonda — alt bilginin son satırlarını örtmesin) ve form alanı odaktayken (html.tk-yaziyor) gizli. */
  .yd-paylas, .yd-sosyal { top: auto; transform: none;
    bottom: max(calc(var(--tk-alt-cubuk, 0px) + 12px), calc(var(--yd-alt) + env(safe-area-inset-bottom, 0px))); }
  .yd:not(.yd-ters) .yd-paylas, .yd-ters .yd-sosyal {
    bottom: max(calc(var(--tk-alt-cubuk, 0px) + 12px), calc(var(--yd-alt) + env(safe-area-inset-bottom, 0px)), var(--tk-rozet-ust, 0px)); }
  html:is(.tk-sonda, .tk-yaziyor) :is(.yd-paylas, .yd-sosyal) { opacity: 0; visibility: hidden; transform: translateY(10px); }
  .yd-paylas { inset-inline-start: 12px; }
  .yd-sosyal { inset-inline-end: 12px; }
  .yd-ters .yd-paylas { inset-inline-start: auto; inset-inline-end: 12px; }
  .yd-ters .yd-sosyal { inset-inline-end: auto; inset-inline-start: 12px; }
  .yd-paylas-ac, .yd-ters .yd-paylas-ac, .yd-sosyal-ac { display: grid; border: 1px solid var(--yd-cizgi); border-radius: 50%; box-shadow: var(--yd-golge); }
  .yd-sosyal-liste, .yd-ters .yd-sosyal-liste { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; display: none;
    border: 1px solid var(--yd-cizgi); border-radius: 14px; }
  .yd-ters .yd-sosyal-liste { inset-inline-end: auto; inset-inline-start: 0; }
  .yd-sosyal-liste.acik { display: grid; }
  .yd-ik-kapat, .yd-sosyal-acik .yd-ik-ac { display: none; }
  .yd-sosyal-acik .yd-ik-kapat { display: block; }
  .yd-panel, .yd-ters .yd-panel { top: auto; bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: auto; transform: none; }
  .yd-ters .yd-panel { inset-inline-start: auto; inset-inline-end: 0; }
  .yd-paylas, .yd-sosyal { transition: opacity .25s, transform .25s, visibility .25s; }
  .yd-bekle .yd-paylas, .yd-bekle .yd-sosyal { opacity: 0; visibility: hidden; transform: translateY(10px); }
  /* Temanın telefon eylem çubuğu varsa üstünde durur; çubukta WhatsApp varsa burada tekrarlanmaz (yalnız WhatsApp kalıyorsa düğme de yok) */
  body:has(:is(.mobil-cubuk, .alt-cubuk, .tel-cubuk, .alt-eylem)) .yd { --yd-alt: 88px; }
  body:has(:is(.mobil-cubuk, .alt-cubuk, .tel-cubuk, .alt-eylem) a[href*="wa.me"]) .yd-wa-oge { display: none; }
  body:has(:is(.mobil-cubuk, .alt-cubuk, .tel-cubuk, .alt-eylem) a[href*="wa.me"]) .yd-sosyal:not(:has(li:not(.yd-wa-oge))) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .yd-dugme, .yd-ag, .yd-paylas, .yd-sosyal, .yd-sosyal-liste { transition: none !important; } }
.az-hareket .yd-paylas, .az-hareket .yd-sosyal, .az-hareket .yd-dugme, .az-hareket .yd-sosyal-liste { transition: none !important; }
@media print { .yd { display: none !important; } }

/* ═══ Kaydırma kilidi (mobil düzeltme 2026-10-04): çekirdek (cekirdek.css) ve bazı temalar html'e overflow-x: clip verir; o zaman
   body'ye konan overflow: hidden görüntü alanına geçmez ve telefonda menü / çekmece açıkken arka sayfa kayar. Tema kilidi body'ye
   koyuyorsa (body.menu-acik / .kilit / .cekmece-acik) aynı kilit html'e de konur — yalnız telefon / tablet genişliğinde (masaüstünde
   kaydırma çubuğu kaybolup sayfa kaymasın; masaüstü davranışı değişmez). ═══ */
@media (max-width: 1200px) { html:has(> body:is(.menu-acik, .kilit, .cekmece-acik)) { overflow: hidden; } }

/* ═══ Dokunma alanı (mobil düzeltme 2026-10-04): dokunmatik ekranda küçük denetimler — iscilik.js dokunmaAlanlari() ve yol izi ═══ */
@media (pointer: coarse) {
    [data-tk-dokunma="kat"] { position: relative; }
    [data-tk-dokunma="kat"]::after { content: ""; position: absolute; inset: calc(-1 * var(--tk-dy, 0px)) calc(-1 * var(--tk-dx, 0px)); }
    /* yol izi (kırıntı): satır içi bağlantılara dikey iç boşluk — yerleşim değişmez, dokunma alanı ~44 px */
    nav.kirinti a { padding-block: 13px; margin-block: -13px; }
}