/* Nüans — tek stil sayfası. Ölçüler troscan.framer.website'ten hesaplanmış DOM'la
   alındı (1440 masaüstü · 390 mobil). Renkler şablonun <style>'ından :root'a gelir. */

/* ── Font: Archivo (Omnibus-Type, SIL OFL 1.1). Dış CDN CSP'de kapalı, dosyalar pakette. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --zemin:#f8ede3; --vurgu:#8d493a; --kapak-zemin:#75410d; --beyaz:#fff;
  --kenar:16px; --bolum:clamp(100px,14vw,200px); --icerik:1340px;
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@media (min-width:810px){:root{--kenar:50px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:16px/1.4 var(--font);color:var(--vurgu);background:var(--zemin);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
main{display:block}

/* ── Tipografi: başlıklar 400 ağırlık, sıkı harf aralığı (−3%), satır yüksekliği 1 */
.h1,.h2,.h3,.h4,.h5{font-weight:400;margin:0;text-wrap:balance}
.h1{font-size:clamp(46px,6.7vw,96px);line-height:1;letter-spacing:-.03em}
.h2{font-size:clamp(38px,4.45vw,64px);line-height:1;letter-spacing:-.03em}
.h3{font-size:clamp(26px,2.8vw,40px);line-height:1.2;letter-spacing:-.02em}
.h4{font-size:clamp(20px,1.95vw,28px);line-height:1.2;letter-spacing:-.02em}
.h5{font-size:clamp(18px,1.55vw,22px);line-height:1.2;letter-spacing:-.01em}
.etiket{font-size:14px;line-height:1.2;margin:0 0 20px;display:flex;align-items:center;gap:8px}
.etiket::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ── Kap ve düğmeler */
.kap{width:min(100% - 2*var(--kenar),var(--icerik));margin-inline:auto}
.kap-dar{max-width:760px;padding-top:clamp(120px,14vw,180px)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:5px;font:500 14px/1 var(--font);text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:transform .2s,opacity .2s}
.btn:hover{transform:translateY(-1px)}
.btn-koyu{background:var(--vurgu);color:var(--zemin);border-color:rgba(255,255,255,.35)}
.btn-acik{background:var(--zemin);color:var(--vurgu)}
.btn-cerceve{background:transparent;color:var(--beyaz);border-color:rgba(255,255,255,.7)}

/* ── Üstbilgi: yüzen krem kart. Kapak arkasından başlar (fixed), içerik akışına girmez. */
.ust{position:absolute;top:16px;left:0;right:0;z-index:30;pointer-events:none}
.ust-yapiskan{position:fixed}
.ust-kutu{pointer-events:auto;position:relative;width:min(700px,100% - 2*var(--kenar));margin-inline:auto;min-height:46px;background:var(--zemin);border-radius:8px;box-shadow:0 10px 30px rgba(60,30,10,.12);display:flex;align-items:center;gap:20px;padding:5px 5px 5px 16px}
.marka{font-weight:600;font-size:16px;text-decoration:none;margin-right:auto;display:flex;align-items:center}
.marka img{height:28px;width:auto}
.ana-menu{display:none}
.ana-menu ul{display:flex;gap:30px}
.ana-menu a{font-weight:600;font-size:16px;text-decoration:none}
.ana-menu a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.ana-menu li{position:relative}
.alt-menu{display:none;position:absolute;left:-12px;top:100%;padding:12px;background:var(--zemin);border-radius:8px;box-shadow:0 10px 30px rgba(60,30,10,.12);flex-direction:column;gap:8px;min-width:180px}
.ana-menu li:hover>.alt-menu,.ana-menu li:focus-within>.alt-menu{display:flex}
.mobil-menu .alt-bag{font-size:16px;padding:4px 0 4px 16px;font-weight:400}
.ust-dugme{height:48px}
/* Mobil menü: <details>, JS yok. Özet = hamburger kutusu. */
.mobil-menu{position:static}
.mobil-menu summary{list-style:none;cursor:pointer;width:40px;height:36px;border-radius:5px;background:var(--vurgu);display:grid;place-items:center}
.mobil-menu summary::-webkit-details-marker{display:none}
.mobil-menu summary::before{content:"";width:16px;height:2px;background:var(--zemin);box-shadow:0 -5px 0 var(--zemin),0 5px 0 var(--zemin)}
.mobil-menu[open] summary::before{box-shadow:none;transform:rotate(45deg)}
.mobil-menu ul{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--zemin);border-radius:8px;box-shadow:0 10px 30px rgba(60,30,10,.12);padding:12px 16px;display:grid;gap:4px}
.mobil-menu a{display:block;padding:10px 0;font-size:20px;text-decoration:none;font-weight:500}
@media (min-width:810px){
  .ust{top:20px}
  .ust-kutu{padding:10px 10px 10px 20px}
  .ana-menu{display:block}
  .mobil-menu{display:none}
  .ust-dugme{display:inline-flex}
}
@media (max-width:809px){.ust-dugme{display:none}}
.bolge-ustbilgi-ek{width:min(700px,100% - 2*var(--kenar));margin:8px auto 0;pointer-events:auto}

