/* /habits — Güzel Alışkanlıklar · "Aynı Gün"
   ═══════════════════════════════════════════════════════════════════════
   ⚠️ BU DOSYA sel.css'İN KOPYASI DEĞİL (26 Ağu 2026, ikinci tur). İlk sürüm
   öyleydi — sel.css alınıp paleti değiştirilmişti — ve sonuç aynı sayfanın
   yeşil hâliydi: aynı doodle deseni, aynı koyu zemin, aynı düzen ritmi.

   AÇIK ZEMİN BİLEREK. Sitedeki üç ürün sayfası da koyu (SEL mor, /turkiye
   teal, /thy siyah). Habits'in konusu sabah ve öğleden sonra: diş fırçalama,
   hazırlanma, ödev, oda toplama. Gündüz bu ürünün dürüst tonu, ve sayfayı bir
   bakışta kardeşlerinden ayıran tek eksen bu.

   Maliyeti sanıldığı kadar yüksek değil: base.css AÇIK ZEMİN İÇİN yazılmış
   (`var(--card-bg, #fff)`, `var(--card-border, rgba(0,0,0,0.1))` gibi açık
   yedeklerle); koyu olan sel.css ve turkiye.css onu eziyor. Bu dosyanın
   ezmesi gereken yalnızca üç blok var — form alanları, fotoğraf kutusu ve
   hata kutusu — hepsi aşağıda "BASE.CSS EZMELERİ" başlığı altında toplandı.
   Yeni bir bileşen eklenirken oraya bakılır.

   YAPI = ÖDÜL ÇİZELGESİ. Ebeveynin buzdolabında duran şey. Arka plan çizelge
   kareleri, adım numarası kazanılmış bir damga, konu ızgarası çizelgenin
   kendisi. Süsleme değil: ürünün konuştuğu kitlenin kendi nesnesi.

   İMZA ÖĞESİ = "AYNI GÜN" ŞERİDİ (.daystrip). Ürünün tüm vaadi tek cümlede
   — sonuç aynı gün görünür. Kart bir günü iki kez gösteriyor: eylemin saati,
   sonucun saati, arada bir yay. sel.css'teki daktilo efektinin yerini alıyor
   ama hareket için hareket değil; gösterdiği şey ürünün mekanizması.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — Palet ————————————————————————————————
     Zemin BİLEREK krem değil (#F4F1EA ailesi): o ton sitenin sıcak amberiyle
     çakışıyor ve "editoryal dergi" hissi veriyor. Buradaki zemin yeşile
     çalan bir defter beyazı — konu kartları üstüne oturunca çizelge okunuyor. */
  --wash:    #f3f8f4;   /* sayfa zemini */
  --card:    #ffffff;   /* kart yüzeyi */
  --ink:     #16321f;   /* metin — saf siyah değil, koyu orman */
  --leaf:    #2f8f52;   /* çalışan yeşil: açık zeminde kontrastı geçen ton */
  --sprout:  #5fbf7a;   /* brief §7 yeşili — dolgu ve damga */
  --coral:   #ff6b4a;   /* brief §7 mercanı, açık zemin için bir tık doygun */
  --sun:     #ffc94d;   /* rozet sarısı — "kazanıldı" dili */

  /* — base.css'in okuduğu değişkenler ————————————— */
  --accent:      var(--leaf);
  --accent-soft: rgba(95,191,122,0.28);
  --text:        var(--ink);
  --muted:       rgba(22,50,31,0.62);
  --card-bg:     var(--card);
  --card-border: rgba(22,50,31,0.12);
  --danger:      #d64524;
  --header-bg:   rgba(243,248,244,0.86);
  --slider-track: linear-gradient(90deg, var(--sprout), var(--coral));

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-util:    'Inter', -apple-system, sans-serif;

  --radius: 14px;
  --radius-lg: 24px;

  --cell: 34px;         /* çizelge karesi — arka plan ve ritim bundan türüyor */
  --shadow-sm: 0 1px 2px rgba(22,50,31,0.06), 0 4px 12px rgba(22,50,31,0.05);
  --shadow-md: 0 2px 4px rgba(22,50,31,0.07), 0 12px 32px rgba(22,50,31,0.08);
}

