/* SVARA Art Studio
   Renk: gece mavisi zemin, logodaki lacivert, kağıt beyazı, sis grisi ve logodaki çizginin kehribar rengi.
   Yazı: Archivo (geniş başlık + metin), IBM Plex Mono (ölçü ve etiket), Montserrat (yalnız logo).
   Düzen: kısa ana sayfa; görseller, planlar, geziler ve filmler tıklanınca açılan klasörlerde. */

:root {
  color-scheme: dark;
  --gece: #0A0E15;
  --gece-2: #111824;
  --gece-3: #18212F;
  --lacivert: #1D2738;
  --kagit: #E9EDF2;
  --kagit-2: #F7F8FA;
  --sis: #8C97A8;
  --sis-2: #5B6678;
  --cizgi: rgba(233, 237, 242, .12);
  --cizgi-2: rgba(233, 237, 242, .22);
  --kehribar: #D9A066;
  --kehribar-2: #EBC193;

  --f-gosterim: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-metin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-logo: "Montserrat", "Archivo", Arial, sans-serif;

  --t-xs: .75rem;
  --t-s: .875rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  --t-xl: clamp(2.2rem, 1.2rem + 3.6vw, 4.8rem);

  --kenar: clamp(16px, 4.2vw, 64px);
  --ust-h: 68px;
  --bolum: clamp(80px, 9vw, 150px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--gece);
  color: var(--kagit);
  font-family: var(--f-metin);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--kehribar); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--kehribar); color: var(--gece); }
[hidden] { display: none !important; }
.kilit, .kilit body { overflow: hidden; }

.site { position: relative; overflow-x: clip; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite text, .ust-logo svg, .alt-kelime { font-family: var(--f-logo); font-weight: 600; font-size: 284px; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--kehribar); color: var(--gece); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.atla:focus { top: 16px; }

/* ---------- ortak parçalar */
.etiket {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
  font: 500 var(--t-xs)/1.4 var(--f-mono);
  letter-spacing: .16em;
  color: var(--sis);
}
.etiket::before { content: ""; width: 28px; height: 1px; background: var(--kehribar); flex: none; }

.bolum-baslik {
  margin: 0;
  font-family: var(--f-gosterim);
  font-stretch: 125%;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: .96;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.bolum-baslik em { font-style: normal; color: var(--kehribar); }
.bolum-baslik .k { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .1em; margin: -.14em 0 -.1em; }
.bolum-baslik .k > span { display: inline-block; }

.bolum-bas { padding-inline: var(--kenar); margin-bottom: clamp(32px, 4.4vw, 64px); }
.bolum-bas-yan { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.bolum-not { margin: 0; max-width: 38ch; color: var(--sis); font-size: var(--t-s); }

.dugme {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid var(--cizgi-2); border-radius: 999px;
  background: rgba(10, 14, 21, .35);
  font: 500 var(--t-s)/1 var(--f-metin); letter-spacing: .01em;
  color: var(--kagit);
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dugme::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--kagit); border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.dugme:hover::before, .dugme:focus-visible::before { transform: none; }
.dugme:hover, .dugme:focus-visible { color: var(--gece); border-color: var(--kagit); }
.dugme-dolu { background: var(--kehribar); border-color: var(--kehribar); color: var(--gece); }

.yuvarla { display: inline-block; overflow: hidden; vertical-align: top; }
.yuvarla > span { display: inline-block; position: relative; transition: transform .5s var(--ease); }
.yuvarla > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; color: var(--kehribar); }
.yuvarla:hover > span, .yuvarla:focus-visible > span { transform: translateY(-100%); }

.cip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(10, 14, 21, .58); border: 1px solid var(--cizgi); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.cip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kehribar); }
.pj-meta { margin: 0; font: 500 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .16em; color: var(--kehribar-2); }

