@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap");
/* Seda Tan Beauty
   Yerleşim: koyu duvar bandında serif başlık + altın çerçeveli logo videosu, altında kapı tabelaları;
   odalar büyük fotoğraf + servis menüsü; hakkımızda koyu bant; salon mozaik. */
:root {
  --gece:#22242e; --duvar:#3d4153; --fildisi:#f4f2ec; --gri-acik:#c9ccd8;
  --altin:#d9b56a; --altin-koyu:#7d611e; --tabela:#111114;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --tabela-font:"Barlow Condensed","Arial Narrow",sans-serif;
  --bosluk-bolum:clamp(72px,9vw,128px);
  color-scheme:light;
}

/* ---------- tipografi ---------- */
h1, h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.012em; }
h2 { font-size:clamp(38px,4.8vw,62px); line-height:1.04; text-wrap:balance; }
h3 { font:500 25px/1.2 var(--serif); letter-spacing:0; }
.bolum-bas { max-width:620px; margin-bottom:clamp(40px,5vw,64px); }
.bolum-bas h2::after, .hk-metin h2::after { content:""; display:block; width:64px; height:1px; background:var(--altin-koyu); margin-top:22px; }
.bolum-bas p { margin-top:20px; line-height:1.7; }

/* ---------- üst ---------- */
.ust { max-width:1288px; padding-block:14px; }
.ust .logo img { height:54px; }
.ust nav { gap:34px; letter-spacing:.02em; }
.ust nav a { position:relative; padding-block:6px; }
.ust nav a::after { content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--altin-koyu); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.ust nav a:hover { color:var(--murekkep); }
.ust nav a:hover::after { transform:scaleX(1); }
.dugme { border-radius:2px; letter-spacing:.01em; }
.dugme-ikincil { background:transparent; color:var(--murekkep); border-color:var(--murekkep); }

