/* ============================================================
   AYNA design studio — main.css
   Statik site tasarım sistemi. Tek dosya, bağımlılık yok.
   Bölümler: 1 Fontlar · 2 Tokenlar · 3 Reset · 4 Tipografi
             5 Layout · 6 Header/Nav · 7 Hero · 8 Bölümler
             9 Kartlar · 10 Form · 11 Footer · 12 Animasyon
             13 Responsive · 14 Erişilebilirlik
   ============================================================ */

/* ---------- 1. FONTLAR (self-host) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-ext-300-normal.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:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-300-normal.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;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-ext-400-normal.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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-400-normal.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;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-ext-500-normal.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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-500-normal.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;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-ext-600-normal.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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-600-normal.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;}

@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/jost-latin-ext-300-normal.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:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/jost-latin-300-normal.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;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jost-latin-ext-400-normal.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:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jost-latin-400-normal.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;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jost-latin-ext-500-normal.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:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jost-latin-500-normal.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;}

/* ---------- 2. TOKENLAR ---------- */
:root{
  /* renk */
  --bone:#F4F1EC;
  --bone-2:#EAE5DC;
  --ink:#1A1816;
  --ink-70:rgba(26,24,22,.70);
  /* İkincil metin (eyebrow, form etiketi, not). Değer .45 iken kemik zemin
     üzerinde kontrast 2.9:1 idi — WCAG AA altı. .62 ile 4.7:1 olur. */
  --ink-45:rgba(26,24,22,.62);
  --ink-15:rgba(26,24,22,.15);
  --sand:#B8A88F;
  --bronze:#8C6F4E;
  --dark:#141110;
  --dark-2:#1F1B19;
  --on-dark:#EDE7DE;
  --on-dark-60:rgba(237,231,222,.60);
  --on-dark-25:rgba(237,231,222,.25);

  /* tipografi */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --fs-display:clamp(3rem,10vw,9.5rem);
  --fs-h1:clamp(2.5rem,6.5vw,6rem);
  --fs-h2:clamp(2rem,4.6vw,4rem);
  --fs-h3:clamp(1.5rem,2.4vw,2.25rem);
  --fs-lead:clamp(1.125rem,1.6vw,1.5rem);
  --fs-body:clamp(1rem,1.05vw,1.0625rem);
  --fs-small:.8125rem;
  --fs-micro:.6875rem;

  /* ölçü */
  --gut:clamp(1.25rem,4vw,4.5rem);
  --sec:clamp(5rem,11vw,11rem);
  --maxw:1680px;
  --readw:62ch;

  /* hareket */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.7s;
  --dur-slow:1.2s;

  --header-h:76px;

  /* perde açılışının arkasındaki renk — bölüm bazında değişir */
  --reveal-bg:#F4F1EC;
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:300;
  line-height:1.7;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--bronze);color:var(--bone)}

/* ---------- 4. TİPOGRAFİ ---------- */
.display,.h1,.h2,.h3{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.02}
.display{font-size:var(--fs-display)}
.h1{font-size:var(--fs-h1);line-height:1.05}
.h2{font-size:var(--fs-h2);line-height:1.08}
.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em}
.italic{font-style:italic}
.lead{font-size:var(--fs-lead);line-height:1.6;font-weight:300;color:var(--ink-70);max-width:var(--readw)}
.body{max-width:var(--readw);color:var(--ink-70)}
.body + .body{margin-top:1.25em}

.eyebrow{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.28em;
  font-weight:400;color:var(--ink-45);
}
.eyebrow--light{color:var(--on-dark-60)}
.num{display:block;font-family:var(--serif);font-size:1.125rem;color:var(--bronze);letter-spacing:.14em;line-height:1}
.section--dark .num,.pagehead .num{color:var(--sand)}

