/* =====================================================================
   BİSEN MİMARLIK
   Tema: kâğıt zemin + ince hücre çizgileri + mono etiketler (Heron dili)
   Geçişler: eğik poligon silme, harf harf açılış, yatay şerit (Sobha dili)
   Renk: logodaki lacivert + pirinç altın
   ===================================================================== */

:root {
  --kagit: #efede6;
  --kagit-2: #e6e3da;
  --murekkep: #14212d;
  --metin-2: #454c54;
  --silik: #7d7f7d;
  --cizgi: #c3bfb3;
  --altin: #a2854c;
  --altin-acik: #d6c59b;
  --gece: #0e1a25;
  --gece-2: #132433;
  --gece-cizgi: #2a3a49;

  --f-bas: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;

  --g: 8px;                 /* çerçeve payı */
  --ust-h: 62px;
  --p: clamp(16px, 2.2vw, 36px);
  --kavis: cubic-bezier(.7, 0, .3, 1);      /* Sobha: global.css/landing.css ana eğri */
  --kavis-cik: cubic-bezier(.29, .52, .5, 1); /* Sobha: ikincil çıkış eğrisi */
  --cz-kagit: var(--kagit);
  --cz-murekkep: #23272b;
  --cz-silik: #a9a69c;
}

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

body {
  margin: 0;
  padding: 0 var(--g) var(--g);
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 16px/1.5 var(--f-bas);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* kâğıt dokusu */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: multiply;
}
img, 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; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--murekkep); color: var(--kagit); }
:focus-visible { outline: 1px solid var(--altin); outline-offset: 3px; }

.mono { font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; line-height: 1.45; }
.mono a[href^="mailto"], a.mono[href^="mailto"] { text-transform: none; }
.atla { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--murekkep); color: var(--kagit); padding: 10px 14px; font: 12px var(--f-mono); }
.atla:focus { top: 16px; }

/* çerçeve (Heron: tüm ekranı saran ince hat) */
.cerceve { position: fixed; inset: 0 var(--g) var(--g); border: 1px solid var(--cizgi); border-top: 0; pointer-events: none; z-index: 80; }

.ok { width: 16px; height: 10px; flex: none; transition: transform .5s var(--kavis); }

/* ---------- başlıklar ---------- */
.dev-baslik, .sayfa-baslik, .hero-baslik {
  font-weight: 500; text-transform: uppercase; letter-spacing: -.035em; line-height: .9;
}
.dev-baslik { font-size: clamp(44px, 7.4vw, 132px); }
.sayfa-baslik { font-size: clamp(64px, 14vw, 260px); letter-spacing: -.05em; line-height: .84; }
.dev-baslik em, .sayfa-baslik em, .alt-cagri em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; color: var(--altin);
}
.bolum-etiket { display: flex; gap: 10px; margin-bottom: clamp(20px, 3vw, 40px); color: var(--silik); }
.bolum-etiket span { color: var(--altin); }

/* harf bölme (JS) */
.bol-satir { display: block; overflow: hidden; padding: .17em 0 .15em; margin: -.17em 0 -.15em; }
.bol-kelime { display: inline-block; white-space: nowrap; }
.bol-harf { display: inline-block; will-change: transform; transform-origin: 50% 100%; }
html.js [data-bol]:not(.bolundu) { visibility: hidden; }
html.js [data-belir] { opacity: 0; transform: translateY(24px); }

.ust-hucre, .hero-cta, .surec-hucre, .iletisim-hucre { isolation: isolate; }

/* =====================================================================
   ÜST (Heron: hücreli başlık)
   ===================================================================== */
.ust {
  position: fixed; top: 0; left: var(--g); right: var(--g); z-index: 60;
  height: var(--ust-h); display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--kagit) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--cizgi); border-top: 0;
}
.ust-logo { display: flex; align-items: center; padding: 0 var(--p); border-right: 1px solid var(--cizgi); color: var(--murekkep); }
.ust-logo .logo { height: 34px; width: auto; }
.ust-bilgi { flex: 1; display: flex; align-items: center; gap: 28px; padding: 0 20px; color: var(--silik); font-size: 11px; }
.ust-nav { display: flex; }
.ust-hucre {
  position: relative; width: clamp(120px, 10.5vw, 170px); padding: 10px 12px; border-left: 1px solid var(--cizgi);
  font: 400 12px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; overflow: hidden;
  transition: color .5s var(--kavis);
}
.ust-hucre::before { content: ''; position: absolute; inset: 0; background: var(--murekkep); transform: scaleY(0); transform-origin: 50% 0; transition: transform .6s var(--kavis); z-index: -1; }
.ust-hucre:hover { color: var(--kagit); }
.ust-hucre:hover::before { transform: scaleY(1); }
.ust-hucre.aktif span::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--altin); margin-right: 8px; vertical-align: 1px; }
.kose { position: absolute; right: 8px; bottom: 8px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .6; }
.ust-cta { color: var(--altin); display: flex; flex-direction: column; justify-content: space-between; }
.ust-cta .ok { align-self: flex-end; }
.ust-cta:hover .ok { transform: translateX(3px); }
.ust-menu-dugme { display: none; }

/* sayfa girişinde üst hücreler düşer (JS sınıfı) */
html.js .sayfa-ana .ust:not(.hazir) { transform: translateY(-100%); }
.ust { transition: transform 1s var(--kavis); }

