/*==================================================
  RESET  (Original)
==================================================*/
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
    background:#F6F4EF;
    color:#0A0A0A;
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;          /* NO SCROLL */
}
img{ width:100%; display:block; object-fit:cover }
a{ text-decoration:none; color:inherit }
button{ background:none; border:none; cursor:pointer }
ul{ list-style:none }

/*==================================================
  ROOT  (Original)
==================================================*/
:root{
    --bg:#F6F4EF;
    --black:#090909;
    --white:#F8F7F2;
    --gray:#BEBAB0;
    --line:#D8D4CB;
    --gold:#9A7347;
    --transition:.45s cubic-bezier(.2,.7,.2,1);
}

/*==================================================
  TYPOGRAPHY  (Original sizes)
==================================================*/
h1,h2,h3,h4{ font-family:'Cormorant Garamond',serif; font-weight:400 }

h1{
    font-size: clamp(3.5rem, 8vh, 5.5rem);         /* Restored original grand scale */
    line-height:.93;
    letter-spacing:-3px;
}
h2{
    font-size: clamp(1.4rem, 4vh, 2.6rem);         /* Restored original */
    letter-spacing:-1px;
}
h3{ font-size: clamp(1.1rem, 2vh, 1.45rem) }
p{  font-size: clamp(12px, 1.8vh, 15px); line-height:1.9; color:#505050 }
span{ letter-spacing:.12em }
::selection{ background:#9A7347; color:white }


/*==================================================
  PAGE GRID — 100vh lock
==================================================*/
.page{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-rows: 56vh 39vh 5vh;
}


/*==================================================
  TOP ROW  (Hero)
==================================================*/
.top-row{
    display:grid;
    grid-template-columns: 38% 62%;       /* ORIGINAL ratio */
    min-height:0;                         /* prevent grid blowout */
    overflow:hidden;
}

/*---------- LEFT ----------*/
.hero-left{
    position:relative;
    padding: clamp(30px, 6vh, 58px) clamp(40px, 6vw, 72px); /* Restored original grand scale */
    padding-bottom:clamp(42px, 6vh, 60px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    min-height:0;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
}
.brand-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    object-fit:contain;
}
.brand-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.brand h4{
    font-family:'Inter',sans-serif;
    font-size:15px;                       /* ORIGINAL */
    line-height:1;
    letter-spacing:.18em;
}
.brand span{
    font-size:11px;                       /* ORIGINAL */
    color:#777;
    line-height:1.2;
    letter-spacing:.1em;
}

/* Hero Text */
.hero-text{
    max-width: clamp(320px, 40vw, 470px); /* Restored original */
}
.hero-text h1{ margin-top:clamp(14px, 2vh, 22px) }
.hero-text p{
    width: clamp(260px, 30vw, 320px);     /* Restored original */
    margin-top: clamp(20px, 4vh, 35px);
}
.discover{
    margin-top: clamp(25px, 5vh, 40px);
    display:flex;
    align-items:center;
    gap:24px;                             /* ORIGINAL */
    font-size:11px;                       /* ORIGINAL */
    letter-spacing:.25em;
    font-weight:600;
    transition:var(--transition);
}
.discover svg{
    stroke:#090909;
    fill:none;
    stroke-width:1.5;
    transition:var(--transition);
}
.discover:hover{ gap:36px }

/*---------- RIGHT ----------*/
.hero-right{
    position:relative;
    overflow:hidden;
    z-index:1;
    box-shadow:-22px 0 42px rgba(9,9,9,.16);
}

/* Long unbroken notes must never widen a project page beyond its reading column. */
#project-detail .project-narrative,
#project-detail .project-narrative p,
#project-detail .meta-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Final desktop override: must come after all mobile cascade rules. */
@media (hover: hover) and (pointer: fine) {
    .archive-panel-header,
    #project-detail .archive-panel-header {
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:24px !important;
    }
    .archive-panel-header > h2,
    #project-detail .archive-panel-header > h2 {
        order:initial !important;
        flex:0 1 auto !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }
    .archive-panel-header > a,
    #project-detail .archive-panel-header > a {
        order:initial !important;
        flex:0 0 auto !important;
        margin:0 0 0 auto !important;
        padding:10px 0 10px 18px !important;
        text-align:right !important;
    }
    .archive-panel-header::after,
    #project-detail .archive-panel-header::after {
        content:none !important;
        display:none !important;
    }
}

/* Final mobile menu cascade: intentionally here, after legacy menu experiments. */
@media (max-width: 768px) {
    .mobile-menu-overlay {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
        background: rgba(8, 8, 8, 0.78) !important;
        backdrop-filter: blur(18px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
        box-sizing: border-box !important;
    }
    .mobile-nav-premium {
        width: min(100%, 430px) !important;
        max-width: none !important;
        min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
        padding: 26px 26px 24px !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        background: radial-gradient(circle at 86% 9%, rgba(154, 115, 71, 0.13), transparent 27%), linear-gradient(155deg, rgba(23, 23, 22, 0.98), rgba(7, 7, 7, 0.99)) !important;
        border: 1px solid rgba(255, 255, 255, 0.075) !important;
        box-shadow: 18px 22px 48px rgba(0, 0, 0, 0.25) !important;
    }
    .mn-intro {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 42px 24px 0 !important;
        color: rgba(248, 247, 242, 0.45) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.19em !important;
    }
    .mn-intro span:last-child { color: #b98a55 !important; letter-spacing: 0.14em !important; }
    .mn-group { width: 100% !important; }
    .mn-link {
        min-height: 55px !important;
        padding: 0 !important;
        font-size: clamp(21px, 6vw, 25px) !important;
        font-weight: 400 !important;
        letter-spacing: -0.045em !important;
        border-bottom-color: rgba(255, 255, 255, 0.09) !important;
        transition: color 180ms ease, padding-left 220ms cubic-bezier(.2,.7,.2,1), border-color 180ms ease !important;
    }
    .mn-link::after {
        content: "↗" !important;
        width: 27px !important;
        height: 27px !important;
        display: grid !important;
        place-items: center !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(248, 247, 242, 0.22) !important;
        border-radius: 50% !important;
        color: #d2b087 !important;
        font-family: Arial, sans-serif !important;
        font-size: 14px !important;
        line-height: 1 !important;
        opacity: 0.72 !important;
        transform: none !important;
        transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1) !important;
    }
    .mn-link:active, .mn-link:focus-visible {
        color: #d2b087 !important;
        padding-left: 7px !important;
        border-bottom-color: rgba(185, 138, 85, 0.45) !important;
        outline: none !important;
    }
    .mn-link:active::after, .mn-link:focus-visible::after {
        background: #b98a55 !important;
        border-color: #b98a55 !important;
        color: #151515 !important;
        transform: rotate(8deg) !important;
    }
    .mn-footer {
        width: 100% !important;
        padding-top: 22px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        gap: 12px !important;
    }
    .mn-title {
        margin: 0 !important;
        font-size: 9px !important;
        letter-spacing: 0.18em !important;
        color: rgba(248, 247, 242, 0.42) !important;
    }
    .mn-socials { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    .mn-socials a {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 5px !important;
        border: 1px solid rgba(185, 138, 85, 0.3) !important;
        color: #d2b087 !important;
        font-size: 12px !important;
        letter-spacing: -0.01em !important;
        transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
    }
    .mn-socials a:active, .mn-socials a:focus-visible {
        background: #b98a55 !important;
        border-color: #b98a55 !important;
        color: #101010 !important;
        outline: none !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE NAVIGATION — a calm, compact navigation sheet rather than a list
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mobile-menu-overlay {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
        background: rgba(8, 8, 8, 0.78) !important;
        backdrop-filter: blur(18px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-premium {
        width: min(100%, 430px) !important;
        max-width: none !important;
        min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
        padding: 26px 26px 24px !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        background:
            radial-gradient(circle at 86% 9%, rgba(154, 115, 71, 0.13), transparent 27%),
            linear-gradient(155deg, rgba(23, 23, 22, 0.98), rgba(7, 7, 7, 0.99)) !important;
        border: 1px solid rgba(255, 255, 255, 0.075) !important;
        box-shadow: 18px 22px 48px rgba(0, 0, 0, 0.25) !important;
    }

    .mn-intro {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 42px 24px 0 !important;
        color: rgba(248, 247, 242, 0.45) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.19em !important;
    }

    .mn-intro span:last-child {
        color: #b98a55 !important;
        letter-spacing: 0.14em !important;
    }

    .mn-group {
        width: 100% !important;
    }

    .mn-link {
        min-height: 55px !important;
        padding: 0 !important;
        font-size: clamp(21px, 6vw, 25px) !important;
        font-weight: 400 !important;
        letter-spacing: -0.045em !important;
        border-bottom-color: rgba(255, 255, 255, 0.09) !important;
        transition: color 180ms ease, padding-left 220ms cubic-bezier(.2,.7,.2,1), border-color 180ms ease !important;
    }

    .mn-link::after {
        content: "↗" !important;
        width: 27px !important;
        height: 27px !important;
        display: grid !important;
        place-items: center !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(248, 247, 242, 0.22) !important;
        border-radius: 50% !important;
        color: #d2b087 !important;
        font-family: Arial, sans-serif !important;
        font-size: 14px !important;
        line-height: 1 !important;
        opacity: 0.72 !important;
        transform: none !important;
        transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1) !important;
    }

    .mn-link:active,
    .mn-link:focus-visible {
        color: #d2b087 !important;
        padding-left: 7px !important;
        border-bottom-color: rgba(185, 138, 85, 0.45) !important;
        outline: none !important;
    }

    .mn-link:active::after,
    .mn-link:focus-visible::after {
        background: #b98a55 !important;
        border-color: #b98a55 !important;
        color: #151515 !important;
        transform: rotate(8deg) !important;
    }

    .mn-footer {
        width: 100% !important;
        padding-top: 22px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        gap: 12px !important;
    }

    .mn-title {
        margin: 0 !important;
        font-size: 9px !important;
        letter-spacing: 0.18em !important;
        color: rgba(248, 247, 242, 0.42) !important;
    }

    .mn-socials {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .mn-socials a {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 5px !important;
        border: 1px solid rgba(185, 138, 85, 0.3) !important;
        color: #d2b087 !important;
        font-size: 12px !important;
        letter-spacing: -0.01em !important;
        transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
    }

    .mn-socials a:active,
    .mn-socials a:focus-visible {
        background: #b98a55 !important;
        border-color: #b98a55 !important;
        color: #101010 !important;
        outline: none !important;
    }
}

/* Mobile hero: content follows the mark instead of being spread across a
   desktop-height column. */
@media (max-width: 768px) {
    .hero-left {
        min-height: 0 !important;
        justify-content: flex-start !important;
        gap: 28px !important;
    }
    .hero-text {
        margin-top: 0 !important;
    }
    .hero-text h1 {
        margin-top: 0 !important;
    }
}
.hero-image{
    position:absolute;
    inset:0;
}
.hero-image img{
    width:100%; height:100%;
    object-fit:cover;
    filter: grayscale(100%);
}
.hero-watermark {
    position: absolute;
    left: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 10;
    pointer-events: none;
}
.hero-watermark .loc {
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    letter-spacing: 0.4em;
    font-weight: 300;
}
.hero-watermark .name {
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    letter-spacing: 0.4em;
    font-weight: 300;
    text-transform: uppercase;
}
.hero-image::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 20%), rgba(0,0,0,.08);
}

/* Nav */
nav{
    position:absolute;
    top:0; left:0; width:100%;
    z-index:5;
    padding: clamp(25px, 5vh, 42px) clamp(35px, 5vw, 56px) 80px; /* Scaled */
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;               /* Align top since we increased bottom padding */
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); /* Subtle shadow on all text inside nav */
}
nav ul{
    display:flex;
    gap:42px;                             /* ORIGINAL */
    margin-top: 6px;                      /* Adjust for flex-start alignment */
}
nav li{
    font-size:11px;                       /* ORIGINAL */
    letter-spacing:.20em;
    position:relative;
}
nav li::after{
    content:"";
    position:absolute;
    bottom:-10px; left:0;
    width:0; height:1px;
    background:white;
    transition:.4s;
}
nav li:hover::after,
nav .active::after{ width:100% }
nav a{ color:white }

.nav-right{
    display:flex;
    align-items:center;
    gap:36px;                             /* ORIGINAL */
}
.language{
    display:flex;
    gap:8px;                              /* ORIGINAL */
    font-size:11px;
    color:white;
}
.menu-button{
    width:38px; height:38px;              /* ORIGINAL */
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
}
.menu-button span{
    width:100%; height:1px;
    background:white;
}

/* Scroll */
.scroll{
    position:absolute;
    right:60px; bottom:60px;              /* ORIGINAL */
    color:white;
    z-index:2;
    display:flex;
    align-items:center;
    gap:20px;
    font-size:10px;
    letter-spacing:.25em;
}
.scroll-line{
    width:70px; height:1px;               /* ORIGINAL */
    background:white;
}


/*==================================================
  BOTTOM ROW  (Projects + About)
==================================================*/
.bottom-row{
    display:grid;
    grid-template-columns: 75% 25%;
    overflow:hidden;
}

/*---------- Projects ----------*/
.projects{
    background:#090909;
    color:#F8F7F2;
    padding: clamp(20px, 3.5vh, 28px) clamp(40px, 6vw, 72px) clamp(10px, 2vh, 20px); /* Restored original */
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.projects-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom: clamp(10px, 2vh, 18px); /* Restored original */
}
.section-title{
    display:flex;
    align-items:flex-end;
    gap:28px;                              /* ORIGINAL */
}
.section-title h2{
    color:white;
    font-size: clamp(20px, 3.5vh, 28px);   /* Scaled */
    letter-spacing:-1px;
}
.all-projects{
    font-size:11px;                        /* ORIGINAL */
    letter-spacing:.25em;
    color:#C9A97A;
    transition:.35s;
}
.all-projects:hover{ opacity:.6 }

/* Grid */
.project-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);   /* ORIGINAL 3 columns */
    gap: clamp(15px, 3vw, 30px);           /* Scaled */
    min-height:0;
}
.project-card{
    cursor:pointer;
    display:flex;
    flex-direction:column;
    min-height:0;
}
.project-image{
    position:relative;
    flex:1;
    min-height:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(154,115,71,.06), transparent 42%),
        #1b1b1b;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -24px 42px rgba(0,0,0,.14);
}
.project-info {
    margin-top: 12px;
}
.project-image img{
    width:100%; height:100%;
    transition:1s;                         /* ORIGINAL */
    filter: grayscale(100%) contrast(1.05);
}
.project-image img.cs-logo{
    width:100px;
    height:100px;
}
.project-card:hover img{
    transform:scale(1.08);                 /* ORIGINAL */
}

