.booking-page {
  padding: 54px 0 78px;
  background: #f8f5f1
}

.booking-planner {
  max-width: 930px;
  padding: 30px 34px 0;
  border-radius: 26px 26px 0 0;
  background: #edd5c8;
  box-shadow: 0 24px 50px #67463514
}

.booking-intro h1 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.025em
}

.booking-intro>p:not(.eyebrow) {
  margin: 12px 0 20px;
  color: #795e53;
  font-size: 13px
}

.booking-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 274px;
  gap: 20px;
  padding: 18px 20px;
  background: #fffaf6
}

.booking-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-content: start
}

.booking-fields label {
  display: grid;
  gap: 6px;
  color: #442d24;
  font-size: 12px;
  font-weight: 700
}

.booking-fields select,
.booking-fields input,
.booking-fields output {
  box-sizing: border-box;
  width: 100%;
  height: 37px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffdfb;
  padding: 0 12px;
  color: #654d43;
  font: inherit;
  font-size: 13px
}

.booking-fields output {
  display: flex;
  align-items: center;
  color: #765c51
}

.booking-fields select:disabled {
  color: #a89891;
  background: #fbf8f5
}

.booking-message {
  grid-column: 1/-1;
  min-height: 16px
}

.booking-summary {
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fffdfa;
  padding: 21px 17px
}

.booking-summary dl {
  margin: 13px 0 19px
}

.booking-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px
}

.booking-summary dt {
  color: #80675c
}

.booking-summary dd {
  margin: 0;
  color: #4c3228;
  font-weight: 700;
  text-align: right
}

.booking-summary .button {
  border-radius: 10px;
  padding: 12px;
  background: #bda295
}

.booking-summary .button:disabled {
  cursor: not-allowed;
  opacity: .62
}

.booking-summary .button:not(:disabled) {
  background: var(--primary)
}

@media(max-width:760px) {
  .booking-page {
    padding: 24px 0 45px
  }

  .booking-planner {
    width: min(100% - 28px, 930px);
    padding: 26px 17px 0
  }

  .booking-surface {
    grid-template-columns: 1fr;
    padding: 16px
  }

  .booking-summary {
    margin-top: 4px
  }

  .booking-intro h1 {
    font-size: 31px
  }
}

@media(max-width:480px) {
  .booking-fields {
    grid-template-columns: 1fr
  }

  .booking-intro>p:not(.eyebrow) {
    line-height: 1.6
  }
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 44px
}

.steps-grid article {
  border-top: 1px solid var(--line);
  padding-top: 19px
}

.steps-grid i {
  color: #b78976;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-style: normal
}

.steps-grid h3 {
  margin: 15px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500
}

.steps-grid p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55
}

.about-steps>div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 42px
}

.about-steps article {
  border-top: 1px solid var(--line);
  padding-top: 22px
}

.about-steps i {
  color: #b78976;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-style: normal
}

.about-steps h3 {
  margin: 14px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500
}

.about-steps>.button {
  margin-top: 38px
}

.about-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  padding: 23px 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  list-style: none
}

.about-faq summary::-webkit-details-marker {
  display: none
}

.about-faq summary b {
  color: var(--primary);
  font-size: 20px;
  font-weight: 400
}

.campaign-showcase h2,
.campaign-membership h2,
.campaign-steps h2,
.campaign-faq h2 {
  font-size: clamp(37px, 4vw, 58px);
  margin: 10px 0
}

.campaign-showcase header>p:not(.eyebrow),
.campaign-membership p,
.campaign-steps article p,
.campaign-faq>div>p {
  color: #755f54
}

.campaign-steps {
  background: #0D0B09
}

.campaign-steps .wrap {
  padding-top: 68px;
  padding-bottom: 68px
}

.campaign-steps .wrap>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 35px
}

.campaign-steps article {
  border-top: 1px solid var(--line);
  padding-top: 20px
}

.campaign-steps article>b {
  font: 28px Georgia, serif;
  color: #c69d8e
}

