/* ============================================================
   ONYX WATER SPORTS — Unified Design System 2026
   Inspired by: Red Bull, GoPro, luxury yacht brands
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Background Scale — consistent ocean-dark palette */
  --bg-0:    #030810;   /* deepest — footer */
  --bg-1:    #060f1e;   /* primary base */
  --bg-2:    #091626;   /* alternate sections */
  --bg-3:    #0d1e33;   /* card surfaces */

  /* Accent */
  --cyan:        #00d4ff;
  --cyan-dim:    rgba(0, 212, 255, 0.18);
  --cyan-border: rgba(0, 212, 255, 0.22);
  --blue:        #0055ff;
  --gold:        #ffb84d;

  /* Text */
  --text-1: #eaf4ff;    /* primary — off-white, not harsh */
  --text-2: #8aabca;    /* secondary — muted */
  --text-3: #4e7091;    /* tertiary — very muted */

  /* Glass surfaces */
  --glass:        rgba(255,255,255,0.04);
  --glass-hover:  rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.07);
  --glass-border-hover: rgba(0,212,255,0.25);

  /* Spacing — 8px base scale */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  80px;
  --sp-8:  96px;
  --sp-9: 120px;

  /* Typography scale */
  --fs-h1:   clamp(44px, 7vw, 88px);
  --fs-h2:   clamp(30px, 4.5vw, 56px);
  --fs-h3:   clamp(18px, 2.5vw, 26px);
  --fs-body: clamp(14px, 1.5vw, 16px);
  --fs-sm:   13px;
  --fs-xs:   11px;

  /* Easing — consistent across entire site */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* ── Global Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', 'Space Grotesk', sans-serif;
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
  overflow-x: hidden;
  margin: 0;
}

.page-wrapper { background: var(--bg-1); }

/* Force dark — kill legacy white backgrounds */
.page-wrapper > *,
section,
footer,
header { background-color: transparent; }

/* ── Typography Normalization ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--text-1) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}
p, li, span, label, td { color: var(--text-2); line-height: 1.75; }
a { color: inherit; text-decoration: none; }

/* ── Pill / Badge — unified across all sections ────────────────  */
.pill, .sec-subtitle, .sss-pill, .hk-pill, .iletisim-pill,
.galeri-pill, .yorum-pill, .hizmet-pill, .blog-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--cyan-dim) !important;
  border: 1px solid var(--cyan-border) !important;
  color: var(--cyan) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  margin-bottom: var(--sp-2) !important;
}

/* ── Unified CTA Button ──────────────────────────────────────── */
.btn-primary, .vs-btn, .vs-btn.style4,
.iletisim-submit, .btn-cyan, .hdr-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%) !important;
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.2s var(--ease-std), box-shadow 0.2s var(--ease-std) !important;
  box-shadow: 0 4px 24px rgba(0,212,255,0.25) !important;
  text-decoration: none !important;
}
.btn-primary:hover, .vs-btn:hover, .vs-btn.style4:hover,
.iletisim-submit:hover, .btn-cyan:hover, .hdr-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 36px rgba(0,212,255,0.4) !important;
  color: #fff !important;
}

/* ── Section Backgrounds — smooth alternating ────────────────── */
#hakkimizda { background: var(--bg-1) !important; }
#hizmet     { background: var(--bg-2) !important; }
#foto       { background: var(--bg-1) !important; }
#yorum      { background: var(--bg-2) !important; }
#sss        { background: var(--bg-1) !important; }
#blog       { background: var(--bg-2) !important; }
#iletisim   { background: var(--bg-1) !important; }

/* ── Wave Dividers between sections ─────────────────────────── */
/* Gentle gradient fade — not hard cuts */
#hakkimizda,
#hizmet,
#foto,
#yorum,
#sss,
#blog,
#iletisim {
  position: relative;
}

/* Top gradient fade from previous section */
#hizmet::before,
#yorum::before,
#blog::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--bg-1) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

