/* Bonbon Nail Studio — oyuncu */
:root{--zemin:#FFF6F9;--yuzey:#FFFFFF;--yuzey2:#FFE6EF;--metin:#3A2540;--soluk:#8A6F92;--vurgu:#F0508A;--vurguMetin:#FFFFFF;--vurguAcik:rgba(240,80,138,.12);--cizgi:#F3DCE8;--cizgiKoyu:#DDB9D0;--tema:#FFF6F9;--r:22px;--rBtn:999px;--rSaat:16px;--rGun:20px;--h1:40px;--h2:26px;--baslikAgirlik:600;--kahramanBoy:560px;--logoBoy:72px;--perde:linear-gradient(to top, #FFF6F9 22%, rgba(255,246,249,.82) 55%, rgba(255,200,222,.25) 100%);--heroOdak:50% 45%;--baslik:'Fredoka', 'Nunito', system-ui, sans-serif;--govde:'Nunito', system-ui, sans-serif}
/* Ortak iskelet. Renk, font ve köşe ölçüleri :root'ta işletmeye göre değişir; stil varyantları body[data-stil] ile. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;min-height:100dvh;background:var(--zemin);color:var(--metin);font-family:var(--govde);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom));overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
svg{display:block}
b{font-weight:600}
main{display:block;max-width:560px;margin:0 auto}

/* üst bar */
.ust{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;background:color-mix(in srgb,var(--zemin) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cizgi)}
.ust__geri{width:40px;height:40px;margin-left:-8px;display:grid;place-items:center;border-radius:50%}
.ust__geri svg{width:24px;height:24px}
.ust__geri:active{background:var(--yuzey2)}
.ust__marka{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ust__logo{width:32px;height:32px;flex:none}
.ust__logo svg{width:100%;height:100%}
.ust__ad{font-family:var(--baslik);font-size:var(--ustAdBoy,19px);letter-spacing:var(--ustAdAra,0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rozet{flex:none;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--cizgi);background:var(--yuzey)}
.rozet--acik{color:#1f8a4c;border-color:rgba(31,138,76,.35);background:rgba(31,138,76,.08)}
.rozet--mola{color:#b7791f;border-color:rgba(183,121,31,.35);background:rgba(183,121,31,.1)}
.rozet--kapali{color:var(--soluk)}

/* kur çubuğu */
.kurbar{position:sticky;top:calc(58px + env(safe-area-inset-top));z-index:29;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px 10px 14px;background:var(--metin);color:var(--zemin)}
.kurbar__ikon{width:30px;height:30px;flex:none}
.kurbar__ikon svg{width:100%;height:100%}
.kurbar__yazi{flex:1;font-size:13.5px;line-height:1.3}
.kurbar__btn{padding:8px 14px;border-radius:999px;background:var(--zemin);color:var(--metin);font-weight:700;font-size:13.5px}
.kurbar__kapat{width:32px;height:32px;display:grid;place-items:center;opacity:.7}
.kurbar__kapat svg{width:16px;height:16px}

/* ekranlar */
/* .ekran yalnız opaklıkla girer: transform animasyonu içindeki sabit (fixed) alt barı ekrana değil bölüme bağlıyordu */
.ekran{display:none;animation:sol .22s ease both}
.ekran.is-acik{display:block}
@keyframes sol{from{opacity:0}to{opacity:1}}
@keyframes gir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ekran,.hkart,.saat,.gun{animation:none!important;transition:none!important}}

/* kahraman */
.kahraman{position:relative;overflow:hidden;min-height:var(--kahramanBoy,560px);display:flex;align-items:flex-end;isolation:isolate}
.kahraman__gorsel{position:absolute;inset:0;z-index:-2}
.kahraman__gorsel img{width:100%;height:100%;object-fit:cover;object-position:var(--heroOdak,center)}
.kahraman__perde{position:absolute;inset:0;z-index:-1;background:var(--perde)}
.kahraman__ic{position:relative;padding:28px 20px 26px;width:100%}
.kahraman__logo{width:var(--logoBoy,72px);height:var(--logoBoy,72px);margin-bottom:18px}
.kahraman__logo svg{width:100%;height:100%}
.kahraman__ust{margin:0 0 6px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk)}
.kahraman__baslik{margin:0 0 10px;font-family:var(--baslik);font-weight:var(--baslikAgirlik,600);font-size:var(--h1,40px);line-height:1.08;letter-spacing:var(--h1Ara,-.01em);text-wrap:balance}
.kahraman__alt{margin:0 0 20px;color:var(--soluk);font-size:16px;max-width:34ch}
.kahraman__saat{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--soluk)}
.nokta{width:8px;height:8px;border-radius:50%;background:#aaa;flex:none}
.nokta--acik{background:#22a35b;box-shadow:0 0 0 4px rgba(34,163,91,.18)}
.nokta--kapali{background:#c0392b}

/* bölümler */
.bolum{padding:26px 20px 4px}
.bolum--son{padding-bottom:16px}
.bolum__bas{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.bolum__t{margin:0;font-family:var(--baslik);font-weight:var(--baslikAgirlik,600);font-size:var(--h2,26px);letter-spacing:var(--h2Ara,0)}
.bolum__n{font-size:13px;color:var(--soluk)}
.bolum__not{margin:10px 2px 0;font-size:13.5px;color:var(--soluk)}
.imza{margin:26px 0 0;text-align:center;font-size:12.5px;color:var(--soluk);letter-spacing:.04em}

/* hizmet kartı */
.liste{display:flex;flex-direction:column;gap:var(--listeAra,10px)}
.hkart{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 16px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r,16px);transition:transform .12s ease,border-color .15s,background .15s}
.hkart:active{transform:scale(.985)}
.hkart__ic{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hkart__ad{font-size:16.5px;font-weight:600}
.hkart__ac{font-size:13px;color:var(--soluk);line-height:1.35}
.hkart__sag{text-align:right;display:flex;flex-direction:column;gap:3px;flex:none}
.hkart__sag b{font-size:15.5px;font-variant-numeric:tabular-nums}
.hkart__sag span{font-size:12.5px;color:var(--soluk)}
.hkart.is-sel{border-color:var(--vurgu);background:var(--vurguAcik);box-shadow:inset 0 0 0 1px var(--vurgu)}

/* uzman kartı */
.ekip{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ekip--sec{grid-template-columns:1fr}
.ukart{display:flex;align-items:center;gap:12px;padding:14px;text-align:left;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r,16px);width:100%}
.ekip:not(.ekip--sec) .ukart{flex-direction:column;text-align:center;gap:10px;padding:18px 12px}
.ukart__avatar{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:var(--avatarR,50%);font-family:var(--baslik);font-size:19px;font-weight:600;letter-spacing:.02em;background:var(--avatarZemin,hsl(var(--h) 35% 90%));color:var(--avatarMetin,hsl(var(--h) 30% 28%))}
.ukart__ic{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ukart__ic b{font-size:15.5px}
.ukart__ic span{font-size:13px;color:var(--soluk)}
.ukart__sec{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cizgiKoyu);flex:none;position:relative}
.ukart.is-sel{border-color:var(--vurgu);background:var(--vurguAcik);box-shadow:inset 0 0 0 1px var(--vurgu)}
.ukart.is-sel .ukart__sec{border-color:var(--vurgu);background:var(--vurgu)}
.ukart.is-sel .ukart__sec::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--vurguMetin);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* kart */
.kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r,16px);padding:4px 16px}
.kart__satir{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--cizgi);font-size:14.5px}
.kart__satir:last-child{border-bottom:0}
.kart__satir span{color:var(--soluk)}
.kart__satir b{text-align:right;max-width:60%}
.kart--konum{padding:16px}
.konum__adres{margin:0 0 14px;font-size:15px}
.btnsatir{display:flex;gap:10px}
.btnsatir--dikey{flex-direction:column}
.btnsatir .btn{flex:1}

/* düğmeler */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--rBtn,999px);font-weight:700;font-size:16px;letter-spacing:var(--btnAra,0);text-transform:var(--btnBuyuk,none);transition:transform .12s ease,opacity .15s}
.btn:active{transform:scale(.975)}
.btn--ana{background:var(--vurgu);color:var(--vurguMetin)}
.btn--ana:disabled{opacity:.42;cursor:default;transform:none}
.btn--cizgi{border:1.5px solid var(--cizgiKoyu);color:var(--metin);background:transparent}
.btn--tam{width:100%}
.btn--wa{background:#1f9d55;color:#fff}
.btn--wa svg{width:22px;height:22px}

/* adımlar */
.adimlar{display:flex;justify-content:space-between;list-style:none;margin:0;padding:18px 20px 6px;counter-reset:a}
.adim{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;opacity:.45}
.adim::before{content:"";position:absolute;top:14px;left:calc(50% + 18px);right:calc(-50% + 18px);height:1.5px;background:var(--cizgiKoyu)}
.adim:last-child::before{display:none}
.adim__n{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--cizgiKoyu);font-size:13px;font-weight:700;background:var(--zemin)}
.adim__t{font-size:11.5px;letter-spacing:.02em;white-space:nowrap}
.adim.is-aktif{opacity:1}
.adim.is-aktif .adim__n{background:var(--metin);color:var(--zemin);border-color:var(--metin)}
.adim.is-bitti{opacity:.8}
.adim.is-bitti .adim__n{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurguMetin)}
.panel{display:none;padding:12px 20px 110px}
.panel.is-acik{display:block;animation:gir .25s ease both}
.panel__t{margin:0 0 4px;font-family:var(--baslik);font-weight:var(--baslikAgirlik,600);font-size:var(--h2,30px);letter-spacing:var(--h2Ara,0)}
.panel__ac{margin:0 0 18px;color:var(--soluk);font-size:14.5px}

