<?php
require_once __DIR__ . '/includes/auth.php';
require_login();

$aktifKullanici = current_user();
$adSoyad = trim((string)($aktifKullanici['full_name'] ?? ''));
if ($adSoyad === '') {
    $adSoyad = (string)($aktifKullanici['username'] ?? 'Kullanıcı');
}
$rol = (string)($aktifKullanici['role'] ?? 'subay');
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Hava 75 - Dijital Arşiv</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            min-height: 100%;
            overflow-x: hidden;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Courier New', Courier, monospace;
            background: #000000;
            overflow-x: hidden;
            overflow-y: auto;
            min-height: 100vh;
            width: 100%;
            color: #00ffff;
            -webkit-text-size-adjust: 100%;
        }

        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("https://www.transparenttextures.com/patterns/stardust.png");
            opacity: 0.6;
            z-index: 0;
            pointer-events: none;
        }

        .page {
            display: none;
            width: 100%;
            min-height: 100vh;
            height: auto;
            position: relative;
            top: 0;
            left: 0;
            flex-direction: column;
            background: #000 !important;
            z-index: 10;
            overflow-y: visible;
            box-sizing: border-box;
            padding-bottom: 90px;
        }

        .active { display: flex !important; }

        .btn-cyber {
            padding: 12px 30px;
            border: 1px solid #00ffff;
            background: transparent;
            color: #00ffff;
            cursor: pointer;
            transition: 0.4s;
            text-transform: uppercase;
            letter-spacing: 2px;
            -webkit-appearance: none;
            text-decoration: none;
            display: inline-block;
            font-family: 'Courier New', Courier, monospace;
        }

        .btn-cyber:hover {
            background: #00ffff;
            color: black;
            box-shadow: 0 0 20px #00ffff;
        }

        .top-user-bar {
            width: 90%;
            max-width: 900px;
            margin: 18px auto 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            color: #00ffff;
            font-size: 12px;
            position: relative;
            z-index: 50;
            border: 1px solid rgba(0, 255, 255, 0.35);
            background: rgba(0, 0, 0, 0.65);
            padding: 10px 12px;
            box-sizing: border-box;
        }

        .user-role-badge {
            display: inline-block;
            margin-left: 8px;
            padding: 3px 8px;
            border: 1px solid rgba(0, 255, 255, 0.55);
            font-size: 10px;
            letter-spacing: 1px;
            opacity: 0.9;
        }

        .logout-link {
            font-size: 10px;
            padding: 8px 12px;
            white-space: nowrap;
        }

        .main-container {
            position: relative;
            margin: 35px auto 110px auto;
            width: 90%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
            padding: 20px;
            box-sizing: border-box;
        }

        .radar-sweep {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 180px;
            background: linear-gradient(to top,
                rgba(0, 255, 255, 0) 0%,
                rgba(0, 255, 255, 0.15) 60%,
                rgba(0, 255, 255, 0.4) 90%,
                rgba(0, 255, 255, 1) 100%
            );
            border-top: 2px solid #00ffff;
            box-shadow: 0 -5px 15px rgba(0, 255, 255, 0.4);
            pointer-events: none;
            z-index: 1;
            animation: radarScan 4s linear infinite;
        }

        .terminal-header {
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            letter-spacing: 12px;
            text-shadow: 0 0 15px #00ffff;
            margin-bottom: 40px;
            z-index: 20;
        }

        .data-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            width: 100%;
            z-index: 10;
        }

        .item {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            border: 1px solid #00ffff;
            background: rgba(0, 0, 0, 0.85);
            cursor: pointer;
            transition: 0.3s;
            overflow: hidden;
        }

        .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.6;
            transition: 0.4s;
        }

        .item-label {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.4);
            color: #00ffff;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
            padding: 8px;
            box-sizing: border-box;
        }

        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 25px #00ffff;
            border-color: white;
        }

        .item:hover img {
            opacity: 1;
            transform: scale(1.1);
        }

        .marquee-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.85);
            border-top: 1px solid #00ffff;
            height: 35px;
            overflow: hidden;
            display: flex;
            align-items: center;
            z-index: 1000;
        }

        .marquee-text {
            white-space: nowrap;
            position: absolute;
            color: #00ffff;
            font-size: 12px;
            letter-spacing: 2px;
            animation: kaydir 90s linear infinite;
        }

        .music-control {
            position: fixed;
            bottom: 50px;
            left: 20px;
            z-index: 1100;
        }

        .team-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 40px;
            flex-wrap: wrap;
            margin: auto;
        }

        .team-card {
            background: rgba(0, 255, 255, 0.05);
            border: 1px solid #00ffff;
            padding: 25px;
            width: 220px;
            text-align: center;
            cursor: pointer;
            transition: 0.3s;
        }

        .team-card:hover {
            transform: translateY(-10px);
            background: rgba(0, 255, 255, 0.15);
            box-shadow: 0 0 20px #00ffff;
        }

        .team-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 2px solid #00ffff;
            object-fit: cover;
            margin-bottom: 15px;
        }

        .team-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            transition: 0.4s;
        }

        .team-modal.active {
            display: flex;
            opacity: 1;
        }

        .team-modal-content {
            background: #000;
            border: 1px solid #00ffff;
            padding: 40px;
            width: 90%;
            max-width: 500px;
            text-align: center;
            position: relative;
            max-height: 80vh;
            overflow-y: auto;
        }

        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.98);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1500;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 60px 0;
        }

        .videoBox {
            width: 90%;
            max-width: 850px;
            border: 1px solid #00ffff;
            background: black;
            position: relative;
        }

        .close-btn {
            position: absolute;
            top: -50px;
            right: 0;
            font-size: 40px;
            color: #00ffff;
            cursor: pointer;
        }

        .site-video {
            width: 100%;
            max-height: 82vh;
            background: #000;
            display: block;
        }

        @keyframes radarScan {
            0% { transform: translateY(-180px); opacity: 0.3; }
            50% { transform: translateY(100%); opacity: 1; }
            100% { transform: translateY(-180px); opacity: 0.3; }
        }

        @keyframes kaydir {
            0% { transform: translateX(30%); }
            100% { transform: translateX(-100%); }
        }

        @media only screen and (max-width: 700px) {
            .top-user-bar {
                flex-direction: column;
                align-items: flex-start;
            }

            .data-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }

            .terminal-header {
                font-size: 22px;
                letter-spacing: 8px;
            }

            .radar-sweep {
                width: 100vw;
                height: 100vw;
            }

            .team-container {
                flex-direction: column;
                overflow-y: auto;
                padding-top: 100px;
            }

            .music-control {
                left: 12px;
                right: 12px;
                bottom: 48px;
            }

            .music-control .btn-cyber {
                width: 100%;
                font-size: 12px;
                padding: 9px 10px;
            }

            .close-btn {
                position: fixed;
                top: 15px;
                right: 20px;
                z-index: 3000;
            }
        }
    </style>
