/* Zərif Beauty — bir səhifəlik salon saytı. Yumşaq krem fon, gavalı‑qəhvəyi mətn, tozlu qızılgül vurğu.
   Başlıqlar Cormorant Garamond, mətn Mulish (hər ikisində ə/Ə var). Telefonda altda sabit "WhatsApp ilə yazılın". */
:root{
  --fon:#F6F0EA; --kart:#FFFCF9; --ink:#34262A; --ink2:#6A575B; --ink3:#8D7A7D; --xett:#E6D9D1;
  --gul:#9A5A5E; --gulT:#7E4549; --tund:#34262A; --tundInk:#E9DDD6;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Mulish', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--fon); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; padding-bottom:84px}
img{display:block; max-width:100%}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--gul); outline-offset:3px}
.zKap{max-width:1180px; margin:0 auto; padding:0 20px}
@media(min-width:768px){.zKap{padding:0 40px}}

/* Düymələr */
.zBtn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--ink); color:var(--fon); font:500 15.5px/1 var(--sans); letter-spacing:.02em; text-decoration:none; border:1.5px solid var(--ink);
  cursor:pointer; transition:background-color .15s, color .15s}
.zBtn:hover{background:var(--gulT); border-color:var(--gulT)}
.zBtn svg{color:#6FD39A}
.zBtnX{background:transparent; color:var(--ink)}
.zBtnX:hover{background:var(--ink); color:var(--fon); border-color:var(--ink)}
.zBtnSm{min-height:42px; padding:0 20px; font-size:14.5px}
.zBtnTam{width:100%}
.zLink{color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gul)}
.zOx{vertical-align:-3px}

/* Başlıq */
.zUst{position:sticky; top:0; z-index:40; background:rgba(246,240,234,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--xett)}
.zUstIc{display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px}
.zLogo{display:inline-flex; align-items:baseline; gap:8px; font:600 28px/1 var(--serif); letter-spacing:.02em; color:var(--ink); text-decoration:none}
.zLogo small{font:500 10.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink3)}
.zNav{display:none; gap:30px; font-size:15px}
.zNav a{color:var(--ink2); text-decoration:none}
.zNav a:hover{color:var(--ink)}
.zSag{display:flex; align-items:center; gap:14px}
.zDil{font-size:14px; font-weight:600; color:var(--ink2); text-decoration:none; padding:6px}
.zSag .zBtnSm{display:none}
@media(min-width:900px){.zNav{display:flex} .zSag .zBtnSm{display:inline-flex}}

/* Hero */
.zHero{padding:20px 0 56px}
.zHeroIc{display:grid; gap:28px; align-items:center}
.zUstYazi{font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gul)}
.zHero h1{margin-top:14px; font:500 clamp(2.7rem, 9vw, 4.6rem)/1.02 var(--serif); letter-spacing:-.01em}
.zHeroAlt{margin-top:18px; max-width:470px; font-size:17px; color:var(--ink2)}
.zDuymeler{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.zFakt{list-style:none; margin:28px 0 0; padding:18px 0 0; display:flex; flex-wrap:wrap; gap:8px 28px; border-top:1px solid var(--xett); font-size:14.5px; color:var(--ink2)}
.zFakt li::before{content:''; display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--gul); vertical-align:middle}
.zHeroFoto{order:-1; aspect-ratio:4/3; border-radius:200px 200px 18px 18px; overflow:hidden; background:var(--xett)}
.zHeroFoto img{width:100%; height:100%; object-fit:cover}
@media(min-width:900px){
  .zHero{padding:64px 0 96px}
  .zHeroIc{grid-template-columns:1.1fr .9fr; gap:64px}
  .zHeroFoto{order:0; aspect-ratio:4/5}
}

/* Bölmələr */
.zBolme{padding:64px 0}
@media(min-width:900px){.zBolme{padding:104px 0}}
.zBas{max-width:640px; margin-bottom:36px}
.zBasSira{max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 40px}
.zBolme h2{font:500 clamp(2.2rem, 6vw, 3.4rem)/1.05 var(--serif)}
.zBas p{margin-top:12px; color:var(--ink2); font-size:16.5px}

