:root{--v:1vh;--krem:#f5eeda;--kahve:#402d1d;--altin:#ccac65;--kenar:clamp(16px,4vw,64px);--h:min(calc(32*var(--v)),42vw);
  --govde:"Jost",system-ui,sans-serif;--serif:"Newsreader",Georgia,serif;--egri:cubic-bezier(.2,.7,.1,1)}
@supports(height:1svh){:root{--v:1svh}}
*{box-sizing:border-box;margin:0}
html{background:var(--krem);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--krem);color:var(--kahve);font-family:var(--govde);font-weight:400;font-size:17px;line-height:1.55;overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
svg{display:block;fill:currentColor}
:focus-visible{outline:2px solid var(--altin);outline-offset:3px}
.etiket{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}

.atla{position:fixed;left:12px;top:-60px;z-index:60;background:var(--kahve);color:var(--krem);padding:10px 16px;transition:top .2s}
.atla:focus{top:12px}

/* Üst menü */
.ust-menu{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px var(--kenar);color:var(--kahve);transition:color .35s,background-color .35s}
.ust-menu.zemin{background:var(--krem)}
.ust-menu.krem{color:var(--krem)}
.ust-menu.krem.zemin{background:var(--kahve)}
section[id]{scroll-margin-top:84px}
.ust-menu nav{display:flex;gap:clamp(14px,2.4vw,36px);font-size:14px;letter-spacing:.06em}
.ust-menu nav a{position:relative;padding:6px 0}
.ust-menu nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--egri)}
.ust-menu nav a:hover::after{transform:scaleX(1)}
.ust-menu .imza{width:34px;height:34px}
@media(max-width:560px){.ust-menu nav .gizle{display:none}}
.ust-menu{transition:color .35s,background-color .35s,opacity .25s}
@media(max-width:1000px){.ust-menu.gecis{opacity:0;pointer-events:none}}

/* Açılış: logonun çizgisi ikiye ayrılır, mekân aradan açılır */
.acilis{height:calc(100*var(--v));position:relative}
.js .acilis{height:calc(280*var(--v))}
.sahne{position:sticky;top:0;height:calc(100*var(--v));overflow:hidden;background:var(--krem)}
.foto{position:absolute;inset:0}
.foto img{transform:scale(1.14)}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(64,45,29,.72),rgba(64,45,29,0) 16%),linear-gradient(to top,rgba(64,45,29,.82),rgba(64,45,29,.05) 58%)}
.perde{position:absolute;left:0;right:0;height:calc(50% + 1px);background:var(--krem)}
.perde.a{bottom:50%}.perde.b{top:50%}
.cizgi{position:absolute;left:0;right:0;top:50%;height:calc(var(--h)*.042);margin-top:calc(var(--h)*-.021);background:var(--kahve)}
.yarim{position:absolute;left:var(--kenar);right:var(--kenar);display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
.yarim svg{height:var(--h);width:calc(var(--h)*2.08)}
.yarim.ust{bottom:50%;padding-bottom:calc(var(--h)*.15);align-items:end}
.yarim.alt{top:50%;padding-top:calc(var(--h)*.15);align-items:start}
.yarim.alt svg{width:calc(var(--h)*2.115)}
.yarim .sag{justify-self:end;text-align:right}
.slogan{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.9vw,30px);line-height:1.15}
.son-soz{position:absolute;left:var(--kenar);right:var(--kenar);bottom:clamp(28px,calc(7*var(--v)),72px);color:var(--krem);opacity:0;transform:translateY(60px);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.son-soz h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,6.2vw,100px);line-height:1;letter-spacing:-.02em;max-width:12ch}
.son-soz h1 em{font-weight:300}
.son-soz p{max-width:34ch;font-size:16px}
@media(max-width:1000px){
  .yarim{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .yarim.ust .sol{order:-1}.yarim .bos{display:none}.yarim .sag{justify-self:center;text-align:center}
}
@media(max-width:1000px) and (max-height:620px){.yarim .not{display:none}}
@media(max-height:500px){:root{--h:calc(26*var(--v))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .acilis{height:calc(100*var(--v))}}

@media(prefers-reduced-motion:no-preference){
  .js .cizgi{animation:cizgi-ac 1.15s var(--egri) backwards}
  .js .yarim.ust svg{animation:harf-ust 1.25s .3s var(--egri) backwards}
  .js .yarim.alt svg{animation:harf-alt 1.25s .3s var(--egri) backwards}
  .js .yarim .not{animation:belir .7s .7s ease backwards}
  .js .ust-menu{animation:belir .7s .6s ease backwards}
}
@keyframes cizgi-ac{from{clip-path:inset(0 50%)}to{clip-path:inset(0 0)}}
@keyframes harf-ust{from{clip-path:inset(100% 0 0 0);transform:translateY(34%)}to{clip-path:inset(0);transform:none}}
@keyframes harf-alt{from{clip-path:inset(0 0 100% 0);transform:translateY(-34%)}to{clip-path:inset(0);transform:none}}
@keyframes belir{from{opacity:0}}

/* Manifesto */
.manifesto{padding:clamp(72px,7.5vw,110px) var(--kenar) clamp(36px,4vw,60px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px}
.manifesto .etiket{position:sticky;top:96px;align-self:start}
.manifesto .metin p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.35vw,36px);line-height:1.24;letter-spacing:-.008em;margin-bottom:.68em;max-width:min(32em,100%)}
.kelime{color:rgba(64,45,29,.16);transition:color .25s linear}
.kelime.yandi{color:var(--kahve)}
@media(max-width:800px){.manifesto{grid-template-columns:1fr}.manifesto .etiket{position:static}}
.kapanis{margin:0 var(--kenar) clamp(64px,7.5vw,110px)}
.kapanis .satir{width:clamp(170px,24vw,350px);height:auto;aspect-ratio:735/182}
.kapanis hr{border:0;height:clamp(3px,.32vw,5px);background:var(--kahve);margin:clamp(12px,1.4vw,20px) 0}
.kapanis p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(21px,2.5vw,38px);line-height:1.12;max-width:20em;margin-left:auto;text-align:right;text-wrap:balance}

