/* ============================================
   NOKTA BİLGİSAYAR — DESIGN SYSTEM 2026
   Tasarım Tokenleri, Reset, Global Stiller
   ============================================ */

/* ---- Fontlar ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- CSS Değişkenleri ---- */
:root {
  /* === Koyu Arka Plan Renkleri === */
  --bg-dark:       #05081A;
  --bg-dark-2:     #090E1E;
  --bg-dark-3:     #0D1525;
  --bg-dark-card:  #111B2E;

  /* === Marka Renkleri === */
  --brand:         #0A2540;
  --brand-light:   #163860;

  /* === Ana Vurgu: Cyan & Blue === */
  --cyan:          #00C8FF;
  --cyan-dim:      rgba(0, 200, 255, 0.10);
  --cyan-border:   rgba(0, 200, 255, 0.20);
  --cyan-glow:     0 0 40px rgba(0, 200, 255, 0.25);

  --blue:          #3F79F5;
  --blue-dim:      rgba(63, 121, 245, 0.10);
  --blue-border:   rgba(63, 121, 245, 0.20);

  /* === İkincil Aksan === */
  --purple:        #7C5CFA;
  --purple-dim:    rgba(124, 92, 250, 0.10);
  --emerald:       #10D684;
  --amber:         #F5A623;
  --rose:          #F43F5E;

  /* === Açık Bölümler İçin === */
  --light:         #F7FAFF;
  --light-2:       #EEF3FB;
  --white:         #FFFFFF;
  --on-light:      #0A1528;
  --on-light-2:    #2E4468;
  --on-light-3:    #6080A8;
  --border-light:  #DCE5F5;

  /* === Koyu Bölümler İçin === */
  --on-dark:       #EDF2FC;
  --on-dark-2:     #7A91BA;
  --on-dark-3:     #4A5F7A;
  --border-dark:   rgba(255, 255, 255, 0.08);
  --border-dark-2: rgba(255, 255, 255, 0.14);

  /* === Degradeler === */
  --g-hero:        linear-gradient(150deg, #05081A 0%, #0A1530 55%, #081E3E 100%);
  --g-accent:      linear-gradient(135deg, #00C8FF 0%, #3F79F5 100%);
  --g-warm:        linear-gradient(135deg, #3F79F5 0%, #7C5CFA 100%);
  --g-dark-card:   linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --g-glow:        radial-gradient(ellipse 90% 55% at 50% -5%, rgba(0,200,255,0.20) 0%, transparent 100%);
  --g-glow-blue:   radial-gradient(ellipse 60% 40% at 90% 40%, rgba(63,121,245,0.14) 0%, transparent 100%);

  /* === Legacy Uyumluluk Değişkenleri === */
  --color-primary:           var(--brand);
  --color-primary-light:     var(--brand-light);
  --color-accent:            var(--cyan);
  --color-accent-dark:       #0099cc;
  --color-surface:           var(--light);
  --color-surface-alt:       var(--light-2);
  --color-dark:              var(--bg-dark);
  --color-dark-alt:          var(--bg-dark-2);
  --color-text:              var(--on-light);
  --color-text-secondary:    var(--on-light-2);
  --color-text-light:        var(--on-light-3);
  --color-white:             var(--white);
  --color-border:            var(--border-light);
  --color-success:           var(--emerald);
  --gradient-hero:           var(--g-hero);
  --gradient-accent:         var(--g-accent);
  --gradient-card:           var(--g-dark-card);
  --shadow-accent:           var(--cyan-glow);
  --shadow-primary:          0 8px 32px rgba(10, 37, 64, 0.35);

  /* === Tipografi === */
  --font-display:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family:    var(--font-body);

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Legacy */
  --font-size-xs:   var(--text-xs);
  --font-size-sm:   var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg:   var(--text-lg);
  --font-size-xl:   var(--text-xl);
  --font-size-2xl:  var(--text-2xl);
  --font-size-3xl:  var(--text-3xl);
  --font-size-4xl:  var(--text-4xl);
  --font-size-5xl:  var(--text-5xl);
  --font-size-6xl:  var(--text-6xl);

  /* === Boşluklar === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Kenar Yarıçapı === */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-3xl:  40px;
  --r-full: 9999px;

  /* Legacy */
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  var(--r-2xl);
  --radius-full: var(--r-full);

  /* === Gölgeler === */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.15);
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.16);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.38), 0 4px 12px rgba(0,0,0,0.22);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.28);
  --shadow-card:  0 0 0 1px var(--border-dark), 0 4px 24px rgba(0,0,0,0.30);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* === Geçişler === */
  --ease-fast:   150ms ease;
  --ease-base:   250ms ease;
  --ease-slow:   400ms ease;
  --ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy */
  --transition-fast:   var(--ease-fast);
  --transition-base:   var(--ease-base);
  --transition-slow:   var(--ease-slow);
  --transition-spring: var(--ease-spring);

  /* === Düzen === */
  --container-max:     1280px;
  --container-padding: var(--space-6);
  --navbar-height:     76px;
  --section-padding:   var(--space-24);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--on-light);
  background-color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ============================================
   KAPSAYICI
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ============================================
   BÖLÜM
   ============================================ */
