/* ==========================================================
   LAVANTA NAKLİYAT — style.css
   Tasarım sistemi + Hero
   ========================================================== */

:root {
  --lavanta: #7B5EA7;        /* ana aksiyon rengi */
  --lavanta-koyu: #63488C;   /* hover */
  --lavanta-acik: #DCD3EC;   /* açık vurgu */
  --lavanta-cok-acik: #F5F2FA; /* bölüm zemini */
  --siyah: #1A1A1A;
  --gri-900: #2B2B2B;
  --gri-400: #9AA0A6;
  --gri-100: #F2F3F5;
  --beyaz: #FFFFFF;
  --yesil-wp: #25D366;

  --font-baslik: "Archivo", Arial, sans-serif;
  --font-govde: "Inter", Arial, sans-serif;

  --radius-kart: 14px;
  --radius-buton: 10px;
  --golge-cta: 0 10px 30px rgba(123, 94, 167, .35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-govde);
  color: var(--gri-900);
  background: var(--beyaz);
  line-height: 1.5;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--beyaz);
}

/* ---------- Üst bar ---------- */
.hero-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
  z-index: 20;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.hamburger span {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--lavanta);
  transition: background .2s;
}
.hamburger:hover span { background: var(--lavanta-koyu); }

.phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--siyah);
  color: var(--beyaz);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .2s;
}
.phone-badge:hover { background: var(--gri-900); }

/* ---------- Bulutlar ---------- */
.bulut {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.bulut-1 {
  top: 90px;
  left: 3vw;
  width: clamp(140px, 13vw, 230px);
  animation: bulut-suzul 46s ease-in-out infinite alternate;
}
.bulut-2 {
  top: 60px;
  right: 4vw;
  width: clamp(160px, 15vw, 270px);
  animation: bulut-suzul 62s ease-in-out infinite alternate-reverse;
}
.bulut-3 {
  top: 42%;
  left: 1vw;
  width: clamp(110px, 9vw, 160px);
  opacity: .85;
  animation: bulut-suzul 54s ease-in-out infinite alternate;
}
@keyframes bulut-suzul {
  from { transform: translateX(0); }
  to   { transform: translateX(55px); }
}

/* ---------- Orta içerik ---------- */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(70px, 10vh, 110px) 20px 30px;
}

.hero-brand .logo { display: inline-block; }
.logo-svg { display: block; width: clamp(230px, 27vw, 340px); max-width: 100%; height: auto; margin: 0 auto; }

.hero-heading { margin-top: clamp(28px, 5vh, 48px); }
.hero-heading h1 {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--siyah);
  line-height: 1.15;
  min-height: 1.2em; /* yazarken zıplamayı önler */
}
.cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: 400;
  color: var(--siyah);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-sub {
  margin-top: 10px;
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--gri-900);
}

/* ---------- CTA ---------- */
.hero-cta { margin-top: clamp(36px, 7vh, 64px); }
.btn-cta {
  display: inline-block;
  background: var(--lavanta);
  color: var(--beyaz);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 58px;
  border-radius: var(--radius-buton);
  box-shadow: var(--golge-cta);
  transition: background .2s, transform .2s;
}
.btn-cta:hover { background: var(--lavanta-koyu); transform: translateY(-2px); }

.hero-trust {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gri-400);
}

/* ---------- Sokak sahnesi ---------- */
.hero-scene {
  position: relative;
  margin-top: clamp(20px, 3.5vh, 40px);
  height: clamp(210px, 32vh, 300px);
}

/* Gökdelen silüeti (evlerin arkasında) */
.gokdelen {
  position: absolute;
  bottom: 70px; /* yol yüksekliği */
  width: clamp(180px, 15vw, 260px);
  z-index: 0;
  pointer-events: none;
}
.gokdelen-sol { left: 0; }
.gokdelen-sag { right: 0; }

.houses {
  position: absolute;
  bottom: 70px; /* yol yüksekliği */
  width: clamp(320px, 30vw, 560px);
  z-index: 1;
  pointer-events: none;
}
.houses-left { left: 0; }
.houses-right { right: 0; }

/* ---------- Yol ---------- */
.road {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: var(--gri-100);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.road-badges {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 1400px;
  padding: 0 20px;
}
.road-badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gri-400);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .6px;
  white-space: nowrap;
}
.road-badges svg { flex: none; }

/* ---------- Araçlar ---------- */
.vehicle {
  position: absolute;
  bottom: 58px; /* yolun üst kenarına basar */
  left: 0;
  z-index: 3;
  will-change: transform;
}
.vehicle svg { height: auto; display: block; }
.vehicle-truck { width: 230px; animation: surus 22s linear infinite; }
.vehicle-van   { width: 165px; bottom: 60px; animation: surus-ters 15s linear infinite; animation-delay: -6s; }

@keyframes surus {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-260px); }
}
@keyframes surus-ters {
  from { transform: translateX(-260px); }
  to   { transform: translateX(100vw); }
}

.wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: teker 0.9s linear infinite;
}
.vehicle-van .wheel { animation-name: teker-ters; }
@keyframes teker {
  to { transform: rotate(-360deg); }
}
@keyframes teker-ters {
  to { transform: rotate(360deg); }
}

/* ==========================================================
   HAMBURGER MENÜ (overlay)
   ========================================================== */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, .5);
  opacity: 0;
  transition: opacity .25s;
  z-index: 90;
}
.menu-backdrop.acik { opacity: 1; }

.menu-panel {
  position: fixed;
  top: 0; left: 0;
  height: 100dvh;
  width: min(360px, 86vw);
  background: var(--beyaz);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  transform: translateX(-102%);
  transition: transform .3s ease;
  overflow-y: auto;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
}
.menu-panel.acik { transform: translateX(0); }

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gri-100);
}
.menu-title {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 18px;
  color: var(--lavanta);
}
.menu-close {
  font-size: 32px;
  line-height: 1;
  color: var(--gri-900);
  padding: 2px 8px;
}
.menu-close:hover { color: var(--lavanta); }

.menu-list { margin-top: 18px; flex: 1; }
.menu-list > li > a {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 18px;
  color: var(--siyah);
  padding: 12px 0;
  transition: color .15s;
}
.menu-list > li > a:hover { color: var(--lavanta); }

.menu-sublist { padding: 0 0 8px 16px; border-left: 2px solid var(--lavanta-acik); margin-left: 2px; }
.menu-sublist a {
  display: block;
  font-size: 15px;
  color: var(--gri-900);
  padding: 7px 0;
}
.menu-sublist a:hover { color: var(--lavanta); }

