@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Manrope:wght@300;400;500&display=swap');*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f0eee8;color:#181818;font-family:DM Sans,Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}#hdr{height:92px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;position:fixed;z-index:50;top:0;left:0;right:0;color:white;transition:.3s}#hdr.on{height:70px;background:rgba(240,238,232,.95);color:#171717;border-bottom:1px solid #d3cfc6;backdrop-filter:blur(12px)}.logo{width:150px}.logo img{max-height:58px;object-fit:contain;object-position:left}nav{display:flex;gap:32px;font-size:10px;text-transform:uppercase;letter-spacing:.15em}.menu{display:none;font-size:10px;letter-spacing:.15em}.hero,.projectHero{height:100svh;min-height:700px;position:relative;color:#fff}.hero>img,.projectHero>img{position:absolute;inset:0;height:100%;object-fit:cover}.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.04) 75%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 50%)}.herotxt{position:absolute;left:5vw;bottom:10vh;z-index:2}.herotxt small,.projectTitle small{font-size:9px;letter-spacing:.3em}.herotxt h1{font:300 clamp(58px,8.2vw,132px)/.84 Manrope;margin:20px 0 30px;letter-spacing:-.06em}.herotxt h1 i,.quote i,.projectTitle h1 i{font-weight:300;color:#c8b7a1}.herotxt p{font-size:13px;letter-spacing:.03em}.scroll{position:absolute;z-index:2;right:5vw;bottom:10vh;font-size:9px;letter-spacing:.2em;border-bottom:1px solid;padding-bottom:8px}.manifest{padding:150px 5vw;display:grid;grid-template-columns:1fr 2.3fr;gap:7vw}.num,.workhead small{font-size:9px;letter-spacing:.24em;color:#777}.manifest h2{font:300 clamp(40px,5.5vw,80px)/1.04 Manrope;margin:0 0 35px;letter-spacing:-.045em}.manifest h2 em{font-style:normal;color:#9a948b}.manifest p{max-width:680px;line-height:1.9;color:#666;font-size:13px}.works{padding:20px 5vw 150px}.workhead{display:grid;grid-template-columns:1fr 1fr;align-items:end;border-bottom:1px solid #ccc7be;padding-bottom:28px;margin-bottom:65px}.workhead h2{font:300 clamp(48px,6vw,90px)/.9 Manrope;margin:15px 0 0;letter-spacing:-.055em}.workhead>p{justify-self:end;max-width:430px;color:#777;font-size:12px}.workgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:90px 2.2vw}.work{grid-column:span 6}.work:nth-child(4n+1){grid-column:span 7}.work:nth-child(4n+2){grid-column:span 5}.pic{position:relative;overflow:hidden;background:#ddd}.pic img{height:min(46vw,650px);object-fit:cover;transition:.7s}.work:nth-child(4n+2) .pic img{height:min(54vw,740px)}.work:hover img{transform:scale(1.025)}.pic span{position:absolute;top:15px;left:15px;background:#f0eee8;padding:7px 9px;font-size:9px}.workmeta{position:relative;padding-top:16px}.workmeta h3{font-size:17px;font-weight:400;margin:0}.workmeta p{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#777}.workmeta b{position:absolute;right:0;top:13px;font-size:18px;font-weight:300}.quote{background:#96352f;color:white;padding:120px 5vw}.quote small{letter-spacing:.25em;font-size:9px}.quote p{font:300 clamp(44px,6vw,88px)/1.04 Manrope;margin:35px 0 0}.quote i{font-style:normal;color:#d5bbb4}footer{background:#151515;color:#eee;padding:120px 5vw 35px}.ftitle{font:300 clamp(58px,8vw,120px)/.87 Manrope;letter-spacing:-.06em}.ftitle i{font-style:normal;color:#666}.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;border-top:1px solid #383838;margin-top:85px;padding-top:25px}.fgrid small{font-size:8px;letter-spacing:.2em;color:#777}.fgrid p{font-size:11px;line-height:1.8}.copy{border-top:1px solid #383838;margin-top:60px;padding-top:25px;font-size:8px;letter-spacing:.16em;color:#777}.reveal{opacity:0;transform:translateY(28px);transition:.8s}.reveal.show{opacity:1;transform:none}.projectHero{height:92svh}.projectTitle{position:absolute;z-index:2;left:5vw;bottom:8vh;right:5vw}.projectTitle h1{font:300 clamp(58px,8vw,125px)/.88 Manrope;letter-spacing:-.06em;margin:18px 0}.projectTitle p{font-size:11px;letter-spacing:.15em;text-transform:uppercase}.projectIntro{padding:30px 5vw;display:grid;grid-template-columns:.7fr 1.5fr 1fr;gap:6vw}.projectIntro h2{font:300 clamp(38px,4.5vw,68px)/1 Manrope;margin:0 0 28px}.projectIntro p{color:#666;line-height:1.9;font-size:13px}.projectIntro dl{margin:0}.projectIntro dl div{display:grid;grid-template-columns:80px 1fr;border-top:1px solid #cbc7be;padding:15px 0}.projectIntro dt{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#777}.projectIntro dd{margin:0;font-size:11px}.gallery{padding:0 5vw 130px;display:grid;grid-template-columns:repeat(12,1fr);gap:6vw 2vw}.gallery figure{margin:0;overflow:hidden}.gallery img{height:100%;object-fit:cover}.gallery .wide{grid-column:1/13;height:70vw;max-height:900px}.gallery .gtext{grid-column:2/7;padding:40px 0 70px}.gtext span{font-size:9px}.gtext p{font:300 25px/1.5 Manrope;color:#555}.gallery .portrait{grid-column:2/7;height:58vw;max-height:800px}.gallery .land{grid-column:7/13;height:40vw;max-height:620px;margin-top:14vw}.nextproj{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #cbc7be}.nextproj a{padding:55px 5vw}.nextproj a+ a{border-left:1px solid #cbc7be}.nextproj .right{text-align:right}.nextproj small{display:block;font-size:8px;letter-spacing:.2em;color:#777;margin-bottom:15px}.nextproj b{font:300 clamp(20px,3vw,42px) Manrope}@media(max-width:800px){#hdr{height:75px}.logo{width:125px}nav{display:none}.menu{display:block}.herotxt h1{font-size:57px}.manifest,.workhead,.projectIntro{grid-template-columns:1fr;gap:28px}.manifest{padding:90px 5vw}.workgrid{display:block}.work{margin-bottom:60px}.work:nth-child(n) .pic img{height:auto;aspect-ratio:4/3}.workhead>p{justify-self:start}.fgrid{grid-template-columns:1fr}.projectHero{height:80svh}.projectTitle h1{font-size:53px}.gallery{display:block}.gallery figure{height:auto!important;margin-bottom:25px}.gallery img{aspect-ratio:4/3}.gallery .gtext{padding:30px 0}.nextproj{grid-template-columns:1fr}.nextproj a+ a{border-left:0;border-top:1px solid #cbc7be}}
.project-gallery {
/*    padding: 110px 0 130px;*/
    background: #f3f1ed;
}


