:root {
  --navy: #1b3a80;
  --deep: #12285a;
  --green: #6aaa3a;
  --soft: #e8f3dc;
  --bg: #f6f9fc;
  --white: #fff;
  --ink: #1d2433;
  --muted: #5b6577;
  --line: #eaeff5;
  --card-line: #e4eaf2;
  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1152px;
  --gutter: clamp(20px, 4vw, 24px);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html.intro-on { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--soft); color: var(--deep); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 80px; display: flex; align-items: center; justify-content: space-between;
}
.nav__brand img { height: 48px; width: auto; mix-blend-mode: multiply; }
.nav__links { display: flex; gap: clamp(16px, 4vw, 32px); }
.nav__links a {
  color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: color .2s;
}
.nav__links { align-items: center; }
.nav__links a:hover { color: var(--navy); }
.nav__links .nav__cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 600;
  transition: background .25s, translate .3s var(--spring);
}
.nav__links .nav__cta:hover { background: var(--deep); color: #fff; translate: 0 -2px; }
.nav__cta .ico { width: 16px; height: 16px; }
.nav__links .nav__login {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line, #dfe5ee); color: var(--navy); font-weight: 600;
  transition: border-color .2s, background .2s, translate .3s var(--spring);
}
.nav__links .nav__login:hover { border-color: var(--green); background: rgba(106,170,58,.08); translate: 0 -2px; }
.nav__login .ico { width: 16px; height: 16px; }
.nav__links .nav__quote {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: var(--green); color: #fff; font-weight: 600;
  box-shadow: 0 10px 20px -12px rgba(79,143,42,.8);
  transition: background .25s, translate .3s var(--spring);
}
.nav__links .nav__quote:hover { background: #5c9a30; color: #fff; translate: 0 -2px; }
.nav__quote:focus-visible { outline: 3px solid rgba(106,170,58,.55); outline-offset: 3px; }

/* ---------- Ortak: ikon + düğmeler ---------- */
.ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em;
  transition: background .25s, color .25s, box-shadow .3s, translate .35s var(--spring);
}
.btn:hover { translate: 0 -3px; }
.btn:active { translate: 0 1px; }
.btn:focus-visible, .nav__cta:focus-visible, .pk__link:focus-visible { outline: 3px solid rgba(106,170,58,.55); outline-offset: 3px; }
.btn--wa { background: var(--green); color: #fff; box-shadow: 0 12px 24px -10px rgba(79,143,42,.7); }
.btn--wa:hover { background: #5c9a30; box-shadow: 0 16px 28px -10px rgba(79,143,42,.8); }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 12px 24px -10px rgba(18,40,90,.6); }
.btn--navy:hover { background: var(--deep); }
.btn--line { color: var(--deep); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--card-line); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--quote { background: var(--navy); color: #fff; box-shadow: 0 12px 24px -10px rgba(18,40,90,.6); }
.btn--quote:hover { background: var(--deep); }
.btn--quote .ico { width: 18px; height: 18px; transition: translate .35s var(--spring); }
.btn--quote:hover .ico { translate: 4px 0; }

/* ---------- Hero ---------- */
main { padding-top: 80px; }
.hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(56px, 8vw, 112px); }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 48px); align-items: center; }
.badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--soft); color: var(--navy); font-size: .78rem; font-weight: 600; margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--display); font-weight: 700; color: var(--deep);
  font-size: clamp(2.3rem, 5.6vw, 3.9rem); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance;
}
.hl { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(106,170,58,.6); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.lead { margin-top: 24px; max-width: 36em; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); }

/* ---------- Rozetler: şamandıra gibi süzülür ---------- */
.pills { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; padding-bottom: 14px; }
.pill { translate: 0 var(--dy, 0px); }
.pill--1 { --dy: -8px;  --dur: 4.6s; --del: 0s;   --pop: .1s; }
.pill--2 { --dy: 12px;  --dur: 5.4s; --del: -1.2s; --pop: .22s; }
.pill--3 { --dy: -14px; --dur: 4.9s; --del: -2.4s; --pop: .34s; }
.pill--4 { --dy: 8px;   --dur: 5.8s; --del: -3.1s; --pop: .46s; }

.pill__float {
  display: block;
  animation: buoy var(--dur) ease-in-out var(--del) infinite;
}
@keyframes buoy {
  0%, 100% { transform: translateY(0) rotate(-2.4deg); }
  50%      { transform: translateY(-11px) rotate(2.4deg); }
}

