/* Friday Termin – Booking modal stilleri
   Tema-bağımsız: tüm renkler --bk-* değişkenlerinden gelir; booking.js her site
   için bunları ayarlar (lastik=kırmızı, folyo=sarı). Fontlar her iki sitede de
   yüklü (Anton / Archivo / IBM Plex Mono). */

.bk-root{
  --bk-accent:#CC0012;
  --bk-accent-text:#fff;
  --bk-bg:#F5F5F3;
  --bk-fg:#0A0A0A;
  --bk-muted:#4a4e56;
  --bk-rule:#d8d8d4;
  --bk-card:#fff;
  --bk-display:'Anton',sans-serif;
  --bk-body:'Archivo',sans-serif;
  --bk-mono:'IBM Plex Mono',monospace;
}

/* ---------- Overlay & Panel ---------- */
.bk-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:flex-start;justify-content:center;
  background:rgba(10,10,10,.62);
  padding:24px 16px;overflow-y:auto;
  -webkit-tap-highlight-color:transparent;
}
.bk-overlay.bk-open{display:flex}
.bk-panel{
  font-family:var(--bk-body);color:var(--bk-fg);background:var(--bk-bg);
  width:100%;max-width:560px;margin:auto;border-radius:3px;
  box-shadow:0 24px 80px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
  animation:bk-rise .28s cubic-bezier(.22,1,.36,1) both;
}
@media (prefers-reduced-motion:reduce){.bk-panel{animation:none}}
@keyframes bk-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.bk-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;background:var(--bk-fg);color:#fff;
}
.bk-head .bk-kicker{
  font-family:var(--bk-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bk-accent);margin-bottom:4px;
}
.bk-head h2{font-family:var(--bk-display);font-weight:400;text-transform:uppercase;
  font-size:1.25rem;line-height:1.05;letter-spacing:.01em;color:#fff}
.bk-close{
  flex-shrink:0;width:34px;height:34px;border:1px solid #3a3a3e;background:transparent;
  color:#bbb;font-size:1.3rem;line-height:1;cursor:pointer;border-radius:2px;
  transition:color .2s,border-color .2s;
}
.bk-close:hover{color:#fff;border-color:#666}

/* ---------- Progress steps ---------- */
.bk-steps{
  display:flex;gap:6px;padding:12px 22px;background:var(--bk-fg);
  border-top:1px solid #242428;
}
.bk-steps .bk-dot{
  flex:1;height:3px;background:#33333a;border-radius:2px;transition:background .3s;
}
.bk-steps .bk-dot.on{background:var(--bk-accent)}

/* ---------- Body ---------- */
.bk-body{padding:22px;max-height:none}
.bk-label{
  font-family:var(--bk-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bk-muted);margin:0 0 12px;display:block;
}
.bk-step{display:none}
.bk-step.on{display:block}

/* ---------- Service list ---------- */
.bk-svc{
  width:100%;text-align:left;cursor:pointer;background:var(--bk-card);
  border:1px solid var(--bk-rule);border-radius:2px;padding:14px 16px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color .18s,transform .1s;
}
.bk-svc:hover{border-color:var(--bk-accent)}
.bk-svc:active{transform:scale(.995)}
.bk-svc-main h3{
  font-family:var(--bk-display);font-weight:400;text-transform:uppercase;font-size:1rem;
  letter-spacing:.01em;margin-bottom:3px;
}
.bk-svc-main p{font-size:.82rem;color:var(--bk-muted);line-height:1.4}
.bk-svc-meta{
  flex-shrink:0;text-align:right;font-family:var(--bk-mono);font-size:.66rem;
  letter-spacing:.04em;color:var(--bk-muted);text-transform:uppercase;
}
.bk-svc-meta .bk-dur{color:var(--bk-fg);font-weight:500}
.bk-svc-meta .bk-fee{display:block;margin-top:3px;color:var(--bk-accent)}

/* ---------- Day & time chips ---------- */
.bk-chosen{
  font-family:var(--bk-mono);font-size:.68rem;letter-spacing:.04em;color:var(--bk-muted);
  background:var(--bk-card);border:1px solid var(--bk-rule);border-radius:2px;
  padding:10px 12px;margin-bottom:16px;line-height:1.5;
}
.bk-chosen b{color:var(--bk-fg);font-weight:600}
.bk-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px}
.bk-day{
  flex:0 0 auto;min-width:64px;cursor:pointer;background:var(--bk-card);
  border:1px solid var(--bk-rule);border-radius:2px;padding:10px 8px;text-align:center;
  font-family:var(--bk-mono);transition:border-color .15s,background .15s;
}
.bk-day:hover{border-color:var(--bk-accent)}
.bk-day.on{background:var(--bk-accent);border-color:var(--bk-accent);color:var(--bk-accent-text)}
.bk-day .bk-day-wd{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.bk-day .bk-day-dm{font-size:1.05rem;font-weight:500;margin-top:2px}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.bk-time{
  cursor:pointer;background:var(--bk-card);border:1px solid var(--bk-rule);border-radius:2px;
  padding:11px 6px;text-align:center;font-family:var(--bk-mono);font-size:.84rem;
  transition:border-color .15s,background .15s,color .15s;
}
.bk-time:hover{border-color:var(--bk-accent)}
.bk-time.on{background:var(--bk-accent);border-color:var(--bk-accent);color:var(--bk-accent-text)}

/* ---------- Form fields ---------- */
.bk-field{margin-bottom:14px}
.bk-field label{
  display:block;font-family:var(--bk-mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bk-muted);margin-bottom:6px;
}
.bk-field input,.bk-field textarea{
  width:100%;font-family:var(--bk-body);font-size:.95rem;color:var(--bk-fg);
  background:var(--bk-card);border:1px solid var(--bk-rule);border-radius:2px;padding:11px 12px;
}
.bk-field textarea{min-height:70px;resize:vertical}
.bk-field input:focus,.bk-field textarea:focus{outline:2px solid var(--bk-accent);outline-offset:1px;border-color:var(--bk-accent)}

/* ---------- Consent ---------- */
.bk-consent{
  border-left:3px solid var(--bk-accent);background:color-mix(in srgb,var(--bk-accent) 7%,transparent);
  padding:12px 14px;margin:4px 0 16px;border-radius:0 2px 2px 0;
}
.bk-consent .bk-fee-big{
  font-family:var(--bk-display);font-size:1.15rem;color:var(--bk-fg);margin-bottom:6px;
}
.bk-consent label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.85rem;line-height:1.45;color:var(--bk-muted)}
.bk-consent input[type=checkbox]{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--bk-accent)}
.bk-consent-link{margin:8px 0 0;font-family:var(--bk-mono);font-size:.66rem;letter-spacing:.04em}
.bk-consent-link a{color:var(--bk-accent);text-decoration:underline}