/* Menü: kaydırdıkça yatay ilerleyen şerit */
.bas{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:18px;flex-wrap:wrap}
.menu{position:relative}
#menu{scroll-margin-top:0}
.menu-sahne{--kh:min(calc(100*var(--v) - 250px),33vw);padding:clamp(60px,6vw,90px) 0 clamp(30px,4vw,60px);overflow-x:auto;scrollbar-width:none}
.menu-sahne::-webkit-scrollbar{display:none}
.menu-sahne .bas{padding:0 var(--kenar) 14px;position:sticky;left:0}
.menu-kural-yer{height:2px;position:relative}
.menu-kural{height:2px;background:var(--kahve);margin:0 var(--kenar)}
.menu-nokta{position:absolute;left:0;top:-4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--kahve);opacity:0}
.menu-serit{list-style:none;margin:0;display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,24px);padding:clamp(18px,2.6vw,38px) var(--kenar) 0;width:max-content}
.kart{flex:none;width:calc(var(--kh)*.8)}
.kart .kap{height:var(--kh);overflow:hidden}
.kart-yazi{padding-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kart-yazi h3{font-weight:300;font-size:clamp(21px,1.95vw,30px);line-height:1.1}
.kart-yazi span{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.2vw,18px)}
.kart.genis{width:calc(var(--kh)*1.25)}
.mozaik{height:var(--kh);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(6px,.8vw,12px)}
.mozaik figure{min-height:0}
.mozaik .kap{height:100%}
@media(max-width:800px){.menu-sahne{--kh:min(calc(100*var(--v) - 245px),104vw)}.kart.genis{width:calc(var(--kh)*1.15)}}
@media(max-height:500px){.menu-sahne{--kh:max(150px,calc(100*var(--v) - 190px))}}
/* Pinli hal */
.akis .menu-sahne{position:sticky;top:0;height:calc(100*var(--v));overflow:hidden;padding:clamp(70px,8.4vh,84px) 0 0;display:flex;flex-direction:column}
.akis .menu-serit{margin-block:auto;padding-block:0 clamp(10px,2vh,24px)}
.akis .menu-kural{position:absolute;left:0;top:0;margin:0;transform:scaleX(0);transform-origin:left center}
.akis .menu-serit{will-change:transform;transition:none}

