/* PatiGaga - herkese acik sayfalarin (tanitim, sahiplendirme) ortak yuzu.

   NEDEN AYRI DOSYA: bu kurallar once inc/landing.php icinde satir ici
   <style> blogundaydi. Ikinci bir herkese acik sayfa (sahiplen.php) ayni
   kabugu kullanmaya baslayinca blok iki dosyada birden yasayacakti; tek
   kaynak olmasi icin buraya alindi. styles.css UYGULAMA arayuzunu giydirir,
   bu dosya ise uygulama disindaki tanitim yuzeylerini.

   Olcum: node tools/design-check.mjs <adres> - denetleyici sayfadaki TUM
   stil sayfalarini indirir, bu dosya da dahil. */

/* ---- Olcu ve bosluk ----------------------------------------------------
   .land YALNIZ yatay bosluk verir, diger her blok YALNIZ dikey. Kisayol
   `padding` bu dosyada .land tasiyan bir elemana asla yazilmaz; eski
   duzende tam olarak bu cakisma metni ekran kenarlarina yapistiriyordu. */
.land{max-width:1080px; margin-inline:auto; padding-inline:16px}
.land-narrow{max-width:720px; margin-inline:auto; padding-inline:16px}

/* Tanitim sayfasinda alt sekme cubugu yok; styles.css'teki 70px'lik
   govde bosluğu burada olu alan birakiyordu (body.guest sinifi bu sayfada
   yok, o yuzden sifirlanmiyordu). */
body.landing{padding-bottom:0}

/* ---- Ust bar ---- */
.land-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:1080px; margin-inline:auto; padding-inline:16px; padding-block:14px;
}
.land-brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:18px;
  color:var(--ink); text-decoration:none; flex:0 1 auto; min-width:0}
.land-brand img{width:28px; height:28px; flex:none}
.land-brand span{white-space:nowrap}
.land-nav a.btn{text-decoration:none; white-space:nowrap; flex:none}
.land-nav-right{display:flex; align-items:center; gap:12px; flex:none}
.lang-switch{display:flex; align-items:center; gap:2px; font-size:13px; font-weight:700}
.lang-switch a{
  color:var(--muted); text-decoration:none; padding-block:6px; padding-inline:8px;
  border-radius:8px; line-height:1; min-height:32px; display:flex; align-items:center;
}
.lang-switch a[aria-current]{color:var(--ink); background:var(--panel)}
.lang-switch a:hover, .lang-switch a:focus-visible{color:var(--ink)}

/* ---- Giris bolumu ---- */
.hero{text-align:center; padding-block:28px 34px}
.hero-copy{display:contents}
@media (min-width:900px){
  /* HEPSI ".has-scene" ile SINIRLI. Bu kurallar iki sutunlu sahneli duzene
     aittir: metni sola yaslarlar. Sahnesiz bir hero'da (sahiplen.php, ya da
     sprite seti eksikken tanitim sayfasi) sinirsiz birakilsalardi baslik ve
     dugmeler sola kacar, geri kalan bolum ortada kalirdi. */
  .hero.has-scene{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
    gap:44px; align-items:center; text-align:left; padding-block:44px 52px;
  }
  .hero.has-scene .hero-copy{display:block}
  .hero.has-scene h1, .hero.has-scene p.sub{margin-inline:0}
  .hero.has-scene .hero-cta{justify-content:flex-start}
  .hero.has-scene .hero-trust{align-items:flex-start}
  /* Sutunlar ACIKCA yazilir. grid-row ile ortuk yerlestirme birakilirsa
     tarayici yuvayi ilk bos sutuna koyuyor ve metin saga dusuyordu. */
  .hero.has-scene .hero-copy{grid-column:1}
  .hero.has-scene .sahne{grid-column:2; margin-block:0}
}
.hero h1{
  font-size:clamp(30px,7.5vw,46px); line-height:1.05; letter-spacing:-.03em;
  font-weight:800; margin-block:0 14px; text-wrap:balance;
  max-width:17ch; margin-inline:auto;
}
.hero p.sub{
  color:var(--muted); font-size:clamp(16px,2.4vw,19px); line-height:1.55;
  max-width:48ch; margin-inline:auto; margin-block:0 22px; text-wrap:pretty;
}
.hero-cta{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}
.hero-cta .btn{text-decoration:none; padding-block:14px; padding-inline:24px; font-size:16px}
/* Ikinci eylem bilerek dugme DEGIL: eskiden iki esit dugme vardi ve goz
   nereye gidecegini bilemiyordu. */