body {
  font-family: var(--font-body);
  background: var(--wash);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* içeriği çizelge katmanının üstünde tut */
.product-header, .hero, .why-section, .form-wrapper, .longform, .page-footer {
  position: relative;
  z-index: 1;
}

/* ════════ ÇİZELGE ARKA PLANI ════════
   sel.css'te burada 6 KB'lık bir doodle SVG'si vardı (kitaplar, yıldızlar,
   bulutlar — rastgele serpiştirilmiş). Yerini iki çizgi gradyanı aldı: ödül
   çizelgesinin kareleri. Hem konuyla ilgili hem tek bir bayt varlık
   indirmiyor. Kareler sayfanın ritmini de veriyor (--cell). */
.chart-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='374' height='272' viewBox='0 0 374 272'%3E%3Cpath d='M45.3 17.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3Cpath d='M221.0 9.8 L222.8 14.5 L227.8 14.8 L223.9 18.0 L225.2 22.8 L221.0 20.1 L216.8 22.8 L218.1 18.0 L214.2 14.8 L219.2 14.5 Z' fill='%23e8a72e' opacity='.22'/%3E%3Ccircle cx='119.0' cy='51.0' r='6' stroke='%2316321f' stroke-width='1.5' fill='none' opacity='.10'/%3E%3Cpath d='M317.3 51.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3Ccircle cx='187.0' cy='85.0' r='6' stroke='%2316321f' stroke-width='1.5' fill='none' opacity='.10'/%3E%3Cpath d='M11.3 119.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3Ccircle cx='255.0' cy='119.0' r='6' stroke='%2316321f' stroke-width='1.5' fill='none' opacity='.10'/%3E%3Cpath d='M351.3 119.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3Cpath d='M147.3 153.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3Cpath d='M357.0 179.8 L358.8 184.5 L363.8 184.8 L359.9 188.0 L361.2 192.8 L357.0 190.1 L352.8 192.8 L354.1 188.0 L350.2 184.8 L355.2 184.5 Z' fill='%23e8a72e' opacity='.22'/%3E%3Ccircle cx='85.0' cy='221.0' r='6' stroke='%2316321f' stroke-width='1.5' fill='none' opacity='.10'/%3E%3Cpath d='M215.3 221.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3Cpath d='M17.0 247.8 L18.8 252.5 L23.8 252.8 L19.9 256.0 L21.2 260.8 L17.0 258.1 L12.8 260.8 L14.1 256.0 L10.2 252.8 L15.2 252.5 Z' fill='%23e8a72e' opacity='.22'/%3E%3Cpath d='M283.3 255.6 l4 4 l7.5 -9' stroke='%232f8f52' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='.17'/%3E%3C/svg%3E"),
    linear-gradient(rgba(47,143,82,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,143,82,0.07) 1px, transparent 1px);
  /* İşaret döşemesi 11×8 hücre = 374×272. İkisi de 0,0'dan başlayıp --cell'in
     katı olduğu için işaretler hücre MERKEZLERİNE oturuyor; --cell değişirse
     buradaki iki sayı da değişmeli, yoksa damgalar çizgilerin üstüne kayar.
     Döşeme BİLEREK büyük: 8×6 denendi (27 Ağu), 1280px ekranda beş kez
     tekrarlıyor ve göz deseni "kopyala-yapıştır" diye okuyordu. */
  background-size: 374px 272px, var(--cell) var(--cell), var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(ellipse 120% 78% at 50% 0%, #000 32%, transparent 84%);
          mask-image: radial-gradient(ellipse 120% 78% at 50% 0%, #000 32%, transparent 84%);
}

/* ⚠️ Burada bir zamanlar "damgalanmış kareler" vardı: renkli RADIAL NOKTALAR.
   Tarayıcıda bakıldığında çizelge damgası gibi değil, ekrandaki is lekesi gibi
   okunuyorlardı. 27 Ağu 2026'da damgalar geri geldi ama bu kez nokta değil,
   TANINABİLİR ŞEKİL: tik, boş halka, yıldız — yani gerçekten bir ödül
   çizelgesinin işaretleri. Yoğunluk 88 hücrede 14 işaret; artırılırsa duvar
   kâğıdı olmaktan çıkıp metnin önüne geçer.

   ⚠️ Bu bir DESEN, bir tablo değil. Sayısı, sırası, kaç tanesinin dolu olduğu
   hiçbir şey iddia etmiyor — hero'da denenen "5 alışkanlık × 5 gün" kartı tam
   da bu yüzden geri alındı (27 Ağu): ayakkabı bağlamayı haftada bir yapılan
   bir şey gibi gösteriyordu. */

/* ════════ ÜST ÇUBUK ════════ */
.product-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(22,50,31,0.08);
}

.product-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lang-switcher { display: flex; gap: 4px; }

.lang-btn {
  font-family: var(--font-util);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.lang-btn:hover { color: var(--ink); background: rgba(22,50,31,0.05); }
.lang-btn.active {
  color: var(--leaf);
  border-color: rgba(47,143,82,0.32);
  background: rgba(95,191,122,0.14);
}

.scroll-progress-track { background: rgba(22,50,31,0.07); }
.scroll-progress-bar { background: linear-gradient(90deg, var(--sprout), var(--coral)); }

/* ════════ HERO ════════
   sel.css'te hero iki sütunlu: solda metin, sağda kare illüstrasyon + yüzen
   kart. Burada tek kolon ve MERKEZDE değil sola yaslı bir tipografik açılış,
   altında imza şeridi tam genişlikte. Sebep: sayfanın tezi görsel değil,
   "aynı gün" mekanizması — o yüzden en geniş yeri o alıyor. */
.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 86px) 22px clamp(28px, 4vw, 44px);
}

