/*
 * HepHesapla ortak renk sistemi
 *
 * Amaç: tarayıcının/işletim sisteminin renk şemasını kontrollü biçimde
 * karşılamak; logo, form kontrolleri, yüzeyler ve odak durumlarını aynı
 * semantik palete bağlamak. Eski --color-coral adları, mevcut bileşenleri
 * kırmamak için yalnız geriye uyumluluk takma adı olarak korunur.
 */

:root {
  color-scheme: light;

  /* Marka ve etkileşim */
  --brand: #1d4ed8;
  --brand-hover: #1e40af;
  --brand-soft: rgba(29, 78, 216, 0.08);
  --brand-soft-strong: rgba(29, 78, 216, 0.14);
  --brand-ring: rgba(29, 78, 216, 0.28);
  --brand-selection: rgba(29, 78, 216, 0.22);
  --brand-border: #bfdbfe;
  --brand-on-inverse: #60a5fa;
  --brand-on-inverse-hover: #93c5fd;
  --brand-solid: #1d4ed8;
  --brand-solid-hover: #1e40af;
  --on-brand-solid: #ffffff;

  /* Yüzeyler ve metinler */
  --surface-page: #f3f6f9;
  --surface-card: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-raised: #ffffff;
  --surface-inverse: #0f172a;
  --surface-overlay: rgba(255, 255, 255, 0.98);
  --surface-accent-soft: #f8fbff;
  --surface-warning: #fff8e6;
  --surface-formula: #fff9d6;
  --formula-rule: rgba(29, 78, 216, 0.16);
  --formula-result: #166534;
  --text-heading: #172b3f;
  --text-body: #334155;
  --text-muted: #526173;
  --text-subtle: #52647a;
  --text-on-inverse: rgba(255, 255, 255, 0.88);
  --text-on-inverse-muted: rgba(255, 255, 255, 0.68);
  --border-default: #d8e2ec;
  --border-subtle: #e7eef5;
  --control-bg: #ffffff;
  --control-accent: #1d4ed8;
  --button-primary-bg: #172b3f;
  --button-primary-hover: #1d4ed8;
  --button-primary-text: #ffffff;
  --shadow-theme-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-theme-md: 0 6px 20px rgba(15, 23, 42, 0.1);
  --chart-text: #526173;
  --chart-grid: rgba(82, 97, 115, 0.16);

  /* Mevcut bileşenlerle geriye uyumluluk */
  --color-coral: var(--brand);
  --color-coral-dark: var(--brand-hover);
  --color-coral-soft: var(--brand-soft);
  --color-primary: var(--brand);
  --color-primary-dark: var(--brand-hover);
  --color-primary-soft: var(--brand-soft);
  --color-primary-light: var(--brand-on-inverse);
  --color-dark: var(--text-heading);
  --color-dark-deep: #0f2133;
  --color-bg-dark: var(--surface-inverse);
  --color-bg: var(--surface-page);
  --color-card: var(--surface-card);
  --color-card-soft: var(--surface-subtle);
  --color-text: var(--text-body);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text-subtle);
  --color-text-on-dark: var(--text-on-inverse);
  --color-text-on-dark-muted: var(--text-on-inverse-muted);
  --color-border: var(--border-default);
  --color-border-light: var(--border-subtle);
  --shadow-sm: var(--shadow-theme-sm);
  --shadow-md: var(--shadow-theme-md);
  --shadow-coral: 0 8px 24px rgba(29, 78, 216, 0.24);
  --shadow-primary: 0 8px 24px rgba(29, 78, 216, 0.24);
}

