/* Vitrin v2 iç sayfaları (2026-09-28): /alan-adi, /fiyatlar, /nasil-calisir, /sss, /iletisim, /kunye, /hazir-site/{s} ve içerik
   gelene kadar boş durum sayfaları. Belirteç ve bileşenler tasarim.css (21. bölüm: sayfa bandı, çipli yol izi, iki katman gölge,
   koyu bant, ışıklı kart, sayaçlı yan liste, kart akordeon). Önek: sy-. CSP: satır içi stil yok. */

/* ── Ortak düzenler ── */
.sy-iki-sutun { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.sy-iki-sutun--esit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b-5); align-items: stretch; }
.sy-iki-sutun > div > .tk-baslik-grubu + * { margin-top: var(--b-6); }
.sy-kart-ust { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: var(--b-5); }
.sy-kart-ust h2 { font-size: var(--t-h3); }
.sy-kart-ust p { margin-top: 4px; font-size: var(--t-arayuz); }
.sy-kart-baslik { font-size: var(--t-h4); margin-top: 0 !important; }
.sy-not { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--b-5); padding: 12px 14px; border-radius: var(--k-3); background: var(--mavi-acik);
  color: var(--murekkep); font-size: var(--t-kucuk); line-height: 1.5; }
.sy-not svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--mavi-metin); }

/* ── Sayfa + yan sütun (SSS) ── */
.sy-duzen { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start;
  padding-block: clamp(48px, 6vw, 80px) var(--b-8); }
