/* Sahne: Mobil Uygulama (hizmet-mobil.html) — yalnızca bu sayfada yüklenir.
   Hero: iki telefon (iOS açık / Android koyu), temsilî randevu uygulaması; üç ekran kayar, sekme göstergesi izler, bildirim düşer (12 s CSS döngüsü).
   İmza: yaklaşım seçimi kartları (mobil web / çapraz platform / yerel). */
.sd-app{--T:12s;position:relative;height:min(62vh,560px);display:flex;justify-content:center;align-items:flex-end;gap:4%}
.sd-app__phone{position:relative;height:100%;aspect-ratio:9/19;border-radius:12% / 5.7%;background:#0B0C10;padding:2.5%;box-shadow:0 30px 60px rgba(31,34,51,.28),0 0 0 1.5px rgba(255,255,255,.1)}
.sd-app__phone--a{z-index:2}.sd-app__phone--b{height:82%;translate:0 -4%;opacity:.95}
.sd-app__bar{position:absolute;left:8%;right:8%;top:3.2%;display:flex;justify-content:space-between;font:600 10px/1 var(--sd-font);color:#111;z-index:2}
.sd-app__bar i{width:34px;height:10px;border-radius:5px;background:#111}.sd-app__bar--and{color:#fff}.sd-app__bar--and i{background:#fff;width:26px}
.sd-app__scr{position:relative;width:100%;height:100%;border-radius:10% / 4.7%;overflow:clip;background:#F7F5F1;color:var(--sd-navy);font:500 11px/1.3 var(--sd-font)}
.sd-app__scr--dark{background:#1B1E2E;color:#fff}
.sd-app__view{display:flex;width:300%;height:100%;animation:sd-app-slide var(--T) var(--sd-ease-in-out) infinite}
.sd-app__pg{width:33.333%;flex:none;padding:46px 14px 60px;display:grid;gap:10px;align-content:start}
.sd-app__scr--dark .sd-app__pg{width:100%}
.sd-app__pg h4{margin:0 0 4px;font-size:15px;color:inherit}
.sd-app__row{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.75)}
.sd-app__scr--dark .sd-app__row{background:rgba(255,255,255,.07)}
.sd-app__row i{grid-row:1/3;width:28px;height:28px;border-radius:8px;background:var(--g-soft)}.sd-app__scr--dark .sd-app__row i{background:rgba(255,255,255,.12)}
.sd-app__row b{height:7px;width:70%;border-radius:4px;background:rgba(31,34,51,.35)}.sd-app__row span{height:6px;width:45%;border-radius:4px;background:rgba(31,34,51,.15)}
.sd-app__scr--dark .sd-app__row b,.sd-app__scr--dark .sd-app__row span{background:rgba(255,255,255,.3)}
.sd-app__card{padding:12px;border-radius:12px;background:#fff;box-shadow:var(--sd-shadow-card)}.sd-app__card b{display:block;font-size:12px}.sd-app__card span{font-size:10px;color:var(--sd-text-muted)}
.sd-app__card--hi{background:var(--g);color:#fff}.sd-app__card--hi span{color:rgba(255,255,255,.75)}
.sd-app__scr--dark .sd-app__card{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}.sd-app__scr--dark .sd-app__card span{color:rgba(255,255,255,.6)}
.sd-app__cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.sd-app__cal i{aspect-ratio:1;border-radius:50%;background:#fff}.sd-app__cal i.on{background:var(--g);box-shadow:0 0 0 3px var(--g-soft)}
.sd-app__slots{display:flex;gap:6px}.sd-app__slots span{flex:1;padding:7px 0;border-radius:8px;border:1px solid rgba(31,34,51,.15);text-align:center;font-size:10px}.sd-app__slots .on{background:var(--sd-navy);color:#fff;border-color:var(--sd-navy)}
.sd-app__btn{margin-top:4px;padding:10px;border-radius:10px;background:var(--sd-red);color:#fff;text-align:center;font-weight:600;font-size:11px}
.sd-app__map{height:70px;border-radius:10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 14px),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 14px),#243055;position:relative}
.sd-app__map::after{content:"";position:absolute;left:58%;top:40%;width:10px;height:10px;border-radius:50%;background:var(--sd-red-bright);box-shadow:0 0 0 5px rgba(224,56,63,.3)}
.sd-app__toast{position:absolute;left:8%;right:8%;top:8%;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:var(--sd-shadow-float);translate:0 -160%;animation:sd-app-toast var(--T) var(--sd-ease-spring) infinite}
.sd-app__toast i{width:28px;height:28px;border-radius:8px;background:#1A9E5C;flex:none}.sd-app__toast b{display:block;font-size:11px}.sd-app__toast span{font-size:10px;color:var(--sd-text-muted)}
.sd-app__tabs{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:12px 12px 18px;background:#fff;border-top:1px solid rgba(31,34,51,.08)}
.sd-app__tabs i{width:20px;height:20px;border-radius:6px;background:rgba(31,34,51,.18)}
.sd-app__tabs em{position:absolute;left:calc(12.5% - 12px);bottom:10px;width:24px;height:3px;border-radius:2px;background:var(--g);animation:sd-app-tab var(--T) var(--sd-ease-in-out) infinite}
.sd-app__chip{position:absolute;z-index:3;background:#fff;box-shadow:var(--sd-shadow-card)}
.sd-app__chip--1{left:0;top:30%}.sd-app__chip--2{right:-2%;top:16%}.sd-app__chip--3{left:8%;bottom:6%}
.sd-app:not(.in) *{animation-play-state:paused}
@keyframes sd-app-slide{0%,28%{translate:0 0}33%,61%{translate:-33.333% 0}66%,94%{translate:-66.666% 0}100%{translate:0 0}}
@keyframes sd-app-tab{0%,28%{translate:0 0}33%,61%{translate:calc(100%*2.95) 0}66%,94%{translate:calc(100%*5.9) 0}100%{translate:0 0}}
@keyframes sd-app-toast{0%,44%{translate:0 -160%}50%,58%{translate:0 0}62%,100%{translate:0 -160%}}
/* İmza: yaklaşım kartları */
.sd-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sd-pick__c{position:relative;padding:28px 26px;border-radius:var(--sd-r-card);background:#fff;box-shadow:var(--sd-shadow-card);border:2px solid transparent}
.sd-pick__c--on{border-color:var(--g)}.sd-pick__c--on::after{content:"Önerilen";position:absolute;right:16px;top:-12px;padding:5px 10px;border-radius:6px;background:var(--g);color:#fff;font:600 .75rem/1 var(--sd-font)}
.sd-pick__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--g-soft);color:var(--g);margin-bottom:16px}.sd-pick__ic svg{width:22px;height:22px}
.sd-pick__c h3{font-size:var(--sd-fs-h4)}.sd-pick__c p{font-size:.9375rem;color:var(--sd-text-muted)}.sd-pick__c p b{color:var(--sd-navy)}
.sd-pick__c small{display:inline-block;margin-top:6px;padding:5px 9px;border-radius:6px;background:var(--sd-grey-100);font:600 .75rem/1 var(--sd-font);color:var(--sd-navy)}
@media (max-width:1024px){.sd-pick{grid-template-columns:minmax(0,1fr)}.sd-app{height:min(60vh,520px)}}
@media (max-width:720px){.sd-app{height:440px}.sd-app__phone--b{display:none}.sd-app__chip--2{right:0}.sd-app__chip--1{left:0}}