/* Can Öğretmenim — Defter 2.0 bileşen kitaplığı (v2, 06.10.2026).
   Token'lar YALNIZ ../ortak.css :root'tan gelir; bu dosyada sabit renk/px yazı/gölge/yarıçap yoktur (istisnalar yorumda).
   Önek: bk- (genel bileşen). Davranış: sinif/bilesen.js (window.BK). Canlı örnek: /bilesenler (noindex).
   Durumlar her bileşende: varsayılan · hover (yalnız @media (hover:hover)) · basılı · odak · seçili · devre dışı · yükleniyor.
   Chromium 80: flex gap YOK (grid-gap ya da margin), aspect-ratio YOK (padding-top oranı), :is/:where/:has YOK, inset YOK. */

/* ============================================================ 2.1 DÜĞME .bk-dugme (tek düğme ailesi, v2.1 20.10.2026) */
/* Türler: birincil (varsayılan, --eylem tükenmez mavi) · .bk-ikincil · .bk-hayalet · .bk-tehlike. Oyun çeşidi: .bk-oyun (aşağıda).
   5 durum: normal · üzerine gelme (YALNIZ @media (hover:hover): 2 px yükselir + gölge; dokunmatik tahtada kalkık kalmaz) · basılı (1 px iner)
   · odak (:focus halkası, Chromium 80 deseni) · devre dışı (disabled / aria-disabled + data-neden → title + açıklama satırı, BK.kur).
   Kapat / çık / vazgeç HER ZAMAN ikincil. Yeşil düğme yok (yeşil = doğru cevap tonu). */
