/* ==========================================================================
   KUMBAHÇE 48 · Bodrum
   "Liquid glass" — saydam cam katmanlar, yumuşak ışık, ferah beyaz alan.
   Renk kuralı: dolgulu düğmede DURUŞ koyu, HOVER bir ton DAHA koyu
   (beyaz yazı hover'da kontrast kaybetmesin diye).
   ========================================================================== */

:root{
  /* zeminler */
  --kum:        #F8F5F0;
  --kum-2:      #F1EAE0;
  --beyaz:      #FFFFFF;

  /* yazı */
  --murekkep:   #0F3540;
  --murekkep-2: #46656F;
  --murekkep-3: #758E97;

  /* vurgular */
  --deniz:      #0E6C7A;   /* duruş  — beyaz yazıyla 5.2:1 */
  --deniz-koyu: #0A525D;   /* hover  — daha koyu */
  --deniz-acik: #7FD1D8;
  --altin:      #C08A3E;
  --altin-yazi: #8A5F1E;   /* açık zeminde okunabilir altın */

  --wa:         #0F7A46;   /* duruş  — beyaz yazıyla 5.5:1 */
  --wa-koyu:    #0B5F36;   /* hover  */

  --cizgi:      rgba(15, 53, 64, .10);
  --cizgi-2:    rgba(15, 53, 64, .16);

  --yuvarlak:   26px;
  --yuvarlak-s: 16px;
  --kap:        1180px;

  --gecis: 260ms cubic-bezier(.22, .61, .36, 1);
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  color-scheme: light;
}

body{
  margin: 0;
  background: var(--kum);
  color: var(--murekkep);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3{
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--murekkep);
  margin: 0;
  letter-spacing: -.005em;
}
h1{ font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.04; font-weight: 300; }
h2{ font-size: clamp(1.95rem, 4.2vw, 3.1rem); line-height: 1.12; margin-bottom: .7em; }
h3{ font-size: 1.22rem; line-height: 1.35; }
h1 em, h2 em, h3 em{ font-style: italic; color: var(--deniz); }

p{ margin: 0 0 1.1em; }
a{ color: inherit; }

::selection{ background: var(--deniz-acik); color: var(--murekkep); }

:focus-visible{
  outline: 3px solid var(--deniz);
  outline-offset: 3px;
  border-radius: 8px;
}

.atlama{
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: var(--murekkep); color: #fff;
  padding: 12px 18px; border-radius: 12px; text-decoration: none;
}
.atlama:focus{ transform: translateY(0); }