/* link altı çizgi animasyonu */
.link{
  display:inline-block;position:relative;font-size:var(--fs-small);
  text-transform:uppercase;letter-spacing:.2em;font-weight:400;padding-bottom:.35em;
}
.link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;opacity:.35;
  transform-origin:right;transform:scaleX(1);
  transition:transform .5s var(--ease-out),opacity .4s;
}
.link:hover::after{transform-origin:left;animation:link-wipe .6s var(--ease-out);opacity:1}
@keyframes link-wipe{0%{transform:scaleX(1)}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1)}}

/* ---------- 5. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--dark{background:var(--dark);color:var(--on-dark);--reveal-bg:#141110}
.section--dark .lead,.section--dark .body{color:var(--on-dark-60)}
.section--tint{background:var(--bone-2);--reveal-bg:#EAE5DC}
.rule{height:1px;background:var(--ink-15);border:0;margin:0}

.grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-12{grid-template-columns:repeat(12,1fr)}

/* bölüm başlığı: sol etiket / sağ içerik */
.sec-head{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.sec-head__aside{padding-top:.5rem}
.sec-head__title{max-width:20ch}
.sec-head__text{margin-top:1.5rem}

/* ---------- 6. HEADER / NAV ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:1.5rem;color:var(--on-dark);
  transition:background .5s var(--ease),color .5s var(--ease),padding .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.header__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.header.is-solid{
  background:var(--bone);color:var(--ink);padding-block:1rem;
  border-bottom-color:var(--ink-15);
}
.header.is-hidden{transform:translateY(-100%)}
.header{transition-property:background,color,padding,border-color,transform}

.logo{display:flex;flex-direction:column;line-height:1;gap:.3rem;flex-shrink:0}
.logo__mark{font-family:var(--serif);font-size:1.5rem;letter-spacing:.34em;font-weight:400;text-indent:.34em}
.logo__sub{font-size:var(--fs-micro);letter-spacing:.32em;text-transform:uppercase;opacity:.6;text-indent:.32em}

.nav{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.5rem)}
.nav a{
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.18em;font-weight:400;
  position:relative;padding-block:.25rem;opacity:.85;transition:opacity .3s;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.header__end{display:flex;align-items:center;gap:1.5rem}
.lang{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-small);letter-spacing:.14em}
.lang a{opacity:.45;transition:opacity .3s}
.lang a:hover{opacity:.8}
.lang a.is-active{opacity:1;font-weight:500}
.lang span{opacity:.3}

/* hamburger */
.burger{display:none;width:34px;height:22px;position:relative;flex-shrink:0}
.burger span{
  position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .5s var(--ease-out),opacity .3s;
}
.burger span:nth-child(1){top:3px}
.burger span:nth-child(2){top:11px}
.burger span:nth-child(3){top:19px}
.is-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* mobil menü paneli */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--dark);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1.5rem);
  transition:opacity .5s var(--ease),transform .6s var(--ease-out),visibility .5s;
}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu__list li{overflow:hidden}
.menu__list a{
  display:block;font-family:var(--serif);font-size:clamp(2rem,9vw,3.5rem);
  font-weight:300;line-height:1.25;padding-block:.15em;
  transform:translateY(110%);transition:transform .7s var(--ease-out),opacity .4s;opacity:0;
}
.menu.is-open .menu__list a{transform:none;opacity:1}
.menu.is-open .menu__list li:nth-child(1) a{transition-delay:.10s}
.menu.is-open .menu__list li:nth-child(2) a{transition-delay:.16s}
.menu.is-open .menu__list li:nth-child(3) a{transition-delay:.22s}
.menu.is-open .menu__list li:nth-child(4) a{transition-delay:.28s}
.menu.is-open .menu__list li:nth-child(5) a{transition-delay:.34s}
.menu__foot{margin-top:auto;padding-top:2.5rem;border-top:1px solid var(--on-dark-25);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--dark);color:var(--on-dark);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);animation:hero-drift 24s var(--ease) infinite alternate;
}
@keyframes hero-drift{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,17,16,.55) 0%,rgba(20,17,16,.15) 35%,rgba(20,17,16,.35) 70%,rgba(20,17,16,.80) 100%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(3rem,7vw,6rem);
}
.hero__title{margin-bottom:1.25rem}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{
  display:block;transform:translateY(105%);
  animation:rise 1.4s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span{animation-delay:.35s}
.hero__title .line:nth-child(2) > span{animation-delay:.50s}
@keyframes rise{to{transform:none}}
.hero__meta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  padding-top:1.75rem;border-top:1px solid var(--on-dark-25);
  opacity:0;animation:fade-in 1.2s var(--ease) .9s forwards;
}
.hero__tagline{max-width:46ch;color:var(--on-dark-60);font-size:var(--fs-lead);line-height:1.55}
@keyframes fade-in{to{opacity:1}}

