/* Nova Saç & Güzellik (hayali örnek salon): randevu uygulaması.
   Renkler panelle ortak (panel/veri.js renk). Köşe sistemi: kart 22px, küçük öğe 14px, etkileşim (buton, çip, arama) tam yuvarlak.
   Katmanlar: içerik 0, üst bar 10, sekme çubuğu 20, randevu 40, toast 50. */

@font-face { font-family: "Bricolage"; src: url(/fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; src: url(/fonts/bricolage-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --zemin: #f3f6f5; --yuzey: #ffffff; --yuzey-2: #e6eeec; --murekkep: #0f2523; --metin: #2e4441; --soluk: #5d716e;
  --cizgi: rgb(15 37 35 / .1); --marka: #1f5f5b; --marka-acik: #dcebe8; --marka-metin: #ffffff; --vurgu: #d9542c; --vurgu-metin: #ffffff;
  --golge: 0 1px 0 rgb(15 37 35 / .04), 0 18px 40px -26px rgb(15 37 35 / .45);
  --r-kart: 22px; --r-oge: 14px; --ust-h: 64px; --sekme-h: 72px;
  --f-baslik: "Bricolage", ui-sans-serif, system-ui, sans-serif; --f-metin: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --egri: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --koyu: 1; } }
:root[data-tema="koyu"] { --koyu: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #0c1514; --yuzey: #13201f; --yuzey-2: #1a2b29; --murekkep: #eef5f3; --metin: #cfdcd9; --soluk: #98aba7;
    --cizgi: rgb(238 245 243 / .1); --marka: #7cc7bd; --marka-acik: #1d3532; --marka-metin: #0c1514; --vurgu: #ff8a5c; --vurgu-metin: #0c1514;
    --golge: 0 1px 0 rgb(0 0 0 / .2), 0 18px 40px -24px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-tema="koyu"] {
  --zemin: #0c1514; --yuzey: #13201f; --yuzey-2: #1a2b29; --murekkep: #eef5f3; --metin: #cfdcd9; --soluk: #98aba7;
  --cizgi: rgb(238 245 243 / .1); --marka: #7cc7bd; --marka-acik: #1d3532; --marka-metin: #0c1514; --vurgu: #ff8a5c; --vurgu-metin: #0c1514;
  --golge: 0 1px 0 rgb(0 0 0 / .2), 0 18px 40px -24px rgb(0 0 0 / .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + 12px); }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 500 15px/1.5 var(--f-metin); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-baslik); color: var(--murekkep); margin: 0; letter-spacing: -.025em; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 3px; border-radius: 8px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--murekkep); color: var(--zemin); padding: 10px 14px; border-radius: 999px; text-decoration: none; }
.atla:focus { top: 12px; }
[hidden] { display: none !important; }
.ph, .ph-fill { line-height: 1; }

/* ---------- yerleşim ---------- */
.uyg { min-height: 100dvh; }
.sahne { display: none; }
.akis { position: relative; max-width: 560px; margin-inline: auto; padding-bottom: calc(var(--sekme-h) + env(safe-area-inset-bottom) + 24px); }
main { padding-inline: 18px; }

/* ---------- üst bar ---------- */
.ust { position: sticky; top: 0; z-index: 10; height: var(--ust-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: env(safe-area-inset-top) 18px 0;
  background: color-mix(in srgb, var(--zemin) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.logo { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--murekkep); }
.logo i { color: var(--vurgu); font-size: 15px; align-self: center; }
.logo b { font: 700 22px/1 var(--f-baslik); letter-spacing: -.04em; }
.logo span { font-size: 12px; color: var(--soluk); font-weight: 600; }
.ust__menu { display: none; }
.ust__sag { display: flex; gap: 6px; }
.ikon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--murekkep); font-size: 19px; text-decoration: none; transition: transform .2s var(--egri), background .2s; }
.ikon:active { transform: scale(.94); }

