<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Giriş / Üye Ol - Kaman UBYO Dijital Rehber</title>

<style>

body{
    background:#111;
    color:white;
    font-family:Arial;
}

.ana-sarmalayıcı {
    position: relative;
    width: 90%; /* 900px yerine %90 yaptık ki telefona göre esnesin */
    max-width: 900px; /* Ama bilgisayarda 900px'i de geçmesin */
    margin: auto;
    margin-top: 50px; 
    overflow: visible; 
}

.site-baslik {
    text-align: center;
    margin-bottom: 45px; 
}

.site-baslik h2 {
    color: orange;
    font-size: 42px; 
    margin: 0 0 5px 0; 
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
}

.site-baslik h3 {
    color: #ffb84d; 
    font-size: 22px;
    margin: 0 0 15px 0;
    font-weight: normal;
    font-style: italic; 
    letter-spacing: 1px;
}

.site-baslik p {
    color: #cccccc;
    font-size: 16px; 
    margin: 0;
    letter-spacing: 0.5px;
}

.kapsayici{
    width: 100%; 
    margin: 0; 
    display:flex;
    gap:40px; 
    position: relative; 
}

.kutu{
    flex:1;
    border:1px solid orange;
    padding:30px;
    border-radius:15px;
    background:#1a1a1a;
    position: relative; 
}

input{
    width:100%;
    padding:14px;
    margin-top:15px;
    border-radius:8px;
    border:none;
    font-size:16px;
    box-sizing: border-box;
}

button{
    width:100%;
    padding:14px;
    margin-top:20px;
    background:orange;
    border:none;
    border-radius:8px;
    font-size:18px;
    cursor:pointer;
    font-weight:bold;
    transition: 0.3s;
}

button:hover {
    background: #ffb84d; 
}

h1{
    text-align:center;
    margin-top: 0;
}

.kapat {
    position: absolute;
    top: 0px;      
    right: -45px;  
    color: orange;
    font-size: 28px; 
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.kapat:hover {
    color: #ffb84d;
    transform: scale(1.2);
}

/* =======================================================
   MOBİL UYUMLULUK (TELEFONLAR İÇİN) SİHİRLİ KODLAR
   ======================================================= */
@media (max-width: 768px) {
    .kapsayici {
        flex-direction: column; /* Kutuları yan yana değil alt alta diz */
        gap: 20px; /* Kutular arası boşluğu biraz azalt */
    }
    
    .site-baslik h2 {
        font-size: 28px; /* Telefonda başlık ekrana sığsın diye küçültüldü */
    }
    
    .site-baslik h3 {
        font-size: 18px; /* Slogan biraz küçültüldü */
    }

    .kapat {
        right: 0px; /* Çarpı işareti telefonda ekran dışına çıkmasın diye sıfırlandı */
        top: -35px; /* Alt alta binen kutularda yer açmak için biraz yukarı alındı */
    }
}

</style>
</head>
<body>

<div class="ana-sarmalayıcı">
    
    <div class="site-baslik">
        <h2>KAMAN UBYO 2026  DİJİTAL REHBER</h2>
        <h3>Tarih, Doğa ve Dijitalin Rehberi / kamanubyo2026 </h3>
        <p>Kaman rehberine tam erişim sağlamak için giriş yapın ve aramıza katılın.</p>
    </div>

    <div class="kapsayici">
        
        <a href="index.html" class="kapat">✕</a>

        <div class="kutu">
            <h1>Giriş Yap</h1>
            <form action="islem.php" method="POST">
                <input type="text" name="ad_soyad" placeholder="Adınız Soyadınız" required>
                <input type="password" name="sifre" placeholder="Şifreniz" required>
                <button type="submit" name="giris_yap">GİRİŞ YAP</button>
            </form>
        </div>

       <div class="kutu">
        <h1>Yeni Üye Ol</h1>
        <form action="islem.php" method="POST">
            <input type="text" name="ad_soyad" placeholder="Adınız Soyadınız" required>
            <input type="text" name="telefon" placeholder="Telefon (05...)" required>
            <input type="password" name="sifre" placeholder="Şifre Belirleyin" required>
            <button type="submit" name="uye_kayit">HEMEN ÜYE OL</button>
        </form>
       </div>

    </div>

</div>

</body>
</html>