/* ===================================== */
/* FONT IMPORT */
/* Hero başlığı için Google Fonts bağlantısı */
/* ===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap');

/* ===================================== */
/* RESET & GLOBAL */
/* Tüm sayfa için temel sıfırlama, font ve arka plan ayarları */
/* ===================================== */

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

html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}

.wipe{position:fixed;inset:0;z-index:500;background:#000;transform:translateY(100%);pointer-events:none;}

body.light-mode .wipe{background:#f6f3ec;}

.section{position:fixed;inset:0;visibility:hidden;pointer-events:none;z-index:1;}

.section.active{visibility:visible;pointer-events:all;z-index:2;}

/* ===================================== */
/* RIGHT NAVIGATION */
/* Sağdaki dikey bölüm navigasyonu ve aktif durumları */
/* ===================================== */

.scroll-nav{position:fixed;top:12vh;bottom:12vh;right:0;width:110px;z-index:350;}

.scroll-zone{position:relative;width:100%;border:0;display:block;cursor:pointer;background:transparent;}

.scroll-zone.home{height:20%;}

.scroll-zone.works{height:60%;}

.scroll-zone.contact{height:20%;}

/* Works yokken nav: home ve contact eşit yükseklikte */
.scroll-nav.no-works .scroll-zone.home,
.scroll-nav.no-works .scroll-zone.contact{height:50%;}

.scroll-zone-label{position:absolute;top:50%;right:2.15rem;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;opacity:0;transition:opacity .35s ease,color .35s ease;pointer-events:none;}

.scroll-zone:hover .scroll-zone-label,.scroll-zone.active .scroll-zone-label{opacity:1;color:#fff;}

body.light-mode .scroll-zone-label{color:rgba(0,0,0,.48);}

body.light-mode .scroll-zone:hover .scroll-zone-label,body.light-mode .scroll-zone.active .scroll-zone-label{color:#000;}

.scroll-line{position:fixed;right:2.6rem;top:12vh;bottom:12vh;width:1px;z-index:360;pointer-events:none;}

.scroll-line::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.10);}

body.light-mode .scroll-line::before{background:rgba(0,0,0,.14);}

.scroll-line-fill{position:absolute;top:0;left:0;width:1px;height:0%;background:rgba(255,255,255,.88);transition:height .45s cubic-bezier(.16,1,.3,1),background .35s;}

body.light-mode .scroll-line-fill{background:rgba(0,0,0,.75);}

/* ===================================== */
/* HERO SECTION */
/* Ana giriş ekranı: arka plan, overlay, isim, slogan ve butonlar */
/* ===================================== */

.bg{position:absolute;inset:-30px;background:url('../img/home.png') center center / cover no-repeat;will-change:transform;}

.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.58);}

.hero-content{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:translate(-3%,-1%);}

.hero-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.4rem,4.4vw,4.4rem);font-weight:400;color:rgba(255,255,255,.94);letter-spacing:.22em;text-transform:uppercase;line-height:1;margin-bottom:1rem;}

.hero-slogan{font-size:clamp(.58rem,.75vw,.72rem);font-weight:300;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.30);margin-bottom:2.8rem;}

.hero-actions{display:flex;align-items:center;gap:1rem;}

.hero-btn{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:.82rem 1.7rem;display:inline-flex;align-items:center;cursor:pointer;transition:color .35s,background .35s,border-color .35s,transform .35s;}

