/* Genel Reset */
* { margin:0; padding:0; box-sizing:border-box; }

html, body { height:100%; font-family: 'Segoe UI', sans-serif; color:#fff; }

/* Arka Plan */
.background { background: url("assets/nemrut.jpg") no-repeat center center/cover; position:fixed; inset:0; z-index:-2; filter:brightness(0.4); }
.background-360 { position:fixed; inset:0; z-index:-2; }

/* Ortak overlay */
.overlay { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.5rem; position:relative; z-index:1; }

.title { font-size:2rem; font-weight:700; margin-bottom:.3rem; text-shadow:0 3px 10px rgba(0,0,0,.7); }
.subtitle { font-size:1rem; margin-bottom:1.5rem; color:#1609098f; }

/* Menü kartları */
.menu { display:flex; flex-direction:column; gap:.8rem; width:100%; max-width:400px; }
.card { background: rgba(255,255,255,0.15); padding:1rem; border-radius:12px; font-size:1.1rem; color:#fff; text-decoration:none; backdrop-filter: blur(5px); transition:0.3s; display:flex; align-items:center; justify-content:center; gap:.6rem; }
.card:hover { background: rgba(255,255,255,0.3); transform:translateY(-4px); }
.special { background: linear-gradient(135deg,#ff6b6b,#ffcc70); font-weight:700; }
.special:hover { background: linear-gradient(135deg,#ff4040,#ffaa30); }

@media(min-width:768px){ .title{font-size:3rem} .subtitle{font-size:1.3rem} .menu{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:800px} }

/* Cards / containers */
.container, .grid-container { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:2rem; width:100%; max-width:1200px; }
.grid-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

.artifact-card { background:rgba(0,0,0,0.6); color:#ebdbdb; border-radius:16px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.3); transition:transform .3s ease, box-shadow .3s ease; flex:1 1 calc(25% - 40px); max-width:calc(25% - 40px); text-align:center; border:2px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px); }
.artifact-card img{ width:100%; height:auto; display:block }
.artifact-card .info{ background:rgba(0,0,0,0.88); padding:15px; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.artifact-card .info h3{ margin:0 0 10px 0; font-size:20px; font-weight:700 }
.artifact-card:hover{ transform:scale(1.05); box-shadow:0 0 25px rgba(255, 255, 255, 0.075); }

@media(max-width:1024px){ .artifact-card{ flex:1 1 calc(33.33% - 40px); max-width:calc(33.33% - 40px) } }
@media(max-width:768px){ .artifact-card{ flex:1 1 calc(50% - 40px); max-width:calc(50% - 40px) } }
@media(max-width:480px){ .artifact-card{ flex:1 1 100%; max-width:100% } }

/* Detail pages background */
body.eserler, body.hayvanlar, body.bitkiler, body.detail-page { background:url("assets/nemrut.jpg") no-repeat center center/cover; background-attachment:fixed; background-size:cover; color:#faf6f6; position:relative; min-height:100vh }
body.eserler::before, body.hayvanlar::before, body.bitkiler::before, body.detail-page::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:0 }

/* Cards inside details */
.animal-card, .plant-card, .artifact-card { position:relative; z-index:1; background:rgba(255,255,255,0.08); border-radius:16px; padding:2rem; max-width:700px; width:100%; text-align:center; backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(0,0,0,0.5); animation:fadeInUp 1s ease forwards }
.animal-card h1, .plant-card h1, .artifact-card h1 { font-size:2rem; margin-bottom:1rem; text-shadow:0 3px 10px rgba(0,0,0,.7) }
.animal-card img, .plant-card img, .artifact-card img { width:100%; height:auto; border-radius:12px; margin-bottom:1.5rem; box-shadow:0 3px 10px rgba(0,0,0,.6) }
.animal-info, .plant-info, .artifact-info { font-size:1.05rem; line-height:1.7; color:#f5f5f5; margin-bottom:1.5rem }

/* Buttons & back */
button{ background:linear-gradient(135deg,#ff6b6b,#ffcc70); color:#000000; border:none; padding:.7rem 1.5rem; border-radius:8px; cursor:pointer; font-size:1rem; font-weight:700; transition:.3s }
button:hover{ transform:scale(1.05) }
.back-btn{ 
  position: fixed;
  top: 70px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(25, 118, 210, 0.9);
  padding: 8px 14px;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  transition: all .2s;
  font-size: 0.9em;
  font-weight: bold;
  z-index: 999;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.back-btn:hover{ 
  background: rgba(25, 118, 210, 1);
  transform: translateX(-3px);
}

/* Animations */
@keyframes fadeInUp{ 0%{ opacity:0; transform:translateY(40px) } 100%{ opacity:1; transform:translateY(0) } }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.overlay h1{ animation:fadeInUp 1s ease forwards }
.container .artifact-card{ opacity:0; animation:fadeInUp 1s ease forwards; animation-delay:calc(var(--i) * .2s) }
.container a:nth-child(1){ --i:1 } .container a:nth-child(2){ --i:2 } .container a:nth-child(3){ --i:3 } .container a:nth-child(4){ --i:4 } .container a:nth-child(5){ --i:5 }

/* Fancy animations */
@keyframes floatUpDown {
	0% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}
@keyframes popIn {
	0% { opacity: 0; transform: scale(.92) translateY(10px); }
	60% { opacity: 1; transform: scale(1.02) translateY(-6px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
@keyframes slideInTop { 0% { transform: translateY(-20px); opacity:0 } 100% { transform: translateY(0); opacity:1 } }

/* LANDSCAPE MODE BUTTON - Telefonda Portrait'te Görün */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.landscape-btn {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #FF6B6B 0%, #FF4040 100%);
  color: white;
  border: none;
  padding: 20px 40px;
  border-radius: 20px;
  font-size: 1.2em;
  font-weight: 700;
  z-index: 2000;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
  animation: pulse 1.5s ease-in-out infinite;
  transition: all 0.3s ease;
}

.landscape-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
}

/* Portrait Mode'da Göster */
@media (orientation: portrait) and (max-width: 768px) {
  .landscape-btn {
    display: block;
  }
}

/* Landscape'te Gizle */
@media (orientation: landscape) and (max-width: 1024px) {
  .landscape-btn {
    display: none !important;
  }
}

/* Apply to hero title/subtitle */
.title { animation: floatUpDown 6s ease-in-out infinite; }
.subtitle { animation: fadeIn 1.5s ease forwards; }

/* EMOJI ANİMASYONLARI */
@keyframes emojiSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(360deg) scale(1.15); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes emojiBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-15px); }
  50% { transform: translateY(0); }
}

@keyframes emojiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes emojiWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.emoji {
  display: inline-block;
  margin: 0 3px;
}

/* Başlıklardaki emoji'ler */
h1 .emoji, h2 .emoji, .header-section h1 .emoji {
  animation: emojiSpin 3s ease-in-out infinite;
}

/* Kategori başlıklarındaki emoji'ler */
.category-title .emoji {
  animation: emojiFloat 2.5s ease-in-out infinite;
}

/* Kart başlıklarındaki emoji'ler */
.plant-card h3 .emoji, 
.animal-card h3 .emoji, 
.bird-card h3 .emoji,
.activity-card h3 .emoji,
.astro-event .event-icon {
  animation: emojiBounce 2s ease-in-out infinite;
}

/* Icon animasyonları */
.activity-icon {
  animation: emojiFloat 2.5s ease-in-out infinite;
}

.event-icon {
  animation: emojiBounce 2s ease-in-out infinite;
}

/* Card pop effect on load */
.container .artifact-card { opacity:0; animation: popIn .9s cubic-bezier(.2,.9,.3,1) forwards; }
.container .artifact-card[data-delay] { animation-delay: var(--delay); }

/* Popup shimmer for images */
.popup-card img { background: linear-gradient(90deg, rgba(255, 255, 255, 0.068) 25%, rgba(255, 255, 255, 0.096) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }

/* Topbar entrance */
.topbar { animation: slideInTop .6s ease both; }

/* Marker bounce helper (apply via JS by toggling .bounce) */
.leaflet-marker-icon.bounce { animation: floatUpDown .8s ease-in-out 1; }

/* Slight parallax background via transform on scroll container (handled in JS) */
.background.parallax { transform: translateY(0); transition: transform .2s linear; }

/* Smaller adjustments for large detail view */
body.detail-page.large .animal-card, body.detail-page.large .plant-card, body.detail-page.large .artifact-card { border-radius:22px; padding:2.5rem; max-width:900px; width:95%; backdrop-filter:blur(10px); box-shadow:0 6px 30px rgba(0,0,0,.6); transform:scale(1.05) }
body.detail-page.large .animal-card h1, body.detail-page.large .plant-card h1, body.detail-page.large .artifact-card h1 { font-size:2.5rem }
body.detail-page.large .animal-info, body.detail-page.large .plant-info, body.detail-page.large .artifact-info { font-size:1.2rem; line-height:1.9 }

/* Utility */
.hidden{ display:none }


/* Mobil uyumluluk (maks 600px) */
@media (max-width: 600px) {

	/* Genel küçültmeler: yazı, başlıklar */
	.title { font-size: 1.6rem; }
	.subtitle { font-size: 0.95rem; }

	/* Kart konteynerleri: dikey düzen, dar boşluk */
	.container,
	.grid-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		margin-top: 1rem;
		padding: 0 1rem;
		width: 100%;
		max-width: 100%;
	}

	/* Menü kartlarının daha dar görünmesi */
	.menu {
		gap: 0.5rem;
		padding: 0.25rem;
		width: 100%;
		max-width: 420px;
	}

	/* Kartlar tam genişlikte, kenar boşlukları azaltıldı */
	.artifact-card,
	.animal-card,
	.plant-card {
		flex: none;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 1.1rem 0.9rem;
		border-radius: 14px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.45);
		text-align: left; /* mobilde okunabilirlik için sola hizala */
	}

	/* Kart içi başlık ve metin boyutları */
	.animal-card h1,
	.plant-card h1,
	.artifact-card h1 {
		font-size: 1.6rem;
		margin-bottom: 0.75rem;
	}

	.animal-info,
	.plant-info,
	.artifact-info {
		font-size: 1rem;
		line-height: 1.6;
	}

	/* Geri butonu ve genel butonlar için boşluk ayarı */
	.back-btn { margin-top: 0.75rem; display: inline-block; }

	button { padding: 0.6rem 1rem; font-size: 0.95rem; }

	/* Animasyon gecikmelerini mobilde kaldır */
	.container .artifact-card { animation-delay: 0s !important; --delay: 0s; opacity: 1; }

	/* Resimlerin mobilde taşmasını engelle */
	.artifact-card img,
	.animal-card img,
	.plant-card img {
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: cover;
	}

	/* Arka plan parlaklık ve performans için filtre azaltımı (isteğe bağlı) */
	.background,
	body.eserler::before,
	body.hayvanlar::before,
	body.bitkiler::before,
	body.detail-page::before {
		/* küçük ekranlarda ağır filtreleri hafiflet */
		filter: none;
		background-attachment: scroll;
	}
}



/* Automatically applied background from page's main image */
body.bg-from-image {
  background-color: #000; /* fallback */
  position: relative;
  /* background properties applied by JS */
}

/* make sure detail cards are readable */
.detail-page .animal-card, .detail-page .plant-card, .detail-page .card {
  background: rgba(0, 0, 0, 0.507);
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.detail-page .animal-card img, .detail-page .plant-card img{
  max-width:100%;
  height:auto;
  display:block;
  margin: 0 auto 12px;
}
.back-btn { display: inline-block; margin-top: 12px; }

.card.special:nth-child(4) {
  background: linear-gradient(135deg,#e74c3c,#ff6b6b);
  font-weight:700;
}
.card.special:nth-child(4):hover {
  background: linear-gradient(135deg,#c0392b,#e74c3c);
}

/* ==================== 🎨 KATEGORİ RENK VE ŞEKİL SİSTEMİ ==================== */

/* BITKILER - Doygun YEŞİL (WCAG AA: 55 contrast) */
.category-plants, .category-plants-header {
  --category-color: #228B22; /* Orman yeşili - doygun, psikolojik rahatlatıcı */
  --category-light: #2d5016;
  --category-accent: #90EE90;
}

/* HAYVANLAR - Güçlü TURUNCU/KIRMIZI (WCAG AA: 60 contrast) */
.category-animals, .category-animals-header {
  --category-color: #D32F2F; /* Turuncu-kırmızı - dikkat çekici, enerji */
  --category-light: #8b4513;
  --category-accent: #FF6B6B;
}

/* KUŞLAR - Dinamik MAVİ (WCAG AA: 55 contrast) */
.category-birds, .category-birds-header {
  --category-color: #1976D2; /* Parlak mavi - özgürlük, gökyüzü */
  --category-light: #667eea;
  --category-accent: #64B5F6;
}

/* ================ SVG İKON ŞEKİLLERİ ================ */

/* DOLU ŞEKİLLER (Kategori belirtici) */
.icon-plant-filled::before {
  content: "●"; /* Dolu daire - Bitki */
  color: var(--category-color, #228B22);
  font-size: 1.2em;
  font-weight: bold;
}

.icon-animal-filled::before {
  content: "■"; /* Dolu kare - Hayvan */
  color: var(--category-color, #D32F2F);
  font-size: 1.2em;
  font-weight: bold;
}

.icon-bird-filled::before {
  content: "★"; /* Dolu yıldız - Kuş */
  color: var(--category-color, #1976D2);
  font-size: 1.2em;
  font-weight: bold;
}

/* BOŞ ŞEKİLLER (Durum belirtici) */
.icon-plant-outline::before {
  content: "○"; /* Boş daire - Bitki (durum: tehlikede) */
  color: var(--category-color, #228B22);
  font-size: 1.2em;
  opacity: 0.7;
}

.icon-animal-outline::before {
  content: "□"; /* Boş kare - Hayvan (durum: tehlikede) */
  color: var(--category-color, #D32F2F);
  font-size: 1.2em;
  opacity: 0.7;
}

.icon-bird-outline::before {
  content: "☆"; /* Boş yıldız - Kuş (durum: tehlikede) */
  color: var(--category-color, #1976D2);
  font-size: 1.2em;
  opacity: 0.7;
}

/* ================ KORUMA DURUMU RENKLERİ ================ */

/* Endemik (Uyarı renginde) */
.status-endemic {
  background: linear-gradient(135deg, #FFB300 0%, #FFA500 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Tehlike Altında (Kırmızı) */
.status-endangered {
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important;
  color: #FFF !important;
  font-weight: 700 !important;
}

/* Korunuyor (Yeşil) */
.status-protected {
  background: linear-gradient(135deg, #228B22 0%, #1B5E20 100%) !important;
  color: #FFF !important;
  font-weight: 700 !important;
}

/* Endemik + Tehlike (En kritik) */
.status-endemic-endangered {
  background: linear-gradient(135deg, #FF4081 0%, #C2185B 100%) !important;
  color: #FFF !important;
  font-weight: 700 !important;
  box-shadow: 0 0 15px rgba(255, 64, 129, 0.5);
}

/* ================ KART STİLLERİ ================ */

/* Bitki Kartları */
.plant-card, .category-plants {
  --category-color: #228B22;
  border-left: 5px solid var(--category-color);
}

.plant-header {
  background: linear-gradient(135deg, #228B22 0%, #2d5016 100%) !important;
  color: white !important;
}

.plant-content {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.plant-content strong {
  color: #228B22 !important;
  font-weight: 700 !important;
}

/* Hayvan Kartları */
.animal-card, .category-animals {
  --category-color: #D32F2F;
  border-left: 5px solid var(--category-color);
}

.animal-header {
  background: linear-gradient(135deg, #D32F2F 0%, #8b4513 100%) !important;
  color: white !important;
}

.animal-content {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.animal-content strong {
  color: #D32F2F !important;
  font-weight: 700 !important;
}

/* Kuş Kartları */
.bird-card, .category-birds {
  --category-color: #1976D2;
  border-left: 5px solid var(--category-color);
}

.bird-header {
  background: linear-gradient(135deg, #1976D2 0%, #667eea 100%) !important;
  color: white !important;
}

.bird-content {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.bird-content strong {
  color: #1976D2 !important;
  font-weight: 700 !important;
}

.bird-content p {
  color: #000 !important;
  font-weight: 600 !important;
}

/* ================ BADGE STİLLERİ ================ */

.plant-type, .animal-type, .rarity, .difficulty, .conservation-badge {
  font-weight: 700 !important;
  font-size: 0.9em !important;
  padding: 8px 14px !important;
  border-radius: 15px !important;
  display: inline-block;
  margin: 6px 4px;
}

/* Kategori Badge'leri */
.plant-type.endemic, .animal-type.endemic, .rarity.endemic {
  background: linear-gradient(135deg, #FFB300 0%, #FFA500 100%) !important;
  color: #000 !important;
}

.plant-type.endangered, .animal-type.endangered, .rarity.endangered, .rarity.endangered-bird {
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important;
  color: #FFF !important;
}

.plant-type.protected, .animal-type.protected {
  background: linear-gradient(135deg, #228B22 0%, #1B5E20 100%) !important;
  color: #FFF !important;
}

/* Zor Seviyeler */
.difficulty.easy {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
  color: #FFF !important;
}

.difficulty.medium {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
  color: #FFF !important;
  font-weight: 700 !important;
}

.difficulty.hard {
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important;
  color: #FFF !important;
  font-weight: 700 !important;
}

/* ================ KATEGORİ BAŞLIKLARI ================ */

.category-title {
  font-size: 1.4em !important;
  font-weight: 700 !important;
  padding: 15px 20px !important;
  margin: 35px 20px 20px 20px !important;
  border-bottom: 4px solid #333 !important;
  border-radius: 8px 8px 0 0;
  color: #000 !important;
  background: rgba(255, 255, 255, 0.1);
}

.category-title.plants {
  border-bottom-color: #228B22 !important;
  color: #228B22 !important;
  background: rgba(34, 139, 34, 0.08);
}

.category-title.animals {
  border-bottom-color: #D32F2F !important;
  color: #D32F2F !important;
  background: rgba(211, 47, 47, 0.08);
}

.category-title.birds {
  border-bottom-color: #1976D2 !important;
  color: #1976D2 !important;
  background: rgba(25, 118, 210, 0.08);
}

/* ================ KONTROL LİNKLERİ ================ */

.plant-container, .animal-container, .bird-container {
  gap: 20px;
  padding: 20px;
}

.filter-tabs {
  display: flex;
  gap: 12px;
  margin: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  padding: 10px 22px !important;
  border: 2px solid !important;
  background: white !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

.filter-btn.active {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.plants-filter { 
  border-color: #228B22 !important;
  color: #228B22 !important;
}

.plants-filter.active {
  background: linear-gradient(135deg, #228B22 0%, #2d5016 100%) !important;
  color: white !important;
  border-color: #228B22 !important;
}

.animals-filter {
  border-color: #D32F2F !important;
  color: #D32F2F !important;
}

.animals-filter.active {
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important;
  color: white !important;
  border-color: #D32F2F !important;
}

.birds-filter {
  border-color: #1976D2 !important;
  color: #1976D2 !important;
}

.birds-filter.active {
  background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%) !important;
  color: white !important;
  border-color: #1976D2 !important;
}

/* ENDEMİK - Sarı Gradient */
.plant-header.endemic, .animal-header.endemic, .bird-header.endemic {
  background: linear-gradient(135deg, #FFB300 0%, #FFA500 100%) !important;
  color: #000 !important;
  font-weight: 700;
}

/* TEHLİKE ALTINDA - Kırmızı Gradient */
.plant-header.endangered, .animal-header.endangered, .bird-header.endangered {
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important;
  color: #FFF !important;
  font-weight: 700;
}

/* KORUNUYOR - Yeşil Gradient */
.plant-header.protected, .animal-header.protected, .bird-header.protected {
  background: linear-gradient(135deg, #228B22 0%, #1B5E20 100%) !important;
  color: #FFF !important;
  font-weight: 700;
}

/* ENDEMİK + TEHLİKE - Kırmızı-Sarı Animasyon */
.plant-header.endemic-endangered, .animal-header.endemic-endangered, .bird-header.endemic-endangered {
  background: linear-gradient(135deg, #FF6B35 0%, #FFB300 100%) !important;
  color: #000 !important;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
}

/* NORMAL / YAYGIN - Açık Yeşil */
.plant-header.common, .animal-header.common, .bird-header.common {
  background: linear-gradient(135deg, #90EE90 0%, #228B22 100%) !important;
  color: #000 !important;
  font-weight: 700;
}

/* NADIR / GÖÇMEN - Turuncu */
.plant-header.rare, .animal-header.rare, .bird-header.rare {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
  color: #FFF !important;
  font-weight: 700;
}

/* SU KUŞLARI / SULAK ALAN - Mavi */
.bird-header.water {
  background: linear-gradient(135deg, #1E90FF 0%, #4169E1 100%) !important;
  color: #FFF !important;
  font-weight: 700;
}

/* Header stillerini override et */
.plant-header, .animal-header, .bird-header {
  padding: 20px;
  text-align: center;
  color: white;
  font-weight: 700;
}

.plant-header h3, .animal-header h3, .bird-header h3 {
  margin: 0 0 5px 0;
  font-size: 1.2em;
  font-weight: 700;
}

.plant-header .scientific, .animal-header .scientific, .bird-header .scientific {
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.95;
  font-weight: 500;
}

/* LEGEND / LEJANT - Üstte Sabit Yatay Layout */
.legend {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  border: none;
  border-bottom: 3px solid #333;
  border-radius: 0;
  padding: 12px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.9em;
  font-weight: 600;
  max-width: 100%;
}

.legend h4 {
  margin: 0;
  font-size: 1em;
  color: #333;
  text-align: center;
  border: none;
  padding: 0;
  min-width: 120px;
  border-right: 2px solid #ddd;
  padding-right: 15px;
  margin-right: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 8px;
}

.legend-color {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid #999;
}

.legend-item.endemic .legend-color {
  background: linear-gradient(135deg, #FFB300 0%, #FFA500 100%);
}

.legend-item.endangered .legend-color {
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
}

.legend-item.protected .legend-color {
  background: linear-gradient(135deg, #228B22 0%, #1B5E20 100%);
}

.legend-item.common .legend-color {
  background: linear-gradient(135deg, #90EE90 0%, #228B22 100%);
}

.legend-item.rare .legend-color {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.legend-item.water .legend-color {
  background: linear-gradient(135deg, #1E90FF 0%, #4169E1 100%);
}

.legend-label {
  flex: 0 0 auto;
  color: #333;
  white-space: nowrap;
}

/* Content'e padding ekle legend için yer açsın */
.overlay {
  padding-top: 80px !important;
}

/* MOBILDE LEGEND - Responsive */
@media (max-width: 1024px) {
  .legend {
    padding: 10px 15px;
    gap: 15px;
    font-size: 0.8em;
  }
  
  .legend h4 {
    font-size: 0.95em;
    min-width: 100px;
    padding-right: 12px;
    margin-right: 8px;
    border-right: 2px solid #ddd;
  }
  
  .legend-color {
    width: 20px;
    height: 20px;
  }
  
  .legend-label {
    font-size: 0.8em;
  }
  
  .overlay {
    padding-top: 70px !important;
  }
}

@media (max-width: 768px) {
  .legend {
    padding: 8px 12px;
    gap: 12px;
    font-size: 0.75em;
  }
  
  .legend h4 {
    font-size: 0.85em;
    min-width: auto;
    border-right: 1px solid #ddd;
    padding-right: 10px;
    margin-right: 5px;
  }
  
  .legend-color {
    width: 18px;
    height: 18px;
  }
  
  .legend-label {
    font-size: 0.7em;
  }
  
  .overlay {
    padding-top: 65px !important;
  }
}

/* Hareketli Emoji Animasyonları */
@keyframes spinEmoji {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes bounceEmoji {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.1); }
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.3); transform: scale(1); }
  50% { text-shadow: 0 0 15px rgba(255,255,255,0.8); transform: scale(1.15); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.2); }
}

@keyframes shimmerEmoji {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.emoji {
  display: inline-block;
  animation: bounceEmoji 1.5s ease-in-out infinite;
}

.emoji-spin {
  display: inline-block;
  animation: spinEmoji 2s linear infinite;
}

.emoji-pulse {
  display: inline-block;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.emoji-wiggle {
  display: inline-block;
  animation: wiggle 0.5s ease-in-out infinite;
}

.emoji-heart {
  display: inline-block;
  animation: heartbeat 0.8s ease-in-out infinite;
}

.emoji-shimmer {
  display: inline-block;
  animation: shimmerEmoji 2s ease-in-out infinite;
}