/* KuraKontrol arayüzü, tasarım v1. Renk ve yazı tipleri yalnız brand/tokens.css'ten gelir; burada sabit renk yazılmaz.
   Anlam sistemi: kâğıt, mavi tükenmez (kullanıcı), kırmızı kalem (biz), fosforlu (dikkat), onay yeşili (geçti).
   Hareket: yalnız transform ve opacity, 150-450 ms; prefers-reduced-motion'da kapalı, içerik son hâliyle durur.
   Hiçbir içerik görünmek için kaydırmayı beklemez: başlangıçta opacity: 0 ile gizlenen içerik yok. */

:root {
  --hiz-kisa: 160ms;
  --hiz: 280ms;
  --hiz-uzun: 450ms;
  --egri: cubic-bezier(.2, .7, .2, 1);
  --ust-yukseklik: 56px;
  --gutter: 16px;
  --t-hero: clamp(2.7rem, 11.5vw, 5.1rem);
  --t-h2: clamp(1.85rem, 6.6vw, 3rem);
  --t-h3: 1.2rem;
  --bolum: 64px;
}
@media (min-width: 640px) { :root { --gutter: 24px; --bolum: 88px; } }
@media (min-width: 960px) { :root { --ust-yukseklik: 64px; --gutter: 32px; --bolum: 112px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-yukseklik) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, canvas, svg { max-width: 100%; }
img, canvas { height: auto; }

a { color: var(--tukenmez); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tukenmez-koyu); text-decoration-color: var(--kalem); }

:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; border-radius: var(--yaricap); }

h1, h2, h3 { font-family: var(--font-baslik); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 8vw, 3.2rem); line-height: 1.02; }
h2 { font-weight: 800; font-size: var(--t-h2); line-height: 1.02; }
h3 { font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.005em; }
p { margin: 0; }
p, li { max-width: 62ch; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

.kap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.kap-dar { max-width: 760px; }
.ekran-okuyucu { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gizli { display: none !important; }
.soluk { color: var(--soluk); }
.kucuk { font-size: .9rem; color: var(--soluk); }
.mikro { font-size: .76rem; color: var(--soluk); letter-spacing: .01em; }
.form-yazi { font-family: var(--font-form); }

.atla { position: absolute; left: -9999px; top: 0; background: var(--yuzey); color: var(--murekkep); padding: .6rem 1rem; z-index: 60; }
.atla:focus { left: .5rem; top: .5rem; }

.ikon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; line-height: 1.15; text-align: center;
  padding: .8rem 1.3rem; min-height: 52px;
  border-radius: var(--yaricap); border: 1px solid var(--tukenmez);
  background: var(--tukenmez); color: var(--btn-metin);
  text-decoration: none; cursor: pointer;
  transition: transform var(--hiz-kisa) var(--egri);
}
.dugme:hover { background: var(--tukenmez-koyu); border-color: var(--tukenmez-koyu); color: var(--btn-metin); text-decoration: underline wavy var(--kalem); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.dugme:active { transform: scale(.98); }
.dugme[disabled], .dugme[aria-disabled="true"] { background: var(--kagit); border-color: var(--cizgi); color: var(--soluk); cursor: not-allowed; text-decoration: none; transform: none; }
.dugme-ikincil { background: transparent; color: var(--tukenmez); }
.dugme-ikincil:hover { background: var(--tukenmez-acik); color: var(--tukenmez-koyu); }
.dugme-sade { background: transparent; border-color: transparent; color: var(--tukenmez); padding-inline: .4rem; }
.dugme-sade:hover { background: transparent; border-color: transparent; color: var(--tukenmez-koyu); }
.dugme-kucuk { min-height: 44px; padding: .5rem .9rem; font-size: .95rem; }
.dugme-genis { width: 100%; }
.dugme .ikon { width: 1.15em; height: 1.15em; }
.dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Üst bant ---------- */
.ust {
  position: sticky; top: 0; z-index: 30;
  background: var(--kagit);
  background: color-mix(in srgb, var(--kagit) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
/* Dokunmatik ekranda bulanıklık yok: yapışkan başlığın arkasını her kaydırma karesinde bulanıklaştırmak
   telefonlarda (özellikle Safari ve uygulama içi tarayıcılarda) pahalı. Düz kâğıt zemin aynı görünür. */
@media (hover: none) {
  .ust { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kagit); }
}
.ust::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cizgi); opacity: 0; transition: opacity var(--hiz) ease; }
.ust.kaydi::after { opacity: 1; }
.ust-ic { display: flex; align-items: center; gap: .5rem; height: var(--ust-yukseklik); }
.logo { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-baslik); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; color: var(--murekkep); text-decoration: none; min-height: 44px; flex: none; }
.logo:hover { color: var(--murekkep); }
.logo .isaret { width: 30px; height: 28px; flex: none; }
.ust-menu { display: none; margin-left: 1.75rem; }
.ust-menu ul { list-style: none; display: flex; gap: .25rem; }
.ust-bag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--soluk); text-decoration: none; font-size: .96rem; }
.ust-bag:hover { color: var(--murekkep); text-decoration: underline wavy var(--kalem); text-underline-offset: 6px; }
.ust-bag[aria-current="page"] { color: var(--murekkep); font-weight: 700; text-decoration: underline; text-decoration-color: var(--kalem); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dugme-ust { margin-left: auto; min-height: 40px; padding: .45rem .85rem; font-size: .95rem; white-space: nowrap; }
.genis-yazi { display: none; }
.menu-dugme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; background: none; border: 0; border-radius: var(--yaricap); color: var(--murekkep); cursor: pointer; }
.menu-dugme .ikon { width: 26px; height: 26px; }
@media (min-width: 560px) { .genis-yazi { display: inline; } .dar-yazi { display: none; } }
@media (min-width: 960px) {
  .ust-menu { display: block; }
  .menu-dugme { display: none; }
  .logo { font-size: 1.25rem; }
}

/* Sade başlık (ücretli ekranlar) */
.ust-sade .ust-sayfa { flex: 1; min-width: 0; max-width: none; text-align: center; font-family: var(--font-form); font-size: .92rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-cikis { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; font-size: .95rem; color: var(--soluk); }
@media (max-width: 420px) { .ust-sade .logo-yazi { display: none; } }

/* Kayıt şeridi: başlığın hemen altında, ince */
.kayit-serit { min-height: 32px; font-size: .84rem; color: var(--soluk); border-bottom: 1px solid var(--kagit-cizgi); }
.kayit-serit .kap { display: flex; align-items: center; gap: .5rem; min-height: 32px; }
.kayit-serit .dogrulanmadi-etiket { margin-left: auto; }
.serit-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--tukenmez); flex: none; }
.serit-acik { background: var(--onay); }
.serit-son { background: var(--kalem); }
.serit-kapandi, .serit-belirsiz { background: var(--soluk); }
.serit-ek { color: var(--soluk); }
@media (max-width: 380px) { .serit-ek { display: none; } }

/* Alttan açılan menü */
.menu-sayfa {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88dvh;
  padding: 0; border: 0; border-top: 1px solid var(--cizgi); border-radius: var(--yaricap) var(--yaricap) 0 0;
  background: var(--yuzey); color: var(--murekkep);
  transform: translateY(100%); transition: transform var(--hiz) var(--egri);
}
.menu-sayfa.acik { transform: none; }
.menu-sayfa::backdrop { background: color-mix(in srgb, var(--murekkep) 38%, transparent); opacity: 0; transition: opacity var(--hiz) ease; }
.menu-sayfa.acik::backdrop { opacity: 1; }
.menu-ic { padding: .5rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); display: grid; gap: 1rem; }
.menu-tutamak { width: 40px; height: 4px; border-radius: 2px; background: var(--cizgi); margin: 0 auto; }
.menu-ust { display: flex; align-items: center; justify-content: space-between; }
.menu-baslik { font-family: var(--font-form); font-size: .9rem; color: var(--soluk); }
.menu-kapat { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; margin-right: -10px; }
.menu-liste { list-style: none; border-top: 1px solid var(--cizgi); }
.menu-bag { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--cizgi); font-family: var(--font-baslik); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; color: var(--murekkep); text-decoration: none; }
.menu-bag[aria-current="page"] { color: var(--tukenmez); }
.menu-alt { font-size: .95rem; color: var(--soluk); }

main { display: block; }
main:focus { outline: none; }

/* ---------- Ortak parçalar ---------- */
.kutu { border-radius: var(--yaricap); padding: 1rem 1.1rem; border: 1px solid var(--cizgi); background: var(--yuzey); }
.kutu > * + * { margin-top: .6rem; }
.kutu-bilgi { background: var(--tukenmez-acik); border-color: var(--tukenmez); }
.kutu-uyari { background: var(--fosforlu-zemin); border-color: var(--fosforlu); }
.kutu-hata { background: var(--kalem-zemin); border-color: var(--kalem); }
.kutu-gecti { background: var(--onay-zemin); border-color: var(--onay); }

.cip { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .2rem .65rem; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey); font-size: .88rem; line-height: 1.2; color: var(--murekkep); white-space: nowrap; }
.cip .ikon { width: 1rem; height: 1rem; }
.cip-kalem { border-color: var(--kalem); color: var(--kalem-metin); background: var(--yuzey); }
.cip-onay { border-color: var(--onay); color: var(--onay); background: var(--yuzey); }
.cip-dikkat { border-color: var(--fosforlu); background: var(--fosforlu); color: var(--fosforlu-metin); }
.cipler { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }

.dogrulanmadi-etiket { display: inline-block; font-family: var(--font-govde); font-size: .72rem; font-weight: 400; line-height: 1.5; color: var(--soluk); border: 1px dashed var(--soluk); border-radius: var(--yaricap); padding: 0 .35rem; vertical-align: middle; white-space: nowrap; text-decoration: none; letter-spacing: 0; }

/* Durum rozetleri: ikon + sözcük, yalnız renge güvenme */
.rozet { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .2rem .45rem; border-radius: var(--yaricap); align-self: start; border: 1px solid; white-space: nowrap; }
.rozet svg { width: .95rem; height: .95rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rozet-gecti { background: var(--yuzey); color: var(--onay); border-color: var(--onay); }
.rozet-kaldi { background: var(--kalem-zemin); color: var(--kalem-metin); border-color: var(--kalem); }
.rozet-uyari { background: var(--fosforlu-zemin); color: var(--murekkep); border-color: var(--fosforlu); }
.rozet-bilgi { background: var(--kagit); color: var(--soluk); border-color: var(--cizgi); }

/* Durum listesi (uygunluk ayrıntısı, sihirbaz adım kontrolü) */
.durumlar { list-style: none; }
.durumlar li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .2rem .75rem; padding: .8rem 0; border-bottom: 1px solid var(--cizgi); max-width: none; }
.durumlar li:last-child { border-bottom: 0; }
.durum-govde strong { display: block; }
.durum-govde p { margin-top: .2rem; font-size: .95rem; color: var(--soluk); }
.durum-govde .duzeltme { color: var(--murekkep); }
.durum-govde .kaynak { font-size: .8rem; }
.durum-kaldi .durum-govde strong { text-decoration: underline; text-decoration-color: var(--kalem); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Akordeon */
details.akordeon { border-bottom: 1px solid var(--cizgi); }
[tabindex="-1"]:focus { outline: none; }
details.akordeon > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .75rem 0; cursor: pointer; font-weight: 700; font-size: 1.05rem; }
details.akordeon > summary::-webkit-details-marker { display: none; }
details.akordeon > summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--tukenmez); border-bottom: 2px solid var(--tukenmez); transform: translateY(-3px) rotate(45deg); transition: transform var(--hiz) var(--egri); }
details.akordeon[open] > summary::after { transform: translateY(3px) rotate(225deg); }
details.akordeon > .akordeon-ic { padding: 0 0 1.1rem; color: var(--soluk); display: grid; gap: .6rem; }
details.akordeon > .akordeon-ic strong { color: var(--murekkep); }
.akordeonlar { border-top: 1px solid var(--cizgi); }

