@font-face{font-family:Inter;src:url(assets/inter.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:Playfair;src:url(assets/playfairdisplay.ttf) format("truetype");font-weight:400 900;font-display:swap}
:root{color-scheme:light;--paper:#f7f5ef;--ink:#202922;--muted:#5d625a;--line:#d8d7cb;--amber:#e3ae66;--serif:Playfair,Georgia,serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif}
.wrap{width:min(1140px,calc(100% - 64px));margin-inline:auto}
header{border-bottom:1px solid var(--line)}
.nav,.brand,.panel-link,.top,.filter,.date-filter{display:flex;align-items:center}
.nav,.top{justify-content:space-between;gap:20px}
.nav{min-height:78px}.brand{gap:12px;font:600 clamp(19px,3vw,26px)/1.2 var(--serif);letter-spacing:-.04em;text-decoration:none;overflow-wrap:anywhere}
.pole{width:15px;height:32px;flex:none;border-block:4px solid var(--ink);border-radius:4px;background:repeating-linear-gradient(137deg,var(--ink) 0 4px,transparent 4px 8px)}
a{color:inherit;text-underline-offset:4px}.panel-link,.back{font-size:14px;font-weight:600;text-decoration:none;gap:8px;min-height:44px;white-space:nowrap}
main{padding-block:28px 56px}.hero{position:relative;isolation:isolate;overflow:hidden;background:#212923;color:white;border-radius:15px;display:grid;grid-template-columns:49% 51%;min-height:280px}
.hero>div{padding:clamp(24px,4vw,54px);align-self:center;z-index:1}.hero>img{position:absolute;inset:0 0 0 auto;width:55%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.65)}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#212923 43%,transparent 74%)}.hero>div{position:relative}.hero p:last-child{font-size:15px;color:#e6e8df;margin:16px 0 0}
h1,h2,h3{font-family:var(--serif);line-height:1.15;font-weight:500;letter-spacing:-.045em;margin:0 0 20px}h1{font-size:clamp(44px,6vw,78px)}.hero h1{line-height:.99;margin:0}.hero em{color:#efc48a;font-family:Georgia,serif;font-weight:400}.eyebrow,section.login>small{display:block;text-transform:uppercase;letter-spacing:.15em;font-weight:650;font-size:11px;margin:0 0 15px}.hero .eyebrow{color:#efc48a}.progress{display:flex;gap:clamp(12px,4vw,55px);border-bottom:1px solid var(--line);padding:23px 0;margin:0 0 30px}.progress span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.progress b{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:29px;height:29px;font-size:11px}.progress .active{font-weight:700;color:var(--ink)}.progress .active b,.progress .done b{background:var(--ink);color:white;border-color:var(--ink)}
.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);gap:clamp(26px,6vw,92px);align-items:start}.layout>*{min-width:0}h2,.stage-title{font-size:clamp(30px,4vw,43px)}h3{font-size:24px}.services{border-top:1px solid var(--line)}button,.button{background:var(--ink);color:white;border:1px solid var(--ink);border-radius:7px;padding:12px 18px;font:600 14px/1.4 Inter,system-ui,sans-serif;cursor:pointer;min-height:44px;transition:background .18s,color .18s}.service{display:flex;align-items:center;gap:16px;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);padding:18px 8px}.service span{font-family:var(--serif);font-size:clamp(22px,2.5vw,31px);font-weight:500;letter-spacing:-.04em;flex:1}.service small{font-weight:500;color:var(--muted)}.service b{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.service:hover,.slots button:hover,.secondary:hover,.light:hover{background:#e9ecdf}.service:hover b{background:var(--ink);color:white}
aside,.receipt,.login,.metrics{background:#e9ecdf;border-radius:12px;padding:clamp(22px,3vw,38px)}aside h2{font-size:29px}dl{margin:0}dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #c8cebc;font-size:14px}dt{color:#50594d}dd{margin:0;font-weight:600;text-align:right}.back{display:inline-flex;align-items:center}.stage-title{margin-top:8px}.filter,.date-filter{gap:12px;align-items:end;flex-wrap:wrap;margin:18px 0 24px}label{display:block;font-weight:600;font-size:14px;margin-bottom:16px}.date-filter label,.filter label{margin:0}input{display:block;font:inherit;background:#fffefa;color:var(--ink);border:1px solid #a9ac9f;border-radius:6px;padding:12px;width:100%;min-width:0;min-height:46px;margin-top:5px}.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}.slots button,.secondary,.light{background:transparent;color:var(--ink);border:1px solid #a9ac9f}.secondary,.light{min-height:46px}.back:hover,.panel-link:hover{text-decoration:underline}.notice,.empty{background:#eee5cf;padding:16px;border-radius:8px}.receipt,.login{max-width:580px;margin:42px auto}.receipt h1,.login h1,.top h1{font-size:clamp(38px,5vw,60px)}.seal{background:var(--ink);color:white;border-radius:50%;display:grid;place-items:center;width:48px;height:48px;margin-bottom:24px}.receipt p:last-child{margin-top:24px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:white;margin-bottom:18px;gap:18px}.metrics strong,.metrics small{display:block}.metrics strong{font:500 clamp(26px,4vw,44px) var(--serif)}.metrics em{font-size:18px}.metrics small{color:#dedfd5}.settings,.agenda{border-bottom:1px solid var(--line);padding-block:15px}.settings form{max-width:420px;margin:18px 0}.agenda+h2,article+h2{margin-top:26px;font-size:26px}article{display:flex;justify-content:space-between;gap:18px;background:#fffdf7;border:1px solid var(--line);border-left:4px solid #7d886d;border-radius:6px;padding:18px;margin-bottom:10px}article h3,article p{margin:4px 0}article small{display:block;color:var(--muted);margin-bottom:7px}summary{cursor:pointer;min-height:44px;align-content:center}.filter a{padding:10px 0}footer{display:flex;justify-content:space-between;gap:15px;padding-block:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}footer span{font-family:var(--serif);font-size:17px}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:6px;background:white;padding:12px;z-index:3}:focus-visible{outline:3px solid #976125;outline-offset:3px}
@media(max-width:720px){.wrap{width:calc(100% - 32px)}.nav{min-height:64px}.panel-link{font-size:12px}.layout{grid-template-columns:1fr;gap:24px}.progress{justify-content:space-between;gap:6px;padding:16px 0;margin-bottom:22px}.progress span{font-size:12px;gap:5px}.progress b{width:24px;height:24px}.hero{min-height:225px;grid-template-columns:72% 28%}.hero>div{padding:20px}.hero>img{width:74%}.hero:after{background:linear-gradient(90deg,#212923 8%,rgba(33,41,35,.87) 40%,rgba(33,41,35,.15) 85%)}.hero p:last-child{font-size:13px;max-width:200px}.hero h1{font-size:50px}.metrics{gap:10px;padding:18px 12px}.metrics small{font-size:12px}.service{padding:14px 4px}main{padding-top:16px}article{flex-direction:column}.top h1{font-size:38px}.top .eyebrow{margin-bottom:8px}.panel-link{flex:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Çelik mavisi ve porselen yüzeyler, randevu seçimlerinde yeşil vurgu. */
:root {
  --paper: #f2f6f7;
  --ink: #152e3b;
  --muted: #485f6c;
  --line: #cad7dd;
  --booking: #135e50;
  --booking-light: #e6f4ef;
}
header { background: white; }
.pole {
  border-color: var(--ink);
  background: repeating-linear-gradient(140deg, #214b65 0 5px, white 5px 9px, #ab3846 9px 14px, white 14px 18px);
}
.hero { background: #152e3b; min-height: clamp(245px, 27vw, 325px); }
.hero:after { background: linear-gradient(90deg, #152e3b 40%, rgba(21,46,59,.89) 49%, transparent 79%); }
.hero em, .hero .eyebrow { color: #c3e8ed; }
.hero > img { width: 61%; filter: saturate(.78); }
.progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; border: 0; padding: 0; margin: 22px 0 28px; }
.progress span { border-top: 3px solid var(--line); padding-top: 10px; }
.progress .active, .progress .done { border-color: var(--booking); }
.progress .active b, .progress .done b { background: var(--booking); border-color: var(--booking); }
.services { border: 0; display: grid; gap: 9px; }
.service {
  background: white; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; min-height: 64px;
}
.service span { font: 600 clamp(16px,2vw,21px)/1.35 Inter, sans-serif; letter-spacing: -.025em; }
.service b { background: var(--booking-light); color: var(--booking); border: 0; }
.service:hover, .service:focus-visible, .slots button:hover, .slots button:focus-visible {
  color: var(--booking); background: var(--booking-light); border-color: var(--booking);
}
.service:hover b, .flow button:not([class]), .seal { background: var(--booking); color: white; }
.flow .slots button { background: white; color: var(--booking); border-color: #7a9d92; }
.flow .slots button:hover, .flow .slots button:focus-visible { background: var(--booking); color: white; }
aside, .receipt, .login { background: #fff; border: 1px solid var(--line); }
aside { border-top: 4px solid var(--ink); }
dl div { border-color: var(--line); }
dd, .slots { font-variant-numeric: tabular-nums; }
:focus-visible { outline-color: #12649a; }
@media (max-width:720px) {
  .hero { min-height: 215px; }
  .hero > img { width: 82%; }
  .hero:after { background: linear-gradient(90deg,#152e3b 4%,rgba(21,46,59,.89) 43%, rgba(21,46,59,.12) 92%); }
  .progress { margin: 16px 0 22px; }
  .service { padding: 12px; gap: 10px; }
  .slots { grid-template-columns: repeat(auto-fit,minmax(66px,1fr)); }
  .date-filter input, .flow input { font-size: 16px; }
}

/* Salonun vitrin fotoğrafı ve basılı hizmet listesi. */
:root {
  --paper: #f8f7f2;
  --ink: #182f31;
  --muted: #51605c;
  --line: #cdd3c9;
  --booking: #1c5549;
  --booking-light: #e6eee7;
}
header { background: var(--paper); }
.nav { min-height: 68px; }
.hero { border-radius: 3px; background: #182f31; grid-template-columns: 45% 55%; }
.hero > div { padding: clamp(24px,4vw,52px); }
.hero > img { width: 55%; filter: none; }
.hero:after { display: none; }
.hero em, .hero .eyebrow { color: #e9cda4; }
.progress { margin-block: 22px 34px; }
.services { display: block; border-top: 2px solid var(--ink); }
.service {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; min-height: 76px; padding-inline: 8px;
}
.service span { font: 500 clamp(22px,2.4vw,30px)/1.2 var(--serif); }
.service small { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.service b { border: 1px solid #a4b8ae; background: transparent; }
.layout aside { background: #e8ede5; border: 0; border-radius: 3px; }
.flow .slots { grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); }
.flow .slots button { min-height: 48px; padding-inline: 5px; }
.flow form[method="post"] > button { width: 100%; }
@media (max-width:720px) {
  .nav { min-height: 57px; }
  .hero { grid-template-columns: 57% 43%; min-height: 190px; }
  .hero > img { width: 43%; object-position: 60% center; }
  .hero > div { padding: 18px 12px 18px 16px; }
  .hero h1 { font-size: clamp(29px,7.5vw,49px); }
  .hero p:last-child { margin-top: 11px; line-height: 1.4; }
  .hero .eyebrow { margin-bottom: 8px; }
  .progress { margin-block: 16px 22px; }
  .service { min-height: 65px; }
  .flow .slots { grid-template-columns: repeat(auto-fit,minmax(65px,1fr)); }
  .date-filter { display: grid; grid-template-columns: 1fr auto; }
  .date-filter label { min-width: 0; }
}

/* Randevu defteri */
body:has(.shop) { background: #f5f2e9; }
body:has(.shop) header { background: transparent; border-bottom: 1px solid #a39e90; }
body:has(.shop) .nav { min-height: 64px; }
body:has(.shop) main { padding-block: clamp(28px,5vw,76px); }
.shop {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  grid-template-areas: "salon menu"; gap: clamp(32px,6vw,84px); align-items: start;
}
.shop .flow { grid-area: menu; padding-top: clamp(0px,2vw,32px); }
.shop h1 { font: 560 clamp(52px,6.6vw,91px)/1.05 var(--serif); letter-spacing: -.068em; margin-bottom: 24px; color: #242721; }
.shop .choose { margin: 0 0 24px; font-size: 17px; color: #45483e; }
.shop .services { border-color: #36382d; }
.shop .service { min-height: 88px; padding-inline: 0; border-color: #c4bfb1; }
.shop .service span { font: 550 clamp(19px,2.1vw,28px)/1.3 Inter,sans-serif; letter-spacing: -.045em; }
.shop .service b { background: #79372c; color: #fff; border: 0; }
.shop .service:hover, .shop .service:focus-visible { background: #ebe6d9; color: #692d23; }
.shop aside { grid-area: salon; padding: 0; background: none; border: 0; }
.shop-photo { display: block; width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; }
.shop .hours { padding: 17px 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; border-bottom: 1px solid #a39e90; }
.hours h2 { font: 600 14px/1.6 Inter,sans-serif; letter-spacing: 0; margin: 0; }
.hours dl div { border: 0; padding: 1px 0; }
@media (max-width:720px) {
  body:has(.shop) main { padding-top: 22px; }
  .shop { display: flex; flex-direction: column; gap: 28px; }
  .shop .flow, .shop aside { width: 100%; }
  .shop .flow { padding-top: 0; }
  .shop h1 { font-size: clamp(46px,11vw,72px); margin-bottom: 10px; }
  .shop .choose { margin-bottom: 16px; }
  .shop .service { min-height: 64px; }
  .shop-photo { aspect-ratio: 2.5; object-position: center 52%; }
  .shop .hours { display: block; }
  .hours h2 { margin-bottom: 6px; }
}