/* ============================= */
/* GLOBAL RESET & BODY AYARLARI */
/* ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Tahoma, Geneva, sans-serif;
}

body {
  display: flex;
  justify-content: center;
   background-color: #c8ced6;
  /* body padding kaldırıldı, boşluklar .app ve modal üzerinden kontrol edilecek */
}

/* ============================= */
/* TELEFON KONTEYNERİ */
/* ============================= */
.app {
  background-color: #f5f5f5;
  width: 350px;
  max-width: 100%;
  margin: 32px auto; /* body padding yerine buradan boşluk verdik */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ============================= */
/* HEADER */
/* ============================= */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 350px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Logo */
.site-logo {
  position: fixed;
  left: 80px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 🧭 Yol Tarifi Butonu */
.map-marker {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: #8b5c18;

  /* ✅ KART ZEMİNİ İLE AYNI */
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.08),
    rgba(255, 215, 0, 0.02)
  );

  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
  transition: all .2s ease;
}

.map-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.map-marker:hover {
  color: #b88b29;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.map-marker:active {
  transform: scale(0.96);
}




.filter-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
}

/* ============================= */
/* LİSTE VE KART */
/* ============================= */
.listings {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 60px; /* header yüksekliğiyle uyumlu */
}

.card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: 150px;            /* istediğin yükseklik */
  background-size: cover;    /* tüm alanı doldurur, kırpma yapar */
  background-position: center; 
  border-radius: 6px 6px 0 0;
}

/* HTML örnek:
<div class="card-image" style="background-image: url('resim.jpg')"></div>
*/


.card-body {
  padding: 8px;
}

.card-body h3 {
  font-size: 14px;
}

.location {
  font-size: 12px;
  color: blue;
}

#modalLocation {
  font-size: 13px;
  color: #555;
  margin: 6px 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  color: #e91e63;
  font-weight: bold;
  font-size: 16px;
  margin-top: 6px;
}

.card .detail-btn {
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
  display: block;
  width: 60%;
  margin: 10px auto 0 auto;
  text-align: center;
  transition: background 0.3s;
}

.card .detail-btn:hover {
  background-color: #1976d2;
}

/* İlan Kategorileri başlığı */
.category-title-bar {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c5aa0;
  font-style: italic;
  text-align: center;
  margin: 14px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #d6e0f0;
  text-shadow: 0 1px 2px rgba(44, 90, 160, 0.35);
}

/* ikon biraz daha yumuşak */
.category-title-bar span {
  margin-right: 6px;
}


/* Alt Güncelleme */
.update-date {
  font-size: 0.80rem;
  color: #666;
  text-align: center;
  font-style: italic;
  margin: 12px 0 6px;
  padding-top: 6px;
  border-top: 1px solid #eee;
}

/* ============================= */
/* MODAL */
/* ============================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px; /* biraz daha kompakt */
}

.modal {
  width: 85%;
  max-width: 295px; /* daha küçük ve kompakt */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  animation: fadeUp .25s ease;
  padding: 10px; /* iç boşluk biraz azaltıldı */
}

.modal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-body {
  padding: 8px;
}

@media (max-width: 400px) {
  .modal {
    width: 90%;
    max-width: 260px; /* mobilde de aynı kompakt boyut */
  }
}

.modal-price {
  font-size: 15px;
  font-weight: 700;
  color: #2e7d32;
  margin: 8px 0;
}

.modal-body h3 {
  font-size: 15px;
}

