/* ==== Base (Bootstrap-friendly) ========================================= */

:root {
    --brand: #0A2540;
    --accent: #FF6A00;
    --bg: #f7f8fa;
    --muted: #EEF2F6;
    --mobile-bar-h: 72px; /* alt bar yüksekliği */
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow-y: scroll;
}
/* sayfalar arası scrollbar farkı olmasın */
body {
    margin: 0;
    font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
    background: var(--bg);
    color: #0a0a0a;
}

/* Bootstrap .container’ı **ÜZERİNE YAZMA** – kendi kurallarını kullanıyoruz. */

/* ==== Header / Navbar ==================================================== */

/* Navbar linklerini koyulaştır (Bootstrap default opaklığı kır) */
.navbar .nav-link {
    color: #0a0a0a !important;
    opacity: 1;
    font-weight: 600;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: #0A2540 !important;
    }

.navbar-brand strong {
    letter-spacing: .3px;
}

/* ==== Content spacing & HTMX transition ================================= */

main > *:first-child {
    margin-top: 0;
}

main > *:last-child {
    margin-bottom: 0;
}

/* Masaüstü içerik üst/alt boşluğu */
@media (min-width: 992px) {
    main .container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* HTMX fade geçişi */
#mainContent.htmx-swapping {
    opacity: 0;
    transition: opacity .25s ease;
}

#mainContent.htmx-settling {
    opacity: 1;
    transition: opacity .25s ease;
}

/* Global yükleniyor göstergesi */
#busy.htmx-request {
    display: block !important;
}

/* ==== Mobile bottom bar (Bootstrap .fixed-bottom yapısı) ================= */

@media (max-width: 991.98px) {
    body {
        padding-bottom: var(--mobile-bar-h);
    }
    /* içerik/footer alt bara çarpmasın */
}

.fixed-bottom {
    z-index: 1070 !important;
}
    /* offcanvas üstünde kalsın */
    .fixed-bottom .container {
        padding-bottom: .25rem;
    }

    .fixed-bottom .rounded-top-4 {
        background: #eef2f6;
        box-shadow: 0 -2px 10px rgba(0,0,0,.08);
        padding: .35rem .5rem;
    }

    .fixed-bottom .btn {
        padding: .15rem 0;
        color: #000;
    }

    .fixed-bottom .bi {
        font-size: 1.35rem;
        line-height: 1;
    }

    .fixed-bottom .small {
        font-size: .72rem;
    }

/* ==== Offcanvas (mobil menü) ============================================ */

