:root {
    --blue: #0d5ea8;
    --blue-dark: #083f73;
    --blue-soft: #eaf4fb;
    --teal: #27a88f;
    --ink: #102033;
    --muted: #66778a;
    --line: #dce8f2;
    --white: #ffffff;
    --bg: #f7fbff;
    --shadow: 0 24px 60px rgba(13, 94, 168, 0.12);
    --radius: 24px;
    --logo-blue: #135499;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Basliklar ve govde ayni aile. Display icin ayri bir font istenirse
       tek satir burada degistirilir, tum kurallar token uzerinden calisir. */
    --font-display: var(--font-sans);
}

/* ==========================================================================
   TIPOGRAFI TEMELI
   Iki aile kullaniyoruz, ucuncusu yok:
     - "Playfair Display"  -> yalnizca h1 / h2 display basliklar
     - "Inter"             -> govde metni, h3+ altbasliklar, form, buton
   Ikisi de _Layout.cshtml icinde Google Fonts'tan yukleniyor. Asagidaki
   @font-face'ler yerel dosyalari yedek olarak baglar, ayrica eski temadan
   kalan "inter-bold" / "inter-light" gibi takma adlari gercek Inter'e
   yonlendirir; boylece gozden kacan bir referans serif'e dusmez.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}

/* --- eski tema takma adlari -> gercek Inter --- */
@font-face { font-family: inter;             src: url("../Inter/Inter-VariableFont_slnt,wght.ttf"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: inter-thin;        src: url("../Inter/static/Inter-Thin.ttf");        font-display: swap; }
@font-face { font-family: inter-extra-light; src: url("../Inter/static/Inter-ExtraLight.ttf");  font-display: swap; }
@font-face { font-family: inter-light;       src: url("../Inter/static/Inter-Light.ttf");       font-display: swap; }
@font-face { font-family: inter-regular;     src: url("../Inter/static/Inter-Regular.ttf");     font-display: swap; }
@font-face { font-family: inter-medium;      src: url("../Inter/static/Inter-Medium.ttf");      font-display: swap; }
@font-face { font-family: inter-semibold;    src: url("../Inter/static/Inter-SemiBold.ttf");    font-display: swap; }
@font-face { font-family: inter-bold;        src: url("../Inter/static/Inter-Bold.ttf");        font-display: swap; }
@font-face { font-family: inter-extra-bold;  src: url("../Inter/static/Inter-ExtraBold.ttf");   font-display: swap; }
@font-face { font-family: inter-black;       src: url("../Inter/static/Inter-Black.ttf");       font-display: swap; }
@font-face { font-family: dinpro;            src: url("../DINPro_font/DINPro.otf") format("opentype"); font-display: swap; }

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid rgba(220,232,242,0.8);
}

/* backdrop-filter yalnizca masaustunde.
   DIKKAT: backdrop-filter uygulanan eleman, icindeki "position: fixed"
   ogeler icin kapsayici blok haline gelir. Mobil menu cekmecesi ve
   arka plan perdesi header'in icinde oldugu icin viewport'a degil
   header'a gore konumlaniyor ve ekranda gorunmuyorlardi. */
@media (min-width: 861px) {
    .nav {
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(18px);
    }
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.04em;
}

    .brand img {
        height: 46px;
        width: auto;
        object-fit: contain;
    }

    .brand span {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

    .brand small {
        font-size: 0.82rem;
        font-weight: 600;
        color: #5d7288;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-top: 4px;
    }

.links {
    display: flex;
    gap: 28px;
    align-items: center;
    color: #41566d;
    font-weight: 600;
}

    .links a:hover {
        color: var(--blue);
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--blue);
    color: white;
    /* <button class="btn"> de kullaniliyor (orn. Tele-Arc brosur modali).
       Buton oge fontu miras almadigi icin acikca veriliyor. */
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--blue);
    transition: 0.2s ease;
}

    .btn:hover {
        transform: translateY(-2px);
        background: var(--blue-dark);
    }

    .btn.secondary {
        background: white;
        color: var(--blue);
    }

.hero {
    position: relative;
    overflow: hidden;
    padding: 100px 0 80px;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbff 52%, #eaf6ff 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 58px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--blue-dark);
    background: var(--blue-soft);
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Etiket (eyebrow) ile hemen ardindaki baslik arasindaki bosluk.
   Basliklarda margin:0 oldugu icin etiket basliga yapisiyordu; artik
   tek yerden yonetiliyor ve site genelinde ayni. */
.eyebrow + h1 {
    margin-top: 26px;
}

.eyebrow + h2,
.eyebrow + h3,
.eyebrow + h4 {
    margin-top: 20px;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.045em;
}

/* h1 / h2 = display basliklar -> Playfair Display */
h1 {
    margin-top: 24px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6.4rem);
    max-width: 860px;
}

h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 4.4rem);
}

/* h3 ve altı = alt basliklar -> Inter */
h3, h4, h5, h6 {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
    font-weight: 700;
}

h3 {
    font-size: 1.35rem;
}

h4 {
    font-size: 1.12rem;
}

h5, h6 {
    font-size: 1rem;
}

/* Form ogeleri tarayici varsayilanini kullanir, devralmaz -> zorluyoruz */
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}

.lead {
    margin: 28px 0 0;
    font-size: 1.18rem;
    color: var(--muted);
    max-width: 720px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.visual-card {
    margin-top: 42px;
    border-radius: 34px;
    background: var(--logo-blue);
    color: white;
    padding: 28px;
    box-shadow: var(--shadow);
    min-height: auto;
    width: 100%;
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 30px;
}

.metric-tile,
.screen-tile {
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 18px;
}

    .metric-tile strong {
        font-size: 2.4rem;
        display: block;
        line-height: 1;
    }

    .metric-tile span {
        color: rgba(255,255,255,0.75);
        font-size: 0.86rem;
    }

.screen-tile {
    grid-column: span 4;
}

.screen-tile strong {
    display: block;
    font-size: 1rem;
}

.screen-tile p {
    margin: 8px 0 0;
    color: rgba(255,255,255,0.72);
}

section {
    padding: 92px 0;
}

.section-head {
    max-width: 780px;
    margin-bottom: 42px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    background: white;
    box-shadow: 0 18px 45px rgba(16,32,51,0.06);
    cursor: pointer;
    transition: 0.25s ease;
    min-height: 210px;
    position: relative;
    overflow: hidden;
}

    .card:after {
        content: "";
        position: absolute;
        left: 28px;
        bottom: 22px;
        color: var(--blue);
        font-weight: 800;
        font-size: 0.88rem;
        opacity: 0;
        transform: translateY(6px);
        transition: 0.25s ease;
    }

    .card:hover,
    .card.active {
        background: linear-gradient(135deg, var(--blue), #1c8bc6);
        color: white;
        border-color: transparent;
        transform: translateY(-6px);
        box-shadow: var(--shadow);
    }

        .card:hover p,
        .card.active p {
            color: rgba(255,255,255,0.78);
        }

        .card:hover:after,
        .card.active:after {
            color: white;
            opacity: 1;
            transform: translateY(0);
        }

    .card p {
        color: var(--muted);
        margin-top: 14px;
        margin-bottom: 28px;
    }

.solution-detail {
    display: none;
    margin-top: 26px;
    padding: 36px;
    border-radius: 30px;
    background: white;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    grid-template-columns: 0.9fr 1.1fr;
    gap: 34px;
    align-items: start;
}

    .solution-detail.active {
        display: grid;
        transform-origin: 50% 0;
        animation: solution-detail-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

        .solution-detail.active > div {
            animation: solution-fade-up 0.45s 0.08s ease-out both;
        }

        .solution-detail.active li {
            animation: solution-item-in 0.4s ease-out both;
        }

            .solution-detail.active li:nth-child(1) { animation-delay: 0.12s; }
            .solution-detail.active li:nth-child(2) { animation-delay: 0.18s; }
            .solution-detail.active li:nth-child(3) { animation-delay: 0.24s; }
            .solution-detail.active li:nth-child(4) { animation-delay: 0.30s; }
            .solution-detail.active li:nth-child(5) { animation-delay: 0.36s; }

@keyframes solution-detail-in {
    from {
        opacity: 0;
        transform: perspective(1200px) translateY(-18px) rotateX(-8deg) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes solution-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes solution-item-in {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-detail.active,
    .solution-detail.active > div,
    .solution-detail.active li {
        animation: none;
    }
}

    .solution-detail h3 {
        font-size: 2rem;
        color: var(--blue-dark);
    }

    .solution-detail p {
        color: var(--muted);
        margin: 16px 0 0;
    }

    .solution-detail ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 12px;
    }

    .solution-detail li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 16px;
        background: var(--blue-soft);
        color: #36536c;
        font-weight: 650;
    }

        /* emoji yerine sade, tasarim diliyle uyumlu nokta */
        .solution-detail li:before {
            content: "";
            flex: 0 0 auto;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--blue);
        }

        /* "Learn more" satiri: pill/nokta stilini almaz */
        .solution-detail li.cta {
            background: none;
            padding: 6px 0 0;
            justify-content: flex-end;
        }

            .solution-detail li.cta:before {
                display: none;
            }

.split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 58px;
    align-items: center;
}

.panel {
    border-radius: 32px;
    background: linear-gradient(135deg, var(--blue), #1c8bc6);
    color: white;
    padding: 40px;
    box-shadow: var(--shadow);
}


/* Bolum ici ikincil display baslik -> h1/h2 ile ayni aile (Playfair) */
.display {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    letter-spacing: -0.045em;
    font-weight: 700;
}

/* Regulasyon dipnotu (orn. Arc AI FDA durumu) */
.regulatory-note {
    margin-top: 28px;
    padding: 14px 18px;
    border-left: 3px solid var(--blue);
    border-radius: 0 12px 12px 0;
    background: rgba(13, 94, 168, 0.06);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* koyu zeminde kullanildiginda */
.panel .regulatory-note,
.contact .regulatory-note,
.visual-card .regulatory-note {
    border-left-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
}

    .panel ul {
        padding: 0;
        margin: 28px 0 0;
        list-style: none;
    }

    .panel li {
        margin: 14px 0;
    }

.sepsis {
    background: linear-gradient(180deg, #fbfdff, #edf7ff);
}

.sepsis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 34px;
}

/* Arc AI Sepsis istatistik satiri.
   Kutular .split'in dar sol kolonunda 3'e bolununce cok daraliyordu:
   sol kolonu genislettik ve 2 ustte + 1 altta duzenine gectik. */
.sepsis-split {
    grid-template-columns: 1.1fr 0.9fr;
}

    .sepsis-split .sepsis-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0;
    }

        .sepsis-split .sepsis-grid .sepsis-card:last-child {
            grid-column: 1 / -1;
        }

.sepsis-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 30px;
}

    .sepsis-card strong {
        display: block;
        color: var(--blue);
        font-size: 1.35rem;
        line-height: 1;
        margin-bottom: 12px;
    }

.outcomes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 34px;
}