/* ── kap ────────────────────────────────────────────────────────────────── */
.kap{
  width: 100%;
  max-width: var(--kap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
}
.kap.dar{ max-width: 840px; }

/* ══════════════════════════════════════════════════════════════════════════
   SIVI ARKA PLAN — yavaşça süzülen renk damlaları
   ═════════════════════════════════════════════════════════════════════════ */
.sivi{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.damla{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
}
.d1{ width: 46vw; height: 46vw; left: -12vw; top: -8vw;  background: #9FE3E6; animation: suz1 26s ease-in-out infinite; }
.d2{ width: 38vw; height: 38vw; right: -10vw; top: 22vh; background: #FBDCC0; animation: suz2 32s ease-in-out infinite; }
.d3{ width: 42vw; height: 42vw; left: 8vw; bottom: -14vw; background: #CFE6F5; animation: suz3 29s ease-in-out infinite; }
.d4{ width: 26vw; height: 26vw; right: 14vw; bottom: 6vh; background: #F6D2DC; opacity: .4; animation: suz1 35s ease-in-out infinite reverse; }

@keyframes suz1{ 0%,100%{ transform: translate3d(0,0,0) scale(1) }   50%{ transform: translate3d(6vw,5vh,0) scale(1.12) } }
@keyframes suz2{ 0%,100%{ transform: translate3d(0,0,0) scale(1.05) } 50%{ transform: translate3d(-7vw,7vh,0) scale(.92) } }
@keyframes suz3{ 0%,100%{ transform: translate3d(0,0,0) scale(.95) }  50%{ transform: translate3d(5vw,-6vh,0) scale(1.1) } }

/* ince film grenli doku — camın "gerçek" hissi buradan gelir */
body::after{
  content: "";
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

header, main, footer, .dip-cubuk{ position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   CAM YÜZEY
   ═════════════════════════════════════════════════════════════════════════ */
.cam{
  background: linear-gradient(148deg, rgba(255,255,255,.82), rgba(255,255,255,.56));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--yuvarlak);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 22px 46px -22px rgba(11,49,60,.30),
    0 3px 12px -6px rgba(11,49,60,.14);
}
.koyu-cam{
  background: linear-gradient(148deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.30);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 24px 54px -26px rgba(0,0,0,.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   DÜĞMELER
   ═════════════════════════════════════════════════════════════════════════ */
.dugme{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 .98rem/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
  white-space: nowrap;
}
.dugme:hover{ transform: translateY(-2px); }
.dugme:active{ transform: translateY(0); }
.dugme .ikon{ width: 20px; height: 20px; flex: none; }

.dugme-kucuk{ min-height: 44px; padding: 10px 18px; font-size: .9rem; }
.dugme.buyuk{ min-height: 60px; padding: 18px 34px; font-size: 1.05rem; }
.dugme.tam{ width: 100%; }

.dugme-wa{ background: var(--wa); color: #fff; box-shadow: 0 12px 26px -14px rgba(15,122,70,.85); }
.dugme-wa:hover{ background: var(--wa-koyu); }

.dugme-birincil{ background: var(--deniz); color: #fff; box-shadow: 0 12px 26px -14px rgba(14,108,122,.85); }
.dugme-birincil:hover{ background: var(--deniz-koyu); }

.dugme-ig{
  background: linear-gradient(135deg, #B02A7A 0%, #7A2E9E 55%, #3F4BC4 100%);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(122,46,158,.85);
}
.dugme-ig:hover{ background: linear-gradient(135deg, #8C1F61 0%, #5E2480 55%, #2F3A9E 100%); }

.dugme-cam{
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-color: rgba(255,255,255,.55);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.dugme-cam:hover{ background: rgba(255,255,255,.28); }

/* ══════════════════════════════════════════════════════════════════════════
   ÜST ÇUBUK
   ═════════════════════════════════════════════════════════════════════════ */
.ustcubuk{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 14px 0;
  padding-top: max(14px, env(safe-area-inset-top));
  transition: background var(--gecis), box-shadow var(--gecis), backdrop-filter var(--gecis);
}
.ustcubuk-ic{ display: flex; align-items: center; gap: 20px; position: relative; }

/* hero'nun parlak köşesinde menü okunabilsin diye ince perde
   (ölçüm: perdesiz 3,11 — AA altı · perdeyle 8,96) */
.ustcubuk::before{
  content: "";
  position: absolute; inset: -40px 0 auto 0; height: 190px;
  background: linear-gradient(to bottom, rgba(5,32,40,.52) 0%, rgba(5,32,40,.26) 52%, transparent 100%);
  pointer-events: none;
  transition: opacity var(--gecis);
}
.ustcubuk.kaydi::before{ opacity: 0; }

.ustcubuk.kaydi{
  background: rgba(248,245,240,.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 var(--cizgi), 0 14px 34px -26px rgba(11,49,60,.5);
}

.marka{ display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marka-mim{
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--deniz) 0%, #0A4E5A 100%);
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -10px rgba(10,78,90,.9);
}
.marka-yazi{ display: flex; flex-direction: column; line-height: 1.15; }
.marka-yazi strong{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: 1.3rem; letter-spacing: .015em;
  color: #fff; transition: color var(--gecis);
}
.marka-yazi small{
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.78); transition: color var(--gecis);
}
.ustcubuk.kaydi .marka-yazi strong{ color: var(--murekkep); }
.ustcubuk.kaydi .marka-yazi small{ color: var(--murekkep-3); }

.menu{ display: flex; align-items: center; gap: 4px; }
.menu a{
  padding: 10px 14px; border-radius: 999px;
  font-size: .93rem; font-weight: 500; text-decoration: none;
  color: rgba(255,255,255,.92);
  transition: background var(--gecis), color var(--gecis);
}
.menu a:hover{ background: rgba(255,255,255,.18); }
.ustcubuk.kaydi .menu a{ color: var(--murekkep-2); }
.ustcubuk.kaydi .menu a:hover{ background: rgba(15,53,64,.07); color: var(--murekkep); }

/* dil seçici — menünün son öğesi, ayrılsın diye ince çizgi */
.dil-baglanti{
  position: relative;
  margin-left: 6px;
  font-variant: small-caps;
  letter-spacing: .06em;
}
.dil-baglanti::before{
  content: "";
  position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px;
  background: rgba(255,255,255,.32);
}
.ustcubuk.kaydi .dil-baglanti::before{ background: var(--cizgi-2); }
@media (max-width: 900px){
  .dil-baglanti{ margin-left: 0; margin-top: 4px; border-top: 1px solid var(--cizgi); padding-top: 16px; }
  .dil-baglanti::before{ display: none; }
}

.ustcubuk-sag{ display: flex; align-items: center; gap: 10px; }

/* Telefonda başlıkta boş yer var; hamburgerin solunda kısa dil düğmesi.
   Masaüstünde gizli — orada menüde zaten "English" bağlantısı duruyor. */
.dil-kisa{
  display: none;
  min-width: 46px; min-height: 46px;
  align-items: center; justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #fff;
  font: 600 .82rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dil-kisa:hover{ background: rgba(255,255,255,.30); }
.ustcubuk.kaydi .dil-kisa{
  border-color: var(--cizgi-2);
  background: rgba(255,255,255,.6);
  color: var(--murekkep);
}
.ustcubuk.kaydi .dil-kisa:hover{ background: rgba(255,255,255,.9); }
@media (max-width: 900px){
  .dil-kisa{ display: inline-flex; }
}

.menu-dugme{
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-dugme span{ display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff; transition: transform var(--gecis), opacity var(--gecis); }
.ustcubuk.kaydi .menu-dugme{ border-color: var(--cizgi-2); background: rgba(255,255,255,.6); }
.ustcubuk.kaydi .menu-dugme span{ background: var(--murekkep); }
.menu-dugme[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ═════════════════════════════════════════════════════════════════════════ */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  gap: clamp(34px, 6vh, 62px);
  padding: 140px 0 clamp(34px, 6vh, 60px);
  overflow: hidden;
  background:
    radial-gradient(115% 95% at 18% 4%,  #2C9DB5 0%, transparent 56%),
    radial-gradient(95% 80% at 92% 16%,  #5FC6D9 0%, transparent 52%),
    linear-gradient(158deg, #0C4A62 0%, #106C86 44%, #08303F 100%);
}
.hero-foto{
  position: absolute; inset: 0;
  background: url("gorseller/hero.jpg") center / cover no-repeat;
}
/* Perde artık HAFİF — fotoğraf parlak kalsın, sokağın sonundaki deniz görünsün.
   Okunurluğu perde değil, metnin oturduğu cam panel sağlıyor (aşağıda .hero-ic). */
.hero-perde{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(4,26,32,.44) 0%, rgba(4,26,32,.20) 45%, rgba(4,26,32,.30) 100%);
}
/* Metin cam panelde. Ölçüm: fotoğrafın metin bandındaki en parlak noktası
   L=0.66; panel degradesi (.78→.68) + hafif perde (.20) bileşik 0.85-0.79
   veriyor → beyaz yazı 5.0-6.5:1. Fotoğraf panelin dışında parlak kalıyor. */
.hero-ic{
  position: relative;
  color: #fff;
  max-width: 700px;
  padding: clamp(28px, 3.6vw, 46px) clamp(24px, 3.2vw, 44px) clamp(30px, 3.8vw, 46px);
  border-radius: var(--yuvarlak);
  background: linear-gradient(150deg, rgba(5,28,36,.78), rgba(5,28,36,.68));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 32px 72px -36px rgba(0,0,0,.68);
}
@media (max-width: 680px){
  /* Telefonda panel ekranın %74'ünü kaplıyordu, fotoğrafa 46px kalıyordu.
     İçerik sıkılaştırıldı ve panel aşağı itildi ki üstte gerçek bir
     fotoğraf şeridi kalsın. */
  /* align-content:start olmadan padding-top işlemiyor —
     ızgara içeriği ortalayıp boşluğu yeniden dağıtıyor */
  .hero{ align-content: start; padding-top: 30svh; padding-bottom: 26px; gap: 20px; }
  .hero-ic{ padding: 20px 18px 22px; }
  .hero h1{ font-size: clamp(1.85rem, 7.6vw, 2.25rem); line-height: 1.08; margin-bottom: .34em; }
  .hero-alt{ font-size: .94rem; line-height: 1.58; margin-bottom: 18px; }
  .tepe-etiket{ font-size: .68rem; letter-spacing: .18em; margin-bottom: 14px; }
  .rozetler{ gap: 7px; margin-bottom: 20px; }
  .rozet{ padding: 6px 12px; font-size: .73rem; }
  .hero-dugmeler{ gap: 10px; }
  /* dikey fotoğrafta yatayda ortalanınca sokağın sonundaki deniz kadraj
     dışında kalıyordu — sağa kaydırıldı */
  .hero-foto{ background-position: 64% center; }
}
.hero h1{ color: #fff; margin-bottom: .42em; }
.hero h1 em{ color: var(--deniz-acik); font-style: italic; }

.tepe-etiket{
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  font-size: .76rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.nokta{
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--altin);
  box-shadow: 0 0 0 4px rgba(192,138,62,.28);
}

.hero-alt{
  max-width: 620px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.72;
  color: rgba(255,255,255,.93);
  margin-bottom: 26px;
}

.rozetler{ display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.rozet{
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  font-size: .8rem; font-weight: 500; letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff;
}
.rozet-satilik{ background: rgba(192,138,62,.34); border-color: rgba(240,205,150,.6); }
.rozet-kiralik{ background: rgba(127,209,216,.24); border-color: rgba(180,235,240,.55); }
.rozet-tarih{ background: rgba(255,255,255,.10); color: rgba(255,255,255,.95); }

.hero-dugmeler{ display: flex; flex-wrap: wrap; gap: 12px; }

/* hero'nun üzerinde yüzen cam künye */
.kunye{
  position: relative;
  list-style: none; margin: 0; padding: 20px clamp(18px, 3vw, 30px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: linear-gradient(148deg, rgba(255,255,255,.19), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--yuvarlak);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 26px 60px -30px rgba(0,0,0,.6);
}
.kunye li{ text-align: center; color: #fff; padding: 4px 6px; }
.kunye li + li{ border-left: 1px solid rgba(255,255,255,.20); }
.kunye b{
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1;
}
.kunye span{
  display: block; margin-top: 3px;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

/* ══════════════════════════════════════════════════════════════════════════
   BÖLÜMLER
   ═════════════════════════════════════════════════════════════════════════ */
.bolum{ padding: clamp(72px, 11vh, 130px) 0; }
.bolum-kum{ background: rgba(241,234,224,.66); }
.bolum-deniz{
  /* ölçüm: eski zeminde küçük yazılar 3,0-4,1 (AA altı) — koyulaştırıldı,
     parlak halka da kartların üstünden yukarı taşındı */
  background:
    radial-gradient(70% 62% at 86% -8%, rgba(95,198,217,.24) 0%, transparent 62%),
    linear-gradient(158deg, #0A3E52 0%, #0C4A5F 46%, #06242F 100%);
  color: #fff;
}

.ustbaslik{
  margin: 0 0 14px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--altin-yazi);
}
.ustbaslik.acik{ color: #FBE7BE; }   /* koyu zeminde 4,8:1 */
.ustbaslik.orta, .orta{ text-align: center; }
.orta.ustbaslik + h2{ margin-inline: auto; }
h2.orta{ text-align: center; max-width: 18ch; margin-inline: auto; }
h2.acik, .bolum-deniz h2{ color: #fff; }
.bolum-deniz h2 em{ color: var(--deniz-acik); }

.alt-aciklama{
  max-width: 62ch; margin-inline: auto; margin-bottom: 46px;
  color: var(--murekkep-2);
}

.metin{ font-size: 1.06rem; color: var(--murekkep-2); }
.metin strong{ color: var(--murekkep); font-weight: 600; }
.metin-vurgu{
  margin-top: 30px; padding: 22px 26px;
  border-left: 3px solid var(--altin);
  border-radius: 0 var(--yuvarlak-s) var(--yuvarlak-s) 0;
  background: linear-gradient(100deg, rgba(192,138,62,.11), rgba(192,138,62,.02));
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.42rem; font-style: italic; line-height: 1.5;
  color: var(--murekkep);
}

/* ── özellikler ─────────────────────────────────────────────────────────── */
.ozellik-izgara{
  list-style: none; margin: 46px 0 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}
.ozellik{ padding: 26px 24px 24px; transition: transform var(--gecis), box-shadow var(--gecis); }
.ozellik:hover{
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 30px 56px -26px rgba(11,49,60,.36);
}
.ozellik-ikon{
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: 15px;
  background: linear-gradient(148deg, rgba(14,108,122,.16), rgba(14,108,122,.06));
  border: 1px solid rgba(14,108,122,.16);
  color: var(--deniz);
}
.ozellik-ikon svg{ width: 24px; height: 24px; }
.ozellik h3{ margin-bottom: 6px; }
.ozellik p{ margin: 0; font-size: .93rem; line-height: 1.62; color: var(--murekkep-2); }

/* ── galeri ─────────────────────────────────────────────────────────────── */
.galeri{
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  /* dense: iki sütun kaplayan kareler ızgarada boşluk bırakmasın */
  grid-auto-flow: dense;
}
.galeri-kutu{
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  background:
    radial-gradient(80% 70% at 25% 20%, rgba(159,227,230,.55) 0%, transparent 60%),
    linear-gradient(150deg, rgba(255,255,255,.86), rgba(233,240,241,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px -24px rgba(11,49,60,.32);
}
.galeri-kutu.genis{ grid-column: span 2; }
.galeri-kutu img{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.galeri-kutu:hover img{ transform: scale(1.045); }

/* fotoğraf henüz yoksa: tasarlanmış boşluk */
/* Yer tutucu iki durumda çıkar:
   1) hiç <img> yok (fotoğraf henüz eklenmemiş)
   2) .bos — görsel 2 denemede yüklenemedi. img SİLİNMİYOR, sadece
      gizleniyor; bağlantı düzelince yeniden denenebilsin diye. */
.galeri-kutu.bos img{ display: none; }
.galeri-kutu:not(:has(img))::before,
.galeri-kutu.bos::before{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -40px 0 0 -23px;
  border-radius: 14px;
  border: 1.5px dashed rgba(15,53,64,.28);
  background: rgba(255,255,255,.5);
}
.galeri-kutu:not(:has(img))::after,
.galeri-kutu.bos::after{
  content: attr(data-etiket);
  position: absolute; inset: auto 0 0 0;
  padding: 0 16px 30%;
  text-align: center;
  font-size: .86rem; font-weight: 500; letter-spacing: .06em;
  color: var(--murekkep-2);
}
/* fotoğraf varsa: üzerine yumuşak başlık */
.galeri-kutu:has(img)::after{
  content: attr(data-etiket);
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 34px 18px 15px;
  font-size: .84rem; font-weight: 500; letter-spacing: .05em;
  color: #fff;
  background: linear-gradient(to top, rgba(5,32,40,.72), transparent);
  opacity: 0; transition: opacity var(--gecis);
  pointer-events: none;
}
.galeri-kutu:has(img):hover::after{ opacity: 1; }
.galeri-kutu.bos:has(img)::after{ opacity: 1; background: none; color: var(--murekkep-2); }

/* ── video ──────────────────────────────────────────────────────────────── */
/* Kapak kendi sunucumuzda; sayfa açılışında YouTube'a HİÇ istek gitmiyor.
   iframe yalnızca tıklanınca yükleniyor (yaklaşık 500 KB betikten kaçınmak
   için) ve youtube-nocookie üzerinden geliyor. */
.video-cerceve{
  max-width: 960px;
  margin: 46px auto 0;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 64px -28px rgba(11,49,60,.42);
}
.video-ac{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(233,240,241,.7));
  cursor: pointer;
  overflow: hidden;
}
.video-ac img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.video-ac::after{           /* oynatma düğmesi okunsun diye hafif karartma */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(45% 45% at 50% 50%, rgba(4,26,32,.42) 0%, rgba(4,26,32,.12) 70%, transparent 100%);
}
.video-ac:hover img{ transform: scale(1.03); }
.video-oynat{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 9vw, 86px);
  z-index: 1;
  transition: transform var(--gecis);
}
.video-oynat svg{ width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 22px rgba(0,0,0,.45)); }
.video-oynat-zemin{ fill: #CC0000; }
.video-ac:hover .video-oynat{ transform: translate(-50%, -50%) scale(1.07); }
.video-ac:focus-visible{ outline: 3px solid var(--deniz); outline-offset: 3px; }
.video-cerceve iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
@media (hover: none){
  .video-ac:hover img{ transform: none; }
  .video-ac:hover .video-oynat{ transform: translate(-50%, -50%); }
}

/* ── konum ──────────────────────────────────────────────────────────────── */
.mesafe-izgara{
  display: grid; gap: 16px; margin-top: 46px;
  grid-template-columns: repeat(4, 1fr);
}
.mesafe{ padding: 28px 24px; text-align: center; }
.mesafe b{
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.05;
  color: #fff;
}
.mesafe span{
  display: block; margin: 8px 0 10px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: #DFF4F6;                      /* koyu camda 6,2:1 */
}
.mesafe p{ margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.90); }

/* ── adres + harita ─────────────────────────────────────────────────────── */
.harita-alan{
  display: grid; gap: 18px; margin-top: 18px;
  grid-template-columns: minmax(270px, .82fr) 1.18fr;
  align-items: stretch;
}
.adres-kart{ padding: 32px clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.adres-etiket{
  margin: 0 0 14px;
  font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #DFF4F6;                      /* koyu camda 6,2:1 */
}
.adres{
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.38rem, 2.4vw, 1.8rem); line-height: 1.4;
  color: #fff;
}
.adres-alt{ color: rgba(255,255,255,.82); font-size: .82em; }
.adres-not{
  margin: 0 0 24px;
  font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.90);
}
.adres-dugmeler{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.harita-kutu{
  position: relative;
  min-height: 400px;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.30);
  background: linear-gradient(148deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 24px 54px -26px rgba(0,0,0,.55);
}
.harita-kutu iframe{
  position: absolute; inset: 0; z-index: 1;   /* yedeğin üstüne biner */
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
/* harita yüklenemezse (çevrimdışı / engellenmişse) arkada bu kalır */
.harita-yedek{
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; gap: 10px;
  padding: 30px; text-align: center;
  color: rgba(255,255,255,.86);
}
.harita-yedek b{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: 1.5rem; color: #fff;
}
.harita-yedek span{ font-size: .9rem; }

/* ── satılık / kiralık ──────────────────────────────────────────────────── */
.teklif-izgara{
  display: grid; gap: 20px; margin-top: 46px;
  grid-template-columns: repeat(2, 1fr);
}
.teklif{ padding: 34px clamp(24px, 3vw, 38px) 32px; display: flex; flex-direction: column; }
.teklif-etiket{
  align-self: flex-start;
  padding: 7px 15px; margin-bottom: 18px;
  border-radius: 999px;
  font-size: .73rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(192,138,62,.16); color: var(--altin-yazi);
  border: 1px solid rgba(192,138,62,.3);
}
.teklif-etiket-alt{
  background: rgba(14,108,122,.13); color: var(--deniz-koyu);
  border-color: rgba(14,108,122,.26);
}
.teklif h3{ font-size: 1.7rem; margin-bottom: 12px; }
.teklif p{ color: var(--murekkep-2); font-size: .98rem; }
.fiyat{
  margin: 6px 0 24px; padding-top: 18px;
  border-top: 1px solid var(--cizgi);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem; color: var(--murekkep);
}
.fiyat em{ font-style: italic; color: var(--deniz); }
.teklif .dugme{ margin-top: auto; }

/* ── iletişim ───────────────────────────────────────────────────────────── */
.iletisim-dugmeler{
  display: grid; gap: 14px; margin: 40px auto 34px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 660px;
}
.telefon-satir{ margin: 0 0 26px; }
.telefon{
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--cizgi-2);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem; letter-spacing: .02em;
  color: var(--murekkep);
  text-decoration: none;
  transition: background var(--gecis), border-color var(--gecis);
}
.telefon:hover{ background: rgba(255,255,255,.85); border-color: var(--deniz); }
.telefon .ikon{ width: 19px; height: 19px; color: var(--deniz); }

/* flex DEĞİL: flex olduğunda "Bu sayfadaki bilgiler" / "<ay> <yıl>" /
   "tarihinde güncellenmiştir." ayrı birer flex öğesi olup aralarına boşluk
   giriyor ve dar ekranda cümle üç parçaya bölünüyordu. */
.damga{
  margin: 0;
  text-align: center;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--murekkep-2);
  /* tek cümle olarak aksın: kelimeler art arda, satır sonları dengeli */
  /* cümle 60 karakter — geniş ekranda TEK satıra sığsın,
     dar ekranda kap genişliği doğal olarak sarsın */
  max-width: 64ch;
  margin-inline: auto;
  text-wrap: balance;
}
.damga .nokta{
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.damga strong{ color: var(--murekkep); }

/* ══════════════════════════════════════════════════════════════════════════
   ALT BİLGİ
   ═════════════════════════════════════════════════════════════════════════ */
.dip{
  padding: 54px 0 calc(38px + env(safe-area-inset-bottom));
  background: linear-gradient(158deg, #0B3B48 0%, #072A33 100%);
  color: rgba(255,255,255,.82);
}
/* Üç sütun: marka | bağlantılar | iletişim.
   Önceden yalnız marka + bağlantılar vardı, aralarında 185px boşluk
   kalıyor ve alt bilgi bomboş duruyordu. */
.dip-ic{
  display: grid;
  grid-template-columns: auto 1fr auto;   /* marka | bağlantılar | iletişim */
  align-items: start;
  gap: 26px 32px;
}
.dip-menu{ justify-self: center; }
.dip-iletisim{ justify-self: end; align-items: flex-end; text-align: right; }
.dip-telif{ grid-column: 1 / -1; }
.dip-marka{ display: flex; align-items: center; gap: 13px; }
.dip-marka strong{
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: 1.28rem; color: #fff;
}
.dip-marka small{ display: block; font-size: .78rem; color: rgba(255,255,255,.62); }
/* Masaüstünde YAN YANA — tek sütun yapınca solda kocaman boşluk kalıp
   sağda uzun bir liste oluşuyordu. Alt alta dizilim yalnızca telefonda
   (aşağıdaki 680px bloğunda), orada satır sarması dağınık duruyor. */
.dip-menu{ display: flex; flex-wrap: wrap; gap: 4px; }
.dip-menu a{
  /* dikey 11px: dokunma hedefi 41px'ten 47px'e çıkıyor (min 44) */
  padding: 11px 14px; border-radius: 999px;
  font-size: .88rem; text-decoration: none; color: rgba(255,255,255,.82);
  transition: background var(--gecis), color var(--gecis);
}
.dip-menu a:hover{ background: rgba(255,255,255,.13); color: #fff; }
/* iletişim sütunu */
.dip-iletisim{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dip-tel{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.34rem;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  transition: color var(--gecis);
}
.dip-tel:hover{ color: var(--deniz-acik); }
.dip-ig{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: .88rem;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: color var(--gecis);
}
.dip-ig svg{ width: 18px; height: 18px; flex: none; }
.dip-ig:hover{ color: #fff; }

.dip-telif{
  width: 100%; margin: 6px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.6);
}

/* ══════════════════════════════════════════════════════════════════════════
   TELEFONDA SABİT ALT ÇUBUK
   ═════════════════════════════════════════════════════════════════════════ */
.dip-cubuk{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  gap: 10px;
  padding: 10px clamp(14px, 4vw, 20px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(248,245,240,.80);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 -12px 34px -24px rgba(11,49,60,.6);
}
.dip-cubuk .dugme{ min-height: 50px; font-size: .93rem; }

/* ══════════════════════════════════════════════════════════════════════════
   FOTOĞRAF BÜYÜTME
   ═════════════════════════════════════════════════════════════════════════ */
.buyutec{
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(5,26,32,.82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: belir 220ms ease both;
}
.buyutec[hidden]{ display: none; }
.buyutec img{
  max-width: min(100%, 1200px); max-height: 86vh;
  border-radius: var(--yuvarlak);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.buyutec-kapat{
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff; font-size: 1.7rem; line-height: 1;
  cursor: pointer;
}
.buyutec-kapat:hover{ background: rgba(255,255,255,.26); }
@keyframes belir{ from{ opacity: 0 } to{ opacity: 1 } }

/* ══════════════════════════════════════════════════════════════════════════
   KAYDIRINCA BELİRME  (yalnız JS varken gizlenir — JS yoksa her şey görünür)
   ═════════════════════════════════════════════════════════════════════════ */
.js .gorun{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
}
.js .gorun.ic{ opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   DUYARLI YERLEŞİM
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px){
  .ozellik-izgara{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  .menu{
    position: absolute; top: calc(100% + 8px); right: clamp(20px, 5vw, 44px); left: clamp(20px, 5vw, 44px);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px;
    background: linear-gradient(148deg, rgba(255,255,255,.90), rgba(255,255,255,.74));
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: var(--yuvarlak);
    box-shadow: 0 26px 54px -26px rgba(11,49,60,.5);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  }
  .menu.acik{ opacity: 1; visibility: visible; transform: none; }
  .menu a{ color: var(--murekkep); padding: 14px 16px; border-radius: var(--yuvarlak-s); }
  .menu a:hover{ background: rgba(15,53,64,.07); }
  .menu-dugme{ display: flex; }
  .ustcubuk .dugme-wa{ display: none; }

  .kunye{ grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .kunye li:nth-child(3n+1){ border-left: 0; }
  .kunye li:nth-child(n+4){ border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; }

  .galeri{ grid-template-columns: repeat(2, 1fr); }
  .mesafe-izgara{ grid-template-columns: repeat(2, 1fr); }
  .teklif-izgara{ grid-template-columns: 1fr; }
  .harita-alan{ grid-template-columns: 1fr; }
  .harita-kutu{ min-height: 340px; }
}

@media (max-width: 820px){
  body{ padding-bottom: 82px; }
  .dip-cubuk{ display: flex; }
  .dip{ padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

@media (max-width: 680px){
  body{ font-size: 16px; }
  html{ scroll-padding-top: 80px; }
  /* padding-top yukarıdaki mobil hero bloğunda (30svh) belirleniyor —
     burada tekrar tanımlamak onu eziyordu */
  .hero{ min-height: 92svh; }
  .ozellik-izgara{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ozellik{ padding: 20px 18px; }
  .ozellik h3{ font-size: 1.08rem; }
  .kunye{ grid-template-columns: repeat(2, 1fr); padding: 16px; }
  .kunye li{ border-left: 0; }
  .kunye li:nth-child(2n+1){ border-left: 0; }
  .kunye li:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
  .kunye li:nth-child(5){ grid-column: span 2; }
  .iletisim-dugmeler{ grid-template-columns: 1fr; }
  .metin-vurgu{ font-size: 1.22rem; padding: 18px 20px; }
  .dip-ic{ grid-template-columns: 1fr; justify-items: start; }
  .dip-menu{ justify-self: start; }
  .dip-iletisim{ justify-self: start; align-items: flex-start; text-align: left; }
  /* telefonda yan yana dizilince ikinci satıra taşıp dağınık duruyor */
  .dip-menu{ flex-direction: column; align-items: flex-start; gap: 2px; }
  .dip-iletisim{ gap: 6px; }
}

@media (max-width: 480px){
  .galeri{ grid-template-columns: 1fr; }
  .galeri-kutu.genis{ grid-column: span 1; }
  .mesafe-izgara{ grid-template-columns: 1fr; }
  .hero-dugmeler{ flex-direction: column; align-items: stretch; }
  .hero-dugmeler .dugme{ width: 100%; }
  .marka-yazi strong{ font-size: 1.14rem; }
}

/* ── dokunmatik: hover büyütmeleri kapat ─────────────────────────────────── */
@media (hover: none){
  .dugme:hover{ transform: none; }
  .ozellik:hover{ transform: none; }
  .galeri-kutu:hover img{ transform: none; }
  /* dokunduktan sonra vurgu takılı kalmasın */
  .dip-menu a:hover, .menu a:hover{ background: none; }
  .telefon:hover{ background: rgba(255,255,255,.55); border-color: var(--cizgi-2); }
}

/* ── hareket azaltma tercihi ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .damla{ animation: none; }
  .js .gorun{ opacity: 1; transform: none; transition: none; }
  *, *::before, *::after{ transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}

/* ── yazdırma ────────────────────────────────────────────────────────────── */
@media print{
  .ustcubuk, .dip-cubuk, .sivi, .buyutec, .menu-dugme, .harita-kutu{ display: none; }
  body{ background: #fff; padding-bottom: 0; }
  body::after{ display: none; }
  .hero{ min-height: auto; padding: 20px 0; background: #fff; }
  .hero-perde, .hero-foto{ display: none; }
  .hero h1, .hero-alt, .kunye li, .kunye b, .kunye span{ color: #000; text-shadow: none; }
  .js .gorun{ opacity: 1; transform: none; }
}