/* ArxiDom · kâğıt ve çizgi
   Açık kâğıt zemin, mürekkep çizgi, iki kalem rengi: kırmızı (A) ve mavi (D). */

:root {
  --kagit: #FDFDFC;
  --kagit-2: #F2F2EF;
  --kagit-3: #E4E3DE;
  --murekkep: #15171B;
  --grafit: #42464D;
  --sis: #767A81;
  --ince: rgba(21, 23, 27, .16);
  --ince-2: rgba(21, 23, 27, .08);
  --izgara: rgba(34, 71, 166, .055);
  --kirmizi: #C9352B;
  --mavi: #2247A6;
  --desen:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);

  --f-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --f-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --f-logo: "Instrument Serif", "Times New Roman", Georgia, serif;

  --t-mono: .8rem;
  --t-s: .95rem;
  --t-m: 1.125rem;
  --t-l: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --t-bas: clamp(2.7rem, 1.2rem + 4.4vw, 6.6rem);

  --kenar: clamp(16px, 3.6vw, 56px);
  --ust-h: 64px;
  --bolum: clamp(88px, 10vw, 168px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* Azərbaycanca (ə) ve Rusça (Kiril) harfleri Instrument yazı tiplerinde yok: bu dillerde tam karşılayan yazı tipleri */
html:lang(az), html:lang(ru) {
  --f-serif: "Noto Serif Display", "Times New Roman", Georgia, serif;
  --f-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 72%;
}
html:lang(az) .baslik-bol, html:lang(ru) .baslik-bol, html:lang(az) .pp-ad, html:lang(ru) .pp-ad, html:lang(az) .kl-bas h2, html:lang(ru) .kl-bas h2 { font-weight: 300; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--ust-h); }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 var(--t-m)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 3px; }
::selection { background: var(--kirmizi); color: var(--kagit); }
html.kilit { overflow: hidden; }

.atla {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  background: var(--murekkep); color: var(--kagit); padding: 10px 14px;
  font: 500 var(--t-s) var(--f-sans);
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.atla:focus { transform: none; }

.k { color: var(--kirmizi); }
.m { color: var(--mavi); }

/* ---------- etiket (mono, ince çizgiyle) */
.etiket {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
  font: 500 var(--t-mono)/1 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafit);
}
.etiket-cizgi { width: 36px; height: 1px; background: var(--kirmizi); transform-origin: left; }

/* ---------- başlıklar: kelime kelime yükselir, <em> altına kırmızı kalem çizgisi */
.baslik-bol {
  font-family: var(--f-serif); font-weight: 400;
  letter-spacing: -.012em; line-height: .98;
  margin: 0;
}
.baslik-bol em { font-style: italic; position: relative; display: inline-block; }
.baslik-bol .alti {
  position: absolute; left: -2%; width: 104%; bottom: -.04em; height: .16em;
  overflow: visible; pointer-events: none;
}
.baslik-bol .alti path {
  fill: none; stroke: var(--kirmizi); stroke-width: 3.2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease) .55s;
}
.js .baslik-bol .kl { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .04em .02em .12em; margin: -.04em -.02em -.12em; }
.js .baslik-bol .kl > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--g, 0) * 55ms);
}
.baslik-bol.gorundu .kl > span { transform: none; }
.baslik-bol.gorundu .alti path { stroke-dashoffset: 0; }

.js [data-goster] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-goster].gorundu { opacity: 1; transform: none; }
.js .etiket[data-goster] .etiket-cizgi { transform: scaleX(0); transition: transform .9s var(--ease) .2s; }
.js .etiket[data-goster].gorundu .etiket-cizgi { transform: none; }

/* ---------- açılış: büyük ARXIDOM, hızlı; sonra küçülüp sol üstteki logoya uçar */
.yukleyici {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: var(--kagit);
  transition: background-color .7s ease;
}
html:not(.js) .yukleyici { display: none; }
.yukleyici.ucuyor { background-color: rgba(253, 253, 252, 0); pointer-events: none; }
.yk-ic { display: grid; justify-items: start; gap: 2.2vw; }
.yk-ad {
  display: flex;
  font: 400 min(23vw, 40vh) / 1 var(--f-logo); font-stretch: normal; letter-spacing: .02em;
  color: var(--murekkep);
  transform-origin: 0 0;
}
.yk-h { display: block; overflow: hidden; padding: .02em 0 0; }
.yk-h i { display: block; font-style: normal; transform: translateY(104%); }
.yukleyici.ciz .yk-h i { transition: transform .85s var(--ease); transform: none; }
.yukleyici.ciz .yk-h:nth-child(2) i { transition-delay: .05s; }
.yukleyici.ciz .yk-h:nth-child(3) i { transition-delay: .1s; }
.yukleyici.ciz .yk-h:nth-child(4) i { transition-delay: .15s; }
.yukleyici.ciz .yk-h:nth-child(5) i { transition-delay: .2s; }
.yukleyici.ciz .yk-h:nth-child(6) i { transition-delay: .25s; }
.yukleyici.ciz .yk-h:nth-child(7) i { transition-delay: .3s; }
.yk-alt {
  display: flex; align-items: center; gap: 16px; width: 100%;
  font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit);
}
.yk-cizgi { flex: 1; height: 1px; background: linear-gradient(90deg, var(--kirmizi) 0 50%, var(--mavi) 50% 100%); transform: scaleX(0); transform-origin: left; }
.yk-alt span:last-child { opacity: 0; }
.yukleyici.ciz .yk-cizgi { transition: transform .9s var(--ease-io) .25s; transform: none; }
.yukleyici.ciz .yk-alt span:last-child { transition: opacity .6s ease .6s; opacity: 1; }
.yukleyici.ucuyor .yk-alt { transition: opacity .25s ease; opacity: 0; }
html.acilista .logo { visibility: hidden; }

