/* ================================================================
   RIVA GARAGE — TEMEL TEMA
   Token'lar, tipografi, kabuk (header/footer), hareket primitifleri.
   Kaynak tasarım: dokumanlar/riva-garage-files (React/Tailwind) —
   renk sistemi (oklch) ve gradyanlar birebir buraya taşındı;
   utility sınıfları yerine BEM benzeri semantik sınıflar kullanıldı.
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ── Token'lar ──────────────────────────────────────────────────── */
:root {
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* oklch değerleri kaynak tasarımdan birebir; hex fallback eski
     tarayıcılar için — modern tarayıcılar oklch'yi kullanır (son beyan kazanır) */
  --background: #101318;
  --background: oklch(0.16 0.015 250);
  --foreground: #f7f8fa;
  --foreground: oklch(0.97 0.005 250);
  --card: #262b33;
  --card: oklch(0.2 0.018 250);
  --card-foreground: var(--foreground);
  --primary: #3a5bf0; 
  --primary: oklch(62.268% 0.15838 248.945);
  --primary-foreground: #fdfdfd;
  --primary-foreground: oklch(0.99 0 0);
  --secondary: #2e333d;
  --secondary: oklch(0.26 0.02 250);
  --muted: var(--secondary);
  --muted-foreground: #a9b0bd;
  --muted-foreground: oklch(0.72 0.02 250);
  --accent: var(--primary);
  --accent-foreground: var(--primary-foreground);
  --destructive: #dd4a3d;
  --destructive: oklch(0.6 0.24 27);
  --border: #3b414d;
  --border: oklch(0.3 0.02 250);
  --success: #33a852;
  --success: oklch(0.62 0.19 148);
  --whatsapp: #3fcf6a;
  --whatsapp: oklch(0.68 0.17 152);
  --surface: #0c0f13;
  --surface: oklch(0.13 0.012 250);
  --chart-5: #f0b04a;
  --chart-5: oklch(0.769 0.188 70.08);

  --gradient-cta: linear-gradient(90deg, oklch(0.5 0.17 148), oklch(0.68 0.2 148) 55%, oklch(0.55 0.18 150));
  --gradient-ig: linear-gradient(135deg, var(--chart-5), var(--destructive), var(--primary));
  --glow-primary: 0 0 24px color-mix(in oklab, var(--primary) 55%, transparent);
  --glow-soft: 0 0 40px color-mix(in oklab, var(--primary) 22%, transparent);

  --font-display: "Poppins", "Barlow", sans-serif;
  --font-sans: "Barlow", system-ui, sans-serif;
}

/* Glow renkleri color-mix desteklemeyen tarayıcılarda düz alfaya düşer */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --glow-primary: 0 0 24px rgba(58, 91, 240, 0.55);
    --glow-soft: 0 0 40px rgba(58, 91, 240, 0.22);
  }
}

body {
  background-color: var(--surface);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; text-transform: uppercase; }

/* ── Yardımcı primitifler ──────────────────────────────────────── */
.glow-ring { box-shadow: var(--glow-soft); }
.neon-text { text-shadow: 0 0 18px color-mix(in oklab, var(--primary) 70%, transparent); }
.panel {
  background-image: linear-gradient(160deg, oklch(0.22 0.02 250), oklch(0.15 0.015 250));
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--primary); color: var(--primary-foreground);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

@keyframes rg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: rg-marquee 28s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Inline SVG ikon sprite kullanımı: <svg class="icon"><use href="#icon-x"/></svg> */
.icon {width: 2.25em;height: 2.25em;fill: none;stroke: oklch(1 0 0);stroke-width: 1;stroke-linecap: round;stroke-linejoin: round;flex-shrink: 0;}
.icon--fill { fill: currentColor; stroke: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em;
  border-radius: var(--radius-lg); padding: 0.7rem 1.4rem; transition: all 0.2s ease;
  border: 1px solid transparent;
}
.btn--primary { background: var(--primary); color: #ffffff; }
.btn--primary:hover { box-shadow: var(--glow-primary); transform: translateY(-1px); }
.btn--whatsapp { background: var(--whatsapp); color: var(--primary-foreground); }
.btn--whatsapp:hover { opacity: 0.9; }
.btn--outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }

/* ── Sayfa kabuğu ───────────────────────────────────────────────── */
.wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 0.75rem;
}
@media (min-width: 768px) { .wrap { padding: 0 1rem; } }

.main-stack {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) { .main-stack { padding: 1rem; } }

/* ── Header ─────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 95%, transparent);
  backdrop-filter: blur(8px);
}
.hdr__inner {
  max-width: 80rem; margin: 0 auto; padding: 0.5rem 1rem;
  display: flex; align-items: center; gap: 1rem;
}
/* Logo, header'ın yerini (nav yüksekliğini) korurken görsel olarak
   büyük render olur — .hdr__logo yer kaplayan küçük "yuva", img mutlak
   konumlanıp yuvanın ÜSTÜNE hizalanır ve yalnızca AŞAĞI (hero'ya doğru)
   taşar. Dikeyde ortalamak yerine üstten hizalamak, sayfanın en
   tepesinde logonun üst kısmının ekran dışına taşıp kırpılmasını önler. */
.hdr__logo { position: relative; flex-shrink: 0; display: block; width: 56px; height: 56px; }
.hdr__logo img { position: absolute; top: 0; left: 0; height: 90px; width: 90px; max-width: none; }
@media (min-width: 768px) {
  .hdr__logo { width: 72px; height: 72px; }
  .hdr__logo img { height: 140px; width: 140px; }
}

.hdr__nav {
  margin-left: 0.5rem; display: none; flex: 1;
  align-items: stretch; justify-content: center; gap: 1.75rem;
}
@media (min-width: 1024px) { .hdr__nav { display: flex; } }
.hdr__link {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 3.75rem;
  border-radius: var(--radius-lg); border: 1px solid transparent;
  padding: 0.625rem 1rem; font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.025em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: all 0.25s ease;
}
.hdr__link:hover, .hdr__link.is-active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  text-shadow: 0 0 18px color-mix(in oklab, var(--primary) 70%, transparent);
  box-shadow: var(--glow-primary);
}
.hdr__link .icon { width: 1em; height: 1em; }

/* "Ana Sayfa" — ikon üstte, etiket altta (diğer nav linkleri düz metin).
   Diğer linklerle aynı min-height'ı paylaşır ki nav çubuğu tek hizada
   görünsün — içerik dikeyde ortalanır. */
.hdr__link--home {
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 1.15rem;
  min-width: 4.75rem;
  text-align: center;
}
.hdr__link--home .hdr__link-icon { width: 1.6rem; height: 1.6rem; }
.hdr__link--home .hdr__link-label { font-size: 0.72rem; line-height: 1; }

/* Masaüstü nav dropdown (ör. "Ürünler ▾") — theme.js [data-nav-dropdown]
   üzerine .is-open ekler/çıkarır; kapalıyken belge akışından tamamen
   çıkar (görünmez içerik nav çubuğunu itmesin). */