.scroll-cue{
  position:absolute;left:50%;bottom:2rem;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:var(--fs-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark-60);
  opacity:0;animation:fade-in 1s var(--ease) 1.6s forwards;
}
.scroll-cue__line{width:1px;height:48px;background:var(--on-dark-25);position:relative;overflow:hidden}
.scroll-cue__line::after{
  content:'';position:absolute;inset:0;background:var(--on-dark);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.sound-toggle{
  position:absolute;right:var(--gut);bottom:2rem;z-index:3;
  font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark-60);border:1px solid var(--on-dark-25);
  padding:.6rem 1rem;border-radius:999px;transition:color .3s,border-color .3s;
}
.sound-toggle:hover{color:var(--on-dark);border-color:var(--on-dark-60)}

/* sayfa başlığı (iç sayfalar) */
.pagehead{
  padding-top:calc(var(--header-h) + clamp(4rem,9vw,8rem));
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden;
}
.pagehead__inner{position:relative;z-index:2}
.pagehead__bg{position:absolute;inset:0;z-index:0;opacity:.28}
.pagehead__bg img{width:100%;height:100%;object-fit:cover}
.pagehead::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,17,16,.65),rgba(20,17,16,.92));
}
.pagehead__title{margin-top:1rem;max-width:16ch}
.pagehead__lead{margin-top:1.75rem;color:var(--on-dark-60)}

.crumbs{font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-60)}
.crumbs a:hover{color:var(--on-dark)}
.crumbs span{margin-inline:.6rem;opacity:.5}

/* ---------- 8. BÖLÜMLER ---------- */
/* manifesto */
.manifesto{text-align:center;max-width:24ch;margin-inline:auto}
.manifesto__text{margin:clamp(2rem,4vw,3rem) auto 0;max-width:56ch;text-align:center}

/* split (metin + görsel) */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center}
.split__media{grid-column:1/8}
.split__body{grid-column:8/13}
.split--flip .split__media{grid-column:6/13;order:2}
.split--flip .split__body{grid-column:1/6;order:1}

/* öne çıkan proje listesi */
.features{display:block}
.feature{display:block;position:relative}
.feature + .feature{margin-top:clamp(3rem,6vw,6rem)}
.feature__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.25rem,2.5vw,2.5rem);align-items:end}
.feature__media{grid-column:1/9;position:relative;overflow:hidden;background:var(--bone-2)}
.features > .feature:nth-child(even) .feature__media{grid-column:5/13;order:2}
.features > .feature:nth-child(even) .feature__info{grid-column:1/5;order:1}
.feature__info{grid-column:9/13;padding-bottom:.5rem}
.feature__title{margin:.6rem 0 .9rem}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--ease-out),filter 1.4s var(--ease-out)}
.feature:hover .feature__media img{transform:scale(1.045)}

/* malzeme şeridi */
.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--on-dark-25)}
.material{position:relative;background:var(--dark);aspect-ratio:3/4;overflow:hidden}
.material img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform 1.6s var(--ease-out),opacity .6s}
.material:hover img{transform:scale(1.06);opacity:1}
.material__label{
  position:absolute;left:1.25rem;bottom:1.25rem;z-index:2;color:var(--on-dark);
  font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;
}
.material::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 45%,rgba(20,17,16,.75))}

