/* ============================================================
   Keyla web · sıcak kağıt + mürekkep, poster tipografi.
   Kural: hareket az ama iyi yerde. Sayfa boyunca tek bir
   kompozit katman zinciri; scroll sırasında hiçbir şey
   yeniden boyanmaz (fixed overlay / blend / backdrop yok).
   Renkler App/Sources/Theme.swift ile birebir.
   ============================================================ */

:root {
  --ink:        #0F0F14;
  --ink-2:      #15151C;
  --paper:      #F4F0E6;
  --surface:    #FFFEFA;
  --cream:      #F2EDE0;
  --coral:      #FF5938;
  --coral-deep: #E0421F;
  --lime:       #B5EB4A;
  --lime-deep:  #548C05;
  --violet:     #A19CFF;
  --violet-deep:#736BEB;

  --radius: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --rule: rgba(15, 15, 20, .12);

  /* Uygulamadaki poster tipografisi SF Pro Compressed Heavy; web'de en yakın
     karşılığı bu. (Anton daha sıkışıktı ama Türkçe şapkaları — İ, Ö, Ğ —
     harflerden çok yukarıda durup bir üst satıra giriyordu.) */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --display-weight: 800;
  --font-body: "Instrument Sans", "Helvetica Neue", sans-serif;

  color-scheme: light;
  interpolate-size: allow-keywords;
}

/* ---------- taban ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
a { color: inherit; }

::selection { background: var(--coral); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container.narrow { max-width: 780px; }

.skip {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- tipografi ---------- */

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: .95;
  letter-spacing: .004em;
  margin: 0;
  text-wrap: balance;
}
.display.xl { font-size: clamp(2.9rem, 6.6vw, 5.4rem); }
.display.md { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.display.xs { font-size: clamp(1.1rem, 1.9vw, 1.35rem); letter-spacing: .03em; }

/* Satır satır maskeli giriş. Padding maskeyi büyütür (şapkalar kırpılmasın),
   negatif alt margin satırları geri sıkıştırır. Net satır ilerlemesi =
   line-height + padding-block + (çakışan) margin. Türkçe büyük harflerde
   (İ Ö Ğ Ş) 1em'in altına inilmemeli, yoksa şapkalar üst satıra girer. */
.rl {
  display: block;
  overflow: hidden;
  padding-block: .41em .1em;
  margin-block: 0 -.34em;
}
.rl:first-child { margin-top: -.41em; }
.rl:last-child { margin-bottom: -.1em; }
.rl-i { display: inline-block; }
html.js .rv-lines .rl-i {
  transform: translateY(175%);
  transition: transform .8s var(--ease);
}
html.js .rv-lines .rl:nth-child(1) .rl-i { transition-delay: .04s; }
html.js .rv-lines .rl:nth-child(2) .rl-i { transition-delay: .13s; }
html.js .rv-lines .rl:nth-child(3) .rl-i { transition-delay: .22s; }
html.js .rv-lines.in .rl-i { transform: translateY(0); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(15, 15, 20, .55);
}
.kicker .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.kicker.on-ink { color: rgba(242, 237, 224, .6); }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
  line-height: 1.6;
  color: rgba(15, 15, 20, .74);
  max-width: 58ch;
  margin: 1.3rem 0 0;
}
.lead.on-ink { color: rgba(242, 237, 224, .76); }

.micro {
  font-size: 13px;
  color: rgba(15, 15, 20, .55);
  margin: 1.1rem 0 0;
}
.micro.on-ink { color: rgba(242, 237, 224, .55); }
.micro.center { text-align: center; }
.micro a { color: var(--coral-deep); text-underline-offset: 3px; }

.coral { color: var(--coral); }
.hero .coral, .how .coral,
.day-sec .coral, .lesson-sec .coral { color: var(--coral-deep); }