/* ---------- mobil menü ---------- */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--gece); color: var(--kagit); padding: calc(var(--ust-h) + 24px) calc(var(--g) + var(--p)) 32px; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .9s var(--kavis); }
.menu[hidden] { display: block; visibility: hidden; }
.menu.acik { visibility: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.menu-ic { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.menu-liste a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(40px, 11vw, 72px); font-weight: 500; text-transform: uppercase; letter-spacing: -.04em; line-height: 1.02; border-bottom: 1px solid var(--gece-cizgi); padding: 8px 0; }
.menu-liste small { color: var(--altin-acik); font-size: 11px; }
.menu-alt { display: grid; gap: 8px; color: #9aa6b1; }

/* =====================================================================
   HERO (Heron: çizimden render'a tarama)
   ===================================================================== */
main { position: relative; }
.hero { height: 100svh; min-height: 620px; display: flex; flex-direction: column; padding-top: var(--ust-h); }
.hero-sahne { position: relative; flex: 1; min-height: 0; border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); container-type: size; overflow: hidden; }
.cetvel { position: absolute; inset: 14px 0; pointer-events: none; }
.cetvel::before, .cetvel::after {
  content: ''; position: absolute; left: 28px; right: 28px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--cizgi) 0 1px, transparent 1px 10px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cetvel::before { top: 0; } .cetvel::after { bottom: 0; }
.arti { position: absolute; width: 11px; height: 11px; }
.arti::before, .arti::after { content: ''; position: absolute; background: var(--murekkep); opacity: .7; }
.arti::before { left: 5px; top: 0; width: 1px; height: 11px; } .arti::after { top: 5px; left: 0; height: 1px; width: 11px; }
.a1 { left: 10px; top: -2px; } .a2 { right: 10px; top: -2px; } .a3 { left: 10px; bottom: -2px; } .a4 { right: 10px; bottom: -2px; }

.sahne { position: absolute; left: 50%; top: 50%; width: min(96cqw, 165cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -55%); }
.sahne > svg, .sahne-render, .sahne-render svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sahne-cizgi { color: #8f8b80; font: 500 11px var(--f-mono); letter-spacing: .08em; }
.sahne-render { clip-path: inset(0 0 100% 0); }
.tarama { position: absolute; left: calc(-50vw); right: 0; top: 0; height: 0; pointer-events: none; opacity: 0; }
.tarama::before, .tarama::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--altin); }
.tarama::before { top: 0; } .tarama::after { top: 54px; opacity: .55; }
.tarama span { position: absolute; left: calc(50vw - 50cqw + 30px); top: -18px; color: var(--altin); font-size: 11px; }
.not { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-5px, -5px); opacity: 0; pointer-events: none; }
.not i { width: 10px; height: 10px; background: var(--altin); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--altin) 22%, transparent); }
.not span { background: var(--kagit); border: 1px solid var(--cizgi); padding: 5px 8px; font-size: 10px; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--kavis); }
.not.acik span { clip-path: inset(0 0 0 0); }
.not.sol { flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -5px); }
.not.sol span { clip-path: inset(0 0 0 100%); }
.not.sol.acik span { clip-path: inset(0 0 0 0); }

.konsol { position: absolute; left: 30px; right: 30px; bottom: 34px; display: flex; justify-content: space-between; gap: 48px; font-size: 10.5px; color: var(--metin-2); pointer-events: none; }
.konsol dl { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; }
.konsol dt { color: var(--silik); }
.konsol .konsol-bas { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--cizgi); color: var(--murekkep); }
.konsol-log li { opacity: .18; transition: opacity .25s; }
.konsol-log li.yandi { opacity: 1; }
.konsol-log li.yandi:last-child { color: var(--altin); }
.konsol-log b { font-weight: 400; color: var(--silik); margin-right: 6px; }

.hero-alt { display: grid; grid-template-columns: 1fr minmax(260px, 30%) minmax(150px, 12%); grid-template-rows: 1fr auto; border: 1px solid var(--cizgi); min-height: 150px; }
.hero-baslik { grid-row: 1 / 3; align-self: end; padding: 18px var(--p) 16px; font-size: clamp(38px, 5.2vw, 92px); }
.hero-metin { border-left: 1px solid var(--cizgi); padding: 16px 18px; font-size: 15.5px; line-height: 1.35; color: var(--metin-2); }
.hero-cta { border-left: 1px solid var(--cizgi); padding: 16px 14px; display: flex; flex-direction: column; justify-content: space-between; color: var(--altin); position: relative; overflow: hidden; transition: color .5s var(--kavis); }
.hero-cta::before { content: ''; position: absolute; inset: 0; background: var(--murekkep); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--kavis); z-index: -1; }
.hero-cta:hover { color: var(--altin-acik); } .hero-cta:hover::before { transform: scaleY(1); }
.hero-cta .ok { align-self: flex-end; }
.serit { grid-column: 2 / 4; border-left: 1px solid var(--cizgi); border-top: 1px solid var(--cizgi); overflow: hidden; color: var(--metin-2); padding: 9px 0; }
.serit-ic { display: flex; gap: 22px; width: max-content; animation: serit 38s linear infinite; }
.serit-ic span { white-space: nowrap; font-size: 11px; }
@keyframes serit { to { transform: translateX(-50%); } }

/* =====================================================================
   AÇILIŞ PERDESİ
   ===================================================================== */
