.panel-wrapper {
        max-width: 1200px;
    width: 95%;
    margin: 9rem auto 1rem;
    background: #0e0e0e;
    border-radius: 5px;
    padding: 15px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
 .panel-wrapper h2 {
     color: #fff;
     text-align: center;
     margin-bottom: 2rem;
     font-size: 1.8rem;
}
 .login-form input, .login-form button {
     padding: 0.8rem 1rem;
     border: 1px solid #2a2a2a;
     background: #ffffff;
     color: #292929;
     font-size: 0.9rem;
     border-radius: none;
     margin-right: 10px;
}
 .login-form button {
     background: rgb(57 217 255);
     color: #1e5663;
     cursor: pointer;
     font-weight: bold;
}
 .login-form button:hover {
     opacity: 0.9;
}
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 2rem;
}
 th, td {
    padding: 3px;
    text-align: left;
    border: 1px solid #000000;
    color: #737373;
}
 th {
     background-color: #1a1a1a;
}
 .btn {
     padding: 0.5rem 1.2rem;
     border: none;
     border-radius: 0px;
     font-weight: bold;
     cursor: pointer;
     font-size: 0.80rem;
}
 .ban-btn {
     background: #140606;
     color: #f57f7f;
}
 .unban-btn {
     background: #0a3926;
     color: #1cf550;
     font-weight: bold;
}
 .btn:hover {
     opacity: 0.85;
}
 .error-msg {
     color: #ff6b6b;
     margin-top: 1rem;
}
 .reason-select {
     background: #0e0e0e;
     color: #fff;
     border: none;
     border-radius: 0;
     padding: 8px 2px;
     font-size: 0.80rem;
     appearance: auto;
     cursor: pointer;
}
 .reason-select:focus {
     outline: none;
     background: #3f3f3f;
}
 .alert {
     margin: 10rem auto 2rem;
     padding: 2rem 3rem;
     max-width: 600px;
     border-radius: 10px;
     background: #1a0000;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
     text-align: center;
     border: 1px solid #ff4d4d;
     color: #ffb3b3;
}
 .alert h1 {
     font-size: 2rem;
     color: #ff4d4d;
     margin-bottom: 0.5rem;
}
 .alert p {
     font-size: 1rem;
     color: #ffb3b3;
}
 .popup-content::-webkit-scrollbar {
     width: 10px;
}
 .popup-content::-webkit-scrollbar-track {
     background: #1a1a1a;
     border-radius: 1px;
}
 .popup-content::-webkit-scrollbar-thumb {
     background: #c6c6c6;
     border-radius: 1px;
     border: 2px solid #000000;
     transition: background 0.3s ease;
}
 .popup-content::-webkit-scrollbar-thumb:hover {
     background: #5e5e5e;
}
 .image-modal {
     display: none;
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(58 58 58);
     justify-content: center;
     align-items: center;
}
 .image-modal-content {
     max-width: 90%;
     max-height: 90%;
     border-radius: 50px;
     box-shadow: 0 0 20px rgb(0 0 0 / 40%);
     animation: zoomIn 0.5s ease-in-out;
}
 @keyframes zoomIn {
    from {
         transform: scale(0.8);
         opacity: 0;
    }
     to {
         transform: scale(1);
         opacity: 1;
    }
}
 .image-modal  {
     position: absolute;
     top: 0;
     right: 0;
     color: #fff;
     font-size: 1.5rem;
     cursor: pointer;
     z-index: 2100;
}
 html {
     scroll-behavior: smooth;
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}
 body {
     background-color: #000000;
     color: #b5b5b5;
     line-height: 1.6;
}
 header {
    padding: 1.4rem 5rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    user-select: none;
	transition: background 0.3s ease;
}

