/* img div içinde olmuyor scanner box engel oluyor olabilir ama zaten tam sığsa
responsive sistem bozulur daha çok kod bilgisi faq  ve sistem temelleri sorular türkçe destek vs. site son kontrol gizlilik ve güvenlik ile dövüldü
*/


:root {
    --accent: #00F5FF;
    --accent-glow: rgba(0, 245, 255, 0.6);
    --secondary: #6E44FF;
    --secondary-glow: rgba(110, 68, 255, 0.5);
    --bg-dark: #010103;
    --bg-deep: #000000;
    --bg-card: rgba(10, 10, 15, 0.85);
    --text-main: #FFFFFF;
    --text-dim: #94A3B8;
    --glass-border: rgba(255, 255, 255, 0.12);
    --neon-shadow: 0 0 25px var(--accent-glow);
    --grad: linear-gradient(135deg, #00F5FF, #6E44FF);
    --trust-green: #00FF88;
    --trust-glow: rgba(0, 255, 136, 0.5);
}

/* ========================================
   PHASE 4: PAGE TRANSITION LOADER
   ======================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 8px;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: loaderPulse 1.5s ease-in-out infinite;
    margin-bottom: 2rem;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid transparent;
    border-top: 3px solid var(--accent);
    border-right: 3px solid var(--secondary);
    border-radius: 50%;
    animation: loaderSpin 1s linear infinite;
    box-shadow: 0 0 30px var(--accent-glow), inset 0 0 20px rgba(110, 68, 255, 0.2);
}

.loader-text {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-dim);
    animation: loaderFade 2s ease-in-out infinite;
}

@keyframes loaderSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes loaderPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes loaderFade {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* ========================================
   100% TRUST INDICATOR (ENHANCED)
   ======================================== */
.trust-indicator {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}

.trust-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(transparent 0deg,
            var(--accent) 0deg,
            var(--accent) 36deg,
            transparent 36deg,
            transparent 40deg,
            var(--accent) 40deg,
            var(--accent) 76deg,
            transparent 76deg,
            transparent 80deg,
            var(--accent) 80deg,
            var(--accent) 116deg,
            transparent 116deg,
            transparent 120deg,
            var(--accent) 120deg,
            var(--accent) 156deg,
            transparent 156deg,
            transparent 160deg,
            var(--accent) 160deg,
            var(--accent) 196deg,
            transparent 196deg,
            transparent 200deg,
            var(--accent) 200deg,
            var(--accent) 236deg,
            transparent 236deg,
            transparent 240deg,
            var(--accent) 240deg,
            var(--accent) 276deg,
            transparent 276deg,
            transparent 280deg,
            var(--accent) 280deg,
            var(--accent) 316deg,
            transparent 316deg,
            transparent 320deg,
            var(--accent) 320deg,
            var(--accent) 356deg,
            transparent 356deg);
    animation: trustRotate 8s linear infinite;
    filter: drop-shadow(0 0 25px var(--accent-glow)) drop-shadow(0 0 40px rgba(0, 245, 255, 0.4));
}

.trust-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: var(--bg-dark);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 3px solid var(--glass-border);
    box-shadow: inset 0 0 40px rgba(0, 245, 255, 0.15), 0 0 30px rgba(0, 245, 255, 0.1);
}

.trust-percent {
    font-size: 3.5rem;
    font-weight: 900;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: trustPulse 2s ease-in-out infinite;
    line-height: 1;
}

.trust-label {
    font-size: 0.45rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 0;
    text-align: center;
    line-height: 1.2;
}

@keyframes trustRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes trustPulse {

    0%,
    100% {
        opacity: 0.8;
        text-shadow: 0 0 10px var(--accent-glow);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px var(--accent-glow), 0 0 50px var(--secondary-glow);
    }
}

/* ========================================
   OPEN SOURCE BADGE
   ======================================== */
.open-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid var(--trust-green);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--trust-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: badgeGlow 3s ease-in-out infinite;
    margin-bottom: 1.5rem;
}

.open-source-badge::before {
    content: '◆';
    font-size: 0.8rem;
}

@keyframes badgeGlow {

    0%,
    100% {
        box-shadow: 0 0 10px var(--trust-glow);
    }

    50% {
        box-shadow: 0 0 25px var(--trust-glow), 0 0 40px rgba(0, 255, 136, 0.3);
    }
}

/* ========================================
   SCANNER BOX IMAGE FIX
   ======================================== */
.scanner-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 500px;
}

/* ========================================
   ENHANCED GLASSMORPHISM & MICRO-INTERACTIONS
   ======================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}


/* Dynamic Wallpaper Styles */
.body-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: background-image 1.2s ease-in-out;
}

.body-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: radial-gradient(circle at center, rgba(1, 1, 3, 0.45) 0%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    backdrop-filter: blur(1px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--grad);
    border-radius: 10px;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(1, 1, 3, 0.8);
    backdrop-filter: blur(20px);
    z-index: 5000;
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 5px;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 245, 255, 0.5);
    text-decoration: none;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo:hover {
    letter-spacing: 8px;
    filter: brightness(1.3);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dim);
    font-size: 0.7rem;
    /* Smaller font for 10 links */
    font-weight: 850;
    transition: 0.4s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    /* For underline */
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 10px var(--accent-glow);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 4000;
}

