/*
Theme Name: Winpress Reborn
Theme URI: https://seninsiten.com/winpress
Author: Senin Adın
Description: Windows 11 Deneyimi
Version: 1.8
*/

/* --- TEMEL AYARLAR --- */
* { box-sizing: border-box; }

body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; /* Sayfa kaydırmayı engelle */
    font-family: 'Segoe UI', sans-serif; 
    background-color: #000; /* Resim yüklenmezse siyah kalsın */
}

/* 1. DUVAR KAĞIDI KATMANI (En Altta) */
#wallpaper-layer {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 1; /* En altta */
    background-size: cover; 
    background-position: center;
    transition: filter 0.5s ease, transform 0.5s ease;
}
/* Kilit ekranı açılınca blur efekti */
#wallpaper-layer.blur-active {
    filter: blur(30px); 
    transform: scale(1.1);
}

/* 2. KİLİT ve GİRİŞ EKRANLARI (Masaüstünün Üstünde) */
.lock-screen, .login-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2000; /* En üst katmanlarda */
    display: flex; flex-direction: column; align-items: center;
    color: white; transition: all 0.5s ease-in-out;
}

/* Kilit Ekranı */
.lock-screen { justify-content: flex-start; padding-top: 10vh; z-index: 2001; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.lock-screen.slide-up { top: -100vh; opacity: 0; }
.lock-time { font-size: 90px; font-weight: 300; }
.lock-date { font-size: 28px; font-weight: 400; }
.lock-hint { position: absolute; bottom: 50px; font-size: 14px; opacity: 0.8; animation: blink 2s infinite; }

/* Giriş Ekranı */
.login-screen { justify-content: center; z-index: 2000; background: rgba(0,0,0,0.4); }
.login-screen.hidden { display: none; }
.login-container { display: flex; flex-direction: column; align-items: center; width: 320px; text-align: center; animation: fadeIn 0.5s ease-out; }
.user-avatar img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.user-name { font-size: 26px; font-weight: 600; margin: 0 0 10px 0; }
.daily-question { font-size: 14px; margin-bottom: 20px; opacity: 0.9; background: rgba(0,0,0,0.3); padding: 5px 10px; border-radius: 4px; }
.pin-wrapper { position: relative; width: 100%; margin-bottom: 10px; }
#pin-input { width: 100%; padding: 10px 15px; padding-right: 40px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.3); color: white; font-size: 18px; outline: none; transition: all 0.3s; }
#pin-input:focus { background: white; color: black; border-color: white; }
#pin-submit { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: white; font-size: 18px; cursor: pointer; }
#pin-input:focus + #pin-submit { color: black; }
#pin-error-msg { color: #ff6b6b; font-size: 13px; font-weight: bold; display: none; margin-bottom: 10px; }
.forgot-pin { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13px; }

/* 3. MASAÜSTÜ ALANI (ŞEFFAF) */
.desktop-wrapper {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 10; /* Wallpaper'ın (1) üstünde */
    background: transparent; /* ŞEFFAF: Arkadaki resim görünsün diye */
    padding-bottom: 50px; 
    overflow: hidden;
}
.desktop-wrapper.blurred { filter: blur(10px); }

/* --- MASAÜSTÜ İKONLARI (GÜNCELLENDİ) --- */
.desktop-icons-container {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: calc(100vh - 50px);
    gap: 10px;
    align-content: flex-start;
    
    /* GİZLEME VE ANİMASYON AYARLARI */
    opacity: 0; /* Başlangıçta görünmez */
    transform: scale(0.95); /* Hafif küçük başla */
    pointer-events: none; /* Görünmezken tıklanmasın */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Yumuşak geliş efekti */
}

/* JS ile bu sınıf eklenince İkonlar belirecek */
.desktop-icons-container.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Tekil İkon Stilleri (Aynı kalıyor) */
.desktop-icon { 
    width: 85px; 
    padding: 5px; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    cursor: pointer; 
    transition: background 0.2s; 
}
.desktop-icon:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.desktop-icon img { width: 48px; height: 48px; margin-bottom: 5px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.desktop-icon span { color: white; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,0.9); line-height: 1.3; }
.desktop-icon-link { text-decoration: none; }

/* 4. WINDOWS 11 TASKBAR (EN ALTTA) */
/* --- 4. WINDOWS 11 TASKBAR (GÜNCELLENDİ) --- */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: rgba(243, 243, 243, 0.85); /* Buzlu Beyaz */
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 5000;
    border-top: 1px solid rgba(255,255,255,0.3);
    
    /* GİZLEME VE ANİMASYON AYARLARI */
    transform: translateY(150%); /* Başlangıçta ekranın altında gizli */
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); /* Çok yumuşak kayma efekti */
}

/* JS ile bu sınıf eklenince Taskbar yukarı çıkacak */
.taskbar.active {
    transform: translateY(0);
}

/* Diğer Taskbar stilleri aynı kalıyor... */
.taskbar-center { 
    display: flex; 
    gap: 6px; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%);
}

