/* Tercih sihirbazı (abonelikler.html#plan; yapı tools/yama/sihirbaz.py + sihirbaz.html, davranış assets/sihirbaz.js).
   Giriş: site türü kartları (web kartlarının ailesi: koyu kart, ince kenar, paketin renginde ışık; fiyat yok), ayrı bir yol olarak
   fiyatsız reklam kartı (reklam.html'e; assets/reklam-kart.css), "Basit bir iş mi?" (satış ekibi arar) ve kaldığınız yerden devam. Sihirbaz: üstte adım
   rayı; solda tek soru ve seçenekler (fiyat yok; teklif usulü), sağda yapışkan sahne (sitenin parça parça kurulduğu tuval, seçilenler,
   Geri/Devam). Altyapı adımında alan adı ve e-posta soruları ile "kim neyi sağlar"; Projeniz adımında yazı. Son: iki ödeme yolu (fiyatsız
   kartlar), tek tahmini bütçe, Teklif iste. Telefonda sahne ekranın altında küçük bir önizleme ve düğmelerle durur; dokununca büyür.
   Varsayılan kurallar son hâldir: hareketi azaltta parçalar anında görünür, uçuş, sayma ve canlandırma yoktur.
   Minyatürlerin (.onz) çizgi dili assets/web-paketler.css'te. Reklam bütçesi aralık yongalarıyla sorulur (.sb-aralik). */

.sb { --sb-cizgi: #1D2730; --sb-kart: #0A1116; --sb-soluk: #8D9AA6; --sb-metin: #A6B2BC; --paket-renk: var(--turan);
  --rk-cizgi: #1D2730; --rk-soluk: #8D9AA6; --rk-metin: #A6B2BC; --rk-kart: #0A1116;
  position: relative; min-width: 0; margin-bottom: clamp(48px, 6vw, 96px); scroll-margin-top: 96px; }
.sb [hidden] { display: none !important; }
.sb :focus-visible { outline: 2px solid var(--turan); outline-offset: 3px; }

