/* =========================================================
   ANASTASIA BEAUTY LOUNGE
   Palet: logodan türetildi
   --ink      #0D1014  (logo zemini, gece siyahı)
   --champ    #C9C0AA  (logo rengi, şampanya)
   --ivory    #F4F1E9  (fildişi zemin)
   --taupe    #8B8474  (sessiz metin)
   ========================================================= */
:root{
  --ink:#0d1014;
  --ink-soft:#14181d;
  --champ:#c9c0aa;
  --champ-dim:rgba(201,192,170,.45);
  --ivory:#f4f1e9;
  --taupe:#7d7666;
  --line:rgba(13,16,20,.14);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
img{max-width:100%;display:block}

/* ---------- Ortak ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.45em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:1rem;
}
.eyebrow-light{color:var(--champ)}
.section-head{max-width:720px;margin:0 auto 3.5rem;text-align:center;padding:0 1.5rem}
.section-head h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);
  line-height:1.15;
}
.btn{
  display:inline-block;font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;
  padding:1rem 2.2rem;border:1px solid var(--champ);transition:all .3s ease;
}
.btn-fill{background:var(--champ);color:var(--ink)}
.btn-fill:hover{background:transparent;color:var(--champ)}
.btn-line{color:var(--champ)}
.btn-line:hover{background:var(--champ);color:var(--ink)}
.btn-sm{padding:.7rem 1.4rem;font-size:.7rem;margin-top:auto}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem clamp(1.2rem,4vw,3rem);
  background:rgba(13,16,20,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(201,192,170,.15);
}
.nav-brand{display:flex;align-items:center;gap:.8rem;color:var(--champ)}
.nav-mark{height:38px;width:auto}
.nav-brand span{font-size:.85rem;letter-spacing:.3em;line-height:1.3;display:flex;flex-direction:column}
.nav-brand em{font-style:normal;font-size:.55rem;letter-spacing:.42em;opacity:.7}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,3vw,2.2rem)}
.nav-links a{
  color:var(--champ);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.85;transition:opacity .25s;
}
.nav-links a:hover{opacity:1}
.nav-cta{border:1px solid var(--champ);padding:.55rem 1.2rem}
.nav-cta:hover{background:var(--champ);color:var(--ink)!important}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,192,170,.10), transparent 60%),
    var(--ink);
  color:var(--ivory);
  text-align:center;
  padding:clamp(4rem,9vh,7rem) 1.5rem clamp(4rem,8vh,6rem);
  position:relative;
}
.hero-inner{max-width:820px;margin:0 auto;animation:rise 1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-logo{width:clamp(180px,26vw,260px);margin:0 auto 2.2rem}
.hero-eyebrow{font-size:.72rem;letter-spacing:.6em;color:var(--champ);margin-bottom:1.4rem}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1.08;
}
.hero h1 span{font-style:italic;color:var(--champ)}
.hero-sub{
  max-width:520px;margin:1.8rem auto 2.6rem;
  color:rgba(244,241,233,.72);font-size:1rem;letter-spacing:.02em;
}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-rule{
  width:1px;height:64px;margin:4rem auto 0;
  background:linear-gradient(var(--champ),transparent);
}
.hero-rating{
  margin-top:2rem;font-size:.75rem;letter-spacing:.25em;color:var(--champ);
  text-transform:uppercase;
}

/* ---------- Yorumlar ---------- */
.reviews{padding:clamp(4.5rem,9vh,7rem) clamp(1.2rem,5vw,4rem);background:#ece8dd}
.review-grid{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;
}
.review-grid blockquote{
  background:var(--ivory);border:1px solid var(--line);padding:2rem 1.8rem;
  display:flex;flex-direction:column;gap:1.2rem;
}
.review-grid p{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.5;
}
.review-grid footer{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
  margin-top:auto;
}
.reviews-link{border-bottom:1px solid var(--champ);padding-bottom:2px;color:var(--ink)}
.reviews-link:hover{color:var(--taupe)}

/* ---------- Hizmet menüsü ---------- */
.services{padding:clamp(4.5rem,9vh,7rem) clamp(1.2rem,5vw,4rem)}
.menu{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:3rem 4.5rem;
}
.menu-group h3{
  font-family:var(--serif);font-weight:400;font-size:1.7rem;
  padding-bottom:.7rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--ink);
}
.menu-group ul{list-style:none}
.menu-group li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.6rem 0;border-bottom:1px solid var(--line);
}
.menu-group li:last-child{border-bottom:none}
.menu-group li span{font-weight:400;letter-spacing:.04em}
.menu-group li em{
  font-style:normal;font-size:.8rem;color:var(--taupe);text-align:right;flex:1;
  min-width:150px;
}
.menu-note{
  text-align:center;margin-top:3.5rem;color:var(--taupe);
  font-size:.85rem;letter-spacing:.08em;
}

