/* ============================================================================
   foto.css — kullanıcının kendi markalı fotoğrafları (3 bölüm arka planı)
   index.html gövdesine dokunmaz; yalnızca arka plan + okunabilirlik katmanı.
   Fotoğrafı değiştirmek için assets/images/ içindeki .webp dosyasını aynı adla
   kendi fotoğrafınla değiştir.
   ========================================================================== */

/* ---- 1 · HERO (giriş ekranı): ana-sayfa.webp ------------------------- */
#hero { position: relative; }
#hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("/assets/images/ana-sayfa.webp?v=2") center / cover no-repeat;
  filter: brightness(1.04) saturate(1.0);       /* aydınlık */
}
#hero::after {                                   /* solda koyu: metin okunsun */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,15,28,.78) 0%, rgba(6,15,28,.42) 52%, rgba(6,15,28,.22) 100%);
}
#hero > .container { position: relative; z-index: 2; }
/* bölümleri yükselt (≈16:9): fotoğraf tam görünsün, kişiler kırpılmasın */
#hero                        { min-height: 90vh; }
#kurumsal-preview .kprev-bg  { min-height: 84vh; }
#home-cta                    { min-height: 82vh; }
/* fotoğraf zaten sahneyi anlatıyor: dağınık dekorları gizle */
#hero-canvas,
#hero .hero-glow-1, #hero .hero-glow-2, #hero .hero-noise,
#hero .hero-right { display: none !important; }
#hero .hero-left { max-width: 620px; }

/* ---- 2 · KURUMSAL (Kurumsal Teklif Al): kurumsal.webp ---------------- */
#kurumsal-preview .kprev-bg { position: relative; }
#kurumsal-preview .kprev-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("/assets/images/kurumsal.webp") center / cover no-repeat;
  filter: brightness(1.04) saturate(1.0);     /* aydınlık */
}
#kurumsal-preview .kprev-bg::after {             /* sol tarafı hafif beyazlat: MAVİ yazı okunsun */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  width: auto; height: auto; border-radius: 0;   /* home.css'teki 550px daireyi iptal et: tam alan */
  background: linear-gradient(100deg,
    rgba(244,247,252,.86) 0%, rgba(244,247,252,.6) 30%, rgba(244,247,252,.12) 50%, transparent 62%);
}
#kurumsal-preview .kprev-bg > .container { position: relative; z-index: 2; }
/* içerik fotoğrafın dikey ortasında dursun */
#kurumsal-preview .kprev-bg { display: flex; align-items: center; }
#kurumsal-preview .kprev-bg > .container { width: 100%; }
/* sağ içerik (4sa/SLA/liste) parlak foto üstünde okunsun: koyu cam panel */
#kurumsal-preview .kprev-right {
  background: rgba(8,16,30,.56); border-radius: 16px;
  padding: clamp(18px, 2.2vw, 30px);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

/* ---- 3 · ALT CTA (Cihazınızın Sorunu Bizimle Çözülür): sorun-cozulur -- */
#home-cta { position: relative; overflow: hidden; }
#home-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("/assets/images/sorun-cozulur.webp") center / cover no-repeat;
  filter: brightness(1.04) saturate(1.0);       /* aydınlık */
}
#home-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,15,28,.5) 0%, rgba(6,15,28,.62) 100%);
}
#home-cta > .container { position: relative; z-index: 2; }

/* ---- mobil: fotoğrafları ortala, metin her zaman net ----------------- */
@media (max-width: 820px) {
  #hero::before { background-position: center; }
  #hero::after {
    background: linear-gradient(180deg, rgba(6,15,28,.55) 0%, rgba(6,15,28,.4) 55%, rgba(6,15,28,.72) 100%);
  }
  #hero .hero-left { max-width: none; }
  /* kurumsal bölüm: metin tam genişlikte, yukarıdan aç */
  #kurumsal-preview .kprev-bg::after {
    background: linear-gradient(180deg,
      rgba(244,247,252,.9) 0%, rgba(244,247,252,.84) 45%, rgba(244,247,252,.2) 70%, transparent 100%);
  }
}