/* Qiymət qrupları */
.zQruplar{display:grid; gap:20px}
@media(min-width:900px){.zQruplar{grid-template-columns:repeat(3, 1fr); gap:24px}}
.zQrup{padding:14px 14px 22px; border-radius:18px; background:var(--kart); border:1px solid var(--xett)}
.zQrup img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:var(--xett)}
.zQrup h3{margin:18px 8px 6px; font:600 28px/1.1 var(--serif)}
.zQList{list-style:none; margin:0; padding:0 8px}
.zQList li{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--xett); font-size:15.5px}
.zQList li:last-child{border-bottom:0}
.zQAd{display:flex; flex-direction:column; line-height:1.3}
.zQAd small{font-size:13px; color:var(--ink3)}
.zQN{flex:1; min-width:12px}
.zQList b{font-weight:600; white-space:nowrap}

/* Qalereya (tünd) */
.zTund{background:var(--tund); color:var(--fon)}
.zTund .zBas p{color:var(--tundInk)}
.zTund .zLink{color:var(--fon)}
.zGaleriya{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.zGaleriya li{aspect-ratio:1; overflow:hidden; border-radius:10px; background:#4A3A3E}
.zGaleriya img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.zGaleriya li:hover img{transform:scale(1.04)}
.zBoyuk{grid-column:span 2}
@media(min-width:900px){
  .zGaleriya{grid-template-columns:repeat(4, 1fr); gap:12px}
  .zBoyuk{grid-row:span 2}
}

/* Yazılış */
.zYazIc{display:grid; gap:36px}
@media(min-width:900px){.zYazIc{grid-template-columns:1fr 1fr; gap:72px; align-items:start}}
.zYazMetn > p{margin-top:12px; color:var(--ink2); font-size:16.5px; max-width:480px}
.zAddim{margin:26px 0 0; padding:0; list-style:none; counter-reset:a; display:grid; gap:12px}
.zAddim li{counter-increment:a; display:flex; gap:14px; align-items:baseline; font-size:16px}
.zAddim li::before{content:counter(a); font:600 22px/1 var(--serif); color:var(--gul); min-width:18px}
.zInteryer{margin-top:32px; aspect-ratio:3/2; border-radius:18px; overflow:hidden; display:none}
.zInteryer img{width:100%; height:100%; object-fit:cover}
@media(min-width:900px){.zInteryer{display:block}}
.zForma{display:grid; gap:14px; padding:26px; border-radius:20px; background:var(--kart); border:1px solid var(--xett)}
.zForma label{display:grid; gap:6px}
.zForma label span{font-size:14px; font-weight:500; color:var(--ink2)}
.zForma input,.zForma select{width:100%; min-height:50px; padding:0 14px; border-radius:12px; border:1.5px solid var(--xett); background:#fff;
  font:inherit; font-size:16px; color:var(--ink); -webkit-appearance:none; appearance:none}
.zForma select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236A575B' stroke-width='2'/%3E%3C/svg%3E") right 12px center/18px no-repeat; padding-right:40px}
.zForma input:focus,.zForma select:focus{outline:none; border-color:var(--ink)}
.zIki{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.zForma .zBtn{margin-top:6px}

/* Rəylər */
.zAcik{background:#EFE6DE}
.zReyler{display:grid; gap:16px}
@media(min-width:900px){.zReyler{grid-template-columns:repeat(3, 1fr); gap:24px}}
.zRey{padding:26px; border-radius:18px; background:var(--kart)}
.zRey blockquote{margin:0; font:500 22px/1.35 var(--serif)}
.zRey figcaption{margin-top:16px; font-size:14.5px; font-weight:500; color:var(--ink3)}

/* Əlaqə */
.zElaqe{display:grid; gap:28px}
@media(min-width:900px){.zElaqe{grid-template-columns:1fr auto; align-items:end}}
.zUnvan{margin-top:14px; font-size:19px}
.zSoluk{color:var(--ink2); margin-top:4px}
.zElaqeD{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px}

.zAlt{padding:28px 0 32px; border-top:1px solid var(--xett); font-size:13.5px; color:var(--ink3)}
.zAltIc{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.zAlt .zLogo{font-size:22px}

/* Telefonda sabit yazılış düyməsi */
.zMobilWa{position:fixed; z-index:30; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center;
  gap:9px; min-height:54px; border-radius:999px; background:var(--ink); color:var(--fon); font:500 16px/1 var(--sans); text-decoration:none;
  box-shadow:0 16px 32px -14px rgba(52,38,42,.6)}
.zMobilWa svg{color:#6FD39A}
@media(min-width:900px){.zMobilWa{display:none} body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .zGaleriya img{transition:none}}
/* telefonda yuxarıdakı WhatsApp düyməsi altdakı sabit düymə ilə təkrarlanmasın */
@media(max-width:899px){.zDuymeler .zBtn:not(.zBtnX){display:none}}