/* =========================================================
   KÖY EMLAK — MODERN LÜKS TEMA (Light & Warm Gold)
   Bootstrap + Tailwind üzerine bindirme (override) katmanı
   Aydınlık palet: cream + soylu altın + antrasit. """"theme-modern.css""""
   ========================================================= */

:root {
  /* Marka — deneme paleti: adaçayı/zeytin monokrom */
  --km-bg:         #CDD4C2;   /* ana zemin */
  --km-bg-2:       #E3E7D6;   /* açık kart */
  --km-bg-3:       #B0B8A6;   /* pastel vurgu */
  --km-ink:        #1A1A1A;   /* ana metin */
  --km-ink-2:      #2A2A2A;
  --km-muted:      #6C6C6C;
  --km-line:       rgba(26, 26, 26, 0.10);
  --km-line-soft:  rgba(26, 26, 26, 0.06);
  --km-gold:       #849282;   /* ana vurgu */
  --km-gold-2:     #B0B8A6;   /* açık vurgu */
  --km-gold-3:     #798773;   /* koyu vurgu */
  --km-yellow:     #849282;   /* marka vurgusu (buton) */
  --km-yellow-2:   #B0B8A6;
  --km-cream:      #E3E7D6;

  /* Layout/footer zemini */
  --km-sage:       #CDD4C2;
  --km-sage-2:     #E3E7D6;
  --km-sage-3:     #B0B8A6;

  /* Sistem */
  --km-radius:     16px;
  --km-radius-sm:  10px;
  --km-shadow-1:   0 4px 18px rgba(45, 55, 40, 0.08);
  --km-shadow-2:   0 14px 44px rgba(45, 55, 40, 0.12);
  --km-glow:       0 0 0 1px rgba(132,146,130,.35), 0 8px 30px rgba(132,146,130,.20);

  --font-serif:    'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Manrope', 'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif;

  /* Footer'daki adaçayı/altın gradyanı */
  --km-footer-gradient: linear-gradient(135deg, var(--km-sage-2) 0%, var(--km-gold-2) 45%, var(--km-sage) 75%, var(--km-sage-3) 100%);
}

