/* ---------------------------------------------------------
   TEMA SİSTEMİ (Light/Dark) + Renk Uyumu
   --------------------------------------------------------- */
:root{
  --accent-1:#ff4d8d; --accent-2:#7a5cff; --accent-3:#ff7a4d; --accent-4:#39c07a;
  --bg:#f7f6fb; --text:#1f1930; --muted:#6b6b81;
  --surface-1:#f7f6fb; --surface-2:#ffffff; --surface-3:#fbf8ff;
  --border:#e9e5f5; --shadow:0 10px 30px rgba(31,25,48,.12);
  --radius:16px; --radius-lg:22px;
  --focus:0 0 0 3px rgba(122,92,255,.35), 0 0 0 6px rgba(255,77,141,.25);
  --grad:linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0f1a; --text:#edeaff; --muted:#b9b6d3;
    --surface-1:#0d0f1a; --surface-2:#12132a; --surface-3:#181a36;
    --border:#2a2e6a; --shadow:0 10px 30px rgba(0,0,0,.35);
    --focus:0 0 0 3px rgba(122,92,255,.45), 0 0 0 6px rgba(255,77,141,.30);
  }
}
/* Manuel override (tema düğmesi) */
html[data-theme="light"]{
  --bg:#f7f6fb; --text:#1f1930; --muted:#6b6b81;
  --surface-1:#f7f6fb; --surface-2:#ffffff; --surface-3:#fbf8ff;
  --border:#e9e5f5; --shadow:0 10px 30px rgba(31,25,48,.12);
}
html[data-theme="dark"]{
  --bg:#0d0f1a; --text:#edeaff; --muted:#b9b6d3;
  --surface-1:#0d0f1a; --surface-2:#12132a; --surface-3:#181a36;
  --border:#2a2e6a; --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ----------------- Reset & Genel ----------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}
a:focus-visible,button:focus-visible,input:focus-visible{outline:0;box-shadow:var(--focus);border-radius:10px}
.container{width:min(1100px,92%);margin-inline:auto;padding:24px 0 56px}
.container-narrow{width:min(1100px,92%);margin-inline:auto}
.small{font-size:.9rem;padding:8px 12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------------- Header ----------------- */
.site-header .topband{height:10px;background:var(--grad)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 4%;background:var(--surface-2);box-shadow:0 1px 0 var(--border);position:sticky;top:0;z-index:50}
.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}
.brand-name{font-weight:800}
.site-nav ul{display:flex;gap:16px;list-style:none;padding:0;margin:0;align-items:center}
.site-nav a{color:var(--text);opacity:.85;text-decoration:none}
.site-nav a:hover{opacity:1}
.hide-on-mobile{display:none}
@media (min-width:900px){.hide-on-mobile{display:inline-flex}}
.has-dropdown{position:relative}
.nav-btn{background:color-mix(in oklab,var(--surface-3) 75%,#fff);border:0;padding:10px 12px;border-radius:999px;cursor:pointer}
.dropdown{position:absolute;right:0;top:120%;min-width:260px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:none}
.has-dropdown.open .dropdown{display:block}
.nav-btn[aria-expanded="true"] + .dropdown{display:block}
.dropdown a,.dropdown button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;color:var(--text);text-decoration:none;border-radius:10px}
.dropdown a:hover,.dropdown button:hover{background:var(--surface-3)}
.skip-link{position:absolute;left:-9999px;top:-9999px;background:var(--surface-2);padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}
.skip-link:focus{left:8px;top:8px;z-index:9999}

/* Header actions & Tema düğmesi */
.header-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{width:40px;height:40px;border-radius:999px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);box-shadow:var(--shadow);display:grid;place-items:center}
.theme-toggle .ico{font-size:18px;line-height:1}
.theme-toggle:active{transform:scale(.98)}

/* ----------------- Butonlar ----------------- */
.btn{appearance:none;border:0;background:var(--grad);color:#fff;padding:12px 16px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.btn:hover{opacity:.95}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.btn-outline{background:var(--surface-2);color:var(--accent-2);border:1.6px solid var(--accent-2)}
.btn-ghost{background:transparent;color:var(--accent-2);border:1.5px dashed var(--accent-2)}
.block{width:100%}

/* ----------------- Hero & Bölümler ----------------- */
.hero{background:var(--surface-2);border-radius:var(--radius-lg);padding:32px 20px;box-shadow:var(--shadow)}
.home-hero{background:
  radial-gradient(60% 80% at 0% 0%, color-mix(in oklab,var(--accent-1) 12%, transparent), transparent),
  radial-gradient(60% 80% at 100% 0%, color-mix(in oklab,var(--accent-2) 12%, transparent), transparent),
  var(--surface-2)}
.hero .pill{display:inline-flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--border);padding:6px 10px;border-radius:999px;margin:0 0 8px}
.hero h1{font-size:clamp(28px,5vw,48px);margin:8px 0}
.hero h1 .thin{font-weight:300}
.hero h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:var(--muted)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.trust{display:flex;gap:14px;list-style:none;padding:0;margin:14px 0 0;flex-wrap:wrap}
.trust li{background:var(--surface-2);border:1px solid var(--border);padding:8px 12px;border-radius:999px}

/* ----------------- Kartlar / Izgaralar ----------------- */
.card{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card.mini{padding:14px}
.card ul{list-style:none;padding-left:0;margin:0}
.card-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:720px){.card-grid{grid-template-columns:1fr 1fr}}
.tool-card .feat{margin:10px 0 16px;padding-left:18px;color:var(--muted)}
.tool-top{display:flex;align-items:center;gap:10px}
.tool-icon{color:var(--accent-2)}
.tool-card.purple{border-top:4px solid var(--accent-2)}
.tool-card.orange{border-top:4px solid var(--accent-3)}
.tool-card.green{border-top:4px solid var(--accent-4)}
.tool-card.slate{border-top:4px solid #8a8fa3}
.tool-card.disabled{opacity:.7}
.tool-grid{grid-template-columns:1fr}
@media (min-width:720px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.tool-grid{grid-template-columns:repeat(4,1fr)}}
.alt-section{margin-top:22px}
.section-head{text-align:center;margin:10px 0 20px}
.section-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:8px}
.section-head h2{font-size:clamp(22px,3.5vw,34px);margin:6px 0}
.accent{color:var(--accent-2)}
.cta-band{margin:24px 0;border-radius:var(--radius-lg);background:linear-gradient(90deg,color-mix(in oklab,var(--accent-1) 25%,transparent),color-mix(in oklab,var(--accent-2) 25%,transparent));padding:24px}
.cta-inner{text-align:center}
.grid-3{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.reason-grid .mini-ico{font-size:22px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step-no{display:inline-block;font-weight:900;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 10px;margin-bottom:6px}
.stats-band{margin:26px 0;background:var(--grad);border-radius:var(--radius-lg);padding:10px}
.stats{display:flex;gap:10px;list-style:none;padding:0;margin:0;color:#fff;justify-content:space-around;flex-wrap:wrap}
.stats li{display:flex;gap:6px;align-items:baseline}
.stats strong{font-size:1.2rem}

/* ----------------- Araç Sayfaları ----------------- */
.tool-header-hero .tool-hero{display:flex;gap:12px;align-items:center;background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.tool-header-hero .ico{font-size:26px}
.tool-grid-2{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}
@media (min-width:980px){.tool-grid-2{grid-template-columns:1.3fr .7fr}}
.side-info h2{margin-top:0}
.side-info .bulleted{padding-left:18px;margin:6px 0 14px;color:var(--muted)}
.side-info .checks{list-style:"✓  ";padding-left:18px}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-stats>div{background:var(--surface-3);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}

/* Formlar */
.form{display:grid;gap:14px}
.form-field{display:grid;gap:8px}
.amount-group{gap:10px}
input[type="text"],input[type="number"]{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;background:var(--surface-3);color:var(--text)}
::placeholder{color:color-mix(in oklab,var(--muted) 80%, var(--text))}
.range{width:100%;-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;background:var(--border);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad);border:0;box-shadow:var(--shadow)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--grad);border:0}
.field-error{color:#b00020;font-weight:600;min-height:1.2em}
.form-actions{display:flex;gap:10px;justify-content:flex-end}
.form-actions.two-cols{justify-content:space-between}

/* Stepper & Özet & Görevler */
.stepper{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 16px;margin:12px 0;position:sticky;top:64px;z-index:5}
.stepper ol{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.stepper li{display:flex;align-items:center;gap:8px;color:color-mix(in oklab,var(--text) 60%, var(--muted))}
.stepper li .dot{font-weight:700}
.stepper li.active{color:var(--text)}
.stepper li.done{color:#1aa875}
.step{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.hidden{display:none}
.summary{display:grid;gap:10px;grid-template-columns:1fr;align-items:center;background:var(--surface-3);border:1px solid var(--border);padding:12px;border-radius:12px}
@media (min-width:760px){.summary{grid-template-columns:1fr auto}}
.summary-numbers{display:flex;gap:10px;align-items:center}
.summary .arrow{opacity:.6}
.timer{font-variant-numeric:tabular-nums;font-weight:700}
.progressbar{height:10px;background:var(--border);border-radius:999px;overflow:hidden}
.progressbar-fill{height:100%;background:var(--grad)}
.progress-label{font-size:.92rem;color:var(--muted)}
.task-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:10px}
.task-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--surface-2);border:1px solid var(--border);padding:10px;border-radius:12px}
.task-list li.done{border-color:#cfe9da;background:color-mix(in oklab,#1aa875 8%, var(--surface-2))}
.task-list .check{width:20px;text-align:center;color:#9c96b5}
.task-list li.done .check{color:#1aa875}
.task-list .go{min-width:56px}

/* Kupon */
.coupon-banner{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:linear-gradient(90deg,color-mix(in oklab,var(--accent-1) 10%,transparent),color-mix(in oklab,var(--accent-2) 10%,transparent));border:1px dashed var(--accent-2);padding:12px 14px;border-radius:16px}
.coupon-banner .tag{background:var(--grad);color:#fff;padding:4px 8px;border-radius:999px;font-weight:700}
.coupon-banner.pulse{animation:pulse 1.2s ease-in-out 3}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent-2) 60%, transparent)}100%{box-shadow:0 0 0 16px rgba(0,0,0,0)}}

/* Modal & Toast */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1000}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,13,30,.55)}
.modal-dialog{position:relative;z-index:2;width:min(560px,92%);background:var(--surface-2);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.modal-close{position:absolute;right:8px;top:8px;border:0;background:transparent;font-size:22px;cursor:pointer}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.toast-container{position:fixed;bottom:18px;right:18px;display:grid;gap:10px;z-index:1100}
.toast{background:#1f1930;color:#fff;padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;min-width:240px}
.toast .close{margin-left:auto;background:transparent;color:#fff;border:0;cursor:pointer}
.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent-2);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.footer-rich{background:#0f0f1a;color:#d7d5e7}
.footer-top{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:980px){.footer-top{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-top .social a{display:inline-grid;place-items:center;width:28px;height:28px;background:#1b1b2f;color:#fff;border-radius:8px;margin-right:6px;text-decoration:none}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:6px 0}
.footer-links a{color:#f2f0ff;text-decoration:none}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{background:var(--grad);color:#fff;padding:6px 8px;border-radius:999px;font-size:.85rem}
.footer-bottom{border-top:1px solid #23233a;display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:12px 4%}
.footer-bottom .legal a{color:#b9b7d0;text-decoration:none;margin-right:10px}

/* Adım 2 özel layout: tek kart ortalı */
.tool.step-2-active .side-info{display:none!important}
.tool.step-2-active .tool-grid-2{grid-template-columns:1fr!important}
.tool.step-2-active #step-2{max-width:880px;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* =========================================================
   Comfort Light — daha az parlak, daha okunaklı açık tema
   (Değerler önceki değişkenleri override eder)
   ========================================================= */
:root,
html[data-theme="light"]{
  /* Yüzeyler: hafif lavanta tonlu off-white */
  --bg:        #f4f2fa;   /* sayfa zemini */
  --surface-2: #fcfbff;   /* kart/nav/hero yüzeyi (tam beyaz değil) */
  --surface-3: #f7f5fe;   /* vurgulu yüzey */
  --border:    #e6e2f3;   /* yumuşak kenar çizgisi */

  /* Metin kontrastı, daha sıcak/düşük parlaklık */
  --text:  #241c3c;
  --muted: #6b6788;

  /* Daha yumuşak gölge */
  --shadow: 0 8px 22px rgba(31,25,48,.08);
}

/* Hero’daki renk lekelerini %12 → %7’ye indir (daha sakin görünüm) */
.home-hero{
  background:
   radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--accent-1) 7%, transparent), transparent),
   radial-gradient(60% 80% at 100% 0%, color-mix(in oklab, var(--accent-2) 7%, transparent), transparent),
   var(--surface-2);
}

/* Kart ve nav arka planlarını hafif yumuşat; metin okunurluğu için küçük doygunluk */
.nav-wrap, .card, .hero, .dropdown {
  backdrop-filter: saturate(105%);
}

/* Buton dış hatları açık temada daha net dursun */
.btn-outline{
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--accent-2) 70%, var(--border));
  color: var(--accent-2);
}

/* Sekmeler/pil kapsülleri için daha görünür ama sert olmayan kenarlık */
.hero .pill, .section-pill, .step-no {
  border-color: color-mix(in oklab, var(--border) 85%, #d9d4ea);
}

/* Bilgi metinleri için okunaklılık */
.hero .lead, .side-info .bulleted, .progress-label {
  color: color-mix(in oklab, var(--muted) 92%, var(--text));
}

/* Form alanlarında beyaz parlamayı azalt */
input[type="text"], input[type="number"]{
  background: #f9f7ff;
  border-color: #e7e3f5;
}

/* İlerleme/görev kartlarının arka planını hafif aç */
.summary, .task-list li{
  background: #fbf9ff;
}

/* İstatistik bandı yazıları açık temada bir tık koyu */
.stats strong { text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* =============================
   FORM ALANLARI KONTRAST FİX
   ============================= */

/* Tema bazlı alan değişkenleri */
:root,
html[data-theme="light"]{
  --field-bg:     #fbfaff;   /* off-white */
  --field-border: #dad6ed;
  --field-text:   #1f1930;
  --placeholder:  #78739a;
}
@media (prefers-color-scheme: dark){
  :root{
    --field-bg:     #151734;  /* koyu yüzey */
    --field-border: #2d3166;
    --field-text:   #f0eeff;
    --placeholder:  #b9b6d3;
  }
}
html[data-theme="dark"]{
  --field-bg:     #151734;
  --field-border: #2d3166;
  --field-text:   #f0eeff;
  --placeholder:  #b9b6d3;
}

/* Metin alanları: daha net yazı ve placeholder */
input[type="text"],
input[type="number"]{
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border: 1.6px solid var(--field-border) !important;
  caret-color: var(--field-text);
}
input::placeholder{
  color: var(--placeholder) !important;
  opacity: 1 !important; /* bazı tarayıcıların default düşük opaklığını kaldır */
}

/* Odak görünürlüğü (daha belirgin) */
input[type="text"]:focus,
input[type="number"]:focus{
  border-color: color-mix(in oklab, var(--accent-2) 55%, var(--field-border));
  box-shadow: var(--focus);
}

/* Range çizgisini biraz koyulaştır (dark’ta net dursun) */
.range{
  background: color-mix(in oklab, var(--border) 70%, #5a61a6);
}
/* =========================================================
   ADIM 2 OKUNURLUK FİX — özet kutusu + görev satırları
   ========================================================= */

/* Özet kutusundaki yazıları netleştir */
#step-2 .summary,
#step-2 .summary * {
  color: var(--text) !important;
  opacity: 1 !important;
}
#step-2 .summary .muted {
  /* tamamen beyaz yapma; hafif kırık koyu */
  color: color-mix(in oklab, var(--text) 75%, var(--muted)) !important;
}
#step-2 .summary .timer {
  font-weight: 800;
}

/* Görev listesi satırlarının yazı rengini ve opaklığını düzelt */
#step-2 .task-list li,
#step-2 .task-list li > div,
#step-2 .task-list li *:not(.go) {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Görev satırı arka plan/kenarlık tonlarını hafif koyulaştır (dark ve light için uyumlu) */
#step-2 .task-list li {
  background: var(--surface-2) !important;
  border-color: color-mix(in oklab, var(--border) 75%, #5a61a6) !important;
}

/* Tamamlanan görevlerin de okunurluğunu koru */
#step-2 .task-list li.done {
  border-color: #3aa374 !important;
  background: color-mix(in oklab, #1aa875 12%, var(--surface-2)) !important;
}
#step-2 .task-list li .check { color: #1aa875 !important; }

/* GİT butonları değişmesin; yalnızca metin */
#step-2 .task-list li .go { opacity: 1 !important; }

/* İlerleme etiketinin rengi */
#step-2 #progress-label { color: color-mix(in oklab, var(--text) 80%, var(--muted)) !important; }
/* =========================================================
   ADIM 2 - ÖZET KUTUSU TAM OKUNURLUK (Dark + Light)
   ========================================================= */

/* Dark temada özet kutusunu koyu yüzeye zorla; tüm yazıları netleştir */
html[data-theme="dark"] #step-2 .summary{
  background: #181a36 !important;           /* dark yüzey */
  border-color: #2a2e6a !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #step-2 .summary,
html[data-theme="dark"] #step-2 .summary *{
  color: #edeaff !important;                /* ana metin */
  opacity: 1 !important;
}
html[data-theme="dark"] #step-2 .summary .muted{
  color: #cfcbea !important;                 /* ikincil metin */
}
html[data-theme="dark"] #step-2 .summary .timer{
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Light temada da (Comfort Light) metinleri belirgin tut */
html[data-theme="light"] #step-2 .summary{
  background: #fbf9ff !important;            /* off-white yüzey */
  border-color: #e6e2f3 !important;
}
html[data-theme="light"] #step-2 .summary,
html[data-theme="light"] #step-2 .summary *{
  color: #241c3c !important;                 /* ana metin */
  opacity: 1 !important;
}
html[data-theme="light"] #step-2 .summary .muted{
  color: #5f5a7e !important;                 /* ikincil metin */
}
html[data-theme="light"] #step-2 .summary .timer{
  color: #241c3c !important;
  font-weight: 800 !important;
}

