body {
    font-family: "Work Sans", sans-serif;
    font-family: "Jost", sans-serif;
    font-family: "Open Sans", sans-serif;
    font-family: 'Barlow Condensed',sans-serif;
    background: #f5f7fa;
}

p {
    /*font-size:18px;*/
}

:root {
    --renk1: #f24b0d;
    --renk1-light: #fff4f0;
    --renk2: #014aa6;
    --renk3: #042561;
    --back: #b3b5b8;
    --kart-border: #dde2ed;
    --kart-bg: #ffffff;
    --kart-bg-hover: #f7f9fc;
    --text-mid: #4b5563;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --bg-soft: #f9fafb;
}

.baslik {
    margin-bottom: 15px;
}

.nav1:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,86,30,.4) 30%, rgba(26,58,110,.5) 70%, transparent );
}

.baslik span:after {
    position: absolute;
    left: 0px;
    bottom: -3px;
    height: 8px;
    width: 8px;
    content: "";
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(236, 37, 38);
    border-image: initial;
    border-radius: 50%;
}

.baslik span:before {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 1px;
    width: 75%;
    content: "";
    background: rgb(236, 37, 38);
}

.baslik h1 {
    /* /* font-family: "Marcellus", serif;*/
    font-weight: 400;
    font-size: 34px;
    line-height: 45px;
    margin-bottom: 15px;
    width:75%;
}

.nav1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-family: "Work Sans", sans-serif;
    /*border-bottom: 1px solid #f24b0d57;*/
    position: relative;
}

.logo {
    flex: 1;
}

    .logo img {
        max-height: 75px;
    }

.nav2 {
}

    .nav2 ul {
        list-style: none;
        /*display:flex;*/
        gap: 5px;
    }

    .nav2 li {
        padding: 0 10px;
        font-weight: 500;
        display: inline-block;
        /*transition: transform 0.4s;*/
        /*font-size:18px;*/
    }
        .nav2 li:hover {
            transform: translate(0,-5px) !important;
            transition: transform 0.4s;
        }
    .nav2 a {
        color: #fff !important;
        background: rgba(255,255,255,.07);
        padding: 9px 16px;
        border-radius: 6px;
        position: relative;
        display: inline-block;
    }
        .nav2 a::after {
            content: "";
            position: absolute;
            bottom: 4px;
            left: 16px;
            right: 16px;
            height: 2px;
            background: var(--renk1);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
            border-top:none;
        }

        .nav2 a:hover::after,
        .nav2 a.active::after {
            transform: scaleX(1);
        }

.nav3 {
    flex: 1;
    text-align: end;
}

    .nav3 a {
        background: linear-gradient(135deg, var(--renk1) 0%, #c73215 100%);
        color: #fff !important;
        font-weight: 500;
        /* font-size: 18px; */
        border-radius: 7px;
        padding: 9px 22px;
        box-shadow: 0 4px 18px rgba(232, 86, 30, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
        display: inline-block;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }

.nav4 {
    /*background: #fff;*/


    box-shadow: 0 -5px 15px rgba(8, 106, 216, 0.2901960784);
}

.nav5 {
    position: fixed;
    top: 0;
    z-index: 444;
    width: 100%;
    transition: transform .4s ease;
}

.nav6 {
    padding: 7px 0;
    background: rgba(8, 16, 40, .65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    max-height: 60px; /* nav6'nın gerçek yüksekliği */
    overflow: hidden;
    transition: opacity .5s ease, max-height .5s ease, padding .5s ease;
}

.navil1 {
    display: flex;
    gap: 20px;
}

    .navil1 a {
        color: rgb(255 255 255 / 85%) !important;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: .78rem;
        font-weight: 500;
        letter-spacing: .03em;
        transition: color .2s;
    }

    .navil1 i {
        color: var(--renk1);
        font-size: .8rem;
    }
.navil2 {
    display: flex;
    align-items: center;
}
    .navil2 a {
        color: rgb(255 255 255 / 85%) !important;
        font-size: .85rem;
        margin-left: 6px;
        transition: color .2s;
    }

.navil3 {
    display: flex;
    justify-content: space-between;
}

.nav6_fixed {
    opacity: 0;
    max-height: 0;
    padding:0;
}

.nav4_fixed {
    background: var(--renk3);
    backdrop-filter: blur(8px);

}
.navil-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.navil-lang-btn {
    color: rgba(255, 255, 255, .4) !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 3px 6px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: color .2s, background .2s;
}

    .navil-lang-btn:hover {
        color: rgba(255, 255, 255, .85) !important;
        background: rgba(255, 255, 255, .08);
    }

    .navil-lang-btn.active {
        color: var(--renk1) !important;
        background: rgba(242, 75, 13, .12);
    }
.hdr1 {
}

    .hdr1 a {
        color: #000 !important
    }
    .hdr1 li{
        width:100%;
    }
.navhizmet1{
    width:100%;
}
/* ── HAMBURGER BUTONU ── */
.mobil-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 999;
}

    .mobil-menu-btn span {
        display: block;
        width: 26px;
        height: 2.5px;
        background: #fff;
        border-radius: 3px;
        transition: transform .3s ease, opacity .3s ease;
    }

    .mobil-menu-btn.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .mobil-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobil-menu-btn.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }
.sld1 {
    height: 100vh;
}

.sld2 {
    height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    background: rgb(0 0 0 / 29%);
}

    .sld2 h1 {
        font-size: 75px;
        /* font-family: "Marcellus", serif;*/
        font-weight: 700;
    }

    .sld2 p {
        font-size: 21px;
        font-weight: 500;
    }

.sld4 {
    position: relative;
    overflow:hidden;
}

.customPreviousBtn {
    position: absolute;
    z-index: 44;
    color: #fff;
    top: 50%;
    left: 25px;
    transform: translate(-50%, -50%);
}

.customNextBtn {
    position: absolute;
    z-index: 44;
    color: #fff;
    top: 50%;
    right: 25px;
    transform: translate(50%, -50%);
}

.hak1 {
    padding: 140px 0;
    position: relative;
    /*background: #f8f9fb;*/
    overflow: hidden;
}

.hak4 {
    color: var(--renk1);
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 46px;
    position: relative;
    /*padding-left: 30px;*/
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
}

    .hak4:after {
        position: absolute;
        left: 0px;
        bottom: -3px;
        height: 8px;
        width: 8px;
        content: "";
        background: rgb(255, 255, 255);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(236, 37, 38);
        border-image: initial;
        border-radius: 50%;
    }

    .hak4:before {
        position: absolute;
        left: 0px;
        bottom: 0px;
        height: 1px;
        width: 75%;
        content: "";
        background: rgb(236, 37, 38);
    }

.hak2 h1 {
    /* font-family: "Marcellus", serif;*/
    font-size: 41px;
    line-height: 64px;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
}

.hak2 a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    color: #fff !important;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 16px 36px;
    background: linear-gradient(135deg, #8b0000, var(--renk1));
    transition: 0.35s;
    box-shadow: 0 10px 30px rgba(236, 37, 38, 0.28);
    text-decoration: none;
}

    .hak2 a:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(236,37,38,0.35);
    }