.outcomes2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 34px;
}

/* Haber kartlari: gorseller degisken oranlarda geldigi icin kartlarda buyuk
   bosluklar olusuyordu; ortak oranla kirpiliyor. */
.news-grid {
    align-items: stretch;
}

.news-card {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    transition: 0.25s ease;
}

    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
    }

    .news-card img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
    }

#quotes-slider2 .quotes {
    text-align: center;
    padding: 28px 20px 24px;
}

/* "Measurable Impact" kartlari: 6'si tek satirda sikisiyordu -> 3'lu iki satir.
   Alttaki alinti bloguna da nefes payi verildi. */
.outcomes2 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

    .outcomes2 .outcome span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
    }

#testimonials #quotes-slider {
    margin-top: 20px;
}

    #testimonials .quotes {
        padding: 34px 20px 30px;
    }

@media (max-width: 980px) {
    .outcomes2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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



.reference {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 34px;
}

/* Sertifika logolari: ortak yukseklik, oran korunur */
.reference .outcome {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
}

    .reference .outcome img {
        height: 44px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

@media (max-width: 980px) {
    .reference {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 620px) {
    .reference {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ISO logosu en genis olan; iki kolonlu mobil izgarada kendi hucresine
       sigmiyor, son sirayi tam genislige aliyoruz */
    .reference .outcome:last-child {
        grid-column: 1 / -1;
    }

    .reference .outcome img {
        height: 42px;
    }
}

.outcome {
    padding: 26px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
}

    .outcome strong {
        color: var(--blue);
        font-size: 1.35rem;
        display: block;
    }

.contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #081a2f 0%, #102c4a 100%);
    color: white;
}

    .contact:before {
        content: "";
        position: absolute;
        right: -180px;
        bottom: -220px;
        width: 720px;
        height: 720px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 35%, transparent 70%);
        background-repeat: no-repeat;
        pointer-events: none;
        opacity: 0.9;
    }

    .contact:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: radial-gradient(circle at 75% 70%, black 20%, transparent 70%);
        pointer-events: none;
    }

.contact-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

.contact-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 28px;
    padding: 34px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

    .contact-card p {
        margin: 0 0 18px;
        color: rgba(255,255,255,0.82);
        font-size: 1rem;
    }

    .contact-card strong {
        display: block;
        color: white;
        margin-bottom: 6px;
        font-size: 0.92rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

.globe-decoration {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0.4;
    pointer-events: none;
}

    .globe-decoration:before,
    .globe-decoration:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.08);
    }

    .globe-decoration:before {
        transform: scaleX(0.55);
    }

    .globe-decoration:after {
        transform: scaleY(0.55);
    }

.globe-lines {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}

    .globe-lines span {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255,255,255,0.08);
    }

        .globe-lines span:nth-child(1) {
            top: 20%;
        }

        .globe-lines span:nth-child(2) {
            top: 35%;
        }

        .globe-lines span:nth-child(3) {
            top: 50%;
        }

        .globe-lines span:nth-child(4) {
            top: 65%;
        }

        .globe-lines span:nth-child(5) {
            top: 80%;
        }

