/* ==========================================================================
   Bâhur Lounge — Mersin, 34. Cadde
   Marka renkleri amblemden örneklendi: petrol #076066, altın #F8D945.
   Amblemdeki duman bulutu sitenin yapısal motifi (bâhur = tütsü dumanı).
   Mekânın kendi ürün fotoğrafları saf siyah zeminde çekilmiş; bu yüzden
   tüm site koyu ve tabaklar siyah karolarda serbest duruyor.
   ========================================================================== */

:root {
  --petrol-950: #03191b;
  --petrol-900: #05262a;
  --petrol-850: #063134;
  --petrol-800: #073e42;
  --petrol: #076066;
  --petrol-400: #3d8b8e;
  --petrol-200: #9cc0bf;

  --altin: #f8d945;
  --altin-300: #fceba2;
  --altin-700: #c99a22;

  --fildisi: #f4efe1;
  --sis: rgba(156, 192, 191, 0.72);
  --cizgi: rgba(156, 192, 191, 0.16);
  --cizgi-altin: rgba(248, 217, 69, 0.28);

  --tut: 'Marcellus', 'Times New Roman', serif;
  --gov: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --olcu: min(1260px, 100% - 3rem);
  --yumusak: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--petrol-950);
  color: var(--fildisi);
  font-family: var(--gov);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--altin); color: var(--petrol-950); }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; border-radius: 2px; }

.kabuk { width: var(--olcu); margin-inline: auto; }

.gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--altin); color: var(--petrol-950);
  padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 500;
  text-decoration: none; transition: top 0.2s;
}
.atla:focus { top: 1rem; }

/* --- Tipografi ------------------------------------------------------ */

h1, h2, h3, h4 { font-family: var(--tut); font-weight: 400; line-height: 1.15; margin: 0; }

.goz {
  font-family: var(--gov); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--altin); margin: 0 0 1.15rem;
}

.baslik { font-size: clamp(2rem, 1.35rem + 3vw, 3.6rem); text-wrap: balance; }
.baslik em { font-style: normal; color: var(--altin); }

.bolum { padding: clamp(3.8rem, 2.6rem + 4vw, 6rem) 0; position: relative; }

.bolum-bas { max-width: 60ch; margin-bottom: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); }
.bolum-bas p { color: var(--sis); margin: 1.15rem 0 0; }
.bolum-bas--orta { margin-inline: auto; text-align: center; }

/* --- Bulut (amblemdeki duman) --------------------------------------- */

/* Amblemdeki duman bulutu — dolu altın siluet, logodaki gibi */
.bulut { display: block; color: var(--altin-700); }
.bulut * { fill: currentColor; }

.ayrac { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.4rem; }
.ayrac::before, .ayrac::after { content: ''; height: 1px; flex: 1; background: var(--cizgi-altin); }
.ayrac .bulut { width: 56px; flex: none; }
.bolum-bas--orta .ayrac { justify-content: center; }

/* --- Düğmeler ------------------------------------------------------- */

.dugme {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1rem 1.95rem; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background 0.35s var(--yumusak), color 0.35s var(--yumusak),
              border-color 0.35s var(--yumusak), transform 0.35s var(--yumusak);
}
.dugme:hover { transform: translateY(-2px); }
.dugme--altin { background: var(--altin); color: var(--petrol-950); }
.dugme--altin:hover { background: var(--altin-300); }
.dugme--hayalet { border-color: var(--cizgi-altin); color: var(--altin); }
.dugme--hayalet:hover { border-color: var(--altin); background: rgba(248, 217, 69, 0.09); }

/* --- Üst çubuk ------------------------------------------------------ */

.tepe {
  position: fixed; inset: 0 0 auto; z-index: 60; padding: 1.1rem 0;
  transition: background 0.4s var(--yumusak), padding 0.4s var(--yumusak);
}
.tepe::after {
  content: ''; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cizgi-altin), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.tepe.yapisti { background: rgba(3, 25, 27, 0.9); backdrop-filter: blur(16px); padding: 0.6rem 0; }
.tepe.yapisti::after { opacity: 1; }

