/* ==========================================================================
   2B TELEKOM - 3 PREMIUM ENTERPRISE THEMES
   1. Enterprise Sapphire (Klasik Prestijli Safir & Lacivert)
   2. Cybernetic Obsidian (Siber Gece / Ultra Lüks Koyu Mod)
   3. Titanium Gold Luxury (Prestij Titanyum & Şampanya Altını)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TEMA 1: ENTERPRISE SAPPHIRE (Varsayılan Kurumsal Safir)
   -------------------------------------------------------------------------- */
:root,
html[data-theme="enterprise-sapphire"],
body[data-theme="enterprise-sapphire"] {
  --theme-id: "enterprise-sapphire";
  --theme-name: "Enterprise Sapphire";

  --primary: #003b73;
  --primary-glow: rgba(0, 59, 115, 0.35);
  --primary-hover: #002850;
  --primary-light: #eff6ff;
  --primary-gradient: linear-gradient(135deg, #002244, #003b73, #0284c7);

  --accent: #0284c7;
  --accent-glow: rgba(2, 132, 199, 0.35);
  --accent-hover: #0369a1;
  --accent-light: #f0f9ff;

  --cyan: #06b6d4;
  --cyan-glow: rgba(6, 182, 212, 0.35);

  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-alt: #f1f5f9;
  --bg-surface-elevated: #ffffff;

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-light: #64748b;
  --text-white: #ffffff;
  --text-inverse: #ffffff;

  --border-color: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-focus: #0284c7;

  --hero-bg: radial-gradient(circle at 85% 20%, rgba(2, 132, 199, 0.22), transparent 45%),
             radial-gradient(circle at 10% 80%, rgba(6, 182, 212, 0.18), transparent 40%),
             linear-gradient(180deg, #00162b 0%, #002b55 50%, #003b73 100%);
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-border: rgba(226, 232, 240, 0.9);
  --navbar-text: #1e293b;
  --topbar-bg: #001a33;
  --footer-bg: #00162b;
  --footer-bottom-bg: #000f1f;

  --card-shadow: 0 10px 25px -5px rgba(0, 59, 115, 0.08), 0 8px 10px -6px rgba(0, 59, 115, 0.04);
  --card-shadow-hover: 0 20px 35px -8px rgba(0, 59, 115, 0.18);
  --badge-bg: rgba(0, 59, 115, 0.08);
  --badge-text: #003b73;
}

/* --------------------------------------------------------------------------
   TEMA 2: CYBERNETIC OBSIDIAN (Siber Gece / Ultra Koyu Mod)
   -------------------------------------------------------------------------- */
html[data-theme="cyber-obsidian"],
body[data-theme="cyber-obsidian"] {
  --theme-id: "cyber-obsidian";
  --theme-name: "Cybernetic Obsidian";

  --primary: #00e5ff;
  --primary-glow: rgba(0, 229, 255, 0.45);
  --primary-hover: #38bdf8;
  --primary-light: rgba(0, 229, 255, 0.12);
  --primary-gradient: linear-gradient(135deg, #0284c7, #00b4d8, #00e5ff);

  --accent: #818cf8;
  --accent-glow: rgba(129, 140, 248, 0.45);
  --accent-hover: #6366f1;
  --accent-light: rgba(99, 102, 241, 0.16);

  --cyan: #38bdf8;
  --cyan-glow: rgba(56, 189, 248, 0.4);

  --bg-body: #070a12;
  --bg-card: #0d1322;
  --bg-card-alt: #131c31;
  --bg-surface-elevated: #16223c;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --text-white: #ffffff;
  --text-inverse: #070a12;

  --border-color: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(0, 229, 255, 0.18);
  --border-focus: #00e5ff;

  --hero-bg: radial-gradient(circle at 80% 15%, rgba(0, 229, 255, 0.18), transparent 45%),
             radial-gradient(circle at 15% 85%, rgba(129, 140, 248, 0.15), transparent 40%),
             linear-gradient(180deg, #04060a 0%, #070d1a 50%, #0d1527 100%);
  --navbar-bg: rgba(9, 13, 22, 0.92);
  --navbar-border: rgba(0, 229, 255, 0.22);
  --navbar-text: #f8fafc;
  --topbar-bg: #030508;
  --footer-bg: #050811;
  --footer-bottom-bg: #020306;

  --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 229, 255, 0.3);
  --card-shadow-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 229, 255, 0.35);
  --badge-bg: rgba(0, 229, 255, 0.12);
  --badge-text: #38bdf8;
}

/* --------------------------------------------------------------------------
   TEMA 3: TITANIUM GOLD LUXURY (Prestij Titanyum & Şampanya Altını)
   -------------------------------------------------------------------------- */
html[data-theme="titanium-gold"],
body[data-theme="titanium-gold"] {
  --theme-id: "titanium-gold";
  --theme-name: "Titanium Gold Luxury";

  --primary: #d97706;
  --primary-glow: rgba(217, 119, 6, 0.38);
  --primary-hover: #b45309;
  --primary-light: #fffbeb;
  --primary-gradient: linear-gradient(135deg, #78350f, #b45309, #d97706, #f59e0b);

  --accent: #f59e0b;
  --accent-glow: rgba(245, 158, 11, 0.4);
  --accent-hover: #d97706;
  --accent-light: #fef3c7;

  --cyan: #eab308;
  --cyan-glow: rgba(234, 179, 8, 0.35);

  --bg-body: #faf8f5;
  --bg-card: #ffffff;
  --bg-card-alt: #f5f0e6;
  --bg-surface-elevated: #ffffff;

  --text-main: #18181b;
  --text-muted: #52525b;
  --text-light: #71717a;
  --text-white: #ffffff;
  --text-inverse: #18181b;

  --border-color: #e8ded1;
  --border-subtle: #f2ebe0;
  --border-focus: #d97706;

  --hero-bg: radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.22), transparent 45%),
             radial-gradient(circle at 10% 80%, rgba(245, 158, 11, 0.16), transparent 40%),
             linear-gradient(180deg, #10131b 0%, #1a1e28 50%, #242938 100%);
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-border: rgba(232, 222, 209, 0.95);
  --navbar-text: #18181b;
  --topbar-bg: #10131b;
  --footer-bg: #10131b;
  --footer-bottom-bg: #090b10;

  --card-shadow: 0 10px 25px -5px rgba(180, 83, 9, 0.08), 0 8px 10px -6px rgba(180, 83, 9, 0.04);
  --card-shadow-hover: 0 20px 35px -8px rgba(180, 83, 9, 0.18);
  --badge-bg: rgba(217, 119, 6, 0.1);
  --badge-text: #b45309;
}


/* ==========================================================================
   THEME ADAPTATION STYLES (UNIVERSAL COMPONENT OVERRIDES)
   ========================================================================== */

/* Universal Body & Container Adaptation */
body {
  background-color: var(--bg-body);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Site Header & Topbar */
.site-header {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border) !important;
}

.topbar {
  background-color: var(--topbar-bg) !important;
}

.brand-name {
  color: var(--text-main) !important;
}

.brand-name span {
  color: var(--primary) !important;
}

.nav-link {
  color: var(--navbar-text) !important;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

/* Hero Section */
.hero-section {
  background: var(--hero-bg) !important;
}

/* Value Props / Features Strip */
.features-strip {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.feature-box {
  background: transparent;
}

.feature-info h4 {
  color: var(--text-main) !important;
}

.feature-info p {
  color: var(--text-muted) !important;
}

.feature-icon-wrapper {
  background: var(--bg-card-alt) !important;
  color: var(--primary) !important;
}

.feature-box:hover .feature-icon-wrapper {
  background: var(--primary) !important;
  color: var(--text-white) !important;
}

/* Sections & Alternate backgrounds */
.section-alt {
  background-color: var(--bg-card-alt) !important;
}

.section-title {
  color: var(--text-main) !important;
}

.section-subtitle {
  color: var(--text-muted) !important;
}

.section-tag {
  background: var(--badge-bg) !important;
  color: var(--badge-text) !important;
  border: 1px solid var(--border-subtle);
}

/* Product Cards */
.product-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.product-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  border-color: var(--primary) !important;
}

.product-name {
  color: var(--text-main) !important;
}

.product-desc {
  color: var(--text-muted) !important;
}

.product-image-box {
  background: var(--bg-card-alt) !important;
}

.category-pill {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}

.category-pill.active, .category-pill:hover {
  background: var(--primary) !important;
  color: var(--text-white) !important;
  border-color: var(--primary) !important;
}

/* Interactive Calculator */
.calculator-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.calc-title {
  color: var(--text-main) !important;
}

.calc-desc {
  color: var(--text-muted) !important;
}

.calc-summary-card {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-color) !important;
}

.quote-highlight {
  color: var(--primary) !important;
}

/* Interactive Wizard */
.wizard-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.wizard-step-circle {
  background: var(--bg-card-alt) !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}

.wizard-step-circle.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-white) !important;
  box-shadow: 0 0 15px var(--primary-glow);
}

