/* Dayco theme for ARC UI 4.9.1. Loaded last so legacy pages share one system. */
:root,
:root[data-theme="light"],
:root[data-theme="auto"] {
    color-scheme: light;
    --bg-deep: #eef3f9;
    --bg-base: #f6f8fb;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --surface-primary: #ffffff;
    --surface-secondary: #f6f8fb;
    --surface-raised: #ffffff;
    --surface-overlay: #eef3f9;
    --surface-hover: #edf3fb;
    --text-primary: #14233a;
    --text-secondary: #53647b;
    --text-muted: #69798e;
    --text-ghost: #8795a8;
    --text-primary-rgb: 20, 35, 58;
    --text-muted-rgb: 105, 121, 142;
    --border-subtle: #e7edf4;
    --border-default: #d7e0ea;
    --border-bright: #b8c6d6;
    --border-default-rgb: 215, 224, 234;
    --accent-primary: #003b78;
    --accent-secondary: #e63946;
    --accent-primary-rgb: 0, 59, 120;
    --accent-secondary-rgb: 230, 57, 70;
    --interactive: var(--accent-primary);
    --interactive-rgb: var(--accent-primary-rgb);
    --on-accent: #ffffff;
    --shadow-xs: 0 1px 2px rgba(20, 35, 58, .06);
    --shadow-sm: 0 5px 16px rgba(20, 35, 58, .07);
    --shadow-md: 0 12px 32px rgba(20, 35, 58, .10);
    --shadow-lg: 0 20px 52px rgba(20, 35, 58, .13);
    --shadow-xl: 0 28px 72px rgba(20, 35, 58, .16);
    --shadow-overlay: 0 24px 64px rgba(20, 35, 58, .18);
    --shadow-inset: inset 0 1px 2px rgba(20, 35, 58, .06);
    --font-body-family: "Inter";
    --font-body-fallback: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --font-label-family: "Inter";
    --font-label-fallback: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --font-display-family: "Manrope";
    --font-display-fallback: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    --font-body: var(--font-body-family), var(--font-body-fallback);
    --font-label: var(--font-label-family), var(--font-label-fallback);
    --font-display: var(--font-display-family), var(--font-display-fallback);
    --font-body-weight: 400;
    --font-label-weight: 600;
    --font-display-weight: 700;
    --body-size: 16px;
    --body-lh: 1.65;
    --heading-lh: 1.16;
    --display-xl-spacing: -.035em;
    --label-spacing: .035em;
    --label-inline-size: 11px;
    --label-inline-spacing: .055em;
    --corporate-navy: #0b2748;
    --corporate-navy-soft: #143a64;
    --text-on-dark: #f4f7fb;
    --text-on-dark-muted: #c3d0df;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --focus-ring: rgba(var(--accent-primary-rgb), .22);
    --glow-xs: 0 0 0 1px rgba(var(--accent-primary-rgb), .08);
    --glow-sm: 0 4px 14px rgba(var(--accent-primary-rgb), .12);
    --glow-md: 0 10px 26px rgba(var(--accent-primary-rgb), .14);
    --glow-hover: 0 6px 18px rgba(var(--accent-primary-rgb), .14);
    --glow-card-hover: 0 14px 34px rgba(20, 35, 58, .11);
    --glow-primary: 0 8px 22px rgba(var(--accent-primary-rgb), .22);
    --glow-secondary: 0 8px 22px rgba(var(--accent-secondary-rgb), .16);
    --interactive-hover: var(--glow-hover);
    --interactive-active: var(--glow-primary);

    /* Compatibility aliases keep every existing PHP template on ARC tokens. */
    --primary-blue: var(--accent-primary);
    --primary-red: var(--accent-secondary);
    --light-gray: var(--surface-secondary);
    --dark-text: var(--text-primary);
    --white: var(--surface-primary);
    --admin-ink: var(--text-primary);
    --admin-muted: var(--text-muted);
    --admin-line: var(--border-default);
    --admin-accent: var(--interactive);
    --admin-surface: var(--surface-primary);
}

body {
    color: var(--text-primary);
    background-color: var(--bg-base);
    font-family: var(--font-body);
}