/* Kırmızı kalem imzaları. Çizim, maskeyi soldan sağa kaydırarak açılır (yalnız transform). */
.kalem-ac { display: block; overflow: hidden; }
.kalem-ac > span { display: block; width: 100%; height: 100%; }
.cizildi .kalem-ac > span, .kalem-ac.hemen > span { animation: kalem-maske var(--hiz-uzun) var(--egri) both; }
.cizildi .kalem-ac > span > svg, .kalem-ac.hemen > span > svg { animation: kalem-ters var(--hiz-uzun) var(--egri) both; }
@keyframes kalem-maske { from { transform: translateX(-101%); } to { transform: none; } }
@keyframes kalem-ters { from { transform: translateX(101%); } to { transform: none; } }
.kalem-cember { position: relative; display: inline-block; white-space: nowrap; }
.kalem-cember .kalem-ac { position: absolute; left: -9%; top: -14%; width: 118%; height: 136%; pointer-events: none; }
.kalem-cember svg { width: 100%; height: 100%; overflow: visible; display: block; }
.kalem-cember path { fill: none; stroke: var(--kalem); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kalem-notu { font-family: var(--font-not); font-weight: 600; color: var(--kalem-metin); font-size: 1.4rem; line-height: 1.05; display: inline-block; transform: rotate(-2deg); }

/* ---------- Sayfa başlıkları (iç sayfalar) ---------- */
.sayfa-ust { padding: 1.75rem 0 1.25rem; display: grid; gap: .5rem; }
.sayfa-ust .alt-baslik { color: var(--soluk); font-size: 1.05rem; }
@media (min-width: 960px) { .sayfa-ust { padding: 3rem 0 2rem; } }

/* ---------- Alt bant ---------- */
.alt { border-top: 1px solid var(--cizgi); background: var(--yuzey); padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom)); font-size: .92rem; color: var(--soluk); }
.alt .kap > * + * { margin-top: .75rem; }
.alt-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
.alt nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.alt nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soluk); }
.alt nav a:hover { color: var(--murekkep); }
.alt .feragat { color: var(--murekkep); font-weight: 700; }
.alt-kucuk { font-size: .8rem; }
.sosyal { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.sosyal a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--murekkep); font-weight: 700; text-decoration: none; }
.sosyal a:hover span { text-decoration: underline; }
.sosyal .ikon { width: 1.3em; height: 1.3em; }
.bag { background: none; border: 0; padding: .4rem 0; min-height: 44px; color: var(--tukenmez); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* ---------- Hareket kapalı: içerik son hâliyle ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

@media print {
  .ust, .kayit-serit, .alt nav, .dugmeler, .dugme, .alt-cubuk, .menu-sayfa { display: none !important; }
}

/* =====================================================================
   ANA SAYFA: hikâye anlatan kaydırma
   ===================================================================== */
.kalem-metin { color: var(--kalem-metin); }

.bolum { padding: var(--bolum) 0; }
.bolum-yuzey { background: var(--yuzey); border-block: 1px solid var(--cizgi); }
.bolum-bas { display: grid; gap: .55rem; margin-bottom: 1.75rem; max-width: 40rem; }
.bolum-no { font-family: var(--font-form); font-size: .85rem; color: var(--kalem-metin); display: flex; align-items: center; gap: .6rem; }
.bolum-no::after { content: ""; height: 1px; width: 2.5rem; background: var(--kalem); }
.bolum-alt { color: var(--soluk); font-size: 1.05rem; }
@media (min-width: 960px) { .bolum-bas { margin-bottom: 2.75rem; } }

/* 1. Hero */
.kahraman { padding: 1.75rem 0 var(--bolum); border-bottom: 1px solid var(--cizgi); }
.kahraman-ic { display: grid; gap: 2.25rem; }
.kahraman-metin { display: grid; gap: 1.1rem; align-content: start; }
.hero-baslik { font-size: var(--t-hero); line-height: .98; letter-spacing: -.015em; }
.hero-baslik .satir { display: block; }
.hero-baslik .kalem-cember { padding: 0 .04em; }
.hero-alt { font-size: 1.12rem; color: var(--soluk); max-width: 30rem; }
.hero-dugmeler .dugme { flex: 1 1 auto; }
.hero-guven { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--soluk); }
.hero-guven .ikon { color: var(--tukenmez); }
.kalem-cember .kalem-ac.hemen > span, .kalem-cember .kalem-ac.hemen > span > svg { animation-delay: .35s; animation-duration: .6s; }
@media (min-width: 560px) { .hero-dugmeler .dugme { flex: 0 0 auto; } }
@media (min-width: 960px) {
  .kahraman { padding-top: 4rem; }
  .kahraman-ic { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 3rem; }
  .hero-alt { font-size: 1.25rem; }
}

/* Canlı demo: başvuru formunun küçük taklidi */
.demo { margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 1rem 1rem .9rem; display: grid; gap: 0; max-width: 30rem; width: 100%; justify-self: center; }
.demo-ust { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .7rem; border-bottom: 1px solid var(--murekkep); }
.demo-baslik { font-family: var(--font-form); font-weight: 700; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; }
.demo-satir { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .75rem; min-height: 64px; padding: .55rem 0; border-bottom: 1px solid var(--cizgi); }
.demo-foto { grid-template-columns: 64px minmax(0, 1fr) auto; }
.demo-alan { display: grid; gap: .1rem; min-width: 0; }
.demo-etiket { font-size: .78rem; color: var(--soluk); }
.demo-deger { font-family: var(--font-form); font-size: 1.12rem; color: var(--tukenmez); display: inline-flex; gap: .55rem; align-items: baseline; }
.demo-kalem { color: var(--kalem-metin); }
.demo-takas { display: inline-grid; justify-items: start; }
.demo-takas > * { grid-area: 1 / 1; }
.demo-eski { position: relative; display: inline-block; }
.demo-resim { position: relative; width: 64px; height: 64px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kagit); }
.demo-resim > svg, .mini-foto > svg, .me-foto > svg { width: 100%; height: 100%; fill: none; stroke: var(--soluk); stroke-width: 2.4; stroke-linecap: round; }
.demo-cember { position: absolute; inset: -10px; }
.demo-cember svg { width: 100%; height: 100%; overflow: visible; display: block; }
.demo-cember path { fill: none; stroke: var(--kalem); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kalem-cizik, .kalem-alti { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--kalem); border-radius: 2px; transform-origin: left center; }
.kalem-cizik { top: 52%; transform: rotate(-4deg); }
.kalem-alti { bottom: -3px; height: 2.5px; }
.demo-tik { width: 28px; height: 28px; display: grid; place-items: center; color: var(--onay); }
.demo-tik svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-cocuk { grid-template-columns: auto minmax(0, 1fr) auto; }
.demo-not { font-size: 1.15rem; justify-self: start; line-height: 1; transform-origin: left center; }
.demo-ek .demo-deger { font-size: 1rem; }
.demo-alt { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .75rem; font-size: .9rem; color: var(--soluk); }
.demo-sayac-kap { font-family: var(--font-form); white-space: nowrap; }
.demo-sayac { font-family: var(--font-form); font-weight: 700; color: var(--kalem-metin); }

/* Demo adımları. Varsayılan (sınıfsız) hâl: hatalar görünür, işaretler çizilmemiş.
   a1 foto çemberi, a2 foto düzeltildi, a3 isim çizildi, a4 isim düzeltildi, a5 çocuk notu, a6 çocuk eklendi. */
.demo .kalem-ac > span { transform: translateX(-101%); transition: transform var(--hiz-uzun) var(--egri); }
.demo .kalem-ac > span > svg { transform: translateX(101%); transition: transform var(--hiz-uzun) var(--egri); }
.demo .kalem-cizik, .demo .kalem-alti { transform: scaleX(0); transition: transform var(--hiz) var(--egri); }
.demo .kalem-cizik { transform: rotate(-4deg) scaleX(0); }
.demo .demo-yeni, .demo .demo-tik, .demo .demo-not, .demo .demo-ek .demo-alan { opacity: 0; transform: translateY(6px); transition: opacity var(--hiz) ease, transform var(--hiz) var(--egri); }
.demo .demo-takas .demo-eski { transition: opacity var(--hiz) ease, transform var(--hiz) var(--egri); }
.demo .demo-not { transform: rotate(-3deg) translateY(6px); }

.demo.a1 .demo-cember > span, .demo.a1 .demo-cember > span > svg { transform: none; }
.demo.a2 .demo-foto .kalem-cizik { transform: rotate(-4deg) scaleX(1); }
.demo.a2 .demo-foto .demo-yeni, .demo.a2 .t1 { opacity: 1; transform: none; }
.demo.a3 .demo-satir:nth-of-type(3) .kalem-alti { transform: scaleX(1); }
.demo.a4 .demo-satir:nth-of-type(3) .demo-eski { opacity: 0; transform: translateY(-6px); }
.demo.a4 .demo-satir:nth-of-type(3) .demo-yeni, .demo.a4 .t2 { opacity: 1; transform: none; }
.demo.a5 .demo-cocuk .kalem-alti { transform: scaleX(1); }
.demo.a5 .demo-not { opacity: 1; transform: rotate(-3deg); }
.demo.a6 .demo-cocuk .demo-eski { opacity: 0; transform: translateY(-6px); }
.demo.a6 .demo-cocuk .demo-yeni, .demo.a6 .t3, .demo.a6 .demo-ek .demo-alan { opacity: 1; transform: none; }
.demo.siliniyor .kalem-ac, .demo.siliniyor .kalem-cizik, .demo.siliniyor .kalem-alti, .demo.siliniyor .demo-yeni, .demo.siliniyor .demo-tik, .demo.siliniyor .demo-not, .demo.siliniyor .demo-ek .demo-alan { opacity: 0; transition: opacity var(--hiz) ease; }
.demo.aninda, .demo.aninda * { transition: none !important; }
.demo .kalem-ac { transition: opacity var(--hiz) ease; }