.wizard-option-card {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

.wizard-option-card.selected {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 0 15px var(--primary-glow);
}

/* Services Cards */
.service-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.service-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  border-color: var(--primary) !important;
}

.service-card h3 {
  color: var(--text-main) !important;
}

.service-card p {
  color: var(--text-muted) !important;
}

.service-icon-box {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* Partners & References Cards */
.partner-card, .ref-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.partner-card:hover, .ref-card:hover {
  border-color: var(--primary) !important;
}

.partner-name, .ref-name {
  color: var(--text-main) !important;
}

.partner-role, .ref-cat {
  color: var(--text-muted) !important;
}

/* Blog Cards */
.blog-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.blog-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  border-color: var(--primary) !important;
}

.blog-title {
  color: var(--text-main) !important;
}

.blog-excerpt {
  color: var(--text-muted) !important;
}

/* Contact Section & Form Inputs */
.contact-card, .contact-info-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.form-label {
  color: var(--text-main) !important;
}

.form-input, .form-select, .form-textarea {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--border-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Primary Button Enhancements */
.btn-primary {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow) !important;
}

.btn-secondary {
  background: var(--bg-card-alt) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover {
  background: var(--border-color) !important;
}

/* Footer Adaptation */
.site-footer {
  background-color: var(--footer-bg) !important;
}

.footer-bottom {
  background-color: var(--footer-bottom-bg) !important;
}

/* Announcement Bar Adaptation */
.announcement-bar {
  background: var(--primary-gradient) !important;
}


/* --------------------------------------------------------------------------
   CYBERNETIC OBSIDIAN DARK SPECIFIC REFINEMENTS
   -------------------------------------------------------------------------- */
[data-theme="cyber-obsidian"] .official-logo {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
}

[data-theme="cyber-obsidian"] .product-card img,
[data-theme="cyber-obsidian"] .partner-card img,
[data-theme="cyber-obsidian"] .ref-card img {
  filter: brightness(0.95) contrast(1.05);
}

[data-theme="cyber-obsidian"] .dropdown-menu {
  background: #0d121f !important;
  border-color: rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 229, 255, 0.15) !important;
}

