/* ==========================================================================
   Ergo Separator — "Precision Instrument"
   Refined editorial aesthetic · warm paper palette · single copper accent
   Inter (display + body) · system monospace (technical/price data)
   Fonts loaded via includes/head.php (preconnect + font-display:swap).
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color — cool blue/white medical palette (Faz 4: #0F6CBD unification) */
  --paper:        #F7FAFC;   /* body background — cool light */
  --paper-deep:   #EDF3F9;   /* subtle section alt */
  --bone:         #DCE7F0;   /* cards, dividers */
  --ink:          #263238;   /* primary text — cool near-black · hero/header/CTA koyu zemin */
  --ink-soft:     #103B5A;   /* headings — deep brand blue */
  --steel:        #566873;   /* secondary text (WCAG AA 5.5:1 on --paper) */
  --mist:         #64707A;   /* muted text (WCAG AA 4.8:1 on --paper) */
  --hairline:     #DCE6EE;   /* fine borders */
  --hairline-strong: #C3D2DE;

  /* Accent — brand blue #0F6CBD (var names kept for backwards compat) */
  --copper:       #0F6CBD;   /* NB: holds brand blue now, not copper */
  --copper-deep:  #0B5390;   /* hover/active blue */
  --copper-soft:  #EAF6FF;   /* light-blue soft accent bg */

  /* State colors — muted, not saturated */
  --sage:         #5A6E43;   /* success / stock OK */
  --sage-soft:    #D9DEC5;
  --rust:         #B33A1F;   /* alert / error */
  --rust-soft:    #EFD2C6;
  --amber:        #B47518;   /* warning / rating */
  --amber-soft:   #F0DFBE;

  /* Legacy aliases — mapped to new palette for backwards compat */
  --primary:       var(--copper);
  --primary-dark:  var(--copper-deep);
  --primary-light: var(--copper);
  --accent:        var(--ink);
  --accent-dark:   var(--ink-soft);
  --text:          var(--ink);
  --text-secondary: var(--steel);
  --text-muted:    var(--mist);
  --bg:            var(--paper);
  --card:          #FFFFFF;
  --border:        var(--hairline);
  --success:       var(--sage);

  /* Typography — Inter sitewide; system mono kept for price/SKU/technical data */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Consolas, monospace;

  /* Shadows — subtle, editorial, warm-tinted */
  --shadow-sm: 0 1px 2px rgba(19, 18, 17, 0.04);
  --shadow:    0 2px 10px rgba(19, 18, 17, 0.05), 0 1px 2px rgba(19, 18, 17, 0.04);
  --shadow-md: 0 10px 30px -8px rgba(19, 18, 17, 0.1),  0 3px 8px rgba(19, 18, 17, 0.04);
  --shadow-lg: 0 20px 50px -12px rgba(19, 18, 17, 0.16), 0 6px 16px rgba(19, 18, 17, 0.06);
  --shadow-xl: 0 30px 80px -20px rgba(19, 18, 17, 0.22);

  /* Motion */
  --ease-out:  cubic-bezier(.2,.6,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.3,1);
  --t-fast: 180ms;
  --t:      280ms;
  --t-slow: 520ms;
  --transition: all var(--t) var(--ease-out);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radii — tighter, more editorial. Not pill-rounded. */
  --radius-xs: 2px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Layout */
  --nav-h-desktop: 76px;
  --nav-h-mobile:  60px;
  --bottom-nav-h:  64px;
  --content-max:   1320px;
  --prose-max:     68ch;

  /* Z-index scale — single source of stacking order */
  --z-bottom-nav: 999;
  --z-header:     1000;
  --z-overlay:    1040;
  --z-sidebar:    1050;
  --z-dropdown:   9999;
  --z-toast:      99999;
}

/* --------------------------------------------------------------------------
   RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h-desktop) + 20px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Subtle paper grain texture */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(15, 108, 189,0.018) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(19, 18, 17, 0.015) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  background-size: 100% 100%, 100% 100%, 200px 200px;
}

img { max-width: 100%; display: block; }
/* WebP <picture> sarmalayıcısı layout-şeffaf olsun: içteki <img> aynen
   container'ında (grid/flex/width:100%) davranır, picture kutusu araya girmez. */
picture { display: contents; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY BASE
   --------------------------------------------------------------------------
   Tek modüler tip ölçeği (Inter, mobil min -> masaüstü max). Yeni başlık
   boyutları bu ölçeğe uymalı:
     hero   clamp(2.25rem, 7vw,   5rem)     ağırlık 600  (koyu hero başlığı)
     h1     clamp(2.25rem, 5.5vw, 4.75rem)  ağırlık 700  (sayfa başlığı)
     h2     clamp(1.875rem,3.8vw, 3.25rem)  ağırlık 600  (bölüm başlığı)
     h3     clamp(1.25rem, 2vw,   1.625rem) ağırlık 600  (alt/kart başlığı)
     h4     1.125rem                        ağırlık 600  (gövde fontu)
     p      1rem / satır 1.7                (gövde metni)
   Bileşen bağlamındaki daha küçük sayfa-başlığı h1'leri (urun-detay
   .urun-bilgi h1 ~2.5rem, .sepet-header h1 ~2.6rem) bilinçli olarak
   global h1'den küçüktür; ağırlıkları da 600'e hizalandı.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4.75rem); font-weight: 700; }
