/* Modern bir his için özel font içeri aktarma */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #0a0a0a; /* Neredeyse siyah */
    color: #bfc4cc; /* Soğuk koyu gri-mavi ton */
    transition: background-color 0.3s ease, color 0.3s ease;
    background-image: url('../images/bg.gif');
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Sayfa kaydırmasını engellemek için */
body.no-scroll {
    overflow: hidden;
}

/* Modern bir görünüm için özel düğme stilleri */
.modern-button {
    background: linear-gradient(90deg, #23242a 0%, #3a4151 100%);
    color: #bfc4cc;
    border: 1.5px solid #7a7f8c;
    border-radius: 1.2rem;
    padding: 0.7rem 2.2rem;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s, border 0.2s;
    box-shadow: 0 2px 12px rgba(35,36,42,0.12);
}

.modern-button:hover, .modern-button:focus {
    background: linear-gradient(90deg, #3a4151 0%, #23242a 100%);
    color: #a3b1c6;
    border-color: #a3b1c6;
}

/* Başlık küçültme stilleri */
.main-header {
    transition: all 0.3s ease-in-out;
    /* Başlık değişiklikleri için yumuşak geçiş */
}

.main-header.shrunk {
    padding-top: 1rem;
    /* p-4 */
    padding-bottom: 1rem;
    /* p-4 */
}

.main-header.shrunk .header-title {
    font-size: 2.25rem;
    /* text-4xl */
}

.main-header.shrunk .header-nav-link {
    font-size: 1rem;
    /* text-base */
}

/* Küçültme için duyarlı ayarlamalar */
@media (min-width: 768px) {

    /* md kırılma noktası */
    .main-header.shrunk {
        padding-top: 0.75rem;
        /* md:p-3 */
        padding-bottom: 0.75rem;
        /* md:p-3 */
    }

    .main-header.shrunk .header-title {
        font-size: 3rem;
        /* md:text-5xl */
    }

    .main-header.shrunk .header-nav-link {
        font-size: 1.125rem;
        /* md:text-lg */
    }
}

/* Kod blokları için stil (önceden biçimlendirilmiş metin) */
/* Highlight.js kodun içindeki arka plan rengini ve metin renklerini halledecek */
.content-area pre,
.content-area pre code,
pre,
pre code {
    background: #181a20 !important;
    color: #bfc4cc !important; /* Kodda da daha koyu beyaz */
    border-radius: 2rem !important;
    border: none !important;
    padding: 1.5rem;
    overflow-x: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Satır içi kod parçacıkları için stil */
.content-area code {
    background-color: #23242a;
    color: #bfc4cc;
    /* Satır içi kod için belirgin turuncu-kahverengi renk */
    padding: 0.3em 0.6em;
    /* Daha fazla dolgu */
    border-radius: 1em;
    /* Köşeleri daha da yuvarladık */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    /* Blok koddan biraz daha küçük */
    font-weight: 700;
    /* Vurgu için kalın */
}


/* İçerik alanındaki görseller için stil */
.content-area img {
    border-radius: 0.75rem;
    box-shadow: 0 6px 12px rgba(255, 182, 193, 0.25);
    /* Pembe gölge */
}

/* Mobil Menü Özelleştirmeleri */
.hamburger-button {
    display: none;
    /* Varsayılan olarak gizle */
    cursor: pointer;
    font-size: 1.8rem;
    /* İkon boyutu */
    color: white;
}

@media (max-width: 767px) {

    /* Mobil cihazlar için (md breakpoint altı) */
    .hamburger-button {
        display: block;
        /* Hamburger butonunu göster */
    }

    /* Masaüstü navigasyonunu gizle */
    #desktop-nav {
        display: none !important;
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        /* Yarı şeffaf arka plan */
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-overlay .close-button {
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 2rem;
        color: white;
        cursor: pointer;
    }

    .mobile-menu-overlay ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }

    .mobile-menu-overlay ul li {
        margin-bottom: 1.5rem;
    }

    .mobile-menu-overlay ul li a {
        color: white;
        font-size: 1.8rem;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .mobile-menu-overlay ul li a:hover {
        color: #a78bfa;
        /* purple-300 */
    }

}

/* Mobil menü overlay sadece mobilde görünür */
#mobile-menu-overlay {
    display: none;
}

@media (max-width: 767px) {
    #mobile-menu-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(30, 27, 75, 0.97);
        /* Açık modda koyu mor */
        z-index: 1000;
        padding: 2rem 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    #mobile-menu-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    #mobile-menu-overlay .close-button {
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 2rem;
        color: #fff;
        cursor: pointer;
    }

    #mobile-menu-overlay ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }

    #mobile-menu-overlay ul li {
        margin-bottom: 1.5rem;
    }

    #mobile-menu-overlay ul li a {
        color: #fff;
        font-size: 1.8rem;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s;
    }

    #mobile-menu-overlay ul li a:hover {
        color: #ffc1e0;
        /* Hover rengi */
    }

}

/* --- PEMBE PALET GÜNCELLEMELERİ --- */