/* ---------- giriş ---------- */
.giris { padding-top: 10px; }
.giris__selam { font-weight: 600; color: var(--soluk); margin-bottom: 4px; }
.giris h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.02; max-width: 12ch; }
.ara { position: relative; margin-top: 18px; }
.ara > i { position: absolute; left: 18px; top: 50%; translate: 0 -50%; font-size: 19px; color: var(--soluk); pointer-events: none; }
.ara input { width: 100%; height: 52px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); padding: 0 18px 0 48px; font-weight: 600; box-shadow: var(--golge); -webkit-appearance: none; appearance: none; }
.ara input::placeholder { color: var(--soluk); font-weight: 500; }
.ara input:focus { outline: none; border-color: var(--marka); }
.ara__sonuc { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kart); box-shadow: var(--golge); }
.ara__sonuc li button { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border: 0; background: none; border-radius: var(--r-oge); text-align: left; }
.ara__sonuc li button:hover, .ara__sonuc li button:focus-visible { background: var(--yuzey-2); }
.ara__sonuc b { color: var(--murekkep); font-weight: 700; }
.ara__sonuc small { color: var(--soluk); white-space: nowrap; }
.ara__bos { padding: 14px; color: var(--soluk); }

/* en yakın boş saat: sayfanın tek gösterişli anı */
.ilk-bos { position: relative; margin-top: 12px; border-radius: var(--r-kart); background: var(--yuzey); box-shadow: var(--golge); color: var(--murekkep); }
.ilk-bos__ic { padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; }
.ilk-bos__ic > p { grid-column: 1; }
.ilk-bos__baslik { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--marka); }
.canli { width: 8px; height: 8px; border-radius: 50%; background: var(--vurgu); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vurgu) 50%, transparent); animation: nabiz 2.4s infinite; }
@keyframes nabiz { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ilk-bos__zaman { font: 700 26px/1.05 var(--f-baslik); letter-spacing: -.035em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ilk-bos__kim { color: var(--soluk); font-weight: 600; font-size: 13px; }
.ilk-bos__btn { grid-column: 2; grid-row: 1 / 4; display: grid; gap: 6px; }
.ilk-bos__btn .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* ---------- butonlar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--marka); color: var(--marka-metin); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .2s var(--egri), background .2s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn i { font-size: 18px; }
.btn--sade { background: var(--yuzey); color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--cizgi); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }

/* ---------- bölümler ---------- */
.bolum { margin-top: 44px; }
.bolum h2 { font-size: 24px; line-height: 1.1; margin-bottom: 14px; }
.bolum__not { color: var(--soluk); margin: -6px 0 14px; max-width: 46ch; }

/* hikâye: Instagram hikâyesi gibi kendiliğinden ilerleyen dikey videolar */
.hikaye { position: relative; margin-top: 16px; height: max(300px, min(calc((100vw - 36px) * 1.25), calc(100svh - 340px))); border-radius: var(--r-kart); overflow: hidden; background: #0d1716; color: #fff; isolation: isolate; }
.hikaye__medya, .hikaye__medya video, .hikaye__medya img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hikaye__medya video { opacity: 0; transition: opacity .5s; }
.hikaye__medya video.on { opacity: 1; }
.hikaye::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgb(0 0 0 / .35), transparent 22%, transparent 50%, rgb(0 0 0 / .66)); }
.hikaye__cubuk { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; }
.hikaye__cubuk i { flex: 1; height: 3px; border-radius: 99px; background: rgb(255 255 255 / .35); overflow: hidden; }
.hikaye__cubuk i::after { content: ""; display: block; height: 100%; width: calc(var(--d, 0) * 100%); background: #fff; }
.hikaye__dokun { position: absolute; z-index: 2; top: 0; bottom: 90px; width: 40%; border: 0; background: none; }
.hikaye__dokun--geri { left: 0; } .hikaye__dokun--ileri { right: 0; width: 60%; }
.hikaye__alt { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hikaye__yazi { display: grid; gap: 2px; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.hikaye__yazi b { font: 700 24px/1.05 var(--f-baslik); letter-spacing: -.02em; }
.hikaye__yazi span { font-weight: 600; font-size: 13.5px; opacity: .92; }
.hikaye__btn { background: #fff; color: #0f2523; flex: none; }

.filtre--ana { margin: 0 -18px 14px; }
.hizmet-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
.hz { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 2px 8px; border: 0; padding: 0; background: none; text-align: left; color: var(--murekkep); }
.hz__medya { grid-column: 1 / -1; position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-kart); overflow: hidden; background: var(--yuzey-2); margin-bottom: 8px; }
.hz__medya img, .hz__medya video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--egri); }
.hz:hover .hz__medya img, .hz:hover .hz__medya video { scale: 1.04; }
.hz:active .hz__medya { scale: .98; }
.hz b { font: 700 16px/1.2 var(--f-baslik); letter-spacing: -.01em; padding-left: 2px; }
.hz__fiyat { white-space: nowrap; font-weight: 800; font-size: 15px; color: var(--murekkep); font-variant-numeric: tabular-nums; padding-right: 2px; }
.hz small { grid-column: 1 / -1; color: var(--soluk); font-weight: 600; font-size: 13px; padding-left: 2px; }

.isler__serit { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -18px; padding: 2px 18px 6px; scrollbar-width: none; }
.isler__serit::-webkit-scrollbar { display: none; }
.is { scroll-snap-align: start; position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-kart); overflow: hidden; border: 0; padding: 0; background: #0d1716; color: #fff; text-align: left; }
.is img, .is video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .62)); }
.is span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: grid; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.is span b { font: 700 15px/1.2 var(--f-baslik); }

