/* ── Booking layout reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.booking-page { overflow-x: hidden; }

/* Suisse BP Int'l – served from /fonts/ (drop .woff2/.woff files there to activate) */
@font-face { font-family: "SuisseBP"; font-weight: 300; src: url('/fonts/SuisseBPIntl-Light.woff2') format('woff2'), url('/fonts/SuisseBPIntl-Light.woff') format('woff'), local("Suisse BP Int'l-Light"), local("SuisseBPIntl-Light"); }
@font-face { font-family: "SuisseBP"; font-weight: 400; src: url('/fonts/SuisseBPIntl-Regular.woff2') format('woff2'), url('/fonts/SuisseBPIntl-Regular.woff') format('woff'), local("Suisse BP Int'l-Regular"), local("SuisseBPIntl-Regular"); }
@font-face { font-family: "SuisseBP"; font-weight: 500; src: url('/fonts/SuisseBPIntl-Medium.woff2') format('woff2'), url('/fonts/SuisseBPIntl-Medium.woff') format('woff'), local("Suisse BP Int'l-Medium"), local("SuisseBPIntl-Medium"); }

/* ═══════════════════ BOOKING NEW DESIGN ═══════════════════ */

/* Full-page video/photo background */
.bk-bg-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.bk-wrap {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ── Left Panel ── */
.bk-left {
  width: 469px;
  flex-shrink: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 44px 56px 40px;
  background-color: rgba(204, 68, 41, 0.012);
  backdrop-filter: blur(40px) brightness(100%);
  -webkit-backdrop-filter: blur(40px) brightness(100%);
  position: relative;
  z-index: 2;
  transition: background-color 0.4s ease;
}

/* Step 1+ → solid red */
.bk-wrap.step-active .bk-left {
  background-color: #cc4429;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bk-logo { margin-bottom: 72px; }
.bk-logo img {
  width: 122px;
  height: auto;
  max-height: 88px;
  object-fit: contain;
}

.bk-title {
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.0;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0;
}

.bk-subtitle {
  font-weight: 300;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 40px;
  opacity: 0.9;
}

/* Step indicators */
.bk-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 40px; /* dot/connector alanı */
}

.bk-step-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 311px;
  height: 49px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.bk-step-row.active { opacity: 1; }
.bk-step-row.done   { opacity: 0.75; }

/* Dot – filled circle for active/done, outlined for inactive */
.bk-step-dot {
  position: absolute;
  left: -40px; /* relative to .bk-step-row container */
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  transition: all 0.3s;
  box-sizing: border-box;
}
.bk-step-row:not(.active):not(.done) .bk-step-dot {
  background: transparent;
  border: 5px solid #fff;
}

/* Vertical connector line between dots */
.bk-step-connector {
  position: absolute;
  left: -33px; /* centered on dot */
  top: 20px;
  width: 2px;
  height: 41px;
  background: rgba(255,255,255,0.4);
}

/* Icon box */
.bk-step-icon {
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Label – right-aligned */
.bk-step-label {
  position: absolute;
  right: 0;
  top: 1px;
  font-weight: 300;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.bk-step-row.active .bk-step-label { color: #ffffff; }
.bk-step-row:not(.active):not(.done) .bk-step-label { color: rgba(255,255,255,0.4); }

/* Separator line under each step */
.bk-step-sep {
  width: 311px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 0 0 0 0;
}

/* Nav buttons at bottom */
.bk-nav {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bk-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 5.25px;
  text-transform: uppercase;
  color: #cc4429;
  transition: background 0.15s;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}
.bk-btn:hover { background: #f5f0ee; color: #cc4429; text-decoration: none; }

.bk-btn-secondary {
  background: #99331e;
  color: #ffffff;
  letter-spacing: 3px;
  font-size: 16px;
  border: none;
}
.bk-btn-secondary:hover { background: #7a2818; color: #fff; }

.bk-btn-disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.35) !important;
  pointer-events: none;
  opacity: 1;
}
.bk-btn-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }

/* ── Right Panel ── */
.bk-right {
  flex: 1;
  min-height: 100vh;
  position: relative;
}

/* Start view: transparent – shows the background photo */
.bk-start-view {
  position: absolute;
  inset: 0;
  /* Intentionally transparent – photo visible through .bk-wrap background */
}

/* Content views: white overlay */
.bk-content-view {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  background: rgba(250, 248, 245, 0.97);
  padding: 48px 80px 40px;
  box-sizing: border-box;
}
.bk-content-view.visible { display: flex; }

.bk-step-title {
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 34px;
  color: #cc4429;
  margin-bottom: 24px;
  line-height: 1.0;
}

/* Calendar */
.bk-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bk-cal-month {
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #cc4429;
  letter-spacing: 1px;
}
.bk-cal-nav-btns { display: flex; gap: 4px; }
.bk-cal-nav {
  width: 34px; height: 34px;
  background: transparent;
  border: 0.5px solid #cc4429;
  cursor: pointer;
  font-size: 18px;
  color: #cc4429;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.bk-cal-nav:hover { background: #fdf0ed; }

.bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: clamp(48px, 5vw, 72px);
  gap: 6px;
}
.bk-day-name {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #cc4429;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  padding: 6px 0 14px;
}
.bk-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 300;
  cursor: default;
  color: #d0ccc9;
  gap: 3px;
  border: 0.5px solid #ddd8d5;
  transition: all 0.15s;
}
/* Empty offset cells before day 1 */
.bk-day-empty { }
/* Available (future, bookable) */
.bk-day-cell.available { color: #cc4429; border-color: #cc4429; cursor: pointer; }
.bk-day-cell.available:hover { background: #fdf0ed; }
.bk-day-cell.selected { background: #cc4429 !important; border-color: #cc4429 !important; color: #fff !important; }
.bk-day-cell.today { border: 2px solid #cc4429 !important; color: #cc4429; }
.bk-day-cell.today.selected { color: #fff; }
.bk-day-cell.fully-booked { color: #cc4429; border-color: #cc4429; cursor: not-allowed; }
.bk-day-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.2px;
  color: #cc4429;
  text-transform: uppercase;
  line-height: 1;
}
.bk-day-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #cc4429;
  border-radius: 50%;
  flex-shrink: 0;
}
.bk-day-cell.selected .bk-day-badge,
.bk-day-cell.selected .bk-day-badge::before { color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8); }

/* Time Grid */
.bk-time-grid-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}
.bk-time-slot {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid #cc4429;
  background: transparent;
  cursor: pointer;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #cc4429;
  text-align: center;
  transition: all 0.15s;
}
.bk-time-slot:hover { background: #fdf0ed; }
.bk-time-slot.selected { background: #cc4429; border-color: #cc4429; color: #fff; }
.bk-time-slot.booked { opacity: 0.2; cursor: not-allowed; background: transparent; }
/* Time page title */
.bk-time-title { font-size: 40px; margin-bottom: 32px; }

/* Form */
.bk-form { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bk-form-group { display: flex; flex-direction: column; gap: 12px; }
.bk-form-group label {
  font-size: 20px;
  font-weight: 400;
  color: #cc4429;
  letter-spacing: 0;
  text-transform: none;
}
.bk-form-group input {
  padding: 12px 0 10px;
  border: none;
  border-bottom: 1.42px solid #c8c0bb;
  background: transparent;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #4c190f;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.bk-form-group input::placeholder { color: rgba(76, 25, 15, 0.3); }
.bk-form-group input:focus { border-bottom-color: #cc4429; }
/* Form page title override */
.bk-form-title { font-size: 40px; margin-bottom: 32px; }
.field-error { font-size: 11px; color: #dc2626; margin-top: 2px; }
.bk-update-notice {
  font-size: 14px; color: #888;
  background: #f5f0ee; border-left: 3px solid #cc4429;
  padding: 12px 16px; margin: 0;
}

/* Selection info bar */
.bk-selection-info {
  font-size: 13px; color: #888; background: #f0ede9;
  padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.bk-selection-info strong { color: #1a1a1a; }

/* ── Summary (Özet) ── */
.bk-summary-title { font-size: 40px; font-weight: 400; color: #cc4429; margin-bottom: 32px; }

.bk-sum-card {
  border: 0.5px solid #cc4429;
  margin-bottom: 20px;
}
.bk-sum-card-label {
  font-size: 17.5px;
  font-weight: 400;
  color: #cc4429;
  padding: 24px 40px 16px;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bk-sum-card-sep {
  height: 1px;
  background: rgba(204,68,41,0.18);
  margin: 0 40px;
}
.bk-sum-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 28px 40px 32px;
  gap: 24px;
}
.bk-sum-col { display: flex; flex-direction: column; gap: 20px; }
.bk-sum-row { display: flex; align-items: flex-start; gap: 16px; }
.bk-sum-icon {
  width: 24px; height: 24px;
  margin-top: 4px;
  flex-shrink: 0;
  filter: invert(31%) sepia(85%) saturate(800%) hue-rotate(348deg) brightness(85%);
}
.bk-sum-val {
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #cc4429;
  line-height: 1.1;
}
.bk-sum-thin { font-weight: 100; letter-spacing: 0.28px; }

/* ONAYLA enabled on step 4 */
.bk-btn.bk-btn-confirm {
  background: #cc4429 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  cursor: pointer;
  backdrop-filter: none;
}
.bk-btn.bk-btn-confirm:hover { background: #a8361f !important; }

/* Right footer */
.bk-right-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.btn-devam {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 32px;
  background: #f0e2df;
  color: #ffffff;
  border: none;
  cursor: default;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  transition: all 0.2s;
  pointer-events: none;
}
.btn-devam.enabled { background: #cc4429; color: #fff; cursor: pointer; pointer-events: auto; }
.btn-devam.enabled:hover { background: #a83620; }

/* Success / Error */
.bk-success, .bk-error { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.bk-success-icon { font-size: 52px; line-height: 1; }
.bk-success-title { font-size: 36px; font-weight: 400; color: #1a1a1a; line-height: 1.1; }
.bk-success-desc { font-size: 14px; color: #888; line-height: 1.6; }
.bk-success-detail { font-size: 14px; color: #1a1a1a; font-weight: 500; padding: 14px 18px; background: #f0ede9; margin-top: 8px; display: inline-block; }

/* ══════════════════════════════════════════
   Existing Appointment — Full-Screen Page
══════════════════════════════════════════ */

/* Outer wrapper: covers everything */
.appt-screen {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 500;
  overflow: hidden;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Background video fills the screen */
.appt-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Left panel — dark glassmorphism, same proportions as bk-left */
.appt-screen-left {
  position: relative;
  z-index: 1;
  width: 469px;
  flex-shrink: 0;
  min-height: 100dvh;
  background-color: rgba(16, 6, 2, 0.72);
  backdrop-filter: blur(40px) brightness(65%);
  -webkit-backdrop-filter: blur(40px) brightness(65%);
  padding: clamp(20px, 3.5vh, 44px) 52px clamp(20px, 3.5vh, 44px) 56px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Right side — transparent, video shows through */
.appt-screen-right { flex: 1; position: relative; z-index: 1; }

/* Logo */
.appt-screen-logo          { margin-bottom: clamp(20px, 4vh, 56px); }
.appt-screen-logo img      { width: clamp(80px, 10vh, 122px); height: auto; }

/* "Randevunuz oluşturuldu" */
.appt-screen-title {
  font-size: clamp(36px, 6vh, 64px);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.0;
  letter-spacing: 0;
  margin-bottom: clamp(20px, 4vh, 48px);
}

/* Info rows (date / time / name) */
.appt-screen-info { display: flex; flex-direction: column; margin-bottom: clamp(16px, 3vh, 40px); }

.appt-screen-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(8px, 1.5vh, 14px) 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.25);
}

.appt-screen-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

.appt-screen-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.appt-screen-text {
  flex: 1;
  text-align: right;
  font-size: clamp(15px, 2.2vh, 24px);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1.3;
}

.appt-screen-connector {
  width: 2px;
  height: clamp(20px, 3vh, 40px);
  background: rgba(255,255,255,0.35);
  margin-left: 6px;
}

/* "Bu randevuyu güncellemek…" */
.appt-screen-question {
  font-size: clamp(13px, 1.8vh, 20px);
  font-weight: 300;
  color: rgba(255,255,255,0.80);
  line-height: 1.45;
  margin-bottom: clamp(14px, 2.5vh, 28px);
}

/* Action buttons */
.appt-screen-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

/* GÜNCELLE — white bg, red text */
.appt-btn-update {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 2vh, 20px) 24px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(14px, 1.8vh, 21px);
  font-weight: 500;
  color: #cc4429;
  letter-spacing: 5.25px;
  text-transform: uppercase;
  transition: background 0.2s;
}
.appt-btn-update:hover { background: #f5f0ee; }

/* İPTAL ET — red bg, white text */
.appt-btn-cancel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 2vh, 20px) 24px;
  background: #cc4429;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(14px, 1.8vh, 21px);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 5.25px;
  text-transform: uppercase;
  transition: background 0.2s;
}
.appt-btn-cancel-trigger:hover { background: #b33d25; }

/* İptal limiti mesajı */
.appt-cancel-limit-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 2px;
  color: rgba(255,255,255,0.80);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.appt-cancel-limit-msg a {
  color: #e87b5e;
  text-decoration: none;
  font-weight: 500;
}
.appt-cancel-limit-msg a:hover { text-decoration: underline; }

/* Cancel confirmation modal */
.appt-cancel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "SuisseBP", "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.appt-cancel-box {
  background: #ffffff;
  padding: 48px 52px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.appt-cancel-title {
  font-size: 32px;
  font-weight: 400;
  color: #cc4429;
  letter-spacing: 0;
}
.appt-cancel-desc {
  font-size: 18px;
  font-weight: 300;
  color: #4c190f;
  line-height: 1.55;
}
.appt-cancel-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.appt-cancel-confirm-btn {
  padding: 18px 24px;
  background: #cc4429;
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}
.appt-cancel-confirm-btn:hover { background: #b33d25; }
.appt-cancel-back-btn {
  padding: 18px 24px;
  background: transparent;
  border: 1.5px solid #cc4429;
  color: #cc4429;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.appt-cancel-back-btn:hover { background: #fdf0ed; }

/* Responsive */
@media (max-width: 768px) {
  .appt-screen-left  { width: 100%; min-height: 100dvh; padding: 32px 28px; }
  .appt-screen-right { display: none; }
  .appt-screen-title { font-size: 44px; margin-bottom: 32px; }
  .appt-screen-logo  { margin-bottom: 36px; }
  .appt-screen-logo img { width: 90px; }
  .appt-screen-text  { font-size: 20px; }
  .appt-btn-update, .appt-btn-cancel-trigger { font-size: 16px; letter-spacing: 4px; padding: 17px 20px; }
}
@media (max-width: 480px) {
  .appt-screen-left  { padding: 24px 20px; }
  .appt-screen-title { font-size: 36px; margin-bottom: 24px; }
  .appt-screen-logo img { width: 75px; }
  .appt-screen-text  { font-size: 17px; }
  .appt-screen-question { font-size: 16px; }
  .appt-btn-update, .appt-btn-cancel-trigger { font-size: 14px; letter-spacing: 3px; padding: 15px 18px; }
  .appt-cancel-box   { padding: 32px 28px; }
  .appt-cancel-title { font-size: 26px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Booking Pages
   1280 → 1024 → 768 → 480
══════════════════════════════════════════ */

/* ── 1280px: Geniş laptop / küçük masaüstü ── */
@media (max-width: 1280px) {
  .bk-left         { width: 380px; padding: 36px 40px 32px; }
  .bk-logo         { margin-bottom: 48px; }
  .bk-logo img     { width: 110px; }
  .bk-title        { font-size: 52px; }
  .bk-subtitle     { font-size: 20px; }
  .bk-step-row     { width: auto; }
  .bk-step-sep     { width: auto; }
  .bk-step-label   { font-size: 20px; }
  .bk-content-view { padding: 40px 56px 36px; }
  .bk-step-title   { font-size: 30px; }
  .bk-form-title   { font-size: 34px; }
  .bk-time-title   { font-size: 34px; }
  .bk-cal-month    { font-size: 20px; }
  .bk-cal-grid     { gap: 8px; }
  .bk-day-cell     { font-size: 18px; }
  .bk-day-name     { font-size: 10px; letter-spacing: 1.8px; }
  .bk-time-slot    { height: 80px; font-size: 24px; }
  .bk-time-grid-wrap { gap: 14px; }
  .bk-form         { gap: 36px; }
  .bk-form-row     { gap: 24px; }
  .bk-form-group label { font-size: 17px; }
  .bk-form-group input { font-size: 17px; }
  .bk-btn          { padding: 18px 22px; font-size: 17px; letter-spacing: 4px; }
  .btn-devam       { padding: 18px 24px; font-size: 13px; letter-spacing: 3.5px; }
  .bk-sum-val      { font-size: 22px; }
  .bk-summary-title { font-size: 34px; }
}

/* ── 1024px: İki sütun korunur, sol panel daralır ── */
@media (max-width: 1024px) {

  /* Video her zaman görünür */
  .bk-bg-video {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    object-fit: cover; z-index: 0;
  }

  /* Wrap: yatay iki sütun korunuyor, şeffaf */
  .bk-wrap {
    flex-direction: row;
    background: transparent;
    min-height: 100dvh;
  }

  /* Sol panel: 210px */
  .bk-left {
    width: 210px;
    flex-shrink: 0;
    min-height: 100dvh;
    padding: 28px 18px 22px;
    backdrop-filter: blur(24px) brightness(58%);
    -webkit-backdrop-filter: blur(24px) brightness(58%);
    background: rgba(10, 4, 2, 0.55);
  }
  .bk-wrap.step-active .bk-left {
    background: #cc4429;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Logo */
  .bk-logo     { margin-bottom: 22px; }
  .bk-logo img { width: 86px; }

  /* Başlık */
  .bk-title    { font-size: 34px; margin-bottom: 6px; }
  .bk-subtitle { font-size: 12px; margin-bottom: 16px; line-height: 1.4; }

  /* Steps: dikey düzen korunuyor, sadece ölçeklenir */
  .bk-steps       { padding-left: 26px; }
  .bk-step-row    { width: auto; height: 38px; }
  .bk-step-sep    { width: auto; }
  .bk-step-dot    { left: -26px; width: 13px; height: 13px; top: 2px; }
  .bk-step-connector { left: -20px; top: 17px; height: 32px; }
  .bk-step-label  { font-size: 13px; }

  /* Nav: dikey sütun, tam genişlik */
  .bk-nav { margin-top: auto; flex-direction: column; gap: 6px; }
  .bk-btn { padding: 14px 12px; font-size: 11px; letter-spacing: 2px; width: 100%; }

  /* Sağ panel: başlangıçta şeffaf, step aktifken beyaz */
  .bk-right { background: transparent; min-height: 100dvh; }
  .bk-wrap.step-active .bk-right { background: rgba(250,248,245,0.98); }

  /* Content view */
  .bk-content-view {
    min-height: 100dvh;
    padding: 32px 26px 24px;
    background: rgba(250,248,245,0.98);
  }
  .bk-content-view.visible { display: flex; }

  /* İçerik başlıkları */
  .bk-step-title    { font-size: 24px; margin-bottom: 16px; }
  .bk-form-title    { font-size: 26px; margin-bottom: 20px; }
  .bk-time-title    { font-size: 26px; margin-bottom: 16px; }
  .bk-summary-title { font-size: 26px; margin-bottom: 16px; }

  /* Takvim */
  .bk-cal-header  { margin-bottom: 12px; }
  .bk-cal-month   { font-size: 18px; }
  .bk-cal-grid    { gap: 5px; }
  .bk-day-cell    { font-size: clamp(11px, 1.8vw, 16px); }
  .bk-day-name    { font-size: 9px; letter-spacing: 1.2px; padding: 4px 0 10px; }

  /* Saat slotları */
  .bk-time-grid-wrap { gap: 10px; }
  .bk-time-slot      { height: 70px; font-size: 22px; }

  /* Form */
  .bk-form       { gap: 28px; }
  .bk-form-row   { gap: 20px; }
  .bk-form-group label { font-size: 15px; }
  .bk-form-group input { font-size: 15px; }

  /* DEVAM ET */
  .bk-right-footer { padding-top: 16px; }
  .btn-devam       { padding: 14px 18px; font-size: 11px; letter-spacing: 3px; }

  /* Özet */
  .bk-sum-card-label { font-size: 13px; padding: 14px 20px 10px; }
  .bk-sum-card-sep   { margin: 0 20px; }
  .bk-sum-card-body  { padding: 16px 20px 20px; gap: 14px; }
  .bk-sum-val        { font-size: 20px; }
  .bk-sum-icon       { width: 20px; height: 20px; }
}

/* ── 768px: Telefon — dikey düzen, kompakt header üstte ── */
@media (max-width: 768px) {

  /* Wrap: dikey yığın */
  .bk-wrap {
    flex-direction: column;
    background: transparent;
    min-height: 100dvh;
  }

  /* Sol panel → üstte kompakt header, yüksekliği içeriğe göre */
  .bk-left {
    width: 100%;
    min-height: auto;
    padding: 16px 20px 14px;
    backdrop-filter: blur(20px) brightness(55%);
    -webkit-backdrop-filter: blur(20px) brightness(55%);
    background: rgba(10, 4, 2, 0.6);
    flex-shrink: 0;
  }
  .bk-wrap.step-active .bk-left {
    background: #cc4429;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bk-logo     { margin-bottom: 10px; }
  .bk-logo img { width: 68px; }
  .bk-title    { font-size: 26px; margin-bottom: 3px; }
  .bk-subtitle { font-size: 11px; margin-bottom: 12px; line-height: 1.4; }

  /* Steps: yatay sıra */
  .bk-steps {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    position: static;
    gap: 0;
    margin-bottom: 0;
  }
  .bk-step-row {
    position: relative;
    width: auto;
    height: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    opacity: 0.4;
  }
  .bk-step-row.active { opacity: 1; }
  .bk-step-row.done   { opacity: 0.75; }

  .bk-step-dot {
    position: static;
    left: auto; top: auto;
    width: 10px; height: 10px;
    flex-shrink: 0;
  }
  .bk-step-row:not(.active):not(.done) .bk-step-dot {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.6);
  }
  .bk-step-icon { display: none; }
  .bk-step-label {
    position: static;
    right: auto; top: auto;
    font-size: 9px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 1.2;
  }
  .bk-step-sep       { display: none; }
  .bk-step-connector { display: none; }

  /* Nav: yatay yan yana */
  .bk-nav { margin-top: 12px; flex-direction: row; gap: 8px; }
  .bk-btn { width: auto; flex: 1; padding: 13px 14px; font-size: 11px; letter-spacing: 2px; }

  /* Sağ panel: başlangıçta şeffaf, step aktifken beyaz */
  .bk-right { background: transparent; min-height: 0; flex: 1; }
  .bk-wrap.step-active .bk-right { background: rgba(250,248,245,0.98); }

  /* Start view: normal akışta, şeffaf, video görünür */
  .bk-start-view {
    position: relative;
    inset: auto;
    min-height: 55vh;
    background: transparent;
  }

  /* Content view */
  .bk-content-view {
    position: relative;
    min-height: 60vh;
    padding: 24px 20px 20px;
    background: rgba(250,248,245,0.98);
    flex: 1;
    overflow-y: auto;
  }
  .bk-content-view.visible { display: flex; }

  /* İçerik başlıkları */
  .bk-step-title    { font-size: 22px; margin-bottom: 14px; }
  .bk-form-title    { font-size: 24px; margin-bottom: 18px; }
  .bk-time-title    { font-size: 24px; margin-bottom: 14px; }
  .bk-summary-title { font-size: 24px; margin-bottom: 14px; }

  /* Takvim */
  .bk-cal-header  { margin-bottom: 12px; }
  .bk-cal-month   { font-size: 18px; }
  .bk-cal-grid    { gap: 5px; }
  .bk-day-cell    { font-size: clamp(12px, 2.8vw, 18px); }
  .bk-day-name    { font-size: 9px; letter-spacing: 1.2px; padding: 4px 0 10px; }
  .bk-cal-nav     { width: 32px; height: 32px; font-size: 18px; }

  /* Saat slotları */
  .bk-time-grid-wrap { gap: 8px; }
  .bk-time-slot      { height: 68px; font-size: 22px; }

  /* Form */
  .bk-form       { gap: 24px; }
  .bk-form-row   { gap: 18px; }
  .bk-form-group { gap: 8px; }
  .bk-form-group label { font-size: 14px; }
  .bk-form-group input { font-size: 14px; padding: 9px 0; }

  /* DEVAM ET */
  .bk-right-footer { padding-top: 16px; }
  .btn-devam       { padding: 14px 18px; font-size: 11px; letter-spacing: 2.5px; }

  /* Özet */
  .bk-sum-card-label { font-size: 13px; padding: 13px 18px 10px; }
  .bk-sum-card-sep   { margin: 0 18px; }
  .bk-sum-card-body  { grid-template-columns: 1fr 1fr; padding: 14px 18px 18px; gap: 12px; }
  .bk-sum-val        { font-size: 18px; }
  .bk-sum-icon       { width: 18px; height: 18px; }
}

/* ── 480px: Küçük telefon ── */
@media (max-width: 480px) {
  .bk-left     { padding: 13px 16px 12px; }
  .bk-logo img { width: 58px; }
  .bk-title    { font-size: 22px; }
  .bk-subtitle { display: none; }

  .bk-step-label { font-size: 8px !important; }
  .bk-step-dot   { width: 9px !important; height: 9px !important; }

  .bk-nav { margin-top: 10px; gap: 6px; }
  .bk-btn { padding: 11px 12px; font-size: 10px; letter-spacing: 1.5px; }

  .bk-content-view { padding: 20px 16px 18px; }

  .bk-step-title    { font-size: 19px; margin-bottom: 12px; }
  .bk-form-title    { font-size: 20px; margin-bottom: 14px; }
  .bk-time-title    { font-size: 20px; margin-bottom: 12px; }
  .bk-summary-title { font-size: 20px; margin-bottom: 14px; }

  .bk-cal-grid    { gap: 4px; }
  .bk-day-cell    { font-size: clamp(11px, 3vw, 16px); }
  .bk-day-name    { font-size: 8px; letter-spacing: 0.8px; padding: 3px 0 8px; }
  .bk-cal-month   { font-size: 16px; }
  .bk-cal-nav     { width: 28px; height: 28px; font-size: 16px; }
  .bk-day-badge   { font-size: 7px; }
  .bk-day-badge::before { width: 4px; height: 4px; }

  .bk-time-grid-wrap { gap: 6px; }
  .bk-time-slot      { height: 60px; font-size: 20px; }

  .bk-form-row   { grid-template-columns: 1fr; gap: 18px; }
  .bk-form       { gap: 20px; }
  .bk-form-group label { font-size: 13px; }
  .bk-form-group input { font-size: 14px; padding: 8px 0; }

  .bk-right-footer { justify-content: stretch; padding-top: 12px; }
  .btn-devam {
    width: 100%;
    justify-content: center;
    padding: 13px 14px;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .bk-sum-card         { margin-bottom: 10px; }
  .bk-sum-card-label   { padding: 10px 14px 8px; font-size: 12px; }
  .bk-sum-card-sep     { margin: 0 14px; }
  .bk-sum-card-body    { grid-template-columns: 1fr; padding: 12px 14px 16px; gap: 10px; }
  .bk-sum-row          { gap: 8px; }
  .bk-sum-val          { font-size: 16px; }
  .bk-sum-icon         { width: 16px; height: 16px; }
}