/*
 * Direction: Teknoloji — yazılım, BT hizmetleri, siber güvenlik, telekom, SaaS
 * Google Fonts: https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Space+Grotesk:wght@500..700&family=JetBrains+Mono:wght@400;500&display=swap
 *
 * Plain CSS on purpose: this file works unchanged in the CDN draft and in the
 * production build. Adjust hues to the brand, then run scripts/check_theme.py.
 */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

[data-theme="brand"] {
  color-scheme: light;
  --color-base-100: oklch(99% 0.003 270);
  --color-base-200: oklch(96.5% 0.008 270);
  --color-base-300: oklch(92% 0.015 270);
  --color-base-content: oklch(22% 0.03 275);
  --color-primary: oklch(50% 0.22 275);
  --color-primary-content: oklch(98% 0.01 275);
  --color-secondary: oklch(72% 0.13 210);
  --color-secondary-content: oklch(20% 0.04 220);
  --color-accent: oklch(84% 0.17 130);
  --color-accent-content: oklch(22% 0.05 130);
  --color-neutral: oklch(20% 0.03 275);
  --color-neutral-content: oklch(96% 0.01 275);
  --color-info: oklch(52% 0.15 245);
  --color-info-content: oklch(98% 0.01 245);
  --color-success: oklch(52% 0.13 155);
  --color-success-content: oklch(98% 0.01 155);
  --color-warning: oklch(82% 0.15 80);
  --color-warning-content: oklch(22% 0.05 70);
  --color-error: oklch(53% 0.2 25);
  --color-error-content: oklch(98% 0.01 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
  --brand-mark: url("../img/mark-dark.png");
}

[data-theme="brand-dark"] {
  color-scheme: dark;
  --brand-mark: url("../img/mark-light.png");
  --color-base-100: oklch(17% 0.02 275);
  --color-base-200: oklch(14.5% 0.018 275);
  --color-base-300: oklch(12% 0.016 275);
  --color-base-content: oklch(94% 0.01 275);
  --color-primary: oklch(70% 0.17 275);
  --color-primary-content: oklch(15% 0.04 275);
  --color-secondary: oklch(80% 0.11 210);
  --color-secondary-content: oklch(18% 0.04 220);
  --color-accent: oklch(86% 0.17 130);
  --color-accent-content: oklch(20% 0.05 130);
  --color-neutral: oklch(26% 0.03 275);
  --color-neutral-content: oklch(94% 0.01 275);
  --color-info: oklch(74% 0.12 245);
  --color-info-content: oklch(16% 0.04 245);
  --color-success: oklch(76% 0.14 155);
  --color-success-content: oklch(16% 0.04 155);
  --color-warning: oklch(84% 0.14 80);
  --color-warning-content: oklch(20% 0.05 70);
  --color-error: oklch(70% 0.17 25);
  --color-error-content: oklch(16% 0.04 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* Layered so Tailwind utilities (e.g. font-sans on a heading) can still override. */
@layer base {
  body { font-family: var(--font-sans); }
  :is(h1, h2, h3):not(.footer-title), .font-display { font-family: var(--font-display); }
  [x-cloak] { display: none !important; }
}

/* Theme-aware logo mark: dark-ink "A" on light UI, white "A" on dark UI.
   Driven by the --brand-mark variable set inside each theme block, so there are
   no [data-theme] helper selectors for check_theme.py to trip over. */
.brand-mark {
  background-image: var(--brand-mark);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

/* Signature motif: faint dotted grid for hero / dark bands (Teknoloji direction). */
.tech-grid {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
}
/* Corporate eyebrow label: a short primary rule + uppercase, tracked text.
   Replaces the old "// mono" style for a cleaner, more corporate look. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}