:root{
  --zemin:#ece7df; --zemin-2:#e2dbd0; --yazi:#2b2420; --soluk:#6f625a; --vurgu:#6b5446;
  --koyu:#211c19; --koyu-yazi:#ece7df; --cizgi:rgba(43,36,32,.16);
  --serif:'Instrument Serif',Georgia,serif; --dar:'Barlow Condensed','Arial Narrow',sans-serif; --govde:'Inter',system-ui,sans-serif;
  --kenar:clamp(16px,4vw,56px); --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--zemin);color:var(--yazi);font:400 16px/1.6 var(--govde);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.atla{position:absolute;left:-999px;top:8px;background:var(--yazi);color:var(--zemin);padding:8px 12px;z-index:200}
.atla:focus{left:8px}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}

/* üst bar */
.ust{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:32px;padding:18px var(--kenar);color:#fff;transition:background .4s var(--ease),color .4s var(--ease),padding .4s var(--ease)}
.ust.dolu{background:rgba(236,231,223,.92);backdrop-filter:blur(10px);color:var(--yazi);padding-block:12px;border-bottom:1px solid var(--cizgi)}
.marka{font:600 22px/1 var(--dar);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;display:flex;flex-direction:column;gap:3px}
.marka span{font:400 11px/1 var(--govde);letter-spacing:.18em;opacity:.75}
.menu{display:flex;gap:28px;margin-left:auto}
.menu a{font:500 15px/1 var(--dar);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:currentColor;transition:right .35s var(--ease)}
.menu a:hover::after{right:0}
.dugme{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--yazi);color:var(--zemin);font:500 15px/1 var(--dar);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;transition:transform .3s var(--ease),background .3s}
.dugme:hover{transform:translateY(-2px);background:var(--vurgu)}
.dugme--kucuk{padding:11px 18px;background:#fff;color:var(--yazi)}
.ust.dolu .dugme--kucuk{background:var(--yazi);color:var(--zemin)}
.dugme--cizgi{background:none;color:var(--yazi);border:1px solid var(--yazi)}
.dugme--cizgi:hover{background:var(--yazi);color:var(--zemin)}
.dugme--cizgi-acik{background:none;color:var(--koyu-yazi);border:1px solid rgba(236,231,223,.5)}
.menu-ac{display:none;width:40px;height:40px;position:relative;margin-left:auto}
.menu-ac span{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;transition:transform .3s}
.menu-ac span:first-child{top:16px}.menu-ac span:last-child{top:24px}
.menu-ac[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-ac[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobil-menu{position:fixed;inset:0;z-index:45;background:var(--koyu);color:var(--koyu-yazi);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 var(--kenar)}
.mobil-menu[hidden]{display:none}
.mobil-menu a{font:500 44px/1.15 var(--dar);text-transform:uppercase;text-decoration:none}

/* açılış */
.acilis{position:relative;height:100svh;min-height:560px;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.acilis__gorsel{position:absolute;inset:0}
.acilis__gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.6s var(--ease),transform 7s linear}
.acilis__gorsel img.aktif{opacity:1;transform:scale(1)}
.acilis__gorsel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,12,.45) 0%,rgba(20,15,12,0) 30%,rgba(20,15,12,.15) 55%,rgba(20,15,12,.7) 100%)}
.acilis__icerik{position:relative;padding:0 var(--kenar) clamp(28px,6vh,64px)}
.ust-etiket{font:500 13px/1 var(--govde);letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px;opacity:.85}
.acilis__baslik{font:500 clamp(44px,min(9.4vw,15.5svh),158px)/.9 var(--dar);text-transform:uppercase;letter-spacing:-.01em}
.acilis__baslik em{font-size:1.04em;letter-spacing:-.01em}
.satir{display:block;overflow:hidden;padding-bottom:.04em}
.satir>span{display:inline-block;transform:translateY(105%);animation:yuksel 1.1s var(--ease) forwards}
.satir:nth-child(2)>span{animation-delay:.12s}.satir:nth-child(3)>span{animation-delay:.24s}
@keyframes yuksel{to{transform:none}}
.acilis__alt{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--kenar);border-top:1px solid rgba(255,255,255,.28);font:500 14px/1 var(--dar);text-transform:uppercase;letter-spacing:.1em}
.asagi{text-decoration:none;display:flex;align-items:center;gap:10px}
.asagi i{width:1px;height:26px;background:currentColor;display:block;animation:nabiz 2s infinite}
@keyframes nabiz{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}

