/* =============================================================
   Bikutranslate — bileşen katmanı
   Kural: yalnız transform/opacity animasyonu; tek easing ailesi
   (--ease-settle / --ease-swift, brand.css). Gradyan/glassmorphism yok.
   ============================================================= */

:root {
  /* Vurgu üstündeki metin: temayla DÖNMEZ — vermilyon her iki temada aynı.
     #E2442F / #121114 = 4,58 (AA). Beyaz metin 4,12 ile kalırdı. */
  --on-shu: #121114;
}

/* ========================== düğmeler ========================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.72em 1.25em;
  font-size: var(--fs-sm); font-weight: 650; line-height: 1;
  letter-spacing: 0.002em;
  border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: transform 180ms var(--ease-swift), background-color 180ms var(--ease-swift),
              border-color 180ms var(--ease-swift), opacity 180ms var(--ease-swift);
  will-change: transform;
}
.btn--lg { padding: 0.92em 1.6em; font-size: var(--fs-base); }
.btn--primary { background: var(--shu); color: var(--on-shu); }
.btn--primary:hover { background: color-mix(in oklab, var(--shu) 88%, white); }
.btn--ghost { color: var(--paper); border: 1px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--paper-2); background: var(--shade); }
.btn:active { transform: translateY(1px); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }

/* =========================== başlık =========================== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ease-swift);
}
.site-head.is-stuck { border-bottom-color: var(--line); }
.site-head__in {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 4.4rem;
}
.nav {
  display: flex; gap: var(--sp-5); margin-inline: auto;
  font-size: var(--fs-sm); font-weight: 500;
}
.nav a { color: var(--paper-2); text-decoration: none; padding-block: 0.55rem;
  transition: color 160ms var(--ease-swift); }
.nav a:hover { color: var(--paper); }
.nav__login { display: none; }
.head-cta { display: flex; gap: var(--sp-3); align-items: center; margin-left: auto; }
.nav + .head-cta { margin-left: 0; }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* Mobil menü: JS yokken düğme görünmez, bağlantılar yatay şerit olarak kalır.
   JS varken panel yalnız transform/opacity ile açılır. */
.menu-toggle {
  display: none; flex: none; width: 2.75rem; height: 2.75rem;
  place-items: center; padding: 0;
  color: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.menu-toggle__lines { position: relative; display: block; width: 1.125rem; height: 0.875rem; }
.menu-toggle__lines i {
  position: absolute; left: 0; width: 100%; height: 2px;
  border-radius: 2px; background: currentColor;
  transform-origin: center;
  transition: transform 220ms var(--ease-settle), opacity 160ms var(--ease-swift);
}
.menu-toggle__lines i:nth-child(1) { top: 0; }
.menu-toggle__lines i:nth-child(2) { top: 0.375rem; }
.menu-toggle__lines i:nth-child(3) { top: 0.75rem; }
.site-head.is-menu-open .menu-toggle__lines i:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.site-head.is-menu-open .menu-toggle__lines i:nth-child(2) { opacity: 0; transform: scaleX(0.5); }
.site-head.is-menu-open .menu-toggle__lines i:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

/* ---------------------- marka kilidi ------------------------- */
.lockup { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
.lockup__mark { flex: none; }
.lockup__name { display: grid; }
/* BIKU sözcük markası: vermilyon TEK YERDE, damganın kendisinde durur.
   Önceki isimde son harf vurgu rengindeydi; BIKU'da harf vurgusu keyfi
   kalıyor (mark zaten B taşıyor) → kaldırıldı. */
.lockup__word {
  font-size: 1.32rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.06em; font-variation-settings: "wdth" 100;
}
.lockup__sub {
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--paper-2); margin-top: 5px;
}
.lockup--sm .lockup__word { font-size: 1.05rem; }
.lockup--sm .lockup__sub { font-size: 0.58rem; margin-top: 4px; }

/* damga inişi + B çizimi (brand/logo.svg R4 geometrisi).
   Taban durum TAM GÖRÜNÜR; gizli hâl yalnız keyframe from'unda.
   Çizim sırası markanın kendi kuruluş sırasıdır: gövde → üst çanak → alt çanak. */
#seal-wrap { display: block; animation: stamp 560ms var(--ease-settle); transform-origin: 50% 55%; }
@keyframes stamp {
  from { transform: scale(1.28) translateY(-6px); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
#seal-wrap .arm { stroke-dasharray: 1; animation: draw 340ms var(--ease-swift) backwards; }
#biku-stem   { animation-delay: 420ms; }
#biku-bowl-1 { animation-delay: 560ms; }
#biku-bowl-2 { animation-delay: 700ms; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) {
  .lockup:hover #seal-wrap { transform: scale(1.045); transition: transform 240ms var(--ease-settle); }
}
@media (prefers-reduced-motion: reduce) {
  #seal-wrap, #seal-wrap .arm { animation: none; }
  #seal-wrap .arm { stroke-dashoffset: 0; }
}

/* ============================ hero ============================ */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--band-y); overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 1rem + 6vw, 5rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
}
/* 1100 px'te tek sütuna geçiyoruz (940 değil): 1024 px'te metin sütunu 476 px'e
   düşüyor ve başlığın ikinci satırı kabı dolduruyordu. Ölçüldü, tahmin değil. */