.pill__in {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: 999px; cursor: pointer; user-select: none;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  transition: transform .5s var(--spring), box-shadow .3s;
}
.pill__in--deep  { background: var(--deep);  color: #fff; box-shadow: 0 10px 25px -6px rgba(18,40,90,.4); }
.pill__in--green { background: var(--green); color: #fff; box-shadow: 0 10px 25px -6px rgba(106,170,58,.5); }
.pill__in--soft  { background: var(--soft);  color: var(--navy); box-shadow: 0 10px 25px -6px rgba(106,170,58,.3); border: 1px solid rgba(106,170,58,.35); }
.pill__in--navy  { background: var(--navy);  color: #fff; box-shadow: 0 10px 25px -6px rgba(27,58,128,.4); }

/* parlama şeridi */
.pill__in::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: shine 6s ease-in-out infinite; animation-delay: calc(var(--del) * -1 + .8s);
  pointer-events: none;
}
.pill--3 .pill__in::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); }
@keyframes shine {
  0%, 62% { transform: translateX(-160%) skewX(-18deg); }
  86%, 100% { transform: translateX(340%) skewX(-18deg); }
}

.pill:hover .pill__in { transform: translateY(-10px) scale(1.12) rotate(-2deg); }
.pill:hover .pill__float { animation-play-state: paused; }

/* temizlik bitince sırayla yaylı belirir */
.js .pill { opacity: 0; scale: .5; }
.js.cleaned .pill { animation: pop .8s var(--spring) var(--pop) forwards; }
@keyframes pop { to { opacity: 1; scale: 1; } }

.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__proof { margin-top: 18px; font-size: .95rem; color: var(--muted); }
.hero__proof b { font-family: var(--display); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.js .hero__cta, .js .hero__proof { opacity: 0; translate: 0 12px; }
.js.cleaned .hero__cta { animation: rise .7s var(--spring) .7s forwards; }
.js.cleaned .hero__proof { animation: rise .7s var(--spring) .85s forwards; }
@keyframes rise { to { opacity: 1; translate: 0 0; } }

/* ---------- Hero görseli ---------- */
.hero__visual { position: relative; display: flex; justify-content: flex-end; }
.hs { width: clamp(260px, 36vw, 430px); height: auto; filter: drop-shadow(0 24px 30px rgba(18,40,90,.22)); animation: blobFloat 7s ease-in-out infinite; }
@keyframes blobFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }

/* basamaklar alttan üste doğru tozdan arınır (açılıştaki silme bitince) */
.hs-dust { opacity: 0; }
.js .hs-dust { opacity: .8; }
.js.cleaned .hs-dust { animation: dustOff .7s ease var(--d) forwards; }
@keyframes dustOff { to { opacity: 0; } }

.hs-ray { animation: ray 6s ease-in-out infinite alternate; }
@keyframes ray { from { opacity: .55; } to { opacity: 1; } }
.hs-cloud { animation: winCloud 14s linear infinite; }
@keyframes winCloud { from { transform: translateX(-60px); } to { transform: translateX(70px); } }
.hs-gleam { animation: gleam 5.5s ease-in-out 1.6s infinite; }
@keyframes gleam { 0% { transform: translateX(0) skewX(-24deg); } 45%, 100% { transform: translateX(560px) skewX(-24deg); } }

.hs-bubbles circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: bubble 3.2s ease-out infinite; }
.hs-bubbles .b2 { animation-delay: 1.1s; }
.hs-bubbles .b3 { animation-delay: 2.1s; }
@keyframes bubble { 0% { opacity: 0; translate: 0 6px; scale: .6; } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 -34px; scale: 1.15; } }

.hs-spark { transform-box: fill-box; transform-origin: center; scale: 0; animation: twinkleH 3.6s ease-in-out infinite; }
.hs-spark.k2 { animation-delay: .9s; }
.hs-spark.k3 { animation-delay: 1.8s; }
.hs-spark.k4 { animation-delay: 2.7s; }
@keyframes twinkleH { 0%, 60%, 100% { scale: 0; rotate: 0deg; } 75% { scale: 1.1; rotate: 45deg; } 88% { scale: .3; rotate: 80deg; } }

/* "25 yıl" damgası */
.hero__stamp {
  position: absolute; right: -8px; bottom: 4%;
  display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%;
  background: var(--green); color: #fff; text-align: center; line-height: 1.1;
  font-size: .78rem; font-weight: 600; rotate: -10deg;
  box-shadow: 0 14px 28px -8px rgba(79,143,42,.55), inset 0 0 0 5px rgba(255,255,255,.22);
  animation: blobFloat 6s ease-in-out -2s infinite;
}
.hero__stamp b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.js .hero__stamp { opacity: 0; scale: .4; }
.js.cleaned .hero__stamp { animation: pop .8s var(--spring) 1.4s forwards, blobFloat 6s ease-in-out 2.2s infinite; }

