/* CSS Variables - Monochromatic Theme */
:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --border-color: #e5e5e5;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Layout: Hybrid (Sidebar + Central Grid) */
.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    /* Strict Viewport Height */
    overflow: hidden;
    /* No Global Scroll */
}

/* Sidebar (Left) */
/* Sidebar (Left) */
/* Sidebar (Left) */
.sidebar {
    width: 320px;
    /* Increased from 250px */
    height: 100vh;
    padding: var(--spacing-lg) var(--spacing-md);
    background: #000;
    border-right: 1px solid #111;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align top-down for better control */
    z-index: 100;
    flex-shrink: 0;
    overflow-y: auto;
    /* Allow scroll if content is tall */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.sidebar::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

/* 1. Logo Position: Optical Center Bias (Lower than before) */
.sidebar-header {
    margin-top: 2vh;
    /* Reduced to 2vh to maximize space */
    margin-bottom: var(--spacing-md);
    text-align: left;
    flex-shrink: 0;
    cursor: pointer;
    /* Clickable */
}

/* CSA Elegant Logo */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.logo-csa {
    display: flex;
    justify-content: space-between;
    width: 250px; /* Exact premium width */
    font-family: 'Cormorant Garamond', 'Bodoni Moda', 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 300; /* Light weight matches Didot / Canela Light perfectly */
    color: #ffffff;
    line-height: 0.95;
    text-transform: uppercase;
}

.logo-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 15px;
    width: 250px; /* Matches logo width exactly */
}

.logo-line {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.55rem; /* Grown and highly visible */
    font-weight: 300;
    color: #999999;
    text-transform: lowercase;
    display: block;
    width: 100%;
    text-align: justify;
    text-align-last: justify; /* Pixel-perfect letter stretching */
    line-height: 1.1;
    transition: color 0.3s ease;
}

.sidebar-header:hover .logo-line {
    color: #ffffff;
}

/* 2. Compact Nav to ensure Footer fits */
.nav-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex: 1;
    /* Takes available space */
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Increased gap for airy, spacious layout with larger font */
    margin-top: auto; /* Push nav links to the bottom */
    padding-bottom: 20px;
}

.nav-links li {
    font-family: var(--font-heading);
    font-size: 1.5rem; /* Enlarged sub-headings for premium readability */
    text-transform: lowercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease, font-weight 0.3s ease;
    display: block;
    width: 250px; /* Exact same width as the logo! */
    text-align: right; /* Perfectly aligned flush-right under 'Λ' */
    line-height: 1.3;
}

.nav-links li:hover,
.nav-links li.active {
    color: #ffffff;
    font-weight: 500;
}

.legal-links {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
    /* Push to bottom of flex container */
    padding-bottom: 20px;
    /* Safety padding */
}

.legal-links a {
    text-decoration: none !important;
    color: #bbb;
    /* Lighter gray */
    font-size: 0.75rem;
    text-transform: lowercase;
    transition: color 0.3s;
    letter-spacing: 0.5px;
}

.legal-links a:hover {
    color: #999;
    /* Slightly darker */
    text-decoration: none !important;
}

.legal-links a:active,
.legal-links a:focus,
.legal-links a:visited {
    text-decoration: none !important;
    color: #bbb;
    /* Keep consistent or specific active color? User said "Aktifken underline olmaz" */
}

/* Legal Overlay */
.legal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    /* 85% Black as requested */
    backdrop-filter: blur(5px);
    z-index: 2000;
    /* Above everything */
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.legal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.legal-panel {
    width: 60%;
    /* 55-65% */
    max-width: 900px;
    max-height: 90vh;
    background: transparent;
    color: #fff;
    padding: 40px;
    position: relative;
    overflow-y: auto;
    /* Custom scrollbar hiding */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.legal-panel::-webkit-scrollbar {
    display: none;
}

.close-legal {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
}

.close-legal:hover {
    color: #fff;
}

/* Legal Content Typography */
.legal-intro {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
    line-height: 1.4;
}

.legal-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #bbb;
    text-align: left;
    /* Never justified */
}

.legal-body p {
    margin-bottom: 15px;
}

.legal-footer {
    margin-top: 40px;
    border-top: 1px solid #333;
    padding-top: 15px;
}

.legal-footer p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.7rem;
    color: #555;
    text-align: center;
    margin: 0;
}

/* Main Content (Right) */
.main-content {
    flex: 1;
    /* Take remaining width */
    height: 100vh;
    /* Full Height */
    display: flex;
    /* align-items: center; Removed for top alignment */
    /* justify-content: center; Removed for top alignment */
    padding: 0;
    /* Removed padding to start from top */
    position: relative;
    background: #fff;
    /* White Canvas */
    /* Revert to White as compliant with "White Space" canvas */
    overflow: hidden;
    /* No Scroll */
    /* Strict no scroll for Home */
}

