/* Yeslist ortak kabuk · "Sahne ve ışık" (TASARIM-01 parti 7.0, plan v2).
   BÜTÜN sayfalar bu dosyayı yükler: yazı tipleri, renk rolleri, header, tam
   ekran menü, butonlar, sahne, afiş başlık, footer, belirme. Sayfa geçişinde
   hiçbir şey zıplamasın diye bu parçalar tek yerde durur. Landing'e özel
   bölümler landing.css'tedir. Kullanılmayanlar (eski Safari): color-mix(),
   backdrop-filter. Hareket yalnız transform ve opacity ile yapılır. */

@font-face {
  font-family: "Bricolage Grotesque Display";
  /* Dar (wdth 75), optik boy 96, ağırlık 600-800; Türkçe alt küme, 23 KB. */
  src: url("../fonts/bricolage-grotesque-display-tr.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque-display-tr.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  /* Afiş başlıkta yanlış yazı tipiyle bir an görünmek satırı taşırır. */
  font-display: block;
}

:root {
  --font-poster: "Bricolage Grotesque Display", "Arial Narrow", "Roboto Condensed", "Manrope", sans-serif;

  --stage: #0c3220;
  --stage-deep: #09251a;
  --stage-hi: #1b5e38;
  --stage-panel: #0f3a25;
  --stage-text: #f4f7ee;
  --stage-text-soft: rgb(244 247 238 / 74%);
  --stage-text-dim: rgb(244 247 238 / 50%);
  --stage-line: rgb(255 255 255 / 11%);
  --stage-no: #ff9d8a;
  --lime: #b7f24a;
  --lime-deep: #8fc431;
  --lime-ink: #10231a;
  --red: #c62d1f; /* kağıt üstünde tek kelimelik vurgu ve "elendi" anlamı (ders 17.09) */

  --head-h: 64px;
  --flow-row: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 28.09: yatay taşan süs/metin sayfayı genişletip IG WebView'da uzaklaştırıyordu; kırp. */
html, body { overflow-x: clip; }

/* Sabit header çapa hedefini örtmesin. */

section[id] { scroll-margin-top: calc(var(--head-h) + 8px); }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }

.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: 80;
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

/* Yıldız: ilandaki gizli şartın işareti. Tek çizim, her yerde aynı. */

.star { display: inline-block; overflow: visible; }

.star g { fill: none; stroke: currentColor; stroke-width: 4.4; stroke-linecap: round; }

/* ---------------------------------------------------------------- header */

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.head[data-tone="stage"] { color: var(--stage-text); }

.head[data-tone="stage"][data-stuck] {
  background: var(--stage);
  box-shadow: 0 1px 0 var(--stage-line);
}

.head[data-tone="paper"] {
  color: var(--color-ink);
  background: #fbfcf8;
  box-shadow: 0 1px 0 var(--color-border);
}

.head-row {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-block: 0;
  padding-inline: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--head-h);
}

/* Logo: "yesl" + noktası onay işareti olan "ı" + "st" */

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}

.brand-i {
  height: 0.78em;
  width: 0.44em;
  /* HERO-02 B (kurucu 25117): büyük boyutta "yesl ı st" okunuyordu; sağ pay sıkı. */
  margin-left: -0.005em;
  margin-right: -0.085em;
  vertical-align: baseline;
  overflow: visible;
}

.brand-stem { fill: currentColor; }

.brand-tick {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.head[data-tone="stage"] .brand-tick,
.menu .brand-tick { stroke: var(--lime); }

.nav-wide { display: none; }

.head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 7%);
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
}

.head[data-tone="paper"] .menu-btn {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.menu-bars { display: inline-flex; flex-direction: column; gap: 5px; }

.menu-bars i {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, background-color 160ms ease;
}

.btn-arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }

.btn:hover .btn-arrow { transform: translate3d(4px, 0, 0); }

/* Sahnede birincil buton: filiz zemin, mürekkep yazı. Basılabilir his için
   altında koyu filiz kenar; dokununca çöker. */

.btn-lime {
  background: var(--lime);
  color: var(--lime-ink);
  box-shadow: 0 4px 0 var(--lime-deep), 0 16px 36px rgb(183 242 74 / 22%);
}

