/* Slot rezervesi sayfası (taslak docs/design/esmeralda-randevu.html §3, S1). Esmeralda'nın jetonları; uygulama değil,
   yalın bir web sayfası. Açık/koyu, telefon ve masaüstü. */
:root{
  --bg:#F2F5F3;--surface:#FFFFFF;--surface2:#EEF2F0;--line:rgba(15,20,18,.10);
  --ink:#0F1412;--ink2:#5E6A65;--text3:#65706B;--ink3:#9AA39F;
  --accent:#0B7A57;--accentFill:#0C845F;--accentSoft:#DCF1E8;--onFill:#FFFFFF;
  --amber:#B26A00;--amberSoft:#FBEFD9;--amberLine:#E3A73F;--danger:#C2372D;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0A0F0D;--surface:#151C19;--surface2:#1C2521;--line:rgba(255,255,255,.09);
  --ink:#EEF3F1;--ink2:#93A09A;--text3:#808D87;--ink3:#5F6B66;
  --accent:#3DDC97;--accentFill:#2FC486;--accentSoft:#0F3326;--onFill:#0F1412;
  --amber:#F2B65A;--amberSoft:#3A2A10;--amberLine:#C98A2B;--danger:#FF8A80;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
h1,h2,h3{font-family:var(--round);margin:0}
button{font:inherit;color:inherit}
.muted{color:var(--ink2)}
.small{font-size:13px;color:var(--text3)}
.browser{max-width:980px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;
  container-type:inline-size;overflow:hidden}
.page{padding:22px;display:flex;flex-direction:column;gap:16px}
.grid{display:grid;grid-template-columns:1fr;gap:20px}
@container (min-width:720px){.grid{grid-template-columns:280px minmax(0,1fr);gap:32px}}
.side{display:flex;flex-direction:column;gap:14px}
.who{display:flex;align-items:center;gap:12px}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);background:var(--accentSoft);color:var(--accent);display:grid;
  place-items:center;font:700 22px var(--round);flex:none}
.who b{font:700 20px var(--round);display:block;line-height:1.2}
.who span{font-size:13px;color:var(--ink2)}
.facts{display:flex;flex-wrap:wrap;gap:6px}
.soon{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;width:100%;text-align:left;
  background:var(--accentSoft);border-radius:16px;padding:12px 14px;cursor:pointer}
.soon small{display:block;font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);font-weight:700}
.soon b{font:700 18px var(--round)}
.soon .go{font-weight:700;color:var(--accent)}
.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.day{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:7px 0 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.day small{font-size:11px;color:var(--text3);white-space:nowrap}
.day b{font-size:17px;font-variant-numeric:tabular-nums}
.day em{font-style:normal;font-size:10.5px;color:var(--accent);font-weight:600;height:14px;white-space:nowrap}
.day[aria-selected="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.day[aria-selected="true"] small,.day[aria-selected="true"] em{color:inherit;opacity:.85}
.day:disabled{opacity:.4;cursor:default}
.day:disabled em{color:var(--text3)}
.nav{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink2)}
.nav button{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer;padding:4px}
.nav button:disabled{color:var(--ink3);cursor:default}
.main{display:flex;flex-direction:column;gap:16px;min-width:0}
.main h2{font-size:19px}
.grp{display:flex;flex-direction:column;gap:8px}
.gh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.gh b{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--text3)}
.gh .k{font-weight:600;color:var(--accent)}
.grp.ap .gh .k{color:var(--amber)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.slot{border:1.5px solid color-mix(in srgb,var(--accentFill) 50%,transparent);background:var(--surface);color:var(--accent);
  border-radius:12px;padding:11px 0;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.slot[aria-pressed="true"]{background:var(--accentFill);color:var(--onFill);border-color:var(--accentFill)}
.slot.ap{border-style:dashed;border-color:var(--amberLine);color:var(--amber)}
.slot.ap[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--surface)}
.slot.busy{border:1px solid var(--line);background:var(--surface2);color:var(--ink3);font-weight:500;cursor:default}
.conf{grid-column:1/-1;border:1.5px solid var(--accentFill);border-radius:18px;padding:14px;display:flex;flex-direction:column;
  gap:10px;transform-origin:top center;animation:grow .32s cubic-bezier(.2,.9,.3,1.05)}
.conf.ap{border-color:var(--amberLine)}
@keyframes grow{from{opacity:0;transform:scaleY(.6);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.when{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.when b{font:700 17px var(--round)}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text3);font-weight:600}
input{font:inherit;font-size:16px;color:var(--ink);background:var(--surface2);border:1px solid transparent;border-radius:12px;padding:10px 12px;width:100%}
input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.go-btn{border:0;border-radius:14px;padding:12px;font-weight:600;font-size:15px;background:var(--accentFill);color:var(--onFill);cursor:pointer}
.conf.ap .go-btn{background:var(--amber);color:var(--surface)}
.go-btn:disabled{opacity:.45;cursor:default}
.err{color:var(--danger);font-size:13.5px}
.res{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 10px;border-radius:18px;
  background:var(--surface2);animation:grow .32s cubic-bezier(.2,.9,.3,1.05)}
.ok{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:700;background:var(--accentFill);color:var(--onFill)}
.ok.wait{background:var(--amberSoft);color:var(--amber);border:2px dashed var(--amberLine)}
.ok.no{background:var(--surface);color:var(--ink2);border:1px solid var(--line)}
.res b{font:700 19px var(--round)}
.acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.btn{border:0;border-radius:99px;padding:8px 14px;font-weight:600;font-size:13.5px;background:var(--accentFill);color:var(--onFill);cursor:pointer;text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--line)}
.empty{padding:20px;border-radius:16px;background:var(--surface2);color:var(--ink2);text-align:center}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text3);border-top:1px solid var(--line);padding-top:10px}
.legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.legend i{display:inline-block;width:14px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px;background:var(--surface)}
.legend .li{border:1.5px solid color-mix(in srgb,var(--accentFill) 50%,transparent)}
.legend .la{border:1.5px dashed var(--amberLine)}
.legend .lb{background:var(--surface2);border:1px solid var(--line)}
.facts .fact{font-size:12.5px;color:var(--ink2);background:var(--surface2);padding:3px 10px;border-radius:99px}
.foot button{border:0;background:none;color:var(--text3);cursor:pointer;padding:0;text-decoration:underline}
.day:focus-visible,.slot:focus-visible,.btn:focus-visible,.go-btn:focus-visible,.soon:focus-visible,.nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.conf,.res{animation:none}}