/* zamanli · marka katmanı · salon sayfası (müşteri randevu) · Arada
   Yerleşim: üst bar → salon kimliği (kapak, ad, konum, durum, eylemler) → ekip → hizmetler → saatler → değerlendirmeler;
   randevu paneli masaüstünde sağda yapışık, mobilde altta açılır kart. Yapı ve id/sınıflar sayfanınkiyle aynı.
   Yön: A · Nefes (feyz 12 Eki; B · Yumuşak alan elendi ve silindi). */

/* ---------- taban ---------- */
:root body { background: var(--zemin); color: var(--yazi-1); font-family: var(--font); font-size: 16px; }
:root :is(h1, h2, h3, h4) { font-family: var(--font); letter-spacing: -0.015em; }

:root .header { background: rgba(247,247,243,.94); border-bottom: 1px solid var(--cizgi); box-shadow: none; backdrop-filter: blur(8px); }
:root .logo { gap: 0; }
:root .logo-marka { display: block; height: 28px; width: auto; }
:root .back-btn { align-items: center; gap: 6px; color: var(--yazi-2); font-weight: 600; font-size: 14px; background: none; border: 0; }
:root .back-btn:hover { color: var(--vurgu); }
@media (min-width: 601px) { :root .back-btn.desktop-only { display: inline-flex; } }
:root .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: transparent; border: 1px solid var(--cizgi); color: var(--yazi-1); font-size: 0; }
:root .menu-btn .i { width: 20px; height: 20px; }

/* mobil menü ve giriş penceresi */
:root .salon-mobile-menu { background: var(--yuzey); font-family: var(--font); }
:root .salon-menu-header { background: var(--zemin); border-bottom: 1px solid var(--cizgi); color: var(--yazi-1); }
:root .salon-menu-header button, :root .salon-login-header button { display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--yazi-2); font-size: 0; width: 36px; height: 36px; border-radius: 10px; }
:root .salon-menu-header button .i, :root .salon-login-header button .i { width: 20px; height: 20px; }
:root .salon-menu-nav a { display: flex; align-items: center; gap: 12px; color: var(--yazi-1); font-weight: 600; border-radius: 12px; }
:root .salon-menu-nav a .i { color: var(--vurgu); width: 20px; height: 20px; }
:root .salon-menu-nav a:hover { background: var(--vurgu-acik); }
:root .salon-login-content { border-radius: var(--yaricap-buyuk); font-family: var(--font); }
:root .salon-login-header { background: var(--yuzey); color: var(--yazi-1); border-bottom: 1px solid var(--cizgi); }
:root .salon-login-field input { border: 1px solid var(--slate-300); border-radius: 12px; font-family: var(--font); }
:root .salon-login-field input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
:root .salon-login-btn { background: var(--yazi-1); border-radius: var(--yaricap-hap); font-family: var(--font); }
:root .salon-login-register a, :root .consent-label a { color: var(--vurgu); }

:root .spinner { border-color: var(--cizgi); border-top-color: var(--vurgu); }
:root .durum-ikon { color: var(--yazi-3); margin-bottom: 12px; }

/* salon kimliği */
:root .salon-cover { background: var(--vurgu-acik); font-size: 0; }
:root .salon-cover-ill { width: auto; height: 132px; display: block; }
:root .salon-cover.has-logo { background: var(--vurgu-acik); }
:root .salon-cover-logo { border: 4px solid var(--yuzey); box-shadow: 0 6px 18px rgba(20,32,25,.12); }
:root .salon-name { font-size: clamp(1.6rem, 4.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--yazi-1); }
:root .salon-rating { display: inline-flex; align-items: center; gap: 5px; background: var(--yuzey); border: 1px solid var(--cizgi);
  color: var(--yazi-1); font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: var(--yaricap-hap); white-space: nowrap; }
:root .salon-rating .i { color: #B7791F; fill: #F2C14E; stroke: #B7791F; width: 15px; height: 15px; }
:root .salon-meta { gap: 6px 18px; color: var(--yazi-2); font-size: 15px; }
:root .salon-meta-item { gap: 6px; }
:root .salon-meta-item .i { color: var(--yazi-3); width: 17px; height: 17px; }
:root .status-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--vurgu-acik); color: var(--vurgu-koyu);
  font-size: 13px; font-weight: 700; padding: 4px 10px 4px 9px; border-radius: var(--yaricap-hap); width: auto; align-self: flex-start; flex: none; }
