html {
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Tüm ana içerik bölümleri — dikey boşluk tutarlı */
main > section {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

/* Hero — alt kenarda yüzey rengine doğru şeffaflaşan geçiş (#iki-yol bg-surface ile uyumlu) */
#hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(36vh, 320px);
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(
        to top,
        #fcf9f8 0%,
        rgba(252, 249, 248, 0.65) 28%,
        rgba(252, 249, 248, 0.2) 58%,
        transparent 100%
    );
}

/* Ana sayfa hero ana başlık — harf aralığı + satır aralığı (üç satır) */
#hero .hero-headline {
    letter-spacing: 0.02em;
    line-height: 1.22;
}

@media (min-width: 640px) {
    #hero .hero-headline {
        line-height: 1.24;
    }
}

@media (min-width: 1024px) {
    #hero .hero-headline {
        letter-spacing: 0.025em;
        line-height: 1.28;
    }
}

/* Hero alt başlık — gövde rengi üzerine yazılmasın diye açık beyaz (Tailwind arbitrary / sırada ezilme riski) */
#hero .hero-lead {
    color: #ffffff;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.glass-nav {
    backdrop-filter: blur(20px);
}

.nav-lang-flag.fi {
    width: 1.25rem;
    height: 0.94rem;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.lang-current-code {
    display: none;
}

/* Alt sayfa / iç hero — yüksek görsel, ortada başlık, altında breadcrumb */
.site-page-hero {
    position: relative;
    isolation: isolate;
}

.site-page-hero-bg {
    z-index: 0;
}

.site-page-hero-scrim {
    pointer-events: none;
}

/* Hero — kırmızı yarı saydam tam genişlik katman (görsel + scrim üstü) */
.site-page-hero-inner {
    width: 100%;
    align-self: stretch;
    background-color: rgba(175, 0, 13, 0.7);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.site-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
}

/* Açık yüzey üzerinde (ör. kart içi) */
.site-breadcrumb-list--surface {
    color: rgb(71, 71, 71);
}

.site-breadcrumb-list--surface a {
    color: inherit;
    text-decoration: none;
    opacity: 0.88;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.site-breadcrumb-list--surface a:hover {
    color: var(--brand-primary);
    opacity: 1;
}

.site-breadcrumb-list--surface .site-breadcrumb-current {
    color: var(--brand-primary);
    font-weight: 800;
}

.site-breadcrumb-list--surface .site-breadcrumb-sep {
    color: rgba(175, 0, 13, 0.32);
    user-select: none;
    font-weight: 700;
}

html.dark .site-breadcrumb-list--surface {
    color: rgba(226, 232, 240, 0.85);
}

html.dark .site-breadcrumb-list--surface .site-breadcrumb-current {
    color: #fca5a5;
}

html.dark .site-breadcrumb-list--surface .site-breadcrumb-sep {
    color: rgba(252, 165, 165, 0.45);
}

/* Koyu kaplama üzerinde breadcrumb (site-page-hero, ana sayfa hero) */
.site-breadcrumb-list--on-media {
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
}

.site-breadcrumb-list--on-media a {
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.site-breadcrumb-list--on-media a:hover {
    color: #fff;
    opacity: 1;
}

.site-breadcrumb-list--on-media .site-breadcrumb-current {
    color: #fff;
    font-weight: 800;
    opacity: 1;
}

.site-breadcrumb-list--on-media .site-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.42);
    user-select: none;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .site-page-hero-bg {
        transform: none !important;
    }
}

:root {
    --brand-primary: #af000d;
    --header-accent: #af000d;
    --nav-link-active-color: #af000df2;
    --nav-dropdown-chrome: #af000d;
    --nav-dropdown-hover-bg: #95000c;
    --nav-menu-font-size: 0.875rem;
    --nav-menu-font-weight: 600;
    --nav-menu-letter-spacing: 0.1em;
    --nav-menu-font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Ana sayfa — Hakkımızda editorial (About Us) */
.hakkimizda-editorial {
    background: #fff;
}
html.dark .hakkimizda-editorial {
    background: #fff;
    color: #1c1b1b;
}
.hakkimizda-visual-plate {
    max-width: 100%;
    background: none;
    box-shadow: none;
    border: none;
}
/* Görselde hover zoom / scale yok */
.hakkimizda-visual-plate img {
    transform: scale(1) !important;
    transition: none !important;
}
.hakkimizda-editorial-visual:hover .hakkimizda-visual-plate img,
.hakkimizda-visual-plate:hover img {
    transform: scale(1) !important;
}
.hakkimizda-stat-label {
    font-family: var(--nav-menu-font-family);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(175, 0, 13, 0.72);
    margin-top: 0.5rem;
    max-width: 13rem;
    line-height: 1.45;
}
html.dark .hakkimizda-stat-label {
    color: rgba(175, 0, 13, 0.85);
}
@media (max-width: 1023px) {
    .hakkimizda-editorial-visual {
        padding-bottom: 0.5rem;
    }
}

/* Referans görünüm: opak beyaz şerit + logo diski hero üzerine taşar */
nav.nav-hero-bar {
    overflow: visible;
    height: 4.7rem;
    min-height: 4.7rem;
}
nav.nav-hero-bar .nav-hero-bar-inner {
    overflow: visible;
}
.nav-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
}
html.dark .nav-logo-badge {
    background: #fff;
}
@media (min-width: 768px) {
    .nav-logo-badge {
        padding: 30px;
        margin-top: 50px;
        padding-bottom: 40px;
        transition: padding 0.28s ease, margin-top 0.28s ease, border-radius 0.28s ease;
    }
    .nav-logo-img {
        height: 8rem;
        width: auto;
        display: block;
        margin-left: -8px;
        margin-right: 12px;
        margin-top: 2px;
        margin-bottom: -10px;
        transition: height 0.28s ease, margin 0.28s ease;
    }
    nav.nav-hero-bar.nav-compact .nav-logo-badge {
        margin-top: 0;
        padding: 6px 10px;
        border-radius: 0.75rem;
    }
    nav.nav-hero-bar.nav-compact .nav-logo-img {
        height: 2.55rem;
        margin: 0;
    }
}
@media (max-width: 767px) {
    .nav-logo-badge {
        padding: 6px;
        margin-top: 0;
    }
    .nav-logo-img {
        height: 2.5rem;
        width: auto;
        display: block;
    }
}

/* Menü: IBM Plex Sans + 600 (dropdown --nav-menu-font-weight ile uyumlu) */
nav.fixed a.font-label,
nav.fixed button.nav-trigger {
    font-weight: 600;
}

.nav-dropdown,
.lang-dropdown {
    position: relative;
}

.nav-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    padding: 0.5rem 0.75rem;
    transition: color 0.3s;
    text-decoration: none;
}
.nav-trigger-text,
.nav-trigger .nav-chevron,
.nav-trigger > .material-symbols-outlined {
    position: relative;
    z-index: 1;
}