/* ---------- üst şerit */
.ust {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--ust-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--kenar);
  transition: background-color .4s ease, box-shadow .4s ease, transform .5s var(--ease);
}
.ust.dolu { background: var(--kagit); box-shadow: 0 1px 0 var(--ince); }
.logo {
  font: 400 1.6rem/1 var(--f-logo); font-stretch: normal; letter-spacing: .02em;
  display: inline-flex; align-items: baseline;
}
.ust-menu { display: flex; gap: clamp(18px, 2.6vw, 40px); }
.ust-menu a, .mobil-menu nav a {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  font: 500 var(--t-s)/1 var(--f-sans); padding: 8px 0;
}
.ust-menu a i, .mobil-menu nav a i { font: 400 .72rem/1 var(--f-mono); font-style: normal; color: var(--sis); transition: color .3s; }
.ust-menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--kirmizi); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.ust-menu a:hover::after, .ust-menu a.aktif::after { transform: scaleX(1); transform-origin: left; }
.ust-menu a:hover i, .ust-menu a.aktif i { color: var(--kirmizi); }
.diller { display: flex; align-items: center; gap: 2px; margin-left: clamp(12px, 2vw, 28px); padding-left: clamp(12px, 2vw, 28px); border-left: 1px solid var(--ince); }
.dil {
  display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px;
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .06em; color: var(--grafit);
  transition: color .25s, box-shadow .25s;
}
a.dil:hover { color: var(--murekkep); box-shadow: inset 0 -1px 0 var(--murekkep); }
.dil.etkin { color: var(--kirmizi); box-shadow: inset 0 -2px 0 var(--kirmizi); }
.ust-menu + .diller { margin-left: clamp(12px, 2vw, 28px); }
.ust { justify-content: flex-start; }
.ust .logo { margin-right: auto; }
.diller-mobil { display: none; }
.menu-ac { display: none; align-items: center; gap: 12px; font: 500 var(--t-mono) var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0; }
.menu-ac-cizgi { position: relative; width: 26px; height: 10px; }
.menu-ac-cizgi i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--murekkep); transition: transform .45s var(--ease), top .45s var(--ease); }
.menu-ac-cizgi i:first-child { top: 1px; }
.menu-ac-cizgi i:last-child { top: 7px; background: var(--kirmizi); }
.menu-ac[aria-expanded="true"] .menu-ac-cizgi i:first-child { top: 4px; transform: rotate(35deg); }
.menu-ac[aria-expanded="true"] .menu-ac-cizgi i:last-child { top: 4px; transform: rotate(-35deg); }

.mobil-menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--kagit);
  padding: calc(var(--ust-h) + 32px) var(--kenar) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-io);
}
.mobil-menu.acik { clip-path: inset(0 0 0 0); }
.mobil-menu nav { display: flex; flex-direction: column; }
.mobil-menu nav a {
  font: 400 clamp(2.6rem, 11vw, 4rem)/1 var(--f-serif);
  padding: 16px 0; border-bottom: 1px solid var(--ince); gap: 16px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.mobil-menu nav a i { font-size: .72rem; }
.mobil-menu.acik nav a { opacity: 1; transform: none; }
.mobil-menu.acik nav a:nth-child(2) { transition-delay: .06s; }
.mobil-menu.acik nav a:nth-child(3) { transition-delay: .12s; }
.mobil-menu.acik nav a:nth-child(4) { transition-delay: .18s; }
.mobil-menu .diller-mobil { display: flex; margin: 28px 0 0; padding: 0; border: 0; gap: 8px; }
.mobil-menu { justify-content: flex-start; }
.mobil-menu .mm-alt { margin-top: auto; }
.mobil-menu .dil { min-width: 48px; height: 40px; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--ince); }
.mobil-menu .dil.etkin { box-shadow: inset 0 0 0 1.5px var(--kirmizi); }
.mm-alt { margin: 0; font: 500 var(--t-mono) var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); }

/* ---------- sağ kenarda cetvel */
.cetvel {
  position: fixed; right: 20px; top: 50%; z-index: 40;
  height: 44vh; width: 12px; transform: translateY(-50%);
  pointer-events: none;
}
.cetvel-cizgi {
  position: absolute; inset: 0 0 0 auto; width: 9px;
  background:
    linear-gradient(var(--murekkep), var(--murekkep)) right / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--sis) 0 1px, transparent 1px 10px) right / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--murekkep) 0 1px, transparent 1px 50px) right / 9px 100% no-repeat;
  opacity: .55;
}
.cetvel-imlec {
  position: absolute; right: -8px; top: 0; transform: translateY(-50%);
  padding: 7px 3px; background: var(--kagit); box-shadow: 0 0 0 1px var(--kirmizi);
}
.cetvel-imlec span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 500 .64rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kirmizi);
}
html.kilit .cetvel { opacity: 0; }

/* ---------- giriş: çizgiden yapıya */
.giris { position: relative; height: 330vh; z-index: 1; }
.giris-yapis {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(300px, 31%) 1fr;
  align-items: center; column-gap: clamp(28px, 3.6vw, 72px);
  padding: calc(var(--ust-h) + 8px) var(--kenar) 34px;
  transform: scale(calc(1 - var(--ust, 0) * .07)) translateY(calc(var(--ust, 0) * -3vh));
  transform-origin: 50% 0;
}
.giris-yapis::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--murekkep); opacity: calc(var(--ust, 0) * .14);
}
.giris-sol { align-self: center; max-width: 520px; }
.giris-baslik { font-size: clamp(2.6rem, 1.3rem + 3.3vw, 5.4rem); }
.giris-metin {
  margin: 26px 0 0; max-width: 42ch;
  font-size: var(--t-m); color: var(--grafit);
}
.js .giris-sol .etiket, .js .giris-metin, .js .adimlar { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .giris-sol .etiket-cizgi { transform: scaleX(0); transition: transform 1s var(--ease) .3s; }
.giris.basladi .giris-sol .etiket, .giris.basladi .giris-metin, .giris.basladi .adimlar { opacity: 1; transform: none; }
.giris.basladi .giris-metin { transition-delay: .35s; }
.giris.basladi .adimlar { transition-delay: .5s; }
.giris.basladi .etiket-cizgi { transform: none; }

.adimlar { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--ince); }
.adimlar li {
  position: relative;
  display: grid; grid-template-columns: 34px 96px 1fr; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--ince);
  color: var(--sis); transition: color .5s ease;
}
.adimlar li::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--kirmizi); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.adimlar li.aktif { color: var(--murekkep); }
.adimlar li.aktif::before { transform: scaleX(1); }
.adimlar li.gecti { color: var(--grafit); }
.ad-no { font: 500 .76rem var(--f-mono); }
.adimlar li.aktif .ad-no { color: var(--kirmizi); }
.adimlar b { font: 400 1.35rem/1 var(--f-serif); }
.ad-not { font-size: var(--t-s); }