/* -------------------------------------------------------
   BAŞLIK
------------------------------------------------------- */

.project-gallery .detail-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    margin-bottom: 55px;
}

.project-gallery .section-label {
    display: flex;
    align-items: center;
    gap: 14px;
}

.project-gallery .section-label span,
.project-gallery .section-label strong {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.project-gallery .section-label i {
    display: block;
    width: 42px;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

.project-gallery .detail-intro-meta {
    max-width: 520px;
    text-align: right;
}

.project-gallery .detail-intro-meta strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
}

.project-gallery .detail-intro-meta span {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    opacity: .6;
}


/* -------------------------------------------------------
   GRID
------------------------------------------------------- */

.project-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* -------------------------------------------------------
   GÖRSEL
------------------------------------------------------- */

.project-gallery .gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #ddd;
}

.project-gallery .gallery-item-large {
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 720px;
}

.project-gallery .gallery-item-wide {
    grid-column: span 2;
    aspect-ratio: 16 / 8;
}

.project-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.6,.2,1),
        filter .5s ease;
}


/* -------------------------------------------------------
   HOVER
------------------------------------------------------- */

.project-gallery .gallery-item:hover img {
    transform: scale(1.035);
}


/* -------------------------------------------------------
   NUMARA
------------------------------------------------------- */

