/* ========== Temel Ayarlar ========== */
:root{
  --bg:#06090f;
  --card:#0b1220;
  --muted:#8aa3bf;
  --txt:#eef6ff;
  --primary:#11b4ff; /* elektrik mavisi */
  --primary-2:#0067ff;
  --accent:#39e3ff;
  --danger:#ff3860;
  --ring: 0 0 0 2px rgba(17,180,255,.35);
  --glass: rgba(6, 9, 15, .6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,103,255,.15), transparent 60%),
    radial-gradient(1000px 500px at 80% 110%, rgba(17,180,255,.12), transparent 60%),
    var(--bg);
  line-height:1.55;
}

/* Glass header */
.site-header.glass{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:var(--glass); backdrop-filter: saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Grad text */
.grad-text{background:linear-gradient(90deg,var(--txt),#a7d7ff); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Nav */
.logo{display:flex; align-items:center; gap:10px; color:var(--txt); text-decoration:none; font-weight:700}
.nav{display:flex; gap:18px}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--txt)}
.nav-toggle{display:none; background:none; border:none; color:var(--txt); font-size:22px}

/* Hero */
.hero{position:relative; min-height:82vh; display:grid; place-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-1}
.hero-bg .grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 70%);
}
.glow{
  position:absolute; width:900px; height:900px; border-radius:50%;
  left:50%; top:40%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(17,180,255,.22), rgba(0,103,255,.08) 60%, transparent 70%);
  filter: blur(20px); animation: float 6s ease-in-out infinite alternate;
}
@keyframes float{to{transform: translate(-50%,-45%)}}