/* ---------- butonlar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .22s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #23232C; box-shadow: 0 12px 26px -12px rgba(15, 15, 20, .6); }
.btn-coral { background: var(--coral); color: var(--ink); }
.btn-coral:hover { background: #FF6C4E; box-shadow: 0 12px 26px -12px rgba(255, 89, 56, .8); }

/* çerçeveli buton: yüksekliği bozmasın diye border yerine inset gölge */
.btn-line {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(15, 15, 20, .22);
}
.btn-line:hover {
  background: rgba(15, 15, 20, .05);
  box-shadow: inset 0 0 0 1.5px rgba(15, 15, 20, .5);
}
.btn-line.on-ink { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(242, 237, 224, .32); }
.btn-line.on-ink:hover {
  background: rgba(242, 237, 224, .08);
  box-shadow: inset 0 0 0 1.5px rgba(242, 237, 224, .7);
}

.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-xl { padding: 19px 34px; font-size: 17.5px; }

/* mağazada henüz yokken: buton görünsün ama tıklanır gibi durmasın */
.btn.is-soon {
  cursor: default;
  opacity: .75;
  background: rgba(15, 15, 20, .07);
  color: rgba(15, 15, 20, .72);
  box-shadow: inset 0 0 0 1.5px rgba(15, 15, 20, .18);
}
.btn.is-soon.on-ink,
.poster .btn.is-soon {
  background: rgba(242, 237, 224, .08);
  color: rgba(242, 237, 224, .82);
  box-shadow: inset 0 0 0 1.5px rgba(242, 237, 224, .28);
}
.btn.is-soon:hover { transform: none; }

.store-ico { width: 17px; height: 20px; margin-top: -2px; flex: none; }
.store-ico.play { width: 18px; height: 18px; margin-top: 0; }

.link-arrow {
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: underline;
  text-decoration-color: var(--coral-deep);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 5px;
  transition: text-decoration-thickness .2s;
}
.link-arrow:hover { text-decoration-thickness: 4px; }
.link-arrow.on-ink { color: var(--cream); text-decoration-color: var(--coral); }

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 1.9rem;
}
.cta-row.center { justify-content: center; }

/* Ekran dışında ya da sekme arkadayken sonsuz animasyonları duraklat
   (main.js bu sınıfı .band, .spark-star ve hero telefonuna takar). */
html.js .anim-off,
html.js .anim-off * { animation-play-state: paused; }

/* ---------- reveal ---------- */

html.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
html:not(.js) .nav { border-bottom-color: var(--rule); }

.nav-inner {
  position: relative;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2.5px;
  width: 100%;
  background: var(--coral-deep);
  transform: scaleX(0);
  transform-origin: left;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand .kmark { transition: transform .4s var(--ease); }
.brand:hover .kmark { transform: rotate(-8deg) scale(1.06); }
/* gerçek uygulama ikonu; iOS'taki gibi yuvarlak köşe */
.kmark {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  object-fit: cover;
}
.footer .kmark { border-radius: 9px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 21px;
  letter-spacing: .025em;
  color: var(--ink);
}
.brand-name.on-ink { color: var(--cream); }

.links { display: flex; gap: 24px; }
.links a {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(15, 15, 20, .68);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color .2s;
}
.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--coral-deep);
  transition: right .28s var(--ease);
}
.links a:hover, .links a.active { color: var(--ink); }
.links a:hover::after, .links a.active::after { right: 0; }

/* ---------- hero ---------- */

.hero { padding: clamp(2.4rem, 6.5vw, 4.6rem) 0 clamp(3rem, 7vw, 5.4rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-title {
  font-size: clamp(3.4rem, 8.6vw, 7rem);
  margin-top: 1.1rem;
}

.ogren { position: relative; display: inline-block; }
.scribble {
  position: absolute;
  left: 1%;
  bottom: -.05em;
  width: 97%;
  height: .15em;
  z-index: -1;
  overflow: visible;
}
.scribble path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js .rv-lines .scribble path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s var(--ease) .8s;
}
html.js .rv-lines.in .scribble path { stroke-dashoffset: 0; }

.hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem 0 0;
}