:root .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu); }
:root .status-badge.closed { background: var(--hata-zemin); color: var(--hata); }
:root .status-badge.closed::before { background: var(--hata); }
:root .salon-actions { gap: 8px; margin-top: 16px; }
:root .action-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--yuzey); color: var(--yazi-1);
  border: 1px solid var(--slate-300); border-radius: var(--yaricap-hap); padding: 9px 16px; font-family: var(--font);
  font-size: 15px; font-weight: 600; box-shadow: none; }
:root .action-btn:hover { border-color: var(--yazi-1); background: var(--yuzey); }
:root .action-btn .i { width: 17px; height: 17px; color: var(--vurgu); }
:root #salonReviewsBtn .i { color: #B7791F; }
:root #salonRatingBtnText { display: inline-flex; align-items: center; gap: 7px; }

/* bölümler */
:root .section-title { font-size: 1.125rem; font-weight: 800; color: var(--yazi-1); letter-spacing: -0.02em; text-align: left; margin-bottom: 12px; }
:root .staff-grid { gap: 12px; justify-content: flex-start; }
:root .staff-card { padding: 6px 4px; }
:root .staff-avatar { background: var(--vurgu-acik); color: var(--vurgu-koyu); border: 0; font-size: 0; }
:root .staff-bas { font-size: 22px; font-weight: 800; color: var(--vurgu-koyu); }
:root .staff-name { font-weight: 700; color: var(--yazi-1); }
:root .staff-role { color: var(--yazi-3); }
:root .service-item { border-bottom: 1px solid var(--cizgi); }
:root .service-item:last-child { border-bottom: 0; }
:root .service-info h4 { font-size: 16px; font-weight: 700; color: var(--yazi-1); }
:root .service-info span { color: var(--yazi-3); font-size: 14px; }
:root .service-price { color: var(--yazi-1); font-weight: 800; font-size: 16px; }
:root .hour-item { border-bottom: 1px solid var(--cizgi); }
:root .hour-item:last-child { border-bottom: 0; }
:root .hour-day { color: var(--yazi-2); }
:root .hour-time { color: var(--yazi-1); font-weight: 600; }
:root .hour-time.closed { color: var(--yazi-3); font-weight: 500; }
:root .add-review-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--yuzey); color: var(--yazi-1);
  border: 1px solid var(--slate-300); border-radius: var(--yaricap-hap); padding: 8px 14px; font-family: var(--font); font-weight: 600; font-size: 14px; }