@media (max-width: 1100px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__title { margin-bottom: var(--sp-5); }
.hero__title em { display: inline-block; }
.lede {
  font-size: var(--fs-md); line-height: 1.5; color: var(--paper-2);
  max-width: var(--measure-tight); margin-bottom: var(--sp-6);
}
/* üç adımlık mini şerit — ilk ekranda "ne oluyor?" cevabı.
   Oklar ::after ile ÇİZİLİR (content: ""), metin olarak değil: CSS içeriğini
   bazı ekran okuyucular seslendirir ve "sağ ok" gürültüsü doğardı. */
.hero__steps {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3); margin: calc(-1 * var(--sp-3)) 0 var(--sp-5);
  font-size: var(--fs-sm); font-weight: 650; color: var(--paper-2);
}
.hero__steps li { display: inline-flex; align-items: center; gap: var(--sp-3); max-width: none; }
.hero__steps li:not(:last-child)::after {
  content: ""; flex: none; width: 0.4rem; height: 0.4rem;
  border-right: 1.6px solid var(--shu-text); border-top: 1.6px solid var(--shu-text);
  transform: rotate(45deg);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
/* "ücretsiz" hissi düğmenin DİBİNDE durur: düğme metnini uzatmak yerine. */
.hero__hint { font-size: var(--fs-xs); color: var(--paper-2); margin-bottom: var(--sp-7); }

/* ⚠ Eski üç sütunlu tanım listesi (KAYNAK DİL / HEDEF DİL / SAYFA BAŞI)
   kaldırıldı: başlıklar jargon, değerler kodlanmıştı. Yerine bir cümle +
   ince bir yan satır. Tek sütun olduğu için 320 px'te de kırılmıyor. */
.hero__facts {
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
  max-width: var(--measure-tight);
}
.hero__facts__say { font-size: var(--fs-base); line-height: 1.5; color: var(--paper-2); }
.hero__facts__say b { color: var(--paper); font-weight: 650; }
.hero__facts__sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--paper-2);
}
/* Ayraç noktası ::before ile ÇİZİLİR (metne girmez): ekran okuyucu
   "orta nokta" diye okumasın, sarmalandığında da kaybolsun. */
.hero__facts__price { position: relative; padding-left: 0.95rem; }
.hero__facts__price::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: var(--shu);
}
.hero__facts .num { font-size: 1.15em; font-weight: 650; color: var(--paper); }

/* iki sayfa üst üste — arkada orijinal, önde Türkçe (damga gibi hafif eğik) */
.hero__art { margin: 0; }
/* Gösteri varlıklarıyla AYNI oran (903x1275) — 12/17 değil: kahraman
   yığınındaki iki sayfa object-fit:cover ile kırpılıyordu. */
