/* 1. Gerekli Dijital Yazı Tipini İçe Aktar (CSS dosyanızın en üstüne ekleyin) */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/* --- LED PANEL STİLLERİ --- */

/* Paneli sarmalayan ana kapsayıcı ve hafif süzülme animasyonu */
.led-panel-wrapper {
    max-width: 550px;
    position: relative;
    /* Mevcut floating-anim sınıfınız yoksa bu animasyonu kullanır */
    animation: panelFloat 4s ease-in-out infinite;
}

@keyframes panelFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Panelin Dış Çerçevesi */
.led-panel-frame {
    background: #1a1a1a; /* Koyu metalik çerçeve rengi */
    border: 8px solid #000; /* İç siyah kenarlık */
    border-radius: 12px;
    box-shadow:
        0 15px 35px rgba(0,0,0,0.5), /* Dış gölge */
        inset 0 2px 5px rgba(255,255,255,0.1); /* İç metalik parlama */
    padding: 5px;
    position: relative;
    overflow: hidden;
}

/* Panelin Ekran Alanı (Siyah zemin) */
.led-screen {
    background-color: #000;
    height: 110px; /* Ekran yüksekliği */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0,0,0,1); /* İç derinlik gölgesi */
}

/* --- ÖNEMLİ: Piksel Izgarası Efekti --- */
/* Bu katman, gerçek P10 panellerdeki gibi kare piksel görünümü verir */
.led-grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.85) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 2px, transparent 2px);
    background-size: 5px 5px; /* Piksel boyutu */
    z-index: 10; /* Yazının üzerinde durmalı */
    pointer-events: none;
}

/* Kayan Yazı Kapsayıcısı */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    /* Yazının ızgaranın altından parlaması için z-index ayarı */
    position: relative;
    z-index: 5;
}

/* Kayan Yazı Metni ve Animasyonu */
.marquee-text {
    display: inline-block;
    font-family: 'VT323', monospace; /* Dijital yazı tipi */
    font-size: 4.5rem; /* Büyük yazı boyutu */
    line-height: 1;
    color: #ff0000; /* Temel kırmızı LED rengi */

    /* LED PARLAMA EFEKTİ (En önemli kısım) */
    text-shadow:
        0 0 5px #ff0000,
        0 0 10px #ff0000,
        0 0 20px #ff3333;

    /* Kayan yazı animasyonu */
    animation: marqueeScroll 20s linear infinite;
    padding-left: 100%; /* Başlangıçta ekranın dışında başla */
}

/* Yazı içindeki vurgulu kısımlar (Örn: Eczane adı) */
.led-highlight {
    color: #ffffff; /* Beyaz renk */
    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #aaaaff;
}

/* Kayan Yazı Animasyon Tanımı */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); } /* Yazı uzunluğuna göre ayarlanabilir */
}

/* Alt kısımdaki Wi-Fi göstergesi */
.wifi-status {
    margin-top: 15px;
    font-weight: bold;
    color: #198754; /* Bootstrap success rengi */
    text-shadow: 0 0 10px rgba(25, 135, 84, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wifi-status i {
    animation: wifiPulse 2s infinite;
}

@keyframes wifiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .led-panel-wrapper {
        margin-top: 2rem;
    }
    .marquee-text {
        font-size: 3rem; /* Mobilde yazı boyutunu küçült */
    }
    .led-screen {
        height: 80px; /* Mobilde ekranı küçült */
    }
}
/* --- KIRMIZI TEMA AYARLARI --- */

/* 1. Aktif Menü Linki Rengi */
.navbar-nav .nav-link.active {
    color: #dc3545 !important;
    /* Bootstrap Danger Red */
    font-weight: 700;
}

/* 2. Hero Section Arka Planı (Hafif Kırmızımsı) */
/* Önceki yeşil tonu yerine hafif sıcak bir ton */
.hero-section {
    background: linear-gradient(180deg, #fff5f5 0%, #f8f9fa 100%) !important;
    border-top: 1px solid #e9ecef;
}

/* 3. Wi-Fi İkonu ve Metinleri (Genelde yeşil kalır ama kırmızı temaya uydurmak isterseniz) */
.wifi-status {
    color: #dc3545;
    /* Kırmızı */
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
}

.wifi-status .badge {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* 4. Link Hover Efektleri */
a.text-success {
    color: #dc3545 !important;
    /* Kırmızı */
}

/* 5. Ürün Kartları veya Diğer Butonlar için Genel Override (İsteğe Bağlı) */
.btn-success {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-success:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.text-success {
    color: #dc3545 !important;
}

.bg-success {
    background-color: #dc3545 !important;
}

/* Badge'ler için hafif kırmızı zemin */
.bg-success-subtle {
    background-color: #f8d7da !important;
    /* Bootstrap danger-subtle */
    color: #842029 !important;
    /* Koyu kırmızı yazı */
}