.hdr__nav-item { position: relative; display: flex; align-items: stretch; }
.hdr__dropdown {
  position: absolute; left: 0; top: calc(100% + 0.5rem);
  min-width: 15rem; max-width: 22rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.5rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.hdr__dropdown.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.hdr__dropdown-link {
  display: block; border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem; font-size: 0.85rem; line-height: 1.3;
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hdr__dropdown-link:hover { background: var(--secondary); color: var(--primary); }

.hdr__actions { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.hdr__whatsapp {
  display: flex; align-items: center; gap: 0.4rem;
  border-radius: 999px; padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  background: var(--whatsapp); color: var(--primary-foreground);
  transition: opacity 0.2s ease;
  margin-right: 0.25rem;
  max-width: 10.5rem;
  overflow: hidden;
}
.hdr__whatsapp:hover { opacity: 0.88; }
.hdr__whatsapp .icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.hdr__whatsapp-label {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr__whatsapp-label-full { display: none; }
@media (min-width: 1024px) {
  .hdr__whatsapp { padding: 0.55rem 1.1rem 0.55rem 0.65rem; max-width: none; gap: 0.5rem; }
  .hdr__whatsapp .icon { width: 1.35rem; height: 1.35rem; }
  .hdr__whatsapp-label { font-size: 0.78rem; }
  .hdr__whatsapp-label-full { display: inline; }
}

/* Arama, mobilde yer açmak için gizlenir — masaüstünde (nav ile birlikte) geri döner */
[data-search-toggle] { display: none; }
@media (min-width: 1024px) { [data-search-toggle] { display: inline-flex; } }
.hdr__icon-btn {
  border-radius: 999px; padding: 0.5rem;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
}
.hdr__icon-btn:hover { background: var(--secondary); color: var(--primary); }
.hdr__icon-btn .icon { width: 1.4rem; height: 1.4rem; }
.hdr__cart-badge {
  position: absolute; right: -2px; top: -2px;
  display: flex; align-items: center; justify-content: center;
  height: 1.25rem; width: 1.25rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 0.65rem; font-weight: 700;
}
.hdr__burger { display: block; }
@media (min-width: 1024px) { .hdr__burger { display: none; } }

.hdr__mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--surface); padding: 0.5rem 1rem; }
.hdr__mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .hdr__mobile-nav { display: none !important; } }
.hdr__mobile-link {
  display: block; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  padding: 0.75rem 0; font-family: var(--font-display); font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
}
.hdr__mobile-link:last-child { border-bottom: 0; }
.hdr__mobile-link.is-active { color: var(--primary); }

/* Alt menü (ör. "Ürünler" altındaki ürünler) — mobilde açılır/kapanır
   değil, girintili liste olarak sürekli görünür. */
.hdr__mobile-sub { padding: 0 0 0.5rem 0.85rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.hdr__mobile-sub-link {
  display: block; padding: 0.5rem 0; font-size: 0.8rem;
  color: color-mix(in oklab, var(--foreground) 65%, transparent);
}
.hdr__mobile-sub-link.is-active { color: var(--primary); }

/* Arama açılır paneli */
.hdr__search { display: none; border-top: 1px solid var(--border); background: var(--surface); padding: 0.75rem 1rem; }
.hdr__search.is-open { display: block; }
.hdr__search-form { max-width: 80rem; margin: 0 auto; display: flex; gap: 0.5rem; }
.hdr__search-input {
  flex: 1; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.6rem 1rem; color: var(--foreground);
}
.hdr__search-input:focus { outline: none; border-color: var(--primary); }

/* ── Footer ─────────────────────────────────────────────────────── */
.ftr {
  margin-top: 0.25rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  padding: 2rem 1.5rem;
}
@media (min-width: 768px) { .ftr { padding: 2rem 2.5rem; } }
.ftr__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .ftr__grid { grid-template-columns: repeat(4, 1fr); } }

.ftr__brand { display: flex; gap: 1rem; }
.ftr__brand img { height: 64px; width: 64px; flex-shrink: 0; }
.ftr__brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.03em; }
.ftr__brand-tag { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--muted-foreground); margin-top: 0.15rem; }
.ftr__brand-desc { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }

.ftr__col-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; color: var(--primary); }
.ftr__col-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ftr__col-list a { font-size: 0.85rem; color: var(--muted-foreground); transition: color 0.2s ease; }
.ftr__col-list a:hover { color: var(--primary); }

.ftr__contact { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; color: var(--muted-foreground); }
.ftr__contact li { display: flex; align-items: center; gap: 0.6rem; }
.ftr__contact .icon { color: var(--primary); width: 1rem; height: 1rem; }

.ftr__bottom {
  margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem;
  text-align: center; font-size: 0.75rem; color: var(--muted-foreground);
}
.ftr__bottom a { color: var(--primary); transition: color 0.2s ease; }
.ftr__bottom a:hover { color: var(--foreground); }
@media (max-width: 640px) { .ftr__bottom { justify-content: center; } }