.nav-trigger-tab {
    position: absolute;
    left: -0.5rem;
    top: -1.25rem;
    width: calc(100% + 1rem);
    height: 4.7rem;
    background: var(--nav-dropdown-chrome);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0;
    opacity: 0;
    transition: opacity 0.12s ease, border-top-left-radius 0.5s ease, border-top-right-radius 0.5s ease, border-bottom-right-radius 0.5s ease;
    z-index: 0;
    pointer-events: none;
}
.nav-dropdown:hover .nav-trigger-tab,
.nav-dropdown.open .nav-trigger-tab {
    opacity: 1;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
    border-bottom-right-radius: 0;
}
.lang-dropdown:hover .nav-trigger-tab,
.lang-dropdown.open .nav-trigger-tab {
    opacity: 1;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 0;
}
/* Dropdown açık / hover: tetikleyicide beyaz yazı (kırmızı sekme üstü) */
.nav-dropdown:hover .nav-trigger,
.nav-dropdown.open .nav-trigger,
.lang-dropdown:hover .nav-trigger,
.lang-dropdown.open .nav-trigger {
    color: #fff;
}

/* Aktif menü (dropdown kapalıyken): alt çizgi yok, yazı #af000df2 */
.nav-trigger.nav-link-active,
.nav-trigger.nav-link-active .nav-trigger-text,
.nav-trigger.nav-link-active .nav-chevron {
    color: var(--nav-link-active-color);
    border-bottom: none;
}
.nav-dropdown:hover .nav-trigger.nav-link-active,
.nav-dropdown.open .nav-trigger.nav-link-active,
.nav-dropdown:hover .nav-trigger.nav-link-active .nav-trigger-text,
.nav-dropdown.open .nav-trigger.nav-link-active .nav-trigger-text,
.nav-dropdown:hover .nav-trigger.nav-link-active .nav-chevron,
.nav-dropdown.open .nav-trigger.nav-link-active .nav-chevron {
    color: #fff;
}

