/* ===========================================================================
   LeTa Launcher — tanitim sitesi
   Sayfa, launcher'in kendi arayuzu gibi davranir: altta odaklanan bir dock,
   sag ustte canli durum kapsulu, uygulamanin gercek hareket sureleri
   (odak 160 ms, panel 240 ms, sayfa 260 ms, ana gecis 320 ms) ve
   uygulamanin kendi guvenli kenar olcusu (40 dp) sayfa kenar bosluguna.
   =========================================================================== */

/* --- jetonlar ------------------------------------------------------------ */
:root {
  /* zemin ve yuzeyler: mavi egilimli, notr degil */
  --void:      #06070b;
  --void-2:    #090b11;
  --panel:     #0d1016;
  --panel-2:   #12161f;
  --line:      rgba(240, 238, 233, 0.10);
  --line-2:    rgba(240, 238, 233, 0.18);

  /* metin: sicak egilimli kirik beyaz */
  --bone:      #f0eee9;
  --mist:      rgba(240, 238, 233, 0.62);
  --dust:      rgba(240, 238, 233, 0.38);
  --ash:       rgba(240, 238, 233, 0.22);

  /* vurgu: uygulama ambleminin pirinc-celik gecisi */
  --brass:     #d8a657;
  --brass-lit: #f4dcae;
  --steel:     #86a9c6;
  --steel-lit: #c3dbee;
  --seam: linear-gradient(104deg, var(--brass-lit) 0%, var(--brass) 30%, var(--steel) 74%, var(--steel-lit) 100%);

  /* olculer: uygulamadan alinmistir */
  --safe: clamp(20px, 3.4vw, 40px);   /* LookSpec.safeSide = 40 dp */
  --unit: 8px;                         /* uygulamanin 8 dp ritmi */
  --dock-h: 128px;
  --maxw: 1520px;

  /* hareket: uygulamanin gercek sureleri */
  --t-focus: 160ms;
  --t-panel: 240ms;
  --t-page:  260ms;
  --t-hero:  320ms;
  --ease:      cubic-bezier(0.22, 0.90, 0.26, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.85, 0.35);

  /* yazi */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.booting { overflow: hidden; height: 100%; }

/* height:auto sart: genislik/yukseklik OZNITELIKLERI, CSS yalnizca genislik
   verdiginde yukseklige sunum ipucu olarak uygulanir ve gorseli dikey kutuya
   sikistirir. Daha ozgul kurallar (.screen > img gibi) bunu yine ezer. */
img, video, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--brass); color: #0a0a0a; }

:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 4px; border-radius: 10px; }

.skip {
  position: fixed; left: var(--safe); top: -70px; z-index: 120;
  padding: 12px 20px; border-radius: 12px; background: var(--brass-lit); color: #0a0a0a;
  font-weight: 600; transition: top var(--t-panel) var(--ease);
}
.skip:focus { top: 16px; }


/* --- yerlesim ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--safe); }
.shelf { position: relative; padding-block: clamp(84px, 12vh, 180px); }
.shelf--tight { padding-block: clamp(52px, 7vh, 96px); }

.cols { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .cols--2 { grid-template-columns: 1fr 1fr; }
  .cols--wide-left { grid-template-columns: 1.25fr 0.95fr; }
  .cols--wide-right { grid-template-columns: 0.95fr 1.25fr; }
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  .flip > *:first-child { order: 2; }
}

/* --- yazi olcegi --------------------------------------------------------- */
.kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 calc(var(--unit) * 3);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; flex: none; }
.kicker--plain::before { display: none; }

.mega, .title, .sub {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
.mega { font-size: clamp(3rem, 9.4vw, 9.5rem); line-height: 0.88; letter-spacing: -0.05em; }
.title { font-size: clamp(2.1rem, 5.2vw, 4.6rem); line-height: 0.95; }
.sub   { font-size: clamp(1.35rem, 2.3vw, 2.1rem); line-height: 1.08; font-stretch: 112%; }

.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.24rem);
  line-height: 1.62;
  color: var(--mist);
  max-width: 60ch;
  margin: calc(var(--unit) * 3) 0 0;
}
p { margin: 0 0 1em; color: var(--mist); }
p:last-child { margin-bottom: 0; }
.tight { max-width: 46ch; }