.menu-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--lavanta);
  color: var(--beyaz);
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-buton);
  margin-top: 16px;
}
.menu-phone:hover { background: var(--lavanta-koyu); }

body.menu-acik { overflow: hidden; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1200px) {
  .houses { width: clamp(260px, 26vw, 420px); }
  .road-badges li { font-size: 11px; }
}

@media (max-width: 992px) {
  .houses { width: 240px; }
  .gokdelen { width: 140px; }
  .bulut-3 { display: none; }
  .road-badges { justify-content: space-around; }
  .road-badges li:nth-child(4) { display: none; }
}

@media (max-width: 768px) {
  .houses-left { display: none; }
  .houses-right { width: 220px; }
  .gokdelen-sol { display: none; }
  .gokdelen-sag { width: 110px; }
  .bulut-1 { top: 70px; }
  .phone-badge { font-size: 14px; padding: 9px 12px; }
  .road-badges li:nth-child(3) { display: none; }
  .vehicle-truck { width: 180px; }
  .vehicle-van { width: 130px; }
  .hero-scene { height: 190px; }
}

@media (max-width: 480px) {
  .hero-heading h1 { font-size: clamp(26px, 7.5vw, 32px); }
  .hero-sub { font-size: clamp(19px, 5.5vw, 22px); }
  .hero-trust { font-size: 12px; padding: 0 10px; }
  .phone-badge { font-size: 13px; padding: 8px 12px; gap: 6px; }
  .hero-topbar { padding: 14px 16px; }
  .road-badges li { font-size: 11px; }
  .houses-right { width: 180px; }
  .road { height: 60px; }
  .houses { bottom: 60px; }
  .gokdelen { bottom: 60px; }
  .vehicle { bottom: 50px; }
  .vehicle-van { bottom: 52px; }
  .road-badges { justify-content: center; gap: 24px; }
  .btn-cta { padding: 16px 44px; }
}

/* ==========================================================
   ALT BÖLÜMLER — ortak
   ========================================================== */
.kap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.kap-dar { max-width: 820px; }

.bolum { padding: clamp(64px, 9vw, 100px) 0; }
.bolum-gri { background: #FAFAFC; }

.bolum-baslik {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--siyah);
  text-align: center;
}
.bolum-baslik [data-site="marka"] { color: var(--lavanta); }

.bolum-aciklama {
  max-width: 620px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--gri-400);
  font-size: 16px;
}

.detay-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lavanta);
  font-weight: 600;
  font-size: 14px;
  margin-top: auto;
}
.detay-link:hover { color: var(--lavanta-koyu); }

/* ---------- 1) Neden? kartları ---------- */
.ozellik-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ozellik-kart {
  background: var(--beyaz);
  border: 1px solid #EFF0F3;
  border-radius: var(--radius-kart);
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(26, 26, 26, .05);
  transition: transform .2s, box-shadow .2s;
}
.ozellik-kart:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(123, 94, 167, .14); }
.ozellik-ikon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #F5F2FA;
  color: var(--lavanta);
  display: flex; align-items: center; justify-content: center;
}
.ozellik-ikon svg { width: 32px; height: 32px; }
.ozellik-kart h3 {
  font-family: var(--font-baslik);
  font-size: 18px;
  color: var(--siyah);
  margin-bottom: 10px;
}
.ozellik-kart p { font-size: 14px; color: var(--gri-400); }

/* ---------- 1.5) Fiyat seçici + karşılaştırma ---------- */
.fiyat-kiyas { background: var(--lavanta-cok-acik); }

.fiyat-kiyas-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
/* Grid çocukları içerikten (min-width:600px tablo) ötürü daralamama sorunu yaşamasın;
   böylece .kiyas-tablo-sar'ın overflow-x'i devreye girebilir, sayfa yana taşmaz. */
.fiyat-kiyas-grid > * { min-width: 0; }

.fiyat-secici {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.fiyat-baslik {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--siyah);
  max-width: 460px;
}
.fiyat-baslik span { color: var(--lavanta); }

.secici-grup {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  background: var(--beyaz);
  border: 1px solid #E6E1F0;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(123, 94, 167, .08);
}
.secici-buton {
  padding: 12px 22px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gri-900);
  transition: background .15s, color .15s, box-shadow .15s;
}
.secici-buton:hover { background: var(--lavanta-cok-acik); }
.secici-buton.aktif {
  background: var(--lavanta);
  color: var(--beyaz);
  box-shadow: 0 6px 14px rgba(123, 94, 167, .32);
}
.secici-buton.aktif:hover { background: var(--lavanta-koyu); }

.fiyat-secici .btn-cta { margin-top: 6px; }
.fiyat-not { font-size: 13px; color: var(--gri-400); max-width: 320px; }

/* Karşılaştırma tablosu */
.kiyas-tablo-sar {
  overflow-x: auto;
  max-width: 100%;
  padding: 22px 6px;
  -webkit-overflow-scrolling: touch;
}
.kiyas-tablo {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  min-width: 600px;
  background: var(--beyaz);
  border-radius: var(--radius-kart);
  box-shadow: 0 14px 40px rgba(26, 26, 26, .08);
}

.kiyas-kolon { display: flex; flex-direction: column; }

.kiyas-baslik {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--gri-900);
  padding: 0 12px;
  border-bottom: 1px solid #F0EEF5;
}

.kiyas-hucre {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 13.5px;
  border-bottom: 1px solid #F0EEF5;
}
.kiyas-kolon .kiyas-hucre:last-child,
.kiyas-kolon .kiyas-fiyat-satir { border-bottom: 0; }

.kiyas-ozellikler .kiyas-baslik { justify-content: flex-start; padding-left: 22px; }
.kiyas-ozellikler .kiyas-hucre {
  justify-content: flex-start;
  padding-left: 22px;
  font-weight: 600;
  color: var(--gri-900);
  text-align: left;
}

.kiyas-firma .kiyas-baslik { color: var(--gri-400); font-weight: 700; }
.kiyas-firma { border-left: 1px solid #F0EEF5; }

.kiyas-fiyat-satir {
  height: 80px;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 16px;
  color: var(--gri-900);
}
.kiyas-ozellikler .kiyas-fiyat-satir { font-size: 14px; }
.kiyas-firma .kiyas-fiyat-satir {
  color: var(--gri-400);
  font-size: 13px;
  white-space: nowrap;
}

.fiyat-deger { transition: opacity .22s ease; }
.fiyat-deger.solgun { opacity: 0; }

.kiyas-not {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--gri-400);
  padding: 0 10px;
}