.nav-chevron { transition: transform 0.3s; display: inline-block; vertical-align: middle; }
.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron,
.lang-dropdown:hover .nav-chevron,
.lang-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown .dropdown-menu,
.lang-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% - -19px);
    margin: 0;
    padding: 0.75rem 0;
    background: var(--nav-dropdown-chrome);
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s, border-radius 0.5s ease;
    z-index: 50;
    list-style: none;
}
.nav-dropdown .dropdown-menu {
    left: -0.5rem;
    min-width: 280px;
    border-top-left-radius: 0 !important;
    border-radius: 0.5rem;
}
.lang-dropdown .dropdown-menu {
    left: auto;
    right: -0.63rem;
    min-width: 220px;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    border-radius: 0.7rem;
    border-top-left-radius: 0 !important;
    transition: opacity 0.12s ease, visibility 0s, border-radius 0.5s ease;
}
.lang-dropdown:hover .dropdown-menu,
.lang-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
    transition: opacity 0.12s ease, visibility 0s, border-radius 0.5s ease;
}

.nav-dropdown .dropdown-item,
.lang-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.65rem 1.25rem;
    color: #fff;
    text-decoration: none;
    font-family: var(--nav-menu-font-family);
    font-size: var(--nav-menu-font-size);
    font-weight: var(--nav-menu-font-weight);
    letter-spacing: var(--nav-menu-letter-spacing);
    text-transform: uppercase;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-dropdown .dropdown-item .dropdown-item-icon,
.lang-dropdown .dropdown-item .dropdown-item-icon {
    width: 1.25rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    font-size: 1.125rem;
}
.nav-dropdown .dropdown-item:hover,
.lang-dropdown .dropdown-item:hover {
    color: #fff;
    background: var(--nav-dropdown-hover-bg);
}
.nav-dropdown .dropdown-item.is-active,
.lang-dropdown .dropdown-item.is-active {
    color: #fff;
    background: var(--nav-dropdown-hover-bg);
}
.nav-dropdown .dropdown-item:hover .dropdown-item-icon,
.lang-dropdown .dropdown-item:hover .dropdown-item-icon {
    color: #fff;
}
.nav-dropdown .dropdown-item.is-active .dropdown-item-icon,
.lang-dropdown .dropdown-item.is-active .dropdown-item-icon {
    color: #fff;
}