.btn-lime:hover { background: #c4f760; }

.btn-lime:active { transform: translate3d(0, 3px, 0); box-shadow: 0 1px 0 var(--lime-deep); }

.btn-brand { background: var(--color-brand); color: #fff; box-shadow: 0 4px 0 var(--color-brand-dark), 0 14px 30px rgb(16 73 43 / 20%); }

.btn-brand:hover { background: #1b6f43; }

.btn-brand:active { transform: translate3d(0, 3px, 0); box-shadow: 0 1px 0 var(--color-brand-dark); }

.btn-ink { background: var(--lime-ink); color: var(--lime); box-shadow: 0 4px 0 #000, 0 14px 30px rgb(16 35 26 / 22%); }

.btn-ink:active { transform: translate3d(0, 3px, 0); box-shadow: 0 1px 0 #000; }

.btn-ghost {
  background: transparent;
  color: var(--stage-text);
  border-color: rgb(255 255 255 / 30%);
}

.btn-xl { min-height: 60px; padding: 0 var(--space-8); font-size: 1.125rem; }

/* Header butonu: telefonda hero butonu ekrandan çıkınca belirir. */

.btn-head {
  min-height: 44px;
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
  background: var(--lime);
  color: var(--lime-ink);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -6px, 0);
  transition: opacity 220ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms, background-color 160ms ease;
}

.head[data-cta-on] .btn-head {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms ease, transform 220ms var(--ease-out), visibility 0s, background-color 160ms ease;
}

.head[data-tone="paper"] .btn-head { background: var(--color-brand); color: #fff; }

.btn:focus-visible, .menu-btn:focus-visible, .menu-close:focus-visible, .brand:focus-visible, a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.head[data-tone="paper"] a:focus-visible, .plans a:focus-visible, .steps a:focus-visible { outline-color: var(--color-brand); }

/* ---------------------------------------------------------------- mobil menü */

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  padding-inline: var(--space-5);
  background: var(--stage);
  background-image: radial-gradient(90% 60% at 100% 0%, var(--stage-hi) 0%, rgb(27 94 56 / 0%) 70%);
  color: var(--stage-text);
  opacity: 0;
  transition: opacity 220ms ease;
  overflow-y: auto;
}

.menu[hidden] { display: none; }

.menu[data-open] { opacity: 1; }

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--head-h);
  flex: 0 0 auto;
}

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 7%);
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
}

.menu-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.menu-links {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
}

.menu-links a {
  display: block;
  overflow: hidden;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--stage-line);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: clamp(2.5rem, 11.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.005em;
}

.menu-links a span {
  display: block;
  transform: translate3d(0, 115%, 0);
  transition: transform 560ms var(--ease-out);
}

.menu[data-open] .menu-links a span { transform: none; }

.menu-links a:nth-child(2) span { transition-delay: 50ms; }

.menu-links a:nth-child(3) span { transition-delay: 100ms; }

.menu-links a:nth-child(4) span { transition-delay: 150ms; }

.menu-links a:active, .menu-links a:hover { color: var(--lime); }

.menu-foot {
  margin-top: auto;
  padding-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 360ms ease 200ms, transform 480ms var(--ease-out) 200ms;
}

.menu[data-open] .menu-foot { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- sahne */

.stage {
  position: relative;
  overflow: hidden;
  color: var(--stage-text);
  background-color: var(--stage);
  background-image:
    radial-gradient(110% 70% at 88% 0%, var(--stage-hi) 0%, rgb(27 94 56 / 0%) 62%),
    linear-gradient(180deg, var(--stage) 0%, var(--stage-deep) 100%);
}

/* "Liste" fikri: zeminde çok silik satır çizgileri. */

.stage-rules {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 0%) 63px, rgb(255 255 255 / 3.5%) 63px, rgb(255 255 255 / 3.5%) 64px);
  pointer-events: none;
}

.stage-glow {
  position: absolute;
  top: -22vmin;
  right: -28vmin;
  width: 90vmin;
  height: 90vmin;
  background: radial-gradient(closest-side, rgb(183 242 74 / 20%), rgb(183 242 74 / 0%));
  pointer-events: none;
}

/* ---------------------------------------------------------------- ortak bölüm parçaları */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--color-brand);
}

.eyebrow .star { width: 1em; height: 1em; color: var(--red); }

.poster {
  margin: 0;
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: clamp(2.75rem, 13vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}

.poster > span { display: block; white-space: nowrap; }

.poster-red { color: var(--red); }

.poster-green { color: var(--color-brand); }

.poster-stage { color: var(--stage-text); }

.poster-lime { color: var(--lime); }

.eyebrow-stage { color: var(--lime); }

/* ---------------------------------------------------------------- mercek */

/* Düz sahne: taşma gizlenmez, çünkü okuma ışını `position: sticky` ile
   ekranın ortasına yapışır; `overflow: hidden` bir atada olsa yapışmaz. */

.stage-flat {
  position: relative;
  color: var(--stage-text);
  background-color: var(--stage);
  background-image: linear-gradient(180deg, var(--stage-deep) 0%, var(--stage) 38%, var(--stage) 62%, var(--stage-deep) 100%);
}

.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); border-width: 2px; }

.btn-outline:hover { background: var(--color-ink); color: #fff; }

.foot {
  padding: var(--space-10) 0 calc(var(--space-10) + env(safe-area-inset-bottom));
  background: var(--stage-deep);
  color: var(--stage-text);
  border-top: 1px solid var(--stage-line);
}

.foot-grid { display: grid; gap: var(--space-8); }

.foot-brand { font-size: 1.75rem; }

.foot .brand-tick { stroke: var(--lime); }

.foot-brand-col p { margin: var(--space-3) 0 0; max-width: 22rem; font-size: 1rem; color: var(--stage-text-soft); }

.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }

.foot-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--stage-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--stage-line);
}

.foot-nav a:hover { color: var(--lime); }

/* Satıcı künyesi ve ödeme logoları (29.09, iyzico başvuru koşulları). Uzun e-posta/KEP satırı
   dar ekranda kırılır; logo bandı kutusuna sığacak kadar küçülür, taşma olmaz. */
