@font-face {
    font-family: "Amsterdam Four";
    src: url("../assets/fonts/Amsterdam Four_ttf 400.ttf") format("truetype");
    font-display: swap;
}

:root {
    --black: #050505;
    --cream: #f3eadc;
    --line: rgba(5, 5, 5, 0.22);
}

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    overflow: hidden;
    background: var(--black);
    color: var(--black);
    font-family: Arial, Helvetica, sans-serif;
}


/* --- Intro ilk-render koruması ---
   Normal girişte intro bitene kadar aşağıdaki içerik tarayıcı tarafından
   eski scroll konumuna dönülse bile görünemez. */
body.intro-pending {
    overflow: hidden !important;
    background: var(--black) !important;
}

body.intro-pending #intro {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
}

/* Intro kilidi yalnızca ilk kareyi korur; final geçişinde arka planı siyaha
   zorlamaz. header-state geldiği anda krem rengine geçiş mutlaka başlayabilir. */
body.intro-pending #intro.header-state {
    background-color: var(--cream) !important;
}

body.intro-pending #calismalar {
    visibility: hidden !important;
}

button,
a {
    color: inherit;
    font: inherit;
}

#intro {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--black);
    transition: background-color 650ms ease;
}

#site-header {
    position: absolute;
    inset: 0 0 auto 0;
    height: 150px;
    z-index: 20;
    pointer-events: none;
}

#brand-lockup {
    position: absolute;
    inset: 0;
}

#logo-container {
    position: absolute;
    left: 50%;
    top: 50vh;
    width: clamp(190px, 22vw, 340px);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, left, top, width;
    transition:
        left 850ms cubic-bezier(.22,.75,.22,1),
        top 850ms cubic-bezier(.22,.75,.22,1),
        width 850ms cubic-bezier(.22,.75,.22,1),
        transform 850ms cubic-bezier(.22,.75,.22,1);
}

#animated-logo,
#animated-logo svg {
    width: 100%;
}

/* SVG DOM'a eklendiği an ham/tam logo parlamasın.
   JS maskeleri hazırladıktan sonra görünür olur. */
#animated-logo {
    visibility: hidden;
}

#animated-logo.logo-prepared {
    visibility: visible;
}

#animated-logo svg {
    display: block;
    height: auto;
    overflow: visible;
}

.generated-logo-fill {
    transition: fill 650ms ease;
}

#animated-logo .animation-guide {
    fill: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

#intro.header-state #logo-container {
    left: clamp(22px, 3vw, 48px);
    top: clamp(20px, 3vw, 42px);
    width: clamp(72px, 7vw, 104px);
    transform: translate(0, 0);
}

#name-logo-wrap {
    position: absolute;
    left: clamp(108px, 11vw, 166px);
    top: clamp(21px, 3vw, 43px);
    width: clamp(180px, 18vw, 270px);
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition:
        clip-path 900ms cubic-bezier(.22,.75,.22,1),
        opacity 120ms linear;
    pointer-events: none;
}

#name-logo {
    display: block;
    width: 100%;
    height: auto;
}

#intro.show-name #name-logo-wrap {
    clip-path: inset(0);
    opacity: 1;
}

.menu-button {
    position: absolute;
    right: clamp(24px, 4vw, 64px);
    top: clamp(30px, 3.5vw, 52px);
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 500ms ease, transform 500ms ease;
    pointer-events: auto;
    cursor: pointer;
}

.menu-line {
    width: 38px;
    height: 1px;
    background: currentColor;
}

#intro.hero-ready .menu-button {
    opacity: 1;
    transform: translateY(0);
}

#hero-content {
    position: absolute;
    inset: 0;
    padding: 175px clamp(24px, 5vw, 78px) 42px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms ease;
}

#intro.hero-ready #hero-content {
    opacity: 1;
    visibility: visible;
}

.hero-index {
    position: absolute;
    left: clamp(24px, 5vw, 78px);
    top: 47%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
}

.hero-copy {
    width: min(930px, 76vw);
    margin-left: clamp(40px, 8vw, 130px);
}

.hero-kicker {
    margin-bottom: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .23em;
}

.hero-title {
    font-size: clamp(58px, 8.2vw, 132px);
    line-height: .79;
    letter-spacing: -.065em;
    font-weight: 900;
}

.hero-title span {
    display: block;
}

.hero-title .title-indent {
    margin-left: clamp(30px, 8vw, 135px);
}

.handwritten {
    position: relative;
    z-index: 2;
    width: max-content;
    margin: -4px 0 0 clamp(150px, 25vw, 390px);
    font-family: "Amsterdam Four", cursive;
    font-size: clamp(31px, 4vw, 64px);
    line-height: 1.2;
    transform: rotate(-5deg);
    white-space: nowrap;
}

.hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: min(830px, 70vw);
    margin-top: clamp(28px, 5vh, 62px);
    margin-left: 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.hero-description {
    max-width: 390px;
    font-size: clamp(13px, 1.15vw, 17px);
    line-height: 1.55;
}

.work-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 7px;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    white-space: nowrap;
}

.arrow {
    font-size: 18px;
    font-weight: 400;
}

.hero-side {
    position: absolute;
    right: clamp(24px, 4vw, 64px);
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(-50%);
    text-align: right;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

.scroll-cue {
    position: absolute;
    right: clamp(24px, 4vw, 64px);
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}

.scroll-line {
    width: 52px;
    height: 1px;
    background: currentColor;
}

@media (max-width: 768px) {
    #logo-container {
        width: clamp(165px, 45vw, 240px);
    }

    #intro.header-state #logo-container {
        left: 18px;
        top: 18px;
        width: 68px;
    }

    #name-logo-wrap {
        left: 98px;
        top: 20px;
        width: min(190px, calc(100vw - 170px));
    }

    .menu-button {
        right: 18px;
        top: 29px;
    }

    .menu-button span:first-child {
        display: none;
    }

    .menu-line {
        width: 28px;
    }

    #hero-content {
        padding: 145px 20px 28px;
    }

    .hero-index,
    .hero-side {
        display: none;
    }

    .hero-copy {
        width: 100%;
        margin-left: 0;
    }

    .hero-title {
        font-size: clamp(52px, 18vw, 82px);
        line-height: .84;
    }

    .hero-title .title-indent {
        margin-left: 8vw;
    }

    .handwritten {
        margin: 8px 0 0 17vw;
        font-size: clamp(29px, 10vw, 46px);
        white-space: normal;
    }

    .hero-bottom {
        width: 100%;
        margin: 42px 0 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 26px;
    }

    .hero-description {
        max-width: 310px;
    }

    .scroll-cue {
        right: 20px;
        bottom: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* Büyük silik 4 — sunum dosyasındaki grafik fikrinden uyarlanmıştır. */
.hero-watermark {
    position: absolute;
    z-index: -1;
    right: clamp(-60px, -2vw, -10px);
    top: 48%;
    transform: translateY(-50%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(420px, 50vw, 760px);
    line-height: .72;
    font-weight: 300;
    letter-spacing: -.13em;
    color: rgba(5, 5, 5, .055);
    user-select: none;
    pointer-events: none;
}

#hero-content {
    isolation: isolate;
}

/* Tam ekran menü */
#fullscreen-menu {
    position: fixed;
    z-index: 100;
    inset: 0;
    padding: clamp(28px, 4vw, 62px);
    background: var(--black);
    color: var(--cream);
    transform: translateX(100%);
    visibility: hidden;
    transition:
        transform 720ms cubic-bezier(.22,.75,.22,1),
        visibility 0s linear 720ms;
}

#fullscreen-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform 720ms cubic-bezier(.22,.75,.22,1),
        visibility 0s linear 0s;
}

.menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(243, 234, 220, .25);
}

.menu-label,
#menu-close {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

#menu-close {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#menu-close span {
    margin-left: 10px;
    font-size: 22px;
    font-weight: 300;
    vertical-align: -2px;
}

.menu-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, .55fr);
    gap: clamp(50px, 9vw, 150px);
    height: calc(100% - 65px);
    align-items: center;
}

.menu-links {
    display: flex;
    flex-direction: column;
}

.menu-links a {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: baseline;
    width: fit-content;
    color: inherit;
    text-decoration: none;
    font-size: clamp(31px, 4.3vw, 69px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.045em;
    transition: transform 220ms ease, opacity 220ms ease;
}

.menu-links a small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
    opacity: .5;
}

.menu-links:hover a {
    opacity: .3;
}

.menu-links a:hover {
    opacity: 1;
    transform: translateX(12px);
}

.menu-contact {
    align-self: center;
    padding-top: 22px;
    border-top: 1px solid rgba(243, 234, 220, .25);
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .08em;
}

.menu-contact a {
    color: inherit;
    text-decoration: none;
}

