/* ===================================================================
   HERO — İnteraktif 3 Adım Süreç ("Logonuzu gönder → Bas → Kargola")
   Tam ekran, marka mavi/yeşil. Slider YOK. Merkezdeki ÜRÜN her turda
   değişir (kraft çanta → doypack → koli), her ürünün iki gerçek PNG
   katmanı vardır: boş hal (assets/img/*-bos.png) ve baskılı hal
   (assets/img/*.png). 2. adımda boş halin üzerine baskılı hal soldan
   sağa "reveal" olur (baskı yapılıyor efekti) ve "Baskı Hazır" onay
   rozeti (.kp-herox__stamp) belirir.
   Süreç durumu .kp-herox[data-active="0|1|2"], ürün tipi
   .kp-herox[data-product="0|1|2"]. Adım ikonları inline SVG (font bağımsız).
   =================================================================== */

.kp-herox{
  position:relative;width:100%;
  min-height:660px;height:100svh;max-height:900px;
  background:var(--grad-hero);
  overflow:hidden;color:#fff;
  margin-bottom:var(--sp-2xl);
  display:flex;align-items:center;
  /* İçeriği dikeyde yukarı taşı */
  padding-bottom:clamp(56px,12vh,128px);
}

/* ---- Dekoratif arka plan ---- */
.kp-herox__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kp-herox__blob{position:absolute;border-radius:50%;filter:blur(10px);opacity:.6}
.kp-herox__blob--1{top:-12%;right:-6%;width:560px;height:560px;background:radial-gradient(circle,rgba(140,195,66,.22),transparent 68%);animation:kpBlob 9s ease-in-out infinite}
.kp-herox__blob--2{bottom:-18%;left:-8%;width:600px;height:600px;background:radial-gradient(circle,rgba(15,117,188,.30),transparent 68%);animation:kpBlob 11s ease-in-out infinite reverse}
@keyframes kpBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.06)}}
.kp-herox__rings{
  position:absolute;top:50%;right:-160px;width:780px;height:780px;transform:translateY(-50%);
  background:
    radial-gradient(circle, transparent 0 38%, rgba(255,255,255,.05) 38% 39%, transparent 39%),
    radial-gradient(circle, transparent 0 49%, rgba(255,255,255,.045) 49% 50%, transparent 50%),
    radial-gradient(circle, transparent 0 60%, rgba(255,255,255,.04) 60% 61%, transparent 61%);
}

/* ---- Yerleşim ---- */
.kp-herox__inner{
  position:relative;z-index:2;width:100%;
  max-width:var(--container-max);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:54px;align-items:center;
}