/* Coming Soon Box */
.coming-soon-box {
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #111;
    border: 1px solid #1a1a1a;
}
.cs-logo {
    position:absolute;
    top:50%; left:50%;
    width:100px;
    height:100px;
    object-fit:contain;
    margin:0;
    opacity:.34;
    transform:translate(-50%,-50%) scale(1);
    transition:transform .5s ease,opacity .5s ease;
}
.project-card:hover .cs-logo {
    transform:translate(-50%,-50%) scale(1.05);
    opacity:.82;
}
.project-card:hover img.cs-logo{
    transform:translate(-50%,-50%) scale(1.05);
}
.cs-text {
    position:absolute;
    top:calc(50% + 58px);
    left:0; right:0;
    text-align:center;
    white-space:nowrap;
    transform:translateX(4px);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: .34em;
    color: #555;
    text-transform: uppercase;
    transition: 0.5s;
}
.project-card:hover .cs-text {
    color: var(--gold);
    letter-spacing: .5em;
}
.project-info{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:18px;
}
.project-info > div{
    min-width:0;
    flex:1 1 auto;
}
.project-info h3{
    font-family:'Inter',sans-serif;
    color:white;
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    margin-bottom:4px;
}
.project-info p{
    color:#8c8c8c;                         /* ORIGINAL */
    font-size:11px;
}
.project-info span{
    color:var(--gold);
    font-size:18px;
    transition:.4s;
}
.project-card:hover span{
    transform:translateX(10px);            /* ORIGINAL */
}
.project-card[data-id] .project-info > span.project-card-arrow{
    display:none;
}
.project-card[data-id] .project-image:not(.coming-soon-box)::before{
    display:none;
}
.project-card[data-id] .project-image:not(.coming-soon-box)::after,
.project-card[data-id] .project-image:not(.coming-soon-box)::before{
    display:none;
}
.project-image-cta{
    position:absolute;
    left:14px;
    bottom:14px;
    z-index:2;
    padding:5px 8px 4px;
    color:rgba(248,247,242,.82);
    background:rgba(40,36,30,.62);
    border:1px solid rgba(201,169,122,.24);
    border-radius:999px;
    box-shadow:0 7px 16px rgba(0,0,0,.14);
    font-family:'Inter',sans-serif;
    font-size:8px;
    font-weight:500;
    letter-spacing:.13em;
    white-space:nowrap;
    opacity:0;
    transform:translateY(7px);
    will-change:opacity, transform;
    pointer-events:none;
    transition:color .35s ease, opacity .55s ease, transform .68s cubic-bezier(.16,1,.3,1);
}
.project-image-cta svg{
    width:12px;
    height:12px;
    margin-left:4px;
    vertical-align:-2px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.project-card[data-id]:hover .project-image-cta{
    color:#d4b183;
    opacity:1;
    transform:translateY(0);
}
@media (hover:none){
    .project-image-cta{ opacity:1; transform:none; }
}
.project-preview-desc{
    display:-webkit-box;
    overflow:hidden;
    max-width:100%;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; line-clamp:2;
    line-height:1.45;
}

/*---------- About Panel ----------*/
.about-panel{
    background:var(--bg);
    border-left:1px solid var(--line);
    padding: clamp(15px, 3vh, 30px) clamp(20px, 3vw, 40px); /* Scaled */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.about-photo{
    width: clamp(65px, 11vh, 95px); 
    height: clamp(65px, 11vh, 95px);
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--line);
    margin-bottom: clamp(12px, 2.5vh, 20px);
}
.about-photo img{
    width:100%; height:100%;
    object-fit:cover;
}
.about-info h3{
    font-family:'Inter',sans-serif;
    font-size:14px;
    letter-spacing:.2em;
    font-weight:600;
    margin-bottom:8px;
    color:#111;
}
.about-info p{
    font-size:12px;
    color:#777;
    margin-bottom:5px;
}
.about-info span{
    font-size:10px;
    color:var(--gold);
    letter-spacing:.15em;
}


/*==================================================
  FOOTER  (Original styling, compact height)
==================================================*/
footer{
    background:#F6F4EF;
    padding: 0 72px;                       /* Horizontal ORIGINAL, vertical auto */
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    height:5vh;
}
.footer-left{
    display:flex;
    align-items:center;
    gap:22px;                              /* ORIGINAL */
}
.footer-left .sep{
    width:1px; height:18px;               /* ORIGINAL */
    background:#D8D4CB;
}
.footer-logo{
    display:flex;
    align-items:center;
    font-family:'Cormorant Garamond',serif;
    color:#090909;
    font-size:32px;
    line-height:1;
    margin-right:15px;
}
.footer-logo img{
    display:block;
    width:27px;
    height:27px;
    object-fit:contain;
}
.footer-logo .b {
    position:relative;
}
.footer-logo .e {
    position:relative;
    left:-5px;
    top:-6px;
    font-size: 30px;
}
.footer-left p,
.footer-left a{
    font-size:13px;                        /* ORIGINAL */
    color:#5a5a5a;
}
.dot{ font-size:10px; color:#ccc }

.footer-right{
    display:flex;
    gap:34px;                              /* ORIGINAL */
    align-items:center;
}
.footer-right a{
    font-size:12px;                        /* ORIGINAL */
    letter-spacing:.18em;
    transition:.35s;
    color:#444;
    display:flex;
    align-items:center;
}
.footer-right a:hover{ color:var(--gold) }


/*==================================================
  SMOOTH EFFECTS  (Original)
==================================================*/
.project-card,
footer a,
nav a,
.discover{
    transition:all .35s ease;
}


/*==================================================
  MOTION LAYER — BIG-inspired, V1 composition preserved
==================================================*/
@property --hero-pointer-x{
    syntax:"<length>";
    inherits:false;
    initial-value:0px;
}
@property --hero-pointer-y{
    syntax:"<length>";
    inherits:false;
    initial-value:0px;
}
@property --hero-hover{
    syntax:"<number>";
    inherits:false;
    initial-value:0;
}
html{
    background:var(--black);
    scroll-behavior:auto;
}
body{
    overflow-x:hidden;
    overflow-y:auto;
}
body::before{
    content:"";
    position:fixed;
    z-index:100;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:var(--gold);
    transform:scaleX(var(--page-progress, 0));
    transform-origin:left center;
    will-change:transform;
    pointer-events:none;
}
.page{
    height:100vh;
    min-height:0;
    grid-template-rows:56vh 39vh 5vh;
}
.top-row,
.bottom-row{
    isolation:isolate;
}
.brand,
.about-info{
    will-change:transform;
}
.brand{
    transform:translate3d(0, var(--brand-y, 0), 0);
}
.hero-text{
    margin-top:var(--copy-y, 0);
}
.hero-image img{
    --hero-hover:0;
    width:calc(100% + 28px);
    height:calc(100% + 128px);
    margin:-64px -14px;
    transform:translate3d(var(--hero-pointer-x, 0px), calc(var(--hero-y, 0px) + var(--hero-pointer-y, 0px)), 0) scale(calc(var(--hero-scale, 1.025) + var(--hero-hover)));
    transition:filter .55s ease, --hero-pointer-x .9s cubic-bezier(.16,1,.3,1), --hero-pointer-y .9s cubic-bezier(.16,1,.3,1), --hero-hover .9s cubic-bezier(.16,1,.3,1);
    will-change:transform;
}
.hero-right:hover .hero-image img{
    --hero-hover:.012;
    filter:grayscale(88%) contrast(1.02);
}
.hero-watermark{
    transform:translate3d(0, var(--watermark-y, 0), 0);
    will-change:transform;
}
nav{
    transition:background .45s ease, padding .55s cubic-bezier(.2,.7,.2,1);
}
.has-scrolled nav{
    background:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0) 100%);
}
.projects{
    position:relative;
}
.project-card{
    --mx:50%;
    --my:50%;
    position:relative;
    transition:opacity .55s ease, transform .65s var(--transition);
    will-change:transform;
}
.project-card:hover{
    transform:translateY(-4px);
}
.coming-soon-box{
    position:relative;
    transform:translate3d(0, var(--project-media-y, 0), 0) scale(1.015);
    will-change:transform;
}
.coming-soon-box::after{
    content:"";
    position:absolute;
    inset:-1px;
    background:radial-gradient(circle at var(--mx) var(--my), rgba(154,115,71,.18), transparent 34%);
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
}
.project-card:hover .coming-soon-box::after{
    opacity:1;
}
.about-panel{
    transform:translate3d(0, var(--about-y, 0), 0);
    will-change:transform;
}
.about-photo{
    box-shadow:0 18px 38px rgba(9,9,9,.1);
    transition:transform .65s var(--transition), box-shadow .45s ease;
}
.about-photo img{
    filter:grayscale(.28);
    transition:filter .5s ease, transform .75s var(--transition);
}
.about-panel:hover .about-photo{
    transform:translateY(-5px);
    box-shadow:0 24px 48px rgba(9,9,9,.15);
}
.about-panel:hover .about-photo img{
    filter:grayscale(0);
    transform:scale(1.035);
}
.motion-ready .projects:not(.is-visible) .projects-header{
    opacity:0;
    transform:translateY(20px);
}
.motion-ready .projects-header{
    transition:opacity .55s ease, transform .65s var(--transition);
}
.motion-ready .projects:not(.is-visible) .project-card{
    opacity:0;
    transform:translateY(34px) scale(.988);
}
.motion-ready .projects.is-visible .project-card:nth-child(2){ transition-delay:.07s }
.motion-ready .projects.is-visible .project-card:nth-child(3){ transition-delay:.14s }
footer{
    height:5vh;
}
.footer-right a:active,
.discover:active,
.all-projects:active{
    transform:scale(.94);
}