.menu-contact-title {
    margin-bottom: 18px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
    opacity: .55;
}

.menu-social {
    display: flex;
    gap: 18px;
    margin-top: 26px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}

.menu-signature {
    position: absolute;
    right: clamp(30px, 5vw, 80px);
    bottom: clamp(25px, 4vw, 58px);
    font-family: "Amsterdam Four", cursive;
    font-size: clamp(25px, 3vw, 46px);
    transform: rotate(-5deg);
    opacity: .75;
}

/* Alt sayfalar */
.inner-page {
    min-height: 100vh;
    background: var(--cream);
    color: var(--black);
    padding: 160px clamp(24px, 6vw, 90px) 70px;
}

.inner-page .page-number {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.inner-page h1 {
    margin-top: 24px;
    max-width: 1050px;
    font-size: clamp(58px, 9vw, 145px);
    line-height: .82;
    letter-spacing: -.065em;
}

.inner-page .page-intro {
    max-width: 620px;
    margin: 60px 0 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(5,5,5,.25);
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.6;
}

.inner-header {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    padding: 24px clamp(24px, 4vw, 60px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.inner-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.inner-brand img {
    width: 74px;
    height: auto;
}

.inner-brand-name {
    width: 185px;
    height: auto;
}

.inner-menu-link {
    margin-top: 18px;
    color: inherit;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

@media (max-width: 768px) {
    .hero-watermark {
        right: -55px;
        top: 52%;
        font-size: min(115vw, 500px);
        opacity: .75;
    }

    .menu-layout {
        display: block;
        height: auto;
        padding-top: 42px;
    }

    .menu-links a {
        grid-template-columns: 34px 1fr;
        font-size: clamp(28px, 9vw, 48px);
        line-height: 1.12;
    }

    .menu-contact {
        margin: 42px 0 0 34px;
        max-width: 260px;
    }

    .menu-signature {
        display: none;
    }

    .inner-brand-name {
        width: 145px;
    }

    .inner-page {
        padding-top: 145px;
    }
}


/* İç sayfalarda marka grubu — ana sayfaya göre küçük kalmaması için */
.inner-header .inner-brand {
    gap: 18px;
}
.inner-header .inner-brand > img:first-child {
    width: 112px !important;
}
.inner-header .inner-brand > .inner-brand-name {
    width: 270px !important;
}
@media (max-width: 768px) {
    .inner-header .inner-brand > img:first-child {
        width: 88px !important;
    }
    .inner-header .inner-brand > .inner-brand-name {
        width: 205px !important;
    }
}


/* Sağdaki silik öğe: artık düz rakam değil, gerçek 4 Kare logosu */
.hero-watermark {
    position: absolute;
    z-index: -1;
    right: clamp(-105px, -4vw, -40px);
    top: 50%;
    width: clamp(430px, 44vw, 720px);
    height: auto;
    transform: translateY(-50%);
    color: transparent;
    opacity: 1;
    user-select: none;
    pointer-events: none;
    overflow: visible;
}

.hero-watermark img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .055;
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .hero-watermark {
        right: -125px;
        top: 55%;
        width: min(120vw, 540px);
    }

    .hero-watermark img {
        opacity: .045;
    }
}


/* Watermark görünürlüğü — ana sayfa ve tüm iç sayfalar */
#hero-content .hero-watermark {
    z-index: 0 !important;
    pointer-events: none;
}
#hero-content .hero-copy,
#hero-content .hero-index,
#hero-content .scroll-cue {
    position: relative;
    z-index: 2;
}
#hero-content .hero-watermark img {
    opacity: .055 !important;
}

.inner-page {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.inner-page > *:not(.inner-watermark) {
    position: relative;
    z-index: 2;
}
.inner-watermark {
    position: fixed;
    z-index: 0;
    right: clamp(-105px, -4vw, -40px);
    top: 50%;
    width: clamp(430px, 44vw, 720px);
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}
.inner-watermark img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .055;
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .inner-watermark {
        right: -125px;
        top: 55%;
        width: min(120vw, 540px);
    }
    .inner-watermark img {
        opacity: .045;
    }
}


/* "baska" içindeki s — YENİ Amsterdam Four fontunun kendi alternatif s glifi.
   Fallback font KULLANILMAZ; ilk giriş ve tüm geri dönüşlerde aynı görünür. */
.handwritten .fixed-s,
.menu-signature .fixed-s,
.fixed-s {
    display: inline !important;
    font-family: "Amsterdam Four", cursive !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant-ligatures: none !important;
    font-feature-settings: "salt" 1 !important;
    -webkit-font-feature-settings: "salt" 1 !important;
    text-decoration: none !important;
    transform: none !important;
}



/* --- Ana sayfa scroll / Seçili Çalışmalar --- */
body.site-ready {
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--cream);
}

body.site-ready #intro {
    position: relative;
    inset: auto;
}

.fixed-s {
    display: inline !important;
    font-family: "Amsterdam Four", cursive !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant-ligatures: none !important;
    font-feature-settings: "salt" 1 !important;
    -webkit-font-feature-settings: "salt" 1 !important;
    transform: none !important;
}

.selected-work {
    position: relative;
    z-index: 1;
    padding: clamp(90px, 10vw, 160px) clamp(24px, 5vw, 78px) 120px;
    background: var(--cream);
    color: var(--black);
    border-top: 1px solid rgba(5,5,5,.16);
}

.selected-work-head {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 40px;
    align-items: end;
    margin-bottom: clamp(80px, 10vw, 150px);
}

.section-kicker {
    margin-bottom: 22px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
}

.selected-work-head h2 {
    font-size: clamp(64px, 9.2vw, 148px);
    line-height: .78;
    letter-spacing: -.07em;
    font-weight: 900;
}

.section-intro {
    max-width: 390px;
    padding: 20px 0 4px;
    border-top: 1px solid rgba(5,5,5,.25);
    font-size: clamp(15px, 1.25vw, 20px);
    line-height: 1.5;
}

.project {
    width: 100%;
    margin-bottom: clamp(140px, 15vw, 240px);
}

.project-right {
    width: 82%;
    margin-left: auto;
}

