@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ocean-abyss: #020713;
  --ocean-deep: #03152d;
  --ocean-mid: #06284f;
  --ocean-light: #0ea5e9;
  --ocean-cyan: #06b6d4;
  --ocean-teal: #14b8a6;
  --ocean-emerald: #10b981;
}

html {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--ocean-abyss);
  color: #f1f5f9;
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100%;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* DENİZ DERİNLİĞİ ARKA PLAN (Tamamen Kapsayıcıya Kilitli) */
.ocean-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 130% 90% at 50% -25%, rgba(14, 165, 233, 0.38), transparent 70%),
    radial-gradient(ellipse 100% 70% at 15% 10%, rgba(6, 182, 212, 0.28), transparent 60%),
    radial-gradient(ellipse 100% 80% at 85% 20%, rgba(20, 184, 166, 0.26), transparent 60%),
    linear-gradient(180deg, #062244 0%, #03152c 30%, #020713 100%);
}

/* SU YÜZEYİ DALGALANAN IŞIK ŞERİDİ */
.ocean-surface-wave {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(45, 212, 191, 0.35) 0%, rgba(14, 165, 233, 0.22) 40%, transparent 80%);
  filter: blur(35px);
  animation: surfacePulse 4.5s ease-in-out infinite alternate;
}

@keyframes surfacePulse {
  0% {
    transform: scaleX(0.95) scaleY(0.95);
    opacity: 0.65;
  }
  100% {
    transform: scaleX(1.05) scaleY(1.1);
    opacity: 1;
  }
}

/* 1. KATMAN: GÜNEŞ IŞINLARI (Mobilde Ekran Dışına Taşma Engellendi) */
.ocean-sunrays {
  position: fixed;
  top: -10vh;
  left: 0;
  width: 100%;
  height: 110vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: 
    conic-gradient(from 158deg at 50% -5%, 
      transparent 0deg, 
      rgba(56, 189, 248, 0.22) 14deg, 
      transparent 24deg, 
      rgba(45, 212, 191, 0.28) 38deg, 
      transparent 52deg, 
      rgba(14, 165, 233, 0.24) 72deg, 
      transparent 88deg, 
      rgba(20, 184, 166, 0.26) 112deg, 
      transparent 135deg);
  opacity: 0.9;
  filter: blur(20px);
  transform-origin: 50% 0%;
  animation: raySwayFast 6.5s ease-in-out infinite alternate;
}

/* 2. ÇAPRAZ KATMAN: DİNAMİK IŞIK SÜZMESİ */
.ocean-sunrays-secondary {
  position: fixed;
  top: -10vh;
  left: 0;
  width: 100%;
  height: 105vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: 
    conic-gradient(from 172deg at 50% -5%, 
      transparent 0deg, 
      rgba(6, 182, 212, 0.22) 18deg, 
      transparent 32deg, 
      rgba(45, 212, 191, 0.25) 56deg, 
      transparent 82deg, 
      rgba(56, 189, 248, 0.2) 106deg, 
      transparent 128deg);
  opacity: 0.8;
  filter: blur(24px);
  transform-origin: 50% 0%;
  animation: raySwaySecondaryFast 8s ease-in-out infinite alternate;
}

@keyframes raySwayFast {
  0% {
    transform: rotate(-4.5deg) scaleY(0.96);
    opacity: 0.7;
  }
  50% {
    transform: rotate(3deg) scaleY(1.12);
    opacity: 1;
  }
  100% {
    transform: rotate(-2.5deg) scaleY(1.04);
    opacity: 0.8;
  }
}

@keyframes raySwaySecondaryFast {
  0% {
    transform: rotate(4deg) scaleY(1.08);
    opacity: 0.95;
  }
  50% {
    transform: rotate(-3.5deg) scaleY(0.94);
    opacity: 0.65;
  }
  100% {
    transform: rotate(2deg) scaleY(1.1);
    opacity: 1;
  }
}