.tepe-ic { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.marka { display: block; text-decoration: none; flex: none; }
.marka img { width: 104px; transition: width 0.4s var(--yumusak); }
.tepe.yapisti .marka img { width: 84px; }

.gezinti { display: flex; align-items: center; gap: 2.1rem; }
.gezinti a {
  font-size: 0.73rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--fildisi); opacity: 0.82;
  position: relative; padding: 0.35rem 0; transition: color 0.3s, opacity 0.3s;
}
.gezinti a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--altin); transition: right 0.35s var(--yumusak);
}
.gezinti a:hover, .gezinti a[aria-current='page'] { color: var(--altin); opacity: 1; }
.gezinti a:hover::after, .gezinti a[aria-current='page']::after { right: 0; }

.tepe-tel {
  font-size: 0.75rem; letter-spacing: 0.12em; text-decoration: none; white-space: nowrap;
  color: var(--altin); border: 1px solid var(--cizgi-altin);
  padding: 0.55rem 1.15rem; border-radius: 999px;
  transition: background 0.3s, border-color 0.3s;
}
.tepe-tel:hover { background: rgba(248, 217, 69, 0.1); border-color: var(--altin); }

.menu-dugme { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; color: var(--altin); }
.menu-dugme span {
  display: block; width: 26px; height: 1.5px; background: currentColor; margin: 5px 0;
  transition: transform 0.35s var(--yumusak), opacity 0.25s;
}
.menu-dugme[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-dugme[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Kahraman ------------------------------------------------------- */

.kahraman {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; padding: 8.5rem 0 4rem; overflow: hidden;
  background: radial-gradient(125% 78% at 50% 4%, #0a5257 0%, #063135 44%, var(--petrol-950) 100%);
}
#duman { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.kahraman::after {
  content: ''; position: absolute; inset: auto 0 0; height: 38%; z-index: 1;
  background: linear-gradient(transparent, var(--petrol-950)); pointer-events: none;
}
.kahraman-ic { position: relative; z-index: 2; text-align: center; }

.kahraman-amblem { width: min(196px, 44vw); margin: 0 auto 1.4rem; }
.kahraman-amblem img {
  width: 100%;
  filter: drop-shadow(0 0 34px rgba(2, 12, 14, 0.9)) drop-shadow(0 14px 30px rgba(2, 12, 14, 0.6));
}

.kahraman h1 {
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.7rem);
  max-width: 20ch; margin: 0 auto; line-height: 1.3; text-wrap: balance;
}
.kahraman h1 em { font-style: normal; color: var(--altin); }
.kahraman-alt { margin: 1.6rem auto 0; max-width: 44ch; color: var(--sis); text-wrap: balance; }
.kahraman-dugmeler { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

/* Kahraman tabakları — siyah zeminli fotoğraflar dumanın içinde erisin */
.kahraman-serit {
  position: relative; z-index: 2; width: var(--olcu); margin: 3.5rem auto -1rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  pointer-events: none;
}
.kahraman-serit img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 96%);
}
.kahraman-serit figure { margin: 0; }
.kahraman-serit figure:nth-child(2) { transform: translateY(-8%) scale(1.14); }

/* --- Bilgi şeridi --------------------------------------------------- */

.serit { background: var(--petrol); border-block: 1px solid var(--cizgi-altin); padding: 1.05rem 0; }
.serit-ic {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.6rem; align-items: center; justify-content: center;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--altin-300);
}
.serit-ic a { text-decoration: none; }
.serit-ic a:hover { color: #fff; }
.serit-ic span { display: inline-flex; align-items: center; gap: 0.55rem; }
.nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--altin); flex: none; }
#durum .nokta { animation: nabiz 2.4s ease-in-out infinite; }
#durum.kapali .nokta { background: var(--petrol-200); animation: none; }
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 217, 69, 0.5); } 60% { box-shadow: 0 0 0 7px rgba(248, 217, 69, 0); } }
@media (prefers-reduced-motion: reduce) { #durum .nokta { animation: none; } }

/* --- Tabak karosu (her yerde ortak) --------------------------------- */

.karo {
  background: #000; border-radius: 4px; overflow: hidden; position: relative;
  border: 1px solid rgba(156, 192, 191, 0.1);
}
.karo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--yumusak); }
/* Bâhur'un kendi fotoğrafları saf siyah zeminde — kırpma, karonun içinde serbest bıraksın */
.karo img.serbest { object-fit: contain; }
.karo--bos { display: grid; place-items: center; background: var(--petrol-900); }
.karo--bos .bulut { width: 42%; max-width: 74px; opacity: 0.42; }

