/* ==========================================================================
   KNT Mimarlık — arch.css
   Mimarlık sayfasının kendine ait "stüdyo" tasarımı. İnşaat sayfasından
   ayrı bir dil: traverten zemin, serif tipografi, bronz ince çizgiler ve
   teknik çizim detayları. Hareket bilinçli olarak az: yalnızca sakin
   belirmeler ve renk geçişleri; kaydırmaya bağlı efekt yok.
   ========================================================================== */
body.is-arch {
  --a-bg: #f1ede5;
  --a-bg-2: #e7e0d3;
  --a-ink: #15130f;
  --a-night: #0f0e0c;
  --a-soft: #5b554b;
  --a-mute: #8a8377;
  --a-gold: #b08850;
  --a-gold-deep: #7f5d2a;
  --a-gold-hi: #d9bc84;
  --a-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --a-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --a-pad: clamp(20px, 4vw, 64px);
  --brand-hi: #e3c98f;
  --brand-deep: #7f5d2a;
  --a-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  background: var(--a-bg);
  color: var(--a-ink);
}
body.is-arch ::selection { background: var(--a-gold-hi); color: var(--a-ink); }
body.is-arch :focus-visible { outline-color: var(--a-gold); }

/* Ortak bileşenlerin mimarlık tonları */
.is-arch .scroll-progress i { background: var(--a-gold); }
.is-arch .to-top { background: rgba(21, 19, 15, .88); }
.is-arch .to-top:hover { background: var(--a-gold-hi); color: var(--a-ink); }
.is-arch .to-top__ring circle { stroke: var(--a-gold-hi); }
.is-arch .page-transition__logo, .is-arch .preloader__logo { color: var(--a-gold-hi); }
.is-arch .preloader__count::after { color: var(--a-gold-hi); }
.is-arch .preloader__bar i { background: var(--a-gold-hi); }

/* Sayfa geçişi: kayan paneller yerine yumuşak bir solma */
.is-arch .page-transition__panel--a { background: var(--a-bg); transform: none; opacity: 0; }
.is-arch .page-transition__panel--b { display: none; }
.is-leaving .is-arch .page-transition__panel--a { transform: none; opacity: 1; transition: opacity .5s ease; }
.is-arriving .is-arch .page-transition__panel--a { transform: none; opacity: 1; }
.is-revealing .is-arch .page-transition__panel--a { transform: none; opacity: 0; transition: opacity .6s ease; }

/* Belirme efektleri: yalnızca kısa ve sakin bir solma */
.js .is-arch [data-reveal] { transition: opacity .9s ease, transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.js .is-arch [data-reveal="up"], .js .is-arch [data-reveal="left"],
.js .is-arch [data-reveal="right"], .js .is-arch [data-reveal="scale"] { opacity: 0; transform: translate3d(0, 16px, 0); }
.js .is-arch [data-reveal="clip"] { opacity: 0; clip-path: none; }
.js .is-arch [data-reveal].is-in { opacity: 1; transform: none; }
.js .is-arch .img-reveal[data-reveal] img { scale: 1; }
.js .is-arch [data-split] .wi { transform: none; opacity: 0; transition: opacity .9s ease; transition-delay: var(--d, 0s); }
.js .is-arch [data-split].is-in .wi { opacity: 1; }
.js .is-arch [data-fill] .fw { color: inherit; transition: none; }

/* Mobil menü: krem zemin, serif bağlantılar */
.is-arch .mmenu__bg { background: var(--a-bg); }
.is-arch .mmenu__inner { color: var(--a-ink); }
.is-arch .mmenu__link { font-family: var(--a-serif); font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; border-color: rgba(21, 19, 15, .12); }
.is-arch .mmenu__link.is-active, .is-arch .mmenu__link:hover { color: var(--a-gold-deep); }
.is-arch .mmenu__num { font-family: var(--a-mono); color: var(--a-gold-deep); }
.is-arch .mmenu__sub-inner a { color: var(--a-soft); }
.is-arch .mmenu__sub-inner a:first-child { color: var(--a-gold-deep); }
.is-arch .mmenu__foot { color: var(--a-soft); }
.is-arch .mmenu__foot .i { color: var(--a-gold-deep); }

/* ==========================================================================
   Temel yapı taşları
   ========================================================================== */
.a-wrap { width: 100%; max-width: calc(1360px + var(--a-pad) * 2); margin-inline: auto; padding-inline: var(--a-pad); }

.a-sec {
  --fg: var(--a-ink); --fg-soft: var(--a-soft); --fg-mute: var(--a-mute);
  --bg: var(--a-bg); --line: rgba(21, 19, 15, .13); --acc: var(--a-gold-deep); --acc-2: var(--a-gold);
  position: relative; background: var(--bg); color: var(--fg);
  padding-block: clamp(88px, 10vw, 150px);
}
.a-sec--dark {
  --fg: #eee8dc; --fg-soft: rgba(238, 232, 220, .7); --fg-mute: rgba(238, 232, 220, .45);
  --bg: var(--a-night); --line: rgba(238, 232, 220, .13); --acc: var(--a-gold-hi); --acc-2: var(--a-gold-hi);
}

.a-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-family: var(--a-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-soft, var(--a-soft));
}
.a-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--acc, var(--a-gold-deep)); }
.a-idx { color: var(--acc, var(--a-gold-deep)); }