.perde { position: fixed; inset: 0; z-index: 150; background: var(--gece); color: var(--altin-acik); display: grid; place-items: center; animation: perde-kurtar 0s linear 7.5s forwards; }
html.perde-yok .perde { display: none; }
@keyframes perde-kurtar { to { visibility: hidden; } }
/* kelime işareti ~2,4:1; telefonda genişlik ekranın %80'ini aşmasın */
.perde-amblem { position: relative; height: min(24vh, 210px, 33vw); }
.perde-amblem svg { height: 100%; width: auto; }
.perde-dolgu { position: absolute; inset: 0; }
.perde-dolgu path { opacity: 0; }
.perde-cizgi path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.perde-alt { position: absolute; left: calc(var(--g) + var(--p)); right: calc(var(--g) + var(--p)); bottom: 26px; display: flex; align-items: center; gap: 18px; color: #7f8d99; }
.perde-olcu { flex: 1; height: 1px; background: var(--gece-cizgi); position: relative; }
.perde-olcu i { position: absolute; inset: 0; background: var(--altin-acik); transform-origin: 0 50%; transform: scaleX(0); }
.perde-alt span:last-child { color: var(--altin-acik); min-width: 3ch; text-align: right; }
.perde-kose { position: absolute; top: 24px; color: #7f8d99; }
.perde-k1 { left: calc(var(--g) + var(--p)); } .perde-k2 { right: calc(var(--g) + var(--p)); }

/* =====================================================================
   İMLEÇ (Heron: 9 px kare + sönen iz; bağlantıda 34 px çerçeveye büyür)
   ===================================================================== */
.imlec { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 140; pointer-events: none; mix-blend-mode: difference; display: none; }
.imlec-etiket { position: fixed; left: 0; top: 0; z-index: 141; pointer-events: none; background: var(--murekkep); color: var(--kagit); padding: 5px 8px; font-size: 10px; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.imlec-etiket.koyu { background: var(--altin-acik); color: var(--gece); }
html.imlec-var .imlec { display: block; }
html.imlec-var, html.imlec-var a, html.imlec-var button, html.imlec-var summary, html.imlec-var label, html.imlec-var .hero-sahne, html.imlec-var [data-slayt] { cursor: none; }
html.imlec-var input, html.imlec-var textarea { cursor: text; }

/* hero içi: artı çizgileri, koordinat, sürükleme seçimi, iskelet görünümü */
.hero-metin em { font-family: var(--f-serif); font-size: 1.15em; color: var(--altin); }
.xray { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--kagit); clip-path: inset(50% 50% 50% 50%); pointer-events: none; }
.xray svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #8f8b80; font: 500 11px var(--f-mono); letter-spacing: .08em; }
.arti-imlec { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 3; }
.arti-imlec.acik { opacity: 1; }
.arti-y, .arti-d { position: absolute; background: color-mix(in srgb, var(--murekkep) 26%, transparent); }
.arti-y { left: 0; right: 0; top: 0; height: 1px; }
.arti-d { top: 0; bottom: 0; left: 0; width: 1px; }
.arti-merkez { position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6px 0 0 -6px; }
.arti-merkez::before, .arti-merkez::after { content: ''; position: absolute; background: var(--altin); }
.arti-merkez::before { left: 6px; top: 0; width: 1px; height: 13px; } .arti-merkez::after { top: 6px; left: 0; width: 13px; height: 1px; }
.arti-koord { position: absolute; left: 0; top: 0; font-size: 9.5px; color: var(--silik); text-align: right; transform: translate(calc(-100% - 8px), 8px); white-space: nowrap; }
.arti-ipucu { position: absolute; left: 0; top: 0; font-size: 9.5px; background: var(--murekkep); color: var(--kagit); padding: 7px 9px; transform: translate(12px, 12px); white-space: nowrap; transition: opacity .3s; }
.hero-sahne.suruklendi .arti-ipucu { opacity: 0; }
.secim { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 1px dashed var(--altin); background: color-mix(in srgb, var(--altin) 5%, transparent); pointer-events: none; opacity: 0; z-index: 2; }
.secim span { position: absolute; left: -1px; bottom: 100%; margin-bottom: 4px; font-size: 9.5px; color: var(--kagit); background: var(--altin); padding: 3px 6px; white-space: nowrap; }

/* =====================================================================
   VİTRİN (Sobha: ekranı kaplayan proje görseli, eğik silmeyle değişir)
   ===================================================================== */
.kapak { position: relative; height: 100svh; min-height: 580px; overflow: hidden; margin-top: var(--g); }
.kapak-gorseller { position: absolute; inset: 0; }
.kapak-slayt { position: absolute; inset: 0; margin: 0; overflow: hidden; clip-path: polygon(100% 0%, 100% 0%, 115% 100%, 100% 100%); }
.kapak-slayt.aktif { clip-path: none; }
.kapak-slayt img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.kapak-karart { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,15,22,.55) 0%, rgba(8,15,22,0) 26%, rgba(8,15,22,0) 45%, rgba(8,15,22,.72) 100%); }
.kapak-ust { position: absolute; top: calc(var(--ust-h) + 18px); left: var(--p); right: var(--p); display: flex; flex-wrap: wrap; gap: 8px 26px; color: #d6dbe0; font-size: 11px; pointer-events: none; }
.kapak-ust b { font-weight: 400; color: var(--altin-acik); }
.kapak-koord { margin-left: auto; }
.kapak-alt { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 30%) minmax(150px, 12%); grid-template-rows: 1fr auto; border-top: 1px solid rgba(233,229,218,.18); color: #e9e5da; }
.kapak-metin, .kapak-cta, .kapak-cubuklar { background: rgba(10,19,28,.34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.kapak-baslik { grid-row: 1 / 3; align-self: end; padding: 22px var(--p) 18px; font-weight: 500; text-transform: uppercase; letter-spacing: -.04em; line-height: .88; font-size: clamp(42px, 6vw, 112px); }
.kapak-metin { border-left: 1px solid rgba(233,229,218,.18); padding: 16px 18px; font-size: 15.5px; line-height: 1.45; color: #cfd6dc; }
.kapak-cta { border-left: 1px solid rgba(233,229,218,.18); padding: 16px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; color: var(--altin-acik); position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--kavis); }
.kapak-cta::before { content: ''; position: absolute; inset: 0; background: var(--altin-acik); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--kavis); z-index: -1; }
.kapak-cta:hover { color: var(--gece); } .kapak-cta:hover::before { transform: scaleY(1); }
.kapak-cta .ok { align-self: flex-end; }
.kapak-cubuklar { grid-column: 2 / 4; display: flex; gap: 6px; padding: 14px 18px; border-left: 1px solid rgba(233,229,218,.18); border-top: 1px solid rgba(233,229,218,.18); }
.kapak-cubuklar i { flex: 1; height: 2px; background: rgba(233,229,218,.22); position: relative; overflow: hidden; }
.kapak-cubuklar b { position: absolute; inset: 0; background: var(--altin-acik); transform-origin: 0 50%; transform: scaleX(0); }

/* =====================================================================
   GENİŞLEYEN SAHNE (Sobha: kartın ekranı kaplaması)
   ===================================================================== */
.alinti { margin: 0; }
.imza { margin-top: 12px; color: var(--altin-acik); grid-column: 1 / -1; }
.genis { margin-top: var(--g); }
.genis-sahne { position: relative; height: 100svh; min-height: 540px; overflow: hidden; display: grid; place-items: center; }
.genis-gorsel { position: absolute; inset: 0; clip-path: inset(24% 32% 24% 32%); }
html:not(.js) .genis-gorsel { clip-path: none; }
.genis-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.genis-baslik { position: relative; z-index: 2; display: flex; justify-content: center; gap: .18em; width: 100%; font-size: clamp(54px, 12.5vw, 240px); font-weight: 500; letter-spacing: -.05em; line-height: .8; text-transform: uppercase; color: #efede6; mix-blend-mode: difference; pointer-events: none; }
.genis-baslik span { display: block; }
.genis-metin { position: absolute; left: var(--p); bottom: calc(var(--p) + 8px); z-index: 3; max-width: 540px; color: #e9e5da; }
.genis-metin .mono { color: var(--altin-acik); margin-bottom: 14px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.genis-metin p:last-child { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; text-shadow: 0 1px 24px rgba(0,0,0,.4); }
html.js .genis-metin { opacity: 0; }

/* fotoğraflı bileşenler */
.temsili { position: absolute; right: 14px; top: calc(var(--ust-h) + 14px); z-index: 2; background: rgba(10,19,28,.55); color: #d6dbe0; padding: 4px 8px; font-size: 10px; }
.yatay-aciklama { margin-top: 26px; max-width: 380px; color: var(--metin-2); font-size: 15.5px; }
.hizmet-mobil-gorsel { display: none; }
.arsiv-ozet { color: var(--metin-2); font-size: 15px; max-width: 52ch; margin-top: -6px; }
.alti-cizili { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* proje detay kapak (Sobha: ekranı kaplayan görsel) */
.proje-kapak { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
/* .plaka kuralı dosyada sonra geldiği için (position: relative) seçici güçlendirildi */
.proje-kapak .proje-kapak-gorsel { position: absolute; inset: 0; }
.proje-kapak-karart { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,15,22,.45), rgba(8,15,22,0) 30%, rgba(8,15,22,0) 50%, rgba(8,15,22,.72)); }
.proje-kapak-bilgi { position: absolute; left: var(--p); right: var(--p); bottom: calc(var(--p) + 6px); color: #efede6; }
.proje-kapak .sayfa-baslik { font-size: clamp(52px, 10.5vw, 210px); }
.proje-kapak .yol-izi { color: #cfd6dc; flex-wrap: wrap; }
.proje-kapak .yol-izi a { color: var(--altin-acik); }
.proje-paragraf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); max-width: 900px; margin: clamp(36px, 5vw, 70px) 0 0 auto; color: var(--metin-2); font-size: 16.5px; line-height: 1.6; }
.studyo-gorsel { height: min(78svh, 60vw); border: 1px solid var(--cizgi); border-bottom: 0; }

/* =====================================================================
   KOYU BÖLÜMLER (Sobha)
   ===================================================================== */
.gece { background: var(--gece); color: #e9e5da; --cizgi: var(--gece-cizgi); --silik: #7f8d99; --metin-2: #b3bcc4; --murekkep: #e9e5da; }
.gece ::selection { background: var(--altin-acik); color: var(--gece); }
.gece .bolum-etiket span, .gece em { color: var(--altin-acik); }

.manifesto { position: relative; padding: clamp(80px, 12vw, 200px) var(--p) clamp(80px, 10vw, 170px); overflow: hidden; margin-top: var(--g); }
.manifesto .dev-baslik { max-width: 15ch; position: relative; z-index: 1; }
.manifesto-metin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 80px); max-width: 980px; margin: clamp(48px, 7vw, 110px) 0 0 auto; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--metin-2); position: relative; z-index: 1; }
.manifesto-amblem { position: absolute; right: -2vw; top: 6%; height: 115%; color: var(--altin-acik); opacity: .07; }
.manifesto-amblem svg { height: 100%; width: auto; }

/* =====================================================================
   YATAY PROJE ŞERİDİ (Sobha: expansive slider)
   ===================================================================== */
.yatay { position: relative; border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); overflow: hidden; }
.yatay-iz { display: flex; height: 100svh; width: max-content; will-change: transform; }
.yatay-giris { width: min(46vw, 720px); flex: none; padding: calc(var(--ust-h) + 40px) var(--p) 40px; display: flex; flex-direction: column; border-right: 1px solid var(--cizgi); }
.yatay-giris .dev-baslik { margin-top: auto; }
.yatay-ipucu { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--altin); }
.kart { position: relative; flex: none; width: min(78vw, 1240px); height: 100%; border-right: 1px solid var(--cizgi); display: grid; grid-template-rows: 1fr auto; padding-top: var(--ust-h); }
.kart-plaka { position: relative; margin: 24px 24px 0; overflow: hidden; }
.kart-bilgi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 32px; align-items: end; padding: 22px 24px 52px; }
.kart-meta { grid-column: 1 / -1; display: flex; gap: 18px; color: var(--silik); margin-bottom: 10px; }
.kart-meta span:first-child { color: var(--altin); }
.kart-ad { min-width: 0; font-size: clamp(34px, 4.2vw, 80px); font-weight: 500; letter-spacing: -.04em; line-height: .9; text-transform: uppercase; }
.kart-ozet { color: var(--metin-2); font-size: 15px; line-height: 1.45; }
.kart-ac { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: 18px; color: var(--altin); }
.kart:hover .ok, .yatay-son:hover .ok { transform: translateX(6px); }
.yatay-son { flex: none; width: min(50vw, 760px); padding: calc(var(--ust-h) + 40px) var(--p) 40px; display: flex; flex-direction: column; justify-content: space-between; background: var(--murekkep); color: var(--kagit); }
.yatay-son .mono { color: var(--altin-acik); }
.yatay-son-baslik { font-size: clamp(52px, 8vw, 150px); font-weight: 500; letter-spacing: -.05em; line-height: .86; text-transform: uppercase; }
.yatay-son .ok { width: 64px; height: 40px; color: var(--altin-acik); }
.yatay-ilerleme { position: absolute; left: var(--p); right: var(--p); bottom: 16px; display: flex; align-items: center; gap: 14px; color: var(--silik); pointer-events: none; font-size: 11px; }
.yatay-ilerleme i { flex: 1; height: 1px; background: var(--cizgi); position: relative; }
.yatay-ilerleme b { position: absolute; inset: 0; background: var(--altin); transform-origin: 0 50%; transform: scaleX(0); }

/* plaka: görsel kutusu (eğik silme ile açılır) */
.plaka { position: relative; overflow: hidden; background: var(--kagit-2); }
.plaka img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.kart-plaka img { position: absolute; top: 0; bottom: 0; left: -7%; width: 114%; max-width: none; }
.kapak-gorseller { inset: -7% 0; }

/* =====================================================================
   HİZMETLER (Sobha: tenets — sabitlenen sahne)
   ===================================================================== */
.hizmetler { border: 1px solid var(--cizgi); border-bottom: 0; margin-top: var(--g); }
.hizmetler-sahne { height: 100svh; display: grid; grid-template-columns: minmax(240px, 24%) minmax(0, 1fr) minmax(0, 42%); padding-top: var(--ust-h); }
.hizmetler-sol { padding: 36px var(--p); border-right: 1px solid var(--cizgi); display: flex; flex-direction: column; }
.hizmet-liste { margin-top: auto; }
.hizmet-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--cizgi); color: var(--silik); font-size: 17px; font-weight: 500; transition: color .5s var(--kavis), padding .5s var(--kavis); cursor: pointer; }
.hizmet-liste li .mono { font-size: 11px; }
.hizmet-liste li.aktif { color: var(--murekkep); padding-left: 12px; }
.hizmet-liste li.aktif .mono { color: var(--altin); }
.hizmetler-orta { position: relative; border-right: 1px solid var(--cizgi); container-type: inline-size; }
.hizmet-metin { position: absolute; inset: 0; padding: 36px var(--p); display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; pointer-events: none; visibility: hidden; }
.hizmet-metin.aktif { visibility: visible; pointer-events: auto; }
.hizmet-metin > .mono { color: var(--altin); }
.hizmet-baslik { font-size: min(11.5cqw, 116px); font-weight: 500; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; }
.hizmet-metin > p:last-child { max-width: 440px; color: var(--metin-2); font-size: 16.5px; line-height: 1.5; }
.hizmetler-sag { position: relative; overflow: hidden; }
.hizmet-gorsel { position: absolute; inset: 24px; overflow: hidden; clip-path: inset(100% 0 0 0); }
.hizmet-gorsel:first-child { clip-path: inset(0 0 0 0); }
.hizmet-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hizmet-sayac { position: absolute; right: 28px; bottom: 34px; background: var(--kagit); padding: 4px 8px; border: 1px solid var(--cizgi); }