.spark { position: absolute; z-index: 0; }
.spark-circle {
  width: clamp(80px, 9vw, 130px);
  height: clamp(80px, 9vw, 130px);
  border-radius: 50%;
  background: var(--coral);
  top: 1%;
  right: 2%;
}
.spark-star { width: 46px; height: 46px; top: 10%; left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .star-svg { animation: spin 26s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- telefon ---------- */

.phone {
  position: relative;
  z-index: 1;
  width: clamp(290px, 25vw, 340px);
  aspect-ratio: 322 / 664;
  background: var(--ink);
  border-radius: 54px;
  padding: 10px;
  box-shadow:
    0 40px 80px -26px rgba(15, 15, 20, .36),
    0 10px 26px rgba(15, 15, 20, .12);
}

.phone-screen {
  position: relative;
  height: 100%;
  background: #FFFFFF;
  border-radius: 45px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}

.phone-statusbar {
  position: relative;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 24px 0;
}
.ps-time { font-size: 13px; font-weight: 600; color: #111; }
.ps-island {
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  border-radius: 13px;
  background: #0F0F14;
}
.ps-batt {
  width: 22px;
  height: 11px;
  border: 1.5px solid rgba(17, 17, 17, .5);
  border-radius: 3.5px;
  position: relative;
}
.ps-batt::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  right: 5px;
  background: #111;
  border-radius: 1.5px;
}

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 12px 4px;
  overflow: hidden;
}
.chat-day {
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  color: #8E8E93;
  padding: 4px 0 8px;
  flex: none;
}
.bubbles {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bubble {
  max-width: 82%;
  margin: 0;
  padding: 7px 11px;
  border-radius: 17px;
  font-size: 13.5px;
  line-height: 1.32;
}
@media (prefers-reduced-motion: no-preference) {
  .bubbles .bubble { animation: pop .32s var(--ease); }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
}
.bubble.in { align-self: flex-start; background: #E9E9EB; color: #111; border-bottom-left-radius: 5px; }
.bubble.sent { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 5px; }

.composer {
  flex: none;
  margin: 7px 10px;
  min-height: 35px;
  border: 1px solid #D9D9DE;
  border-radius: 18px;
  background: #fff;
  padding: 7px 13px;
  font-size: 13.5px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.composer-ph { color: #AEAEB4; }
.composer.has-text .composer-ph { display: none; }
.typed { color: #111; word-break: break-word; white-space: pre-wrap; }
.caret {
  width: 2px;
  height: 15px;
  background: #0A84FF;
  margin-left: 1px;
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: blink 1s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

/* çeviri barı: ürünün kalbi */
.kbar {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #F6F6F8;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.kbar-badge {
  width: 27px;
  height: 27px;
  border-radius: 7.5px;
  background: var(--coral);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kbar-badge.think { animation: badgeWig .8s ease-in-out infinite; }
}
@keyframes badgeWig {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-8deg); }
  70% { transform: rotate(8deg); }
}
.kbar-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #23252B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kbar-text .w { display: inline-block; margin-right: 4.5px; }
@media (prefers-reduced-motion: no-preference) {
  .kbar-text .w { animation: wpop .32s var(--ease); }
}
@keyframes wpop {
  from { opacity: 0; transform: translateY(7px) scale(.88); }
}
.kbar-idle { color: #9A9DA6; font-weight: 500; }
.kdots { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: middle; }
.kdots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9A9DA6;
}
@media (prefers-reduced-motion: no-preference) {
  .kdots i { animation: kpulse 1s ease-in-out infinite; }
  .kdots i:nth-child(2) { animation-delay: .15s; }
  .kdots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes kpulse { 50% { opacity: .25; transform: translateY(-2px); } }

/* "+kelime kaptın" kutlaması */
.float-chip {
  position: absolute;
  left: 50%;
  bottom: 40%;
  z-index: 6;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  animation: floatup 1.5s var(--ease) forwards;
}
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.85); }
  18% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1.05) rotate(-3deg); }
}

/* klavye: bilinçli olarak native iOS görünümü */
.keyboard {
  flex: none;
  background: #D2D5DB;
  padding: 8px 3.5px 2px;
}
.krow {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 8px;
  padding: 0 2px;
}
.key {
  position: relative;
  flex: 1 1 0;
  height: 39px;
  background: #FFFFFF;
  border-radius: 5.5px;
  box-shadow: 0 1px 0 rgba(70, 74, 86, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #1C1E21;
  min-width: 0;
  transition: background-color .08s, transform .08s;
}
.key.spec { background: #AEB3BE; font-size: 13.5px; flex: 1.35 1 0; }
.key.num { background: #AEB3BE; font-size: 12.5px; flex: 1.35 1 0; }
.key.space { flex: 4.6 1 0; font-size: 13px; color: #3C3F45; }
.key.ret { flex: 1.7 1 0; background: #0A84FF; color: #fff; font-size: 12.5px; }
.key.press { background: #C4C9D2; transform: translateY(1px) scale(.95); }
.key.ret.press { background: #0870D8; }
/* Baskı balonu tuşun üstünde belirir; üst sırada çeviri barını kapatacağı
   için orada gösterilmez — barın okunabilirliği demonun tüm mesajı. */
.krow:first-child .key.press[data-char]::after { display: none; }
.key.press[data-char]::after {
  content: attr(data-char);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  background: #FFFFFF;
  color: #111;
  font-size: 21px;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  z-index: 6;
}

.home-indicator {
  flex: none;
  width: 122px;
  height: 5px;
  border-radius: 3px;
  background: rgba(15, 15, 20, .3);
  margin: 7px auto 8px;
}

/* "sen seç, klavye yazsın" çipleri */
.try-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}
.try-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(15, 15, 20, .55);
}
.try-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 430px;
}
.try-chip {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(15, 15, 20, .8);
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .14);
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: 0 2.5px 0 rgba(15, 15, 20, .16);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s, background-color .25s, color .25s, border-color .25s;
}
.try-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 66, 31, .55);
}
.try-chip:active {
  transform: translateY(1.5px);
  box-shadow: 0 0 0 rgba(15, 15, 20, 0);
}
.try-chip.playing {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 0 0 rgba(15, 15, 20, 0);
  transform: translateY(1.5px);
}

/* ---------- coral çeviri bandı ---------- */

.band {
  background: var(--coral);
  padding: 20px 0;
  transform: rotate(-.6deg) scale(1.02);
}
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 46px;
  width: max-content;
  padding-right: 46px;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: slide 46s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes slide { to { transform: translateX(-50%); } }

.pair {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: 17px;
  white-space: nowrap;
}
.pair b { color: var(--ink); font-weight: 700; }
.pair .arrow { color: rgba(15, 15, 20, .45); font-weight: 700; }
.pair i { color: var(--cream); font-style: normal; font-weight: 600; }

/* ---------- kurulum ---------- */

.how { padding: clamp(4rem, 10vw, 7rem) 0; }
.how .display { margin-top: 1.1rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(2.2rem, 5vw, 3rem);
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .08);
  border-radius: 26px;
  padding: 88px 26px 26px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -18px rgba(15, 15, 20, .18);
}
.step-num {
  position: absolute;
  top: -10px;
  right: 16px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 116px;
  line-height: 1;
  color: rgba(15, 15, 20, .06);
  pointer-events: none;
  transition: transform .45s var(--ease);
}
.step:hover .step-num { transform: translate(-5px, 5px) rotate(-2deg); }
.step:nth-child(1) .step-num { color: rgba(224, 66, 31, .13); }
.step:nth-child(2) .step-num { color: rgba(115, 107, 235, .13); }
.step:nth-child(3) .step-num { color: rgba(84, 140, 5, .13); }
.step h3 { margin: 0 0 .5rem; }
.step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(15, 15, 20, .72);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.chip {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(15, 15, 20, .66);
  border: 1px solid rgba(15, 15, 20, .16);
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--paper);
  transition: transform .2s var(--ease), border-color .2s;
}
.chip:hover { transform: translateY(-2px) rotate(-1.5deg); border-color: rgba(224, 66, 31, .5); }

