/* ============================================================
   YZ Merkezi (Yapay Zeka Merkezi) - Frontend CSS
   ============================================================ */
:root {
    color-scheme: light;

    /* Petrol brand core with a restrained editorial amber. */
    --color-brand: #0f766e;
    --color-brand-strong: #0b5e58;
    --color-brand-deep: #084c48;
    --color-brand-action: #0f766e;
    --color-brand-action-hover: #0b5e58;
    --color-brand-action-active: #084c48;
    --color-brand-vivid: #11877e;
    --color-brand-gradient: #0f766e;
    --color-brand-light: #89e4d0;
    --color-accent: #0b5e58;
    --color-accent-action: #0f766e;
    --color-accent-vivid: #11877e;
    --color-accent-glow: #5fd6bb;
    --color-accent-light: #89e4d0;
    --color-editorial: #d8b36a;

    /* Semantic state colors */
    --color-success: #15803d;
    --color-warning: #9a5800;
    --color-danger: #9f1239;
    --color-danger-strong: #881337;
    --color-success-action: #15803d;
    --color-danger-action: #9f1239;
    --color-danger-action-hover: #881337;
    --color-focus: #0f766e;

    /* Text, surfaces and borders */
    --color-text: #17201c;
    --color-text-secondary: #52605a;
    --color-text-muted: #66736d;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f8f5;
    --color-surface-muted: #edf2ee;
    --color-border: #d5ded8;
    --color-border-strong: #9baba2;
    --color-on-brand: #ffffff;
    --color-on-dark: #ffffff;
    --color-on-dark-secondary: #d3ddd7;
    --color-on-dark-muted: #aab8b0;
    --color-on-dark-highlight: #89e4d0;
    --color-control-border: #738079;
    --color-control-border-hover: #52605a;
    --color-mask-opaque: #000000;
    --color-mask-soft: rgba(0, 0, 0, 0.45);
    --hero-overlay-start: rgba(6, 14, 11, 0.98);
    --hero-overlay-mid: rgba(6, 18, 14, 0.84);
    --hero-overlay-end: rgba(6, 18, 14, 0.32);
    --hero-overlay-bottom: rgba(6, 14, 11, 0.9);
    --hero-control-surface: rgba(13, 24, 20, 0.76);
    --hero-control-surface-strong: rgba(13, 24, 20, 0.92);
    --hero-control-border: rgba(255, 255, 255, 0.25);

    /* Graphite-green surfaces retained for dark theme and auth layouts. */
    --color-dark-deep: #0d1210;
    --color-dark-brand: #141b18;
    --color-dark-warm: #1b2521;
    --color-dark-accent: #24312b;
    --color-dark-surface: #141b18;
    --color-dark-elevated: #1b2521;
    --color-dark-panel: #24312b;

    /* Translucent interaction and state layers */
    --color-brand-faint: rgba(15, 118, 110, 0.05);
    --color-brand-soft: rgba(15, 118, 110, 0.1);
    --color-brand-soft-strong: rgba(15, 118, 110, 0.17);
    --color-brand-border-soft: rgba(15, 118, 110, 0.2);
    --color-brand-border: rgba(15, 118, 110, 0.3);
    --color-brand-line: rgba(15, 118, 110, 0.22);
    --color-brand-line-strong: rgba(15, 118, 110, 0.38);
    --color-accent-faint: rgba(11, 94, 88, 0.04);
    --color-accent-soft: rgba(11, 94, 88, 0.08);
    --color-accent-line: rgba(11, 94, 88, 0.72);
    --color-accent-line-strong: rgba(11, 94, 88, 0.38);
    --color-accent-shadow: rgba(11, 94, 88, 0.18);
    --color-focus-ring: rgba(15, 118, 110, 0.2);
    --color-success-subtle: rgba(21, 128, 61, 0.06);
    --color-success-soft: rgba(21, 128, 61, 0.1);
    --color-success-border-soft: rgba(21, 128, 61, 0.15);
    --color-success-border: rgba(21, 128, 61, 0.3);
    --color-warning-soft: rgba(154, 88, 0, 0.1);
    --color-warning-soft-strong: rgba(154, 88, 0, 0.15);
    --color-warning-border: rgba(154, 88, 0, 0.3);
    --color-danger-soft: rgba(159, 18, 57, 0.1);
    --color-danger-soft-strong: rgba(159, 18, 57, 0.15);
    --color-danger-border: rgba(159, 18, 57, 0.3);

    /* Glass, overlay and decorative layers */
    --color-surface-glass: rgba(255, 255, 255, 0.9);
    --color-surface-glass-strong: rgba(255, 255, 255, 0.97);
    --color-glass-grid: rgba(255, 255, 255, 0.025);
    --color-glass-faint: rgba(255, 255, 255, 0.04);
    --color-glass-subtle: rgba(255, 255, 255, 0.06);
    --color-glass: rgba(255, 255, 255, 0.08);
    --color-glass-border: rgba(255, 255, 255, 0.12);
    --color-glass-shine: rgba(255, 255, 255, 0.15);
    --color-glass-strong: rgba(255, 255, 255, 0.25);
    --color-on-dark-faded: rgba(255, 255, 255, 0.5);
    --color-backdrop: rgba(0, 0, 0, 0.4);
    --color-backdrop-strong: rgba(23, 32, 28, 0.55);
    --color-divider-faint: rgba(23, 32, 28, 0.04);
    --color-shadow-dark: rgba(0, 0, 0, 0.2);
    --color-accent-vivid-soft: rgba(17, 135, 126, 0.12);
    --color-accent-glow-medium: rgba(95, 214, 187, 0.46);

    /* 8px spacing scale; 4px is reserved for compact internal alignment. */
    --space-0-5: 0.25rem;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --space-6: 3rem;
    --space-8: 4rem;

    /* Type scale */
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Source Serif 4', Georgia, serif;
    --font-size-caption: 0.875rem;
    --font-size-body: 0.9375rem;
    --font-size-lead: 1.0625rem;
    --font-size-title-sm: 1.375rem;
    --font-size-title: 1.75rem;
    --font-size-display: clamp(2rem, 4vw, 3rem);

    /* Shape and elevation */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(23, 32, 28, 0.06);
    --shadow-md: 0 6px 18px rgba(23, 32, 28, 0.08);
    --shadow-lg: 0 12px 30px rgba(23, 32, 28, 0.1);
    --shadow-xl: 0 18px 42px rgba(23, 32, 28, 0.12);
    --shadow-brand: 0 8px 20px rgba(15, 118, 110, 0.16);
    --shadow-glow: 0 0 24px rgba(15, 118, 110, 0.1);
    --shadow-card-hover: 0 10px 24px rgba(23, 32, 28, 0.09), 0 0 0 1px rgba(15, 118, 110, 0.08);

    /* Glassmorphism & depth */
    --glass-card-bg: rgba(255, 255, 255, 0.65);
    --glass-card-blur: 16px;
    --glass-card-border: rgba(255, 255, 255, 0.3);

    /* Section alternating backgrounds */
    --color-section-alt: #f0f4f1;
    --color-section-warm: #f5f4ee;

    /* Gradient mesh for sections */
    --gradient-section-mesh: radial-gradient(circle at 0% 0%, rgba(15, 118, 110, 0.03) 0%, transparent 50%),
                             radial-gradient(circle at 100% 100%, rgba(216, 179, 106, 0.03) 0%, transparent 50%);

    /* Micro-animation timing */
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    /* Shared gradients */
    --gradient-brand: linear-gradient(135deg, var(--color-brand-action), var(--color-brand-gradient), var(--color-accent-action));
    --gradient-card: linear-gradient(145deg, var(--color-brand-faint), var(--color-accent-faint));
    --gradient-avatar: linear-gradient(135deg, var(--color-brand-soft), var(--color-accent-soft));
    --gradient-hero: linear-gradient(165deg, var(--color-dark-deep) 0%, var(--color-dark-brand) 30%, var(--color-dark-warm) 60%, var(--color-dark-accent) 100%);
    --gradient-auth: linear-gradient(145deg, var(--color-dark-surface) 0%, var(--color-dark-elevated) 48%, var(--color-dark-panel) 100%);
    --gradient-auth-text: linear-gradient(90deg, var(--color-brand-light), var(--color-accent-light));
}