#hakkimizda::before,
#foto::before,
#sss::before,
#iletisim::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--bg-2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Bottom fade into next section */
#hakkimizda::after,
#foto::after,
#sss::after,
#iletisim::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-2) 100%);
  pointer-events: none;
  z-index: 1;
}

#hizmet::after,
#yorum::after,
#blog::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Section Padding — unified rhythm ───────────────────────── */
#hakkimizda, #hizmet, #foto, #yorum, #sss, #blog, #iletisim {
  padding: var(--sp-9) 0 !important;
}

/* ── Accent glow lines — between some sections ───────────────── */
#hizmet,
#yorum {
  border-top: 1px solid rgba(0,212,255,0.06) !important;
  border-bottom: 1px solid rgba(0,212,255,0.06) !important;
}

/* ── Glass Cards — unified ───────────────────────────────────── */
.glass-card,
.package-style1,
.testi-style5,
.yorum-card,
.iletisim-form-card,
.iletisim-info-card,
.sss-item,
.hk-feat {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-lg) !important;
  transition: border-color 0.3s var(--ease-std), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}
.glass-card:hover,
.package-style1:hover,
.testi-style5:hover,
.yorum-card:hover,
.iletisim-info-card:hover,
.sss-item:hover {
  border-color: var(--glass-border-hover) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,255,0.08) !important;
}

/* ── Header ─────────────────────────────────────────────────── */
#site-header {
  z-index: 9999 !important;
  background: transparent !important;
}
#site-header.scrolled {
  background: rgba(6,15,30,0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 8px 40px rgba(0,0,0,0.5) !important;
}

/* Kill ALL legacy header white boxes */
.vs-header,
.vs-header.header-layout4,
.header-layout4 .sticky-wrapper,
.header-layout4 .sticky-wrapper .header-box,
.header-layout4 .sticky-wrapper .sticky-active,
.header-box,
.sticky-wrapper,
.sticky-active,
.will-sticky .sticky-active,
.will-sticky .sticky-active.active {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.header-layout4 .sticky-wrapper .header-box::before,
.header-layout4 .header-box::before {
  display: none !important;
}

/* ── Hero ────────────────────────────────────────────────────── */
#hero { background: var(--bg-1); }
.hero-slide {
  background-color: var(--bg-1) !important;
}

/* ── Services / Hizmetler ────────────────────────────────────── */
.package-style1 {
  background: var(--glass) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin: 6px !important;
}
.package-img img {
  transition: transform 0.6s var(--ease-out) !important;
}
.package-style1:hover .package-img img {
  transform: scale(1.06) !important;
}
.package-title a { color: var(--text-1) !important; }
.package-title a:hover { color: var(--cyan) !important; }
.package-meta a { color: var(--text-2) !important; }
.package-price { color: var(--cyan) !important; font-weight: 700 !important; }
.package-review .fas.fa-star { color: var(--gold) !important; }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery-item {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
}
.gallery-item img {
  transition: transform 0.5s var(--ease-out) !important;
}
.gallery-item:hover img { transform: scale(1.06) !important; }

/* ── Testimonials ────────────────────────────────────────────── */
.yorum-card { border-radius: var(--r-lg) !important; }
.yorum-text { color: var(--text-2) !important; font-style: italic; }
.yorum-name { color: var(--text-1) !important; font-weight: 700 !important; }
.yorum-role { color: var(--cyan) !important; font-size: var(--fs-xs) !important; }
.yorum-stars i { color: var(--gold) !important; }

/* ── Contact form inputs ─────────────────────────────────────── */
.iletisim-input, .iletisim-textarea {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-1) !important;
}
.iletisim-input:focus, .iletisim-textarea:focus {
  border-color: var(--cyan-border) !important;
  box-shadow: 0 0 0 3px var(--cyan-dim) !important;
}
.iletisim-input::placeholder, .iletisim-textarea::placeholder {
  color: var(--text-3) !important;
}