.a-h2 {
  margin: 0; font-family: var(--a-serif); font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance;
}
.a-h2 em, .acta__title em { font-style: italic; color: var(--acc-2, var(--a-gold)); }
.a-lead { max-width: 44ch; margin: 0; font-size: 1rem; line-height: 1.75; color: var(--fg-soft); }

.a-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 64px; margin-bottom: clamp(44px, 5vw, 76px); }
.a-headrow > div:first-child { max-width: 760px; }

/* Buton: ince çizgili hap, yalnızca renk geçişi */
.a-btn {
  --b-bg: var(--fg, var(--a-ink)); --b-fg: var(--bg, var(--a-bg));
  display: inline-flex; align-items: center; gap: 16px;
  padding: 6px 6px 6px 24px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bg);
  font-family: var(--a-ui); font-size: .9rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.a-btn i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--b-fg); color: var(--b-bg); font-size: 16px;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.a-btn:hover, .a-btn:focus-visible { background: var(--a-gold-hi); border-color: var(--a-gold-hi); color: var(--a-ink); }
.a-btn:hover i, .a-btn:focus-visible i { background: var(--a-ink); color: var(--a-gold-hi); }
.a-btn--line { --b-bg: transparent; background: transparent; color: var(--fg, var(--a-ink)); border-color: var(--line, rgba(21, 19, 15, .25)); }
.a-btn--line i { background: transparent; color: var(--fg, var(--a-ink)); border: 1px solid var(--line, rgba(21, 19, 15, .25)); }
.a-btn--line:hover, .a-btn--line:focus-visible { background: transparent; color: var(--acc, var(--a-gold-deep)); border-color: currentColor; }
.a-btn--line:hover i, .a-btn--line:focus-visible i { background: transparent; color: inherit; border-color: currentColor; }

/* ==========================================================================
   Üst menü
   ========================================================================== */
.ahead { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--a-ink); transition: color .4s ease; }
.ahead::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease, background-color .4s ease;
  background: rgba(241, 237, 229, .88); border-bottom: 1px solid rgba(21, 19, 15, .1);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.ahead.is-scrolled::before { opacity: 1; }
.ahead.is-dark { color: #eee8dc; }
.ahead.is-dark::before { background: rgba(15, 14, 12, .8); border-color: rgba(238, 232, 220, .1); }
.menu-open .ahead { color: var(--a-ink); }
.menu-open .ahead::before { opacity: 0; }
.js .ahead { opacity: 0; }
.js.is-ready .ahead { opacity: 1; transition: opacity .8s ease, color .4s ease; }

.ahead__inner { position: relative; display: flex; align-items: center; gap: 32px; height: 80px; padding-inline: var(--a-pad); }
.ahead.is-scrolled .ahead__inner { height: 68px; }
.ahead__brand { display: flex; align-items: center; gap: 14px; flex: none; }
.ahead__mark { width: 60px; height: auto; color: currentColor; overflow: visible; }
.ahead__mark path { fill: currentColor; }
.ahead__sep { width: 1px; height: 24px; background: currentColor; opacity: .3; }
.ahead__word { font-family: var(--a-serif); font-style: italic; font-size: 25px; line-height: 1; letter-spacing: -.01em; }

.ahead__nav { display: flex; gap: clamp(18px, 2.2vw, 36px); margin-left: auto; }
.ahead__nav a { position: relative; font-family: var(--a-ui); font-size: .88rem; font-weight: 500; padding-block: 6px; transition: color .3s ease; }
.ahead__nav a:hover { color: var(--a-gold-deep); }
.ahead.is-dark .ahead__nav a:hover { color: var(--a-gold-hi); }
.ahead__nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .6; }