[data-theme="cyber-obsidian"] .dropdown-item a {
  color: #cbd5e1 !important;
}

[data-theme="cyber-obsidian"] .dropdown-item a:hover {
  background: rgba(0, 229, 255, 0.1) !important;
  color: #00e5ff !important;
}


/* --------------------------------------------------------------------------
   TITANIUM GOLD LUXURY SPECIFIC REFINEMENTS
   -------------------------------------------------------------------------- */
[data-theme="titanium-gold"] .brand-badge {
  background: linear-gradient(135deg, #78350f, #b45309, #d97706, #f59e0b) !important;
  box-shadow: 0 8px 16px -4px rgba(217, 119, 6, 0.45) !important;
}

[data-theme="titanium-gold"] .hero-floating-stat {
  border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-theme="titanium-gold"] .hero-floating-stat .stat-num {
  color: #f59e0b !important;
}

[data-theme="titanium-gold"] .section-title span,
[data-theme="titanium-gold"] .hero-title span {
  color: #d97706 !important;
}


/* ==========================================================================
   FLOATING THEME QUICK-SWITCHER PILL (FOR INSTANT PUBLIC PREVIEWS)
   ========================================================================== */
.theme-switcher-pill {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 0 1px var(--primary-glow);
  border-radius: 999px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-switcher-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

.theme-pill-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 0 6px 0 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.theme-pill-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.theme-pill-btn .theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.theme-pill-btn[data-theme-choice="enterprise-sapphire"] .theme-dot {
  background: #003b73;
  box-shadow: 0 0 6px rgba(0, 59, 115, 0.6);
}

.theme-pill-btn[data-theme-choice="cyber-obsidian"] .theme-dot {
  background: #00e5ff;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
}

.theme-pill-btn[data-theme-choice="titanium-gold"] .theme-dot {
  background: #d97706;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.8);
}

.theme-pill-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-alt);
}

.theme-pill-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px var(--primary-glow);
}

.theme-pill-btn.active .theme-dot {
  background: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

@media (max-width: 768px) {
  .theme-switcher-pill {
    bottom: 16px;
    left: 16px;
    padding: 4px;
  }
  .theme-pill-label {
    display: none;
  }
  .theme-pill-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
}