/* bölümler */
.bolum{padding:clamp(80px,13vw,180px) var(--kenar)}
.bolum-no{font:500 14px/1 var(--dar);text-transform:uppercase;letter-spacing:.14em;color:var(--soluk);margin-bottom:28px;display:flex;align-items:center;gap:14px}
.bolum-no::before{content:"";width:28px;height:1px;background:currentColor}
.bolum-baslik{font:500 clamp(40px,6.4vw,104px)/.92 var(--dar);text-transform:uppercase;letter-spacing:-.01em}
.bolum-bas{margin-bottom:clamp(48px,7vw,96px)}

.yaklasim__metin{font:400 clamp(26px,3.6vw,54px)/1.18 var(--serif);max-width:22ch;max-width:1180px;text-wrap:balance}
.yaklasim__metin em{color:var(--vurgu)}
.ilkeler{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(56px,8vw,120px);border-top:1px solid var(--cizgi);padding-top:36px}
.ilkeler span{font:italic 400 22px/1 var(--serif);color:var(--vurgu)}
.ilkeler h3{font:500 32px/1 var(--dar);text-transform:uppercase;margin:16px 0 12px}
.ilkeler p{color:var(--soluk);max-width:36ch}

/* proje listesi */
.projeler{position:relative;padding-bottom:clamp(60px,8vw,100px)}
.proje-liste{list-style:none;border-top:1px solid var(--cizgi)}
.proje-liste li{border-bottom:1px solid var(--cizgi)}
.proje-satir{display:grid;grid-template-columns:70px 1.3fr 1fr .9fr 70px 40px;align-items:center;gap:20px;width:100%;padding:clamp(20px,2.6vw,34px) 0;text-align:left;transition:padding .45s var(--ease),color .3s}
.proje-satir:hover{padding-left:18px;color:var(--vurgu)}
.proje-satir .no{font:italic 400 22px/1 var(--serif);color:var(--soluk)}
.proje-satir .ad{font:500 clamp(34px,4.6vw,72px)/.95 var(--dar);text-transform:uppercase}
.proje-satir .tur,.proje-satir .yer{color:var(--soluk);font-size:15px}
.proje-satir .yil{font:500 17px/1 var(--dar);letter-spacing:.08em}
.proje-satir .ok{font-size:22px;transition:transform .35s var(--ease)}
.proje-satir:hover .ok{transform:translateX(6px) rotate(-45deg)}
.imlec-gorsel{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/3;pointer-events:none;z-index:30;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .3s,transform .4s var(--ease)}
.imlec-gorsel.acik{opacity:1;transform:translate(-50%,-50%) scale(1)}
.imlec-gorsel img{width:100%;height:100%;object-fit:cover}