.ahead__right { display: flex; align-items: center; gap: 14px; }
.ahead__switch { display: flex; padding: 4px; border-radius: 999px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.ahead__switch a { padding: 7px 14px; border-radius: 999px; font-family: var(--a-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; transition: opacity .3s, background-color .3s, color .3s; }
.ahead__switch a:hover { opacity: 1; }
.ahead__switch a[aria-current] { background: var(--a-ink); color: var(--a-bg); opacity: 1; }
.ahead.is-dark .ahead__switch a[aria-current] { background: #eee8dc; color: var(--a-ink); }
.ahead__cta { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: var(--a-ink); color: var(--a-bg); font-family: var(--a-ui); font-size: .85rem; font-weight: 600; transition: background-color .3s, color .3s; }
.ahead__cta:hover { background: var(--a-gold-hi); color: var(--a-ink); }
.ahead.is-dark .ahead__cta { background: #eee8dc; color: var(--a-ink); }
.ahead.is-dark .ahead__cta:hover { background: var(--a-gold-hi); }
.ahead__burger { display: none; border-color: currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); }

/* ==========================================================================
   01 · Açılış (arch-hero) — sabit, editoryal kompozisyon
   ========================================================================== */
.ahero {
  position: relative; display: flex; overflow: hidden;
  min-height: 100vh; min-height: 100svh; background: var(--a-bg); color: var(--a-ink);
}
.ahero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(21, 19, 15, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 19, 15, .06) 1px, transparent 1px),
    linear-gradient(rgba(21, 19, 15, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 19, 15, .028) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 50%, #000 20%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 70% 50%, #000 20%, transparent 100%);
}
.ahero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: 104px; padding-bottom: 26px; }

.ahero__meta, .ahero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--a-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--a-soft);
}
.ahero__meta { padding-bottom: 18px; border-bottom: 1px solid rgba(21, 19, 15, .14); }
.ahero__foot { padding-top: 18px; border-top: 1px solid rgba(21, 19, 15, .14); }
.ahero__coords { display: flex; align-items: center; gap: 14px; text-align: right; line-height: 1.6; }
.ahero__north { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(21, 19, 15, .3); border-radius: 50%; font-size: 9px; letter-spacing: 0; padding-top: 10px; color: var(--a-ink); }
.ahero__north i { position: absolute; left: 50%; top: 4px; width: 0; height: 0; margin-left: -4px; border: 4px solid transparent; border-bottom: 11px solid var(--a-gold); border-top: 0; }
.ahero__scroll { display: inline-flex; align-items: center; gap: 10px; transition: color .3s; }
.ahero__scroll:hover { color: var(--a-ink); }

.ahero__main {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center;
  gap: clamp(32px, 5vw, 96px); padding-block: clamp(24px, 4vh, 56px);
}
.ahero__title { margin: 0 0 clamp(22px, 3.4vh, 36px); font-family: var(--a-serif); font-weight: 400; font-size: clamp(3.4rem, min(8vw, 13.5vh), 9rem); line-height: .95; letter-spacing: -.025em; }
.ahero__title > * { display: block; }
.ahero__title em { font-style: italic; color: var(--a-gold-deep); padding-left: .85em; }
.ahero__lead { max-width: 44ch; margin: 0 0 30px; font-size: 1rem; line-height: 1.75; color: var(--a-soft); }
.ahero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ahero__actions .a-btn { --b-bg: var(--a-ink); --b-fg: var(--a-bg); }
.ahero__actions .a-btn--line { --b-bg: transparent; color: var(--a-ink); border-color: rgba(21, 19, 15, .25); }
.ahero__actions .a-btn--line i { color: inherit; border-color: rgba(21, 19, 15, .25); }
.ahero__actions .a-btn--line:hover { color: var(--a-gold-deep); border-color: currentColor; }
.ahero__actions .a-btn--line:hover i { border-color: currentColor; }

