/* ==========================================================================
   SOYAICIM — vitrin bölümleri (17.09.2026)

   Ana sayfadaki "örnek sonuç / neler çıkar / paketler / güven / SSS"
   bölümleri ve /ornek.php aynı parçaları kullanıyor. Onaylı taslak:
   https://claude.ai/artifact/7P3xhaQzoXrDcxZamDKCF9

   ⚠ BÜTÜN SINIFLAR `v-` ÖN EKLİ. index.php'de .paketler, .tutar, .not,
   .guven, .ana-dugme, .ic zaten var ve sipariş formunun parçası; aynı
   adla yazılan bir kural ödeme adımındaki paket kartlarını bozar.
   ⚠ `data-git` KULLANMA: index.php'nin adım denetleyicisi bütün
   [data-git] tıklamalarını yakalayıp adım değiştiriyor.

   Renk ve yazı tipleri sayfanın :root'undan (index.php, inc/yasal-basla.php).
   ========================================================================== */

/* Ana sayfada yalnız 1. adımda: belge yüklenip forma geçilince vitrin
   gizlenir, ölçülmüş huni (özet → kimlik → ödeme) araya bir şey almaz.
   ornek.php'nin gövdesinde data-adim yok, orada bu kural hiç eşleşmez. */
body[data-adim]:not([data-adim="1"]) .v-vitrin,
body[data-adim]:not([data-adim="1"]) .v-yapiskan{display:none !important}

.v-bolum{max-width:1200px;margin-inline:auto;padding:72px var(--yan) 0;scroll-margin-top:16px}
.v-etiket{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--cok-soluk);text-transform:uppercase}
.v-bolum h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,7.4vw,46px);line-height:1.12;margin-top:8px;text-wrap:balance}
.v-bolum h2 em{font-style:normal;color:var(--altin-koyu)}
.v-onsoz{color:var(--soluk);max-width:56ch;margin-top:12px;font-size:15.5px;line-height:1.55}
@media (min-width:960px){ .v-bolum{padding-top:112px} }

/* ana sayfa girişindeki "örneğe in" bağlantısı */
.v-asagi{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-size:13px;font-weight:500;color:var(--altin-koyu);text-decoration:none}
.v-asagi span{border-bottom:1px solid var(--altin)}