/* Kart arka planı ve kenarlıklar */
.bg-white {
    background-color: #181a1f !important;
    color: #bfc4cc !important;
    border-color: #7a7f8c !important;
}

/* Başlıklar ve metinler */
.text-gray-800,
.header-title {
    color: #a3b1c6 !important; /* Koyu mavi-gri */
}
.text-gray-700 {
    color: #8a99ad !important;
}
.text-gray-500 {
    color: #6c7684 !important;
}
.border-gray-100 {
    border-color: #7a7f8c !important;
}

/* Devamını Oku ve iletişim butonları */
.read-more-btn,
.contact-submit-btn {
    background: linear-gradient(90deg, #23242a 0%, #3a4151 100%) !important;
    color: #bfc4cc !important;
    border: 1.5px solid #7a7f8c !important;
    font-weight: 600;
    border-radius: 2rem !important;
    box-shadow: 0 2px 12px rgba(35,36,42,0.12);
    transition: background 0.2s, color 0.2s, border 0.2s;
}
.read-more-btn:hover,
.contact-submit-btn:hover {
    background: linear-gradient(90deg, #3a4151 0%, #23242a 100%) !important;
    color: #a3b1c6 !important;
    border-color: #a3b1c6 !important;
}

/* Modern butonlar */
.modern-button {
    background-image: linear-gradient(to right, #ffb6c1, #ffc1e0) !important;
    color: #18141a !important;
}
.modern-button:hover {
    background-image: linear-gradient(to right, #ffc1e0, #ffb6c1) !important;
    color: #18141a !important;
}

/* Mobil menü linkleri */
@media (max-width: 767px) {
    .mobile-menu-overlay ul li a,
    #mobile-menu-overlay ul li a {
        color: #a3b1c6 !important;
    }
    .mobile-menu-overlay ul li a:hover,
    #mobile-menu-overlay ul li a:hover {
        color: #8a99ad !important;
    }
    .mobile-menu-overlay .close-button,
    #mobile-menu-overlay .close-button {
        color: #a3b1c6 !important;
    }
}

/* Navbar linkleri ve arka planı için pembe palet */
.header-nav-link {
    color: #a3b1c6 !important;
    transition: color 0.2s;
}
.header-nav-link:hover,
.header-nav-link.active {
    color: #8a99ad !important;
    text-shadow: 0 2px 8px #23242a;
}

.main-header {
    background: #18141a !important;
    border-bottom: 1px solid #ffb6c1 !important;
}

/* Eğer navbar veya benzeri bir sınıf varsa */
.navbar {
    background: #18141a !important;
    border-bottom: 1px solid #ffb6c1 !important;
}

/* Footer için pembe-siyah tema */
footer {
    background: #0a0a0a !important;
    color: #bfc4cc !important;
    border-top: 1px solid #ffb6c1 !important;
    padding: 2rem 0;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.03em;
}

footer a {
    color: #8a99ad !important;
    text-decoration: underline;
    transition: color 0.2s;
}
footer a:hover {
    color: #a3b1c6 !important;
    text-decoration: none;
}

/* Hamburger (mobil) menü overlay ve linkleri için pembe-siyah tema */
.mobile-menu-overlay,
#mobile-menu-overlay {
    background: rgba(10, 10, 10, 0.97) !important;
}

.mobile-menu-overlay ul li a,
#mobile-menu-overlay ul li a {
    color: #a3b1c6 !important;
    font-weight: 600;
    transition: color 0.2s;
}

.mobile-menu-overlay ul li a:hover,
#mobile-menu-overlay ul li a:hover {
    color: #8a99ad !important;
    text-shadow: 0 2px 8px #a3b1c6;
}

.mobile-menu-overlay .close-button,
#mobile-menu-overlay .close-button {
    color: #a3b1c6 !important;
    font-size: 2rem;
    transition: color 0.2s;
}

.mobile-menu-overlay .close-button:hover,
#mobile-menu-overlay .close-button:hover {
    color: #8a99ad !important;
}

.content-area h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #a3b1c6;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.content-area h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #8a99ad;
    margin-top: 1.8rem;
    margin-bottom: 0.9rem;
    line-height: 1.25;
}
.content-area h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #a3b1c6;
    margin-top: 1.5rem;
    margin-bottom: 0.7rem;
    line-height: 1.3;
}
.content-area h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #8a99ad;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.content-area h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #a3b1c6;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.content-area h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #8a99ad;
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
    line-height: 1.45;
}

/* İçerik alanındaki "Devamını Oku" butonları için stil */
.content-area .read-more-btn {
    background: linear-gradient(90deg, #23242a 0%, #3a4151 100%) !important;
    color: #bfc4cc !important;
    border: 1.5px solid #7a7f8c !important;
    border-radius: 2rem !important;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(35,36,42,0.12);
    transition: background 0.2s, color 0.2s, border 0.2s;
}

.content-area .read-more-btn:hover {
    background: linear-gradient(90deg, #3a4151 0%, #23242a 100%) !important;
    color: #a3b1c6 !important;
    border-color: #a3b1c6 !important;
}