/* =========================================================
   RepDay web sitesi — ana stil dosyası (fontlar: fonts.css)
   Okuma sırası:
     1) Değişkenler   2) Temel   3) Ortak parçalar   4) Üst menü
     5) Hikaye sahnesi (kaydırdıkça değişen telefon)
     6) Telefonun içindeki ekranlar
     7) Kurucu, Fiyat, SSS, Son çağrı, Alt bilgi
     8) Yasal sayfalar   9) Küçük ekranlar
     10) Yeni bölümler (profil, mesaj, yüzen kartlar, özellik kartları, kurucu)
     11) Geçiş efektleri
   ========================================================= */


/* ---------- 1) DEĞİŞKENLER ----------
   Renk ve font değiştirmek istersen sadece burayı düzenle.
   Renkler uygulamanın kendi temasından alındı. */
:root {
  /* Bordo (marka rengi) — koyudan açığa */
  --bordo-950: #3d0f1b;
  --bordo-900: #4f1523;
  --bordo-800: #5e1a2b;
  --bordo-700: #6b2030;
  --bordo-600: #7d2438;

  /* Krem (uygulamanın açık teması) */
  --krem: #f6eddf;
  --krem-2: #efe3d0;
  --krem-3: #e2d3ba;
  --kagit: #fffaf2;

  /* Koyu tema */
  --kara: #15110f;
  --kara-2: #211b18;

  /* Vurgular */
  --somon: #f4b49a;     /* "tek uygulamada" vurgusu */
  --turuncu: #c4410c;
  --yesil: #3a6b48;

  /* Yazı renkleri */
  --metin: #2a1d1a;
  --metin-soft: #6a584f;

  /* Fontlar */
  --font-baslik: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-metin: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo: 'Permanent Marker', 'Comic Sans MS', cursive;   /* sadece "RepDay" logo yazısı */

  /* Ölçüler */
  --kap: 1120px;        /* içerik genişliği */
  --ust-yuk: 68px;      /* üst menü yüksekliği */
  --radius: 20px;
  --radius-sm: 12px;
  --golge: 0 18px 40px -18px rgba(61, 15, 27, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
}


/* ---------- 2) TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-yuk) + 8px); }

body {
  margin: 0;
  background: var(--krem);
  color: var(--metin);
  font-family: var(--font-metin);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }   /* .btn gibi sınıflar "hidden"ı ezmesin */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-baslik); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: .005em; }
p { margin: 0 0 1em; }

.kap { width: min(100% - 40px, var(--kap)); margin-inline: auto; }

/* Klavye ile gezenler için görünür odak çerçevesi */
:focus-visible { outline: 3px solid var(--somon); outline-offset: 3px; }

.atla-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--kagit); color: var(--bordo-900); font-weight: 600; text-decoration: none; }
.atla-link:focus { top: 12px; }
main:focus { outline: none; }
.sr-only { /* sadece ekran okuyucular için */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* config.js'te henüz doldurulmamış bilgileri sarı işaretle (yayından önce kalmamalı) */
.todo { background: #ffe58a; color: #3b2a00; padding: 0 .3em; border-radius: 4px; text-decoration: none; }


/* ---------- 3) ORTAK PARÇALAR ---------- */

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1 var(--font-metin); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--krem   { background: var(--kagit); color: var(--bordo-700); }       /* koyu zeminde ana buton */
.btn--bordo  { background: var(--bordo-700); color: var(--krem); }        /* açık zeminde ana buton */
.btn--hayalet { border-color: currentColor; background: transparent; }    /* ikincil buton */
.btn--soon { cursor: default; }
.btn--soon:hover { transform: none; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); flex: none; }

/* Küçük etiketler */
.etiket {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 250, 242, .12); color: var(--krem);
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
}
.etiket--acik { background: var(--krem-3); color: var(--bordo-700); }
.etiket--soon { background: var(--somon); color: var(--bordo-950); }

/* Bölüm başlığı alanı */
.bolum { padding: clamp(64px, 9vw, 112px) 0; }
.bolum__ust { max-width: 680px; margin-bottom: clamp(32px, 5vw, 56px); }
.bolum__ust h2 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-top: 14px; }
.bolum__ust p { color: var(--metin-soft); font-size: 1.15rem; margin-top: 16px; }

/* Kaydırınca görünen öğeler. Sadece JS çalışıyorsa gizlenir (html.js),
   yoksa her şey normal görünür. main.js, ekrana girince ".in" ekler. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Başlıkta kelime kelime yükselme (sayfa açılışında) */
.yuksel .w { display: inline-block; animation: yuksel .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes yuksel { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }

/* Telefon çerçevesi — ekran içeriği HTML/CSS ile çizilir (bkz. bölüm 6).
   Alt kenar bilerek açık: telefon sahnenin dışına taşıyormuş gibi görünür. */
.phone {
  --w: 280px;                                         /* genişliği değiştirmek için sadece bunu ez */
  --r: calc(var(--w) * .13 + 7px);                    /* köşe yuvarlaklığı genişliğe orantılı */
  width: var(--w);
  padding: 7px 7px 0;
  background: #0e0b0a;
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}


/* ---------- 4) ÜST MENÜ ---------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(79, 21, 35, .94);
  backdrop-filter: blur(10px);
  color: var(--krem);
}
.ust__ic { display: flex; align-items: center; min-height: var(--ust-yuk); gap: 16px; }

.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marka img { width: 44px; height: 44px; border-radius: 11px; }
.marka__ad { font: 400 1.5rem/1 var(--font-logo); letter-spacing: .01em; }
.marka__alt { display: block; font: 500 .68rem/1 var(--font-metin); letter-spacing: .22em; text-transform: uppercase; opacity: .7; margin-top: 3px; }

.menu { display: flex; align-items: center; gap: 28px; margin-left: auto; }

/* Dil düğmesi (TR / EN) */
.dil {
  display: inline-grid; place-items: center; min-width: 46px; height: 40px; padding: 0 12px;
  border-radius: 999px; border: 2px solid rgba(255, 250, 242, .45); color: var(--krem);
  font: 700 .85rem/1 var(--font-metin); letter-spacing: .06em; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.dil:hover { background: rgba(255, 250, 242, .12); border-color: var(--krem); }
.menu a { text-decoration: none; font-weight: 500; font-size: .98rem; opacity: .9; white-space: nowrap; }
@media (max-width: 1060px) { .menu { gap: 18px; } .menu a { font-size: .9rem; } }
.menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.menu .btn { min-height: 42px; padding: 0 20px; font-size: .92rem; opacity: 1; }
.menu .btn:hover { text-decoration: none; }

.menu-ac { /* mobil menü düğmesi — masaüstünde gizli */
  display: none; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: rgba(255, 250, 242, .12); color: inherit; cursor: pointer;
}
.menu-ac svg { width: 24px; height: 24px; margin: auto; }


/* ---------- 5) HİKAYE SAHNESİ ----------
   Mantık: .story çok uzun bir kutu. İçindeki .story__stage "sticky" olduğu için
   sen kaydırırken ekranda sabit kalıyor. main.js kaydırma miktarını okuyup
   .story'ye iki şey yazıyor:
     data-s="0..5"  -> hangi bölümdeyiz (0 = giriş)
     --intro (0..1) -> giriş animasyonu ne kadar ilerledi
   Aşağıdaki CSS sadece bu iki değere göre görünümü değiştirir.

   Önce JS'siz hali (yedek): her şey alt alta normal akar.
   ".is-live" sınıfını JS ekleyince sabit sahne devreye girer. */
.story {
  --n: 7;                 /* durak sayısı: giriş + 6 bölüm */
  --intro: 0;             /* main.js günceller */
  --step: 75svh;          /* her durak için kaydırma mesafesi */
  position: relative; color: var(--krem);
  background: var(--bordo-800);
}
.story__stage {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  padding: 56px 20px 0;
  background:
    radial-gradient(rgba(255, 250, 242, .07) 1.2px, transparent 1.4px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--bordo-900) 0%, var(--bordo-700) 70%, var(--bordo-600) 100%);
}
/* Mesaj ve Salon bölümlerinde zemin kararır (telefon da koyu temaya geçiyor) */
.story__stage::before { content: ''; position: absolute; inset: 0; background: var(--kara); opacity: 0; transition: opacity .9s ease; z-index: 0; }

/* Giriş (hero) metni */
.intro { position: relative; z-index: 3; text-align: center; max-width: 1000px; }
.intro h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); margin-top: 18px; }
.intro h1 em { font-style: normal; color: var(--somon); display: block; }
.intro__alt { max-width: 580px; margin: 20px auto 0; font-size: clamp(1.02rem, 2.4vw, 1.22rem); opacity: .92; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.intro__not { margin: 16px 0 0; font-size: .9rem; opacity: .78; }
.kaydir { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.kaydir svg { width: 18px; height: 18px; animation: zipla 1.6s ease-in-out infinite; }
@keyframes zipla { 50% { transform: translateY(5px); } }

/* Bölüm metinleri */
.chaps { position: relative; z-index: 3; display: grid; gap: 28px; width: min(100%, 560px); }
.chap { background: rgba(255, 250, 242, .07); border-radius: var(--radius); padding: 24px; }
.chap__soru { display: block; font: 600 .78rem/1 var(--font-metin); letter-spacing: .14em; text-transform: uppercase; color: var(--somon); margin-bottom: 12px; }
.chap h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); }
.chap p { margin: 14px 0 0; opacity: .88; font-size: clamp(1.02rem, 1.3vw, 1.18rem); }
.chap small { display: block; margin-top: 10px; opacity: .65; font-size: .85rem; }

