/* Pixel Art Temelleri */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Press Start 2P', cursive;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh; 
    width: 100vw;
    background: url('img/arkaplanyeni.png') no-repeat center center;/*tekrar etmesin ortala*/
    background-size: 100% 100%;
    background-attachment: fixed; 
    image-rendering: pixelated;
    display: block;             /* flex yerine block kullanmak kaydırma için daha güvenlidir */
    overflow-x: hidden;
    overflow-y: scroll;         /* 'auto' yerine 'scroll' yaparak alanı garantileyebilirsin */
}

.pixel-avatar{
    font-size: 30px;
}

/* Diğer kapsayıcıdan arka planı siliyoruz */
.game-container {
    display: flex;
    flex-direction: column; /* İçerikleri dikey hizalar */
    min-height: 100vh;      /* Ekranın tamamını kaplamasını sağlar */
    width: 100%;
    position: relative;
}

/* Parşömen Arama Çubuğu */
.scroll-search {
    position: absolute;
    top: 30px;   
    opacity: 0.8;
    right: 30px;
    display: flex;
    align-items: center;
}

.scroll-search input {
    background: rgba(46, 52, 83, 0.9);
    border-top: 4px solid  #6b73a3;
    border-bottom: 4px solid #6b73a3;
    padding: 10px 15px;
    color: #fff;
    outline: none;
    font-size: 10px;
}

.scroll-edge-left, .scroll-edge-right {
    width: 12px;
    height: 44px;
    background: rgba(46, 52, 83, 0.9);
    border: 4px solid  #6b73a3;
}

/* "Search" yazısının (placeholder) rengini belirleyen blok */
.scroll-search input::placeholder {
    color: #ffffff;    /* Yazıyı tam beyaz yapar */
    opacity: 0.9;      /* Yazının belirginliğini ayarlar (1 tam net, 0 görünmez) */
    text-shadow: 1px 1px #000; /* Yazının daha iyi okunması için hafif gölge ekler */
}

/* Sen yazı yazarken çıkan asıl harflerin rengi için bunu kontrol et: */
.scroll-search input {
    opacity: 0.9;
    color: #ffffff; /* Yazdığın harfler de açık renk olsun */
}

/* Board Yerleşimi */
.board-layout {
    flex: 1 0 auto;    /* BU SATIRI EKLE: Kalan boşluğu doldurur */
    width: 100%;
    padding-top: 160px; 
    padding-bottom: 60px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

/* Ana Başlık Paneli (Piksel Efektli) - Üste Hizalanmış */
.main-header-panel {
    /* Konumlandırma Ayarları */
    position: absolute;      /* Paneli serbest bırakır */
    top: 40px;               /* Sayfanın en üstünden 40px aşağıda durur */
    left: 50%;               /* Yatayda ekranın ortasına gider */
    transform: translateX(-50%); /* Kendi genişliğinin yarısı kadar sola kayarak tam ortalar */
    z-index: 10;             /* Diğer her şeyin üstünde görünmesini sağlar */

    /* Senin Mevcut Tasarım Kodların */
    background: rgba(46, 52, 83, 0.9);
    border: 4px solid #6b73a3;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 
        4px 4px 0px #000,
        inset -4px -4px 0px rgba(0,0,0,0.3);
}
.main-title {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
}

.date-text {
    font-size: 8px;
    color: #939bc8;  
}

/* Kartlar Izgarası */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 90%;
    max-width: 1000px;
}

/* Piksel Kart Tasarımı */
.pixel-card {
    background: rgba(107, 115, 163, 0.7);
    backdrop-filter: blur(4px);
    border: 4px solid #3d426b;
    padding: 12px;
    color: #fff;

    /* Piksel Gölgelendirme */
    box-shadow: 
        4px 4px 0px #000,
        inset -4px -4px 0px rgba(0,0,0,0.2);
}

.card-meta {
    font-size: 8px;
    border-bottom: 3px solid rgba(0,0,0,0.2);
    padding-bottom: 8px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.tag { padding: 2px 4px; font-size: 7px; }
.tag.green { background: #32a852; }
.tag.purple { background: #8e44ad; }

.card-body {
    font-size: 9px;
    line-height: 1.6;
}

.label { color: #d1d5ed; }

.card-footer {
    margin-top: 10px;
    font-size: 7px;
    color: #a4abd1;
}

/* Hover Efekti */
.pixel-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #000;
    background: rgba(107, 115, 163, 0.85);
}

/* 5. FOOTER BLOĞU: En alta pikselli çubuk */
.pixel-footer {
    width: 100%;
    opacity: 0.8;
    background: rgba(46, 52, 83, 0.95);
    border-top: 4px solid #6b73a3;
    padding: 30px 0;
    text-align: center;
    box-shadow: 0 -4px 0px #000;
    
    /* YENİ EKLENEN SABİTLEME KODLARI: */
    position: fixed;   /* Sayfaya sabitler */
    bottom: 0;         /* En alta yapıştırır */
    left: 0;           /* Sola yaslar */
    z-index: 100;      /* Diğer her şeyin üstünde görünmesini sağlar */
}

.footer-text {
    color: #939bc8;
    font-size: 10px;
    letter-spacing: 1px;
}

/* NPC Temel Stil */
.npc {
    position: fixed;
    
    width: 80px; 
    height: 80px;
    z-index: 99;
    pointer-events: none;
    /* Dönüşleri ve hareketi yumuşatır */
    transition: left 3s linear, top 3s linear, transform 0.4s ease-in-out;
    image-rendering: pixelated;
    display: flex;
    justify-content: center;
    align-items: center;
}

.npc img {
    width: 100%;
    height: auto;
    /* Resimdeki o büyülü hava için hafif bir mavi parlama ekledik */
    filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.6));
}
#roaming-npc, #roaming-npc-2 {
    width: 80px;
    height: 80px;
    /* Hafif yukarı aşağı süzülme efekti (Floating) */
    animation: floatNPC 3s ease-in-out infinite;
}

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

