/* =====================================================================
   FERRINI — anasayfa.css
   Yalnızca anasayfa bölümleri. Sıra: hero → manifesto → öne çıkanlar →
   slogan sahnesi → rozetler → markalar (manyetik) → önce/sonra → haberler → CTA.
   Ortak bileşenler (kart, hap, cam kart, rozet) base.css'te.
   ===================================================================== */

/* ---------- hero: tam ekran görsel, sol üstte yazı, sağ üstten ışık ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#dfe3ea;color:#fff;display:flex;align-items:flex-start}
.hero .vis{position:absolute;inset:0}
.hero .vis picture,.hero .vis img{position:absolute;inset:0;width:100%;height:100%}
.hero .vis img{object-fit:cover;object-position:50% 40%;transform-origin:50% 30%;animation:kenburns 28s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(-4.5%)}}
.hero .rays{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,16,.55) 0%,rgba(6,10,16,.22) 40%,rgba(6,10,16,0) 62%),
             linear-gradient(90deg,rgba(6,10,16,.35) 0%,rgba(6,10,16,0) 55%)}
.hero .c{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:clamp(96px,14vh,150px) var(--pad) 0}
.hero .label{color:rgba(255,255,255,.85);display:block;margin-bottom:18px}
.hero h1{font-size:var(--text-hero);line-height:1.04;max-width:11em;margin:0 0 18px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero h1 em{font-style:normal;color:#c9d3e6}
.hero p{font-size:var(--text-body-lg);line-height:1.6;color:rgba(255,255,255,.88);max-width:32em;margin:0 0 30px}
.hero .actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.hero .actions .link{color:#fff}
@media (max-width:900px){
  .hero{min-height:560px}
  .hero .c{padding-top:calc(var(--duyuru-h,0px) + 80px)}   /* duyuru bandı açıkken de yazı nav'ın altında kalmasın */
  .hero .vis img{object-position:58% 60%}
  /* dikey kadrajda yazı göğe denk geliyor: karartmayı biraz daha aşağı taşı */
  .hero::after{background:linear-gradient(180deg,rgba(6,10,16,.6) 0%,rgba(6,10,16,.4) 42%,rgba(6,10,16,.1) 66%,rgba(6,10,16,0) 80%)}
  .hero h1{font-size:clamp(34px,9vw,52px)}
  .hero .actions{gap:16px}
}

/* ---------- manifesto: kaydırdıkça kelime kelime koyulaşan metin ---------- */
.manifesto{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--pad)}
.manifesto h2{font-size:var(--text-manifesto);line-height:1.12;width:100%}
.manifesto .w{color:var(--color-ink-faint);transition:color .35s linear}
.manifesto .w.on{color:var(--color-ink)}

/* ---------- öne çıkanlar ---------- */
.grid-sec{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--pad)}

/* ---------- slogan sahnesi: arka katman (ağaçlar) < kayan slogan < ön katman (ev) ---------- */
.marq-sec{position:relative;padding:0;overflow:hidden}
.marq-sec .hero-img{position:relative;width:100%;margin:0;aspect-ratio:16/8.3;overflow:hidden}
/* Katmanlı ev yalnız .back/.front ile seçilir: kayan slogan da .hero-img içinde,
   genel bir "img" seçicisi onu da mutlak konuma alıp bandı bozuyor. (C5'te > seçicisi
   <picture> sarmalayıcı yüzünden gevşetilmişti; sınıfla seçmek sarmalayıcıdan bağımsız.) */
.marq-sec .hero-img img.back,
.marq-sec .hero-img img.front{position:absolute;left:50%;top:0;width:175%;max-width:none;height:auto;transform:translate(-46%,0)}
.marq-sec .hero-img img.back{z-index:1}
.marq-sec .hero-img img.front{z-index:3}
.marq{position:absolute;left:0;right:0;top:13%;z-index:2;white-space:nowrap;overflow:hidden;font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:1.25;padding:.05em 0;font-size:clamp(64px,9vw,132px)}
.marq .track{display:inline-flex;gap:.35em;animation:marq 34s linear infinite;will-change:transform}
.marq.js .track{animation:none}                           /* masaüstünde kaydırmaya bağlı (JS) */
.marq .track span{padding-right:.35em;display:inline-flex;align-items:center;flex:0 0 auto}
.marq .track img{height:clamp(25px,3.8vw,56px);width:auto;max-width:none;display:block;opacity:.9}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:900px){
  .marq-sec .hero-img{aspect-ratio:16/10}
  .marq-sec .hero-img img.back,
  .marq-sec .hero-img img.front{width:210%;transform:translate(-47%,0)}
  .marq{top:8%}
}