.hak2 .title-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

    .hak2 .title-divider span {
        display: block;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--renk1), var(--renk3));
    }

        .hak2 .title-divider span:first-child {
            width: 40px;
        }

        .hak2 .title-divider span:last-child {
            width: 12px;
            background: rgba(236, 37, 38, 0.3);
        }

.animated-circle.left {
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 30% 30%, rgba(236,37,38,0.25), rgba(236,37,38,0.08) 60%, transparent 70%);
    animation: circle 25s linear infinite;
    /*filter: blur(2px);*/
    -webkit-animation: circle 5s linear infinite;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    top: 27%;
    left: -13%;
}

    .animated-circle.left::after {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        background-color: #fff;
    }

@keyframes circle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.deco-ring {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1.5px dashed rgba(236, 37, 38, 0.18);
    bottom: 0px;
    left: 5%;
    z-index: 0;
    animation: spin 40s linear infinite;
}

    .deco-ring::after {
        content: "";
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 1px solid rgba(236, 37, 38, 0.10);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.hak3 {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* İkinci dekoratif halka */
.img-inner-ring {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    border: 1px solid rgba(236,37,38,0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* Ana görsel */
.hak3 .main-img {
    width: 500px;
    height: 500px;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(236,37,38,0.08);
    position: relative;
    z-index: 3;
    transition: transform 0.4s;
}

.hak3:hover .main-img {
    transform: scale(1.02);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.marquee-section {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 392px;
}

    .marquee-section .section-inner {
        white-space: nowrap;
        transform: rotate(-4deg) scale(1.1);
        -webkit-transform: rotate(-4deg) scale(1.1);
        -moz-transform: rotate(-4deg) scale(1.1);
        -ms-transform: rotate(-4deg) scale(1.1);
        -o-transform: rotate(-4deg) scale(1.1);
    }

        .marquee-section .section-inner .top-inner {
            padding: 1em 0;
            background-color: #111;
            color: #fff;
        }

            .marquee-section .section-inner .top-inner .marquee {
                padding: 0;
                margin: 0;
                will-change: transform;
                display: flex;
                width: max-content;
                animation: marquee 40s linear infinite;
                align-items: center;
                padding: 5px 0;
            }

                .marquee-section .section-inner .top-inner .marquee li {
                    list-style: none;
                    flex: 1 0 5%;
                    position: relative;
                    text-align: center;
                    margin: 0 10px;
                }

                    .marquee-section .section-inner .top-inner .marquee li span {
                        color: #fff;
                        /* font-family: "Marcellus", serif;*/
                        font-weight: 400;
                        font-size: 19px;
                        line-height: 65px;
                        text-transform: uppercase;
                    }

        .marquee-section .section-inner .bottom-inner .marquee li {
            list-style: none;
            flex: 1 0 5%;
            position: relative;
            text-align: center;
            margin: 0 10px;
        }

            .marquee-section .section-inner .bottom-inner .marquee li span {
                color: #fff;
                /* font-family: "Marcellus", serif;*/
                font-weight: 400;
                font-size: 19px;
                line-height: 65px;
                text-transform: uppercase;
            }

        .marquee-section .section-inner .bottom-inner {
            padding: 1em 0;
            /*display: inline-block;*/
            background-color: var(--renk1);
        }

            .marquee-section .section-inner .bottom-inner .marquee {
                padding: 0;
                margin: 0;
                will-change: transform;
                width: max-content;
                animation: marqueeReverse 40s linear infinite;
                align-items: center;
                display: flex;
                padding: 5px 0;
            }

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marqueeReverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(00%);
    }
}

.baslik span {
    color: var(--renk1);
    /*font-family: "Work Sans", sans-serif;*/
    font-weight: 500;
    font-size: 18px;
    line-height: 46px;
    position: relative;
    /*padding-left: 30px;*/
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
}
/* ── SECTION ── */
/* Ana Kapsayıcı */
.sek1 {
    padding: 100px 0 110px;
    position: relative;
    /*background-color: #F8FAFC;*/
    /*font-family: "Barlow", sans-serif;*/
}

    .sek1::before {
        content: '';
        position: absolute;
        top: -40px;
        right: 120px;
        width: 220px;
        height: 220px;
        border: 40px solid rgba(234, 88, 12, 0.05);
        border-radius: 50%;
        pointer-events: none;
        animation: floatUpDown 4s ease-in-out infinite;
    }

@keyframes floatUpDown {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}
/* Başlık Stilleri */
.sek-kategori {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #EA580C; /* Kurumsal turuncu vurgu */
    /*text-transform: uppercase;*/
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.sek-ana-baslik {
    font-size: 36px;
    /*font-weight: 800;*/
    color: #0B132B; /* Derin lacivert */
    line-height: 1.2;
}

.sek-ic-baslik {
    font-size: 24px!important;
    /*font-weight: 800;*/
    color: #0B132B; /* Derin lacivert */
    line-height: 1.2!important;
}

.sek-ic-kategori {
    display: inline-block;
    font-size: 16px!important;
    font-weight: 700;
    color: #EA580C; /* Kurumsal turuncu vurgu */
    /*text-transform: uppercase;*/
    letter-spacing: 2px;
    margin-bottom: 12px;
}
/* ── KART TASARIMI (CARD) - Orijinaldeki gibi keskin ve net ── */
.sek4 {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E2E8F0; /* Çok ince, temiz bir çerçeve */
    border-top: 3px solid #0B132B; /* Orijinalindeki o güçlü üst çizgi */
    border-radius: 4px; /* Çok hafif bir yumuşatma, aşırı oval değil */
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(11, 19, 43, 0.02); /* Dinlenme anında neredeyse yok gibi bir gölge */
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

    /* Hover (Üzerine Gelme) Durumu - Sadece burada canlanıyor */
    .sek4:hover {
        transform: translateY(-6px);
        border-top-color: #EA580C; /* Üst çizgi vurgu rengine dönüyor */
        box-shadow: 0 16px 32px rgba(11, 19, 43, 0.08); /* Kaliteli bir derinlik */
    }

/* ── ZARİF NUMARA (Filigran değil, şık bir detay) ── */
.sek-num {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 32px;
    font-weight: 800;
    color: #F1F5F9; /* Çok hafif, göze batmayan gri */
    line-height: 1;
    transition: color 0.3s ease;
    user-select: none;
}

.sek4:hover .sek-num {
    color: #E2E8F0;
}

/* ── İKON ALANI ── */
.sek-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

    .sek-icon i {
        font-size: 20px;
        color: #0B132B;
        transition: all 0.3s ease;
    }

/* Karta hover olunca ikonun değişimi */
.sek4:hover .sek-icon {
    background: #0B132B;
    border-color: #0B132B;
}

    .sek4:hover .sek-icon i {
        color: #FFFFFF;
    }

/* ── KART BAŞLIĞI ── */
.sek4 h2 {
    font-size: 19px;
    font-weight: 700;
    color: #0B132B;
    margin-bottom: 12px;
}

/* ── AYIRICI ÇİZGİ (DIVIDER) ── */
.sek-divider {
    width: 32px;
    height: 2px;
    background: #0B132B;
    margin-bottom: 16px;
    transition: width 0.3s ease, background 0.3s ease;
}

.sek4:hover .sek-divider {
    width: 48px;
    background: #EA580C;
}

/* ── AÇIKLAMA METNİ ── */
.sek4 p {
    font-size: 16px;
    line-height: 1.6;
    color: #64748B;
    margin-bottom: 30px;
    flex-grow: 1;
}

/* ── KEŞFET BUTONU ── */
.sek-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0B132B;
    text-decoration: none;
    margin-top: auto;
    transition: color 0.3s ease;
}

    .sek-arrow i {
        font-size: 16px;
        transition: transform 0.3s ease;
    }

.sek4:hover .sek-arrow {
    color: #EA580C;
}

    .sek4:hover .sek-arrow i {
        transform: translateX(4px);
    }
/*
.trend3-wrapper {
    border-radius: 6px;
    overflow: hidden;
}

.trend3-item {
    border-bottom: 1px solid #eee;
    transition: all .3s ease;
    cursor: pointer;
}

    .trend3-item:last-child {
        border-bottom: none;
    }

    .trend3-item:hover {
        background: #f8f9fa;
    }

    .trend3-item.active {
        background: var(--renk1);
    }

.trend3-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
}

.trend3-item.active .trend3-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}*/

.urun1 {
    position: relative;
    z-index: 1;
    background: #f5f5f5;
    padding-bottom: 90px;
    padding-top: 120px;
    min-height: 800px;
}

.urun2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 43%;
    min-height: 800px;
    height: 100%;
}

    .urun2 img {
        max-height: 800px;
        object-fit: cover;
    }

.urun3 {
    position: absolute;
    right: 0;
    top: 0;
}

.urun4 {
    position: absolute;
    right: 0;
    top: 0;
    width: 57%;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 50px 40px 50px 60px;
    overflow: hidden;
}

.product-card {
    transition: all .3s ease;
    border-radius: 10px;
}

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    }

    .product-card .badge {
        font-size: 11px;
        letter-spacing: .5px;
    }
/*
.trend1 {
    padding: 50px 0;
}*/

/* ---- YENİ: URUN TREND İSTATİSTİK BLOĞU ---- */
/* Ana Kutu - Daha Tok ve Profesyonel */
.urun-stats-block {
    position: relative;
    border-radius: 16px; /* Daha kurumsal, aşırı oval değil */
    padding: 32px;
    margin-top: 30px;
    background: #0B132B; /* Derin ve oturaklı lacivert/antrasit */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .urun-stats-block:hover {
        transform: translateY(-4px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.1);
    }

/* Üst Başlık Alanı */
.urun-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.urun-stats-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #94A3B8;
}

/* Canlı Veri (Pulsing Animasyonlu) */
.urun-stats-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #10B981; /* Güven veren yeşil */
    background: rgba(16, 185, 129, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #10B981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Satır İçerikleri (Hizalamalar düzeltildi) */
.urun-stat-row {
    margin-bottom: 24px;
}

    .urun-stat-row:last-child {
        margin-bottom: 0;
    }

.urun-stat-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.urun-stat-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Kategori Belirteci (Dikey Çizgi - Nokta yerine daha modern) */
.urun-stat-indicator {
    width: 4px;
    height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Metin Hiyerarşisi */
.urun-stat-label-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-subtitle {
    font-size: 11px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-title {
    font-size: 16px;
    color: #F8FAFC;
    font-weight: 600;
}

/* Değerler (Sayılar) */
.urun-stat-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.count-val {
    display: inline-block;
    font-variant-numeric: tabular-nums; /* Sayıların genişliğini eşitler, titremeyi önler */
}

/* Progress Bar - Daha Temiz ve Belirgin */
.urun-stat-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.urun-stat-bar-fill {
    height: 100%;
    border-radius: 10px;
    width: 0; /* JS tarafından doldurulacak */
    position: relative;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1); /* Daha premium bir kayma animasyonu */
}

    /* Shimmer Efekti (İlerleme çubuğunda parlama) */
    .urun-stat-bar-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shimmer 2.5s infinite;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Renk Temaları - Kurumsal Tonlara Çekildi */
.stat-color-1 {
    color: #60A5FA;
}

.stat-bg-1 {
    background: linear-gradient(90deg, #2563EB, #60A5FA);
}

.stat-color-2 {
    color: #FB923C;
}

.stat-bg-2 {
    background: linear-gradient(90deg, #EA580C, #FB923C);
}

.stat-color-3 {
    color: #34D399;
}

.stat-bg-3 {
    background: linear-gradient(90deg, #059669, #34D399);
}
.ftust1 {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(108deg,#04112b 0%,#0d2a5e 55%,#183f7c 100%);
}

    .ftust1::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.028'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .ftust1::after {
        content: '';
        position: absolute;
        right: -100px;
        top: 50%;
        transform: translateY(-50%);
        width: 480px;
        height: 480px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(232,80,10,.2) 0%,transparent 65%);
        pointer-events: none;
    }

    .ftust1 .inner {
        position: relative;
        z-index: 2;
        /*max-width: 1200px;*/
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
.ftust2 {
    color: #fff;
}

    .ftust2 h2 {
        font-size: 48px;
        font-style: normal;
        font-weight: 600;
        line-height: 58px;
        color: #fff;
        margin-bottom: 15px;
        /* font-family: "Marcellus", serif;*/
    }

.ftust3 {
}

    .ftust3 a {
        display: inline-block;
        padding: 15px 38px;
        background: var(--renk1);
        color: #fff !important;
        /*font-family: 'Barlow Condensed', sans-serif;*/
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-decoration: none;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
        transition: background .25s, transform .2s
    }

.ft1 {
    padding: 50px 0;
}

.ft2 {
}

    .ft2 p {
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        margin: 25px 0 36px;
        color: rgba(255,255,255,.52);
    }

    .ft2 ul {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        list-style: none;
    }

    .ft2 a {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 4px;
        color: rgba(255, 255, 255, .6) !important;
        font-size: 15px;
        text-decoration: none;
        background: rgba(255, 255, 255, .04);
        transition: all .22s;
    }

    .ft2 i {
        color: #fff;
    }

.ft3 ul, .ft4 ul, .ft5 ul {
    list-style: none;
}

.ft3 a > svg, .ft4 a > svg{
    opacity: .75;
    transition: opacity .2s;
}

.ft3 a, .ft4 a  {
    color: rgba(255,255,255,.52) !important;
    font-weight: 400;
    font-size: 17px;
    gap: 10px;
    line-height: 36px;
    transition: color .2s, gap .2s;
    display: flex;
    align-items: center;
}

    .ft3 a:hover, .ft4 a:hover {
        color: #fff !important;
        gap: 14px;
    }

        .ft3 a:hover > svg, .ft4 a:hover > svg  {
            opacity: 1;
        }

.ft5 a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .2s;
    color: rgba(255,255,255,.52) !important;
}
.ft5 i {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 80, 10, .12);
    border-radius: 4px;
    color: var(--renk1) !important;
    font-size: 13px;
    transition: background .22s;
}
.ft5 a:hover {
    color: #fff!important;
}
    .ft5 a:hover i {
        background: rgba(232, 80, 10, .28);
    }
.ft3 b, .ft4 b, .ft5 b {
    /* font-family: "Marcellus", serif;*/
    font-weight: 400;
    font-size: 17px;
    line-height: 34px;
    margin-bottom: 20px;
    display: block;
    color: #c7c7c7;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ft6 {
    padding: 15px 0;
    background: rgba(0,0,0,.22);
    border-top: 1px solid rgba(255,255,255,.08);
}

.ft7 {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.52);
    font-size: 14px;
}

    .ft7 a {
        color: rgba(255,255,255,.52) !important
    }

#owl-carouselURUN > .owl-stage-outer > .owl-stage {
    padding-left: 0 !important;
}

.urunbtn2 {
    margin-bottom: 20px;
}

footer {
    background: linear-gradient(155deg,#061428 0%,#0b1f4a 60%,#0e2555 100%);
    position: relative;
    overflow: hidden;
}
    footer:after {
        content: '';
        position: absolute;
        bottom: 50px;
        right: -90px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .04);
        box-shadow: 0 0 0 60px rgba(255, 255, 255, .018), 0 0 0 120px rgba(255, 255, 255, .01);
        pointer-events: none;
    }

.blog1 {
    padding: 100px 0;
}

.blog2 {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin-bottom: 50px;
}

    .blog2 a {
        box-shadow: 0 8px 25px rgba(0,0,0,0.04);
        border-radius: 12px;
        padding: 20px;
        background: #fff;
        display: block;
        color:#333;
    }

    .blog2:hover {
        transform: translateY(-10px);
    }

.blog3 {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 12px;
}

    .blog3 img {
        transition: transform 0.6s ease;
        border-radius: 12px;
        height: 250px;
        object-fit: cover;
    }

    .blog3:after {
        background: linear-gradient(to right, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
    }

.blog4 {
    padding: 5px 5px 10px 5px;
}

    .blog4 span {
        font-weight: 500;
        /*font-size: 14px;*/
        line-height: 39px;
        font-style: italic;
        margin-bottom: 12px;
        /*font-size: 13px;*/
        color: #888;
        letter-spacing: 0.5px;
    }

    .blog4 h1 {
        /* font-family: "Marcellus", serif;*/
        font-weight: 400;
        font-size: 24px;
        line-height: 30px;
        padding-bottom: 22px;
        margin-bottom: 27px;
        position: relative;
        transition: color 0.3s ease;
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 22px;
    }

        .blog4 h1:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background-color: rgba(95, 95, 95, 0.67);
            background-color: rgba(0, 0, 0, 0.1);
        }

        .blog4 h1:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 0;
            background-color: #d90a2c;
            transition: opacity 0.3s ease, width 0.3s ease;
            -webkit-transition: opacity 0.3s ease, width 0.3s ease;
            -moz-transition: opacity 0.3s ease, width 0.3s ease;
            -ms-transition: opacity 0.3s ease, width 0.3s ease;
            -o-transition: opacity 0.3s ease, width 0.3s ease;
        }

.blog5 {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    transition: transform 0.3s ease;
    font-size: 15px;
    color: #444;
}

.blog3:after {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 400ms linear;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    -o-transition: all 400ms linear;
}

.blog2 a:hover .blog4 h1 {
    color: var(--renk1);
}

.blog2 a:hover .blog3:after {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 400ms linear;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    -o-transition: all 400ms linear;
}

.blog2 a:hover .blog3 img {
    transform: scale(1.1);
    transition: all 400ms ease;
}

.blog2 a:hover .blog4 h1:before {
    width: 100%;
}

.blog5 i {
    background: #a7a7a7;
    width: 22px;
    border-radius: 50%;
    font-size: 12px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    background: #eaeaea;
}

.blog2 a:hover .blog5 i {
    background: var(--renk1);
    color: #fff;
    transform: scale(1.1);
}

.blog2 a:hover .blog5 {
    transform: translateX(5px);
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}
.ic1 {
    position: relative;
    min-height: 400px; 
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}
    .ic1:before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(90deg, #0f152ae0 30%, rgba(31, 33, 45, 0) 100%);
        z-index: -1;
    }
.ic2 {
    padding-top: 150px;
}
    .ic2 h1 {
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 58px;
        color: #fff;
        margin-bottom: 10px;
    }
    .ic2 ol {
        padding-left: 0;
        margin-bottom: 0;
        display: flex;  
    }
    .ic2 li {
        display: inline-block;
        padding: 0px 15px;
        color: var(--renk1);
        position: relative;
        font-size: 16px;
    }
    .ic2 a {
        color: #fff;
        font-size: 16px;
        transition: all 0.3s;
    }
    .ic2 a:hover{
        color:var(--renk1);
    }
    .ic2 i {
        color: #707070;
        margin-right: 5px;
    }
    .ic3:after {
        content: "/";
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
    }
.whatsapp-button {
    background: #27ae60;
    font-size: 35px;
    line-height: 38.25px;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    display: block;
    position: fixed;
    z-index: 9999;
    margin: 0 auto;
    right: 25px;
    bottom: 25px;
    border-radius: 100%;
    border: solid 5px #27ae60;
    animation: whatsapp-button-animation 4s ease infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.3s ease;
}
    .whatsapp-button.up {
        bottom: 100px;
    }

    .whatsapp-button i {
        color: white;
        margin-top: 2px;
        font-size: 30px;
    }

    .whatsapp-button span {
        display: none;
        bottom: -8px;
        padding: 5px;
        background: #444;
        border-radius: 4px;
        border: 1px solid #444;
        color: #f1f1f1;
        line-height: 22px;
        font-size: 13px;
        font-weight: 500;
        width: 192px;
        left: 70px;
        position: absolute;
        /*font-family: 'Poppins', sans-serif;*/
        transition: all 0.6s ease-in-out;
    }

@keyframes whatsapp-button-animation {
    0% {
        transform: scale(1);
    }

    15% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
    }

    25% {
        box-shadow: 0 0 0 5px rgba(49, 179, 103, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.9);
    }

    25% {
        box-shadow: 0 0 0 11px rgba(39, 174, 96, 0.4), 0 0 0 30px rgba(205, 251, 224, 0.53);
    }
}
.scroll-top-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--renk1);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,0,0,0.20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 9999;
}

    .scroll-top-btn:hover {
        background: #2c5d6d;
        transform: translateY(0) scale(1.08);
    }

    .scroll-top-btn.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }.hakd1 {
    padding:120px 0;
    position:relative;
    background:#f8fafc;
}