.cizim {
  margin: 0; justify-self: end; align-self: center;
  width: min(100%, calc((100svh - var(--ust-h) - 150px) * 1.791));
}
.cizim-alan {
  position: relative; aspect-ratio: 1800 / 1005;
  background-color: #FFFFFF;
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 2.5% 4.48%;
  box-shadow: 0 0 0 1px var(--murekkep), 0 0 0 7px var(--kagit), 0 0 0 8px var(--ince), 0 30px 60px -30px rgba(21, 23, 27, .25);
  overflow: hidden;
  cursor: crosshair;
}
.cizim-alan > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cz-kil { mix-blend-mode: multiply; opacity: 0; }
.cz-isik { clip-path: inset(0 100% 0 0); }
.cz-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cz-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.cz-b { stroke: var(--murekkep); stroke-width: calc(var(--s, 2) * 1.5px); }
.cz-zemin { stroke: var(--murekkep); stroke-width: calc(var(--s, 2) * 2.8px); }
.cz-z { stroke: var(--murekkep); stroke-width: calc(var(--s, 2) * 1.4px); }
.cz-d { stroke: var(--murekkep); stroke-width: calc(var(--s, 2) * .9px); opacity: .85; }
.cz-c { stroke: var(--grafit); stroke-width: calc(var(--s, 2) * 1px); opacity: .75; }
.cz-t { stroke: var(--grafit); stroke-width: calc(var(--s, 2) * .7px); opacity: .55; }
.cz-hayalet { stroke: var(--grafit); stroke-width: calc(var(--s, 2) * .8px); opacity: .5; }
.cz-tarama-g { opacity: 0; }
.ds-cati { stroke: var(--grafit); stroke-width: 1.4; opacity: .55; }
.ds-cam { stroke: var(--mavi); stroke-width: 1.6; opacity: .55; }
.ds-zemin { stroke: var(--murekkep); stroke-width: 1.6; }
.cz-cam { fill: var(--mavi); opacity: .08; }
.cz-notlar path { stroke-dashoffset: 1; }
.nt-k { stroke: var(--kirmizi); stroke-width: calc(var(--s, 2) * 1.1px); }
.nt-n { stroke: var(--grafit); stroke-width: calc(var(--s, 2) * .9px); }
.nt-u { stroke: var(--murekkep); stroke-width: calc(var(--s, 2) * 2.4px); }
.nt-u2 { stroke: var(--murekkep); stroke-width: calc(var(--s, 2) * .8px); }
.nt-nokta { fill: var(--grafit); opacity: 0; }
.nt-yazi { font: 500 23px var(--f-mono); letter-spacing: .06em; opacity: 0; }
.nt-yazi-k { fill: var(--kirmizi); font-size: 28px; }
.nt-yazi-n { fill: var(--grafit); }
.nt-yazi-u { fill: var(--murekkep); font-size: 30px; letter-spacing: .14em; }
.nt-aks { opacity: 0; transform-box: fill-box; }
.nt-aks line { stroke-width: calc(var(--s, 2) * 1px); stroke-dasharray: 16 9; }
.nt-aks circle { fill: #FFFFFF; stroke-width: calc(var(--s, 2) * 1.2px); }
.nt-aks text { font: 400 30px var(--f-logo); }
.nt-aks-k line, .nt-aks-k circle { stroke: var(--kirmizi); }
.nt-aks-k text { fill: var(--kirmizi); }
.nt-aks-m line, .nt-aks-m circle { stroke: var(--mavi); }
.nt-aks-m text { fill: var(--mavi); }
.cz-tarama {
  position: absolute; top: -2%; bottom: -2%; left: 0; width: 2px; margin-left: -1px;
  background: var(--kirmizi); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(201, 53, 43, .12);
}
.cz-arti { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.cz-arti.acik { opacity: 1; }
.arti-y, .arti-d { position: absolute; background: var(--mavi); opacity: .55; }
.arti-y { left: 0; right: 0; top: var(--y); height: 1px; }
.arti-d { top: 0; bottom: 0; left: var(--x); width: 1px; }
.arti-yazi {
  position: absolute; left: var(--x); top: var(--y); transform: translate(12px, 10px);
  padding: 4px 7px; background: var(--murekkep); color: var(--kagit);
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .06em; white-space: pre;
}
.cz-arti.sol .arti-yazi { transform: translate(calc(-100% - 12px), 10px); }

.antet {
  display: grid; grid-template-columns: 1.1fr 1.5fr 1fr .6fr;
  margin-top: 16px; border: 1px solid var(--murekkep);
  font-size: .84rem;
}
.antet > span { padding: 7px 12px 9px; border-left: 1px solid var(--murekkep); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.antet > span:first-child { border-left: 0; }
.antet small { display: block; margin-bottom: 3px; font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); }
.antet b { font-weight: 500; color: var(--kirmizi); }

.kaydir {
  position: absolute; left: var(--kenar); bottom: 26px; margin: 0;
  display: flex; align-items: center; gap: 12px;
  font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit);
  transition: opacity .4s;
}
.kaydir-cizgi { position: relative; width: 1px; height: 34px; background: var(--ince); overflow: hidden; }
.kaydir-cizgi::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--kirmizi);
  animation: kaydir 2.2s var(--ease-io) infinite;
}
@keyframes kaydir { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- bölümler */
.bolum { position: relative; padding: var(--bolum) var(--kenar); }
.bolum-bas { display: grid; grid-template-columns: 1fr minmax(240px, 34ch); align-items: end; gap: 16px 48px; margin-bottom: clamp(48px, 6vw, 96px); }
.bolum-bas .etiket { grid-column: 1 / -1; }
.bolum-baslik { font-size: var(--t-bas); }
.bolum-not { margin: 0 0 .4em; color: var(--grafit); max-width: 40ch; }

/* projeler, giriş paftasının üstüne kayan yeni bir pafta gibi gelir */
.projeler {
  z-index: 2;
  margin-top: -100vh; margin-top: -100svh;
  background: var(--kagit);
  box-shadow: 0 -1px 0 var(--murekkep), 0 -40px 80px -20px rgba(21, 23, 27, .22);
  padding-top: calc(var(--bolum) * .8);
}
.arsiv, .studyo, .iletisim, .alt { position: relative; z-index: 2; background: var(--kagit); }
.pafta-sirti {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between;
  padding: 10px var(--kenar);
  border-bottom: 1px solid var(--ince);
  font: 500 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit);
}

