/* =======================
   INDEX.CSS — Home bölümleri (temiz sürüm)
   ======================= */

/* Ortak değişkenler */
:root{
  --home-sec-h: 100vh;              /* Her section yüksekliği */
  --home-overlay: rgba(0,0,0,.35);  /* Default overlay */
}

/* =========================================================
   Full-screen Scroll Snap (yalnızca anasayfa)
   ========================================================= */
/* Yalnızca desktop için etkinleştir */
@media (min-width: 901px){
  main{
    height: 100vh;                 /* Header fixed, içerik viewport yüksekliğinde kayar */
    overflow-y: auto;              /* Kaydırma konteyneri */
    scroll-snap-type: y mandatory; /* Dikey snap */
    scroll-behavior: smooth;       /* Yumuşak geçiş */
    position: relative;            /* İçteki section offsetTop değerleri ana konteynere göre ölçülsün */
  }
  /* Her bölüm bir snap noktasıdır */
  .home-sec{ scroll-snap-align: start; scroll-snap-stop: always; }

  /* Scrollbar gizle (desktop görünümde) */
  main{ scrollbar-width: none; -ms-overflow-style: none; }
  main::-webkit-scrollbar{ display:none; width:0; height:0 }

  /* Desktop'ta arka planları global deck'e devret: section BG ve overlay'i kapat */
  .home-sec{ background-image: none !important; }
  .home-sec::before{ background: none !important; }
}
/* JS animasyon sırasında snap'i kapat (zıplamayı önler) */
@media (min-width: 901px){
  main.js-scrolling{ scroll-snap-type: none; }
}

/* Mobilde devre dışı bırak: doğal akış */
@media (max-width: 900px){
  /* Yatay slider: ana konteyner yatay kayar, snap-x */
  main{
    height:auto; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior:smooth;
    display:flex; flex-wrap:nowrap;
  }
  .home-sec{
    flex: 0 0 100vw; width:100vw;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
}

/* ---- Section kutusu ---- */
.home-sec{
  min-height: var(--home-sec-h);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Sadece özellik bazlı atamalar (kısayol YOK) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  margin: 0; /* footer geçişinde seam yapmasın */
}

/* ---- Karanlık overlay (üst katman) ---- */
.home-sec::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--overlay, var(--home-overlay));
  pointer-events: none;
  z-index: 0;
}

/* ---- İçerik ---- */
.home-sec .inner{
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 24px;
  transform: translateY(16px);
  opacity: .001;
  transition: transform .9s ease, opacity .9s ease;
}
.home-sec .inner > *:last-child{ margin-bottom: 0; }

/* Son bölüm ile footer arası seam fix */
main > section:last-of-type{ margin-bottom: 0; }

/* Bölümlere özel overlay (opsiyonel) */
/* =========================================================
   Slide-in efekt: aktif bölümün içeriğini yumuşak getir
   ========================================================= */