/* ---------- ortak düğmeler ---------- */
.sb-dugme, .sb-sonraki, .sb-olustur { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 20px; border: 1px solid var(--paket-renk);
  border-radius: 12px; background: var(--paket-renk); color: #04121A; font: 650 15px/1.2 'Archivo', sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 34px -20px var(--paket-renk); transition: filter .25s, box-shadow .25s, transform .25s var(--egri); }
.sb-dugme:hover, .sb-sonraki:hover, .sb-olustur:hover { filter: brightness(1.1); box-shadow: 0 18px 40px -18px var(--paket-renk); }
.sb-dugme .ok, .sb-sonraki .ok, .sb-olustur .ok { width: 17px; height: 11px; flex: none; transition: transform .25s var(--egri); }
.sb-sonraki:hover .ok, .sb-olustur:hover .ok { transform: translateX(3px); }
.sb-dugme-ikincil, .sb-onceki, .sb-ikincil { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid #2E3B46;
  border-radius: 12px; background: transparent; color: #DCE9F1; font: 550 14.5px/1.2 'Archivo', sans-serif; text-decoration: none; cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s; }
.sb-dugme-ikincil:hover, .sb-onceki:hover, .sb-ikincil:hover { border-color: #4A5966; background: #ffffff08; color: #fff; }
.sb-onceki svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-kucuk-dugme { flex: none; min-height: 42px; padding: 0 16px; border: 1px solid #2E3B46; border-radius: 10px; background: #111A21; color: #EAF1F5; font: 550 14px/1 'Archivo', sans-serif; cursor: pointer;
  transition: border-color .2s, background-color .2s; }
.sb-kucuk-dugme:hover { border-color: var(--paket-renk); background: color-mix(in oklch, var(--paket-renk) 14%, #111A21); }
.sb-girdi { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0 13px; border: 1px solid #2E3B46; border-radius: 10px; background: #0B1217; color: #F5F8FA; font: 400 15px/1.2 'Archivo', sans-serif;
  transition: border-color .2s, box-shadow .2s; }
.sb-girdi::placeholder { color: #6F7E8A; }
.sb-girdi:focus { outline: none; border-color: var(--paket-renk); box-shadow: 0 0 0 3px color-mix(in oklch, var(--paket-renk) 25%, transparent); }
.sb-metin-bag { color: #AEBBC6; font-size: 14px; text-decoration: none; background: linear-gradient(#ffffff40, #ffffff40) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.sb-metin-bag:hover { color: #fff; }

/* ---------- giriş ---------- */
.sb-giris-ust { display: flex; justify-content: space-between; align-items: end; gap: 12px 48px; margin-bottom: 22px; }
.sb-baslik { margin: 0; font: 600 clamp(28px, 3vw, 46px)/1.06 'Archivo', sans-serif; letter-spacing: -.042em; color: #F5F8FA; text-wrap: balance; }
.sb-giris-metin { margin: 0; max-width: 44ch; color: var(--sb-metin); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

/* kaldığınız yerden devam */
.sb-devam { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 14px; padding: 14px 14px 14px 20px;
  border: 1px solid color-mix(in oklch, var(--paket-renk) 45%, var(--sb-cizgi)); border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--paket-renk) 13%, transparent), transparent 55%), var(--sb-kart); }
.sb-devam p { margin: 0; color: #C3CDD5; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.sb-devam p b { color: #fff; font-weight: 600; }
.sb-devam p em { font: italic 400 18px/1 'Instrument Serif', Georgia, serif; color: color-mix(in oklch, var(--paket-renk) 60%, #fff); margin-right: 6px; }
.sb-devam-eylem { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-devam .sb-dugme, .sb-devam .sb-dugme-ikincil { min-height: 42px; font-size: 14px; }

.sb-dil, .sb-ozel-oneri { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 13px 8px 10px; border: 1px solid #26323C; border-radius: 10px; background: #0D151B;
  color: #DCE6EE; font: 500 14px/1.2 'Archivo', sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.sb-dil:hover, .sb-ozel-oneri:hover { border-color: #3A4A57; color: #fff; }
.sb-dil i { position: relative; flex: none; width: 16px; height: 16px; border: 1.5px solid #5B6B78; border-radius: 5px; transition: background-color .2s, border-color .2s; }
.sb-dil i::after { content: ''; position: absolute; left: 4.2px; top: 1.6px; width: 4px; height: 7.5px; border: solid #04121A; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--egri); }
.sb-dil[aria-pressed="true"] i::after { transform: rotate(45deg) scale(1); }

/* site türü kartları: web kartlarının dili (önizleme · ad · türü · kimin için · tek eylem); bütün kart tıklanır */
.sb-kartlar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sb-kart { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 10px; border: 1px solid color-mix(in oklch, var(--paket-renk) 30%, var(--sb-cizgi)); border-radius: 16px;
  background: radial-gradient(130% 62% at 50% 0%, color-mix(in oklch, var(--paket-renk) 13%, transparent), transparent 72%), var(--sb-kart);
  box-shadow: 0 34px 60px -46px color-mix(in oklch, var(--paket-renk) 80%, transparent);
  transition: border-color .3s, transform .45s var(--egri), box-shadow .45s var(--egri); }
.sb-kart-onz { border-radius: 9px; overflow: hidden; transition: box-shadow .35s var(--egri); }
.sb .sb-kart-ad { margin: 14px 5px 0; } /* katalog.css başlık boşluğunu sıfırlar */
.sb-kart-ad { font: 600 clamp(17px, 1.3vw, 21px)/1.15 'Archivo', sans-serif; letter-spacing: -.03em; color: #F5F8FA; text-wrap: balance; }
.sb-oneri { position: absolute; z-index: 2; top: -9px; right: 14px; padding: 4px 8px; border-radius: 999px; background: var(--turan); color: #fff; font: 600 10.5px/1 'Archivo', sans-serif;
  box-shadow: 0 0 0 3px var(--zemin); }
.sb-kart-tur { margin: 4px 5px 0; color: color-mix(in oklch, var(--paket-renk) 72%, #fff); font-size: 12.5px; font-weight: 550; }
.sb-kart-kimin { margin: 10px 5px 0; padding-top: 10px; border-top: 1px solid var(--sb-cizgi); color: #B7C3CC; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.sb-kart-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 11px 12px; border-radius: 10px;
  border: 1px solid color-mix(in oklch, var(--paket-renk) 45%, #2E3B46); background: color-mix(in oklch, var(--paket-renk) 14%, #0D151B); color: #F5F8FA;
  font: 600 12.5px/1.2 'Archivo', sans-serif; text-decoration: none; transition: background-color .25s, border-color .25s; }
.sb-kart-kimin:last-of-type { margin-bottom: 14px; }
/* yaklaşık kurulum fiyatı (Emir, 11.10.2026): sessiz bir satır, tutar kalın */
.sb-kart-fiyat { margin: 8px 5px 14px; color: #A2AEB9; font-size: 12.5px; line-height: 1.4; }
.sb-kart-fiyat b { color: #F5F8FA; font-weight: 600; white-space: nowrap; }
.sb-kart-cta .ok { width: 16px; height: 10px; flex: none; color: color-mix(in oklch, var(--paket-renk) 70%, #fff); transition: transform .25s var(--egri); }
.sb-kart-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.one-cikan .sb-kart-cta { border-color: var(--turan); background: var(--turan); color: #fff; } .one-cikan .sb-kart-cta .ok { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .sb-kart:hover { border-color: color-mix(in oklch, var(--paket-renk) 62%, var(--sb-cizgi)); transform: translateY(-3px); box-shadow: 0 30px 60px -32px color-mix(in oklch, var(--paket-renk) 75%, transparent); }
  .sb-kart:hover .sb-kart-onz { box-shadow: 0 0 0 1px color-mix(in oklch, var(--paket-renk) 35%, transparent); }
  .sb-kart:hover .sb-kart-cta { background: color-mix(in oklch, var(--paket-renk) 26%, #0D151B); border-color: color-mix(in oklch, var(--paket-renk) 75%, #2E3B46); }
  .sb-kart:hover .sb-kart-cta .ok { transform: translateX(3px); }
  .one-cikan:hover .sb-kart-cta { background: var(--turan-parlak); border-color: var(--turan-parlak); }
}
.sb-kart:has(.sb-kart-cta:focus-visible) { border-color: var(--paket-renk); }


/* satış ekibi kartı: "QR menü mü, tek sayfalık bir site mi?" (Yusuf 14.10.2026: QR menü buraya taşındı). Sihirbaza girmez; fiyat yok.
   Reklam kartıyla aynı yatay dil: solda QR menünün sipariş çizimi, ortada metin, sağda "Ne istiyorsunuz?" kutusu (betikle açılır), WhatsApp ve telefon.
   Kartın vurgusu QR menünün altını (--paket-renk); WhatsApp düğmesi Turan mavisi, yazısı beyaz. */
.sb-kart-arama { display: grid; grid-template-columns: 318px minmax(0, 1fr) minmax(260px, 340px); align-items: center; column-gap: clamp(18px, 2.6vw, 40px); margin-top: 12px;
  padding: 10px clamp(14px, 1.6vw, 22px) 10px 10px; background: radial-gradient(70% 140% at 0% 50%, color-mix(in oklch, var(--paket-renk) 10%, transparent), transparent 65%), var(--sb-kart);
  box-shadow: 0 30px 60px -52px color-mix(in oklch, var(--paket-renk) 70%, transparent); }
.sb-kart-arama .sb-kart-metin { min-width: 0; }
.sb .sb-kart-arama .sb-kart-ad { margin: 0; } .sb-kart-arama .sb-kart-ad { font-size: clamp(20px, 1.6vw, 25px); }
.sb-kart-arama .sb-kart-tur { margin: 6px 0 0; }
.sb-kart-arama .sb-kart-kimin { margin: 8px 0 0; padding: 0; border: 0; max-width: 58ch; font-size: 14px; }
.sb-arama-eylem { display: grid; gap: 10px; min-width: 0; }
.sb-arama-not { display: grid; gap: 6px; }
.sb-arama-not label { color: #DCE6EE; font: 550 13.5px/1.2 'Archivo', sans-serif; } .sb-arama-not label span { color: #7F8E9A; font-weight: 400; }
.sb-arama-not .sb-girdi { width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical; font: 400 14px/1.5 'Archivo', sans-serif; }
.sb-arama-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--turan); border-radius: 12px;
  background: var(--turan); color: #fff; font: 650 14.5px/1.2 'Archivo', sans-serif; text-decoration: none; box-shadow: 0 14px 34px -20px var(--turan);
  transition: filter .25s, box-shadow .25s; }
.sb-arama-wa:hover { filter: brightness(1.1); box-shadow: 0 18px 40px -18px var(--turan); }
.sb-arama-wa:focus-visible { outline: 2px solid var(--turan-parlak); outline-offset: 3px; }
.sb-arama-wa svg { width: 28px; height: 28px; margin: -4px 0 -4px -10px; padding: 5px; border-radius: 8px; background: #25D366; fill: #fff; flex: none; transition: background-color .25s; }
.sb-arama-wa:hover svg, .sb-arama-wa:focus-visible svg { background: #1EBE5A; }
.sb-arama-tel { justify-self: center; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px; color: #AEBBC6; font-size: 13.5px; text-decoration: none;
  white-space: nowrap; } /* dokunma hedefi en az 44 px */
.sb-arama-tel b { color: #F5F8FA; font-weight: 600; font-variant-numeric: tabular-nums; background: linear-gradient(#ffffff40, #ffffff40) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.sb-arama-tel:hover b { color: #fff; }

/* QR menünün sipariş çizimi (eski Diğer aboneliklerimiz kartından): kod okunur → menü telefonda → Döner seçilir, "Sipariş ver" → sipariş mutfak ekranına
   düşer ("Masa 4 · 2 Döner"), Yeni → Hazırlanıyor. 9 sn, görününce bir kez (sihirbaz.js .sb-kart-onz'a .canli verir; ekrandan çıkıp dönünce yeniden).
   Varsayılan kurallar SON hâldir: betiksiz ve hareketi azaltta sipariş mutfakta, "Hazırlanıyor". */
.sb-qr-kap { display: grid; place-items: center; height: 172px; border: 1px solid #121B22;
  background: radial-gradient(70% 90% at 50% 50%, color-mix(in oklch, var(--paket-renk) 12%, transparent), transparent 70%), #05090C; }
.sb-qr { --qr: var(--paket-renk); position: relative; display: flex; align-items: center; justify-content: space-between; width: 290px; height: 150px; }
.sb-qr p { margin: 0; }
.sb-qr-masa { position: relative; flex: none; width: 60px; height: 60px; padding: 9px; box-sizing: border-box; border: 1px solid #22303A; border-radius: 14px; background: #0B1218; }
.sb-qr-kod { display: block; width: 100%; height: 100%; fill: var(--qr); stroke: var(--qr); }
.sb-qr-isik { position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; border-radius: 2px; background: var(--qr); box-shadow: 0 0 12px 2px color-mix(in oklch, var(--qr) 70%, transparent); opacity: 0; }
.sb-qr-tel { position: relative; flex: none; display: flex; flex-direction: column; gap: 8px; width: 94px; height: 150px; padding: 15px 10px; box-sizing: border-box;
  border: 1.5px solid #2E3B46; border-radius: 20px; background: #070B0F; box-shadow: 0 20px 40px -24px color-mix(in oklch, var(--qr) 70%, transparent); }
.sb-qr-tel b { color: #fff; font: 650 14px/1 'Archivo', sans-serif; }
.sb-qr-tel span { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 26px; padding: 0 7px; border: 1px solid #18222A; border-radius: 8px; background: #0A1116; }
.sb-qr-tel u { height: 6px; flex: 1; border-radius: 3px; background: #2A3742; text-decoration: none; }
.sb-qr-tel s { width: 18px; height: 6px; border-radius: 3px; background: var(--qr); text-decoration: none; }
.sb-qr-tel .sb-qr-urun { border-color: var(--qr); background: color-mix(in oklch, var(--qr) 14%, #0A1116); }
.sb-qr-urun em { color: #fff; font: 600 12px/1 'Archivo', sans-serif; font-style: normal; }
.sb-qr-tel .sb-qr-urun s { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--qr); color: #04121A; font: 700 12px/1 'Archivo', sans-serif; }
.sb-qr-ver { position: absolute; left: 9px; right: 9px; bottom: 10px; padding: 6px 0; border-radius: 8px; background: var(--qr); color: #04121A; text-align: center; font: 650 11px/1 'Archivo', sans-serif; }
.sb-qr-paket { position: absolute; left: 150px; top: 96px; width: 12px; height: 12px; border-radius: 4px; background: var(--qr); box-shadow: 0 0 12px color-mix(in oklch, var(--qr) 80%, transparent); opacity: 0; }
.sb-qr-panel { flex: none; display: flex; flex-direction: column; gap: 7px; width: 112px; padding: 11px 9px; box-sizing: border-box; border: 1px solid #1E2A33; border-radius: 14px; background: #080D11; }
.sb-qr-panel > b { color: #A6B2BC; font: 600 12px/1 'Archivo', sans-serif; }
.sb-qr-panel p { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 9px; border: 1px solid #18222A; border-radius: 9px; background: #0A1116; overflow: hidden; }
.sb-qr-panel .sb-qr-yeni { height: 62px; border-color: var(--qr); background: color-mix(in oklch, var(--qr) 14%, #0A1116); }
.sb-qr-yeni em { color: #fff; font: 650 12.5px/1 'Archivo', sans-serif; font-style: normal; }
.sb-qr-yeni span { color: #C3CDD5; font: 500 11.5px/1 'Archivo', sans-serif; }
.sb-qr-durum { position: relative; display: block; height: 14px; margin-top: 1px; color: var(--qr); font: 650 11.5px/14px 'Archivo', sans-serif; font-style: normal; white-space: nowrap; }
.sb-qr-durum u, .sb-qr-durum strong { position: absolute; left: 0; top: 0; text-decoration: none; font-weight: 650; }
.sb-qr-durum u { opacity: 0; }
.sb-qr-panel .sb-qr-eski { height: 28px; }
.sb-qr-eski u { height: 6px; width: 70%; border-radius: 3px; background: #1F2C36; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .canli .sb-qr-isik { animation: sb-qr-isik 9s ease-in-out both; }
  .canli .sb-qr-masa { animation: sb-qr-masa 9s ease both; }
  .canli .sb-qr-tel > b, .canli .sb-qr-tel > span { animation: sb-qr-menu 9s var(--egri) both; }
  .canli .sb-qr-tel > span:nth-of-type(2) { animation-name: sb-qr-menu-2; }
  .canli .sb-qr-tel > .sb-qr-urun { animation-name: sb-qr-menu, sb-qr-secim; }
  .canli .sb-qr-urun s { animation: sb-qr-arti 9s ease both; }
  .canli .sb-qr-ver { animation: sb-qr-ver 9s var(--egri) both; }
  .canli .sb-qr-paket { animation: sb-qr-paket 9s cubic-bezier(.45, 0, .25, 1) both; }
  .canli .sb-qr-yeni { animation: sb-qr-yeni 9s var(--egri) both; }
  .canli .sb-qr-durum u { animation: sb-qr-yeni-yazi 9s ease both; }
  .canli .sb-qr-durum strong { animation: sb-qr-hazir 9s ease both; }
}
@keyframes sb-qr-isik { 0%, 4% { opacity: 0; transform: translateY(-20px); } 7% { opacity: 1; } 15% { transform: translateY(20px); } 23% { opacity: 1; transform: translateY(-20px); } 27%, 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes sb-qr-masa { 0%, 4% { border-color: #22303A; } 9%, 24% { border-color: var(--qr); } 32%, 100% { border-color: #22303A; } }
@keyframes sb-qr-menu { 0%, 26% { opacity: 0; transform: translateY(6px); } 33%, 100% { opacity: 1; transform: none; } }
@keyframes sb-qr-menu-2 { 0%, 29% { opacity: 0; transform: translateY(6px); } 36%, 100% { opacity: 1; transform: none; } }
@keyframes sb-qr-secim { 0%, 42% { border-color: #18222A; background: #0A1116; } 47%, 100% { border-color: var(--qr); background: color-mix(in oklch, var(--qr) 14%, #0A1116); } }
@keyframes sb-qr-arti { 0%, 42% { transform: scale(1); } 45% { transform: scale(1.35); } 50%, 100% { transform: none; } }
@keyframes sb-qr-ver { 0%, 48% { opacity: 0; transform: translateY(6px); } 54% { opacity: 1; transform: none; } 58% { transform: scale(.93); filter: brightness(1.2); } 62%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes sb-qr-paket { 0%, 60% { opacity: 0; transform: none; } 63% { opacity: 1; transform: none; } 74% { opacity: 1; transform: translate(34px, -12px); } 78%, 100% { opacity: 0; transform: translate(40px, -12px) scale(.5); } }
@keyframes sb-qr-yeni {
  0%, 72% { opacity: 0; height: 0; margin-top: -7px; border-width: 0; }
  80% { opacity: 1; height: 62px; margin-top: 0; border-width: 1px; box-shadow: 0 0 22px -4px var(--qr); }
  100% { opacity: 1; height: 62px; margin-top: 0; border-width: 1px; }
}
@keyframes sb-qr-yeni-yazi { 0%, 78% { opacity: 0; } 80%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes sb-qr-hazir { 0%, 88% { opacity: 0; transform: translateY(4px); } 92%, 100% { opacity: 1; transform: none; } }


/* ---------- sihirbaz: üst (tür değiştir, başlık, adım rayı) ---------- */
.sb-sihirbaz { scroll-margin-top: 96px; }
.sb-ust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sb-geri-giris { justify-self: start; display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; color: #AEBBC6; font: 500 13.5px/1.2 'Archivo', sans-serif; text-decoration: none; transition: color .2s; }
.sb-geri-giris svg { width: 15px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--egri); }
.sb-geri-giris:hover { color: #fff; } .sb-geri-giris:hover svg { transform: translateX(-3px); }
.sb-sihirbaz-baslik { display: flex; align-items: baseline; gap: 14px; margin: 0; font: 600 clamp(26px, 2.7vw, 42px)/1.08 'Archivo', sans-serif; letter-spacing: -.04em; color: #F5F8FA; text-wrap: balance; }
.sb-sihirbaz-baslik::before { content: ''; flex: none; width: .32em; height: .32em; border-radius: 50%; background: var(--paket-renk); box-shadow: 0 0 18px var(--paket-renk); transform: translateY(-.04em); }
/* ray: ilerleme şeridi; her adım bir dilim, geçilenler paketin renginde. Her adıma dönülebilir */
.sb-ray { margin-top: 14px; min-width: 0; }
.sb-ray ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sb-ray ol::-webkit-scrollbar { display: none; }
.sb-ray li { flex: 1 1 0; min-width: max-content; }
.sb-ray button { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 11px 10px 6px 0; border: 0; border-top: 2px solid #1D2730; background: none; color: #7F8E9A;
  font: 500 13.5px/1.2 'Archivo', sans-serif; text-align: left; white-space: nowrap; cursor: pointer; transition: color .25s, border-color .35s var(--egri); }
.sb-ray-no { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border: 1px solid #2E3B46; border-radius: 50%; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color .3s, border-color .3s, color .3s; }
.sb-ray button:hover { color: #DCE6EE; }
.sb-ray li.gecildi button { border-top-color: color-mix(in oklch, var(--paket-renk) 55%, #1D2730); color: #C3CDD5; }
.sb-ray li.gecildi .sb-ray-no { border-color: color-mix(in oklch, var(--paket-renk) 60%, #2E3B46); background: color-mix(in oklch, var(--paket-renk) 20%, transparent); color: #fff; }
.sb-ray button[aria-current="step"] { border-top-color: var(--paket-renk); color: #fff; }
.sb-ray button[aria-current="step"] .sb-ray-no { border-color: var(--paket-renk); background: var(--paket-renk); color: #04121A; box-shadow: 0 0 14px -2px var(--paket-renk); }
.sb-ray button:focus-visible { outline-offset: -2px; border-radius: 4px; }

/* ---------- gövde: solda adım, sağda yapışkan sahne ---------- */
/* Geniş ekran: Geri/Devam sol sütunda, seçeneklerin hemen altında (sb-gezinti, adımla aynı hücrede). Adım kısaysa seçeneklerin altında durur;
   uzunsa (genişleyen Google Ads kutusu, çok kutu) ekranın altına yapışır. Sağda yalnız sahne ve tek cümlelik liste (sb-pano) yapışkan kalır.
   sb-yan geniş ekranda kutu üretmez (contents); dar ekranda alttaki yapışkan çubuktur (aşağıdaki 860 px bloğu). */
.sb-govde { --sb-gez-yuk: 90px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "adim pano" "bos pano";
  gap: 0 clamp(24px, 3.4vw, 60px); align-items: start; margin-top: 30px; }
.sb-adim { grid-area: adim; min-width: 0; padding-bottom: var(--sb-gez-yuk); }
.sb-yan { display: contents; }
/* yapışkan Geri/Devam satırının altında kalmasın: odak ve kaydırma, satırın üstünde dursun */
html:has(.sb-sihirbaz:not([hidden])) { scroll-padding-bottom: 110px; }
.sb-pano { grid-area: pano; position: sticky; top: 100px; min-width: 0; }
.sb-son { grid-area: son; min-width: 0; }
.sb-sihirbaz { animation: sb-gir .5s var(--egri) both; }
@keyframes sb-gir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sb-adim-ust { animation: sb-gir .45s var(--egri) both; }
.sb-adim-no { margin: 0 0 10px; color: color-mix(in oklch, var(--paket-renk) 70%, #fff); font-size: 13.5px; font-weight: 550; }
.sb-adim-baslik { margin: 0; font: 600 clamp(24px, 2.3vw, 36px)/1.1 'Archivo', sans-serif; letter-spacing: -.036em; color: #F5F8FA; text-wrap: balance; }
.sb-adim-baslik { scroll-margin-top: 100px; }
.sb-adim-baslik:focus { outline: none; }
.sb-adim-baslik:focus-visible { outline: 2px solid var(--turan); outline-offset: 6px; border-radius: 4px; }
.sb-adim-ozet { margin: 10px 0 0; max-width: 52ch; color: var(--sb-metin); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.sb-secenekler { display: grid; gap: 10px; margin-top: 24px; }
.sb-secenekler > * { animation: sb-gir .5s var(--egri) both; }
.sb-secenekler > :nth-child(2) { animation-delay: .05s; } .sb-secenekler > :nth-child(3) { animation-delay: .1s; } .sb-secenekler > :nth-child(4) { animation-delay: .15s; }

/* seçenek: büyük kutu. Ad, tek cümle, sabit fiyat satırı (fiyatsız veride "Her ay" / "Teklifle" etiketi); anahtar ya da "Pakete dahil".
   Altında not, uyarı, "Neler var?" ve genişleyen kısım */
.sb-secenek { position: relative; border: 1px solid var(--sb-cizgi); border-radius: 16px; background: var(--sb-kart); transition: border-color .3s, background-color .3s, box-shadow .45s var(--egri); }
.sb-secenek:hover { border-color: #2A3742; }
.sb-secenek.secili { border-color: color-mix(in oklch, var(--paket-renk) 55%, var(--sb-cizgi));
  background: radial-gradient(110% 130% at 0% 0%, color-mix(in oklch, var(--paket-renk) 11%, transparent), transparent 60%), var(--sb-kart);
  box-shadow: 0 22px 50px -38px color-mix(in oklch, var(--paket-renk) 90%, transparent); }
.sb-secenek-ust { display: flex; align-items: flex-start; gap: 14px; }
.sb-secenek-etiket { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; padding: 18px 0 16px 20px; cursor: pointer; }
.kilitli .sb-secenek-etiket, div.sb-secenek-etiket { cursor: default; }
.sb-secenek-ad { color: #F5F8FA; font: 600 17px/1.3 'Archivo', sans-serif; letter-spacing: -.015em; text-wrap: balance; }
.sb-secenek-oneri { display: inline-block; margin-left: 8px; padding: 3px 7px; border-radius: 999px; background: var(--turan); color: #fff; font: 600 10.5px/1 'Archivo', sans-serif; letter-spacing: 0;
  vertical-align: 2px; }
.sb-secenek-kisa { color: #A2AEB9; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sb-secenek-tur { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 4px 9px 4px 7px; border: 1px solid #2A3742; border-radius: 999px;
  color: #C3CDD5; font: 550 12px/1 'Archivo', sans-serif; transition: border-color .3s, color .3s; }
.sb-secenek-tur::before { content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; border-right-color: transparent; transform: rotate(-45deg); } /* dönen ay: her ay */
.secili .sb-secenek-tur { border-color: color-mix(in oklch, var(--paket-renk) 55%, #2A3742); color: color-mix(in oklch, var(--paket-renk) 45%, #fff); }
/* sabit fiyat satırı: çerçevesiz, sakin; seçilince paketin rengine döner */
.sb-secenek-fiyat { justify-self: start; margin-top: 2px; color: #C3CDD5; font: 600 13.5px/1.35 'Archivo', sans-serif; font-variant-numeric: tabular-nums; transition: color .3s; }
.secili .sb-secenek-fiyat { color: color-mix(in oklch, var(--paket-renk) 40%, #fff); }
/* ekstra özellikler ayrıca fiyatlanır: açık, okunur bir not (İstekleriniz ve son adım) */
.sb-ekstra { margin: 0; padding: 10px 14px; border-left: 3px solid var(--paket-renk); border-radius: 0 10px 10px 0; background: color-mix(in oklch, var(--paket-renk) 9%, #0D151B);
  color: #E6EDF2; font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.sb-ekstra b { color: #fff; font-weight: 600; }
.sb-hesap-fiyat { color: #A2AEB9; }
.sb-ucret { margin: 14px 0 0; color: #E6EDF2; font: 600 15px/1.45 'Archivo', sans-serif; }
/* kısa yol: çok basit bir sipariş için kalan seçenek adımları atlanır */
.sb-kisayol { display: inline-flex; align-items: baseline; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; background: none; color: #AEBBC6; font: 500 14px/1.3 'Archivo', sans-serif; cursor: pointer;
  text-decoration: none; transition: color .2s; }
.sb-kisayol span { background: linear-gradient(#ffffff40, #ffffff40) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.sb-kisayol em { font: italic 400 17px/1 'Instrument Serif', Georgia, serif; color: color-mix(in oklch, var(--paket-renk) 65%, #fff); }
.sb-kisayol em::after { content: ' ↘'; font-style: normal; }
.sb-kisayol:hover { color: #fff; }
.sb-anahtar { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 18px 18px 0 0; border: 1px solid #33414D; border-radius: 14px; background: #121B22;
  cursor: pointer; transition: background-color .25s, border-color .25s, box-shadow .3s; }
.sb-anahtar::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #8D9AA6; transition: transform .35s var(--egri), background-color .25s; }
.sb-anahtar:hover { border-color: #4A5966; }
.sb-anahtar:checked { border-color: var(--paket-renk); background: var(--paket-renk); box-shadow: 0 0 18px -4px var(--paket-renk); }
.sb-anahtar:checked::before { transform: translateX(20px); background: #fff; }
.sb-kilit { flex: none; display: inline-flex; align-items: center; gap: 7px; margin: 18px 18px 0 0; padding: 6px 10px; border: 1px solid color-mix(in oklch, var(--paket-renk) 40%, #2E3B46); border-radius: 9px;
  background: color-mix(in oklch, var(--paket-renk) 10%, transparent); color: #EAF1F5; font: 550 12.5px/1 'Archivo', sans-serif; white-space: nowrap; }
.sb-kilit svg { width: 11px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sb-secenek-alt { display: grid; gap: 10px; padding: 0 20px 16px; }
.sb-not { margin: 0; color: #7F8E9A; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.sb-not-kilit { color: #A2AEB9; }
.sb-bag { color: #CFE9F8; text-decoration: none; white-space: nowrap; background: linear-gradient(#ffffff40, #ffffff40) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.sb-bag:hover { color: #fff; }
.sb-uyari { display: flex; align-items: flex-start; gap: 9px; width: fit-content; max-width: 100%; margin: 0; padding: 8px 12px 8px 9px; border: 1px solid #FF8B2B55; border-radius: 10px; background: #FF8B2B10;
  color: #FFD2AD; font-size: 13px; line-height: 1.45; }
.sb-uyari i { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--amber); color: #111; font: 700 11px/1 'Archivo', sans-serif; font-style: normal; }
.sb-yoksa { margin: 0; padding-left: 12px; border-left: 2px solid #FF8B2B88; color: #E9C9A9; font-size: 13px; line-height: 1.5; }
.sb-sizde { border-left-color: #4A5966; color: #B7C3CC; } /* aylık site ücretini istemeyen ne üstlenir: bilgi, uyarı değil */
/* reklam bütçesi: "Aylık ödeyebileceğiniz fiyat aralığı nedir?" yongaları (Google ve Meta) */
.sb-aralik .sb-cipler { gap: 8px; }
.sb-aralik .sb-soru-ornek { margin: -2px 0 2px; }
.sb-neler > summary { display: inline-flex; align-items: center; gap: 7px; color: #C3CDD5; font-size: 13.5px; font-weight: 550; cursor: pointer; list-style: none; border-radius: 4px; }
.sb-neler > summary::-webkit-details-marker { display: none; }
.sb-neler > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--egri); }
.sb-neler[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.sb-neler > summary:hover { color: #fff; }
.sb-neler ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.sb-neler li { position: relative; padding-left: 20px; color: #B7C3CC; font-size: 13.5px; line-height: 1.45; }
.sb-neler li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 8px; height: 4px; border-left: 1.6px solid var(--paket-renk); border-bottom: 1.6px solid var(--paket-renk); transform: rotate(-45deg); }
.sb-ek { padding-top: 14px; border-top: 1px solid var(--sb-cizgi); animation: sb-gir .45s var(--egri) both; }


/* ek dil: yaygın diller ve "başka bir dil" */
.sb-diller { display: grid; gap: 12px; }
.sb-diller-not { margin: 0; color: #A2AEB9; font-size: 13.5px; line-height: 1.5; }
.sb-dil-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-dil[aria-pressed="true"] { border-color: var(--paket-renk); background: color-mix(in oklch, var(--paket-renk) 14%, #0D151B); color: #fff; }
.sb-dil[aria-pressed="true"] i { border-color: var(--paket-renk); background: var(--paket-renk); }
.sb-dil:disabled { opacity: .45; cursor: not-allowed; }
.sb-dil-ekle, .sb-ozel-ekle { display: flex; gap: 8px; }

/* adet (ek ürün yüklemesi) */
.sb-adet-kap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sb-adet { display: inline-flex; align-items: stretch; border: 1px solid #2E3B46; border-radius: 12px; overflow: hidden; background: #0B1217; }
.sb-adet button { width: 46px; min-height: 44px; border: 0; background: #111A21; color: #F5F8FA; font: 500 20px/1 'Archivo', sans-serif; cursor: pointer; transition: background-color .2s; }
.sb-adet button:hover:not(:disabled) { background: color-mix(in oklch, var(--paket-renk) 22%, #111A21); }
.sb-adet button:disabled { color: #4A5966; cursor: not-allowed; }
.sb-adet button:focus-visible { outline-offset: -3px; }
.sb-adet-deger { display: grid; place-items: center; min-width: 120px; padding: 0 10px; color: #fff; font: 600 15px/1 'Archivo', sans-serif; font-variant-numeric: tabular-nums; }
.sb-adet-not { margin: 0; color: #8D9AA6; font-size: 13px; }

/* Google reklamı yolu: hedefler ve site adresi */
.sb-hedefler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sb-hedef { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--sb-cizgi); border-radius: 14px; background: var(--sb-kart);
  color: #DCE6EE; font: 550 15px/1.3 'Archivo', sans-serif; cursor: pointer; transition: border-color .25s, background-color .25s; }
.sb-hedef:hover { border-color: #2E3B46; }
.sb-hedef input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-hedef-kutu { position: relative; flex: none; width: 20px; height: 20px; border: 1.5px solid #5B6B78; border-radius: 6px; transition: background-color .2s, border-color .2s; }
.sb-hedef-kutu::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 9.5px; border: solid #04121A; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--egri); }
.sb-hedef:has(input:checked) { border-color: color-mix(in oklch, var(--paket-renk) 60%, var(--sb-cizgi)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--paket-renk) 12%, transparent), transparent 60%), var(--sb-kart); color: #fff; }
.sb-hedef:has(input:checked) .sb-hedef-kutu { border-color: var(--paket-renk); background: var(--paket-renk); }
.sb-hedef:has(input:checked) .sb-hedef-kutu::after { transform: rotate(45deg) scale(1); }
.sb-hedef:has(input:focus-visible) { outline: 2px solid var(--turan); outline-offset: 3px; }
/* yalnız reklam yolu: reklam seçimi (Google Arama, Instagram ve Meta; ad, açıklama, sabit aylık ücret), bütçe adımı ve son kartın reklam blokları */
.sb-kanallar { grid-template-columns: minmax(0, 1fr); }
.sb-kanal { align-items: flex-start; padding: 16px 18px; }
.sb-kanal .sb-hedef-kutu { margin-top: 2px; }
.sb-kanal-metin { display: grid; gap: 4px; min-width: 0; }
.sb-kanal-ad { color: #F5F8FA; font: 600 17px/1.3 'Archivo', sans-serif; letter-spacing: -.015em; text-wrap: balance; }
.sb-kanal-kisa { color: #A2AEB9; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sb-kanal-fiyat { margin-top: 2px; color: #C3CDD5; font: 600 13.5px/1.35 'Archivo', sans-serif; font-variant-numeric: tabular-nums; transition: color .3s; }
.sb-kanal:has(input:checked) .sb-kanal-fiyat { color: color-mix(in oklch, var(--paket-renk) 40%, #fff); }
.sb-kanal-kap { display: grid; gap: 16px; }
.sb-butceler { display: grid; gap: 16px; }
.sb-butceler .sb-alt-baslik { margin: 0; }
.sb-kanal-blok { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #141D24; }
.sb-kanal-blok .sb-alt-baslik { margin: 0; }
.sb-kanal-blok .sb-yol-kisa { margin: 0; }
.sb-yol-toplam b { color: #fff; }
.sb-site { display: grid; gap: 10px; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--sb-cizgi); border-radius: 18px; background: var(--sb-kart); }
.sb-site label { color: #F5F8FA; font: 600 15px/1.3 'Archivo', sans-serif; }
.sb-site .sb-girdi { min-height: 50px; font-size: 17px; }

/* aklınızdaki özellik */
.sb-ozel { display: grid; gap: 14px; }
.sb-ozel > label { color: #F5F8FA; font: 600 15px/1.3 'Archivo', sans-serif; }
.sb-ozel-oneri-baslik { margin: 4px 0 0; font: italic 400 18px/1.2 'Instrument Serif', Georgia, serif; color: var(--sb-soluk); }
.sb-ozel-oneriler { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-ozel-oneri i { position: relative; flex: none; width: 14px; height: 14px; }
.sb-ozel-oneri i::before, .sb-ozel-oneri i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; border-radius: 1px; background: var(--paket-renk);
  transition: transform .25s var(--egri); }
.sb-ozel-oneri i::after { transform: rotate(90deg); }
.sb-ozel-oneri[aria-pressed="true"] { border-color: var(--paket-renk); background: color-mix(in oklch, var(--paket-renk) 14%, #0D151B); color: #fff; }
.sb-ozel-oneri[aria-pressed="true"] i::after { transform: rotate(0deg); }
.sb-ozel-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb-ozel-liste:empty { display: none; }
.sb-ozel-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 14px; border: 1px solid color-mix(in oklch, var(--paket-renk) 40%, var(--sb-cizgi)); border-radius: 12px;
  background: color-mix(in oklch, var(--paket-renk) 7%, var(--sb-kart)); color: #F5F8FA; font-size: 14.5px; animation: sb-gir .4s var(--egri) both; }
.sb-ozel-liste button { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #AEBBC6; font-size: 18px; line-height: 1; cursor: pointer; }
.sb-ozel-liste button:hover { background: #ffffff10; color: #fff; }

/* ---------- Şirketiniz (ilk adım: adı, ne iş yaptığı, önceki sitesi) ve İstekleriniz (özellikler, takvim) ---------- */
.sb-proje { display: grid; gap: 22px; }
.sb-alan { display: grid; gap: 8px; }
.sb-alan .sb-girdi { min-height: 50px; font-size: 16.5px; }
.sb-istekler > .sb-proje-ozel:first-child { padding-top: 0; border-top: 0; }
.sb-sorular .sb-soru-girdi { display: grid; gap: 6px; }
.sb-sorular .sb-soru-girdi .sb-soru-ornek { margin: 0; }
.sb-proje-yazi { display: grid; gap: 10px; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--sb-cizgi); border-radius: 18px; background: var(--sb-kart); }
.sb-proje-ipucu { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.sb-proje-ipucu li { position: relative; padding-left: 14px; color: #A2AEB9; font-size: 13.5px; line-height: 1.45; }
.sb-proje-ipucu li::before { content: ''; position: absolute; left: 1px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--paket-renk); }
.sb-metin { width: 100%; min-height: 168px; padding: 13px 14px; resize: vertical; font: 400 15.5px/1.6 'Archivo', sans-serif; }
.sb-sayac { justify-self: end; margin: -4px 2px 0; color: #6F7E8A; font-size: 12px; font-variant-numeric: tabular-nums; }
.sb-soru-baslik, .sb-alt-baslik { margin: 0; color: #F5F8FA; font: 600 15px/1.3 'Archivo', sans-serif; }
.sb-proje-ozel { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--sb-cizgi); }
.sb-proje-ozel .sb-ozel > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* başlık zaten söylüyor */

/* tek seçimli yongalar (radyo): takvim, alan adı ve e-posta soruları */
.sb-soru { display: grid; gap: 10px; }
.sb-soru-ornek { margin: -4px 0 0; color: #7F8E9A; font-size: 13px; font-variant-numeric: tabular-nums; }
.sb-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-cip { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 14px 8px 11px; border: 1px solid #26323C; border-radius: 11px; background: #0D151B;
  color: #DCE6EE; font: 500 14px/1.2 'Archivo', sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.sb-cip:hover { border-color: #3A4A57; color: #fff; }
.sb-cip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sb-cip i { position: relative; flex: none; width: 16px; height: 16px; border: 1.5px solid #5B6B78; border-radius: 50%; transition: border-color .2s; }
.sb-cip i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--paket-renk); transform: scale(0); transition: transform .25s var(--egri); }
.sb-cip:has(input:checked) { border-color: var(--paket-renk); background: color-mix(in oklch, var(--paket-renk) 14%, #0D151B); color: #fff; }
.sb-cip:has(input:checked) i { border-color: var(--paket-renk); } .sb-cip:has(input:checked) i::after { transform: scale(1); }
.sb-cip:has(input:focus-visible) { outline: 2px solid var(--turan); outline-offset: 3px; }
.sb-soru-girdi { animation: sb-gir .35s var(--egri) both; } .sb-soru-girdi .sb-girdi { width: 100%; max-width: 360px; min-height: 46px; }

/* altyapı ve hesaplar: sorular ve "kim neyi sağlar" (iki sütun) */
.sb-hesaplar { display: grid; gap: 18px; margin-top: 6px; }
.sb-sorular { display: grid; gap: 20px; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--sb-cizgi); border-radius: 18px; background: var(--sb-kart); }
.sb-sahiplik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--sb-cizgi); border-radius: 18px; background: #080D11; overflow: hidden; }
.sb-sahip { min-width: 0; padding: clamp(16px, 1.8vw, 22px); }
.sb-sahip + .sb-sahip { border-left: 1px solid var(--sb-cizgi); }
.sb-sahip h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #F5F8FA; font: 600 14.5px/1.3 'Archivo', sans-serif; }
.sb-sahip h4::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--paket-renk); box-shadow: 0 0 12px var(--paket-renk); }
.sb-sahip-siz h4::before { background: transparent; border: 1.5px solid #DCE6EE; box-shadow: none; }
.sb-sahip.kendi h4::before { background: transparent; border: 1.5px solid #FF8B2B; box-shadow: none; }
.sb-sahip ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sb-sahip li { position: relative; padding-left: 16px; color: #B7C3CC; font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.sb-sahip li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 1.6px; border-radius: 1px; background: #5B6B78; }
.sb-sahip > p { margin: 0; color: #E9C9A9; font-size: 13.5px; line-height: 1.5; }
.sb-sahip > .sb-sahip-ozet { margin: -4px 0 10px; color: #8D9AA6; font-size: 13px; }
.sb-sahip > .sb-sahip-yoksa { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid #4A5966; color: #B7C3CC; font-size: 13px; }
.sb-sahip-not { grid-column: 1 / -1; margin: 0; padding: 12px clamp(16px, 1.8vw, 22px) 14px; border-top: 1px solid var(--sb-cizgi); color: #8D9AA6; font-size: 13px; line-height: 1.55; text-wrap: pretty; }

/* ---------- sahne: tuval, seçilenler, gezinti ---------- */
.sb-sahne { position: relative; }
.sb-tuval-kap { position: relative; padding: 4px; border: 1px solid #172028; border-radius: 22px; overflow: hidden;
  background: radial-gradient(56% 58% at 52% 48%, color-mix(in oklch, var(--paket-renk) 15%, transparent), transparent 72%),
    radial-gradient(circle, #ffffff14 1px, transparent 1.4px) 0 0 / 18px 18px, #06090C;
  transition: background .6s var(--egri); }
.sb-buyut { display: none; }
.sb-liste { margin: 14px 4px 0; color: #A2AEB9; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.sb-liste em { margin-right: 4px; font: italic 400 19px/1.2 'Instrument Serif', Georgia, serif; color: #E6EEF3; }
.sb-gezinti { grid-area: adim; align-self: end; position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  margin-bottom: 14px; padding: 10px; border: 1px solid #1D2933; border-radius: 18px; background: rgba(8, 12, 16, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .6); }
.sb-gezinti-not { display: none; }
.sb-sonraki { min-width: 160px; }

/* ---------- tuval (tools/yama/sihirbaz.html → tuval): tel çerçeve site ve parçaları ---------- */
.tv { display: block; width: 100%; height: auto; overflow: visible; color: var(--paket-renk); font-family: 'Archivo', sans-serif; }
.tv * { transform-box: fill-box; transform-origin: center; }
.tv .tv-kamera { transform-box: view-box; transform-origin: 0 0; transition: transform 1s var(--egri); }
.tv-cerceve { fill: #0B1217; stroke: #2A3742; stroke-width: 1; }
.tv-sayfa { fill: #0B1217; }
.tv-ayrac { fill: none; stroke: #1F2B35; stroke-width: 1; }
.tv-tuy { fill: #34424D; }
.tv-adres { fill: #141E26; }
.tv-kilit { fill: none; stroke: #6F808D; stroke-width: 1.1; stroke-linejoin: round; }
.tv-k { fill: #34434F; } .tv-b { fill: #4A5D6C; } .tv-a { fill: #D9E4EC; } .tv-a2 { fill: #B7C6D1; }
.tv-v { fill: var(--paket-renk); }
.tv-vc { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; stroke-linecap: round; }
.tv-kutu { fill: #ffffff05; stroke: #31404C; stroke-width: 1; }
.tv-ince { fill: none; stroke: #6A7C8B; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-cta { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; } .tv-cta-yazi { fill: var(--paket-renk); }
.tv-buton { fill: var(--paket-renk); } .tv-buton-yazi { fill: #04121A; } .tv-buton-c { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; }
.tv-arama-k { fill: #0F181F; stroke: #2E3D49; stroke-width: 1; }
.tv-yan { fill: #ffffff05; }
.tv-afis { fill: color-mix(in srgb, var(--paket-renk) 9%, #0B1217); stroke: color-mix(in srgb, var(--paket-renk) 40%, transparent); stroke-width: 1; }
.tv-urun { fill: color-mix(in srgb, var(--paket-renk) 12%, #0E161C); stroke: color-mix(in srgb, var(--paket-renk) 35%, #31404C); stroke-width: 1; }
.tv-urun-ic { fill: color-mix(in srgb, var(--paket-renk) 45%, #0E161C); }
.tv-urun-bos { fill: none; stroke: #232F38; stroke-width: 1; }
.tv-urun-rozet { fill: var(--paket-renk); }
.tv-rozet { fill: var(--turan); }
.tv-gunler circle { fill: #4E5E6B; }
.tv-gun-secili { fill: color-mix(in srgb, var(--paket-renk) 18%, transparent); stroke: var(--paket-renk); stroke-width: 1.4; } .tv-gun-nokta { fill: var(--paket-renk); }
.tv-saat { fill: #ffffff05; stroke: #31404C; stroke-width: 1; } .tv-saat.on { fill: color-mix(in srgb, var(--paket-renk) 20%, transparent); stroke: var(--paket-renk); }
.tv-onay { fill: var(--paket-renk); }
.tv-tik-beyaz { fill: none; stroke: #04121A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-grafik { fill: none; stroke: var(--paket-renk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tv-harita-k, .tv-harita-zemin { fill: #0D161C; } .tv-harita-k { stroke: #283540; stroke-width: 1; }
.tv-blok { fill: #121D25; }
.tv-su { fill: none; stroke: #0E3348; stroke-width: 7; stroke-linecap: round; }
.tv-yol { fill: none; stroke: #1F2C36; stroke-width: 4; stroke-linecap: round; } .tv-yol.ince { stroke-width: 2; }
.tv-golge { fill: #000; opacity: .55; }
.tv-pin path { fill: var(--turan); } .tv-pin-ic { fill: #0B1217; }
.tv-nabiz { fill: none; stroke: var(--turan-parlak); stroke-width: 1.4; opacity: 0; }
.tv-etiket rect { fill: #0B1217; stroke: #2E3D49; stroke-width: 1; } .tv-etiket text { fill: #E6EEF3; font-size: 8px; font-weight: 600; }
.tv-ilan-zemin { fill: color-mix(in srgb, var(--paket-renk) 8%, transparent); stroke: color-mix(in srgb, var(--paket-renk) 50%, transparent); stroke-width: 1; }
.tv-ara { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; } .tv-ara-simge { fill: var(--paket-renk); }
/* kahraman görseli: durağan çizim; sinematik hâlde derinlikli katmanlar ağır ağır kayar */
.tv-gorsel-zemin { fill: #0C141A; }
.tv-gok-ust { stop-color: var(--paket-renk); stop-opacity: .42; } .tv-gok-alt { stop-color: #0B1217; stop-opacity: 1; }
.tv-gunes { fill: #FFE7B8; opacity: .9; filter: drop-shadow(0 0 6px #FFD38A); }
.tv-dag { stroke: none; }
.tv-dag.d1 { fill: color-mix(in srgb, var(--paket-renk) 32%, #0E1820); } .tv-dag.d2 { fill: color-mix(in srgb, var(--paket-renk) 18%, #0B141A); } .tv-dag.d3 { fill: #070C10; }
.tv-serit { fill: #000; opacity: .65; }
/* yazılar */
.tv-y { font-family: 'Archivo', sans-serif; }
.tv-baslik { font-size: 16px; font-weight: 650; letter-spacing: -.02em; fill: #F5F8FA; } .tv-baslik-k { font-size: 13px; }
.tv-satir { font-size: 9px; fill: #9FB0BD; }
.tv-y-panel { font-size: 10px; font-weight: 600; fill: #9FB4C3; }
.tv-y-dugme { font-size: 8px; font-weight: 650; fill: #04121A; }
.tv-y-adres { font-size: 9.5px; fill: #C3CDD5; }
.tv-y-rozet { font-size: 7px; font-weight: 700; fill: #fff; }
.tv-y-buton { font-size: 8.5px; font-weight: 650; fill: #04121A; }
.tv-y-saat { font-size: 9px; fill: #A9B6C1; font-variant-numeric: tabular-nums; } .tv-y-saat.on { fill: #fff; font-weight: 600; }
.tv-y-dil { font-size: 8px; font-weight: 650; fill: var(--paket-renk); }
.tv-y-urun { font-size: 8px; font-weight: 700; fill: #04121A; }
.tv-y-sponsor { font-size: 9px; font-weight: 700; fill: #F5F8FA; }
.tv-y-alan { font-size: 8.5px; fill: #9FB4C3; }
.tv-y-ilan { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; fill: color-mix(in srgb, var(--paket-renk) 55%, #fff); }
.tv-y-sitebag { font-size: 8.5px; font-weight: 550; fill: color-mix(in srgb, var(--paket-renk) 60%, #fff); }
.tv-y-ara { font-size: 9px; font-weight: 650; fill: var(--paket-renk); }
.tv-y-durum { font-size: 8px; font-weight: 550; fill: #8D9AA6; }
.tv-y-uydu { font-size: 9.5px; font-weight: 650; fill: #DCE6EE; }
.tv-y-sutun { font-size: 7.5px; fill: #7F8E9A; }
.tv-y-eposta { font-size: 9px; font-weight: 650; fill: #F5F8FA; }
/* Instagram ve Meta reklamı kartı: sponsorlu gönderi */
.tv-insta-halka { fill: none; stroke: var(--paket-renk); stroke-width: 1.6; }
.tv-insta-gorsel { fill: #0F181F; stroke: #22303A; stroke-width: 1; }
.tv-insta-kalp, .tv-insta-dugme { fill: var(--paket-renk); }
.tv-y-insta { font-size: 6.6px; font-weight: 650; fill: #fff; }
.tv-y-kod { font-size: 8px; font-weight: 650; fill: #8D9AA6; } .tv-y-kod.etkin { fill: #fff; }
.tv-y-kod.yeni { animation: tv-kod .6s var(--egri) both; }
@keyframes tv-kod { from { opacity: 0; transform: translateY(-4px); } }
/* çevre parçalar (uydular): koyu kart, ince kenar, gölge */
.tv-uydu { fill: #0A1015; stroke: #2A3742; stroke-width: 1; }
.tv-uydu-g { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); }
.tv-panel .tv-uydu { fill: #0A0F13; }
.tv-panel-yan { fill: #ffffff05; }
.tv-panel-dugme { fill: var(--paket-renk); }
.tv-uydu-ilan { stroke: color-mix(in srgb, var(--paket-renk) 60%, #2A3742); }
.tv-zarf { fill: color-mix(in srgb, var(--paket-renk) 14%, transparent); stroke: var(--paket-renk); stroke-width: 1.2; }
.tv-zarf-cizgi { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; stroke-linejoin: round; }
.tv-dukkan { fill: #0E161C; stroke: #31404C; stroke-width: 1; } .tv-canta { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; stroke-linejoin: round; }
.tv-esitle { fill: none; stroke: #8D9AA6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-crm-kart { fill: #131D25; stroke: #2E3D49; stroke-width: 1; } .tv-crm-kart.kazanildi { fill: color-mix(in srgb, var(--paket-renk) 30%, #131D25); stroke: var(--paket-renk); }
.tv-crm-gec { fill: color-mix(in srgb, var(--paket-renk) 16%, #131D25); stroke: color-mix(in srgb, var(--paket-renk) 70%, #2E3D49); }
.tv-seo-ok, .tv-ok-yukari { fill: none; stroke: var(--paket-renk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tv-rapor-alan { fill: url(#tv-alan); } .tv-alan-ust { stop-color: var(--paket-renk); stop-opacity: .34; } .tv-alan-alt { stop-color: var(--paket-renk); stop-opacity: 0; }
.tv-rapor-egri { fill: none; stroke: var(--paket-renk); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--egri) .3s; }
.tv-parca.on .tv-rapor-egri { stroke-dashoffset: 0; }
.tv-rapor-uc { fill: #fff; stroke: var(--paket-renk); stroke-width: 2; }
/* site içi ortak parçalar */
.tv-dil-zemin { fill: #ffffff06; }
.tv-logo-isaret { fill: var(--paket-renk); } .tv-logo-ic { fill: none; stroke: #04121A; stroke-width: 2; } .tv-logo-nokta { fill: #04121A; }
.tv-logo-yazi { fill: #F5F8FA; }
.tv-durum-zemin { fill: #0A1015; }
.tv-isik { fill: #4A5966; transition: fill .4s; }
.tv-kalkan { fill: color-mix(in srgb, var(--paket-renk) 18%, transparent); stroke: var(--paket-renk); stroke-width: 1.1; stroke-linejoin: round; }
.tv-tik-k { fill: none; stroke: var(--paket-renk); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-nabiz-cizgi { fill: none; stroke: var(--paket-renk); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tv-imlec { opacity: 0; transform: translate(420px, 240px); }
.tv-imlec-nokta { fill: var(--turan); } .tv-imlec-halka { fill: none; stroke: var(--turan); stroke-width: 1.4; opacity: 0; }

/* düzen: yalnız seçilen sitenin çizimi */
.tv-site { display: none; }
.tv-site.on { display: inline; }
.tv[data-tur="reklam"] .tv-ortak-logo, .tv[data-tur="reklam"] .tv-adres-ic { display: none; }

/* parça gelir: hafif bir kaymayla yerine oturur; çıkınca geri çekilir. Yerine geçtiği sade çizim (tv-yer) söner */
.tv-parca { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 10px)) scale(.97);
  transition: opacity .45s var(--egri) var(--gecikme, 0s), transform .75s var(--egri) var(--gecikme, 0s); }
.tv-parca.on { opacity: 1; transform: none; }
.tv-yer { transition: opacity .35s var(--egri); }
.tv-yer.off { opacity: 0; }
.tv-pencere-g { transition: opacity .35s var(--egri); }
.tv.ucusta .tv-pencere-g { opacity: 0; transition: none; }
.tv.ucusta .tv-parca { opacity: 0 !important; transform: translate(var(--dx, 0px), var(--dy, 10px)) scale(.97) !important; transition: none !important; }
/* seçenek kutusunun üzerine gelince (ya da odakta) parçası tuvalde vurgulanır; yeni gelen parçanın kenarı bir kez parlar */
.tv-uydu-g.on.vurgu { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px color-mix(in srgb, var(--paket-renk) 55%, transparent)); }
.tv-parca.on.vurgu .tv-uydu { stroke: var(--paket-renk); }
.tv-parca.on.vurgu:not(.tv-uydu-g) { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--paket-renk) 70%, transparent)); }
.tv-parca.yeni .tv-uydu { animation: tv-yeni 1.6s var(--egri); }
@keyframes tv-yeni { 0%, 25% { stroke: var(--paket-renk); stroke-width: 2.2; } 100% { stroke-width: 1; } }
/* metinleri biz yazalım: satırlar sırayla yazılır */
.tv-yaz { clip-path: inset(0 100% 0 0); }
.tv-metin.on .tv-yaz { animation: tv-yaz 1s steps(24, end) .2s forwards; }
.tv-metin.on .y2 { animation-duration: 1.1s; animation-delay: 1.1s; }
.tv-metin.on .y3 { animation-delay: 2.1s; }
@keyframes tv-yaz { to { clip-path: inset(0 0 0 0); } }
/* sinematik giriş: katmanlar farklı hızda kayar */
.tv-sinema.on .d1 { animation: tv-kay1 14s ease-in-out infinite alternate; }
.tv-sinema.on .d2 { animation: tv-kay2 10s ease-in-out infinite alternate; }
.tv-sinema.on .d3 { animation: tv-kay3 7s ease-in-out infinite alternate; }
.tv-sinema.on .tv-gunes { animation: tv-gunes 14s ease-in-out infinite alternate; }
@keyframes tv-kay1 { from { transform: translateX(-4px); } to { transform: translateX(5px); } }
@keyframes tv-kay2 { from { transform: translateX(8px); } to { transform: translateX(-9px); } }
@keyframes tv-kay3 { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes tv-gunes { from { transform: translateY(4px); } to { transform: translateY(-5px); } }
/* arama sırası yükselir: sizin sonucunuz üçüncü sıradan birinciye */
.tv-seo-s { transition: transform .8s var(--egri) .4s; }
.tv-parca:not(.on) .s-sen { transform: translateY(36px); }
.tv-parca:not(.on) .s-1, .tv-parca:not(.on) .s-2 { transform: translateY(-18px); }
/* harita iğnesi düşer */
.tv-pin-kap { transition: transform .7s cubic-bezier(.3, 1.5, .5, 1) .35s; }
.tv-parca:not(.on) .tv-pin-kap, .tv-parca:not(.on) .tv-pin { transform: translateY(-20px); }
[data-parca="hedef-magaza"] .tv-pin { transition: transform .7s cubic-bezier(.3, 1.5, .5, 1) .2s; }

/* canlı (son adım): adres yazılır, ışık yanar, imleç siteyi gezer, parçalar kendi işini yapar */
.tv-adres-ic { opacity: 0; transition: opacity .3s; }
.tv.canli .tv-adres-ic { opacity: 1; }
.tv.canli .tv-y-adres { animation: tv-yaz 1s steps(12, end) .3s both; }
.tv.canli .tv-isik { fill: #3DE0A0; }
.tv.canli .tv-y-durum[data-tv-durum] { fill: #DCE6EE; }
@media (prefers-reduced-motion: no-preference) {
  .tv.canli .tv-isik { animation: tv-isik 2.6s ease-in-out infinite; }
  /* imleç siteyi iki kez gezer ve çekilir: fiyatlar okunurken dikkat dağıtmasın */
  .tv.canli .tv-imlec { opacity: 1; transition: opacity .4s 1.2s; animation: tv-imlec 11s cubic-bezier(.5, 0, .2, 1) 1.2s 2 both, tv-sonme .8s ease 23.2s forwards; }
  .tv.canli .tv-imlec-halka { animation: tv-imlec-tik 11s 1.2s 2 both; }
  .tv.canli .tv-crm-gec { animation: tv-crm 7s var(--egri) infinite; }
  .tv.canli .tv-uydu-ilan { animation: tv-ilan 5s ease-in-out infinite; }
  .tv.canli .tv-nabiz { animation: tv-nabiz 2.8s ease-out infinite; }
  .tv.canli .tv-bakim.on .tv-nabiz-cizgi { stroke-dasharray: .3 .7; animation: tv-kalp 2.2s linear infinite; }
  .tv:not(.gorunur) *, .tv:not(.gorunur) { animation-play-state: paused !important; }
}
@keyframes tv-isik { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tv-sonme { to { opacity: 0; } }
@keyframes tv-imlec { 0%, 4% { transform: translate(420px, 240px); } 16%, 22% { transform: translate(300px, 70px); } 32%, 38% { transform: translate(66px, 172px); }
  52%, 58% { transform: translate(236px, 236px); } 70%, 76% { transform: translate(430px, 70px); } 90%, 100% { transform: translate(420px, 240px); } }
@keyframes tv-imlec-tik { 0%, 34%, 38%, 72%, 76%, 100% { opacity: 0; transform: scale(.4); } 35%, 73% { opacity: 1; transform: scale(.6); } 37%, 75% { opacity: 0; transform: scale(2); } }
@keyframes tv-crm { 0%, 35% { transform: none; } 50%, 85% { transform: translate(38px, -18px); } 100% { transform: none; } }
@keyframes tv-ilan { 0%, 100% { stroke: color-mix(in srgb, var(--paket-renk) 60%, #2A3742); } 50% { stroke: var(--paket-renk); } }
@keyframes tv-nabiz { 0% { opacity: .75; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes tv-kalp { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* seçilen kartın minyatürü tuvale uçar (sihirbaz.js; hareketi azaltta yok) */
.sb-ucan { position: fixed; z-index: 21; transform-origin: 0 0; pointer-events: none; border-radius: 12px; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); will-change: transform; }
.sb-ucan svg { display: block; width: 100%; height: 100%; }

/* ---------- son: paketiniz hazır ---------- */
.sb[data-ekran="son"] .sb-govde { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); grid-template-rows: auto auto; grid-template-areas: "adim pano" "son son"; gap: 24px clamp(24px, 3.4vw, 60px); }
.sb[data-ekran="son"] .sb-pano { position: static; }
.sb[data-ekran="son"] .sb-adim { padding-bottom: 0; }
.sb[data-ekran="son"] .sb-gezinti { display: none; }
.sb-son-baslik { font-size: clamp(32px, 3.6vw, 56px); letter-spacing: -.045em; }
.sb-son-baslik em { font: italic 400 1.12em/1 'Instrument Serif', Georgia, serif; letter-spacing: -.01em; color: color-mix(in oklch, var(--paket-renk) 85%, #fff); }
.sb-son-ozet { display: grid; gap: 8px; margin: 14px 4px 0; padding: 14px 0 0; border-top: 1px solid var(--sb-cizgi); list-style: none; }
.sb-son-ozet li { position: relative; padding-left: 18px; color: #B7C3CC; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sb-son-ozet li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--paket-renk); }
.sb-secim { margin-top: 26px; }
.sb-secim-soru { margin: 0; font: 600 clamp(20px, 1.8vw, 26px)/1.2 'Archivo', sans-serif; letter-spacing: -.025em; color: #F5F8FA; }
.sb-secim-not { margin: 6px 0 0; font: italic 400 clamp(17px, 1.3vw, 19px)/1.3 'Instrument Serif', Georgia, serif; color: var(--sb-soluk); }
.sb-dahil-not { margin: 18px 0 0; color: #DCE6EE; font: 500 15px/1.4 'Archivo', sans-serif; } /* "Telefon uygulaması ve yapay zekâ asistanı dahil." (son adım) */
/* ödeme düzeni (son adım; kurulumda yaklaşık aralık, aylık katmanda "fiyatı teklifte"): kurulum ücreti · web sitesi ayakta tutma. Seçilmeyen aylık katman kesik çizgili */
.sb-duzen { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.sb-duzen-satir { display: grid; gap: 12px; min-width: 0; padding: clamp(16px, 1.8vw, 22px); border: 1px solid #22303A; border-radius: 18px; background: var(--sb-kart);
  animation: sb-gir .6s var(--egri) both; }
.sb-duzen-satir + .sb-duzen-satir { animation-delay: .08s; }
.sb-duzen-satir.secili { border-color: color-mix(in oklch, var(--paket-renk) 55%, #22303A);
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in oklch, var(--paket-renk) 10%, transparent), transparent 62%), var(--sb-kart); }
.sb-duzen-satir.eksik { border-style: dashed; }
.sb-duzen-ust { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.sb-duzen-ad { color: #F5F8FA; font: 650 clamp(17px, 1.4vw, 20px)/1.2 'Archivo', sans-serif; letter-spacing: -.02em; }
.sb-duzen-sag { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
.sb-duzen-tutar { color: #F5F8FA; font: 650 clamp(15px, 1.2vw, 17px)/1.2 'Archivo', sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sb-duzen-satir.eksik .sb-duzen-tutar { color: #C3CDD5; }
.sb-duzen-taksit { margin: 0; color: #C3CDD5; font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.sb-duzen-taksit b { color: #fff; font-weight: 600; }
.sb-duzen-etiket { padding: 4px 9px; border: 1px solid #33424E; border-radius: 999px; color: #C3CDD5; font: 600 11.5px/1 'Archivo', sans-serif; white-space: nowrap; }
.sb-duzen-satir.secili .sb-duzen-etiket { border-color: var(--paket-renk); color: #fff; }
.sb-duzen-metin, .sb-duzen-not { margin: 0; color: #A2AEB9; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sb-duzen-not { color: #C3CDD5; font-size: 13.5px; }
.sb-duzen-satir .sb-soru-baslik { font-size: 14px; }
.sb-duzen-ekle { justify-self: start; min-height: 40px; }
/* yaklaşık fiyat (son adım): iki satır (kurulum, her ay), solda ad, sağda tutar; altında içindekiler, reklam bütçesi ve ekstra özellik notu */
.sb-toplam, .sb-fiyat-yok { display: grid; gap: 12px; } /* .sb-fiyat-yok: ekstra yazı varken yaklaşık fiyatın yerine tek cümle (.sb-ekstra notu) */
.sb-toplam-liste { display: grid; margin: 6px 0 0; border: 1px solid color-mix(in oklch, var(--paket-renk) 45%, #22303A); border-radius: 18px; background: var(--sb-kart); }
.sb-toplam-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px); }
.sb-toplam-satir + .sb-toplam-satir { border-top: 1px solid var(--sb-cizgi); }
.sb-toplam-satir dt { color: #C3CDD5; font: 550 14.5px/1.3 'Archivo', sans-serif; }
.sb-toplam-satir dd { margin: 0; color: #fff; font: 650 clamp(18px, 1.6vw, 22px)/1.2 'Archivo', sans-serif; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; }
.sb-toplam-alt { grid-column: 1 / -1; margin: 2px 0 0; color: #8D9AA6; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.sb-toplam-not { margin: 0; color: #E9C9A9; font-size: 13.5px; line-height: 1.5; }
/* Google reklamı yolunun tek kartı: ad, kısa açıklama, satırlar */
.sb-yol-ad { color: #F5F8FA; font: 650 clamp(19px, 1.6vw, 23px)/1.2 'Archivo', sans-serif; letter-spacing: -.025em; }
.sb-yol-kisa { color: #A2AEB9; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sb-yol-satirlar { display: grid; gap: 0; }
.sb-yol-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid #141D24; color: #A2AEB9; font-size: 14px; }
.sb-yol-satir b { color: #F5F8FA; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sb-tek-kart { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--paket-renk); border-radius: 20px;
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in oklch, var(--paket-renk) 14%, transparent), transparent 62%), var(--sb-kart); box-shadow: 0 34px 70px -46px var(--paket-renk); animation: sb-gir .6s var(--egri) both; }
.sb-tek-kart p { margin: 0; }
.sb-tek-kart ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sb-tek-kart li { position: relative; padding-left: 20px; color: #C3CDD5; font-size: 14px; line-height: 1.45; }
.sb-tek-kart li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 8px; height: 4px; border-left: 1.6px solid var(--paket-renk); border-bottom: 1.6px solid var(--paket-renk); transform: rotate(-45deg); }
/* soru olarak sorulan hizmet (verideki 'secenekler'; şu an böyle hizmet yok): pakete göre örnek işler ve iki seçenek */
.sb-secenek-soru .sb-ornek b { color: #DCE6EE; font-weight: 600; }
.sb-secenek-soru .sb-soru { margin-top: 2px; }

.sb-son-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
.sb-olustur { min-height: 54px; padding: 0 26px; font-size: 16.5px; }
/* son adımda "Teklif iste"nin yanında doğrudan WhatsApp (sihirbaz.js → eylemCiz; adres başlığın altındaki [data-wa-direkt] düğmesinden) */
.sb-wa-direkt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #DCE6EE; font: 550 14px/1.3 'Archivo', sans-serif; text-decoration: none; }
.sb-wa-direkt svg { width: 28px; height: 28px; flex: none; padding: 5px; border-radius: 8px; background: #25D366; fill: #fff; transition: background-color .25s; }
.sb-wa-direkt:hover svg, .sb-wa-direkt:focus-visible svg { background: #1EBE5A; }
.sb-wa-direkt span { background: linear-gradient(#ffffff40, #ffffff40) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.sb-wa-direkt:hover { color: #fff; } .sb-wa-direkt:hover span { background-image: linear-gradient(var(--turan), var(--turan)); }
.sb-wa-direkt:focus-visible { outline: 2px solid var(--turan-parlak); outline-offset: 3px; border-radius: 8px; }
.sb-olustur-not { flex-basis: 100%; margin: 0; color: #8D9AA6; font-size: 13.5px; line-height: 1.55; }
.sb-olustur-uyari { flex-basis: 100%; margin: 0; color: #FFD2AD; font-size: 14px; font-weight: 550; }
.sb-olustur-uyari:empty { display: none; }

/* ---------- geniş tablet ve altı ---------- */
@media (max-width: 1180px) {
  .sb-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-govde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb[data-ekran="son"] .sb-govde { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
@media (max-width: 999px) {
  .sb-giris-ust { display: block; } .sb-giris-metin { margin-top: 10px; }
  .sb-kart-arama { grid-template-columns: 318px minmax(0, 1fr); row-gap: 14px; }
  .sb-arama-eylem { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .sb-arama-not { grid-column: 1 / -1; }
  .sb-arama-tel { justify-self: end; }
  .sb-hedefler { grid-template-columns: minmax(0, 1fr); }
}
/* tek sütun: sahne altta yapışkan bir önizleme olur (küçük tuval + Geri/Devam); dokununca büyür */
@media (max-width: 860px) {
  .sb-govde { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "adim" "yan"; gap: 24px; margin-top: 22px; }
  .sb[data-ekran="son"] .sb-govde { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "yan" "adim" "son"; }
  html:has(.sb-sihirbaz:not([hidden])) { scroll-padding-bottom: 0; }
  .sb-adim { padding-bottom: 0; }
  .sb-pano { display: contents; }
  .sb-yan { grid-area: yan; display: grid; position: sticky; top: auto; bottom: 10px; z-index: 6; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); grid-template-areas: "sahne gezinti";
    align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border: 1px solid #22303A; border-radius: 18px; background: rgba(8, 12, 16, .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
  .sb-sahne { grid-area: sahne; }
  .sb-tuval-kap { padding: 2px; border-radius: 12px; background-size: auto, 10px 10px, auto; }
  .tv-uydu-g { filter: none; } /* küçük önizlemede gölge görünmez, telefonu yormasın */
  .sb-buyut { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: zoom-in; }
  .sb-liste { display: none; }
  .sb-gezinti { grid-area: gezinti; align-self: auto; position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "not not" "onceki sonraki"; gap: 8px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sb-gezinti-not { grid-area: not; display: block; margin: 0; overflow: hidden; color: #A2AEB9; font-size: 12.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
  .sb-onceki { grid-area: onceki; min-height: 44px; padding: 0 12px; }
  .sb-sonraki { grid-area: sonraki; min-width: 0; min-height: 44px; padding: 0 14px; font-size: 14.5px; }
  .sb-yan.genis { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sahne" "liste" "gezinti"; }
  .sb-yan.genis .sb-buyut { cursor: zoom-out; }
  .sb-yan.genis .sb-liste { display: block; grid-area: liste; margin: 0 4px; font-size: 13px; }
  .sb[data-ekran="son"] .sb-yan { position: static; display: block; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sb[data-ekran="son"] .sb-buyut { display: none; }
  .sb[data-ekran="son"] .sb-tuval-kap { padding: 4px; border-radius: 18px; background-size: auto, 16px 16px, auto; }
  .sb[data-ekran="son"] .sb-liste { display: block; }
}
@media (max-width: 599px) {
  .sb-kartlar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* telefon: kart yatay; solda önizleme, sağda ad ve tür; kimin için ve eylem altta */
  .sb-kart { display: grid; grid-template-columns: minmax(112px, 40%) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "onz ad" "onz tur" "kimin kimin" "fiyat fiyat" "cta cta"; align-content: start;
    column-gap: 14px; padding: 10px; }
  .sb-kart-onz { grid-area: onz; align-self: start; }
  .sb .sb-kart-ad { grid-area: ad; margin: 2px 0 0; font-size: 17px; }
  .sb-kart-tur { grid-area: tur; margin: 4px 0 0; align-self: start; }
  .sb-kart-kimin { grid-area: kimin; margin: 12px 0 0; }
  .sb-kart-fiyat { grid-area: fiyat; margin: 6px 0 12px; }
  .sb-toplam-satir { grid-template-columns: minmax(0, 1fr); }
  .sb-toplam-satir dd { text-align: left; }
  .sb-kart-cta { grid-area: cta; }
  .sb-oneri { font-size: 10px; padding: 3px 6px; }
  .sb-kart-arama { grid-template-columns: minmax(0, 1fr); grid-template-areas: "onz" "metin" "eylem"; row-gap: 14px; padding: 10px; }
  .sb-kart-arama .sb-kart-onz { grid-area: onz; } .sb-kart-arama .sb-kart-metin { grid-area: metin; padding: 0 4px; }
  .sb-kart-arama .sb-kart-ad { font-size: 18px; } .sb-kart-arama .sb-kart-kimin { font-size: 13px; }
  .sb-arama-eylem { grid-area: eylem; grid-template-columns: minmax(0, 1fr); }
  .sb-arama-tel { justify-self: center; }
  .sb-sahiplik { grid-template-columns: minmax(0, 1fr); }
  .sb-sahip + .sb-sahip { border-left: 0; border-top: 1px solid var(--sb-cizgi); }
  .sb-secenek-etiket { padding: 16px 0 14px 16px; }
  .sb-anahtar { margin: 16px 14px 0 0; }
  .sb-kilit { margin: 16px 14px 0 0; }
  .sb-secenek-alt { padding: 0 16px 14px; }
  .sb-dil-ekle, .sb-ozel-ekle { flex-wrap: wrap; } .sb-dil-ekle .sb-girdi, .sb-ozel-ekle .sb-girdi { flex-basis: 100%; }
  .sb-son-eylem .sb-olustur { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-sihirbaz, .sb-adim-ust, .sb-secenekler > *, .sb-ek, .sb-duzen-satir, .sb-tek-kart, .sb-ozel-liste li, .sb-soru-girdi { animation: none; }
  .sb-kart, .sb-anahtar::before { transition: none; }
  .tv-parca, .tv-yer, .tv-pencere-g, .tv-seo-s, .tv-pin-kap, .tv-pin, .tv-rapor-egri, .tv .tv-kamera { transition: none !important; }
  .tv-yaz { clip-path: none; } .tv-metin.on .tv-yaz { animation: none; }
  .tv *, .tv-y-kod.yeni { animation: none !important; }
  .tv.canli .tv-y-adres { animation: none; }
}
@media (forced-colors: active) {
  .sb-anahtar { appearance: auto; -webkit-appearance: auto; }
}