/* ══════════════════════════════════════════════════════════════════════════
   t-50 · BİZ SİZİ ARAYALIM MODALI (.sbcm)
   Token SSOT: --brand-* --accent-* --sky-* --cta --panel --ink --muted --line
   Mor / magenta / pembe / kırmızı YOK.
   ══════════════════════════════════════════════════════════════════════════ */
.sbcm-ovl{
  position:fixed; inset:0; z-index:60;                       /* tema kontratı */
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(16px,5vh,64px) clamp(14px,4vw,32px);
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(4,12,17,.94);   /* KOYU/OPAK perde → arkadaki sayfa yazıları GÖZÜKMEZ */
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .sbcm-ovl{ -webkit-backdrop-filter:blur(10px) saturate(115%); backdrop-filter:blur(10px) saturate(115%); }
}
.sbcm{
  --sgb-slant:22px; --sgb-corner:16px;
  position:relative; width:100%; max-width:560px; margin:auto;
  background:var(--panel); color:var(--ink); text-align:left;
  padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,30px) calc(clamp(20px,2.6vw,28px) + var(--sgb-slant));
  box-shadow:0 34px 70px -30px rgba(8,30,39,.65);
}
.sbcm *,.sbcm *::before,.sbcm *::after{ box-sizing:border-box; }
.sbcm :focus-visible{ outline:2px solid var(--focus-ring,#53B5EC); outline-offset:3px; border-radius:8px; }

/* Kapat — 44px dokunma hedefi, konum sabit (hover'da yalnız zemin değişir) */
.sbcm-x{
  position:absolute; top:10px; right:10px; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:999px; cursor:pointer; font:inherit;
  color:var(--muted); font-size:16px; transition:background-color .18s ease,color .18s ease;
}
.sbcm-x:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }

.sbcm-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin:0;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-500); }
.sbcm-eyebrow::before{ content:''; width:26px; height:2px; border-radius:2px; background:var(--accent-400); }
html.dark .sbcm-eyebrow{ color:var(--sky-300); }
.sbcm h2{ margin:.5rem 0 0; font-size:clamp(1.25rem,2.4vw,1.55rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.15; max-width:15.4em; }
.sbcm-sub{ margin:.4rem 0 0; font-size:.88rem; line-height:1.5; color:var(--muted); max-width:34em; }

/* ── Alanlar ── */
/* 2 KOLON GRID · kompakt (tek ekrana sığsın, scroll olmasın) */
.sbcm-form{ margin-top:1.15rem; display:grid; grid-template-columns:1fr 1fr; gap:.65rem .85rem; align-items:start; }
.sbcm-f{ min-width:0; }
.sbcm-f--full{ grid-column:1 / -1; }
.sbcm-f label{ display:block; font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.sbcm-f label .sbcm-ops{ font-weight:500; opacity:.65; }
.sbcm-f .req{ color:var(--accent-600); margin-left:.15rem; }
.sbcm-opt-tag{ color:var(--muted); font-weight:500; font-size:.78rem; }
html.dark .sbcm-f .req{ color:var(--accent-400); }
.sbcm-f input,.sbcm-f select{
  width:100%; height:48px; padding:0 .9rem; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--surface-2); border:0; border-radius:13px;   /* kompakt + yumuşak köşe */
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s ease, background-color .18s ease;   /* boyut DEĞİŞMEZ → CLS yok */
}
.sbcm-f select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.6rem; }
.sbcm-f input:hover,.sbcm-f select:hover{ box-shadow:inset 0 0 0 1px var(--brand-300); }
/* Odakta kalın iç çerçeve. DİKKAT: outline SADECE fare odağında kaldırılır —
   klavye odağında (:focus-visible) 2px halka KALIR (erişilebilirlik kuralı). */
.sbcm-f input:focus,.sbcm-f select:focus{ box-shadow:inset 0 0 0 2px var(--brand-500); }
.sbcm-f input:focus:not(:focus-visible),.sbcm-f select:focus:not(:focus-visible){ outline:0; }
.sbcm-f input::placeholder{ color:var(--muted); opacity:.75; }
/* Tarih seçici · ortak bileşenin renklerini modal paletine bağla */
.sbcm-f .sbt{ --sbt-panel:var(--surface); --sbt-line:var(--line); --sbt-ink:var(--ink);
  --sbt-soluk:var(--muted); --sbt-marka:var(--brand-500); --sbt-marka-ink:#fff;
  --sbt-vurgu-zemin:color-mix(in srgb, var(--brand-500) 16%, transparent); }