/* ---------- Buttons & footer ---------- */
.bk-actions{display:flex;gap:10px;margin-top:8px}
.bk-btn{
  font-family:var(--bk-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--bk-rule);border-radius:2px;padding:13px 20px;cursor:pointer;
  background:var(--bk-card);color:var(--bk-fg);transition:background .18s,border-color .18s,opacity .18s;
}
.bk-btn:hover{border-color:var(--bk-fg)}
.bk-btn-primary{background:var(--bk-accent);border-color:var(--bk-accent);color:var(--bk-accent-text);flex:1}
.bk-btn-primary:hover{filter:brightness(.93);border-color:var(--bk-accent)}
.bk-btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none}
.bk-btn-ghost{flex:0 0 auto}

/* ---------- States: loading / error / success ---------- */
.bk-msg{font-size:.9rem;color:var(--bk-muted);padding:8px 0;line-height:1.6}
.bk-error{
  background:#fdecec;border:1px solid #f3b4b4;color:#a50010;
  font-size:.85rem;padding:10px 12px;border-radius:2px;margin-bottom:14px;line-height:1.5;
}
.bk-spinner{
  width:30px;height:30px;border:3px solid var(--bk-rule);border-top-color:var(--bk-accent);
  border-radius:50%;margin:24px auto;animation:bk-spin .8s linear infinite;
}
@keyframes bk-spin{to{transform:rotate(360deg)}}
.bk-success{text-align:center;padding:18px 6px}
.bk-success .bk-check{
  width:58px;height:58px;border-radius:50%;background:var(--bk-accent);color:var(--bk-accent-text);
  display:grid;place-items:center;margin:0 auto 16px;font-size:1.7rem;
}
.bk-success h3{font-family:var(--bk-display);font-weight:400;text-transform:uppercase;font-size:1.4rem;margin-bottom:10px}
.bk-success p{color:var(--bk-muted);font-size:.92rem;line-height:1.6;max-width:40ch;margin:0 auto 8px}
.bk-empty{color:var(--bk-muted);font-size:.9rem;padding:18px 4px;line-height:1.6}

@media (max-width:480px){
  .bk-overlay{padding:0}
  .bk-panel{max-width:none;min-height:100%;border-radius:0}
}