.sy-yan { position: sticky; top: 104px; display: grid; gap: var(--b-5); }
.sy-govde { display: grid; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.sy-sss-kategori { scroll-margin-top: 104px; }
.sy-sss-kategori h2 { display: flex; align-items: baseline; gap: 14px; font-size: var(--t-h3); margin-bottom: var(--b-5); }
.sy-sss-no { font: 800 .9375rem/1 var(--f-baslik); color: var(--mavi-metin); padding: 6px 10px; border-radius: 8px; background: var(--mavi-acik);
  border: 1px solid #dbe5ff; font-variant-numeric: tabular-nums; }
.sy-sss-bolum { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

/* ── /alan-adi ── */
.sy-alan-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sy-alan-izgara h1 { margin-top: var(--b-4); font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }
.sy-alan-sorgu { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--k-5); background: rgba(255, 255, 255, .72); border: 1px solid var(--cam-kenar);
  box-shadow: var(--g-kart), var(--parilti); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sy-alan-etiket { display: block; margin-bottom: 12px; font: 700 var(--t-arayuz)/1.2 var(--f-govde); }
.sy-alan-sorgu .tk-ipucu { margin-top: 10px; padding-left: 4px; }
.sy-alan-not { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding-left: 4px; font-size: var(--t-kucuk); color: var(--murekkep); font-weight: 600; }
.sy-alan-not svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--mavi-metin); }
.sy-alan-sorgu .tk-sorgu-alt { padding-left: 4px; padding-top: 14px; border-top: 1px solid var(--tas); }
.sy-alan-kapali { display: grid; gap: 12px; }
.sy-tarife .tk-tablo td b { display: block; font: 800 1.25rem/1.1 var(--f-baslik); letter-spacing: -.02em; color: var(--murekkep); }
.sy-tarife .tk-tablo td small { display: block; margin-top: 2px; color: var(--sis); font-size: var(--t-mini); }
.sy-tarife .tk-tablo th, .sy-tarife .tk-tablo td { padding: 14px 18px; }
.sy-uzanti { display: inline-flex; padding: 4px 10px; border-radius: 8px; background: var(--murekkep); color: #fff; font: 700 .9375rem/1.2 var(--f-baslik); }
.sy-tarife-diger th { color: var(--sis); font-weight: 600; }
.sy-tarife-diger td { color: var(--sis); text-align: right; }
.sy-tarife-not { margin-top: var(--b-4); }
.sy-secenekler { display: grid; gap: var(--b-4); }
.sy-secenek { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.sy-secenek h3 { margin-top: 0; font-size: var(--t-h4); }
.sy-secenek p { margin-top: 4px; font-size: var(--t-arayuz); }
.sy-kurallar { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-5); margin-top: var(--b-7); counter-reset: kural; }
.sy-kurallar .tk-kart h3 { font-size: var(--t-h4); margin-top: var(--b-4); }
.sy-kural-no { font: 800 2rem/1 var(--f-baslik); letter-spacing: -.03em; background: var(--isilti); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sy-resmi { margin-top: var(--b-7); padding: clamp(20px, 3vw, 32px); border-radius: var(--k-5); background: var(--koyu-yuzey); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.sy-resmi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 220px at 100% 0%, rgba(47, 102, 255, .3), transparent 70%); }
.sy-resmi-baslik { font-size: var(--t-h4); color: #fff; margin-bottom: var(--b-4); }
.sy-resmi ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sy-resmi a { position: relative; display: grid; gap: 2px; padding: 14px 44px 14px 16px; border-radius: var(--k-3); border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05); color: #fff; transition: background-color var(--h-hizli), border-color var(--h-hizli); }
.sy-resmi a:hover { text-decoration: none; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.sy-resmi a span { font-size: var(--t-kucuk); color: rgba(255, 255, 255, .7); }
.sy-resmi a svg { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #8fb0ff; }
.sy-resmi a:focus-visible { outline-color: #8fb0ff; }

/* ── /fiyatlar ── */
.sy-fiyat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--b-5); align-items: start; }
.sy-fiyat-tablo { background:
    radial-gradient(90% 70% at 0% 0%, rgba(47, 102, 255, .08), transparent 60%),
    radial-gradient(60% 50% at 100% 0%, rgba(240, 178, 84, .1), transparent 60%), var(--yuzey-1); }
.sy-tf-kap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.sy-tf { width: 100%; border-collapse: collapse; font-size: var(--t-arayuz); }
.sy-tf thead th { padding: 0 0 10px; text-align: left; font: 700 var(--t-mini)/1.2 var(--f-govde); letter-spacing: .08em; text-transform: uppercase; color: var(--sis); white-space: nowrap; }
.sy-tf thead th + th, .sy-tf td { text-align: right; }
.sy-tf thead th + th { padding-left: 16px; }
.sy-tf tbody th { text-align: left; }
.sy-tf tbody th, .sy-tf td { padding: 14px 0; border-top: 1px solid var(--tas); vertical-align: middle; }
.sy-tf tbody tr { transition: background-color var(--h-hizli); }
.sy-tf tbody tr:hover { background: rgba(47, 102, 255, .035); }
.sy-tf td { padding-left: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sy-tf td b { display: block; font: 800 1.375rem/1.1 var(--f-baslik); letter-spacing: -.02em; color: var(--murekkep); }
.sy-tf td small { display: block; margin-top: 2px; color: var(--sis); font-size: var(--t-mini); }
.sy-tf th a { display: inline-flex; align-items: center; gap: 12px; color: var(--murekkep); }
.sy-tf th a:hover { text-decoration: none; }
.sy-tf th a:hover b { color: var(--mavi-metin); }
.sy-tf th i { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sy-tf th b { display: block; font: 700 var(--t-h4)/1.1 var(--f-baslik); letter-spacing: -.01em; }
.sy-tf th small { display: block; color: var(--sis); font: 500 var(--t-mini)/1.3 var(--f-govde); margin-top: 2px; }
.sy-fiyat-yan { position: sticky; top: 104px; display: grid; gap: var(--b-5); }
.sy-dahil-kart h2 { font-size: var(--t-h4); margin-top: 0 !important; }
.sy-dahil { list-style: none; padding: 0; margin-top: var(--b-5); display: grid; gap: 14px; }
.sy-dahil li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-arayuz); color: var(--sis); line-height: 1.45; }
.sy-dahil li b { display: block; color: var(--murekkep); }
.sy-dahil svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #fff; background: var(--mavi-degrade); flex: none; box-shadow: var(--g-mavi); }
.sy-dahil--sade svg { color: var(--mavi-metin); background: var(--mavi-acik); box-shadow: none; }
.sy-dahil--sade li { color: var(--murekkep); }
.sy-veri { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--b-5); padding-top: var(--b-4); border-top: 1px solid var(--tas); font-size: var(--t-kucuk); color: var(--sis); }
.sy-veri svg { width: 18px; height: 18px; flex: none; color: var(--mavi-metin); }
.sy-koyu-ust { margin-bottom: var(--b-6); }
.sy-koyu-ust h2 { color: #fff; margin-top: var(--b-3); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.sy-ust-acik { color: #a9c1ff; }
.sy-koyu-not { margin-top: var(--b-6); color: rgba(255, 255, 255, .72); font-size: var(--t-arayuz); padding-top: var(--b-4); border-top: 1px solid rgba(255, 255, 255, .12); }
.sy-alan-secenek { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: var(--b-5); }
.sy-alan-secenek li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--k-3); background: var(--yuzey-2); border: 1px solid var(--tas); font-size: var(--t-arayuz); }
.sy-alan-secenek span { color: var(--sis); font-size: var(--t-kucuk); }
.sy-odeme h2 { font-size: var(--t-h3); }
.sy-odeme .tk-baglanti { margin-top: var(--b-5); }

/* ── /nasil-calisir ── */
.sy-akis { list-style: none; padding: 0; margin-top: var(--b-6); display: grid; gap: 0; position: relative; }
.sy-akis::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 28px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--mavi), var(--lavanta) 60%, var(--amber)); opacity: .55; }
.sy-akis li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 18px; padding-bottom: var(--b-5); }
.sy-akis b { font: 700 1.0625rem/1.3 var(--f-baslik); }
.sy-akis p { margin-top: 4px; color: var(--sis); font-size: var(--t-arayuz); }
.sy-akis-nokta { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #fff; border: 3px solid var(--mavi); box-shadow: 0 0 0 4px rgba(47, 102, 255, .12); z-index: 1; }
.sy-akis-nokta--son { border-color: var(--amber-logo); box-shadow: 0 0 0 4px rgba(240, 178, 84, .2); }
.sy-durum-ornek { position: sticky; top: 120px; padding: 22px; }
.sy-durum-ust { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--tas); }
.sy-durum-ust > svg { width: 38px; height: 38px; padding: 8px; border-radius: 10px; color: var(--mavi-metin); background: var(--mavi-acik); flex: none; }
.sy-durum-ust b { display: block; }
.sy-durum-liste { list-style: none; padding: 0; margin-top: 8px; }
.sy-durum-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px dashed var(--tas); font-weight: 600; }
.sy-durum-liste li:last-child { border-bottom: 0; }
.sy-panel-sekmeler { display: flex; justify-content: center; margin: var(--b-6) 0 var(--b-5); }
.sy-panel-gorsel { margin: 0; }
.sy-panel-gorsel img { width: 100%; height: auto; }
.sy-panel-gorsel figcaption { margin-top: var(--b-4); text-align: center; color: var(--sis); font-size: var(--t-arayuz); }
.sy-panel-gorsel figcaption b { color: var(--murekkep); }
.sy-yenileme { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: var(--b-7); align-items: center; }
.sy-yenileme h2 { font-size: var(--t-h3); margin-top: var(--b-4); }
.sy-yenileme p { margin-top: var(--b-3); color: var(--sis); }