.project-meta-top {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(5,5,5,.28);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.project-visual {
    display: block;
    margin-top: 18px;
    overflow: hidden;
    background: #ddd3c4;
}

.project-visual img,
.project-secondary img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-visual-main {
    aspect-ratio: 16 / 8.5;
}

.project-visual-main img {
    transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}

.project-visual-main:hover img {
    transform: scale(1.018);
}

.project-info {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-top: 26px;
}

.project-info h3 {
    font-size: clamp(42px, 5.4vw, 86px);
    line-height: .83;
    letter-spacing: -.055em;
    font-weight: 900;
}

.project-info p {
    max-width: 480px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.55;
}

.project-info > a {
    display: flex;
    gap: 28px;
    align-items: center;
    padding: 0 0 9px;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    white-space: nowrap;
}

.project-info > a span {
    font-size: 19px;
    transition: transform 250ms ease;
}

.project-info > a:hover span {
    transform: translate(4px,-4px);
}

.project-secondary {
    width: 43%;
    aspect-ratio: 16 / 10;
    margin-top: clamp(45px, 6vw, 90px);
    overflow: hidden;
}

.project-left .project-secondary {
    margin-left: auto;
}

.project-right .project-secondary {
    margin-left: 7%;
}

.all-work-cta {
    display: grid;
    grid-template-columns: .35fr 1fr;
    align-items: start;
    gap: 30px;
    padding-top: 35px;
    border-top: 1px solid rgba(5,5,5,.28);
}

.all-work-cta > span {
    padding-top: 11px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.all-work-cta a {
    justify-self: end;
    color: inherit;
    text-decoration: none;
    font-size: clamp(55px, 8.2vw, 130px);
    line-height: .78;
    letter-spacing: -.065em;
    font-weight: 900;
    text-align: right;
}

.all-work-cta b {
    display: inline-block;
    font-size: .55em;
    font-weight: 400;
    transition: transform 250ms ease;
}

.all-work-cta a:hover b {
    transform: translate(7px,-7px);
}

@media (max-width: 768px) {
    .selected-work {
        padding: 78px 20px 80px;
    }

    .selected-work-head {
        display: block;
        margin-bottom: 75px;
    }

    .selected-work-head h2 {
        font-size: clamp(54px, 18vw, 82px);
    }

    .section-intro {
        margin-top: 42px;
    }

    .project,
    .project-right {
        width: 100%;
        margin-left: 0;
        margin-bottom: 110px;
    }

    .project-meta-top {
        align-items: flex-start;
        line-height: 1.5;
    }

    .project-meta-top span:last-child {
        max-width: 70%;
        text-align: right;
    }

    .project-visual-main {
        aspect-ratio: 4 / 3;
    }

    .project-info {
        display: block;
        margin-top: 20px;
    }

    .project-info h3 {
        font-size: clamp(42px, 14vw, 68px);
    }

    .project-info > a {
        width: max-content;
        margin-top: 28px;
    }

    .project-secondary {
        width: 72%;
        margin-top: 45px;
    }

    .project-left .project-secondary,
    .project-right .project-secondary {
        margin-left: auto;
    }

    .all-work-cta {
        display: block;
    }

    .all-work-cta a {
        display: block;
        margin-top: 45px;
        font-size: clamp(48px, 15vw, 74px);
    }
}


/* --- Kompakt editorial case-study görünümü --- */
.case-card {
    width: min(1380px, 100%);
    min-height: 650px;
    margin: 0 auto clamp(110px, 11vw, 175px);
    display: grid;
    grid-template-columns: 28% 72%;
    overflow: hidden;
    border: 1px solid rgba(5,5,5,.16);
    border-radius: 34px;
    background: #f5ede2;
}

.case-copy {
    min-width: 0;
    padding: clamp(28px, 3vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(5,5,5,.14);
}

.case-number {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(34px, 4vw, 60px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}
.case-number i {height:1px; flex:1; background:rgba(5,5,5,.25);}

.case-copy h3 {
    font-size: clamp(42px, 4.2vw, 68px);
    line-height: .87;
    letter-spacing: -.055em;
    font-weight: 900;
}
.case-type {
    margin-top: 20px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}
.case-desc {
    max-width: 300px;
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.55;
}
.case-services {margin-top: 38px;}
.case-services span {
    display:flex;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid rgba(5,5,5,.16);
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}
.case-services b {font-size:8px; opacity:.55;}
.case-foot {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:36px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.13em;
}
.case-foot a {color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:4px;}

.case-gallery {
    position:relative;
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap:6px;
    padding:6px;
    height:650px;
    background:#e8ded0;
}
.case-gallery figure {margin:0; overflow:hidden;}
.case-gallery img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.case-gallery figure:hover img {transform:scale(1.018);}
.case-main {border-radius:27px 0 0 27px;}
.case-side {border-radius:0 27px 27px 0;}
.case-label {
    position:absolute;
    left:32px;
    bottom:28px;
    padding:12px 15px 10px;
    background:rgba(243,234,220,.9);
    backdrop-filter:blur(8px);
    font-size:18px;
    font-weight:900;
    letter-spacing:-.03em;
}
.case-label small {
    display:block;
    margin-top:2px;
    font-size:7px;
    letter-spacing:.24em;
}
.case-card-reverse .case-gallery {grid-template-columns:1fr 1.6fr;}
.case-card-reverse .case-main {border-radius:27px 0 0 27px;}
.case-card-reverse .case-side {border-radius:0 27px 27px 0;}

@media (max-width: 900px) {
    .case-card {
        display:block;
        min-height:0;
        border-radius:24px;
    }
    .case-copy {
        min-height:520px;
        border-right:0;
        border-bottom:1px solid rgba(5,5,5,.14);
    }
    .case-gallery,
    .case-card-reverse .case-gallery {
        height:auto;
        aspect-ratio:1 / 1.05;
        grid-template-columns:1.45fr .85fr;
    }
    .case-main {border-radius:18px 0 0 18px;}
    .case-side {border-radius:0 18px 18px 0;}
}

@media (max-width: 560px) {
    .case-copy {min-height:470px; padding:28px 24px;}
    .case-copy h3 {font-size:44px;}
    .case-desc {font-size:12px;}
    .case-gallery,
    .case-card-reverse .case-gallery {
        aspect-ratio: 1 / 1.15;
        grid-template-columns:1fr;
        grid-template-rows:1.45fr .75fr;
    }
    .case-main,.case-side,
    .case-card-reverse .case-main,.case-card-reverse .case-side {border-radius:16px;}
    .case-label {left:22px; bottom:22px;}
}

/* Case-study uzun başlıkların sol kolona güvenli sığması */
.case-copy h3 {
    font-size: clamp(38px, 3.55vw, 58px);
    line-height: .9;
    letter-spacing: -.06em;
    overflow-wrap: normal;
    word-break: normal;
}
.case-card-reverse .case-copy h3 {
    font-size: clamp(35px, 3.25vw, 54px);
}
@media (max-width: 1100px) and (min-width: 901px) {
    .case-copy h3 { font-size: clamp(34px, 3.8vw, 48px); }
    .case-card-reverse .case-copy h3 { font-size: clamp(31px, 3.5vw, 44px); }
}
@media (max-width: 900px) {
    .case-copy h3,
    .case-card-reverse .case-copy h3 { font-size: clamp(42px, 10vw, 64px); }
}
@media (max-width: 560px) {
    .case-copy h3,
    .case-card-reverse .case-copy h3 { font-size: clamp(38px, 12vw, 50px); }
}

/* Seçili Çalışmalar dikey boşluk ayarı */
.selected-work {
    padding-top: clamp(42px, 4.5vw, 70px);
}
.selected-work-head {
    margin-bottom: clamp(42px, 5vw, 72px);
}
.case-card {
    margin-bottom: clamp(48px, 5vw, 76px);
}
@media (max-width: 768px) {
    .selected-work { padding-top: 42px; }
    .selected-work-head { margin-bottom: 42px; }
    .case-card { margin-bottom: 48px; }
}

/* Hero -> Seçili Çalışmalar geçişini ekstra sıkılaştır */
.selected-work {
    padding-top: 14px !important;
}
@media (max-width: 768px) {
    .selected-work {
        padding-top: 12px !important;
    }
}

/* Çalışmalarımız — portföy arşivi */
.works-page { overflow: visible; padding-bottom: 110px; }
.works-page .page-intro { margin-bottom: 70px; }
.works-archive { margin-top: 80px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 70px 28px; }
.work-tile { min-width:0; }
.work-tile-link { display:block; color:inherit; text-decoration:none; }
.work-tile-image { aspect-ratio: 16/10; overflow:hidden; background:#e5dbcd; }
.work-tile-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.work-tile-link:hover .work-tile-image img { transform:scale(1.018); }
.work-tile-meta { display:flex; justify-content:space-between; gap:20px; padding:14px 0 11px; border-bottom:1px solid rgba(5,5,5,.25); font-size:8px; font-weight:800; letter-spacing:.16em; }
.work-tile h2 { margin-top:18px; font-size:clamp(38px,4.6vw,72px); line-height:.84; letter-spacing:-.055em; }
.work-tile-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-top:18px; }
.work-tile-bottom p { max-width:390px; font-size:13px; line-height:1.5; }
.work-tile-bottom span { white-space:nowrap; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:9px; font-weight:800; letter-spacing:.14em; }
@media(max-width:768px){
 .works-page .page-intro{margin-bottom:45px}.works-archive{grid-template-columns:1fr;gap:70px;margin-top:55px}.work-tile-image{aspect-ratio:4/3}.work-tile h2{font-size:clamp(42px,13vw,64px)}.work-tile-bottom{display:block}.work-tile-bottom span{display:inline-block;margin-top:22px}
}


/* ÇALIŞMALARIMIZ — header görsellerin üstüne binmesin */
body.works-page .inner-header,
body.calismalar-page .inner-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 145px;
    padding: 28px clamp(28px, 4vw, 64px) 22px !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 20;
    background: #f3eadc;
}

body.works-page .works-archive,
body.calismalar-page .works-archive,
body.works-page .works-grid,
body.calismalar-page .works-grid {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    body.works-page .inner-header,
    body.calismalar-page .inner-header {
        min-height: 112px;
        padding: 20px 20px 16px !important;
    }
}


/* FINAL: Çalışmalarımız sayfasında logo içerik üstünde gezmez */
.works-page-body .inner-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 145px !important;
    padding: 28px clamp(28px, 4vw, 64px) 22px !important;
    background: #f3eadc !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
}

.works-page-body .inner-page.works-page {
    padding-top: 170px !important;
}

/* İlk proje görseli header alanının altında başlar */
.works-page-body .works-archive {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .works-page-body .inner-header {
        height: 112px !important;
        padding: 20px !important;
    }
    .works-page-body .inner-page.works-page {
        padding-top: 132px !important;
    }
}

.inner-header-actions{display:flex;align-items:center;gap:26px;margin-top:18px}
.inner-header-actions .inner-menu-link{margin-top:0}
.inner-menu-button{display:inline-flex;align-items:center;gap:12px;border:0;padding:0;background:transparent;color:inherit;font:inherit;font-size:10px;font-weight:700;letter-spacing:.18em;cursor:pointer}
.inner-menu-button span{display:block;width:34px;height:1px;background:currentColor}
@media(max-width:768px){.inner-header-actions{gap:15px;margin-top:12px}.inner-menu-button span{width:22px}.inner-menu-link,.inner-menu-button{font-size:8px}}

/* VERIFIED: tüm iç sayfalarda ANA SAYFA + MENÜ görünür */
.inner-header .inner-header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:24px !important;
    margin:18px 0 0 auto !important;
    position:relative !important;
    z-index:100 !important;
}
.inner-header .inner-header-actions .inner-menu-link{
    display:inline-block !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
}
.inner-header .inner-menu-button{
    display:inline-flex !important;
    align-items:center !important;
    gap:11px !important;
    opacity:1 !important;
    visibility:visible !important;
    border:0 !important;
    background:transparent !important;
    color:#050505 !important;
    padding:0 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.17em !important;
    cursor:pointer !important;
}
.inner-header .inner-menu-button span{display:block !important;width:30px !important;height:1px !important;background:#050505 !important}
@media(max-width:768px){
 .inner-header .inner-header-actions{gap:13px !important;margin-top:10px !important}
 .inner-header .inner-menu-button,.inner-header .inner-menu-link{font-size:8px !important}
 .inner-header .inner-menu-button span{width:20px !important}
}

/* BİZ KİMİZ — uzun metin yerleşimi */
.about-story {
    max-width: 1320px;
    margin: 58px auto 0;
    padding: 30px 0 20px;
    border-top: 1px solid rgba(5,5,5,.25);
}
.about-story-kicker {
    margin-bottom: 52px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
}
.about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 8vw, 130px);
    align-items: start;
}
.about-story p { margin: 0; }
.about-story-lead {
    font-size: clamp(24px, 2.35vw, 38px);
    line-height: 1.18;
    letter-spacing: -.035em;
}
.about-story-lead p + p { margin-top: 34px; }
.about-story-copy {
    max-width: 660px;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.72;
}
.about-story-copy p + p {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(5,5,5,.13);
}
.about-story-finale {
    margin-top: clamp(70px, 9vw, 130px);
    padding: 28px 0 8px;
    border-top: 1px solid rgba(5,5,5,.25);
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(48px, 8vw, 130px);
}
.about-story-finale > span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
}
.about-story-finale p {
    font-size: clamp(30px, 4vw, 62px);
    line-height: 1.02;
    letter-spacing: -.05em;
}
@media (max-width: 768px) {
    .about-story { margin-top: 42px; padding-top: 22px; }
    .about-story-kicker { margin-bottom: 34px; line-height: 1.5; }
    .about-story-grid, .about-story-finale { grid-template-columns: 1fr; gap: 38px; }
    .about-story-lead { font-size: clamp(22px, 7vw, 30px); }
    .about-story-copy { font-size: 15px; line-height: 1.68; }
    .about-story-finale { margin-top: 64px; }
}