.hakd2 h1{
    font-size:42px;
    font-weight:700;
    margin-bottom:20px;
}

.hakd3{
    font-size:16px;
    line-height:1.8;
    color:#555;
}

.hakd4{
    display:inline-block;
    background:rgba(54,114,134,0.08);
    padding:8px 18px;
    border-radius:30px;
    color:var(--renk1);
    font-weight:600;
    margin-bottom:20px;
}

.hakd4 i{
    margin-right:6px;
}

.title-divider{
    display:flex;
    gap:8px;
    margin-bottom:25px;
}
.hakdetay1{
    padding-top:1rem;
}
.title-divider span:first-child {
    width: 60px;
    height: 4px;
    background: var(--renk1);
    border-radius: 4px;
}

.title-divider span:last-child{
    width:30px;
    height:4px;
    background:#ddd;
    border-radius:4px;
}

.hakd5{
    text-align:center;
}

.img-box{
    position:relative;
    width:100%;
    max-width:420px;
    margin:auto;
}

.main-img{
    width:100%;
    border-radius:20px;
    position:relative;
    z-index:2;
}
.hak-resim {
    width: 420px;
    float: right;
    margin-left: 40px;
    margin-bottom: 20px;
    border-radius: 20px;
    width: 500px;
    height: 500px;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(236, 37, 38, 0.08);
    position: relative;
    z-index: 3;
    transition: transform 0.4s;
}
    .hak-resim:hover {
        transform: scale(1.02);
    }