/* CTA bandı */
.cta{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
}
.cta__title{grid-column:1/8}
.cta__side{grid-column:9/13;padding-bottom:.75rem}

/* ---------- 9. KARTLAR / LİSTELER ---------- */
.card{display:block;position:relative;overflow:hidden}
.card__media{position:relative;overflow:hidden;background:var(--bone-2);margin-bottom:1.25rem}
.card__media img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.card:hover .card__media img{transform:scale(1.05)}
.card--wide .card__media img{aspect-ratio:4/3}
.card__title{margin-bottom:.5rem}
.card__text{color:var(--ink-70);font-size:var(--fs-body);max-width:44ch}
.card__meta{margin-top:.9rem}
.section--dark .card__text{color:var(--on-dark-60)}
.section--dark .card__media{background:var(--dark-2)}

/* index listesi (koleksiyon/proje kategorileri) */
.index-list{border-top:1px solid var(--ink-15)}
.index-list__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding-block:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--ink-15);
  transition:padding-inline .6s var(--ease-out),background .5s;
}
.index-list__row:hover{padding-inline:1.25rem;background:var(--bone-2)}
.index-list__row .arrow{transition:transform .5s var(--ease-out);opacity:.4}
.index-list__row:hover .arrow{transform:translateX(.5rem);opacity:1}
.section--dark .index-list,.section--dark .index-list__row{border-color:var(--on-dark-25)}
.section--dark .index-list__row:hover{background:var(--dark-2)}

/* journal listesi */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}

/* ---------- 10. FORM ---------- */
.form{display:grid;gap:1.75rem;max-width:640px}
.field{display:grid;gap:.6rem}
.field label{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45)}
.field input,.field textarea,.field select{
  font:inherit;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--ink-15);
  padding:.65rem 0;border-radius:0;transition:border-color .4s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--bronze)}
.field textarea{resize:vertical;min-height:120px}
.btn{
  display:inline-flex;align-items:center;gap:.75rem;justify-self:start;
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.2em;
  padding:1rem 2.25rem;border:1px solid var(--ink);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn--light{border-color:var(--on-dark)}
.btn--light:hover{background:var(--on-dark);color:var(--dark)}
.form__note{font-size:var(--fs-small);color:var(--ink-45)}

/* iletişim bilgi bloğu */
.info-block + .info-block{margin-top:2.5rem}
.info-block__label{margin-bottom:.6rem}
.info-block a:hover{color:var(--bronze)}

/* ---------- 11. FOOTER ---------- */
.footer{background:var(--dark);color:var(--on-dark);padding-block:clamp(3.5rem,7vw,6rem) 2rem}
.footer__top{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);
  padding-bottom:clamp(3rem,5vw,4.5rem);border-bottom:1px solid var(--on-dark-25);
}
.footer__brand{grid-column:1/5}
.footer__col{grid-column:span 2}
.footer__col:nth-of-type(1){grid-column:6/8}
.footer__col:nth-of-type(2){grid-column:8/10}
.footer__col:nth-of-type(3){grid-column:10/13}
.footer__col h4{
  font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-dark-60);font-weight:400;margin-bottom:1.25rem;
}
.footer__col li + li{margin-top:.65rem}
.footer__col a{font-size:var(--fs-body);opacity:.85;transition:opacity .3s}
.footer__col a:hover{opacity:1}
.footer__bottom{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:2rem;font-size:var(--fs-small);color:var(--on-dark-60);
}
.footer__note{max-width:34ch;color:var(--on-dark-60);margin-top:1.5rem}

/* ---------- 12. ANİMASYON (scroll reveal) ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}

/* Perde açılışı.
   NOT: burada clip-path KULLANILMAZ. clip-path elemanın görünür alanını
   sıfırladığı için IntersectionObserver hiç tetiklenmiyor ve lazy görseller
   yüklenmiyordu. Bunun yerine üstte, bölüm rengiyle aynı bir perde açılır. */