body:has(.setup-container),
body:has(.backup-container) {
    background: radial-gradient(circle at top right, rgba(var(--accent-secondary-rgb), .12), transparent 34%),
                radial-gradient(circle at bottom left, rgba(var(--accent-primary-rgb), .16), transparent 38%),
                var(--bg-deep);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: var(--font-display);
}

/* Existing server-rendered controls now consume the same ARC design tokens. */
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--text-primary);
    background-color: var(--surface-primary);
    border-color: var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: rgba(var(--interactive-rgb), .55);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-ring);
    outline: 0;
}

:where(.product-card, .service-card, .feature-card, .product-section, .contact-form-container,
       .contact-info-card, .service-type-card, .service-feature-card, .admin-panel, .stat-card,
       .data-table-container, .form-section, .login-container, .verify-container, .backup-container) {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

:where(.cta-button, .btn-primary, .submit-btn) {
    border-radius: var(--radius-full);
}

:where(.btn-secondary, .pagination-btn, .back-button) {
    border-color: var(--border-default);
    border-radius: var(--radius-full);
}

:where(.alert, .error-message, .alert-error, .alert-success) {
    border-radius: var(--radius-md);
}

:where(table) {
    color: var(--text-primary);
}

:where(th) {
    color: var(--text-secondary);
    font-family: var(--font-label);
}

arc-button {
    vertical-align: middle;
}

/* Every visible application surface is now explicitly governed by ARC UI. */
html.arc-ui body {
    color: var(--text-primary) !important;
    background-color: var(--bg-base) !important;
    font-family: var(--font-body) !important;
    font-size: var(--body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--body-lh);
    letter-spacing: -.005em;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}

html.arc-ui :where(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--font-display-weight) !important;
    line-height: var(--heading-lh) !important;
    text-wrap: balance;
}

html.arc-ui :where(h1, .home-hero h1, .not-found-copy h1) {
    letter-spacing: -.04em !important;
}

html.arc-ui :where(h2, .page-header h1, .product-details h1) {
    letter-spacing: -.028em !important;
}

html.arc-ui :where(h3, h4, h5, h6) {
    letter-spacing: -.015em !important;
}

html.arc-ui :where(p, li, dd, .intro-text, .product-short-desc, .form-description,
    .search-info, .currency-rate-info, .admin-chart-note, .admin-muted) {
    color: var(--text-secondary);
    line-height: 1.68;
}

html.arc-ui :where(a, button, input, select, textarea, label, summary) {
    font-family: var(--font-body) !important;
}

html.arc-ui :where(.eyebrow, .showcase-label, .service-support-label, .not-found-label,
    .admin-eyebrow, .admin-nav-caption, th, .spec-key, .product-badge, .admin-badge) {
    font-family: var(--font-label) !important;
    font-weight: var(--font-label-weight) !important;
    letter-spacing: .075em !important;
}

html.arc-ui :where(.nav-menu a, .footer-navigation a, .admin-sidebar a,
    .btn-primary, .btn-secondary, .action-btn, button) {
    font-weight: 600 !important;
    letter-spacing: .005em;
}

html.arc-ui :where(.product-price, .stat-card h3, .visitor-stat strong,
    .catalog-card-number, .not-found-receipt strong) {
    font-family: var(--font-display) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}

html.arc-ui :where(.site-header, .admin-header) {
    border-color: var(--border-default) !important;
    box-shadow: var(--shadow-sm) !important;
}

html.arc-ui .site-header {
    background: color-mix(in srgb, var(--surface-primary) 94%, transparent) !important;
    backdrop-filter: blur(16px);
}

html.arc-ui :where(.home-hero, .products, .product-detail, .contact-form-section,
    .service-types, .service-process, .kvkk-section, .not-found-section, .catalog-page) {
    background: var(--bg-base) !important;
}

html.arc-ui :where(.services, .features, .brands-slider, .buying-guide,
    .service-features, .contact-info-section, .breadcrumb-section, .map-section) {
    background: var(--surface-secondary) !important;
}

html.arc-ui :where(.home-consultation, .service-support-card, .catalog-assistance) {
    background: linear-gradient(135deg, var(--accent-primary),
        color-mix(in srgb, var(--accent-primary) 72%, var(--accent-secondary))) !important;
    border-color: rgba(var(--accent-primary-rgb), .28) !important;
    box-shadow: var(--shadow-lg) !important;
}