.project-gallery .gallery-number {
    position: absolute;
    left: 20px;
    bottom: 18px;

    color: #fff;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;

    z-index: 2;
}


/* -------------------------------------------------------
   BÜYÜTME İŞARETİ
------------------------------------------------------- */

.project-gallery .gallery-view {
    position: absolute;
    right: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;

    color: #fff;
    font-size: 16px;

    opacity: 0;
    transform: translateY(5px);

    transition:
        opacity .3s ease,
        transform .3s ease;

    z-index: 2;
}

.project-gallery .gallery-item:hover .gallery-view {
    opacity: 1;
    transform: translateY(0);
}


/* -------------------------------------------------------
   HAFİF OVERLAY
------------------------------------------------------- */

.project-gallery .gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            transparent 35%
        );

    pointer-events: none;

    z-index: 1;
}


/* -------------------------------------------------------
   MOBİL
------------------------------------------------------- */

@media (max-width: 768px) {

    .project-gallery {
        padding: 70px 0 80px;
    }

    .project-gallery .detail-intro {
        display: block;
        margin-bottom: 35px;
    }

    .project-gallery .detail-intro-meta {
        margin-top: 25px;
        max-width: none;
        text-align: left;
    }

    .project-gallery .gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .project-gallery .gallery-item,
    .project-gallery .gallery-item-large,
    .project-gallery .gallery-item-wide {
        grid-column: auto;
        grid-row: auto;

        width: 100%;
        min-height: 0;

        aspect-ratio: 4 / 3;
    }

    .project-gallery .gallery-view {
        opacity: 1;
        transform: none;
    }

}
	
/* ======================================================
   PROJECT LIGHTBOX
====================================================== */

body.lightbox-open {
    overflow: hidden;
}

.project-lightbox {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 90px;

    background: rgba(10, 10, 10, .96);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.project-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}


/* GÖRSEL */

.project-lightbox-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.project-lightbox-image img {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 100px);

    width: auto;
    height: auto;

    object-fit: contain;
}


/* KAPAT */

.project-lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;

    z-index: 5;

    width: 48px;
    height: 48px;

    border: 0;
    background: transparent;

    color: #fff;

    font-size: 38px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;
}


/* ÖNCEKİ / SONRAKİ */

.project-lightbox-prev,
.project-lightbox-next {
    position: absolute;
    top: 50%;

    z-index: 5;

    width: 50px;
    height: 50px;

    transform: translateY(-50%);

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;

    background: rgba(0,0,0,.15);

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease;
}

.project-lightbox-prev {
    left: 25px;
}

.project-lightbox-next {
    right: 25px;
}

.project-lightbox-prev:hover,
.project-lightbox-next:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
}


/* SAYI */

.project-lightbox-counter {
    position: absolute;

    left: 30px;
    bottom: 25px;

    color: rgba(255,255,255,.75);

    font-size: 11px;
    font-weight: 500;

    letter-spacing: .18em;
}


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