/* data-theme desteği, tarayıcı QA'sı ve ilerideki kullanıcı seçimi içindir. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #60a5fa;
  --brand-hover: #93c5fd;
  --brand-soft: rgba(96, 165, 250, 0.14);
  --brand-soft-strong: rgba(96, 165, 250, 0.2);
  --brand-ring: rgba(96, 165, 250, 0.36);
  --brand-selection: rgba(96, 165, 250, 0.3);
  --brand-border: #315a86;
  --brand-solid: #2563eb;
  --brand-solid-hover: #1d4ed8;
  --surface-page: #0b1220;
  --surface-card: #111c2e;
  --surface-subtle: #16243a;
  --surface-raised: #182840;
  --surface-inverse: #07101f;
  --surface-overlay: rgba(11, 18, 32, 0.98);
  --surface-accent-soft: #12243b;
  --surface-warning: #2b2414;
  --surface-formula: #24200f;
  --formula-rule: rgba(96, 165, 250, 0.22);
  --formula-result: #86efac;
  --text-heading: #f8fafc;
  --text-body: #d7e1ed;
  --text-muted: #a8b6c8;
  --text-subtle: #91a1b5;
  --text-on-inverse: rgba(248, 250, 252, 0.9);
  --text-on-inverse-muted: rgba(226, 232, 240, 0.7);
  --border-default: #2b3b52;
  --border-subtle: #223249;
  --control-bg: #101b2c;
  --control-accent: #60a5fa;
  --button-primary-bg: #2563eb;
  --button-primary-hover: #1d4ed8;
  --button-primary-text: #ffffff;
  --shadow-theme-sm: 0 2px 10px rgba(0, 0, 0, 0.24);
  --shadow-theme-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  /* Grafikler koyu çerçevede de beyaz hesap kartının içinde kalır. */
  --chart-text: #526173;
  --chart-grid: rgba(82, 97, 115, 0.16);
  --color-dark-deep: #e2e8f0;
  --shadow-coral: 0 8px 24px rgba(37, 99, 235, 0.28);
  --shadow-primary: 0 8px 24px rgba(37, 99, 235, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #60a5fa;
    --brand-hover: #93c5fd;
    --brand-soft: rgba(96, 165, 250, 0.14);
    --brand-soft-strong: rgba(96, 165, 250, 0.2);
    --brand-ring: rgba(96, 165, 250, 0.36);
    --brand-selection: rgba(96, 165, 250, 0.3);
    --brand-border: #315a86;
    --brand-solid: #2563eb;
    --brand-solid-hover: #1d4ed8;
    --surface-page: #0b1220;
    --surface-card: #111c2e;
    --surface-subtle: #16243a;
    --surface-raised: #182840;
    --surface-inverse: #07101f;
    --surface-overlay: rgba(11, 18, 32, 0.98);
    --surface-accent-soft: #12243b;
    --surface-warning: #2b2414;
    --surface-formula: #24200f;
    --formula-rule: rgba(96, 165, 250, 0.22);
    --formula-result: #86efac;
    --text-heading: #f8fafc;
    --text-body: #d7e1ed;
    --text-muted: #a8b6c8;
    --text-subtle: #91a1b5;
    --text-on-inverse: rgba(248, 250, 252, 0.9);
    --text-on-inverse-muted: rgba(226, 232, 240, 0.7);
    --border-default: #2b3b52;
    --border-subtle: #223249;
    --control-bg: #101b2c;
    --control-accent: #60a5fa;
    --button-primary-bg: #2563eb;
    --button-primary-hover: #1d4ed8;
    --button-primary-text: #ffffff;
    --shadow-theme-sm: 0 2px 10px rgba(0, 0, 0, 0.24);
    --shadow-theme-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    /* Grafikler koyu çerçevede de beyaz hesap kartının içinde kalır. */
    --chart-text: #526173;
    --chart-grid: rgba(82, 97, 115, 0.16);
    --color-dark-deep: #e2e8f0;
    --shadow-coral: 0 8px 24px rgba(37, 99, 235, 0.28);
    --shadow-primary: 0 8px 24px rgba(37, 99, 235, 0.28);
  }
}