footer {
    padding: 28px 0;
    color: #7d8da0;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

/* Footer: .row'un CSS'i olmadigi icin uc blok ust uste yigiliyor ve
   TIME rozeti (118x160) yaninda kocaman bir bosluk kaliyordu.
   Artik tek satirlik flex yerlesim. */
/* TIME rozeti eskiden space-between ile en solda tek basina duruyordu; iki uc
   arasindaki genis bosluk onu sayfadan kopuk gosteriyordu. Rozet ile sosyal
   medya + telif blogu tek bir grup olarak ortalaniyor. */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.footer-brand img {
    height: 104px;
    width: auto;
    display: block;
}

.footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

@media (max-width: 560px) {
    /* dar ekranda alt alta gecince ortali dursun */
    .footer-meta {
        align-items: center;
        text-align: center;
    }
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

    .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid var(--line);
        color: var(--blue);
        transition: 0.2s ease;
    }

        .footer-social a:hover {
            background: var(--blue);
            border-color: var(--blue);
            color: #fff;
        }

.footer-copy {
    margin: 0;
}

/* ==========================================================================
   HABER DETAY
   Eski surumde baslik hem banner'da hem govdede iki kez basiliyordu, h1
   global clamp(3rem..6.4rem) oldugu icin devasa duruyordu ve icerik metni
   hicbir tipografi almadigi icin cok kucuk kaliyordu. Ayrica .row/.col-lg-*
   siniflarinin CSS'i yuklenmedigi icin iki kolon calismiyordu.
   ========================================================================== */
/* Banner bolumleri: global "section { padding: 92px 0 }" bunlara da uyguluyor
   ve banner'in altinda/ustunde 92px bosluk birakiyordu. */
.blog-hero,
.news-hero,
.page-hero {
    padding: 0;
}

/* ---- BANNER STANDARDI ----
   Butun sayfa banner'lari ayni oranda ve ayni yukseklikte cizilir.
   Kaynak gorsellerin oranlari farkli (2.40 / 3.34 / 3.86) oldugu icin
   "height: auto" birakildiginda sayfadan sayfaya 327-527px arasi degisen
   yukseklikler olusuyordu.
   Kirpmak artik guvenli: banner'lardaki yazilar HTML'e tasindi, gorsellerde
   kesilecek bilgi kalmadi. Genis ekranlarda asiri uzamamasi icin max-height.
   ------------------------------------------------------------------ */
.page-hero img,
.blog-hero img,
.news-hero img {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 3;
    max-height: 440px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.blog-article {
    padding: 56px 0 92px;
}

.blog-head {
    max-width: 860px;
    padding-bottom: 28px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
}

    /* haber basligi govde ile oranli olsun */
    .blog-head h1 {
        margin-top: 20px;
        font-size: clamp(1.9rem, 3.4vw, 2.9rem);
        line-height: 1.15;
        max-width: none;
    }

.blog-meta {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.blog-body {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

    .blog-body.no-figure {
        grid-template-columns: minmax(0, 820px);
    }

/* --- veritabanindan gelen HTML icin tipografi --- */
.blog-content {
    font-size: 1.06rem;
    line-height: 1.75;
    color: #2c3e52;
}

    .blog-content > *:first-child {
        margin-top: 0;
    }

    .blog-content p {
        margin: 0 0 1.15em;
    }

    .blog-content h1,
    .blog-content h2 {
        font-size: clamp(1.4rem, 2.2vw, 1.85rem);
        line-height: 1.25;
        margin: 2em 0 0.6em;
    }

    .blog-content h3,
    .blog-content h4 {
        font-size: 1.2rem;
        margin: 1.8em 0 0.5em;
    }

    .blog-content ul,
    .blog-content ol {
        margin: 0 0 1.15em;
        padding-left: 1.35em;
    }

    .blog-content li {
        margin-bottom: 0.45em;
    }

    .blog-content a {
        color: var(--blue);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .blog-content img {
        border-radius: 14px;
        margin: 1.5em 0;
        height: auto;
    }

    .blog-content blockquote {
        margin: 1.6em 0;
        padding: 4px 0 4px 20px;
        border-left: 3px solid var(--blue);
        color: var(--muted);
        font-style: italic;
    }

    /* Word/editor artigi inline fontlari bastir - tipografi tek yerden gelsin */
    .blog-content [style*="font-family"] {
        font-family: inherit !important;
    }

.blog-figure {
    margin: 0;
    position: sticky;
    top: 110px;
}

    .blog-figure img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 14px 40px rgba(16, 32, 51, 0.12);
    }

.blog-back {
    margin: 56px 0 0;
}

/* ==========================================================================
   HABER LISTESI (/news)
   Eski surumde .col-lg-3 / .col-lg-9 kullaniliyordu ama grid.css yuklenmedigi
   icin gorsel ve yazi alt alta yigiliyor, gorsele de boyut siniri verilmedigi
   icin orijinal boyutunda kaliyordu. Ayrica listede makalenin tamami
   basiliyordu. Artik: gorsel solda sabit genislikte, yazi saginda, her haber
   kendi karti icinde net ayrilmis.
   ========================================================================== */
.news-page {
    padding: 56px 0 92px;
}

.news-page-head {
    max-width: 780px;
    padding-bottom: 26px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
}

    .news-page-head h1 {
        margin-top: 18px;
        font-size: clamp(2.1rem, 4vw, 3.2rem);
        max-width: none;
    }

.news-empty {
    color: var(--muted);
}

.news-list {
    display: grid;
    gap: 22px;
}

.news-item {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    transition: 0.22s ease;
}

    .news-item:hover {
        border-color: #c3dcef;
        box-shadow: 0 16px 42px rgba(16, 32, 51, 0.09);
        transform: translateY(-2px);
    }

    .news-item.no-media {
        grid-template-columns: minmax(0, 1fr);
    }

.news-item-media {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: var(--blue-soft);
}

    .news-item-media img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
    }

.news-item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 4px 6px 4px 0;
}

.news-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.news-item-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.news-item-title {
    margin: 0;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .news-item-title a:hover {
        color: var(--blue);
    }

.news-item-excerpt {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-item-more {
    margin-top: 4px;
    color: var(--blue);
    font-weight: 700;
    font-size: 0.9rem;
}

    .news-item-more:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

@media (max-width: 780px) {
    .news-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .news-item-media img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 900px) {
    .blog-body,
    .blog-body.no-figure {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .blog-figure {
        position: static;
        order: -1;
    }
}

@media (max-width: 620px) {
    .site-footer {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer-meta {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 980px) {
    .solution-detail {
        grid-template-columns: 1fr;
    }

    .dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

    .screen-tile {
        grid-column: span 2;
    }

    .hero-grid,
    .split,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .cards,
    .outcomes,
    .sepsis-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

    .screen-tile {
        grid-column: span 1;
    }

    /* .links artik gizlenmiyor; 860px altinda cekmeceye donusuyor */

    .cards,
    .outcomes,
    .sepsis-grid {
        grid-template-columns: 1fr;
    }

    .sepsis-split .sepsis-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 3.1rem;
    }
}




/* bxSlider CDN CSS'i pager'a Arial veriyor - tipografi tek yerden gelsin */
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    font-family: var(--font-sans);
}
.bx-wrapper {
    box-shadow: none;
    border: none;
    background: none;
    margin: 0;
}

.bx-next {
    padding: 100px 50px 200px 50px;
    margin-top: -100px !important;
}

.bx-prev {
    padding: 100px 50px 200px 50px;
    margin-top: -100px !important;
}

.bx-wrapper .bx-prev, .bx-wrapper .bx-next {
    background: none;
}

.bx-wrapper .bx-prev {
    margin-left: 20px;
}

.bx-wrapper .bx-next {
    margin-right: 20px;
}

.bx-wrapper .bx-pager {
    position: absolute;
    bottom: 1px;
    padding: 0;
}

    .bx-wrapper .bx-pager a {
        background: white;
    }

        .bx-wrapper .bx-pager a.active {
            background: #0474cb;
        }

.bx-wrapper .bx-default-pager a {
    background: white !important;
}

    .bx-wrapper .bx-default-pager a:focus {
        background: white !important;
    }

    .bx-wrapper .bx-default-pager a.active {
        background: #1ba2cf !important;
    }

        .bx-wrapper .bx-default-pager a.active:focus {
            background: #1ba2cf !important;
        }

.bx-wrapper .bx-controls-direction a {
    text-indent: 0;
    color: white;
    font-size: 25px;
    width: auto;
    height: auto;
}

/**/.mobile-menu {
    display: none;
    background: #0474cb;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    color: white;
    text-align: center;
    padding: 10px;
}

    .mobile-menu .close {
        color: white;
        font-size: 22px;
        float: right;
    }

    .mobile-menu .new-menu ul {
        list-style: none;
    }

        .mobile-menu .new-menu ul li a {
            display: block;
            width: 100%;
            text-align: left;
        }
        .mobile-menu .new-menu ul li a {
            display: block;
            width: 100%;
            padding:10px;
        }

    .mobile-menu .new-menu .menu li {
        text-align: left;
        margin-left:0px !important;
    }

    .mobile-menu .new-menu .menu span {
        text-align: left;
        padding-left: 10px !important;
    }

    .mobile-menu .new-menu .sub-menu{
        text-align: left;
        padding-left: 60px !important;
    }

        .mobile-menu .new-menu .menu li a {
            color: white;
            padding: 10px;
        }

/*.mbl-menu {
    display: none;
}

header {
    padding: 12px 0;
    z-index: 1;
    position: relative;
    transition: all 0.5s;
}

    header .logo {
        margin-top: 0px;
        display: inline-block;
    }

    header .menu {
        float: right;
        margin-top: 7px;
        line-height: 30px;
        position: relative;
    }

        header .menu .cta {
            background: #0474cb;
            color: white;
            padding: 5px 10px;
            border-radius: 30px;
        }

            header .menu .cta i {
                padding-right: 5px;
            }

        header .menu .cta-menu:hover .sub-menu {
            display: block;
        }

        header .menu .cta-menu:hover a {*/
            /*background: #1ab0f1;
            color: white;*/
        /*}

        header .menu .cta-menu-second .child-menu li {
            display: block;
            font-size: 15px;
        }

        header .menu .sub-menu li {
            display: block;
            font-size: 15px;
        }

        header .menu .cta-menu-second a i {
            font-size: 10px;
            margin-left: 6px;
            display: block;
            margin-top: 7px;
        }

        header .menu li {
            display: inline-block;
            margin-left: 5px;
        }

            header .menu li a {
                color: black;
                display: inline-block;
                padding: 5px 10px;
                border-radius: 4px;
            }

                header .menu li a:hover {
                    background: white;
                    color: #0474cb;
                }

.cta:hover {
    background: #1ab0f1 !important;
    color: white !important;
}

header .menu li span {
    color: black;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
}

    header .menu li span:hover {
        background: white;
        color: #0474cb;
    }


.sticky .menu li a:hover {
    background: white;
    color: #1ab0f1;
    font-weight: 600;
}

.sticky .menu li span:hover {
    background: white;
    color: #1ab0f1;
    font-weight: 600;
}


header .menu li a.active {
    background: #1ab0f1;
    color: #0d466a;
}

header .menu li span.active {
    background: #1ab0f1;
    color: #0d466a;
}

header .menu .sub-menu {
    display: none;
    position: absolute;
    top: 35px;
    border-radius: 10px !important;
    min-width: 160px;
    background: white;
}

header .sub-menu li a:hover {
    background: white;
    color: #0474cb;
}

header .menu .sub-menu .child-menu {
    display: none;
    width: 100%;
    position: absolute;
    left: 40px;
    padding: 5px;*/
    /*background: #1ab0f1;
        color: white;*/
/*}

header .menu .sub-menu.show {
    display: block;
}

header .menu .sub-menu li a {
    border-radius: 4px !important;
}

@media (max-width: 992px) {
    header {
        padding: 0;
    }

        header .menu {
            display: none;
        }

        header .mbl-menu {
            display: block;
            float: right;
            color: #055bb8;
            font-size: 23px;
            margin-top: 2%;
        }

        header.sticky .mbl-menu {
            display: block;
            float: right;
            color: white;
            font-size: 23px;
            margin-top: 2%;
        }

        header .logo img {
            width: 100%;
            margin-top: 7%;
        }
}

@media (max-width: 420px) {
    header .mbl-menu {
        margin-top: 2%;
    }
    header .logo img {
        width: 100%;
        margin-top: 10%;
    }
}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: #1bb0f2;
    color: white;
    padding: 10px 0;
    z-index: 998;
}

    header.sticky .logo {
        margin-top: 0px;
        display: inline-block;
    }

        header.sticky .logo img {
            content: url("../img/logo/logo_original_beyaz.png");
        }

    header.sticky .menu {
        margin-top: 10px;
        color: white !important;
    }

@media (max-width: 992px) {
    header.sticky .mbl-menu {
        margin-top: 5px;
    }
}

@media (max-width: 420px) {
    header.sticky .mbl-menu {
        margin-top: 7px;
    }

    header.sticky .logo {
        margin-top: 8px;
    }
}*/

section.main-slider {
    z-index: 0;
    margin-top: -90px;
    position: relative;
    margin-bottom: 20px;
}

    section.main-slider .slide img {
        width: 100%;
    }

    section.main-slider .slide .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
    }

        section.main-slider .slide .box p {
            font-size: 10px;
            margin-top: 10px;
            margin-bottom: 0;
        }

        section.main-slider .slide .box h1 {
            font-size: 30px;
            font-weight: 300;
            margin-bottom: 0;
            font-style: italic;
            margin-top: 10px;
            line-height: 35px;
        }

        section.main-slider .slide .box img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: auto;
        }

        section.main-slider .slide .box a {
            color: white;
        }

    section.main-slider .slide-iomt .box {
        top: 28%;
    }

        section.main-slider .slide-iomt .box h1 {
            font-size: 30px;
        }

        section.main-slider .slide-iomt .box p {
            font-size: 18px;
            line-height: 24px;
        }

    section.main-slider .slide-ai .box {
        left: 24%;
    }

        section.main-slider .slide-ai .box h1 {
            font-size: 50px;
            line-height: 50px;
            font-style: normal;
        }

        section.main-slider .slide-ai .box p {
            font-size: 17px;
        }

    section.main-slider .slide-ds .box {
        left: 24%;
    }

        section.main-slider .slide-ds .box h1 {
            font-size: 33px;
            font-style: normal;
            text-align: left;
            background: #1771b8;
            padding: 5px;
        }

        section.main-slider .slide-ds .box p {
            background: #39b5d5;
            padding: 5px;
            font-size: 20px;
        }

@media (max-width: 992px) {
    section.main-slider .slide .box img {
        width: 35%;
    }

    section.main-slider .slide .box h1 {
        font-size: 19px;
        line-height: 23px;
    }

    section.main-slider .slide-iomt .box {
        top: 50%;
    }

        section.main-slider .slide-iomt .box h1, section.main-slider .slide-iomt .box p {
            text-shadow: 1px 1px 2px #232323;
        }

    section.main-slider .slide-ds .box p {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    section.main-slider {
        margin-top: -51px;
    }

        section.main-slider .slide .slide-img {
            height: 400px;
    width: initial;
        }

        section.main-slider .bx-wrapper img {
            max-width: initial;
        }

        section.main-slider .bx-wrapper, section.main-slider .bx-viewport {
            min-height: 100px;
        }

        section.main-slider .slide-ai .box {
            left: 50%;
        }

        section.main-slider .slide-ds .box {
            left: 50%;
        }

            section.main-slider .slide-ds .box p {
                font-size: 16px;
            }
}

@media (max-width: 420px) {
    section.main-slider {
        margin-top: -41px;
    }

        section.main-slider .slide .slide-img {
            height: 400px;
    width: initial;
        }

        section.main-slider .slide .box h1 {
            margin-top: 0;
            font-size: 12px;
            line-height: 22px;
        }

        section.main-slider .bx-wrapper img {
            max-width: initial;
        }

        section.main-slider .bx-wrapper .bx-controls-direction a {
            top: 57%;
        }

        section.main-slider .bx-wrapper, section.main-slider .bx-viewport {
            min-height: 400px;
        }

        section.main-slider .bx-pager {
            bottom: 10px;
        }
}

/*section.arcForICU {
    padding: 50px 0;
}

    section.arcForICU .info {
        margin-bottom: 40px;
    }

        section.arcForICU .info h1, section.arcForICU .info p {
            text-align: center;
        }

        section.arcForICU .info h1 {
            color: #2f67a2;
            font-weight: 300;
            font-size: 40px;
        }

        section.arcForICU .info p {
            color: #2f67a2;
            font-size: 18px;
        }

    section.arcForICU .infoBox {
        position: relative;
        padding-top: 15px;
    }

        section.arcForICU .infoBox img {
            width: 100%;
        }

        section.arcForICU .infoBox .text {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            color: white;
            padding: 20px;
        }

            section.arcForICU .infoBox .text h2 {
                bottom: 15px;
                position: absolute;
                line-height: 25px;
                font-size: 23px;
                font-weight: 300;
            }

            section.arcForICU .infoBox .text h3 {
                font-weight: 300;
                font-size: 26px;
                line-height: 34px;
                top: 0;
            }

            section.arcForICU .infoBox .text h1 {
                font-weight: 300;
                font-size: 40px;
                line-height: 50px;
                top: 0;
            }


    section.arcForICU .btn-arc-info {
        background: #12c7fb;
        color: white;
        text-align: center;
        border-radius: 4px;
        padding: 10px 0;
        display: block;
        width: 22%;
        margin-top: 40px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        font-size: 17px;
    }

@media (max-width: 1200px) {
    section.arcForICU .btn-arc-info {
        width: 29%;
    }

    section.arcForICU .infoBox .text h2 {
        bottom: 5px;
        font-size: 18px;
    }
}

@media (max-width: 992px) {
    section.arcForICU .info h1 {
        font-size: 40px;
    }

    section.arcForICU .info p {
        font-size: 14px;
    }

    section.arcForICU .btn-arc-info {
        width: 31%;
        padding: 8px 0;
        font-size: 15px;
    }

    section.arcForICU .infoBox .text h1 {
        font-size: 30px;
        line-height: 40px;
    }

    section.arcForICU .infoBox .text h3 {
        font-size: 19px;
        line-height: 25px;
    }

    section.arcForICU .infoBox .text h2 {
        bottom: 0;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    section.arcForICU .infoBox {
        margin-bottom: 20px;
    }

        section.arcForICU .infoBox .text h3 {
            font-size: 33px;
            line-height: 47px;
        }

        section.arcForICU .infoBox .text h2 {
            bottom: 18px;
            font-size: 34px;
        }

        section.arcForICU .infoBox .text h1 {
            font-size: 36px;
            line-height: 40px;
        }

    section.arcForICU .btn-arc-info {
        width: 50%;
    }
}

@media (max-width: 420px) {
    section.arcForICU .infoBox .text h2 {
        bottom: 10px;
        font-size: 26px;
    }

    section.arcForICU .infoBox .text h1 {
        font-size: 30px;
        line-height: 40px;
    }

    section.arcForICU .btn-arc-info {
        width: 70%;
    }
}

section.costAndQualty {
    padding: 60px 0;
    margin-top: 30px;
    background: #f2f6f9;
    color: #2f67a2;
}

    section.costAndQualty h2 {
        text-align: center;
        font-size: 30px;
        font-weight: 300;
        margin-bottom: 30px;
    }

    section.costAndQualty form {
        padding: 25px 0;
    }

    section.costAndQualty .form-group label {
        display: block;
        color: #346699;
    }

    section.costAndQualty .form-group output {
        color: #346699;
        display: block;
        text-align: center;
    }

    section.costAndQualty .btn-submit {
        display: block;
        border: 1px solid #12c7fb;
        color: #12c7fb;
        text-align: center;
        background: transparent;
        padding: 7px 12px;
        border-radius: 4px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        font-size: 16px;
    }

    section.costAndQualty .info {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        background: #5c8cbd;
        width: 200px;
        height: 200px;
        text-align: center;
        padding-top: 58px;
        border-radius: 100%;
        border: 7px solid #e4ebf3;
    }

        section.costAndQualty .info h4 {
            font-weight: 500;
            font-size: 24px;
        }

        section.costAndQualty .info p {
            font-size: 16px;
        }

        section.costAndQualty .info.light {
            background: #c8d4e0;
        }

        section.costAndQualty .info.regular {
            background: #4275ae;
        }

        section.costAndQualty .info.bold {
            background: #2a4f86;
        }

@media (max-width: 992px) {
    section.costAndQualty h2 {
        font-size: 24px;
    }

    section.costAndQualty .form-group label {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    section.costAndQualty .info {
        margin-bottom: 20px;
    }
}*/

section.testimonials {
    background: #eff5f6;
    padding: 50px 0;
}

    section.testimonials h2 {
        font-size: 42px;
        font-weight: 300;
        color: #135599;
        text-align: center;
    }

    section.testimonials a.video {
        margin-top: 20px;
        display: block;
    }

        section.testimonials a.video img {
            width: 100%;
        }

    section.testimonials .bx-wrapper .bx-controls-direction a {
        margin-top: 0;
        font-size: 50px;
        z-index: 9;
        color: #12c7fb;
        margin-left: 0;
        margin-right: 0;
    }

    section.testimonials .quotes .bx-wrapper {
        background: transparent;
        border: none;
        box-shadow: none;
        margin-top: 20px;
    }

        section.testimonials .quotes .bx-wrapper .bx-pager {
            bottom: 30px;
        }

            section.testimonials .quotes .bx-wrapper .bx-pager a {
                background: #aabcd4 !important;
            }

                section.testimonials .quotes .bx-wrapper .bx-pager a.active {
                    background: #12c7fb !important;
                }

        section.testimonials .quotes .bx-wrapper .bx-controls-direction a {
            color: #0474cb;
            top: inherit;
            bottom: 7px;
            margin-top: 0;
            font-size: 40px;
        }

            section.testimonials .quotes .bx-wrapper .bx-controls-direction a.bx-prev {
                margin-left: 0;
            }

            section.testimonials .quotes .bx-wrapper .bx-controls-direction a.bx-next {
                margin-right: 0;
            }

    section.testimonials .quotes .author {
        font-size: 14px;
        line-height: 24px;
        color: #626c6f;
        text-align: center;
    }

    section.testimonials .quotes img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    section.testimonials .quotes div p {
        font-size: 16px;
        line-height: 30px;
        color: #626c6f;
    }

    section.testimonials .btn-more {
        border: 2px solid #12c7fb;
        color: #2f67a2;
        text-align: center;
        border-radius: 3px;
        padding: 7px 15px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 125px;
        margin-top: 25px;
    }

@media (max-width: 992px) {
    section.testimonials .video {
        margin-bottom: 20px;
    }
}

/*section.references {
    padding: 45px 0;
}

    section.references h2 {
        font-size: 42px;
        font-weight: 300;
        color: #135599;
        text-align: center;
    }

    section.references .item {
        padding-bottom: 40px;
    }

        section.references .item img {
            width: 100%;
        }

        section.references .item h5 {
            font-size: 22px;
            font-weight: 300;
            color: #0474cb;
            margin-top: 10px;
            margin-bottom: 0;
        }

        section.references .item p {
            margin: 0;
            font-size: 14px;
            color: #12c7fb;
        }

    section.references .box {
        border: 1px solid #bcd0e4;
        text-align: center;
        padding: 20px 0;
        border-radius: 10px;
    }

        section.references .box h3 {
            font-weight: 300;
            font-size: 45px;
            color: #0474cb;
            margin: 0;
            line-height: 45px;
        }

        section.references .box p {
            color: #12c7fb;
            font-size: 16px;
            margin: 0;
        }

@media (max-width: 992px) {
    section.references .box p {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    section.references .box {
        margin-bottom: 20px;
    }
}

section.rewards {
    background: #eff5f6;
    padding: 50px 0;
}

    section.rewards h2 {
        font-size: 42px;
        font-weight: 300;
        color: #135599;
        text-align: center;
        margin-bottom: 25px;
    }

    section.rewards .item img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    section.rewards .item p {
        text-align: center;
        font-size: 16px;
        color: #0474cb;
    }

@media (max-width: 992px) {
    section.rewards .item img {
        width: 100%;
    }
}

@media (max-width: 767px) {
    section.rewards .item img {
        width: 38%;
    }
}

section.page-header {
    margin-top: 0px;
    position: relative;
}

    section.page-header img {
        width: 100%;
    }

.img30 {
    min-height: 250px;
    object-fit: cover;
    object-position: 30% 0;
}

.img40 {
    min-height: 250px;
    object-fit: cover;
    object-position: 40% 0;
}

.img50 {
    min-height: 250px;
    object-fit: cover;
    object-position: 50% 0;
}

.img80 {
    min-height: 250px;
    object-fit: cover;
    object-position: 80% 0;
}

.img100 {
    min-height: 250px;
    object-fit: cover;
    object-position: 100% 0;
}

#imgBanner {
    object-fit: cover;
    height: 250pt;
    width: 100%;
}

    section.page-header .title {
        position: absolute;
        bottom: 20px;
        width: 100%;
    }

        section.page-header .title h1 {
            color: white;
            font-size: 35px;
            font-weight: 300;
            border-left: 3px solid #0474cb;
            padding-left: 10px;
        }

@media (max-width: 767px) {
    section.page-header {
        margin-top: 5px;
    }

        section.page-header .title {
            bottom: 0px;
        }

            section.page-header .title h1 {
                font-size: 23px;
            }
}

@media (max-width: 420px) {
    section.page-header {
        margin-top: 0px;
    }

        section.page-header .title h1 {
            font-size: 17px;
        }
}

section.contact {
    padding: 40px 0;
}

    section.contact .info {
        color: #0474cb;
        margin-bottom: 20px;
    }

        section.contact .info i {
            color: white;
            background: #0474cb;
            padding: 10px;
            border-radius: 50%;
            margin-right: 10px;
        }

    section.contact .contact-form h2 {
        font-weight: 300;
        font-size: 30px;
        color: #0474cb;
        margin-bottom: 20px;
    }

    section.contact .contact-form .form-group {
        margin-bottom: 15px;
    }

        section.contact .contact-form .form-group input[type="text"],
        section.contact .contact-form .form-group input[type="email"],
        section.contact .contact-form .form-group input[type="number"],
        section.contact .contact-form .form-group input[type="tel"] {
            border: none;
            padding: 5px 7px;
            border-radius: 4px;
            width: 100%;
            background: #e6edf1;
            margin-bottom: 10px;
        }

        section.contact .contact-form .form-group textarea {
            border: none;
            padding: 5px 7px;
            border-radius: 4px;
            width: 100%;
            background: #e6edf1;
            max-width: 100%;
        }

        section.contact .contact-form .form-group button {
            border: 1px solid #1ab0f1;
            color: #1ab0f1;
            background: none;
            padding: 5px 15px;
            border-radius: 4px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

    section.contact .map iframe {
        width: 100%;
    }

section.content {
    padding: 40px 0;
    color: #2e506c;
}

    section.content .blog-item h1 {
        font-weight: 300;
        font-size: 33px;
    }

    section.content .blog-item .category {
        font-size: 12px;
        margin-top: 5px;
        color: #a9b8c5;
    }

    section.content .blog-item img {
        width: 100%;
    }

        section.content .blog-item img.side-img {
            display: block;
            float: left;
            width: 30%;
            padding: 20px;
        }

    section.content .desc {
        font-size: 16px;
        color: #2e506c;
    }

    section.content .info-boxes {
        margin: 40px 0;
        background: #f5fcff;
        padding: 40px 40px 0 40px;
        border: 1px solid #d8e6ec;
    }

        section.content .info-boxes .box {
            background: white;
            padding: 20px;
            border: 1px solid #d8e6ec;
            margin-bottom: 40px;
        }

            section.content .info-boxes .box h4 {
                font-size: 30px;
                font-weight: 300;
            }

            section.content .info-boxes .box p {
                font-size: 16px;
                line-height: 21px;
            }

@media (max-width: 420px) {
    section.content .info-boxes {
        padding: 20px 20px 0;
    }
}

section.page-content {
    padding: 40px 0;
    background: white;
    background: linear-gradient(0deg, white 0%, #1874a3 50%, white 100%);
}

    section.page-content .features h1 {
        text-align: center;
        color: #0474cb;
        font-size: 46px;
        font-weight: 300;
    }

    section.page-content .features p {
        text-align: left;
        font-size: 20px;
        line-height: 36px;
        color: white;
    }

    section.page-content .features img {
        margin-top: 20px;
        margin-bottom: 40px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    section.page-content .features ul {
        margin-top: 30px;
        margin-left: 40px;
        list-style: none;
        color: white;
    }

        section.page-content .features ul li {
            margin-bottom: 20px;
        }

            section.page-content .features ul li::before {
                content: "\2022";
                color: #0474cb;
                font-weight: 800;
                display: inline-block;
                width: 1em;
                margin-left: -1em;
            }

    section.page-content .hr {
        padding: 30px 0;
    }

        section.page-content .hr img {
            width: 100%;
        }

    section.page-content .arc-system h1 {
        text-align: center;
        color: white;
        font-size: 46px;
        font-weight: 300;
    }

    section.page-content .arc-system p {
        text-align: center;
        color: white;
        line-height: 32px;
    }

    section.page-content .arc-system img {
        width: 100%;
        margin: 30px 0;
        border: 7px solid #328eba;
        border-radius: 7px;
    }

    section.page-content .arc-box h1 {
        text-align: center;
        color: white;
        font-size: 46px;
        font-weight: 300;
    }

    section.page-content .arc-box p.bigger {
        font-size: 18px;
        text-align: center;
        color: white;
    }

    section.page-content .arc-box p {
        font-size: 16px;
        line-height: 27px;
        color: white;
        text-align: center;
    }

    section.page-content .arc-box img {
        margin: 30px 0;
        border: 7px solid #b7d4e0;
        border-radius: 7px;
        width: 100%;
    }

    section.page-content .easy-communication h1 {
        text-align: center;
        color: #0474cb;
        font-size: 46px;
        font-weight: 300;
    }

    section.page-content .easy-communication p {
        font-size: 18px;
        line-height: 32px;
        text-align: center;
        margin-bottom: 40px;
    }

    section.page-content .easy-communication .box img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }

    section.page-content .easy-communication .box p {
        font-size: 18px;
        line-height: 32px;
    }

footer {
    background: #f2f6f9;
    padding: 25px 0;
    color: #2f67a2;
    text-align: center;
}

    footer img {
        display: block;*/
        /*margin-left: auto;*/
    /*}

    footer .footer-menu li {
        display: inline-block;
        padding: 0 20px;
    }

        footer .footer-menu li a {
            color: #2f67a2;
        }

            footer .footer-menu li a:hover {
                color: #12c8fa;
            }

    footer address {
        padding-top: 35px;
        color: #2f67a2;
    }

        footer address a {
            color: #2f67a2;
        }

    footer .social li {
        display: inline-block;
        margin-bottom: 10px;
    }


        footer .social li a {
            background: #135499;
            color: white;
            display: block;
            width: 37px;
            height: 37px;
            border-radius: 37px;
            line-height: 37px;
            text-align: center;
        }

    footer p {
        font-size: 14px;
    }

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    border: 1px solid #444;
}

    #back-to-top:hover {
        background: #e9ebec;
    }

    #back-to-top.show {
        opacity: 1;
    }

.ctabutton {
    background: #fff0 !important;
    color: #0474cb !important;
    padding: 10px 10px !important;
    border-radius: 13px !important;
    border: 1px solid #c8d4e0;
    float:right;
}


    .ctabutton:hover {
        background: #0474cb !important;
        color: white !important;
    }


.imgZoom:hover {
    -ms-transform: scale(1.05);*/ /* IE 9 */
    /*-webkit-transform: scale(1.05);*/ /* Safari 3-8 */
    /*transform: scale(1.05);
}

iframe {
    width: 65vw;
    height: calc(65vw/1.775);
    box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
    border-radius: 20px;
}*/

/*body {
    margin: 0;
    background: linear-gradient(#eeeeee, #cccccc);
    overflow: hidden;
}*/

/*.selector {
    position: absolute;
    width: 200px;
    margin-top: -90px;
    margin-left: 300px;
    height: 200px;
}

    .selector,
    .selector button {
        font-family: inter;
        font-weight: 300;
    }

        .selector button {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 10px;
            background: #1bb0f2;
            border-radius: 50%;
            border: 5px solid #c0d7e1;
            color: white;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
            transition: all .1s;
        }

            .selector button:hover {
                background: #07b594;
            }

            .selector button:focus {
                outline: none;
            }

        .selector ul {
            position: absolute;
            list-style: none;
            padding: 0;
            margin: 0;
            top: -20px;
            right: -20px;
            bottom: -20px;
            left: -20px;
        }

        .selector li {
            position: absolute;
            width: 0;
            height: 100%;
            margin: 0 50%;
            -webkit-transform: rotate(-360deg);
            transition: all 0.8s ease-in-out;
        }

            .selector li input {
                display: none;
            }



                .selector li input + div {
                    position: absolute;
                    left: 50%;
                    bottom: 110%;
                    width: 0;
                    height: 0;
                    line-height: 1px;
                    margin-left: 0;
                    background: #0084bf;
                    color: white;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    font-size: 1px;
                    border: 2px solid #0084bf;
                    overflow: hidden;
                    cursor: pointer;
                    box-shadow: 0 4px 10px rgb(0 0 0 / 25%) !important;
                    transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
                }

.imgZoom:hover {
}


.selector li input + div:hover {
    background: #1bb0f2;
    transform: scale(1.3);
}

.selector li input:checked + div {
    background: #1bb0f2;
    color: white;
}

    .selector li input:checked + div:hover {
        background: #1bb0f2;
    }

.selector.open li input + div {
    width: 100px;
    height: 100px;
    line-height: 25px;
    margin-top: 20%;
    margin-left: -50px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}


@media (max-width: 768px) {
    .iframe1 {
        width: 85vw !important;
        height: calc(90vw/1.775) !important;
        box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
        border-radius: 20px;
    }

    .iframe2 {
        width: 85vw !important;
        height: calc(85vw/1.775) !important;
        box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
        border-radius: 20px;
    }


    .iframe3 {
        width: 85vw !important;
        height: calc(85vw/1.775) !important;
        box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
        border-radius: 20px;
    }

    .imgZoomPersona {
        width: 30%;
        padding: 20px;
        border: 1px solid #1bb0f2;
        border-radius: 50%;
    }

    .circleDivLabel1 {
        font-size: 4vw;
        line-height: 4.8vw;
        height: 30%;
        color: #034278;
        font-family: inter-light;
    }

    .circleDivLabel2 {
        font-size: 4vw;
        line-height: 4.8vw;
        height: 30%;
        color: #0687f4;
        font-family: inter-light;
    }

    .circleDivLabel3 {
        font-size: 3vw;
        line-height: 3.6vw;
        height: 14%;
        color: #034278;
        font-family: inter-light;
    }

    .circle3Div {
        border-radius: 50%;
        border: 7px solid #f1f4f8;
        background: #dde3e9;
        width: 60%;
        padding-right: 0px !important;
        position: relative;
        margin-left: 20%;
        text-align: center;
    }

    .circle2Div {
        border-radius: 50%;
        border: 7px solid #f1f4f8;
        background: #dde3e9;
        width: 60%;
        padding-right: 0px !important;
        position: relative;
        margin-left: 20%;
        text-align: center;
    }

    .row2 {
        padding-bottom:60px;
    }

    .paddingBottom300 {
        padding-bottom: 450px !important;
    }

    .paddingBottom150 {
        padding-bottom: 150px !important;
    }

    .paddingBottom100 {
        padding-bottom: 100px !important;
    }

    .ctabutton {
        float: right !important;
    }
}

@media (min-width: 769px) {
    .iframe1 {
        width: 50vw !important;
        height: calc(50vw/1.775) !important;
        box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
        border-radius: 20px;
    }

    .iframe2 {
        width: 70vw !important;
        height: calc(70vw/1.775) !important;
        box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
        border-radius: 20px;
    }

    .iframe3 {
        width: 35vw !important;
        height: calc(40vw/1.775) !important;
        box-shadow: rgb(20 20 20 / 45%) 0px 30px 15px -15px;
        border-radius: 20px;
    }

    .imgZoomPersona {
        width: 80%;
        padding: 20px;
        border: 1px solid #1bb0f2;
        border-radius: 60%;
    }

    .circleDivLabel1 {
        font-size: 0.8vw;
        line-height: 1vw;
        height: 20%;
        color: #034278;
        font-family: inter-light;
    }

    .circleDivLabel2 {
        font-size: 1vw;
        line-height: 1.2vw;
        height: 30%;
        color: #0687f4;
        font-family: inter-light;
    }

    .circleDivLabel3 {
        font-size: 0.8vw;
        line-height: 1vw;
        height: 2vw;
        color: #034278;
        font-family: inter-light;
    }

    .circle3Div {
        border-radius: 50%;
        border: 7px solid #f1f4f8;
        background: #dde3e9;
        width: 40%;
        padding-right: 0px !important;
        position: relative;
        margin-left: 12.5%;
        text-align: center;
    }

    .circle2Div {
        border-radius: 50%;
        border: 7px solid #f1f4f8;
        background: #dde3e9;
        width: 40%;
        padding-right: 0px !important;
        position: relative;
        margin-left: 42.5%;
        text-align: center;
    }

    .row2 {
        padding-bottom: 0px;
    }

    .paddingBottom300 {
        padding-bottom: 150px !important;
    }

    .paddingBottom150 {
        padding-bottom: 50px !important;
    }

    .ctabutton {
        float: none !important;
    }
}*/

/* ==========================================================================
   URUN SAYFASI BILESENLERI
   Arc Command / Arc Connect / Arc Intell / Arc AI / Tele-Arc sayfalari ayni
   yapiyi kullanir: banner -> giris -> yetenek kartlari -> gorsel -> sayilar.
   ========================================================================== */
/* Banner'in hemen ardindaki giris. Ust bosluk dar tutuluyor ki paragraf
   banner'in devami gibi okunsun, koparilmis bir blok gibi durmasin. */
.product-intro {
    padding: 46px 0 8px;
}

    .product-intro .eyebrow + h1 {
        font-size: clamp(2rem, 3.6vw, 3.1rem);
        max-width: 900px;
    }

    /* Sayfadaki TEK buyuk baslik. Bolum basliklari bundan belirgin
       sekilde kucuk kalir ki sayfada bir tane "buyuk baslik" olsun. */
    .product-intro h2 {
        font-size: clamp(1.9rem, 3.2vw, 2.6rem);
        max-width: 820px;
    }

    /* Buyuk basligin altindaki alt baslik */
    .product-subtitle {
        margin: 14px 0 0;
        max-width: 760px;
        font-size: clamp(1.05rem, 1.5vw, 1.25rem);
        font-weight: 650;
        color: var(--blue-dark);
        line-height: 1.4;
    }

/* Urun sayfasi baslik olcegi.
   Genel h2 kurali (ana sayfa icin clamp(2.2rem,4vw,4.4rem) = 51px) burada
   hiyerarsiyi tersine ceviriyordu. Sira:
   banner h1 > giris h2 (tek buyuk) > alt baslik > bolum h2 > kart h3. */
.product-section .section-head h2 {
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}

    .product-intro .lead {
        max-width: 820px;
    }

.product-section {
    padding: 64px 0;
}

    .product-section > .container > .section-head {
        max-width: 860px;
        margin-bottom: 34px;
    }

.product-section.tinted {
    background: var(--bg);
}

/* --- yetenek kartlari --- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

    /* Dort yetenegin oldugu sayfalar icin (orn. Tele-Arc) */
    .feature-grid.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

.feature-card {
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: 0.22s ease;
}

    .feature-card:hover {
        border-color: #c3dcef;
        box-shadow: 0 16px 42px rgba(16, 32, 51, 0.08);
        transform: translateY(-3px);
    }

    .feature-card .card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-bottom: 16px;
        border-radius: 13px;
        background: var(--blue-soft);
        color: var(--blue);
        font-size: 1.15rem;
    }

    .feature-card h3 {
        font-size: 1.12rem;
        color: var(--blue-dark);
    }

    .feature-card p {
        margin: 10px 0 0;
        color: var(--muted);
        line-height: 1.6;
    }

/* --- basit etiket listesi (orn. cihaz tipleri) --- */
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tag-row li {
        padding: 12px 20px;
        border-radius: 999px;
        background: var(--blue-soft);
        color: var(--blue-dark);
        font-weight: 650;
    }

/* --- urun gorseli: ekran goruntusunu cerceveleyerek sunar --- */
.product-figure {
    /* Ekran goruntuleri sinirli cozunurlukte; kapsayici genisligine kadar
       buyutmek bulaniklastiriyor. Dogal boyuta yakin bir sinir koyup ortaliyoruz. */
    max-width: 860px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff, #f3f9ff);
    box-shadow: var(--shadow);
}

    .product-figure img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        display: block;
    }

    .product-figure figcaption {
        margin-top: 14px;
        text-align: center;
        color: var(--muted);
        font-size: 0.86rem;
    }

    /* Genis gorseller (kompozit sema vb.) icin siniri kaldir */
    .product-figure.wide {
        max-width: none;
    }

/* --- ikon + etiket fayda kartlari ---
   Eskiden bu satir gorselin icine gomulu yaziydi; artik gercek metin:
   secilebilir, aranabilir, mobilde akiyor ve site fontunu kullaniyor. */
.benefit-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.benefit-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    border-bottom: 3px solid var(--blue);
    transition: 0.2s ease;
}

    .benefit-card:hover {
        box-shadow: 0 14px 34px rgba(16, 32, 51, 0.08);
        transform: translateY(-2px);
    }

    .benefit-card i {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--blue-soft);
        color: var(--blue);
        font-size: 1.15rem;
    }

    .benefit-card span {
        font-weight: 650;
        color: #2c3e52;
        line-height: 1.35;
    }