/* İlerleme etiketi de net olsun */
#step-2 #progress-label{
  color: color-mix(in oklab, var(--text) 85%, var(--muted)) !important;
}
/* =========================================================
   Step-1 tek kart görünümünü ortala + mobil uyumluluk
   ========================================================= */

/* Varsayılan 2 kolon (masaüstü) */
.tool-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Step-2 gizliyken grid'i tek kolona al ve ortala */
.tool-grid-2.single-col{
  grid-template-columns: minmax(0, 760px);
  justify-content: center;         /* ortalama */
  margin-inline: auto;              /* container içinde ortaya al */
}

/* Hero ve stepper'ı da aynı genişlikte hizala */
.tool-header-hero,
.stepper{
  max-width: 960px;
  margin-inline: auto;
}

/* Form kartında geniş alanlarda satır içi okunurluk */
#step-1{
  max-width: 760px;                 /* 1. adım tek kart sınırı */
}

/* Butonlar mobilde tam genişlik olsun */
@media (max-width: 980px){
  .tool-grid-2,
  .tool-grid-2.single-col{
    grid-template-columns: 1fr;     /* tek kolon */
  }
  #step-1{ max-width: 100%; }
  .form .form-actions .btn{ width:100%; }
  .tool-header-hero,
  .stepper{ padding-inline: 12px; }
}