/* ---------- 03 · bir gün ---------- */

.day-sec { padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(4rem, 10vw, 7rem); }
.day-sec .display { margin-top: 1.1rem; }

.day {
  position: relative;
  list-style: none;
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* zamanı birbirine bağlayan kesik çizgi */
.day::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 2px;
  right: 2px;
  height: 2px;
  background-image: linear-gradient(90deg, rgba(15, 15, 20, .3) 0 7px, transparent 7px 15px);
  background-size: 15px 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .15s;
}
html.js .day.in::before { transform: scaleX(1); }
html:not(.js) .day::before { transform: scaleX(1); }

.stop-head {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  padding-right: 14px;
}
.stop-time {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 21px;
  letter-spacing: .04em;
  line-height: 1.25;
}
.stop-app {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(15, 15, 20, .6);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--surface);
}

.day-stop { display: flex; flex-direction: column; }
.mini {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .09);
  border-radius: 22px;
  padding: 15px 15px 13px;
  box-shadow: 0 12px 30px -22px rgba(15, 15, 20, .5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.day-stop:hover .mini {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px -24px rgba(15, 15, 20, .45);
}
.mini-head {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 15, 20, .45);
  letter-spacing: .04em;
}
.mini-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  margin: 11px 0 12px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
.mini-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 13px;
  background: var(--paper);
  border: 1px solid rgba(15, 15, 20, .07);
}
.mini-bar .kbar-badge { width: 23px; height: 23px; font-size: 13.5px; border-radius: 6.5px; }
.mini-en {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.stop-note {
  margin: 13px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(15, 15, 20, .68);
}

/* gün sonu şeridi */
.night-strip {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  background: var(--ink);
  color: var(--cream);
  border-radius: 30px;
  padding: clamp(1.8rem, 3.4vw, 2.6rem) clamp(1.6rem, 3.4vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.4rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.night-count {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 1rem 0 0;
}
.night-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(56px, 8vw, 88px);
  line-height: .86;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.night-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(242, 237, 224, .72);
}
.night-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 280px;
}

.notif {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(250, 250, 252, .96);
  border-radius: 16px;
  padding: 11px 13px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
}
.notif .kbar-badge { width: 26px; height: 26px; font-size: 15px; }
.notif-txt { display: flex; flex-direction: column; }
.notif-title { font-size: 12.5px; font-weight: 700; color: #111; }
.notif-sub { font-size: 11.5px; color: #6E7076; }
.notif-time { margin-left: auto; font-size: 11px; color: #8E8E93; }

/* ---------- 04 · akşam dersi ---------- */

.lesson-sec {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.lesson-sec .display { margin-top: 1.1rem; }

.lesson-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.2rem, 5vw, 3rem);
}

.deck-col { display: flex; flex-direction: column; justify-content: center; }
.deck-lead {
  margin: 0 0 20px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(15, 15, 20, .62);
}
.deck-toggle {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 15, 20, .06);
  color: rgba(15, 15, 20, .7);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.deck-toggle:hover { background: rgba(15, 15, 20, .1); color: var(--ink); }
.deck-toggle[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.deck-tabs { display: flex; flex-direction: column; }
.deck-tab {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 15px 8px 15px 4px;
  font-family: var(--font-body);
  color: inherit;
  cursor: pointer;
  transition: background-color .25s;
  border-radius: 0 0 8px 8px;
}
.deck-tab:last-child { border-bottom: 1px solid var(--rule); }
.deck-tab:hover { background: rgba(15, 15, 20, .035); }
.tab-n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(15, 15, 20, .35);
  padding-top: 3px;
  transition: color .25s;
}
.tab-txt b {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: rgba(15, 15, 20, .55);
  transition: color .25s;
}
.tab-txt i {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: rgba(15, 15, 20, .45);
  margin-top: 2px;
  transition: color .25s;
}
.deck-tab.is-on .tab-n { color: var(--coral-deep); }
.deck-tab.is-on .tab-txt b { color: var(--ink); }
.deck-tab.is-on .tab-txt i { color: rgba(15, 15, 20, .6); }
.tab-bar {
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  background: var(--coral-deep);
  transform: scaleX(0);
  transform-origin: left;
}
.deck-tab.is-on .tab-bar { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  html.js .deck-tab.is-on .tab-bar {
    transform: scaleX(0);
    animation: tabFill 6s linear forwards;
  }
  html.js .deck-tabs.paused .tab-bar,
  html.js .deck-tabs.offscreen .tab-bar { animation-play-state: paused; }
  /* kullanıcı durdurduysa kalıcı: fareyi çekince geri başlamaz */
  html.js .deck-tabs.stopped .tab-bar { animation: none; transform: scaleX(1); }
}
@keyframes tabFill { to { transform: scaleX(1); } }

.deck-stage { display: flex; flex-direction: column; align-items: center; }
.phone-lesson { width: clamp(280px, 24vw, 326px); }
.phone-lesson .phone-screen { background: var(--paper); }

.deck {
  position: relative;
  flex: 1;
  min-height: 0;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 18px;
  overflow: hidden;
}
/* Yığın ve geçiş yalnızca JS varken: JS yoksa beş kart da okunabilir kalmalı. */
html.js .card {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  /* visibility açıkça sürülüyor: gelen kart anında görünür olsun,
     giden kart ancak solma bittikten sonra ekran okuyucudan çıksın. */
  transition: opacity .38s var(--ease), transform .5s var(--ease), visibility 0s linear .38s;
}
html.js .card.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .38s var(--ease), transform .5s var(--ease), visibility 0s;
}
html:not(.js) .phone-lesson { aspect-ratio: auto; }
html:not(.js) .phone-lesson .phone-screen { height: auto; }
html:not(.js) .card + .card { border-top: 1px solid var(--rule); }
html:not(.js) .deck-dots, html:not(.js) .deck-toggle { display: none; }
.card:nth-child(1) { background: linear-gradient(180deg, #FFF6F2, var(--paper)); }
.card:nth-child(2) { background: linear-gradient(180deg, #F3FAE2, var(--paper)); }
.card:nth-child(3) { background: linear-gradient(180deg, #F1F0FF, var(--paper)); }
.card:nth-child(4) { background: linear-gradient(180deg, #FFFDF4, var(--paper)); }
.card:nth-child(5) { background: linear-gradient(180deg, #FFF2EE, var(--paper)); }

.card-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--coral-deep);
  flex: none;
}
.card-head {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  margin: 14px 0 0;
  color: var(--ink);
}
.card-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.02;
  margin: 16px 0 0;
  color: var(--ink);
}
.card-note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(15, 15, 20, .68);
  margin: 10px 0 0;
}
.card-foot {
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15, 15, 20, .62);
  border-top: 1px solid rgba(15, 15, 20, .1);
}
.card-foot b { color: var(--ink); }

.card-pair {
  margin: auto 0;
  padding: 16px 0;
}
.pair-tr {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(15, 15, 20, .62);
}
.pair-en {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--coral);
  padding-left: 12px;
}

.card-list, .word-list, .quiz-list {
  list-style: none;
  margin: 20px 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-list li {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(15, 15, 20, .08);
  border-radius: 14px;
  padding: 10px 12px;
}
.card-list span {
  display: block;
  font-size: 13px;
  color: rgba(15, 15, 20, .55);
}
.card-list em {
  display: block;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  margin-top: 3px;
}
.card-list mark {
  background: var(--lime);
  color: var(--ink);
  padding: 0 3px;
  border-radius: 4px;
}

.card-rows { margin: auto 0; display: flex; flex-direction: column; gap: 10px; }
.card-rows p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  border-radius: 14px;
  padding: 12px 13px;
}
.row-tag {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: 5px;
}
.row-book {
  background: rgba(15, 15, 20, .05);
  color: rgba(15, 15, 20, .55);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 66, 31, .45);
}
.row-book .row-tag { color: rgba(15, 15, 20, .4); text-decoration: none; }
.row-native {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.row-native .row-tag { color: var(--lime-deep); }

.word-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(15, 15, 20, .08);
  border-radius: 14px;
  padding: 10px 12px;
}
.word-list b { font-size: 15.5px; }
.word-list span { font-size: 13.5px; color: rgba(15, 15, 20, .6); align-self: center; }
.word-list em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 12.5px;
  color: rgba(15, 15, 20, .5);
}

.quiz-list li {
  font-size: 14.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(15, 15, 20, .1);
  border-radius: 14px;
  padding: 12px 13px;
  color: rgba(15, 15, 20, .6);
}
.quiz-list li.ok {
  background: var(--lime);
  border-color: var(--lime-deep);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.quiz-list .tick { font-weight: 800; color: var(--lime-deep); }

.deck-dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 10px 0 2px;
}
.deck-dots i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(15, 15, 20, .18);
  transition: background-color .3s, width .3s var(--ease);
}
.deck-dots i.on { background: var(--coral); width: 26px; }

.deck-hint { text-align: center; max-width: 34ch; }

/* ---------- poster bölümleri ---------- */

.poster {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(4.2rem, 10vw, 7.5rem) 0;
  overflow: hidden;
}
/* dokunun tamamı bu iki bölümle sınırlı: sabit katman yok */
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.poster > .container { position: relative; }
.poster .display { color: var(--cream); margin-top: 1.2rem; }

/* ---------- gizlilik ---------- */

.privacy { padding: clamp(4rem, 10vw, 7rem) 0; }
.privacy .display { margin-top: 1.1rem; }

.priv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(2rem, 4.5vw, 3rem);
}
.priv-card {
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .08);
  border-radius: 26px;
  padding: 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.priv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -18px rgba(15, 15, 20, .16);
}
.priv-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(224, 66, 31, .1);
  color: var(--coral-deep);
  transition: transform .35s var(--ease);
}
.priv-card:hover .priv-ico { transform: rotate(-6deg) scale(1.08); }
.priv-ico svg { width: 22px; height: 22px; }
.priv-card h3 { margin: 16px 0 6px; font-size: 17px; }
.priv-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(15, 15, 20, .7);
}