.dropdown-submenu { position: relative; }
.dropdown-submenu-trigger {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #fff;
    font-family: var(--nav-menu-font-family);
    font-size: var(--nav-menu-font-size);
    font-weight: var(--nav-menu-font-weight);
    letter-spacing: var(--nav-menu-letter-spacing);
    text-transform: uppercase;
}
.dropdown-submenu-trigger:hover {
    background: var(--nav-dropdown-hover-bg);
}
.dropdown-submenu-chevron {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: transform 0.2s;
}
.dropdown-submenu:hover .dropdown-submenu-chevron,
.dropdown-submenu.open .dropdown-submenu-chevron {
    transform: translateX(2px);
}
.dropdown-submenu-list {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 280px;
    margin: 0;
    padding: 0.5rem 0;
    background: var(--nav-dropdown-chrome);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
    z-index: 51;
    list-style: none;
}
.dropdown-submenu:hover .dropdown-submenu-list,
.dropdown-submenu.open .dropdown-submenu-list {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

html.dark .lang-dropdown .dropdown-menu {
    background: var(--nav-dropdown-chrome);
}
html.dark .lang-dropdown .dropdown-item {
    color: #fff;
}
html.dark .lang-dropdown .dropdown-item:hover {
    color: #fff;
    background: var(--nav-dropdown-hover-bg);
}

@media (max-width: 1023px) {
    /* Mobil: nav-trigger-tab ölçüsü/konumu */
    .nav-trigger-tab {
        left: 0rem;
        top: -1.25rem;
        width: calc(95.7% + 1rem);
        height: 4.7rem;
        background: var(--nav-dropdown-chrome);
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0;
        opacity: 0;
        transition: opacity 0.12s ease, border-top-left-radius 0.5s ease, border-top-right-radius 0.5s ease, border-bottom-right-radius 0.5s ease;
        z-index: 0;
        pointer-events: none;
    }

    /* Mobilde :hover yapışmasını engelle (beyaz tab arka planı kalmasın) */
    .nav-dropdown:hover .nav-trigger-tab,
    .lang-dropdown:hover .nav-trigger-tab {
        opacity: 0;
    }

    /* Mobile menu panel (hamburger) */
    .mobile-nav-panel { display: none; }
    nav.mobile-nav-open .mobile-nav-panel { display: block; }
    nav.nav-hero-bar.mobile-nav-open {
        background: rgba(255, 255, 255, 0.97);
    }
    html.dark nav.nav-hero-bar.mobile-nav-open {
        background: rgba(2, 6, 23, 0.97);
    }
    .mobile-nav-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        z-index: 99;
    }
    html.dark .mobile-nav-panel {
        background: rgba(15, 23, 42, 0.88);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .nav-dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 0.5rem;
        opacity: 1;
        visibility: visible;
        display: none;
    }
    .nav-dropdown.open .dropdown-menu {
        display: block;
        border-radius: 0.7rem;
        border-top-left-radius: 0 !important;
    }
    .dropdown-submenu-list {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
    }
    .dropdown-submenu.open .dropdown-submenu-list { display: block; }

    .lang-dropdown {
        position: relative;
        z-index: 120;
    }
    .lang-current-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.9rem;
        padding: 0 0.1rem;
        font-family: var(--nav-menu-font-family);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
    .lang-dropdown .nav-trigger-tab {
        display: none;
    }
    .lang-dropdown > .nav-trigger {
        gap: 0.35rem;
        padding: 0.55rem 0.72rem 0.55rem 0.82rem;
        border-radius: 999px;
        border: 1px solid rgba(175, 0, 13, 0.14);
        background: rgba(255, 255, 255, 0.88);
        color: var(--brand-primary);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(18px);
    }
    .lang-dropdown > .nav-trigger:hover,
    .lang-dropdown.open > .nav-trigger {
        background: rgba(255, 255, 255, 0.98);
        color: var(--brand-primary);
    }
    .lang-dropdown .dropdown-menu {
        position: absolute;
        top: calc(100% + 0.7rem);
        right: 0;
        left: auto;
        min-width: min(16rem, calc(100vw - 1.25rem));
        width: max-content;
        padding: 0.6rem;
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        border-radius: 1rem;
        border: 1px solid rgba(175, 0, 13, 0.12);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 24px 44px rgba(15, 23, 42, 0.18);
        transform: translateY(-0.35rem) scale(0.98);
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s linear 0.18s;
    }
    .lang-dropdown .dropdown-menu::before {
        content: "Dil seçin";
        display: block;
        padding: 0.15rem 0.35rem 0.65rem;
        font-family: var(--nav-menu-font-family);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(175, 0, 13, 0.72);
    }
    .lang-dropdown.open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s;
    }
    .lang-dropdown .dropdown-item {
        gap: 0.8rem;
        min-height: 3.15rem;
        padding: 0.8rem 0.95rem;
        border-radius: 0.85rem;
        background: rgba(175, 0, 13, 0.05);
        color: #651219;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }
    .lang-dropdown .dropdown-item:hover,
    .lang-dropdown .dropdown-item.is-active {
        background: var(--brand-primary);
        color: #fff;
    }
    .lang-dropdown .dropdown-item .nav-lang-flag.fi {
        box-shadow: 0 0 0 1px rgba(175, 0, 13, 0.12);
    }
    html.dark .lang-dropdown > .nav-trigger {
        background: rgba(15, 23, 42, 0.9);
        border-color: rgba(255, 255, 255, 0.12);
        color: #fff;
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.28);
    }
    html.dark .lang-dropdown > .nav-trigger:hover,
    html.dark .lang-dropdown.open > .nav-trigger {
        background: rgba(15, 23, 42, 0.98);
        color: #fff;
    }
    html.dark .lang-dropdown .dropdown-menu {
        border-color: rgba(248, 113, 113, 0.18);
        background: rgba(15, 23, 42, 0.98);
        box-shadow: 0 24px 44px rgba(2, 6, 23, 0.35);
    }
    html.dark .lang-dropdown .dropdown-menu::before {
        color: rgba(252, 165, 165, 0.92);
    }
    html.dark .lang-dropdown .dropdown-item {
        background: rgba(148, 163, 184, 0.1);
        color: #f8fafc;
    }
    html.dark .lang-dropdown .dropdown-item:hover,
    html.dark .lang-dropdown .dropdown-item.is-active {
        background: var(--brand-primary);
        color: #fff;
    }
}