@media (max-width: 768px) {

    .project-lightbox {
        padding: 65px 15px;
    }

    .project-lightbox-image img {
        max-height: calc(100vh - 130px);
    }

    .project-lightbox-close {
        top: 12px;
        right: 12px;
    }

    .project-lightbox-prev,
    .project-lightbox-next {
        width: 42px;
        height: 42px;

        background: rgba(0,0,0,.4);
    }

    .project-lightbox-prev {
        left: 10px;
    }

    .project-lightbox-next {
        right: 10px;
    }

    .project-lightbox-counter {
        left: 15px;
        bottom: 15px;
    }

}
/* === Homepage portfolio grid revision === */
body:not(.detail) .workgrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:52px 22px;
}
body:not(.detail) .work,
body:not(.detail) .work:nth-child(4n+1),
body:not(.detail) .work:nth-child(4n+2){
  grid-column:auto;
}
body:not(.detail) .work .pic{
  width:100%;
  aspect-ratio:4 / 3;
}
body:not(.detail) .work .pic img,
body:not(.detail) .work:nth-child(4n+2) .pic img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
@media (max-width:1180px){
  body:not(.detail) .workgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:800px){
  body:not(.detail) .workgrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:42px 14px;
  }
  body:not(.detail) .work{margin-bottom:0}
  body:not(.detail) .work:nth-child(n) .pic img{
    height:100%;
    aspect-ratio:auto;
  }
}
@media (max-width:520px){
  body:not(.detail) .workgrid{grid-template-columns:1fr}
}


/* =========================================================
   MOBİL MENÜ
========================================================= */

/* Masaüstü */
.menu-toggle {
    display: none;
}

.mobile-nav {
    display: none;
}


@media (max-width:760px) {

    /* Masaüstü menüyü kapat */
    #hdr .desktop-nav {
        display: none;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    #hdr .menu-toggle {
        display: block;

        position: relative;
        z-index: 1002;

        width: 46px;
        height: 46px;

        padding: 0;

        border: 1px solid rgba(0,0,0,.22);
        border-radius: 50%;

        background: transparent;
        color: #171512;

        cursor: pointer;
    }

    #hdr .menu-toggle span {
        position: absolute;

        left: 50%;

        width: 22px;
        height: 1px;

        background: currentColor;

        transition:
            top .3s ease,
            transform .3s ease;
    }

    #hdr .menu-toggle span:first-child {
        top: 18px;
        transform: translateX(-50%);
    }

    #hdr .menu-toggle span:last-child {
        top: 26px;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------
       TAM EKRAN MENÜ
    ----------------------------------------------------- */

    .mobile-nav {
        position: fixed;
        inset: 0;

        z-index: 1000;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 30px;

        background: #806750;
        color: #fff;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity .35s ease,
            visibility .35s ease,
            transform .35s ease;
    }

    .mobile-nav a {
        color: #fff;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(34px, 10vw, 52px);
        font-weight: 400;

        letter-spacing: -.02em;

        text-decoration: none;
    }


    /* -----------------------------------------------------
       MENÜ AÇIK
    ----------------------------------------------------- */

    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }


    /* -----------------------------------------------------
       X
    ----------------------------------------------------- */

    #hdr .menu-toggle.is-open {
        position: fixed;

        top: 20px;
        right: 18px;

        z-index: 1002;

        color: #fff;

        border-color: rgba(255,255,255,.55);
    }

    #hdr .menu-toggle.is-open span:first-child {
        top: 22px;

        transform:
            translateX(-50%)
            rotate(45deg);
    }

    #hdr .menu-toggle.is-open span:last-child {
        top: 22px;

        transform:
            translateX(-50%)
            rotate(-45deg);
    }


    /* Sayfa kaymasını durdur */

    body.menu-open {
        overflow: hidden;
    }

}




/* =========================================================
   SCROLLED HEADER
========================================================= */

#hdr {
    transition:
        background .35s ease,
        box-shadow .35s ease,
        padding .35s ease;
}

#hdr .logo img {
    transition: opacity .2s ease;
}


/* Sayfa aşağı kaydırıldığında */

#hdr.scrolled {
    background: rgba(255,255,255,.96);

    box-shadow:
        0 1px 0 rgba(0,0,0,.08);
}

#hdr.scrolled .desktop-nav a {
    color: #171512;
}

#hdr.scrolled .menu-toggle {
    color: #171512;
}