/* =========================================================
   dB CarLab — Genel Stil Dosyası (Logo Paletine Uyumlu)
   Premium Araç Ses Sistemleri & Yalıtım Çözümleri
   ========================================================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------------------------------------------------------
   Marka Paleti (Logo ile uyum)
--------------------------------------------------------- */
:root{
  /* Logo renkleri */
  --brand-yellow: #FFD31A;   /* zemin sarısı */
  --brand-orange: #FF8A00;   /* soundlab degrade başlangıç */
  --brand-red:    #E05206;   /* soundlab degrade bitiş */
  --brand-blue:   #2039C6;   /* multilab mavi */

  /* Koyu arka plan tonları */
  --ink-900: #0B0C0F;  /* ana */
  --ink-800: #151923;  /* ikincil */

  /* Metin renkleri */
  --text-100: #F8FAFC;
  --text-400: #94A3B8;

  /* Tema (site genelinde kullanılacak) */
  --primary:   var(--ink-900);
  --secondary: var(--ink-800);
  --accent:    var(--brand-yellow); /* ana vurgu */
  --accent-2:  var(--brand-blue);   /* ikincil vurgu (multilab) */
}

/* ---------------------------------------------------------
   Yardımcı Tema Sınıfları (HTML'de kullanılabilir)
--------------------------------------------------------- */
.bg-primary    { background-color: var(--primary) !important; }
.bg-secondary  { background-color: var(--secondary) !important; }
.text-accent   { color: var(--accent) !important; }
.text-accent-2 { color: var(--accent-2) !important; }
.border-accent { border-color: var(--accent) !important; }
.border-ink    { border-color: var(--ink-800) !important; }

.bg-brand-hero {
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
}
.bg-brand-hero-alt {
  background: linear-gradient(180deg, var(--brand-yellow) 0%, var(--secondary) 100%);
}

/* ---------------------------------------------------------
   Sayfa Genel Ayarları
--------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--primary);
  color: var(--text-100);
  line-height: 1.6;
}

/* Link ve CTA renkleri */
a { color: var(--accent); }
a:hover { opacity: .9; }

/* ---------------------------------------------------------
   Genel Gölge
--------------------------------------------------------- */
.custom-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------
   Ürün Kartları — Hover
--------------------------------------------------------- */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------
   Before/After Slider
--------------------------------------------------------- */
.before-after-slider {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
}
.before-after-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before-after-slider .after {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
  transition: clip-path 0.2s ease;
}
.before-after-slider:hover .after {
  transition: clip-path 0.3s ease-out;
}

/* ---------------------------------------------------------
   Form Elemanları
--------------------------------------------------------- */
input, textarea, select {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-100);
  border-radius: 8px;
  transition: all 0.3s ease;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 211, 26, 0.3);
}

/* ---------------------------------------------------------
   Harita Bölümü
--------------------------------------------------------- */
.map-container {
  height: 400px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------
   Animasyon Geçişleri
--------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Özel Etiket Stilleri (Seriler & Kategoriler)
--------------------------------------------------------- */

/* Helix Series Rehberi — turuncu/kızıl degrade */
[data-tag="Helix Series Rehberi"],
button[data-tag="Helix Series Rehberi"],
span[data-tag="Helix Series Rehberi"] {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-red));
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 500;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
[data-tag="Helix Series Rehberi"]:hover {
  background: linear-gradient(135deg, #e96d00, #c42362);
  box-shadow: 0 0 15px rgba(229, 46, 113, 0.4);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

/* Soundlab ve Multilab için rozet yardımcıları (isteğe bağlı) */
.badge-soundlab{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-red));
  color:#fff; border:1px solid rgba(255,255,255,.25);
}
.badge-multilab{
  background: var(--brand-blue);
  color:#fff; border:1px solid rgba(255,255,255,.2);
}

/* ---------------------------------------------------------
   Genel Buton Önerisi (opsiyonel)
--------------------------------------------------------- */
.btn-accent{
  background: var(--accent);
  color:#111;
  border-radius:10px;
  padding:.6rem 1rem;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-accent:hover{ transform: translateY(-1px); opacity:.95; }

/* ---------------------------------------------------------
   Renk Paleti Referansı (bilgi amaçlı)
   primary   : var(--primary)   -> #0B0C0F
   secondary : var(--secondary) -> #151923
   accent    : var(--brand-yellow) (sarı)
   accent-2  : var(--brand-blue)   (mavi)
   text 100  : #F8FAFC
   text 400  : #94A3B8
--------------------------------------------------------- */