/* =========================== SOL: METİN =========================== */
.kp-herox__content{max-width:560px}
.kp-herox__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  padding:8px 16px;border-radius:var(--r-full);
  font-size:.8125rem;font-weight:700;letter-spacing:.01em;margin-bottom:22px;backdrop-filter:blur(6px);
}
.kp-herox__eyebrow-ic{width:16px;height:16px;color:var(--c-secondary);animation:kpSpark 2.4s ease-in-out infinite}
@keyframes kpSpark{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.18) rotate(15deg);opacity:1}}
.kp-herox__title{
  font-family:var(--font-head);
  font-size:clamp(38px,5vw,68px);font-weight:800;line-height:1.04;letter-spacing:-.035em;
  margin:0 0 20px;color:#fff;
}
.kp-herox__title em{
  font-style:normal;
  background:linear-gradient(110deg,#7ec0ff 0%,var(--c-secondary) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.kp-herox__desc{
  font-size:1.0625rem;line-height:1.7;color:rgba(255,255,255,.80);
  max-width:480px;margin:0 0 30px;padding-left:18px;border-left:3px solid var(--c-secondary);
}
.kp-herox__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.kp-herox .kp-btn--glass{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(8px);
}
.kp-herox .kp-btn--glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
.kp-herox .kp-btn .material-symbols-outlined{font-size:19px}

/* Mini metrikler */
.kp-herox__metrics{display:flex;gap:30px;flex-wrap:wrap}
.kp-herox__metric{display:flex;flex-direction:column;line-height:1.1}
.kp-herox__metric strong{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:#fff}
.kp-herox__metric span{font-size:.8125rem;color:rgba(255,255,255,.6);margin-top:2px}
.kp-herox__metric + .kp-herox__metric{padding-left:30px;border-left:1px solid rgba(255,255,255,.15)}

/* =========================== SOL: ANİMASYON / SAĞ: PANEL =========================== */
.kp-herox__showcase{position:relative;display:flex;align-items:center;justify-content:center;transform:translateY(28px)}
.kp-herox__panel{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px}
.kp-herox__kicker{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  padding:7px 15px;border-radius:var(--r-full);
  font-size:.8rem;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(6px);
}
.kp-herox__heading{
  font-family:var(--font-head);
  font-size:clamp(18px,2.2vw,30px);font-weight:800;line-height:1.08;letter-spacing:-.03em;
  white-space:nowrap; /* başlık tek satırda kalsın, alt kutularla simetrik genişlik */
  /* Üst blok (kicker+başlık) alt adımlardan belirgin ayrılsın */
  margin:0 0 26px;color:#fff;
}
.kp-herox__heading em{font-style:normal;background:linear-gradient(110deg,#7ec0ff 0%,var(--c-secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* CTA satırı — WhatsApp (yeşil) + Hemen Başla (marka gradient), sağa yanaşık */
.kp-herox__ctas{
  align-self:flex-end;margin-top:30px;
  display:flex;align-items:stretch;justify-content:flex-end;gap:14px;flex-wrap:wrap;
}
/* CTA — havalı (gradient + glow), üst bölümden ayrı */
.kp-herox__cta{
  align-self:flex-end;margin-top:30px;
  background:var(--grad-brand);color:#fff;border:none;
  padding:16px 34px;border-radius:var(--r-full);font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  box-shadow:0 14px 30px rgba(15,117,188,.45);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease);
}
/* Satır içindeyken kendi hizalama/boşluğunu satır yönetir */
.kp-herox__ctas .kp-herox__cta{align-self:auto;margin-top:0}
.kp-herox__cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(15,117,188,.55);filter:brightness(1.05);color:#fff}
.kp-herox__cta .material-symbols-outlined{font-size:21px;transition:transform var(--dur) var(--ease)}
.kp-herox__cta:hover .material-symbols-outlined{transform:translateX(3px)}

/* ---- WhatsApp CTA ----
   Ürün detayındaki WhatsApp widget'ı (.kp-wachat) ile aynı dil: WhatsApp yeşili,
   beyaz avatar dairesi + sallanan logo, çevrimiçi nabzı, parlama süpürmesi ve
   ~7 sn'de bir beliren "yazıyor" balonu. Logo inline SVG (ikon fontuna bağımsız). */
.kp-herox__wa{
  position:relative;
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 26px 10px 11px;border-radius:var(--r-full);border:none;
  background:linear-gradient(135deg,#25D366 0%,#12b976 52%,#079e6d 100%);
  color:#fff;text-decoration:none;white-space:nowrap;
  box-shadow:0 14px 30px rgba(7,158,109,.45);
  animation:kpHxWaPulse 2.8s ease-in-out infinite;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.kp-herox__wa:hover{transform:translateY(-2px);color:#fff;filter:brightness(1.06);box-shadow:0 18px 40px rgba(7,158,109,.6)}
.kp-herox__wa:active{transform:translateY(0)}
/* Parlama süpürmesi — buton sınırını taşmasın diye maskeleyen sarmalayıcı */
.kp-herox__wa::before{
  content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.40) 46%,transparent 54%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:kpHxWaShine 3.6s ease-in-out infinite;
}
/* Avatar: beyaz daire + genişleyen dikkat halkası */
.kp-herox__wa-av{
  position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(4,60,42,.22);
}
.kp-herox__wa-av::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);animation:kpHxWaRing 2.8s ease-out infinite;
}
.kp-herox__wa-ic{display:inline-flex;transform-origin:50% 65%;animation:kpHxWaWiggle 3.4s ease-in-out infinite}
/* position:relative → parlama süpürmesi (::before) yazının ALTINDAN geçsin, okunurluk bozulmasın */
.kp-herox__wa-tx{position:relative;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.kp-herox__wa-tx strong{font-size:1.02rem;font-weight:700;letter-spacing:.01em}
.kp-herox__wa-tx small{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.88);margin-top:3px}
.kp-herox__wa-on{width:7px;height:7px;border-radius:50%;background:#eafff2;display:inline-block;animation:kpHxWaOn 1.9s infinite}
/* "Yazıyor" balonu: butonun üstünde belirip kaybolur (dikkat çekici, tıklamayı engellemez) */
.kp-herox__wa-bubble{
  position:absolute;left:8px;bottom:calc(100% + 10px);
  background:#fff;color:#1f2d24;font-size:.74rem;font-weight:600;
  padding:7px 12px;border-radius:12px 12px 12px 3px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(4,60,42,.28);
  opacity:0;transform:translateY(6px) scale(.94);transform-origin:0 100%;pointer-events:none;
  animation:kpHxWaBubble 7.5s ease-in-out infinite;
}
@keyframes kpHxWaPulse{0%,100%{box-shadow:0 14px 30px rgba(7,158,109,.45)}50%{box-shadow:0 14px 40px rgba(7,158,109,.68)}}
@keyframes kpHxWaShine{0%,55%{background-position:130% 0}80%,100%{background-position:-30% 0}}
@keyframes kpHxWaRing{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes kpHxWaWiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
@keyframes kpHxWaOn{0%{box-shadow:0 0 0 0 rgba(234,255,242,.7)}70%{box-shadow:0 0 0 7px rgba(234,255,242,0)}100%{box-shadow:0 0 0 0 rgba(234,255,242,0)}}
@keyframes kpHxWaBubble{
  0%,4%{opacity:0;transform:translateY(6px) scale(.94)}
  10%,32%{opacity:1;transform:translateY(0) scale(1)}
  40%,100%{opacity:0;transform:translateY(-4px) scale(.97)}
}

/* ---- Sahne ---- */
.kp-herox__stage{
  position:relative;height:560px;
  display:flex;align-items:center;justify-content:center;
}
.kp-herox__scene{
  --sc:1.5;
  position:relative;width:380px;height:360px;flex:none;display:flex;align-items:center;justify-content:center;
  transform:scale(var(--sc));transform-origin:center center;
  animation:kpFloat 3.6s ease-in-out infinite;
}
@keyframes kpFloat{0%,100%{transform:scale(var(--sc)) translateY(0)}50%{transform:scale(var(--sc)) translateY(-7px)}}

/* Zemin gölgesi */
.kp-herox__shadow{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  width:210px;height:24px;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%);
  filter:blur(3px);animation:kpShadow 3.6s ease-in-out infinite;transition:opacity .2s var(--ease);
}
@keyframes kpShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.82);opacity:.32}}

/* ---- ÜRÜN (3 SVG + overlay'ler) ---- */
.kp-herox__product{
  position:relative;width:284px;height:260px;z-index:2;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.4));
  transition:transform .28s var(--ease-spring);
}
.kp-herox__pwrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.9);
  transition:opacity .28s var(--ease),transform .3s var(--ease-spring);
}
.kp-herox__pwrap svg{display:block;width:100%;height:100%}
/* Her ürünün iki katmanı (boş + baskılı) üst üste biner */
.kp-herox__pimg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
/* Baskılı hal başta gizli; baskı adımında soldan sağa "reveal" olur */
.kp-herox__pimg--printed{opacity:0;clip-path:inset(0 100% 0 0)}
.kp-herox[data-active="1"] .kp-herox__pimg--printed{opacity:1;animation:kpPrintReveal .75s var(--ease) forwards}
.kp-herox[data-active="2"] .kp-herox__pimg--printed{opacity:1;clip-path:inset(0 0 0 0)}
@keyframes kpPrintReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.kp-herox[data-product="0"] .kp-herox__pwrap:nth-child(1),
.kp-herox[data-product="1"] .kp-herox__pwrap:nth-child(2),
.kp-herox[data-product="2"] .kp-herox__pwrap:nth-child(3){opacity:1;transform:scale(1)}