.page-stack { position: relative; aspect-ratio: 903 / 1275; max-width: 27rem; margin-inline: auto; }
.page-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 6px;
  box-shadow: var(--shadow-2);
}
.page-stack__back {
  transform: rotate(-3.4deg) translate(-6%, -1.5%) scale(0.965);
  opacity: 0.5; filter: grayscale(1);
}
.page-stack__front { transform: rotate(1.6deg); }
@media (max-width: 560px) {
  /* dar ekranda arka sayfanın -6% kaçıklığı görüntü alanını taşırıyordu */
  .page-stack { max-width: min(20rem, 78vw); }
  .page-stack__back { transform: rotate(-2.6deg) translate(-3.5%, -1%) scale(0.97); }
  .page-stack__front { transform: rotate(1.1deg); }
}
@media (prefers-color-scheme: light) {
  .page-stack img { border: 1px solid var(--line); }
}

/* ====================== bölüm başlıkları ====================== */
.sec-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); max-width: 44rem; }
.sec-head__lede { margin-top: var(--sp-4); color: var(--paper-2); font-size: var(--fs-md); line-height: 1.5; }
/* Ledeye göre bir kademe küçük, kenar çizgisiyle ayrılmış açıklama notu:
   "bu standart mı, ücretli mi?" gibi sınır çizen cümleler için. */
.sec-head__note {
  margin-top: var(--sp-4); padding-left: var(--sp-4);
  border-left: 2px solid var(--line-strong);
  font-size: var(--fs-sm); color: var(--paper-2); line-height: 1.6;
}

/* ======================= önce / sonra ========================= */
/* Sayfa 12:17 — 40rem genişlikte 907 px boy eder ve dizüstü ekranına sığmaz.
   Yükseklikten de sınırlıyoruz ki kullanıcı ayracı sürüklerken sayfanın
   tamamını görebilsin. */
.ba-shell { max-width: min(40rem, 58vh); margin-inline: auto; }
.ba {
  position: relative; aspect-ratio: 903 / 1275;
  border-radius: 8px; overflow: hidden;
  background: var(--shade);
  box-shadow: var(--shadow-2);
  touch-action: pan-y;
  cursor: ew-resize;
  --pos: 52%;
}
.ba__layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; -webkit-user-drag: none;
}
/* ---- damga-oturması geçişi (sayfa / hedef dil değişimi) ----
   Kural: YALNIZ transform + opacity. Ölçek 1.02 → 1, damganın kâğıda
   oturması gibi; süre 360 ms (--ease-settle'ın kendi bandı). Hayalet katman
   eskiyi tutar, yenisi üstüne oturur → ara karede zemin görünmez. */
.ba__layer:not(.ba__layer--ghost) {
  transition: opacity 300ms var(--ease-swift), transform 360ms var(--ease-settle);
}
.ba__layer.is-entering {
  transition: none;
  opacity: 0; transform: scale(1.02);
}
/* ⚠ Hayalet ALTTA durur (z-index YOK): gelen görsel onun ÜSTÜNDE 0→1
   solar. Hayaleti üste alırsanız yeni sayfayı örter ve geçiş hiç görünmez. */
.ba__layer--ghost {
  opacity: 0;
  transition: opacity 300ms var(--ease-swift);
}
.ba__layer--ghost.is-on { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ba__layer, .ba__layer--ghost { transition: none !important; }
  .ba__layer.is-entering { opacity: 1; transform: none; }
}
.ba__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2.75rem; margin-left: -1.375rem; background: none;
  cursor: ew-resize; touch-action: none;
}
/* çizgi ayrı katman: dokunma hedefi 44 px kalırken görsel 2 px */
.ba__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: var(--shu);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  display: grid; place-items: center;
  background: var(--shu); color: var(--on-shu);
  border-radius: 50%; box-shadow: var(--shadow-1);
  transition: transform 200ms var(--ease-settle);
}
.ba__handle:hover .ba__grip,
.ba__handle:focus-visible .ba__grip { transform: scale(1.1); }
.ba.is-dragging .ba__grip { transform: scale(0.94); }

.ba__tag {
  position: absolute; top: 0.7rem; z-index: 2;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgb(18 17 20 / 0.82); color: #EDE8DF;
  transition: opacity 220ms var(--ease-swift);
}
.ba__tag--l { left: 0.7rem; }
.ba__tag--r { right: 0.7rem; }
.ba.is-dragging .ba__tag { opacity: 0.25; }

.ba__note {
  margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--paper-2);
  max-width: 46rem; margin-inline: auto; text-align: center;
}
/* CC-BY atfı: lisansın ŞARTI, süs değil — bu yüzden gösterinin dibinde,
   her dilde ve bağlantılı durur. Notun bir kademe altında ama silik değil. */