.hd-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 22px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, transform .3s, box-shadow .3s;
}

    .hd-card:hover {
        border-color: rgba(242,75,13,.4);
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(242,75,13,.08), 0 4px 10px rgba(0,0,0,.05);
    }

    .hd-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--renk1), rgba(242,75,13,.2));
        opacity: 0;
        transition: opacity .3s;
    }

    .hd-card:hover::after {
        opacity: 1;
    }

.hd-card-icon {
    width: 46px;
    height: 46px;
    background: var(--renk1-light);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 14px;
    color: var(--renk1);
}

.hd-card-title {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--renk3);
}

.hd-card-text {
    font-size: .85rem;
    color: var(--text-mid);
    line-height: 1.65;
    margin: 0;
}

.hd-card-num {
    position: absolute;
    top: 22px;
    right: 14px;
    font-size: 2rem;
    font-weight: 800;
    color: rgb(4 37 97 / 18%);
    line-height: 1;
    /*font-family: "Playfair Display", serif;*/
    pointer-events: none;
}

.hd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 190px;
    gap: 8px;
}

/* İlk resim: sol tarafta 1 sütun, 2 satır (dikey büyük) */
.hd-gallery-item.tall {
    grid-row: span 2;
    height: 100%;
}

/* Her 7. resim: 2 sütun genişliğinde (yatay panoramik) */
.hd-gallery-item.wide {
    grid-column: span 2;
    height: 100%;
}