.campaign-steps h3 {
  font: 23px Georgia, serif;
  font-weight: 500;
  margin: 15px 0
}

.campaign-steps article p {
  font-size: 13px;
  line-height: 1.7
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 21px 25px 21px 0;
  font-weight: 700;
  position: relative
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 20px;
  color: #a0705e
}

.faq-list details[open] summary::after {
  content: '−'
}

.contact-faq summary {
  position: relative;
  cursor: pointer;
  padding: 18px 30px 18px 0;
  font-size: 14px;
  font-weight: 700;
  list-style: none
}

.contact-faq summary:after {
  content: '+';
  position: absolute;
  right: 0;
  color: var(--primary);
  font-size: 20px
}

.user-preview summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  border-radius: 999px;
  padding: 4px 7px 4px 4px
}

.user-preview summary::-webkit-details-marker {
  display: none
}

.user-preview summary:hover {
  background: #f4ece6
}

.user-preview summary span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ead9cf;
  color: #805745;
  font: 600 13px Georgia, serif
}

.user-preview summary b {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px
}

.user-preview summary i {
  font-size: 11px;
  color: #8d7164;
  font-style: normal
}

@media(max-width:700px) {
  .account-editor-fields {
    grid-template-columns: 1fr
  }

  .account-editor-fields>span {
    display: none
  }

  .user-preview summary b {
    display: none
  }

  .user-menu {
    right: -5px
  }
}

/* Randevu sonrası tek sayfa ödeme adımı */
.appointment-payment-page {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
  gap: 22px;
  max-width: 1120px;
  margin: 42px auto;
  padding: 0 20px;
  box-sizing: border-box
}

.appointment-payment-main,
.appointment-payment-summary {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fffdfa;
  padding: 34px;
  box-shadow: 0 14px 38px #482d2010
}

.appointment-payment-main h1 {
  margin: 7px 0 10px;
  color: #34221b;
  font: 500 38px Georgia, serif
}

.appointment-payment-intro {
  margin: 0 0 27px;
  color: #755e53;
  line-height: 1.65
}

.appointment-payment-detail {
  min-height: 120px;
  margin-top: 17px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fdf8f5;
  color: #4d352b
}

.appointment-payment-detail b {
  display: block;
  font: 500 20px Georgia, serif
}

.appointment-payment-detail p {
  margin: 9px 0;
  color: #785f54;
  line-height: 1.6
}

.bank-transfer-detail small,
.appointment-payment-summary>small {
  color: #8a7165;
  font-size: 12px;
  line-height: 1.5
}

.appointment-payment-summary {
  align-self: start;
  background: #f5e8e0
}

.appointment-payment-summary>p {
  margin: 0;
  color: #926957;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em
}

.appointment-payment-summary h2 {
  margin: 9px 0 23px;
  color: #35231c;
  font: 500 27px/1.15 Georgia, serif
}

.appointment-payment-summary dl {
  display: grid;
  gap: 13px;
  margin: 0 0 19px
}

.appointment-payment-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line)
}

.appointment-payment-summary dt {
  color: #846b5e;
  font-size: 12px
}

.appointment-payment-summary dd {
  margin: 0;
  color: #3d2921;
  font-weight: 800;
  text-align: right
}

.appointment-payment-summary .appointment-total {
  margin-top: 5px;
  padding: 15px 0 0;
  border-bottom: 0
}

.appointment-payment-summary .appointment-total dt {
  font-size: 14px;
  font-weight: 800
}

.appointment-payment-summary .appointment-total dd {
  color: #875947;
  font-size: 23px
}

.appointment-payment-main .form-message {
  min-height: 20px;
  margin-top: 14px;
  font-size: 13px
}

@media(max-width:800px) {
  .appointment-payment-page {
    grid-template-columns: 1fr;
    margin: 25px auto
  }

  .appointment-payment-summary {
    order: -1
  }
}

