/* ============================================
   RAMAZAN TEMASI - Konya Büyükşehir Belediyesi
   Ramazan sonrası bu dosyayı ve referansını
   kaldırmanız yeterlidir.
   ============================================ */

:root {
    --ramazan-navy-dark: #0a1628;
    --ramazan-navy: #162447;
    --ramazan-navy-light: #1f3461;
    --ramazan-gold: #c9a84c;
    --ramazan-gold-bright: #d4af37;
    --ramazan-gold-light: #e6c976;
    --ramazan-gold-glow: rgba(212, 175, 55, 0.3);
}

/* ============================================
   HEADER - Lacivert arka plan + altın vurgu
   ============================================ */

/* Mobil Header */
.header.ramazan-theme {
    background: linear-gradient(180deg, var(--ramazan-navy-dark) 0%, var(--ramazan-navy) 100%) !important;
    border-bottom: none;
    /* Altındaki görsel sınır olacak */
    box-shadow: 0 2px 20px var(--ramazan-gold-glow);
}

.header.ramazan-theme .navbar-header {
    background-color: var(--ramazan-navy-dark) !important;
    background-image: linear-gradient(rgba(10, 22, 40, 0.2), rgba(10, 22, 40, 0.2)), url('../images/ay_yildiz_kandil.svg');
    background-repeat: repeat-x;
    background-position: center center;
    background-size: 150px auto;
    /* position: relative;  <-- Bu style.css'deki fixed'i eziyor ve boşluk oluşturuyor. Kaldırıldı. */
    overflow: hidden;
    /* Dışarı taşmasın */
}

.header.ramazan-theme .navbar-main {
    background-color: var(--ramazan-navy) !important;
}

.header.ramazan-theme .navbar-nav .nav-link {
    color: #fff !important;
}

.header.ramazan-theme .navbar-nav .nav-link:hover,
.header.ramazan-theme .navbar-nav .nav-item.active .nav-link {
    color: var(--ramazan-navy-dark) !important;
}

.header.ramazan-theme .dropdown-menu {
    background-color: var(--ramazan-navy-light) !important;
    border: 1px solid var(--ramazan-gold) !important;
}

.header.ramazan-theme .dropdown-item {
    color: #e0e0e0 !important;
}


/* Mobil Menü Arka Planı ve Metinleri */
@media (max-width: 991.98px) {
    .header.ramazan-theme .navbar-menu {
        background-color: var(--ramazan-navy) !important;
        border-right: 1px solid var(--ramazan-gold-glow);
    }


    .header.ramazan-theme .navbar-menu-close {
        background-color: transparent !important;
        color: #fff !important;
        border: 1px solid var(--ramazan-gold-light);
    }

    .header.ramazan-theme .navbar-nav {
        border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
    }
}

.header.ramazan-theme .dropdown-item:hover,
.header.ramazan-theme .dropdown-item.active {
    background-color: var(--ramazan-navy-dark) !important;
    color: var(--ramazan-gold-light) !important;
}

/* Aktif link rengi - specificity arttırıldı */
.header.ramazan-theme .navbar-nav .nav-item.active .nav-link {
    background-color: var(--ramazan-gold-light) !important;
    color: var(--ramazan-navy-dark) !important;
    border-radius: 4px;
    /* Köşeleri yuvarlat */
}

/* Genel link rengi */
.header.ramazan-theme .navbar-nav .nav-link {
    color: #fff !important;
}


/* ============================================
   NAVBAR (Desktop - is_web)
   ============================================ */

.ftco-section.ramazan-theme {
    background: linear-gradient(180deg, var(--ramazan-navy-dark) 0%, var(--ramazan-navy) 100%) !important;
    /* Absolute çocuk için gerekli */
}

@media (min-width: 992px) {
    .ftco-section.ramazan-theme {
        background: linear-gradient(180deg, var(--ramazan-navy-dark) 0%, var(--ramazan-navy) 100%) !important;
        opacity: 0.95;
        box-shadow: 0 4px 25px rgba(10, 22, 40, 0.5);
    }
}

.ftco-section.ramazan-theme .topbar-link {
    color: #fff;
}

.ftco-section.ramazan-theme .topbar-link:hover {
    color: var(--ramazan-gold-light) !important;
}

.ftco-section.ramazan-theme .web-navbar .nav-link {
    color: #e8e8e8 !important;
    transition: color 0.3s ease;
}

.ftco-section.ramazan-theme .web-navbar .nav-link:hover,
.ftco-section.ramazan-theme .web-navbar .nav-item.active .nav-link {
    color: var(--ramazan-gold-light) !important;
}