/* FINAL GLOBAL FIX — iç sayfalarda logo/header içerik üzerinde gezmez */
body:not(:has(#intro)) .inner-header,
body.works-page-body .inner-header {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 145px !important;
    padding: 28px clamp(28px, 4vw, 64px) 22px !important;
    box-sizing: border-box !important;
    background: #f3eadc !important;
    z-index: 30 !important;
}

body:not(:has(#intro)) .inner-page,
body.works-page-body .inner-page.works-page {
    padding-top: 36px !important;
}

@media (max-width: 768px) {
    body:not(:has(#intro)) .inner-header,
    body.works-page-body .inner-header {
        min-height: 112px !important;
        padding: 20px !important;
    }
    body:not(:has(#intro)) .inner-page,
    body.works-page-body .inner-page.works-page {
        padding-top: 28px !important;
    }
}


/* MARKA / SOSYAL MEDYA / PRODÜKSİYON / TASARIM — geçici içerik tasarımı */
.service-story{max-width:1320px;margin:58px auto 0;padding:30px 0 50px;border-top:1px solid rgba(5,5,5,.25)}
.service-story-kicker{max-width:900px;margin-bottom:52px;font-size:10px;font-weight:800;letter-spacing:.22em;line-height:1.5}
.service-story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,8vw,130px);align-items:start}
.service-story p{margin:0}.service-story-lead{font-size:clamp(24px,2.35vw,38px);line-height:1.18;letter-spacing:-.035em}.service-story-lead p+p{margin-top:34px}.service-story-copy{max-width:660px;font-size:clamp(15px,1.15vw,18px);line-height:1.72}.service-story-copy p+p{margin-top:24px;padding-top:24px;border-top:1px solid rgba(5,5,5,.13)}
@media(max-width:768px){.service-story{margin-top:42px;padding-top:22px}.service-story-kicker{margin-bottom:34px}.service-story-grid{grid-template-columns:1fr;gap:38px}.service-story-lead{font-size:clamp(22px,7vw,30px)}.service-story-copy{font-size:15px;line-height:1.68}}

/* =========================================================
   TELEFON — ANA SAYFA + INTRO (masaüstüne dokunmaz)
   ========================================================= */
@media (max-width: 768px) {
    #intro {
        height: 100svh;
        min-height: 100svh;
    }

    #site-header {
        height: 104px;
    }

    /* İlk açılış: 4 logosu gerçek ekran merkezinde */
    #logo-container {
        left: 50%;
        top: 50svh;
        width: clamp(150px, 47vw, 205px);
        transform: translate(-50%, -50%);
    }

    /* Çizim bittikten sonra mobil header konumu */
    #intro.header-state #logo-container {
        left: 16px;
        top: 16px;
        width: 62px;
        transform: translate(0, 0);
    }

    #name-logo-wrap {
        left: 88px;
        top: 18px;
        width: min(166px, calc(100vw - 154px));
    }

    .menu-button {
        right: 17px;
        top: 31px;
        gap: 9px;
    }

    .menu-button span:first-child {
        display: inline;
        font-size: 8px;
        letter-spacing: .16em;
    }

    .menu-line {
        width: 22px;
    }

    #hero-content {
        padding: 122px 18px 24px;
    }

    .hero-copy {
        width: 100%;
        margin: 0;
    }

    .hero-kicker {
        margin-bottom: 15px;
        font-size: 7px;
        letter-spacing: .18em;
    }

    .hero-title {
        max-width: 100%;
        font-size: clamp(45px, 15.8vw, 66px);
        line-height: .83;
        letter-spacing: -.065em;
    }

    .hero-title .title-indent {
        margin-left: 9vw;
    }

    .handwritten {
        width: 94%;
        margin: 10px 0 0 5%;
        font-size: clamp(26px, 8.5vw, 38px);
        line-height: 1.08;
        white-space: nowrap;
        transform: rotate(-4deg);
    }

    #hero-content .hero-watermark {
        right: -34vw;
        top: 49%;
        width: 104vw;
        max-width: 470px;
        transform: translateY(-50%);
    }

    #hero-content .hero-watermark img {
        opacity: .045 !important;
    }

    .hero-bottom {
        width: 100%;
        margin: 26px 0 0;
        padding-top: 14px;
        gap: 17px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-description {
        max-width: 285px;
        font-size: 12px;
        line-height: 1.45;
    }

    .work-link {
        font-size: 8px;
        gap: 12px;
        padding-bottom: 5px;
    }

    .work-link .arrow {
        font-size: 15px;
    }

    .scroll-cue {
        left: 18px;
        right: auto;
        bottom: 16px;
        gap: 9px;
        font-size: 7px;
    }

    .scroll-line {
        width: 32px;
    }

    /* Menü küçük ekranlarda kesilmesin */
    #fullscreen-menu {
        padding: 22px 18px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .menu-layout {
        padding-top: 28px;
    }

    .menu-links a {
        grid-template-columns: 27px 1fr;
        font-size: clamp(27px, 8.7vw, 40px);
        line-height: 1.04;
    }

    .menu-contact {
        margin: 28px 0 0 27px;
        padding-top: 15px;
        font-size: 9px;
    }

    /* Seçili çalışmalar: telefonda kompakt tek sütun */
    .selected-work {
        padding: 38px 16px 70px !important;
    }

    .selected-work-head {
        margin-bottom: 34px;
    }

    .selected-work-head h2 {
        font-size: clamp(48px, 15.5vw, 66px);
        line-height: .82;
    }

    .section-kicker {
        margin-bottom: 14px;
        font-size: 8px;
    }

    .section-intro {
        margin-top: 26px;
        padding-top: 14px;
        font-size: 13px;
    }

    .case-card {
        margin-bottom: 34px;
        border-radius: 20px;
    }

    .case-copy {
        min-height: 0;
        padding: 25px 20px 22px;
    }

    .case-number {
        margin-bottom: 26px;
    }

    .case-copy h3,
    .case-card-reverse .case-copy h3 {
        font-size: clamp(37px, 11vw, 47px);
    }

    .case-desc {
        max-width: 100%;
    }

    .case-services {
        margin-top: 28px;
    }

    .case-foot {
        margin-top: 28px;
    }

    .case-gallery,
    .case-card-reverse .case-gallery {
        aspect-ratio: 1 / 1.02;
    }

    .all-work-cta {
        padding-top: 25px;
    }

    .all-work-cta a {
        margin-top: 30px;
        font-size: clamp(44px, 14vw, 62px);
    }
}

