/* ============================================================
   DENİZ AI — UZAY TEMASI v2 (HIZ ÖNCELİKLİ)
   Blur yok (mobilde pahalı), sade cam hissi, neon kenar.
   Kaldırmak için index.php'deki link satırını silmek yeterli.
   ============================================================ */

/* 1) Derin uzay zemini — HTML'e taşındı ki gezegenler üstte kalsın */
html {
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(58,214,195,.09), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(255,122,26,.06), transparent 62%),
    linear-gradient(180deg, #04070f 0%, #070b18 45%, #0a0f22 100%) !important;
  background-attachment: fixed !important;
}
/* body şeffaf: evren katmanı (canvas) hiçbir yerde örtülmesin */
body { background: transparent !important; }

/* 2) Bölümler şeffaf — yıldızlar arkadan geçsin */
section, .map-section-full, .pricing-section,
.complaint-section, .register-section { background-color: transparent !important; }

/* 3) Kartlar: cam hissi (blur YOK — hız için) + neon kenar */
.stat, .price-card, .guven-card, .device-card, .makale-card, details,
.form-group input, .form-group select, .form-group textarea {
  background: rgba(12,20,38,.62) !important;
  border: 1px solid rgba(58,214,195,.18) !important;
}
.stat:hover, .price-card:hover, .device-card:hover {
  border-color: rgba(58,214,195,.42) !important;
}

/* 4) Sohbet penceresi ve üst bar */
header, .topbar, nav, .chat-box, .chat-window {
  background: rgba(6,11,24,.86) !important;
  border-color: rgba(58,214,195,.14) !important;
}

/* 5) Deniz robotu: nefes alır, gözü kırpar (boştayken çok sakin) */
.deniz-avatar {
  animation: denizNefes 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes denizNefes {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.02); }
}
.deniz-avatar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 26px rgba(58,214,195,.22);
  animation: denizGozKirp 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes denizGozKirp {
  0%, 92%, 100% { opacity: .35; }
  94%           { opacity: 0; }
  96%           { opacity: .7; }
}
/* Deniz konuşurken/düşünürken canlansın (JS 'aktif' sınıfı ekleyebilir) */
.deniz-avatar.aktif { animation: denizNefes 1.6s ease-in-out infinite; }

