<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tun Pamir</title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#030202">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Tun Pamir">
    <link rel="apple-touch-icon" href="logo.png">
    <link rel="icon" href="logo.png" type="image/png">
    <link rel="shortcut icon" href="logo.png" type="image/png">
    
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&display=swap" rel="stylesheet">
    
    <style>
        * { 
            margin: 0; padding: 0; box-sizing: border-box; 
            -webkit-tap-highlight-color: transparent; 
            -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 
        }
        
        body {
            background-color: #030202; 
            color: #e0e0e0; 
            font-family: 'Cinzel', 'Georgia', serif;
            min-height: 100vh; overflow: hidden; 
        }

        .bg-wrap {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 1; display: flex; gap: 10px; padding: 0 5px;
            opacity: 0.12; filter: grayscale(50%) sepia(50%) contrast(1.2); pointer-events: none; 
        }
        .col { display: flex; flex-direction: column; gap: 10px; width: 25%; animation: scroll 180s linear infinite; will-change: transform; }
        .col img { width: 100%; height: auto; border-radius: 5px; }
        
        .m-bg-slider { display: none; }

        #fxCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; opacity: 0; transition: opacity 3s ease-in; }
        #fxCanvas.show { opacity: 1; }

        .top-nav {
            position: fixed; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center;
            padding: 30px 20px 0 20px; z-index: 100;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%); pointer-events: none; 
        }
        .top-nav > * { pointer-events: auto; }
        
        .logo { height: 160px; margin-bottom: 20px; filter: drop-shadow(0 0 20px rgba(223, 194, 136, 0.15)); transition: filter 0.5s ease; cursor: pointer; }
        .logo:hover { filter: drop-shadow(0 0 30px rgba(223, 194, 136, 0.4)); }

        .menu { display: flex; gap: 40px; }
        .m-item { position: relative; color: rgba(223, 194, 136, 0.5); text-decoration: none; text-transform: uppercase; letter-spacing: 4px; font-weight: 600; font-size: 0.9em; padding: 10px 5px; transition: all 0.4s ease; cursor: pointer; }
        .m-item::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: #ffaa00; box-shadow: 0 0 10px #ffaa00, 0 0 20px #ff7b00; transition: all 0.4s ease; transform: translateX(-50%); opacity: 0; }
        .m-item:hover { color: #fff; text-shadow: 0 0 10px rgba(255, 170, 0, 0.8), 0 0 20px rgba(255, 123, 0, 0.6); letter-spacing: 5px; }
        .m-item:hover::after { width: 100%; opacity: 1; }

        .svg-icon { width: 24px; height: 24px; fill: currentColor; }
        .svg-icon-lg { width: 32px; height: 32px; fill: currentColor; }

        .ctrl-btn { background: transparent; border: none; color: rgba(223, 194, 136, 0.6); display: flex; justify-content: center; align-items: center; cursor: pointer; padding: 5px; transition: 0.3s; }
        .ctrl-btn:hover { color: #dfc288; filter: drop-shadow(0 0 8px #dfc288); transform: scale(1.1);}
        .t-txt { font-size: 0.7em; color: rgba(223, 194, 136, 0.5); font-family: monospace; letter-spacing: 1px;}
        input[type="range"] { -webkit-appearance: none; background: rgba(223, 194, 136, 0.2); height: 10px; outline: none; cursor: pointer; flex-grow: 1; border-radius: 2px;}
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: #dfc288; border-radius: 50%; box-shadow: 0 0 10px #dfc288; transition: transform 0.2s;}
        @keyframes rotate { 100% { transform: rotate(360deg); } }

        .m-player { display: none; }
        
        @media (max-width: 768px) {
            .bg-wrap { display: none !important; } 
            
            .m-bg-slider {
                display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
                z-index: 1; pointer-events: none; overflow: hidden;
                opacity: 0.5; mix-blend-mode: lighten;
                filter: grayscale(40%) sepia(40%) contrast(1.2);
            }
            .m-bg-slide {
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
                opacity: 0; transform: scale(1); 
                transition: opacity 2.5s ease-in-out;
                will-change: opacity, transform; z-index: 1; 
            }
            .m-bg-slide.active { opacity: 1; transform: scale(1.15); z-index: 3; }

            .d-hide { display: none !important; }
            .desk-only { display: none !important; } 
            .top-nav { padding-top: 20px; }
            .logo { height: 130px; margin-bottom: 15px; margin-left: 10px; }
            .menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 10px; width: 100%; }
            
            .m-item { 
                font-size: 0.80em; 
                font-weight: 800; 
                color: #dfc288; 
                padding: 8px 12px; 
                letter-spacing: 3px; 
                text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.8); 
            }

            .m-player {
                display: flex; position: fixed; bottom: 15px; left: 50%;
                transform: translateX(-50%) translateY(150%);
                z-index: 110; flex-direction: column; gap: 15px;
                background: linear-gradient(90deg, rgba(8,4,2,0.85) 0%, rgba(20,10,5,0.7) 50%, rgba(8,4,2,0.85) 100%);
                backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); 
                border: 1px solid rgba(223, 194, 136, 0.4); 
                padding: 15px 15px; border-radius: 25px; 
                box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(223,194,136,0.05);
                opacity: 0; visibility: hidden; transition: all 1s ease; 
                width: 95%; max-width: 400px;
            }
            .m-player.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

            .m-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
            .click-box { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-grow: 1; width: calc(100% - 130px); }
            
            .c-wrap-m {
                width: 50px; height: 50px; min-width: 50px; border-radius: 50%; border: 1px solid rgba(223, 194, 136, 0.3);
                overflow: hidden; animation: rotate 25s linear infinite; animation-play-state: paused;
            }
            .c-wrap-m.spin { animation-play-state: running; }
            .c-wrap-m img { width: 100%; height: 100%; object-fit: cover; }
            
            .m-txt { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; min-width: 0; overflow: hidden; }
            .lbl-alb { font-size: 0.8em; color: rgba(223, 194, 136, 0.6); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; white-space: nowrap; }
            
            .m-track-marquee { width: 100%; overflow: hidden; white-space: nowrap; position: relative; height: 20px; display: flex; align-items: center; }
            .lbl-trk { 
                position: absolute;
                font-size: 0.7em; color: #dfc288; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; 
                text-shadow: 0 0 5px rgba(223, 194, 136, 0.3); white-space: nowrap; 
                animation: scrollLeftToRight 8s linear infinite;
            }

            @keyframes scrollLeftToRight {
                0% { left: 0; transform: translateX(-100%); }
                100% { left: 100%; transform: translateX(0); }
            }
            
            .m-ctrls { display: flex; align-items: center; gap: 12px; }
            
            .p-btn { 
                width: 55px; height: 55px; border-radius: 50%; 
                background: linear-gradient(135deg, rgba(223, 194, 136, 0.15), rgba(223, 194, 136, 0.05)); 
                color: #ffaa00; border: 2px solid rgba(223, 194, 136, 0.6); 
                display: flex; justify-content: center; align-items: center; 
                transition: 0.2s ease-out; outline: none;
                box-shadow: 0 0 15px rgba(223, 194, 136, 0.1);
            }
            .p-btn:active { 
                background: rgba(223, 194, 136, 0.3); 
                border-color: #ffaa00;
                color: #fff; transform: scale(0.95); 
                box-shadow: 0 0 20px rgba(255, 170, 0, 0.4);
            }
            
            .s-box { display: flex; align-items: center; gap: 8px; width: 100%; }
        }

        @media (min-width: 769px) {
            .d-player {
                position: fixed; bottom: 15px; left: 0; width: 100%;
                z-index: 105; display: flex; flex-direction: column; align-items: center;
                opacity: 0; visibility: hidden; transition: all 1.5s ease; transform: translateY(20px);
            }
            .d-player.show { opacity: 1; visibility: visible; transform: translateY(0); }

            .d-bar {
                width: 96%; max-width: 1400px; border: 1px solid rgba(223, 194, 136, 0.4); border-radius: 40px; 
                background: linear-gradient(90deg, rgba(8,4,2,0.9) 0%, rgba(20,10,5,0.8) 50%, rgba(8,4,2,0.9) 100%);
                box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(223,194,136,0.05);
                backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
                display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; margin-bottom: 8px;
            }

            .l-box { display: flex; align-items: center; gap: 15px; width: 30%; cursor: pointer; transition: 0.3s; padding: 5px; border-radius: 10px;}
            .l-box:hover { background: rgba(223, 194, 136, 0.05); box-shadow: 0 0 15px rgba(223,194,136,0.1);}
            .c-wrap-d { width: 55px; height: 55px; border-radius: 50%; border: 1px solid rgba(223, 194, 136, 0.3); overflow: hidden; animation: rotate 25s linear infinite; animation-play-state: paused; }
            .c-wrap-d.spin { animation-play-state: running; }
            .c-wrap-d img { width: 100%; height: 100%; object-fit: cover; }
            
            .txt-col { display: flex; flex-direction: column; }
            .lbl-alb { font-size: 0.6em; color: rgba(223, 194, 136, 0.5); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 3px; }
            .lbl-trk { font-size: 0.9em; color: #dfc288; letter-spacing: 1px; font-weight: 600; text-shadow: 0 0 5px rgba(223, 194, 136, 0.3);}

            .c-box { display: flex; flex-direction: column; align-items: center; width: 40%; gap: 5px; }
            .ctrl-grp { display: flex; align-items: center; gap: 20px; }
            .p-btn-d { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: #dfc288; border: 1px solid rgba(223, 194, 136, 0.4); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s; outline: none; }
            .p-btn-d:hover { background: rgba(223, 194, 136, 0.15); border-color: #dfc288; box-shadow: 0 0 15px rgba(223, 194, 136, 0.4); color: #fff; transform: scale(1.05);}
            .s-box-d { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 400px; }

            .r-box { display: flex; align-items: center; justify-content: space-between; width: 30%; padding-left: 15px; }
            .vol-wrap { display: flex; align-items: center; }
            .vol-slider-box { width: 0; opacity: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; }
            .vol-wrap:hover .vol-slider-box { width: 80px; opacity: 1; margin-left: 8px; }
            .vol-slider { width: 80px; }
            
            .brand { text-align: right; border-left: 1px solid rgba(223, 194, 136, 0.2); padding-left: 20px;}
            .copy { font-size: 0.65em; color: rgba(223, 194, 136, 0.5); letter-spacing: 1px; font-family: monospace; line-height: 1.4; display: block;}
            .mtf { color: rgba(223, 194, 136, 0.2); font-size: 1.2em; letter-spacing: 4px; display: block; margin-bottom: 2px;}
        }

        .m-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 200; opacity: 0; visibility: hidden; transition: 0.5s ease; }
        .m-overlay.active { opacity: 1; visibility: visible; }
        .modal { background: rgba(5, 3, 2, 0.8); border: 1px solid rgba(223, 194, 136, 0.15); padding: 40px; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,1); max-width: 600px; width: 90%; text-align: center; position: relative; max-height: 80vh; overflow-y: auto; }
        .modal::-webkit-scrollbar { width: 3px; }
        .modal::-webkit-scrollbar-thumb { background: rgba(223, 194, 136, 0.3); border-radius: 3px; }
        .m-cls { position: absolute; top: 15px; right: 20px; color: rgba(223, 194, 136, 0.5); font-size: 1.2em; cursor: pointer; z-index: 10; font-family: sans-serif; transition: 0.3s;}
        .m-cls:hover { color: #fff; transform: rotate(90deg); }
        .m-ttl { color: #dfc288; font-size: 1.5em; margin-bottom: 25px; letter-spacing: 6px; font-weight: 400; position: sticky; top: 0; background: rgba(5, 3, 2, 0.95); padding-bottom: 15px; z-index: 5; border-bottom: 1px solid rgba(223, 194, 136, 0.1); }
        
        .alb-sec { margin-bottom: 40px; text-align: left; }
        .alb-hdr { display: flex; align-items: center; gap: 15px; padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px solid rgba(223, 194, 136, 0.1); }
        .alb-cov { width: 70px; height: 70px; border-radius: 4px; border: 1px solid rgba(223, 194, 136, 0.2); object-fit: cover;}
        .alb-n { color: #ffaa00; font-size: 1.1em; letter-spacing: 3px; margin-bottom: 5px; }
        .alb-s { color: rgba(223, 194, 136, 0.5); font-size: 0.7em; letter-spacing: 2px; }

        .t-itm, .s-lnk { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: rgba(223, 194, 136, 0.7); cursor: pointer; padding: 12px 10px; border-bottom: 1px solid rgba(223, 194, 136, 0.03); font-weight: 400; letter-spacing: 2px; font-size: 0.85em; transition: all 0.3s; }
        .t-itm:hover, .s-lnk:hover { color: #fff; background: rgba(223, 194, 136, 0.05); letter-spacing: 3px; padding-left: 15px; }
        .t-itm small { font-size: 0.7em; opacity: 0.5; }

        @keyframes scroll { 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }
    </style>
</head>
<body oncontextmenu="return false;">

    <audio id="audioEngine" preload="metadata"></audio>

    <div class="bg-wrap">
        <div class="col">
            <img src="site4.jpg"><img src="kadın.jpg"><img src="site1.jpg"><img src="kadın7.jpg"><img src="site5.jpg">
            <img src="kadın10.jpg"><img src="site2.jpg"><img src="site8.jpg"><img src="site3.jpg"><img src="kadın5.jpg">
            <img src="site6.jpg"><img src="kadın6.jpg"><img src="site7.jpg"><img src="kadın8.jpg"><img src="site10.jpg">
        </div>
        <div class="col">
            <img src="site8.jpg"><img src="kadın6.jpg"><img src="site3.jpg"><img src="site10.jpg"><img src="kadın8.jpg">
            <img src="site6.jpg"><img src="kadın.jpg"><img src="site1.jpg"><img src="kadın5.jpg"><img src="site5.jpg">
            <img src="site4.jpg"><img src="kadın7.jpg"><img src="site7.jpg"><img src="kadın10.jpg"><img src="site2.jpg">
        </div>
        <div class="col">
            <img src="site2.jpg"><img src="kadın7.jpg"><img src="site5.jpg"><img src="site10.jpg"><img src="kadın5.jpg">
            <img src="site3.jpg"><img src="kadın6.jpg"><img src="site8.jpg"><img src="kadın8.jpg"><img src="site1.jpg">
            <img src="site6.jpg"><img src="kadın10.jpg"><img src="site4.jpg"><img src="kadın.jpg"><img src="site7.jpg">
        </div>
        <div class="col">
            <img src="site6.jpg"><img src="site1.jpg"><img src="kadın10.jpg"><img src="site4.jpg"><img src="kadın5.jpg">
            <img src="site8.jpg"><img src="site2.jpg"><img src="kadın6.jpg"><img src="site3.jpg"><img src="kadın7.jpg">
            <img src="site7.jpg"><img src="kadın8.jpg"><img src="site5.jpg"><img src="kadın.jpg"><img src="site10.jpg">
        </div>
    </div>

    <div class="m-bg-slider" id="mBgSlider">
        <img src="otagici.jpg" class="m-bg-slide active">
    </div>

    <canvas id="fxCanvas"></canvas>

    <header class="top-nav">
        <img src="logo.png" alt="Logo" class="logo" id="btnPWA">
        <nav class="menu">
            <a onclick="modal('modAbt')" class="m-item">HAKKINDA</a>
            <a onclick="modal('modTrk')" class="m-item d-hide">ALBÜMLER</a>
            <a onclick="modal('modMed')" class="m-item">MEDYA</a>
            <a href="mailto:info@tunpamir.com" class="m-item">İLETİŞİM</a>
        </nav>
    </header>

    <div id="pMobile" class="m-player">
        <div class="m-row">
            <div class="click-box" onclick="modal('modTrk')" title="Listeyi Aç">
                <div class="c-wrap-m" id="covWrapM">
                    <img id="covImgM" src="kadimtınılar.jpg" alt="Kapak" onerror="this.src='logo.png'">
                </div>
                <div class="m-txt">
                    <span class="lbl-alb" id="albM">KADİM TINILAR</span>
                    <div class="m-track-marquee"><div class="lbl-trk" id="trkM">KAM RUHU</div></div>
                </div>
            </div>
            
            <div class="m-ctrls">
                <button class="ctrl-btn" onclick="prev()">
                    <svg class="svg-icon" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg>
                </button>
                
                <button class="p-btn" onclick="playPause()" id="btnPlayM">
                    <svg id="playIconM" class="svg-icon-lg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    <svg id="pauseIconM" class="svg-icon-lg" viewBox="0 0 24 24" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                </button>
                
                <button class="ctrl-btn" onclick="next()">
                    <svg class="svg-icon" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>
                </button>
            </div>
        </div>

        <div class="s-box">
            <span class="t-txt" id="ctM">0:00</span>
            <input type="range" id="progM" value="0" min="0" max="100" oninput="seek(event)">
            <span class="t-txt" id="dtM">0:00</span>
        </div>
    </div>

    <div class="d-player desk-only" id="pDesk">
        <div class="d-bar">
            <div class="l-box" onclick="modal('modTrk')" title="Listeyi Aç">
                <div class="c-wrap-d" id="covWrapD">
                    <img id="covImgD" src="kadimtınılar.jpg" alt="Kapak" onerror="this.src='logo.png'">
                </div>
                <div class="txt-col">
                    <span class="lbl-alb" id="albD">KADİM TINILAR</span>
                    <span class="lbl-trk" id="trkD">KAM RUHU</span>
                </div>
            </div>

            <div class="c-box">
                <div class="ctrl-grp">
                    <button class="ctrl-btn" onclick="prev()">
                         <svg class="svg-icon" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg>
                    </button>
                    
                    <button class="p-btn-d" onclick="playPause()" id="btnPlayD">
                        <svg id="playIconD" class="svg-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                        <svg id="pauseIconD" class="svg-icon" viewBox="0 0 24 24" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                    </button>
                    
                    <button class="ctrl-btn" onclick="next()">
                        <svg class="svg-icon" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>
                    </button>
                </div>
                <div class="s-box-d">
                    <span class="t-txt" id="ctD">0:00</span>
                    <input type="range" id="progD" value="0" min="0" max="100" oninput="seek(event)">
                    <span class="t-txt" id="dtD">0:00</span>
                </div>
            </div>

           <div class="vol-wrap desk-only">
    <button class="ctrl-btn" onclick="toggleMute()" title="Sesi Kapat/Aç">
        <svg id="volIconHigh" class="svg-icon-lg" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
        <svg id="volIconMute" class="svg-icon-lg" viewBox="0 0 24 24" style="display:none;"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
    </button>
    <div class="vol-slider-box">
        <input type="range" id="volSlider" class="vol-slider" value="1" min="0" max="1" step="0.01" oninput="changeVol(event)">
    </div>
</div>

                <div class="brand">
                    <span class="mtf">𐱃𐰆𐰣</span>
                    <span class="copy">© 2026 Tun Pamir.<br>Powered by Atabey</span>
                </div>
            </div>
        </div>
    </div>

    <div class="m-overlay" id="modAbt">
        <div class="modal">
            <span class="m-cls" onclick="clsModal('modAbt')">✖</span>
            <h3 class="m-ttl">HAKKINDA</h3>
            <p style="text-align: justify; color: rgba(223, 194, 136, 0.7); line-height: 1.8; font-size: 1.05em; letter-spacing: 1px; font-family: 'Georgia', serif;">
                Bu eser yalnızca bir müzik değil; köklerimizin, atalarımızın nefesinin ve kadim coğrafyaların yankısıdır. İlhamını Pamir Dağları’nın görkemli ahenginden, rüzgârın taşlara çarpıp binlerce yıllık hatıraları fısıldadığı o yüce zirvelerden alır. Atalarımızın bir zamanlar göğe daha yakın yaşadığı o toprakların ruhu, melodilerin her titreşiminde yeniden can bulur.
            </p>
            <p style="text-align: justify; color: rgba(223, 194, 136, 0.7); line-height: 1.8; font-size: 1.05em; letter-spacing: 1px; font-family: 'Georgia', serif; margin-top: 15px;">
                Bu çalışmayı oluştururken çağın imkânlarından, teknolojik analizlerin gücünden destek aldık; ancak özünü şekillendiren şey bu araçlar değil, köklerimizin kadim hafızasıdır. Ritmler, bozkırın kalp atışını; ezgiler, dağların mistik sessizliğini taşır. Bu müzik, sadece dinlenen değil hissedilen; geçmişle bugün arasında ruhani bir köprü kuran epik bir yolculuktur. Köklerimizden yükselen bu ses, zamansız ve sınır tanımaz bir çağrıdır.
            </p>
            <p style="margin-top: 30px; font-size: 0.75em; text-align: center; color: rgba(223, 194, 136, 0.4); font-family: monospace;">
              Tüm Hakları Saklıdır © 2026 Tun Pamir.<br>Powered by Atabey
            </p>
        </div>
    </div>

    <div class="m-overlay" id="modMed">
        <div class="modal">
            <span class="m-cls" onclick="clsModal('modMed')">✖</span>
            <h3 class="m-ttl">SOSYAL MEDYA</h3>
            <a href="https://www.instagram.com/tunpamir/" target="_blank" class="s-lnk" style="justify-content: center;">INSTAGRAM</a>
            <a href="https://www.youtube.com/channel/UCNvRqt1nWe1CN5dduGynW5A" target="_blank" class="s-lnk" style="border:none; justify-content: center;">YOUTUBE</a>
        </div>
    </div>

    <div class="m-overlay" id="modTrk">
        <div class="modal">
            <span class="m-cls" onclick="clsModal('modTrk')">✖</span>
            <h3 class="m-ttl">ALBÜMLER</h3>
            
            <div class="alb-sec">
                <div class="alb-hdr">
                    <img src="kadimtınılar.jpg" class="alb-cov" onerror="this.src='logo.png'">
                    <div>
                        <div class="alb-n">KADİM TINILAR</div>
                        <div class="alb-s">I. BÖLÜM</div>
                    </div>
                </div>
                <div id="lst1"></div>
            </div>

            <div class="alb-sec" style="margin-bottom: 0;">
                <div class="alb-hdr">
                    <img src="kutfrekansları.png" class="alb-cov" onerror="this.src='logo.png'">
                    <div>
                        <div class="alb-n">KUT FREKANSLARI</div>
                        <div class="alb-s">II. BÖLÜM</div>
                    </div>
                </div>
                <div id="lst2"></div>
            </div>
        </div>
    </div>

    <script>
        document.onkeydown = function(e) {
            if(e.keyCode == 123) return false;
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) return false;
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) return false;
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) return false;
            if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) return false;
        }

        const engine = document.getElementById('audioEngine');
        
        // Ses ayarı mantığı
        const volSlider = document.getElementById('volSlider');
        const volIconHigh = document.getElementById('volIconHigh');
        const volIconMute = document.getElementById('volIconMute');
        let lastVol = 1;
        engine.volume = 1;

        function changeVol(e) {
            let v = parseFloat(e.target.value);
            engine.volume = v;
            updateVolUI(v);
            if(v > 0) lastVol = v; 
        }

        function toggleMute() {
            if (engine.volume > 0) {
                lastVol = engine.volume;
                engine.volume = 0;
                volSlider.value = 0;
            } else {
                engine.volume = lastVol > 0 ? lastVol : 1;
                volSlider.value = engine.volume;
            }
            updateVolUI(engine.volume);
        }

        function updateVolUI(v) {
            if (v === 0) {
                volIconHigh.style.display = 'none';
                volIconMute.style.display = 'block';
            } else {
                volIconHigh.style.display = 'block';
                volIconMute.style.display = 'none';
            }
        }
        
        const trkList = [
            { n: "TUN PAMİR - KAM RUHU ", f: "kam-ruhu.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - GECE ATEŞİ ", f: "gece-atesi.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - ÖZGÜR RUH", f: "ozgur-ruh.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - KAM ", f: "kam.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - SİYAH KEÇE ", f: "siyah-kece.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - TENGRİNİN NEFESİ", f: "tengrinin-nefesi.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - MOĞOL ", f: "mogol.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - KIZ KUMAY ", f: "kiz-kumay.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - YANAN ADAM", f: "yanan-adam.mp3", a: "KADİM TINILAR" },
            { n: "TUN PAMİR - YANAN ADAM v2", f: "yanan-adam-v2.mp3", a: "KADİM TINILAR" },
            { n: "Tun Pamir - Kök Tengri Nefesi", f: "tun-pamir-kok-tengri-nefesi.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Çopoçoor’un Sırrı", f: "tun-pamir-copocoorun-sirri.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Umay’ın Kanatları", f: "tun-pamir-umayin-kanatlari.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Bozkır Ateş Çemberi", f: "tun-pamir-bozkir-ates-cemberi.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Kut İnişi", f: "tun-pamir-kut-inisi.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Altay Rüzgarı", f: "tun-pamir-altay-ruzgari.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Ergenekon Geçidi", f: "tun-pamir-ergenekon-gecidi.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Tamu’dan Arınış", f: "tun-pamir-tamudan-arinis.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Ay Işığı Kamı", f: "tun-pamir-ay-isigi-kami.mp3", a: "KUT FREKANSLARI" },
            { n: "Tun Pamir - Tengri’ye Açılan Kapı", f: "tun-pamir-tengriye-acilan-kapi.mp3", a: "KUT FREKANSLARI" }
        ];
        
        let cIdx = 0;

        function buildList() {
            const l1 = document.getElementById('lst1');
            const l2 = document.getElementById('lst2');
            
            trkList.forEach((t, i) => {
                let d = document.createElement('div');
                d.className = 't-itm';
                d.innerHTML = `<span>${t.n}</span> <small>ÇAL</small>`;
                d.onclick = () => load(i);
                if(t.a === "KADİM TINILAR") l1.appendChild(d);
                else l2.appendChild(d);
            });
        }
        buildList();

        const cvs = document.getElementById('fxCanvas');
        const cx = cvs.getContext('2d');
        let pts = [];
        let canSpawn = false;

        function res() { cvs.width = window.innerWidth; cvs.height = window.innerHeight; }
        window.addEventListener('resize', res); res();

        class Pt {
            constructor() {
                this.x = (Math.random() * window.innerWidth * 0.8) + (window.innerWidth * 0.1); 
                this.y = window.innerHeight + 10; 
                this.s = Math.random() * 2 + 0.5;
                this.sy = -(Math.random() * 1.5 + 0.5); 
                this.sx = (Math.random() - 0.5) * 1; 
                this.o = 1; 
                this.c = ['#ff7b00', '#ffaa00', '#dfc288'][Math.floor(Math.random() * 3)];
            }
            step() { this.y += this.sy; this.x += this.sx + Math.sin(this.y * 0.005) * 0.8; this.o -= 0.002; }
            draw() { 
                cx.globalAlpha = Math.max(0, this.o); cx.fillStyle = this.c; cx.beginPath(); cx.arc(this.x, this.y, this.s, 0, Math.PI * 2); cx.fill(); 
                cx.globalAlpha = Math.max(0, this.o * 0.3); cx.beginPath(); cx.arc(this.x, this.y, this.s * 2.5, 0, Math.PI * 2); cx.fill();
            }
        }

        function loop() {
            cx.clearRect(0, 0, cvs.width, cvs.height);
            if (canSpawn && Math.random() < 0.1) pts.push(new Pt());
            for (let i = 0; i < pts.length; i++) {
                pts[i].step(); pts[i].draw();
                if (pts[i].o <= 0 || pts[i].y < 0) { pts.splice(i, 1); i--; }
            }
            requestAnimationFrame(loop);
        }
        loop(); 

        function setUI(t) {
            document.getElementById('trkM').innerText = t.n;
            document.getElementById('albM').innerText = t.a;
            document.getElementById('trkD').innerText = t.n;
            document.getElementById('albD').innerText = t.a;
            
            let img = "logo.png";
            if (t.a === "KADİM TINILAR") img = "kadimtınılar.jpg";
            else if (t.a === "KUT FREKANSLARI") img = "kutfrekansları.png";
            
            document.getElementById('covImgM').src = img;
            document.getElementById('covImgD').src = img;
        }

        // Sayfa yüklendiği anda uygulamayı doğrudan başlatıyoruz
        window.addEventListener('DOMContentLoaded', () => {
            cIdx = 0;
            engine.src = trkList[cIdx].f;
            setUI(trkList[cIdx]);

            // Ekran bileşenlerini görünür yapıyoruz
            document.getElementById('fxCanvas').classList.add('show');
            document.getElementById('pMobile').classList.add('show');
            document.getElementById('pDesk').classList.add('show');
            canSpawn = true;
        });

        function fTime(sec) {
            if (isNaN(sec)) return "0:00";
            let m = Math.floor(sec / 60); let s = Math.floor(sec % 60);
            return m + ":" + (s < 10 ? "0" + s : s);
        }

        engine.addEventListener('timeupdate', () => {
            if (!isNaN(engine.duration)) {
                let pc = (engine.currentTime / engine.duration) * 100;
                let cT = fTime(engine.currentTime);
                let dT = fTime(engine.duration);
                
                document.getElementById('progM').value = pc;
                document.getElementById('ctM').innerText = cT;
                document.getElementById('dtM').innerText = dT;
                
                document.getElementById('progD').value = pc;
                document.getElementById('ctD').innerText = cT;
                document.getElementById('dtD').innerText = dT;
            }
        });

        engine.addEventListener('ended', () => { next(); });
        
        function seek(e) { if(!isNaN(engine.duration)) { engine.currentTime = engine.duration * (e.target.value / 100); } }
        
        function tglState(p) {
            const playM = document.getElementById('playIconM');
            const pauseM = document.getElementById('pauseIconM');
            const playD = document.getElementById('playIconD');
            const pauseD = document.getElementById('pauseIconD');
            
            const w1 = document.getElementById('covWrapM');
            const w2 = document.getElementById('covWrapD');
            
            if(p) { 
                w1.classList.add('spin'); w2.classList.add('spin'); 
                playM.style.display = 'none'; pauseM.style.display = 'block';
                playD.style.display = 'none'; pauseD.style.display = 'block';
            } else { 
                w1.classList.remove('spin'); w2.classList.remove('spin'); 
                playM.style.display = 'block'; pauseM.style.display = 'none';
                playD.style.display = 'block'; pauseD.style.display = 'none';
            }
        }

        function playPause() { 
            if (engine.paused) { engine.play(); tglState(true); } 
            else { engine.pause(); tglState(false); } 
        }

        function load(i) {
            cIdx = i; 
            engine.src = trkList[cIdx].f;
            setUI(trkList[cIdx]);
            engine.play().then(() => tglState(true)).catch(() => tglState(false));
            clsModal('modTrk');
        }

        function next() { load((cIdx + 1) % trkList.length); }
        function prev() { load((cIdx - 1 + trkList.length) % trkList.length); }

        function modal(id) { document.getElementById(id).classList.add('active'); }
        function clsModal(id) { document.getElementById(id).classList.remove('active'); }
        window.onclick = (e) => { if (e.target.classList.contains('m-overlay')) e.target.classList.remove('active'); }

        let pwaP;
        window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); pwaP = e; });
        document.getElementById('btnPWA').addEventListener('click', async () => {
            if (pwaP) { pwaP.prompt(); pwaP = null; }
        });

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => navigator.serviceWorker.register('./service-worker.js').catch(err => console.log(err)));
        }

    </script>
</body>
</html>