/* ---------- proje paftaları */
.pj-liste {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 44px); row-gap: clamp(64px, 7vw, 128px);
  align-items: start;
}
.pj { position: relative; display: block; grid-column: var(--kol); margin-top: var(--ust-bosluk, 0); }
.pj:nth-child(5n + 1) { --kol: 1 / span 7; --oran: 16 / 10; }
.pj:nth-child(5n + 2) { --kol: 9 / span 4; --oran: 1 / 1; --ust-bosluk: 16vw; }
.pj:nth-child(5n + 3) { --kol: 2 / span 5; --oran: 5 / 4; }
.pj:nth-child(5n + 4) { --kol: 7 / span 6; --oran: 3 / 2; --ust-bosluk: 9vw; }
.pj:nth-child(5n + 5) { --kol: 3 / span 8; --oran: 16 / 9; }
.pj-gorsel { position: relative; display: block; }
.pj-cerceve {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--oran);
  background: var(--kagit-2);
  box-shadow: 0 0 0 1px var(--murekkep);
}
.pj-cerceve img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pj-kayma {
  position: absolute; inset: 0; pointer-events: none;
  border: 1px solid; opacity: 0;
  transition: transform .7s var(--ease), opacity .4s ease;
}
.pj-kayma.k { border-color: var(--kirmizi); }
.pj-kayma.m { border-color: var(--mavi); }
.pj:hover .pj-kayma, .pj:focus-visible .pj-kayma { opacity: 1; }
.pj:hover .pj-kayma.k, .pj:focus-visible .pj-kayma.k { transform: translate(-8px, -8px); }
.pj:hover .pj-kayma.m, .pj:focus-visible .pj-kayma.m { transform: translate(8px, 8px); }
.pj:hover .pj-cerceve img { transform: scale(1.035); }
.pj-antet {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 16px;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--murekkep);
}
.pj-no { font: 500 .76rem var(--f-mono); letter-spacing: .1em; color: var(--grafit); transition: color .3s; }
.pj:hover .pj-no { color: var(--kirmizi); }
.pj-ad { font: 400 clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem)/1.05 var(--f-serif); }
.pj-yer { font: 500 .76rem var(--f-mono); letter-spacing: .08em; color: var(--grafit); text-transform: uppercase; text-align: right; }
.pj-tur { grid-column: 2 / -1; font-size: var(--t-s); color: var(--grafit); }
.pj-fikir {
  display: block; margin-top: 14px; max-width: 34ch;
  font: italic 400 var(--t-l)/1.25 var(--f-serif);
}
.pj-fikir::before { content: attr(data-et); font: 500 .68rem var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--kirmizi); vertical-align: .3em; }
.pj-ac {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  padding: 7px 10px; background: var(--kagit); box-shadow: 0 0 0 1px var(--murekkep);
  font: 500 .70rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .5s var(--ease);
}
.pj:hover .pj-ac { opacity: 1; transform: none; }

.js .pj .pj-cerceve { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-io); }
.js .pj .pj-cerceve img { transform: scale(1.14); }
.js .pj.gorundu .pj-cerceve { clip-path: inset(0 0 0 0); }
.js .pj.gorundu .pj-cerceve img { transform: none; transition: transform 1.6s var(--ease); }
.js .pj.gorundu:hover .pj-cerceve img { transform: scale(1.035); }
.pj-gorsel::after {
  content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 2px; background: var(--kirmizi);
  opacity: 0; pointer-events: none;
}
.js .pj.gorundu .pj-gorsel::after { animation: tara 1.25s var(--ease-io); }
@keyframes tara { 0% { top: 0; opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.js .pj .pj-antet { border-top-color: transparent; position: relative; }
.js .pj .pj-antet::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--murekkep); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .35s; }
.js .pj.gorundu .pj-antet::before { transform: none; }
.js .pj .pj-antet > *, .js .pj .pj-fikir { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: .55s; }
.js .pj.gorundu .pj-antet > *, .js .pj.gorundu .pj-fikir { opacity: 1; transform: none; }
.js .pj.gorundu .pj-fikir { transition-delay: .7s; }