/* ---- Base Item ---- */
.hd-gallery-item {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border);
    display: block;
    height: 100%;
}

    .hd-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
        display: block;
    }

    .hd-gallery-item:hover img {
        transform: scale(1.06);
    }

/* ---- Overlay ---- */
.hd-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 37, 97, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}

.hd-gallery-item:hover .hd-gallery-overlay {
    opacity: 1;
}

.hd-gallery-overlay i {
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.hd-acc-item {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}

    .hd-acc-item.open,
    .hd-acc-item:has(.accordion-button:not(.collapsed)) {
        border-color: rgba(242,75,13,.35) !important;
        box-shadow: 0 4px 16px rgba(242,75,13,.07) !important;
        background: #fff !important;
    }

.hd-acc .accordion-button {
    background: transparent !important;
    color: #111827 !important;
    font-size: .93rem;
    font-weight: 600;
    font-family: "Work Sans", sans-serif;
    box-shadow: none !important;
    padding: 16px 20px;
}

    .hd-acc .accordion-button:not(.collapsed) {
        color: var(--renk1) !important;
    }

    .hd-acc .accordion-button::after {
        display: none;
    }

    .hd-acc .accordion-button .acc-icon {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        border-radius: 7px;
        background: var(--renk1-light);
        border: 1px solid rgba(242,75,13,.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--renk1);
        font-size: .8rem;
        transition: background .3s, transform .3s;
        margin-left: auto;
    }

    .hd-acc .accordion-button:not(.collapsed) .acc-icon {
        background: var(--renk1);
        color: #fff;
        transform: rotate(45deg);
    }

.hd-acc .accordion-body {
    color: var(--text-mid);
    font-size: .88rem;
    line-height: 1.75;
    padding: 0 20px 16px;
}
.hzm1 {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
}
    .hzm1:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        bottom: 0;
        background: linear-gradient(180deg, var(--renk1), rgba(242, 75, 13, .2));
        border-radius: 2px 0 0 2px;
    }
/* ══ FORM ══ */
.hd-form-wrap {
    background: linear-gradient(135deg, var(--renk3) 0%, #0a3a8a 100%);
    border-radius: 16px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

    .hd-form-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--renk1), rgba(242,75,13,.3), transparent);
    }

    .hd-form-wrap .sec-title {
        color: #fff;
    }

    .hd-form-wrap .sec-eyebrow {
        color: rgba(255,255,255,.55);
    }

        .hd-form-wrap .sec-eyebrow::before {
            background: rgba(255,255,255,.3);
        }

.hd-label {
    display: block;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 6px;
}

.hd-input, .hd-select, .hd-textarea {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    padding: 11px 14px;
    color: #fff !important; 
    font-size: .93rem;
    outline: none;
    transition: border-color .25s, background .25s;
}

    .hd-input::placeholder, .hd-textarea::placeholder {
        color: rgba(255,255,255,.2) !important;
    }

    .hd-input:focus, .hd-select:focus, .hd-textarea:focus {
        border-color: rgba(242,75,13,.5) !important;
        background: rgba(255,255,255,.1) !important;
        box-shadow: none !important;
    }

    .hd-select option {
        background: #042561;
    }

.hd-textarea {
    resize: vertical;
    min-height: 110px;
}

.hd-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--renk1);
    color: #fff !important;
    /*font-family: "Work Sans", sans-serif;*/
    font-size: .93rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 13px 28px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(242,75,13,.4);
    transition: transform .2s, box-shadow .2s;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    text-decoration: none;
}

    .hd-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(242,75,13,.5);
    }

/* ══ SIDEBAR ══ */
.hd-sidebar {
    position: sticky;
    top: 100px;
}

.sb-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.sb-box-head {
    padding: 16px 20px;
    background: var(--renk3);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sb-box-head span {
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255,255,255,.85);
    }

    .sb-box-head i {
        color: var(--renk1);
        font-size: 1rem;
    }

.sb-services {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

    .sb-services li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        color: var(--text-mid);
        font-size: .9rem;
        font-weight: 500;
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: background .2s, color .2s, padding-left .2s;
    }

        .sb-services li a:hover {
            background: var(--bg-soft);
            color: var(--renk3);
            padding-left: 24px;
        }

            .sb-services li a:hover i {
                color: var(--renk1);
                transform: translateX(3px);
            }

        .sb-services li a i {
            font-size: .9rem;
            color: var(--text-muted);
            transition: color .2s, transform .2s;
        }

    .sb-services li.active a {
        background: var(--renk1-light);
        color: var(--renk1);
        border-left-color: var(--renk1);
        font-weight: 600;
        padding-left: 24px;
    }

        .sb-services li.active a i {
            color: var(--renk1);
        }

    .sb-services li + li {
        border-top: 1px solid var(--border);
    }