.im-yok { color: #CE8F8F; }
.im-notr { color: #B9BEC4; }
.im-var { color: var(--beyaz); }

/* Öne çıkan Lavanta kolonu */
.kiyas-lavanta {
  background: linear-gradient(180deg, var(--lavanta) 0%, var(--lavanta-koyu) 100%);
  border-radius: var(--radius-kart);
  transform: translateY(-16px);
  box-shadow: 0 20px 44px rgba(123, 94, 167, .38);
  padding-bottom: 16px;
  margin-bottom: -16px;
}
.kiyas-lavanta .kiyas-baslik {
  color: var(--beyaz);
  font-size: 15px;
  line-height: 1.3;
  height: 92px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.kiyas-lavanta .kiyas-hucre { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.kiyas-lavanta .kiyas-fiyat-satir {
  flex-direction: column;
  gap: 5px;
  border-bottom: 0;
}
.kiyas-rozet {
  font-family: var(--font-govde);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--lavanta);
  background: var(--beyaz);
  border-radius: 999px;
  padding: 3px 10px;
}
.kiyas-fiyat-deger {
  color: var(--beyaz);
  font-size: 17px;
  white-space: nowrap;
}

/* ---------- 2) Hizmet kartları ---------- */
.hizmet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.hizmet-kart {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid #EFF0F3;
  border-radius: var(--radius-kart);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(26, 26, 26, .05);
  transition: transform .2s, box-shadow .2s;
}
.hizmet-kart:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(123, 94, 167, .14); }
.hizmet-gorsel {
  position: relative;
  background: #F5F2FA;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
}
.hizmet-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
/* Hafif lavanta overlay: 6 kart tutarlı görünsün, başlık okunurluğu korunsun */
.hizmet-gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(123, 94, 167, .22) 0%, rgba(123, 94, 167, .04) 55%);
  pointer-events: none;
}
.hizmet-kart:hover .hizmet-gorsel img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .hizmet-gorsel img { transition: none; }
  .hizmet-kart:hover .hizmet-gorsel img { transform: none; }
}
.hizmet-kart h3,
.hizmet-kart h2 {
  font-family: var(--font-baslik);
  font-size: 19px;
  color: var(--siyah);
  margin-bottom: 8px;
}
.hizmet-kart p { font-size: 14px; color: var(--gri-400); margin-bottom: 16px; }

/* ---------- 3) Nasıl çalışır ---------- */
.adimlar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
  position: relative;
  counter-reset: adim;
}
.adimlar::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--lavanta-acik);
}
.adim { text-align: center; position: relative; }
.adim-no {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--lavanta);
  color: var(--beyaz);
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 6px 16px rgba(123, 94, 167, .3);
}
.adim h3 {
  font-family: var(--font-baslik);
  font-size: 17px;
  color: var(--siyah);
  margin: 16px 0 8px;
}
.adim p { font-size: 14px; color: var(--gri-400); max-width: 240px; margin: 0 auto; }

/* ---------- 4) Sayaç şeridi ---------- */
.sayac-serit {
  background: var(--siyah);
  padding: clamp(48px, 6vw, 72px) 0;
}
.sayac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.sayac {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 48px);
  color: var(--beyaz);
  line-height: 1.1;
}
.sayac-etiket {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--gri-400);
  letter-spacing: .5px;
}

/* ---------- 5) İlçe chip grid ---------- */
.ilce-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.ilce-grid a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid #E4E6E9;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gri-900);
  transition: background .15s, color .15s, border-color .15s;
}
.ilce-grid a:hover {
  background: var(--lavanta);
  border-color: var(--lavanta);
  color: var(--beyaz);
}

/* ---------- 6) Yorumlar ---------- */
.yorum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.yorum-kart {
  background: var(--beyaz);
  border: 1px solid #EFF0F3;
  border-radius: var(--radius-kart);
  padding: 28px;
  box-shadow: 0 10px 30px rgba(26, 26, 26, .05);
  display: flex;
  flex-direction: column;
}
.yildizlar { display: flex; gap: 3px; margin-bottom: 16px; }
.yildizlar svg { width: 18px; height: 18px; fill: #E8A33D; }
.yorum-kart p { font-size: 15px; color: var(--gri-900); flex: 1; }
.yorum-kart footer { margin-top: 18px; font-size: 14px; color: var(--gri-400); }
.yorum-kart footer strong { color: var(--siyah); }

/* ---------- 7) SSS accordion ---------- */
.sss-liste { margin-top: 40px; }
.sss-madde {
  background: var(--beyaz);
  border: 1px solid #EFF0F3;
  border-radius: var(--radius-kart);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(26, 26, 26, .04);
}
.sss-soru {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 16px;
  color: var(--siyah);
}
.sss-soru svg { flex: none; color: var(--gri-400); transition: transform .25s; }
.sss-madde.acik .sss-soru svg { transform: rotate(180deg); color: var(--lavanta); }
.sss-madde.acik .sss-soru { color: var(--lavanta); }
.sss-cevap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.sss-cevap > div { overflow: hidden; }
.sss-cevap p { padding: 0 22px 20px; font-size: 15px; color: var(--gri-400); }
.sss-madde.acik .sss-cevap { grid-template-rows: 1fr; }

/* ---------- 8) Blog kartları ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.blog-kart {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid #EFF0F3;
  border-radius: var(--radius-kart);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(26, 26, 26, .05);
  transition: transform .2s, box-shadow .2s;
}
.blog-kart:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(123, 94, 167, .14); }
.blog-gorsel {
  background: #F5F2FA;
  border-radius: 10px;
  padding: 16px 0;
  margin-bottom: 16px;
}
.blog-gorsel svg { width: 65%; max-height: 84px; margin: 0 auto; }
.blog-tarih { font-size: 13px; color: var(--gri-400); margin-bottom: 6px; }
.blog-kart h3 {
  font-family: var(--font-baslik);
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.blog-kart h3 a { color: var(--siyah); transition: color .15s; }
.blog-kart h3 a:hover { color: var(--lavanta); }
.blog-kart > p { font-size: 14px; color: var(--gri-400); margin-bottom: 16px; }

/* ---------- 9) CTA bandı ---------- */
.cta-bant {
  background: var(--lavanta);
  padding: clamp(48px, 6vw, 72px) 0;
}
.cta-icerik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-bant h2 {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px);
  color: var(--beyaz);
}
.cta-bant p { margin-top: 8px; color: var(--lavanta-acik); font-size: 16px; max-width: 520px; }
.cta-butonlar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-beyaz {
  display: inline-block;
  background: var(--beyaz);
  color: var(--lavanta);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 44px;
  border-radius: var(--radius-buton);
  box-shadow: 0 10px 30px rgba(26, 26, 26, .18);
  transition: transform .2s;
}
.btn-beyaz:hover { transform: translateY(-2px); }
.cta-telefon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--beyaz);
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 20px;
}
.cta-telefon:hover { text-decoration: underline; }