/* 6) Hareket azaltma tercihi: her şey sakin */
@media (prefers-reduced-motion: reduce) {
  body { background: linear-gradient(180deg,#04070f,#0a0f22) !important; }
  .deniz-avatar, .deniz-avatar::after { animation: none !important; }
}


/* ============================================================
   7) EVREN HER YERDE GÖRÜNSÜN — opak katmanları şeffaflaştır
   ============================================================ */
.hero, .hero-content, .devices-section, .deniz-panel, .chat-area,
.container, .footer, .footer-grid, .footer-bottom, .device-grid-hero,
.global-pricing, .form-card, .device-detail, .blog-grid {
  background-color: transparent !important;
  background-image: none !important;
}

/* Hero bölgesine sadece hafif bir uzay ışıması bırak */
.hero {
  background: radial-gradient(700px 380px at 50% -10%, rgba(58,214,195,.10), transparent 62%) !important;
}

/* Sohbet paneli ve kartlar okunur kalsın (yarı saydam koyu) */
.deniz-panel, .chat-area, .form-card, .device-detail, .blog-kart {
  background: rgba(8,14,28,.62) !important;
  border: 1px solid rgba(58,214,195,.16) !important;
}
.chat-bubble { background: rgba(12,22,42,.78) !important; }

/* Üst bar ve alt bilgi: uzayı kapatmasın */
.footer { background: rgba(4,7,15,.55) !important; }
.footer-bottom { background: transparent !important; }

/* Deniz avatarı canlı dursun */
.deniz-avatar { position: relative; }
.deniz-pulse { box-shadow: 0 0 24px rgba(58,214,195,.28) !important; }


/* ============================================================
   8) HERO ve style.css KATMANLARI — uzayı örtmesinler
   ============================================================ */
.hero {
  background: transparent !important;
  min-height: 88vh !important;
}
.hero::before, .hero::after { display: none !important; }

/* style.css'ten gelen tüm opak zeminler */
.devices-section, .deniz-section, .map-section-full, .guven-section,
.pricing-section, .complaint-section, .register-section, .blog-section,
.bolgeler-section, #deniz-ai, #cihazlar, #harita, #bolgeler {
  background: transparent !important;
}

/* Kartlar/paneller yarı saydam kalsın (okunurluk) */
.device-card, .guven-card, .price-card, .makale-card, .blog-kart,
.deniz-panel, .chat-area, .form-card, .stat, details, .device-detail {
  background: rgba(8,14,28,.60) !important;
  border: 1px solid rgba(58,214,195,.16) !important;
}
.chat-bubble { background: rgba(12,22,42,.80) !important; }
.chat-avatar { background: rgba(58,214,195,.12) !important; }

/* Alt bilgi ve üst bar hafif koyu, uzay geçsin */
.footer { background: rgba(4,7,15,.50) !important; }
nav, header, .topbar { background: rgba(6,11,24,.80) !important; }


/* ============================================================
   9) KATMAN DÜZENİ — evren en altta, içerik üstünde (KESİN)
   ============================================================ */
#uzayKatman {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* body'nin doğrudan çocukları evrenin üstünde dursun */
body > *:not(#uzayKatman) {
  position: relative;
  z-index: 1;
}


/* ============================================================
   10) GENİŞ ŞEFFAFLIK — evren tüm sayfada görünsün
   Kural: büyük bölümler/sarmalayıcılar şeffaf,
   sadece kutucuk/kart/panel yarı saydam kalır.
   ============================================================ */
body > section,
body > div:not(#uzayKatman),
main, .container, .wrap, .content,
section, .devices-section, .deniz-section, .guven-section,
.blog-section, .bolgeler-section, .stats, .hero-stats {
  background: transparent !important;
  background-image: none !important;
}

/* Okunurluk için sadece bunlar yarı saydam kalsın */
.device-card, .guven-card, .price-card, .makale-card, .blog-kart,
.deniz-panel, .chat-area, .chat-bubble, .form-card, .stat,
details, .device-detail, .disclaimer-box, .form-group input,
.form-group select, .form-group textarea, nav, header, .topbar, .footer {
  background: rgba(8,14,28,.62) !important;
  border-color: rgba(58,214,195,.16) !important;
}
.chat-bubble { background: rgba(12,22,42,.80) !important; }
.footer { background: rgba(4,7,15,.55) !important; }


/* ============================================================
   11) YILDIZLAR HER YERDE AKSIN — katman bir tık öne
   Evren: z-index 1 (arka planların üstünde)
   İçerik: z-index 2 (yıldızların üstünde, okunur)
   ============================================================ */
#uzayKatman { z-index: 1 !important; }
#yildizTozu { position: fixed !important; z-index: 2147483647 !important; }
body > *:not(#uzayKatman):not(#yildizTozu) { position: relative; z-index: 2; }


/* ============================================================
   12) EVREN KENDİ ZEMİNİNİ ÇİZİYOR
   html sade siyah kalır, canvas derin uzayı çizer,
   yıldızlar koyu zemin üzerinde parlar.
   ============================================================ */
html { background: #04070f !important; }
body { background: transparent !important; }


/* ============================================================
   13) DAHA FAZLA ŞEFFAFLIK — Onur Usta isteği: yıldız tozu
   kartların arkasından net süzülsün. Okunurluk için hâlâ
   koyu bir zemin var, ama daha ince (opaklık düşürüldü).
   ============================================================ */
.device-card, .guven-card, .price-card, .makale-card, .blog-kart,
.deniz-panel, .chat-area, .form-card, .stat, details, .device-detail,
.disclaimer-box {
  background: rgba(8,14,28,.42) !important;
  border-color: rgba(58,214,195,.22) !important;
  backdrop-filter: none !important; /* mobilde hız için blur yok */
}
.chat-bubble { background: rgba(12,22,42,.60) !important; }
nav, header, .topbar { background: rgba(6,11,24,.65) !important; }
.footer { background: rgba(4,7,15,.40) !important; }

/* Metinlerin hâlâ net okunması için hafif gölge */
.device-card, .device-detail, .deniz-panel, .form-card {
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}