@media(max-width:560px) {
  .appointment-payment-page {
    padding: 0 14px
  }

  .appointment-payment-main,
  .appointment-payment-summary {
    padding: 23px 19px;
    border-radius: 19px
  }

  .appointment-payment-main h1 {
    font-size: 31px
  }

  .payment-method-grid {
    grid-template-columns: 1fr
  }

  .payment-method-card {
    min-height: auto
  }

  .bank-transfer-detail dl div {
    grid-template-columns: 1fr;
    gap: 4px
  }

  .payment-confirm-row {
    flex-direction: column
  }

  .payment-confirm-row .button {
    width: 100%;
    box-sizing: border-box
  }
}

/* Ödeme adımını Belle Aura renkleriyle uyumlu tutar. */
.appointment-payment-page {
  max-width: 1180px
}

.appointment-payment-main {
  background: var(--card-background, #fffdf9)
}

.appointment-payment-summary {
  background: #f8eee8
}

.staff-overview {
  max-width: 1120px
}

.staff-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px
}

.staff-welcome h2 {
  margin: 7px 0;
  color: #37231b;
  font: 500 32px Georgia, serif
}

.staff-welcome p:not(.eyebrow) {
  margin: 0;
  color: #796258;
  font-size: 13px;
  line-height: 1.6
}

.staff-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.staff-summary-grid article {
  min-height: 130px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdfa;
  padding: 20px;
  box-shadow: 0 10px 25px #5533210a
}

.staff-summary-grid span {
  display: block;
  color: #916a5a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em
}

.staff-summary-grid b {
  display: block;
  margin: 14px 0 4px;
  color: #3b271f;
  font: 500 38px Georgia, serif
}

.staff-summary-grid small {
  color: #80695e;
  font-size: 12px
}

.staff-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
  margin-top: 18px
}

.staff-upcoming-card,
.staff-quick-card {
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fffdfa;
  padding: 23px
}

.staff-upcoming-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px
}

.staff-upcoming-card h3,
.staff-quick-card h3 {
  margin: 5px 0;
  color: #39251e;
  font: 500 25px Georgia, serif
}

.staff-upcoming-card header>a {
  color: #8d604e;
  font-size: 12px;
  font-weight: 800
}

.staff-upcoming-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px 0
}

.staff-upcoming-row time b,
.staff-upcoming-row time span {
  display: block
}

.staff-upcoming-row time b {
  color: #7f5545;
  font-size: 16px
}

.staff-upcoming-row time span {
  margin-top: 3px;
  color: #967b6d;
  font-size: 10px
}

.staff-upcoming-row strong,
.staff-upcoming-row small {
  display: block
}

.staff-upcoming-row strong {
  color: #432d23;
  font-size: 14px
}

.staff-upcoming-row small {
  margin-top: 4px;
  color: #80685c;
  font-size: 12px
}

.staff-upcoming-row em {
  border-radius: 999px;
  background: #f1e4dc;
  padding: 6px 9px;
  color: #865d4d;
  font-size: 10px;
  font-style: normal;
  font-weight: 800
}

.staff-quick-card>a {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 13px 0;
  color: #684b3f
}

.staff-quick-card>a>span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #f0e0d7;
  color: #936552
}

.staff-quick-card a b,
.staff-quick-card a small {
  display: block
}

.staff-quick-card a b {
  font-size: 13px
}

.staff-quick-card a small {
  margin-top: 3px;
  color: #8d7569;
  font-size: 11px
}

@media(max-width:840px) {
  .staff-summary-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .staff-overview-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px) {
  .staff-welcome {
    align-items: flex-start;
    flex-direction: column
  }

  .staff-summary-grid {
    grid-template-columns: 1fr 1fr
  }

  .staff-summary-grid article {
    min-height: 110px;
    padding: 16px
  }

  .staff-upcoming-row {
    grid-template-columns: 82px 1fr
  }

  .staff-upcoming-row em {
    display: none
  }

  .staff-upcoming-card,
  .staff-quick-card {
    padding: 18px
  }
}