.hero-cta .quiet{
  color:var(--ink); text-decoration:none; font-size:16px; font-weight:650;
  border-bottom:2px solid var(--line); padding-bottom:2px;
}
.hero-cta .quiet:hover, .hero-cta .quiet:focus-visible{border-bottom-color:var(--accent)}

/* Karar anindaki guvence: once gizlilik, sonra ucretsizlik. */
.hero-trust{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  margin-block:20px 0; color:var(--muted); font-size:13px; line-height:1.45;
}
.hero-trust .row{display:flex; align-items:center; gap:7px; text-wrap:pretty}
.hero-trust svg{flex:none}

/* ---- Origami yuvasi: BILEREK bos ---- */

/* ---- ORIGAMI SAHNESI --------------------------------------------------
   Kedi sagdan, papagan soldan girer; ~0.95 sn'de ortada kesisirler. Kedi
   insanin ARKASINDAN gecer (bacak arasindan gorunur), one cikip yanina
   yerlesir, once kuyrugunu diker sonra oturup adama bakar. Papagan omzu
   asip geri doner ve konar. En sonda insan basini kusa cevirip gulumser.

   OLCU NOTLARI (goz karari degil, olculdu):
   - Kedi/papagan insanin ~%24'u. Gercek oran %17 olurdu ama o boyutta
     tasma, kat ve gaga hic okunmuyor; kullanici onayiyla 1.4 kat.
   - Ayni sprite'a ayni yukseklik verilemez: govdenin kutu icindeki payi
     pozdan poza degisiyor (yuruyen %79, duran %67, oturan %86). Govdeler
     ekranda esit gorunsun diye yukseklikler 72 / 84 / 65.5 px.
   - Insanin uc pozu farkli genislikte; sabit hizalama figuru "tik" diye
     sicratiyordu. Uc poz da GOVDE merkezinden hizalanir.
   - animation bir KISAYOL: ayni elemana iki kural yazilirsa sonraki
     oncekini tamamen ezer. Yer degistirme KAPSAYICIDA, poz degisimi
     RESIMDE durur; ilk denemede kedi bu yuzden hic hareket etmemisti. */
.sahne{
  position:relative; width:100%; max-width:420px; height:266px;
  margin-inline:auto; overflow:hidden;
}
/* max-width:none SART. styles.css'te uygulama geneli `img{max-width:100%}`
   var; kedi ve papagan GENISLIGI SIFIR olan bir katmanin (.s-kedi-bob,
   .s-kus-y - icinde yalnizca mutlak konumlu resim oldugu icin 0 genislik)
   icinde durdugundan %100 sifire esitleniyor ve resimler eziliyordu.
   Olculdu: getBoundingClientRect().width = 0. Insan etkilenmiyordu, cunku
   onun kapsayicisi 420px'lik sahnenin kendisi. */
.sahne img{position:absolute; bottom:0; max-width:none; width:auto}

.s-insan{height:234px; left:50%; z-index:2; opacity:0}
.s-insan.duz{opacity:1}
.s-insan.duz       {margin-left:-55.7px}
.s-insan.donuk     {margin-left:-55.0px}
.s-insan.gulumseyen{margin-left:-55.1px}

/* KONUMLAR OLCULDU, goz karari degil. insan-gulumseyen sprite'inin alfa
   kanali tarandi: omuz satiri 136/600 (govde genisliginin aniden %55'i
   astigi yer), bacaklarin sol kenari 24/285. Sahnedeki olcekle (234/600)
   carpilinca omuz dipten 181px, bacak sol kenari yatayda 164px cikiyor.
   Kedi sag kenari 174'e gelecek sekilde konur: bacagin 10px onune biner. */
.s-kedi-x{position:absolute; bottom:0; left:50%; margin-left:-69px; z-index:3}
.s-kedi-bob{position:relative}
.s-kedi{z-index:1}
.s-kedi-yur {height:56px}
.s-kedi-dur {height:65.5px;   transform:scaleX(-1)}
.s-kedi-otur{height:51px; transform:scaleX(-1)}

.s-kus-x{position:absolute; bottom:159px; left:50%; margin-left:34px}
.s-kus-y{position:relative}
.s-kus{z-index:4}
.s-kus.ucus{height:50px}
.s-kus.tunek{height:45px; transform:scaleX(-1)}