/* ── SSS Accordion ───────────────────────────────────────────── */
.sss-question span { color: var(--text-1) !important; }
.sss-answer-inner  { color: var(--text-2) !important; }
.sss-item.active   { border-color: var(--cyan-border) !important; }

/* ── Footer ──────────────────────────────────────────────────── */
.onyx-footer  { background: var(--bg-0) !important; }
.footer-wrapper, .footer-wrapper.footer-layout1 {
  background: var(--bg-0) !important;
  border-top: 1px solid rgba(0,212,255,0.06) !important;
}
.onyx-footer-divider {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cyan) 25%,
    rgba(0,212,255,0.6) 50%,
    var(--cyan) 75%,
    transparent 100%
  ) !important;
  height: 1px !important;
}
.widget_title { color: var(--text-1) !important; border-color: var(--glass-border) !important; }
.widget_title::after { background: linear-gradient(to right, var(--blue), var(--cyan)) !important; }
.footer-text, .onyx-footer-desc { color: var(--text-2) !important; }

/* ── Scroll Reveal — unified animation ───────────────────────── */
.reveal, .hk-reveal, .hk-reveal-left,
.package-style1, .sss-item, .blog-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.hk-reveal-left { transform: translateX(-24px) !important; }
.reveal.visible, .hk-reveal.visible, .hk-reveal-left.visible,
.package-style1.visible, .sss-item.visible, .blog-card.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Gallery & reviews: always visible (marquee + masonry handle their own display) */
.gallery-item { opacity: 1 !important; transform: none !important; }
.yorum-card   { opacity: 1 !important; transform: none !important; }

/* ── Stagger delays for grid items ──────────────────────────── */
.package-style1:nth-child(1), .yorum-card:nth-child(1), .gallery-item:nth-child(1) { transition-delay: 0s; }
.package-style1:nth-child(2), .yorum-card:nth-child(2), .gallery-item:nth-child(2) { transition-delay: 0.07s; }
.package-style1:nth-child(3), .yorum-card:nth-child(3), .gallery-item:nth-child(3) { transition-delay: 0.14s; }
.package-style1:nth-child(4), .yorum-card:nth-child(4), .gallery-item:nth-child(4) { transition-delay: 0.21s; }
.package-style1:nth-child(5), .yorum-card:nth-child(5)                             { transition-delay: 0.28s; }
.package-style1:nth-child(6), .yorum-card:nth-child(6)                             { transition-delay: 0.35s; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.45); }

/* ── Old template cleanup ────────────────────────────────────── */
.shape-mockup, .sideMenuToggler, .sidemenu-wrapper,
.vs-menu-wrapper, .popup-search-box, .custom-cursor,
.custom-cursor__cursor, .custom-cursor__cursor-two,
.benefits-element1, .header-links, .header-top,
.header-contact { display: none !important; }

.wow { visibility: visible !important; animation: none !important; opacity: 1 !important; }
.scrollToTop.scroll-btn { display: none !important; } /* footer has its own */

/* ── Floating social buttons — unified look ──────────────────── */
.whatsapp, .telefon, .instagram,
.onyx-floating-phone, .onyx-floating-whatsapp, .onyx-floating-instagram {
  z-index: 9998 !important;
}

/* ── Magnific Popup dark theme ───────────────────────────────── */
.mfp-bg { background: rgba(3,8,16,0.95) !important; }
.mfp-arrow { color: var(--cyan) !important; }
.mfp-close { color: var(--text-1) !important; }

