/* =========================================================================
   CRONOC TASARIM SİSTEMİ
   -------------------------------------------------------------------------
   Bu dosya tema CSS'inden (templatemo-chain-app-dev.css) SONRA yüklenir.
   Yeni sayfa/bölüm yazarken inline style yerine buradaki bileşenleri kullanın.
   Renk, yazı ve boşluk değerleri yalnızca :root içindeki değişkenlerden gelir;
   sitenin görünümünü değiştirmek için önce buradaki değişkenleri düzenleyin.

   İçindekiler
     1. Değişkenler (renk, yazı, boşluk, köşe, gölge)
     2. Global (sayfa zemini, header, menü)
     3. Yerleşim (section, hero, split)
     4. Tipografi
     5. Butonlar ve linkler
     6. Kartlar ve kutular
     7. Bileşenler (CTA bandı, adımlar, listeler, rozetler)
     8. Sayfaya özel bölümler (Hakkımızda, İYS, KVKK, Entegrasyonlar, Ürünler)
     9. Görsel yenileme (tema bileşenlerinin koyu tema uyarlaması)
   ========================================================================= */


/* 1. DEĞİŞKENLER ========================================================= */

:root {
  /* Marka mavileri (açıktan koyuya) */
  --c-blue-400: #60a5fa;             /* koyu zemin üzerinde vurgu metni */
  --c-blue-500: #3b82f6;             /* birincil buton / dolgu */
  --c-blue-600: #2563eb;             /* hover / degrade sonu */
  --c-blue-400-rgb: 96, 165, 250;
  --c-blue-500-rgb: 59, 130, 246;
  --c-blue-600-rgb: 37, 99, 235;

  /* Lacivert zeminler */
  --c-navy-950: #0b1121;
  --c-navy-900: #0f172a;
  --c-navy-800: #1e293b;
  --c-navy-800-rgb: 30, 41, 59;

  /* Nötrler */
  --c-white: #ffffff;
  --c-slate-50: #f8fafc;
  --c-slate-200: #e2e8f0;
  --c-slate-300: #cbd5e1;
  --c-slate-400: #94a3b8;
  --c-slate-500: #64748b;
  --c-slate-600: #475569;
  --c-gray-500: #6b7280;
  --c-ink: #0f1724;

  /* Durum ve vurgu renkleri */
  --c-success: #10b981;
  --c-success-rgb: 16, 185, 129;
  --c-danger: #ef4444;
  --c-gold: #ffd700;

  /* Sabit (temadan bağımsız) */
  --c-primary: var(--c-blue-600);    /* beyaz yazıyla 5.2:1 kontrast (WCAG AA) */
  --c-primary-strong: #1d4ed8;
  --c-glass-blur: blur(12px);

  /* Yazı */
  --font-base: 'Roboto', sans-serif;
  --fs-display-xl: 54px;
  --fs-display: 48px;
  --fs-h2-lg: 40px;
  --fs-h2: 36px;
  --fs-h2-sm: 32px;
  --fs-h3-lg: 28px;
  --fs-h3: 22px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-lead-lg: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 12px;
  --fw-bold: 700;
  --fw-heavy: 800;
  --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);

  /* Köşe yarıçapları */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 15px;
  --r-xl: 20px;
  --r-pill: 50px;

  /* Gölgeler (temadan bağımsız olanlar) */
  --shadow-primary: 0 4px 15px rgba(var(--c-blue-500-rgb), 0.4);
  --shadow-cta: 0 15px 40px rgba(var(--c-blue-600-rgb), 0.2);

  /* Boşluklar */
  --section-y: 100px;
  --section-y-sm: 80px;
  --hero-top: 180px;
  --container-narrow: 800px;
  --container-mid: 1100px;
  --gutter: 20px;
}


/* TEMA DEĞİŞKENLERİ =======================================================
   Bileşenler yalnızca bu anlamsal değişkenleri kullanır.
   - :root                 -> açık tema (varsayılan)
   - [data-theme="dark"]   -> koyu mod (header'daki anahtarla seçilir)
   - .c-dark-band grubu    -> açık temada da koyu kalan bölgeler
                              (header, hero'lar, footer, CTA bantları)
   ========================================================================= */

:root {
  color-scheme: light;

  --c-page-bg: #f8fafc;
  --c-page-bg-alt: #eef2f7;          /* bölüm ritmi için alternatif zemin */

  --c-blue-450: var(--c-blue-600);   /* eski tema mavisi: açık zeminde koyu ton */
  --c-blue-450-rgb: var(--c-blue-600-rgb);
  --c-accent: #1d4ed8;               /* metin içi vurgu (beyazda 6.7:1, açık mavi zeminlerde de AA) */

  --c-heading: #0f172a;
  --c-text-strong: #1e293b;
  --c-text: #334155;
  --c-text-muted: #475569;
  --c-text-subtle: #64748b;

  --c-surface: #ffffff;              /* kart zemini */
  --c-surface-float: #ffffff;        /* hero üstündeki küçük kartlar */
  --c-surface-soft: #f8fafc;         /* input, iç kutu */
  --c-surface-faint: #f8fafc;        /* görsel çerçevesi */
  --c-surface-solid: #ffffff;        /* opak kart rengi (yüzen etiket zemini) */
  --c-surface-deep: #f8fafc;         /* kart içindeki koyu/açık ikinci yüzey */
  --c-glass-bg: #ffffff;
  --c-glass-border: #e2e8f0;
  --c-glass-border-soft: #e2e8f0;
  --c-divider: #e2e8f0;
  --c-success-text: #047857;         /* beyaz zeminde 5.5:1 */

  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.07);
  --shadow-card-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
  --text-shadow: none;
  --text-shadow-sm: none;
}

[data-theme="dark"],
.c-dark-band,
.header-area,
.main-banner,
.web-hero,
.mobile-hero,
.iys-hero,
.c-hero,
.contact-hero,
.faq-hero,
.ref-hero,
footer,
.c-cta-band,
.cta-section .cta-content,
.web-cta .cta-inner,
.mobile-cta,
.mobile-tech-stack,
.iys-page .contact-info-side,
.c-products-cta {
  --c-page-bg: var(--c-navy-950);
  --c-page-bg-alt: transparent;

  --c-blue-450: var(--c-blue-500);
  --c-blue-450-rgb: var(--c-blue-500-rgb);
  --c-accent: var(--c-blue-400);

  --c-heading: var(--c-white);
  --c-text-strong: var(--c-slate-50);
  --c-text: var(--c-slate-200);
  --c-text-muted: var(--c-slate-300);
  --c-text-subtle: var(--c-slate-400);

  --c-surface: rgba(var(--c-navy-800-rgb), 0.55);
  --c-surface-float: rgba(var(--c-navy-800-rgb), 0.85);
  --c-surface-soft: rgba(255, 255, 255, 0.05);
  --c-surface-faint: rgba(255, 255, 255, 0.02);
  --c-surface-solid: rgb(21, 30, 47);
  --c-surface-deep: rgba(15, 23, 42, 0.9);
  --c-glass-bg: rgba(var(--c-navy-800-rgb), 0.7);
  --c-glass-border: rgba(255, 255, 255, 0.15);
  --c-glass-border-soft: rgba(255, 255, 255, 0.1);
  --c-divider: rgba(255, 255, 255, 0.06);
  --c-success-text: var(--c-success);

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-card-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
  --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] { color-scheme: dark; }


/* 2. GLOBAL ============================================================== */

