/* ==========================================================
   Saç Atölyesi Nur — tasarım sistemi
   Palet: pudra pembe + krem · Başlıklar serif, gövde sans
   ========================================================== */

:root {
  --krem: #fdf8f2;
  --krem-koyu: #f6ecdf;
  --pudra: #f2d3d6;
  --pudra-acik: #f8e6e7;
  --pudra-derin: #d99aa3;
  /* NUMEX-DÜZELTME (2026-10-21): Denetimde üst yazı (2.18:1), buton yazısı (3.91:1) ve soluk metin (4.2:1) WCAG 4.5:1 eşiğinin altında kaldı; renkler korunarak koyulaştırıldı. */
  --pudra-metin: #a3596b; /* üst yazı/etiketler için erişilebilir pudra tonu */
  --gul: #9e5566;
  --gul-koyu: #86414c;
  --metin: #3f3230;
  --metin-soluk: #6b5a57;
  --cizgi: #e6d6c8;
  --beyaz: #fffdfb;

  --golge: 0 18px 40px -28px rgba(143, 77, 88, 0.45);
  --golge-kucuk: 0 6px 18px -12px rgba(143, 77, 88, 0.35);
  --yaricap: 18px;
  --gecis: 220ms ease;

  --serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --bosluk: clamp(1rem, 4vw, 2rem);
  --azami: 1140px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.05rem);
  line-height: 1.65;
  color: var(--metin);
  background: var(--krem);
  overflow-x: hidden;
  overflow-y: auto;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: var(--gul-koyu);
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.1rem, 6vw, 3.9rem);
}
h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}
h3 {
  font-size: clamp(1.12rem, 2vw, 1.35rem);
}

p {
  margin: 0;
}

a {
  color: var(--gul-koyu);
}

.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--gul-koyu);
  color: #fff;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}

.atla:focus {
  left: 0;
}

.kapsayici {
  width: 100%;
  max-width: var(--azami);
  margin: 0 auto;
  padding: 0 var(--bosluk);
}

.bolum {
  padding: clamp(2.5rem, 7vw, 5rem) 0;
}

.bolum--krem {
  background: linear-gradient(180deg, var(--krem-koyu), var(--krem));
}

.bolum-basligi {
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.bolum-basligi p {
  margin-top: 0.6rem;
  color: var(--metin-soluk);
}

.ust-yazi {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pudra-metin);
  font-weight: 700;
  margin-bottom: 0.7rem;
}

/* ---------------- Butonlar ---------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--gecis), background var(--gecis), color var(--gecis), box-shadow var(--gecis);
}

.dugme:active {
  transform: translateY(1px);
}

.dugme--dolu {
  background: var(--gul);
  color: var(--beyaz);
  box-shadow: var(--golge-kucuk);
}

.dugme--dolu:hover {
  background: var(--gul-koyu);
}

.dugme--bos {
  background: transparent;
  color: var(--gul-koyu);
  border-color: var(--pudra-derin);
}

.dugme--bos:hover {
  background: var(--pudra-acik);
}

.dugme--kucuk {
  /* WCAG 2.5.5: küçük buton da en az 44px dokunma hedefi kalmalı */
  min-height: 44px;
  padding: 0.4rem 1rem;
  font-size: 0.84rem;
}

/* WhatsApp — marka yeşili; paletle çatışmasın diye koyu ton kullanıldı.
   Beyaz yazı üstünde 4.5:1 kontrast sağlar. */
.dugme--whatsapp {
  background: #1f7a4d;
  color: #fff;
  box-shadow: var(--golge-kucuk);
}

.dugme--whatsapp:hover {
  background: #17603c;
}

.satir-ici-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------- Yüzen WhatsApp düğmesi ---------------- */

/* Mobilde her an erişilebilir; masaüstünde de köşede durur.
   İçeriği kapatmasın diye sadece sağ-alt köşeye yerleşir ve
   sayfa sonundaki alt bilgiye ek pay bırakılır. */
.wa-yuzen {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.6rem);
  bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1f7a4d;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(23, 96, 60, 0.7);
  transition: background var(--gecis), transform var(--gecis);
}

.wa-yuzen:hover {
  background: #17603c;
  transform: translateY(-2px);
}

.wa-yuzen:focus-visible {
  outline: 3px solid var(--gul-koyu);
  outline-offset: 3px;
}

.wa-yuzen svg {
  display: block;
}

/* Yüzen düğme içeriği örtmesin */
@media (max-width: 639px) {
  .altbilgi {
    padding-bottom: 5rem;
  }
}

/* ---------------- Üst menü ---------------- */

.ustbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 248, 242, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}

