/* ================================
   COLIN'S DENIM NOVA - STYLES
   ================================ */

/* --- FONTS --- */
@font-face {
    font-family: 'MG Extended Bold';
    src: url('../fonts/mg-extended-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* --- BASE STYLES --- */
body {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

/* Paragraf ve metin için Montserrat */
p,
span,
li,
td,
th,
label,
input,
textarea,
button:not(header button) {
    font-family: 'Montserrat', sans-serif;
}

/* Tüm başlıklar ve menü için Goldman font */
nav a,
header a,
header button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Goldman', 'MG Extended Bold', 'Montserrat', sans-serif;
    font-weight: 700;
}

/* --- HERO SECTION --- */
.hero-left {
    container-type: inline-size;
}

.text-giant {
    font-size: clamp(3rem, 25cqw, 14rem);
    line-height: 0.75;
}

/* --- COSMOS BACKGROUND --- */
.cosmos-bg {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='400' height='400' fill='%23000000'/%3E%3Ccircle cx='45' cy='30' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='120' cy='80' r='1.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='300' cy='50' r='1' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='20' cy='180' r='1' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='350' cy='250' r='1.2' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='180' cy='320' r='1' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='90' cy='380' r='1.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='380' cy='10' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='250' cy='150' r='0.8' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='50' cy='290' r='1' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='220' cy='40' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='160' cy='220' r='1.3' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='330' cy='120' r='1' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='10' cy='100' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='390' cy='350' r='1.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='280' cy='300' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='100' cy='10' r='0.8' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='200' cy='200' r='1' fill='%23ffffff' opacity='0.4'/%3E%3Cpath d='M80 50 L82 58 L90 60 L82 62 L80 70 L78 62 L70 60 L78 58 Z' fill='%23ffffff'/%3E%3Cpath d='M320 180 L322 188 L330 190 L322 192 L320 200 L318 192 L310 190 L318 188 Z' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M150 350 L151 354 L155 355 L151 356 L150 360 L149 356 L145 355 L149 354 Z' fill='%23ffffff' opacity='0.9'/%3E%3Cpath d='M350 50 L351 53 L354 54 L351 55 L350 58 L349 55 L346 54 L349 53 Z' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='200' cy='100' r='0.6' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='140' cy='280' r='0.7' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='300' cy='380' r='0.9' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='60' cy='130' r='0.8' fill='%23ffffff' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 400px 400px;
    animation: moveStars 120s linear infinite;
}

@keyframes moveStars {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 1000px 1000px;
    }
}

/* --- TEXT EFFECTS --- */
.glow-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.dashed-line {
    background-image: linear-gradient(to right, white 50%, transparent 50%);
    background-position: bottom;
    background-size: 20px 2px;
    background-repeat: repeat-x;
}

/* --- FOOTER DASHED LINE --- */
.footer-dashed-line {
    width: 90%;
    max-width: 800px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='6'%3E%3Crect x='0' y='0' width='35' height='6' rx='3' ry='3' fill='white'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 50px 6px;
}

/* --- CUSTOM SCROLLBAR --- */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #ffffff #1a1a2e;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.custom-scrollbar::-webkit-scrollbar {
    height: 16px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ffffff, #e0e0ff, #ffffff);
    border-radius: 10px;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.4),
        inset 0 0 5px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #ffffff, #f0f0ff, #ffffff);
    box-shadow:
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.8);
}

/* --- DOT SCROLLBAR --- */
.dot-scrollbar {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dot-scrollbar::-webkit-scrollbar {
    display: none;
}

.scroll-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.scroll-dot.active {
    background: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* --- SCROLL HINT ANIMATION --- */
.scroll-hint {
    animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {

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

    50% {
        transform: translateX(10px);
        opacity: 0.5;
    }
}

/* --- STAR WARS CRAWL EFFECT --- */
.star-wars-container {
    perspective: 400px;
    height: 700px;
    overflow: hidden;
    position: relative;
}

.star-wars-container::before,
.star-wars-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 10;
    pointer-events: none;
}

.star-wars-container::before {
    top: 0;
    background: linear-gradient(to bottom, black 0%, transparent 100%);
}

.star-wars-container::after {
    bottom: 0;
    background: linear-gradient(to top, black 0%, transparent 100%);
}

.star-wars-crawl {
    display: flex;
    flex-direction: column;
    width: 100%;
    transform-origin: 50% 100%;
    transform: rotateX(20deg);
    animation: crawl 20s linear infinite;
}

.star-wars-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    text-align: center;
    padding: 2rem 0;
    flex-shrink: 0;
}

@keyframes crawl {
    0% {
        transform: rotateX(20deg) translateY(0);
    }

    100% {
        transform: rotateX(20deg) translateY(-50%);
    }
}

/* --- MOBILE MENU --- */
#mobileMenu {
    transition: opacity 0.3s ease;
}

#mobileMenu.hidden {
    opacity: 0;
    pointer-events: none;
}

#mobileMenu.flex {
    opacity: 1;
    pointer-events: all;
}