</head>
<body>

<div class="stars"></div>
<div id="hiddenAudioContainer" style="display:none;"></div>

<div id="menuPage" class="page active">
    <div class="top-user-bar">
        <div>
            Hoş geldiniz,
            <strong><?php echo htmlspecialchars($adSoyad, ENT_QUOTES, 'UTF-8'); ?></strong>
            <span class="user-role-badge"><?php echo htmlspecialchars($rol, ENT_QUOTES, 'UTF-8'); ?></span>
        </div>
        <a href="logout.php" class="btn-cyber logout-link">ÇIKIŞ</a>
    </div>

    <div class="main-container">
        <div class="radar-sweep"></div>
        <div class="terminal-header">
            HAVA 75<br>
            <span style="font-size:10px; letter-spacing:3px; opacity:0.7;">HAVA 75 AİLESİ DİJİTAL ARŞİV</span>
        </div>

        <div class="data-grid">
            <div class="item item1" onclick="videoAc(1)">
                <img src="https://lh3.googleusercontent.com/u/0/d/1CyBum5tlWoSGjvc7GOee1FlJFk7zxCZv" alt="Eski Günler">
                <div class="item-label">Eski Günler-1975</div>
            </div>

            <div class="item item2" onclick="sayfayaGit('gunumuz.php')">
                <img src="https://lh3.googleusercontent.com/u/0/d/16nHnDgnbuNBo1fYkip3BPAgcC4u2JyKG" alt="Günümüz">
                <div class="item-label">Günümüz-2025</div>
            </div>

            <div class="item item3" onclick="sayfayaGit('sehitlerimiz.php')">
                <img src="https://lh3.googleusercontent.com/u/0/d/1WzTsVNdz3W2u6eZA1OxcTQxk_NQqbH7Z" alt="Şehitlerimiz ve Annelerimiz">
                <div class="item-label">Şehitlerimiz ve Annelerimiz</div>
            </div>

            <div class="item item4" onclick="sayfayaGit('aramizdan-ayrilanlar.php')">
                <img src="https://lh3.googleusercontent.com/u/0/d/17g6gGQ2BR_ZDGA_Y7Y5OHOk1JQwr_swn" alt="Aramızdan Ayrılanlar">
                <div class="item-label">Aramızdan Ayrılanlar</div>
            </div>

            <div class="item item5" onclick="sayfayaGit('kabristan-bilgileri.php')">
                <img src="https://lh3.googleusercontent.com/u/0/d/11euPLBzEVCCCCHMx4XgRFyXCe7_-e6ow" alt="Kabristan Bilgileri">
                <div class="item-label">Kabristan Bilgileri</div>
            </div>

            <div class="item item6" onclick="gec('teamPage')">
                <img src="https://lh3.googleusercontent.com/u/0/d/1hrQIRdqcWzrDTtFfwa8ocHfkLSuk5bPJ" alt="Düzenleyenler">
                <div class="item-label">Düzenleyenler</div>
            </div>

            <div class="item item7" onclick="sayfayaGit('unutamadiklarimiz.php')">
                <img src="https://lh3.googleusercontent.com/u/0/d/1-VGJFFzHaaqOLgNWKhg65nm7yIgfBq9X" alt="Unutamadıklarımız ve Destek Olanlar">
                <div class="item-label">Unutamadıklarımız ve Destek Olanlar</div>
            </div>

            <div class="item item8" onclick="sayfayaGit('anmalar.php')">
                <img src="https://lh3.googleusercontent.com/u/0/d/15sC1kaZhx8yqlTvUJy7gLFdaALhFweFs" alt="Anmalar ve Kutlamalar">
                <div class="item-label">Anmalar ve Kutlamalar</div>
            </div>

            <div class="item item9" onclick="videoAc(9)">
                <img src="https://lh3.googleusercontent.com/u/0/d/1CaiX1efYQm6LgBw5u8XTcP_3IVbsV5qt" alt="Müziğimiz">
                <div class="item-label">Müziğimiz</div>
            </div>
        </div>
    </div>

    <div class="music-control">
        <button id="muzikButon" class="btn-cyber" onclick="muzikToggle()" style="font-size:15px; padding: 10px 15px; background: rgba(0,0,0,0.8);">🔊 Hava 1975 Ailesi Müziği</button>
    </div>

    <div class="marquee-container">
        <div class="marquee-text">⚠️ SİSTEM DURUMU: AKTİF | TÜM VERİ PAKETLERİ YÜKLENDİ | HAVA 75 DİJİTAL ANDAÇ PROJESİ | [ SİNYAL: GÜÇLÜ ] | [ YÖNETİM: KURULU ] | HOŞ GELDİNİZ... HAVA 1975 DEVRESİ SUBAYLARI TC. Kanunlarının onayı ile 163 kişi olarak 51 yıl önce mezun olmuştur. Bu onurlu mesleği hepimiz çok seviyoruz. Her birimiz ayrı ayrı bu devrenin patentine Annemizin Ak sütü misali sahibiz. Bu konuda ileri sürülen kanaatler sadece kişileri bağlar. Kimseyi etkilemedi, etkileyemez... Bizim 163 Arkadaşımızın da başı diktir. Biz 131 Devre arkadaşımızın teveccüh ile 50. Yıl Andacını hazırladık. 131 Harbiyelinin Huzurunuzda saygı ile eğiliyoruz. ANDAÇ'ın EDİTÖRÜ Sayın Dostum Cihan ÖZTÜRK Öğretmenimdir, ANDAÇ'IN REJİSÖRLERİ Sayın Dostum Orhan AYAN Binbaşım ve Andacın Diğer Rejisörü bendeniz Gültekin ÇETİNKOZ dur.</div>
    </div>
