/* ============================================
   TAKIPCI34 - PREMIUM NEON SMM THEME v2
   Koyu + Neon Mor + Cyber Tasarım
   ============================================ */

/* === FONT & ROOT VARS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Syne:wght@700;800&display=swap');

:root {
  --bg: #07080f !important;
  --menutxtcl: 200, 205, 230 !important;
  --menutxtweight: 600 !important;
  --intlinear: 139, 92, 246 !important;
  --txtall: 160, 165, 200 !important;
  --cl1: 139, 92, 246 !important;
  --pckdf: var(--cl1) !important;
  --whydf: var(--cl1) !important;
  --lbds: 15, 17, 30 !important;
  --lsdb: 139, 92, 246 !important;
  --text: 140, 145, 175 !important;
  --fixedtel: #8b5cf6 !important;
}

/* === GLOBAL === */
*, *::before, *::after {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body {
  font-family: 'Inter', sans-serif !important;
  background: #07080f !important;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59, 130, 246, 0.06), transparent) !important;
  color: #c8cde6 !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

/* === NAVBAR === */
.navbar, .nav-head {
  background: rgba(7, 8, 15, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.25) !important;
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(139, 92, 246, 0.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: all 0.3s ease !important;
}

.navlink {
  color: #b8bcd4 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
  position: relative !important;
}

.navlink:hover, .navlink.active {
  color: #a78bfa !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

.contact-btn, .anibut {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6, #a78bfa) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.2) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.contact-btn:hover, .anibut:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6), 0 0 0 1px rgba(167, 139, 250, 0.4) !important;
  filter: brightness(1.1) !important;
}

/* === PLATFORM/HİZMET İKONLARI === */
.serviceList {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  padding: 20px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.serviceList::-webkit-scrollbar { display: none !important; }

.box {
  background: linear-gradient(145deg, #0f1020, #12142a) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-radius: 16px !important;
  padding: 18px 14px !important;
  min-width: 90px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}

.box::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(139,92,246,0.1), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

.box:hover {
  border-color: rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 0 12px 35px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139,92,246,0.2) !important;
}

.box:hover::before { opacity: 1 !important; }

.box i, .box .fab, .box .fas {
  font-size: 26px !important;
  background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.serviceName {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9094b8 !important;
  letter-spacing: 0.3px !important;
}

/* === HERO / INTRO === */
.introHome, .introBG {
  background: linear-gradient(135deg, #0d0e1f 0%, #100e2a 40%, #0d1530 100%) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

.introHome::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

/* === HIZLI SİPARİŞ FORMU === */
.fastOrder {
  background: rgba(15, 16, 32, 0.95) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.1) !important;
  backdrop-filter: blur(20px) !important;
}

.fastHead {
  color: #e2e4f0 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.fastselect, .fastselect .cont {
  background: #0a0b18 !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 12px !important;
  color: #b8bcd4 !important;
  transition: border-color 0.3s !important;
}

.fastselect:hover {
  border-color: rgba(139, 92, 246, 0.5) !important;
}

.butto-fast, .butto.butto-fast {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.45) !important;
  transition: all 0.4s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.butto-fast::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  transition: left 0.5s !important;
}

.butto-fast:hover::after { left: 100% !important; }

.butto-fast:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.65) !important;
  background-position: right center !important;
}

/* === PAKET KARTLARI === */
.packitem, .packListArea .packitem {
  background: linear-gradient(145deg, #0c0d1e, #0f1128) !important;
  border: 1px solid rgba(139, 92, 246, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

.packitem::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #7c3aed, #8b5cf6, #60a5fa) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

.packitem:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2), 0 0 0 1px rgba(139,92,246,0.15) !important;
}

.packitem:hover::before { opacity: 1 !important; }

.packHead {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #e2e4f0 !important;
}

/* === SATIN AL BUTONU === */
.packBuyBTN, .anibuybtn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  position: relative !important;
  overflow: hidden !important;
  text-transform: uppercase !important;
}

.packBuyBTN::before {
  content: '🛒 ' !important;
  font-size: 14px !important;
}

.packBuyBTN:hover, .anibuybtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6) !important;
  filter: brightness(1.1) !important;
}

/* === FİYAT === */
.dashline {
  color: #a78bfa !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  font-family: 'Syne', sans-serif !important;
}

.abobtn {
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 8px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  color: #a78bfa !important;
  font-weight: 600 !important;
}

/* === BAŞLIKLAR (ns-heading) === */
.ns-heading, .ns-headH {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  color: #e8eaf6 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
}

.nheadall {
  color: #8890b8 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* === WHY US BÖLÜMÜ === */
.whyus .list {
  background: linear-gradient(145deg, #0c0d1e, #0f1128) !important;
  border: 1px solid rgba(139, 92, 246, 0.12) !important;
  border-radius: 18px !important;
  padding: 28px 22px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

.whyus .list:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 50px rgba(139, 92, 246, 0.15) !important;
}

.whyBG {
  background: linear-gradient(135deg, #0d0e1f 0%, #120f2e 100%) !important;
  border-radius: 20px !important;
}

/* === BLOG KARTLARI === */
.blog-item {
  background: linear-gradient(145deg, #0c0d1e, #0f1128) !important;
  border: 1px solid rgba(139, 92, 246, 0.1) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 25px rgba(0,0,0,0.35) !important;
}

.blog-item:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 50px rgba(139, 92, 246, 0.15) !important;
}

/* === DESTEK ALT BÖLÜM === */
.support-bottom {
  background: linear-gradient(135deg, #0f1020 0%, #160d35 50%, #0d1530 100%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  position: relative !important;
  overflow: hidden !important;
}

.support-bottom::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 300px !important; height: 300px !important;
  background: radial-gradient(circle, rgba(139,92,246,0.12), transparent) !important;
  pointer-events: none !important;
}

/* === WHATSAPP & İLETİŞİM BUTONLARI === */
a[href*="whatsapp"], [class*="whatsapp"] {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

a[href*="whatsapp"]:hover, [class*="whatsapp"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 35px rgba(37, 211, 102, 0.5) !important;
}

/* === FONKSİYON BUTONLARI === */
.fcont a, .fcont .butto {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fcont a:hover, .fcont .butto:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 35px rgba(139, 92, 246, 0.6) !important;
}

/* === FOOTER === */
.footer {
  background: #04050c !important;
  border-top: 1px solid rgba(139, 92, 246, 0.15) !important;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.4) !important;
}

.footer a {
  color: #7880a4 !important;
  transition: color 0.25s !important;
}

.footer a:hover {
  color: #a78bfa !important;
}

/* === SABİT AKSIYON BUTONLARI (Sol) === */
.fixActions {
  position: fixed !important;
  left: 0 !important;
}

.fixActions .items .item {
  background: linear-gradient(145deg, #0f1128, #14163a) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 3px 0 20px rgba(0,0,0,0.4) !important;
  transition: all 0.3s ease !important;
}

.fixActions .items .item:hover {
  background: linear-gradient(145deg, #1a1d4a, #1e2150) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  transform: translateX(6px) !important;
  box-shadow: 6px 0 25px rgba(139, 92, 246, 0.25) !important;
}

.fixActions .items .fav i,
.fixActions .items .order i,
.fixActions .items .tel i {
  color: #a78bfa !important;
  font-size: 18px !important;
}

/* === BADGES === */
.inslide, [class*="badge"], [class*="have"] {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.4) !important;
}

/* === TESTIMONIALS === */
.testimonial-item, .testimonial .inside {
  background: linear-gradient(145deg, #0c0d1e, #0f1128) !important;
  border: 1px solid rgba(139, 92, 246, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}

.star i { color: #f59e0b !important; }

/* === SSS === */
.faqArea .faqwell {
  background: linear-gradient(145deg, #0c0d1e, #0f1128) !important;
  border: 1px solid rgba(139, 92, 246, 0.1) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.faqArea .faqwell:hover {
  border-color: rgba(139, 92, 246, 0.3) !important;
}

.fs-head {
  color: #d4d6f0 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 18px 20px !important;
}

.fs-content {
  color: #8890b8 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  padding: 0 20px 18px !important;
}

/* === FORM ALANLARI === */
input, select, textarea, .loftForm input, .loftForm select {
  background: #0a0b18 !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 12px !important;
  color: #c8cde6 !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.3s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 4px 15px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: #555880 !important;
}

/* === SİPARİŞ SORGULAMA === */
.osareaBG, .osarea {
  background: linear-gradient(145deg, #0c0d1e, #0f1128) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-radius: 20px !important;
}

.osBtn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.osBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.55) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: #07080f !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed, #8b5cf6) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover { background: #a78bfa !important; }

/* === GENEL METİN RENKLERİ === */
h1, h2, h3, h4, h5, h6 { color: #e2e4f0 !important; }
p { color: #8890b8 !important; }
a { transition: color 0.25s !important; }

/* === DARK MODE ZATEN AÇIK === */
body.dark, body {
  --bg: #07080f !important;
}

/* === GLOW ANİMASYONU === */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.3); }
  50% { box-shadow: 0 0 40px rgba(139,92,246,0.6); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === PAKET ALL BUTONU === */
.packallBTN, .ns-more {
  background: transparent !important;
  border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
  color: #a78bfa !important;
  border-radius: 12px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.packallBTN:hover, .ns-more:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: #8b5cf6 !important;
  color: #c4b5fd !important;
  transform: translateY(-2px) !important;
}

/* === LOGO === */
.logo img {
  filter: brightness(1.1) !important;
}

/* === SOSYAl MEDYA İKONLARI (Footer) === */
.social-action a {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a78bfa !important;
  transition: all 0.3s ease !important;
}

.social-action a:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: #8b5cf6 !important;
  transform: translateY(-3px) !important;
  color: #c4b5fd !important;
}

/* === RENK VURGU === */
.text-neon, strong, b {
  color: #a78bfa !important;
}

/* === SEPETE EKLE UI (Kart hover efekti) === */
.packitem:hover .packBuyBTN {
  background: linear-gradient(135deg, #6d28d9, #7c3aed, #8b5cf6) !important;
  animation: glowPulse 1.5s ease-in-out infinite !important;
}

/* === DARK BOX ANİMASYON === */
.wow.fadeInUp {
  animation: slideInUp 0.6s ease forwards !important;
}

/* === ALERT / BİLDİRİM === */
.alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
  border-radius: 12px !important;
}

/* === MOBİL NAV === */
@media (max-width: 768px) {
  .NavListArea {
    background: rgba(7, 8, 15, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
  }
  
  .ns-heading, .ns-headH {
    font-size: 26px !important;
  }
  
  .box {
    min-width: 75px !important;
    padding: 14px 10px !important;
  }
}