:root {
    --bg-koyu: #2b2b40;      /* Ana Arka Plan */
    --bg-kart: #3e4a61;      /* Kart Arka Planı */
    --vurgu-turkuaz: #00adb5; /* Turkuaz Vurgu Rengi */
    --vurgu-sari: #fca311;   /* İkincil Vurgu (Tarih/Saat) */
    --text-acik: white;      /* Genel Metin Rengi */
}

/* GENEL SIFIRLAMA ve TEMEL YAPI */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: var(--bg-koyu);
    color: var(--text-acik);
}

.pano-container-2 {
    display: flex;
    flex-direction: column; /* Tüm öğeler alt alta sıralanır */
    width: 100%;
    max-width: 1200px; /* Maksimum genişlik sınırı */
    margin: 0 auto;
    padding: 10px;
}

/* 1. ÜST BAŞLIK ALANI */
.pano2-header {
    background-color: var(--bg-kart);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.school-identity {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.school-logo-2 {
    height: 60px; /* Mobil için biraz daha büyük */
    margin-right: 15px;
}

.school-identity h1 {
    font-size: clamp(0.9em, 4vw, 1.4em); /* Ekran boyutuna göre ayarlanır */
    text-align: left;
    margin: 0;
    line-height: 1.2;
    font-weight: bold;
    color: var(--vurgu-sari);
}

.time-widget-2 {
    text-align: center;
    padding-top: 10px;
}

.date-2 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--vurgu-sari);
    margin: 0;
}

.time-2 {
    font-size: 2.2em;
    font-weight: bold;
    color: var(--text-acik);
    margin: 0;
}


/* 2. KAYAN DUYURULAR */
.duyuru-bar-2 {
    background-color: var(--vurgu-turkuaz);
    color: var(--text-acik);
    padding: 5px 0; /* Boşluk artırıldı */
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden; /* Dışarı taşan içeriği gizle */
    line-height: 1.2;
    /* Metnin dikeyde ortalanması için `padding-left/right` kaldırıldı. */
}

/* Yeni Kaydırma Kapsayıcısı */
.duyuru-scroll-container-2 {
    width: 100%;
    overflow: hidden;
    white-space: nowrap; /* Tüm içeriği tek bir satırda tut */
}

/* Kayan Yazının Kendisi */
.duyuru-marquee-2-style {
    display: inline-block; /* Genişliğin içeriğe göre ayarlanması için */
    will-change: transform; /* Akıcı animasyon için tarayıcıyı uyarır */
    
    /* Animasyon başlangıcı: Kaydırmanın sağdan başlaması için */
    transform: translateX(0%); 
}

/* ================================================================= */
/* AKICI KAYDIRMA ANİMASYONU KURALLARI */
/* ================================================================= */

/* Animasyonun ana tanımı (Sağdan sola kaydırma) */
@keyframes scroll-left {
  /* Başlangıç noktası: 0% (Kapsayıcı tam genişlikte olmadığı için başlangıcı 0 bırakıyoruz) */
  0% {
    transform: translateX(0%);
  }
  /* Bitiş noktası: İçeriğin tam yarısı kadar kaydır (Çünkü JS'de içeriği 2 kez kopyaladık) */
  100% {
    transform: translateX(-50%);
  }
}

/* Animasyonu Başlatma Sınıfı */
.duyuru-marquee-2-style.start-scrolling {
    animation-name: scroll-left;
    animation-timing-function: linear; /* Sabit hızda kaydırma */
    animation-duration: 60s; /* Hız: 60 saniyede döngüyü tamamla (Daha akıcı bir hız için ayarlayın) */
    animation-iteration-count: infinite; /* Sonsuza kadar tekrarla */
}

/* 3, 4, 5, 6. GENEL WIDGET/KART STİLİ */
.widget-2 {
    background-color: var(--bg-kart);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.widget-baslik-2 {
    font-size: 1.3em;
    color: var(--vurgu-turkuaz);
    margin: 0 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--vurgu-turkuaz);
    text-align: center;
}

/* DERS SAYACI (Özel Stil) */
.ders-sayaci-2 #ders-tenefus-display {
    padding: 5px 0;
}
.widget-2.ders-sayaci-2 {
    /* Genel widget stilini kullanır */
    background-color: var(--bg-kart); 
    padding: 15px; /* İç boşluğu artırarak sayaca daha fazla alan verelim */
    border: 3px solid var(--vurgu-turkuaz); /* Dış kenarlık ile vurgu */
    border-radius: 12px;
}

