/*=============== GOOGLE FONTS ===============*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");



/*=============== VARIABLES CSS ===============*/

:root {

    --header-height: 3.8rem;
    --footer-height: 56px;



    /*========== Colors ==========*/

    /*Color mode HSL(hue, saturation, lightness)*/

    --black-color: hsl(220, 24%, 12%);

    --black-color-light: hsl(220, 24%, 15%);

    --black-color-lighten: hsl(220, 20%, 18%);

    --white-color: #fff;

    --body-color: #182748;

    --header-color: #fff;

    --nav-hover-color: #dddddd;

    --nav-list-color: #f7f7f7;

    --nav-second-list-color: #bbbba7;



    /*========== Font and typography ==========*/

    /*.5rem = 8px | 1rem = 16px ...*/

    --body-font: "Montserrat", sans-serif;

    --normal-font-size: .938rem;



    /*========== Font weight ==========*/

    --font-regular: 400;

    --font-semi-bold: 600;



    /*========== z index ==========*/

    --z-tooltip: 10;

    --z-fixed: 100;

}



/*========== Responsive typography ==========*/

@media screen and (min-width: 1200px) {

    :root {

        --normal-font-size: 1rem;

    }

}



/*=============== BASE ===============*/

* {
    user-select: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
}



ul {

    list-style: none;
}



a {

    text-decoration: none;

}



/*=============== REUSABLE CSS CLASSES ===============*/

.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
}



main {
    margin-top: var(--header-height);
    margin-bottom: var(--footer-height);
    width: 100%;
    overflow-x: hidden;
    min-height: calc(100vh - (var(--header-height) + var(--footer-height)));
}

