:root{
  --bg:#0a111d;
  --card:#132435;
  --accent:#ff7a2d;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;

  /* Header değişkenleri (eklendı) */
  --panel: #101c2b;
  --border: rgba(255,255,255,0.10);
  --text: #eaf0f6;
  --brand:#0a74da; /* eksikti: gradient mavi */
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(circle at 18% 24%, #11273d 0%, #0a111d 55%),
    linear-gradient(160deg,#0a111d,#09101b 70%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Root layout */
.wizard-root{
  height:100vh;
  width:100vw;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  margin-top: 16px;
}

/* >>> EK: container ve iç kartı ortala */
.wizard-root{
  max-width:1320px;
  width:100%;
  margin:16px auto 0;        /* ortala */
  padding:0 28px;            /* kenar boşluğu */
  height:auto;               /* 100vh zorunlu değil; içerik büyüyebilir */
}

.slide{
  min-width:100%;            /* 100vw yerine 100%: içerik genişliği kısıtına uyar */
}

.slide-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;             /* iç kartı ortala */
}

/* Tam ekran yüksekliği istersen sadece ilk adımda:
.wizard-root{min-height:100vh;}
*/

/* Header */
.wiz-header{
  position: relative;
  height:110px;                 /* 72 -> 110 */
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 28px;
  background:linear-gradient(135deg,#132435 0%, #101c2b 50%, #162c42 100%) !important;
  border:1px solid var(--border) !important;
  border-radius:24px !important;
  box-shadow:0 14px 48px -10px rgba(0,0,0,.55) !important;
  overflow:hidden;
}
.wiz-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 22%, rgba(255,122,45,.12), transparent 60%),
    radial-gradient(circle at 12% 78%, rgba(10,116,218,.14), transparent 62%);
  pointer-events:none;
}
.brand{
  width:44px;height:44px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#ffb07a);
  color:#081018;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(255,122,45,0.12);
}
.title{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0 24px;
  font-size:clamp(26px,3.2vw,42px);
  font-weight:900;
  letter-spacing:.6px;
  line-height:1.05;
  background:linear-gradient(90deg,#0a74da 0%, #38b6ff 55%, #ff7a2d 100%) !important;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 6px rgba(0,0,0,.08);
  white-space:nowrap;
}
.title::after{
  content:"";
  position:absolute;
  left:50%; bottom:-10px;
  transform:translateX(-50%);
  width:46%; height:3px;
  background:linear-gradient(90deg,#0a74da,#38b6ff,#ff7a2d) !important;
  border-radius:4px;
  box-shadow:0 4px 14px -2px rgba(10,116,218,.35);
}
.progress{
  margin-left:auto; /* mevcut yapıyı koru */
  display:flex;
  gap:8px;
  position:relative;
  z-index:2; /* başlık altında kalmasın */
}
.progress .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.12) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
  transition:.25s;
}
.progress .dot.active{
  background:#38b6ff !important;
  box-shadow:0 0 0 6px rgba(56,182,255,.28) !important;
  transform:scale(1.18) !important;
}

/* LS logosunu kaldır */
.wiz-header .brand,
.wiz-header .brand::before,
.wiz-header .brand::after{
  display: none !important;
  content: none !important;
}

/* Başlık hizası */
.wiz-header .title{ margin-left: 0 }

/* Site Header (logo solda, menü sağda) */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 18px rgba(0,0,0,0.06);
}
.site-row{
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 12px 16px 0px; /* SOL padding = 0 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo{
  margin-right: auto;
  margin-left: 0; /* SOLA YAPIŞIK */
  padding-left: 0; /* SOLA YAPIŞIK */
}

.site-logo img{
  height: 80px;
  width: 130px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
}
.site-nav{
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px; /* Menüyü aşağı kaydır */
}

.site-nav a{
  padding: 14px 22px;
  display: block;
  text-decoration: none;
  letter-spacing: 1.2px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255,255,255,.05);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: all .35s cubic-bezier(.25,.9,.3,1);
  position: relative;
  overflow: hidden;
}

.site-nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}

.site-nav a:hover::before {
  left: 100%;
}

.site-nav a:hover {
  background: rgba(85,13,22,.95);
  color: #fff;
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(85,13,22,.35);
}