/* ── 1 · Kapak */
.kapak{position:relative;min-height:100dvh;overflow:hidden;background:var(--kapak-zemin);color:var(--beyaz);display:grid;place-items:center;text-align:center;padding:120px var(--kenar) 80px}
.kapak-arkaplan{position:absolute;inset:0;z-index:0;overflow:hidden;-webkit-mask:linear-gradient(#000 0%,rgba(0,0,0,.4) 100%);mask:linear-gradient(#000 0%,rgba(0,0,0,.4) 100%)}
.kapak-arkaplan img{width:100%;height:100%;object-fit:cover;object-position:center}
.kapak-icerik{position:relative;z-index:1;width:min(800px,100%);display:grid;justify-items:center;gap:20px}
.kapak-alt{font-size:18px;max-width:560px;margin:0}
.kapak-dugmeler{display:flex;gap:10px;justify-content:center;margin-top:4px;width:100%}
@media (max-width:809px){.kapak-dugmeler{flex-direction:column}.kapak-dugmeler .btn{width:100%;height:46px}.kapak-icerik{gap:24px}}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
  .kapak-arkaplan img{height:130%;animation:kapak-kaydir linear both;animation-timeline:scroll();animation-range:0 100vh}
  @keyframes kapak-kaydir{to{transform:translateY(-23%)}}
}}

/* ── Bölüm boşluğu: kapak hariç her tema bölümü bir önceki bölümden --bolum kadar aşağıda */
.hakkimizda,.kolaj,.proje-vitrini,.hizmetler,.cagri,.bolum-basligi{margin-top:var(--bolum)}