/* --- dugmeler ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  background: var(--seam); color: #08090c;
  transition: transform var(--t-focus) var(--ease), box-shadow var(--t-focus) var(--ease);
  box-shadow: 0 12px 34px -18px rgba(216, 166, 87, 0.9);
  will-change: transform;
}
.btn:hover { transform: scale(1.045); box-shadow: 0 20px 48px -20px rgba(216, 166, 87, 1); }
.btn--quiet {
  background: rgba(240, 238, 233, 0.06); color: var(--bone);
  border: 1px solid var(--line-2); box-shadow: none;
}
.btn--quiet:hover { background: rgba(240, 238, 233, 0.11); box-shadow: none; }
.btn--sm { padding: 10px 18px; font-size: 0.86rem; }

/* --- durum kapsulu (uygulamanin sag ust kapsulu) -------------------------- */
.pill {
  position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: var(--safe); z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 18px; border-radius: 999px;
  background: rgba(10, 12, 17, 0.62);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--mist);
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.pill__clock { color: var(--bone); font-variant-numeric: tabular-nums; }
.pill__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.pill__pct { font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.pill__lang { display: flex; border-radius: 999px; overflow: hidden; border: 1px solid var(--line-2); }
.pill__lang button {
  padding: 5px 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--dust); transition: color var(--t-focus) var(--ease), background var(--t-focus) var(--ease);
}
.pill__lang button[aria-pressed="true"] { background: var(--brass-lit); color: #08090c; }

/* --- marka isareti (sol ust) --------------------------------------------- */
.mark {
  position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); left: var(--safe); z-index: 60;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px 8px 8px; border-radius: 999px;
  background: rgba(10, 12, 17, 0.62);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  font-family: var(--display); font-weight: 700; font-stretch: 112%; letter-spacing: -0.02em;
  font-size: 0.95rem;
  transition: opacity var(--t-panel) var(--ease);
}
.mark img { width: 32px; height: 32px; border-radius: 10px; }
.mark span { white-space: nowrap; }
@media (max-width: 700px) {
  .mark { padding: 8px; }
  .mark span { display: none; }
  .pill { gap: 10px; padding-left: 14px; }
  .pill__pct { display: none; }
}

/* --- dock (sayfanin gezinme cubugu) -------------------------------------- */
.dock {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; display: none;
  padding: 10px; border-radius: 26px;
  background: rgba(10, 12, 17, 0.58);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 30px 70px -40px #000;
}
@media (min-width: 1040px) { .dock { display: block; } body { padding-bottom: 0; } }
.dock__row { display: flex; gap: var(--unit); align-items: flex-end; }
.dock__tile {
  position: relative; width: 104px; aspect-ratio: 5 / 3;   /* uygulamanin Sinema dosemesi */
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  transition: transform var(--t-focus) var(--ease), border-color var(--t-focus) var(--ease);
  transform-origin: bottom center;
}
.dock__tile img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity var(--t-focus) var(--ease); }
.dock__tile b {
  position: absolute; inset: auto 0 0 0; padding: 6px 8px;
  font-family: var(--mono); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
  background: linear-gradient(transparent, rgba(6, 7, 11, 0.92));
  text-align: center;
}
.dock__tile:hover, .dock__tile:focus-visible { transform: scale(1.045); }
.dock__tile:hover img { opacity: .82; }
.dock__tile[aria-current="true"] { border-color: var(--brass); transform: scale(1.045); }
.dock__tile[aria-current="true"] img { opacity: 1; }
.dock__tile[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(244, 220, 174, 0.55);
}

/* mobil ust cubuk */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 10px; padding: 12px var(--safe) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 13, 0.86);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bar .btn { flex: 1; justify-content: center; }
@media (min-width: 1040px) { .bar { display: none; } }