.bk-dugme {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2);
  align-items: center; justify-content: center; justify-items: center;
  min-height: var(--dokun); min-width: var(--dokun); padding: var(--b-3) var(--b-5); margin: 0;
  border: 0; border-radius: var(--r-14);
  font-family: var(--govde); font-weight: 700; font-size: var(--y-18); line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none;
  background: var(--eylem); color: #fff; /* beyaz: tükenmez mavide 6.4:1 */
  box-shadow: var(--golge-1), inset 0 -2px 0 rgba(15,27,80,.22);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli) var(--yay), background-color var(--sure-orta) var(--yay), color var(--sure-orta) var(--yay), opacity var(--sure-orta) var(--yay);
}
.bk-dugme > .bk-simge { width: 24px; height: 24px; }
@media (hover: hover) {
  .bk-dugme:hover { background: var(--eylem-koyu); transform: translateY(-2px); box-shadow: var(--golge-2), inset 0 -2px 0 rgba(15,27,80,.22); }
}
/* basılı: 1 px iner, hafif küçülür, içe gölge (düğme "batar") */
.bk-dugme:active, .bk-dugme.bk-d-basili { transform: translateY(1px) scale(.98); background: var(--eylem-koyu); box-shadow: inset 0 2px 5px rgba(8,16,60,.45); transition-duration: 80ms; }
.bk-dugme:focus, .bk-dugme.bk-d-odak { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-dugme:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-dugme:focus { outline: none; }
.bk-dugme.bk-ikincil { background: var(--yuzey); color: var(--metin); box-shadow: inset 0 0 0 1.5px var(--cizgi), var(--golge-1); }
@media (hover: hover) { .bk-dugme.bk-ikincil:hover { background: var(--yuzey); box-shadow: inset 0 0 0 1.5px var(--kare-koyu), var(--golge-2); } }
.bk-dugme.bk-ikincil:active, .bk-dugme.bk-ikincil.bk-d-basili { background: var(--yuzey-3); box-shadow: inset 0 0 0 1.5px var(--kare-koyu), inset 0 2px 4px rgba(26,43,76,.18); }
.bk-dugme.bk-hayalet { background: transparent; color: var(--eylem); box-shadow: none; }
@media (hover: hover) { .bk-dugme.bk-hayalet:hover { background: var(--yuzey-2); box-shadow: none; transform: none; } }
.bk-dugme.bk-hayalet:active, .bk-dugme.bk-hayalet.bk-d-basili { background: var(--yuzey-3); box-shadow: inset 0 2px 4px rgba(26,43,76,.14); }
.bk-dugme.bk-tehlike { background: var(--hata); color: #fff; box-shadow: var(--golge-1), inset 0 -2px 0 rgba(90,20,5,.25); }
@media (hover: hover) { .bk-dugme.bk-tehlike:hover { background: #A63A21; box-shadow: var(--golge-2), inset 0 -2px 0 rgba(90,20,5,.25); } } /* --hata'nın %15 koyusu */
.bk-dugme.bk-tehlike:active, .bk-dugme.bk-tehlike.bk-d-basili { background: #A63A21; box-shadow: inset 0 2px 5px rgba(60,10,0,.45); }
/* eski ad: .bk-basari artık birincil (yeşil düğme yok, TASARIM.md §Renk) */
.bk-dugme.bk-basari { background: var(--eylem); color: #fff; }
/* vitrin (yalnız /bilesenler): üzerine gelme durumunu sabit gösterir */
.bk-dugme.bk-d-ustte { background: var(--eylem-koyu); transform: translateY(-2px); box-shadow: var(--golge-2), inset 0 -2px 0 rgba(15,27,80,.22); }
.bk-dugme.bk-ikincil.bk-d-ustte { background: var(--yuzey); box-shadow: inset 0 0 0 1.5px var(--kare-koyu), var(--golge-2); }
.bk-dugme.bk-hayalet.bk-d-ustte { background: var(--yuzey-2); box-shadow: none; transform: none; }
.bk-dugme.bk-tehlike.bk-d-ustte { background: #A63A21; }
/* boylar: 48 varsayılan (tahtada 56) · 64 lobi "Başla" · 88 okul öncesi / kumanda */
.bk-dugme.bk-64 { min-height: 64px; padding: var(--b-4) var(--b-6); font-size: var(--y-22); border-radius: var(--r-14); }
.bk-dugme.bk-64 > .bk-simge { width: 28px; height: 28px; }
.bk-dugme.bk-88 { min-height: var(--dokun-oo); padding: var(--b-4) var(--b-6); font-size: var(--y-28); font-family: var(--baslik); letter-spacing: var(--harf-baslik); border-radius: var(--r-20); }
.bk-dugme.bk-88 > .bk-simge { width: 40px; height: 40px; stroke-width: 2.25; }
.bk-dugme.bk-tam { display: grid; width: 100%; }
/* yalnız simge: kare, erişilebilir ad aria-label ile */
.bk-dugme.bk-ikon { padding: 0; width: var(--dokun); min-width: var(--dokun); }
.bk-dugme.bk-ikon.bk-64 { width: 64px; min-width: 64px; }
.bk-dugme.bk-ikon.bk-88 { width: var(--dokun-oo); min-width: var(--dokun-oo); }
/* devre dışı + neden satırı (.bk-neden): data-neden="…" verilirse BK.kur title + satırı kendisi ekler; devre dışı düğmeye dokununca neden bildirim olarak da söylenir */
.bk-dugme[disabled], .bk-dugme[aria-disabled="true"], .bk-dugme[disabled]:active, .bk-dugme[aria-disabled="true"]:active { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.bk-dugme[aria-disabled="true"]:active { background: var(--eylem); } .bk-dugme.bk-ikincil[aria-disabled="true"]:active { background: var(--yuzey); } .bk-dugme.bk-hayalet[aria-disabled="true"]:active { background: transparent; }
@media (hover: hover) { .bk-dugme[disabled]:hover, .bk-dugme[aria-disabled="true"]:hover { transform: none; box-shadow: none; background: var(--eylem); } .bk-dugme.bk-ikincil[disabled]:hover, .bk-dugme.bk-ikincil[aria-disabled="true"]:hover { background: var(--yuzey); box-shadow: inset 0 0 0 1.5px var(--cizgi); } }
.bk-neden-kap { display: inline-grid; grid-template-columns: minmax(0, auto); justify-items: start; vertical-align: top; max-width: 100%; }
.bk-neden { display: block; margin-top: var(--b-2); font-size: var(--y-16); line-height: var(--sy-16); color: var(--metin-2); max-width: 36ch; }
.bk-neden-kap > .bk-dugme:not([disabled]):not([aria-disabled="true"]) + .bk-neden { display: none; }
/* yükleniyor: metin yerinde kalır (genişlik zıplamaz), üstünde dönen halka */
.bk-dugme[aria-busy="true"] { color: transparent; pointer-events: none; }
.bk-dugme[aria-busy="true"] > * { visibility: hidden; }
.bk-dugme[aria-busy="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: bkDon .7s linear infinite; }
.bk-dugme.bk-ikincil[aria-busy="true"]::after, .bk-dugme.bk-hayalet[aria-busy="true"]::after { border-color: var(--yuzey-3); border-top-color: var(--eylem); }
/* düğme dizisi: sağda birincil, solda vazgeç (margin ile, flex gap yok) */
.bk-dugmeler { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: calc(var(--b-2) * -.5); }
.bk-dugmeler > * { margin: calc(var(--b-2) * .5); }
.bk-dugmeler.bk-sola { justify-content: flex-start; }

/* ============================================================ 2.1b OYUN DÜĞMESİ .bk-oyun (oyun kabuğu: Oyna, Devam et, Tekrar oyna, Kontrol et) */
/* Kalın alt kenar (--oyun-kenar 6 px) basınca 80 ms'de çöker: dokunan çocuk düğmenin "battığını" görür. Renk yine --eylem.
   Kullanım: <button class="bk-dugme bk-oyun">…</button>  · ikincil: .bk-oyun.bk-ikincil · büyük: .bk-oyun.bk-88 */
.bk-dugme.bk-oyun { min-height: 64px; padding: var(--b-3) var(--b-6); margin-bottom: var(--oyun-kenar); border-radius: var(--r-20);
  font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); letter-spacing: var(--harf-baslik);
  box-shadow: 0 var(--oyun-kenar) 0 var(--eylem-koyu), 0 calc(var(--oyun-kenar) + 4px) 14px -6px rgba(26,43,76,.45), inset 0 2px 0 rgba(255,255,255,.18);
  transition: transform 80ms var(--yay), box-shadow 80ms var(--yay), background-color var(--sure-orta) var(--yay); }
.bk-dugme.bk-oyun > .bk-simge { width: 28px; height: 28px; stroke-width: 2.25; }
@media (hover: hover) {
  .bk-dugme.bk-oyun:hover { background: var(--eylem); transform: translateY(-2px);
    box-shadow: 0 calc(var(--oyun-kenar) + 2px) 0 var(--eylem-koyu), 0 calc(var(--oyun-kenar) + 8px) 18px -6px rgba(26,43,76,.45), inset 0 2px 0 rgba(255,255,255,.18); }
}
.bk-dugme.bk-oyun:active, .bk-dugme.bk-oyun.bk-d-basili { transform: translateY(var(--oyun-kenar)); box-shadow: 0 0 0 var(--eylem-koyu), 0 2px 4px -2px rgba(26,43,76,.4), inset 0 2px 0 rgba(255,255,255,.12); }
.bk-dugme.bk-oyun.bk-d-ustte { background: var(--eylem); transform: translateY(-2px); box-shadow: 0 calc(var(--oyun-kenar) + 2px) 0 var(--eylem-koyu), 0 calc(var(--oyun-kenar) + 8px) 18px -6px rgba(26,43,76,.45), inset 0 2px 0 rgba(255,255,255,.18); }
.bk-dugme.bk-oyun.bk-ikincil { background: var(--yuzey); color: var(--metin); box-shadow: 0 var(--oyun-kenar) 0 var(--kare-koyu), inset 0 0 0 2px var(--cizgi), 0 calc(var(--oyun-kenar) + 4px) 14px -8px rgba(26,43,76,.35); }
@media (hover: hover) { .bk-dugme.bk-oyun.bk-ikincil:hover { background: var(--yuzey); box-shadow: 0 calc(var(--oyun-kenar) + 2px) 0 var(--kare-koyu), inset 0 0 0 2px var(--kare-koyu), 0 calc(var(--oyun-kenar) + 8px) 18px -8px rgba(26,43,76,.35); } }
.bk-dugme.bk-oyun.bk-ikincil:active, .bk-dugme.bk-oyun.bk-ikincil.bk-d-basili { background: var(--yuzey-2); box-shadow: 0 0 0 var(--kare-koyu), inset 0 0 0 2px var(--kare-koyu); }
.bk-dugme.bk-oyun.bk-ikincil.bk-d-ustte { box-shadow: 0 calc(var(--oyun-kenar) + 2px) 0 var(--kare-koyu), inset 0 0 0 2px var(--kare-koyu), 0 calc(var(--oyun-kenar) + 8px) 18px -8px rgba(26,43,76,.35); }
.bk-dugme.bk-oyun.bk-88 { min-height: var(--dokun-oo); font-size: var(--y-28); border-radius: var(--r-20); }
.bk-dugme.bk-oyun.bk-88 > .bk-simge { width: 40px; height: 40px; }
.bk-dugme.bk-oyun[disabled], .bk-dugme.bk-oyun[aria-disabled="true"] { transform: translateY(var(--oyun-kenar)); box-shadow: none; }
.bk-dugme.bk-oyun:focus, .bk-dugme.bk-oyun.bk-d-odak { outline-offset: 3px; }

/* ============================================================ 2.2 ÇİP .bk-cip ve SEGMENT .bk-segment */
/* yapı: <label class="bk-cip"><input type="radio|checkbox" name=…><span>Metin <small>alt</small></span></label> */
.bk-cipler { display: flex; flex-wrap: wrap; margin: calc(var(--b-2) * -.5); }
.bk-cipler > * { margin: calc(var(--b-2) * .5); }
.bk-cipler.bk-kaydir { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-right: var(--b-5);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.bk-cipler.bk-kaydir > * { flex: none; scroll-snap-align: start; }
.bk-cip { position: relative; display: inline-block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk-cip > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bk-cip > span { display: inline-grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2); align-items: center;
  min-height: var(--dokun); padding: var(--b-2) var(--b-4); border-radius: var(--r-8);
  background: var(--yuzey); border: 1.5px solid var(--cizgi); color: var(--metin);
  font-weight: 700; font-size: var(--y-16); line-height: 1.2;
  transition: background-color var(--sure-hizli) var(--yay), border-color var(--sure-hizli) var(--yay), color var(--sure-hizli) var(--yay), transform var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli) var(--yay); }
.bk-cip > span > .bk-simge { width: 20px; height: 20px; }
.bk-cip small { display: block; font-weight: 400; font-size: var(--y-14); color: var(--metin-2); }
.bk-cip .bk-adet { display: inline-block; font-style: normal; min-width: 26px; padding: 0 var(--b-2); border-radius: var(--r-hap); background: var(--yuzey-2); color: var(--metin-2); font-size: var(--y-14); line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .bk-cip:hover > input:not(:checked):not(:disabled) + span { border-color: var(--kare-koyu); background: var(--yuzey-2); } }
.bk-cip:active > input:not(:disabled) + span { transform: translateY(1px) scale(.98); }
.bk-cip > input:checked + span { background: var(--secili-zemin); border-color: var(--secili-kenar); color: var(--secili-metin); box-shadow: inset 0 0 0 1px var(--secili-kenar); }
.bk-cip > input:checked + span small { color: var(--secili-metin); }
.bk-cip > input:checked + span .bk-adet { background: var(--yuzey); color: var(--secili-metin); }
.bk-cip > input:focus + span { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-cip > input:focus:not(:focus-visible) + span { outline: none; }
html.odak-isaretci .bk-cip > input:focus + span { outline: none; }
/* SEÇİLİ ≠ ODAK: seçili tek seçimli çipte sağda sabit yuvalı ✓ rozeti (yer hep ayrılır, yazı kaymaz/binmez) */
.bk-cip > input[type="radio"] + span::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--eylem) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  opacity: 0; transform: scale(.5); transition: opacity var(--sure-hizli) var(--yay), transform var(--sure-orta) var(--yay-geri); }
.bk-cip > input[type="radio"]:checked + span::after { opacity: 1; transform: none; }
.bk-cip > input:disabled + span { opacity: .45; cursor: not-allowed; }
/* onay kutusu çipi: solda kutu */
.bk-cip > input[type="checkbox"] + span::before { content: ""; width: 28px; height: 28px; border-radius: 7px; border: 2px solid var(--bos-cizgi); background: var(--yuzey);
  transition: background-color var(--sure-hizli) var(--yay), border-color var(--sure-hizli) var(--yay); }
.bk-cip > input[type="checkbox"]:checked + span::before { border-color: var(--birincil); background: var(--birincil)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
/* ders çipi: seçilince ders ayracı rengi solda 4 px şerit */
.bk-cip[data-ders] > input:checked + span { box-shadow: inset 4px 0 0 var(--ders-renk, var(--secili-kenar)), inset 0 0 0 1px var(--secili-kenar); }
/* okul öncesi çip: 88 px, simge 40 */
.bk-cip.bk-88 > span { min-height: var(--dokun-oo); padding: var(--b-3) var(--b-5); font-size: var(--y-22); border-radius: var(--r-14); }
.bk-cip.bk-88 > span > .bk-simge { width: 40px; height: 40px; }

/* segment: 2–4 eşit parça, tek kenarlık; seçili parça yüzey + gölge */
.bk-segment { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-gap: var(--b-1); gap: var(--b-1);
  padding: var(--b-1); border-radius: var(--r-14); background: var(--yuzey-2); border: 1.5px solid var(--cizgi); max-width: 100%; }
.bk-segment.bk-tam { display: grid; }
.bk-segment > label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk-segment > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bk-segment > label > span { display: grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2); align-items: center; justify-content: center;
  min-height: var(--dokun); padding: var(--b-2) var(--b-4); border-radius: 10px; /* iç yarıçap = 14 − 4 kenar boşluğu; dokunma ≥ 48 */
  font-weight: 700; font-size: var(--y-16); color: var(--metin-2); text-align: center; white-space: nowrap;
  transition: background-color var(--sure-orta) var(--yay), color var(--sure-orta) var(--yay), box-shadow var(--sure-orta) var(--yay), transform var(--sure-hizli) var(--yay); }
.bk-segment > label > span > .bk-simge { width: 20px; height: 20px; }
@media (hover: hover) { .bk-segment > label:hover > input:not(:checked) + span { color: var(--metin); background: rgba(255,255,255,.6); } }
.bk-segment > label:active > input + span { transform: scale(.98); }
.bk-segment > label > input:checked + span { background: var(--yuzey); color: var(--secili-metin); box-shadow: var(--golge-1), 0 0 0 1px var(--cizgi); }
.bk-segment > label > input:focus + span { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-segment > label > input:focus:not(:focus-visible) + span { outline: none; }
html.odak-isaretci .bk-segment > label > input:focus + span { outline: none; }
.bk-segment > label > input:disabled + span { opacity: .45; cursor: not-allowed; }
.bk-segment.bk-48 > label > span { min-height: var(--dokun); font-size: var(--y-18); }

/* ============================================================ 2.3 KART .bk-kart ve türleri */
.bk-kart { position: relative; display: block; background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: var(--r-20);
  padding: var(--b-5); box-shadow: var(--golge-1); color: var(--metin);
  transition: box-shadow var(--sure-orta) var(--yay), border-color var(--sure-orta) var(--yay); }
a.bk-kart, .bk-kart.bk-tikla { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { a.bk-kart:hover, .bk-kart.bk-tikla:hover { box-shadow: var(--golge-2); border-color: var(--kare-koyu); } }
a.bk-kart:active, .bk-kart.bk-tikla:active { box-shadow: var(--golge-1); }
a.bk-kart:focus, .bk-kart.bk-tikla:focus { outline: 3px solid var(--odak); outline-offset: 3px; }
a.bk-kart:focus:not(:focus-visible), .bk-kart.bk-tikla:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci a.bk-kart:focus, html.odak-isaretci .bk-kart.bk-tikla:focus { outline: none; }
.bk-kart.bk-secili, .bk-kart[aria-pressed="true"], .bk-kart[aria-checked="true"] { border-color: var(--secili-kenar); box-shadow: inset 0 0 0 1px var(--secili-kenar), var(--golge-2); }
/* seçili kart: sağ üstte sabit ✓ rozeti (odak halkasından ayrı) */
.bk-kart.bk-secili::after, .bk-kart[aria-pressed="true"]::after, .bk-kart[aria-checked="true"]::after { content: ""; position: absolute; top: var(--b-3); right: var(--b-3); z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; background: var(--eylem) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: 0 0 0 3px var(--yuzey); }
/* ders şeridi: kartın üstünde 4 px (ders rengi geniş yüzeye boyanmaz) */
.bk-kart[data-ders] { overflow: hidden; }
.bk-kart[data-ders]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ders-renk, var(--ders-diger)); z-index: 1; }
.bk-kart-baslik { margin: 0 0 var(--b-1); font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); line-height: var(--sy-22); letter-spacing: var(--harf-baslik); color: var(--metin); }
.bk-kart-metin { margin: 0; font-size: var(--y-16); line-height: var(--sy-16); color: var(--metin-2); }

/* ders → renk eşlemesi (tek yer). data-ders: mat | tr | hb | fen | ing | san | diger */
[data-ders="mat"] { --ders-renk: var(--ders-mat); --ders-zemin: var(--ders-mat-zemin); }
[data-ders="tr"] { --ders-renk: var(--ders-tr); --ders-zemin: var(--ders-tr-zemin); }
[data-ders="hb"] { --ders-renk: var(--ders-hb); --ders-zemin: var(--ders-hb-zemin); }
[data-ders="fen"] { --ders-renk: var(--ders-fen); --ders-zemin: var(--ders-fen-zemin); }
[data-ders="ing"] { --ders-renk: var(--ders-ing); --ders-zemin: var(--ders-ing-zemin); }
[data-ders="san"] { --ders-renk: var(--ders-san); --ders-zemin: var(--ders-san-zemin); }
[data-ders="diger"] { --ders-renk: var(--ders-diger); --ders-zemin: var(--ders-diger-zemin); }

/* görsel oranları (aspect-ratio yerine padding-top) */
.bk-oran { position: relative; display: block; width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; background: var(--ders-zemin, var(--yuzey-2)); }
.bk-oran.bk-16x10 { padding-top: 62.5%; }
.bk-oran.bk-1x1 { padding-top: 100%; }
.bk-oran.bk-4x3 { padding-top: 75%; }
.bk-oran > img, .bk-oran > canvas, .bk-oran > video, .bk-oran > .bk-oran-ic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* kırık görsel yedeği (BK.kirikGorsel): ders açık zemini + baş harfler */
.bk-oran > .bk-yedek { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--ders-zemin, var(--yuzey-2)); color: var(--ders-renk, var(--metin-3)); /* 48 px: --metin-3 kuralı içinde */ font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); letter-spacing: var(--harf-gosterim); }

/* kapı kartı .bk-kapi: tüm kart tek bağlantı; görsel 16:9; başlık 22/800; tek satır vaat */
.bk-kapi { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.bk-kapi > .bk-oran { border-radius: 0; }
.bk-kapi > .bk-oran > img { transition: transform var(--sure-yavas) var(--yay); }
@media (hover: hover) { .bk-kapi:hover > .bk-oran > img { transform: scale(1.03); } }
.bk-kapi-govde { padding: var(--b-4) var(--b-5) var(--b-5); display: grid; grid-template-columns: 1fr auto; grid-gap: var(--b-1) var(--b-3); gap: var(--b-1) var(--b-3); align-items: center; }
.bk-kapi-govde .bk-kart-baslik { grid-column: 1; margin: 0; }
.bk-kapi-govde .bk-kart-metin { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-kapi-ok { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: var(--r-hap); display: grid; place-items: center;
  background: var(--yuzey-2); color: var(--birincil); transition: background-color var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay); }
@media (hover: hover) { .bk-kapi:hover .bk-kapi-ok { background: var(--birincil); color: #fff; transform: translateX(2px); } }
.bk-kapi.bk-buyuk .bk-kart-baslik { font-size: var(--y-28); line-height: var(--sy-28); }

/* araç kartı .bk-arac: kare nesne görseli (şeffaf), ad 18/700, tek satır açıklama */
.bk-arac { padding: var(--b-4); display: grid; grid-template-columns: 64px 1fr; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; }
.bk-arac > img, .bk-arac > .bk-arac-gorsel { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-14); background: var(--yuzey-2); display: grid; place-items: center; color: var(--birincil); }
.bk-arac b { display: block; font-size: var(--y-18); line-height: 1.25; font-weight: 700; }
.bk-arac span { display: block; font-size: var(--y-16); line-height: var(--sy-16); color: var(--metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* kazanım kartı .bk-kazanim: sol 4 px ders şeridi, kod rozeti, tek cümle, 1 birincil + 2 ikincil */
.bk-kazanim { padding: var(--b-5) var(--b-5) var(--b-5) calc(var(--b-5) + 4px); overflow: hidden; }
.bk-kazanim::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--ders-renk, var(--ders-mat)); }
.bk-kazanim-cumle { margin: var(--b-2) 0 var(--b-4); font-size: var(--y-18); line-height: var(--sy-18); max-width: 70ch; }

/* ============================================================ OYUN KARTI .bk-oyun-kart (salon standardı §4) */
.bk-oyun-kart { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.bk-oyun-kart > .bk-oran { padding-top: 62.5%; }
.bk-oyun-kart > .bk-oran > img { transition: transform var(--sure-yavas) var(--yay); }
@media (hover: hover) { .bk-oyun-kart:hover > .bk-oran > img { transform: scale(1.03); } .bk-oyun-kart:hover { box-shadow: var(--golge-2); } }
.bk-oyun-kart .bk-onerilen { position: absolute; top: var(--b-3); left: var(--b-3); z-index: 2; }
.bk-oyun-govde { display: grid; grid-template-rows: auto auto auto 1fr; padding: var(--b-4) var(--b-5) var(--b-5); }
.bk-oyun-govde .bk-kart-baslik { margin: 0 0 var(--b-1); }
.bk-oyun-govde .bk-kart-metin { margin: 0 0 var(--b-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-oyun-govde .bk-rozetler { margin-bottom: var(--b-4); }
.bk-oyun-alt { align-self: end; display: grid; grid-template-columns: 1fr var(--dokun); grid-gap: var(--b-2); gap: var(--b-2); }
.bk-oyun-alt > .bk-dugme { width: 100%; }

/* ============================================================ LOBİ .bk-lobi (§3.1) */
.bk-lobi { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-gap: var(--b-6); gap: var(--b-6); align-items: start; }
.bk-lobi-sol { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: var(--b-5); gap: var(--b-5); align-content: start; }
.bk-lobi-baslik { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-36); line-height: var(--sy-36); letter-spacing: var(--harf-gosterim); }
.bk-lobi-aciklama { margin: var(--b-2) 0 0; font-size: var(--y-18); color: var(--metin-2); max-width: 46ch; }
.bk-lobi-secim > .bk-etiket { display: block; margin: 0 0 var(--b-2); font-family: var(--baslik); font-weight: 700; font-size: var(--y-18); color: var(--metin); }
.bk-lobi-sag { position: relative; border-radius: var(--r-20); overflow: hidden; background: var(--yuzey); border: 1.5px solid var(--cizgi); box-shadow: var(--golge-2); }
.bk-lobi-sag .bk-onizleme-etiket { position: absolute; top: var(--b-3); left: var(--b-3); z-index: 2; }
.bk-lobi-basla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: var(--b-2); gap: var(--b-2); }
.bk-lobi-basla .bk-dugme { width: 100%; }
@media (min-width: 1280px) { .bk-lobi-baslik { font-size: var(--y-48); line-height: var(--sy-48); } }
/* 1280 × 720'de "Başla" yapışkan alt çubukta; 1920 × 1080'de katlama çizgisinin üstünde kalır */
@media (max-height: 820px) and (min-width: 768px) {
  .bk-lobi-basla { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 5; padding: var(--b-3) 0;
    background: linear-gradient(rgba(252,253,255,0), var(--kagit) 30%); }
}
@media (max-width: 900px) {
  .bk-lobi { grid-template-columns: 1fr; }
  .bk-lobi-sag { display: none; }
  .bk-lobi-basla { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 5; margin: 0 calc(var(--b-4) * -1); padding: var(--b-3) var(--b-4) calc(var(--b-3) + env(safe-area-inset-bottom, 0px));
    background: var(--kagit); box-shadow: 0 -1px 0 var(--cizgi); }
}

/* ============================================================ 2.4 SEKME .bk-sekmeler */
.bk-sekmeler { display: flex; overflow-x: auto; border-bottom: 1.5px solid var(--cizgi); scrollbar-width: none; }
.bk-sekmeler::-webkit-scrollbar { display: none; }
.bk-sekme { position: relative; flex: none; display: inline-grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2); align-items: center;
  min-height: var(--dokun); padding: 0 var(--b-4); margin: 0 var(--b-1) -1.5px 0; border: 0; background: none;
  font-family: var(--govde); font-weight: 700; font-size: var(--y-18); color: var(--metin-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--sure-orta) var(--yay); }
.bk-sekme > .bk-simge { width: 20px; height: 20px; }
.bk-sekme::after { content: ""; position: absolute; left: var(--b-2); right: var(--b-2); bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--birincil); transform: scaleX(0); opacity: 0; transition: transform var(--sure-orta) var(--yay), opacity var(--sure-orta) var(--yay); }
@media (hover: hover) { .bk-sekme:hover { color: var(--metin); } }
.bk-sekme[aria-selected="true"] { color: var(--metin); }
.bk-sekme[aria-selected="true"]::after { transform: none; opacity: 1; }
.bk-sekme:focus { outline: 3px solid var(--odak); outline-offset: -3px; border-radius: var(--r-8); }
.bk-sekme:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-sekme:focus { outline: none; }
.bk-sekme-panel { padding-top: var(--b-5); }
.bk-sekme-panel.bk-giris { animation: bkGir var(--sure-orta) var(--yay) both; }

/* ============================================================ 2.5 AKORDEON .bk-akordeon ("Daha fazla ayar") */
.bk-akordeon { border: 1.5px solid var(--cizgi); border-radius: var(--r-14); background: var(--yuzey); }
.bk-akordeon-bas { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; min-height: 56px; padding: 0 var(--b-4);
  border: 0; background: none; border-radius: var(--r-14); text-align: left; cursor: pointer;
  font-family: var(--govde); font-weight: 700; font-size: var(--y-18); color: var(--metin); }
@media (hover: hover) { .bk-akordeon-bas:hover { background: var(--yuzey-2); } }
.bk-akordeon-bas:focus { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-akordeon-bas:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-akordeon-bas:focus { outline: none; }
.bk-akordeon-bas .bk-simge { color: var(--metin-2); transition: transform var(--sure-orta) var(--yay); }
.bk-akordeon-bas[aria-expanded="true"] .bk-simge { transform: rotate(180deg); }
.bk-akordeon-ic { overflow: hidden; max-height: 0; opacity: 0; padding: 0 var(--b-4);
  transition: max-height var(--sure-orta) var(--yay), opacity var(--sure-orta) var(--yay), padding var(--sure-orta) var(--yay); }
.bk-akordeon.bk-acik > .bk-akordeon-ic { max-height: 1200px; opacity: 1; padding: var(--b-2) var(--b-4) var(--b-4); }

/* ============================================================ 2.6 ROZET .bk-rozet */
.bk-rozetler { display: flex; flex-wrap: wrap; margin: calc(var(--b-1) * -1); }
.bk-rozetler > * { margin: var(--b-1); }
.bk-rozet { display: inline-grid; grid-auto-flow: column; grid-gap: var(--b-1); gap: var(--b-1); align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--r-hap); background: var(--yuzey-2); color: var(--metin-2); font-size: var(--y-14); line-height: 1; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.bk-rozet > .bk-simge { width: 16px; height: 16px; stroke-width: 2.25; }
.bk-rozet[data-ders] { background: var(--ders-zemin); color: var(--metin); }
.bk-rozet.bk-mavi { background: var(--secili-zemin); color: var(--secili-metin); }
.bk-rozet.bk-yesil { background: var(--basari-zemin); color: var(--basari-koyu); }
.bk-rozet.bk-sari { background: var(--uyari-zemin); color: var(--uyari-koyu); }
.bk-rozet.bk-kirmizi { background: var(--hata-zemin); color: var(--hata); }
.bk-rozet.bk-vurgu { background: var(--vurgu); color: var(--vurgu-metin); box-shadow: 0 1px 0 rgba(94,74,0,.18); } /* "Önerilen", "Bugün", "1." — sayfada tek */
.bk-rozet.bk-kod { font-family: var(--govde); font-variant-numeric: tabular-nums; letter-spacing: .01em; background: var(--yuzey); box-shadow: inset 0 0 0 1.5px var(--cizgi); color: var(--metin); }
.bk-nokta-durum { width: 8px; height: 8px; border-radius: 50%; background: var(--basari); box-shadow: 0 0 0 3px var(--basari-zemin); }

/* ============================================================ 2.7 TOAST .bk-toast + PENCERE / ONAY .bk-perde .bk-pencere */
.bk-toast-kap { position: fixed; left: 0; right: 0; bottom: calc(var(--b-5) + var(--yapiskan-yuk, 0px) + env(safe-area-inset-bottom, 0px)); /* yapışkan eylem çubuğunun üstünde */ z-index: var(--z-toast);
  display: grid; justify-items: center; grid-gap: var(--b-2); gap: var(--b-2); padding: 0 var(--b-4); pointer-events: none; }
.bk-toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; grid-gap: var(--b-3); gap: var(--b-3); align-items: center;
  width: 100%; max-width: 480px; min-height: 56px; padding: var(--b-2) var(--b-2) var(--b-2) var(--b-4);
  background: var(--metin); color: #fff; border-radius: var(--r-14); box-shadow: var(--golge-3);
  font-weight: 700; font-size: var(--y-16); line-height: 1.35;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98);   /* gizliyken visibility:hidden: Tab ve ekran okuyucu atlar */
  transition: opacity var(--sure-orta) var(--yay), transform var(--sure-yavas) var(--yay), visibility 0s linear var(--sure-yavas); }
.bk-toast.bk-gorunur { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bk-toast.bk-cikiyor { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay), visibility 0s linear var(--sure-orta); }
.bk-toast > .bk-simge { width: 22px; height: 22px; color: #9DB5FF; } /* koyu zeminde açık mavi (lacivert üstünde 6.9:1) */
.bk-toast.bk-basari > .bk-simge { color: #7FDB9F; }
.bk-toast.bk-hata > .bk-simge { color: #FF8A6B; }
.bk-toast.bk-uyari > .bk-simge { color: #FFD84D; }
.bk-toast-metin { padding: var(--b-2) 0; }
.bk-toast-eylem { min-height: var(--dokun); min-width: var(--dokun); padding: 0 var(--b-4); border: 0; border-radius: var(--r-8); background: rgba(255,255,255,.12); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--sure-hizli) var(--yay); }
@media (hover: hover) { .bk-toast-eylem:hover { background: rgba(255,255,255,.2); } }
.bk-toast-eylem:focus { outline: 3px solid #9DB5FF; outline-offset: 2px; }
.bk-toast-eylem:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-toast-eylem:focus { outline: none; }
.bk-toast:not(.bk-eylemli) { grid-template-columns: auto 1fr; padding-right: var(--b-4); }
@media (max-width: 480px) { .bk-toast.bk-eylemli { grid-template-columns: auto 1fr; padding-right: var(--b-2); } .bk-toast.bk-eylemli > .bk-toast-eylem { grid-column: 1 / -1; justify-self: end; margin-top: calc(var(--b-2) * -1); } }

.bk-perde { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-perde); display: grid; place-items: center; padding: var(--b-4);
  background: var(--perde); opacity: 0; transition: opacity var(--sure-orta) var(--yay); overflow-y: auto; }
.bk-perde.bk-gorunur { opacity: 1; }
.bk-pencere { position: relative; width: 100%; max-width: 520px; background: var(--yuzey); color: var(--metin); border-radius: var(--r-20); box-shadow: var(--golge-3);
  padding: var(--b-6); outline: none; transform: translateY(12px) scale(.97); opacity: 0;
  transition: transform var(--sure-yavas) var(--yay), opacity var(--sure-orta) var(--yay); }
.bk-perde.bk-gorunur > .bk-pencere { transform: none; opacity: 1; }
.bk-pencere.bk-genis { max-width: 880px; }
.bk-pencere-baslik { margin: 0 0 var(--b-2); padding-right: var(--b-7); font-family: var(--baslik); font-weight: 800; font-size: var(--y-28); line-height: var(--sy-28); letter-spacing: var(--harf-baslik); }
.bk-pencere-metin { margin: 0 0 var(--b-5); font-size: var(--y-18); color: var(--metin-2); }
.bk-pencere-kapat { position: absolute; top: var(--b-4); right: var(--b-4); }
.bk-pencere-simge { width: 56px; height: 56px; border-radius: var(--r-hap); display: grid; place-items: center; margin-bottom: var(--b-4); background: var(--secili-zemin); color: var(--birincil); }
.bk-pencere-simge.bk-tehlike { background: var(--hata-zemin); color: var(--hata); }
.bk-pencere-simge > .bk-simge { width: 28px; height: 28px; }
@media (max-width: 600px) {
  .bk-perde { align-items: end; padding: 0; }
  .bk-pencere { max-width: none; border-radius: var(--r-20) var(--r-20) 0 0; padding: var(--b-5) var(--b-4) calc(var(--b-5) + env(safe-area-inset-bottom, 0px)); transform: translateY(40px); }
  .bk-pencere .bk-dugmeler { justify-content: stretch; }
  .bk-pencere .bk-dugmeler > .bk-dugme { flex: 1 1 0; }
}
html.bk-kilitli, html.bk-kilitli body { overflow: hidden; }

/* açılır menü (⋯) .bk-menu: tetikleyiciye göre konumlanır (BK.menu) */
.bk-menu { position: fixed; z-index: var(--z-menu); min-width: 220px; max-width: 320px; padding: var(--b-2); background: var(--yuzey); border: 1.5px solid var(--cizgi);
  border-radius: var(--r-14); box-shadow: var(--golge-2); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay); }
.bk-menu.bk-gorunur { opacity: 1; transform: none; }
.bk-menu-oge { display: grid; grid-template-columns: 24px 1fr; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; width: 100%; min-height: var(--dokun);
  padding: 0 var(--b-3); border: 0; border-radius: var(--r-8); background: none; color: var(--metin); text-align: left; text-decoration: none;
  font: inherit; font-size: var(--y-16); font-weight: 700; cursor: pointer; }
.bk-menu-oge > .bk-simge { color: var(--metin-2); }
@media (hover: hover) { .bk-menu-oge:hover { background: var(--yuzey-2); } }
.bk-menu-oge:focus { outline: 3px solid var(--odak); outline-offset: -2px; }
.bk-menu-oge:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-menu-oge:focus { outline: none; }
.bk-menu-oge.bk-tehlike, .bk-menu-oge.bk-tehlike > .bk-simge { color: var(--hata); }
.bk-menu hr { border: 0; height: 1.5px; background: var(--cizgi); margin: var(--b-1) var(--b-2); }

/* ============================================================ 2.8 PIN / QR kutusu .bk-pin */
.bk-pin { display: inline-grid; grid-template-columns: auto auto; grid-gap: var(--b-5) var(--b-6); gap: var(--b-5) var(--b-6); align-items: center;
  padding: var(--b-5) var(--b-6); background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: var(--r-20); box-shadow: var(--golge-2); }
.bk-pin-qr { width: 240px; height: 240px; padding: var(--b-4); background: #fff; border-radius: var(--r-14); box-shadow: inset 0 0 0 1.5px var(--cizgi); display: grid; place-items: center; }
.bk-pin-qr > * { max-width: 100%; max-height: 100%; }
.bk-pin-etiket { display: block; font-size: var(--y-16); font-weight: 700; color: var(--metin-2); }
.bk-pin-kod { display: block; margin: var(--b-1) 0 var(--b-3); font-family: var(--baslik); font-weight: 800; font-size: var(--y-72); line-height: 1; letter-spacing: var(--harf-gosterim);
  color: var(--metin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-pin-kod > span + span { margin-left: .28em; }
.bk-pin-adres { font-size: var(--y-18); color: var(--metin-2); }
.bk-pin-adres b { color: var(--birincil); }
@media (min-width: 1700px) { .bk-pin-qr { width: 320px; height: 320px; } }
@media (max-width: 600px) { .bk-pin { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--b-5); } .bk-pin-kod { font-size: var(--y-48); } }

/* ============================================================ 2.9 DURUMLAR: iskelet · yükleniyor · boş · satır içi hata · bağlantı şeridi */
.bk-iskelet { display: block; border-radius: var(--r-8); background: var(--yuzey-3);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; background-repeat: no-repeat; animation: bkParilti 1.2s linear infinite; }
.bk-iskelet.bk-metin { height: 16px; margin: var(--b-2) 0; }
.bk-iskelet.bk-baslik { height: 28px; width: 60%; margin-bottom: var(--b-3); }
.bk-iskelet.bk-gorsel { height: 0; padding-top: 56.25%; border-radius: var(--r-14); }
.bk-iskelet.bk-yuvarlak { border-radius: 50%; }
/* 300 ms gecikme: kısa yüklemelerde iskelet hiç görünmesin (BK.yukleniyor) */
.bk-iskelet-kap { opacity: 0; animation: bkBelir var(--sure-orta) var(--yay) .3s forwards; }
@keyframes bkBelir { to { opacity: 1; } }
@keyframes bkParilti { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* bekleniyor: 3 nokta (sitedeki TEK sonsuz döngü) */
.bk-bekle { display: inline-grid; grid-auto-flow: column; grid-gap: 6px; gap: 6px; align-items: center; vertical-align: middle; }
.bk-bekle > i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .25; animation: bkNokta 1.2s var(--yay) infinite; }
.bk-bekle > i:nth-child(2) { animation-delay: .15s; }
.bk-bekle > i:nth-child(3) { animation-delay: .3s; }
.bk-bekle.bk-buyuk > i { width: 16px; height: 16px; }
@keyframes bkNokta { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
.bk-donen { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--yuzey-3); border-top-color: var(--birincil); animation: bkDon .7s linear infinite; vertical-align: middle; }
@keyframes bkDon { to { transform: rotate(360deg); } }

/* boş durum: Canva sahnesi (en geniş 480) + tek cümle (22) + tek eylem */
.bk-bos { display: grid; justify-items: center; text-align: center; padding: var(--b-6) var(--b-4); animation: bkGir var(--sure-yavas) var(--yay) both; }
.bk-bos-gorsel { width: 100%; max-width: 480px; margin-bottom: var(--b-5); border-radius: var(--r-20); overflow: hidden; }
.bk-bos-gorsel > img { display: block; width: 100%; height: auto; }
.bk-bos-metin { margin: 0 0 var(--b-5); max-width: 36ch; font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); line-height: var(--sy-22); letter-spacing: -.01em; color: var(--metin); }
.bk-bos.bk-kucuk .bk-bos-gorsel { max-width: 280px; }

/* satır içi hata: "Ne oldu. Ne yapmalı." + Tekrar dene */
.bk-hata-serit { display: grid; grid-template-columns: auto 1fr auto; grid-gap: var(--b-3); gap: var(--b-3); align-items: center;
  padding: var(--b-3) var(--b-3) var(--b-3) var(--b-4); border-radius: var(--r-14); background: var(--hata-zemin); color: var(--metin);
  box-shadow: inset 0 0 0 1.5px rgba(194,70,42,.25); font-size: var(--y-16); line-height: var(--sy-16); }
.bk-hata-serit > .bk-simge { color: var(--hata); }
.bk-hata-serit b { display: block; font-size: var(--y-18); }
.bk-hata-serit.bk-uyari { background: var(--uyari-zemin); box-shadow: inset 0 0 0 1.5px rgba(181,137,0,.25); }
.bk-hata-serit.bk-uyari > .bk-simge { color: var(--uyari-koyu); }
.bk-hata-serit.bk-bilgi { background: var(--bilgi-zemin); box-shadow: inset 0 0 0 1.5px rgba(47,111,208,.2); }
.bk-hata-serit.bk-bilgi > .bk-simge { color: var(--bilgi); }
.bk-hata-serit.bk-basari { background: var(--basari-zemin); box-shadow: inset 0 0 0 1.5px rgba(30,158,90,.22); }
.bk-hata-serit.bk-basari > .bk-simge { color: var(--basari); }
@media (max-width: 600px) { .bk-hata-serit { grid-template-columns: auto 1fr; } .bk-hata-serit > .bk-dugme { grid-column: 1 / -1; } }

/* bağlantı / kapasite şeridi: üstte 40 px */
.bk-serit-baglanti { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  min-height: 40px; padding: var(--b-1) var(--b-4); background: var(--uyari-zemin); color: var(--uyari-koyu); box-shadow: 0 1px 0 rgba(181,137,0,.3);
  font-weight: 700; font-size: var(--y-16); text-align: center; transform: translateY(-100%); transition: transform var(--sure-orta) var(--yay); }
.bk-serit-baglanti.bk-gorunur { transform: none; }
.bk-serit-baglanti > * { margin: 0 var(--b-1); }
.bk-serit-baglanti.bk-dolu { background: var(--hata-zemin); color: var(--hata); box-shadow: 0 1px 0 rgba(194,70,42,.3); }
.bk-serit-baglanti .bk-dugme { min-height: var(--dokun); padding: var(--b-1) var(--b-4); font-size: var(--y-16); margin: var(--b-1); }

/* ============================================================ FORM: alan, anahtar, kaydırıcı */
.bk-alan { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: var(--b-2); gap: var(--b-2); align-content: start; }
.bk-alan > label, .bk-etiket { font-weight: 700; font-size: var(--y-16); color: var(--metin); }
.bk-alan .bk-yardim { font-size: var(--y-16); color: var(--metin-2); }
.bk-girdi { width: 100%; min-height: var(--dokun); padding: var(--b-3) var(--b-4); border-radius: var(--r-8); border: 1.5px solid var(--cizgi); background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: var(--y-18); font-weight: 400; transition: border-color var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli) var(--yay); -webkit-appearance: none; appearance: none; }
.bk-girdi::placeholder { color: var(--metin-3); }
@media (hover: hover) { .bk-girdi:hover { border-color: var(--kare-koyu); } }
.bk-girdi:focus { outline: none; border-color: var(--birincil); box-shadow: 0 0 0 4px rgba(42,75,215,.16); }
.bk-girdi[aria-invalid="true"] { border-color: var(--hata); box-shadow: 0 0 0 4px rgba(194,70,42,.12); }
.bk-girdi:disabled { opacity: .45; cursor: not-allowed; }
select.bk-girdi { padding-right: var(--b-7); cursor: pointer;
  background: var(--yuzey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356647F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/20px no-repeat; }
.bk-girdi.bk-pin-girdi { font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; min-height: 80px; }
.bk-hata-not { font-size: var(--y-16); font-weight: 700; color: var(--hata); }

/* anahtar: <label class="bk-anahtar"><input type="checkbox" role="switch"><span class="bk-anahtar-iz"></span><span>Metin</span></label> */
.bk-anahtar { display: inline-grid; grid-template-columns: auto 1fr; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; min-height: var(--dokun);
  cursor: pointer; position: relative; font-weight: 700; font-size: var(--y-16); -webkit-tap-highlight-color: transparent; }
.bk-anahtar > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bk-anahtar-iz { position: relative; width: 52px; height: 32px; border-radius: var(--r-hap); background: var(--yuzey-3); box-shadow: inset 0 0 0 1.5px var(--cizgi);
  transition: background-color var(--sure-orta) var(--yay), box-shadow var(--sure-orta) var(--yay); }
.bk-anahtar-iz::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(26,43,76,.25), 0 2px 6px rgba(26,43,76,.12); transition: transform var(--sure-orta) var(--yay), width var(--sure-hizli) var(--yay); }
.bk-anahtar:active > .bk-anahtar-iz::after { width: 28px; }
.bk-anahtar > input:checked + .bk-anahtar-iz { background: var(--birincil); box-shadow: none; }
.bk-anahtar > input:checked + .bk-anahtar-iz::after { transform: translateX(20px); }
.bk-anahtar:active > input:checked + .bk-anahtar-iz::after { transform: translateX(16px); }
.bk-anahtar > input:focus + .bk-anahtar-iz { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-anahtar > input:focus:not(:focus-visible) + .bk-anahtar-iz { outline: none; }
html.odak-isaretci .bk-anahtar > input:focus + .bk-anahtar-iz { outline: none; }
.bk-anahtar > input:disabled + .bk-anahtar-iz { opacity: .45; }
.bk-anahtar small { display: block; font-weight: 400; color: var(--metin-2); }

/* kaydırıcı: <input type="range" class="bk-kaydirici"> — dolu kısım --dolu (BK otomatik günceller) */
.bk-kaydirici { -webkit-appearance: none; appearance: none; width: 100%; height: var(--dokun); margin: 0; background: transparent; cursor: pointer; --dolu: 50%; }
.bk-kaydirici:focus { outline: 3px solid var(--odak); outline-offset: 2px; border-radius: var(--r-8); }
.bk-kaydirici:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-kaydirici:focus { outline: none; }
.bk-kaydirici::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-hap);
  background: linear-gradient(90deg, var(--birincil) 0, var(--birincil) var(--dolu), var(--yuzey-3) var(--dolu), var(--yuzey-3) 100%); }
/* tutamaç: görünen 28 px beyaz disk, dokunma alanı 48 px (görünmez dolgu: saydam halka radial-gradient ile) */
.bk-kaydirici::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 48px; height: 48px; margin-top: -20px; border-radius: 50%; border: 0;
  background: radial-gradient(circle closest-side, #fff 0, #fff 13px, #C9D3E4 13.5px, #C9D3E4 14.5px, rgba(26,43,76,.16) 15px, rgba(26,43,76,0) 19px);
  transition: transform var(--sure-hizli) var(--yay); }
.bk-kaydirici:active::-webkit-slider-thumb { transform: scale(1.12); }
.bk-kaydirici::-moz-range-track { height: 8px; border-radius: var(--r-hap); background: var(--yuzey-3); }
.bk-kaydirici::-moz-range-progress { height: 8px; border-radius: var(--r-hap); background: var(--birincil); }
.bk-kaydirici::-moz-range-thumb { width: 48px; height: 48px; border: 0; border-radius: 50%; background: radial-gradient(circle closest-side, #fff 0, #fff 13px, #C9D3E4 13.5px, #C9D3E4 14.5px, rgba(26,43,76,.16) 15px, rgba(26,43,76,0) 19px); }
.bk-kaydirici:disabled { opacity: .45; cursor: not-allowed; }
.bk-kaydirici-satir { display: grid; grid-template-columns: 1fr 64px; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; }
.bk-kaydirici-deger { font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================ avatar, ilerleme, çubuk */
.bk-avatar { position: relative; display: inline-block; width: 64px; height: 64px; border-radius: 50%; background: var(--yuzey-2); flex: none; }
.bk-avatar > img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bk-avatar.bk-48 { width: 48px; height: 48px; }
.bk-avatar.bk-160 { width: 160px; height: 160px; }
button.bk-avatar { padding: 0; border: 0; cursor: pointer; transition: transform var(--sure-hizli) var(--yay), box-shadow var(--sure-orta) var(--yay); -webkit-tap-highlight-color: transparent; }
button.bk-avatar:active { transform: scale(.96); }
button.bk-avatar:focus { outline: 3px solid var(--odak); outline-offset: 3px; }
button.bk-avatar:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci button.bk-avatar:focus { outline: none; }
.bk-avatar[aria-pressed="true"], .bk-avatar.bk-secili { box-shadow: 0 0 0 3px var(--yuzey), 0 0 0 6px var(--secili-kenar); }
.bk-avatar[aria-pressed="true"]::after, .bk-avatar.bk-secili::after { content: ""; position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--birincil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow: 0 0 0 2px var(--yuzey); }
.bk-avatar-no { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 0 var(--b-2); border-radius: var(--r-hap); background: var(--yuzey); box-shadow: var(--golge-1), inset 0 0 0 1.5px var(--cizgi);
  font-size: var(--y-14); font-weight: 700; line-height: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--metin); }

.bk-ilerleme { display: inline-grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2); align-items: center; }
.bk-ilerleme > i { width: 12px; height: 12px; border-radius: 50%; background: var(--yuzey); box-shadow: inset 0 0 0 2px var(--bos-cizgi); transition: background-color var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay), box-shadow var(--sure-orta) var(--yay); }
.bk-ilerleme > i.bk-dolu { background: var(--birincil); box-shadow: none; }
.bk-ilerleme > i.bk-simdi { background: var(--yuzey); box-shadow: inset 0 0 0 3px var(--birincil); transform: scale(1.15); }
.bk-ilerleme-sayi { font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); font-variant-numeric: tabular-nums; }
.bk-cubuk { position: relative; height: 12px; border-radius: var(--r-hap); background: var(--yuzey-3); overflow: hidden; }
.bk-cubuk > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: var(--r-hap); background: var(--birincil); transition: width var(--sure-yavas) var(--yay); }
.bk-cubuk.bk-basari > i { background: var(--basari); }

/* ============================================================ sayfa başlığı (ortak kalıp) ve bölüm ayracı */
.bk-sayfa-baslik { margin: 0 0 var(--b-2); font-family: var(--baslik); font-weight: 800; font-size: var(--y-36); line-height: var(--sy-36); letter-spacing: var(--harf-gosterim); color: var(--metin); }
@media (min-width: 1280px) { .bk-sayfa-baslik { font-size: var(--y-48); line-height: var(--sy-48); } }
.bk-sayfa-giris { margin: 0; max-width: 60ch; font-size: var(--y-18); color: var(--metin-2); }
.bk-ayrac { display: grid; grid-template-columns: 14px auto 1fr; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; margin: 0 0 var(--b-5);
  font-family: var(--baslik); font-weight: 800; font-size: var(--y-28); line-height: var(--sy-28); letter-spacing: var(--harf-baslik); color: var(--metin); }
.bk-ayrac::before { content: ""; width: 14px; height: 30px; border-radius: 4px; background: var(--ders-renk, var(--ders-san)); }
.bk-ayrac > small { font-family: var(--govde); font-weight: 400; font-size: var(--y-16); letter-spacing: 0; color: var(--metin-2); }

/* ============================================================ hareket yardımcıları (aşamalı geçiş) */
@keyframes bkGir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bk-gir { animation: bkGir var(--sure-yavas) var(--yay) both; }
.bk-gir-sirali > * { animation: bkGir var(--sure-yavas) var(--yay) both; }
.bk-gir-sirali > *:nth-child(2) { animation-delay: 40ms; } .bk-gir-sirali > *:nth-child(3) { animation-delay: 80ms; }
.bk-gir-sirali > *:nth-child(4) { animation-delay: 120ms; } .bk-gir-sirali > *:nth-child(5) { animation-delay: 160ms; }
.bk-gir-sirali > *:nth-child(n+6) { animation-delay: 200ms; }
/* çapraz geçiş (BK.capraz): iki görsel üst üste, yenisi 220 ms'de belirir */
.bk-capraz { position: relative; display: inline-block; }
.bk-capraz > img { display: block; transition: opacity var(--sure-orta) var(--yay); }
.bk-capraz > img + img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
/* doğru / yanlış geri bildirimi (oyun içi): yeşil çerçeve 220 ms · yatay sallanma ×3 300 ms */
.bk-dogru { box-shadow: 0 0 0 4px var(--dogru) !important; transition: box-shadow var(--sure-orta) var(--yay); }
.bk-salla { animation: bkSalla 300ms var(--yay); }
@keyframes bkSalla { 0%, 100% { transform: none; } 16%, 50%, 84% { transform: translateX(-6px); } 33%, 67% { transform: translateX(6px); } }

/* ============================================================ yerleşim yardımcıları (flex gap yerine grid) */
.bk-yigin { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: var(--b-4); gap: var(--b-4); align-content: start; }
.bk-yigin.bk-2 { grid-gap: var(--b-2); gap: var(--b-2); }
.bk-yigin.bk-5 { grid-gap: var(--b-5); gap: var(--b-5); }
.bk-yigin.bk-8 { grid-gap: var(--b-8); gap: var(--b-8); }
.bk-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: var(--b-5); gap: var(--b-5); }
@media (min-width: 1700px) { .bk-izgara { grid-gap: var(--b-6); gap: var(--b-6); } }
.bk-izgara.bk-4lu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-izgara.bk-3lu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-izgara.bk-2li { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1279px) { .bk-izgara.bk-4lu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .bk-izgara.bk-4lu, .bk-izgara.bk-3lu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bk-izgara.bk-4lu, .bk-izgara.bk-3lu, .bk-izgara.bk-2li { grid-template-columns: 1fr; } }
.bk-satir { display: flex; flex-wrap: wrap; align-items: center; margin: calc(var(--b-3) * -.5); }
.bk-satir > * { margin: calc(var(--b-3) * .5); }
.bk-itele { margin-left: auto !important; }

/* simge dolgu (şık şekilleri, dolu yıldız) */
.bk-simge.bk-dolu { fill: currentColor; }
/* şık şekli rozeti: beyaz daire içinde şekil (renk + ŞEKİL ikili kodlama) */
.bk-sik-sekil { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--metin); flex: none; }
.bk-sik-sekil > .bk-simge { width: 24px; height: 24px; fill: currentColor; }

/* ============================================================ 2.10 ONAY KUTUSU .bk-isaret (28 px kutu, etiketle birlikte ≥ 48 px dokunma alanı) */
/* yapı: <label class="bk-isaret"><input type="checkbox"><span class="bk-isaret-kutu"></span><span>Metin <small>alt</small></span></label> */
.bk-isaret { position: relative; display: inline-grid; grid-template-columns: 28px minmax(0, auto); grid-gap: var(--b-3); gap: var(--b-3); align-items: center;
  min-height: var(--dokun); padding: var(--b-1) var(--b-2) var(--b-1) 0; cursor: pointer; font-weight: 700; font-size: var(--y-16); color: var(--metin); -webkit-tap-highlight-color: transparent; }
.bk-isaret > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bk-isaret-kutu { width: 28px; height: 28px; border-radius: 7px; border: 2px solid var(--bos-cizgi); background: var(--yuzey);
  transition: background-color var(--sure-hizli) var(--yay), border-color var(--sure-hizli) var(--yay), transform var(--sure-hizli) var(--yay); }
.bk-isaret small { display: block; font-weight: 400; font-size: var(--y-14); line-height: var(--sy-14); color: var(--metin-2); }
@media (hover: hover) { .bk-isaret:hover > input:not(:checked):not(:disabled) + .bk-isaret-kutu { border-color: var(--eylem); } }
.bk-isaret:active > input:not(:disabled) + .bk-isaret-kutu { transform: scale(.92); }
.bk-isaret > input:checked + .bk-isaret-kutu { border-color: var(--eylem); background: var(--eylem)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.bk-isaret > input:focus + .bk-isaret-kutu { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-isaret > input:focus:not(:focus-visible) + .bk-isaret-kutu { outline: none; }
html.odak-isaretci .bk-isaret > input:focus + .bk-isaret-kutu { outline: none; }
.bk-isaret > input:disabled + .bk-isaret-kutu, .bk-isaret > input:disabled ~ span { opacity: .45; cursor: not-allowed; }

/* ============================================================ 2.11 ÇEKMECE .bk-cekmece (BK.cekmece) — yandan/alttan açılan panel */
.bk-cekmece-perde { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-perde); background: var(--perde); opacity: 0; transition: opacity var(--sure-orta) var(--yay); }
.bk-cekmece-perde.bk-gorunur { opacity: 1; }
.bk-cekmece { position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-perde); width: 440px; max-width: calc(100vw - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-3); outline: none;
  transform: translateX(104%); transition: transform var(--sure-yavas) var(--yay); }
.bk-cekmece.bk-sol { right: auto; left: 0; transform: translateX(-104%); }
.bk-cekmece.bk-alt { top: auto; left: 0; width: 100%; max-width: none; max-height: 86vh; border-radius: var(--r-20) var(--r-20) 0 0; transform: translateY(104%); }
.bk-cekmece.bk-gorunur { transform: none; }
.bk-cekmece-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; padding: var(--b-4) var(--b-4) var(--b-3) var(--b-5); border-bottom: 1.5px solid var(--cizgi); }
.bk-cekmece-baslik { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); line-height: var(--sy-22); letter-spacing: var(--harf-baslik); }
.bk-cekmece-govde { overflow-y: auto; padding: var(--b-5); -webkit-overflow-scrolling: touch; }
.bk-cekmece-alt { padding: var(--b-3) var(--b-5) calc(var(--b-3) + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--cizgi); }
.bk-cekmece-alt:empty { display: none; }
@media (max-width: 600px) { .bk-cekmece:not(.bk-sol) { top: auto; left: 0; width: 100%; max-width: none; max-height: 88vh; border-radius: var(--r-20) var(--r-20) 0 0; transform: translateY(104%); } .bk-cekmece:not(.bk-sol).bk-gorunur { transform: none; } }