.features {
  list-style: none;
  display: block;
  font-size: 12px;
  color: #444;
  margin-bottom: 12px;

  max-height: 140px;
  overflow-y: auto;

  /* Mobil kayma yumuşatma */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  /* Firefox için */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.features li {
  position: relative;       /* span için referans noktası */
}

/* Değerleri ortadan başlatıp sağa kaydır */
.features li .value-colored {
  position: absolute;
  left: 50%;               /* ortadan başlasın */
  transform: translateX(0); /* tam ortadan değil, biraz sağa doğru */
  white-space: nowrap;
  text-align: left;
}


/* Chrome, Edge, Safari */
.features::-webkit-scrollbar {
  width: 6px;
}

.features::-webkit-scrollbar-track {
  background: transparent;
}

.features::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.features::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 📱 Mobil için biraz daha optimize */
@media (max-width: 768px) {
  .features {
    max-height: 160px; /* mobilde biraz daha rahat alan */
    font-size: 12px;
  }

  .features::-webkit-scrollbar {
    width: 4px; /* mobilde daha ince */
  }
}
body.modal-open {
  overflow: hidden;
}

body.modal-open .listings {
  overflow: hidden;
  pointer-events: none;
}

.modal,
.modal-overlay {
  overscroll-behavior: contain;
}

.features li {
  background: #eee;
  padding: 4px 8px;
  border-radius: 4px;
   margin-bottom: 5px;   /* 👈 satırlar arası boşluk */
}

.modal-actions {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

.modal-actions a {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  border-radius: 1px;
  font-size: 11px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 480px) {
  .modal-actions a {
    font-size: 11px;   /* küçük ekran için azaltıldı */
  }
}


.call-btn {
  background: #2ecc71;
  font-weight: 600;
}

.call-btn:hover {
  background-color: #43a047;
}

.parcel-btn {
  background-color: #ff9800;
}

.parcel-btn:hover {
  background-color: #fb8c00;
}

.close-btn {
  position: absolute;   /* 🔥 ÖNEMLİ */
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 50;           /* slider ve resmin üstünde */
}


.close-btn:hover {
  background: rgba(0,0,0,0.7);
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================= */
/* SLIDER */
/* ============================= */

.modal .slider {
  width: 100%;
  height: 42vh;        /* 📱 telefonda uzun */
  max-height: 320px;  /* 🖥️ PC'de kontrolden çıkmasın */
  overflow: hidden;
}


.modal .slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* boşluk yok */
  display: block;
}


.slider-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 16px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.slider-btn.left { left: 12px; }
.slider-btn.right { right: 12px; } /* mobil uyumlu */

.slider-btn:active {
  transform: translateY(-50%) scale(0.9);
}

/* ============================= */
.category-bar {
  position: fixed;
  top: 70px; /* header height */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 350px;
  background: #fff;
  z-index: 99;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

/* 🔽 KATEGORİ KARTLARI – KÜÇÜK & ŞIK */
.category-grid {
  padding: 12px 10px;
  gap: 12px;
}

/* Kategori kartı içindeki başlık yazısı */
.category-card {
  display: block;  
  font-size: 16px;             /* biraz daha okunaklı */
  font-weight: 700;
  color: #3b3b3b;
  text-align: left;
  text-indent: 20px;      /* ✅ kesin soldan 20px içeriden başlatır */
  letter-spacing: 0.4px;
  padding: 14px 12px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.08),
    rgba(255, 215, 0, 0.02)
  );
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Hover efekti */
.category-card:hover {
  color: #b88b29;             /* yazı gold */
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Mobil dokunma */
.category-card:active {
  transform: scale(0.97);
}

/* Aktif kategori */
.category-card.active {
  color: #b88b29;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.35),
    0 0 12px rgba(255, 215, 0, 0.4);
}

.category-card {
  position: relative;
}

.category-card .count {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 12px;
  color: #3b3b3b;
  opacity: 0.7;
}


/* Küçük ekranlar */
@media (max-width: 480px) {
  .category-card {
    font-size: 16px;
    padding: 14px 10px;
  }
}

/* ✨ AKTİF KATEGORİ BAŞLIK GLOW */
.category-title {
  font-size: 14px;
  font-weight: 600;
  color: #b88b29;
  padding: 6px 14px;
  border-radius: 999px; /* pill görünüm */
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.12),
    rgba(255, 215, 0, 0.04)
  );
  letter-spacing: 0.4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.category-title.active {
  color: #d4af37;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.4),
    0 0 10px rgba(255, 215, 0, 0.45);
}

/* 🔽 DENİZ MAVİSİ – ŞIK CHEVRON */
.category-card {
  padding-right: 56px; /* sayı + chevron */
}

.category-card::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;

  border-right: 2px solid #2f7f8f;  /* deniz mavisi */
  border-bottom: 2px solid #2f7f8f;

  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;

  /* hafif gölge / glow */
  filter: drop-shadow(0 1px 2px rgba(47,127,143,0.5));
}


.back-btn {
  font-size: 13px;          /* biraz küçük */
  font-style: italic;
  color: blue;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  font-weight: 600;
}

/* Hover (desktop) */
.back-btn:hover {
  color: #b88b29;
  transform: translateX(-3px);
}

/* Ok animasyonu */
.back-btn::before {
  content: "←";
  margin-right: 6px;
  display: inline-block;
  transition: transform 0.25s ease;
}

.back-btn:hover::before {
  transform: translateX(-3px);
}

/* Mobil dokunma hissi */
.back-btn:active {
  transform: scale(0.95);
}

.card {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.card.show {
  opacity: 1;
  transform: translateY(0);
}

.value-colored {
  color: blue;   /* senin istediğin renk */
  font-weight: 400;  /* opsiyonel */
}

/* =========================
       INTRO / GİRİŞ EKRANI
    ========================= */
    .intro-screen {
      position: fixed;
      inset: 0;
      background: #22262c;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .intro-content {
      text-align: center;
      animation: fadeIn 1s ease forwards;
    }

    .intro-logo {
		width: 300px;          /* 🔥 Burayı büyüttük */
		max-width: 90vw;      /* Mobilde taşmasın */
		margin: 0 auto 24px;
		animation: glow 2.5s ease-in-out infinite;
		
		transform: translateY(-40px);   /* 🔼 KESİN yukarı alır */
	}


    .intro-logo svg {
      width: 100%;
      height: auto;
      display: block;
    }

  .enter-btn {
	  padding: 6px 16px;
	  border: none;
	  border-radius: 999px;
	  font-size: 14px;
	  font-weight: 700;
	  cursor: pointer;
	  color: #111;
	  background: linear-gradient(135deg, #d4af37, #fff1a8);
	  box-shadow: 0 4px 12px rgba(212,175,55,0.45);
	  transition: all .2s ease;
	  display: block;
	  margin: 10px auto 0 auto; /* Alt boşluk + ortalama */
	}

	.enter-btn:hover {
	  transform: translateY(-2px);
	  box-shadow: 0 6px 16px rgba(212,175,55,0.65);
	}

	.enter-btn:active {
	  transform: scale(0.96);
	}

    @keyframes glow {
      0%   { filter: drop-shadow(0 0 4px rgba(184,139,41,0.4)); }
      50%  { filter: drop-shadow(0 0 14px rgba(212,175,55,0.9)); }
      100% { filter: drop-shadow(0 0 4px rgba(184,139,41,0.4)); }
    }

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


.back-wrap{
  display: flex;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 4px;
}

.back-btn::before,
.back-btn::after {
  content: none !important;
}



#introSlogan {
  position: absolute;
  left: 50%;
  top: 50%;

  max-width: 90vw;
  overflow: hidden;
  white-space: nowrap;

  font-size: clamp(13px, 4vw, 16px);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #b88b29;
  text-align: center;

  opacity: 0;
  filter: blur(3px);
  will-change: opacity, filter, transform;
  backface-visibility: hidden;

  /* ⚠️ transform artık ANİMASYONDA yönetilecek */
}


/* NORMAL SLOGAN */
#introSlogan {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);

  max-width: 90vw;
  white-space: nowrap;
  text-align: center;

  font-size: clamp(13px, 4vw, 16px);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #b88b29;

  opacity: 0;
  filter: blur(0);
  will-change: opacity, filter, transform;
}

/* NORMAL */
#introSlogan.animate {
  animation: sloganNormal 7s ease-in-out forwards;
}