.ftco-section.ramazan-theme .web-navbar .dropdown-menu {
    background-color: var(--ramazan-navy-light) !important;
    border: 1px solid rgba(201, 168, 76, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.ftco-section.ramazan-theme .web-navbar .dropdown-item {
    color: #ddd !important;
}

.ftco-section.ramazan-theme .web-navbar .dropdown-item:hover,
.ftco-section.ramazan-theme .web-navbar .dropdown-item.active {
    background-color: var(--ramazan-navy-dark) !important;
    color: var(--ramazan-gold-light) !important;
}

.ftco-section.ramazan-theme .btn-search {
    background-image: linear-gradient(315deg, var(--ramazan-navy-light) 0%, var(--ramazan-navy) 100%) !important;
}

/* ============================================
   RAMAZAN DEKORATİF ELEMENTLER
   Header altı hilal, fener ve yıldız
   ============================================ */

.ramazan-decor {
    position: relative;
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 100;
    pointer-events: none;
}

/* Asma Fenerler (Lanterns) */
.ramazan-lantern {
    position: absolute;
    top: -5px;
    /* Headers top border */
    width: 60px;
    height: 120px;
    z-index: 101;
    background-image: url('/assets/images/kandil.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    transform-origin: top center;
    animation: lanternSwing 3s ease-in-out infinite, lanternGlow 3s ease-in-out infinite;
}

.ramazan-lantern::before {
    content: '';
    position: absolute;
    top: -100px;
    /* Rope goes up */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 130px;
    /* Long rope */
    background: linear-gradient(to bottom, transparent, var(--ramazan-gold));
    z-index: -1;
}

.ramazan-lantern::after {
    display: none;
}

.ramazan-lantern:nth-child(1) {
    left: 5%;
    animation-delay: 0s;
    top: -10px;
    transform: scale(0.8);
}

.ramazan-lantern:nth-child(2) {
    left: 15%;
    animation-delay: 1.5s;
    top: 10px;
    transform: scale(1.1);
}

.ramazan-lantern:nth-child(3) {
    left: 28%;
    animation-delay: 0.5s;
    top: -5px;
    transform: scale(0.9);
}

.ramazan-lantern:nth-child(4) {
    left: 50%;
    animation-delay: 0.8s;
    top: 15px;
    transform: scale(1.2) translateX(-50%);
}

.ramazan-lantern:nth-child(5) {
    left: 72%;
    animation-delay: 1.2s;
    top: -5px;
    transform: scale(0.9);
}

.ramazan-lantern:nth-child(6) {
    left: 85%;
    animation-delay: 0.2s;
    top: 10px;
    transform: scale(1.1);
}

.ramazan-lantern:nth-child(7) {
    left: 95%;
    animation-delay: 1.7s;
    top: -10px;
    transform: scale(0.8);
}

@keyframes lanternSwing {

    0%,
    100% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg);
    }
}

@keyframes lanternGlow {

    0%,
    100% {
        filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.4)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 5px 30px rgba(255, 215, 0, 0.9)) brightness(1.3);
    }
}

/* Hilal ve Yıldız - Header dekorasyon çizgisi */
.ramazan-border-decor {
    position: relative;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--ramazan-gold) 15%,
            var(--ramazan-gold-bright) 50%,
            var(--ramazan-gold) 85%,
            transparent 100%);
    overflow: visible;
}

.ramazan-border-decor::before {
    content: '☪';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: var(--ramazan-gold-bright);
    background: var(--ramazan-navy-dark);
    padding: 0 10px;
    z-index: 102;
    text-shadow: 0 0 10px var(--ramazan-gold-glow);
}

.ramazan-border-decor::after {
    content: '✦  ✦';
    position: absolute;
    top: 50%;
    right: 30%;
    transform: translateY(-50%);
    font-size: 8px;
    color: var(--ramazan-gold);
    background: var(--ramazan-navy-dark);
    padding: 0 8px;
    letter-spacing: 5px;
}

/* Yıldız parıldama animasyonu */
.ramazan-stars {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    pointer-events: none;
    overflow: hidden;
}

.ramazan-star {
    position: absolute;
    color: var(--ramazan-gold-light);
    font-size: 6px;
    animation: starTwinkle 2s ease-in-out infinite;
    opacity: 0.6;
}

.ramazan-star:nth-child(1) {
    left: 5%;
    top: 8px;
    animation-delay: 0s;
}

.ramazan-star:nth-child(2) {
    left: 15%;
    top: 18px;
    animation-delay: 0.4s;
}

.ramazan-star:nth-child(3) {
    left: 25%;
    top: 6px;
    animation-delay: 0.8s;
}

.ramazan-star:nth-child(4) {
    left: 40%;
    top: 14px;
    animation-delay: 0.2s;
}

.ramazan-star:nth-child(5) {
    left: 55%;
    top: 22px;
    animation-delay: 0.6s;
}

.ramazan-star:nth-child(6) {
    left: 70%;
    top: 10px;
    animation-delay: 1s;
}

.ramazan-star:nth-child(7) {
    left: 85%;
    top: 20px;
    animation-delay: 0.3s;
}

.ramazan-star:nth-child(8) {
    left: 95%;
    top: 5px;
    animation-delay: 0.7s;
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* ============================================
   FOOTER - Lacivert arka plan + altın vurgular
   ============================================ */

.footer.ramazan-theme {
    background: linear-gradient(180deg, var(--ramazan-navy) 0%, var(--ramazan-navy-dark) 100%) !important;
    position: relative;
}

/* Footer üst geometrik desen bordürü */
.footer.ramazan-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
            transparent,
            var(--ramazan-gold) 20%,
            var(--ramazan-gold-bright) 50%,
            var(--ramazan-gold) 80%,
            transparent);
    z-index: 1;
}

