/* KPSS MERKEZİ landing v2 (24.09, YY v2 kalıbı; kurucu 25406 paket planı onayı). Renkler logo A: lacivert #1F4E79 + sarı #F2B705.
   Kaynak: YY landing v2 · tur 2 "Canlı çalışma ekranı" (kurucu 25313). Font B: Archivo dar + Public Sans (kurucu 25311).
   Lacivert sahne = ürünün iş yaptığı yer; ürün ekranı kâğıt; fosfor = ışık ve doğru cevap kalemi.
   Hareket transform + opacity (fosfor kalemi ve üstü çizili yanlış için yalnız background-size).
   Büyük harf şablona büyük yazılır (text-transform yok: ı/İ). Uzun tire yok. */

:root {
  --kagit: #FAFAF7;
  --kagit-2: #F1F0E9;
  --cizgi: #E4E2D9;
  --murekkep: #16283F;
  --murekkep-2: #2C3E57;
  --gri: #566175;
  --sahne: #1F4E79;
  --sahne-metin: #F4F2EA;
  --sahne-ikincil: #CBD6E4;
  --sahne-soluk: #9DB0C8;
  --sahne-kenar: rgba(244, 242, 234, .24);
  --sahne-cizgi: rgba(244, 242, 234, .12);
  --fosfor: #F2B705;
  --mor: #1F4E79;   /* KPSS: YY'nin mor vurgusu yerine marka laciverti */
  --kirmizi: #B3261E;
  --yesil: #4ADE80;
  --wa: #25D366;

  --f-baslik: 'Archivo', system-ui, sans-serif;
  --f-govde: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-soru: Georgia, 'Times New Roman', serif;

  --kenar: 20px;
  --ust-h: 60px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
html[data-font="a"] { --f-baslik: 'Gloock', Georgia, serif; }
html[data-font="c"] { --f-baslik: 'Young Serif', Georgia, serif; --f-govde: 'Hanken Grotesk', system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + 12px); }
body {
  margin: 0; background: var(--kagit); color: var(--murekkep);
  font-family: var(--f-govde); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--fosfor); outline-offset: 3px; border-radius: 6px; }
.u-ekran :focus-visible, [data-ust="kagit"] :focus-visible, .u-kagit :focus-visible { outline-color: var(--mor); }

.u-ic { width: min(100% - 2 * var(--kenar), 1180px); margin-inline: auto; }
.u-atla { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--fosfor); color: var(--murekkep); font-weight: 700; border-radius: 8px; text-decoration: none; }
.u-atla:focus { top: 12px; }
.u-ok { width: 20px; height: 20px; flex: none; transition: transform 200ms var(--ease); }

/* ---------- Header ---------- */
.u-ust { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--ust-h); color: var(--sahne-metin); }
.u-ust::before { content: ''; position: absolute; inset: 0; background: var(--kagit); border-bottom: 1px solid var(--cizgi); opacity: 0; transition: opacity 240ms var(--ease); }
.u-ust[data-ust="kagit"] { color: var(--murekkep); }
.u-ust[data-ust="kagit"]::before { opacity: 1; }
.u-ust-ic { position: relative; height: 100%; display: flex; align-items: center; gap: 16px; }
.u-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.u-logo-ikon { width: 34px; height: 34px; flex: none; }
.u-logo-zemin { fill: var(--sahne-metin); transition: fill 240ms; }
.u-logo-yazi { fill: var(--murekkep); font: 800 18px var(--f-baslik); letter-spacing: .3px; transition: fill 240ms; }   /* KPSS: logo A yazı tipi (kalın düz), yazı 'KPSS' */
[data-ust="kagit"] .u-logo-zemin { fill: var(--murekkep); }
[data-ust="kagit"] .u-logo-yazi { fill: var(--kagit); }
.u-logo-ad { font-family: var(--f-baslik); font-weight: 800; font-stretch: 78%; font-size: 21px; line-height: 1; white-space: nowrap; letter-spacing: -.005em; }
html[data-font="a"] .u-logo-ad, html[data-font="c"] .u-logo-ad { font-weight: 400; }
.u-logo-ad i { font-style: normal; color: var(--fosfor); margin: 0 1px; }
[data-ust="kagit"] .u-logo-ad i { color: var(--mor); }
.u-nav { display: none; }
.u-ust-eylem { display: flex; align-items: center; gap: 6px; }
.u-wa {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 10px;
  border: 1px solid var(--sahne-kenar); border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none;
}
[data-ust="kagit"] .u-wa { border-color: var(--cizgi); }
.u-wa-ikon { width: 19px; height: 19px; color: var(--wa); flex: none; }
.u-giris { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 700; text-decoration: none; }
.u-ust .u-ust-cta { display: none; }

