/* ==========================================================================
   Ana sayfa — hero (Ken Burns karoseli), jargon bandı, rakamlar,
   bedesten çizimi, şantiye panosu, projeler, hizmetler, süreç
   ========================================================================== */

/* ---------------------------------------------------------------- HERO */
.hero {
  --kb: 0;
  position: relative;
  height: clamp(640px, 96svh, 1000px);
  overflow: hidden;
  isolation: isolate;
  background: var(--kursun-900);
  color: var(--kirec);
  color-scheme: dark;
}
.hero-sahne { position: absolute; inset: 0; z-index: -3; }
.hero-slayt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.15s cubic-bezier(.75, 0, .2, 1);
}
.hero-slayt.etkin { z-index: 2; clip-path: inset(0 0 0 0); }
.hero-slayt.cikan { z-index: 1; clip-path: inset(0 0 0 0); transition: none; }
.hero-gorsel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--kb-x, 50%) var(--kb-y, 50%);
  transform:
    translate3d(calc(var(--kb-dx, 0%) * var(--kb)), calc(var(--kb-dy, 0%) * var(--kb)), 0)
    scale(calc(1.02 + .24 * var(--kb)));
  will-change: transform;
  backface-visibility: hidden;
}
.hero-slayt.cikan .hero-gorsel { filter: brightness(.7); transition: filter 1.1s; }

/* geçişte ekranı tarayan ikaz çizgisi */
.hero-silme {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  z-index: 3;
  width: 4px;
  background: var(--ikaz);
  box-shadow: 0 0 24px 4px rgba(232, 163, 23, .55);
  opacity: 0;
  pointer-events: none;
}
.hero-silme.kos { animation: silme-kos 1.15s cubic-bezier(.75, 0, .2, 1) both; }
@keyframes silme-kos {
  0% { left: 100%; opacity: 1; }
  92% { opacity: 1; }
  100% { left: 0%; opacity: 0; }
}

.hero-perde {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(22, 27, 32, .62) 0%, rgba(22, 27, 32, 0) 26%),
    linear-gradient(90deg, rgba(22, 27, 32, .88) 0%, rgba(22, 27, 32, .6) 34%, rgba(22, 27, 32, .08) 66%, rgba(22, 27, 32, 0) 100%),
    linear-gradient(0deg, rgba(22, 27, 32, .9) 0%, rgba(22, 27, 32, .35) 28%, rgba(22, 27, 32, 0) 52%);
}

/* proje paftası aks çizgileri */
.hero-aks {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-left: var(--kenar-sol);
  padding-right: var(--kenar-sag);
  pointer-events: none;
}
.hero-aks span { position: relative; border-left: 1px dashed rgba(241, 236, 226, .12); }
.hero-aks span::before {
  content: attr(data-aks);
  position: absolute;
  top: 150px;
  left: -14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(241, 236, 226, .3);
  border-radius: 50%;
  background: rgba(22, 27, 32, .4);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(241, 236, 226, .6);
}

.hero-ic {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: calc(var(--kap) + 96px);
  margin-inline: auto;
  padding: 0 var(--kenar-sag) clamp(26px, 3.4vw, 44px) var(--kenar-sol);
}
.hero-metinler { display: grid; }
.hero-metin {
  grid-area: 1 / 1;
  display: grid;
  gap: 20px;
  align-content: end;
  max-width: 980px;
  visibility: hidden;
}
.hero-metin.etkin, .hero-metin.cikis { visibility: visible; }