/* 2. Rakamlar */
.rakam-serit { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.rakam-serit::-webkit-scrollbar { display: none; }
.rakam-kart { flex: 0 0 min(76%, 300px); scroll-snap-align: start; display: grid; gap: .45rem; align-content: start; padding: 1.1rem 0 0; border-top: 2px solid var(--murekkep); max-width: none; }
.rakam { font-family: var(--font-baslik); font-weight: 800; font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rakam-satir { font-size: 1.02rem; }
/* Sayı yerine sözcük ("Milyonlarca"): biraz küçük yazılır ki dar sütuna sığsın; kutu yüksekliği sayılarla aynı kalır. */
.rakam-metin { font-size: clamp(2.3rem, 10vw, 3.3rem); min-height: clamp(2.6rem, 11vw, 4rem); display: flex; align-items: flex-end; }
@media (min-width: 760px) {
  .rakam-serit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; overflow: visible; margin: 0; padding: 0; }
}

/* 3. Elenmenin 4 yolu: çevrilen kartlar */
.yollar { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.yollar::-webkit-scrollbar { display: none; }
.yollar > li { flex: 0 0 min(78%, 290px); scroll-snap-align: start; max-width: none; }
@media (min-width: 900px) { .yollar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 0; } }
.yol-kart { display: block; width: 100%; height: 300px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--yaricap); }
.yol-ic { position: relative; display: block; width: 100%; height: 100%; }
/* Kart çevirme yerine çapraz geçiş: 3B dönüş (preserve-3d + backface-visibility) kaydırmalı şeritte Chrome ve Safari'de kartı boş çizebiliyor. */
.yol-yuz { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kagit); transition: opacity var(--hiz) ease, visibility 0s linear 0s; }
.yol-arka { background: var(--yuzey); border-color: var(--onay); justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--hiz) ease, visibility 0s linear var(--hiz); }
.yol-kart[aria-pressed="true"] .yol-on { opacity: 0; visibility: hidden; transition: opacity var(--hiz) ease, visibility 0s linear var(--hiz); }
.yol-kart[aria-pressed="true"] .yol-arka { opacity: 1; visibility: visible; transition: opacity var(--hiz) ease, visibility 0s; }
.yol-ust { display: flex; align-items: baseline; gap: .6rem; }
.yol-no { font-family: var(--font-form); color: var(--kalem-metin); font-size: .9rem; }
.yol-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 1.55rem; letter-spacing: -.01em; }
.yol-gorsel { flex: 1; display: flex; align-items: center; gap: .9rem; }
.yol-hata { font-size: 1rem; }
.yol-cevir { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .92rem; color: var(--tukenmez); }
.yol-arka .yol-cevir { margin-top: auto; }
.yol-tik { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--onay); color: var(--onay); }
.yol-tik .ikon { width: 26px; height: 26px; stroke-width: 2.4; }
.yol-cozum { font-family: var(--font-baslik); font-weight: 700; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.005em; }
.yol-kart:hover .yol-on { border-color: var(--tukenmez); }
.mini-foto { position: relative; width: 72px; height: 72px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); flex: none; }
.mini-cember { position: absolute; inset: -7px; border: 2px solid var(--kalem); border-radius: 48% 52% 46% 54%; transform: rotate(-6deg); }
.mini-deger { display: grid; gap: .1rem; font-family: var(--font-form); font-size: 1.25rem; }
.mini-form { display: grid; gap: .4rem; width: 100%; }
.mini-satir { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); font-size: .82rem; color: var(--soluk); }
.mini-satir .form-yazi { color: var(--tukenmez); font-size: 1rem; }
.mini-hata .form-yazi { text-decoration: underline; text-decoration-color: var(--kalem); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mini-yigin { position: relative; width: 100%; height: 92px; }
.mini-kagit { position: absolute; left: 0; width: 72%; height: 64px; padding: .5rem .65rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); font-family: var(--font-form); font-size: .85rem; color: var(--tukenmez); }
.mini-kagit:first-child { top: 0; }
.mini-kagit.mini-hata { top: 26px; left: 22%; border-color: var(--kalem); }
.mini-kagit.mini-hata::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: var(--kalem); transform: rotate(-12deg); }

/* 4. Nasıl çalışır: dolan zaman çizgisi */
.zaman-kap { position: relative; }
.zaman { list-style: none; display: grid; gap: 2.5rem; }
.zaman-cizgi { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--cizgi); }
.zaman-dolu { position: absolute; inset: 0; background: var(--kalem); transform-origin: top; transform: scaleY(0); }
.zaman-kap.tamam .zaman-dolu { transform: none; }
.zaman-adim { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem 1rem; max-width: none; }
.zaman-nokta { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--cizgi); background: var(--kagit); font-family: var(--font-form); font-weight: 700; color: var(--soluk); position: relative; z-index: 1; }
.zaman-nokta::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 2px solid var(--kalem); opacity: 0; transform: scale(.8); transition: opacity var(--hiz) ease, transform var(--hiz) var(--egri); }
.zaman-adim.gecildi .zaman-nokta { color: var(--kalem-metin); }
.zaman-adim.gecildi .zaman-nokta::after { opacity: 1; transform: none; }
.zaman-metin { display: grid; gap: .3rem; padding-top: .35rem; }
.zaman-metin p { color: var(--soluk); }
.mini-ekran { grid-column: 2; display: flex; gap: .8rem; align-items: center; padding: .8rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); max-width: 22rem; }
.me-foto { width: 56px; height: 56px; flex: none; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kagit); }
.me-sag { display: grid; gap: .45rem; flex: 1; }
.me-cizgi { height: 6px; border-radius: 3px; background: var(--kagit-cizgi); }
.me-cizgi.kisa { width: 60%; }
.mini-sihirbaz, .mini-kart { flex-direction: column; align-items: stretch; }
.me-ilerleme { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.me-ilerleme span { height: 4px; border-radius: 2px; background: var(--kagit-cizgi); }
.me-ilerleme .dolu { background: var(--tukenmez); }
.me-ilerleme .yarim { position: relative; overflow: hidden; }
.me-ilerleme .yarim::after { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--tukenmez); }
.me-sag .cip { justify-self: start; }
.me-alan { display: grid; gap: .25rem; }
.me-etiket { font-size: .78rem; color: var(--soluk); }
.me-girdi { font-family: var(--font-form); color: var(--tukenmez); border: 1px solid var(--soluk); border-radius: var(--yaricap); padding: .35rem .55rem; }
.me-latin { font-family: var(--font-form); font-size: .82rem; color: var(--soluk); }
.me-kopya { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .4rem .5rem; border-bottom: 1px solid var(--cizgi); font-size: .8rem; color: var(--soluk); }
.me-kopya .form-yazi { color: var(--tukenmez); font-size: .95rem; }
.me-kopya.kopyalandi .form-yazi { background: var(--fosforlu); color: var(--fosforlu-metin); padding: 0 .2rem; justify-self: start; }
.me-kopya .ikon { color: var(--onay); stroke-width: 2.4; }
.me-dugme { font-size: .75rem; color: var(--tukenmez); border: 1px solid var(--tukenmez); border-radius: var(--yaricap); padding: .1rem .4rem; }
@media (min-width: 760px) {
  .zaman-adim { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 22rem); align-items: center; }
  .mini-ekran { grid-column: 3; }
  .zaman { gap: 3.5rem; }
}

/* 5. Ücretsiz deneme: bırakma alanı */
.birak { position: relative; display: grid; justify-items: center; text-align: center; gap: .55rem; padding: 2rem 1.25rem; border: 1.5px dashed var(--soluk); border-radius: var(--yaricap); background: var(--kagit); cursor: pointer; transition: transform var(--hiz-kisa) var(--egri); }
.birak:hover, .birak.uzerinde { border-color: var(--tukenmez); }
.birak.uzerinde { transform: scale(1.01); }
.birak:focus-within { outline: 3px solid var(--odak); outline-offset: 2px; }
.birak-ikon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); }
.birak-ikon .ikon { width: 26px; height: 26px; }
.birak-baslik { font-family: var(--font-baslik); font-weight: 700; font-size: 1.3rem; letter-spacing: -.005em; line-height: 1.2; max-width: 22rem; }
.birak-alt { color: var(--soluk); font-size: .95rem; }
.birak-dugme { margin-top: .4rem; pointer-events: none; }
@media (min-width: 960px) { .birak { padding: 3.25rem 2rem; } }

/* 6. Güven */
.guven-ic { display: grid; gap: 2.5rem; }
.sozler { list-style: none; display: grid; gap: .1rem; margin-bottom: 1.25rem; border-top: 1px solid var(--cizgi); }
.sozler li { display: flex; align-items: center; gap: .9rem; min-height: 64px; border-bottom: 1px solid var(--cizgi); font-family: var(--font-baslik); font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; max-width: none; }
.soz-ikon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--tukenmez); color: var(--tukenmez); flex: none; }
.soz-ikon .ikon { width: 22px; height: 22px; }
.yapmayiz { border-bottom: 0; }
.kurucu-not { align-self: start; justify-self: start; display: grid; gap: .5rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--kalem); border-radius: var(--yaricap); transform: rotate(-1deg); max-width: 24rem; }
.kurucu-not .kalem-notu { font-size: 1.85rem; transform: none; }
.kurucu-alt { color: var(--soluk); font-size: .95rem; }
.kurucu-not a { font-weight: 700; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .guven-ic { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 4rem; }
  .sozler { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; border-top: 0; }
  .sozler li { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem 0; border-bottom: 0; border-top: 2px solid var(--murekkep); }
}

/* 7. Paketler */
.paket-izgara { display: grid; gap: 1rem; }
@media (min-width: 720px) { .paket-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; gap: 1.25rem; } }
.paket-kart { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.paket-kart.onerilen { border: 2px solid var(--tukenmez); padding: calc(1.4rem - 1px); background: var(--yuzey); }
.paket-kart .dugme { margin-top: auto; }
.paket-ust { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.fiyat { display: flex; align-items: baseline; gap: .3rem; font-family: var(--font-baslik); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.fiyat-sayi { font-size: 3.2rem; }
.fiyat-tl { font-size: 1.1rem; letter-spacing: 0; color: var(--soluk); }
.fiyat s { font-size: 1.3rem; color: var(--soluk); text-decoration-color: var(--kalem); text-decoration-thickness: 2px; margin-right: .35rem; letter-spacing: -.02em; }
.tikli { list-style: none; display: grid; gap: .45rem; }
.tikli li { position: relative; padding-left: 1.6rem; }
.tikli li::before { content: ""; position: absolute; left: .15rem; top: .32em; width: .7rem; height: .38rem; border-left: 2px solid var(--onay); border-bottom: 2px solid var(--onay); transform: rotate(-45deg); }
details.hepsi > summary { cursor: pointer; color: var(--tukenmez); font-weight: 700; font-size: .95rem; min-height: 44px; display: flex; align-items: center; list-style: none; }
details.hepsi > summary::-webkit-details-marker { display: none; }
details.hepsi[open] > summary { display: none; }

/* 8. SSS */
@media (min-width: 900px) { .sss-ic { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; } }

/* 9. Son çağrı: dolu tükenmez zemin, yazı eşleşen jetonla */
.son-cagri { background: var(--tukenmez); color: var(--btn-metin); padding: var(--bolum) 0; }
.son-cagri .kap { display: grid; gap: 1.5rem; justify-items: start; }
.son-cagri h2 { font-size: var(--t-h2); max-width: 14ch; }
.dugme-ters { background: var(--btn-metin); color: var(--tukenmez); border-color: var(--btn-metin); }
.dugme-ters:hover { background: var(--btn-metin); color: var(--tukenmez-koyu); border-color: var(--btn-metin); }

/* =====================================================================
   FOTOĞRAF KONTROLÜ: tek analiz, tek karar
   ===================================================================== */
.fk { container-type: inline-size; display: grid; gap: 1.25rem; }
.fk-birak { padding-block: 2.5rem; }
.fk-sonuclu .fk-birak { padding-block: 1rem; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: .1rem .9rem; order: 3; }
.fk-sonuclu .fk-birak .birak-ikon { grid-row: span 2; width: 44px; height: 44px; }
.fk-sonuclu .fk-birak .birak-baslik { font-size: 1.05rem; }
.fk-sonuclu .fk-birak .birak-alt { font-size: .88rem; }
.fk-sonuclu .fk-birak .birak-dugme { display: none; }
.fk-sonuclu .fk-sonuc { order: 1; }
.fk-sonuclu .fk-durum { order: 2; }
.fk-kompakt .fk-birak { padding-block: 1.25rem; }

/* Tarama */
.fk-tarama { display: grid; gap: .75rem; justify-items: center; }
.fk-tarama-sahne { position: relative; width: min(100%, 420px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kagit); }
.fk-tarama-sahne img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fk-tarama-cizgi { position: absolute; inset: 0; animation: tara 1.5s ease-in-out infinite alternate; pointer-events: none; }
.fk-tarama-cizgi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--kalem); }
@keyframes tara { from { transform: translateY(0); } to { transform: translateY(calc(100% - 2px)); } }
.fk-noktalar span { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--kalem); background: var(--yuzey); animation: nokta-gel var(--hiz) var(--egri) both; animation-delay: calc(var(--sira) * 90ms); }
@keyframes nokta-gel { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.fk-tarama-metin { color: var(--soluk); font-size: .95rem; text-align: center; }

/* Sonuç yerleşimi: mobilde karar, görsel, kurallar; genişte görsel solda */
.fk-izgara { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "karar" "gorsel" "kurallar"; }
.fk-karar-yer { grid-area: karar; }
.fk-gorsel { grid-area: gorsel; display: grid; gap: .6rem; align-content: start; }
.fk-kurallar { grid-area: kurallar; }
@container (min-width: 820px) {
  .fk:not(.fk-kompakt) .fk-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gorsel karar" "gorsel kurallar"; gap: 1.5rem 2.5rem; align-items: start; }
  .fk:not(.fk-kompakt) .fk-gorsel { position: sticky; top: calc(var(--ust-yukseklik) + 16px); }
}
.fk-kompakt .fk-gorsel { max-width: 320px; }

/* Karar kartı */
.fk-karar { display: grid; gap: .75rem; padding: 1.25rem; border-radius: var(--yaricap); border: 2px solid var(--cizgi); background: var(--yuzey); }
.fk-karar:focus { outline: none; }
.fk-karar-etiket { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.fk-karar-etiket .ikon { width: 28px; height: 28px; padding: 4px; border-radius: 50%; stroke-width: 2.6; }
.fk-karar-baslik { font-size: clamp(1.75rem, 7vw, 2.4rem); line-height: 1.02; }
.fk-karar-kullanilabilir { background: var(--onay-zemin); border-color: var(--onay); }
.fk-karar-kullanilabilir .fk-karar-etiket .ikon { background: var(--onay); color: var(--onay-zemin); }
.fk-karar-kullanilamaz { background: var(--kalem-zemin); border-color: var(--kalem); }
.fk-karar-kullanilamaz .fk-karar-etiket { color: var(--kalem-metin); }
.fk-karar-kullanilamaz .fk-karar-etiket .ikon { background: var(--kalem); color: var(--kalem-zemin); }
.fk-karar-onay { background: var(--fosforlu-zemin); border-color: var(--fosforlu); }
.fk-karar-onay .fk-karar-etiket .ikon { background: var(--fosforlu); color: var(--fosforlu-metin); }
.fk-karar.fk-degisti { animation: karar-gel var(--hiz-uzun) var(--egri); }
@keyframes karar-gel { from { transform: scale(.97); } to { transform: none; } }
.fk-dosya { font-size: .85rem; color: var(--soluk); }
.fk-karar .cipler .cip:not(.cip-dikkat) { background: var(--yuzey); }

/* Anahtar (switch): büyük dokunma hedefi */
.fk-anahtarlar { display: grid; gap: .5rem; }
.anahtar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 56px; padding: .6rem .9rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); color: var(--murekkep); font-weight: 700; text-align: left; cursor: pointer; }
.anahtar[aria-checked="true"] { border-color: var(--tukenmez); }
.anahtar-yuva { position: relative; width: 48px; height: 28px; flex: none; border-radius: 14px; border: 1.5px solid var(--soluk); background: var(--kagit); }
.anahtar-top { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--soluk); transition: transform var(--hiz-kisa) var(--egri); }
.anahtar[aria-checked="true"] .anahtar-yuva { background: var(--tukenmez); border-color: var(--tukenmez); }
.anahtar[aria-checked="true"] .anahtar-top { background: var(--btn-metin); transform: translateX(19px); }
.anahtar-kucuk { min-height: 44px; width: auto; padding: .3rem .7rem; font-weight: 400; font-size: .92rem; }
.anahtar-kucuk .anahtar-yuva { width: 40px; height: 24px; }
.anahtar-kucuk .anahtar-top { width: 15px; height: 15px; }
.anahtar-kucuk[aria-checked="true"] .anahtar-top { transform: translateX(15px); }
.fk-karar-kullanilabilir .fk-anahtarlar .anahtar { min-height: 48px; font-weight: 400; }