[data-reveal="mask"]{opacity:1;transform:none;position:relative;overflow:hidden}
[data-reveal="mask"]::after{
  content:'';position:absolute;inset:0;z-index:2;background:var(--reveal-bg);
  transform-origin:bottom;transition:transform 1.3s var(--ease-out);
}
[data-reveal="mask"].is-in::after{transform:scaleY(0)}
[data-reveal-delay="1"]{transition-delay:.10s}
[data-reveal-delay="2"]{transition-delay:.20s}
[data-reveal-delay="3"]{transition-delay:.30s}
[data-reveal-delay="4"]{transition-delay:.40s}

/* ---------- 13b. PROJE DETAY SAYFASI ---------- */
/* Kunye: sol etiket / sag deger, ince cizgilerle ayrilmis liste */
.kunye{border-top:1px solid var(--ink-15)}
.kunye__satir{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:1rem;padding-block:1rem;border-bottom:1px solid var(--ink-15);
}
.kunye__etiket{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.24em;
  color:var(--ink-45);padding-top:.28em;
}
.kunye__deger{font-size:var(--fs-body)}

/* Proje giris blogu: sol kunye, sag metin */
.proje-giris{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}

/* Acilis gorseli. Kaynak render 1250px genisliginde; ekrani kaplamak icin
   buyutmek bulanik sonuc verirdi. Bunun yerine olcegi sinirliyoruz -
   net ve kasitli duruyor. */
.proje-lead{max-width:1250px;margin-inline:auto}
.proje-lead img{width:100%;height:auto}

/* Galeri: 12 sutunlu izgara, tam ve yarim ogeler */
.galeri{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.25rem,3vw,3rem)}
.galeri figure{margin:0}
.galeri__item{grid-column:span 12}
.galeri__item--half{grid-column:span 6}
.galeri__item img{width:100%;height:auto;display:block;background:var(--bone-2)}
/* Tam genişlik görseller: kaynak 5:4 olduğu için 1350px genişlikte 1080px
   yüksekliğe çıkıyor ve dizüstü ekrana sığmıyordu. width:auto + max-height
   ikilisi görseli ekran yüksekliğine sığdırır ve oranını korur. Kırpma
   (object-fit) kullanmıyoruz — iç mekân görselinde kırpmak odanın
   yarısını götürüyor. */
.galeri__item--full img{width:auto;max-width:100%;max-height:78vh;margin-inline:auto}
.galeri__acik{margin-top:.85rem;font-size:var(--fs-small);color:var(--ink-45);max-width:52ch}

