/* AdSequel gömülü arayüz. Renk Polaris değişkeninden (UX eki #9) — hex yazılmaz; tek istisna vurgu renginin rgb yedeği. */
html, body { margin: 0; background: var(--p-color-bg, transparent); }
body { overflow-x: hidden; }
#uygulama { max-width: 100%; }
.ust-uyari { display: grid; gap: var(--p-space-200, 8px); padding: var(--p-space-400, 16px) var(--p-space-400, 16px) 0; }
code.kopya {
  font-family: var(--p-font-family-mono, ui-monospace, monospace);
  background: var(--p-color-bg-surface-secondary, transparent);
  border-radius: var(--p-border-radius-100, 4px);
  padding: var(--p-space-050, 2px) var(--p-space-100, 4px);
  word-break: break-all;
  user-select: all;
}
.reklam-gorsel { max-width: 100%; max-height: 320px; border-radius: var(--p-border-radius-200, 8px); display: block; }
/* App Bridge s-app-nav'ı admin kenar çubuğuna taşır; sayfa içinde çizilmez (çerçeve dışında açılırsa da görünmesin). */
s-app-nav { display: none; }
[hidden] { display: none !important; }
/* Tek vurgu rengi (B çizgisi, kazanan kol, anahtar): Polaris bağlantı mavisi; değişken yoksa aynı tonun rgb yedeği
   (beyaz zeminde karşıtlık 6.1:1, ≥ 3:1). A gri kesikli kalır — renk olmadan da ayırt edilir. */
:root {
  /* Görsel geçiş (27.10.2026): tek marka rengi kobalt mavi; durum renkleri Polaris tonlarıyla aynı anlamda (başarı yeşil,
     uyarı turuncu). Polaris değişkenleri gömülü çerçevede tanımlı değil (ölçüldü: rgb yedeği çiziliyor) → kendi belirteçlerimiz.
     Karşıtlık (beyaz zeminde): vurgu 5.99, uyarı metni 7.42, başarı 6.33, ikincil metin 6.19; açık tonlu zeminlerde hepsi ≥ 5.4. */
  --adsequel-vurgu: rgb(36 88 220);
  --adsequel-vurgu-zemin: rgb(239 244 255);
  --adsequel-vurgu-cizgi: rgb(199 214 252);
  --adsequel-uyari: rgb(146 58 8);
  --adsequel-uyari-zemin: rgb(255 245 235);
  --adsequel-uyari-cizgi: rgb(253 218 190);
  --adsequel-basari: rgb(12 110 62);
  --adsequel-basari-zemin: rgb(233 248 239);
  --adsequel-metin: rgb(48 48 48);
  --adsequel-ikincil: rgb(97 97 97);
  --adsequel-cizgi: rgb(227 227 227);
  --adsequel-yuzey: rgb(255 255 255);
  --adsequel-yazi: var(--p-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
}
.sayfa-alt { padding-block-end: var(--p-space-300, 12px); }
@media (max-width: 489.98px) { .sayfa-alt { padding-inline: var(--p-space-400, 16px); } }
/* Özet kartlarının ana sayısı (Prodiax: küçük gri etiket üstte, büyük sayı altta). */
.buyuk-sayi, .grafik-kap { font-family: var(--p-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif); }
.buyuk-sayi { display: block; font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--p-color-text, currentColor); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Sonuç grafiği: çizim alanı esner, eksen yazıları SVG dışında sabit 12 px (viewBox ölçeğinden bağımsız). */
.grafik-kap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 200px auto; column-gap: var(--p-space-200, 8px);
  font-size: 12px; line-height: 16px; color: var(--p-color-text-secondary, currentColor); font-variant-numeric: tabular-nums; }
.grafik-y { grid-row: 1; grid-column: 1; position: relative; min-inline-size: 3.25rem; }
.grafik-y span { position: absolute; inset-inline-end: 0; transform: translateY(-50%); white-space: nowrap; }
.grafik { grid-row: 1; grid-column: 2; display: block; inline-size: 100%; block-size: 100%; overflow: visible; color: var(--p-color-text, currentColor); }
.grafik-x { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; padding-block-start: var(--p-space-100, 4px); }
@media (max-width: 489.98px) { .grafik-kap { grid-template-rows: 160px auto; } }
.grafik path, .grafik line { vector-effect: non-scaling-stroke; }
.grafik-izgara { stroke: var(--p-color-border, currentColor); stroke-opacity: 0.35; stroke-width: 1; }
.grafik-a { fill: none; stroke: var(--p-color-text-secondary, currentColor); stroke-opacity: 0.6; stroke-width: 2; stroke-dasharray: 5 4; }
.grafik-b { fill: none; stroke: var(--adsequel-vurgu); stroke-width: 3; }
.grafik-a-nokta { fill: none; stroke: var(--p-color-text-secondary, currentColor); stroke-opacity: 0.6; stroke-width: 6; stroke-linecap: round; }
.grafik-b-nokta { fill: none; stroke: var(--adsequel-vurgu); stroke-width: 7; stroke-linecap: round; }
.anahtar { display: inline-block; inline-size: 18px; vertical-align: middle; }
.anahtar-a { border-block-start: 2px dashed var(--p-color-text-secondary, currentColor); opacity: 0.6; }
.anahtar-b { border-block-start: 3px solid var(--adsequel-vurgu); }
/* Kazanan kol kartı: aynı vurgu renginde çerçeve. */
.kazanan-kol { border-radius: var(--p-border-radius-300, 12px); box-shadow: 0 0 0 2px var(--adsequel-vurgu); }