/* Baskı onayı rozeti — ürünler zaten baskılı geldiği için baskı animasyonu
   yerine sağ üst köşede yeşil "Baskı Hazır" onayı belirir (2. ve 3. adım) */
.kp-herox__stamp{
  position:absolute;right:2%;top:6%;z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:var(--r-full);padding:6px 14px 6px 6px;
  box-shadow:0 12px 26px rgba(11,20,27,.32);
  opacity:0;transform:translateY(-10px) scale(.85);transform-origin:top right;
  transition:opacity .2s var(--ease),transform .25s var(--ease-spring);
}
.kp-herox__stamp-ic{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);box-shadow:0 6px 14px rgba(140,195,66,.5);
}
.kp-herox__stamp-ic svg{width:22px;height:22px;display:block}
.kp-herox__stamp-tx{
  font-family:var(--font-head);font-weight:800;font-size:.86rem;letter-spacing:.01em;white-space:nowrap;
  color:var(--c-primary-darker);
}

/* SMS bildirimi ("Siparişiniz kargoya verildi") — gerçek telefon kilit
   ekranı push bildirimi gibi: nötr beyaz kart, "Mesajlar" yeşili app ikonu.
   Marka mavi/yeşil gradient kullanılmaz, böylece hero zemini ile karışmaz. */