/* ---------- rozetler ---------- */
.badges{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--pad)}

/* ---------- markalar: "Birlikte Daha Güçlü" manyetik sahne (Uncode bg-magnetic) ----------
   Rastgele dağılmış kare fotoğraflar + logo karoları, ortada güvenli bölge, fareyle derinlikli kayma. Dizilim JS'te. */
.brands{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--pad);text-align:center}
.brands .stage{position:relative;height:clamp(560px,92svh,900px);margin:0 calc(-1 * var(--pad));overflow:hidden;border-radius:24px;background:var(--color-paper)}
.brands .stage .tile{position:absolute;border-radius:5%;overflow:hidden;will-change:transform;transition:transform .25s var(--ease-spring);background:var(--color-card)}
.brands .stage .tile img{width:100%;height:100%;object-fit:cover;display:block}
.brands .stage .tile.logo{background:#fff;border:1px solid var(--color-card-line);display:flex;align-items:center;justify-content:center;padding:calc(var(--s,120px) * .13);box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
.brands .stage .tile.logo img{width:100%;height:auto;max-height:100%;object-fit:contain}
.brands .stage .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);pointer-events:none}
.brands .stage .c>*{pointer-events:auto}
.brands .label{color:var(--color-accent);display:block;margin-bottom:14px}
.brands h2{font-size:var(--text-h2);line-height:1;margin-bottom:22px}
.brands .stage p{max-width:34em;margin:0 0 26px;font-size:var(--text-body-lg);line-height:1.7;color:var(--color-ink-soft)}
.brands .stage p b{font-weight:400;color:var(--color-ink)}
@media (max-width:900px){
  .brands .stage{height:clamp(560px,92svh,760px);border-radius:18px}
  .brands .stage p{max-width:26em;font-size:15px}
}
@media (max-width:560px){.brands h2{font-size:34px}}

/* ---------- önce / sonra: karşılaştırma kaydırıcı (reactbits pro Comparison Slider) ---------- */
.ba{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.ba .txt .label{color:var(--color-accent);display:block;margin-bottom:16px}
.ba .txt h3{font-size:var(--text-h3);line-height:1.15;margin-bottom:18px}
.ba .txt p{font-size:var(--text-body-lg);line-height:1.7;color:var(--color-ink);max-width:36em;margin-bottom:26px}
.ba .cmp{
  --p:50%;position:relative;overflow:hidden;border-radius:var(--radius-panel);aspect-ratio:7/8;max-height:82svh;width:100%;
  background:#e9ebf0;user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:0 40px 80px -40px rgba(0,0,0,.45);
}
.ba .cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .cmp .afterwrap{position:absolute;top:0;bottom:0;right:0;left:var(--p);overflow:hidden}   /* sağ taraf: sabit kadraj, pencere daralır */
.ba .cmp .afterwrap img{position:absolute;top:0;right:0;bottom:0;width:auto;max-width:none;height:100%;left:auto}
.ba .cmp .bar{position:absolute;top:0;bottom:0;left:var(--p);width:3px;padding:0;margin:0;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.ba .cmp .knob{position:absolute;top:50%;left:var(--p);width:48px;height:48px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;display:grid;place-items:center;color:var(--color-ink);box-shadow:0 2px 10px rgba(0,0,0,.25);pointer-events:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ba .cmp.drag .knob{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 4px 18px rgba(0,0,0,.3)}
.ba .cmp .knob svg{width:20px;height:20px}
.ba .cmp .tag{position:absolute;top:16px;padding:6px 10px;line-height:1;border-radius:6px;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:opacity .25s}
.ba .cmp .tag.l{left:16px}.ba .cmp .tag.r{left:calc(var(--p) + 16px)}
.ba .cmp .cap{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-size:var(--text-small);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none}
.ba .cmp:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media (max-width:900px){
  .ba{grid-template-columns:1fr;gap:26px}
  .ba .cmp{border-radius:18px;aspect-ratio:4/5;max-height:none}
  .ba .cmp .knob{width:40px;height:40px}
  .ba .cmp .knob svg{width:16px;height:16px}
}

/* ---------- haberler ---------- */
.journal{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--pad)}
.journal .sec-head{padding-bottom:40px}

/* ---------- CTA: parallax (arka plan yavaş, ön içerik hızlı), kenarlar beyaza erir ---------- */
.cta-wrap{padding:0}
/* kart bölüm ortalandığında ekranın altına oturur: arkadaki tesis fotoğrafı daha çok görünsün
   (Kadir, 2026-10-01: "resim ortalandığında ekranın altında olacak şekilde animasyon olabilir") */
.cta{--py:0;position:relative;overflow:hidden;min-height:96svh;background:var(--color-paper);color:var(--color-ink);display:flex;align-items:flex-end;padding:clamp(60px,8vw,120px) var(--pad) clamp(16px,2vw,28px)}
.cta .bg{position:absolute;inset:-18% 0;transform:translateY(calc(var(--py) * -.18px));will-change:transform}
.cta .bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 86%,#fff 100%),
             linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 84%,#fff 100%),
             radial-gradient(ellipse 78% 72% at 50% 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.85) 100%)}
