/* Aily — acilis sayfasi
   Uretilmis dosya DEGIL, elle duzenlenir. index.html ve belge sayfalari
   ayni temel.css'i paylasir; ortak bir kurali degistirmek icin tek yer. */
/* ---------- hero ----------
   Iki kolon: metin solda, urun sagda. Ekranlar alta konunca sayfa asiri
   uzuyordu ve ilk ekranda ne oldugu gorunmuyordu; yan yana durunca "ne bu"
   ve "neye benziyor" ayni bakista cevaplaniyor.

   Baslik olcegi kasten dusuruldu: 5.75rem'de cumle uc satira boluniyor ve
   okunmasi zorlasiyordu. Amac cumlenin buyuk olmasi degil, anlasilmasi. */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-25%;right:-8%;width:72%;height:125%;
  pointer-events:none;background:radial-gradient(44% 46% at 58% 46%,var(--teal-soft),transparent 68%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(3rem,6vw,5rem) clamp(3rem,6vw,5.25rem)}
.hero h1{font-size:var(--t-hero)}
.hero h1 span.hl{color:var(--teal)}
.hero .sub{margin-top:1.5rem;font-size:clamp(1.0313rem,1.25vw,1.125rem);line-height:1.6;
  color:var(--ink-2);max-width:33ch}
.hero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2rem}
.hero .label{margin-bottom:1rem}

/* Uc ekran ust uste: harita onde, digerleri arkada ve biraz kucuk.

   Ekranlarin PIKSEL yuksekligi esit degil: harita 1688, bildirimler 1730,
   kisi 2358 (uzun, kaydirmali bir ekran). Yukseklige gore olceklenince kisi
   106px'lik bir seride dusuyor ve kirik gorunuyordu. Cozum: hepsine gercek
   telefon orani verilir, genislik belirlenir, tasan kisim alttan kirpilir —
   telefonun kendisi de zaten o kadarini gosteriyor. */
.stage{position:relative;display:flex;justify-content:center;align-items:center}

/* Ust uste binen ekranlar birbirini KELIMENIN ORTASINDAN kesiyordu: arkadaki
   telefonda "...urk Ilkokulu", "...ve gel" gibi yarim kelimeler goruluyor ve
   goruntu bozukmus gibi okunuyordu. Iki duzeltme:
     1) her ekranin cevresinde sayfa zemini renginde bir halka — cihaz kenari
        belirgin olunca ortusme "bozuk" degil "ust uste duran kartlar" okunur;
     2) arkadakiler dikeyde kaydiriliyor, boylece kesisen alan kuculuyor.
   Halka box-shadow ile veriliyor; border duzeni kaydirirdi. */
.stage img{flex:none;height:auto;aspect-ratio:780/1688;object-fit:cover;object-position:top center;
  border-radius:24px;box-shadow:0 0 0 5px var(--bg),var(--lift)}
/* OLCEK ve COZUNURLUK.
   Kaynaklar Pencil'dan 3x cikarildi: 1170px genislik, WebP. Onceki 2x/780px
   surumde HiDPI ekranda telefon dusuk cozunurluklu gorunuyordu — 340 CSS px
   bir 3x ekranda 1020 cihaz pikseli ister, 780 kaynak bunu karsilamiyordu.
   1170 uc katina kadar keskin. WebP sayesinde dosyalar 2x PNG'lerin YARISI.
   Ayrica uc kucuk ekran yerine IKI buyuk ekran: kucuk olcekte uygulamanin
   15px'lik yazisi ~8px'e dusup bulamaca donusuyordu. */
.stage img{width:auto}
/* Tek ekran. Iki telefon ust uste konunca arkadaki kelimelerin ortasindan
   kesiliyor ve bozuk gorunuyordu; referans tasarimlarda da tek urun yuzeyi
   var, zenginligi ustune tasan kartlar veriyor. */
.stage .front{height:clamp(400px,52vh,580px);z-index:2;transform:translateZ(0)}

