/* Bileşenler — FY marka dili: gece zemini, altın hairline, deco köşe, ışıyan vurgu.
   Dokunma hedefleri en az 44px. Hepsi mantıksal özelliklerle (RTL güvenli). */

/* ================= Düğmeler ================= */
.btn {
  --btn-yz: rgb(var(--metin));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2);
  min-height: 44px; padding-inline: var(--b-4); padding-block: 10px;
  border-radius: var(--r-kucuk); border: 1px solid rgb(var(--cizgi) / .22);
  background: linear-gradient(rgb(var(--yuzey-2)), rgb(var(--yuzey)));
  color: var(--btn-yz); font: inherit; font-size: var(--f-m); font-weight: 600;
  cursor: pointer; position: relative; overflow: hidden; white-space: nowrap;
  transition: border-color var(--gecis), background var(--gecis), color var(--gecis),
              box-shadow var(--gecis), transform 90ms ease;
}
.btn:hover { border-color: rgb(var(--vurgu) / .55); color: rgb(var(--vurgu-2)); box-shadow: var(--isik); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn .simge { flex: none; }

/* Birincil: dolu altın. Sayfa başına bir tane. */
.btn--birincil {
  --btn-yz: rgb(var(--vurgu-yz));
  background: var(--altin-gecis); border-color: rgb(var(--vurgu-2) / .8);
  font-weight: 700; box-shadow: 0 2px 12px rgb(var(--vurgu) / .28), inset 0 1px 0 rgb(255 255 255 / .3);
}
.btn--birincil:hover { color: rgb(var(--vurgu-yz)); box-shadow: 0 4px 20px rgb(var(--vurgu) / .45), inset 0 1px 0 rgb(255 255 255 / .4); filter: brightness(1.06); }
/* Altın düğmenin üstünden geçen parlama */
.btn--birincil::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -70%; width: 50%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.btn--birincil:hover::after { animation: sweepGec 780ms ease-out; }

.btn--sade { background: none; border-color: transparent; color: rgb(var(--metin-2)); }
.btn--sade:hover { background: rgb(var(--vurgu) / .10); border-color: rgb(var(--vurgu) / .28); box-shadow: none; }
.btn--tehlike { border-color: rgb(var(--kirmizi) / .45); color: rgb(var(--kirmizi)); }
.btn--tehlike:hover { background: rgb(var(--kirmizi) / .12); border-color: rgb(var(--kirmizi)); color: rgb(var(--kirmizi)); box-shadow: 0 0 18px rgb(var(--kirmizi) / .25); }
.btn--kucuk { min-height: 34px; padding-inline: var(--b-3); font-size: var(--f-s); }
.btn--ikon { min-width: 44px; padding-inline: 0; }
.btn--kucuk.btn--ikon { min-width: 34px; }
.btn--tam { width: 100%; }
.btn--sabit { position: fixed; inset-block-end: calc(var(--alt-cubuk) + env(safe-area-inset-bottom) + var(--b-4)); inset-inline-end: var(--b-4); z-index: 25; box-shadow: var(--golge), var(--isik-guclu); }
@media (min-width: 1024px) { .btn--sabit { inset-block-end: var(--b-6); inset-inline-end: var(--b-6); } }

/* ================= Kartlar ================= */
.kart {
  position: relative; padding: var(--b-5); border-radius: var(--r);
  /* Yükselti kademesi: üstte iç ışık, sol üstte hafif altın yansıma, altta gölge. */
  background: var(--kat-1);
  border: var(--kenarlik);
  box-shadow: var(--yukselti-2);
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.kart::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgb(var(--vurgu) / .05), transparent 60%);
}
/* Üst kenarda ince altın hat — deco çerçevenin izi */
.kart::before {
  content: ''; position: absolute; inset-inline: var(--b-5); inset-block-start: 0; height: 1px;
  background: var(--altin-hat); opacity: .7; pointer-events: none;
}
.kart > * { position: relative; }
.kart__baslik { font-weight: 650; font-size: var(--f-m); letter-spacing: -.01em; display: flex; align-items: center; gap: var(--b-2); }
.kart__alt { color: rgb(var(--metin-2)); font-size: var(--f-s); }
.kart--tik { cursor: pointer; }
.kart--tik:hover, .kart--tik:focus-visible { border-color: rgb(var(--vurgu) / .5); box-shadow: var(--yukselti-3), var(--isik); transform: translateY(-3px); }
.kart--vurgu { border-color: rgb(var(--vurgu) / .42); box-shadow: var(--yukselti-2), var(--isik), var(--ic-isik-guclu); }
.kart--duz { background: rgb(var(--yuzey-2) / .6); box-shadow: none; padding: var(--b-4); }
.kart--duz::before { display: none; }

