/* GENEL SAYFA AYARLARI */
body {
    background-color: #242323; /* Tamamen siyah arka plan */
    background-image: url('bg.gif'); /* Eğer pikselli bir görsel koyarsan diye burada durabilir */
    background-repeat: repeat;
    background-attachment: fixed;
    
    /* Kod/Terminal hissi veren font ailesi */
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    
    /* Yazı rengi: Parlak Terminal Yeşili */
    color: #00FF41; 
    
    /* Metinleri her yerde yatayda ortalar */
    text-align: center; 
    
    /* Eski ekranlardaki parlama efektini hafifçe taklit etmek için metin gölgesi */
    text-shadow: 0px 0px 5px #00FF41; 
}

.container {
    max-width: 1000px; /* Eski geniş, rahat okuma boyutu */
    margin: 20px auto; /* Sayfayı tam ortalar */
    background-color: #000000;
    border: 1px solid #00FF41;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden; /* Taşmaları ve beyaz çubuğu engeller */
    position: relative;
    z-index: 10;
}

.page-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch; /* İki kutunun da boyunu zorla eşitler */
    gap: 20px; 
    width: 95%; /* Ekran %95'ini kaplasın */
    max-width: 1000px; /* Ama 1000px'i geçmesin */
    min-width: 800px;  /* 800px'den daha küçük ekranlarda kırılmasın (Kutuları alt alta atmaz) */
    margin: 20px auto; /* Ekranın ortasında düzgün durması için */
    position: relative;
    z-index: 10;
}

/* 1. SOL ANA EKRAN (Daha Dar) */
.page-wrapper .container {
    flex: 1; 
    max-width: 920px; /* Ana sayfada yan panel olduğu için daralır */
    margin: 0; /* Ortalama işini artık page-wrapper yaptığı için sıfırlanır */
}

.page-wrapper .container::before {
content: "";
    position: fixed; 
    bottom: 0;    /* Görseli ekranın en altına yapıştırır */
    left: 0;      /* Görseli ekranın en soluna yapıştırır */
    width: 75vw; /* Görselin yayılabileceği alanı ekran genişliği kadar açar */
    height: 75vh;/* Görselin yayılabileceği alanı ekran yüksekliği kadar açar */
    
    /* GÖRSELİN DOSYA ADINI BURAYA YAZIYORSUN */
    background-image: url('chainsawdevil.png'); 
    background-repeat: no-repeat;
    
    /* Görselin merkezini sol alt köşe olarak belirler */
    background-position: left bottom; 
    
    /* SİHİRLİ KISIM: Ekrandan taşmadan kaplayabileceği MAKSİMUM boyuta ulaşır */
    background-size: contain; 
    
    opacity: 0.15; /* %15 Görünürlük */
    z-index: -1;
}

.page-wrapper .container::after {
content: "";
    position: fixed; 
    bottom: 0;    /* Görseli ekranın en altına yapıştırır */
    right: 0;      /* Görseli ekranın en soluna yapıştırır */
    width: 68vw; /* Görselin yayılabileceği alanı ekran genişliği kadar açar */
    height: 68vh;/* Görselin yayılabileceği alanı ekran yüksekliği kadar açar */
    
    /* GÖRSELİN DOSYA ADINI BURAYA YAZIYORSUN */
    background-image: url('shin.png'); 
    background-repeat: no-repeat;
    
    /* Görselin merkezini sol alt köşe olarak belirler */
    background-position: right bottom; 
    
    /* SİHİRLİ KISIM: Ekrandan taşmadan kaplayabileceği MAKSİMUM boyuta ulaşır */
    background-size: contain; 
    
    opacity: 0.15; /* %15 Görünürlük */
    z-index: -1;
}

/* 2. SAĞ KONTROL PANELİ (Daha Geniş) */
.sidebar {
    width: 350px;
    flex-shrink: 0; /* SİHİRLİ KOD: Sidebar asla küçülmez */
    background-color: #000000;
    border: 1px solid #00FF41;
    box-sizing: border-box;
    padding: 15px;
}