.staff-filter-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 18px
}

.staff-filter-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdfa;
  padding: 9px 14px;
  color: #755b50;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer
}

.staff-filter-tabs button.active {
  border-color: var(--line);
  background: #956554;
  color: #fff
}

.staff-branch-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.staff-branch-list article {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdfa;
  padding: 20px
}

.staff-branch-list article>span {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #efe0d7;
  color: #895d4d;
  font-size: 21px
}

.staff-branch-list h3 {
  margin: 0;
  color: #402b22;
  font: 500 21px Georgia, serif
}

.staff-branch-list p {
  margin: 6px 0 0;
  color: #80695f;
  font-size: 12px;
  line-height: 1.5
}

@media(max-width:620px) {
  .staff-branch-list {
    grid-template-columns: 1fr
  }

  .staff-filter-tabs {
    overflow: auto;
    padding-bottom: 3px
  }

  .staff-filter-tabs button {
    white-space: nowrap
  }
}

.staff-workspace {
  max-width: 1120px
}

.staff-appointment-list,
.staff-service-list,
.days-off-list {
  display: grid;
  gap: 12px
}

.staff-appointment-list article,
.days-off-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fffdfa
}

.staff-appointment-list small,
.staff-service-list small {
  color: #8d6757;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em
}

.staff-appointment-list h3,
.staff-service-list h3 {
  margin: 5px 0;
  color: #39251e;
  font: 500 21px Georgia, serif
}

.staff-appointment-list p,
.staff-service-list p,
.days-off-list p {
  margin: 0;
  color: #796359;
  font-size: 13px
}

.staff-appointment-list label {
  display: grid;
  gap: 5px;
  color: #735e54;
  font-size: 11px;
  font-weight: 700
}

.staff-appointment-list select {
  min-width: 145px;
  height: 37px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 8px
}

.staff-service-list {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.staff-service-list article {
  display: flex;
  gap: 14px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdfa
}

.staff-service-list article>span {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ead5c9;
  color: #865845;
  font: 500 20px Georgia, serif
}

@media(max-width:760px) {
  .staff-service-list {
    grid-template-columns: 1fr
  }

  .staff-appointment-list article {
    align-items: flex-start;
    flex-direction: column
  }

  .working-hours-form>label {
    grid-template-columns: 1fr 1fr
  }

  .working-hours-form label span {
    grid-column: 1/-1
  }

  .days-off-form {
    grid-template-columns: 1fr
  }

  .days-off-form .button {
    width: 100%
  }
}

.booking-time-picker {
  grid-column: 1/-1;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdfa;
  padding: 14px
}

.booking-time-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px
}

.booking-time-picker-head b {
  display: block;
  color: #412b23;
  font-size: 13px
}

.booking-time-picker-head small {
  display: block;
  margin-top: 3px;
  color: #846b60;
  font-size: 11px
}

.booking-slot-legend {
  display: flex;
  gap: 10px;
  color: #7a6257;
  font-size: 10px
}

.booking-slot-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap
}

.booking-slot-legend i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #4d8865
}

.booking-slot-legend .busy {
  background: #d9c9c0
}

.booking-time-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px
}

.booking-time-slots>p {
  grid-column: 1/-1;
  margin: 3px 0;
  color: #887167;
  font-size: 12px
}

.booking-slot {
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #473129;
  cursor: pointer;
  transition: .18s ease;
  text-align: left;
  padding: 9px 11px
}

.booking-slot b,
.booking-slot small {
  display: block
}

.booking-slot b {
  font-size: 13px
}

.booking-slot small {
  margin-top: 4px;
  font-size: 10px;
  color: #668570
}

.booking-slot:hover,
.booking-slot.is-selected {
  border-color: var(--line);
  background: #f2e5dd;
  box-shadow: 0 5px 14px #6d403717
}

.booking-slot.is-selected {
  background: var(--primary);
  color: #fff
}