/* ---------- giriş: koyu duvar bandı ---------- */
main > section.giris-duvar { max-width:none; padding:0 !important; }
.duvar-bant {
  background:var(--gece); color:var(--fildisi);
  padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,72px);
  padding-inline:max(24px, env(safe-area-inset-left,0px)) max(24px, env(safe-area-inset-right,0px));
}
.duvar-ic { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(48px,6vw,88px) clamp(40px,6vw,96px); align-items:center; }
.duvar-metin { min-width:0; }
.duvar-bant .konum { color:var(--altin); font-size:15px; letter-spacing:.08em; margin-bottom:22px; }
.duvar-bant h1 { font-size:clamp(50px,6.2vw,92px); line-height:.98; max-width:12ch; text-wrap:balance; color:var(--fildisi); }
.duvar-bant .giris { color:var(--gri-acik); font-size:18px; line-height:1.65; margin:26px 0 32px; max-width:44ch; }
.duvar-bant .dugme:not(.dugme-ikincil) { background:var(--altin); border-color:var(--altin); color:var(--tabela); }
.duvar-bant .dugme-ikincil { color:var(--fildisi); border-color:rgba(244,242,236,.45); }
.duvar-bant .dugme-ikincil:hover { background:var(--fildisi); color:var(--gece); border-color:var(--fildisi); }
.duvar-bant .durum { color:#a9adbd; margin-top:26px; }
.duvar-bant .durum strong { color:var(--fildisi); }
.duvar-foto {
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:var(--duvar);
  outline:1px solid rgba(217,181,106,.6); outline-offset:12px;
}

/* İmza öğesi: kapı tabelası */
.tabela {
  display:inline-grid; justify-items:center; background:var(--tabela); color:var(--altin);
  padding:14px 26px 13px; text-decoration:none; border-radius:1px;
  font:600 22px/1.1 var(--tabela-font); letter-spacing:.05em; text-align:center;
  box-shadow:inset 0 0 0 1px rgba(217,181,106,.28);
}
.tabela::after { content:""; width:100%; min-width:64px; height:1px; background:var(--altin); margin-top:9px; }
a.tabela { transition:transform .2s ease, box-shadow .2s ease; }
a.tabela:hover { color:var(--altin); transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--altin); }
.tabelalar { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.tabelalar .tabela { width:100%; min-height:76px; font-size:19px; align-content:center; }
@keyframes cizgi { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.tabelalar .tabela::after { transform-origin:left; animation:cizgi .9s cubic-bezier(.2,.7,.2,1) both; }
.tabelalar .tabela:nth-child(2)::after { animation-delay:.12s; }
.tabelalar .tabela:nth-child(3)::after { animation-delay:.24s; }
.tabelalar .tabela:nth-child(4)::after { animation-delay:.36s; }

/* ---------- odalar: fotoğraf + servis menüsü ---------- */
.hizmetler { border-top:0; padding-block:var(--bosluk-bolum); }
.secici { display:grid; grid-template-columns:1fr; gap:clamp(64px,8vw,120px); }
.oda { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px clamp(40px,7vw,104px); align-items:center; scroll-margin-top:24px; }
.oda:nth-child(even) .oda-foto { order:2; }
.oda-foto { margin:0; aspect-ratio:5/6; overflow:hidden; background:var(--ikincil); }
.oda-foto img { width:100%; height:100%; object-fit:cover; }
.kategori legend { display:block; float:left; width:100%; padding:0; margin-bottom:28px; font:inherit; }
.kategori ul { clear:both; border-top:1px solid var(--cizgi); }
.kategori label { grid-template-columns:24px 1fr; gap:18px; padding:17px 12px; margin:0 -12px; border-radius:0; }
.kategori label:hover, .kategori label:has(input:checked) { background:transparent; }
.kategori input {
  appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; cursor:pointer;
  border:1px solid #9c9a92; border-radius:50%; background:transparent; transition:border-color .15s ease;
}
.kategori input:checked { border-color:var(--altin-koyu); background:radial-gradient(circle, var(--altin-koyu) 0 5px, transparent 5.6px); }
.h-ad { font:500 clamp(22px,2.2vw,27px)/1.2 var(--serif); transition:color .15s ease; }
.kategori label:hover .h-ad, .kategori label:has(input:checked) .h-ad { color:var(--altin-koyu); }
.sepet { border-radius:2px; background:var(--gece); color:var(--fildisi); }
.sepet .dugme { background:var(--altin); color:var(--tabela); border-color:var(--altin); }
.sepet .dugme:hover { color:var(--tabela); }

/* ---------- hakkımızda: koyu bant ---------- */
main > section.hakkimizda { max-width:none; padding:0; background:var(--gece); color:var(--fildisi); }
.hakkimizda { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
.hk-foto { margin:0; min-height:520px; }
.hk-foto img { width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
.hk-metin { padding-block:var(--bosluk-bolum); padding-inline:clamp(32px,6vw,96px) max(24px, env(safe-area-inset-right,0px)); max-width:740px; align-self:center; }
.hk-metin h2 { color:var(--fildisi); margin-bottom:30px; }
.hk-metin h2::after { background:var(--altin); }
.hk-metin p { color:var(--gri-acik); margin:0 0 16px; max-width:58ch; line-height:1.75; }
.hk-metin h2 + p { font:500 clamp(22px,2.1vw,27px)/1.4 var(--serif); color:var(--fildisi); margin-bottom:24px; }
.hk-metin .hk-imza { color:var(--altin); font:500 30px/1.2 var(--serif); margin-top:30px; }

/* ---------- salon: mozaik ---------- */
.galeri { padding-block:var(--bosluk-bolum); }
.izgara { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.izgara figure { border-radius:0; position:relative; }
.izgara figure:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.izgara figure:first-child img { position:absolute; inset:0; }

/* ---------- ziyaret ve alt ---------- */
.ziyaret { padding-block:var(--bosluk-bolum); }
.ziyaret-izgara { gap:clamp(32px,5vw,72px); }
.ziyaret h3 { margin-bottom:12px; }
.ziyaret a { text-decoration-color:var(--altin-koyu); }
.saatler th, .saatler td { padding:10px 0; }
.saatler tr.bugun th, .saatler tr.bugun td { color:var(--altin-koyu); font-weight:600; }
.harita { border-radius:0; background:var(--gece); }
.harita p { color:var(--gri-acik); }
.harita .dugme-ikincil { color:var(--fildisi); border-color:rgba(244,242,236,.45); }
.harita .dugme-ikincil:hover { background:var(--fildisi); color:var(--gece); }
.alt { max-width:none; border-top:0; background:var(--tabela); color:#a9adbd; padding:36px max(24px, calc((100vw - 1200px) / 2 + 24px)) 44px; }
.alt a:hover { color:var(--altin); }
.wa-sabit { display:none; }

@media (max-width:860px) {
  .duvar-ic { grid-template-columns:1fr; }
  .duvar-foto { order:-1; }
  .tabelalar { grid-template-columns:1fr 1fr; }
  .oda { grid-template-columns:1fr; gap:24px; }
  .oda:nth-child(even) .oda-foto { order:0; }
  .oda-foto { aspect-ratio:4/3; }
  .hakkimizda { grid-template-columns:1fr; }
  .hk-foto { min-height:0; aspect-ratio:4/3; }
  .hk-metin { padding:48px max(24px, env(safe-area-inset-right,0px)) 56px max(24px, env(safe-area-inset-left,0px)); }
  .izgara { grid-template-columns:1fr 1fr; }
  .izgara figure:first-child { grid-row:auto; aspect-ratio:4/3; }
}
@media (max-width:720px) {
  .wa-sabit {
    display:flex; position:fixed; z-index:6; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px));
    justify-content:center; align-items:center; min-height:52px; background:var(--altin); color:var(--tabela);
    font:600 16px/1 var(--metin-font); text-decoration:none; border-radius:2px; box-shadow:0 10px 28px -10px rgba(0,0,0,.55);
  }
  body:has(.sepet:not([hidden])) .wa-sabit { display:none; }
  /* sabit WhatsApp butonu footer yazisini kapatmasin (centikli telefonlarda buton yukari kayar) */
  .alt { padding-bottom:calc(104px + env(safe-area-inset-bottom,0px)); }
  .ust .logo img { height:44px; }
  .duvar-foto { outline-offset:8px; }
}