<div class="header">
        <h1>Burç Hesaplama Programı</h1>
    </div>

    <div class="kutu-1">
        <select name="slctgun" id="slctgun">
            <script>
                for (let gun = 1; gun <= 31; gun++) {
                    document.write("<option value='" + gun + "'>" + gun + "</option>");
                }
            </script>
        </select>
        <select name="slctay" id="slctay">
            <script>
                for (let ay = 1; ay <= 12; ay++) {
                    document.write("<option value='" + ay + "'>" + ay + "</option>");
                }
            </script>
        </select>
        <select name="slctyil" id="slctyil">
            <script>
                for (let yil = 1950; yil <= 2024; yil++) {
                    document.write("<option value='" + yil + "'>" + yil + "</option>");
                }
            </script>
        </select>
    </div>

    <div class="button-container">
        <button id="button" onclick="burchesapla()">Burç Hesapla</button>
        <button id="clearButton" onclick="clearResult()">Sonucu Sil</button>
    </div>

    <div class="kutu-2" id="kutu-2"></div>
        
     

            
            body {
                background-color: black;
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100vh;
                min-height: 100vh;
            }
            
            .code-tabs {
                display: flex;
                justify-content: flex-start;
                background-color: #333;
                padding: 10px;
                border-bottom: 2px solid #444;
                border-radius: 9px;
            }
            
            .code-tabs button {
                background: transparent;
                border: none;
                color: white;
                font-size: 16px;
                margin-right: 10px;
                padding: 10px 15px;
                cursor: pointer;
                transition: background 0.3s ease;
            }
            
            .code-tabs button:hover {
                background: #555;
                border-radius: 9px;
            }
            
            .code-tabs button.active {
                background: #444;
                border-bottom: 2px solid #ff6347;
            }
            
            .code-tab {
                display: none;
                background-color: #1e1e1e;
                color: #fff;
                padding: 20px;
                font-family: monospace;
                font-size: 14px;
                overflow-y: auto;
                max-height: 300px; /* Gerektiğinde scroll için */
            }
            
            .code-tab.active {
                display: block;
            }
            
            .code-tab pre {
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            
            
            select {
                width: 100%;
                margin-bottom: 10px;
                padding: 10px;
                font-size: 16px;
                border-radius: 5px;
                border: 1px solid #ccc;
            }
            
            select:focus {
                border-color: #ff6347;
                outline: none;
            }
            
            .header {
                text-align: center;
                margin-bottom: 20px;
                animation: fadeIn 2s ease-out;
            }
            
            .header h1 {
                font-size: 36px;
                color: #fff;
                font-weight: bold;
                background: linear-gradient(90deg, #ff7f50, #ff6347, #ff4500);
                -webkit-background-clip: text;
                background-clip: text;
                padding: 10px;
                text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
                letter-spacing: 2px;
                animation: slideIn 1s ease-out;
            }

            @keyframes fadeIn {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            
            @keyframes slideIn {
                0% {
                    transform: translateX(-100%);
                }
                100% {
                    transform: translateX(0);
                }
            }
            
            .form-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: white;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
            
            .kutu-1 {
                background-color: transparent;
                border: 2px solid blue;
                width: 90%;
                max-width: 300px; /* Mobil cihazlar için daha geniş alan */
                padding: 10px;
                border-radius: 8px;
                margin-bottom: 20px;
            }
            
            #button, #clearButton {
                margin: 10px;
                width: 150px;
                height: 40px;
                border-radius: 5px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s ease, transform 0.2s ease;
            }
            
            #button {
                background-color: transparent;
                border: 1px solid #fff;
                color: white;
            }
            
            #clearButton {
                background-color: transparent;
                border: 1px solid #fff;
                color: white;
            }
            
            #button:hover, #clearButton:hover {
                background-color: #fff;
                color: black;
                transform: scale(1.05);
            }
            
            #button:active, #clearButton:active {
                transform: scale(0.95);
            }
            
            .kutu-2 {
                background-color: transparent;
                width: 90%;
                max-width: 300px;
                height: 40px;
                margin-top: 20px;
                line-height: 40px;
                text-align: center;
                font-size: 16px;
                color: #fff;
                border: 3px solid #fff;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
        

                
           
        function burchesapla(){


        let slctgun=document.getElementById("slctgun").value;
        let slctay=document.getElementById("slctay").value;
        document.getElementById("slctyil").value;
                    
                        
        if((slctay==4 && slctgun<=20)||(slctay==3&&slctgun>=21))
            document.getElementById("kutu-2").innerHTML="Koç Burcu";
        else if ((slctay == 12 & slctgun >= 12) || (slctay == 1 & slctgun <= 20))
            document.getElementById("kutu-2").innerHTML="Oğlak Burcu";
        else if ((slctay == 9 & slctgun >= 22) || (slctay == 10 & slctgun <= 23))
            document.getElementById("kutu-2").innerHTML="Terazi Burcu";
        else if ((slctay == 1 & slctgun >= 21) || (slctay == 2 & slctgun <= 19))
            document.getElementById("kutu-2").innerHTML="Kova Burcu";
        else if ((slctay == 2 & slctgun >= 20) || (slctay == 3 & slctgun <= 20))
            document.getElementById("kutu-2").innerHTML="Balık Burcu";
        else if ((slctay == 4 & slctgun >= 21) || (slctay == 5 & slctgun <= 21))
            document.getElementById("kutu-2").innerHTML="Boğa Burcu";
        else if((slctay == 5 & slctgun >= 22) || (slctay == 6 & slctgun <= 21))
            document.getElementById("kutu-2").innerHTML="İkizler Burcu";
        else if ((slctay == 6 & slctgun >= 22) || (slctay == 7 & slctgun <= 23))
            document.getElementById("kutu-2").innerHTML="Yengeç Burcu";
        else if ((slctay == 7 & slctgun >= 24) || (slctay == 8 & slctgun <= 23))
            document.getElementById("kutu-2").innerHTML="Aslan Burcu";
        else if ((slctay == 8 & slctgun >= 24) || (slctay == 9 & slctgun <= 23))
            document.getElementById("kutu-2").innerHTML="Başak Burcu";
        else if ((slctay == 10 & slctgun >= 23) || (slctay == 11 & slctgun <= 22))
            document.getElementById("kutu-2").innerHTML="Akrep Burcu";
        else
            document.getElementById("kutu-2").innerHTML="Yay Burcu";
                    
            }
                    
            function clearResult() {
            document.getElementById("kutu-2").innerHTML = "";
                    
                document.getElementById("slctgun").selectedIndex = 0;
                document.getElementById("slctay").selectedIndex = 0;
                document.getElementById("slctyil").selectedIndex = 0;
            }