.hero-inner { max-width: 780px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-util);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
  background: rgba(95,191,122,0.15);
  border: 1px solid rgba(47,143,82,0.22);
  padding: 7px 14px;
  border-radius: 999px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  flex: none;
}

.hero-h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  /* Ölçüldü (1200px, tarayıcı): 60px + 16ch başlığı BEŞ satıra bölüyor ve
     imza şeridini tamamen ekranın dışına itiyordu. Brief'in cümlesi uzun,
     o yüzden punto küçüldü ve satır genişledi — üç satırda oturuyor. */
  /* Ölçüldü (1200px, tarayıcı): 60px + 16ch başlığı BEŞ satıra bölüyor ve
     imza şeridini tamamen ekranın dışına itiyordu. */
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* Başlıktaki tek vurgulu parça. Altındaki çizgi bir "işaretleme" jesti —
   ebeveynin listede işaretlediği şey. */
.hero-h1 em {
  font-style: italic;
  color: var(--leaf);
  position: relative;
  white-space: nowrap;
}
.hero-h1 em::after {
  content: '';
  position: absolute;
  left: -0.04em; right: -0.04em; bottom: 0.04em;
  height: 0.30em;
  background: rgba(255,201,77,0.42);
  border-radius: 3px;
  z-index: -1;
}

.hero-desc {
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 52ch;
  margin: 20px 0 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 30px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16.5px;
  color: #fff;
  background: var(--ink);
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-cta:hover {
  background: var(--leaf);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ⚠️ base.css fiyatı ÇERÇEVELİ BİR HAP olarak çiziyor (/sel ve /turkiye'de
   öyle duruyor). Burada CTA da hap biçiminde ve ikisi yan yana: tarayıcıda
   bakıldığında iki düğme gibi okunuyordu, fiyat tıklanabilir sanılıyordu.
   Çerçeve ve zemin kaldırıldı — fiyat bir etiket, bir eylem değil. */
.hero-price {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-util);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.hero-price b {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-util);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--card-border);
  padding: 6px 12px;
  border-radius: 999px;
}
.chip .chk {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--sprout);
  color: #0f2a1a;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}

/* ════════ İMZA — "AYNI GÜN" ŞERİDİ ════════
   Ürünün mekanizması. Bir gün, iki an: eylem ve sonucu. Aradaki yay ikisini
   bağlıyor. Kart birkaç saniyede bir başka alışkanlığa geçiyor — böylece hem
   40 konunun çeşidi hem üç katmanın varlığı hero'da görünüyor.
   Hareket, prefers-reduced-motion açıkken tamamen duruyor (aşağıda). */