.sb-contact {
    background: linear-gradient(135deg, var(--renk3) 0%, #0a3a8a 100%);
    border-radius: 14px;
    padding: 26px 22px;
    box-shadow: 0 8px 24px rgba(4,37,97,.2);
    position: relative;
    overflow: hidden;
}

    .sb-contact::after {
        content: "";
        position: absolute;
        bottom: -40px;
        right: -40px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(242,75,13,.08);
        pointer-events: none;
    }

.sb-contact-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 8px;
}

    .sb-contact-title em {
        font-style: normal;
        color: var(--renk1);
    }

.sb-contact-desc {
    font-size: .83rem;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
    margin-bottom: 16px;
}

.sb-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--renk1);
    color: #fff !important;
    font-size: .88rem;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(242,75,13,.4);
    transition: transform .2s, box-shadow .2s;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

    .sb-contact-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(242,75,13,.5);
    }

.sb-badge-box {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.sb-badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .87rem;
    color: var(--text-mid);
    font-weight: 500;
}

    .sb-badge-item i {
        color: var(--renk1);
        font-size: 1.05rem;
        flex-shrink: 0;
    }

.iletisim-kart {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    transition: transform .3s, box-shadow .3s, border-color .3s;
    position: relative;
    overflow: hidden;
}

    .iletisim-kart::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--renk1), rgba(242,75,13,.2));
        opacity: 0;
        transition: opacity .3s;
    }

    .iletisim-kart:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 36px rgba(242,75,13,.09), 0 4px 12px rgba(0,0,0,.05);
        border-color: rgba(242,75,13,.3);
    }

        .iletisim-kart:hover::after {
            opacity: 1;
        }

.iletisim-kart-icon {
    width: 56px;
    height: 56px;
    background: var(--renk1-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--renk1);
    margin-bottom: 18px;
}

.iletisim-kart-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.iletisim-kart-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--renk3);
    line-height: 1.5;
}

    .iletisim-kart-value a {
        color: var(--renk3);
        text-decoration: none;
        transition: color .2s;
    }

        .iletisim-kart-value a:hover {
            color: var(--renk1);
        }

.iletisim-kart-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.iletisim-form-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 44px 44px;
    box-shadow: 0 8px 40px rgba(0,0,0,.07);
    position: relative;
    overflow: hidden;
}

    .iletisim-form-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        bottom: 0;
        background: linear-gradient(180deg, var(--renk1), rgba(242,75,13,.2));
        border-radius: 2px 0 0 2px;
    }

.iletisim-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--renk3);
    margin-bottom: 7px;
}

.iletisim-input, .iletisim-select, .iletisim-textarea {
    width: 100%;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    color: #111827;
    /*font-family: "Work Sans", sans-serif;*/
    font-size: .95rem;
    outline: none;
    transition: border-color .25s, background .25s, box-shadow .25s;
    appearance: none;
}

    .iletisim-input::placeholder, .iletisim-textarea::placeholder {
        color: var(--text-muted);
    }

    .iletisim-input:focus, .iletisim-select:focus, .iletisim-textarea:focus {
        border-color: var(--renk1);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(242,75,13,.08);
        outline: none;
    }

.iletisim-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

    .iletisim-select option {
        background: #fff;
    }

.iletisim-textarea {
    resize: vertical;
    min-height: 130px;
}

.iletisim-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--renk1) 0%, #c73215 100%);
    color: #fff;
    /*font-family: "Work Sans", sans-serif;*/
    font-size: .95rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    padding: 14px 32px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(242,75,13,.35);
    transition: transform .2s, box-shadow .2s;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

    .iletisim-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(242,75,13,.45);
    }
#form {
    scroll-margin-top: 120px; /* navbar yüksekliği + biraz boşluk */
}
/* ══ SOL BİLGİ PANEL ══ */
.iletisim-info-panel {
    background: linear-gradient(160deg, var(--renk3) 0%, var(--renk2) 100%);
    border-radius: 20px;
    padding: 44px 36px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(4,37,97,.2);
}

    .iletisim-info-panel::before {
        content: "";
        position: absolute;
        bottom: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(242,75,13,.08);
        pointer-events: none;
    }

    .iletisim-info-panel::after {
        content: "";
        position: absolute;
        top: -40px;
        left: -40px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255,255,255,.03);
        pointer-events: none;
    }

.iletisim-panel-title {
    /*font-family: "Playfair Display", serif;*/
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 10px;
}

    .iletisim-panel-title em {
        font-style: normal;
        color: var(--renk1);
    }

.iletisim-panel-desc {
    color: rgba(255,255,255,.6);
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 36px;
}

.iletisim-contailetisim-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.iletisim-contailetisim-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.iletisim-contailetisim-ico {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--renk1);
    font-size: 1rem;
}

.iletisim-contailetisim-info-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 3px;
}

.iletisim-contailetisim-info-val {
    font-size: .92rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.5;
}

    .iletisim-contailetisim-info-val a {
        color: #fff;
        text-decoration: none;
        transition: color .2s;
    }

        .iletisim-contailetisim-info-val a:hover {
            color: var(--renk1);
        }

.iletisim-divider {
    height: 1px;
    background: rgba(255,255,255,.1);
    margin: 28px 0;
}

.iletisim-social-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 14px;
}

.iletisim-social-links {
    display: flex;
    gap: 10px;
}

    .iletisim-social-links a {
        width: 38px;
        height: 38px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.6);
        font-size: .95rem;
        text-decoration: none;
        transition: background .2s, color .2s, border-color .2s;
    }

        .iletisim-social-links a:hover {
            background: var(--renk1);
            border-color: var(--renk1);
            color: #fff;
        }

.iletisim-working-hours {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 24px;
}

.iletisim-wh-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 12px;
}

.iletisim-wh-row {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
}

    .iletisim-wh-row + .iletisim-wh-row {
        margin-top: 8px;
    }

.iletisim-wh-day {
    color: rgba(255,255,255,.6);
}

.iletisim-wh-time {
    color: #fff;
    font-weight: 500;
}

    .iletisim-wh-time.open {
        color: #4ade80;
    }
.iletisim-map-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
    height: 450px;
}
.iletisim-map-wrap iframe{
    width:100%;
}
.ref-logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.ref-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    height: 100px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s, transform .3s;
    min-width: 150px;
}
    .ref-logo-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--renk1-light);
        opacity: 0;
        transition: opacity .3s;
    }
    .ref-logo-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--renk1);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s;
    }
.ref-logo-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
    .ref-logo-inner img {
        height: 90px;
        width: auto;
        max-width: 80px;
        object-fit: contain;
        flex-shrink: 0;
    }
.ref-logo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    transition: background .3s;
}
.ref-logo-text {
    font-size: .95rem;
    font-weight: 700;
    color: #374151;
    letter-spacing: -.01em;
    transition: color .3s;
    white-space: nowrap;
}
.ref-logo-item:hover {
    border-color: rgba(242, 75, 13, .35);
    box-shadow: 0 8px 28px rgba(242, 75, 13, .1), 0 2px 8px rgba(0, 0, 0, .05);
    transform: translateY(-3px);
}
    .ref-logo-item:hover::before {
        opacity: 1;
    }
    .ref-logo-item:hover::after {
        transform: scaleX(1);
    }
    .ref-logo-item:hover .ref-logo-dot {
        background: var(--renk1);
    }
    .ref-logo-item:hover .ref-logo-text {
        color: var(--renk1);
    }