/* ---------- Global ---------- */
html {
  background: linear-gradient(180deg, var(--km-sage-2) 0%, var(--km-sage) 45%, var(--km-sage-3) 100%) !important;
}
body {
  background: transparent !important;
  color: var(--km-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Tek, viewport'a sabit görsel katmanı (layout-hero.png) — mavi (#185B80) filtre
   fotoğrafın üstüne opaklıkla bindiriliyor, kutu/panel yok, foto her yerde görünür. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(24,91,128,.18) 0%, rgba(24,91,128,.18) 45%, rgba(24,91,128,.18) 100%),
    url('/Images/layout-hero.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1000px 600px at 90% -10%, rgba(132,146,130,.12), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(132,146,130,.08), transparent 55%);
  z-index:-1;
}

::selection { background: var(--km-gold); color:#111; }

h1,h2,h3,h4,h5{ font-family: var(--font-serif); letter-spacing:.2px; color: var(--km-ink); }
h1{ font-weight:700; }
p, li, dl, dt, dd, span, label { color: var(--km-ink); }
.text-muted{ color: var(--km-muted) !important; }
hr { border-color: var(--km-line); opacity:1; }
a { color: var(--km-gold-3); text-decoration:none; }
a:hover{ color: var(--km-gold); }

/* Bootstrap yüzey rengi override — açık tema */
.bg-white, .card, .modal-content, .list-group-item, .input-group-text, .toast, .breadcrumb, .accordion-item {
  background-color: var(--km-bg-2) !important;
  color: var(--km-ink) !important;
  border-color: var(--km-line) !important;
}
.content-bg{
  background: var(--km-bg-2) !important;
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  box-shadow: var(--km-shadow-1) !important;
}
.surface-stroke{ border-color: var(--km-line) !important; }

/* Form kontrolleri */
.form-control, .form-select {
  background: #ffffff !important;
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line) !important;
  border-radius: 12px;
  padding: .7rem .95rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control::placeholder{ color: rgba(26,26,26,.4); }
.form-control:focus, .form-select:focus{
  background: #fff !important;
  border-color: var(--km-gold) !important;
  box-shadow: 0 0 0 .2rem rgba(132,146,130,.18) !important;
  color: var(--km-ink) !important;
}
.form-label{ color: var(--km-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.input-group-text{
  background: var(--km-cream) !important;
  color: var(--km-gold-3) !important;
  border-color: var(--km-line) !important;
}

/* Butonlar */
.btn { border-radius: 999px; padding: .55rem 1.25rem; font-weight:600; letter-spacing:.02em; transition: transform .15s ease, box-shadow .2s, background .2s, color .2s, filter .2s; }
.btn:hover{ transform: translateY(-1px); }
.btn-yellow,
.btn-primary,
.btn-brand{
  background: #F2A35E !important;
  color:#111 !important;
  border: 1px solid #F2A35E !important;
  box-shadow: 0 6px 18px rgba(242,163,94,.35);
}
.btn-yellow:hover, .btn-primary:hover, .btn-brand:hover{
  filter: brightness(1.03);
  box-shadow: 0 10px 26px rgba(242,163,94,.5);
  color:#111 !important;
}
.btn-outline-warning{
  color:#111 !important;
  border: 1.5px solid #F2A35E !important;
  background: #F2A35E !important;
  box-shadow: 0 8px 22px rgba(242,163,94,.42);
}
.btn-outline-warning:hover{
  filter: brightness(1.05);
  color:#111 !important;
  border-color: #F2A35E !important;
}
.btn-outline-secondary, .btn-outline-dark{
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover{
  background: var(--km-ink) !important;
  color: var(--km-bg) !important;
  border-color: var(--km-ink) !important;
}
.btn-reset {
  /* hero-search .btn-search ile aynı turuncu ton */
  background: #F2A35E;
  border: 0;
  color: #111;
  font-weight: 800;
  border-radius: 999px;
  padding: .55rem 1.25rem;
  box-shadow: 0 8px 22px rgba(242,163,94,.42);
  transition: all .25s;
}
.btn-reset:hover{ filter: brightness(1.05); color: #111; box-shadow: 0 12px 28px rgba(242,163,94,.55); }
.text-warning{ color: var(--km-gold-3) !important; }

/* ---------- NAVBAR (Cam/blur overlay — arkasında hero fotoğrafı görünür) ---------- */
.site-topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  /* Hafif bir cam his: çoğunlukla şeffaf, sadece hafif bir beyazımsı ton +
     blur ile "belli et" — hero fotoğrafı arkada net görünmeye devam ediyor. */
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.12) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10) !important;
  backdrop-filter: saturate(140%) blur(9px);
  -webkit-backdrop-filter: saturate(140%) blur(9px);
  transition: transform .3s ease;
}
/* site.js aşağı kaydırınca .is-hidden ekliyor, yukarı kaydırınca kaldırıyor
   (bkz. wwwroot/js/site.js — daha önce yazılmış ama CSS karşılığı yoktu). */
.site-topbar.is-hidden{ transform: translateY(-100%); }
.site-topbar::after{ display:none; }
/* Hero'lu sayfalarda (anasayfa) sabit header için otomatik eklenen üst boşluk
   iptal edilir — header artık akışta yer kaplamıyor, hero'nun üzerinde yüzüyor. */
body:has(.hero-parallax).has-fixed-header{ padding-top: 0 !important; }
.brand-wrap{ color: var(--km-ink); text-shadow: none; }
.brand-title{
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  color: var(--km-ink);
  letter-spacing: 6px !important;
  font-size: clamp(22px, 2.8vw, 34px) !important;
  text-transform: uppercase;
}
.brand-sub{
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  color: var(--km-gold-3);
  letter-spacing: 9px;
  text-transform: uppercase;
  font-size: 11px !important;
  margin-top: 5px !important;
  opacity:.95;
  font-weight:600;
}
.bar-logo img{
  filter: drop-shadow(0 2px 6px rgba(45,55,40,.15));
  transition: transform .3s ease;
}
.bar-logo:hover img{ transform: scale(1.05); }
.hamburger span{ background: var(--km-ink) !important; height:2px !important; }
.bar-divider{ background: linear-gradient(to bottom, transparent, var(--km-gold), transparent) !important; height:34px !important; opacity:.6; }
.bar-phone{
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line);
  border-radius: 999px;
  padding: .5rem .75rem;
  display: inline-flex;
  align-items:center;
  background: rgba(255,255,255,.5);
  transition: all .25s;
}
.bar-phone:hover{ color: #111 !important; background: var(--km-yellow); border-color: var(--km-yellow); transform:none; box-shadow: 0 6px 16px rgba(132,146,130,.35); }

/* Off-canvas menu — light warm */
.mega-menu{
  background: linear-gradient(180deg, #FFFDF6 0%, #E3E7D6 100%) !important;
  color: var(--km-ink) !important;
  border-right: 1px solid var(--km-line);
}
.mega-menu::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 400px at 10% 0%, rgba(132,146,130,.18), transparent 60%);
  pointer-events:none;
}
.menu-brand{ color: var(--km-ink); font-family: var(--font-serif); letter-spacing:2px; }
.mega-head{ border-bottom: 1px solid var(--km-line) !important; padding: 22px 24px !important; }
.mega-link{
  color: var(--km-ink) !important;
  font-family: var(--font-serif);
  font-weight: 500 !important;
  font-size: 1.1rem;
  letter-spacing: 3px;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--km-line-soft);
  padding: 18px 24px !important;
  margin: 0 !important;
  position: relative;
}
.mega-link::before{
  content:""; position:absolute; left:24px; bottom:14px; height:1px; width:0; background: var(--km-gold);
  transition: width .3s ease;
}
.mega-link:hover{ background: rgba(132,146,130,.10) !important; transform:none; color: var(--km-gold-3) !important; }
.mega-link:hover::before{ width: 40px; }
.mega-link.is-active{ background: transparent !important; color: var(--km-gold-3) !important; }
.mega-link.is-active::before{ width: 40px; }
.menu-close{ color: var(--km-ink); font-size:1.3rem !important; }
.menu-backdrop{ background: rgba(0,0,0,.35) !important; backdrop-filter: blur(4px); }

/* ---------- HERO (Golden logo hero image showcase) ---------- */
.hero-parallax{
  /* siteHeader artık şeffaf/blur olarak hero'nun üzerinde yüzüyor (overlay),
     akıştan yer kaplamıyor — bu yüzden yükseklikten header payı düşülmüyor. */
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari adres çubuğu için güvenli viewport */
  height: auto !important;
  /* Görsel doğrudan bu elementin kendi arkaplanı — sadece bu bölümün sınırları
     içinde kalır, sayfanın geri kalanındaki layout arkaplanından (body::after,
     layout-hero.png) tamamen bağımsızdır. site.css'teki eski background-image
     burada override edilip tek kaynak bu kural oluyor. */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%),
    url('/Images/hero-gomec.png') !important;
  background-size: cover;
  /* Fotoğraftaki "GÖMEÇ KÖY EMLAK" ağaç amblemi görselin üst-orta kısmında;
     merkez hizalamada üst kenardan taşıp kırpılıyordu, bu yüzden dikeyde
     yukarı çekildi (amblemin altında daha az kırpılan alan bırakılıyor). */
  background-position: center 25%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed;
  display:flex;
  align-items:flex-end !important;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding: 40px 20px 40px !important;
  color: #fff;
}
.hero-parallax::before{ display:none; }
.hero-parallax::after{ display:none; }
.hero-overlay{ margin-bottom: 0 !important; width: 100%; max-width: 1180px; }