@keyframes sloganNormal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ÖZEL: büyüyerek gelir → sonda küçülerek kaybolur */
#introSlogan.animate.special {
  animation: sloganSpecial 7s ease-in-out forwards;
}

@keyframes sloganSpecial {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }

  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.10); /* 👈 biraz daha büyüdü */
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.10);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);  /* küçülerek kaybolur */
  }
}


/* Vurgu */
#introSlogan .slogan-highlight {
  color: #ffffff;
  font-weight: 700;
}

/* Dropdown kapsayıcı */
.container {
  position: relative;
  display: inline-block;
  margin: 30px auto; /* ekrana ortalamak için */
}

/* Dropdown kutusu */
.dropdown {
  display: none;
  position: absolute;
  top: 102%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  min-width: 130px;

  max-height: 120px;        /* ✅ EKLENDİ */
  overflow-y: auto;         /* ✅ SCROLL */
  overflow-x: hidden;       /* yatay taşma yok */

  z-index: 1000;
  transition: all 0.2s ease;
}


/* Açıldığında animasyon */
.dropdown.show {
  display: block;
  animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Dropdown öğeleri */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;                  /* ikon – yazı arası */
  padding: 8px 12px 8px 20px; /* 👈 soldan +10px (12 → 20) */
  cursor: pointer;
  font-size: 12px;
  color: #111;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
  text-align: left;
  font-family: Tahoma;
}

/* ikon */
.dropdown-item .icon {
  font-size: 16px;
  width: 20px;              /* ikonlar hizalı dursun */
  text-align: center;
}

/* hover */
.dropdown-item:hover {
  background: linear-gradient(135deg, #d4af37, #fff1a8);
  padding-left: 22px; /* sadece +2px */
}

/* Mobilde yumuşak scroll */
.dropdown {
  -webkit-overflow-scrolling: touch; /* iOS smooth */
  overscroll-behavior: contain;      /* sayfa scroll’u kilitle */
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}

/* Webkit (Chrome, Safari, Android) */
.dropdown::-webkit-scrollbar {
  width: 4px;
}

.dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .dropdown {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    top: auto;

    width: 70vw;          /* 🔑 genişliği KİLİTLE */
    max-width: 320px;     /* 🔑 masaüstüne kaçmasın */
    box-sizing: border-box;

    max-height: 60vh;
  }

  .dropdown-item {
    padding: 12px 14px 12px 22px;
    font-size: 13px;
    box-sizing: border-box;
  }

  .dropdown-close {
    right: 8px;
    top: 6px;
  }
}