/* Tasarım 7 + içerik 9: modal, path kartları */
.eval-modal.is-open {
    display: block;
}
body.eval-modal-open {
    overflow: hidden;
}

.path-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.path-card:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

/* #iki-yol — başlık + kartlar */
.iki-yol-title {
    position: relative;
}
.iki-yol-title::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--header-accent), transparent);
    opacity: 0.92;
}
.iki-yol-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--header-accent), rgba(175, 0, 13, 0.45), var(--header-accent));
}
.iki-yol-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0;
    background: rgba(175, 0, 13, 0.09);
    margin-bottom: 1.125rem;
    border: 1px solid rgba(175, 0, 13, 0.12);
}
.iki-yol-icon-wrap .material-symbols-outlined {
    font-size: 2rem;
    color: var(--header-accent);
}
.iki-yol-card.path-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(175, 0, 13, 0.11);
    border-color: rgba(175, 0, 13, 0.28);
}

/* #hizmetler — üstteki #iki-yol (yüzey rengi) ile ayrışsın diye opak beyaz */
#hizmetler {
    background-color: #fff;
}

html.dark #hizmetler {
    background-color: rgb(2 6 23);
    color: rgb(241 245 249);
}

html.dark #hizmetler .text-on-surface-variant {
    color: rgb(148 163 184);
}

html.dark #hizmetler .text-on-surface {
    color: rgb(226 232 240);
}

/* #sistem-ozeti — sıcak yüzey + hafif primary-fixed ışıması (#hero / #iki-yol ile uyum) */
#sistem-ozeti {
    background-color: #faf7f6;
    background-image:
        radial-gradient(ellipse 110% 85% at 92% 8%, rgba(255, 218, 213, 0.42) 0%, transparent 52%),
        radial-gradient(ellipse 70% 55% at 0% 100%, rgba(240, 237, 236, 0.95) 0%, transparent 48%),
        linear-gradient(180deg, #fcfbf9 0%, #faf7f6 38%, #f8f5f4 100%);
}
.sistem-ozeti-headline-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35rem;
    row-gap: 0.15rem;
}
.sistem-ozeti-headword {
    color: var(--header-accent);
    letter-spacing: -0.02em;
}
.sistem-ozeti-headsep {
    display: inline-flex;
    align-items: center;
    color: rgba(93, 63, 60, 0.35);
    font-weight: 800;
    font-size: 0.55em;
    padding: 0 0.12rem;
    user-select: none;
}
.sistem-ozeti-headsep::before {
    content: "·";
}