/* Önce / sonra kaydırıcısı */
.fk-sahne { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kagit); touch-action: pan-y; }
.fk-sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fk-sonra-kap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--konum, 50%)); }
.fk-tutamak { position: absolute; top: 0; bottom: 0; left: var(--konum, 50%); width: 0; border-left: 2px solid var(--yuzey); pointer-events: none; }
.fk-tutamak > span { position: absolute; top: 50%; left: -1px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--yuzey); border: 1px solid var(--murekkep); color: var(--murekkep); }
.fk-tutamak .ikon { width: 15px; height: 15px; stroke-width: 2.2; }
.fk-etiket { position: absolute; top: .6rem; padding: .15rem .5rem; border-radius: var(--yaricap); background: var(--yuzey); color: var(--murekkep); font-size: .78rem; font-weight: 700; pointer-events: none; }
.fk-etiket-once { left: .6rem; }
.fk-etiket-sonra { right: .6rem; }
.fk-kaydirici { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.fk-sahne:has(.fk-kaydirici:focus-visible) { outline: 3px solid var(--odak); outline-offset: 2px; }
.fk-gorsel-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.lejant { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .84rem; color: var(--soluk); }
.lejant li::before { content: ""; display: inline-block; width: 1.2rem; height: 0; border-top: 3px solid var(--kalem); vertical-align: middle; margin-right: .4rem; }
.lejant .l-goz::before { border-top-style: dotted; }
.lejant .l-bant::before { border-top-width: 9px; border-color: var(--onay-zemin); outline: 1px solid var(--onay); }

/* Tek kural listesi */
.fk-liste { list-style: none; display: grid; }
.fk-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad rozet" "olcu olcu" "nasil nasil" "not not"; gap: .3rem .75rem; padding: .85rem 0; border-bottom: 1px solid var(--cizgi); max-width: none; }
.fk-ad { grid-area: ad; font-weight: 700; }
.fk-olcu { grid-area: olcu; font-size: .9rem; color: var(--soluk); display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: baseline; }
.fk-olcu .form-yazi { color: var(--tukenmez); font-size: 1rem; }
.fk-olcu s { text-decoration-color: var(--kalem); text-decoration-thickness: 2px; }
.fk-rozet { grid-area: rozet; align-self: start; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid; border-radius: var(--yaricap); font-size: .8rem; font-weight: 700; white-space: nowrap; background: var(--yuzey); }
.fk-rozet .ikon { width: .95rem; height: .95rem; stroke-width: 2.4; }
.fk-rozet-gecti { color: var(--onay); border-color: var(--onay); }
.fk-rozet-duzeltildi { color: var(--kalem-metin); border-color: var(--kalem); }
.fk-rozet-duzeltilemez { color: var(--kalem-metin); border-color: var(--kalem); background: var(--kalem-zemin); }
.fk-rozet-olculemedi { color: var(--soluk); border-color: var(--soluk); border-style: dashed; }
.fk-rozet-onay { color: var(--fosforlu-metin); border-color: var(--fosforlu); background: var(--fosforlu); }
.fk-yeni { font-family: var(--font-form); font-weight: 700; }
.fk-nasil { grid-area: nasil; font-size: .95rem; padding-left: .7rem; border-left: 2px solid var(--kalem); }
.fk-not { grid-area: not; font-size: .85rem; color: var(--soluk); }
.fk-duzeltilemez .fk-ad { text-decoration: underline; text-decoration-color: var(--kalem); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fk-gecenler > summary { display: flex; align-items: center; gap: .5rem; min-height: 52px; cursor: pointer; font-weight: 700; color: var(--onay); list-style: none; border-bottom: 1px solid var(--cizgi); }
.fk-gecenler > summary::-webkit-details-marker { display: none; }
.fk-gecenler > summary::after { content: "Göster"; margin-left: auto; font-weight: 400; font-size: .9rem; color: var(--tukenmez); }
.fk-gecenler[open] > summary::after { content: "Gizle"; }
.fk-gecenler > summary .ikon { stroke-width: 2.4; }

/* Nasıl çekmeliyim? rehberi */
.fk-rehber { display: grid; gap: .6rem; padding-top: .25rem; }
.fk-rehber h3 { font-size: 1.05rem; }
.rehber { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.rehber li { display: grid; gap: .45rem; align-content: start; padding: .75rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); font-size: .92rem; line-height: 1.3; max-width: none; }
.rehber-ikon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); }
.rehber-ikon .ikon { width: 24px; height: 24px; }
@container (min-width: 640px) { .rehber { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fk-sonraki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.fk-bilgi { margin: 2.5rem 0 var(--bolum); }
.kural-ozet { list-style: none; display: grid; gap: .75rem; }
.kural-ozet strong { color: var(--murekkep); }
.ana-foto .fk-sonuc:empty { display: none; }

/* =====================================================================
   UYGULAMA AKIŞI ORTAK: bölümlü ilerleme, geçişler, seçim kartları
   ===================================================================== */
.bolumlu { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.bolumlu > span { position: relative; height: 4px; border-radius: 2px; background: var(--kagit-cizgi); overflow: hidden; }
.bolumlu > span::after { content: ""; position: absolute; inset: 0; background: var(--tukenmez); transform: scaleX(0); transform-origin: left; transition: transform var(--hiz) var(--egri); }
.bolumlu > .dolu::after { transform: none; }
.bolumlu > .simdi::after { transform: scaleX(.35); }
.gecis-ileri { animation: gecis-ileri var(--hiz) var(--egri); }
.gecis-geri { animation: gecis-geri var(--hiz) var(--egri); }
@keyframes gecis-ileri { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes gecis-geri { from { transform: translateX(-28px); opacity: .4; } to { transform: none; opacity: 1; } }

.secimler { display: grid; gap: .55rem; }
@media (min-width: 640px) { .secimler-cok { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.secim { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 60px; padding: .75rem 1rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); color: var(--murekkep); text-align: left; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: transform var(--hiz-kisa) var(--egri); }
.secim:hover { border-color: var(--tukenmez); }
.secim:active { transform: scale(.985); }
.secim-yazi { display: grid; gap: .1rem; }
.secim-alt { font-weight: 400; font-size: .9rem; color: var(--soluk); }
.secim-isaret { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--cizgi); color: transparent; }
.secim-isaret .ikon { width: 16px; height: 16px; stroke-width: 2.6; }
.secim[aria-pressed="true"] { border-color: var(--tukenmez); background: var(--tukenmez-acik); box-shadow: inset 0 0 0 1px var(--tukenmez); }
.secim[aria-pressed="true"] .secim-isaret { background: var(--tukenmez); border-color: var(--tukenmez); color: var(--btn-metin); }

/* Uygunluk testi */
.quiz-sayfa { padding-top: 1rem; padding-bottom: var(--bolum); min-height: 70vh; }
.quiz { display: grid; gap: 1rem; }
.quiz-ust { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.quiz-geri { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .5rem 0 0; background: none; border: 0; color: var(--tukenmez); font-weight: 700; cursor: pointer; }
.quiz-geri[disabled] { color: var(--soluk); opacity: .5; cursor: default; }
.quiz-sayac { font-family: var(--font-form); font-size: .9rem; color: var(--soluk); }
.quiz-soru, .quiz-sonuc { display: grid; gap: 1rem; padding-top: 1rem; }
.quiz-soru h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.quiz-alt { color: var(--soluk); margin-top: -.4rem; }
.ulke-sec { display: grid; gap: .6rem; padding-top: .25rem; }
.ulke-sec label { font-weight: 700; }
select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea {
  font: inherit; width: 100%; max-width: 100%; min-height: 52px; padding: .65rem .8rem;
  border: 1px solid var(--soluk); border-radius: var(--yaricap); background: var(--yuzey); color: var(--tukenmez);
}
select { color: var(--murekkep); }
.sayici { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem 0; }
.sayici-dugme { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--tukenmez); background: var(--yuzey); color: var(--tukenmez); font-size: 2rem; line-height: 1; cursor: pointer; transition: transform var(--hiz-kisa) var(--egri); }
.sayici-dugme:active { transform: scale(.94); }
.sayici-deger { min-width: 3ch; text-align: center; font-family: var(--font-baslik); font-weight: 800; font-size: 4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-sonuc .fk-karar-baslik { font-size: clamp(1.8rem, 7.5vw, 2.5rem); }

/* Teklif */
.teklif-sayfa { padding-bottom: var(--bolum); }
.teklif-sayfa form { display: grid; gap: 1.25rem; }
.paket-sec { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { .paket-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paket-secim { display: grid; gap: .8rem; align-content: start; padding: 1.25rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); cursor: pointer; transition: transform var(--hiz-kisa) var(--egri); }
.paket-secim:hover { border-color: var(--tukenmez); }
.paket-secim:active { transform: scale(.99); }
.paket-secim:has(input:checked) { border-color: var(--tukenmez); box-shadow: inset 0 0 0 1px var(--tukenmez); }
.paket-secim:has(input:checked) .secim-isaret { background: var(--tukenmez); border-color: var(--tukenmez); color: var(--btn-metin); }
.paket-secim:has(input:focus-visible) { outline: 3px solid var(--odak); outline-offset: 2px; }
.paket-secim:not(:has(input:checked)) .tikli { color: var(--soluk); }
.paket-secim-ust { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.paket-ad { font-family: var(--font-baslik); font-weight: 700; font-size: 1.3rem; letter-spacing: -.005em; }
.satir { display: flex; gap: .5rem; }
.satir input { flex: 1; min-width: 0; font-family: var(--font-form); text-transform: uppercase; }
.odeme-alani { display: grid; gap: .75rem; padding-top: .5rem; }
.onay-yasal { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--soluk); border-radius: var(--yaricap); background: var(--yuzey); font-size: .95rem; cursor: pointer; }
.onay-yasal:has(input:checked) { border-color: var(--tukenmez); }
.onay-yasal input { width: 1.35rem; height: 1.35rem; margin-top: .1rem; flex: none; accent-color: var(--tukenmez); }
.dugme-ode { min-height: 58px; font-size: 1.1rem; }
.destek { color: var(--soluk); font-size: .95rem; }

/* =====================================================================
   SİHİRBAZ: uygulama akışı
   ===================================================================== */
.sihirbaz-sayfa { padding-top: .75rem; padding-bottom: 7rem; }
#sihirbaz { display: grid; gap: 1.25rem; }
.sh-ilerleme ol { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.sh-ilerleme li { max-width: none; }
.sh-ilerleme a { display: grid; gap: .35rem; padding: .25rem 0 .2rem; text-decoration: none; color: var(--soluk); min-height: 44px; align-content: center; }
.sh-cubuk { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--kagit-cizgi); overflow: hidden; }
.sh-cubuk::after { content: ""; position: absolute; inset: 0; background: var(--tukenmez); transform: scaleX(var(--oran, 0)); transform-origin: left; transition: transform var(--hiz) var(--egri); }
.sh-ad { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ilerleme .simdi a { color: var(--murekkep); font-weight: 700; }
.sh-ilerleme .dolu a { color: var(--murekkep); }
@media (min-width: 640px) { .sh-ad { font-size: .85rem; } }
.sh-adim { display: grid; gap: 1.1rem; }
.sh-baslik { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sh-baslik h2 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
.neden-dugme { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 .55rem; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey); color: var(--tukenmez); font-size: .88rem; font-weight: 700; cursor: pointer; flex: none; }
.neden-dugme span { display: none; }
.neden-dugme[aria-expanded="true"] { background: var(--fosforlu); border-color: var(--fosforlu); color: var(--fosforlu-metin); }
@media (min-width: 640px) { .neden-dugme span { display: inline; } }
.neden-not { display: grid; gap: .5rem; padding: .9rem 1rem; background: var(--fosforlu-zemin); border: 1px solid var(--fosforlu); border-radius: var(--yaricap); transform: rotate(-.6deg); font-size: .95rem; animation: not-gel var(--hiz) var(--egri); }
.neden-not[hidden] { display: none; }
@keyframes not-gel { from { transform: translateY(-6px) rotate(-.6deg); opacity: .5; } to { transform: rotate(-.6deg); opacity: 1; } }
.sh-alanlar { display: grid; gap: 1.1rem; }
.sh-alanlar h3 { margin-top: .5rem; }
.alan { display: grid; gap: .35rem; }
.alan > label { font-weight: 700; }
.alan .ipucu { font-size: .9rem; color: var(--soluk); }
.alan input { font-size: 1.1rem; }
.alan input[data-yol*="soyad"], .alan input[data-yol$=".ad"] { font-family: var(--font-form); }
.latin-canli { font-size: .9rem; color: var(--soluk); min-height: 1.4em; }
.latin-deger { font-family: var(--font-form); font-weight: 700; color: var(--tukenmez); letter-spacing: .02em; }
.latin-deger.farkli { background: var(--fosforlu); color: var(--fosforlu-metin); padding: 0 .25rem; }
.latin-bos { font-style: italic; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .45rem; }
fieldset > legend { font-weight: 700; padding: 0; margin-bottom: .45rem; }
.secenek { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .6rem .9rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); cursor: pointer; }
.secenek input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--tukenmez); margin: 0; }
.secenek:has(input:checked) { border-color: var(--tukenmez); background: var(--tukenmez-acik); box-shadow: inset 0 0 0 1px var(--tukenmez); }
.onay { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); cursor: pointer; }
.onay input { width: 1.3rem; height: 1.3rem; margin-top: .1rem; flex: none; accent-color: var(--tukenmez); }
.onay:has(input:checked) { border-color: var(--tukenmez); }
.kisi-kart { display: grid; gap: 1.1rem; padding: 1.1rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.kisi-kart .secenek, .kisi-kart .onay { background: var(--kagit); }
.isim-uyari .dugme { justify-self: start; }
.sh-kontrol:empty { display: none; }
.sh-kontrol { padding-top: .5rem; border-top: 1px solid var(--cizgi); }
.adim-kontrol-baslik { display: flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--kalem-metin); margin: .4rem 0 .25rem; }
.sh-alt-not { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; font-size: .88rem; color: var(--soluk); }
.alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--yuzey); border-top: 1px solid var(--cizgi); padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom)); }
.alt-cubuk .ic { max-width: 760px; margin: 0 auto; display: flex; gap: .6rem; }
.alt-cubuk .dugme { flex: 1; }
.alt-cubuk .dugme-ikincil { flex: 0 0 56px; padding: 0; }
.alt-cubuk .dugme-ikincil .ikon { width: 22px; height: 22px; }
.kilit-kart { display: grid; gap: .9rem; justify-items: start; padding: 1.5rem; margin: 1.5rem 0 var(--bolum); border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.kilit-ikon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); }
.kilit-ikon .ikon { width: 26px; height: 26px; }
.kilit-kart p { color: var(--soluk); }