/* tek yatay kart, ortalanmış ve dar; arkadaki tesis fotoğrafı görünsün diye saydam ve küçük */
.cta .inner{position:relative;z-index:2;width:100%;max-width:min(1000px,100%);margin:0 auto;
  /* yalnız bölüm ortalanana kadar yukarıdan iner; ortalandıktan sonra yerinde kalır */
  transform:translateY(min(0px,calc(var(--py) * .42px)));will-change:transform}
.cta .ckart{gap:clamp(14px,1.7vw,20px);padding:clamp(18px,2vw,26px) clamp(20px,2.3vw,30px);border-radius:20px;background:rgba(244,242,238,.52);border-color:rgba(255,255,255,.45);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 18px 50px -24px rgba(20,24,30,.35)}
.cta .ckart .ust{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.cta .ckart .yazi{flex:1 1 380px;min-width:0}
.cta .ckart .lbl{margin-bottom:7px}
.cta .ckart h3{font-size:clamp(17px,1.5vw,22px);line-height:1.28;margin:0;max-width:26em}
.cta .ckart .pill{flex:none}
.cta .ckart .sayilar{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,26px);padding-top:clamp(13px,1.6vw,18px);border-top:1px solid rgba(48,49,51,.16)}
.cta .ckart .sayilar b{display:block;font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);font-size:clamp(26px,2.5vw,36px);line-height:1;color:var(--color-ink)}
.cta .ckart .sayilar span{display:block;font-size:12.5px;line-height:1.35;color:var(--color-ink-soft);margin-top:5px}
@media (max-width:640px){
  .cta .ckart .ust{flex-direction:column;align-items:stretch}
  .cta .ckart .pill{justify-content:center}
  .cta .ckart .sayilar{grid-template-columns:1fr 1fr;gap:16px}
}
/* Mobil (2026-10-09, iOS ekran görüntüleri): kart görselin üstünde kayan cam kart değil.
   Eskiden kart (1) kaydırma efektiyle bölümün dışına itilip kenarda kırpılıyordu (metin kayboluyordu),
   (2) .yazi'nin 380px esnek tabanı sütun düzeninde yüksekliğe dönüşüp metinle buton arasında boş cam bırakıyordu,
   (3) fabrikaların üstünü örtüyordu. Şimdi: portre fotoğraf tam görünür; metin gökyüzünün üstünde küçük bir camda;
   buton ve rakamlar fotoğrafın altında, beyaz zeminde. Kaydırma efekti ve büyük bulanıklık mobilde yok. */
@media (max-width:900px){
  .cta{display:block;min-height:0;padding:0}
  .cta::after{display:none}
  .cta .bg{position:relative;inset:auto;transform:none;will-change:auto;aspect-ratio:1178/1473;max-height:88svh}
  .cta .bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 12%)}
  .cta .bg picture,.cta .bg img{position:absolute;inset:0;width:100%;height:100%}
  .cta .bg img{object-position:50% 80%}
  .cta .inner{position:static;transform:none;will-change:auto;max-width:none;padding:clamp(18px,5vw,28px) var(--pad) clamp(28px,8vw,48px)}
  .cta .ckart{position:static;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .cta .ckart.rv{transform:none;opacity:1}   /* dönüşüm .yazi'yi karta bağlardı; görünürlük animasyonu da metni,
                                               fotoğrafın altındaki buton ekrana girene kadar gizliyordu */
  .cta .ckart .ust{display:block}
  .cta .ckart .yazi{position:absolute;z-index:2;top:clamp(44px,11vw,72px);left:var(--pad);right:var(--pad);
    padding:14px 16px 16px;border-radius:16px;background:rgba(244,242,238,.78);border:1px solid rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px -18px rgba(20,24,30,.35)}
  .cta .ckart h3{font-size:17px}
  .cta .ckart .pill{display:flex;width:100%;justify-content:center}
  .cta .ckart .sayilar{margin-top:clamp(16px,4vw,22px)}
}