/* Mekân */
.mekan{padding:clamp(60px,6.5vw,96px) var(--kenar) clamp(70px,8vw,120px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(10px,1.6vw,24px);row-gap:clamp(30px,4.5vw,68px)}
.mekan h2{grid-column:1/8;font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.5vw,54px);line-height:1.04;letter-spacing:-.012em}
.mekan .giris{grid-column:9/13;align-self:end}
figure.k{position:relative}
figure.k .kap{overflow:hidden}
figure.k::after{content:"";display:block;border-top:1.5px solid var(--kahve);margin-top:12px}
.k1{grid-column:1/13}.k1 .kap{aspect-ratio:16/8}
.k2{grid-column:1/5}.k2 .kap{aspect-ratio:4/5}
.k3{grid-column:6/13}.k3 .kap{aspect-ratio:16/10}
.k4{grid-column:2/9}.k4 .kap{aspect-ratio:16/9}
.k5{grid-column:9/13;margin-top:18%}.k5 .kap{aspect-ratio:4/5}
.js .ac .kap{clip-path:inset(50% 0);transition:clip-path 1.25s var(--egri);transition-delay:var(--g,0s)}
.js .ac.acik .kap{clip-path:inset(0)}
.ac .kap{overflow:hidden}
.js .ac .kap img{transform:scale(1.14);transition:transform 1.7s var(--egri);transition-delay:var(--g,0s)}
.js .ac.acik .kap img{transform:scale(1)}
.js .ac.acik .kap:hover img{transform:scale(1.05);transition-duration:.9s;transition-delay:0s}
.mozaik figure:nth-child(2){--g:.1s}.mozaik figure:nth-child(3){--g:.2s}.mozaik figure:nth-child(4){--g:.3s}
figure.k::after{transform:scaleX(0);transform-origin:left center;transition:transform 1.3s var(--egri) .15s}
figure.k.acik::after{transform:none}
html:not(.js) figure.k::after{transform:none}
@media(max-width:800px){.mekan h2,.mekan .giris,.k1,.k3,.k4{grid-column:1/13}.k2{grid-column:1/8}.k5{grid-column:6/13;margin-top:0}.k1 .kap{aspect-ratio:4/3}}
/* Akış çizgisi: tek tek katmanlar, kaydırırken yeniden boyama olmaz */
body{position:relative}
.akis-iz{--cw:2px;position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:6}
.akis-iz i{position:absolute;display:block;background:var(--kahve);will-change:transform}
.akis-iz i.altin{background:var(--altin)}
.akis-iz svg{position:absolute;overflow:visible;fill:none;stroke:var(--kahve);stroke-width:var(--cw)}
.akis-iz svg.altin{stroke:var(--altin)}
.akis-iz b{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--kahve);opacity:0;will-change:transform}
.akis-iz b.altin{background:var(--altin)}
@media(max-width:800px){.akis-iz{--cw:1.5px}}
.akis .perde,.akis .cizgi,.akis .yarim,.akis .son-soz,.akis .foto img,.akis .menu-kural,.akis .menu-nokta{will-change:transform}
.sahne.geride{visibility:hidden}
/* Akış etkinken bölüm çizgilerini akış çizgisi çizer */
.akis .kapanis hr{background:transparent}
.akis .marka-dizi{border-top-color:transparent}
.akis .ilet-izgara{border-top-color:transparent}
/* Derinlik: fotoğraf çerçevesinin içinde hafifçe kayar */
.akis .k .kap img{position:relative;height:114%;top:-7%}
.akis .kart .kap img{position:relative;width:114%;max-width:none;left:-7%}
/* Girişler */
.akis .belir{opacity:0;translate:0 20px;transition:opacity .9s ease,translate 1.15s var(--egri);transition-delay:var(--g,0s)}
.akis .belir.acik{opacity:1;translate:0 0}
.akis .kapanis .satir{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--egri)}
.akis .kapanis .satir.acik{clip-path:inset(0 -2% 0 0)}
.akis .oyev{position:relative;isolation:isolate}
.oyev-perde{position:absolute;left:0;right:0;height:calc(50% + 1px);background:var(--krem);z-index:2;pointer-events:none;will-change:transform}
.oyev-perde.a{top:0;transform-origin:center top}.oyev-perde.b{bottom:0;transform-origin:center bottom}
.akis .oyev .filiz{clip-path:circle(0% at 50% 100%);transition:clip-path 1.9s var(--egri) .1s}
.akis .oyev .filiz.acik{clip-path:circle(125% at 50% 100%)}
/* Giriş bitince kırpma kalkar: kalıcı clip-path Safari'de her karede maske demek */
.js .ac.bitti .kap,.akis .kapanis .satir.bitti,.akis .oyev .filiz.bitti{clip-path:none;transition:none}