@media (max-width: 980px) {
    .benefit-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .benefit-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- sayfa sonu cagri --- */
.product-cta {
    padding: 12px 0 72px;
}

    /* Kompakt bir seritten fazlasi olmasin: panel varsayilan 40px padding ve
       buyuk baslik aliyordu, bolum gereginden fazla yer kapliyordu. */
    .product-cta .panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px 28px;
        flex-wrap: wrap;
        padding: 22px 28px;
        border-radius: 22px;
    }

    .product-cta h2 {
        font-size: clamp(1.15rem, 1.6vw, 1.45rem);
        line-height: 1.35;
        letter-spacing: -0.02em;
        max-width: 620px;
    }

    .product-cta .btn {
        min-height: 42px;
        padding: 0 20px;
        font-size: 0.92rem;
        background: #fff;
        color: var(--blue-dark);
        border-color: #fff;
    }

@media (max-width: 1100px) {
    .feature-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .feature-grid,
    .feature-grid.four {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   SABIT ARAYUZ OGELERI (yukari cik butonu + cerez seridi)
   Ikisi de _Layout icindeki inline <style> blogundan buraya tasindi.
   #back-to-top'un onceki kurallari olu bir yorum blogunda kaldigi icin
   element hic stil almiyor ve sayfa akisinda duruyordu.
   ========================================================================== */
#back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 45;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 10px 26px rgba(16, 32, 51, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, color 0.2s ease;
}

    #back-to-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

        #back-to-top.show:hover {
            color: var(--blue-dark);
            transform: translateY(-3px);
        }

    /* ilerleme halkasi */
    #back-to-top svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);   /* dolum tepeden baslasin */
        overflow: visible;
    }

    #back-to-top circle {
        fill: none;
        stroke-width: 3;
    }