h2 { font-size: clamp(1.875rem, 3.8vw, 3.25rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; font-family: var(--font-body); letter-spacing: -0.01em; }

p  { font-size: 1rem; line-height: 1.7; color: var(--steel); }
strong { font-weight: 600; color: var(--ink); }

/* Tabular numerals for prices, quantities, codes */
.num, .tabular, .urun-kart-fiyat, .sepet-dd-satir span:last-child,
input[type="number"], .adet-wrap input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

/* Editorial small-caps label */
.eyebrow, .section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--s-4);
}
.eyebrow::before, .section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   TOP NAVIGATION — desktop horizontal + mobile hamburger
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h-desktop);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  background: rgba(247, 250, 252, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease-out), background var(--t) var(--ease-out);
}

.site-header.scrolled {
  border-bottom-color: var(--hairline);
  background: rgba(247, 250, 252, 0.94);
}

.site-header .site-brand {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
}

.site-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  filter: contrast(1.02);
  transition: transform var(--t) var(--ease-out);
}
.site-logo:hover { transform: rotate(-4deg) scale(1.06); }

.brand-text {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: currentColor;
  background-clip: unset;
}

/* Primary horizontal nav — desktop only */
.top-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.top-nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: var(--s-2) 0;
  transition: color var(--t-fast) var(--ease-out);
}
.top-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.top-nav a:hover { color: var(--copper); }
.top-nav a:hover::after,
.top-nav a.active::after { transform: scaleX(1); }
.top-nav a.active { color: var(--copper); }

/* Social icons */
.social-icons {
  display: flex;
  gap: var(--s-2);
}
.social-icons a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--steel);
  font-size: 15px;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.social-icons a:hover {
  color: var(--copper);
  background: var(--copper-soft);
  transform: none;
  box-shadow: none;
}
.social-icons a:hover .fa-youtube { color: #cf2525; }

/* --------------------------------------------------------------------------
   SIDEBAR — mobile drawer (artık kullanılmıyor, alt-tab nav yeterli)
   -------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  height: 100vh;
  background: var(--paper);
  border-right: 1px solid var(--hairline);
  padding: var(--s-7) 0 var(--s-5);
  z-index: var(--z-sidebar);
  transform: translateX(-100%);
  transition: transform 360ms var(--ease-in-out);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  padding: 0 var(--s-6) var(--s-5);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.sidebar-header span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  letter-spacing: -0.02em;
}
.sidebar-header span i { color: var(--copper); font-size: 18px; }

.sidebar a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.sidebar a i {
  font-size: 14px;
  width: 18px;
  color: var(--mist);
  transition: color var(--t-fast);
}
.sidebar a:hover,
.sidebar a.active {
  background: transparent !important;
  color: var(--copper) !important;
  border-left-color: var(--copper) !important;
  font-weight: 500;
}
.sidebar a:hover i,
.sidebar a.active i { color: var(--copper); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(19, 18, 17, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.sidebar-overlay.active { display: block; opacity: 1; }

.sidebar-rozet {
  margin-left: auto;
  background: var(--copper);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   MOBILE BOTTOM NAV — thumb-accessible tabs
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  height: var(--bottom-nav-h);
  background: rgba(247, 250, 252, 0.96);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--hairline);
  z-index: var(--z-bottom-nav);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav ul {
  display: flex;
  height: 100%;
  list-style: none;
}
.mobile-bottom-nav li { flex: 1; }
.mobile-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: var(--steel);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--t-fast);
  position: relative;
}
.mobile-bottom-nav a i { font-size: 17px; }
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color: var(--copper); }
.mobile-bottom-nav a.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--copper);
}
.mobile-bottom-nav .mbn-badge {
  position: absolute;
  top: 8px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  background: var(--copper);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   MAIN CONTENT — centered container, no sidebar offset
   -------------------------------------------------------------------------- */
.main-content {
  max-width: var(--content-max);
  margin: 0 auto;
  margin-top: var(--nav-h-desktop);
  padding: var(--s-8) clamp(20px, 4vw, 48px) var(--s-9);
  min-height: calc(100vh - var(--nav-h-desktop));
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.section {
  background: var(--card);
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  margin-bottom: var(--s-6);
  position: relative;
  transition: border-color var(--t) var(--ease-out);
}

.section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--ink);
  margin-bottom: var(--s-5);
  padding-bottom: 0;
  position: relative;
}
.section h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--copper);
  margin-top: var(--s-4);
}

.section p {
  color: var(--steel);
  line-height: 1.75;
  margin-bottom: var(--s-4);
  max-width: var(--prose-max);
}

/* Hero Section — editorial overhaul */
.hero-section {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 10vw, 120px) clamp(28px, 5vw, 72px);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.hero-copy { position: relative; z-index: 1; }

.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.hero-visual img {
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 375 / 325;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 32px);
  box-shadow: var(--shadow-lg);
}