/* ── /iletisim ── */
.sy-iletisim { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.sy-iletisim-kanallar { display: grid; gap: var(--b-4); }
.sy-kanal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; color: var(--murekkep); padding: 22px 24px; }
.sy-kanal:hover { text-decoration: none; }
.sy-kanal-metin { display: grid; gap: 2px; min-width: 0; }
.sy-kanal-metin small { font: 700 var(--t-mini)/1.2 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--mavi-metin); }
.sy-kanal-metin b { font: 700 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.25 var(--f-baslik); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sy-kanal-metin span { color: var(--sis); font-size: var(--t-kucuk); }
.sy-kanal-ok { width: 20px; height: 20px; color: var(--silik); transition: transform var(--h-hizli) var(--egri), color var(--h-hizli); }
.sy-kanal:hover .sy-kanal-ok { transform: translateX(3px); color: var(--mavi-metin); }
.sy-kanal--bos { grid-template-columns: auto minmax(0, 1fr); }
.sy-iletisim-diger { margin-top: var(--b-4); padding: var(--b-5); border-radius: var(--k-4); background: var(--yuzey-2); border: 1px solid var(--tas); }
.sy-iletisim-diger h2 { font: 700 var(--t-mini)/1.2 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--sis); margin-bottom: var(--b-4); }
.sy-iletisim-diger ul { list-style: none; padding: 0; display: grid; gap: 14px; margin-bottom: var(--b-4); }
.sy-iletisim-diger li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.sy-iletisim-diger li svg { width: 20px; height: 20px; color: var(--mavi-metin); margin-top: 2px; }
.sy-iletisim-diger li div { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-arayuz); }
.sy-iletisim-diger li b { flex-basis: 100%; }
.sy-iletisim-diger li a, .sy-iletisim-diger li span { overflow-wrap: anywhere; }
.sy-iletisim-yan { display: grid; gap: var(--b-5); position: sticky; top: 104px; }
.sy-ozel-is h2 { font-size: var(--t-h4); margin-top: 0 !important; }
.sy-ozel-is .tk-baglanti { margin-top: var(--b-4); }

