/*
    DataXPro AI-Technolojy - By DATAKALE
    Update 15.09.2024
*/


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0; /* Tarayıcının varsayılan olarak minimum bir genişlik atamasını engellemek için */
    overflow-x: hidden !important; /* Tüm yatay taşmaları kesin olarak gizle */
    box-sizing: border-box; /* Tüm elementler için varsayılan olarak kutu modelini düzeltir */
}

/* Mevcut body tanımınızın içine de ekleyebilirsiniz, ancak yukarıdaki kural daha genel ve güçlü olacaktır */
body {
    /* ...diğer mevcut stilleriniz... */
    overflow-x: hidden !important; /* İkinci bir katman olarak ekleyelim */
}


ul,
li,
ol,
p {
    margin: 0;
    padding: 0;
    list-style: none;
}

u {
    text-decoration: underline;
}

* {
    margin: 0;
    padding: 0;
    vertical-align: none;
    text-decoration: none;
}

strong,
b {
    font-weight: bold !important;
}

a {
    color: var(--bs-text-info);
    text-decoration: none;
}

:root {
    --bs-theme-logo: url(../../img/panel-logo.svg);
    --bs-body-bg: #fff;
    --bs-body-color: #293a4a;
    --bs-theme: #3f4857;
    --bs-theme-color: #3f4857;
    --bs-font-one: "Saira Condensed";
    --bs-font-two: "Barlow Condensed";
    --bs-font-three: "Caveat";
    --bs-dark-light: #f0f2f5;
    --bs-box-shadow-xm: 0 1px 6px rgb(0 0 0 / 5%) !important;
    --bs-box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    --bs-info: #007aff !important;
    --bs-text-info: #007aff !important;
    --bs-success: #66c21b !important;
    --bs-effect: all 250ms ease;
    --bs-body-line-height: 1.1 !important;
    --bs-dropdown-zindex: 9999 !important;
}

body {
    font-family: var(--bs-font-one), sans-serif;
    font-size: 19px;
    font-weight: 300;
    font-display: swap;
    position: relative;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    position: relative;
    overflow-x: hidden;
}

header {
    position: relative;
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--bs-border-color);
}

header .logo {
    margin-top: 9px !important;
    margin-bottom: 9px !important;
    margin-left: 15px;
}

header .logo img {
    width: 100%;
    height: 48px;
}

header .h-bar {
    height: 66px;
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
}

header .h-bar div>i {
    font-size: 32px;
    line-height: 0;
}

header .h-bar div>span {
    font-size: 15px;
    font-weight: 500;
    display: block;
}

header .h-bar:hover {
    background-color: var(--bs-dark-light);
}

@media (max-width: 768px) {
    header .h-bar {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        border-left: 1px solid var(--bs-border-color);
    }
}

header .head-menu {
    display: flex;
    gap: 0 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

header .head-menu .head-item {
    position: relative;
    height: 66px;
    display: inline-flex;
    align-items: center;
}

header .head-menu .head-item a {
    padding: 5px 15px;
    text-align: center;
    display: block;
    flex-shrink: 0;
}

header .head-menu .head-item a:hover {
    background-color: var(--bs-dark-light);
}

header .head-menu .head-item a>i {
    font-size: 24px;
    color: var(--bs-body-color);
    display: block;
    margin-bottom: 2px;
}

header .head-menu .head-item a>span {
    font-size: 15px;
    font-weight: 400;
    color: var(--bs-body-color);
    display: block;
}

header .head-menu .head-item .num {
    position: absolute;
    top: 6px;
    right: 8px;
    background-color: var(--bs-theme);
    color: var(--bs-white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
}

header .head-menu .head-item .user-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-white);
    background-color: var(--bs-body-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 3px;
}

.well-come {
    position: relative;
    width: 100%;
    height: 560px;
    border-radius: var(--bs-border-radius);
}

.well-come::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.well-come .well-content {
    width: 100%;
    max-width: 600px;
}

.well-come .well-body {
    background: linear-gradient(133deg, rgb(253 190 95) 0%, rgb(234 149 58) 30%, #fff0 100%);
}

.well-come .well-content .well-title {
    font-family: var(--bs-font-three), sans-serif;
    font-size: 60px;
    font-weight: 700;
    color: var(--bs-white);
    line-height: 1;
    text-shadow: 1px 1px 1px rgba(var(--bs-secondary-rgb), .5);
}

.well-come .well-content .well-text {
    font-size: 24px;
    font-weight: 400;
    color: var(--bs-white);
}

.well-come .well-content .well-url .btn {
    font-size: 24px;
    font-weight: 500;
    border-radius: 3px;
    color: var(--bs-theme);
    box-shadow: var(--bs-box-shadow);
    background-color: var(--bs-white);
}

.well-come .well-content .well-url .btn:hover {
    color: var(--bs-white);
    background-color: var(--bs-theme);
    transition: var(--bs-effect);
}

@media (max-width: 990px) {
    .well-come {
        width: 100%;
        height: 360px;
    }

    .well-come .well-content .well-title {
        font-size: 44px;
    }

    .well-come .well-content .well-text {
        font-size: 19px;
    }
}

@media (max-width: 768px) {
    .well-come {
        height: 280px;
    }

    .well-come .well-content .well-title {
        font-size: 40px;
    }

    .well-come .well-content .well-text {
        font-size: 18px;
    }

    .well-come .well-content .well-url .btn {
        font-size: 20px;
    }
}

.advert-container .advert-stun {
    width: auto;
    height: 100%;
    max-height: 250px !important;
    overflow: hidden;
}

.advert-container .advert-stun img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
}

@media (max-width: 990px) {
    .advert-container .advert-stun {
        max-height: 150px !important;
    }
}

.advert-container .advert-item {
    border-radius: var(--bs-border-radius);
    border: 2px solid var(--bs-border-color);
}

.advert-container .advert-item .adv-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.advert-container .advert-item .adv-text {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.advert-container .advert-item .img-fluid {
    width: 106px !important;
    height: 106px !important;
}

.advert-container .advert-item:hover {
    border-color: var(--bs-theme);
    transition: var(--bs-effect);
    box-shadow: var(--bs-box-shadow-xm);
}

.advert-container .advert-item:hover .adv-title {
    color: var(--bs-theme);
}

.product-container .prod-filter .btn {
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5em;
    border-radius: 0;
}

.product-container .prod-filter .dropdown-toggle {
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-body-color);
    background-color: var(--bs-dark-light);
}

.product-container .prod-filter .dropdown-toggle::after {
    display: none !important;
}

.product-container .product-header .product-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.product-container .card {
    border-width: 1px;
}

.product-container .card .card-img-top {
    width: 100% !important;
    height: 250px;
    overflow: hidden;
}

.product-container .card .card-img-top img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/16;
    object-fit: cover;
    object-position: center;
}

.product-container .card .card-img {
    width: 100% !important;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
}

.product-container .card .card-img img {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16/16;
    object-fit: contain;
    object-position: center;
}

.product-container .card .card-body {
    padding: 15px 10px 10px;
}

.product-container .card .card-prince .coin {
    color: var(--bs-body-color);
    font-size: 21px;
    font-weight: 600;
    display: inline-block;
    border-radius: var(--bs-border-radius-sm);
    padding: 5px 6px;
    background-color: var(--bs-dark-light);
}

.product-container .card .card-prince .coin>span {
    font-size: 17px;
    font-weight: 200;
}

.product-container .card .card-prince .coin2 {
    color: var(--bs-danger);
    font-size: 21px;
    font-weight: 600;
    display: inline-block;
    border-radius: var(--bs-border-radius-sm);
    padding: 5px 6px;
    background-color: var(--bs-dark-light);
}

.product-container .card .card-prince .coin2>span {
    font-size: 17px;
    font-weight: 200;
}

.product-container .card .card-prince .n-coin {
    color: var(--bs-secondary);
    font-size: 19px;
    font-weight: 200;
    text-decoration: line-through;
}

.product-container .card .card-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-body-color);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product-container .card .card-num {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product-container .card .card-text {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-theme);
    text-transform: uppercase;
}

.product-container .card:hover {
    border-color: var(--bs-theme) !important;
    transition: var(--bs-effect);
    box-shadow: var(--bs-box-shadow-xm);
}

.product-container .card:hover img {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.product-container .card .card-ticket {
    position: absolute;
    top: 25px;
    right: -1px;
}

.product-container .card .card-ticket .new {
    font-size: 18px;
    font-weight: 500;
    background-color: var(--bs-success);
    color: #FFF;
    padding: 3px 10px;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}

.product-container .card .card-ticket-hm {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-white);
    padding: 5px 15px;
    background-color: var(--bs-theme);
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    z-index: 1;
}

.product-container .card .card-ticket .disc {
    font-size: 18px;
    font-weight: 500;
    background-color: var(--bs-danger);
    color: #FFF;
    padding: 3px 10px;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}

.product-container .card .card-ticket .oppo {
    font-size: 18px;
    font-weight: 500;
    background-color: var(--bs-theme);
    color: #FFF;
    padding: 3px 10px;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}

.product-container .card .card-footer {
    background-color: transparent !important;
    border: none !important;
}

.product-container .card .card-footer form {
    position: relative;
    z-index: 2 !important;
}

@media (max-width: 990px) {
    .product-container .opportunities {
        padding: 0;
    }

    .product-container .card .card-img {
        height: 200px !important;
        transition: var(--bs-effect);
    }

    .product-container .card .card-ticket .new,
    .product-container .card .card-ticket .disc,
    .product-container .card .card-ticket .oppo {
        font-size: 16px;
    }
}

@media (max-width: 568px) {
    .product-container .card .card-title {
        font-size: 17px;
    }

    .product-container .card .card-img {
        height: 180px !important;
        transition: var(--bs-effect);
    }

    .product-container .card .card-img-top {
        height: 180px !important;
        transition: var(--bs-effect);
    }

    .product-container .card .card-body {
        padding: 10px 0 0 5px;
    }
}

.product-container .product-detail .prod-content {
    position: sticky;
    top: 15px;
    width: 100%;
    max-width: 460px;
}

@media (max-width: 990px) {
    .product-container .product-detail .prod-content {
        width: 100% !important;
        min-width: 100% !important;
        display: block !important;
    }

    .product-container .product-detail .prod-title {
        font-size: 28px;
    }

    .product-container .product-detail .prod-cate {
        font-size: 18px;
    }
}

.product-container .product-detail .prod-title {
    font-size: 32px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--bs-body-color);
    line-height: 1.2em;
}

.product-container .product-detail .prod-cate {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--bs-secondary);
}

.product-container .product-detail .prod-prince .coin {
    padding: 10px;
    background-color: var(--bs-dark-light);
    color: var(--bs-body-color);
    font-size: 22px;
    font-weight: 600;
    display: inline-block;
    border-radius: 3px;
}

.product-container .product-detail .prod-prince .coin>span {
    font-size: 19px;
    font-weight: 200;
}

.product-container .product-detail .prod-prince .coin2 {
    padding: 10px;
    background-color: var(--bs-danger);
    color: var(--bs-white);
    font-size: 22px;
    font-weight: 600;
    display: inline-block;
    border-radius: 3px;
}

.product-container .product-detail .prod-prince .coin2>span {
    font-size: 19px;
    font-weight: 200;
}

.product-container .product-detail .prod-prince .n-coin {
    color: var(--bs-secondary);
    font-size: 22px;
    font-weight: 200;
    text-decoration: line-through;
}

.product-container .product-detail .prod-prince .n-coin2 {
    color: var(--bs-danger);
    font-size: 19px;
    font-weight: 500;
}

.product-container .product-detail .prod-ref {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-secondary);
}

.product-container .product-detail .prod-link {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.product-container .product-detail .prod-link a {
    color: var(--bs-text-info) !important;
}

.product-container .product-detail .prod-text {
    font-size: 19px;
    font-weight: 300;
}

.product-container .product-detail .prod-box .btn-box {
    height: 50px;
    font-size: 20px;
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm) !important;
    border: 2px solid var(--bs-theme);
    color: var(--bs-theme);
}

.product-container .product-detail .prod-box .btn-box:hover {
    background-color: var(--bs-theme);
    color: var(--bs-white);
    transition: var(--bs-effect);
}