/* ---------- arşiv: pafta dolabı çekmeceleri */
.ar-liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--murekkep); }
.ar {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 92px 1fr auto 56px; align-items: center; column-gap: 20px;
  padding: 26px 0 26px;
}
.ar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--murekkep); transform-origin: left; }
.ar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--kagit-2); transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--ease);
}
.ar:hover::after, .ar:focus-visible::after { transform: none; }
.ar-kod { font: 500 .80rem var(--f-mono); letter-spacing: .1em; color: var(--grafit); padding-left: 4px; transition: color .3s; }
.ar:hover .ar-kod { color: var(--kirmizi); }
.ar-ad { font: 400 clamp(2rem, 1.2rem + 2.6vw, 4rem)/1 var(--f-serif); transition: transform .6s var(--ease); }
.ar:hover .ar-ad { transform: translateX(14px); }
.ar-ad em { font-style: italic; }
.ar-sayi { font: 500 .80rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); }
.ar-ok { justify-self: end; margin-right: 6px; position: relative; width: 34px; height: 1px; background: var(--murekkep); transition: width .5s var(--ease), background-color .3s; }
.ar-ok::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); transform-origin: 100% 0; color: var(--murekkep); }
.ar:hover .ar-ok { width: 50px; background: var(--kirmizi); }
.ar:hover .ar-ok::after { color: var(--kirmizi); }
.ar-cekmece { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.ar-cekmece > span { overflow: hidden; min-height: 0; display: flex; gap: 12px; padding-left: 112px; }
.ar-cekmece img {
  height: 116px; width: auto; flex: none; margin-top: 20px;
  box-shadow: 0 0 0 1px var(--murekkep);
  opacity: 0; transform: translateX(-24px);
  transition: opacity .5s ease, transform .7s var(--ease);
}
.ar:hover .ar-cekmece, .ar:focus-visible .ar-cekmece { grid-template-rows: 1fr; }
.ar:hover .ar-cekmece img, .ar:focus-visible .ar-cekmece img { opacity: 1; transform: none; transition-delay: calc(var(--g) * 60ms + .1s); }
.js .ar::before { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.js .ar.gorundu::before { transform: none; }
.js .ar > :not(.ar-cekmece) { opacity: 0; transition: opacity .8s ease .25s; }
.js .ar.gorundu > :not(.ar-cekmece) { opacity: 1; }

/* ---------- stüdyo ve lejant */
.studyo { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 120px); align-items: start; }
.st-sol { position: sticky; top: calc(var(--ust-h) + 40px); }
.st-metin { margin: 30px 0 0; max-width: 46ch; font-size: var(--t-l); line-height: 1.5; color: var(--murekkep); }
.lejant { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--murekkep); counter-reset: lj; }
.lejant li {
  display: grid; grid-template-columns: 64px 44px 1fr; align-items: start; gap: 6px 18px;
  padding: 26px 0; border-bottom: 1px solid var(--ince);
}
.lj-simge { width: 56px; height: 56px; margin-top: -4px; overflow: visible; }
.lj-simge path, .lj-simge circle, .lj-simge rect { fill: none; stroke: var(--murekkep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lj-simge .k { stroke: var(--kirmizi); }
.lj-simge .m { stroke: var(--mavi); }
.lj-no { font: 500 .78rem var(--f-mono); color: var(--grafit); padding-top: 8px; }
.lejant b { display: block; font: 400 1.75rem/1.1 var(--f-serif); }
.lejant p { margin: 8px 0 0; color: var(--grafit); max-width: 48ch; }
.js .lejant li .lj-simge > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-io) .2s; }
.js .lejant li.gorundu .lj-simge > * { stroke-dashoffset: 0; }
.js .lejant li > :not(.lj-simge) { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .lejant li.gorundu > :not(.lj-simge) { opacity: 1; transform: none; }

/* ---------- iletişim: antet tablosu */
.iletisim { padding-bottom: calc(var(--bolum) * .8); }
.iletisim-baslik { max-width: 14ch; margin-bottom: clamp(48px, 6vw, 88px); }
.il-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--murekkep); }
.il-liste li + li { border-top: 1px solid var(--murekkep); }
.il {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(150px, 22%) 1fr 56px; align-items: center;
}
.il::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--murekkep); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.il-tur { align-self: stretch; display: flex; align-items: center; padding: 0 18px; border-right: 1px solid var(--murekkep); font: 500 .76rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); transition: color .4s, border-color .4s; }
.il-deger { padding: 20px 24px; font: 400 clamp(1.5rem, 1rem + 1.8vw, 2.8rem)/1.1 var(--f-serif); transition: color .4s, transform .6s var(--ease); overflow-wrap: anywhere; }
.il-ok { justify-self: center; width: 22px; height: 22px; position: relative; transition: transform .6s var(--ease); }
.il-ok::before { content: ""; position: absolute; left: 2px; top: 50%; width: 18px; height: 1px; background: currentColor; transform: rotate(-45deg); }
.il-ok::after { content: ""; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-top: 1px solid; border-right: 1px solid; }
.il:hover::after, .il:focus-visible::after { transform: none; }
.il:hover .il-deger, .il:focus-visible .il-deger { color: var(--kagit); transform: translateX(10px); }
.il:hover .il-tur, .il:focus-visible .il-tur { color: var(--kagit-3); border-color: rgba(253, 253, 252, .25); }
.il:hover .il-ok, .il:focus-visible .il-ok { color: var(--kagit); transform: translate(3px, -3px); }
.il-liste li:first-child .il:hover .il-tur { color: #F08A80; }

/* ---------- alt */
.alt { padding: 0 var(--kenar) 26px; overflow: hidden; }
.alt-ad { width: 100%; height: auto; overflow: visible; margin: 0 auto -.6vw; }
.alt-ad text {
  font: 400 220px var(--f-logo); font-stretch: normal;
  fill: transparent; stroke: var(--murekkep); stroke-width: .8;
  stroke-dasharray: 1800; stroke-dashoffset: 1800;
  color: var(--murekkep);
}
.alt-ad tspan.k { stroke: var(--kirmizi); color: var(--kirmizi); }
.alt-ad tspan.m { stroke: var(--mavi); color: var(--mavi); }
.alt-ad.gorundu text { animation: yk-yazi 2.4s var(--ease-io) forwards; }
.alt-ad.gorundu tspan { animation: yk-dolu .8s ease 1.8s forwards; }
@keyframes yk-yazi { to { stroke-dashoffset: 0; } }
@keyframes yk-dolu { to { fill: currentColor; } }
.alt-satir { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--murekkep); font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit); }