/* Sayfa zemini temaya göre gelir. Tema bölümlerinin kendi zeminleri
   aşağıdaki kuralla şeffaf yapılır; zemini sayfa, koyu bantlar ve
   alternatif bölümler (bkz. "Bölüm zeminleri") belirler. */
html, body {
  background: var(--c-page-bg) !important;
}

body {
  color: var(--c-text);
  transition: background-color 0.2s ease;
}

section,
footer,
.main-banner,
.services,
.about-us,
.the-clients,
.pricing-tables,
.free-quote,
.contact-section,
.faq-section,
.ref-section,
#modern-products,
.modern-features-section,
.process-section,
.cta-section,
.contact-hero,
.faq-hero,
.ref-hero,
.web-hero,
.mobile-hero,
.iys-hero {
  background: transparent !important;
  background-image: none !important;
}

/* Bölüm zeminleri ------------------------------------------------------- */

/* Koyu bantlar: açık temada da lacivert kalır, üstte hafif mavi ışıma */
body .main-banner,
body .web-hero,
body .mobile-hero,
body .iys-hero,
body .c-hero,
body .contact-hero,
body .faq-hero,
body .ref-hero,
body .mobile-tech-stack {
  background-color: var(--c-navy-950) !important;
  background-image:
    radial-gradient(1000px 500px at 10% -20%, rgba(var(--c-blue-500-rgb), 0.22), transparent 60%),
    radial-gradient(800px 400px at 100% 0%, rgba(var(--c-blue-400-rgb), 0.10), transparent 60%) !important;
  color: var(--c-text);
}

/* Sabit (absolute) header'ın altında kalan boşluk için hero'suz sayfalar */
body footer {
  background-color: var(--c-navy-950) !important;
}

/* Açık temada bölüm ritmi: bazı bölümler hafif gri zemin alır */
body section.c-section--navy-alt,
body #modern-products,
body .process-section,
body .tech-specs-section,
body .easy-permission-section,
body .iys-contact-section,
body .c-section--band {
  background-color: var(--c-page-bg-alt) !important;
}

/* Header logosu */
.header-area .main-nav .logo img {
  width: 160px !important;
  max-width: none !important;
  height: auto !important;
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo img {
    width: 160px !important;
    margin-top: 5px !important;
  }
}

/* Açılır menü */
.nav .dropdown {
  position: relative;
}

.nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #111;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 400px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: c-fade-down 0.2s ease;
}

.nav .dropdown-menu li a {
  display: block;
  color: var(--c-white);
  text-decoration: none;
  transition: background 0.2s ease;
  line-height: 1.6;
  font-size: var(--fs-small);
}

.nav .dropdown-menu li a:hover {
  background-color: #333;
}

.nav .dropdown:hover .dropdown-menu {
  display: block;
}

@keyframes c-fade-down {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Menüdeki "İzin Sistemi" butonu */
.btn-futuristic-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 30px;
  background: rgba(var(--c-blue-500-rgb), 0.2);
  border: 1px solid var(--c-blue-400);
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgb(96 165 250);
}

.btn-futuristic-nav:hover {
  background: var(--c-blue-500);
  color: var(--c-white);
  box-shadow: 0 0 30px rgba(var(--c-blue-500-rgb), 0.8);
  border-color: var(--c-blue-500);
  transform: translateY(-2px);
}

/* "Bizi Tercih Edenler" gibi iki renkli başlıklar */
.section-title {
  color: var(--c-heading) !important;
}

.section-title em {
  font-style: normal !important;
  color: var(--c-blue-450) !important;
}

/* Footer e-bülten formu */
.c-subscribe {
  width: 100%;
  max-width: 450px;
  margin: 0 auto 20px auto;
}