/* ⚠ margin-inline:auto ŞART: base.css `p`'ye `max-width: var(--measure)`
   veriyor → text-align:center dar kutunun İÇİNDE ortalar, kutu solda kalır
   (ölçüldü: satır 1216 px'lik kabın solunda duruyordu). */
.ba__credit {
  margin: var(--sp-3) auto 0; max-width: 46rem;
  font-size: var(--fs-xs); color: var(--paper-2);
  text-align: center;
}
.ba__credit a { color: var(--paper-2); text-underline-offset: 0.2em; }
.ba__credit a:hover { color: var(--shu-text); }

/* Balon dışı metin rozeti: gösterinin tek cümlelik iddiası. */
.demo__badge {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: calc(-1 * var(--sp-2)) auto var(--sp-5);
  padding: 0.42rem 0.85rem; width: max-content; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--shade);
  font-size: var(--fs-xs); font-weight: 600; color: var(--paper);
  text-align: center;
}
.demo__badge__ico { display: grid; place-items: center; flex: none; color: var(--shu-text); }
@media (max-width: 560px) {
  .demo__badge { border-radius: var(--radius-sm); }
}

/* Kaydırmayla çizilen bölüm ayracı — SADE tutulan tek örnek: gösteri
   başlığının altında ince bir şerit soldan sağa çizilir. `.reveal`
   gözlemcisi zaten `is-in` ekliyor, ek JS yok; transform-only. */
.sec-rule {
  display: block; height: 2px; width: min(7rem, 40%);
  margin-top: var(--sp-5);
  background: var(--shu);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 720ms var(--ease-settle);
}
.sec-rule.is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .sec-rule { transition: none; transform: scaleX(1); }
}
/* Büyüteç KALDIRILDI (kullanıcı kararı): yakın plan kanıtı artık "dizgi
   ayrıntısı" karelerinde duruyor; büyüteç yalnız ince imleçte çalışıyordu,
   dokunmatikte hiç yoktu ve sürükleme hedefiyle yarışıyordu. */

/* ------------------- gösteri denetimleri ---------------------- */
.demo__controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
}
.demo__lang { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; }
.demo__langlbl {
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-2);
}
/* Ok, sarmalayıcının SON öğesi seçim kutusu olduğu için onun sağ boşluğuna denk
   gelir — ayrı bir sarmalayıcı elemana gerek kalmıyor. */
.demo__lang::after, .langsel::after {
  content: ""; position: absolute; right: 0.72rem; top: 50%;
  width: 0.4rem; height: 0.4rem; margin-top: -0.32rem;
  border-right: 1.6px solid var(--paper-2); border-bottom: 1.6px solid var(--paper-2);
  transform: rotate(45deg); pointer-events: none;
}
.sel, .langsel__sel {
  -webkit-appearance: none; appearance: none;
  min-height: 2.75rem;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.1;
  color: var(--paper); background: var(--ink-surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.56em 1.9rem 0.56em 0.85em;
  cursor: pointer;
  transition: border-color 160ms var(--ease-swift);
}
.band--surface .sel { background: var(--ink-bg); }
.sel:hover, .langsel__sel:hover { border-color: var(--paper-2); }
/* Açılır liste yerel çizilir; koyu temada okunur kalması için açıkça boyanır. */
.sel option, .langsel__sel option { background: var(--ink-surface); color: var(--paper); }

/* başlıktaki site dili değiştiricisi */
.langsel { position: relative; display: inline-flex; align-items: center; flex: none; }
.langsel__ico {
  position: absolute; left: 0.62rem; display: grid; place-items: center;
  color: var(--paper-2); pointer-events: none;
}
.langsel__sel { padding-left: 2.15rem; background: transparent; font-weight: 500; }
.site-head.is-stuck .langsel__sel { background: transparent; }

/* ------------------------ sekme şeridi ------------------------ */
.seg {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--shade); border: 1px solid var(--line);
  border-radius: 999px;
}
.seg--wrap { border-radius: var(--radius); justify-content: center; }
.seg__b {
  min-height: 2.75rem;
  padding: 0.5em 1.05em; border-radius: 999px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.1; white-space: nowrap;
  color: var(--paper-2);
  transition: color 160ms var(--ease-swift), background-color 160ms var(--ease-swift);
}
.seg__b:hover { color: var(--paper); }
.seg__b.is-on { background: var(--shu); color: var(--on-shu); }

