/* ==========================================================================
   MST Yazar Randevu — mstyayincilik.com tasarım diliyle
   Renkler sitenin menü çubuğundan alınmıştır: antrasit #222222 + altın #dc9814.
   ========================================================================== */
:root {
  --mst-ana: #222222;
  --mst-ana-2: #3a3a3a;
  --mst-ana-acik: #f4efe6;
  --mst-altin: #dc9814;
  --mst-altin-koyu: #b87d0e;
  /* Üst çubuk: sitedeki antrasit menüden sıcak koyu tona hafif geçiş */
  --mst-cubuk: linear-gradient(100deg, #161616 0%, #222222 45%, #2d2820 100%);
  --mst-bej: #f8f4e8;
  --mst-zemin-sayfa: #f7f5ef;
  --mst-yazi: #333333;
  --mst-koyu: #1a1a1a;
  --mst-soluk: #6b6b6b;
  --mst-cizgi: #e7e3d8;
  --mst-beyaz: #ffffff;
  --mst-hata: #b42318;
  /* Trafik ışığı: turuncu = dolmak üzere, kırmızı = dolu */
  --mst-turuncu: #f39200;
  --mst-kirmizi: #e3170a;
  --mst-font: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
  --mst-font-baslik: "IBM Plex Sans", Manrope, system-ui, sans-serif;
}

/* Sitedeki yüzen WhatsApp butonu (Simple Chat Button eklentisi) randevu sayfasında gizlenir:
   üst çubukta zaten WhatsApp var, mobilde de "Devam Et" çubuğunun üstüne biniyordu. */
body.mst-sayfa #simple-chat-button--container,
body:has(.mst-rnd-wrap) #simple-chat-button--container { display: none !important; }

.mst-ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: -0.2em; }

/* --------------------------------------------------------------------------
   Tam sayfa iskeleti
   -------------------------------------------------------------------------- */
body.mst-sayfa {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--mst-zemin-sayfa); color: var(--mst-yazi);
  font-family: var(--mst-font); -webkit-font-smoothing: antialiased;
}
.mst-sayfa__main { flex: 1; padding: 40px 16px 72px; }
.mst-sayfa__intro { max-width: 1040px; margin: 0 auto 24px; }

/* --------------------------------------------------------------------------
   Üst çubuk: MST logosu + WhatsApp + Siteye Git
   -------------------------------------------------------------------------- */
/* Logo beyaz olduğu için çubuk koyu: sitenin menü çubuğuyla aynı antrasit, altta ince altın çizgi */
.mst-top {
  position: sticky; top: 0; z-index: 100;
  background: var(--mst-cubuk);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
  font-family: var(--mst-font);
}
body.admin-bar .mst-top { top: 32px; }
.mst-top * { box-sizing: border-box; }
.mst-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, rgba(220, 152, 20, 0) 0%, var(--mst-altin) 30%, var(--mst-altin) 70%, rgba(220, 152, 20, 0) 100%);
}
.mst-top a { text-decoration: none; }
/* Logo ortada, butonlar en sağda */
.mst-top__in {
  position: relative; height: 76px; padding: 0 24px;
  display: flex; align-items: center; justify-content: flex-end;
}
.mst-top__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; }
.mst-top__logo img { height: 54px; width: auto; display: block; }