/* ---------- 10) Footer ---------- */
.footer { background: var(--siyah); color: #CFCFCF; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 48px;
}
.footer-kolon h4 {
  font-family: var(--font-baslik);
  font-size: 16px;
  color: var(--beyaz);
  margin-bottom: 18px;
}
.footer-kolon li { margin-bottom: 10px; }
.footer-kolon a { font-size: 14px; color: #CFCFCF; transition: color .15s; }
.footer-kolon a:hover { color: var(--lavanta-acik); }
.footer-iletisim li { font-size: 14px; line-height: 1.6; }
.footer-alt {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 0;
}
.footer-alt p { font-size: 13px; color: var(--gri-400); text-align: center; }

/* ---------- 11) Sabit butonlar ---------- */
.wp-buton {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--yesil-wp);
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
  transition: transform .2s;
}
.wp-buton:hover { transform: scale(1.08); }

.ara-cubuk { display: none; }

/* ==========================================================
   ALT BÖLÜMLER — responsive
   ========================================================== */
@media (max-width: 1200px) {
  .ozellik-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .fiyat-kiyas-grid { grid-template-columns: 1fr; }
  .hizmet-grid, .yorum-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .sayac-grid { grid-template-columns: repeat(2, 1fr); }
  .adimlar { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .adimlar::before { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-icerik { flex-direction: column; text-align: center; }
  .cta-bant p { margin-left: auto; margin-right: auto; }
  .cta-butonlar { justify-content: center; }
}

@media (max-width: 768px) {
  .ozellik-grid, .hizmet-grid, .yorum-grid, .blog-grid, .adimlar { grid-template-columns: 1fr; }
  .secici-buton { padding: 10px 14px; font-size: 14px; }
  .fiyat-baslik { max-width: 100%; }
  .ara-cubuk {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--lavanta);
    box-shadow: 0 -4px 16px rgba(26, 26, 26, .15);
  }
  .ara-cubuk a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--beyaz);
    font-weight: 700;
    font-size: 16px;
    padding: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  body { padding-bottom: 52px; }
  .wp-buton { bottom: 72px; right: 14px; width: 52px; height: 52px; }
  .footer { padding-bottom: 8px; }
}

@media (max-width: 480px) {
  .sayac-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ilce-grid a { padding: 8px 14px; font-size: 13px; }
}

/* ==========================================================
   PREMIUM GÖRSEL İYİLEŞTİRMELER
   ========================================================== */

/* Dönüşümlü bölüm zeminleri */
.bolum-gri { background: #EFE9F7; }
.fiyat-kiyas { background: #EFE9F7; }

/* Eyebrow / bölüm etiketi */
.bolum-etiket {
  display: table;
  margin: 0 auto 16px;
  padding: 7px 16px;
  background: rgba(123, 94, 167, .10);
  color: var(--lavanta);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
.bolum-gri .bolum-etiket,
.fiyat-kiyas .bolum-etiket { background: var(--beyaz); }
.fiyat-secici .bolum-etiket { margin-bottom: 0; }

/* Kart gölgeleri */
.ozellik-kart, .hizmet-kart, .yorum-kart, .blog-kart {
  border-color: #ECE5F5;
  box-shadow: 0 8px 30px rgba(123, 94, 167, .12);
}
.ozellik-kart:hover, .hizmet-kart:hover, .blog-kart:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(123, 94, 167, .22);
}

/* Neden kartları: üst vurgu çizgisi + ikon zemini */
.ozellik-kart { position: relative; overflow: hidden; }
.ozellik-kart::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lavanta), #A98FD1);
}
.ozellik-ikon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--lavanta-cok-acik);
}
.ozellik-ikon svg { width: 36px; height: 36px; }

/* Hizmet kartları: gradient görsel + canlı Detay linki */
.hizmet-gorsel {
  background: linear-gradient(135deg, #F3EEFA 0%, #DFD4EF 100%);
}
.detay-link { font-size: 15px; font-weight: 700; gap: 8px; }
.detay-link span { transition: transform .2s ease; }
.detay-link:hover span { transform: translateX(5px); }

/* Nasıl çalışır: lavanta hat + büyük numaralar + adım ikonları */
.adimlar::before { background: #C7B6E0; }
.adim-no {
  width: 64px; height: 64px;
  font-size: 24px;
  box-shadow: 0 10px 26px rgba(123, 94, 167, .38);
}
.adim-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin: 16px auto 0;
  border-radius: 50%;
  background: var(--beyaz);
  color: var(--lavanta);
  box-shadow: 0 4px 14px rgba(123, 94, 167, .16);
}
.adim-ikon svg { width: 22px; height: 22px; }
.adim h3 { margin-top: 12px; }

/* Sayaç şeridi: lavanta vurgu + dikey ayraçlar */
.sayac { color: #CBB8E8; font-size: clamp(40px, 4.5vw, 58px); }
.sayac-kutu { padding: 4px 12px; }
.sayac-kutu:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, .12); }

/* İlçe chip'leri: düzenli grid + hover kalkışı */
.ilce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ilce-grid a {
  display: block;
  text-align: center;
  padding: 11px 12px;
  background: var(--beyaz);
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.ilce-grid a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(123, 94, 167, .28);
}

/* Yorumlar: dekoratif tırnak + altın yıldız + avatar */
.yorum-kart { position: relative; }
.yorum-kart::before {
  content: "\201C";
  position: absolute;
  top: 4px; right: 20px;
  font-family: var(--font-baslik);
  font-size: 92px;
  line-height: 1;
  color: #E4DAF2;
  pointer-events: none;
}
.yorum-kart > * { position: relative; }
.yildizlar svg { fill: #F2A91E; }
.yorum-kart footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.yorum-avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavanta), var(--lavanta-koyu));
  color: var(--beyaz);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SSS: sol vurgu çizgisi + artı/eksi ikonu */
.sss-madde { border-left: 3px solid transparent; transition: border-color .2s; }
.sss-madde.acik { border-left-color: var(--lavanta); }
.sss-ikon { position: relative; flex: none; width: 18px; height: 18px; }
.sss-ikon::before, .sss-ikon::after {
  content: "";
  position: absolute;
  background: var(--lavanta);
  border-radius: 2px;
  transition: transform .25s ease;
}
.sss-ikon::before { left: 0; right: 0; top: 7.5px; height: 3px; }
.sss-ikon::after { top: 0; bottom: 0; left: 7.5px; width: 3px; }
.sss-madde.acik .sss-ikon::after { transform: scaleY(0); }