/* =====================================================================
   ÜCRETLİ EKRANLAR: rapor, kopya kartı, gönderdikten sonra
   ===================================================================== */
.ucretli-sayfa { padding-top: 1.5rem; padding-bottom: var(--bolum); display: grid; gap: 1.25rem; align-content: start; }
.ucretli-sayfa > div { display: grid; gap: 1.25rem; }
.sayfa-baslik { font-size: clamp(1.9rem, 8vw, 2.8rem); }

/* Rapor */
.rp-ozet { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background-color: var(--yuzey); }
.rp-ozet-metin { display: grid; gap: .35rem; }
.rp-ozet-metin p { color: var(--soluk); }
.rp-baslik { font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.1; }
.halka { position: relative; width: 104px; height: 104px; flex: none; }
.halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.halka circle { fill: none; stroke-width: 10; }
.halka-zemin { stroke: var(--kalem-zemin); }
.halka-dolu { stroke: var(--onay); stroke-linecap: round; }
.halka-sayi { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; font-family: var(--font-baslik); font-weight: 800; font-size: 1.9rem; letter-spacing: -.03em; }
.halka-sayi span { font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--soluk); margin-top: .15rem; }
.damga { margin: 0; flex: none; text-align: center; color: var(--tukenmez); transform: rotate(-8deg); animation: damga-bas var(--hiz-uzun) cubic-bezier(.3, 1.4, .5, 1) .2s both; }
.damga svg { display: block; width: 112px; height: 112px; }
.damga figcaption { font-family: var(--font-form); font-size: .82rem; font-weight: 700; }
@keyframes damga-bas { from { transform: scale(1.7) rotate(-20deg); opacity: 0; } to { transform: rotate(-8deg); opacity: 1; } }
.rp-sorunlar { list-style: none; display: grid; gap: .75rem; }
.rp-sorun { display: grid; gap: .55rem; justify-items: start; padding: 1.1rem; border: 1px solid var(--cizgi); border-left: 4px solid var(--kalem); border-radius: var(--yaricap); background: var(--yuzey); max-width: none; }
.rp-uyari { border-left-color: var(--fosforlu); }
.rp-sorun-ust { display: grid; gap: .45rem; justify-items: start; }
.rp-sorun h3 { font-size: 1.1rem; }
.rp-sorun p { color: var(--soluk); font-size: .95rem; }
.rp-sorun .rp-ne { color: var(--murekkep); }
.rp-dugmeler .dugme { flex: 1 1 auto; }

/* Kopya kartı */
.kk-ust { display: grid; gap: .9rem; position: sticky; top: var(--ust-yukseklik); z-index: 5; padding: .75rem 0; background: var(--kagit); }
.kk-nasil { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--soluk); }
.kk-nasil .ikon { color: var(--tukenmez); margin-top: .1rem; }
.kk-ilerleme { display: grid; gap: .4rem; }
.kk-sayi { font-family: var(--font-form); font-size: .9rem; }
.kk-cubuk { display: block; height: 6px; border-radius: 3px; background: var(--kagit-cizgi); overflow: hidden; }
.kk-cubuk span { display: block; height: 100%; background: var(--fosforlu); transform-origin: left; transform: scaleX(0); transition: transform var(--hiz) var(--egri); }
.kk-bolum { display: grid; gap: .5rem; }
.kk-bolum h2 { font-size: 1.3rem; }
.kk-liste { list-style: none; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.kk-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiket kopya" "deger kopya" "not not"; gap: .15rem .75rem; align-items: center; padding: .65rem .8rem; border-bottom: 1px solid var(--cizgi); max-width: none; }
.kk-satir:last-child { border-bottom: 0; }
.kk-etiket { grid-area: etiket; display: flex; flex-wrap: wrap; gap: 0 .5rem; align-items: baseline; }
.kk-en { font-weight: 700; font-size: .9rem; }
.kk-no { font-family: var(--font-form); color: var(--soluk); margin-right: .35rem; font-weight: 400; }
.kk-tr { font-size: .8rem; color: var(--soluk); }
.kk-deger { grid-area: deger; min-width: 0; }
.kk-deger-yazi { position: relative; display: inline-block; font-family: var(--font-form); font-size: 1.12rem; color: var(--tukenmez); padding: 0 .2rem; margin-left: -.2rem; z-index: 0; }
.kk-deger-yazi::before { content: ""; position: absolute; inset: .1em -.05em; background: var(--fosforlu); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform var(--hiz-uzun) var(--egri); }
.kopyalandi .kk-deger-yazi { color: var(--fosforlu-metin); }
.kopyalandi .kk-deger-yazi::before { transform: none; }
.kk-bos, .kk-isaret { font-size: .92rem; color: var(--soluk); }
.kk-isaret { color: var(--murekkep); }
.kk-not { grid-area: not; font-size: .8rem; color: var(--soluk); }
.kk-kopyala { grid-area: kopya; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; min-width: 44px; padding: 0 .7rem; border: 1px solid var(--tukenmez); border-radius: var(--yaricap); background: var(--yuzey); color: var(--tukenmez); font-weight: 700; font-size: .88rem; cursor: pointer; }
.kk-tik { display: none; stroke-width: 2.6; }
.kopyalandi .kk-kopyala { border-color: var(--onay); color: var(--onay); }
.kopyalandi .kk-tik { display: block; animation: tik-gel var(--hiz) var(--egri); }
.kopyalandi .kk-kopyala-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@keyframes tik-gel { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .kk-satir { grid-template-columns: 14rem minmax(0, 1fr) auto; grid-template-areas: "etiket deger kopya" "etiket not not"; }
  .kk-etiket { flex-direction: column; gap: .1rem; }
}
.kk-dugmeler .dugme { flex: 1 1 auto; }

/* Gönderdikten sonra */
.kasa { display: grid; gap: .9rem; padding: 1.4rem; border: 2px solid var(--tukenmez); border-radius: var(--yaricap); background: var(--yuzey); }
.kasa-ust { display: flex; align-items: center; gap: .7rem; }
.kasa-ust h2 { font-size: 1.5rem; }
.kasa-ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); flex: none; }
.kasa-no { font-size: clamp(1.4rem, 6.5vw, 2rem); font-weight: 700; color: var(--tukenmez); letter-spacing: .06em; padding: .8rem 1rem; background: var(--kagit); border: 1px dashed var(--soluk); border-radius: var(--yaricap); overflow-wrap: anywhere; }
.kasa-form { display: grid; gap: .6rem; }
.kasa-form input { font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
.kasa-form input::placeholder, .satir input::placeholder { text-transform: none; letter-spacing: 0; color: var(--soluk); }
.sonuc-tarih { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.sonuc-tarih .cip { min-height: 40px; font-size: .95rem; }
.dolandiricilik { display: grid; gap: .8rem; }
.dolandiricilik h2 { font-size: 1.4rem; }
.ikonlu { list-style: none; display: grid; }
.ikonlu li { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--cizgi); max-width: none; }
.ikonlu-ikon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--kalem); color: var(--kalem-metin); flex: none; }
.ikonlu-ikon .ikon { width: 19px; height: 19px; }