/* NUMEX-DÜZELTME (2026-10-21): Mobilde menü açıldığında, yarı saydam üstbar arkasındaki hero metni menü bağlantılarının üstünde görünüyordu; menu açıkken üstbar zemini opak yapıldı. */
/* Menü açıkken üstbar yarı saydam kalırsa arkadaki sayfa metni menü
   bağlantılarının üstüne biner; bu yüzden açıkken zemin opak olur. */
.ustbar:has(.menu.acik) {
  background: var(--krem);
  backdrop-filter: none;
}

.ustbar__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  /* NUMEX-DÜZELTME (2026-10-21): .menu position:absolute ile .ustbar'a göre konumlanıyordu; top:100% menüyü üstbarın 68px altı yerine üstbarın kendi tepesinden başlatıp logo/marka satırının üstüne bindiriyordu. Konumlandırma bağlamı iç kapsayıcıya taşındı. */
  /* Menü (.menu) mutlak konumla buna göre yerleşir; konum bağlamı şart. */
  position: relative;
}

.marka {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  /* WCAG 2.5.5: dokunma hedefi en az 44px yüksekliğinde olmalı */
  min-height: 44px;
  padding-block: 0.2rem;
}

.marka__isaret {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--pudra-acik), var(--pudra-derin));
  display: grid;
  place-items: center;
  color: var(--beyaz);
  font-family: var(--serif);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.marka__ad {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600;
  color: var(--gul-koyu);
  line-height: 1.1;
}

.marka__alt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}

.menu-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  cursor: pointer;
  color: var(--gul-koyu);
}

.menu-dugme span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-dugme span::before,
.menu-dugme span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-dugme span::before {
  top: -6px;
}
.menu-dugme span::after {
  top: 6px;
}

.menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  padding: 0.6rem var(--bosluk) 1rem;
}

.menu.acik {
  display: block;
}

.menu a {
  display: block;
  padding: 0.8rem 0.25rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--metin);
  font-weight: 500;
  border-bottom: 1px solid var(--pudra-acik);
}

.menu a:last-child {
  border-bottom: 0;
}

.menu a:hover {
  color: var(--gul-koyu);
}

@media (min-width: 900px) {
  .menu-dugme {
    display: none;
  }

  .menu {
    display: flex !important;
    position: static;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    gap: 1.4rem;
  }

  .menu a {
    /* Menü yatay olsa da dokunma hedefi 44px kalır (tablet/dokunmatik dizüstü) */
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    border: 0;
    font-size: 0.92rem;
    color: var(--metin-soluk);
  }

  .menu a:hover {
    color: var(--gul-koyu);
  }
}

/* ---------------- Kahraman bölümü ---------------- */

.kahraman {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(242, 211, 214, 0.85), transparent 65%),
    radial-gradient(50% 60% at 10% 90%, rgba(246, 236, 223, 0.9), transparent 70%),
    var(--krem);
}

.kahraman__ic {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: center;
  padding: clamp(2.5rem, 8vw, 5.5rem) 0 clamp(2.5rem, 7vw, 4.5rem);
}

.kahraman h1 em {
  font-style: italic;
  color: var(--pudra-metin);
}

.kahraman__metin {
  max-width: 34rem;
}

.kahraman__metin > p {
  margin-top: 1.1rem;
  color: var(--metin-soluk);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
}

.kahraman__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.kahraman__notlar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--metin-soluk);
}

.kahraman__notlar li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kahraman__notlar li::before {
  content: "✧";
  color: var(--pudra-derin);
}

.kahraman__gorsel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--golge);
  border: 1px solid var(--cizgi);
  aspect-ratio: 4 / 3;
  background: var(--pudra-acik);
}

.kahraman__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .kahraman__ic {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* ---------------- Hizmet kartları ---------------- */

.hizmetler {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .hizmetler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .hizmetler {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hizmet {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-kucuk);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.hizmet:hover {
  transform: translateY(-3px);
  border-color: var(--pudra-derin);
  box-shadow: var(--golge);
}

.hizmet__tepe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.hizmet__fiyat {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gul-koyu);
  white-space: nowrap;
}

.hizmet__aciklama {
  color: var(--metin-soluk);
  font-size: 0.92rem;
  flex-grow: 1;
}

.hizmet__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--cizgi);
  font-size: 0.82rem;
  color: var(--metin-soluk);
}

.sure {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.hizmet__sec {
  background: none;
  border: 0;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gul-koyu);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hizmet__sec:hover {
  color: var(--gul-koyu);
}

/* ---------------- Saatler + adres ---------------- */

.ikili {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 900px) {
  .ikili {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: clamp(1.15rem, 3vw, 1.8rem);
  box-shadow: var(--golge-kucuk);
}

.saat-listesi {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.saat-listesi li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pudra-acik);
  font-size: 0.94rem;
}

.saat-listesi li:last-child {
  border-bottom: 0;
}

.saat-listesi .gun {
  font-weight: 600;
}

.saat-listesi li.kapali {
  color: var(--metin-soluk);
}

.saat-listesi li.bugun {
  background: var(--pudra-acik);
  border-radius: 10px;
  padding-inline: 0.6rem;
  font-weight: 600;
}

.durum-etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--pudra-acik);
  color: var(--gul-koyu);
}