/* ---------------------------------------------------------- örnek sonuç */
.v-gorunum{display:flex;gap:4px;margin-top:26px;background:var(--kutu);border:1px solid var(--cizgi);padding:4px;width:fit-content;max-width:100%}
.v-gorunum button{min-height:40px;padding:8px 16px;font-size:13.5px;color:var(--soluk)}
.v-gorunum button[aria-selected="true"]{background:var(--kart);color:var(--murekkep);font-weight:600;box-shadow:0 1px 4px rgba(54,46,38,.12)}
.v-ornek{margin-top:32px;display:grid;gap:34px;align-items:start}
.v-telefon-kolon{display:grid;justify-items:center;gap:10px}
.v-yatay-kolon{display:grid;gap:10px}
.v-telefon{position:relative;width:min(270px,70vw);aspect-ratio:9/16;border-radius:34px;border:9px solid #1F1B17;background:#111;overflow:hidden;box-shadow:0 24px 60px rgba(31,27,23,.28)}
.v-ekran{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;border:7px solid #1F1B17;background:#111;overflow:hidden;box-shadow:0 18px 50px rgba(31,27,23,.22)}
.v-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;background:#111;object-fit:contain}
.v-alt-yazi{display:grid;gap:3px;text-align:center;font-size:13px;color:var(--soluk)}
.v-alt-yazi b{font-weight:600;color:var(--murekkep);font-size:14px}
.v-yatay-kolon .v-alt-yazi{text-align:left}
.v-ornek-alt{margin-top:22px;display:grid;gap:12px;justify-items:start}
.v-ikincil{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 18px;border:1px solid var(--murekkep);color:var(--murekkep);text-decoration:none;font-weight:600;font-size:14px}
.v-ikincil:hover{background:var(--murekkep);color:var(--kagit)}
@media (max-width:959px){
  .v-ornek{margin-top:18px}
  [data-goster="dikey"] > .v-yatay-kolon,[data-goster="yatay"] > .v-telefon-kolon{display:none}
}
@media (min-width:960px){
  .v-gorunum{display:none}
  .v-ornek{grid-template-columns:320px minmax(0,1fr);gap:56px}
  .v-ornek-alt{margin-left:376px}
}

/* -------------------------------------------------------- neler çıkar */
.v-kaydir{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cok-soluk);margin-top:14px}
.v-ciktilar{margin-top:32px;display:grid;gap:16px}
.v-cikti{background:var(--kart);border:1px solid var(--cizgi);display:grid;align-content:start}
.v-cikti figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--kutu);position:relative}
.v-cikti figure img{width:100%;height:100%;object-fit:cover}
.v-cikti-ic{padding:16px 16px 18px;display:grid;gap:6px}
.v-cikti h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.15}
.v-cikti p{font-size:13.5px;color:var(--soluk);line-height:1.5}
.v-nerede{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.v-nerede span{font-size:11px;letter-spacing:.04em;color:var(--altin-koyu);border:1px solid rgba(170,133,54,.45);padding:2px 8px}
.v-rapor-kagit{position:absolute;inset:14px 18% 0;background:#FFFDF8;box-shadow:0 6px 20px rgba(54,46,38,.14);padding:14px 16px;overflow:hidden}
.v-rapor-kagit b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;margin-bottom:6px}
.v-rapor-kagit span{display:block;font-family:var(--serif);font-size:11.5px;color:var(--altin-koyu);margin:8px 0 4px}
.v-rapor-kagit i{display:block;height:5px;background:#E6DDCC;margin:5px 0;border-radius:2px}
@media (max-width:639px){
  .v-ciktilar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--yan) * -1);
    padding:0 var(--yan) 10px;scroll-padding-inline:var(--yan);overscroll-behavior-x:contain}
  .v-cikti{flex:0 0 84%;scroll-snap-align:start}
}
@media (min-width:640px){ .v-kaydir{display:none} .v-ciktilar{grid-template-columns:1fr 1fr} }
/* 17.09.2026: 4 sütunda (~270 px) ağaç ve harita yazıları okunmuyordu; 2 sütun (~570 px). */