.card-title {
  display: flex;
  align-items: center;
  margin: 0;
}

.card-id {
  margin-left: auto;   /* sağa yapıştırır */
  font-size: 11px;
  color: #777;
  white-space: nowrap;
}


.street-btn {
  background: #222;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.street-btn:hover {
  background: #000;
}



/* Dropdown'a X için üst boşluk aç */
.dropdown {
  padding-top: 32px;   /* 👈 ASIL BOŞLUK BURADA */
}

/* X */
.dropdown-close {
  position: absolute;
  top: 8px;            /* padding-top içinde kalsın */
  right: 8px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #000;
  line-height: 1;
}

.dropdown-close:hover {
  color: #ff4d4d;
}

/* =====================================================
   MODAL FEATURES ALANI
   ===================================================== */

#modalFeatures {

  display: none;              /* Başlangıçta gizli. JS ile açılıyor */

  max-height: 200px;          /* Sabit yükseklik. Bu değerden sonra scroll başlar */
  overflow-y: auto;           /* Dikey scroll aktif */
  overflow-x: hidden;         /* Yatay scroll kapalı */

  width: 100%;                /* Modal genişliği kadar */
  box-sizing: border-box;     /* Padding genişliğe dahil */

  padding: 10px;              /* İç boşluk */
  margin-top: 5px;            /* Üst boşluk */

  border: 1px solid #ccc;     /* Çerçeve */
  border-radius: 6px;         /* Yuvarlak köşe */
  background: #f9f9f9;        /* Açık gri arka plan */

  font-size: 12px;            /* Yazı boyutu */
  line-height: 1.2;           /* Satır aralığı */

  word-wrap: break-word;      /* Uzun kelimeler taşmaz, kırılır */

  scrollbar-width: thin;      /* Firefox için ince scrollbar */
  scrollbar-color: rgba(0,0,0,0.3) transparent; /* Firefox renk */
}

#modalFeatures {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(1px);   /* 20px aşağıdan başlasın */
  opacity: 0;
}

#modalFeatures.show {
  transform: translateY(0);      /* Normal konuma gelsin */
  opacity: 1;
}

/* =====================================================
   HER BİR ÖZELLİK SATIRI
   ===================================================== */

.feature-line {
  position: relative;         /* İkon için referans */
  padding-left: 20px;         /* Sol boşluk (ikon alanı) */
  margin-bottom: 6px;         /* Satırlar arası boşluk */
}


/* ✔ İKONU */

.feature-line::before {
  content: "✔";               /* Başına tik işareti */
  position: absolute;
  left: 0;
  color: #16a34a;              /* Yeşil renk */
  font-weight: bold;
}


/* =====================================================
   DETAY BUTONU
   ===================================================== */

#detailsBtn {
  display: none;              /* JS ile gösteriliyor */
  width: 100%;                /* Modal genişliği kadar */
  box-sizing: border-box;
  padding: 4px;
  margin-top: 0px;
  font-size: 12px;
  background-color: #007bff;  /* Mavi arka plan */
  color: #fff;                /* Beyaz yazı */
  border: none;
  border-radius: 4px;
  cursor: pointer;            /* Hover’da el işareti */
  position: sticky;
  top: 0;          /* Scroll ederken altta sabit */
  z-index: 20;
}


/* Hover efekti */

#detailsBtn:hover {
  background-color: #0056b3;  /* Daha koyu mavi */
}


/* =====================================================
   SCROLLBAR (Chrome / Edge / Safari)
   ===================================================== */

#modalFeatures::-webkit-scrollbar {
  width: 5px;                 /* Scroll genişliği */
}

#modalFeatures::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 20px;
}

#modalFeatures::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.45);
}


.button-container {
  display: flex;        /* Butonları yan yana sıralar */
  gap: 10px;            /* Butonlar arası boşluk */
  margin-top: 10px;     /* Üstten boşluk */
  position: sticky;     /* Scroll ederken container üstte sabit */
  top: 0;               /* Üstten yapışacak */
  background-color: #fff; /* Sticky olduğunda arka plan */
  padding: 10px 0;      /* İç boşluk */
  z-index: 100;         /* Diğer öğelerin üstünde */
}
#mapsBtn {
  width: 100%;                /* Modal genişliği kadar */
  box-sizing: border-box;
  padding: 4px;
  margin-top: 0px;
  font-size: 12px;
  background-color: #28a745;  /* Farklı renk: yeşil */
  color: #fff;                /* Beyaz yazı */
  border: none;
  border-radius: 4px;
  cursor: pointer;            /* Hover’da el işareti */
  position: sticky;
  top: 0;                     /* Scroll ederken üstte sabit */
  z-index: 20;
}

/* Hover efekti */

#mapsBtn:hover {
  background-color: #218838; /* Hover: daha koyu yeşil */
}