/* LİNKLERİN GÖRÜNÜMÜ */
a {
    /* Linkler de yeşil olsun ama biraz daha koyu */
    color: #008F11; 
    text-decoration: none; /* Alt çizgisini kaldırır */
    font-weight: bold;
}

a:hover {
    /* Üzerine gelince parlak yeşil olsun ve arka planı yeşil olsun (seçili metin gibi) */
    color: #242323;
    background-color: #00FF41;
    text-shadow: none; /* Seçiliyken parlamayı kapat */
}

/* BAŞLIKLAR (H1, H2, H3 vb.) */
h1, h2, h3 {
    text-transform: uppercase; /* Başlıkların hepsini BÜYÜK HARF yapar */
    letter-spacing: 2px; /* Harfler arasına biraz boşluk ekler */
    border-bottom: 1px dashed #008F11; /* Başlıkların altına kesik çizgili ayraç */
    padding-bottom: 10px;
    display: inline-block; /* Çizginin sadece yazının altında kalması için */
}

/* LİSTELER (Madde işaretleri için) */
ul {
    list-style-type: none; /* Normal madde imlerini (yuvarlakları) kaldırır */
    padding: 0;
}

li {
    margin-bottom: 15px; /* Maddeler arasına boşluk */
}

/* Maddelerin başına terminal imleci gibi bir karakter ekleyelim */
li::before {
    content: "> ";
    color: #00FF41;
}

/* ÇİZGİLER (HR) */
hr {
    border: 0;
    border-top: 1px dashed #008F11; /* Kesik çizgili ayraç */
    margin: 30px 0;
}

/* WIDGET GENEL AYARLARI */
.widget {
    border: 1px solid #008F11;
    background: #000500;
    padding: 10px;
    box-shadow: 2px 2px 0px #00FF41; /* Klasik retro gölge efekti */
}

.widget-title {
    color: #00FF41;
    font-weight: bold;
    border-bottom: 1px dashed #008F11;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 13px;
}

/* =========================================
   MEDIA_HUB GÖRSEL VİTRİN AYARLARI
   ========================================= */