/* Hero arka planı: sol-üstten sağ-alta çapraz uzanan, yavaşça açılıp kapanan
   separatör (referans çizimlere sadık önden görünüm; dikey çizilir, 135° ile
   çapraz döndürülür → vida sol-üstte, konik uçlar fotoğrafın alt köşesine
   bakar). Metnin ARKASINDA, soluk, tıklamayı engellemez.
   Mekanik: uçlar açılırken ana kollar boyundan dışa döner, V-destek kolları
   göbek perçini etrafında yatıklaşır, vida döner (tırtıl kayması) ve mile
   doğru hareket eder — hepsi 4.5s'lik tek nefes döngüsünde senkron. */
.hero-sep {
  position: absolute;
  top: 50%;
  left: 27%;
  height: 132%;
  width: auto;
  transform: translate(-50%, -50%) rotate(135deg);
  color: var(--paper);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}
.hero-sep-arm, .hero-sep-link, .hero-sep-vida, .hero-sep-knurl { transform-box: view-box; }
.hero-sep-arm-l  { transform-origin: 110px 266px; }
.hero-sep-arm-r  { transform-origin: 130px 266px; }
.hero-sep-link-l { transform-origin: 120px 172px; }
.hero-sep-link-r { transform-origin: 120px 172px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-sep-arm-l  { animation: heroSepArmL  4.5s var(--ease-in-out) infinite; }
  .hero-sep-arm-r  { animation: heroSepArmR  4.5s var(--ease-in-out) infinite; }
  .hero-sep-link-l { animation: heroSepLinkL 4.5s var(--ease-in-out) infinite; }
  .hero-sep-link-r { animation: heroSepLinkR 4.5s var(--ease-in-out) infinite; }
  .hero-sep-vida   { animation: heroSepVida  4.5s var(--ease-in-out) infinite; }
  /* Tırtıllar sürekli sola akar: solda kırpılıp kaybolur, sağdan yenisi girer.
     Aralık 6px olduğundan -6px'lik lineer döngü dikişsizdir. */
  .hero-sep-knurl  { animation: heroSepSpin 4.5s var(--ease-in-out) infinite; }
}
/* 0%/100% = kapalı (uçlar bitişik), 50% = açık */
@keyframes heroSepArmL  { 0%, 100% { transform: rotate(0deg); }  50% { transform: rotate(-8deg); } }
@keyframes heroSepArmR  { 0%, 100% { transform: rotate(0deg); }  50% { transform: rotate(8deg); } }
@keyframes heroSepLinkL { 0%, 100% { transform: rotate(0deg); }  50% { transform: rotate(-14deg); } }
@keyframes heroSepLinkR { 0%, 100% { transform: rotate(0deg); }  50% { transform: rotate(14deg); } }
@keyframes heroSepVida  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Tırtıl akışı kollarla AYNI süre+easing'i paylaşır → dönüş hızı kol hızıyla
   orantılı; 0%/50%/100% dönüm noktalarında doğal yavaşlar ve yön değiştirir
   (açılırken sola, kapanırken sağa akar). -42px = 7 tırtıl adımı. */
@keyframes heroSepSpin  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-42px); } }

@media (max-width: 860px) {
  .hero-sep { height: 130%; opacity: 0.06; }
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 85% 20%, rgba(15, 108, 189,0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 80%, rgba(15, 108, 189,0.14), transparent 55%),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 100% 100%, 240px 240px;
  z-index: -1;
}

.hero-section h1, .hero-section h2 {
  color: var(--paper);
  font-size: clamp(2.25rem, 7vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 18ch;
  margin: var(--s-4) 0 var(--s-5);
  position: relative;
}
.hero-section h1::after, .hero-section h2::after { display: none; }

.hero-section p {
  color: rgba(247, 250, 252, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 0 var(--s-6);
  position: relative;
}

/* Scroll / Feature Sections */
.scroll-section {
  background: var(--card);
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-4);
  border: 1px solid var(--hairline);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.scroll-section:hover {
  border-color: var(--copper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.scroll-section h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  line-height: 1.15;
}
.scroll-section h3::before {
  content: '';
  display: none;
}
.scroll-section h3 i {
  color: var(--copper) !important;
  font-size: 18px;
  width: 22px;
  opacity: 0.9;
}

.scroll-section p {
  color: var(--steel);
  line-height: 1.72;
  font-size: 0.9375rem;
}

.scroll-section img {
  border-radius: var(--radius) !important;
  border: 1px solid var(--hairline) !important;
  background: var(--paper-deep) !important;
}

.placeholder-box {
  height: 180px;
  background: var(--paper-deep);
  border-radius: var(--radius);
  margin-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist);
  font-weight: 500;
  border: 1px dashed var(--hairline-strong);
}

/* --------------------------------------------------------------------------
   PRODUCT CARDS
   -------------------------------------------------------------------------- */
.urun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
}

.urun-wrap { display: flex; flex-direction: column; }

.urun-kart {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t) var(--ease-out), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
  position: relative;
}
.urun-kart::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease-out);
}
.urun-kart:hover {
  border-color: var(--copper);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.urun-kart:hover::before { opacity: 1; }

.urun-kart-resim {
  width: 100%;
  height: 240px;
  object-fit: contain;
  /* Görsel şeridi sade açık zemin — koyu slate/gradient kaldırıldı. */
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px;
  box-sizing: border-box;
  transition: transform var(--t-slow) var(--ease-out);
}
.urun-kart:hover .urun-kart-resim { transform: scale(1.04); }

.urun-kart-body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }

.urun-kart-adi {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 460;
  color: var(--ink);
  margin-bottom: var(--s-2);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.urun-kart-acik {
  font-size: 0.875rem;
  color: var(--steel);
  margin-bottom: var(--s-4);
  flex: 1;
  line-height: 1.6;
}

.urun-kart-fiyat {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-1);
  letter-spacing: -0.02em;
}
.urun-kart-fiyat small {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.urun-stok-ok {
  font-size: 12px;
  font-weight: 500;
  color: var(--sage);
  margin-bottom: var(--s-3);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.urun-stok-ok i { font-size: 11px; }

.urun-stok-yok {
  font-size: 12px;
  font-weight: 500;
  color: var(--rust);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.adet-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  width: fit-content;
}
.adet-wrap button {
  width: 36px;
  height: 38px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: background var(--t-fast);
}
.adet-wrap button:hover { background: var(--copper-soft); color: var(--copper); border: none; }
.adet-wrap input {
  width: 44px;
  height: 38px;
  border: none;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-mono);
  background: transparent;
}
.adet-wrap input:focus { outline: none; background: var(--paper-deep); }
.adet-wrap + span { font-size: 0.8125rem !important; color: var(--mist) !important; margin-left: 8px; }

/* Yorum bölümü — kart devamı */
.yorum-bolumu {
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--paper-deep);
  padding: var(--s-4) var(--s-5);
}

/* --------------------------------------------------------------------------
   SLIDER
   -------------------------------------------------------------------------- */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 500px;
  margin: var(--s-6) auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.slider-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.slider-slide.active { opacity: 1; z-index: 2; }

#mainImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
  transition: transform 420ms var(--ease-out);
}
.slider-container:hover #mainImage { transform: scale(1.02); }

.slider-thumbnails {
  max-width: 900px;
  margin: var(--s-4) auto 0;
  overflow: hidden;
  padding: 0 var(--s-3);
}
.slider-thumbnails-track {
  display: flex;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  transition: transform var(--t) var(--ease-out);
}
.slider-thumbnails img {
  width: 92px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--hairline);
  transition: var(--transition);
  flex-shrink: 0;
  opacity: 0.5;
  background: var(--paper-deep);
}
.slider-thumbnails img:hover { opacity: 1; transform: translateY(-2px); }
.slider-thumbnails img.active {
  opacity: 1;
  border-color: var(--copper);
  box-shadow: 0 0 0 2px var(--copper-soft);
}

.slider-buttons {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.slider-buttons button {
  padding: 12px 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: var(--transition);
}
.slider-buttons button:hover {
  border-color: var(--copper);
  color: var(--copper);
  background: var(--copper-soft);
  transform: none;
  box-shadow: none;
}
.slider-buttons button i { font-size: 11px; }

/* Product gallery caption */
.product-detail {
  text-align: center;
  padding: var(--s-6) var(--s-5);
  background: transparent;
  border-top: 1px solid var(--hairline);
  margin-top: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--hairline);
}
.detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.detail-desc {
  color: var(--steel);
  line-height: 1.75;
  max-width: var(--prose-max);
  margin: 0 auto;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
/* BUTONLAR — Primary / Secondary / Ghost sistemi (Faz 7)
   .btn            = Primary: dolu gövde (ink → copper/blue wipe hover).
                     Görünüm başına TEK primary kullan (ana dönüşüm aksiyonu).
   .btn-secondary  = Secondary: outline; destekleyici aksiyonlar.
   .btn-ghost      = Ghost: yalnızca metin, düşük vurgu; tersiyer / nav aksiyonları.
   Değiştiriciler:  .btn-sm / .btn-lg (boyut) · :disabled | .disabled (pasif).
   Odak halkası global :focus-visible'dan gelir (bkz. ACCESSIBILITY bölümü).
   KARAR (2026-07-19): Primary "solid blue"ya ÇEVRİLMEYECEK — kullanıcı önizleme sonrası mevcut ink→blue wipe davranışını tercih etti. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 28px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--t) var(--ease-out), border-color var(--t) var(--ease-out), color var(--t) var(--ease-out), transform var(--t) var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  line-height: 1;
  white-space: nowrap;
}
.btn i { font-size: 12px; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--copper);
  transform: translateY(101%);
  transition: transform 320ms var(--ease-in-out);
  z-index: -1;
}
.btn:hover {
  border-color: var(--copper);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn:hover::before { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-secondary::before {
  background: var(--ink);
}
.btn-secondary:hover {
  color: var(--paper);
  border-color: var(--ink);
}

/* Ghost — yalnızca metin, düşük vurgu (tersiyer / nav aksiyonları) */
.btn-ghost {
  background: transparent;
  color: var(--copper);
  border-color: transparent;
}
.btn-ghost::before { display: none; }
.btn-ghost:hover {
  background: var(--copper-soft);
  border-color: transparent;
  color: var(--copper-deep);
  box-shadow: none;
  transform: none;
}

/* Pasif durum — tüm .btn varyantları için ortak (opt-in: :disabled | .disabled) */
.btn:disabled,
.btn[disabled],
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.btn:disabled::before,
.btn[disabled]::before,
.btn.disabled::before { display: none; }

/* Boyut ölçeği — mevcut varsayılan (14px 28px) orta boy kabul edilir */
.btn-sm { padding: 9px 18px;  font-size: 0.8125rem; }
.btn-lg { padding: 17px 36px; font-size: 1rem; }

.btn-submit { align-self: flex-start; padding: 14px 32px; }

.btn-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: transparent;
  transition: var(--transition);
}
.btn-home:hover {
  border-color: var(--copper);
  color: var(--copper);
  background: var(--copper-soft);
}