/* ---------- pafta (proje ve klasör sayfası) */
.pafta { position: fixed; inset: 0; z-index: 60; }
.pafta[hidden] { display: none; }
.pafta-perde { position: absolute; inset: 0; background: rgba(21, 23, 27, .38); opacity: 0; transition: opacity .7s ease; }
.pafta.acik .pafta-perde { opacity: 1; }
.pafta-kagit {
  position: absolute; inset: 2.4vh 2.4vw 0;
  background: var(--kagit);
  box-shadow: 0 0 0 1px var(--murekkep), 0 -30px 80px rgba(0, 0, 0, .25);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(104%) rotate(1.2deg); transform-origin: 0 100%;
  transition: transform .95s var(--ease);
  outline: none;
}
.pafta.acik .pafta-kagit { transform: none; }
.pafta.kapaniyor .pafta-kagit { transition: transform .6s var(--ease-io); transform: translateY(104%); }
.pafta.kapaniyor .pafta-perde { transition-duration: .5s; opacity: 0; }
.pafta-ust {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 56px; padding: 0 clamp(16px, 2.6vw, 40px);
  background: var(--kagit); border-bottom: 1px solid var(--murekkep);
}
.pafta-kod { font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kirmizi); }
.pafta-yol { font: 400 1.2rem var(--f-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.pafta-kagit.kaydi .pafta-yol { opacity: 1; }
.kapat {
  justify-self: end; display: inline-flex; align-items: center; gap: 12px;
  font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 0;
}
.kapat i { position: relative; width: 22px; height: 22px; transition: transform .5s var(--ease); }
.kapat i::before, .kapat i::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.5px; background: var(--murekkep); transform: rotate(45deg); }
.kapat i::after { transform: rotate(-45deg); background: var(--kirmizi); }
.kapat:hover i { transform: rotate(90deg); }
.pafta-icerik { padding: clamp(28px, 4vw, 64px) clamp(16px, 4vw, 72px) clamp(56px, 6vw, 96px); }
.pafta-gecis {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  display: grid; place-items: center;
  background: var(--murekkep); color: var(--kagit);
  font: italic 400 clamp(2.6rem, 6vw, 6rem) var(--f-serif);
  transform: translateY(100%);
}
.pafta-gecis.gel { transition: transform .6s var(--ease-io); transform: none; }
.pafta-gecis.git { transition: transform .7s var(--ease-io); transform: translateY(-100%); }

/* proje sayfası */
.pp-bas { display: grid; grid-template-columns: 1fr; gap: 26px; }
.pp-kapak { position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--murekkep); aspect-ratio: 21 / 9; background: var(--kagit-2); }
.pp-kapak img { width: 100%; height: 100%; object-fit: cover; animation: pp-kapak 1.6s var(--ease) both .25s; }
@keyframes pp-kapak { from { transform: scale(1.12); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0); } }
.pp-satir { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 40px; }
.pp-ad { margin: 0; font: 400 clamp(2.8rem, 1.4rem + 4.6vw, 6.8rem)/.95 var(--f-serif); letter-spacing: -.012em; }
.pp-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; font: 500 .76rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit); }
.pp-meta span + span::before { content: "·"; margin-right: 18px; color: var(--sis); }
.pp-govde { display: grid; grid-template-columns: 5fr 7fr; gap: 40px clamp(32px, 5vw, 96px); margin-top: clamp(40px, 5vw, 80px); padding-top: 28px; border-top: 1px solid var(--murekkep); }
.pp-fikir .etiket { margin-bottom: 14px; }
.pp-fikir blockquote { margin: 0; font: italic 400 clamp(1.9rem, 1.2rem + 2vw, 3.2rem)/1.08 var(--f-serif); }
.pp-fikir blockquote::before { content: "“"; color: var(--kirmizi); margin-right: .05em; }
.pp-fikir blockquote::after { content: "”"; color: var(--kirmizi); }
.pp-metin p { margin: 0 0 1em; max-width: 62ch; }
.pp-metin p:first-child { font-size: var(--t-l); line-height: 1.45; }
.pp-kunye { margin: 30px 0 0; border: 1px solid var(--murekkep); }
.pp-kunye div { display: grid; grid-template-columns: minmax(110px, 28%) 1fr; }
.pp-kunye div + div { border-top: 1px solid var(--murekkep); }
.pp-kunye dt { padding: 10px 14px; border-right: 1px solid var(--murekkep); font: 500 .72rem/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit); }
.pp-kunye dd { margin: 0; padding: 10px 14px; font-size: var(--t-s); }
.pp-sayilar { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }
.pp-sayilar li { position: relative; padding-top: 22px; }
.pp-sayilar li::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--kirmizi); }
.pp-sayilar li::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 13px; background: var(--kirmizi); box-shadow: 0 0 0 0 transparent; }
.pp-sayilar b { display: block; font: 400 clamp(2.4rem, 1.6rem + 2vw, 3.6rem)/1 var(--f-serif); }
.pp-sayilar span { font: 500 .74rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit); }

.sekmeler { position: sticky; top: 56px; z-index: 4; display: flex; flex-wrap: wrap; gap: 0; margin: clamp(48px, 6vw, 96px) 0 28px; background: var(--kagit); border-bottom: 1px solid var(--murekkep); }
.sekme {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 14px 18px 12px; font: 400 1.25rem/1 var(--f-serif); color: var(--grafit);
  transition: color .3s;
}
.sekme small { font: 500 .68rem var(--f-mono); color: var(--sis); }
.sekme::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--kirmizi); transform: scaleX(0); transition: transform .5s var(--ease); }
.sekme:hover { color: var(--murekkep); }
.sekme[aria-selected="true"] { color: var(--murekkep); }
.sekme[aria-selected="true"]::after { transform: none; }
.sekme[aria-selected="true"] small { color: var(--kirmizi); }

.md-izgara { columns: 3 300px; column-gap: 22px; }
.md-izgara.giriyor .md { animation: md-gir .8s var(--ease) both; animation-delay: calc(var(--g, 0) * 55ms); }
@keyframes md-gir { from { opacity: 0; transform: translateY(26px); } }
.md { display: block; width: 100%; margin: 0 0 26px; break-inside: avoid; text-align: left; }
.md-cerceve { position: relative; display: block; overflow: hidden; background: var(--kagit-2); box-shadow: 0 0 0 1px var(--murekkep); }
.md-cerceve img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.md:hover .md-cerceve img { transform: scale(1.04); }
.md-cerceve::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--kirmizi); transition: box-shadow .4s var(--ease); pointer-events: none; }
.md:hover .md-cerceve::after, .md:focus-visible .md-cerceve::after { box-shadow: inset 0 0 0 3px var(--kirmizi); }
.md-yazi { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-size: var(--t-s); color: var(--grafit); }
.md-yazi i { font: 500 .72rem var(--f-mono); font-style: normal; color: var(--sis); }
.md:hover .md-yazi { color: var(--murekkep); }
.md:hover .md-yazi i { color: var(--kirmizi); }
.md-rozet {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--kagit); box-shadow: 0 0 0 1px var(--murekkep);
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
}
.md-rozet::before { content: ""; width: 0; height: 0; border-left: 8px solid var(--kirmizi); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.md-yarim { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.md-yarim img { width: 100%; height: 100%; object-fit: cover; }
.md-kiyas .md-cerceve::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--kirmizi); z-index: 2; }
.kl-grup + .kl-grup { margin-top: clamp(40px, 5vw, 72px); }
.kl-proje { display: flex; align-items: baseline; gap: 14px; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--ince); font: 400 1.7rem/1.1 var(--f-serif); }
.kl-proje small { font: 500 .72rem var(--f-mono); letter-spacing: .12em; color: var(--grafit); }
.kl-bas { display: grid; grid-template-columns: 1fr minmax(240px, 40ch); align-items: end; gap: 16px 48px; margin-bottom: clamp(40px, 5vw, 72px); }
.kl-bas h2 { margin: 0; font: 400 clamp(2.8rem, 1.4rem + 4.6vw, 6.8rem)/.95 var(--f-serif); letter-spacing: -.012em; }
.kl-bas p:not(.etiket) { margin: 0; color: var(--grafit); }
.pp-sonraki {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px;
  margin-top: clamp(56px, 7vw, 120px); padding-top: 22px; border-top: 1px solid var(--murekkep);
}
.pp-sonraki small { grid-column: 1 / -1; font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); }
.pp-sonraki span { font: 400 clamp(2.4rem, 1.2rem + 4vw, 5.6rem)/1 var(--f-serif); transition: transform .7s var(--ease); }
.pp-sonraki .ar-ok { margin-bottom: 1.6vw; }
.pp-sonraki:hover span { transform: translateX(16px); font-style: italic; }
.pp-sonraki:hover .ar-ok { width: 70px; background: var(--kirmizi); }
.pp-sonraki:hover .ar-ok::after { color: var(--kirmizi); }