@media(prefers-reduced-motion:reduce){.js .ac .kap{clip-path:none;transition:none}.js .ac .kap img,.js .ac.acik .kap img{transform:none;transition:none}}

/* Markalar */
.markalar{padding:0 var(--kenar) clamp(70px,8vw,120px)}
.marka-dizi{display:grid;grid-template-columns:repeat(4,1fr);border-top:clamp(2px,.3vw,4px) solid var(--kahve);border-bottom:1.5px solid rgba(64,45,29,.28)}
.marka-dizi>div{height:clamp(170px,19vw,270px);display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;gap:10px;padding:clamp(20px,2.6vw,38px) 12% clamp(14px,1.6vw,22px)}
.marka-dizi span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;text-align:center}
.marka-dizi>div+div{border-left:1.5px solid rgba(64,45,29,.28)}
.marka-dizi svg{width:100%;height:100%;max-height:72px}
.marka-dizi img{height:auto;object-fit:contain}
.marka-dizi .il svg{max-height:82px}
@media(max-width:700px){.marka-dizi{grid-template-columns:1fr 1fr}.marka-dizi>div:nth-child(3){border-left:0}.marka-dizi>div:nth-child(n+3){border-top:1.5px solid rgba(64,45,29,.28)}}

/* ÖYEV */
.oyev{background:var(--kahve);color:var(--krem);padding:clamp(70px,11vw,160px) var(--kenar);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,100px);align-items:center}
.oyev .filiz{width:min(100%,430px);margin-inline:auto;height:auto;aspect-ratio:1036/895}
.oyev h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.8vw,78px);line-height:1.04;letter-spacing:-.015em;margin:18px 0 26px}
.oyev p{max-width:46ch;font-size:clamp(17px,1.35vw,20px)}
.oyev p+p{margin-top:12px}
.oyev .etiket{color:var(--altin);display:block}
.oyev-logo{display:block;width:clamp(120px,12vw,180px);margin-bottom:clamp(18px,2vw,30px);color:var(--krem);transition:color .25s}
.oyev-logo:hover{color:var(--altin)}
.oyev-logo svg{width:100%;height:auto;aspect-ratio:17348/6987}
.dis-bag{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:15px 24px;border:1.5px solid var(--altin);color:var(--altin);font-weight:500;letter-spacing:.04em;transition:background .3s,color .3s}
.dis-bag:hover{background:var(--altin);color:var(--kahve)}
@media(max-width:800px){.oyev{grid-template-columns:1fr}.oyev .filiz{max-width:260px;margin-inline:0}}

/* İletişim */
.iletisim{padding:clamp(60px,7vw,100px) var(--kenar) clamp(30px,3.5vw,50px)}
.tel{display:block;font-weight:300;font-size:clamp(32px,4.8vw,74px);line-height:1;letter-spacing:-.005em;white-space:nowrap;margin:clamp(14px,1.6vw,24px) 0}
.tel:hover{color:#402d1d;text-decoration:underline;text-decoration-color:var(--altin);text-decoration-thickness:.04em;text-underline-offset:.12em}
.ilet-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:clamp(2px,.3vw,4px) solid var(--kahve);padding-top:20px}
.ilet-izgara h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:8px}
.ilet-izgara p+p{margin-top:4px}
.ilet-izgara a{text-decoration:underline;text-decoration-color:var(--altin);text-underline-offset:4px;text-decoration-thickness:2px}
.saatler{display:grid;grid-template-columns:max-content max-content;column-gap:24px;margin:0}
.saatler dd{margin:0;font-variant-numeric:tabular-nums}
@media(max-width:800px){.ilet-izgara{grid-template-columns:1fr}}
footer{padding:clamp(40px,7vw,90px) var(--kenar) 40px;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;font-size:14px}
footer .logo{width:92px;height:auto;aspect-ratio:695/807}
.imza-pan{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px}
.imza-pan a{display:block;padding:6px 0;opacity:.65;transition:opacity .25s}
.imza-pan a:hover,.imza-pan a:focus-visible{opacity:1}
.imza-pan img{width:auto;height:11px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer nav a{padding:5px 0}
footer nav a:hover{text-decoration:underline;text-decoration-color:var(--altin);text-decoration-thickness:2px;text-underline-offset:4px}
footer div:last-child{text-align:right}
@media(max-width:520px){footer div:last-child{text-align:left}.imza-pan{justify-content:flex-start}}