@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root{
    --bg:#10100f;
    --ink:#ede9df;
    --muted:#aaa69c;
    --line:rgba(237,233,223,.18);
    --paper:#e9e5db;
    --edge:clamp(20px,4vw,64px)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Manrope,Arial,sans-serif;
    overflow-x:hidden
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    opacity:.055;
    pointer-events:none;
    z-index:20;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.site-header{
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    height:88px;
    padding:calc(14px + env(safe-area-inset-top)) var(--edge) 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid transparent;
    transition:.3s
}

.site-header.scrolled{
    background:rgba(16,16,15,.74);
    backdrop-filter:blur(14px);
    border-color:var(--line)
}

.brand{
    height:45px;
    max-width:140px;
    display:block;
    color:var(--ink);
    text-decoration:none
}

.brand img{
    width:auto;
    height:100%;
    max-width:140px;
    object-fit:contain;
    display:block
}

.brand-fallback{
    font:700 11px/10px 'DM Mono',monospace;
    letter-spacing:1.2px;
    display:none
}

.desktop-nav{
    display:flex;
    gap:28px
}

.desktop-nav a,
.text-link,
footer a{
    color:inherit;
    text-decoration:none;
    font-size:12px;
    letter-spacing:.04em;
    position:relative
}

.desktop-nav a:after,
.text-link:after{
    content:"";
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:1px;
    background:currentColor;
    transition:.25s
}

.desktop-nav a:hover:after,
.text-link:hover:after{
    width:100%
}

.menu-toggle{
    border:0;
    background:none;
    color:var(--ink);
    display:none;
    gap:5px;
    align-items:center;
    cursor:pointer
}

.menu-toggle span{
    display:block;
    width:23px;
    height:1px;
    background:currentColor
}

.menu-toggle i{
    font:11px Manrope,sans-serif;
    margin-left:8px;
    font-style:normal
}

.hero{
    min-height:100svh;
    display:grid;
    grid-template-columns:55% 45%;
    position:relative;
    padding:0 var(--edge)
}

.hero-image{
    position:absolute;
    inset:0 0 0 45%;
    overflow:hidden;
    z-index:-1
}

.hero-image:after,
.contact-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,var(--bg),transparent 55%),
        linear-gradient(0deg,rgba(16,16,15,.5),transparent)
}

.hero-image img,
.contact-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.3);
    animation:enter 1.3s ease both
}

.hero-copy{
    align-self:center;
    max-width:660px;
    padding-top:70px
}

.eyebrow{
    font:10px 'DM Mono',monospace;
    letter-spacing:.12em;
    color:var(--muted);
    margin:0 0 26px
}

.hero h1,
.section h2{
    font:500 clamp(48px,7.5vw,124px)/.88 'Playfair Display',serif;
    letter-spacing:-.06em;
    margin:0
}

.hero h1 em{
    font-weight:500
}

.hero-text{
    font-size:16px;
    line-height:1.65;
    max-width:360px;
    color:#c3c0b7;
    margin:38px 0
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:28px
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    min-height:52px;
    padding:0 20px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-decoration:none;
    transition:transform .2s,background .2s
}

.button:hover{
    transform:translateY(-3px)
}

.button-light{
    background:var(--paper);
    color:#161614
}

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

.hero-meta{
    position:absolute;
    bottom:26px;
    left:var(--edge);
    right:var(--edge);
    display:flex;
    justify-content:space-between;
    font:10px 'DM Mono',monospace;
    color:var(--muted)
}

.section{
    padding:clamp(90px,13vw,200px) var(--edge)
}

.intro{
    display:grid;
    grid-template-columns:40% 1fr;
    border-top:1px solid var(--line)
}

.intro>div{
    max-width:640px
}

.intro h2{
    font-size:clamp(48px,6.5vw,105px)
}

.intro p:not(.eyebrow),
.about p:not(.eyebrow),
.contact-copy>p:not(.eyebrow){
    max-width:420px;
    color:#bbb7ae;
    line-height:1.75;
    font-size:15px;
    margin:34px 0
}