footer {
    position: fixed;
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
    z-index: var(--z-fixed);
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: var(--footer-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.footerImg {
    height: 100%;
}

.footerNumberBox {
    display: flex;
    font-size: 17px;
    justify-content: space-between;
}

.footerNumber {
    color: #182748;
    font-weight: bold;
}



/*=============== HEADER ===============*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--header-color);
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
    z-index: var(--z-fixed);
}





/*=============== NAV ===============*/

.nav {

    height: var(--header-height);

}



.logo,

.nav__burger,

.nav__close {
    width: 100%;
    color: var(--black-color);
    height: 100%;
}



.nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.nav__logo {
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: var(--font-semi-bold);
    height: 100%;
}



.nav__logo img {
    font-weight: initial;
    font-size: 1.25rem;
    height: 45px;
}



.nav__toggle {
    position: relative;
    width: 40px;
    height: 40px;
}



.nav__burger,

.nav__close {

    position: absolute;

    width: max-content;

    height: max-content;

    inset: 0;

    margin: auto;

    font-size: 1.25rem;

    cursor: pointer;

    transition: opacity .1s, transform .4s;

}



.nav__close {

    opacity: 0;

}



/* Navigation for mobile devices */

@media screen and (max-width: 1200px) {

    .Marka {
        font-size: 10px;
    }

    .footerImg {
        display: block;
    }

    .footerNumberBox {
        display: none;
    }

    .header {
        padding-left: 15px;
    }

    .nav__menu {
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        /* height: calc(100vh - var(--header-height)); */
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }



    .nav__menu::-webkit-scrollbar {

        width: 0;

    }



    .nav__list {

        background-color: var(--header-color);

        padding-top: 1rem;

    }



    /* Mobil görünümde dropdown menülerin açılması için kullanılacak sınıf */

    .dropdown__item.show-dropdown .dropdown__menu {

        /* dropdown__subitem kuralları kaldırıldı */

        max-height: 1000px;

        /* Veya menü içeriğine göre daha büyük bir değer */

        transition: max-height .4s ease-in;

        overflow: hidden;

    }



    /* Mobil görünümde ok ikonunun dönmesi için kullanılacak sınıf */

    .dropdown__item.show-dropdown .dropdown__arrow {

        transform: rotate(180deg);

    }



    /* Alt menü okunun dönmesi için ek kural (reports oku) kaldırıldı */

    /* .dropdown__subitem.show-dropdown .dropdown__add {

        transform: rotate(45deg);

    } */

}



.nav__link {

    color: #032135;

    background-color: var(--header-color);

    font-weight: var(--font-semi-bold);

    padding: 1.25rem 1.5rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: background-color .3s;

}

.nav__list,
.nav__link,
.dropdown__link,
.dropdown__menu {
    -webkit-tap-highlight-color: transparent;
}

.nav__link:active {

    background-color: var(--nav-hover-color);

}



.show-menu {

    opacity: 1;

    top: 3.5rem;

    pointer-events: initial;

}



.show-icon .nav__burger {

    opacity: 0;

    transform: rotate(90deg);

}



.show-icon .nav__close {

    opacity: 1;

    transform: rotate(90deg);

}



.dropdown__item {

    cursor: pointer;

}



.dropdown__arrow {

    font-size: 1.25rem;

    font-weight: initial;

    transition: transform .4s;

}



.dropdown__link,

.dropdown__sublink {

    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    white-space: nowrap;
    color: var(--black-color);

    background-color: var(--nav-list-color);

    display: flex;

    align-items: center;

    column-gap: .5rem;

    font-weight: var(--font-semi-bold);

    transition: background-color .3s;

}



.dropdown__link i,

.dropdown__sublink i {

    font-size: 1.25rem;

    font-weight: initial;

}



.dropdown__link:active,

.dropdown__sublink:active {

    background-color: var(--nav-hover-color);

}



.dropdown__menu,

.dropdown__submenu {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease-out;

}



.dropdown__add {

    /* Bu kural artık kullanılmayacak ama bırakılabilir veya kaldırılabilir */

    margin-left: auto;

}



.dropdown__sublink {

    background-color: var(--nav-second-list-color);

}



@media screen and (max-width: 340px) {

    .container {

        margin-inline: 1rem;

    }



    .nav__link {

        padding-inline: 1rem;

    }

}



/* For large devices */

@media screen and (min-width: 1200px) {

    .header {
        padding-left: 25px;
    }

    .container {

        margin-inline: auto;

    }



    main {
        margin-top: calc(var(--header-height) + 2em);
        min-height: calc(100vh - (var(--header-height) + 2em + var(--footer-height)));
    }



    .nav {

        height: calc(var(--header-height) + 2rem);
        display: flex;
        justify-content: space-between;
        margin-right: 50px;
    }



    .nav__toggle {
        display: none;
    }



    .nav__list {

        height: 100%;

        display: flex;

        column-gap: 3rem;

    }



    .nav__link {

        height: 100%;

        padding: 0;

        justify-content: initial;

        column-gap: .25rem;

    }



    .nav__link:hover {

        background-color: transparent;

    }



    .dropdown__item,

    .dropdown__subitem {

        position: relative;

    }



    .dropdown__menu,

    .dropdown__submenu {

        max-height: initial;

        overflow: initial;

        position: absolute;

        left: 0;

        top: 6rem;

        opacity: 0;

        pointer-events: none;

        transition: opacity .3s, top .3s;

    }



    .dropdown__link,

    .dropdown__sublink {

        padding-inline: 1rem 3.5rem;

    }



    .dropdown__link:hover {

        background-color: var(--nav-hover-color);

    }



    .dropdown__subitem .dropdown__link {

        padding-inline: 1rem;

    }



    .dropdown__submenu {

        /* Bu kural da Reports ile kullanılmadığı için gereksiz olabilir */

        position: absolute;

        left: 100%;

        top: .5rem;

    }



    /* Show dropdown menu on hover for PC */

    .dropdown__item:hover .dropdown__menu {

        opacity: 1;

        top: 5.5rem;

        pointer-events: initial;

        transition: top .3s;

    }

}