.offcanvas.offcanvas-bottom {
    z-index: 1060 !important;
}
/* alt bar görünür kalsın */
.offcanvas-bottom {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.offcanvas .list-group-item {
    color: #0a0a0a;
    font-weight: 500;
}

    .offcanvas .list-group-item:hover {
        background: #f5f6f8;
    }

.offcanvas-header {
    border-bottom: 1px solid #eee;
    padding-bottom: .5rem;
}

    .offcanvas-header img {
        width: 28px;
        height: 28px;
    }

    .offcanvas-header strong {
        font-size: 1rem;
        font-weight: 700;
        color: #0A2540;
    }

/* ==== Cards / Products =================================================== */

.object-fit-cover {
    object-fit: cover;
}

/* Kartlarda “buton tabana yapışsın” kalıbı için yardımcı sınıflar
   (kart: .card.h-100.d-flex.flex-column, card-body: .d-flex.flex-column, buton sarmalayıcı: .mt-auto) */

/* ==== Footer ============================================================= */

footer .bi {
    vertical-align: -2px;
}

footer .row {
    --bs-gutter-x: 1.25rem;
}

footer .list-unstyled a:hover {
    color: #0A2540;
}
/* Footer’ın yerini “çivilemek” için Layout’ta already: <div class="d-flex flex-column min-vh-100">
   Bu durumda ek CSS gerekmez, ama güvenlik için: */
footer {
    margin-top: auto;
}

/* ==== (KALDIRILANLAR) ====================================================
- .container override (Bootstrap’la çakışıyordu) – kaldırıldı
- .topbar, .topbar-inner, .brand... (eski custom header) – Bootstrap navbar kullanılıyor
- .mobile-bar, .mobile-item, .overlay, .sheet ... (eski custom alt bar / sheet) – kaldırıldı
- body{display:grid...} sticky footer denemeleri – kaldırıldı (Bootstrap min-vh-100 kullanıyoruz)
- Çift/tekrar eden medya sorguları – sadeleştirildi
========================================================================== */


/*  A) Bootstrap container RESET (bir yerde override ettiysen geri alır) */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/*  B) Footer’ı “çivile” – flex sarmalayıcıyla uyumlu */
footer {
    margin-top: auto;
}

/*  C) Masaüstünde alt bar boşluğu olmasın, mobilde olsun */
@media (max-width: 991.98px) {
    body {
        padding-bottom: var(--mobile-bar-h,72px);
    }
}

@media (min-width: 992px) {
    body {
        padding-bottom: 0;
    }
}


.hero-wrapper {
    position: relative;
    min-height: 60vh;
}

    .hero-wrapper video, .hero-wrapper img {
        object-fit: cover;
        height: 60vh;
    }

.carousel-caption {
    background: rgba(0,0,0,.5);
    border-radius: 12px;
    padding: 1rem 1.5rem;
}

.campaign-side {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    padding: 1rem;
    border-radius: 0 0 0 1rem;
}

.campaign-list {
    flex: 1;
    overflow-y: auto;
}

@media(max-width:991.98px) {
    .hero-wrapper {
        min-height: 50vh;
    }
}
/* Büyük ekranda 21:9 görünüm isteyenler için */
@media (min-width: 992px) {
    .ratio-lg-21x9 {
        aspect-ratio: 21 / 9;
        display: block;
    }
}

/* Görseller taşmadan ortalansın */
.object-fit-cover {
    object-fit: cover;
}

.object-center {
    object-position: center;
}

/* Kampanya kolonu dikey kaydırma için min yükseklik */
.campaign-rail {
    min-height: 100%;
}

/* Carousel başlığı okunaklı dursun */
.carousel-caption {
    background: rgba(0,0,0,.5);
    border-radius: 12px;
    padding: 1rem 1.5rem;
}
/* Görsel davranışı */
.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

.object-center {
    object-position: center;
}

/* Vitrin ve kampanya hizası */
.campaign-rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

    /* Kampanya kartlarının içeriği orantılı ve hizalı olsun */
    .campaign-rail .card {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .campaign-rail .card-body {
        flex-grow: 0;
        text-align: center;
    }
/* 21:9 oran ve eş-yükseklik */
.hero-frame {
    /* Masaüstünde vitrin & kampanya aynı yükseklik: akıllı yükseklik */
    height: clamp(360px, 38vw, 520px);
}

/* Vitrin yanlarda "bleed" (sadece lg ve üstü) */
@media (min-width: 992px) {
    .hero-bleed-lg {
        margin-inline: calc(-.5 * var(--bs-gutter-x));
    }
}

/* Carousel içinin yüksekliği korunmalı */
#heroSlider, #heroSlider .carousel-inner, #heroSlider .carousel-item {
    height: 100%;
}

/* Nesne hizalama yardımcıları */
.object-center {
    object-position: center center;
}

.object-fit-contain {
    object-fit: contain;
}

.object-fit-cover {
    object-fit: cover;
}

/* Kampanya kolonu: içte kaydırma çalışsın */
.min-h-0 {
    min-height: 0;
}

.campaign-rail {
    overflow: auto;
}

/* Masaüstünde vitrin 21:9 gibi görünsün (yüksekliği hero-frame belirliyor) */
@media (min-width: 992px) {
    .ratio-lg-21x9 {
        aspect-ratio: 21/9;
    }
}
.campaign-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: clamp(360px, 38vw, 520px);
    overflow: hidden; /* dışarı taşanı gizle */
}

    .campaign-rail > * {
        flex-shrink: 0;
        animation: slide-up 12s linear infinite; /* her 12 saniyede tam döngü */
    }