/* ---------- iOS Safari (browser) parallax katmanı ----------
   iOS Safari'de background-attachment:fixed güvenilir çalışmıyor (URL bar
   animasyonu sırasında görsel kayıyor/zıplıyor). site.js sadece iOS Safari'de
   (Ana Ekrana Ekle ile açılan standalone PWA'da DEĞİL) .hero-parallax'a
   "ios-parallax" class'ı ekleyip görseli buradaki ::before katmanına taşıyor;
   katman scroll'a göre requestAnimationFrame ile transform:translateY()
   üzerinden kaydırılıyor (transform compositor'da çalışır, reflow tetiklemez). */
.hero-parallax.ios-parallax{ background-image: none !important; }
.hero-parallax.ios-parallax::before{
  content:"";
  display:block;
  position:absolute;
  left:0; right:0;
  top:-70px; bottom:-70px; /* transform hareketi için taşma payı */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%),
    url('/Images/hero-gomec.png');
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat, no-repeat;
  transform: translate3d(0, var(--hero-parallax-y, 0px), 0);
  will-change: transform;
  z-index: -1;
  pointer-events: none;
}

/* Sadece arama kutusu + istatistikler (logo görseli konuşuyor) */
.hero-search{
  /* Hafif su damlası hissi: birkaç yumuşak dairesel highlight, camın üzerinde ışık yakalayan damlalar gibi */
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 7%),
    radial-gradient(circle at 32% 55%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 5%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 6%),
    radial-gradient(circle at 90% 68%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 5%),
    radial-gradient(circle at 60% 85%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 8%),
    radial-gradient(circle at 20% 90%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 4%),
    rgba(24, 91, 128, 0.18);
  border: 1px solid rgba(24,91,128,.35);
  border-radius: 20px;
  padding: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hero-search .tabs{
  display:flex; gap:6px; padding: 4px; background: rgba(26,26,26,.16); border-radius: 14px; margin-bottom: 12px; width: fit-content;
}
.hero-search .tab-btn{
  background: transparent; border: 0; color: var(--km-ink);
  text-shadow: 0 1px 2px rgba(255,255,255,.5);
  padding: 8px 22px; border-radius: 10px; font-weight:700; font-size:.8rem;
  letter-spacing: 2px; text-transform: uppercase; cursor:pointer; transition: all .2s;
}
.hero-search .tab-btn.active{
  background: #F2A35E;
  color:#111;
  box-shadow: 0 4px 14px rgba(242,163,94,.4);
}
.hero-search .row-inputs{
  display:grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items:stretch;
}
.hero-search select, .hero-search input{
  background: #fff !important;
  border:1px solid var(--km-line) !important;
  color: var(--km-ink) !important;
  border-radius: 12px !important;
  height: 52px;
  padding: 0 16px !important;
  font-weight:500;
}
.hero-search select:focus, .hero-search input:focus{ border-color: var(--km-gold) !important; box-shadow: 0 0 0 3px rgba(132,146,130,.18) !important; }
.hero-search .btn-search{
  background: #F2A35E;
  color:#111; border:0; border-radius:12px;
  padding: 0 28px; height: 52px; font-weight:800; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow: 0 8px 22px rgba(242,163,94,.42);
  transition: all .25s;
}
.hero-search .btn-search:hover{ filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(242,163,94,.55); }

.hero-stats{
  margin-top: 28px;
  display:flex; gap: 60px; flex-wrap: wrap;
  justify-content: center;
}
.hero-stat{ text-align: center; }
.hero-stat .num{ font-family: var(--font-serif); font-size: 2.2rem; color: #fff; line-height:1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hero-stat .lbl{ color: rgba(255,255,255,.9); font-size:.75rem; letter-spacing:3px; text-transform:uppercase; margin-top:6px; font-weight:600; }

/* Alt kısımda küçük açıklama/tagline */
.hero-tagline{
  text-align: center;
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 1px;
  margin-bottom: 22px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

@media (max-width: 768px){
  .hero-parallax{
    /* background-attachment:fixed mobilde (özellikle iOS Safari) güvenilir
       çalışmadığı için scroll'a düşürülüyor. */
    background-attachment: scroll;
    min-height: calc(94vh - var(--site-header-h, 64px));
    min-height: calc(94svh - var(--site-header-h, 64px)); /* iOS Safari adres çubuğu için güvenli viewport */
    padding: 30px 16px 30px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat, no-repeat;
  }
  .hero-parallax.ios-parallax::before{
    background-position: center center !important;
  }
  .hero-search .row-inputs{ grid-template-columns: 1fr; }
  .hero-search .btn-search{ width: 100%; justify-content:center; }
  .hero-stats{ gap: 24px; margin-top: 20px; }
  .hero-stat .num{ font-size: 1.6rem; }
  .hero-tagline{ font-size: 1rem; margin-bottom: 16px; }
}

/* ---------- Sayfa başlıkları ---------- */
main h1, main h2 {
  font-family: var(--font-serif);
  color: var(--km-ink);
  /* Layout hero fotoğrafı artık doğrudan arkada olduğu için (content-bg kutusu yok),
     kontrastı garantilemek için güçlü açık halo (fotoğraf değişken tonlu) */
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.75), 0 0 34px rgba(255,255,255,.55);
}
main h1.text-center, main h2.text-center{ position: relative; padding-bottom: 20px; }
main h1.text-center::after, main h2.text-center::after{
  content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--km-gold), transparent);
}

.section-eyebrow{
  display:block; text-align:center; color: var(--km-gold-3);
  letter-spacing: 8px; text-transform: uppercase;
  font-size: 11px; font-weight:700; margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.75), 0 0 34px rgba(255,255,255,.55);
}