.product-container .product-detail .prod-box .btn-wap {
    font-size: 20px;
    font-weight: 400;
    border-color: #25d366;
    background-color: #25d366;
    color: var(--bs-white);
    border-radius: var(--bs-border-radius-sm) !important;
}

.product-container .product-detail .prod-box .btn-wap .bi {
    font-size: 35px;
}

.product-container .product-detail .prod-box .btn-wap div>span {
    display: block;
    font-size: 14px;
    font-weight: 300;
}

.product-container .product-detail .prod-box .form-select {
    border-color: var(--bs-border-color);
    background-color: var(--bs-border-color);
    color: var(--bs-body-color);
    font-size: 18px;
    font-weight: 500;
    height: 50px;
    cursor: pointer;
}

.product-container .product-detail .prod-box .form-select:hover {
    background-color: #fff0;
    transition: var(--bs-effect);
}

.product-container .product-detail .prod-box .form-select:focus {
    box-shadow: none;
}

.product-container .product-detail .prod-share .btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 0 !important;
}

.product-container .product-detail .nav .nav-link {
    color: var(--bs-body-color);
    opacity: .5;
    cursor: pointer;
}

.product-container .product-detail .nav .active {
    border-bottom: 1px solid var(--bs-theme);
    opacity: 1;
}

.scrollable-story {
    position: relative;
}

.scrollable-story .next,
.scrollable-story .prev {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff0;
    z-index: 1;
    opacity: 0;
    transition: 400ms all;
    pointer-events: none;
    cursor: pointer;
    color: var(--icon, #000);
    border: none;
    font-size: 34px;
}

.scrollable-story.left .prev,
.scrollable-story.right .next {
    opacity: 1;
    pointer-events: auto;
}

.scrollable-story .prev {
    left: 0;
}

.scrollable-story .next {
    right: 0;
}

.scrollable-story::before,
.scrollable-story::after {
    content: '';
    width: var(--width, 60px);
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: 400ms all;
    pointer-events: none;
}

.scrollable-story::before {
    left: 0;
    background: linear-gradient(to right, var(--shadow, #fff), transparent);
}

.scrollable-story::after {
    right: 0;
    background: linear-gradient(to left, var(--shadow, #fff), transparent);
}

.scrollable-story.left::before {
    opacity: 1;
}

.scrollable-story.right::after {
    opacity: 1;
}

.box-container {
    --icon: #000;
    --shadow: #ffffff;
    --width: 100px;
    max-width: 990px;
    width: 100%;
}

.box-center {
    display: flex;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
}

.box-content {
    width: 100%;
    display: flex;
    gap: 0 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.box-content .box-item {
    width: 100px;
    height: 100px;
    background: var(--bs-dark-light);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-border-color);
}

.box-content .box-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.box-content .box-item:hover {
    box-shadow: var(--bs-box-shadow-sm);
    transition: var(--bs-effect);
    border-color: var(--bs-theme);
}

.box-catalog {
    --icon: #000;
    --shadow: #ffffff;
    --width: 100px;
}

.box-catalog .active {
    background-color: var(--bs-theme) !important;
    color: var(--bs-white) !important;
}

.box-catalog .active span {
    color: var(--bs-secondary-bg) !important;
}

.box-content .box-menu {
    font-size: 17px;
    font-weight: 500;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    padding: 8px 15px;
    flex-shrink: 0;
}

.box-content .box-menu span {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
}

@media (max-width: 990px) {
    .box-content {
        overflow-x: auto;
    }

    .box-content .box-item {
        width: 90px;
        height: 90px;
    }
}

.body-container .body-header .head-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--bs-theme);
}

.body-container .body-header .body-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.body-container .body-header .body-title .sm-text {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    display: block;
}

.body-container .body-menu {
    display: flex;
    gap: 0 8px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 990px) {
    .body-container .body-header .head-img {
        width: 70px;
        height: 70px;
        transition: var(--bs-effect);
    }

    .body-container .body-header .body-title {
        font-size: 26px;
    }

    .body-container .body-header .body-title .sm-text {
        font-size: 14px;
    }

    .body-container .body-menu {
        overflow-x: auto;
    }
}

.body-container .body-stun {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.body-container .body-stun .stun-menu {
    position: sticky;
    top: 15px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.body-container .body-stun .stun-menu .active a {
    background-color: var(--bs-light);
    color: var(--bs-theme) !important;
    font-weight: 500 !important;
}

.body-container .body-stun .stun-menu .active a:first-child {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
}

.body-container .body-stun .stun-menu .active a:last-child {
    border-bottom-left-radius: var(--bs-border-radius-sm);
    border-bottom-right-radius: var(--bs-border-radius-sm);
}

.body-container .body-stun .stun-menu .menu-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.body-container .body-stun .stun-menu .menu-item:last-child {
    border-bottom: none;
}

.body-container .body-stun .stun-menu .menu-item a {
    height: 46px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--bs-body-color);
    padding: 0 15px;
}

.body-container .body-stun .menu-head {
    height: 48px;
    display: none;
    align-items: center;
    padding: 0 15px;
    font-size: 20px;
    font-weight: 500;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 10px;
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--bs-box-shadow-xm);
}

.body-container .body-stun .menu-head:hover {
    background-color: var(--bs-dark-light);
    transition: var(--bs-effect);
}

@media (max-width: 768px) {
    .body-container .body-stun .menu-head {
        display: flex;
    }

    .body-container .body-stun {
        min-width: 100%;
    }

    .body-container .body-stun .stun-menu {
        display: none;
    }
}

.blog-container .blog-top .title {
    font-size: 28px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.blog-container .blog-top .text {
    font-size: 15px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.blog-container .blog-list .blog-item a:hover {
    transition: var(--bs-effect);
    border-color: var(--bs-theme) !important;
    box-shadow: var(--bs-box-shadow);
}

.blog-container .blog-list .blog-item .blog-img {
    width: 150px !important;
    height: 130px;
    overflow: hidden;
}

.blog-container .blog-list .blog-item .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-container .blog-list .blog-item .blog-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.blog-container .blog-list .blog-item .blog-text {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.blog-container .blog-list .blog-item .blog-small {
    font-size: 15px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.blog-container .blog-share a {
    height: 40px;
    width: 40px;
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-container .blog-search {
    position: relative;
}

.blog-container .blog-search .btn {
    position: absolute;
    top: 1px;
    right: 1px;
}

.blog-container .blog-search .form-control::placeholder {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.blog-container .blog-search .form-control:hover {
    border-color: var(--bs-theme) !important;
    box-shadow: var(--bs-box-shadow);
}

.blog-container .blog-search .form-control:focus {
    border-color: var(--bs-theme) !important;
    box-shadow: var(--bs-box-shadow);
}

.blog-container .sm-text {
    font-size: 17px;
}

@media (max-width: 768px) {
    .blog-container .blog-list .blog-item .blog-img {
        width: 120px !important;
        height: 100px;
        transition: var(--bs-effect);
    }
}

.breadcrumb-nav {
    background-color: var(--bs-secondary-bg);
    margin-bottom: 15px;
}

.breadcrumb {
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.breadcrumb .breadcrumb-item a {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
    transition: var(--bs-effect);
}

.breadcrumb ol {
    margin: 0 !important;
}

@media (max-width: 768px) {
    .breadcrumb {
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .body-container .body-menu {
        overflow-x: auto;
    }
}

.fotorama .fotorama__img {
    border-radius: 5px !important;
}

.fotorama .fotorama__nav-wrap {
    margin-top: 10px;
}

.fotorama .fotorama__thumb-border {
    border-radius: 5px !important;
    border: 2px solid var(--bs-theme) !important;
}

.fotorama .fotorama__thumb {
    border-radius: 5px !important;
    border: 2px solid var(--bs-border-color);
    background-color: var(--bs-border-color);
    box-shadow: none !important;
}

.offcanvas .logo img {
    width: auto;
    height: 48px;
}

.offcanvas .offcanvas-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

.offcanvas .offcanvas-menu .menu-item {
    display: block;
    border-bottom: 1px solid var(--bs-border-color);
}

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

.offcanvas .offcanvas-menu .menu-item a {
    width: 100%;
    padding: 13px 15px;
    display: inline-flex;
    color: var(--bs-body-color);
    font-size: 19px;
    font-weight: 400;
}

.offcanvas .offcanvas-menu .menu-item a:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-dark-light);
    transition: var(--bs-effect);
}

.offcanvas .offcanvas-body::-webkit-scrollbar {
    width: 6px;
}

.offcanvas .offcanvas-body::-webkit-scrollbar-track {
    background: var(--bs-secondary-bg);
}

.offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: var(--bs-dark-light);
}

.offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: var(--bs-dark-light);
    opacity: .5;
}

.txt-xweb {
    color: var(--bs-theme-color);
}

.bg-xweb {
    background-color: var(--bs-theme);
}

.btn-xweb {
    background-color: var(--bs-theme);
    border-color: var(--bs-theme);
    color: var(--bs-white);
}

.btn-xweb:hover {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: var(--bs-white);
}

.bg-dark-light {
    background-color: var(--bs-dark-light) !important;
}

.card {
    border-color: var(--bs-border-color) !important;
}

.shadow-xs {
    box-shadow: var(--bs-box-shadow-xs);
}

.shadow-xm {
    box-shadow: var(--bs-box-shadow-xm);
}

.or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    color: #51585c;
    align-items: center;
    gap: 20px;
    font-size: 32px;
    font-weight: 300;
}

.or::before,
.or:after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--bs-border-color);
}

.or span {
    font-family: "Great Vibes", sans-serif;
}

.mw-md {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 768px;
    margin-right: auto;
    margin-left: auto;
}

.mw-lg {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 990px;
    margin-right: auto;
    margin-left: auto;
}

.mw-xl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 1099px;
    margin-right: auto;
    margin-left: auto;
}

.mw-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

.form-check-input:checked {
    background-color: var(--bs-theme);
    border-color: var(--bs-theme);
    box-shadow: none;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.hs-5 {
    height: 50px;
}

.accordion .accordion-header .accordion-button {
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-body-color);
    cursor: pointer;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-dark-light) !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .accordion .accordion-body img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.main-mode {
    position: sticky;
    top: 0;
    width: 100%;
    height: 40px;
    color: var(--bs-white);
    background-color: red;
    z-index: 50;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.main-mode a {
    background-color: var(--bs-white);
    color: var(--bs-body-color);
    font-weight: 600;
    padding: 4px 6px;
}

.card-blur {
    filter: blur(8px);
}

.modal {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal .modal-content {
    background-color: var(--bs-white) !important;
}

.modal .modal-header {
    display: flex;
    padding: 0 1rem;
}

.modal .modal-header .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    background-color: var(--bs-dark-light);
    font-size: 18px;
    border-radius: var(--bs-border-radius);
}

.modal .modal-header .modal-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-body-color);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-theme);
    margin-bottom: -1px;
}

.modal .modal-body {
    scrollbar-width: thin;
}

.modal .modal-body .fd-ta {
    border: none;
    font-size: 21px;
    font-weight: 400;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--bs-white);
}

.modal .modal-body .fd-ta::placeholder {
    font-size: 20px;
    font-weight: 200;
}

.modal .modal-body .delet-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: var(--bs-border-radius-lg);
}

.modal .modal-body .delet-icon .form-checked svg {
    width: 70px;
    height: 70px;
    display: block;
    margin: 0 auto;
}

.modal .modal-body .delet-icon .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.modal .modal-body .delet-icon .circle {
    animation: dash 0.9s ease-in-out;
}

.modal .modal-body .delet-icon .line {
    stroke-dashoffset: 1000;
    animation: dash 0.9s 0.35s ease-in-out forwards;
}

.modal .modal-body .delet-icon .check {
    stroke-dashoffset: -100;
    animation: dash-check 0.9s 0.35s ease-in-out forwards;
}

.modal .modal-footer .btn {
    font-size: 19px;
    font-weight: 300;
}

.modal-backdrop.show {
    opacity: 0.6 !important;
}

.pagination {
    font-size: 18px;
    font-weight: 300;
}

.pagination a {
    font-size: 18px;
    font-weight: 400;
    width: 32px;
    height: 32px;
    line-height: 32px;
    display: block;
    text-align: center;
    color: var(--bs-body-color);
    text-decoration: none;
    margin: 0 1px;
    border-radius: 3px !important;
}

.pagination .active {
    background-color: var(--bs-theme) !important;
    color: var(--bs-white) !important;
    line-height: 32px;
}