/* ------------------- bağlam farkı (karşılaştırma) ------------- */
.ctx { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
/* Ölçü AÇIKÇA yazılır: base.css'te `li` için --measure (68ch) var ve satır
   burayı sessizce ~1000 px'te kesiyordu. Aynı genişlik, ama artık karar. */
.ctx__row { border-top: 1px solid var(--line); padding-top: var(--sp-5); max-width: 62rem; }
.ctx__src { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.65rem; margin-bottom: var(--sp-4); }
.ctx__srclbl {
  font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-2);
}
/* İtalik YOK: Archivo'nun gerçek italiği yok, tarayıcı yatırınca sahte eğim
   üretir. Ayrım kalınlık + tırnakla kuruluyor (base.css'teki em kuralıyla
   aynı gerekçe). */
.ctx__word { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.ctx__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 640px) { .ctx__pair { grid-template-columns: 1fr; } }
.ctx__card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-4); background: var(--ink-bg);
}
.band--surface .ctx__card { background: var(--ink-surface); }
.ctx__card--ours { border-color: color-mix(in oklab, var(--shu) 58%, transparent); }
.ctx__lbl {
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-2); margin-bottom: var(--sp-2);
}
.ctx__card--ours .ctx__lbl { color: var(--shu-text); }
.ctx__txt { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--paper-2); }
.ctx__card--ours .ctx__txt { color: var(--paper); }
.ctx__why { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--paper-2); }

/* --------------------- aynı balon, çok dil -------------------- */
.polyglot { display: grid; gap: var(--sp-5); justify-items: center; }
.polyglot__stage { margin: 0; width: 100%; max-width: 38rem; }
.polyglot__stage img {
  width: 100%; height: auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.polyglot__cap {
  margin-top: var(--sp-3); text-align: center;
  font-size: var(--fs-sm); color: var(--paper-2); max-width: none;
}

/* -------------------------- bildirim -------------------------- */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); z-index: 200;
  max-width: min(30rem, calc(100% - 2rem));
  padding: 0.8rem 1.15rem; border-radius: var(--radius-sm);
  background: var(--ink-raised); color: var(--paper);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); text-align: center;
  opacity: 0; transform: translate3d(-50%, 12px, 0);
  transition: opacity 240ms var(--ease-swift), transform 300ms var(--ease-settle);
}
.toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ====================== dizgi ayrıntısı ======================= */
.detail-grid {
  display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

.detail { margin: 0; }
.detail__frame {
  background: #fff; border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
}
.detail__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.detail h3 { margin-bottom: var(--sp-2); }
.detail p { font-size: var(--fs-sm); color: var(--paper-2); line-height: 1.6; }
.glyph-row {
  display: block; font-size: 1.55rem; font-weight: 600; line-height: 1;
  color: var(--shu-text); margin-bottom: var(--sp-3);
  font-variation-settings: "wdth" 100;
}

/* ========================== avantajlar ======================== */
.feat-grid {
  display: grid; gap: clamp(1.5rem, 0.8rem + 2vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }

.feat { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.feat__ico { display: block; width: 2rem; height: 2rem; margin-bottom: var(--sp-4); color: var(--shu-text); }
.feat__ico svg { width: 100%; height: 100%; }
.feat h3 { margin-bottom: var(--sp-2); }
.feat p { font-size: var(--fs-sm); color: var(--paper-2); line-height: 1.6; }

/* ======================== nasıl çalışır ======================= */
.steps {
  display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: step;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: var(--sp-6); }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line-strong);
  transform-origin: left center;
  transition: transform 720ms var(--ease-settle);
  transition-delay: var(--d, 0ms);
}
.js .step::before { transform: scaleX(0); }
.js .step.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js .step::before { transform: scaleX(1); } }
.step__n {
  display: block; font-size: var(--fs-lg); font-weight: 800; line-height: 1;
  color: var(--shu-text); margin-bottom: var(--sp-3);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--paper-2); line-height: 1.6; }