.ahero__figure { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.ahero__arch {
  --aw: clamp(260px, min(29vw, calc((100vh - 440px) * .75)), 440px);
  position: relative; width: var(--aw); aspect-ratio: 240 / 320;
  margin: calc(var(--aw) * .19) calc(var(--aw) * .21) calc(var(--aw) * .06);
}
@supports (height: 100svh) {
  .ahero__arch { --aw: clamp(260px, min(29vw, calc((100svh - 440px) * .75)), 440px); }
}
.ahero__frame { position: absolute; inset: 0; overflow: hidden; background: #d7cebf; }
.ahero__frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(250, 248, 243, .6); pointer-events: none; }
.ahero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.ahero__lines { position: absolute; left: -20.834%; top: -13.75%; width: 141.667%; height: 128.75%; max-width: none; overflow: visible; pointer-events: none; stroke: var(--a-ink); stroke-width: .6; }
.ahero__lines path { opacity: .55; }
.ahero__lines .main { stroke: var(--a-gold); stroke-width: 1; opacity: 1; }
.ahero__lines .thin { opacity: .28; }
.ahero__dim { font-family: var(--a-mono); font-size: 8px; letter-spacing: .06em; fill: var(--a-ink); stroke: none; opacity: .7; }
.ahero__caption { font-family: var(--a-serif); font-style: italic; font-size: 1.1rem; color: var(--a-soft); text-align: center; }

/* Açılışta tek, kısa bir solma */
.js [data-ahero-fade] { opacity: 0; }
.is-ready [data-ahero-fade] { opacity: 1; transition: opacity 1.1s ease .15s; }
.is-ready .ahero__figure[data-ahero-fade] { transition-delay: .35s; }
.js:not(.is-ready) [data-ahero-fade] { animation: failsafe 0s 5s forwards; }

/* ==========================================================================
   02 · Manifesto (arch-manifesto)
   ========================================================================== */
.amani .a-eyebrow { margin-bottom: clamp(28px, 3.4vw, 48px); }
.amani__text {
  margin: 0; max-width: 1180px;
  font-family: var(--a-serif); font-size: clamp(1.9rem, 3.7vw, 3.8rem); line-height: 1.14; letter-spacing: -.015em; text-wrap: pretty;
}
.amani__pic {
  display: inline-block; vertical-align: -.08em; width: 1.6em; height: .78em; margin: 0 .14em;
  border-radius: 2px; overflow: hidden; background: var(--a-bg-2);
}
.amani__pic img { width: 100%; height: 100%; object-fit: cover; }
.amani__foot { display: grid; grid-template-columns: 1fr minmax(0, 460px) auto; align-items: start; gap: 28px 48px; margin-top: clamp(52px, 6vw, 96px); }
.amani__rule { height: 1px; margin-top: 12px; background: var(--line); }
.amani__foot p { margin: 0; color: var(--fg-soft); line-height: 1.75; }

/* ==========================================================================
   03 · Hizmet dizini (arch-services)
   ========================================================================== */
.asvc__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.asvc__row { border-bottom: 1px solid var(--line); transition: border-color .35s ease; }
.asvc__link {
  display: grid; grid-template-columns: 56px 60px minmax(0, 1fr) minmax(0, 320px) 48px; grid-template-areas: "num thumb name desc arrow";
  align-items: center; gap: 8px 28px; padding: clamp(20px, 2.4vw, 30px) 0;
}
.asvc--text .asvc__link { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 320px) 48px; grid-template-areas: "num name desc arrow"; }
.asvc__num { grid-area: num; font-family: var(--a-mono); font-size: 12px; letter-spacing: .12em; color: var(--acc); }
.asvc__thumb { grid-area: thumb; display: block; width: 60px; height: 76px; overflow: hidden; border-radius: 2px; background: var(--line); }
.asvc__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: filter .35s ease; }
.asvc__link:hover .asvc__thumb img { filter: none; }
.asvc__name { grid-area: name; font-family: var(--a-serif); font-size: clamp(2rem, 4.2vw, 4.2rem); line-height: 1; letter-spacing: -.02em; transition: color .35s ease; }
.asvc__desc { grid-area: desc; font-size: .9rem; line-height: 1.6; color: var(--fg-soft); }
.asvc__arrow { grid-area: arrow; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.asvc__row:hover, .asvc__row:focus-within { border-bottom-color: var(--acc); }
.asvc__link:hover .asvc__name, .asvc__link:focus-visible .asvc__name { color: var(--acc); }
.asvc__link:hover .asvc__arrow, .asvc__link:focus-visible .asvc__arrow { background: var(--acc); border-color: var(--acc); color: var(--bg); }

/* ==========================================================================
   04 · İlkeler (arch-principles) — ince çizgili sabit ızgara
   ========================================================================== */
.aprin__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-block: 1px solid var(--line);
}
.aprin__col {
  display: flex; flex-direction: column; gap: 22px;
  padding: 26px clamp(20px, 2vw, 32px) 40px; background: var(--bg);
}
.aprin__num { font-family: var(--a-mono); font-size: 12px; letter-spacing: .12em; color: var(--acc); }
.aprin__fig { display: block; width: min(64%, 150px); aspect-ratio: 1; margin: 10px 0 18px; color: var(--fg); opacity: .7; transition: color .4s ease, opacity .4s ease; }
.aprin__fig svg { width: 100%; height: 100%; overflow: visible; }
.aprin__fig svg svg { overflow: hidden; }
.aprin__fig path, .aprin__fig rect, .aprin__fig circle { vector-effect: non-scaling-stroke; stroke-width: 1; }
.aprin__fig .thin { opacity: .55; }
.aprin__fig .solid { fill: currentColor; fill-opacity: .35; stroke: none; }
.aprin__fig--1 .flow, .aprin__fig--3 .arc { stroke-dasharray: 3 5; }
.aprin__fig--3 .arc { opacity: .6; }
.aprin__col:hover .aprin__fig { color: var(--acc-2); opacity: 1; }
.aprin__title { margin: 0; font-family: var(--a-serif); font-weight: 400; font-size: clamp(1.7rem, 2.2vw, 2.2rem); line-height: 1.05; }
.aprin__text { max-width: 34ch; margin: 12px 0 0; font-size: .92rem; line-height: 1.65; color: var(--fg-soft); }

