:root {
    --bg: #05080d;
    --ink: #f9efe7;
    --muted: rgba(249, 239, 231, 0.72);
    --surface: rgba(18, 11, 13, 0.76);
    --surface-strong: rgba(28, 14, 18, 0.94);
    --border: rgba(255, 255, 255, 0.08);
    --accent: #ff8b2a;
    --accent-strong: #d73b1f;
    --accent-alt: #ffd98a;
    --accent-soft: #ffb367;
    --shadow-red: rgba(232, 76, 28, 0.42);
    --shadow-soft: rgba(255, 176, 76, 0.22);
    --button-red: #f04e2d;
    --button-red-deep: #9e1f1f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(4, 6, 10, 0.5), rgba(4, 6, 10, 0.82)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.55)),
        radial-gradient(circle at 20% 28%, rgba(255, 180, 86, 0.18), transparent 14%),
        radial-gradient(circle at 72% 30%, rgba(196, 64, 28, 0.2), transparent 18%),
        radial-gradient(circle at 50% 82%, rgba(255, 142, 68, 0.12), transparent 26%),
        linear-gradient(180deg, #05070a 0%, #0b0d12 25%, #070a0f 50%, #05070b 100%);
    color: var(--ink);
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    position: relative;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

body::before {
    background:
        linear-gradient(180deg, rgba(255, 120, 45, 0.12), transparent 30%),
        radial-gradient(circle at 50% 46%, rgba(255, 182, 94, 0.18), transparent 24%),
        radial-gradient(circle at 14% 20%, rgba(255, 170, 72, 0.14), transparent 18%),
        radial-gradient(circle at 80% 16%, rgba(202, 62, 30, 0.15), transparent 22%);
    filter: blur(68px) saturate(1.35);
    opacity: 0.92;
}

body::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.14)),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045) 0,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px,
            transparent 3px
        );
    opacity: 0.22;
    mix-blend-mode: screen;
}

/* Sayfayı dikeyde tam ortalar, alttaki dev boşluğu yok eder */
main {
    min-height: 100vh;
    padding: 6rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 2rem;
    background: rgba(8, 10, 14, 0.72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.18);
}

.top-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.top-nav .brand {
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.24em;
    font-size: 0.95rem;
}

.top-address {
    position: fixed;
    top: 5.2rem;
    right: 1.6rem;
    font-size: 0.78rem;
    color: rgba(238, 242, 255, 0.56);
    letter-spacing: 0.14em;
    z-index: 3;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

/* LSFMD yazısının kesilmesi önlendi, boyutu ve hatları oturtuldu */
.hero-title {
    margin-top: 1rem; 
    font-size: clamp(5.5rem, 15vw, 13rem); 
    font-weight: 900;
    line-height: 1.15; 
    padding: 0.1em 0.3em; 
    text-transform: uppercase;
    letter-spacing: -0.06em;
    background: linear-gradient(135deg, #fff7dc 0%, var(--accent-alt) 18%, #ffad66 38%, var(--accent-strong) 70%, #7e191e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: visible;
    filter: drop-shadow(0 0 26px rgba(255, 144, 75, 0.25));
}

.hero-subtitle {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: rgba(238, 242, 255, 0.6);
}

.hero-text,
.hero-copy p {
    max-width: 720px; 
    margin: 0 auto;
    color: rgba(238, 242, 255, 0.78);
    font-size: 1rem; 
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.8rem;
}

.about-panel {
    display: grid;
    gap: 0.85rem;
    max-width: 820px;
    margin: 1.3rem auto 0;
    padding: 1.35rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.about-panel .panel-editor {
    background: rgba(255, 255, 255, 0.02);
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.features-grid,
.personnel-grid,
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
    max-width: 1080px;
    margin: 0 auto;
}

.feature-card,
.personnel-card,
.admin-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
    padding: 1.8rem;
}

.feature-card {
    display: grid;
    gap: 1rem;
}

.feature-card h2,
.feature-card h3,
.about-panel .panel-copy h2,
.admin-card h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.admin-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.announcement-panel {
    width: 100%;
    max-width: 1080px;
    margin: 1rem auto 0;
    display: grid;
    gap: 0.4rem;
}

.announcement-label {
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 240, 240, 0.7);
}

.announcement-ticker {
    overflow: hidden;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(250, 113, 1, 0.24), rgba(160, 131, 3, 0.1), rgba(202, 42, 2, 0.24));
    box-shadow: 0 0 28px rgba(175, 128, 0, 0.18), inset 0 0 25px rgba(255,255,255,0.05);
}

.announcement-track {
    display: flex;
    width: max-content;
    gap: 2rem;
    height: 100%;
    align-items: center;
    padding: 0.55rem 1rem;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

.announcement-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff4f6;
    text-shadow: 0 0 12px rgba(249, 255, 168, 0.9);
}

.feature-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 139, 148, 0.18);
    color: var(--accent-strong);
    font-weight: 800;
}

.stats-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-card {
    display: grid;
    gap: 0.6rem;
    padding: 1.15rem;
}

.stats-card strong {
    display: block;
    font-size: 1.35rem;
}

