/* ==========================================================================
   KONPOLEVA — ANA SAYFA
   Hero (.kph) · güven şeridi (.kpt-strip) · kapasite seçici (.kpk)
   neden polyester (.kpn) · teslimat (.kpd) · son çağrı (.kpc)
   SVG illüstrasyon animasyonları (.kp-illus). Renkler tasarım değişkenlerinden.
   Yalnız ana sayfada yüklenir (home/index @push('styles')).
   ========================================================================== */

/* ==========================================================================
   0) SVG illüstrasyonlar — ortak hareketler
   ========================================================================== */
.kp-illus{ display:block; width:100%; height:auto; overflow:visible; }
.kp-wave{ animation:kpWave 5.5s linear infinite; }
.kp-wave--b{ animation-duration:8s; animation-direction:reverse; }
@keyframes kpWave{ from{ transform:translateX(0); } to{ transform:translateX(-120px); } }
.kp-illus--dik .kp-wave{ animation-name:kpWaveS; animation-duration:4.5s; }
@keyframes kpWaveS{ from{ transform:translateX(0); } to{ transform:translateX(-60px); } }
.kp-water{ animation:kpLevel 7s ease-in-out infinite; }
@keyframes kpLevel{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.kp-bub{ animation:kpBub 4.2s ease-in infinite; opacity:0; }
.kp-bub--2{ animation-delay:1.1s; animation-duration:5s; }
.kp-bub--3{ animation-delay:2.2s; }
.kp-bub--4{ animation-delay:3s; animation-duration:3.6s; }
@keyframes kpBub{ 0%{ opacity:0; transform:translateY(0); } 15%{ opacity:.9; } 80%{ opacity:.6; } 100%{ opacity:0; transform:translateY(-92px); } }
.kp-caustic path{ animation:kpCaustic 6s linear infinite; }
.kp-caustic path:nth-child(2){ animation-duration:8s; animation-direction:reverse; }
.kp-caustic path:nth-child(3){ animation-duration:7s; }
@keyframes kpCaustic{ from{ transform:translateX(0); } to{ transform:translateX(-80px); } }

/* ==========================================================================
   1) Başlık koyu hero üzerinde (sabitlenmeden önce)
   ========================================================================== */
.is-home.has-kph .m-topbar{ background:transparent; border-bottom:1px solid rgba(255,255,255,.08); }
.is-home.has-kph .m-topbar a{ color:rgba(255,255,255,.88); }
.is-home.has-kph .m-topbar a:hover{ color:#fff; }
.is-home.has-kph .m-header:not(.is-stuck){ background:transparent; border-bottom-color:transparent; box-shadow:none; backdrop-filter:none; }
.is-home.has-kph .m-header:not(.is-stuck) .m-nav__item > a{ color:#fff; }
.is-home.has-kph .m-header:not(.is-stuck) .m-nav__item > a:hover,
.is-home.has-kph .m-header:not(.is-stuck) .m-nav__item > a[aria-current="page"]{ color:var(--c-sky); }
.is-home.has-kph .m-header:not(.is-stuck) .m-nav__item > a::after{ background:var(--c-primary-l); }
.is-home.has-kph .m-header:not(.is-stuck) .m-logo__renkli{ opacity:0; }
.is-home.has-kph .m-header:not(.is-stuck) .m-logo__beyaz{ opacity:1; }
.is-home.has-kph .m-header:not(.is-stuck) .m-hcall{ color:#fff; }
.is-home.has-kph .m-header:not(.is-stuck) .m-hcall__t small{ color:rgba(255,255,255,.66); }
.is-home.has-kph .m-header:not(.is-stuck) .m-hcall__ic{ background:rgba(255,255,255,.12); color:#fff; }
.is-home.has-kph .m-header:not(.is-stuck) .m-menu-btn{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); }

/* ==========================================================================
   2) HERO (.kph)
   ========================================================================== */
.kph{
  --kph-bottom: clamp(150px, 17vh, 176px);
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:linear-gradient(140deg, var(--c-ink-3) 0%, var(--c-ink) 36%, #0B3F7E 70%, var(--c-primary) 100%);
}
.is-home .kph{ padding-top:0; }
.kph .hxs__aura{ display:none; }

/* arka plan katmanları */
.kph__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.kph__glow{ position:absolute; border-radius:50%; filter:blur(60px); }
.kph__glow--1{ width:min(60vw,760px); aspect-ratio:1; right:-10%; top:-18%; background:radial-gradient(circle, rgba(var(--c-primary-l-rgb),.42), transparent 64%); animation:kphDrift 22s ease-in-out infinite alternate; }
.kph__glow--2{ width:min(50vw,640px); aspect-ratio:1; left:-14%; bottom:-30%; background:radial-gradient(circle, rgba(var(--c-primary-rgb),.5), transparent 62%); animation:kphDrift 28s ease-in-out infinite alternate-reverse; }
@keyframes kphDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-6%,8%) scale(1.12); } }
.kph__grid{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.11) 1px, transparent 1.4px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(100deg, transparent 20%, #000 60%, transparent 100%);
          mask-image:linear-gradient(100deg, transparent 20%, #000 60%, transparent 100%);
}
.kph__drop{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(var(--c-primary-l-rgb),.25)); animation:kphDrop 9s ease-in-out infinite; }
.kph__drop--1{ left:48%; top:24%; }
.kph__drop--2{ left:88%; top:62%; width:10px; height:10px; animation-delay:2.4s; }
.kph__drop--3{ left:56%; top:70%; width:8px; height:8px; animation-delay:4.8s; }
@keyframes kphDrop{ 0%,100%{ transform:translateY(0) rotate(-45deg); opacity:.35; } 50%{ transform:translateY(-22px) rotate(-45deg); opacity:.85; } }

/* su dalgaları */
.kph__waves{ position:absolute; left:0; bottom:-1px; z-index:1; width:100%; height:120px; pointer-events:none; }
.kph__wave{ animation:kphWave 26s linear infinite; }
.kph__wave--1{ fill:rgba(var(--c-primary-l-rgb),.16); }
.kph__wave--2{ fill:rgba(255,255,255,.08); animation-duration:34s; animation-direction:reverse; }
.kph__wave--3{ fill:var(--c-bg); animation-duration:40s; }
@keyframes kphWave{ from{ transform:translateX(0); } to{ transform:translateX(-1440px); } }

/* slayt */
.kph .hxs__swiper{ z-index:2; }
.kph .hxs__slide{ position:relative; overflow:hidden; min-height:clamp(620px, 88svh, 900px); }
.kph .hxs__grid{
  position:relative; z-index:2;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  padding-top:calc(var(--home-top) + clamp(16px, 3vh, 40px));
  padding-bottom:var(--kph-bottom);
}
.kph .hxs__content{ max-width:580px; }
.kph .hxs__eyebrow{
  gap:10px; padding:8px 16px 8px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; letter-spacing:.12em; font-size:.72rem;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.kph__dot{ width:8px; height:8px; border-radius:50%; background:var(--c-primary-l); box-shadow:0 0 0 0 rgba(var(--c-primary-l-rgb),.7); animation:kphPulse 2.2s ease-out infinite; }
@keyframes kphPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--c-primary-l-rgb),.7); } 100%{ box-shadow:0 0 0 12px rgba(var(--c-primary-l-rgb),0); } }
.kph .hxs__title{
  color:#fff; font-weight:700; font-size:clamp(2.1rem, 4.4vw, 3.8rem);
  line-height:1.04; letter-spacing:-.035em; margin-bottom:20px;
  text-wrap:balance;
}
.kph .hxs__lead{ color:rgba(255,255,255,.8); font-size:clamp(1rem,1.3vw,1.16rem); max-width:520px; }
.kph .hxs__chips li{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.kph .hxs__chips li::before{ background:var(--c-primary-l); box-shadow:0 0 10px var(--c-primary-l); }
.kph .btn--primary{ --bg:var(--c-primary-l); --bd:var(--c-primary-l); --fg:var(--c-ink); }
.kph .btn--primary:hover{ box-shadow:0 14px 30px rgba(var(--c-primary-l-rgb),.35); }

/* fotoğraflı slayt */
.kph__photo{ position:absolute; inset:0; z-index:0; }
.kph__photo img{ width:100%; height:100%; object-fit:cover; }
.kph__photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(var(--c-ink-rgb),.94) 0%, rgba(var(--c-ink-rgb),.72) 45%, rgba(var(--c-ink-rgb),.3) 100%); }

