/* Kalistack — Kampanya Hero (slider) */

.ksh{
  --ksh-radius:18px;
  --ksh-accent:#F5821F;
  --ksh-accent-2:#FFA047;
  --ksh-title:#FFFFFF;
  --ksh-text:#C6D6E8;
  --ksh-pad:44px;
  --ksh-minh:340px;
  position:relative;
  border-radius:var(--ksh-radius);
  overflow:hidden;
  box-sizing:border-box;
  container-type:inline-size;
}
.ksh *,.ksh *::before,.ksh *::after{box-sizing:border-box}

/* ---------- Slaytlar ---------- */
.ksh-track{position:relative}
.ksh-slide{
  display:none;
  position:relative;
  min-height:var(--ksh-minh);
  padding:var(--ksh-pad);
  background-image:linear-gradient(135deg,var(--s-bg1,#123A63) 0%,var(--s-bg2,#0C1F3A) 100%);
}
.ksh-slide.is-on{display:block}
.ksh-slide.is-on .ksh-inner,
.ksh-slide.is-on .ksh-art{animation:ksh-in .45s ease both}
@keyframes ksh-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ksh-slide.is-on .ksh-inner,.ksh-slide.is-on .ksh-art{animation:none}
}

.ksh-row{display:flex;align-items:center;gap:32px}
.ksh-inner{flex:1 1 auto;min-width:0;position:relative;z-index:2}
.ksh-art{flex:0 0 auto;width:38%;max-width:420px}
.ksh-art img{display:block;width:100%;height:auto}
.ksh-row.is-left{flex-direction:row-reverse}
.ksh-row.is-none .ksh-art{display:none}

/* ---------- Rozet ---------- */
.ksh-badge{
  display:inline-flex;align-items:center;gap:9px;
  border:var(--ksh-badge-bw,1px) solid var(--ksh-badge-bc,rgba(255,255,255,.28));
  background:var(--ksh-badge-bg,rgba(255,255,255,.07));
  color:#FFD9B0;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 16px;border-radius:var(--ksh-badge-r,999px);margin:0 0 20px;
}
.ksh-badge b{color:#fff;font-weight:800}

/* ---------- Metinler ---------- */
.ksh-title{
  margin:0 0 16px;font-size:40px;line-height:1.15;font-weight:800;
  color:var(--ksh-title);letter-spacing:-.02em;
}
.ksh-title span{color:var(--ksh-accent)}
.ksh-desc{
  margin:0 0 26px;font-size:15.5px;line-height:1.65;color:var(--ksh-text);
  max-width:62ch;
}
.ksh-desc b,.ksh-desc strong{color:#fff;font-weight:700}

/* ---------- Butonlar ---------- */
.ksh-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.ksh-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;padding:13px 26px;border-radius:10px;
  text-decoration:none!important;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.ksh-btn:hover{background-color:var(--ksh-btn1-hover,inherit)}
.ksh-btn--1{
  background:linear-gradient(180deg,var(--ksh-accent-2) 0%,var(--ksh-accent) 100%);
  color:#fff!important;box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.ksh-btn--2{
  background:transparent;color:#fff!important;border-color:rgba(255,255,255,.42);
}
.ksh-btn--2:hover{background:rgba(255,255,255,.12)}

/* ---------- Güven satırı ---------- */
.ksh-stats{
  font-size:13.5px;color:var(--ksh-text);line-height:1.6;margin:0;
}
.ksh-stats b,.ksh-stats strong{color:#fff;font-weight:700}

/* ---------- Köşe rozeti ---------- */
.ksh-corner{
  position:absolute;top:22px;right:22px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--ksh-accent-2) 0%,var(--ksh-accent) 100%);
  color:#fff;border-radius:12px;padding:10px 18px;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  font-size:13px;font-weight:700;line-height:1.25;max-width:46%;
}
.ksh-corner .ksh-corner-big{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* ---------- Oklar / noktalar ---------- */
.ksh-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.ksh-nav:hover{background:rgba(255,255,255,.28)}
.ksh-prev{left:14px}
.ksh-next{right:14px}
.ksh-nav svg{width:16px;height:16px}

.ksh-dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:4;
  display:flex;justify-content:center;gap:8px;
}
.ksh-dot{
  width:9px;height:9px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.38);transition:background .15s ease,width .15s ease;
}
.ksh-dot.is-on{background:var(--ksh-accent);width:26px;border-radius:999px}

/* tek slaytta kontroller gizli */
.ksh.is-single .ksh-nav,
.ksh.is-single .ksh-dots{display:none}

/* ---------- Dar alan ---------- */
@container (max-width:820px){
  .ksh-row{flex-direction:column;align-items:flex-start;gap:22px}
  .ksh-row.is-left{flex-direction:column}
  .ksh-art{width:100%;max-width:340px;align-self:center}
  .ksh-title{font-size:30px}
  .ksh-corner{position:static;margin:0 0 18px;max-width:100%}
  .ksh-nav{display:none}
}
@container (max-width:520px){
  .ksh-slide{padding:26px 20px 44px}
  .ksh-title{font-size:25px}
  .ksh-desc{font-size:14.5px}
  .ksh-actions .ksh-btn{flex:1 1 100%;justify-content:center}
}
@supports not (container-type:inline-size){
  @media (max-width:820px){
    .ksh-row{flex-direction:column;align-items:flex-start}
    .ksh-art{width:100%;max-width:340px}
    .ksh-title{font-size:30px}
    .ksh-nav{display:none}
  }
}

/* ============================================================
   Animasyonlu taşıma illüstrasyonu
   Zarflar kesikli yay boyunca ilerler. offset-path ile yapılır;
   hareket azaltma tercihi açıksa animasyon durur.
   ============================================================ */
.ksh-mig{display:block;width:100%;height:auto}

.ksh-mig-env{
  offset-path:var(--ksh-path, path("M 150 138 C 196 66, 262 60, 306 102"));
  offset-rotate:0deg;
  animation:ksh-fly 3.4s cubic-bezier(.45,.05,.55,.95) infinite;
  opacity:0;
}
.ksh-mig-env:nth-of-type(2){animation-delay:1.15s}
.ksh-mig-env:nth-of-type(3){animation-delay:2.3s}

@keyframes ksh-fly{
  0%   {offset-distance:0%;   opacity:0; transform:scale(.7)}
  12%  {opacity:1;            transform:scale(1)}
  88%  {opacity:1;            transform:scale(1)}
  100% {offset-distance:100%; opacity:0; transform:scale(.7)}
}

/* kesikli yayın akışı */
.ksh-mig-path{
  stroke-dasharray:7 9;
  animation:ksh-dash 1.6s linear infinite;
}
@keyframes ksh-dash{to{stroke-dashoffset:-32}}

/* hedef halkasında hafif nabız */
.ksh-mig-ring{
  transform-origin:center;
  animation:ksh-pulse 2.6s ease-in-out infinite;
}
@keyframes ksh-pulse{
  0%,100%{opacity:.45; r:52}
  50%    {opacity:.12; r:58}
}

@media (prefers-reduced-motion:reduce){
  .ksh-mig-env{animation:none; offset-distance:52%; opacity:1}
  .ksh-mig-path,.ksh-mig-ring{animation:none}
}

/* offset-path desteklemeyen tarayıcılar: zarfları gizle, yay kalsın */
@supports not (offset-path: path("M 0 0 L 1 1")){
  .ksh-mig-env{display:none}
}

/* ============================================================
   Düz (flat) mod — gradyan ve gölge olmadan
   .ksh üzerine is-flat sınıfı eklenince devreye girer.
   ============================================================ */
.ksh.is-flat .ksh-btn--1{
  background:var(--ksh-accent);
  box-shadow:none;
}
.ksh.is-flat .ksh-btn--1:hover{
  background:var(--ksh-btn1-hover,var(--ksh-accent-2));
}
.ksh.is-flat .ksh-corner{
  background:var(--ksh-accent);
  box-shadow:none;
}
.ksh.is-flat .ksh-slide{
  background-image:none;
  background-color:var(--s-bg1,#123A63);
}

/* buton hover renkleri (düz ya da gradyan farketmez) */
.ksh-btn--1:hover{background-color:var(--ksh-btn1-hover,var(--ksh-accent-2))}
.ksh-btn--2:hover{
  background-color:var(--ksh-btn2-hover,rgba(255,255,255,.12));
  border-color:var(--ksh-btn2-hover-bc,rgba(255,255,255,.7));
}

/* köşe rozeti — kenarlık ve yuvarlaklık ayarlanabilir */
.ksh-corner{
  border-radius:var(--ksh-corner-r,12px);
  border:var(--ksh-corner-bw,0) solid var(--ksh-corner-bc,transparent);
}

/* ============================================================
   Taşıma şeması — katmanlı yapı
   SVG katmanı: yay + uçan zarflar (viewBox ile ölçeklenir)
   HTML katmanı: kaynak/hedef düğümleri + rozet (ikon fontu
   SVG içinde çalışmadığı için ayrıldı)
   ============================================================ */
.ksh-mig-wrap{
  position:relative;
  width:100%;
  container-type:inline-size;
}
.ksh-mig-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.ksh-mig-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  z-index:2;
}
.ksh-mig-shape{
  display:grid;place-items:center;
  color:#fff;
  overflow:hidden;
}
.ksh-mig-shape--box{border-radius:22cqw / 22cqw}
.ksh-mig-shape--circle{border-radius:50%}

.ksh-mig-shape i,
.ksh-mig-shape svg{font-size:8cqw;width:8cqw;height:8cqw;display:block}
.ksh-mig-shape img{width:60%;height:60%;object-fit:contain}

.ksh-mig-label{
  font-size:var(--ksh-label-fs,3.1cqw);font-weight:700;color:#fff;line-height:1.2;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35);
}

.ksh-mig-pill{
  position:absolute;z-index:3;
  transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:#1B2B3D;
  font-size:var(--ksh-pill-fs,3.1cqw);font-weight:600;line-height:1;
  padding:var(--ksh-pill-pad,2.2cqw 3.4cqw);
  border-radius:var(--ksh-pill-r,6px);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  white-space:nowrap;
}
.ksh-mig-pill .ksh-mig-tick{
  width:3.6cqw;height:3.6cqw;border-radius:50%;
  background:#22B573;display:grid;place-items:center;flex:0 0 auto;
}
.ksh-mig-pill .ksh-mig-tick svg{width:2.2cqw;height:2.2cqw}

.ksh.is-flat .ksh-mig-pill{box-shadow:none}

/* düğüm dikey kayması ve çerçevesiz şekil */
.ksh-mig-node{transform:translate(-50%,calc(-50% + var(--ksh-node-dy,0px)))}
.ksh-mig-shape--none{background:none!important;border:0!important;border-radius:0}
.ksh-mig-shape--none img{width:100%;height:100%}
.ksh-mig-shape--none i,
.ksh-mig-shape--none svg{font-size:100%;width:100%;height:100%}

/* alt rozetin dikey konumu */
.ksh-mig-pill{transform:translate(-50%,calc(-50% + var(--ksh-pill-dy,0px)))}

/* SVG içine gömülen ikon fontu (hareketli simge) */
.ksh-mig-fo{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.ksh-mig-fo i{font-size:22px;line-height:1;display:block}