.paket-sira { display: grid; gap: 10px; }
.paket { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px; border-radius: var(--r-kart); background: var(--murekkep); color: var(--zemin); overflow: hidden; }
.paket h3 { color: var(--zemin); font-size: 19px; }
.paket p { color: color-mix(in srgb, var(--zemin) 72%, transparent); font-size: 14px; }
.paket__fiyat { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font: 700 22px/1 var(--f-baslik); }
.paket__fiyat small { display: block; font: 600 12px/1.4 var(--f-metin); color: color-mix(in srgb, var(--zemin) 65%, transparent); }

.ekip { display: grid; }
.kisi { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--cizgi); background: none; text-align: left; }
.kisi:last-child { border-bottom: 0; }
.kisi__harf { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--f-baslik); background: var(--marka-acik); color: var(--marka); }
.kisi:nth-child(2n) .kisi__harf { background: color-mix(in srgb, var(--vurgu) 16%, var(--yuzey)); color: var(--vurgu); }
.kisi b { color: var(--murekkep); font-weight: 700; display: block; }
.kisi small { color: var(--soluk); display: block; line-height: 1.35; }
.kisi__bos { font-size: 13px; font-weight: 700; color: var(--marka); text-align: right; }
.yorum__puan { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.yorum__puan > b { font: 700 54px/1 var(--f-baslik); letter-spacing: -.05em; color: var(--murekkep); }
.yorum__puan span { display: grid; gap: 2px; }
.yildiz { color: var(--vurgu); font-size: 15px; display: flex !important; gap: 2px; }
.yorum__puan small { color: var(--soluk); font-weight: 600; }
.yorum__liste { display: grid; gap: 22px; }
.alinti { margin: 0; padding-left: 16px; border-left: 2px solid var(--vurgu); display: grid; gap: 6px; }
.alinti blockquote { margin: 0; color: var(--murekkep); font-weight: 600; font-size: 16px; line-height: 1.45; }
.alinti figcaption { font-size: 13px; color: var(--soluk); }
.alinti figcaption b { color: var(--murekkep); }

.durum { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--soluk); }
.durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--soluk); }
.durum.acik { color: var(--marka); }
.durum.acik::before { background: var(--marka); }
.saatler { margin-top: 14px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.saatler div { padding: 10px 2px; border-radius: var(--r-oge); background: var(--yuzey); text-align: center; font-size: 11.5px; line-height: 1.35; color: var(--soluk); font-variant-numeric: tabular-nums; }
.saatler b { display: block; color: var(--murekkep); font-size: 13px; }
.saatler .bugun { background: var(--marka); color: color-mix(in srgb, var(--marka-metin) 80%, transparent); }
.saatler .bugun b { color: var(--marka-metin); }
.ziyaret__btn { display: flex; gap: 8px; margin-top: 14px; }
.ziyaret__btn .btn { flex: 1; }

.alt { margin-top: 48px; padding: 20px 0 8px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--soluk); display: grid; gap: 10px; }
.alt p:last-child { display: flex; gap: 18px; }
.alt a { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--murekkep); }