.section {
  padding-block: var(--section-padding);
}

.section--white  { background-color: var(--white); }
.section--light  { background-color: var(--light); }
.section--light2 { background-color: var(--light-2); }

.section--dark {
  background-color: var(--bg-dark);
  color: var(--on-dark);
}

.section--deep {
  background-color: var(--bg-dark-2);
  color: var(--on-dark);
}

/* Legacy */
.section--alt { background-color: var(--light); }

/* ============================================
   BÖLÜM BAŞLIĞI
   ============================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-full);
  margin-bottom: var(--space-4);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 800;
  color: var(--on-light);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.section--dark  .section-title,
.section--deep  .section-title { color: var(--on-dark); }

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--on-light-2);
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.75;
}

.section--dark  .section-subtitle,
.section--deep  .section-subtitle { color: var(--on-dark-2); }

/* ============================================
   TİPOGRAFİ
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: var(--g-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   BUTONLAR
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem var(--space-8);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: all var(--ease-base);
  position: relative;
  overflow: hidden;
}

/* Birincil */
.btn--primary {
  background: var(--g-accent);
  color: var(--white);
  box-shadow: 0 6px 28px rgba(0, 200, 255, 0.32);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 200, 255, 0.50);
}
.btn--primary:active { transform: translateY(0); }

/* Koyu Arka Plan İçin Outline */
.btn--outline {
  background: rgba(255,255,255,0.07);
  color: var(--on-dark);
  border: 1px solid var(--border-dark-2);
  backdrop-filter: blur(8px);
}
.btn--outline:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-2px);
}

/* Açık Arka Plan İçin Outline */
.btn--outline-dark {
  background: transparent;
  color: var(--on-light);
  border: 1.5px solid var(--border-light);
}
.btn--outline-dark:hover {
  background: var(--on-light);
  color: var(--white);
  transform: translateY(-2px);
}

/* Ghost / Link benzeri */
.btn--ghost {
  background: transparent;
  color: var(--cyan);
  padding-inline: 0;
}
.btn--ghost:hover { gap: var(--space-3); }

/* Boyutlar */
.btn--lg {
  padding: 1.05rem var(--space-10);
  font-size: var(--text-base);
}
.btn--sm {
  padding: 0.55rem var(--space-5);
  font-size: var(--text-xs);
}

/* ============================================
   SAYFA HEROu (İç Sayfalar)
   ============================================ */
.page-hero {
  background: var(--g-hero);
  color: var(--on-dark);
  padding-top: calc(var(--navbar-height) + var(--space-16));
  padding-bottom: var(--space-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Işıma ve ızgara arka plan */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-glow), var(--g-glow-blue);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cyan-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan-dim) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  opacity: 0.45;
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,200,255,0.10);
  border: 1px solid var(--cyan-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-full);
  margin-bottom: var(--space-5);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--on-dark);
  margin-bottom: var(--space-4);
}
.page-hero__title span { color: var(--cyan); }

.page-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.62);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.75;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.48);
  margin-top: var(--space-6);
}
.breadcrumb a { color: var(--cyan); transition: opacity var(--ease-fast); }
.breadcrumb a:hover { opacity: 0.8; }
.breadcrumb__sep { color: rgba(255,255,255,0.22); }

/* ============================================
   AKSAN ÇİZGİSİ
   ============================================ */
.accent-line {
  display: block;
  width: 44px;
  height: 3px;
  background: var(--g-accent);
  border-radius: var(--r-full);
  margin: var(--space-5) auto 0;
}

/* ============================================
   IZGARA SİSTEMLERİ
   ============================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* ============================================
   ROZET / ETİKET
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px var(--space-3);
  border-radius: var(--r-full);
}
.badge--cyan   { background: var(--cyan-dim);   color: var(--cyan);   border: 1px solid var(--cyan-border); }
.badge--blue   { background: var(--blue-dim);   color: var(--blue);   border: 1px solid var(--blue-border); }
.badge--purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(124,92,250,0.22); }

/* ============================================
   GLOW DOT
   ============================================ */
