/* ==============================================
    TTI YAZILIM - HEADER DİNAMİK CSS
    Generated: 2026-08-18 18:37:21    ============================================== */

    :root {
    --header-height: 60px;
    --mobile-header-height: 56px;
    --menu-font-size: 15px;
    --submenu-font-size: 14px;
    --icon-size: 26px;
    --menu-spacing: 15px;
    --header-padding-x: 60px;
    --header-padding-y: 0px;
    --header-bg: #ffffff;
    --header-text: #000000;
    --primary-color: #7cb342;
    --topbar-height: 41px;
    --sticky-overlap: 1px;
    --header-sticky-top: max(0px, calc(var(--topbar-height) - var(--sticky-overlap)));
    --saydam-header-top: max(0px, calc(var(--topbar-height) - var(--sticky-overlap)));
    }

    /* ============================================
    1. HEADER TEMEL - TÜM SAYFALAR / NORMAL MOD
    ============================================ */
    #header {
    min-height: var(--header-height) !important;
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    position: sticky !important;
    top: var(--header-sticky-top, 0px) !important;
    z-index: 999 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    backface-visibility: hidden;
    transform: translateZ(0);
    }

    #header * {
    transition:
    color 0.3s ease,
    background-color 0.3s ease,
    stroke 0.3s ease !important;
    }

    #header .wrapper-header {
    min-height: var(--header-height) !important;
    padding: var(--header-padding-y) !important;
    }

    @media (min-width: 1200px) {
    #header .wrapper-header {
    padding: var(--header-padding-y) var(--header-padding-x) !important;
    }
    }

    #header .container-fluid {
    box-sizing: border-box;
    max-width: 100% !important;
    }

    #header .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    }

    #header a,
    #header a:hover {
    transform: none !important;
    }

    /* Topbar sticky; header topbarın altında konumlandırılır. */
    .tf-topbar {
    position: sticky !important;
    top: -1px !important;
    z-index: 1001 !important;
    margin: 0 !important;
    backface-visibility: hidden;
    transform: translateZ(0);
    }

    /* ============================================
    2. LOGO - MASAÜSTÜ AYARLARI
    Mobil hizalama bu bölümde yapılmaz.
    ============================================ */
    #header .logo-header {
    display: block;
    }

    #header .logo-header img {
    display: block;
    width: 170px !important;
    height: 70px !important;
    margin:
0px
0px
0px
0px !important;
    object-fit: contain !important;
    }

    /* ============================================
    3. MENÜ
    ============================================ */
    #header .box-nav-ul {
    gap: min(var(--menu-spacing), 15px) !important;
    }

    @media (min-width: 1400px) {
    #header .box-nav-ul {
    gap: var(--menu-spacing) !important;
    }
    }

    #header .box-nav-ul .item-link {
    font-size: var(--menu-font-size) !important;
    color: var(--header-text) !important;
    }

    #header .box-nav-ul .item-link > i,
    #header .box-nav-ul .item-link > .icon:not(.icon-arrow-down) {
    font-size: calc(var(--menu-font-size) * 1.1) !important;
    }

    #header .box-nav-ul .item-link::after,
    #header .box-nav-ul .menu-item:hover .item-link::after {
    display: none !important;
    }

    #header .sub-menu .menu-link-text {
    font-size: var(--submenu-font-size) !important;
    }

    /* Priority nav: ilk menüler görünür, kalanlar mobil menüden açılır. */
    #header .header-priority-nav .box-nav-ul {
    flex-wrap: nowrap;
    overflow: hidden;
    }

    @media (min-width: 1500px) {
    #header .header-priority-nav .box-nav-ul > .menu-item:nth-child(n+4) {
    display: none;
    }
    }

    @media (min-width: 1200px) and (max-width: 1499px) {
    #header .header-priority-nav .box-nav-ul > .menu-item:nth-child(n+4) {
    display: none;
    }
    }

    #header .header-left-nav .mobile-menu {
    display: inline-flex !important;
    align-items: center;
    font-size: var(--icon-size, 20px);
    cursor: pointer;
    }

    /* ============================================
    4. NAV İKONLARI
    nav-icon-label metni [class*="icon-"] ile eşleşebildiği
    için seçimlerde hariç tutulur.
    ============================================ */
    #header .nav-icon {
    gap: 8px !important;
    }

    @media (min-width: 1400px) {
    #header .nav-icon {
    gap: 12px !important;
    }
    }

    #header .nav-icon .nav-icon-item .icon,
    #header .nav-icon .nav-icon-item span[class*="icon-"]:not(.nav-icon-label):not(.count-box) {
    font-size: var(--icon-size) !important;
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    }

    #header .nav-icon .nav-icon-item svg {
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    }

    #header .mobile-menu .icon {
    font-size: var(--icon-size) !important;
    }

    /* Aktif ikonlar - masaüstü */
    @media (min-width: 1200px) {
    #header .nav-icon .nav-account {
    display: inline-flex !important;
    }


    #header .nav-icon .nav-cart {
    display: inline-flex !important;
    }

    #header .nav-icon .nav-search {
    display: inline-flex !important;
    }
    }

    /* Aktif ikonlar - mobil / tablet */
    @media (max-width: 1199.98px) {
    #header .nav-icon .nav-search {
    display: inline-flex !important;
    }

    #header .nav-icon .nav-account {
    display: inline-flex !important;
    }


    #header .nav-icon .nav-cart {
    display: inline-flex !important;
    }

    /* Hesap dropdown'ı mobilde açılmasın. */
    #header .nav-account .dropdown-account {
    display: none !important;
    }
    }

    /* ============================================
    5. İKON YERİNE YAZI MODU - SADECE MASAÜSTÜ
    ============================================ */

    /* ============================================
    6. MOBİL HEADER
    Logo hizalama kuralları yalnızca bu media sorgusundadır.
    Masaüstü logo yerleşimine hiçbir müdahale edilmez.
    ============================================ */
    @media (max-width: 991.98px) {
    #header {
    min-height: 56px !important;
    position: sticky !important;
    top: var(--header-sticky-top, var(--topbar-height, 0px)) !important;
    z-index: 1000 !important;
    margin: 0 !important;
    }

    .tf-topbar {
    position: sticky !important;
    top: -1px !important;
    z-index: 1001 !important;
    margin: 0 !important;
    }

    #header .wrapper-header {
    min-height: 56px !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    }

    #header .container,
    #header .container-fluid {
    --bs-gutter-x: 0;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

    #header .wrapper-header > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    }

    /* Sol bölüm: hamburger / mobil menü. */
    #header .wrapper-header > [class*="col-"]:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    }

    /* Orta bölüm: logo. */
    #header .wrapper-header > [class*="col-"]:nth-child(2) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    }

    /* Sağ bölüm: arama / hesap / favori / sepet. */
    #header .wrapper-header > [class*="col-"]:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    }

    #header .mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 10px 10px 12px !important;
    margin: 0 !important;
    }

    #header .nav-icon {
    padding-right: 8px !important;
    margin: 0 !important;
    gap: 2px !important;
    }

    #header .nav-icon .nav-icon-item {
    padding: 8px 6px !important;
    }

    /*
    * Tema logo üzerinde absolute, left:50%, translateX(-50%), float veya
    * text-align gibi kurallar kullanıyorsa mobilde tamamını sıfırla.
    */
    #header .logo-header {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

    /* Logo bir bağlantının içindeyse bağlantının hizalamasını da düzelt. */
    #header .logo-header > a,
    #header .logo-header a.logo,
    #header .logo-header .logo {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    width: 100% !important;
    }

    #header .logo-header img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    transform: none !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 26px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    }
    }

    /* ============================================
    7. MARQUEE
    ============================================ */
    .tf-marquee {
    background-color: #000000;
    color: #ffffff;
    padding: 13.333333333333px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    }

    .tf-marquee-content {
    display: inline-block;
    animation: marquee 29s linear infinite;
    }

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

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

    .tf-marquee-item {
    display: inline-block;
    padding: 0 30px;
    font-weight: 600;
    }

    .tf-marquee-item i {
    margin-right: 8px;
    }

    /* ============================================
    8. TOPBAR COUNTDOWN - KUTULU STİL
    ============================================ */
    .tf-topbar-countdown {
    display: flex;
    justify-content: center;
    }

    .tf-sw-top_bar,
    .tf-sw-top_bar .swiper-wrapper,
    .tf-sw-top_bar .swiper-slide {
    width: 100%;
    }

    .tf-sw-top_bar .swiper-slide,
    .tf-sw-top_bar .swiper-slide > a,
    .tf-sw-top_bar .top-bar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    }

    .tf-sw-top_bar .swiper-slide > a,
    .tf-sw-top_bar .top-bar-text {
    width: 100%;
    }

    .tf-topbar-countdown-inner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    color: inherit;
    text-decoration: none;
    }

    .tf-topbar-countdown-text {
    white-space: nowrap;
    }

    .tf-topbar-timer .countdown__timer {
    display: inline-flex;
    align-items: center;
    }

    .tf-topbar-timer .countdown__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 3px 7px 4px;
    min-width: 40px;
    position: relative;
    margin-right: 16px;
    line-height: 1;
    }

    .tf-topbar-timer .countdown__item:last-child {
    margin-right: 0;
    }

    .tf-topbar-timer .countdown__item:not(:last-child)::after {
    content: ':';
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 14px;
    opacity: 0.9;
    }

    .tf-topbar-timer .countdown__value {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.15;
    }

    .tf-topbar-timer .countdown__label {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 1px;
    }

    @media (max-width: 767px) {
    .tf-topbar-countdown-inner {
    gap: 10px;
    }

    .tf-topbar-countdown-text {
    font-size: 0.85em;
    }

    .tf-topbar-timer .countdown__item {
    min-width: 34px;
    padding: 2px 5px 3px;
    margin-right: 12px;
    }

    .tf-topbar-timer .countdown__item:not(:last-child)::after {
    right: -9px;
    }

    .tf-topbar-timer .countdown__value {
    font-size: 12px;
    }

    .tf-topbar-timer .countdown__label {
    font-size: 7px;
    }
    }

    @media (max-width: 575.98px) {
    .tf-topbar-countdown-inner {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
    }

    .tf-topbar-countdown-text {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    }

    .tf-topbar-timer,
    .tf-topbar-timer .countdown__timer {
    justify-content: center;
    }
    }