/* ---------- Butonlar ---------- */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 12px;
  font-family: var(--f-govde); font-size: 17px; font-weight: 800; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease);
}
.u-btn:active { transform: scale(.98); }
.u-btn:hover .u-ok { transform: translateX(3px); }
.u-btn-fosfor { background: var(--fosfor); color: var(--murekkep); }
.u-btn-cizgi { background: transparent; color: var(--sahne-metin); box-shadow: inset 0 0 0 1.5px var(--sahne-kenar); min-height: 48px; padding: 0 18px; font-size: 15px; }
.u-btn-cizgi .u-wa-ikon { width: 20px; height: 20px; }
.u-btn-kucuk { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.u-btn-genis { width: 100%; }

/* ---------- Sahne + hero ---------- */
.u-sahne { position: relative; background-color: var(--sahne); color: var(--sahne-metin); }
.u-hero { padding: calc(var(--ust-h) + 10px) 0 56px; overflow: hidden; }
.u-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(244, 242, 234, .03) 31px 32px);
}
.u-hero-ic { position: relative; display: grid; grid-template-areas: "bas" "ekran" "hizmet" "eylem" "guven"; row-gap: 18px; }
.u-hero-bas { grid-area: bas; }
.u-ekran-kap { grid-area: ekran; }
.u-hizmetler { grid-area: hizmet; }
.u-hero-eylem { grid-area: eylem; }
.u-guven { grid-area: guven; }

.u-h1 {
  margin: 0; font-family: var(--f-baslik); font-weight: 800; font-stretch: 68%;
  font-size: clamp(2.6rem, 11.6vw, 5.8rem); line-height: .95; letter-spacing: -.012em; word-spacing: .06em; color: var(--sahne-metin);
}
html[data-font="a"] .u-h1, html[data-font="c"] .u-h1 { font-weight: 400; font-size: clamp(2.3rem, 10vw, 5rem); line-height: 1.02; }
.u-h1 span { display: block; }
.u-h1-fosfor { color: var(--fosfor); }
.u-alt { margin-top: 12px; font-size: 16.5px; line-height: 1.45; color: var(--sahne-ikincil); max-width: 36ch; }

/* ---------- Ürün ekranı (hikâye) ---------- */
.u-ekran {
  position: relative; background: var(--kagit); color: var(--murekkep); border-radius: 22px;
  padding: 12px 14px 6px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.u-ekran-cubuklar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.u-ekran-cubuklar span { height: 3px; border-radius: 3px; background: rgba(22, 40, 63, .14); overflow: hidden; }
.u-ekran-cubuklar i { display: block; height: 100%; background: var(--murekkep); transform: scaleX(0); transform-origin: left center; }
.u-ekran-cubuklar span.gecti i { transform: scaleX(1); }
.u-ekran-cubuklar span.aktif i { animation: u-dolum var(--sure, 5s) linear forwards; }
@keyframes u-dolum { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.u-ekran-ust { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 8px; }
.u-ekran-no { font-family: var(--f-baslik); font-stretch: 70%; font-weight: 800; font-size: 15px; color: var(--mor); font-variant-numeric: tabular-nums; }
.u-ekran-ad { font-size: 15px; font-weight: 800; }
.u-sahneler { position: relative; height: 272px; }
.u-s { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms; }
.u-s.aktif { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.u-ekran[data-dur] .aktif i, .u-ekran[data-dur] .u-s.aktif, .u-ekran[data-dur] .u-s.aktif *, .u-ekran[data-dur] .u-s.aktif *::before, .u-ekran[data-dur] .u-s.aktif *::after { animation-play-state: paused !important; }

.u-s-etiket { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--murekkep-2); min-height: 18px; }
.u-s-etiket small { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--gri); }
.u-s-soru { margin-top: 8px; font-family: var(--f-soru); font-size: 16px; line-height: 1.45; }
.u-s-not { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--gri); }