.kp-herox__sms{
  position:absolute;top:-6px;left:50%;z-index:9;
  width:260px;max-width:78%;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;padding:10px 13px;
  box-shadow:0 20px 44px rgba(11,20,27,.34),0 2px 6px rgba(11,20,27,.12);
  opacity:0;transform:translate(-50%,-18px);
  transition:opacity .2s var(--ease),transform .25s var(--ease-spring);
  pointer-events:none;text-align:left;
}
/* "Mesajlar" app ikonu — gerçek SMS uygulaması yeşili (squircle) */
.kp-herox__sms-ic{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(180deg,#5bf675,#23c14a);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 4px 9px rgba(35,193,74,.4);
  display:flex;align-items:center;justify-content:center;
}
.kp-herox__sms-ic svg{display:block}
.kp-herox__sms-tx{display:flex;flex-direction:column;gap:1px;line-height:1.25;min-width:0;flex:1}
.kp-herox__sms-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:1px}
.kp-herox__sms-app{font-size:.66rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#9398a1}
.kp-herox__sms-time{font-size:.66rem;font-weight:500;color:#9398a1;flex-shrink:0}
.kp-herox__sms-tx strong{font-size:.82rem;font-weight:700;color:#1c1c1e;line-height:1.2}
.kp-herox__sms-tx small{font-size:.78rem;font-weight:400;color:#3a3a3c;line-height:1.3}

/* Düşen logo dosyası (1. adım) */
.kp-herox__drop{
  position:absolute;left:50%;top:-4px;transform:translateX(-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transition:opacity .2s var(--ease);
}
.kp-herox__drop-card{
  width:118px;height:90px;border-radius:13px;
  background:rgba(255,255,255,.97);
  border:2px dashed var(--c-primary);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  box-shadow:var(--s-lg);
}
.kp-herox__drop-logo{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);box-shadow:0 6px 14px rgba(15,117,188,.4);
}
.kp-herox__drop-logo svg{display:block}
.kp-herox__drop-card small{font-size:.74rem;font-weight:800;letter-spacing:.04em;color:var(--c-primary-darker)}
.kp-herox__drop-arrow{display:flex;line-height:0}

/* Hız çizgileri (3. adım) */
.kp-herox__speed{
  position:absolute;right:150px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));
  opacity:0;z-index:2;
}
.kp-herox__speed:nth-of-type(1){top:66%;width:60px}
.kp-herox__speed:nth-of-type(2){top:74%;width:100px}
.kp-herox__speed:nth-of-type(3){top:82%;width:52px}
.kp-herox__speed:nth-of-type(4){top:90%;width:84px}

/* ---- KAMYON + YOL (3. adım) ---- */
.kp-herox__truck{
  position:absolute;right:8px;bottom:34px;width:150px;z-index:3;
  opacity:0;transform:translateY(34px);
  transition:opacity .22s var(--ease),transform .25s var(--ease-spring);
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.3));
}
.kp-herox__truck svg{display:block;width:100%;height:auto}
.kp-herox__wheel{transform-box:fill-box;transform-origin:center}
.kp-herox__road{
  position:absolute;right:4px;bottom:24px;width:170px;height:4px;border-radius:2px;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 18px,transparent 18px 36px);
  opacity:0;transition:opacity .2s var(--ease);
}

