/* ==========================================================================
   9NAU9 RETRO EL KONSOLU TASARIMI (GÜNCEL STYLE.CSS)
   ========================================================================== */

/* Temel Sıfırlamalar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    /* Arka planı eski atari salonları gibi loş ve koyu yapıyoruz */
    background-color: #0c0c0e; 
    background-image: radial-gradient(#151518 20%, transparent 20%),
                      radial-gradient(#151518 20%, transparent 20%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    display: flex;
    justify-content: center;
    height: 100dvh;
    overflow: hidden;
}

/* Mobil Ekran Kapsayıcısı - KONSOLUN ANA GÖVDESİ */
.app-container {
    width: 100%;
    max-width: 430px;
    height: 100dvh;
    /* Mat el konsolu kasası rengi */
    background-color: #1a1a1e; 
    display: flex;
    flex-direction: column;
    /* Konsol kasasına plastik derinliği veren dış gölgeler */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 
                inset 0 4px 10px rgba(255, 255, 255, 0.05),
                inset 0 -4px 10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
    border: 4px solid #111;
}

/* 1. ÜST BAR: Konsolun Durum LCD Ekranı */
.top-bar {
    background-color: #0d0d0f;
    border-bottom: 3px solid #111;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.5);
}

.top-bar h1 {
    font-family: 'VT323', monospace;
    font-size: 28px;
    /* Mat yeşil/kehribar parlaması */
    color: #bfc9c0; 
    text-shadow: 0 0 8px rgba(145, 226, 159, 0.5);
    letter-spacing: 1px;
}

/* 2. ORTA ALAN: Konsolun İçine Gömülmüş Cam Ekran */
.content-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ekranın etrafındaki siyah çerçeve matrisi */
    background-color: #050505; 
    padding: 12px;
    overflow: hidden;
    /* Ekranın kasaya gömüldüğünü hissettiren iç gölge */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9),
                0 2px 4px rgba(255, 255, 255, 0.05);
}

.iframe-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
}

#main-iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: transparent;
}

.iframe-placeholder {
    font-family: 'VT323', monospace;
    font-size: 32px;
    color: #555;
    position: absolute;
    z-index: 1;
}

/* 3. ALT BAR: Tuş Takımı Paneli */
.bottom-bar {
    background-color: #151518;
    border-top: 3px solid #111;
    height: 70px; /* Butonların rahat basılması için alanı genişlettik */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    flex-shrink: 0;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.6);
}

/* 4. FİZİKSEL ATARİ / KONSOL BUTONLARI */
.icon-btn {
    color: #fff !important;
    background: #2a2a30;
    border: 2px solid #3a3a42;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px !important;
    /* Gerçek plastik tuş derinliği veren gölgeler */
    box-shadow: 0 4px 0 #111, 
                inset 0 2px 4px rgba(255, 255, 255, 0.1);
    transition: all 0.05s ease;
}

/* Butona Basılma Efekti (Fiziksel Yay Hissiyatı) */
.icon-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #111, 
                inset 0 2px 4px rgba(0, 0, 0, 0.4);
    background: #222;
}

/* Ortadaki Büyük İleri/Geçiş Butonu (Arcade Tarzı Vurgu) */
.icon-large {
    width: 52px;
    height: 52px;
    font-size: 26px !important;
    background: #FF3B30; /* Canlı kırmızı bir atari butonu */
    border-color: #ff5247;
    box-shadow: 0 5px 0 #8a0303, 
                inset 0 3px 4px rgba(255, 255, 255, 0.2);
}

.icon-large:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #8a0303, 
                inset 0 3px 4px rgba(0, 0, 0, 0.5);
    background: #b8140c;
}

/* İkon Gruplamaları (Hizalamayı bozmamak için sabit genişlikler) */
.footer-left, .footer-right {
    display: flex;
    gap: 15px;
    width: 100px;
    align-items: center;
}

.footer-right {
    justify-content: flex-end;
}

.footer-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dolu Kalp Efekti */
.heart-filled {
    color: #FF3B30 !important;
    filter: drop-shadow(0 0 10px rgba(255, 59, 48, 0.6));
}

/* Ensure SVG inside the heart button fills when active */
.heart-filled svg {
    fill: currentColor;
}

/* ==========================================
   İNDİR (INSTALL) BUTONU - YUMUŞAK LED EFEKTİ
   ========================================== */

.install-ready {
    color: #4CD964 !important; 
    border-color: #4CD964 !important;
    /* Süreyi 2 saniyeye çıkarıp 'ease-in-out' ekledik, böylece yavaşça nefes alır gibi yanıp söner */
    animation: soft-glow 2s infinite alternate ease-in-out;
}