.km-hero-tagline{
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--km-gold-3);
  font-size: 1.25rem;
  letter-spacing: .5px;
  margin: 8px auto 18px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.75), 0 0 34px rgba(255,255,255,.55);
}

/* ---------- Breadcrumb (çok düşük opaklıkta cam kutu) ---------- */
.breadcrumb-modern{
  background: transparent !important;
  backdrop-filter: none;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Bootstrap .container'ın kendi block/max-width/margin:auto davranışı
   korunuyor — arama kutusu ve kartlarla aynı .container içinde oldukları
   için sol/sağ hizası otomatik tutar (genişlik/margin burada ELLENMİYOR).
   site.css'teki eski kural yatay padding'i 0'a sıfırlıyordu (bkz. site.css
   .breadcrumb-container), o yüzden Bootstrap'ın varsayılan container
   gutter'ı (.75rem) elle geri veriliyor — main.container ile birebir aynı
   sol/sağ kenar. Bu dış kapsayıcı kutunun kendisi görünmez; cam kutu,
   içindeki .breadcrumb / .breadcrumb-inline elemanına uygulanıyor ki kutu
   sadece metin kadar yer kaplasın ve solda kalsın (ortalanmasın). */
.breadcrumb-modern .breadcrumb-container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: .6rem .75rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.breadcrumb-modern .breadcrumb,
.breadcrumb-modern .breadcrumb-inline{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
  padding: .5rem .9rem !important;
  margin: 0 !important;
}
.breadcrumb-modern,
.breadcrumb-modern .breadcrumb-item,
.breadcrumb-modern a,
.breadcrumb-modern .separator,
.breadcrumb-modern .current{
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.breadcrumb-modern .breadcrumb-item + .breadcrumb-item{ padding-left: .6rem; }
.breadcrumb-modern .breadcrumb-item + .breadcrumb-item::before{
  content: "›";
  color: var(--km-gold-3);
  font-weight: 700;
  padding-right: .6rem;
}
.breadcrumb-modern .separator{ padding: 0 .6rem; color: var(--km-gold-3); }
.breadcrumb-modern a{ color: var(--km-ink-2); text-decoration: none; }
.breadcrumb-modern a:hover{ color: var(--km-gold-3); }
.breadcrumb-modern .current{ color: var(--km-gold-3); font-weight: 800; }

/* ---------- Geri dön butonu (Anasayfa hariç tüm sayfalar, _Layout.cshtml) ----------
   .page-banner-wrap; breadcrumb'ı (varsa) sarmalıyor, buton bu sarmalayıcıya göre
   mutlak konumlanıp breadcrumb ile aynı satırda sağa hizalanıyor. Sayfa açılışında
   (scroll 0) gizli; site.js scroll'u algılayınca .is-visible ekleyip butonu sağda
   fixed konuma alır — cam/blur görünümü .back-to-top ile aynı dilde. */
.page-banner-wrap{
  position: relative;
  min-height: 2.75rem; /* breadcrumb'ı olmayan sayfalarda (Privacy, Login) butonun yeri çökmesin */
}
.back-nav-container{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  /* .back-nav-btn.is-visible position:fixed olsa da görsel katmanı (stacking
     context) DOM'daki üst öge olan bu kapsayıcıya bağlı kalır; main.container'ın
     z-index:2'siyle eşitlik bozulup içerik üstte kalmasın diye yüksek tutuluyor
     (.back-to-top/.whatsapp-float ile aynı seviye). Buton görünür değilken
     pointer-events:none olduğu için zararsız. */
  z-index: 1046;
}
.back-nav-btn{
  pointer-events: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.5);
  color: var(--km-ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
}
.back-nav-btn.is-visible{
  position: fixed;
  top: calc(var(--site-header-h, 64px) + 16px);
  right: 16px;
  z-index: 1045;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-nav-btn.is-visible:hover{ background: rgba(255,255,255,.5); color:#111; transform: translateX(-2px); }

/* ---------- Kartlar (İlan) ---------- */
.listing-border-1px{
  /* Eskiden burada dolgu (opak) bir gradyan vardı ("gold" adlı değişkenler
     aslında adaçayı/zeytin yeşili tonlarında — --km-gold:#849282 vb.); .card
     saydam olduğu için bu dolgu arkadaki gerçek fotoğrafı tamamen kapatıp
     kartların hep yeşilimsi görünmesine sebep oluyordu. Kenarlık artık .card
     üzerindeki gerçek `border` ile sağlanıyor, burada arkaplan YOK. */
  background: transparent !important;
  padding: 0 !important;
  border-radius: var(--km-radius) !important;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 6px 18px rgba(45,55,40,.10);
}
.listing-border-1px:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(132,146,130,.28), 0 8px 22px rgba(45,55,40,.14);
}
.listing-border-1px .card,
.listing-border-1px .listing-card{
  /* Kartın kendisi artık saydam/blur DEĞİL — cam efekti tek katman olarak
     yalnızca .listing-body'de uygulanıyor (aşağıda). İkisi de aynı anda
     bulanıklaştırıp tonlarsa üst üste binen çifte blur/tint donuk bir
     görünüme yol açıyordu; üst başlık kutularıyla (.km-featured-wrap
     .text-center.mb-4) birebir aynı TEK katmanlı camsı his için burada
     sadece çerçeve/gölge kalıyor, fotoğraf alanı zaten kendi img'i ile opak. */
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.18) !important;
  color: var(--km-ink) !important;
  border-radius: calc(var(--km-radius) - 1px) !important;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.listing-border-1px:hover .card,
.listing-border-1px:hover .listing-card{
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.22) !important;
}
/* Kart alt bilgi bloğu (fotoğrafın altı) — renk katmayan (mavi/yeşil tonsuz),
   nötr beyaz bazlı ince bir cam panel: arkadaki fotoğraf gerçek renkleriyle
   görünsün, sadece "kart" olduğunu belli edecek kadar bir opaklık farkı olsun.
   hero-search'teki "su damlası" highlight'ları aynı şekilde eklendi. */
.listing-border-1px .listing-body{
  background:
    radial-gradient(circle at 12% 15%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 9%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 7%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 6%),
    radial-gradient(circle at 15% 88%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 6%),
    rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease;
}
.listing-border-1px:hover .listing-body{
  background:
    radial-gradient(circle at 12% 15%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 9%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 7%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 6%),
    radial-gradient(circle at 15% 88%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 6%),
    rgba(255, 255, 255, 0.22) !important;
}
.listing-title{ font-family: var(--font-serif); font-size: 1.05rem !important; }
.listing-price{
  font-family: var(--font-serif) !important;
  font-weight: 700;
  font-size: 1.35rem !important;
}
/* Panel artık nötr/açık tonlu (renk katmıyor) olduğu için başlık/fiyat koyu +
   hafif beyaz halo ile sabitlendi — arkadaki fotoğraf ne olursa olsun okunaklı
   kalır (koyu metin + açık panel her zaman en güvenli kombinasyon). */
.listing-border-1px .listing-title,
.listing-border-1px .listing-price{
  color: #000 !important;
  text-shadow: 0 1px 1px rgba(255,255,255,.5) !important;
}
.listing-border-1px .listing-meta,
.listing-border-1px .listing-meta i{
  color: #fff !important;
  text-shadow: none !important;
}
.listing-img{
  filter: brightness(1) contrast(1.02);
  transition: transform .6s ease, filter .3s ease;
}
.listing-card:hover .listing-img{ transform: scale(1.05); }
.listing-media{ position:relative; overflow: hidden; }
.listing-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.15) 100%);
  pointer-events:none;
}
.carousel-control-prev-icon, .carousel-control-next-icon{
  background-color: rgba(26,26,26,.55);
  border-radius: 999px;
  padding: 18px;
  background-size: 40%;
  filter: none !important;
}