/* =========================== kredi ============================ */
/* Kredi/fiyat metni tek sunucu bayrağıyla kapılanır. Varsayılan KAPALI;
   doğrudan statik `index.html` adresi de veri özniteliğini işleyemediği için
   aynı kapalı güvenli varsayılanı alır. Metin DOM'da korunur, =1 ile döner. */
html:not([data-kredi-ui="1"]) .kredi-ui { display: none !important; }
html[data-kredi-ui="1"] .kredi-ui--kapali { display: none !important; }

.credit {
  display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}
@media (max-width: 900px) { .credit { grid-template-columns: 1fr; } }

.calc {
  background: var(--ink-surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
}
.band--surface .calc { background: var(--ink-bg); }
.calc__label {
  display: block; font-size: var(--fs-xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-2);
}
.calc__readout { display: flex; align-items: baseline; gap: 0.4rem; margin: var(--sp-2) 0 var(--sp-3); }
.calc__pages { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.calc__unit { color: var(--paper-2); font-size: var(--fs-md); }

/* aralık girişi — iki tarayıcı ailesi ayrı ayrı biçimlenir */
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: none; cursor: pointer; }
.calc__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.calc__range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.4rem; height: 1.4rem; margin-top: -0.5rem;
  border-radius: 50%; background: var(--shu); border: 3px solid var(--ink-surface);
  transition: transform 160ms var(--ease-swift);
}
.calc__range::-moz-range-thumb {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--shu);
  border: 3px solid var(--ink-surface); transition: transform 160ms var(--ease-swift);
}
.calc__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.calc__range:hover::-moz-range-thumb { transform: scale(1.12); }

.switch { position: relative; display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: var(--sp-5) 0; cursor: pointer; }
/* Kutu 0×0 değil, anahtarın ÜSTÜNDE gerçek boyutlu ve saydam: hem imleç hem
   otomasyon hem yardımcı teknoloji için tıklanabilir bir hedef kalıyor. */
.switch input {
  position: absolute; left: 0; top: 0; margin: 0; opacity: 0; cursor: pointer;
  width: 2.6rem; height: 1.5rem;
  z-index: 1;   /* .switch__box konumlandırılmış ve DOM'da sonra: üstte kalmalı */
}
.switch__box {
  flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px;
  background: var(--line-strong); position: relative;
  transition: background-color 200ms var(--ease-swift);
}
.switch__box::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--paper);
  transition: transform 220ms var(--ease-settle);
}
.switch input:checked + .switch__box { background: var(--shu); }
.switch input:checked + .switch__box::after { transform: translateX(1.1rem); background: var(--on-shu); }
.switch input:focus-visible + .switch__box { outline: 2px solid var(--shu-text); outline-offset: 3px; }
.switch__txt b { display: block; font-size: var(--fs-sm); font-weight: 650; }
.switch__txt small { display: block; font-size: var(--fs-xs); color: var(--paper-2); line-height: 1.5; margin-top: 2px; }

.calc__sum { border-top: 1px solid var(--line); padding-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.calc__sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
/* [hidden] display:flex tarafından eziliyordu — ek bağlam satırı kapalıyken de görünüyordu */
.calc__sum > div[hidden] { display: none; }
.calc__sum dt { color: var(--paper-2); font-size: var(--fs-sm); }
.calc__sum dd { font-size: var(--fs-sm); font-weight: 600; max-width: none; }
.calc__sum .disc { color: var(--shu-text); }
.calc__total { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.calc__total dt { color: var(--paper); font-weight: 650; font-size: var(--fs-base); }
.calc__total dd { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; }
.calc__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--paper-2); }

.tiers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-5); }
.tier {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: 0.7rem 1rem; background: var(--ink-bg); font-size: var(--fs-sm);
  transition: background-color 220ms var(--ease-swift);
}
.band--surface .tier { background: var(--ink-surface); }
.tier__r { color: var(--paper-2); }
/* Etkin kademe vurgusu ÖLÇÜLEREK ayarlandı (tahminle değil — ilk deneme
   4,39'da kaldı). Aydınlık temada --shu-text (#C93A26) düz kâğıtta 4,53 ile
   AA'yı kıl payı geçiyor, ama %14 şu tenli zeminde 3,88'e düşüyordu; satır
   ~15 px olduğu için "büyük metin" muafiyeti de YOK.
   Ölçüm (aydınlık / koyu, metin-zemin oranı):
     %14 tint: shu-text 3,88 ✗ / 5,16      %10: shu-deep 4,59 / —
     %8  tint: shu-deep 4,69 ✓ / shu-text 5,49 ✓   ← seçilen
   Vurgunun taşıyıcısı zaten kalın ağırlık + vurgu rengi; tenin %14'ten %8'e
   inmesi durumu görünür bırakır. */