.izgara { display: grid; gap: var(--b-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.izgara--dar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr)); gap: var(--b-3); }
/* Özet sayaçları: telefonda 2, tablette 3 sütun — asla tek başına artan kart kalmaz. */
.izgara--sayac { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-3); }
@media (min-width: 760px) { .izgara--sayac { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.satir { display: flex; gap: var(--b-2); align-items: center; flex-wrap: wrap; }
.satir--arasi { justify-content: space-between; }

/* ================= Sayaçlar (Özet) ================= */
.sayac {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px; padding: var(--b-4);
  border-radius: var(--r); border: var(--kenarlik);
  background: var(--kat-2);
  box-shadow: var(--yukselti-1);
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.sayac:hover { border-color: rgb(var(--vurgu) / .42); box-shadow: var(--yukselti-2), var(--isik); transform: translateY(-2px); }
.sayac__etiket { font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik); text-transform: uppercase; color: rgb(var(--metin-3)); }
.sayac__deger { font-size: var(--f-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: rgb(var(--metin)); font-variant-numeric: tabular-nums; }
.sayac__fark { font-size: var(--f-xs); font-weight: 600; }
.sayac__fark--arti { color: rgb(var(--yesil)); }
.sayac__fark--eksi { color: rgb(var(--kirmizi)); }
.sayac__simge { color: rgb(var(--vurgu)); opacity: .85; }
/* Sayaç arkasındaki sparkline. Veri yokken de çizilir (düz dinlenme çizgisi):
   gizlenince kart içi boş görünüyordu. Sessiz kartta hem çizgi hem rakam kısılır,
   böylece hareketi olan kartlar ızgarada kendiliğinden öne çıkar. */
.sayac__cizgi { position: absolute; inset-inline: 0; inset-block-end: 0; height: 38px; opacity: .55; pointer-events: none; }
.sayac__fark--durgun { color: rgb(var(--metin-3)); font-weight: 500; }
.sayac--sessiz .sayac__cizgi { opacity: .22; }
.sayac--sessiz .sayac__deger { color: rgb(var(--metin-3)); }
.sayac--sessiz .sayac__simge { opacity: .4; }
/* Rakamlar tablo hizasında: ızgarada alt alta gelen sayılar kaymasın. */
.sayac__deger, .rakam { font-variant-numeric: tabular-nums; }

/* ================= Rozetler ================= */
.rozet {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-tam);
  font-size: var(--f-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; line-height: 1.5;
  /* nowrap değil: uzun etiket (ör. "Platform izin vermiyor") küçülemeyip
     satırdan taşıyordu. Kısa rozetler zaten tek satırda kalır. */
  max-width: 100%; text-align: center; overflow-wrap: anywhere;
}
.rozet::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.rozet--gri { color: rgb(var(--metin-3)); background: rgb(var(--metin-3) / .10); }
.rozet--yesil { color: rgb(var(--yesil)); background: rgb(var(--yesil) / .12); }
.rozet--sari { color: rgb(var(--sari)); background: rgb(var(--sari) / .12); }
.rozet--kirmizi { color: rgb(var(--kirmizi)); background: rgb(var(--kirmizi) / .12); }
.rozet--mavi { color: rgb(var(--mavi)); background: rgb(var(--mavi) / .12); }
.rozet--mor { color: rgb(var(--mor)); background: rgb(var(--mor) / .12); }
.rozet--vurgu, .rozet--altin { color: rgb(var(--vurgu)); background: rgb(var(--vurgu) / .12); box-shadow: 0 0 12px rgb(var(--vurgu) / .18); }
.rozet--sessiz::before { display: none; }

/* Çipler: filtre/seçim */
.cip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px var(--b-3); border-radius: var(--r-tam);
  border: 1px solid rgb(var(--cizgi) / .22); background: rgb(var(--yuzey-2) / .7);
  color: rgb(var(--metin-2)); font: inherit; font-size: var(--f-s); font-weight: 600; cursor: pointer;
  transition: all var(--gecis);
}
.cip:hover { border-color: rgb(var(--vurgu) / .5); color: rgb(var(--vurgu-2)); }
.cip--secili { background: rgb(var(--vurgu) / .14); border-color: rgb(var(--vurgu) / .6); color: rgb(var(--vurgu-2)); box-shadow: 0 0 14px rgb(var(--vurgu) / .18); }

/* ================= Form ================= */
.field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--b-4); }
.field__etiket { font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik); text-transform: uppercase; color: rgb(var(--metin-2)); }
.field__ipucu { font-size: var(--f-xs); color: rgb(var(--metin-3)); }
.field__hata { font-size: var(--f-xs); color: rgb(var(--kirmizi)); font-weight: 600; }
.input {
  width: 100%; min-height: 44px; padding: 10px var(--b-3); border-radius: var(--r-kucuk);
  border: 1px solid rgb(var(--cizgi) / .22); background: rgb(var(--bg-2)); color: rgb(var(--metin));
  font: inherit; font-size: var(--f-m); transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.input::placeholder { color: rgb(var(--metin-3)); }
.input:focus { outline: none; border-color: rgb(var(--vurgu) / .7); box-shadow: 0 0 0 3px rgb(var(--vurgu) / .16), var(--isik); background: rgb(var(--yuzey)); }
.input--hata { border-color: rgb(var(--kirmizi) / .7); }
textarea.input { min-height: 92px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; padding-inline-end: var(--b-6); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b2a68f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
:root:not([data-theme="light"]) select.input { color-scheme: dark; }
.onay-listesi { display: flex; flex-direction: column; gap: var(--b-2); }
.onay-listesi label { display: flex; align-items: center; gap: var(--b-2); min-height: 40px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--vurgu)); width: 18px; height: 18px; cursor: pointer; }