/* ================= DURUMLAR ([data-active]) ================= */
/* --- Adım 1: Logonuzu Gönderin --- */
.kp-herox[data-active="0"] .kp-herox__drop{opacity:1;animation:kpDrop .75s var(--ease-spring) infinite}
.kp-herox[data-active="0"] .kp-herox__drop-arrow{animation:kpArrow .5s ease-in-out infinite}

/* --- Adım 2: Baskı Hazır onayı (ürünler baskılı gelir) --- */
.kp-herox[data-active="1"] .kp-herox__stamp{opacity:1;transform:translateY(0) scale(1);animation:kpStampPop .25s var(--ease-spring)}

/* --- Adım 3: Hızlıca Kargolayalım (kamyon) — onay rozeti görünmeye devam eder --- */
.kp-herox[data-active="2"] .kp-herox__stamp{opacity:1;transform:translateY(0) scale(1)}
.kp-herox[data-active="2"] .kp-herox__sms{opacity:1;transform:translate(-50%,0)}
.kp-herox[data-active="2"] .kp-herox__product{transform:translate(-72px,6px) scale(.82)}
.kp-herox[data-active="2"] .kp-herox__truck{opacity:1;transform:translateY(0);animation:kpDrive .55s ease-in-out infinite}
.kp-herox[data-active="2"] .kp-herox__wheel{animation:kpWheel .3s linear infinite}
.kp-herox[data-active="2"] .kp-herox__road{opacity:1;animation:kpRoad .25s linear infinite}
.kp-herox[data-active="2"] .kp-herox__shadow{opacity:0}
.kp-herox[data-active="2"] .kp-herox__speed{animation:kpSpeed .4s linear infinite}
.kp-herox[data-active="2"] .kp-herox__speed:nth-of-type(2){animation-delay:.06s}
.kp-herox[data-active="2"] .kp-herox__speed:nth-of-type(3){animation-delay:.13s}
.kp-herox[data-active="2"] .kp-herox__speed:nth-of-type(4){animation-delay:.2s}

@keyframes kpDrop{0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg)}50%{transform:translateX(-50%) translateY(-16px) rotate(3deg)}}
@keyframes kpArrow{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}
@keyframes kpStampPop{0%{opacity:0;transform:translateY(-10px) scale(.6)}55%{transform:translateY(0) scale(1.12)}100%{opacity:1;transform:translateY(0) scale(1)}}
/* Kargo: ürün kamyona iner (translateY) + hafif sürüş sallanması */
@keyframes kpDrive{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-1deg)}75%{transform:translateY(-1px) rotate(1deg)}}
@keyframes kpWheel{to{transform:rotate(360deg)}}
@keyframes kpRoad{to{background-position-x:-36px}}
@keyframes kpSpeed{0%{opacity:0;transform:translateX(0)}40%{opacity:1}100%{opacity:0;transform:translateX(52px)}}

/* ---- İnteraktif BÜYÜK adımlar (sağ panel, iki satır okunaklı) ---- */
.kp-herox__steps{display:flex;flex-direction:column;gap:14px}
.kp-herox__step{
  position:relative;display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;
  padding:18px 22px;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(9,19,29,.45);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.22);backdrop-filter:blur(8px);
  color:#fff;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.kp-herox__step:hover{background:rgba(15,29,42,.6);border-color:rgba(255,255,255,.26);transform:translateX(3px)}
