/* =========================
   THEME VARIABLES
   ========================= */
:root {
  --bg-1: #0a0f1f;
  --bg-2: #121a33;
  --accent: #7cc7ff;   /* electric blue */
  --accent-2: #a78bfa; /* violet */
  --text: #e6f0ff;
  --muted: #9db0cc;
  --teal: #2C7A7B;
  --navy: #1E3A8A;
  --card: #ffffff;
  --ink: #1A202C;
}

/* =========================
   GLOBAL
   ========================= */
body {
  background: #f6f8fb;
  color: #111827;
}

/* Scroll progress bar */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(124,199,255,.6);
  z-index: 10000;
}

/* Glass nav on scroll */
#navbar {
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
#navbar.is-scrolled {
  background: rgba(10,15,31,.55);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom-color: rgba(124,199,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Active link underline */
#navbar a.active {
  position: relative;
}
#navbar a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(124,199,255,.55);
}

/* =========================
   HERO (Electric Storm)
   ========================= */
#hero {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-position: center;
  background-size: cover;
  height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

/* disable old overlay pseudo */
#hero::before { content: none !important; }

.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
  filter: contrast(110%);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}

.hero__content {
  position: relative; z-index: 2;
  max-width: 900px;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 24px;
  backdrop-filter: blur(10px) saturate(110%);
  background: linear-gradient(to bottom right, rgba(16,22,43,.55), rgba(7,10,20,.35));
  border: 1px solid rgba(124,199,255,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 80px rgba(124,199,255,.15) inset;
}
#hero .hero__content h1{
  margin: .5rem 0 .6rem;
  font-size: clamp(2rem, 5vw + .5rem, 4rem);
  line-height: 1.05; letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(124,199,255,.25);
  color: var(--text);
}
#hero .hero__content .lead{
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 1.5vw + .5rem, 1.25rem);
  color: var(--muted);
}

/* CTA buttons */
.cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:.9rem 1.1rem; border-radius:14px;
  font-weight:700; letter-spacing:.02em;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn--primary{
  color:#06121e;
  background: linear-gradient(90deg, #7cc7ff, #a78bfa);
  box-shadow: 0 8px 28px rgba(124,199,255,.35), inset 0 0 12px rgba(255,255,255,.35);
}
.btn--primary:hover{ transform: translateY(-1px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-canvas{ display:none; }
  .hero__content{ background: linear-gradient(to bottom right, rgba(16,22,43,.85), rgba(7,10,20,.65)); }
}

/* =========================
   SECTION TITLES & DIVIDERS
   ========================= */
.section-title{
  position: relative; display: inline-block; margin: 0 auto 1.25rem;
}
.section-title h2{
  position: relative; z-index:1; color: var(--ink);
}
.section-title::after{
  content:"";
  display:block;
  height:3px;
  margin:.75rem auto 0;
  width:140px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(124,199,255,.5);
}

/* reveal on scroll */
.animate-slide-up{
  opacity:0; transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out, box-shadow .4s ease;
}
.animate-slide-up.visible{ opacity:1; transform: translateY(0); }

/* =========================
   CARDS (About / Products / Gallery)
   ========================= */
.about-card, #products .grid > div, #gallery .grid > div{
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid rgba(124,199,255,.12);
}
.about-card:hover,
#products .grid > div:hover,
#gallery .grid > div:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(30,58,138,.20);
  border-color: rgba(124,199,255,.35);
  outline: 0;
}

/* Electric focus ring for keyboard nav */
.about-card:focus-within,
.product-card:focus-within{
  box-shadow: 0 0 0 2px rgba(124,199,255,.65), 0 12px 26px rgba(30,58,138,.2);
}

/* Product overlay details */
.product-card{ position: relative; }
.product-card .details{
  position:absolute; inset:auto 0 0 0; /* bottom overlay */
  background: rgba(30,58,138,.9);
  color:#fff; padding:1rem; border-radius: 0 0 0.75rem 0.75rem;
  opacity:0; transition: opacity .25s ease-in-out; z-index:10;
}
.product-card:hover .details{ opacity:1; }
.product-card i{ color: var(--teal); }
.details i{ color:#D4AF37; }

/* Gallery */
.gallery-img{ cursor:pointer; transition: transform .25s; width:100%; height:100%; object-fit:cover; }
.gallery-img:hover{ transform: scale(1.03); }

/* =========================
   LIGHTBOX
   ========================= */
#lightbox{
  display:none; position:fixed; inset:0;
  background: rgba(10, 15, 31, .85);
  align-items:center; justify-content:center; z-index:1000;
}
#lightbox img{ max-width:90%; max-height:90%; border-radius:12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
#lightbox.active{ display:flex; }

/* =========================
   SCROLL TO TOP
   ========================= */
.scroll-to-top{
  position:fixed; bottom:20px; right:20px;
  background-color: var(--navy); color:#fff;
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:.85; transition: opacity .3s, transform .3s; z-index:1000;
}
.scroll-to-top:hover{ opacity:1; transform: scale(1.06); }

/* =========================
   WHATSAPP BUTTON
   ========================= */