/* ---------- yükleyici */
.yukleyici {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--gece);
  pointer-events: none;
  animation: yk-kac 0s linear 8s forwards;
}
.yukleyici.bitti { display: none; }
@keyframes yk-kac { to { visibility: hidden; } }
.yk-cizgi { width: min(380px, 60vw); overflow: visible; }
.yk-cizgi .ciz { fill: none; stroke: var(--kehribar); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.yk-alt {
  position: absolute; left: var(--kenar); right: var(--kenar); bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: flex-end;
  font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; color: var(--sis);
}
.yk-sayi { font: 600 clamp(3rem, 10vw, 7rem)/.8 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.03em; color: var(--kagit); font-variant-numeric: tabular-nums; }
html:not(.anim) .yukleyici { display: none; }

/* ---------- imleç ve ilerleme çizgisi */
.imlec {
  position: fixed; left: 0; top: 0; z-index: 350;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--kehribar);
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s;
  will-change: transform;
}
.imlec.gorunur { opacity: 1; }
.imlec.buyuk { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.imlec.bas { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.imlec-yazi { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--gece); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.imlec.buyuk .imlec-yazi { opacity: 1; }
@media (hover: none), (pointer: coarse) { .imlec { display: none; } }

.ilerleme { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 260; background: var(--kehribar); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- üst menü */
.ust {
  position: fixed; left: 0; right: 0; top: 0; z-index: 250;
  height: calc(var(--ust-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--kenar) 0;
  display: flex; align-items: center; gap: 28px;
  transition: transform .6s var(--ease), background-color .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.ust.dolu { background: rgba(10, 14, 21, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--cizgi); }
.ust.saklan { transform: translateY(-100%); }
.ust-logo { display: block; width: 118px; color: var(--kagit); flex: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ust.logo-gizli .ust-logo { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.ust-logo svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.ust-menu { display: flex; gap: 26px; margin-left: auto; font-size: var(--t-s); }
.ust-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--kagit); color: var(--gece); font-size: var(--t-s); font-weight: 600; }
.menu-ac { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; font: 500 var(--t-s)/1 var(--f-mono); letter-spacing: .1em; }
.menu-ac-cizgi { position: relative; width: 26px; height: 10px; }
.menu-ac-cizgi::before, .menu-ac-cizgi::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-ac-cizgi::before { top: 0; } .menu-ac-cizgi::after { top: 8px; }
.menu-ac[aria-expanded="true"] .menu-ac-cizgi::before { top: 4px; transform: rotate(45deg); }
.menu-ac[aria-expanded="true"] .menu-ac-cizgi::after { top: 4px; transform: rotate(-45deg); }

.mobil-menu {
  position: fixed; inset: 0; z-index: 240;
  background: var(--gece);
  padding: calc(var(--ust-h) + 24px + env(safe-area-inset-top, 0px)) var(--kenar) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mobil-menu nav { display: grid; gap: 2px; }
.mobil-menu a { font: 700 clamp(2.2rem, 11vw, 3.6rem)/1.08 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.02em; overflow: hidden; }
.mobil-menu a:hover, .mobil-menu a:focus-visible { color: var(--kehribar); }

@media (max-width: 1080px) {
  .ust-menu, .ust-cta { display: none; }
  .menu-ac { display: inline-flex; }
}

/* ---------- giriş */
.giris {
  position: relative;
  height: 100vh; height: 100svh; min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(217, 160, 102, .10), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #142035 0%, var(--gece) 62%);
  cursor: crosshair;
}
.giris-sahne { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.webgl-yok .giris { background: linear-gradient(180deg, rgba(10,14,21,.4), var(--gece) 92%), url("../medya/kadikoy/k/kose.webp") center/cover; }
.giris::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, transparent, var(--gece));
  pointer-events: none;
}
.giris-icerik {
  position: absolute; z-index: 2; left: var(--kenar); right: var(--kenar);
  top: calc(var(--ust-h) + clamp(18px, 6vh, 72px));
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.giris-icerik::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: min(1100px, 120%); aspect-ratio: 2.2; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(10, 14, 21, .62), rgba(10, 14, 21, 0)); pointer-events: none; }
.giris-etiket { justify-content: center; text-align: center; }
.giris-etiket::after { content: ""; width: 28px; height: 1px; background: var(--kehribar); flex: none; }
.kelime { margin: 0; width: min(940px, 100%, calc((100svh - 400px) * 1.92)); min-width: min(100%, 420px); line-height: 0; }
.kelime-svg { width: 100%; height: auto; overflow: visible; }
.kelime-svg text { font-family: var(--f-logo); font-weight: 600; font-size: 284px; fill: var(--kagit); }
.kelime-svg .harf path { stroke: var(--kagit); }
.kelime-svg .alt-yazi { font-weight: 500; font-size: 56px; fill: var(--kagit); opacity: .82; }
.logo-cizgi path { fill: none; stroke: var(--kehribar); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(217, 160, 102, .55)); }

.giris-alt {
  position: absolute; z-index: 2; left: var(--kenar); right: var(--kenar);
  bottom: calc(clamp(24px, 5vh, 56px) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  pointer-events: none;
}
.giris-alt a, .giris-alt button { pointer-events: auto; }
.giris-sol { display: grid; gap: 26px; max-width: 520px; }
.giris-slogan { margin: 0; font-size: var(--t-l); line-height: 1.35; color: var(--kagit); text-wrap: pretty; }
.giris-slogan .k { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .12em; margin: -.1em 0 -.12em; }
.giris-slogan .k > span { display: inline-block; }
.giris-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.giris-sag { display: grid; justify-items: end; gap: 22px; }
.sayilar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 40px); }
.sayilar li { display: grid; gap: 4px; text-align: right; }
.sayilar b { font: 700 clamp(1.6rem, 1rem + 1.6vw, 2.6rem)/1 var(--f-gosterim); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.sayilar span { font: 500 11px/1.2 var(--f-mono); letter-spacing: .14em; color: var(--sis); }
.ses-kutu { display: flex; align-items: center; gap: 14px; }
.ses { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex: none; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: rgba(10, 14, 21, .45); font: 500 12px/1 var(--f-mono); letter-spacing: .08em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ses[aria-pressed="true"] { border-color: var(--kehribar); color: var(--kehribar); }
.ses-cubuk { display: flex; align-items: center; gap: 2px; height: 14px; }
.ses-cubuk i { width: 2px; height: 30%; background: currentColor; border-radius: 1px; }
.ses[aria-pressed="true"] .ses-cubuk i { animation: cubuk 1s var(--ease) infinite alternate; }
.ses-cubuk i:nth-child(2) { animation-delay: -.3s !important; } .ses-cubuk i:nth-child(3) { animation-delay: -.6s !important; } .ses-cubuk i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes cubuk { from { height: 20%; } to { height: 100%; } }
.ipucu { margin: 0; font: 400 12px/1.4 var(--f-mono); color: var(--sis); }
.asagi { position: absolute; z-index: 2; left: 50%; bottom: 18px; width: 1px; height: 46px; background: var(--cizgi-2); overflow: hidden; transform: translateX(-50%); }
.asagi span { position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--kehribar); animation: inis 2.2s var(--ease-io) infinite; }
@keyframes inis { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

@media (max-width: 900px) {
  .giris-alt { flex-direction: column; align-items: stretch; gap: 22px; }
  .giris-sag { justify-items: start; }
  .sayilar li { text-align: left; }
  .asagi { display: none; }
}
@media (max-width: 560px) {
  .giris-icerik { top: calc(var(--ust-h) + 4svh); }
  .giris-etiket::before, .giris-etiket::after { display: none; }
  .giris-dugmeler .dugme { flex: 1 1 auto; }
  .ipucu { display: none; }
  .sayilar { gap: 18px; }
}

/* ---------- kayan şerit */
.serit { position: relative; z-index: 3; padding-block: clamp(16px, 2.6vw, 30px); border-block: 1px solid var(--cizgi); overflow: hidden; background: var(--gece); }
.serit-ic { display: flex; width: max-content; will-change: transform; }
.serit-grup { display: flex; align-items: center; flex: none; }
.serit-kelime { font: 800 clamp(2.2rem, 1rem + 4.4vw, 5rem)/1 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.02em; padding-inline: .35em; white-space: nowrap; }
.serit-kelime.bos { color: transparent; -webkit-text-stroke: 1px var(--sis-2); }
.serit-dalga { width: clamp(44px, 6vw, 84px); height: auto; flex: none; fill: none; stroke: var(--kehribar); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- projeler: kısa ızgara (telefonda yana kayan şerit) */
.projeler { padding-block: var(--bolum); }
.pj-izgara {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 27vh, 300px); grid-auto-flow: dense;
  gap: 14px; padding-inline: var(--kenar);
}
.pjk { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--gece-2); grid-column: span 3; isolation: isolate; outline-offset: 4px; }
.pjk:nth-child(5n + 1) { grid-column: span 4; grid-row: span 2; }
.pjk:nth-child(5n + 2), .pjk:nth-child(5n + 3) { grid-column: span 2; }
.pjk-gorsel { position: absolute; inset: 0; overflow: hidden; }
.pjk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .5s var(--ease); }
.pjk:hover .pjk-gorsel img { transform: scale(1.06); }
.pjk-gorsel .pjk-flip { opacity: 0; }
.pjk-gorsel .pjk-flip.gor { opacity: 1; }
.pjk-golge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,21,0) 35%, rgba(10,14,21,.88) 100%); }
.pjk-bilgi { position: absolute; left: clamp(16px, 2vw, 28px); right: 76px; bottom: clamp(16px, 2vw, 26px); display: grid; gap: 8px; }
.pjk-ad { display: block; font: 700 clamp(1.3rem, .8rem + 1.3vw, 2.1rem)/.98 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.02em; }
.pjk:nth-child(5n + 1) .pjk-ad { font-size: clamp(2rem, 1rem + 3.2vw, 4.4rem); max-width: 12ch; }
.pjk-ad .sat { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .08em; margin: -.12em 0 -.08em; }
.pjk-ad .sat > span { display: inline-block; }
.pjk-tur { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; color: rgba(233, 237, 242, .72); }
.pjk-ok { position: absolute; right: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cizgi-2); background: rgba(10,14,21,.35); transition: background-color .4s, color .4s, transform .6s var(--ease); }
.pjk:hover .pjk-ok, .pjk:focus-visible .pjk-ok { background: var(--kehribar); border-color: var(--kehribar); color: var(--gece); transform: rotate(-45deg); }
/* tablet: iki sütun, ilk proje tam genişlikte; isimler sıkışmasın */
@media (min-width: 761px) and (max-width: 1100px) {
  .pj-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 30vh, 320px); }
  .pjk, .pjk:nth-child(5n + 1), .pjk:nth-child(5n + 2), .pjk:nth-child(5n + 3) { grid-column: span 1; grid-row: auto; }
  .pjk:nth-child(5n + 1) { grid-column: span 2; }
  .pjk:nth-child(5n + 1) .pjk-ad { font-size: clamp(2rem, 1rem + 3vw, 3.4rem); }
}
@media (max-width: 760px) {
  .pj-izgara { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--kenar); overscroll-behavior-x: contain; }
  .pj-izgara::-webkit-scrollbar { display: none; }
  .pjk { flex: 0 0 82%; height: min(62svh, 520px); scroll-snap-align: start; border-radius: 16px; }
  .pjk:nth-child(5n + 1) .pjk-ad { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .pjk-ad { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* ---------- klasörler */
.klasorler { padding-bottom: var(--bolum); }
.klasor-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px) clamp(16px, 2.2vw, 32px); padding-inline: var(--kenar); }
.klasor { display: grid; gap: 16px; padding: 0; border: 0; background: none; color: inherit; text-align: left; outline-offset: 6px; }
.klasor-govde { position: relative; display: block; aspect-ratio: 1.18; margin-top: 14%; perspective: 900px; }
.klasor-arka { position: absolute; inset: 0; border-radius: 4px 16px 16px 16px; background: linear-gradient(180deg, #24324A, #172131); }
.klasor-arka::before { content: ""; position: absolute; left: 0; bottom: calc(100% - 1px); width: 44%; height: 13%; background: #24324A; border-radius: 10px 10px 0 0; clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); }
.klasor-kagit { position: absolute; left: 11%; right: 11%; top: -7%; height: 76%; border-radius: 6px; overflow: hidden; background: var(--gece-3); box-shadow: 0 12px 26px -10px rgba(0,0,0,.7); transform-origin: 50% 100%; transition: transform .75s var(--ease); }
.klasor-kagit img { width: 100%; height: 100%; object-fit: cover; }
.klasor.plan .klasor-kagit { background: #fff; }
.klasor.plan .klasor-kagit img { object-position: 50% 0; }
.klasor-kagit.k1 { transform: translate(-7%, 7%) rotate(-6deg); }
.klasor-kagit.k2 { transform: translate(7%, 4%) rotate(5deg); }
.klasor-kagit.k3 { transform: none; }
.klasor:hover .k1, .klasor:focus-visible .k1 { transform: translate(-30%, -16%) rotate(-15deg); }
.klasor:hover .k2, .klasor:focus-visible .k2 { transform: translate(30%, -18%) rotate(13deg); }
.klasor:hover .k3, .klasor:focus-visible .k3 { transform: translateY(-24%); }
.klasor-on {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px 16px;
  border-radius: 8px 8px 16px 16px; border-top: 1px solid rgba(233, 237, 242, .2);
  background: linear-gradient(180deg, rgba(40, 56, 82, .9), rgba(20, 28, 42, .98));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .6);
  transform-origin: 50% 100%; transition: transform .75s var(--ease);
}
.klasor:hover .klasor-on, .klasor:focus-visible .klasor-on { transform: rotateX(-20deg); }
.klasor-sayi { font: 800 clamp(1.8rem, 1rem + 1.8vw, 3rem)/1 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.klasor-on svg { width: clamp(38px, 4vw, 56px); height: auto; fill: none; stroke: var(--kehribar); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.klasor-alt { display: grid; gap: 4px; }
.klasor-alt b { font: 700 clamp(1.1rem, .9rem + .6vw, 1.45rem)/1.1 var(--f-gosterim); font-stretch: 112%; transition: color .3s; }
.klasor-alt span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; color: var(--sis); }
.klasor:hover .klasor-alt b { color: var(--kehribar); }
@media (max-width: 980px) { .klasor-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 60px; } }
@media (max-width: 620px) {
  .klasor-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .klasor-izgara > .klasor:last-child:nth-child(odd) { grid-column: span 2; }
  .klasor-izgara > .klasor:last-child:nth-child(odd) .klasor-govde { aspect-ratio: 2.3; margin-top: 7%; }
  .klasor-izgara > .klasor:last-child:nth-child(odd) .klasor-kagit { left: 28%; right: 28%; }
}

/* ---------- stüdyo, iletişim, alt bilgi */
.studyo { padding: var(--bolum) var(--kenar); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; border-top: 1px solid var(--cizgi); }
.studyo-sol { display: grid; gap: 22px; }
.studyo-sol .etiket { margin: 0; }
.studyo-metin { margin: 0; max-width: 56ch; color: rgba(233,237,242,.84); }
.hizmet-kap { position: relative; }
.hizmetler { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.hizmetler li { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 18px 12px; border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.hizmetler li::before { content: ""; position: absolute; inset: 0; background: var(--kehribar); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease); z-index: -1; }
.hizmetler li:hover::before { transform: scaleY(1); }
.hizmetler li:hover { color: var(--gece); }
.hizmetler b { font: 700 clamp(1.2rem, .9rem + 1vw, 1.8rem)/1.05 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.015em; transition: transform .6s var(--ease); }
.hizmetler li:hover b { transform: translateX(10px); }
.hizmetler span { grid-column: 1; color: var(--sis); font-size: var(--t-s); transition: color .4s; }
.hizmetler li:hover span { color: rgba(10,14,21,.75); }
.hizmetler em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 500 14px/1 var(--f-mono); font-style: normal; color: var(--sis-2); }
.hizmetler li:hover em { color: var(--gece); }
.hizmet-gorsel { position: fixed; left: 0; top: 0; z-index: 5; width: 280px; height: 196px; object-fit: cover; border-radius: 12px; pointer-events: none; opacity: 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
@media (hover: none), (pointer: coarse) { .hizmet-gorsel { display: none; } }
@media (max-width: 900px) { .studyo { grid-template-columns: 1fr; } }

.iletisim { padding: var(--bolum) var(--kenar); display: grid; gap: 30px; border-top: 1px solid var(--cizgi); background: radial-gradient(70% 60% at 85% 100%, rgba(217,160,102,.12), transparent 70%); }
.iletisim .etiket { margin: 0; }
.iletisim-baslik { font-size: clamp(2.2rem, 1rem + 4.4vw, 5.4rem); max-width: 16ch; }
.iletisim-liste { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--cizgi); max-width: 1100px; }
.iletisim-liste a, .il-sabit { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto; align-items: center; gap: 6px 24px; padding: clamp(16px, 2vw, 24px) 12px; border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.iletisim-liste a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kehribar); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.iletisim-liste a:hover::before, .iletisim-liste a:focus-visible::before { transform: scaleY(1); }
.iletisim-liste a:hover, .iletisim-liste a:focus-visible { color: var(--gece); }
.il-tur { font: 500 11px/1.3 var(--f-mono); letter-spacing: .16em; color: var(--sis); transition: color .4s; }
.iletisim-liste a:hover .il-tur, .iletisim-liste a:focus-visible .il-tur { color: rgba(10, 14, 21, .7); }
.il-deger { font: 700 clamp(1.1rem, .8rem + 1.6vw, 2.2rem)/1.15 var(--f-gosterim); font-stretch: 112%; letter-spacing: -.01em; overflow-wrap: anywhere; transition: transform .6s var(--ease); }
.iletisim-liste a:hover .il-deger, .iletisim-liste a:focus-visible .il-deger { transform: translateX(10px); }
.il-ok { font: 500 18px/1 var(--f-mono); color: var(--kehribar); transition: color .4s, transform .6s var(--ease); }
.iletisim-liste a:hover .il-ok, .iletisim-liste a:focus-visible .il-ok { color: var(--gece); transform: rotate(45deg); }
@media (max-width: 620px) {
  .iletisim-liste a, .il-sabit { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 4px; }
  .il-tur { grid-column: 1 / -1; }
}

.alt { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: end; gap: 28px 56px; padding: clamp(40px, 5vw, 72px) var(--kenar) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cizgi); overflow: hidden; }
.alt-kelime { display: block; width: 100%; height: auto; overflow: visible; color: var(--kagit); fill: currentColor; }
.alt-dalga { fill: none; stroke: var(--kehribar); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.alt-satir { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font: 400 12px/1.5 var(--f-mono); color: var(--sis); text-align: right; }
@media (max-width: 900px) { .alt { grid-template-columns: 1fr; } .alt-satir { align-items: flex-start; text-align: left; } }

/* ---------- karo (klasör içindeki görsel kutuları) */
.izgara { columns: 3 300px; column-gap: 14px; }
.karo { position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--gece-2); text-align: left; break-inside: avoid; color: inherit; }
.karo.gizle { display: none; }
.karo-gorsel { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar, 1.5); background: var(--gece-3); }
.karo-gorsel img, .karo-gorsel video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.karo:hover .karo-gorsel img, .karo:hover .karo-gorsel video, .karo:focus-visible .karo-gorsel img { transform: scale(1.07); }
.karo-tur { position: absolute; top: 10px; left: 10px; }
.karo-oynat { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: rgba(10,14,21,.55); border: 1px solid var(--cizgi-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .5s var(--ease), background-color .4s; }
.karo-oynat svg { width: 22px; height: 22px; fill: var(--kagit); margin-left: 3px; }
.karo:hover .karo-oynat { transform: scale(1.12); background: var(--kehribar); }
.karo-alt { display: grid; gap: 2px; padding: 12px 14px 14px; font-size: var(--t-s); line-height: 1.35; color: var(--sis); }
.karo-alt b { color: var(--kagit); font-weight: 500; }
.karo.plan .karo-gorsel { background: var(--kagit-2); }
.karo.plan .karo-gorsel img { object-fit: contain; }
@media (max-width: 700px) {
  .izgara { columns: 2; column-gap: 10px; }
  .karo { margin-bottom: 10px; border-radius: 10px; }
  .karo-alt { padding: 9px 10px 11px; font-size: 12px; }
  .karo-tur { top: 7px; left: 7px; }
  .karo-tur.cip { min-height: 24px; padding: 0 8px; font-size: 10px; }
}

.suzgec { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--cizgi); border-radius: 26px; width: fit-content; max-width: 100%; }
.suzgec-isaret { position: absolute; left: 0; top: 4px; height: calc(100% - 8px); width: 0; border-radius: 999px; background: var(--kagit); transition: transform .6s var(--ease), width .6s var(--ease), top .6s var(--ease); z-index: 0; }
.suzgec button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 500 var(--t-s)/1 var(--f-metin); color: var(--sis); transition: color .4s; }
.suzgec button sup { font: 500 10px/1 var(--f-mono); color: inherit; opacity: .7; }
.suzgec button[aria-pressed="true"] { color: var(--gece); }
.suzgec button:not([aria-pressed="true"]):hover { color: var(--kagit); }

