/* ============================================================
   SIVENT — Modüler Bant • Endüstriyel B2B Teması
   Renk paleti: Açık Mavi + Beyaz + Karbon Gri
   ============================================================ */

:root {
  /* Marka renkleri */
  --rb-primary:        #1d4ed8;   /* Profesyonel koyu mavi (blue-700) */
  --rb-primary-dark:   #1e40af;   /* blue-800 */
  --rb-primary-darker: #1e3a8a;   /* blue-900 */
  --rb-primary-light:  #dbeafe;   /* blue-100 */
  --rb-accent:         #3b82f6;   /* blue-500 — vurgu */

  /* Nötrler */
  --rb-white: #ffffff;
  --rb-bg:    #f8fafc;            /* slate-50 */
  --rb-bg-2:  #f1f5f9;            /* slate-100 */
  --rb-border:#e2e8f0;            /* slate-200 */
  --rb-text:  #0f172a;            /* slate-900 */
  --rb-text-2:#475569;            /* slate-600 */
  --rb-text-3:#64748b;            /* slate-500 */

  --rb-dark:   #0a1628;            /* koyu lacivert */

  /* Vurgular */
  --rb-success:#10b981;
  --rb-danger: #ef4444;
  --rb-warning:#f59e0b;

  /* Tipografi */
  --rb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rb-font-display: 'Space Grotesk', 'Inter', sans-serif;

  /* Geometri */
  --rb-radius:   12px;
  --rb-radius-sm: 8px;
  --rb-radius-lg: 20px;
  --rb-shadow:   0 4px 24px rgba(15, 23, 42, 0.06);
  --rb-shadow-lg:0 20px 60px rgba(2, 132, 199, 0.15);
  --rb-transition: all .3s cubic-bezier(.4,0,.2,1);

  /* Container */
  --rb-container: 1280px;
  --rb-header-h:  76px;
}

/* ---------------------- Reset + base ---------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #050d1f; }
body {
  margin: 0;
  font-family: var(--rb-font-sans);
  color: var(--rb-text);
  background: #050d1f;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main { display: block; margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rb-primary-dark); text-decoration: none; transition: var(--rb-transition); }
a:hover { color: var(--rb-primary-darker); }

h1,h2,h3,h4 {
  font-family: var(--rb-font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rb-text);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }

.container { width: 100%; max-width: var(--rb-container); margin: 0 auto; padding: 0 1.5rem; }
section { padding: clamp(4rem, 7vw, 6rem) 0; }

.section-heading { text-align: center; margin-bottom: 3rem; }
.section-heading .eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rb-primary-dark);
  background: var(--rb-primary-light);
  padding: .4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.section-heading p { color: var(--rb-text-2); max-width: 680px; margin: 1rem auto 0; }

/* ---------------------- Header ---------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--rb-header-h);
  background: rgba(5,10,31,.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: var(--rb-transition);
}
.site-header.scrolled {
  background: rgba(5,10,31,.98);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.site-header .container {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.brand-logo-picture {
  display: block;
  line-height: 0;
  overflow: visible;
}
.brand-logo {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 260px;
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--rb-font-display); font-weight: 700; font-size: 1.5rem;
  color: #fff;
}
.brand .brand-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--rb-primary), var(--rb-accent));
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.brand-mark svg { width: 22px; height: 22px; }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  font-weight: 500; color: rgba(255,255,255,.85);
  font-size: .95rem; position: relative;
}
.main-nav a::after {
  content: ''; position: absolute; bottom: -6px; left: 0;
  width: 0; height: 2px; background: var(--rb-primary);
  transition: var(--rb-transition);
}
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.nav-cta {
  background: var(--rb-primary);
  color: #fff !important;
  padding: .65rem 1.25rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
}
.nav-cta:hover { background: var(--rb-primary-dark); transform: translateY(-1px); }
.nav-cta::after { display: none !important; }

.menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.menu-toggle span {
  width: 24px; height: 2px; background: rgba(255,255,255,.85);
  transition: var(--rb-transition);
}

/* ---------------------- Hero ---------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 0 !important;
  margin-top: 0 !important;
  display: flex; align-items: center;
  overflow: hidden;
  color: #fff;
  background: #0a1440;
}
.hero-fallback-bg {
  width:100%; height:100%;
  background: linear-gradient(135deg, #0a1650 0%, #1d4ed8 50%, #0a1628 100%);
}
.hero-media {
  position: absolute; inset: 0; z-index: 0;
}
.hero-media video, .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(4,10,28,.93) 0%, rgba(4,10,28,.84) 35%, rgba(4,10,28,.38) 68%, transparent 100%);
}
.hero-overlay::after {
  content: ''; position: absolute; inset: 0;
  background-image: none;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 560px;
  padding-top: var(--rb-header-h);
  padding-bottom: 14rem;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .05em;
  margin-bottom: 2rem;
  margin-top: .5rem;
  animation: fadeUp .8s .25s ease both;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rb-accent);
  box-shadow: 0 0 0 0 rgba(6, 182, 212, .7);
  animation: pulse 2s infinite;
}
.hero h1 {
  color: #fff;
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  animation: fadeUp .9s .1s ease both;
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--rb-primary-light), var(--rb-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 620px;
  color: rgba(255,255,255,.9);
  margin: 0 0 2.5rem;
  animation: fadeUp 1s .2s ease both;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  animation: fadeUp 1.1s .3s ease both;
}

/* CTA butonları */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: none; cursor: pointer;
  transition: var(--rb-transition);
  text-decoration: none;
}
.btn-primary {
  background: var(--rb-white);
  color: var(--rb-primary-darker);
  box-shadow: 0 10px 30px rgba(255,255,255,.2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(255,255,255,.3);
  color: var(--rb-primary-darker);
}
.btn-outline-light {
  background: rgba(255,255,255,.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-color: #fff;
}
.btn-primary-solid {
  background: var(--rb-primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
}
.btn-primary-solid:hover {
  background: var(--rb-primary-dark);
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--rb-primary-dark);
  border: 1.5px solid var(--rb-border);
}
.btn-outline:hover { border-color: var(--rb-primary); color: var(--rb-primary-darker); }

.hero-stats {
  position: absolute;
  bottom: 3rem; left: 0; right: 0;
  z-index: 2;
}
.hero-stats .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.hero-stat .num {
  font-family: var(--rb-font-display);
  font-size: 2.2rem; font-weight: 700; color: #fff;
  letter-spacing: -.02em;
}
.hero-stat .label {
  font-size: .85rem; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .1em;
}

/* ---------------------- Trust strip (logo bar) ---------------------- */
.trust-strip {
  padding: 2.5rem 0;
  background: var(--rb-bg);
  border-bottom: 1px solid var(--rb-border);
}
.trust-strip h4 {
  font-size: .8rem; color: var(--rb-text-3);
  text-transform: uppercase; letter-spacing: .15em;
  text-align: center; margin: 0 0 1.5rem;
}
.trust-strip .badges {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 3rem;
  align-items: center;
}
.trust-badge {
  display: flex; align-items: center; gap: .75rem;
  font-weight: 600; color: var(--rb-text-2);
}
.trust-badge svg { width: 32px; height: 32px; color: var(--rb-primary); }

/* ---------------------- Kategori grid (Anasayfa) ---------------------- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.category-card {
  position: relative;
  background: var(--rb-white);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  padding: 2rem;
  transition: var(--rb-transition);
  overflow: hidden;
  isolation: isolate;
}
.category-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--rb-primary-light), transparent);
  opacity: 0; transition: var(--rb-transition);
}
.category-card:hover {
  border-color: var(--rb-primary);
  transform: translateY(-4px);
  box-shadow: var(--rb-shadow-lg);
}
.category-card:hover::before { opacity: 1; }
.category-card .pitch-badge {
  display: inline-block;
  font-family: var(--rb-font-display);
  font-size: .85rem; font-weight: 700;
  color: var(--rb-primary-dark);
  background: var(--rb-primary-light);
  padding: .3rem .8rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.category-card h3 { margin: 0 0 .75rem; }
.category-card p { color: var(--rb-text-2); margin: 0 0 1.5rem; font-size: .95rem; }
.category-card .arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--rb-primary-dark); font-weight: 600; font-size: .9rem;
}
.category-card:hover .arrow { gap: .8rem; }

/* ---------------------- Ürün kartı ---------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.product-card {
  background: var(--rb-white);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  transition: var(--rb-transition);
  display: flex; flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--rb-primary);
  box-shadow: var(--rb-shadow-lg);
}
.product-card .image {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--rb-bg-2), var(--rb-primary-light));
  display: grid; place-items: center;
  overflow: hidden;
}
.product-card .image img { width: 100%; height: 100%; object-fit: cover; }
.product-card .image .placeholder {
  font-family: var(--rb-font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--rb-primary-dark);
  opacity: .4;
}
.product-card .body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.product-card .code {
  font-family: var(--rb-font-display);
  font-size: .8rem; font-weight: 600;
  color: var(--rb-primary-dark);
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: .5rem;
}
.product-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.product-card .desc {
  font-size: .9rem; color: var(--rb-text-2); margin: 0 0 1rem; flex: 1;
}
.product-specs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: auto;
}
.spec-chip {
  font-size: .75rem; font-weight: 600;
  background: var(--rb-bg);
  color: var(--rb-text-2);
  padding: .3rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--rb-border);
}

/* ---------------------- Sektör grid ---------------------- */
.industries {
  background: var(--rb-bg);
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.industry-card {
  background: var(--rb-white);
  border-radius: var(--rb-radius);
  padding: 1.5rem;
  text-align: center;
  transition: var(--rb-transition);
  border: 1px solid var(--rb-border);
}
.industry-card:hover {
  transform: translateY(-3px);
  border-color: var(--rb-primary);
  box-shadow: var(--rb-shadow);
}
.industry-card .icon {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  background: var(--rb-primary-light);
  border-radius: var(--rb-radius);
  display: grid; place-items: center;
  font-size: 1.75rem;
}
.industry-card h4 { font-size: 1rem; margin: 0; }

/* ---------------------- Features (Neden SIVENT) ---------------------- */
.features {
  background: linear-gradient(180deg, var(--rb-white), var(--rb-bg));
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.feature {
  text-align: left;
}
.feature .num {
  font-family: var(--rb-font-display);
  font-size: 3rem; font-weight: 700;
  background: linear-gradient(135deg, var(--rb-primary), var(--rb-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 1rem;
}
.feature h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.feature p { color: var(--rb-text-2); margin: 0; }

/* ---------------------- CTA banner ---------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--rb-primary-darker), var(--rb-primary));
  color: #fff;
  border-radius: var(--rb-radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: ''; position: absolute; right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent);
  border-radius: 50%;
}
.cta-banner h2 { color: #fff; margin: 0 0 1rem; }
.cta-banner p { color: rgba(255,255,255,.85); margin: 0; }
.cta-banner .actions {
  display: flex; flex-direction: column; gap: .75rem;
  position: relative; z-index: 1;
}

/* ---------------------- Sayfa içi başlık ---------------------- */
.page-header {
  background: var(--rb-primary-darker);
  color: #fff;
  padding: calc(var(--rb-header-h) + 4rem) 0 4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,23,42,.30), rgba(30,58,138,.25));
  z-index: 1;
  pointer-events: none;
}
.page-header h1 { color: #fff; margin: 0 0 .5rem; }
.page-header p { color: rgba(255,255,255,.85); margin: 0; }
.breadcrumb {
  font-size: .85rem; color: rgba(255,255,255,.7);
  margin-bottom: 1rem;
}
.breadcrumb a { color: rgba(255,255,255,.9); }
.breadcrumb a:hover { color: #fff; }

/* ---------------------- Ürün detay sayfası ---------------------- */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.product-detail-media {
  background: linear-gradient(135deg, var(--rb-bg-2), var(--rb-primary-light));
  border-radius: var(--rb-radius-lg);
  aspect-ratio: 4/3;
  display: grid; place-items: center;
  overflow: hidden;
}
.product-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.tech-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--rb-radius); overflow: hidden;
  border: 1px solid var(--rb-border);
  margin: 2rem 0;
}
.tech-table th, .tech-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--rb-border);
  font-size: .95rem;
}
.tech-table tr:last-child th, .tech-table tr:last-child td { border-bottom: none; }
.tech-table th {
  background: var(--rb-bg);
  font-weight: 600;
  width: 40%;
  color: var(--rb-text-2);
}

/* ---------------------- Form ---------------------- */
.form-card {
  background: var(--rb-white);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--rb-shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-weight: 600; font-size: .9rem;
  margin-bottom: .5rem; color: var(--rb-text);
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--rb-white);
  transition: var(--rb-transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--rb-primary);
  box-shadow: 0 0 0 3px var(--rb-primary-light);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group .invalid-feedback {
  color: var(--rb-danger); font-size: .85rem; margin-top: .3rem;
}

/* Flash messages */
.flash {
  padding: 1rem 1.25rem;
  border-radius: var(--rb-radius-sm);
  margin-bottom: 1rem;
  border-left: 4px solid;
  font-size: .95rem;
}
.flash-success { background: #ecfdf5; border-color: var(--rb-success); color: #065f46; }
.flash-danger  { background: #fef2f2; border-color: var(--rb-danger);  color: #991b1b; }
.flash-warning { background: #fffbeb; border-color: var(--rb-warning); color: #92400e; }
.flash-info    { background: var(--rb-primary-light); border-color: var(--rb-primary); color: var(--rb-primary-darker); }

/* ---------------------- Footer ---------------------- */
.site-footer {
  background: linear-gradient(180deg, #07111f 0%, #050e1c 60%, #040c19 100%);
  color: #cbd5e1;
  padding: 4rem 0 2rem;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.35), rgba(99,179,237,.5), rgba(59,130,246,.35), transparent);
  z-index: 2;
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand { color: #fff; }
.footer-brand .brand { color: #fff; margin-bottom: 1rem; }
.footer-brand-logo { height: 73px; width: auto; display: block; margin-bottom: 1rem; max-width: 364px; }
.footer-brand p { color: #94a3b8; font-size: .9rem; line-height: 1.7; }
.footer-col h5 {
  color: #fff; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 1.25rem; font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .65rem; }
.footer-col a { color: #94a3b8; font-size: .92rem; }
.footer-col a:hover { color: var(--rb-primary); }
.footer-contact .info-row {
  display: flex; gap: .75rem; align-items: start;
  font-size: .9rem; color: #94a3b8;
  margin-bottom: .8rem;
}
.footer-contact .info-row svg {
  width: 18px; height: 18px;
  color: var(--rb-primary); flex-shrink: 0;
  margin-top: 3px;
}
.footer-bottom {
  border-top: 1px solid #1e293b;
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: #64748b;
  flex-wrap: wrap; gap: 1rem;
}
.social-links { display: flex; gap: .75rem; }
.social-links a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: #1e293b; color: #94a3b8;
  border-radius: 50%;
  transition: var(--rb-transition);
}
.social-links a:hover {
  background: var(--rb-primary); color: #fff;
  transform: translateY(-2px);
}

/* ---------------------- Animasyonlar ---------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(6, 182, 212, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

/* ---------------------- Responsive ---------------------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .cta-banner { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 768px) {
  .site-header { position: fixed; backdrop-filter: saturate(1.2) blur(16px) !important; -webkit-backdrop-filter: saturate(1.2) blur(16px) !important; background: rgba(5,10,35,.82) !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
  main { display: block !important; padding-top: var(--rb-header-h); }

  /* ── Hero: video direkt header altından başlar ── */
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: unset;
    height: auto;
    padding-top: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background: #0a1440;
  }
  /* Video alanı: 16:9 oran, temiz (overlay yok) */
  .hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
    top: auto; right: auto; bottom: auto; left: auto;
    inset: auto;
    z-index: 1;
  }
  .hero-media video,
  .hero-media img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
  }
  .hero-overlay { display: none; }

  /* İçerik: videonun altında, koyu zemin */
  .hero-content {
    position: relative !important;
    z-index: 2;
    max-width: 100% !important;
    padding: 1.75rem 1.5rem 1.5rem !important;
    background: #0a1440;
  }
  .hero h1 { font-size: clamp(1.6rem, 6vw, 2rem); margin-bottom: .75rem; }
  .hero p.lead { font-size: .95rem; margin-bottom: 1.25rem; }
  .hero-eyebrow { margin-bottom: 1rem; margin-top: 0; font-size: .8rem; }
  .hero-actions { gap: .75rem; }
  .hero-actions .btn { padding: .75rem 1.25rem; font-size: .9rem; }

  /* İstatistikler: içeriğin altında */
  .hero-stats {
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    background: linear-gradient(180deg, #060e1f 0%, #04091a 100%);
    border-top: 1px solid rgba(59,130,246,.15) !important;
  }
  .hero-stats .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 !important;
    padding: 0 !important;
    border-top: none !important;
  }
  .hero-stat {
    padding: 1.25rem 1rem;
    border-right: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .hero-stat:nth-child(2n) { border-right: none; }
  .hero-stat:nth-child(3),
  .hero-stat:nth-child(4) { border-bottom: none; }
  .hero-stat .num {
    font-size: 2rem !important;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero-stat .label {
    font-size: .68rem !important;
    letter-spacing: .1em;
    color: rgba(255,255,255,.45) !important;
    margin-top: .2rem;
  }

  /* Inner page headers */
  .page-header { padding-top: 2rem !important; }

  .menu-toggle { display: flex; }
  .menu-toggle span { background: #fff !important; }
  .site-header .lang-switcher a, .site-header .lang-flag { color: rgba(255,255,255,.85) !important; border-color: rgba(255,255,255,.25) !important; }
  .main-nav {
    position: fixed;
    top: var(--rb-header-h); left: 0; right: 0;
    background: #050d1f;
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0; overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: max-height .3s, padding .3s;
  }
  .main-nav.open { max-height: 600px; padding: 1rem 0; }
  .main-nav a { padding: .8rem 1.5rem; width: 100%; color: rgba(255,255,255,.82); }
  .main-nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
  .main-nav .nav-cta { margin: .5rem 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Mobil yatay (landscape) — video tam ekran, içerik kompakt ── */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
    min-height: 100lvh;
  }
  .hero-media video,
  .hero-media img {
    object-fit: cover;
    object-position: center center;
  }
  .hero-content {
    padding-top: calc(var(--rb-header-h) + 0.75rem) !important;
    padding-bottom: 5rem !important;
  }
  .hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.75rem; }
  .hero p.lead { font-size: .9rem; margin-bottom: 1.25rem; }
  .hero-stats { bottom: 1rem; }
  .hero-stats .container { padding-top: 0.75rem; gap: 1rem; }
  .hero-stat .num { font-size: 1.4rem; }
}

/* ===========================================
   Contact & Page Sayfaları
   =========================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}

.contact-info {
  position: sticky;
  top: 100px;
}

.section-subtitle {
  font-family: var(--rb-font-display);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--rb-slate-900);
}

.contact-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rb-slate-200);
}

.contact-item:last-of-type {
  border-bottom: none;
}

.contact-icon {
  flex-shrink: 0;
  width: 44px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rb-primary), var(--rb-primary-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon svg {
  width: 22px;
  height: 22px;
}

.contact-item h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--rb-slate-900);
}

.contact-item p {
  color: var(--rb-slate-700);
  font-size: 0.95rem;
  margin: 0;
}

.contact-item a {
  color: var(--rb-primary-dark);
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

.contact-hours {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--rb-slate-50);
  border-radius: 12px;
  border-left: 4px solid var(--rb-primary);
}

.contact-hours h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--rb-slate-900);
}

.contact-hours p {
  font-size: 0.9rem;
  color: var(--rb-slate-700);
  margin: 0;
}

.contact-form-wrapper {
  background: white;
}

.btn-block {
  display: block;
  width: 100%;
}

.form-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--rb-slate-500);
  text-align: center;
}

.map-section {
  margin-top: 4rem;
}

.map-embed {
  filter: grayscale(0.2) contrast(1.05);
  border-top: 1px solid var(--rb-slate-200);
}

.map-embed iframe {
  display: block;
}

/* Page (Hakkımızda vb.) */
.page-cover {
  margin-top: -2rem;
  margin-bottom: 2rem;
}

.page-cover-image {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--rb-radius-lg);
  box-shadow: var(--rb-shadow);
}

.page-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--rb-slate-700);
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  font-family: var(--rb-font-display);
  color: var(--rb-slate-900);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.page-content h2 {
  font-size: 1.75rem;
  position: relative;
  padding-left: 1rem;
}

.page-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 4px;
  background: linear-gradient(180deg, var(--rb-primary), var(--rb-primary-dark));
  border-radius: 2px;
}

.page-content h3 {
  font-size: 1.35rem;
}

.page-content p {
  margin-bottom: 1.25rem;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.5rem;
}

.page-content blockquote {
  border-left: 4px solid var(--rb-primary);
  padding: 1rem 1.5rem;
  background: var(--rb-slate-50);
  border-radius: 0 var(--rb-radius) var(--rb-radius) 0;
  font-style: italic;
  color: var(--rb-slate-700);
  margin: 1.5rem 0;
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rb-radius);
  margin: 1.5rem 0;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-info { position: static; }
}

/* ===========================================
   Error sayfaları
   =========================================== */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}

.error-content {
  max-width: 540px;
}

.error-code {
  font-family: var(--rb-font-display);
  font-size: clamp(6rem, 18vw, 10rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--rb-primary), var(--rb-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.error-title {
  font-family: var(--rb-font-display);
  font-size: 1.75rem;
  color: var(--rb-slate-900);
  margin-bottom: 1rem;
}

.error-message {
  color: var(--rb-slate-600);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}


/* ============================================================
   SERTIFIKA SERIDI
   ============================================================ */
.cert-strip {
  background: var(--rb-white);
  border-top: 1px solid var(--rb-border);
  border-bottom: 1px solid var(--rb-border);
  padding: 1rem 0;
}
.cert-items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.cert-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--rb-primary-darker);
  letter-spacing: .02em;
}
.cert-item svg { color: var(--rb-primary); flex-shrink: 0; }
.cert-sep { color: var(--rb-border); font-size: 1.2rem; }

/* ============================================================
   B2B VALUE SECTION
   ============================================================ */
.b2b-value { padding: 5rem 0; background: var(--rb-white); }
.b2b-value-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.b2b-value-text .eyebrow { color: var(--rb-primary); }
.b2b-value-text h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: .5rem 0 1rem; }
.b2b-value-text p { color: var(--rb-text-2); line-height: 1.8; margin-bottom: 1.5rem; }
.b2b-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.b2b-list li { display: flex; gap: 1rem; align-items: center; }
.b2b-icon { font-size: 1.5rem; flex-shrink: 0; }
.b2b-list li div { display: flex; flex-direction: column; gap: .25rem; }
.b2b-list li strong { font-size: .95rem; color: var(--rb-text); line-height: 1.3; }
.b2b-list li span { font-size: .875rem; color: var(--rb-text-2); line-height: 1.6; }

.b2b-clients-card {
  background: linear-gradient(135deg, var(--rb-primary-darker) 0%, var(--rb-primary-dark) 100%);
  border-radius: 20px;
  padding: 2rem;
  color: #fff;
  box-shadow: 0 20px 60px rgba(29, 78, 216, .25);
}
.b2b-clients-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.b2b-clients-subtitle { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; }
.b2b-sectors { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.b2b-sector-tag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(8px);
}
.b2b-clients-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1rem;
}

