/* Public Astro pages — global dark mode (html.ag-dark) */

/*
 * Surface system — arka plan ve yazı her zaman eşleşir.
 * Bileşenler sabit #fff / #09090b yerine bu token'ları kullanmalı.
 */
:root {
  --ag-page-bg: #ffffff;
  --ag-page-fg: #09090b;
  --ag-muted-fg: #71717a;
  --ag-border: #e4e4e7;
  --ag-soft-bg: #f4f4f5;

  --ag-surface-bg: #ffffff;
  --ag-surface-fg: #09090b;
  --ag-surface-fg-2: #18181b;
  --ag-surface-muted: #71717a;
  --ag-surface-media: #f4f4f5;

  --ag-control-bg: #ffffff;
  --ag-control-fg: #18181b;
  --ag-control-border: #e4e4e7;
  --ag-control-hover-bg: #fafafa;

  --ag-canvas: var(--ag-page-bg);
  --ag-surface: var(--ag-surface-bg);
  --ag-text: var(--ag-page-fg);
  --ag-ink: var(--ag-surface-fg);
  --ag-muted: var(--ag-muted-fg);
  --ag-subtle: #a1a1aa;
  --ag-nav-idle: #09090b;
  --ag-nav-hover-bg: rgba(0, 0, 0, 0.04);
  --ag-border-08: rgba(0, 0, 0, 0.08);
  --ag-border-10: rgba(0, 0, 0, 0.1);
  --ag-border-15: rgba(0, 0, 0, 0.15);
}

html.ag-dark {
  color-scheme: dark;

  --ag-page-bg: #111214;
  --ag-page-fg: #eceef2;
  --ag-muted-fg: #a9adb6;
  --ag-border: rgba(255, 255, 255, 0.1);
  --ag-soft-bg: #1e2024;

  --ag-surface-bg: #17181b;
  --ag-surface-fg: #f2f4f8;
  --ag-surface-fg-2: #eceef2;
  --ag-surface-muted: #a9adb6;
  --ag-surface-media: #252830;

  --ag-control-bg: #1e2024;
  --ag-control-fg: #eceef2;
  --ag-control-border: rgba(255, 255, 255, 0.12);
  --ag-control-hover-bg: #252830;

  --ag-canvas: var(--ag-page-bg);
  --ag-surface: var(--ag-surface-bg);
  --ag-text: var(--ag-page-fg);
  --ag-ink: var(--ag-surface-fg);
  --ag-muted: var(--ag-muted-fg);
  --ag-subtle: #c6cdd8;
  --ag-nav-idle: #eceef2;
  --ag-nav-hover-bg: rgba(255, 255, 255, 0.06);
  --ag-border-08: rgba(255, 255, 255, 0.08);
  --ag-border-10: rgba(255, 255, 255, 0.1);
  --ag-border-15: rgba(255, 255, 255, 0.15);
}

html.ag-dark body {
  background: var(--ag-page-bg);
  color: var(--ag-page-fg);
}

html.ag-dark .button:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

html.ag-dark .button.primary {
  background: #f2f4f8;
  border-color: #f2f4f8;
  color: #111214;
}

html.ag-dark .button.primary:hover {
  background: #e7e9ee;
  border-color: #e7e9ee;
}

html.ag-dark .button.secondary:hover {
  background: rgba(255, 255, 255, 0.04);
}