/* S1: şıklar */
.u-s-siklar { margin-top: 10px; display: grid; gap: 1px; }
.u-s-siklar li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 3px 4px; font-family: var(--f-soru); font-size: 15px; line-height: 1.3; }
.u-s-siklar b {
  position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--murekkep); font-family: var(--f-govde); font-size: 11.5px; font-weight: 800;
}
.u-s-siklar b::after {
  content: attr(data-h); position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  opacity: 0; transform: scale(.6);
}
.u-s-siklar span { padding: 1px 3px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-repeat: no-repeat; }
.u-s-siklar .dogru span { background-image: linear-gradient(var(--fosfor), var(--fosfor)); background-size: 100% 100%; }
.u-s-siklar .dogru b::after { background: var(--murekkep); color: var(--fosfor); opacity: 1; transform: none; }
.u-s-siklar .yanlis span { background-image: linear-gradient(transparent 52%, var(--kirmizi) 52%, var(--kirmizi) calc(52% + 2px), transparent calc(52% + 2px)); background-size: 100% 100%; }
.u-s-siklar .yanlis b::after { background: var(--kirmizi); color: #FFF8F6; opacity: 1; transform: none; }
.u-s1 .u-s-sonuc { position: absolute; top: -2px; right: 0; padding: 3px 9px; border-radius: 99px; background: rgba(179, 38, 30, .1); color: var(--kirmizi); font-size: 12px; font-weight: 800; }
.u-s1 .u-s-siklar .yanlis::before {
  content: ''; position: absolute; left: -6px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  background: rgba(22, 40, 63, .16); opacity: 0; transform: scale(.4); pointer-events: none;
}
/* JS varken şıklar nötr başlar, sahne aktif olunca sırayla işaretlenir */
.js .u-s1 .dogru span, .js .u-s1 .yanlis span { background-size: 0% 100%; }
.js .u-s1 .dogru b::after, .js .u-s1 .yanlis b::after { opacity: 0; transform: scale(.6); }
.js .u-s1 .u-s-sonuc { opacity: 0; }
.js .u-s1.aktif .yanlis::before { animation: u-dokun 520ms var(--ease) 1100ms both; }
.js .u-s1.aktif .yanlis b::after { animation: u-balon 260ms var(--ease) 1450ms both; }
.js .u-s1.aktif .yanlis span { animation: u-kalem 380ms var(--ease) 1500ms both; }
.js .u-s1.aktif .dogru b::after { animation: u-balon 260ms var(--ease) 2300ms both; }
.js .u-s1.aktif .dogru span { animation: u-kalem 620ms var(--ease) 2380ms both; }
.js .u-s1.aktif .u-s-sonuc { animation: u-belir 300ms var(--ease) 2700ms both; }
@keyframes u-dokun { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes u-balon { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes u-kalem { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes u-belir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* S2: öğretmen sohbeti */
.u-s-ozet { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.u-s-ozet b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--murekkep); color: var(--fosfor); font-size: 11.5px; font-weight: 800; flex: none; }
.u-s-ozet span { font-family: var(--f-soru); font-size: 15px; background: var(--fosfor); padding: 0 4px; border-radius: 2px; }
.u-s-ozet em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gri); }
.u-balon { margin-top: 10px; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.u-balon-sen { margin-left: auto; width: fit-content; max-width: 86%; background: var(--murekkep); color: var(--sahne-metin); border-bottom-right-radius: 4px; font-weight: 600; }
.u-balon-ai { background: var(--kagit-2); border-bottom-left-radius: 4px; }
.u-balon-etiket { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--mor); margin-bottom: 4px; }
.js .u-s2 .u-balon-sen, .js .u-s2 .u-balon-ai { opacity: 0; }
.js .u-s2.aktif .u-balon-sen { animation: u-belir 320ms var(--ease) 300ms both; }
.js .u-s2.aktif .u-balon-ai { animation: u-belir 320ms var(--ease) 1000ms both; }
.u-yaz .k { opacity: 0; }
.u-s2.aktif .u-yaz .k { animation: u-kelime 220ms ease-out both; animation-delay: calc(1300ms + var(--w) * 42ms); }
@keyframes u-kelime { from { opacity: 0; } to { opacity: 1; } }

/* S3: yanlış havuzu */
.u-havuz { margin-top: 10px; display: grid; gap: 6px; }
.u-havuz li { padding: 7px 10px; border-radius: 10px; background: var(--kagit-2); }
.u-s3 { overflow: hidden; }
.u-s3 .u-s-not { display: none; }
.u-havuz-kat { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--murekkep-2); }
.u-havuz em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; background: var(--fosfor); color: var(--murekkep); }
.u-havuz em.u-havuz-tamam { background: rgba(29, 107, 58, .12); color: #1D6B3A; }
.u-havuz-kok { display: block; margin-top: 2px; font-family: var(--f-soru); font-size: 14px; line-height: 1.35; }
.js .u-s3 .u-havuz-yeni { opacity: 0; }
.js .u-s3 .u-havuz-tamam { opacity: 0; }
.js .u-s3.aktif .u-havuz-yeni { animation: u-dus 520ms var(--ease) 350ms both; }
.js .u-s3.aktif .u-havuz-tamam { animation: u-belir 300ms var(--ease) 2100ms both; }
.js .u-s3.aktif .u-havuz-cikan { animation: u-cik 520ms var(--ease) 3200ms both; }
@keyframes u-dus { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes u-cik { from { opacity: 1; transform: none; } to { opacity: .28; transform: translateX(22px); } }

/* S4: deneme */
.u-deneme-ad { margin-top: 6px; font-family: var(--f-baslik); font-weight: 800; font-stretch: 72%; font-size: 22px; line-height: 1.1; }
html[data-font="a"] .u-deneme-ad, html[data-font="c"] .u-deneme-ad { font-weight: 400; }
.u-deneme-bilgi { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 14px; color: var(--murekkep-2); }
.u-deneme-bilgi b { font-family: var(--f-baslik); font-stretch: 70%; font-weight: 800; font-size: 18px; color: var(--murekkep); }
.u-sure { margin-left: auto; padding: 3px 10px; border-radius: 99px; background: var(--murekkep); color: var(--fosfor); font-family: var(--f-baslik); font-stretch: 70%; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.u-mini-optik { margin-top: 14px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.u-mini-optik li { position: relative; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.2px rgba(22, 40, 63, .45); }
.u-mini-optik li::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--murekkep); transform: scale(0); }
.u-s4.aktif .u-mini-optik li::after { animation: u-balon 200ms var(--ease) both; animation-delay: calc(500ms + var(--i) * 34ms); }
html:not(.js) .u-mini-optik li::after { transform: scale(1); }

/* S5: plan + tahmini puan */
.u-plan { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.u-plan li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; min-height: 26px; }
.u-plan-metin { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-plan small { flex: none; font-size: 12px; font-weight: 700; color: var(--gri); }
.u-plan-kutu { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--murekkep); }
.u-plan-kutu::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: var(--murekkep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23F7E353' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; transform: scale(0); }
.u-s5.aktif .u-plan-kutu::after { animation: u-balon 260ms var(--ease) both; animation-delay: calc(600ms + var(--i) * 650ms); }
html:not(.js) .u-plan-kutu::after { transform: scale(1); }
.u-tahmin { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(22, 40, 63, .25); }
.u-tahmin-sayi { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.u-tahmin-sayi b { font-family: var(--f-baslik); font-stretch: 66%; font-weight: 800; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.u-tahmin-sayi em { font-style: normal; font-size: 13px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--fosfor); color: var(--murekkep); }
.js .u-s5 .u-tahmin-sayi em { opacity: 0; }
.js .u-s5.aktif .u-tahmin-sayi em { animation: u-belir 300ms var(--ease) 2700ms both; }

/* Canlı: kendin çöz */
.u-s-canli { overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.u-s-siklar-canli li { padding: 0; }
.u-canli-son { margin-top: 8px; }
.u-canli-son .u-btn { min-height: 52px; }
.u-kendin[hidden] { display: none; }
.u-s-siklar-canli button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 4px; text-align: left; border-radius: 8px; font-family: var(--f-soru); font-size: 15px; line-height: 1.3; }
.u-s-siklar-canli button:not(:disabled):hover { background: var(--kagit-2); }
.u-s-siklar-canli button:disabled { cursor: default; }
.u-s-siklar-canli .dogru span, .u-s-siklar-canli .yanlis span { animation: u-kalem 420ms var(--ease) both; }
.u-s-canli .u-s-sonuc { margin-top: 8px; font-size: 13px; font-weight: 800; }
.u-s-canli .u-s-sonuc.ok { color: #1D6B3A; }
.u-s-canli .u-s-sonuc.hayir { color: var(--kirmizi); }
.u-s-sonuc[hidden], .u-ai-sor[hidden], .u-balon[hidden] { display: none; }
.u-ai-sor { margin-top: 8px; width: 100%; min-height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--murekkep); font-size: 14px; font-weight: 800; }
.u-ai-sor:disabled { opacity: .65; cursor: progress; }

/* Ekran altı */
.u-ekran-alt { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--cizgi); padding-top: 4px; }
.u-ekran-ok { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--murekkep); }
.u-ekran-ok svg { width: 20px; height: 20px; }
.u-ekran-ok:hover { background: var(--kagit-2); }
.u-kendin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 800; color: var(--mor); }
.u-kendin .u-ok { width: 18px; height: 18px; }
.u-ekran[data-mod="canli"] .u-ekran-cubuklar { visibility: hidden; }
.u-ekran[data-mod="canli"] [data-ileri] { visibility: hidden; }

/* ---------- Hizmet listesi ---------- */
.u-hizmetler { display: grid; border-top: 1px solid var(--sahne-cizgi); }
.u-hizmetler li { border-bottom: 1px solid var(--sahne-cizgi); }
.u-hizmetler button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 2px; text-align: left; -webkit-tap-highlight-color: transparent; }
.u-hizmet-no { flex: none; width: 26px; font-family: var(--f-baslik); font-stretch: 66%; font-weight: 800; font-size: 26px; line-height: 1; color: var(--sahne-soluk); transition: color 240ms; }
.u-hizmet-metin { display: flex; flex-direction: column; gap: 1px; }
.u-hizmet-metin b { font-size: 16px; font-weight: 800; color: var(--sahne-ikincil); line-height: 1.3; transition: color 240ms; }
.u-hizmet-metin small { font-size: 13.5px; color: var(--sahne-soluk); line-height: 1.35; }
.u-hizmetler li.aktif .u-hizmet-no { color: var(--fosfor); }
.u-hizmetler li.aktif .u-hizmet-metin b { color: var(--sahne-metin); }