.hero-terim {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ikaz);
}
.hero-sira {
  padding: 3px 8px;
  border: 1px solid rgba(232, 163, 23, .55);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.hero-baslik {
  font-family: var(--f-baslik);
  font-weight: 800;
  font-size: clamp(2.9rem, 6.4vw, 6.6rem);
  line-height: .9;
  letter-spacing: .003em;
  text-wrap: balance;
}
.hero-baslik .k { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-baslik .k > span { display: inline-block; }
.hero-aciklama { max-width: 58ch; font-size: 1.1rem; line-height: 1.6; color: rgba(241, 236, 226, .86); }
.hero-cipler { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.hero-cipler div { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--ikaz); }
.hero-cipler dt { font-size: .82rem; color: rgba(241, 236, 226, .66); }
.hero-cipler dd { font-weight: 650; font-size: 1.08rem; font-variant-numeric: tabular-nums; }

/* metin giriş/çıkış */
.hero-metin.etkin .k > span { animation: kelime-gir .95s var(--yavas) both; animation-delay: calc(.45s + var(--k) * 45ms); }
.hero-metin.etkin .hero-terim,
.hero-metin.etkin .hero-aciklama,
.hero-metin.etkin .hero-cipler { animation: yukari-gir .9s var(--yavas) both; }
.hero-metin.etkin .hero-terim { animation-delay: .3s; }
.hero-metin.etkin .hero-aciklama { animation-delay: .8s; }
.hero-metin.etkin .hero-cipler { animation-delay: .95s; }
.hero-metin.cikis > * { animation: yukari-cik .45s ease-in both; }
@keyframes kelime-gir { from { transform: translateY(108%); } }
@keyframes yukari-gir { from { opacity: 0; transform: translateY(18px); } }
@keyframes yukari-cik { to { opacity: 0; transform: translateY(-14px); } }

.hero-kontrol {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 48px);
}
.hero-sekmeler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  flex: 1 1 auto;
  max-width: 860px;
}
.hero-sekme {
  position: relative;
  padding: 18px 0 4px;
  border: 0;
  background: none;
  text-align: left;
  font-weight: 600;
  font-size: .95rem;
  color: rgba(241, 236, 226, .58);
  transition: color .3s;
}
.hero-sekme:hover, .hero-sekme[aria-selected="true"] { color: var(--kirec); }
.sekme-dolum {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(241, 236, 226, .2);
}
.sekme-dolum::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ikaz);
  transform-origin: 0 50%;
  transform: scaleX(var(--ilerleme, 0));
}
.hero-sekme[aria-selected="true"] .sekme-dolum { background: rgba(232, 163, 23, .25); }
.hero-sekme[aria-selected="false"] .sekme-dolum::after { transform: scaleX(0); }
.sekme-ad { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hero-oklar { display: flex; gap: 8px; }
.hero-ok, .proje-ok {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(241, 236, 226, .35);
  border-radius: 2px;
  background: rgba(22, 27, 32, .3);
  transition: background-color .2s, border-color .2s, color .2s;
}
.hero-ok svg, .proje-ok svg { width: 22px; height: 22px; }
.hero-ok path, .proje-ok path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-ok:hover { background: var(--ikaz); border-color: var(--ikaz); color: var(--murekkep); }

/* çekül: kaydırma işareti */
.hero-cekul {
  position: absolute;
  top: 38%;
  right: var(--kenar-sag);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--kirec);
  text-decoration: none;
  transform-origin: 50% 0;
  animation: cekul-salin 3.6s ease-in-out infinite;
}
.cekul-ip { width: 1.5px; height: 86px; background: rgba(241, 236, 226, .7); }
.cekul-agirlik {
  width: 14px;
  height: 22px;
  background: linear-gradient(90deg, #b07a0d, var(--ikaz) 45%, #f6cd70 55%, #b07a0d);
  clip-path: polygon(15% 0, 85% 0, 100% 30%, 50% 100%, 0 30%);
}
.cekul-yazi {
  margin-top: 14px;
  writing-mode: vertical-rl;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(241, 236, 226, .75);
}
@keyframes cekul-salin {
  0%, 100% { rotate: 3deg; }
  50% { rotate: -3deg; }
}

/* ------------------------------------------------------- JARGON BANDI */
.jargon-bandi {
  position: relative;
  overflow: hidden;
  padding-block: 16px;
  background: var(--ikaz);
  color: var(--murekkep);
}
.jargon-bandi::before, .jargon-bandi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--murekkep) 0 8px, transparent 8px 16px);
}
.jargon-bandi::before { top: 0; }
.jargon-bandi::after { bottom: 0; }
.jargon-ray { display: flex; width: max-content; animation: jargon-kay 70s linear infinite; }
.jargon-bandi:hover .jargon-ray { animation-play-state: paused; }
.jargon-liste { display: flex; flex-shrink: 0; }
.jargon-liste li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--f-stencil);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jargon-liste li::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--murekkep);
  transform: rotate(45deg);
}
@keyframes jargon-kay { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- RAKAMLAR */
.rakamlar {
  background-image:
    linear-gradient(90deg, rgba(241, 236, 226, .04) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.rakam-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(241, 236, 226, .18);
}
.rakam {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(28px, 3.2vw, 44px) clamp(16px, 2.4vw, 36px) clamp(30px, 3.4vw, 48px) 0;
  border-bottom: 1px solid rgba(241, 236, 226, .18);
}
.rakam:not(:nth-child(3n + 1)) { padding-left: clamp(16px, 2.4vw, 36px); border-left: 1px solid rgba(241, 236, 226, .18); }
.rakam-deger {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-weight: 700;
  font-stretch: 72%;
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--kirec);
}
.rakam-birim {
  margin-left: .18em;
  font-size: .42em;
  font-weight: 600;
  font-stretch: 90%;
  color: var(--ikaz);
}
.rakam-etiket { font-weight: 650; font-size: 1.15rem; }
.rakam-not { font-size: .94rem; color: var(--kursun-300); }

/* ---------------------------------------------------------- BEDESTEN */
.bedesten-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 110px);
}
.bedesten-cizim {
  --by-tas: #e9e1cf;
  --by-kaide: #cfc2a7;
  --by-tugla: #a4472b;
  --by-koyu: #1f252b;
  --by-kursun: #6b7a87;
  --by-dilim: #4d5965;
  --by-vurgu: #bf830c;
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 36px);
  background:
    linear-gradient(rgba(31, 37, 43, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 37, 43, .07) 1px, transparent 1px),
    #f2efe8;
  background-size: 22px 22px, 22px 22px, auto;
  border: 1px solid rgba(31, 37, 43, .14);
}
.cizim-svg { width: 100%; height: auto; overflow: visible; }
.cizim-amblem path:not(.by-yay), .cizim-amblem circle {
  stroke: var(--murekkep);
  stroke-width: .55;
  stroke-linejoin: round;
}
.olcu path { fill: none; stroke: var(--murekkep-2); stroke-width: .5; }
.olcu .dolu { fill: var(--tugla); stroke: none; }
.olcu text { font: 600 5.2px var(--f-metin); fill: var(--murekkep-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.olcu-kot text { text-anchor: start; }
.bedesten-cizim figcaption { font-size: .88rem; color: var(--murekkep-2); }

/* çizim animasyonu: önce çizgiler, sonra dolgu, en son ölçüler */
.bedesten-cizim.canlan-bekle { opacity: 1; transform: none; }
.bedesten-cizim.canlan-bekle .cizim-amblem path:not(.by-yay),
.bedesten-cizim.canlan-bekle .cizim-amblem circle { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.bedesten-cizim.canlan-bekle .olcu { opacity: 0; }
.bedesten-cizim.canlan .cizim-amblem path:not(.by-yay),
.bedesten-cizim.canlan .cizim-amblem circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(.5, 0, .2, 1), fill-opacity 1s ease 1.7s;
}
.bedesten-cizim.canlan .olcu { opacity: 1; transition: opacity .8s ease 2.3s; }

.bedesten-metin { display: grid; gap: 22px; min-width: 0; }
.bedesten-metin > p:not(.kot) { max-width: 58ch; font-size: 1.1rem; color: var(--murekkep-2); }
.kunye {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(31, 37, 43, .2);
}
.kunye dt { font-size: .85rem; color: var(--murekkep-2); }
.kunye dd { font-weight: 650; font-size: 1.05rem; }

/* ------------------------------------------------------- ŞANTİYE PANOSU */
.pano-izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.pano-kutu {
  grid-column: span 2;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
  background: var(--kursun-800);
  border: 1px solid rgba(241, 236, 226, .07);
  border-radius: 6px;
}
.pano-kutu--kazasiz { grid-column: span 6; }
/* küçük sayaç kutuları: etiket üstte, rakam altta */
.pano-kutu:not([class*="pano-kutu--"]) { align-content: space-between; min-height: 150px; }
.pano-kutu:not([class*="pano-kutu--"]) .pano-etiket { order: -1; }
.pano-kutu--projeler { grid-column: span 7; grid-row: span 2; }
.pano-kutu--grafik { grid-column: span 5; }
.pano-kutu--portfoy { grid-column: span 5; }
.pano-kutu--gosterge { grid-column: 1 / -1; }

.pano-etiket { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .95rem; color: var(--kursun-300); }
.pano-not { font-size: .88rem; color: var(--kursun-300); }
.pano-baslik { font-size: 1.15rem; font-weight: 650; }
.pano-buyuk {
  font-weight: 700;
  font-stretch: 72%;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1.04;
}
.canli {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 9px 2px 8px;
  border-radius: 20px;
  background: rgba(76, 175, 106, .16);
  color: #8fd8a5;
  font-size: .78rem;
  font-weight: 650;
}
.canli::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf6a;
  animation: nabiz 1.6s ease-out infinite;
}
@keyframes nabiz {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 106, .7); }
  100% { box-shadow: 0 0 0 9px rgba(76, 175, 106, 0); }
}
.kazasiz { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.kazasiz-gun {
  font-weight: 700;
  font-stretch: 72%;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .95;
  color: var(--kirec);
}
.kazasiz-birim { font-weight: 650; font-size: 1.6rem; color: var(--ikaz); }
.kazasiz-saat {
  margin-left: auto;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kursun-300);
}