/* ------------------------------------------------------------ paketler */
.v-paketler{margin-top:32px;display:grid;gap:14px}
.v-paket{position:relative;background:var(--kart);border:1px solid var(--cizgi);padding:22px 20px 20px;display:grid;gap:14px;align-content:start}
.v-paket.v-one{border-color:var(--altin);box-shadow:0 0 0 2px rgba(170,133,54,.18),0 18px 44px rgba(54,46,38,.10)}
.v-rozet{position:absolute;top:-11px;left:20px;background:var(--altin-koyu);color:#FFF8EA;font-size:10.5px;font-weight:600;letter-spacing:.14em;padding:4px 10px}
.v-paket-ust{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.v-paket h3{font-size:15px;font-weight:600;line-height:1.35}
.v-tutar{font-family:var(--serif);font-size:38px;line-height:1;flex:none;white-space:nowrap}
.v-tutar small{font-family:var(--sans);font-size:13px;color:var(--soluk);margin-left:5px}
.v-paket-ozet{font-size:13px;color:var(--soluk)}
.v-paket ul{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:9px;border-top:1px solid var(--cizgi)}
.v-paket li{display:grid;grid-template-columns:18px 1fr;gap:9px;font-size:14px;line-height:1.45}
.v-paket li svg{margin-top:3px}
.v-paket li.v-yok{color:var(--cok-soluk)}
.v-gercekler{margin-top:22px;display:grid;gap:10px 22px;font-size:13.5px;color:var(--soluk)}
.v-gercekler div{display:flex;gap:9px;align-items:flex-start}
.v-cagri{margin-top:26px;display:grid;gap:10px;justify-items:start}
.v-dugme{min-height:56px;padding:14px 26px;background:var(--murekkep);color:var(--kagit);font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.v-dugme:hover{background:#25201A}
.v-cagri small{font-size:12.5px;color:var(--cok-soluk)}
@media (min-width:900px){
  .v-paketler{grid-template-columns:repeat(3,1fr);gap:18px}
  .v-paket-ust{display:grid;gap:10px}
  .v-tutar{font-size:48px}
  .v-gercekler{grid-template-columns:repeat(3,1fr)}
}

/* --------------------------------------------------------------- güven */
.v-guvenler{margin-top:30px;display:grid;border-top:1px solid var(--cizgi)}
.v-guvenler > div{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--cizgi)}
.v-guvenler h3{font-size:15px;font-weight:600;line-height:1.35}
.v-guvenler p{font-size:13.5px;color:var(--soluk);margin-top:3px;max-width:52ch;line-height:1.55}
@media (min-width:900px){ .v-guvenler{grid-template-columns:repeat(2,1fr);column-gap:48px} }

/* ----------------------------------------------------------------- SSS */
.v-sorular{margin-top:26px;border-top:1px solid var(--cizgi);max-width:780px}
.v-sorular details{border-bottom:1px solid var(--cizgi)}
.v-sorular summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 0;min-height:56px;font-weight:500;font-size:15px;line-height:1.4}
.v-sorular summary::-webkit-details-marker{display:none}
.v-sorular summary::after{content:"+";font-family:var(--serif);font-size:24px;color:var(--altin-koyu);transition:transform .2s;flex:none}
.v-sorular details[open] summary::after{transform:rotate(45deg)}
.v-cevap{padding:0 0 18px;color:var(--soluk);font-size:14px;max-width:62ch;line-height:1.6}

/* ---------------------------------------------------------- son çağrı */
.v-son{max-width:1200px;margin:96px auto 0;padding:0 var(--yan)}
.v-son-ic{border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);padding:56px 0;display:grid;gap:18px;justify-items:center;text-align:center}
.v-son h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,8vw,52px);line-height:1.1;text-wrap:balance}
.v-son h2 em{font-style:normal;color:var(--altin-koyu)}
.v-son p{color:var(--soluk);font-size:14px}

/* ------------------------------------------- telefonda yapışkan şerit */
.v-yapiskan{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--kart);border-top:1px solid var(--cizgi);box-shadow:0 -8px 24px rgba(54,46,38,.12);
  padding:10px var(--yan) calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .25s ease;visibility:hidden}
.v-yapiskan.v-acik{transform:none;visibility:visible}
.v-yapiskan span{font-size:12.5px;color:var(--soluk);line-height:1.35}
.v-yapiskan .v-dugme{min-height:48px;padding:10px 18px;font-size:14px;flex:none}
body.v-yapiskan-acik footer{padding-bottom:80px}
@media (min-width:960px){ .v-yapiskan{display:none} body.v-yapiskan-acik footer{padding-bottom:0} }

/* -------------------------------------------------- örnek sonuç sayfası */
.v-sayfa{padding-bottom:8px}
.v-ornek-serit{background:var(--kutu);border-bottom:1px solid var(--cizgi)}
.v-ornek-serit div{max-width:1200px;margin-inline:auto;padding:12px var(--yan);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;line-height:1.5}
.v-ornek-serit b{font-weight:600}
.v-ornek-serit a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--altin)}
.v-ornek-bas{max-width:1200px;margin-inline:auto;padding:40px var(--yan) 0}
.v-ornek-bas h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,10vw,64px);line-height:1.05;margin-top:8px;text-wrap:balance}
.v-kunye{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:14px;color:var(--soluk);align-items:baseline}
.v-kunye b{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--murekkep);margin-right:5px}
.v-ikili{margin-top:30px;display:grid;gap:18px}
.v-ikili figure{margin:0;background:var(--kart);border:1px solid var(--cizgi);padding:10px}
/* 22.09.2026: height:auto ŞART. img etiketindeki height özniteliği (780)
   aksi hâlde CSS yüksekliği sayılıyor, genişlik 540'a inince harita ve ağaç
   dikine geriliyordu (kullanıcı ekran görüntüsüyle yakaladı). */