/* Blog: gradient görsel + zoom + tarih rozeti */
.blog-gorsel {
  background: linear-gradient(135deg, #F3EEFA 0%, #DFD4EF 100%);
  overflow: hidden;
}
.blog-gorsel svg { transition: transform .3s ease; }
.blog-kart:hover .blog-gorsel svg { transform: scale(1.08); }

/* Blog kartı: fotoğraflı kapak (blog index + ana sayfa) */
.blog-gorsel-foto {
  display: block;
  position: relative;
  padding: 0;
  aspect-ratio: 16 / 10;
}
.blog-gorsel-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.blog-gorsel-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(123, 94, 167, .18) 0%, rgba(123, 94, 167, .03) 55%);
  pointer-events: none;
}
.blog-kart:hover .blog-gorsel-foto img { transform: scale(1.05); }

/* Blog index kartlarında başlık h2 (sayfa H1'i "Blog" olduğu için) */
.blog-kart h2 {
  font-family: var(--font-baslik);
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.blog-kart h2 a { color: var(--siyah); transition: color .15s; }
.blog-kart h2 a:hover { color: var(--lavanta); }

/* Yazı sayfası banner'ındaki tarih rozeti */
.ic-banner .blog-tarih { margin-bottom: 12px; }
.blog-tarih {
  display: inline-block;
  width: fit-content;
  background: var(--lavanta-cok-acik);
  color: var(--lavanta);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* CTA bandı: gradient + ince doku + büyük telefon */
.cta-bant {
  background-image:
    radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 1.6px),
    linear-gradient(135deg, #8A6BBB 0%, var(--lavanta) 45%, var(--lavanta-koyu) 100%);
  background-size: 26px 26px, cover;
}
.cta-telefon { font-size: clamp(22px, 2.4vw, 28px); }

@media (max-width: 992px) {
  .sayac-kutu:nth-child(odd) { border-left: 0; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .vehicle, .wheel, .cursor, .bulut { animation: none !important; }
  .vehicle-truck { transform: translateX(30vw); }
  .vehicle-van { transform: translateX(65vw); }
  .menu-panel, .menu-backdrop, .btn-cta { transition: none; }
  .ozellik-kart, .hizmet-kart, .blog-kart, .yorum-kart, .ilce-grid a,
  .detay-link span, .blog-gorsel svg, .sss-ikon::before, .sss-ikon::after,
  .sss-madde, .sss-cevap, .secici-buton, .fiyat-deger { transition: none !important; }
  .ozellik-kart:hover, .hizmet-kart:hover, .blog-kart:hover, .ilce-grid a:hover { transform: none; }
  .blog-kart:hover .blog-gorsel svg { transform: none; }
  .blog-gorsel-foto img { transition: none; }
  .blog-kart:hover .blog-gorsel-foto img { transform: none; }
  .detay-link:hover span { transform: none; }
}

/* ==========================================================
   FİYAT AL SİHİRBAZI (/fiyat-al)
   ========================================================== */
.sayfa-ust {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #F0EEF5;
}
.sayfa-ust .hamburger { justify-self: start; }
.sayfa-ust .sayfa-logo { justify-self: center; }
.sayfa-ust .phone-badge { justify-self: end; }
.sayfa-logo .logo-svg { width: auto; height: 46px; }

.sihirbaz-kap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 90px;
}

.ilerleme-ust {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gri-400);
}
.ilerleme-bar {
  height: 8px;
  border-radius: 999px;
  background: #EFE9F7;
  overflow: hidden;
}
.ilerleme-dolgu {
  height: 100%;
  width: 12.5%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lavanta), #9B7FC7);
  transition: width .45s ease;
}

.adim-ekrani[hidden],
.geri-btn[hidden],
.devam-btn[hidden],
.sihirbaz-nav[hidden],
.ilerleme[hidden],
.adim-hata[hidden] { display: none; }
.adim-ekrani { animation: adimGel .3s ease; }
@keyframes adimGel {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.adim-soru {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--siyah);
  text-align: center;
  margin: 34px 0 30px;
}

/* Seçim kartları */
.secim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.secim-grid-dar { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.secim-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--beyaz);
  border: 2px solid #E6E1F0;
  border-radius: var(--radius-kart);
  padding: 26px 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--gri-900);
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.secim-kart svg { width: 42px; height: 42px; color: var(--lavanta); }
.secim-kart:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(123, 94, 167, .16);
}
.secim-kart.secili {
  border-color: var(--lavanta);
  background: var(--lavanta-cok-acik);
  box-shadow: 0 12px 30px rgba(123, 94, 167, .3);
}
.secim-kart-kucuk { padding: 20px 12px; }

/* Form alanları */
.form-etiket {
  display: block;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--gri-900);
  margin: 14px 0 6px;
}
.form-etiket small { font-weight: 400; color: var(--gri-400); }
.form-alan {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid #E6E1F0;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  color: var(--gri-900);
  background: var(--beyaz);
}
.form-alan:focus { outline: none; border-color: var(--lavanta); }

/* Rota */
.rota-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
}
.rota-ok {
  font-size: 24px;
  color: var(--lavanta);
  padding-bottom: 12px;
  font-weight: 700;
}

/* Kat & asansör */
.kat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.kat-blok {
  border: 2px solid #E6E1F0;
  border-radius: var(--radius-kart);
  background: var(--beyaz);
  padding: 6px 20px 20px;
}
.kat-blok legend {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 15px;
  color: var(--lavanta);
  padding: 0 8px;
}
.asansor-grup { width: 100%; box-shadow: none; }
.asansor-grup .secici-buton { flex: 1; }

/* Takvim */
.takvim-sar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.takvim-ay {
  background: var(--beyaz);
  border: 2px solid #E6E1F0;
  border-radius: var(--radius-kart);
  padding: 16px;
}
.takvim-baslik {
  text-align: center;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 15px;
  color: var(--siyah);
  margin-bottom: 12px;
}
.takvim-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.takvim-gunadi {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--gri-400);
  padding: 4px 0;
}
.takvim-gun {
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gri-900);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.takvim-gun:hover { background: var(--lavanta-cok-acik); }
.takvim-gun.pasif { opacity: .3; pointer-events: none; }
.takvim-gun.bos { pointer-events: none; }
.takvim-gun.secili {
  background: var(--lavanta);
  color: var(--beyaz);
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(123, 94, 167, .35);
}