#roaming-npc-2 img {
    /* Pofuduk karakter için yumuşak pembe bir parlama */
    filter: drop-shadow(0 0 10px rgba(255, 192, 203, 0.6));
}

/* --- BOARD İÇİN ÖZEL KOYU KABUK --- */
.dila-board-nav {
    width: 100%; background: rgba(46, 52, 83, 0.95); border-bottom: 4px solid #6b73a3;
    padding: 15px 0; position: sticky; top: 0; z-index: 9999;
}
.nav-inner {
    max-width: 1100px; margin: 0 auto; display: flex;
    justify-content: space-between; align-items: center; padding: 0 20px;
}
.dila-board-nav .logo { color: #F4A7BA; font-size: 14px; text-decoration: none; letter-spacing: 2px; }
.menu-links a, .drop-btn { color: #fff; text-decoration: none; font-size: 8px; cursor: pointer; }
.menu-links a:hover, .drop-btn:hover { color: #F4A7BA; }

/* Dropdown */
.board-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 20px; }
.drop-content {
    display: none; position: absolute; background: #2e3453; border: 3px solid #6b73a3;
    min-width: 140px; margin-top: 10px; z-index: 10001; box-shadow: 4px 4px 0px #000;
}
.board-dropdown:hover .drop-content { display: block; }
.drop-content a { padding: 10px; display: block; border-bottom: 2px solid #3d426b; }

/* Footer Linkleri İçin (Mevcut .pixel-footer içine ADÜ linklerini ekle) */
/* Library yazısını ve diğer linkleri mühür gibi hizalar */
.menu-links {
    display: flex;
    align-items: center; /* Bu satır tüm linkleri dikeyde tam ortaya çeker */
    gap: 20px;
}

.board-dropdown {
    position: relative; /* Altındaki menünün buna göre hizalanmasını sağlar */
    display: inline-block;
}

.drop-btn {
    display: flex;
    align-items: center; /* Yazı ve yanındaki oku hizalar */
    gap: 5px;
    line-height: normal; /* Kaymayı önlemek için satır yüksekliğini standartlaştırır */
    padding: 0;
    margin: 0;
}

/* --- FOOTER DÜZENLEME --- */
.pixel-footer {
    width: 100%;
    background: rgba(46, 52, 83, 0.95); /* Board temasına uygun koyu renk */
    border-top: 4px solid #6b73a3;
    padding: 30px 0;
    text-align: center;
    margin-top: 50px;
}

.pixel-footer-links {
    display: flex;
    justify-content: center; /* Linkleri yan yana ortalar */
    gap: 20px;
    margin-bottom: 15px;
}

.pixel-footer-links a {
    color: #F4A7BA; /* Diğer sayfalardaki pembe tonu */
    text-decoration: none !important;
    font-size: 9px;
    font-weight: bold;
    transition: 0.3s;
}

.pixel-footer-links a:hover {
    text-shadow: 0 0 8px #F4A7BA;
    color: #fff;
}

.footer-text {
    color: #939bc8;
    font-size: 8px;
    margin-top: 10px;
}
/* Çentiğin şekli */
.centik {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor; /* Yazı rengi neyse o renk olur */
    transition: transform 0.3s ease;
}

/* Üstüne gelince okun dönmesi için */
.board-dropdown:hover .centik {
    transform: rotate(180deg);
}

.drop-content {
    display: none;         /* Başlangıçta gizli */
    position: absolute;    /* Özgürce konumlandır */
    top: 100%;             /* Library yazısının tam alt sınırından başla */
    left: 0;               /* Sol kenarı Library ile hizala */
    background-color: #6b73a3; /* Arka plan rengi */
    min-width: 160px;      /* Genişlik */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2); /* Biraz derinlik */
    z-index: 1000;         /* Diğer içeriklerin üstünde kalsın */
    border-radius: 4px;    /* Köşeleri yumuşat */
    padding: 8px 0;
}

/* 3. Mouse üzerine gelince göster */
.board-dropdown:hover .drop-content {
    display: block;
}

/* 4. İçindeki linklerin görünümü */
.drop-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Hover efekti */
.drop-content a:hover {
    background-color: #f1f1f1;
}