/* --- ilerleme cizgisi ---------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 70;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--seam);
}

/* --- acilis perdesi ------------------------------------------------------ */
.boot {
  position: fixed; inset: 0; z-index: 110; background: var(--void);
  display: grid; place-items: center;
}
.boot__in { display: grid; place-items: center; gap: 22px; }
.boot__mark { width: 78px; height: 78px; border-radius: 22px; overflow: hidden; opacity: 0; }
.boot__bar { width: min(280px, 62vw); height: 2px; background: var(--line-2); overflow: hidden; }
.boot__fill { display: block; height: 100%; width: 0%; background: var(--seam); }
.boot__num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.26em; color: var(--dust); }

/* --- kahraman ------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__bed {
  position: absolute; inset: 0; z-index: 0;
  background: var(--void) center / cover no-repeat;
}
.hero__bed video, .hero__bed img { width: 100%; height: 100%; object-fit: cover; }
.hero__bed::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(74deg, rgba(6,7,11,.95) 0%, rgba(6,7,11,.76) 30%, rgba(6,7,11,.24) 60%, rgba(6,7,11,.06) 100%),
    linear-gradient(180deg, rgba(6,7,11,.8) 0%, rgba(6,7,11,.12) 32%, rgba(6,7,11,.94) 100%);
}
.hero__in {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(104px, 14vh, 150px);
  padding-bottom: clamp(175px, 22vh, 250px);
}
.hero__sub { margin: calc(var(--unit) * 4) 0 0; max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.3rem); color: var(--mist); line-height: 1.6; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: calc(var(--unit) * 5); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: calc(var(--unit) * 5);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dust);
}
.hero__facts span { display: inline-flex; align-items: center; gap: 9px; }
.hero__facts span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
@media (max-width: 900px) {
  .hero__bed::after {
    background: linear-gradient(180deg,
      rgba(6,7,11,.92) 0%, rgba(6,7,11,.44) 17%, rgba(6,7,11,.74) 42%,
      rgba(6,7,11,.93) 74%, rgba(6,7,11,.99) 100%);
  }
  .hero__in { padding-top: 104px; padding-bottom: 122px; }
}

/* --- kelime maskesi ------------------------------------------------------ */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.word { display: inline-block; will-change: transform; }

/* --- serit (kaydirma hizina tepki verir) --------------------------------- */
.strip {
  border-block: 1px solid var(--line);
  background: var(--void-2);
  padding-block: calc(var(--unit) * 3);
  overflow: hidden;
}
.strip__row { display: flex; gap: 44px; white-space: nowrap; will-change: transform; }
.strip__row span {
  font-family: var(--display); font-weight: 700; font-stretch: 118%;
  font-size: clamp(1.1rem, 2vw, 1.9rem); letter-spacing: -0.03em; color: var(--ash);
  display: inline-flex; align-items: center; gap: 44px;
}
.strip__row span::after { content: "◆"; font-size: 0.4em; color: var(--brass); }

/* --- ekran cercevesi (her zaman 16:9, asla kirpilmaz) -------------------- */
.screen {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1vw, 18px); overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: 0 50px 110px -48px #000;
}
.screen > img, .screen > video { width: 100%; height: 100%; object-fit: cover; }
.card-shot { aspect-ratio: 8 / 5; }          /* urun kartlari 2400x1500 */
.cap {
  margin-top: calc(var(--unit) * 2);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dust);
}