/* =====================================================================
   SÜREÇ (Heron ızgarası)
   ===================================================================== */
.surec { border: 1px solid var(--cizgi); margin-top: var(--g); }
.surec-bas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(60px, 8vw, 130px) var(--p) 40px; }
.surec-bas .bolum-etiket { grid-column: 1 / -1; margin-bottom: 0; }
.surec-bas > p:not(.bolum-etiket) { color: var(--metin-2); font-size: 16.5px; max-width: 460px; justify-self: end; }
.surec-izgara { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cizgi); }
.surec-hucre { position: relative; min-height: 240px; padding: 22px var(--p) 28px; display: flex; flex-direction: column; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); overflow: hidden; transition: color .6s var(--kavis); }
.surec-hucre:nth-child(3n) { border-right: 0; }
.surec-hucre:nth-last-child(-n+3) { border-bottom: 0; }
.surec-hucre::before { content: ''; position: absolute; inset: 0; background: var(--gece); transform: translateY(101%); transition: transform .7s var(--kavis); z-index: -1; }
.surec-hucre:hover { color: #e9e5da; }
.surec-hucre:hover::before { transform: none; }
.surec-hucre > .mono { color: var(--altin); }
.surec-hucre h3 { margin-top: auto; font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.surec-hucre p { margin-top: 10px; font-size: 14.5px; color: var(--metin-2); max-width: 34ch; transition: color .6s; }
.surec-hucre:hover p { color: #b3bcc4; }

/* =====================================================================
   ALT BİLGİ
   ===================================================================== */
.alt { margin-top: var(--g); padding: clamp(70px, 10vw, 160px) var(--p) 22px; overflow: hidden; }
.alt-ust { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.alt-cagri { font-size: clamp(40px, 6.4vw, 118px); font-weight: 500; letter-spacing: -.045em; line-height: .9; text-transform: uppercase; }
.alt-cta { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid var(--altin-acik); color: var(--altin-acik); transition: background .5s var(--kavis), color .5s var(--kavis); }
.alt-cta:hover { background: var(--altin-acik); color: var(--gece); }
.alt-cta:hover .ok { transform: translateX(4px); }
.alt-izgara { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--gece-cizgi); border-bottom: 1px solid var(--gece-cizgi); margin-top: clamp(60px, 8vw, 120px); }
.alt-hucre { display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 26px 0; font-size: 15px; }
.alt-hucre + .alt-hucre { border-left: 1px solid var(--gece-cizgi); padding-left: 18px; }
.alt-hucre a { width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--kavis); }
.alt-hucre a:hover { background-size: 100% 1px; }
.etiket { font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--altin-acik); margin-bottom: 8px; }
.alt-logo { color: var(--altin-acik); padding: clamp(50px, 7vw, 110px) 0 clamp(30px, 4vw, 60px); }
.alt-logo .logo-dev { width: 100%; height: auto; }
.alt-telif { display: flex; flex-direction: column; gap: 6px; }
.alt-imza { color: #7f8d99; }
.alt-imza a { color: var(--altin-acik); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--kavis); padding-bottom: 2px; }
.alt-imza a:hover { background-size: 100% 1px; }
.alt-son { display: flex; justify-content: space-between; gap: 16px; color: #7f8d99; font-size: 11px; flex-wrap: wrap; }

/* =====================================================================
   İÇ SAYFALAR
   ===================================================================== */
.sayfa-bas { padding: calc(var(--ust-h) + clamp(60px, 10vw, 160px)) var(--p) clamp(40px, 5vw, 70px); border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); display: grid; grid-template-columns: minmax(0, 1fr); }
.sayfa-bas .bolum-etiket { grid-column: 1 / -1; }
.sayfa-giris { color: var(--metin-2); font-size: 16.5px; line-height: 1.55; max-width: 440px; justify-self: end; margin-top: clamp(24px, 3vw, 44px); }

/* projeler */
.filtreler { display: flex; border: 1px solid var(--cizgi); overflow-x: auto; scrollbar-width: none; }
.filtre { position: relative; padding: 14px 20px 14px var(--p); border-right: 1px solid var(--cizgi); display: flex; gap: 6px; color: var(--silik); white-space: nowrap; transition: color .4s; }
.filtre sup { font-size: 9px; }
.filtre.aktif, .filtre:hover { color: var(--murekkep); }
.filtre.aktif::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--altin); }
.arsiv { display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--cizgi); }
.arsiv-kart { border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.arsiv-kart[hidden] { display: none; }
.arsiv-plaka { aspect-ratio: 16 / 10; }
.arsiv-plaka img { transition: scale 1.2s var(--kavis); }
.arsiv-kart:hover .arsiv-plaka img { scale: 1.04; }
.arsiv-bilgi { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 16px; }
.arsiv-bilgi > .mono:first-child { color: var(--altin); }
.arsiv-bilgi h2 { min-width: 0; font-size: clamp(28px, 2.8vw, 46px); font-weight: 500; letter-spacing: -.035em; text-transform: uppercase; line-height: 1; }
.arsiv-bilgi .mono:nth-of-type(2) { color: var(--silik); }
.arsiv-kart:hover .ok { transform: translateX(5px); }

/* proje detay */
.yol-izi { display: flex; gap: 10px; color: var(--silik); margin-bottom: 26px; }
.yol-izi a { color: var(--altin); }
.kunye { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--cizgi); border-top: 0; }
.kunye-hucre { padding: 16px var(--p) 20px; display: flex; flex-direction: column; gap: 8px; }
.kunye-hucre + .kunye-hucre { border-left: 1px solid var(--cizgi); }
.kunye-hucre .mono { color: var(--silik); }
.kunye-hucre b { font-weight: 500; font-size: 19px; }
.proje-metin { padding: clamp(60px, 8vw, 130px) var(--p); border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); }
.proje-ozet { font-size: clamp(26px, 3.1vw, 52px); letter-spacing: -.025em; line-height: 1.1; max-width: 24ch; margin-left: auto; font-weight: 400; }
.proje-galeri { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.proje-galeri figure { border: 1px solid var(--cizgi); padding: 16px; }
.proje-galeri .plaka { aspect-ratio: 16 / 10; }
.proje-galeri figcaption { margin-top: 12px; color: var(--silik); }
.sonraki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-rows: auto 1fr; column-gap: 30px; margin-top: var(--g); padding: 28px var(--p); min-height: 60svh; }
.sonraki > .mono { color: var(--altin-acik); }
.sonraki-ad { grid-row: 2; align-self: end; min-width: 0; font-size: clamp(44px, 7.4vw, 160px); font-weight: 500; text-transform: uppercase; letter-spacing: -.05em; line-height: .84; transition: letter-spacing .8s var(--kavis); }
.sonraki:hover .sonraki-ad { letter-spacing: -.03em; }
.sonraki-plaka { grid-column: 2; grid-row: 1 / 3; aspect-ratio: 16 / 10; align-self: center; }

