:root {
      --c-bg:      #FAF8F5;
      --c-warm:    #F3EDE5;
      --c-ink:     #2A2220;
      --c-ink2:    #4A3E3C;
      --c-muted:   #9B8E8B;
      --c-pudra:   #C9897E;
      --c-pudra2:  #A86F67;
      --c-line:    rgba(42,34,32,.08);
      --c-ok:      #5a8a6a;
      --c-ok-bg:   #edf6f0;

      --f-display: 'Fraunces', serif;
      --f-serif:   'Libre Baskerville', serif;
      --f-body:    'Outfit', sans-serif;

      --ease:  cubic-bezier(.22,1,.36,1);
      --ease2: cubic-bezier(.16,1,.3,1);
      --t:     0.55s;
    }

    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    html { scroll-behavior: smooth; }

    body {
      background: var(--c-bg);
      color: var(--c-ink);
      font-family: var(--f-body);
      font-weight: 300;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    @media (max-width: 640px) {
        .booking-layout {
            padding: 50px 4vw 80px !important;
            gap: 20px;
        }
    }

    /* ══ STEP INDICATOR ════════════════════════════════ */
    .steps-bar {
      position: sticky; top:72px; z-index:100;
      background: rgba(250,248,245,.95);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--c-line);
      padding: 0 5vw;
      display: flex; align-items: stretch;
      height: 64px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .steps-bar::-webkit-scrollbar { display:none; }

    .step-node {
      display: flex; align-items: center; gap: 12px;
      padding: 0 28px; position:relative;
      white-space: nowrap; flex-shrink:0;
      transition: all var(--t) var(--ease);
    }
    .step-node::after {
      content:'';
      position:absolute; bottom:0; left:0; right:0;
      height:2px; background:transparent;
      transition: background var(--t) var(--ease);
    }
    .step-node.active::after { background:var(--c-pudra); }
    .step-node.done::after   { background:var(--c-ok); }

    .step-num {
      width:28px; height:28px; border-radius:50%; flex-shrink:0;
      border:1.5px solid var(--c-line);
      display:flex; align-items:center; justify-content:center;
      font-family: var(--f-display); font-size:13px; font-style:italic;
      color:var(--c-muted);
      transition: all var(--t) var(--ease);
    }
    .step-node.active .step-num {
      background:var(--c-pudra); border-color:var(--c-pudra);
      color:#fff; font-style:normal;
    }
    .step-node.done .step-num {
      background:var(--c-ok); border-color:var(--c-ok); color:#fff;
    }
    .step-node.done .step-num::before { content:'✓'; }
    .step-node.done .step-num-inner { display:none; }

    .step-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:400; color:var(--c-muted); }
    .step-node.active .step-label { color:var(--c-ink); font-weight:500; }
    .step-node.done .step-label   { color:var(--c-ok); }

    /* Connector arrow */
    .step-arrow {
      color:var(--c-line); font-size:12px; padding:0 4px; display:flex; align-items:center;
    }

    /* ══ MAIN LAYOUT ═══════════════════════════════════ */
    .booking-layout {
      max-width: 1100px;
      margin: 0 auto;
      padding: 60px 5vw 120px;
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 40px;
      align-items: start;
        margin-top: 50px;

    }
    @media(max-width:900px){
      .booking-layout { grid-template-columns:1fr; padding:40px 5vw 80px; }
      .booking-aside { order:2; }
    }

    /* ══ PANEL (step containers) ═══════════════════════ */
    .pnl { display:none; }
    .pnl.active {
      display:block;
      animation: pnlIn .5s var(--ease) both;
    }
    @keyframes pnlIn {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:none; }
    }

    /* ══ SECTION TITLES ════════════════════════════════ */
    .sec-eyebrow {
      font-size:9px; letter-spacing:4px; text-transform:uppercase;
      color:var(--c-pudra); font-weight:400; margin-bottom:12px;
      display:flex; align-items:center; gap:10px;
    }
    .sec-eyebrow::before { content:''; width:20px; height:1px; background:currentColor; }
    .sec-h2 {
      font-family: var(--f-display);
      font-size:clamp(26px,3vw,36px); font-weight:200; line-height:1.15;
      margin-bottom:8px;
    }
    .sec-h2 em { font-style:italic; color:var(--c-pudra); }
    .sec-sub { font-size:14px; color:var(--c-muted); margin-bottom:40px; line-height:1.7; }

    /* ══ FORM ELEMENTS ═════════════════════════════════ */
    .fg { margin-bottom:20px; }
    .fg label {
      display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase;
      color:var(--c-muted); font-weight:400; margin-bottom:10px;
    }
    .fg input, .fg select {
      width:100%; padding:14px 18px;
      background:#fff; border:1px solid var(--c-line);
      border-radius:4px; font-family:var(--f-body); font-size:14px;
      color:var(--c-ink); outline:none;
      transition: border-color var(--t) ease, box-shadow var(--t) ease;
      -webkit-appearance: none;
    }
    .fg input:focus, .fg select:focus {
      border-color:var(--c-pudra);
      box-shadow:0 0 0 3px rgba(201,137,126,.12);
    }
    .fg input::placeholder { color:var(--c-muted); opacity:.6; }

    .two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    @media(max-width:560px){ .two-col { grid-template-columns:1fr; } }

    .input-divider {
      display:flex; align-items:center; gap:16px;
      margin:28px 0; color:var(--c-muted);
      font-size:10px; letter-spacing:2px; text-transform:uppercase;
    }
    .input-divider::before, .input-divider::after {
      content:''; flex:1; height:1px; background:var(--c-line);
    }

    /* ══ SERVICE CARDS ═════════════════════════════════ */
    .cat-heading {
      font-family:var(--f-display); font-size:11px; font-style:italic;
      letter-spacing:2px; text-transform:uppercase;
      color:var(--c-muted); margin:28px 0 12px;
      display:flex; align-items:center; gap:10px;
    }
    .cat-heading::before { content:''; width:16px; height:1px; background:currentColor; }

    .svc-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }

    .svc-card {
      display:flex; align-items:center; gap:16px;
      padding:18px 20px;
      background:#fff; border:1px solid var(--c-line);
      border-radius:4px;
      transition: all var(--t) var(--ease);
      user-select:none; position:relative; overflow:hidden;
    }
    .svc-card::before {
      content:''; position:absolute; left:0; top:0; bottom:0;
      width:3px; background:var(--c-pudra);
      transform:scaleY(0); transition:transform var(--t) var(--ease);
      transform-origin:bottom;
    }
    .svc-card:hover { border-color:rgba(201,137,126,.35); background:rgba(250,248,245,.7); }
    .svc-card:hover::before { transform:scaleY(1); }
    .svc-card.selected {
      border-color:var(--c-pudra);
      background:rgba(201,137,126,.05);
    }
    .svc-card.selected::before { transform:scaleY(1); }
    .svc-card.disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

    .svc-check {
      width:20px; height:20px; border-radius:50%; flex-shrink:0;
      border:1.5px solid var(--c-line);
      display:flex; align-items:center; justify-content:center;
      font-size:10px; color:transparent;
      transition:all var(--t) var(--ease);
    }
    .svc-card.selected .svc-check {
      background:var(--c-pudra); border-color:var(--c-pudra); color:#fff;
    }
    .svc-info { flex:1; }
    .svc-name { font-size:14px; font-weight:400; color:var(--c-ink); margin-bottom:2px; }
    .svc-dur  { font-size:12px; color:var(--c-muted); display:flex; align-items:center; gap:5px; }

    .svc-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
    .svc-price { font-family:var(--f-display); font-size:18px; font-weight:200; color:var(--c-ink2); font-style:italic; }
    .svc-no-emp {
      font-size:10px; letter-spacing:1px; text-transform:uppercase;
      color:var(--c-muted); background:var(--c-warm);
      padding:3px 10px; border-radius:2px;
    }

    /* Seçim özet bar */
    .sel-bar {
      display:none;
      margin-top:24px;
      padding:16px 20px;
      background: var(--c-ink);
      border-radius:4px;
      align-items:center; gap:20px; flex-wrap:wrap;
    }
    .sel-bar.visible { display:flex; }
    .sel-bar-item {
      display:flex; align-items:center; gap:8px;
      font-size:12px; color:rgba(250,248,245,.6);
    }
    .sel-bar-item strong { color:rgba(250,248,245,.9); font-weight:500; }
    .sel-bar-item i { color:var(--c-pudra); }

    /* ══ ARTIST / EMP SELECTION ════════════════════════ */
    /* Per-service detail card */
    .sdc-list { display:flex; flex-direction:column; gap:16px; }

    .sdc {
      background:#fff; border:1px solid var(--c-line);
      border-radius:4px; overflow:hidden;
      transition: border-color var(--t) ease;
    }
    .sdc.done { border-color:rgba(90,138,106,.4); }
    .sdc.done .sdc-head { background:var(--c-ok-bg); }

    .sdc-head {
      padding:16px 22px;
      background:var(--c-warm);
      border-bottom:1px solid var(--c-line);
      display:flex; align-items:center; gap:14px;
      transition:background var(--t) ease;
    }
    .sdc-idx {
      width:28px; height:28px; border-radius:50%; flex-shrink:0;
      background:var(--c-ink); color:var(--c-bg);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--f-display); font-size:13px; font-style:italic;
    }
    .sdc.done .sdc-idx { background:var(--c-ok); }
    .sdc-head-title { flex:1; font-size:14px; font-weight:400; }
    .sdc-head-dur { font-size:12px; color:var(--c-muted); }
    .sdc-done-tag {
      display:none; align-items:center; gap:6px;
      font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--c-ok); font-weight:500;
    }
    .sdc.done .sdc-done-tag { display:flex; }

    .sdc-body { padding:22px 22px 26px; display:flex; flex-direction:column; gap:22px; }

    /* Çalışan butonları */
    .artist-label {
      font-size:9px; letter-spacing:3px; text-transform:uppercase;
      color:var(--c-muted); font-weight:400; margin-bottom:10px;
    }
    .artists-grid { display:flex; flex-wrap:wrap; gap:8px; }

    .artist-btn {
      display:flex; align-items:center; gap:10px;
      padding:10px 16px;
      background:var(--c-warm); border:1px solid var(--c-line);
      border-radius:2px; 
      font-size:13px; color:var(--c-ink2); font-weight:300;
      transition: all var(--t) var(--ease);
    }
    .artist-btn:hover { border-color:rgba(201,137,126,.4); background:rgba(201,137,126,.06); }
    .artist-btn.selected {
      border-color:var(--c-pudra); background:rgba(201,137,126,.08);
      color:var(--c-ink);
    }
    .artist-av {
      width:30px; height:30px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,var(--c-pudra),var(--c-pudra2));
      display:flex; align-items:center; justify-content:center;
      font-family:var(--f-display); font-size:11px; font-style:italic;
      color:#fff; font-weight:400;
    }
    .artist-btn.selected .artist-av { background:var(--c-ink); }

    /* Tarih & Saat */
    .date-time-row {
      display:grid; grid-template-columns:180px 1fr;
      gap:20px; align-items:start;
    }
    @media(max-width:560px){ .date-time-row{ grid-template-columns:1fr; } }

    .field-label {
      font-size:9px; letter-spacing:3px; text-transform:uppercase;
      color:var(--c-muted); font-weight:400; margin-bottom:10px;
    }
    .date-input {
      width:100%; padding:12px 16px;
      background:var(--c-warm); border:1px solid var(--c-line);
      border-radius:4px; font-family:var(--f-body); font-size:14px;
      color:var(--c-ink); outline:none;
      transition: border-color var(--t) ease, box-shadow var(--t) ease;
    }
    .date-input:focus { border-color:var(--c-pudra); box-shadow:0 0 0 3px rgba(201,137,126,.12); }

    /* Saat grid */
    .slots-wrap { min-height:52px; }
    .slots-grid {
      display:grid; grid-template-columns:repeat(auto-fill, minmax(62px,1fr));
      gap:6px; max-height:160px; overflow-y:auto;
      padding-right:4px;
    }
    .slots-grid::-webkit-scrollbar { width:3px; }
    .slots-grid::-webkit-scrollbar-thumb { background:var(--c-line); border-radius:2px; }

    .slot-btn {
      padding:9px 4px; text-align:center;
      background:var(--c-warm); border:1px solid var(--c-line);
      border-radius:4px; 
      font-family:var(--f-body); font-size:12px; font-weight:400; color:var(--c-ink2);
      transition: all .3s var(--ease);
    }
    .slot-btn:hover { border-color:rgba(201,137,126,.5); background:rgba(201,137,126,.08); color:var(--c-ink); }
    .slot-btn.selected { background:var(--c-ink); border-color:var(--c-ink); color:var(--c-bg); }
    .slots-msg {
      font-size:12px; color:var(--c-muted); font-style:italic;
      padding:8px 0; display:flex; align-items:center; gap:6px;
    }
    .slots-msg.err { color:#b85a4a; }

    /* ══ SUMMARY / STEP 4 ══════════════════════════════ */
    .summary-block {
      background:#fff; border:1px solid var(--c-line);
      border-radius:4px; overflow:hidden;
      margin-bottom:20px;
    }
    .summary-block-head {
      padding:14px 22px; background:var(--c-warm);
      border-bottom:1px solid var(--c-line);
      font-size:10px; letter-spacing:3px; text-transform:uppercase;
      color:var(--c-muted); font-weight:400;
    }
    .summary-rows { padding:4px 0; }
    .summary-row {
      display:flex; justify-content:space-between; align-items:baseline;
      padding:14px 22px; border-bottom:1px solid var(--c-line); gap:20px;
    }
    .summary-row:last-child { border-bottom:none; }
    .sr-key { font-size:13px; color:var(--c-muted); flex-shrink:0; }
    .sr-val { font-size:13px; color:var(--c-ink); text-align:right; font-weight:400; }
    .sr-val strong { font-family:var(--f-display); font-size:16px; font-weight:200; color:var(--c-pudra); font-style:italic; }

    .kvkk-check {
      display:flex; align-items:flex-start; gap:12px;
      font-size:12px; color:var(--c-muted); line-height:1.7;
      margin-bottom:24px; 
    }
    .kvkk-box {
      width:18px; height:18px; border:1px solid var(--c-line);
      border-radius:2px; flex-shrink:0; margin-top:2px;
      display:flex; align-items:center; justify-content:center;
      background:#fff; font-size:10px; color:transparent;
      transition:all var(--t) var(--ease); 
    }
    .kvkk-check.checked .kvkk-box { background:var(--c-pudra); border-color:var(--c-pudra); color:#fff; }
    .kvkk-check a { color:var(--c-pudra); }

    /* ══ SUCCESS ════════════════════════════════════════ */
    .success-wrap { padding:60px 20px; text-align:center; }
    .success-icon {
      width:80px; height:80px; border-radius:50%;
      background:var(--c-ok-bg); border:1px solid rgba(90,138,106,.2);
      display:flex; align-items:center; justify-content:center;
      font-size:32px; margin:0 auto 28px;
      animation: popIn .6s var(--ease) .2s both;
    }
    @keyframes popIn { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
    .success-h { font-family:var(--f-display); font-size:clamp(28px,4vw,44px); font-weight:200; font-style:italic; margin-bottom:12px; }
    .success-p { font-size:14px; color:var(--c-muted); max-width:420px; margin:0 auto 40px; line-height:1.8; }
    .success-id {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--c-warm); border:1px solid var(--c-line);
      border-radius:4px; padding:14px 24px;
      font-family:var(--f-display); font-size:22px; font-weight:200;
      font-style:italic; color:var(--c-pudra); margin-bottom:40px;
    }
    .success-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

    /* ══ BUTTONS ════════════════════════════════════════ */
    .btn-fill {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--c-ink); color:var(--c-bg);
      font-family:var(--f-body); font-size:10px; font-weight:400;
      letter-spacing:2.5px; text-transform:uppercase;
      padding:16px 36px; border-radius:2px; border:1px solid var(--c-ink);
      transition:all var(--t) var(--ease); 
      position:relative; overflow:hidden;
    }
    .btn-fill::before {
      content:''; position:absolute; inset:0;
      background:var(--c-pudra);
      transform:translateY(100%); transition:transform var(--t) var(--ease); z-index:-1;
    }
    .btn-fill:hover { border-color:var(--c-pudra); }
    .btn-fill:hover::before { transform:translateY(0); }
    .btn-fill:disabled { opacity:.4; pointer-events:none; }
    .btn-fill i { font-size:12px; transition:transform .4s var(--ease); }
    .btn-fill:hover i { transform:translateX(3px); }

    .btn-outline {
      display:inline-flex; align-items:center; gap:10px;
      background:transparent; color:var(--c-ink2);
      font-family:var(--f-body); font-size:10px; font-weight:400;
      letter-spacing:2.5px; text-transform:uppercase;
      padding:15px 36px; border-radius:2px; border:1px solid var(--c-line);
      transition:all var(--t) var(--ease); 
    }
    .btn-outline:hover { border-color:var(--c-ink); color:var(--c-ink); }

    .btn-pudra {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--c-pudra); color:#fff;
      font-family:var(--f-body); font-size:10px; font-weight:400;
      letter-spacing:2.5px; text-transform:uppercase;
      padding:16px 36px; border-radius:2px; border:1px solid var(--c-pudra);
      transition:all var(--t) var(--ease); 
    }
    .btn-pudra:hover { background:var(--c-pudra2); border-color:var(--c-pudra2); }
    .btn-pudra:disabled { opacity:.4; pointer-events:none; }
    .btn-pudra i { font-size:12px; }

    .btn-row { display:flex; justify-content:space-between; align-items:center; margin-top:36px; flex-wrap:wrap; gap:12px; }
    .btn-row.center { justify-content:center; }

    /* ══ ASIDE ══════════════════════════════════════════ */
    .aside-card {
      background:#fff; border:1px solid var(--c-line);
      border-radius:4px; overflow:hidden; margin-bottom:16px;
    }
    .aside-card-head {
      padding:14px 20px; background:var(--c-warm);
      border-bottom:1px solid var(--c-line);
      font-size:9px; letter-spacing:3px; text-transform:uppercase;
      color:var(--c-muted); font-weight:400;
      display:flex; align-items:center; gap:8px;
    }
    .aside-card-head i { color:var(--c-pudra); }
    .aside-card-body { padding:20px; }

    .aside-info-row {
      display:flex; gap:12px; align-items:flex-start;
      margin-bottom:14px; font-size:13px; color:var(--c-ink2);
    }
    .aside-info-row:last-child { margin-bottom:0; }
    .aside-info-row i { color:var(--c-pudra); margin-top:2px; flex-shrink:0; }

    .aside-tip {
      background:var(--c-warm); border:1px solid var(--c-line);
      border-radius:4px; padding:20px; margin-bottom:16px;
      position:relative; overflow:hidden;
    }
    .aside-tip::before {
      content:'"'; position:absolute; top:-10px; right:10px;
      font-family:var(--f-display); font-size:80px; font-style:italic;
      color:rgba(201,137,126,.12); line-height:1; pointer-events:none;
    }
    .aside-tip p { font-family:var(--f-display); font-size:14px; font-style:italic; font-weight:200; color:var(--c-ink2); line-height:1.7; }
    .aside-tip-author { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--c-muted); margin-top:8px; }