/* Görselleri yan yana dizmek için ızgara yapısı */
.media-gallery {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Her bir fotoğrafın çerçevesi */
.media-card {
    border: 1px dashed #00FF41;
    padding: 5px;
    background-color: #001100;
    width: 30%; /* Yan yana 3 fotoğraf sığması için */
    min-width: 150px;
}

/* Fotoğrafların terminal efekti */
.media-card img {
    width: 100%;
    height: auto;
    display: block;
    /* Görseli siyah-beyaz ve yüksek kontrastlı yapar (Terminal Ekranı gibi) */
    filter: grayscale(100%) sepia(100%) hue-rotate(70deg) contrast(150%);
    transition: filter 0.3s ease; /* Renk geçişini yumuşatır */
}

/* Fare üzerine gelince orijinal renklerine dönsün */
.media-card img:hover {
    filter: grayscale(0%) sepia(0%) contrast(100%);
    cursor: crosshair; /* İmleci hedef simgesine çevirir */
}

/* Fotoğraf altı yazıları */
.media-caption {
    font-size: 12px;
    padding-top: 5px;
    text-align: center;
    color: #00FF41;
}

.ascii-header {
    font-family: monospace; /* Karakterlerin hizalı durması için zorunludur */
    white-space: pre;
    color: #00FF41;
    text-shadow: 0px 0px 8px #00FF41;
    font-size: 12px; /* Ekrana sığması için boyutu küçülttük */
    line-height: 1.1;
    text-align: center;
    overflow-x: auto; /* Ekran daralırsa şekil bozulmasın, alttan kaydırma çubuğu çıksın */
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* 2. YENİ EKLENECEK HAYALET KATMAN (FİLİGRAN) KODU */
.container::before {
content: "";
    position: fixed; 
    bottom: 0;    /* Görseli ekranın en altına yapıştırır */
    left: 0;      /* Görseli ekranın en soluna yapıştırır */
    width: 99vw; /* Görselin yayılabileceği alanı ekran genişliği kadar açar */
    height: 99vh;/* Görselin yayılabileceği alanı ekran yüksekliği kadar açar */
    
    /* GÖRSELİN DOSYA ADINI BURAYA YAZIYORSUN */
    background-image: url('chainsawdevil.png'); 
    background-repeat: no-repeat;
    
    /* Görselin merkezini sol alt köşe olarak belirler */
    background-position: left bottom; 
    
    /* SİHİRLİ KISIM: Ekrandan taşmadan kaplayabileceği MAKSİMUM boyuta ulaşır */
    background-size: contain; 
    
    opacity: 0.15; /* %15 Görünürlük */
    z-index: -1;
}

.container::after {
content: "";
    position: fixed; 
    bottom: 0;    /* Görseli ekranın en altına yapıştırır */
    right: 0;      /* Görseli ekranın en soluna yapıştırır */
    width: 90vw; /* Görselin yayılabileceği alanı ekran genişliği kadar açar */
    height: 90vh;/* Görselin yayılabileceği alanı ekran yüksekliği kadar açar */
    
    /* GÖRSELİN DOSYA ADINI BURAYA YAZIYORSUN */
    background-image: url('shin.png'); 
    background-repeat: no-repeat;
    
    /* Görselin merkezini sol alt köşe olarak belirler */
    background-position: right bottom; 
    
    /* SİHİRLİ KISIM: Ekrandan taşmadan kaplayabileceği MAKSİMUM boyuta ulaşır */
    background-size: contain; 
    
    opacity: 0.15; /* %15 Görünürlük */
    z-index: -1;
}

@media screen and (max-width: 768px) {
    body::before {
        background-size: 40% !important; /* Görseli ekranın %40'ına kadar küçültür */
        opacity: 0.05 !important; /* Mobilde yazıları bozmaması için çok daha silik yapar */
    }
    
    body::after {
        background-size: 40% !important; 
        opacity: 0.05 !important;
    }
}

.winamp {
    padding: 5px;
    border: 2px solid #333;
    background: #111;
    box-shadow: none;
}

.winamp-header {
    background-color: #0000A0; /* Klasik Winamp Mavi Başlığı */
    color: #FFF;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.winamp-screen {
    background-color: #000;
    border: 2px inset #555; /* İçeri göçük ekran hissi */
    color: #00FF00;
    padding: 5px;
    font-family: monospace;
    font-size: 12px;
    margin-bottom: 5px;
}

.winamp-controls {
    display: flex;
    justify-content: space-between;
    gap: 2px;
}

.winamp-controls button {
    background: #CCC; /* Retro gri butonlar */
    color: #000;
    border: 2px outset #EEE; /* Dışa çıkık buton hissi */
    cursor: pointer;
    font-size: 10px;
    flex: 1;
    padding: 3px;
}

.winamp-controls button:active {
    border: 2px inset #EEE; /* Basılma hissi */
    background: #AAA;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 sütunlu ızgara yapısı (GÜN SAYISI KADAR) */
    gap: 2px; /* Sayılar arasındaki boşluk */
    text-align: center;
    font-family: monospace; /* Karakterlerin eşit genişlikte olması için */
    font-size: 11px;
    color: #00FF41;
    margin-top: 5px;
}

.day-name {
    font-weight: bold;
    color: #00FF41;
    border-bottom: 1px dashed #008F11;
    padding-bottom: 3px;
    margin-bottom: 5px;
}

.log-day {
    color: #FFD700; 
    text-shadow: 0px 0px 5px #FFD700;
    border-bottom: 1px solid #FFD700;
}