/* ── /kunye ── */
.sy-kunye { padding-top: clamp(40px, 5vw, 64px); }

/* ── /hazir-site ── */
.sy-icerik-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sy-icerik-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--k-3);
  background: var(--yuzey-1); border: 1px solid var(--tas); box-shadow: var(--g-1); font-weight: 600; font-size: var(--t-arayuz); }
.sy-icerik-liste b { font: 800 1.5rem/1 var(--f-baslik); color: var(--mavi-metin); min-width: 2ch; }
.sy-icerik-liste small { display: block; color: var(--sis); font-weight: 500; font-size: var(--t-kucuk); }
.sy-sayfa-liste { list-style: none; padding: 0; margin-top: var(--b-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.sy-sayfa-liste li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sy-sayfa-liste svg { width: 18px; height: 18px; color: var(--mavi-metin); flex: none; }

/* ── Boş durum ── */
.sy-bos-eylem { justify-content: center; margin-top: var(--b-3); }

/* ── Yasal: kötüye kullanım bildirim kutusu ── */
.ys-bildirim { margin-bottom: var(--b-5); }

/* ═══ Duyarlılık ═══ */
@media (max-width: 1080px) {
  .sy-kurallar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-fiyat { grid-template-columns: minmax(0, 1fr); }
  .sy-fiyat-yan { position: static; }
}
@media (max-width: 900px) {
  .sy-alan-izgara, .sy-iki-sutun, .sy-iki-sutun--esit, .sy-duzen, .sy-iletisim, .sy-sss-bolum, .sy-yenileme { grid-template-columns: minmax(0, 1fr); }
  .sy-yan, .sy-iletisim-yan, .sy-durum-ornek { position: static; }
  .sy-yan { order: 2; }
  .sy-resmi ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sy-kurallar, .sy-icerik-liste, .sy-sayfa-liste { grid-template-columns: minmax(0, 1fr); }
  .sy-tf td { padding-left: 10px; }
  .sy-tf td b { font-size: 1.125rem; }
  .sy-tf th a { gap: 8px; }
  .sy-tf th i { width: 20px; height: 20px; }
  .sy-tf thead th { white-space: normal; vertical-align: bottom; }
  /* Telefon (denetim: tablo kartın sağ kenarına taşıyordu): "KDV hariç" satırı sarar, tema adı küçülür; yine de sığmazsa kap içinde kayar */
  .sy-tf td { white-space: normal; }
  .sy-tf td small { font-size: .6875rem; line-height: 1.3; }
  .sy-tf th b { font-size: 1rem; }
  .sy-tf thead th + th { padding-left: 10px; }
  .sy-fiyat-yan .tk-tablo th, .sy-fiyat-yan .tk-tablo td, .sy-iki-sutun .tk-tablo th, .sy-iki-sutun .tk-tablo td { padding: 12px 10px; }
  .sy-fiyat-yan .tk-tablo thead th, .sy-iki-sutun .tk-tablo thead th { white-space: normal; }
  .sy-tarife .tk-tablo th, .sy-tarife .tk-tablo td { padding: 12px 10px; }
  .sy-tarife .tk-tablo thead th { white-space: normal; }
  .sy-kanal { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .sy-kanal-ok { display: none; }
}

/* ── Bayilik ("Bayimiz olun", /bayilik; 2026-10-03): kimler kartı ve başvuru formu (iki sütun; telefonda tek) ── */
.by-kimler { display: grid; gap: var(--b-3); align-content: start; }
.by-kimler h3 { margin: 0; }
.by-kimler p { margin: 0; color: var(--sis); }
.by-iletisim { margin-top: var(--b-2); }
.by-form-kap { max-width: 880px; }
.by-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-4); margin-top: var(--b-6); }
.by-form .tk-alan + .tk-alan { margin-top: 0; }
.by-form .tk-alan { align-content: start; }
.by-form-tam { grid-column: 1 / -1; }
.by-form .tk-kvkk-notu { margin: 0; }
.by-tuzak { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.by-alindi { margin-top: var(--b-6); }
.by-alindi p + p { margin-top: var(--b-2); }
.by-kapali { margin-top: var(--b-6); display: grid; gap: var(--b-2); }
.by-kapali p { margin: 0; }
.by-ozet-liste { margin: var(--b-2) 0 0; padding-left: 1.2em; }
.by-ozet-liste a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) {
  .by-form { grid-template-columns: minmax(0, 1fr); }
}