/* ---------- görsel bakışı */
.bakis { position: fixed; inset: 0; z-index: 80; background: rgba(253, 253, 252, .97); opacity: 0; transition: opacity .45s ease; }
.bakis[hidden] { display: none; }
.bakis.acik { opacity: 1; }
.bakis-sahne { position: absolute; inset: 64px 88px 84px; display: grid; place-items: center; }
.bk-oge { position: relative; box-shadow: 0 0 0 1px var(--murekkep), 0 30px 80px -30px rgba(21, 23, 27, .35); background: var(--kagit-2); }
.bk-oge img, .bk-oge video { width: 100%; height: 100%; object-fit: contain; background: var(--kagit-2); }
.bk-oge.gir { animation: bk-gir .7s var(--ease) both; }
.bk-oge.gir-sol { animation: bk-gir-sol .7s var(--ease) both; }
@keyframes bk-gir { from { opacity: 0; transform: translateX(60px); } }
@keyframes bk-gir-sol { from { opacity: 0; transform: translateX(-60px); } }
.bakis-alt { position: absolute; left: 88px; right: 88px; bottom: 26px; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
.bakis-yazi { margin: 0; font: 400 1.3rem/1.2 var(--f-serif); }
.bakis-yazi small { display: block; margin-bottom: 4px; font: 500 .68rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); }
.bakis-sayi { font: 500 .78rem var(--f-mono); letter-spacing: .1em; color: var(--grafit); white-space: nowrap; }
.bakis-kapat { position: absolute; right: 28px; top: 14px; }
.bakis-ok { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; display: grid; place-items: center; }
.bakis-ok i { position: relative; width: 30px; height: 1px; background: var(--murekkep); transition: width .4s var(--ease), background-color .3s; }
.bakis-ok i::after { content: ""; position: absolute; top: -4px; width: 9px; height: 9px; border-top: 1px solid var(--murekkep); }
.bakis-onceki { left: 20px; }
.bakis-sonraki { right: 20px; }
.bakis-onceki i::after { left: 0; border-left: 1px solid var(--murekkep); transform: rotate(-45deg); transform-origin: 0 0; top: 0; }
.bakis-sonraki i::after { right: 0; border-right: 1px solid var(--murekkep); transform: rotate(45deg); transform-origin: 100% 0; top: 0; }
.bakis-ok:hover i { width: 40px; background: var(--kirmizi); }
.bakis-ok[hidden] { display: none; }

.kiyas { position: relative; width: 100%; height: 100%; user-select: none; touch-action: pan-y; cursor: ew-resize; --k: 50%; }
.kiyas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ky-ust { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--k)); }
.ky-cizgi { position: absolute; top: 0; bottom: 0; left: var(--k); width: 2px; margin-left: -1px; background: var(--kirmizi); }
.ky-tut {
  position: absolute; top: 50%; left: var(--k); width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--kagit); box-shadow: 0 0 0 1.5px var(--kirmizi);
  display: grid; place-items: center; font: 500 .76rem var(--f-mono); color: var(--kirmizi);
}
.ky-et { position: absolute; top: 14px; padding: 6px 9px; background: var(--kagit); box-shadow: 0 0 0 1px var(--murekkep); font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.ky-et.sol { left: 14px; }
.ky-et.sag { right: 14px; }

/* ---------- 3B gezi */
.gezi { position: fixed; inset: 0; z-index: 85; background: var(--kagit); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .8s var(--ease); }
.gezi[hidden] { display: none; }
.gezi.acik { transform: none; }
.gezi-ust { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 56px; padding: 0 clamp(16px, 2.6vw, 40px); border-bottom: 1px solid var(--murekkep); }
.gezi-baslik { font: 400 1.2rem var(--f-serif); }
.gezi-cerceve { flex: 1; width: 100%; border: 0; background: #fff; }

/* ---------- orta ekranlar */
@media (max-width: 1100px) {
  .cetvel { display: none; }
  .giris-yapis { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; row-gap: 22px; }
  .giris-sol { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: end; }
  .giris-sol .etiket { grid-column: 1 / -1; }
  .giris-baslik { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4rem); }
  .giris-metin { margin: 0; font-size: var(--t-s); }
  .adimlar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 20px; border-top: 0; }
  .adimlar li { grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px 10px 10px 0; }
  .ad-not { display: none; }
  .adimlar b { font-size: 1.15rem; }
  .cizim { justify-self: center; width: clamp(260px, calc((100svh - var(--ust-h) - 360px) * 1.791), 100%); }
  .kaydir { display: none; }
  .studyo { grid-template-columns: 1fr; }
  .st-sol { position: static; }
  .pp-govde { grid-template-columns: 1fr; }
}

