/* ----------------------- TEMA SEÇİMİ ----------------------- */
/* Aktif temayı uncomment yap, diğerlerini comment yap */

/* -------- TEMA 1: Mavi – Mor -------- */
/*
:root {
    --header-bg: #282c34;
    --nav-bg: #3b3f4a;
    --footer-bg: #282c34;
    --hover-bg: #ffcc00;
    --hover-color: #282c34;
}
*/
/* -------- TEMA 2: Yeşil – Turuncu -------- */

:root {
    --header-bg: linear-gradient(45deg,#28a745,#af8918);
    --nav-bg: #218838;
    --footer-bg: linear-gradient(45deg,#28a745,#be9a2c);
    --hover-bg: #ffc107;
    --hover-color: #111;
}


/* -------- TEMA 3: Koyu – Açık -------- */
/*
:root {
    --header-bg: #111;
    --nav-bg: #1a1a1a;
    --footer-bg: #111;
    --hover-bg: #f0f0f0;
    --hover-color: #111;
}
*/

/* -------- TEMA 4: Kırmızı – Gri -------- */
/*
:root {
    --header-bg: #8B0000;
    --nav-bg: #B22222;
    --footer-bg: #8B0000;
    --hover-bg: #FFA07A;
    --hover-color: #111;
}
*/

/* -------- TEMA 5: Turkuaz – Lacivert -------- */
/*
:root {
    --header-bg: #20B2AA;
    --nav-bg: #008080;
    --footer-bg: #20B2AA;
    --hover-bg: #40E0D0;
    --hover-color: #111;
}
*/

/* -------- TEMA 6: Sarı – Koyu Kahverengi -------- */
/*
:root {
    --header-bg: #FFD700;
    --nav-bg: #8B4513;
    --footer-bg: #FFD700;
    --hover-bg: #FFA500;
    --hover-color: #111;
}
*/

/* ----------------------- GENEL ----------------------- */
body {
    margin:0;
    padding:0;
    font-family: Arial, sans-serif;
    background:#f0f2f5;
}

/* ----------------------- AÇILIR MENÜ (HOVER) ----------------------- */
.modern-header .main-nav ul li.dropdown {
    position: relative;
}

.modern-header .main-nav ul li .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nav-bg);
    min-width: 180px;
    border-radius: 5px;
    z-index: 1000;
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.modern-header .main-nav ul li .dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: white;
    font-weight: normal;
    text-align: left;
    transition: background 0.3s;
    border-radius: 0;
}

.modern-header .main-nav ul li .dropdown-menu li a:hover {
    background: var(--hover-bg);
    color: var(--hover-color);
}

/* Hover ile menü açılır */
.modern-header .main-nav ul li.dropdown:hover .dropdown-menu {
    display: block;
}


/* ----------------------- LİNKLERDE ALT ÇİZGİYİ KALDIR ----------------------- */
.modern-header .main-nav ul li a,
.modern-footer .footer-links a,
.modern-footer .footer-social a {
    text-decoration: none;
}

.modern-header .main-nav ul li a:hover,
.modern-footer .footer-links a:hover,
.modern-footer .footer-social a:hover {
    text-decoration: none; /* hover’da da çizgi olmasın */
}

/* ----------------------- HEADER ----------------------- */
.modern-header { width:100%; }

.modern-header .top-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#1f1f1f;
    color:white;
    padding:5px 20px;
    font-size:0.9em;
    flex-wrap:wrap;
}

.modern-header .top-links a,
.modern-header .social-icons a {
    color:#ddd;
    margin:0 8px;
    transition: color .3s;
    text-decoration: none;
}

.modern-header .top-links a:hover,
.modern-header .social-icons a:hover {
    color:var(--hover-bg);
}

.modern-header .header-main {
    text-align:center;
    padding:20px 15px;
    background: var(--header-bg);
    color:white;
}

.modern-header .header-main .logo { font-size:2em; font-weight:bold; }
.modern-header .header-main .slogan { font-size:1em; color:#ccc; margin-top:5px; }

.modern-header .main-nav { background: var(--nav-bg); }
.modern-header .main-nav ul {
    list-style:none; margin:0; padding:10px 0; display:flex;
    justify-content:center; flex-wrap:wrap;
}
.modern-header .main-nav ul li { margin:0 5px; }
.modern-header .main-nav ul li a {
    display:inline-block; padding:10px 20px; color:white;
    font-weight:bold; border-radius:5px; transition:.3s;
}
.modern-header .main-nav ul li a:hover,
.modern-header .main-nav ul li a.active {
    background: var(--hover-bg); color: var(--hover-color);
}

/* ----------------------- FOOTER ----------------------- */
.modern-footer {
    width: 100%;
    background: var(--footer-bg);
    color: white;
    text-align: center;
    padding: 20px 15px 10px 15px;
    box-sizing: border-box;
}

.modern-footer .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Tüm öğeler ortalanır */
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}

.modern-footer .footer-links,
.modern-footer .footer-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center; /* Küçük ekranlarda ortalanır */
}

.modern-footer .footer-links a,
.modern-footer .footer-social a {
    color: #ccc;
    transition: color 0.3s;
}

.modern-footer .footer-links a:hover,
.modern-footer .footer-social a:hover {
    color: var(--hover-bg);
}

.modern-footer .footer-bottom {
    font-size: 0.85em;
    color: #aaa;
    padding-top: 10px;
    text-align: center;
}

/* ----------------------- MAIN ----------------------- */
main { padding:40px 30px; text-align:center; }
main h2 { font-size:1.8em; color:#333; margin-bottom:15px; }
main p { font-size:1.1em; color:#555; }

/* ----------------------- RESPONSIVE ----------------------- */
@media (max-width:768px) {
    .modern-header .top-bar,
    .modern-footer .footer-top { flex-direction:column; text-align:center; gap:8px; }
    .modern-header .main-nav ul { flex-direction:column; gap:5px; padding:5px 0; }
    .modern-header .main-nav ul li a { padding:8px 15px; }
}