.v-ikili img{width:100%;height:auto}
.v-ikili figcaption{font-size:13px;color:var(--soluk);padding:10px 4px 2px;line-height:1.5}
.v-ikili figcaption b{color:var(--murekkep);font-weight:600}
@media (min-width:900px){ .v-ikili{grid-template-columns:1fr 1fr} }
.v-rapor{margin-top:30px;display:grid;gap:22px;background:#FFFDF8;border:1px solid var(--cizgi);padding:24px 20px;box-shadow:0 14px 40px rgba(54,46,38,.08)}
.v-rapor ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:r}
.v-rapor li{counter-increment:r;display:grid;grid-template-columns:30px 1fr;font-family:var(--serif);font-size:19px;padding:7px 0;border-bottom:1px solid #EEE6D6}
.v-rapor li::before{content:counter(r);color:var(--altin-koyu)}
.v-rapor li.v-secili{color:var(--altin-koyu)}
.v-alinti{position:relative;max-height:300px;overflow:hidden}
.v-alinti h3{font-family:var(--serif);font-weight:500;font-size:26px;margin-bottom:10px;line-height:1.2}
.v-alinti p{font-family:var(--serif);font-size:18.5px;line-height:1.55;color:#40362D}
.v-alinti::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(255,253,248,0),#FFFDF8)}
.v-rapor-alt{font-size:13px;color:var(--soluk)}
@media (min-width:900px){ .v-rapor{grid-template-columns:300px minmax(0,1fr);padding:34px 36px;gap:40px} .v-rapor-alt{grid-column:1/-1} }

/* ------------------------------------------- telefonda "nasıl çalışır" */
.v-adimlar-bolum{padding-top:48px}
.v-adimlar{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:a;border-top:1px solid var(--cizgi);padding-top:22px}
.v-adimlar li{counter-increment:a;display:grid;grid-template-columns:34px 1fr;column-gap:12px;row-gap:2px}
.v-adimlar li::before{content:counter(a);grid-row:span 2;font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--altin-koyu);border-bottom:1px solid var(--cizgi);height:1.4em;text-align:center}
.v-adimlar b{font-weight:600;font-size:15px}
.v-adimlar span{font-size:13.5px;color:var(--soluk);line-height:1.5}
@media (min-width:960px){ .v-adimlar-bolum{display:none} }

/* -------------------------------------------------------------- hediye */
.v-hediye{display:grid;gap:10px;max-width:780px}
.v-hediye h2{margin-top:2px}
.v-hediye p:last-child{color:var(--soluk);font-size:15.5px;line-height:1.6;max-width:56ch}

/* --------------------------------------------------------- neden yaptık */
.v-neden{display:grid;gap:14px;max-width:780px}
.v-neden blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,6.6vw,42px);line-height:1.15;text-wrap:balance}
.v-neden blockquote em{font-style:normal;color:var(--altin-koyu)}
.v-neden p{color:var(--soluk);font-size:15.5px;line-height:1.6;max-width:58ch}
.v-neden a{width:fit-content;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--altin)}

/* ======================================================== bölüm ritmi ====
   21.09.2026 · Uzun sayfa tek zeminde akıyordu; bölümler birbirinden ancak
   başlıklarla ayrışıyordu. Artık üç tonla ritim var:
     kâğıt  — sayfanın dokulu zemini (varsayılan)
     açık   — düz, bir ton açık yüzey (--kart): ürünü ve güveni "sahneye" alır
     koyu   — mürekkep: sayfada iki vurgu anı (neden yaptık, son çağrı)
   Ana sayfa sırası: örnek (açık) · size gelenler · hediye (açık) · paketler ·
   neden yaptık (koyu) · güven (açık) · SSS · son çağrı (koyu). İki kâğıt
   bölüm hiç yan yana gelmiyor.

   Bant tam genişlik, içerik 1200px kapta kalıyor: renk ::before ile iki
   yana taşıyor (inset: 0 calc(50% - 50vw)); html/body overflow-x:clip
   yatay kaydırma açmıyor. Bant içinde boşluk alt-üst eşit — kenar, iki
   bölümün içeriği arasındaki boşluğun tam ortasına düşüyor.
   ========================================================================= */