/*
 * Hesaplama ve okuma alanları her sistem temasında açık bir çalışma yüzeyi
 * kullanır. Koyu tema yalnız sayfanın kurumsal çerçevesinde (navigasyon,
 * kahraman alanı ve footer) kalır; böylece form, sonuç, açıklama ve SSS
 * blokları geniş lacivert yüzeyler hâline gelmez. Yalnız arka planı beyaza
 * çevirmek koyu tema metinlerini okunamaz yapacağından, açık yüzey sözleşmesi
 * ilgili bölümdeki metin, kenarlık, kontrol ve grafik tokenlarını birlikte
 * sabitler.
 */
:where(
  .calc-module,
  .share-bar,
  .seo-content,
  .related-tools,
  .kategori-kart-tool,
  .kategori-guide,
  .mobile-category-nav,
  .category-card,
  .popular-tools,
  .hh-about
) {
  color-scheme: light;
  --brand: #1d4ed8;
  --brand-hover: #1e40af;
  --brand-soft: rgba(29, 78, 216, 0.08);
  --brand-soft-strong: rgba(29, 78, 216, 0.14);
  --brand-ring: rgba(29, 78, 216, 0.28);
  --brand-selection: rgba(29, 78, 216, 0.22);
  --brand-border: #bfdbfe;
  --brand-solid: #1d4ed8;
  --brand-solid-hover: #1e40af;
  --surface-page: #f3f6f9;
  --surface-card: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-raised: #ffffff;
  --surface-accent-soft: #ffffff;
  --surface-warning: #fff8e6;
  --surface-formula: #fff9d6;
  --formula-rule: rgba(29, 78, 216, 0.16);
  --formula-result: #166534;
  --text-heading: #172b3f;
  --text-body: #334155;
  --text-muted: #526173;
  --text-subtle: #52647a;
  --border-default: #d8e2ec;
  --border-subtle: #e7eef5;
  --control-bg: #ffffff;
  --control-accent: #1d4ed8;
  --button-primary-bg: #172b3f;
  --button-primary-hover: #1d4ed8;
  --button-primary-text: #ffffff;
  --shadow-theme-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-theme-md: 0 6px 20px rgba(15, 23, 42, 0.1);
  --chart-text: #526173;
  --chart-grid: rgba(82, 97, 115, 0.16);
  --color-dark-deep: #0f2133;
  --shadow-coral: 0 8px 24px rgba(29, 78, 216, 0.24);
  --shadow-primary: 0 8px 24px rgba(29, 78, 216, 0.24);

  /* Eski bileşen değişkenleri kökte hesaplanmış renk olarak miras kalır.
   * Bu yüzden beyaz adada yalnız semantik tokenlar değil, çalışma zamanında
   * kullanılan eski takma adlar da açık palete doğrudan bağlanır. */
  --color-coral: #1d4ed8;
  --color-coral-dark: #1e40af;
  --color-coral-soft: rgba(29, 78, 216, 0.08);
  --color-primary: #1d4ed8;
  --color-primary-dark: #1e40af;
  --color-primary-soft: rgba(29, 78, 216, 0.08);
  --color-dark: #172b3f;
  --color-bg: #f3f6f9;
  --color-card: #ffffff;
  --color-card-soft: #f8fafc;
  --color-text: #334155;
  --color-text-muted: #526173;
  --color-text-light: #52647a;
  --color-border: #d8e2ec;
  --color-border-light: #e7eef5;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.1);
  color: var(--text-body);
}

.calc-module,
.share-bar,
.seo-content,
.related-tools,
.related-tools-grid a,
.kategori-kart-tool,
.kategori-guide,
.kategori-guide-card,
.mobile-category-nav,
.category-card,
.popular-tools,
.hh-about {
  background-color: #ffffff;
  border-color: var(--border-default);
}

.hh-about {
  --surface-subtle: #ffffff;
  background-image: none;
}

.calc-module .result-box,
.calc-module .field-input,
.calc-module .field-select,
.calc-module .calc-mode-option,
.calc-module .radio-group .radio-circle {
  background-color: #ffffff;
}