/* ---------- Neden OME ---------- */
.why { background: var(--white); border-top: 1px solid var(--line); padding: clamp(64px, 9vw, 96px) 0; }
.eyebrow { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

.why { overflow: clip; padding-bottom: clamp(80px, 11vw, 128px); }
/* masaüstünde sahne sabitlenir; boş pist boyunca kaydırma animasyonu ilerletir (why.js) */
.why__stage { position: sticky; top: 96px; }
.why__runway { height: 120vh; }
.why__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 96px); align-items: center; }

/* apartman çizimi: platform iner, camlar kat kat parlar */
.why__mark { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: clamp(16px, 3vw, 32px) 0; }
.why__blob {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 92%; aspect-ratio: 1;
  translate: -50% -50%; background: var(--soft);
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
  animation: morph 14s ease-in-out infinite alternate;
}
@keyframes morph {
  0%   { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; rotate: 0deg; }
  100% { border-radius: 44% 56% 46% 54% / 57% 43% 57% 43%; rotate: 14deg; }
}
.apt { position: relative; z-index: 1; width: 100%; max-width: 460px; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(18,40,90,.14)); }
/* camlar her zaman cam; üstlerindeki toz, platform o kata inince silinir (why.js kaydırmaya bağlar) */
.js .apt .dust { opacity: .82; transition: opacity .7s ease; }
.js .apt .dust.is-clean { opacity: 0; }
.apt__squeegee { transform-box: fill-box; transform-origin: 0% 50%; animation: wipe 1.1s ease-in-out infinite alternate; }
@keyframes wipe { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }

.apt__cloud { animation: drift 16s ease-in-out infinite alternate; }
.apt__cloud.c2 { animation-duration: 20s; animation-direction: alternate-reverse; }
@keyframes drift { from { translate: -8px 0; } to { translate: 10px 0; } }

.apt__sheen { translate: -120px 0; }
.why.is-in .apt__sheen { animation: sheen 7s ease-in-out 3.2s infinite; }
@keyframes sheen {
  0%   { translate: -120px 0; }
  30%, 100% { translate: 380px 0; }
}

.spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.why.is-in .spark { animation: twinkle 3.6s ease-in-out infinite; }
.why.is-in .s1 { animation-delay: 1.1s; }
.why.is-in .s2 { animation-delay: 2.2s; }
.why.is-in .s3 { animation-delay: 3.1s; }
.why.is-in .s4 { animation-delay: 4.3s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  18%      { opacity: 1; transform: scale(1) rotate(45deg); }
  36%      { opacity: 0; transform: scale(.3) rotate(90deg); }
}

.why__badge {
  position: absolute; z-index: 2; left: clamp(0px, 2vw, 16px); top: clamp(8px, 4vw, 40px);
  display: flex; flex-direction: column; padding: 12px 18px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--card-line);
  box-shadow: 0 14px 30px -12px rgba(18,40,90,.28);
  font-size: .82rem; font-weight: 500; color: var(--muted); line-height: 1.3;
  rotate: -4deg; animation: blobFloat 6s ease-in-out infinite;
}
.why__badge b { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--navy); }

.why__body h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); color: var(--deep); }
.why__lead { margin-top: 14px; max-width: 34em; font-size: 1.12rem; color: var(--muted); text-wrap: pretty; }

/* kart yok: ince çizgilerle ayrılan satırlar */
.why__list { margin-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--card-line); }
.why__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 6px 32px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--card-line);
  transition: padding-left .45s var(--spring), opacity .6s ease, translate .8s var(--spring);
}
.why__row::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 3px;
  background: var(--green); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--spring);
}
.why__row:hover { padding-left: 20px; }
.why__row:hover::before { transform: scaleY(1); }
.why__row h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.4rem); letter-spacing: -0.015em; color: var(--deep); line-height: 1.25; }
.why__row p { color: var(--muted); font-size: 1rem; }

/* görünür olunca satırlar sırayla gelir */
.js .why__row { opacity: 0; translate: 0 18px; }
.js .why.is-in .why__row { opacity: 1; translate: 0 0; }
.why__row:nth-child(2) { transition-delay: 0s, .12s, .12s; }
.why__row:nth-child(3) { transition-delay: 0s, .24s, .24s; }
.why__row:nth-child(4) { transition-delay: 0s, .36s, .36s; }

.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--white); border: 1px solid #e3e8ef; color: var(--navy); font-size: .75rem; font-weight: 600; }
.tag--dark { background: rgba(255,255,255,.1); border-color: transparent; color: var(--soft); }

