/* ======================================================
   HERO SECTION - OKYANUS ARKA PLANI (dark mode destekli)
   Bu bloğu assets/css/hero.css içine ekle / mevcut ocean
   kurallarının üzerine yaz.
   ====================================================== */

.bg-soft-accent{ background:rgba(201,152,47,0.12); }
.text-accent{ color:var(--accent, #c9982f); }
.btn-accent{ background:var(--accent, #c9982f); border-color:var(--accent, #c9982f); }

/* ============ HERO SECTION TEMEL ============ */
.hero-section{
  position:relative;
  overflow:hidden;
  background:#eef6fb;
  transition: background 0.4s ease;
}
.hero-section .container{
  position:relative;
  z-index:3;
}

/* ============ OKYANUS ARKA PLAN KATMANI ============ */
.hero-ocean-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background: linear-gradient(180deg, #eaf6ff 0%, #cdeaff 30%, #8fd0ee 55%, #3f9dc4 78%, #1f6f96 100%);
  transition: background 0.4s ease;
}

/* okunabilirlik için sol tarafta sis efekti (açık tema) */
.hero-ocean-fade{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(90deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.75) 25%,
      rgba(255,255,255,0.35) 45%,
      rgba(255,255,255,0.05) 65%,
      rgba(255,255,255,0) 100%);
  pointer-events:none;
  transition: background 0.4s ease;
}

.hero-ocean-bg .scene-layer{
  position:absolute;
  inset:0;
  z-index:1;
}

/* dalga katmanları */
.wave{
  position:absolute;
  left:0;
  width:220%;
  height:70px;
  opacity:0.5;
}
.wave svg{ width:100%; height:100%; display:block; }
.wave1{ top:0px;  animation: waveMove 7s linear infinite; opacity:.55;}
.wave2{ top:18px; animation: waveMove 11s linear infinite reverse; opacity:.35;}
.wave3{ top:34px; animation: waveMove 16s linear infinite; opacity:.25;}
@keyframes waveMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-45%); }
}

/* ============ BALIKLAR ============ */
.fish{
  position:absolute;
  top:0;
  left:-60px;
  width:38px;
  z-index:2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
  animation-name: swimRight;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.fish svg{ width:100%; display:block; }
@keyframes swimRight{
  0%   { left:-60px; transform: scaleX(-1); }
  48%  { left:105%;  transform: scaleX(-1); }
  50%  { left:105%;  transform: scaleX(1); }
  98%  { left:-60px; transform: scaleX(1); }
  100% { left:-60px; transform: scaleX(-1); }
}
.fish-bob{ animation: fishBob 1.8s ease-in-out infinite; }
@keyframes fishBob{
  0%,100%{ margin-top:0; }
  50%{ margin-top:10px; }
}
.tail{ animation: tailWag .5s ease-in-out infinite; transform-origin: 32px 10px; }
@keyframes tailWag{
  0%,100%{ transform: rotate(-16deg); }
  50%{ transform: rotate(16deg); }
}

.fish-1{ top:38%; width:34px; animation-duration:11s; }
.fish-2{ top:62%; width:42px; animation-duration:15s; animation-delay:-4s; }
.fish-3{ top:75%; width:28px; animation-duration:9s; animation-delay:-7s; }

/* ============ KÖPEK BALIĞI ============ */
.shark{
  position:absolute;
  width:100px;
  top:50%;
  z-index:2;
  opacity:0.85;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2));
  animation: swimLeft 20s linear infinite;
}
.shark svg{ width:100%; display:block; }
@keyframes swimLeft{
  0%   { left:105%;   transform: scaleX(1); }
  48%  { left:-140px; transform: scaleX(1); }
  50%  { left:-140px; transform: scaleX(-1); }
  98%  { left:105%;   transform: scaleX(-1); }
  100% { left:105%;   transform: scaleX(1); }
}
.sharkTail{ animation: sharkTailWag .8s ease-in-out infinite; transform-origin: 95px 25px; }
@keyframes sharkTailWag{
  0%,100%{ transform: rotate(-9deg); }
  50%{ transform: rotate(9deg); }
}

/* ============ DENİZ YILDIZI ============ */
.starfish{
  position:absolute;
  bottom:4%;
  right:6%;
  width:52px;
  z-index:2;
  animation: starBreathe 3.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
.starfish svg{ width:100%; display:block; }
@keyframes starBreathe{
  0%,100%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.08) rotate(4deg); }
}

/* ============ KARTLARIN ÜSTTE KALMASI (düzeltilmiş) ============ */
/* NOT: hero-card-secondary ve hero-shape-bg zaten Bootstrap'ın
   position-absolute class'ıyla konumlanıyor, position değerine
   dokunmuyoruz, sadece z-index veriyoruz. */
.hero-card{ position:relative; z-index:3; }
.hero-shape-bg, .hero-card-secondary{ z-index:3; }
.hero-card-secondary{
  bottom:-20px;
  left:-20px;
}


/* ======================================================
   DARK MODE (body.dark-mode)
   ====================================================== */
body.dark-mode .hero-section{
  background:#0a1017;
}

body.dark-mode .hero-ocean-bg{
  background: linear-gradient(180deg,
      #0e1c26 0%,
      #0c2536 28%,
      #0a3350 52%,
      #072944 76%,
      #041823 100%);
}

/* karanlık modda okunabilirlik sisi de koyu tona dönüyor */
body.dark-mode .hero-ocean-fade{
  background: linear-gradient(90deg,
      rgba(10,16,23,0.94) 0%,
      rgba(10,16,23,0.8) 25%,
      rgba(10,16,23,0.4) 45%,
      rgba(10,16,23,0.08) 65%,
      rgba(10,16,23,0) 100%);
}

/* dalgalar karanlıkta daha koyu/canlı tonlar */
body.dark-mode .wave1 svg path{ fill:#1c4f6e; }
body.dark-mode .wave2 svg path{ fill:#123a52; }
body.dark-mode .wave3 svg path{ fill:#0b2638; }

/* balık ve köpek balığı hafif parlaklık azaltma, aksırı kontrast olmasın */
body.dark-mode .fish,
body.dark-mode .shark,
body.dark-mode .starfish{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) brightness(0.92);
}

/* hero-card / hero-card-secondary karanlık modda site genelindeki
   dark-mode kartlarınla aynı görünsün istiyorsan burayı kendi
   style.css'indeki dark-mode kart renklerine göre uyarlayabilirsin.
   Örnek: */
body.dark-mode .hero-card{
  background:#111a24 !important;
  color:#e8edf2;
}
body.dark-mode .hero-card .text-muted{
  color:#9aa7b5 !important;
}
body.dark-mode .hero-card h5{
  color:#f0f3f6;
}