.whatsapp-button{
  position:fixed; bottom:20px; left:20px;
  background-color: var(--teal); color:#fff;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:.95; z-index:1000;
  animation: gentlePulse 2s ease-in-out infinite;
  transition: transform .3s, box-shadow .3s;
}
.whatsapp-button:hover{
  transform: scale(1.06) rotate(8deg);
  box-shadow: 0 0 15px rgba(44,122,123,.7);
  animation: none;
}
.whatsapp-button svg{ width:28px; height:28px; }
@keyframes gentlePulse{
  0%{ transform: scale(1); box-shadow: 0 0 5px rgba(44,122,123,.5); }
  50%{ transform: scale(1.08); box-shadow: 0 0 10px rgba(44,122,123,.7); }
  100%{ transform: scale(1); box-shadow: 0 0 5px rgba(44,122,123,.5); }
}

/* =========================
   CONTACT INFO VISIBILITY
   ========================= */
#contact-info{ display:block; }
#contact-info.hidden{ display:none; }

/* =========================
   MOBILE MENU
   ========================= */
#mobile-menu{
  transition: transform .3s ease-in-out;
  background-color: var(--navy);
}
#mobile-menu.active{ transform: translateX(0); }
#mobile-menu.hidden{ transform: translateX(-100%); }

/* =========================
   MAP
   ========================= */
.map-container{
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(30,58,138,.15);
  height: 400px;
}
@media (max-width: 767px){ .map-container{ height:300px; } }

/* =========================
   CONTACT DETAILS
   ========================= */
.contact-details{
  display:flex; justify-content:center; align-items:center; gap:2rem;
}
.contact-details div{
  flex:1; text-align:center;
  background-color:#F7FAFC;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(124,199,255,.12);
}
.contact-details .border-l{
  height:40px; border-left: 2px solid #D4AF37;
}
#contact .fas{ color: var(--teal); font-size:1.5rem; }
.text-eren{ color: var(--teal); }
.text-eren:hover{ color: #226669; }

@media (max-width:767px){
  .contact-details{ flex-direction:column; gap:1rem; }
  .contact-details .border-l{ display:none; }
}

/* =========================
   STATS (optional counters)
   ========================= */
.stats{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem; max-width: 900px; margin: 1.25rem auto 0;
}
@media (min-width:768px){ .stats{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat{
  background:#fff; border-radius:12px; padding:1rem;
  text-align:center; border:1px solid rgba(124,199,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.stat .num{ font-size:1.8rem; font-weight:800; color:#0b1530; }
.stat .label{ color:#6b7280; }

/* =========================
   MISC
   ========================= */
@keyframes pulse{ 0%{transform:scale(1);} 50%{transform:scale(1.2);} 100%{transform:scale(1);} }

/* ===== Footer ===== */
.site-footer{
  position: relative;
  background: linear-gradient(180deg, #0a0f1f, #121a33);
  color: var(--text);
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(124,199,255,.18);
}
.site-footer a{ color: var(--muted); transition: color .2s ease, text-shadow .2s ease; }
.site-footer a:hover{
  color: var(--text);
  text-shadow: 0 0 10px rgba(124,199,255,.5);
}
.footer-glow{
  position:absolute; top:-2px; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(124,199,255,.7);
}

.footer-top{
  display:grid; gap:2rem;
  grid-template-columns: 1fr; 
  padding: 1rem 0 2rem;
}
@media (min-width: 900px){
  .footer-top{ grid-template-columns: 1.2fr .8fr 1fr; }
}

.footer-top h3{
  font-size: 1.4rem; margin: 0 0 .5rem; color: var(--text);
  text-shadow: 0 2px 12px rgba(124,199,255,.25);
}
.footer-top h4{
  font-weight: 700; color: var(--text); margin-bottom: .75rem;
}

.footer-top p{ color: var(--muted); max-width: 42ch; }
.footer-top ul{ list-style:none; padding:0; margin:0; }
.footer-top li{ margin: .35rem 0; color: var(--muted); display:flex; gap:.6rem; align-items:flex-start; }
.footer-top .contact i{ width: 20px; margin-top: .2rem; color: var(--accent); }

.footer-top .social{
  margin-top: .75rem; display:flex; gap:.75rem;
}
.footer-top .social a{
  width: 38px; height: 38px; display:grid; place-items:center;
  background: rgba(124,199,255,.12);
  border: 1px solid rgba(124,199,255,.25);
  border-radius: 10px;
}
.footer-top .social a:hover{
  background: rgba(124,199,255,.22);
  transform: translateY(-2px);
}

.footer-bottom{
  border-top: 1px solid rgba(124,199,255,.15);
  padding: 1rem 0 1.4rem; text-align:center; color: var(--muted);
}
/* Lightbox controls */
#lightbox{
  display:none; position:fixed; inset:0;
  background: rgba(10, 15, 31, .88);
  align-items:center; justify-content:center; z-index:1000;
}
#lightbox.active{ display:flex; }
#lightbox img{
  max-width: 90%; max-height: 90%;
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.lb-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width:48px; height:48px; border-radius:12px; border:1px solid rgba(124,199,255,.35);
  background: rgba(124,199,255,.12); color: var(--text);
  display:grid; place-items:center; cursor:pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.lb-btn:hover{
  transform: translateY(-50%) scale(1.06);
  background: rgba(124,199,255,.22);
  box-shadow: 0 0 16px rgba(124,199,255,.35);
}
.lb-prev{ left: 2%; }
.lb-next{ right: 2%; }

.lb-close{
  top: 4%;
  right: 3%;
  transform: none;
  width:42px; height:42px; border-radius:10px;
}

.lb-counter{
  position:absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-weight:600; letter-spacing:.04em;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(124,199,255,.25);
  border-radius: 999px;
  padding: .35rem .75rem;
}