.booking-slot.is-selected small {
  color: #fff
}

.booking-slot.is-busy {
  cursor: not-allowed;
  border-color: var(--line);
  background: #f7f4f2;
  color: #ad9d94
}

.booking-slot.is-busy small {
  color: #ad9d94
}

.booking-time-native {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
  width: 1px !important;
  height: 1px !important
}

@media(max-width:420px) {
  .booking-time-slots {
    grid-template-columns: 1fr
  }

  .booking-slot-legend {
    flex-wrap: wrap
  }
}

.booking-planner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 58px rgba(91, 57, 41, .14)
}

.booking-planner::after {
  position: absolute;
  right: -55px;
  bottom: -75px;
  width: 210px;
  height: 210px;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(255, 255, 255, .12), 0 0 0 48px rgba(255, 255, 255, .08);
  content: '';
  pointer-events: none
}

.booking-planner>* {
  position: relative;
  z-index: 1
}
.booking-account-modal { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(43,29,23,.48) }
.booking-account-dialog { width: min(620px,100%); max-height: calc(100vh - 44px); overflow: auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fffdfa; box-shadow: 0 28px 80px rgba(44,28,20,.32) }
.booking-account-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line) }
.booking-account-dialog h3 { margin: 5px 0 7px; color: #38251e; font: 500 27px Georgia,serif }
.booking-account-dialog header p:not(.eyebrow) { max-width:430px; margin: 0; color: #7b6559; font-size: 13px; line-height: 1.55 }
.booking-account-dialog form { display: grid; gap: 14px }
.booking-account-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px }
.booking-account-fields label { display: grid; gap: 7px; color: #543b30; font-size: 12px; font-weight: 800 }
.booking-account-fields input { min-height: 45px; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #38251e; padding: 10px 12px; font: inherit }
.booking-account-wide { grid-column: 1/-1 }
.booking-account-dialog form>a { color: #865c4b; font-size: 12px; font-weight: 800; text-align: center }
@media(max-width:560px) { .booking-account-modal { padding: 12px } .booking-account-dialog { max-height: calc(100vh - 24px); padding: 20px; border-radius: 16px } .booking-account-dialog header { gap: 12px } .booking-account-dialog h3 { font-size: 23px } .booking-account-fields { grid-template-columns: 1fr } .booking-account-wide { grid-column: auto } }
.booking-page .lux-booking-layout { display: block; max-width: 1180px; margin: 0 auto }
.booking-page .lux-booking-header { margin: 0 auto 23px; text-align: center }
.booking-page .lux-booking-header .lux-step-indicator { display: none }
.booking-page .lux-booking-header h2 { font-size: clamp(29px,3vw,39px) }
.appointment-search-field { display: grid; align-content: center; min-width: 0; min-height: 78px; padding: 10px 15px; border-radius: 15px; background: #f7f2ee; color: #735e52 }
.appointment-search-field>span { display: block; margin-bottom: 5px; color: #876e62; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase }
.appointment-search-field strong { overflow: hidden; color: #3e2a21; font-size: 15px; text-overflow: ellipsis; white-space: nowrap }
.appointment-search-field small { overflow: hidden; margin-top: 3px; color: #8e7568; font-size: 11px; text-overflow: ellipsis; white-space: nowrap }
.appointment-search-field select,.appointment-search-field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #3e2a21; font: 800 15px/1.3 inherit; cursor: pointer }
.appointment-search-field select:disabled { color: #aa9b94; cursor: not-allowed }
.appointment-search-date input { font-size: 14px }
.appointment-search-button { align-self: stretch; min-width: 176px; border-radius: 15px; padding: 13px 19px; white-space: nowrap; font-size: 14px }
.appointment-search-feedback { grid-column: 1/-1; min-height: 0; margin: -2px 3px 0; color: #a24d40; font-size: 12px; font-weight: 700 }
.booking-page #booking-step-service,.booking-page #booking-step-staff { display: none }
.booking-page #booking-step-datetime { max-width: 820px; margin: 0 auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fffdfa; box-shadow: 0 10px 26px rgba(62,38,27,.06) }
.booking-page #booking-step-datetime.is-disabled { display: none }
.booking-page #booking-step-datetime .lux-step-title,.booking-page #booking-step-datetime .lux-date-strip-controls { display: none }
.booking-page .lux-booking-sidebar { display: none }
.booking-page .lux-inline-confirm { margin-top: 17px; border-radius: 14px }

/* Hizmet seçim kartları */
.staff-service-editor {
  display: grid;
  gap: 16px;
  max-width: 1000px;
  margin-top: 18px
}

.staff-service-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.staff-service-options>label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 76px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdfa;
  color: #382720;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease
}

.staff-service-options>label:hover {
  border-color: var(--line);
  box-shadow: 0 5px 18px rgba(87, 55, 40, .08)
}

.staff-service-options input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 3px 0 0;
  accent-color: #9a6c58
}

.staff-service-options span {
  display: grid;
  gap: 5px;
  min-width: 0
}

.staff-service-options b {
  font-size: 14px;
  line-height: 1.28;
  color: #382720
}

.staff-service-options small {
  font-size: 12px;
  line-height: 1.45;
  color: #82685c
}

.staff-service-editor .button {
  justify-self: start
}

@media(max-width:760px) {
  .staff-service-options {
    grid-template-columns: 1fr
  }

  .staff-service-options>label {
    min-height: 68px
  }
}

.lightbox-media-frame,
.video-modal-media-frame {
  position: relative;
  width: 100%;
  max-height: 480px;
  background: #1a120e;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.lightbox-media-frame img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.video-modal-media-frame video {
  width: 100%;
  max-height: 480px;
  background: #000;
}

/* ==========================================================================
   YENİ: MODERN, SADE VE PREMIUM RANDEVU PLANLAYICI (LUXURY BOOKING PLANNER)
   ========================================================================== */
.lux-booking-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  align-items: start;
  margin-top: 10px;
}

.booking-planner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.booking-planner::after {
  display: none !important;
}

.booking-planner>* {
  position: static !important;
}

.lux-booking-header {
  margin-bottom: 28px;
}

.lux-step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f4eae2;
  color: #7d655a;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.step-pill.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(143, 102, 87, 0.25);
}

.step-pill.completed {
  background: #e6f3ea;
  color: #2e6e44;
}

.step-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.step-pill.active .step-num {
  background: #ffffff;
  color: var(--primary);
}

.step-line {
  width: 24px;
  height: 2px;
  background: #e2d2c8;
}

.lux-booking-header h2 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  color: #2c1d16;
}

.lux-booking-header p {
  margin: 0;
  color: #796257;
  font-size: 14px;
}

/* Adım Bölümleri */
.lux-step-section {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(85, 55, 40, 0.04);
  transition: all 0.35s ease;
}

.lux-step-section.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.2);
}

.lux-step-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.lux-step-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f4eae2;
  color: var(--primary);
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--line);
}

.lux-step-title h3 {
  margin: 0 0 3px;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #31211a;
}

.lux-step-title p {
  margin: 0;
  font-size: 13px;
  color: #7d655a;
}

/* Uzman Seçim Grid */
.lux-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.lux-staff-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: #fffdfa;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
}