/* ==========================================================================
   05 · Çizimden yapıya (arch-drawing) — pafta ve gerçekleşen yapı yan yana
   ========================================================================== */
.adraw.a-sec--dark { --bg: #0f1216; }
.adraw__body {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 26px);
  margin-bottom: clamp(48px, 6vw, 84px);
}
.adraw__body:not(:has(.adraw__photo)) { grid-template-columns: minmax(0, 1fr); }
.adraw__sheet {
  position: relative; margin: 0; aspect-ratio: 800 / 520; color: var(--fg);
  background:
    linear-gradient(color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px) 0 0 / 20px 20px;
}
.adraw__svg, .adraw__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.adraw__svg .ln { stroke-width: 1; }
.adraw__svg .bold { stroke-width: 1.8; }
.adraw__svg .thin { stroke-width: .7; opacity: .55; }
.adraw__svg .acc { stroke: var(--acc-2); }
.adraw__svg .tx { font-family: var(--a-mono); font-size: 11px; letter-spacing: .06em; fill: currentColor; stroke: none; }
.adraw__svg .tx text { text-anchor: middle; }
.adraw__svg .tx--l text { text-anchor: start; }
.adraw__svg .tx--acc { fill: var(--acc-2); }
.adraw__stamp { color: var(--acc-2); stroke: currentColor; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transform: rotate(-12deg); }
.adraw__stamp text { font-family: var(--a-mono); font-size: 8.5px; letter-spacing: .1em; fill: currentColor; stroke: none; }
.adraw__frame { stroke-width: 1; color: var(--fg); }
.adraw__frame path { vector-effect: non-scaling-stroke; }
.adraw__frame .thin { opacity: .45; }
.adraw__frame .fill { fill: currentColor; stroke: none; opacity: .7; }
.adraw__frame text { font-family: var(--a-mono); fill: currentColor; stroke: none; letter-spacing: .08em; }
.adraw__frame .t-s { font-size: 9px; opacity: .7; }
.adraw__frame .t-b { font-size: 10px; font-weight: 500; }

