@font-face {
            font-family: Helvetica; 
            src: url(Helvetica.ttf);
        }
        :root {
            --light-x: 50%;
            --light-y: 50%;
        }

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000000;
            font-family: 'Helvetica', sans-serif;
            color: white;
            height: 100vh;
            width: 100vw;
            cursor: none; 
            user-select: none;
            -webkit-font-smoothing: antialiased;
            perspective: 1000px;

        }
        body,html {
            touch-action: manipulation;
            -webkit-text-size-adjust: 100%;
        }

        .brand-font {
            font-family: 'Cormorant Garamond', sans-serif;
            letter-spacing: 0.1em;
        }

        /* --- AMBIENT LIGHT --- */
        #ambient-light {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1; pointer-events: none;
            background: radial-gradient(
                circle at var(--light-x) var(--light-y), 
                #2B0709 0%, 
                #000000 80%
            );
            transition: background 0.1s linear;
            will-change: background;
        }

        /* --- CURSOR --- */
        #cursor-dot, #cursor-follower {
            pointer-events: none; position: fixed; top: 0; left: 0;
            transform: translate(-50%, -50%); mix-blend-mode: difference; z-index: 99999;
        }
        #cursor-dot { width: 8px; height: 8px; background: white; border-radius: 50%; }
        #cursor-follower {
            width: 50px; height: 50px; border: 1px solid white; border-radius: 50%; z-index: 99998;
            transition: width 0.3s, height 0.3s, background-color 0.3s, opacity 0.3s;
        }
        body.is-hovering #cursor-follower { width: 80px; height: 80px; background: rgba(255,255,255,1); border-color: transparent; opacity: 0.8; mix-blend-mode: overlay; }
        body.is-hovering #cursor-dot { opacity: 0; }
        body.is-dragging #cursor-follower { width: 30px; height: 30px; background: white; }

        /* --- GALLERY CANVAS --- */
        #gallery-canvas {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: auto; 
            transition: filter 0.6s ease;
            transform-origin: center center;
            z-index: 10;
            display: block;
            cursor: none;
        }
        
        body.is-zoomed #gallery-canvas {
            filter: blur(15px) brightness(0.3) grayscale(80%);
            pointer-events: none !important;
        }
        body.is-zoomed .ui-layer { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        /* --- ZOOM --- */
        #zoom-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 9999; pointer-events: none; background: transparent; cursor: none;
        }
        body.is-zoomed #zoom-overlay { pointer-events: auto; }

        #zoom-image {
            position: absolute; object-fit: contain; /* Zoomda da sığdır */
            transform-origin: top left; opacity: 0; box-shadow: none !important;
        }
        
        .close-btn {
            position: absolute; top: 2rem; right: 2rem; color: white; opacity: 0;
            transform: translateY(-30px) scale(0.5);
            transition: all 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1);
            background: rgba(255,255,255,0.1); padding: 16px; border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2); cursor: none; backdrop-filter: blur(10px); z-index: 10001;
        }
        body.is-zoomed .close-btn { opacity: 1; transform: translateY(0) scale(1); }

        /* --- INTRO --- */
        #intro-loader {
            position: fixed; inset: 0; z-index: 100000; background: #000;
            display: flex; align-items: center; justify-content: center;
            transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1); cursor: none;
            transform-origin: top; padding: 0px 40px;
        }
        #intro-loader.slide-up { transform: translateY(-100%); pointer-events: none; }

        .intro-content { width: 100%; height: auto; display: flex; align-items: center; justify-content: center; }
        .intro-img-box {
            overflow: hidden; opacity: 0; 
            position: relative;
            transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
        }
        .intro-img-box img { width: 100%; height: 100%; object-fit: cover; }

        @media (min-width: 769px) {
            .intro-content { gap: 0; }
            .intro-img-box { width: 100%; height: 100%; }
            .intro-img-box.left { transform: translateX(-150%); }
            .intro-img-box.center { transform: scale(0.8); z-index: 10; }
            .intro-img-box.right { transform: translateX(150%); }
            .intro-content.animate .intro-img-box { opacity: 1; transform: translateX(0) scale(1); }
            .intro-content.exit .intro-img-box { transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.6s ease; transform: translateY(-120vh) scale(0.9); opacity: 0; }
            .intro-content.exit .intro-img-box.left { transition-delay: 0s; }
            .intro-content.exit .intro-img-box.center { transition-delay: 0.1s; }
            .intro-content.exit .intro-img-box.right { transition-delay: 0.2s; }
            .d-block {display: block;}
            .d-none {display: none;}
        }

        @media (max-width: 768px) {
        .intro-content { display: block; position: relative; }
            .intro-img-box {
                position: absolute; width: 60vw; height: 45vh; left: 50%; top: 50%;
                margin-left: -30vw; margin-top: -22.5vh;
            }
            .intro-img-box.left { transform: translate(-150%, 20%) rotate(-15deg); z-index: 1; }
            .intro-img-box.right { transform: translate(150%, -20%) rotate(15deg); z-index: 2; }
            .intro-img-box.center { transform: translate(0, 100%) scale(0.5); z-index: 3; }
            .intro-content.animate .intro-img-box.left { opacity: 1; transform: translate(-5%, -2%) rotate(-6deg); }
            .intro-content.animate .intro-img-box.right { opacity: 1; transform: translate(5%, 2%) rotate(6deg); }
            .intro-content.animate .intro-img-box.center { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
            .intro-content.exit .intro-img-box { transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.6s ease; opacity: 0; }
            .intro-content.exit .intro-img-box.center { transform: translateY(-120vh) rotate(0deg); transition-delay: 0s; }
            .intro-content.exit .intro-img-box.right { transform: translateY(-120vh) rotate(6deg); transition-delay: 0.15s; }
            .intro-content.exit .intro-img-box.left { transform: translateY(-120vh) rotate(-6deg); transition-delay: 0.3s; }
            #cursor-dot, #cursor-follower { display: none !important; }
            #info-panel { left: 1rem !important; right: 1rem !important; width: auto !important; bottom: 5rem !important; }
            .ui-layer { padding: 1.5rem !important; }
            .ui-layer-right { padding: 1.5rem !important; }
            .mb-2 {margin-bottom:1rem !important;}
            .close-btn {top:1rem !important; right:1rem !important; padding:8px !important;}
            .ui-layer-center {justify-content: start !important;}
            .justify-between-right-mobile { justify-content: end !important;}
            .ui-layer-center { padding: 1.5rem !important;}
            .mt-2-mobile {margin-top: 0rem;}
            .mb-2-mobile {margin-bottom:0rem;}
            .ui-element img {width: 175px !important;}
            .d-none {display: block !important;}
            .d-block {display: none !important;}
            .top-right-mobile { position: fixed; top: 1.5rem; right: 1.5rem;}
            .justify-between-right {justify-content: start !important;}
            .item-overlay-2 {display: none;}
            .ui-layer .flex {flex-direction: column !important;}
            #info-panel {transform-origin: bottom right !important;}
            .items-end-desktop {align-items: flex-end !important;}
        }
            
        /* --- UI --- */
        .ui-layer {
            position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
            pointer-events: none; z-index: 200; padding: 3rem;
            display: flex; flex-direction: column; justify-content: space-between; 
            transition: opacity 1s ease; opacity: 0; transition-delay: 0.5s;
        }
        .ui-layer-right {
            position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
            pointer-events: none; z-index: 201; padding: 3rem;
            display: flex; flex-direction: column; justify-content: end; 
            transition: opacity 1s ease; opacity: 1; transition-delay: 0.5s;
            pointer-events: none; user-select: none;
        }
        .ui-layer-center {
            position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
            pointer-events: none; z-index: 200; padding: 3rem;
            display: flex; flex-direction: column; justify-content: end; 
            transition: opacity 1s ease; opacity: 1; transition-delay: 0.5s;
        }
        .ui-layer-center .justify-center {
            pointer-events: auto !important;
        }
        .justify-center {
            justify-content: center;
            gap: 4px;
        }
        .mb-1 {
            margin-bottom: 0.3rem;
        }
        .justify-between-right {
                justify-content: end;
        }
        body.gallery-visible .ui-layer { opacity: 1; }
        .ui-element { pointer-events: auto; }

        #info-panel {
            position: absolute; bottom: 3.5rem; width: 320px;
            background: white; color: black; border-radius: 12px; padding: 24px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            transform-origin: bottom left; transform: scale(0.8) translateY(20px);
            opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: auto;
        }
        #info-panel.is-open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
        #info-panel textarea {
            width: 100%; height: 100px; margin-top: 10px; padding: 10px;
            border-radius: 6px; background: #f3f4f6; color: #1f2937; font-family: 'Inter', sans-serif;
            font-size: 14px; resize: none; outline: none; border: 1px solid transparent;
            transition: border-color 0.2s; cursor: auto; user-select: text; 
        }
        #info-panel textarea:focus { border-color: #000; }

        .magnetic-wrap { display: inline-block; position: relative; padding: 20px; margin: -20px; }
        #toggle-btn { transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s; }
        #toggle-btn.is-active { background-color: #ffffff; color: #000000; border-color: #ffffff; }
        #toggle-btn.is-active svg { transform: rotate(180deg); }
        #toggle-btn svg { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .line-v, .line-h { transform-origin: center; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
        #toggle-btn.is-active .line-v { transform: rotate(90deg); }
        #toggle-btn.is-active .line-h { transform: rotate(180deg); }
        .bottom-right {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
        }
        .text-icon {
            display: flex;           
            gap: 12px;
            align-items: center;
            color: #F5EFDB;
        }
        path {
            fill:#F5EFDB;
        }
        .text-icon > a{
            transition: opacity 0.3s;
        }
        .text-gray {
            color:#f5efdb12;
            
        }
        a {
            transition:all 0.3s;
        }
        .text-gray a:hover {
            color:#F5EFDB;
        }
        .items-end-desktop {
            align-items: flex-start ;
        }
        .item-overlay-2 {
            display: none;
        }