.hero-btn-primary{color:#000;background:rgba(255,255,255,.88);border:1px solid transparent;}

.hero-btn-primary:hover{background:#fff;transform:translateX(3px);}

.hero-btn-secondary{color:rgba(255,255,255,.45);background:transparent;border:1px solid rgba(255,255,255,.16);}

.hero-btn-secondary:hover{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.42);transform:translateX(3px);}

/* ===================================== */
/* LOGO */
/* Sol üstte sabit duran logo ve light-mode görünümü */
/* ===================================== */

.logo{position:fixed;top:2rem;left:2rem;z-index:300;opacity:.82;transition:opacity .4s ease,transform .4s ease,filter .35s;cursor:pointer;padding:.6rem;margin:-.6rem;}

.logo img{height:74px;width:auto;display:block;}

.logo:hover{opacity:1;transform:rotate(8deg);}

body.light-mode .logo{filter:invert(1);}

/* ===================================== */
/* SOCIAL LINKS */
/* Sol alttaki sosyal medya bağlantıları */
/* ===================================== */

.social-links{position:fixed;bottom:2rem;left:2rem;z-index:300;display:flex;align-items:center;gap:.85rem;}

.social-links a{font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;transition:color .35s;padding:.75rem .45rem;margin:-.75rem -.45rem;}

.social-links a:hover{color:#fff;}

.social-sep{font-size:.72rem;color:rgba(255,255,255,.26);pointer-events:none;user-select:none;}

body.light-mode .social-links a{color:rgba(0,0,0,.48);}

body.light-mode .social-links a:hover{color:#000;}

body.light-mode .social-sep{color:rgba(0,0,0,.28);}

/* ===================================== */
/* WORKS SECTION */
/* Öne çıkarılmış çalışma slider'ı ve CTA bağlantıları */
/* ===================================== */

.works-section{background:#000;overflow:hidden;}

.works-wrap{position:relative;width:100%;height:100%;}

.work-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw 0 12vw;opacity:0;pointer-events:none;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}

.work-slide.active{opacity:1;pointer-events:all;transform:translate3d(0,0,0);}

.slide-bg{position:absolute;inset:0;z-index:0;}

.slide-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.08) brightness(.18) sepia(.2);transform:translate3d(0,0,0) scale(1.025);transition:transform 7s ease;will-change:transform;}

.work-slide.active .slide-bg img{transform:translate3d(0,0,0) scale(1);}

.slide-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.95) 35%,rgba(0,0,0,.38) 100%),linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 50%);}

.slide-inner{position:relative;z-index:1;display:flex;flex-direction:column;}

.slide-label{font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:1.2rem;}

.slide-title{font-size:clamp(2.8rem,6vw,5.5rem);font-weight:300;color:#fff;line-height:1.05;margin-bottom:1.4rem;}

.slide-desc{font-size:.9rem;font-weight:300;color:rgba(255,255,255,.38);max-width:420px;line-height:1.85;margin-bottom:2.2rem;}

.slide-cta,.works-all-link{font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.58);text-decoration:none;border:1px solid rgba(255,255,255,.18);padding:.75rem 1.4rem;transition:color .35s,border-color .35s,transform .35s;display:inline-flex;align-items:center;}