/* ================= Listeler ve tablolar ================= */
.liste { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; border: 1px solid rgb(var(--cizgi) / .13); background: rgb(var(--yuzey) / .6); }
.liste__satir {
  display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) var(--b-4);
  border-block-end: 1px solid rgb(var(--cizgi) / .09); transition: background var(--gecis);
}
.liste__satir:last-child { border-block-end: 0; }
.liste__satir:hover { background: rgb(var(--vurgu) / .06); }
.liste__govde { flex: 1; min-width: 0; }
.liste__baslik { font-weight: 600; font-size: var(--f-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__alt { color: rgb(var(--metin-3)); font-size: var(--f-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tablo-kap { overflow-x: auto; border-radius: var(--r); border: 1px solid rgb(var(--cizgi) / .13); }
.tablo { width: 100%; border-collapse: collapse; font-size: var(--f-s); min-width: 480px; }
.tablo th {
  text-align: start; padding: var(--b-3) var(--b-4); background: rgb(var(--yuzey-2));
  font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik); text-transform: uppercase;
  color: rgb(var(--metin-2)); border-block-end: 1px solid rgb(var(--vurgu) / .22); white-space: nowrap;
}
.tablo td { padding: var(--b-3) var(--b-4); border-block-end: 1px solid rgb(var(--cizgi) / .08); }
.tablo tbody tr:hover { background: rgb(var(--vurgu) / .05); }
.tablo tbody tr:last-child td { border-block-end: 0; }

/* ================= Avatar ================= */
.avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: var(--f-m);
  background: var(--altin-gecis); color: rgb(var(--vurgu-yz));
  box-shadow: 0 0 0 1px rgb(var(--vurgu) / .35), 0 2px 8px rgb(0 0 0 / .4);
  overflow: hidden;
}
.avatar--kucuk { width: 30px; height: 30px; font-size: var(--f-xs); }
.avatar--sade { background: rgb(var(--yuzey-3)); color: rgb(var(--vurgu)); box-shadow: inset 0 0 0 1px rgb(var(--vurgu) / .3); }

/* ================= Sekmeler ================= */
.sekmeler {
  display: flex; gap: 2px; padding: 4px; border-radius: var(--r-kucuk);
  background: rgb(var(--bg-2)); border: 1px solid rgb(var(--cizgi) / .14);
  overflow-x: auto; scrollbar-width: none; margin-block-end: var(--b-4);
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  flex: 1; min-height: 38px; padding-inline: var(--b-4); border: 0; border-radius: 6px;
  background: none; color: rgb(var(--metin-2)); font: inherit; font-size: var(--f-s); font-weight: 650;
  cursor: pointer; white-space: nowrap; transition: color var(--gecis), background var(--gecis);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sekme:hover { color: rgb(var(--metin)); }
.sekme[aria-selected="true"] {
  background: var(--altin-gecis); color: rgb(var(--vurgu-yz)); font-weight: 700;
  box-shadow: 0 2px 10px rgb(var(--vurgu) / .3);
}

/* ================= Bantlar (uyarı şeridi) ================= */
.bant {
  display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) var(--b-4); flex-wrap: wrap;
  border-radius: var(--r-kucuk); font-size: var(--f-s); font-weight: 550;
  border: 1px solid rgb(var(--cizgi) / .18); background: rgb(var(--yuzey-2) / .8);
  border-inline-start-width: 3px;
}
.bant .simge { flex: none; }
.bant > span:not(.simge), .bant > :not(button):not(.simge) { min-width: 0; }
.bant .btn { flex: none; }
/* Metin taban genişliği sıfırdan başlar: uzun metin telefonda simgenin altına düşmez, yanında sarar. */
.bant__metin { flex: 1 1 0; }
.bant--mavi { border-inline-start-color: rgb(var(--vurgu)); color: rgb(var(--metin)); background: rgb(var(--vurgu) / .07); }
.bant--mavi .simge { color: rgb(var(--vurgu)); }
.bant--sari { border-inline-start-color: rgb(var(--sari)); color: rgb(var(--sari)); background: rgb(var(--sari) / .08); }
.bant--kirmizi { border-inline-start-color: rgb(var(--kirmizi)); color: rgb(var(--kirmizi)); background: rgb(var(--kirmizi) / .08); }
.bant--gri { border-inline-start-color: rgb(var(--metin-3)); color: rgb(var(--metin-2)); }
.bant--altin { border-inline-start-color: rgb(var(--vurgu)); color: rgb(var(--vurgu-2)); background: rgb(var(--vurgu) / .08); box-shadow: var(--isik); }
.bant__kapat {
  margin-inline-start: auto; background: none; border: 0; color: inherit; cursor: pointer;
  opacity: .7; display: grid; place-items: center; padding: 4px;
  min-width: 32px; min-height: 32px;
}
.bant__kapat:hover { opacity: 1; }

/* ================= Durum blokları (boş / hata / yükleniyor) ================= */
.durum {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: var(--b-3);
  padding: var(--b-8) var(--b-5); text-align: center; border-radius: var(--r);
  border: 1px dashed rgb(var(--cizgi) / .22); background: rgb(var(--yuzey) / .45);
  color: rgb(var(--metin-2));
}
.durum__simge { color: rgb(var(--vurgu)); opacity: .8; filter: drop-shadow(0 0 14px rgb(var(--vurgu) / .35)); }
.durum__baslik { font-size: var(--f-l); font-weight: 650; color: rgb(var(--metin)); }
.durum__alt { font-size: var(--f-s); max-width: 46ch; margin: 0; }
.durum--hata, .durum-hata { border-color: rgb(var(--kirmizi) / .4); color: rgb(var(--kirmizi)); border-style: solid; background: rgb(var(--kirmizi) / .06); }
.durum--hata .durum__simge { color: rgb(var(--kirmizi)); }
.iskelet-satir { height: 58px; border-radius: var(--r-kucuk); background: rgb(var(--yuzey-2)); margin-block-end: var(--b-2);
  background-image: linear-gradient(100deg, rgb(var(--yuzey-2)) 30%, rgb(var(--vurgu) / .12) 48%, rgb(var(--yuzey-2)) 66%);
  background-size: 200% 100%; animation: shimmer 1.5s linear infinite; }

/* ================= İlerleme ================= */
.ilerleme { height: 6px; border-radius: var(--r-tam); background: rgb(var(--bg-2)); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(var(--cizgi) / .14); }
.ilerleme__dolu { height: 100%; border-radius: inherit; background: var(--altin-gecis); box-shadow: 0 0 12px rgb(var(--vurgu) / .5); transition: width var(--gecis-yavas); }

/* Halka ölçer: kurulum ilerlemesi */
.halka { display: grid; place-items: center; position: relative; }
.halka svg { transform: rotate(-90deg); }
.halka__iz { stroke: rgb(var(--cizgi) / .16); }
.halka__dolu { stroke: rgb(var(--vurgu)); stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(var(--vurgu) / .6)); }
.halka__yazi { position: absolute; font-weight: 700; font-size: var(--f-l); font-variant-numeric: tabular-nums; }

/* ================= Kod ve kopyalama ================= */
.kod {
  font-family: var(--mono); font-size: var(--f-s); background: rgb(var(--bg-2)); color: rgb(var(--vurgu-2));
  padding: var(--b-3); border-radius: var(--r-kucuk); border: 1px solid rgb(var(--cizgi) / .16);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}
.kopyala { display: flex; gap: var(--b-2); align-items: center; }
.kopyala .kod { flex: 1; margin: 0; }

/* ================= Modal ================= */
.ortu {
  position: fixed; inset: 0; z-index: 60; background: rgb(4 3 2 / .78);
  backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--b-4);
  animation: perdeGel 200ms ease both;
}
.modal {
  position: relative; width: min(560px, 100%); max-height: 86dvh; overflow: auto; border-radius: var(--r-buyuk);
  background: linear-gradient(rgb(var(--yuzey)), rgb(var(--bg-2)));
  border: 1px solid rgb(var(--vurgu) / .3); box-shadow: var(--golge), var(--isik);
  animation: modalGel 260ms cubic-bezier(.2, .8, .2, 1) both;
}
.modal--genis { width: min(920px, 100%); }
.modal__baslik { padding: var(--b-5) var(--b-5) var(--b-3); font-size: var(--f-xl); font-weight: 700; letter-spacing: -.02em; border-block-end: 1px solid rgb(var(--vurgu) / .18); }
.modal__govde { padding: var(--b-5); }
.modal__ayak { padding: var(--b-3) var(--b-5) var(--b-5); display: flex; gap: var(--b-2); justify-content: flex-end; flex-wrap: wrap; }