/* Bölüm durma noktaları (main.js ekler). Telefonda hızlı kaydırınca bir sonraki bölümde durur. */
.story__durak { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 899px) {
  html { scroll-snap-type: y proximity; }
  /* Tek kaydırmada bir sonraki bölüme ulaşılsın */
  .story { --step: 62svh; }
  /* Kaydırırken telefonu yoran efektler kapalı: buzlu cam, bulanık geçiş, sürekli ışık animasyonu */
  .ust { backdrop-filter: none; background: var(--bordo-900); }
  .story .story__chips { backdrop-filter: none; background: rgba(21, 17, 15, .92); }
  .story .scr, .story .scr.gecti, .story .scr.on { filter: none; }
  .story .scr { transition: opacity .35s ease, transform .45s var(--ease); }
  html .story.is-live .story__glow, body .son { animation: none !important; }
  /* Bölüm metni beklemeden gelsin */
  html .story.is-live .chap { transition: opacity .3s ease, transform .45s var(--ease); }
  html .story.is-live .chap.aktif { transition-delay: 0s; }
  html .story.is-live .chap.aktif > :nth-child(1) { transition-delay: .02s; }
  html .story.is-live .chap.aktif > :nth-child(2) { transition-delay: .06s; }
  html .story.is-live .chap.aktif > :nth-child(3) { transition-delay: .1s; }
  html .story.is-live .chap.aktif > :nth-child(4) { transition-delay: .14s; }
  .story.is-live .story__durak { scroll-snap-align: start; scroll-snap-stop: always; }
}
/* Sürekli değişen öğeler kendi katmanında çizilsin (akıcı kaydırma) */
.story.is-live .word, .story.is-live .intro, .story__ilerleme i { will-change: transform; }

/* Sahne kurulurken (hazir sınıfı gelene kadar) geçiş animasyonu yok */
.story.is-live:not(.hazir) .chap, .story.is-live:not(.hazir) .chap > *, .story.is-live:not(.hazir) .word,
.story.is-live:not(.hazir) .yuzen, .story.is-live:not(.hazir) .scr, .story.is-live:not(.hazir) .story__nav { transition: none !important; }

/* Dev arka plan kelimesi ve alt sekmeler: sadece canlı modda */
.words, .story__nav { display: none; }

/* Telefon (yedek halde normal akışta, ilk ekran görünür) */
.story__phone { --w: min(280px, 72vw); flex: none; }


/* ----- Canlı mod: sabit sahne ----- */
.story.is-live {
  height: calc(100vh + var(--n) * var(--step));
  height: calc(100svh + var(--n) * var(--step));
  /* telefonun yerleşimi (masaüstü) */
  --pw: clamp(250px, 23vw, 330px);  /* telefon genişliği */
  --ptop: 28px;                     /* bölümlerde telefonun üst boşluğu */
  --dx: 21vw;                       /* telefonun sağa kayma miktarı */
  --dy: 290px;                      /* girişte telefonun aşağıda durma miktarı */
}
.story.is-live .story__stage {
  position: sticky; top: var(--ust-yuk);
  height: calc(100vh - var(--ust-yuk));
  height: calc(100svh - var(--ust-yuk));
  /* Telefonda adres çubuğu küçülünce ekran büyür: sahne de anlık yüksekliğe uysun (altta boş şerit kalmasın) */
  height: calc(100dvh - var(--ust-yuk));
  display: block; padding: 0;
}
/* Yedek önlem: olası bir boşlukta sahnenin arkası da sahneyle aynı renkte olsun */
.story.is-live { transition: background-color .9s ease; }
.story.is-live[data-s="5"], .story.is-live[data-s="6"] { background: var(--kara); }
.story.is-live[data-s="5"] .story__stage::before,
.story.is-live[data-s="6"] .story__stage::before { opacity: 1; }

/* Giriş metni: kaydırdıkça yukarı kayıp kaybolur */
.story.is-live .intro {
  position: absolute; z-index: 3; left: 50%; top: clamp(20px, 4vh, 44px);
  width: min(1000px, calc(100% - 40px));
  transform: translateX(-50%) translateY(calc(var(--intro) * -70px));
  opacity: calc(1 - var(--intro) * 1.9);
}
.story.is-live:not([data-s="0"]) .intro { pointer-events: none; visibility: hidden; }

/* Telefon: ortadan sağ kenara süzülür */
.story.is-live .story__phone {
  --w: var(--pw);
  position: absolute; z-index: 2; left: 50%; top: var(--ptop);
  transform:
    translate(calc(-50% + var(--dx) * var(--intro)), calc(var(--dy) * (1 - var(--intro))))
    perspective(1400px)
    rotateX(calc((1 - var(--intro)) * 16deg))
    rotateY(calc(var(--intro) * var(--tilt, -8deg)))
    scale(calc(.9 + .1 * var(--intro)));
  transform-origin: 50% 0;
  will-change: transform;
}

/* Bölüm metinleri: sadece aktif olan görünür */
.story.is-live .chaps { position: absolute; z-index: 3; inset: 0; display: block; width: auto; pointer-events: none; }
.story.is-live .chap {
  position: absolute; left: max(7vw, 40px); top: 50%; width: min(520px, 40vw);
  padding: 0; background: none; border-radius: 0;
  opacity: 0; transform: translateY(calc(-50% + 36px)); transition: opacity .5s ease, transform .7s var(--ease);
}
.story.is-live .chap.gecti { transform: translateY(calc(-50% - 40px)); }   /* geçilen bölüm yukarı çıkar */
.story.is-live .chap.aktif { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition-delay: .1s; }
/* Aktif bölümün satırları sırayla gelir: soru → başlık → metin → not */
.story.is-live .chap > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .8s var(--ease); }
.story.is-live .chap.aktif > * { opacity: 1; transform: none; }
.story.is-live .chap.aktif > :nth-child(1) { transition-delay: .12s; }
.story.is-live .chap.aktif > :nth-child(2) { transition-delay: .22s; }
.story.is-live .chap.aktif > :nth-child(3) { transition-delay: .34s; }
.story.is-live .chap.aktif > :nth-child(4) { transition-delay: .46s; }

