*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#ff950e;--orange-dark:#fe6300;--orange-light:#ffaf15;
  --gradient:linear-gradient(135deg,#fe6300,#ffaf15);
  --white:#ffffff;--bg:#f7f8fc;--text:#1a1a2e;--text-muted:#7a7a9a;--border:#e8e8f0;
}
body{font-family:'Jost',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* LAYOUT */
.page-wrap{display:grid;grid-template-columns:400px 1fr;min-height:100vh}

/* LEFT */
.left-panel{background:var(--gradient);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 40px}
.left-panel::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:rgba(255,255,255,.08);border-radius:50%}
.left-panel::after{content:'';position:absolute;bottom:-80px;left:-80px;width:300px;height:300px;background:rgba(0,0,0,.06);border-radius:50%}
.brand-logo{display:flex;align-items:center;gap:12px;margin-bottom:48px;position:relative;z-index:2}
.brand-icon{width:48px;height:48px;background:rgba(255,255,255,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:white}
.brand-name{font-size:24px;font-weight:800;color:white;letter-spacing:-.5px}
.steps-nav{display:flex;flex-direction:column;position:relative;z-index:2;margin-bottom:auto}
.steps-nav::before{content:'';position:absolute;left:22px;top:24px;bottom:24px;width:2px;background:rgba(255,255,255,.25)}
.step-item{display:flex;align-items:flex-start;gap:20px;padding:14px 0;position:relative}
.sdot{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:rgba(255,255,255,.5);flex-shrink:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:2}
.step-item.active .sdot{background:white;border-color:white;color:var(--orange-dark);transform:scale(1.1);box-shadow:0 0 0 6px rgba(255,255,255,.2)}
.step-item.done .sdot{background:rgba(255,255,255,.9);border-color:white;color:var(--orange-dark)}
.slabel{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-bottom:2px}
.stitle{font-size:15px;font-weight:700;color:rgba(255,255,255,.5);transition:color .3s}
.step-item.active .slabel,.step-item.active .stitle,.step-item.done .slabel,.step-item.done .stitle{color:rgba(255,255,255,.9)}
.info-card{background:rgba(255,255,255,.12);border-radius:16px;padding:18px 22px;border:1px solid rgba(255,255,255,.2);position:relative;z-index:2;margin-top:28px}
.irow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.irow:last-child{margin-bottom:0}
.iicon{width:32px;height:32px;background:rgba(255,255,255,.15);border-radius:9px;display:flex;align-items:center;justify-content:center;color:white;font-size:13px;flex-shrink:0}
.itext{font-size:13px;color:rgba(255,255,255,.85);font-weight:500}

/* RIGHT */
.right-panel{background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:56px 68px;position:relative}
.prog-bar{position:absolute;top:0;left:0;right:0;height:4px;background:var(--border);overflow:hidden}
.prog-fill{height:100%;background:var(--gradient);width:25%;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* Form panels */
.fpanel{display:none;animation:fslide .4s ease;max-width:560px}
.fpanel.active{display:block}
@keyframes fslide{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.sctr{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.ptitle{font-size:32px;font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-1px;margin-bottom:8px}
.ptitle span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.psub{font-size:14px;color:var(--text-muted);font-family:'Lato',sans-serif;line-height:1.6;margin-bottom:28px}

/* Fields */
.fg{margin-bottom:16px}
.flabel{display:block;font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}
.fw{position:relative}
.ficon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px;pointer-events:none;transition:color .3s}
.finput{width:100%;height:52px;border:2px solid var(--border);border-radius:13px;padding:0 16px 0 46px;font-family:'Jost',sans-serif;font-size:15px;font-weight:500;color:var(--text);background:var(--bg);outline:none;transition:all .3s;appearance:none}
.finput:focus{border-color:var(--orange);background:white;box-shadow:0 0 0 4px rgba(255,149,14,.1)}

/* Services */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.svc-card{border:2px solid var(--border);border-radius:13px;padding:14px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);background:var(--bg);position:relative}
.svc-card:hover{border-color:var(--orange-light);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,149,14,.12)}
.svc-card.selected{border-color:var(--orange);background:white;box-shadow:0 8px 24px rgba(255,149,14,.18)}
.svc-ico{font-size:24px;display:block;margin-bottom:7px}
.svc-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.svc-price{font-size:13px;font-weight:600;color:var(--orange)}
.svc-dur{font-size:11px;color:var(--text-muted);margin-top:2px}
.svc-chk{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--gradient);color:white;font-size:10px;display:none;align-items:center;justify-content:center}
.svc-card.selected .svc-chk{display:flex}