@media (min-width: 901px){
  .home-sec.is-current .inner{
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===================== Content blocks ===================== */
.stack{ display:flex; flex-direction:column; align-items:center }
.kicker{ letter-spacing:.8px; font-weight:700; opacity:.9 }
.headline{ font-size: clamp(26px, 5vw, 44px); font-weight:900 }
.lead{ color:#e6edf6 }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn{ display:inline-grid; place-items:center; height:44px; padding:0 18px; border-radius:12px; text-decoration:none; font-weight:700 }
.btn-primary{ background:#8d2f2f; color:#e9e9e4 }
.btn-secondary{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6) }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25) }

.grid.two{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; text-align:left; max-width:1100px; margin:0 auto }
.grid.two .col p{ color:#e6edf6 }
.h2{ font-size: clamp(20px, 3.2vw, 28px); margin:0 0 6px 0 }
.features{ display:grid; gap:12px }
.feature{ display:flex; gap:12px; align-items:flex-start; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.15); padding:12px; border-radius:12px }
.feature .ico{ font-size:20px; line-height:1.2 }
.feature .ft{ font-weight:700 }
.feature .fd{ color:#d6dee8 }

.cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; max-width:1100px; margin:0 auto }
.card{ background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:16px; text-decoration:none; color:#fff; text-align:left; transition:transform .25s ease, background .25s ease }
.card:hover{ transform:translateY(-4px); background:rgba(0,0,0,.22) }
.card .ct{ font-weight:800; margin-bottom:6px }
.card .cd{ color:#d6dee8; font-size:14px }

.metrics{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; max-width:1100px; margin:0 auto }
.metric{ background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:18px }
.metric .mn{ font-size: clamp(20px,4vw,34px); font-weight:900 }
.metric .ml{ color:#d6dee8 }

.svc-note{ display:flex; gap:10px; justify-content:center; align-items:center }
.badge{ background:#8d2f2f; color:#e9e9e4; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px }
.muted{ color:#e6edf6; opacity:.9; font-size:14px }

.quotes{ max-width:1000px; margin:16px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px }
.quote{ background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:16px; text-align:left }
.quote .qt{ font-style:italic; color:#e6edf6; margin-bottom:8px }
.quote .qa{ color:#d6dee8; font-size:14px }

.trust{ max-width:900px; margin:18px auto 0; text-align:center }
.trust-kicker{ letter-spacing:.8px; font-weight:800; opacity:.9; margin-bottom:8px }
.trust-logos{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.tlogo{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:10px; padding:8px 12px; font-weight:700; font-size:13px }

@media(max-width:900px){
  /* Mobil: bölümler doğal akış + güvenli üst/alt boşluk */
  .home-sec{ min-height:100vh; padding: 80px 18px 56px; }
  .home-sec .inner{ padding:18px; opacity:1; transform:none } /* mobilde içerik görünür */
  .quotes{ grid-template-columns:1fr }
}

.cta-box-big{ max-width:800px; margin:0 auto }

@media(max-width:900px){
  .grid.two{ grid-template-columns:1fr; text-align:center }
}

/* Mobil grid optimizasyonları */
@media(max-width:900px){
  .cards{ grid-template-columns: 1fr; gap:12px }
  .metrics{ grid-template-columns: repeat(2,1fr); }
  /* Mobil ok navigasyonu */
  .m-arrows{ position:fixed; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0 10px; z-index:62 }
  .m-arrows button{
    width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
    background:rgba(0,0,0,.25); backdrop-filter: blur(6px);
    color:#fff; font-size:18px; cursor:pointer;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  }
  .m-arrows button:active{ transform: scale(.96); }
  .m-arrows{ transition: opacity .25s ease; }
  .m-arrows.is-hidden{ opacity:0; pointer-events:none }
}
@media(max-width:560px){
  .metrics{ grid-template-columns: 1fr; }
}

/* ============ Scroll reveal (global) ============ */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }

/* =========================================================
   Sağ kenar noktaları (dot navigation) — yalnızca desktop
   ========================================================= */
@media (min-width: 901px){
  .snap-dots{
    position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
    display: grid; gap: 10px; z-index: 62; /* header(50) ve grid(61) üstü */
  }
  .snap-dots button{
    width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.25);
    padding: 0; cursor: pointer; display: block;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  }
  .snap-dots button:hover{ transform: scale(1.15); }
  .snap-dots button.is-active{
    background: #fff; border-color: #fff; transform: scale(1.25);
  }
}

/* =========================================================
   Arka Plan Slayt Katmanı (bg-deck) — yalnızca desktop
   ========================================================= */
@media (min-width: 901px){
  .bg-deck{ position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .bg-deck .bg-layer{
    position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
    background-position: center; background-size: cover; background-repeat: no-repeat;
  }
  .bg-deck .bg-layer{ transition: opacity 1s ease; }
  .bg-deck .bg-layer::after{ /* karartma/overlay */
    content:""; position:absolute; inset:0; background: var(--deck-overlay, rgba(0,0,0,.35));
  }
  .bg-deck .bg-layer.is-active{ opacity: 1; }
}
.s1{ --overlay: rgba(0,0,0,.35); }
.s2{ --overlay: rgba(0,0,0,.30); }
.s3{ --overlay: rgba(0,0,0,.40); }
.s4{ --overlay: rgba(0,0,0,.35); }
.s5{ --overlay: rgba(0,0,0,.30); }

/* =========================================================
   Arka Plan Görselleri
   - Eski tarayıcılar: JPG fallback
   - Modern tarayıcılar: WEBP (image-set / -webkit-image-set)
   ========================================================= */

/* 1) Tüm tarayıcılar için güvenli taban: JPG fallback */
.home-sec{
  background-image: var(--bg-fallback);
}

/* 2) Modern tarayıcılar: WEBP image-set (DPR'a göre seçer) */
@supports (background-image: image-set(url("x.webp") 1x)) {
  .home-sec{
    background-image: image-set(
      var(--bg-768)   1x,
      var(--bg-1280)  1.5x,
      var(--bg-1920)  2x
    );
  }
}

/* 3) Safari için webkit varyantı */
@supports (background-image: -webkit-image-set(url("x.webp") 1x)) {
  .home-sec{
    background-image: -webkit-image-set(
      var(--bg-768)   1x,
      var(--bg-1280)  1.5x,
      var(--bg-1920)  2x
    );
  }
}

/* --- Son section ile footer arası beyaz çizgiyi kaldır --- */
main > section{ margin-bottom: 0; }    /* tüm sectionların alt marjını sıfırla */
footer{ margin-top: 0; }               /* footer üst marjını sıfırla */

/* seam killer: olası margin-collapse durumlarına karşı */
.home-sec{ padding-bottom: 1px; margin-bottom: -1px; } 
/* overlay ve arka planı etkilemez, görselde kayma yapmaz */

/* son section alt boşluk sıfır + seam killer */
.home-sec:last-of-type{ margin-bottom:-1px; padding-bottom:1px; }
main > section{ margin-bottom:0; }