/* Telefonun uzerine tasan kartlar.

   ONEMLI: kartlar `.stage`e degil `.device`e gore konumlanir. Once `.stage`e
   gore konumlaniyorlardi — `.stage` tum izgara sutunu kadar genis oldugu icin
   `left:-4%` telefondan yuzlerce piksel uzaga dusuyordu ve kartlar ekranin
   uzerinde degil ortalikta geziyor gibi duruyordu. `.device` tam telefon
   boyutunda; yuzdeler artik telefonun kendi olcusune gore.

   Hareket CSS ile: her kart farkli periyotta suzuluyor, ayni anda ayni yone
   gitmesinler diye sureler ve gecikmeler kasten uyusmaz. JS yalniz fare
   yakinliginda kucuk bir kayma ekliyor (asagida) — surekli animasyonu JS ile
   surmek ana is parcacigini bosuna mesgul ederdi. */
.stage{isolation:isolate}
.device{position:relative;display:inline-block;line-height:0}

/* UC AYRI KATMAN — bu bolunme sart.
   Basta tek katman vardi: `drift` animasyonu ve JS'in yazdigi `--px/--py`
   ayni `transform` icinde topluyordu. Ozel ozellik her degistiginde tarayici
   animasyonu bastan hesapliyor ve kart titriyordu. Her isi kendi katmanina
   verince ic ice transformlar sorunsuz birlesiyor:
     .float  -> konum (top/left/right/bottom), `data-i` ile degisir
     .par    -> fare kaymasi, aninda
     .fin    -> surekli suzulme + degisim sonmesi
   Kart yer degistirirken GORUNMEZ oldugu icin konuma gecis animasyonu
   gerekmiyor: soner, yeni yerinde yanar. Yer degisimi degisimin fark
   edilmesini sagliyor — yalniz ici degisince kimse anlamiyordu. */
.float{position:absolute;z-index:3}
/* Fare kaymasini bu katman tasiyor ve transform'u JS DOGRUDAN yaziyor
   (ozel ozellik uzerinden degil): `--px` gibi bir degiskeni degistirmek
   her karede stil yeniden hesabi tetikler ve kart kipirdar. Dogrudan
   `style.transform` yazildiginda ve katman `will-change` ile derleyiciye
   verildiginde hareket dokuyu tasimaktan ibaret kalir. */
.float .par{transform:translate3d(0,0,0);will-change:transform}
.float .fin{display:grid;
  background:var(--bg);border-radius:14px;padding:.7rem 1rem;
  box-shadow:0 1px 2px rgba(8,23,26,.06),0 18px 34px -14px rgba(8,23,26,.32);
  white-space:nowrap;opacity:1;
  transition:opacity .26s ease;
  animation:drift var(--dur) ease-in-out var(--delay) infinite}
.float[data-swap] .fin{opacity:0}

.float .msg{grid-area:1/1;display:flex;align-items:center;gap:.7rem;
  opacity:0;pointer-events:none}
.float .msg[data-on]{opacity:1}
.float b{display:block;font-size:.8125rem;font-weight:650;letter-spacing:-.01em;line-height:1.35}
.float i{display:block;margin-top:.2rem;font-size:.75rem;font-style:normal;
  color:var(--ink-3);line-height:1.4}
.float .av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;background:var(--teal-soft)}
.float .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.float .ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal)}
.float .ic svg{width:16px;height:16px}
/* SOS kirmizi: sayfadaki tek uyari rengi, gerektigi yerde. */
.float .ic.sos{background:#FDECEC;color:#C1362F}

@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}

/* Konumlar telefonun kenarlarina gore. Her mesajin kendi yeri var; kart
   degisince telefonun cevresinde dolasiyor. */
.f-arrive{--dur:5.5s;--delay:0s}
.f-arrive[data-i="0"]{top:13%;left:-60%}
.f-arrive[data-i="1"]{top:37%;left:-70%}
.f-arrive[data-i="2"]{top:3%;left:-44%}