/* --- yapiskan vitrin ----------------------------------------------------- */
.stage { display: grid; gap: clamp(26px, 4vw, 76px); }
@media (min-width: 1000px) { .stage { grid-template-columns: 0.85fr 1.3fr; align-items: start; } }
.stage__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.stage__deck { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.stage__deck img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: clamp(10px, 1vw, 18px); border: 1px solid var(--line-2);
  box-shadow: 0 50px 110px -46px #000; opacity: 0;
}
.stage__deck img.on { opacity: 1; }
.stage__halo {
  position: absolute; inset: -16% 0; z-index: -1; filter: blur(80px); opacity: .45;
  background: radial-gradient(58% 58% at 50% 50%, rgba(216,166,87,.4), transparent 70%);
}
.stage__steps { display: grid; gap: clamp(48px, 22vh, 190px); padding-block: 26vh; }
.step { max-width: 44ch; }
.step__n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em; color: var(--brass); display: block; margin-bottom: 14px; }
@media (max-width: 999px) {
  .stage__pin {
    position: sticky; top: 82px; height: auto; order: -1; z-index: 2;
    background: var(--void); padding-block: 10px 16px;
  }
  .stage__steps { padding-block: 10px 0; gap: 54px; }
  .step { max-width: none; }
}

/* --- listeler ------------------------------------------------------------ */
.ticks { list-style: none; padding: 0; margin: calc(var(--unit) * 4) 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; color: var(--mist); line-height: 1.55; font-size: 0.97rem; }
.ticks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px;
  background: rgba(216,166,87,.14); border: 1px solid rgba(216,166,87,.42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4dcae' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
}

/* --- satir listesi (uygulamanin ayar satiri dili) ------------------------ */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
  transition: background var(--t-focus) var(--ease), padding-inline var(--t-focus) var(--ease);
}
.row:hover { background: rgba(240,238,233,.035); padding-inline: 12px 12px; }
.row__name { font-weight: 550; letter-spacing: -0.01em; }
.row__val { font-family: var(--mono); font-size: 0.78rem; color: var(--brass); letter-spacing: 0.06em; text-align: right; }
.row__chev { color: var(--ash); }

/* --- yigin kartlar (urun kartlari) --------------------------------------- */
.stack { position: relative; }
.stack__item {
  position: sticky; top: 14vh;
  display: grid; gap: clamp(18px, 2.4vw, 40px); align-items: center;
  padding: clamp(18px, 2vw, 30px);
  border-radius: 26px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 90px -50px #000;
  margin-bottom: clamp(20px, 4vh, 46px);
}
@media (min-width: 900px) { .stack__item { grid-template-columns: 1.4fr 1fr; } }
.stack__item h3 { font-family: var(--display); font-stretch: 114%; font-size: clamp(1.3rem, 2vw, 1.9rem); letter-spacing: -0.03em; margin: 0 0 12px; line-height: 1.05; }
.stack__item p { font-size: 0.95rem; margin: 0; }

/* --- kumanda semasi (gorseli olmayan ozellik) ---------------------------- */
.remote { display: grid; gap: clamp(24px, 3vw, 56px); }
@media (min-width: 880px) { .remote { grid-template-columns: 300px 1fr; align-items: center; } }
.remote__body {
  border: 1px solid var(--line-2); border-radius: 44px; padding: 28px 22px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  display: grid; gap: 16px; justify-items: center; max-width: 300px;
}
.remote__pad {
  width: 168px; height: 168px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; position: relative; background: rgba(240,238,233,.03);
}
.remote__ok {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--mist);
}
.remote__pad i {
  position: absolute; font-family: var(--mono); font-size: 0.7rem; color: var(--dust); font-style: normal;
}
.remote__keys { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.key {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--mist);
  transition: border-color var(--t-focus) var(--ease), color var(--t-focus) var(--ease);
}
.key:hover { border-color: var(--brass); color: var(--brass-lit); }

/* --- dalga --------------------------------------------------------------- */
.wave { display: flex; align-items: flex-end; gap: 5px; height: 84px; margin: calc(var(--unit) * 4) 0 0; }
.wave i { width: 5px; border-radius: 3px; background: var(--seam); opacity: .85; height: 18%; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: calc(var(--unit) * 3); }
.chip {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mist);
  transition: border-color var(--t-focus) var(--ease), color var(--t-focus) var(--ease);
}
.chip:hover { border-color: var(--brass); color: var(--brass-lit); }
.chip--lit { border-color: rgba(216,166,87,.55); color: var(--brass-lit); }