.nav-btns { display: flex; align-items: center; gap: var(--s-4); }

/* Sepete Ekle */
.btn-sepete {
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  line-height: 1;
}
.btn-sepete::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--copper);
  transform: translateY(101%);
  transition: transform 320ms var(--ease-in-out);
  z-index: -1;
}
.btn-sepete:hover { border-color: var(--copper); opacity: 1; }
.btn-sepete:hover::before { transform: translateY(0); }
.btn-sepete:disabled {
  background: var(--bone);
  color: var(--mist);
  border-color: var(--hairline-strong);
  cursor: not-allowed;
}
.btn-sepete:disabled::before { display: none; }

.btn-full {
  width: 100%;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
}
.btn-full:hover { background: var(--copper); border-color: var(--copper); }
.btn-full.disabled-look,
.btn-full:disabled {
  background: var(--bone);
  color: var(--mist);
  border-color: var(--hairline-strong);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.contact-section { max-width: 720px; margin: 0 auto; }
.contact-section form { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); }

.contact-section label,
label {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-section input,
.contact-section textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select, textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  transition: border-color var(--t-fast), background var(--t-fast);
  background: var(--card);
  color: var(--ink);
}

.contact-section input:focus,
.contact-section textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--copper);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--copper-soft);
}

.contact-section textarea { resize: vertical; min-height: 140px; font-family: var(--font-body); }

#formMessage {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  font-weight: 500;
  text-align: center;
  margin-top: var(--s-4);
  display: none;
  font-size: 0.9375rem;
}
#formMessage.success {
  display: block;
  background: var(--sage-soft);
  color: #2F4020;
  border: 1px solid var(--sage);
}
#formMessage.error {
  display: block;
  background: var(--rust-soft);
  color: #6F2111;
  border: 1px solid var(--rust);
}

/* --------------------------------------------------------------------------
   FOOTER CONTACT BLOCK
   -------------------------------------------------------------------------- */
.footer-contact {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 7vw, 72px) clamp(28px, 5vw, 56px);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-top: var(--s-7);
  position: relative;
  overflow: hidden;
}

.footer-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15, 108, 189,0.2), transparent 60%),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 220px 220px;
  pointer-events: none;
}

.footer-contact > * { position: relative; }

.footer-contact h3 {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 350;
  margin-bottom: var(--s-4);
  letter-spacing: -0.02em;
}
.footer-contact h3::before { display: none; }

.footer-contact p {
  color: rgba(247, 250, 252, 0.78);
  margin: var(--s-2) 0;
  font-size: 0.9375rem;
}
.footer-contact p strong { color: var(--paper); font-weight: 500; }

.footer-contact .btn {
  margin-top: var(--s-5);
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.footer-contact .btn::before { background: var(--copper); }
.footer-contact .btn:hover { color: var(--paper); border-color: var(--copper); }

/* --------------------------------------------------------------------------
   VIDEO WRAPPER
   -------------------------------------------------------------------------- */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #000;
}
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Video facade (tıklayınca gerçek iframe yüklenir — çerez/perf için) */
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; display: block; }
.yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 50px; border-radius: 14px; background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; padding-left: 3px;
  transition: background var(--t-fast), transform var(--t-fast);
}
.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play { background: #cc0000; transform: translate(-50%, -50%) scale(1.06); }

/* --------------------------------------------------------------------------
   HEADER — cart dropdown, user menu (override inline styles)
   -------------------------------------------------------------------------- */
.sepet-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  transition: var(--transition);
}
.sepet-btn:hover {
  border-color: var(--copper);
  color: var(--copper);
  background: var(--copper-soft);
}
.sepet-rozet {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--copper);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.sepet-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 360px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
}
.sepet-dropdown.acik { display: block; animation: ddIn 240ms var(--ease-out); }

.sepet-dd-header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sepet-dd-header i { color: var(--copper) !important; margin-right: 8px; }

.sepet-dd-liste { max-height: 320px; overflow-y: auto; }
.sepet-dd-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.8125rem;
}
.sepet-dd-item:last-child { border-bottom: none; }
.sepet-dd-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  padding: 3px;
}