/* iPhone SE / kısa Android ekranları: hero ilk ekrana sığsın */
@media (max-width: 768px) and (max-height: 700px) {
    #hero-content {
        padding-top: 104px;
    }

    #intro.header-state #logo-container {
        width: 54px;
        top: 13px;
    }

    #name-logo-wrap {
        left: 78px;
        top: 15px;
        width: 145px;
    }

    .menu-button {
        top: 26px;
    }

    .hero-kicker {
        margin-bottom: 10px;
    }

    .hero-title {
        font-size: clamp(40px, 14.3vw, 55px);
    }

    .handwritten {
        margin-top: 5px;
        font-size: clamp(23px, 7.7vw, 31px);
    }

    .hero-bottom {
        margin-top: 18px;
        gap: 11px;
    }

    .hero-description {
        font-size: 10.5px;
        line-height: 1.35;
    }

    .scroll-cue {
        bottom: 10px;
    }
}

/* Telefon yatay çevrilirse intro ve hero taşmasın */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
    #logo-container {
        top: 50svh;
        width: 125px;
    }

    #intro.header-state #logo-container {
        left: 14px;
        top: 12px;
        width: 48px;
    }

    #name-logo-wrap {
        left: 70px;
        top: 13px;
        width: 130px;
    }

    .menu-button {
        top: 22px;
    }

    #hero-content {
        padding: 78px 18px 12px;
    }

    .hero-kicker { margin-bottom: 6px; }
    .hero-title { font-size: clamp(35px, 8vw, 52px); }
    .hero-title .title-indent { margin-left: 5vw; }
    .handwritten {
        width: max-content;
        margin: 2px 0 0 30vw;
        font-size: clamp(20px, 4.8vw, 30px);
    }
    .hero-bottom {
        width: 66%;
        margin-top: 8px;
        padding-top: 8px;
        gap: 8px;
    }
    .hero-description { font-size: 9px; max-width: 250px; }
    .work-link { font-size: 7px; }
    .scroll-cue { display: none; }
    #hero-content .hero-watermark { width: 58vw; right: -12vw; }
}

/* =========================================================
   MOBIL ANA SAYFA YERLESIM DUZELTMESI
   Intro animasyonuna dokunmaz; yalnizca intro tamamlandiktan
   sonra (body.site-ready) telefon hero yerlesimini duzeltir.
   ========================================================= */
@media (max-width: 768px) {
    /* Intro bittikten sonra hero'yu 100dvh'ye kilitleme.
       Icerik kadar yukseklik kullanir; Secili Calismalar hemen devam eder. */
    body.site-ready #intro {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.site-ready #hero-content {
        position: relative;
        inset: auto;
        min-height: 0;
        padding: 122px 18px 30px;
    }

    /* El yazisinin tamami telefon genisligine sigsin. */
    body.site-ready .handwritten {
        width: calc(100vw - 36px);
        max-width: none;
        margin: 10px 0 0 0;
        font-size: clamp(21px, 6.7vw, 29px);
        line-height: 1.08;
        white-space: nowrap;
        transform: rotate(-3deg);
        transform-origin: left center;
    }

    /* Aciklama + Calismalarimiz birbirinden ayrilsin. */
    body.site-ready .hero-bottom {
        margin-top: 24px;
        padding-top: 14px;
        gap: 18px;
    }

    body.site-ready .work-link {
        position: relative;
        z-index: 2;
        gap: 11px;
    }

    /* Android'in ↗ karakterini renkli emoji olarak cizmesini engelle.
       Ok tamamen CSS ile cizilir. */
    body.site-ready .work-link .arrow {
        position: relative;
        display: inline-block;
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        overflow: visible;
        font-size: 0;
        line-height: 0;
        color: transparent;
    }

    body.site-ready .work-link .arrow::before {
        content: "";
        position: absolute;
        left: 1px;
        bottom: 2px;
        width: 11px;
        height: 1px;
        background: var(--black);
        transform: rotate(-45deg);
        transform-origin: left center;
    }

    body.site-ready .work-link .arrow::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 6px;
        height: 6px;
        border-top: 1px solid var(--black);
        border-right: 1px solid var(--black);
    }

    /* Asagi kaydir artik Calismalarimiz ile ayni koordinata sabitlenmez. */
    body.site-ready .scroll-cue {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: max-content;
        margin-top: 18px;
        gap: 9px;
        font-size: 7px;
    }

    body.site-ready .scroll-line {
        width: 28px;
    }

    /* Hero sonrasi gereksiz boslugu kaldir. */
    body.site-ready .selected-work {
        padding-top: 28px !important;
    }
}

@media (max-width: 380px) {
    body.site-ready .handwritten {
        font-size: clamp(20px, 6.35vw, 24px);
    }
}

/* =========================================================
   MOBIL IC SAYFA HEADER + EMOJI OK DUZELTMESI
   Intro animasyonuna ait secicilere dokunmaz.
   ========================================================= */
.css-external-arrow {
    position: relative;
    display: inline-block;
    width: .9em;
    height: .9em;
    flex: 0 0 .9em;
    font-size: 1em;
    line-height: 1;
    vertical-align: -.04em;
}
.css-external-arrow::before {
    content: "";
    position: absolute;
    left: .08em;
    bottom: .16em;
    width: .78em;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: left center;
}
.css-external-arrow::after {
    content: "";
    position: absolute;
    right: .02em;
    top: .02em;
    width: .43em;
    height: .43em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
}
.css-external-arrow-large {
    width: .78em;
    height: .78em;
    vertical-align: .04em;
}