/* --- sayilar ------------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 36px); }
.figure { border-top: 1px solid var(--line); padding-top: calc(var(--unit) * 3); }
.figure b {
  display: block; font-family: var(--display); font-stretch: 118%; font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure span { display: block; margin-top: 10px; font-size: 0.84rem; color: var(--dust); }
@media (max-width: 760px) { .figures { grid-template-columns: repeat(2, 1fr); } }

/* --- karsilastirma ------------------------------------------------------- */
.versus { width: 100%; border-collapse: collapse; margin-top: calc(var(--unit) * 4); }
.versus th, .versus td { text-align: left; padding: 18px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.94rem; }
.versus thead th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); }
.versus tbody th { font-weight: 600; width: 22%; color: var(--bone); }
.versus td:first-of-type { color: var(--dust); }
.versus td:last-child { color: var(--brass-lit); }
@media (max-width: 780px) {
  .versus thead { display: none; }
  .versus tr { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--line); }
  .versus th, .versus td { border: 0; padding: 2px 0; width: auto; }
  .versus td::before { content: attr(data-label) " — "; color: var(--ash); }
}

/* --- sss ----------------------------------------------------------------- */
.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; text-align: left;
  font-family: var(--display); font-stretch: 112%; font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem); letter-spacing: -0.02em;
}
.qa__q i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: transform var(--t-panel) var(--ease), border-color var(--t-panel) var(--ease); }
.qa__q i::before, .qa__q i::after { content: ""; position: absolute; inset: 50% 7px auto; height: 1px; background: var(--mist); transition: opacity var(--t-focus) var(--ease); }
.qa__q i::after { transform: rotate(90deg); }
.qa__item.open .qa__q i { transform: rotate(180deg); border-color: var(--brass); }
.qa__item.open .qa__q i::after { opacity: 0; }
.qa__a { overflow: hidden; height: 0; }
.qa__a p { margin: 0 0 26px; max-width: 76ch; font-size: 0.96rem; }

/* --- kapanis ------------------------------------------------------------- */
.close { position: relative; overflow: hidden; text-align: center; }
.close__halo {
  position: absolute; left: 50%; top: 42%; width: 118vw; height: 56vh; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(216,166,87,.2), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.close .mega { margin-inline: auto; max-width: 14ch; }
.close .lede { margin-inline: auto; text-align: center; }
.close__acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: calc(var(--unit) * 5); }
.close__note { margin-top: calc(var(--unit) * 4); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dust); }

/* --- altbilgi ------------------------------------------------------------ */
.foot { border-top: 1px solid var(--line); background: var(--void-2); padding-block: clamp(50px, 8vh, 92px) 40px; }
.foot__grid { display: grid; gap: clamp(28px, 4vw, 70px); }
@media (min-width: 880px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); margin: 0 0 18px; font-weight: 500; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.foot a { color: var(--mist); font-size: 0.92rem; transition: color var(--t-focus) var(--ease); }
/* Mobilde ayak baglantilari en az 44px dokunma alani alsin (WCAG 2.5.8 asgari 24px). */
@media (max-width: 880px) {
  .foot ul { gap: 2px; }
  .foot li > a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; }
  .foot__legal a { display: inline-block; min-height: 24px; padding-block: 4px; }
}
.foot a:hover { color: var(--brass-lit); }
.foot__lock img { width: min(300px, 74%); border-radius: 12px; margin-bottom: 18px; }
.foot__legal {
  margin-top: clamp(36px, 6vh, 68px); padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between;
}
.foot__legal p { margin: 0; font-size: 0.76rem; line-height: 1.65; color: var(--dust); max-width: 74ch; }