/* ---------- yorumlar ---------- */

.quotes { padding: clamp(3rem, 7vw, 4.5rem) 0; }
.qgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 2rem;
}
.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .08);
  border-radius: 22px;
  padding: 22px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.quote:nth-child(odd) { transform: rotate(-.7deg); }
.quote:nth-child(even) { transform: rotate(.7deg); }
html.js .quote.rv { transform: translateY(16px); }
html.js .quote.rv.in:nth-child(odd) { transform: rotate(-.7deg); }
html.js .quote.rv.in:nth-child(even) { transform: rotate(.7deg); }
.quote:hover, html.js .quote.rv.in:hover {
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 18px 40px -18px rgba(15, 15, 20, .16);
}
.stars {
  color: var(--coral-deep);
  font-size: 12.5px;
  letter-spacing: 3px;
}
.quote blockquote {
  margin: 12px 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(15, 15, 20, .82);
}
.quote figcaption {
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 15, 20, .5);
}

/* ---------- sss ---------- */

.faq { padding: clamp(3.5rem, 9vw, 6rem) 0; }
.faq .display { margin-top: 1.1rem; }

.faq-list { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid rgba(15, 15, 20, .13); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 2px;
  font-size: 16.5px;
  font-weight: 600;
  transition: color .2s;
}
.faq-item summary:hover { color: var(--coral-deep); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  color: var(--coral-deep);
  transition: transform .3s var(--ease);
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .38s var(--ease), content-visibility .38s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item p {
  margin: 0;
  padding: 0 2px 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(15, 15, 20, .7);
  max-width: 62ch;
}

/* ---------- hukuki sayfalar (privacy / terms) ---------- */

.legal { padding: clamp(3rem, 7vw, 4.6rem) 0 clamp(3.5rem, 8vw, 5rem); }
.legal .container { max-width: 1020px; }

.legal-body { max-width: none; }

.legal .back {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(15, 15, 20, .6);
  text-decoration: none;
}
.legal .back:hover { color: var(--ink); }
.legal h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.4rem, 5.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.legal .updated { font-size: 14px; color: rgba(15, 15, 20, .55); margin: 0 0 30px; }
.legal h2 {
  font-size: 1.24rem;
  line-height: 1.25;
  margin: 42px 0 12px;
  font-weight: 700;
  scroll-margin-top: 90px;
}
.legal h3 { font-size: 1.02rem; margin: 26px 0 8px; font-weight: 700; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: rgba(15, 15, 20, .86); }
.legal ul { padding-left: 20px; margin: 10px 0 16px; }
.legal li { margin-bottom: 8px; }
.legal strong { font-weight: 700; color: var(--ink); }
.legal a { color: var(--coral-deep); text-underline-offset: 3px; }
.legal hr { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; }

.legal .tldr {
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .1);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 8px 0 34px;
}
.legal .tldr p:last-child, .legal .tldr ul { margin-bottom: 0; }