.sistem-pillar-row {
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .sistem-pillar-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        align-items: stretch;
    }
}
.sistem-pillar-card {
    position: relative;
    padding: 1.5rem 1.75rem 1.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(145, 111, 107, 0.1);
    background: linear-gradient(145deg, #ffffff 0%, #f8f5f4 100%);
    box-shadow: 0 2px 20px rgba(93, 63, 60, 0.04);
    transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.sistem-pillar-card:hover {
    background: linear-gradient(145deg, #ffffff 0%, #f6f3f2 100%);
    border-color: rgba(175, 0, 13, 0.16);
    box-shadow: 0 14px 40px rgba(175, 0, 13, 0.08);
}
.sistem-pillar-step {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(175, 0, 13, 0.22);
    user-select: none;
    pointer-events: none;
}
.sistem-pillar-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(175, 0, 13, 0.08);
    margin-bottom: 1rem;
}
.sistem-pillar-card:hover .sistem-pillar-icon-wrap {
    background: rgba(175, 0, 13, 0.12);
}

.sistem-pillar-card h3 {
    padding-right: clamp(4.5rem, 28%, 7.5rem);
}

/* #tubitak — sistem bölümü ile aynı sıcak yüzey + kart dili; üst kenarda ince ayırıcı */
#tubitak {
    background-color: #faf7f6;
    background-image:
        radial-gradient(ellipse 90% 70% at 0% 20%, rgba(255, 218, 213, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 100% 80%, rgba(240, 237, 236, 0.9) 0%, transparent 48%),
        linear-gradient(180deg, #fcfbf9 0%, #f8f5f4 55%, #f6f3f2 100%);
    border-top: 1px solid rgba(145, 111, 107, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.tubitak-head-punct {
    display: inline;
    color: rgba(93, 63, 60, 0.45);
    font-weight: 800;
    margin: 0 0.2em;
}
.tubitak-icon-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.tubitak-icon-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(175, 0, 13, 0.08);
    border: 1px solid rgba(175, 0, 13, 0.12);
}
.tubitak-icon-join {
    width: 1.25rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(175, 0, 13, 0.35), transparent);
}
.tubitak-copy-panel {
    border-radius: 0.75rem;
    border: 1px solid rgba(145, 111, 107, 0.12);
    background: linear-gradient(145deg, #ffffff 0%, #f8f5f4 100%);
    box-shadow: 0 2px 24px rgba(93, 63, 60, 0.05);
    padding: 1.5rem 1.5rem 1.75rem;
}
@media (min-width: 768px) {
    .tubitak-copy-panel {
        padding: 1.75rem 2rem 2rem;
    }
}
.tubitak-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    color: rgba(175, 0, 13, 0.88);
}
.tubitak-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.tubitak-fact-ic {
    font-size: 1.125rem;
    opacity: 0.85;
}
.tubitak-visual-card {
    border-radius: 0.75rem;
    border: 1px solid rgba(145, 111, 107, 0.12);
    box-shadow: 0 4px 28px -8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.tubitak-visual-card:hover {
    box-shadow: 0 22px 52px rgba(175, 0, 13, 0.12);
    border-color: rgba(175, 0, 13, 0.22);
}
.tubitak-visual-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 3;
    background: linear-gradient(90deg, var(--header-accent), rgba(175, 0, 13, 0.45), var(--header-accent));
}

/* Kurumsal footer — #af000d üst şerit + koyu gövde, beyaz tipografi */
.site-footer-brand {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(ellipse 90% 120% at 100% 0%, rgba(255, 255, 255, 0.09) 0%, transparent 45%),
        linear-gradient(180deg, #af000d 0%, #9a000b 100%);
}

.site-footer-brand-strip {
    clear: both;
}

.site-footer-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.site-footer-kpi-ic {
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    flex-shrink: 0;
}

.site-footer-kpi-title {
    display: block;
    font-family: var(--nav-menu-font-family);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.25rem;
}

.site-footer-kpi-desc {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.site-footer-main {
    background:
        radial-gradient(ellipse 55% 40% at 15% 0%, rgba(175, 0, 13, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 50% 35% at 95% 100%, rgba(175, 0, 13, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #1a0c0e 0%, #14090a 48%, #0f0608 100%);
}

.site-footer-heading {
    font-weight: 700;
    margin-bottom: 1.15rem;
    font-family: var(--nav-menu-font-family);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.6875rem;
}

.site-footer-heading-spaced {
    margin-top: 2rem;
}

.site-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.site-footer-contact {
    padding: 1rem 1.15rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer-link-prominent {
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.site-footer-link-prominent:hover {
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.site-footer-tagline {
    max-width: 48rem;
}

.site-footer-link {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.site-footer-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.site-footer-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-footer-legal {
    background: #130608;
}

/* Görsel hover zoom — hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    #hizmetler img,
    #urunler img {
        transition-duration: 0.01ms !important;
    }

    #hizmetler img,
    #hizmetler img:hover,
    #urunler .group:hover img {
        transform: none !important;
    }
}

/* Hizmet detay sayfaları — içindekiler + süreç çizgisi (nav yüksekliği ile hizalı) */
.detail-inpage-nav {
    scroll-margin-top: calc(4.7rem + 0.75rem);
}

.detail-toc-link {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgb(100, 100, 100);
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    margin-left: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.detail-toc-link:hover {
    color: var(--brand-primary);
}

.detail-toc-link[aria-current="true"] {
    color: var(--brand-primary);
    border-left-color: var(--brand-primary);
}

html.dark .detail-toc-link {
    color: rgba(203, 213, 225, 0.75);
}

html.dark .detail-toc-link:hover,
html.dark .detail-toc-link[aria-current="true"] {
    color: #fca5a5;
}

html.dark .detail-toc-link[aria-current="true"] {
    border-left-color: #fca5a5;
}

.detail-process-line {
    position: absolute;
    left: 0.55rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(175, 0, 13, 0.35),
        rgba(175, 0, 13, 0.08)
    );
    border-radius: 2px;
}

html.dark .detail-process-line {
    background: linear-gradient(to bottom, rgba(252, 165, 165, 0.45), rgba(252, 165, 165, 0.1));
}