html.ag-dark .button.ag-btn-pill:not(.primary):hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Header — koyu sayfa zemini için her zaman açık metin */
html.ag-dark .arch-header-shell {
  --arch-text: #ffffff;
  --arch-text-muted: rgba(255, 255, 255, 0.72);
  --arch-text-subtle: rgba(255, 255, 255, 0.52);
  --arch-glass-bg: rgba(255, 255, 255, 0.1);
  --arch-glass-bg-hover: rgba(255, 255, 255, 0.16);
  --arch-glass-bg-menu: rgba(255, 255, 255, 0.14);
  --arch-glass-inset: rgba(255, 255, 255, 0.08);
  --arch-glass-inset-hover: rgba(255, 255, 255, 0.14);
  --arch-glass-inset-border: rgba(255, 255, 255, 0.14);
  --arch-btn-chip-fill: rgba(255, 255, 255, 0.14);
  --arch-btn-chip-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%);
  --arch-btn-chip-border: rgba(255, 255, 255, 0.26);
  --arch-btn-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --arch-btn-hover-fill: rgba(255, 255, 255, 0.24);
  --arch-btn-hover-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%);
  --arch-btn-hover-border: rgba(255, 255, 255, 0.38);
  --arch-btn-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 4px 14px rgba(0, 0, 0, 0.2);
  --arch-btn-selected-fill: rgba(255, 255, 255, 0.18);
  --arch-btn-selected-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 100%);
  --arch-btn-selected-border: rgba(255, 255, 255, 0.3);
  --arch-btn-selected-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  --arch-btn-press-fill: rgba(255, 255, 255, 0.3);
  --arch-btn-frame-border: rgba(255, 255, 255, 0.14);
  --arch-btn-frame-border-hover: rgba(255, 255, 255, 0.24);
  --arch-btn-frame-border-active: rgba(255, 255, 255, 0.3);
  --arch-dropdown-bg: rgba(24, 24, 27, 0.84);
  --arch-dropdown-border: rgba(255, 255, 255, 0.1);
  --arch-dropdown-blur: blur(52px) saturate(1.18);
  --arch-dropdown-shadow: 0 22px 64px rgba(0, 0, 0, 0.42);
  --arch-dropdown-scrim: linear-gradient(180deg, rgba(9, 9, 11, 0.28), rgba(9, 9, 11, 0.12));
  --arch-mega-title: #ffffff;
  --arch-mega-link: rgba(255, 255, 255, 0.86);
  --arch-mega-link-hover: #ffffff;
}