html.arc-ui :where(.home-consultation, .service-support-card, .catalog-assistance) :where(h2, p, .eyebrow) {
    color: var(--on-accent) !important;
}

html.arc-ui :where(.product-card, .service-card, .feature-card, .catalog-card,
    .product-section, .product-images, .contact-form-wrapper, .contact-form-content,
    .contact-form-sidebar, .contact-info-card, .service-type-card, .service-feature-card,
    .process-step, .sidebar-card, .search-empty-state, .kvkk-container, .not-found-receipt,
    .admin-panel, .quick-actions, .stat-card, .visitor-stat, .data-table, .table-container,
    .form-container, .admin-form-section, .admin-table-toolbar, .admin-data-filters,
    .login-container, .verify-container, .setup-container, .backup-container,
    .info-section, .codes-wrapper, .warning-box, .info-box) {
    color: var(--text-primary) !important;
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

html.arc-ui :where(.product-card, .service-card, .feature-card, .catalog-card,
    .contact-info-card, .service-type-card, .service-feature-card) {
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
}

html.arc-ui :where(.product-card, .service-card, .feature-card, .catalog-card,
    .contact-info-card, .service-type-card, .service-feature-card):hover {
    border-color: rgba(var(--interactive-rgb), .34) !important;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--interactive-rgb), .08) !important;
}

html.arc-ui :where(.product-image, .main-image, .image-preview, .admin-upload-preview img,
    .brand-item, .admin-chart-track, .search-empty-art, .manual-entry, .code-item) {
    background: var(--surface-secondary) !important;
    border-color: var(--border-subtle) !important;
}

html.arc-ui :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--text-primary) !important;
    background: var(--surface-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-inset) !important;
}

html.arc-ui :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: rgba(var(--interactive-rgb), .55) !important;
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-ring) !important;
    outline: 0 !important;
}

html.arc-ui :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--interactive) !important;
}