/* mağaza sözleşmeleri kutusu (EULA / Play koşulları) */
.legal .eula {
  border: 1px solid rgba(224, 66, 31, .35);
  border-left-width: 4px;
  border-radius: 16px;
  padding: 18px 22px;
  margin: 0 0 34px;
  background: rgba(255, 89, 56, .04);
}
.legal .eula-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.legal .eula p { margin: 0 0 8px; font-size: 16px; }
.legal .eula ul { margin: 10px 0; }
.legal .eula li { font-size: 16px; margin-bottom: 6px; }
.legal .eula p:last-child { margin-bottom: 0; font-size: 15px; color: rgba(15, 15, 20, .68); }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 15.5px;
}
.legal th, .legal td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(15, 15, 20, .1);
  vertical-align: top;
}
.legal th { font-weight: 700; background: rgba(15, 15, 20, .035); }
.legal .wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.legal .lang { display: flex; gap: 10px; margin: 0 0 26px; }
.legal .lang a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(15, 15, 20, .16);
  color: rgba(15, 15, 20, .62);
}
.legal .lang a[aria-current="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* iki platformun ayrıştığı maddeler */
.legal .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 20px;
}
.legal .split > div {
  background: var(--surface);
  border: 1px solid rgba(15, 15, 20, .1);
  border-radius: 16px;
  padding: 16px 18px;
}
.legal .split h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.legal .split p { margin: 0; font-size: 15.5px; }
@media (max-width: 640px) {
  .legal .split { grid-template-columns: 1fr; }
}

