/* --------------------------------------------------------------
               1) MARKA RENK / TİPOGRAFİ TOKENLARI
               -------------------------------------------------------------- */
.systems-section {
    --c-900: #032328;
    --c-800: #003E52;
    --c-700: #02566C;
    --c-500: #1C7A8C;
    --c-400: #5C92A1;
    --c-gold: #D8BE8D;
    --c-brown: #6B5342;
    --c-gray: #898A8D;
    --c-bg: #F6F8F8;
    --c-surface: #FFFFFF;
    --c-border: #E4EAEA;
    --font-display: "Manrope", "OptiGothic", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-accent: "OptiGothic", "Manrope", sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --shadow-card: 0 10px 30px -12px rgba(3, 35, 40, 0.18);
    --shadow-card-hover: 0 22px 44px -16px rgba(3, 35, 40, 0.28);
    background: var(--c-bg);
    color: var(--c-900);
    font-family: var(--font-body);
    padding-block: clamp(3rem, 6vw, 6rem);
}

body {
    margin: 0;
    padding: 0;
}

.systems-section * {
    box-sizing: border-box;
}

.systems-section img {
    max-width: 100%;
    display: block;
}

/* --------------------------------------------------------------
               2) BAŞLIK BLOĞU
               -------------------------------------------------------------- */
.systems-section__eyebrow {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-500);
    margin-bottom: 0.6rem;
}

.systems-section__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    color: var(--c-900);
    margin-bottom: 0.5rem;
}

    .systems-section__title span {
        color: var(--c-500);
        font-weight: 500;
    }

.systems-section__lead {
    color: var(--c-brown);
    font-size: 0.95rem;
    max-width: 42rem;
}

/* --------------------------------------------------------------
               3) ÜRÜN IZGARASI
               -------------------------------------------------------------- */
.systems-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .systems-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .systems-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 479.98px) {
    .systems-grid {
        grid-template-columns: 1fr;
    }
}

.system-card {
    height: 100%;
}

.system-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .system-card__link:hover,
    .system-card__link:focus-visible {
        transform: translateY(-6px);
        box-shadow: var(--shadow-card-hover);
        border-color: var(--c-400);
    }

.system-card__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: linear-gradient(155deg, var(--c-bg), #eef3f3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-bottom: 1px solid var(--c-border);
}

    .system-card__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.system-card__body {
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.system-card__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--c-900);
    margin: 0 0 0.25rem;
}

.system-card__desc {
    font-size: 0.85rem;
    color: var(--c-brown);
    line-height: 1.45;
    margin: 0 0 0.9rem;
    min-height: 2.5em;
}

.system-card__specs {
    background: var(--c-bg);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin: 0 0 0.9rem;
    display: grid;
    gap: 0.5rem;
}

    .system-card__specs > div {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.78rem;
        border-bottom: 1px dashed var(--c-border);
        padding-bottom: 0.5rem;
    }

        .system-card__specs > div:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .system-card__specs dt {
        color: var(--c-gray);
        font-weight: 500;
    }

    .system-card__specs dd {
        margin: 0;
        font-weight: 700;
        color: var(--c-800);
        text-align: right;
    }

.system-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-500);
}

    .system-card__cta svg {
        width: 14px;
        height: 14px;
        transition: transform 0.25s ease;
    }

.system-card__link:hover .system-card__cta svg,
.system-card__link:focus-visible .system-card__cta svg {
    transform: translateX(3px);
}

.systems-section__all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--c-900);
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    border: 1.5px solid var(--c-900);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

    .systems-section__all-link:hover,
    .systems-section__all-link:focus-visible {
        background: var(--c-900);
        color: #fff;
    }

@media (prefers-reduced-motion: reduce) {
    .system-card__link,
    .system-card__cta svg {
        transition: none;
    }
}