.adraw__photo { position: relative; margin: 0; min-height: 260px; overflow: hidden; background: var(--a-ink); }
.adraw__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.adraw__photo::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(250, 248, 243, .45); pointer-events: none; }
.adraw__photo figcaption {
  position: absolute; left: 20px; bottom: 20px; padding: 8px 12px; background: var(--a-bg); color: var(--a-ink);
  font-family: var(--a-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}

.adraw__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(18px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.adraw__step { padding-top: 22px; border-top: 1px solid var(--line); }
.adraw__no { display: block; margin-bottom: 16px; font-family: var(--a-mono); font-size: 11px; letter-spacing: .12em; color: var(--acc-2); }
.adraw__step h3 { margin: 0 0 10px; font-family: var(--a-serif); font-weight: 400; font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.1; }
.adraw__step p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--fg-soft); }

/* ==========================================================================
   06 · Galeri (arch-gallery)
   ========================================================================== */
.agal__aside { display: grid; gap: 22px; justify-items: start; max-width: 380px; }
.agal__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 30px); align-items: start; }
.agal__col { display: grid; gap: clamp(14px, 2vw, 30px); }
.agal__col[data-col="1"] { margin-top: clamp(40px, 6vw, 110px); }
.agal__item { display: block; width: 100%; text-align: left; color: inherit; }
.agal__img { display: block; overflow: hidden; border-radius: 2px; background: var(--a-bg-2); }
.agal__item--tall .agal__img { aspect-ratio: 4 / 5; }
.agal__item--square .agal__img { aspect-ratio: 1; }
.agal__item--wide .agal__img { aspect-ratio: 4 / 3; }
.agal__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: filter .5s ease; }
.agal__item:hover .agal__img img, .agal__item:focus-visible .agal__img img { filter: none; }
.agal__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 2px 0; }
.agal__cap b { font-family: var(--a-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; color: var(--acc); }
.agal__cap span { font-family: var(--a-serif); font-size: 1.35rem; line-height: 1.1; transition: color .35s ease; }
.agal__item:hover .agal__cap span { color: var(--acc); }
.agal__cap small { flex-basis: 100%; font-family: var(--a-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }

/* ==========================================================================
   07 · Çağrı (arch-cta)
   ========================================================================== */
.acta { text-align: center; padding-block: clamp(100px, 12vw, 180px); }
.acta__inner { display: flex; flex-direction: column; align-items: center; }
.acta__title { margin: 0; font-family: var(--a-serif); font-weight: 400; font-size: clamp(2.8rem, 7vw, 7.2rem); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.acta__rule { display: block; width: 64px; height: 1px; margin: clamp(26px, 3vw, 36px) 0; background: var(--acc-2); }
.acta__text { max-width: 560px; margin: 0 0 36px; line-height: 1.75; color: var(--fg-soft); }
.acta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.afoot { padding-block: clamp(80px, 9vw, 130px) 0; overflow: hidden; border-top: 1px solid var(--line); }
.afoot__top { padding-bottom: clamp(52px, 6vw, 90px); border-bottom: 1px solid var(--line); }
.afoot__mail { display: inline-flex; align-items: center; gap: .3em; max-width: 100%; font-family: var(--a-serif); font-size: clamp(2rem, 5.4vw, 5.4rem); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; transition: color .35s ease; }
.afoot__mail i { display: grid; place-items: center; flex: none; width: .8em; height: .8em; border-radius: 50%; border: 1px solid var(--line); font-size: .5em; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.afoot__mail:hover { color: var(--acc); }
.afoot__mail:hover i { background: var(--acc); border-color: var(--acc); color: var(--bg); }
.afoot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-block: clamp(48px, 6vw, 80px); }
.afoot__col h3 { margin: 0 0 18px; font-family: var(--a-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.afoot__col p, .afoot__col li { margin: 0 0 10px; font-size: .95rem; line-height: 1.6; color: var(--fg-soft); }
.afoot__col a { transition: color .3s; }
.afoot__col a:hover { color: var(--fg); }
.afoot__more { display: inline-flex; align-items: center; gap: 8px; color: var(--acc) !important; }
.afoot__social { display: flex; gap: 8px; margin-top: 16px; }
.afoot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); font-size: 16px; transition: background-color .3s, color .3s, border-color .3s; }
.afoot__social a:hover { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.afoot__giant { overflow: hidden; line-height: .8; text-align: center; pointer-events: none; user-select: none; }
.afoot__giant span { display: block; font-family: var(--a-serif); font-size: 19vw; letter-spacing: -.045em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 12%, transparent); transform: translateY(18%); }
.afoot__giant em { -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.afoot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--fg-mute); }
.afoot__bottom p { margin: 0; }
.afoot__switch, .afoot__top { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-soft); transition: color .3s; }
.afoot__switch:hover, .afoot__top:hover { color: var(--acc); }

/* ==========================================================================
   Duyarlı tasarım
   ========================================================================== */
@media (max-width: 1180px) {
  .ahead__nav { display: none; }
  .ahead__right { margin-left: auto; }
  .ahead__burger { display: block; }
  .asvc__link { grid-template-columns: 44px 60px minmax(0, 1fr) 48px; grid-template-areas: "num thumb name arrow" "num thumb desc arrow"; }
  .asvc--text .asvc__link { grid-template-columns: 44px minmax(0, 1fr) 48px; grid-template-areas: "num name arrow" "num desc arrow"; }
  .asvc__desc { max-width: 46ch; }
  .aprin__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adraw__steps { grid-template-columns: minmax(0, 1fr); }
  .adraw__step { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 24px; padding-block: 20px; }
  .adraw__no { margin: 6px 0 0; }
  .adraw__step h3 { margin: 0; }
}
@media (max-width: 899px) {
  .ahead__inner { height: 66px; gap: 16px; }
  .ahead.is-scrolled .ahead__inner { height: 62px; }
  .ahead__cta { display: none; }
  .ahead__mark { width: 50px; }
  .ahead__word { font-size: 22px; }
  .a-headrow { flex-direction: column; align-items: flex-start; }

  .ahero { min-height: 0; }
  .ahero__inner { padding-top: 92px; }
  .ahero__main { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ahero__title { font-size: clamp(3rem, 15vw, 5.6rem); }
  .ahero__arch { --aw: min(66vw, 340px); }
  .ahero__coords > span:last-child { display: none; }

  .amani__foot { grid-template-columns: 1fr; }
  .amani__rule { display: none; }

  .asvc__link { grid-template-columns: 60px minmax(0, 1fr) 40px; grid-template-areas: "thumb name arrow" "thumb desc desc"; gap: 8px 16px; align-items: start; }
  .asvc--text .asvc__link { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "name arrow" "desc desc"; }
  .asvc__num { display: none; }
  .asvc__arrow { width: 40px; height: 40px; font-size: 16px; }

  .adraw__body { grid-template-columns: minmax(0, 1fr); }
  .adraw__photo { aspect-ratio: 4 / 3; min-height: 0; }

  .agal__cols { grid-template-columns: repeat(2, 1fr); }
  .agal__col[data-col="1"] { margin-top: 48px; }
  .agal__col[data-col="2"] { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }

  .afoot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .aprin__cols { grid-template-columns: minmax(0, 1fr); }
  .aprin__fig { position: absolute; right: 20px; top: 22px; width: 96px; margin: 0; }
  .aprin__col { position: relative; }
  .adraw__step { grid-template-columns: 40px minmax(0, 1fr); }
  .adraw__step p { grid-column: 2; }
}
@media (max-width: 560px) {
  .ahead__switch { display: none; }
  .ahero__foot > span:first-child { display: none; }
  .agal__cols, .agal__col[data-col="2"] { grid-template-columns: 1fr; }
  .agal__col[data-col="1"] { margin-top: 0; }
  .afoot__grid { grid-template-columns: 1fr; }
  .afoot__bottom { flex-direction: column; align-items: flex-start; }
}