/* Dev arka plan kelimesi (telefonun arkasında) */
.story.is-live .words { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.word {
  position: absolute; left: calc(50% + var(--dx) * var(--intro)); top: 40%;
  font: 700 clamp(7rem, 21vw, 19rem)/.8 var(--font-baslik); letter-spacing: .01em; white-space: nowrap;
  color: rgba(244, 180, 154, .13);
  opacity: 0; transform: translate(-50%, calc(-50% + 70px));
  translate: calc((.5 - var(--sp, .5)) * 12vw) 0;
  transition: opacity .6s ease, transform .9s var(--ease);
}
.word.gecti { transform: translate(-50%, calc(-50% - 70px)); }
.story.is-live .word.aktif { opacity: 1; transform: translate(-50%, -50%); }

/* Alt sekme çubuğu: bölümler arası atlama + "Atla" */
.story.is-live .story__nav {
  display: flex; align-items: center; gap: 8px;
  position: absolute; z-index: 6; left: 50%; bottom: 16px; transform: translateX(-50%);
  max-width: calc(100% - 24px);
  transition: opacity .5s ease, transform .6s var(--ease);
}
/* Girişte sekmeler gizli, ilk bölümle birlikte aşağıdan gelir */
.story.is-live[data-s="0"] .story__nav { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
.story__chips {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(21, 17, 15, .74); backdrop-filter: blur(10px);
  overflow-x: auto; scrollbar-width: none;
}
.story__chips::-webkit-scrollbar { display: none; }
.story__chips button {
  flex: none; border: 0; background: none; color: rgba(246, 237, 223, .6);
  font: 600 .9rem/1 var(--font-metin); padding: 12px 16px; border-radius: 999px; cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.story__chips button:hover { color: var(--krem); }
.story__chips button[aria-current="true"] { background: var(--krem); color: var(--bordo-800); }
.story__atla {
  flex: none; padding: 17px 20px; border-radius: 999px; background: var(--kagit); color: var(--bordo-800);
  font: 600 .9rem/1 var(--font-metin); text-decoration: none;
}


/* ---------- 6) TELEFONUN İÇİNDEKİ EKRANLAR ----------
   Ekranlar resim değil, HTML. Böylece animasyonlanabiliyor, net görünüyor ve
   gerçek öğrenci adı yok (hepsi uydurma örnek veri).
   Tüm ölçüler "cqw" = telefon ekranının genişliğinin %1'i. Telefon büyüyüp
   küçülünce içindeki her şey orantılı büyür/küçülür. */
.phone__screen {
  position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: 1 / 2.12;
  border-radius: calc(var(--r) - 7px) calc(var(--r) - 7px) 0 0;
  background: var(--kara);
}
.phone__status { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 13cqw; color: #2a1d1a; transition: color .6s ease; pointer-events: none; }
.phone__status span { position: absolute; top: 4.6cqw; left: 7cqw; font: 600 3.9cqw/1 var(--font-metin); }
.phone__status i { position: absolute; top: 3cqw; left: 50%; transform: translateX(-50%); width: 27cqw; height: 7.6cqw; border-radius: 99px; background: #000; }
.story[data-s="5"] .phone__status,
.story[data-s="6"] .phone__status { color: #f6eddf; }

.scr {
  --u-bg: #f0e6d6; --u-card: #fffdf9; --u-line: #e2d3ba; --u-text: #3a2a26;
  --u-soft: #7d6b61; --u-bordo: #6b2030; --u-green: #3e6b4b; --u-logo: #6b2030;
  position: absolute; inset: 0; padding: 14cqw 4.4cqw 0;
  background: var(--u-bg); color: var(--u-text);
  font: 500 3.6cqw/1.3 var(--font-metin);
  opacity: 0; transform: translateY(8cqw) scale(.96); filter: blur(5px); pointer-events: none;
  transition: opacity .55s ease, transform .8s var(--ease), filter .6s ease;
}
.scr.gecti { transform: translateY(-6cqw) scale(.98); }
.scr.on { opacity: 1; transform: none; filter: none; }
.scr--dark { --u-bg: #15110f; --u-card: #211b18; --u-line: #2e2622; --u-text: #f5ecdc; --u-soft: #a39385; --u-bordo: #7d2438; --u-logo: #d4506b; }

/* Uygulama başlığı (logo + "By Likos") */
.u-head { display: flex; align-items: center; gap: 3.4cqw; }
.u-head img { width: 13cqw; height: 13cqw; border-radius: 3.2cqw; }
.u-logo { display: block; font: 400 7.4cqw/1.05 var(--font-logo); color: var(--u-logo); }
/* Koyu temada uygulamadaki gibi açık renk dış çizgi */
.scr--dark .u-logo { -webkit-text-stroke: .7cqw #f5ecdc; paint-order: stroke fill; }
.u-by { display: block; font-style: normal; font-size: 2.5cqw; letter-spacing: .24em; color: var(--u-soft); margin-top: .6cqw; }
.u-page { display: block; color: var(--u-soft); font-size: 3.6cqw; margin-top: .6cqw; }

.u-date { margin: 5.5cqw 0 1cqw; color: var(--u-soft); }
.u-big { display: flex; align-items: center; gap: 3cqw; }
.u-big svg { width: 11cqw; height: 5cqw; color: var(--u-text); }
.u-big b { font: 700 19cqw/1 var(--font-baslik); color: var(--u-bordo); }
.u-big span { font-size: 4.6cqw; color: var(--u-soft); margin-top: 5cqw; }
.u-bar { height: 1.7cqw; border-radius: 9px; background: var(--u-line); margin-top: 3cqw; overflow: hidden; }
.u-bar span { display: block; height: 100%; width: calc(var(--v, 0) * 1%); background: var(--u-green); transition: width 1s var(--ease); }
.u-sub { margin: 2.6cqw 0 4.4cqw; color: var(--u-soft); }

.u-card { background: var(--u-card); border: .5cqw solid var(--u-line); border-radius: 4.6cqw; padding: 4cqw; }
.u-card > p { margin: 0; color: var(--u-soft); }

/* Son 7 gün çubukları */
.u-week { display: flex; align-items: flex-end; gap: 2.2cqw; height: 28cqw; margin-top: 3.6cqw; }
.u-week div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.6cqw; color: var(--u-soft); font-size: 3cqw; }
.u-week i {
  display: block; width: 100%; height: calc(var(--h) * 1cqw); border-radius: 2.4cqw;
  background: var(--u-green); color: #fff; font-style: normal; text-align: center; padding-top: 1.2cqw; font-size: 3cqw;
}
.u-week i.sifir { background: var(--u-line); height: 1.6cqw; }
.u-week i.bugun { background: var(--u-bordo); }

/* Ders satırları */
.u-row {
  display: flex; align-items: center; gap: 3.4cqw; margin-top: 2.8cqw; padding: 3cqw 3.4cqw;
  background: var(--u-card); border: .5cqw solid var(--u-line); border-radius: 3.8cqw;
  transition: background-color .5s ease, border-color .5s ease;
}
.u-time { min-width: 13.5cqw; font: 700 5.6cqw/1 var(--font-baslik); color: var(--u-bordo); }
.u-who { flex: 1; min-width: 0; }
.u-who b { display: block; font-weight: 500; font-size: 4.6cqw; line-height: 1.2; }
.u-who small { display: block; color: var(--u-soft); font-size: 3.2cqw; margin-top: .6cqw; }
.u-check {
  flex: none; display: grid; place-items: center; width: 9.8cqw; height: 9.8cqw; border-radius: 50%;
  background: #efe0e1; color: var(--u-bordo); transition: background-color .4s ease, color .4s ease, transform .4s var(--ease);
}
.u-check svg { width: 4.8cqw; height: 4.8cqw; }
.u-row.done { background: #e5efe3; border-color: var(--u-green); }
.u-row.done .u-check { background: var(--u-green); color: #fff; transform: scale(1.12); }

/* Öğrenci sekmesi (uzun ekran: kaydırınca içerik yukarı akar) */
.u-count { margin: 5cqw 0 0; color: var(--u-soft); }
.u-big--ogr b { font-size: 17cqw; }

.u-money { margin-top: 3.6cqw; padding: 5cqw; border-radius: 5cqw; background: var(--u-bordo); color: #fff6ea; }
.scr--light .u-money { background: #6b2030; }
.u-money__ay { margin: 0; opacity: .85; }
.u-money__row { display: flex; gap: 6cqw; margin-top: 3cqw; }
.u-money__row b { display: block; font: 700 9.6cqw/1 var(--font-baslik); }
.u-money__row small { display: block; opacity: .8; font-size: 3.2cqw; margin-top: 1cqw; }
.u-money__meta { margin: 4cqw 0 0; opacity: .8; font-size: 3.4cqw; }
.u-spark { display: flex; align-items: flex-end; gap: 2.4cqw; height: 21cqw; margin-top: 3cqw; }
.u-spark i {
  flex: 1; height: calc(var(--h) * 1%); border-radius: 2.2cqw; background: #fdf4e6;
  transform-origin: bottom; transform: scaleY(.1); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 110ms);
}
.u-money.grow .u-spark i { transform: scaleY(1); }
.u-months { display: flex; gap: 2.4cqw; margin-top: 1.6cqw; font-size: 2.8cqw; opacity: .8; text-align: center; }
.u-months span { flex: 1; }

.u-pend { margin-top: 4cqw; padding: 4cqw; border-radius: 5cqw; background: #f1e1e1; }
.u-pend h3 { font: 600 4.2cqw/1.2 var(--font-metin); color: var(--u-bordo); letter-spacing: 0; }
.u-pend .u-row { max-height: 22cqw; overflow: hidden; transition: max-height .7s var(--ease), opacity .5s ease, margin .7s var(--ease), padding .7s var(--ease), border-width .7s; }
.u-pend .u-row.gone { max-height: 0; opacity: 0; margin-top: 0; padding-block: 0; border-width: 0; }
.u-amount { font: 700 5.2cqw/1 var(--font-baslik); color: var(--u-bordo); }
.u-ok {
  flex: none; display: grid; place-items: center; width: 10.5cqw; height: 10.5cqw; border-radius: 3cqw;
  background: #e3eee0; color: var(--u-green); transition: background-color .4s ease, color .4s ease, transform .4s var(--ease);
}
.u-ok svg { width: 5cqw; height: 5cqw; }
.u-ok.tik { background: var(--u-green); color: #fff; transform: scale(1.15); }
.u-hint { margin: 3.4cqw 0 0; color: var(--u-soft); font-size: 3.2cqw; }

.u-search { margin-top: 4cqw; padding: 3.8cqw 4cqw; border-radius: 3.8cqw; background: var(--u-card); border: .5cqw solid var(--u-line); color: var(--u-soft); }
.u-badge { flex: none; padding: 1.4cqw 3.2cqw; border-radius: 99px; background: var(--u-green); color: #fff; font: 700 4.4cqw/1.1 var(--font-baslik); }
.u-badge--az { background: #b4421c; }
.u-btns { display: flex; gap: 3cqw; margin-top: 4.4cqw; }
.u-btn { padding: 3.6cqw 6.4cqw; border-radius: 99px; font-weight: 600; font-size: 4cqw; border: .6cqw solid var(--u-bordo); }
.u-btn--dolu { background: var(--u-bordo); color: #fff6ea; }
.u-btn--cizgi { color: var(--u-bordo); }

/* Ay başlığı, sekme düğmeleri ve alt başlık (Salon ve Profil ekranlarında) */
.u-ay { display: flex; align-items: center; justify-content: space-between; margin-top: 5cqw; }
.u-ay b { font: 700 9cqw/1 var(--font-baslik); color: var(--u-bordo); }
.u-ay b em { font-style: normal; color: var(--u-soft); }
.u-ay svg { width: 5cqw; height: 5cqw; color: var(--u-bordo); }
.u-chips { display: flex; gap: 2.4cqw; margin: 2.6cqw 0 4cqw; }
.u-chips span { padding: 2.4cqw 5.6cqw; border-radius: 99px; background: var(--u-card); border: .4cqw solid var(--u-line); font-size: 3.9cqw; }
.u-chips span.on { background: var(--u-bordo); border-color: var(--u-bordo); color: #fff6ea; }
/* Aylık takvim: günler ve ders noktaları (dolu nokta = işlenen ders, boş = planlı) */
.u-gun { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.6cqw; text-align: center; }
.u-gun-ad span { font-size: 2.9cqw; color: var(--u-soft); padding-bottom: .6cqw; }
.u-day {
  aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw;
  background: var(--u-card); border: .4cqw solid var(--u-line); border-radius: 2.6cqw; font: 700 4.6cqw/1 var(--font-baslik); color: var(--u-text);
}
.u-day.bos { visibility: hidden; }
.u-day.sec { background: var(--u-bordo); border-color: var(--u-bordo); color: #fff6ea; }
.u-dots { display: flex; gap: .9cqw; min-height: 2cqw; }
.u-dots s { width: 2cqw; height: 2cqw; border-radius: 50%; border: .45cqw solid var(--u-green); transform: scale(0); transition: transform .4s var(--ease); transition-delay: calc(var(--k, 1) * 16ms + .1s); }
.u-dots s.f { background: var(--u-green); }
.u-day.sec .u-dots s { border-color: #fff6ea; }
.scr.on .u-dots s { transform: scale(1); }
.u-baslik { margin: 5cqw 0 0; font: 700 7.4cqw/1 var(--font-baslik); color: var(--u-bordo); padding-bottom: 2cqw; border-bottom: .4cqw solid var(--u-line); }

/* Salon ekranı (koyu): meslektaşların dolu saatleri */
.u-gunnav { display: flex; align-items: center; justify-content: space-between; margin: 1cqw 0 2cqw; }
.u-gunnav b { font: 700 6.2cqw/1 var(--font-baslik); }
.u-gunnav svg { width: 4.6cqw; height: 4.6cqw; }
.u-hr { display: grid; grid-template-columns: 12cqw 1fr; padding: 2.2cqw 0; border-top: .4cqw solid var(--u-line); }
.u-hr > span { font: 700 4.2cqw/1 var(--font-baslik); color: var(--u-soft); padding-top: 1.4cqw; }
.u-slots { display: flex; gap: 2.4cqw; }
.u-ev {
  flex: 1; min-width: 0; padding: 2.8cqw 3.2cqw; border-radius: 3.2cqw; color: #fff;
  opacity: 0; transform: translateX(7cqw); transition: opacity .6s ease, transform .8s var(--ease); transition-delay: calc(var(--k) * 70ms + .12s);
}
.scr.on .u-ev { opacity: 1; transform: none; }
.u-ev b { display: block; font-size: 4.7cqw; font-weight: 600; line-height: 1.2; }
.u-ev small { display: block; font-size: 3.2cqw; opacity: .88; }
.u-ev em { display: block; font-style: normal; font-size: 3.2cqw; opacity: .7; margin-top: .6cqw; }
.ev-ben { background: #c4410c; }      /* senin dersin */
.ev-yesil { background: #38691f; }    /* meslektaşlar: her antrenörün kendi rengi */
.ev-mavi { background: #1f4a7e; }
.ev-mor { background: #4f2660; }
.ev-kahve { background: #6a4326; }


/* ---------- 7) KURUCU / FİYAT / SSS / SON ÇAĞRI / ALT BİLGİ ---------- */

/* -- Kurucu hikayesi: bkz. bölüm 10 -- */

/* -- Fiyat -- */
.fiyat { background: var(--krem-2); }
.fiyat__izgara { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 5vw, 64px); }
.fiyat__sol h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-top: 14px; }
.fiyat__tikler { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; color: var(--metin-soft); }
.fiyat__tikler li { display: flex; gap: 10px; align-items: flex-start; }
.fiyat__tikler svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--yesil); }

.planlar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.plan { padding: 28px 26px; border-radius: var(--radius); background: var(--kagit); box-shadow: var(--golge); }
.plan--on { background: var(--bordo-700); color: var(--krem); }
.plan__ad { font: 600 1.15rem/1 var(--font-metin); letter-spacing: .02em; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; }
.plan__fiyat { margin: 18px 0 8px; font: 700 clamp(2.8rem, 4.6vw, 3.8rem)/1 var(--font-baslik); white-space: nowrap; }
.plan__fiyat small { font: 500 1rem var(--font-metin); opacity: .7; }
.plan p { margin: 0; opacity: .8; font-size: .96rem; }

/* -- SSS -- */
.sss { background: var(--krem); }
.sss__ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.sss__ust h2 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-top: 14px; }
.sss__ust p { margin: 0; color: var(--metin-soft); }
.sss__ust a { color: var(--bordo-700); font-weight: 600; }
.sss__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.sss details { background: var(--kagit); border-radius: var(--radius-sm); border: 2px solid var(--krem-3); }
.sss summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; position: relative; font: 600 1rem/1.4 var(--font-metin); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 500 1.8rem/1 var(--font-metin); color: var(--bordo-700); }
.sss details[open] summary::after { content: '−'; }
.sss details p { padding: 0 20px 18px; margin: 0; color: var(--metin-soft); font-size: .98rem; }
.sss details a { color: var(--bordo-700); font-weight: 600; }

/* -- Son çağrı -- */
.son {
  text-align: center; color: var(--krem); padding: clamp(64px, 9vw, 112px) 0;
  background:
    radial-gradient(rgba(255, 250, 242, .07) 1.2px, transparent 1.4px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--bordo-700), var(--bordo-900));
}
.son h2 { font-size: clamp(2.4rem, 7vw, 4.4rem); max-width: 16ch; margin-inline: auto; }
.son h2 em { font-style: normal; color: var(--somon); }
.son p { opacity: .88; margin-top: 18px; font-size: 1.15rem; }

/* -- Alt bilgi -- */
.alt { background: var(--kara); color: var(--krem); padding: 56px 0 40px; font-size: .96rem; }
.alt__ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.alt__not { max-width: 320px; opacity: .7; margin-top: 14px; }
.alt h3 { font: 600 .8rem/1 var(--font-metin); letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-bottom: 16px; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.alt ul a { display: inline-block; padding: 4px 0; text-decoration: none; opacity: .88; }
.alt ul a:hover { opacity: 1; text-decoration: underline; }
.alt__alt { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 250, 242, .14); opacity: .6; font-size: .88rem; }


/* ---------- 8) YASAL SAYFALAR ---------- */
.sayfa { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 112px); }
.sayfa .kap { max-width: 780px; }
.sayfa h1 { font-size: clamp(2.6rem, 7vw, 4rem); color: var(--bordo-700); }
.sayfa h2 { font-size: 1.9rem; margin: 2.2em 0 .5em; color: var(--bordo-700); }
.sayfa ul, .sayfa ol { padding-left: 1.3em; margin: 0 0 1em; }
.sayfa li { margin-bottom: .4em; }
.sayfa a { color: var(--bordo-700); font-weight: 600; }
.sayfa .tarih { color: var(--metin-soft); font-size: .95rem; margin-top: 10px; }

.uyari { /* "Taslak" şeridi — yayından önce kaldırılacak */
  margin: 24px 0 8px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: #fff1c2; border: 2px solid #e8c14a; color: #3b2a00; font-size: .98rem;
}
.uyari strong { display: block; margin-bottom: 4px; }

.tablo { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: .98rem; }
.tablo th, .tablo td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--krem-3); vertical-align: top; }
.tablo th { background: var(--krem-2); font-weight: 600; }

.iletisim-kartlar { display: grid; gap: 14px; margin-top: 28px; }
.iletisim-kart { padding: 22px 24px; border-radius: var(--radius-sm); background: var(--kagit); border: 2px solid var(--krem-3); }
.iletisim-kart h2 { margin: 0 0 6px; font-size: 1.5rem; }
.iletisim-kart p { margin: 0; color: var(--metin-soft); }


/* ---------- 9) KÜÇÜK EKRANLAR + HAREKET TERCİHİ ---------- */

/* Dar ekran: telefon üstte metin altta değil, tersine — metin üstte, telefon altta taşar */
@media (max-width: 899px) {
  .fiyat__izgara { grid-template-columns: 1fr; }
  .sss__liste { grid-template-columns: 1fr; }
  .story.is-live {
    --pw: min(64vw, 270px);
    --ptop: 218px;      /* telefon, bölüm metninin altında başlar */
    --dx: 0px;          /* yana kaymaz, ortada kalır */
    --dy: 120px;
  }
  .story.is-live .intro { top: 14px; }
  .story.is-live .chap {
    left: 20px; right: 20px; width: auto; top: 14px;
    transform: translateY(32px);
  }
  .story.is-live .chap.aktif { transform: none; }
  .story.is-live .chap.gecti { transform: translateY(-28px); }
  .story.is-live { --tilt: 0deg; }   /* dar ekranda yana eğim yok */
  .chap h2 { font-size: 2.05rem; }
  .chap p { font-size: .96rem; margin-top: 8px; }
  .chap small { display: none; }
  .word { top: 56%; font-size: 34vw; }
  .story__nav { bottom: 10px; }
  /* Uzun telefonlarda (Pro Max vb.) telefonun alt kenarı sahnenin içinde kalmasın, her zaman alttan taşsın */
  .story.is-live .phone__screen {
    min-height: calc(100vh - var(--ust-yuk) - var(--ptop) + 40px);
    min-height: calc(100svh - var(--ust-yuk) - var(--ptop) + 40px);
  }
}

@media (max-width: 760px) {
  /* Menü: düğmeyle açılan dikey liste */
  .menu-ac { display: grid; order: 3; }   /* telefonda: logo · dil · menü */
  .dil { margin-left: auto; height: 44px; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: var(--ust-yuk);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 20px; background: var(--bordo-900);
  }
  .menu.acik { display: flex; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 250, 242, .1); }
  .menu .btn { margin-top: 14px; border: 0; }
}

/* Uzun/kısa buton metni: masaüstünde uzun, telefonda kısa */
.m-kisa { display: none; }

@media (max-width: 640px) {
  .planlar { grid-template-columns: 1fr; }
  .intro h1 { font-size: 2.35rem; }
  .intro__alt { font-size: .98rem; margin-top: 14px; }
  .cta { gap: 8px; margin-top: 20px; }
  .cta .btn { min-height: 48px; padding: 0 18px; font-size: .92rem; }
  .m-uzun { display: none; }
  .m-kisa { display: inline; }
  .story.is-live .story__nav { width: calc(100% - 20px); }
  .story__chips { flex: 1; justify-content: space-between; }
  .story__chips button { padding: 11px 6px; font-size: .82rem; }
  .story__atla { padding: 14px 14px; font-size: .82rem; }
}
@media (max-width: 420px) {
  /* 6 sekme + Atla dar ekrana sığsın */
  .story__chips button { padding: 10px 4px; font-size: .74rem; }
  .story__atla { padding: 13px 11px; font-size: .76rem; }
}

/* Alçak ekranlarda (yatay telefon, küçük laptop) giriş metni biraz küçülsün */
@media (max-height: 700px) and (min-width: 900px) {
  .story.is-live { --dy: 250px; }
  .intro h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
}

/* ---------- 10) YENİ BÖLÜMLER ----------
   Profil ve Mesaj ekranları, yüzen kartlar, "Dahası var" kartları, kurucu bölümü */

/* -- Telefon: Öğrenci profili ekranı -- */
.u-ust { display: flex; justify-content: space-between; color: var(--u-soft); font-size: 3.8cqw; padding: 1cqw 0 3cqw; border-bottom: .4cqw solid var(--u-line); }
.u-link { color: var(--u-bordo); font-weight: 600; }
.u-ad { display: block; font: 700 9.4cqw/1.05 var(--font-baslik); color: var(--u-bordo); margin-top: 5cqw; }
.scr--dark .u-ad { color: var(--u-text); margin-top: 3cqw; }
.u-meta2 { display: flex; align-items: center; gap: 2cqw; margin: 1.6cqw 0 0; color: var(--u-soft); font-size: 3.4cqw; }
.u-meta2 svg { width: 5.4cqw; height: 2.6cqw; color: var(--u-text); flex: none; }
.u-btns--kucuk { gap: 2cqw; margin-top: 3.6cqw; }
.u-btns--kucuk .u-btn { padding: 2.6cqw 4cqw; font-size: 3.5cqw; }
.u-kalan { margin-top: 3.6cqw; padding: 3.4cqw 4cqw; border-left: 1cqw solid var(--u-green); background: #e5efe3; border-radius: 0 3cqw 3cqw 0; font-size: 3.6cqw; }
.u-kalan b { display: inline-block; margin-right: 1.8cqw; font: 700 7.6cqw/1 var(--font-baslik); color: var(--u-green); }
.u-kalan small { display: block; margin-top: 1cqw; color: var(--u-soft); font-size: 3.1cqw; }
.u-paket { margin-top: 3.4cqw; padding: 4.4cqw; border-radius: 4.4cqw; background: #6b2030; color: #fff6ea; }
.u-paket__ust { display: flex; justify-content: space-between; align-items: flex-end; }
.u-paket__ust b { display: inline-block; font: 700 10.5cqw/1 var(--font-baslik); color: #8fd1a5; }
.u-paket__ust b small { font-size: 5.6cqw; opacity: .85; }
.u-paket__ust > span { text-align: right; font-size: 3cqw; line-height: 1.5; opacity: .85; }
.u-paket__bar { height: 1.7cqw; margin: 3.4cqw 0; border-radius: 9px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.u-paket__bar span { display: block; height: 100%; width: calc(var(--v) * 1%); background: #8fd1a5; transition: width 1s var(--ease); }
.u-paket__alt { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; font-size: 3cqw; }
.u-odendi { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.8cqw 3cqw; border-radius: 99px; background: #2f6b45; color: #fff; }
.u-odendi svg { width: 3.6cqw; height: 3.6cqw; }
.u-olcu { display: flex; flex-wrap: wrap; gap: 2cqw; margin-top: 3.4cqw; }
.u-olcu span { padding: 1.8cqw 3cqw; border-radius: 99px; background: var(--u-card); border: .4cqw solid var(--u-line); font-size: 3cqw; color: var(--u-soft); }
.u-olcu b { font: 700 4.2cqw/1 var(--font-baslik); color: var(--u-bordo); }
.u-hedef { margin-top: 3cqw; padding: 3.4cqw 4cqw; border-radius: 3cqw; background: #e5efe3; font-size: 3.5cqw; }
/* Sayı değişirken yukarı kayıp yenisi aşağıdan gelir */
.u-cevir { animation: cevir .7s var(--ease); }
@keyframes cevir { 0% { transform: none; opacity: 1; } 40% { transform: translateY(-55%); opacity: 0; } 41% { transform: translateY(55%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* -- Telefon: Öğrenci sekmesi ekleri (aya dokun, 12 ay toplamı, WhatsApp) -- */
.u-money__ipucu { margin: 2.6cqw 0 0; font-size: 2.9cqw; opacity: .7; }
.u-money__yil { display: inline-block; margin: 2.4cqw 0 0; padding: 1.8cqw 3cqw; border-radius: 99px; border: .5cqw solid rgba(255, 246, 234, .5); font-size: 3cqw; }
.u-wa { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 2.6cqw; background: #2f6b45; color: #fff; font: 700 2.8cqw/1 var(--font-metin); }

/* -- Telefon: Ders hatırlatma mesajı ekranı -- */
.u-etiket { margin: 4.4cqw 0 1.8cqw; font-weight: 600; font-size: 3.5cqw; }
.u-alanlar { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.4cqw; }
.u-alan { display: block; padding: 3cqw 3.4cqw; border-radius: 2.6cqw; background: var(--u-card); border: .4cqw solid var(--u-line); font-size: 3.7cqw; }
.u-alan--metin { min-height: 24cqw; font-size: 3.5cqw; line-height: 1.45; }
.u-imlec { display: inline-block; width: .5cqw; height: 4cqw; margin-left: .4cqw; vertical-align: middle; background: var(--u-text); opacity: 0; }
.u-alan--metin.yaziyor .u-imlec { opacity: 1; animation: imlec 1s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.u-btn--tam { display: block; margin-top: 4cqw; text-align: center; transition: transform .2s ease, filter .2s ease; }
.u-btn--tam.bas { transform: scale(.95); filter: brightness(1.3); }
.u-balon {
  margin: 5cqw 0 0 12cqw; padding: 3.4cqw 4cqw; border-radius: 4cqw 4cqw 1cqw 4cqw;
  background: #1f5c3c; color: #eaf6ee; font-size: 3.4cqw; line-height: 1.4;
  opacity: 0; transform: translateY(5cqw) scale(.9); transform-origin: bottom right;
  transition: opacity .5s ease, transform .7s var(--ease);
}
.u-balon small { display: block; margin-top: 1cqw; text-align: right; font-size: 2.8cqw; opacity: .7; }
.u-balon.gel { opacity: 1; transform: none; }

/* -- Telefonun yanında beliren kartlar -- */
.yuzenler { display: none; }
.story.is-live .yuzenler { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.yuzen {
  position: absolute; left: calc(50% + var(--dx) + var(--pw) * .16); top: 56%;
  width: min(310px, 25vw); padding: 18px 20px; border-radius: 22px;
  background: var(--kagit); color: var(--metin); font-size: .95rem; line-height: 1.35;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(34px) scale(.94);
  transition: opacity .45s ease, transform .8s var(--ease);
}
.yuzen.aktif { opacity: 1; transform: none; transition-delay: .4s; }
.yuzen--koyu { background: #211b18; color: var(--krem); }
.yuzen--bordo { background: #6b2030; color: #fff6ea; }
.yuzen--bildirim { display: flex; gap: 12px; align-items: flex-start; }
.yuzen--bildirim img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.yz-ust { display: flex; justify-content: space-between; font-size: .78rem; letter-spacing: .06em; opacity: .7; }
.yz-ust i { font-style: normal; }
.yz-baslik { display: block; margin-top: 2px; font-size: 1rem; }
.yz-metin { display: block; opacity: .82; font-size: .9rem; }
.yz-pill { display: inline-block; padding: 5px 12px; border-radius: 99px; background: #f6dcd6; color: var(--bordo-700); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.yz-buyuk { display: block; margin: 10px 0 12px; font-size: 1.1rem; }
.yz-buyuk em { font-style: normal; color: var(--bordo-700); }
.yz-wa { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: #2f6b45; color: #fff; font-weight: 600; font-size: .9rem; }
.yz-wa svg { width: 18px; height: 18px; }
.yz-kucuk { display: block; font-size: .8rem; opacity: .75; }
.yz-tutar { display: block; margin: 4px 0 10px; font: 700 2rem/1 var(--font-baslik); }
.yz-tutar small { font: 500 .8rem var(--font-metin); opacity: .75; }
.yz-satir { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: .88rem; }
.yz-satir small { display: block; font-size: .72rem; opacity: .7; }
.yz-satir b { font-family: var(--font-baslik); font-size: 1.05rem; }
.yz-baslik2 { display: block; margin-bottom: 8px; font: 700 1.35rem/1.1 var(--font-baslik); color: var(--somon); }
.yz-renk { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: .95rem; }
.yz-renk i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.yz-renk small { margin-left: auto; opacity: .6; font-size: .8rem; }

/* -- DAHASI VAR: özellik kartları -- */
/* "Yakından bak": her satırda anlatım + aynı boyutta görsel, satırlar sağ-sol değişir */
.yakin { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.yakin__satir {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 2.6vw, 30px);
  border-radius: 28px; background: var(--kagit); box-shadow: var(--golge);
}
.yakin__satir:nth-child(even) .yakin__metin { order: 2; }       /* çift satırlarda metin sağda */
.yakin__metin h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--bordo-700); }
.yakin__metin > p { margin: 12px 0 0; color: var(--metin-soft); font-size: 1.05rem; }
.yakin__madde { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.yakin__madde li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.yakin__madde svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--yesil); }
.yakin__madde b { color: var(--bordo-700); }
.yakin__gorsel {
  position: relative; display: grid; place-items: center; height: 420px; padding: 24px;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(rgba(255, 250, 242, .07) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--bordo-900), var(--bordo-600));
}
.yakin__gorsel--tel { padding-bottom: 0; align-content: end; }   /* telefon alttan taşar */

/* Ölçüm formu → rapor akışı */
.olcum { display: grid; grid-template-columns: 190px auto minmax(0, 330px); align-items: center; gap: 14px; }
.olcum__form { padding: 14px; border-radius: 16px; background: #f3e9da; color: var(--metin); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .6); font-size: .74rem; }
.olcum__form > b { display: block; font: 700 1.25rem/1.1 var(--font-baslik); color: var(--bordo-700); }
.olcum__form > small { color: var(--metin-soft); font-size: .66rem; }
.olcum__alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.olcum__alanlar span { display: block; padding: 6px 8px; border-radius: 8px; background: #fffaf2; border: 1px solid #e6d9c4; color: var(--metin-soft); font-size: .64rem; }
.olcum__alanlar b { display: block; color: var(--metin); font-size: .9rem; }
.olcum__alanlar b.bos { color: #c8b9a6; }
.olcum__yeni { display: block; margin-top: 10px; color: var(--bordo-700); font-weight: 700; font-size: .7rem; }
.olcum .rapor { width: 100%; }

/* Kolay geçiş: kaynak sekmeleri + not defteri → sonuç */
.gecis { display: grid; gap: 16px; width: 100%; }
.gecis__kaynaklar { display: flex; justify-content: center; gap: 8px; }
.gecis__kaynaklar span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 250, 242, .12); color: var(--krem); font-size: .8rem; font-weight: 600; }
.gecis__kaynaklar span.on { background: var(--kagit); color: var(--bordo-700); }
.gecis__kaynaklar svg { width: 16px; height: 16px; }

/* Düet ve grup dersi kartı */
.grup { width: min(100%, 360px); padding: 16px; border-radius: 18px; background: #f3e9da; color: var(--metin); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); font-size: .78rem; }
.grup__tur { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 10px; border-radius: 99px; background: #e6d9c4; }
.grup__tur span { padding: 4px 12px; border-radius: 99px; font-size: .7rem; font-weight: 600; color: var(--metin-soft); }
.grup__tur span.on { background: var(--bordo-700); color: #fff6ea; }
.grup__ust { display: block; color: var(--metin-soft); font-size: .68rem; }
.grup__ad { display: block; margin: 2px 0 10px; font: 700 1.25rem/1.1 var(--font-baslik); color: var(--bordo-700); }
.grup__secim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grup__secim span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; background: #fffaf2; border: 1px solid #e6d9c4; font-size: .72rem; }
.grup__secim span.on { background: #e5efe3; border-color: #3e6b4b; }
.grup__secim i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #ead3d0; }
.grup__secim span.on i { background: #3e6b4b; color: #fff; }
.grup__secim svg { width: 14px; height: 14px; }
.grup__soru { margin: 10px 0 5px; font-size: .68rem; color: var(--metin-soft); }
.grup__kisiler, .grup__etiketler { display: flex; flex-wrap: wrap; gap: 5px; }
.grup__kisiler span { padding: 4px 10px; border-radius: 99px; background: #6b2030; color: #fff6ea; font-size: .68rem; font-weight: 600; }
.grup__kisiler span.yok { background: #fffaf2; color: var(--metin-soft); border: 1px solid #e6d9c4; text-decoration: line-through; }
.grup__not { margin: 6px 0 0; font-size: .64rem; color: var(--metin-soft); }
.grup__etiketler span { padding: 3px 9px; border-radius: 99px; background: #fffaf2; border: 1px solid #e6d9c4; font-size: .66rem; }
.grup__etiketler span.on { background: #6b2030; border-color: #6b2030; color: #fff6ea; }

/* Gelişim raporu kartı */
.rapor { width: min(100%, 380px); border-radius: 18px; overflow: hidden; background: #f3e9da; color: var(--metin); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); font-size: .78rem; }
.rapor__ust { padding: 12px 16px 10px; background: #6b2030; color: #fff6ea; }
.rapor__ust span { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em; opacity: .8; }
.rapor__ust b { display: block; margin: 2px 0 1px; font: 700 1.6rem/1 var(--font-baslik); }
.rapor__ust small { opacity: .8; }
.rapor__ic { padding: 10px 12px 12px; display: grid; gap: 8px; }
.rapor__kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rapor__kutular div { padding: 6px 8px; border-radius: 10px; background: #fffaf2; border: 1px solid #e6d9c4; }
.rapor__kutular span { display: block; color: var(--metin-soft); font-size: .66rem; white-space: nowrap; }
.rapor__kutular b { display: block; font: 700 1.3rem/1.1 var(--font-baslik); color: #2f6b45; }
.rapor__kutular b small { font-size: .74rem; margin-left: 2px; }
.rapor__kutular i { font-style: normal; color: var(--metin-soft); font-size: .62rem; white-space: nowrap; }
.rapor__grafik { position: relative; padding: 6px 10px 8px; border-radius: 10px; background: #fffaf2; border: 1px solid #e6d9c4; }
.rapor__grafik-ust { display: flex; justify-content: space-between; color: var(--metin-soft); font-size: .66rem; line-height: 16px; margin-bottom: 12px; }
.rapor__grafik svg { display: block; width: 100%; height: 46px; overflow: visible; }
.rapor__noktalar { position: absolute; left: 10px; right: 10px; top: 34px; height: 46px; }
.rapor__noktalar i { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fffaf2; border: 2.5px solid #6b2030; }
.rapor__noktalar span { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .6rem; font-weight: 700; }
.rapor__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rapor__alt span { padding: 5px 8px; border-radius: 10px; background: #fffaf2; border: 1px solid #e6d9c4; color: var(--metin-soft); font-size: .7rem; }
.rapor__alt b { font: 700 1.15rem/1 var(--font-baslik); color: var(--bordo-700); margin-right: 3px; }
.rapor__not { margin: 0; padding-left: 9px; border-left: 3px solid #6b2030; font-size: .74rem; }
.rapor__imza { display: flex; justify-content: space-between; color: var(--metin-soft); font-size: .62rem; }
.rapor__imza b { color: var(--metin); }

/* Telefonun ana ekranı: saat, RepDay widget'ı ve uygulama simgeleri (aralarında RepDay) */
.ana-ekran {
  position: relative; width: 236px; height: 420px; padding: 32px 14px 0;
  border: 7px solid #0e0b0a; border-bottom: 0; border-radius: 36px 36px 0 0; overflow: hidden;
  background: linear-gradient(170deg, #f3c5b4 0%, #d48c86 55%, #a9585f 100%);
  color: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}
.ae-ust { position: absolute; top: 9px; left: 20px; right: 20px; font: 600 .66rem/1 var(--font-metin); }
.ae-ust i { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 66px; height: 19px; border-radius: 99px; background: #000; }
.ae-saat { margin-top: 50px; text-align: center; text-shadow: 0 1px 8px rgba(80, 20, 30, .25); }   /* bildirimin altında kalmasın */
.ae-saat b { display: block; font: 600 2.4rem/1 var(--font-metin); letter-spacing: -.02em; }
.ae-saat span { font-size: .7rem; font-weight: 500; }
.ae-widget { margin-top: 12px; padding: 9px 10px 8px; border-radius: 18px; background: rgba(246, 237, 223, .95); color: var(--metin); font-size: .66rem; box-shadow: 0 10px 24px -12px rgba(61, 15, 27, .5); }
.ae-widget__ust { display: flex; align-items: center; gap: 7px; padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid #e2d3ba; }
.ae-widget__ust img { width: 22px; height: 22px; border-radius: 6px; }
.ae-widget__ust b { display: block; color: var(--bordo-700); font-size: .76rem; line-height: 1.1; }
.ae-widget__ust small { color: var(--metin-soft); font-size: .56rem; }
.ae-widget__ust > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-widget__ust i { flex: none; white-space: nowrap; margin-left: auto; padding: 2px 7px; border-radius: 99px; background: var(--bordo-700); color: #fff; font-style: normal; font-weight: 600; font-size: .58rem; }
.ae-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ae-widget li { display: flex; gap: 8px; padding: 2px 6px; border-radius: 6px; }
.ae-widget li b { font-family: var(--font-baslik); font-size: .74rem; color: var(--bordo-700); }
.ae-widget li.tamam { opacity: .55; }
.ae-widget li.simdi { background: #ead3d0; font-weight: 600; }
.ae-widget li em { margin-left: auto; padding: 0 6px; border-radius: 99px; background: var(--bordo-700); color: #fff; font-style: normal; font-size: .52rem; line-height: 1.6; align-self: center; }
.ae-widget p { margin: 2px 6px 0; color: var(--bordo-700); font-weight: 700; font-size: .58rem; }
.ae-widget-ad { display: block; margin-top: 4px; text-align: center; font-size: .58rem; opacity: .9; }
.ae-uygulamalar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin-top: 12px; }
.ae-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .56rem; text-shadow: 0 1px 4px rgba(80, 20, 30, .3); }
.ae-app i, .ae-app img { width: 40px; height: 40px; border-radius: 11px; }
.ae-app i { background: var(--r); opacity: .9; }
.ae-app--repday { font-weight: 700; }
.ae-app--repday::before { /* RepDay simgesinin etrafında halka */
  content: ''; position: absolute; top: -4px; left: 50%; width: 48px; height: 48px; margin-left: -24px;
  border-radius: 14px; border: 2px solid #fff;
}
.ae-bildirim {
  position: absolute; z-index: 3; top: 30px; left: 8px; right: 8px; display: flex; gap: 8px; padding: 8px 10px;
  border-radius: 14px; background: rgba(251, 244, 234, .97); color: var(--metin); font-size: .62rem; line-height: 1.3;
  box-shadow: 0 12px 28px -10px rgba(61, 15, 27, .55);
}
.ae-bildirim img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.ae-bildirim b { display: block; }
.ae-bildirim__ust { display: flex; justify-content: space-between; font-size: .54rem; letter-spacing: .06em; opacity: .7; }
.ae-bildirim__ust i { font-style: normal; }

/* Not defterinden geçiş */
.aktar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; width: 100%; }
.defter { position: relative; padding: 26px 18px 14px; border-radius: 12px; background: #fbf6ee; color: var(--metin); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .6); font-size: .92rem; }
.defter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 12px 12px 0 0; background: var(--somon); }
.defter__halkalar { position: absolute; top: -8px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.defter__halkalar i { width: 6px; height: 20px; border-radius: 4px; border: 2px solid #8a7d73; background: #fbf6ee; }
.defter b { display: block; margin-bottom: 6px; color: var(--bordo-700); font-size: 1.05rem; }
.defter span { display: block; padding: 5px 0; border-top: 1px solid #ece2d3; }
.aktar__ok { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--somon); color: var(--bordo-900); }
.aktar__ok svg { width: 22px; height: 22px; }
.aktar__sonuc { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #f3e9da; color: var(--metin); font-size: .82rem; }
.aktar__say { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aktar__say span { padding: 6px; border-radius: 10px; background: #fffaf2; text-align: center; color: var(--metin-soft); font-size: .74rem; }
.aktar__say b { display: block; font: 700 1.4rem/1 var(--font-baslik); color: var(--bordo-700); }
.aktar__ogr { padding: 8px 10px; border-radius: 10px; background: #fffaf2; }
.aktar__ogr b { font-size: .86rem; }
.aktar__ogr i { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--bordo-700); color: #fff; font-style: normal; font-size: .62rem; font-weight: 700; }
.aktar__ogr small { display: block; color: var(--metin-soft); font-size: .72rem; }
.aktar__anahtar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fffaf2; }
.anahtar { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #2f6b45; }
.anahtar::after { content: ''; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .4s var(--ease); }

/* -- ÖZELLİKLER: tüm özellikler bir arada -- */
.ozellikler { background: var(--krem); }
.kategoriler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kategori { padding: 22px; border-radius: 20px; background: var(--kagit); border: 1px solid var(--krem-3); transition: border-color .25s ease, box-shadow .25s ease; }
.kategori:hover { border-color: var(--somon); box-shadow: var(--golge); }
/* Başlık bir düğme: telefonda dokununca maddeler açılır, masaüstünde hep açık */
.kategori__baslik { font-size: 1.45rem; color: var(--bordo-700); }
.kategori__ust {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default;
}
.kategori__arti { display: none; }
.kategori-ipucu { display: none; }
.kategori ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kategori li { position: relative; padding-left: 18px; color: var(--metin-soft); font-size: .95rem; line-height: 1.45; }
.kategori li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--somon); }
.o-ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bordo-700); color: var(--krem); }
.o-ikon svg { width: 22px; height: 22px; }
.yakindan { margin: clamp(48px, 6vw, 72px) 0 20px; font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--metin); }

.fiyat__not { margin: 18px 0 0; color: var(--metin-soft); font-size: .85rem; }

/* Arkadaşını getir kartı (fiyat bölümü) */
.davet { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--radius); background: var(--kagit); border: 2px dashed var(--somon); }
.davet__ikon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--somon); color: var(--bordo-900); }
.davet__ikon svg { width: 26px; height: 26px; }
.davet b { display: block; font: 700 1.35rem/1.15 var(--font-baslik); color: var(--bordo-700); }
.davet span { color: var(--metin-soft); font-size: .95rem; }
.yz-pill--yesil { background: #dcebdd; color: #2f6b45; }

/* -- KURUCU: bordo zemin, krem alıntı kartı -- */
.kurucu {
  color: var(--krem);
  background:
    radial-gradient(rgba(255, 250, 242, .07) 1.2px, transparent 1.4px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--bordo-800), var(--bordo-900));
}
.kurucu { padding: clamp(56px, 7vw, 88px) 0; }
/* Masaüstü: solda başlık + imza, sağda alıntı. Dar ekran: başlık → alıntı → imza */
.kurucu__izgara {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "ust alinti" "imza alinti";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: center;
}
.kurucu__ust { grid-area: ust; align-self: end; }
.kurucu__ust h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); margin-top: 14px; }
.kurucu__ust h2 em { font-style: normal; color: var(--somon); display: block; }
.kurucu__ust p { margin: 14px 0 0; font-size: 1.08rem; opacity: .85; }
.alinti { grid-area: alinti; position: relative; margin: 0; padding: 46px clamp(24px, 3.5vw, 40px) 30px; border-radius: 26px; background: var(--kagit); color: var(--metin); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55); }
.alinti::before { content: '“'; position: absolute; top: -28px; left: clamp(24px, 3.5vw, 40px); width: 60px; height: 60px; border-radius: 50%; background: var(--somon); color: var(--bordo-800); font: 700 3rem/78px var(--font-baslik); text-align: center; }
.alinti blockquote { margin: 0; }
.alinti p { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; }
.alinti p:last-child { margin-bottom: 0; }
.alinti strong { color: var(--bordo-700); }
.imza { grid-area: imza; align-self: start; }
.imza strong { display: block; font: 400 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--font-logo); color: var(--krem); }
.imza span { display: block; margin-top: 4px; font-size: .95rem; opacity: .75; }

/* -- Dar ekranlar -- */
@media (max-width: 899px) {
  .yuzen {
    left: auto; right: 12px; top: auto; bottom: 82px;
    width: min(250px, 68vw); padding: 13px 15px; border-radius: 18px; font-size: .84rem;
  }
  .yuzen--bildirim img { width: 34px; height: 34px; }
  /* telefonda kart ekranın bir kısmını örter: önce telefondaki animasyon izlensin */
  .yuzen.aktif { transition-delay: .3s; }
  .yz-renk:nth-of-type(n+4) { display: none; }
  .yz-buyuk { font-size: .98rem; margin: 8px 0 10px; }
  .yz-tutar { font-size: 1.6rem; }
  .yz-satir:last-child { display: none; }
  .kategoriler { grid-template-columns: repeat(2, 1fr); }
  .yakin__satir { grid-template-columns: 1fr; }

  /* Özellik kategorileri: iki sütun, dokununca açılır */
  .kategori-ipucu { display: block; margin: -12px 0 14px; color: var(--metin-soft); font-size: .92rem; }
  .kategoriler { grid-auto-flow: row dense; gap: 10px; }
  .kategori { padding: 16px; cursor: pointer; }
  .kategori__baslik { font-size: 1.22rem; line-height: 1.1; }
  .kategori__ust { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; margin: 0; padding-right: 26px; cursor: pointer; }
  .kategori__arti { /* + işareti; açılınca × olur */
    display: block; position: absolute; top: 0; right: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--krem-2);
    transition: transform .35s var(--ease), background-color .3s ease;
  }
  .kategori__arti::before, .kategori__arti::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--bordo-700); }
  .kategori__arti::after { transform: rotate(90deg); }
  .kategori__ic { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease), margin-top .4s var(--ease); }
  .kategori__ic > ul { overflow: hidden; min-height: 0; }
  .kategori.acik { grid-column: 1 / -1; border-color: var(--somon); box-shadow: var(--golge); }
  .kategori.acik .kategori__ust { flex-direction: row; align-items: center; min-height: 0; }
  .kategori.acik .kategori__arti { transform: rotate(45deg); background: var(--somon); }
  .kategori.acik .kategori__ic { grid-template-rows: 1fr; margin-top: 12px; }
  .yakin__satir:nth-child(even) .yakin__metin { order: 0; }
  .yakin__gorsel { height: auto; min-height: 340px; }
  .yakin__gorsel--tel { height: 450px; min-height: 0; }
  .kurucu__izgara { grid-template-columns: 1fr; grid-template-areas: "ust" "alinti" "imza"; row-gap: 44px; }
  .kurucu__ust { align-self: auto; }
}
@media (max-width: 560px) {
  .aktar { grid-template-columns: 1fr; justify-items: center; }
  .aktar__ok { transform: rotate(90deg); }
  .defter, .aktar__sonuc { width: 100%; }
  .yakin__satir { padding: 16px; border-radius: 22px; }
  .yakin__gorsel { padding: 18px 12px; }
  .olcum { grid-template-columns: 1fr; justify-items: center; }
  .olcum .aktar__ok { transform: rotate(90deg); }
  .olcum__form { width: 100%; }
  .rapor__kutular { gap: 6px; }
  .rapor__kutular div { padding: 7px 8px; }
  .rapor__kutular b { font-size: 1.25rem; }
  .rapor__kutular span, .rapor__kutular i { font-size: .62rem; white-space: nowrap; }
  .rapor__imza { flex-direction: column; gap: 2px; }
  .kategori { padding: 14px; }
  .kurucu { padding: 30px 0 34px; }
  .kurucu__ust h2 { font-size: 1.85rem; margin-top: 10px; }
  .kurucu__ust p { font-size: .98rem; margin-top: 10px; }
  .alinti { padding: 40px 20px 24px; }
  .alinti p { font-size: .98rem; }
  .kurucu__izgara { row-gap: 36px; }
  .imza strong { font-size: 1.8rem; }
  .davet { flex-direction: column; align-items: flex-start; }
}

/* -- Kartların içindeki küçük animasyonlar (hareket seven herkes için) --
   Başlangıç hali gizli; kart ekrana girince (.in) sırayla belirir. */
@media (prefers-reduced-motion: no-preference) {
  .js .rapor__kutular div, .js .rapor__noktalar i, .js .ae-widget li, .js .ae-bildirim,
  .js .defter span, .js .aktar__sonuc > *, .js .aktar__ok {
    opacity: 0; transition: opacity .5s ease, transform .7s var(--ease);
  }
  .js .rapor__kutular div { transform: translateY(14px); transition-delay: calc(var(--i) * 120ms + .3s); }
  .js .rapor__grafik polyline { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.6s var(--ease) .6s; }
  .js .rapor__noktalar i { transform: scale(0); transition-delay: calc(var(--i) * 300ms + .7s); }
  .js .ae-widget li { transform: translateX(-10px); transition-delay: calc(var(--i, 0) * 110ms + .4s); }
  .js .ae-bildirim { transform: translateY(-90px); transition-delay: 1.3s; transition-duration: .5s, .9s; }
  .in .ae-app--repday::before { animation: halka 2s ease-in-out 1s infinite; }
  @keyframes halka { 50% { transform: scale(1.12); opacity: .4; } }
  .js .defter span { transform: translateX(-12px); transition-delay: calc(var(--i) * 160ms + .3s); }
  .js .aktar__ok { transform: scale(.4); transition-delay: 1s; }
  .js .aktar__sonuc > * { transform: translateY(14px); transition-delay: calc(var(--i) * 140ms + 1.2s); }
  .js .anahtar::after { left: 3px; transition-delay: 2s; }
  .js .olcum__alanlar span, .js .grup__kisiler span, .js .grup__etiketler span.on { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .6s var(--ease), background-color .4s ease, color .4s ease; }
  .js .olcum__alanlar span { transition-delay: calc(var(--i) * 150ms + .3s); }
  .js .grup__kisiler span { transition-delay: .5s; }
  .js .grup__kisiler span:nth-child(2) { transition-delay: .65s; }
  .js .grup__kisiler span.yok { background: #6b2030; color: #fff6ea; text-decoration: none; transition-delay: .8s; }
  .js .grup__etiketler span.on { transition-delay: 1.8s; }
  .in .olcum__alanlar span, .in .grup__kisiler span, .in .grup__etiketler span.on { opacity: 1; transform: none; }
  .in .grup__kisiler span.yok { background: #fffaf2; color: var(--metin-soft); text-decoration: line-through; transition-delay: .8s, .8s, 1.5s, 1.5s; }

  .in .rapor__kutular div, .in .rapor__noktalar i, .in .ae-widget li, .in .ae-bildirim,
  .in .defter span, .in .aktar__sonuc > * { opacity: 1; transform: none; }
  .in .rapor__grafik polyline { stroke-dashoffset: 0; }
  .in .aktar__ok { opacity: 1; transform: none; animation: okNabiz 1.8s ease-in-out 1.8s infinite; }
  .in .anahtar::after { left: 19px; }
  @keyframes okNabiz { 50% { transform: translateX(5px); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  .in .aktar__ok, .in .olcum .aktar__ok { transform: rotate(90deg); animation: none; }
}

/* ---------- 11) GEÇİŞ EFEKTLERİ ----------
   Hepsi tek yerde. Bir efekti kapatmak istersen ilgili satırları silmen yeterli. */

/* Telefonun arkasındaki yumuşak ışık (sadece canlı modda) */
.story__glow { display: none; }
.story.is-live .story__glow {
  display: block; position: absolute; z-index: 1; left: 50%; top: 56%;
  width: min(85vmin, 760px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244, 180, 154, .22), rgba(244, 180, 154, 0));
  transform: translate(calc(-50% + var(--dx) * var(--intro)), -50%);
}

/* Alt sekmelerdeki ilerleme çizgisi (--p: toplam ilerleme, main.js yazar) */
.story__chips { position: relative; }
.story__ilerleme { position: absolute; left: 18px; right: 18px; bottom: 2px; height: 2px; border-radius: 2px; background: rgba(246, 237, 223, .14); overflow: hidden; pointer-events: none; }
.story__ilerleme i { display: block; height: 100%; background: var(--somon); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Tik atılınca dokunma dalgası */
.u-check, .u-ok { position: relative; }
.u-check::after, .u-ok::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--u-green); opacity: 0;
}
@keyframes dalga { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }

/* Üst menü: sayfa kayınca gölge alır */
.ust { transition: box-shadow .3s ease, background-color .3s ease; }
.ust.kaydi { background: rgba(61, 15, 27, .96); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5); }

/* Başlıkların kelime kelime maskeyle açılması (main.js [data-split] başlıkları böler) */
.split-k { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-k > span { display: inline-block; }

/* Fiyat kartları: fareyle 3D eğim (main.js --rx/--ry yazar) */
.plan { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .3s ease; }
.plan:hover { box-shadow: 0 34px 60px -26px rgba(61, 15, 27, .5); }

/* Parlama: yıllık plan etiketi ve butonlar */
.parla { position: relative; overflow: hidden; }
.parla::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  transform: translateX(-110%);
}
.btn { position: relative; overflow: hidden; }
.btn:not(.btn--soon)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s ease;
}
.btn:not(.btn--soon):hover::before { transform: translateX(120%); }

/* SSS: yumuşak açılma (destekleyen tarayıcılarda; diğerlerinde anında açılır) */
.sss details { interpolate-size: allow-keywords; transition: border-color .3s ease; }
.sss details::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.sss details[open]::details-content { block-size: auto; }
.sss details[open] { border-color: var(--bordo-600); }
.sss summary::after { transition: transform .4s var(--ease); }
.sss details[open] summary::after { content: '+'; transform: translateY(-50%) rotate(45deg); }

/* Hareket seven herkes için (sistemde "hareketi azalt" kapalıysa) */
@media (prefers-reduced-motion: no-preference) {
  /* Açılış sekansı: menü yukarıdan, giriş öğeleri sırayla, telefon eğik halde aşağıdan */
  @keyframes yukaridan { from { opacity: 0; transform: translateY(-100%); } }
  @keyframes asagidan { from { opacity: 0; transform: translateY(26px); } }
  @keyframes telefonGel { from { opacity: 0; translate: 0 160px; } }
  .js .ust { animation: yukaridan .8s var(--ease) both; }
  .js .intro .etiket { animation: asagidan .7s var(--ease) .05s both; }
  .js .intro__alt { animation: asagidan .8s var(--ease) .6s both; }
  .js .intro .cta { animation: asagidan .8s var(--ease) .75s both; }
  .js .intro__not { animation: asagidan .8s var(--ease) .9s both; }
  .js .story__phone { animation: telefonGel 1.5s var(--ease) .3s both; }

  /* Işık yavaşça nefes alır */
  @keyframes nefes { 50% { scale: 1.12; opacity: .75; } }
  .story.is-live .story__glow { animation: nefes 7s ease-in-out infinite; }

  .u-row.done .u-check::after, .u-ok.tik::after { animation: dalga .75s ease-out; }

  .split-k > span { transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
  [data-split].in .split-k > span { transform: none; }

  @keyframes parla { 55%, 100% { transform: translateX(110%); } }
  .parla::after { animation: parla 3.4s ease-in-out 1.2s infinite; }

  /* Son çağrıdaki nokta deseni yavaşça kayar */
  @keyframes noktaKay { to { background-position: 26px 26px, 0 0; } }
  .son { animation: noktaKay 18s linear infinite; }
}

/* Hareketi azaltanlar için: açılışta sadece yumuşak solma */
@media (prefers-reduced-motion: reduce) {
  @keyframes solma { from { opacity: 0; } }
  .js .ust, .js .intro, .js .story__phone { animation: solma .9s ease both; }
  .split-k > span { opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--i) * 40ms); }
  [data-split].in .split-k > span { opacity: 1; }
}

/* Hareketi azaltmak isteyenlere saygı (Windows "Animasyon efektleri" kapalıysa da devreye girer):
   kayma, eğim, büyüme gibi hareketler kapanır; sadece yumuşak solma geçişleri kalır. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story.is-live .story__phone { transform: translate(calc(-50% + var(--dx) * var(--intro)), calc(var(--dy) * (1 - var(--intro)))); }
  .scr, .scr.gecti, .chap, .chap > *, .word, .word.gecti, .js [data-reveal], .split-k > span {
    transform: none !important; translate: none !important; filter: none !important;
  }
  .story.is-live .chap, .story.is-live .chap.aktif, .story.is-live .chap.gecti { transform: translateY(-50%) !important; }
  .scr, .chap, .chap > *, .word, .js [data-reveal] { transition-property: opacity !important; transition-duration: .4s !important; }
  .yuksel .w, .kaydir svg, .u-check::after, .u-ok::after, .son, .parla::after { animation: none !important; }
  .plan { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .story.is-live .chap, .story.is-live .chap.aktif, .story.is-live .chap.gecti { transform: none !important; }
}