/* ==========================================================================
   HEADER.CSS
   ==========================================================================

   WESTPLAST HEADER YÖNETİM DOSYASI

   GÖREVİ:
   - Logo alanını yönetir
   - Ana menüyü yönetir
   - Dropdown sistemi yönetir
   - Mobil hamburger menüyü yönetir

   NOT:
   - .container tanımı burada YOK
   - width:100% tanımı burada YOK
   - Bunlar style.css tarafından yönetilir

   Böylece style.css ile çakışma oluşmaz.

   RAPOR UYUMLULUĞU:
   - Ana Renk     : #13315C
   - Vurgu Rengi  : #29ABE2
   - Başlık Fontu : Montserrat
   - Metin Fontu  : Inter

========================================================================== */


/* ==========================================================================
   1) HEADER ANA ALANI

   Header tam ekran çalışır.
   width:100% style.css içinden gelir.

========================================================================== */

header{

    background:#13315C;

    padding:10px 0;

    box-shadow:0 2px 12px rgba(0,0,0,.08);

    position:relative;

    z-index:999;
}


/* ==========================================================================
   2) HEADER CONTAINER

   Logo sola
   Menü sağa

========================================================================== */

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;
}


/* ==========================================================================
   3) LOGO ALANI

   Logo + Yazı

========================================================================== */

.logo a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:28px;

    font-weight:700;

    transition:.3s;
}

.logo a:hover{

    opacity:.92;
}


/* ==========================================================================
   4) LOGO RESMİ

========================================================================== */

.logo-img{

    height:70px;

    width:auto;

    object-fit:contain;

    filter:drop-shadow(
        2px 2px 4px rgba(0,0,0,.35)
    );

    transition:.3s;
}

.logo-img:hover{

    filter:drop-shadow(
        3px 3px 8px rgba(0,0,0,.50)
    );
}


/* ==========================================================================
   5) ANA MENÜ

========================================================================== */

nav ul{

    list-style:none;

    display:flex;

    gap:25px;

    margin:0;

    padding:0;
}


/* ==========================================================================
   6) MENÜ LİNKLERİ

========================================================================== */

nav ul li a{

    color:#fff;

    text-decoration:none;

    font-family:'Inter',sans-serif;

    font-size:15px;

    font-weight:600;

    transition:.3s;
}

nav ul li a:hover{

    color:#29ABE2;
}


/* ==========================================================================
   6.1) AKTİF MENÜ

   İleride aktif sayfa sistemi için hazırdır.

========================================================================== */

nav ul li a.active{

    color:#29ABE2;
}


/* ==========================================================================
   7) HAMBURGER MENÜ

   Mobilde görünür.

========================================================================== */

.menu-toggle{

    display:none;

    color:#fff;

    font-size:30px;

    cursor:pointer;

    transition:.3s;
}

.menu-toggle:hover{

    color:#29ABE2;
}


/* ==========================================================================
   8) DROPDOWN SİSTEMİ

   Ürünler
      ├─ Kategori 1
      ├─ Kategori 2
      └─ Kategori 3

========================================================================== */

/* Ana dropdown elemanı */

nav ul li.dropdown{

    position:relative;
}


/* Açılır kutu */

nav ul li .dropdown-menu{

    position:absolute;

    top:100%;
    left:0;

    min-width:180px;

    background:#102947;

    display:none;

    flex-direction:column;

    padding:10px 0;

    border-radius:8px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    z-index:999;
}


/* Masaüstünde hover açılır */

nav ul li.dropdown:hover .dropdown-menu{

    display:flex;
}


/* Dropdown linkleri */

nav ul li .dropdown-menu li a{

    display:block;

    padding:10px 15px;

    white-space:nowrap;
}


/* Hover efekti */

nav ul li .dropdown-menu li a:hover{

    background:rgba(41,171,226,.15);

    color:#29ABE2;
}


/* ==========================================================================
   9) TABLET VE MOBİL

========================================================================== */

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

    /* Logo üstte, menü altta açılabilir */

    header .container{

        flex-wrap:wrap;
    }

    /* Logo küçült */

    .logo-img{

        height:50px;
    }

    /* Hamburger göster */

    .menu-toggle{

        display:block;
    }

    /* Menü gizli başlar */

    nav{

        display:none;

        width:100%;

        margin-top:15px;
    }

    /* JS açınca */

    nav.active{

        display:block;
    }

    /* Menü alt alta */

    nav ul{

        flex-direction:column;

        gap:15px;

        padding:15px 0;
    }

    nav ul li{

        text-align:center;
    }

    /* Mobil dropdown */

    nav ul li .dropdown-menu{

        position:static;

        display:none;

        background:#102947;

        margin-top:10px;
    }

    /* Hover kapalı */

    nav ul li.dropdown:hover .dropdown-menu{

        display:none;
    }
}
/* ======================================================================
   MOBİL DROPDOWN DÜZENİ
====================================================================== */

.dropdown-menu{

    width:100%;
}

.dropdown-menu li{

    text-align:center;
}

/* ==========================================================================
   10) KÜÇÜK TELEFONLAR

========================================================================== */

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

    .logo-img{

        height:45px;
    }

    .logo a{

        font-size:22px;
    }
}