/* Mosaic Grid: 8 Items */
/* 4 Columns x 3 Rows allows for the specific 2x2 + 2x1 mix */
.gallery-grid {
    /* Mosaic Grid: 7 Vertical Strips */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr;
    /* Full height strips */
    gap: 10px;
    /* Slight gap for separation */

    width: 100%;
    height: 100%;
    /* Fill Container */

    opacity: 0;
    animation: fadeIn 1s forwards;
    padding: 0;
    /* Remove internal padding if any */
}

/* Thick Line Simulation (Optional) - If gap isn't enough, we can use borders. 
   But gap with white background creates white lines. 
   If user wants BLACK lines, we might need dark bg. 
   Let's try simply using the Gap first as negative space. */

/* Hide Top Nav / Footer from previous iterations */
.top-nav,
.site-footer {
    display: none;
}

/* Category Cards */
.category-card {
    position: relative;
    background: #000;
    /* Dark background for loading */
    /* Darker placeholder */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 100%;
    /* Fill Grid Cell */
    height: 100%;
    /* Fill Grid Cell */
}

.category-card img,
.category-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop to fit */
    display: block;
    filter: grayscale(100%);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.category-card:hover img,
.category-card:hover video {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* Typography for Cards */
.category-card .cat-label {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 2;
    color: #fff;
    text-transform: lowercase;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    /* Adjusted for tighter fit */
    letter-spacing: 1px;
    pointer-events: none;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* Modes for Main Content */
.dark-mode-grid {
    background-color: #000;
}

/* Mosaic Grid Generic (Replaces specific home grid logic or extends it) */
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    /* Fixed row height, items span rows */
    grid-auto-flow: dense;
    /* Fills gaps */
    gap: 20px;
    width: 100%;
    height: 100%;
    padding: 30px;
    overflow-y: auto;
    /* Allow scroll if items exceed viewport */
}

/* Dynamic Spans for Varied Look (Applied to children) */
/* Pattern to make it look "Designed" */
.mosaic-grid>div:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.mosaic-grid>div:nth-child(4) {
    grid-column: span 2;
}

.mosaic-grid>div:nth-child(5) {
    grid-row: span 2;
}

.mosaic-grid>div:nth-child(8) {
    grid-column: span 2;
}

.mosaic-grid>div:nth-child(10) {
    grid-row: span 2;
    grid-column: span 2;
}

/* Add more randomization if needed */

/* Music Card Styling in Mosaic */
/* Music Page Styling - Refined */
.music-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Items start from top, distributed manually or via gaps */
    gap: 40px;
    /* Space between tracks */
    height: 100%;
    position: relative;
    padding-top: 40px;
    /* Breathing room top */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Very subtle separation if needed, or none */
}

/* Remove border for last child if we use it */
.music-column:last-child {
    border-right: none;
}

.music-track {
    display: flex;
    flex-direction: row;
    /* Icon + Text */
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: transform 0.4s ease, opacity 0.4s ease;
    padding: 0 10px;
    opacity: 0.7;
    /* Default quiet state */
}

.music-track:hover,
.music-track.playing {
    opacity: 1;
    /* Wake up */
    transform: translateX(5px);
}

.music-track-icon {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0.8;
}

.music-track-name {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1rem;
    /* Readable but elegant */
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rhythm/Wave Visual */
.music-rhythm {
    position: absolute;
    bottom: 40px;
    /* White space area */
    left: 0;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    opacity: 0.3;
    /* Very subtle */
    pointer-events: none;
}

.rhythm-bar {
    width: 2px;
    background-color: #fff;
    animation: quietWave 2s infinite ease-in-out;
}

@keyframes quietWave {

    0%,
    100% {
        height: 5px;
    }

    50% {
        height: 15px;
    }
}

@keyframes wave {

    0%,
    100% {
        height: 2px;
    }

    50% {
        height: 18px;
    }
}

/* Fashion Page Styling */
.fashion-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    /* Extremely subtle sep */
}

.fashion-column:last-child {
    border-right: none;
}

.fashion-column video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: grayscale(100%); Removed for Color by default */
    transition: transform 0.6s ease;
    opacity: 1;
}

.fashion-column:hover video {
    transform: scale(1.05);
}

.fashion-text {
    position: absolute;
    top: 65%;
    /* Align from top to keep titles consistent */
    bottom: auto;
    /* Cancel bottom alignment */
    left: 20px;
    right: 10px;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
}

