/**
 * KriptoHukuku.com — uygulama CSS'i (saf CSS, cascade layers, mobile-first).
 * Token'lar tokens.css'ten gelir. BEM benzeri isimlendirme.
 */

@layer reset, base, layout, components, utilities;

/* ============================= RESET ============================= */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100dvh;
    }

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

    input, button, textarea, select {
        font: inherit;
    }

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

/* ============================= BASE ============================= */
@layer base {
    body {
        font-family: var(--font-sans);
        font-size: var(--font-size-300);
        line-height: var(--line-height-base);
        color: var(--color-text-on-light);
        background-color: var(--color-white);
    }

    h1, h2, h3, h4 {
        line-height: var(--line-height-tight);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary-900);
    }

    a {
        color: var(--color-primary-600);
    }

    a:hover {
        color: var(--color-primary-800);
    }

    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
    }

    .skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: var(--z-toast);
        background: var(--color-primary-900);
        color: var(--color-text-on-dark);
        padding: var(--space-2) var(--space-4);
        border-radius: 0 0 var(--radius-sm) 0;
    }

    .skip-link:focus {
        left: 0;
        color: var(--color-text-on-dark);
    }
}

/* ============================= LAYOUT ============================= */
@layer layout {
    .container {
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-pad);
    }

    .site {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }

    .site-main {
        flex: 1;
    }

    .section {
        padding-block: var(--space-7);
    }

    .section__title {
        font-size: var(--font-size-500);
        margin-block-end: var(--space-5);
    }

    @media (min-width: 768px) {
        .section {
            padding-block: var(--space-8);
        }

        .section__title {
            font-size: var(--font-size-600);
        }
    }
}

