/* Çınar Yapı Dekorasyon. Tasarım dili: şablon boya, kartela, ölçü çizgisi, duvar kesiti. */
@font-face { font-family: "Stencil"; src: url(/fonts/big-shoulders-stencil-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Stencil"; src: url(/fonts/big-shoulders-stencil-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Grot"; src: url(/fonts/familjen-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Grot"; src: url(/fonts/familjen-grotesk-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Olcu"; src: url(/fonts/martian-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Olcu"; src: url(/fonts/martian-mono-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

@view-transition { navigation: auto; }

:root {
  --wall: #D8A31A; --on-wall: #131416; --paper: #E4E3DE; --ink: #131416; --marker: #E5381B; --tape: #EFE2A2;
  --edge: clamp(16px, 3vw, 44px);
  --rule: color-mix(in oklab, currentColor 28%, transparent);
  --stencil: "Stencil", "Arial Narrow", Impact, sans-serif;
  --grot: "Grot", ui-sans-serif, system-ui, sans-serif;
  --olcu: "Olcu", ui-monospace, Menlo, monospace;
  interpolate-size: allow-keywords;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--grot); overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
.pre { white-space: pre-line; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--ink); color: var(--paper); padding: .6em 1em; }
.skip:focus { left: 0; }

/* Yazı */
.display { font: 800 clamp(3.2rem, 9.2vw, 9.5rem)/.88 var(--stencil); text-transform: uppercase; letter-spacing: .002em; text-wrap: balance; }
.display--s { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.tag { font: 500 .6875rem/1.4 var(--olcu); text-transform: uppercase; letter-spacing: .08em; }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.35; max-width: 34ch; text-wrap: pretty; }
.prose { max-width: 58ch; text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { font: 800 clamp(1.7rem, 2.6vw, 2.4rem)/1 var(--stencil); text-transform: uppercase; margin-top: 1.5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { display: grid; gap: .3em; }
.prose li { padding-left: 1.3em; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8em; height: 1px; background: currentColor; }
.prose--wide { max-width: 72ch; }

/* Düğmeler */
.btn, .btn-line { display: inline-flex; align-items: center; min-height: 52px; padding: .55em 1.3em; font: 800 1.45rem/1 var(--stencil); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; transition: background-color .18s, color .18s, translate .18s; }
.btn { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--marker); border-color: var(--marker); color: #fff; }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: var(--on-wall); color: var(--wall); border-color: var(--on-wall); }
.more { display: inline-block; margin-top: 2.2rem; font: 800 1.7rem/1 var(--stencil); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; }
.more:hover { color: var(--marker); }

/* Üst şerit */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px var(--edge); background: var(--wall); color: var(--on-wall); border-bottom: 1px solid color-mix(in oklab, var(--on-wall) 30%, transparent); }
.mark { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.mark-word { font: 900 1.9rem/1 var(--stencil); letter-spacing: .02em; }
.mark-sub { font: 500 .625rem/1 var(--olcu); text-transform: uppercase; letter-spacing: .08em; }
.mark-img { max-height: 40px; width: auto; }
.top-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); font: 500 .75rem/1 var(--olcu); text-transform: uppercase; letter-spacing: .05em; }
.top-nav a { text-decoration: none; padding: .5em 0; }
.top-nav a:hover, .top-nav a.is-here { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .5em; }
.top-nav .top-cta { background: var(--on-wall); color: var(--wall); padding: .85em 1.1em; }
.top-nav .top-cta:hover { background: var(--marker); color: #fff; text-decoration: none; }
.top-menu { display: none; }

/* Metre */
.ruler { position: fixed; z-index: 25; top: 0; bottom: 0; right: 0; width: 20px; pointer-events: none; color: #1b1a14; background-color: var(--tape); border-left: 1px solid rgb(0 0 0 / .35);
  background-image: repeating-linear-gradient(to bottom, #1b1a14 0 1px, transparent 1px 10px), repeating-linear-gradient(to bottom, #1b1a14 0 1px, transparent 1px 50px); background-size: 5px 100%, 11px 100%; background-position: right top, right top; background-repeat: no-repeat; }
.ruler-mark { position: absolute; right: 20px; top: 0; padding: .3em .5em; background: #1b1a14; color: var(--tape); font: 500 .625rem/1 var(--olcu); white-space: nowrap; transform: translateY(-50%); }
@media (max-width: 1100px) { .ruler { display: none; } }

/* Giriş */
.hero { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 66px); background: var(--wall); color: var(--on-wall); isolation: isolate; overflow: hidden; }
.hero::before, .page-hero::before, .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/img/roller-grain.svg); opacity: .09; pointer-events: none; }
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); }
.fit span { display: block; width: fit-content; white-space: nowrap; }
.hero-title { font: 900 13vw/.84 var(--stencil); text-transform: uppercase; padding: clamp(20px, 2.6vw, 38px) var(--edge) 0; }
.hero-foot { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end; padding: clamp(18px, 2.4vw, 34px) var(--edge); margin-top: auto; }
.hero-intro { grid-column: 1 / span 5; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.3; text-wrap: pretty; }
.hero-actions { grid-column: 8 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.hero-actions .btn { background: var(--on-wall); color: var(--wall); border-color: var(--on-wall); }
.hero-actions .btn:hover { background: var(--marker); border-color: var(--marker); color: #fff; }

/* Maskeleme bandı */
.tape { position: absolute; right: 7%; top: -1.15rem; z-index: 2; padding: .5em 1.5em; background: color-mix(in oklab, var(--tape) 92%, transparent); color: #1b1a14; font: 500 .6875rem/1.4 var(--olcu); text-transform: uppercase; letter-spacing: .05em; rotate: -1.8deg; box-shadow: 0 1px 0 rgb(0 0 0 / .14);
  clip-path: polygon(0 0, 1.2% 16%, 0 33%, 1.2% 50%, 0 66%, 1.2% 83%, 0 100%, 100% 100%, 98.8% 83%, 100% 66%, 98.8% 50%, 100% 33%, 98.8% 16%, 100% 0); }

/* Kartela */
.deck-label { padding: 0 var(--edge) .55rem; }
.deck-row { display: flex; align-items: flex-end; height: 118px; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.deck-row li { flex: 1 0 118px; height: 100%; display: flex; align-items: flex-end; }
.chip { width: 100%; height: 84px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: .65rem .8rem; background: var(--c); color: var(--o); border: 0; border-top: 1px solid rgb(0 0 0 / .16); border-left: 1px solid rgb(0 0 0 / .1); text-align: left; cursor: pointer; transition: height .24s cubic-bezier(.2, .8, .2, 1); }
.chip:hover { height: 100px; }
.chip[aria-pressed="true"] { height: 116px; }
.chip:focus-visible { outline-offset: -5px; outline-color: currentColor; }
.chip-code { font: 500 .625rem/1 var(--olcu); }
.chip-name { font: 800 1.45rem/1 var(--stencil); text-transform: uppercase; }

/* Rulo geçişi */
.repainting::view-transition-old(root) { animation: none; }
.repainting::view-transition-new(root) { animation: roll .85s cubic-bezier(.65, 0, .2, 1) both; mask: url(/img/roller-mask.svg) no-repeat; mask-size: 300% 100%; }
@keyframes roll { from { mask-position: 100% 0; } to { mask-position: 0 0; } }

/* Bloklar */
.block { padding: clamp(64px, 9vw, 140px) var(--edge); }
.head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end; margin-bottom: clamp(32px, 5vw, 72px); }
.head .tag { grid-column: 1 / -1; margin-bottom: 1rem; }
.head .display { grid-column: 1 / span 8; }
.head .lede { grid-column: 9 / -1; justify-self: end; }

/* Hizmet satırları */
.svc-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; align-items: start; }
.svc-list { border-top: 2px solid var(--ink); }
.svc { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem .75rem; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
  background: linear-gradient(var(--wall), var(--wall)) left / 0 100% no-repeat; transition: background-size .38s cubic-bezier(.65, 0, .2, 1), color .2s .08s; }
.svc:hover, .svc:focus-visible { background-size: 100% 100%; color: var(--on-wall); }
.svc-no { font: 500 .75rem/1 var(--olcu); padding-top: .55rem; }
.svc-title { font: 800 clamp(2rem, 4.6vw, 4.4rem)/.95 var(--stencil); text-transform: uppercase; }
.svc-sum { grid-column: 2; margin-top: .4rem; max-width: 56ch; }
.svc-preview { position: sticky; top: 90px; background: var(--ink); }
.svc-preview img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.svc-list--full .svc-title { font-size: clamp(2.4rem, 7vw, 7rem); }

/* Projeler */
.works-block { background: var(--ink); color: var(--paper); }
.works-block .more:hover { color: var(--wall); }
.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 6vw, 96px) 20px; }
.work a { display: block; text-decoration: none; }
.work figure { overflow: hidden; background: #2a2b2e; }
.work img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
.work a:hover img { scale: 1.03; }
.work:nth-child(4n + 1) { grid-column: 1 / span 7; }
.work:nth-child(4n + 2) { grid-column: 9 / -1; margin-top: clamp(40px, 9vw, 150px); }
.work:nth-child(4n + 3) { grid-column: 2 / span 4; }
.work:nth-child(4n + 4) { grid-column: 6 / -1; margin-top: clamp(30px, 5vw, 80px); }
.work-title { font: 800 clamp(1.9rem, 3.2vw, 3.1rem)/1 var(--stencil); text-transform: uppercase; margin-top: .55rem; }
.work a:hover .work-title { color: var(--wall); }
.work-meta { font: 400 .6875rem/1.5 var(--olcu); margin-top: .35rem; opacity: .85; }
.sample { font-style: normal; display: inline-block; margin-left: .5em; padding: .05em .55em; background: var(--tape); color: #1b1a14; }

/* Ölçü çizgisi */
.dim { display: flex; align-items: center; gap: .8em; margin-top: .7rem; font: 500 .75rem/1 var(--olcu); }
.dim::before, .dim::after { content: ""; flex: 1; height: 11px; background: linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat; }
.dim::before { border-left: 1px solid var(--marker); }
.dim::after { border-right: 1px solid var(--marker); }

/* Duvar kesiti */
.strata { display: grid; }
.stratum { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: baseline; padding: clamp(1rem, 2.2vw, 2rem) .9rem; color: var(--ink); border-bottom: 1px solid rgb(0 0 0 / .22); }
.stratum[data-depth="0"] { background: var(--wall); color: var(--on-wall); padding-block: clamp(1.8rem, 4vw, 3.8rem); }
.stratum[data-depth="1"] { background: color-mix(in oklab, var(--wall) 30%, #F3F2ED); }
.stratum[data-depth="2"] { background: #F3F2ED; }
.stratum[data-depth="3"] { background: #CFCCC3; }
.stratum[data-depth="4"], .stratum[data-depth="5"] { background: #A9A59B; }
.stratum-layer { grid-column: 1 / span 2; font: 500 .6875rem/1.3 var(--olcu); text-transform: uppercase; letter-spacing: .05em; }
.stratum-title { grid-column: 3 / span 5; font: 800 clamp(1.9rem, 3.8vw, 3.6rem)/1 var(--stencil); text-transform: uppercase; }
.stratum-body { grid-column: 8 / -1; max-width: 46ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stratum { animation: lay linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes lay { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  }
}

/* Hakkımızda */
.about { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: start; padding-top: 0; }
.about-text { grid-column: 1 / span 6; }
.about-text .tag { margin-bottom: 1rem; }
.about-text .prose { margin-top: 1.8rem; }
.about-fig { grid-column: 8 / -1; }
.about--page { padding-top: clamp(48px, 6vw, 96px); }

/* Rakamlar, yorumlar */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--ink); }
.stat-row > div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.stat-row dt { font: 500 .6875rem/1.4 var(--olcu); text-transform: uppercase; }
.stat-row dd span { font: 900 clamp(4rem, 9vw, 8.5rem)/1 var(--stencil); }
.stat-row small { font: 500 .75rem/1 var(--olcu); }
.voice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.voice { padding-top: 1rem; border-top: 2px solid var(--ink); }
.voice p { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; }
.voice footer { margin-top: 1rem; font: 400 .6875rem/1.5 var(--olcu); }

/* Sorular */
.faq { padding-top: 0; }
.faq-list { border-top: 2px solid var(--ink); }
.q { border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); }
.q summary { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; font: 700 clamp(1.15rem, 1.8vw, 1.5rem)/1.2 var(--grot); cursor: pointer; list-style: none; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; font: 400 1.4rem/1 var(--olcu); }
.q[open] summary::after { content: "−"; }
.q .prose { padding-bottom: 1.5rem; }
.q::details-content { height: 0; overflow: clip; transition: height .25s, content-visibility .25s allow-discrete; }
.q[open]::details-content { height: auto; }

/* Çağrı */
.cta { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end; padding: clamp(56px, 8vw, 120px) var(--edge); background: var(--wall); color: var(--on-wall); }
.cta .display { grid-column: 1 / span 7; }
.cta-side { grid-column: 8 / -1; display: grid; gap: 1rem; justify-items: start; }
.cta-phone { font: 800 clamp(2.2rem, 4.2vw, 4rem)/1 var(--stencil); text-decoration: none; white-space: nowrap; }
.cta-phone:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.cta .btn { background: var(--on-wall); color: var(--wall); border-color: var(--on-wall); }
.cta .btn:hover { background: var(--marker); border-color: var(--marker); color: #fff; }

/* İç sayfa başlığı */
.page-hero { position: relative; isolation: isolate; padding: clamp(20px, 3vw, 44px) var(--edge) clamp(28px, 4vw, 56px); background: var(--wall); color: var(--on-wall); }
.page-title { font: 900 clamp(3.6rem, 12.5vw, 14rem)/.86 var(--stencil); text-transform: uppercase; text-wrap: balance; }
.page-hero .lede { margin-top: 1.4rem; max-width: 44ch; }
.page-hero .btn { background: var(--on-wall); color: var(--wall); border-color: var(--on-wall); margin-top: 1.4rem; }
.crumb { margin-bottom: 1rem; }
.crumb a::before { content: "← "; }

/* Detay */
.detail { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: start; }
.detail-fig { grid-column: 1 / span 7; }
.detail-fig img { width: 100%; }
.detail-text { grid-column: 9 / -1; }
.scope { margin-top: 2rem; border-top: 2px solid var(--ink); counter-reset: k; }
.scope li { counter-increment: k; display: flex; gap: .9rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); }
.scope li::before { content: counter(k, decimal-leading-zero); font: 500 .6875rem/1.9 var(--olcu); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-top: 0; }
.gallery img { width: 100%; }

/* Proje */
.project > figure img { width: 100%; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; margin-top: clamp(32px, 4vw, 64px); }
.project-grid .spec { grid-column: 1 / span 4; }
.project-grid .prose { grid-column: 7 / -1; }
.spec { border-top: 2px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); }
.spec dt { font: 500 .6875rem/1.9 var(--olcu); text-transform: uppercase; }
.next { display: block; padding: clamp(40px, 6vw, 80px) var(--edge); background: var(--ink); color: var(--paper); text-decoration: none; }
.next .tag { display: block; margin-bottom: .8rem; }
.next:hover .display { color: var(--wall); }

/* Karşılaştırma */
.compare { --pos: 55%; position: relative; overflow: hidden; background: var(--ink); touch-action: pan-y; }
.compare img { width: 100%; }
.compare-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-after img { height: 100%; object-fit: cover; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-roller { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 16px; translate: -8px; background: var(--wall); border-inline: 2px solid var(--ink); pointer-events: none; }
.compare-roller::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 92px; translate: -50% -50%; background: var(--wall); border: 2px solid var(--ink); }
.compare:has(input:focus-visible) .compare-roller { outline: 3px solid var(--marker); }
.compare-tag { position: absolute; top: 12px; padding: .35em .7em; background: var(--tape); color: #1b1a14; font: 500 .6875rem/1.2 var(--olcu); text-transform: uppercase; pointer-events: none; }
.compare-tag--b { left: 12px; rotate: -1.2deg; }
.compare-tag--a { right: 12px; rotate: 1.2deg; }

/* Filtre */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 3rem; font: 500 .6875rem/1 var(--olcu); }
.filters a { padding: .8em 1em; border: 1px solid currentColor; text-decoration: none; }
.filters a:hover, .filters a[aria-current] { background: var(--wall); color: var(--on-wall); border-color: var(--wall); }

/* Alıntı */
.quote { padding: 0 var(--edge) clamp(64px, 9vw, 140px); }
.quote footer { margin-top: 1.4rem; }

/* İletişim */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 56px; align-items: start; }
.contact-info { grid-column: 1 / span 6; }
.contact-phone { display: block; width: fit-content; font: 900 clamp(3rem, 6.8vw, 7rem)/1 var(--stencil); text-decoration: none; margin-bottom: 2rem; }
.contact-phone:hover { color: var(--marker); }
.contact-phone--2 { font-size: clamp(2rem, 4vw, 4rem); margin-top: -1.2rem; }
.sheet { grid-column: 8 / -1; padding: clamp(20px, 2.4vw, 32px); background: #F3F2ED; border-top: 10px solid var(--wall); }
.sheet .display { margin-bottom: 1rem; }
.sheet form { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.ln { display: grid; gap: .25rem; }
.ln > span { font: 500 .6875rem/1.4 var(--olcu); text-transform: uppercase; }
.ln input, .ln select, .ln textarea { width: 100%; min-height: 44px; padding: .45rem 0; background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; }
.ln textarea { field-sizing: content; min-height: 6.5em; resize: vertical; }
.ln input:focus, .ln select:focus, .ln textarea:focus { outline: 0; border-bottom-color: var(--marker); box-shadow: 0 2px 0 var(--marker); }
.ln [aria-invalid="true"] { border-bottom-color: var(--marker); }
.ln-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.hp { position: absolute; left: -9999px; }
.consent { display: flex; gap: .6rem; font-size: .9375rem; line-height: 1.35; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: .1em; accent-color: var(--ink); }
.err { display: block; color: #B3210A; font-size: .875rem; font-weight: 600; }
.sent { padding: 1rem; background: var(--tape); color: #1b1a14; font-size: 1.15rem; }
.sheet .btn { justify-self: start; }
.map iframe { display: block; width: 100%; height: 440px; border: 0; filter: grayscale(.85) contrast(1.05); }

/* Alt bilgi */
.foot { background: var(--ink); color: var(--paper); padding: clamp(48px, 6vw, 88px) var(--edge) 20px; }
.foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 40px; }
.foot-text { grid-column: 1 / span 5; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; max-width: 24ch; }
.foot-grid > div:nth-child(2) { grid-column: 7 / span 3; }
.foot-grid > div:nth-child(3) { grid-column: 10 / -1; }
.foot .tag { margin-bottom: .9rem; opacity: .7; }
.foot-list { display: grid; gap: .4rem; }
.foot-word { font: 900 20vw/.82 var(--stencil); text-transform: uppercase; margin: clamp(36px, 6vw, 80px) 0 .1em; padding-bottom: .1em; color: var(--wall); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--paper) 30%, transparent); font: 400 .6875rem/1.6 var(--olcu); }
.dock { display: none; }

/* Dar ekran */
@media (max-width: 860px) {
  body { font-size: 1rem; }
  .top-nav { display: none; }
  .top-menu { display: block; position: relative; }
  .top-menu summary { list-style: none; cursor: pointer; font: 500 .75rem/1 var(--olcu); text-transform: uppercase; padding: .85em 1em; border: 1px solid currentColor; min-height: 44px; display: flex; align-items: center; }
  .top-menu summary::-webkit-details-marker { display: none; }
  .top-menu nav { position: absolute; right: calc(var(--edge) * -1); top: calc(100% + 13px); width: 100vw; display: grid; background: var(--wall); border-bottom: 2px solid var(--on-wall); padding: .5rem var(--edge) 1rem; }
  .top-menu nav a { font: 800 2.6rem/1.15 var(--stencil); text-transform: uppercase; text-decoration: none; }
  .hero { min-height: 0; }
  .hero-title { font-size: 17vw; }
  .deck { padding-bottom: 54px; }
  .hero-foot { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 2.4rem; }
  .hero-actions { justify-content: flex-start; }
  .tape { top: .3rem; right: var(--edge); max-width: calc(100% - 2 * var(--edge)); }
  .deck-row { height: 104px; }
  .deck-row li { flex-basis: 104px; }
  .chip { height: 76px; }
  .chip:hover { height: 76px; }
  .chip[aria-pressed="true"] { height: 102px; }
  .head, .about, .cta, .detail, .project-grid, .contact, .foot-grid { display: block; }
  .head .lede { margin-top: 1rem; }
  .svc-wrap { display: block; }
  .svc-preview { display: none; }
  .svc { grid-template-columns: 2rem minmax(0, 1fr); padding-inline: 0; }
  .svc:hover, .svc:focus-visible { padding-inline: .5rem; }
  .works { display: flex; flex-direction: column; }
  .work:nth-child(n) { margin-top: 0; }
  .stratum { display: block; }
  .stratum-title { margin: .35rem 0; }
  .about-fig, .detail-text, .cta-side, .project-grid .prose, .sheet { margin-top: 2rem; }
  .gallery { grid-template-columns: 1fr; }
  .ln-row { grid-template-columns: 1fr; }
  .cta-phone { font-size: clamp(2.4rem, 12vw, 4rem); }
  .foot-grid > div { margin-top: 2.2rem; }
  .foot { padding-bottom: 76px; }
  .dock { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 28; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--paper); border-top: 1px solid color-mix(in oklab, var(--paper) 25%, transparent); padding-bottom: env(safe-area-inset-bottom); }
  .dock a { min-height: 54px; display: grid; place-items: center; font: 800 1.35rem/1 var(--stencil); text-transform: uppercase; text-decoration: none; }
  .dock a + a { background: var(--wall); color: var(--on-wall); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}