:root .add-review-btn:hover { border-color: var(--yazi-1); }
:root .add-review-btn .i { color: var(--vurgu); }
:root .no-reviews { color: var(--yazi-3); }
:root .review-card { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-kart); }
:root .review-avatar { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
:root .review-service { color: var(--yazi-3); }
:root .campaign-card { background: var(--uyari-zemin); border: 1px solid #F1D9A6; border-radius: var(--yaricap-kart); }
:root .campaign-card-icon { color: var(--uyari); display: inline-flex; }
:root .campaign-card-icon .i { width: 22px; height: 22px; }
:root .campaign-card-title { color: var(--yazi-1); }
:root .campaign-card-desc { color: var(--uyari); }
:root .campaign-applied-box { background: var(--uyari-zemin); border: 1px solid #F1D9A6; color: var(--uyari); }

/* randevu paneli */
:root .booking-card { border: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgba(20,32,25,.04), 0 18px 40px rgba(20,32,25,.08); border-radius: 20px; }
:root .booking-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.025em; }
:root .booking-content { padding: 22px 20px; }
:root .step-header { gap: 10px; margin-bottom: 10px; }
:root .step-num { width: 24px; height: 24px; background: var(--yazi-1); color: var(--zemin); font-size: 12px; font-weight: 800; }
:root .step-title { font-size: 15px; font-weight: 700; color: var(--yazi-1); }
:root .step-hint { font-size: 13px; font-weight: 500; color: var(--yazi-3); margin-left: 4px; }
:root .form-select, :root .form-input { border: 1px solid var(--slate-300); border-radius: 12px; font-family: var(--font); font-size: 16px; color: var(--yazi-1); background-color: var(--yuzey); }
:root .form-select:focus, :root .form-input:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
:root .form-select:focus-visible, :root .form-input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
:root .service-multi-list { border: 1px solid var(--slate-300); border-radius: 14px; background: var(--yuzey); padding: 6px; }
:root .service-check-item { border-radius: 10px; padding: 10px 12px; }
:root .service-check-item:hover { background: var(--zemin); }
:root .service-check-item.checked { background: var(--vurgu-acik); border-color: transparent; }
:root .service-check-item input { accent-color: var(--vurgu); }
:root .service-check-name { color: var(--yazi-1); font-size: 15px; font-weight: 600; }
:root .service-check-meta { color: var(--yazi-2); font-size: 14px; }
:root .service-multi-summary { background: var(--zemin); color: var(--yazi-2); }
:root .date-scroll { gap: 8px; }
:root .date-item { display: flex; flex-direction: column; align-items: center; min-width: 62px; border: 1px solid var(--slate-300); border-radius: 14px; background: var(--yuzey); padding: 9px 6px; }
:root .date-item:hover { border-color: var(--yazi-1); }
:root .date-day { font-size: 12px; font-weight: 600; color: var(--yazi-3); margin-bottom: 2px; }
:root .date-num { font-size: 16px; font-weight: 800; color: var(--yazi-1); }
:root .date-item.selected { background: var(--yazi-1); border-color: var(--yazi-1); }
:root .date-item.selected .date-day { color: rgba(247,247,243,.72); }
:root .date-item.selected .date-num { color: var(--zemin); }
:root .time-grid { gap: 8px; }
:root .time-slot { border: 1px solid var(--slate-300); border-radius: 12px; background: var(--yuzey); font-weight: 600; color: var(--yazi-1); font-size: 16px; padding: 12px 6px; }
:root .time-slot:hover:not(.disabled) { border-color: var(--yazi-1); }
:root .time-slot.selected { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
:root .time-slot.disabled { background: transparent; border-color: var(--cizgi); color: var(--yazi-3); text-decoration: line-through; text-decoration-color: var(--slate-300); }
:root .time-empty { color: var(--yazi-3); }
:root .en-erken-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--vurgu-acik); color: var(--vurgu-koyu);
  border: 0; border-radius: var(--yaricap-hap); padding: 8px 14px; font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; }
:root .booking-summary { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px; }
:root .summary-label { color: var(--yazi-3); }
:root .summary-value { color: var(--yazi-1); font-weight: 700; }
:root .book-btn { background: var(--vurgu); color: #fff; border-radius: var(--yaricap-hap); font-family: var(--font); font-size: 17px; font-weight: 700; padding: 16px; }
:root .book-btn:hover:not(:disabled) { background: var(--vurgu-koyu); }
:root .book-btn:disabled { background: var(--cizgi); color: var(--yazi-2); }

/* pencereler */
:root .modal-overlay { background: rgba(20,32,25,.48); }
:root .modal { border-radius: var(--yaricap-buyuk); font-family: var(--font); }
:root .modal-header { border-bottom: 1px solid var(--cizgi); }
:root .modal-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--yazi-1); }
:root .modal-close { display: inline-flex; align-items: center; justify-content: center; font-size: 0; background: var(--zemin); color: var(--yazi-2); border-radius: 10px; }
:root .modal-close .i { width: 20px; height: 20px; }
:root .form-label { color: var(--yazi-1); font-weight: 700; font-size: 14px; }
:root .form-istege { color: var(--yazi-3); font-weight: 500; margin-left: 4px; }
:root .form-hint { color: var(--yazi-3); }
:root .consent-label { color: var(--yazi-2); font-size: 13px; }
:root .consent-label { align-items: flex-start; gap: 10px; }
:root .consent-label input { accent-color: var(--vurgu); margin: 1px 0 0; width: 18px; height: 18px; flex: none; }
:root .success-check { background: var(--vurgu-acik); color: var(--vurgu-koyu); box-shadow: none; }
:root .success-check .i { width: 34px; height: 34px; stroke-width: 2.25; }
:root .success-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--yazi-1); }
:root .success-text { color: var(--yazi-2); }
:root .success-details { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px; }
:root .btn-whatsapp { background: var(--whatsapp); border-radius: var(--yaricap-hap); font-family: var(--font); font-weight: 700; }
:root .btn-calendar, :root .btn-done { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--yaricap-hap);
  font-family: var(--font); font-weight: 600; background: var(--yuzey); color: var(--yazi-1); border: 1px solid var(--slate-300); }