.services{
    padding-top:0
}

.service{
    min-height:155px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:18% 1fr auto;
    align-items:center;
    gap:20px
}

.service:last-child{
    border-bottom:1px solid var(--line)
}

.service span{
    font:11px 'DM Mono',monospace;
    color:var(--muted)
}

.service h3{
    font:500 clamp(27px,3.8vw,55px)/1 'Playfair Display',serif;
    margin:0
}

.service p{
    font-size:13px;
    color:var(--muted);
    margin:12px 0 0
}

.service i{
    font-size:25px;
    font-style:normal
}

.works{
    background:#171715
}

.section-heading{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    align-items:end;
    margin-bottom:70px
}

.section-heading h2{
    font-size:clamp(50px,6vw,100px)
}

.section-heading .text-link{
    justify-self:end
}

.masonry{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:start;
}

.work{
    padding:0;
    border:0;
    color:var(--ink);
    background:none;
    text-align:left;
    cursor:pointer;
    overflow:hidden
}

.work img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.45);
    transition:transform .6s,filter .5s
}

.work:hover img{
    transform:scale(1.04);
    filter:grayscale(0)
}

.work span{
    display:block;
    font:10px 'DM Mono',monospace;
    color:var(--muted);
    padding-top:12px
}

.about{
    display:grid;
    grid-template-columns:40% 1fr;
    background:var(--paper);
    color:#171715
}

.about h2{
    font-size:clamp(48px,6vw,100px)
}

.about p:not(.eyebrow){
    color:#45423d
}

.contact{
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:720px
}

.contact-image{
    position:relative;
    overflow:hidden
}

.contact-image:after{
    background:linear-gradient(0deg,rgba(16,16,15,.3),transparent)
}

.contact-image img{
    object-position:64% center
}

.contact-copy{
    padding:clamp(80px,11vw,160px) var(--edge);
    display:flex;
    flex-direction:column;
    justify-content:center
}

.contact-copy h2{
    font-size:clamp(50px,6.2vw,104px)
}

.contact-links{
    margin-top:68px;
    border-top:1px solid var(--line)
}

.contact-links a{
    display:block;
    color:inherit;
    text-decoration:none;
    padding:17px 0;
    border-bottom:1px solid var(--line)
}

.contact-links small{
    display:block;
    color:var(--muted);
    font:9px 'DM Mono',monospace;
    margin-bottom:6px
}

.contact-links strong{
    font-size:13px;
    font-weight:500
}

footer{
    padding:25px var(--edge) calc(25px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font:10px 'DM Mono',monospace
}

/* SABİT INSTAGRAM + WHATSAPP BUTONLARI */
.floating-actions{
    position:fixed;
    z-index:9;
    right:max(20px,calc(env(safe-area-inset-right) + 16px));
    bottom:max(22px,calc(env(safe-area-inset-bottom) + 18px));

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:15px;
}

.float{
    min-width:158px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 8px 28px #0006;
    color:var(--ink);
    text-decoration:none;
    border-radius:99px;
    transition:.25s;
    position:relative
}

.float:hover{
    transform:translateY(-3px) scale(1.04)
}

.float b{
    font-size:21px;
    font-weight:400
}

.float svg{
    width:23px;
    height:23px;
    fill:currentColor
}

.float span{
    position:static;
    opacity:1;
    white-space:nowrap;
    background:transparent;
    color:inherit;
    padding:0;
    font:10px Manrope,sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    pointer-events:auto;
    transition:.2s
}

.phone{
    display:none
}

.whatsapp{
    background:#285a42
}

/* INSTAGRAM BUTONU */
.instagram{
    background:#262522
}

.menu-panel{
    position:fixed;
    z-index:30;
    inset:0 0 0 auto;
    width:min(600px,100%);
    background:#e9e5db;
    color:#141412;
    padding:calc(28px + env(safe-area-inset-top)) var(--edge) 32px;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.77,0,.18,1);
    display:flex;
    flex-direction:column
}

.menu-panel.open{
    transform:none
}