</div>

<div id="teamPage" class="page">
    <div style="padding: 20px;"><button class="btn-cyber" onclick="gec('menuPage')" style="font-size:10px;">⬅ GERİ DÖN</button></div>
    <div class="team-container">
        <div class="team-card" onclick="ekipModalAc(1)">
            <img src="https://lh3.googleusercontent.com/u/0/d/1wuDcLtTW2NJIxXzJ7l6OD3KBCBtu4UxJ" id="tImg1" class="team-img" alt="Gültekin ÇETİNKOZ">
            <div id="tName1" class="team-name">Gültekin ÇETİNKOZ</div>
            <div id="tRole1" class="team-role">YÖNETİM KURULU</div>
        </div>

        <div class="team-card" onclick="ekipModalAc(2)">
            <img src="https://lh3.googleusercontent.com/u/0/d/19LhAqsruUTZ8_jy7uIFpZiImZsL2Hd64" id="tImg2" class="team-img" alt="Orhan AYAN">
            <div id="tName2" class="team-name">Orhan AYAN</div>
            <div id="tRole2" class="team-role">YÖNETİM KURULU</div>
        </div>

        <div class="team-card" onclick="ekipModalAc(3)">
            <img src="https://lh3.googleusercontent.com/u/0/d/1OApG5eJwUgPUOzaevL8_-q5oKjF4UN6N" id="tImg3" class="team-img" alt="Cihan ÖZTÜRK">
            <div id="tName3" class="team-name">Cihan ÖZTÜRK</div>
            <div id="tRole3" class="team-role">DÜZENLEYEN</div>
        </div>
    </div>