/* ============================================================ 2.12 YAPIŞKAN EYLEM ÇUBUĞU .bk-yapiskan (BK.yapiskanEylem) — sayfa altında tek birincil eylem */
.bk-yapiskan { position: -webkit-sticky; position: sticky; bottom: 0; z-index: var(--z-serit); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-gap: var(--b-3); gap: var(--b-3); align-items: center;
  margin-top: var(--b-5); padding: var(--b-3) var(--b-4) calc(var(--b-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(252,253,255,.96); box-shadow: 0 -1.5px 0 var(--cizgi), 0 -12px 24px -18px rgba(26,43,76,.35); border-radius: var(--r-14) var(--r-14) 0 0;
  animation: bkYapiskanGir var(--sure-yavas) var(--yay) both; }
.bk-yapiskan.bk-sabit { position: fixed; left: 0; right: 0; margin: 0; border-radius: 0; }
.bk-yapiskan-metin { min-width: 0; font-size: var(--y-16); line-height: var(--sy-16); color: var(--metin-2); }
.bk-yapiskan-metin b { color: var(--metin); }
.bk-yapiskan > .bk-dugmeler { flex-wrap: nowrap; }
@keyframes bkYapiskanGir { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .bk-yapiskan { grid-template-columns: minmax(0, 1fr); } .bk-yapiskan > .bk-dugmeler { justify-content: stretch; } .bk-yapiskan > .bk-dugmeler > .bk-dugme { flex: 1 1 0; } }

/* ============================================================ 2.13 KAYDIRMA İPUCU .bk-kaydir (BK.kaydirmaIpucu) — yatay şerit: kenar soluklaşması + ok düğmeleri */
.bk-kaydir { position: relative; }
.bk-kaydir-serit { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; }
.bk-kaydir-serit::-webkit-scrollbar { display: none; }
.bk-kaydir::before, .bk-kaydir::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--sure-orta) var(--yay); }
.bk-kaydir::before { left: 0; background: linear-gradient(90deg, var(--kaydir-zemin, var(--kagit)) 20%, rgba(252,253,255,0)); }
.bk-kaydir::after { right: 0; background: linear-gradient(270deg, var(--kaydir-zemin, var(--kagit)) 20%, rgba(252,253,255,0)); }
.bk-kaydir.bk-sol-var::before, .bk-kaydir.bk-sag-var::after { opacity: 1; }
.bk-kaydir-ok { position: absolute; top: 50%; z-index: 3; margin-top: calc(var(--dokun) / -2); width: var(--dokun); height: var(--dokun); padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--yuzey); color: var(--metin); box-shadow: inset 0 0 0 1.5px var(--cizgi), var(--golge-2); cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(.8); transition: opacity var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay), visibility 0s linear var(--sure-orta); -webkit-tap-highlight-color: transparent; }
.bk-kaydir-ok.bk-geri { left: 0; } .bk-kaydir-ok.bk-ileri { right: 0; }
.bk-kaydir.bk-sol-var > .bk-kaydir-ok.bk-geri, .bk-kaydir.bk-sag-var > .bk-kaydir-ok.bk-ileri { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bk-kaydir-ok:active { transform: scale(.94); }
.bk-kaydir-ok:focus { outline: 3px solid var(--odak); outline-offset: 2px; }
.bk-kaydir-ok:focus:not(:focus-visible) { outline: none; }
html.odak-isaretci .bk-kaydir-ok:focus { outline: none; }

/* ============================================================ 2.14 DUYURU bölgesi (BK.duyur) — ekranda görünmez, ekran okuyucu okur */
.bk-duyuru { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================ html.gap-yok yedeği (Chromium < 84: flex gap yok) — ÜRETİLİR, elle düzenlemeyin:
   node araclar/uyumluluk-denetle.mjs --gap-yedek public/sinif/bilesen.css */
/* gap-yok:basla */
/* 2026-10-20 · 0 kural · 0 kural JS yamasına bırakıldı (yönü başka kuralda değişiyor). Çocuk kuralları önce, kap işaretleri sonra. */
/* gap-yok:bitir */