/*==================================================
  EDITORIAL ATMOSPHERE — quiet material depth
==================================================*/
.page{
    position:relative;
    isolation:isolate;
}
.hero-left{
    background:
        radial-gradient(ellipse at 8% 4%, rgba(255,255,255,.82), transparent 38%),
        radial-gradient(ellipse at 92% 92%, rgba(154,115,71,.065), transparent 42%),
        var(--bg);
}
.about-panel{
    background:
        radial-gradient(circle at 50% 42%, rgba(154,115,71,.075), transparent 44%),
        var(--bg);
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.about-panel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    /* The source drawing has a black canvas. Screen blending makes that
       canvas disappear over the cream panel while keeping the gold lines. */
    background-image:url("assets/meu-architecture-silhouette.png");
    background-repeat:no-repeat;
    background-size:172% auto;
    background-position:44% 10%;
    opacity: 0.35; filter: invert(1) hue-rotate(180deg) brightness(0.6) contrast(1.5);
    mix-blend-mode:multiply;
}
.about-panel::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 55%, transparent 0%, rgba(246,244,239,.25) 58%, transparent 86%);
}
.about-panel > *{
    position:relative;
    z-index:1;
}
.projects{
    background:
        radial-gradient(ellipse at 68% -16%, rgba(154,115,71,.075), transparent 42%),
        linear-gradient(180deg, #080808 0%, #0a0908 100%);
}
.hero-image::after{
    background:
        linear-gradient(to right, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 24%),
        radial-gradient(circle at 88% 12%, rgba(154,115,71,.12), transparent 34%),
        linear-gradient(to top, rgba(0,0,0,.28), transparent 38%),
        linear-gradient(to left, rgba(0,0,0,.12), transparent 28%),
        rgba(0,0,0,.055);
    transition:opacity .7s ease;
}
.hero-right:hover .hero-image::after{
    opacity:.88;
}

/*==================================================
  SECOND VIEW — content hub
==================================================*/
.v1-hub{
    min-height:88svh;
    padding:clamp(58px, 7vw, 110px) clamp(40px, 6vw, 92px) clamp(70px, 8vw, 120px);
    display:grid;
    grid-template-rows:auto 1fr;
    gap:clamp(36px, 5vw, 72px);
    background:
        radial-gradient(circle at 82% 18%, rgba(154,115,71,.12), transparent 25%),
        var(--black);
    color:var(--white);
    scroll-margin-top:1px;
    overflow:hidden;
}
.v1-hub-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:32px;
}
.v1-hub-header h2{
    color:var(--white);
    font-size:clamp(48px, 6vw, 92px);
    line-height:.82;
    letter-spacing:-.045em;
}
.v1-hub-header p{
    max-width:320px;
    color:#96938b;
    font-size:11px;
    line-height:1.65;
    text-align:right;
}
.archive-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(14px, 2vw, 28px);
    align-self:end;
}
.archive-card{
    --archive-x:0px;
    --archive-pointer-y:0px;
    --spot-x:50%;
    --spot-y:50%;
    position:relative;
    display:grid;
    grid-template-rows:minmax(230px, 36vh) auto;
    border:1px solid rgba(248,247,242,.16);
    background:#111;
    box-shadow:0 24px 54px rgba(0,0,0,.2);
    overflow:hidden;
    transition:opacity .55s ease, transform .28s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease;
}
.archive-media{
    position:relative;
    z-index:2;
    min-height:0;
    overflow:hidden;
    background:#20201e;
}
.archive-card:hover .archive-media::after{
    opacity:.52;
    transform:translateX(58%);
}
.archive-media img{
    --archive-scale:1.07;
    width:calc(100% + 32px);
    height:calc(100% + 54px);
    margin:-27px -16px;
    object-fit:cover;
    object-position:center 56%;
    filter:grayscale(1) contrast(1.04);
    transform:translate3d(var(--archive-x), calc(var(--archive-y, 0px) + var(--archive-pointer-y)), 0) scale(var(--archive-scale));
    transition:filter .45s ease, transform .55s var(--transition);
    will-change:transform;
}
.archive-portrait img{
    object-position:center 32%;
}
.archive-paper{
    display:grid;
    place-items:center;
    padding:28px;
    background:#d8d2c6;
    color:#5c574e;
}
.archive-project-placeholder{
    display:grid;
    place-items:center;
    padding:28px;
    background:#111;
    color:#706b62;
}
.archive-project-placeholder em{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(22px, 2vw, 34px);
    font-style:normal;
    text-align:center;
}
.archive-paper em{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(23px, 2.2vw, 38px);
    font-style:normal;
    text-align:center;
}
.archive-label{
    position:relative;
    z-index:2;
    padding:19px 21px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid rgba(248,247,242,.16);
}
.archive-label strong{
    font-size:10px;
    letter-spacing:.17em;
    text-transform:uppercase;
}
.archive-label > span{
    color:var(--gold);
    font-size:18px;
    transition:transform .35s var(--transition);
}
.archive-card:hover{
    border-color:rgba(154,115,71,.68);
    box-shadow:0 32px 70px rgba(0,0,0,.3);
    transform:translateY(-5px);
}
.archive-card:hover .archive-media img{
    --archive-scale:1.1;
    filter:grayscale(.82) contrast(1.03);
}
.archive-card:hover .archive-label > span{
    transform:translate(4px,-4px);
}
.motion-ready .v1-hub:not(.is-visible) .v1-hub-header{
    opacity:0;
    transform:translateY(24px);
}
.motion-ready .v1-hub-header{
    transition:opacity .6s ease, transform .72s var(--transition);
}
.motion-ready .v1-hub:not(.is-visible) .archive-card{
    opacity:0;
    transform:translateY(38px) scale(.986);
}
.motion-ready .v1-hub.is-visible .archive-card:nth-child(2){ transition-delay:.07s }
.motion-ready .v1-hub.is-visible .archive-card:nth-child(3){ transition-delay:.14s }
.motion-ready .v1-hub.is-visible .archive-card:nth-child(2),
.motion-ready .v1-hub.is-visible .archive-card:nth-child(3){
    transition-delay:0s;
}
.archive-card:hover{
    transition-delay:0s;
    transition-duration:.28s;
    transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
.archive-card:hover .archive-media img{
    transition-delay:0s;
    transition-duration:.38s;
    --archive-scale:1.07;
    filter:grayscale(1) contrast(1.04);
}

/* Full-screen archive pages */
.archive-panel{
    position:fixed;
    z-index:120;
    inset:0;
    padding:clamp(34px, 5vw, 78px);
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    background:var(--bg);
    color:var(--black);
    visibility:hidden;
    pointer-events:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .65s cubic-bezier(.2,.76,.22,1), visibility .65s;
    overflow:hidden;
}
.archive-panel:target{
    visibility:visible;
    pointer-events:auto;
    clip-path:inset(0);
}
.archive-panel.is-open{
    visibility:visible;
    pointer-events:auto;
    clip-path:inset(0);
}
body.archive-open{
    overflow:hidden;
}
.archive-panel-header{
    padding-bottom:clamp(24px, 4vh, 48px);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
}
.archive-panel-header h2{
    font-size:clamp(48px, 7vw, 110px);
    line-height:.72;
    letter-spacing:-.055em;
}
.archive-panel-header a{
    display:flex;
    align-items:center;
    gap:16px;
    font-size:9px;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.archive-panel-header a span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    font-size:20px;
    transition:background .3s ease, color .3s ease, transform .3s ease;
}
.archive-panel-header a:hover span{
    background:var(--black);
    color:var(--gold);
    transform:rotate(90deg);
}
.archive-placeholder{
    display:grid;
    place-content:center;
    text-align:center;
}
.archive-placeholder p{
    color:var(--black);
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(36px, 5vw, 76px);
    line-height:1;
}
.hakkimda{
    background:
        radial-gradient(circle at 20% 48%, rgba(155,116,72,.08), transparent 32%),
        linear-gradient(90deg, #f2eee7 0%, #eee9df 46%, #f4f1eb 100%);
}
#yazilarim{
    background:#eee9df;
    background-image:none;
}
.hakkimda .archive-panel-header,
#yazilarim .archive-panel-header{
    border-color:#d8d0c4;
}
.hakkimda-layout{
    min-height:0;
    padding:clamp(28px, 4vh, 56px) 8px 0 0;
    display:grid;
    grid-template-columns:minmax(280px, .72fr) minmax(0, 1.55fr);
    gap:clamp(34px, 6vw, 110px);
    align-items:stretch;
    overflow:hidden;
    overscroll-behavior:contain;
    scrollbar-width:none;
}
.hakkimda-layout::-webkit-scrollbar{ display:none }
.about-profile-card{
    position:relative;
    isolation:isolate;
    top:auto;
    height:100%;
    min-height:0;
    padding:clamp(26px, 3vw, 48px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid rgba(255,255,255,.1);
    background:
        radial-gradient(circle at 50% 34%, rgba(181,140,88,.2), transparent 38%),
        radial-gradient(circle at 50% 86%, rgba(238,233,223,.055), transparent 40%),
        linear-gradient(145deg, #23211d 0%, #181713 58%, #11100e 100%);
    box-shadow:
        0 40px 110px rgba(41,35,26,.16),
        0 18px 58px rgba(238,233,223,.3),
        0 0 0 1px rgba(20,18,14,.04);
    overflow:hidden;
}
.about-profile-card::before{
    content:"";
    position:absolute;
    inset:-28px;
    z-index:0;
    border:0;
    background:
        radial-gradient(circle at 50% 42%, rgba(188,149,96,.16), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(242,238,231,.14), transparent 56%);
    filter:blur(18px);
    opacity:.72;
    pointer-events:none;
}
.about-profile-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 36%),
        radial-gradient(circle at 50% 45%, rgba(151,111,65,.11), transparent 35%);
    opacity:.78;
    pointer-events:none;
}
.about-profile-card > *{
    position:relative;
    z-index:1;
}
.about-profile-mark{
    position:absolute;
    top:20px;
    left:20px;
    width:34px;
    height:34px;
    object-fit:contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.about-profile-portrait{
    width:clamp(112px, 11vw, 170px);
    aspect-ratio:1;
    margin-bottom:clamp(20px, 3vh, 32px);
    border-radius:50%;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 24px 54px rgba(0,0,0,.38);
}
.about-profile-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1) contrast(1.03);
}
.about-profile-identity h3{
    margin-bottom:8px;
    color:#f2efe8;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.about-profile-identity p{
    margin-bottom:5px;
    color:#aaa59b;
    font-size:11px;
    line-height:1.5;
}
.about-profile-identity > span{
    color:var(--gold);
    font-size:9px;
    letter-spacing:.16em;
}
.about-story{
    min-width:0;
    min-height:0;
    height:100%;
    padding:0 clamp(30px, 4vw, 58px) 52px 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    background:radial-gradient(ellipse at 76% 8%, rgba(154,115,71,.045), transparent 32%);
}
.about-story::-webkit-scrollbar{ display:none }
.about-story > h3{
    max-width:780px;
    color:var(--black);
    font-size:clamp(38px, 4vw, 66px);
    line-height:.98;
    letter-spacing:-.04em;
}
.about-story-copy{
    max-width:860px;
    margin-top:clamp(16px, 3vh, 32px);
    display:flex;
    flex-direction:column;
}
.about-story-copy p{
    padding:20px 0;
    color:#555149;
    font-size:clamp(13px, .9vw, 15px);
    line-height:1.9;
}
.about-story-copy .about-story-quote{
    margin:8px 0;
    padding:24px 0 24px 24px;
    border-top:0;
    border-left:2px solid var(--gold);
    color:#26231e;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(20px, 1.65vw, 27px);
    line-height:1.45;
}
.about-story-copy .about-story-closing{
    color:#777169;
    font-size:12px;
}
.about-contact-bars{
    position:static;
    width:100%;
    max-width:320px;
    margin-top:clamp(24px, 4vh, 38px);
    display:grid;
    grid-template-columns:1fr;
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
}
.about-contact-bars a{
    min-width:0;
    padding:13px 14px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#d7d2c9;
    transition:border-color .3s ease, color .3s ease, transform .3s ease, background .3s ease;
}
.about-contact-bars a:last-child{ border-right:0; border-bottom:0 }
.about-contact-bars i{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    color:var(--gold);
    font-style:normal;
}
.about-contact-bars i svg{ width:16px; height:16px }
.about-contact-bars a > span{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    letter-spacing:normal;
}
.about-contact-bars small{
    color:#8f8a81;
    font-size:8px;
    font-weight:400;
    letter-spacing:.04em;
    text-transform:none;
}
.about-contact-bars strong{
    overflow:hidden;
    color:#ded9d0;
    font-size:10px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.about-contact-bars em{
    color:var(--gold);
    font-size:13px;
    font-style:normal;
    transition:transform .3s ease;
}
.about-contact-bars a:hover{
    background:rgba(255,255,255,.045);
    color:var(--gold);
    transform:translateX(3px);
}
.about-contact-bars a:hover em{ transform:translate(2px,-2px) }
.hakkimda .about-profile-card,
.hakkimda .about-story{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .55s ease, transform .72s cubic-bezier(.2,.76,.22,1);
}
.hakkimda .about-story{ transition-delay:.08s }
.hakkimda:target .about-profile-card,
.hakkimda:target .about-story,
.hakkimda.is-open .about-profile-card,
.hakkimda.is-open .about-story{
    opacity:1;
    transform:translateY(0);
}
.archive-photo-scroll-area{
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    overscroll-behavior:contain;
}
.archive-photo-scroll-area::-webkit-scrollbar{ display:none }
.archive-photo-layout{
    height:max-content;
    padding:clamp(22px, 3vh, 38px) 34px 8px 34px;
    display:block;
    column-width:260px;
    column-gap:24px;
    max-width:1440px;
    margin:0 auto;
}
.archive-photo-layout figure{
    display:inline-block;
    width:100%;
    cursor:zoom-in;
    margin-bottom:clamp(18px, 2.2vw, 34px);
}
.archive-photo-layout img{
    width:100%;
    height:auto;
    display:block;
    border-radius:2px;
    margin-bottom:12px;
    background:transparent;
    filter:grayscale(1) blur(3px);
    transition:filter .8s cubic-bezier(.2,.75,.2,1), transform .8s cubic-bezier(.2,.75,.2,1);
}
.archive-panel:target .archive-photo-layout img,
.archive-panel.is-open .archive-photo-layout img{ filter:grayscale(1) blur(0) }
.archive-panel:has(.archive-photo-layout){ position:fixed }
.archive-panel:has(.archive-photo-layout) .gallery-progress{
    position:absolute;
    top:50%;
    right:clamp(14px, 2vw, 34px);
    width:18px;
    height:min(34vh, 280px);
    display:none;
    grid-template-rows:auto 1fr auto;
    justify-items:center;
    gap:10px;
    color:#817d74;
    font-size:7px;
    letter-spacing:.08em;
    transform:translateY(-32%);
}
.archive-panel:has(.archive-photo-layout) .gallery-progress.is-needed{ display:grid }
.gallery-progress-track{
    position:relative;
    width:2px;
    height:100%;
    overflow:hidden;
    border-radius:99px;
    background:repeating-linear-gradient(to bottom, rgba(15,15,13,.18) 0 2px, transparent 2px 7px);
}
.gallery-progress-track i{
    --gallery-progress:0;
    position:absolute;
    left:50%;
    top:calc(var(--gallery-progress) * (100% - 34px));
    width:6px;
    height:34px;
    border-radius:99px;
    background:var(--gold);
    box-shadow:0 3px 14px rgba(155,105,35,.35);
    transform:translateX(-50%);
    transition:top .12s ease-out;
}
.archive-photo-layout[data-count="1"] img{
    width:100%;
    height:auto;
    max-height:min(62vh, 660px);
    aspect-ratio:auto;
}
.archive-photo-layout figure:first-child img{ object-position:center 56% }
.archive-photo-layout figure:last-child img{ object-position:center 30% }
.archive-photo-layout figcaption{
    padding-top:9px;
    border-top:1px solid rgba(15,15,13,.16);
    color:#66645e;
    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    gap:18px;
}
.latest-entry{
    position:absolute;
    right:clamp(28px, 4vw, 48px);
    bottom:clamp(20px, 4vh, 40px);
    width:min(280px, calc(100% - 56px));
    margin-top:0;
    padding:10px 0 8px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    border-top:1px solid rgba(15,15,13,.22);
    color:#5f5c55;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
    transform:none;
    transition:border-color .3s ease,color .3s ease;
}
.latest-entry span{ color:var(--gold); font-weight:600 }
.latest-entry strong{ color:var(--black); font-weight:500; letter-spacing:.06em }
.latest-entry em{ font-style:normal; font-size:14px; transition:transform .3s ease }
.latest-entry:hover{ border-color:var(--gold); color:var(--gold) }
.latest-entry:hover em{ transform:translate(3px,-3px) }
.entry-mark{
    position:fixed;
    z-index:400;
    inset:0;
    display:grid;
    place-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(154,115,71,.1), transparent 28%),
        #0b0b0a;
    opacity:1;
    transition:opacity .6s cubic-bezier(.22,.72,.22,1),visibility .6s ease;
}
.entry-mark img{
    display:block;
    width:clamp(88px,10vw,142px);
    height:auto;
    opacity:.94;
    transform:translateY(-2%);
}
.entry-mark.is-leaving{ opacity:0; visibility:hidden }
.photo-lightbox{position:fixed;z-index:300;inset:0;padding:clamp(28px,5vw,76px);display:grid;place-items:center;background:rgba(8,8,7,.86);backdrop-filter:blur(14px) saturate(.65);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,visibility .42s}
.photo-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.photo-lightbox-stage{width:min(84vw,1360px);height:min(78vh,850px);display:grid;grid-template-rows:minmax(0,1fr) auto;gap:18px;touch-action:none}
.photo-lightbox-stage img{width:100%;height:100%;object-fit:contain;filter:none;user-select:none}
.photo-lightbox-caption{display:flex;justify-content:space-between;gap:24px;color:#f1eee7;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.photo-lightbox-caption span{color:#a8a39a}
.photo-lightbox-close{position:absolute;top:clamp(22px,3vw,46px);right:clamp(22px,3vw,46px);display:flex;align-items:center;gap:14px;color:#f4f1e9;font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.photo-lightbox-close span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);font-size:20px;transition:transform .3s ease,background .3s ease}
.photo-lightbox-close:hover span{transform:rotate(90deg);background:var(--gold);color:#111}
.photo-lightbox-position{position:absolute;left:clamp(22px,3vw,46px);top:50%;height:min(34vh,280px);display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:10px;color:#aaa49b;font-size:7px;transform:translateY(-50%)}
.photo-lightbox-position i{--lightbox-progress:0;position:relative;width:2px;height:100%;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.25) 0 2px,transparent 2px 7px)}
.photo-lightbox-position i::after{content:"";position:absolute;left:50%;top:calc(var(--lightbox-progress) * (100% - 34px));width:6px;height:34px;border-radius:99px;background:var(--gold);transform:translateX(-50%);transition:top .35s cubic-bezier(.2,.75,.2,1)}
body.lightbox-open{overflow:hidden}
.sample-article{
    width:min(100%, 1180px);
    margin:0 auto;
    padding:clamp(28px, 4vh, 56px) 8px clamp(70px, 10vh, 130px) 0;
    display:grid;
    grid-template-columns:minmax(280px, .72fr) minmax(0, 1.55fr);
    gap:clamp(34px, 6vw, 110px);
    align-items:stretch;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    background:transparent;
}

/* Writing archive: editorial feature followed by quiet, clickable story cards. */
.writing-related{grid-column:1/-1;margin-top:clamp(28px,5vh,64px);padding-top:24px;border-top:1px solid rgba(15,15,13,.16)}
.writing-related-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#77736b;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.writing-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.writing-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:170px;padding:20px 38px 18px 20px;border:1px solid rgba(15,15,13,.14);background:rgba(255,255,255,.28);color:var(--black);text-align:left;cursor:pointer;transition:background .22s ease,border-color .22s ease,transform .22s ease}
.writing-card:hover,.writing-card:focus-visible{background:rgba(255,255,255,.7);border-color:var(--gold);transform:translateY(-3px);outline:none}
.writing-card-kicker{margin-bottom:14px;color:var(--gold);font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.writing-card strong{font:500 clamp(19px,2vw,27px)/1.05 'Cormorant Garamond',Georgia,serif}
.writing-card-summary{display:-webkit-box;margin-top:10px;overflow:hidden;color:#6a675f;font-size:11px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2; line-clamp:2;}
.writing-card-date{margin-top:auto;padding-top:16px;color:#89857d;font-size:9px;letter-spacing:.08em}
.writing-card-arrow{position:absolute;right:18px;bottom:17px;color:var(--gold);font-size:18px;line-height:1;transition:transform .22s ease}
.writing-card:hover .writing-card-arrow,.writing-card:focus-visible .writing-card-arrow{transform:translate(3px,-3px)}
.article-date{margin-top:10px;color:#8b857b;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.article-meta-list{width:100%;margin-top:34px}.article-meta-item{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;padding:10px 0;border-top:1px solid rgba(15,15,13,.14)}.article-meta-item span{color:#8a847a;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.article-meta-item strong{color:#4f4b45;font-size:10px;font-weight:500;line-height:1.35}
.writing-related{grid-column:1;grid-row:2;margin-top:0;padding-top:28px;padding-right:18px;border-top:1px solid rgba(15,15,13,.16)}
.writing-card-grid{grid-template-columns:1fr;gap:10px}
.writing-card{min-height:125px;padding:15px 30px 14px 16px;background:rgba(255,255,255,.2)}
.writing-card strong{font-size:22px}
@media (max-width:760px){.writing-related{grid-column:1/-1;grid-row:auto;padding-right:0}.writing-card-grid{grid-template-columns:1fr}}
@media (max-width:760px){.writing-card-grid{grid-template-columns:1fr}.writing-card{min-height:145px}}
.sample-article::-webkit-scrollbar{ display:none }
#yazilarim .sample-article{ padding-right:clamp(28px, 4vw, 58px) }
.archive-panel .reading-progress{
    position:absolute;
    top:50%;
    right:clamp(14px, 2vw, 34px);
    width:20px;
    height:min(38vh, 310px);
    display:none;
    grid-template-rows:auto 1fr auto;
    justify-items:center;
    gap:10px;
    color:#817d74;
    font-size:7px;
    letter-spacing:.08em;
    transform:translateY(-23%);
}
.archive-panel .reading-progress.is-needed{ display:grid }
.archive-panel .reading-progress-track{
    position:relative;
    width:2px;
    height:100%;
    overflow:hidden;
    border-radius:99px;
    background:repeating-linear-gradient(to bottom, rgba(15,15,13,.18) 0 2px, transparent 2px 7px);
}
.archive-panel .reading-progress-track i{
    --reading-progress:0;
    position:absolute;
    left:50%;
    top:calc(var(--reading-progress) * (100% - 38px));
    width:6px;
    height:38px;
    border-radius:99px;
    background:var(--gold);
    box-shadow:0 3px 14px rgba(155,105,35,.35);
    transform:translateX(-50%);
    transition:top .12s ease-out;
}
.article-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.article-sidebar .article-kicker{
    display:block;
    color:var(--gold);
    font-size:9px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.article-signature{
    margin-top:auto;
    padding-top:24px;
    width:100%;
    border-top:1px solid var(--line);
    color:var(--gold);
    font-size:10px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.article-content {
    display:flex;
    flex-direction:column;
    padding-bottom:48px;
    padding-top:4px;
}
#yazilarim .article-kicker{display:none}
.article-sidebar,#yazilarim .article-content{background:transparent}
.article-sidebar .writing-related{width:100%;grid-column:auto;grid-row:auto;margin-top:30px;padding:24px 0 0;border-top:1px solid rgba(15,15,13,.16)}
.article-sidebar .writing-related-head{font-size:8px}
.article-title {
    max-width:780px;
    margin:0 0 16px;
    color:var(--black);
    font-size:clamp(38px, 4.5vw, 66px);
    line-height:.98;
    letter-spacing:-.04em;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:500;
}
.article-summary {
    max-width:860px;
    color:#6e6a62;
    font-size:13px;
    line-height:1.7;
    margin-bottom:32px;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.article-body{
    max-width:860px;
    display:flex;
    flex-direction:column;
}
.article-body p{
    padding:20px 0;
    margin:0;
    color:#555149;
    font-family:'Inter',sans-serif;
    font-size:clamp(13px, .9vw, 15px);
    line-height:1.9;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.article-body span, .about-story-copy span, .rich-editor span, .about-preview-body span {
    letter-spacing: normal;
}
.article-body strong, .article-body b { font-weight:bold; }
.article-body em, .article-body i { font-style:italic; }
.article-body h2 {
    margin: 28px 0 11px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 2.5vw, 29px);
    font-weight: 500;
}
.article-body blockquote {
    margin: 26px 0;
    padding-left: 16px;
    border-left: 1px solid var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(19px, 1.8vw, 21px);
    line-height: 1.45;
    color: #5a5147;
}
.article-body ul, .article-body ol {
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-size:clamp(13px, .9vw, 15px);
    line-height:1.9;
    color:#555149;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li {
    padding-bottom: 8px;
}
.article-body a { text-decoration: underline; color: var(--gold); }

@media (max-width:900px){
    .page{
        height:auto;
        min-height:100svh;
        grid-template-rows:auto auto auto;
    }
    .top-row{
        grid-template-columns:1fr;
    }
    .hero-left{
        min-height:66svh;
    }
    .hero-right{
        min-height:62svh;
    }
    .bottom-row{
        grid-template-columns:1fr;
    }
    .projects{
        min-height:620px;
    }
    .about-panel{
        min-height:290px;
        border-left:0;
        border-top:1px solid var(--line);
    }
    footer{
        min-height:76px;
        height:auto;
        padding:18px 28px;
    }
    .footer-left p,
    .footer-left .dot{
        display:none;
    }
    .v1-hub{
        min-height:auto;
        padding:64px 24px 78px;
    }
    .v1-hub-header{
        align-items:flex-start;
        flex-direction:column;
    }
    .v1-hub-header p{
        text-align:left;
    }
    .archive-grid{
        grid-template-columns:1fr;
    }
    .archive-card{
        grid-template-rows:minmax(250px, 42vh) auto;
    }
    .archive-panel{
        padding:30px 22px;
    }
    .hakkimda-layout{
        grid-template-columns:1fr;
        gap:38px;
        overflow:auto;
        padding-right:10px;
    }
    .about-profile-card{ position:relative; top:auto; height:auto; min-height:360px }
    .about-story{ height:auto; overflow:visible; justify-content:flex-start; padding-bottom:48px }
    .about-story > h3{ max-width:760px }
    .about-contact-bars{ width:100%; max-width:320px }
    .archive-photo-layout{
        column-width:100%;
        overflow:auto;
        padding-right:22px;
    }
    .archive-photo-layout img{ height:auto; max-height:64vh }
    .archive-project-list article{
        grid-template-columns:1fr;
    }
    .sample-article{
        grid-template-columns:1fr;
        gap:42px;
        padding-right:24px;
    }
    .article-header{
        position:static;
    }
    .article-signature{
        grid-column:1;
    }
}

/*==================================================
  MOBILE COMPOSITION — V1, touch-first
==================================================*/
@media (max-width:700px){
    body{ min-width:320px }
    .page{ display:block; height:auto; min-height:0 }
    .top-row{ display:block; overflow:visible }
    .hero-left{
        min-height:52svh;
        padding:calc(28px + env(safe-area-inset-top)) 22px 32px;
        gap:34px;
        justify-content:space-between;
    }
    .brand{ gap:8px }
    .brand-logo{ width:39px; height:39px; flex-basis:39px }
    .brand h4{ font-size:11px; letter-spacing:.17em }
    .brand span{ font-size:9px; letter-spacing:.1em }
    .hero-text{ max-width:100% }
    h1{ font-size:clamp(48px,14vw,68px); letter-spacing:-2.4px }
    .hero-text p{
        width:auto;
        max-width:310px;
        margin-top:23px;
        font-size:12px;
        line-height:1.75;
    }
    .hero-text p br{ display:none }
    .latest-entry{
        position:static;
        width:min(100%, 330px);
        margin-top:28px;
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:9px;
        font-size:8px;
        transform:none;
        line-height:1.35;
    }
    .latest-entry strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .hero-right{ min-height:60svh; height:60svh }
    .hero-image img{
        width:calc(100% + 18px);
        height:calc(100% + 60px);
        margin:-30px -9px;
    }
    nav{
        padding:calc(17px + env(safe-area-inset-top)) 18px 48px;
        overflow:hidden;
    }
    nav ul{
        width:100%;
        gap:22px;
        margin-top:0;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        touch-action:pan-x;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    nav ul::-webkit-scrollbar{ display:none }
    nav li{ flex:0 0 auto; font-size:9px; letter-spacing:.15em }
    nav li a{ display:block; padding:8px 0 12px }
    nav li::after{ bottom:3px }
    .hero-watermark{ left:20px; bottom:20px; gap:3px }
    .hero-watermark .loc,.hero-watermark .name{ font-size:7px; letter-spacing:.25em }
    .bottom-row{ display:block; overflow:visible }
    .projects{
        min-height:0;
        padding:34px 22px 30px;
        overflow:hidden;
    }
    .projects-header{ gap:18px; align-items:flex-end; margin-bottom:24px }
    .section-title{ gap:13px }
    .section-title h2{ font-size:27px; line-height:.9 }
    .all-projects{ flex:0 0 auto; font-size:8px; letter-spacing:.15em }
    .project-grid{
        min-height:0;
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(232px, 78vw);
        gap:14px;
        overflow-x:auto;
        overflow-y:hidden;
        overscroll-behavior-x:contain;
        touch-action:pan-x;
        padding:0 4px 8px 0;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    .project-grid::-webkit-scrollbar{ display:none }
    .project-card{ min-height:290px; scroll-snap-align:start }
    .project-image{ min-height:224px }
    .project-info{ margin-top:12px }
    .project-info h3{ font-size:10px; line-height:1.35 }
    .project-info p{ font-size:10px }
    .cs-logo{ width:80px; height:80px }
    .project-image img.cs-logo{ width:80px; height:80px }
    .cs-text{ top:calc(50% + 48px) }
    .cs-text{ font-size:8px; letter-spacing:.42em }
    .about-panel{
        min-height:220px;
        padding:30px 22px calc(30px + env(safe-area-inset-bottom));
        border-left:0;
        border-top:1px solid var(--line);
    }
    .about-photo{ width:74px; height:74px; margin-bottom:14px }
    .about-info h3{ font-size:12px }
    .about-info p{ font-size:11px }
    footer{
        min-height:76px;
        height:auto;
        padding:18px 22px calc(18px + env(safe-area-inset-bottom));
        gap:16px;
    }
    .footer-left{ min-width:0; gap:13px }
    .footer-logo{ font-size:28px; margin-right:0 }
    .footer-logo .e{ font-size:26px }
    .footer-left .sep,.footer-left .dot,.footer-left p{ display:none }
    .footer-left a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px }
    .footer-right{ gap:18px; flex:0 0 auto }
    .footer-right a{ padding:8px 0 }

    .v1-hub{ min-height:0; padding:58px 22px 70px; gap:32px }
    .v1-hub-header h2{ font-size:54px }
    .v1-hub-header p{ max-width:280px; font-size:10px; line-height:1.7 }
    .archive-grid{ gap:14px }
    .archive-card{ grid-template-rows:minmax(215px, 52vw) auto }
    .archive-label{ min-height:58px; padding:16px 17px }
    .archive-label strong{ font-size:9px }

    .archive-panel{
        padding:calc(24px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
    }
    .archive-panel-header{ padding-bottom:22px; align-items:center }
    .archive-panel-header h2{ font-size:clamp(48px,14vw,70px); line-height:.78 }
    .archive-panel-header a{ gap:9px; font-size:8px }
    .archive-panel-header a span{ width:32px; height:32px; font-size:18px }
    .hakkimda-layout{ padding:22px 4px 40px 0; gap:30px }
    .about-profile-card{ min-height:460px; padding:54px 22px; gap:4px; }
    .about-profile-mark{ top:28px; left:22px; width:28px; height:28px }
    .about-profile-portrait{ width:108px; height:108px; flex-shrink:0; margin-bottom:16px }
    .about-story{ padding:0 0 36px }
    .about-story > h3{ font-size:clamp(24px, 7vw, 32px); line-height:1.2; padding-right:12px; }
    .about-story-copy{ gap:0; margin-top:20px }
    .about-story-copy p{ padding:14px 0; font-size:12px; line-height:1.7 }
    .about-contact-bars{ grid-template-columns:1fr; margin-top:16px }
    .about-contact-bars a{ padding:12px 8px; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; border-right:0; border-bottom:1px solid rgba(255,255,255,.08) }
    .about-contact-bars a:last-child{ border-bottom:0 }
    .about-contact-bars i{ display:grid }
    .about-contact-bars small{ display:block }
    .about-contact-bars strong{ font-size:9px }
    .archive-photo-layout{ padding:22px 18px 12px 0; column-gap:24px }
    .archive-photo-layout figcaption{ font-size:8px; line-height:1.4; gap:12px }
    .archive-panel:has(.archive-photo-layout) .gallery-progress{ right:7px; height:22svh }
    .sample-article{ padding:34px 18px 64px 0; gap:32px }
    #yazilarim .sample-article{ padding-right:18px }
    .archive-panel .reading-progress{ display:none !important }
    .article-header h3{ font-size:clamp(40px,12vw,58px); margin-bottom:18px }
    .article-header p{ font-size:11px }
    .article-body p{ font-size:19px; line-height:1.55 }
    .article-signature{ font-size:9px }

    .photo-lightbox{ padding:calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)) }
    .photo-lightbox-stage{ width:100%; height:min(72svh, 680px); gap:12px }
    .photo-lightbox-caption{ font-size:8px; line-height:1.45; gap:14px }
    .photo-lightbox-caption strong{ max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .photo-lightbox-close{ top:calc(16px + env(safe-area-inset-top)); right:18px; font-size:8px }
    .photo-lightbox-position{ display:none }
    .entry-mark img{ width:104px }
}

@media (max-width:380px){
    .hero-left{ min-height:54svh }
    h1{ font-size:48px }
    .hero-right{ min-height:56svh; height:56svh }
    .projects-header{ align-items:flex-start; flex-direction:column }
    .project-grid{ grid-auto-columns:82vw }
    .footer-left a{ max-width:165px }
}

/* Quill HTML Output Enhancements */
.ql-font-serif { font-family: 'Cormorant Garamond', Georgia, serif !important; }
.ql-font-sans { font-family: Inter, Arial, sans-serif !important; }
.ql-font-lora { font-family: 'Lora', Georgia, serif !important; }
.ql-size-small { font-size: 0.8em !important; }
.ql-size-large { font-size: 1.5em !important; line-height: 1.35; }

/* About Story HTML Output Enhancements */
.about-story-copy strong, .about-story-copy b { font-weight: bold; }
.about-story-copy em, .about-story-copy i { font-style: italic; }
.about-story-copy ul, .about-story-copy ol { padding-left: 20px; margin-bottom: 1.65em; }
.about-story-copy ul { list-style: disc; }
.about-story-copy ol { list-style: decimal; }
.about-story-copy li { padding-bottom: 8px; }
.about-story-copy a { text-decoration: underline; color: var(--gold); }

@media (hover:none){
    .project-card:hover,
    .archive-card:hover{ transform:none }
    .project-card[data-id] .project-image:not(.coming-soon-box)::after{
        opacity:1;
        transform:none;
    }
    .about-panel:hover .about-photo{ transform:none; box-shadow:0 18px 38px rgba(9,9,9,.1) }
    .about-panel:hover .about-photo img{ filter:grayscale(.28); transform:none }
}

@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto }
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .hero-image img,
    .brand,
    .hero-text,
    .about-panel,
    .coming-soon-box,
    .archive-media img{
        transform:none !important;
    }
}

/* ========================================================
   PROJECT DETAIL & ARCHIVE STYLES (PREMIUM EDITORIAL)
   ======================================================== */

/* ========================================================
   PROJECT DETAIL STYLES (EMRE AROLAT ARCHITECTURE LAYOUT)
   ======================================================== */

#project-detail {
    padding: 0 !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    position: fixed;
    inset: 0;
    z-index: 200;
    grid-template-rows: none !important;
}

/* Sticky Header */
#project-detail .archive-panel-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 5vw;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #EAEAEA;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#project-detail .archive-panel-header h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
}

#project-detail .archive-panel-header a {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

#project-detail .archive-panel-header a span {
    border: 1px solid #CCCCCC !important;
    color: #111111 !important;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
}

/* Hero Cover Section (Removed/Cleaned up) */
/* Detail Body & 2-Column Info Grid */
.project-detail-body {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #FFFFFF;
    color: #111111;
}

.project-info-grid {
    display: grid;
    grid-template-columns: minmax(300px, 25vw) 1fr;
    gap: 0;
    align-items: start;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .project-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Left Metadata Sidebar */
.emre-sidebar-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 100px 40px 60px;
    overflow-y: auto;
    border-right: 1px solid #EAEAEA;
    background: #FFFFFF;
}

#project-detail-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: #111111;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}

.project-meta-sidebar {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #111111;
    margin-bottom: 40px;
}

.meta-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #EAEAEA;
}

.meta-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777777;
}

.meta-value {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #111111;
    text-align: right;
}

/* Main Narrative in Gallery Column */
.project-narrative {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    max-width: 800px;
    margin-bottom: 40px;
}

.project-narrative p {
    margin-bottom: 24px;
}

.project-narrative p:last-child {
    margin-bottom: 0;
}

/* Gallery Grid */
.project-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    padding: 100px 40px 60px;
}

#project-detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.gallery-block-full,
.gallery-block-half,
.gallery-block-third { 
    width: 100%; 
}

@media (max-width: 900px) {
    .project-gallery-grid {
        padding: 40px 20px 60px;
    }
    #project-detail-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    #project-detail-gallery {
        grid-template-columns: 1fr;
    }
}

.gallery-media-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F8F8F8;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-media-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Aceternity Focus Cards Effect */
#project-detail-gallery:has(.gallery-item:hover) .gallery-item:not(:hover) {
    filter: blur(4px) brightness(0.6);
    transform: scale(0.96);
}
#project-detail-gallery .gallery-item {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    border-radius: 8px;
}
#project-detail-gallery .gallery-item:hover {
    filter: blur(0px) brightness(1);
    transform: scale(1.02);
    z-index: 10;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.emre-cover-wrapper {
    width: calc(100% + 80px);
    margin-top: -100px;
    margin-left: -40px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .emre-cover-wrapper {
        width: calc(100% + 40px);
        margin-top: -40px;
        margin-left: -20px;
    }
}