/* ---------- sekme çubuğu ---------- */
.sekmeler { position: fixed; z-index: 20; left: 50%; translate: -50% 0; bottom: 0; width: min(560px, 100%); height: calc(var(--sekme-h) + env(safe-area-inset-bottom)); padding: 8px 10px env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; background: color-mix(in srgb, var(--yuzey) 88%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border-top: 1px solid var(--cizgi); }
.sekme { display: grid; justify-items: center; gap: 3px; padding-top: 6px; border: 0; background: none; text-decoration: none; color: var(--soluk); font-size: 11px; font-weight: 700; }
.sekme i { font-size: 23px; }
.sekme[aria-current="page"] { color: var(--murekkep); }
.sekme--ana { translate: 0 -20px; color: var(--murekkep); }
.sekme--ana i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--vurgu); color: var(--vurgu-metin); font-size: 24px; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--vurgu) 80%, transparent), 0 0 0 5px var(--zemin); }

/* ---------- randevu ---------- */
.rv { position: fixed; inset: 0; z-index: 40; }
.rv__perde { position: absolute; inset: 0; background: rgb(8 18 17 / .45); opacity: 0; transition: opacity .35s; }
.rv__kutu { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--zemin); translate: 0 100%; transition: translate .5s var(--egri); }
.rv.acik .rv__perde { opacity: 1; }
.rv.acik .rv__kutu { translate: 0 0; }
.rv__ust { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 10px) 14px 6px; }
.rv__ust h2 { text-align: center; font-size: 18px; }
.rv__ust [data-geri][disabled] { visibility: hidden; }
.rv__ilerleme { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 4px 18px 0; padding: 0; font-size: 11px; font-weight: 700; color: var(--soluk); }
.rv__ilerleme li { padding-top: 9px; position: relative; text-align: center; white-space: nowrap; }
.rv__ilerleme li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 99px; background: var(--yuzey-2); }
.rv__ilerleme li.tamam::before, .rv__ilerleme li.aktif::before { background: var(--marka); }
.rv__ilerleme li.aktif { color: var(--murekkep); }
.rv__govde { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 24px; }
.adim { display: none; }
.adim.aktif { display: block; animation: adimGir .45s var(--egri); }
@keyframes adimGir { from { opacity: 0; translate: 14px 0; } }
.adim__not { color: var(--soluk); margin-bottom: 14px; }
.rv__alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--murekkep); color: var(--zemin); }
.rv__toplam { display: grid; line-height: 1.2; }
.rv__toplam small { color: color-mix(in srgb, var(--zemin) 68%, transparent); font-weight: 600; }
.rv__toplam b { font: 700 22px/1.1 var(--f-baslik); font-variant-numeric: tabular-nums; }
.rv__alt .btn { background: var(--vurgu); color: var(--vurgu-metin); min-width: 136px; }
.rv.bitti .rv__alt, .rv.bitti .rv__ilerleme { display: none; }

.filtre { display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px 12px; padding: 0 18px 2px; scrollbar-width: none; }
.filtre::-webkit-scrollbar { display: none; }
.filtre button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); font-weight: 700; font-size: 13.5px; color: var(--metin); }
.filtre button[aria-selected="true"] { background: var(--murekkep); color: var(--zemin); border-color: var(--murekkep); }
.secimler { display: grid; gap: 8px; }
.secim { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--r-oge); border: 1px solid var(--cizgi); background: var(--yuzey); text-align: left; transition: border-color .2s, background .2s, transform .2s var(--egri); }
.secim:active { transform: scale(.985); }
.secim b { color: var(--murekkep); display: block; font-weight: 700; }
.secim small { color: var(--soluk); }
.secim__isaret { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cizgi); display: grid; place-items: center; color: transparent; font-size: 14px; transition: background .2s, border-color .2s; }
.secim[aria-pressed="true"] { border-color: var(--marka); background: color-mix(in srgb, var(--marka-acik) 70%, var(--yuzey)); }
.secim[aria-pressed="true"] .secim__isaret { background: var(--marka); border-color: var(--marka); color: var(--marka-metin); }
.secim__k { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--yuzey-2); }
.secim--hz { grid-template-columns: auto auto 1fr auto; }
.secim__fiyat { font-weight: 700; color: var(--murekkep); font-variant-numeric: tabular-nums; }
.secim__harf { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 18px/1 var(--f-baslik); background: var(--marka-acik); color: var(--marka); }
.secim__bos { font-size: 12.5px; font-weight: 700; color: var(--marka); text-align: right; }
.secim[disabled] { opacity: .5; }