/* Geri Sayım Alanı (Dikey ve Yatay Ortalama) */
.ders-sayaci-2 #ders-tenefus-display {
    display: flex;
    flex-direction: column;
    align-items: center; /* Yatay ortalama */
    justify-content: center; /* Dikey ortalama */
    padding: 0; /* İç JS öğeleri için ekstra boşluk bırakma */
    min-height: 80px; /* Belirli bir yükseklik sınırı koymak (isteğe bağlı) */
}

/* Etiket Metni (Örn: 3. DERS BİTİŞİNE) */
.ders-sayaci-2 .countdown-label {
    /* Turkuaz renkle başlık vurgusu */
    color: var(--vurgu-turkuaz); 
    font-size: clamp(1em, 4vw, 1.5em); /* Ekran küçüldükçe küçülsün */
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px 0 !important; /* Zaman ile arasında küçük bir boşluk bırak */
    line-height: 1.1;
}

/* Geri Sayım Zamanı (Örn: 00:05:30) */
.ders-sayaci-2 .countdown-time {
    /* Beyaz üzerine hafif bir gölge ile patlatma */
    color: var(--text-acik); /* Beyaz */
    font-size: clamp(2.5em, 8vw, 4em); /* Ekran boyutuna göre büyük ve dinamik */
    font-weight: 900; /* Ekstra kalın */
    line-height: 1; /* Dikey boşluğu sıfırla */
    margin: 0 !important;
    
    /* Hafif metin gölgesi ile 3D görünümü verelim */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px var(--vurgu-turkuaz);
}

/* NÖBETÇİ ÖĞRETMEN TABLOSU */
.nobetci-table-2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    text-align: center;
}

.nobetci-table-2 th, .nobetci-table-2 td {
    padding: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nobetci-table-2 th {
    background-color: rgba(0, 173, 181, 0.2);
    color: var(--vurgu-turkuaz);
}

.nobetci-table-2 tr:last-child td {
    border-bottom: none;
}

.tatil-mesaj {
    font-weight: bold;
    color: var(--vurgu-sari) !important;
}

/* CANLI PROGRAM LİSTELERİ */
.program-list-2 p {
    margin: 5px 0;
    padding: 5px 0;
    text-align: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.program-table-2 {
    width: 100%;
    border-collapse: collapse; /* Çift kenarlıkları kaldır */
    font-size: 1em;
    text-align: center;
    margin-top: 5px;
}

/* Tablo Başlığı */
.program-table-2 thead th {
    background-color: var(--vurgu-turkuaz); /* Vurgu rengi arka plan */
    color: var(--bg-kart); /* Koyu kart rengiyle zıtlık */
    padding: 8px 5px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid var(--vurgu-sari); /* Sarı ile ayırıcı çizgi */
}

/* Tablo Hücreleri (Genel) */
.program-table-2 td {
    padding: 8px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Hafif ayırıcı */
    text-align: left;
}

/* Sınıf Adı Kolonu (Sol tarafta küçük yer kaplar) */
.program-table-2 .sinif-col {
    width: 25%; /* Sınıf adı için yer ayır */
    text-align: center;
    font-weight: bold;
    color: var(--vurgu-sari); /* Sarı vurgu */
}

/* Ders ve Öğretmen Kolonu (Kalan yeri kaplar) */
.program-table-2 .ders-ogretmen-col {
    width: 75%;
    text-align: center;
}

/* Son satırın alt çizgisini kaldır */
.program-table-2 tbody tr:last-child td {
    border-bottom: none;
}

/* Alternatif Satır Rengi (Şık görünüm için isteğe bağlı) */
.program-table-2 tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.1); /* Hafif koyu satırlar */
}

/* Program Yoksa Mesaj Stili */
.program-table-2 .no-program-cell {
    font-weight: bold;
    color: var(--vurgu-sari);
    padding: 15px;
    text-align: center;
}
.program-wrapper-2 {
    display: flex;
    flex-direction: column; /* Varsayılan olarak (mobil) alt alta sıralanır */
    gap: 10px; /* Kartlar arasındaki boşluk */
    margin-bottom: 10px;
}

/* Program kartlarının mobil görünümü (Zaten tam genişlikte kalacak) */
.program-wrapper-2 .program-2 {
    width: 100%;
    margin-bottom: 0; /* Alt boşluk artık kapsayıcı tarafından yönetiliyor */
}


/* TABLET VE MASAÜSTÜ EKRANLAR İÇİN MEDIA QUERY (768px üzeri) */
@media (min-width: 768px) {
    
    /* Programları yan yana hizala */
    .program-wrapper-2 {
        flex-direction: row; 
    }

    /* Her iki program kartının da eşit genişlikte olması */
    .program-wrapper-2 .program-2 {
        flex: 1; /* Kalan alanı eşit olarak paylaş */
        max-width: 50%; /* Her biri max. yarım ekran kaplasın */
    }
}