﻿/* --- KAYAN BANT --- */
:root {
    --brand: #ff7a00; /* turuncu */
    --ticker-h: 48px; /* yükseklik */
    --ticker-speed: 30s; /* hız */
}

.ticker-band {
    width: 100%;
    background: var(--brand);
    color: #fff;
    overflow: hidden;
}

.ticker {
    position: relative;
    height: var(--ticker-h);
    display: flex;
    align-items: center;
}

.ticker__track {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    padding-left: 24px;
    font-weight: 800;
    letter-spacing: .2px;
    animation: ticker-scroll var(--ticker-speed) linear infinite;
}

    .ticker__track span {
        font-size: 16px;
    }

    .ticker__track i {
        font-style: normal;
        opacity: .9;
    }

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Hover’da durdurmak istersen: */
.ticker-band:hover .ticker__track {
    animation-play-state: paused;
}

/* Erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}
/* Sabit header yüksekliği (kendine göre ayarla) */
:root {
    --nav-h: 72px; /* mobile */
}

@media (min-width: 992px) {
    :root {
        --nav-h: 86px;
    }
    /* desktop */
}

/* Hero'yu header kadar aşağı çek */
.calc-hero {
    padding-top: calc(var(--nav-h) + 16px) !important;
    min-height: 320px; /* zaten varsa bırak */
}

    .calc-hero .hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.55);
    }

    .calc-hero .container {
        position: relative;
        z-index: 2;
    }

/* Anchor'lara scroll’da da gizlenmesin */
html {
    scroll-padding-top: var(--nav-h);
}

:root {
    --brand: #ff7a00; /* TURUNCU */
    --brand-ink: #ffffff;
    --line: rgba(0,0,0,.18);
}

/* HERO */
.about-hero {
    min-height: 320px
}

    .about-hero .hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.55)
    }

    .about-hero .container {
        position: relative;
        z-index: 2
    }

/* Stat kutuları */
.about-stat {
    border-left: 3px solid var(--brand);
    padding-left: 14px
}

/* TURUNCU BANT */
.about-band {
    background: var(--brand)
}

    .about-band .band-copy {
        background: var(--brand);
        color: var(--brand-ink)
    }

    .about-band .band-image {
        position: relative;
        min-height: 280px
    }

        .about-band .band-image img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

/* Akordeon stil: ince çizgi + + işareti */
.about-accordion .accordion-item {
    border-bottom: 1px solid var(--line)
}

.about-accordion .accordion-button {
    background: #fff;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-weight: 600;
    letter-spacing: .2px;
}

    .about-accordion .accordion-button .ord {
        font-size: .85rem;
        font-weight: 700;
        margin-right: 14px;
        color: #7c7c7c;
        width: 34px;
        display: inline-block
    }

    .about-accordion .accordion-button::after {
        background: none;
        transform: none !important;
        content: "+";
        font-weight: 700;
        font-size: 1.25rem;
        color: #000;
        margin-left: auto
    }

    .about-accordion .accordion-button:not(.collapsed)::after {
        content: "–"
    }

.about-accordion .accordion-body {
    padding: 12px 0 18px 48px;
    color: #555
}

/* CTA (turuncu zeminle uyum) */
.about-cta {
    background: var(--brand)
}

    .about-cta .btn {
        border-radius: 10px
    }

/* Header ile sıkışmayı önle (fixed-top nav varsa) */
body .about-hero {
    padding-top: 72px
}
/* yanal görsel */
.svc-sideimg {
    position: relative;
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f4;
}

    .svc-sideimg img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* büyük ekranlarda biraz daha yüksek */
@media (min-width: 992px) {
    .svc-sideimg {
        min-height: 560px;
    }
}
/* Sol görsel kutusu */
.split-photo {
    position: relative;
    min-height: 520px;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f4f7;
}

    .split-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (max-width: 991.98px) {
    .split-photo {
        min-height: 360px;
    }
}

/* 2. sayfadaki akordeon stili */
:root {
    --brand: #ff7a00;
    --line: #e6eaef;
}

.svc-accordion .accordion-item {
    border: 0;
    margin-bottom: 14px;
}

