@charset "utf-8";
#fire {
    height: 80px;
    }
body  #fire{    
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
    margin: 0;
    font-family: 'Comic Sans MS', sans-serif;
    font-weight: bold;
    overflow: hidden; /* Taşmaları gizler */
    border: none; 
    border-radius: 3px;
    background: linear-gradient(to bottom right, #4E61D3, #640D5F)
    }

.fire-text {
    color: #fff; /* Metin rengi, alevin en parlak çekirdeği */
    font-size: 3rem;
    text-align: center;
    /* İlk statik gölge katmanları */
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 0.8),
        0 0 5px rgba(255, 220, 0, 0.9);
    
    /* Yanıp sönme ve hareket için animasyon */
    animation: 
        fireEffect 10s infinite alternate, /* Ana alev animasyonu */
        flicker 2s infinite alternate; /* Küçük titreşim animasyonu */
    }

/* Ana Alev Efekti Animasyonu */
@keyframes fireEffect {
    0% {
        text-shadow: 
            0 0 2px rgba(255, 255, 255, 0.8),    /* Beyaz çekirdek */
            0 0 5px rgba(255, 220, 0, 0.9),     /* Sarı iç alev */
            0 0 10px rgba(255, 140, 0, 0.8),     /* Turuncu orta alev */
            0 0 15px rgba(255, 69, 0, 0.7),      /* Kırmızımsı dış alev */
            0 0 20px rgba(255, 0, 0, 0.6);       /* En dıştaki parlama */
    }
    50% {
        text-shadow: 
            0 0 3px rgba(255, 255, 255, 1),      /* Daha parlak beyaz çekirdek */
            0 0 7px rgba(255, 230, 0, 1),       /* Daha parlak sarı iç alev */
            0 0 12px rgba(255, 160, 0, 0.9),     /* Daha parlak turuncu orta alev */
            0 0 17px rgba(255, 80, 0, 0.8),      /* Daha parlak kırmızımsı dış alev */
            0 0 22px rgba(255, 20, 0, 0.7);      /* Daha parlak en dıştaki parlama */
    }
    100% {
        text-shadow: 
            0 0 2px rgba(255, 255, 255, 0.8),
            0 0 5px rgba(255, 220, 0, 0.9),
            0 0 10px rgba(255, 140, 0, 0.8),
            0 0 15px rgba(255, 69, 0, 0.7),
            0 0 20px rgba(255, 0, 140, 0.6);
    }
}