.glow-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--cyan);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 0 rgba(0,200,255,0.5);
  animation: glowPulse 2.2s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  :root { --section-padding: var(--space-20); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-16);
    --container-padding: var(--space-4);
  }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

@media (max-width: 480px) {
  :root { --section-padding: var(--space-12); }
  .grid-4 { grid-template-columns: 1fr; }
  .btn--lg { padding: 0.875rem var(--space-6); font-size: var(--text-base); }
  .page-hero { padding-top: calc(var(--navbar-height) + var(--space-10)); padding-bottom: var(--space-10); }
}

/* ============================================
   ERİŞİLEBİLİRLİK — Hareket Azaltma Tercihi
   ============================================ */
@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;
  }
}

/* ============================================
   FOCUS — Klavye erişilebilirlik
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================
   TEMA GEÇİŞ ANİMASYONU
   ============================================ */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

body,
.navbar,
.dropdown-menu,
.icon-box,
.service-card,
.sector-card,
.sector-card__icon,
.sector-card__tag,
.accordion-item,
.accordion-icon,
.form-control,
.testimonial-card,
.partner-item,
.addon-band,
.addon-group,
.addon-pill,
.solution-strip,
.hero,
.hero__node,
.kiosk-floating-tag,
.carousel-item {
  transition:
    background-color var(--ease-base),
    color var(--ease-base),
    border-color var(--ease-base),
    box-shadow var(--ease-base);
}

/* ============================================
   DARK MODE — Token Geçersiz Kılmaları
   Açık (white/light) yüzeyler koyuya çevrilir;
   zaten koyu olan section'lar değişmez.
   ============================================ */
[data-theme="dark"] {
  --white:        #0A0E1F;
  --light:        #0E1426;
  --light-2:      #121A2E;

  --on-light:     #EDF2FC;
  --on-light-2:   #A6BDDF;
  --on-light-3:   #7A91BA;

  --border-light: rgba(255, 255, 255, 0.08);

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.45);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.70), 0 8px 20px rgba(0,0,0,0.50);
}

/* ============================================
   TEMA TOGGLE BUTONU
   ============================================ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-dark);
  color: var(--on-dark);
  flex-shrink: 0;
  transition:
    background var(--ease-base),
    border-color var(--ease-base),
    color var(--ease-base),
    transform var(--ease-base);
}
.theme-toggle:hover {
  color: var(--cyan);
  border-color: var(--cyan-border);
  background: var(--cyan-dim);
  transform: translateY(-1px);
}

/* Açık navbar üzerinde */
.navbar--light .theme-toggle {
  background: var(--light);
  border-color: var(--border-light);
  color: var(--on-light-2);
}
.navbar--light .theme-toggle:hover {
  color: var(--cyan);
  background: var(--cyan-dim);
  border-color: var(--cyan-border);
}

/* Sun/Moon ikonları */
.theme-toggle__icon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity var(--ease-base), transform var(--ease-base);
}
.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* Mobil menü içinde — tam genişlik etiketli versiyon */
.theme-toggle--mobile {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  justify-content: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  color: var(--on-dark-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-4);
}
.theme-toggle--mobile .theme-toggle__icon {
  position: static;
  opacity: 1 !important;
  transform: none !important;
}
.theme-toggle--mobile .theme-toggle__icon--sun  { display: none; }
.theme-toggle--mobile .theme-toggle__icon--moon { display: inline-block; }
[data-theme="dark"] .theme-toggle--mobile .theme-toggle__icon--sun  { display: inline-block; }
[data-theme="dark"] .theme-toggle--mobile .theme-toggle__icon--moon { display: none; }

.theme-toggle--mobile .theme-toggle__label--light { display: inline; }
.theme-toggle--mobile .theme-toggle__label--dark  { display: none; }
[data-theme="dark"] .theme-toggle--mobile .theme-toggle__label--light { display: none; }
[data-theme="dark"] .theme-toggle--mobile .theme-toggle__label--dark  { display: inline; }

/* ============================================
   DARK MODE — Bileşen düzeltmeleri
   ============================================ */