.esnek-sar { text-align: center; margin-top: 18px; }
.esnek-btn {
  padding: 12px 24px;
  border: 2px dashed #C7B6E0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--lavanta);
  background: var(--beyaz);
  transition: background .15s, border-color .15s, color .15s;
}
.esnek-btn:hover { background: var(--lavanta-cok-acik); }
.esnek-btn.aktif {
  background: var(--lavanta);
  border-color: var(--lavanta);
  border-style: solid;
  color: var(--beyaz);
  box-shadow: 0 8px 20px rgba(123, 94, 167, .3);
}

/* İletişim */
.iletisim-form { max-width: 460px; margin: 0 auto; }
.form-satir { margin-bottom: 4px; }
.tel-sar { display: flex; gap: 8px; }
.tel-onek {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 2px solid #E6E1F0;
  border-radius: 10px;
  background: var(--lavanta-cok-acik);
  font-weight: 700;
  color: var(--lavanta);
}
.tel-alan { flex: 1; }

/* Özet */
.ozet-kart {
  background: var(--beyaz);
  border: 2px solid #E6E1F0;
  border-radius: var(--radius-kart);
  padding: 10px 24px;
  box-shadow: 0 10px 30px rgba(123, 94, 167, .1);
  margin-bottom: 22px;
}
.ozet-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px dashed #E6E1F0;
  font-size: 14.5px;
}
.ozet-satir:last-child { border-bottom: 0; }
.ozet-satir dt { color: var(--gri-400); font-weight: 500; white-space: nowrap; }
.ozet-satir dd { color: var(--siyah); font-weight: 600; text-align: right; }

.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  cursor: pointer;
}

/* Navigasyon */
.adim-hata {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #C0392B;
}
.sihirbaz-nav {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.geri-btn {
  flex: none;
  width: 56px;
  border: 2px solid #E6E1F0;
  border-radius: var(--radius-buton);
  background: var(--beyaz);
  color: var(--lavanta);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}
.geri-btn:hover { border-color: var(--lavanta); background: var(--lavanta-cok-acik); }
.devam-btn { flex: 1; border: 0; cursor: pointer; }

/* Başarı ekranı */
.basari { text-align: center; padding: 30px 10px 10px; }
.tik { width: 110px; height: 110px; margin: 0 auto 22px; }
.tik-daire {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: cizDaire .7s ease forwards;
}
.tik-cizgi {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: cizTik .45s .65s ease forwards;
}
@keyframes cizDaire { to { stroke-dashoffset: 0; } }
@keyframes cizTik { to { stroke-dashoffset: 0; } }

.basari-baslik {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--siyah);
}
.basari-metin {
  margin: 12px auto 28px;
  max-width: 420px;
  color: var(--gri-400);
  font-size: 15px;
}
.basari-butonlar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.basari-ara {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 18px;
  color: var(--lavanta);
}
.basari-ara:hover { color: var(--lavanta-koyu); }

/* Konfeti */
.konfeti {
  position: fixed;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 200;
  pointer-events: none;
  animation: konfetiDus linear forwards;
}
@keyframes konfetiDus {
  to { transform: translateY(105vh) rotate(720deg); }
}

/* Sihirbaz responsive */
@media (max-width: 640px) {
  .kat-grid, .takvim-sar { grid-template-columns: 1fr; }
  .rota-grid { grid-template-columns: 1fr; }
  .rota-ok { display: none; }
  .secim-grid { grid-template-columns: repeat(2, 1fr); }
  .secim-grid-dar { grid-template-columns: repeat(2, 1fr); }
  .sayfa-ust { padding: 12px 14px; }
  .sayfa-ust .phone-badge span { display: none; }
  .sayfa-logo .logo-svg { height: 36px; }
  .sihirbaz-kap { padding-bottom: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .adim-ekrani { animation: none; }
  .ilerleme-dolgu { transition: none; }
  .secim-kart, .takvim-gun, .esnek-btn, .geri-btn { transition: none; }
  .secim-kart:hover { transform: none; }
  .tik-daire, .tik-cizgi { animation: none; stroke-dashoffset: 0; }
  .konfeti { display: none; }
}

/* ==========================================================
   İLÇE / İÇERİK SAYFALARI (templates/ilce.html)
   ========================================================== */
.ic-hero {
  background: linear-gradient(180deg, #F5F2FA 0%, #FFFFFF 100%);
  padding: 24px 0 26px;
}

/* Üst blok: sol banner + sağ öne çıkan görsel */
.ic-banner-blok {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 0;
}

.ic-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(123, 94, 167, .25);
  background: linear-gradient(135deg, #8E74B5 0%, #63488C 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(28px, 4vw, 52px);
  min-height: clamp(280px, 26vw, 340px);
}
.ic-banner .breadcrumb { margin-bottom: 0; font-size: 13.5px; }
.ic-banner .breadcrumb a { color: rgba(255, 255, 255, .85); }
.ic-banner .breadcrumb a:hover { color: var(--beyaz); text-decoration: underline; }
.ic-banner .breadcrumb .ayrac { color: rgba(255, 255, 255, .7); }
.ic-banner .breadcrumb [aria-current] { color: var(--beyaz); font-weight: 700; }
.ic-banner-blok .ic-banner h1 {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  color: #FFFFFF;
}
.ic-banner .ic-ozet {
  margin-top: 0;
  color: #E9E0F4;
  font-size: 15.5px;
  max-width: 520px;
}
.ic-banner .ic-cta { margin-top: 10px; gap: 14px; }

/* Banner içindeki telefon butonu (FİYAT AL ile ikiz) */
.btn-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: .4px;
}
.btn-tel svg { flex: none; }

/* CTA bandındaki çerçeveli telefon butonu */
.btn-tel-cerceve {
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: var(--radius-buton);
  padding: 13px 26px;
  font-size: 18px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-tel-cerceve:hover {
  background: var(--beyaz);
  color: var(--lavanta);
  border-color: var(--beyaz);
  text-decoration: none;
}

.ic-foto-kutu {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--lavanta-acik);
  box-shadow: 0 12px 30px rgba(123, 94, 167, .18);
  margin: 0;
  min-height: 100%;
}
.ic-foto-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #8E74B5 0%, #63488C 100%);
  color: var(--beyaz);
}
.ic-foto-fallback span {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  color: #E9E0F4;
}
.ic-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ic-banner-yazi {
  position: absolute;
  left: clamp(20px, 4.5vw, 52px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--beyaz);
  text-shadow: 0 2px 14px rgba(38, 25, 60, .3);
}
.ic-banner-yazi .buyuk {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(26px, 3.8vw, 48px);
  line-height: 1.1;
}
.ic-banner-yazi .kucuk {
  display: block;
  margin-top: 6px;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 23px);
  color: #E9E0F4;
  letter-spacing: .5px;
}