.btt-track {
    stroke: #dce8f2;
}

.btt-bar {
    stroke: var(--blue);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.12s linear;
}

    #back-to-top i {
        position: relative;
        font-size: 0.95rem;
        line-height: 1;
    }

/* --- cerez seridi --- */
.cookie {
    position: fixed;
    left: 20px;
    bottom: 22px;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 16px;
    max-width: min(430px, calc(100vw - 40px));
    padding: 14px 18px;
    border-radius: 16px;
    background: #dcecfa;
    border: 1px solid #bcdcf4;
    box-shadow: 0 14px 34px rgba(16, 32, 51, 0.16);
}

    /* Gorunurluk sinifla yonetiliyor: jQuery .show()/.hide() inline display
       yazdigi icin flex duzenini bozuyordu. */
    .cookie.is-visible {
        display: flex;
    }

    .cookie .txt {
        flex: 1 1 auto;
        min-width: 0;
    }

        .cookie .txt p {
            margin: 0;
            font-size: 0.82rem;
            line-height: 1.45;
            color: #1d2d35;
        }

        .cookie .txt a {
            color: var(--blue-dark);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

    .cookie .accept {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 18px;
        font-size: 0.85rem;
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
    }

        .cookie .accept:hover {
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            transform: none;
        }

@media (max-width: 620px) {
    .cookie {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        gap: 12px;
    }

    /* Cerez seridi ekranin altini kapliyor; buton onun ustunde dursun.
       Serit kapatildiginda (body.cookie-dismissed) asagi iner. */
    #back-to-top {
        right: 14px;
        bottom: 100px;
        width: 46px;
        height: 46px;
    }

    body.cookie-dismissed #back-to-top {
        bottom: 18px;
    }
}