/* Açık navbar koyu modda koyu cam efekti alır */
[data-theme="dark"] .navbar--light {
  background: rgba(10, 14, 31, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="dark"] .navbar--light.navbar--light-scrolled {
  background: rgba(5, 8, 26, 0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.55);
}
[data-theme="dark"] .navbar--light .nav__link { color: var(--on-dark-2); }
[data-theme="dark"] .navbar--light .nav__link:hover,
[data-theme="dark"] .navbar--light .nav__link--active {
  color: var(--cyan);
  background: var(--cyan-dim);
}
[data-theme="dark"] .navbar--light .nav__hamburger span {
  background: var(--on-dark);
}
[data-theme="dark"] .navbar--light .nav__logo-img {
  filter: brightness(0) invert(1);
}

/* Dropdown ok parçacığı */
[data-theme="dark"] .dropdown-menu::before {
  background: var(--white);
  box-shadow: -2px -2px 5px rgba(0,0,0,0.20);
}

/* Hero nokta ızgarasının dark mode override'ı aşağıda — !important ile çünkü
   sayfa-özel home.css içindeki kural sonradan yükleniyor. */

/* Addon band — yarı saydam beyaz katman koyuya alınır */
[data-theme="dark"] .addon-band {
  background:
    linear-gradient(155deg, rgba(18, 26, 46, 0.65) 0%, rgba(14, 20, 38, 0.92) 100%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Carousel ve partner kartlarındaki logo arka planı — şeffaflık koru */
[data-theme="dark"] .carousel-item {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .carousel-item:hover {
  background: rgba(255, 255, 255, 0.10);
  filter: grayscale(0);
}
[data-theme="dark"] .partner-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Hero bilgi rozeti tooltip — açık metni çevir */
[data-theme="dark"] .hero__node-tooltip {
  background: var(--cyan);
  color: var(--bg-dark);
}

/* Scroll göstergesi koyu modda görünürlük */
[data-theme="dark"] .hero__scroll {
  color: rgba(237, 242, 252, 0.40);
}

/* Form alanı odak */
[data-theme="dark"] .form-control::placeholder {
  color: var(--on-light-3);
  opacity: 0.7;
}

/* ============================================
   DARK MODE — Gradient / Markalı zemin metinleri
   --white değişkeni koyu yüzeye dönüştüğü için
   gradient butonların ve avatar/numara rozetlerinin
   metni sabit beyaz tutulmalı.
   ============================================ */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .nav__contact-btn,
[data-theme="dark"] .form-submit,
[data-theme="dark"] .btn--outline-dark:hover,
[data-theme="dark"] .icon-box:hover .icon-box__icon,
[data-theme="dark"] .why-us-section .icon-box:hover .icon-box__icon,
[data-theme="dark"] .sector-card:hover .sector-card__icon,
[data-theme="dark"] .ecosystem-section .eco-card:hover .eco-card__icon,
[data-theme="dark"] .accordion-item.is-open .accordion-icon,
[data-theme="dark"] .process-step__num,
[data-theme="dark"] .step-item:hover .step-item__number,
[data-theme="dark"] .feature-card:hover .feature-card__icon,
[data-theme="dark"] .solution-badge__icon,
[data-theme="dark"] .testimonial-card__avatar,
[data-theme="dark"] .team-card__avatar,
[data-theme="dark"] .kiosk-screen__welcome,
[data-theme="dark"] .kiosk-tile__name,
[data-theme="dark"] .kiosk-screen__footer,
[data-theme="dark"] .integration-item__name,
[data-theme="dark"] .addon-band__cta:hover {
  color: #FFFFFF;
}

/* Hero düğüm tooltip — koyu modda zaten cyan'a swap edildi */

/* Açık tema kartlarındaki kiosk yazı tonu (mevcut kalır, var(--on-light) kullanır) */
[data-theme="dark"] .kiosk-floating-tag {
  background: var(--bg-dark-card);
  border-color: var(--border-dark);
}

/* Açık temalı home.css "dot ızgara" hero — dark için açık nokta */
[data-theme="dark"] .hero::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
}

/* Sectors ve why-us bölümlerindeki sektör ikon kutusu (light bg → koyu surface)
   hover olmadan görünür kalır */
[data-theme="dark"] .sector-card__icon {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-dark);
}

/* Carousel/partner item gri logo arka planı dark modda yumuşak gri */
[data-theme="dark"] .partner-item {
  background: rgba(255,255,255,0.03);
}

/* Addon-band içindeki pill arka planı */
[data-theme="dark"] .addon-pill {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-dark);
  color: var(--on-light-2);
}
[data-theme="dark"] .addon-pill:hover {
  background: rgba(255,255,255,0.08);
  color: var(--on-light);
}

/* "addon-group" ve "story-block__visual" içindeki dashed border'ları yumuşat */
[data-theme="dark"] .addon-group__title,
[data-theme="dark"] .addon-band__footer,
[data-theme="dark"] .testimonial-card__author {
  border-color: rgba(255,255,255,0.08);
}