/* --- bosta ekran koruyucu (uygulamanin bosta davranisi) ------------------ */
.saver {
  position: fixed; inset: 0; z-index: 100; opacity: 0; visibility: hidden;
  background: var(--void); overflow: hidden;
  transition: opacity 900ms var(--ease), visibility 0s linear 900ms;
}
.saver.on { opacity: 1; visibility: visible; transition: opacity 1400ms var(--ease), visibility 0s; }
.saver__bed { position: absolute; inset: 0; }
.saver__bed img {
  /* Bunlar dock ve durum kapsulu olmadan hazirlanmis saf duvar kagitlaridir.
     Iki katman vardir: alttaki her an tam opaktir, ustteki 2,8 saniyede belirir.
     Boylece uygulamadaki gibi gecis sirasinda parlaklik cukuru olusmaz. */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.saver__a { z-index: 1; opacity: 1; }
.saver__b { z-index: 2; opacity: 0; }
.saver__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(56deg, rgba(6,7,11,.86) 0%, rgba(6,7,11,.38) 52%, rgba(6,7,11,.12) 100%),
    linear-gradient(180deg, rgba(6,7,11,.42) 0%, rgba(6,7,11,0) 26%, rgba(6,7,11,0) 58%, rgba(6,7,11,.78) 100%);
}
.saver__info { position: absolute; left: var(--safe); bottom: clamp(40px, 8vh, 90px); z-index: 2; }
.saver__clock {
  font-family: var(--display); font-weight: 800; font-stretch: 120%;
  font-size: clamp(4rem, 12vw, 11rem); line-height: 0.86; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.saver__date { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); margin-top: 14px; }
.saver__hint { position: absolute; right: var(--safe); bottom: clamp(40px, 8vh, 90px); z-index: 2; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dust); }

/* --- dokuman sayfalari (gizlilik, kosullar) ------------------------------ */
.doc { padding-block: clamp(120px, 18vh, 200px) clamp(70px, 10vh, 130px); }
.doc h1 { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.04em; margin: 0 0 10px; line-height: 1; }
.doc .stamp { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--dust); margin-bottom: 36px; }
.doc h2 { font-family: var(--display); font-stretch: 112%; font-size: clamp(1.2rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; margin: 44px 0 14px; }
.doc h3 { font-size: 1.02rem; margin: 26px 0 10px; color: var(--bone); }
.doc p, .doc li { font-size: 0.96rem; line-height: 1.75; color: var(--mist); max-width: 76ch; }
.doc ul { padding-left: 20px; display: grid; gap: 10px; }
.doc strong { color: var(--bone); }
.doc code { font-family: var(--mono); font-size: 0.88em; color: var(--brass-lit); }
.doc__nav { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- imlec --------------------------------------------------------------- */
.cur, .cur-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 90; border-radius: 50%; }
.cur { width: 6px; height: 6px; background: var(--brass-lit); margin: -3px 0 0 -3px; }
.cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(240,238,233,.3); transition: width var(--t-panel) var(--ease), height var(--t-panel) var(--ease), border-color var(--t-panel) var(--ease); }
.cur-ring.hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--brass); }
@media (hover: none), (max-width: 1040px) { .cur, .cur-ring { display: none; } }

/* --- grenli doku --------------------------------------------------------- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(5) infinite;
}
@keyframes grain {
  0%, 100% { background-position: 0 0; }
  20% { background-position: -36px 26px; }
  40% { background-position: 28px -34px; }
  60% { background-position: -26px -28px; }
  80% { background-position: 34px 32px; }
}

/* --- yardimcilar --------------------------------------------------------- */
.dim { color: var(--dust); }
.mid { text-align: center; }
.small { font-size: 0.86rem; }
[id] { scroll-margin-top: 92px; }

/* --- hareket azaltma ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .grain { display: none; }
  .stage__deck img { opacity: 1; }
  .stage__deck img + img { display: none; }
  .saver { display: none; }
  .hero__bed { clip-path: none; }
}


/* --- sabit cubuklarin altinda kalan icerik ------------------------------- */
@media (min-width: 1040px) { .foot { padding-bottom: 160px; } }
@media (max-width: 1039px) { .foot { padding-bottom: 120px; } }