/* Moodboard bolumu */
.moodboard{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.moodboard__gorsel img{width:100%;height:auto}
.section--dark .kunye,.section--dark .kunye__satir{border-color:var(--on-dark-25)}
.section--dark .kunye__etiket,.section--dark .galeri__acik{color:var(--on-dark-60)}

/* Proje karti (projeler sayfasi ve ana sayfa) */
.proje-kart{display:block}
.proje-kart .card__media{margin-bottom:1.5rem}
.feature__info .num{margin-bottom:.55rem}
.proje-kart__kunye{
  display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:.9rem;
  font-size:var(--fs-small);color:var(--ink-45);
}

@media (max-width:900px){
  .proje-giris,.moodboard{grid-template-columns:1fr}
  .galeri__item--half{grid-column:span 12}
  .kunye__satir{grid-template-columns:1fr;gap:.25rem}
}


/* Tipografik dizin — ürün fotoğrafı olmayan bölümlerde kart yerine kullanılır.
   Yapay yer tutucu görsel koymaktansa boşluk ve tipografi ile çalışmak
   hem daha dürüst hem editoryal olarak daha güçlü. */
a.index-list__row{color:inherit}
.index-list__row .num{margin-bottom:.4rem}
.index-list__row .eyebrow{margin-bottom:.1rem}
.koleksiyon-ayrac{margin-block:clamp(2.5rem,5vw,4rem)}
.koleksiyon-ayrac:last-child{display:none}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width:1100px){
  .footer__top{grid-template-columns:repeat(6,1fr)}
  .footer__brand{grid-column:1/7;margin-bottom:1rem}
  .footer__col:nth-of-type(1){grid-column:1/3}
  .footer__col:nth-of-type(2){grid-column:3/5}
  .footer__col:nth-of-type(3){grid-column:5/7}
  .journal-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--header-h:64px}
  .nav{display:none}
  .burger{display:block}
  .header__end .lang{display:none}
  .sec-head{grid-template-columns:1fr}
  .split__media,.split__body,
  .split--flip .split__media,.split--flip .split__body{grid-column:1/-1}
  .split--flip .split__media{order:1}
  .split--flip .split__body{order:2}
  .feature__media,.feature__info,
  .features > .feature:nth-child(even) .feature__media,
  .features > .feature:nth-child(even) .feature__info{grid-column:1/-1;order:0}
  .feature__info{padding-top:1.25rem}
  .cta__title,.cta__side{grid-column:1/-1}
  .materials{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .index-list__row{grid-template-columns:1fr auto;row-gap:.5rem}
  .index-list__row .index-list__text{grid-column:1/-1;order:3}
}
@media (max-width:640px){
  .grid-2,.grid-3,.journal-grid{grid-template-columns:1fr}
  .hero__meta{flex-direction:column;align-items:flex-start}
  .sound-toggle,.scroll-cue{display:none}
  .footer__top{grid-template-columns:1fr}
  .footer__brand,.footer__col:nth-of-type(1),.footer__col:nth-of-type(2),.footer__col:nth-of-type(3){grid-column:1/-1}
  .footer__col{margin-top:2rem}
}

/* ---------- 14. YARDIMCI SINIFLAR ----------
   HTML'de satır içi (inline) `style` KULLANILMAZ. Sebebi güvenlik:
   Content-Security-Policy başlığında `style-src 'self'` kullanabilmek için
   satır içi stil olmamalı; aksi halde 'unsafe-inline' açmak zorunda kalırdık.
   Yeni bir ölçü gerekirse buraya sınıf eklenir.                                */
.t-center{text-align:center}
.mi-auto{margin-inline:auto}

.mt-xs{margin-top:.6rem}
.mt-sm{margin-top:.75rem}
.mt-md{margin-top:1rem}
.mt-lg{margin-top:1.25rem}
.mt-xl{margin-top:1.5rem}
.mt-2xl{margin-top:2.5rem}
.mt-sec{margin-top:clamp(2.5rem,4vw,3.5rem)}
.mt-sec-lg{margin-top:clamp(3rem,5vw,4.5rem)}

.mb-xs{margin-bottom:.9rem}
.mb-sm{margin-bottom:1rem}
.mb-md{margin-bottom:1.5rem}
.mb-lg{margin-bottom:1.75rem}
.mb-xl{margin-bottom:2rem}
.mr-md{margin-right:1.5rem}

.my-head{margin:1.25rem 0 1.75rem}
.my-card{margin:.6rem 0 .75rem}

/* 12'li grid içinde sabit sütun yerleşimleri */
.col-1-6{grid-column:1/6}
.col-7-13{grid-column:7/13}

/* journal kategori şeridi */
.cat-bar{
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--ink-15);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}

/* 404 sayfası */
.pagehead--center{min-height:70vh;display:flex;align-items:center}

@media (max-width:900px){
  .col-1-6,.col-7-13{grid-column:1/-1}
}

/* ---------- 15. ERİŞİLEBİLİRLİK ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--ink);color:var(--bone);padding:.75rem 1.25rem;
  font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;
  transition:top .3s;
}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-reveal="mask"]::after{display:none}
  .hero__title .line > span{transform:none}
  .hero__meta,.scroll-cue{opacity:1}
}