.menu-toggle span {
    width: 30px;
    height: 2px;
    background: var(--accent);
    transition: 0.3s;
}

@media (max-width: 1024px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(1, 1, 3, 0.98);
        backdrop-filter: blur(40px);
        flex-direction: column;
        justify-content: center;
        transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .nav-links.active {
        right: 0;
    }
}

.lang-btn {
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 950;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    color: var(--text-dim);
    position: relative;
    overflow: hidden;
}

.lang-btn.active {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
    transform: scale(1.1);
}

.lang-btn:not(.active):hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.1);
}

/* Glassmorphism V2 */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    padding: 4rem;
    transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: 0.8s;
}

.glass-card:hover {
    border-color: rgba(0, 245, 255, 0.4);
    transform: translateY(-15px) rotateX(2deg);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 245, 255, 0.1);
}

.glass-card:hover::after {
    left: 100%;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at center, rgba(110, 68, 255, 0.08) 0%, transparent 70%);
}

.hero-img-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-img {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    opacity: 0.4;
    mask-image: radial-gradient(circle, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle, black, transparent 80%);
    animation: pulseSlow 10s infinite alternate ease-in-out;
}

@keyframes pulseSlow {
    from {
        transform: translateY(-50%) scale(1);
        opacity: 0.3;
    }

    to {
        transform: translateY(-50%) scale(1.05);
        opacity: 0.5;
    }
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1000px;
}

.hero h1 {
    font-size: 8rem;
    font-weight: 950;
    line-height: 0.9;
    letter-spacing: -6px;
    margin-bottom: 2.5rem;
}

.hero .btn-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 10rem;
    /* Push next content down */
}

/* Matrix Scanner Effect */
.scanner-box {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid var(--glass-border);
}

@keyframes scan {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

.scanner-box::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 8px;
    /* Slightly thicker */
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 30px var(--accent);
    z-index: 5;
    animation: scan 2s ease-in-out infinite;
    /* 2 seconds infinite */
}

.scanner-box.no-scan::before {
    display: none;
}

/* Animations Core */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate {
    animation: fadeInUp 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Responsive Grid */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

section {
    padding: 120px 0;
    /* Adjusted base padding */
    margin-bottom: 15rem;
    /* Massive gap to prevent clashing */
}

/* Image containment absolute protocols */
.scanner-box img,
.glass-card img {
    width: 100%;
    height: auto;
    max-height: 500px;
    /* Capped for safety */
    object-fit: contain;
    display: block;
    border-radius: 20px;
    margin: 0 auto;
}

.scanner-box {
    margin: 2rem 0;
    /* Extra safety margin */
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
}

/* Zero exploit special card */
.zero-exploit-card {
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        var(--grad) border-box;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 245, 255, 0.1);
}

.zero-exploit-card::before {
    content: 'TOP SECRET';
    position: absolute;
    top: -15px;
    right: 30px;
    background: var(--accent);
    color: #000;
    padding: 2px 10px;
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 2px;
    border-radius: 4px;
}

/* AI Verification Badge */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: rgba(0, 245, 255, 0.05);
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 5px var(--accent-glow);
        opacity: 0.8;
    }

    to {
        box-shadow: 0 0 15px var(--accent-glow);
        opacity: 1;
    }
}

.ai-badge::before {
    content: '●';
    color: var(--accent);
    font-size: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 4rem;
    /* Increased gap */
}

/* Copy Button for Setup Commands */
.copy-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 5px 12px;
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.copy-badge:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Buttons */
.btn {
    padding: 1.4rem 4rem;
    border-radius: 100px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-primary {
    background: var(--grad);
    color: white;
    box-shadow: 0 20px 40px var(--secondary-glow);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-5px);
    /* Less aggressive jump */
    filter: brightness(1.2);
    box-shadow: 0 0 50px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 30px var(--accent-glow);
    transform: translateY(-5px);
}

/* Footer Extra */
footer {
    padding: 120px 8%;
    background: #000;
    border-top: 1px solid var(--glass-border);
}

/* Responsive Extreme */
@media (max-width: 1200px) {
    .hero h1 {
        font-size: 6rem;
        letter-spacing: -4px;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 4rem;
        letter-spacing: -2px;
    }

    .hero-img {
        display: none;
    }

    .nav-links {
        display: none;
    }

    .glass-card {
        padding: 2.5rem;
    }
}

/* ========================================
   PHASE 6: LIGHTBOX & DOWNLOAD MODAL
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 30px;
    padding: 3rem;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 100px rgba(0, 245, 255, 0.15);
    animation: modalSlide 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
}

@keyframes modalSlide {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 15px;
    box-shadow: 0 0 50px rgba(0, 245, 255, 0.2);
    border: 1px solid var(--glass-border);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal-overlay.active .lightbox-img {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    color: var(--accent);
    font-size: 2.5rem;
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
}

.modal-close:hover {
    transform: rotate(90deg) scale(1.2);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    width: 110%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.lightbox-nav span {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.3s;
    pointer-events: auto;
    user-select: none;
}

.lightbox-nav span:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Download Modal Specifics */
.download-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.legal-check {
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.legal-check input {
    width: 22px;
    height: 22px;
    accent-color: var(--accent);
    cursor: pointer;
}

@media (max-width: 1024px) {
    .lightbox-nav {
        width: 100%;
        bottom: -100px;
        top: auto;
        transform: none;
    }
}