/* Açıklama ve SSS aynı beyaz okuma kartında kalır; yinelenen küçük kutular
 * yerine nötr ayraçlarla sakin bir editoryal hiyerarşi korunur. */
.seo-content {
  box-sizing: border-box;
  padding: 34px 40px 38px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-theme-sm);
}

.seo-content > :first-child {
  margin-top: 0;
}

.seo-content .faq-question {
  border-top-color: var(--border-subtle);
}

/* İlişkili araç başlığı koyu sayfa zemininde açık yüzey tokenlarıyla
 * okunaksız kalmasın; başlık ve kartlar tek, sakin bir beyaz paneldir. */
.related-tools {
  box-sizing: border-box;
  padding: 28px 32px 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-theme-sm);
}

/* Resmî kaynak paneli açıklama kartının içinde geniş bir mavi yüzeye
 * dönüşmez; kaynak bağlantısı ve sol vurgu çizgisi kurumsal rengi taşır. */
.seo-content [aria-label="Veri kapsamı ve resmî kaynaklar"] {
  background: #ffffff !important;
}

@media (max-width: 575px) {
  .seo-content {
    padding: 24px 18px 28px;
  }

  .related-tools {
    padding: 24px 18px 26px;
  }
}

html,
body {
  background: var(--surface-page);
  color: var(--text-body);
}

body,
button,
input,
select,
textarea {
  color-scheme: inherit;
}

::selection {
  background: var(--brand-selection);
  color: var(--text-heading);
}

::-moz-selection {
  background: var(--brand-selection);
  color: var(--text-heading);
}

/* Marka işareti artık bitmap/SVG varyantı seçmez; aynı yapı temaya uyar. */
.hh-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

.hh-brand__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--brand);
  transition: color var(--transition-base);
}

.hh-brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.35px;
}

.hh-brand__wordmark-main {
  color: var(--text-heading);
}

.hh-brand__wordmark-accent {
  color: var(--brand);
}

.site-nav.is-scrolled .hh-brand__icon {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
}

.site-nav.is-scrolled .hh-brand__wordmark {
  font-size: 20px;
}

#footer .hh-brand {
  margin-bottom: 18px;
}

#footer .hh-brand__icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  color: var(--brand-on-inverse);
}

#footer .hh-brand__wordmark {
  font-size: 27px;
}

#footer .hh-brand__wordmark-main {
  color: #f8fafc;
}

#footer .hh-brand__wordmark-accent {
  color: var(--brand-on-inverse);
}

/* Ana yüzeyler: eski sabit beyazlar semantic yüzeye bağlanır. */
.site-nav,
.site-nav-panel,
.site-nav-mega,
.site-nav-simple-dropdown,
.field-input,
.field-select,
.radio-group .radio-circle,
.calc-mode-option,
.hero-search input,
.breadcrumb-bar .crumb,
.mobile-category-nav,
.search-modal .search-close,
.cevirici-swap button,
.kurumsal-article,
.iletisim-side,
.kategori-kart-tool,
.kategori-kart-icon,
.page-404-suggest,
.kategori-guide,
.share-calc-link {
  background-color: var(--surface-card);
}

/* Ana sayfa ve kategori rehberlerindeki sabit açık yüzeyler koyu temada
 * açık metinle çakışmamalıdır; tümü ortak yüzey sözleşmesine bağlanır. */
.popular-tools {
  background-color: var(--surface-card);
}

.hh-about {
  background-color: var(--surface-subtle);
}

.hh-about .hh-faq-item {
  border-color: var(--border-default);
}

.kategori-guide-card {
  background-color: var(--surface-subtle);
  border-color: var(--border-subtle);
}

/* Rehberin alt kartları da talep edilen düz beyaz okuma yüzeyidir; yalnız
 * ince nötr kenarlıkla ana rehber kartından ayrılır. */