.emre-cover-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.gallery-caption {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #777777;
    margin-top: 8px;
}

/* SLIDER */
.project-block-slider {
    width: 100%;
    position: relative;
    padding: 0;
    margin-bottom: 20px;
}
.project-block-slider .slider-track {
    display: flex;
    gap: 20px;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}
.project-block-slider .slider-track:active {
    cursor: grabbing;
}
.project-block-slider .slider-track::-webkit-scrollbar { display: none; }

.project-block-slider img {
    flex: 0 0 100%;
    height: auto;
    max-height: 80vh;
    object-fit: cover;
    scroll-snap-align: center;
    border-radius: 0;
}

/* COLLAGE (BENTO) */
.project-block-collage {
    display: grid;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}
.project-block-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.project-block-collage[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    height: 50vh;
}
.project-block-collage[data-count="3"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 60vh;
}
.project-block-collage[data-count="3"] .collage-item-1 {
    grid-row: 1 / 3;
}
.project-block-collage[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 30vh);
}

@media (max-width: 768px) {
    .project-hero-content h1 {
        font-size: clamp(40px, 12vw, 60px);
    }
    
    .project-blocks-container {
        gap: 80px;
    }
    
    .project-block-text {
        font-size: 22px;
        text-align: left;
    }
    
    .project-block-split {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .project-block-split .split-image-wrapper,
    .project-block-split.right-image .split-image-wrapper,
    .project-block-split .split-text,
    .project-block-split.right-image .split-text {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .project-block-split .split-text {
        width: 90%;
        margin: -40px auto 0 !important;
        padding: 32px;
        font-size: 19px;
    }
    .project-block-slider img {
        flex: 0 0 100%;
        height: auto;
    }
    .project-block-slider .slider-track {
        padding: 0;
        gap: 20px;
    }
    .project-block-collage[data-count="3"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
    }
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
.project-related{margin-top:44px;padding-top:22px;border-top:1px solid #eaeaea}.project-related-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#777;font:8px Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}.project-related-list{display:flex;flex-direction:column;gap:8px}.project-related-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;padding:7px;border:1px solid #e5e5e5;background:#fff;text-align:left;color:#111;cursor:pointer;transition:border-color .2s ease,transform .2s ease}.project-related-card:hover,.project-related-card:focus-visible{border-color:#9a7347;transform:translateX(3px);outline:none}.project-related-card img,.project-related-placeholder{width:48px;height:38px;object-fit:cover;background:#f1eee8}.project-related-placeholder{display:grid;place-items:center;color:#9a7347;font:19px 'Cormorant Garamond',Georgia,serif}.project-related-card strong,.project-related-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-related-card strong{font:500 14px 'Cormorant Garamond',Georgia,serif}.project-related-card small{margin-top:3px;color:#888;font:8px Inter,Arial,sans-serif;letter-spacing:.08em}.project-related-card i{color:#9a7347;font-style:normal;font-size:16px}
.project-related-empty{color:#8a857c;font:11px Inter,Arial,sans-serif;line-height:1.5}

.gallery-block-full,
.gallery-block-half,
.gallery-block-third { 
    width: 100%; 
}

@media (max-width: 900px) {
    .project-gallery-grid {
        padding: 40px 20px 60px;
    }
    #project-detail-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    #project-detail-gallery {
        grid-template-columns: 1fr;
    }
}

.gallery-media-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F8F8F8;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-media-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Aceternity Focus Cards Effect */
#project-detail-gallery:has(.gallery-item:hover) .gallery-item:not(:hover) {
    filter: blur(4px) brightness(0.6);
    transform: scale(0.96);
}
#project-detail-gallery .gallery-item {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    border-radius: 8px;
}
#project-detail-gallery .gallery-item:hover {
    filter: blur(0px) brightness(1);
    transform: scale(1.02);
    z-index: 10;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.emre-cover-wrapper {
    width: calc(100% + 80px);
    margin-top: -100px;
    margin-left: -40px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .emre-cover-wrapper {
        width: calc(100% + 40px);
        margin-top: -40px;
        margin-left: -20px;
    }
}

.emre-cover-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.gallery-caption {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #777777;
    margin-top: 8px;
}

/* SLIDER */
.project-block-slider {
    width: 100%;
    position: relative;
    padding: 0;
    margin-bottom: 20px;
}
.project-block-slider .slider-track {
    display: flex;
    gap: 20px;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}
.project-block-slider .slider-track:active {
    cursor: grabbing;
}
.project-block-slider .slider-track::-webkit-scrollbar { display: none; }

.project-block-slider img {
    flex: 0 0 100%;
    height: auto;
    max-height: 80vh;
    object-fit: cover;
    scroll-snap-align: center;
    border-radius: 0;
}

/* COLLAGE (BENTO) */
.project-block-collage {
    display: grid;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}
.project-block-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.project-block-collage[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    height: 50vh;
}
.project-block-collage[data-count="3"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 60vh;
}
.project-block-collage[data-count="3"] .collage-item-1 {
    grid-row: 1 / 3;
}
.project-block-collage[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 30vh);
}

@media (max-width: 768px) {
    .project-hero-content h1 {
        font-size: clamp(40px, 12vw, 60px);
    }
    
    .project-blocks-container {
        gap: 80px;
    }
    
    .project-block-text {
        font-size: 22px;
        text-align: left;
    }
    
    .project-block-split {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .project-block-split .split-image-wrapper,
    .project-block-split.right-image .split-image-wrapper,
    .project-block-split .split-text,
    .project-block-split.right-image .split-text {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .project-block-split .split-text {
        width: 90%;
        margin: -40px auto 0 !important;
        padding: 32px;
        font-size: 19px;
    }
    .project-block-slider img {
        flex: 0 0 100%;
        height: auto;
    }
    .project-block-slider .slider-track {
        padding: 0;
        gap: 20px;
    }
    .project-block-collage[data-count="3"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
    }
    .project-block-collage[data-count="3"] .collage-item {
        height: 50vh;
    }
    .project-block-collage[data-count="3"] .collage-item-1 {
        grid-row: auto;
    }
}

/* A narrow desktop window is still a desktop: keep archive controls on the
   right when there is a mouse/hover pointer, regardless of its width. */
@media (hover: hover) and (pointer: fine) {
    .archive-panel-header,
    #project-detail .archive-panel-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 24px !important;
    }
    .archive-panel-header > h2,
    #project-detail .archive-panel-header > h2 {
        order: initial !important;
        flex: 0 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .archive-panel-header > a,
    #project-detail .archive-panel-header > a {
        order: initial !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 auto !important;
        padding: 10px 0 10px 18px !important;
        text-align: right !important;
    }
    .archive-panel-header::after,
    #project-detail .archive-panel-header::after {
        content: none !important;
        display: none !important;
    }
}