/* ============================= COMPONENTS ============================= */
@layer components {
    /* ---- Header ---- */
    .site-header {
        background: var(--color-primary-900);
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        box-shadow: var(--shadow-sm);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        min-height: 3.75rem;
    }

    .brand {
        text-decoration: none;
        font-size: var(--font-size-400);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-on-dark); /* koyu zemin → açık metin (kontrast kuralı) */
    }

    .brand__tld {
        color: var(--color-accent-500);
    }

    .site-nav__list {
        display: flex;
        gap: var(--space-4);
        list-style: none;
        padding: 0;
    }

    .site-nav__list a {
        color: var(--color-text-on-dark-muted); /* koyu zemin → açık metin */
        text-decoration: none;
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-medium);
    }

    .site-nav__list a:hover {
        color: var(--color-text-on-dark);
    }

    .site-nav__toggle {
        display: none;
        background: none;
        border: 1px solid var(--color-primary-600);
        border-radius: var(--radius-sm);
        padding: var(--space-2);
        cursor: pointer;
    }

    .site-nav__toggle-bar {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--color-text-on-dark);
        margin-block: 4px;
    }

    .lang-switch__link {
        color: var(--color-text-on-dark-muted);
        text-decoration: none;
        font-size: var(--font-size-100);
        font-weight: var(--font-weight-medium);
        border: 1px solid var(--color-primary-600);
        border-radius: var(--radius-sm);
        padding: var(--space-1) var(--space-2);
    }

    .lang-switch__link:hover {
        color: var(--color-text-on-dark);
        border-color: var(--color-primary-500);
    }

    /* JS aktifken mobil menü daraltılır (progressive enhancement) */
    @media (max-width: 767px) {
        .js .site-nav__toggle {
            display: block;
        }

        .js .site-nav__list {
            display: none;
            position: absolute;
            inset-inline: 0;
            top: 100%;
            flex-direction: column;
            gap: 0;
            background: var(--color-primary-800);
            padding: var(--space-3) var(--space-4);
            box-shadow: var(--shadow-md);
        }

        .js .site-nav__list a {
            display: block;
            padding-block: var(--space-3);
        }

        .js .site-nav--open .site-nav__list {
            display: flex;
        }
    }

    /* ---- Hero ---- */
    .hero {
        background: linear-gradient(160deg, var(--color-primary-900), var(--color-primary-700));
        color: var(--color-text-on-dark); /* koyu zemin → açık metin, explicit */
        padding-block: var(--space-8);
    }

    .hero__eyebrow {
        color: var(--color-accent-500);
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-block-end: var(--space-3);
    }

    .hero__title {
        color: var(--color-text-on-dark); /* h1 base rengini ezer — kontrast kuralı */
        font-size: var(--font-size-600);
        max-width: 22ch;
        margin-block-end: var(--space-4);
    }

    .hero__lead {
        color: var(--color-text-on-dark-muted);
        font-size: var(--font-size-400);
        max-width: 52ch;
    }

    @media (min-width: 768px) {
        .hero {
            padding-block: var(--space-9);
        }

        .hero__title {
            font-size: var(--font-size-700);
        }
    }

    /* ---- Kartlar ---- */
    .card-grid {
        display: grid;
        gap: var(--space-5);
        grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
        .card-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .card {
        background: var(--color-neutral-050);
        border: 1px solid var(--color-neutral-100);
        border-radius: var(--radius-md);
        padding: var(--space-5);
    }

    .card__title {
        font-size: var(--font-size-400);
        color: var(--color-primary-800); /* açık zemin → koyu metin */
        margin-block-end: var(--space-3);
    }

    .card__body {
        color: var(--color-text-on-light-muted);
        font-size: var(--font-size-200);
    }

    /* ---- Footer ---- */
    .site-footer {
        background: var(--color-primary-900);
        color: var(--color-text-on-dark-muted); /* koyu zemin → açık metin */
        padding-block: var(--space-6);
        margin-block-start: var(--space-8);
    }

    .site-footer__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .site-footer__legal {
        font-size: var(--font-size-100);
        max-width: 60ch;
    }

    .site-footer__copy {
        font-size: var(--font-size-100);
        color: var(--color-text-on-dark-muted);
    }

    /* ---- Makale & form (public) ---- */
    .container--narrow {
        max-width: var(--container-narrow);
    }

    .breadcrumb {
        font-size: var(--font-size-100);
        color: var(--color-text-on-light-muted);
        margin-block-end: var(--space-4);
    }

    .article-meta {
        color: var(--color-text-on-light-muted);
        font-size: var(--font-size-200);
        margin-block-end: var(--space-5);
    }

    .article-body {
        line-height: var(--line-height-base);
    }

    .article-body h2 {
        font-size: var(--font-size-500);
        margin-block: var(--space-6) var(--space-3);
    }

    .article-body h3 {
        font-size: var(--font-size-400);
        margin-block: var(--space-5) var(--space-2);
    }

    .article-body p,
    .article-body ul,
    .article-body ol {
        margin-block-end: var(--space-4);
    }

    .article-body blockquote {
        border-inline-start: 3px solid var(--color-accent-500);
        padding-inline-start: var(--space-4);
        color: var(--color-text-on-light-muted);
        margin-block: var(--space-4);
    }

    .article-sources {
        border-block-start: 1px solid var(--color-neutral-100);
        margin-block-start: var(--space-6);
        padding-block-start: var(--space-4);
    }

    .article-sources h2 {
        font-size: var(--font-size-400);
        margin-block-end: var(--space-3);
    }

    .article-disclaimer {
        background: var(--color-primary-050);
        color: var(--color-text-on-light); /* açık zemin → koyu metin */
        border-radius: var(--radius-sm);
        padding: var(--space-4);
        font-size: var(--font-size-200);
        margin-block-start: var(--space-6);
    }

    .site-nav__cta {
        color: var(--color-accent-500) !important;
        font-weight: var(--font-weight-bold);
    }

    .intake-form .form-field {
        margin-block-end: var(--space-4);
    }

    .intake-form label {
        display: block;
        font-weight: var(--font-weight-medium);
        margin-block-end: var(--space-2);
        color: var(--color-text-on-light);
    }

    .intake-form input[type="text"],
    .intake-form input[type="email"],
    .intake-form input[type="tel"],
    .intake-form textarea {
        width: 100%;
        padding: var(--space-3);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-300);
        background: var(--color-white);
        color: var(--color-text-on-light);
    }

    .form-hint-inline {
        font-weight: var(--font-weight-regular);
        color: var(--color-text-on-light-muted);
        font-size: var(--font-size-100);
    }

    .kvkk-notice {
        border: 1px solid var(--color-neutral-100);
        border-radius: var(--radius-sm);
        padding: var(--space-3);
        margin-block: var(--space-4);
        background: var(--color-neutral-050);
    }

    .kvkk-notice__body {
        font-size: var(--font-size-100);
        color: var(--color-text-on-light-muted);
        padding-block-start: var(--space-3);
        max-height: 16rem;
        overflow-y: auto;
    }

    .checkbox {
        display: flex;
        gap: var(--space-2);
        align-items: flex-start;
        margin-block-end: var(--space-4);
        color: var(--color-text-on-light);
    }

    .btn {
        display: inline-block;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-300);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
        cursor: pointer;
    }

    .btn--primary {
        background: var(--color-primary-700);
        color: var(--color-text-on-dark); /* koyu buton → açık metin */
    }

    .btn--primary:hover {
        background: var(--color-primary-800);
        color: var(--color-text-on-dark);
    }

    .alert {
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-4);
        margin-block-end: var(--space-4);
    }

    .alert--error {
        background: #fbeaea;
        color: var(--color-danger);
        border: 1px solid #eac6c6;
    }

    .pagination {
        display: flex;
        gap: var(--space-4);
        margin-block-start: var(--space-6);
        align-items: center;
    }

    /* ---- Hata sayfaları ---- */
    .error-page {
        display: grid;
        place-content: center;
        text-align: center;
        padding-block: var(--space-9);
    }

    .error-page__code {
        font-size: var(--font-size-800);
        color: var(--color-primary-800);
    }

    .error-page__message {
        color: var(--color-text-on-light-muted);
        margin-block: var(--space-4);
    }

    .error-page__debug {
        text-align: left;
        background: var(--color-neutral-050);
        color: var(--color-text-on-light); /* açık zemin → koyu metin */
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-sm);
        padding: var(--space-4);
        overflow-x: auto;
        font-size: var(--font-size-100);
        max-width: 100%;
    }
}

/* ============================= UTILITIES ============================= */
@layer utilities {
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ============================= PRINT ============================= */
@media print {
    .site-header, .site-footer, .skip-link {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }
}