/* ==========================================================================
   NAVIGASYON
   - Aktif menu ogesi marka mavisi + alt cizgi
   - Mobilde .links sagdan acilan bir cekmeceye donusuyor
     (eskiden 620px altinda tamamen gizleniyordu)
   ========================================================================== */
.nav-link {
    position: relative;
    padding: 6px 2px;
    transition: color 0.18s ease;
}

    .nav-link:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        border-radius: 2px;
        background: var(--blue);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.22s ease;
    }

    .nav-link:hover {
        color: var(--blue);
    }

    .nav-link.active {
        color: var(--blue);
        font-weight: 700;
    }

        .nav-link.active:after {
            transform: scaleX(1);
        }

/* Bolum baglantisi ile sticky header'in ustuste binmemesi icin */
section[id] {
    scroll-margin-top: 92px;
}

/* --- hamburger --- */
.nav-toggle {
    display: none;
    position: relative;
    z-index: 60;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        margin: 4px auto;
        border-radius: 2px;
        background: var(--blue-dark);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    /* acikken X'e donusur */
    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

.nav-backdrop {
    display: none;
}

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
    }

    .links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        width: min(310px, 82vw);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        padding: 96px 26px 32px;
        background: #fff;
        border-left: 1px solid var(--line);
        box-shadow: -18px 0 44px rgba(16, 32, 51, 0.16);
        transform: translateX(100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
    }

        .links.open {
            transform: translateX(0);
        }

        .links .nav-link {
            width: 100%;
            padding: 14px 0;
            font-size: 1.05rem;
            border-bottom: 1px solid var(--line);
        }

            /* cekmecede alt cizgi yerine sol seritle isaretle */
            .links .nav-link:after {
                left: -26px;
                right: auto;
                top: 0;
                bottom: 0;
                width: 3px;
                height: auto;
                transform: scaleY(0);
            }

            .links .nav-link.active:after {
                transform: scaleY(1);
            }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(8, 26, 47, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
    }

        .nav-backdrop.open {
            opacity: 1;
            visibility: visible;
        }

    body.nav-open {
        overflow: hidden;
    }
}