/* ==========================================================
   PROJECT ARCHIVE GRID SPECIFIC STYLES
   ========================================================== */
.archive-project-scroll-area {
    width:100%;
    height:100%;
    min-height:0;
    padding:40px 10px 72px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.archive-project-scroll-area::-webkit-scrollbar{display:none}

#projeler-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px;
    padding-bottom: 76px;
}

.project-preview-desc {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    line-height: 1.6;
}

/* Aceternity Focus Cards for Archive Grid */
/* Removed Aceternity Focus Cards blur as requested */

#projeler-grid .project-card {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 8px;
    max-width: 86%;
    margin: 0 auto;
}

#projeler .projeler-progress{
    position:absolute;
    top:50%;
    right:clamp(14px,2vw,34px);
    z-index:3;
    width:18px;
    height:min(34vh,280px);
    display:none;
    grid-template-rows:auto 1fr auto;
    justify-items:center;
    gap:10px;
    color:#817d74;
    font-size:7px;
    letter-spacing:.08em;
    transform:translateY(-32%);
}
#projeler .projeler-progress.is-needed{display:grid}
#projeler .projeler-track{
    position:relative;
    width:2px;
    height:100%;
    overflow:hidden;
    border-radius:99px;
    background:repeating-linear-gradient(to bottom,rgba(15,15,13,.18) 0 2px,transparent 2px 7px);
}
#projeler .projeler-track i{
    --projeler-progress:0;
    position:absolute;
    left:50%;
    top:calc(var(--projeler-progress) * (100% - 34px));
    width:6px;
    height:34px;
    border-radius:99px;
    background:var(--gold);
    box-shadow:0 3px 14px rgba(155,105,35,.35);
    transform:translateX(-50%);
    transition:top .12s ease-out;
}