:root .btn-reminder-push { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--yaricap-hap);
  font-family: var(--font); background: var(--yuzey); color: var(--yazi-1); border: 1px solid var(--slate-300); }
:root .btn-reminder-push.is-on { background: var(--vurgu-acik); color: var(--vurgu-koyu); border-color: transparent; }
:root .review-modal-content { border-radius: var(--yaricap-buyuk); font-family: var(--font); }
:root .review-submit-btn, :root .verify-btn { background: var(--vurgu); border-radius: var(--yaricap-hap); font-family: var(--font); }
:root .lightbox-close { display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
:root .lightbox-image { width: auto; height: auto; }
:root .lightbox-close .i { width: 22px; height: 22px; color: #fff; }

/* alt bilgi */
:root .footer { background: var(--koyu); color: var(--koyu-yazi); font-family: var(--font); }
:root .footer a { color: rgba(247,247,243,.82); }
:root .footer a:hover { color: #fff; }
:root .footer-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
:root .footer-brand p { color: rgba(247,247,243,.72); margin: 0; }

/* mobil randevu çubuğu (ortak) */
@media (max-width: 900px) {
  :root .booking-panel { bottom: 60px; }
  :root .booking-card { border-radius: 22px 22px 0 0; border-bottom: 0; max-height: calc(85dvh - 60px); }
  :root .booking-toggle::before { display: none; }
  :root .toggle-text h4 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
  :root .toggle-text p { font-size: 13px; }
  :root .toggle-icon { backdrop-filter: none; }
  :root .toggle-icon .i { width: 22px; height: 22px; }
  :root .toggle-arrow { font-size: 0; transform: none; }
  :root .toggle-arrow .i { width: 18px; height: 18px; transition: transform .3s var(--gecis); }
  :root .booking-card.collapsed .toggle-arrow { transform: none; }
  :root .booking-card.collapsed .toggle-arrow .i { transform: rotate(180deg); }
  :root .main { padding-bottom: 150px; }
}

/* ================= A · Nefes (feyz seçti, 12 Eki): kart yok, ince çizgiler, geniş boşluk ================= */
html:root .salon-card { background: transparent; box-shadow: none; border-radius: 0; }
html:root .salon-cover { height: auto; background: transparent; justify-content: flex-start; padding: 22px 20px 0; }
html:root .salon-cover-ill { height: 64px; padding: 10px 14px; background: var(--vurgu-acik); border-radius: 18px; box-sizing: content-box; }
html:root .salon-info { padding: 18px 20px 26px; }
html:root .section { background: transparent; border-top: 1px solid var(--cizgi); padding: 26px 20px; }
html:root .booking-toggle { background: var(--yuzey); color: var(--yazi-1); border-top: 1px solid var(--cizgi); }
html:root .toggle-icon { background: var(--vurgu-acik); color: var(--vurgu-koyu); border-radius: 12px; }
html:root .toggle-text h4 { color: var(--yazi-1); }
html:root .toggle-text p { color: var(--yazi-2); }
html:root .toggle-arrow { background: var(--zemin); color: var(--yazi-1); }
html:root .booking-card { box-shadow: 0 -10px 30px rgba(20,32,25,.06); }
@media (min-width: 901px) {
  html:root .main { gap: 48px; padding-top: 24px; }
  html:root .salon-cover { padding: 8px 0 0; }
  html:root .salon-info { padding: 18px 0 30px; }
  html:root .section { padding: 28px 0; }
  html:root .booking-card { box-shadow: none; }
}