/* =========================================================
   Datakor — site-specific styles (extends base.css)
   Cybersecurity / Managed IT brand of Bilgim Grup
   ========================================================= */

/* Inherit everything from base.css, then override what's Datakor-specific.
   Datakor's primary accent is electric blue (--c-datakor), not bronze. */

@import url('base.css');

:root {
  /* Datakor leans cooler — slightly lifted background tone */
  --bg:           #F7F8FB;
  --bg-2:         #EEF2F8;

  /* Datakor is the brand here — promote it to "primary" alias */
  --brand:        #1E6FE0;
  --brand-deep:   #1858B8;
  --brand-soft:   #E4EEFC;
  --brand-line:   #C8DBF6;

  /* Mono used for terminal-ish security accents */
  --mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Eyebrow defaults to bronze in base.css — flip it to brand blue */
.eyebrow {
  color: var(--brand) !important;
}

/* Btn-phone uses adaplanet bronze in base — make it brand-tinted */
.btn-phone {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: rgba(30, 111, 224, 0.3) !important;
}
.btn-phone:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Section background variants */
.section-tint {
  background: var(--brand-soft);
}
.section-dark {
  background: var(--navy);
  color: #fff;
}
.section-dark .h-section,
.section-dark .h-card { color: #fff; }
.section-dark .body-lg,
.section-dark .body { color: rgba(255,255,255,0.78); }
.section-dark .eyebrow { color: #6FA8FF !important; }

/* Hairline grid pattern for accent surfaces */
.grid-pattern {
  background-image:
    linear-gradient(rgba(30,111,224,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,111,224,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Status pills */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.pill-live {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(26,127,79,0.2);
}
.pill-live::before {
  content: '';
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(26,127,79,0.18);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Mono label — used in section indices, IDs, IP-ish accents */
.mono-tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Datakor wordmark recreation */
.dk-wordmark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.dk-wordmark .dot { color: var(--brand); }

/* Smooth reveal-on-scroll for many siblings */
.reveal { will-change: opacity, transform; }

/* Mobile fixes */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr !important; }
}