.f-alert{--dur:6.8s;--delay:-2.2s}
.f-alert[data-i="0"]{bottom:17%;left:-64%}
.f-alert[data-i="1"]{bottom:3%;left:-50%}
.f-alert[data-i="2"]{bottom:32%;left:-72%}

.f-pause{--dur:6.1s;--delay:-4s}
.f-pause[data-i="0"]{top:2%;right:-54%}
.f-pause[data-i="1"]{top:24%;right:-64%}

@media (max-width:1040px){
  .float{padding:.5rem .7rem}
  .f-arrive[data-i="0"]{left:-42%} .f-arrive[data-i="1"]{left:-48%} .f-arrive[data-i="2"]{left:-30%}
  .f-alert[data-i="0"]{left:-46%} .f-alert[data-i="1"]{left:-34%} .f-alert[data-i="2"]{left:-52%}
  .f-pause[data-i="0"]{right:-38%} .f-pause[data-i="1"]{right:-46%}
}
@media (max-width:560px){
  /* Dar ekranda kartlar telefonu orter; yalniz biri kaliyor. */
  .f-arrive,.f-pause{display:none}
  .f-alert[data-i="0"]{bottom:10%;left:-20%}
  .f-alert[data-i="1"]{bottom:2%;left:-12%}
  .f-alert[data-i="2"]{bottom:22%;left:-24%}
}
@media (prefers-reduced-motion:reduce){.float .fin{animation:none;transition:none}}

/* Guven seridi.
   Onceki hali ince bir cizginin altinda serbest duran uc metindi: esit
   olmayan genislikler, soluk gri, hicbir kapsayici — dipnot gibi okunuyordu.
   Oysa bu satir sayfanin en cok soz veren yeri (7 gun, reklam yok, iki
   platform) ve hero'yu kapatiyor.

   Simdi kendi zeminine sahip bir serit: uc esit kolon, aralarinda ince dikey
   ayrac, ilk satir koyu ve iri. Cizgi yerine ZEMIN kullanildi — bolum
   sinirlarinda cizgileri kaldirdik, burada geri getirmek tutarsiz olurdu. */
.trust{grid-column:1/-1;margin-top:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--bg-2);border-radius:18px;overflow:hidden}
/* Ikon, baslik ile alt metnin OLUSTURDUGU BLOGUN dikey ortasinda.
   Once ilk satira hizaliydi; iki satirlik metnin yaninda yukari kacmis
   duruyordu. `center` hem iki hem uc satirlik cevirilerde dogru kaliyor. */
.trust > div{padding:clamp(1.15rem,2vw,1.5rem) clamp(1.15rem,2.2vw,1.75rem);
  font-size:.875rem;line-height:1.45;color:var(--ink-2);
  display:flex;align-items:center;gap:.75rem}
/* Ayrac yalniz kolonlarin ARASINDA; kenarlarda cizgi olmasin.
   `inset 1px` FIZIKSEL sol demek — sagdan sola dillerde kolonlar ters
   siralaniyor ve ayrac yanlis kenara dusuyordu. `border-inline-start`
   yonu `dir`den aliyor. */
.trust > div + div{border-inline-start:1px solid var(--line)}
.trust b{display:block;margin-bottom:.3rem;color:var(--ink);
  font-weight:700;font-size:1.0625rem;letter-spacing:-.02em}
/* Ikon KUTUSUZ. Yuvarlak zeminli ikon rozetleri sayfayi jenerik yapiyordu
   (bkz. site-tasarim-notlari.md); burada yalniz cizgi isareti var.
   Satir kutusunun ustune degil, ilk satirin OPTIK ortasina hizalanmasi icin
   kucuk bir ust bosluk veriliyor. */
.trust .ti{width:34px;height:34px;flex:none;color:var(--teal)}