.stats-card span {
    color: rgba(238, 242, 255, 0.72);
    line-height: 1.8;
}

.hero-copy,
.about-panel .panel-copy,
.about-panel .panel-editor,
.admin-card,
.feature-card,
.personnel-card {
    animation: fadeInUp 1.1s ease both;
}

/* Form kutusu yayılma sorunu giderildi, ortalandı ve sabitlendi */
.form-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
    padding: 2.5rem 2rem;
    max-width: 680px;
    width: 100%;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 1.4s ease both;
}

.apply-form,
.admin-field {
    display: grid;
    gap: 1.2rem;
}

.apply-form {
    margin: 0 auto;
    width: 100%;
    text-align: left;
}

.apply-form label,
.admin-field label {
    display: grid;
    gap: 0.8rem;
    color: rgba(238, 242, 255, 0.78);
    font-size: 0.95rem;
}

.apply-form input,
.apply-form textarea,
.admin-field input,
.admin-field textarea {
    width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 7, 14, 0.86);
    color: var(--ink);
    padding: 0.95rem 1rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.apply-form textarea,
.admin-field textarea {
    min-height: 120px;
    resize: vertical;
}

.apply-form input:focus,
.apply-form textarea:focus,
.admin-field input:focus,
.admin-field textarea:focus {
    border-color: rgba(233, 255, 107, 0.85);
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.14);
}

.apply-form input::placeholder,
.apply-form textarea::placeholder {
    color: rgba(247, 248, 255, 0.38);
}

/* Kusursuz yatay Pill buton formu */
.pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important; 
    height: auto !important; 
    padding: 12px 32px !important; 
    border-radius: 9999px !important; 
    font-size: 0.95rem !important; 
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    cursor: pointer;
    line-height: 1.2;
    aspect-ratio: auto !important; 
    box-sizing: border-box;
}

/* Form içindeki gönder butonu pill formuna getirildi */
.apply-form button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important; 
    height: auto !important; 
    padding: 12px 32px !important; 
    border-radius: 9999px !important; 
    font-size: 0.95rem !important; 
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(221, 136, 9, 0.95), rgba(119, 72, 2, 0.95));
    color: #fff;
    box-shadow: 0 10px 25px rgba(134, 81, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin: 0.5s auto 0 auto;
}

.primary {
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 22%, var(--button-red) 58%, var(--button-red-deep) 100%);
    color: #fffdf8;
    border-color: rgba(255, 209, 127, 0.28);
    box-shadow: 0 18px 32px rgba(212, 86, 27, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: var(--ink);
    border-color: rgba(255, 184, 96, 0.26);
    box-shadow: inset 0 0 0 1px rgba(255, 185, 107, 0.14);
}

.danger {
    background: linear-gradient(180deg, rgba(197, 64, 43, 0.34), rgba(127, 20, 22, 0.22));
    color: #ffe5d7;
    border-color: rgba(255, 140, 100, 0.25);
}

.pill:hover,
.apply-form button:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 45px rgba(15, 8, 10, 0.32);
}

.primary:hover {
    box-shadow: 0 22px 40px rgba(212, 86, 27, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nav-link {
    color: rgba(238, 242, 255, 0.9);
    text-decoration: none;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    font-size: 0.96rem;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
    background: rgba(255, 255, 255, 0.05);
}

.nav-link:hover,
.nav-link.active {
    background: rgba(221, 136, 9, 0.95);
    color: #f8edf1;
}

.active {
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.22);
}

.footer-divider,
.about-panel,
.form-section,
.admin-card,
.feature-card,
.personnel-card {
    border-radius: 28px;
}

.site-footer {
    max-width: 1080px;
    margin: 0 auto 2rem;
    padding: 1.4rem 1.6rem;
    color: rgba(238, 242, 255, 0.62);
    font-size: 0.92rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
}

.top-status,
.menu-icon,
.status-dot,
.top-status .nav-links {
    display: none;
}

@media (max-width: 840px) {
    .top-nav {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.25rem;
    }

    .top-nav .nav-links {
        justify-content: center;
    }

    .top-address {
        right: 1rem;
    }
}

@media (max-width: 640px) {
    main {
        padding: 9rem 1rem 3.5rem;
    }

    .hero-title {
        font-size: clamp(3.5rem, 26vw, 8.5rem);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .stats-band,
    .features-grid,
    .admin-grid,
    .personnel-grid {
        grid-template-columns: 1fr;
    }

    .top-address {
        display: none;
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPop {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes floatNav {
    from {
        transform: translateX(-50%) translateY(18px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@media (max-width: 820px) {
    .hero-title {
        font-size: clamp(6rem, 28vw, 12rem);
    }

    .top-status,
    .top-address {
        left: 1rem;
        right: 1rem;
        transform: none;
    }

    .top-address {
        top: 8.2rem;
        right: 1rem;
        left: auto;
    }
}

@media (max-width: 560px) {
    .hero-title {
        font-size: clamp(5rem, 34vw, 8.5rem);
    }

    .hero-text {
        font-size: 0.88rem;
    }
}