.kategori-guide .kategori-guide-card {
  background-color: #ffffff;
}

.search-modal {
  background-color: var(--surface-overlay);
}

.result-categories-list li,
.muted-text,
.calc-module .result-line .result-pre,
.pisagor-triangle-wrap,
.sekil-gorsel,
.page-404-grid a,
.search-modal .search-results .search-col--highlight,
.search-modal .search-popular-chips a {
  background-color: var(--surface-subtle);
}

.calc-module .result-line .result-pre,
.pisagor-triangle-wrap,
.sekil-gorsel {
  border-color: var(--border-subtle);
}

.calc-mode-option {
  border-color: var(--border-default);
}

.calc-mode-option:hover {
  border-color: var(--brand-border);
}

.calc-mode-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 2px 12px var(--brand-soft-strong);
}

.tab-switch {
  background: var(--surface-subtle);
}

.tab-switch-btn.is-active {
  background: var(--surface-card);
}

.page-404 {
  background: linear-gradient(135deg, var(--surface-page), var(--surface-accent-soft));
}

.info-callout {
  background: var(--surface-warning);
  color: var(--text-body);
}

.formula-box {
  background-color: var(--surface-formula);
  background-image:
    linear-gradient(90deg, transparent 56px, var(--formula-rule) 56px, var(--formula-rule) 57px, transparent 57px),
    linear-gradient(to right, var(--formula-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--formula-rule) 1px, transparent 1px);
  border-color: var(--brand-border);
  color: var(--text-body);
}

.formula-box .formula-title,
.formula-box .formula-op {
  color: var(--brand);
  text-decoration-color: var(--brand-ring);
}

.formula-box .formula-result {
  color: var(--formula-result);
}

/* Küçük rozetlerde beyaz metnin erişilebilir kontrastı korunur. */
.tag-badge--new {
  background-color: var(--brand-solid);
  color: var(--on-brand-solid);
}

/* 47 resmî kaynak panelindeki eski inline mor değerleri de tema ile yönetilir. */
[aria-label="Veri kapsamı ve resmî kaynaklar"] {
  border-color: var(--brand-border) !important;
  border-left-color: var(--brand) !important;
  background: var(--surface-accent-soft) !important;
}

/* Form kontrolleri ve tüm etkileşim durumları tek kurumsal aksana bağlanır. */
input[type="radio"],
input[type="checkbox"],
input[type="range"],
progress {
  accent-color: var(--control-accent);
}

.field-input,
.field-select,
.mobile-category-select,
.search-modal .search-input,
textarea {
  color: var(--text-heading);
  caret-color: var(--brand);
}

.field-input::placeholder,
.search-modal .search-input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
  opacity: 1;
}

.field-hint,
.field-label-hint,
.calc-module .field-hint,
.calc-module .field-label-hint,
.calc-mode-option small,
.radio-group .radio-label small {
  color: var(--text-subtle);
}

.field-input:focus,
.field-select:focus,
.mobile-category-select:focus,
.search-modal .search-input:focus {
  border-color: var(--brand);
  background-color: var(--control-bg);
  box-shadow: 0 0 0 4px var(--brand-ring);
  outline: none;
}

.radio-group .radio-dot {
  background-color: var(--control-accent);
}

.radio-group input.check:checked + label .radio-circle {
  border-color: var(--control-accent);
  box-shadow: 0 0 0 4px var(--brand-soft-strong);
}