/* ================= Bildirimler ================= */
.bildirimler { position: fixed; inset-block-end: calc(var(--alt-cubuk) + env(safe-area-inset-bottom) + var(--b-3)); inset-inline: var(--b-4); z-index: 70; display: flex; flex-direction: column; gap: var(--b-2); align-items: center; pointer-events: none; }
@media (min-width: 1024px) { .bildirimler { inset-block-end: var(--b-5); inset-inline: auto var(--b-5); align-items: flex-end; } }
.bildirim {
  pointer-events: auto; display: flex; align-items: center; gap: var(--b-2);
  padding: var(--b-3) var(--b-4); border-radius: var(--r-kucuk); font-size: var(--f-s); font-weight: 600;
  background: linear-gradient(rgb(var(--yuzey-2)), rgb(var(--yuzey))); color: rgb(var(--metin));
  border: 1px solid rgb(var(--cizgi) / .25); box-shadow: var(--golge);
  animation: bildirimGel 280ms cubic-bezier(.2, .8, .2, 1) both; max-width: min(420px, 92vw);
}
.bildirim--basari { border-color: rgb(var(--yesil) / .5); color: rgb(var(--yesil)); }
.bildirim--hata { border-color: rgb(var(--kirmizi) / .5); color: rgb(var(--kirmizi)); }

/* ================= Açılır menü ================= */
.acilir { position: relative; }
.acilir__menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 200px;
  padding: 6px; border-radius: var(--r-kucuk);
  background: linear-gradient(rgb(var(--yuzey-2)), rgb(var(--yuzey)));
  border: 1px solid rgb(var(--vurgu) / .28); box-shadow: var(--golge);
  display: flex; flex-direction: column; gap: 2px;
  animation: yukselKucuk 180ms ease both;
}
.acilir__menu button, .acilir__menu a {
  display: flex; align-items: center; gap: var(--b-2); padding: 9px var(--b-3); border-radius: 6px;
  background: none; border: 0; color: rgb(var(--metin)); font: inherit; font-size: var(--f-s); font-weight: 550;
  text-align: start; cursor: pointer; text-decoration: none; min-height: 38px;
}
.acilir__menu button:hover, .acilir__menu a:hover { background: rgb(var(--vurgu) / .14); color: rgb(var(--vurgu-2)); }

/* ================= Katlanır ================= */
.katlanir { border: 1px solid rgb(var(--cizgi) / .14); border-radius: var(--r-kucuk); background: rgb(var(--yuzey) / .55); margin-block-end: var(--b-2); overflow: hidden; }
.katlanir > summary { padding: var(--b-3) var(--b-4); cursor: pointer; font-weight: 600; font-size: var(--f-m); list-style: none; display: flex; align-items: center; gap: var(--b-2); min-height: 46px; }
.katlanir > summary::-webkit-details-marker { display: none; }
.katlanir > summary::after { content: ''; margin-inline-start: auto; width: 8px; height: 8px; border: 1.6px solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: 45deg; opacity: .55; transition: rotate var(--gecis); }
.katlanir[open] > summary::after { rotate: -135deg; }
.katlanir[open] > summary { border-block-end: 1px solid rgb(var(--cizgi) / .12); color: rgb(var(--vurgu-2)); }
.katlanir__govde { padding: var(--b-4); }

/* ================= Yorum kuralları (Büyüme) =================
   Başlık rozetlerle birlikte sarar: telefonda "selam-de …" diye kesilip rozetler
   kayboluyordu. Dört eylem düğmesi dar ekranda 2×2 dizilir; yan yana dururken
   metne 160px kalıyordu. */