.menu-panel nav{
    margin:auto 0
}

.menu-panel nav a{
    display:block;
    color:inherit;
    text-decoration:none;
    font:500 clamp(42px,9vw,90px)/1 'Playfair Display',serif;
    letter-spacing:-.06em;
    margin:12px 0
}

.menu-close{
    align-self:flex-end;
    border:0;
    background:transparent;
    font:42px/1 Arial;
    cursor:pointer
}

.menu-backdrop{
    position:fixed;
    z-index:29;
    inset:0;
    background:#0008;
    opacity:0;
    visibility:hidden;
    transition:.35s
}

.menu-backdrop.show{
    opacity:1;
    visibility:visible
}

.lightbox{
    border:0;
    background:#0c0c0b;
    color:white;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    padding:0
}

.lightbox::backdrop{
    background:#000
}

.lightbox img{
    width:100%;
    height:100%;
    object-fit:contain
}

.lightbox button{
    position:absolute;
    z-index:1;
    color:white;
    border:1px solid #ffffff55;
    background:#171715aa;
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:24px;
    cursor:pointer
}

.lightbox-close{
    top:max(24px,env(safe-area-inset-top));
    right:24px
}

.lightbox-prev{
    top:50%;
    left:24px
}

.lightbox-next{
    top:50%;
    right:24px
}

.lightbox p{
    position:absolute;
    bottom:25px;
    left:0;
    right:0;
    text-align:center;
    font:10px 'DM Mono',monospace
}

.reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease,transform .6s ease
}

.reveal.visible{
    opacity:1;
    transform:none
}

@keyframes enter{
    from{
        transform:scale(1.06)
    }

    to{
        transform:scale(1)
    }
}

