/* ═══════════════════════════════════════════════════
   SUCCESSO GÜZELLİK MERKEZİ  ·  style.css  v3
   ═══════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-hi:     #E2C86A;
  --gold-dim:    rgba(201,168,76,0.18);
  --gold-faint:  rgba(201,168,76,0.07);
  --ink:         #090909;
  --ink-2:       #101010;
  --ink-3:       #161616;
  --ink-4:       #1d1d1d;
  --cream:       #F3EEE5;
  --cream-dim:   #B0A898;
  --r:           3px;

  /* Spacing — yalnızca bu değerleri kullan */
  --s4:   4px;
  --s8:   8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;
  --s128:128px;
}

/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  {
  background:var(--ink);
  color:var(--cream);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }
button { font-family:inherit; }

/* ── Layout util ─────────────────────────────────── */
.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--s32);
}

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity:.7; }
  50%     { opacity:.2; }
}

/* Hero fade-up utility */
.fu {
  opacity:0;
  animation: fadeUp .85s ease forwards;
  animation-delay: var(--fd, 0s);
}

/* Scroll reveal */
.rv {
  opacity:0;
  transform:translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.rv.in { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
#siteHeader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  transition: background .35s, box-shadow .35s;
}
#siteHeader.stuck {
  background: rgba(9,9,9,.96);
  box-shadow: 0 1px 0 var(--gold-dim);
  backdrop-filter: blur(8px);
}

/* Inner row — single flex line */
.hdr-inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s24) var(--s32);
  gap: var(--s32);
  transition: padding .3s;
}
#siteHeader.stuck .hdr-inner {
  padding-top:    var(--s16);
  padding-bottom: var(--s16);
}

/* Logo */
.hdr-logo {
  display: flex;
  align-items: center;
  gap: var(--s12);
  flex-shrink: 0;
  text-decoration: none;
}
.logo-swan { width:42px; height:42px; object-fit:contain; flex-shrink:0; }
.logo-text { display:flex; flex-direction:column; gap:1px; }
.logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-size:18px; font-weight:600;
  letter-spacing:5px; color:var(--gold);
  line-height:1;
}
.logo-sub {
  font-size:7.5px; letter-spacing:5px;
  text-transform:uppercase; color:var(--cream-dim);
  line-height:1;
}

/* Nav */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: var(--s48);
  flex: 1;
  justify-content: center;
}
.hdr-nav a {
  font-size:10.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--cream-dim);
  position:relative; padding-bottom:3px;
  white-space:nowrap;
  transition:color .25s;
}
.hdr-nav a::after {
  content:'';
  position:absolute; bottom:0; left:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .3s;
}
.hdr-nav a:hover              { color:var(--gold); }
.hdr-nav a:hover::after       { width:100%; }

/* CTA button */
.hdr-cta {
  flex-shrink:0;
  font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold);
  padding:10px var(--s24);
  border-radius:var(--r);
  white-space:nowrap;
  transition:background .25s, color .25s;
}
.hdr-cta:hover { background:var(--gold); color:var(--ink); }