@keyframes soft-glow {
    0% { 
        /* Işık neredeyse tamamen kapalı */
        box-shadow: 0 4px 0 #111, 
                    0 0 2px rgba(76, 217, 100, 0.1), 
                    inset 0 2px 4px rgba(255,255,255,0.05); 
    }
    100% { 
        /* Işık etrafa yumuşak bir neon yeşili yayıyor */
        box-shadow: 0 4px 0 #0f3316, 
                    0 0 18px rgba(76, 217, 100, 0.7), 
                    inset 0 2px 4px rgba(255,255,255,0.2); 
    }
}

/* ==========================================
   YENİ TEMALAR (WINDOWS 98 & FRUTIGER AERO)
   ========================================== */

/* THEME 1: WINDOWS 98 */
body.theme-win98 .app-container { background-color: #c0c0c0; border: 2px solid #dfdfdf; box-shadow: 2px 2px 0 #000, -2px -2px 0 #fff; border-radius: 0; }
body.theme-win98 .top-bar { background: linear-gradient(90deg, #000080, #1084d0); border: 2px solid #c0c0c0; border-style: outset; box-shadow: none; }
body.theme-win98 .bottom-bar { background-color: #c0c0c0; border-top: 2px solid #fff; border-bottom: 2px solid #808080; box-shadow: none; }
body.theme-win98 .top-bar h1 { color: #fff; text-shadow: none; font-family: 'Courier New', monospace; letter-spacing: 0; }
body.theme-win98 .icon-btn { background: #c0c0c0; border: 2px solid #fff; border-bottom-color: #808080; border-right-color: #808080; color: #000 !important; box-shadow: none; border-radius: 0; }
body.theme-win98 .icon-btn:active { border-top-color: #808080; border-left-color: #808080; border-bottom-color: #fff; border-right-color: #fff; transform: translateY(1px); }
body.theme-win98 .icon-large { background: #c0c0c0; border: 2px solid #fff; border-bottom-color: #808080; border-right-color: #808080; color: #000 !important; box-shadow: none; border-radius: 0; }

/* THEME 2: FRUTIGER AERO */
body.theme-frutiger .app-container { background: linear-gradient(180deg, #87cefa 0%, #e0f6ff 50%, #90ee90 100%); border-color: #ffffff; box-shadow: 0 0 20px rgba(255,255,255,0.5), inset 0 0 15px rgba(255,255,255,0.8); border-radius: 20px; }
body.theme-frutiger .top-bar, body.theme-frutiger .bottom-bar { background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(135,206,250,0.5) 100%); border-color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,1); backdrop-filter: blur(5px); }
body.theme-frutiger .top-bar h1 { color: #005b9f; text-shadow: 0 1px 2px rgba(255,255,255,0.8); font-family: 'Roboto', sans-serif; font-weight: bold; }
body.theme-frutiger .icon-btn { background: linear-gradient(180deg, #e0f6ff 0%, #87cefa 100%); border: 1px solid #fff; color: #005b9f !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.9); }
body.theme-frutiger .icon-large { background: linear-gradient(180deg, #b4f9b4 0%, #32cd32 100%); border: 1px solid #fff; color: #004d00 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.9); }

/* THEME 3: KAWAI / HELLO KITTY */
body.theme-hellokitty .app-container { background-color: #ffe4e1; border: 4px solid #ff69b4; border-radius: 30px; box-shadow: 0 0 20px rgba(255,105,180,0.3); }
body.theme-hellokitty .top-bar, body.theme-hellokitty .bottom-bar { background-color: #ffb6c1; border-color: #ff69b4; box-shadow: none; }
body.theme-hellokitty .top-bar h1 { color: #fff; text-shadow: 2px 2px 0px #ff1493; font-family: 'Comic Sans MS', cursive, sans-serif; font-weight: bold; letter-spacing: 2px; }
body.theme-hellokitty .icon-btn { background: #fff; border: 2px solid #ff69b4; color: #ff69b4 !important; border-radius: 50%; box-shadow: 0 4px 0 #ff1493; }
body.theme-hellokitty .icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #ff1493; }
body.theme-hellokitty .icon-large { background: #ff1493; border: 2px solid #fff; color: #fff !important; box-shadow: 0 5px 0 #c71585; }

/* THEME 4: GOOGLE DARK (MATERIAL DESIGN) */
body.theme-googledark .app-container { background-color: #202124; border: 1px solid #3c4043; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
body.theme-googledark .top-bar, body.theme-googledark .bottom-bar { background-color: #303134; border-color: #3c4043; box-shadow: none; }
body.theme-googledark .top-bar h1 { color: #e8eaed; text-shadow: none; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: 0; }
body.theme-googledark .icon-btn { background: #303134; border: 1px solid #5f6368; color: #e8eaed !important; border-radius: 50%; box-shadow: none; transition: background 0.2s; }
body.theme-googledark .icon-btn:active { background: #3c4043; transform: scale(0.95); box-shadow: none; }
body.theme-googledark .icon-large { background: #8ab4f8; border: none; color: #202124 !important; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); }