/* Öneri kartı */
.oneri { display: grid; gap: .6rem; padding: 1.4rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.oneri .kalem-notu { font-size: 1.45rem; justify-self: start; }
.oneri h2 { font-size: 1.5rem; }
.oneri-kod { font-family: var(--font-form); font-size: 2rem; font-weight: 700; color: var(--tukenmez); letter-spacing: .05em; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Metin sayfaları (SSS, hakkımızda, gizlilik, sözleşme) */
.metin-sayfa { padding-bottom: var(--bolum); }
.metin-sayfa > * + * { margin-top: 1rem; }
.metin-sayfa h2 { font-size: 1.5rem; margin-top: 2rem; }
.metin-sayfa p, .metin-sayfa li { color: var(--murekkep); }
.metin-sayfa ul, .metin-sayfa ol { padding-left: 1.2rem; display: grid; gap: .4rem; }
.taslak { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px dashed var(--soluk); border-radius: var(--yaricap); background: var(--fosforlu-zemin); font-size: .9rem; font-weight: 700; }
.imza-satiri { font-family: var(--font-not); font-weight: 600; font-size: 1.7rem; color: var(--kalem-metin); }
.metin-baslik { padding-top: 1.75rem; }
@media (min-width: 960px) { .metin-baslik { padding-top: 3rem; } }
.hakkimizda-not { margin: .5rem 0 1.5rem; }

/* =====================================================================
   SATIŞ ANLARI: satış kartı, alt çubuk, indirme penceresi
   ===================================================================== */
.ust-panel { gap: .2rem; color: var(--tukenmez); font-weight: 700; }
.ust-panel .ikon { width: 1.05em; height: 1.05em; }
@media (max-width: 380px) { .ust-panel .ikon { display: none; } }
.kaydirma-kilitli, .kaydirma-kilitli body { overflow: hidden; }

/* 1. Fotoğraf geçince satış kartı */
.satis-kart { position: relative; display: grid; gap: .9rem; margin-top: 1.25rem; padding: 1.35rem 1.25rem 1.35rem 1.4rem; border: 1px solid var(--cizgi); border-left: 4px solid var(--kalem); border-radius: var(--yaricap); background: var(--yuzey); }
.satis-isaret { position: absolute; top: -14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--yuzey); border: 1px solid var(--kalem); color: var(--kalem-metin); transform: rotate(-8deg); }
.satis-isaret .ikon { width: 18px; height: 18px; }
.satis-baslik { display: grid; gap: .2rem; font-size: clamp(1.55rem, 6.4vw, 2.1rem); line-height: 1.05; padding-right: 1.5rem; }
.satis-baslik > span:first-child, .satis-baslik { color: var(--murekkep); }
.satis-vurgu { display: block; }
.satis-metin { color: var(--soluk); max-width: 56ch; }
.satis-cipler { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.satis-cipler .cip { white-space: normal; }
.satis-cipler .cip .ikon { color: var(--tukenmez); }
.satis-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.satis-eylem .dugme { flex: 1 1 16rem; }
.satis-fiyat { font-size: .92rem; color: var(--soluk); white-space: nowrap; }
@media (min-width: 640px) { .satis-eylem .dugme { flex: 0 0 auto; } }
.satis-devam .dugme { flex: none; }
.fk-sonraki-sade { background: var(--kagit); }
.fk-indir-sonra { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; min-height: 44px; font-size: .95rem; font-weight: 700; }
.fk-indir-sonra .ikon { width: 1em; height: 1em; }

/* Mobilde alt çubuk: satış kartı ekranda değilken */
.satis-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: stretch; background: var(--yuzey); border-top: 1px solid var(--cizgi); box-shadow: inset 4px 0 0 var(--kalem); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); visibility: hidden; transition: transform var(--hiz) var(--egri), visibility 0s linear var(--hiz); }
.satis-cubuk.gorunur { transform: none; visibility: visible; transition: transform var(--hiz) var(--egri), visibility 0s; }
.satis-cubuk-bag { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .45rem .5rem .45rem calc(var(--gutter) + 4px); color: var(--murekkep); text-decoration: none; font-size: .92rem; line-height: 1.25; }
.satis-cubuk-bag:hover { color: var(--murekkep); }
.satis-cubuk-yazi { flex: 1; min-width: 0; }
.satis-cubuk-yazi span { color: var(--tukenmez); font-weight: 700; white-space: nowrap; }
.satis-cubuk-bag > .ikon { color: var(--tukenmez); }
.satis-cubuk-kapat { flex: none; width: 52px; display: grid; place-items: center; background: none; border: 0; border-left: 1px solid var(--cizgi); color: var(--soluk); cursor: pointer; }
body.cubuklu { padding-bottom: 64px; }
@media (min-width: 760px) { .satis-cubuk { display: none; } body.cubuklu { padding-bottom: 0; } }

/* 2. Pencere (modal): mobilde alttan, masaüstünde ortada */
.pencere { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; padding: 0; border: 0; border-top: 1px solid var(--cizgi); border-radius: var(--yaricap) var(--yaricap) 0 0; background: var(--yuzey); color: var(--murekkep); transform: translateY(100%); transition: transform var(--hiz) var(--egri); }
.pencere.acik { transform: none; }
.pencere::backdrop { background: color-mix(in srgb, var(--murekkep) 42%, transparent); opacity: 0; transition: opacity var(--hiz) ease; }
.pencere.acik::backdrop { opacity: 1; }
.pencere-ic { position: relative; display: grid; gap: 1rem; padding: 1.4rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom)); }
.pencere-kapat { position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--yaricap); color: var(--soluk); cursor: pointer; }
.pencere-kapat:hover { color: var(--murekkep); }
.pencere h2 { font-size: clamp(1.6rem, 6.6vw, 2.1rem); padding-right: 2.5rem; }
.pencere-etiket { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--onay); }
.pencere-etiket .ikon { width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--onay); color: var(--onay-zemin); stroke-width: 2.6; }
.pencere-ozet { list-style: none; display: grid; }
.pencere-ozet li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--cizgi); max-width: none; }
.pencere-ozet-ikon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); }
.pencere-ozet-ikon .ikon { width: 20px; height: 20px; }
.pencere-dugmeler { display: grid; gap: .5rem; }
.pencere-dugmeler .dugme { flex-wrap: wrap; column-gap: .6rem; row-gap: 0; }
.dugme-fiyat { font-weight: 400; font-size: .88rem; opacity: .85; }
@media (min-width: 640px) {
  .pencere { margin: auto; width: min(32rem, calc(100% - 2rem)); border: 1px solid var(--cizgi); border-radius: var(--yaricap); transform: translateY(12px) scale(.98); opacity: 0; transition: transform var(--hiz) var(--egri), opacity var(--hiz) ease; }
  .pencere.acik { transform: none; opacity: 1; }
  .pencere-ic { padding: 1.75rem; }
}

/* 3. Kaydırma ipuçları: oklar, noktalar, ipucu kaydırması */
.kaydirilir:focus-visible { outline-offset: 4px; }
.kaydir-denetim { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .9rem; }
.kaydir-denetim[hidden] { display: none; }
.kaydir-ok { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--tukenmez); border-radius: 50%; background: var(--yuzey); color: var(--tukenmez); cursor: pointer; transition: transform var(--hiz-kisa) var(--egri); }
.kaydir-ok:hover { background: var(--tukenmez-acik); }
.kaydir-ok:active { transform: scale(.94); }
.kaydir-ok:disabled { border-color: var(--cizgi); color: var(--soluk); background: transparent; cursor: default; opacity: .55; transform: none; }
.kaydir-ok .ikon { width: 20px; height: 20px; }
.kaydir-noktalar { display: flex; justify-content: center; flex-wrap: wrap; }
.kaydir-nokta { width: 32px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.kaydir-nokta span { width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi); transition: transform var(--hiz-kisa) var(--egri); }
.kaydir-nokta[aria-current="true"] span { background: var(--tukenmez); transform: scale(1.35); }
.ipucu-kaydir { animation: ipucu-kaydir 900ms var(--egri); }
@keyframes ipucu-kaydir { 0%, 100% { transform: none; } 45% { transform: translateX(-80px); } }

/* =====================================================================
   ÖDEME SONRASI: karşılama, panel, teklif ekleri
   ===================================================================== */
/* Karşılama */
.hg-ust { display: flex; align-items: center; gap: 1.25rem; padding: 1.4rem 1.25rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background-color: var(--yuzey); }
.hg-damga { animation: none; }
.hg-damga svg { width: 96px; height: 96px; }
.hg-ilk .hg-damga { animation: damga-bas var(--hiz-uzun) cubic-bezier(.3, 1.4, .5, 1) .2s both; }
.hg-metin { display: grid; gap: .35rem; min-width: 0; }
.hg-paket { font-family: var(--font-form); font-size: .88rem; color: var(--soluk); }
.hg-baslik { font-size: clamp(2rem, 9vw, 3rem); }
.hg-baslik:focus { outline: none; }
.hg-metin p:last-child { color: var(--soluk); }
@media (max-width: 420px) { .hg-ust { flex-direction: column; align-items: flex-start; } }
.hg-alt-baslik { font-size: 1.3rem; margin-bottom: .5rem; }
.hg-liste { list-style: none; display: grid; }
.hg-liste li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--cizgi); max-width: none; }
.hg-ikon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); }
.hg-ikon .ikon { width: 20px; height: 20px; }
.hg-ad { flex: 1; font-weight: 700; }
.hg-tik { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--onay); color: var(--onay-zemin); }
.hg-tik .ikon { width: 18px; height: 18px; stroke-width: 2.6; }
.hg-ilk + .hg-acilan .hg-liste li { animation: hg-satir var(--hiz) var(--egri) both; animation-delay: calc(500ms + var(--sira) * 140ms); }
.hg-ilk + .hg-acilan .hg-tik { animation: hg-tik var(--hiz) cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(600ms + var(--sira) * 140ms); }
@keyframes hg-satir { from { transform: translateX(-8px); opacity: .45; } to { transform: none; opacity: 1; } }
@keyframes hg-tik { from { transform: scale(0); } to { transform: none; } }
.hg-foto { display: flex; gap: .6rem; align-items: flex-start; }
.hg-foto > * + * { margin-top: 0; }
.hg-foto .ikon { color: var(--onay); margin-top: .15rem; }
.hg-dugmeler .dugme { flex: 1 1 14rem; }