.gunler { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 8px; overflow-x: auto; margin: 0 -18px 16px; padding: 2px 18px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.gunler::-webkit-scrollbar { display: none; }
.gun { scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; padding: 10px 0; border-radius: var(--r-oge); border: 1px solid var(--cizgi); background: var(--yuzey); font-size: 11.5px; color: var(--soluk); font-weight: 700; }
.gun b { font: 700 22px/1.15 var(--f-baslik); color: var(--murekkep); }
.gun em { font-style: normal; color: var(--marka); font-size: 11px; }
.gun.dolu em { color: var(--soluk); }
.gun[aria-pressed="true"] { background: var(--marka); border-color: var(--marka); color: color-mix(in srgb, var(--marka-metin) 80%, transparent); }
.gun[aria-pressed="true"] b, .gun[aria-pressed="true"] em { color: var(--marka-metin); }
.saat-grup { margin-bottom: 16px; }
.saat-grup > p { font-weight: 700; font-size: 13px; color: var(--soluk); margin-bottom: 8px; }
.saat-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.saat { height: 44px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--murekkep); }
.saat:disabled { background: transparent; color: color-mix(in srgb, var(--soluk) 70%, transparent); text-decoration: line-through; cursor: default; border-style: dashed; }
.saat[aria-pressed="true"] { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); }
.bos-not { padding: 22px; border-radius: var(--r-kart); background: var(--yuzey); text-align: center; color: var(--soluk); }
.bos-not b { display: block; color: var(--murekkep); font-family: var(--f-baslik); font-size: 18px; margin-bottom: 4px; }

.alan { display: grid; gap: 6px; margin-bottom: 16px; }
.alan label { font-weight: 700; color: var(--murekkep); font-size: 14px; }
.alan label small { color: var(--soluk); font-weight: 600; }
.alan input, .alan textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-oge); border: 1px solid var(--cizgi); background: var(--yuzey); font-weight: 600; color: var(--murekkep); resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--soluk); font-weight: 500; }
.alan input:focus, .alan textarea:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 22%, transparent); }
.alan__ipucu { font-size: 13px; color: var(--soluk); }
.alan__hata { display: none; font-size: 13px; color: var(--vurgu); font-weight: 700; }
.alan.gecersiz .alan__hata { display: block; }
.alan.gecersiz input { border-color: var(--vurgu); }
.anahtar { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-oge); background: var(--yuzey); cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; }
.anahtar__kol { flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--yuzey-2); position: relative; transition: background .2s; }
.anahtar__kol::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--yuzey); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: translate .25s var(--egri); }
.anahtar input:checked + .anahtar__kol { background: var(--marka); }
.anahtar input:checked + .anahtar__kol::after { translate: 18px 0; }
.anahtar input:focus-visible + .anahtar__kol { outline: 2px solid var(--marka); outline-offset: 3px; }
.anahtar b { display: block; color: var(--murekkep); }
.anahtar small { color: var(--soluk); }

.ozet { border-radius: var(--r-kart); background: var(--yuzey); padding: 6px 18px; box-shadow: var(--golge); margin-bottom: 14px; }
.ozet div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--cizgi); }
.ozet div:first-child { border-top: 0; }
.ozet dt, .ozet span { color: var(--soluk); font-weight: 600; font-size: 13.5px; }
.ozet b { color: var(--murekkep); font-weight: 700; }