/* sahne */
.kph__stage{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:clamp(320px, 38vw, 520px); }
.kph__halo{ position:absolute; left:50%; top:52%; width:min(96%,600px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(var(--c-primary-l-rgb),.28) 0%, rgba(255,255,255,.04) 45%, transparent 68%); }
.kph__halo::after{ content:""; position:absolute; inset:9%; border-radius:50%; border:1px dashed rgba(255,255,255,.18); animation:kphSpin 70s linear infinite; }
@keyframes kphSpin{ to{ transform:rotate(360deg); } }
.kph__art{ position:relative; z-index:2; }
.kph__art--main{ width:min(100%, 640px); animation:kphFloat 7s ease-in-out infinite; }
@keyframes kphFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.kph__product{ position:relative; z-index:2; max-height:clamp(260px,32vw,460px); width:auto; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
/* Fotoğraflı slayt + şeffaf ürün (Fiberko düzeni): arka plan yavaşça yakınlaşır,
   ürün sağdan süzülerek gelir, altında yumuşak zemin gölgesi */
.swiper-slide-active .kph__photo img{ animation:kphDrift 9s var(--ease) both; }
@keyframes kphDrift{ from{ transform:scale(1.12); } to{ transform:scale(1.04); } }
.has-photo .kph__photo::after{ background:linear-gradient(100deg, rgba(var(--c-ink-rgb),.95) 0%, rgba(var(--c-ink-rgb),.78) 40%, rgba(var(--c-ink-rgb),.42) 72%, rgba(var(--c-ink-rgb),.55) 100%),
  radial-gradient(60% 70% at 72% 55%, rgba(var(--c-primary-l-rgb),.22), transparent 70%); }
.kph__stage--urun .kph__product{ max-height:clamp(280px,36vw,520px); max-width:100%; filter:drop-shadow(0 34px 44px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(var(--c-primary-l-rgb),.18)); }
.kph__floor{ position:absolute; z-index:1; left:50%; bottom:6%; width:70%; height:34px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter:blur(4px); }
.swiper-slide-active .kph__stage--urun .kph__product{ animation:kphIn 1s var(--ease) .12s both, kphFloat 7s ease-in-out 1.2s infinite; }
.has-photo .kph__halo{ opacity:.7; }
.kph .hxs__tabthumb img{ width:100%; height:100%; object-fit:cover; }
.kph .hxs__tabthumb.is-cutout img{ object-fit:contain; padding:5px; }
/* Beş kart tek satıra sığsın: uzun başlıklar satırı genişletmesin (Fiberko ile aynı) */
.kph .hxs__tabs{ min-width:0; flex:1 1 0; }
/* Fotoğrafın üst şeridi (menü altı) daha koyu: arka plandaki yazılar menüyle karışmasın */
.has-photo .kph__photo::before{ content:""; position:absolute; inset:0 0 auto; height:34%; z-index:1;
  background:linear-gradient(180deg, rgba(var(--c-ink-rgb),.85), transparent); }

.kph__lineup{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; width:min(100%,640px); }
.kph__lineup .kph__art--s{ width:19%; margin-right:-2%; }
.kph__lineup .kph__art--m{ width:28%; margin-right:-4%; }
.kph__lineup .kph__art--l{ width:60%; }
.kph__lineup .kph__art{ animation:kphFloat 7s ease-in-out infinite; }
.kph__lineup .kph__art--m{ animation-delay:.6s; }
.kph__lineup .kph__art--l{ animation-delay:1.2s; }

.kph__pair{ position:relative; z-index:2; width:min(100%,640px); aspect-ratio:640/470; }
.kph__pair .kph__art--back{ position:absolute; right:2%; top:0; width:30%; opacity:.95; animation:kphFloat 8s ease-in-out .8s infinite; }
.kph__pair .kph__art--front{ position:absolute; left:0; bottom:0; width:86%; animation:kphFloat 7s ease-in-out infinite; }

.kph__badge{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--c-ink);
  font-family:var(--f-head); font-weight:700; font-size:.82rem;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.kph__badge i{ color:var(--c-primary); }
.kph__badge--a{ left:4%; top:12%; animation:kphFloat 6s ease-in-out .3s infinite; }
.kph__badge--b{ right:2%; bottom:12%; animation:kphFloat 6.5s ease-in-out 1s infinite; }

/* giriş hareketi */
.swiper-slide-active .kph__stage .kph__art,
.swiper-slide-active .kph__stage .kph__lineup,
.swiper-slide-active .kph__stage .kph__pair{ animation-name:kphIn, kphFloat; animation-duration:1s, 7s; animation-timing-function:var(--ease), ease-in-out; animation-iteration-count:1, infinite; animation-delay:.1s, 1.1s; animation-fill-mode:both, none; }
@keyframes kphIn{ from{ opacity:0; transform:translateX(40px) scale(.96); } to{ opacity:1; transform:none; } }

/* alt kartlar */
.kph .hxs__navwrap{ z-index:5; bottom:clamp(40px, 6vh, 56px); }
.kph .hxs__tab{
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.2); color:#fff;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 14px 34px rgba(0,0,0,.25);
  flex-direction:row; justify-content:flex-start; text-align:start; font-family:inherit;
}
.kph .hxs__tab:hover{ background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); }
.kph .hxs__tabname{ color:#fff; font-size:.95rem; }
.kph .hxs__tabdesc{ color:rgba(255,255,255,.66); }
.kph .hxs__progress{ background:rgba(255,255,255,.22); }
.kph .hxs__fill{ background:var(--c-primary-l); }
.kph .hxs__tabthumb{ width:58px; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); box-shadow:none; }
.kph__tabic svg{ width:24px; height:24px; fill:var(--c-primary-l); }
.kph .hxs__tab.is-active{ background:#fff; border-color:#fff; color:var(--c-ink); box-shadow:0 22px 46px rgba(0,0,0,.32); }
.kph .hxs__tab.is-active .hxs__tabname{ color:var(--c-ink); }
.kph .hxs__tab.is-active .hxs__tabdesc{ color:var(--c-muted); }
.kph .hxs__tab.is-active .hxs__progress{ background:rgba(var(--c-ink-rgb),.12); }
.kph .hxs__tab.is-active .hxs__fill{ background:var(--c-primary); }
.kph .hxs__tab.is-active .hxs__tabthumb{ background:var(--c-primary-soft); border-color:var(--c-line); }
.kph .hxs__tab.is-active .kph__tabic svg{ fill:var(--c-primary); }
.kph .hxs__arrow{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); color:#fff; box-shadow:none; }
.kph .hxs__arrow:hover{ background:var(--c-primary-l); border-color:var(--c-primary-l); color:var(--c-ink); }

@media (max-width:980px){
  .kph .hxs__slide{ min-height:0; }
  .kph .hxs__grid{ grid-template-columns:1fr; text-align:center; padding-inline:var(--gut);
    padding-top:calc(var(--home-top) + 28px); padding-bottom:calc(var(--kph-bottom) + 10px); }
  .kph .hxs__content{ margin-inline:auto; }
  .kph .hxs__lead{ margin-inline:auto; }
  .kph__stage{ min-height:0; margin-top:26px; }
  .kph__art--main, .kph__lineup, .kph__pair{ width:min(100%, 520px); }
}
@media (max-width:560px){
  .kph{ --kph-bottom:128px; }
  .kph .hxs__title{ font-size:clamp(1.8rem, 8.6vw, 2.3rem); }
  .kph .hxs__lead{ font-size:.97rem; }
  .kph .hxs__chips{ justify-content:center; gap:7px; }
  .kph .hxs__chips li{ font-size:.72rem; padding:7px 11px; }
  .kph .hxs__cta{ justify-content:center; }
  .kph .hxs__cta .btn{ flex:1 1 100%; }
  .kph__badge{ font-size:.7rem; padding:7px 11px; }
  .kph__badge--a{ left:0; top:2%; }
  .kph__badge--b{ right:0; bottom:2%; }
  .kph .hxs__tabthumb{ width:44px; }
  .kph .hxs__navwrap{ bottom:34px; }
  .kph__waves{ height:80px; }
}

/* ==========================================================================
   3) Güven şeridi
   ========================================================================== */
.kpt-strip{ position:relative; z-index:3; background:var(--c-bg); padding:8px 0 clamp(28px,4vw,48px); }
.kpt-strip__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.kpt-strip__item{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  box-shadow:0 18px 40px -26px rgba(var(--c-ink-rgb),.35);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.kpt-strip__item:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--c-primary) 35%, var(--c-line)); }
.kpt-strip__ic{ flex:none; width:48px; height:48px; border-radius:50% 50% 50% 14px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--c-primary-l), var(--c-primary)); color:#fff; font-size:1.05rem;
  box-shadow:0 10px 22px -8px rgba(var(--c-primary-rgb),.6); }