html.arc-ui :where(button, .btn-primary, .btn-secondary, .action-btn, .quick-btn,
    .currency-btn, .currency-btn-sm, .pagination-btn, .back-button) {
    font-family: var(--font-label) !important;
    border-radius: var(--radius-full) !important;
    transition: background var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

html.arc-ui :where(button[type="submit"], .btn-primary, .action-btn, .quick-btn,
    .search-btn, .search-empty-primary) {
    color: var(--on-accent) !important;
    background: var(--interactive) !important;
    border-color: var(--interactive) !important;
}

html.arc-ui :where(.btn-secondary, .pagination-btn, .back-button,
    .currency-btn, .currency-btn-sm, .search-empty-contact) {
    color: var(--interactive) !important;
    background: var(--surface-primary) !important;
    border-color: var(--border-default) !important;
}

html.arc-ui :where(button, .btn-primary, .btn-secondary, .action-btn, .quick-btn):hover {
    box-shadow: var(--interactive-hover) !important;
}

html.arc-ui :where(.alert, .error-message, .alert-error, .alert-success,
    .form-message, .security-state-message, .copy-notification) {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
}

html.arc-ui .warning-box {
    color: var(--color-warning) !important;
    background: color-mix(in srgb, var(--color-warning) 10%, var(--surface-primary)) !important;
    border-color: color-mix(in srgb, var(--color-warning) 32%, var(--border-default)) !important;
}

html.arc-ui :where(.warning-box strong, .warning-box p) {
    color: color-mix(in srgb, var(--color-warning) 66%, var(--text-primary)) !important;
}

html.arc-ui :where(.setup-step, .info-section, .manual-entry, .code-item, .qr-code-container img) {
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}

html.arc-ui .step-number {
    color: var(--on-accent) !important;
    background: var(--interactive) !important;
    box-shadow: var(--glow-sm) !important;
}

html.arc-ui .code-item:hover {
    color: var(--interactive) !important;
    background: var(--surface-hover) !important;
    border-color: rgba(var(--interactive-rgb), .42) !important;
}

html.arc-ui .copy-notification {
    color: #fff !important;
    background: var(--color-success) !important;
    box-shadow: var(--shadow-md) !important;
}

html.arc-ui :where(.alert-success, .form-message.success, .security-state-message) {
    color: var(--color-success) !important;
    background: color-mix(in srgb, var(--color-success) 9%, var(--surface-primary)) !important;
    border-color: color-mix(in srgb, var(--color-success) 28%, var(--border-default)) !important;
}

html.arc-ui :where(.alert-error, .error-message, .form-message.error, .btn-delete) {
    color: var(--color-error) !important;
    background: color-mix(in srgb, var(--color-error) 8%, var(--surface-primary)) !important;
    border-color: color-mix(in srgb, var(--color-error) 25%, var(--border-default)) !important;
}

html.arc-ui :where(.product-badge, .admin-badge, .eyebrow, .not-found-label,
    .service-support-label, .showcase-label) {
    font-family: var(--font-label) !important;
    border-radius: var(--radius-full) !important;
}

html.arc-ui :where(table, .specs-table, .visitor-table) {
    color: var(--text-primary) !important;
    background: var(--surface-primary) !important;
    border-color: var(--border-default) !important;
}

html.arc-ui :where(th, .spec-key) {
    color: var(--text-muted) !important;
    background: var(--surface-secondary) !important;
    border-color: var(--border-default) !important;
    font-family: var(--font-label) !important;
}

html.arc-ui :where(td, .spec-value) {
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

html.arc-ui :where(tbody tr:hover) {
    background: var(--surface-hover) !important;
}

html.arc-ui :where(.breadcrumb, .pagination, .admin-tabs, .currency-toggle,
    .currency-toggle-inline, .form-actions) {
    border-color: var(--border-default) !important;
}

html.arc-ui :where(.site-footer, .admin-sidebar) {
    background: var(--corporate-navy) !important;
    border-color: var(--border-default) !important;
}

html.arc-ui .admin-header {
    background: var(--corporate-navy) !important;
}

html.arc-ui :where(.admin-sidebar a, .admin-header, .admin-header a, .site-footer,
    .site-footer a, .site-footer p, .site-footer li) {
    color: var(--text-on-dark-muted) !important;
}

html.arc-ui :where(.admin-header .admin-user, .admin-header .admin-brand,
    .site-footer h2, .site-footer h3, .site-footer strong, .footer-company-name) {
    color: var(--text-on-dark) !important;
}

html.arc-ui :where(.admin-sidebar a.active, .admin-sidebar a:hover) {
    color: var(--on-accent) !important;
    background: var(--corporate-navy-soft) !important;
}

html.arc-ui arc-button[data-arc-upgraded="true"] {
    margin: 0;
}

/* ARC is authoritative: dynamically discovered legacy markup is only a
   semantic shell and receives its visuals from ARC tokens/components. */
html.arc-ui [data-arc-system="true"] {
    font-family: var(--font-body) !important;
}

html.arc-ui [data-arc-surface="card"] {
    color: var(--text-primary);
    background: var(--surface-primary);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

html.arc-ui [data-arc-surface="table"] {
    color: var(--text-primary);
    background: var(--surface-primary);
    border-color: var(--border-default);
}

html.arc-ui [data-arc-surface="overlay"] {
    color: var(--text-primary);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
}

html.arc-ui [data-arc-surface="disclosure"] {
    border-color: var(--border-subtle);
}

html.arc-ui [data-arc-control="field"] {
    color: var(--text-primary) !important;
    background: var(--surface-primary) !important;
    border-color: var(--border-default) !important;
}

html.arc-ui [data-arc-control="button"] {
    font-family: var(--font-label) !important;
}

html.arc-ui arc-button.btn-delete {
    --interactive: var(--color-error);
    --interactive-rgb: 190, 36, 53;
}

html.arc-ui arc-button.contact-link {
    --arc-button-radius: var(--radius-md);
}

html.arc-ui arc-button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

html.arc-ui .arc-action-link {
    color: inherit;
}

.site-header arc-button.header-cta,
.admin-header arc-button {
    flex: 0 0 auto;
}

.site-header arc-button.header-cta {
    margin-left: .5rem;
    padding: 0;
    font-size: inherit;
}

.site-header arc-button.header-cta a,
.admin-header arc-button a {
    color: inherit;
}

@media (max-width: 768px) {
    .site-header arc-button.header-cta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}