/* Mobilde _ListingCard.cshtml'in kendi kompakt tasarımını koru (embedded style !important kullanmıyor) */
@media (max-width: 575.98px){
  .listing-title{ font-size: 1rem !important; }
  .listing-price{ font-size: 1.1rem !important; }
}

/* ---------- Filtre bar ---------- */
/* Satılık/Kiralık filtre kutusu — anasayfadaki text-center mb-4 cam panelleriyle
   aynı opaklık/blur/hover davranışı (bkz. .km-featured-wrap .text-center.mb-4). */
.manage-section.mb-4.p-3.content-bg{
  padding: 20px !important;
  background: rgba(24, 91, 128, 0.05) !important;
  border: 1px solid rgba(24,91,128,.35) !important;
  border-radius: var(--km-radius) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.manage-section.mb-4.p-3.content-bg:hover{
  background: rgba(24, 91, 128, 0.14) !important;
  border-color: rgba(24,91,128,.5) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.manage-section.mb-4.p-3.content-bg .form-label,
.manage-section.mb-4.p-3.content-bg h5,
.manage-section.mb-4.p-3.content-bg address,
.manage-section.mb-4.p-3.content-bg li{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.form-select option{ background: #fff; color: var(--km-ink); }

/* ---------- Footer (Aydınlık) ---------- */
.site-footer{
  background: var(--km-footer-gradient) !important;
  color: var(--km-ink) !important;
  border-top: 1px solid var(--km-line);
  padding-top: 40px;
  padding-bottom: 20px;
  position: relative;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:50%; transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--km-gold), transparent);
}
.site-footer h5{ color: var(--km-ink); font-family: var(--font-serif); letter-spacing:1px; }
.site-footer p, .site-footer address, .site-footer a { color: var(--km-ink); }
.site-footer a:hover{ color: var(--km-gold-3); }
.site-footer .footer-logo,
.site-footer .footer-tree{
  filter: drop-shadow(0 4px 10px rgba(45,55,40,.15));
  opacity: 1 !important;
}

/* ---------- Detay sayfası özel öğeler ---------- */
/* İlan Detay üst blok: Galeri+Açıklama / Özellikler / Konum / İletişim.
   Sırayı breakpoint'e göre bağımsız kontrol etmek (mobilde Konum
   Özellikler'in altında, >=992px'te Açıklama'nın altında ve Özellikler'le
   aynı hizada) düz flex/col sırasıyla mümkün olmadığı için CSS Grid
   named area kullanılıyor. */
.ilan-detay-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "gallery" "spec" "contact";
  gap: 1.5rem;
}
.idg-gallery{ grid-area: gallery; }
.idg-spec{ grid-area: spec; }
.idg-location{ grid-area: location; }
.idg-contact{ grid-area: contact; }

/* İlan detay grid'i içindeki tüm kutular (Açıklama/Konum/İletişim) footer ile aynı tonda, düz renk */
.ilan-detay-grid .content-bg{
  background: var(--km-bg-2) !important;
}

/* Konum kutusu yalnızca ilanda konum varsa render edildiği için, boş bir grid
   satırının gap ile birlikte gereksiz boşluk bırakmaması adına satır sadece
   .has-location durumunda ekleniyor. */
.ilan-detay-grid.has-location{
  grid-template-areas: "gallery" "spec" "location" "contact";
}

@media (min-width: 992px){
  .ilan-detay-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "gallery spec"
      "contact spec";
  }
  .ilan-detay-grid.has-location{
    grid-template-areas:
      "gallery spec"
      "location spec"
      "contact spec";
  }
  /* spec sütun grid alanı gallery+contact (veya +location) satırlarını kapsadığı için
     varsayılan align-items:stretch, içindeki .h-100 zincirini (listing-gradient > spec-panel)
     doldurup az prop girildiğinde kutuyu gereksiz uzatıyordu. align-self:start ile kutu
     yalnızca kendi içeriği kadar (girilen prop sayısı kadar) yükseklik alır. */
  .idg-spec{ align-self: start; }
}