/* ── Selection color ─────────────────────────────────────────── */
::selection { background: rgba(0,212,255,0.25); color: #fff; }

/* ── Focus outline ───────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #hakkimizda, #hizmet, #foto, #yorum, #sss, #blog, #iletisim {
    padding: var(--sp-7) 0 !important;
  }
}
@media (max-width: 768px) {
  #hakkimizda, #hizmet, #foto, #yorum, #sss, #blog, #iletisim {
    padding: var(--sp-6) 0 !important;
  }
  .hk-reveal-left { transform: translateY(24px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   ONYX 2026 — Dynamic Animations & Enhanced Sections
   ═══════════════════════════════════════════════════════════ */

/* ── Animated section glow lines ─────────────────────────── */
@keyframes glowLineX {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── Hizmetler section: floating accent ──────────────────── */
#hizmet {
  position: relative;
  overflow: hidden;
}
#hizmet::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(5,11,20,0.8));
  pointer-events: none;
}

/* ── Gallery: better hover glow ─────────────────────────── */
.gallery-item {
  transition: transform 0.4s cubic-bezier(.22,.68,0,1.2), border-color 0.3s ease, box-shadow 0.35s ease !important;
}
.gallery-item:hover {
  transform: translateY(-4px) scale(1.01);
}

/* ── Hizmet cards: extra glow on hover ───────────────────── */
.hizmet-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,180,220,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hizmet-card:hover::after { opacity: 1; }

/* ── Review cards: neon accent on hover ──────────────────── */
.yorum-card {
  transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.yorum-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0,212,255,0.3) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.4), 0 0 20px rgba(0,180,220,0.08) !important;
}

/* ── Floating social buttons: glow pulse ─────────────────── */
@keyframes socialPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(77,194,71,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(77,194,71,0); }
}
.whatsapp a {
  animation: socialPulse 2.4s ease-in-out infinite;
}

/* ── Section title underline animate ─────────────────────── */
.hk-title::after,
.galeri-title::after,
.yorum-title::after {
  content: '';
  display: block;
  width: 48px; height: 3px;
  background: linear-gradient(90deg, #00d4ff, #0055ff);
  border-radius: 2px;
  margin: 14px auto 0;
  animation: glowLineX 3s linear infinite;
  background-size: 200% 100%;
}

/* ── Stats section: number count up helper ───────────────── */
.istatik-number {
  display: inline-block;
  background: linear-gradient(135deg, #00d4ff 0%, #0055ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hakkimizda section: animated bg ─────────────────────── */
#hakkimizda {
  position: relative;
  overflow: hidden;
}
#hakkimizda::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,100,200,0.07) 0%, transparent 70%);
  top: -100px; right: -100px;
  border-radius: 50%;
  animation: meshMove2 20s ease-in-out infinite;
}

/* ── FAQ section glow ────────────────────────────────────── */
#sss {
  position: relative;
  overflow: hidden;
}
#sss::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,180,220,0.06) 0%, transparent 70%);
  bottom: -50px; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

/* ── Blog cards: image zoom smoother ─────────────────────── */
.blog-card-img img, .blog-img img {
  transition: transform 0.6s cubic-bezier(.22,.68,0,1.2) !important;
}

/* ── Contact section floating glow ───────────────────────── */
#iletisim {
  position: relative;
  overflow: hidden;
}
#iletisim::before {
  content: '';
  position: absolute;
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(0,150,220,0.06) 0%, transparent 70%);
  top: 0; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}

/* ── Scroll-to-top button ────────────────────────────────── */
#scrollTop, .onyx-scroll-top {
  position: fixed !important;
  bottom: 32px !important;
  right: 20px !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0,180,220,0.15) !important;
  border: 1px solid rgba(0,212,255,0.35) !important;
  color: #00d4ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background 0.25s, transform 0.25s !important;
  backdrop-filter: blur(10px) !important;
  z-index: 9990 !important;
}
#scrollTop:hover, .onyx-scroll-top:hover {
  background: rgba(0,180,220,0.28) !important;
  transform: translateY(-3px) !important;
}

/* ── Keyframes for orb animations (used in sections) ──────── */
@keyframes meshMove2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-50px,60px) scale(1.05); }
  66%  { transform: translate(40px,-30px) scale(1.1); }
}