.misyon-wrap {
    padding: 70px 0;
}

.misyon-kart {
    position: relative;
    border-radius: 20px;
    padding: 44px 40px;
    height: 100%;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

    .misyon-kart:hover {
        transform: translateY(-4px);
    }

/* Misyon — beyaz kart */
.misyon-kart-sol {
    background: #fff;
    border: 1.5px solid var(--border);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

    .misyon-kart-sol:hover {
        box-shadow: 0 16px 48px rgba(242,75,13,.1), 0 4px 16px rgba(0,0,0,.06);
        border-color: rgba(242,75,13,.3);
    }

/* Vizyon — lacivert kart */
.misyon-kart-sag {
    background: linear-gradient(145deg, var(--renk3) 0%, #0a3a8a 100%);
    border: 1.5px solid transparent;
    box-shadow: 0 8px 40px rgba(4,37,97,.25);
}

    .misyon-kart-sag:hover {
        box-shadow: 0 20px 60px rgba(4,37,97,.3);
    }

/* üst şerit */
.misyon-kart-sol::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--renk1), rgba(242,75,13,.2));
}

.misyon-kart-sag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--renk1), rgba(242,75,13,.4));
}

/* dekor daire */
.misyon-kart::after {
    content: "";
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
}

.misyon-kart-sol::after {
    background: radial-gradient(circle, rgba(242,75,13,.05) 0%, transparent 70%);
}

.misyon-kart-sag::after {
    background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
}

/* ikon kutu */
.misyon-ikon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.misyon-kart-sol .misyon-ikon {
    background: var(--renk1-light);
    color: var(--renk1);
    border: 1px solid rgba(242,75,13,.15);
}

.misyon-kart-sag .misyon-ikon {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
}

/* etiket */
.misyon-etiket {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .misyon-etiket::before {
        content: "";
        width: 20px;
        height: 2px;
        border-radius: 2px;
        flex-shrink: 0;
    }

.misyon-kart-sol .misyon-etiket {
    color: var(--renk1);
}

    .misyon-kart-sol .misyon-etiket::before {
        background: var(--renk1);
    }

.misyon-kart-sag .misyon-etiket {
    color: rgba(255,255,255,.5);
}

    .misyon-kart-sag .misyon-etiket::before {
        background: var(--renk1);
    }

/* başlık */
.misyon-baslik {
    font-family: "Playfair Display", serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
}

.misyon-kart-sol .misyon-baslik {
    color: var(--renk3);
}

.misyon-kart-sag .misyon-baslik {
    color: #fff;
}

.misyon-baslik em {
    font-style: normal;
    color: var(--renk1);
}

/* divider */
.misyon-cizgi {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--renk1), rgba(242,75,13,.2));
}

/* metin */
.misyon-metin {
    font-size: .95rem;
    line-height: 1.85;
}

.misyon-kart-sol .misyon-metin {
    color: var(--text-mid);
}

.misyon-kart-sag .misyon-metin {
    color: rgba(255,255,255,.7);
}

/* check listesi */
.misyon-liste {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .misyon-liste li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: .88rem;
    }

.misyon-kart-sol .misyon-liste li {
    color: var(--text-mid);
}

.misyon-kart-sag .misyon-liste li {
    color: rgba(255,255,255,.75);
}

.misyon-liste li i {
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: 3px;
}

.misyon-kart-sol .misyon-liste li i {
    color: var(--renk1);
}

.misyon-kart-sag .misyon-liste li i {
    color: var(--renk1);
}

/* dekor numara */
.misyon-dekor {
    position: absolute;
    bottom: 16px;
    right: 24px;
    font-family: "Playfair Display", serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.misyon-kart-sol .misyon-dekor {
    color: rgba(4,37,97,.04);
}

.misyon-kart-sag .misyon-dekor {
    color: rgba(255,255,255,.04);
}
.misyon-kart ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.misyon-kart li {
    position: relative;
    padding-left: 22px;
    list-style: none;
}
.misyon-kart li:before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: .85rem;
    color: var(--renk1);
}
.il1 iframe{
    width:100%;
    height:450px;
}
.blog-kart {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

/* ══ KAPAK RESMİ ══ */
.blog-kapak {
    position: relative;
    height: 420px;
    overflow: hidden;
}

    .blog-kapak img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

.blog-kart:hover .blog-kapak img {
    transform: scale(1.02);
}

.blog-kapak-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4,37,97,.5) 0%, transparent 60%);
}

/* Kapak üstü etiketler */
.blog-kapak-meta {
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-kategori {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--renk1);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    text-decoration: none;
}

    .blog-kategori:hover {
        background: #c73215;
        color: #fff;
    }

.blog-okuma-suresi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,.9);
    font-size: .75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
}

/* ══ İÇERİK ALANI ══ */
.blog-icerik {
    padding: 40px 44px 44px;
}

/* Başlık */
.blog-baslik {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--renk3);
    margin-bottom: 20px;
}

/* Yazar + tarih */
.blog-yazar-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.blog-yazar-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--renk3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.blog-yazar-ad {
    font-size: .88rem;
    font-weight: 600;
    color: var(--renk3);
}

.blog-yazar-unvan {
    font-size: .76rem;
    color: var(--text-muted);
}

.blog-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 500;
}

    .blog-meta-item i {
        color: var(--renk1);
        font-size: .78rem;
    }

.blog-meta-sep {
    color: var(--border);
}

/* İçerik typography */
.blog-metin {
    color: var(--text-mid);
    font-size: .98rem;
    line-height: 1.9;
}

    .blog-metin p {
        margin-bottom: 20px;
    }

        .blog-metin p:last-child {
            margin-bottom: 0;
        }

    .blog-metin h2 {
        font-family: "Playfair Display", serif;
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--renk3);
        margin: 36px 0 14px;
    }

    .blog-metin h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--renk3);
        margin: 28px 0 12px;
    }

    .blog-metin strong {
        color: #111827;
        font-weight: 600;
    }

/* Alıntı */
.blog-alinti {
    border-left: 4px solid var(--renk1);
    background: var(--renk1-light);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    margin: 28px 0;
    position: relative;
}

    .blog-alinti::before {
        content: "\201C";
        position: absolute;
        top: -8px;
        left: 16px;
        font-size: 4rem;
        color: rgba(242,75,13,.15);
        font-family: "Playfair Display", serif;
        line-height: 1;
    }

    .blog-alinti p {
        font-size: 1rem;
        font-style: italic;
        color: var(--renk3);
        font-weight: 500;
        margin: 0;
        line-height: 1.7;
    }

    .blog-alinti cite {
        display: block;
        font-size: .78rem;
        color: var(--renk1);
        font-weight: 600;
        font-style: normal;
        margin-top: 8px;
    }

/* Info kutusu */
.blog-info-box {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 28px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.blog-info-box-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: var(--renk1-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--renk1);
    font-size: 1rem;
}

.blog-info-box p {
    font-size: .88rem;
    color: var(--text-mid);
    line-height: 1.7;
    margin: 0;
}