.sepet-dd-footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--paper-deep);
}
.sepet-dd-satir {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  margin-bottom: var(--s-2);
  color: var(--steel);
}
.sepet-dd-satir span:last-child { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
.sepet-dd-satir.toplam {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: var(--s-3) 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.sepet-dd-satir.toplam span:last-child { color: var(--copper); font-size: 1.0625rem; }

.sepet-dd-bos {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--mist);
  font-size: 0.875rem;
}
.sepet-dd-bos i { color: var(--hairline-strong) !important; }

.btn-sepet-git {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: 12px;
  background: var(--ink) !important;
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.btn-sepet-git:hover { background: var(--copper) !important; border-color: var(--copper); }

.user-menu-wrap { position: relative; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--ink) !important;
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--t), border-color var(--t);
}
.user-menu-btn:hover { background: var(--copper) !important; border-color: var(--copper); opacity: 1; }
.user-menu-btn i:first-child { font-size: 13px; }

.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  z-index: var(--z-dropdown);
  overflow: hidden;
}
.user-dropdown.acik { display: block; animation: ddIn 240ms var(--ease-out); }

.user-dd-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px var(--s-4);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--t-fast);
}
.user-dd-link:hover { background: var(--paper-deep); }
.user-dd-link i { width: 16px; text-align: center; color: var(--copper); font-size: 13px; }
.user-dd-divider { height: 1px; background: var(--hairline); margin: var(--s-1) 0; }

@keyframes ddIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* --------------------------------------------------------------------------
   TOAST / NOTIFICATION
   -------------------------------------------------------------------------- */
#toast-bildirim {
  font-family: var(--font-body) !important;
  background: var(--ink) !important;
  color: var(--paper);
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--ink);
}

/* --------------------------------------------------------------------------
   ANIMATIONS — page load choreography
   -------------------------------------------------------------------------- */