/* Gizlenen gerçek radio kutularında klavye odağı label üzerinde görünür. */
.radio-group input.check:focus-visible + label .radio-circle {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.calc-mode-option:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

:focus-visible {
  outline-color: var(--brand);
}

/* Buton zemini ile metin rengi ayrıdır; dark modda kontrast korunur. */
.btn-primary,
.category-card:hover .btn-primary {
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-text) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.ders-row-remove:hover,
.hero-search .hero-search-btn,
.hero-tags a:hover,
.breadcrumb-bar .crumb:hover,
.share-btn.share-copy:hover,
.share-calc-link:hover,
.share-calc-link:hover:not(:disabled):not(.is-disabled),
.kategori-kart-tool:hover .kategori-kart-icon,
.page-404-grid a:hover,
.search-modal .search-popular-chips a:hover {
  background-color: var(--brand-solid);
  border-color: var(--brand-solid);
  color: var(--on-brand-solid) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.hero-search .hero-search-btn:hover {
  background-color: var(--brand-solid-hover);
  border-color: var(--brand-solid-hover);
}

.kategori-kart-tool:hover .kategori-kart-icon i,
.breadcrumb-bar .crumb:hover i,
.page-404-grid a:hover i {
  color: var(--on-brand-solid);
}

.btn-primary.btn-ghost {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand) !important;
}

.btn-primary.btn-ghost:hover,
.btn-primary.btn-ghost:focus-visible {
  background: var(--brand-solid);
  color: var(--on-brand-solid) !important;
}

.share-calc-link:disabled,
.share-calc-link.is-disabled,
.share-calc-link:disabled:hover,
.share-calc-link.is-disabled:hover {
  background: var(--surface-subtle);
  border-color: var(--border-default);
  color: var(--text-subtle);
}

/* Sonuç paylaşım düğmesi çalışma anında eklenir; aynı semantik sözleşmeye uyar. */
.result-share-btn {
  background: var(--brand-solid) !important;
  border-color: var(--brand-solid) !important;
  color: var(--on-brand-solid) !important;
}

.result-share-btn:hover,
.result-share-btn:focus-visible {
  background: var(--brand-solid-hover) !important;
  border-color: var(--brand-solid-hover) !important;
}

.result-share-to {
  background: var(--surface-card) !important;
  border-color: var(--border-default) !important;
  color: var(--text-body) !important;
}

.result-share-to:hover,
.result-share-to:focus-visible {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* SVG data URI yerine currentColor mask kullanımı tema değişimini destekler. */
.cevirici-swap button::before {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cevirici-swap button:hover::before {
  background-image: none;
  background-color: var(--on-brand-solid);
}

/* Koyu yüzeyler tema ne olursa olsun aynı kurumsal laciverti kullanır. */
.page-hero,
.page-hero--inner,
#footer {
  background-color: var(--surface-inverse);
}

.page-hero h1 .hero-highlight,
.page-hero--inner .hero-eyebrow i,
#footer .footer-list a::before,
#footer .footer-list a:hover,
#footer .footer-more,
#footer .footer-corporate a:hover,
#footer .footer-legal a:hover,
#footer .footer-corporate-row a:hover {
  color: var(--brand-on-inverse) !important;
}

#footer .footer-more:hover {
  color: var(--brand-on-inverse-hover);
}

/* Eski pembe grafik serisi yerine marka dışı, okunaklı amber kullanılır. */
.legend-square.dot-special {
  background-color: #f59e0b;
}

@media (max-width: 575px) {
  .formula-box {
    background-image:
      linear-gradient(90deg, transparent 42px, var(--formula-rule) 42px, var(--formula-rule) 43px, transparent 43px),
      linear-gradient(to right, var(--formula-rule) 1px, transparent 1px),
      linear-gradient(to bottom, var(--formula-rule) 1px, transparent 1px);
  }

  .hh-brand__icon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }

  .hh-brand__wordmark {
    font-size: 20px;
  }
}

/* Windows yüksek kontrast modunda sistem renklerine müdahale edilmez. */
@media (forced-colors: active) {
  :focus-visible,
  .radio-group input.check:focus-visible + label .radio-circle,
  .calc-mode-option:has(input:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }

  .radio-group input.check:checked + label .radio-circle {
    border-color: Highlight;
  }

  .radio-group input.check:checked + label .radio-dot {
    background: Highlight;
  }
}