:root{
  --ink:#0f172a; --muted:#64748b; --ring:#0ea5e9;
  --bg:#0b63c7; --bg2:#0a57ad; --radius:18px;
}
*{box-sizing:border-box}
.textslider{position:relative; width:90%; margin:90px auto 0 auto; color:#fff; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

/* viewport */
.ts-viewport{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(135deg,#0b63c7,#0a57ad);
  min-height:52vh; display:grid; place-items:stretch;
}

/* track */
.ts-track{display:flex; transition:transform .6s cubic-bezier(.22,.75,.25,1); will-change:transform}

/* slide */
.ts-slide{
  flex:0 0 100%; padding:clamp(24px,5vw,56px);
  display:grid; align-content:center; gap:14px; min-height:52vh;
  grid-auto-rows:max-content;
}
/* Grid içinde metinlerin sarabilmesi için KRİTİK */
.ts-title,.ts-desc,.ts-cta{min-width:0}

.ts-kicker{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9}
.ts-title{
  font-size:clamp(26px,5.6vw,48px); line-height:1.15; font-weight:800; margin:2px 0; color:#fff;
  max-width:22ch; text-wrap:balance; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
}
.ts-desc{
  max-width:48ch; font-size:clamp(14px,3.4vw,18px); line-height:1.65; opacity:.95; color:#fff;
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
}

/* CTA */
.ts-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.ts-btn,.ts-ghost{
  appearance:none; border:0; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ts-btn{background:#fff; color:#0b63c7; border:1px solid #e2e8f0}
.ts-btn:focus-visible,.ts-ghost:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.ts-ghost{background:transparent; color:#fff; border:1.5px solid #e2e8f0}
.ts-ghost:hover{color:#fff}

/* per-slide themes */
.ts-slide[data-theme="ocean"]{background:
  radial-gradient(60% 80% at 15% 10%, rgba(255,255,255,.16), transparent 60%),
  linear-gradient(135deg,#0b63c7,#0a57ad)}
.ts-slide[data-theme="sunset"]{background:
  radial-gradient(60% 80% at 80% 10%, rgba(255,255,255,.14), transparent 60%),
  linear-gradient(135deg,#f97316,#ef4444)}
.ts-slide[data-theme="forest"]{background:
  radial-gradient(60% 80% at 15% 10%, rgba(255,255,255,.12), transparent 60%),
  linear-gradient(135deg,#059669,#0ea5e9)}

/* dots */
.ts-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:64px; display:flex; gap:8px; z-index:1}
.ts-dot{width:8px; height:8px; border-radius:999px; background:#ffffff80; border:0; cursor:pointer; transition:width .25s, background .25s}
.ts-dot[aria-current="true"]{width:28px; background:#fff}

/* arrows */
.ts-arrows{position:absolute; inset:auto 0 12px 0; display:flex; justify-content:center; gap:10px; pointer-events:none; z-index:1}
.ts-arrow{
  pointer-events:auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; border:0; background:#ffffffde; color:#0b63c7;
  font-weight:800; cursor:pointer; transition:.25s;
}
.ts-arrow:hover{transform:translateY(-1px)}
.ts-arrow:disabled{opacity:.5; cursor:not-allowed}

/* MOBILE */
@media (max-width:768px){
  .ts-viewport{min-height:auto; height:auto}
  .ts-slide{min-height:auto; padding:18px 16px 120px} /* ok+dot için güvenli alan */
  .ts-title{font-size:clamp(20px,7vw,34px); max-width:20ch}
  .ts-desc{font-size:medium; width: 80%;}
  .ts-cta{flex-direction:column}
  .ts-btn,.ts-ghost{width:50%; text-align:center}
  .ts-dots{bottom:96px}
  .ts-arrows{inset:auto 0 22px 0}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .ts-track{transition:none}
  .ts-arrow{transition:none}
}