.spec-panel{
  /* content-bg ile aynı zemin/kenarlık — sayfadaki diğer kutucuklarla (Açıklama,
     İletişim) renk tutarlılığı için, ayrı bir palet icat etmek yerine referans alındı. */
  background: var(--km-bg-2) !important;
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line) !important;
  box-shadow: var(--km-shadow-1) !important;
}
.listing-gradient{
  /* Altın gradient çerçeve kaldırıldı — spec-panel ile aynı renk, tek düz kutu görünümü. */
  background: var(--km-bg-2) !important;
  padding: 1px !important;
  border-radius: var(--km-radius) !important;
}
.spec-panel .row.small .col.text-muted{ color: var(--km-muted) !important; font-weight: 500; }
.spec-panel .row.small .col.fw-semibold{ color: var(--km-ink) !important; }

.img-thumbnail{
  background: #fff !important;
  border-color: var(--km-line) !important;
}
.img-thumbnail:hover{ border-color: var(--km-gold) !important; }

/* ---------- HARİTA BÖLÜMÜ ---------- */
.km-map-section{
  margin-top: 80px;
  margin-bottom: 20px;
  padding: 60px 0;
}
.km-map-frame{
  border-radius: var(--km-radius);
  overflow: hidden;
  border: 1px solid var(--km-line);
  box-shadow: var(--km-shadow-2);
  position: relative;
  background:#fff;
}
.km-map-frame iframe{
  width: 100%; height: 480px; display:block; border: 0;
  filter: contrast(1.02) saturate(1.05);
}
.km-map-badge{
  position:absolute; top: 18px; left: 18px;
  background: rgba(255,253,246,.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(132,146,130,.35);
  padding: 14px 20px;
  border-radius: 14px;
  color: var(--km-ink);
  box-shadow: var(--km-shadow-1);
}
.km-map-badge .lbl{ color: var(--km-gold-3); font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:700; }
.km-map-badge .val{ font-family: var(--font-serif); font-size:1.05rem; margin-top:4px; }

@media (max-width: 768px){
  .km-map-frame iframe{ height: 340px; }
  .km-map-badge{ top: 12px; left: 12px; padding: 10px 14px; }
}

/* ---------- İletişim / Form vurguları ---------- */
.form-underline{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--km-line) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--km-ink) !important;
}
.form-underline:focus{
  border-bottom-color: var(--km-gold) !important;
  box-shadow: 0 1px 0 0 var(--km-gold) !important;
  background: transparent !important;
}