.kural { align-items: flex-start; }
.kural__no { flex: none; min-inline-size: 1.6em; padding-block-start: 3px; font-family: var(--mono); font-size: var(--f-xs); font-variant-numeric: tabular-nums; color: rgb(var(--metin-3)); text-align: end; }
.kural__baslik { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kural__yanit { color: rgb(var(--metin-2)); }
.kural__eylem { display: flex; gap: 4px; flex: none; }
.kural--eslesti { background: rgb(var(--vurgu) / .10); box-shadow: inset 0 0 0 1px rgb(var(--vurgu) / .55); }
.deneme-sonuc { display: flex; flex-direction: column; gap: var(--b-3); }
.deneme-sonuc__balonlar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Her tuş vuruşunda balon yeniden kurulur; giriş animasyonu burada titreme olurdu. */
.deneme-sonuc .balon { max-width: min(100%, 560px); animation: none; }
.deneme-sonuc .katlanir { margin-block-end: 0; }
@media (max-width: 560px) { .kural__eylem { display: grid; grid-template-columns: repeat(2, auto); } }

/* ================= Sohbet ================= */
.sohbet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-3); min-height: 60dvh; }
@media (min-width: 900px) { .sohbet { grid-template-columns: 300px minmax(0, 1fr); } }
@media (min-width: 1320px) { .sohbet { grid-template-columns: 300px minmax(0, 1fr) 268px; } }