.taskbar-icon {
    width: 40px; height: 40px; border-radius: 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s;
}
.taskbar-icon:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 2px 4px rgba(0,0,0,0.1); transform: translateY(-2px); }
.taskbar-icon:active, .taskbar-icon.active { background-color: rgba(255, 255, 255, 0.4); transform: scale(0.95); }
.taskbar-icon img { width: 24px; height: 24px; transition: transform 0.2s; }
.taskbar-icon:hover img { transform: scale(1.1); }

.taskbar-right { display: flex; align-items: center; gap: 10px; height: 100%; z-index: 5001; }
.tray-icons { display: flex; gap: 8px; }
.taskbar-datetime { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; font-size: 12px; line-height: 1.1; color: #333; cursor: default; }
#tb-time { font-weight: 600; }

/* Sağ Taraf (Saat) */
.taskbar-right { display: flex; align-items: center; gap: 10px; height: 100%; z-index: 5001; }
.tray-icons { display: flex; gap: 8px; }
.taskbar-datetime { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; font-size: 12px; line-height: 1.1; color: #333; cursor: default; }
#tb-time { font-weight: 600; }

/* 5. BAŞLAT MENÜSÜ */
.win11-start-menu {
    position: fixed; bottom: 55px; left: 50%; transform: translateX(-50%) translateY(20px);
    width: 600px; height: 600px; background: rgba(243, 243, 243, 0.95); backdrop-filter: blur(20px);
    border-radius: 8px; box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    display: none; flex-direction: column; z-index: 4999; border: 1px solid rgba(0,0,0,0.1); opacity: 0; transition: all 0.2s;
}
.win11-start-menu.active { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.start-search-bar { padding: 25px 30px 10px; }
.start-search-bar input { width: 100%; padding: 10px 15px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px; }
.start-content { padding: 10px 30px; flex-grow: 1; }
.pinned-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; margin-top: 15px; }
.app-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 10px; border-radius: 4px; }
.app-item:hover { background: rgba(255,255,255,0.5); }
.app-item img { width: 32px; height: 32px; margin-bottom: 5px; }
.app-item span { font-size: 11px; color: #333; }
.start-footer { padding: 15px 40px; border-top: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; background: rgba(240,240,240,0.6); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.user-profile { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; }
.user-profile img { width: 32px; height: 32px; border-radius: 50%; }

/* 6. PENCERELER (Windows) */
.window {
    position: absolute; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.1);
    min-width: 350px; display: flex; flex-direction: column; z-index: 500; overflow: hidden; animation: popIn 0.2s cubic-bezier(0,1,0,1);
}
.window-header { background: #fff; height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #f0f0f0; cursor: default; user-select: none; }
.window-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; color: #333; }
.window-controls { display: flex; gap: 5px; }
.win-btn { width: 30px; height: 30px; border: none; background: transparent; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.win-btn:hover { background: #eee; }
.win-btn.close:hover { background: #c42b1c; color: white; }
.window-body { padding: 0; flex-grow: 1; overflow-y: auto; max-height: 70vh; }

@keyframes fadeIn { from {opacity:0; transform: scale(0.9);} to {opacity:1; transform: scale(1);} }
@keyframes popIn { from {transform: scale(0.95); opacity: 0;} to {transform: scale(1); opacity: 1;} }
@keyframes blink { 0%,100% {opacity:1} 50% {opacity:0.3} }

/* --- SİYAH EKRAN DÜZELTMESİ --- */

/* Masaüstü kapsayıcısı kesinlikle şeffaf olmalı */
#desktop-wrapper, .desktop-wrapper {
    background-color: transparent !important; 
    background: transparent !important;
}

/* Duvar kağıdı her zaman görünür olmalı */
#wallpaper-layer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================
   MOBİL VE TABLET UYUMLULUĞU (RESPONSIVE)
   ========================================= */

@media screen and (max-width: 768px) {

    /* 1. KİLİT VE GİRİŞ EKRANI */
    .lock-time { font-size: 60px; }
    .lock-date { font-size: 20px; }
    
    .login-container { width: 90%; }
    .user-avatar img { width: 100px; height: 100px; }
    .user-name { font-size: 22px; }
    
    /* 2. MASAÜSTÜ İKONLARI */
    .desktop-icons-container {
        flex-direction: row; /* Yan yana dizilsin */
        height: auto;
        justify-content: flex-start;
        padding: 20px 10px;
    }
    
    .desktop-icon {
        width: 25%; /* Ekrana 4 tane sığsın */
        margin-bottom: 10px;
    }
    
    .desktop-icon img { width: 40px; height: 40px; }
    .desktop-icon span { font-size: 11px; }

    /* 3. PENCERELER (Mobilde Tam Ekran Gibi Olsun) */
    .window {
        width: 94% !important;
        left: 3% !important;
        top: 60px !important; /* Taskbar üstü */
        height: auto !important;
        max-height: 80vh !important;
        /* Sürüklemeyi engellemek için */
        transform: none !important; 
    }
    
    /* Mobilde pencere başlığı biraz daha büyük olsun */
    .window-header { padding: 10px 15px; } 

    /* 4. TASKBAR (GÖREV ÇUBUĞU) */
    .taskbar { padding: 0 5px; }
    
    /* Sol boşluğu ve Sağdaki Tray ikonlarını gizle, yer aç */
    .taskbar-left { display: none; }
    .tray-icons { display: none; }
    
    /* Sadece saati göster */
    .taskbar-datetime { 
        align-items: center; 
        font-size: 11px; 
    }
    #tb-date { display: none; } /* Tarihi gizle, sadece saat kalsın */

    /* İkonları biraz küçült ve sıkılaştır */
    .taskbar-icon { width: 35px; height: 35px; margin: 0 2px; }
    .taskbar-icon img { width: 22px; height: 22px; }

    /* 5. BAŞLAT MENÜSÜ */
    .win11-start-menu {
        width: 96%;
        height: 70vh;
        bottom: 50px;
        left: 2%;
        transform: none !important; /* Ortalamayı iptal et, elle yerleştir */
        opacity: 0;
        display: none;
    }
    
    .win11-start-menu.active {
        display: flex;
        opacity: 1;
        /* transform iptal edildiği için animasyon sadece opacity olacak */
    }

    .pinned-grid {
        grid-template-columns: repeat(4, 1fr); /* 6 yerine 4 sütun */
    }
}

/* =========================================
   MOBİL VE TABLET UYUMLULUĞU (IPHONE FIX)
   ========================================= */

@media screen and (max-width: 768px) {

    /* 1. KİLİT VE GİRİŞ EKRANI */
    .lock-time { font-size: 60px; }
    .lock-date { font-size: 20px; }
    
    .login-container { width: 90%; }
    .user-avatar img { width: 100px; height: 100px; }
    .user-name { font-size: 22px; }
    
    /* 2. MASAÜSTÜ İKONLARI */
    .desktop-icons-container {
        flex-direction: row; /* Yan yana dizilsin */
        flex-wrap: wrap;
        height: auto;
        justify-content: flex-start; /* Sola yasla */
        padding: 20px 10px;
        gap: 15px;
    }
    
    .desktop-icon {
        width: 70px; /* Sabit genişlik */
        margin-bottom: 5px;
    }
    
    .desktop-icon img { width: 40px; height: 40px; }
    .desktop-icon span { font-size: 11px; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 3. PENCERELER (Mobilde Tam Ekran Gibi) */
    .window {
        width: 94% !important;
        left: 3% !important;
        top: 60px !important;
        height: auto !important;
        max-height: 75vh !important;
        transform: none !important; 
    }
    .window-header { padding: 10px 15px; } 

    /* 4. TASKBAR (SAAT DÜZELTMESİ BURADA) */
    .taskbar { 
        padding: 0 10px; 
        /* iPhone Home Çubuğu için güvenli alan */
        padding-bottom: env(safe-area-inset-bottom); 
        height: calc(48px + env(safe-area-inset-bottom));
        align-items: flex-start; /* İçeriği yukarı hizala */
        padding-top: 5px; /* Üstten biraz boşluk */
    }
    
    /* Sol boşluğu ve Tray ikonlarını gizle */
    .taskbar-left { display: none; }
    .tray-icons { display: none; }
    
    /* Orta kısım (İkonlar) */
    .taskbar-center {
        /* Mutlak ortalama yerine biraz sola kayabilir veya ikon sayısı azaltılabilir */
        gap: 2px;
    }

    /* SAĞ KISIM (SAAT) - DÜZELTME */
    .taskbar-right {
        margin-left: auto; /* SİHİRLİ KOD: Bu, saati en sağa iter */
        display: flex;
        align-items: center;
        height: 40px; /* İkon yüksekliğiyle eşitle */
    }
    
    /* Sadece saati göster */
    .taskbar-datetime { 
        align-items: flex-end; 
        font-size: 12px; 
    }
    #tb-date { display: none; } /* Tarihi gizle */

    /* İkonları biraz küçült */
    .taskbar-icon { width: 35px; height: 35px; margin: 0 1px; }
    .taskbar-icon img { width: 20px; height: 20px; }

    /* 5. BAŞLAT MENÜSÜ */
    .win11-start-menu {
        width: 96%;
        height: 60vh;
        bottom: 70px;
        left: 2%;
        transform: none !important;
        opacity: 0;
        display: none;
    }
    
    .win11-start-menu.active {
        display: flex;
        opacity: 1;
    }

    .pinned-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Küçük Telefonlar İçin */
@media screen and (max-width: 380px) {
    .taskbar-icon { width: 30px; height: 30px; }
    .taskbar-icon img { width: 18px; height: 18px; }
    .pinned-grid { grid-template-columns: repeat(3, 1fr); }
}