/* ---------- ikon dili: ELLE CIZILMIS, IKI TONLU ----------
   Geometrik primitif (`<circle>`, `<rect>`) yok: kusursuz daire ve dikdortgen
   sayfanin sicak dilinin yaninda makine isi duruyordu. Ikonlar serbest
   bezier; cizgi baslangici bitisini birazcik kaciriyor, kenarlar hafif
   duzensiz — kalemle cizilmis izlenimi buradan geliyor.

   IKI TON, IKI AYRI RENK: `.ln` murekkep (`--ink`), `.fl` ise ikonun
   `color`'undan gelen duz renk. Dolgu cizginin ALTINDA ve BILEREK KAYIK —
   ofset baskidaki hatali cakisma gibi. Kusursuz hizalarsan iki ton tek
   sekil gibi duruyor ve elle cizilmislik kayboluyor; asil etki bu kaymada.

   Bu yuzden ikonlar KUCUK OLAMAZ: jest, kayma ve duzensiz kenar 20 pikselde
   camura donuyor. Trust seridinde 34, adim listesinde 34 pikselde duruyorlar. */
.ti .fl{fill:currentColor;opacity:.30;stroke:none}
.ti .ln{fill:none;stroke:var(--ink);stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- android test duyurusu (GECICI) ----------
   Android acik testte oldugu surece duruyor; yayina cikinca BU BLOK,
   `index.html`'deki `.beta` bolumu ve `gecici.*` anahtarlari birlikte
   silinecek.

   TASARIM: dikkat cekmesi gerekiyor (Android testcisi ariyoruz) ama sayfanin
   kurallarini bozmadan. Ikon rozeti YOK, kart YOK, golge YOK. Dikkat iki
   seyden geliyor:
     1. Kendi zemini — `--teal-soft`, paketler bolumunun zemini. Beyaz
        kahramanla koyu manifesto arasinda duran tek sicak serit.
     2. OLCEK KARSITLIGI — iri baslik, yaninda kucuk ve sakin adimlar.
        Sayfanin hiyerarsi kurma bicimi bu (site-tasarim-notlari.md, 5. karar).
   Adim isaretleri `aria-hidden`: sirayi ekran okuyucuya `<ol>` zaten veriyor. */
.beta{background:var(--teal-soft)}
.beta .wrap{padding-block:clamp(2.75rem,5vw,4rem);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.beta h2{margin:1.15rem 0 0;font-size:clamp(1.6rem,3.2vw,2.35rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink);max-width:16ch}
.beta-note{margin:1rem 0 0;font-size:.875rem;line-height:1.55;color:var(--ink-3);max-width:34ch}

/* Dugme magaza rozetleriyle ayni kalip: siyah zemin, 12px yuvarlaklik.
   Yeni bir gorsel dil degil — sayfada "basilacak sey" boyle gorunuyor. */
.beta-btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;
  padding:.8rem 1.35rem;border-radius:12px;background:#000;color:#fff;
  font-size:.9375rem;font-weight:650;letter-spacing:-.01em;text-decoration:none;
  transition:transform .18s,box-shadow .18s}
.beta-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(13,21,24,.7)}
/* Koyu temada zemin de (`--teal-soft` = #122A30) neredeyse siyah;
   dugmenin kenari kayboluyordu. Sac teli bir cerceve onu geri getiriyor. */
@media (prefers-color-scheme:dark){
  .beta-btn{border:1px solid rgba(255,255,255,.16)}
}
.beta-btn svg{width:17px;height:17px;flex:none;transition:translate .18s}
.beta-btn:hover svg{translate:3px 0}
/* Ok yon tasiyor: sagdan sola dillerde aynalanir ve ittirme yonu de doner. */
[dir=rtl] .beta-btn svg{scale:-1 1}
[dir=rtl] .beta-btn:hover svg{translate:-3px 0}

.beta-adim{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.1rem,2.4vw,1.75rem)}
.beta-adim li{display:flex;align-items:flex-start;gap:clamp(.9rem,2vw,1.35rem)}
/* Adim isareti: ciplak cizgi ikon, trust seridiyle ayni dil. Yuvarlak
   zeminli rozet YOK. Metnin ilk satirinin optik ortasina hizalansin diye
   kucuk bir ust bosluk. */