/* ---------- Hizmet Bölgeleri ---------- */
.areas { position: relative; background: var(--deep); color: #fff; padding: clamp(56px, 8vw, 80px) 0 clamp(72px, 10vw, 112px); }
.areas__wave { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: clamp(48px, 7vw, 80px); transform: translateY(-98%); pointer-events: none; display: block; }
.areas__intro { max-width: 42rem; margin-bottom: clamp(36px, 6vw, 64px); position: relative; }
.areas__intro h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin-top: 16px; }
.areas__intro p { margin-top: 16px; font-size: 1.08rem; color: #bac7df; }
.areas__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; }

/* ---- Harita ---- */
.areas__map { margin: 0; position: relative; }
.areas__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__d {
  fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.16); stroke-width: 1.4; stroke-linejoin: round;
  transition: fill .4s ease, stroke .4s ease;
}
.map__d.is-served { fill: rgba(106,170,58,.24); stroke: rgba(143,212,90,.7); stroke-width: 1.8; cursor: pointer; }
.map__d.is-served.is-active { fill: rgba(106,170,58,.42); stroke: #a9e07a; }
.map__labels text { fill: rgba(255,255,255,.3); font: 500 19px var(--body); text-anchor: middle; letter-spacing: .02em; pointer-events: none; }
.map__sea { fill: rgba(169,215,127,.35); font: italic 500 20px var(--body); letter-spacing: .14em; text-anchor: middle; pointer-events: none; }

.pin { cursor: pointer; }
.pin__drop { transition: scale .35s var(--spring); transform-box: fill-box; transform-origin: 50% 100%; }
.pin.is-active .pin__drop { scale: 1.18; }
.pin__glow { animation: glow 2.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pin__ring {
  fill: none; stroke: #8fd45a; stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  animation: ripple 2.8s cubic-bezier(.2, .6, .35, 1) infinite;
}
.pin__ring--2 { animation-delay: 1.4s; }
@keyframes ripple { 0% { scale: .2; opacity: .95; } 100% { scale: 1.7; opacity: 0; } }
.pin--2 .pin__ring, .pin--2 .pin__glow { animation-delay: .5s; }
.pin--2 .pin__ring--2 { animation-delay: 1.9s; }
.pin--3 .pin__ring, .pin--3 .pin__glow { animation-delay: 1s; }
.pin--3 .pin__ring--2 { animation-delay: 2.4s; }
.pin--4 .pin__ring, .pin--4 .pin__glow { animation-delay: 1.5s; }
.pin--4 .pin__ring--2 { animation-delay: 2.9s; }
.pin__label {
  fill: #fff; font: 700 36px var(--display); text-anchor: middle; letter-spacing: -.01em;
  paint-order: stroke; stroke: #12285a; stroke-width: 9px; stroke-linejoin: round;
  transition: fill .3s;
}
.pin.is-active .pin__label { fill: #c4ec9f; }

/* bölüm görünür olunca ikonlar sırayla düşüp yerine oturur */
.js .areas .pin { opacity: 0; translate: 0 -46px; transition: opacity .4s ease, translate .9s var(--spring); }
.js .areas.is-in .pin { opacity: 1; translate: 0 0; }
.js .areas.is-in .pin--2 { transition-delay: .15s; }
.js .areas.is-in .pin--3 { transition-delay: .3s; }
.js .areas.is-in .pin--4 { transition-delay: .45s; }

.areas__credit { margin-top: 10px; font-size: .68rem; color: rgba(255,255,255,.32); }

/* ---- Liste ---- */
.areas__list { border-top: 1px solid rgba(255,255,255,.15); position: relative; }
.areas__list li {
  display: grid; grid-template-columns: 36px 1fr; gap: 4px 16px; align-items: baseline;
  padding: clamp(18px, 2.6vw, 26px) 0; border-bottom: 1px solid rgba(255,255,255,.15);
  cursor: pointer; outline: none;
  transition: padding-left .4s var(--spring);
}
.areas__list li.is-active, .areas__list li:focus-visible { padding-left: 14px; }
.areas__no { font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.4); }
.areas__list h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.85rem); letter-spacing: -0.01em; transition: color .3s; }
.areas__list li.is-active h3 { color: #a9d77f; }
.areas__live { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: #bac7df; }
.areas__live i { width: 8px; height: 8px; border-radius: 50%; background: #8fd45a; box-shadow: 0 0 0 0 rgba(143,212,90,.6); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(143,212,90,.6); } 100% { box-shadow: 0 0 0 9px rgba(143,212,90,0); } }

/* ---------- Rakamlar ---------- */
.stats { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(36px, 5vw, 52px) 0; }
.stats__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 6px clamp(16px, 3vw, 40px); border-left: 1px solid var(--card-line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--navy); }
.stat__num b { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.035em; color: var(--deep); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: .98rem; }
.js .stat { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .8s var(--spring); }
.js .stats.is-in .stat { opacity: 1; translate: 0 0; }
.js .stats.is-in .stat:nth-child(2) { transition-delay: .12s; }
.js .stats.is-in .stat:nth-child(3) { transition-delay: .24s; }

/* ---------- Hizmetler ---------- */
.svc { background: var(--white); padding: clamp(64px, 9vw, 104px) 0 clamp(96px, 12vw, 152px); }
.svc__head { max-width: 40rem; }
.svc__head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--deep); text-wrap: balance; }
.svc__head p { margin-top: 14px; font-size: 1.1rem; color: var(--muted); text-wrap: pretty; }
.svc__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: 6fr 6fr; gap: clamp(24px, 4vw, 48px); align-items: start; }