.sahne .s-kedi-x  {animation:s-kedi-x 2.98s cubic-bezier(.22,.75,.3,1) .085s both,
                             s-kedi-on 2.98s steps(1,end) .085s both}
.sahne .s-kedi-bob{animation:s-kedi-bob 2.98s linear .085s both}
.sahne .s-kedi-yur {animation:s-kedi-yur  2.98s steps(1,end) .085s both}
.sahne .s-kedi-dur {animation:s-kedi-dur  2.98s steps(1,end) .085s both}
.sahne .s-kedi-otur{animation:s-kedi-otur 2.98s steps(1,end) .085s both}
.sahne .s-kus-x{animation:s-kus-x 2.64s cubic-bezier(.25,.7,.3,1) .204s both}
.sahne .s-kus-y{animation:s-kus-y 2.64s .204s both}
.sahne .kanat-y{animation:s-kanat-y 2.64s steps(1,end) .204s both}
.sahne .kanat-a{animation:s-kanat-a 2.64s steps(1,end) .204s both}
.sahne .tunek  {animation:s-tunek   2.64s steps(1,end) .204s both}
.sahne .s-insan.duz       {animation:s-insan-duz   3.74s steps(1,end) both}
.sahne .s-insan.donuk     {animation:s-insan-donuk 3.74s steps(1,end) both}
.sahne .s-insan.gulumseyen{animation:s-insan-gul   3.74s steps(1,end) both}

/* Taban z-index 3: hareket kapaliyken kedi ONDE kalmali. Animasyon
   basta 1e ceker (insanin arkasindan gecer), 69%te tekrar 3e cikarir. */
@keyframes s-kedi-on{ 0%{z-index:1} 68%{z-index:1} 69%{z-index:3} 100%{z-index:3} }
@keyframes s-kedi-x{
  0%{transform:translateX(265px)} 62%{transform:translateX(30px)} 100%{transform:translateX(0)}
}
@keyframes s-kedi-bob{
  0%,100%{transform:translateY(0)}
  10%{transform:translateY(-2.3px)} 20%{transform:translateY(0)}
  30%{transform:translateY(-2.3px)} 40%{transform:translateY(0)}
  50%{transform:translateY(-1.6px)} 60%{transform:translateY(0)}
  70%{transform:translateY(-0.8px)} 80%{transform:translateY(0)}
}
@keyframes s-kedi-yur { 0%{opacity:1} 79%{opacity:1} 80%{opacity:0} 100%{opacity:0} }
@keyframes s-kedi-dur { 0%{opacity:0} 79%{opacity:0} 80%{opacity:1} 90%{opacity:1} 91%{opacity:0} 100%{opacity:0} }
@keyframes s-kedi-otur{ 0%{opacity:0} 90%{opacity:0} 91%{opacity:1} 100%{opacity:1} }

@keyframes s-kus-x{
  0%{transform:translateX(-257px)} 30%{transform:translateX(-148px)}
  55%{transform:translateX(-55px)} 80%{transform:translateX(20px)}
  100%{transform:translateX(0)}
}
@keyframes s-kus-y{
  0%  {transform:translateY(-31px); animation-timing-function:cubic-bezier(.5,0,.75,.45)}
  30% {transform:translateY(27px);  animation-timing-function:cubic-bezier(.4,0,.3,1)}
  55% {transform:translateY(47px);  animation-timing-function:cubic-bezier(.35,0,.2,1)}
  80% {transform:translateY(-12px); animation-timing-function:cubic-bezier(.22,1,.3,1)}
  100%{transform:translateY(0)}
}
@keyframes s-kanat-y{
  0%{opacity:1} 6%{opacity:0} 12%{opacity:1} 18%{opacity:0} 24%{opacity:1}
  30%{opacity:0} 36%{opacity:1} 42%{opacity:0} 48%{opacity:1} 54%{opacity:0}
  60%{opacity:1} 66%{opacity:0} 72%{opacity:1} 78%{opacity:0} 88%{opacity:0} 100%{opacity:0}
}
@keyframes s-kanat-a{
  0%{opacity:0} 6%{opacity:1} 12%{opacity:0} 18%{opacity:1} 24%{opacity:0}
  30%{opacity:1} 36%{opacity:0} 42%{opacity:1} 48%{opacity:0} 54%{opacity:1}
  60%{opacity:0} 66%{opacity:1} 72%{opacity:0} 78%{opacity:1} 87%{opacity:1}
  88%{opacity:0} 100%{opacity:0}
}
@keyframes s-tunek{ 0%{opacity:0} 87%{opacity:0} 88%{opacity:1} 100%{opacity:1} }
@keyframes s-insan-duz  { 0%{opacity:1} 72%{opacity:1} 73%{opacity:0} 100%{opacity:0} }
@keyframes s-insan-donuk{ 0%{opacity:0} 72%{opacity:0} 73%{opacity:1} 84%{opacity:1} 85%{opacity:0} 100%{opacity:0} }
@keyframes s-insan-gul  { 0%{opacity:0} 84%{opacity:0} 85%{opacity:1} 100%{opacity:1} }