/* vitrin */
.vitrin{padding:0 0 clamp(80px,12vw,160px)}
.vitrin__ray{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--kenar);scrollbar-width:none;scroll-padding:0 var(--kenar)}
.vitrin__ray::-webkit-scrollbar{display:none}
.slayt{flex:0 0 min(82vw,1180px);scroll-snap-align:start;position:relative;display:block;text-align:left;color:#fff}
.slayt__resim{aspect-ratio:16/9;overflow:hidden;background:var(--zemin-2)}
.slayt__resim img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.slayt:hover .slayt__resim img{transform:scale(1.04)}
.slayt__bilgi{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:clamp(18px,3vw,40px);background:linear-gradient(0deg,rgba(20,15,12,.72),transparent)}
.slayt__ad{font:500 clamp(36px,5vw,84px)/.9 var(--dar);text-transform:uppercase}
.slayt__ozet{font:italic 400 clamp(17px,1.5vw,22px)/1.3 var(--serif);max-width:34ch;margin-top:10px;opacity:.92}
.slayt__veri{display:flex;gap:clamp(16px,2.5vw,40px);font:500 14px/1.3 var(--dar);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.slayt__veri b{display:block;font:400 11px/1 var(--govde);letter-spacing:.16em;opacity:.7;margin-bottom:6px}
.vitrin__alt{display:flex;justify-content:space-between;align-items:center;padding:24px var(--kenar) 0}
.vitrin__sayac{font:500 18px/1 var(--dar);letter-spacing:.1em}
.vitrin__ok{display:flex;gap:10px}
.vitrin__ok button{width:52px;height:52px;border:1px solid var(--yazi);border-radius:50%;font-size:18px;transition:background .3s,color .3s}
.vitrin__ok button:hover{background:var(--yazi);color:var(--zemin)}

/* tiny house */
.tiny{background:var(--koyu);color:var(--koyu-yazi)}
.tiny .bolum-no{color:rgba(236,231,223,.6)}
.tiny .bolum-bas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.tiny .bolum-bas .bolum-no{grid-column:1/-1;margin-bottom:0}
.tiny__giris{color:rgba(236,231,223,.75);max-width:52ch}
.tiny__ray{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px)}
.model{text-align:left;color:inherit;display:flex;flex-direction:column;gap:14px}
.model__resim{aspect-ratio:3/4;overflow:hidden;position:relative}
.model__resim img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.model:hover .model__resim img{transform:scale(1.06)}
.model__ton{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;background:rgba(20,15,12,.55);backdrop-filter:blur(6px);padding:6px 10px 6px 6px;border-radius:99px;font-size:12px}
.model__ton i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
.model__ad{font:500 30px/1 var(--dar);text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(236,231,223,.2);padding-top:14px}
.model__ad small{font:400 13px/1 var(--govde);opacity:.6;text-transform:none}

/* alıntı */
.alinti{text-align:center}
.alinti blockquote p{font:400 clamp(28px,4.4vw,68px)/1.12 var(--serif);max-width:24ch;margin:0 auto;text-wrap:balance}
.alinti em{color:var(--vurgu)}
.alinti footer{margin-top:32px;font:500 15px/1 var(--dar);text-transform:uppercase;letter-spacing:.16em;color:var(--soluk)}

/* hakkımda */
.hakkimda{border-top:1px solid var(--cizgi)}
.hakkimda__izgara{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px)}
.hakkimda__metin p{font-size:18px;max-width:56ch;margin-bottom:18px}
.hakkimda__metin .dugme{margin-top:14px}
.zaman{border-top:1px solid var(--cizgi)}
.zaman div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--cizgi)}
.zaman dt{font:500 18px/1.3 var(--dar);color:var(--vurgu)}
.zaman dd b{display:block;font-weight:500}
.zaman dd{color:var(--soluk);font-size:15px}
.araclar{grid-column:1/-1}
.araclar h3{font:500 14px/1 var(--dar);text-transform:uppercase;letter-spacing:.14em;color:var(--soluk);margin-bottom:16px}
.araclar ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.araclar li{border:1px solid var(--cizgi);border-radius:99px;padding:10px 18px;font:500 17px/1 var(--dar);text-transform:uppercase;letter-spacing:.06em}

