* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

:root {
  --primary: #0284c7;
  --primary-dark: #0369a1;
  --accent: #f59e0b;
  --success: #10b981;
  --danger: #ef4444;
  --purple: #6366f1;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  background: #0284c7;
  height: 100vh;
  width: 100vw;
}

/* YÜKLEME / LOADING EKRANI */
#appLoadingOverlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #38bdf8 0%, #0284c7 50%, #082f49 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#appLoadingOverlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.loader-logo-wrap {
  position: relative;
  margin-bottom: 24px;
}

.loader-logo {
  height: 280px;
  max-width: 90vw;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.45));
  animation: logoPulse 2.4s ease-in-out infinite alternate;
}

@keyframes logoPulse {
  0% { transform: scale(0.96) translateY(0); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)); }
  100% { transform: scale(1.04) translateY(-8px); filter: drop-shadow(0 16px 30px rgba(56, 189, 248, 0.6)); }
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-text {
  color: white;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Zenginleştirilmiş Su Altı Sahnesi */
#aquarium {
  --water-top: #67e8f9;
  --water-mid: #0284c7;
  --water-bottom: #082f49;
  --sand-top: #fcd34d;
  --sand-bottom: #d97706;
  --plant-filter: none;
  --light-ray-color: rgba(255, 255, 255, 0.22);
  --bubble-border: rgba(255, 255, 255, 0.4);
  --bubble-bg: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));

  position: relative;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 15%, var(--water-top) 0%, var(--water-mid) 45%, var(--water-bottom) 100%);
  overflow: hidden;
  transition: background 0.8s ease;
}

/* Işık Huzmeleri */
.light-ray {
  position: absolute;
  top: -20%;
  width: 180px;
  height: 140%;
  background: linear-gradient(180deg, var(--light-ray-color) 0%, rgba(255, 255, 255, 0) 80%);
  transform: rotate(24deg);
  pointer-events: none;
  filter: blur(14px);
  animation: rayShift 9s ease-in-out infinite alternate;
  transition: background 0.8s ease;
}

@keyframes rayShift {
  0% { opacity: 0.3; transform: rotate(20deg) translateX(0); }
  100% { opacity: 0.65; transform: rotate(28deg) translateX(30px); }
}

/* Deniz Tabanı Kumu ve Kayalıklar */
.sea-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95px;
  background: linear-gradient(180deg, var(--sand-top) 0%, var(--sand-bottom) 100%);
  border-radius: 60% 60% 0 0 / 25px 25px 0 0;
  box-shadow: inset 0 8px 16px rgba(0,0,0,0.25);
  z-index: 4;
  pointer-events: none;
  transition: background 0.8s ease, box-shadow 0.8s ease;
}

.rocks {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  z-index: 5;
  font-size: 58px;
  opacity: 0.95;
}

/* Sallanan Yosunlar ve Mercanlar */
.seaweed {
  position: absolute;
  bottom: 75px;
  font-size: 110px;
  z-index: 6;
  pointer-events: none;
  animation: sway 4s ease-in-out infinite alternate;
  transform-origin: bottom center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)) var(--plant-filter);
  transition: filter 0.8s ease;
}

@keyframes sway {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* Yükselen Kabarcıklar */
.bubble {
  position: absolute;
  bottom: -40px;
  background: var(--bubble-bg);
  border-radius: 50%;
  border: 1px solid var(--bubble-border);
  pointer-events: none;
  z-index: 3;
  animation: rise 7s linear infinite;
  transition: background 0.8s ease, border-color 0.8s ease;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-110vh) scale(1.1);
    opacity: 0;
  }
}

/* Düşen Yem Tanesi */
.food-pellet {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #f59e0b 40%, #b45309 100%);
  border-radius: 50%;
  border: 2px solid #fef08a;
  box-shadow: 0 0 12px #f59e0b, 0 3px 6px rgba(0,0,0,0.3);
  z-index: 15;
  pointer-events: none;
}

/* Altın Yarış Yemi (Yem Kapmaca) */
.food-pellet.frenzy-pellet {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #fde047 30%, #f59e0b 70%, #d97706 100%);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 20px #f59e0b, 0 0 35px #fde047, 0 4px 12px rgba(0, 0, 0, 0.45);
  animation: frenzyPelletPulse 0.9s ease-in-out infinite alternate;
  z-index: 18;
}

@keyframes frenzyPelletPulse {
  0% { transform: scale(0.95); filter: drop-shadow(0 0 8px #f59e0b); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 22px #fde047) drop-shadow(0 0 35px #fbbf24); }
}

/* Üst Kontrol Çubuğu */
.top-bar {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 30;
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  padding: 8px 18px;
  border-radius: 35px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.15);
  align-items: center;
}

.top-bar-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: transform 0.2s;
}

.top-bar-logo:hover {
  transform: scale(1.06);
}

.top-bar input, .top-bar select {
  padding: 9px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  background: white;
}

.top-bar button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-bar button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.btn-theme-selector {
  background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-theme-selector:hover {
  background: linear-gradient(135deg, #0369a1 0%, #4f46e5 100%) !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.btn-theme-icon {
  font-size: 16px;
  line-height: 1;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e0f2fe;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #0369a1;
}

.btn-logout {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.btn-logout:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

/* Sağ Taraf: Skor ve Liste Paneli */
.sidebar {
  position: absolute;
  right: 20px;
  top: 20px;
  bottom: 25px;
  width: 290px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  z-index: 30;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.sidebar h3 {
  font-size: 17px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-mini-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.student-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-right: 4px;
}

.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  border: 2px solid transparent;
}

.student-item:hover {
  background: #f0f9ff;
  transform: translateX(-3px);
}

.student-item.active {
  border-color: #0284c7;
  background: #e0f2fe;
}

.student-name-box {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-badge {
  background: #0284c7;
  color: white;
  font-weight: 800;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 13px;
  min-width: 32px;
  text-align: center;
}

/* Alt Aksiyon Çubuğu (Süsleri Kapatmayan Katlanabilir Kapsül) */
.action-bar-wrapper {
  position: absolute;
  bottom: 12px;
  left: calc(50% - 145px);
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.action-bar {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  padding: 8px 18px;
  border-radius: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.4);
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s, visibility 0.25s;
}

.action-bar.is-collapsed {
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.action-bar-selected-label {
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  margin-right: 4px;
  white-space: nowrap;
}

.btn-action-collapse {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  padding: 8px 11px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
.btn-action-collapse:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: scale(1.1) !important;
}

.btn-action-reopen {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border: 1.5px solid #38bdf8;
  color: #0284c7;
  font-weight: 800;
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  animation: reopenPulse 2.5s ease infinite;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, background 0.2s;
}
.btn-action-reopen:hover {
  transform: translateY(-2px) scale(1.05);
  background: white;
  color: #0369a1;
}
@keyframes reopenPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 4px 22px rgba(56, 189, 248, 0.65); }
}

.action-bar button {
  border: none;
  padding: 8px 16px;
  border-radius: 24px;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
}

.btn-celebrate {
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  background-size: 200% 200%;
  animation: celebrateBtnPulse 3s ease infinite;
  color: white;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.45);
}
@keyframes celebrateBtnPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-frenzy {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.45) !important;
  animation: frenzyBtnPulse 2.8s ease infinite;
}
@keyframes frenzyBtnPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 4px 22px rgba(234, 88, 12, 0.75); }
}