/* ---------- katmanlar: proje sayfası ve klasör sayfası */
.katman { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--gece); -webkit-overflow-scrolling: touch; }
.proje-sayfa { z-index: 300; }
.klasor-sayfa { z-index: 305; }
.ps-kapat { position: fixed; z-index: 5; top: calc(14px + env(safe-area-inset-top, 0px)); right: var(--kenar); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: rgba(10,14,21,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 var(--t-s)/1 var(--f-metin); }
.ps-kapat:hover { background: var(--kagit); color: var(--gece); }

.ks-ic { display: grid; gap: 28px; padding: calc(24px + env(safe-area-inset-top, 0px)) var(--kenar) calc(72px + env(safe-area-inset-bottom, 0px)); }
.ks-bas { padding-right: 120px; }
.ks-bas .etiket { margin-bottom: 14px; }
.ks-baslik { margin: 0; font: 800 clamp(2.4rem, 1rem + 5vw, 6.4rem)/.9 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.035em; }
.ks-baslik .sat { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .08em; margin: -.12em 0 -.08em; }
.ks-baslik .sat > span { display: inline-block; }
.ks-baslik sup { font: 500 1rem/1 var(--f-mono); letter-spacing: .06em; color: var(--kehribar); vertical-align: top; margin-left: .4em; }
@media (max-width: 560px) { .ks-bas { padding-right: 0; padding-top: 48px; } }

.ps-kapak { position: relative; height: 80svh; min-height: 480px; overflow: hidden; display: grid; align-items: end; }
.ps-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-kapak::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,21,.25), rgba(10,14,21,0) 35%, rgba(10,14,21,.92)); }
.ps-kapak-yazi { position: relative; z-index: 1; padding: 0 var(--kenar) clamp(28px, 4vw, 56px); display: grid; gap: 18px; }
.ps-ad { margin: 0; font: 800 clamp(2.8rem, 1rem + 7vw, 9rem)/.88 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.04em; max-width: 11ch; }
.ps-ad .sat { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .08em; margin: -.12em 0 -.08em; }
.ps-ad .sat > span { display: inline-block; }
.ps-giris { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px clamp(40px, 6vw, 110px); padding: clamp(56px, 7vw, 110px) var(--kenar) clamp(40px, 5vw, 72px); }
.ps-fikir { margin: 0; font: 600 clamp(1.7rem, 1rem + 2.4vw, 3.2rem)/1.08 var(--f-gosterim); font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; }
.ps-fikir::before { content: "“"; color: var(--kehribar); }
.ps-fikir::after { content: "”"; color: var(--kehribar); }
.ps-metin { display: grid; gap: 18px; color: rgba(233,237,242,.84); }
.ps-metin p { margin: 0; max-width: 60ch; }
.ps-kunye { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; border-top: 1px solid var(--cizgi); }
.ps-kunye div { display: grid; gap: 8px; padding: 18px 20px 20px 0; border-bottom: 1px solid var(--cizgi); }
.ps-kunye dt { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--kehribar-2); }
.ps-kunye dd { margin: 0; font-size: var(--t-s); line-height: 1.5; }
.ps-sayilar { list-style: none; margin: 0; padding: 0 var(--kenar); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.ps-sayilar li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--cizgi-2); }
.ps-sayilar b { font: 700 clamp(2rem, 1rem + 3vw, 4.2rem)/1 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ps-sayilar span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; color: var(--sis); }
.ps-grup { padding: clamp(56px, 7vw, 100px) var(--kenar) 0; }
.ps-grup-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--cizgi); }
.ps-grup-bas h3 { margin: 0; font: 700 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.02em; }
.ps-grup-bas span { font: 500 12px/1 var(--f-mono); color: var(--sis); }
.ps-klasorler { padding-inline: 0; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42%), 1fr)); }
.ps-klasorler > .klasor:last-child:nth-child(odd) { grid-column: auto; }
.ps-klasorler > .klasor:last-child:nth-child(odd) .klasor-govde { aspect-ratio: 1.18; margin-top: 14%; }
.ps-klasorler > .klasor:last-child:nth-child(odd) .klasor-kagit { left: 11%; right: 11%; }
.ps-sonraki { display: grid; gap: 14px; margin-top: clamp(64px, 8vw, 120px); padding: clamp(44px, 6vw, 90px) var(--kenar) calc(clamp(44px, 6vw, 90px) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cizgi); position: relative; overflow: hidden; isolation: isolate; }
.ps-sonraki span { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; color: var(--sis); }
.ps-sonraki b { font: 800 clamp(2.4rem, 1rem + 5vw, 6.6rem)/.9 var(--f-gosterim); font-stretch: 125%; letter-spacing: -.04em; transition: transform .8s var(--ease); }
.ps-sonraki img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.ps-sonraki:hover img { opacity: .35; transform: scale(1); }
.ps-sonraki:hover b { transform: translateX(20px); }
@media (max-width: 900px) { .ps-giris { grid-template-columns: 1fr; } }