/* Liste */
.blog-metin ul, .blog-metin ol {
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .blog-metin ul li {
        padding-left: 22px;
        position: relative;
        font-size: .95rem;
        color: var(--text-mid);
    }

        .blog-metin ul li::before {
            content: "\F26E";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 0;
            top: 3px;
            font-size: .8rem;
            color: var(--renk1);
        }

/* İç resim */
.blog-ic-resim {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin: 28px 0;
}

    .blog-ic-resim img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

    .blog-ic-resim figcaption {
        padding: 10px 16px;
        font-size: .78rem;
        color: var(--text-muted);
        text-align: center;
        background: var(--bg-soft);
    }

/* Etiketler */
.blog-etiketler {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    margin-top: 36px;
}

.blog-etiketler-baslik {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.blog-etiket {
    display: inline-block;
    padding: 5px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-mid);
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

    .blog-etiket:hover {
        border-color: rgba(242,75,13,.4);
        color: var(--renk1);
        background: var(--renk1-light);
    }

/* Paylaş */
.blog-paylasim {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

.blog-paylasim-baslik {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.blog-paylasim-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

    .blog-paylasim-btn:hover {
        transform: translateY(-2px);
    }

    .blog-paylasim-btn.linkedin {
        background: #0077b5;
        color: #fff;
    }

    .blog-paylasim-btn.twitter {
        background: #000;
        color: #fff;
    }

    .blog-paylasim-btn.whatsapp {
        background: #25d366;
        color: #fff;
    }

/* Önceki / Sonraki */
.blog-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 36px;
}

.blog-nav-btn {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

    .blog-nav-btn:hover {
        border-color: rgba(242,75,13,.3);
        box-shadow: 0 6px 20px rgba(242,75,13,.07);
        transform: translateY(-2px);
    }

    .blog-nav-btn.sonraki {
        justify-content: flex-end;
        text-align: right;
    }

.blog-nav-ikon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--renk1-light);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--renk1);
    font-size: 1rem;
}

.blog-nav-etiket {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.blog-nav-baslik {
    font-size: .85rem;
    font-weight: 600;
    color: var(--renk3);
    line-height: 1.3;
}

/* ══ SIDEBAR ══ */
.blog-sidebar {
    position: sticky;
    top: 100px;
}

/* Yazar kutusu */
.sb-yazar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

.sb-yazar-header {
    background: linear-gradient(135deg, var(--renk3), var(--renk3-light));
    padding: 24px;
    text-align: center;
    position: relative;
}

    .sb-yazar-header::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--renk1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

.sb-yazar-foto {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--renk1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    margin: 0 auto 0;
    border: 3px solid rgba(255,255,255,.3);
    position: relative;
    z-index: 1;
}

.sb-yazar-body {
    padding: 30px 20px 20px;
    text-align: center;
}

.sb-yazar-ad {
    font-size: .95rem;
    font-weight: 700;
    color: var(--renk3);
    margin-bottom: 4px;
}

.sb-yazar-unvan {
    font-size: .78rem;
    color: var(--renk1);
    font-weight: 600;
    margin-bottom: 12px;
}

.sb-yazar-bio {
    font-size: .83rem;
    color: var(--text-mid);
    line-height: 1.65;
}

/* Popüler yazılar */
.sb-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

.sb-box-head {
    padding: 16px 20px;
    background: var(--renk3);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sb-box-head span {
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255,255,255,.85);
    }

    .sb-box-head i {
        color: var(--renk1);
        font-size: 1rem;
    }

.sb-yazi-liste {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.sb-yazi-item {
    border-top: 1px solid var(--border);
}

    .sb-yazi-item:first-child {
        border-top: none;
    }

    .sb-yazi-item a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 18px;
        text-decoration: none;
        transition: background .2s;
    }

        .sb-yazi-item a:hover {
            background: var(--bg-soft);
        }

.sb-yazi-resim {
    width: 64px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

    .sb-yazi-resim img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sb-yazi-baslik {
    font-size: .82rem;
    font-weight: 600;
    color: var(--renk3);
    line-height: 1.35;
    margin-bottom: 5px;
}

.sb-yazi-tarih {
    font-size: .72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .sb-yazi-tarih i {
        color: var(--renk1);
        font-size: .7rem;
    }

/* Kategori listesi */
.sb-kategori-liste {
    list-style: none;
    padding: 12px 0;
    margin: 0;
}

.sb-kategori-item {
    border-top: 1px solid var(--border);
}

    .sb-kategori-item:first-child {
        border-top: none;
    }

    .sb-kategori-item a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 20px;
        text-decoration: none;
        color: var(--text-mid);
        font-size: .88rem;
        font-weight: 500;
        transition: background .2s, color .2s, padding-left .2s;
        border-left: 3px solid transparent;
    }

        .sb-kategori-item a:hover {
            background: var(--bg-soft);
            color: var(--renk1);
            padding-left: 24px;
            border-left-color: var(--renk1);
        }

.sb-kategori-sayi {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 50px;
}

/* Bülten */
.sb-bulten {
    background: linear-gradient(135deg, var(--renk3), var(--renk3-light));
    border-radius: 14px;
    padding: 26px 22px;
    position: relative;
    overflow: hidden;
}

    .sb-bulten::after {
        content: "";
        position: absolute;
        bottom: -40px;
        right: -40px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(242,75,13,.08);
        pointer-events: none;
    }

.sb-bulten-baslik {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

    .sb-bulten-baslik em {
        font-style: normal;
        color: var(--renk1);
    }

.sb-bulten-acik {
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
    margin-bottom: 16px;
}

.sb-bulten-input {
    width: 100%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-family: "Work Sans", sans-serif;
    font-size: .88rem;
    outline: none;
    margin-bottom: 10px;
    transition: border-color .2s;
}

    .sb-bulten-input::placeholder {
        color: rgba(255,255,255,.3);
    }

    .sb-bulten-input:focus {
        border-color: rgba(242,75,13,.5);
    }

.sb-bulten-btn {
    width: 100%;
    background: var(--renk1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-family: "Work Sans", sans-serif;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .2s;
    box-shadow: 0 4px 14px rgba(242,75,13,.4);
}

    .sb-bulten-btn:hover {
        box-shadow: 0 6px 20px rgba(242,75,13,.5);
    }

/* ══ İLGİLİ YAZILAR ══ */
.ilgili-kart {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s;
    text-decoration: none;
    display: block;
    height: 100%;
}

    .ilgili-kart:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 40px rgba(0,0,0,.09);
        border-color: rgba(242,75,13,.25);
    }

.ilgili-kart-resim {
    height: 180px;
    overflow: hidden;
}

    .ilgili-kart-resim img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s;
        display: block;
    }

.ilgili-kart:hover .ilgili-kart-resim img {
    transform: scale(1.05);
}

.ilgili-kart-body {
    padding: 18px 18px;
}

.ilgili-kart-kat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--renk1);
    margin-bottom: 8px;
}

.ilgili-kart-baslik {
    font-size: .9rem;
    font-weight: 700;
    color: var(--renk3);
    line-height: 1.35;
    margin-bottom: 10px;
}

.ilgili-kart-tarih {
    font-size: .75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

    .ilgili-kart-tarih i {
        color: var(--renk1);
    }