/* Panel */
.dosya-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kagit); }
.dosya-dugme { display: grid; gap: .1rem; text-align: left; min-height: 56px; padding: .5rem .75rem; border: 1px solid transparent; border-radius: var(--yaricap); background: transparent; cursor: pointer; }
.dosya-dugme[aria-pressed="true"] { background: var(--yuzey); border-color: var(--tukenmez); }
.dosya-ad { font-weight: 700; }
.dosya-dugme[aria-pressed="true"] .dosya-ad { color: var(--tukenmez); }
.dosya-kisi { font-size: .82rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-ozet { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.pn-halka .halka-zemin { stroke: var(--kagit-cizgi); }
.pn-halka .halka-sayi { font-size: 1.7rem; }
.pn-ozet-metin { display: grid; gap: .3rem; min-width: 0; }
.pn-ozet-metin h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
.pn-ozet-metin p { color: var(--soluk); }
.pn-adimlar { list-style: none; display: grid; gap: .5rem; }
.pn-adim { max-width: none; }
.pn-bag { display: flex; align-items: center; gap: .85rem; min-height: 68px; padding: .75rem .9rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); color: var(--murekkep); text-decoration: none; transition: transform var(--hiz-kisa) var(--egri); }
.pn-bag:hover { color: var(--murekkep); border-color: var(--tukenmez); }
.pn-bag:active { transform: scale(.99); }
.pn-ikon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cizgi); color: var(--soluk); background: var(--kagit); }
.pn-ikon .ikon { width: 21px; height: 21px; }
.pn-govde { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.pn-ad { font-weight: 700; }
.pn-metin { font-size: .88rem; color: var(--soluk); }
.pn-durum { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--soluk); flex: none; }
.pn-durum .ikon { width: 1.1em; height: 1.1em; }
.pn-tamam .pn-ikon { background: var(--onay); border-color: var(--onay); color: var(--onay-zemin); }
.pn-tamam .pn-ikon .ikon { stroke-width: 2.6; }
.pn-tamam .pn-durum { color: var(--onay); }
.pn-sorun .pn-durum { color: var(--kalem-metin); }
.pn-sorun .pn-ikon { border-color: var(--kalem); color: var(--kalem-metin); }
.pn-devam .pn-ikon { border-color: var(--fosforlu); }
.pn-siradaki .pn-bag { border: 2px solid var(--tukenmez); padding: calc(.75rem - 1px) calc(.9rem - 1px); }
.pn-siradaki .pn-ikon { border-color: var(--tukenmez); color: var(--tukenmez); background: var(--tukenmez-acik); }
.pn-devam.pn-siradaki .pn-ikon, .pn-sorun.pn-siradaki .pn-ikon { background: var(--yuzey); }
.pn-devam-dugme, .pn-devam { flex: none; }
@media (max-width: 420px) {
  .pn-siradaki .pn-bag { flex-wrap: wrap; }
  .pn-siradaki .dugme { flex: 1 0 100%; }
}
.cihaz-not { display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px dashed var(--soluk); border-radius: var(--yaricap); }
.cihaz-metin { display: flex; gap: .6rem; align-items: flex-start; }
.cihaz-metin .ikon { color: var(--tukenmez); margin-top: .1rem; }
.yedek-yukle { position: relative; cursor: pointer; }
.yedek-yukle:focus-within { outline: 3px solid var(--odak); outline-offset: 2px; }

/* Teklif ekleri */
.teklif-kapanis .cip { min-height: 36px; font-weight: 700; }
.fiyat-not { font-size: .9rem; color: var(--soluk); margin-top: -.4rem; }
.ne-alirsin { display: grid; gap: .8rem; }
.ne-baslik { font-size: 1.4rem; }
.ne-liste { list-style: none; display: grid; gap: .75rem; }
.ne-liste li { display: grid; gap: .5rem; align-content: start; max-width: none; }
.ne-liste p { font-size: .95rem; color: var(--soluk); }
.ne-liste p strong { color: var(--murekkep); }
.ne-alirsin .mini-ekran { grid-column: auto; max-width: none; min-height: 112px; }
@media (min-width: 640px) { .ne-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini-rapor { align-items: center; }
.mr-halka { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-family: var(--font-baslik); font-weight: 800; font-size: .8rem; }
.mr-halka svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mr-halka circle { fill: none; stroke-width: 5; }
.mr-sorun { font-size: .8rem; color: var(--kalem-metin); border-left: 3px solid var(--kalem); padding-left: .4rem; }
.gelistirici-kutu { display: grid; gap: .5rem; justify-items: start; padding: .9rem 1rem; border: 1px dashed var(--soluk); border-radius: var(--yaricap); }
.ne-alirsin .me-kopya { grid-template-columns: minmax(0, 4.4rem) minmax(0, 1fr) auto; padding-inline: .2rem; }
.ne-alirsin .mini-ekran * { overflow-wrap: normal; }
.ne-alirsin .me-kopya .form-yazi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }

/* =====================================================================
   v1.2: isim uyarısı, Gönderdim, Kasam
   ===================================================================== */
/* İsim adımı: büyük Dikkat bloğu (kapatılamaz) */
.isim-dikkat { display: grid; gap: .7rem; padding: 1.1rem 1.1rem 1.2rem; background: var(--fosforlu-zemin); border: 2px solid var(--fosforlu); border-radius: var(--yaricap); color: var(--murekkep); }
.isim-dikkat-ust { display: flex; align-items: center; gap: .65rem; }
.isim-dikkat-ikon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fosforlu); color: var(--fosforlu-metin); }
.isim-dikkat-ikon .ikon { width: 22px; height: 22px; stroke-width: 2.6; }
.isim-dikkat h3 { font-size: clamp(1.25rem, 5.2vw, 1.5rem); }
.isim-dikkat p { font-size: .95rem; }
.isim-cizim { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.ic-kutu { display: grid; gap: .1rem; padding: .35rem .55rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); min-width: 0; }
.ic-kutu .form-yazi { color: var(--tukenmez); font-weight: 700; white-space: nowrap; }
.ic-etiket { font-size: .7rem; color: var(--soluk); white-space: nowrap; }
.ic-pasaport { border-style: dashed; border-color: var(--soluk); }
.ic-oklar { width: 34px; height: 44px; flex: none; fill: none; stroke: var(--kalem); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic-sag { display: grid; gap: .35rem; min-width: 0; }

/* Kaç ad: bölümlü seçici */
fieldset.segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
fieldset.segment > legend { grid-column: 1 / -1; }
fieldset.segment .secenek { justify-content: center; min-height: 52px; padding: .5rem; font-weight: 700; }
fieldset.segment .secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.segment .secenek { position: relative; }
fieldset.segment .secenek:has(input:focus-visible) { outline: 3px solid var(--odak); outline-offset: 2px; }

/* Canlı önizleme */
.isim-onizleme { display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
.io-baslik { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem; }
.io-kutular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.io-kutu { display: grid; gap: .2rem; padding: .5rem .65rem; border: 1px solid var(--soluk); border-radius: var(--yaricap); background: var(--kagit); min-width: 0; }
.io-etiket { font-size: .76rem; color: var(--soluk); }
.io-deger { color: var(--tukenmez); font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.io-bos .io-deger { color: var(--soluk); font-weight: 400; font-size: .85rem; }
.io-uyumsuz { padding: .5rem .7rem; background: var(--fosforlu-zemin); border-left: 3px solid var(--fosforlu); font-size: .92rem; color: var(--murekkep); }

/* Kopya kartı: First Name üstünde kısa uyarı */
.kk-isim-uyari { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .8rem; background: var(--fosforlu-zemin); border-bottom: 1px solid var(--fosforlu); font-size: .9rem; color: var(--murekkep); max-width: none; }
.kk-isim-uyari .ikon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; stroke-width: 2.6; }

/* Gönderdim */
.gonderdim { display: grid; gap: .6rem; }
.gonderdim p { color: var(--soluk); }
.dugme-gonderdim { min-height: 60px; font-size: 1.15rem; }

/* Tebrik: tam ekran pencere */
.pencere.pencere-tam { margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; background: var(--kagit); transform: translateY(24px); opacity: 0; transition: transform var(--hiz-uzun) var(--egri), opacity var(--hiz-uzun) ease; }
.pencere.pencere-tam.acik { transform: none; opacity: 1; }
.pencere-tam .pencere-ic { min-height: 100%; place-content: center; padding: 2rem var(--gutter); }
.tebrik { display: grid; justify-items: center; gap: 1rem; text-align: center; max-width: 30rem; margin: 0 auto; }
.tebrik h2 { font-size: clamp(2rem, 9vw, 3rem); padding: 0; }
.tebrik-dilek { font-family: var(--font-not); font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.1; color: var(--tukenmez); }
.tebrik-not { color: var(--soluk); font-size: .95rem; }
.tebrik .dugme { margin-top: .5rem; min-width: 16rem; }

/* Nazar boncuğu: renkler tema jetonlarından; koyu temada beyaz halka mürekkep (açık), göz bebeği kâğıt (koyu) */
.nazar { --n-mavi: var(--tukenmez); --n-beyaz: var(--yuzey); --n-koyu: var(--murekkep); width: 132px; height: 132px; transform-origin: 50% 0; animation: nazar-salla 3.2s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .nazar { --n-beyaz: var(--murekkep); --n-koyu: var(--kagit); } }
:root[data-tema="koyu"] .nazar { --n-beyaz: var(--murekkep); --n-koyu: var(--kagit); }
.n-mavi { fill: var(--n-mavi); }
.n-beyaz { fill: var(--n-beyaz); }
.n-acik { fill: var(--n-mavi); opacity: .5; }
.n-koyu { fill: var(--n-koyu); }
.n-isik { fill: var(--n-beyaz); opacity: .75; }
.n-parilti { fill: none; stroke: var(--kalem); stroke-width: 2.4; stroke-linecap: round; }
@keyframes nazar-salla { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .nazar { animation: none; } }

/* Kasa */
.kasa-girdi { display: flex; gap: .5rem; }
.kasa-girdi input { flex: 1; min-width: 0; }
.kasa-mesaj { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; background: var(--onay-zemin); border-radius: var(--yaricap); color: var(--murekkep); font-weight: 700; }
.kasa-mesaj .ikon { color: var(--onay); flex: none; margin-top: .1rem; stroke-width: 2.6; }
.kasa-dolu .kasa-no { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
.kasa-oteki { border-width: 1px; gap: .4rem; }
.not-al { display: grid; gap: .75rem; padding: 1.2rem; border: 3px solid var(--fosforlu); border-radius: var(--yaricap); background: var(--yuzey); }
.not-al-ust { display: flex; align-items: center; gap: .7rem; }
.not-al-ikon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fosforlu); color: var(--fosforlu-metin); }
.not-al h2 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
.not-al-eylem { display: grid; gap: .6rem; }
@media (min-width: 640px) { .not-al-eylem { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.not-al.tamam { border: 1px solid var(--onay); background: var(--onay-zemin); padding: .9rem 1.1rem; }
.not-al.tamam .not-al-ikon { background: var(--onay); color: var(--onay-zemin); }
.not-al.tamam h2 { font-size: 1.15rem; }
.not-al.tamam .onay { background: transparent; }
.ios-not { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.ios-not .ikon { flex: none; color: var(--tukenmez); margin-top: .15rem; }
.ios-not > * + * { margin-top: 0; }
.sonuc-cip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sonuc-cip .cip { min-height: 40px; font-size: .95rem; }
.sonuc-tarih > .mikro { flex-basis: 100%; }

/* Ana ekrana ekleme rehberi */
.rehber-kart { position: relative; display: grid; gap: .7rem; padding: 1.2rem; border: 1px solid var(--tukenmez); border-radius: var(--yaricap); background: var(--tukenmez-acik); }
.rehber-kart h2 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); padding-right: 2.5rem; }
.rehber-kart > p { color: var(--murekkep); }
.rehber-kapat { position: absolute; top: .35rem; right: .35rem; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--murekkep); cursor: pointer; border-radius: var(--yaricap); }
.rehber-platform { font-family: var(--font-form); font-size: .88rem; }
.rehber-adimlar { list-style: none; display: grid; gap: .4rem; }
.rehber-adimlar li { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); max-width: none; }
.ra-no { font-family: var(--font-form); font-weight: 700; color: var(--soluk); flex: none; width: 1rem; }
.ra-ikon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tukenmez-acik); color: var(--tukenmez); }
.ra-ikon .ikon { width: 20px; height: 20px; }
.rehber-diger summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--tukenmez); font-weight: 700; }
.rehber-diger[open] summary { margin-bottom: .4rem; }
.rehber-not { font-weight: 700; }
.rehber-kart [data-yukle] { justify-self: start; }
.rehber-kart [data-yukle][hidden] { display: none; }