/* İçerik + yapışkan sidebar düzeni */
.icerik-yerlesim {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(300px, 35fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
}
.icerik-yerlesim .icerik-govde { max-width: none; margin: 0; }

.ic-sidebar {
  position: sticky;
  top: 100px;
}
.teklif-kart {
  background: var(--beyaz);
  border: 2px solid var(--lavanta-acik);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 14px 34px rgba(123, 94, 167, .16);
  text-align: center;
}
.teklif-kart h3 {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 20px;
  color: var(--siyah);
}
.teklif-alt {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--gri-400);
}
.teklif-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 16px;
}
.teklif-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 2px solid var(--lavanta);
  border-radius: var(--radius-buton);
  background: var(--beyaz);
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 18px;
  color: var(--lavanta);
  transition: background .15s, color .15s;
}
.teklif-tel svg { color: var(--lavanta); transition: color .15s; }
.teklif-tel:hover { background: var(--lavanta); color: var(--beyaz); }
.teklif-tel:hover svg { color: var(--beyaz); }
.teklif-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--yesil-wp);
  color: var(--beyaz);
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  border-radius: var(--radius-buton);
  transition: background .15s;
}
.teklif-wa:hover { background: #1FB858; }
.teklif-rozetler {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #E6E1F0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.teklif-rozetler li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gri-900);
}
.teklif-rozetler svg { flex: none; color: var(--lavanta); }

.sidebar-hizmetler {
  margin-top: 18px;
  background: var(--beyaz);
  border: 1px solid #ECE5F5;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(123, 94, 167, .08);
}
.sidebar-hizmetler h4 {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 15px;
  color: var(--siyah);
  margin-bottom: 8px;
}
.sidebar-hizmetler a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--gri-900);
  border-bottom: 1px dashed #F0EEF5;
  transition: color .15s;
}
.sidebar-hizmetler li:last-child a { border-bottom: 0; }
.sidebar-hizmetler a span { color: var(--lavanta); font-weight: 700; }
.sidebar-hizmetler a:hover { color: var(--lavanta); }

@media (max-width: 992px) {
  .icerik-yerlesim { grid-template-columns: 1fr; }
  .ic-sidebar { position: static; }
}

@media (max-width: 768px) {
  .ic-banner-blok { grid-template-columns: 1fr; gap: 14px; }
  .ic-foto-kutu { aspect-ratio: 4 / 3; min-height: 0; }
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gri-400);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--gri-400); transition: color .15s; }
.breadcrumb a:hover { color: var(--lavanta); }
.breadcrumb .ayrac { color: #C9CDD2; }
.breadcrumb [aria-current] { color: var(--lavanta); font-weight: 600; }

.ic-ozet {
  max-width: 680px;
  margin-top: 12px;
  color: var(--gri-400);
  font-size: 16px;
}
.ic-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.ic-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 19px;
  color: var(--siyah);
  transition: color .15s;
}
.ic-tel svg { color: var(--lavanta); }
.ic-tel:hover { color: var(--lavanta); }

.icerik-bolum { padding-top: clamp(22px, 2.5vw, 30px); }
.icerik-govde { max-width: 800px; margin: 0 auto; }
.icerik-govde p {
  margin: 0 0 16px;
  line-height: 1.75;
  font-size: 15.5px;
  color: #3F3F46;
}
.icerik-govde h2 {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 22px;
  color: var(--siyah);
  margin: 30px 0 12px;
}
.icerik-govde p a,
.icerik-govde li a {
  color: var(--lavanta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lavanta-acik);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.icerik-govde p a:hover,
.icerik-govde li a:hover {
  color: var(--lavanta-koyu);
  text-decoration-color: var(--lavanta-koyu);
}
/* İçerik içindeki ilçe chip'leri makale linki gibi görünmesin */
.icerik-govde .ilce-grid a {
  color: var(--gri-900);
  font-weight: 500;
  text-decoration: none;
}
.icerik-govde .ilce-grid a:hover { color: var(--beyaz); }
/* "Tüm İlçeleri Gör" butonu makale linki stilinden (lavanta yazı + altçizgi) etkilenmesin */
.icerik-govde .tum-ilceler-sar a.btn-tum-ilceler,
.icerik-govde .tum-ilceler-sar a.btn-tum-ilceler:hover {
  color: var(--beyaz);
  text-decoration: none;
  font-weight: 700;
}
.icerik-govde table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14.5px;
}
.icerik-govde th,
.icerik-govde td {
  border: 1px solid #E6E1F0;
  padding: 9px 12px;
  text-align: left;
  color: #3F3F46;
}
.icerik-govde thead th {
  background: var(--lavanta-cok-acik);
  font-weight: 700;
  color: var(--siyah);
}
.icerik-govde ol { padding-left: 20px; list-style: decimal; margin-bottom: 16px; }
.icerik-govde ul { padding-left: 20px; list-style: disc; margin-bottom: 16px; }
.icerik-govde li { margin-bottom: 6px; font-size: 15.5px; color: #3F3F46; }
.icerik-govde ul.ilce-grid { list-style: none; padding-left: 0; margin-top: 24px; }
.icerik-govde .ilce-grid li { margin-bottom: 0; }

.tum-ilceler-sar { margin-top: 22px; }
.btn-tum-ilceler {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 14px;
}
.btn-tum-ilceler span { transition: transform .2s ease; }
.btn-tum-ilceler:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn-tum-ilceler span { transition: none; }
  .btn-tum-ilceler:hover span { transform: none; }
}

.hizmet-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 36px;
}
.hizmet-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--beyaz);
  border: 1px solid #ECE5F5;
  border-radius: 12px;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gri-900);
  box-shadow: 0 6px 18px rgba(123, 94, 167, .08);
  transition: transform .15s, border-color .15s, box-shadow .15s, color .15s;
}
.hizmet-mini:hover {
  transform: translateY(-3px);
  border-color: var(--lavanta);
  color: var(--lavanta);
  box-shadow: 0 10px 24px rgba(123, 94, 167, .18);
}
.hizmet-mini .ok { color: var(--lavanta); font-weight: 700; }

.duz-chip {
  display: block;
  text-align: center;
  padding: 11px 12px;
  border: 1px solid #E4E6E9;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: var(--beyaz);
  color: var(--gri-900);
}

@media (prefers-reduced-motion: reduce) {
  .hizmet-mini { transition: none; }
  .hizmet-mini:hover { transform: none; }
}