/* Dikey kayan animasyon */
@keyframes slide-up {
    0% {
        transform: translateY(0);
    }

    90% {
        transform: translateY(-50%); /* içeriğin yarısını yukarı kaydır */
    }

    100% {
        transform: translateY(0);
    }
}
.campaign-rail:hover > * {
    animation-play-state: paused;
}

.campaign-outer {
    height: clamp(360px, 38vw, 520px);
    overflow: hidden;
    position: relative;
}

.campaign-rail {
    display: flex;
    flex-direction: column;
    animation: scrollCampaigns 20s linear infinite;
}

    .campaign-rail > * {
        margin-bottom: 1rem;
    }

/* Dikey sonsuz kayma animasyonu */
@keyframes scrollCampaigns {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
    /* toplam yüksekliğin yarısı kadar kayar */
}

/* Hover olunca dursun */
.campaign-outer:hover .campaign-rail {
    animation-play-state: paused;
}
/* Sol hero ile aynı oran: mobilde 16:9, lg ve üstünde 21:9 */
#heroSlider .ratio {
    --bs-aspect-ratio: 56.25%;
}

@media (min-width: 992px) {
    #heroSlider .ratio {
        --bs-aspect-ratio: 42.857%;
    }
    /* 21:9 */
}

/* Sağ kampanya sarmalı: yüksekliği sol hero ile hizala */
.campaign-outer {
    height: 100%;
    min-height: 260px; /* güvenlik */
    max-height: clamp(360px, 38vw, 520px); /* sol alanla dengeli */
    overflow: hidden;
    position: relative;
}

/* İç ray: dikey kolonda sonsuz kayma */
.campaign-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    will-change: transform;
    animation: scrollCampaigns 22s linear infinite;
}

    /* Kartlar sabit yükseklikte davranıp taşmasın */
    .campaign-rail > .card {
        flex-shrink: 0;
    }

/* Sonsuz akış: listeyi 2x yaptığımız için yarısına kadar kaydırıp başa dönüyoruz */
@keyframes scrollCampaigns {
    0% {
        transform: translateY(0);
    }

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

/* Hover durdurma (isteğe bağlı) */
.campaign-outer:hover .campaign-rail {
    animation-play-state: paused;
}

/* Görsel taşmasını engelle */
img {
    max-width: 100%;
    display: block;
}



/* Genel kart stili */
.category-carousel {
    background-color: #ffffff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    height:450px;
    max-height: 500px;
}

    /* Indicator (step) butonları koyu ve yuvarlak */
    .category-carousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #343a40; /* koyu gri */
        opacity: 0.4;
    }

    .category-carousel .carousel-indicators .active {
        opacity: 1;
    }

    /* Ok iconlarını koyu yapmak için */
    .category-carousel .carousel-control-prev-icon,
    .category-carousel .carousel-control-next-icon {
        filter: invert(1) grayscale(100%); /* beyaz iconu koyu hale çevirir */
    }

    /* Okların tıklama alanı biraz geniş olsun */
    .category-carousel .carousel-control-prev,
    .category-carousel .carousel-control-next {
        width: 5%;
    }


@media (max-width: 576px) {
    /* Yazıyı küçültme */
    .category-carousel .carousel-item p {
        font-size: 0.85rem; /* varsayılan ~16px -> 13.6px */
        line-height: 1.35;
    }

    .category-carousel .carousel-item h2 {
        font-size: 1.1rem; /* başlık küçültme */
    }

    /* Detay Gör butonu sağ üstte */
    .category-carousel .carousel-item .btn {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: .35rem .7rem;
        font-size: 0.75rem; /* daha küçük buton */
        z-index: 20;
    }

    /* Carousel kontrol oklarını gizleme */
    .category-carousel .carousel-control-prev,
    .category-carousel .carousel-control-next {
        display: none !important;
    }
}




/*Product*/

/* 576px üstünde: mobil layout'lar gizli kalsın */
@media (max-width: 576px) {

    h1{
        text-align:center;
    }
    .goods {
        text-align: center;
    }
    .ratio img{
        object-fit:contain !important;
    }

}

.about.privacy h1 {
    margin-bottom: 1.5rem;
}

.about.privacy h2 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

/*Product*/