/* ---------- Eylem ---------- */
.u-fiyat-satir { margin-top: 12px; font-size: 15px; color: var(--sahne-ikincil); text-align: center; }
.u-fiyat-satir b { color: var(--sahne-metin); font-weight: 800; }
.u-cipler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.u-cip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(244, 242, 234, .07); font-size: 13px; font-weight: 600; color: var(--sahne-ikincil); }
.u-cip b { color: var(--sahne-metin); font-weight: 800; font-variant-numeric: tabular-nums; }
.u-cip-link { color: var(--sahne-metin); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(244, 242, 234, .22); }
.u-cip-link:hover, .u-cip-link:focus-visible { box-shadow: inset 0 0 0 1px var(--sahne-metin); }
.u-cip-link .u-ok { width: 14px; height: 14px; }
.u-cip-canli i { width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); animation: u-nabiz 2.4s ease-in-out infinite; }
@keyframes u-nabiz { 50% { opacity: .35; } }

/* ---------- Güven bandı ---------- */
.u-guven { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--sahne-cizgi); }
.u-guven-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.u-guven-liste li { display: flex; flex-direction: column; gap: 4px; }
.u-guven-buyuk { font-family: var(--f-baslik); font-stretch: 68%; font-weight: 800; font-size: 30px; line-height: 1; color: var(--fosfor); font-variant-numeric: tabular-nums; }
html[data-font="a"] .u-guven-buyuk, html[data-font="c"] .u-guven-buyuk { font-weight: 400; }
.u-guven-liste span { font-size: 13.5px; line-height: 1.45; color: var(--sahne-ikincil); }
.u-guven-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; }
.u-metin-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--sahne-metin); }
.u-metin-link .u-ok { width: 18px; height: 18px; }
.u-dipnot { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--sahne-soluk); max-width: 70ch; }