/* ---- 4 · KURUMSAL SAYFASI (kurumsal.html) hero: kurumsal.webp -------- */
.kur-hero { position: relative; overflow: hidden; }
.kur-hero::before {
  content: ""; position: absolute; z-index: 0;
  top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  border-radius: 0;                              /* daireyi iptal et: tam ekran */
  background: url("/assets/images/kurumsal.webp") 50% 38% / cover no-repeat;  /* kafa + masa görünsün */
  filter: brightness(1.08) saturate(1.04);       /* çok aydınlık */
}
.kur-hero::after {                               /* sol tarafı beyazlat: KOYU yazı okunsun */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(244,247,252,.92) 0%, rgba(244,247,252,.82) 28%, rgba(244,247,252,.45) 40%, rgba(244,247,252,.08) 50%, transparent 58%);
}
.kur-hero > .container { position: relative; z-index: 2; }
/* resmin üstüne gelen yazılar koyu renk */
.kur-hero .kur-h1   { color: #0b1a30; }
.kur-hero .kur-lead { color: #1a3150; font-weight: 500; }
/* rozetler aşağıda: yüzleri kapatmasın, masanın üstünde dursun */
.kur-hero { display: flex; flex-direction: column; justify-content: center; }
.kur-hero > .container { width: 100%; }
.kur-hero .kur-hero-inner { align-items: stretch; }
.kur-hero .kur-hero-text { align-self: center; }
@media (min-width: 1025px) {
  .kur-hero .kur-hero-badges { justify-content: flex-end; margin-bottom: calc(-1 * var(--space-12)); }
}
/* hero'yu yükselt: fotoğraf daha çok görünsün (masa dahil) */
.kur-hero { min-height: 82vh; }
/* rozetler: açık zemin + koyu yazı, belirgin */
.kur-hero .kur-badge { background: rgba(255,255,255,.94); border: 1px solid rgba(10,20,36,.08); box-shadow: 0 10px 28px rgba(6,15,28,.2); }
.kur-hero .kur-badge strong { color: #0b1a30; }
.kur-hero .kur-badge p { color: #3a5170; }
.kur-hero .kur-badge i { color: #2979ff; }
/* mobil: metin fotoğrafın üstünde tam genişlikte; yandan değil yukarıdan aç */
@media (max-width: 820px) {
  .kur-hero::after {
    background: linear-gradient(180deg,
      rgba(244,247,252,.9) 0%, rgba(244,247,252,.84) 55%, rgba(244,247,252,.3) 100%);
  }
}

/* ====== resim üstü yazıları ORTALA + siteye uygun (beyaz başlık, mavi vurgu) + okunabilirlik ====== */
/* HERO: metin fotoğrafın sol ortasında (sağdaki teknisyen görünsün) */
#hero .hero-wrap { justify-content: center; }
#hero .hero-left { text-align: left; align-items: flex-start; max-width: 680px; margin-inline: 0; }
#hero .hero-eyebrow, #hero .hero-ctas, #hero .hero-trust { justify-content: flex-start; }
#hero .hero-h1 { color: #ffffff; }
#hero .hero-lead { color: #dde8f7; margin-inline: 0; }
/* "Premium Teknik Servis" etiketi: foto üstünde belirgin cam rozet */
#hero .hero-eyebrow {
  background: rgba(8,18,36,.72); border-color: rgba(82,148,255,.6);
  padding: .55rem 1.15rem .55rem .75rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(6,15,28,.45), 0 0 0 1px rgba(82,148,255,.15) inset;
}
#hero .hero-eyebrow-dot { width: 8px; height: 8px; background: #6aa5ff; box-shadow: 0 0 8px rgba(106,165,255,.9); }
#hero .hero-eyebrow-text { font-size: .8rem; color: #a9c9ff; }
#hero .hero-eyebrow-divider { height: 14px; background: rgba(255,255,255,.35); }
#hero .hero-eyebrow-sub { font-size: .8rem; color: rgba(255,255,255,.85); }

/* KURUMSAL-PREVIEW: iki sütun + cam panel korunur; sol metin fotoğrafın sol-ortasında, mavi */
#kurumsal-preview .kprev-left { text-align: left; }
#kurumsal-preview .kprev-eyebrow { justify-content: flex-start; color: var(--blue-600); }
#kurumsal-preview .kprev-h2 { color: var(--blue-600); }
#kurumsal-preview .kprev-lead { color: var(--navy-700); }

/* ALT CTA: metin fotoğrafın sol ortasında (sağdaki el sıkışma görünsün) */
#home-cta { text-align: left; display: flex; align-items: center; }
#home-cta > .container { width: 100%; }
#home-cta .home-cta-lead { color: #dde8f7; margin-left: 0; }
#home-cta .home-cta-actions { justify-content: flex-start; }

/* okunabilirlik: yazı solda → solda hafif koyuluk; fotoğrafın sağı aydınlık kalsın, yazıyı gölge taşısın */
#hero::after,
#home-cta::after {
  background: linear-gradient(90deg,
    rgba(6,15,28,.58) 0%, rgba(6,15,28,.4) 35%, rgba(6,15,28,.12) 60%, transparent 80%) !important;
}
#hero::before,
#home-cta::before,
#kurumsal-preview .kprev-bg::before { filter: brightness(1.12) saturate(1.05); }
#hero::before     { filter: brightness(1.28) saturate(1.06); }               /* foto loş: biraz daha aç */
#home-cta::before { filter: brightness(1.75) contrast(.92) saturate(1.08); }  /* foto gece çekimi: daha çok aç */
/* gradyan (şeffaf dolgulu) vurgu yazısında text-shadow harfin içinden görünür: kapat */
#hero .hero-h1 em { text-shadow: none; filter: drop-shadow(0 2px 10px rgba(6,15,28,.55)); }
#hero .hero-h1, #hero .hero-lead, #hero .hero-eyebrow, #hero .hero-trust,
#home-cta .home-cta-h2, #home-cta .home-cta-lead {
  text-shadow: 0 2px 14px rgba(6,15,28,.7), 0 1px 3px rgba(6,15,28,.6);
}
#kurumsal-preview .kprev-right { background: rgba(8,16,30,.44); }

@media (max-width: 820px) {                     /* mobilde yazı tam genişlik: düz koyuluk */
  #hero::after,
  #home-cta::after { background: rgba(6,15,28,.5) !important; }
}

/* === düzeltme: grid/flex zorla ez, tek sütun, solda === */
#hero .hero-wrap { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; }

/* ====== MOBİL: fotoğraf üstte TAM görünür (kırpılmaz), metin altında ====== */
/* Fotoğraflar 16:9 (yükseklik = genişliğin %55.8'i). Dikey bölümde "cover"
   iki yanı kesiyordu; mobilde fotoğraf kendi oranında üstte durur, alt kenarı
   bölüm rengine yumuşakça geçer. */
@media (max-width: 820px) {
  /* 1 · HERO */
  #hero {
    min-height: 0; align-items: flex-start; background: #020817;
    padding-top: calc(var(--nav-h) + 55.8vw);
  }
  #hero::before, #hero::after {
    inset: auto; top: var(--nav-h); left: 0; right: 0; height: 55.8vw;
  }
  #hero::before { background-position: center; background-size: cover; }
  #hero::after  { background: linear-gradient(180deg, rgba(2,8,23,0) 62%, #020817 100%); }
  #hero .hero-wrap { padding-top: var(--space-8); }

  /* 2 · KURUMSAL ÖNİZLEME (ana sayfa) */
  #kurumsal-preview .kprev-bg {
    min-height: 0; display: block; background: #f4f7fc;
    padding-top: calc(55.8vw + var(--space-8));
  }
  #kurumsal-preview .kprev-bg::before,
  #kurumsal-preview .kprev-bg::after {
    inset: auto; top: 0; left: 0; right: 0; width: auto; height: 55.8vw;
  }
  #kurumsal-preview .kprev-bg::before { background-position: center; background-size: cover; }
  #kurumsal-preview .kprev-bg::after  { background: linear-gradient(180deg, rgba(244,247,252,0) 62%, #f4f7fc 100%); }
  /* açık zeminde cam panel soluk kalıyordu: düz lacivert */
  #kurumsal-preview .kprev-right { background: #0a1628; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #kurumsal-preview .kprev-stat-lbl { color: rgba(255,255,255,.7); }

  /* 3 · ALT CTA */
  #home-cta {
    min-height: 0; display: block; background: #0a1628;
    padding-top: calc(55.8vw + var(--space-8));
  }
  #home-cta::before, #home-cta::after {
    inset: auto; top: 0; left: 0; right: 0; height: 55.8vw;
  }
  #home-cta::before { background-position: center; background-size: cover; }
  #home-cta::after  { background: linear-gradient(180deg, rgba(10,22,40,0) 62%, #0a1628 100%); }

  /* 4 · KURUMSAL SAYFASI HERO */
  .kur-hero {
    min-height: 0; justify-content: flex-start; background: #f4f7fc;
    padding-top: calc(var(--nav-h) + 55.8vw + var(--space-8));
  }
  .kur-hero::before, .kur-hero::after {
    inset: auto; top: var(--nav-h); bottom: auto; left: 0; right: 0; width: auto; height: 55.8vw;
  }
  .kur-hero::before { background-position: center; background-size: cover; }
  .kur-hero::after  { background: linear-gradient(180deg, rgba(244,247,252,0) 62%, #f4f7fc 100%); }
}