/* "Aracını Tasarla" (active sayfa) özel stil - belirgin */
.site-nav a.active {
  background: linear-gradient(135deg, #ff5c1a 0%, #ff7a3c 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  border: 2px solid #ff7a3c !important;
  box-shadow: 0 6px 20px rgba(255,92,26,.3) !important;
  padding: 14px 28px;
}

.site-nav a.active:hover {
  background: linear-gradient(135deg, #ff7a3c 0%, #ff9a55 100%) !important;
  border-color: #ffa66b !important;
  box-shadow: 0 10px 32px rgba(255,92,26,.5) !important;
  transform: translateY(-4px) scale(1.05);
}

/* Mobil uyumluluk */
@media screen and (max-width: 720px) {
  .site-nav {
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
  }
  
  .site-nav a {
    padding: 12px 18px;
    font-size: 14px;
  }
  
  .site-nav a.active {
    padding: 12px 22px;
  }
}

@media screen and (max-width: 540px) {
  .site-nav {
    margin-top: 12px;
  }
  
  .site-nav a {
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: 1px;
  }
  
  .site-nav a.active {
    padding: 10px 18px;
  }
}

/* Slides viewport */
.slides-viewport{
  flex:1;
  position:relative;
  overflow:hidden;
}

/* Slides container — we translateX it to slide between steps */
.slides{
  height:100%;
  display:flex;
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
  will-change: transform;
}

/* Each slide is full viewport */
.slide{
  min-width:100vw;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

/* Inner card in each slide */
.slide-inner{
  width:100%;
  max-width:1100px;
  background:linear-gradient(180deg,#132435 0%, #101c2b 100%) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-big) !important;
  border-radius:20px !important;
  padding:38px 36px 42px !important;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Headings */
.slide h2{ font-size:28px !important; font-weight:800 !important; letter-spacing:.4px; margin-bottom:4px }
.muted{ color:var(--muted) }
.small{ font-size:13px; color:var(--muted) }

/* Options grid */
.options-grid{
  display:grid;
  gap:16px !important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
  margin-top:8px;
}
.option{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#c5d3df !important;
  font-size:15px !important;
  font-weight:700 !important;
  padding:18px 20px !important;
  border-radius:16px !important;
  position:relative;
  isolation:isolate;
  transition:.25s cubic-bezier(.25,.9,.3,1) !important;
  backdrop-filter:blur(6px);
}
.option::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,255,255,.08),transparent 55%);
  border-radius:inherit;
  opacity:0;transition:.35s;
}
.option:hover{
  transform:translateY(-5px) !important;
  border-color:#38b6ff !important;
  color:#fff !important;
  box-shadow:0 10px 26px -4px rgba(0,0,0,.55);
}
.option:hover::before{opacity:1}
.option.active{
  background:linear-gradient(95deg,#ff7a2d 0%, #ffa66b 100%) !important;
  color:#061320 !important;
  border-color:#ff9a55 !important;
  box-shadow:0 14px 34px -6px rgba(255,122,45,.45) !important;
}
.option.active::after{
  content:"✓";
  position:absolute;
  top:10px;right:14px;
  font-size:15px;
  font-weight:900;
  color:#061320;
}

/* Packages look slightly different */
.pack-grid .pack{
  padding:14px;border-radius:12px;background:rgba(255,255,255,0.02);cursor:pointer;border:1px solid rgba(255,255,255,0.03);
}
.pack.active{ background:linear-gradient(90deg,var(--accent),#ffa66b); color:#081018; }

/* Nav row */
.nav-row{ display:flex; justify-content:space-between; margin-top:10px }
.btn{
  border:0;padding:12px 14px;border-radius:10px;cursor:pointer;background:transparent;color:var(--muted);
  border:1px solid rgba(255,255,255,0.03)
}
.btn.ghost{ background:transparent }
.btn.primary{
  background:linear-gradient(90deg,#0a74da,#38b6ff) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 12px 34px -6px rgba(10,116,218,.55) !important;
}

/* Form slide specifics */
.form-slide{ display:flex; gap:22px; flex-direction:column }
.summary-box{ background:rgba(255,255,255,.04) !important; padding:12px; border-radius:10px; color:var(--muted); font-size:14px }
.order-form{ display:flex; flex-direction:column; gap:10px; margin-top:6px }
.order-form input, .order-form textarea{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  font-size:15px !important;
  color:#eaf0f6 !important;
  transition:.25s;
}
.order-form textarea{ min-height:110px; resize:vertical; }
.form-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:6px }
.form-msg{ margin-top:8px; color:var(--muted); font-weight:600 }

/* Modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); z-index:60; }
.modal.hidden{ display:none }
.modal-card{ background:linear-gradient(160deg,#142435 0%, #101c2b 100%) !important; border:1px solid var(--border) !important; border-radius:22px !important; box-shadow:0 26px 70px -14px rgba(0,0,0,.65) !important; padding:34px 30px !important; }

/* Responsive tweaks */
@media (max-width:900px){
  .slide-inner{ padding:20px; margin:0 8px }
  .options-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }
  .wiz-header{ padding:0 14px }
}
@media (max-width:700px){
  .site-row{padding:16px 20px}
  .site-logo img{height:58px}
  .site-nav{gap:10px}
  .site-nav a{font-size:15px; padding:10px 16px; border-radius:10px}
}
@media (max-width:640px){
  .wiz-header{
    height:120px
  }
  .wiz-header .title{
    white-space:normal;
    text-align:center;
    padding:0 12px;
  }
  .wiz-header .title::after{ width:40%; }
}

/* Başlık: gradient yazı + ince alt çizgi + alt başlık */
.wiz-header .title{
  grid-column: 2;
  text-align: center;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1.05;
  background: linear-gradient(90deg, var(--brand) 0%, #38b6ff 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
}
.wiz-header .title::after{
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -10px;
  width: 56%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #38b6ff, var(--accent));
  border-radius: 4px;
  box-shadow: 0 4px 14px -2px rgba(10,116,218,.35);
}
.wiz-header .subtitle{
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 18px;
  color: #475569;
  opacity: .95;
  font-size: clamp(14px, 1.6vw, 18px);
}

/* Progress: koyu tema ile kontrast */
.progress .dot{ background:#20314c }
.progress .dot.active{ background:#0a74da; box-shadow:0 0 0 5px rgba(10,116,218,.18); transform:scale(1.1) }

/* Kartlar: koyu tema — beyaz kartları ez */
.option{
  background:rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  color:#eaf0f6 !important;
  padding:16px; border-radius:12px; font-weight:700;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.option:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.04) !important; color:#fff !important }
.option.active, .pack.active{
  background:linear-gradient(90deg,var(--accent),#ffa66b) !important;
  color:#081018 !important; border-color:transparent !important;
  box-shadow:0 12px 28px rgba(255,122,45,0.12);
}
/* İsteğe bağlı: aktif karttaki ✓ işaretini kaldırmak istersen uncomment et */
/* .option.active::after, .option.selected::after{ display:none } */

/* Küçük ekran: çizgi taşmasını azalt */
@media (max-width:640px){
  .wiz-header{ height:120px }
  .wiz-header .title{ white-space:normal; text-align:center; padding:0 12px }
  .wiz-header .title::after{ width:40% }
}

/* Adım geçişleri (yumuşak görünüm) */
.slide{
  /* display: none;  kaldırmayın; mevcutsa aşağıdaki animasyon minimal etki verir */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.slide.active{
  display: block;            /* mevcut kuralınız buysa kalsın */
  opacity: 1;
  transform: translateY(0);
}

/* Modal açılış animasyonu */
.modal-card{
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.modal:not(.hidden) .modal-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Buton hover’ı biraz daha canlı */
.btn.primary{
  background: linear-gradient(90deg, var(--brand) 0%, #38b6ff 100%);
  color: #fff; box-shadow: 0 6px 22px rgba(10,116,218,.18);
}
.btn.primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(10,116,218,.24);
}

/* ===== LAYOUT FIX OVERRIDES (append) ===== */
.wizard-root{
  max-width:1180px !important;
  width:100% !important;
  margin:20px auto 80px !important;
  padding:0 24px !important;
}

.slides{
  display:flex;
  width:100%;
  transition:transform .6s cubic-bezier(.2,.9,.3,1);
}

.slides .slide{
  min-width:100% !important;           /* 100vw yerine container genişliği */
  width:100% !important;
  padding:40px 0 !important;
}

.slide-inner{
  margin:0 auto !important;
  max-width:920px !important;
}

/* Başlık mutlak konumu kaldır – container’a göre ortala */
.wiz-header{
  max-width:1180px;
  margin:0 auto 12px;
  padding:30px 24px 50px !important;
  height:auto !important;
}
.wiz-header .title{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  white-space:normal !important;
  margin:0 auto 22px !important;
  text-align:center !important;
  padding:0 12px !important;
}
.wiz-header .title::after{
  width:160px !important;              /* sabit çizgi */
  max-width:46% !important;
}

.wiz-header .subtitle{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin-top:4px !important;
  text-align:center !important;
  color:var(--muted) !important;
  font-size:14px !important;
}

/* Progress noktaları sağa yapışmasın */
.progress{
  position:absolute;
  top:18px;
  right:24px;
}

/* Kartların dışarı taşmasını engelle */
.slide-inner{box-shadow:0 18px 40px rgba(2,6,23,.55)}

/* Küçük ekran uyumu */
@media (max-width:640px){
  .slide-inner{padding:26px 20px !important}
  .wiz-header{padding:26px 16px 46px !important}
  .wiz-header .title::after{width:120px !important}
}

/* ===== MODERN PREMIUM OVERRIDES (append only) ===== */

/* Tema dokusu (daha yumuşak kontrast) */
:root{
  --bg:#0a111d;
  --panel:#101c2b;
  --card:#132435;
  --glass:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --shadow-big:0 18px 44px -8px rgba(0,0,0,.55);
}

/* Arka plan geçiş */
body{
  background:
    radial-gradient(circle at 18% 24%, #11273d 0%, #0a111d 55%),
    linear-gradient(160deg,#0a111d,#09101b 70%);
  color:var(--text);
}

/* Wizard header yeniden */
.wiz-header{
  background:linear-gradient(135deg,#132435 0%, #101c2b 50%, #162c42 100%) !important;
  border:1px solid var(--border) !important;
  border-radius:24px !important;
  padding:34px 34px 58px !important;
  box-shadow:0 14px 48px -10px rgba(0,0,0,.55) !important;
  position:relative !important;
  overflow:hidden;
}
.wiz-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 22%, rgba(255,122,45,.12), transparent 60%),
    radial-gradient(circle at 12% 78%, rgba(10,116,218,.14), transparent 62%);
  pointer-events:none;
}
.wiz-header .title{
  font-size:clamp(30px,3.8vw,50px) !important;
  letter-spacing:.7px !important;
  margin:0 auto 26px !important;
  padding:0 18px !important;
  background:linear-gradient(90deg,#0a74da 0%, #38b6ff 55%, #ff7a2d 100%) !important;
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  position:relative;
}
.wiz-header .title::after{
  width:220px !important;
  height:4px !important;
  bottom:-14px !important;
  background:linear-gradient(90deg,#0a74da,#38b6ff,#ff7a2d) !important;
  box-shadow:0 4px 18px -2px rgba(10,116,218,.45);
}
.wiz-header .subtitle{
  display:block !important;
  position:relative !important;
  margin:4px auto 0 !important;
  max-width:760px;
  font-size:15px !important;
  color:#89a1b8 !important;
  text-align:center !important;
  line-height:1.35;
}

/* Progress dots küçült + cam efekti */
.progress{
  top:20px !important;
  right:28px !important;
}
.progress .dot{
  background:rgba(255,255,255,.12) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
}
.progress .dot.active{
  background:#38b6ff !important;
  box-shadow:0 0 0 6px rgba(56,182,255,.28) !important;
  transform:scale(1.18) !important;
}

/* Slide iç kart */
.slide-inner{
  background:linear-gradient(180deg,#132435 0%, #101c2b 100%) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-big) !important;
  border-radius:20px !important;
  padding:38px 36px 42px !important;
}

/* Başlıklar */
.slide h2{
  font-size:28px !important;
  font-weight:800 !important;
  letter-spacing:.4px;
}

/* Options grid kartları */
.options-grid{
  gap:16px !important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
}
.option{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#c5d3df !important;
  font-size:15px !important;
  font-weight:700 !important;
  padding:18px 20px !important;
  border-radius:16px !important;
  position:relative;
  isolation:isolate;
  transition:.25s cubic-bezier(.25,.9,.3,1) !important;
  backdrop-filter:blur(6px);
}
.option::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,255,255,.08),transparent 55%);
  border-radius:inherit;
  opacity:0;transition:.35s;
}
.option:hover{
  transform:translateY(-5px) !important;
  border-color:#38b6ff !important;
  color:#fff !important;
  box-shadow:0 10px 26px -4px rgba(0,0,0,.55);
}
.option:hover::before{opacity:1}
.option.active{
  background:linear-gradient(95deg,#ff7a2d 0%, #ffa66b 100%) !important;
  color:#061320 !important;
  border-color:#ff9a55 !important;
  box-shadow:0 14px 34px -6px rgba(255,122,45,.45) !important;
}
.option.active::after{
  content:"✓";
  position:absolute;
  top:10px;right:14px;
  font-size:15px;
  font-weight:900;
  color:#061320;
}

/* Paket grid daha geniş */
.pack-grid .option{min-height:74px !important}

/* Focus-visible erişilebilirlik */
.option:focus-visible,
.btn:focus-visible,
.order-form input:focus-visible,
.order-form textarea:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px #38b6ff55,0 0 0 1px #38b6ff !important;
  border-color:#38b6ff !important;
}

/* Butonlar */
.btn{
  font-size:14px !important;
  font-weight:600 !important;
  padding:12px 20px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#c5d3df !important;
  transition:.25s cubic-bezier(.25,.9,.3,1) !important;
}
.btn:hover{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  transform:translateY(-3px) !important;
}
.btn.primary{
  background:linear-gradient(90deg,#0a74da,#38b6ff) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 12px 34px -6px rgba(10,116,218,.55) !important;
}
.btn.primary:hover{
  background:linear-gradient(90deg,#38b6ff,#0a74da) !important;
  transform:translateY(-4px) scale(1.02) !important;
  box-shadow:0 16px 42px -8px rgba(10,116,218,.65) !important;
}

/* Özet kutusu */
.summary-box{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  color:#c5d3df !important;
  font-size:14px !important;
  padding:16px 18px !important;
}

/* Form alanları */
.order-form input,
.order-form textarea{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  font-size:15px !important;
  color:#eaf0f6 !important;
  transition:.25s;
}
.order-form input:focus,
.order-form textarea:focus{
  background:#152c44 !important;
  border-color:#38b6ff !important;
  box-shadow:0 0 0 3px #38b6ff44 !important;
}

/* Modal */
.modal{
  backdrop-filter:blur(10px) brightness(.85) !important;
}
.modal-card{
  background:linear-gradient(160deg,#142435 0%, #101c2b 100%) !important;
  border:1px solid var(--border) !important;
  border-radius:22px !important;
  box-shadow:0 26px 70px -14px rgba(0,0,0,.65) !important;
  padding:34px 30px !important;
}
.modal-card h3{
  font-size:24px !important;
  font-weight:800 !important;
  letter-spacing:.4px;
  margin-bottom:12px !important;
  background:linear-gradient(90deg,#0a74da,#38b6ff,#ff7a2d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Animasyonlar */
.slide{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s, transform .35s;
}
.slide.active{
  opacity:1;
  transform:translateY(0);
}

/* Responsive ince ayar */
@media (max-width:760px){
  .wiz-header{padding:30px 20px 54px !important}
  .wiz-header .title{font-size:36px !important}
  .wiz-header .title::after{width:180px !important}
  .options-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important}
  .slide-inner{padding:30px 24px 36px !important}
}
@media (max-width:520px){
  .wiz-header .title{font-size:32px !important}
  .wiz-header .title::after{width:140px !important}
  .progress{top:16px !important; right:16px !important}
  .btn{width:100% !important; justify-content:center}
  .form-actions{flex-direction:column !important}
}

/* === HEADER LAYOUT / TITLE RECTANGLE FIX (APPEND – NOTHING REMOVED) === */
.wiz-header{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:0 !important;
  padding:42px 42px 54px !important;
  overflow:visible !important;              /* gradient gölgesi kesilmesin */
  max-width:1180px !important;
  margin:0 auto 32px !important;
}

.wiz-header .title{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  white-space:normal !important;
  width:100% !important;
  text-align:center !important;
  margin:0 0 30px !important;
  padding:0 12px !important;
  font-size:clamp(34px,3.6vw,52px) !important;
  line-height:1.05 !important;
  letter-spacing:.7px !important;
  background:linear-gradient(90deg,#0a74da 0%,#38b6ff 55%,#ff7a2d 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important; /* Chrome/Safari rectangular fill bug fix */
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.wiz-header .title::after{
  position:relative !important;
  left:50% !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  display:block !important;
  margin-top:14px !important;
  width:240px !important;
  height:4px !important;
  background:linear-gradient(90deg,#0a74da,#38b6ff,#ff7a2d) !important;
  border-radius:4px;
  box-shadow:0 4px 18px -2px rgba(10,116,218,.45);
}

.wiz-header .subtitle{
  display:block !important;
  order:2;
  width:100% !important;
  margin:-16px 0 6px !important;
  text-align:center !important;
  font-size:15px !important;
  line-height:1.35 !important;
  color:#89a1b8 !important;
  font-weight:500;
}

.progress{
  position:absolute !important;
  top:18px !important;
  right:28px !important;
  gap:10px !important;
  z-index:3 !important;
}

.progress .dot{
  width:13px !important;
  height:13px !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  transition:.25s;
}
.progress .dot.active{
  background:#38b6ff !important;
  box-shadow:0 0 0 6px rgba(56,182,255,.30) !important;
  transform:scale(1.22) !important;
}

/* İç kart üst boşluğu başlık büyüyünce çok açılmasın */
.slide-inner{
  margin-top:-6px !important;
}

/* Dar ekran optimizasyonu */
@media (max-width:640px){
  .wiz-header{
    padding:34px 22px 50px !important;
    margin:0 auto 26px !important;
  }
  .wiz-header .title{
    font-size:clamp(30px,7.4vw,44px) !important;
    margin:0 0 26px !important;
  }
  .wiz-header .title::after{
    width:60% !important;
  }
  .progress{
    top:14px !important;
    right:16px !important;
  }
}

/* ====== SHOWROOM / OTO GALERİ VIBES (APPEND ONLY) ====== */

/* Karbon fiber + koyu degrade katman */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    repeating-linear-gradient(45deg,#0f1925 0 10px,#111f2d 10px 20px),
    linear-gradient(160deg,#08111c,#0c1b29 55%,#08111c);
  mix-blend-mode:normal;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 70% 18%,rgba(255,122,45,.12),transparent 60%),
    radial-gradient(circle at 18% 80%,rgba(56,182,255,.12),transparent 62%);
  pointer-events:none;
  filter:blur(4px);
  opacity:.9;
}

/* Showroom floor parlama (alt fade) */
.wizard-root::after{
  content:"";
  position:absolute;
  left:50%;bottom:-120px;
  transform:translateX(-50%);
  width:1400px; height:420px;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.08),rgba(0,0,0,0) 70%);
  opacity:.45;
  pointer-events:none;
  filter:blur(40px);
}

/* Başlık ışık süpürmesi */
.wiz-header{
  position:relative;
  isolation:isolate;
}
.wiz-header .title{
  overflow:hidden;
}
.wiz-header .title::before{
  content:"";
  position:absolute;
  top:0;left:-30%;
  width:30%;height:100%;
  background:linear-gradient(70deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 48%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation: sweep 5.5s linear infinite;
  mix-blend-mode:overlay;
}
@keyframes sweep{
  0%{ left:-35%; opacity:0 }
  10%{ opacity:1 }
  45%{ left:120%; opacity:0 }
  100%{ left:120%; opacity:0 }
}

/* İnce neon alt çizgi pulse */
.wiz-header .title::after{
  animation: glowline 4.2s ease-in-out infinite;
}
@keyframes glowline{
  0%,100%{ box-shadow:0 4px 18px -2px rgba(10,116,218,.55),0 0 0 rgba(255,122,45,0) }
  50%{ box-shadow:0 4px 22px -2px rgba(255,122,45,.55),0 0 18px -4px rgba(56,182,255,.4) }
}

/* Progress noktalarına iç parlama */
.progress .dot{
  position:relative;
  overflow:visible;
}
.progress .dot.active::after{
  content:"";
  position:absolute;inset:-6px;
  background:radial-gradient(circle,rgba(56,182,255,.5),transparent 70%);
  filter:blur(6px);
  border-radius:50%;
  opacity:.7;
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ transform:scale(.9); opacity:.55 }
  50%{ transform:scale(1.15); opacity:.9 }
}

/* Option kartları: köşede eğik neon şerit + hover ışık */
.option{
  --border-fx:rgba(56,182,255,.55);
  background:
    linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%) !important;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}
.option::after{
  content:"";
  position:absolute;
  top:-40%; right:-40%;
  width:70%; height:200%;
  background:linear-gradient(195deg,rgba(56,182,255,.4),rgba(255,122,45,.55));
  opacity:0;
  filter:blur(28px);
  transform:rotate(25deg) scale(.6);
  transition:.6s;
}
.option:hover::after{ opacity:.25; transform:rotate(25deg) scale(.9) }
.option.active::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,#ff7a2d,#ffa66b 35%,#38b6ff 70%,#0a74da);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:borderFlow 3.5s linear infinite;
}
@keyframes borderFlow{
  0%{ filter:hue-rotate(0deg) brightness(1) }
  50%{ filter:hue-rotate(90deg) brightness(1.15) }
  100%{ filter:hue-rotate(0deg) brightness(1) }
}

/* Aktif kart iç glow */
.option.active{
  box-shadow:
    0 10px 28px -8px rgba(255,122,45,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 22px -4px rgba(56,182,255,.55);
}

/* Metalik / cam butonlar */
.btn{
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02)) !important;
  backdrop-filter:blur(8px) saturate(140%);
  border:1px solid rgba(255,255,255,.18) !important;
}
.btn.primary{
  background:
    linear-gradient(100deg,#0a74da 0%,#38b6ff 40%,#55c6ff 60%,#0a74da 100%) !important;
  background-size:200% 100%;
  animation: gradientSlide 5.8s linear infinite;
  position:relative;
  overflow:hidden;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%);
  mix-blend-mode:overlay;
  opacity:.15;
}
@keyframes gradientSlide{
  0%{ background-position:0 0 }
  100%{ background-position:200% 0 }
}

/* Form alanlarına ince iç gölge */
.order-form input,
.order-form textarea{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 4px 14px -10px rgba(0,0,0,.6);
}
.order-form input:focus,
.order-form textarea:focus{
  box-shadow:0 0 0 3px #38b6ff55,inset 0 0 0 1px #38b6ff;
}

/* Özet kutusu parıltı */
.summary-box{
  position:relative;
  overflow:hidden;
}
.summary-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 85% 25%,rgba(56,182,255,.18),transparent 65%);
  opacity:.5;
  pointer-events:none;
}

/* Modal parıltı */
.modal-card{
  position:relative;
  overflow:hidden;
}
.modal-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 80%,rgba(255,122,45,.18),transparent 60%),
    radial-gradient(circle at 80% 20%,rgba(56,182,255,.18),transparent 62%);
  mix-blend-mode:overlay;
  pointer-events:none;
  opacity:.6;
}

/* Küçük ekran optimizasyon */
@media (max-width:640px){
  .wiz-header{padding:34px 22px 54px !important}
  .wiz-header .title{font-size:clamp(28px,8vw,42px)!important}
  .options-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
}

/* Performans: animasyonlu öğelere azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .wiz-header .title::before,
  .btn.primary,
  .option.active::before{animation:none!important}
}

/* === FOOTER (append only) === */
.site-footer{
  margin-top:40px;
  background:var(--panel);
  position:relative;
  border-top:1px solid var(--border);
}
.site-footer::before{
  content:"";
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  height:3px;width:240px;
  background:linear-gradient(90deg,#0a74da,#38b6ff,#ff7a2d);
  border-radius:4px;
  filter:drop-shadow(0 4px 10px rgba(10,116,218,.35));
}
.footer-row{
  max-width:1320px;
  margin:0 auto;
  padding:26px 28px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  color:#89a1b8;
  letter-spacing:.4px;
}
.footer-copy{user-select:none}
@media (max-width:640px){
  .footer-row{flex-direction:column;gap:8px;text-align:center}
  .site-footer::before{width:180px}
}

/* Footer metnini büyüt ve ortala (override) */
.footer-row{
  justify-content: center !important;
  text-align: center !important;
}

.footer-copy{
  display:block;
  width:100%;
  margin:0 auto !important;
  text-align:center !important;
  font-size:18px !important;   /* büyüt */
  font-weight:700 !important;   /* belirgin */
  letter-spacing:.6px !important;
}

/* Marka logoları */
.brand-option {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px !important;
  min-height: 120px;
}

.brand-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: all .3s ease;
}

.brand-option:hover .brand-logo {
  filter: brightness(1) invert(0);
  opacity: 1;
  transform: scale(1.1);
}

.brand-option.active .brand-logo {
  filter: brightness(1) invert(0);
  opacity: 1;
}

.brand-option span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}