/* --- Gökkuşağı Serisi ----------------------------------------------- */

.seri { background: var(--petrol-950); }
.seri-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 1.4rem; }

/* Serinin başı — 1400₺'lik serpme kahvaltı geniş kart */
.seri-one {
  display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 1.4rem;
  border: 1px solid var(--cizgi-altin); border-radius: 4px; overflow: hidden;
  background: var(--petrol-900); text-decoration: none;
  transition: border-color 0.4s var(--yumusak);
}
.seri-one:hover { border-color: var(--altin-700); }
.seri-one .karo { border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.seri-one:hover .karo img { transform: scale(1.04); }
.seri-one-govde {
  padding: clamp(1.7rem, 1rem + 2.4vw, 3.2rem);
  display: flex; flex-direction: column; justify-content: center; gap: 0.55rem;
}
.seri-one-govde h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem); line-height: 1.2; }
.seri-one-govde p { margin: 0.35rem 0 0.6rem; color: var(--sis); font-size: 0.94rem; }
.seri-one-govde .seri-fiyat { font-size: 1.5rem; }

.seri-kart { text-decoration: none; display: flex; flex-direction: column; }
.seri-kart .karo { aspect-ratio: 1; }
.seri-kart:hover .karo img { transform: scale(1.07); }
.seri-kart .karo::after {
  content: ''; position: absolute; inset: 0; border-radius: 3px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.4s var(--yumusak);
}
.seri-kart:hover .karo::after { box-shadow: inset 0 0 0 1px var(--cizgi-altin); }
.seri-govde { padding: 1rem 0.2rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.seri-ust { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--altin-700); }
.seri-kart h3 { font-size: 1.16rem; line-height: 1.3; }
.seri-fiyat { font-family: var(--tut); font-size: 1.06rem; color: var(--altin); margin-top: 0.15rem; }
.seri-fiyat sub { font-family: var(--gov); font-size: 0.62rem; vertical-align: baseline; color: var(--altin-700); }

/* --- Bir gün Bâhur'da ----------------------------------------------- */

.gun { background: linear-gradient(180deg, var(--petrol-950), var(--petrol-900) 45%, var(--petrol-950)); }
.saatler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.7rem; position: relative; margin-top: 3.6rem; }
.saatler::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--altin-700), var(--altin) 40%, var(--petrol-400));
}
.saat { padding-top: 2.1rem; position: relative; }
.saat::before {
  content: ''; position: absolute; top: -4px; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--altin); box-shadow: 0 0 0 4px rgba(248, 217, 69, 0.16);
}
.saat .karo { aspect-ratio: 1; margin-bottom: 1.3rem; }
.saat:hover .karo img { transform: scale(1.05); }
.saat-vakit { font-family: var(--tut); font-size: 1.6rem; color: var(--altin); display: block; }
.saat h3 {
  font-family: var(--gov); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; margin: 0.35rem 0 0.9rem; color: var(--fildisi);
}
.saat p { margin: 0; font-size: 0.92rem; line-height: 1.62; color: var(--sis); }

/* --- Gece tarafı ---------------------------------------------------- */

.gece { background: var(--petrol-950); position: relative; overflow: hidden; }
.gece::before {
  content: ''; position: absolute; inset: -25% -10% auto; height: 68%;
  background: radial-gradient(58% 100% at 50% 0%, rgba(7, 96, 102, 0.45), transparent 72%);
  pointer-events: none;
}
.gece .kabuk { position: relative; z-index: 1; }