/* ---------- kilden ışığa katmanı */
.kiyas-katman { position: fixed; inset: 0; z-index: 315; display: flex; flex-direction: column; gap: 14px; padding: calc(16px + env(safe-area-inset-top, 0px)) var(--kenar) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--gece); overflow-y: auto; }
.kk-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kk-ust .etiket { margin-bottom: 6px; }
.kk-baslik { margin: 0; font: 600 var(--t-l)/1.2 var(--f-gosterim); font-stretch: 112%; }
.kiyas-sekmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.kiyas-sekmeler button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: none; font: 500 var(--t-s)/1 var(--f-metin); color: var(--sis); transition: color .3s, border-color .3s, background-color .3s; }
.kiyas-sekmeler button[aria-selected="true"] { color: var(--gece); background: var(--kehribar); border-color: var(--kehribar); }
.kiyas-alan {
  position: relative; flex: none; margin-inline: auto;
  aspect-ratio: var(--ar, 1.5); width: min(100%, calc((100svh - 240px) * var(--ar, 1.5)));
  border-radius: 18px; overflow: hidden; background: var(--gece-2);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  --k: 50%;
}
.kiyas-alan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.k-once { clip-path: inset(0 calc(100% - var(--k)) 0 0); }
.k-tutamac { position: absolute; top: 0; bottom: 0; left: var(--k); width: 2px; margin-left: -1px; background: var(--kehribar); box-shadow: 0 0 22px rgba(217,160,102,.6); }
.k-top { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 50%; background: var(--kehribar); color: var(--gece); transition: transform .4s var(--ease); }
.k-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kiyas-alan.surukle .k-top { transform: scale(.88); }
.k-etiket { position: absolute; top: 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; padding: 8px 12px; border-radius: 999px; background: rgba(10,14,21,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.k-etiket-sol { left: 14px; } .k-etiket-sag { right: 14px; }
.kiyas-proje { margin: 0; text-align: center; font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .1em; color: var(--sis); }
.kiyas-proje a { color: var(--kagit); border-bottom: 1px solid var(--kehribar); }
@media (max-width: 700px) { .kiyas-alan { border-radius: 12px; width: 100%; } .k-top { width: 46px; height: 46px; margin: -23px 0 0 -23px; } }

/* ---------- 3B gezi katmanı */
.gezi-katman { position: fixed; inset: 0; z-index: 330; background: var(--gece); display: grid; grid-template-rows: auto 1fr; }
.gk-ust { display: flex; align-items: center; gap: 18px; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--kenar) 10px; border-bottom: 1px solid var(--cizgi); font-size: var(--t-s); }
.gk-ust b { font-weight: 600; margin-right: auto; }
.gk-kapat, .isik-kapat { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: none; font: 500 var(--t-s)/1 var(--f-metin); flex: none; }
.gk-kapat:hover, .isik-kapat:hover { background: var(--kagit); color: var(--gece); }
.gezi-katman iframe { width: 100%; height: 100%; border: 0; background: #1C1F22; }

/* ---------- ışık kutusu */
.isik { position: fixed; inset: 0; z-index: 320; display: grid; }
.isik-arka { position: absolute; inset: 0; background: rgba(6, 9, 14, .96); }
.isik-sahne { position: absolute; inset: calc(64px + env(safe-area-inset-top, 0px)) clamp(12px, 6vw, 96px) calc(84px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; overflow: hidden; touch-action: none; }
.isik-img, .isik-video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-select: none; transform-origin: 0 0; will-change: transform; }
.isik-img { cursor: zoom-in; }
.isik.yakin .isik-img { cursor: grab; }
.isik.plan-modu .isik-img { background: #fff; }
.isik-ust { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--kenar) 12px; }
.isik-sayac { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--sis); }
.isik-ipucu { margin-right: auto; font: 400 12px/1 var(--f-mono); color: var(--sis-2); }
.isik-ok { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cizgi-2); background: rgba(10,14,21,.5); }
.isik-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.isik-ok:hover { background: var(--kagit); color: var(--gece); }
.isik-onceki { left: clamp(8px, 1.6vw, 24px); } .isik-sonraki { right: clamp(8px, 1.6vw, 24px); }
.isik-alt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 14px var(--kenar) calc(18px + env(safe-area-inset-bottom, 0px)); }
.isik-baslik { margin: 0; font-size: var(--t-s); color: var(--sis); }
.isik-baslik b { color: var(--kagit); font-weight: 500; margin-right: 10px; }
.isik-proje { font-size: var(--t-s); border-bottom: 1px solid var(--kehribar); }
@media (max-width: 700px) {
  .isik-ok { top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  .isik-sahne { inset: calc(60px + env(safe-area-inset-top, 0px)) 8px calc(130px + env(safe-area-inset-bottom, 0px)); }
  .isik-ipucu { display: none; }
}

/* ---------- kaydırınca açılan öğeler (yalnız animasyon açıkken)
   perde çocuklara uygulanır: gözlenen öğenin kendisi kırpılırsa tarayıcı onu "görünmüyor" sayar */
.anim [data-acil] { transform: translateY(48px); transition: transform 1.2s var(--ease); }
.anim [data-acil] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); transition-delay: inherit; }
.anim [data-acil].acildi { transform: none; }
.anim [data-acil].acildi > * { clip-path: inset(-50% -50% -50% -50%); }
.anim [data-sol] { transform: translateY(28px); opacity: .001; transition: transform 1s var(--ease), opacity 1s var(--ease); }
.anim [data-sol].acildi { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}