.tier.is-active { background: color-mix(in oklab, var(--shu) 8%, var(--ink-bg)); }
.tier.is-active .tier__r { color: var(--shu-text); font-weight: 650; }
@media (prefers-color-scheme: light) {
  .tier.is-active .tier__r { color: var(--shu-deep); }
}

.credit__start { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }
.credit__free { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--sp-3); }
.credit__free .num { color: var(--shu-text); }
.credit__start p { font-size: var(--fs-sm); color: var(--paper-2); margin-bottom: var(--sp-4); }

/* ========================== okuma ============================= */
.reader {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
}
@media (max-width: 900px) { .reader { grid-template-columns: 1fr; } }
.reader__copy p { color: var(--paper-2); font-size: var(--fs-md); line-height: 1.55; margin-top: var(--sp-4); }
.ticks { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.ticks li { position: relative; padding-left: 1.6rem; font-size: var(--fs-sm); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--shu);
}

.device {
  max-width: 19rem; margin-inline: auto;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--ink-bg); padding: 0.6rem; box-shadow: var(--shadow-2);
}
.device__bar { display: flex; gap: 5px; padding: 0 0.2rem 0.55rem; }
.device__bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.device__screen {
  border-radius: 10px; overflow: hidden; aspect-ratio: 10 / 15;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.device__screen img { width: 100%; object-fit: cover; object-position: top center; }

/* ============================ sss ============================= */
.faq { border-top: 1px solid var(--line); }
.product-note {
  max-width: 62ch; margin: var(--sp-6) auto 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--line); color: var(--paper-2);
  font-size: var(--fs-sm); text-align: center;
}
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-md); font-weight: 600; line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 160ms var(--ease-swift);
}
.qa summary::after {
  content: ""; flex: none; width: 0.85rem; height: 0.85rem; margin-left: auto; margin-top: 0.3em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms var(--ease-settle);
  color: var(--paper-2);
}
.qa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qa summary:hover { color: var(--shu-text); }
.qa__body { padding-bottom: var(--sp-5); }
.qa__body p { color: var(--paper-2); max-width: var(--measure); }
/* açılış: yalnız tıklamada çalışır, kaydırmada değil */
.qa[open] .qa__body { animation: qa-in 320ms var(--ease-settle); }
@keyframes qa-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* ========================= son çağrı ========================== */
.cta-band__in {
  text-align: center; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-surface);
}
.cta-band__in p { margin: var(--sp-4) auto var(--sp-6); color: var(--paper-2); font-size: var(--fs-md); max-width: 38rem; }

/* =========================== altlık ========================== */
.site-foot { border-top: 1px solid var(--line); padding-top: var(--sp-8); }
.site-foot__in {
  display: grid; gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  padding-bottom: var(--sp-8);
}
@media (max-width: 760px) { .site-foot__in { grid-template-columns: 1fr; } }
.foot-brand p { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--paper-2); max-width: 22rem; }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 480px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-nav h2 {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-2); margin-bottom: var(--sp-3);
  font-variation-settings: "wdth" 100;
}
.foot-nav ul { display: grid; gap: 0.15rem; }
.foot-nav a { font-size: var(--fs-sm); color: var(--paper); text-decoration: none;
  display: inline-block; padding-block: 0.28rem; }
.foot-nav a:hover { color: var(--shu-text); }
.site-foot__base {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  padding-block: var(--sp-5); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--paper-2);
}
.site-foot__base p { max-width: 32rem; }

/* ================== dar ekran düzeltmeleri (EN SONDA) ==================
   Kaynak sırası bilinçli: başlık, sekme ve hesaplayıcı kuralları burada aynı
   özgüllükteki masaüstü değerlerinin üstüne oturur. */