/* Testler: grup başına ayrı tablo; geniş ekranda (tablo kipi) hücre içerikleri sabit genişlikte → sütunlar gruplar arasında hizalı.
   Dar ekranda (liste kipi) sınır yok. Toplam ≈ 54rem + hücre dolguları: ~1000 px çerçeveye sığar. */
@media (min-width: 1040px) {
  .sutun { box-sizing: border-box; }
  .sutun-1 { inline-size: 15rem; } .sutun-2 { inline-size: 10rem; } .sutun-3 { inline-size: 7rem; }
  .sutun-4 { inline-size: 9rem; } .sutun-5 { inline-size: 9rem; } .sutun-6 { inline-size: 4rem; }
}

/* "Telefonda aç" QR karesi: renkler SVG'de sabit (açık zemin, koyu modül) — okuyucular koyu temada da bunu bekler. */
.qr { inline-size: 200px; block-size: 200px; max-inline-size: 100%; }

/* ------------------------------------------------------------------ görsel geçiş: ortak parçalar
   Polaris s-* bileşenleri içerikte kalır; yalnız onların sunmadığı üç şey burada: tonlu kutu zemini, numaralı daire, KPI vurgusu. */
.kpi, .ton-kutu, .adim, .hero, .eylem-karti, .bos-kap, .bolum-basi, .serit { font-family: var(--adsequel-yazi); box-sizing: border-box; }
/* KPI kartı (kpiKart): küçük gri etiket, büyük sayı, bağlam satırı. Vurgulu kart: açık mavi zemin + mavi sayı. */
.kpi { border: 1px solid var(--adsequel-cizgi); border-radius: 12px; background: var(--adsequel-yuzey); block-size: 100%; }
.kpi--vurgu { background: var(--adsequel-vurgu-zemin); border-color: var(--adsequel-vurgu-cizgi); }
.kpi--vurgu .buyuk-sayi { color: var(--adsequel-vurgu); }
.kpi--buyuk .buyuk-sayi { font-size: 2.25rem; line-height: 2.75rem; }
.kpi-bas { display: flex; align-items: center; gap: 6px; }
/* Tonlu kutu (fırsat detayı "ne bekliyordu" mavi, "nerede takıldı" turuncu — Prodiax deseni). Başlık rengi + ikon: renk tek taşıyıcı değil. */
.ton-kutu { border-radius: 12px; border: 1px solid transparent; block-size: 100%; }
.ton-kutu--bilgi { background: var(--adsequel-vurgu-zemin); border-color: var(--adsequel-vurgu-cizgi); }
.ton-kutu--uyari { background: var(--adsequel-uyari-zemin); border-color: var(--adsequel-uyari-cizgi); }
.ton-baslik { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 0.875rem; line-height: 1.25rem; }
.ton-kutu--bilgi .ton-baslik { color: var(--adsequel-vurgu); }
.ton-kutu--uyari .ton-baslik { color: var(--adsequel-uyari); }
/* Numaralı daire: aktif (mavi dolu), tamam (yeşil zemin + onay), bekliyor (çerçeve), yakında (kesikli). */
.daire { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%;
  font: 650 0.8125rem/1 var(--adsequel-yazi); font-variant-numeric: tabular-nums; box-sizing: border-box; }