/* günler */
.gunler{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 20px;padding:4px 20px 6px;scroll-snap-type:x proximity}
.gunler::-webkit-scrollbar{display:none}
.gun{flex:none;width:66px;padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--rGun,var(--r,16px));scroll-snap-align:center}
.gun__ad{font-size:11.5px;color:var(--soluk)}
.gun__n{font-family:var(--baslik);font-size:24px;font-weight:var(--baslikAgirlik,600);line-height:1.1}
.gun__ay{font-size:11.5px;color:var(--soluk)}
.gun:disabled{opacity:.42}
.gun--dolu .gun__ay,.gun--kapali .gun__ay{color:#c0392b}
.gun.is-sel{background:var(--metin);border-color:var(--metin);color:var(--zemin)}
.gun.is-sel .gun__ad,.gun.is-sel .gun__ay{color:inherit;opacity:.75}

/* saatler */
.saat__grup{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soluk)}
.saat__grup em{font-style:normal;letter-spacing:0;text-transform:none;font-size:12.5px}
.saat__izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.saat{padding:10px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--rSaat,12px);transition:transform .1s}
.saat b{font-size:16px;font-variant-numeric:tabular-nums}
.saat span{font-size:11px;color:var(--soluk)}
.saat:active:not(:disabled){transform:scale(.96)}
.saat--dolu,.saat--izin{opacity:.5;background:transparent;border-style:dashed}
.saat--dolu b{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--soluk)}
.saat--dolu span,.saat--izin span{color:#c0392b}
.saat.is-sel{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurguMetin)}
.saat.is-sel span{color:inherit;opacity:.8}
.mola{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;color:var(--soluk);background:var(--yuzey2);border-radius:var(--rSaat,12px);border:1px dashed var(--cizgiKoyu)}
.mola svg{width:18px;height:18px;flex:none}
.bos{margin:16px 0;text-align:center;color:var(--soluk)}
.bos--kart{padding:30px 16px;background:var(--yuzey);border:1px dashed var(--cizgiKoyu);border-radius:var(--r,16px)}
.bos--kart p{margin:0 0 14px}