.pagination .prv {
    float: left;
    background-color: var(--bs-secondary-bg);
    margin-right: 2px;
}

.pagination .nxt {
    float: right;
    background-color: var(--bs-secondary-bg);
    margin-left: 2px;
}

.pagination ul {
    float: left;
    border-radius: 0;
}

.pagination ul li {
    float: left;
}

.pagination ul li a:hover {
    background-color: var(--bs-dark-light);
    color: var(--bs-body-color);
    line-height: 32px;
}

.web-care {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.web-care .content .logo {
    margin-right: auto;
    margin-left: auto;
}

.web-care .content .logo img {
    width: 100%;
    height: 54px;
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / .2));
}

.web-care .content .title {
    font-size: 28px;
    color: var(--bs-body-color);
}

.web-care .content .text {
    font-size: 20px;
    color: var(--bs-secondary);
}

.web-care .content .wc-url a {
    font-size: 19px;
    font-weight: 300;
    height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    padding: 0 10px;
}

.web-care .content .wc-url a:hover {
    background-color: var(--bs-dark-light);
    transition: var(--bs-effect);
}

.order-follow {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.order-follow .title {
    font-size: 28px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.order-follow .text {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-body-color);
}

.mobil-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background-color: var(--bs-white);
    border-top: 1px solid var(--bs-border-color);
    z-index: 20;
    display: none;
}

.mobil-nav .mb-menu {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mobil-nav .mb-menu .mb-item {
    width: 70px;
    height: 60px;
    display: block;
    padding-top: 5px;
    position: relative;
}

.mobil-nav .mb-menu .mb-item .icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--bs-theme);
}

.mobil-nav .mb-menu .mb-item span {
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-body-color);
    display: block;
    text-align: center;
}

.mobil-nav .mb-menu .mb-item .num {
    position: absolute;
    top: 6px;
    right: 8px;
    background-color: var(--bs-theme);
    color: var(--bs-white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
}

.mobil-nav .mb-menu .mb-user {
    width: 80px;
    height: 70px;
    display: block;
    margin-top: -10px;
}

.mobil-nav .mb-menu .mb-user .icon {
    width: 44px;
    height: 44px;
    background-color: var(--bs-body-color);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 3px;
}

.mobil-nav .mb-menu .mb-user span {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-body-color);
    text-align: center;
    display: block;
}

footer .logo img {
    height: 48px;
    width: auto;
}

footer .breadcrumb .breadcrumb-item {
    font-size: 20px;
    font-weight: 300;
    color: var(--bs-secondary);
}

footer .breadcrumb .breadcrumb-item a {
    font-size: 20px;
    font-weight: 400;
    color: var(--bs-body-color);
}

footer .breadcrumb-open {
    display: none;
    width: 100%;
    border-radius: var(--bs-border-radius);
    font-size: 18px;
    font-weight: 500;
}

footer .follow .or {
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-secondary);
}

footer .follow .fw-menu a {
    height: 36px;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--bs-body-color);
    background-color: var(--bs-dark-light);
}

footer .pact-menu {
    display: flex;
    gap: 0 6px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

footer .pact-menu .pact-item {
    height: 45px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

footer .pact-menu .pact-item a {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-body-color);
    padding: 5px 6px;
    text-align: center;
    display: block;
    flex-shrink: 0;
}

footer .copy {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-body-color);
}

footer .copy a {
    font-size: 16px;
    font-weight: 400;
    color: var(--bs-body-color);
}

@media (max-width: 990px) {
    footer .pact-menu {
        overflow-x: auto;
    }
}

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

    footer {
        margin-bottom: 30px;
    }

    footer .breadcrumb-open {
        display: block;
        background-color: var(--bs-dark-light);
    }

    footer .breadcrumb {
        padding: 0;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        display: none;
        width: 100%;
    }

    footer .breadcrumb .breadcrumb-item {
        border-bottom: 1px solid var(--bs-border-color);
        width: 100% !important;
        display: block !important;
    }

    footer .breadcrumb .breadcrumb-item a {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
    }

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

    footer .breadcrumb .breadcrumb-item::before {
        display: none !important;
    }
}

.form__container .head-top {
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
    background-color: var(--bs-light);
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

.form__container .head-top .txt-sm {
    font-size: 15px;
    font-weight: 300;
    color: var(--bs-secondary);
    display: block;
}

.form__container .form-positon {
    position: relative;
}

.form__container .form-positon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
}

.form__container .form-positon .hs-5 {
    height: 50px;
}

.form__container .form-positon .txt-ind {
    text-indent: 35px;
}