/* Davet kodu vurgusu (tebrikten sonra bir kez) */
.oneri-vurgu { border: 2px solid var(--tukenmez); padding: calc(1.4rem - 1px); }
.ios-not .bag { min-height: 0; padding: 0; vertical-align: baseline; }
.kasa-dolu .kasa-no { font-size: clamp(1.2rem, 5.8vw, 2.4rem); letter-spacing: .03em; overflow-wrap: normal; white-space: nowrap; overflow-x: auto; }

/* =========================================================================
   FUNNEL-V1: reklam sayfası (dv2027), ödeme formu ve Shopier ara ekranı,
   erişim kodu, indirme yedekleri, ana sayfa açık başlığı
   ========================================================================= */

/* Ana sayfa: açık başlık, marka cümlesi küçük alt satırda */
.hero-baslik.hero-acik { font-size: clamp(2.15rem, 9.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.015em; }
.hero-marka { font-family: var(--font-baslik); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; padding: .15rem 0; }
.hero-marka .kalem-cember { padding: .2em .75em; }

/* Reklam sayfası başlığı: menü yok, tek bağlantı (erişim kodu) */
.ust-funnel { position: relative; }
.ust-funnel .ust-cikis { margin-left: auto; color: var(--tukenmez); }
.ust-funnel .logo { cursor: default; }

/* İlk ekran: 375x667'de başlık, alt başlık, ana düğme ve güven satırı kaydırmadan görünür */
.f-hero { padding: 1rem 0 1.75rem; border-bottom: 1px solid var(--cizgi); }
.f-hero-ic { display: grid; gap: .8rem; }
.f-hero-ic > * { max-width: 46rem; }
.f-cip { min-height: 30px; }
.f-cip .cip { white-space: normal; text-align: left; }
.f-baslik { font-size: clamp(2rem, 8.6vw, 3.6rem); line-height: 1.03; letter-spacing: -.015em; font-weight: 800; }
.f-alt { font-size: 1.1rem; line-height: 1.4; max-width: 34rem; }
.f-marka { font-family: var(--font-baslik); font-weight: 700; font-size: .98rem; color: var(--kalem-metin); letter-spacing: -.01em; }
.f-eylem { display: grid; gap: .35rem; justify-items: center; margin-top: .25rem; }
.f-eylem .dugme { min-height: 54px; font-size: 1.08rem; }
.f-paket-bag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--tukenmez); font-weight: 700; }
.f-guven { font-size: .86rem; color: var(--soluk); text-align: center; }
@media (min-width: 640px) {
  .f-hero { padding: 2.5rem 0 3rem; }
  .f-eylem { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; }
  .f-eylem .dugme { width: auto; }
  .f-guven { text-align: left; }
}
.f-bolum { scroll-margin-top: 8px; }
/* Reklam sayfasında başlık yapışkan değil: üstte boşluk bırakmaya gerek yok. */
html:has(body.funnel-sayfa) { scroll-padding-top: 0; }
.f-alt-baslik { margin-top: 2rem; margin-bottom: .35rem; }
/* "Kura büyük, eleme sert" içinde rakam şeridi, "Elenmenin 4 yolu" başlığı ve kartlar birbirine yapışmasın. */
.f-yol-baslik { margin-top: 3.25rem; }
.f-yol-ipucu { margin-bottom: 1.5rem; }
@media (min-width: 960px) { .f-yol-baslik { margin-top: 4.5rem; } .f-yol-ipucu { margin-bottom: 2rem; } }
.f-yapmayiz { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.25rem; }
.f-yapmayiz li { position: relative; padding-left: 1.5rem; }
.f-yapmayiz li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .8rem; height: 2px; background: var(--kalem); transform: rotate(-8deg); }
.f-odeme-guven, .odeme-guven { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; color: var(--soluk); }
.f-odeme-guven .ikon, .odeme-guven .ikon { flex: none; width: 1.2em; height: 1.2em; color: var(--tukenmez); margin-top: .1em; }
.funnel-sayfa .alt-funnel nav ul { gap: 0 .9rem; }

/* Ödeme formu (reklam sayfası ve teklif sayfası) */
.f-odeme, .teklif-sayfa form { display: grid; gap: 1.25rem; }
.paket-not { font-size: .92rem; padding: .55rem .7rem; background: var(--tukenmez-acik); border-radius: var(--yaricap); color: var(--murekkep); }
.iletisim { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .9rem; }
.iletisim-baslik { font-family: var(--font-baslik); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.005em; margin-bottom: .2rem; padding: 0; }
.iletisim input { font-size: 1.1rem; }
.iletisim input[aria-invalid="true"] { border-color: var(--kalem); box-shadow: inset 0 0 0 1px var(--kalem); }
.alan-hata { color: var(--kalem-metin); font-size: .92rem; }
.alan-hata:empty { display: none; }
.odeme-hata-donus { border-color: var(--kalem); }
.odeme-pencere { display: grid; gap: .6rem; padding: 1rem; border: 1px solid var(--tukenmez); border-radius: var(--yaricap); background: var(--yuzey); scroll-margin-top: 8px; }
.odeme-pencere[hidden] { display: none; }
.odeme-pencere-ust { display: flex; gap: .75rem; align-items: center; }
.odeme-pencere h2 { font-size: var(--t-h3); }
.odeme-pencere .odeme-yonlen-isaret { width: 28px; height: 28px; flex: none; }

/* Erişim kodu: büyük, kopyalanabilir (karşılama ve giriş) */
.erisim-kart { display: grid; gap: .7rem; padding: 1.2rem; border: 1px solid var(--tukenmez); border-radius: var(--yaricap); background: var(--yuzey); }
.erisim-kart h2 { font-size: var(--t-h3); }
.erisim-kod { font-family: var(--font-form); font-weight: 700; font-size: clamp(1.7rem, 8.4vw, 2.4rem); letter-spacing: .06em; color: var(--tukenmez); word-break: break-all; user-select: all; -webkit-user-select: all; }
.erisim-uyari { display: flex; gap: .55rem; align-items: flex-start; padding: .7rem .85rem; background: var(--fosforlu-zemin); border: 1px solid var(--fosforlu); border-radius: var(--yaricap); color: var(--murekkep); font-size: .95rem; }
.erisim-uyari .ikon { flex: none; width: 1.2em; height: 1.2em; margin-top: .1em; }
.bekleme { display: grid; justify-items: center; text-align: center; gap: .9rem; padding: 2.5rem 1rem; }
.bekleme-isaret { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--tukenmez-acik); border-top-color: var(--tukenmez); animation: donus 900ms linear infinite; }
@keyframes donus { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bekleme-isaret { animation: none; border-top-color: var(--tukenmez-acik); border-right-color: var(--tukenmez); } }
.giris-form { display: grid; gap: 1rem; max-width: 30rem; }
.giris-form input { font-family: var(--font-form); font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; }

/* Fotoğraf indirme yedekleri: paylaşım menüsü, indir bağlantısı, uzun bas */
.fk-indirme { display: grid; gap: .6rem; }
.fk-uzunbas { margin: .2rem 0 0; display: grid; gap: .4rem; justify-items: center; }
.fk-uzunbas img { width: min(100%, 240px); height: auto; border: 1px solid var(--cizgi); border-radius: var(--yaricap); -webkit-touch-callout: default; }
.fk-uzunbas figcaption { display: flex; gap: .4rem; align-items: center; font-size: .9rem; color: var(--soluk); text-align: center; }
.fk-uzunbas figcaption .ikon { flex: none; width: 1.1em; height: 1.1em; color: var(--tukenmez); }
.fk-uygulama-ici { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
.fk-uygulama-ici > * + * { margin-top: 0; }
.fk-uygulama-ici .ikon { flex: none; width: 1.2em; height: 1.2em; margin-top: .1em; }
.fk-geri-not { margin-bottom: .5rem; }

/* Sayfa içeriği ile alt bilgi arasında nefes payı: formlu sayfalarda alt bilgi içeriğe yapışıyordu. */
main.kap { padding-bottom: clamp(2.5rem, 8vw, 4.5rem); }

/* Çerez bandı: iki düğme aynı görünümde (Reddet ve Kabul et eşit), sayfanın altına yapışık. */
.cerez-bandi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; gap: .75rem; padding: 1rem max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-bottom)); background: var(--yuzey); border-top: 2px solid var(--murekkep); box-shadow: 0 -6px 24px rgba(0,0,0,.12); }
.cerez-bandi p { font-size: .95rem; color: var(--murekkep); max-width: 60rem; }
.cerez-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; }
.cerez-dugmeler .dugme { flex: 1 1 8rem; justify-content: center; }
@media (min-width: 720px) { .cerez-bandi { grid-template-columns: 1fr auto; align-items: center; padding-inline: 2rem; } .cerez-dugmeler .dugme { flex: 0 0 auto; min-width: 8rem; } }
.onay-yasal + .onay-yasal { margin-top: .6rem; }

/* Satın alınca ne alırsın: ikonlu kısa kartlar, altta paket düğmesi. Fiyat burada yok: ilk kez paket ekranında görünür. */
.alirsin { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--cizgi); }
.alirsin li { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--cizgi); }
.alirsin-metin { display: grid; gap: .1rem; }
.alirsin-metin strong { font-family: var(--font-baslik); font-size: 1.1rem; letter-spacing: -.01em; color: var(--murekkep); }
.alirsin-metin span { color: var(--soluk); font-size: .95rem; line-height: 1.4; }
.alirsin-eylem { display: grid; gap: .7rem; margin-top: 1.75rem; }
.alirsin-eylem .dugme { justify-content: center; }
.alirsin-not { color: var(--soluk); }
@media (min-width: 720px) {
  .alirsin { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2rem; border-top: 0; }
  .alirsin li { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1rem 0 0; border-bottom: 0; border-top: 2px solid var(--murekkep); }
  .alirsin-eylem { justify-items: start; }
  .alirsin-eylem .dugme { width: auto; }
}

/* Bu yıl yeni: iki kart, ikonlu başlık, kısa liste, altta vurgulu not. */
.hazirlik { display: grid; gap: 1rem; }
.hazirlik-kart { border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); padding: 1.25rem; display: grid; gap: .8rem; align-content: start; }
.hazirlik-ust { display: flex; align-items: center; gap: .8rem; }
.hazirlik-ust h3 { font-size: 1.25rem; margin: 0; }
.yeni-etiket { margin-left: auto; font-family: var(--font-form); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kalem-metin); border: 1px solid var(--kalem); border-radius: var(--yaricap); padding: .05rem .45rem; }
.hazirlik-kart > p { color: var(--soluk); }
.hazirlik-kart .tikli { margin: 0; }
.hazirlik-not { border-top: 1px dashed var(--cizgi); padding-top: .75rem; font-size: .92rem; color: var(--murekkep) !important; }
@media (min-width: 720px) { .hazirlik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .hazirlik-kart { padding: 1.5rem; } }