/* çağrı */
.cagri{background:var(--vurgu);color:var(--koyu-yazi);padding:clamp(90px,14vw,200px) var(--kenar);text-align:center;display:flex;flex-direction:column;align-items:center}
.cagri .bolum-no{color:rgba(236,231,223,.7)}
.cagri__baslik{font:500 clamp(60px,13vw,220px)/.85 var(--dar);text-transform:uppercase}
.cagri__metin{margin:28px 0 36px;font-size:18px;max-width:42ch;opacity:.9}
.cagri__dugmeler{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cagri .dugme:not(.dugme--cizgi-acik){background:var(--koyu-yazi);color:var(--yazi);text-transform:none;letter-spacing:.02em;font-size:18px}
.cagri .dugme--cizgi-acik:hover{background:var(--koyu-yazi);color:var(--yazi)}

.alt{background:var(--koyu);color:rgba(236,231,223,.7);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:28px var(--kenar);font-size:14px}
.alt a{text-decoration:none;color:var(--koyu-yazi)}

/* proje detayı */
.detay{position:fixed;inset:0;z-index:100;background:rgba(20,15,12,.5);display:flex;justify-content:flex-end}
.detay[hidden]{display:none}
.detay__kutu{width:min(1100px,100%);height:100%;overflow-y:auto;background:var(--zemin);animation:kay .55s var(--ease);overscroll-behavior:contain;outline:0}
@keyframes kay{from{transform:translateX(100%)}}
.detay__kapat{position:fixed;top:16px;right:16px;z-index:2;background:var(--yazi);color:var(--zemin);padding:10px 16px;border-radius:99px;font:500 14px/1 var(--dar);text-transform:uppercase;letter-spacing:.1em}
.d-kapak{aspect-ratio:16/9;overflow:hidden}
.d-kapak img{width:100%;height:100%;object-fit:cover}
.d-govde{padding:clamp(28px,5vw,64px)}
.d-baslik{font:500 clamp(48px,8vw,120px)/.88 var(--dar);text-transform:uppercase}
.d-tur{font:italic 400 clamp(22px,2.4vw,34px)/1.2 var(--serif);color:var(--vurgu);margin-top:10px}
.d-veri{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);margin:36px 0}
.d-veri div{padding:18px 0}
.d-veri b{display:block;font:400 11px/1 var(--govde);letter-spacing:.16em;text-transform:uppercase;color:var(--soluk);margin-bottom:8px}
.d-veri span{font:500 20px/1.2 var(--dar);text-transform:uppercase}
.d-metin{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px)}
.d-metin p{font-size:17px;margin-bottom:16px;max-width:60ch}
.d-malzeme h3,.d-alt-baslik{font:500 14px/1 var(--dar);text-transform:uppercase;letter-spacing:.14em;color:var(--soluk);margin-bottom:14px}
.d-malzeme li{list-style:none;padding:10px 0;border-bottom:1px solid var(--cizgi);font-size:15px}
.d-galeri{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:48px}
.d-galeri button{overflow:hidden;background:var(--zemin-2);display:block;aspect-ratio:16/10}
.d-galeri button.genis{grid-column:1/-1;aspect-ratio:16/8}
.d-galeri img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.d-galeri button:hover img{transform:scale(1.04)}
.d-pafta{margin-top:56px}
.d-pafta button{display:block;width:100%;background:#fff;margin-bottom:10px;border:1px solid var(--cizgi)}
.d-pafta img{width:100%;height:auto}
.d-sonraki{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:28px;border-top:1px solid var(--cizgi);width:100%;text-align:left}
.d-sonraki span{font:500 14px/1 var(--dar);text-transform:uppercase;letter-spacing:.14em;color:var(--soluk)}
.d-sonraki strong{font:500 clamp(32px,4vw,56px)/1 var(--dar);text-transform:uppercase}
.buyut{position:fixed;inset:0;z-index:120;background:rgba(15,11,9,.94);display:flex;align-items:center;justify-content:center;padding:24px}
.buyut[hidden]{display:none}
.buyut img{max-width:100%;max-height:100%;object-fit:contain}
.buyut button{position:absolute;top:16px;right:16px;color:#fff;font-size:22px;width:44px;height:44px}

/* görünme */
.gorun{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.gorun.gorundu{opacity:1;transform:none}

@media (max-width:1000px){
  .tiny__ray{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62vw;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--kenar)*-1);padding:0 var(--kenar);scrollbar-width:none}
  .model{scroll-snap-align:start}
  .proje-satir{grid-template-columns:44px 1fr auto;row-gap:6px}
  .proje-satir .tur{grid-column:2}
  .proje-satir .yer,.proje-satir .ok{display:none}
  .proje-satir .yil{grid-row:1;grid-column:3}
  .imlec-gorsel{display:none}
}
@media (max-width:760px){
  .menu,.ust>.dugme{display:none}
  .menu-ac{display:block}
  .ilkeler,.hakkimda__izgara,.d-metin,.tiny .bolum-bas{grid-template-columns:1fr}
  .slayt{flex-basis:88vw}
  .slayt__resim{aspect-ratio:4/5}
  .slayt__bilgi{flex-direction:column;align-items:flex-start}
  .slayt__veri{flex-wrap:wrap;white-space:normal}
  .d-veri{grid-template-columns:1fr 1fr}
  .d-galeri{grid-template-columns:1fr}
  .d-galeri button.genis{aspect-ratio:16/10}
  .acilis__alt #acilis-proje{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .gorun{opacity:1;transform:none}
}