.kpt-strip__item b{ display:block; font-family:var(--f-head); font-size:1.02rem; color:var(--c-ink); line-height:1.2; }
.kpt-strip__item small{ display:block; font-size:.84rem; color:var(--c-muted); margin-top:2px; }
@media (max-width:1024px){ .kpt-strip__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .kpt-strip__grid{ grid-template-columns:1fr; gap:10px; } .kpt-strip__item{ padding:14px 16px; } }

/* ==========================================================================
   4) KAPASİTE SEÇİCİ (.kpk) — blueprint
   ========================================================================== */
.kpk{
  --kpk-dur:4800ms;
  --kpk-line:rgba(143,216,250,.2);
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding-block:clamp(72px,8vw,112px);
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(var(--c-primary-rgb),.35), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(var(--c-primary-l-rgb),.14), transparent 70%),
    linear-gradient(rgba(143,216,250,.06) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(143,216,250,.06) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(rgba(143,216,250,.025) 1px, transparent 1px) 0 0/12px 12px,
    linear-gradient(90deg, rgba(143,216,250,.025) 1px, transparent 1px) 0 0/12px 12px,
    var(--c-ink-3);
}
.kpk__head{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px 60px; align-items:end; margin-bottom:clamp(28px,3.4vw,44px); }
.kpk__eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--f-head); font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--c-sky); }
.kpk__eyebrow::before{ content:""; width:34px; height:2px; background:currentColor; border-radius:2px; }
.kpk__title{ margin:14px 0 0; color:#fff; font-size:clamp(1.9rem,3.8vw,3.1rem); line-height:1.05; letter-spacing:-.03em; }
.kpk__text{ margin:0; color:rgba(255,255,255,.66); font-size:1.02rem; max-width:470px; justify-self:end; }

.kpk__board{
  display:grid; grid-template-columns:210px minmax(0,1fr) 300px; gap:18px;
  padding:16px; border-radius:30px;
  background:rgba(var(--c-ink-rgb),.55);
  border:1px solid var(--kpk-line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}

/* liste */
.kpk__list{ display:flex; flex-direction:column; gap:5px; }
.kpk__opt{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px;
  padding:8px 14px 10px; border-radius:14px; text-align:start;
  color:rgba(255,255,255,.66); border:1px solid transparent; background:transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.kpk__opt:hover{ background:rgba(143,216,250,.07); color:#fff; }
.kpk__opt:focus-visible{ outline:2px solid var(--c-primary-l); outline-offset:1px; }
.kpk__opt-ton{ font-family:var(--f-head); font-size:.9rem; }
.kpk__opt-ton b{ font-size:1.12rem; font-weight:800; color:inherit; margin-right:2px; }
.kpk__opt-lt{ font-size:.74rem; letter-spacing:.04em; opacity:.75; font-variant-numeric:tabular-nums; }
.kpk__opt-bar{ grid-column:1/-1; height:2px; border-radius:2px; background:rgba(143,216,250,.12); overflow:hidden; }
.kpk__opt-bar i{ display:block; height:100%; width:100%; background:var(--c-primary-l); transform:scaleX(0); transform-origin:left center; }
.kpk__opt.is-active{ background:linear-gradient(120deg, rgba(var(--c-primary-l-rgb),.2), rgba(var(--c-primary-rgb),.12)); border-color:rgba(143,216,250,.45); color:#fff; }
.kpk__opt.is-active .kpk__opt-bar i{ transform:scaleX(1); }
.kpk.is-playing .kpk__opt.is-active .kpk__opt-bar i{ animation:kpkBar var(--kpk-dur) linear both; }
.kpk.is-paused .kpk__opt.is-active .kpk__opt-bar i{ animation-play-state:paused; }
@keyframes kpkBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* sahne */
.kpk__stage{
  position:relative; min-width:0; border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; padding-top:40px;
  background:linear-gradient(180deg, rgba(6,26,48,.3), rgba(6,26,48,.75));
  border:1px dashed rgba(143,216,250,.3);
  min-height:380px;
}
.kpk__tag{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:rgba(143,216,250,.12); border:1px solid rgba(143,216,250,.3); color:var(--c-sky); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.kpk__corner{ position:absolute; width:18px; height:18px; border:0 solid rgba(143,216,250,.6); }
.kpk__corner--tl{ top:10px; right:10px; border-width:1.5px 1.5px 0 0; }
.kpk__corner--br{ bottom:10px; left:10px; border-width:0 0 1.5px 1.5px; }
.kpk__svg{ display:block; width:100%; height:auto; }
.kpk__human{ fill:rgba(143,216,250,.16); stroke:var(--c-sky); stroke-width:1.4; }
.kpk__tank{ transform:scale(var(--s, 1)); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.kpk__body{ fill:rgba(143,216,250,.07); stroke:var(--c-sky); stroke-width:2; vector-effect:non-scaling-stroke; }
.kpk__cap{ fill:rgba(143,216,250,.16); stroke:var(--c-sky); stroke-width:2; vector-effect:non-scaling-stroke; }
.kpk__band{ fill:none; stroke:rgba(143,216,250,.45); stroke-width:1.2; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.kpk__man{ fill:var(--c-sky); }
.kpk__feet{ fill:rgba(143,216,250,.45); }
.kpk__inside{ fill:rgba(6,26,48,.45); }
.kpk__water.kp-wave{ animation-name:kpkWave; animation-duration:3.4s; }
@keyframes kpkWave{ from{ transform:translateX(0); } to{ transform:translateX(30px); } }
.kpk__label{ transform:translate(480px, calc(380px - 70px * var(--s, 1) - 16px)); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.kpk__label rect{ fill:var(--c-primary); stroke:rgba(255,255,255,.35); }
.kpk__label text{ fill:#fff; font-family:var(--f-head); font-weight:700; font-size:15px; }
.kpk__note{ margin:0; padding:10px 16px 14px; font-size:.78rem; color:rgba(255,255,255,.55); text-align:center; }

/* bilgi */
.kpk__info{ display:flex; flex-direction:column; justify-content:center; padding:18px 12px 18px 6px; min-width:0; }
.kpk__big{ display:flex; flex-direction:column; gap:4px; }
.kpk__num{ display:flex; align-items:baseline; gap:10px; font-family:var(--f-head); line-height:.9; }
.kpk__num b{ font-size:clamp(4rem,7vw,6.2rem); font-weight:800; letter-spacing:-.05em; color:#fff; font-variant-numeric:tabular-nums; }
.kpk__num small{ font-size:1.6rem; font-weight:600; color:var(--c-sky); }
.kpk__lt{ font-family:var(--f-head); font-size:1.4rem; color:rgba(255,255,255,.78); }
.kpk__lt b{ color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.kpk__name{ margin:12px 0 0; font-size:.95rem; color:rgba(255,255,255,.62); }
.kpk__scale{ margin-top:22px; }
.kpk__scale-t{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px; }
.kpk__scale-bar{ position:relative; display:block; height:8px; border-radius:8px; background:linear-gradient(90deg, rgba(143,216,250,.15), rgba(143,216,250,.4)); }
.kpk__scale-bar i{ position:absolute; top:50%; left:var(--p, 0%); width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(var(--c-primary-l-rgb),.35); transition:left .9s cubic-bezier(.2,.8,.2,1); }
.kpk__scale-lim{ display:flex; justify-content:space-between; margin-top:8px; font-size:.74rem; color:rgba(255,255,255,.5); }
.kpk__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.kpk__btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-family:var(--f-head); font-weight:700; font-size:.92rem; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.kpk__btn--main{ background:var(--c-primary-l); color:var(--c-ink); padding-right:14px; }
.kpk__btn--main i{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(var(--c-ink-rgb),.12); font-size:.78rem; transition:transform .3s var(--ease); }
.kpk__btn--main:hover{ background:#fff; color:var(--c-ink); }
.kpk__btn--main:hover i{ transform:rotate(-45deg); }
.kpk__btn--ghost{ border:1px solid rgba(255,255,255,.3); color:#fff; }
.kpk__btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--c-ink); }
.kpk__help{ margin:18px 0 0; font-size:.84rem; color:rgba(255,255,255,.55); }
.kpk__help i{ color:var(--c-sky); margin-right:6px; }

@media (max-width:1180px){
  .kpk__board{ grid-template-columns:190px minmax(0,1fr); }
  .kpk__info{ grid-column:1/-1; display:grid; grid-template-columns:auto 1fr; gap:6px 40px; align-items:center; padding:10px 16px 16px; }
  .kpk__big{ grid-row:span 2; }
  .kpk__name{ margin:0; }
  .kpk__scale{ margin-top:0; }
  .kpk__cta, .kpk__help{ grid-column:1/-1; }
}
@media (max-width:820px){
  .kpk__head{ grid-template-columns:1fr; }
  .kpk__text{ justify-self:start; }
  .kpk__board{ grid-template-columns:1fr; padding:12px; border-radius:24px; }
  .kpk__list{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:6px; padding-bottom:4px; scrollbar-width:none; }
  .kpk__list::-webkit-scrollbar{ display:none; }
  .kpk__opt{ flex:0 0 auto; min-width:98px; scroll-snap-align:center; border-color:rgba(143,216,250,.14); }
  .kpk__stage{ min-height:0; }
  .kpk__info{ grid-template-columns:1fr; gap:0; padding:8px 6px 6px; }
  .kpk__big{ grid-row:auto; }
  .kpk__name{ margin-top:10px; }
  .kpk__scale{ margin-top:18px; }
}
@media (max-width:520px){
  .kpk__num b{ font-size:3.6rem; }
  .kpk__lt{ font-size:1.15rem; }
  .kpk__cta .kpk__btn{ flex:1 1 100%; justify-content:center; }
  .kpk__tag{ top:10px; left:10px; font-size:.66rem; }
}

/* ==========================================================================
   5) NEDEN POLYESTER (.kpn)
   ========================================================================== */
.kpn{ position:relative; padding-block:clamp(72px,8vw,112px); background:var(--c-bg); overflow:hidden; }
.kpn::before{ content:""; position:absolute; right:-10%; top:-30%; width:620px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--c-primary-soft), transparent 70%); z-index:0; }
.kpn .mx{ position:relative; z-index:1; }
.kpn__head{ max-width:720px; margin:0 auto clamp(34px,4vw,54px); text-align:center; }
.kpn__head h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); letter-spacing:-.03em; }
.kpn__head p{ color:var(--c-muted); font-size:1.05rem; margin:0; }
.kpn__grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; }
.kpn__item{
  position:relative; padding:28px 22px 26px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, #fff, var(--c-surface));
  border:1px solid var(--c-line); text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.kpn__item:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.kpn__drop{
  width:66px; height:66px; margin:0 auto 18px; display:grid; place-items:center;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:linear-gradient(135deg, var(--c-primary-l), var(--c-primary));
  box-shadow:0 16px 30px -12px rgba(var(--c-primary-rgb),.65);
}
.kpn__drop i{ transform:rotate(45deg); color:#fff; font-size:1.35rem; }
.kpn__item h3{ font-size:1.12rem; margin-bottom:6px; }
.kpn__item p{ margin:0; font-size:.92rem; color:var(--c-muted); line-height:1.55; }
@media (max-width:1100px){ .kpn__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:700px){ .kpn__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .kpn__item{ padding:22px 14px; } .kpn__item:last-child{ grid-column:1/-1; } }

/* ==========================================================================
   6) TESLİMAT (.kpd)
   ========================================================================== */
.kpd{ padding-block:clamp(72px,8vw,112px); background:var(--c-surface); overflow:hidden; }
.kpd__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(30px,5vw,70px); align-items:center; }
.kpd__text h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); letter-spacing:-.03em; }
.kpd__text > p{ color:var(--c-muted); font-size:1.03rem; }
.kpd__cities{ list-style:none; padding:0; margin:24px 0 28px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kpd__cities li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid var(--c-line); }
.kpd__cities li > i{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--c-primary-soft); color:var(--c-primary); }
.kpd__cities li.is-hq{ background:var(--c-ink); border-color:var(--c-ink); }
.kpd__cities li.is-hq > i{ background:var(--c-primary); color:#fff; }
.kpd__cities li.is-hq b{ color:#fff; }
.kpd__cities li.is-hq small{ color:rgba(255,255,255,.62); }
.kpd__cities b{ display:block; font-family:var(--f-head); color:var(--c-ink); line-height:1.2; }
.kpd__cities small{ display:block; font-size:.78rem; color:var(--c-muted); }
.kpd__map{ position:relative; padding:clamp(14px,2vw,26px); border-radius:var(--r-xl); background:#fff; border:1px solid var(--c-line); box-shadow:0 40px 80px -50px rgba(var(--c-ink-rgb),.45); }
.kpd__canvas{ position:relative; }
.kpd__canvas img{ display:block; width:100%; height:auto; }
.kpd__overlay{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.kpd__routes path{ fill:none; stroke:var(--c-primary); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:6 7; animation:kpdDash 1.6s linear infinite; }
@keyframes kpdDash{ to{ stroke-dashoffset:-26; } }
.kpd__pin circle{ fill:#fff; stroke:var(--c-primary); stroke-width:3.5; }
.kpd__pin--hq circle{ fill:var(--c-primary); stroke:#fff; }
.kpd__pin--hq .kpd__pulse{ fill:rgba(var(--c-primary-rgb),.3); stroke:none; transform-box:fill-box; transform-origin:center; animation:kpdPulse 2.2s ease-out infinite; }
@keyframes kpdPulse{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(3); opacity:0; } }
.kpd__lbl{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, calc(-100% - 12px));
  padding:5px 11px; border-radius:999px; white-space:nowrap;
  background:#fff; color:var(--c-ink); font-family:var(--f-head); font-weight:700; font-size:.8rem;
  box-shadow:0 8px 20px rgba(var(--c-ink-rgb),.18);
}
.kpd__lbl--konya{ background:var(--c-ink); color:#fff; }
.kpd__lbl--antalya, .kpd__lbl--mersin{ transform:translate(-50%, 14px); }
.kpd__lbl--isparta{ transform:translate(calc(-100% - 12px), -50%); }
@media (max-width:960px){ .kpd__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .kpd__cities{ grid-template-columns:1fr 1fr; gap:8px; } .kpd__cities li{ padding:10px; gap:9px; } .kpd__cities li > i{ width:32px; height:32px; } .kpd__lbl{ font-size:.66rem; padding:3px 8px; } }

/* ==========================================================================
   7) SON ÇAĞRI (.kpc)
   ========================================================================== */
.kpc{ padding:clamp(20px,3vw,40px) 0 clamp(72px,8vw,100px); background:transparent; position:relative; z-index:1; margin-bottom:-60px; }
.kpc__box{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(34px,5vw,70px) clamp(24px,5vw,70px);
  border-radius:var(--r-xl);
  background:linear-gradient(125deg, var(--c-ink) 0%, #0B3F7E 55%, var(--c-primary) 100%);
  box-shadow:0 40px 80px -40px rgba(var(--c-primary-rgb),.6);
}
.kpc__waves{ position:absolute; left:0; bottom:0; width:100%; height:44%; z-index:-1; }
.kpc__waves path:first-child{ fill:rgba(var(--c-primary-l-rgb),.14); }
.kpc__waves path:last-child{ fill:rgba(255,255,255,.06); }
.kpc__art{ position:absolute; right:clamp(10px,6vw,90px); bottom:-26px; width:clamp(160px,18vw,230px); z-index:-1; opacity:.95; }
.kpc__body{ max-width:640px; }
.kpc__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-head); font-weight:700; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-sky); }
.kpc__eyebrow::before{ content:""; width:30px; height:2px; background:currentColor; border-radius:2px; }
.kpc h2{ color:#fff; font-size:clamp(1.8rem,3.8vw,3rem); line-height:1.06; letter-spacing:-.03em; margin:14px 0 14px; }
.kpc__body > p{ color:rgba(255,255,255,.8); font-size:1.05rem; }
.kpc__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.kpc__hours{ margin:18px 0 0; font-size:.88rem; color:rgba(255,255,255,.62); }
.kpc__hours i{ color:var(--c-sky); margin-right:6px; }
@media (max-width:900px){ .kpc__art{ opacity:.25; } }
@media (max-width:560px){ .kpc__btns .btn{ flex:1 1 100%; } .kpc__art{ display:none; } }

.is-home .m-header.is-stuck{ background:rgba(255,255,255,.97); }
@media (max-width:640px){
  .kp-urunler .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .kp-urunler .grid-4 > *:nth-child(n+5){ display:none; }
}
@media (max-width:520px){ .kpd__lbl--antalya, .kpd__lbl--isparta, .kpd__lbl--mersin{ display:none; } }

/* footer'ın dalgası CTA kutusunun arkasına denk gelsin */
.is-home .m-footer{ padding-top:70px; }

/* ==========================================================================
   Hareket azaltma
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .kp-wave, .kp-water, .kp-bub, .kp-caustic path,
  .kph__glow, .kph__drop, .kph__wave, .kph__halo::after, .kph__dot,
  .kph__art, .kph__lineup, .kph__pair, .kph__badge,
  .kpd__routes path, .kpd__pulse{ animation:none !important; }
  .kp-bub{ opacity:0; }
  .kpk__tank, .kpk__label, .kpk__scale-bar i{ transition:none; }
  .kpk.is-playing .kpk__opt.is-active .kpk__opt-bar i{ animation:none; }
}

/* ---------- Kapasite seçici: fotoğraflı sahne (gerçek ürün, şeffaf) ---------- */
.kpk__stage--foto{ display:flex; flex-direction:column; }
.kpk__isik{ position:absolute; left:50%; top:46%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(31,181,240,.30) 0%, rgba(11,99,197,.12) 38%, transparent 68%); }
.kpk__vitrin{ position:relative; flex:1; min-height:clamp(300px,34vw,440px); margin:28px 18px 0; }
.kpk__foto{ position:absolute; left:50%; bottom:16%; z-index:2; height:calc(var(--h,1) * 78%); width:auto; max-width:92%; object-fit:contain;
  transform:translate(-50%, 18px) scale(.94); opacity:0; filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
  transition:opacity .55s var(--ease), transform .7s var(--ease), height .7s var(--ease); }
.kpk__foto.is-active{ opacity:1; transform:translate(-50%, 0) scale(1); }
.kpk__zemin{ position:absolute; left:50%; bottom:12%; z-index:1; width:62%; height:30px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
.kpk__zemin::after{ content:""; position:absolute; left:-30%; right:-30%; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(143,216,250,.55), transparent); }
.kpk__olcu{ position:absolute; top:16px; left:16px; z-index:3; display:flex; gap:8px; }
.kpk__olcu[hidden]{ display:none; }
.kpk__olcu span{ display:flex; flex-direction:column; padding:8px 14px; border-radius:14px; background:rgba(255,255,255,.08);
  border:1px solid rgba(143,216,250,.25); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.kpk__olcu small{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.kpk__olcu b{ font-family:var(--f-head); font-size:1.05rem; color:#fff; }
@media (max-width:760px){ .kpk__vitrin{ min-height:260px; margin:52px 8px 0; } .kpk__olcu{ top:10px; left:10px; } .kpk__olcu span{ padding:6px 11px; } }
@media (prefers-reduced-motion:reduce){ .kpk__foto{ transition:opacity .2s; transform:translate(-50%,0); } }