@media (max-width: 768px) {
    /* Marka grubuna sagdaki ANA SAYFA + MENU icin garanti alan birak. */
    .inner-header {
        box-sizing: border-box;
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: 10px;
    }

    .inner-header .inner-brand {
        min-width: 0;
        flex: 1 1 auto;
        gap: 9px !important;
    }

    .inner-header .inner-brand > img:first-child {
        width: 68px !important;
        flex: 0 0 68px;
    }

    .inner-header .inner-brand > .inner-brand-name {
        width: min(32vw, 132px) !important;
        max-width: 132px !important;
        flex: 0 1 132px;
    }

    .inner-header .inner-header-actions {
        flex: 0 0 auto;
        gap: 10px !important;
        margin: 10px 0 0 0 !important;
        white-space: nowrap;
    }

    .inner-header .inner-menu-link,
    .inner-header .inner-menu-button {
        font-size: 7px !important;
        letter-spacing: .12em !important;
        white-space: nowrap;
    }

    .inner-header .inner-menu-link {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
    }

    .inner-header .inner-menu-button {
        gap: 7px !important;
    }

    .inner-header .inner-menu-button span {
        width: 16px !important;
    }

    /* Calismalarimiz sayfasindaki ozel header da ayni mobil olculeri kullansin. */
    .works-page-body .inner-header {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (max-width: 380px) {
    .inner-header .inner-brand > img:first-child {
        width: 60px !important;
        flex-basis: 60px;
    }
    .inner-header .inner-brand > .inner-brand-name {
        width: min(29vw, 112px) !important;
        max-width: 112px !important;
    }
    .inner-header .inner-header-actions {
        gap: 7px !important;
    }
    .inner-header .inner-menu-link,
    .inner-header .inner-menu-button {
        font-size: 6.5px !important;
        letter-spacing: .08em !important;
    }
}

/* =========================================================
   MOBIL HEADER V2 — viewport tasmasini kesin engeller.
   Intro secicilerine dokunmaz.
   ========================================================= */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body:not(:has(#intro)) .inner-header,
    body.works-page-body .inner-header,
    .inner-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .inner-header .inner-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 122px) !important;
        gap: 7px !important;
    }

    .inner-header .inner-brand > img:first-child {
        width: 54px !important;
        max-width: 54px !important;
        flex: 0 0 54px !important;
    }

    .inner-header .inner-brand > .inner-brand-name {
        width: min(29vw, 108px) !important;
        max-width: 108px !important;
        min-width: 0 !important;
        flex: 0 1 108px !important;
    }

    .inner-header .inner-header-actions {
        flex: 0 0 114px !important;
        width: 114px !important;
        min-width: 114px !important;
        max-width: 114px !important;
        margin: 9px 0 0 auto !important;
        gap: 9px !important;
        justify-content: flex-end !important;
        white-space: nowrap !important;
    }

    .inner-header .inner-menu-link,
    .inner-header .inner-menu-button {
        flex: 0 0 auto !important;
        font-size: 6.6px !important;
        line-height: 1.15 !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
    }

    .inner-header .inner-menu-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    /* Ok artik metin/emoji degil, tamamen CSS cizimi. */
    .inner-header .inner-menu-link .css-external-arrow {
        display: none !important;
    }
    .inner-header .inner-menu-link::after {
        content: "" !important;
        display: inline-block !important;
        width: 5px !important;
        height: 5px !important;
        margin-left: 1px !important;
        border-top: 1px solid currentColor !important;
        border-right: 1px solid currentColor !important;
        transform: rotate(-45deg) !important;
        background: transparent !important;
    }

    .inner-header .inner-menu-button {
        gap: 5px !important;
    }
    .inner-header .inner-menu-button span {
        width: 13px !important;
    }

    .inner-page,
    .works-page-body .inner-page.works-page {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 380px) {
    .inner-header .inner-brand > img:first-child {
        width: 50px !important;
        max-width: 50px !important;
        flex-basis: 50px !important;
    }
    .inner-header .inner-brand > .inner-brand-name {
        width: min(27vw, 96px) !important;
        max-width: 96px !important;
    }
    .inner-header .inner-header-actions {
        flex-basis: 108px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        gap: 7px !important;
    }
    .inner-header .inner-menu-link,
    .inner-header .inner-menu-button {
        font-size: 6.2px !important;
        letter-spacing: .055em !important;
    }
}

/* MOBILE FIX: Çalışmalarımız başlığını tek satırda viewport içine sığdır. */
@media (max-width: 768px) {
    .works-page-body .inner-page.works-page h1 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: clamp(30px, 9.2vw, 42px) !important;
        line-height: .88 !important;
        letter-spacing: -.075em !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
}

@media (max-width: 380px) {
    .works-page-body .inner-page.works-page h1 {
        font-size: 8.9vw !important;
    }
}


/* MOBILE WORKS TITLE V2 — explicit class + cache-busted stylesheet */
@media (max-width: 768px) {
  body.works-page-body main.inner-page.works-page h1.works-mobile-title {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    font-size: 10.7vw !important;
    line-height: .88 !important;
    letter-spacing: -.075em !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 390px) {
  body.works-page-body main.inner-page.works-page h1.works-mobile-title {
    font-size: 10.4vw !important;
  }
}

/* =========================================================
   ÇALIŞMALARIMIZ / PORTFÖY — SABİT SATIR ŞABLONLARI
   Medya standardı:
   yatay = 1920x1080 (16:9), dikey = 1080x1920 (9:16)
   Masaüstü şablonları: 2Y, 3Y, 1Y+2D, 2D, 3D, 4D.
   Mobilde bütün satırlar tek kolona dönüşür.
   ========================================================= */
.works-page-body .works-showcase { display:block!important; width:100%; margin-top:70px!important; }
.works-page-body .work-project { width:100%; padding:0 0 clamp(82px,8vw,130px); margin:0 0 clamp(82px,8vw,130px); border-bottom:1px solid rgba(5,5,5,.28); }
.works-page-body .work-project:last-child { margin-bottom:0; }
.works-page-body .work-project-head { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(240px,32%); align-items:end; gap:clamp(22px,3vw,48px); padding-bottom:clamp(26px,3vw,42px); }
.works-page-body .work-project-index { align-self:start; padding-top:5px; font-size:11px; font-weight:800; letter-spacing:.18em; }
.works-page-body .work-project-title p { margin:0 0 13px; font-size:9px; font-weight:800; letter-spacing:.18em; }
.works-page-body .work-project-title h2 { margin:0; max-width:900px; font-size:clamp(54px,6.5vw,104px); line-height:.82; letter-spacing:-.065em; font-weight:900; }
.works-page-body .work-project-desc { max-width:420px; margin:0; font-size:14px; line-height:1.55; }

.works-page-body .work-media-grid { display:flex; flex-direction:column; gap:clamp(10px,1.15vw,18px); }
.works-page-body .work-media-row { display:grid; width:100%; gap:clamp(10px,1.15vw,18px); align-items:start; }
.works-page-body .work-media { min-width:0; margin:0; overflow:hidden; background:#e5dbcd; }
.works-page-body .work-media[data-format="horizontal"] { aspect-ratio:16 / 9; }
.works-page-body .work-media[data-format="vertical"] { aspect-ratio:9 / 16; }
.works-page-body .work-media img,
.works-page-body .work-media video { display:block; width:100%; height:100%; object-fit:cover; }
.works-page-body .work-media img { transition:transform .75s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) { .works-page-body .work-media:hover img { transform:scale(1.012); } }

/* 2 yatay */
.works-page-body .work-media-row-2h { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* 3 yatay */
.works-page-body .work-media-row-3h { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* 1 yatay + 2 dikey: hepsinin yüksekliği matematiksel olarak eşittir.
   16:9 yatayın genişlik katsayısı 256, 9:16 dikeyin katsayısı 81. */
.works-page-body .work-media-row-1h2v { grid-template-columns:minmax(0,256fr) minmax(0,81fr) minmax(0,81fr); }
/* Dikey satırlar */
.works-page-body .work-media-row-2v { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:58%; margin-inline:auto; }
.works-page-body .work-media-row-3v { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:76%; margin-inline:auto; }
.works-page-body .work-media-row-4v { grid-template-columns:repeat(4,minmax(0,1fr)); }

.works-page-body .work-project-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:18px; font-size:8px; font-weight:800; letter-spacing:.16em; }
.works-page-body .work-project-foot > span { opacity:.6; }
.works-page-body .work-project-foot a { color:inherit; text-decoration:none; padding-bottom:5px; border-bottom:1px solid currentColor; }

@media (max-width:768px) {
    .works-page-body .works-showcase { margin-top:50px!important; }
    .works-page-body .work-project { padding-bottom:68px; margin-bottom:68px; }
    .works-page-body .work-project-head { display:block; padding-bottom:25px; }
    .works-page-body .work-project-index { margin-bottom:26px; }
    .works-page-body .work-project-title p { margin-bottom:12px; font-size:8px; line-height:1.45; }
    .works-page-body .work-project-title h2 { font-size:clamp(48px,14.5vw,68px); line-height:.84; }
    .works-page-body .work-project-desc { margin-top:22px; max-width:100%; font-size:13px; }
    .works-page-body .work-media-grid { gap:12px; }
    .works-page-body .work-media-row,
    .works-page-body .work-media-row-2h,
    .works-page-body .work-media-row-3h,
    .works-page-body .work-media-row-1h2v,
    .works-page-body .work-media-row-2v,
    .works-page-body .work-media-row-3v,
    .works-page-body .work-media-row-4v {
        display:flex;
        flex-direction:column;
        width:100%;
        max-width:none;
        margin-inline:0;
        gap:12px;
    }
    .works-page-body .work-media { width:100%; }
    .works-page-body .work-project-foot { padding-top:16px; }
}


/* =========================================================
   ÇALIŞMALAR / PROJE GİRİŞ METNİ — EDİTORYAL SÜTUN STANDARDI
   Masaüstünde açıklama başlık bloğunun yüksekliğinde kalır ve
   metin 2 sütuna akar. Mobilde tek sütun normal metne döner.
   ========================================================= */
.works-showcase .work-project-head {
    align-items: stretch;
}
.works-showcase .work-project-desc {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.works-showcase .work-project-desc-label {
    display: block;
    margin-bottom: 14px;
    padding-top: 2px;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .18em;
}
.works-showcase .work-project-desc p {
    margin: 0;
    font-size: clamp(11px, .82vw, 14px);
    line-height: 1.5;
    column-count: 3;
    column-gap: clamp(18px, 1.8vw, 30px);
    column-fill: balance;
}
@media (max-width: 900px) {
    .works-showcase .work-project-desc {
        overflow: visible;
    }
    .works-showcase .work-project-desc p {
        column-count: 1;
        font-size: 14px;
        line-height: 1.55;
    }
}


/* =========================================================
   ÇALIŞMALAR / PROJE ÜST BANDI — V9 DOĞRU HİZA
   - Başlık soldaki ana görselin SOL başlangıcıyla aynı hizada.
   - Proje açıklaması başlığın sağında ve aradaki boşluk dar.
   - Açıklama 3 sütun.
   ========================================================= */
@media (min-width: 901px) {
    .works-showcase .work-project-head {
        display: grid !important;
        grid-template-columns: minmax(0, 62%) minmax(0, 38%) !important;
        column-gap: clamp(18px, 1.5vw, 28px) !important;
        align-items: start !important;
    }

    .works-showcase .work-project-title {
        grid-column: 1 !important;
        justify-self: start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        text-align: left !important;
    }

    .works-showcase .work-project-desc {
        grid-column: 2 !important;
        justify-self: stretch !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .works-showcase .work-project-desc p {
        column-count: 3 !important;
        column-gap: clamp(14px, 1.25vw, 22px) !important;
    }
}


/* =========================================================
   ÇALIŞMALAR / PROJE AÇIKLAMASI — V10 SABİT YÜKSEKLİK
   Masaüstünde 3 sütunluk metin alanı büyük iki satırlı proje
   başlığının yüksekliğini referans alır. Metin bu alan boyunca
   yukarıdan aşağıya dengeli akar; daha uzun içerik taşamaz.
   ========================================================= */
@media (min-width: 901px) {
    .works-showcase .work-project-head {
        align-items: stretch !important;
    }

    .works-showcase .work-project-desc {
        height: clamp(190px, 15.5vw, 260px) !important;
        max-height: clamp(190px, 15.5vw, 260px) !important;
        overflow: hidden !important;
        align-self: start !important;
    }

    .works-showcase .work-project-desc-label {
        flex: 0 0 auto;
        margin-bottom: 12px !important;
    }

    .works-showcase .work-project-desc p {
        height: calc(100% - 24px) !important;
        column-count: 3 !important;
        column-fill: auto !important;
        column-gap: clamp(18px, 1.5vw, 28px) !important;
        font-size: clamp(11px, .82vw, 14px) !important;
        line-height: 1.48 !important;
        overflow: hidden !important;
    }
}


/* V11 — proje açıklamasının altı büyük başlığın alt hizasını geçmez */
@media (min-width: 901px) {
    .works-showcase .work-project-desc {
        height: clamp(160px, 13vw, 218px) !important;
        max-height: clamp(160px, 13vw, 218px) !important;
    }
    .works-showcase .work-project-desc p {
        height: calc(100% - 23px) !important;
        column-count: 3 !important;
        column-fill: auto !important;
        font-size: clamp(10.5px, .78vw, 13px) !important;
        line-height: 1.44 !important;
        column-gap: clamp(16px, 1.35vw, 24px) !important;
    }
}


/* V12 — açıklama metni masaüstünde fiziksel olarak 3 sütunu doldurur */
@media (min-width: 901px) {
    .works-showcase .work-project-desc p {
        column-count: 3 !important;
        column-fill: auto !important;
        column-gap: clamp(16px, 1.35vw, 24px) !important;
    }
}
\n\n/* =========================================================\n   ADMIN'E HAZIR MEDYA SLOTLARI — V2\n   İçerik metinleri korunur. Boş slotlar ileride admin panelinden\n   görsel veya video ile doldurulur.\n   ========================================================= */\n.admin-media-zone{\n    width:100%;\n    margin:clamp(52px,7vw,100px) 0;\n    display:grid;\n    grid-template-columns:minmax(0,256fr) minmax(0,81fr) minmax(0,81fr);\n    gap:clamp(8px,1vw,16px);\n    align-items:start;\n}\n.admin-media-slot{\n    position:relative;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:center;\n    border:1px solid rgba(5,5,5,.28);\n    background:rgba(5,5,5,.025);\n    overflow:hidden;\n    text-align:center;\n    color:rgba(5,5,5,.48);\n}\n.admin-media-horizontal{aspect-ratio:16/9}\n.admin-media-vertical{aspect-ratio:9/16}\n.admin-media-slot span{font-size:9px;font-weight:800;letter-spacing:.16em}\n.admin-media-slot small{margin-top:8px;font-size:8px;letter-spacing:.12em}\n.admin-media-slot img,.admin-media-slot video{width:100%;height:100%;object-fit:cover;display:block}\n.admin-media-zone-contact{grid-template-columns:minmax(0,256fr) minmax(0,81fr)}\n@media(max-width:768px){\n    .admin-media-zone,.admin-media-zone-contact{grid-template-columns:1fr;margin:42px 0;gap:12px}\n    .admin-media-slot{width:100%}\n}\n
/* SAYFALAR CMS — mevcut Biz Kimiz tasarımını korur */
.cms-full-blocks{margin:clamp(24px,4vw,60px) 0}.cms-text-block{display:block}.cms-inline-media{width:100%;margin:clamp(18px,2.5vw,34px) 0;overflow:hidden}.cms-inline-media.horizontal{aspect-ratio:16/9}.cms-inline-media.vertical{aspect-ratio:9/16;max-width:min(100%,430px)}.cms-inline-media img,.cms-inline-media video{width:100%;height:100%;object-fit:cover;display:block}.cms-full-blocks .cms-inline-media.vertical{max-width:430px}.cms-full-blocks .cms-inline-media.horizontal{max-width:none}

/* CMS sayfaları: içerik blokları arasındaki otomatik ayırıcı çizgi */
[data-page-left]>.cms-content-block+[class*=cms-content-block],
[data-page-right]>.cms-content-block+[class*=cms-content-block],
[data-page-full]>.cms-content-block+[class*=cms-content-block]{border-top:1px solid rgba(5,5,5,.14);margin-top:clamp(18px,2.2vw,30px);padding-top:clamp(18px,2.2vw,30px)}
.cms-text-block>p:first-child{margin-top:0}.cms-text-block>p:last-child{margin-bottom:0}


/* SAYFALAR CMS — medya görünüm boyutu standardı V6
   Kaynak dosya yüksek çözünürlüklü olabilir; sayfadaki fiziksel boyutu şablon belirler. */
[data-page-left] .cms-inline-media,
[data-page-right] .cms-inline-media{
    width:100%;
    max-width:100%;
}
[data-page-left] .cms-inline-media.horizontal,
[data-page-right] .cms-inline-media.horizontal{
    aspect-ratio:16/9;
}
[data-page-left] .cms-inline-media.vertical,
[data-page-right] .cms-inline-media.vertical{
    width:min(62%, 300px);
    max-width:300px;
    aspect-ratio:9/16;
}
[data-page-full] .cms-inline-media.horizontal{
    width:min(100%, 920px);
    margin-left:auto;
    margin-right:auto;
}
[data-page-full] .cms-inline-media.vertical{
    width:min(42%, 360px);
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
}
@media(max-width:768px){
    [data-page-left] .cms-inline-media.vertical,
    [data-page-right] .cms-inline-media.vertical,
    [data-page-full] .cms-inline-media.vertical{
        width:min(76vw, 300px);
    }
}

/* İLETİŞİM — CMS ile yönetilen sabit şablon */
.contact-page .contact-kicker{margin-top:48px;padding:22px 0;border-top:1px solid rgba(5,5,5,.18);border-bottom:1px solid rgba(5,5,5,.18);font-size:10px;font-weight:800;letter-spacing:.14em}.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(55px,9vw,150px);margin-top:70px}.contact-intro{font-size:clamp(34px,4vw,62px);line-height:1.02;letter-spacing:-.05em;margin:0;max-width:12em}.contact-details{display:grid}.contact-details>div{padding:22px 0;border-top:1px solid rgba(5,5,5,.18)}.contact-details small{display:block;font-size:8px;font-weight:800;letter-spacing:.16em;margin-bottom:14px}.contact-details a,.contact-details p{color:#050505;text-decoration:none;font-size:clamp(22px,2.2vw,34px);line-height:1.1;margin:0}.contact-details>div:has(a[hidden]){display:none}.contact-socials{display:flex;gap:30px;margin:70px 0 20px;padding-top:22px;border-top:1px solid rgba(5,5,5,.18)}.contact-socials a{color:#050505;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.12em}.menu-social a{color:inherit;text-decoration:none}@media(max-width:768px){.contact-layout{grid-template-columns:1fr;gap:45px;margin-top:45px}.contact-intro{font-size:clamp(34px,10vw,52px)}.contact-socials{margin-top:45px;flex-wrap:wrap}}

/* V11 — düzenli editoryal proje galerisi */
.works-page-body .work-media-row-single{grid-template-columns:1fr}.works-page-body .work-media-row-single .work-media[data-format="vertical"]{width:min(42%,520px);justify-self:center}.works-page-body .work-media-row-2v1h{grid-template-columns:minmax(0,81fr) minmax(0,81fr) minmax(0,256fr)}
@media(max-width:760px){.works-page-body .work-media-row-single,.works-page-body .work-media-row-2v1h{grid-template-columns:1fr}.works-page-body .work-media-row-single .work-media[data-format="vertical"]{width:100%}}

/* V11 — admin canlı önizlemesi ile aynı editoryal grid */
.works-page-body .work-media-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.15vw,18px)}
.works-page-body .work-media-grid>.editorial-item{grid-column:span 6}
.works-page-body .work-media-grid>.editorial-item[data-format="vertical"]{grid-column:span 3}
.works-page-body .work-media-grid>.editorial-item.editorial-feature{grid-column:span 12}
@media(max-width:760px){.works-page-body .work-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.works-page-body .work-media-grid>.editorial-item,.works-page-body .work-media-grid>.editorial-item[data-format="vertical"]{grid-column:span 1}.works-page-body .work-media-grid>.editorial-item[data-format="horizontal"],.works-page-body .work-media-grid>.editorial-item.editorial-feature{grid-column:span 2}}
/* V13: admin satır düzeniyle birebir proje galerisi */
.works-page-body .work-media-grid{display:flex!important;flex-direction:column;gap:clamp(10px,1.15vw,18px)}
.works-page-body .work-media-row{display:flex;width:100%;gap:clamp(10px,1.15vw,18px);align-items:stretch;justify-content:flex-start}
.works-page-body .work-media-row .work-media{flex:var(--media-weight) 1 0;min-width:0;height:clamp(240px,29vw,470px);margin:0;overflow:hidden}
.works-page-body .work-media-row .work-media img,.works-page-body .work-media-row .work-media video{display:block;width:100%;height:100%;object-fit:cover}
.works-page-body .work-media-row.count-1 .work-media{flex:none}
.works-page-body .work-media-row.count-1 .work-media[data-format="horizontal"]{width:100%;height:auto;aspect-ratio:16/9}
.works-page-body .work-media-row.count-1 .work-media[data-format="vertical"]{width:min(30%,360px);height:auto;aspect-ratio:9/16}
.works-page-body .work-media-row.all-vertical{justify-content:flex-start}
.works-page-body .work-media-row.all-vertical .work-media{flex:none;width:min(25%,300px);height:auto;aspect-ratio:9/16}
.works-page-body .work-media-row.all-vertical.count-3 .work-media{width:min(23%,280px)}
@media(max-width:760px){.works-page-body .work-media-row{gap:8px}.works-page-body .work-media-row .work-media{height:clamp(150px,38vw,240px)}.works-page-body .work-media-row.all-vertical .work-media,.works-page-body .work-media-row.all-vertical.count-3 .work-media{flex:1 1 0;width:auto;height:auto;aspect-ratio:9/16}.works-page-body .work-media-row.count-1 .work-media[data-format="vertical"]{width:min(68%,330px)}}

/* V14 — doğal oranlı portfolyo galerisi: satırı doldurmaya zorlama, dikeyleri sınırlı tut */
.works-page-body .work-media-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(10px,1.15vw,18px);
  width:100%;
}
.works-page-body .work-media-row .work-media{
  flex:0 1 auto;
  min-width:0;
  height:auto;
  margin:0;
  overflow:hidden;
}
.works-page-body .work-media-row .work-media[data-format="horizontal"]{
  width:min(100%,560px);
  max-width:560px;
  aspect-ratio:16/9;
}
.works-page-body .work-media-row .work-media[data-format="vertical"]{
  width:min(24vw,300px);
  max-width:300px;
  aspect-ratio:9/16;
}
.works-page-body .work-media-row .work-media img,
.works-page-body .work-media-row .work-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Bir satırdaki elemanlar toplam genişliğe sığmazsa oranları birlikte küçült; büyütme yok. */
.works-page-body .work-media-row.count-2 .work-media[data-format="horizontal"],
.works-page-body .work-media-row.count-3 .work-media[data-format="horizontal"]{max-width:min(560px,46vw)}
.works-page-body .work-media-row.count-3 .work-media[data-format="vertical"]{max-width:min(300px,21vw)}
.works-page-body .work-media-row.all-vertical .work-media,
.works-page-body .work-media-row.all-vertical.count-3 .work-media,
.works-page-body .work-media-row.count-1 .work-media[data-format="vertical"]{
  flex:0 1 auto;
  width:min(24vw,300px);
  max-width:300px;
  height:auto;
  aspect-ratio:9/16;
}
.works-page-body .work-media-row.count-1 .work-media[data-format="horizontal"]{
  flex:0 1 auto;
  width:min(100%,760px);
  max-width:760px;
  height:auto;
  aspect-ratio:16/9;
}
@media(max-width:760px){
  .works-page-body .work-media-row{gap:8px;flex-wrap:wrap}
  .works-page-body .work-media-row .work-media[data-format="horizontal"],
  .works-page-body .work-media-row.count-2 .work-media[data-format="horizontal"],
  .works-page-body .work-media-row.count-3 .work-media[data-format="horizontal"]{width:min(100%,520px);max-width:100%;height:auto;aspect-ratio:16/9}
  .works-page-body .work-media-row .work-media[data-format="vertical"],
  .works-page-body .work-media-row.all-vertical .work-media,
  .works-page-body .work-media-row.all-vertical.count-3 .work-media,
  .works-page-body .work-media-row.count-1 .work-media[data-format="vertical"],
  .works-page-body .work-media-row.count-3 .work-media[data-format="vertical"]{width:min(62vw,280px);max-width:280px;height:auto;aspect-ratio:9/16;flex:0 1 auto}
}

/* V15 — yalnızca gerçekten oturan karma satırları tam genişlik + eşit yükseklik yap */
@media (min-width:761px){
  .works-page-body .work-media-row.smart-fit{align-items:flex-start}
  .works-page-body .work-media-row.smart-fit .work-media{
    flex:none;
    height:var(--smart-row-height);
    max-width:none;
    width:auto;
    aspect-ratio:auto;
  }
  .works-page-body .work-media-row.smart-fit .work-media[data-format="vertical"]{
    width:calc(var(--smart-row-height) * .5625);
    max-width:300px;
  }
  .works-page-body .work-media-row.smart-fit .work-media[data-format="horizontal"]{
    width:calc(var(--smart-row-height) * 1.7777778);
    max-width:900px;
  }
  .works-page-body .work-media-row.smart-fit .work-media img,
  .works-page-body .work-media-row.smart-fit .work-media video{width:100%;height:100%;object-fit:cover}
}


/* V16 — 5 medyaya kadar satır + kontrollü dikey boyut */
@media (min-width:761px){
  .works-page-body .work-media-row.all-vertical.count-4 .work-media{width:min(20vw,250px);max-width:250px}
  .works-page-body .work-media-row.all-vertical.count-5 .work-media{width:min(17vw,220px);max-width:220px}
}
/* V18 — admin serbest yerlesiminin birebir public karsiligi */
.works-page-body .work-media-grid:has(.work-free-layout){display:block!important}
.works-page-body .work-free-layout{position:relative;width:100%;height:0;padding-top:var(--layout-height);overflow:hidden}
.works-page-body .work-free-item{position:absolute;margin:0;overflow:hidden;background:#e5dbcd}
.works-page-body .work-free-item img,.works-page-body .work-free-item video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.works-page-body .work-free-layout{min-height:0}}
/* V18 — admin serbest yerlesiminin birebir public karsiligi */
.works-page-body .work-media-grid:has(.work-free-layout){display:block!important}
.works-page-body .work-free-layout{position:relative;width:100%;height:0;padding-top:var(--layout-height);overflow:hidden}
.works-page-body .work-free-item{position:absolute;margin:0;overflow:hidden;background:#e5dbcd}
.works-page-body .work-free-item img,.works-page-body .work-free-item video{display:block;width:100%;height:100%;object-fit:cover}
/* V19 saved free-layout canvas */
.works-page-body .work-free-layout.v2{position:relative;width:100%;height:auto!important;padding-top:105%!important;overflow:hidden}
/* V19 saved free-layout canvas */
.works-page-body .work-free-layout.v2{position:relative;width:100%;height:auto!important;padding-top:105%!important;overflow:hidden}

/* V23 — Mobil galeri: masaüstü serbest tuvalden bağımsız, daima tek sütun. */
.works-page-body .work-mobile-layout{display:none}
@media(max-width:760px){
  .works-page-body .work-free-layout.v2,
  .works-page-body .work-desktop-fallback{display:none!important}
  .works-page-body .work-mobile-layout{display:flex;flex-direction:column;gap:14px;width:100%}
  .works-page-body .work-mobile-item{margin:0;overflow:hidden;background:#e5dbcd}
  .works-page-body .work-mobile-item[data-format="horizontal"]{width:100%;aspect-ratio:16/9}
  .works-page-body .work-mobile-item[data-format="vertical"]{width:min(78%,330px);aspect-ratio:9/16;align-self:center}
  .works-page-body .work-mobile-item>img,
  .works-page-body .work-mobile-item>video,
  .works-page-body .work-mobile-item>.minimal-video-player{display:block;width:100%;height:100%;object-fit:cover}
}