/* Karga Tattoo — grafik */
:root{--zemin:#0C0C0C;--yuzey:#161616;--yuzey2:#222222;--metin:#ECE6DA;--soluk:#9A948A;--vurgu:#E0362C;--vurguMetin:#FFFFFF;--vurguAcik:rgba(224,54,44,.16);--cizgi:rgba(236,230,218,.12);--cizgiKoyu:rgba(236,230,218,.38);--tema:#0C0C0C;--r:0;--rBtn:0;--rSaat:0;--rGun:0;--h1:42px;--h2:24px;--baslikAgirlik:400;--kahramanBoy:580px;--logoBoy:64px;--perde:linear-gradient(to top, #0C0C0C 15%, rgba(12,12,12,.6) 60%, rgba(12,12,12,.2) 100%);--heroOdak:center;--ustAdBoy:16px;--ustAdAra:.06em;--baslik:'Archivo Black', 'Arial Black', sans-serif;--govde:'Space Grotesk', 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: grafik */
.kahraman{background:#0C0C0C}
.kahraman__izgara{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(236,230,218,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(236,230,218,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%)}
.kahraman__kesik{position:absolute;right:-30px;top:-20px;width:62%;height:70%;background:var(--vurgu);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);z-index:-1;opacity:.95}
.kahraman__kesik::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");mix-blend-mode:multiply}
.kahraman__dev{position:absolute;left:14px;bottom:270px;font-family:var(--baslik);font-size:150px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(236,230,218,.22);letter-spacing:-.04em;z-index:-1;pointer-events:none;user-select:none}
.kahraman__baslik{text-transform:uppercase;letter-spacing:-.01em;line-height:.98}
.kahraman__ust{color:var(--vurgu);font-weight:700}
.ust{background:rgba(12,12,12,.9)}
.ust__ad{text-transform:uppercase}
.hkart,.ukart,.kart,.rkart,.gun,.saat{border-width:1.5px}
.hkart__ad{text-transform:uppercase;letter-spacing:.02em;font-size:15px;font-weight:700}
.hkart__sag b{color:var(--vurgu)}
.bolum__t{text-transform:uppercase;letter-spacing:.02em}
.bolum__t::before{content:"";display:inline-block;width:10px;height:10px;background:var(--vurgu);margin-right:10px;vertical-align:middle}
.ukart__avatar{--avatarZemin:#222;--avatarMetin:#ECE6DA;border-radius:0;border:1.5px solid var(--cizgiKoyu)}
.btn{text-transform:uppercase;letter-spacing:.1em;font-size:14px}
.btn--cizgi{border-width:1.5px}
.rozet{border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}
.rozet--acik{color:#ECE6DA;background:var(--vurgu);border-color:var(--vurgu)}
.nokta--acik{background:var(--vurgu);box-shadow:0 0 0 4px rgba(224,54,44,.25)}
.adim__n{border-radius:0;border-width:1.5px}
.adim__t{text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.adim.is-aktif .adim__n{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.gun.is-sel{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.gun__n{font-size:22px}
.saat--dolu span,.gun--dolu .gun__ay,.gun--kapali .gun__ay,.saat--izin span{color:#FF7B73}
.mola{border-color:var(--vurgu);color:#ECE6DA;background:rgba(224,54,44,.1)}
.alt{background:rgba(12,12,12,.94)}
.alt__btn.is-aktif{color:var(--vurgu);background:transparent}
.alt__btn span{text-transform:uppercase;letter-spacing:.06em;font-size:9.5px}
.kurbar{background:var(--vurgu);color:#fff}.kurbar__btn{border-radius:0;background:#0C0C0C;color:#fff;text-transform:uppercase;letter-spacing:.08em}
.onay__t{text-transform:uppercase}
.onay__kod b{background:var(--vurgu);color:#fff;border-radius:0}
.altbar{box-shadow:0 -8px 24px rgba(0,0,0,.5)}
.btn--wa{background:#1f9d55}
.alan input:focus{box-shadow:0 0 0 2px var(--vurgu)}