html[data-theme='dark'] {
    color-scheme: dark;

    /* Mint brand inks keep dark-theme actions independently accessible. */
    --color-brand: #5fd6bb;
    --color-brand-strong: #89e4d0;
    --color-brand-action: #5fd6bb;
    --color-brand-action-hover: #89e4d0;
    --color-brand-action-active: #46bfa7;
    --color-brand-gradient: #5fd6bb;
    --color-brand-light: #89e4d0;
    --color-accent: #89e4d0;
    --color-accent-action: #5fd6bb;
    --color-accent-vivid: #5fd6bb;
    --color-accent-light: #89e4d0;
    --color-on-brand: #09231c;
    --color-success: #6ee7a0;
    --color-warning: #fcd34d;
    --color-danger: #ff9aae;
    --color-focus: #5fd6bb;

    /* Dark text, surfaces and controls */
    --color-text: #edf3ef;
    --color-text-secondary: #aab8b0;
    --color-text-muted: #94a49b;
    --color-surface: #141b18;
    --color-surface-subtle: #0d1210;
    --color-surface-muted: #1b2521;
    --color-border: #2b3832;
    --color-border-strong: #53675d;
    --color-control-border: #71847a;
    --color-control-border-hover: #aab8b0;

    /* Dark interaction layers */
    --color-brand-faint: rgba(95, 214, 187, 0.08);
    --color-brand-soft: rgba(95, 214, 187, 0.12);
    --color-brand-soft-strong: rgba(95, 214, 187, 0.2);
    --color-brand-border-soft: rgba(95, 214, 187, 0.24);
    --color-brand-border: rgba(95, 214, 187, 0.38);
    --color-brand-line: rgba(95, 214, 187, 0.3);
    --color-brand-line-strong: rgba(95, 214, 187, 0.5);
    --color-accent-faint: rgba(137, 228, 208, 0.07);
    --color-accent-soft: rgba(137, 228, 208, 0.12);
    --color-accent-line: rgba(137, 228, 208, 0.78);
    --color-accent-line-strong: rgba(137, 228, 208, 0.48);
    --color-accent-shadow: rgba(95, 214, 187, 0.2);
    --color-focus-ring: rgba(95, 214, 187, 0.24);
    --color-success-subtle: rgba(110, 231, 160, 0.08);
    --color-success-soft: rgba(110, 231, 160, 0.12);
    --color-success-border-soft: rgba(110, 231, 160, 0.2);
    --color-success-border: rgba(110, 231, 160, 0.38);
    --color-warning-soft: rgba(252, 211, 77, 0.1);
    --color-warning-soft-strong: rgba(252, 211, 77, 0.16);
    --color-warning-border: rgba(252, 211, 77, 0.38);
    --color-danger-soft: rgba(255, 154, 174, 0.1);
    --color-danger-soft-strong: rgba(255, 154, 174, 0.16);
    --color-danger-border: rgba(255, 154, 174, 0.38);

    /* Dark glass and elevation */
    --color-surface-glass: rgba(20, 27, 24, 0.94);
    --color-surface-glass-strong: rgba(20, 27, 24, 0.98);
    --color-backdrop-strong: rgba(5, 10, 8, 0.72);
    --color-divider-faint: rgba(237, 243, 239, 0.08);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.36);
    --shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.4);
    --shadow-brand: 0 10px 32px rgba(95, 214, 187, 0.2);
    --shadow-glow: 0 0 40px rgba(95, 214, 187, 0.12);
    --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(95, 214, 187, 0.1);

    /* Dark glassmorphism */
    --glass-card-bg: rgba(20, 27, 24, 0.72);
    --glass-card-border: rgba(255, 255, 255, 0.08);

    /* Dark section backgrounds */
    --color-section-alt: #18211d;
    --color-section-warm: #1b2521;
    --gradient-section-mesh: radial-gradient(circle at 0% 0%, rgba(95, 214, 187, 0.04) 0%, transparent 50%),
                             radial-gradient(circle at 100% 100%, rgba(216, 179, 106, 0.03) 0%, transparent 50%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-body);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.6;
}

h1,
h2,
.section-title,
.detail-title,
.page-header-component h1 {
    font-family: var(--font-family-body);
}

img,
svg,
video {
    max-width: 100%;
}

a {
    color: var(--color-brand-strong);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-accent);
}