/* ---- Bolum baslik kalibi ---- */
section.land-section{padding-block:40px}
.sec-head{text-align:center; max-width:52ch; margin-inline:auto; margin-block:0 26px}
.sec-head h2{font-size:clamp(21px,3.4vw,28px); line-height:1.15; letter-spacing:-.02em;
  margin-block:0 8px; text-wrap:balance}
.sec-head p{color:var(--muted); font-size:16px; line-height:1.55; margin:0; text-wrap:pretty}

/* ---- Tur seridi: en ayirt edici cumle, artik altyazi degil ---- */
.species{
  background:var(--panel); border-radius:18px; padding:24px 20px; text-align:center;
  border:1px solid var(--line);
}
.species h2{font-size:clamp(21px,3vw,26px); letter-spacing:-.02em; margin-block:0 8px}
.species p{color:var(--muted); font-size:16px; line-height:1.55; max-width:46ch;
  margin-inline:auto; margin-block:0}

/* ---- One cikan: bakim rehberi ---- */
.lead{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px 20px 24px; box-shadow:var(--shadow);
}
.lead h3{font-size:clamp(18px,2.6vw,22px); letter-spacing:-.02em; margin-block:0 8px}
.lead p{color:var(--muted); font-size:16px; line-height:1.6; margin-block:0; max-width:56ch}
.lead .src{display:flex; flex-wrap:wrap; gap:6px; margin-block:14px 0}
.lead .src span{
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ok);
  background:color-mix(in srgb, var(--ok) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius:999px; padding-block:3px; padding-inline:9px;
}
.lead .warn{color:var(--muted); font-size:13px; line-height:1.5; margin-block:12px 0}

/* ---- Uc destek maddesi: kutu degil, satir ---- */
.rows{display:grid; gap:2px; margin-block:16px 0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line)}
.row-item{background:var(--card); display:flex; gap:13px; align-items:flex-start;
  padding-block:15px; padding-inline:17px}
/* Baslik SEVIYESI sayfaya gore degisir: tanitim sayfasinda bu satirlar bir
   h3 basliginin altinda durur (h4 dogru), sahiplen.php'de dogrudan h2'nin
   altinda (h3 dogru - yoksa seviye atlanir ve ekran okuyucuda yapi kirilir).
   Gorunum ikisinde de ayni. */
.row-item h4, .row-item h3{font-size:16px; letter-spacing:-.01em; margin-block:0 3px}
.row-item p{color:var(--muted); font-size:14px; line-height:1.5; margin:0}
.row-item .ico{width:26px; height:26px; flex:none}

/* ---- Gizlilik: istekten ONCE, kart sirasinda degil ---- */
.privacy{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px 20px; box-shadow:var(--shadow);
  display:flex; gap:15px; align-items:flex-start;
}
.privacy svg{flex:none}
.privacy h3{font-size:clamp(18px,2.4vw,21px); letter-spacing:-.015em; margin-block:0 7px}
.privacy p{color:var(--muted); font-size:16px; line-height:1.6; margin:0; max-width:52ch}

/* ---- Uc adim ---- */
.steps{display:grid; grid-template-columns:1fr; gap:16px; counter-reset:step}
.step{display:flex; gap:14px; align-items:flex-start}
.step .num{
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none;
}
.step h3{font-size:16px; letter-spacing:-.01em; margin-block:0 4px}
.step p{color:var(--muted); font-size:14px; line-height:1.5; margin:0}