.fashion-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 5px;
    font-weight: 400;
    letter-spacing: 1px;
}

.fashion-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #ccc;
    line-height: 1.4;
    max-width: 90%;
    opacity: 0.9;
}

.fashion-footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 20;
    pointer-events: none;
}

.fashion-footer p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 5px;
}

.fashion-footer span {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Accessories (Video) Styling in Mosaic */
.video-card {
    position: relative;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.video-card:hover video {
    opacity: 1;
}

/* Ensure Gallery Grid (Home) shares properties or is distinct */
/* Home uses .gallery-grid with explicit JS styles. */
/* We will switch JS to use .mosaic-grid for Media pages. */

/* Center Logo Block */
.logo-block {
    grid-column: 2;
    grid-row: 2;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-md);
    border: 1px solid #f0f0f0;
    z-index: 10;
}

.logo-block h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin: 0;
    color: #000;
}

.logo-block .by-cs {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1;
    margin-top: -10px;
}

/* Responsive */
@media (max-width: 1024px) {
    .app-container {
        flex-direction: column;
        overflow-y: auto;
    }

    .sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: var(--spacing-md);
    }

    .main-content {
        height: auto;
        min-height: 600px;
        /* Ensure space for grid */
    }

    .gallery-grid {
        /* On tablet/mobile, we might stack differently or keep grid but smaller */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .logo-block {
        grid-column: span 2;
        grid-row: 1;
        /* Logo top */
        height: 150px;
    }

    /* Hide some items or re-order if 8 items don't fit 3x3 neatly without center */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    max-width: 600px;
    padding: 40px;
    text-align: center;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    cursor: pointer;
}

/* Music Player Footer */
.music-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000;
    border-top: 1px solid #333;
    padding: 20px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: var(--font-body);
}

.music-player.hidden {
    display: none;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 800px;
}

.play-btn {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 25px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.play-btn:hover {
    background: #ccc;
}

.player-info {
    display: flex;
    flex-direction: column;
}

#player-track-name {
    font-weight: 500;
    font-size: 1rem;
}

#player-status {
    font-size: 0.8rem;
    color: #888;
}

/* Acquire Button (Sculptures) */
.acquire-container {
    padding: 15px;
    text-align: center;
    margin-top: auto;
    /* Push to bottom */
}

.acquire-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 8px 15px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
}

.acquire-btn:hover {
    background: #fff;
    color: #000;
}

/* --- RESPONSIVE DESIGN --- */

/* Tablet & Mobile (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .app-container {
        flex-direction: column;
        height: auto;
        overflow-y: auto;
        /* Enable page scroll */
    }

    .sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #222;
        padding: 20px;
        position: relative;
        /* No fixed */
        flex-shrink: 0;
        background: #000;
    }

    .sidebar-header {
        margin-top: 0;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        /* allow wrapping */
        gap: 15px;
        justify-content: center;
        padding-bottom: 10px;
    }

    .nav-links li {
        font-size: 0.9rem;
        border: 1px solid #333;
        padding: 5px 10px;
        border-radius: 4px;
        color: #888;
    }

    .nav-links li:hover,
    .nav-links li.active {
        border-color: #555;
        color: #fff;
    }

    .legal-links {
        display: none;
        /* Hide legal links on mobile to save space/clutter */
    }

    .main-content {
        height: auto;
        overflow: visible;
    }

    /* Force Grid to 2 columns on Tablet */
    .gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        grid-auto-rows: 300px;
        /* Fixed height for consistency */
        overflow-y: visible !important;
    }

    /* Adjust specific items that span */
    .gallery-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* Music/Fashion columns should stack */
    .music-column,
    .fashion-column {
        min-height: 300px;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Mobile (max-width: 768px) */
@media screen and (max-width: 768px) {
    .sidebar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .nav-links {
        justify-content: flex-start;
        gap: 10px;
    }

    /* Force Grid to 1 column on Mobile */
    .gallery-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: minmax(300px, auto);
    }

    /* Logo Block in Grid */
    .logo-block {
        display: none;
        /* Hide internal grid logo on mobile */
    }

    /* Music Background Logic Fix for Mobile Stacking */
    /* Since we can't easily re-slice the bg image with just CSS, 
       we acknowledge the sliced look or try to reset it. 
       Resetting strictly via CSS is hard because playMusicPage sets inline styles.
       We rely on the user extracting "responsive sans design changes". 
       The slices will just stack, which is acceptable for "no redesign". */
}

/* --- High Performance GPU Hardware Acceleration for Desktop --- */
.gallery-grid video,
.fashion-column video,
.video-card video,
.music-card,
.gallery-item {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}