.daystrip {
  /* Kart 1120px'teyken iki an birbirinden kopuk duruyordu; yay aradaki
     boşlukta kayboluyordu. 940px'te ikisi bir çift gibi okunuyor. */
  max-width: 940px;
  margin: clamp(30px, 5vw, 52px) auto 0;
  padding: 0 22px;
}

.ds-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 34px) clamp(18px, 2.5vw, 24px);
  overflow: hidden;
}

/* Üstte ince bir gün çubuğu: sabahtan akşama. Kartın "bir gün" olduğunu
   söyleyen tek işaret — yazıyla tekrar edilmiyor. */
.ds-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sun), var(--sprout) 46%, var(--coral));
}

.ds-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 18px;
}

.ds-title {
  font-family: var(--font-util);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0;
}

.ds-habit {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 600;
  margin: 0;
}
.ds-layer {
  font-family: var(--font-util);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 9px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(22,50,31,0.055);
  white-space: nowrap;
}

.ds-slides { position: relative; }

.ds-slide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(12px, 2vw, 24px);
}

/* Görünmeyen slaytlar akıştan çıkmıyor — üst üste duruyorlar ki kartın
   yüksekliği en uzun metne göre sabit kalsın ve geçişte zıplama olmasın. */
.ds-slide:not(.is-on) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.ds-slide.is-on { position: relative; opacity: 1; }

body.js-anim .ds-slide { transition: opacity .5s ease; }

.ds-moment {
  border-radius: var(--radius);
  padding: 16px 18px;
  background: rgba(22,50,31,0.035);
  border: 1px solid rgba(22,50,31,0.07);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Sonuç anı renkli — "önce" sakin, "sonra" canlı. Split-panel fikrinin
   (brief §7) görsel üretmeden karşılığı. */
.ds-moment.is-after {
  background: rgba(255,107,74,0.075);
  border-color: rgba(255,107,74,0.24);
}

.ds-time {
  font-family: var(--font-util);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.ds-moment.is-after .ds-time { color: var(--coral); }

.ds-text {
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.5;
  margin: 0;
}
.ds-moment.is-after .ds-text { font-weight: 700; }

/* Aradaki yay — iki anı bağlayan tek çizgi. */
.ds-arc {
  align-self: center;
  width: clamp(34px, 5vw, 58px);
  height: 30px;
  color: rgba(47,143,82,0.5);
  flex: none;
}

.ds-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 20px;
}
.ds-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(22,50,31,0.16);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ds-dot:hover { background: rgba(22,50,31,0.34); }
.ds-dot.is-on { background: var(--coral); transform: scale(1.32); }

@media (max-width: 640px) {
  .ds-slide { grid-template-columns: 1fr; }
  /* Dikeyde yay 90° dönüyor: akış yukarıdan aşağı. */
  .ds-arc { transform: rotate(90deg); width: 30px; height: 26px; justify-self: center; }
}

/* ════════ NEDEN ÖNEMLİ ════════ */
.why-section {
  max-width: 1120px;
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 0 22px;
}

.why-head { max-width: 46ch; }

.why-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
}
.why-subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--coral);
  margin: 0;
}
.why-desc {
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  line-height: 1.65;
  color: var(--muted);
  margin: 20px 0 0;
  max-width: 58ch;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 34px;
}

/* Kart bir çizelge satırı gibi: solda kazanılmış damga, sağda ne kazanıldığı. */
.why-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm);
}

.wc-stamp {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 16px;
  background: rgba(95,191,122,0.18);
  border: 1.5px solid rgba(47,143,82,0.3);
}
.why-card:nth-child(2) .wc-stamp { background: rgba(255,201,77,0.24); border-color: rgba(214,150,20,0.32); }
.why-card:nth-child(3) .wc-stamp { background: rgba(255,107,74,0.16); border-color: rgba(255,107,74,0.32); }

.wc-title {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.4;
  margin: 5px 0 0;
}

/* ════════ FORM ════════ */
.form-wrapper {
  max-width: 1120px;
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 0 22px;
}