/* Staff */
.staff-grid{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.stcard{display:flex;align-items:center;gap:13px;border:2px solid var(--border);border-radius:13px;padding:12px 16px;cursor:pointer;transition:all .3s;background:var(--bg)}
.stcard:hover{border-color:var(--orange-light)}
.stcard.selected{border-color:var(--orange);background:white;box-shadow:0 5px 18px rgba(255,149,14,.14)}
.stavt{width:42px;height:42px;border-radius:11px;background:var(--gradient);color:white;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stnm{font-size:14px;font-weight:700;color:var(--text)}
.strl{font-size:12px;color:var(--text-muted)}
.load-txt{text-align:center;padding:18px;color:var(--text-muted);font-size:14px}

/* Calendar */
.cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cnav{width:34px;height:34px;border:none;background:var(--bg);border-radius:9px;cursor:pointer;color:var(--text-muted);font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.cnav:hover{background:var(--gradient);color:white}
.cmon{font-size:15px;font-weight:700;color:var(--text)}
.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:18px}
.ddh{text-align:center;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:3px 0}
.dcell{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;transition:all .2s;background:var(--bg);border:2px solid transparent}
.dcell:hover:not(.disabled){border-color:var(--orange-light);color:var(--orange)}
.dcell.selected{background:var(--gradient);color:white;border-color:transparent}
.dcell.today{border-color:var(--orange);color:var(--orange)}
.dcell.disabled{color:var(--border);cursor:not-allowed}
.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:7px;margin-bottom:18px;min-height:44px}
.tslot{height:44px;border:2px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .2s;background:var(--bg);position:relative}
.tslot:hover{border-color:var(--orange-light);color:var(--orange);background:rgba(255,149,14,.06);transform:translateY(-1px)}
.tslot.selected{background:var(--gradient);color:white;border-color:transparent;box-shadow:0 4px 14px rgba(255,149,14,.35)}
.tslot.booked{background:#f5f5f5;color:#bbb;cursor:not-allowed;pointer-events:none;border-color:#e8e8e8;border-style:dashed}
.tslot.booked:hover{transform:none}
.tslot.booked::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;font-size:10px;color:#ccc;margin-left:3px}

/* Summary */
.sum-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;margin-bottom:22px}
.scard{background:var(--bg);border-radius:13px;padding:16px}
.si{width:34px;height:34px;border-radius:9px;background:rgba(255,149,14,.12);display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:13px;margin-bottom:9px}
.sl{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;margin-bottom:4px}
.sv{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}

/* Payment */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.pcard{border:2px solid var(--border);border-radius:13px;padding:13px 15px;cursor:pointer;transition:all .3s;background:var(--bg);display:flex;align-items:center;gap:11px}
.pcard:hover{border-color:var(--orange-light)}
.pcard.selected{border-color:var(--orange);background:white;box-shadow:0 4px 14px rgba(255,149,14,.12)}
.pi{width:36px;height:36px;border-radius:9px;background:rgba(255,149,14,.1);display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:15px;flex-shrink:0}
.pn{font-size:13px;font-weight:700;color:var(--text)}
.ps{font-size:11px;color:var(--text-muted)}

/* Buttons */
.brow{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.btn{height:50px;border-radius:13px;padding:0 24px;font-family:'Jost',sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;gap:9px;border:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);text-transform:uppercase}
.bback{background:var(--bg);color:var(--text-muted);border:2px solid var(--border)}
.bback:hover{border-color:var(--text-muted);color:var(--text)}
.bnext{background:var(--gradient);color:white;box-shadow:0 5px 18px rgba(255,149,14,.32);margin-left:auto}
.bnext:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(255,149,14,.42)}
.bnext:active{transform:scale(.97)}
.bnext:disabled{opacity:.7;cursor:not-allowed;transform:none}

/* Success */
.suc-anim{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#11bb9b,#00d4aa);color:white;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;animation:popIn .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 10px 32px rgba(17,187,155,.28)}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Mobile header */
.mobile-header{display:none;background:var(--gradient);padding:18px 22px 0;position:relative;overflow:hidden}
.mobile-header::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:rgba(255,255,255,.08);border-radius:50%}
.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;z-index:1}
.mb-icon{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;display:flex;align-items:center;justify-content:center;color:white;font-size:17px}
.mb-name{font-size:19px;font-weight:800;color:white}
.mobile-steps{display:flex;gap:7px;padding-bottom:18px;position:relative;z-index:1}
.mpill{height:4px;border-radius:3px;flex:1;background:rgba(255,255,255,.25);transition:background .3s}
.mpill.active,.mpill.done{background:white}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:#ff4d4f;color:white;padding:13px 20px;border-radius:13px;font-size:13px;font-weight:600;z-index:9999;transform:translateY(80px);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:9px;box-shadow:0 7px 22px rgba(255,77,79,.32)}
.toast.show{transform:translateY(0);opacity:1}

/* Admin link */
.admin-link{position:fixed;top:16px;right:16px;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:9px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--text-muted);text-decoration:none;display:flex;align-items:center;gap:6px;transition:all .2s;z-index:100;backdrop-filter:blur(10px)}
.admin-link:hover{color:var(--orange);border-color:var(--orange)}

/* Responsive */
@media(max-width:960px){
  .page-wrap{grid-template-columns:1fr}
  .left-panel{display:none}
  .mobile-header{display:block}
  .right-panel{padding:26px 20px 38px;justify-content:flex-start}
  .ptitle{font-size:24px}
  .sum-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:500px){
  .svc-grid{grid-template-columns:1fr}
  .sum-grid{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .ptitle{font-size:20px}
  .time-grid{grid-template-columns:repeat(3,1fr)}
}


/* Dolu Saat Modal */
.booked-modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.booked-modal.show{opacity:1}
.booked-modal-box{background:#fff;border-radius:22px;padding:36px 32px 28px;max-width:320px;width:90%;text-align:center;transform:scale(.88) translateY(20px);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 20px 60px rgba(0,0,0,.18)}
.booked-modal.show .booked-modal-box{transform:scale(1) translateY(0)}
.booked-modal-icon{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ff4d4f);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 24px rgba(255,77,79,.3)}
.booked-modal-icon i{font-size:28px;color:#fff}
.booked-modal-box h3{font-size:20px;font-weight:700;color:#1a1a1a;margin:0 0 10px}
.booked-modal-box p{font-size:14px;color:#666;line-height:1.6;margin:0 0 18px}
.booked-modal-box p strong{color:#fe6300;font-size:16px}
.booked-modal-slots{background:#fff8f0;border:1.5px solid #ffe0c0;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:12px;color:#fe6300;font-weight:600}
.booked-modal-slots i{font-size:14px}
.booked-modal-btn{width:100%;padding:13px;border-radius:12px;border:none;background:linear-gradient(135deg,#fe6300,#ffaf15);color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s}
.booked-modal-btn:hover{opacity:.88}