.slide-cta:hover,.works-all-link:hover{color:#fff;border-color:rgba(255,255,255,.55);transform:translateX(4px);}

.slide-cta-sep{font-size:.68rem;color:rgba(255,255,255,.22);padding:0 .6rem;pointer-events:none;user-select:none;}

.slide-actions{display:flex;align-items:center;gap:0;}

.works-all-link{opacity:1;pointer-events:all;position:static;}

/* ===================================== */
/* CONTACT SECTION */
/* İletişim ekranı, light tema, motif ve form stilleri */
/* ===================================== */

.contact-inner{position:relative;z-index:2;height:100%;overflow:hidden;background:#000;color:#f6f3ec;}

.contact-inner::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(circle at center,#fbfaf6 0%,#f0eadf 58%,#e7dfd2 100%);opacity:0;pointer-events:none;}

body.contact-light .contact-inner{background:#f0eadf;color:#111;}

body.contact-light .contact-inner::before{opacity:1;}

.contact-motif-wrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0;}

.motif{width:125vmin;height:125vmin;opacity:.42;animation:globalRotate 120s linear infinite;transition:opacity 1.35s cubic-bezier(.16,1,.3,1);}

.branch{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;transform-origin:500px 500px;animation:grow 9s ease-out infinite,leanLeft 9s ease-in-out infinite;}

.branch:nth-child(even){animation-name:grow,leanRight;}

body.contact-light .branch{stroke:rgba(0,0,0,.32);}

.b1{animation-delay:0s;}
.b2{animation-delay:.6s;}
.b3{animation-delay:1.2s;}
.b4{animation-delay:1.8s;}
.b5{animation-delay:2.4s;}
.b6{animation-delay:3s;}
.b7{animation-delay:3.6s;}
.b8{animation-delay:4.2s;}
.b9{animation-delay:4.8s;}
.b10{animation-delay:5.4s;}
.b11{animation-delay:6s;}
.b12{animation-delay:6.6s;}

.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.18);animation:float 34s linear infinite;}

.p1{left:12%;top:64%;animation-delay:0s;}
.p2{left:24%;top:28%;animation-delay:5s;}
.p3{left:39%;top:72%;animation-delay:10s;}
.p4{left:61%;top:22%;animation-delay:15s;}
.p5{left:76%;top:61%;animation-delay:20s;}
.p6{left:88%;top:38%;animation-delay:25s;}

body.contact-light .particle{background:rgba(0,0,0,.14);}

/* ===================================== */
/* CONTACT ANIMATIONS */
/* Motif dalları, dönüş ve parçacık animasyonları */
/* ===================================== */

@keyframes grow{0%{stroke-dashoffset:900;opacity:0;}18%{opacity:.55;}68%{stroke-dashoffset:0;opacity:.5;}100%{stroke-dashoffset:0;opacity:.12;}}

@keyframes leanLeft{0%{transform:scale(.2) rotate(-8deg);}100%{transform:scale(1.18) rotate(-34deg);}}

@keyframes leanRight{0%{transform:scale(.2) rotate(8deg);}100%{transform:scale(1.18) rotate(34deg);}}

@keyframes globalRotate{to{transform:rotate(360deg);}}

@keyframes float{0%{transform:translateY(40px);opacity:0;}30%{opacity:.7;}100%{transform:translateY(-120px);opacity:0;}}

.contact-content{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr minmax(340px,520px);align-items:center;gap:7vw;padding:0 10vw 0 12vw;}

.contact-label{font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.34);margin-bottom:1.5rem;}

.contact-title{font-size:clamp(3.2rem,7vw,7.2rem);font-weight:300;color:#f6f3ec;line-height:.95;letter-spacing:-.055em;margin-bottom:1.6rem;}

.contact-desc{max-width:430px;font-size:.95rem;font-weight:300;line-height:1.9;color:rgba(255,255,255,.48);}

body.contact-light .contact-label{color:rgba(0,0,0,.38);}

body.contact-light .contact-title{color:#111;}

body.contact-light .contact-desc{color:rgba(0,0,0,.5);}

.contact-form{display:flex;flex-direction:column;gap:.9rem;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}

.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f6f3ec;padding:1rem 1.1rem;font:inherit;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;outline:none;transition:border-color .25s,background .25s;}

.contact-form textarea{height:150px;resize:none;}

.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.38);}

.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);}

body.contact-light .contact-form input,body.contact-light .contact-form textarea{border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.18);color:#111;}

body.contact-light .contact-form input::placeholder,body.contact-light .contact-form textarea::placeholder{color:rgba(0,0,0,.38);}

body.contact-light .contact-form input:focus,body.contact-light .contact-form textarea:focus{border-color:rgba(0,0,0,.5);background:rgba(255,255,255,.28);}