/* --- Gorsel uzerine gercek HTML baslik tasiyan hero ---
   Banner'lara yazi gomulu geldiginde font sitenin geri kalaniyla
   uyusmuyordu. Artik yazisiz gorsel + HTML baslik kullaniyoruz. */
.page-hero.overlay {
    position: relative;
    background: #0b2136;
}

    .page-hero.overlay img {
        display: block;
        width: 100%;
        height: auto;
    }

.hero-caption {
    padding: 24px 0 32px;
    color: #fff;
}

    .hero-caption .eyebrow {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    /* Banner basligi sayfanin kimlik satiri; asil buyuk baslik govdedeki
       .product-intro h2. Ikisi ayni boyda olunca "iki buyuk baslik" gibi
       okundugu icin banner bilincli olarak geri cekildi. */
    .hero-caption h1 {
        margin-top: 14px;
        font-size: clamp(1.5rem, 2.6vw, 2.15rem);
        color: #fff;
        max-width: 820px;
    }

    /* banner'daki alt satir (eski gorsele gomulu ikinci yazi) */
    .hero-sub {
        margin: 12px 0 0;
        max-width: 700px;
        font-size: clamp(0.98rem, 1.35vw, 1.15rem);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.45;
    }

    .hero-caption .lead {
        margin-top: 14px;
        color: rgba(255, 255, 255, 0.84);
        max-width: 620px;
    }

/* Masaustunde yazi gorselin uzerine biner; mobilde gorselin altina gecer
   (gorsel kirpilmasin diye height:auto koruniyor, dar ekranda ustune
   yazi sigmiyor). */
@media (min-width: 861px) {
    .page-hero.overlay:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(6,22,40,0.86) 0%, rgba(6,22,40,0.6) 46%, rgba(6,22,40,0.15) 100%);
    }


    .page-hero.overlay .hero-caption {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

    /* Acik tonlu banner'lar icin dar yazi sutunu.
       Perde saga dogru inceldiginden yazi sagdaki aydinlik bolgeye
       tastiginda kontrast dusuyor (Tele-Arc'ta 3.9:1'e kadar). Yaziyi
       perdenin koyu tarafinda tutunca 5.3:1'e cikiyor (AA). */
    .page-hero.overlay.tight .hero-caption h1,
    .page-hero.overlay.tight .hero-sub,
    .page-hero.overlay.tight .hero-caption .lead {
        max-width: 620px;
    }
}


/* ==========================================================================
   3B ADIM KARUSELI (Arc Connect veri akisi)
   Dort kart derinlikli dort yuvada durur: on / sag / arka / sol.
   Yuvalar JS tarafindan data-slot ile atanir (main.js), gecis CSS
   transition'i ile olur. Boylece:
     - kendiliginden donerken yumusak akar
     - bir karta tiklandiginda o kart dogrudan one gelir
     - uzerine gelindiginde durmaz, hizlanip o kart one gelir
   Derinlik siralamasi translateZ ile tarayiciya birakiliyor (preserve-3d).
   ========================================================================== */
.step-stage {
    position: relative;
    /* On kart perspektifle buyudugu icin (z=200'de ~1.15x) sahne yuksekligi
       kartin gercek yuksekliginden fazla olmali; yoksa alttan tasiyor. */
    height: 640px;
    perspective: 1500px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
}

.step-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

@media (min-width: 901px) {
    .step-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 330px;
        box-shadow: 0 18px 44px rgba(16, 32, 51, 0.14);
        cursor: pointer;
        backface-visibility: hidden;
        will-change: transform;
        /* sure JS tarafindan ayarlanir; buradaki varsayilan */
        transition: transform 900ms cubic-bezier(.22,.61,.36,1),
                    opacity 900ms ease,
                    box-shadow 300ms ease;
    }

        /* --- yuvalar --- */
        .step-card[data-slot="0"] {   /* on */
            transform: translate(-50%, -50%) translate3d(0, 70px, 200px) scale(1);
            opacity: 1;
        }

        .step-card[data-slot="1"] {   /* sag */
            transform: translate(-50%, -50%) translate3d(330px, 0, 0) scale(0.86);
            opacity: 0.97;
        }

        .step-card[data-slot="2"] {   /* arka */
            transform: translate(-50%, -50%) translate3d(0, -70px, -200px) scale(0.74);
            opacity: 0.94;
        }

        .step-card[data-slot="3"] {   /* sol */
            transform: translate(-50%, -50%) translate3d(-330px, 0, 0) scale(0.86);
            opacity: 0.97;
        }

        .step-card:hover,
        .step-card:focus-visible {
            box-shadow: 0 24px 56px rgba(13, 94, 168, 0.24);
            outline: none;
        }

        .step-card:focus-visible {
            border-color: var(--blue);
        }
}

    .step-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: contain;
        /* Illustrasyonlarin kendi zemini beyaz; "contain" nedeniyle olusan
           bosluk da beyaz olsun ki gorsel kartla kesintisiz birlessin. */
        background: #fff;
        border-radius: 12px;
    }

.step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 14px 0 8px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
}

.step-card h3 {
    font-size: 1.02rem;
    color: var(--blue-dark);
}

.step-card p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Dar ekranda 3B tur sigmaz: kartlar normal akista alt alta dizilir.
   (Yuva transformlari yalnizca >=901px'te tanimli oldugu icin burada
   ek bir sifirlama gerekmiyor.) */
@media (max-width: 900px) {
    .step-stage {
        height: auto;
        perspective: none;
        transform-style: flat;
        display: grid;
        gap: 16px;
    }
}

/* Hareket hassasiyeti: gecis suresi sifirlanir, kartlar yine yuvalarinda
   durur ama aninda yer degistirir. */
@media (prefers-reduced-motion: reduce) {
    .step-card {
        transition-duration: 1ms !important;
    }
}

/* ==========================================================================
   ALTIGEN (PETEK) DESEN
   Arc Intell'de oncelik adimlari. Yaziya gomulu balon serisinin yerini alir.
   3 + 2 dizilim: ikinci sira ortalandigi icin dogal olarak yarim altigen
   kayar; dikeyde %25 ust uste binerek petek deseni olusur.
   ========================================================================== */
.hex-comb {
    --hex-w: 210px;
    --hex-gap: 16px;
    --hex-h: calc(var(--hex-w) * 1.1547);   /* duzgun altigen orani 2/√3 */
    --hex-step: calc(var(--hex-w) + var(--hex-gap));
    --comb-w: calc(var(--hex-w) * 3 + var(--hex-gap) * 2);
    /* Petegin tamamina yayilan tek gecis.
       Acik uc bilincli olarak sinirli: daha acik mavilerde beyaz yazi da
       koyu yazi da AA esigini gecemiyor (olculdu), o yuzden aralik koyu
       lacivert -> orta mavi arasinda tutuldu. */
    --hex-ramp: linear-gradient(90deg, #052c50 0%, #0a4d8c 32%, #0f61a8 58%, #1470bd 80%, #1a7cc7 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.hex-line {
    display: flex;
    justify-content: center;
    gap: var(--hex-gap);
}

    /* Satir araligi.
       Bitisik peteklerde satir merkezleri 0.75*h kadar ayrilir. Aralarinda g
       kadar bosluk isteniyorsa altigeni g kadar buyumus saymak gerekir:
       merkez araligi = 0.866*(w+g)  ->  margin = -0.25*h + 0.866*g
       Bu duzeltme olmadan capraz bosluk yatay bosluktan dar kaliyordu. */
    .hex-line + .hex-line {
        margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.866);
    }

.hex {
    width: var(--hex-w);
    height: var(--hex-h);
    /* sivri ust/alt altigen */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 0 15%;
    transition: transform 0.22s ease, filter 0.22s ease;
}

    .hex:hover {
        transform: translateY(-4px);
        filter: brightness(1.06);
    }

/* --- TON GECISI ---
   Bes altigen ayri ayri renklendirilmiyor: hepsi ayni yatay gradyani
   tasiyor, sadece kendi konumundaki dilimi gosteriyor. Renk yalnizca x'e
   bagli oldugu icin komsu altigenlerin temas noktalarindaki tonlar
   birbirini tutuyor; petek tek bir gecisin kesilmis hali gibi okunuyor. */
.hex {
    background-image: var(--hex-ramp);
    background-size: var(--comb-w) 100%;
    background-repeat: no-repeat;
    background-position: calc(-1 * var(--hx)) center;
    /* gecisin her noktasi beyaz yazi icin yeterince koyu (en dusuk 5:1) */
    color: #fff;
}

/* ust sira: 0, 1, 2 adim ; alt sira yarim adim kaydirilmis */
.hex--p1 {
    --hx: 0px;
}

.hex--p2 {
    --hx: var(--hex-step);
}

.hex--p3 {
    --hx: calc(var(--hex-step) * 2);
}

.hex--p4 {
    --hx: calc(var(--hex-step) * 0.5);
}