/* temizlik listesi: madde madde tiklenen kontrol listesi */
.check { position: relative; background: var(--bg); border-radius: 28px; padding: clamp(24px, 3.4vw, 36px); }
.check__title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--deep); margin-bottom: 8px; }
.check__list li {
  display: grid; grid-template-columns: 44px 1fr 26px; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px dashed #d3ddeb; font-size: 1.02rem; color: var(--ink);
}
.check__list li:last-child { border-bottom: 0; padding-bottom: 4px; }
.check__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--white); color: var(--navy); box-shadow: 0 6px 14px -8px rgba(18,40,90,.35); }
.check__ico .ico { width: 22px; height: 22px; }
.check__box { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c3d3ea; display: grid; place-items: center; transition: background .35s ease, box-shadow .35s ease; }
.check__box svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s ease .15s; }
.svc.is-in .check__box, html:not(.js) .check__box { background: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.svc.is-in .check__box svg, html:not(.js) .check__box svg { stroke-dashoffset: 0; }
.check__list li:nth-child(2) .check__box, .check__list li:nth-child(2) .check__box svg { transition-delay: .35s; }
.check__list li:nth-child(3) .check__box, .check__list li:nth-child(3) .check__box svg { transition-delay: .7s; }
.check__list li:nth-child(4) .check__box, .check__list li:nth-child(4) .check__box svg { transition-delay: 1.05s; }
.check__list li:nth-child(5) .check__box, .check__list li:nth-child(5) .check__box svg { transition-delay: 1.4s; }

/* paketler */
.pk { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pk__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 26px; border-radius: 24px; background: var(--soft);
  transition: translate .4s var(--spring), box-shadow .3s;
}
.pk__card:hover { translate: 0 -4px; box-shadow: 0 18px 32px -18px rgba(18,40,90,.35); }
.pk__num { font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: .9; letter-spacing: -0.04em; color: var(--deep); }
.pk__num span { color: var(--green); font-size: 2.4rem; margin-left: 2px; }
.pk__card h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--deep); letter-spacing: -0.01em; }
.pk__month { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 6px; }
.pk__month span { height: 10px; border-radius: 6px; background: rgba(27,58,128,.12); }
.pk__month span.on { background: var(--green); }
.pk__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--navy); font-weight: 600; font-size: .95rem; text-decoration: none; border-radius: 6px;
}
.pk__link .ico { width: 18px; height: 18px; transition: translate .35s var(--spring); }
.pk__link:hover .ico { translate: 4px 0; }

.pk__card--plus { grid-column: 1 / -1; background: var(--deep); color: #d7e0ef; padding: 30px 30px 28px; }
.pk__card--plus h3 { color: #fff; font-size: 1.45rem; max-width: 18em; }
.pk__card--plus p { max-width: 32em; font-size: 1rem; line-height: 1.55; position: relative; }
.pk__card--plus .pk__link { color: #a9e07a; }
.pk__tag { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--green); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pk__steam { position: absolute; right: 18px; bottom: -6px; width: 150px; height: 150px; fill: none; stroke: rgba(255,255,255,.16); stroke-width: 6; stroke-linecap: round; pointer-events: none; }
.pk__steam path { animation: steam 3.4s ease-in-out infinite; }
.pk__steam path:nth-child(2) { animation-delay: 1.1s; }
.pk__steam path:nth-child(3) { animation-delay: 2.2s; }
@keyframes steam { 0% { opacity: 0; translate: 0 18px; } 35% { opacity: 1; } 100% { opacity: 0; translate: 0 -22px; } }

/* ---------- İletişim ---------- */
.contact { background: var(--bg); padding: clamp(72px, 10vw, 120px) 0 clamp(80px, 11vw, 128px); }
.contact__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.contact h2 { font-size: clamp(2rem, 4.6vw, 3rem); color: var(--deep); text-wrap: balance; }
.contact__lead { margin-top: 12px; font-size: 1.12rem; color: var(--muted); }
.contact__phone {
  display: inline-block; margin-top: 26px; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 3.4rem); letter-spacing: -0.03em; color: var(--navy); text-decoration: none;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0 4px no-repeat;
  transition: color .25s, background-size .45s var(--spring);
}
.contact__phone:hover { color: var(--deep); background-size: 100% 4px; }
.contact__btns { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact__form {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.contact__form .ico { width: 16px; height: 16px; transition: translate .35s var(--spring); }
.contact__form:hover .ico { translate: 4px 0; }
.contact__meta { margin-top: 36px; display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--card-line); }
.contact__meta li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); }
.contact__meta li > .ico { color: var(--green); margin-top: 2px; }
.contact__meta address { font-style: normal; line-height: 1.5; }
.contact__meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600; text-decoration: none; }
.contact__meta a .ico { width: 16px; height: 16px; transition: translate .35s var(--spring); }
.contact__meta a:hover .ico { translate: 3px 0; }
.contact__meta address + a { margin-top: 4px; font-size: .92rem; }