#projeler-grid .project-image {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#projeler-grid .project-info {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 15px;
}

#projeler-grid .project-info h3 {
    color: #111111;
    font-size: 13px;
    font-weight: 700;
}

#projeler-grid .project-info p {
    color: #555555;
    margin-top: 2px;
}

#projeler-grid .project-info .project-preview-desc {
    color: #333333;
    font-size: 12px;
    margin-top: 6px;
}

#projeler-grid .project-card:hover {
    z-index: 10;
    position: relative;
    transform: translateY(-4px);
}

@media (max-width: 900px) {
    #projeler-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
}
@media (max-width: 600px) {
    #projeler-grid {
        grid-template-columns: 1fr !important;
    }
}


#projeler-grid .project-info .project-narrative-title {
    color: #111111;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
}


/* Contact Dropdown Menu */
.nav-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.76, 0.22, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    min-width: max-content;
    z-index: 100;
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #111111;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-dropdown-wrapper:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(8px);
}

.nav-dropdown-menu a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 11px !important;
    text-decoration: none;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
    transition: color 0.2s, transform 0.2s !important;
    display: block;
    padding: 0 !important;
}

.nav-dropdown-menu a:hover {
    color: var(--gold) !important;
    transform: translateX(2px) !important;
}



/* ==========================================================================
   DEVELOPER SIGNATURE
   ========================================================================== */
#dev-signature-fixed {
    position: absolute;
    bottom: 24px;
    right: 32px;
    color: rgba(20, 18, 14, 0.4);
    font-family: 'Great Vibes', cursive;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 50;
}
#dev-signature-fixed:hover {
    color: rgba(20, 18, 14, 0.8);
}
@media (max-width: 768px) {
    #dev-signature-fixed {
        position: relative;
        display: block;
        text-align: center;
        bottom: 0;
        right: 0;
        padding-bottom: 24px;
    }
}
/* ==========================================================================
   MODERN PARALLAX FOOTER
   ========================================================================== */
#modern-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45vh;
    min-height: 380px;
    z-index: -1;
    display: flex;
    align-items: stretch;
    background: #0a0a0a;
    overflow: hidden;
}

.mf-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('assets/hero.jpg');
    background-size: cover;
    background-position: center 20%;
    opacity: 0.15;
    filter: grayscale(100%) contrast(1.1);
    mix-blend-mode: luminosity;
    z-index: 0;
}
.mf-bg-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.6) 100%);
}

.mf-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 50px) clamp(40px, 6vw, 80px) clamp(20px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.mf-main-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.mf-brand-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 400px;
}
.mf-logo { height: 44px; width: auto; opacity: 0.9; }
.mf-bio {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.mf-email-link {
    color: var(--white);
    font-size: 13px;
    text-decoration: none;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}
.mf-email-link:hover {
    border-bottom-color: var(--gold);
    color: var(--gold);
}

.mf-links-box { display: flex; gap: clamp(60px, 8vw, 120px); }
.mf-col { display: flex; flex-direction: column; gap: 16px; }
.mf-col h4 {
    color: rgba(255, 255, 255, 0.3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
    font-weight: 600;
}
.mf-col a {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
    width: max-content;
}
.mf-col a:hover { color: var(--gold); }

/* ---- BOTTOM BAR (copyright + signature) ---- */
.mf-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: none; position: relative;
    padding-top: 8px;
    margin-top: 0;
}

.mf-copyright {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* ---- SIGNATURE ---- */
.mf-signature-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mf-signature-link {
    display: block;
    opacity: 0.55;
    transition: opacity 0.4s ease;
    margin-top: 8px;
}
.mf-signature-link:hover {
    opacity: 1;
}
.mf-signature-img {
    width: 100px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: filter 0.5s ease;
}
.mf-signature-link:hover .mf-signature-img {
    filter: brightness(0) invert(0.62) sepia(1) hue-rotate(18deg) saturate(5) brightness(1.1);
}

/* ---- TOOLTIP (below signature) ---- */
.mf-signature-tooltip {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.mf-signature-tooltip .mf-tt-text {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}
.mf-signature-tooltip svg {
    color: rgba(255,255,255,0.35);
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}
.mf-signature-wrapper:hover .mf-signature-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.v1-hub {
    margin-bottom: 45vh;
}

@media (max-width: 900px) {
    #modern-footer { height: auto; min-height: 70vh; }
    .v1-hub { margin-bottom: 70vh; }
    .mf-main-row { flex-direction: column; align-items: flex-start; gap: 60px; }
    .mf-links-box { width: 100%; justify-content: flex-start; gap: 60px; }
}
@media (max-width: 480px) {
    .mf-bottom-bar { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
}


/* ==========================================================================
   KUSURSUZ MOBİL UYUMLULUK & HAMBURGER MENÜ
   ========================================================================== */

/* --- LOGO COLOR FIXES FOR DARK BACKGROUNDS --- */
.entry-mark img,
#modern-footer .mf-logo {
    filter: brightness(0) invert(1) !important; /* Force logo to render white on dark backgrounds */
    opacity: 0.95 !important;
}

/* --- HAMBURGER BUTTON --- */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    z-index: 9999999;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease, transform 0.2s ease;
}
.mobile-menu-toggle{
    position:fixed;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #F8F7F2;
    border-radius: 2px;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
}

.mobile-menu-btn.is-open span:nth-child(1),


.mobile-menu-btn.is-open span:nth-child(2),


.mobile-menu-btn.is-open span:nth-child(3),


/* --- MOBILE MENU OVERLAY --- */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999990;
    background: #090909;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.35s ease;
}

.mobile-menu-overlay.is-open,


body.menu-locked,


.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-nav a.mobile-nav-link {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 500;
    color: rgba(248, 247, 242, 0.9);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
}

.mobile-nav a.mobile-nav-link:active {
    color: #9A7347;
}

.mobile-contact-group {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    width: 100%;
    max-width: 220px;
}

.mobile-contact-title {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.mobile-contact-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-contact-links a {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #9A7347 !important;
}

/* ==========================================================================
   BREAKPOINT: MOBILE (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Show Hamburger, Hide Desktop Nav */
    .mobile-menu-btn {
        display: flex !important;
    }

    .hero-right nav {
        display: none !important;
    }

    /* Page Layout Fixes */
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page {
        height: auto !important;
        min-height: auto !important;
        display: block !important;
    }

    .top-row {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }

    .hero-left {
        padding: 32px 20px 24px !important;
        gap: 24px !important;
    }

    .hero-text h1 {
        font-size: clamp(2.6rem, 9vw, 3.6rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;
        margin-bottom: 14px !important;
    }

    .hero-text p {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
        margin-top: 10px !important;
    }

    .hero-right {
        min-height: 280px !important;
        height: 45vh !important;
        position: relative !important;
    }

    .hero-image {
        height: 100% !important;
    }

    /* Full-width Edge-to-Edge Bottom Row & Projects Section (No side white borders) */
    .bottom-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .projects {
        width: 100% !important;
        padding: 32px 20px 36px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .projects-header {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    /* Horizontal scrolling for projects */
    .project-grid {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(240px, 78vw) !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        touch-action: pan-x !important;
        padding: 0 4px 12px 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .project-grid::-webkit-scrollbar {
        display: none !important;
    }

    .project-card {
        min-height: 260px !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
    }

    .about-panel {
        width: 100% !important;
        padding: 32px 20px !important;
        box-sizing: border-box !important;
    }

    /* Modern Footer Mobile: Side-by-Side Copyright & Signature */
    #modern-footer {
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        z-index: 1 !important;
        padding: 40px 20px 28px !important;
    }

    .v1-hub {
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    .mf-content {
        padding: 0 !important;
        height: auto !important;
    }

    .mf-main-row {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .mf-links-box {
        flex-direction: row !important;
        gap: 40px !important;
    }

    .mf-bottom-bar {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        /* no gap since it's space between */
        padding-top: 16px !important;
        margin-top: 24px !important;
    }

    .mf-copyright {
        font-size: 9.5px !important;
        letter-spacing: 0 !important;
        max-width: 65% !important;
        line-height: 1.4 !important;
        transform: translateY(-10px) !important;
    }

    .mf-signature-wrapper {
        align-items: flex-end !important;
        transform: translateX(-15px) !important;
    }

    .mf-signature-img {
        width: 80px !important;
        height: auto !important;
        opacity: 0.55 !important;
    }

    .mf-signature-tooltip {
        right: 0 !important;
        left: auto !important;
        transform: translateY(4px) !important;
    }
}

/* ==========================================================================
   MOBİL PERFORMANS (Kasma Önleme)
   ========================================================================== */
@media (hover: none), (max-width: 768px) {
    .project-card:hover,
    .archive-card:hover,
    .mf-signature-link:hover {
        transform: none !important;
    }

    .project-image img,
    .archive-media img {
        transition: none !important;
    }

    html {
        scroll-behavior: smooth;
    }
}

/* ===========================================================================
   MOBILE ARCHIVE EXPERIENCE — menu + project detail
   =========================================================================== */
@media (max-width: 768px) {
    /* The menu used to be toggled twice: once inline and once by the mobile
       listener. Keep the overlay above every fixed archive panel. */
    .mobile-menu-overlay { z-index: 2147483000 !important; }
    .mobile-menu-btn { z-index: 2147483001 !important; }

    #project-detail .archive-panel-header {
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 18px 20px !important;
        align-items: center;
        background: #fff;
    }
    #project-detail .archive-panel-header h2 {
        font: 600 9px/1.2 Inter, Arial, sans-serif;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    #project-detail .project-info-grid {
        display: block;
        min-height: 0;
    }
    #project-detail .emre-sidebar-sticky {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
        padding: 34px 22px 26px;
        border-right: 0;
        border-bottom: 1px solid #eaeaea;
    }
    #project-detail-heading {
        font-size: clamp(34px, 10vw, 45px);
        margin-bottom: 26px;
    }
    #project-detail .project-meta-sidebar { margin-bottom: 0; }
    #project-detail .project-related { margin-top: 30px; }
    #project-detail .project-gallery-grid {
        gap: 28px;
        padding: 0 0 52px;
    }
    #project-detail .emre-cover-wrapper {
        width: 100%;
        margin: 0;
    }
    #project-detail .emre-cover-img {
        height: clamp(230px, 62vw, 350px);
        -webkit-mask-image: none;
        mask-image: none;
    }
    #project-detail .project-narrative {
        max-width: none;
        padding: 0 22px;
        font-size: 15px;
        line-height: 1.8;
    }
    #project-detail #project-detail-gallery {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 22px;
        box-sizing: border-box;
    }
}