/* ── 2 · Hakkımızda */
.hakkimizda{display:grid;gap:40px}
.hakkimizda-metin{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.hakkimizda-metin p{max-width:550px}
.hakkimizda-metin .btn{margin-top:8px}
.hakkimizda-gorsel img{width:100%;aspect-ratio:710/618;object-fit:cover}
@media (min-width:810px){
  .hakkimizda{grid-template-columns:minmax(0,550fr) minmax(0,710fr);gap:clamp(40px,7.8vw,113px);align-items:stretch}
  .hakkimizda-gorsel{margin-top:-28px}
}

/* ── 3 · Kolaj: altı görsel + ortada başlık */
.kolaj-sahne{position:relative;height:clamp(460px,62vw,900px);width:min(100% - 2*var(--kenar),var(--icerik));margin-inline:auto}
.kolaj-baslik{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(550px,90%);text-align:center;margin:0;z-index:2}
.kolaj-g{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 20px 40px rgba(60,30,10,.12);height:auto}
.kolaj-g1{left:2%;top:10%;width:clamp(110px,18.6vw,268px);aspect-ratio:268/305}
.kolaj-g2{right:3%;top:4%;width:clamp(130px,23vw,335px);aspect-ratio:335/244}
.kolaj-g3{left:36%;top:0;width:clamp(110px,18.6vw,268px);aspect-ratio:268/183}
.kolaj-g4{left:14%;bottom:4%;width:clamp(110px,18.6vw,268px);aspect-ratio:268/305}
.kolaj-g5{right:4%;bottom:14%;width:clamp(110px,18.6vw,268px);aspect-ratio:268/203}
.kolaj-g6{left:46%;bottom:0;width:clamp(120px,20.5vw,295px);aspect-ratio:295/179}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .kolaj-g{animation:kolaj-ac ease-out both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .kolaj-g1{--yig:38vw 18vw}.kolaj-g2{--yig:-30vw 22vw}.kolaj-g3{--yig:4vw 26vw}.kolaj-g4{--yig:26vw -20vw}.kolaj-g5{--yig:-32vw -16vw}.kolaj-g6{--yig:-6vw -28vw}
  @keyframes kolaj-ac{from{translate:var(--yig);opacity:.9}to{translate:0 0;opacity:1}}
  .kolaj-baslik{animation:kolaj-belir linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  @keyframes kolaj-belir{from{opacity:0}to{opacity:1}}
}}

/* ── 4 · Proje vitrini: yapışkan tam ekran paneller. Kap `section.__class=proje-vitrini`
   olmalı — sticky, en yakın kabın sınırında biter; kap yoksa panel sayfa sonuna kadar yapışır. */
.proje-paneli{position:sticky;top:0;min-height:100dvh;overflow:hidden;display:grid;place-items:center;text-align:center;color:var(--beyaz);padding:120px var(--kenar)}
.proje-arkaplan{position:absolute;inset:0;z-index:0}
.proje-arkaplan::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.42))}
.proje-arkaplan img{width:100%;height:100%;object-fit:cover}
.proje-icerik{position:relative;z-index:1;width:min(600px,100%);display:grid;justify-items:center;gap:10px}
.proje-no{font-size:16px;margin:0 0 42px}
.proje-alt{margin:0 0 22px}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .proje-arkaplan img{height:112%;animation:proje-kay linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes proje-kay{from{transform:translateY(-10%)}to{transform:translateY(0)}}
}}

/* ── 5 · Hizmetler */
.hizmetler{display:grid;gap:48px}
.hizmetler-gorsel{position:relative;aspect-ratio:645/614;overflow:hidden;border-radius:6px;order:2}
.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.hg1{opacity:1}
.hizmetler:has(.hizmet-satir:nth-child(2):hover) .hg1,.hizmetler:has(.hizmet-satir:nth-child(3):hover) .hg1,.hizmetler:has(.hizmet-satir:nth-child(4):hover) .hg1,.hizmetler:has(.hizmet-satir:nth-child(5):hover) .hg1,.hizmetler:has(.hizmet-satir:nth-child(6):hover) .hg1{opacity:0}
.hizmetler:has(.hizmet-satir:nth-child(2):hover) .hg2{opacity:1}
.hizmetler:has(.hizmet-satir:nth-child(3):hover) .hg3{opacity:1}
.hizmetler:has(.hizmet-satir:nth-child(4):hover) .hg4{opacity:1}
.hizmetler:has(.hizmet-satir:nth-child(5):hover) .hg5{opacity:1}
.hizmetler:has(.hizmet-satir:nth-child(6):hover) .hg6{opacity:1}
.hizmetler-metin .h2{max-width:600px}
.hizmet-listesi{margin-top:clamp(48px,7vw,100px);border-top:1px solid rgba(141,73,58,.3)}
.hizmet-satir{display:grid;grid-template-columns:36px 1fr;align-items:baseline;padding:10px 0 9px;border-bottom:1px solid rgba(141,73,58,.3);cursor:default}
.hizmet-no{font-size:12px}
@media (min-width:810px){
  .hizmetler{grid-template-columns:minmax(0,645fr) minmax(0,600fr);gap:clamp(40px,6.9vw,95px);align-items:start}
  .hizmetler-gorsel{order:0;position:sticky;top:100px}
  .hizmet-no{font-size:14px}
}