.fade-in { animation: fadeUp 620ms var(--ease-out) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal (opt-in). Başlangıç gizli durumu SADECE JS aktifken (.js-reveal)
   uygulanır → script yüklenmezse içerik görünür kalır. Observer .reveal-in ekler.
   İçerik bloklarını script.js olan sayfalarda .reveal ile işaretleyin. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal .reveal.reveal-in { opacity: 1; transform: none; }
/* Stagger: aynı kapsayıcıdaki ardışık .reveal'ler kademeli girer */
.js-reveal .reveal.reveal-in:nth-child(2) { transition-delay: 70ms; }
.js-reveal .reveal.reveal-in:nth-child(3) { transition-delay: 140ms; }
.js-reveal .reveal.reveal-in:nth-child(4) { transition-delay: 210ms; }
.js-reveal .reveal.reveal-in:nth-child(5) { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

.main-content > section {
  animation: fadeUp 680ms var(--ease-out) both;
}
.main-content > section:nth-child(1) { animation-delay: 60ms; }
.main-content > section:nth-child(2) { animation-delay: 140ms; }
.main-content > section:nth-child(3) { animation-delay: 220ms; }
.main-content > section:nth-child(4) { animation-delay: 300ms; }
.main-content > section:nth-child(5) { animation-delay: 380ms; }
.main-content > section:nth-child(6) { animation-delay: 460ms; }

/* Scroll ilerleme çubuğu (script.js ScrollProgress ile beslenir). scaleX
   transform = GPU-dostu, layout thrash yok. Scroll ile 1:1 hareket eder
   (kendi başına animasyon yok) — reduced-motion için sorunlu değil. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: var(--z-toast);
  pointer-events: none;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   SONUÇ KARTI (Faz 7) — ödeme/işlem sonuç sayfaları (basarili/basarisiz)
   Ortak merkez kutu + durum ikonu. Sayfalar body'de flex ile ortalar.
   -------------------------------------------------------------------------- */
.result-card {
  background: var(--card);
  border-radius: 20px;
  padding: 56px 48px;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 36px;
}
.result-icon.ok   { background: #dcfce7; color: #22c55e; }
.result-icon.fail { background: #fee2e2; color: #dc2626; }

/* --------------------------------------------------------------------------
   STAT CARD — istatistik/özet kutusu (Phase 7 birleştirme)
   hesap/index, admin/index, hesap/siparislerim'deki 3 ayrı stat çeşidinin
   (.stat/.num-.lbl · .stat/.n-.l · .ozet-kart/.sayi-.etiket) ortak bileşeni.
   Sayı tabular-nums ile hizalı; ölçü clamp ile duyarlı.
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  text-align: center;
}
.stat-card .stat-num {
  font-size: clamp(24px, 4vw, 28px);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card .stat-lbl {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   TABLE — veri tablosu (Phase 7 birleştirme)
   hesap/index, hesap/siparis-detay, admin/index, admin/urunler'deki 4 ayrı
   .tbl bloğunun ortağı. Her birinden faydalı özellik toplandı: uppercase
   başlık, satır hover, tfoot, .tbl-wrap taşma + mobil min-genişlik.
   -------------------------------------------------------------------------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl th {
  text-align: left;
  padding: 11px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--paper); }
.tbl tfoot td {
  padding: 11px 14px;
  font-weight: 600;
  border-top: 2px solid var(--border);
  border-bottom: none;
}
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* min-width yalnızca kaydırılabilir .tbl-wrap içindeki tablolara — sarmalanmamış
   (ör. admin) tablolar mobilde akışkan kalıp taşmasın. */
@media (max-width: 768px) {
  .tbl-wrap .tbl { min-width: 480px; }
}

/* --------------------------------------------------------------------------
   TOAST — bildirim (Phase 7 birleştirme)
   header.php bildirimGoster() bu sınıfları kullanır. Mesaj textContent ile
   basılır (XSS'e yapısal bağışık); renk/ikon .toast--hata ile değişir.
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--paper);
  padding: 13px 18px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 320ms cubic-bezier(.2, .6, .2, 1);
  border-left: 3px solid var(--sage);
  max-width: min(360px, calc(100vw - 40px));
}
.toast--hata { border-left-color: var(--rust); }
.toast-ikon { color: var(--sage); flex-shrink: 0; }
.toast--hata .toast-ikon { color: var(--rust); }
.toast-metin { word-break: break-word; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Skip-link — klavye/ekran okuyucu kullanıcıları nav'ı atlayıp içeriğe geçsin.
   Odaklanana dek görünmez; Tab ile ilk odakta üstte belirir. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }
#ana-icerik:focus { outline: none; }

/* Hover durumları CSS'e taşındı (inline onmouseover/onmouseout yerine) →
   klavye kullanıcıları da :focus-visible ile aynı vurguyu görür. */
.urun-detay-btn { background: var(--card); }
.urun-detay-btn:hover,
.urun-detay-btn:focus-visible { background: var(--copper-soft); }

.sepet-sil-btn { background: none; }
.sepet-sil-btn:hover,
.sepet-sil-btn:focus-visible { background: var(--rust-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .top-nav { gap: var(--s-5); }
  .main-content { padding: var(--s-6) clamp(16px, 4vw, 32px) var(--s-8); }
  .section { padding: var(--s-6); }
  .slider-container { height: 420px; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --nav-h-desktop: var(--nav-h-mobile);
  }

  .site-header {
    height: var(--nav-h-mobile);
    padding: 0 var(--s-4);
  }
  .site-header .site-brand { font-size: 0.9375rem; gap: 8px; }
  .site-logo { width: 32px; height: 32px; }
  .brand-text { font-size: 1.0625rem; }

  /* Hide horizontal nav — alt tab bar navigates instead */
  .top-nav { display: none; }

  /* Social icons hidden on mobile to declutter */
  .social-icons { display: none; }

  /* Show mobile bottom nav */
  .mobile-bottom-nav { display: block; }

  /* Add padding bottom for bottom-nav clearance */
  body { padding-bottom: var(--bottom-nav-h); }

  .main-content {
    margin-top: var(--nav-h-mobile);
    padding: var(--s-5) var(--s-4) var(--s-7);
  }

  .section {
    padding: var(--s-5) var(--s-4);
    border-radius: var(--radius-lg);
  }
  .section h2 { font-size: 1.75rem; }

  .hero-section {
    padding: var(--s-7) var(--s-5);
    border-radius: var(--radius-lg);
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero-visual img { max-width: 340px; }
  .hero-section h1, .hero-section h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-section p { font-size: 1rem; }

  .scroll-section {
    padding: var(--s-5) var(--s-4);
    border-radius: var(--radius);
  }
  .scroll-section h3 { font-size: 1.25rem; }

  .urun-grid {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .urun-kart-resim { height: 220px; padding: 18px; }
  .urun-kart-adi { font-size: 1.125rem; }

  .slider-container { height: 300px; }
  #mainImage { padding: 20px; }
  .slider-thumbnails img { width: 68px; height: 52px; }

  .slider-buttons { flex-direction: row; gap: var(--s-2); }
  .slider-buttons button {
    flex: 1;
    justify-content: center;
    padding: 11px 16px;
    font-size: 0.8125rem;
  }

  .product-detail { padding: var(--s-5) var(--s-4); }

  .btn, .btn-submit { width: auto; }

  /* Header dropdowns — fullwidth on mobile */
  .sepet-dropdown {
    position: fixed;
    top: var(--nav-h-mobile);
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: var(--shadow-md);
  }
  .user-dropdown {
    position: fixed;
    top: var(--nav-h-mobile);
    right: 8px;
    min-width: 220px;
  }

  .footer-contact { padding: var(--s-6) var(--s-4); }
  .footer-contact h3 { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — small mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .site-header .site-brand { font-size: 0.875rem; gap: 6px; }
  .brand-text { display: none; }

  .section h2 { font-size: 1.5rem; }
  .hero-section h1, .hero-section h2 { font-size: 2rem; letter-spacing: -0.03em; }
  .slider-container { height: 240px; }
  .slider-thumbnails img { width: 56px; height: 44px; }
  .placeholder-box { height: 140px; }

  .sepet-dropdown, .user-dropdown { font-size: 0.8125rem; }

  .mobile-bottom-nav a { font-size: 9px; }
  .mobile-bottom-nav a i { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   UTILITIES — used throughout site inline
   -------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

/* Uyarı vurgusu — sepet.php odeme butonu */
.uyari-vurgu {
  animation: uyariShake 420ms var(--ease-out);
  border-color: var(--rust) !important;
  background: var(--rust-soft) !important;
}
@keyframes uyariShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* Generic utility */
.text-copper { color: var(--copper); }
.text-ink { color: var(--ink); }
.text-mist { color: var(--mist); }
.bg-paper-deep { background: var(--paper-deep); }

/* Prose link in copy */
.main-content a:not(.btn):not(.sepet-btn):not(.user-menu-btn):not(.user-dd-link):not(.btn-sepete):not(.btn-sepet-git):not(.btn-full):not(.btn-home):not(.btn-secondary):not(.top-nav a):not(.mobile-bottom-nav a):not(.sidebar a):not(.social-icons a):not(.slider-thumbnails a) {
  color: var(--copper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.main-content a:not(.btn):not(.sepet-btn):not(.user-menu-btn):not(.user-dd-link):not(.btn-sepete):not(.btn-sepet-git):not(.btn-full):not(.btn-home):not(.btn-secondary):not(.top-nav a):not(.mobile-bottom-nav a):not(.sidebar a):not(.social-icons a):not(.slider-thumbnails a):hover {
  border-bottom-color: var(--copper);
}

/* --------------------------------------------------------------------------
   SITE FOOTER — moved from includes/footer_logos.php (Phase 1 consolidation)
   -------------------------------------------------------------------------- */
.site-footer {
  background: #0E1A24;
  color: var(--paper);
  padding: 56px 24px 36px;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(15, 108, 189,0.12), transparent 60%),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 220px 220px;
  pointer-events: none;
}
.site-footer > div { position: relative; }
.site-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 32px;
}
.site-footer-brand img { height: 40px; border-radius: 4px; opacity: 0.92; }
.site-footer-brand .name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.site-footer-brand .tag {
  font-size: 11px;
  color: #7C8A94;
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
  margin-bottom: 32px;
}
.site-footer-links a {
  color: #9DAEB9;
  font-size: 13px;
  padding: 6px 14px;
  white-space: nowrap;
  transition: color var(--t-fast);
  position: relative;
}
.site-footer-links a:hover { color: var(--copper); }
.site-footer-links .sep {
  color: #24333D;
  font-size: 13px;
  line-height: 30px;
  user-select: none;
}
.site-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #24333D, transparent);
  margin-bottom: 28px;
}
.site-footer-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.site-footer-pay img { max-width: 320px; width: 100%; height: auto; opacity: 0.92; }
.site-footer-ssl {
  background: rgba(234, 246, 255, 0.06);
  border: 1px solid #24333D;
  border-radius: var(--radius);
  padding: 7px 13px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.site-footer-ssl span {
  color: var(--sage);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.site-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(234, 246, 255, 0.04);
  border: 1px solid #24333D;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9DAEB9;
  font-size: 15px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.site-footer-social a:hover {
  color: var(--copper);
  border-color: var(--copper);
  background: rgba(15, 108, 189,0.1);
}
.site-footer-copy {
  text-align: center;
  color: #7C8A94;
  font-size: 12px;
  line-height: 1.8;
}
.site-footer-copy strong { color: #AEBCC5; font-weight: 500; }
.site-footer-copy a { color: #7C8A94; border-bottom: 1px solid #24333D; transition: color var(--t-fast); }
.site-footer-copy a:hover { color: var(--copper); border-bottom-color: var(--copper); }

/* KOYU HEADER + koyu mobil alt bar override bloğu KALDIRILDI →
   header ve mobil alt bar varsayılan açık stiline döndü (style.css:207 vb.). */

/* ══════════════════════════════════════════════════════════════════════
   "Hemen başlayın." final çağrı bloğu (index.php .cta-koyu)
   Koyu antrasit zemin kaldırıldı → sade açık bölüm, varsayılan butonlar.
   Sınıf adı korunuyor; sadece hafif açık zemin veriyor.
   ══════════════════════════════════════════════════════════════════════ */
.cta-koyu {
  background: var(--paper-deep);
}

/* ══════════════════════════════════════════════════════════════════════
   "Üç temel vaadimiz" özellik bölümü (index.php .ozellik-slate)
   Koyu slate zemin kaldırıldı → varsayılan açık bölüm + açık kartlar.
   ══════════════════════════════════════════════════════════════════════ */
.ozellik-slate {
  background: var(--paper-deep);
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT — yasal sayfalar + sipariş onay/başarı çıktıları için temiz baskı.
   Yalnızca yazdırmada etkin (additive; ekran görünümünü etkilemez).
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }
  body { background: #fff !important; }

  /* Baskıda gereksiz kabuk/etkileşim öğelerini gizle */
  .site-header, .mobile-bottom-nav, .scroll-progress, .skip-link,
  .site-footer, .sepet-dropdown, .user-dropdown, #toast-bildirim,
  .hero-sep, .lightbox, .aside, .sidebar, .sidebar-overlay,
  .btn, .btn-secondary, .btn-ghost, .btn-full, .btn-sepete, .btn-sepet-git,
  .adet-wrap, .urun-ekle-kart, .sepet-sil-btn {
    display: none !important;
  }

  /* İçerik tam genişlik, üst boşluğu sıfırla (fixed header kalktı) */
  main, .main-content, .yasal-wrap, .hakkimizda-wrap {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  a { text-decoration: underline; }
  /* Kart/bölüm ortasından sayfa kırılmasını önle */
  .card, .result-card, .tbl, tr, img, .scroll-section { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Reveal ile gizlenmiş içerik baskıda görünür olsun */
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}