.c-subscribe .form-control {
  height: 46px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.c-subscribe .btn {
  height: 46px;
  padding: 0 20px;
  font-weight: 600;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.c-form-msg {
  display: none;
  margin: 10px 0;
  font-weight: 600;
  text-align: center;
}

.c-form-msg--success { color: #4ade80; }
.c-form-msg--error   { color: #fca5a5; }


/* 3. YERLEŞİM ============================================================ */

/* Standart bölüm boşluğu */
.c-section {
  padding: var(--section-y) 0;
}

.c-section--sm {
  padding: var(--section-y-sm) 0;
}

.c-section--lg {
  padding: 120px 0;
}

.c-section--md {
  padding: 90px 0;
}

.c-section--cta {
  padding: 60px 0;
}

.c-section--cta-tight {
  padding: 20px 0 var(--section-y);
}

.c-section--cta-flush {
  padding: 40px 0 var(--section-y);
}

.c-section--center { text-align: center; }

/* Hafif koyu şerit (üst/alt çizgili) */
.c-section--band {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
}

/* Bölüm zeminleri (şu an global degrade tarafından eziliyor, bkz. bölüm 2) */
.c-section--navy     { background: var(--c-navy-900); }
.c-section--navy-alt { background: var(--c-navy-950); }

/* Sayfa üst alanı (hero) */
.c-hero {
  padding: var(--hero-top) 0 var(--section-y);
  position: relative;
  overflow: hidden;
}

.c-hero--center {
  text-align: center;
}

/* Hero'daki noktalı ızgara deseni */
.c-dot-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(var(--c-blue-500-rgb), var(--dot-alpha, 0.1)) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 0;
}

.c-dot-grid--strong {
  --dot-alpha: 0.15;
}

/* Desenin üstünde kalan içerik */
.c-layer {
  position: relative;
  z-index: 2;
}

/* Dar ve orta genişlikte içerik kutuları */
.c-narrow {
  max-width: var(--container-narrow);
  margin: auto;
  padding: 0 var(--gutter);
}

.c-wrap {
  max-width: var(--container-mid);
  margin: auto;
  padding: 0 var(--gutter);
}

/* İki sütunlu esnek yerleşim (metin + görsel) */
.c-split {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
}

.c-split--gap-md { gap: 50px; }
.c-split--gap-sm { gap: 40px; }
.c-split--top    { align-items: stretch; }

.c-split__col {
  flex: 1;
  min-width: 300px;
}

.c-split__col--sm {
  min-width: 280px;
}

/* Kart ızgarası */
.c-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 35px;
}

.c-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c-stack--sm { gap: 15px; }


/* 4. TİPOGRAFİ =========================================================== */

/* Hero başlığı */
.c-display {
  color: var(--c-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  margin-bottom: 20px;
  text-shadow: var(--text-shadow);
}

.c-display--xl {
  font-size: var(--fs-display-xl);
}

/* Bölüm başlıkları */
.c-h2 {
  color: var(--c-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
  margin-bottom: 20px;
}

.c-h2--lg { font-size: var(--fs-h2-lg); }
.c-h2--sm { font-size: var(--fs-h2-sm); }

.c-h2--shadow { text-shadow: var(--text-shadow); }

.c-h2--center {
  text-align: center;
  margin-bottom: 60px;
}

/* Ortalanmış bölüm başlığı + alt yazı */
.c-heading {
  text-align: center;
  margin-bottom: 60px;
}

.c-heading--lg { margin-bottom: 70px; }

.c-heading__title {
  color: var(--c-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
  text-shadow: var(--text-shadow);
}

.c-heading__sub {
  color: var(--c-text-strong);
  margin-top: 15px;
  font-size: var(--fs-body);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Başlık içindeki mavi vurgu kelime (<em> ya da <span>) */
.c-accent {
  color: var(--c-accent);
  font-style: normal;
}

/* CTA bantlarındaki sarı vurgu */
.c-highlight {
  color: var(--c-gold);
}

/* Giriş paragrafı (hero altı) */
.c-lead {
  color: var(--c-text-strong);
  font-size: var(--fs-lead);
  margin-bottom: 35px;
  line-height: 1.6;
  text-shadow: var(--text-shadow-sm);
}

.c-lead--lg {
  font-size: var(--fs-lead-lg);
  color: var(--c-text);
  margin-bottom: 0;
  text-shadow: none;
}

/* Gövde metni */
.c-body {
  color: var(--c-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.c-body--loose { line-height: 1.8; }

/* Açık renkli kısa açıklama metni */
.c-text-strong {
  color: var(--c-text-strong);
  font-size: var(--fs-body);
}

.c-body + .c-body { margin-top: 15px; }

/* Küçük üst başlık (ör. "Uyum Sağladığımız Global Standartlar") */
.c-overline {
  color: var(--c-text-subtle);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 40px;
  text-transform: uppercase;
}


/* 5. BUTONLAR VE LİNKLER ================================================= */

/* Bootstrap/tema .btn sınıfıyla birlikte de, tek başına da kullanılabilir.
   Tema global bir `a.btn` ve `.btn:hover` tanımladığı için varyantlar
   `.c-btn.c-btn--x` biçiminde (iki sınıf) yazılmıştır. */
.c-btn {
  display: inline-block;
  padding: 15px 35px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: all 0.3s ease;
}

.c-btn:hover,
.c-btn:focus { text-decoration: none; }

.c-btn i { margin-left: 5px; }

.c-btn.c-btn--primary,
.c-btn.c-btn--primary:focus {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--shadow-primary);
}

.c-btn.c-btn--primary:hover {
  background: var(--c-primary-strong);
  color: var(--c-white);
}

.c-btn.c-btn--light,
.c-btn.c-btn--light:focus {
  background: var(--c-white);
  color: var(--c-primary-strong);
}

.c-btn.c-btn--light:hover {
  background: var(--c-white);
  color: var(--c-primary-strong);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.c-btn.c-btn--outline,
.c-btn.c-btn--outline:focus {
  background: transparent;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  padding: 12px 30px;
  border-radius: 30px;
}

.c-btn.c-btn--outline:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-page-bg);
}

/* Küçük, köşeli buton (ürün kartları) */
.c-btn.c-btn--sm {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: inherit;
}

.c-btn.c-btn--ghost,
.c-btn.c-btn--ghost:hover {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: var(--c-ink);
}

.c-btn.c-btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }

.c-btn.c-btn--solid,
.c-btn.c-btn--solid:hover {
  background: var(--c-primary-strong);
  color: var(--c-white);
}

/* Ok işaretli metin linki */
.c-link-arrow {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

.c-link-arrow:hover { color: var(--c-white); }


/* 6. KARTLAR VE KUTULAR ================================================== */

/* Cam efektli kart: sitenin ana kart stili */
.c-card {
  background: var(--c-glass-bg);
  backdrop-filter: var(--c-glass-blur);
  border: 1px solid var(--c-glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 30px;
  height: 100%;
  transition: 0.3s;
}

.c-card:hover {
  transform: translateY(-10px);
}

.c-card--static:hover { transform: none; }

.c-card--featured {
  border-color: rgba(var(--c-blue-400-rgb), 0.4);
  box-shadow: 0 10px 30px rgba(var(--c-blue-500-rgb), 0.15);
}

.c-card--center { text-align: center; }

.c-card--roomy { padding: 40px; }

.c-card--soft-border { border-color: var(--c-glass-border-soft); }

.c-card__title {
  color: var(--c-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-bottom: 15px;
}

.c-card__text {
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-bottom: 25px;
}

.c-card__text--md {
  font-size: 15px;
  margin-bottom: 20px;
}

.c-card__text--lg {
  font-size: var(--fs-body);
  line-height: 1.8;
  margin-bottom: 0;
}

/* Büyük, mavi, ikonlu kart başlığı (Misyon / Vizyon) */
.c-card__heading {
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-heavy);
  color: var(--c-accent);
  margin-bottom: 20px;
}

.c-card__heading i { margin-right: 10px; }

/* Kart üstündeki ikon karesi */
.c-icon-tile {
  width: 60px;
  height: 60px;
  background: rgba(var(--c-blue-500-rgb), 0.2);
  color: var(--c-accent);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.c-icon-tile--lg {
  width: 70px;
  height: 70px;
  border-radius: var(--r-lg);
  font-size: 30px;
}

.c-icon-tile--solid {
  background: var(--c-primary);
  color: var(--c-white);
}

/* Görsel çerçevesi */
.c-frame {
  background: var(--c-surface-faint);
  padding: 20px;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-divider);
}

.c-frame--glass {
  background: var(--c-surface);
  border-color: var(--c-glass-border-soft);
  box-shadow: var(--shadow-card);
}

.c-frame img {
  max-width: 100%;
  border-radius: var(--r-md);
}

.c-img-fluid { max-width: 100%; }


/* 7. BİLEŞENLER ========================================================== */

/* Etiket / rozet (hero üstündeki küçük hap) */
.c-eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-accent);
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid rgba(var(--c-blue-400-rgb), 0.5);
  font-weight: var(--fw-bold);
  font-size: 13px;
  display: inline-block;
  margin-bottom: 20px;
}

.c-eyebrow i { margin-right: 5px; }

/* Mavi degrade çağrı bandı (sayfa sonu CTA) */
.c-cta-band {
  background: linear-gradient(90deg, var(--c-blue-600) 0%, var(--c-primary-strong) 100%);
  border-radius: var(--r-xl);
  padding: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: var(--shadow-cta);
  text-align: center;
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}

/* Çapraz çizgili süsleme deseni */
.c-cta-band::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--c-surface-faint) 10px, var(--c-surface-faint) 20px);
  z-index: 0;
}

.c-cta-band > * {
  position: relative;
  z-index: 2;
}

/* Köşede duran büyük silik ikon (İYS CTA) */
.c-cta-band > .icon-big {
  position: absolute;
  z-index: auto;
}

.c-cta-band--center {
  display: block;
  text-align: center;
}

.c-cta-band__text { max-width: 70%; }

.c-cta-band__title {
  color: var(--c-white);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-heavy);
  margin-bottom: 10px;
}

.c-cta-band--center .c-cta-band__title { margin-bottom: 15px; }

.c-cta-band__text p,
.c-cta-band__desc {
  color: var(--c-text-strong);
  font-size: var(--fs-body);
  margin: 0;
  line-height: 1.6;
}

.c-cta-band--center .c-cta-band__desc {
  max-width: 700px;
  margin: 0 auto 30px;
  line-height: 30px;
}

.c-cta-band__action { margin-top: 15px; }

.c-cta-band__icon {
  font-size: 40px;
  color: var(--c-gold);
}

/* Numaralı adım kutusu */
.c-step {
  background: var(--c-glass-bg);
  border-left: 4px solid var(--c-primary);
  padding: 25px;
  border-radius: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.c-step__num {
  font-size: 40px;
  color: rgba(var(--c-blue-400-rgb), 0.3);
  font-weight: 900;
}

.c-step__title {
  color: var(--c-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  margin-bottom: 5px;
}

.c-step__text {
  color: var(--c-text);
  margin: 0;
  font-size: var(--fs-small);
}

/* Yatay özellik kartı (ikon + metin) */
.c-feature {
  background: var(--c-glass-bg);
  backdrop-filter: var(--c-glass-blur);
  padding: 35px;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-glass-border-soft);
  box-shadow: var(--shadow-card-soft);
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.c-feature__icon {
  background: rgba(var(--c-blue-400-rgb), 0.15);
  padding: 15px;
  border-radius: var(--r-md);
}

.c-feature__icon img {
  width: 65px;
  opacity: 0.9;
}

.c-feature__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 12px;
}

.c-feature__text {
  font-size: var(--fs-body);
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Standart / sertifika rozeti */
.c-chips {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.c-chip {
  background: var(--c-surface);
  padding: 15px 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-glass-border);
}

.c-chip__title {
  color: var(--c-heading);
  margin: 0;
  font-size: 24px;
}

.c-chip__sub {
  font-size: var(--fs-xs);
  color: var(--c-accent);
}

/* Onay işaretli liste */
.c-check-list {
  list-style: none;
  padding: 0;
}

.c-check-list li { margin-bottom: 10px; }

.c-check-list li i {
  color: var(--c-success);
  margin-right: 10px;
}

/* Beyaz teknoloji hapı (RESTful API vb.) */
.c-pill-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 250px;
}

.c-pill {
  background: var(--c-white);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  color: var(--c-navy-800);
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

/* Mavi çerçeveli bilgi satırı (ikon + başlık + metin) */
.c-spec {
  background: rgba(var(--c-blue-500-rgb), 0.15);
  border: 1px solid rgba(var(--c-blue-400-rgb), 0.4);
  border-radius: var(--r-md);
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 0 20px rgba(var(--c-blue-500-rgb), 0.2);
  transition: 0.3s;
}

.c-spec:hover { transform: translateX(10px); }

.c-spec__icon {
  background: var(--c-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  font-size: 20px;
  flex-shrink: 0;
}

.c-spec__title {
  color: var(--c-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  margin-bottom: 5px;
}

.c-spec__text {
  color: var(--c-text);
  margin: 0;
  font-size: var(--fs-small);
}

/* Hero görselinin üstünde yüzen küçük cam kart */
.c-float-card {
  background: var(--c-surface-float);
  backdrop-filter: blur(10px);
  padding: 15px 25px;
  border-radius: var(--r-md);
  color: var(--c-white);
  border: 1px solid var(--c-glass-border);
  font-weight: 600;
  z-index: 3;
}

.c-float-card i {
  color: var(--c-accent);
  margin-right: 8px;
}

.c-float-card--ok i { color: var(--c-success); }

.c-float-card.card-1 { top: 5%; left: -20px; }
.c-float-card.card-2 { bottom: 10%; right: -10px; }

.c-hero-media {
  position: relative;
  z-index: 2;
}

.c-hero-media img {
  max-width: 100%;
  border-radius: var(--r-xl);
}


/* 8. SAYFAYA ÖZEL BÖLÜMLER =============================================== */

/* --- Tema ile ortak kullanılan hero ve başlıklar ---
   Tema `.web-hero h1`, `.section-heading h4` gibi daha özgül seçiciler kullandığı
   için tasarım sistemi sınıfları bu kapsamlarda iki sınıfla yeniden yazılır. */
.web-hero .c-display {
  color: var(--c-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: 1.2;
  margin-bottom: 20px;
}

.web-hero .c-accent {
  color: var(--c-accent);
}

.web-hero .c-lead {
  color: var(--c-text-strong);
  font-size: var(--fs-lead);
  margin-bottom: 35px;
}

.section-heading .c-heading__title {
  color: var(--c-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
}

.section-heading .c-accent {
  color: var(--c-accent);
}

/* Koyu zemin üzerindeki beyaz bölüm açıklaması */
.section-heading .c-on-dark {
  color: var(--c-text-muted);
}

.section-heading .c-heading__sub {
  color: var(--c-text-strong);
  font-size: var(--fs-body);
  margin-top: 15px;
}

/* --- SSS sayfası --- */
.faq-hero .c-faq-title {
  color: #2a2a2a;
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h2-lg);
}

.faq-hero .c-faq-sub {
  color: #666;
  font-size: var(--fs-lead);
  margin-top: 15px;
}

.c-faq-section {
  background-color: #f4f7fa;
  padding-bottom: var(--section-y);
}

/* --- Hakkımızda: sayaçlar --- */
.counter-section {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background: var(--c-navy-950);
  color: var(--c-white);
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
}

.counter-bg {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(var(--c-blue-500-rgb), 0.1) 40%, transparent 70%);
  filter: blur(70px);
  animation: c-float-bg 6s ease-in-out infinite alternate;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

@keyframes c-float-bg {
  0%   { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(40px); }
}

.counter-container {
  position: relative;
  z-index: 2;
  max-width: var(--container-mid);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 40px;
  padding: 0 var(--gutter);
}

.counter-box {
  text-align: center;
  min-width: 230px;
  animation: c-slide-in-left 1s ease-out forwards;
  opacity: 0;
}

.counter-box:nth-child(1) { animation-delay: 0.1s; }
.counter-box:nth-child(2) { animation-delay: 0.25s; }
.counter-box:nth-child(3) { animation-delay: 0.4s; }
.counter-box:nth-child(4) { animation-delay: 0.55s; }

.counter-box h2 {
  font-size: 56px;
  font-weight: var(--fw-heavy);
  margin-bottom: 10px;
  color: var(--c-accent);
  text-shadow: 0 0 15px rgba(var(--c-blue-400-rgb), 0.5);
}

.counter-box p {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--c-text-muted);
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes c-slide-in-left {
  0%   { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Soldan / sağdan kayarak gelen bloklar */
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: all 0.9s ease-out;
}

.reveal-left  { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }

.reveal-active {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right,
  .counter-box {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* --- İYS sayfası --- */
.iys-page .blue-text { color: var(--c-accent); font-style: normal; }

.iys-page .iys-hero h1,
.iys-page .iys-info-grid-section h3,
.iys-page .integration-flow h2,
.iys-page .iys-via-section h2,
.iys-page .permission-text-content h2,
.iys-page .legislation-grid-section h4,
.iys-page .form-header h4,
.iys-page .content-box h3 {
  color: var(--c-heading);
  text-shadow: var(--text-shadow);
}

.iys-page .iys-hero p,
.iys-page .info-block p,
.iys-page .integration-flow p,
.iys-page .via-content p,
.iys-page .permission-feature-list span,
.iys-page .legislation-grid-section p,
.iys-page .content-box p,
.iys-page .form-header p {
  color: var(--c-text);
  line-height: 1.7;
}

/* Cam kutular */
.iys-page .info-grid-card,
.iys-page .via-info-box,
.iys-page .legis-card,
.iys-page .dashboard-card,
.iys-page .device-mockup,
.iys-page .contact-form-side {
  background: var(--c-glass-bg);
  backdrop-filter: var(--c-glass-blur);
  border: 1px solid var(--c-glass-border);
  box-shadow: var(--shadow-card);
  color: var(--c-white);
  border-radius: var(--r-lg);
}

/* Not: .info-grid-card "wow" animasyonu taşıdığı için eski inline padding'i
   hiç uygulanmıyordu; temanın 40px değeri geçerli, o yüzden burada yok. */
.iys-page .legis-card,
.iys-page .dashboard-card { padding: 30px; }

.iys-page .legis-card { text-align: center; }
.iys-page .via-info-box { padding: 25px; }

.iys-page .device-mockup {
  padding: 20px;
  border-radius: var(--r-xl);
  text-align: center;
}

.iys-page .info-grid-card h5,
.iys-page .legis-card h5,
.iys-page .via-info-box h5,
.iys-page .via-capabilities h5 {
  color: var(--c-heading);
  font-weight: var(--fw-bold);
  margin-bottom: 10px;
}

.iys-page .via-info-box h5,
.iys-page .via-capabilities h5 { font-size: var(--fs-h5); }
.iys-page .via-capabilities h5 { margin-bottom: 15px; }

.iys-page .info-grid-card p,
.iys-page .legis-card p,
.iys-page .via-info-box p,
.iys-page .via-list li { color: var(--c-text-muted); }

.iys-page .info-grid-card p { font-size: var(--fs-small); margin: 0; }
.iys-page .legis-card p     { font-size: 13px; }
.iys-page .via-info-box p   { font-size: 15px; margin: 0; }

.iys-page .grid-icon,
.iys-page .legis-icon {
  color: var(--c-accent);
  font-size: 30px;
}

/* Tema başlık boyutlarını daha özgül seçicilerle verdiği için burada eziliyor */
.iys-page .iys-hero h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
}

.iys-page .via-content h2 { font-size: var(--fs-h2); }
.iys-page .permission-text-content h2 { font-size: var(--fs-h2-sm); }

.iys-page .legislation-grid-section h4 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
}

.iys-page .content-box {
  backdrop-filter: var(--c-glass-blur);
  border-radius: var(--r-lg);
}

.iys-page .iys-hero p {
  font-size: var(--fs-lead);
  margin-bottom: 35px;
}

.iys-page .via-content .subtitle {
  font-size: var(--fs-lead);
  margin-bottom: 30px;
}

.iys-page .legislation-grid-section .section-heading p {
  margin-top: 15px;
  font-size: var(--fs-body);
}

.iys-page .info-block h3 {
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-bold);
  margin-bottom: 15px;
}

/* Hero ikonu */
.iys-page .iys-visual__orb {
  background: var(--c-surface);
  padding: 40px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(var(--c-blue-400-rgb), 0.3);
  box-shadow: 0 0 40px rgba(var(--c-blue-500-rgb), 0.2);
}

.iys-page .iys-visual__orb i,
.iys-page .device-mockup > i { color: var(--c-accent); }

.iys-page .device-mockup > i { margin-bottom: 20px; }
.iys-page .device-mockup h4  { color: var(--c-heading); font-weight: bold; }
.iys-page .device-mockup p   { color: var(--c-text-muted); font-size: var(--fs-small); }

/* Akış diyagramı */
.iys-page .flow-list { list-style: none; padding: 0; }
.iys-page .flow-list li { color: var(--c-text); margin-bottom: 15px; }
.iys-page .flow-list li i { color: var(--c-accent); margin-right: 10px; }

.iys-page .flow-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface-faint);
  padding: 40px;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-divider);
}

.iys-page .flow-box {
  background: var(--c-surface);
  color: var(--c-heading);
  border: 1px solid var(--c-accent);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.iys-page .flow-box.cronoc {
  background: var(--c-primary);
  color: var(--c-white);
  border: none;
  box-shadow: 0 0 20px rgba(var(--c-blue-500-rgb), 0.4);
  transform: scale(1.05);
  padding: 25px 20px;
  font-weight: bold;
}

.iys-page .flow-arrow { font-size: 24px; }
.iys-page .flow-arrow i { color: var(--c-accent); }

/* Panel özeti */
.iys-page .dashboard-card h4 {
  color: var(--c-heading);
  border-bottom: 1px solid var(--c-glass-border-soft);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.iys-page .dash-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.iys-page .dash-stats small { color: var(--c-text-subtle); display: block; }
.iys-page .dash-stats strong { font-size: 24px; }
.iys-page .dash-stats .is-ok  { color: var(--c-success-text); }
.iys-page .dash-stats .is-bad { color: var(--c-danger); }

.iys-page .dash-status {
  background: rgba(var(--c-success-rgb), 0.1);
  color: var(--c-success-text);
  padding: 10px;
  border-radius: var(--r-sm);
  text-align: center;
  font-weight: bold;
}

/* İzin yönetimi listesi */
.iys-page .permission-feature-list { list-style: none; padding: 0; }
.iys-page .permission-feature-list li { display: flex; align-items: flex-start; margin-bottom: 20px; }
.iys-page .permission-feature-list li i { color: var(--c-accent); font-size: 20px; margin-right: 15px; margin-top: 5px; }

/* Rozetler ve butonlar */
.iys-page .badge-legal,
.iys-page .via-badge {
  display: inline-block;
  background: rgba(var(--c-blue-400-rgb), 0.15);
  color: var(--c-accent);
  border: 1px solid rgba(var(--c-blue-400-rgb), 0.4);
  padding: 5px 15px;
  border-radius: var(--r-xl);
  font-weight: bold;
}

.iys-page .btn-submit-block,
.iys-page .btn-iys-primary {
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: var(--r-pill);
  padding: 12px 30px;
  border: none;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}

.iys-page .btn-iys-primary { box-shadow: var(--shadow-primary); }
.iys-page .btn-submit-block { font-size: var(--fs-body); }
.iys-page .btn-submit-block i { margin-left: 5px; }

/* İletişim kutusu */
.iys-page .contact-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.iys-page .contact-info-side { padding: 50px; }

.iys-page .content-box h3 {
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-heavy);
  margin-bottom: 15px;
}

.iys-page .content-box > p { margin-bottom: 30px; }

.iys-page .support-features .feature { display: flex; align-items: center; margin-bottom: 15px; color: var(--c-text-muted); }
.iys-page .support-features .feature i { color: var(--c-success); margin-right: 15px; font-size: 20px; }

.iys-page .contact-details { border-top: 1px solid var(--c-glass-border-soft); }
.iys-page .contact-details p { color: var(--c-accent); font-weight: 600; margin-bottom: 10px; }
.iys-page .contact-details i { margin-right: 10px; }

.iys-page .contact-form-side {
  padding: 50px;
  background: var(--c-surface-deep);
  border-left-color: var(--c-divider);
}

.iys-page .form-header h4 { font-size: 24px; font-weight: var(--fw-bold); }
.iys-page .form-header p  { font-size: var(--fs-small); }

.iys-page .cronoc-form .form-control {
  background: var(--c-surface-soft);
  border: 1px solid var(--c-glass-border-soft);
  color: var(--c-white);
  border-radius: var(--r-sm);
}

.iys-page .cronoc-form .form-control::placeholder { color: var(--c-text-subtle); }

.iys-page .cronoc-form .input-group-text {
  background: transparent;
  border: 1px solid var(--c-glass-border-soft);
  border-right: none;
  color: var(--c-accent);
}

.iys-page .form-note { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.iys-page .form-note i { color: var(--c-success); margin-right: 5px; }

/* --- Ürünler sayfası (açık tema) --- */
.products-page .c-products-hero {
  padding: 140px 0 40px 0;
  background: var(--c-white);
}

.products-page .c-products-hero h1 {
  font-weight: var(--fw-heavy);
  color: var(--c-ink);
  margin-bottom: 6px;
}

.products-page .c-products-hero p {
  color: var(--c-gray-500);
  max-width: 900px;
  margin: 0 auto;
}

.products-page .c-products-list {
  padding: 40px 0 80px;
  background: var(--c-slate-50);
}

.products-page .card {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}

.products-page .c-product-media {
  padding: 36px 24px;
  text-align: center;
}

.products-page .c-product-media img {
  height: 128px;
  object-fit: contain;
}

.products-page .c-product-media--sm img { height: 88px; }

.products-page .c-product-media--amber  { background: #fff6e6; }
.products-page .c-product-media--indigo { background: #eef2ff; }
.products-page .c-product-media--pink   { background: #fff0f6; }
.products-page .c-product-media--mint   { background: #eefcf6; }
.products-page .c-product-media--cream  { background: #fff8ec; }
.products-page .c-product-media--sky    { background: #f0f9ff; }

.products-page .card-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
}

.products-page .card-text {
  color: var(--c-gray-500);
}

.products-page .card-body ul {
  padding-left: 18px;
  color: var(--c-slate-600);
  margin: 12px 0 14px;
}

.products-page .c-product-actions {
  display: flex;
  gap: 10px;
}

.products-page .c-products-cta {
  background: var(--c-primary-strong);
  padding: 34px 0 48px;
  color: var(--c-white);
}

.products-page .c-products-cta h4 {
  margin: 0 0 8px;
  font-weight: var(--fw-heavy);
}

.products-page .c-products-cta p {
  margin: 0 0 16px;
  opacity: 0.92;
}

.products-page .c-products-cta .c-btn {
  background: var(--c-white);
  color: var(--c-primary-strong);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: var(--fw-heavy);
}

@media (max-width: 992px) {
  .products-page .card .card-body ul { padding-left: 16px; }
}


/* YARDIMCI SINIFLAR ====================================================== */

.u-mt-30 { margin-top: 30px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-30 { margin-bottom: 30px; }


/* MOBİL ================================================================== */

@media (max-width: 767px) {
  .c-display,
  .c-display--xl { font-size: 36px; }

  .c-h2,
  .c-h2--lg,
  .c-heading__title { font-size: 28px; }

  .c-grid { grid-template-columns: 1fr; }

  .c-cta-band { padding: 30px; }
  .c-cta-band__text { max-width: 100%; }

  .c-split__col { min-width: 100%; }

  .c-feature { flex-direction: column; }
}


/* 9. GÖRSEL YENİLEME ===================================================== */
/* Eski tema (templatemo) bileşenlerini tek koyu zemin + tek vurgu rengi
   diline uyarlar. Tema seçicilerinden daha özgül olacak şekilde yazılmıştır. */

/* --- Header: tek satır, koyu cam --- */
.header-area {
  border-bottom: 1px solid var(--c-divider);
}

.header-area.background-header {
  background-color: rgba(11, 17, 33, 0.85) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Koyu logo dosyasını beyaza çevirir */
.header-area .main-nav .logo img,
footer .footer-widget .logo img {
  filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
  .header-area .main-nav .nav li {
    padding-left: 11px;
    padding-right: 11px;
  }

  .header-area .main-nav .nav li a {
    font-size: 14px;
    letter-spacing: 0.2px;
  }

  .header-area .main-nav .nav li:last-child {
    padding-right: 0;
    margin-left: 6px;
  }
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: var(--c-accent) !important;
}

/* Açılır menü: koyu cam */
.header-area .nav .dropdown-menu {
  background-color: rgba(15, 23, 42, 0.97);
  border: 1px solid var(--c-glass-border-soft);
  border-radius: var(--r-md);
  padding: 8px;
  min-width: 300px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.header-area .main-nav .nav .dropdown-menu li {
  padding: 0;
}

.header-area .main-nav .nav .dropdown-menu li a {
  color: var(--c-text) !important;
  height: auto;
  line-height: 1.5;
  padding: 10px 14px !important;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}

.header-area .main-nav .nav .dropdown-menu li a:hover {
  background-color: rgba(var(--c-blue-500-rgb), 0.15);
  color: var(--c-white) !important;
}

/* "İzin Sistemi" butonu: neon parlama yerine sade dolgu */
.header-area .main-nav .nav li a.btn-futuristic-nav,
.btn-futuristic-nav {
  background: var(--c-primary);
  border: 1px solid var(--c-primary);
  color: var(--c-white) !important;
  box-shadow: none;
  padding: 0 20px !important;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.header-area .main-nav .nav li a.btn-futuristic-nav:hover,
.btn-futuristic-nav:hover {
  background: var(--c-primary-strong);
  border-color: var(--c-primary-strong);
  box-shadow: 0 8px 20px rgba(var(--c-blue-500-rgb), 0.35);
  color: var(--c-white) !important;
}

/* --- Ana sayfa hero --- */
.main-banner:after {
  display: none;                       /* açık mavi dalga süslemesi */
}

#hero-particles { opacity: 0.55; }

.floating-icons { opacity: 0.35; }

.main-banner .hero-title,
.main-banner .left-content h2 {
  color: var(--c-heading);
}

.main-banner .typewriter-text {
  color: var(--c-accent);
}

.main-banner .hero-desc {
  color: var(--c-text-muted);
}

.btn-hero-primary {
  background: var(--c-primary) !important;
  box-shadow: var(--shadow-primary) !important;
}

.btn-hero-primary:hover {
  background: var(--c-primary-strong) !important;
}

.btn-hero-outline {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.btn-hero-outline:hover {
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}

/* --- Bölüm başlıkları (tema .section-heading) --- */
.section-heading h4,
.section-heading h2 {
  color: var(--c-heading);
}

.section-heading h4 em,
.section-heading h2 em,
.modern-features-section .section-heading h4 em {
  color: var(--c-accent);
  font-style: normal;
}

.section-heading p {
  color: var(--c-text-muted);
}

/* Başlık altındaki süs görseli yerine tek renk çizgi */
.section-heading img[src*="heading-line-dec"] {
  display: none;
}

.section-heading h4::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 3px;
  background: var(--c-primary);
}

/* --- Ortak koyu kart görünümü (tema kartları) --- */
.pro-card,
.glass-card,
.process-item,
.solution-card,
.app-card,
.tech-box,
.feature-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-glass-border-soft) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  color: var(--c-text);
}

.pro-card:hover,
.glass-card:hover,
.process-item:hover,
.solution-card:hover,
.app-card:hover,
.tech-box:hover {
  border-color: rgba(var(--c-blue-400-rgb), 0.45) !important;
}

.pro-card h3,
.glass-card h3,
.process-item h5,
.solution-card h3,
.app-card h4,
.app-card h5,
.tech-box h5,
.feature-card h4 {
  color: var(--c-heading) !important;
}

.pro-card p,
.glass-card p,
.process-item p,
.solution-card p,
.app-card p,
.tech-box p,
.feature-card p {
  color: var(--c-text-muted) !important;
}

.pro-card .pro-link {
  color: var(--c-accent);
}

.pro-card .pro-icon,
.glass-card .card-icon-box,
.process-item .icon-bg {
  background: rgba(var(--c-blue-500-rgb), 0.15) !important;
  color: var(--c-accent) !important;
}

.glass-card.highlight {
  border-color: rgba(var(--c-blue-400-rgb), 0.45) !important;
}

/* --- Referans logoları --- */
.client-item img,
.logo-card img {
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-item:hover img,
.logo-card:hover img {
  filter: none;
  opacity: 1;
}

/* --- Ana sayfa CTA --- */
.cta-section .cta-content {
  background: linear-gradient(90deg, var(--c-blue-600) 0%, var(--c-primary-strong) 100%) !important;
  box-shadow: var(--shadow-cta);
}

.cta-section .cta-content h2 em {
  color: var(--c-white);
  opacity: 0.85;
}

.cta-section .cta-btn {
  background: var(--c-white) !important;
  color: var(--c-primary-strong) !important;
}

/* --- CTA bantlarında sarı yerine beyaz vurgu --- */
.c-highlight {
  color: var(--c-white);
  opacity: 0.8;
}

.c-cta-band__icon { color: rgba(255, 255, 255, 0.12); }

/* --- Footer --- */
footer {
  border-top: 1px solid var(--c-divider);
}

footer .section-heading h4 {
  color: var(--c-heading);
  font-size: 22px;
}

footer .section-heading h4::after { display: none; }

footer .footer-widget h4 {
  color: var(--c-heading);
}

footer .footer-widget p,
footer .footer-widget ul li a,
footer .footer-widget p a {
  color: var(--c-text-subtle);
}

footer .footer-widget ul li a:hover,
footer .footer-widget p a:hover {
  color: var(--c-accent);
}

footer .copyright-text p,
footer .copyright-text a {
  color: var(--c-text-subtle);
}

footer .c-subscribe .form-control {
  background: var(--c-surface-soft);
  border: 1px solid var(--c-glass-border-soft);
  color: var(--c-white);
}

footer .c-subscribe .form-control::placeholder { color: var(--c-text-subtle); }

footer .c-subscribe .btn {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

/* --- Ana sayfa ince ayarlar --- */
.main-banner .left-content p.hero-desc {
  color: var(--c-text-muted);
}

.hero-badge:empty,
.floating-icons {
  display: none;
}

.modern-features-section .section-heading h4 em {
  color: var(--c-accent) !important;
}

/* Footer: eski arka plan görseli için bırakılan büyük üst boşluk kaldırıldı */
footer {
  margin-top: 60px;
  padding-top: 80px;
}

/* --- Eski sayfa hero'ları (Web Projeleri, Mobil, İletişim, SSS, Referanslar) --- */
.web-hero h1,
.mobile-hero h1,
.contact-hero h1,
.ref-hero h1,
.faq-hero h1,
.faq-hero .c-faq-title {
  color: var(--c-heading) !important;
}

.web-hero h1 em,
.mobile-hero h1 em,
.contact-hero h1 em,
.ref-hero h1 em,
.mobile-tech-stack h2 em {
  color: var(--c-accent) !important;
  font-style: normal;
}

.web-hero h1 em::after { display: none; }

.web-hero p,
.mobile-hero p,
.contact-hero p,
.ref-hero p,
.faq-hero p,
.faq-hero .c-faq-sub {
  color: var(--c-text-muted) !important;
}

.mobile-tech-stack h2,
.mobile-tech-stack h3 {
  color: var(--c-heading) !important;
}

.mobile-tech-stack p { color: var(--c-text-muted); }

/* Hero rozetleri: c-eyebrow ile aynı görünüm */
.badge-tech,
.badge-mobile {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--c-accent) !important;
  border: 1px solid rgba(var(--c-blue-400-rgb), 0.45) !important;
}

/* Hero butonları: tek birincil buton stili */
.btn-primary-glow,
.btn-gradient-mobile {
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  box-shadow: var(--shadow-primary) !important;
}

.btn-primary-glow:hover,
.btn-gradient-mobile:hover {
  background: var(--c-primary-strong) !important;
  color: var(--c-white) !important;
}

/* Hero görselleri: dikey görseller sayfayı uzatmasın */
.web-hero .hero-image-wrapper img,
.web-hero .main-screen img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: var(--r-xl);
}

/* Yüzen küçük kartlar: koyu cam */
.floating-code-card {
  background: var(--c-surface-float) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-glass-border);
  color: var(--c-white) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.floating-code-card i { color: var(--c-accent); }

/* Teknik özellik kutuları (Web Projeleri) */
.spec-box {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-glass-border-soft) !important;
  box-shadow: none !important;
}

.spec-box h5 { color: var(--c-heading); }
.spec-box p  { color: var(--c-text-muted); }

.spec-box .icon {
  background: rgba(var(--c-blue-500-rgb), 0.15) !important;
  color: var(--c-accent) !important;
}

.tech-specs-section h2,
.tech-specs-section h3,
.tech-specs-section h4 { color: var(--c-heading); }

.tech-specs-section h2 em,
.tech-specs-section h3 em,
.tech-specs-section h4 em {
  color: var(--c-accent);
  font-style: normal;
}

.tech-specs-section p { color: var(--c-text-muted); }

/* Web Projeleri CTA: siyah çizgili kutu yerine mavi bant */
.web-cta .cta-inner {
  background: linear-gradient(90deg, var(--c-blue-600) 0%, var(--c-primary-strong) 100%) !important;
  box-shadow: var(--shadow-cta);
}

.web-cta .cta-inner p { color: rgba(255, 255, 255, 0.85) !important; }

.btn-white-pulse { color: var(--c-primary-strong) !important; }

/* Mobil CTA kutusu */
.mobile-cta .cta-box,
.mobile-cta .container > div {
  border: 1px solid var(--c-glass-border-soft);
}

/* --- İletişim sayfası --- */
.contact-hero .hero-content p { color: var(--c-text-muted) !important; }

.contact-section .info-card,
.contact-section .working-hours,
.contact-section .contact-form-wrapper {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-glass-border-soft) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.contact-section .info-card h5,
.contact-section .info-card h6,
.contact-section .working-hours h6,
.contact-section .form-header h3,
.contact-section .form-header h4 {
  color: var(--c-heading) !important;
}

.contact-section .info-card p,
.contact-section .info-card a,
.contact-section .working-hours p,
.contact-section .form-header p {
  color: var(--c-text-muted) !important;
}

.contact-section .icon-box {
  background: rgba(var(--c-blue-500-rgb), 0.15) !important;
  color: var(--c-accent) !important;
}

.contact-section .modern-form input,
.contact-section .modern-form textarea {
  background: var(--c-surface-soft) !important;
  border-color: var(--c-glass-border-soft) !important;
  color: var(--c-white) !important;
}

.contact-section .modern-form label {
  color: var(--c-text-subtle) !important;
}

.contact-section .modern-form input::placeholder,
.contact-section .modern-form textarea::placeholder {
  color: var(--c-text-subtle) !important;
}

.contact-section .submit-btn {
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
}

.contact-section .submit-btn:hover {
  background: var(--c-primary-strong) !important;
}

.contact-section .map-container {
  border-color: var(--c-glass-border-soft) !important;
  background: var(--c-navy-900) !important;
}

/* --- SSS akordeonu --- */
.c-faq-section { background-color: transparent; }

.faq-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-glass-border-soft) !important;
  box-shadow: none !important;
}

.faq-card .faq-btn,
.faq-card .faq-header {
  background: transparent !important;
}

.faq-card .faq-title {
  color: var(--c-heading) !important;
}

.faq-card .faq-btn:not(.collapsed) .faq-title {
  color: var(--c-accent) !important;
}

.faq-card .faq-body,
.faq-card .faq-body p {
  color: var(--c-text-muted) !important;
  background: transparent !important;
}

.faq-card .faq-toggle-icon {
  background: rgba(var(--c-blue-500-rgb), 0.15) !important;
  color: var(--c-accent) !important;
}

/* --- Referanslar sayfası --- */
.stats-section {
  border-color: var(--c-divider) !important;
}

.stats-section .stat-item p,
.stats-section .stat-item span { color: var(--c-text-subtle); }

/* --- Sertifikalar filtresi --- */
.filter-btn {
  color: var(--c-accent);
}

.filter-btn.active {
  background: var(--c-primary);
  color: var(--c-white);
}

/* --- Kurumsal metin sayfaları (flatpages) --- */
#flati {
  padding-top: 60px;
  color: var(--c-text);
}

#flati h1,
#flati h2,
#flati h3 { color: var(--c-heading); }

/* --- Mobil menü --- */
@media (max-width: 991px) {
  .header-area .main-nav .nav {
    background-color: rgba(11, 17, 33, 0.98) !important;
    border: 1px solid var(--c-glass-border-soft);
  }

  .header-area .main-nav .nav li {
    background: transparent !important;
    border-bottom: 1px solid var(--c-divider) !important;
  }

  .header-area .main-nav .nav li a {
    color: var(--c-text) !important;
    background: transparent !important;
  }

  .header-area .nav .dropdown-menu {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span::before,
  .header-area .main-nav .menu-trigger span::after {
    background-color: var(--c-white) !important;
  }
}

/* --- Kontrast düzeltmeleri (otomatik tarama sonrası) --- */
.section-title em { color: var(--c-accent) !important; }

.step-num { background: var(--c-primary) !important; color: var(--c-white) !important; }

.c-step__num { color: rgba(var(--c-blue-400-rgb), 0.5); }

.app-features li,
.app-card li { color: var(--c-text-muted) !important; }

.contact-section .modern-form label { color: var(--c-text-muted) !important; }

#flati a { color: var(--c-accent); }

/* Ürünler: açık kartlar kendi koyu yazı rengini korur */
.products-page .c-products-hero h1 { color: var(--c-heading); }
.products-page .c-products-hero p  { color: var(--c-text-muted); }
.products-page .card { color: #212529; }
.products-page .card .card-title { color: var(--c-ink); }

.products-page .c-products-cta {
  background: var(--c-primary) !important;
}

.products-page .c-products-cta h4,
.products-page .c-products-cta p { color: var(--c-white); }

/* Yüzen etiketin zemini, kartın görünen rengine eşit (kenarlığı örter) */
.contact-section .modern-form label { background: var(--c-surface-solid) !important; }

.btn-app-store-style { background: var(--c-primary) !important; color: var(--c-white) !important; }
.btn-app-store-style:hover { background: var(--c-primary-strong) !important; }

/* Mobil header: tema beyaz zemin veriyor, koyu cam yapılır */
@media (max-width: 991px) {
  .header-area,
  .header-area.header-sticky,
  .header-area.background-header {
    background-color: rgba(11, 17, 33, 0.95) !important;
    backdrop-filter: blur(14px);
  }
}

@media (max-width: 991px) {
  /* Dokunmatikte hover menüyü açıp tıklama kapatıyordu; yalnızca tıklama açar */
  .nav .dropdown:hover .dropdown-menu { display: none; }

  .header-area .main-nav .nav li:hover,
  .header-area .main-nav .nav li:hover > a,
  .header-area .main-nav .nav li a:focus {
    background: transparent !important;
  }

  .header-area .nav .dropdown-menu li a {
    color: var(--c-text-muted) !important;
  }

  .header-area .main-nav .nav li a.btn-futuristic-nav {
    background: var(--c-primary) !important;
    display: inline-flex;
    margin: 12px auto;
  }

  /* Hero butonları tek satırda kalsın */
  .btn-hero-primary,
  .btn-hero-outline {
    white-space: nowrap;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* 10. TEMA ANAHTARI VE HEADER ============================================ */

/* Header her iki temada da koyu (hero'suz sayfalarda da okunur kalsın) */
body .header-area {
  background-color: var(--c-navy-950) !important;
}

body .header-area.background-header {
  background-color: rgba(11, 17, 33, 0.88) !important;
}

.c-theme-li {
  display: flex;
  align-items: center;
}

.header-area .main-nav .nav li.c-theme-li {
  padding-left: 4px;
  padding-right: 0;
  margin-left: 4px;
  height: 40px;
}

.c-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.c-theme-toggle:hover {
  border-color: var(--c-blue-400);
  color: var(--c-blue-400);
}

.c-theme-toggle:focus-visible {
  outline: 2px solid var(--c-blue-400);
  outline-offset: 2px;
}

/* Açık temada ay, koyu temada güneş ikonu görünür */
.c-theme-toggle .fa-sun { display: none; }
[data-theme="dark"] .c-theme-toggle .fa-sun { display: inline-block; }
[data-theme="dark"] .c-theme-toggle .fa-moon { display: none; }

@media (max-width: 991px) {
  .header-area .main-nav .nav li.c-theme-li {
    justify-content: center;
    height: auto;
    padding: 12px 0;
    margin: 0;
  }
}

/* Açık tema: kartlarda gölge yerine ince kenarlık + yumuşak gölge */
:root:not([data-theme="dark"]) .pro-card,
:root:not([data-theme="dark"]) .glass-card,
:root:not([data-theme="dark"]) .process-item,
:root:not([data-theme="dark"]) .solution-card,
:root:not([data-theme="dark"]) .app-card,
:root:not([data-theme="dark"]) .tech-box,
:root:not([data-theme="dark"]) .feature-card,
:root:not([data-theme="dark"]) .faq-card {
  box-shadow: var(--shadow-card) !important;
}

/* Açık tema: referans logoları renkli ve gri kenarlıklı */
:root:not([data-theme="dark"]) .client-item,
:root:not([data-theme="dark"]) .logo-card {
  border: 1px solid var(--c-divider);
  box-shadow: none;
}

.modern-features-section .section-heading h4 { color: var(--c-heading) !important; }

/* Eski temanın beyaza sabitlediği metinler (otomatik kontrast taraması) */
.step h5 { color: var(--c-heading) !important; }

.feature-list li { color: var(--c-text-muted) !important; }

.iys-page .via-list strong,
.iys-page .info-block strong,
.iys-page .via-info-box strong,
.iys-page .permission-feature-list strong { color: var(--c-heading); }

/* Kurumsal metin sayfaları: içerik editörden gelen sabit renkleri taşıyor
   (koyu site için beyaz yazılmış); temanın metin rengine uydurulur. */
#flati,
#flati p,
#flati span,
#flati em,
#flati strong,
#flati li,
#flati td,
#flati font {
  color: var(--c-text) !important;
}

#flati h1,
#flati h2,
#flati h3,
#flati h4 { color: var(--c-heading) !important; }

#flati a,
#flati a span { color: var(--c-accent) !important; }

.cta-section .cta-content p { color: var(--c-white) !important; }

/* İYS iletişim kartı: tema açık gri/beyaz zemin veriyordu */
.iys-page .contact-card-wrapper {
  background: transparent;
  border-color: var(--c-divider);
}

.iys-page .cronoc-form .input-group {
  background: var(--c-surface-soft);
  border-color: var(--c-glass-border-soft);
}

.iys-page .cronoc-form .input-group:focus-within {
  background: var(--c-surface-soft);
  border-color: var(--c-primary);
}

.iys-page .cronoc-form .input-group .form-control,
.iys-page .cronoc-form .input-group .input-group-text {
  background: transparent;
  border: none;
}

.iys-page .cronoc-form .form-control { color: var(--c-heading); }

/* Bot koruması: tuzak alan (ekranda ve ekran okuyucularda görünmez) */
.c-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}