/* Burger */
.hdr-burger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none;
  cursor:pointer; padding:var(--s4);
  flex-shrink:0;
}
.hdr-burger span {
  display:block; width:22px; height:1.5px;
  background:var(--cream);
  transition:all .3s;
}
.hdr-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hdr-burger.open span:nth-child(2) { opacity:0; }
.hdr-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile dropdown */
.hdr-mobile {
  display:none;
  flex-direction:column;
  background:rgba(9,9,9,.98);
  border-top:1px solid var(--gold-dim);
  padding:0 var(--s32) var(--s24);
}
.hdr-mobile.open { display:flex; }
.hdr-mobile a {
  font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--cream-dim);
  padding:var(--s16) 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .25s;
}
.hdr-mobile a:last-child { border-bottom:none; }
.hdr-mobile a:hover      { color:var(--gold); }
.hdr-mobile .mobile-cta  {
  margin-top:var(--s16);
  border:1px solid var(--gold);
  color:var(--gold);
  border-radius:var(--r);
  padding:var(--s12) var(--s24);
  text-align:center;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn-gold {
  display:inline-block;
  background:var(--gold); color:var(--ink);
  font-family:'Jost',sans-serif;
  font-size:10.5px; font-weight:500;
  letter-spacing:3px; text-transform:uppercase;
  padding:15px var(--s48);
  border:none; border-radius:var(--r); cursor:pointer;
  transition:background .25s, transform .25s;
  white-space:nowrap;
}
.btn-gold:hover    { background:var(--gold-hi); transform:translateY(-2px); }
.btn-gold.btn-lg   { padding:17px 56px; font-size:11px; }

.btn-outline {
  display:inline-block;
  background:transparent; color:var(--cream-dim);
  font-family:'Jost',sans-serif;
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  padding:15px var(--s48);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r); cursor:pointer;
  transition:border-color .25s, color .25s, transform .25s;
  white-space:nowrap;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════
   SECTION COMMON
   ═══════════════════════════════════════════════════ */
.sec-dark  { background:var(--ink-2); }
.sec-black { background:var(--ink);   }

section { padding:var(--s128) 0; }

.sec-head { text-align:center; margin-bottom:var(--s64); }

.sec-tag {
  display:block;
  font-size:9px; letter-spacing:6px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:var(--s16);
}
.sec-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,5vw,52px); font-weight:300;
  line-height:1.1; margin-bottom:var(--s16);
}
.sec-title em { font-style:italic; color:var(--gold); }
.sec-desc {
  font-size:14px; color:var(--cream-dim);
  max-width:480px; margin:0 auto; line-height:1.9;
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
#hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  /* Üst: header için, Alt: Keşfet için — hero-body ile hiç ilişkisi yok */
  padding-top: 120px;
  padding-left: var(--s32);
  padding-right: var(--s32);
  padding-bottom: 0;
}

.hero-bg-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 50% 45%,rgba(201,168,76,.08) 0%,transparent 65%);
}
.hero-bg-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 70px,rgba(201,168,76,.028) 70px,rgba(201,168,76,.028) 71px),
    repeating-linear-gradient(90deg,transparent,transparent 70px,rgba(201,168,76,.028) 70px,rgba(201,168,76,.028) 71px);
}

/* Hero body — tüm içerik burada, z-index:2 */
.hero-body {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  max-width:800px;
  width:100%;
}

.hero-eyebrow {
  font-size:9.5px; letter-spacing:8px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:var(--s32);
}
.hero-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(60px,11vw,124px); font-weight:300;
  line-height:.9; letter-spacing:-1px;
  margin-bottom:var(--s16);
}
.hero-title em {
  display:block; font-style:italic; color:var(--gold);
}
.hero-city {
  font-size:9.5px; letter-spacing:10px;
  text-transform:uppercase; color:var(--cream-dim);
  margin-bottom:var(--s32);
}
.hero-desc {
  font-size:15px; color:var(--cream-dim);
  line-height:1.9; max-width:440px;
  margin-bottom:var(--s48);
}
.hero-actions {
  display:flex;
  gap:var(--s16);
  flex-wrap:wrap;
  justify-content:center;
}

/* ── Keşfet — tamamen bağımsız, absolute ── */
.hero-scroll {
  position:absolute;
  bottom: 32px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s8);
  pointer-events:none;
}
.hero-scroll-txt {
  font-size:8.5px; letter-spacing:5px;
  text-transform:uppercase; color:var(--cream-dim);
  opacity:.6;
}
.hero-scroll-line {
  width:1px; height:48px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:pulse 2.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   HİZMETLER
   ═══════════════════════════════════════════════════ */
.svc-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}

.svc-card {
  background:var(--ink-3);
  padding:var(--s48) var(--s32);
  border:1px solid var(--gold-faint);
  position:relative; overflow:hidden;
  transition:background .35s, transform .35s;
  opacity:0; transform:translateY(28px);
  transition:background .35s, transform .35s, opacity .6s ease;
}
.svc-card.in { opacity:1; transform:translateY(0); }
.svc-card::before {
  content:''; position:absolute; top:0; left:0;
  height:2px; width:0; background:var(--gold);
  transition:width .4s;
}
.svc-card:hover              { background:var(--ink-4); transform:translateY(-4px); }
.svc-card:hover::before      { width:100%; }