.sohbet__liste { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid rgb(var(--cizgi) / .14); background: rgb(var(--yuzey) / .55); overflow: hidden; max-height: 74dvh; }
.sohbet__ara { padding: var(--b-3); border-block-end: 1px solid rgb(var(--cizgi) / .12); }
.sohbet__akis-liste { overflow-y: auto; flex: 1; }
.sohbet__oge {
  display: flex; gap: var(--b-3); align-items: center; padding: var(--b-3) var(--b-4); width: 100%;
  background: none; border: 0; border-inline-start: 2px solid transparent; color: inherit; font: inherit;
  text-align: start; cursor: pointer; border-block-end: 1px solid rgb(var(--cizgi) / .08);
  transition: background var(--gecis), border-color var(--gecis);
}
.sohbet__oge:hover { background: rgb(var(--vurgu) / .07); }
.sohbet__oge[aria-current="true"] { background: rgb(var(--vurgu) / .12); border-inline-start-color: rgb(var(--vurgu)); }
.sohbet__oge-govde { flex: 1; min-width: 0; }
.sohbet__oge-ad { font-weight: 650; font-size: var(--f-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet__oge-son { font-size: var(--f-xs); color: rgb(var(--metin-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet__oge-zaman { font-size: var(--f-xs); color: rgb(var(--metin-3)); white-space: nowrap; align-self: flex-start; }
.sohbet__okunmamis { min-width: 20px; height: 20px; border-radius: var(--r-tam); background: var(--altin-gecis); color: rgb(var(--vurgu-yz)); font-size: var(--f-xs); font-weight: 700; display: grid; place-items: center; padding-inline: 6px; box-shadow: 0 0 10px rgb(var(--vurgu) / .5); }

.sohbet__panel { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid rgb(var(--cizgi) / .14); background: rgb(var(--yuzey) / .5); overflow: hidden; max-height: 74dvh; }
.sohbet__bas { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) var(--b-4); border-block-end: 1px solid rgb(var(--cizgi) / .12); background: rgb(var(--yuzey-2) / .7); }
.sohbet__akis { flex: 1; overflow-y: auto; padding: var(--b-4); display: flex; flex-direction: column; gap: var(--b-2); scroll-behavior: smooth; }
.sohbet__gun { align-self: center; font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik); text-transform: uppercase; color: rgb(var(--metin-3)); padding: 4px 12px; border-radius: var(--r-tam); background: rgb(var(--bg-2)); border: 1px solid rgb(var(--cizgi) / .12); margin-block: var(--b-3) var(--b-1); }
.sohbet__yaz { display: flex; gap: var(--b-2); padding: var(--b-3); border-block-start: 1px solid rgb(var(--cizgi) / .12); background: rgb(var(--yuzey-2) / .7); align-items: flex-end; }
.sohbet__yaz .input { min-height: 44px; max-height: 140px; }
.sohbet__bilgi { display: none; }
@media (min-width: 1320px) { .sohbet__bilgi { display: flex; flex-direction: column; gap: var(--b-3); } }

/* Baloncuklar */
.balon {
  max-width: min(76%, 560px); padding: 10px var(--b-3); border-radius: 14px; font-size: var(--f-m);
  line-height: 1.5; white-space: pre-wrap; word-break: break-word; position: relative;
  animation: yukselKucuk 260ms cubic-bezier(.2, .8, .2, 1) both;
}
.balon--gelen { align-self: flex-start; background: rgb(var(--yuzey-3)); color: rgb(var(--metin)); border: 1px solid rgb(var(--cizgi) / .12); border-start-start-radius: 4px; }
.balon--giden { align-self: flex-end; background: var(--altin-gecis); color: rgb(var(--vurgu-yz)); font-weight: 500; border-end-end-radius: 4px; box-shadow: 0 2px 12px rgb(var(--vurgu) / .25); }
.balon--sistem { align-self: center; background: rgb(var(--bg-2)); color: rgb(var(--metin-3)); font-size: var(--f-xs); border: 1px dashed rgb(var(--cizgi) / .2); max-width: 90%; text-align: center; }
.balon__zaman { display: block; font-size: 10px; opacity: .7; margin-block-start: 4px; font-variant-numeric: tabular-nums; }
.balon__butonlar { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: var(--b-2); }
.balon__butonlar button {
  padding: 6px 12px; border-radius: var(--r-tam); font-size: var(--f-xs); font-weight: 650; cursor: pointer;
  border: 1px solid currentColor; background: rgb(0 0 0 / .12); color: inherit; font-family: inherit;
}
.balon__butonlar button:hover { background: rgb(0 0 0 / .22); }

/* ================= Telefon simülatörü ================= */
.telefon {
  width: min(320px, 100%); margin-inline: auto; border-radius: 34px; padding: 12px;
  background: linear-gradient(150deg, rgb(var(--yuzey-3)), rgb(var(--bg)));
  border: 1px solid rgb(var(--vurgu) / .3);
  box-shadow: var(--golge), inset 0 1px 0 rgb(var(--vurgu) / .18), var(--isik);
  position: relative;
}
/* Çentik */
.telefon::before { content: ''; position: absolute; inset-block-start: 20px; inset-inline-start: 50%; translate: -50% 0; width: 76px; height: 5px; border-radius: var(--r-tam); background: rgb(var(--bg)); box-shadow: inset 0 0 0 1px rgb(var(--vurgu) / .2); z-index: 2; }
.telefon__ekran {
  height: min(62dvh, 560px); overflow-y: auto; border-radius: 24px; padding: var(--b-5) var(--b-3) var(--b-3);
  background: rgb(var(--bg-2)); display: flex; flex-direction: column; gap: var(--b-2);
  box-shadow: inset 0 0 30px rgb(0 0 0 / .5);
}
/* Simülatörde "gelen" = kullanıcının yazdığı (sağda), "giden" = botun cevabı (solda) */
.telefon .balon--gelen { align-self: flex-end; background: var(--altin-gecis); color: rgb(var(--vurgu-yz)); border: 0; border-start-start-radius: 14px; border-end-end-radius: 4px; }
.telefon .balon--giden { align-self: flex-start; background: rgb(var(--yuzey-3)); color: rgb(var(--metin)); border: 1px solid rgb(var(--cizgi) / .12); box-shadow: none; font-weight: 400; border-end-end-radius: 14px; border-start-start-radius: 4px; }

/* ================= Akış şeması ================= */
.akis-duzen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-5); }
@media (min-width: 1180px) { .akis-duzen--test { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }

.sema { position: relative; display: flex; flex-direction: column; gap: 0; padding-block: var(--b-2); }
.sema__dugum {
  position: relative; display: flex; gap: var(--b-3); align-items: flex-start; padding: var(--b-3) var(--b-4);
  border-radius: var(--r); border: 1px solid rgb(var(--cizgi) / .16);
  background: linear-gradient(150deg, rgb(var(--yuzey-2)), rgb(var(--yuzey)));
  box-shadow: var(--golge-1); cursor: grab; transition: all var(--gecis);
}
.sema__dugum:hover { border-color: rgb(var(--vurgu) / .45); box-shadow: var(--golge-2), var(--isik); }
.sema__dugum--secili { border-color: rgb(var(--vurgu) / .7); box-shadow: var(--golge-2), var(--isik-guclu); }
.sema__dugum--suruklenen { opacity: .4; cursor: grabbing; }
.sema__dugum--hedef { border-color: rgb(var(--vurgu)); border-style: dashed; background: rgb(var(--vurgu) / .08); }
.sema__dugum--vurgulu { animation: belirt 1.1s ease-out 2; border-color: rgb(var(--vurgu)); }
.sema__no {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--f-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgb(var(--bg-2)); color: rgb(var(--vurgu)); border: 1px solid rgb(var(--vurgu) / .4);
}
.sema__govde { flex: 1; min-width: 0; }
.sema__tur { font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik); text-transform: uppercase; color: rgb(var(--vurgu)); }
.sema__ozet { font-size: var(--f-s); color: rgb(var(--metin-2)); overflow-wrap: anywhere; }
.sema__eylem { display: flex; gap: 2px; flex: none; }
.sema__tut { cursor: grab; color: rgb(var(--metin-3)); display: grid; place-items: center; padding: 4px; }
.sema__tut:active { cursor: grabbing; }
/* Düğümler arası bağlantı: dikey altın hat + akan noktalar */
.sema__bag { height: 26px; margin-inline-start: 34px; position: relative; }
.sema__bag::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 1px; background: linear-gradient(rgb(var(--vurgu) / .7), rgb(var(--vurgu) / .25)); }
.sema__bag::after { content: ''; position: absolute; inset-block-end: 0; inset-inline-start: -3px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--vurgu)); box-shadow: 0 0 8px rgb(var(--vurgu) / .8); animation: bagAk 2.4s ease-in-out infinite; }
@keyframes bagAk { 0% { inset-block-end: 100%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { inset-block-end: 0; opacity: 0; } }
.sema__dallar { display: flex; flex-direction: column; gap: var(--b-2); margin-inline-start: var(--b-6); padding-inline-start: var(--b-4); border-inline-start: 1px dashed rgb(var(--vurgu) / .35); }
.sema__dal {
  /* Sınıf düğümün kendisinde: hem <button> (hedefe git) hem <span> (tıklanmaz)
     aynı çipi kullanır. Önceki ".sema__dal button" seçicisi hiçbir şeye uymuyordu. */
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  max-width: 100%; padding: 5px 11px; border-radius: var(--r-tam);
  border: 1px solid rgb(var(--vurgu) / .35); background: rgb(var(--vurgu) / .10);
  color: rgb(var(--vurgu-2)); font: inherit; font-size: var(--f-xs); font-weight: 650;
  /* Telefonda uzun dal etiketi kutuya sığmıyordu; sarsın. */
  white-space: normal; text-align: start; overflow-wrap: anywhere;
  transition: background var(--gecis), border-color var(--gecis);
}
button.sema__dal { cursor: pointer; }
button.sema__dal:hover { background: rgb(var(--vurgu) / .2); border-color: rgb(var(--vurgu) / .7); }
span.sema__dal { cursor: default; }
.sema__ekle {
  align-self: flex-start; margin-inline-start: 22px; margin-block: var(--b-1);
  min-height: 34px; border-radius: var(--r-tam); border: 1px dashed rgb(var(--vurgu) / .45);
  background: rgb(var(--vurgu) / .07); color: rgb(var(--vurgu)); font: inherit; font-size: var(--f-s); font-weight: 650;
  padding-inline: var(--b-3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.sema__ekle:hover { background: rgb(var(--vurgu) / .16); border-style: solid; box-shadow: var(--isik); }
.sema__baslik-kutusu {
  padding: var(--b-3) var(--b-4); border-radius: var(--r); margin-block-end: var(--b-2);
  background: rgb(var(--vurgu) / .10); border: 1px solid rgb(var(--vurgu) / .35);
  display: flex; align-items: center; gap: var(--b-3); box-shadow: var(--isik);
}
.sema__kart-ust { display: flex; align-items: center; gap: var(--b-2); }

/* ================= Slaytlar (karusel) ================= */
.slayt {
  padding: var(--b-5); border-radius: var(--r); min-height: 150px; display: flex; flex-direction: column; gap: var(--b-2);
  background: linear-gradient(150deg, rgb(var(--yuzey-2)), rgb(var(--yuzey))); border: 1px solid rgb(var(--cizgi) / .16);
  position: relative; overflow: hidden;
}
.slayt--altin { background: var(--altin-gecis); color: rgb(var(--vurgu-yz)); border-color: rgb(var(--vurgu-2)); }
.slayt--acik { background: rgb(var(--yuzey-3)); }
.slayt__no { font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik); opacity: .7; }
.slayt__baslik { font-size: var(--f-l); font-weight: 700; letter-spacing: -.02em; }
.slayt__metin { font-size: var(--f-s); opacity: .9; margin: 0; }

/* ================= Grafik ================= */
.grafik { width: 100%; height: auto; display: block; overflow: visible; }
.grafik__alan { fill: rgb(var(--vurgu) / .14); }
.grafik__cizgi { fill: none; stroke: rgb(var(--vurgu)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgb(var(--vurgu) / .5)); }
.grafik__nokta { fill: rgb(var(--vurgu-2)); }
.grafik__cubuk { fill: rgb(var(--vurgu) / .55); }
.grafik__cubuk--etkin { fill: rgb(var(--vurgu)); }
.grafik__eksen { stroke: rgb(var(--cizgi) / .16); stroke-width: 1; }
.grafik__yazi { fill: rgb(var(--metin-3)); font-size: 10px; font-weight: 600; }
/* Seri anahtarı: renk asla tek taşıyıcı değil, yanında adı yazar. */
.grafik-anahtar { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f-xs); font-weight: 650; color: rgb(var(--metin-2)); }
.grafik-anahtar i { width: 10px; height: 3px; border-radius: 2px; flex: none; }

/* ================= Simge ================= */
.simge { flex: none; vertical-align: middle; }
.ikon { display: inline-grid; place-items: center; }


/* ---- Dokunma hedefleri ----
   Fare ile yoğunluk iyi, parmakla 44px gerekiyor. Yalnız kaba işaretleyicide
   büyütülür; masaüstünde satırlar sıkışık kalır. */
/* Tablo hücresindeki etiketsiz onay kutusuna tıklanabilir alan verir. */
.onay-hucre { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

@media (pointer: coarse) {
  .cip { min-height: 44px; }
  .sekme { min-height: 44px; }
  .bant__kapat { min-width: 44px; min-height: 44px; }
  .btn--kucuk { min-height: 40px; }
  .sema__tut, .sema__eylem .btn { min-width: 40px; min-height: 40px; }
  /* Etiketsiz onay kutusu (ör. puan kuralları tablosu) parmakla zor tutuluyordu. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .onay-hucre { min-width: 44px; min-height: 44px; }
}

/* Şema dal etiketi telefonda kutuya sığmıyordu; sarsın. */
.sema__dallar { min-width: 0; }

/* ================= Gönderilebilir karusel =================
   Simülatörde ve akış önizlemesinde kart şeridi. Gerçekte Instagram
   generic template, Telegram'da ardışık kart mesajları olarak gider. */
/* Karusel balonu sohbet sütununun tamamını alır: yoksa tek kart sığar ve
   şerit kaydırılabilir görünmez. */
.balon:has(.karusel-serit) { max-inline-size: 100%; inline-size: 100%; }
.karusel-serit {
  display: flex; gap: var(--b-2); overflow-x: auto; padding-block-end: var(--b-2);
  margin-block-start: var(--b-2); scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgb(var(--vurgu) / .4) transparent;
}
.karusel-kart {
  flex: none; inline-size: 165px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 5px; padding: var(--b-2);
  border: 1px solid rgb(var(--vurgu) / .3); border-radius: var(--r-2);
  background: rgb(var(--vurgu) / .06);
}
.karusel-kart__gorsel {
  inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-1); background: rgb(var(--metin-3) / .15);
}
.karusel-kart__baslik { font-weight: 700; font-size: var(--f-s); line-height: 1.35; }
.karusel-kart__alt { color: rgb(var(--metin-2)); font-size: var(--f-xs); line-height: 1.4; }
.karusel-kart__btn {
  display: block; margin-block-start: auto; padding: 7px 10px; border-radius: var(--r-1);
  border: 1px solid rgb(var(--vurgu) / .45); background: none; color: rgb(var(--vurgu-2));
  font: inherit; font-size: var(--f-xs); font-weight: 650; text-align: center;
  text-decoration: none; cursor: pointer; transition: background var(--gecis);
}
.karusel-kart__btn:hover { background: rgb(var(--vurgu) / .18); }
@media (pointer: coarse) { .karusel-kart__btn { min-height: 40px; } }

/* ================= Durum şeridi =================
   Bilgilendirici uyarılar tek satırda toplanır. Önce her biri tam bant olarak
   sayfanın tepesini yiyordu; kritik olmayan bir bilgi asıl içeriği ekranın
   altına itmemeli. Kritik olanlar (.bant) tam genişlikte kalır. */
.serit {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2);
  margin-block-end: var(--b-4);
}
.serit-cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 10px; border-radius: var(--r-tam);
  border: var(--kenarlik); background: var(--kat-2); box-shadow: var(--yukselti-1);
  font-size: var(--f-xs); font-weight: 600; color: rgb(var(--metin-2));
  line-height: 1.6;
}
.serit-cip--bilgi { color: rgb(var(--metin-2)); }
.serit-cip--bilgi .simge { color: rgb(var(--vurgu)); }
.serit-cip--uyari { border-color: rgb(var(--sari) / .4); }
.serit-cip--uyari .simge { color: rgb(var(--sari)); }
.serit-cip__yazi { white-space: nowrap; }
.serit-cip__eylem {
  border: 0; background: rgb(var(--vurgu) / .14); color: rgb(var(--vurgu-2));
  font: inherit; font-weight: 700; padding: 3px 10px; border-radius: var(--r-tam);
  cursor: pointer; transition: background var(--gecis);
}
.serit-cip__eylem:hover { background: rgb(var(--vurgu) / .28); }
.serit-cip__kapat {
  border: 0; background: none; color: inherit; opacity: .55; cursor: pointer;
  display: grid; place-items: center; padding: 2px; border-radius: var(--r-tam);
}
.serit-cip__kapat:hover { opacity: 1; }
@media (pointer: coarse) {
  /* Parmakla 44px: şerit telefonda tek satır olarak biraz yükselir ama
     iki tam banttan hâlâ çok daha az yer kaplar. */
  .serit-cip__eylem { min-height: 44px; display: inline-flex; align-items: center; }
  .serit-cip__kapat { min-width: 44px; min-height: 44px; }
}

