/*
|--------------------------------------------------------------------------
| RadyoHost.BiZ / Web Teknolojileri 
|--------------------------------------------------------------------------
| Proje: RadyoHost Radyo Sistemi v1
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| İSTEKLER
|--------------------------------------------------------------------------
| istekler.php
| RadyoHost Radyo Sistemi Dinleyici İstekleri Sayfası
| Developed By VoLKaN75
|--------------------------------------------------------------------------
*/


<style>
.site-header-v1{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(22px);
    border-bottom:1px solid rgba(233,237,250,.95);
}

.rh-header-wrap{
    width:min(1200px,calc(100% - 42px));
    min-height:84px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.rh-logo{
    display:flex;
    align-items:center;
    gap:13px;
    color:#10122b;
    text-decoration:none;
    min-width:max-content;
}

.rh-logo-icon{
    width:48px;
    height:48px;
    border-radius:18px;
    background:linear-gradient(135deg,#ff8b3d,#ff3f8e,#7b4dff,#2f80ed);
    display:grid;
    place-items:center;
    color:#fff;
    font-size:24px;
    font-weight:900;
    box-shadow:0 16px 42px rgba(255,63,142,.24);
    overflow:hidden;
}

.rh-logo-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.rh-logo-text strong{
    display:block;
    font-size:25px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.8px;
}

.rh-logo-text span{
    display:block;
    margin-top:5px;
    color:#727792;
    font-size:11px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.rh-menu{
    display:flex;
    align-items:center;
    gap:25px;
}

.rh-menu a{
    position:relative;
    color:#252844;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    padding:10px 0;
}

.rh-menu a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#ff3f8e,#ff8b3d,#2f80ed);
    transition:.25s;
}

.rh-menu a:hover:after,
.rh-menu a.active:after{
    width:100%;
}

.rh-header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.rh-btn-login,
.rh-btn-admin{
    min-height:46px;
    padding:0 18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.rh-btn-login{
    color:#10122b;
    background:#fff;
    border:1px solid #e9edfa;
    box-shadow:0 14px 40px rgba(31,38,80,.08);
}

.rh-btn-admin{
    color:#fff;
    background:linear-gradient(135deg,#ff8b3d,#ff3f8e,#7b4dff);
    box-shadow:0 17px 42px rgba(255,63,142,.24);
}

.rh-mobile-toggle{
    display:none;
    width:48px;
    height:48px;
    border:1px solid #e9edfa;
    border-radius:50%;
    background:#fff;
    color:#10122b;
    font-size:22px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 40px rgba(31,38,80,.08);
}

@media(max-width:1080px){
    .rh-menu,
    .rh-header-actions{
        display:none;
    }

    .rh-mobile-toggle{
        display:grid;
        place-items:center;
    }

    .rh-header-wrap{
        flex-wrap:wrap;
        padding:14px 0;
    }

    .rh-menu.mobile-open{
        display:flex;
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:8px 0 4px;
        border-top:1px solid #e9edfa;
    }

    .rh-menu.mobile-open a{
        width:100%;
        padding:14px 0;
        border-bottom:1px solid rgba(233,237,250,.75);
    }

    .rh-header-actions.mobile-open{
        display:flex;
        width:100%;
        justify-content:flex-start;
        padding-bottom:8px;
    }
}

@media(max-width:680px){
    .rh-header-wrap{
        width:min(100% - 28px,1200px);
        min-height:74px;
    }

    .rh-logo-icon{
        width:44px;
        height:44px;
        border-radius:16px;
    }

    .rh-logo-text strong{
        font-size:20px;
    }

    .rh-logo-text span{
        display:none;
    }

    .rh-btn-login,
    .rh-btn-admin{
        width:100%;
    }

    .rh-header-actions.mobile-open{
        flex-direction:column;
    }
}
</style>

<header class="site-header-v1">
    <div class="rh-header-wrap">

        <a href="index.php" class="rh-logo">
            <span class="rh-logo-icon">
                                    ♪
                            </span>

            <span class="rh-logo-text">
                <strong>RadyoHost.BiZ</strong>
                <span>Radyo Yönetim Sistemleri</span>
            </span>
        </a>

        <nav id="rhMainMenu" class="rh-menu">
            <a class="" href="index.php">Ana Sayfa</a>
            <a class="" href="hakkimizda.php">Hakkımızda</a>
            <a class="" href="programlar.php">Yayın Akışı</a>
            <a class="" href="djler.php">DJ'ler</a>
            <a class="" href="istek.php">İstek Hattı</a>
            <a class="" href="iletisim.php">İletişim</a>
        </nav>

        <div id="rhHeaderActions" class="rh-header-actions">
            <a href="djpanel/dj_giris.php" class="rh-btn-login">DJ Girişi</a>
            <a href="admin/admin_giris.php" class="rh-btn-admin">Yönetim Paneli</a>
        </div>

        <button type="button" class="rh-mobile-toggle" onclick="rhToggleMenu()">☰</button>

    </div>
</header>

<script>
function rhToggleMenu(){
    const menu = document.getElementById('rhMainMenu');
    const actions = document.getElementById('rhHeaderActions');

    if(menu){
        menu.classList.toggle('mobile-open');
    }

    if(actions){
        actions.classList.toggle('mobile-open');
    }
}
</script><!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>RadyoHost - İstekler</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f9f9f9; margin:0; padding:0; }
    header { background:#555; color:#fff; padding:15px; text-align:center; }
    main { padding:20px; }
    form { margin-bottom:30px; }
    input, textarea { width:100%; padding:10px; margin:5px 0; border:1px solid #ccc; }
    button { background:#333; color:#fff; padding:10px 20px; border:none; cursor:pointer; }
    table { width:100%; border-collapse:collapse; margin-top:20px; }
    table th, table td { border:1px solid #ccc; padding:10px; text-align:left; }
    table th { background:#eee; }
    footer { background:#222; color:#ccc; text-align:center; padding:10px; }
  </style>
</head>
<body>
  <header>
    <h1>RadyoHost Radyo Sistemi - Dinleyici İstekleri</h1>
  </header>
  <main>
    <h2>Şarkı İsteği Gönder</h2>
    <form method="POST" action="">
      <input type="text" name="isim" placeholder="Adınız" required>
      <input type="text" name="sarki" placeholder="İstediğiniz Şarkı" required>
      <textarea name="mesaj" placeholder="Mesajınız (opsiyonel)"></textarea>
      <button type="submit">Gönder</button>
    </form>

    <h2>Son İstekler</h2>
    <table>
      <tr>
        <th>İsim</th>
        <th>Şarkı</th>
        <th>Mesaj</th>
        <th>Tarih</th>
      </tr>
          </table>
  </main>

<style>
.rh-footer-v1{
    margin-top:70px;
    background:
        radial-gradient(circle at 8% 15%,rgba(255,63,142,.14),transparent 26%),
        radial-gradient(circle at 92% 20%,rgba(47,128,237,.14),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%);
    border-top:1px solid #e9edfa;
    color:#17182f;
}

.rh-footer-inner{
    width:min(1220px,calc(100% - 42px));
    margin:0 auto;
    padding:50px 0 34px;
    display:grid;
    grid-template-columns:1.35fr .8fr 1fr 1fr;
    gap:28px;
}

.rh-footer-brand h2{
    margin:0 0 12px;
    font-size:28px;
    font-weight:900;
    letter-spacing:-.8px;
    color:#10122b;
}

.rh-footer-brand p,
.rh-footer-box li,
.rh-footer-box a,
.rh-social-empty{
    color:#727792;
    font-size:14px;
    line-height:1.75;
    text-decoration:none;
}

.rh-footer-box h3{
    margin:0 0 15px;
    color:#10122b;
    font-size:17px;
    font-weight:900;
}

.rh-footer-box ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:9px;
}

.rh-footer-box a:hover{
    color:#ff3f8e;
}

.rh-social-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.rh-social-links a{
    padding:10px 14px;
    border-radius:999px;
    background:#fff;
    border:1px solid #e9edfa;
    color:#10122b;
    font-size:12px;
    font-weight:900;
    box-shadow:0 14px 40px rgba(31,38,80,.08);
    transition:.25s;
}

.rh-social-links a:hover{
    color:#fff;
    background:linear-gradient(135deg,#ff8b3d,#ff3f8e,#7b4dff);
    transform:translateY(-3px);
}

.rh-footer-bottom{
    border-top:1px solid #e9edfa;
    background:rgba(255,255,255,.72);
}

.rh-footer-bottom-inner{
    width:min(1220px,calc(100% - 42px));
    min-height:68px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    align-items:center;
    gap:18px;
    color:#727792;
    font-size:12px;
    font-weight:900;
}

.rh-footer-left{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.rh-footer-left a{
    color:#ff3f8e;
    text-decoration:none;
}

.rh-footer-center{
    text-align:center;
    color:#10122b;
}

.rh-footer-right{
    text-align:right;
    color:#ff3f8e;
}

@media(max-width:1000px){
    .rh-footer-inner{
        grid-template-columns:1fr 1fr;
    }

    .rh-footer-bottom-inner{
        grid-template-columns:1fr;
        text-align:center;
        padding:18px 0;
    }

    .rh-footer-left{
        justify-content:center;
    }

    .rh-footer-right{
        text-align:center;
    }
}

@media(max-width:620px){
    .rh-footer-inner{
        width:min(100% - 28px,1220px);
        grid-template-columns:1fr;
        padding:40px 0 28px;
    }

    .rh-footer-bottom-inner{
        width:min(100% - 28px,1220px);
    }
}
</style>

<footer class="rh-footer-v1">
    <div class="rh-footer-inner">

        <div class="rh-footer-brand">
            <h2>RadyoHost.BiZ</h2>
            <p>Radyo Yönetim Sistemleri</p>
        </div>

        <div class="rh-footer-box">
            <h3>Hızlı Menü</h3>
            <ul>
                <li><a href="index.php">Ana Sayfa</a></li>
                <li><a href="hakkimizda.php">Hakkımızda</a></li>
                <li><a href="programlar.php">Yayın Akışı</a></li>
                <li><a href="djler.php">DJ Kadrosu</a></li>
                <li><a href="istek.php">İstek Hattı</a></li>
                <li><a href="iletisim.php">İletişim</a></li>
            </ul>
        </div>

        <div class="rh-footer-box">
            <h3>İletişim</h3>
            <ul>
                
                
                
                                    <li>İletişim bilgileri yakında eklenecektir.</li>
                            </ul>
        </div>

        <div class="rh-footer-box">
            <h3>Sosyal Medya</h3>

            <div class="rh-social-links">
                
                
                
                
                                    <span class="rh-social-empty">Sosyal medya bağlantıları yakında eklenecektir.</span>
                            </div>
        </div>

    </div>

    <div class="rh-footer-bottom">
        <div class="rh-footer-bottom-inner">

            <div class="rh-footer-left">
                <span>Powered By 2026</span>
                <a href="https://www.radyohost.biz" target="_blank" rel="noopener">RadyoHost.BiZ</a>
                <span>Web Teknolojileri</span>
            </div>

            <div class="rh-footer-center">
                Radyo Yönetim Sistemleri - V1
            </div>

            <div class="rh-footer-right">
                Developed By VoLKaN75
            </div>

        </div>
    </div>
</footer></body>
</html>