.ikili { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.ikili-gorseller { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ikili-gorseller figure { margin: 0; border-radius: 4px; overflow: hidden; }
.ikili-gorseller img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 0.9s var(--yumusak); }
.ikili-gorseller figure:hover img { transform: scale(1.05); }
.ikili-gorseller figure:nth-child(1) { grid-row: span 2; }
.ikili-gorseller figure:nth-child(1) img { aspect-ratio: 3 / 5.15; }

.ozellikler { list-style: none; margin: 2.3rem 0 0; padding: 0; }
.ozellikler li {
  display: flex; align-items: baseline; gap: 1.1rem; padding: 0.95rem 0;
  border-top: 1px solid var(--cizgi); color: var(--sis); font-size: 0.94rem;
}
.ozellikler li:last-child { border-bottom: 1px solid var(--cizgi); }
.ozellikler strong { font-family: var(--tut); font-weight: 400; font-size: 1.08rem; color: var(--fildisi); min-width: 8.5rem; flex: none; }

/* --- Sofra duvarı (galeri) ------------------------------------------ */

.duvar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.duvar .karo { aspect-ratio: 1; }
.duvar .karo:hover img { transform: scale(1.07); }
.duvar .karo img.serbest { padding: 4%; }

/* --- İletişim ------------------------------------------------------- */

.iletisim-izgara { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.bilgi { display: grid; gap: 2.1rem; }
.bilgi h3 {
  font-family: var(--gov); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--altin); margin-bottom: 0.65rem;
}
.bilgi p, .bilgi a { margin: 0; color: var(--sis); text-decoration: none; display: block; }
.bilgi a:hover { color: var(--altin); }
.bilgi .buyuk { font-family: var(--tut); font-size: 1.3rem; color: var(--fildisi); }

.harita { border: 1px solid var(--cizgi-altin); border-radius: 4px; overflow: hidden; background: var(--petrol-850); }
.harita iframe {
  width: 100%; height: 100%; min-height: 420px; border: 0; display: block;
  filter: invert(0.9) hue-rotate(175deg) saturate(0.55) contrast(0.92) brightness(1.05);
}
.harita:hover iframe, .harita:focus-within iframe { filter: none; }

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

.alt { background: #020f11; border-top: 1px solid var(--cizgi-altin); padding: 3.8rem 0 2.2rem; font-size: 0.87rem; color: var(--sis); }
.alt-ic { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 2.4rem; }
.alt img.alt-marka { width: 116px; margin-bottom: 1.15rem; }
.alt h4 {
  font-family: var(--gov); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--altin); margin-bottom: 1rem;
}
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--altin); }
.alt-son {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--cizgi);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.75rem; letter-spacing: 0.05em; color: rgba(156, 192, 191, 0.6);
}
.alt-son a { text-decoration: none; }

/* --- Whatsapp ------------------------------------------------------- */

.wa {
  position: fixed; left: 1.3rem; bottom: 1.3rem; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.75);
  transition: transform 0.3s var(--yumusak);
}
.wa:hover { transform: scale(1.08); }
.wa svg { width: 27px; height: 27px; fill: currentColor; }

/* --- Beliriş -------------------------------------------------------- */

.belir { opacity: 0; transform: translateY(22px); }
.belir.gorundu { opacity: 1; transform: none; transition: opacity 0.85s var(--yumusak), transform 0.85s var(--yumusak); }
@media (prefers-reduced-motion: reduce) {
  .belir { opacity: 1; transform: none; }
  .dugme:hover, .wa:hover { transform: none; }
  .karo img, .ikili-gorseller img { transition: none; }
}

/* ==========================================================================
   MENÜ SAYFASI
   ========================================================================== */

.menu-tepe {
  padding: calc(6rem + 1vw) 0 2.4rem; position: relative; overflow: hidden;
  background: radial-gradient(110% 130% at 50% 0%, #084c51 0%, #052a2d 52%, var(--petrol-950) 100%);
  text-align: center;
}
.menu-tepe .kabuk { position: relative; z-index: 1; }
.menu-tepe h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.menu-tepe p { color: var(--sis); margin: 1rem auto 0; max-width: 50ch; }

.menu-araclar {
  position: sticky; top: var(--tepe-h, 68px); z-index: 40; padding: 0.8rem 0;
  background: rgba(3, 25, 27, 0.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cizgi);
}
.araclar-ic { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; }

.sekmeler { display: flex; gap: 0.4rem; flex: none; }
.sekme {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.6rem 1.2rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--cizgi); color: var(--sis);
  transition: all 0.3s var(--yumusak);
}
.sekme:hover { border-color: var(--altin-700); color: var(--altin); }
.sekme[aria-selected='true'] { background: var(--altin); border-color: var(--altin); color: var(--petrol-950); }