/* faz ilerlemesi */
.ilerleme-liste { display: grid; margin-top: 6px; }
.ilerleme { display: grid; gap: 12px; padding-block: 18px; border-top: 1px solid rgba(241, 236, 226, .09); }
.ilerleme-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ilerleme-ad { font-weight: 650; font-size: 1.05rem; }
.ilerleme-ad span { margin-left: 8px; font-weight: 500; font-size: .9rem; color: var(--kursun-300); }
.ilerleme-genel { font-weight: 700; font-stretch: 72%; font-size: 2rem; line-height: 1; }
.ilerleme-genel small { font-size: .55em; color: var(--ikaz); margin-left: 2px; }
.faz-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.faz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; }
.faz-ray {
  grid-column: 1 / -1;
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: rgba(232, 163, 23, .16);
  overflow: hidden;
}
.faz-dolum {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--y);
  border-radius: 2px;
  background: var(--ikaz);
  transition: width 1.4s var(--yavas) .3s;
}
.faz--tamam .faz-dolum { background: var(--ikaz-koyu); }
.faz-ad, .faz-yuzde { font-size: .8rem; color: var(--kursun-300); }
.faz-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faz-yuzde { font-variant-numeric: tabular-nums; color: var(--kirec); }
.ilerleme-teslim { font-size: .86rem; color: var(--kursun-300); }
.canlan-bekle .faz-dolum { width: 0; }

