/* ============================================================
   KODBIZDE — Anasayfa hero "split + diagonal" düzeni (AÇIK TEMA)
   Sol: başlık/arama · Sağ: tam boy, kenara dayalı diyagonal reklam paneli.
   system.css ÜZERİNE biner, sadece body.page-home içinde geçer.
   Kapatmak için: index.php → $homeStyle2026 = false
   ============================================================ */

/* ── Hero gövdesi: tam boy panel için dolgu sıfır, sabit min-yükseklik ── */
body.page-home .hero {
  padding: 0;
  min-height: clamp(380px, 40vw, 480px);
  display: flex;
  align-items: stretch;
}
body.page-home .hero > .container {
  display: flex;
  align-items: center;
  width: 100%;
}
body.page-home .hero-grid {
  grid-template-columns: 1fr;     /* sol içerik; sağ panel mutlak konumlu */
  width: 100%;
}
body.page-home .hero-left {
  max-width: 600px;
  padding: clamp(28px, 3.2vw, 48px) 0;
}

/* ════════════ MASAÜSTÜ: 2 kolon — sol yazı | sağ banner (taşma yok) ════════════ */
@media (min-width: 1025px) {
  /* hero'nun sağ yarısı = banner, EN SAĞ kenara mutlak sabit (ortada durmaz) */
  body.page-home .hero { overflow: hidden; min-height: clamp(380px, 30vw, 480px); }
  body.page-home .hero > .container { align-items: center; }

  body.page-home .hero-grid {
    grid-template-columns: 1fr;     /* sadece sol metin akışta */
    width: 100%;
  }
  body.page-home .hero-left {
    max-width: 500px;
    padding: clamp(28px, 3vw, 48px) 0;
  }

  body.page-home .hero-right {
    position: absolute;
    top: 0; bottom: 0; right: 0;    /* hero'nun en sağ kenarına dayalı */
    width: 48vw;
    margin: 0;
    display: flex;
    align-items: stretch;
  }

  body.page-home .kbad-in-hero,
  body.page-home .kbad-in-hero .kbad-wrap { width: 100%; height: 100%; }
  body.page-home .kbad-in-hero .container { max-width: none; padding: 0; width: 100%; height: 100%; }
  body.page-home .kbad-in-hero .kbad-stage {
    aspect-ratio: auto;
    width: 100%; height: 100%;
    border-radius: var(--r-lg) 0 0 var(--r-lg);  /* sol köşeler yuvarlak, sağ kenar düz */
    border: none;
    box-shadow: none;
    background: #fff;
  }
  body.page-home .kbad-in-hero .kbad-slide { background: #fff; }
  body.page-home .kbad-in-hero .kbad-img-el { object-fit: cover; background: #fff; }
  body.page-home .kbad-in-hero .kbad-nav-prev { left: 16px; }
  body.page-home .kbad-in-hero .kbad-nav-next { right: 16px; }
}

/* ── Banner okları her zeminde net görünsün (açık banner'da "geri" kayboluyordu) ── */
body.page-home .kbad-in-hero .kbad-nav {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
body.page-home .kbad-in-hero .kbad-nav span { color: #fff; }
body.page-home .kbad-in-hero .kbad-nav:hover {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ════════════ MOBİL/TABLET: panel metnin altına, tam genişlik ════════════ */
@media (max-width: 1024px) {
  body.page-home .hero { min-height: 0; padding-bottom: clamp(20px, 4vw, 36px); }
  body.page-home .kbad-in-hero { width: 100%; }
  body.page-home .kbad-in-hero .container { max-width: none; padding: 0; }
  body.page-home .kbad-in-hero .kbad-stage {
    aspect-ratio: 8 / 5;           /* 1600×1000 (1.6:1) ile birebir */
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: #fff;
  }
  body.page-home .kbad-in-hero .kbad-img-el { object-fit: cover; background: #fff; }
}

/* ════════════════════ IMMERSIVE 3D GİRİŞ SAHNESİ (laptop) ════════════════════ */
/* Sayfanın en üstünde tam ekran, scroll'la ilerleyen sinematik bölge.
   320vh yükseklik → içindeki sticky sahne pinlenir; aşağı inince site başlar. */
.kb-intro { position: relative; height: 320vh; background: #050b12; z-index: 1; }
.kb-intro-stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(var(--mint-hi-rgb),0.20), transparent 60%),
    radial-gradient(95% 80% at 82% 92%, rgba(56,120,180,0.22), transparent 60%),
    linear-gradient(180deg, #07151e 0%, #050b12 100%);
}
.kb-intro-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.kb-intro-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.kb-intro-beat {
  position: absolute; text-align: center; color: #eaf6f0;
  max-width: 780px; padding: 0 24px;
  opacity: 0; transform: translateY(26px); will-change: opacity, transform;
}
.kb-intro-beat h2 {
  font-family: var(--font-display, 'Instrument Sans', sans-serif);
  font-weight: 600; font-size: clamp(30px, 5vw, 66px);
  letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 14px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.kb-intro-beat h2 .accent {
  background: linear-gradient(115deg, var(--mint-hi) 0%, var(--mint-hi) 45%, #FDE68A 110%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.kb-intro-beat p { font-size: clamp(15px, 1.4vw, 19px); color: rgba(220,238,230,0.82); }
.kb-intro-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: rgba(220,238,230,0.6); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.kb-intro-hint .arrow { font-size: 18px; animation: kbHintBounce 1.6s ease-in-out infinite; }
@keyframes kbHintBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* hareket istemeyenler / 3D yüklenmezse giriş atlanır (JS de gizler) */
@media (prefers-reduced-motion: reduce) { .kb-intro { display: none; } }

/* ════════════════════ SCROLL ANİMASYONLARI (süper) ════════════════════ */
/* Bölümler scroll'da daha dramatik belirir: aşağıdan kayar + hafif ölçek + blur */
body.page-home .reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
body.page-home .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* kart/grid çocukları kademeli (stagger) gelir */
body.page-home .reveal-stagger > * {
  opacity: 0;
  transform: translateY(34px) scale(0.97);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body.page-home .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
body.page-home .reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.07s; }
body.page-home .reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.14s; }
body.page-home .reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.21s; }
body.page-home .reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.28s; }
body.page-home .reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.35s; }
body.page-home .reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.42s; }
body.page-home .reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
  body.page-home .reveal,
  body.page-home .reveal-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}