.bitti__ust { text-align: center; padding: 8px 0 18px; }
.bitti__ust h3 { font-size: 28px; margin-top: 10px; }
.bitti__ust p { color: var(--soluk); margin-top: 4px; }
.bitti__tik { width: 64px; height: 64px; fill: none; stroke: var(--marka); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bitti__tik circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.bitti__tik path { stroke-dasharray: 36; stroke-dashoffset: 36; }
.rv.bitti .bitti__tik circle { animation: ciz .7s var(--egri) .1s forwards; }
.rv.bitti .bitti__tik path { animation: ciz .45s var(--egri) .65s forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.bilet { position: relative; border-radius: var(--r-kart); background: var(--marka); color: var(--marka-metin); padding: 18px 20px 20px; overflow: hidden;
  -webkit-mask: radial-gradient(circle 10px at 0 74px, transparent 98%, #000) , radial-gradient(circle 10px at 100% 74px, transparent 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 10px at 0 74px, transparent 98%, #000) intersect, radial-gradient(circle 10px at 100% 74px, transparent 98%, #000); }
.bilet__ust { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1.5px dashed color-mix(in srgb, var(--marka-metin) 35%, transparent); }
.bilet__ust b { font: 700 18px/1 var(--f-baslik); }
.bilet__ust span { font-size: 13px; font-weight: 600; opacity: .8; }
.bilet__gun { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.bilet__gun b { font: 700 54px/.9 var(--f-baslik); letter-spacing: -.05em; }
.bilet__gun span { font-weight: 700; }
.bilet dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0 0; }
.bilet dt { font-size: 12px; opacity: .72; font-weight: 600; }
.bilet dd { margin: 2px 0 0; font-weight: 700; }
.bilet dd.genis { grid-column: 1 / -1; }
.bilet__kod { font: 700 18px/1 var(--f-baslik) !important; letter-spacing: .02em; }
.takvim { display: grid; margin-top: 14px; border-radius: var(--r-kart); background: var(--yuzey); overflow: hidden; box-shadow: var(--golge); }
.takvim a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 14px 18px; text-decoration: none; font-weight: 700; color: var(--murekkep); border-top: 1px solid var(--cizgi); }
.takvim a:first-child { border-top: 0; }
.takvim a i:first-child { font-size: 22px; }
.takvim a i:last-child { color: var(--marka); font-size: 18px; }
.takvim small { display: block; font-size: 11.5px; color: var(--soluk); font-weight: 600; }

.wa { margin-top: 14px; border-radius: var(--r-kart); overflow: hidden; background: #e9e1d6; }
:root[data-tema="koyu"] .wa { background: #0d1418; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .wa { background: #0d1418; } }
.wa__ust { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #1f6f5c; color: #fff; }
.wa__ust i { font-size: 26px; }
.wa__ust b { display: block; font-size: 15px; }
.wa__ust small { opacity: .85; font-size: 12.5px; }
.wa__akis { display: grid; gap: 10px; padding: 14px 12px 16px; }
.wa__zaman { justify-self: center; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: #fff; color: #44515a; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
:root[data-tema="koyu"] .wa__zaman { background: #1f2c33; color: #aebac1; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .wa__zaman { background: #1f2c33; color: #aebac1; } }
.wa__mesaj { justify-self: end; max-width: 88%; padding: 9px 11px 6px; border-radius: 12px 4px 12px 12px; background: #d9fdd3; color: #111b21; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
:root[data-tema="koyu"] .wa__mesaj { background: #005c4b; color: #e9edef; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .wa__mesaj { background: #005c4b; color: #e9edef; } }
.wa__mesaj small { display: block; text-align: right; font-size: 11px; opacity: .6; margin-top: 2px; }
.wa__konum { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgb(0 0 0 / .06); font-weight: 700; color: #027eb5; }
.wa__puan { display: flex; gap: 4px; margin-top: 8px; color: #f0a500; font-size: 18px; }
.bitti__btn { display: grid; gap: 8px; margin-top: 16px; }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); translate: -50% calc(100% + 60px + env(safe-area-inset-bottom)); visibility: hidden; padding: 12px 18px; border-radius: 999px; background: var(--murekkep); color: var(--zemin); font-weight: 700; font-size: 14px; box-shadow: var(--golge); transition: translate .5s var(--egri), visibility 0s linear .5s; max-width: calc(100% - 32px); }
.toast.goster { translate: -50% 0; visibility: visible; transition-delay: 0s; }

/* ---------- giriş hareketi: tek orkestrasyon ---------- */
@media (prefers-reduced-motion: no-preference) {
  .giris > * { animation: yuksel .9s var(--egri) both; }
  .giris > :nth-child(2) { animation-delay: .06s; }
  .giris > :nth-child(3) { animation-delay: .12s; }
  .giris > :nth-child(4) { animation-delay: .2s; }
}
@keyframes yuksel { from { opacity: 0; translate: 0 18px; } }
@keyframes sahneGir { from { opacity: 0; scale: 1.06; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- geniş ekran: solda sahne, sağda uygulama ---------- */
@media (min-width: 1024px) {
  .uyg { display: grid; grid-template-columns: minmax(0, 1fr) 520px; }
  .sahne { display: block; position: sticky; top: 0; height: 100dvh; overflow: hidden; background: #0d1716; }
  .sahne__yuva, .sahne__yuva .hikaye { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; }
  .sahne .hikaye__cubuk { top: 24px; left: 48px; right: 48px; }
  .sahne .hikaye__alt { left: auto; right: 48px; bottom: 44px; flex-direction: column; align-items: flex-end; text-align: right; }
  .sahne .hikaye__yazi b { font-size: 30px; }
  .sahne__alt { position: absolute; z-index: 4; left: 48px; bottom: 44px; display: grid; gap: 10px; color: #fff; pointer-events: none; max-width: 46%; }
  .sahne__ad { font: 700 clamp(88px, 9vw, 140px)/.82 var(--f-baslik); letter-spacing: -.06em; color: #fff; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
  .sahne__ek { font-weight: 600; color: rgb(255 255 255 / .88); max-width: 34ch; }
  .sahne .durum, .sahne .durum.acik { color: #fff; } .sahne .durum::before { background: #fff; } .sahne .durum.acik::before { background: #7cc7bd; }
  .akis { max-width: none; margin: 0; border-left: 1px solid var(--cizgi); background: var(--zemin); padding-bottom: 40px; }
  main { padding-inline: 32px; }
  .ust { padding-inline: 32px; }
  .logo span { display: none; }
  .ust__menu { display: flex; gap: 4px; }
  .ust__menu a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--metin); }
  .ust__menu a:hover { background: var(--yuzey-2); }
  .sekmeler { display: none; }
  .hizmet-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .isler__serit { grid-auto-columns: 30%; }
  .hikaye { height: auto; }
  .ust__sag a.ikon { display: none; }
  .ust__menu a { padding: 8px 10px; }
  .rv__perde { left: 0; }
  .rv__kutu { left: auto; width: 520px; translate: 100% 0; box-shadow: -30px 0 60px -30px rgb(0 0 0 / .35); }
  .rv.acik .rv__kutu { translate: 0 0; }
  .ust__sag::before { content: none; }
  .ust .btn-randevu { display: inline-flex; }
}
.btn-randevu { display: none; }

/* uzman kartı: puan, deneyim, uzmanlık etiketleri */
.secim--uzman { align-items: start; }
.secim--uzman .secim__harf { margin-top: 2px; }
.uz-bilgi { display: grid; gap: 3px; min-width: 0; }
.uz-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--metin); margin-top: 3px; }
.uz-puan { display: inline-flex; align-items: center; gap: 3px; } .uz-puan i { color: var(--vurgu); } .uz-puan small { color: var(--soluk); font-weight: 600; }
.uz-etiket { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.uz-etiket em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--yuzey-2); color: var(--metin); }
.secim--uzman[aria-pressed="true"] .uz-etiket em { background: var(--yuzey); }
/* panel bildirimi: daha uzun ve eylemli */
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; border-radius: 18px; padding: 12px 14px; width: min(440px, calc(100% - 24px)); text-align: left; }
.toast > i { font-size: 26px; color: #7cc7bd; }
.toast b { display: block; font-size: 14px; } .toast small { display: block; font-weight: 500; font-size: 12.5px; opacity: .8; line-height: 1.35; }
.toast a { color: inherit; font-weight: 800; font-size: 13px; padding: 8px 12px; border-radius: 999px; background: rgb(255 255 255 / .12); text-decoration: none; white-space: nowrap; }