/* ==========================================================
   İLETİŞİM SAYFASI (/iletisim)
   ========================================================== */
.ic-banner-tek { min-height: 0; }
.ic-banner-tek h1 {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  color: #FFFFFF;
}

.iletisim-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 26px;
  align-items: start;
}
.iletisim-bilgiler { display: grid; gap: 14px; }
.iletisim-kart {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--beyaz);
  border: 1px solid #ECE5F5;
  border-radius: var(--radius-kart);
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(123, 94, 167, .08);
}
.iletisim-ikon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--lavanta-cok-acik);
  color: var(--lavanta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iletisim-ikon-wa { background: rgba(37, 211, 102, .12); color: var(--yesil-wp); }
.iletisim-kart h3 {
  font-family: var(--font-baslik);
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--siyah);
}
.iletisim-kart p { font-size: 15px; color: #3F3F46; }
.iletisim-kucuk-not { font-size: 13.5px !important; color: var(--gri-400) !important; margin-top: 3px; }
.iletisim-tel-buyuk {
  display: inline-block;
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 22px;
  color: var(--lavanta);
  transition: color .15s;
}
.iletisim-tel-buyuk:hover { color: var(--lavanta-koyu); }
.iletisim-eposta { font-size: 15px; color: var(--lavanta); font-weight: 600; word-break: break-all; }
.iletisim-eposta:hover { color: var(--lavanta-koyu); text-decoration: underline; }
.iletisim-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  background: var(--yesil-wp);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--radius-buton);
  transition: filter .15s, transform .15s;
}
.iletisim-wa-btn:hover { filter: brightness(.93); color: #FFFFFF; transform: translateY(-1px); }

.iletisim-form-kart {
  background: var(--beyaz);
  border: 1px solid #ECE5F5;
  border-radius: var(--radius-kart);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 12px 34px rgba(123, 94, 167, .10);
}
.iletisim-form-kart h2 {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--siyah);
}
.form-ust-not { color: var(--gri-400); font-size: 14.5px; margin-bottom: 6px; }
.iletisim-form-kart textarea.form-alan { min-height: 130px; resize: vertical; }
.iletisim-gonder {
  width: 100%;
  margin-top: 18px;
  padding: 15px;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.iletisim-hata { color: #C0392B; font-size: 14px; margin-top: 12px; }
.iletisim-alt-not {
  margin-top: 12px;
  font-size: 13px;
  color: var(--gri-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.harita-kutu { margin-top: 28px; }
.harita-kutu iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: var(--radius-kart);
  box-shadow: 0 10px 30px rgba(123, 94, 167, .10);
}

@media (max-width: 992px) {
  .iletisim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .harita-kutu iframe { height: 300px; }
}

/* ==========================================================
   FİYAT AL — tek soru / sabit alt buton akışı
   ========================================================== */
.sihirbaz-kap { padding: 0 20px 150px; }

/* Sabit üst bar */
.sb-ust {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--beyaz);
  margin: 0 -20px 18px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid #EFEAF7;
}
.sb-ustbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: 48px;
}
.sb-geri,
.sb-kapat {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gri-900);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sb-geri:hover,
.sb-kapat:hover { background: var(--lavanta-cok-acik); color: var(--lavanta); }
.sb-geri[hidden] { display: none; }
.sb-baslik {
  grid-column: 2;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--gri-900);
}
.sb-kapat { grid-column: 3; }
.sb-ilerleme {
  height: 6px;
  border-radius: 999px;
  background: #EFE9F7;
  overflow: hidden;
  margin-top: 4px;
}
.sb-ilerleme-dolgu {
  height: 100%;
  width: 3%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lavanta), #9B7FC7);
  transition: width .45s ease;
}

/* Radyo listesi (tek soru ekranları) */
.radyo-liste {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.radyo-satir {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--beyaz);
  border: 2px solid #E6E1F0;
  border-radius: 12px;
  padding: 16px 18px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--gri-900);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.radyo-satir:hover { border-color: var(--lavanta-acik); box-shadow: 0 6px 18px rgba(123, 94, 167, .10); }
.radyo-daire {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid #C9BFDD;
  border-radius: 50%;
  position: relative;
  background: var(--beyaz);
  transition: border-color .15s;
}
.radyo-satir.secili { border-color: var(--lavanta); background: var(--lavanta-cok-acik); }
.radyo-satir.secili .radyo-daire { border-color: var(--lavanta); }
.radyo-satir.secili .radyo-daire::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--lavanta);
}

/* Not adımı */
.sb-not {
  display: block;
  max-width: 560px;
  margin: 0 auto;
  min-height: 120px;
  resize: vertical;
}
.ornek-kutu {
  max-width: 560px;
  margin: 16px auto 0;
  background: var(--lavanta-cok-acik);
  border: 1px solid #E6DFF2;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  color: #3F3F46;
  text-align: left;
}
.ornek-kutu strong {
  display: block;
  margin-bottom: 6px;
  color: var(--lavanta);
  font-size: 13px;
  letter-spacing: .3px;
}
.ornek-kutu ul { margin: 0; padding-left: 18px; list-style: disc; }
.ornek-kutu li { margin-bottom: 4px; }

/* Adres + tarih adımları */
.adres-form { max-width: 480px; margin: 0 auto; text-align: left; }
.adres-form .form-alan[hidden] { display: none; }
.tarih-detay {
  max-width: 560px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}
.tarih-detay[hidden] { display: none; }

/* Son adım özeti */
.ozet-blok { max-width: 560px; margin: 26px auto 0; text-align: left; }
.ozet-baslik {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 16px;
  color: var(--siyah);
  margin-bottom: 10px;
}

/* Sabit alt buton */
.sb-alt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--beyaz);
  border-top: 1px solid #EFEAF7;
  box-shadow: 0 -8px 24px rgba(26, 26, 26, .07);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
}
.sb-alt[hidden] { display: none; }
.sb-alt-ic { max-width: 560px; margin: 0 auto; }
.sb-alt .adim-hata { margin: 0 0 10px; text-align: center; }
.sb-devam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.sb-devam-wa { background: var(--yesil-wp); }
.sb-devam-wa:hover { background: #1FBF5B; }

@media (max-width: 480px) {
  .tarih-detay { grid-template-columns: 1fr; }
  .radyo-satir { padding: 14px 14px; font-size: 14.5px; }
  .adim-soru { margin: 22px 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-ilerleme-dolgu { transition: none; }
}

/* Son adımda zorunlu alanlar dolana kadar buton pasif görünümü */
.sb-devam-pasif,
.sb-devam-pasif:hover {
  background: #C9BFDD;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}