.hex--p5 {
    --hx: calc(var(--hex-step) * 1.5);
}

    .hex i {
        font-size: 1.35rem;
        opacity: 0.9;
    }

    .hex span {
        font-weight: 700;
        font-size: 0.88rem;
        line-height: 1.3;
    }

@media (max-width: 900px) {
    .hex-comb {
        --hex-w: 170px;
    }
}

@media (max-width: 560px) {
    /* dar ekranda petek yerine sarmali dizilim */
    .hex-comb {
        --hex-w: 150px;
    }

    .hex-line {
        flex-wrap: wrap;
        gap: 12px;
    }

        .hex-line + .hex-line {
            margin-top: 12px;
        }
}

/* ==========================================================================
   ARC AI AKIS SEMASI (algila -> ogren -> mudahale)
   Belgedeki gorselde bu uc adim daire+ok olarak cizilmis ve yazilar
   gorselin icine gomulmustu. Gorsel yerine gercek metin: renk rampasi
   acik maviden marka mavisine gidiyor, son adim dolu daire.
   ========================================================================== */
.ai-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 230px;
    height: 230px;
    padding: 26px 22px;
    border: 10px solid var(--ai-accent);
    border-radius: 50%;
    background: #fff;
    color: var(--blue-dark);
    text-align: center;
    box-sizing: border-box;
}

    .ai-step i {
        font-size: 1.5rem;
    }

    .ai-step span {
        font-weight: 700;
        font-size: 0.86rem;
        line-height: 1.35;
    }

    /* rampa: acik -> orta -> marka mavisi (son adim dolu) */
    .ai-step--1 {
        --ai-accent: #7cc9ef;
    }

    .ai-step--2 {
        --ai-accent: #2e9bd8;
    }

    .ai-step--3 {
        --ai-accent: var(--blue);
        background: var(--blue);
        color: #fff; /* #0d5ea8 uzerinde beyaz = 6.6:1 */
    }

    /* adimlar arasi ok; rengi o adimin rampa rengi */
    .ai-step + .ai-step {
        margin-left: 62px;
    }

    .ai-step:not(:last-child):after {
        content: "";
        position: absolute;
        left: calc(100% + 22px);
        top: 50%;
        width: 0;
        height: 0;
        transform: translateY(-50%);
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
        border-left: 17px solid var(--ai-accent);
    }

@media (max-width: 820px) {
    /* dar ekranda alt alta; ok asagi bakar */
    .ai-flow {
        flex-direction: column;
    }

    .ai-step + .ai-step {
        margin: 56px 0 0;
    }

    .ai-step:not(:last-child):after {
        left: 50%;
        top: calc(100% + 22px);
        transform: translateX(-50%);
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 17px solid var(--ai-accent);
        border-bottom: 0;
    }
}

/* Arc AI Sepsis panelindeki urun sayfasi cikisi.
   Sadece bu panele; .product-cta .panel'de buton baslikla ayni satirda
   duruyor ve ust bosluk almamali. */
.sepsis .panel > .btn {
    margin-top: 26px;
}

/* ==========================================================================
   FORM KARTI (demo talebi, iletisim)
   Demo sayfasi .row / .col-md-6 kullaniyordu ama grid.css hic yuklenmiyor;
   alanlar tam genislikte yigiliyor, input/textarea/button tarayici
   varsayilaniyla ciziliyordu (223x26, gri buton). Ayrica bolume .contact
   sinifi verilmisti -- o sinif ana sayfadaki KOYU bolum icin, form lacivert
   zeminde varsayilan alanlarla kaliyordu.
   ========================================================================== */
.form-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

    /* tam satir kaplayan alanlar */
    .form-grid .wide {
        grid-column: 1 / -1;
    }

.field label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.86rem;
    font-weight: 650;
    color: #33475b;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #cfe0ee;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.field textarea {
    min-height: 132px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        outline: none;
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(13, 94, 168, 0.14);
    }

.field .field-validation-error,
.form-card .text-danger,
.form-card .validation-summary-errors {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #c0392b;
}

.form-card .validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

/* --- ilgi alani kutulari --- */
.check-legend {
    margin: 0 0 12px;
    font-size: 0.86rem;
    font-weight: 650;
    color: #33475b;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    transition: 0.18s ease;
}

    .check-item:hover {
        border-color: #c3dcef;
        background: var(--blue-soft);
    }

    .check-item input {
        margin: 2px 0 0;
        flex: 0 0 auto;
        accent-color: var(--blue);
    }

    /* isaretliyi belli et (destekleyen tarayicilarda) */
    .check-item:has(input:checked) {
        border-color: var(--blue);
        background: var(--blue-soft);
    }

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Sunucudan donen bilgilendirme; onceden alert() ile gosteriliyordu. */
.form-notice {
    max-width: 900px;
    margin: 0 auto 22px;
    padding: 14px 18px;
    border-left: 3px solid var(--blue);
    border-radius: 0 12px 12px 0;
    background: rgba(13, 94, 168, 0.06);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .form-card {
        padding: 24px 20px;
    }

    .form-grid,
    .check-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-actions {
        justify-content: stretch;
    }

        .form-actions .btn {
            width: 100%;
        }
}

/* Bos kalan tam-satir sarmalayicilari (dogrulama ozeti hatasizken) grid'de
   satir + gap acmasin. */
.form-grid > .wide:empty {
    display: none;
}

/* ==========================================================================
   TELE-ARC UZAKTAN IZLEME AKISI
   Eski kompozit gorsel (screens_illustrations_scheme_darktheme_opt1_4_3.png)
   dort ekran goruntusu + dort baloncuk iceriyordu; baloncuk yazilari gorsele
   gomulu, eslesme ince cizgilerle gosteriliyordu. Ekranlar ayri PNG'lere
   kirpildi, baloncuklar HTML'e alindi.

   Butunluk cerceve ile kuruluyor: her gorselin cevresinde kalin mavi bir bant
   var, baloncuk ayni maviden ve bandin alt kenarina oturuyor. Ikisi ayni renk
   oldugu ve ust uste bindigi icin araya hicbir ayirici gecmez -- tek bir mavi
   silueti gibi okunur (madalyonlu cerceve).
   Kaynaktaki baloncuk mavisi (#2b8fd4) beyaz yazi icin 3.2:1 veriyordu;
   marka mavisine cekildi -> 6.6:1.
   ========================================================================== */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 30px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: akisadim;
}

.flow-step {
    --cerceve: 16px;
    --daire: 176px;
    position: relative;
    padding: var(--cerceve);
    /* dairenin cerceveden asagi tasan yarisi icin yer */
    margin-bottom: calc(var(--daire) / 2 + 8px);
    border-radius: 26px;
    background: var(--blue);
    counter-increment: akisadim;
}

    .flow-step img {
        width: 100%;
        height: auto;
        /* cerceve kalinligina gore ic yaricap */
        border-radius: 11px;
        display: block;
    }

.bubble {
    /* Merkezi cercevenin dis alt kenarinda: ust yarisi gorselin uzerine,
       alt yarisi cercevenin altina tasar. */
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: var(--daire);
    height: var(--daire);
    padding: 20px 18px;
    border-radius: 50%;
    /* Cerceveyle AYNI mavi -- ayirici halka yok, birlesir. */
    background: var(--blue);
    color: #fff;
    text-align: center;
}

    .bubble:before {
        content: counter(akisadim);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.6);
    }

    .bubble strong {
        font-size: 1.05rem;
        font-weight: 750;
        letter-spacing: -0.01em;
    }

    .bubble span {
        font-size: 0.78rem;
        line-height: 1.32;
        color: rgba(255, 255, 255, 0.92);
    }

@media (max-width: 760px) {
    .flow-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* Tek kolonda gorsel daraldigi icin daire orantisiz buyuk kaliyor. */
    .flow-step {
        --cerceve: 12px;
        --daire: 152px;
    }

    .bubble {
        padding: 16px 14px;
    }
}

/* --- renk gecisi ---
   Cerceve ve daire ayni gradyani, ayni piksel genisliginde ve ikisi de
   yatayda ORTALANMIS olarak kullanir. Daire cercevenin tam ortasinda
   durdugu icin merkez eksenleri cakisir; gradyan 90 derece (dikeyde sabit)
   oldugundan dairenin aldigi dilim cercevenin o noktadaki rengiyle birebir
   ayni olur -- binisme yerinde dikis gorunmez.
   Beyaz yazi dairenin denk geldigi orta dilimde 5.8:1 (AA). */
.flow-step,
.bubble {
    background-image: linear-gradient(90deg, #062c50 0%, #0d5ea8 45%, #1a7cc7 100%);
    /* Rampa tek bir kartin degil, dort kartin tamamina yayilir: her kart
       --kaydir kadar kaydirilmis bir pencere gosterir, boylece 1. karttan
       4. karte dogru butun set icinde bir ton gecisi olusur (altigen
       petegindeki mantik). */
    background-size: 1400px 100%;
    background-position: calc(50% + var(--kaydir)) center;
    background-repeat: no-repeat;
    /* gradyanin disina tasan durumlar icin taban renk */
    background-color: var(--blue);
}

.flow-step {
    --kaydir: 0px;
}

    .flow-step:nth-child(1) {
        --kaydir: 360px;   /* koyu uc */
    }

    .flow-step:nth-child(2) {
        --kaydir: 120px;
    }

    .flow-step:nth-child(3) {
        --kaydir: -120px;
    }

    .flow-step:nth-child(4) {
        --kaydir: -360px;  /* acik uc */
    }

/* --- sirayla donen vurgu ---
   .is-active JS ile 1->2->3->4 dolasir; hover ayni gorunumu verir ve
   dongu o kartta devam eder (durmaz). Kontrasti bozmamak icin renk
   degistirilmiyor, sadece yukselti/halka/olcek. */
.flow-step {
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.bubble {
    transition: transform 0.45s ease;
}

.flow-step.is-active,
.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 4px rgba(26, 124, 199, 0.26), 0 24px 52px rgba(16, 32, 51, 0.18);
}

    .flow-step.is-active .bubble,
    .flow-step:hover .bubble {
        transform: translate(-50%, 50%) scale(1.07);
    }

@media (prefers-reduced-motion: reduce) {
    .flow-step,
    .bubble {
        transition: none;
    }
}