/* sütun grafik */
.grafik-kaydir { position: relative; overflow-x: auto; margin-top: 8px; }
.sutun-grafik { width: 100%; min-width: 480px; height: auto; overflow: visible; }
.izgara-cizgi { stroke: rgba(241, 236, 226, .08); stroke-width: 1; }
.taban-cizgi { stroke: rgba(241, 236, 226, .32); stroke-width: 1; }
.eksen-yazi { font: 500 15px var(--f-metin); fill: var(--kursun-300); font-variant-numeric: tabular-nums; }
.deger-yazi { font: 650 16px var(--f-metin); fill: var(--kirec); font-variant-numeric: tabular-nums; }
.sutun-hedef { fill: transparent; }
.sutun-cubuk {
  fill: var(--ikaz-koyu);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1.1s var(--yavas), fill .2s;
  transition-delay: calc(var(--i) * 60ms);
}
.sutun--kismi .sutun-cubuk { fill: url(#kismi-tarama); }
.tarama-zemin { fill: rgba(191, 131, 12, .35); }
.tarama-cizgi { fill: var(--ikaz-koyu); }
.sutun:hover .sutun-cubuk, .sutun:focus .sutun-cubuk { fill: var(--ikaz); }
.sutun--kismi:hover .sutun-cubuk, .sutun--kismi:focus .sutun-cubuk { fill: url(#kismi-tarama); opacity: .85; }
.sutun:focus { outline: none; }
.sutun:focus-visible .sutun-hedef { fill: rgba(232, 163, 23, .08); }
.canlan-bekle .sutun-cubuk { transform: scaleY(0); }

.ipucu-alan { position: relative; }
.ipucu {
  position: absolute;
  z-index: 4;
  padding: 7px 11px;
  background: var(--kirec);
  color: var(--murekkep);
  border-radius: 3px;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% calc(-100% - 10px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

.tablo-gorunum { margin-top: 6px; font-size: .9rem; }
.tablo-gorunum summary { cursor: pointer; color: var(--kursun-300); text-decoration: underline; text-underline-offset: 4px; width: fit-content; }
.tablo-gorunum table { margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tablo-gorunum th, .tablo-gorunum td { padding: 4px 18px 4px 0; text-align: left; border-bottom: 1px solid rgba(241, 236, 226, .08); }

/* portföy yığın çubuğu */
.yigin { display: flex; gap: 2px; height: 46px; margin-top: 12px; }
.yigin-dilim {
  flex: var(--y) 1 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  background: var(--renk);
  color: var(--yazi, #fff);
  font-size: .95rem;
  transform-origin: 0 50%;
  transition: transform .9s var(--yavas), filter .2s;
  transition-delay: calc(var(--i) * 120ms);
}
.yigin-dilim:first-child { border-radius: 4px 0 0 4px; }
.yigin-dilim:last-child { border-radius: 0 4px 4px 0; }
.yigin-dilim:hover { filter: brightness(1.12); }
.canlan-bekle .yigin-dilim { transform: scaleX(0); }
.lejant { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; font-size: .95rem; }
.lejant li { display: flex; align-items: center; gap: 8px; }
.lejant strong { font-variant-numeric: tabular-nums; }
.lejant-renk { width: 12px; height: 12px; border-radius: 3px; background: var(--renk); }

/* halka göstergeler */
.halka-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(22px, 4vw, 64px); margin-top: 10px; }
.halka { grid-template-columns: 120px minmax(0, 1fr); column-gap: 22px; align-items: start; }
.halka svg { grid-row: 1 / span 2; }
.halka-ad, .halka-aciklama { grid-column: 2; }
.halka-ad { margin-top: 22px !important; }
.halka { position: relative; display: grid; gap: 6px; align-content: start; }
.halka svg { width: min(120px, 100%); height: auto; transform: rotate(-90deg); }
.halka circle { fill: none; stroke-width: 8; }
.halka-iz { stroke: rgba(232, 163, 23, .16); }
.halka-dolum {
  stroke: var(--ikaz);
  stroke-linecap: round;
  stroke-dasharray: var(--y) 100;
  transition: stroke-dasharray 1.6s var(--yavas);
  transition-delay: calc(.2s + var(--i) * 150ms);
}
.canlan-bekle .halka-dolum { stroke-dasharray: 0 100; }
.halka-deger {
  position: absolute;
  top: 0;
  left: 0;
  width: min(120px, 100%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-stretch: 72%;
  font-size: 2rem;
  line-height: 1;
}
.halka-deger small { font-size: .5em; color: var(--ikaz); margin-left: 1px; }
.halka-ad { margin-top: 6px; font-weight: 650; }
.halka-aciklama { font-size: .86rem; color: var(--kursun-300); }

/* ----------------------------------------------------------- PROJELER */
.proje-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 22px; }
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; }
.suzgec-dugme {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(31, 37, 43, .35);
  border-radius: 21px;
  background: transparent;
  font-weight: 600;
  font-size: .95rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.suzgec-dugme:hover { border-color: var(--murekkep); }
.suzgec-dugme[aria-pressed="true"] { background: var(--murekkep); border-color: var(--murekkep); color: var(--kirec); }
.proje-oklar { display: flex; gap: 8px; }
.proje-ok { color: var(--murekkep); border-color: rgba(31, 37, 43, .35); background: transparent; }
.proje-ok:hover { background: var(--murekkep); color: var(--kirec); }
.proje-ok:disabled { opacity: .35; cursor: default; background: transparent; color: var(--murekkep); }

.proje-ray {
  --ray-kenar: max(var(--kenar-sol), calc((100% - var(--kap)) / 2));
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ray-kenar);
  padding: 4px var(--ray-kenar) 22px;
  scrollbar-width: none;
  cursor: grab;
}
.proje-ray::-webkit-scrollbar { display: none; }
.proje-ray.surukleniyor { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.proje-ray:focus-visible { outline-offset: -3px; }
.proje-kart {
  flex: 0 0 clamp(280px, 31vw, 430px);
  scroll-snap-align: start;
  display: grid;
  gap: 16px;
  align-content: start;
}
.proje-kart.beliren { animation: yukari-gir .6s var(--yavas) both; animation-delay: calc(var(--s, 0) * 60ms); }
.proje-gorsel { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: 3px; background: var(--beton-300); }
.proje-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--yavas);
}
.proje-kart:hover .proje-gorsel img { transform: scale(1.07); }
.proje-durum {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 2px;
  background: var(--kursun-900);
  color: var(--kirec);
  font-size: .82rem;
  font-weight: 650;
}
.proje-durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--celik); }
.proje-durum--devam { background: var(--ikaz); color: var(--murekkep); }
.proje-durum--devam::before { background: var(--murekkep); animation: nabiz-koyu 1.6s ease-out infinite; }
@keyframes nabiz-koyu {
  0% { box-shadow: 0 0 0 0 rgba(31, 37, 43, .55); }
  100% { box-shadow: 0 0 0 7px rgba(31, 37, 43, 0); }
}
.proje-govde { display: grid; gap: 4px; }
.proje-tur { font-size: .9rem; color: var(--murekkep-2); }
.proje-ad { font-family: var(--f-baslik); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.proje-yer { color: var(--murekkep-2); }
.proje-ozellik {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 37, 43, .2);
}
.proje-ozellik dt { font-size: .8rem; color: var(--murekkep-2); }
.proje-ozellik dd { font-weight: 650; font-variant-numeric: tabular-nums; }
.proje-konum { position: relative; height: 3px; margin-top: 10px; background: rgba(31, 37, 43, .14); }
.proje-konum-dolum {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bas, 0) * 100%);
  width: calc(var(--en, .3) * 100%);
  background: var(--murekkep);
  transition: left .15s linear;
}

/* ---------------------------------------------------------- HİZMETLER */
.hizmet-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(31, 37, 43, .3);
}
.hizmet {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(28px, 3vw, 42px) clamp(16px, 2.4vw, 34px) clamp(30px, 3.2vw, 46px) 0;
  border-bottom: 1px solid rgba(31, 37, 43, .3);
  transition: background-color .3s;
}
.hizmet:not(:nth-child(3n + 1)) { padding-left: clamp(16px, 2.4vw, 34px); border-left: 1px solid rgba(31, 37, 43, .3); }
.hizmet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--ikaz);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--yavas);
}
.hizmet:hover::after, .hizmet:focus-visible::after { transform: scaleX(1); }
.hizmet:focus { outline: none; }
.hizmet:focus-visible { background: rgba(255, 255, 255, .3); }
.hizmet-ikon { width: 52px; height: 52px; margin-bottom: 6px; }
.hizmet-ikon path, .hizmet-ikon circle {
  fill: none;
  stroke: var(--murekkep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hizmet:hover .hizmet-ikon path, .hizmet:hover .hizmet-ikon circle,
.hizmet:focus-visible .hizmet-ikon path { animation: ikon-ciz 1.1s var(--yavas) both; stroke: var(--tugla); }
@keyframes ikon-ciz { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.hizmet-ad { font-size: 1.35rem; font-weight: 650; font-stretch: 92%; }
.hizmet-metin { color: var(--murekkep-2); max-width: 40ch; }
.hizmet-teknik { font-size: .9rem; color: var(--murekkep-2); }
.hizmet-teknik span { font-weight: 650; color: var(--ikaz-metin); margin-right: 4px; }

/* ------------------------------------------------------------- SÜREÇ */
.surec-kiris {
  --dolum: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--adim), minmax(0, 1fr));
  gap: 0;
  padding-top: 64px;
}
/* çelik I-kiriş */
.surec-kiris::before, .surec-kiris::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  height: 14px;
  border-radius: 2px;
}
.surec-kiris::before {
  right: 0;
  background:
    linear-gradient(180deg, var(--beton-300) 0 3px, transparent 3px 11px, var(--beton-300) 11px 14px),
    linear-gradient(90deg, transparent calc(50% - 2px), var(--beton-300) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px));
}
.surec-kiris::after {
  width: calc(var(--dolum) * 100%);
  background:
    linear-gradient(180deg, var(--ikaz) 0 3px, rgba(232, 163, 23, .35) 3px 11px, var(--ikaz) 11px 14px);
  transition: width .2s linear;
}
.surec-adim { position: relative; display: grid; gap: 8px; align-content: start; padding-right: clamp(10px, 1.6vw, 24px); }
.surec-dugum {
  position: absolute;
  z-index: 2;
  top: -64px;
  left: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--beton-100);
  border: 2px solid var(--beton-300);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .4s, border-color .4s, transform .5s var(--yay);
}
.surec-adim.gecti .surec-dugum { background: var(--ikaz); border-color: var(--ikaz); transform: scale(1.08); }
.surec-ad { font-size: 1.15rem; font-weight: 650; font-stretch: 92%; }
.surec-metin { font-size: .95rem; color: var(--murekkep-2); }
.surec-sure { font-size: .88rem; font-weight: 650; color: var(--ikaz-metin); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- DAR EKRAN */
@media (max-width: 1100px) {
  .pano-kutu { grid-column: span 4; }
  .pano-kutu--kazasiz, .pano-kutu--projeler, .pano-kutu--grafik,
  .pano-kutu--portfoy, .pano-kutu--gosterge { grid-column: 1 / -1; }
  .surec-kiris { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 76px; }
  .surec-kiris::before, .surec-kiris::after { display: none; }
  .surec-dugum { top: -56px; }
}

@media (max-width: 900px) {
  .bolum-bas--yan { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .proje-arac { justify-content: flex-start; }
  .bedesten-izgara { grid-template-columns: minmax(0, 1fr); }
  .rakam-izgara, .hizmet-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rakam:not(:nth-child(3n + 1)), .hizmet:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .rakam:nth-child(even), .hizmet:nth-child(even) { padding-left: clamp(16px, 3vw, 28px); border-left: 1px solid; border-left-color: inherit; }
  .rakam:nth-child(even) { border-left-color: rgba(241, 236, 226, .18); }
  .hizmet:nth-child(even) { border-left-color: rgba(31, 37, 43, .3); }
  .hero-cekul { display: none; }
  .hero-aks span:nth-child(n + 3) { display: none; }
  .hero-aks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-ic { position: relative; padding-top: 150px; }
  .hero-metin { gap: 16px; }
  .hero-aciklama { font-size: 1rem; }
  .hero-sekmeler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .hero-kontrol { flex-direction: column; align-items: stretch; }
  .hero-oklar { justify-content: flex-end; }
  .hero-aks span::before { top: 120px; }
  .rakam-izgara, .hizmet-izgara, .kunye { grid-template-columns: minmax(0, 1fr); }
  .rakam:nth-child(even), .hizmet:nth-child(even) { padding-left: 0; border-left: 0; }
  .pano-kutu { grid-column: 1 / -1; }
  .faz-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halka-liste { grid-template-columns: minmax(0, 1fr); }
  .halka { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .halka svg, .halka-deger { width: 96px; }
  .halka svg { grid-row: 1 / span 2; }
  .halka-deger { font-size: 1.6rem; }
  .halka-ad, .halka-aciklama { grid-column: 2; }
  .halka-ad { margin-top: 14px !important; }
  .surec-kiris { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 64px; row-gap: 34px; }
  .surec-dugum { top: 0; left: -64px; }
  .kazasiz-saat { margin-left: 0; }
}