html.ag-dark .arch-header-shell .arch-header-pill-content {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

html.ag-dark .arch-header-shell .arch-header-search input[type="search"] {
  color-scheme: dark;
}

html.ag-dark .arch-header-shell .arch-header-search input[type="search"]::-webkit-search-cancel-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 3.5l7 7M10.5 3.5l-7 7' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.ag-dark .arch-account-menu__link,
html.ag-dark .arch-account-menu__btn {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

html.ag-dark .arch-account-menu__link:hover,
html.ag-dark .arch-account-menu__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

html.ag-dark .arch-account-menu__sep {
  background: rgba(255, 255, 255, 0.12);
}

/* Arama önerileri */
html.ag-dark .arch-search-suggest,
html.ag-dark .arch-header-shell .arch-header-search .arch-search-suggest {
  background: rgba(28, 28, 31, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
}

html.ag-dark .arch-search-suggest__group-label {
  color: rgba(255, 255, 255, 0.52);
}

html.ag-dark .arch-search-suggest__option {
  color: rgba(255, 255, 255, 0.92);
}

html.ag-dark .arch-search-suggest__option:hover,
html.ag-dark .arch-search-suggest__option.is-active {
  background: rgba(255, 255, 255, 0.1);
}

html.ag-dark .arch-search-suggest__option--all {
  border-top-color: rgba(255, 255, 255, 0.08);
}

html.ag-dark .arch-search-suggest__empty {
  color: rgba(255, 255, 255, 0.55);
}

/* Katalog listeleme */
html.ag-dark .products-page,
html.ag-dark .projects-page,
html.ag-dark .product-detail-page {
  --ink: var(--ag-surface-fg);
  --ink-2: var(--ag-surface-fg-2);
  --muted: var(--ag-surface-muted);
  --line: var(--ag-border);
  --soft: var(--ag-soft-bg);
  --white: var(--ag-surface-bg);
  --catalog-active: var(--ag-surface-fg);
  --catalog-active-hover: var(--ag-surface-fg-2);
  --panel-shadow: 0 2px 12px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);

  background: var(--ag-page-bg);
  color: var(--ag-surface-fg);
}

html.ag-dark .products-page .products-search__field input {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(30, 32, 36, 0.88);
  color: var(--ink);
}

html.ag-dark .products-page .products-search__field input::placeholder {
  color: var(--muted);
}

html.ag-dark .products-page .products-search__field input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(23, 24, 27, 0.96);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}

html.ag-dark .products-page .products-toolbar-glass-btn.arch-liquid-btn,
html.ag-dark .products-page .arch-liquid-btn {
  border-color: rgba(255, 255, 255, 0.12);
  background: #17181b;
  color: var(--ink);
}

html.ag-dark .products-page .products-toolbar-glass-btn.arch-liquid-btn:hover,
html.ag-dark .products-page .arch-liquid-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

html.ag-dark .products-page .l3-category-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

html.ag-dark .products-page .l3-category-card.is-active {
  background: #f2f4f8;
  color: #111214;
}

html.ag-dark .products-page .l3-category-card__media {
  background: #252830;
}

html.ag-dark .products-page .products-compare-bar,
html.ag-dark .products-page .products-compare-modal__panel {
  background: #17181b;
  border-color: var(--line);
  color: var(--ink);
}

/* Katalog toolbar + sayaç */
html.ag-dark .products-page .products-toolbar,
html.ag-dark .projects-page .products-toolbar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(17, 18, 20, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html.ag-dark .products-page .products-count-row p,
html.ag-dark .projects-page .products-count-row p {
  color: var(--muted);
}

html.ag-dark .products-page .products-sort-dd__menu,
html.ag-dark .products-page .products-filter-panel,
html.ag-dark .products-page .products-sidebar,
html.ag-dark .projects-page .products-filter-panel,
html.ag-dark .projects-page .products-sidebar {
  background: #17181b;
  border-color: var(--line);
  color: var(--ink);
}

html.ag-dark .products-page .products-filter-panel label,
html.ag-dark .products-page .products-filter-panel legend,
html.ag-dark .products-page .products-sidebar label,
html.ag-dark .products-page .products-sidebar legend {
  color: var(--ink);
}

html.ag-dark .products-page .products-filter-panel input:not([type="checkbox"]):not([type="radio"]),
html.ag-dark .products-page .products-filter-panel select,
html.ag-dark .products-page .products-sidebar input:not([type="checkbox"]):not([type="radio"]),
html.ag-dark .products-page .products-sidebar select {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

html.ag-dark .products-page .products-active-chips,
html.ag-dark .products-page .products-active-chips button,
html.ag-dark .products-page .products-active-chips a {
  border-color: var(--line);
  color: var(--ink);
}

html.ag-dark .products-page .pagination a,
html.ag-dark .projects-page .pagination a {
  border-color: var(--line);
  color: var(--ink);
}

html.ag-dark .products-page .pagination a:last-child,
html.ag-dark .projects-page .pagination a:last-child {
  background: #f2f4f8;
  border-color: #f2f4f8;
  color: #111214;
}

/* Ürün / proje kartları */
html.ag-dark .products-page .product-card,
html.ag-dark .projects-page .product-card,
html.ag-dark .projects-page .project-directory-card {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

html.ag-dark .products-page .product-card:hover,
html.ag-dark .projects-page .product-card:hover,
html.ag-dark .projects-page .project-directory-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

html.ag-dark .products-page .product-card .product-card__media-frame,
html.ag-dark .projects-page .product-card .product-card__media-frame,
html.ag-dark .projects-page .project-directory-card__media {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.ag-dark .products-page .product-card .product-card__viewport,
html.ag-dark .projects-page .product-card .product-card__viewport,
html.ag-dark .projects-page .project-directory-card__media {
  background: #252830;
  border-color: rgba(255, 255, 255, 0.08);
  color: #a9adb6;
}

html.ag-dark .products-page .product-card .product-card__viewport.is-fit-contain,
html.ag-dark .projects-page .product-card .product-card__viewport.is-fit-contain {
  background: #1a1d24;
}

html.ag-dark .products-page .product-card .meta,
html.ag-dark .projects-page .product-card .meta,
html.ag-dark .projects-page .project-directory-card .meta {
  color: var(--muted);
}

html.ag-dark .products-page .product-card h2,
html.ag-dark .projects-page .product-card h2,
html.ag-dark .projects-page .project-directory-card h2 {
  color: var(--ink);
}

html.ag-dark .products-page .product-card .detail,
html.ag-dark .projects-page .product-card .detail,
html.ag-dark .projects-page .project-directory-card .detail {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-2);
  box-shadow: none;
}

html.ag-dark .products-page .product-card .detail:hover,
html.ag-dark .projects-page .product-card .detail:hover,
html.ag-dark .projects-page .project-directory-card .detail:hover {
  background: #252830;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

html.ag-dark .products-page .product-card .compare-pick-badge,
html.ag-dark .products-page .product-card .compare-pick-badge--off {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

html.ag-dark .products-page .product-card .compare-pick-badge--on {
  background: #f2f4f8;
  border-color: #f2f4f8;
  color: #111214;
}

html.ag-dark .products-page .product-card.is-compare-active.is-compare-selected {
  outline-color: rgba(255, 255, 255, 0.72);
}

/* Marka kartları */
html.ag-dark .products-page .brand-directory-card__body h2 a {
  color: var(--ink);
}

html.ag-dark .products-page .brand-directory-card__body h2 a:hover {
  color: #fff;
}

html.ag-dark .products-page .brand-directory-card__type,
html.ag-dark .products-page .brand-directory-card__location {
  color: var(--muted);
}

html.ag-dark .products-page .brand-directory-card__cover,
html.ag-dark .products-page .brand-directory-card__cover-fallback {
  background: linear-gradient(145deg, #252830 0%, #1e2024 55%, #17181b 100%);
}

html.ag-dark .products-page .brand-directory-card__logo {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

html.ag-dark .products-page .brand-directory-card__logo-initial {
  color: var(--ink);
}

html.ag-dark .products-page .brand-directory-card :is(.product-card__favorite) {
  color: var(--ink);
}

html.ag-dark .products-page .brand-directory-card :is(.product-card__favorite:hover svg, .product-card__favorite.is-active svg, .product-card__favorite[aria-pressed="true"] svg) {
  fill: var(--ink);
  stroke: var(--ink);
}

/* Ürün / proje detay (ref layout) */
html.ag-dark .product-detail-ref {
  --pdr-frame-border: rgba(255, 255, 255, 0.12);
  --pdr-frame-ring-color: rgba(255, 255, 255, 0.06);
  --pdr-glass-bg: rgba(255, 255, 255, 0.1);
  --pdr-glass-border-ink: rgba(255, 255, 255, 0.12);
  background: #111214;
  color: #eceef2;
}

html.ag-dark .product-detail-ref .product-detail-muted,
html.ag-dark .product-detail-ref .product-detail-lead,
html.ag-dark .product-detail-ref .product-detail-brand-lede {
  color: #a9adb6;
}

html.ag-dark .product-detail-ref .product-detail-info-table,
html.ag-dark .product-detail-ref .product-detail-info-row {
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .product-detail-ref .product-detail-info-label {
  color: #a9adb6;
}

html.ag-dark .product-detail-ref .product-detail-info-value {
  color: #eceef2;
}

html.ag-dark .product-detail-related .product-detail-related__btn {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eceef2;
}

html.ag-dark .product-detail-related .section-title {
  color: #f2f4f8;
}

/* Giriş sayfası */
html.ag-dark .login-page {
  background: #111214;
}

html.ag-dark .login-card {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .login-card__form-panel,
html.ag-dark .login-card__title,
html.ag-dark .login-card__lead {
  color: #eceef2;
}

html.ag-dark .login-form__field label {
  color: #a9adb6;
}

html.ag-dark .login-form__field input {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eceef2;
}

html.ag-dark .login-form__field input::placeholder {
  color: #71717a;
}

html.ag-dark .login-form__links a {
  color: #c6cdd8;
}

html.ag-dark .login-form__google-btn {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eceef2;
}

html.ag-dark .login-form__submit {
  background: #f2f4f8;
  color: #111214;
}

/* Marka detay / statik sayfalar */
html.ag-dark .page-band .lead,
html.ag-dark .page-band .eyebrow {
  color: var(--ag-muted);
}

html.ag-dark .empty {
  background: var(--ag-surface);
  border-color: var(--ag-border-15);
  color: var(--ag-muted);
}

/* Hakkımızda */
html.ag-dark .about-page {
  --ap-ink: var(--ag-surface-fg);
  --ap-muted: var(--ag-surface-muted);
  --ap-subtle: var(--ag-subtle);
  --ap-line: var(--ag-border);
  --ap-soft: var(--ag-soft-bg);
  --ap-panel: var(--ag-surface-bg);
  --ap-white: var(--ag-surface-bg);
  --ap-frame-border: var(--ag-border);
  --ap-frame-ring: rgba(255, 255, 255, 0.05);
  background: var(--ag-page-bg);
  color: var(--ag-page-fg);
}

html.ag-dark .about-page .about-info-panel {
  background: #17181b;
}

html.ag-dark .about-page .about-offer-card,
html.ag-dark .about-page .about-audience-card {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .about-page .about-offer-card__icon,
html.ag-dark .about-page .about-audience-card__icon {
  background: #252830;
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .about-page .about-cta {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .about-page .about-cta-btn--primary {
  background: #f2f4f8;
  color: #111214;
}

html.ag-dark .about-page .about-cta-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: #eceef2;
}

/* İletişim */
html.ag-dark .contact-page {
  --cp-ink: var(--ag-surface-fg);
  --cp-muted: var(--ag-surface-muted);
  --cp-subtle: var(--ag-subtle);
  --cp-line: var(--ag-border);
  --cp-soft: var(--ag-soft-bg);
  --cp-panel: var(--ag-surface-bg);
  --cp-badge: var(--ag-surface-media);
  --cp-white: var(--ag-surface-bg);
  background: var(--ag-page-bg);
  color: var(--ag-page-fg);
}

html.ag-dark .contact-page .contact-form-panel,
html.ag-dark .contact-page .contact-mini-card {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .contact-page .contact-field input,
html.ag-dark .contact-page .contact-field select,
html.ag-dark .contact-page .contact-field textarea {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eceef2;
}

html.ag-dark .contact-page .contact-field input::placeholder,
html.ag-dark .contact-page .contact-field textarea::placeholder {
  color: #71717a;
}

html.ag-dark .contact-page .contact-btn--primary,
html.ag-dark .contact-page a.contact-btn--primary {
  background: #f2f4f8;
  color: #111214;
}

html.ag-dark .contact-page a.contact-btn--primary span,
html.ag-dark .contact-page a.contact-btn--primary svg {
  color: #111214;
}

html.ag-dark .contact-page .contact-btn--ghost {
  background: #1e2024;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eceef2;
}

html.ag-dark .contact-page .contact-reach__badge {
  background: #252830;
  color: #c6cdd8;
}

html.ag-dark .contact-page .contact-mini-card__icon {
  background: #252830;
  color: #eceef2;
}

/* SSS */
html.ag-dark .faq-page {
  --fp-ink: var(--ag-surface-fg);
  --fp-muted: var(--ag-surface-muted);
  --fp-subtle: var(--ag-subtle);
  --fp-line: var(--ag-border);
  --fp-soft: var(--ag-soft-bg);
  --fp-panel: var(--ag-surface-bg);
  --fp-badge: var(--ag-surface-media);
  --fp-white: var(--ag-surface-bg);
  --fp-frame-border: var(--ag-border);
  --fp-frame-ring: rgba(255, 255, 255, 0.05);
  background: var(--ag-page-bg);
  color: var(--ag-page-fg);
}

html.ag-dark .faq-page .faq-support-card,
html.ag-dark .faq-page .faq-item {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
}

html.ag-dark .faq-page .faq-item[open] {
  background: #1e2024;
}

html.ag-dark .faq-page .faq-main__cta {
  background: #f2f4f8;
  color: #111214;
}

html.ag-dark .faq-page .faq-reach {
  background: #17181b;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Marketing / yardım / kariyer vb. */
html.ag-dark .arch-public {
  --ink: var(--ag-surface-fg);
  --ink-2: var(--ag-surface-fg-2);
  --muted: var(--ag-surface-muted);
  --line: var(--ag-border);
  --soft: var(--ag-surface-bg);
  --white: var(--ag-page-bg);
  background: var(--ag-page-bg);
  color: var(--ag-page-fg);
}

html.ag-dark .arch-public .arch-public-hero {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.ag-dark .arch-public .arch-public-card {
  background: var(--ag-surface-bg);
  border-color: var(--ag-border);
}

html.ag-dark .arch-public .arch-public-faq details {
  background: var(--ag-surface-bg);
  border-color: var(--ag-border);
}