@media (prefers-reduced-motion:reduce){
  .marq .track,.hero .vis img{animation:none}
  .cta{--py:0 !important}
}

/* hero sağ: bayi uygulaması kartı — küçük: tek satır metin + App Store / Google Play ikonları (Kadir 2026-10-09:
   "sadece ikon, kart olabildiğince küçük, resmi çok kapatmasın"). Kartın tamamı Bayimiz Olun sayfasına giden tek
   bağlantı; ikonlar süs (mağaza bağlantıları o sayfada, büyük ve açıklamalı). */
.hero .pro{position:absolute;right:var(--pad);top:calc(var(--nav-height) + var(--duyuru-h,0px) + clamp(56px,10vh,120px));z-index:3;
  display:flex;align-items:center;gap:10px;max-width:min(360px,calc(100vw - 2 * var(--pad)));padding:6px 6px 6px 14px;border-radius:14px;color:#fff;
  background:rgba(16,18,19,.38);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity var(--dur-slow) var(--ease) .36s,transform var(--dur-slow) var(--ease) .36s,background .25s,border-color .25s}   /* .rv.d3 görünme gecikmesi korunur, hover gecikmesiz */
.hero .pro:hover{background:rgba(16,18,19,.55);border-color:rgba(255,255,255,.4)}
.hero .pro:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero .pro .t{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;line-height:1.3}
.hero .pro .rozetler{display:flex;gap:6px;flex:none}
.hero .pro .rozet{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;
  border:1px solid rgba(255,255,255,.28);transition:background .25s,border-color .25s}
.hero .pro:hover .rozet{background:#000;border-color:rgba(255,255,255,.5)}
.hero .pro .rozet svg{width:17px;height:17px;fill:currentColor}
/* mobilde bölüm ekran yüksekliğine sabit kalırsa (iOS'ta araç çubukları ekranı kısaltır) kart alttan kırpılıyordu:
   yükseklik içeriğe göre uzar, kart her zaman tam görünür (2026-10-09) */
@media (max-width:900px){.hero{height:auto;min-height:100svh;flex-direction:column;flex-wrap:nowrap;padding-bottom:clamp(22px,6vw,36px)}
  .hero .pro{position:relative;top:auto;right:auto;z-index:3;margin:12px var(--pad) 0;flex:0 0 auto;align-self:flex-start}}   /* masaüstündeki top değeri göreli konumda kartı ~180px aşağı itiyordu */
/* mobil: "Sistemleri keşfedin" satırı ve bayi uygulaması kartı ilk ekranın sol altında; ev fotoğrafı açıkta kalır.
   Yazı bloğu (.c) boş yüksekliği doldurur, düğme satırı onun dibine iner, kart hemen altında. Kaydırınca
   yumuşakça silinir (5 sn), en üste dönünce yumuşakça belirir (2 sn) — anasayfa.js .hero.kaydi / .donus. Kadir 2026-10-09.
   Eğri ease-in-out: varsayılan --ease değişimin çoğunu ilk saniyede bitirir, uzun süre hissedilmezdi. */
@media (max-width:900px){
  .hero .c{flex:1 0 auto;display:flex;flex-direction:column}
  .hero .c>p{margin-bottom:24px}
  .hero .actions{margin-top:auto}
  /* alt köşedeki beyaz "Bayi bulun" yazısı açık renkli çimenin üstünde okunsun: altta hafif karartma */
  .hero::after{background:linear-gradient(180deg,rgba(6,10,16,.6) 0%,rgba(6,10,16,.4) 42%,rgba(6,10,16,.1) 62%,rgba(6,10,16,0) 72%,rgba(6,10,16,.38) 100%)}
  .hero.kaydi .actions,.hero.kaydi .pro{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;
    transition:opacity 5s ease-in-out,transform 5s ease-in-out,visibility 0s linear 5s}
  /* geri dönüş (.donus: en az bir kez kaydırıldı); sayfa ilk açılırken görünme animasyonu (.rv) değişmez */
  .hero.donus:not(.kaydi) .actions,.hero.donus:not(.kaydi) .pro{transition:opacity 2s ease-in-out,transform 2s ease-in-out,background .25s,border-color .25s}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.hero.kaydi .actions,.hero.kaydi .pro{transform:none}}