.hours { background: var(--deep); color: #d7e0ef; border-radius: 28px; padding: clamp(26px, 3.4vw, 36px); box-shadow: 0 30px 50px -30px rgba(18,40,90,.6); }
.hours__title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: #fff; }
.hours__status { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .88rem; color: #d7e0ef; }
.hours__status[hidden] { display: none; }
.hours__status i { width: 9px; height: 9px; border-radius: 50%; background: #93a3c2; flex: none; }
.hours__status.is-open { color: #c4ec9f; background: rgba(106,170,58,.16); }
.hours__status.is-open i { background: #8fd45a; animation: live 2.4s ease-out infinite; }
.hours__table { margin-top: 18px; width: 100%; border-collapse: collapse; font-size: .98rem; }
.hours__table th, .hours__table td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hours__table th { text-align: left; font-weight: 500; color: #d7e0ef; }
.hours__table td { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-weight: 500; }
.hours__table tr:last-child th, .hours__table tr:last-child td { border-bottom: 0; color: #93a3c2; }
.hours__table tr.is-today th, .hours__table tr.is-today td { background: rgba(255,255,255,.08); color: #c4ec9f; font-weight: 700; }
.hours__table tr.is-today th { border-radius: 10px 0 0 10px; }
.hours__table tr.is-today td { border-radius: 0 10px 10px 0; }

/* ---------- Sabit iletişim düğmesi ---------- */
.fab {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  opacity: 0; translate: 0 20px; pointer-events: none;
  transition: opacity .3s ease, translate .45s var(--spring);
}
.fab.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.fab__call { display: none; }
.fab__wa {
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 17px; border-radius: 999px;
  background: var(--green); color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700;
  box-shadow: 0 14px 28px -10px rgba(47,111,38,.75); overflow: hidden; max-width: 58px;
  transition: max-width .45s var(--spring), background .25s;
}
.fab__wa .ico { width: 24px; height: 24px; }
.fab__wa span { white-space: nowrap; opacity: 0; transition: opacity .2s; }
.fab__wa:hover span, .fab__wa:focus-visible span { opacity: 1; transition-delay: .1s; }
.fab__wa:hover, .fab__wa:focus-visible { max-width: 200px; background: #5c9a30; }

/* ---------- Footer ---------- */
/* zemin, lacivert logonun kendi zemin rengi: logo kutusuz oturur */
.footer { --footer-bg: #062e6c; background: var(--footer-bg); color: #bac7df; padding: clamp(48px, 7vw, 72px) 0 28px; }
.footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.footer__top { display: grid; grid-template-columns: 4fr 7fr; gap: 40px; align-items: start; padding-bottom: clamp(36px, 5vw, 52px); }
.footer__brand img { height: 64px; width: auto; margin-left: -6px; }
.footer__brand p { margin-top: 18px; max-width: 22em; font-size: 1.02rem; line-height: 1.55; color: #d7e0ef; text-wrap: pretty; }

.footer__cols { display: grid; grid-template-columns: .8fr .8fr 1.3fr; gap: 32px; justify-self: end; width: min(100%, 640px); }
.footer__small { margin-top: 12px; font-size: .86rem; line-height: 1.5; color: #93a3c2; }
.footer__h { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8fd45a; margin-bottom: 14px; }
.footer__cols ul { display: grid; gap: 10px; }
.footer__cols a {
  position: relative; color: #e6ecf6; text-decoration: none; font-weight: 500; font-size: .98rem;
  transition: color .25s;
}
.footer__cols a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px;
  background: #8fd45a; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--spring);
}
.footer__cols a:hover { color: #fff; }
.footer__cols a:hover::after, .footer__cols a:focus-visible::after { transform: scaleX(1); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: #93a3c2;
}

/* başa dön: açılıştaki sünger, üzerine gelince ovalar */
.footer__up {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  transition: background .25s, translate .3s var(--spring);
}
.footer__up:hover { background: rgba(255,255,255,.14); translate: 0 -2px; }
.footer__up:active { translate: 0 1px; }
.footer__sponge { position: relative; width: 26px; height: 18px; display: block; }
.footer__sponge::before, .footer__sponge i {
  content: ""; position: absolute; left: 0; right: 0; display: block;
}
.footer__sponge::before {
  top: 0; height: 70%; border-radius: 6px 6px 3px 3px;
  background: radial-gradient(circle at 30% 45%, rgba(150,100,0,.35) 0 1.5px, transparent 2px), radial-gradient(circle at 68% 35%, rgba(150,100,0,.35) 0 1.5px, transparent 2px), linear-gradient(160deg, #ffe35c, #f7c92b 60%, #e0a812);
}
.footer__sponge i { bottom: 0; height: 38%; border-radius: 2px 2px 5px 5px; background: linear-gradient(180deg, #4f9a3a, #2f6f26); }
.footer__up:hover .footer__sponge { animation: scrub .5s ease-in-out infinite alternate; }
@keyframes scrub { from { transform: translateX(-2px) rotate(-8deg); } to { transform: translateX(2px) rotate(8deg); } }

/* ---------- Açılış: kirli ekran + sünger ---------- */
.intro { display: none; position: fixed; inset: 0; z-index: 1000; overflow: hidden; touch-action: none; }
.intro-on .intro { display: block; }
.intro__grime, .intro__foam { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__grime { transition: opacity .7s ease; background: rgba(98, 86, 68, .8); }
.intro__foam { pointer-events: none; transition: opacity .5s ease; }
.intro.is-done .intro__grime, .intro.is-done .intro__foam { opacity: 0; }
.intro.is-done .intro__skip { opacity: 0; pointer-events: none; }
.intro.is-done { pointer-events: none; }

.intro__skip {
  position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  font: 600 .85rem var(--body); color: #fff;
  background: rgba(18, 40, 90, .55); border: 1px solid rgba(255,255,255,.35);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
  transition: opacity .3s, background .2s;
}
.intro__skip:hover { background: rgba(18, 40, 90, .8); }

.sponge {
  --sw: 200px;
  position: absolute; left: 0; top: 0; width: var(--sw); height: calc(var(--sw) * .66);
  will-change: transform; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.35));
}
.sponge.is-on { opacity: 1; }
.sponge__pad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  border-radius: 10% 10% 24% 24% / 30% 30% 50% 50%;
  background:
    radial-gradient(rgba(0,0,0,.14) 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(180deg, #4f9a3a, #2f6f26);
}
.sponge__body {
  position: absolute; left: 0; right: 0; top: 0; height: 74%;
  border-radius: 24% 24% 14% 14% / 38% 38% 24% 24%;
  background:
    radial-gradient(circle at 16% 34%, rgba(150,100,0,.38) 0 5%, transparent 6%),
    radial-gradient(circle at 34% 68%, rgba(150,100,0,.32) 0 4%, transparent 5%),
    radial-gradient(circle at 52% 28%, rgba(150,100,0,.36) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 62%, rgba(150,100,0,.34) 0 5%, transparent 6%),
    radial-gradient(circle at 86% 30%, rgba(150,100,0,.3) 0 4%, transparent 5%),
    radial-gradient(circle at 24% 84%, rgba(150,100,0,.28) 0 3%, transparent 4%),
    radial-gradient(circle at 62% 86%, rgba(150,100,0,.3) 0 3.5%, transparent 4.5%),
    linear-gradient(160deg, #ffe35c, #f7c92b 58%, #e0a812);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -6px 10px rgba(150,95,0,.35);
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { justify-content: center; order: -1; }
  .hs { width: min(82vw, 340px); }
  .hero__stamp { width: 84px; height: 84px; font-size: .7rem; right: 4%; }
  .hero__stamp b { font-size: 1.2rem; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { justify-self: start; grid-template-columns: 1fr 1fr; }
  .footer__contact { grid-column: 1 / -1; }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .nav__links a:not(.nav__cta):not(.nav__login):not(.nav__quote) { display: none; }
  .nav__links { gap: 8px; }
  .nav__links .nav__login { padding: 8px 12px; font-size: .88rem; }
  .nav__links .nav__cta { padding: 9px 15px; font-size: .88rem; }
  .nav__links .nav__quote { padding: 9px 15px; font-size: .88rem; }
  .stats__row { grid-template-columns: 1fr; gap: 18px; }
  .stat { border-left: 0; padding: 0 0 18px; border-bottom: 1px solid var(--card-line); }
  .stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .svc__grid, .contact__grid { grid-template-columns: 1fr; }
  .pk { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pk__card { padding: 20px; }
  .pk__num { font-size: 2.8rem; }
  .check__list li { grid-template-columns: 40px 1fr 24px; gap: 12px; font-size: .97rem; }
  .check__ico { width: 40px; height: 40px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .fab { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
  .fab__call, .fab__wa {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; max-width: none; padding: 0 16px;
    border-radius: 16px; font-family: var(--display); font-weight: 700; text-decoration: none;
  }
  .fab__call { background: var(--navy); color: #fff; box-shadow: 0 14px 28px -10px rgba(18,40,90,.6); }
  .fab__wa:hover { max-width: none; }
  .fab__wa span { opacity: 1; }
  .footer__brand img { height: 54px; }
  .why__grid { grid-template-columns: 1fr; gap: 24px; }
  .apt { max-width: 340px; }
  .why__stage { position: static; }
  .why__runway { display: none; }
  .why__blob { width: min(80%, 320px); }
  .why__row { grid-template-columns: 1fr; }
  .areas__grid { grid-template-columns: 1fr; }
  .nav__brand img { height: 40px; }
  .pill__in { padding: 12px 22px; font-size: .95rem; }
}

/* Not: açılış ve rozet animasyonları hareket azaltma tercihini bilinçli olarak yok sayar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* dar ekranda panel girişi yalnız ikon */
@media (max-width: 560px) {
  .nav__links .nav__cta span { display: none; }
  .nav__links .nav__cta { padding: 9px 11px; }
}
@media (max-width: 420px) {
  .nav__links .nav__login span { display: none; }
  .nav__links .nav__login { padding: 8px 10px; }
}

/* ---------- Sık sorulan sorular ---------- */
.faq { background: var(--bg); border-top: 1px solid var(--line); padding: clamp(64px, 9vw, 104px) 0; }
.faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); color: var(--deep); text-wrap: balance; }
.faq__head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; text-wrap: pretty; }
.faq__head a { color: var(--navy); font-weight: 600; text-decoration-color: var(--green); text-underline-offset: 3px; }
.faq__list { border-top: 1px solid var(--card-line); }
.faq__item { border-bottom: 1px solid var(--card-line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none; transition: padding-left .45s var(--spring);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { padding-left: 10px; }
.faq__item h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.22rem); letter-spacing: -0.01em; color: var(--deep); line-height: 1.3; }
.faq__ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--card-line); transition: background .3s, box-shadow .3s, rotate .45s var(--spring); }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--navy); translate: -50% -50%; transition: background .3s; }
.faq__ico::after { rotate: 90deg; }
.faq__item[open] .faq__ico { rotate: 135deg; background: var(--green); box-shadow: none; }
.faq__item[open] .faq__ico::before, .faq__item[open] .faq__ico::after { background: #fff; }
.faq__item p { padding: 0 54px 24px 0; color: var(--muted); font-size: 1.02rem; text-wrap: pretty; }
@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; gap: 24px; }
  .faq__head { position: static; }
  .faq__item p { padding-right: 0; }
}

/* ---------- İlçe sayfası bağlantısı (harita listesi) ---------- */
.areas__go { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; width: fit-content; font-size: .86rem; font-weight: 600; color: #a9d77f; text-decoration: none; transition: gap .3s var(--spring), color .2s; }
.areas__go .ico { width: 15px; height: 15px; }
.areas__go:hover { color: #fff; gap: 10px; }

/* ---------- Blog vitrini ve yazı listesi ---------- */
.guide { background: var(--white); border-top: 1px solid var(--line); padding: clamp(64px, 9vw, 104px) 0; }
.guide__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 4vw, 40px); }
.guide__head .eyebrow { flex-basis: 100%; margin-bottom: -4px; }
.guide__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); color: var(--deep); text-wrap: balance; }
.guide__all { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 600; text-decoration: none; transition: gap .3s var(--spring); }
.guide__all:hover { gap: 12px; }
.post-list { border-top: 1px solid var(--card-line); }
.post-row a {
  position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: 4px 32px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--card-line); text-decoration: none; color: inherit;
  transition: padding-left .45s var(--spring);
}
.post-row a::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--green); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--spring); }
.post-row a:hover { padding-left: 20px; }
.post-row a:hover::before { transform: scaleY(1); }
.post-row__meta { grid-row: span 2; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.post-row__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -0.015em; line-height: 1.3; color: var(--deep); }
.post-row__text { color: var(--muted); font-size: .98rem; max-width: 46em; }
@media (max-width: 860px) {
  .post-row a { grid-template-columns: 1fr; }
  .post-row__meta { grid-row: auto; }
}