/* ---------- Kâğıt bölümleri ---------- */
.u-kagit { background: var(--kagit); color: var(--murekkep); }
.u-kas-kagit { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--mor); margin-bottom: 10px; }
.u-yakinda-metin { max-width: 52ch; color: var(--gri); }

/* ---------- Mobil alt çubuk ---------- */
.u-alt-cubuk {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--murekkep); color: var(--sahne-metin);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translateY(calc(100% + 24px)); transition: transform 320ms var(--ease);
}
.u-alt-cubuk[data-gorunur] { transform: none; }
.u-alt-cubuk .u-btn { min-height: 48px; padding: 0 18px; font-size: 16px; }
.u-alt-cubuk-fiyat { font-size: 13px; line-height: 1.3; color: var(--sahne-ikincil); }
.u-alt-cubuk-fiyat b { color: var(--sahne-metin); }

/* ---------- Geniş ekran ---------- */
@media (min-width: 720px) {
  :root { --kenar: 32px; }
  .u-hero-eylem { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
  .u-btn-genis { width: auto; min-width: 260px; }
  .u-fiyat-satir { margin-top: 0; text-align: left; }
  .u-cipler { justify-content: flex-start; width: 100%; }
  .u-guven-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .u-ekran-kap { max-width: 520px; }
}
@media (min-width: 960px) {
  :root { --ust-h: 72px; }
  .u-nav { display: flex; gap: 24px; margin-right: 8px; }
  .u-nav a { font-size: 15px; font-weight: 700; text-decoration: none; opacity: .86; padding: 10px 0; }
  .u-nav a:hover { opacity: 1; }
  .u-ust .u-ust-cta { display: inline-flex; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); background: var(--fosfor); color: var(--murekkep); }
  .u-ust[data-cta] .u-ust-cta { opacity: 1; pointer-events: auto; transform: none; }
  .u-ust[data-ust="kagit"] .u-ust-cta { background: var(--murekkep); color: var(--kagit); }
  .u-logo-ikon { width: 38px; height: 38px; }
  .u-logo-ad { font-size: 23px; }

  .u-hero { padding: calc(var(--ust-h) + 48px) 0 80px; }
  .u-hero-ic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "bas ekran" "eylem ekran" "hizmet ekran" "guven guven";
    grid-template-rows: auto auto 1fr auto; column-gap: 72px; row-gap: 28px; align-items: start;
  }
  .u-alt { font-size: 19px; margin-top: 18px; }
  .u-ekran-kap { max-width: none; align-self: start; position: sticky; top: calc(var(--ust-h) + 28px); }
  .u-ekran { padding: 16px 20px 8px; border-radius: 26px; }
  .u-sahneler { height: 372px; }
  .u-h1 { font-size: clamp(3.4rem, 6.2vw, 5.2rem); }
  .u-ekran-ust { margin: 12px 2px 12px; }
  .u-ekran-ad { font-size: 16px; }
  .u-s-etiket { font-size: 12px; }
  .u-s-soru { font-size: 21px; line-height: 1.5; }
  .u-s-siklar { margin-top: 14px; gap: 4px; }
  .u-s-siklar li { font-size: 18px; min-height: 44px; }
  .u-s-siklar b { width: 28px; height: 28px; font-size: 12.5px; }
  .u-balon { font-size: 16px; }
  .u-havuz-kok { font-size: 15.5px; }
  .u-plan li { font-size: 15.5px; }
  .u-s3 .u-s-not { display: block; }
  .u-hizmetler button { min-height: 62px; }
  .u-guven { margin-top: 24px; }
  .u-guven-buyuk { font-size: 38px; }
  .u-alt-cubuk { display: none; }
}