/* stüdyo */
.studyo-manset { padding: clamp(80px, 11vw, 180px) var(--p); }
.studyo-manset .dev-baslik { max-width: 16ch; }
.ilkeler { border: 1px solid var(--cizgi); margin-top: var(--g); }
.ilkeler-bas { padding: 30px var(--p) 0; }
.ilkeler-izgara { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--cizgi); }
.ilke { padding: 22px var(--p) 30px; min-height: 280px; display: flex; flex-direction: column; }
.ilke + .ilke { border-left: 1px solid var(--cizgi); }
.ilke .mono { color: var(--altin); }
.ilke h3 { margin-top: auto; font-size: clamp(26px, 2.6vw, 42px); font-weight: 500; letter-spacing: -.035em; text-transform: uppercase; }
.ilke p { margin-top: 10px; color: var(--metin-2); font-size: 15px; }
.hizmet-listesi { border: 1px solid var(--cizgi); margin-top: var(--g); scroll-margin-top: var(--ust-h); }
.hizmet-listesi-bas { padding: clamp(60px, 7vw, 110px) var(--p) 40px; }
.hizmet-satir { border-top: 1px solid var(--cizgi); }
.hizmet-satir summary { list-style: none; display: grid; grid-template-columns: 60px 1fr auto 30px; align-items: center; gap: 20px; padding: 22px var(--p); cursor: pointer; }
.hizmet-satir summary::-webkit-details-marker { display: none; }
.hizmet-satir summary > .mono:first-child { color: var(--altin); }
.hizmet-satir-ad { font-size: clamp(26px, 3.4vw, 58px); font-weight: 500; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; transition: translate .6s var(--kavis); }
.hizmet-satir summary:hover .hizmet-satir-ad { translate: 10px 0; }
.hizmet-satir-kisa { color: var(--silik); }
.arti-isaret { position: relative; width: 16px; height: 16px; }
.arti-isaret::before, .arti-isaret::after { content: ''; position: absolute; background: currentColor; left: 0; top: 7.5px; width: 16px; height: 1px; transition: transform .5s var(--kavis); }
.arti-isaret::after { transform: rotate(90deg); }
.hizmet-satir[open] .arti-isaret::after { transform: rotate(0); }
.hizmet-satir-ic { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 44%); gap: 20px; padding: 0 var(--p) 30px; }
.hizmet-satir-ic p { grid-column: 2; font-size: 17px; line-height: 1.5; color: var(--metin-2); max-width: 46ch; }
.hizmet-satir-ic img { aspect-ratio: 16 / 9; object-fit: cover; }