/* form */
.alan{display:block;margin-bottom:14px}
.alan span{display:block;margin-bottom:6px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soluk)}
.alan em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}
.alan input{width:100%;height:52px;padding:0 16px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--rSaat,12px);outline:none;font-size:16px}
.alan input:focus{border-color:var(--vurgu);box-shadow:0 0 0 3px var(--vurguAcik)}
.alan input::placeholder{color:var(--soluk);opacity:.7}
.hata{margin:-4px 0 12px;color:#c0392b;font-size:13.5px}
.ozet{margin-top:4px}

/* alt özet barı */
.altbar{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:25;display:none;align-items:center;gap:12px;max-width:560px;margin:0 auto;padding:12px 16px;background:var(--yuzey);border-top:1px solid var(--cizgi);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
body[data-ekran="ekranRandevu"] .altbar{display:flex}
.altbar__ozet{flex:1;min-width:0;display:flex;flex-direction:column}
.altbar__ozet b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.altbar__ozet span{font-size:12.5px;color:var(--soluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.altbar .btn{min-height:48px;padding:0 20px;flex:none}

/* onay */
.onay{padding:40px 20px 40px;text-align:center}
.onay__tik{width:84px;height:84px;margin:0 auto 18px}
.onay__halka{stroke:var(--vurgu);stroke-width:2;stroke-dasharray:160;stroke-dashoffset:160;animation:ciz .7s ease forwards}
.onay__cizgi{stroke:var(--vurgu);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:ciz .45s .5s ease forwards}
@keyframes ciz{to{stroke-dashoffset:0}}
.onay__t{margin:0 0 6px;font-family:var(--baslik);font-weight:var(--baslikAgirlik,600);font-size:var(--h2,30px)}
.onay__kod{margin:0 0 20px;color:var(--soluk);font-size:14.5px}
.onay__kod b{display:inline-block;margin-left:6px;padding:4px 12px;border-radius:999px;background:var(--yuzey2);color:var(--metin);font-variant-numeric:tabular-nums;letter-spacing:.12em;font-size:15px}
.kart--onay{text-align:left;margin-bottom:14px}
.onay__not{margin:0 0 22px;font-size:13.5px;color:var(--soluk)}

/* randevularım */
.rkart{display:flex;align-items:center;gap:14px;padding:14px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r,16px);margin-bottom:10px}
.rkart--gecmis{opacity:.55}
.rkart__tarih{width:56px;flex:none;text-align:center;padding:8px 0;border-radius:var(--rSaat,12px);background:var(--yuzey2);display:flex;flex-direction:column;line-height:1.15}
.rkart__tarih b{font-family:var(--baslik);font-size:22px}
.rkart__tarih span{font-size:11.5px;color:var(--soluk)}
.rkart__ic{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rkart__ic b{font-size:15.5px}
.rkart__ic span{font-size:13px;color:var(--soluk)}
.rkart__kod{letter-spacing:.04em}
.rkart__iptal{flex:none;font-size:13.5px;font-weight:600;color:#c0392b;padding:8px 10px}

/* alt sekme */
.alt{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;max-width:560px;margin:0 auto;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--zemin) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--cizgi)}
.alt__btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border-radius:var(--rSaat,12px);color:var(--soluk);font-size:10.5px;letter-spacing:.01em;min-height:54px}
.alt__btn svg{width:23px;height:23px}
.alt__btn.is-aktif{color:var(--metin);background:var(--yuzey2)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:40;max-width:calc(100% - 40px);padding:11px 16px;border-radius:999px;background:var(--metin);color:var(--zemin);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}
.toast.is-acik{opacity:1;transform:translate(-50%,0)}

@media (min-width:600px){.kahraman{border-radius:0 0 28px 28px}.saat__izgara{grid-template-columns:repeat(4,1fr)}}

/* stil: oyuncu */
body{font-weight:600}
.kahraman::before{content:"";position:absolute;right:-60px;top:40px;width:220px;height:220px;border-radius:50%;background:#C9B6F2;opacity:.55;filter:blur(2px);z-index:-1}
.kahraman::after{content:"";position:absolute;left:-40px;top:220px;width:150px;height:150px;border-radius:50%;background:#BDEFD8;opacity:.6;z-index:-1}
.kahraman__ust{color:var(--vurgu);letter-spacing:.08em;font-weight:800}
.kahraman__baslik{color:#3A2540}
.hkart,.ukart,.kart,.gun,.saat,.rkart,.alan input{border:2px solid var(--cizgi)}
.hkart,.ukart,.kart,.rkart{box-shadow:0 4px 0 #F3DCE8}
.hkart:active{transform:translateY(2px);box-shadow:0 2px 0 #F3DCE8}
.hkart.is-sel,.ukart.is-sel{box-shadow:0 4px 0 var(--vurgu)}
.hkart__sag b{color:var(--vurgu)}
.ukart__avatar{--avatarZemin:hsl(var(--h) 80% 90%);--avatarMetin:hsl(var(--h) 45% 35%);border-radius:40% 60% 55% 45%/55% 45% 55% 45%}
.btn--ana{box-shadow:0 5px 0 #B93A68}.btn--ana:active{transform:translateY(3px);box-shadow:0 2px 0 #B93A68}
.btn--ana:disabled{box-shadow:none}
.adim__n{border-width:2px}.adim.is-aktif .adim__n{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.adim.is-bitti .adim__n{background:#BDEFD8;border-color:#BDEFD8;color:#1f5a3d}
.gun.is-sel{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.saat.is-sel{box-shadow:0 3px 0 #B93A68}
.saat__grup{color:#A57DB5}
.mola{background:#FFF1C9;border:2px dashed #F3D27A;color:#7A5A12}
.rozet--acik{color:#1f8a4c;background:#DDF7E8;border-color:#BDEFD8}
.alt__btn.is-aktif{color:var(--vurgu);background:var(--yuzey2)}
.onay__halka,.onay__cizgi{stroke:#F0508A}