/* ============================================================
   RAKIP KARSILASTIRMA
   ============================================================ */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.compare-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 1.8rem;
  transition: var(--rb-transition);
}
.compare-card:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.3);
}
.compare-icon { font-size: 2rem; margin-bottom: 1rem; }
.compare-card h3 { color: #fff; font-size: 1.05rem; margin: 0 0 .6rem; }
.compare-card p { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.7; margin: 0; }

/* ============================================================
   DARK SECTION
   ============================================================ */
section[style*="--rb-dark"] .section-heading h2,
.dark-section h2 { color: #fff !important; }

/* ============================================================
   RESPONSIVE EKLEMELER
   ============================================================ */
@media (max-width: 900px) {
  .b2b-value-inner { grid-template-columns: 1fr; gap: 2rem; }
  .compare-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
  .cert-items { justify-content: flex-start; }
}

/* ── Cert strip — MOBİL premium 2-kolon grid ── */
@media (max-width: 768px) {
  .cert-strip { padding: 1.25rem 0 !important; }
  .cert-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .55rem !important;
    justify-items: stretch !important;
  }
  .cert-sep { display: none !important; }
  .cert-item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .55rem !important;
    padding: .65rem .85rem !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(59,130,246,.18) !important;
    font-size: .72rem !important;
    letter-spacing: .04em !important;
    backdrop-filter: blur(8px) !important;
  }
  .cert-item:hover {
    background: rgba(59,130,246,.12) !important;
    border-color: rgba(59,130,246,.42) !important;
  }
  .cert-item svg {
    width: 16px !important; height: 16px !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 4px rgba(56,189,248,.7)) !important;
  }
}

/* Kalite sayfasi */
.quality-hero { margin-bottom:2.5rem; }
.quality-hero h2 { font-size:2rem; margin-bottom:.75rem; }
.cert-section { margin-bottom:2.5rem; }
.cert-section h3 { font-size:1.4rem; margin-bottom:1rem; color:var(--rb-primary-darker); }
.cert-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.5rem; }
.cert-card { background:var(--rb-bg); border:1px solid var(--rb-border); border-radius:14px; padding:1.5rem; }
.cert-badge { font-size:1.8rem; margin-bottom:.75rem; }
.cert-card h4 { font-size:1rem; margin:0 0 .5rem; color:var(--rb-primary-darker); }
.cert-card p { font-size:.88rem; color:var(--rb-text-2); margin:0; line-height:1.6; }
.cert-download { background:linear-gradient(135deg,var(--rb-primary-darker),var(--rb-primary-dark)); border-radius:16px; padding:1.8rem 2rem; margin:2rem 0; }
.cert-download-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.cert-download h4 { color:#fff; margin:0 0 .3rem; }
.cert-download p { color:rgba(255,255,255,.75); margin:0; font-size:.9rem; }
.cert-note { background:var(--rb-bg); border-left:4px solid var(--rb-primary); padding:1rem 1.5rem; border-radius:0 10px 10px 0; font-size:.88rem; color:var(--rb-text-2); line-height:1.7; }
@media(max-width:768px){ .cert-cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .cert-cards{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════
   ANIMASYONLAR & SCROLL REVEAL
══════════════════════════════════════════════════════ */

/* ── Sayfa geçişi ── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
main { animation: page-in .45s cubic-bezier(.22,1,.36,1) both; }
body.page-exit main {
  animation: none;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: opacity .22s ease, transform .22s ease;
}

/* ── Scroll reveal ── */
/* Scroll reveal ? icerik her zaman gorunur, girisde animasyon oynar */
[data-reveal].rb-animate {
  animation: rb-reveal-in .65s cubic-bezier(.22,1,.36,1) both;
}

[data-stagger].rb-animate > * {
  animation: rb-reveal-in .55s cubic-bezier(.22,1,.36,1) both;
}
[data-stagger].rb-animate > *:nth-child(2) { animation-delay: .08s; }
[data-stagger].rb-animate > *:nth-child(3) { animation-delay: .16s; }
[data-stagger].rb-animate > *:nth-child(4) { animation-delay: .24s; }
[data-stagger].rb-animate > *:nth-child(5) { animation-delay: .32s; }
[data-stagger].rb-animate > *:nth-child(6) { animation-delay: .40s; }
[data-stagger].rb-animate > *:nth-child(7) { animation-delay: .48s; }
[data-stagger].rb-animate > *:nth-child(8) { animation-delay: .56s; }

@keyframes rb-reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}


/* ── Dönen gradyan çerçeve ── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-spin {
  to { --border-angle: 360deg; }
}

.product-card::after,
.category-card::after,
.compare-card::after,
.industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    transparent        0%,
    var(--rb-accent)  18%,
    #93c5fd           36%,
    var(--rb-primary) 54%,
    transparent       72%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  animation: border-spin 3s linear infinite paused;
  pointer-events: none;
}
.product-card:hover::after,
.category-card:hover::after,
.compare-card:hover::after,
.industry-card:hover::after {
  opacity: 1;
  animation-play-state: running;
}

/* ── Modüler Bant Vizüalizasyon ── */
.belt-viz-section {
  position: relative;
  background: #050d1f;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.belt-grid-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.belt-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  height: 100%;
}
.belt-cell {
  border: 1px solid rgba(29,78,216,.12);
  border-radius: 3px;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.belt-cell.lit {
  background: rgba(29,78,216,.72);
  border-color: rgba(59,130,246,.8);
  box-shadow: 0 0 6px rgba(29,78,216,.5);
}
.belt-cell.pulse {
  background: rgba(147,197,253,.9);
  border-color: #93c5fd;
  box-shadow: 0 0 12px rgba(147,197,253,.7);
}
.belt-viz-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 5rem 0;
  background: radial-gradient(ellipse 90% 120% at center, rgba(5,13,31,.88) 20%, transparent 72%);
}
.belt-viz-title   { text-shadow: 0 2px 24px rgba(0,0,0,.9); }
.belt-viz-desc    { text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.belt-viz-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rb-accent);
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.3);
  padding: .35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}
.belt-viz-title {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 1rem;
}
.belt-viz-desc {
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.belt-viz-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.bvs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.bvs-num {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--rb-font-display);
  color: #fff;
  line-height: 1;
}
.bvs-num sup { font-size: 1rem; }
.bvs-label {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bvs-sep {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.15);
}
@media (max-width: 600px) {
  .belt-viz-stats { gap: 1.2rem; }
  .bvs-num { font-size: 1.5rem; }
}

/* ============================================================
   PREMIUM UI v9 — Dark glass sections, SVG icon containers
   ============================================================ */

/* ── Industry section — dark glass ── */
.industries {
  background: #050d1f !important;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
.industries .section-heading h2 { color: #fff !important; }
.industries .section-heading p  { color: rgba(255,255,255,.55) !important; }
.industries .eyebrow            { color: #7dd3fc !important; background: rgba(59,130,246,.12) !important; }

.industry-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}
.industry-card h4 { color: #fff !important; }
.industry-card p  { color: rgba(255,255,255,.45) !important; }
.industry-card:hover {
  background: rgba(29,78,216,.2) !important;
  border-color: rgba(59,130,246,.5) !important;
  box-shadow: 0 0 36px rgba(29,78,216,.4), 0 8px 30px rgba(0,0,0,.3) !important;
  transform: translateY(-6px) !important;
}

.industry-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(29,78,216,.35), rgba(6,182,212,.2));
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 16px;
  display: grid; place-items: center;
  color: #7dd3fc;
  transition: var(--rb-transition);
}
.industry-icon svg { width: 26px; height: 26px; }
.industry-card:hover .industry-icon {
  background: linear-gradient(135deg, rgba(29,78,216,.55), rgba(6,182,212,.35));
  border-color: rgba(147,197,253,.55);
  box-shadow: 0 0 22px rgba(59,130,246,.45);
}

/* ── Compare section — icon upgrade ── */
.compare-icon-wrap {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, rgba(29,78,216,.28), rgba(6,182,212,.18));
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 14px;
  display: grid; place-items: center;
  color: #7dd3fc;
  margin-bottom: 1.25rem;
  transition: var(--rb-transition);
}
.compare-icon-wrap svg { width: 24px; height: 24px; }
.compare-card:hover .compare-icon-wrap {
  background: linear-gradient(135deg, rgba(29,78,216,.5), rgba(6,182,212,.35));
  border-color: rgba(147,197,253,.5);
  box-shadow: 0 0 18px rgba(59,130,246,.45);
}

