html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body { height: 100%;font-family: Arial, Helvetica, sans-serif; margin:0; padding:0; color:#222; background:#f7f7f7; }
.container { max-width:1000px; margin:10px auto; padding:0 16px }

.site-header { background:#0b6; 

color:#fff; padding:20px 0px 0px 0px }
.site-header h1 { margin:0; font-size:36px; letter-spacing:1px }
.site-header nav a {  color:#fff; text-decoration:none; margin-right:12px; font-weight:600;  }
.site-header nav a:hover {  text-decoration:  }
.site-header .container {
    padding-bottom:0px;
} 
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.grid.small { grid-template-columns:repeat(2,1fr) }
.card, .item { border:1px solid #eee; padding:12px; background:#fff; border-radius:6px }
.hero { padding:24px 0; text-align:center }
.hero h2 { margin:8px 0; font-size:20px }
.btn { display:inline-block; padding:10px 16px; background:#0b6; color:#fff; text-decoration:none; border-radius:6px; margin-top:8px }
.notice { background:#e7f7e7; border:1px solid #cfeecf; padding:8px; margin-bottom:12px }
img { max-width:100%; height:auto; border-radius:4px }
input, textarea { display:block; width:100%; padding:8px; margin-bottom:8px; box-sizing:border-box; border:1px solid #ddd; border-radius:4px }
textarea {
    height: 150px;
}

button { padding:8px 12px; background:#0b6; color:#fff; border:none; border-radius:4px; cursor:pointer }
a { color:#0b6;  }
a:hover {
    background-color:red;


}

.container nav a {font-size:20px;}
.site-header .container nav a:hover {font-size:20px;background:none;text-decoration:underline;}
nav { margin-bottom:0px;padding-top:20px;font-size:24px; }
.item a{background:none;text-decoration:none;color:black;}
.item a:hover{background:none;text-decoration:underline;}




/* Sayfanın tamamını kaplayan wrapper (footer hariç) */
.page-wrapper {
    min-height: calc(100vh - 80px); /* footer yüksekliği: 80px */
}


/* Footer */
footer {
    background: #0b6;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Ortalamayı sağlayan wrapper */
.login-wrapper {
    display: flex;
    justify-content: center;   /* yatay */
    align-items: center;        /* dikey */
    height: 100vh;              /* ekran yüksekliği */
    background: #f5f5f5;        /* opsiyonel */
}

/* Login kutusu */
.login-box {
    background: white;
    padding: 30px;
    border-radius: 8px;
    width: 320px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


        /* LOGO CONTAINER */
        .yavuzhan-logo {
            display: flex;
            align-items: center;
            gap: 30px;
            font-family: 'Segoe UI', Arial, sans-serif;
background-color:#0b6;


        }

        
        /* LOGO SIMGESİ - 120x120 */
        .logo-symbol {
            position: relative;
            width: 120px;
            height: 120px;
            flex-shrink: 0;

        }
        
        /* GÜNEŞ DAİRESİ */
        .logo-sun {
            position: absolute;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #FF9800, #FFB74D);
            border-radius: 50%;
            top: 25px;
            left: 25px;
            box-shadow: 0 0 15px rgba(255, 152, 0, 0.3);
            z-index: 2;
            transition: all 0.3s ease;
        }
        
        /* IŞINLAR - EŞİT UZUNLUKTA VE SIMETRIK */
        .logo-ray {
            position: absolute;
            background: linear-gradient(to right, #FFB74D, #FF9800);
            border-radius: 4px;
            z-index: 1;
        }
        
        /* 8 IŞIN - TÜMÜ EŞİT UZUNLUKTA (60px) */
        /* YATAY IŞINLAR */
        .ray-1 { width: 100px; height: 8px; top: 56px; left: 10px; } /* SOL */
        .ray-2 { width: 100px; height: 8px; top: 56px; right: 10px; } /* SAĞ */
        
        /* DİKEY IŞINLAR */
        .ray-3 { width: 8px; height: 100px; top: 10px; left: 56px; } /* ÜST */
        .ray-4 { width: 8px; height: 100px; bottom: 10px; left: 56px; } /* ALT */
        
        /* ÇAPRAZ IŞINLAR - 45 DERECE */
        .ray-5 { 
            width: 80px; 
            height: 8px; 
            top: 25px; 
            left: 5px; 
            transform: rotate(45deg);
            transform-origin: left center;
        }
        
        .ray-6 { 
            width: 80px; 
            height: 8px; 
            top: 25px; 
            right: 5px; 
            transform: rotate(-45deg);
            transform-origin: right center;
        }
        
        .ray-7 { 
            width: 80px; 
            height: 8px; 
            bottom: 25px; 
            left: 5px; 
            transform: rotate(-45deg);
            transform-origin: left center;
        }
        
        .ray-8 { 
            width: 80px; 
            height: 8px; 
            bottom: 25px; 
            right: 5px; 
            transform: rotate(45deg);
            transform-origin: right center;
        }
        
        /* Y HARFİ */
        .logo-y {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 36px;
            z-index: 3;
        }
        
        .logo-y:before,
        .logo-y:after {
            content: '';
            position: absolute;
            background: white;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .logo-y:before {
            width: 7px;
            height: 22px;
            left: 8px;
            top: 0;
            transform: rotate(45deg);
        }
        
        .logo-y:after {
            width: 7px;
            height: 22px;
            right: 8px;
            top: 0;
            transform: rotate(-45deg);
        }
        
        /* YAZI KISMI */
        .logo-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1;
        }
        
        .logo-name {
            font-size: 40px;
            font-weight: 800;
            color: #1a237e;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }
        
        .logo-subtitle {
            font-size: 30px;
            font-weight: 700;
            color: #ff9800;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        
        /* GELİŞTİRİLMİŞ HOVER EFFECT */
        .logo-symbol:hover .logo-sun {
            animation: sun-pulse 0.6s infinite alternate ease-in-out;
            box-shadow: 0 0 25px rgba(255, 152, 0, 0.6);
            transform: scale(1.08);
        }
        
        .logo-symbol:hover .logo-y:before,
        .logo-symbol:hover .logo-y:after {
            background: #fff8e1;
        }
        
        /* IŞINLARA HOVER EFEKTİ - PARLAKLIK */
        .logo-symbol:hover .logo-ray {
            animation: ray-glow 1.5s infinite alternate;
        }
        
        /* IŞINLAR İÇİN SIRALI PARLAMA */
        .logo-symbol:hover .ray-1 { animation-delay: 0s; }
        .logo-symbol:hover .ray-2 { animation-delay: 0.2s; }
        .logo-symbol:hover .ray-3 { animation-delay: 0.4s; }
        .logo-symbol:hover .ray-4 { animation-delay: 0.6s; }
        .logo-symbol:hover .ray-5 { animation-delay: 0.1s; }
        .logo-symbol:hover .ray-6 { animation-delay: 0.3s; }
        .logo-symbol:hover .ray-7 { animation-delay: 0.5s; }
        .logo-symbol:hover .ray-8 { animation-delay: 0.7s; }
        
        /* YAZI HOVER EFFECT */
        .yavuzhan-logo:hover .logo-name {
            color: #283593;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .yavuzhan-logo:hover .logo-subtitle {
            color: #ff8f00;
            transform: translateX(3px);
        }
        
        /* ANİMASYON TANIMLARI */
        @keyframes sun-pulse {
            0% { 
                transform: scale(1.05);
                box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
            }
            100% { 
                transform: scale(1.12);
                box-shadow: 0 0 35px rgba(255, 152, 0, 0.8);
            }
        }
        
        @keyframes ray-glow {
            0% {
                opacity: 0.7;
                background: linear-gradient(to right, #FFB74D, #FF9800);
            }
            100% {
                opacity: 1;
                background: linear-gradient(to right, #FFD54F, #FFA000);
                box-shadow: 0 0 8px rgba(255, 213, 79, 0.5);
            }
        }
        
        /* DARK MODE VERSİYON */
        .yavuzhan-logo.dark .logo-name {
            color: #ffffff;
        }
        
        .yavuzhan-logo.dark .logo-subtitle {
            color: #FFB74D;
        }
        
        /* IŞINLARI DAHA İYİ GÖRMEK İÇİN ARKA PLAN */
        .logo-test-bg {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            padding: 20px;
            border-radius: 10px;
            display: inline-block;
        }