/* --- dar ekranda ayar satirlari ------------------------------------------ */
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr auto; gap: 4px 14px; }
  .row__val { grid-column: 1 / 2; text-align: left; }
  .row__chev { grid-row: 1; grid-column: 2; }
}

/* --- imlec izi havuzu ---------------------------------------------------- */

/* --- dokuman sayfasi ust cubugu ------------------------------------------ */
.backhome {
  position: fixed; z-index: 60;
  top: max(16px, env(safe-area-inset-top, 0px)); right: var(--safe);
}


/* --- raylar: 27 ekran, kendiliginden akan iki sira ------------------------ */
.rails { overflow: hidden; padding-block: clamp(14px, 2vh, 28px) clamp(6px, 1.2vh, 18px); }
.rail { overflow: hidden; margin-bottom: clamp(12px, 1.4vw, 22px); }
.rail__row { display: flex; gap: clamp(12px, 1.2vw, 20px); width: max-content; will-change: transform; }
.rail__item {
  position: relative; flex: none; width: clamp(300px, 34vw, 560px);
  display: block; padding: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--panel); cursor: pointer;
  transition: transform var(--t-focus) var(--ease), border-color var(--t-focus) var(--ease);
}
.rail__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rail__item b {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em;
  padding: 4px 9px; border-radius: 999px; color: var(--bone);
  background: rgba(6, 7, 11, 0.62); border: 1px solid var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rail__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px; text-align: left;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
  background: linear-gradient(transparent, rgba(6, 7, 11, 0.88));
}
.rail__item:hover, .rail__item:focus-visible { transform: scale(1.045); border-color: var(--brass); }
.rails__note { margin-top: clamp(16px, 2vw, 28px); }
@media (max-width: 700px) { .rail__item { width: 82vw; } }

/* --- buyutme katmani ----------------------------------------------------- */
.lens {
  position: fixed; inset: 0; z-index: 105; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) var(--safe) 24px;
  background: rgba(4, 5, 8, 0.93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-panel) var(--ease), visibility 0s linear var(--t-panel);
}
.lens.on { opacity: 1; visibility: visible; transition: opacity var(--t-panel) var(--ease), visibility 0s; }
.lens__box { margin: 0; max-width: min(1240px, 94vw); }
.lens__box img {
  width: 100%; border-radius: clamp(8px, 1vw, 16px);
  border: 1px solid var(--line-2); box-shadow: 0 50px 110px -40px #000;
}
.lens__close {
  position: absolute; top: max(20px, env(safe-area-inset-top, 0px)); right: var(--safe);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(240, 238, 233, 0.06);
  color: var(--bone); display: grid; place-items: center; font-size: 0.95rem;
  transition: background var(--t-focus) var(--ease), border-color var(--t-focus) var(--ease);
}
.lens__close:hover { background: rgba(240, 238, 233, 0.13); border-color: var(--brass); }


/* --- hareket azaltmada yatay seritler ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* Serit kendiliginden akmaz, parmakla kaydirilir. Buyutme katmani calismaya
     devam eder: kapatmak erisilebilirligi bozardi. */
  .rail { overflow-x: auto; }
  .rail__row { transform: none !important; }
}

/* --- adim adim anlatim (kapali test) ------------------------------------ */
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 34px); counter-reset: none; }
.howto__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 1.6vw, 22px); align-items: start; }
.howto__n {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
  color: var(--brass); padding-top: 4px;
  min-width: 2.4em;
}
.howto__t {
  font-family: var(--display); font-stretch: 112%; font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem); line-height: 1.24; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--bone);
}
.howto p { margin: 0; font-size: 0.95rem; line-height: 1.6; max-width: 58ch; }
.howto strong { color: var(--bone); font-weight: 600; }
.howto__item + .howto__item { border-top: 1px solid var(--line); padding-top: clamp(20px, 2.4vw, 34px); }
@media (max-width: 560px) {
  .howto__item { grid-template-columns: 1fr; gap: 6px; }
  .howto__n { padding-top: 0; }
}