/* ==========================================================================
   KUSURSUZ PROJE DETAY SAYFASI OKUNABİLİRLİĞİ & MONO YAZI TİPİ FIX
   ========================================================================== */
#project-detail {
    background: #FFFFFF !important;
    color: #111111 !important;
}

#project-detail * {
    box-sizing: border-box;
}

#project-detail-heading {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(32px, 5vw, 54px) !important;
    font-weight: 600 !important;
    color: #111111 !important;
    margin-bottom: 12px !important;
    line-height: 1.15 !important;
}

#project-detail-meta {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.05em !important;
}

.project-narrative {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #222222 !important;
    margin-top: 20px !important;
}

.project-narrative p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #222222 !important;
    margin-bottom: 18px !important;
}

.project-related-head {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    margin-bottom: 16px !important;
}

.project-related-card {
    background: #F8F8F8 !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
    width: 100% !important;
}

.project-related-card span strong {
    color: #111111 !important;
    font-size: 13px !important;
}

.project-related-card span small {
    color: #777777 !important;
    font-size: 11px !important;
}



/* ==========================================================================
   PREMIUM MOBILE MENU & HEADER FIXES
   ========================================================================== */

/* Fix: Archive Panel Header & Project Detail Header overlapping with hamburger */
@media (max-width: 768px) {
    /* Reverse the layout so the back/close button is on the left, title is on the right */
    .archive-panel-header, 
    #project-detail .archive-panel-header {
        display: flex !important;
        flex-direction: row-reverse !important; 
        justify-content: flex-start !important;
        align-items: center !important;
        padding-right: 70px !important; /* Leave space for the hamburger button */
        padding-left: 20px !important;
    }

    /* Keep the back/close button on the far left */
    .archive-panel-header a, 
    #project-detail .archive-panel-header a {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* Push title slightly right but keep it readable */
    .archive-panel-header h2, 
    #project-detail .archive-panel-header h2 {
        text-align: right !important;
        margin-left: 15px !important;
    }
}

/* Premium Hamburger Button */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    z-index: 9999999;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.mobile-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: #F8F7F2;
    border-radius: 2px;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
}

.mobile-menu-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Premium Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999990;
    background: rgba(8, 8, 8, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.4s ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.menu-locked {
    overflow: hidden !important;
}

.mobile-nav-premium {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.mn-group {
    display: flex;
    flex-direction: column;
}

.mn-link {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 300;
    color: #F8F7F2;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mn-link::after {
    content: "→";
    font-family: Arial, sans-serif;
    font-size: 20px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mn-link:active {
    color: #9A7347;
}

.mn-link:active::after {
    opacity: 1;
    color: #9A7347;
    transform: translateX(0);
}

.mn-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mn-title {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.3);
}

.mn-socials {
    display: flex;
    gap: 24px;
}

.mn-socials a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #9A7347;
    text-decoration: none;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex !important;
    }
}


/* ENHANCED BACK BUTTON HITBOX AND EVENT HANDLING */
.archive-panel-header a, 
#project-detail .archive-panel-header a {
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    padding: 15px 25px 15px 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    display: flex !important;
}

@media (max-width: 768px) {
    .archive-panel-header, 
    #project-detail .archive-panel-header {
        position: relative !important;
        z-index: 50 !important;
    }
}


/* iOS BUTTON APPEARANCE FIX */
.mobile-menu-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}


/* ==========================================================================
   CSS-ONLY MENU TOGGLE FIX (NO JS CONFLICTS)
   ========================================================================== */

/* Hidden Checkbox */
.mobile-menu-toggle-checkbox {
    position: fixed;
    top: 0; left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -10;
}

/* Label acts as button */
.mobile-menu-btn {
    display: none; /* Desktop default */
}
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex !important;
    }
}

/* Icon Animation based on Checkbox State */
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-btn span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* Overlay Animation based on Checkbox State */
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Scroll Lock logic using :has() - well supported in modern browsers */
body:has(.mobile-menu-toggle-checkbox:checked) {
    overflow: hidden !important;
}



/* ==========================================================================
   PREMIUM MENU DESIGN UPGRADES & HEADER / GRID ALIGNMENTS
   ========================================================================== */

/* 1. APPLE-LIKE PREMIUM MENU DESIGN */
.mobile-menu-overlay {
    background: rgba(4, 4, 4, 0.92) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}

.mobile-nav-premium {
    width: 100% !important;
    max-width: 380px !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
    gap: 60px !important;
}

.mn-link {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.mn-link:last-child {
    border-bottom: none !important;
}

.mn-link::after {
    content: "→" !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    opacity: 0.2 !important;
    color: #ffffff !important;
    transform: translateX(-5px) !important;
    transition: all 0.3s ease !important;
}

.mn-link:active::after {
    opacity: 1 !important;
    color: #9A7347 !important;
    transform: translateX(0) !important;
}

.mn-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3em !important;
    color: rgba(255, 255, 255, 0.35) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.mn-socials a {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #9A7347 !important;
    opacity: 0.9 !important;
    transition: opacity 0.2s ease !important;
}

.mn-socials a:active {
    opacity: 1 !important;
    color: #ffffff !important;
}


/* 2. ARCHIVE PANEL HEADER ALIGNMENT (PERFECT CENTER) */
@media (max-width: 768px) {
    .archive-panel-header, 
    #project-detail .archive-panel-header {
        display: grid !important;
        grid-template-columns: 80px 1fr 80px !important; /* Kapat (Sol), Başlık (Orta), Hamburger Boşluğu (Sağ) */
        align-items: center !important;
        padding: 16px 20px !important;
        justify-items: center !important;
    }

    /* Kapat/Geri Butonu Sola Yasla */
    .archive-panel-header a, 
    #project-detail .archive-panel-header a {
        justify-self: start !important;
        margin: 0 !important;
        padding: 12px 12px 12px 0 !important;
    }

    /* Başlığı Tam Merkeze Al */
    .archive-panel-header h2, 
    #project-detail .archive-panel-header h2 {
        justify-self: center !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Taşmayı Önlemek İçin Font Küçültme */
        font-size: clamp(22px, 6vw, 32px) !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
    }
}


/* 3. PROJECT GRID UN-SQUEEZING (VERTICAL LAYOUT FOR MOBILE) */
@media (max-width: 768px) {
    /* Tüm arşiv içi projeler gridini mobilde alt alta dök ve rahatlat */
    #projeler-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px 10px 60px 10px !important;
    }
    
    #projeler-grid .project-card {
        width: 100% !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #projeler-grid .project-image {
        width: 100% !important;
        aspect-ratio: 4/3 !important; /* Daha orantılı görseller */
        min-height: auto !important;
        height: auto !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    #projeler-grid .project-info {
        padding: 15px 0 5px 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    #projeler-grid .project-info h3 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    #projeler-grid .project-info p {
        font-size: 13px !important;
        color: rgba(0,0,0,0.6) !important;
    }
}


/* ==========================================================================
   FINAL OVERRIDES FOR HEADER GRID ORDER & SCROLLING
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Header Hizalaması (HTML sırasını aşmak için grid-column kullanıldı) */
    .archive-panel-header a, 
    #project-detail .archive-panel-header a {
        grid-column: 1 !important; /* Kesinlikle Sol Sütun */
        grid-row: 1 !important;
    }

    .archive-panel-header h2, 
    #project-detail .archive-panel-header h2 {
        grid-column: 2 !important; /* Kesinlikle Orta Sütun */
        grid-row: 1 !important;
    }

    /* 2. Proje Kaydırma (Scroll) ve Padding Sorunları */
    #projeler-grid {
        padding: 20px 20px 80px 20px !important; /* Daha ferah kenar boşlukları */
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    
    .archive-project-scroll-area {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #projeler-grid .project-info {
        padding: 15px 0 10px 0 !important; /* Yazıların kenarlara çok yapışmasını önlemek için */
        margin: 0 10px !important;
    }
}


/* ==========================================================================
   FINAL ROUND FIXES: Gallery blur mobile, project card padding, header grid
   ========================================================================== */

/* 1. DISABLE GALLERY BLUR EFFECT ON MOBILE */
@media (max-width: 768px) {
    #project-detail-gallery:has(.gallery-item:hover) .gallery-item:not(:hover) {
        filter: none !important;
        transform: none !important;
    }
    #project-detail-gallery .gallery-item {
        transition: none !important;
        cursor: default !important;
        transform: none !important;
    }
    #project-detail-gallery .gallery-item:hover {
        filter: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
    /* Simple clean vertical gallery layout */
    #project-detail-gallery {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 16px !important;
    }
    .gallery-media-wrapper {
        border-radius: 5px !important;
        aspect-ratio: auto !important;
    }
    .gallery-media-wrapper img {
        height: auto !important;
        object-fit: contain !important;
    }
}

/* 2. PROJECT CARD INFO PADDING FIX */
@media (max-width: 768px) {
    #projeler-grid .project-card {
        background: #ffffff !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    #projeler-grid .project-image {
        border-radius: 0 !important;
    }
    #projeler-grid .project-info {
        padding: 18px 20px 18px 20px !important;
        margin: 0 !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
    }
    #projeler-grid .project-info h3 {
        font-size: 15px !important;
        letter-spacing: 0.04em !important;
    }
    #projeler-grid .project-info p {
        font-size: 13px !important;
        margin-top: 4px !important;
        color: rgba(0,0,0,0.5) !important;
    }
}

/* 3. HEADER ALIGNMENT (Correct 3-column grid order) */
@media (max-width: 768px) {
    .archive-panel-header,
    #project-detail .archive-panel-header {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        padding: 16px 20px !important;
        gap: 0 !important;
    }
    /* Column 1: Close/Back button */
    .archive-panel-header > a,
    #project-detail .archive-panel-header > a {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        order: -1 !important;
        padding: 10px 14px 10px 0 !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    /* Column 2: Title (centered) */
    .archive-panel-header > h2,
    #project-detail .archive-panel-header > h2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        text-align: center !important;
        margin: 0 !important;
        font-size: clamp(18px, 5vw, 28px) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Column 3: Spacer for hamburger alignment */
    .archive-panel-header::after,
    #project-detail .archive-panel-header::after {
        content: '' !important;
        display: block !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 48px !important; /* Same width as hamburger button */
    }
}