/* MOBİL */
@media(max-width:700px){

    .site-header{
        height:84px;
        padding:calc(10px + env(safe-area-inset-top)) 20px 10px
    }

    .brand{
        height:46px;
        max-width:146px
    }

    .brand img{
        max-width:146px
    }

    .desktop-nav{
        display:none
    }

    .menu-toggle{
        display:flex
    }

    .hero{
        display:block;
        padding:0 20px;
        min-height:100svh
    }

    .hero-image{
        inset:0;
        opacity:.58
    }

    .hero-image:after{
        background:
            linear-gradient(90deg,rgba(16,16,15,.75),rgba(16,16,15,.15)),
            linear-gradient(0deg,var(--bg),transparent 45%)
    }

    .hero-copy{
        padding-top:calc(140px + env(safe-area-inset-top));
        max-width:370px
    }

    .hero h1{
        font-size:clamp(31px,9.1vw,39px);
        line-height:1.04;
        letter-spacing:-.045em
    }

    .hero h1 em{
        font-size:clamp(31px,9.1vw,39px);
        line-height:1.05;
        margin-top:7px
    }

    .hero-text{
        font-size:15px;
        margin:27px 0 32px
    }

    .hero-actions{
        display:grid;
        gap:18px;
        align-items:start
    }

    .hero-actions .button{
        width:max-content;
        min-height:52px
    }

    .hero-meta{
        left:20px;
        right:20px;
        bottom:20px;
        font-size:8px
    }

    .hero-meta span:last-child{
        max-width:150px;
        text-align:right
    }

    .section{
        padding:90px 20px
    }

    .intro,
    .about{
        display:block
    }

    .intro .eyebrow,
    .about .eyebrow{
        margin-bottom:54px
    }

    .intro h2,
    .about h2{
        font-size:clamp(48px,13vw,68px)
    }

    .intro p:not(.eyebrow),
    .about p:not(.eyebrow),
    .contact-copy>p:not(.eyebrow){
        font-size:15px;
        margin:26px 0
    }

    .services{
        padding-top:0
    }

    .service{
        min-height:142px;
        grid-template-columns:32px 1fr 20px;
        gap:12px
    }

    .service h3{
        font-size:32px
    }

    .service p{
        font-size:12px;
        line-height:1.5
    }

    .section-heading{
        display:block;
        margin-bottom:42px
    }

    .section-heading h2{
        font-size:clamp(50px,14vw,72px);
        margin-bottom:30px
    }

    .section-heading .text-link{
        display:inline-block
    }

    .masonry{
        gap:14px
    }

    .work-a{height:330px}

    .work-b{
        height:260px;
        margin-top:46px
    }

    .work-c{
        height:245px;
        margin-top:-60px
    }

    .work-d{
        height:350px;
        margin-top:0
    }

    .work-e{
        height:250px;
        margin-top:12px
    }

    .work-f{
        height:230px;
        margin-top:-40px
    }

    .work-g{
        height:340px;
        margin-top:0
    }

    .work-h{
        height:290px;
        margin-top:-32px
    }

    .work-i{
        height:275px;
        margin-top:8px
    }

    .work-j{
        height:355px;
        margin-top:-20px
    }

    .work span{
        font-size:8px;
        padding-top:8px
    }

    .contact{
        display:flex;
        flex-direction:column;
        min-height:0
    }

    .contact-image{
        height:350px
    }

    .contact-copy{
        padding:80px 20px 118px
    }

    .contact-copy h2{
        font-size:clamp(52px,14vw,76px)
    }

    .contact-links{
        margin-top:45px
    }

    .floating-actions{
        right:18px;
        bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));
        gap:12px;
    }

    .float{
        min-width:174px;
        height:58px
    }

    footer{
        padding:20px;
        gap:15px;
        flex-wrap:wrap;
        font-size:8px
    }

    .lightbox-prev{
        left:14px
    }

    .lightbox-next{
        right:14px
    }

    .menu-panel nav a{
        font-size:clamp(44px,14vw,64px)
    }

    .header-tools{
        gap:14px
    }

    .language-switch{
        gap:7px
    }

    .seo-copy{
        margin:0
    }

    .seo-copy h2,
    .faq h2{
        font-size:clamp(39px,11vw,60px)
    }

    .seo-copy p{
        font-size:15px
    }

    .faq-list{
        margin-top:36px
    }

    .faq summary{
        font-size:14px;
        line-height:1.5;
        padding-right:28px
    }

    .artists .section-heading{
        display:block;
        margin-bottom:38px
    }

    .artists .section-heading h2{
        font-size:clamp(47px,13vw,64px);
        margin-bottom:22px
    }

    .artists .section-heading>p:last-child{
        font-size:14px
    }

    .artist-grid{
        grid-template-columns:1fr;
        gap:38px
    }

    .artist-image{
        aspect-ratio:4/4.7
    }

    .artist-card h3{
        font-size:34px
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *:before,
    *:after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        transition-duration:.01ms!important
    }
}

/* Production additions retain the editorial layout while keeping long-form content compact. */

.header-tools{
    display:flex;
    align-items:center;
    gap:22px
}

.language-switch{
    display:flex;
    gap:8px;
    font:10px 'DM Mono',monospace
}

.language-switch button{
    border:0;
    background:transparent;
    color:var(--muted);
    padding:4px 0;
    cursor:pointer
}

.language-switch button.active{
    color:var(--ink);
    border-bottom:1px solid currentColor
}

.seo-section{
    background:#171715;
    padding-top:clamp(90px,11vw,150px);
    padding-bottom:clamp(90px,11vw,150px)
}

.seo-copy{
    max-width:760px;
    margin-left:auto
}

.seo-copy h2,
.faq h2{
    font:500 clamp(38px,5vw,76px)/.96 'Playfair Display',serif;
    letter-spacing:-.055em;
    margin:0 0 32px
}

.seo-copy p{
    max-width:650px;
    color:#bbb7ae;
    font-size:15px;
    line-height:1.8;
    margin:0 0 18px
}

.faq{
    background:var(--paper);
    color:#171715
}

.faq>div{
    max-width:940px
}

.faq-list{
    border-top:1px solid rgba(23,23,21,.24);
    margin-top:50px
}

.faq details{
    border-bottom:1px solid rgba(23,23,21,.24);
    padding:20px 0
}