/* ---------- Ortak ---------- */
.u-h2 { margin: 0; font-family: var(--f-baslik); font-weight: 800; font-stretch: 70%; font-size: clamp(2.2rem, 9.5vw, 4rem); line-height: .98; letter-spacing: -.01em; }
html[data-font="a"] .u-h2, html[data-font="c"] .u-h2 { font-weight: 400; }
.u-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.u-btn-koyu { background: var(--murekkep); color: var(--kagit); }

/* ---------- Paketler ---------- */
.u-paketler { padding: 56px 0 48px; }
.u-paket-bas { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.u-donem { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; padding: 4px; border-radius: 14px; background: var(--kagit-2); box-shadow: inset 0 0 0 1px var(--cizgi); }
.u-donem button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 4px 10px; border-radius: 10px; font-size: 15px; font-weight: 800; color: var(--murekkep-2); line-height: 1.15; transition: background-color 200ms, color 200ms; }
.u-donem button small { font-size: 11.5px; font-weight: 700; color: var(--mor); }
.u-donem button[aria-checked="true"] { background: var(--murekkep); color: var(--kagit); }
.u-donem button[aria-checked="true"] small { color: var(--fosfor); }

.u-kartlar { display: grid; gap: 14px; }
.u-kart { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 20px; background: #FFFEFA; box-shadow: inset 0 0 0 1px var(--cizgi); }
.u-kart-one { order: -1; background: var(--murekkep); color: var(--sahne-metin); box-shadow: 0 24px 50px -24px rgba(22, 40, 63, .55); }
.u-rozet { position: absolute; top: -12px; left: 20px; padding: 4px 12px; border-radius: 99px; background: var(--fosfor); color: var(--murekkep); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.u-kart-ad { margin: 0; font-family: var(--f-baslik); font-weight: 800; font-stretch: 74%; font-size: 28px; line-height: 1; }
html[data-font="a"] .u-kart-ad, html[data-font="c"] .u-kart-ad { font-weight: 400; }
.u-kart-ozet { margin-top: 6px; font-size: 14.5px; color: var(--gri); }
.u-kart-one .u-kart-ozet { color: var(--sahne-ikincil); }
.u-fiyat { margin-top: 16px; }
.u-fiyat p b { font-family: var(--f-baslik); font-weight: 800; font-stretch: 66%; font-size: 56px; line-height: .9; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
html[data-font="a"] .u-fiyat p b, html[data-font="c"] .u-fiyat p b { font-weight: 400; }
.u-fiyat p span { margin-left: 6px; font-size: 15px; font-weight: 700; color: var(--gri); }
.u-kart-one .u-fiyat p span { color: var(--sahne-ikincil); }
.u-kart-one .u-fiyat p b { color: var(--fosfor); }
.u-fiyat-alt { margin-top: 6px; font-size: 13.5px; color: var(--gri); }
.u-kart-one .u-fiyat-alt { color: var(--sahne-ikincil); }
.u-paketler .u-fiyat-omur { display: none; }
.u-paketler[data-donem="omur"] .u-fiyat-omur { display: block; }
.u-paketler[data-donem="omur"] .u-fiyat-aylik { display: none; }
.u-fiyat p.u-fiyat-omur:not(.u-fiyat-alt), .u-fiyat p.u-fiyat-aylik:not(.u-fiyat-alt) { animation: u-belir 280ms var(--ease) both; }
.u-kart-btn { margin-top: 16px; width: 100%; }
.u-haklar { margin-top: 18px; display: grid; gap: 9px; }
.u-haklar li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.4; }
.u-haklar li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--murekkep);
  -webkit-mask: none;
}
.u-haklar li::after { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 5px; border-left: 2px solid var(--fosfor); border-bottom: 2px solid var(--fosfor); transform: rotate(-45deg); }
.u-kart-one .u-haklar li::before { background: var(--fosfor); }
.u-kart-one .u-haklar li::after { border-color: var(--murekkep); }
.u-hak-ust { font-weight: 800; }
.u-yok { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cizgi); font-size: 13.5px; line-height: 1.45; color: var(--gri); }
.u-yok b { color: var(--murekkep-2); }