/* ── 6 · Çağrı */
.cagri{position:relative;min-height:100dvh;display:grid;place-items:center;padding:100px var(--kenar);overflow:hidden}
.cagri-arkaplan{position:absolute;inset:0;z-index:0}
.cagri-arkaplan img{width:100%;height:100%;object-fit:cover}
.cagri-kart{position:relative;z-index:1;width:min(700px,100%);background:var(--zemin);border-radius:8px;text-align:center;padding:clamp(40px,6vw,90px) clamp(24px,7vw,100px)}
.cagri-kart .h4{margin:0 0 28px;text-wrap:pretty}

/* ── 7 · Bölüm başlığı + yazı kartları */
.bolum-basligi{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.bolum-basligi .h2{max-width:500px}
.haber-izgara>section{width:min(100% - 2*var(--kenar),var(--icerik));margin:clamp(40px,7vw,100px) auto 0;display:grid;gap:40px 10px}
@media (min-width:810px){.haber-izgara>section{grid-template-columns:repeat(3,1fr)}}
.haber-bag{text-decoration:none;display:block}
.haber-karti img{width:100%;aspect-ratio:440/374;object-fit:cover;border-radius:6px}
.haber-tarih{margin:20px 0 14px}
.haber-alt{font-size:14px;margin:12px 0 0;max-width:300px}

/* ── 8 · Altbilgi */
.alt{background:var(--vurgu);color:var(--zemin);padding:clamp(60px,8vw,100px) 0 32px;margin-top:var(--bolum);text-align:center}
.alt-marka{font-weight:600;font-size:16px;margin:0}
.alt-marka img{height:28px;width:auto;margin-inline:auto}
.alt-kolonlar{display:flex;flex-direction:column;align-items:center;gap:48px;margin-top:clamp(48px,7vw,94px)}
.alt-etiket{font-size:12px;opacity:.7;margin:0 0 10px}
.alt-kolon li{margin:4px 0}
.alt-kolon a{font-size:20px;line-height:1.2;letter-spacing:-.02em;text-decoration:none}
.alt-kolon a:hover{text-decoration:underline;text-underline-offset:4px}
.alt-telif{border-top:1px solid rgba(248,237,227,.2);margin:clamp(48px,7vw,90px) 0 0;padding-top:24px;font-size:14px;opacity:.7}
@media (min-width:810px){
  .alt-kolonlar{flex-direction:row;justify-content:center;align-items:flex-start;gap:clamp(60px,9vw,130px)}
  .alt-etiket{font-size:14px}
  .alt-kolon a{font-size:28px}
}

/* ── Yerleşik içerik (yazı · arşiv · arama · 404) */
.yazi-baslik{font-size:clamp(38px,5vw,64px);font-weight:400;line-height:1.05;letter-spacing:-.03em;margin:0 0 32px}
.kap-dar h2,.kap-dar h3{font-weight:400;letter-spacing:-.02em;line-height:1.15}
.kap-dar img{border-radius:6px}
.kap-dar blockquote{margin:1.6em 0;padding-left:1.1em;border-left:2px solid rgba(141,73,58,.3)}
.yazi-listesi li{padding:14px 0;border-bottom:1px solid rgba(141,73,58,.3)}
.yazi-listesi a{font-size:22px;text-decoration:none}

/* ── Tema bölgeleri (WEB25) */
.bolge-icerik-oncesi{margin-top:120px}
.bolge-icerik-sonrasi,.bolge-kayit-alti{margin-top:var(--bolum)}
.bolge-altbilgi-kolonlar{display:grid;gap:8px}