/* magaza-randevu.css — /magaza/{slug} sayfasına gömülü misafir randevu sihirbazı.
   Sihirbazın kendi kuralları rezervasyon.css'te (yeniden kullanılıyor). O dosya
   _RezervasyonLayout'un rezervasyon-site.css'indeki değişkenlere ve .btn sınıflarına
   dayanıyor; landing _Layout'unda bunlar yok ya da farklı. Burada yalnızca .sp-rez
   kapsamında tanımlanır — sayfanın geri kalanına (nav, footer) sızmaz. */

.sp-rez {
    --brand: #5B4BE8;
    --brand-dark: #4B3CD6;
    --brand-light: #8B7BF0;
    --ink: #16172E;
    --ink-2: #3C3E52;
    --muted: #6B6E82;
    --line: #EAEAF2;
    --bg: #ffffff;
    --bg-2: #F7F7FB;
    --bg-tint: #F5F3FE;
    --tint-line: #E1DEFA;
    --disabled: #B4B6C6;
    --success: #12A150;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(10, 20, 40, 0.05);
    --shadow: 0 8px 24px rgba(10, 20, 40, 0.08);
    --transition: 160ms ease;
    scroll-margin-top: calc(84px + var(--ann-h, 0px)); /* sabit nav'ın altında kalmasın */
}

.sp-rez-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sp-rez-head .sp-h2 { margin: 0; }
.sp-rez-close {
    border: 1px solid var(--line); background: var(--bg); color: var(--muted);
    font-family: inherit; font-weight: 700; font-size: 13.5px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
}
.sp-rez-close:hover { background: var(--bg-2); color: var(--ink); }

/* Adım geçişinde rezervasyon.js formu scrollIntoView ile hizalar — sabit nav'ın altında kalmasın. */
.sp-rez .rez-form { box-shadow: 0 14px 40px -24px rgba(30, 25, 90, 0.35); scroll-margin-top: calc(84px + var(--ann-h, 0px)); }
.sp-rez .rez-wstep-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

/* .btn — rezervasyon-site.css'teki tanımların kapsamlı kopyası, sp görsel diline uyarlanmış */
.sp-rez .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 18px; border-radius: 11px;
    font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1;
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--transition), border-color var(--transition), filter var(--transition);
    white-space: nowrap; text-decoration: none;
}
.sp-rez .btn-primary { background: var(--brand); color: #fff; }
.sp-rez .btn-primary:hover { filter: brightness(1.07); color: #fff; }
.sp-rez .btn-primary:disabled { background: var(--disabled); cursor: not-allowed; filter: none; }
.sp-rez .btn-ghost { background: var(--bg); color: var(--brand); border-color: var(--tint-line); }
.sp-rez .btn-ghost:hover { background: var(--bg-tint); }
.sp-rez .btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.sp-rez .btn-lg { padding: 15px 22px; font-size: 16px; border-radius: 13px; }

/* Sihirbaz açıkken mobil sticky CTA gizlenir — sihirbazın alt butonlarını örtmesin. */
.sp.is-rez-open .sp-sticky-cta { display: none; }

@media (max-width: 980px) {
    /* Mobilde sihirbaz ana sütunun başında, hero'nun hemen altında açılır. */
    .sp-rez { scroll-margin-top: calc(72px + var(--ann-h, 0px)); }
    .sp-rez .rez-form { padding: 18px; }
}

/* ===== DARK TEMA (<html data-yr-theme="dark">, wwwroot/js/theme.js) — magaza.css dark paletiyle aynı ===== */
:root[data-yr-theme="dark"] .sp-rez {
    --brand: #7C6CF0;
    --brand-dark: #6B5BE0;
    --brand-light: #9B8BFF;
    --ink: #F4F4F8;
    --ink-2: #D2D3DE;
    --muted: #A3A5B8;
    --line: #2A2A36;
    --bg: #16161F;
    --bg-2: #1E1E29;
    --bg-tint: rgba(139, 123, 240, 0.14);
    --tint-line: rgba(139, 123, 240, 0.32);
    --disabled: #3A3B4A;
    --success: #4ADE80;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
:root[data-yr-theme="dark"] .sp-rez .rez-form { box-shadow: 0 14px 40px -24px rgba(0, 0, 0, 0.8); }