.beta-adim .ti{flex:none;width:34px;height:34px;margin-top:.1rem;color:var(--teal)}
.beta-adim b{display:block;margin-bottom:.25rem;color:var(--ink);
  font-weight:700;font-size:1.0625rem;letter-spacing:-.02em}
.beta-adim li > span:last-child > span{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}

/* ---------- manifesto ---------- */
.creed{position:relative;overflow:hidden;background:var(--deep);color:#EAF6F7}
.creed::before{content:"";position:absolute;inset:auto -10% -50% 20%;height:100%;pointer-events:none;
  background:radial-gradient(40% 50% at 50% 50%,rgba(95,195,212,.16),transparent 70%)}
.creed .wrap{position:relative;padding-block:clamp(5rem,10vw,8.5rem)}
/* Başlığın sağı boştu. Oraya salt fotoğraf koymak süs olurdu — bu bölüm bir
   iddia ortaya atıyor ("paylaşımı durdurursan herkes öğrenir"), yanına o
   iddianın KANITI gelmeli. Karma kolaj: iki fotoğraf + ürünün kendi bildirimi.
   Fotoğraflar sıcaklığı, bildirim kartı doğruluğu taşıyor. */
.creed .top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.creed .label{color:var(--on-deep)}
.creed h2{font-size:var(--t-sec);margin:1.25rem 0 0;max-width:20ch;color:#fff}
.creed .say{margin-top:1.5rem;font-size:1.0625rem;line-height:1.65;color:rgba(234,246,247,.7);max-width:46ch}
.collage{position:relative;aspect-ratio:1/.86}
.collage img{position:absolute;object-fit:cover;border-radius:18px;
  background:linear-gradient(140deg,rgba(143,217,229,.16),rgba(143,217,229,.05));
  box-shadow:0 24px 48px -22px rgba(0,0,0,.6)}
.collage .c1{left:0;top:0;width:56%;aspect-ratio:4/5}
.collage .c2{right:0;top:9%;width:40%;aspect-ratio:1}
/* Kanıt kartı: iddianın gerçek karşılığı. Aydınlık zeminde, koyu bandın
   üzerinde duruyor — göze ilk çarpan öğe o olsun. */
.collage .proof{position:absolute;left:14%;bottom:0;width:72%;
  display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;
  background:var(--bg);color:var(--ink);border-radius:14px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.65)}
.collage .proof .ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;
  place-items:center;background:var(--teal-soft);color:var(--teal)}
.collage .proof .ic svg{width:17px;height:17px}
.collage .proof b{display:block;font-size:.8438rem;font-weight:650;line-height:1.35}
.collage .proof i{display:block;margin-top:.2rem;font-style:normal;font-size:.7813rem;
  color:var(--ink-3);line-height:1.4}