.kp-herox__step.is-active{background:rgba(20,40,55,.62);border-color:rgba(140,195,66,.6);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.kp-herox__step-num{
  font-family:var(--font-head);font-size:1.05rem;font-weight:800;letter-spacing:.04em;
  color:rgba(255,255,255,.4);min-width:28px;flex-shrink:0;
}
.kp-herox__step.is-active .kp-herox__step-num{color:var(--c-secondary)}
.kp-herox__step-ic{
  flex-shrink:0;width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  transition:all var(--dur) var(--ease);
}
.kp-herox__step-ic .kp-herox__svgic{width:27px;height:27px}
.kp-herox__step.is-active .kp-herox__step-ic{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--s-primary);animation:kpStepPop .22s var(--ease-spring)}
@keyframes kpStepPop{0%{transform:scale(.8)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Metin: iki satır, büyük ve okunaklı */
.kp-herox__step-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.kp-herox__step-tx strong{font-size:1.28rem;font-weight:700;letter-spacing:-.01em;line-height:1.18}
.kp-herox__step-sub{font-size:1.02rem;font-weight:500;color:rgba(255,255,255,.8);line-height:1.3}
/* Tek satırlık kutular (Baskıyı Yapalım / Hızlıca Kargolayalım) — dikey ortalı, hafif büyük */
.kp-herox__step-tx--single{justify-content:center}
.kp-herox__step-tx--single strong{font-size:1.34rem}
/* Sağ ok */
.kp-herox__step-go{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-left:8px;color:rgba(255,255,255,.3);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);transform:translateX(-3px);
}
.kp-herox__step-go .kp-herox__svgic{width:22px;height:22px;stroke-width:2.2}
.kp-herox__step:hover .kp-herox__step-go{color:rgba(255,255,255,.7);transform:translateX(0)}
.kp-herox__step.is-active .kp-herox__step-go{color:var(--c-secondary);transform:translateX(0)}
/* İlerleme çubuğu — JS DWELL ile eşleşir */
.kp-herox__step-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--grad-brand)}
.kp-herox__step.is-active .kp-herox__step-bar{animation:kpStepBar 2.38s linear forwards}
@keyframes kpStepBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Ortak inline SVG ikon stili (step ikonları + ok) */
.kp-herox__svgic{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media(max-width:1300px){
  .kp-herox__scene{--sc:1.3}
  .kp-herox__stage{height:500px}
}
@media(max-width:1100px){
  .kp-herox__scene{--sc:1.15}
  .kp-herox__stage{height:450px}
}
@media(max-width:991px){
  .kp-herox{min-height:0;height:auto;max-height:none;padding:48px 0 44px}
  .kp-herox__inner{grid-template-columns:minmax(0,1fr);gap:30px}
  .kp-herox__rings{display:none}
  .kp-herox__showcase{order:1;max-width:520px;margin:0 auto;width:100%}
  .kp-herox__panel{order:2;max-width:560px;margin:0 auto;width:100%;align-items:flex-start}
  .kp-herox__scene{--sc:1.12;width:100%;max-width:380px;height:330px}
  .kp-herox__stage{height:380px}
}
@media(max-width:560px){
  /* MOBIL HERO TEK EKRANA SIGSIN.
     Onceden bolum 924px oluyordu (ekran 760px): gorsel tek basina 330px yer
     kapliyor, baslik ve 3 adim asagi itiliyor, "Hemen Başla"/"WhatsApp"
     butonlari KATLANIN ALTINDA kaliyordu. Masaustunde ise gorsel + baslik +
     adimlar + butonlar birlikte goruluyor. Asagidaki olculer mobilde ayni
     kompakt duzeni kurar (~660px). */
  .kp-herox{padding:22px 0 26px}
  .kp-herox__inner{gap:16px}
  .kp-herox__panel{gap:10px}
  .kp-herox__heading{font-size:clamp(21px,5.6vw,27px);line-height:1.14;margin-bottom:10px;white-space:normal}
  .kp-herox__stage{height:200px}
  .kp-herox__scene{--sc:.72;height:200px}
  /* Panel align-items:flex-start oldugu icin adim listesi icerigi kadar
     daraliyordu (245px / 337px); CTA'lar ise tam genislikte. Bu karisik
     gorunuyordu, masaustunde de adimlar tam genistir. */
  .kp-herox__steps{gap:9px;width:100%;align-self:stretch}
  .kp-herox__heading{align-self:stretch}
  .kp-herox__step{padding:10px 13px;gap:11px}
  .kp-herox__step-ic{width:36px;height:36px;border-radius:10px}
  .kp-herox__step-ic .kp-herox__svgic{width:19px;height:19px}
  .kp-herox__step-num{min-width:17px;font-size:.78rem}
  .kp-herox__step-tx strong{font-size:.94rem}
  .kp-herox__step-sub{font-size:.78rem}
  .kp-herox__step-go{display:none}
  /* CTA'lar alt alta, tam genişlik: küçük ekranda iki buton da rahat basılır.
     SIRA: üstte "Hemen Başla" (asıl eylem), altta "WhatsApp'la Başla". */
  .kp-herox__ctas{align-self:stretch;flex-direction:column;gap:9px;margin-top:14px}
  .kp-herox__cta{align-self:stretch;justify-content:center;margin-top:0}
  .kp-herox__ctas .kp-herox__cta{order:1;padding:12px 24px;font-size:1rem}
  .kp-herox__wa{order:2;justify-content:center;padding:7px 18px 7px 8px}
  .kp-herox__wa-av{width:34px;height:34px}
  .kp-herox__wa-tx strong{font-size:.94rem}
  .kp-herox__wa-tx small{font-size:.68rem}
  /* "Hemen Başla" ZEMİNE KARIŞMASIN.
     Hero zemini --grad-hero ile #0F75BC mavisinde bitiyor, butonun --grad-brand
     gradyanı da AYNI maviyle başlıyordu; mobilde buton arka planla neredeyse
     aynı renkte görünüyordu. Koyu zeminde en yüksek kontrast: beyaz zemin +
     marka mavisi yazı. Yeşil WhatsApp butonuyla da karışmaz. */
  .kp-herox__ctas .kp-herox__cta{
    background:#fff;color:var(--c-primary,#0F75BC);
    box-shadow:0 12px 28px rgba(0,0,0,.38);
  }
  .kp-herox__ctas .kp-herox__cta:hover,
  .kp-herox__ctas .kp-herox__cta:focus{
    background:#f2f8fd;color:var(--c-primary-dark,#0c5c96);
    box-shadow:0 16px 34px rgba(0,0,0,.45);filter:none;
  }
  /* "Yazıyor" balonu KUCUK EKRANDA GIZLENIR.
     Butonlar alt alta ve aralari dar oldugu icin balon, WhatsApp butonunun
     USTUNDEKI "Hemen Başla" butonunun uzerine biniyor ve yazisini ortuyordu.
     Balon tamamen dekoratiftir; gizlemek islevden bir sey goturmez. */
  .kp-herox__wa-bubble{display:none}
}
@keyframes kpHxWaBubbleM{
  0%,4%{opacity:0;transform:translate(-50%,6px) scale(.94)}
  10%,32%{opacity:1;transform:translate(-50%,0) scale(1)}
  40%,100%{opacity:0;transform:translate(-50%,-4px) scale(.97)}
}
@media(prefers-reduced-motion:reduce){
  .kp-herox__scene,.kp-herox__shadow,.kp-herox__blob,.kp-herox__eyebrow-ic,
  .kp-herox__drop,.kp-herox__drop-arrow,.kp-herox__product,.kp-herox__pimg--printed,
  .kp-herox__speed,.kp-herox__truck,.kp-herox__wheel,.kp-herox__road,.kp-herox__step-bar,.kp-herox__stamp,
  .kp-herox__wa,.kp-herox__wa::before,.kp-herox__wa-av::after,.kp-herox__wa-ic,.kp-herox__wa-on{animation:none !important}
  /* Animasyon kapalıyken balon hiç gösterilmez (aksi halde donuk kalırdı) */
  .kp-herox__wa-bubble{display:none}
  .kp-herox__pwrap{transition:opacity .2s linear}
  /* Baskı adımında baskılı hal animasyonsuz da görünür olsun */
  .kp-herox[data-active="1"] .kp-herox__pimg--printed{clip-path:inset(0 0 0 0)}
  .kp-herox[data-active="2"] .kp-herox__truck{transform:translateY(0)}
  .kp-herox[data-active="2"] .kp-herox__product{transform:translate(-72px,6px) scale(.82)}
}