header.scroll-bg {
	background: rgb(0 0 0);
}

 .logo {
     font-size: 1.5rem;
     font-weight: bold;
     color: #c6c6c6;
     display: flex;
     align-items: center;
}
 nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .menu {
     list-style: none;
     display: flex;
}
 .menu li {
     margin-left: 2.5rem;
}
 .menu li a {
     text-decoration: none;
     color: #fff;
	 text-shadow: 0px 0px 1px #000000;
     font-size: 0.9rem;
     transition: color 0.2s;
}
 .menu li a:hover {
     color: #affdff;
}
 .menu li a i {
     margin-right: 0.2rem;
	 text-shadow: 0px 0px 1px #000000;
     transition: transform 0.1s;
}
 .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
}
 .hamburger span {
     height: 1px;
     width: 20px;
     background: #afafaf;
     margin-bottom: 8px;
     border-radius: 1px;
}
/* Hero Bölümü */
 .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: url(/assets/background1.png);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    user-select: none;
}
 .hero h1 {
     font-size: 3rem;
     margin-bottom: 2rem;
     color: #ffffff;
     text-shadow: 1px 1px 5px rgb(0 0 0 / 30%);
}
 .hero p {
     font-size: 1.1rem;
     max-width: 900px;
     color: #e5e5e5;
     text-shadow: 1px 1px 5px rgb(0 0 0 / 30%);
}
 .hero button {
    padding: 0.8rem 2.5rem;
    border: none;
    background: linear-gradient(176deg, rgb(186 186 186), rgb(255 255 255));
    color: rgb(0 0 0);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 2px;
    margin-top: 3rem;
    transition: background 0.3s;
    text-transform: uppercase;
}
 .hero button:hover {
     opacity: 0.8;
}
 section {
     scroll-margin-top: 80px;
}
 section.about {
     padding: 4rem 5rem;
     background: #000000;
     text-align: center;
}
 section.about h2 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
     color: #ffffff;
}
 section.about p {
    max-width: 950px;
    margin: 0 auto;
    font-size: 1rem;
    color: #b3b3b3;
    text-align: center;
}
 .team-container {
     margin-top: 4rem;
     display: flex;
     justify-content: center;
     gap: 4rem;
     flex-wrap: wrap;
}
 .team-member {
     cursor: pointer;
     background: linear-gradient(0deg, #000000, #101010);
     padding: 2rem;
     border-radius: 50px;
     width: 350px;
     text-align: center;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s;
}
 .team-member:hover {
     transform: translateY(-10px);
}
 .team-member img {
     width: 170px;
     height: 170px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 3rem;
}
 .team-member h3 {
     color: #fff;
     font-size: 1.5rem;
     margin-bottom: 0.3rem;
}
 .team-member .role {
     font-size: 1rem;
     color: #c8c8c8;
     margin-bottom: 1rem;
}
 .team-member .bio {
     font-size: 0.95rem;
     color: #888888;
}
 section.services {
     padding: 3rem 5rem;
     background: #000000;
     text-align: center;
}
 section.services h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
     color: #ffffff;
}
 .service-container {
     display: flex;
     justify-content: center;
     gap: 5rem;
     flex-wrap: wrap;
}
 .service {
    background: linear-gradient(180deg, rgb(8 8 8), rgb(0 0 0));
    border: 4px solid #000000;
    border-radius: 20px;
    padding: 3rem;
    width: calc(33.333% - 1rem);
    min-width: 250px;
    transition: transform 1.5s, box-shadow 0.1s;
    cursor: pointer;
}