/* ---------- telefon */
@media (max-width: 760px) {
  :root { --ust-h: 56px; --t-m: 1rem; }
  .ust-menu, .ust > .diller { display: none; }
  .menu-ac { display: inline-flex; }
  .logo { font-size: 1.55rem; }
  .giris { height: 300vh; }
  .giris-yapis { padding-top: calc(var(--ust-h) + 4px); padding-bottom: 20px; row-gap: 18px; }
  .giris-sol { display: block; }
  .giris-baslik { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .giris-metin { margin-top: 12px; font-size: .9rem; line-height: 1.5; }
  .adimlar { margin-top: 14px; }
  .adimlar li { grid-template-columns: 1fr; padding: 8px 6px 8px 0; row-gap: 2px; }
  .adimlar b { font-size: 1.05rem; }
  .cizim { width: clamp(260px, calc((100svh - var(--ust-h) - 380px) * 1.791), 100%); }
  .cizim-alan { cursor: default; }
  .nt-yazi:not(.nt-yazi-k) { display: none; }
  .antet { grid-template-columns: 1fr 1fr; font-size: .78rem; }
  .antet > span:nth-child(3) { border-left: 0; }
  .antet > span:nth-child(n + 3) { border-top: 1px solid var(--murekkep); }
  .antet > span { white-space: normal; }
  .bolum-bas { grid-template-columns: 1fr; }
  .pafta-sirti span:nth-child(3) { display: none; }
  .pj-liste { grid-template-columns: 1fr; row-gap: 56px; }
  .pj, .pj:nth-child(n) { grid-column: 1; margin-top: 0; }
  .pj:nth-child(n) { --oran: 4 / 3; }
  .pj-antet { grid-template-columns: auto 1fr; }
  .pj-yer { grid-column: 2; text-align: left; }
  .pj-ac { display: none; }
  .ar { grid-template-columns: 52px 1fr 34px; row-gap: 6px; padding: 20px 0; }
  .ar-sayi { grid-column: 2; grid-row: 2; }
  .ar-ok { grid-column: 3; grid-row: 1; width: 24px; }
  .ar-cekmece { grid-template-rows: 1fr; }
  .ar-cekmece > span { padding-left: 72px; gap: 8px; }
  .ar-cekmece img { height: 54px; margin-top: 12px; opacity: 1; transform: none; }
  .ar-cekmece img:nth-child(n + 4) { display: none; }
  .lejant li { grid-template-columns: 48px 1fr; }
  .lj-simge { width: 44px; height: 44px; grid-row: span 2; }
  .lj-no { padding-top: 0; }
  .il { grid-template-columns: 1fr 40px; }
  .il-tur { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--murekkep); padding: 9px 14px; }
  .il-deger { padding: 14px; font-size: 1.45rem; }
  .pafta-kagit { inset: 0; }
  .pafta-ust { grid-template-columns: 1fr auto; }
  .pafta-yol { display: none; }
  .pp-satir { grid-template-columns: 1fr; }
  .pp-meta { justify-content: flex-start; }
  .pp-kapak { aspect-ratio: 4 / 3; }
  .kl-bas { grid-template-columns: 1fr; }
  .sekme { padding: 12px 12px 10px; font-size: 1.05rem; }
  .bakis-sahne { inset: 60px 12px 110px; }
  .bakis-alt { left: 16px; right: 16px; bottom: 60px; }
  .bakis-ok { top: auto; bottom: 8px; margin-top: 0; }
  .bakis-onceki { left: 8px; }
  .bakis-sonraki { right: 8px; }
  .bakis-kapat { right: 16px; top: 8px; }
}

/* alçak pencerelerde giriş sahnesi ekrana sığsın */
@media (max-width: 1100px) and (max-height: 760px) {
  .giris-metin { display: none; }
}

/* yan çevrilmiş telefon gibi çok alçak ekranlar: sahne yapışmasın, normal aksın */
@media (max-height: 480px) {
  .giris { height: auto; }
  .giris-yapis { position: relative; height: auto; transform: none; padding-top: calc(var(--ust-h) + 24px); row-gap: 20px; }
  .giris-yapis::after { display: none; }
  .projeler { margin-top: 0; }
  .cizim { width: min(100%, 640px); }
  .kaydir { display: none; }
}

@media (max-height: 640px) and (min-width: 1101px) {
  .adimlar { margin-top: 20px; }
  .adimlar li { padding: 7px 0; }
  .giris-metin { margin-top: 16px; }
}

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

/* ---------- çerez bildirimi, e-posta kutusu ve gizlilik ayrıntıları */
.cerez {
  position: fixed; right: 18px; bottom: 18px; z-index: 110;
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 36px); overflow-y: auto;
  display: grid; gap: 12px; padding: 18px 18px 16px;
  background: var(--kagit); color: var(--murekkep);
  box-shadow: 0 0 0 1px var(--murekkep), 0 24px 60px -20px rgba(21, 23, 27, .35);
  transform: translateY(24px); opacity: 0; transition: transform .5s var(--ease), opacity .4s ease;
}
.cerez.acik { transform: none; opacity: 1; }
.cerez-et { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kirmizi); }
.cerez-et::before { content: ""; width: 24px; height: 1px; background: var(--kirmizi); }
.cerez-metin { margin: 0; font-size: .92rem; line-height: 1.5; }
.cerez-bag { padding: 0; font: inherit; color: var(--mavi); text-decoration: underline; text-underline-offset: 3px; }
.cerez-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cerez-dugme { min-height: 42px; padding: 0 16px; font: 600 .9rem var(--f-sans); box-shadow: inset 0 0 0 1px var(--murekkep); transition: background-color .2s, color .2s; }
.cerez-dugme:hover { background: var(--kagit-2); }
.cerez-dugme.dolu { background: var(--murekkep); color: var(--kagit); }
.cerez-dugme.dolu:hover { background: #000; }
.bulten { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ince); }
.bulten-soru { margin: 0; font: 400 1.15rem/1.2 var(--f-serif); }
.bulten-satir { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.bulten input[type=email] { min-width: 0; min-height: 42px; padding: 0 12px; border: 0; box-shadow: inset 0 0 0 1px var(--ince); background: #fff; font: 400 .92rem var(--f-sans); color: var(--murekkep); }
.bulten input[type=email]:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--mavi); }
.bulten-onay { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: .8rem; line-height: 1.45; color: var(--grafit); cursor: pointer; }
.bulten-onay input { margin: 2px 0 0; accent-color: var(--kirmizi); }
.bulten-durum { margin: 0; font-size: .82rem; }
.bulten-durum:empty { display: none; }
.bulten-durum.hata { color: var(--kirmizi); }
.bulten-durum.tamam { color: #2E7D4F; }
.alt-cerez { padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.alt-cerez:hover { color: var(--kirmizi); }
.gizlilik { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(21, 23, 27, .4); }
.gizlilik-kart { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 12px; padding: 26px 24px; background: var(--kagit); box-shadow: 0 0 0 1px var(--murekkep); }
.gizlilik-kart h2 { margin: 0 0 4px; font: 400 2rem/1.05 var(--f-serif); }
.gizlilik-kart p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--grafit); }
.gizlilik-kart a { color: var(--mavi); }
.gizlilik-kart .cerez-dugme { justify-self: start; margin-top: 6px; }
@media (max-width: 760px) {
  .cerez { right: 12px; left: 12px; bottom: 12px; width: auto; }
}