/* ---------- Hakkımızda ---------- */
.about{background:var(--ink);color:var(--ivory);padding:clamp(4.5rem,9vh,7rem) 1.5rem}
.about-inner{max-width:860px;margin:0 auto;text-align:center}
.about-quote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.5;color:var(--ivory);
}
.about-points{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2.5rem;margin-top:3.5rem;text-align:left;
}
.about-points div{border-top:1px solid rgba(201,192,170,.35);padding-top:1.2rem}
.about-points h4{
  font-weight:400;font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--champ);margin-bottom:.6rem;
}
.about-points p{font-size:.9rem;color:rgba(244,241,233,.68)}

/* ---------- İletişim ---------- */
.contact{padding:clamp(4.5rem,9vh,7rem) clamp(1.2rem,5vw,4rem)}
.contact-grid{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.contact-card{
  background:var(--ivory);padding:2.2rem 1.8rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.contact-card h4{
  font-weight:400;font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--taupe);
}
.contact-card > a:first-of-type{
  font-family:var(--serif);font-size:1.5rem;line-height:1.2;
}
.contact-card > a:first-of-type:hover{color:var(--taupe)}
.contact-card p{font-size:.85rem;color:var(--taupe)}
.contact-card .btn{border-color:var(--ink);color:var(--ink);align-self:flex-start}
.contact-card .btn:hover{background:var(--ink);color:var(--ivory)}
.hours{list-style:none}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.45rem 0;border-bottom:1px dotted var(--line);font-size:.9rem;
}
.hours em{font-style:normal;color:var(--taupe)}

/* ---------- Footer ---------- */
.footer{
  background:var(--ink);color:var(--champ);text-align:center;
  padding:3.5rem 1.5rem 2.5rem;
}
.footer-mark{width:70px;margin:0 auto 1.2rem;opacity:.9}
.footer p{font-size:.78rem;letter-spacing:.4em}
.footer-links{display:flex;justify-content:center;gap:2rem;margin:1.6rem 0}
.footer-links a{
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;opacity:.75;
}
.footer-links a:hover{opacity:1}
.footer small{font-size:.7rem;color:rgba(201,192,170,.5);letter-spacing:.05em}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  body{font-size:1.02rem}

  /* --- Nav: sade tek satır --- */
  .nav{padding:.75rem 1.1rem}
  .nav-mark{height:30px}
  .nav-brand{gap:.6rem}
  .nav-brand span{font-size:.7rem;letter-spacing:.24em}
  .nav-brand em{font-size:.5rem}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{padding:.5rem 1rem;font-size:.7rem}

  /* --- Hero --- */
  .hero{padding:3.2rem 1.4rem 3.5rem}
  .hero-logo{width:150px;margin-bottom:1.8rem}
  .hero-eyebrow{letter-spacing:.45em;font-size:.66rem}
  .hero h1{font-size:2.35rem}
  .hero-sub{font-size:.95rem;margin:1.5rem auto 2.2rem}
  .hero-actions{flex-direction:column;align-items:center;gap:.8rem}
  .hero-actions .btn{width:100%;max-width:320px;text-align:center;padding:1rem}
  .hero-rating{margin-top:1.8rem;font-size:.68rem;letter-spacing:.2em}
  .hero-rule{height:44px;margin-top:2.8rem}

  /* --- Bölüm ritmi --- */
  .section-head{margin-bottom:2.4rem}
  .section-head h2{font-size:1.75rem}
  .eyebrow{font-size:.66rem;letter-spacing:.4em;margin-bottom:.8rem}
  .services,.reviews,.contact{padding:3.5rem 1.4rem}
  .about{padding:3.5rem 1.4rem}

  /* --- Hizmet menüsü: her grup nefes alan bir kart --- */
  .menu{gap:1.2rem;grid-template-columns:1fr}
  .menu-group{
    background:#fbf9f3;border:1px solid var(--line);
    padding:1.6rem 1.4rem 1.2rem;
  }
  .menu-group h3{font-size:1.45rem;border-color:var(--champ);padding-bottom:.6rem}
  .menu-group li{flex-direction:column;gap:.15rem;align-items:flex-start;padding:.75rem 0}
  .menu-group li span{font-size:1rem}
  .menu-group li em{text-align:left;min-width:0;font-size:.82rem}
  .menu-note{margin-top:2.2rem;font-size:.8rem;padding:0 .5rem}

  /* --- Hakkımızda --- */
  .about-quote{font-size:1.25rem}
  .about-points{gap:1.8rem;margin-top:2.6rem}

  /* --- Yorumlar --- */
  .review-grid{grid-template-columns:1fr;gap:1.1rem}
  .review-grid blockquote{padding:1.6rem 1.4rem}
  .review-grid p{font-size:1.08rem}

  /* --- İletişim --- */
  .contact-grid{grid-template-columns:1fr;gap:1.1rem;background:none;border:none}
  .contact-card{border:1px solid var(--line);padding:1.8rem 1.5rem;gap:.8rem}
  .contact-card .btn{align-self:stretch;text-align:center;padding:.9rem}

  /* --- Footer --- */
  .footer{padding:2.8rem 1.4rem 2rem}
  .footer p{font-size:.68rem;letter-spacing:.3em}
  .footer-links{flex-wrap:wrap;gap:1rem 1.6rem}
}

.contact-card p{overflow-wrap:break-word}