.ara-kutu { position: relative; flex: 1; min-width: 190px; }
.ara-kutu svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--petrol-200); fill: none; stroke-width: 2; pointer-events: none;
}
#ara {
  width: 100%; font-family: var(--gov); font-size: 0.9rem; font-weight: 300;
  padding: 0.72rem 1rem 0.72rem 2.65rem; border-radius: 999px;
  border: 1px solid var(--cizgi); background: rgba(7, 96, 102, 0.16); color: var(--fildisi);
}
#ara::placeholder { color: rgba(156, 192, 191, 0.6); }
#ara:focus { outline: none; border-color: var(--altin-700); background: rgba(7, 96, 102, 0.26); }

.sayac { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrol-200); white-space: nowrap; }

.menu-govde { display: grid; grid-template-columns: 226px 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); padding: 3rem 0 6rem; align-items: start; }

/* Kategori rayı — yanan tütsü çubuğu gibi ilerler */
.ray {
  position: sticky; top: calc(var(--tepe-h, 68px) + var(--arac-h, 58px) + 1.4rem);
  max-height: calc(100vh - var(--tepe-h, 68px) - var(--arac-h, 58px) - 3rem);
  overflow-y: auto; overscroll-behavior: contain; padding-right: 0.6rem;
  scrollbar-width: thin; scrollbar-color: rgba(156, 192, 191, 0.25) transparent;
}
.ray::-webkit-scrollbar { width: 4px; }
.ray::-webkit-scrollbar-thumb { background: rgba(156, 192, 191, 0.22); border-radius: 4px; }

.ray-bolum { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--altin-700); margin: 1.7rem 0 0.7rem; padding-left: 0.95rem; }
.ray-bolum:first-child { margin-top: 0; }

.ray a {
  display: block; position: relative; text-decoration: none; font-size: 0.83rem;
  color: var(--sis); padding: 0.42rem 0 0.42rem 0.95rem;
  border-left: 1px solid var(--cizgi); transition: color 0.3s;
}
.ray a::before {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--altin); transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s var(--yumusak);
}
.ray a:hover { color: var(--altin-300); }
.ray a.etkin { color: var(--altin); }
.ray a.etkin::before { transform: scaleY(1); }
.ray a.etkin::after {
  content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--altin);
  box-shadow: 0 0 12px 2px rgba(248, 217, 69, 0.7);
}

.kategori { scroll-margin-top: calc(var(--tepe-h, 68px) + var(--arac-h, 58px) + 1.6rem); margin-bottom: 3.8rem; }
.kategori-bas { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.6rem; }
.kategori-bas .bulut { width: 42px; flex: none; }
.kategori-bas h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); white-space: nowrap; }
.kategori-bas::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, var(--cizgi-altin), transparent); }
.kategori-adet { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--petrol-200); flex: none; }

.satirlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.35rem 2.4rem; }

.satir {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 1.1rem; align-items: center;
  padding: 0.8rem 0.65rem; border-radius: 4px; border-bottom: 1px solid rgba(156, 192, 191, 0.1);
  transition: background 0.3s;
}
.satir:hover { background: rgba(7, 96, 102, 0.16); }
.satir .karo { width: 78px; height: 62px; flex: none; cursor: zoom-in; }
.satir:hover .karo img { transform: scale(1.08); }
.satir-ad { font-family: var(--tut); font-size: 1.03rem; line-height: 1.3; }
.satir-not {
  font-size: 0.77rem; line-height: 1.5; color: var(--petrol-200); margin-top: 0.2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.satir-fiyat { font-family: var(--tut); font-size: 1.06rem; color: var(--altin); white-space: nowrap; }
.satir-fiyat sub { font-family: var(--gov); font-size: 0.6rem; color: var(--altin-700); vertical-align: baseline; }

.bos { text-align: center; padding: 4.5rem 1rem; color: var(--sis); }
.bos .bulut { width: 74px; margin: 0 auto 1.5rem; opacity: 0.55; }
.bos strong { display: block; font-family: var(--tut); font-size: 1.45rem; font-weight: 400; color: var(--fildisi); margin-bottom: 0.5rem; }

/* Büyütücü */
.lup {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
  background: rgba(2, 15, 17, 0.95); backdrop-filter: blur(7px); padding: 5vh 5vw; cursor: zoom-out;
}
.lup.acik { display: grid; }
.lup figure { margin: 0; text-align: center; }
.lup img { max-width: min(760px, 90vw); max-height: 72vh; width: auto; border-radius: 4px; }
.lup figcaption { margin-top: 1.4rem; font-family: var(--tut); font-size: 1.3rem; color: var(--fildisi); }
.lup figcaption span {
  display: block; font-family: var(--gov); font-size: 0.76rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--altin); margin-top: 0.5rem;
}