/* ---------- Modal ---------- */
.modal-content{ background: #fff !important; color: var(--km-ink) !important; border: 1px solid var(--km-line) !important; border-radius: var(--km-radius) !important; }
.modal-header, .modal-footer{ border-color: var(--km-line) !important; }
.btn-close{ filter: none; }

/* ---------- Toast ---------- */
.toast-koy-yellow{
  background: linear-gradient(135deg, var(--km-yellow), var(--km-gold-2)) !important;
  color: #111 !important;
  border: 1px solid var(--km-gold) !important;
}

/* ---------- Login sayfası ---------- */
.brand-circle{
  width:72px; height:72px; border-radius:50%;
  background: linear-gradient(135deg, var(--km-yellow), var(--km-gold-2));
  color:#111;
  box-shadow: 0 10px 26px rgba(132,146,130,.35);
}
.card.shadow-sm.border-0{
  background: #fff !important;
  border: 1px solid var(--km-line) !important;
  border-radius: var(--km-radius) !important;
  box-shadow: var(--km-shadow-2) !important;
}
.link-secondary{ color: var(--km-gold-3) !important; }
.link-secondary:hover{ color: var(--km-gold) !important; }

/* ---------- Documents grid ---------- */
.agent-card{
  background: #fff !important;
  border: 1px solid var(--km-line) !important;
  border-radius: var(--km-radius) !important;
  box-shadow: var(--km-shadow-1) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.agent-card:hover{
  transform: translateY(-4px);
  border-color: var(--km-gold) !important;
  box-shadow: 0 14px 34px rgba(132,146,130,.20), 0 6px 20px rgba(45,55,40,.10) !important;
}
.agent-card img.agent-photo{ border-color: var(--km-gold) !important; box-shadow: 0 0 0 4px rgba(132,146,130,.15); }
.agent-card .agent-name{ color: var(--km-ink) !important; font-family: var(--font-serif); font-size:1.15rem; letter-spacing:1px; }

/* ---------- Yardımcı ---------- */
.km-hairline{ height:1px; background: linear-gradient(90deg, transparent, var(--km-gold), transparent); border:0; opacity:.9; margin: 40px auto; max-width: 240px; }

/* ---------- Alerts & lists ---------- */
.list-group-item{ background: transparent !important; }
.alert-danger{ background: rgba(220, 53, 69, .08) !important; color: #a11f2d !important; border-color: rgba(220,53,69,.25) !important; }

/* Featured ilanlar container spacing */
.km-featured-wrap{ padding-top: 30px; }
main.flex-fill.container.my-4{ z-index: 2; }

/* Anasayfa başlık blokları — arkadaki fotoğraf değişken tonlu olduğu için
   sadece halo yetmiyordu; hero-search kutusuyla aynı opaklıkta cam panel eklendi. */
.km-featured-wrap .text-center.mb-4,
.text-center.mb-4.mt-5,
.km-map-section .text-center.mb-4{
  background: rgba(24, 91, 128, 0.05);
  border: 1px solid rgba(24,91,128,.35);
  border-radius: var(--km-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
  padding: 24px 20px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.km-featured-wrap .text-center.mb-4:hover,
.text-center.mb-4.mt-5:hover,
.km-map-section .text-center.mb-4:hover{
  background: rgba(24, 91, 128, 0.14);
  border-color: rgba(24,91,128,.5);
  box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
.km-featured-wrap .text-center.mb-4 .section-eyebrow, .km-featured-wrap .text-center.mb-4 .km-hero-tagline, .km-featured-wrap .text-center.mb-4 .text-muted,
.text-center.mb-4.mt-5 .section-eyebrow, .text-center.mb-4.mt-5 .km-hero-tagline, .text-center.mb-4.mt-5 .text-muted,
.km-map-section .text-center.mb-4 .section-eyebrow, .km-map-section .text-center.mb-4 .km-hero-tagline, .km-map-section .text-center.mb-4 .text-muted{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.6) !important;
}
/* Kutu içindeki başlıklar (h1/h2) siyah */
.km-featured-wrap .text-center.mb-4 h1, .km-featured-wrap .text-center.mb-4 h2,
.text-center.mb-4.mt-5 h1, .text-center.mb-4.mt-5 h2,
.km-map-section .text-center.mb-4 h1, .km-map-section .text-center.mb-4 h2{
  color: #000 !important;
  text-shadow: none !important;
}
.text-muted, small.text-muted{ color: var(--km-muted) !important; text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.7), 0 0 22px rgba(255,255,255,.5); }
.under-header-mb-5{ margin-bottom: 0; }

/* ---------- Anasayfa "İlanlarımızı Keşfet" CTA (text-center.mb-4.mt-5 cam kutusunun içinde) ----------
   <992px: butonlar birbirine yakın, satırı ikiye bölüşerek yan yana.
   >=992px: butonlar doğal genişlikte, kutunun sağ/sol köşesine yaslanıyor (space-between). */
.km-cta-row{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin-top: 6px;
}
.km-cta-btn{
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  color: #fff !important;
  text-decoration: none;
  background: rgba(24, 91, 128, 0.35);
  border: 1px solid rgba(24,91,128,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.km-cta-btn:hover, .km-cta-btn:focus-visible{
  background: rgba(24, 91, 128, 0.55);
  border-color: rgba(24,91,128,.8);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  color: #fff !important;
  transform: translateY(-2px);
}
@media (min-width: 992px){
  .km-cta-row{ justify-content: space-between; gap: 24px; }
  .km-cta-btn{ flex: 0 0 auto; min-width: 200px; padding: .85rem 2.5rem; }
}

/* Anasayfa kategori butonları (Daire / Villa-Müstakil / Arsa) — ikon üstte, beyaz çizgili */
.km-cta-btn-icon{
  flex-direction: column;
  gap: .35rem;
  padding: 1rem .75rem;
  border-radius: var(--km-radius);
}
.km-cta-btn-icon span{
  color: #000 !important;
  text-shadow: none;
}
.km-cta-btn-icon i{
  font-size: 1.6rem;
  color: #fff;
}
@media (min-width: 992px){
  .km-cta-row-icons .km-cta-btn-icon{ min-width: 160px; padding: 1.1rem 1.5rem; }
}

/* Site bg root wrapper — arkaplan artık html,body kuralında (layout-hero.png denemesi), burada tekrar ezmesin */

/* =========================================================
   MODERN LIGHTBOX GALLERY
   ========================================================= */

/* Galeri mozaik grid (Detay sayfası) */
.km-gallery-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 8px;
  border-radius: var(--km-radius);
  overflow: hidden;
  position: relative;
}
.km-gallery-grid .km-tile{
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: #E3E7D6;
  transition: transform .3s ease, filter .3s ease;
}
.km-gallery-grid .km-tile img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.1,1);
}
.km-gallery-grid .km-tile:hover img{ transform: scale(1.06); filter: brightness(1.02); }
.km-gallery-grid .km-tile::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.25) 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.km-gallery-grid .km-tile:hover::after{ opacity: 1; }
.km-gallery-grid .km-tile-main{
  grid-row: 1 / span 2;
  grid-column: 1;
  height: 448px;
}
.km-gallery-grid .km-tile-main img{ min-height: 100%; }

.km-gallery-showall{
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 3;
  background: rgba(255,253,246,.95);
  color: var(--km-ink);
  border: 1px solid rgba(132,146,130,.4);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
  transition: all .2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.km-gallery-showall:hover{
  background: linear-gradient(135deg, var(--km-yellow), var(--km-gold-2));
  border-color: var(--km-gold);
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(132,146,130,.35);
}
.km-gallery-showall i{ color: var(--km-gold-3); }
.km-gallery-showall:hover i{ color: #111; }

/* Küçük ekran mozaik */
@media (max-width: 767.98px){
  .km-gallery-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 100px;
    gap: 6px;
  }
  .km-gallery-grid .km-tile-main{ grid-column: 1 / span 2; grid-row: 1; height: 200px; }
  .km-gallery-grid .km-tile:nth-child(4),
  .km-gallery-grid .km-tile:nth-child(5){ display: none; }
  .km-gallery-showall{ right: 10px; bottom: 10px; padding: 8px 12px; font-size: .75rem; }
}

/* ---------- LIGHTBOX ---------- */
.km-lightbox{
  position: fixed; inset: 0;
  background: rgba(10, 8, 5, 0);
  display: none;
  z-index: 10100;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: background .35s cubic-bezier(.2,.7,.1,1);
}
.km-lightbox[data-open="true"]{
  display: flex;
  background: rgba(10, 8, 5, .98);
}
.km-lightbox[data-open="true"] .km-lb-stage{ animation: kmLightboxIn .45s cubic-bezier(.2,.7,.1,1) both; }

@keyframes kmLightboxIn{
  from{ transform: scale(.92); opacity: 0; }
  to  { transform: scale(1);   opacity: 1; }
}

.km-lb-stage{
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Görsel taşıyıcı */
.km-lb-viewport{
  position: relative;
  width: 92%;
  max-width: 1400px;
  height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.km-lb-slide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .45s cubic-bezier(.2,.7,.1,1), transform .45s cubic-bezier(.2,.7,.1,1);
  pointer-events: none;
}
.km-lb-slide.is-active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.km-lb-slide img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  transition: transform .3s cubic-bezier(.2,.7,.1,1);
}
.km-lb-slide.is-zoomed img{ cursor: zoom-out; }

/* Kontrol tuşları */
.km-lb-btn{
  position: absolute;
  z-index: 5;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20, 16, 10, .55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  backdrop-filter: blur(8px);
  transition: all .25s cubic-bezier(.2,.7,.1,1);
}
.km-lb-btn:hover{
  background: linear-gradient(135deg, var(--km-yellow), var(--km-gold-2));
  border-color: var(--km-gold);
  color: #111;
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(132,146,130,.5);
}
.km-lb-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.km-lb-next{ right: 20px; top: 50%; transform: translateY(-50%); }
.km-lb-prev:hover{ transform: translateY(-50%) scale(1.08); }
.km-lb-next:hover{ transform: translateY(-50%) scale(1.08); }
.km-lb-close{ top: 20px; right: 20px; }
.km-lb-zoom{ top: 20px; right: 84px; }

/* Üst bilgi (sayaç + başlık) */
.km-lb-topbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 22px 96px 22px 30px;
  z-index: 4;
  color: rgba(255,255,255,.9);
  font-family: var(--font-serif);
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 100%);
  pointer-events: none;
}
.km-lb-title{ font-size: 1.05rem; letter-spacing: .5px; margin: 0; }
.km-lb-counter{
  display: inline-block;
  margin-top: 6px;
  color: var(--km-gold-2);
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
}

/* Alt thumbnail şeridi */
.km-lb-thumbs{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%);
  overflow-x: auto;
  scrollbar-width: none;
}
.km-lb-thumbs::-webkit-scrollbar{ display: none; }
.km-lb-thumb{
  flex: 0 0 auto;
  width: 76px; height: 54px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: opacity .25s, transform .25s, border-color .25s;
}
.km-lb-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.km-lb-thumb:hover{ opacity: .85; transform: translateY(-2px); }
.km-lb-thumb.is-active{
  opacity: 1;
  border-color: var(--km-gold);
  box-shadow: 0 0 0 2px rgba(132,146,130,.3);
}