.form__container .form-label {
    font-size: 18px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.form__container .form-control {
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 19px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.form__container .form-control:hover {
    border: 2px solid var(--bs-border-color);
    background-color: #fff0;
    transition: var(--bs-effect);
}

.form__container .form-control:focus {
    background-color: #fff0;
    box-shadow: none !important;
}

.form__container .form-control::placeholder {
    font-size: 19px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.form__container .form-select {
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.form__container .form-select:hover {
    border: 2px solid var(--bs-border-color);
    background-color: #fff0;
    transition: var(--bs-effect);
}

.form__container .form-select:focus {
    background-color: #fff0;
    box-shadow: none !important;
}

.form__container .form-select::placeholder {
    font-size: 20px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.form__container .input-group-text {
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 19px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.form__container .txt-url {
    color: var(--bs-theme-color);
    font-weight: 400;
}

.form__container .btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--bs-white) !important;
    background-color: var(--bs-theme) !important;
    border-color: var(--bs-theme) !important;
    box-shadow: var(--bs-box-shadow);
}

.account-container .form-screen {
    width: 100%;
    max-width: 500px;
}

.account-container .form-screen .logo {
    text-align: center;
}

.account-container .form-screen .logo img {
    height: 54px;
    width: 100%;
}

.account-container .form-screen .sign-top {
    display: flex;
    background-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

.account-container .form-screen .sign-top a {
    height: 44px;
    font-size: 19px;
    font-weight: 500;
    color: var(--bs-body-color);
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-sm);
}

.account-container .form-screen .sign-top .active {
    background-color: var(--bs-white);
}

.account-container .form-screen .form-group {
    position: relative;
}

.account-container .form-screen .form-group span {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
}

.account-container .form-screen .form-control {
    height: 50px;
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .form-screen .txt-in {
    text-indent: 35px;
}

.account-container .form-screen .form-control:hover {
    border: 2px solid var(--bs-border-color);
    background-color: #fff0;
    transition: var(--bs-effect);
}

.account-container .form-screen .form-control:focus {
    background-color: #fff0;
    box-shadow: none;
}

.account-container .form-screen .form-control::placeholder {
    font-size: 20px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .form-screen .btn-sign {
    height: 48px;
    background-color: var(--bs-theme);
    border-color: var(--bs-theme);
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-white);
}

.account-container .form-screen .text-url a {
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.account-container .form-screen .text-small {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .form-screen .alert {
    font-size: 18px;
    font-weight: 300;
}

.account-container .account-stun {
    position: relative;
    width: 300px;
    flex-shrink: 0;
}

.account-container .account-stun .account-menu {
    position: sticky;
    top: 15px;
}

.account-container .account-stun .account-menu .user-scrn {
    display: flex;
    align-items: center;
}

.account-container .account-stun .account-menu .user-scrn .scrn-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    width: 60px;
    height: 60px;
    background-color: var(--bs-body-color);
    color: var(--bs-white);
    border-radius: 50%;
}

.account-container .account-stun .account-menu .user-scrn .scrn-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-stun .account-menu .user-scrn .scrn-title span {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    display: block;
}

.account-container .account-stun .menu-head {
    border-radius: var(--bs-border-radius);
    font-size: 21px;
    font-weight: 500;
    color: var(--bs-white);
    background-color: var(--bs-body-color);
    display: none;
}

.account-container .account-stun .list-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.account-container .account-stun .list-menu .menu-item a {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 19px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.account-container .account-stun .list-menu .menu-item a:hover {
    color: var(--bs-theme);
    background-color: var(--bs-secondary-bg);
    transition: var(--bs-effect);
}

.account-container .account-stun .list-menu .active a {
    color: var(--bs-theme) !important;
    background-color: var(--bs-secondary-bg) !important;
}

.account-container .account-stun .list-menu .menu-item .bi {
    font-size: 22px;
    margin-right: 10px;
}

.account-container .account-body .body-top .txt-h1 {
    font-size: 30px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .body-top .txt-p {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .account-body .acnt-widget {
    position: relative;
    padding: 15px;
    border: 1px solid var(--bs-border-color);
    height: 150px;
    border-radius: var(--bs-border-radius);
    display: block;
    cursor: pointer;
}

.account-container .account-body .acnt-widget:hover {
    border-color: var(--bs-theme);
    box-shadow: var(--bs-box-shadow);
    transition: var(--bs-effect);
}

.account-container .account-body .acnt-widget .w-icon {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 44px;
    color: var(--bs-theme);
}

.account-container .account-body .acnt-widget .w-num {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 70px;
    color: var(--bs-body-color);
}

.account-container .account-body .acnt-widget .w-title {
    position: absolute;
    bottom: 15px;
    right: 25px;
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .acnt-widget .w-title span {
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .account-body .order-list .order-item {
    border: 2px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
}

.account-container .account-body .order-list .order-item a {
    padding: 15px;
}

.account-container .account-body .order-list .order-item:hover {
    border-color: var(--bs-theme);
    box-shadow: var(--bs-box-shadow);
    transition: var(--bs-effect);
}

.account-container .account-body .order-list .order-item .order-img {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    margin-left: -15px;
    border: 2px solid var(--bs-white);
    box-shadow: var(--bs-box-shadow-xm);
}

.account-container .account-body .order-list .order-item .order-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-container .account-body .order-list .order-item .order-img:first-child {
    margin-left: 0;
}

.account-container .account-body .order-list .order-item .img-p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 50%;
    margin-left: -15px;
    font-size: 24px;
    color: var(--bs-body-color);
    background-color: var(--bs-white);
    border: 2px solid var(--bs-white);
}

.account-container .account-body .order-list .order-item .order-col-1 {
    width: 160px;
}

.account-container .account-body .order-list .order-item .order-col-2 {
    width: 180px;
}

.account-container .account-body .order-list .order-item .txt-h1 {
    font-size: 19px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .order-list .order-item .txt-p {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .account-body .order-list .order-item .txt-price {
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .acnt-address .addr-wgt {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
}

.account-container .account-body .acnt-address .addr-wgt:hover {
    border-color: var(--bs-theme);
    transition: var(--bs-effect);
    box-shadow: var(--bs-box-shadow);
}

.account-container .account-body .acnt-address .addr-wgt .title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .acnt-address .addr-wgt .name {
    font-size: 19px;
    font-weight: 400;
    color: var(--bs-secondary);
}

.account-container .account-body .acnt-address .addr-wgt .address {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .account-body .acnt-address .addr-wgt .dropdown {
    position: absolute;
    top: 15px;
    right: 15px;
}

.account-container .account-body .acnt-address .addr-wgt .dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
}

.account-container .account-body .acnt-address .addr-wgt .dropdown .dropdown-toggle::after {
    display: none;
}

.account-container .account-body .chat-container {
    width: 100% !important;
    max-height: 450px;
    overflow-y: scroll;
}

.account-container .account-body .chat-container::-webkit-scrollbar {
    width: 6px;
}

.account-container .account-body .chat-container::-webkit-scrollbar-track {
    background: var(--bs-secondary-bg);
}

.account-container .account-body .chat-container::-webkit-scrollbar-thumb {
    background: var(--bs-dark-light);
}

.account-container .account-body .chat-container::-webkit-scrollbar-thumb:hover {
    background: var(--bs-dark-light);
    opacity: .5;
}

.account-container .account-body .chat-container .chat-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.account-container .account-body .chat-container .chat-message.left {
    justify-content: flex-start;
}

.account-container .account-body .chat-container .chat-message.right {
    justify-content: flex-end;
    text-align: right;
}

.account-container .account-body .chat-container .chat-message.left .message {
    min-width: 400px;
    background-color: #e9e9e9;
    border-radius: 10px;
    padding: 10px;
    margin-left: 10px;
}

.account-container .account-body .chat-container .chat-message.left .avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-white);
    background-color: var(--bs-theme);
    border-radius: 50%;
    flex-shrink: 0;
}

.account-container .account-body .chat-container .chat-message.right .message {
    min-width: 400px;
    background-color: #e0f7fa;
    border-radius: 10px;
    padding: 10px;
    margin-right: 10px;
}

.account-container .account-body .chat-container .chat-message.right .avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-white);
    background-color: var(--bs-body-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.account-container .account-body .chat-container .chat-message .message .m-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .chat-container .chat-message .message .m-title span {
    font-size: 16px;
    font-weight: 200;
    color: var(--bs-secondary);
}

.account-container .account-body .chat-container .chat-message .message .m-p {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-body-color);
}

.account-container .account-body .chat-container .chat-message .message .m-footer {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .account-body .chat-send .form-control {
    height: 90px;
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
    resize: none;
}

.account-container .account-body .chat-send .form-control:hover {
    border: 2px solid var(--bs-border-color);
    background-color: #fff0;
    transition: var(--bs-effect);
}

.account-container .account-body .chat-send .form-control::placeholder {
    font-weight: 300;
    color: var(--bs-secondary);
}

.account-container .account-body .chat-send .form-control:focus {
    background-color: #fff0;
    box-shadow: none;
}

.account-container .account-body .chat-send .input-group-text {
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.account-container .account-body .table .tbl-img {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.account-container .account-body .table .tbl-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1299px) {
    .account-container .account-stun {
        width: 260px;
    }
}

@media (max-width: 990px) {
    .account-container .account-stun {
        width: 100%;
    }

    .account-container .account-stun .menu-head {
        display: flex;
    }

    .account-container .account-stun .account-menu {
        width: 100%;
    }

    .account-container .account-stun .list-menu {
        display: none;
    }

    .account-container .account-body .order-list .order-item {
        width: 990px;
    }
}

@media (max-width: 578px) {
    .account-container .account-body .chat-container .chat-message.left .message {
        min-width: auto;
    }

    .account-container .account-body .chat-container .chat-message.right .message {
        min-width: auto;
    }
}

.order-modal .order-top .top-item {
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 1;
}

.order-modal .order-top .top-item::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    transform: translateX(0%);
    width: 100%;
    height: 4px;
    background-color: var(--bs-dark-light);
    z-index: -1;
}

.order-modal .order-top .top-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 25px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius-lg);
    margin-bottom: 5px;
}

.order-modal .order-top .top-item span {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
}

.order-modal .order-top .done {
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 1;
}

.order-modal .order-top .done::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    transform: translateX(0%);
    width: 100%;
    height: 4px;
    background-color: var(--bs-success);
    z-index: -1;
}

.order-modal .order-top .done .icon {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    font-weight: 500 !important;
}

.order-modal .order-top .done span {
    font-weight: 500;
}

.order-modal .order-top .active {
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 1;
}

.order-modal .order-top .active::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    transform: translateX(0%);
    width: 100%;
    height: 4px;
    background-color: var(--bs-success);
    z-index: -1;
}

.order-modal .order-top .active .icon {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
}

.order-modal .order-top .active span {
    font-weight: 500;
}

.order-modal .order-total>ul {
    width: 100%;
    max-width: 360px;
}

.order-modal .order-total>ul .price {
    font-size: 21px;
    font-weight: 400;
}

.order-modal .order-total>ul .price span {
    font-size: 17px;
    font-weight: 300;
}

.order-modal .order-address {
    font-size: 18px;
    font-weight: 300;
    background-color: #e2e3e5;
    color: var(--bs-body-color);
}

.order-modal .order-address h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.order-modal .order-cargo h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.order-modal .modal-footer {
    text-align: center !important;
    font-size: 16px;
    justify-content: flex-start !important;
}

.boxed-body .box-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.boxed-body .box-order {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.boxed-body .box-order .box-menu {
    position: sticky;
    top: 30px;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-xm);
    border-radius: var(--bs-border-radius);
}

.boxed-body .box-order .box-menu .txt-h1 {
    font-size: 20px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.boxed-body .box-order .box-menu .txt-price strong {
    font-size: 28px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.boxed-body .box-order .box-menu .txt-price {
    font-size: 20px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.boxed-body .box-order .box-menu .txt-btn {
    background-color: var(--bs-dark-light);
    color: var(--bs-body-color);
    padding: 10px;
    border-radius: var(--bs-border-radius-sm);
    font-size: 18px;
    font-weight: 300;
}

.boxed-body .box-order .box-menu .txt-btn span {
    float: right;
    font-weight: 500;
}

.boxed-body .box-order .box-menu .txt-small {
    color: var(--bs-secondary);
    font-size: 14px;
    font-weight: 300;
}

.boxed-body .box-list .box-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.boxed-body .box-list .box-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.boxed-body .box-list .box-item:hover {
    border-color: var(--bs-theme) !important;
    box-shadow: var(--bs-box-shadow);
    transition: var(--bs-effect);
    cursor: pointer;
}

.boxed-body .box-list .box-item .box-title {
    font-size: 19px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.boxed-body .box-list .box-item .box-title .txt-sm {
    font-size: 14px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.boxed-body .box-list .box-item .box-img {
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: 50%;
}

.boxed-body .box-list .box-item .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.boxed-body .box-list .box-item .quantity-button {
    width: 30px;
    height: 36px;
    background-color: var(--bs-dark-light);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

.boxed-body .box-list .box-item .quantity-button:hover {
    background-color: var(--bs-theme);
    border: 1px solid var(--bs-theme);
    color: var(--bs-white);
    transition: var(--bs-effect);
}

.boxed-body .box-list .box-item .quantity-input {
    width: 44px;
    height: 36px;
    text-align: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 0 !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.boxed-body .box-list .box-item .quantity-input::-webkit-outer-spin-button,
.boxed-body .box-list .box-item .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.boxed-body .box-list .box-item .box-price {
    text-align: end;
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.boxed-body .box-list .box-item .box-price span {
    font-size: 18px;
    font-weight: 300;
}

.boxed-body .box-list .box-item .box-price .p-sm {
    font-size: 15px;
    font-weight: 300;
    color: var(--bs-secondary);
    padding-right: 15px;
}

.boxed-body .box-list .box-non {
    font-size: 22px;
    font-weight: 300;
}

.boxed-body .box-list .box-non .d-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    font-size: 42px;
    color: var(--bs-secondary);
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
}

.boxed-body .box-list .box-non .txt-h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-body-color);
    display: block;
}

.boxed-body .box-list .box-non .txt-p {
    font-size: 18px;
    font-weight: 300;
    color: var(--bs-secondary);
    display: block;
}

.boxed-body .order-payment .txt-h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.boxed-body .order-payment .order-small {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
}

.boxed-body .order-payment .bank-number {
    background-color: var(--bs-light);
}

.boxed-body .order-payment .bank-number .or {
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.boxed-body .order-payment .bank-number p {
    margin: 0 !important;
}

.boxed-body .order-payment .scs-icon {
    font-size: 60px;
    color: #66c21b;
}

.boxed-body .order-payment .scs-title {
    font-size: 28px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.boxed-body .form__container .form-floating .form-select {
    height: 80px;
}

.boxed-body .form__container .form-floating>.form-select~label::after {
    position: absolute;
    inset: 1rem .375rem;
    z-index: -1;
    height: 1.7em;
    content: "";
    background-color: #fff0;
    border-radius: var(--bs-border-radius);
}

.boxed-body .form__container .input-group .input-group-text {
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-body-color);
}

@media (max-width: 990px) {
    .boxed-body .box-order {
        max-width: 100% !important;
    }
}

@media (max-width: 1199px) {
    .boxed-body .box-order {
        max-width: 300px;
    }
}

.page-loader {
    position: fixed;
    z-index: 50000;
    background: rgba(var(--bs-white-rgb), .5);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-loader img {
    height: 80px;
}

.alert__post {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.alert__post .post-body {
    width: 100%;
    max-width: 500px;
    background-color: var(--bs-body-bg);
}

.alert__post .post-body h1 {
    font-size: 28px;
    font-weight: 500;
}

.alert__post .post-body p {
    font-size: 19px;
    font-weight: 300;
    line-height: 1.25 !important;
}

.alert__post .post-body .btn-alert {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 30px;
    background-color: var(--bs-theme);
    color: var(--bs-white);
    font-size: 18px;
    font-weight: 400;
    border: none;
}

.alert__post .post-body .btn-scs {
    height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 30px;
    background-color: #73AF55;
    color: var(--bs-white);
    font-size: 18px;
    font-weight: 400;
    border: none;
}

.alert__post .form-checked svg {
    width: 70px;
    height: 70px;
    display: block;
    margin: 0 auto;
}

.alert__post .form-checked .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.alert__post .form-checked .circle {
    animation: dash 0.9s ease-in-out;
}

.alert__post .form-checked .line {
    stroke-dashoffset: 1000;
    animation: dash 0.9s 0.35s ease-in-out forwards;
}

.alert__post .form-checked .check {
    stroke-dashoffset: -100;
    animation: dash-check 0.9s 0.35s ease-in-out forwards;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }

    100% {
        stroke-dashoffset: 900;
    }
}

.shadow-alert {
    animation: svg-shadow 1s ease-in-out infinite alternate;
}

@keyframes svg-shadow {

    0%,
    30%,
    50% {
        opacity: .5;
        filter: drop-shadow(0 0 0 var(--bs-white)) drop-shadow(0 0 1px rgba(var(--bs-danger-rgb), .3)) drop-shadow(0 0 2px rgba(var(--bs-danger-rgb), .3));
    }

    40%,
    60% {
        opacity: .99;
        filter: drop-shadow(0 0 4px var(--bs-white)) drop-shadow(0 0 3px rgb(var(--bs-danger-rgb), .3)) drop-shadow(0 0 6px rgb(var(--bs-danger-rgb), .3));
    }
}

.alert-top {
    -webkit-transform: translatey(0);
    -ms-transform: translatey(0);
    transform: translatey(0);
    -webkit-animation: alert-top 0.5s ease-in-out infinite;
    animation: alert-top 0.5s ease-in-out infinite;
}

@keyframes alert-top {
    0% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
    }

    50% {
        -webkit-transform: translatey(-3px);
        transform: translatey(-3px);
    }

    100% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
    }
}

@media (max-width: 568px) {
    .d-n-sm {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .d-n-md {
        display: none !important;
    }
}

@media (max-width: 990px) {
    .d-n-lg {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .d-n-xl {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    .d-n-xxl {
        display: none !important;
    }

    .container-xxl {
        max-width: 1600px !important;
    }
}

img.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: scale(0.95);
}

img.lazy.lazyload {
    opacity: 1;
    transform: scale(1);
}

.wa-me {
    position: fixed;
    bottom: 15px;
    right: 15px;
    height: 44px;
    display: flex;
    align-items: center;
    background-color: var(--bs-dark);
    color: var(--bs-white);
    border-radius: var(--bs-border-radius-pill);
    font-size: 19px;
    z-index: 5;
    padding-right: 15px;
    box-shadow: var(--bs-box-shadow-lg);
}

.wa-me:hover {
    background-color: var(--bs-theme);
    transition: var(--bs-effect);
}

.wa-me img {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: -3px;
    margin-right: 5px;
    background-color: var(--bs-white);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .wa-me {
        bottom: 75px;
    }
}

.lazyload {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--bs-body-color);
}

.lazyload.loaded {
    background-color: transparent;
    transition: opacity 0.2s ease-in;
    opacity: 1;
}

.lazyload:not(.loaded) {
    opacity: 0;
}

/* ========== DATAKALE HERO V6 STYLES ========== */
:root {
    --datakale-orange: #f39200;
    /* Logonuzdan Alınan Turuncu Renk */
}

/* Ana Hero Alanı */
.hero-v6 {
    position: relative;
    width: 100%;
    padding: 100px 0;
    display: flex;
    align-items: center;
    min-height: 85vh;
    background-color: #f8f9fa;
    overflow: hidden; /* <<<<<< DEĞİŞTİRİLDİ */
}

/* Ana Başlık ve Alt Başlık */
.hero-title-v6 {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 54px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.hero-title-v6 strong {
    font-weight: 700;
}

.hero-subtitle-v6 {
    font-size: 22px;
    font-weight: 400;
    color: var(--datakale-orange);
    /* DEĞİŞTİ */
    min-height: 33px;
    margin-top: 15px;
}

.cursor-v6 {
    display: inline-block;
    background-color: var(--datakale-orange);
    /* DEĞİŞTİ */
    width: 3px;
    height: 22px;
    vertical-align: middle;
    animation: blink-v6 1s infinite;
}

@keyframes blink-v6 {
    50% {
        opacity: 0;
    }
}

/* Hizmetler ve Ürünler Listesi */
.content-list-v6 .list-title-v6 {
    font-size: 24px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bs-border-color);
}

.content-list-v6 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-list-v6 ul li {
    margin-bottom: 15px;
}

.content-list-v6 ul li a {
    color: var(--bs-secondary);
    font-size: 20px;
    font-weight: 400;
    transition: var(--bs-effect);
    position: relative;
    padding-left: 28px;
}

.content-list-v6 ul li a::before {
    font-family: "bootstrap-icons" !important;
    content: "\F285";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--datakale-orange);
    /* DEĞİŞTİ */
    font-size: 18px;
    transition: var(--bs-effect);
}

.content-list-v6 ul li a:hover {
    color: var(--bs-theme);
}

.content-list-v6 ul li a:hover::before {
    transform: translateY(-50%) translateX(4px);
}

/* Öne Çıkan Projeler Kartları */
.projects-wrapper-v6 {
    margin-top: 0;
}

.projects-wrapper-v6 .list-title-v6 {
    font-size: 24px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 20px;
}

.project-card-v6 {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    margin-bottom: 15px;
    transition: var(--bs-effect);
}

.project-card-v6:hover {
    transform: translateY(-5px);
    box-shadow: var(--bs-box-shadow-xm);
    border-color: var(--bs-theme);
    cursor: pointer;
}

.project-card-v6 i {
    font-size: 30px;
    margin-right: 20px;
    color: var(--datakale-orange);
    /* DEĞİŞTİ */
    margin-top: 5px;
}

.project-card-v6 h4 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--bs-body-color);
}

.project-card-v6 p {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.4;
    margin: 0;
}


/* ========== YENİ EKLENEN DÜĞME STİLLERİ ========== */

/* Düğmeleri içeren genel grup stili */
.button-group-v6 {
    display: flex;
    flex-direction: column; /* Düğmeleri alt alta sıralar */
    gap: 12px; /* Düğmeler arasına boşluk ekler */
}

/* Genel düğme stili */
.hero-button-v6 {
    display: inline-block;
    padding: 12px 20px;
    background-color: #f8f9fa; /* Açık gri arka plan */
    color: #495057; /* Koyu gri metin rengi */
    border: 1px solid #dee2e6; /* İnce gri kenarlık */
    border-radius: 8px; /* Köşeleri yuvarlatır */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Hafif gölge */
}

/* Fare ile üzerine gelindiğinde düğmenin alacağı stil */
.hero-button-v6:hover {
    background-color: #e9ecef; /* Arka planı hafif koyulaştırır */
    border-color: #adb5bd; /* Kenarlık rengini belirginleştirir */
    color: #212529; /* Metin rengini koyulaştırır */
    transform: translateY(-2px); /* Hafif yukarı kalkma efekti */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Gölgeyi belirginleştirir */
}

/* ========== DÜĞME İÇİ İKON STİLLERİ (YEŞİL RENK) ========== */

.hero-button-v6 {
    text-align: left;
    justify-content: flex-start;
}

/* Düğmelerin içindeki ikonların boyutu ve rengi */
.hero-button-v6 i {
    font-size: 1.3rem; /* Metin boyutundan bir tık büyük */
    color: var(--bs-success, #66c21b); /* TURUNCU RENK YEŞİL İLE DEĞİŞTİRİLDİ */
    transition: transform 0.3s ease;
}

/* Fare ile düğmenin üzerine gelindiğinde ikona hafif bir efekt verir */
.hero-button-v6:hover i {
    transform: scale(1.1); /* İkonu hafifçe büyütür */
}
/* ========== BAŞLIK İKONLARI VE HİZALAMA ========== */

/* Başlıklara eklenen ikonların rengini ve boyutunu ayarlar */
.list-title-v6 i {
    font-size: 1.5rem; /* Başlık metniyle orantılı bir boyut */
    color: var(--datakale-orange, #f39200); /* TEMA RENGİ İLE GÜNCELLENDİ */
}

/* Mobil görünümde (.hero-v6'daki text-align:center'ı ezmek için) 
   Hizmetler ve Ürünler sütunlarının içeriğini sola yaslar */
@media (max-width: 991px) {
    .content-list-v6 {
        text-align: left;
    }
}

/* Hareketli Arka Plan Animasyonu (Mavi Renkli) */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.animated-bg span {
    position: absolute;
    display: block;
    list-style: none;
    background: rgba(29, 142, 196, 0.15);
    /* Mavi Renk */
    animation: animate-bg 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
}

.animated-bg span:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.animated-bg span:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.animated-bg span:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.animated-bg span:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.animated-bg span:nth-child(5) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 3s;
}

@keyframes animate-bg {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}

/* Mobil Uyum (Responsive) */
@media (max-width: 991px) {
    .hero-v6 {
        padding: 60px 0;
        text-align: center;
    }

    .hero-title-v6 {
        font-size: 40px;
    }

    .content-list-v6 {
        text-align: left;
    }

    .projects-wrapper-v6 {
        margin-top: 50px;
    }
}

/* ========== DATAXPRO HİBRİT PAKET SUNUMU ========== */
.hybrid-pricing-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    position: relative;
    z-index: 1;
}

/* Sol Sütun: Açıklama ve Ortak Özellikler */
.features-column .section-title {
    font-size: 42px;
}

.features-column .section-subtitle {
    font-size: 18px;
}

.common-features-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.common-features-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.common-features-list li {
    font-size: 18px;
    color: var(--bs-secondary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.common-features-list li i {
    color: var(--bs-success);
    /* Ortak özelliklerde yeşil check kalsın */
    margin-right: 12px;
    font-size: 20px;
}

/* Sağ Sütun: Paket Kartları */
.pricing-card-v2 {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    position: relative;
}

.pricing-card-v2.recommended {
    border: 2px solid var(--datakale-orange, #f39200);
}

.recommend-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--datakale-orange, #f39200);
    color: #fff;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--bs-border-radius-pill);
}

.package-name {
    font-size: 24px;
    font-weight: 600;
}

.package-price {
    font-size: 38px;
    font-weight: 700;
    margin: 15px 0;
}

.package-price span {
    font-size: 20px;
}

.package-price small {
    font-size: 15px;
    font-weight: 400;
    color: var(--bs-secondary);
    display: block;
}

.btn-pricing {
    background-color: var(--bs-body-color);
    color: #fff;
    border: none;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    transition: var(--bs-effect);
}

.btn-pricing:hover {
    background-color: var(--bs-theme);
    color: #fff;
}

.pricing-card-v2.recommended .btn-pricing {
    background-color: var(--datakale-orange, #f39200);
}

.package-diff {
    list-style: none;
    padding: 0;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--bs-border-color);
}

.package-diff li {
    font-size: 16px;
    color: var(--bs-secondary);
    margin-bottom: 10px;
}

.package-diff li strong {
    color: var(--bs-body-color);
}

/* Süzülme Animasyonu */
@keyframes float-animation {
    0% {
        transform: translateY(0px);
    }

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

    100% {
        transform: translateY(0px);
    }
}

.pricing-card-v2.floating {
    animation: float-animation 6s ease-in-out infinite;
}

/* Farklı zamanlamalarla başlamaları için */
.pricing-card-v2.floating:nth-child(2) {
    animation-delay: 2s;
}

.pricing-card-v2.floating:nth-child(3) {
    animation-delay: 4s;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .features-column {
        text-align: center;
        margin-bottom: 50px;
    }

    .pricing-card-v2 {
        margin-bottom: 30px;
    }
}

/* ========== İNŞAAT PAKET SUNUMU (Yeşil Tema) ========== */
.insaat-section {
    padding-top: 0;
    /* Üstteki bölümle arasında boşluk olmasın diye */
    background-color: #ffffff;
    /* Arka planı beyaza çevirelim */
    border-top: 1px solid var(--bs-border-color);
    /* İki bölümü ayırmak için ince bir çizgi */
}

/* Önerilen Paketin Çerçevesini Yeşil Yap */
.insaat-section .pricing-card-v2.recommended {
    border-color: var(--bs-success, #66c21b);
}

/* "Popüler" Rozetini Yeşil Yap */
.insaat-section .recommend-badge {
    background-color: var(--bs-success, #66c21b);
}

/* Önerilen Paketin Butonunu Yeşil Yap */
.insaat-section .pricing-card-v2.recommended .btn-pricing {
    background-color: var(--bs-success, #66c21b);
}

/* ========== WHATSAPP CTA BÖLÜMÜ ========== */
.whatsapp-cta-section {
    padding: 20px 0;
    background-color: var(--bs-body-color);
    /* Ana Koyu Tema Rengi */
    color: #fff;
}

.cta-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-icon {
    font-size: 40px;
    color: #25D366;
    /* WhatsApp Yeşili */
}

.cta-text h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.cta-text p {
    font-size: 17px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.btn-whatsapp {
    background-color: #25D366;
    color: #fff;
    border-radius: var(--bs-border-radius-pill);
    padding: 10px 25px;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    /* Küçülmesini engeller */
    transition: var(--bs-effect);
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    /* WhatsApp Koyu Yeşil */
    color: #fff;
    transform: scale(1.05);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    .cta-icon {
        font-size: 36px;
    }

    .cta-text h3 {
        font-size: 20px;
    }

    .btn-whatsapp {
        margin-top: 15px;
    }
}

/* 1. Hero ve E-Ticaret bölümü arasındaki boşluğu azaltır */
.hybrid-pricing-section {
    padding-top: 10px;
    /* 100px'den 20px'e düşürüldü */
}

/* 2. CTA bandı ve İnşaat bölümü arasındaki boşluğu azaltır */
.insaat-section {
    padding-top: 60px;
    /* Daha önce 80px'di, şimdi 60px */
}

/* ========== İNTERAKTİF PROJE KONSOLU V2 (Gelişmiş) ========== */
.project-tabs-section {
    padding-top: 20px;
    /* 100px olan varsayılan değeri 40px'e düşürüyoruz */
    padding-bottom: 60px;
    /* Alt boşluğu da biraz azaltalım */
    background-color: #ffffff;
}

/* Sol Taraf: Navigasyon (Aynı kalıyor) */
.project-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.project-nav-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: var(--bs-effect);
    background-color: #fff;
}

.project-nav-item:hover,
.project-nav-item.is-active {
    border-color: var(--datakale-orange, #f39200);
    box-shadow: var(--bs-box-shadow-xm);
    transform: translateX(5px);
}

.project-nav-item i {
    font-size: 32px;
    margin-right: 20px;
    color: var(--datakale-orange, #f39200);
}

.project-nav-item h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
}

.project-nav-item p {
    font-size: 16px;
    margin: 0;
    color: var(--bs-secondary);
}

/* Sağ Taraf: İçerik Alanı */
.project-content-wrapper {
    position: relative;
}

.project-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s;
}

.project-pane.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Sağ Taraf: Yeni Özellikler Listesi */
.pane-features h4 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.pane-features-list {
    list-style: none;
    padding: 0;
}

.pane-features-list li {
    font-size: 18px;
    color: var(--bs-secondary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.pane-features-list li i {
    color: var(--datakale-orange, #f39200);
    margin-right: 12px;
    font-size: 20px;
}

/* Sağ Taraf: Yeni Swiper Slider Stilleri */
.project-swiper {
    width: 100%;
    height: 450px;
    /* Slider yüksekliği */
    border-radius: var(--bs-border-radius-lg);

}

.project-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-swiper .swiper-pagination-bullet-active {
    background-color: var(--datakale-orange, #f39200);
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .project-nav {
        flex-direction: row;
        justify-content: center;
        margin-bottom: 30px;
    }

    .project-nav-item {
        flex-direction: column;
        text-align: center;
    }

    .project-nav-item i {
        margin: 0 0 10px 0;
    }

    .project-pane {
        position: relative;
        display: none;
    }

    .project-pane.is-active {
        display: block;
    }

    .pane-features {
        text-align: center;
        margin-bottom: 30px;
    }
}

/* ========== SUNUCU HİZMETLERİ BÖLÜMÜ (Renkli Versiyon) ========== */
.server-pricing-section {
    padding: 60px 0;
    background-color: #fffff;
    position: relative;
    z-index: 1;
}

/* Tab Navigasyonu (Ortalandı) */
.pricing-tabs-nav {
    display: flex;
    justify-content: center;
    /* <<< HİZALAMA SORUNU GİDERİLDİ */
    flex-wrap: wrap;
    /* Mobilde taşmayı engeller */
    gap: 15px;
    margin-bottom: 50px;
    background-color: #e9ecef;
    padding: 10px;
    border-radius: var(--bs-border-radius-pill);
}

.pricing-tabs-nav .btn {
    border: none;
    background-color: transparent;
    color: var(--bs-secondary);
    font-weight: 500;
    font-size: 18px;
    padding: 10px 25px;
    border-radius: var(--bs-border-radius-pill);
    transition: var(--bs-effect);
}

.pricing-tabs-nav .btn.is-active,
.pricing-tabs-nav .btn:hover {
    background-color: #ffffff;
    color: var(--bs-body-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

/* Tab İçerik Alanı */
.pricing-tabs-content {
    position: relative;
}

.pricing-pane {
    display: none;
    animation: fadeIn 0.5s ease;
}

.pricing-pane.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================= */
/* ========== RENK CÜMBÜŞÜ KODLARI BURADA ========== */
/* ================================================= */
/* Varsayılan (Web Sunucuları - Mavi) */
#pane-web .recommended-blue {
    border-color: #1d8ec4;
}

#pane-web .recommended-blue .recommend-badge {
    background-color: #1d8ec4;
}

#pane-web .recommended-blue .btn-pricing {
    background-color: #1d8ec4;
}

#pane-web .recommended-blue .btn-pricing:hover {
    opacity: 0.9;
    background-color: #1d8ec4;
}

/* Yayın Sunucuları - Yeşil */
#pane-streaming .pricing-card-v2.recommended-blue {
    border-color: var(--bs-success, #66c21b);
}

#pane-streaming .recommended-blue .recommend-badge {
    background-color: var(--bs-success, #66c21b);
}

#pane-streaming .recommended-blue .btn-pricing {
    background-color: var(--bs-success, #66c21b);
}

#pane-streaming .recommended-blue .btn-pricing:hover {
    background-color: var(--bs-success, #66c21b);
}

/* Yapay Zeka (GPU) Sunucuları - Turuncu */
#pane-gpu .pricing-card-v2.recommended-blue {
    border-color: var(--datakale-orange, #f39200);
}

#pane-gpu .recommended-blue .recommend-badge {
    background-color: var(--datakale-orange, #f39200);
}

#pane-gpu .recommended-blue .btn-pricing {
    background-color: var(--datakale-orange, #f39200);
}

#pane-gpu .recommended-blue .btn-pricing:hover {
    background-color: var(--datakale-orange, #f39200);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .pricing-tabs-nav {
        flex-direction: column;
        border-radius: var(--bs-border-radius);
    }
}

/* =================================================================== */
/* ========== YAPAY ZEKA OTOMASYONLARI V7 (ANİMASYONLU İKON) ========== */
/* =================================================================== */
.ai-features-section {
    padding: 100px 0;
    background-color: #f8f9fa;
}

.ai-feature-card-v2 {
    background-color: #ffffff;
    border-radius: var(--bs-border-radius-xl);
    border: 1px solid var(--bs-border-color);
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Arka plan animasyonu için gerekli */
    overflow: hidden;   /* Arka plan animasyonu için gerekli */
}

.ai-feature-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.ai-feature-card-v2.border-orange {
    border-top: 4px solid var(--datakale-orange, #f39200);
}

.ai-feature-card-v2.border-green {
    border-top: 4px solid var(--bs-success, #66c21b);
}

/* KART İÇERİĞİNİN ANİMASYONUN ÜSTÜNDE KALMASINI SAĞLAR */
.ai-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ANİMASYONLU ARKA PLAN ALANI */
.card-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ANİMASYONDAKİ HER BİR İKON */
.card-animated-bg i {
    position: absolute;
    display: block;
    list-style: none;
    bottom: -150px; /* Ekranın altından başlasın */
    color: rgba(0,0,0,0.05); /* Çok silik bir renk */
    animation: animate-card-icon 25s linear infinite;
    font-size: var(--size, 60px); /* Varsayılan ikon boyutu */
}

/* SÜZÜLME ANİMASYONU */
@keyframes animate-card-icon {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-800px) rotate(360deg);
        opacity: 0;
    }
}

/* HER KART İÇİN ÖZEL İKON POZİSYONLARI VE HIZLARI */
.bg-icons-whatsapp i:nth-child(1) { left: 10%; animation-delay: 0s; --size: 80px; }
.bg-icons-whatsapp i:nth-child(2) { left: 70%; animation-delay: 2s; animation-duration: 15s; --size: 40px; }
.bg-icons-whatsapp i:nth-child(3) { left: 40%; animation-delay: 5s; animation-duration: 20s; --size: 60px; }
.bg-icons-whatsapp i:nth-child(4) { left: 85%; animation-delay: 7s; animation-duration: 18s; --size: 30px; }

.bg-icons-voice i:nth-child(1) { left: 15%; animation-delay: 1s; --size: 70px; }
.bg-icons-voice i:nth-child(2) { left: 75%; animation-delay: 3s; animation-duration: 17s; --size: 50px; }
.bg-icons-voice i:nth-child(3) { left: 35%; animation-delay: 6s; animation-duration: 22s; --size: 40px; }
.bg-icons-voice i:nth-child(4) { left: 90%; animation-delay: 8s; animation-duration: 14s; --size: 60px; }

/* Diğer 4 kart için de benzer şekilde devam edilebilir... Şimdilik kopyalıyorum */
.bg-icons-chatbot i:nth-child(1) { left: 10%; animation-delay: 0s; --size: 80px; }
.bg-icons-chatbot i:nth-child(2) { left: 70%; animation-delay: 2s; animation-duration: 15s; --size: 40px; }
.bg-icons-chatbot i:nth-child(3) { left: 40%; animation-delay: 5s; animation-duration: 20s; --size: 60px; }
.bg-icons-chatbot i:nth-child(4) { left: 85%; animation-delay: 7s; animation-duration: 18s; --size: 30px; }

.bg-icons-scraping i:nth-child(1) { left: 15%; animation-delay: 1s; --size: 70px; }
.bg-icons-scraping i:nth-child(2) { left: 75%; animation-delay: 3s; animation-duration: 17s; --size: 50px; }
.bg-icons-scraping i:nth-child(3) { left: 35%; animation-delay: 6s; animation-duration: 22s; --size: 40px; }
.bg-icons-scraping i:nth-child(4) { left: 90%; animation-delay: 8s; animation-duration: 14s; --size: 60px; }

.bg-icons-social i:nth-child(1) { left: 10%; animation-delay: 0s; --size: 80px; }
.bg-icons-social i:nth-child(2) { left: 70%; animation-delay: 2s; animation-duration: 15s; --size: 40px; }
.bg-icons-social i:nth-child(3) { left: 40%; animation-delay: 5s; animation-duration: 20s; --size: 60px; }
.bg-icons-social i:nth-child(4) { left: 85%; animation-delay: 7s; animation-duration: 18s; --size: 30px; }

.bg-icons-content i:nth-child(1) { left: 15%; animation-delay: 1s; --size: 70px; }
.bg-icons-content i:nth-child(2) { left: 75%; animation-delay: 3s; animation-duration: 17s; --size: 50px; }
.bg-icons-content i:nth-child(3) { left: 35%; animation-delay: 6s; animation-duration: 22s; --size: 40px; }
.bg-icons-content i:nth-child(4) { left: 90%; animation-delay: 8s; animation-duration: 14s; --size: 60px; }


/* ESKİ İÇERİK STİLLERİ (Değişiklik yok) */
.ai-card-title { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.ai-card-desc { font-size: 16px; color: var(--bs-secondary); line-height: 1.6; margin-bottom: 20px; }
.ai-features-list { list-style: none; padding: 0; margin-bottom: 25px; }
.ai-features-list li { font-size: 16px; margin-bottom: 10px; display: flex; }
.ai-features-list li i { color: var(--bs-success); margin-right: 10px; margin-top: 3px; }
.ai-card-buttons { margin-top: auto; padding-top: 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn-whatsapp-ai, .btn-demo-ai { padding: 10px 20px; font-size: 15px; font-weight: 600; border-radius: var(--bs-border-radius-pill); border: 2px solid transparent; transition: var(--bs-effect); }
.btn-whatsapp-ai { background-color: #25D366; color: #fff; }
.btn-whatsapp-ai:hover { background-color: #128C7E; color: #fff; transform: translateY(-2px); }
.btn-whatsapp-ai i { margin-right: 8px; }
.btn-demo-ai { background-color: transparent; border-color: var(--bs-body-color); color: var(--bs-body-color); }
.btn-demo-ai:hover { background-color: var(--bs-body-color); color: #fff; transform: translateY(-2px); }



/* ========== HİZMETLER & ÜRÜNLER (V2) STYLES ========== */
.features-section-v2 {
    padding: 100px 0;
    background-color: #f8f9fa;
    /* Tam beyaz yerine çok hafif kırık bir ton */
    position: relative;
    z-index: 1;
}

/* Bölüm Ana Başlığı */
.section-title {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 20px;
    font-weight: 300;
    color: var(--bs-secondary);
    max-width: 650px;
    margin: 0 auto;
}

/* Grup Başlığı (Hizmetlerimiz / Ürünlerimiz) */
.group-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}

/* Hizmet/Ürün Kart Tasarımı */
.service-card {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 35px 30px;
    text-align: center;
    transition: var(--bs-effect);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--bs-box-shadow-xm);
    border-color: var(--datakale-orange, #f39200);
}

.card-icon {
    font-size: 40px;
    color: var(--datakale-orange, #f39200);
    margin-bottom: 20px;
}

.card-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 15px;
}

.card-text {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: var(--bs-effect);
}

.card-link:hover {
    color: var(--datakale-orange, #f39200);
}

.card-link i {
    vertical-align: middle;
    transition: var(--bs-effect);
}

.card-link:hover i {
    transform: translateX(5px);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .features-section-v2 {
        padding: 60px 15px;
    }

    .section-title {
        font-size: 32px;
    }

    .group-title {
        font-size: 26px;
    }
}

/* ========== NEDEN DATAKALE? (Hakkımızda) BÖLÜMÜ ========== */
.about-us-section {
    padding: 100px 0 40px; 
    background-color: #ffffff;
}

.about-image {
    max-width: 100%; /* Kapsayıcının asla ebeveyninden daha geniş olmamasını sağlar */
    overflow: hidden; /* Bu div içindeki taşmayı gizle */
    line-height: 0; /* Resmin altındaki boşluğu kaldırır */
}
.about-image img {
    display: block; /* Resmin blok seviyesinde olmasını sağlar */
    max-width: 100%; /* Resmin kapsayıcısından taşmamasını sağlar */
    height: auto; /* Oranını korur */
    box-sizing: border-box; /* padding veya border genişliğe dahil edilir */
    /* width: 100%; kuralı yerine max-width: 100%; kullanmak daha güvenlidir. */
}

.about-tabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--bs-border-color);
}

.about-tabs-nav .btn {
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-secondary);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 10px 0;
    margin-right: 20px;
    transition: var(--bs-effect);
}

.about-tabs-nav .btn:hover {
    color: var(--bs-body-color);
}

.about-tabs-nav .btn.is-active {
    color: var(--datakale-orange, #f39200);
    border-bottom-color: var(--datakale-orange, #f39200);
}

.about-tabs-content {
    min-height: 200px;
    /* Sekme geçişlerinde zıplamayı önler */
}





/* ========== SIKÇA SORULAN SORULAR (SSS) BÖLÜMÜ (Animasyonlu ve Düzeltilmiş) ========== */
.faq-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    border-top: 1px solid var(--bs-border-color);
    position: relative;
    overflow: hidden;
}

/* Hareketli Arka Plan Konteyneri */
.faq-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Hareket Eden Her Bir Soru İşareti */
.faq-animated-bg span {
    position: absolute;
    display: block;
    list-style: none;
    bottom: -150px;
    animation: animate-faq-bg 30s linear infinite;
}

/* Soru İşareti Stili */
.faq-animated-bg span::before {
    content: '?';
    font-family: var(--bs-font-two), sans-serif;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05);
    font-size: var(--size);
}

/* GÜNCELLENDİ: Daha Fazla ve Daha Çeşitli Animasyon Stilleri */
.faq-animated-bg span:nth-child(1) {
    left: 10%;
    --size: 80px;
    animation-delay: 0s;
}

.faq-animated-bg span:nth-child(2) {
    left: 20%;
    --size: 30px;
    animation-delay: 2s;
    animation-duration: 15s;
}

.faq-animated-bg span:nth-child(3) {
    left: 70%;
    --size: 40px;
    animation-delay: 4s;
    animation-duration: 25s;
}

.faq-animated-bg span:nth-child(4) {
    left: 40%;
    --size: 60px;
    animation-delay: 0s;
    animation-duration: 22s;
}

.faq-animated-bg span:nth-child(5) {
    left: 85%;
    --size: 150px;
    animation-delay: 3s;
    animation-duration: 35s;
}

.faq-animated-bg span:nth-child(6) {
    left: 5%;
    --size: 50px;
    animation-delay: 7s;
    animation-duration: 28s;
}

.faq-animated-bg span:nth-child(7) {
    left: 90%;
    --size: 70px;
    animation-delay: 5s;
    animation-duration: 20s;
}

.faq-animated-bg span:nth-child(8) {
    left: 50%;
    --size: 35px;
    animation-delay: 10s;
    animation-duration: 18s;
}

/* Animasyon Keyframes (Değişiklik yok) */
@keyframes animate-faq-bg {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-1200px) rotate(360deg);
        opacity: 0;
    }
}

/* İçeriğin animasyonun üzerinde kalmasını sağlar */
.faq-section .container-xxl {
    position: relative;
    z-index: 1;
}

/* Akordiyon Stilleri (Değişiklik yok) */
.accordion {
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-radius: var(--bs-border-radius-lg);
    --bs-accordion-inner-border-radius: var(--bs-border-radius);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23293a4a'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f39200'%3e%3cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z'/%3e%3c/svg%3e");
}

.accordion-item {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 15px;
    border-radius: var(--bs-border-radius-lg) !important;
}

.accordion-button {
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.accordion-button:not(.collapsed) {
    color: var(--datakale-orange, #f39200);
    background-color: #fff;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.7;
}

/* ========== CTA & İLETİŞİM FORMU BÖLÜMÜ V2 (Animasyonlu ve Düzeltilmiş) ========== */
.form-cta-section {
    padding: 100px 0;
    background-color: var(--bs-body-color);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* YENİ EKLENDİ: Arka Plan Animasyonu */
.cta-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cta-animated-bg span {
    position: absolute;
    display: block;
    list-style: none;
    bottom: -150px;
    animation: animate-cta-bg 30s linear infinite;
}

.cta-animated-bg span::before {
    font-family: "bootstrap-icons" !important;
    content: "\F32F";
    /* Bootstrap Icons Mail Simgesi */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.05);
    font-size: var(--size);
}

/* Farklı Boyutlar ve Hızlar */
.cta-animated-bg span:nth-child(1) {
    left: 10%;
    --size: 80px;
    animation-delay: 0s;
}

.cta-animated-bg span:nth-child(2) {
    left: 20%;
    --size: 30px;
    animation-delay: 2s;
    animation-duration: 15s;
}

.cta-animated-bg span:nth-child(3) {
    left: 70%;
    --size: 40px;
    animation-delay: 4s;
    animation-duration: 25s;
}

.cta-animated-bg span:nth-child(4) {
    left: 40%;
    --size: 60px;
    animation-delay: 0s;
    animation-duration: 22s;
}

.cta-animated-bg span:nth-child(5) {
    left: 85%;
    --size: 150px;
    animation-delay: 3s;
    animation-duration: 35s;
}

.cta-animated-bg span:nth-child(6) {
    left: 5%;
    --size: 50px;
    animation-delay: 7s;
    animation-duration: 28s;
}

.cta-animated-bg span:nth-child(7) {
    left: 90%;
    --size: 70px;
    animation-delay: 5s;
    animation-duration: 20s;
}

.cta-animated-bg span:nth-child(8) {
    left: 50%;
    --size: 35px;
    animation-delay: 10s;
    animation-duration: 18s;
}

@keyframes animate-cta-bg {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-1200px) rotate(360deg);
        opacity: 0;
    }
}

/* İçeriğin animasyon üzerinde kalmasını sağlar */
.form-cta-section .container-xxl {
    position: relative;
    z-index: 1;
}

/* Form Stilleri */
.cta-features-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}

.cta-features-list li {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.cta-features-list i {
    color: var(--datakale-orange, #f39200);
    margin-right: 12px;
    font-size: 20px;
}

.form-wrapper {
    background-color: #ffffff;
    padding: 40px;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.form-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 25px;
    text-align: center;
}

.form-wrapper .form-label {
    color: var(--bs-secondary);
    font-size: 15px;
    font-weight: 500;
}

.form-wrapper .form-control {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    height: 50px;
    padding: 10px 15px;
    font-size: 16px;
    color: var(--bs-body-color);
}

.form-wrapper .form-control:focus {
    background-color: #ffffff;
    border-color: var(--datakale-orange, #f39200);
    box-shadow: 0 0 0 0.25rem rgba(243, 146, 0, 0.25);
}

.form-wrapper textarea.form-control {
    height: auto;
}

.btn-cta-submit {
    background-color: var(--datakale-orange, #f39200);
    color: #ffffff;
    padding: 14px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-cta-submit:hover {
    color: #ffffff;
    background-color: #fa9d0a;
    transform: scale(1.02);
}

/* ========== YENİ HEADER NAVİGASYON STİLLERİ ========== */
.header-nav {
    display: flex;
    justify-content: center;
    /* Menüyü ortalamak için */
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 66px;
    /* Header yüksekliği ile aynı */
}

.header-nav ul li {
    display: flex;
    align-items: center;
}

.header-nav ul li a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    font-family: var(--bs-font-two), sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--bs-body-color);
    border-bottom: 3px solid transparent;
    transition: var(--bs-effect);
}

.header-nav ul li a:hover {
    color: var(--datakale-orange, #f39200);
}

.header-nav ul li a.active {
    color: var(--datakale-orange, #f39200);
    border-bottom-color: var(--datakale-orange, #f39200);
}
.about-tabs-content {
    min-height: 200px; /* Sekme geçişlerinde zıplamayı önler */
}
.about-pane {
    display: none;
    animation: fadeIn 0.5s ease;
}
.about-pane.is-active {
    display: block;
}
.about-pane h4 {
    font-size: 26px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 15px;
}
.about-pane p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--bs-secondary);
}



/* =================================================================== */
/* ========== İKİLİ SÖZ BÖLÜMÜ STİLLERİ ========== */
/* =================================================================== */
.quote-section {
    padding: 30px 0;
    background-color: #ffffff; /* Temiz ve ferah bir beyaz arka plan */
}

.elegant-quote {
    border-left: 4px solid var(--datakale-orange, #f39200); /* Ana vurgu rengi */
    padding-left: 40px;
    margin: 0;
    text-align: left;
}

.quote-text {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 38px; /* İki söz sığması için fontu biraz küçülttük */
    font-weight: 300;
    font-style: italic;
    color: var(--bs-body-color);
    margin-bottom: 15px;
    min-height: 30px; /* Eşit yükseklik sağlamak için */
}

.quote-attribution {
    font-family: var(--bs-font-one), sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-secondary);
}

/* İkinci sözün çizgi rengini daha soft bir tona ayarlayalım */
.elegant-quote.quote-secondary {
    border-left-color: #3f4857; /* Gri, ikincil bir renk */
}

/* Mobil cihazlar için düzenlemeler */
@media (max-width: 991px) {
    .quote-section {
        padding: 10px 0;
    }
    .quote-text {
        font-size: 30px;
        min-height: auto; /* Mobilde min-height ihtiyacını kaldır */
    }
    .elegant-quote {
        padding-left: 25px;
    }
    /* İkinci söze üstten boşluk vererek mobilde daha iyi ayrışmasını sağlıyoruz */
    .elegant-quote.quote-secondary {
        margin-top: 30px;
    }
}





/* ========== SIKÇA SORULAN SORULAR (SSS) BÖLÜMÜ (Animasyonlu ve Düzeltilmiş) ========== */

.faq-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    border-top: 1px solid var(--bs-border-color);
    position: relative;
    overflow: hidden;
}

/* Hareketli Arka Plan Konteyneri */
.faq-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Hareket Eden Her Bir Soru İşareti */
.faq-animated-bg span {
    position: absolute;
    display: block;
    list-style: none;
    bottom: -150px;
    animation: animate-faq-bg 30s linear infinite;
}

/* Soru İşareti Stili */
.faq-animated-bg span::before {
    content: '?';
    font-family: var(--bs-font-two), sans-serif;
    font-weight: 700;
    color: rgba(0,0,0,0.05);
    font-size: var(--size);
}

/* GÜNCELLENDİ: Daha Fazla ve Daha Çeşitli Animasyon Stilleri */
.faq-animated-bg span:nth-child(1) { left: 10%; --size: 80px; animation-delay: 0s; }
.faq-animated-bg span:nth-child(2) { left: 20%; --size: 30px; animation-delay: 2s; animation-duration: 15s; }
.faq-animated-bg span:nth-child(3) { left: 70%; --size: 40px; animation-delay: 4s; animation-duration: 25s; }
.faq-animated-bg span:nth-child(4) { left: 40%; --size: 60px; animation-delay: 0s; animation-duration: 22s; }
.faq-animated-bg span:nth-child(5) { left: 85%; --size: 150px; animation-delay: 3s; animation-duration: 35s; }
.faq-animated-bg span:nth-child(6) { left: 5%; --size: 50px; animation-delay: 7s; animation-duration: 28s; }
.faq-animated-bg span:nth-child(7) { left: 90%; --size: 70px; animation-delay: 5s; animation-duration: 20s; }
.faq-animated-bg span:nth-child(8) { left: 50%; --size: 35px; animation-delay: 10s; animation-duration: 18s; }


/* Animasyon Keyframes (Değişiklik yok) */
@keyframes animate-faq-bg {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-1200px) rotate(360deg); opacity: 0; }
}

/* İçeriğin animasyonun üzerinde kalmasını sağlar */
.faq-section .container-xxl {
    position: relative;
    z-index: 1;
}

/* Akordiyon Stilleri (Değişiklik yok) */
.accordion {
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-radius: var(--bs-border-radius-lg);
    --bs-accordion-inner-border-radius: var(--bs-border-radius);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23293a4a'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 16 16' fill='%23f39200'%3e%3cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z'/%3e%3c/svg%3e");
}
.accordion-item {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 15px;
    border-radius: var(--bs-border-radius-lg) !important;
}
.accordion-button {
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-body-color);
}
.accordion-button:not(.collapsed) {
    color: var(--datakale-orange, #f39200);
    background-color: #fff;
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.accordion-body {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.7;
}




/* ========== CTA & İLETİŞİM FORMU BÖLÜMÜ V2 (Animasyonlu ve Düzeltilmiş) ========== */
.form-cta-section {
    padding: 100px 0;
    background-color: var(--bs-body-color);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* YENİ EKLENDİ: Arka Plan Animasyonu */
.cta-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.cta-animated-bg span {
    position: absolute;
    display: block;
    list-style: none;
    bottom: -150px;
    animation: animate-cta-bg 30s linear infinite;
}
.cta-animated-bg span::before {
    font-family: "bootstrap-icons"!important;
    content: "\F32F"; /* Bootstrap Icons Mail Simgesi */
    font-weight: 400;
    color: rgba(255,255,255,0.05);
    font-size: var(--size);
}

/* Farklı Boyutlar ve Hızlar */
.cta-animated-bg span:nth-child(1) { left: 10%; --size: 80px; animation-delay: 0s; }
.cta-animated-bg span:nth-child(2) { left: 20%; --size: 30px; animation-delay: 2s; animation-duration: 15s; }
.cta-animated-bg span:nth-child(3) { left: 70%; --size: 40px; animation-delay: 4s; animation-duration: 25s; }
.cta-animated-bg span:nth-child(4) { left: 40%; --size: 60px; animation-delay: 0s; animation-duration: 22s; }
.cta-animated-bg span:nth-child(5) { left: 85%; --size: 150px; animation-delay: 3s; animation-duration: 35s; }
.cta-animated-bg span:nth-child(6) { left: 5%; --size: 50px; animation-delay: 7s; animation-duration: 28s; }
.cta-animated-bg span:nth-child(7) { left: 90%; --size: 70px; animation-delay: 5s; animation-duration: 20s; }
.cta-animated-bg span:nth-child(8) { left: 50%; --size: 35px; animation-delay: 10s; animation-duration: 18s; }

@keyframes animate-cta-bg {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-1200px) rotate(360deg); opacity: 0; }
}
/* İçeriğin animasyon üzerinde kalmasını sağlar */
.form-cta-section .container-xxl {
    position: relative;
    z-index: 1;
}

/* Form Stilleri */
.cta-features-list { list-style: none; padding: 0; margin-top: 25px; }
.cta-features-list li { font-size: 18px; font-weight: 300; margin-bottom: 15px; display: flex; align-items: center; }
.cta-features-list i { color: var(--datakale-orange, #f39200); margin-right: 12px; font-size: 20px; }
.form-wrapper { background-color: #ffffff; padding: 40px; border-radius: var(--bs-border-radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.form-title { font-size: 24px; font-weight: 600; color: var(--bs-body-color); margin-bottom: 25px; text-align: center; }
.form-wrapper .form-label { color: var(--bs-secondary); font-size: 15px; font-weight: 500; }
.form-wrapper .form-control { background-color: #f8f9fa; border: 1px solid #dee2e6; height: 50px; padding: 10px 15px; font-size: 16px; color: var(--bs-body-color); }
.form-wrapper .form-control:focus { background-color: #ffffff; border-color: var(--datakale-orange, #f39200); box-shadow: 0 0 0 0.25rem rgba(243, 146, 0, 0.25); }
.form-wrapper textarea.form-control { height: auto; }
.btn-cta-submit { background-color: var(--datakale-orange, #f39200); color: #ffffff; padding: 14px; font-size: 18px; font-weight: 600; border: none; transition: all 0.2s ease-in-out; }

/* ÖNCEKİ HATALI KURALI BUNUNLA DEĞİŞTİRİN */
.btn-cta-submit:hover {
    color: #ffffff;
    background-color: #fa9d0a; /* Datakale turuncusunun biraz daha canlı bir tonu */
    transform: scale(1.02);
}


/* ======================================================= */
/* ========== DATAKALE EKOSİSTEM HERO STYLES ========== */
/* ======================================================= */

/* Ana Hero Alanı */
.hero-ecosystem {
    position: relative;
    width: 100%;
    padding: 100px 0;
    display: flex;
    align-items: center;
    min-height: 50vh;
    background-color: #f8f9fa; /* Sitenizdeki genel açık arkaplan rengi */
    overflow: hidden;
}

/* Sol Taraf: Ana İçerik */
.hero-content-main {
    position: relative;
    z-index: 2;
}

.hero-title-main {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 58px;
    font-weight: 300;
    line-height: 1.25;
    color: var(--bs-body-color);
}

.hero-title-main strong {
    font-weight: 700;
    display: block; /* Vurguyu bir alt satırda daha güçlü gösterir */
    margin-top: 5px;
}

.hero-subtitle-typed {
    font-family: var(--bs-font-one), sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--datakale-orange); /* Ana vurgu renginiz */
    min-height: 60px; /* typed.js yazarken zıplamayı önler */
    margin-top: 25px;
}

.cursor-v6 { /* Mevcut cursor stilinizi kullanıyoruz */
    display: inline-block;
    background-color: var(--datakale-orange);
    width: 3px;
    height: 24px;
    vertical-align: middle;
    animation: blink-v6 1s infinite;
}

@keyframes blink-v6 { 50% { opacity: 0; } }

/* Yeni Harekete Geçirici Butonlar */
.hero-cta-buttons {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px;
}

.btn-cta-primary, .btn-cta-secondary {
    padding: 14px 30px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.btn-cta-primary {
    background-color: var(--bs-body-color);
    color: #fff;
}

.btn-cta-primary:hover {
    background-color: var(--bs-theme);
    color: #fff;
    transform: translateY(-3px);
}

.btn-cta-secondary {
    background-color: transparent;
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
}

.btn-cta-secondary:hover {
    background-color: var(--bs-secondary);
    color: #fff;
    transform: translateY(-3px);
}
.btn-cta-secondary i {
    margin-right: 8px;
    font-size: 20px;
}


/* Sağ Taraf: Üç Temel Direk Kartları */
.pillars-wrapper {
    position: relative;
    z-index: 2;
}

.pillar-card {
    display: flex;
    align-items: center;
    padding: 25px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 5px solid transparent; /* Hover efekti için başlangıç durumu */
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-body-color);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.pillar-card:last-child {
    margin-bottom: 0;
}

.pillar-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-left-color: var(--datakale-orange); /* Hover'da vurgu rengi belirir */
    cursor: pointer;
}

.pillar-card i {
    font-size: 36px;
    margin-right: 25px;
    color: var(--bs-theme-color);
    transition: color 0.3s ease;
}

.pillar-card:hover i {
    color: var(--datakale-orange);
}

.pillar-card h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--bs-body-color);
}

.pillar-card p {
    font-size: 17px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .hero-ecosystem {
        padding: 60px 0;
        text-align: center;
    }
    .hero-title-main {
        font-size: 42px;
    }
    .hero-subtitle-typed {
        font-size: 20px;
        min-height: 80px;
    }
    .hero-cta-buttons {
        justify-content: center;
    }
    .pillars-wrapper {
        margin-top: 50px;
    }
    .pillar-card {
        text-align: left;
    }
}

/* =================================================================== */
/* ========== HERO İÇİ MARKA SÖZÜ STİLLERİ (GÜNCELLENDİ) ========== */
/* =================================================================== */

/* Sözden önce gelen zarif ayırıcı çizgi */
.quote-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); /* Ortada belirginleşen bir çizgi */
    max-width: 400px; /* Çizginin çok uzun olmasını engeller */
}

.hero-brand-quote {
    margin: 0;
    padding: 0;
    border: 0;
}

.hero-quote-text {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 32px; 
    font-weight: 400; /* FONT KALINLIĞINI ARTIRDIK (300 -> 400) */
    color: var(--bs-body-color);
    margin-bottom: 15px;
    line-height: 2.4;
}

.hero-quote-text strong {
    font-weight: 700 !important;
    color: var(--datakale-orange, #f39200);
}

.hero-quote-attribution {
    font-family: var(--bs-font-one), sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-secondary);
}

@media (max-width: 767.98px) {
    .hero-quote-text {
        font-size: 26px;
    }
    .row.mt-5.pt-4 {
        margin-top: 2rem !important; 
        padding-top: 1rem !important;
    }
}


/* =================================================================== */
/* ========== DATAKALE EKOSİSTEM HERO STYLES ========== */
/* =================================================================== */
.hero-ecosystem {
    position: relative;
    width: 100%;
    padding: 150px 0;
    display: flex;
    align-items: center;
    min-height: 80vh;
    background-color: #f8f9fa;
    overflow: hidden;
}

.hero-content-main {
    position: relative;
    z-index: 2;
}

.hero-title-main {
    font-family: var(--bs-font-two), sans-serif;
    font-size: 52px;
    font-weight: 300;
    line-height: 1.25;
    color: var(--bs-body-color);
}

.hero-title-main strong {
    font-weight: 700;
    display: block;
    margin-top: 5px;
}

.hero-subtitle-typed {
    font-family: var(--bs-font-one), sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--datakale-orange);
    min-height: 40px;
    margin-top: 25px;
}


.btn-cta-primary, .btn-cta-secondary {
    padding: 14px 20px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.btn-cta-primary {
    background-color: var(--bs-body-color);
    color: #fff;
}

.btn-cta-primary:hover {
    background-color: var(--bs-theme);
    color: #fff;
    transform: translateY(-3px);
}

.btn-cta-secondary {
    background-color: transparent;
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
}

.btn-cta-secondary:hover {
    background-color: var(--bs-secondary);
    color: #fff;
    transform: translateY(-3px);
}

.btn-cta-secondary i {
    margin-right: 8px;
    font-size: 20px;
    vertical-align: middle;
}

.pillars-wrapper {
    position: relative;
    z-index: 2;
}

.pillar-card {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 5px solid transparent;
    border-radius: var(--bs-border-radius-lg);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.pillar-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-left-color: var(--datakale-orange);
}

.pillar-card i {
    font-size: 32px;
    margin-right: 20px;
    margin-top: 5px;
    color: var(--bs-theme-color);
    transition: color 0.3s ease;
}

.pillar-card:hover i {
    color: var(--datakale-orange);
}

.pillar-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--bs-body-color);
}

.pillar-card p {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 991px) {
    .hero-ecosystem { text-align: center; }
    .hero-title-main { font-size: 40px; }
    .hero-subtitle-typed { min-height: 80px; }
    .hero-cta-buttons { justify-content: center; }
    .pillar-card { text-align: left; }
}

/* Her iki buton için ortak temel stiller */
.btn-hero-primary,
.btn-hero-secondary {
    padding: 14px 35px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 50px; /* Modern ve yumuşak "pill" şekli */
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}


/* ANA BUTON: Canlı ve Davetkar */
.btn-hero-primary {
    background-color: var(--datakale-orange, #f39200);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(243, 146, 0, 0.3); /* Hafif bir ışıma efekti */
}

.btn-hero-primary:hover {
    background-color: #fa9d0a; /* Turuncunun biraz daha canlı bir tonu */
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(243, 146, 0, 0.4);
}


/* İKİNCİL BUTON: Zarif ve Minimalist */
.btn-hero-secondary {
    background-color: transparent;
    border-color: var(--bs-body-color);
    color: var(--bs-body-color);
}

.btn-hero-secondary:hover {
    background-color: var(--bs-body-color);
    color: #ffffff;
    transform: translateY(-3px);
}

.btn-hero-secondary i {
    margin-left: 8px;
    font-size: 22px;
    transition: transform 0.3s ease;
}

.btn-hero-secondary:hover i {
    transform: translateX(4px); /* Üzerine gelince ok hafifçe sağa kayar */
}

/* Mobilde butonların yan yana durmasını sağlamak için (eğer merkezde değilse) */
@media (max-width: 991px) {
    .hero-cta-buttons {
        justify-content: center;
    }
}


/* Tek ve Ortak Buton Stilimiz */
.btn-hero-outline {
    background-color: transparent; /* İçi boş başlangıç */
    color: var(--bs-body-color);   /* Metin rengi ana tema rengi */
    border: 2px solid #ced4da;     /* Başlangıçta hafif, nötr bir çerçeve */
    
    padding: 12px 28px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 8px; /* Hafif oval kenarlar için */
    transition: all 0.3s ease;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-hero-outline i {
    margin-right: 10px;
    font-size: 18px;
}

/* ÜZERİNE GELİNCE OLACAKLAR (HOVER EFEKTİ) */
.btn-hero-outline:hover {
    background-color: var(--bs-body-color); /* Tema rengi ile dolacak */
    border-color: var(--bs-body-color);     /* Çerçeve rengi de aynı olacak */
    color: #ffffff;                         /* Metin ve ikon rengi beyaza dönecek */
    transform: translateY(-3px);            /* Hafif kalkma efekti */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Mobil için butonların yan yana durmasını sağlamak için (eğer merkezde değilse) */
@media (max-width: 991px) {
    .hero-cta-buttons {
        justify-content: center;
    }
}

/* ========================================================== */
/* ========== HERO BÖLÜMÜ MOBİL DÜZENLEMELERİ ========== */
/* ========================================================== */
@media (max-width: 991.98px) {

    /* 1. Butonları tam genişlik yapar ve alt alta sıralar */
    .btn-hero-outline {
        width: 100%;
    }

    /* 2. Yazı ile butonlar arasındaki boşluğu azaltır */
    .hero-cta-buttons {
        margin-top: 1rem !important; /* mt-4 ve pt-3'ün toplamından daha az bir boşluk */
        padding-top: 0 !important;    /* Ekstra iç boşluğu kaldır */
    }
}