.daire--aktif { background: var(--adsequel-vurgu); color: var(--adsequel-yuzey); }
.daire--tamam { background: var(--adsequel-basari-zemin); color: var(--adsequel-basari); border: 1px solid var(--adsequel-basari); }
.daire--bekliyor { background: var(--adsequel-yuzey); color: var(--adsequel-ikincil); border: 1px solid var(--adsequel-cizgi); }
.daire--kucuk { inline-size: 24px; block-size: 24px; font-size: 0.75rem; }
.daire svg { inline-size: 14px; block-size: 14px; }
/* Numaralı bölüm başlığı (fırsat detayı 1-2-3). */
.bolum-basi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 12px; }
.bolum-basi > .bolum-sag { margin-inline-start: auto; }
.bolum-baslik, .adim-baslik { margin: 0; font: 650 1rem/1.5rem var(--adsequel-yazi); color: var(--adsequel-metin); letter-spacing: -0.005em; }
.adim-baslik { display: flex; align-items: center; gap: 8px; }
.adim--tamam .adim-baslik { font-weight: 550; color: var(--adsequel-ikincil); }
/* Kurulum adımları: tek kartta liste; aktif adım mavi kenar + zemin, tamamlanan adım sönük ve kompakt. */
.adimlar { display: grid; gap: 0; }
.adim { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: start; padding: 16px; border-radius: 12px; border: 1px solid transparent; }
.adim + .adim { margin-block-start: 4px; }
.adim--aktif { background: var(--adsequel-vurgu-zemin); border-color: var(--adsequel-vurgu-cizgi); }
.adim--tamam { padding-block: 10px; }
.adim--tamam .adim-govde { color: var(--adsequel-ikincil); }
.adim-govde { min-inline-size: 0; display: grid; gap: 6px; }
.adim-sag { display: grid; justify-items: end; gap: 8px; }
@media (max-width: 489.98px) {
  .adim { grid-template-columns: auto 1fr; padding: 14px 12px; }
  .adim-sag { grid-column: 2; justify-items: start; }
}
.ilerleme { display: grid; gap: 8px; }
.ilerleme-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ilerleme-sayi { font: 700 1.25rem/1.75rem var(--adsequel-yazi); color: var(--adsequel-metin); font-variant-numeric: tabular-nums; }
/* İlerleme / kullanım çubuğu (role=progressbar; değer metin olarak da yazılı). */
.cubuk { block-size: 8px; border-radius: 999px; background: var(--adsequel-cizgi); overflow: hidden; }
.cubuk > span { display: block; block-size: 100%; border-radius: inherit; background: var(--adsequel-vurgu); }
.cubuk--tamam > span { background: var(--adsequel-basari); }
/* Hero ("Hazırsınız", "Kazanan hazır"): vurgulu, ikon kutulu kart. */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px; border-radius: 16px;
  background: var(--adsequel-vurgu-zemin); border: 1px solid var(--adsequel-vurgu-cizgi); }
.hero--basari { background: var(--adsequel-basari-zemin); border-color: rgb(171 222 192); }
.hero-ikon { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 12px;
  background: var(--adsequel-vurgu); color: var(--adsequel-yuzey); }
.hero--basari .hero-ikon { background: var(--adsequel-basari); }
.hero-ikon svg { inline-size: 22px; block-size: 22px; }
.hero-baslik { margin: 0; font: 700 1.25rem/1.75rem var(--adsequel-yazi); color: var(--adsequel-metin); letter-spacing: -0.01em; }
.hero-govde { display: grid; gap: 10px; min-inline-size: 0; justify-items: start; }
@media (max-width: 489.98px) { .hero { grid-template-columns: 1fr; padding: 16px; } }
/* Büyük birincil eylem kartı (fırsat detayı "Gönder"). */
.eylem-karti { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 14px;
  border: 2px solid var(--adsequel-vurgu); background: var(--adsequel-vurgu-zemin); }
.eylem-karti .eylem-baslik { font: 700 1.0625rem/1.5rem var(--adsequel-yazi); color: var(--adsequel-metin); }
@media (max-width: 489.98px) { .eylem-karti { grid-template-columns: auto 1fr; } .eylem-karti > .eylem-dugme { grid-column: 1 / -1; } }
.ikon-kutu { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 10px;
  background: var(--adsequel-yuzey); border: 1px solid var(--adsequel-vurgu-cizgi); flex: none; }
/* Boş durum: ikon + başlık + tek cümle + tek eylem, ortalı. */
.bos-kap { display: grid; justify-items: start; gap: 10px; padding: 12px 4px; max-inline-size: 36rem; }
.bos-kap .ikon-kutu { inline-size: 52px; block-size: 52px; border-radius: 14px; background: var(--adsequel-vurgu-zemin); }
/* A / B harf dairesi (test kurulumu, sonuç). */
.harf { display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; border-radius: 50%; flex: none;
  font: 700 0.8125rem/1 var(--adsequel-yazi); background: var(--adsequel-yuzey); color: var(--adsequel-metin); border: 1px solid var(--adsequel-cizgi); }
.harf--b { background: var(--adsequel-vurgu); color: var(--adsequel-yuzey); border-color: var(--adsequel-vurgu); }
.kol-b-kap { border-radius: 12px; border: 1px solid var(--adsequel-vurgu-cizgi); background: var(--adsequel-vurgu-zemin); block-size: 100%; box-sizing: border-box; }
.serit { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; border-radius: 10px; font: 600 0.875rem/1.25rem var(--adsequel-yazi);
  color: var(--adsequel-vurgu); background: var(--adsequel-vurgu-zemin); border: 1px solid var(--adsequel-vurgu-cizgi); }
@media (prefers-reduced-motion: no-preference) { .cubuk > span { transition: inline-size 300ms ease; } }