/* =========================================================
   Writeandhear – Features & Languages (revamped, overflow-safe)
   - Global border-box reset (no unexpected width growth)
   - Overflow-safe grids & chips (auto-wrap, no cut on the right)
   - Smooth hover/press animations
   ========================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }

/* ---------- Theme tokens ---------- */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#5b6472;
  --card:#ffffff; --card-elev:0 8px 30px rgba(16,24,40,.06); --border:#e7eaf0;

  --accent:#7c5cff; --accent-2:#a88bff; --accent-weak:#efeaff;

  --chip-bg:#f6f7fb; --chip-fg:#24304a;

  --pill-bg:#f8fafc; --pill-border:#e5e7eb;

  --focus:2px solid #7c5cff;
  --radius-lg:16px; --radius-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --bg:#0b1020; --fg:#eef2ff; --muted:#a3b0c9;
  --card:#0f152b; --card-elev:0 10px 40px rgba(0,0,0,.35); --border:#1e2a4a;

  --accent:#9b8bff; --accent-2:#c0b6ff; --accent-weak:#211a47;

  --chip-bg:#131b37; --chip-fg:#e7eaff;

  --pill-bg:#111831; --pill-border:#1f2d55;
}

/* Auto dark (attr yoksa) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1020; --fg:#eef2ff; --muted:#a3b0c9; --card:#0f152b;
    --card-elev:0 10px 40px rgba(0,0,0,.35); --border:#1e2a4a;
    --accent:#9b8bff; --accent-2:#c0b6ff; --accent-weak:#211a47;
    --chip-bg:#131b37; --chip-fg:#e7eaff;
    --pill-bg:#111831; --pill-border:#1f2d55;
  }
}

/* ---------- Layout ---------- */
.section{
  padding:clamp(48px,6vw,88px) 0;
  background:var(--bg); color:var(--fg);
  overflow-x:clip;
  contain:layout paint; /* micro-perf */
}
.section + .section{ border-top:1px solid var(--border); }

/* Safe container: never exceeds viewport due to padding/border */
.container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(12px,4vw,24px);
}

/* ---------- Headings ---------- */
.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; font-weight:700;
}
.section__title{ font-size:clamp(24px,2.6vw,38px); line-height:1.15; margin:0 0 28px; font-weight:800; }

/* ---------- Feature grid ---------- */
.feature-grid{
  list-style:none; margin:32px 0 18px; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:18px;
}
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }

.feature{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 20px; box-shadow:var(--card-elev);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  display:flex; flex-direction:column; min-width:0;
  will-change:transform, box-shadow;
}
.feature:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 50px rgba(124,92,255,.12);
  border-color:#d8d6ff;
}
.feature__icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius:14px; margin-bottom:14px;
  color:var(--accent);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--accent-weak) 0%, transparent 60%),
    linear-gradient(180deg, rgba(124,92,255,.08), transparent);
}
.feature__icon svg{ width:28px; height:28px; }
.feature__title{ font-size:18px; margin:2px 0 8px; font-weight:700; }
.feature__desc{ color:var(--muted); line-height:1.6; font-size:15px; margin-top:auto; }

/* ---------- Use cases row (YouTube / TikTok / Podcast'ler / Eğitim / TV) ---------- */
/* Key fix: border-box + auto-fill + minmax(0,1fr) prevents right-edge cut */
.use-row{
  margin:18px 0 0; padding:14px 12px;
  list-style:none; border:1px dashed var(--border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(124,92,255,.08), transparent);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, minmax(0,1fr)));
  gap:12px;
  box-sizing:border-box; /* include border/padding in width */
  width:100%;
}
.use{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:12px; background:var(--chip-bg); color:var(--chip-fg); font-weight:600;
  min-width:0; /* allow text wrap */
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}

/* ---------- Languages ---------- */
.section--languages .section__hint{ color:var(--muted); margin:-6px 0 18px; }

.lang-grid{
  --col-min:200px;
  list-style:none; padding:0; margin:12px 0 20px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--col-min), 1fr));
  gap:12px;
}

/* Staggered reveal */
.lang-grid > *{
  opacity:0; transform:translateY(6px) scale(.98);
  animation:fadeUp .5s var(--ease) forwards;
}
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) scale(1); } }
.lang-grid > *:nth-child(3n+1){ animation-delay:.02s; }
.lang-grid > *:nth-child(3n+2){ animation-delay:.08s; }
.lang-grid > *:nth-child(3n+3){ animation-delay:.14s; }

/* Dil chip */
.lang-chip{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:var(--radius-pill);
  background:var(--pill-bg); border:1px solid var(--pill-border);
  color:var(--fg); font-weight:700; text-decoration:none;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
  box-shadow:0 1px 0 rgba(16,24,40,.03);
  min-width:0; white-space:normal; line-height:1.25; word-break:break-word; overflow:hidden; isolation:isolate;
  position:relative;
}
.lang-chip::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(80% 80% at 50% 120%, rgba(124,92,255,.18), transparent 60%);
  opacity:.0; transition:opacity .25s var(--ease); z-index:-1;
}
.lang-chip:hover{
  transform:translateY(-1px);
  border-color:#d9d6ff;
  border-color:color-mix(in oklab, var(--accent) 25%, var(--pill-border));
  box-shadow:0 10px 30px rgba(124,92,255,.16);
}
.lang-chip:hover::after{ opacity:1; }
.lang-chip:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(124,92,255,.12); }

/* İç öğeler */
.flag,.lang-code{
  width:1.4em; height:1.4em; flex:0 0 1.4em;
  display:inline-grid; place-items:center; font-size:1rem; line-height:1;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(124,92,255,.12), transparent);
  color:var(--fg);
}
.lang-name{ min-width:0; }

@media (max-width:420px){
  .lang-chip{ padding:12px 14px; }
  .flag,.lang-code{ font-size:.95rem; }
}

/* ---------- CTA & buttons ---------- */
.langs-cta{ display:grid; place-items:center; margin-top:22px; }

.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; border-radius:var(--radius-pill);
  padding:12px 18px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; background-clip:padding-box;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn svg{ width:18px; height:18px; }

.btn-primary{
  background-color:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 10px 30px rgba(124,92,255,.28);
}
.btn-primary:hover{ background-color:color-mix(in oklab, var(--accent) 86%, var(--accent-2)); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }
.btn-primary:focus-visible{ outline:var(--focus); outline-offset:3px; }

.btn-secondary{ background-color:var(--chip-bg); color:var(--chip-fg); border-color:var(--pill-border); }
.btn-secondary:hover{ border-color:color-mix(in oklab, var(--accent) 28%, var(--pill-border)); transform:translateY(-1px); }

.btn-ghost{ background-color:color-mix(in oklab, var(--bg) 82%, var(--chip-bg)); color:var(--fg); border-color:var(--border); }
.btn-ghost:hover{ background-color:var(--chip-bg); border-color:color-mix(in oklab, var(--accent) 22%, var(--border)); }

/* ---------- Utilities ---------- */
:where(a,button):focus-visible{ outline:var(--focus); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}
.grad-txt{
  background:linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}