@media (max-width: 767.98px){
  .km-lb-viewport{ width: 100%; height: calc(100vh - 180px); }
  .km-lb-topbar{ padding: 16px 70px 16px 20px; }
  .km-lb-btn{ width: 44px; height: 44px; font-size: 1.1rem; }
  .km-lb-prev{ left: 10px; }
  .km-lb-next{ right: 10px; }
  .km-lb-close{ top: 12px; right: 12px; }
  .km-lb-zoom{ top: 12px; right: 66px; }
  .km-lb-thumb{ width: 60px; height: 44px; }
  .km-lb-thumbs{ padding: 10px 12px 16px; }
}

/* Body scroll lock */
body.km-lb-open{ overflow: hidden; }
/* Lightbox açıkken üst gezinme çubuğu ve WhatsApp benzeri sabit öğeleri gizle */
body.km-lb-open .site-topbar,
body.km-lb-open .wa-float,
body.km-lb-open .whatsapp-float{ visibility: hidden; }

/* Yönetim paneli zemini: düz adaçayı rengi yerine hero-gomec.png — okunabilirlik
   için üzerine hafif adaçayı tonlu wash bindirilmiş. body::after katmanı burada
   işe yaramıyor çünkü body'nin kendi (opak) arkaplanı, konumlanmamış bir kutu
   olarak aynı (kök) yığılma bağlamında ::after'ın negatif z-index katmanından
   SONRA boyanıyor ve onu tamamen örtüyor — bu yüzden görsel doğrudan body'nin
   kendi arkaplanına veriliyor (.hero-parallax'taki yöntemle aynı mantık). */
body.bg-manage{
  background:
    linear-gradient(180deg, rgba(205,212,194,.55) 0%, rgba(205,212,194,.55) 100%),
    url('/Images/hero-gomec.png') !important;
  background-size: cover !important;
  background-position: center 20% !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--km-ink) !important;
}
@media (max-width: 768px){
  /* background-attachment:fixed mobilde (özellikle iOS Safari) güvenilir
     çalışmadığı için scroll'a düşürülüyor — .hero-parallax'taki gibi. */
  body.bg-manage{ background-attachment: scroll !important; }
}
.manage-topbar{
  background: linear-gradient(180deg, #FFFDF6 0%, #E3E7D6 100%) !important;
  border-bottom: 1px solid var(--km-line) !important;
}
.mnav{
  background: linear-gradient(180deg, #FFFDF6 0%, var(--km-cream) 100%) !important;
  border: 1px solid var(--km-line) !important;
}
.mnav::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 400px at 10% 0%, rgba(132,146,130,.18), transparent 60%);
  pointer-events:none;
  border-radius: inherit;
}
.manage-pagehead{
  background: #fff !important;
  border: 1px solid var(--km-line) !important;
}
.manage-card{
  background: #fff !important;
  border: 1px solid var(--km-line) !important;
}

/* ---------- Yukarı çık butonu (blur/cam) — mobil + masaüstü ---------- */
.back-to-top{
  display: flex;
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 1045;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--km-ink);
  font-size: 1.2rem;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top:hover{ background: rgba(255,255,255,.5); }
.back-to-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:active{ background: rgba(255,255,255,.5); }

/* ---------- WhatsApp float butonu ---------- */
.whatsapp-float{
  display: flex;
  position: fixed;
  left: 16px;
  bottom: 20px;
  z-index: 1045;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  background: #25D366;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.whatsapp-float:hover{ background: #1DA851; color: #fff; transform: scale(1.06); }
.whatsapp-float:active{ transform: scale(.96); }