/* ---------- kapanış + footer ---------- */

.final { text-align: center; }
.final .kicker { justify-content: center; }
.final .display { margin-inline: auto; }

.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 3.2rem 0 2.4rem;
}
.foot-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px;
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-tag {
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(242, 237, 224, .55);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 237, 224, .72);
  text-decoration: none;
}
.foot-links a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.copy {
  width: 100%;
  margin: 6px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(242, 237, 224, .1);
  font-size: 13px;
  color: rgba(242, 237, 224, .4);
}

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .lesson-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .deck-stage { order: -1; }
  .deck-hint { max-width: none; }
  .deck-col { max-width: 640px; margin-inline: auto; width: 100%; }
  .deck-lead { max-width: none; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { padding-top: 2rem; }
  .hero-title { font-size: clamp(3.4rem, 13vw, 5.6rem); }
  .day { grid-template-columns: 1fr; gap: 26px; }
  .day::before { display: none; }
  .stop-head { background: none; }
  .night-strip { flex-direction: column; align-items: flex-start; }
  .night-right { min-width: 0; width: 100%; }
}

@media (max-width: 860px) {
  .links { display: none; }
  .steps, .priv-grid, .qgrid { grid-template-columns: 1fr; }
  .step { padding-top: 72px; }
}

@media (max-width: 760px) {
  .btn-lg { padding: 14px 24px; font-size: 15px; }
  /* dokunma hedefleri 44px'in altına inmesin */
  .try-chip { padding: 13px 16px; }
  .micro a, .link-arrow { display: inline-block; padding: 12px 0; }
  .deck-toggle { padding: 12px 18px; }
  .band { transform: none; }
  .quote:nth-child(odd), .quote:nth-child(even),
  html.js .quote.rv.in:nth-child(odd), html.js .quote.rv.in:nth-child(even) { transform: none; }
}

@media (max-width: 640px) {
  /* dar ekranda yıldız telefonun arkasında yarım kalıyor */
  .spark-star { display: none; }
}

@media (max-width: 420px) {
  .phone { width: min(100%, 320px); }
  .phone-lesson { width: min(100%, 320px); }
  .night-num { font-size: 62px; }
}

/* ---------- hareket azaltma ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js .rv { transition: none; }
  html.js .rv-lines .rl-i { transition: none; transform: none; }
  html.js .rv-lines .scribble path { transition: none; stroke-dashoffset: 0; }
  html.js .day::before { transition: none; transform: scaleX(1); }
  .marquee { overflow-x: auto; }
  .btn:hover, .step:hover, .priv-card:hover, .quote:hover { transform: none; }
  html.js .card { transition: opacity .01s; transform: none; }
}