.firma { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--stage-line); color: var(--stage-text-soft); font-size: 0.9375rem; line-height: 1.55; }
.firma-baslik { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; }
.firma-baslik a { color: var(--stage-text); text-decoration: none; }
.firma-baslik a:hover { color: var(--lime); }
.firma p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.firma-unvan { color: var(--stage-text); font-weight: 700; }
.firma-satirlar { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.firma-satirlar li { overflow-wrap: anywhere; }
.firma a { color: var(--stage-text); }
.firma .firma-odeme { display: inline-block; max-width: 100%; margin: var(--space-3) 0 0; padding: 10px 14px; border-radius: 12px; background: #fff; line-height: 0; }
.firma-odeme img { display: block; max-width: 100%; height: auto; }
@media (max-width: 40rem) { .firma { padding-bottom: 64px; } }

/* ---------------------------------------------------------------- belirme */

/* Yalnız JavaScript çalışıyorsa gizlenir: betik yüklenmezse içerik görünür. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 360ms ease, transform 520ms var(--ease-out);
}

.js [data-reveal][data-shown] { opacity: 1; transform: none; }

@media (max-width: 22.5rem) {
  .head-row { gap: var(--space-2); }
  .head-actions { gap: 6px; }
  .btn-head { padding: 0 0.8rem; font-size: 0.8125rem; }
  .menu-btn { padding: 0 0.7rem; gap: 6px; }
}

/* 28.09: telefonun yazı boyutu büyükse header satırı taşıyordu; v3-head.js ölçüp data-dar koyar. */
.head[data-dar] .head-row { gap: var(--space-2); padding-inline: var(--space-4); }
.head[data-dar] .head-actions { gap: 6px; }
.head[data-dar] .btn-head { padding: 0 0.8rem; }
.head[data-dar] .menu-btn { padding: 0 0.75rem; }
.head[data-dar] .menu-btn > span:last-child {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (min-width: 48rem) {
  :root { --head-h: 76px; --flow-row: 68px; }
  .wrap, .head-row { padding-inline: var(--space-8); }
  .menu-btn { display: none; }
  .nav-wide {
      display: flex;
      gap: var(--space-8);
      margin-left: var(--space-10);
    }
  .nav-wide a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      color: inherit;
      text-decoration: none;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.9375rem;
      opacity: 0.86;
      transition: opacity 160ms ease;
    }
  .nav-wide a:hover { opacity: 1; }
  .head[data-tone="stage"] .nav-wide a:hover { color: var(--lime); }
  .btn-head { opacity: 1; visibility: visible; transform: none; }
  .btn-xl { min-height: 64px; font-size: 1.1875rem; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-16); }
  .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
  .js [data-reveal] { opacity: 1; transform: none; }
  .menu-links a span, .menu-foot { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------- iç sayfa */
/* Header sabit olduğu için iç sayfa gövdesi üstten header kadar boşluk alır. */
.page { padding-top: calc(var(--head-h) + env(safe-area-inset-top)); }

/* Panelim (kurucu 25113/25123): üye gezinmesi; her üye sayfasında (site/base.html, yalnız giriş yapmış üye). */
/* ---------- Üye gezinmesi: telefonda alt sekme, masaüstünde sekmeler ---------- */
.un {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -6px 24px rgb(12 50 32 / 8%);
}
.un-row { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 40rem; margin: 0 auto; }
.un-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 10px; min-height: 58px;
  color: var(--color-ink-soft); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em;
}
.un-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.un-item.is-active { color: var(--color-brand); }
.un-item.is-active svg { stroke-width: 2.2; }
.un-item:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; border-radius: 12px; }
body:has(.un) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)); }
/* Odaklanan / kaydırılan öğe alttaki sabit çubuğun altında kalmasın (klavye ve dokunma). */
html:has(.un) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0)); }

@media (min-width: 48rem) {
  body:has(.un) { padding-bottom: 0; }
  html:has(.un) { scroll-padding-bottom: 0; }
  .un { position: static; background: transparent; border: 0; box-shadow: none; padding: 0; }
  .un-row { display: flex; gap: 6px; padding: 14px var(--space-8) 0; max-width: var(--container); }
  .un-item {
    flex-direction: row; gap: 8px; min-height: 44px; padding: 0 16px;
    border-radius: 999px; font-size: 0.92rem; color: var(--color-ink);
  }
  .un-item svg { width: 20px; height: 20px; }
  .un-item:hover { background: var(--color-surface); }
  .un-item.is-active { background: var(--stage); color: var(--stage-text); }
}

/* WhatsApp balonu (23.09): yalnız giriş yapmamış ziyaretçi; menü (60) ve header (40+) altında kalmaz, menü açıkken örtülür. */
.wa-balon {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  background: #1f9d55; color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1;
  box-shadow: 0 10px 26px rgb(12 50 32 / 22%);
}
.wa-balon svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.wa-balon:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
@media (max-width: 40rem) { .wa-balon { padding: 13px; } .wa-balon span { display: none; } }
@media print { .wa-balon { display: none; } }