.creed .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2.75rem,5vw,4.5rem)}
.creed .pt{padding-top:1.4rem;border-top:2px solid color-mix(in srgb,var(--on-deep) 35%,transparent)}
.creed .pt b{display:block;font-size:1.0625rem;font-weight:650;color:#fff;letter-spacing:-.01em}
.creed .pt span{display:block;margin-top:.6rem;font-size:.9375rem;line-height:1.55;color:rgba(234,246,247,.62)}

/* ---------- özellik ızgarası ----------
   Ekranlar bir onceki surumde `position:absolute` idi ve bloklarin ustune
   tasiyordu: metinle ust uste biniyor, telefonun ortasindan kirpiliyordu.
   Simdi her ekran kendi KIRPMA PENCERESI icinde ve akista duruyor —
   pencere yuksekligi ne kadar gorunecegini belirliyor, telefon o pencerenin
   alt kenarindan tasarak cikiyor. Metinle carpismasi mumkun degil. */
.grid-sec{border-top:1px solid var(--line)}
.grid-sec .wrap{padding-block:clamp(4.5rem,9vw,8rem)}
.grid-head{max-width:34rem;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.grid-head h2{font-size:var(--t-sec);margin-top:1.15rem}

.mosaic{display:grid;gap:1rem;
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:"a a a a b b" "c c d d b b"}
.blk{position:relative;overflow:hidden;border-radius:22px;background:var(--bg-2);
  border:1px solid var(--line)}
.blk.a{grid-area:a} .blk.b{grid-area:b} .blk.c{grid-area:c} .blk.d{grid-area:d}
.blk .pad{padding:clamp(1.6rem,2.6vw,2.25rem)}
.blk h3{font-size:var(--t-blk);margin-top:.8rem;letter-spacing:-.025em}
.blk p:not(.label){margin-top:.75rem;font-size:.9688rem;line-height:1.6;color:var(--ink-2)}

/* Kirpma penceresi: telefon ustten hizali, pencerenin altindan tasiyor. */
.shotbox{position:relative;display:flex;justify-content:center}
.shotbox img{flex:none;width:var(--w);height:auto;aspect-ratio:780/1688;
  object-fit:cover;object-position:top center}

/* A — yatay: metin solda, ekran sağda, sağ kenardan taşıyor. */
.blk.a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:center;
  background:linear-gradient(135deg,var(--bg-2) 45%,var(--teal-soft))}
.blk.a .shotbox{--w:clamp(160px,17vw,228px);align-self:end;justify-content:flex-end;
  height:clamp(210px,20vw,270px);padding-right:clamp(.75rem,1.6vw,1.75rem)}
.blk.a .shotbox img{border-radius:20px 20px 0 0;box-shadow:0 -8px 34px -14px rgba(8,23,26,.4)}

/* B — dikey: metin üstte, ekran altta, alt kenardan taşıyor. */
.blk.b{display:flex;flex-direction:column}
.blk.b .shotbox{--w:clamp(196px,21vw,278px);margin-top:auto;
  height:clamp(230px,25vw,340px)}
.blk.b .shotbox img{border-radius:20px 20px 0 0;box-shadow:0 -8px 34px -14px rgba(8,23,26,.4)}

/* C — koyu blok. Dört açık kart yan yana durunca ızgara tekdüze oluyordu. */
.blk.c{background:var(--deep);border-color:var(--deep);color:#EAF6F7}
.blk.c .num{font-size:3rem;font-weight:700;letter-spacing:-.05em;color:var(--on-deep);line-height:1}
.blk.c p{color:rgba(234,246,247,.66)}

/* D — alıntı bloğu: uygulamanın kendi cümlesi. */
.blk.d{background:var(--bg)}
.blk.d .pad::before{content:"";display:block;width:26px;height:2px;border-radius:2px;
  background:var(--teal);margin-bottom:1.1rem}
.blk.d .quote{font-size:1.1875rem;line-height:1.45;font-weight:650;letter-spacing:-.02em}
.blk.d .who{margin-top:.9rem;font-size:.875rem;color:var(--ink-3);line-height:1.55}

/* ---------- fotoğraf bandı ---------- */
.band{background:var(--bg-2)}
.band .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(4.5rem,9vw,8rem)}
.band h2{font-size:var(--t-sec);margin-top:1.15rem;max-width:15ch}
.band p:not(.label){margin-top:1.25rem;font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:36ch}
/* Fotograf alanlari.
   Dosya yoksa `onerror` src'yi dusurur; geriye yumusak marka zemini kalir ve
   sayfa bozulmaz. Boylece Codex gorselleri gelene kadar site yayinlanabilir.
   Briefler: _markdown/foto-briefleri.md */
.photo{width:100%;object-fit:cover;border-radius:22px;
  background:linear-gradient(140deg,var(--teal-soft),var(--bg-2));border:1px solid var(--line)}

/* Tek fotograf yerine ikili kume: buyuk kare + ustune binen kucuk kare.
   Ust uste binme sayfanin geri kalanindaki kart dilini surduruyor. */
.shots{position:relative}
.shots .p1{aspect-ratio:5/4}
.shots .p2{position:absolute;left:-6%;bottom:-12%;width:38%;aspect-ratio:1;
  border-radius:18px;box-shadow:0 0 0 8px var(--bg-2),0 22px 44px -20px rgba(8,23,26,.45)}

/* Kapanistan once tam genislik serit — sayfanin en insani karesi. */
.strip{width:100%;aspect-ratio:24/7;object-fit:cover;border-radius:24px;margin-bottom:clamp(2.5rem,5vw,4rem);
  background:linear-gradient(115deg,var(--teal-soft),var(--bg-2));border:1px solid var(--line)}
@media (max-width:700px){.strip{aspect-ratio:16/9}
  .shots .p2{left:auto;right:-4%;bottom:-10%;width:42%}}

/* ---------- planlar ----------
   Bolum "ben buradayim" demiyordu ve sebebi acikti: FIYAT bolumunde fiyat
   yoktu. Dort sessiz cerceve, icinde birer rakam. Uc degisiklik:
     1) Fiyatlar yazili. Referans ABD dolari — magaza kendi paranda gosterir,
        dipnotta soyluyoruz. Rakamsiz bir paket bolumu karar verdirmiyor.
     2) Aylik/yillik secici. Bolumu etkilesimli yapan ve "burasi fiyat alani"
        dedirten sey bu.
     3) Bolum kendi zemininde, ustunde ve altinda cizgi. Beyaz uzerinde beyaz
        kartlar sayfanin geri kalanindan ayrismiyordu. */
.plans{background:var(--teal-soft)}
.plans .wrap{padding-block:clamp(4.5rem,9vw,8rem)}
.plans .head-row{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:flex-end;
  justify-content:space-between}
.plans h2{font-size:var(--t-sec);margin-top:1.15rem}

/* aylık / yıllık seçici */
.per{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem;flex:none;
  background:var(--bg);border:1px solid var(--line);border-radius:12px}
.per button{font:600 .9375rem/1 var(--sans);padding:.65rem 1.1rem;border:0;border-radius:9px;
  background:none;color:var(--ink-2);cursor:pointer;transition:background .18s,color .18s}
.per button[aria-pressed=true]{background:var(--teal);color:#fff}
.per .save{margin-left:.45rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  color:var(--teal);background:var(--teal-soft);padding:.3rem .5rem;border-radius:6px}
.per button[aria-pressed=true] .save{color:#fff;background:rgba(255,255,255,.22)}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:clamp(2.5rem,4vw,3.5rem);align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;padding:1.75rem 1.5rem 1.5rem;background:var(--bg);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.tier:hover{border-color:var(--ink-3);transform:translateY(-3px)}
/* Onerilen paket yalnizca koyu degil, fiziksel olarak da one cikiyor. */
.tier.pick{background:var(--deep);border-color:var(--deep);color:#fff;
  box-shadow:0 4px 10px rgba(8,23,26,.12),0 30px 60px -26px rgba(8,23,26,.55);
  margin-block:clamp(-.9rem,-1vw,-.5rem);padding-block:calc(1.75rem + .9rem) calc(1.5rem + .9rem)}
.tier.pick:hover{border-color:var(--deep)}

.tier .flag{position:absolute;top:-.7rem;left:1.5rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--teal);
  padding:.3rem .6rem;border-radius:6px}
.tier .who{font-size:.8125rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tier.pick .who{color:var(--on-deep)}

/* fiyat — kartın en büyük öğesi */
.tier .price{margin-top:.9rem;font-size:2.1875rem;font-weight:700;letter-spacing:-.045em;line-height:1;
  display:flex;align-items:baseline;gap:.3rem}
.tier .price em{font-style:normal;font-size:.9375rem;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.tier.pick .price em{color:rgba(255,255,255,.7)}
[data-period=yearly] .tier .m,[data-period=monthly] .tier .y{display:none}

/* Kapasite satiri. Once burada ust uste binen harf daireleri vardi (B, A, M…)
   — ziyaretci icin hicbir anlami yoktu, sayinin yaninda duran bir susten
   ibaretti. Ikon + rakam hem kisa hem dogrudan. */
.tier .cap{display:flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.9375rem;font-weight:650;color:var(--teal)}
.tier .cap svg{width:17px;height:17px;flex:none}
.tier.pick .cap{color:var(--on-deep)}


.tier .say{margin-top:1.1rem;font-size:.9063rem;line-height:1.5;color:var(--ink-2)}
.tier.pick .say{color:rgba(255,255,255,.82)}
.tier .free{margin-top:auto;padding-top:1.1rem;font-size:.8125rem;font-weight:650;color:var(--teal)}
.tier.pick .free{color:var(--on-deep)}

/* Her pakette ayni olan seyler — dort kutuda tekrar etmesin.
   Kutular ortali bir izgara oldugu icin bu satir da ortali; sola yaslanmis
   halde kartlarin altinda asili duruyordu. */
.allin{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 1.6rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.allin span{display:flex;align-items:center;gap:.45rem;font-size:.9375rem;color:var(--ink-2)}
.allin svg{width:16px;height:16px;flex:none;color:var(--teal)}

.plans .fine{margin-top:1.25rem;margin-inline:auto;text-align:center;
  font-size:.875rem;line-height:1.55;color:var(--ink-3);max-width:86ch}

/* ---------- kapanış ---------- */
/* Metin sutunu magaza sutunundan genis: kapanis basligi artik uygulamanin
   acilis cumlesiyle ayni ("Ailen nerede olursa olsun, iciniz rahat olsun.")
   ve 1fr/1fr bolusumde uc satira dusuyordu. Rozetler zaten iki dugme. */
.close .wrap{padding-block:clamp(4.5rem,9vw,8rem);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4rem);align-items:center}
/* 14ch tek satirlik eski basliga gore idi; yeni cumlenin en uzun satiri
   "Ailen nerede olursa olsun," — 26 karakter. */
.close h2{font-size:var(--t-sec);max-width:26ch}
/* 34ch dar sutuna gore idi; sutun genisleyince paragraf uc satirda
   kaliyordu. 46ch hala rahat okunan aralikta (45-75 karakter). */
.close p{margin-top:1.25rem;font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:46ch}
.stores{display:flex;flex-wrap:wrap;gap:.75rem;justify-self:end;align-items:center}

/* Magaza rozetleri: Apple ve Google'in kendi PNG rozetlerini kullanmiyoruz —
   ikisi de sabit oranli raster ve retina'da bulaniyor. Ayni gorsel dili
   vektorle kuruyoruz: dolu koyu zemin, ustte kucuk satir, altta magaza adi. */

@media (max-width:1040px){
  /* Tek kolon: metin ustte, urun altta — ama ekranlar hala yan yana. */
  .hero .wrap{grid-template-columns:1fr;padding-block:clamp(2.5rem,6vw,4rem)}
  .stage{margin-top:.5rem}
  .stage .front{height:clamp(350px,46vw,500px)}
  .beta .wrap{grid-template-columns:1fr;gap:1.75rem}
  .trust{grid-template-columns:1fr}
  .trust > div + div{border-inline-start:0;border-top:1px solid var(--line)}
  .creed .top{grid-template-columns:1fr}
  .collage{max-width:26rem;margin-top:2.5rem}
  .creed .pts{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d"}
  .blk.a{grid-template-columns:1fr}
  .blk.a .shotbox{--w:clamp(190px,46vw,250px);justify-content:center;
    height:clamp(200px,44vw,280px);padding-right:0}

  .band .wrap,.close .wrap{grid-template-columns:1fr}
  .stores{justify-self:start}
  .tiers{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .tiers{grid-template-columns:1fr}
  /* Dar ekranda uc telefon sigmaz; arkadakiler gizlenir, harita kalir. */
  .stage .front{height:min(500px,58vh)}
}