/* 3. KATMAN: YOĞUNLAŞTIRILMIŞ CAUSTICS SU KIRILMASI (Ekrandan Taşmaz) */
.ocean-caustics {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 600px;
  background: 
    radial-gradient(circle at 48% 22%, rgba(45, 212, 191, 0.32) 0%, transparent 45%),
    radial-gradient(circle at 62% 38%, rgba(14, 165, 233, 0.28) 0%, transparent 40%),
    radial-gradient(circle at 34% 48%, rgba(6, 182, 212, 0.26) 0%, transparent 50%),
    radial-gradient(circle at 50% 60%, rgba(20, 184, 166, 0.22) 0%, transparent 45%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  animation: causticUndulateFast 5.5s ease-in-out infinite alternate;
}

@keyframes causticUndulateFast {
  0% {
    transform: translateX(-50%) scale(0.95, 0.92) rotate(0deg);
    opacity: 0.7;
  }
  40% {
    transform: translateX(-47%) scale(1.1, 1.05) rotate(2deg);
    opacity: 1;
  }
  75% {
    transform: translateX(-53%) scale(0.96, 1.1) rotate(-2deg);
    opacity: 0.75;
  }
  100% {
    transform: translateX(-50%) scale(1.07, 0.96) rotate(1deg);
    opacity: 0.95;
  }
}

/* 4. KATMAN: YÜZEYE DOĞRU ÇIKAN IŞILTI ZERRE BUBBLELARI */
.ocean-water-ripples {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background-image: 
    radial-gradient(2px 2px at 25px 30px, rgba(45, 212, 191, 0.6), transparent),
    radial-gradient(3px 3px at 85px 75px, rgba(56, 189, 248, 0.5), transparent),
    radial-gradient(2.5px 2.5px at 160px 130px, rgba(20, 184, 166, 0.45), transparent),
    radial-gradient(3px 3px at 250px 190px, rgba(14, 165, 233, 0.55), transparent);
  background-size: 260px 200px;
  animation: waterMotesRiseFast 13s linear infinite;
  opacity: 0.65;
}

@keyframes waterMotesRiseFast {
  0% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-90px);
    opacity: 0.4;
  }
}

/* SEÇENEK 2: AAA STÜDYO BÜYÜK LOGO VİTRİNİ & YÜZEN KALKAN */
.hero-emblem-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: emblemShowcaseFloat 5.5s ease-in-out infinite;
}

.hero-emblem-showcase::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 36px;
  background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.55) 0%, rgba(20, 184, 166, 0.3) 45%, transparent 70%);
  filter: blur(28px);
  z-index: -1;
  animation: emblemAuraPulse 5.5s ease-in-out infinite alternate;
}

@keyframes emblemShowcaseFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes emblemAuraPulse {
  0%, 100% {
    opacity: 0.65;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Glassmorphism Kartlar */
.glass-card {
  background: rgba(4, 21, 45, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow: 0 12px 40px -10px rgba(2, 8, 20, 0.85);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(7, 32, 67, 0.75);
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: 0 16px 50px -5px rgba(6, 182, 212, 0.28);
}

/* Buton */
.btn-glow {
  position: relative;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  box-shadow: 0 0 35px -5px rgba(6, 182, 212, 0.6);
  transition: all 0.3s ease;
}

.btn-glow:hover {
  background: linear-gradient(135deg, #059669 0%, #0891b2 100%);
  box-shadow: 0 0 50px 8px rgba(45, 212, 191, 0.8);
  transform: translateY(-2px);
}

/* Fiyat Kartı Çerçevesi */
.ocean-border-glow {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.7) 0%, rgba(14, 165, 233, 0.4) 50%, rgba(2, 13, 29, 0.85) 100%);
  box-shadow: 0 20px 65px -15px rgba(6, 182, 212, 0.35);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #020914;
}
::-webkit-scrollbar-thumb {
  background: #0d3461;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* =========================================================
   MOBİL & DOKUNMATİK EKRAN OPTİMİZASYONLARI
   ========================================================= */

/* Dokunmatik butonlar ve linkler için çift tıklama gecikmesini ve istenmeyen kaymaları engelle */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Mobilde yatay taşmayı kesin olarak kilitleyen kapsayıcı kuralı */
main, section, header, footer, nav {
  max-width: 100vw;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  /* Mobilde yazı boyutları ve ferah satır aralıkları */
  body {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.01em;
  }

  /* Başlıkların mobilde ekrana tam oturması (kelime kırılmadan ferah görünüm) */
  h1 {
    font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
    line-height: 1.25 !important;
  }

  h2 {
    font-size: clamp(1.4rem, 5vw, 1.85rem) !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important;
  }

  /* Küçük rozetlerin (badge) mobilde rahat okunabilmesi (min 12px) */
  .text-\[10px\], .text-\[11px\] {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.1rem !important;
  }

  /* Dokunmatik hedefler için minimum 44px yükseklik kuralı */
  .btn-glow,
  button:not(.small-btn),
  a.btn-glow,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    min-height: 44px;
  }

  /* Mobilde kart içi boşlukların taşmaması */
  .glass-card {
    padding: 1.15rem !important;
  }

  /* Modal pencerelerin küçük ekranlarda taşmasını önleyen esnek kaydırma */
  #checkoutModal > div,
  #successModal > div {
    width: 94% !important;
    max-width: 94% !important;
    margin: 0 auto;
    padding: 1.25rem !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}