/* Yem Kapmaca Ekran Bildirim Kapsülü */
.frenzy-banner {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(234, 88, 12, 0.96));
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 8px 22px;
  border-radius: 30px;
  border: 2px solid #fef08a;
  box-shadow: 0 8px 30px rgba(234, 88, 12, 0.5), 0 0 20px rgba(253, 224, 71, 0.6);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  animation: frenzyBannerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

@keyframes frenzyBannerPop {
  0% { transform: translateX(-50%) translateY(-30px) scale(0.7); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* Yem Kapmaca Şampiyon Kartı */
.frenzy-winner-card {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 80;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  color: white;
  padding: 22px 34px;
  border-radius: 28px;
  border: 2px solid #facc15;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(250, 204, 21, 0.6);
  text-align: center;
  pointer-events: none;
  animation: winnerCardEntry 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes winnerCardEntry {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.frenzy-winner-card.fade-out {
  animation: winnerCardExit 0.4s ease forwards;
}

@keyframes winnerCardExit {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

.frenzy-winner-icon {
  font-size: 52px;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 12px rgba(250, 204, 21, 0.6));
  animation: winnerIconBounce 1s ease-in-out infinite alternate;
}

@keyframes winnerIconBounce {
  0% { transform: translateY(0) rotate(-6deg); }
  100% { transform: translateY(-8px) rotate(6deg); }
}

.frenzy-winner-title {
  font-size: 20px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}

.frenzy-winner-sub {
  font-size: 14px;
  font-weight: 700;
  color: #93c5fd;
}

.btn-reward {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: white;
  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.4);
}
.btn-feed {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
}
.btn-point { background: #10b981; color: white; }
.btn-five { background: #6366f1; color: white; }
.btn-reset { background: #ef4444; color: white; }

.action-bar button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
}

.action-bar button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Balık Karakterleri */
.fish-container {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: filter 0.2s;
}

/* Balık Gövde ve Aksesuar Taşıyıcısı (Yön ve boyut burada ölçeklenir) */
.fish-body-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  transform-origin: center center;
}

.fish-accessory {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 8;
  line-height: 1;
  font-size: 28px;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  transition: all 0.25s ease;
}

/* Aksesuarlara özel milimetrik konumlar */
.fish-accessory.acc-crown { font-size: 32px; top: -19px; left: 52%; }
.fish-accessory.acc-party { font-size: 32px; top: -23px; left: 52%; transform: translateX(-50%) rotate(-8deg); }
.fish-accessory.acc-pirate { font-size: 34px; top: -20px; left: 50%; }
.fish-accessory.acc-bow { font-size: 26px; top: -11px; left: 60%; }
.fish-accessory.acc-glasses { font-size: 24px; top: 12px; left: 56%; }
.fish-accessory.acc-chef { font-size: 30px; top: -22px; left: 50%; }
.fish-accessory.acc-star { font-size: 26px; top: -14px; left: 50%; animation: accStarFloat 2s ease-in-out infinite alternate; }
.fish-accessory.acc-flower { font-size: 26px; top: -11px; left: 62%; }
.fish-accessory.acc-snorkel { font-size: 28px; top: 8px; left: 56%; }
.fish-accessory.acc-detective { font-size: 30px; top: -18px; left: 50%; }

@keyframes accStarFloat {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(-3px) scale(1.1); }
}

/* BÜYÜLÜ IŞILTILAR (AURAS) */
.fish-container.aura-gold .fish-body-wrap,
.reward-preview-fish-wrap.aura-gold {
  filter: drop-shadow(0 0 14px #facc15) drop-shadow(0 0 25px rgba(234, 179, 8, 0.7));
  animation: auraPulseGold 2.2s infinite ease-in-out alternate;
}
@keyframes auraPulseGold {
  0% { filter: drop-shadow(0 0 10px #facc15) drop-shadow(0 0 18px rgba(234, 179, 8, 0.5)); }
  100% { filter: drop-shadow(0 0 20px #fde047) drop-shadow(0 0 35px rgba(250, 204, 21, 0.9)) brightness(1.15); }
}

.fish-container.aura-rainbow .fish-body-wrap,
.reward-preview-fish-wrap.aura-rainbow {
  animation: auraPulseRainbow 3.5s infinite linear;
}
@keyframes auraPulseRainbow {
  0% { filter: drop-shadow(0 0 14px #ef4444) drop-shadow(0 0 22px rgba(249, 115, 22, 0.6)); }
  25% { filter: drop-shadow(0 0 14px #eab308) drop-shadow(0 0 22px rgba(34, 197, 94, 0.6)); }
  50% { filter: drop-shadow(0 0 14px #3b82f6) drop-shadow(0 0 22px rgba(168, 85, 247, 0.6)); }
  75% { filter: drop-shadow(0 0 14px #ec4899) drop-shadow(0 0 22px rgba(239, 68, 68, 0.6)); }
  100% { filter: drop-shadow(0 0 14px #ef4444) drop-shadow(0 0 22px rgba(249, 115, 22, 0.6)); }
}

.fish-container.aura-neon .fish-body-wrap,
.reward-preview-fish-wrap.aura-neon {
  filter: drop-shadow(0 0 14px #06b6d4) drop-shadow(0 0 24px rgba(14, 165, 233, 0.8));
  animation: auraPulseNeon 1.8s infinite ease-in-out alternate;
}
@keyframes auraPulseNeon {
  0% { filter: drop-shadow(0 0 8px #06b6d4) drop-shadow(0 0 16px rgba(14, 165, 233, 0.5)); }
  100% { filter: drop-shadow(0 0 20px #38bdf8) drop-shadow(0 0 32px rgba(56, 189, 248, 0.95)) brightness(1.2); }
}

.fish-container.aura-hearts .fish-body-wrap,
.reward-preview-fish-wrap.aura-hearts {
  filter: drop-shadow(0 0 14px #f43f5e) drop-shadow(0 0 24px rgba(244, 63, 94, 0.7));
  animation: auraPulseHearts 2s infinite ease-in-out alternate;
}
@keyframes auraPulseHearts {
  0% { filter: drop-shadow(0 0 10px #f43f5e) drop-shadow(0 0 18px rgba(244, 63, 94, 0.5)); }
  100% { filter: drop-shadow(0 0 22px #fb7185) drop-shadow(0 0 34px rgba(251, 113, 133, 0.85)) brightness(1.15); }
}

.student-accessory-badge {
  font-size: 15px;
  line-height: 1;
  margin-left: 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

.fish-sprite {
  font-size: 52px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  will-change: transform;
  transform-origin: center center;
}

.fish-sprite.fish-growing {
  animation: growPulseEffect 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes growPulseEffect {
  0% { filter: drop-shadow(0 0 0 rgba(254, 240, 138, 0)); }
  50% { filter: drop-shadow(0 0 22px #facc15) brightness(1.22); }
  100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
}

.fish-tag {
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #bae6fd;
  padding: 2px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  color: #0369a1;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  margin-top: 3px;
  max-width: 130px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fish-container.selected .fish-tag {
  background: #fef08a;
  border-color: #f59e0b;
  color: #854d0e;
}

.fish-container.selected .fish-sprite {
  filter: drop-shadow(0 0 14px #fde047);
}

/* Puan Uçuş Animasyonu */
.float-text {
  position: absolute;
  font-size: 26px;
  font-weight: 900;
  animation: floatUp 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 40;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.35); }
}

/* Yeme Isırığı Efekti */
.nom-effect {
  position: absolute;
  font-size: 24px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 14px rgba(245, 158, 11, 0.85);
  white-space: nowrap;
  animation: popFade 0.75s ease-out forwards;
  pointer-events: none;
  z-index: 40;
}

@keyframes popFade {
  0% { transform: scale(0.5); opacity: 1; }
  50% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* GİRİŞ / KAYIT MODAL PENCERESİ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 47, 73, 0.82);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity 0.3s;
}

.modal-card {
  background: white;
  border-radius: 28px;
  padding: 32px;
  width: 92%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
  animation: modalScale 0.3s ease-out;
}

@keyframes modalScale {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-logo {
  height: 270px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin: 0 auto 18px auto;
  display: block;
  border-radius: 22px;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.24));
  transition: transform 0.25s ease;
}
.modal-logo:hover {
  transform: scale(1.03);
}

.modal-card h2 {
  font-size: 22px;
  color: #0f172a;
  margin-bottom: 8px;
}

.modal-card p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.form-group input {
  padding: 12px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-auth-submit {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.15s, opacity 0.2s;
}

.btn-auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.auth-error {
  color: #ef4444;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  display: none;
}

.auth-info-note {
  font-size: 12px;
  color: #64748b;
  margin-top: 14px;
  line-height: 1.4;
}

.fish-sprite-img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  transition: transform 0.25s ease-out;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  pointer-events: none;
}

.sidebar-fish-thumb {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}

/* MODERN ORTALANMIŞ POPUP BİLDİRİM VE ONAY SİSTEMİ */
.custom-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 47, 73, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 20px;
}

.custom-popup-overlay.active {
  opacity: 1;
}

.custom-popup-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 26px;
  padding: 28px 24px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  transform: scale(0.85) translateY(15px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
}

.custom-popup-overlay.active .custom-popup-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.popup-icon-wrap {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-popup-overlay.active .popup-icon-wrap {
  transform: scale(1.08);
}

.popup-icon-wrap.type-info {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: #0284c7;
}

.popup-icon-wrap.type-success {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #16a34a;
}

.popup-icon-wrap.type-warning {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}

.popup-icon-wrap.type-error {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
}

.popup-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.popup-message {
  font-size: 14px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 24px;
  word-break: break-word;
}

.popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.popup-btn {
  flex: 1;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.popup-btn-confirm {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: white;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.popup-btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
}

.popup-btn-confirm.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.popup-btn-confirm.btn-danger:hover {
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

.popup-btn-cancel {
  background: #f1f5f9;
  color: #475569;
}

.popup-btn-cancel:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: translateY(-1px);
}

/* ÖDÜL & AKSESUAR SANDIĞI MODALI */
.reward-modal-card {
  max-width: 580px;
  width: 94%;
  padding: 24px;
  border-radius: 28px;
  text-align: left;
}

.reward-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.reward-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reward-title-icon {
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(135deg, #fdf2f8, #f5d0fe);
  padding: 10px;
  border-radius: 18px;
}

.reward-modal-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.reward-modal-header p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.reward-close-btn {
  background: #f1f5f9;
  border: none;
  font-size: 24px;
  color: #64748b;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.reward-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Canlı Önizleme Kutusu */
.reward-preview-box {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 70%, #0369a1 100%);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25), 0 6px 18px rgba(2, 132, 199, 0.25);
  margin-bottom: 16px;
  min-height: 120px;
}

.reward-preview-aquarium {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100px;
  height: 80px;
}

.reward-preview-fish-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reward-preview-label {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Kategori Sekmeleri */
.reward-tabs {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 16px;
  margin-bottom: 14px;
}

.reward-tab-btn {
  flex: 1;
  padding: 9px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.reward-tab-btn.active {
  background: white;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Seçenekler Izgarası */
.reward-tab-content {
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 18px;
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
}

.reward-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.reward-card:hover {
  border-color: #c084fc;
  background: #faf5ff;
  transform: translateY(-2px);
}

.reward-card.active {
  border-color: #a855f7;
  background: #f3e8ff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
  transform: scale(1.03);
}

.reward-card-icon {
  font-size: 28px;
  line-height: 1.1;
}

.reward-card-title {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.reward-card-desc {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}

/* Alt Butonlar */
.reward-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.reward-btn-cancel {
  padding: 11px 18px;
  border: none;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.reward-btn-cancel:hover {
  background: #e2e8f0;
}

.reward-btn-save {
  padding: 11px 22px;
  border: none;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: white;
  font-size: 14px;
  font-weight: 800;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reward-btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.5);
}


/* ===================================================
   ANLIK SINIF İÇİ COŞKU & KUTLAMA ŞOVU (AKILLI TAHTA)
   =================================================== */
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: radial-gradient(circle at 50% 45%, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.96));
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: celebrationFadeIn 0.35s ease-out;
}

@keyframes celebrationFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#celebrationCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Dönen Renkli Disko Işık Huzmeleri */
.disco-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130vw;
  height: 130vh;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: screen;
}

.disco-beam-1 {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(236, 72, 153, 0.7) 45deg, transparent 90deg, rgba(245, 158, 11, 0.7) 135deg, transparent 180deg, rgba(6, 182, 212, 0.7) 225deg, transparent 270deg, rgba(168, 85, 247, 0.7) 315deg, transparent 360deg);
  animation: discoSpin 14s linear infinite;
}

.disco-beam-2 {
  background: conic-gradient(from 180deg, transparent 0deg, rgba(250, 204, 21, 0.6) 60deg, transparent 120deg, rgba(34, 197, 94, 0.6) 180deg, transparent 240deg, rgba(239, 68, 68, 0.6) 300deg, transparent 360deg);
  animation: discoSpinReverse 18s linear infinite;
  opacity: 0.22;
}

.disco-beam-3 {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, transparent 65%);
  animation: discoPulse 3s ease-in-out infinite alternate;
}

@keyframes discoSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes discoSpinReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes discoPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.45; }
}

/* Kutlama Kartı */
.celebration-card {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 36px;
  padding: 38px 45px;
  text-align: center;
  max-width: 540px;
  width: 90%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 45px rgba(245, 158, 11, 0.4);
  border: 4px solid #fde047;
  animation: celebrationCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes celebrationCardPop {
  0% { transform: scale(0.6) translateY(50px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.celebration-close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  background: #f1f5f9;
  border: none;
  font-size: 26px;
  color: #64748b;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.celebration-close-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.celebration-badge-icon {
  font-size: 58px;
  line-height: 1;
  margin-bottom: 12px;
  animation: badgeBounce 1.4s ease-in-out infinite alternate;
}

@keyframes badgeBounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.15) rotate(6deg); }
}

.celebration-title {
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.celebration-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  margin: 0 0 20px 0;
}

/* Kutlama Sahnesi (Ortada dans eden balık/grup) */
.celebration-stage {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 20px 0;
}

.celebration-fish-dancer {
  transform: scale(2.2);
  animation: fishJoyDance 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.3));
}

@keyframes fishJoyDance {
  0% { transform: scale(2.2) translateY(0) rotate(-6deg); }
  50% { transform: scale(2.35) translateY(-14px) rotate(4deg); }
  100% { transform: scale(2.2) translateY(0) rotate(-6deg); }
}

.celebration-cheer-tag {
  background: linear-gradient(135deg, #fef08a, #fde047);
  color: #854d0e;
  border: 2px solid #facc15;
  font-size: 15px;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
  animation: cheerPulse 1.8s ease-in-out infinite alternate;
}

@keyframes cheerPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); box-shadow: 0 6px 16px rgba(234, 179, 8, 0.55); }
}

.celebration-hint {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 14px;
}

/* Akvaryum Arka Plandaki Balıkların Kutlama Dansı */
.fish-container.fish-dancing .fish-body-wrap {
  animation: fishPartyWiggle 0.5s ease-in-out infinite alternate;
}

@keyframes fishPartyWiggle {
  0% { transform: translateY(-8px) rotate(-8deg); }
  100% { transform: translateY(8px) rotate(8deg); }
}
/* Sağ Sidebar Gizle / Göster Butonu & Animasyonu */
.sidebar {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.sidebar.collapsed {
  transform: translateX(calc(100% + 30px));
  pointer-events: none;
  opacity: 0;
}

.btn-sidebar-toggle {
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 35;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1.5px solid #38bdf8;
  color: #0284c7;
  font-size: 13.5px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.25);
  transition: all 0.25s ease;
}

.btn-sidebar-toggle:hover {
  background: #0284c7;
  color: white;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 22px rgba(2, 132, 199, 0.4);
}

.btn-sidebar-toggle.floating {
  right: 20px;
  top: 16px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 13.5px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(2, 132, 199, 0.94);
  color: white;
  border-color: #38bdf8;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
  animation: sidebarFloatPulse 3s ease infinite;
}

.btn-sidebar-toggle.floating:hover {
  background: #0369a1;
  color: white;
}

@keyframes sidebarFloatPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(2, 132, 199, 0.3); }
  50% { box-shadow: 0 6px 25px rgba(56, 189, 248, 0.6); }
}

.btn-sidebar-close,
.btn-panel-close {
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 12px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.btn-sidebar-close:hover,
.btn-panel-close:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
  transform: scale(1.05);
}

/* ========================================================
   AKVARYUM TEMALARI (AQUARIUM THEMES - 4 TAM ENTEGRE TEMA)
   ======================================================== */

/* 1. Klasik Akvaryum (Classic) */
#aquarium.theme-classic,
#aquarium.theme-default,
#aquarium[data-theme="classic"] {
  --water-top: #67e8f9;
  --water-mid: #0284c7;
  --water-bottom: #082f49;
  --sand-top: #fcd34d;
  --sand-bottom: #d97706;
  --sand: #fcd34d;
  --sand-dark: #d97706;
  --plant-filter: none;
  --light-ray-color: rgba(255, 255, 255, 0.22);
  --bubble-border: rgba(255, 255, 255, 0.4);
  --bubble-bg: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
}
#aquarium.theme-classic .theme-classic-layer,
#aquarium.theme-default .theme-classic-layer,
#aquarium[data-theme="classic"] .theme-classic-layer {
  opacity: 1;
  pointer-events: auto;
}

/* 2. Mercan Resifi (Coral Reef) */
#aquarium.theme-reef,
#aquarium.theme-deep_ocean,
#aquarium[data-theme="reef"] {
  --water-top: #38bdf8;
  --water-mid: #0284c7;
  --water-bottom: #31104b;
  --sand-top: #fbcfe8;
  --sand-bottom: #f43f5e;
  --sand: #fbcfe8;
  --sand-dark: #f43f5e;
  --plant-filter: hue-rotate(280deg) saturate(1.4);
  --light-ray-color: rgba(244, 114, 182, 0.26);
  --bubble-border: rgba(244, 114, 182, 0.5);
  --bubble-bg: radial-gradient(circle at 30% 30%, rgba(253, 230, 138, 0.9), rgba(244, 63, 94, 0.25));
}
#aquarium.theme-reef .theme-reef-layer,
#aquarium.theme-deep_ocean .theme-reef-layer,
#aquarium[data-theme="reef"] .theme-reef-layer {
  opacity: 1;
  pointer-events: auto;
}

/* 3. Su Altı Harabeleri (Underwater Ruins) */
#aquarium.theme-ruins,
#aquarium.theme-atlantis,
#aquarium[data-theme="ruins"] {
  --water-top: #2dd4bf;
  --water-mid: #0f766e;
  --water-bottom: #042f2e;
  --sand-top: #cbd5e1;
  --sand-bottom: #475569;
  --sand: #cbd5e1;
  --sand-dark: #475569;
  --plant-filter: hue-rotate(150deg) brightness(0.9);
  --light-ray-color: rgba(45, 212, 191, 0.25);
  --bubble-border: rgba(45, 212, 191, 0.45);
  --bubble-bg: radial-gradient(circle at 30% 30%, rgba(204, 251, 241, 0.9), rgba(13, 148, 136, 0.2));
}
#aquarium.theme-ruins .theme-ruins-layer,
#aquarium.theme-atlantis .theme-ruins-layer,
#aquarium[data-theme="ruins"] .theme-ruins-layer {
  opacity: 1;
  pointer-events: auto;
}

/* 4. Hazine Gemisi / Korsan Batığı (Treasure Ship) */
#aquarium.theme-treasure,
#aquarium.theme-pirate_shipwreck,
#aquarium[data-theme="treasure"] {
  --water-top: #0e4c61;
  --water-mid: #073342;
  --water-bottom: #02141c;
  --sand-top: #593e27;
  --sand-bottom: #291a0f;
  --sand: #593e27;
  --sand-dark: #291a0f;
  --plant-filter: brightness(0.7) saturate(0.8);
  --light-ray-color: rgba(56, 189, 248, 0.22);
  --bubble-border: rgba(103, 232, 249, 0.5);
  --bubble-bg: radial-gradient(circle at 30% 30%, rgba(103, 232, 249, 0.9), rgba(20, 184, 166, 0.2));
}
#aquarium.theme-treasure .theme-pirate-layer,
#aquarium.theme-pirate_shipwreck .theme-pirate-layer,
#aquarium[data-theme="treasure"] .theme-pirate-layer {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================
   TEMATİK SAHNE KATMANLARI (SCENIC LAYERS)
   ======================================================== */
.theme-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panoramik Vektör Sahneler (1200x500 Vektör Kompozisyonları) */
.theme-scene-panoramic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.svg-plant {
  animation: svgSway 3.8s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.svg-plant--delayed {
  animation-delay: -1.9s;
}

.svg-sway-slow {
  animation: svgSway 7s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.svg-sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: sparklePulse 2.4s ease-in-out infinite;
}

.svg-sparkle--d1 { animation-delay: -0.8s; }
.svg-sparkle--d2 { animation-delay: -1.6s; }

@keyframes svgSway {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(5deg); }
}

@keyframes sparklePulse {
  0%, 100% { transform: scale(0.25) rotate(0deg); opacity: 0.15; }
  50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* 1. Klasik Akvaryum Sahnesi */
.classic-scene-wrap {
  position: absolute;
  bottom: 35px;
  left: 20px;
  width: 560px;
  max-width: 52vw;
  z-index: 5;
  filter: drop-shadow(0 12px 28px rgba(6, 78, 59, 0.45));
  animation: classicGentleSway 8s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes classicGentleSway {
  0% { transform: translateY(0) rotate(-0.3deg); }
  50% { transform: translateY(-3px) rotate(0.3deg); }
  100% { transform: translateY(0) rotate(-0.3deg); }
}

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

.vallis-leaf {
  transform-origin: center bottom;
  animation: vallisSway 5.5s ease-in-out infinite alternate;
}
.vallis-leaf.leaf-1 { animation-duration: 4.8s; animation-delay: 0s; }
.vallis-leaf.leaf-2 { animation-duration: 5.8s; animation-delay: -1.2s; }
.vallis-leaf.leaf-3 { animation-duration: 5.2s; animation-delay: -2.1s; }
.vallis-leaf.leaf-4 { animation-duration: 6.2s; animation-delay: -0.8s; }
.vallis-leaf.leaf-5 { animation-duration: 4.5s; animation-delay: -1.8s; }

@keyframes vallisSway {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(4deg); }
}

.classic-relics {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 6;
}

.cl-relic {
  position: absolute;
  font-size: 48px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.classic-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

.cl-bubble {
  position: absolute;
  bottom: -30px;
  font-size: 24px;
  animation: sparkleRise 7.5s linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

/* 4. Hazine Gemisi Sahnesi */
.pirate-shipwreck-wrap {
  position: absolute;
  bottom: 38px;
  left: 25px;
  width: 620px;
  max-width: 54vw;
  z-index: 5;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7));
  animation: pirateShipSway 6s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes pirateShipSway {
  0% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-4px) rotate(0.4deg); }
  100% { transform: translateY(0) rotate(-0.5deg); }
}

.pirate-ship-svg {
  width: 100%;
  height: auto;
  display: block;
}

.pirate-lantern {
  animation: lanternGlow 2.5s ease-in-out infinite alternate;
}

@keyframes lanternGlow {
  0% { opacity: 0.6; filter: drop-shadow(0 0 5px #f59e0b); }
  100% { opacity: 1; filter: drop-shadow(0 0 18px #fde047) drop-shadow(0 0 30px #06b6d4); }
}

.pirate-debris {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 6;
}

.debris-item {
  position: absolute;
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s;
}

.debris-cannon { left: 45%; bottom: 36px; font-size: 50px; transform: rotate(-12deg); }
.debris-anchor { left: 68%; bottom: 42px; font-size: 64px; transform: rotate(20deg); opacity: 0.9; }
.debris-barrel { left: 28%; bottom: 34px; font-size: 52px; transform: rotate(70deg); }
.debris-skull { left: 38%; bottom: 36px; font-size: 42px; opacity: 0.85; }
.debris-treasure { left: 54%; bottom: 32px; display: flex; gap: 4px; font-size: 38px; }

.p-coin {
  display: inline-block;
  animation: coinGlint 2.8s ease-in-out infinite alternate;
}
.p-coin.c1 { animation-delay: 0s; transform: rotate(-10deg); }
.p-coin.c2 { animation-delay: 0.6s; font-size: 32px; margin-top: 4px; }
.p-coin.c3 { animation-delay: 1.2s; font-size: 40px; filter: drop-shadow(0 0 10px #38bdf8); }
.p-coin.c4 { animation-delay: 1.8s; font-size: 30px; }

@keyframes coinGlint {
  0% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 12px #facc15) drop-shadow(0 0 20px rgba(250, 204, 21, 0.8)); transform: scale(1.1); }
}

.pirate-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

.p-sparkle {
  position: absolute;
  bottom: -30px;
  font-size: 24px;
  animation: sparkleRise 8s linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 8px #facc15);
}

@keyframes sparkleRise {
  0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { transform: translateY(-90vh) scale(1.1) rotate(180deg); opacity: 0; }
}

/* 2. Mercan Resifi Sahnesi */
.reef-scene-wrap {
  position: absolute;
  bottom: 35px;
  left: 20px;
  width: 580px;
  max-width: 52vw;
  z-index: 5;
  filter: drop-shadow(0 14px 30px rgba(244, 63, 94, 0.45));
  animation: reefGentleSway 7s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes reefGentleSway {
  0% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-3px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(-0.5deg); }
}

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

.anemone-wiggle {
  animation: anemoneWiggle 3.5s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes anemoneWiggle {
  0% { transform: translate(330px, 240px) scale(1) rotate(-3deg); }
  100% { transform: translate(330px, 240px) scale(1.05) rotate(4deg); }
}

.reef-relics {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 6;
}

.rf-relic {
  position: absolute;
  font-size: 52px;
  filter: drop-shadow(0 4px 8px rgba(244, 63, 94, 0.4));
}

.reef-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

.rf-sparkle {
  position: absolute;
  bottom: -30px;
  font-size: 24px;
  animation: sparkleRise 7s linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 8px #f472b6);
}

/* 3. Su Altı Harabeleri Sahnesi */
.ruins-scene-wrap {
  position: absolute;
  bottom: 38px;
  left: 20px;
  width: 600px;
  max-width: 52vw;
  z-index: 5;
  filter: drop-shadow(0 14px 32px rgba(2, 44, 34, 0.6));
  animation: ruinsStoneSway 9s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes ruinsStoneSway {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

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

.ruins-relics {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 6;
}

.r-relic {
  position: absolute;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.r-relic.r1 { left: 46%; bottom: 36px; font-size: 52px; }
.r-relic.r2 { left: 62%; bottom: 34px; font-size: 48px; }
.r-relic.r3 { left: 74%; bottom: 32px; font-size: 42px; }

.ruins-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

.r-sparkle {
  position: absolute;
  bottom: -30px;
  font-size: 22px;
  color: #5eead4;
  animation: sparkleRise 8.5s linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 8px #2dd4bf);
}

/* ========================================================
   KATMAN 3: ÖN PLAN DERİNLİK KATMANI (FOREGROUND LAYER)
   z-index: 14 (Balıkların önünden geçen derinlik hissi)
   Kritik Kural: pointer-events: none !important (Yemleme ve balık tıklamasını engellemez)
   ======================================================== */
.sea-floor-foreground {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  z-index: 14;
  overflow: hidden;
}

.foreground-sand-lip {
  position: absolute;
  bottom: 0;
  left: -2%;
  width: 104%;
  height: 38px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.18) 100%);
  border-radius: 40% 40% 0 0 / 14px 14px 0 0;
  pointer-events: none !important;
}

.aquarium__sand-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 95px;
  pointer-events: none !important;
  z-index: 1;
}

.fg-theme-scene-panoramic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 2;
}

.foreground-theme-element {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Klasik Ön Plan */
#aquarium.theme-classic .fg-classic,
#aquarium.theme-default .fg-classic,
#aquarium[data-theme="classic"] .fg-classic {
  opacity: 1;
}
.fg-classic-svg {
  position: absolute;
  right: 280px;
  bottom: 18px;
  width: 340px;
  max-width: 38vw;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

/* 2. Mercan Resifi Ön Plan */
#aquarium.theme-reef .fg-reef,
#aquarium.theme-deep_ocean .fg-reef,
#aquarium[data-theme="reef"] .fg-reef {
  opacity: 1;
}
.fg-reef-svg {
  position: absolute;
  right: 300px;
  bottom: 20px;
  width: 320px;
  max-width: 38vw;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(190, 18, 60, 0.45));
}

/* 3. Su Altı Harabeleri Ön Plan */
#aquarium.theme-ruins .fg-ruins,
#aquarium.theme-atlantis .fg-ruins,
#aquarium[data-theme="ruins"] .fg-ruins {
  opacity: 1;
}
.fg-amphora-bubbles {
  position: absolute;
  left: 64%;
  bottom: 45px;
  width: 50px;
  height: 140px;
  pointer-events: none;
}
.amphora-bubble {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(45, 212, 191, 0.3));
  border: 1px solid rgba(45, 212, 191, 0.6);
  opacity: 0;
  animation: amphoraBubbleRise 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.amphora-bubble.ab1 { animation-delay: 0s; transform: scale(0.8); }
.amphora-bubble.ab2 { animation-delay: 1.4s; width: 18px; height: 18px; left: 42%; }
.amphora-bubble.ab3 { animation-delay: 2.7s; width: 12px; height: 12px; left: 58%; }

@keyframes amphoraBubbleRise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 0.85; }
  80% { opacity: 0.85; }
  100% { transform: translateY(-160px) scale(1.2); opacity: 0; }
}

/* 4. Hazine Gemisi Ön Plan */
#aquarium.theme-treasure .fg-treasure,
#aquarium.theme-pirate_shipwreck .fg-treasure,
#aquarium[data-theme="treasure"] .fg-treasure {
  opacity: 1;
}
.fg-treasure-sparkles {
  position: absolute;
  left: 70%;
  bottom: 35px;
  display: flex;
  gap: 12px;
  pointer-events: none;
}
.t-sparkle {
  display: inline-block;
  font-size: 24px;
  filter: drop-shadow(0 0 10px #facc15);
  animation: treasureSparkleGlint 2.4s ease-in-out infinite alternate;
}
.t-sparkle.ts1 { animation-delay: 0s; font-size: 22px; }
.t-sparkle.ts2 { animation-delay: 0.8s; font-size: 26px; }
.t-sparkle.ts3 { animation-delay: 1.6s; font-size: 20px; }

@keyframes treasureSparkleGlint {
  0% { transform: scale(0.85) rotate(-5deg); opacity: 0.4; filter: drop-shadow(0 0 4px #f59e0b); }
  50% { transform: scale(1.25) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 16px #fde047) drop-shadow(0 0 25px rgba(250, 204, 21, 0.9)); }
  100% { transform: scale(0.9) rotate(-3deg); opacity: 0.5; filter: drop-shadow(0 0 6px #f59e0b); }
}


/* ========================================================
   AKVARYUM TEMALARI MODALI STİLLERİ
   ======================================================== */
.theme-modal-card {
  max-width: 650px;
  width: 94%;
  padding: 26px 28px;
  border-radius: 28px;
  text-align: left;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 18px 0 24px 0;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}

.theme-card {
  background: white;
  border: 2.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.theme-card:hover {
  transform: translateY(-4px);
  border-color: #38bdf8;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.15);
}

.theme-card.active {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
}

.theme-card-banner {
  height: 85px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}

.theme-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  color: #fef08a;
  border: 1px solid rgba(250, 204, 21, 0.6);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
}

.theme-card-info h4 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-card-info p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.theme-card-active-check {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  background: #10b981;
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

.theme-card.active .theme-card-active-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.theme-btn-apply {
  background: linear-gradient(135deg, #0284c7, #6366f1) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
}

.theme-btn-apply:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5) !important;
}

/* Erişilebilirlik: Hareket Azaltma Tercihi (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .light-ray,
  .seaweed,
  .bubble,
  .classic-scene-wrap,
  .vallis-leaf,
  .cl-bubble,
  .pirate-shipwreck-wrap,
  .ruins-scene-wrap,
  .reef-scene-wrap,
  .anemone-wiggle,
  .p-coin,
  .p-sparkle,
  .r-sparkle,
  .rf-sparkle,
  .amphora-bubble,
  .t-sparkle,
  .svg-plant,
  .svg-plant--delayed,
  .svg-sway-slow,
  .svg-sparkle {
    animation: none !important;
    transition: none !important;
  }
}

/* ŞİFREMİ UNUTTUM & GELİŞMİŞ GİRİŞ STİLLERİ */
.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.auth-link-forgot {
  font-size: 12.5px;
  color: #0284c7;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s;
}

.auth-link-forgot:hover {
  color: #0369a1;
  text-decoration: underline;
}

.auth-link-back {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.auth-link-back:hover {
  color: #0f172a;
  text-decoration: underline;
}

.auth-input-hint {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
  margin-top: 2px;
}

.auth-success {
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  display: none;
}

@media (max-height: 600px) {
  .modal-logo {
    height: 160px;
    margin-bottom: 8px;
  }
  .modal-card {
    padding: 18px 24px;
  }
}
  .modal-card {
    padding: 22px;
  }
}


/* ========================================================
   MOBİL CİHAZLAR İÇİN BALIK BOYUTLANDIRMASI & OPTİMİZASYON
   ======================================================== */
@media (max-width: 768px) {
  .fish-container {
    width: 68px;
    height: 68px;
  }

  .fish-sprite {
    font-size: 34px;
  }

  .fish-sprite-img {
    width: 46px;
    height: 46px;
  }

  .fish-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    max-width: 85px;
    margin-top: 1px;
    border-width: 1px;
  }

  /* Mobilde aksesuarların balık kafasına oturması için orantılı ölçekleme */
  .fish-accessory.acc-crown { font-size: 20px; top: -12px; left: 52%; }
  .fish-accessory.acc-party { font-size: 20px; top: -15px; left: 52%; }
  .fish-accessory.acc-pirate { font-size: 21px; top: -13px; left: 50%; }
  .fish-accessory.acc-bow { font-size: 16px; top: -7px; left: 60%; }
  .fish-accessory.acc-glasses { font-size: 15px; top: 7px; left: 56%; }
  .fish-accessory.acc-chef { font-size: 19px; top: -14px; left: 50%; }
  .fish-accessory.acc-star { font-size: 16px; top: -9px; left: 50%; }
  .fish-accessory.acc-flower { font-size: 16px; top: -7px; left: 62%; }
  .fish-accessory.acc-snorkel { font-size: 17px; top: 5px; left: 56%; }
  .fish-accessory.acc-detective { font-size: 19px; top: -12px; left: 50%; }

  .float-text {
    font-size: 20px;
  }
}


/* ========================================================
   SOL ÜST KONTROL BARI & ANİMASYONLU ARTI (+) BUTONU
   ======================================================== */
.top-left-bar {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.top-left-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.top-left-logo:hover {
  transform: scale(1.08);
}

/* Şık ve Animasyonlu Artı (+) Butonu */
.btn-control-toggle {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 16px 0 10px;
  font-weight: 800;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  animation: controlPulseHalo 3s infinite;
}

@keyframes controlPulseHalo {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6), 0 4px 18px rgba(37, 99, 235, 0.45);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0), 0 6px 22px rgba(37, 99, 235, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0), 0 4px 18px rgba(37, 99, 235, 0.45);
  }
}

.btn-control-toggle:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 24px rgba(79, 70, 229, 0.55);
}

.btn-control-toggle:active {
  transform: translateY(0) scale(0.97);
}

.btn-toggle-plus {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-control-toggle:hover .btn-toggle-plus {
  transform: rotate(90deg) scale(1.18);
  background: rgba(255, 255, 255, 0.35);
}

.btn-toggle-text {
  letter-spacing: 0.2px;
}

/* ========================================================
   YÖNETİM MODAL STİLLERİ
   ======================================================== */
.control-modal-card {
  max-width: 500px !important;
  width: 92% !important;
  border-radius: 24px !important;
  overflow: hidden;
  padding: 0 !important;
}

.control-modal-content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 75vh;
  overflow-y: auto;
}

.control-card-section {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  transition: border-color 0.2s;
}

.control-card-section:hover {
  border-color: #cbd5e1;
}

.control-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.control-section-icon {
  font-size: 18px;
}

.control-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.control-field label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.control-field input,
.control-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: white;
  outline: none;
  transition: all 0.2s;
}

.control-field input:focus,
.control-field select:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-modal-add-fish {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
  margin-top: 4px;
}

.btn-modal-add-fish:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-1px);
}

.btn-modal-theme {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
  transition: all 0.2s;
}

.btn-modal-theme:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-1px);
}

.arrow-right {
  font-size: 16px;
  transition: transform 0.2s;
}

.btn-modal-theme:hover .arrow-right {
  transform: translateX(4px);
}

.control-footer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f1f5f9;
}

.user-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.user-avatar-icon {
  font-size: 24px;
  line-height: 1;
}

.user-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-role-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.user-meta strong {
  font-size: 13px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-modal-logout {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-modal-logout:hover {
  background: #dc2626;
  color: white;
  border-color: #b91c1c;
}

/* ========================================================
   ÖĞRENCİ LİSTESİ (SİL BUTONU) STİLLERİ
   ======================================================== */
.student-item-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.btn-student-delete {
  background: #fee2e2;
  color: #ef4444;
  border: 1px solid #fecaca;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s;
  padding: 0;
  line-height: 1;
}

.btn-student-delete:hover {
  background: #ef4444;
  color: white;
  border-color: #dc2626;
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* Mobilde Sol Üst ve Sağ Üst Butonlarının Y Ekseni ve Boyut Eşitlemesi */
@media (max-width: 768px) {
  .top-left-bar {
    top: 12px !important;
    left: 12px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .top-left-logo {
    height: 30px !important;
    width: auto !important;
    display: block !important;
  }

  .btn-control-toggle {
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 12px 0 7px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1 !important;
  }

  .btn-toggle-plus {
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* YavruBalıklarım Butonunun Sol Üst Butonla Birebir Aynı Y Hizası (top: 12px, height: 34px) */
  .btn-sidebar-toggle,
  .btn-sidebar-toggle.floating {
    top: 12px !important;
    right: 12px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .btn-sidebar-toggle .btn-toggle-icon {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .btn-sidebar-toggle .btn-toggle-text {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .btn-student-delete {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
}


/* ========================================================
   PWA & MOBİL UYGULAMA YÜKLEME ARAYÜZÜ (ANDROID & IOS)
   ======================================================== */

/* 1. Akıllı Kayan Mobil Kurulum Barı */
.pwa-install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  width: calc(100% - 32px);
  max-width: 460px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 99999;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  box-sizing: border-box;
}

.pwa-install-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.pwa-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pwa-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  background: #0284c7;
}

.pwa-banner-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pwa-banner-title {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.pwa-banner-desc {
  color: #94a3b8;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-pwa-install {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-pwa-install:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.6);
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
}

.btn-pwa-install:active {
  transform: translateY(0);
}

.btn-pwa-dismiss {
  background: transparent;
  color: #94a3b8;
  border: none;
  font-size: 22px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.btn-pwa-dismiss:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* 2. Yönetim Popup (Control Modal) İçi Uygulama Butonu */
.pwa-control-section {
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

.btn-modal-install-app {
  width: 100%;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.btn-modal-install-app:hover {
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  border-color: #34d399;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.16);
}

.btn-install-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-install-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  color: #047857;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-install-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #065f46;
  margin-top: 3px;
}

.btn-install-sub {
  font-size: 11.5px;
  color: #047857;
  opacity: 0.85;
}

.btn-install-action-icon {
  font-size: 20px;
  color: #059669;
  font-weight: bold;
  padding-left: 8px;
  transition: transform 0.2s ease;
}

.btn-modal-install-app:hover .btn-install-action-icon {
  transform: scale(1.2);
}

.pwa-installed-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 12px 14px;
}

.pwa-installed-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.pwa-installed-text strong {
  display: block;
  font-size: 13.5px;
  color: #166534;
}

.pwa-installed-text p {
  font-size: 11.5px;
  color: #15803d;
  margin: 2px 0 0 0;
}

/* 3. Kurulum Rehberi Modalı */
.pwa-guide-card {
  max-width: 440px;
  width: 90%;
}

.pwa-guide-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 20px 0;
}

.pwa-step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}

.pwa-step-num {
  background: #0284c7;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pwa-step-text {
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
}

.pwa-step-text strong {
  color: #0f172a;
}

/* Toast Bildirim */
.pwa-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: rgba(15, 23, 42, 0.95);
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 100000;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.pwa-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Mobilde Kurulum Barı */
@media (max-width: 480px) {
  .pwa-install-banner {
    bottom: 14px;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .pwa-banner-icon {
    width: 38px;
    height: 38px;
  }
  .pwa-banner-title {
    font-size: 13px;
  }
  .pwa-banner-desc {
    font-size: 10.5px;
  }
  .btn-pwa-install {
    padding: 7px 12px;
    font-size: 12px;
  }
}