.u-odeme-guven { display: grid; gap: 12px; margin-top: 26px; }
.u-odeme-guven li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--murekkep-2); }
.u-odeme-guven svg { flex: none; width: 22px; height: 22px; color: var(--murekkep); margin-top: 1px; }
.u-odeme-guven .u-wa-ikon { color: var(--wa); }
.u-odeme-guven b { color: var(--murekkep); }
.u-guven-wa { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; text-decoration: none; color: inherit; }
.u-guven-wa em { display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; font-style: normal; font-weight: 800; color: var(--mor); text-decoration: underline; text-underline-offset: 3px; }
.u-guven-wa span { display: flex; flex-direction: column; align-items: flex-start; }

.u-kiyas { margin-top: 26px; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.u-kiyas summary, .u-sss summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 2px;
  font-size: 16px; font-weight: 800; cursor: pointer; list-style: none;
}
.u-kiyas summary::-webkit-details-marker, .u-sss summary::-webkit-details-marker { display: none; }
.u-kiyas summary::after, .u-sss summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--ease); }
.u-kiyas[open] summary::after, .u-sss details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.u-kiyas-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 14px; }
.u-kiyas table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.u-kiyas th, .u-kiyas td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--cizgi); }
.u-kiyas thead th { font-weight: 800; font-size: 13px; }
.u-kiyas tbody th { text-align: left; font-weight: 600; color: var(--murekkep-2); }
.u-kiyas td:nth-child(3) { background: rgba(242, 183, 5, .22); font-weight: 700; }
.u-var { display: inline-block; width: 10px; height: 6px; border-left: 2px solid var(--murekkep); border-bottom: 2px solid var(--murekkep); transform: rotate(-45deg) translateY(-2px); }
.u-yokis { color: var(--gri); }