.v-vitrin .v-bolum{padding-block:52px}
@media (min-width:960px){ .v-vitrin .v-bolum{padding-block:88px} }

.v-bant{position:relative;isolation:isolate}
.v-bant::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--bant-zemin);z-index:-1}
.v-bant-acik{--bant-zemin:var(--kart)}
.v-bant-acik::before{border-block:1px solid var(--cizgi)}

.v-bant-koyu{--bant-zemin:#2A231C;color:#F5F0E6}
.v-bant-koyu .v-etiket{color:#B5A893}
.v-bant-koyu h2,.v-bant-koyu blockquote{color:#F5F0E6}
.v-bant-koyu h2 em,.v-bant-koyu blockquote em{color:#DFC070}
.v-bant-koyu p{color:#CFC4B3}
.v-bant-koyu a:not(.v-dugme){color:#F5F0E6;border-bottom-color:#DFC070}
.v-bant-koyu .v-dugme{background:#F5F0E6;color:#2A231C}
.v-bant-koyu .v-dugme:hover{background:#FFFFFF}
.v-bant-koyu :focus-visible{outline:2px solid #DFC070;outline-offset:3px}

/* Son çağrı bant olunca kendi çizgilerine gerek kalmıyor. /ornek.php'de
   önceki bölümün alt boşluğu olmadığı için dış boşluk orada korunuyor. */
.v-son.v-bant{margin-top:96px;padding-block:72px}
.v-vitrin .v-son.v-bant{margin-top:0}
.v-son.v-bant .v-son-ic{border:0;padding:0}
@media (min-width:960px){ .v-son.v-bant{padding-block:104px} }
/* Koyu banttan sonra altbilginin çizgisi ve üst boşluğu fazlalık: sayfa
   koyu bantla bitip altbilgiye doğrudan geçiyor. Ana sayfada yalnız vitrin
   görünürken (1. adım ya da betik çalışmadan önce) — sonraki adımlarda
   vitrin gizli ve altbilgi formun altında eski boşluğuyla durmalı.
   :has desteklemeyen tarayıcıda eski boşluk kalır, bozulma olmaz. */
body:is(:not([data-adim]),[data-adim="1"]) .v-vitrin:has(> .v-son.v-bant:last-child) ~ footer,
.v-sayfa:has(> .v-son.v-bant:last-child) + footer{margin-top:0;border-top:0}
.v-sayfa:has(> .v-son.v-bant:last-child){padding-bottom:0}

/* ------------------------------------------------------------- paylaş */
.v-paylas-satir{margin-top:18px}
.v-paylas{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--cizgi);background:var(--kart);color:var(--murekkep);font-size:14px;font-weight:500;text-decoration:none}
.v-paylas:hover{border-color:var(--altin)}
.v-paylas svg{color:var(--altin-koyu)}

/* ================================================== çatal animasyonu ======
   Soy ağacı kuşak kuşak büyür (çocuk → ebeveynler → dedeler → büyük
   dedeler), sonra üst kuşaklar kendi ebeveynlerine toplanır ve geriye
   marka işareti "çatal" kalır. Geometri worker/marka.py ile aynı (2 kat).
   Kullanıcı fikri, 17.09.2026. Hareket azaltma tercihinde durağan çatal. */
.catal-anim{width:76px;height:76px;overflow:visible;display:block}
.catal-anim .ca-cizgi{fill:none;stroke:var(--murekkep);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.catal-anim circle{fill:var(--murekkep);transform-box:fill-box;transform-origin:center}
.catal-anim .ca-cocuk{fill:var(--altin)}
.ca-g1 .ca-cizgi{stroke-width:8.4}
.ca-g2 .ca-cizgi{stroke-width:4.2}
.ca-g3 .ca-cizgi{stroke-width:2.1}
.ca-agac{transform-box:view-box;transform-origin:48px 88px;transform:scale(.76);animation:ca-agac 3.6s ease-in-out infinite,ca-dongu 3.6s linear infinite}
.ca-dal{transform-box:view-box}
.ca-cocuk{animation:ca-nokta0 3.6s ease-out infinite}
.ca-g1 .ca-cizgi{animation:ca-cizgi1 3.6s ease-out infinite}
.ca-g1 circle{animation:ca-nokta1 3.6s cubic-bezier(.3,1.6,.6,1) infinite}
.ca-g2 .ca-cizgi{animation:ca-cizgi2 3.6s ease-out infinite}
.ca-g2 circle{animation:ca-nokta2 3.6s cubic-bezier(.3,1.6,.6,1) infinite}
.ca-g3 .ca-cizgi{animation:ca-cizgi3 3.6s ease-out infinite}
.ca-g3 circle{animation:ca-nokta3 3.6s cubic-bezier(.3,1.6,.6,1) infinite}
.ca-g2 .ca-dal{animation:ca-topla2 3.6s ease-in infinite}
.ca-g3 .ca-dal{animation:ca-topla3 3.6s ease-in infinite}
@keyframes ca-dongu{0%{opacity:0}4%,93%{opacity:1}100%{opacity:0}}
@keyframes ca-agac{0%,66%{transform:scale(.76)}84%,100%{transform:scale(1)}}
@keyframes ca-nokta0{0%{transform:scale(0)}8%,100%{transform:scale(1)}}
@keyframes ca-cizgi1{0%,6%{stroke-dashoffset:1;opacity:0}7%{opacity:1}20%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes ca-nokta1{0%,15%{transform:scale(0)}23%,100%{transform:scale(1)}}
@keyframes ca-cizgi2{0%,21%{stroke-dashoffset:1;opacity:0}22%{opacity:1}33%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes ca-nokta2{0%,29%{transform:scale(0)}36%,100%{transform:scale(1)}}
@keyframes ca-cizgi3{0%,34%{stroke-dashoffset:1;opacity:0}35%{opacity:1}46%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes ca-nokta3{0%,42%{transform:scale(0)}49%,100%{transform:scale(1)}}
@keyframes ca-topla3{0%,58%{transform:scale(1);opacity:1}69%,100%{transform:scale(0);opacity:0}}
@keyframes ca-topla2{0%,63%{transform:scale(1);opacity:1}76%,100%{transform:scale(0);opacity:0}}

/* Başlıktaki logo: oturumda bir kez çocuk noktasından büyür; üstte bir an
   beliren dede-nine kuşağı ebeveynlere toplanır. Sınıfı index.php koyar. */
.mi-hayalet circle{fill:var(--altin);opacity:0;transform-box:fill-box;transform-origin:center}
.marka-isaret circle{transform-box:fill-box;transform-origin:center}
.marka.ilk .mi-cocuk{animation:mi-nokta .35s ease-out both}
.marka.ilk .mi-cizgi{stroke-dasharray:1 1;animation:mi-cizgi .45s .22s ease-out both}
.marka.ilk .mi-ebeveyn{animation:mi-nokta .3s .6s cubic-bezier(.3,1.6,.6,1) both}
.marka.ilk .mi-hayalet circle{animation:mi-hayalet 1s .78s ease-in-out both}
@keyframes mi-nokta{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes mi-cizgi{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mi-hayalet{0%{opacity:0;transform:scale(0)}35%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:translateY(12px) scale(.2)}}

@media (prefers-reduced-motion:reduce){
  .v-yapiskan{transition:none}
  .catal-anim *,.marka.ilk *{animation:none !important}
  .ca-agac{transform:none}
  .ca-g2,.ca-g3{display:none}
  .catal-anim .ca-cizgi{stroke-dashoffset:0}
}