.durum-etiket::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gul);
}

.durum-etiket--kapali {
  background: var(--krem-koyu);
  color: var(--metin-soluk);
}

.durum-etiket--kapali::before {
  background: var(--metin-soluk);
}

.kart h3 {
  margin-bottom: 0.35rem;
}

.kart__aciklama {
  color: var(--metin-soluk);
  font-size: 0.94rem;
}

.iletisim-listesi {
  list-style: none;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.iletisim-listesi li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.94rem;
  align-items: center;
  min-height: 44px;
}

.iletisim-listesi a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.iletisim-listesi .etiket {
  flex: 0 0 5.2rem;
  color: var(--metin-soluk);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.15rem;
}

.harita {
  /* NUMEX-DÜZELTME (2026-10-21): Harita iframe'i çerez engeli/yavaş ağda boş kutu bırakıyordu; altına konum bilgisi gösteren kalıcı bir yedek katman eklendi. */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  aspect-ratio: 16 / 10;
  background: var(--pudra-acik);
}

.harita__yedek {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--metin);
  background: linear-gradient(160deg, var(--pudra-acik), var(--krem-koyu));
}

.harita__simge {
  font-size: 1.6rem;
}

.harita__yedek strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gul-koyu);
}

.harita__not {
  font-size: 0.78rem;
  max-width: 16rem;
}

.harita iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* ---------------- Randevu formu ---------------- */

.randevu {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 900px) {
  .randevu {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.randevu__yan {
  background: linear-gradient(160deg, var(--pudra-acik), var(--krem-koyu));
  border-radius: var(--yaricap);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--cizgi);
}

.randevu__yan ul {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.randevu__yan li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--metin);
}

.randevu__yan a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.randevu__yan li::before {
  content: "✓";
  color: var(--gul);
  font-weight: 700;
}

form.randevu-formu {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: clamp(1.15rem, 3vw, 2rem);
  box-shadow: var(--golge-kucuk);
}

@media (min-width: 640px) {
  form.randevu-formu {
    grid-template-columns: 1fr 1fr;
  }
  .alan--tam {
    grid-column: 1 / -1;
  }
}

.alan {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.alan label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--metin);
}

.alan label .zorunlu {
  color: var(--gul);
}

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--metin);
  background: var(--krem);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}

.alan textarea {
  min-height: 88px;
  resize: vertical;
}

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: none;
  background: var(--beyaz);
  border-color: var(--pudra-derin);
  box-shadow: 0 0 0 4px rgba(242, 211, 214, 0.55);
}

.alan.hata input,
.alan.hata select,
.alan.hata textarea {
  border-color: #c05263;
  background: #fdf1f2;
}

.alan__hata {
  font-size: 0.8rem;
  color: #a63a4b;
  min-height: 1rem;
}

.ipucu {
  font-size: 0.78rem;
  color: var(--metin-soluk);
}

.form-mesaj {
  display: none;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

.form-mesaj.gorunur {
  display: block;
}

.form-mesaj--ok {
  background: #eef7ef;
  border: 1px solid #b9dcbf;
  color: #2d6437;
}

.form-mesaj--hata {
  background: #fdf1f2;
  border: 1px solid #eec2c9;
  color: #a63a4b;
}

.randevu-formu .dugme {
  justify-self: start;
  min-width: 12rem;
}

@media (max-width: 639px) {
  .randevu-formu .dugme {
    width: 100%;
    justify-self: stretch;
  }
}

/* ---------------- Alt bilgi ---------------- */

.altbilgi {
  background: var(--gul-koyu);
  color: #f7e9e9;
  padding: clamp(2rem, 5vw, 3rem) 0 1.5rem;
  font-size: 0.9rem;
}

.altbilgi a {
  color: #fffaf2;
  text-decoration: underline;
  text-decoration-color: rgba(255, 250, 242, 0.45);
  text-underline-offset: 3px;
}

.altbilgi a:hover {
  text-decoration-color: #fffaf2;
}

.altbilgi__ic {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .altbilgi__ic {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.altbilgi h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  color: #fff;
}

.altbilgi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.altbilgi ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.altbilgi__alt {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #eed6d6;
}

/* ---------------- Yardımcılar ---------------- */

.yukleniyor {
  color: var(--metin-soluk);
  font-size: 0.9rem;
}

.bos-durum {
  text-align: center;
  color: var(--metin-soluk);
  padding: 1.5rem 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}