/* ---------- SSS ---------- */
.u-sss { padding: 24px 0 64px; }
.u-sss-liste { margin-top: 18px; border-top: 1px solid var(--cizgi); }
.u-sss details { border-bottom: 1px solid var(--cizgi); }
.u-sss details p { padding: 0 2px 18px; font-size: 15.5px; line-height: 1.6; color: var(--murekkep-2); max-width: 68ch; }

/* ---------- Kapanış ---------- */
.u-kapanis { padding: 64px 0 72px; overflow: hidden; }
.u-kapanis::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(244, 242, 234, .03) 31px 32px); }
.u-kapanis-ic { position: relative; }
.u-kapanis .u-alt b { color: var(--sahne-metin); }
.u-kapanis-eylem { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.u-kapanis-eylem .u-btn { width: 100%; }

/* ---------- Footer ---------- */
.u-alt-bilgi { background: var(--kagit); color: var(--murekkep); padding: 48px 0 calc(96px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); }
.u-alt-ic { display: grid; gap: 28px; }
.u-alt-marka .u-logo img { width: 34px; height: 34px; }
.u-alt-marka .u-logo-ad i { color: var(--mor); }
.u-alt-marka p { margin-top: 10px; font-size: 14.5px; color: var(--gri); max-width: 40ch; }
.u-alt-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.u-alt-bas { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--murekkep-2); margin-bottom: 4px; }
.u-alt-nav a { display: flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; color: var(--murekkep-2); }
.u-alt-nav a:hover { color: var(--murekkep); text-decoration: underline; text-underline-offset: 3px; }
.u-alt-telif { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--gri); }
.u-alt-telif a { display: inline-block; padding: 12px 2px; margin: -12px 0; color: var(--murekkep); font-weight: 700; }

@media (min-width: 720px) {
  .u-paket-bas { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .u-donem { width: auto; min-width: 380px; }
  .u-odeme-guven { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .u-kapanis-eylem { flex-direction: row; }
  .u-kapanis-eylem .u-btn { width: auto; }
  .u-alt-ic { grid-template-columns: 1.2fr 1fr 1fr; }
  .u-alt-bilgi { padding-bottom: 40px; }
}
@media (min-width: 960px) {
  .u-paketler { padding: 96px 0 64px; }
  .u-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .u-kart-one { order: 0; transform: translateY(-14px); padding-top: 28px; padding-bottom: 26px; }
  .u-sss { padding: 32px 0 96px; }
  .u-sss-ic { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; }
  .u-sss-liste { margin-top: 0; }
  .u-kapanis { padding: 96px 0; }
  .u-kapanis .u-h1 { font-size: clamp(3.4rem, 6.2vw, 5.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition: none !important; }
  .u-cip-canli i { animation: none !important; }
}

/* 29.09 kurucu 25896 (iyzico başvurusu): alt bilgide İletişim bloğu (satıcı kimliği) + iyzico ödeme bandı */
.u-alt-sirket { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.u-alt-sirket .u-alt-bas { margin-bottom: 8px; }
.u-alt-sirket .u-alt-bas a { color: inherit; text-decoration: none; }
.u-alt-sirket .u-alt-bas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.u-alt-adres { font-style: normal; display: grid; gap: 3px; font-size: 14px; line-height: 1.55; color: var(--murekkep-2); overflow-wrap: anywhere; }
.u-alt-adres b { color: var(--murekkep); font-weight: 700; }
.u-alt-adres a { color: var(--murekkep); }
.u-alt-adres i { font-style: normal; white-space: nowrap; }   /* kısa alanlar (numara, e-posta) satır ortasında bölünmesin; adres serbest akar */
.u-alt-iyzico { display: block; width: 429px; max-width: 100%; height: auto; margin-top: 18px; }