/* İslami geometrik desen bordürü */
.footer-ramazan-pattern {
    width: 100%;
    height: 30px;
    background-color: var(--ramazan-navy);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

/* .footer-ramazan-pattern::before {
    content: '◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆ ✦ ⏾ ✦ ◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ramazan-gold);
    opacity: 0.3;
    font-size: 10px;
    letter-spacing: 8px;
    white-space: nowrap;
    width: 100%;
    text-align: center;
} */

/* Footer widget başlıkları */
.footer.ramazan-theme .widget-title {
    color: var(--ramazan-gold-bright) !important;
    text-shadow: 0 0 8px var(--ramazan-gold-glow);
}

/* Footer linkleri */
.footer.ramazan-theme .widget-links .link-list>li>a {
    color: #b8c4d6 !important;
}

.footer.ramazan-theme .widget-links .link-list>li>a:hover {
    color: var(--ramazan-gold-light) !important;
}

.footer.ramazan-theme a:hover {
    color: var(--ramazan-gold-light) !important;
}

/* Footer copyright */
.footer.ramazan-theme .widget-copyright {
    color: #8899aa !important;
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Footer middle section shadow */
.footer.ramazan-theme .footer-middle::before {
    background-image: linear-gradient(to bottom, rgba(10, 22, 40, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Footer hilal dekor */
.footer-ramazan-hilal {
    text-align: center;
    padding: 10px 0 0;
    font-size: 18px;
    color: var(--ramazan-gold);
    opacity: 0.5;
    letter-spacing: 20px;
}

/* ============================================
   MOBİL UYUMLU AYARLAR
   ============================================ */

@media (max-width: 991px) {


    .header.ramazan-theme .navbar-header {
        background-color: var(--ramazan-navy-dark) !important;
        border-bottom: 2px solid var(--ramazan-gold);
    }

    .header.ramazan-theme .navbar-main {
        background-color: var(--ramazan-navy) !important;
    }
}

@media (min-width: 992px) {}

/* ============================================
   TOPBAR ve ÖĞE GÜNCELLEMELERİ
   ============================================ */

/* Topbar arama butonu */
.header.ramazan-theme .topbar-search .btn-search {
    background-image: linear-gradient(315deg, var(--ramazan-navy-light) 0%, var(--ramazan-navy) 100%) !important;
}

/* Topbar kanal butonu */
.header.ramazan-theme .topbar-channel .topbar-link {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.header.ramazan-theme .topbar-channel .link-label {
    color: #fff !important;
}

/* Topbar bayrak dropdown */
.header.ramazan-theme .topbar-flags .dropdown-toggle {
    color: #fff !important;
}

.header.ramazan-theme .topbar-buttons {
    background-image: linear-gradient(315deg, var(--ramazan-gold) 0%, var(--ramazan-gold-bright) 100%) !important;
}

.header.ramazan-theme .topbar-buttons::after {
    background-color: var(--ramazan-gold) !important;
}

/* Topbar bayrak alanı Ramazan teması */
.ftco-section.ramazan-theme .topbar-flags .dropdown-toggle {
    color: #fff !important;
}

/* ============================================
   GLOBAL ANIMASYONLAR
   ============================================ */

/* Altın ışıltı efekti */
@keyframes goldGlow {

    0%,
    100% {
        box-shadow: 0 0 5px var(--ramazan-gold-glow);
    }

    50% {
        box-shadow: 0 0 15px var(--ramazan-gold-glow), 0 0 30px rgba(212, 175, 55, 0.15);
    }
}

/* Ramazan banner tarzı gradient overlay */


/* Banner Pulse Efekti */
@keyframes decorPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

/* Menü Üstü Kandil Görseli (Top Decor) */
.ramazan-top-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Görsel boyutu */
    background-image: url('../images/ay_yildiz_kandil.svg');
    background-repeat: repeat-x;
    background-position: center top;
    background-size: 340px auto;
    opacity: 0.4;
    /* İçerik altında hafif görünmesi için */
    z-index: 0;
    pointer-events: none;
    animation: decorPulse 4s ease-in-out infinite;
}


@media (max-width: 991px) {

    .ramazan-top-decor,
    .ramazan-footer-decor {
        height: 100%;
        /* Mobilde biraz daha küçük */
        background-size: 200px auto;
    }
}

/* Footer Altı Kandil Görseli (Footer Decor) */
.ramazan-footer-decor {
    position: absolute;
    top: 0;
    /* Üste sabitle */
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url('../images/ay_yildiz_kandil.svg');
    background-repeat: repeat-x;
    background-position: center top;
    /* Yukarıdan hizalı */
    background-size: 300px auto;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
    animation: decorPulse 4s ease-in-out infinite;
}