/* ==========================================================================
   MEGA FIX: Alignment, Scroll, Back Button, Menu Z-index
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- HAMBURGER BUTTON POSITION (aligned with header row) ---- */
    .mobile-menu-btn {
        top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
        right: 18px !important;
    }

    /* ---- HEADER: 3-column perfect alignment ---- */
    .archive-panel-header,
    #project-detail .archive-panel-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 14px 20px !important;
        gap: 0 !important;
        min-height: 48px !important;
    }

    /* Left: Back/Close button */
    .archive-panel-header > a,
    #project-detail .archive-panel-header > a {
        order: 1 !important;
        flex: 0 0 auto !important;
        min-width: 70px !important;
        text-align: left !important;
        z-index: 100 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        padding: 12px 8px 12px 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Center: Title */
    .archive-panel-header > h2,
    #project-detail .archive-panel-header > h2 {
        order: 2 !important;
        flex: 1 1 auto !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(16px, 4.5vw, 24px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Right: Invisible spacer (same width as hamburger to center the title) */
    .archive-panel-header::after,
    #project-detail .archive-panel-header::after {
        content: '' !important;
        order: 3 !important;
        flex: 0 0 48px !important;
        display: block !important;
    }

    /* ---- SCROLL FIX: Archive panels must scroll their content ---- */
    .archive-panel {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .archive-project-scroll-area {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
    }

    #projeler-grid {
        overflow: visible !important;
    }

    /* ---- PROJECT DETAIL: also must scroll ---- */
    #project-detail {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #project-detail .project-detail-body {
        overflow-y: visible !important;
        min-height: 0 !important;
    }
}


/* ==========================================================================
   SCROLL FIX (CORRECT) — Only the inner content area scrolls
   ========================================================================== */
@media (max-width: 768px) {
    /* Panel itself: NO scroll — let grid layout work */
    .archive-panel {
        overflow: hidden !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* The scroll area INSIDE the panel: THIS is what scrolls */
    .archive-project-scroll-area {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    /* Project grid must NOT block scrolling */
    #projeler-grid {
        overflow: visible !important;
        min-height: 0 !important;
    }

    /* Project detail panel — the body area must scroll */
    #project-detail .project-detail-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    /* Photo archive scroll area */
    .archive-photo-scroll-area {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    /* About archive — the layout area scrolls */
    .hakkimda .hakkimda-layout {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    /* Writing archive — the article scrolls */
    #yazilarim .sample-article {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }
}


/* ==========================================================================
   NUCLEAR FIX — THESE RULES OVERRIDE ALL PREVIOUS CONFLICTING RULES
   Last rules in the file = highest cascade priority with !important
   ========================================================================== */

/* 1. KILL the old .is-open rule that keeps overlay visible after checkbox uncheck */
.mobile-menu-overlay.is-open {
    /* Override old rule — only checkbox controls visibility now */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. ONLY the checkbox controls the overlay */
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. When checkbox is NOT checked, overlay is ALWAYS hidden */
.mobile-menu-toggle-checkbox:not(:checked) ~ .mobile-menu-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 4. SCROLL FIX — archive-project-scroll-area must scroll */
@media (max-width: 768px) {
    .archive-panel {
        overflow: hidden !important;
    }
    .archive-project-scroll-area {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        max-height: 100% !important;
        min-height: 0 !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain;
    }
    #projeler {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
    }
    #projeler-grid,
    #projeler-grid .project-card {
        touch-action: pan-y !important;
    }

    /* Arşiv başlıklarındaki kapat/geri kontrolü hamburger ile çakışmasın. */
    body.archive-open .mobile-menu-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Final desktop override: must come after all mobile cascade rules. */
@media (hover: hover) and (pointer: fine) {
    .archive-panel-header,
    #project-detail .archive-panel-header {
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:24px !important;
    }
    .archive-panel-header > h2,
    #project-detail .archive-panel-header > h2 {
        order:initial !important;
        flex:0 1 auto !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }
    .archive-panel-header > a,
    #project-detail .archive-panel-header > a {
        order:initial !important;
        flex:0 0 auto !important;
        margin:0 0 0 auto !important;
        padding:10px 0 10px 18px !important;
        text-align:right !important;
    }
    .archive-panel-header::after,
    #project-detail .archive-panel-header::after {
        content:none !important;
        display:none !important;
    }
}


/* ==========================================================================
   FRESH PREMIUM MENU DESIGN (AWWWARDS STYLE)
   ========================================================================== */
.mobile-menu-overlay {
    background: rgba(250, 248, 245, 0.95) !important; /* Krem / Açık Tema */
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Menü açıkken hamburger (artık çarpı oldu) çizgilerini SİYAH yap */
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-btn span {
    background-color: #eeeeee !important;
}

/* Kapanırken Linkleri gizle (Animasyon Başlangıcı) */
.mobile-menu-toggle-checkbox:not(:checked) ~ .mobile-menu-overlay .mn-link,
.mobile-menu-toggle-checkbox:not(:checked) ~ .mobile-menu-overlay .mn-intro,
.mobile-menu-toggle-checkbox:not(:checked) ~ .mobile-menu-overlay .mn-footer {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    transition: none !important;
}

/* Açılırken Animasyonlu Geliş (Stagger Effect) */
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-intro {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s !important;
}
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-link:nth-child(1) { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s !important; opacity: 1 !important; transform: translateY(0) !important; }
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-link:nth-child(2) { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.20s !important; opacity: 1 !important; transform: translateY(0) !important; }
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-link:nth-child(3) { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s !important; opacity: 1 !important; transform: translateY(0) !important; }
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-link:nth-child(4) { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.30s !important; opacity: 1 !important; transform: translateY(0) !important; }
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-link:nth-child(5) { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s !important; opacity: 1 !important; transform: translateY(0) !important; }
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-overlay .mn-footer {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s !important;
}

/* Konteyner */
.mobile-nav-premium {
    width: 100% !important;
    height: 100% !important;
    max-width: 500px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 32px calc(env(safe-area-inset-bottom, 0px) + 30px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Üst Başlık (Berke Eker - Menü) */
.mn-intro {
    display: flex !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    padding-bottom: 24px !important;
    margin-bottom: 10px !important;
}
.mn-intro span {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    color: #111111 !important;
    text-transform: uppercase !important;
}

/* Link Grubu */
.mn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Dev Serif Linkler */
.mn-link {
    font-family: 'Times New Roman', Times, serif !important; 
    font-size: clamp(40px, 11vw, 52px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: #111111 !important;
    padding: 8px 0 !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    align-self: flex-start !important; /* Yazılar solda hizalı kendi alanları kadar */
}

.mn-link::after {
    display: none !important; /* Basit ok işaretini kaldır */
}

/* Şık Alt Çizgi Hover Efekti */
.mn-link::before {
    content: '' !important;
    position: absolute !important;
    left: 0;
    bottom: 8px;
    width: 0% !important;
    height: 2px !important;
    background-color: #d8a05c !important; /* Altın vurgu */
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.mn-link:active::before, .mn-link:focus-visible::before, .mn-link:hover::before {
    width: 100% !important;
}
.mn-link:active, .mn-link:focus-visible, .mn-link:hover {
    color: #111111 !important;
    padding-left: 0 !important; /* Ucuz duran kaymayı kaldır */
    background: transparent !important;
}

/* Alt Bölüm */
.mn-footer {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.mn-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    color: rgba(0,0,0,0.3) !important;
}

.mn-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Hap şeklinde (Pill) Şık Butonlar */
.mn-socials a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    text-decoration: none !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    padding: 12px 22px !important;
    border-radius: 40px !important; 
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.mn-socials a:active, .mn-socials a:hover {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}


/* ==========================================================================
   ULTRA PREMIUM DARK MENU DESIGN (AWWWARDS STYLE)
   ========================================================================== */
.mobile-menu-overlay {
    background: rgba(12, 12, 12, 0.96) !important; /* Lüks Koyu Tema */
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Menü açıkken hamburger çizgilerini (kapatma ikonunu) BEYAZ yap */
.mobile-menu-toggle-checkbox:checked ~ .mobile-menu-btn span {
    background-color: #ffffff !important;
}

/* Üst Başlık (Berke Eker - Menü) */
.mn-intro {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.mn-intro span {
    color: #ffffff !important;
}

/* Dev Serif Linkler */
.mn-link {
    color: #ffffff !important;
}

/* Alt Bölüm */
.mn-footer {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.mn-title {
    color: rgba(255,255,255,0.4) !important;
}

/* Hap şeklinde (Pill) Şık Butonlar */
.mn-socials a {
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.mn-socials a:active, .mn-socials a:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #ffffff !important;
}





/* ==========================================================================
   FORCE BRAND LOGO BACKGROUND (WRAPPER METHOD)
   ========================================================================== */
.brand-logo-wrapper {
    background-color: #111111 !important;
    border-radius: 5px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    width: 41px !important;
    height: 41px !important;
    flex: 0 0 41px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.brand-logo {
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
    background: transparent !important;
    padding: 0 !important;
    filter: brightness(0) invert(1) !important;
}
@media (max-width: 768px) {
    .brand-logo-wrapper {
        width: 35px !important;
        height: 35px !important;
        flex: 0 0 35px !important;
        padding: 4px !important;
    }
}


/* ==========================================================================
   FADING LONG FOOTER LINE
   ========================================================================== */
.mf-bottom-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6%;
    width: 112%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    pointer-events: none;
}

















/* Fix black gap below projects safely */
@media (min-width: 900px) {
    .bottom-row { background: linear-gradient(to right, #090909 0%, #090909 75%, var(--bg) 75%, var(--bg) 100%); }
}







/* ==========================================================================
   PERFECT PARALLAX FIX (NO WRAPPERS)
   ========================================================================== */

/* 1. Body must be transparent so the z-index: -1 footer is visible in gaps/margins */
body {
    background: transparent !important;
}

/* 2. HTML can be dark to prevent white flashes */
html {
    background: #090909;
}

/* 3. The top part of the site (.page) needs its solid background to hide the footer */
.page {
    position: relative;
    z-index: 10;
    background: var(--bg) !important;
}

/* 4. The contact bar needs a solid background to hide the footer */
.contact-white-bar {
    position: relative;
    z-index: 10;
    background: var(--bg) !important; /* or #F6F4EF */
}

/* 5. The content hub needs a solid background AND the margin to reveal the footer */
.v1-hub {
    position: relative;
    z-index: 10;
    background: var(--black) !important;
}

/* Desktop Parallax Reveal */
@media (min-width: 901px) {
    .v1-hub {
        margin-bottom: 45vh !important;
        box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    }
    #modern-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 45vh !important;
        z-index: -1 !important;
    }
}

/* Mobile Parallax Reveal */
@media (max-width: 900px) {
    .v1-hub {
        margin-bottom: 70vh !important;
    }
    #modern-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 70vh !important;
        z-index: -1 !important;
    }
}


/* ==========================================================================
   FIX RIGHT SIDE GAP (SCROLLBAR ISSUE)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
}
.page, .v1-hub, .contact-white-bar, .bottom-row, .top-row {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Ensure background matches the theme so no white line bleeds */
html {
    background: #090909 !important;
}

/* ==========================================================================
   FIX WHITE GAP BELOW BOTTOM ROW (PERFECT 95vh + 5vh BAR)
   ========================================================================== */
@media (min-width: 901px) {
    .page {
        height: 95vh !important; /* Make room for the 5vh contact bar below it */
        grid-template-rows: 56vh 39vh !important; /* Keep original proportions */
    }
}


/* ==========================================================================
   FIX FOOTER CLICKABILITY
   Lift footer above body (z-index 5) but below main content (z-index 10)
   ========================================================================== */
#modern-footer {
    z-index: 5 !important;
}
.page, .contact-white-bar, .v1-hub {
    position: relative;
    z-index: 10;
}


/* ==========================================================================
   DECORATIVE HERO BRACKET (PC ONLY)
   ========================================================================== */
.hero-bracket {
      display: none;
  }
  
  @media (min-width: 901px) {
      .hero-bracket {
          display: block;
          position: absolute;
          top: 20px; 
          bottom: 20px; 
          right: 17px; 
          width: 1px;
          background: var(--gold); 
          pointer-events: none;
          z-index: 10;
          opacity: 0.7;
      }
      .hero-bracket::before {
          content: "";
          position: absolute;
          top: 0; 
          right: 0;
          width: 120px;
          height: 1px;
          background: linear-gradient(to left, var(--gold), transparent); 
      }
      .hero-bracket::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width:  450px;
          height: 1px;
          background: linear-gradient(to left, var(--gold), transparent); 
      }
  }
}

#projeler-grid {
    padding-bottom: 0 !important;
}


/* KULLANICININ İSTEDİĞİ KOMPLE SIFIR PADDING */
.archive-project-scroll-area {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
#projeler-grid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}