.hero-has-video .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; filter:saturate(130%) contrast(105%)
}
.hero-content{max-width:980px; padding:32px; text-align:center; position:relative; z-index:1}
.hero-content.on-video h1{text-shadow:0 6px 30px rgba(0,0,0,.6)}
.hero h1{font-size:clamp(28px, 6vw, 52px); margin:0 0 10px; letter-spacing:.2px}
.hero p{color:var(--muted); font-size:clamp(14px, 2.5vw, 18px); margin:6px 0 20px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid transparent; position:relative; overflow:hidden}
.btn:focus{outline:none; box-shadow: var(--ring)}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#00101a}
.btn-ghost{border-color:rgba(255,255,255,.14); color:var(--txt)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
/* Button shine */
.shine::after{
  content:''; position:absolute; top:0; left:-120%; width:120%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition: all .6s ease;
}
.shine:hover::after{left:120%}

.trust-badges{list-style:none; padding:0; margin:16px 0 0; display:flex; gap:18px; justify-content:center; color:var(--muted); flex-wrap:wrap}

/* Sections */
.section{padding:56px 0}
.container{max-width:1120px; margin:0 auto; padding:0 16px}

/* Cards & lifts */
.card, .price-card, .g-item{
  background:linear-gradient(180deg, rgba(17,180,255,.06), rgba(17,180,255,0) 40%), var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.lift{transition: transform .25s ease, box-shadow .25s ease}
.lift:hover{transform: translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.35)}

/* Özellikler */
.features .grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{padding:18px}
.card h3{margin:10px 0 6px}
.card p{color:var(--muted); margin:0}
.icon{width:44px; height:44px; border-radius:12px; background:radial-gradient(circle at 20% 20%, var(--accent), var(--primary-2)); margin-bottom:8px; position:relative}
.icon::after{content:''; position:absolute; inset:10px; border-radius:8px; background:rgba(0,0,0,.35)}
.icon.tv::before{content:'📺'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px}
.icon.bolt::before{content:'⚡'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px}
.icon.shield::before{content:'🛡️'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px}
.icon.support::before{content:'💬'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px}
.icon.rocket::before{content:'🚀'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px}
.icon.globe::before{content:'🌐'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px}

/* Toggles */
.toggle-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.toggle-wrap{display:inline-flex; background:#071021; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:6px; margin:10px 6px 22px 0}
.toggle-wrap.secondary{margin-left:8px}
.toggle{cursor:pointer; border:none; background:transparent; color:var(--muted); font-weight:800; padding:10px 14px; border-radius:10px; transition: transform .2s ease}
.toggle.active{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#00101a}
.toggle:active{transform:scale(.98)}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:18px}
.price-card{position:relative; padding:20px}
.price-card.best{border-color: rgba(17,180,255,.4)}
.ribbon{position:absolute; top:14px; right:-10px; transform: rotate(10deg); background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#00101a; font-weight:800; padding:6px 10px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.35)}
.features-list{list-style:none; padding:0; margin:10px 0 16px; color:var(--muted)}
.features-list li{margin:6px 0}
.price{font-size:22px; font-weight:800; margin:10px 0 14px}
.wfull{width:100%}
.note{color:var(--muted); font-size:14px; margin-top:10px}
.small{font-size:12px}

/* Flame effect (shown only when body.pack-uhd) */
.flames{position:absolute; left:0; right:0; bottom:-8px; height:60px; pointer-events:none; display:none}
.pack-uhd .flames{display:block}
.f{
  position:absolute; bottom:0; width:10px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 50% 30%, #ffd27a, #ff7a1a 60%, rgba(255,0,0,.6));
  filter: blur(1px);
  animation: rise 1.8s linear infinite;
  opacity:.85;
}
/* distribute flames */
.flames .f:nth-child(1){left:8%; animation-delay:.0s}
.flames .f:nth-child(2){left:20%; animation-delay:.2s}
.flames .f:nth-child(3){left:32%; animation-delay:.4s}
.flames .f:nth-child(4){left:44%; animation-delay:.1s}
.flames .f:nth-child(5){left:56%; animation-delay:.3s}
.flames .f:nth-child(6){left:68%; animation-delay:.5s}
.flames .f:nth-child(7){left:75%; animation-delay:.15s}
.flames .f:nth-child(8){left:85%; animation-delay:.35s}
.flames .f:nth-child(9){left:50%; animation-delay:.55s}
.flames .f:nth-child(10){left:26%; animation-delay:.25s}

@keyframes rise{
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity:.9 }
  70%  { transform: translateY(-36px) scale(.9) rotate(-6deg); opacity:.7 }
  100% { transform: translateY(-60px) scale(.7) rotate(6deg); opacity:0 }
}

/* Galeri */
.gallery-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.g-item{padding:10px}
.g-item img{width:100%; height:auto; display:block; border-radius:10px}
.g-item figcaption{color:var(--muted); font-size:13px; margin-top:6px}

/* Contact */
.contact-buttons{display:flex; gap:12px; flex-wrap:wrap}
.btn.social{display:inline-flex; align-items:center; gap:8px}
.btn.social.tg{background:linear-gradient(135deg,#2ca5e0,#199bd8); color:#00101a}
.btn.social.wa{background:linear-gradient(135deg,#25D366,#18b654); color:#00101a}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08); background:#05080d; padding:24px 0; margin-top:40px}
.footer-grid{display:grid; grid-template-columns: 1fr auto 1fr; gap:16px; align-items:center}
.footer-grid nav{display:flex; gap:12px; flex-wrap:wrap}
.copy{color:var(--muted); text-align:right}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(14px); transition: all .6s ease}
.reveal.reveal-in{opacity:1; transform:none}

/* Responsive */
@media (max-width:1000px){.pricing-grid{grid-template-columns: repeat(2, 1fr)} .gallery-grid{grid-template-columns: 1fr 1fr}}
@media (max-width:640px){
  .features .grid-3{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .nav{display:none; position:absolute; top:56px; right:12px; background:#050a12; border:1px solid rgba(255,255,255,.08); padding:10px; border-radius:12px; flex-direction:column}
  .nav.show{display:flex}
  .nav-toggle{display:block}
}


/* === Modern touches (v7) === */
.card, .price-card, .g-item{position:relative}
.card::before, .price-card::before, .g-item::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from 180deg, rgba(17,180,255,.5), rgba(0,103,255,.5), rgba(17,180,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.35
}
.lift{transition:transform .25s ease, box-shadow .25s ease}
.lift:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.tilt{transform-style:preserve-3d;perspective:800px}
.tilt:hover{transform:rotateX(2deg) rotateY(-2deg) translateY(-4px)}
.shine::after{
  content:'';position:absolute;top:0;left:-120%;width:120%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:all .6s ease
}
.shine:hover::after{left:120%}
.toggle.active{box-shadow:0 0 0 6px rgba(17,180,255,.15)}
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:60;background:linear-gradient(135deg,#25D366,#18b654);color:#00101a;text-decoration:none;font-weight:900;padding:12px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}