.faq summary{
    cursor:pointer;
    list-style:none;
    font-size:15px;
    font-weight:600;
    padding-right:32px;
    position:relative
}

.faq summary:after{
    content:'+';
    position:absolute;
    right:4px;
    font:24px/16px 'DM Mono',monospace
}

.faq details[open] summary:after{
    content:'–'
}

.faq details p{
    color:#55524b;
    font-size:14px;
    line-height:1.7;
    max-width:620px;
    margin:14px 0 2px
}

.brand-fallback{
    display:none
}

.brand img{
    object-fit:contain
}

button:focus-visible,
a:focus-visible,
summary:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:4px
}

.menu-panel button:focus-visible{
    outline-color:#171715
}

/* Artist section */

.site-header{
    height:102px
}

.brand{
    height:58px;
    max-width:182px
}

.brand img{
    max-width:182px
}

.hero h1{
    font:600 clamp(42px,5.6vw,88px)/.98 Manrope,Arial,sans-serif;
    letter-spacing:-.055em;
    max-width:760px
}

.hero h1 span,
.hero h1 em{
    display:block
}

.hero h1 em{
    font:500 clamp(36px,4.7vw,76px)/1.04 'Playfair Display',serif;
    letter-spacing:-.045em;
    margin-top:10px
}

.artists{
    padding-top:clamp(90px,12vw,170px);
    padding-bottom:clamp(90px,12vw,170px);
    background:#121210
}

.artists .section-heading{
    grid-template-columns:1fr 1fr;
    margin-bottom:58px
}

.artists .section-heading h2{
    font-size:clamp(49px,6vw,96px)
}

.artists .section-heading>p:last-child{
    justify-self:end;
    align-self:end;
    max-width:260px;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
    margin:0
}

.artist-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(16px,2.6vw,42px)
}

.artist-image{
    aspect-ratio:4/5;
    overflow:hidden;
    background:#1c1b19
}

.artist-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.2);
    transition:transform .6s ease,filter .5s
}

.artist-card:hover img{
    transform:scale(1.035);
    filter:grayscale(0)
}

.artist-card>p{
    margin:15px 0 8px;
    color:var(--muted);
    font:10px 'DM Mono',monospace;
    letter-spacing:.08em
}

.artist-card h3{
    margin:0;
    font:500 clamp(25px,2.6vw,40px)/1 'Playfair Display',serif;
    letter-spacing:-.04em
}

/* Expanded real-work portfolio */

.work-e{
    height:clamp(250px,38vw,560px);
    margin-top:3%
}

.work-f{
    height:clamp(260px,40vw,570px);
    margin-top:-9%
}

.work-g{
    height:clamp(360px,54vw,790px);
    margin-top:9%
}

.work-h{
    height:clamp(300px,45vw,650px);
    margin-top:-3%
}

.work-i{
    height:clamp(300px,44vw,640px);
    margin-top:2%
}

.work-j{
    height:clamp(390px,56vw,800px);
    margin-top:-6%
}

.work img{
    filter:grayscale(.26)
}

/* MOBİL DÜZELTMELERİ */
@media(max-width:700px){

    /* SANATÇILARIMIZ - TEK TEK VE BÜYÜK */
    .artist-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:38px !important;
    }

    .artist-card{
        width:100% !important;
    }

    .artist-image{
        width:100% !important;
        aspect-ratio:4/4.7 !important;
    }

    /* ÇALIŞMALAR - GÖRSELLER BİRBİRİNE GİRMESİN */
    .masonry{
        gap:18px !important;
    }

    .work{
        margin-top:0 !important;
    }

    .work-a{
        height:330px !important;
    }

    .work-b{
        height:260px !important;
    }

    .work-c{
        height:245px !important;
    }

    .work-d{
        height:350px !important;
    }

    .work-e{
        height:250px !important;
    }

    .work-f{
        height:230px !important;
    }

    .work-g{
        height:340px !important;
    }

    .work-h{
        height:290px !important;
    }

    .work-i{
        height:275px !important;
    }

    .work-j{
        height:355px !important;
    }
}