.sbcm-f .sbt-giris{ height:56px; border-radius:14px; padding:0 16px;
  background:var(--field, transparent); color:var(--ink); font-size:1rem;
  box-shadow:inset 0 0 0 1px var(--line); border:0; transition:box-shadow .18s ease; }
.sbcm-f .sbt-giris:hover{ box-shadow:inset 0 0 0 1px var(--brand-300); }
.sbcm-f .sbt-giris:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }
.sbcm-f.is-bad input,
.sbcm-f.is-bad .sbt-giris{ box-shadow:inset 0 0 0 2px var(--accent-500); }
/* Hata satırı yer AYIRIR (min-height) → mesaj çıkınca form uzamaz, zıplama yok */
.sbcm-err{ min-height:.85rem; margin-top:.22rem; font-size:.76rem; line-height:.85rem;
  color:var(--accent-600); display:flex; align-items:center; gap:.4rem; }
html.dark .sbcm-err{ color:var(--accent-300); }
.sbcm-err i{ font-size:.78rem; }

/* Pazarlama izni — OPSİYONEL, varsayılan işaretsiz */
.sbcm-opt{ display:flex; align-items:center; gap:.6rem; cursor:pointer; }
.sbcm-opt input{ flex:0 0 auto; width:19px; height:19px; margin:0; accent-color:var(--brand-500); cursor:pointer; }
.sbcm-opt span{ font-size:.82rem; line-height:1.4; color:var(--muted); }

/* Gönder — hata durumunda ASLA disable olmaz, boyut sabit */
.sbcm-send{
  width:100%; height:52px; margin:.35rem 0 0;   /* grid gap boşluğu yeterli */
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--cta); color:var(--cta-ink); border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:1.05rem; font-weight:800; line-height:1;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.sbcm-send:hover{ background:var(--cta-hover); }   /* 27.08: düğme ailesiyle aynı yön — hover KOYULAŞIR */
.sbcm-legal{ margin:.85rem 0 0; font-size:.8rem; line-height:1.6; color:var(--muted); text-align:center; }
.sbcm-legal a{ color:var(--brand-600); font-weight:700; border-bottom:1px solid color-mix(in srgb,var(--brand-600) 40%,transparent); }
html.dark .sbcm-legal a{ color:var(--sky-300); border-bottom-color:color-mix(in srgb,var(--sky-300) 40%,transparent); }
.sbcm-legal a:hover{ border-bottom-color:currentColor; }

/* ── Gönderim sonrası ── */
.sbcm-done{ text-align:center; padding:.5rem 0 .25rem; }
.sbcm-done-ic{ width:74px; height:74px; margin:0 auto; display:grid; place-items:center; border-radius:999px;
  background:color-mix(in srgb, var(--cta) 22%, transparent); color:var(--accent-600); font-size:30px; }
html.dark .sbcm-done-ic{ color:var(--accent-300); }
.sbcm-done h3{ margin:1.1rem 0 0; font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
.sbcm-done p{ margin:.7rem auto 0; max-width:27.79em; font-size:.96rem; line-height:1.68; color:var(--muted); }
.sbcm-done-acts{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem; }
.sbcm-done-acts a{ height:54px; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:999px; font-size:1rem; font-weight:700; line-height:1;
  transition:background-color .2s ease, box-shadow .2s ease; }
.sbcm-b-gold{ background:var(--cta); color:var(--cta-ink); }
.sbcm-b-gold:hover{ background:var(--cta-hover); }
.sbcm-b-line{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.sbcm-b-line:hover{ background:color-mix(in srgb, var(--brand-500) 10%, transparent); }

@media (max-width:479px){
  .sbcm{ --sgb-slant:16px; --sgb-corner:12px; }
  .sbcm-f input,.sbcm-f select{ height:50px; }
}
@media (prefers-reduced-motion:reduce){
  .sbcm-ovl,.sbcm,.sbcm *{ animation:none !important; transition:none !important; }
}
[x-cloak]{ display:none !important; }