/* Titreşim (Flicker) Animasyonu */
@keyframes flicker {
    0%, 100% {
        /* Hafif bir y ekseni ve bulanıklık değişimi ile daha doğal bir titreşim */
        text-shadow: 
            0 0 2px rgba(255, 255, 255, 0.8),
            0 0 5px rgba(255, 220, 0, 0.9),
            0 0 10px rgba(255, 140, 0, 0.8);
    }
    25% {
        text-shadow: 
            0 1px 3px rgba(255, 255, 255, 0.9),
            0 1px 5px rgba(255, 230, 0, 1),
            0 1px 10px rgba(255, 150, 0, 0.9);
    }
    75% {
        text-shadow: 
            0 -1px 2px rgba(255, 255, 255, 0.7),
            0 -1px 4px rgba(255, 210, 0, 0.8),
            0 -1px 9px rgba(255, 51, 0, 0.7);
    }
}
.gizle{
    display:none;
}
.Konu{
    height: 36px;
    margin: 4px;
    margin-top:6px; 
    padding: 2px;
    display:flex;
    justify-content:right; 
    align-items:center;     /* dikey ortalama */
    font: bold 18px 'Roboto', 'Open Sans', Arial, sans-serif;
    color: white;
    background: linear-gradient(to bottom right, #BBDCE5, #0D1164);
    border: none;
    border-radius: 5px 0 5px 0; 
    box-shadow: 0 0 5px black; 
    transition: all 1s;
    }
.Konu:hover{  
    color: #0D1164;
    text-shadow: 1px 1px 1px darkblue;
    background: linear-gradient(to top left, #CBDCEB, #FDE7B3);
    box-shadow: 0 0 5px white; 
    /* opacity: 0.5; */
    /* transform: rotate(1deg); */
    }
.buyut{
    margin-left:20px;
    transition: transform 1s; /* Animation */
    transform-origin:left top; /*sol ust sabit kal */
    }
.buyut:hover{
    transform: rotate(10deg)  scale(3);
    } 
.y16B_r{
    margin:5px;
    text-align: left;
    font: bold 16px Arial, serif;
    color: blue;
    text-shadow: -1px -1px 1px orange;
    transition: all 1s;
    }
.y16B_r:hover{
    color: orange;
    text-shadow: 2px 2px 2px blue;
    }
.yB14_soluk{
	margin:3px;
	text-align: left;
	font: bold 14px Arial, serif;
	color: blue;
	opacity: 0.2;
    }
.button1 { 
    margin:5px;
    border: none;       border-radius:2px 0 2px 0;
    box-shadow: 0 0 4px black;/*kutu etrafı gölge için*/ 
    text-shadow: -2px -2px 1px orange; 
    font: bold 20px Arial, serif;
    color:blue;    
    border-radius:10px 0 10px 0;/*baklava görünümü için*/
    transition: all 1s;
    }
.button1:hover {     
    box-shadow: 0 0 4px black;/*kutu etrafı gölge için*/ 
    text-shadow: 2px 2px blue;  
    font: bold 20px Arial, serif;
    color:orange;    
    border-radius:0px 10px 0px 10px;/*baklava görünümü için*/
    }
.ara200 {
	margin:5px;
    width: 200px;
    text-align: left;
    font: bold 14px Arial, serif;
    color: black;
    background-color:#FFC ;
    box-shadow: 4px 4px 1px grey;
    transition: all 2s;
    }
.ara200:hover {
    background-color: #9F0;
    box-shadow: -5px -5px 2px grey;
    }
.ara180C {
	margin:5px;
    width: 180px;
    text-align: left;
    font: bold 14px Arial, serif;
    color: black;
    box-shadow: 4px 4px 1px grey;
    transition: all 2s;
    background:#FFC ;
    animation: color-wave 15s infinite;  
    }
.ara180C:hover {
    background-color: #9F0;
    box-shadow: -5px -5px 2px grey;
    }

.ara200C {
	margin:5px;
    width: 200px;
    text-align: left;
    font: bold 14px Arial, serif;
    color: black;
    box-shadow: 4px 4px 1px grey;
    transition: all 2s;
    background:#FFC ;
    animation: color-wave 15s infinite;  
    }
.ara200C:hover {
    background-color: #9F0;
    box-shadow: -5px -5px 2px grey;
    }



.Gri{ 
    background:repeating-linear-gradient(lightgray,white);
    }
.Kirmizi{ 
    background:repeating-linear-gradient(coral,red);       
    }
.Turuncu{ 
    background:repeating-linear-gradient(MistyRose,coral);          
    }
.Sari{
    background:repeating-linear-gradient(moccasin, lightyellow);        
    }
.Sari:hover{ 
    background:repeating-linear-gradient(moccasin, lime);        
    }
.Mavi{ 
    background:repeating-linear-gradient(deepskyblue,lightblue);      
    }
.Yesil{ 
    background:repeating-linear-gradient(#A2FF86,white);      
    }
.Pembe{ 
        background:repeating-linear-gradient(#FAEED1,#FF90BC);      
    }

/* prj icin baslama */
.prjdv{
    width: 200px;
    height: 70px;
    margin: 20px;
    padding: 5px;
    background-color: lightgray;
    border: none;
    border-radius: 15px 0 15px 0; /*baklava görünümü için*/
    box-shadow: 0 0 20px black; /*kutu etrafı gölge için*/
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    float:left;
}
.prjdv:hover{
    background-color: darkgray;
    transform: rotate(3deg);
}

.prjyazi{
    font: bold 26px Arial, serif;
    color: #009;
    text-shadow: 4px 2px 2px white;
    transition: 2s;
}
.prjyazi:hover{
    color: white;
    text-shadow: -4px -4px 6px #009;
    cursor:pointer;
}
/* prj icin bitis */