.mst-top__cta { display: flex; align-items: center; gap: 10px; }
.mst-top__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 100px; border: 1.5px solid rgba(255, 255, 255, .55);
  font-size: 14px; font-weight: 700; color: #fff; background: transparent;
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.mst-top__btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.mst-top__btn .mst-ic { width: 17px; height: 17px; }
.mst-top__btn--wa { background: #25d366; border-color: #25d366; color: #fff; }
.mst-top__btn--wa .mst-ic { width: 19px; height: 19px; }
.mst-top__btn--wa:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.mst-top__btn--altin { background: var(--mst-altin); border-color: var(--mst-altin); color: #1a1a1a; }
.mst-top__btn--altin:hover { background: var(--mst-altin-koyu); border-color: var(--mst-altin-koyu); color: #1a1a1a; }
/* Yazar Paneli sayfasında "Siteye Git" yalnızca mobil menüde (logo zaten siteye gider) */
@media (min-width: 760px) { .mst-top__btn--mobil { display: none; } }
@media (min-width: 760px) and (max-width: 1040px) {
  .mst-top__cta:has(.mst-top__btn--altin) .mst-top__btn--wa { width: 44px; padding: 0; }
  .mst-top__cta:has(.mst-top__btn--altin) .mst-top__btn--wa span { display: none; }
}

@media (max-width: 782px) { body.admin-bar .mst-top { top: 0; } }
/* Üç çizgi (hamburger) butonu: yalnızca mobilde görünür */
.mst-top__menu { display: none; }

@media (max-width: 759px) {
  .mst-top__in { height: 64px; padding: 0 12px; }
  .mst-top__logo img { height: 44px; }

  .mst-top__menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer;
    background: transparent; border: 0; border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .mst-top__menu:focus-visible { outline: 2px solid var(--mst-altin); outline-offset: 2px; }
  .mst-top__menu span {
    display: block; width: 24px; height: 2.5px; border-radius: 2px; background: #fff;
    transition: transform .2s, opacity .2s;
  }
  /* Açıkken üç çizgi X olur */
  .mst-top.is-open .mst-top__menu span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .mst-top.is-open .mst-top__menu span:nth-child(2) { opacity: 0; }
  .mst-top.is-open .mst-top__menu span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Açılır menü: çubuğun hemen altında tam genişlik */
  .mst-top__cta {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px 16px 18px; background: var(--mst-cubuk);
    border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 24px rgba(0, 0, 0, .18);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  .mst-top.is-open .mst-top__cta { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s; }
  .mst-top__btn { height: 50px; font-size: 15px; }
  /* Mobil menüde WhatsApp da çubuğun antrasit/gri tonunda; yalnızca simgesi yeşil */
  .mst-top__btn--wa { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
  .mst-top__btn--wa:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
  .mst-top__btn--wa .mst-ic { color: #25d366; }
}

/* --------------------------------------------------------------------------
   Randevu kutusu
   -------------------------------------------------------------------------- */
.mst-rnd-wrap { container-type: inline-size; width: 100%; max-width: 1040px; margin: 24px auto; }
.mst-sayfa .mst-rnd-wrap { margin-top: 0; }
.mst-rnd {
  display: grid; grid-template-columns: 1fr;
  background: var(--mst-beyaz); color: var(--mst-yazi);
  border: 1px solid var(--mst-cizgi); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(34, 34, 34, .04), 0 18px 50px rgba(34, 34, 34, .08);
  font-family: var(--mst-font); font-size: 16px; line-height: 1.6;
  overflow: hidden;
}
.mst-rnd *, .mst-rnd *::before, .mst-rnd *::after { box-sizing: border-box; }
.mst-rnd [hidden] { display: none !important; }
.mst-rnd a { text-decoration: none; }

/* Sol sütun: görüşme bilgisi */
.mst-rnd__aside { padding: 28px 24px; border-bottom: 1px solid var(--mst-cizgi); background: linear-gradient(180deg, #fff 0%, #fcfbf7 100%); }
.mst-rnd__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mst-rnd__avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mst-ana);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mst-cizgi);
}
.mst-rnd__avatar img { width: 40px; height: 40px; display: block; }
.mst-rnd__brand-txt { display: flex; flex-direction: column; line-height: 1.3; }
.mst-rnd__brand-txt strong { font-size: 14px; font-weight: 800; color: var(--mst-koyu); }
.mst-rnd__brand-txt small { font-size: 13px; font-weight: 600; color: var(--mst-soluk); }
.mst-rnd__title {
  margin: 0 0 16px; color: var(--mst-ana);
  font-family: var(--mst-font-baslik); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -.01em;
}
.mst-rnd__meta { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.mst-rnd__meta li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--mst-koyu); margin: 0; }
.mst-rnd__meta-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mst-bej); color: var(--mst-ana);
}
.mst-rnd__desc { margin: 0 0 18px; font-size: 15px; color: var(--mst-soluk); }
.mst-rnd__wa {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--mst-ana);
  text-decoration: underline !important; text-decoration-color: var(--mst-altin) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px;
}
.mst-rnd__wa .mst-ic { margin-top: 1px; }
.mst-rnd__wa:hover { color: var(--mst-ana-2); }

/* Sağ sütun */
.mst-rnd__main { padding: 24px 20px 28px; min-width: 0; }

/* Adım göstergesi */
.mst-rnd__steps {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; align-items: center; gap: 8px; counter-reset: none;
}
.mst-rnd__steps li {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 700; color: var(--mst-soluk); white-space: nowrap;
}
.mst-rnd__steps li:not(:last-child)::after {
  content: ""; width: 28px; height: 2px; margin-left: 4px; border-radius: 2px; background: var(--mst-cizgi);
}
.mst-rnd__steps span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--mst-cizgi); color: var(--mst-soluk);
}
.mst-rnd__steps li.is-active { color: var(--mst-koyu); }
.mst-rnd__steps li.is-active span { background: var(--mst-altin); color: var(--mst-koyu); }
.mst-rnd__steps li.is-done { color: var(--mst-ana); }
.mst-rnd__steps li.is-done span { background: var(--mst-ana); color: #fff; font-size: 0; }
.mst-rnd__steps li.is-done span::before { content: "✓"; font-size: 13px; }
.mst-rnd__steps li.is-done::after { background: var(--mst-ana); }

/* Etiketler */
.mst-rnd__label {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 24px 0 12px;
  font-weight: 800; color: var(--mst-koyu); font-size: 16px;
}
.mst-rnd__step > .mst-rnd__label:first-child { margin-top: 0; }
.mst-rnd__label small { font-weight: 600; font-size: 12px; color: var(--mst-soluk); }

/* Günler */
.mst-rnd__days {
  display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 10px;
  scroll-snap-type: x proximity; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mst-rnd__days::-webkit-scrollbar { display: none; }
.mst-rnd__day {
  flex: 0 0 auto; min-width: 84px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 12px 10px; cursor: pointer; font: inherit; color: var(--mst-koyu);
  background: var(--mst-beyaz); border: 1.5px solid var(--mst-cizgi); border-radius: 16px;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.mst-rnd__day:hover { border-color: var(--mst-ana); }
.mst-rnd__day:active { transform: scale(.97); }
.mst-rnd__day[aria-pressed="true"] { background: var(--mst-ana); border-color: var(--mst-ana); color: #fff; box-shadow: 0 6px 16px rgba(34, 34, 34, .25); }
.mst-rnd__day-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.mst-rnd__day-no { font-weight: 800; font-size: 17px; line-height: 1.35; }
.mst-rnd__day-count { font-size: 11px; font-weight: 600; opacity: .7; }

/* Hafta seçici (yalnızca mobilde görünür) */
.mst-rnd__week { display: none; }

/* Saatler */
.mst-rnd__times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mst-rnd__time {
  min-height: 48px; padding: 10px 0; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; color: var(--mst-ana);
  background: var(--mst-beyaz); border: 1.5px solid #dcd6cc; border-radius: 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.mst-rnd__time:hover { border-color: var(--mst-ana); background: var(--mst-ana-acik); }
.mst-rnd__time:focus-visible { outline: 3px solid var(--mst-altin); outline-offset: 2px; }
.mst-rnd__time[aria-pressed="true"] { background: var(--mst-ana); border-color: var(--mst-ana); color: #fff; }
.mst-rnd__time { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.mst-rnd__time small { margin-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: .01em; }
/* Son yer: turuncu "Dolmak üzere" */
.mst-rnd__time.is-az { border-color: #fcd29a; background: #fff7eb; }
.mst-rnd__time.is-az small { color: #d97f00; }
.mst-rnd__time small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.mst-rnd__time.is-az small::before { background: var(--mst-turuncu); }
.mst-rnd__time.is-az:hover { border-color: var(--mst-turuncu); background: #fff0d9; }
.mst-rnd__time.is-az[aria-pressed="true"] { background: var(--mst-ana); border-color: var(--mst-ana); }
.mst-rnd__time.is-az[aria-pressed="true"] small { color: #ffc266; }
.mst-rnd__time.is-az[aria-pressed="true"] small::before { background: var(--mst-turuncu); }
/* Dolu: kırmızı, seçilemez */
.mst-rnd__time.is-dolu,
.mst-rnd__time.is-dolu:hover { cursor: not-allowed; color: var(--mst-kirmizi); border-color: #f7b4ae; background: #fff1f0; }
.mst-rnd__time.is-dolu small { color: var(--mst-kirmizi); }
.mst-rnd__time.is-dolu small::before { background: var(--mst-kirmizi); }
/* Tamamen dolu gün */
.mst-rnd__day.is-dolu .mst-rnd__day-count { color: var(--mst-kirmizi); opacity: 1; font-weight: 800; }
.mst-rnd__day.is-dolu[aria-pressed="true"] .mst-rnd__day-count { color: #ffb4ab; }

.mst-rnd__loading, .mst-rnd__empty { color: var(--mst-soluk); padding: 12px 0; }

/* Devam çubuğu (masaüstünde satır içi, mobilde ekranın altına sabit) */
.mst-rnd__next {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding: 14px 14px 14px 20px;
  background: var(--mst-bej); border-left: 4px solid var(--mst-altin); border-radius: 14px;
  animation: mst-rise .2s ease-out;
}
.mst-rnd__next-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mst-rnd__next-info small { font-size: 12px; font-weight: 600; color: var(--mst-soluk); }
.mst-rnd__next-info strong { font-size: 15px; color: var(--mst-koyu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mst-rise { from { opacity: 0; transform: translateY(8px); } }

/* Seçilen saat özeti (form üstü) */
.mst-rnd__picked {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px;
  padding: 14px 18px; background: var(--mst-bej); border-left: 4px solid var(--mst-altin); border-radius: 12px;
}
.mst-rnd__picked > div { display: flex; flex-direction: column; line-height: 1.4; }
.mst-rnd__picked small { font-size: 12px; color: var(--mst-soluk); font-weight: 600; }
.mst-rnd__picked strong { color: var(--mst-koyu); font-size: 15px; }
.mst-rnd__picked button {
  flex: 0 0 auto; padding: 6px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--mst-ana); text-decoration: underline; text-underline-offset: 3px;
}

/* Form */
.mst-rnd__field { display: block; margin: 0 0 16px; }
.mst-rnd__field > span { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; color: var(--mst-koyu); }
.mst-rnd__field em { font-weight: 500; color: var(--mst-soluk); font-style: normal; }
.mst-rnd__field input, .mst-rnd__field textarea, .mst-rnd__field select {
  display: block; width: 100%; margin: 0; padding: 13px 16px; font: inherit; font-size: 16px; color: var(--mst-koyu);
  background: #fbfaf7; border: 1.5px solid var(--mst-cizgi); border-radius: 12px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.mst-rnd__field input::placeholder, .mst-rnd__field textarea::placeholder { color: #a5a29a; }
.mst-rnd__field input:focus, .mst-rnd__field textarea:focus, .mst-rnd__field select:focus {
  outline: none; background: #fff; border-color: var(--mst-ana); box-shadow: 0 0 0 4px var(--mst-ana-acik);
}
.mst-rnd__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--mst-soluk); margin: 4px 0 18px; cursor: pointer; }
.mst-rnd__check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--mst-ana); flex: 0 0 auto; }
.mst-rnd__check a { color: var(--mst-ana); font-weight: 700; text-decoration: underline !important; text-underline-offset: 2px; }
.mst-rnd__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.mst-rnd__error {
  margin-bottom: 16px; padding: 12px 16px; border-radius: 10px;
  color: var(--mst-hata); background: #fef3f2; border-left: 4px solid var(--mst-hata); font-size: 14px; font-weight: 600;
}

/* Butonlar — sitedeki hap butonlarla aynı */
.mst-rnd__actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.mst-rnd__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 30px; margin: 0;
  font: inherit; font-weight: 800; font-size: 16px; line-height: 1.2; cursor: pointer; white-space: nowrap;
  color: var(--mst-koyu); background: var(--mst-altin); border: 0; border-radius: 100px;
  transition: background .15s, transform .1s;
}
.mst-rnd__btn:hover { background: var(--mst-altin-koyu); color: var(--mst-koyu); }
.mst-rnd__btn:active { transform: translateY(1px); }
.mst-rnd__btn:disabled { opacity: .6; cursor: wait; }
.mst-rnd__btn--ghost { color: var(--mst-ana); background: transparent; border: 1.5px solid var(--mst-ana); }
.mst-rnd__btn--ghost:hover { background: var(--mst-ana-acik); color: var(--mst-ana); }
.mst-rnd__btn--koyu { background: var(--mst-ana); color: #fff; }
.mst-rnd__btn--koyu:hover { background: var(--mst-ana-2); color: #fff; }

/* Onay */
.mst-rnd__done { text-align: center; padding: 16px 0 4px; }
.mst-rnd__done-icon {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #fff; background: var(--mst-ana);
  box-shadow: 0 0 0 10px var(--mst-ana-acik);
  animation: mst-pop .35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes mst-pop { from { transform: scale(.4); opacity: 0; } }
.mst-rnd__done-msg { margin: 0 0 14px; font-family: var(--mst-font-baslik); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--mst-ana); }
.mst-rnd__done-date {
  display: inline-block; margin: 0 0 24px; padding: 10px 20px; border-radius: 100px;
  background: var(--mst-bej); color: var(--mst-koyu); font-weight: 800;
}
.mst-rnd__done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Randevu alındıktan sonra: Yazar Kariyer Akademisi kartı */
.mst-rnd a.mst-rnd__akademi {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  max-width: 460px; margin: 26px auto 0; padding: 16px 20px; border-radius: 16px; text-align: left;
  background: var(--mst-cubuk); border: 1px solid rgba(220, 152, 20, .35); color: #fff;
  box-shadow: 0 12px 30px rgba(22, 22, 22, .18); transition: transform .15s, box-shadow .15s;
}
.mst-rnd a.mst-rnd__akademi:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(22, 22, 22, .26); color: #fff; }
.mst-rnd__akademi small { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mst-altin); }
.mst-rnd__akademi strong { font-size: 16px; font-weight: 800; line-height: 1.35; }
.mst-rnd__akademi-ok {
  grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mst-altin); color: #1a1a1a; font-size: 20px; font-weight: 800;
}

/* --------------------------------------------------------------------------
   Geniş kutu: iki sütun (Calendly düzeni)
   -------------------------------------------------------------------------- */
@container (min-width: 760px) {
  .mst-rnd { grid-template-columns: 320px 1fr; }
  .mst-rnd__aside { padding: 36px 30px; border-bottom: 0; border-right: 1px solid var(--mst-cizgi); }
  .mst-rnd__title { font-size: 28px; }
  .mst-rnd__main { padding: 32px 36px 36px; }
  .mst-rnd__days { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .mst-rnd__day { min-width: 0; flex: 0 0 calc((100% - 50px) / 6); }
  .mst-rnd__times { grid-template-columns: repeat(4, 1fr); }
}
@container (min-width: 960px) {
  .mst-rnd__times { grid-template-columns: repeat(5, 1fr); }
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .mst-sayfa__main { padding: 16px 12px 120px; }
  .mst-rnd { border-radius: 18px; }
  /* Bilgi bloğu kısalır: takvim ilk ekranda görünsün */
  .mst-rnd__aside { padding: 20px 20px 18px; }
  .mst-rnd__brand, .mst-rnd__desc { display: none; }
  .mst-rnd__title { font-size: 21px; margin-bottom: 12px; }
  .mst-rnd__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .mst-rnd__meta li {
    gap: 6px; padding: 5px 11px 5px 6px; border-radius: 100px; background: var(--mst-bej);
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
  }
  .mst-rnd__meta-ic { width: 20px; height: 20px; background: transparent; font-size: 13px; }
  .mst-rnd__wa { font-size: 13px; }
  /* Günler: kaydırma yerine haftalık görünüm, bir hafta ekrana sığar */
  .mst-rnd__week { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
  .mst-rnd__week-label { font-weight: 800; font-size: 15px; color: var(--mst-koyu); text-align: center; }
  .mst-rnd__week-btn {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0 0 3px; margin: 0; cursor: pointer;
    display: grid; place-items: center; font: inherit; font-size: 26px; font-weight: 700; line-height: 1;
    color: var(--mst-ana); background: var(--mst-beyaz); border: 1.5px solid var(--mst-cizgi); border-radius: 50%;
    -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s;
  }
  .mst-rnd__week-btn:hover:not(:disabled) { border-color: var(--mst-ana); background: var(--mst-ana-acik); }
  .mst-rnd__week-btn:disabled { opacity: .3; cursor: default; }
  .mst-rnd__days {
    display: grid; grid-template-columns: repeat(var(--mst-gun, 5), minmax(0, 1fr)); gap: 6px;
    overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  .mst-rnd__day { min-width: 0; padding: 10px 2px; border-radius: 12px; }
  .mst-rnd__day.is-diger-hafta { display: none; }
  .mst-rnd__day-name { font-size: 10px; letter-spacing: .04em; }
  .mst-rnd__day-no { font-size: 20px; line-height: 1.2; text-align: center; }
  .mst-rnd__day-ay { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; }
  .mst-rnd__day-count { font-size: 10px; white-space: nowrap; }

  .mst-rnd__steps li:not(.is-active) { font-size: 0; gap: 0; }
  .mst-rnd__steps li:not(.is-active)::after { margin-left: 8px; }
  .mst-rnd__steps { gap: 10px; }

  /* Devam çubuğu ekranın altına sabitlenir */
  .mst-rnd__next {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-left: 0; border-top: 1px solid var(--mst-cizgi); border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .10);
  }
  .mst-rnd__next .mst-rnd__btn { padding: 12px 26px; min-height: 48px; }

  .mst-rnd__actions { flex-direction: column-reverse; }
  .mst-rnd__actions .mst-rnd__btn, .mst-rnd__done-actions .mst-rnd__btn { width: 100%; }
}
@media (max-width: 420px) {
  .mst-rnd__time small { font-size: 10px; white-space: nowrap; letter-spacing: -.01em; }
}
@media (max-width: 360px) {
  .mst-rnd__times { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Karanlık mod (yalnızca tam sayfa randevu şablonunda)
   <html> "mst-koyu" sınıfını alınca sayfa kendi koyu temasına geçer (palet aynı: antrasit + altın).
   Sınıfı şablonun <head>'indeki küçük betik, cihaz/tarayıcı karanlık istediğinde koyar (karanlık mod
   ya da "zorla karartma"). Böylece tarayıcı renkleri kendisi ters çevirip sayfayı bozmaz.
   -------------------------------------------------------------------------- */
html.mst-koyu body.mst-sayfa--randevu {
  color-scheme: dark;
  --mst-ana: #f1ece2;          /* koyu zeminde metin ve çizgi rengi */
  --mst-ana-2: #ffffff;
  --mst-ana-acik: #2c2822;
  --mst-bej: #2a261f;
  --mst-zemin-sayfa: #121212;
  --mst-yazi: #ddd8cd;
  --mst-koyu: #f4f0e8;
  --mst-soluk: #a39e93;
  --mst-cizgi: #36322b;
  --mst-beyaz: #1c1b19;
  --mst-hata: #ff8a80;
}
.mst-koyu .mst-sayfa--randevu .mst-rnd { box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__aside { background: linear-gradient(180deg, #201f1c 0%, #1c1b19 100%); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__avatar { background: #2a2620; box-shadow: 0 0 0 3px #1c1b19, 0 0 0 4px var(--mst-cizgi); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__meta-ic { color: var(--mst-altin); }
/* Seçili gün/saat ve koyu düğmeler: açık metin yerine altın zemin */
.mst-koyu .mst-sayfa--randevu .mst-rnd__day[aria-pressed="true"],
.mst-koyu .mst-sayfa--randevu .mst-rnd__time[aria-pressed="true"],
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-az[aria-pressed="true"] { background: var(--mst-altin); border-color: var(--mst-altin); color: #1a1a1a; box-shadow: 0 6px 16px rgba(220, 152, 20, .25); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-az[aria-pressed="true"] small { color: #1a1a1a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-az[aria-pressed="true"] small::before { background: #1a1a1a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__day.is-dolu[aria-pressed="true"] .mst-rnd__day-count { color: #7a1208; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time { border-color: #3d3931; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-az { border-color: #6b4a14; background: #2b2113; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-az small { color: #ffb347; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-az:not([aria-pressed="true"]):hover { background: #35281a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-dolu,
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-dolu:hover { color: #ff7a70; border-color: #5c2420; background: #2a1715; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__time.is-dolu small { color: #ff7a70; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__day.is-dolu .mst-rnd__day-count { color: #ff7a70; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__steps li.is-done span { color: #1a1a1a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__steps li.is-active span { color: #1a1a1a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__btn { color: #1a1a1a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__btn--koyu,
.mst-koyu .mst-sayfa--randevu .mst-rnd__btn--koyu:hover { background: #f1ece2; color: #1a1a1a; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__btn--ghost { color: var(--mst-ana); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__field input, .mst-koyu .mst-sayfa--randevu .mst-rnd__field textarea, .mst-koyu .mst-sayfa--randevu .mst-rnd__field select { background: #151413; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__field input:focus, .mst-koyu .mst-sayfa--randevu .mst-rnd__field textarea:focus { background: #111; border-color: var(--mst-altin); box-shadow: 0 0 0 4px rgba(220, 152, 20, .18); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__field input::placeholder, .mst-koyu .mst-sayfa--randevu .mst-rnd__field textarea::placeholder { color: #6f6a61; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__check input { accent-color: var(--mst-altin); }
.mst-koyu .mst-sayfa--randevu .mst-rnd__error { background: #2a1715; }
.mst-koyu .mst-sayfa--randevu .mst-rnd__done-icon { background: var(--mst-altin); color: #1a1a1a; box-shadow: 0 0 0 10px rgba(220, 152, 20, .15); }
.mst-koyu .mst-sayfa--randevu .mst-rnd a.mst-rnd__akademi { border-color: rgba(220, 152, 20, .5); box-shadow: none; }
.mst-koyu .mst-sayfa--randevu .mst-sayfa__intro { color: var(--mst-yazi); }
@media (max-width: 759px) {
  .mst-koyu .mst-sayfa--randevu .mst-rnd__next { background: #1c1b19; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
  .mst-koyu .mst-sayfa--randevu .mst-rnd__meta li { color: var(--mst-koyu); }
}