.svc-icon  { font-size:28px; margin-bottom:var(--s24); display:block; }
.svc-name  {
  font-family:'Cormorant Garamond',serif;
  font-size:21px; font-weight:400;
  margin-bottom:var(--s8); letter-spacing:.5px;
}
.svc-desc  { font-size:13px; color:var(--cream-dim); line-height:1.85; margin-bottom:var(--s24); }
.svc-price {
  font-family:'Cormorant Garamond',serif;
  font-size:19px; color:var(--gold);
}
.svc-price small { font-family:'Jost',sans-serif; font-size:11px; font-weight:300; color:var(--cream-dim); }

/* ═══════════════════════════════════════════════════
   GALERİ
   ═══════════════════════════════════════════════════ */
.gal-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:265px;
  gap:4px;
}
.gal-item { overflow:hidden; position:relative; }
.gal-item:nth-child(1) { grid-column:span 5; grid-row:span 2; }
.gal-item:nth-child(2) { grid-column:span 4; }
.gal-item:nth-child(3) { grid-column:span 3; }
.gal-item:nth-child(4) { grid-column:span 3; }
.gal-item:nth-child(5) { grid-column:span 4; }
.gal-item:nth-child(n+6){ grid-column:span 4; }

.gal-ph {
  width:100%; height:100%;
  background:var(--ink-3);
  border:1px solid var(--gold-faint);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--s12);
  transition:border-color .3s;
}
.gal-ph:hover { border-color:rgba(201,168,76,.22); }
.gal-ph span  { font-size:32px; }
.gal-ph p     { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--cream-dim); }

.gal-item img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.gal-item:hover img { transform:scale(1.04); }
.gal-lbl {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:20px var(--s16) var(--s12);
  font-size:9.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--cream-dim);
}
.gal-note {
  text-align:center; margin-top:var(--s32);
  font-size:12px; color:rgba(176,168,152,.45); letter-spacing:1px;
}

/* ═══════════════════════════════════════════════════
   HAKKIMIZDA
   ═══════════════════════════════════════════════════ */
.about-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s96); align-items:center;
}
.about-left  { position:relative; height:480px; }
.about-frame {
  position:absolute;
  inset:0 var(--s48) var(--s48) 0;
  background:var(--ink-3);
  border:1px solid rgba(201,168,76,.12);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--s16);
  overflow:hidden;
}
.about-frame span { font-size:52px; }
.about-frame p    { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--cream-dim); }
.about-frame img  { width:100%; height:100%; object-fit:cover; }
.about-accent {
  position:absolute; bottom:0; right:0;
  width:160px; height:160px;
  background:rgba(201,168,76,.05);
  border:1px solid rgba(201,168,76,.18);
}

.about-right { display:flex; flex-direction:column; gap:var(--s16); }
.about-p     { font-size:14px; color:var(--cream-dim); line-height:2; }

.stats-grid  { display:grid; grid-template-columns:1fr 1fr; gap:var(--s32); margin-top:var(--s16); }
.stat-item   { border-left:1px solid rgba(201,168,76,.28); padding-left:var(--s16); }
.stat-num    { font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:300; color:var(--gold); line-height:1; }
.stat-lbl    { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--cream-dim); margin-top:4px; }

/* ═══════════════════════════════════════════════════
   RANDEVU
   ═══════════════════════════════════════════════════ */
#randevu {
  position:relative; overflow:hidden;
}
#randevu::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:640px; height:640px;
  background:radial-gradient(circle,rgba(201,168,76,.05) 0%,transparent 65%);
  pointer-events:none;
}

.appt {
  max-width:660px; margin:0 auto;
  display:flex; flex-direction:column; gap:var(--s16);
}
.appt-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); }

.fld { display:flex; flex-direction:column; gap:var(--s8); }