.step-section {
  max-width: 100%;
  padding: 0 0 clamp(38px, 5vw, 58px);
  /* ⚠️ base.css bu bölümün başlığını, alt yazısını, yaş kaydırıcısını, onay
     kutularını ve güven şeridini ORTALIYOR (/sel ve /turkiye ortalı düzende).
     Buradaki düzen baştan sona sola yaslı: hero solda, ızgara solda. İkisi
     karışınca sayfa "yarısı ortalı" görünüyordu. Hepsi burada sola alınıyor. */
  text-align: left;
}
.step-section .step-title,
.step-section .step-sub,
.step-section .submit-wrap,
.step-section .trust-strip { text-align: left; }
.step-section .age-slider-wrap,
.step-section .consent-block,
.step-section .age-topic-note,
.step-section .submit-wrap { margin-left: 0; margin-right: 0; }
.step-section .trust-strip { justify-content: flex-start; }

/* Adım numarası = çizelgede kazanılmış damga. sel.css'te düz bir rakamdı. */
.step-section .step-label {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--font-util);
  font-size: 13px;
  font-weight: 700;
  color: var(--leaf);
  background: rgba(95,191,122,0.16);
  border: 1.5px solid rgba(47,143,82,0.28);
  margin-bottom: 12px;
  opacity: 1;
}

.step-section .step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.16;
  margin: 0;
}

.step-section .step-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 7px 0 0;
}

.option-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.option-card {
  box-shadow: var(--shadow-sm);
  padding: 13px 14px;
  border-width: 1.5px;
}
.option-card:hover { box-shadow: var(--shadow-md); }
.option-card .oc-title { font-size: 14.5px; font-weight: 700; }

/* KONU KARTLARI — sol kenardaki renk şeridi KATMANI gösteriyor.
   sel.css'te ton rastgele çeşitlilikti; burada bilgi taşıyor. Konular
   taksonomide katman katman sıralı, o yüzden ızgarada üç blok görünüyor ve
   gruplama etiketsiz okunuyor. */