/* ---- SSS ---- */
.faq-item{border-bottom:1px solid var(--line)}
/* Dokunma hedefi: dolgu SUMMARY'de olmali. Eskiden .faq-item (details)
   uzerindeydi, yani tiklanabilir alanin DISINDA kaliyordu ve alti soru da
   yalnizca 20px yuksekligindeydi (olculdu). */
.faq-item summary{
  font-weight:650; font-size:16px; line-height:1.45; cursor:pointer; list-style:none;
  padding-block:15px; padding-inline:34px 0; position:relative; min-height:24px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:''; position:absolute; left:6px; top:50%; width:11px; height:11px;
  margin-top:-6px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq-item p{color:var(--muted); font-size:16px; line-height:1.6;
  margin-block:0 16px; padding-inline:34px 0; max-width:62ch}

/* ---- Sahiplendirme: silinmedi, tek sakin satira indi ---- */
.aside-line{
  text-align:center; color:var(--muted); font-size:16px; line-height:1.6;
  padding-block:8px; text-wrap:pretty;
}
.aside-line a{color:var(--accent); font-weight:650}

/* ---- Kapanis ---- */
.final-cta{text-align:center; padding-block:44px 52px; border-top:1px solid var(--line)}
.final-cta h2{font-size:clamp(21px,3.4vw,28px); letter-spacing:-.02em;
  margin-block:0 18px; text-wrap:balance; max-width:20ch; margin-inline:auto}
.final-cta .btn{text-decoration:none; padding-block:14px; padding-inline:26px; font-size:16px}

/* ---- Sahiplendirme sayfasi (sahiplen.php) ------------------------------
   Kendi gorunumunu KURMAZ: hero, .steps/.step/.num, .rows/.row-item,
   .privacy, .aside-line ve .final-cta yukaridan aynen gelir. Asagidaki uc
   kural o kalipta karsiligi olmayan tek uc sey icin. */

/* Sira listesi olarak yazilan adimlar (ol.steps): adimlar birbirini izledigi
   icin gercek bir liste, ama gorunumu tanitim sayfasindakiyle ayni kalir. */
ol.steps{list-style:none; margin:0; padding:0}

/* Hesap sarti. CTA dugmelerinin hemen ALTINDA durur: ziyaretci "ilanlara
   goz at" bekleyip kayit ekraniyla karsilasmasin. Dipnot kadar silik degil,
   .hero-trust ile ayni sakinlikta. */
.hero-note{
  color:var(--muted); font-size:14px; line-height:1.55; text-wrap:pretty;
  max-width:48ch; margin-inline:auto; margin-block:20px 0;
}

/* Sokakta bulunan can dostu uyarisi. Zemin/kenar cifti styles.css .notice
   bandindan alindi (#fff6e6 / #f0d9a8): uyari dili sitede tek turlu.
   Kontrast olculdu: --ink #3a2c22 uzerinde 12.52:1. */
.warn-card{
  background:#fff6e6; border:1px solid #f0d9a8; border-radius:16px;
  padding:18px 20px;
}
.warn-card h3{font-size:clamp(17px,2.2vw,20px); letter-spacing:-.015em; margin-block:0 8px}
.warn-card p{margin:0; font-size:15px; line-height:1.6; text-wrap:pretty}

@media (min-width:700px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .rows{grid-template-columns:repeat(3,1fr)}
  .row-item{flex-direction:column; gap:10px}
}

/* styles.css .site-foot varsayilan gizli: yalniz "body.guest" ekraninda
   gosteriliyor. Bu sayfada sekme cubugu yok, footer hep gorunmeli. */
.site-foot{
  display:flex!important; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
  padding-block:22px calc(24px + env(safe-area-inset-bottom)); padding-inline:16px;
  font-size:13px; color:var(--muted); text-align:center;
}
/* Dokunma hedefi: alt bilgi baglantilari 17px yuksekligindeydi, WCAG 2.5.8
   (AA) en az 24x24 CSS px istiyor ve bunlar bir cumlenin ICINDE gecen
   baglantilar degil, tek baslarina duran hedefler - istisnaya girmiyorlar.
   Dolgu ile 29px oluyorlar. SSS basliklarinda ayni duzeltme yapilmisti. */
.site-foot a{color:var(--muted); text-decoration:underline;
  display:inline-block; padding-block:6px}
.site-foot a:hover, .site-foot a:focus-visible{color:var(--ink)}