/* ============================================================
   Online Koçunuz — Tercih Formu Nasıl Doldurulur? sayfası stilleri
   Kaynak: design_system/standalone/tercih-formu-nasil-doldurulur.html
   Tüm kurallar .okt-tercih-formu-nasil-doldurulur altına scope'landı.
   Token'lar globalde tanımlı (style.css): var(--border), var(--ink-700) vb.
   @keyframes global; helper sınıflar (page-hero, hero-orbit, float-chip,
   grad-text, reveal, btn-*) global style.css'ten gelir.
   Mobil öncelikli.
   ============================================================ */

/* ---- HERO yerleşimi ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-hero{ overflow:hidden; }
.okt-tercih-formu-nasil-doldurulur .okt-tfd-chip--1{ top:26%; left:3%; animation:float-up 7s ease-in-out infinite; }
.okt-tercih-formu-nasil-doldurulur .okt-tfd-chip--2{ top:48%; right:3%; animation:float-up 9s ease-in-out infinite; animation-delay:1s; }

.okt-tercih-formu-nasil-doldurulur .okt-tfd-crumbs{ margin-bottom:14px; }

.okt-tercih-formu-nasil-doldurulur .okt-tfd-pill{
  display:inline-block; font-size:12px; font-weight:600; line-height:1;
  padding:7px 13px; border-radius:999px;
  color:#5B36C9; background:#F1ECFF;
  border:1px solid #E0D4FF;
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-title{ margin:14px 0 12px; color:var(--ink-900); max-width:780px; }
.okt-tercih-formu-nasil-doldurulur .okt-tfd-lead{ max-width:660px; color:var(--ink-700); }

/* ---- ANA BÖLÜM ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-main{ padding:40px 0 80px; background:#fff; }

/* ---- DAR İÇERİK SARMALAYICI ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-narrow{
  max-width:760px; margin:0 auto;
  font-size:15.5px; color:var(--ink-700); line-height:1.75;
}

/* ---- ADIM LİSTESİ ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-steps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-step{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 18px 6px; background:#fff;
  border:1px solid var(--border); border-radius:14px;
  border-left:3px solid #7C4DFF;
}
@media (min-width:601px){
  .okt-tercih-formu-nasil-doldurulur .okt-tfd-step{ gap:18px; padding:22px 22px 8px; }
}

/* ---- ADIM NUMARASI ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-step-no{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:15px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,#7C4DFF,#5B36C9);
  box-shadow:0 4px 14px rgba(124,77,255,.32);
}
@media (min-width:601px){
  .okt-tercih-formu-nasil-doldurulur .okt-tfd-step-no{ width:38px; height:38px; font-size:16px; }
}

/* ---- ADIM GÖVDESİ ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-step-body{ min-width:0; }
.okt-tercih-formu-nasil-doldurulur .okt-tfd-step-body h2{
  color:var(--ink-900); font-size:20px; margin:3px 0 8px; line-height:1.3;
}
@media (min-width:601px){
  .okt-tercih-formu-nasil-doldurulur .okt-tfd-step-body h2{ font-size:22px; }
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-step-body p{
  font-size:15.5px; color:var(--ink-700); line-height:1.78; margin:0 0 12px;
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-step-body strong{ color:var(--ink-900); }

/* ---- İLGİLİ BAĞLANTILAR ---- */
.okt-tercih-formu-nasil-doldurulur .okt-tfd-related{ margin-top:34px; }
.okt-tercih-formu-nasil-doldurulur .okt-tfd-related h2{
  color:var(--ink-900); font-size:20px; margin:0 0 12px;
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-related ul{
  padding-left:18px; font-size:15px; color:var(--ink-700); line-height:1.85; margin:0;
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-related a{
  color:var(--primary-700); text-decoration:underline; font-weight:600;
}
.okt-tercih-formu-nasil-doldurulur .okt-tfd-related a:hover{ text-decoration:none; }