/* ==========================================================================
   DUYARLI
   ========================================================================== */

@media (max-width: 1024px) {
  .menu-govde { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .ray {
    position: sticky; top: calc(var(--tepe-h, 60px) + var(--arac-h, 106px)); max-height: none; display: flex; gap: 0.45rem;
    overflow-x: auto; padding: 0.7rem 0; margin-inline: calc(50% - 50vw);
    padding-inline: max(1.5rem, calc(50vw - var(--olcu) / 2));
    background: rgba(3, 25, 27, 0.96); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cizgi); z-index: 30; scrollbar-width: none;
  }
  .ray::-webkit-scrollbar { display: none; }
  .ray-bolum { display: none; }
  .ray a {
    border: 1px solid var(--cizgi); border-radius: 999px; padding: 0.42rem 1rem;
    white-space: nowrap; flex: none; font-size: 0.76rem;
  }
  .ray a::before, .ray a::after { display: none; }
  .ray a.etkin { background: var(--altin); color: var(--petrol-950); border-color: var(--altin); }
  .kategori { scroll-margin-top: calc(var(--tepe-h, 60px) + var(--arac-h, 106px) + 4.2rem); }

}

@media (max-width: 900px) {
  .gezinti {
    position: fixed; inset: 0 0 auto; padding: 5.6rem 2rem 2.5rem;
    background: rgba(3, 25, 27, 0.985); backdrop-filter: blur(18px);
    flex-direction: column; align-items: flex-start; gap: 0.3rem;
    transform: translateY(-102%); transition: transform 0.45s var(--yumusak);
    border-bottom: 1px solid var(--cizgi-altin);
  }
  .gezinti.acik { transform: none; }
  .gezinti a { font-size: 1rem; letter-spacing: 0.16em; padding: 0.78rem 0; width: 100%; }
  .menu-dugme { display: block; position: relative; z-index: 2; }
  .tepe-tel { display: none; }
  .ikili { grid-template-columns: 1fr; }
  .seri-one { grid-template-columns: 1fr; }
  .seri-one .karo { aspect-ratio: 16 / 9; }
  .iletisim-izgara { grid-template-columns: 1fr; }
  .saatler { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.5rem; }
  .saatler::before { display: none; }
  .saat { padding-top: 1.7rem; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .duvar { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  :root { --olcu: calc(100% - 2.4rem); }
  .kahraman { padding-top: 6rem; min-height: 92svh; }
  .kahraman-amblem { margin-bottom: 1.2rem; }
  .wa { width: 48px; height: 48px; right: auto; left: 1rem; bottom: 1rem; }
  .wa svg { width: 24px; height: 24px; }
  .kahraman-serit { grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
  .serit-ic { gap: 0.4rem 1.3rem; font-size: 0.66rem; letter-spacing: 0.14em; }
  .seri-izgara { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .seri-kart h3 { font-size: 1rem; }
  .duvar { grid-template-columns: repeat(2, 1fr); }
  .alt-ic { grid-template-columns: 1fr; gap: 2.1rem; }
  .satirlar { grid-template-columns: 1fr; }
  .ozellikler li { flex-direction: column; gap: 0.15rem; }
  .ozellikler strong { min-width: 0; }
  .ikili-gorseller figure:nth-child(1) img { aspect-ratio: 3 / 4; }
  .ikili-gorseller figure:nth-child(1) { grid-row: auto; }
  .sekmeler { width: 100%; }
  .sekme { flex: 1; padding: 0.55rem 0.4rem; letter-spacing: 0.1em; }
  .sayac { display: none; }
  .harita iframe { min-height: 320px; }
}