/* iletişim */
.iletisim-izgara { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--cizgi); }
.iletisim-hucre { position: relative; min-height: 200px; padding: 18px var(--p) 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: color .6s var(--kavis); }
.iletisim-hucre + .iletisim-hucre { border-left: 1px solid var(--cizgi); }
.iletisim-hucre::before { content: ''; position: absolute; inset: 0; background: var(--murekkep); transform: translateY(101%); transition: transform .7s var(--kavis); z-index: -1; }
.iletisim-hucre:hover { color: var(--kagit); } .iletisim-hucre:hover::before { transform: none; }
.iletisim-hucre .mono { color: var(--altin); }
.iletisim-hucre b { margin-top: auto; font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.iletisim-hucre .ok { position: absolute; right: 18px; top: 20px; }
.form-bolum { display: grid; grid-template-columns: minmax(0, 40%) 1fr; border: 1px solid var(--cizgi); margin-top: var(--g); }
.form-bas { padding: clamp(50px, 6vw, 90px) var(--p); border-right: 1px solid var(--cizgi); }
.form-not { margin-top: 26px; color: var(--silik); max-width: 38ch; text-transform: none; letter-spacing: 0; }
.form { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.secimler { grid-column: 1 / -1; border: 0; margin: 0; padding: 22px var(--p); display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--cizgi); }
.secimler legend { float: left; width: 100%; color: var(--silik); margin-bottom: 12px; }
.secim input { position: absolute; opacity: 0; pointer-events: none; }
.secim span { display: block; padding: 9px 14px; border: 1px solid var(--cizgi); cursor: pointer; transition: background .4s, color .4s, border-color .4s; }
.secim input:checked + span { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.secim input:focus-visible + span { outline: 1px solid var(--altin); outline-offset: 2px; }
.alan { display: flex; flex-direction: column; gap: 8px; padding: 18px var(--p); border-bottom: 1px solid var(--cizgi); }
.alan:nth-of-type(odd):not(.alan-genis) { border-right: 1px solid var(--cizgi); }
.alan-genis { grid-column: 1 / -1; }
.alan .mono { color: var(--silik); }
.alan input, .alan textarea { font: 400 19px/1.4 var(--f-bas); color: var(--murekkep); background: none; border: 0; border-bottom: 1px solid transparent; padding: 4px 0; outline: none; resize: vertical; transition: border-color .4s; }
.alan input:focus, .alan textarea:focus { border-bottom-color: var(--altin); }
.form-dugmeler { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
.dugme { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px var(--p); background: var(--murekkep); color: var(--kagit); transition: background .4s; }
.dugme:hover { background: var(--gece-2); } .dugme:hover .ok { transform: translateX(4px); }
.dugme-ikincil { background: transparent; color: var(--murekkep); border-left: 1px solid var(--cizgi); }
.dugme-ikincil:hover { background: var(--kagit-2); }
.harita { position: relative; margin-top: var(--g); border: 1px solid var(--cizgi); height: min(70svh, 560px); background: var(--kagit-2); }
.harita iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.92) sepia(.12); }
.harita-etiket { position: absolute; left: 16px; bottom: 16px; display: grid; background: var(--kagit); border: 1px solid var(--cizgi); padding: 10px 12px; }

/* =====================================================================
   SAYFA GEÇİŞİ (Sobha: eğik poligon silme; tarayıcı destekliyorsa)
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .9s var(--kavis) both vt-cik; }
::view-transition-new(root) { animation: 1.1s var(--kavis) both vt-gir; }
@keyframes vt-cik { to { transform: translateY(-6%) scale(.97); filter: brightness(.55); } }
@keyframes vt-gir {
  from { clip-path: polygon(0% 100%, 100% 100%, 100% 115%, 0% 100%); transform: scale(1.06); }
  to { clip-path: polygon(0% -15%, 100% 0%, 100% 100%, 0% 100%); transform: none; }
}

/* =====================================================================
   DUYARLI
   ===================================================================== */
@media (max-width: 1100px) {
  .ust-bilgi span:not([data-saat]) { display: none; }
  .konsol dl { display: none; }
  .hizmetler-sahne { grid-template-columns: minmax(200px, 28%) 1fr; }
  .hizmetler-sag { display: none; }
  .ilkeler-izgara, .iletisim-izgara { grid-template-columns: repeat(2, 1fr); }
  .ilke:nth-child(3), .iletisim-hucre:nth-child(3) { border-left: 0; }
  .ilke:nth-child(n+3), .iletisim-hucre:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
}

@media (max-width: 860px) {
  :root { --ust-h: 56px; --g: 6px; }
  .ust-nav, .ust-bilgi { display: none; }
  .ust-logo { flex: 1; border-right: 0; }
  .ust-logo .logo { height: 24px; }
  .ust-menu-dugme { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-left: 1px solid var(--cizgi); font: 12px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
  .ust-menu-dugme i { width: 18px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform .5s var(--kavis); }
  body.menu-acik .ust-menu-dugme i { transform: rotate(45deg) scaleY(0); border-bottom-width: 0; }
  body.menu-acik .ust { background: var(--gece); color: var(--kagit); border-color: var(--gece-cizgi); }
  body.menu-acik .ust-logo { color: var(--altin-acik); }

  .perde-k2 { left: calc(var(--g) + var(--p)); right: auto; top: 44px; }
  .hero { min-height: 560px; }
  .konsol { display: none; }
  .sahne { width: 190cqw; transform: translate(-50%, -50%); }
  .not span { font-size: 9px; padding: 4px 6px; }
  .hero-alt { grid-template-columns: 1fr auto; }
  .hero-baslik { grid-row: auto; grid-column: 1 / -1; font-size: clamp(34px, 10vw, 60px); padding-bottom: 14px; }
  .hero-metin { grid-column: 1; border-left: 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
  .hero-cta { border-top: 1px solid var(--cizgi); min-width: 110px; }
  .arti-imlec, .secim, .xray { display: none; }
  .kapak { min-height: 600px; }
  .kapak-ust { top: calc(var(--ust-h) + 14px); gap: 6px 16px; }
  .kapak-koord { display: none; }
  .kapak-alt { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; }
  .kapak-baslik { grid-row: auto; grid-column: 1 / -1; font-size: clamp(36px, 10.5vw, 62px); padding-bottom: 14px; }
  .kapak-metin { grid-column: 1; border-left: 0; border-top: 1px solid rgba(233,229,218,.18); font-size: 14px; }
  .kapak-cta { border-top: 1px solid rgba(233,229,218,.18); min-width: 120px; }
  .kapak-cubuklar { grid-column: 1 / -1; border-left: 0; }
  .genis-baslik { flex-direction: column; align-items: center; font-size: clamp(56px, 20vw, 120px); }
  .genis-metin { right: var(--p); }
  .hizmet-mobil-gorsel { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-top: 8px; }
  .hizmet-mobil-gorsel img { width: 100%; height: 100%; object-fit: cover; }
  .proje-kapak { min-height: 520px; height: 88svh; }
  .proje-paragraf { grid-template-columns: 1fr; }
  .temsili { top: calc(var(--ust-h) + 10px); right: 10px; }
  .serit { grid-column: 1 / -1; border-left: 0; }

  .manifesto-metin { grid-template-columns: 1fr; }

  /* yatay şerit mobilde dikey akar */
  .yatay-iz { display: block; height: auto; width: auto; }
  .yatay-giris, .kart, .yatay-son { width: auto; height: auto; border-right: 0; }
  .yatay-giris { padding: 70px var(--p) 36px; }
  .yatay-ipucu, .yatay-ilerleme { display: none; }
  .kart { padding-top: 0; border-top: 1px solid var(--cizgi); display: block; }
  .kart-plaka { margin: 16px 16px 0; aspect-ratio: 16 / 10; }
  .kart-bilgi { grid-template-columns: 1fr; padding: 18px 16px 26px; row-gap: 10px; }
  .yatay-son { min-height: 50svh; gap: 40px; }

  .hizmetler-sahne { height: auto; display: block; padding-top: 0; }
  .hizmetler-sol { border-right: 0; padding-top: 60px; }
  .hizmet-liste { display: none; }
  .hizmetler-orta { border-right: 0; }
  .hizmet-metin { position: static; visibility: visible; pointer-events: auto; border-top: 1px solid var(--cizgi); padding: 26px var(--p) 32px; gap: 14px; }
  .hizmet-baslik { font-size: clamp(34px, 10vw, 56px); }

  .surec-izgara { grid-template-columns: 1fr; }
  .surec-hucre { border-right: 0; min-height: 190px; }
  .surec-hucre:nth-last-child(-n+3) { border-bottom: 1px solid var(--cizgi); }
  .surec-hucre:last-child { border-bottom: 0; }

  .alt-izgara { grid-template-columns: 1fr 1fr; }
  .alt-hucre:nth-child(3) { border-left: 0; padding-left: 0; }
  .alt-hucre:nth-child(n+3) { border-top: 1px solid var(--gece-cizgi); }

  .arsiv { grid-template-columns: 1fr; }
  .filtreler { flex-wrap: wrap; overflow: visible; border-right: 0; }
  .filtre { flex: 1 1 auto; justify-content: center; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); margin-bottom: -1px; }
  .arsiv-kart { padding: 14px; }
  .arsiv-bilgi { grid-template-columns: auto 1fr auto; }
  .arsiv-bilgi .mono:nth-of-type(2) { display: none; }
  .kunye { grid-template-columns: 1fr 1fr; }
  .kunye-hucre:nth-child(odd) { border-left: 0; }
  .kunye-hucre:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .kunye-hucre:first-child { grid-column: 1 / -1; }
  .kunye-hucre:nth-child(2) { border-left: 0; }
  .kunye-hucre:nth-child(3) { border-left: 1px solid var(--cizgi); }
  .kunye-hucre:nth-child(5) { border-left: 1px solid var(--cizgi); }
  .proje-galeri { grid-template-columns: 1fr; }
  .sonraki { grid-template-columns: 1fr; min-height: 0; row-gap: 24px; }
  .sonraki-plaka { grid-column: 1; grid-row: auto; }
  .sonraki-ad { grid-row: auto; }
  .ilkeler-izgara, .iletisim-izgara { grid-template-columns: 1fr; }
  .ilke, .iletisim-hucre { border-left: 0 !important; min-height: 0; }
  .ilke + .ilke, .iletisim-hucre + .iletisim-hucre { border-top: 1px solid var(--cizgi); }
  .ilke h3 { margin-top: 40px; }
  .iletisim-hucre b { margin-top: 30px; }
  .hizmet-satir summary { grid-template-columns: 34px 1fr 20px; gap: 12px; }
  .hizmet-satir-kisa { display: none; }
  .hizmet-satir-ic { grid-template-columns: 1fr; }
  .hizmet-satir-ic p { grid-column: 1; }
  .form-bolum { grid-template-columns: 1fr; }
  .form-bas { border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .form { grid-template-columns: 1fr; }
  .alan:nth-of-type(odd):not(.alan-genis) { border-right: 0; }
  .dugme-ikincil { border-left: 0; border-top: 1px solid var(--cizgi); }
  .dugme { flex-basis: 100%; }
}