</div>

<div id="popup" class="popup">
    <div class="videoBox">
        <div class="close-btn" onclick="kapat()">×</div>
        <div id="videoAlan"></div>
    </div>
</div>

<div id="teamModal" class="team-modal">
    <div class="team-modal-content">
        <div style="position:absolute; top:10px; right:20px; font-size:30px; cursor:pointer;" onclick="ekipModalKapat()">×</div>
        <img src="" id="mImg" style="width:120px; height:120px; border-radius:50%; border:2px solid #00ffff; object-fit:cover; margin-bottom:15px;" alt="">
        <h2 id="mName" style="color:#00ffff; margin:5px 0;"></h2>
        <p id="mRole" style="font-size:12px; opacity:0.6; margin-bottom:20px;"></p>
        <div id="mBio" style="text-align:justify; font-size:14px; line-height:1.6;"></div>
    </div>
</div>

<script>
    let sesDurumu = false;

    const ekipBios = {
        1: "Merhaba... HAVA 1975 Devresinde gün itibarı ile 115 Emekli Subayı yaşamaktadır... Benim gibi Nefes alan tüm arkadaşlarıma Sağlık ve afiyetler dilerim. Şehit Aileleri ile Milli ve Manevi boyuttaki görevlerimiz için 2022 yılının ilk ayında Yönetim Kurulumuzun beni görevlendirmesi sonrası tek tek görüştüm. Tüm görevlerimizi hakkı ile bu platformda yerine getireceğiz şeklinde Namus sözü verdim. Grup olarak Sözümüzün eri olduk. Profesyonel Yönetici seviyesinde icraatlar yaptık. Sayın Funda YILMAZ Hanımefendi, Sayın Turgut ALEMDAR, Sayın Şeref DALMAN, Sayın Orhan AYAN Beyefendi ve ben Gültekin ÇETİNKOZ Yönetim Kurulu üyeleri olarak EŞ BAŞKAN Mantığı ile uyum içinde çalıştık. Kaderin cilvesi: Platformda aramızdan ayrılan Subayları temsil yetkisi 2 Emekli Binbaşıya ve Teğmen rütbesinde K.K.K.lığı kadrosuna gönderilen Kurmay Albay Rütbesi ile Emekli olan Sayın Suat KURUGÖLLÜ Devreme bu gün nasip olmaktadır. Dilerim ki: Aidiyet ve Vefa enerjisi hepimizin kalbinde yeşerir. 15 Şehidimizin Eşleri ve çocuklarından: 2025 yılının Ağustos ayı sonunda. Görevlerimizi tamamen bitirdikten sonra helallik alınmıştır. HARİKA FİNAL SAHNELERİ YAŞADIK. TÜM ÎSTİSNA OLAYLARIMIZI 1975 DEVRESİNİN 50.YIL ANDAÇ’INA da KAYIT ETTİK VE KORUMA ALTINA ALDIK. Mutluyuz. Andacımıza: 163 Havacı Subayı veya Ailesinin %80 [ YÜZDE SEKSEN ] nispetinde katılım koordinasyon ile hayat bulmuştur. Bu performans sizlerin teveccühünüz ve inancınız ile gerçekleşmiştir. Sizlere çok teşekkür ederiz. Andacımız Hepimize aittir. Bizim 50 yıllık zaman dilimimizde bize yolculuk yaptıracak Kallavi bir eserdir. Dersimize çok titiz çalıştık. Bu esere sahip olmayı hak ettik. Andaç'ımızın içindeki mevcut tüm dökümanlar; Bizlerin tarihinin gerçek belgeleridir. HAVA 1975 devresini ilgilendiren Tüm sorularınızın cevabı bu neşriyatta muhafaza edilmektedir. Hv.K.K.lığı tarihinde Bizim teknolojimize sahip İlk 50. Yıl Andaçı bize aittir . Hava 1962 Devresi Komutarımız 2003 yılında sadece bu olay için niyetlenmişlerdir Saygılarımla Gültekin ÇETİNKOZ",
        2: "Sevgili sınıf arkadaşlarım. Ne mutlu ki mezuniyetimizin 50 yılını geride bıraktık. Ne mutlu 50 yılda çok şeyler yaşadık; acılar, mutluluklar, sevinçler... Bu andacımızı hazırlarken bazı arkadaşlarımız andaçta olmamayı tercih ettiler. Üzüldük onları andaçta sadece isim olarak yazmak zorunda kaldık. Bu andaç devremizin belgesel olarak hazırlandı. Yaşadığımız olayları resimlerle, videolarla ve listelerle sizlere sunuyoruz. Bu belgeselde hepimiz bir yerlerde yer aldık. Dilerim yüzünüzde tatlı bir tebessümle bu andacı okursunuz. Sağlıkla, mutlulukla kalın. Hoşça kalın.",
        3: "Bu projeyi, büyük bir saygı ve minnet duygusuyla, değerli Hava 75 ailesine ve okulumuzun adını taşıyan aziz şehidimiz Şehit Ünsal Aksoy başta olmak üzere tüm şehitlerimize ithaf ediyorum. Aynı zamanda, bana ilham veren ve her zaman örnek aldığım kıymetli komutanlarım Güntekin ve Orhan komutanlarıma da saygı ve şükranlarımı sunuyorum. Bu çalışma, onların bıraktığı değerleri yaşatmak ve gelecek nesillere aktarmak adına küçük bir vefa göstergesi olarak hazırlanmıştır. Bu vesile ile Hava 75 Ailesine Saygılarımı sunuyorum. İyi ki varsınız..."
    };

    function sayfayaGit(url) {
        window.location.href = url;
    }

    function sesiAc() {
        document.getElementById("hiddenAudioContainer").innerHTML = `<audio id="arkaPlanMuzik" src="audio/hava-1975.mp3" autoplay loop></audio>`;
        document.getElementById("muzikButon").innerHTML = "🔇 SESİ DURDUR";
        sesDurumu = true;
    }

    function sesiKapat() {
        document.getElementById("hiddenAudioContainer").innerHTML = "";
        document.getElementById("muzikButon").innerHTML = "🔊 Hava 1975 Ailesi Müziği";
        sesDurumu = false;
    }

    function muzikToggle() {
        if (sesDurumu) sesiKapat();
        else sesiAc();
    }

    function gec(id) {
        document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
        document.getElementById(id).classList.add("active");
        window.scrollTo(0, 0);
    }

    function videoAc(id) {
        sesiKapat();

        const videolar = {
            1: "videos/eski-gunler.mp4",
            9: "videos/muzigimiz.mp4"
        };

        if (!videolar[id]) {
            alert("Bu bölüm ayrı sayfada açılacaktır.");
            return;
        }

        document.getElementById("videoAlan").innerHTML = `
            <video class="site-video" controls autoplay playsinline preload="metadata">
                <source src="${videolar[id]}" type="video/mp4">
                Tarayıcınız video oynatmayı desteklemiyor.
            </video>
        `;

        document.getElementById("popup").style.display = "flex";
    }

    function kapat() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("videoAlan").innerHTML = "";
    }

    function ekipModalAc(id) {
        document.getElementById("mImg").src = document.getElementById("tImg" + id).src;
        document.getElementById("mName").innerText = document.getElementById("tName" + id).innerText;
        document.getElementById("mRole").innerText = document.getElementById("tRole" + id).innerText;
        document.getElementById("mBio").innerHTML = ekipBios[id];
        document.getElementById("teamModal").classList.add("active");
    }

    function ekipModalKapat() {
        document.getElementById("teamModal").classList.remove("active");
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            kapat();
            ekipModalKapat();
        }
    });
</script>
</body>
</html>