.fld label {
  font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold);
}
.fld input,
.fld select,
.fld textarea {
  background:var(--ink-3);
  border:1px solid rgba(201,168,76,.2);
  color:var(--cream);
  padding:13px var(--s16);
  font-family:'Jost',sans-serif; font-size:14px; font-weight:300;
  border-radius:var(--r); outline:none;
  transition:border-color .25s;
  -webkit-appearance:none; appearance:none;
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus { border-color:var(--gold); }
.fld select option  { background:var(--ink-3); }
.fld textarea       { resize:vertical; min-height:88px; }

.appt-submit {
  display:flex; flex-direction:column;
  align-items:center; gap:var(--s12);
  margin-top:var(--s8);
}
.appt-hint {
  font-size:11px; color:var(--cream-dim); letter-spacing:1px;
}

/* ═══════════════════════════════════════════════════
   İLETİŞİM
   ═══════════════════════════════════════════════════ */
.contact-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s96); align-items:start;
}
.contact-left { display:flex; flex-direction:column; gap:var(--s24); }

.c-item   { display:flex; gap:var(--s16); align-items:flex-start; }
.c-icon   {
  width:42px; height:42px; flex-shrink:0;
  border:1px solid rgba(201,168,76,.22);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
}
.c-lbl  { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.c-val  { font-size:14px; color:var(--cream-dim); line-height:1.7; }

.social-row { display:flex; gap:var(--s8); margin-top:var(--s8); }
.soc-btn {
  width:42px; height:42px;
  border:1px solid rgba(201,168,76,.2);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; text-decoration:none;
  transition:border-color .25s, background .25s;
}
.soc-btn:hover { border-color:var(--gold); background:rgba(201,168,76,.07); }

.map-box {
  position:relative; height:400px;
  border:1px solid rgba(201,168,76,.15);
  border-radius:var(--r); overflow:hidden;
}
.map-box iframe {
  width:100%; height:100%; border:none;
  filter:grayscale(22%) brightness(.87);
  transition:filter .4s;
}
.map-box:hover iframe { filter:none; }
.map-badge {
  position:absolute; bottom:var(--s12); left:var(--s12);
  background:rgba(9,9,9,.9);
  border:1px solid rgba(201,168,76,.28);
  border-radius:var(--r);
  padding:9px var(--s16);
  font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold);
  z-index:2;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
#siteFooter {
  background:var(--ink);
  border-top:1px solid rgba(201,168,76,.1);
  padding:var(--s48) 0;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  padding:0 var(--s32);
  display:flex; align-items:center;
  justify-content:space-between;
  gap:var(--s32); flex-wrap:wrap;
}
.footer-brand { display:flex; flex-direction:column; gap:3px; }
.footer-copy  { font-size:11px; color:var(--cream-dim); letter-spacing:1px; }
.footer-nav   { display:flex; gap:var(--s32); flex-wrap:wrap; }
.footer-nav a {
  font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--cream-dim);
  transition:color .25s;
}
.footer-nav a:hover { color:var(--gold); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE  ≤ 1024px
   ═══════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .svc-grid    { grid-template-columns:repeat(2,1fr); }
  .about-wrap  { grid-template-columns:1fr; gap:var(--s64); }
  .about-left  { height:300px; }
  .contact-wrap{ grid-template-columns:1fr; gap:var(--s48); }
  .map-box     { height:320px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE  ≤ 768px
   ═══════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root {
    --s128: 80px;
    --s96:  56px;
    --s64:  40px;
    --s48:  32px;
  }
  .container { padding:0 var(--s16); }

  /* Header */
  .hdr-nav  { display:none; }
  .hdr-cta  { display:none; }
  .hdr-burger { display:flex; }
  .hdr-inner { gap:var(--s12); }

  /* Hero */
  #hero          { padding:130px var(--s16) 100px; }
  .hero-actions  { flex-direction:column; align-items:center; width:100%; }
  .btn-gold,
  .btn-outline   { width:100%; max-width:300px; text-align:center; }

  /* Services */
  .svc-grid  { grid-template-columns:1fr; gap:2px; }

  /* Gallery */
  .gal-grid       { grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
  .gal-item       { grid-column:span 1 !important; grid-row:span 1 !important; }

  /* Form */
  .appt-row { grid-template-columns:1fr; }

  /* Footer */
  .footer-inner { flex-direction:column; align-items:flex-start; gap:var(--s24); }
  .footer-nav   { gap:var(--s16); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE  ≤ 480px
   ═══════════════════════════════════════════════════ */
@media (max-width:480px) {
  .svc-card { padding:var(--s32) var(--s24); }
  .hdr-mobile { padding:0 var(--s16) var(--s24); }
}