@media (max-width: 1040px) {
  .site-head__in {
    position: relative; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  }
  .nav {
    order: 3; display: flex; flex-wrap: nowrap; width: 100%;
    gap: var(--sp-2); margin-inline: 0; padding-bottom: var(--sp-2);
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .nav a {
    display: inline-flex; align-items: center; flex: none;
    min-height: 2.75rem; padding: 0.55rem 0.75rem;
  }
  .nav__login { display: inline-flex; }
  .nav + .head-cta { margin-left: auto; }
  .head-cta .hide-sm { display: none; }

  .js .site-head__in { flex-wrap: nowrap; }
  .js .menu-toggle { display: grid; }
  .js .nav {
    position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 5;
    display: grid; width: auto; max-height: calc(100dvh - 4.5rem);
    gap: 0; margin: 0; padding: var(--sp-2);
    overflow-x: visible; overflow-y: auto;
    background: var(--ink-surface);
    border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-2);
    visibility: hidden; pointer-events: none;
    opacity: 0; transform: translate3d(0, -0.5rem, 0);
    transition: opacity 180ms var(--ease-swift), transform 240ms var(--ease-settle);
  }
  .js .nav a {
    width: 100%; padding-inline: var(--sp-4);
    border-radius: var(--radius-sm);
  }
  .js .nav a:hover { background: var(--shade); }
  .js .nav__login {
    margin-top: var(--sp-2); padding-top: calc(0.55rem + var(--sp-2));
    border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
  .js .site-head.is-menu-open .nav {
    visibility: visible; pointer-events: auto;
    opacity: 1; transform: none;
  }
}

@media (max-width: 600px) {
  .polyglot { min-width: 0; width: 100%; }
  #lang-tabs {
    width: 100%; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  #lang-tabs .seg__b { flex: none; scroll-snap-align: center; }
}

@media (max-width: 560px) {
  .site-head__in { min-height: 4rem; gap: var(--sp-2); }
  .head-cta { gap: var(--sp-2); }
  .head-cta .btn { padding-inline: 0.9rem; }
  .langsel__sel {
    width: 7.1rem; padding: 0.5em 1.45rem 0.5em 1.85rem;
  }
  .langsel__ico { left: 0.5rem; }
  .langsel::after { right: 0.6rem; }

  .hero { padding-top: 2.75rem; }
  .hero__grid { gap: var(--sp-8); }
  .hero__title em { display: inline; }
  .hero__facts__sub {
    flex-direction: column; align-items: flex-start; gap: var(--sp-1);
  }
  .hero__facts__price { padding-left: 0; }
  .hero__facts__price::before { display: none; }

  .demo__controls {
    display: grid; justify-items: stretch; gap: var(--sp-3);
  }
  #demo-pages {
    width: 100%; max-width: 100%; flex-wrap: nowrap;
    justify-content: space-between; overflow-x: auto;
    overscroll-behavior-inline: contain; scrollbar-width: thin;
  }
  #demo-pages .seg__b { flex: 1 0 auto; }
  .demo__lang { justify-content: space-between; width: 100%; }
  .demo__lang .sel { min-width: 8.75rem; }
  .demo__badge { width: 100%; }

  .calc__sum > div { align-items: flex-start; gap: var(--sp-2); }
  .calc__sum dt { min-width: 0; }
  .calc__sum dd { flex: none; white-space: nowrap; text-align: right; }
  .tier { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .tier > span:first-child { min-width: 0; }
  .tier__r { flex: none; white-space: nowrap; }

  .qa summary { gap: var(--sp-3); padding-block: 1.25rem; }
  .qa summary span { min-width: 0; overflow-wrap: anywhere; }
}

/* 430 ve altında sözcük markası düşer, damga kalır — marka zaten damgadır. */
@media (max-width: 430px) {
  .lockup__name { display: none; }
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .seg__b { padding-inline: 0.8em; }
  .calc { padding: var(--sp-4); }
  .credit__start { padding: var(--sp-4); }
  .cta-band__in { padding-inline: var(--sp-4); }
}

@media (max-width: 390px) {
  .lockup__mark svg { width: 2.25rem; height: auto; }
  .langsel__sel { width: 6.75rem; }
  .head-cta .btn { padding-inline: 0.75rem; }
}