/* ── B2B value section — dark ── */
.b2b-value { background: #07101f !important; }
.b2b-value-text h2 { color: #fff !important; }
.b2b-value-text p  { color: rgba(255,255,255,.62) !important; }
.b2b-value-text .eyebrow { color: #7dd3fc !important; background: rgba(59,130,246,.12) !important; }
.b2b-list li strong { color: #fff !important; }
.b2b-list li span   { color: rgba(255,255,255,.52) !important; }

.b2b-icon-wrap {
  width: 48px; height: 48px;
  background: rgba(29,78,216,.18);
  border: 1px solid rgba(59,130,246,.28);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7dd3fc;
  transition: var(--rb-transition);
  overflow: hidden;
}
.b2b-icon-wrap svg {
  width: 22px; height: 22px;
  display: block;
  flex-shrink: 0;
}
.b2b-list li:hover .b2b-icon-wrap {
  background: rgba(29,78,216,.35);
  box-shadow: 0 0 16px rgba(29,78,216,.45);
}

/* ── Cert strip — dark premium ── */
.cert-strip {
  background: linear-gradient(90deg, #04091a 0%, #081228 50%, #04091a 100%) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 1.4rem 0 !important;
}
.cert-items {
  gap: .6rem 1.8rem !important;
}
.cert-item {
  gap: .6rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
  padding: .4rem .9rem !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.03) !important;
  transition: color .2s, background .2s, border-color .2s !important;
}
.cert-item:hover {
  color: #e0f2fe !important;
  background: rgba(59,130,246,.1) !important;
  border-color: rgba(59,130,246,.3) !important;
}
.cert-item svg { color: #38bdf8 !important; width: 15px !important; height: 15px !important; }
.cert-item:hover svg { color: #7dd3fc !important; }
.cert-sep { display: none !important; }

/* ── Categories section — dark ── */
.categories-dark {
  background: #06101f !important;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}
.categories-dark .section-heading h2 { color: #fff !important; }
.categories-dark .section-heading p  { color: rgba(255,255,255,.55) !important; }
.categories-dark .eyebrow            { color: #7dd3fc !important; background: rgba(59,130,246,.12) !important; }

.category-card-dark {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
.category-card-dark h3         { color: #fff !important; }
.category-card-dark p          { color: rgba(255,255,255,.55) !important; }
.category-card-dark .pitch-badge { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; }
.category-card-dark .arrow     { color: #7dd3fc !important; }
.category-card-dark:hover {
  background: rgba(29,78,216,.22) !important;
  border-color: rgba(59,130,246,.52) !important;
  box-shadow: 0 0 38px rgba(29,78,216,.4) !important;
}
.category-card-dark::before {
  background: linear-gradient(135deg, rgba(29,78,216,.22), transparent) !important;
}

/* ── Featured products — dark ── */
.products-dark {
  background: #050d1f !important;
}
.products-dark .section-heading h2 { color: #fff !important; }
.products-dark .section-heading p  { color: rgba(255,255,255,.55) !important; }
.products-dark .eyebrow            { color: #7dd3fc !important; background: rgba(59,130,246,.12) !important; }

.product-card-dark {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
.product-card-dark h3    { color: #fff !important; }
.product-card-dark .code { color: #7dd3fc !important; }
.product-card-dark .desc { color: rgba(255,255,255,.52) !important; }
.product-card-dark .spec-chip {
  background: rgba(29,78,216,.18) !important;
  border-color: rgba(59,130,246,.22) !important;
  color: #93c5fd !important;
}
.product-card-dark .image {
  background: linear-gradient(135deg, rgba(5,13,31,.9), rgba(29,78,216,.18)) !important;
}
.product-card-dark .placeholder { color: #7dd3fc !important; }
.product-card-dark:hover {
  border-color: rgba(59,130,246,.5) !important;
  box-shadow: 0 0 32px rgba(29,78,216,.38) !important;
}

/* ── Product showcase ── */
.urun-showcase { background: #040b18 !important; padding: 3.5rem 0 !important; }

/* ── CTA banner upgrade ── */
.cta-banner {
  background: linear-gradient(135deg, #0a1e5e 0%, #1d4ed8 50%, #0369a1 100%) !important;
  box-shadow: 0 20px 60px rgba(29,78,216,.35);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.cta-banner > * { position: relative; z-index: 1; }

/* ── Neon divider ── */
hr.neon-divider {
  border: none; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.45), transparent);
}

/* ── Gradient heading for dark sections ── */
.heading-glow {
  background: linear-gradient(135deg, #fff 0%, #93c5fd 55%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* spinning border on dark cards */
.industry-card::after,
.category-card-dark::after,
.product-card-dark::after {
  content: '';
  position: absolute; inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    transparent        0%,
    var(--rb-accent)  18%,
    #93c5fd           36%,
    var(--rb-primary) 54%,
    transparent       72%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  animation: border-spin 3s linear infinite paused;
  pointer-events: none;
}
.industry-card:hover::after,
.category-card-dark:hover::after,
.product-card-dark:hover::after {
  opacity: 1;
  animation-play-state: running;
}

/* ============================================================
   INNER PAGE DARK THEME
   ============================================================ */

/* ── Generic dark section ── */
.section-dark {
  background: #050d1f !important;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
.section-dark h2,
.section-dark h3 { color: #fff !important; }
.section-dark p,
.section-dark div { color: rgba(255,255,255,.65); }

/* ── Products index — dark section ── */
.products-index-section {
  background: #050d1f !important;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  padding: 4rem 0 !important;
}

/* ── Contact page dark ── */
.contact-section-dark {
  background: #07101f !important;
}
.contact-section-dark .section-subtitle { color: #fff !important; }
.contact-section-dark .contact-item { border-bottom-color: rgba(255,255,255,.08) !important; }
.contact-section-dark .contact-item h3 { color: #fff !important; }
.contact-section-dark .contact-item p  { color: rgba(255,255,255,.6) !important; }
.contact-section-dark .contact-item a  { color: #7dd3fc !important; }
.contact-section-dark .contact-item a:hover { color: #bae6fd !important; }
.contact-section-dark .contact-hours {
  background: rgba(255,255,255,.04) !important;
  border-left-color: #3b82f6 !important;
}
.contact-section-dark .contact-hours h3 { color: #fff !important; }
.contact-section-dark .contact-hours p  { color: rgba(255,255,255,.6) !important; }
.contact-section-dark .contact-icon {
  background: linear-gradient(135deg, rgba(29,78,216,.45), rgba(6,182,212,.25)) !important;
  border: 1px solid rgba(59,130,246,.3) !important;
}

/* ── Dark form card ── */
.form-card-dark {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 0 40px rgba(0,0,0,.4) !important;
}
.form-card-dark label { color: rgba(255,255,255,.85) !important; }
.form-card-dark input,
.form-card-dark textarea,
.form-card-dark select {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.form-card-dark input::placeholder,
.form-card-dark textarea::placeholder { color: rgba(255,255,255,.3) !important; }
.form-card-dark input:focus,
.form-card-dark textarea:focus {
  border-color: rgba(59,130,246,.6) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
  background: rgba(255,255,255,.08) !important;
}
.form-card-dark .form-note { color: rgba(255,255,255,.4) !important; }

/* ── Dark tech table (product detail) ── */
.tech-table-dark {
  border-color: rgba(255,255,255,.1) !important;
}
.tech-table-dark th {
  background: rgba(29,78,216,.15) !important;
  color: rgba(255,255,255,.65) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.tech-table-dark td {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* ── Dark product detail section ── */
.product-detail-section {
  background: #050d1f !important;
}
.product-detail-section h3 { color: #fff !important; }
.product-detail-section h2 { color: #fff !important; }
.product-detail-media-dark {
  background: linear-gradient(135deg, rgba(5,13,31,.95), rgba(29,78,216,.2)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.product-detail-section .placeholder {
  color: #7dd3fc !important;
}
.product-detail-desc {
  color: rgba(255,255,255,.85) !important;
}

/* ── Dark category detail section ── */
.category-detail-section {
  background: #050d1f !important;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
.category-detail-desc {
  color: rgba(255,255,255,.65) !important;
}

/* ── Dark page content (Hakkımızda, Kalite, Sektörler) ── */
.page-content-section {
  background: #050d1f !important;
}
.page-content-section .page-content { color: rgba(255,255,255,.9) !important; }
.page-content-section .page-content h2,
.page-content-section .page-content h3,
.page-content-section .page-content h4 { color: #fff !important; }
.page-content-section .page-content h2::before {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
}
.page-content-section .page-content blockquote {
  background: rgba(29,78,216,.1) !important;
  border-left-color: #3b82f6 !important;
  color: rgba(255,255,255,.85) !important;
}
.page-content-section .page-content a {
  color: #7dd3fc !important;
}
.page-content-section .page-content strong { color: #fff !important; }

/* ── Dark page header upgrade ── */
.page-header {
  background: linear-gradient(135deg, #050d1f 0%, #0d1f5c 50%, #0a1628 100%) !important;
}
.page-header::after {
  background: linear-gradient(to bottom, rgba(5,13,31,.5), rgba(5,13,31,.2)) !important;
}

/* ── Map section dark border ── */
.map-section { background: #040b18 !important; }
.map-embed { border-top: 1px solid rgba(255,255,255,.06) !important; filter: grayscale(.4) contrast(1.1) !important; }

/* ── Ürün detay - ilgili ürünler başlığı ── */
.related-dark h2 { color: #fff !important; }

/* ── Product detail usage areas ── */
.usage-area-dark { color: rgba(255,255,255,.88) !important; }
.usage-area-dark h2 { color: #fff !important; }

/* ── Contact form wrapper dark fix ── */
.contact-section-dark .contact-form-wrapper { background: transparent !important; }

/* ── Kalite sayfası — cert kartları dark & gösterişli ── */
.page-content-section .cert-card {
  background: linear-gradient(135deg, rgba(29,78,216,.14) 0%, rgba(5,13,31,.85) 100%) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
.page-content-section .cert-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
}
.page-content-section .cert-card:hover {
  border-color: rgba(59,130,246,.45) !important;
  box-shadow: 0 8px 36px rgba(29,78,216,.3) !important;
  transform: translateY(-3px) !important;
}
.page-content-section .cert-card h4 { color: #e0f2fe !important; }
.page-content-section .cert-card p  { color: rgba(255,255,255,.62) !important; }
.page-content-section .cert-section h3 { color: #7dd3fc !important; }
.page-content-section .cert-note {
  background: rgba(29,78,216,.12) !important;
  border-left-color: #3b82f6 !important;
  color: rgba(255,255,255,.65) !important;
}
.page-content-section .cert-strip {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.page-content-section .cert-item     { color: #7dd3fc !important; }
.page-content-section .cert-sep      { color: rgba(255,255,255,.2) !important; }
.page-content-section .quality-hero h2 { color: #fff !important; }
.page-content-section .cert-download {
  background: linear-gradient(135deg, rgba(29,78,216,.55), rgba(6,182,212,.28)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* ════════════════════════════════════════════
   HERO — Kurumsal Tipografi Yenilemesi
   ════════════════════════════════════════════ */

/* İçerik sola yaslı — container margin: 0 auto override */
.hero-content {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  max-width: 560px !important;
  padding-left: 2rem !important;
}
.hero-content * { text-align: left !important; }

/* Eyebrow — h1 üstünde küçük kurumsal etiket */
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: rgba(59,130,246,.1) !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  border-radius: 4px !important;
  padding: .35rem .9rem !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #93c5fd !important;
  margin-top: 0 !important;
  margin-bottom: 1.75rem !important;
  animation: fadeUp .75s .05s ease both !important;
}
.hero-eyebrow .dot {
  width: 6px !important; height: 6px !important;
  background: #3b82f6 !important;
  box-shadow: 0 0 0 0 rgba(59,130,246,.7) !important;
  animation: pulse 2s infinite !important;
}

/* h1 — güçlü, sıkı, kurumsal */
.hero h1 br { display: none !important; }
.hero h1 {
  font-size: clamp(2rem, 3.8vw, 3.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.75rem !important;
  animation: fadeUp .9s .18s ease both !important;
}

/* Accent — inline, bold, mavi ton */
.hero h1 .accent {
  display: inline !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Lead — sol aksan çizgisi, daha soft */
.hero p.lead {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,.58) !important;
  max-width: 500px !important;
  border-left: 2px solid rgba(59,130,246,.4) !important;
  padding-left: 1.1rem !important;
  margin-bottom: 2.5rem !important;
  animation: fadeUp .95s .28s ease both !important;
}

/* Butonlar — dikdörtgen, kurumsal */
.hero-actions {
  animation: fadeUp 1s .38s ease both !important;
}
.hero-actions .btn {
  border-radius: 4px !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: .75rem 1.6rem !important;
  text-transform: uppercase !important;
}
.hero-actions .btn-primary {
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(29,78,216,.45) !important;
}
.hero-actions .btn-primary:hover {
  background: #1e40af !important;
  box-shadow: 0 8px 28px rgba(29,78,216,.6) !important;
  transform: translateY(-2px) !important;
}
.hero-actions .btn-outline-light {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.8) !important;
  letter-spacing: .04em !important;
}
.hero-actions .btn-outline-light:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}

/* Mobil hero tipografi */
@media (max-width: 900px) {
  .hero-eyebrow { font-size: .65rem !important; margin-bottom: 1.25rem !important; }
  .hero h1 { font-size: clamp(1.6rem, 5.5vw, 2rem) !important; letter-spacing: -0.02em !important; }
  .hero p.lead { font-size: .88rem !important; padding-left: .85rem !important; max-width: 100% !important; }
  .hero-content { max-width: 100% !important; }
}


/* ════════════════════════════════════════════
   KVKK Sayfası — Dark Mode
   ════════════════════════════════════════════ */

.page-content-section .kvkk-header {
  margin-bottom: 2.5rem;
}
.page-content-section .kvkk-lead {
  color: rgba(255,255,255,.75) !important;
  font-size: 1.05rem;
  line-height: 1.8;
}

.page-content-section .kvkk-section {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}
.page-content-section .kvkk-section h3 {
  color: #7dd3fc !important;
  font-size: 1.15rem;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
.page-content-section .kvkk-section p,
.page-content-section .kvkk-section li {
  color: rgba(255,255,255,.88) !important;
}
.page-content-section .kvkk-section ul,
.page-content-section .kvkk-section ol {
  padding-left: 1.5rem;
}
.page-content-section .kvkk-section li {
  margin-bottom: .5rem;
}

.page-content-section .kvkk-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
}
.page-content-section .kvkk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  color: rgba(255,255,255,.88) !important;
}
.page-content-section .kvkk-table thead tr {
  background: rgba(29,78,216,.35);
}
.page-content-section .kvkk-table th {
  color: #e0f2fe !important;
  font-weight: 600;
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.page-content-section .kvkk-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.85) !important;
  vertical-align: top;
}
.page-content-section .kvkk-table tbody tr:last-child td {
  border-bottom: none;
}
.page-content-section .kvkk-table tbody tr:hover {
  background: rgba(255,255,255,.04);
}

.page-content-section .kvkk-rights-note {
  background: rgba(29,78,216,.18);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  color: rgba(255,255,255,.88) !important;
  font-size: .97rem;
  line-height: 1.7;
}
.page-content-section .kvkk-rights-note strong {
  color: #7dd3fc !important;
}

.page-content-section .kvkk-update {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 1.5rem 2rem !important;
  color: rgba(255,255,255,.7) !important;
}
.page-content-section .kvkk-update h3 {
  color: rgba(255,255,255,.5) !important;
  font-size: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: .5rem !important;
}
.page-content-section .kvkk-update p {
  color: rgba(255,255,255,.65) !important;
  margin: 0;
  font-size: .92rem;
}
.page-content-section .kvkk-update strong {
  color: rgba(255,255,255,.75) !important;
}

/* Tablo icerisindeki hr ayracini dark yap */
.page-content-section .page-content hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 2rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   KATEGORİ CAROUSEL + KONVEYÖR BANT — SIVENT
   ═══════════════════════════════════════════════════════════════ */

.rb-cat-section { padding-bottom: 0 !important; }

/* ── Carousel dış sarmalayıcı ── */
.cat-carousel-outer {
  overflow: hidden;
  padding: 1.5rem 0 2rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* ── Carousel bandı ── */
.cat-carousel-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: 0.5rem 2rem;
  animation: catCarouselScroll 38s linear infinite;
}
.cat-carousel-track:hover { animation-play-state: paused; }

.cat-card {
  width: 300px;
  flex-shrink: 0;
}

@keyframes catCarouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Konveyör bant dış kutusu ── */
.rb-conveyor {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  position: relative;
  height: 68px;
  background: #04090f;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Rulolar ── */
.rb-roller {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 33%, #64748b 0%, #334155 45%, #0f172a 100%);
  border: 3px solid #1e293b;
  box-shadow:
    0 0 0 5px #04090f,
    0 4px 20px rgba(0,0,0,.8),
    inset 0 2px 5px rgba(255,255,255,.12);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
/* Rulo iç merkezi (göbek) */
.rb-roller::before {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #94a3b8 0%, #475569 50%, #1e293b 100%);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
/* Rulo parmakları (speedo çizgiler) */
.rb-roller::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(0deg,   transparent 46%, rgba(255,255,255,.14) 46%, rgba(255,255,255,.14) 54%, transparent 54%),
    linear-gradient(60deg,  transparent 46%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.09) 54%, transparent 54%),
    linear-gradient(120deg, transparent 46%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.09) 54%, transparent 54%);
}
/* Sol rulo — saat yönünün tersine (bant sola gider) */
.rb-roller--l { animation: rollerSpinL 2.8s linear infinite; }
/* Sağ rulo — aynı yön */
.rb-roller--r { animation: rollerSpinL 2.8s linear infinite; }

@keyframes rollerSpinL {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Bant yüzeyi ── */
.rb-belt {
  flex: 1;
  height: 52px;
  position: relative;
  overflow: hidden;
  margin: 0 -3px;
  z-index: 1;
  background: linear-gradient(
    180deg,
    #1e293b 0%,
    #0d1626 35%,
    #060e1c 65%,
    #1e293b 100%
  );
  border-top: 3px solid rgba(148,163,184,.2);
  border-bottom: 3px solid rgba(0,0,0,.7);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.4);
}

/* Bant segman çizgileri (hareket eden) */
.rb-belt-segs {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 24px,
    rgba(148,163,184,.09) 24px,
    rgba(148,163,184,.09) 26px
  );
  background-size: 26px 100%;
  animation: beltSegMove 1.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes beltSegMove {
  from { background-position-x: 0px; }
  to   { background-position-x: -26px; }
}

/* Bant üst parlaklık şeridi */
.rb-belt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(148,163,184,.15) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
/* Bant alt gölge */
.rb-belt::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── SIVENT yazı bandı ── */
.rb-belt-text-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 3;
}

.rb-belt-text-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: rbBeltTextScroll 22s linear infinite;
  padding-left: 1rem;
}

@keyframes rbBeltTextScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rb-bt-word {
  font-family: 'Space Grotesk', 'Inter', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 5px;
  color: rgba(59,130,246,.6);
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(59,130,246,.45), 0 0 28px rgba(59,130,246,.2);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.rb-bt-sep {
  padding: 0 1.2rem;
  color: rgba(148,163,184,.22);
  font-size: 7px;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA BUSINESS v11 — Tasarım Paketi
   1. Gradient Mesh Orbs   2. Müşteri Marquee   3. Custom Cursor
   4. 3D Tilt              5. Dark/Light Mode   6. Reveal varyantlar
   7. Glassmorphism+       8. Loading enhance
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. B2B MARKET CARD — Premium yeniden tasarım ── */

.bmc-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.bmc-topbar {
  height: 3px;
  background: linear-gradient(90deg, #1d4ed8 0%, #06b6d4 45%, #8b5cf6 100%);
}
.bmc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 1.75rem 1.25rem;
}
.bmc-title {
  font-family: var(--rb-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}
.bmc-subtitle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
}
.bmc-subtitle svg {
  width: 13px; height: 13px;
  color: #3b82f6;
  flex-shrink: 0;
}
.bmc-count {
  text-align: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(29,78,216,.3), rgba(6,182,212,.15));
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 14px;
  padding: .55rem 1rem;
  min-width: 62px;
}
.bmc-count-num {
  display: block;
  font-family: var(--rb-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.bmc-count-lbl {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  display: block;
  margin-top: .2rem;
}
.bmc-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 30%, rgba(255,255,255,.1) 70%, transparent);
  margin: 0 1.75rem;
}
.bmc-sectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: 1.25rem 1.75rem;
}
.bmc-sector {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .6rem .85rem;
  transition: background .25s, border-color .25s, transform .25s;
  cursor: default;
}
.bmc-sector:hover {
  background: rgba(29,78,216,.18);
  border-color: rgba(59,130,246,.38);
  transform: translateX(3px);
}
.bmc-sec-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(29,78,216,.35), rgba(6,182,212,.18));
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #7dd3fc;
  transition: background .25s, box-shadow .25s;
}
.bmc-sec-icon svg { width: 15px; height: 15px; }
.bmc-sector:hover .bmc-sec-icon {
  background: linear-gradient(135deg, rgba(29,78,216,.55), rgba(6,182,212,.3));
  box-shadow: 0 0 14px rgba(59,130,246,.4);
}
.bmc-sector span {
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  line-height: 1.3;
  transition: color .25s;
}
.bmc-sector:hover span { color: rgba(255,255,255,.92); }
.bmc-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.75rem 1.5rem;
  font-size: .76rem;
  color: rgba(255,255,255,.35);
  border-top: 1px solid rgba(255,255,255,.06);
  line-height: 1.5;
}
.bmc-note svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: #3b82f6;
}

/* Responsive bmc-card */
@media (max-width: 640px) {
  .bmc-sectors-grid { grid-template-columns: 1fr; }
  .bmc-head { padding: 1.25rem 1.25rem 1rem; }
  .bmc-sep, .bmc-sectors-grid, .bmc-note { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Light mode bmc-card */
body.light-mode .bmc-card         { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .bmc-title        { color: var(--rb-text) !important; }
body.light-mode .bmc-subtitle     { color: var(--rb-text-2) !important; }
body.light-mode .bmc-count        { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; }
body.light-mode .bmc-count-num    { color: var(--rb-primary-dark) !important; }
body.light-mode .bmc-sector       { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; }
body.light-mode .bmc-sector:hover { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; }
body.light-mode .bmc-sec-icon     { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; color: var(--rb-primary-dark) !important; }
body.light-mode .bmc-sector span  { color: var(--rb-text-2) !important; }
body.light-mode .bmc-note         { color: var(--rb-text-3) !important; border-color: var(--rb-border) !important; }

/* ── 1. GRADIENT MESH — Hero arka plan animasyonlu orb'lar ── */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(29,78,216,.55) 0%, transparent 70%);
  top: -150px; left: -120px;
  animation: orbFloat1 14s ease-in-out infinite;
  opacity: .7;
}
.hero-orb-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(6,182,212,.4) 0%, transparent 70%);
  top: 10%; right: -100px;
  animation: orbFloat2 18s ease-in-out infinite;
  opacity: .55;
}
.hero-orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(139,92,246,.3) 0%, transparent 70%);
  bottom: 5%; left: 25%;
  animation: orbFloat3 22s ease-in-out infinite;
  opacity: .45;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(40px,-35px) scale(1.08); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  40%       { transform: translate(-30px,25px) scale(.92); }
  80%       { transform: translate(20px,-15px) scale(1.05); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(-25px,-30px) scale(1.1); }
  66%       { transform: translate(35px,20px) scale(.9); }
}

/* ── 2. MÜŞTERİ LOGOLARI MARQUEE ── */
.client-marquee-section {
  background: linear-gradient(90deg, #04090f 0%, #080f1e 50%, #04090f 100%);
  padding: 2.75rem 0;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
}
.client-marquee-section .container {
  text-align: center;
  margin-bottom: 1.5rem;
}
.marquee-eyebrow {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
}
.marquee-outer {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  position: relative;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Renk paleti — 10 firma için */
.marquee-item:nth-child(10n+1)  { --ci: #f59e0b; }
.marquee-item:nth-child(10n+2)  { --ci: #06b6d4; }
.marquee-item:nth-child(10n+3)  { --ci: #3b82f6; }
.marquee-item:nth-child(10n+4)  { --ci: #ef4444; }
.marquee-item:nth-child(10n+5)  { --ci: #22c55e; }
.marquee-item:nth-child(10n+6)  { --ci: #a855f7; }
.marquee-item:nth-child(10n+7)  { --ci: #f97316; }
.marquee-item:nth-child(10n+8)  { --ci: #ec4899; }
.marquee-item:nth-child(10n+9)  { --ci: #14b8a6; }
.marquee-item:nth-child(10n+10) { --ci: #84cc16; }

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 165px;
  height: 64px;
  background: linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(8,15,30,.9) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-top: 3px solid var(--ci, #3b82f6);
  border-radius: 13px;
  padding: 0 1.75rem;
  flex-shrink: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    0 4px 28px rgba(0,0,0,.55),
    0 0 18px -5px var(--ci, #3b82f6),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.marquee-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
  z-index: 0;
}
.marquee-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 65% at 50% -5%, var(--ci, #3b82f6), transparent);
  opacity: .14;
  transition: opacity .45s;
  pointer-events: none;
  z-index: 0;
}
.marquee-item:hover {
  transform: perspective(700px) rotateX(-7deg) rotateY(5deg) translateY(-6px) scale(1.06);
  border-color: var(--ci, #3b82f6);
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(8,15,30,.95) 100%);
  box-shadow:
    0 16px 52px rgba(0,0,0,.7),
    0 0 42px -6px var(--ci, #3b82f6),
    0 0 80px -22px var(--ci, #3b82f6),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.marquee-item:hover::after { opacity: .28; }
.marquee-item span {
  font-family: var(--rb-font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ci, #3b82f6);
  white-space: nowrap;
  transition: text-shadow .45s;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 18px var(--ci, #3b82f6);
}
.marquee-item:hover span {
  text-shadow: 0 0 28px var(--ci, #3b82f6), 0 0 56px var(--ci, #3b82f6);
}

/* Light mode marquee */
body.light-mode .client-marquee-section {
  background: var(--rb-bg) !important;
  border-color: var(--rb-border) !important;
}
body.light-mode .marquee-eyebrow { color: var(--rb-text-3) !important; }
body.light-mode .marquee-item {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,0,0,.06) !important;
  border-top-color: var(--ci, #3b82f6) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.12), 0 0 12px -4px var(--ci, #3b82f6) !important;
}
body.light-mode .marquee-item::after { opacity: .07 !important; }
body.light-mode .marquee-item:hover {
  background: rgba(255,255,255,1) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 0 30px -6px var(--ci, #3b82f6) !important;
}
body.light-mode .marquee-item span { text-shadow: none !important; }
body.light-mode .marquee-item:hover span { text-shadow: 0 0 18px var(--ci, #3b82f6) !important; }

/* ── 3. ENGİNEERİNG RECTİCLE CURSOR ── */
@media (pointer: fine) {
  body.rb-cursor-ready { cursor: none !important; }
  body.rb-cursor-ready * { cursor: none !important; }

  .rb-reticle {
    position: fixed;
    width: 52px; height: 52px;
    pointer-events: none;
    z-index: 999999;
    left: -100px; top: -100px;
    transform: translate(-50%, -50%);
    will-change: left, top;
    filter: drop-shadow(0 0 5px rgba(59,130,246,.75)) drop-shadow(0 0 12px rgba(59,130,246,.35));
    transition: opacity .22s, transform .22s cubic-bezier(.4,0,.2,1), filter .22s;
  }

  /* SVG içindeki dönen halkalar */
  .rb-reticle .r-outer {
    transform-box: fill-box;
    transform-origin: center;
    animation: retiRotate 14s linear infinite;
  }
  .rb-reticle .r-inner {
    transform-box: fill-box;
    transform-origin: center;
    animation: retiRotate 5s linear infinite reverse;
  }
  @keyframes retiRotate {
    to { transform: rotate(360deg); }
  }

  /* Durumlar */
  .rb-reticle.hidden { opacity: 0; }

  .rb-reticle.hovering {
    transform: translate(-50%, -50%) scale(1.3);
    filter: drop-shadow(0 0 8px rgba(59,130,246,.9)) drop-shadow(0 0 20px rgba(59,130,246,.5));
  }
  .rb-reticle.clicking {
    transform: translate(-50%, -50%) scale(0.85);
    filter: drop-shadow(0 0 14px rgba(96,165,250,1)) drop-shadow(0 0 30px rgba(96,165,250,.6));
  }
}
@media (pointer: coarse) {
  .rb-reticle, .rb-ch, .rb-cv, .rb-cx { display: none !important; }
}

/* ── 4. 3D TILT — Kartlara perspective derinlik ── */
.product-card-dark,
.category-card-dark,
.industry-card,
.compare-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── 5. DARK / LIGHT MODE TOGGLE ── */
/* .theme-toggle — now handled inline in base.html as #rbThemeToggle inside .rb-sf */

/* ── Light mode — tüm koyu section'ları aydınlat ── */
body.light-mode {
  background: var(--rb-bg) !important;
}

/* Body arkaplanı */
body.light-mode main { background: var(--rb-bg); }

/* B2B Value */
body.light-mode .b2b-value              { background: var(--rb-white) !important; }
body.light-mode .b2b-value-text h2      { color: var(--rb-text) !important; }
body.light-mode .b2b-value-text p       { color: var(--rb-text-2) !important; }
body.light-mode .b2b-value-text .eyebrow{ color: var(--rb-primary-dark) !important; background: var(--rb-primary-light) !important; }
body.light-mode .b2b-list li strong     { color: var(--rb-text) !important; }
body.light-mode .b2b-list li span       { color: var(--rb-text-2) !important; }
body.light-mode .b2b-icon-wrap          { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; color: var(--rb-primary-dark) !important; }

/* Cert strip */
body.light-mode .cert-strip             { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; }
body.light-mode .cert-item              { color: var(--rb-primary-darker) !important; }
body.light-mode .cert-item svg          { color: var(--rb-primary) !important; }
body.light-mode .cert-sep               { color: var(--rb-border) !important; }

/* Kategori carousel */
body.light-mode .categories-dark        { background: var(--rb-bg-2) !important; background-image: none !important; }
body.light-mode .categories-dark .section-heading h2 { color: var(--rb-text) !important; }
body.light-mode .categories-dark .section-heading p  { color: var(--rb-text-2) !important; }
body.light-mode .categories-dark .eyebrow            { color: var(--rb-primary-dark) !important; background: var(--rb-primary-light) !important; }
body.light-mode .category-card-dark     { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .category-card-dark h3  { color: var(--rb-text) !important; }
body.light-mode .category-card-dark p   { color: var(--rb-text-2) !important; }
body.light-mode .category-card-dark .arrow { color: var(--rb-primary-dark) !important; }
body.light-mode .category-card-dark .pitch-badge { background: var(--rb-primary-light) !important; color: var(--rb-primary-dark) !important; }
body.light-mode .category-card-dark:hover { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }

/* Featured products */
body.light-mode .products-dark          { background: var(--rb-bg) !important; }
body.light-mode .products-dark .section-heading h2 { color: var(--rb-text) !important; }
body.light-mode .products-dark .section-heading p  { color: var(--rb-text-2) !important; }
body.light-mode .products-dark .eyebrow { color: var(--rb-primary-dark) !important; background: var(--rb-primary-light) !important; }
body.light-mode .product-card-dark      { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .product-card-dark h3   { color: var(--rb-text) !important; }
body.light-mode .product-card-dark .code{ color: var(--rb-primary-dark) !important; }
body.light-mode .product-card-dark .desc{ color: var(--rb-text-2) !important; }
body.light-mode .product-card-dark .spec-chip { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; color: var(--rb-text-2) !important; }
body.light-mode .product-card-dark .image { background: linear-gradient(135deg, var(--rb-bg-2), var(--rb-primary-light)) !important; }
body.light-mode .product-card-dark:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }

/* Ürün showcase */
body.light-mode .urun-showcase          { background: var(--rb-bg-2) !important; }

/* Compare section */
body.light-mode .compare-section        { background: var(--rb-bg) !important; }
body.light-mode .compare-section .section-heading h2 { color: var(--rb-text) !important; }
body.light-mode .compare-section .section-heading p  { color: var(--rb-text-2) !important; }
body.light-mode .compare-section .eyebrow { color: var(--rb-primary-dark) !important; background: var(--rb-primary-light) !important; }
body.light-mode .compare-card           { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .compare-card h3        { color: var(--rb-text) !important; }
body.light-mode .compare-card p         { color: var(--rb-text-2) !important; }
body.light-mode .compare-card:hover     { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .compare-icon-wrap      { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; color: var(--rb-primary-dark) !important; }

/* Industries */
body.light-mode .industries             { background: var(--rb-bg) !important; background-image: none !important; }
body.light-mode .industries .section-heading h2 { color: var(--rb-text) !important; }
body.light-mode .industries .section-heading p  { color: var(--rb-text-2) !important; }
body.light-mode .industries .eyebrow    { color: var(--rb-primary-dark) !important; background: var(--rb-primary-light) !important; }
body.light-mode .industry-card          { background: var(--rb-white) !important; border-color: var(--rb-border) !important; backdrop-filter: none !important; }
body.light-mode .industry-card h4       { color: var(--rb-text) !important; }
body.light-mode .industry-card p        { color: var(--rb-text-2) !important; }
body.light-mode .industry-card:hover    { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow) !important; transform: translateY(-4px) !important; }
body.light-mode .industry-icon          { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; color: var(--rb-primary-dark) !important; }

/* ── 6. SCROLL REVEAL — Sol/Sağ yön varyantları ── */
[data-reveal-left]  { opacity: 1; }
[data-reveal-right] { opacity: 1; }
[data-reveal-left].rb-animate {
  animation: rbRevealLeft .7s cubic-bezier(.22,1,.36,1) both;
}
[data-reveal-right].rb-animate {
  animation: rbRevealRight .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rbRevealLeft {
  from { opacity: 0; transform: translateX(-42px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rbRevealRight {
  from { opacity: 0; transform: translateX(42px); }
  to   { opacity: 1; transform: none; }
}

/* ── 7. GLASSMORPHİSM ENHANCEMENT ── */
.compare-card {
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
}
.industry-card {
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
}
.category-card-dark {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.product-card-dark {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Glassmorphism shimmer effect on hover */
.compare-card,
.industry-card,
.category-card-dark,
.product-card-dark {
  position: relative;
}
.compare-card::before,
.industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.08) 0%,
    transparent 50%,
    rgba(255,255,255,.03) 100%
  );
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 0;
}
.compare-card:hover::before,
.industry-card:hover::before { opacity: 1; }

/* ── 8. LOADING SCREEN ENHANCEMENT ── */
#rb-intro .intro-glow {
  animation: glowPulse 3s ease-in-out infinite, glowGrow 8s ease-in-out infinite !important;
}
@keyframes glowGrow {
  0%, 100% { width: 500px; height: 500px; }
  50%       { width: 650px; height: 650px; }
}

/* Smooth theme transition */
body {
  transition: background .4s ease !important;
}
section, .category-card-dark, .product-card-dark, .industry-card, .compare-card, .marquee-item {
  transition: background .4s ease, border-color .3s ease, color .3s ease;
}

/* ── IND-CONVEYOR — Gerçek bant, sektör paketleri ── */
.ind-conveyor-wrap {
  overflow: hidden;
  background: #050d1f;
  padding-bottom: 2rem;
}

/* Paket dış kap — kenar soldurma */
.ind-pkgs-outer {
  position: relative;
  overflow: hidden;
  padding-top: 2.5rem;
}
.ind-pkgs-outer::before,
.ind-pkgs-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 150px;
  z-index: 3;
  pointer-events: none;
}
.ind-pkgs-outer::before { left:  0; background: linear-gradient(90deg,  #050d1f, transparent); }
.ind-pkgs-outer::after  { right: 0; background: linear-gradient(-90deg, #050d1f, transparent); }

/* Animasyonlu şerit */
.ind-pkgs-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0 0 2rem 0;
  padding-right: 24px; /* -50% = tam 1 set = seamless loop */
  animation: indPkgScroll 32s linear infinite;
  will-change: transform;
}
@keyframes indPkgScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tek sektör kutusu */
.ind-pkg {
  width: 150px;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .25s, box-shadow .25s, transform .25s;
  cursor: pointer;
}
.ind-pkg:hover {
  border-color: rgba(96,165,250,.4);
  box-shadow: 0 0 0 1px rgba(96,165,250,.18), 0 18px 36px rgba(0,0,0,.55), 0 0 22px rgba(96,165,250,.14);
  transform: translateY(-4px);
}
/* Renkli üst kapak */
.ind-pkg-lid {
  height: 4px;
  background: var(--pkg-clr, #1d4ed8);
  box-shadow: 0 0 14px var(--pkg-clr, #1d4ed8);
}
/* İçerik */
.ind-pkg-body {
  padding: 1.1rem 0.9rem 1rem;
  text-align: center;
}
.ind-pkg-icon {
  width: 42px; height: 42px;
  margin: 0 auto 0.7rem;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--pkg-clr, #60a5fa);
}
.ind-pkg-icon svg { width: 20px; height: 20px; }
.ind-pkg-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
  font-family: 'Space Grotesk', sans-serif;
}

/* Belt fiziksel satır */
.ind-belt-row {
  display: flex;
  align-items: center;
  height: 70px;
  background: transparent;
  
  border-bottom: 1px solid rgba(0,0,0,.6);
}
.ind-belt-roller {
  display: none;
  width: 70px; height: 70px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 33%, #64748b 0%, #334155 45%, #0f172a 100%);
  border: 3px solid #1e293b;
  box-shadow: 0 0 0 5px #04090f, 0 4px 20px rgba(0,0,0,.8), inset 0 2px 5px rgba(255,255,255,.12);
  position: relative;
  z-index: 2;
  overflow: hidden;
  animation: rollerSpinL 2.2s linear infinite;
}
.ind-belt-roller::before {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #94a3b8 0%, #475569 50%, #1e293b 100%);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.ind-belt-roller::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(0deg,   transparent 46%, rgba(255,255,255,.14) 46%, rgba(255,255,255,.14) 54%, transparent 54%),
    linear-gradient(60deg,  transparent 46%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.09) 54%, transparent 54%),
    linear-gradient(120deg, transparent 46%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.09) 54%, transparent 54%);
}
.ind-belt-surface {
  flex: 1;
  height: 54px;
  position: relative;
  overflow: hidden;
  margin: 0 -3px;
  z-index: 1;
  background: transparent;
  
  
  
}
.ind-belt-segs {
  display: none;
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 24px,
    rgba(148,163,184,.08) 24px, rgba(148,163,184,.08) 26px
  );
  background-size: 26px 100%;
  animation: beltSegMove 1.1s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.ind-belt-text-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 3;
}
.ind-belt-text-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: rbBeltTextScroll 16s linear infinite;
  
}

/* Hover — tüm animasyonlar durur */
.ind-conveyor-wrap:hover .ind-pkgs-track,
.ind-conveyor-wrap:hover .ind-belt-text-track,
.ind-conveyor-wrap:hover .ind-belt-segs,
.ind-conveyor-wrap:hover .ind-belt-roller {
  display: none; animation-play-state: paused; }

/* Mobil */
@media (max-width: 640px) {
  .ind-pkgs-outer::before,
  .ind-pkgs-outer::after { width: 60px; }
  .ind-belt-roller {
  display: none; width: 54px; height: 54px; }
  .ind-belt-row { height: 54px; }
  .ind-belt-surface { height: 40px; }
}

/* Kariyer bandı bant hover ile durakla */
.rb-conveyor:hover .rb-belt-text-track { animation-play-state: paused; }
.rb-conveyor:hover .rb-belt-segs { animation-play-state: paused; }
.rb-conveyor:hover .rb-roller--l,
.rb-conveyor:hover .rb-roller--r { animation-play-state: paused; }
.rb-conveyor:hover ~ .cat-carousel-outer .cat-carousel-track { animation-play-state: paused; }

/* Mobil */
@media (max-width: 640px) {
  .cat-card { width: 260px; }
  .rb-roller { width: 52px; height: 52px; }
  .rb-roller::before { inset: 12px; }
  .rb-belt { height: 40px; }
  .rb-bt-word { font-size: 10px; letter-spacing: 4px; }
  .rb-conveyor { height: 52px; padding: 0 0.8rem; }
}

/* ════════════════════════════════════════════════════════════════
   HAKKIMIZDA SAYFASI — Zengin & Profesyonel Tasarım
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hk-hero {
  position: relative;
  background: linear-gradient(135deg, #040c1e 0%, #07122e 50%, #040c1e 100%);
  padding: calc(var(--rb-header-h) + 4rem) 0 5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hk-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.hk-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.hk-orb-1 { width:500px;height:500px;background:radial-gradient(circle,rgba(29,78,216,.45),transparent 70%);top:-120px;left:-100px;animation:orbFloat1 16s ease-in-out infinite; }
.hk-orb-2 { width:380px;height:380px;background:radial-gradient(circle,rgba(6,182,212,.3),transparent 70%);top:10%;right:-80px;animation:orbFloat2 20s ease-in-out infinite; }
.hk-orb-3 { width:280px;height:280px;background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%);bottom:5%;left:30%;animation:orbFloat3 24s ease-in-out infinite; }

.hk-hero-inner { position: relative; z-index: 2; }
.hk-hero-content { max-width: 760px; margin-bottom: 3.5rem; }
.hk-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #93c5fd; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3);
  padding: .35rem .9rem; border-radius: 4px; margin-bottom: 1.5rem;
}
.hk-hero h1 {
  font-size: clamp(2.2rem,5vw,4rem); font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -0.04em; margin: 0 0 1.25rem;
}
.hk-accent {
  background: linear-gradient(100deg,#60a5fa,#22d3ee,#a78bfa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 300;
}
.hk-hero-desc {
  font-size: 1.05rem; color: rgba(255,255,255,.6); line-height: 1.8;
  max-width: 580px; border-left: 2px solid rgba(59,130,246,.4); padding-left: 1.1rem;
}
.hk-hero-stats {
  display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1);
}
.hk-hstat { display: flex; flex-direction: column; gap: .2rem; }
.hk-hstat-num { font-family:var(--rb-font-display);font-size:2rem;font-weight:800;color:#fff;line-height:1; }
.hk-hstat-lbl { font-size:.72rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em; }
.hk-hstat-sep { width:1px;height:40px;background:rgba(255,255,255,.12); }

/* ── Misyon & Vizyon ── */
.hk-mv-section { background: #060f22; padding: 5rem 0; }
.hk-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hk-mv-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.hk-mv-mission { border-top: 3px solid #3b82f6; }
.hk-mv-vision  { border-top: 3px solid #a855f7; }
.hk-mv-mission::before { content:'';position:absolute;top:0;left:0;right:0;height:120px;background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.12),transparent);pointer-events:none; }
.hk-mv-vision::before  { content:'';position:absolute;top:0;left:0;right:0;height:120px;background:radial-gradient(ellipse at 50% 0%,rgba(168,85,247,.12),transparent);pointer-events:none; }
.hk-mv-card:hover { border-color: rgba(59,130,246,.4); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.hk-mv-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(29,78,216,.2); border: 1px solid rgba(59,130,246,.3); color: #7dd3fc;
  margin-bottom: 1.25rem;
}
.hk-mv-vision .hk-mv-icon { background: rgba(168,85,247,.2); border-color: rgba(168,85,247,.3); color: #d8b4fe; }
.hk-mv-icon svg { width: 24px; height: 24px; }
.hk-mv-tag {
  display: inline-block; font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7dd3fc;background:rgba(59,130,246,.15);border-radius:4px;padding:.2rem .6rem;margin-bottom:.75rem;
}
.hk-mv-vision .hk-mv-tag { color:#d8b4fe;background:rgba(168,85,247,.15); }
.hk-mv-card h3 { color:#fff;font-size:1.25rem;margin:0 0 .75rem; }
.hk-mv-card p  { color:rgba(255,255,255,.6);line-height:1.8;margin:0 0 1.25rem;font-size:.95rem; }
.hk-mv-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem; }
.hk-mv-list li { display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:rgba(255,255,255,.7); }
.hk-mv-list svg { color:#7dd3fc;flex-shrink:0; }
.hk-mv-vision .hk-mv-list svg { color:#d8b4fe; }

/* ── Timeline ── */
.hk-timeline-section { background: #050d1f; padding: 5rem 0; }
.hk-timeline { position:relative;max-width:860px;margin:0 auto;padding:2rem 0; }
.hk-timeline::before { content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,rgba(59,130,246,.4) 10%,rgba(59,130,246,.4) 90%,transparent);transform:translateX(-50%); }

.hk-tl-item { display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:start;margin-bottom:3rem;position:relative; }
.hk-tl-left  { }
.hk-tl-right { }
.hk-tl-left  .hk-tl-badge { grid-column:2;grid-row:1; }
.hk-tl-left  .hk-tl-card  { grid-column:1;grid-row:1;text-align:right;padding-right:2.5rem; }
.hk-tl-right .hk-tl-badge { grid-column:2;grid-row:1; }
.hk-tl-right .hk-tl-card  { grid-column:3;grid-row:1;padding-left:2.5rem; }

.hk-tl-badge {
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#0369a1);
  border:3px solid rgba(59,130,246,.5);
  font-family:var(--rb-font-display);font-size:.85rem;font-weight:800;color:#fff;
  box-shadow:0 0 24px rgba(29,78,216,.5),0 0 60px rgba(29,78,216,.2);
  position:relative;z-index:2;
  margin: 0 auto;
}

.hk-tl-card { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:1.5rem; }
.hk-tl-icon {
  width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;color:var(--ti,#7dd3fc);
  margin-bottom:1rem;box-shadow:0 0 16px var(--ti,#3b82f6);
}
.hk-tl-left .hk-tl-icon { margin-left:auto; }
.hk-tl-icon svg { width:18px;height:18px; }
.hk-tl-card h4 { color:#fff;font-size:1rem;margin:0 0 .5rem; }
.hk-tl-card p  { color:rgba(255,255,255,.55);font-size:.88rem;line-height:1.75;margin:0; }

/* ── Değerler ── */
.hk-values-section { background:#07101f;padding:5rem 0; }
.hk-values-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem; }
.hk-val-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;
  padding:2rem 1.75rem;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .3s;
  transform-style:preserve-3d;
}
.hk-val-top-line {
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--vc,#3b82f6),var(--vc2,#06b6d4));
  box-shadow:0 0 12px var(--vc,#3b82f6);
}
/* dönen border */
.hk-val-card::after {
  content:'';position:absolute;inset:0;padding:1.5px;border-radius:inherit;
  background:conic-gradient(from var(--border-angle),transparent 0%,var(--vc,#3b82f6) 18%,var(--vc2,#06b6d4) 36%,transparent 52%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.4;transition:opacity .4s;
  animation:border-spin 5s linear infinite;pointer-events:none;z-index:0;
}
.hk-val-card:hover::after { opacity:.9;animation-duration:2.5s; }
.hk-val-card:hover {
  transform:perspective(700px) rotateX(-4deg) translateY(-6px);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px -10px var(--vc,#3b82f6);
  border-color:rgba(255,255,255,.18);
}
.hk-val-icon {
  width:50px;height:50px;border-radius:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;color:var(--vc,#3b82f6);
  margin-bottom:1.25rem;position:relative;z-index:1;
  box-shadow:0 0 18px -4px var(--vc,#3b82f6);
  transition:box-shadow .4s,background .4s;
}
.hk-val-card:hover .hk-val-icon {
  background:linear-gradient(135deg,var(--vc,#3b82f6),var(--vc2,#06b6d4));
  border-color:transparent;box-shadow:0 0 28px var(--vc,#3b82f6);color:#fff;
}
.hk-val-icon svg { width:22px;height:22px; }
.hk-val-card h4 { color:#fff;font-size:1rem;margin:0 0 .6rem;position:relative;z-index:1; }
.hk-val-card p  { color:rgba(255,255,255,.55);font-size:.88rem;line-height:1.75;margin:0;position:relative;z-index:1; }

/* ── Üretim Tesisi ── */
.hk-facility-section { background:#050d1f;padding:5rem 0; }
.hk-facility-grid { display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center; }
.hk-facility-features { display:flex;flex-direction:column;gap:1.25rem; }
.hk-ff-item { display:flex;gap:1rem;align-items:flex-start; }
.hk-ff-icon {
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(29,78,216,.3),rgba(6,182,212,.15));
  border:1px solid rgba(59,130,246,.25);display:grid;place-items:center;color:#7dd3fc;
}
.hk-ff-icon svg { width:20px;height:20px; }
.hk-ff-item strong { display:block;color:#fff;font-size:.95rem;margin-bottom:.2rem; }
.hk-ff-item span   { color:rgba(255,255,255,.5);font-size:.85rem; }

.hk-facility-visual { display:flex;flex-direction:column;gap:1rem; }
.hk-fv-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
}
.hk-fv-header { display:flex;align-items:center;gap:.4rem;padding:.85rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03); }
.hk-fv-dot { width:10px;height:10px;border-radius:50%; }
.hk-fv-body { padding:1.5rem; }
.hk-fv-metric { text-align:center;margin-bottom:1.25rem; }
.hk-fv-m-num { display:block;font-family:var(--rb-font-display);font-size:2.2rem;font-weight:800;color:#fff;line-height:1; }
.hk-fv-m-lbl { font-size:.7rem;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase;margin-top:.25rem;display:block; }
.hk-fv-divider { height:1px;background:rgba(255,255,255,.07);margin:1rem 0; }
.hk-fv-row { display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:.5rem; }
.hk-fv-item { display:flex;flex-direction:column;gap:.2rem; }
.hk-fv-i-num { font-family:var(--rb-font-display);font-size:1.6rem;font-weight:800;line-height:1; }
.hk-fv-i-lbl { font-size:.65rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em; }
.hk-fv-progress-label { font-size:.7rem;color:rgba(255,255,255,.4);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.08em; }
.hk-fv-bar-wrap { height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden; }
.hk-fv-bar { height:100%;width:82%;background:linear-gradient(90deg,#3b82f6,#06b6d4);border-radius:999px;box-shadow:0 0 10px rgba(6,182,212,.5); }
.hk-fv-location { display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.35); }
.hk-fv-location svg { color:#06b6d4;flex-shrink:0; }

.hk-fv-badges { display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem; }
.hk-fv-badge {
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-top:2px solid var(--bc,#3b82f6);border-radius:12px;padding:1rem .75rem;
  text-align:center;color:var(--bc,#3b82f6);
  box-shadow:0 0 14px -4px var(--bc,#3b82f6);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;line-height:1.4;
  transition:transform .3s,box-shadow .3s;
}
.hk-fv-badge span { color:rgba(255,255,255,.7); }
.hk-fv-badge:hover { transform:translateY(-4px);box-shadow:0 0 28px -4px var(--bc,#3b82f6); }

/* ── Sektörler ── */
.hk-sectors-section { background:#07101f;padding:5rem 0; }
.hk-sectors-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem; }
.hk-sector-card {
  display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--sc,#3b82f6);
  border-radius:12px;padding:1.25rem 1.5rem;
  transition:background .3s,transform .35s,box-shadow .35s;
  cursor:default;
}
.hk-sector-card:hover { background:rgba(255,255,255,.08);transform:translateX(4px);box-shadow:0 0 24px -8px var(--sc,#3b82f6); }
.hk-sector-icon {
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;color:var(--sc,#3b82f6);
}
.hk-sector-icon svg { width:18px;height:18px; }
.hk-sector-card span { font-size:.88rem;font-weight:600;color:rgba(255,255,255,.8);line-height:1.3; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hk-mv-grid { grid-template-columns:1fr; }
  .hk-values-grid { grid-template-columns:1fr 1fr; }
  .hk-facility-grid { grid-template-columns:1fr;gap:2.5rem; }
  .hk-sectors-grid { grid-template-columns:1fr 1fr; }
  .hk-timeline::before { left:32px;transform:none; }
  .hk-tl-item { grid-template-columns:64px 1fr;gap:0 1rem; }
  .hk-tl-left .hk-tl-badge,
  .hk-tl-right .hk-tl-badge { grid-column:1;grid-row:1; }
  .hk-tl-left .hk-tl-card,
  .hk-tl-right .hk-tl-card { grid-column:2;grid-row:1;padding:1.25rem;text-align:left; }
  .hk-tl-left .hk-tl-icon { margin-left:0; }
  .hk-tl-badge { width:56px;height:56px;font-size:.75rem; }
  .hk-fv-badges { grid-template-columns:repeat(2,1fr); }
  .hk-hero-stats { gap:1.5rem; }
}
@media (max-width: 600px) {
  .hk-values-grid { grid-template-columns:1fr; }
  .hk-sectors-grid { grid-template-columns:1fr; }
  .hk-hero-stats { flex-direction:column;gap:1rem; }
  .hk-hstat-sep { display:none; }
}

/* ════════════════════════════════════════════════════════════════
   ÜRÜNLER INDEX SAYFASI — Zengin & Animasyonlu
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.pi-hero {
  position: relative;
  background: linear-gradient(135deg,#040c1e 0%,#071530 55%,#040c1e 100%);
  padding: calc(var(--rb-header-h) + 4rem) 0 5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pi-hero-bg { position:absolute;inset:0;pointer-events:none; }
.pi-orb { position:absolute;border-radius:50%;filter:blur(80px); }
.pi-orb-1 { width:500px;height:500px;background:radial-gradient(circle,rgba(29,78,216,.5),transparent 70%);top:-130px;left:-80px;animation:orbFloat1 16s ease-in-out infinite; }
.pi-orb-2 { width:360px;height:360px;background:radial-gradient(circle,rgba(6,182,212,.32),transparent 70%);top:5%;right:-60px;animation:orbFloat2 20s ease-in-out infinite; }
.pi-orb-3 { width:260px;height:260px;background:radial-gradient(circle,rgba(168,85,247,.22),transparent 70%);bottom:0;left:35%;animation:orbFloat3 24s ease-in-out infinite; }
.pi-hero-inner { position:relative;z-index:2; }
.pi-hero-text { max-width:720px;margin-bottom:3rem; }
.pi-hero-eyebrow {
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#93c5fd;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);
  padding:.35rem .9rem;border-radius:4px;margin-bottom:1.5rem;
}
.pi-hero h1 {
  font-size:clamp(2.2rem,5vw,4rem);font-weight:800;color:#fff;
  line-height:1.1;letter-spacing:-0.04em;margin:0 0 1.25rem;
}
.pi-accent {
  background:linear-gradient(100deg,#60a5fa,#22d3ee,#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:300;
}
.pi-hero-desc {
  font-size:1rem;color:rgba(255,255,255,.58);line-height:1.85;max-width:560px;
  border-left:2px solid rgba(59,130,246,.4);padding-left:1.1rem;
}
.pi-hero-stats {
  display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);
}
.pi-hstat { display:flex;flex-direction:column;gap:.2rem; }
.pi-hstat-num { font-family:var(--rb-font-display);font-size:1.9rem;font-weight:800;color:#fff;line-height:1; }
.pi-hstat-lbl { font-size:.68rem;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:.1em; }
.pi-hstat-sep { width:1px;height:38px;background:rgba(255,255,255,.12); }

/* ── Filtre çubuğu ── */
.pi-filter-bar {
  background:rgba(4,9,15,.95);
  border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky;top:var(--rb-header-h);z-index:100;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.pi-filter-inner {
  display:flex;align-items:center;gap:.5rem;
  padding:.9rem 1.5rem;overflow-x:auto;
  scrollbar-width:none;
}
.pi-filter-inner::-webkit-scrollbar { display:none; }
.pi-filter-btn {
  display:inline-flex;align-items:center;
  padding:.45rem 1.1rem;border-radius:999px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.1);
  background:transparent;
  white-space:nowrap;
  transition:color .25s,border-color .25s,background .25s,box-shadow .25s;
  text-decoration:none;
}
.pi-filter-btn:hover {
  color:var(--fc,#fff);border-color:var(--fc,rgba(255,255,255,.4));
  background:rgba(255,255,255,.05);
  box-shadow:0 0 14px -4px var(--fc,rgba(255,255,255,.2));
}
.pi-filter-active {
  color:#fff !important;background:rgba(29,78,216,.35) !important;
  border-color:rgba(59,130,246,.6) !important;
}

/* ── Kategori kartları ── */
.pi-cats-section { background:#050d1f;padding:4rem 0 5rem; }
.pi-cat-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}

.pi-cat-card {
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  padding:0;
  display:flex;flex-direction:column;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s;
  transform-style:preserve-3d;
  cursor:pointer;
}
/* dönen animasyonlu border */
.pi-cat-card::after {
  content:'';position:absolute;inset:0;padding:1.5px;border-radius:inherit;
  background:conic-gradient(from var(--border-angle),transparent 0%,var(--cc,#3b82f6) 18%,var(--cc2,#06b6d4) 36%,transparent 52%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.35;transition:opacity .45s;
  animation:border-spin 6s linear infinite;
  pointer-events:none;z-index:0;
}
.pi-cat-card:hover::after { opacity:1;animation-duration:2.5s; }
.pi-cat-card:hover {
  transform:perspective(900px) rotateX(-3deg) translateY(-8px) scale(1.01);
  box-shadow:0 24px 72px rgba(0,0,0,.6),0 0 60px -15px var(--cc,#3b82f6);
  border-color:rgba(255,255,255,.18);
}

/* üst renkli şerit */
.pi-cat-topbar {
  height:3px;
  background:linear-gradient(90deg,var(--cc,#3b82f6),var(--cc2,#06b6d4));
  box-shadow:0 0 14px var(--cc,#3b82f6);
  position:relative;z-index:1;
}

/* header */
.pi-cat-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.75rem 2rem 0;
  position:relative;z-index:1;
}
.pi-cat-icon {
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;
  color:var(--cc,#3b82f6);
  box-shadow:0 0 20px -6px var(--cc,#3b82f6);
  transition:background .4s,box-shadow .4s;
  flex-shrink:0;
}
.pi-cat-card:hover .pi-cat-icon {
  background:linear-gradient(135deg,var(--cc,#3b82f6),var(--cc2,#06b6d4));
  color:#fff;border-color:transparent;
  box-shadow:0 0 32px -4px var(--cc,#3b82f6);
}
.pi-cat-icon svg { width:26px;height:26px; }
.pi-cat-pitch-wrap { text-align:right; }
.pi-cat-pitch-num {
  display:block;font-family:var(--rb-font-display);
  font-size:2.6rem;font-weight:800;color:var(--cc,#3b82f6);
  line-height:1;text-shadow:0 0 30px var(--cc,#3b82f6);
}
.pi-cat-pitch-unit {
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.35);margin-left:.1rem;vertical-align:middle;
}
.pi-cat-pitch-lbl {
  display:block;font-size:.62rem;color:rgba(255,255,255,.3);
  text-transform:uppercase;letter-spacing:.1em;margin-top:.15rem;
}

/* ürün sayısı rozeti */
.pi-cat-count-badge {
  position:absolute;top:1.25rem;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:.25rem .8rem;
  font-size:.68rem;font-weight:600;color:rgba(255,255,255,.5);
  white-space:nowrap;z-index:2;
}
.pi-cat-count-badge span {
  font-family:var(--rb-font-display);font-size:.9rem;font-weight:800;
  color:var(--cc,#3b82f6);
}

/* içerik */
.pi-cat-body { padding:1.5rem 2rem .75rem;flex:1;position:relative;z-index:1; }
.pi-cat-body h3 {
  font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 .6rem;
  transition:color .3s;
}
.pi-cat-card:hover .pi-cat-body h3 { color:var(--cc,#7dd3fc); }
.pi-cat-body p {
  font-size:.86rem;color:rgba(255,255,255,.5);line-height:1.75;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* etiketler */
.pi-cat-tags {
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:0 2rem 1.25rem;position:relative;z-index:1;
}
.pi-cat-tag {
  font-size:.65rem;font-weight:600;letter-spacing:.05em;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);border-radius:999px;padding:.2rem .65rem;
  transition:background .3s,color .3s,border-color .3s;
}
.pi-cat-card:hover .pi-cat-tag {
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.18);
}

/* footer */
.pi-cat-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.07);
  position:relative;z-index:1;
  margin-top:auto;
}
.pi-cat-cta {
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
  color:var(--cc,#7dd3fc);text-transform:uppercase;
  transition:gap .3s;
}
.pi-cat-card:hover .pi-cat-cta { gap:.75rem; }
.pi-cat-arrow-circle {
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;color:rgba(255,255,255,.45);
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.pi-cat-card:hover .pi-cat-arrow-circle {
  background:var(--cc,#3b82f6);border-color:transparent;
  color:#fff;transform:translateX(4px);
}

/* ── Neden bölümü ── */
.pi-why-section { background:#07101f;padding:5rem 0; }
.pi-why-grid {
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem;
}
.pi-why-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-top:2px solid var(--wc,#3b82f6);border-radius:16px;padding:1.75rem 1.5rem;
  position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
}
.pi-why-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:80px;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent);
  pointer-events:none;
}
.pi-why-card:hover { transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 32px -10px var(--wc,#3b82f6); }
.pi-why-icon {
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;
  color:var(--wc,#3b82f6);margin-bottom:1.1rem;
  box-shadow:0 0 18px -5px var(--wc,#3b82f6);
  transition:background .4s,box-shadow .4s;
}
.pi-why-card:hover .pi-why-icon {
  background:linear-gradient(135deg,var(--wc,#3b82f6),rgba(255,255,255,.1));
  color:#fff;border-color:transparent;box-shadow:0 0 28px -4px var(--wc,#3b82f6);
}
.pi-why-icon svg { width:22px;height:22px; }
.pi-why-card h4 { color:#fff;font-size:.95rem;margin:0 0 .6rem; }
.pi-why-card p  { color:rgba(255,255,255,.5);font-size:.83rem;line-height:1.75;margin:0 0 1.25rem; }
.pi-why-stat {
  font-family:var(--rb-font-display);font-size:1.5rem;font-weight:800;
  color:var(--wc,#3b82f6);text-shadow:0 0 20px var(--wc,#3b82f6);
}
.pi-why-stat span { font-size:.7rem;font-weight:600;color:rgba(255,255,255,.4);display:block;margin-top:.1rem;text-shadow:none; }

/* ── Uygulama alanları ── */
.pi-apps-section { background:#050d1f;padding:5rem 0; }
.pi-apps-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;
}
.pi-app-card {
  display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--ac,#3b82f6);border-radius:12px;padding:1.1rem 1.25rem;
  position:relative;
  transition:background .3s,transform .35s,box-shadow .35s;
  cursor:default;
}
.pi-app-card:hover {
  background:rgba(255,255,255,.08);transform:translateX(5px);
  box-shadow:0 0 24px -8px var(--ac,#3b82f6);
}
.pi-app-icon {
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;
  color:var(--ac,#3b82f6);
}
.pi-app-icon svg { width:18px;height:18px; }
.pi-app-body { flex:1;min-width:0; }
.pi-app-body strong { display:block;font-size:.88rem;font-weight:700;color:#fff;margin-bottom:.2rem; }
.pi-app-body span   { font-size:.75rem;color:var(--ac,#7dd3fc);font-weight:600; }
.pi-app-dot {
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--ac,#3b82f6);box-shadow:0 0 10px var(--ac,#3b82f6);
}

/* ── Responsive ── */
@media (max-width:1024px) {
  .pi-why-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .pi-cat-grid { grid-template-columns:1fr; }
  .pi-apps-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .pi-why-grid { grid-template-columns:1fr; }
  .pi-apps-grid { grid-template-columns:1fr; }
  .pi-hero-stats { flex-direction:column;gap:1rem; }
  .pi-hstat-sep { display:none; }
  .pi-cat-count-badge { position:static;transform:none;margin:1rem 2rem 0;display:inline-flex; }
}

/* ════════════════════════════════════════════════════════════════
   COMPARE KARTLARI — Her zaman dönen renkli animasyonlu border
   ════════════════════════════════════════════════════════════════ */

/* Kart başına renk çifti */
.compare-card:nth-child(1) { --cc: #3b82f6; --cc2: #06b6d4; }
.compare-card:nth-child(2) { --cc: #a855f7; --cc2: #ec4899; }
.compare-card:nth-child(3) { --cc: #22c55e; --cc2: #06b6d4; }
.compare-card:nth-child(4) { --cc: #f59e0b; --cc2: #ef4444; }
.compare-card:nth-child(5) { --cc: #06b6d4; --cc2: #3b82f6; }
.compare-card:nth-child(6) { --cc: #a855f7; --cc2: #6366f1; }

/* Dönen border — her zaman güçlü, hover'da daha hızlı */
.compare-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 2px !important;
  border-radius: inherit !important;
  background: conic-gradient(
    from var(--border-angle),
    transparent         0%,
    var(--cc,  #3b82f6) 22%,
    var(--cc2, #06b6d4) 45%,
    transparent         60%
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: .85 !important;
  transition: opacity .35s ease !important;
  animation: border-spin 3s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.compare-card:hover::after {
  opacity: 1 !important;
  animation-duration: 1.5s !important;
}

/* Kart hover — renkli arka plan tonu */
.compare-card {
  box-shadow: 0 0 0 0 transparent !important;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease !important;
}
.compare-card:hover {
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 30px color-mix(in srgb, var(--cc, #3b82f6) 30%, transparent) !important;
}

/* İkon — her zaman renkli arka plan, hover'da glow */
.compare-card .compare-icon-wrap {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cc, #3b82f6) 20%, rgba(255,255,255,.05)),
    color-mix(in srgb, var(--cc2, #06b6d4) 15%, rgba(255,255,255,.03))
  ) !important;
  border-color: color-mix(in srgb, var(--cc, #3b82f6) 45%, transparent) !important;
  color: var(--cc, #3b82f6) !important;
  transition: box-shadow .35s, background .35s, transform .3s !important;
}
.compare-card:hover .compare-icon-wrap {
  background: linear-gradient(135deg, var(--cc, #3b82f6), var(--cc2, #06b6d4)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 28px var(--cc, #3b82f6), 0 0 8px var(--cc2, #06b6d4) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
}

/* Light mode */
body.light-mode .compare-card::after { opacity: .45 !important; }
body.light-mode .compare-card:hover::after { opacity: .85 !important; }

/* ============================================================
   İLETİŞİM SAYFASI — /iletisim
   ============================================================ */

/* ── Hero ── */
.ct-hero {
  position: relative;
  background: linear-gradient(160deg, #040b18 0%, #060f20 55%, #030a16 100%);
  padding: 6rem 0 4.5rem;
  overflow: hidden;
}
.ct-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ct-orb { position: absolute; border-radius: 50%; filter: blur(85px); opacity: .15; }
.ct-orb-1 { width: 550px; height: 550px; background: #3b82f6; top: -200px; right: -100px; }
.ct-orb-2 { width: 340px; height: 340px; background: #22c55e; bottom: -120px; left: -60px; opacity: .11; }
.ct-orb-3 { width: 240px; height: 240px; background: #ec4899; top: 60%; left: 38%; opacity: .08; }
.ct-grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(59,130,246,.03) 1px,transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ct-hero-inner { position: relative; z-index: 1; }

.ct-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(59,130,246,.12); color: #7dd3fc;
  border: 1px solid rgba(59,130,246,.25); border-radius: 50px;
  padding: .35rem .85rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.ct-hero-text h1 {
  font-family: var(--rb-font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800; line-height: 1.12; color: #fff; margin-bottom: 1rem;
}
.ct-accent {
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 55%, #22c55e 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ct-hero-desc {
  font-size: 1.05rem; color: rgba(255,255,255,.52);
  max-width: 580px; line-height: 1.7; margin-bottom: 2.2rem;
}
.ct-hero-stats {
  display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap;
}
.ct-hstat { text-align: center; }
.ct-hstat-num {
  display: block; font-size: 1.7rem; font-weight: 800; color: #fff;
  font-family: var(--rb-font-display); line-height: 1;
}
.ct-hstat-lbl { font-size: .7rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; }
.ct-hstat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.12); }

/* ── Ana Grid ── */
.ct-main-section { background: #040b18; padding: 4.5rem 0 5.5rem; }
.ct-main-grid {
  display: grid; grid-template-columns: 420px 1fr;
  gap: 3.5rem; align-items: flex-start;
}

/* ── Flash mesajı ── */
.ct-flash {
  display: flex; align-items: center; gap: .65rem;
  border-radius: 12px; padding: .9rem 1.1rem;
  font-size: .88rem; font-weight: 500; margin-bottom: 1.25rem;
}
.ct-flash-success {
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #86efac;
}
.ct-flash-error, .ct-flash-danger {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #fca5a5;
}

/* ── Info column ── */
.ct-info-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.3); margin-bottom: 1rem;
}
.ct-info-card {
  display: flex; align-items: center; gap: .9rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: .9rem 1rem; margin-bottom: .65rem;
  text-decoration: none; transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.ct-info-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(to bottom, var(--ic,#3b82f6), var(--ic2,#06b6d4));
  border-radius: 14px 0 0 14px; opacity: .6; transition: opacity .3s;
}
.ct-info-card:hover {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14);
  transform: translateX(4px); box-shadow: 0 8px 25px rgba(0,0,0,.2);
}
.ct-info-card:hover::before { opacity: 1; }
.ct-info-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ic,#3b82f6) 0%, var(--ic2,#06b6d4) 100%);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: box-shadow .3s;
}
.ct-info-card:hover .ct-info-icon { box-shadow: 0 0 18px -3px var(--ic,#3b82f6); }
.ct-info-icon svg { width: 20px; height: 20px; }
.ct-info-body { flex: 1; min-width: 0; }
.ct-info-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); margin-bottom: .15rem; }
.ct-info-value { font-size: .9rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-info-sub { font-size: .73rem; color: rgba(255,255,255,.38); margin-top: .1rem; }
.ct-info-arrow { color: rgba(255,255,255,.2); flex-shrink: 0; transition: color .3s, transform .3s; }
.ct-info-card:hover .ct-info-arrow { color: var(--ic,#3b82f6); transform: translateX(3px); }

/* Hours & why cards */
.ct-hours-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .65rem;
}
.ct-hours-header {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .55rem;
}
.ct-hours-header svg { color: #60a5fa; }
.ct-hours-body {
  font-size: .85rem; color: rgba(255,255,255,.45); line-height: 1.7;
}
.ct-why-card {
  background: rgba(59,130,246,.05); border: 1px solid rgba(59,130,246,.12);
  border-radius: 14px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.ct-why-row { display: flex; align-items: flex-start; gap: .65rem; font-size: .83rem; color: rgba(255,255,255,.55); line-height: 1.5; }
.ct-why-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: .35rem; }

/* ── Form card ── */
.ct-form-card {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.09);
  transition: border-color .4s, box-shadow .4s;
}
.ct-form-card:focus-within {
  border-color: rgba(59,130,246,.3);
  box-shadow: 0 0 50px -15px rgba(59,130,246,.25);
}
.ct-form-spin {
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg),
    transparent 0%, #3b82f6 20%, #06b6d4 40%, transparent 58%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-spin 6s linear infinite;
  opacity: .22; transition: opacity .4s; pointer-events: none; z-index: 0;
}
.ct-form-card:focus-within .ct-form-spin { opacity: .65; animation-duration: 3s; }

.ct-form-inner { position: relative; z-index: 1; padding: 2rem 2rem 1.75rem; }
.ct-form-heading { margin-bottom: 1.75rem; }
.ct-form-heading h2 {
  font-family: var(--rb-font-display); font-size: 1.35rem; font-weight: 700;
  color: #fff; margin-bottom: .35rem;
}
.ct-form-heading p { font-size: .86rem; color: rgba(255,255,255,.42); }

/* Form inputs */
.ct-form { display: flex; flex-direction: column; gap: 1rem; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ct-field { display: flex; flex-direction: column; gap: .35rem; }
.ct-field label {
  font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .07em;
}
.ct-req { color: #ef4444; }
.ct-input, .ct-textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .9rem;
  color: #fff;
  font-family: var(--rb-font-sans);
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
  width: 100%;
}
.ct-input::placeholder, .ct-textarea::placeholder { color: rgba(255,255,255,.22); }
.ct-input:focus, .ct-textarea:focus {
  border-color: rgba(59,130,246,.6);
  background: rgba(59,130,246,.07);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.ct-textarea { resize: vertical; min-height: 130px; }
.ct-error { font-size: .75rem; color: #fca5a5; margin-top: .15rem; }

/* Submit button */
.ct-submit {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .95rem 2rem;
  background: linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%);
  border: none; border-radius: 12px; cursor: pointer;
  transition: transform .25s, box-shadow .25s, opacity .25s;
  margin-top: .25rem;
}
.ct-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px -8px rgba(29,78,216,.55);
}
.ct-submit:active { transform: translateY(0); }
.ct-submit-text {
  display: flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 700; color: #fff;
  font-family: var(--rb-font-display); position: relative; z-index: 1;
}
.ct-submit-shine {
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.ct-submit:hover .ct-submit-shine { left: 125%; }
.ct-form-note {
  display: flex; align-items: center; gap: .4rem;
  font-size: .73rem; color: rgba(255,255,255,.28);
  text-align: center; justify-content: center; margin-top: .25rem;
}
.ct-form-note svg { flex-shrink: 0; }

/* ── Harita ── */
.ct-map-section { background: #030a15; }
.ct-map-topbar {
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .85rem 0;
}
.ct-map-topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ct-map-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: rgba(255,255,255,.45);
}
.ct-map-label svg { color: #60a5fa; }
.ct-map-open {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 600; color: #60a5fa;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2);
  border-radius: 8px; padding: .35rem .8rem; text-decoration: none;
  transition: background .25s, border-color .25s, color .25s;
}
.ct-map-open:hover { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.4); color: #93c5fd; }
.ct-map-wrap { position: relative; overflow: hidden; }
.ct-map-fade-top {
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background: linear-gradient(to bottom, #030a15, transparent);
  z-index: 1; pointer-events: none;
}
.ct-map-fade-bot {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
  background: linear-gradient(to top, #030a15, transparent);
  z-index: 1; pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ct-main-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ct-info-col { order: 2; }
  .ct-form-col { order: 1; }
}
@media (max-width: 600px) {
  .ct-form-row { grid-template-columns: 1fr; }
  .ct-hero { padding: 4rem 0 3.5rem; }
  .ct-form-inner { padding: 1.5rem; }
  .ct-hstat-sep { display: none; }
  .ct-hero-stats { gap: 1.2rem; }
}

/* ============================================================
   KALİTE & SERTİFİKALAR SAYFASI — /kalite
   ============================================================ */

/* ── Hero ── */
.kl-hero {
  position: relative;
  background: linear-gradient(160deg, #030a15 0%, #060f1e 55%, #030a15 100%);
  padding: 6rem 0 5rem;
  overflow: hidden;
}
.kl-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.kl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .14;
}
.kl-orb-1 { width: 600px; height: 600px; background: #3b82f6; top: -250px; right: -150px; }
.kl-orb-2 { width: 380px; height: 380px; background: #ef4444; bottom: -140px; left: -80px; opacity: .12; }
.kl-orb-3 { width: 260px; height: 260px; background: #22c55e; top: 55%; left: 42%; opacity: .09; }

.kl-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

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

.kl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(59,130,246,.12);
  color: #7dd3fc;
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 50px;
  padding: .35rem .85rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.kl-eyebrow svg { opacity: .8; }

.kl-hero-content {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: center;
}
.kl-hero-left h1 {
  font-family: var(--rb-font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 1.1rem;
}
.kl-accent {
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 55%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.kl-hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.52);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Hero badge pills */
.kl-hero-badges {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.kl-hbadge {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hbc, #3b82f6);
  border-radius: 10px;
  padding: .5rem .9rem;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--rb-font-display);
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 0 14px -4px var(--hbc, #3b82f6);
  transition: box-shadow .3s, transform .3s;
}
.kl-hbadge:hover {
  box-shadow: 0 0 24px -2px var(--hbc, #3b82f6);
  transform: translateY(-2px);
}
.kl-hbadge span {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  letter-spacing: .05em;
}

/* Hero stat grid (right column) */
.kl-hero-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.kl-hstat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: border-color .3s, transform .3s;
}
.kl-hstat:hover {
  border-color: rgba(59,130,246,.3);
  transform: translateY(-2px);
}
.kl-hstat-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--rb-font-display);
  line-height: 1;
  margin-bottom: .35rem;
}
.kl-hstat-lbl {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.4;
}

/* ── Certifications Section ── */
.kl-certs-section {
  background: #040b18;
  padding: 5rem 0;
}
.kl-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.kl-cert-card {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 2rem;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.kl-cert-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 28px 70px rgba(0,0,0,.4), 0 0 40px -15px var(--cc, #3b82f6);
}

/* Spinning animated border */
.kl-cert-spin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg),
    transparent 0%,
    var(--cc, #3b82f6) 20%,
    var(--cc2, #06b6d4) 40%,
    transparent 58%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 6s linear infinite;
  opacity: .3;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 0;
}
.kl-cert-card:hover .kl-cert-spin { opacity: .8; animation-duration: 3s; }

/* Cert card inner */
.kl-cert-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Seal badge */
.kl-cert-seal {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.kl-seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cc, #3b82f6);
  box-shadow: 0 0 20px -4px var(--cc, #3b82f6), inset 0 0 12px -6px var(--cc, #3b82f6);
  animation: seal-pulse 3s ease-in-out infinite;
}
@keyframes seal-pulse {
  0%, 100% { opacity: .6; box-shadow: 0 0 20px -4px var(--cc, #3b82f6), inset 0 0 12px -6px var(--cc, #3b82f6); }
  50%       { opacity: 1;  box-shadow: 0 0 30px -2px var(--cc, #3b82f6), inset 0 0 16px -4px var(--cc, #3b82f6); }
}
.kl-seal-inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cc, #3b82f6) 0%, var(--cc2, #06b6d4) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.kl-seal-abbr {
  font-size: .78rem;
  font-weight: 900;
  color: #fff;
  font-family: var(--rb-font-display);
  line-height: 1;
}
.kl-seal-sub {
  font-size: .52rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  letter-spacing: .04em;
  line-height: 1;
}

.kl-cert-org {
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .2rem;
}
.kl-cert-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--rb-font-display);
  line-height: 1.25;
}
.kl-cert-desc {
  position: relative;
  z-index: 1;
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.kl-cert-applies {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.kl-cert-applies-lbl {
  font-size: .7rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: .2rem;
}
.kl-cert-tag {
  font-size: .7rem;
  font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: .15rem .5rem;
  color: rgba(255,255,255,.65);
}
.kl-cert-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  color: rgba(255,255,255,.35);
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: .9rem;
  margin-top: .5rem;
}
.kl-cert-footer svg { color: var(--cc, #3b82f6); opacity: .8; flex-shrink: 0; }

/* ── Process Flow ── */
.kl-process-section {
  background: #030a15;
  padding: 5.5rem 0;
}
.kl-process-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 3.5rem;
  position: relative;
}
.kl-process-flow::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(to bottom,
    #3b82f6 0%, #22c55e 20%, #f59e0b 40%, #a855f7 60%, #06b6d4 80%, #ef4444 100%
  );
  opacity: .25;
}

.kl-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0 1.5rem;
  padding: 1.5rem 0;
  position: relative;
  align-items: flex-start;
}
.kl-step:hover .kl-step-body { transform: translateX(4px); }
.kl-step-connector { display: none; }

.kl-step-node {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.kl-step-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sc, #3b82f6);
  opacity: .45;
  animation: seal-pulse 3s ease-in-out infinite;
}
.kl-step-icon {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sc, #3b82f6) 0%, rgba(255,255,255,.05) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.kl-step-icon svg { width: 22px; height: 22px; }

.kl-step-body {
  padding: .5rem 0 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: transform .3s ease;
}
.kl-step:last-child .kl-step-body { border-bottom: none; }
.kl-step-num {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sc, #3b82f6);
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.kl-step-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .4rem;
  font-family: var(--rb-font-display);
}
.kl-step-body p {
  font-size: .88rem;
  color: rgba(255,255,255,.48);
  line-height: 1.65;
  margin: 0;
  max-width: 680px;
}

/* ── Material Specs ── */
.kl-mat-section {
  background: #050c1a;
  padding: 5.5rem 0;
}
.kl-mat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.kl-mat-card {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1.75rem;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.kl-mat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 35px -12px var(--mc, #3b82f6);
}
.kl-mat-spin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg),
    transparent 0%, var(--mc, #3b82f6) 18%, var(--mc2, #06b6d4) 38%, transparent 55%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 7s linear infinite;
  opacity: .25;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 0;
}
.kl-mat-card:hover .kl-mat-spin { opacity: .75; animation-duration: 3.5s; }

.kl-mat-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.25rem;
}
.kl-mat-abbr {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 900;
  color: #fff;
  font-family: var(--rb-font-display);
  flex-shrink: 0;
  letter-spacing: .03em;
}
.kl-mat-fullname {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
}
.kl-mat-tagline {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  margin-top: .1rem;
}
.kl-mat-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: .9rem;
}
.kl-mat-table td {
  padding: .45rem 0;
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
.kl-mat-table td:first-child {
  color: rgba(255,255,255,.45);
  padding-right: 1rem;
  white-space: nowrap;
}
.kl-mat-table td:last-child {
  color: rgba(255,255,255,.85);
  text-align: right;
}
.kl-mat-table tr:last-child td { border-bottom: none; }
.kl-ok {
  color: #4ade80;
  font-weight: 700;
  font-size: .8rem;
}
.kl-mat-use {
  position: relative;
  z-index: 1;
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: .8rem;
  line-height: 1.55;
}

/* ── Traceability Section ── */
.kl-trace-section {
  background: #040b18;
  padding: 5.5rem 0;
}
.kl-trace-inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 4rem;
  align-items: center;
}
.kl-trace-left h2 {
  font-family: var(--rb-font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  margin-bottom: 1rem;
}
.kl-trace-left p {
  font-size: .95rem;
  color: rgba(255,255,255,.5);
  line-height: 1.75;
  margin-bottom: 2rem;
}
.kl-trace-points {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.kl-trace-pt {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .88rem;
  color: rgba(255,255,255,.65);
}
.kl-trace-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  flex-shrink: 0;
}
.kl-trace-icon svg { width: 16px; height: 16px; }

/* Traceability mock card */
.kl-trace-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  overflow: hidden;
}
.kl-trace-card-header {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.kl-trace-qr {
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  flex-shrink: 0;
}
.kl-qr-inner {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  height: 100%;
  gap: 1px;
}
.kl-qr-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.kl-qr-cell {
  background: transparent;
  border-radius: 1px;
}
.kl-qr-cell.kl-qr-pos { background: #111; }
.kl-qr-cell.kl-qr-on  { background: #444; }

.kl-tl-company {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
}
.kl-tl-series {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin: .2rem 0;
}
.kl-tl-serial {
  font-size: .72rem;
  color: #60a5fa;
  font-family: 'Courier New', monospace;
}

.kl-trace-rows {
  padding: .5rem 0;
}
.kl-trace-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .82rem;
}
.kl-trace-row:last-child { border-bottom: none; }
.kl-trace-row span { color: rgba(255,255,255,.38); }
.kl-trace-row strong { color: rgba(255,255,255,.8); font-weight: 600; }

.kl-trace-card-footer {
  background: rgba(255,255,255,.025);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: .7rem 1.5rem;
  font-size: .68rem;
  color: rgba(255,255,255,.25);
  text-align: center;
  font-style: italic;
}

/* ── Lab Stats ── */
.kl-lab-section {
  background: #030a15;
  padding: 5.5rem 0;
}
.kl-lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.kl-lab-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.kl-lab-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lc, #3b82f6), transparent);
  border-radius: 18px 18px 0 0;
}
.kl-lab-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 28px -10px var(--lc, #3b82f6);
}
.kl-lab-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lc, #3b82f6);
  margin: 0 auto .9rem;
  transition: background .3s, box-shadow .3s;
}
.kl-lab-card:hover .kl-lab-icon {
  background: linear-gradient(135deg, var(--lc, #3b82f6) 0%, rgba(255,255,255,.08) 100%);
  box-shadow: 0 0 18px -3px var(--lc, #3b82f6);
  color: #fff;
}
.kl-lab-icon svg { width: 20px; height: 20px; }
.kl-lab-num {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--rb-font-display);
  line-height: 1;
  margin-bottom: .2rem;
}
.kl-lab-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lc, #3b82f6);
  margin-left: .1rem;
}
.kl-lab-lbl {
  font-size: .74rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
}
.kl-lab-bar {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.kl-lab-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lc, #3b82f6), transparent);
  border-radius: 2px;
  width: 0;
  transition: width 1.5s cubic-bezier(.4,0,.2,1);
}
.kl-lab-card:hover .kl-lab-bar-fill,
.kl-lab-card.in-view .kl-lab-bar-fill { width: 85%; }

/* ── Belge Kartları ── */
.kl-docs-section {
  background: #050c1a;
  padding: 5.5rem 0;
}
.kl-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.kl-doc-card {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.kl-doc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 22px 55px rgba(0,0,0,.35), 0 0 35px -12px var(--dc, #3b82f6);
}
.kl-doc-spin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg),
    transparent 0%, var(--dc, #3b82f6) 18%, var(--dc2, #06b6d4) 38%, transparent 55%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 6s linear infinite;
  opacity: .28;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 0;
}
.kl-doc-card:hover .kl-doc-spin { opacity: .75; animation-duration: 3s; }
.kl-doc-inner {
  position: relative;
  z-index: 1;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
}
.kl-doc-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--dc, #3b82f6) 0%, var(--dc2, #06b6d4) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.kl-doc-icon svg { width: 26px; height: 26px; }
.kl-doc-type {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dc, #3b82f6);
}
.kl-doc-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--rb-font-display);
}
.kl-doc-desc {
  font-size: .86rem;
  color: rgba(255,255,255,.48);
  line-height: 1.65;
  flex: 1;
}
.kl-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.kl-doc-badge {
  font-size: .68rem;
  font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: .15rem .5rem;
  color: rgba(255,255,255,.55);
}
.kl-doc-badge-pdf {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color: #fca5a5;
}
.kl-doc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: .25rem;
}
.kl-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--dc, #3b82f6) 0%, var(--dc2, #06b6d4) 100%);
  border: none;
  border-radius: 10px;
  padding: .55rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.kl-doc-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px var(--dc, #3b82f6);
}
.kl-doc-btn-req {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.12);
}
.kl-doc-btn-req:hover {
  background: rgba(255,255,255,.12);
  box-shadow: none;
}

/* ── PDF Galeri Modal ── */
.kl-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.kl-gallery-modal.active {
  opacity: 1;
  pointer-events: all;
}
.kl-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,8,20,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kl-gallery-container {
  position: relative;
  z-index: 1;
  background: #080f22;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  width: min(96vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.97);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.kl-gallery-modal.active .kl-gallery-container {
  transform: translateY(0) scale(1);
}
.kl-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.kl-gallery-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--rb-font-display);
}
.kl-gallery-pcount {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: .15rem .6rem;
  margin-left: .25rem;
}
.kl-gallery-header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.kl-gallery-dl {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 8px;
  padding: .4rem .85rem;
  text-decoration: none;
  transition: background .25s, border-color .25s;
}
.kl-gallery-dl:hover { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.4); color: #93c5fd; }
.kl-gallery-close {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.kl-gallery-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.kl-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kl-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #111827;
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .25s, transform .25s, box-shadow .25s;
  aspect-ratio: 0.707;
}
.kl-thumb:hover {
  border-color: rgba(59,130,246,.5);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 16px -4px #3b82f6;
}
.kl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kl-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .25s;
}
.kl-thumb:hover .kl-thumb-overlay { opacity: 1; }
.kl-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .35rem .5rem;
  background: rgba(0,0,0,.6);
  font-size: .65rem;
  color: rgba(255,255,255,.6);
  text-align: center;
}

/* ── Lightbox ── */
.kl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.kl-lightbox.active {
  opacity: 1;
  pointer-events: all;
}
.kl-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1,5,14,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.kl-lightbox-img-wrap {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 820px);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kl-lightbox-img-wrap img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
  display: block;
}
.kl-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, box-shadow .25s;
}
.kl-lb-nav:hover { background: rgba(255,255,255,.18); box-shadow: 0 0 20px rgba(255,255,255,.1); }
.kl-lb-prev { left: max(1.5rem, calc(50% - 460px)); }
.kl-lb-next { right: max(1.5rem, calc(50% - 460px)); }
.kl-lightbox-bar {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(10,18,35,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .5rem 1rem;
  backdrop-filter: blur(12px);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .kl-hero-content { grid-template-columns: 1fr; gap: 2.5rem; }
  .kl-cert-grid { grid-template-columns: 1fr 1fr; }
  .kl-trace-inner { grid-template-columns: 1fr; }
  .kl-trace-right { order: -1; }
}
@media (max-width: 768px) {
  .kl-hero { padding: 4rem 0 3.5rem; }
  .kl-cert-grid { grid-template-columns: 1fr; }
  .kl-mat-grid { grid-template-columns: 1fr; }
  .kl-docs-grid { grid-template-columns: 1fr; }
  .kl-lab-grid { grid-template-columns: repeat(2, 1fr); }
  .kl-process-flow::before { left: 22px; }
  .kl-step { grid-template-columns: 48px 1fr; }
  .kl-step-node { width: 46px; height: 46px; }
  .kl-gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .kl-lb-prev { left: .75rem; }
  .kl-lb-next { right: .75rem; }
}
@media (max-width: 480px) {
  .kl-lab-grid { grid-template-columns: 1fr; }
  .kl-hero-badges { gap: .5rem; }
  .kl-gallery-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SEKTÖRLER SAYFASI — /sektorler
   ============================================================ */

/* ── Hero ── */
.sk-hero {
  position: relative;
  background: linear-gradient(160deg, #050d1f 0%, #0a1628 60%, #06111f 100%);
  padding: 6rem 0 5rem;
  overflow: hidden;
}
.sk-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sk-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
}
.sk-orb-1 { width: 520px; height: 520px; background: #3b82f6; top: -180px; right: -100px; }
.sk-orb-2 { width: 360px; height: 360px; background: #22c55e; bottom: -120px; left: -60px; }
.sk-orb-3 { width: 280px; height: 280px; background: #a855f7; top: 50%; left: 40%; opacity: .11; }

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

.sk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(59,130,246,.12);
  color: #7dd3fc;
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 50px;
  padding: .35rem .85rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.sk-eyebrow svg { opacity: .8; }

.sk-hero-text h1 {
  font-family: var(--rb-font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 1.1rem;
}
.sk-accent {
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 60%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sk-hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.58);
  max-width: 620px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* Hero stats */
.sk-hero-stats {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.sk-hstat { text-align: center; }
.sk-hstat-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--rb-font-display);
  line-height: 1;
}
.sk-hstat-lbl {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .2rem;
}
.sk-hstat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.12);
}

/* ── Sector Cards Section ── */
.sk-sectors-section {
  background: #040b18;
  padding: 4rem 0 5rem;
}
.sk-sectors-section .container {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ── Single Sector Card ── */
.sk-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.sk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--skc, #3b82f6), .3);
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
}

/* Spinning border div */
.sk-card-spin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg),
    transparent 0%,
    var(--skc, #3b82f6) 18%,
    var(--skc2, #06b6d4) 38%,
    transparent 55%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 5s linear infinite;
  opacity: .35;
  transition: opacity .4s ease, animation-duration .4s;
  pointer-events: none;
  z-index: 0;
}
.sk-card:hover .sk-card-spin {
  opacity: .85;
  animation-duration: 2.5s;
}

/* Coloured top bar */
.sk-card-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--skc, #3b82f6) 0%, var(--skc2, #06b6d4) 100%);
  z-index: 1;
  opacity: .7;
  transition: opacity .35s;
}
.sk-card:hover .sk-card-topbar { opacity: 1; }

/* Card inner layout */
.sk-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 90px 1fr 240px;
  gap: 0;
  min-height: 220px;
}

/* ── Left column: icon + number ── */
.sk-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  border-right: 1px solid rgba(255,255,255,.06);
  gap: 1rem;
}
.sk-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(var(--skc, 59,130,246), .18) 0%,
    rgba(var(--skc2, 6,182,212), .1) 100%
  );
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--skc, #3b82f6);
  transition: box-shadow .35s, background .35s;
}
.sk-card:hover .sk-card-icon {
  box-shadow: 0 0 22px var(--skc, #3b82f6);
  background: linear-gradient(135deg, var(--skc, #3b82f6) 0%, var(--skc2, #06b6d4) 100%);
  color: #fff;
}
.sk-card-icon svg { width: 24px; height: 24px; }

.sk-card-num {
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--rb-font-display);
  color: rgba(255,255,255,.2);
  letter-spacing: .06em;
}

/* ── Centre body ── */
.sk-card-body {
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .65rem;
}
.sk-card-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--skc, #3b82f6);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: .2rem .6rem;
  align-self: flex-start;
}
.sk-card-body h2 {
  font-family: var(--rb-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
.sk-card-body p {
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  line-height: 1.65;
  margin: 0;
}
.sk-card-apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .8rem;
  margin-top: .2rem;
}
.sk-app-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
}
.sk-app-item svg {
  flex-shrink: 0;
  color: var(--skc, #3b82f6);
  opacity: .9;
}

/* ── Right column: recommendation boxes ── */
.sk-card-right {
  padding: 1.75rem 1.5rem;
  border-left: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sk-rec-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: border-color .3s;
}
.sk-card:hover .sk-rec-box { border-color: rgba(255,255,255,.15); }
.sk-rec-label {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  margin-bottom: .3rem;
}
.sk-rec-series {
  font-size: .95rem;
  font-weight: 700;
  color: var(--skc, #3b82f6);
  font-family: var(--rb-font-display);
}
.sk-rec-spec {
  font-size: .76rem;
  color: rgba(255,255,255,.45);
  margin-top: .15rem;
}
.sk-rec-why {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  margin-top: .35rem;
  line-height: 1.45;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: .35rem;
}

/* ── Belt Selection Guide ── */
.sk-guide-section {
  background: #050c1a;
  padding: 5rem 0 5.5rem;
}
.sk-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.sk-guide-card {
  background: linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sk-guide-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gc, #3b82f6) 0%, transparent 100%);
  border-radius: 18px 18px 0 0;
}
.sk-guide-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 30px -10px var(--gc, #3b82f6);
}
.sk-guide-pitch {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--rb-font-display);
  color: var(--gc, #3b82f6);
  margin-bottom: .2rem;
}
.sk-guide-series {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.sk-guide-app {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
  margin-bottom: .6rem;
}
.sk-guide-feat {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: .5rem;
  margin-bottom: 1rem;
}
.sk-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gc, #3b82f6);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .4rem .85rem;
  background: rgba(255,255,255,.04);
  transition: background .3s, border-color .3s, color .3s;
}
.sk-guide-btn:hover {
  background: var(--gc, #3b82f6);
  border-color: var(--gc, #3b82f6);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sk-card-inner {
    grid-template-columns: 80px 1fr;
  }
  .sk-card-right {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .sk-rec-box { flex: 1; min-width: 200px; }
  .sk-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sk-hero { padding: 4rem 0 3.5rem; }
  .sk-hero-text h1 { font-size: 2rem; }
  .sk-card-inner {
    grid-template-columns: 1fr;
  }
  .sk-card-left {
    flex-direction: row;
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 1.25rem 1.5rem;
    gap: .75rem;
  }
  .sk-card-body { padding: 1.25rem 1.5rem; }
  .sk-card-apps { grid-template-columns: 1fr; }
  .sk-guide-grid { grid-template-columns: 1fr; }
  .sk-hstat-sep { display: none; }
  .sk-hero-stats { gap: 1.2rem; }
}

/* ============================================================
   LIGHT MODE — Tüm yeni sayfalar
   ============================================================ */

/* ── Ortak: section arka planları ── */
body.light-mode .hk-hero,
body.light-mode .hk-mv-section,
body.light-mode .hk-timeline,
body.light-mode .hk-values-section,
body.light-mode .hk-facility-section,
body.light-mode .hk-sectors-section,
body.light-mode .hk-cta-section,
body.light-mode .pi-hero,
body.light-mode .pi-filter-section,
body.light-mode .pi-cat-section,
body.light-mode .pi-why-section,
body.light-mode .pi-apps-section,
body.light-mode .sk-hero,
body.light-mode .sk-sectors-section,
body.light-mode .sk-guide-section,
body.light-mode .kl-hero,
body.light-mode .kl-certs-section,
body.light-mode .kl-process-section,
body.light-mode .kl-mat-section,
body.light-mode .kl-trace-section,
body.light-mode .kl-lab-section,
body.light-mode .kl-docs-section,
body.light-mode .ct-hero,
body.light-mode .ct-main-section,
body.light-mode .ct-map-section { background: var(--rb-bg) !important; background-image: none !important; }

/* Alternatif dark bölümler (zebra pattern) */
body.light-mode .hk-timeline,
body.light-mode .pi-why-section,
body.light-mode .kl-process-section,
body.light-mode .kl-lab-section,
body.light-mode .ct-map-section { background: var(--rb-bg-2) !important; }

/* Grid overlay gizle */
body.light-mode .kl-grid-overlay,
body.light-mode .ct-grid-overlay { opacity: 0 !important; }

/* Orb'ları sil */
body.light-mode .hk-orb-1, body.light-mode .hk-orb-2, body.light-mode .hk-orb-3,
body.light-mode .pi-orb-1, body.light-mode .pi-orb-2, body.light-mode .pi-orb-3,
body.light-mode .sk-orb, body.light-mode .sk-orb-1, body.light-mode .sk-orb-2, body.light-mode .sk-orb-3,
body.light-mode .kl-orb, body.light-mode .kl-orb-1, body.light-mode .kl-orb-2, body.light-mode .kl-orb-3,
body.light-mode .ct-orb, body.light-mode .ct-orb-1, body.light-mode .ct-orb-2, body.light-mode .ct-orb-3 { opacity: 0 !important; }

/* heading-glow text rengi */
body.light-mode .heading-glow { color: var(--rb-text) !important; }
body.light-mode .section-heading p { color: var(--rb-text-2) !important; }

/* ── HAKKIMIZDA (.hk-*) ── */
body.light-mode .hk-hero-text h1,
body.light-mode .hk-mv-card h3,
body.light-mode .hk-tl-item h4,
body.light-mode .hk-val-card h4,
body.light-mode .hk-facility-title,
body.light-mode .hk-fv-num { color: var(--rb-text) !important; }

body.light-mode .hk-hero-desc,
body.light-mode .hk-mv-card p,
body.light-mode .hk-tl-item p,
body.light-mode .hk-val-card p,
body.light-mode .hk-facility-sub,
body.light-mode .hk-fv-lbl { color: var(--rb-text-2) !important; }

body.light-mode .hk-hstat-num { color: var(--rb-text) !important; }
body.light-mode .hk-hstat-lbl { color: var(--rb-text-3) !important; }
body.light-mode .hk-hstat-sep { background: var(--rb-border) !important; }

body.light-mode .hk-mv-mission,
body.light-mode .hk-mv-vision,
body.light-mode .hk-val-card,
body.light-mode .hk-tl-item { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow) !important; }

body.light-mode .hk-mv-mission:hover,
body.light-mode .hk-mv-vision:hover,
body.light-mode .hk-val-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }

body.light-mode .hk-val-card::after,
body.light-mode .hk-val-top-line { opacity: .35 !important; }
body.light-mode .hk-val-card:hover::after { opacity: .75 !important; }

body.light-mode .hk-tl-badge { opacity: .85 !important; }

body.light-mode .hk-facility-section { background: var(--rb-bg-2) !important; }
body.light-mode .hk-facility-card,
body.light-mode .hk-fv-stat { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }

body.light-mode .hk-sector-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .hk-sector-card h4 { color: var(--rb-text) !important; }
body.light-mode .hk-sector-card p  { color: var(--rb-text-2) !important; }
body.light-mode .hk-sector-card:hover { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; }

body.light-mode .hk-eyebrow { background: var(--rb-primary-light) !important; color: var(--rb-primary-dark) !important; border-color: var(--rb-primary) !important; }

/* ── ÜRÜNLER (.pi-*) ── */
body.light-mode .pi-hero-text h1,
body.light-mode .pi-cat-card h3,
body.light-mode .pi-why-card h4,
body.light-mode .pi-app-card h4 { color: var(--rb-text) !important; }

body.light-mode .pi-hero-desc,
body.light-mode .pi-cat-card p,
body.light-mode .pi-why-card p,
body.light-mode .pi-app-card p { color: var(--rb-text-2) !important; }

body.light-mode .pi-hstat-num { color: var(--rb-text) !important; }
body.light-mode .pi-hstat-lbl { color: var(--rb-text-3) !important; }
body.light-mode .pi-hstat-sep { background: var(--rb-border) !important; }

body.light-mode .pi-filter-bar { background: var(--rb-bg-2) !important; border-color: var(--rb-border) !important; }
body.light-mode .pi-filter-btn { background: var(--rb-white) !important; border-color: var(--rb-border) !important; color: var(--rb-text-2) !important; }
body.light-mode .pi-filter-btn:hover,
body.light-mode .pi-filter-btn.active { background: var(--rb-primary) !important; border-color: var(--rb-primary) !important; color: #fff !important; }

body.light-mode .pi-cat-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow) !important; }
body.light-mode .pi-cat-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .pi-cat-card::after { opacity: .2 !important; }
body.light-mode .pi-cat-card:hover::after { opacity: .65 !important; }
body.light-mode .pi-cat-topbar { opacity: .6 !important; }
body.light-mode .pi-cat-pitch-num { color: var(--rb-text-3) !important; }
body.light-mode .pi-cat-tag { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; color: var(--rb-text-2) !important; }
body.light-mode .pi-cat-footer { border-color: var(--rb-border) !important; color: var(--rb-text-3) !important; }
body.light-mode .pi-cat-footer svg { color: var(--rb-primary) !important; }

body.light-mode .pi-why-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .pi-why-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .pi-why-icon { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; color: var(--rb-primary-dark) !important; }

body.light-mode .pi-app-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .pi-app-card:hover { border-color: var(--rb-primary) !important; }
body.light-mode .pi-app-num { color: var(--rb-border) !important; }

body.light-mode .pi-eyebrow { background: var(--rb-primary-light) !important; color: var(--rb-primary-dark) !important; border-color: var(--rb-primary) !important; }

/* ── SEKTÖRLER (.sk-*) ── */
body.light-mode .sk-hero-text h1,
body.light-mode .sk-card-body h2,
body.light-mode .sk-guide-pitch,
body.light-mode .sk-rec-series { color: var(--rb-text) !important; }

body.light-mode .sk-hero-desc,
body.light-mode .sk-card-body p,
body.light-mode .sk-guide-app,
body.light-mode .sk-rec-spec { color: var(--rb-text-2) !important; }

body.light-mode .sk-hstat-num { color: var(--rb-text) !important; }
body.light-mode .sk-hstat-lbl { color: var(--rb-text-3) !important; }
body.light-mode .sk-hstat-sep { background: var(--rb-border) !important; }

body.light-mode .sk-eyebrow { background: var(--rb-primary-light) !important; color: var(--rb-primary-dark) !important; border-color: var(--rb-primary) !important; }

body.light-mode .sk-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow) !important; }
body.light-mode .sk-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .sk-card-spin { opacity: .15 !important; }
body.light-mode .sk-card:hover .sk-card-spin { opacity: .5 !important; }
body.light-mode .sk-card-left { border-color: var(--rb-border) !important; }
body.light-mode .sk-card-right { border-color: var(--rb-border) !important; }
body.light-mode .sk-card-num { color: var(--rb-border) !important; }
body.light-mode .sk-card-tag { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; }
body.light-mode .sk-app-item { color: var(--rb-text-2) !important; }
body.light-mode .sk-rec-box { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; }
body.light-mode .sk-rec-label { color: var(--rb-text-3) !important; }
body.light-mode .sk-rec-why { color: var(--rb-text-3) !important; border-color: var(--rb-border) !important; }

body.light-mode .sk-guide-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .sk-guide-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .sk-guide-series { color: var(--rb-text-3) !important; }
body.light-mode .sk-guide-feat { color: var(--rb-text-3) !important; border-color: var(--rb-border) !important; }
body.light-mode .sk-guide-btn { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; }
body.light-mode .sk-guide-btn:hover { background: var(--gc, var(--rb-primary)) !important; border-color: var(--gc, var(--rb-primary)) !important; color: #fff !important; }

/* ── KALİTE (.kl-*) ── */
body.light-mode .kl-hero-left h1,
body.light-mode .kl-cert-name,
body.light-mode .kl-step-body h3,
body.light-mode .kl-mat-fullname,
body.light-mode .kl-trace-left h2,
body.light-mode .kl-lab-num,
body.light-mode .kl-doc-title,
body.light-mode .kl-tl-series { color: var(--rb-text) !important; }

body.light-mode .kl-hero-desc,
body.light-mode .kl-cert-desc,
body.light-mode .kl-step-body p,
body.light-mode .kl-mat-tagline,
body.light-mode .kl-trace-left p,
body.light-mode .kl-lab-lbl,
body.light-mode .kl-doc-desc { color: var(--rb-text-2) !important; }

body.light-mode .kl-hstat { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .kl-hstat-num { color: var(--rb-text) !important; }
body.light-mode .kl-hstat-lbl { color: var(--rb-text-3) !important; }
body.light-mode .kl-eyebrow { background: var(--rb-primary-light) !important; color: var(--rb-primary-dark) !important; border-color: var(--rb-primary) !important; }
body.light-mode .kl-hbadge { background: var(--rb-bg) !important; }

body.light-mode .kl-cert-card,
body.light-mode .kl-mat-card,
body.light-mode .kl-doc-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow) !important; }
body.light-mode .kl-cert-card:hover,
body.light-mode .kl-mat-card:hover,
body.light-mode .kl-doc-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .kl-cert-spin,
body.light-mode .kl-mat-spin,
body.light-mode .kl-doc-spin { opacity: .12 !important; }
body.light-mode .kl-cert-card:hover .kl-cert-spin,
body.light-mode .kl-mat-card:hover .kl-mat-spin,
body.light-mode .kl-doc-card:hover .kl-doc-spin { opacity: .45 !important; }

body.light-mode .kl-cert-org { color: var(--rb-text-3) !important; }
body.light-mode .kl-cert-tag { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; color: var(--rb-text-2) !important; }
body.light-mode .kl-cert-footer { color: var(--rb-text-3) !important; border-color: var(--rb-border) !important; }

body.light-mode .kl-step-num { opacity: .9 !important; }
body.light-mode .kl-step-body { border-color: var(--rb-border) !important; }

body.light-mode .kl-mat-table td:first-child { color: var(--rb-text-3) !important; }
body.light-mode .kl-mat-table td:last-child { color: var(--rb-text) !important; }
body.light-mode .kl-mat-table td { border-color: var(--rb-border) !important; }
body.light-mode .kl-mat-use { color: var(--rb-text-3) !important; border-color: var(--rb-border) !important; }

body.light-mode .kl-trace-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .kl-trace-card-header { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; }
body.light-mode .kl-tl-company { color: var(--rb-text-3) !important; }
body.light-mode .kl-tl-serial { color: var(--rb-primary-dark) !important; }
body.light-mode .kl-trace-row { border-color: var(--rb-border) !important; }
body.light-mode .kl-trace-row span { color: var(--rb-text-3) !important; }
body.light-mode .kl-trace-row strong { color: var(--rb-text) !important; }
body.light-mode .kl-trace-card-footer { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; color: var(--rb-text-3) !important; }
body.light-mode .kl-trace-pt span { color: var(--rb-text-2) !important; }
body.light-mode .kl-trace-icon { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; color: var(--rb-primary-dark) !important; }

body.light-mode .kl-lab-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .kl-lab-card:hover { border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .kl-lab-icon { background: var(--rb-primary-light) !important; border-color: var(--rb-border) !important; }
body.light-mode .kl-lab-card:hover .kl-lab-icon { background: linear-gradient(135deg, var(--lc,var(--rb-primary)), rgba(0,0,0,.05)) !important; color: #fff !important; }
body.light-mode .kl-lab-bar { background: var(--rb-border) !important; }

body.light-mode .kl-doc-btn { opacity: .95 !important; }
body.light-mode .kl-doc-badge { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; color: var(--rb-text-2) !important; }
body.light-mode .kl-doc-badge-pdf { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; color: #dc2626 !important; }
body.light-mode .kl-doc-type { opacity: .9 !important; }

/* Gallery modal/lightbox light mode — zaten koyu kalabilir (PDF görüntüleme) */

/* ── İLETİŞİM (.ct-*) ── */
body.light-mode .ct-hero-text h1,
body.light-mode .ct-form-heading h2 { color: var(--rb-text) !important; }

body.light-mode .ct-hero-desc,
body.light-mode .ct-form-heading p { color: var(--rb-text-2) !important; }

body.light-mode .ct-hstat-num { color: var(--rb-text) !important; }
body.light-mode .ct-hstat-lbl { color: var(--rb-text-3) !important; }
body.light-mode .ct-hstat-sep { background: var(--rb-border) !important; }
body.light-mode .ct-eyebrow { background: var(--rb-primary-light) !important; color: var(--rb-primary-dark) !important; border-color: var(--rb-primary) !important; }

body.light-mode .ct-info-title { color: var(--rb-text-3) !important; }
body.light-mode .ct-info-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow) !important; }
body.light-mode .ct-info-card:hover { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .ct-info-label { color: var(--rb-text-3) !important; }
body.light-mode .ct-info-value { color: var(--rb-text) !important; }
body.light-mode .ct-info-sub { color: var(--rb-text-3) !important; }
body.light-mode .ct-info-arrow { color: var(--rb-border) !important; }
body.light-mode .ct-info-card:hover .ct-info-arrow { color: var(--rb-primary) !important; }

body.light-mode .ct-hours-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; }
body.light-mode .ct-hours-header { color: var(--rb-text-2) !important; }
body.light-mode .ct-hours-body { color: var(--rb-text-2) !important; }

body.light-mode .ct-why-card { background: var(--rb-primary-light) !important; border-color: var(--rb-primary) !important; }
body.light-mode .ct-why-row { color: var(--rb-text-2) !important; }

body.light-mode .ct-form-card { background: var(--rb-white) !important; border-color: var(--rb-border) !important; box-shadow: var(--rb-shadow-lg) !important; }
body.light-mode .ct-form-card:focus-within { border-color: var(--rb-primary) !important; }
body.light-mode .ct-form-spin { opacity: .1 !important; }
body.light-mode .ct-form-card:focus-within .ct-form-spin { opacity: .4 !important; }

body.light-mode .ct-field label { color: var(--rb-text-2) !important; }
body.light-mode .ct-input,
body.light-mode .ct-textarea { background: var(--rb-bg) !important; border-color: var(--rb-border) !important; color: var(--rb-text) !important; }
body.light-mode .ct-input::placeholder,
body.light-mode .ct-textarea::placeholder { color: var(--rb-text-3) !important; }
body.light-mode .ct-input:focus,
body.light-mode .ct-textarea:focus { background: var(--rb-white) !important; border-color: var(--rb-primary) !important; box-shadow: 0 0 0 3px rgba(29,78,216,.1) !important; color: var(--rb-text) !important; }

body.light-mode .ct-form-note { color: var(--rb-text-3) !important; }

body.light-mode .ct-map-topbar { background: var(--rb-bg-2) !important; border-color: var(--rb-border) !important; }
body.light-mode .ct-map-label { color: var(--rb-text-3) !important; }
body.light-mode .ct-map-fade-top { background: linear-gradient(to bottom, var(--rb-bg-2), transparent) !important; }
body.light-mode .ct-map-fade-bot { background: linear-gradient(to top, var(--rb-bg), transparent) !important; }

/* ════════════════════════════════════════════════════════════
   ULTRA-LUXURY LAYER 1 — NOISE GRAIN OVERLAY
   ════════════════════════════════════════════════════════════ */
.rb-grain {
  position: fixed;
  inset: -150%;
  width: 400%; height: 400%;
  pointer-events: none;
  z-index: 999997;
  opacity: .042;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  animation: rbGrain .18s steps(1) infinite;
  will-change: transform;
}
@keyframes rbGrain {
  0%   { transform: translate(0,0); }
  12%  { transform: translate(-4%,-6%); }
  25%  { transform: translate(6%,3%); }
  37%  { transform: translate(-3%,7%); }
  50%  { transform: translate(4%,-5%); }
  62%  { transform: translate(-7%,2%); }
  75%  { transform: translate(5%,-3%); }
  87%  { transform: translate(-2%,6%); }
  100% { transform: translate(0,0); }
}
body.light-mode .rb-grain { opacity: .022; mix-blend-mode: multiply; }

/* ════════════════════════════════════════════════════════════
   ULTRA-LUXURY LAYER 2 — AMBIENT MOUSE LIGHT
   ════════════════════════════════════════════════════════════ */
.rb-ambient {
  position: fixed;
  width: 900px; height: 900px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  left: -900px; top: -900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(59,130,246,.09)  0%,
    rgba(59,130,246,.04)  38%,
    rgba(96,165,250,.015) 60%,
    transparent 72%
  );
  mix-blend-mode: screen;
  will-change: left, top;
  opacity: 0;
  transition: opacity .5s;
}
body.rb-cursor-ready .rb-ambient { opacity: 1; }
body.light-mode .rb-ambient { mix-blend-mode: normal; background: radial-gradient(circle, rgba(29,78,216,.04) 0%, transparent 65%); }

/* ════════════════════════════════════════════════════════════
   ULTRA-LUXURY LAYER 3 — SCROLL PROGRESS BAR
   ════════════════════════════════════════════════════════════ */
.rb-progress {
  position: fixed;
  left: 0; top: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 45%, #06b6d4 100%);
  z-index: 999996;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(59,130,246,.7), 0 0 24px rgba(59,130,246,.3);
  transition: width .07s linear;
}
.rb-progress::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6));
  border-radius: 0 3px 3px 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(4,10,28,.8); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #1d4ed8, #3b82f6 55%, #06b6d4);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(59,130,246,.4);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #2563eb, #60a5fa 55%, #22d3ee); }
* { scrollbar-width: thin; scrollbar-color: #3b82f6 rgba(4,10,28,.8); }

/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — Industrial Precision Design
   ════════════════════════════════════════════════════════════ */

/* ── Hero Section ── */
.pd-hero {
  position: relative;
  background: #040a1c;
  padding: 6rem 0 4rem;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.pd-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(59,130,246,.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.pd-hero-glow {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,.22) 0%, rgba(6,182,212,.08) 50%, transparent 70%);
  pointer-events: none;
  animation: pdGlowPulse 6s ease-in-out infinite;
}
@keyframes pdGlowPulse {
  0%,100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.pd-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Media Frame ── */
.pd-media-col { display: flex; flex-direction: column; gap: 1.5rem; }
.pd-media-frame {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.pd-media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59,130,246,.07) 0%, transparent 60%);
  pointer-events: none;
}
.pd-media-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #3b82f6;
  border-style: solid;
  border-width: 0;
}
.pd-media-corner--tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; border-radius: 3px 0 0 0; }
.pd-media-corner--tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 3px 0 0; }
.pd-media-corner--bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; border-radius: 0 0 0 3px; }
.pd-media-corner--br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 3px 0; }
.pd-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.pd-media-frame:hover .pd-media-img { transform: scale(1.04); }
.pd-media-scan {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.7), rgba(6,182,212,.7), transparent);
  animation: pdScan 3.5s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes pdScan {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: .7; }
  90%  { opacity: .7; }
  100% { top: 100%; opacity: 0; }
}
.pd-media-placeholder {
  text-align: center;
  padding: 3rem;
}
.pd-placeholder-logo {
  font-family: var(--rb-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: #7dd3fc;
  opacity: .45;
  letter-spacing: .08em;
}
.pd-placeholder-logo span { color: #3b82f6; }
.pd-placeholder-code {
  font-family: var(--rb-font-display);
  font-size: 1rem;
  color: #7dd3fc;
  opacity: .3;
  margin-top: .5rem;
  letter-spacing: .05em;
}

/* ── Spec Badges below image ── */
.pd-badge-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .6rem;
}
.pd-badge {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 10px;
  padding: .65rem .75rem;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: border-color .3s, background .3s;
}
.pd-badge:hover {
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.08);
}
.pd-badge-val {
  display: block;
  font-family: var(--rb-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1;
}
.pd-badge-unit {
  font-size: .7rem;
  font-weight: 500;
  color: #60a5fa;
  margin-left: .15em;
}
.pd-badge-lbl {
  display: block;
  font-size: .65rem;
  color: #64748b;
  margin-top: .3rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Info Column ── */
.pd-info-col { display: flex; flex-direction: column; gap: 1.5rem; padding-top: .5rem; }

.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.pd-breadcrumb a, .pd-breadcrumb span {
  font-size: .8rem;
  color: #475569;
  text-decoration: none;
  transition: color .2s;
}
.pd-breadcrumb a:hover { color: #60a5fa; }
.pd-breadcrumb svg { color: #334155; flex-shrink: 0; }
.pd-breadcrumb span { color: #64748b; }

.pd-code-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(29,78,216,.15);
  border: 1px solid rgba(59,130,246,.35);
  border-radius: 6px;
  padding: .3rem .75rem;
  font-family: var(--rb-font-display);
  font-size: .8rem;
  font-weight: 600;
  color: #60a5fa;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
}
.pd-code-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  animation: pdDotPulse 2s ease-in-out infinite;
}
@keyframes pdDotPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .35; }
}
.pd-heading {
  font-family: var(--rb-font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.02em;
}
.pd-lead {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.65;
  margin: 0;
  max-width: 520px;
}

/* ── Spec Rows ── */
.pd-specs {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.pd-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid rgba(59,130,246,.1);
  transition: background .2s;
  gap: 1rem;
}
.pd-spec-row:last-child { border-bottom: none; }
.pd-spec-row:hover { background: rgba(59,130,246,.06); }
.pd-spec-key {
  font-size: .82rem;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.pd-spec-val {
  font-family: var(--rb-font-display);
  font-size: .95rem;
  font-weight: 600;
  color: #cbd5e1;
  text-align: right;
}
.pd-spec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
}
.pd-mat-pill {
  display: inline-block;
  background: rgba(6,182,212,.12);
  border: 1px solid rgba(6,182,212,.3);
  color: #22d3ee;
  border-radius: 999px;
  padding: .15rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── CTA Row ── */
.pd-cta-row {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .5rem;
}
.pd-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.pd-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: #94a3b8;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.pd-cta-secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
  color: #e2e8f0;
}

/* ── Description + Usage Section ── */
.pd-body-section {
  background: #050d1f;
  padding: 5rem 0;
  border-top: 1px solid rgba(59,130,246,.1);
}
.pd-body-inner {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.pd-body-block { max-width: 860px; }
.pd-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1.5rem;
}
.pd-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  border-radius: 2px;
}
.pd-body-text {
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.8;
}
.pd-body-text p { margin: 0 0 1rem; }
.pd-body-text ul, .pd-body-text ol {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.pd-body-text li { margin-bottom: .4rem; }
.pd-body-text strong { color: #cbd5e1; }

/* ── Related Products Section ── */
.pd-related-section {
  background: #040a1c;
  padding: 5rem 0;
  border-top: 1px solid rgba(59,130,246,.1);
}
.pd-related-section .pd-section-eyebrow { margin-bottom: 2rem; }
.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.pd-related-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.pd-related-card:hover {
  border-color: rgba(59,130,246,.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(29,78,216,.2);
}
.pd-related-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.pd-related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.pd-related-card:hover .pd-related-img { transform: scale(1.07); }
.pd-related-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,10,28,.7) 0%, transparent 60%);
}
.pd-related-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rb-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #3b82f6;
  opacity: .4;
  background: rgba(29,78,216,.07);
}
.pd-related-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.pd-related-code {
  font-size: .72rem;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.pd-related-name {
  font-family: var(--rb-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.35;
}
.pd-related-desc {
  font-size: .82rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-related-arrow {
  margin-top: auto;
  padding-top: .75rem;
  color: #3b82f6;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s, transform .3s;
}
.pd-related-card:hover .pd-related-arrow { opacity: 1; transform: translateX(0); }

/* ── Final CTA Banner ── */
.pd-final-cta {
  position: relative;
  background: linear-gradient(135deg, #0a1628 0%, #040a1c 100%);
  padding: 5rem 0 6rem;
  overflow: hidden;
  border-top: 1px solid rgba(59,130,246,.15);
}
.pd-final-cta-glow {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,.2) 0%, transparent 70%);
  pointer-events: none;
}
.pd-final-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.pd-final-cta-text h2 {
  font-family: var(--rb-font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 .5rem;
}
.pd-final-cta-text p { color: #64748b; margin: 0; }
.pd-final-cta-actions { display: flex; gap: .85rem; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pd-hero { padding: 5rem 0 3rem; min-height: auto; }
  .pd-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .pd-media-frame { max-height: 300px; }
  .pd-heading { font-size: 1.7rem; }
  .pd-final-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .pd-hero { padding: 4rem 0 2.5rem; }
  .pd-badge-row { grid-template-columns: 1fr 1fr; }
  .pd-spec-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .pd-spec-val { text-align: left; }
  .pd-spec-pills { justify-content: flex-start; }
  .pd-cta-row { flex-direction: column; align-items: stretch; }
  .pd-cta-secondary { justify-content: center; }
  .pd-related-grid { grid-template-columns: 1fr; }
  .pd-body-section { padding: 3rem 0; }
  .pd-related-section { padding: 3rem 0; }
  .pd-final-cta { padding: 3rem 0 4rem; }
}

/* ════════════════════════════════════════════════════════════
   ULTRA-LUXURY LAYER 4 — MANYETİK BUTONLAR
   ════════════════════════════════════════════════════════════ */
.rb-magnetic {
  will-change: transform;
  display: inline-flex !important;
}
.rb-magnetic-inner {
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: transform .12s cubic-bezier(.2,1,.3,1);
}

/* ════════════════════════════════════════════════════════════
   CATEGORY DETAIL PAGE — cd-* classes
   ════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.cd-hero {
  position: relative;
  background: #040a1c;
  padding: 5.5rem 0 4rem;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(59,130,246,.12);
}
.cd-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(59,130,246,.15) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cd-hero-glow-l {
  position: absolute;
  top: -120px;
  left: -180px;
  width: 550px; height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,.18) 0%, transparent 65%);
  pointer-events: none;
}
.cd-hero-glow-r {
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.1) 0%, transparent 65%);
  pointer-events: none;
}
.cd-hero-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .06;
  pointer-events: none;
}
.cd-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
.cd-hero-left { flex: 1; }

.cd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .85rem;
}
.cd-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  animation: pdDotPulse 2s ease-in-out infinite;
}
.cd-heading {
  font-family: var(--rb-font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.18;
  margin: 0 0 1rem;
  letter-spacing: -.025em;
}
.cd-lead {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.65;
  margin: 0 0 1.5rem;
  max-width: 560px;
}
.cd-pitch-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(29,78,216,.12);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: #60a5fa;
  letter-spacing: .03em;
}

/* ── Hero Stats ── */
.cd-hero-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.cd-stat { text-align: center; }
.cd-stat-num {
  display: block;
  font-family: var(--rb-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1;
}
.cd-stat-unit {
  font-size: 1rem;
  color: #60a5fa;
  font-weight: 500;
}
.cd-stat-lbl {
  display: block;
  font-size: .7rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .3rem;
}
.cd-stat-sep {
  width: 1px;
  height: 40px;
  background: rgba(59,130,246,.2);
}

/* ── Description Bar ── */
.cd-desc-bar {
  background: #050d1f;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(59,130,246,.1);
}
.cd-desc-inner { max-width: 820px; }
.cd-desc-text {
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.8;
}
.cd-desc-text p { margin: 0 0 .75rem; }

/* ── Products Section ── */
.cd-products-section {
  background: #040a1c;
  padding: 4rem 0 5rem;
}
.cd-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}
.cd-prod-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color .35s, transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  cursor: pointer;
}
.cd-prod-card:hover {
  border-color: rgba(59,130,246,.55);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(29,78,216,.25);
}

/* Image */
.cd-prod-img-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.cd-prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.cd-prod-card:hover .cd-prod-img { transform: scale(1.07); }
.cd-prod-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,10,28,.75) 0%, rgba(4,10,28,.1) 55%, transparent 100%);
}
.cd-prod-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: rgba(29,78,216,.06);
}
.cd-prod-placeholder-logo {
  font-family: var(--rb-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #3b82f6;
  opacity: .4;
  letter-spacing: .06em;
}
.cd-prod-placeholder-logo em { color: #60a5fa; font-style: normal; }
.cd-prod-placeholder-code {
  font-size: .8rem;
  color: #475569;
  letter-spacing: .05em;
}
.cd-prod-hover-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 44px; height: 44px;
  background: rgba(29,78,216,.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(8px);
}
.cd-prod-card:hover .cd-prod-hover-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Body */
.cd-prod-body {
  padding: 1.2rem 1.35rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}
.cd-prod-code {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cd-prod-code-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
}
.cd-prod-name {
  font-family: var(--rb-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.35;
}
.cd-prod-desc {
  font-size: .85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-prod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .2rem;
}
.cd-chip {
  display: inline-block;
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.cd-chip--blue  { background: rgba(59,130,246,.1);  border-color: rgba(59,130,246,.25);  color: #60a5fa; }
.cd-chip--cyan  { background: rgba(6,182,212,.1);   border-color: rgba(6,182,212,.25);   color: #22d3ee; }
.cd-chip--slate { background: rgba(100,116,139,.1); border-color: rgba(100,116,139,.25); color: #94a3b8; }
.cd-chip--teal  { background: rgba(20,184,166,.1);  border-color: rgba(20,184,166,.25);  color: #2dd4bf; }

/* Footer */
.cd-prod-footer {
  padding: .85rem 1.35rem 1.1rem;
  border-top: 1px solid rgba(59,130,246,.1);
}
.cd-prod-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: #3b82f6;
  transition: gap .3s, color .3s;
}
.cd-prod-card:hover .cd-prod-cta { gap: .7rem; color: #60a5fa; }

/* Empty state */
.cd-empty {
  text-align: center;
  padding: 5rem 1rem;
  color: #334155;
}
.cd-empty svg { display: block; margin: 0 auto 1rem; }
.cd-empty p { font-size: 1rem; }

/* ── Category Nav ── */
.cd-cat-nav {
  background: #050d1f;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(59,130,246,.1);
  border-bottom: 1px solid rgba(59,130,246,.1);
}
.cd-cat-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cd-cat-nav-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.cd-cat-nav-back:hover { color: #60a5fa; gap: .75rem; }
.cd-cat-nav-label {
  font-size: .82rem;
  color: #334155;
  font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cd-hero { padding: 4.5rem 0 3rem; min-height: auto; }
  .cd-hero-inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .cd-hero-stats { width: 100%; justify-content: space-around; padding: 1.5rem 1.25rem; }
}
@media (max-width: 600px) {
  .cd-hero { padding: 4rem 0 2.5rem; }
  .cd-heading { font-size: 1.75rem; }
  .cd-product-grid { grid-template-columns: 1fr; }
  .cd-hero-stats { gap: 1.5rem; }
  .cd-cat-nav-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}


/* ── HERO — Light mode (mobile viewport fix) ── */
@media (max-width: 768px) {
  body.light-mode .hero-content {
    background: #e8f0fe !important;
  }
  body.light-mode .hero-content h1,
  body.light-mode .hero-content .hero-eyebrow { color: #0f172a !important; }
  body.light-mode .hero-content h1 .accent   { color: #1d4ed8 !important; }
  body.light-mode .hero-content p.lead        { color: #374151 !important; }
  body.light-mode .hero-content .dot          { background: #1d4ed8 !important; box-shadow: none !important; }

  body.light-mode .hero-stats {
    background: #dbeafe !important;
    border-top: 1px solid rgba(29,78,216,.2) !important;
  }
  body.light-mode .hero-stat {
    border-right-color: rgba(29,78,216,.15) !important;
    border-bottom-color: rgba(29,78,216,.15) !important;
  }
  body.light-mode .hero-stat .num {
    background: none !important;
    -webkit-text-fill-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
  }
  body.light-mode .hero-stat .label {
    color: #374151 !important;
  }
}