/* Çok dar ekran düzeltmeleri */
@media (max-width: 420px){
  .section-title{ font-size: 1.1rem; }
  input[type="text"], input[type="number"]{ font-size: 16px; } /* iOS zoom önler */
}
/* ---------- Kayma düzeltme: tek kartı merkezle, mobil akış ---------- */

/* Grid konteynerleri ana içerikte ortala */
.tool-grid-2{
  max-width: 1200px;              /* geniş ekran güvenliği */
  margin-inline: auto;
  padding-inline: 12px;           /* kenarlarda eşit boşluk */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Step-2 gizliyken tek kolona düşür ve tam ortaya al */
.tool-grid-2.single-col{
  grid-template-columns: minmax(320px, 760px);
  justify-content: center;        /* grid parçasını konteynerde ortalar */
  justify-items: stretch;         /* kart genişliği sütunu doldursun */
}

/* Step kartları, özellikle Step-1, tek kolonda tam genişlik kullansın */
#step-1{ max-width: 760px; width: 100%; margin-inline: auto; }

/* Adım 2 görünür/gizli durumunda layout’a dahil olmasın */
.step.hidden{ display: none !important; }

/* Hero/Stepper ve Rehber başlığını aynı hizaya çek */
.tool-header-hero, .stepper, .alt-section{ max-width: 960px; margin-inline: auto; padding-inline: 12px; }

/* Mobil uyumluluk */
@media (max-width: 980px){
  .tool-grid-2, .tool-grid-2.single-col{ grid-template-columns: 1fr; }
  #step-1{ max-width: 100%; }
  .form .form-actions .btn{ width: 100%; }
}
@media (max-width: 420px){
  input[type="text"], input[type="number"]{ font-size: 16px; } /* iOS zoom fix */
}
/* Stepper'ı sabitlemeyi (sticky) kapat */
.stepper,
.stepper.is-sticky{
  position: static !important;   /* artık takip etmeyecek */
  top: auto !important;
  z-index: auto !important;
  box-shadow: none;              /* sticky gölgesi varsa kaldır */
  backdrop-filter: none;         /* varsa cam efekti iptal */
}

/* Stepper ile içerik arasında makul boşluk */
.stepper{ margin-bottom: 18px; }