.svc-accordion .accordion-button {
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 48px 18px 22px;
    font-weight: 800;
    color: #253040;
    box-shadow: none;
}

    .svc-accordion .accordion-button.collapsed {
        background: #fff;
    }

    .svc-accordion .accordion-button .ord {
        width: 36px;
        display: inline-block;
        margin-right: 14px;
        font-weight: 800;
        color: #76829a;
    }

    .svc-accordion .accordion-button::after {
        background: none;
        content: "+";
        font-weight: 900;
        font-size: 20px;
        color: #0b0b0b;
    }

    .svc-accordion .accordion-button:not(.collapsed)::after {
        content: "–";
    }

.svc-accordion .accordion-body {
    border: 1px solid var(--line);
    border-top: 0;
    margin-top: -10px;
    border-radius: 0 0 12px 12px;
    padding: 14px 22px;
    color: #4a5568;
    background: #fff;
}
/* CTA arka planlı */
:root {
    --brand: #ff7a00;
}

.svc-cta {
    position: relative;
    color: #fff;
    border-top: 4px solid var(--brand);
    isolation: isolate; /* üstteki içerik için güvenli z-index */
}

    /* Arka plan + karartma (sadece CSS ile) */
    .svc-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.55)), /* okunurluk için overlay */
        url('/img/service/sun-setting-silhouette-electricity-pylons.jpg') center/cover no-repeat;
        z-index: -1; /* içerik arkada kalsın */
    }

    /* İçeriği üstte tut */
    .svc-cta > .container {
        position: relative;
        z-index: 1;
    }
/* Geliştiren - marka görseli */
.credits .brand-dev img {
    height: 65px; /* gerekirse 20-28 arasında oynat */
    width: auto;
    display: block;
    opacity: .95;
    transition: .2s ease;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.25));
}

.credits .brand-dev:hover img {
    opacity: 1;
    transform: translateY(-1px);
}
/* Parallax ve büyük görsellerde jank azaltma */
.parallax-soft {
    position: relative;
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)), url('/img/vesa/961.jpg') center / cover no-repeat;
    /* masaüstünde bile fixed kullanmıyoruz (çok pahalı) */
    background-attachment: scroll !important;
    will-change: transform; /* GPU hazırlığı */
}

/* Mobilde kesinlikle fixed kullanma */
@media (max-width: 991.98px) {
    .parallax, .parallax-soft {
        background-attachment: scroll !important;
    }
}

/* Scroll sırasında paint’i azalt */
.proj-card, .home-icons {
    will-change: transform;
}
/* Turuncu Hesaplamalar butonu */
.navbar .btn-hesap {
    background-color: #ff7f27 !important; /* turuncu */
    color: #fff !important; /* yazı beyaz */
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    border: 0;
    line-height: 1.2;
    display: inline-block;
    text-decoration: none !important;
    transition: background-color .2s ease, transform .1s ease;
}

    .navbar .btn-hesap:hover,
    .navbar .btn-hesap:focus {
        background-color: #e86f1f !important; /* hover turuncu */
        color: #fff !important;
        transform: translateY(-1px);
    }

/* Dar ekranda satır aralığı düzgün olsun */
@media (max-width: 991.98px) {
    .navbar .btn-hesap {
        width: 100%;
        text-align: center;
    }
}
:root {
    --brand: #ff7f27;
}

#catBar .btn {
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Seçili (btn-primary) ==> turuncu zemin, beyaz yazı */
#catBar .btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

    #catBar .btn-primary:hover,
    #catBar .btn-primary:focus {
        background-color: #e86f1f !important; /* hover turuncu */
        border-color: #e86f1f !important;
        color: #fff !important;
    }

/* Seçili olmayan (btn-outline-primary) ==> turuncu kenar+metin */
#catBar .btn-outline-primary {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background-color: #fff !important;
}

    #catBar .btn-outline-primary:hover,
    #catBar .btn-outline-primary:focus {
        background-color: var(--brand) !important; /* hover turuncu */
        border-color: var(--brand) !important;
        color: #fff !important; /* yazı beyaz */
    }

.slider-img {
    height: 500px; /* Banner yüksekliği */
    object-fit: cover; /* Resim kırpılır ama kaymaz */
}

@media (max-width: 768px) {
    .slider-img {
        height: 250px; /* Mobilde daha küçük */
    }
}