.service h3 {
     font-size: 1.5rem;
     color: #ffffff;
     margin-bottom: 1rem;
     text-shadow: 0 1px 5px #444444;
}
 .service p {
     font-size: 1rem;
     color: #ffffff;
     text-shadow: 0 1px 5px #5c5c5c;
}
 .service-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(188deg, rgb(0 49 159), rgb(8 112 99));
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    transition: background 0.3s ease, transform 0.2s ease;
    font-size: 0.95rem;
}
 .service-link:hover {
     transform: scale(1.05);
}
/* Contact Section */
 section.contact {
	 margin: 5rem 5rem;
     padding: 5rem 5rem;
     background: #000;
     text-align: center;
}
 .contact h2 {
     font-size: 2.5rem;
     color: #fff;
     margin-bottom: 1rem;
     text-shadow: 0 0 10px #8f00ff33;
}
 .contact p {
     max-width: 700px;
     margin: 0 auto 2rem;
     color: #aaa;
     font-size: 1.1rem;
     line-height: 1.6;
}
 .contact-form {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.2rem;
     max-width: 600px;
     margin: 0 auto;
}
 .contact-form input, .contact-form textarea {
     width: 100%;
     padding: 1rem 2rem;
     border: 1px solid #2e2e2e;
     background-color: #0b0b0b;
     color: #dadada;
     border-radius: 1px;
     font-family: inherit;
     font-size: 01rem;
     transition: border-color 0.3s, box-shadow 0.3s;
}
 .contact-form input::placeholder, .contact-form textarea::placeholder {
     color: #464646;
}
 .contact-form input:focus, .contact-form textarea:focus {
     border-color: rgb(255 255 255);
     outline: none;
     box-shadow: 0 0 10px #bb29ff33;
}
 .contact-form button {
     padding: 0.9rem 2.2rem;
     background: rgb(10 50 71);
     color: #ffffff;
	 text-shadow: 0px 0px 1px #2d2d2d;
     border: none;
     border-radius: 6px;
     font-size: 1rem;
     cursor: pointer;
     transition: background 0.3s ease, transform 0.2s ease;
}
 .contact-form button:hover {
     opacity: 0.9;
     transform: scale(1.05);
}

 .lab-section-split {
     display: flex;
     gap: 5rem;
     padding: 10rem 15rem;
     background-color: #000;
     flex-wrap: wrap;
}
 .lab-column {
     flex: 1;
     min-width: 350px;
     text-align: center;
}
 .lab-column h2 {
     font-size: 2rem;
     color: #ffffff;
     margin-bottom: 2rem;
     text-shadow: 0 0 10px #3c3c3c;
}
 .lab-features {
    list-style: none;
    padding: 1rem 3rem;
    margin-top: 1rem;
    color: #ddd;
    font-size: 0.95rem;
    text-align: left;
}

 .coming-soon {
    border: 2px dashed #363636;
    background: #020202;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 250px;
}

.discord-button {
	margin-top: 10px;
    display: inline-block;
    background-color: #5865F2;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.discord-button:hover {
    background-color: #4752c4;
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.8);
}

 footer {
	background: rgb(0 0 0 / 80%);
    text-align: center;
    padding: 5px;
    color: #585858;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 0.8rem;
}
 @media (max-width: 1200px) {
     header {
         padding: 1rem 2rem;
    }
     .menu {
         flex-direction: column;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         height: 500px;
         background: rgb(38 38 38 / 96%);
         display: none;
         box-shadow: 0 5px 4px rgb(0 0 0 / 0%);
    }
     .menu.active {
         display: flex;
    }
     .menu li {
         margin: 1.5rem 0;
         text-align: center;
    }
     .hamburger {
         display: flex;
    }
     .service {
         padding: 2rem 1rem;
         width: calc(33.333% - 1rem);
         min-width: 320px;
         border-radius: 0;
    }
     .service h3{
         font-size: 1.2rem;
    }
     section.services h2{
         font-size: 2rem;
    }
     section.contact {
         padding: 2rem 1rem;
    }
     section.contact h2{
         font-size: 2rem;
    }
     section.contact p{
         font-size: 1rem;
    }
     .hero{
         padding: 2rem 1rem;
    }
     .hero h1 {
         font-size: 1.5rem;
    }
     .hero p {
         font-size: 1rem;
    }
     .hero button {
         padding: 0.8rem 5rem;
    }
     section.about h2{
         font-size: 2rem;
    }
     section.about p{
         font-size: 1rem;
    }
     section.about{
         padding: 2rem 1rem;
    }
    .lab-section-split {
         flex-direction: column;
         padding: 8rem 1rem;
    }
     .lab-column {
         margin-bottom: 2rem;
    }
     .popup-content {
         max-width: 95%;
         max-height: 90vh;
         padding: 1rem;
    }
     .popup-image {
         height: auto;
    }
}