/* ================= Çizgi grafik: ızgara, imleç, balon =================
   Izgara ve eksen geri planda kalır, veri öne çıkar. Fare bir güne yaklaşınca
   dikey imleç ve seri işaretçileri belirir, balon o günün değerlerini okur. */
.grafik-sarmal { position: relative; }
.grafik--cizgi { inline-size: 100%; block-size: auto; display: block; touch-action: pan-y; }
.grafik__izgara { stroke: var(--izgara); stroke-width: 1; }
.grafik__eksen { stroke: var(--eksen); stroke-width: 1; }
.grafik__yazi { fill: rgb(var(--metin-3)); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafik__imlec { stroke: rgb(var(--vurgu) / .55); stroke-width: 1; stroke-dasharray: 3 3; }
.grafik__isaret { stroke: rgb(var(--bg)); stroke-width: 2; }
.grafik-balon {
  position: absolute; inset-block-start: 4px; z-index: 2; pointer-events: none;
  min-inline-size: 132px; padding: var(--b-2) var(--b-3); border-radius: var(--r-kucuk);
  border: var(--kenarlik-2); background: var(--kat-2); box-shadow: var(--yukselti-3);
  font-size: var(--f-xs); line-height: 1.7;
}
.grafik-balon__gun { font-weight: 700; color: rgb(var(--metin)); margin-block-end: 2px; }
.grafik-balon__satir { display: flex; align-items: center; gap: 6px; }
.grafik-balon__satir i { inline-size: 9px; block-size: 9px; border-radius: 2px; flex: none; }
.grafik-balon__ad { color: rgb(var(--metin-2)); margin-inline-end: auto; }
.grafik-balon strong { font-variant-numeric: tabular-nums; color: rgb(var(--metin)); }

/* ================= Bölüm başlıkları =================
   "Bugün / Kurulum / Kanallar" düz birer h2'ydi; sayfa tek bir uzun akış gibi
   okunuyordu. Başlıktan sonra biten ince altın hat bölümleri birbirinden ayırır. */
#sayfa h2:not(.kart__baslik):not(.modal__baslik) {
  display: flex; align-items: center; gap: var(--b-3);
  font-size: var(--f-xl); letter-spacing: -.015em;
}
#sayfa h2:not(.kart__baslik):not(.modal__baslik)::after {
  content: ''; flex: 1; height: 1px; min-inline-size: 24px;
  background: linear-gradient(90deg, rgb(var(--vurgu) / .38), rgb(var(--vurgu) / 0) 70%);
}

/* ================= Odak ve basış =================
   Odak halkası her yerde aynı: altın, iki piksel, boşluklu. Klavyeyle gezen
   biri nerede olduğunu hep aynı işaretten okur. */
:focus-visible {
  outline: 2px solid rgb(var(--vurgu));
  outline-offset: 2px;
  border-radius: var(--r-kucuk);
}
/* Yönlendirici her sayfada başlığa odaklanır ki ekran okuyucu yeni sayfayı duyursun.
   Başlık etkileşimli değil; ilk açılışta çevresinde altın çerçeve çıkıyor, seçili gibi duruyordu. */
h1[tabindex="-1"]:focus { outline: none; }
.btn:active:not(:disabled), .cip:active, .sekme:active { transform: translateY(1px); }
.kart--tik:active { transform: translateY(-1px); }

/* Hareketi azaltma tercihi: kalkış ve basış geri bildirimi kapanır,
   renk/kenar geri bildirimi kalır — erişilebilirlik kaybolmaz. */
@media (prefers-reduced-motion: reduce) {
  .kart--tik:hover, .kart--tik:focus-visible, .sayac:hover,
  .btn:active:not(:disabled), .cip:active, .sekme:active, .kart--tik:active { transform: none; }
}