.topic-card {
  padding-left: 18px;
  overflow: hidden;
}
.topic-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.topic-card.tone-1::before { background: var(--sprout); }
.topic-card.tone-2::before { background: var(--coral); }
.topic-card.tone-3::before { background: #6db5e3; }

.topic-card.tone-1.selected { border-color: var(--sprout); box-shadow: 0 0 0 3px rgba(95,191,122,0.24); }
.topic-card.tone-2.selected { border-color: var(--coral);  box-shadow: 0 0 0 3px rgba(255,107,74,0.22); }
.topic-card.tone-3.selected { border-color: #6db5e3;       box-shadow: 0 0 0 3px rgba(109,181,227,0.26); }

/* Katman anahtarı — ızgaranın üstünde, üç renk ne demek. */
.layer-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  font-family: var(--font-util);
  font-size: 12px;
  color: var(--muted);
}
.layer-key span { display: inline-flex; align-items: center; gap: 7px; }
.layer-key i {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
}
.lk-1 { background: var(--sprout); }
.lk-2 { background: var(--coral); }
.lk-3 { background: #6db5e3; }

.grid-expand-btn {
  border-color: rgba(47,143,82,0.3);
  color: var(--leaf);
  background: var(--card);
  font-family: var(--font-util);
}
.grid-expand-btn:hover { background: rgba(95,191,122,0.1); }

/* Yaş kilidi notu */
.age-topic-note {
  max-width: 520px;
  margin: 16px auto 0;
  background: rgba(255,201,77,0.16);
  border: 1px solid rgba(214,150,20,0.3);
  border-radius: var(--radius);
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.age-slider-wrap { margin-top: 26px; }
.age-slider-value { font-family: var(--font-display); font-weight: 600; }
.age-slider-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-util);
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.field-narrow { max-width: 420px; margin-top: 22px; }

.consent-block { margin-top: 22px; }
.consent-row { box-shadow: var(--shadow-sm); }

.submit-wrap { max-width: 520px; margin: 30px auto 0; text-align: center; }

.pay-note {
  font-family: var(--font-util);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.submit-btn {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 17px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .18s ease, transform .18s ease;
}
.submit-btn:not(:disabled):hover { background: var(--leaf); transform: translateY(-2px); opacity: 1; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 24px;
  font-family: var(--font-util);
  font-size: 12.5px;
  color: var(--muted);
}
.trust-item { display: inline-flex; align-items: center; gap: 7px; }

/* ════════ UZUN METİN BÖLÜMÜ ════════
   sel.css'te bu bölümün sınıf adları .sel-* idi ve /habits ilk sürümde onları
   aynen kullanıyordu — iki sayfa aynı isimleri paylaşınca birinde yapılan bir
   düzeltme ötekini sessizce etkileyebiliyordu. Burada kendi adları var. */
.longform {
  max-width: 1120px;
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 0 22px;
}
/* Kap GENİŞ, ölçü DAR: kartlar (katmanlar) üç sütun olabilsin ama düz metin
   okunabilir satır uzunluğunda kalsın. Tek bir 74ch kabı kullanıldığında üç
   katman kartından ikisi yan yana geliyor, üçüncüsü altta tek başına kalıp
   yanında boşluk bırakıyordu. */
.longform-inner { max-width: 1076px; }
.longform h2,
.longform h3,
.longform p,
.longform-lede { max-width: 68ch; }

.longform h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.longform-lede {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.68;
  color: var(--muted);
  margin: 0;
}
.longform p { line-height: 1.72; margin: 16px 0 0; }
.longform h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.012em;
  margin: 44px 0 0;
}

/* ════════ ALT BİLGİ ════════ */
.page-footer {
  max-width: 1120px;
  margin: clamp(56px, 8vw, 90px) auto 0;
  padding: 26px 22px 46px;
  border-top: 1px solid rgba(22,50,31,0.09);
  font-family: var(--font-util);
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
.page-footer a { color: var(--muted); text-decoration: none; }
.page-footer a:hover { color: var(--leaf); text-decoration: underline; }
.brand-link b { color: #D95F01; }

/* ════════════════════════════════════════════════════════════════
   BASE.CSS EZMELERİ
   base.css bu üç bileşende beyaz-üstüne-koyu varsayıyor (rgba(255,255,255,…)).
   Sayfa açık zeminli olduğu için üçü de burada yeniden tanımlanıyor.
   ⚠️ Açık zeminde yeni bir base.css bileşeni kullanılacaksa önce orada
   sabit beyaz var mı diye bakılır; varsa ezmesi buraya eklenir.
   ════════════════════════════════════════════════════════════════ */

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=number],
.form-group select {
  background: var(--card);
  border: 1.5px solid var(--card-border);
  color: var(--ink);
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
}
.form-group input::placeholder { color: rgba(22,50,31,0.38); }
.form-group input:focus,
.form-group select:focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group select option { background: #fff; color: var(--ink); }

/* Fotoğraf ipucu kutusu — /turkiye, /sel ve /thy ile AYNI metni taşır.
   Açık zemin olduğu için dolgu yeşilin en soluk hâli; kenarlık kart
   kenarlığıyla aynı ki fotoğraf kutusuyla yarışmasın. */
.photo-hint {
  /* GENİŞLİK YOK, /sel ve /turkiye'nin aksine: bu sayfada .photo-drop tam
     genişlikte duruyor (base.css'ten geliyor, habits onu daraltmıyor).
     420px'e sabitlenmiş bir ipucu kutusu altındaki geniş bırakma alanının
     üstünde ortada asılı kalıyordu — kutu drop alanıyla aynı hizada. */
  margin: 0 0 14px;
  background: rgba(95,191,122,0.09);
  border: 1px solid rgba(47,143,82,0.22);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.photo-hint strong { color: var(--ink); display: block; margin-bottom: 6px; }

.photo-drop {
  background: var(--card);
  border: 2px dashed rgba(47,143,82,0.34);
}
.photo-drop:hover { border-color: var(--leaf); background: rgba(95,191,122,0.06); }
.photo-drop #photo-placeholder { color: var(--muted); }
.photo-drop #photo-preview { border-color: var(--sprout); }

#form-error {
  background: rgba(214,69,36,0.09);
  border: 1px solid rgba(214,69,36,0.32);
  color: #a8341a;
  font-weight: 600;
}

.photo-error { color: #a8341a; font-size: 13.5px; margin-top: 10px; }

/* ════════ ERİŞİLEBİLİRLİK ════════ */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  /* İmza şeridinin otomatik dönmesi JS tarafında da durduruluyor
     (index.html → prefers-reduced-motion kontrolü); burada geçiş
     animasyonları da kapanıyor. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 600px) {
  .option-card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .hero-actions { gap: 14px; }
  .hero-cta { width: 100%; justify-content: center; }
}