/* ============================================================
   KATİBEM — ANA SAYFA VIDEO HERO
   SOL: video (kadın solda, cover-dolu, cream yok) · yapışkan, scroll-scrub
   SAĞ: yazı + ürün kartları (kayar)
   Mobil: video üstte OTOMATİK oynar + döngü, içerik altında (tam responsive)
   ============================================================ */
.kb-vhero{position:relative;background:var(--bg)}
.kb-vhero-grid{display:grid;grid-template-columns:clamp(300px,50%,660px) 1fr;align-items:start}

/* ---- SOL: yapışkan video (kadın solda) ---- */
.kb-vhero-media{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.kb-vhero-stage{position:absolute;inset:0}
.kb-vhero-poster,#kb-vhero-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 20%}
.kb-vhero-poster{background-position:50% 20%;background-size:cover;background-repeat:no-repeat;z-index:1}
#kb-vhero-video{z-index:2;opacity:0;transition:opacity .8s cubic-bezier(.22,.61,.36,1);
  will-change:transform;transform:translateZ(0)}
.kb-vhero-stage.is-ready #kb-vhero-video{opacity:1}
.kb-vhero-stage.is-failed #kb-vhero-video{display:none}
/* videonun beyaz zemini site kremine YUMUŞAK erisin (keskin gecis olmasin) */
.kb-vhero-media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 66%, rgba(245,241,234,.5) 88%, var(--bg) 100%),
    linear-gradient(180deg, transparent 90%, var(--bg) 100%)}
.kb-vhero-scrim{display:none}
.kb-vhero-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;pointer-events:none}
.kb-vhero-cue span{display:block;width:1px;height:40px;background:linear-gradient(#fff,transparent);
  animation:kb-cue 2.4s cubic-bezier(.22,.61,.36,1) infinite;mix-blend-mode:difference}
@keyframes kb-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- SAĞ: içerik, kayar ---- */
.kb-vhero-content{padding:0 clamp(20px,4vw,56px)}
.kb-vhero-left{padding:16vh 0 14vh;max-width:560px}
.kb-vhero-left .kb-eyebrow{display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--clay)}

.kb-vl-intro{margin-bottom:15vh}
.kb-vl-intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4vw,3.8rem);line-height:1.05;margin:14px 0 18px}
.kb-vl-intro h2 em{font-style:italic;color:var(--clay)}
.kb-vl-intro p{color:var(--ink-2);font-size:1.05rem;max-width:38ch}

/* öne çıkan (videodaki) ürün */
.kb-vl-feat{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;
  margin-bottom:15vh;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.kb-vl-feat-img{display:block;aspect-ratio:3/4;overflow:hidden}
.kb-vl-feat-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.kb-vl-feat:hover .kb-vl-feat-img img{transform:scale(1.05)}
.kb-vl-feat-body{padding:20px 22px 22px 0}
.kb-vl-tag{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.kb-vl-feat-body h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.22;margin-bottom:10px}
.kb-vl-feat-body h3 a{text-decoration:none;color:inherit}
.kb-vl-price{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-bottom:16px}
.kb-vl-price del{color:var(--ink-3);font-size:.82em;margin-right:6px;font-family:var(--sans)}
.kb-vl-price ins{text-decoration:none}

.kb-vl-label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:34px}
.kb-vl-cards{display:grid;gap:min(11vh,90px);margin-bottom:12vh}
.kb-vl-card{text-decoration:none;color:inherit;display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:center}
.kb-vl-card-img{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--bg-2)}
.kb-vl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.kb-vl-card:hover .kb-vl-card-img img{transform:scale(1.06)}
.kb-vl-card-name{font-family:var(--serif);font-size:1.18rem;line-height:1.25;display:block;margin-bottom:6px}
.kb-vl-card-price{color:var(--clay);font-family:var(--serif);font-size:1.08rem}
.kb-vl-card-price del{color:var(--ink-3);font-size:.82em;margin-right:5px;font-family:var(--sans)}
.kb-vl-card-price ins{text-decoration:none}
.kb-vl-all{margin-top:4px}

.kb-btn.kb-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.kb-btn.kb-btn-ghost:hover{background:var(--ink);color:#fff}

/* ---- STATİK (hareket-azalt): sol video kutusu poster ---- */
.kb-vhero.is-static #kb-vhero-video{display:none}
.kb-vhero.is-static .kb-vhero-cue{display:none}

/* ---- MOBİL: video TAM EKRAN yapışkan, kaydırınca SCRUB; içerik krem sayfa olarak üstüne çıkar ---- */
@media (max-width:820px){
  .kb-vhero-grid{display:block}
  .kb-vhero-media{position:sticky;top:0;height:100vh;height:100svh}
  .kb-vhero-poster,#kb-vhero-video{object-position:50% 10%}
  .kb-vhero-poster{background-position:50% 10%}
  .kb-vhero-cue{display:block;left:50%}
  .kb-vhero-content{position:relative;z-index:4;margin-top:-100vh;margin-top:-100svh;padding:0}
  .kb-vhero-media::after{background:linear-gradient(180deg, transparent 56%, rgba(245,241,234,.5) 84%, var(--bg) 100%)}
  .kb-vhero-left{max-width:none;margin-top:120vh;
    background:linear-gradient(180deg, transparent 0, var(--bg) 16vh);
    padding:20vh 20px 12vh}
  .kb-vl-intro{margin-bottom:9vh}
  .kb-vl-feat{margin-bottom:9vh}
  .kb-vl-cards{gap:7vh;margin-bottom:8vh}
}
@media (max-width:520px){
  .kb-vl-feat{grid-template-columns:1fr}
  .kb-vl-feat-img{aspect-ratio:4/5}
  .kb-vl-feat-body{padding:0 18px 20px}
}
@media (prefers-reduced-motion:reduce){ .kb-vhero-cue span{animation:none} }