.contact-submit{align-self:flex-start;border:1px solid rgba(255,255,255,.72);background:#f6f3ec;color:#111;padding:.95rem 2.2rem;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:transform .35s,background .25s;}

.contact-submit:hover{background:#fff;transform:translateX(4px);}

body.contact-light .contact-submit{border-color:rgba(0,0,0,.72);background:#111;color:#f6f3ec;}

body.contact-light .contact-submit:hover{background:#000;}

.signature{position:fixed;right:4rem;bottom:2rem;z-index:320;font-size:.62rem;letter-spacing:.28em;color:rgba(255,255,255,.28);transition:color .35s;pointer-events:none;}

body.light-mode .signature{color:rgba(0,0,0,.38);}

/* ===================================== */
/* CONTACT COLOR TIMELINE */
/* Contact bölümünde sabit UI elemanlarının wipe arkasında light temaya senkron geçmesi */
/* ===================================== */

body.contact-light .logo{filter:invert(1);}

body.contact-light .social-links a{color:rgba(0,0,0,.48);}

body.contact-light .social-links a:hover{color:#000;}

body.contact-light .social-sep{color:rgba(0,0,0,.28);}

body.contact-light .signature{color:rgba(0,0,0,.38);}

body.contact-light .scroll-zone-label{color:rgba(0,0,0,.48);}

body.contact-light .scroll-zone:hover .scroll-zone-label,body.contact-light .scroll-zone.active .scroll-zone-label{color:#000;}

body.contact-light .scroll-line::before{background:rgba(0,0,0,.14);}

body.contact-light .scroll-line-fill{background:rgba(0,0,0,.75);}

/* ===================================== */
/* CONTACT INFO */
/* Customizer'dan gelen e-mail ve telefon bilgileri */
/* ===================================== */

.contact-info{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:1.35rem;}

.contact-info a{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.52);text-decoration:none;transition:color .25s;}

.contact-info a:hover{color:#fff;}

body.contact-light .contact-info a{color:rgba(0,0,0,.52);}

body.contact-light .contact-info a:hover{color:#000;}
/* ===================================== */
/* RESPONSIVE */
/* Mobil görünüm düzeltmeleri */
/* ===================================== */

html{min-height:100%;}

body{min-height:100%;}

.section{height:100vh;min-height:100vh;}

.section.active{overflow:hidden;}

@supports(height:100svh){

.section{height:100svh;min-height:100svh;}

}

/* ===================================== */
/* TABLET */
/* 1200px altı */
/* ===================================== */

@media(max-width:1200px){

.work-slide{padding:0 9vw 0 10vw;}

.contact-content{grid-template-columns:minmax(0,1fr) minmax(320px,470px);gap:5vw;padding:0 9vw 0 10vw;}

.contact-title{font-size:clamp(3rem,6.4vw,6rem);}

}

/* ===================================== */
/* MOBILE */
/* 900px altı */
/* ===================================== */

@media(max-width:900px){

html{height:100%;overflow:hidden;}

body{height:100%;overflow:hidden;}

.section{height:100svh;min-height:100svh;overflow:hidden;}

.section.active{height:100svh;min-height:100svh;overflow:hidden;}

.logo{top:1rem;left:1rem;padding:.45rem;margin:-.45rem;}

.logo img{height:44px;}

.scroll-nav{display:none;}

.scroll-line{display:none;}

.signature{display:none;}

.social-links{position:fixed;left:0;right:0;bottom:.9rem;justify-content:center;gap:.45rem;flex-wrap:wrap;}

.social-links a{font-size:.52rem;letter-spacing:.14em;padding:.45rem .25rem;margin:-.45rem -.25rem;}

.social-sep{font-size:.52rem;}

/* ===================================== */
/* MOBILE HERO */
/* ===================================== */

.hero-content{justify-content:center;padding:5.5rem 6.5vw 4.8rem;transform:none;}

.hero-name{display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px;margin:0 auto 1rem;font-size:clamp(2.8rem,13vw,3.7rem);line-height:.94;letter-spacing:.07em;text-align:center;}

.hero-name span{display:block;white-space:nowrap;}

.hero-slogan{max-width:310px;margin:0 auto 2rem;font-size:.66rem;line-height:1.7;letter-spacing:.22em;color:rgba(255,255,255,.46);text-align:center;}

.hero-actions{width:100%;max-width:310px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem;}

.hero-btn{width:100%;justify-content:center;padding:.95rem 1rem;font-size:.58rem;letter-spacing:.18em;}

/* ===================================== */
/* MOBILE WORKS */
/* ===================================== */

.work-slide{justify-content:flex-end;min-height:100svh;padding:5.8rem 6.5vw 6rem;}

.slide-bg img{object-position:center center;filter:saturate(.72) brightness(.52) sepia(.08);transform:translate3d(0,0,0) scale(1.01);}

.work-slide.active .slide-bg img{transform:translate3d(0,0,0) scale(1);}

.slide-bg::after{background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.96) 100%),linear-gradient(to right,rgba(0,0,0,.74) 0%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.44) 100%);}

.slide-label{font-size:.54rem;letter-spacing:.24em;margin-bottom:.9rem;color:rgba(255,255,255,.48);}

.slide-title{max-width:330px;font-size:clamp(2.3rem,11vw,3.2rem);line-height:1.02;letter-spacing:-.045em;margin-bottom:1rem;text-shadow:0 14px 34px rgba(0,0,0,.55);}

.slide-desc{max-width:320px;font-size:.76rem;line-height:1.7;margin-bottom:1.6rem;color:rgba(255,255,255,.68);}

.slide-actions{width:100%;max-width:320px;display:flex;flex-direction:column;gap:.7rem;}

.slide-cta{width:100%;justify-content:center;padding:.9rem 1rem;font-size:.56rem;letter-spacing:.17em;}

.works-all-link{width:100%;justify-content:center;padding:.9rem 1rem;font-size:.56rem;letter-spacing:.17em;}

.slide-cta-sep{display:none;}

}
/* ===================================== */
/* MOBILE CONTACT */
/* 900px altı */
/* ===================================== */
@media(max-width:900px){
.contact-inner{height:100svh;min-height:100svh;overflow:hidden;}

.contact-content{height:100svh;min-height:100svh;display:grid;grid-template-columns:1fr;align-content:start;gap:1.25rem;padding:6.9rem 6.5vw 4.4rem;}

.contact-label{font-size:.52rem;letter-spacing:.24em;margin-bottom:.7rem;}

.contact-title{max-width:330px;font-size:clamp(2.2rem,10.4vw,3.25rem);line-height:.95;letter-spacing:-.055em;margin-bottom:.85rem;}

.contact-desc{max-width:330px;font-size:.74rem;line-height:1.62;color:rgba(255,255,255,.50);}

.contact-info{margin-top:.85rem;gap:.4rem;}

.contact-info a{font-size:.56rem;letter-spacing:.13em;line-height:1.35;overflow-wrap:anywhere;}

.contact-form{width:100%;gap:.58rem;}

.form-row{grid-template-columns:1fr;gap:.58rem;}

.contact-form input{padding:.74rem .9rem;font-size:.58rem;letter-spacing:.09em;}

.contact-form textarea{height:88px;resize:none;padding:.74rem .9rem;font-size:.58rem;letter-spacing:.09em;}

.contact-submit{width:100%;justify-content:center;padding:.78rem 1rem;font-size:.56rem;letter-spacing:.16em;}

.motif{width:135vmin;height:135vmin;opacity:.16;}
}

/* ===================================== */
/* SMALL MOBILE */
/* 420px altı */
/* ===================================== */

@media(max-width:420px){

.hero-name{max-width:320px;font-size:clamp(2.65rem,13vw,3.45rem);letter-spacing:.05em;}

.hero-slogan{font-size:.62rem;letter-spacing:.18em;}

.slide-title{font-size:clamp(2rem,10.8vw,2.8rem);}

.slide-desc{max-width:295px;}

.contact-content{padding:6.4rem 6vw 4.2rem;gap:1.05rem;}

.contact-title{font-size:clamp(2rem,10.6vw,2.95rem);line-height:.96;}

.contact-desc{font-size:.70rem;line-height:1.55;}

.contact-info a{font-size:.52rem;letter-spacing:.11em;}

.contact-form{gap:.52rem;}

.contact-form input{padding:.68rem .84rem;}

.contact-form textarea{height:78px;padding:.68rem .84rem;}

.social-links a{font-size:.50rem;}

}

/* ===================================== */
/* LANDSCAPE */
/* Düşük yükseklik */
/* ===================================== */

@media(max-height:620px) and (orientation:landscape){

.hero-content{padding:4rem 8vw 3rem;}

.hero-name{font-size:clamp(2rem,5vw,3rem);}

.hero-slogan{margin-bottom:1rem;}

.work-slide{padding:4rem 8vw 3rem;justify-content:center;}

.contact-content{grid-template-columns:1fr 1fr;padding:4rem 8vw 3rem;gap:1.5rem;align-items:center;}

.contact-title{font-size:clamp(2rem,5vw,3.5rem);}

.contact-form textarea{height:85px;}

.social-links{display:none;}

.signature{display:none;}

}

/* ===================================== */
/* REDUCED MOTION */
/* ===================================== */

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}

}