.lux-staff-card:hover {
  border-color: var(--line);
  background: #fff9f5;
  transform: translateY(-2px);
}

.lux-staff-card.is-selected {
  border-color: var(--line);
  background: #fbf4ef;
  box-shadow: 0 8px 22px rgba(143, 102, 87, 0.14);
}

.lux-staff-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ebd8cc;
  color: #5d4236;
  font-size: 16px;
  font-weight: 800;
  font-family: Georgia, serif;
}

.lux-staff-card.is-selected .lux-staff-avatar {
  background: var(--primary);
  color: #ffffff;
}

.lux-staff-info strong {
  display: block;
  font-size: 14px;
  color: #2f2019;
}

.lux-staff-info small {
  display: block;
  font-size: 11px;
  color: #7e675c;
}

/* Yatay Tarih Seçici Şeridi */
.lux-date-strip-controls {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.lux-date-strip-wrapper {
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.lux-date-strip {
  display: flex;
  gap: 10px;
}

/* Saat Dilimleri */
.lux-slots-wrapper {
  background: #faf4ef;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}

.lux-slots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.lux-slots-header strong {
  font-size: 14px;
  color: #31211a;
}

.lux-slots-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #796257;
}

.lux-slots-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lux-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

.lux-time-slot {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: #31211a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.lux-time-slot:hover:not(:disabled) {
  border-color: var(--line);
  color: var(--primary);
  transform: translateY(-2px);
}

.lux-time-slot.is-selected {
  background: var(--primary);
  border-color: var(--line);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(143, 102, 87, 0.25);
}

.lux-time-slot:disabled {
  background: #f1e7e0;
  border-color: var(--line);
  color: #b09a8f;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Sağ: Sabit Özet Kartı */
.lux-booking-sidebar {
  position: sticky;
  top: 110px;
}

.lux-summary-card {
  background: #fffdfa;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 48px rgba(85, 55, 40, 0.08);
}

.lux-summary-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.lux-summary-header h4 {
  margin: 4px 0 0;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #31211a;
}

.summary-item {
  margin-bottom: 14px;
}

.summary-item strong {
  display: block;
  font-size: 14px;
  color: #2e1e17;
}

.summary-item small {
  display: block;
  font-size: 12px;
  color: #8b6251;
}

.summary-divider {
  height: 1px;
  background: #f0e3db;
  margin: 20px 0;
}

.summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

.summary-total-row span {
  font-size: 14px;
  font-weight: 700;
  color: #634d42;
}

@media (max-width: 580px) {
  .lux-step-section {
    padding: 20px 16px;
  }

  .lux-service-grid {
    grid-template-columns: 1fr;
  }

  .lux-date-strip-controls {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
  }

  .lux-date-scroll {
    width: 34px;
    height: 34px;
  }

  .lux-inline-confirm {
    align-items: stretch;
    flex-direction: column;
  }

  .lux-inline-confirm .button {
    width: 100%;
    min-width: 0;
  }
}

.lux-media-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(85, 55, 40, 0.1);
  border: 3px solid var(--line);
}

.lux-media-frame:hover .lux-main-img {
  transform: scale(1.03);
}

/* 4 Adımda Randevu Grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.steps-grid article {
  padding: 26px 22px;
  background: #fffdfa;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  text-align: left;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.steps-grid article:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 12px 28px rgba(85, 55, 40, 0.08);
}

.steps-grid article i {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  display: block;
  margin-bottom: 12px;
  font-style: normal;
  line-height: 1;
}

.steps-grid article h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #2e1e17;
}

.steps-grid article p {
  margin: 0;
  font-size: 13px;
  color: #796257;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.booking-page .appointment-search-button { min-width: 0; white-space: normal; }
.shop-steps { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 0; margin: 0 0 24px; }
.shop-steps li { display: flex; align-items: center; gap: 10px; color: #A89F94; padding: 12px 0; border-bottom: 2px solid var(--border-color); }
.shop-steps li.active { color: #C9A24D; border-color: var(--line); font-weight: 700; }
.shop-steps span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #241E1A; color: #A89F94; flex-shrink: 0; }
.shop-steps [aria-current] span { background: #C9A24D; color: #0D0D0D; }
.shop-summary { position: sticky; top: 140px; }
.shop-summary a,.shop-summary small { display: block; margin-top: 18px; color: #A89F94; }
.shop-wizard summary { cursor: pointer; padding: 14px 0; color: #C9A24D; }

.staff-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.staff-avatar-field {
  margin-top: 4px !important;
}

.staff-submit-btn {
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  margin-top: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}