/* ==========================================================================
   Tebmak Mühendislik — site stylesheet
   Plain CSS, no build step. Palette is taken from the Tebmak logo:
   navy #11364A with the red mark #CD2F37.
   ========================================================================== */

/* --- Typeface -------------------------------------------------------------
 * Archivo, served from this host rather than Google Fonts: one less DNS and
 * TLS handshake, and no render-blocking third-party stylesheet. Variable
 * weight 400-800 in a single file per subset. Licensed under the SIL Open
 * Font License 1.1.
 */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* brand, from the logo */
  --navy-900: #0B2233;
  --navy-800: #0E2B3F;
  --navy-700: #11364A;   /* logo navy — the primary */
  --navy-600: #185269;
  --navy-400: #2F5E78;
  --mark:     #CD2F37;   /* logo red — the single accent */
  --mark-dk:  #A8232A;

  /* neutrals, cool steel grey */
  --paper:     #FFFFFF;
  --paper-alt: #F2F5F7;
  --paper-bar: #E9EEF1;
  --rule:      #D9E0E6;
  --rule-dark: #1E3C52;
  --ink:       #132231;
  --body:      #44515C;
  /* 5.15:1 on white and 4.71:1 on --paper-alt, so muted text clears AA on
     both band backgrounds. */
  --muted:     #626F7A;
  --on-dark:   #C9D5DE;
  --on-dark-2: #8EA3B2;

  /* layout */
  --container: 1180px;
  --gutter: 24px;
  --band-y: 104px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(11, 34, 51, .06);
  --shadow-md: 0 10px 30px rgba(11, 34, 51, .10);
  --shadow-lg: 0 18px 46px rgba(11, 34, 51, .16);

  --ease: cubic-bezier(.2, .7, .3, 1);

  --topbar-h: 40px;
  --head-h: 76px;
}

@media (max-width: 900px) {
  :root { --band-y: 68px; --head-h: 66px; }
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.68;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--navy-700); text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.022em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); font-weight: 800; letter-spacing: -.032em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); font-weight: 800; letter-spacing: -.028em; }
h3 { font-size: clamp(1.18rem, 1.08rem + .4vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--navy-700); color: #fff; }

:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The red ring is only 2.46:1 against navy, under the 3:1 minimum for a
   non-text indicator, so on dark surfaces the ring turns white. */
.topbar :focus-visible,
.hero :focus-visible,
.pagehead :focus-visible,
.cta :focus-visible,
.footer :focus-visible,
.sector:focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy-700); color: #fff; padding: 12px 18px;
  font-weight: 600; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); }
/* The tint alone is a ~3% step and reads as one undifferentiated column;
   the hairline is the same separator the tables and lists already use. */
.band--alt {
  background: var(--paper-alt);
  border-block: 1px solid var(--rule);
}
.band--tight { padding-block: calc(var(--band-y) * .62); }

.measure { max-width: 64ch; }

/* --- Topbar --------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: var(--on-dark);
  font-size: .8125rem;
  letter-spacing: .005em;
}
.topbar__in {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-block: 7px;
}
.topbar__group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: var(--on-dark); transition: color .25s var(--ease); }
.topbar a:hover { color: #fff; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 15px; height: 15px; flex: none; fill: var(--navy-400); }
.topbar__item a:hover svg { fill: #fff; }
.topbar__badge {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--on-dark-2);
}
.topbar__badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--mark); flex: none;
}

/* On a phone the bar keeps only what you would tap: where we are, and the
   number to call. The e-mail and the claims live on in the footer. */
@media (max-width: 760px) {
  .topbar__group--badges, .topbar__item--mail { display: none; }
  .topbar__in { justify-content: flex-start; gap: 16px; }
  .topbar__group { gap: 16px; }
}

/* --- Masthead ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Once pinned over content the bar lifts: the rule dissolves into a shadow.
   Height stays put — .masthead is sticky, not fixed, so shrinking it while
   pinned would jump the content below. */
.is-scrolled .masthead {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(11, 34, 51, .06), 0 10px 30px rgba(11, 34, 51, .10);
}
.masthead__in {
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
/* Sized by height so the lockup stays optically level with the nav as the
   bar changes height. The width/height attributes in the HTML carry the
   true ratio, so nothing shifts while it loads. */
.brand img { height: 42px; width: auto; display: block; }
@media (max-width: 980px) { .brand img { height: 36px; } }
@media (max-width: 420px) { .brand img { height: 33px; } }

.masthead__spacer { flex: 1 1 auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-block;
  padding: 10px 14px;
  font-size: .96rem;
  font-weight: 600;
  color: var(--navy-700);
  border-radius: var(--radius);
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.nav__link:hover { background: var(--paper-alt); }
.nav__link[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--mark);
  border-radius: 0;
}

/* --- Language switcher ----------------------------------------------------
   Two-letter codes rather than flags: a flag names a country, not a language,
   and Turkish is not spoken only in Turkey. */
.langs {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.langs__item {
  padding: 7px 11px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  background: var(--paper);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.langs__item + .langs__item { border-left: 1px solid var(--rule); }
.langs__item:hover { color: var(--navy-700); background: var(--paper-alt); }
.langs__item.is-current { color: #fff; background: var(--navy-700); }

@media (max-width: 980px) {
  .langs { margin: 16px 0 0; align-self: flex-start; }
  .langs__item { padding: 10px 16px; font-size: .9375rem; }
}

/* --- Draft-locale notice --------------------------------------------------
   Shown where the interface is translated but the company's own copy is not,
   so nobody has to work out why the page is half Turkish. */
.draftbar {
  background: #FFF4E5;
  border-bottom: 1px solid #F0DCBE;
  color: #6B4A12;
  font-size: .875rem;
  line-height: 1.6;
}
.draftbar .wrap { padding-block: 12px; }
.draftbar strong { color: #4A330B; }
.draftbar strong::after { content: " — "; font-weight: 400; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--navy-700); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; margin: auto; fill: currentColor; }
.nav-toggle .nav-toggle__x { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__x { display: block; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: none; }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .masthead__spacer { display: none; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    padding: 8px var(--gutter) 20px;
  }
  .nav[hidden] { display: none; }
  .nav__link {
    padding: 14px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav__link:last-of-type { border-bottom: 0; }
  .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mark); padding-left: 14px; }
  .nav .btn { margin-top: 14px; justify-content: center; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

.btn--primary { background: var(--navy-700); color: #fff; }
.btn--primary:hover { background: var(--navy-900); }

.btn--mark { background: var(--mark); color: #fff; }
.btn--mark:hover { background: var(--mark-dk); }

.btn--line {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--rule);
}
.btn--line:hover { background: var(--paper-alt); border-color: var(--navy-400); }

.btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--block { width: 100%; justify-content: center; }

/* Only the trailing arrow moves; leading phone/WhatsApp icons stay put. */
.btn__arrow { transition: transform .22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Hero ----------------------------------------------------------------- */
/* Hero, ilk ekranın tamamını kaplar: ekran yüksekliğinden üst bar ve
   başlık çubuğunun yüksekliği düşülür. 100svh kullanılıyor — mobil
   tarayıcıda adres çubuğu gizlenip göründükçe 100vh zıplatır, svh zıplatmaz.
   --chrome-h gerçek ölçülere göre ayarlıdır; site.js yükleme sonrası tek bir
   düzeltme yapar, ama JS olmadan da doğru çalışır. */
:root { --chrome-h: 117px; }
@media (max-width: 860px) { :root { --chrome-h: 107px; } }

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
  min-height: calc(100vh - var(--chrome-h));
  min-height: calc(100svh - var(--chrome-h));
  display: flex;
}

/* The photo lives on its own layer so it can be transformed. It settles from
   a slight scale once the page is ready — the one staged moment on the site.
   Without JS the class never lands and the photo simply sits at 1.06, still
   full-bleed. */
/* <picture> kendisi inline bir öğe; konumlandırmayı o yapar, içindeki <img>
   alanı doldurur. Fotoğraf hazır olduğunda hafifçe yerine oturur — sitedeki
   tek sahnelenmiş hareket. JS çalışmazsa sınıf hiç gelmez ve fotoğraf 1.04'te
   durur, yine tam kanar. */
.hero__photo {
  position: absolute; inset: 0; z-index: -2;
  display: block;
  overflow: hidden;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.hero.is-ready .hero__photo img { transform: none; }

/* Karartma yalnızca metnin olduğu yerde. Eskiden fotoğrafın tamamı
   koyulaştırılıyordu ve görsel okunmuyordu; şimdi soldan lacivert bir
   degrade geliyor, sağ taraf açıkta kalıyor. Alttaki ince degrade sayaç
   şeridine zemin veriyor. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(95deg, rgba(11, 34, 51, .95) 0%, rgba(11, 34, 51, .88) 26%,
                           rgba(11, 34, 51, .46) 54%, rgba(11, 34, 51, .06) 76%,
                           rgba(11, 34, 51, 0) 100%),
    linear-gradient(to top, rgba(8, 24, 36, .90) 0%, rgba(8, 24, 36, .74) 14%,
                            rgba(8, 24, 36, 0) 40%);
}
/* Dar ekranda metin tüm genişliği kullanıyor: degrade de öyle yapmalı. */
@media (max-width: 860px) {
  .hero::after {
    background:
      linear-gradient(100deg, rgba(11, 34, 51, .94) 0%, rgba(11, 34, 51, .86) 55%,
                              rgba(11, 34, 51, .62) 100%),
      linear-gradient(to top, rgba(8, 24, 36, .90) 0%, rgba(8, 24, 36, .74) 14%,
                              rgba(8, 24, 36, 0) 42%);
  }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
}
.hero.is-ready .hero__body > *,
.hero.is-ready .hero__rail {
  animation: heroRise .62s var(--ease) backwards;
}
.hero.is-ready .hero__lead    { animation-delay: .08s; }
.hero.is-ready .hero__actions { animation-delay: .16s; }
.hero.is-ready .hero__rail    { animation-delay: .24s; }

/* Dikeyde denge: metin ortada yüzer, sayaç şeridi dibe yaslanır, ok en altta
   kalır. Üçü de ilk ekranda görünür. */
.hero__in {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: clamp(40px, 7vh, 96px) clamp(10px, 1.6vh, 18px);
}
.hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero__lead {
  margin: 22px 0 0;
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--on-dark);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Aşağı kaydır oku. Tıklayınca bir sonraki bölüme gider; yumuşak kaydırma
   html üzerindeki scroll-behavior ile, hareket tercihi kapalıysa anında. */
.hero__down {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  color: #fff;
  flex: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.hero__down svg { width: 20px; height: 20px; fill: currentColor; }
.hero__down:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hero__down svg { animation: heroNudge 2.4s var(--ease) infinite; }
}
@keyframes heroNudge {
  0%, 72%, 100% { transform: translateY(0); }
  84%           { transform: translateY(4px); }
}

/* Sayaç etiketi fotoğrafın üzerinde duruyor; sayfanın geri kalanındaki
   sönük griyle AA kontrastı tutmuyordu. Hero'da bir ton açığı kullanılıyor. */
.hero__rail .stat__label { color: var(--on-dark); }

/* stat rail sits on the hero's own bottom rule */
.hero__rail {
  margin-top: clamp(28px, 4vh, 72px);
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero__rail > * { padding: 26px 24px 30px 0; }
.hero__rail > * + * {
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 24px;
}
.stat__value {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 9px;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--on-dark-2);
}
@media (max-width: 760px) {
  .hero h1 { max-width: none; }
  .hero__rail { grid-template-columns: repeat(2, 1fr); }
  .hero__rail > * { padding: 20px 16px 22px 0; }
  .hero__rail > :nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__rail > :nth-child(even) { border-left: 1px solid rgba(255,255,255,.18); padding-left: 20px; }
  .hero__rail > :nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .18); }
  .hero__actions .btn { flex: 1 1 200px; justify-content: center; }
  /* Sabit duran WhatsApp/telefon düğmeleri ekranın sağ altında; hero tam
     ekran olduğu için son sayacın etiketi onların altında kalıyordu. */
  .hero__rail > :last-child { padding-right: 62px; }
}

/* Kısa ekranlar (dizüstü 768p, yatay telefon). Hero yine tam ekran kalır ama
   içerik taşmaz: boşluklar ve yazı ölçüleri kısılır, sayaçlar 2x2 dizilir. */
@media (max-height: 767px) {
  .hero__in { padding-block: clamp(20px, 3.5vh, 44px) 8px; }
  .hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }
  .hero__lead { margin-top: 14px; font-size: 1rem; }
  .hero__actions { margin-top: 20px; }
  .hero__rail { margin-top: 20px; grid-template-columns: repeat(2, 1fr); }
  .hero__rail > * { padding: 12px 16px 14px 0; }
  .hero__rail > :nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__rail > :nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .18);
    padding-left: 20px;
  }
  .hero__rail > :nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .18); }
  .stat__value { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
  .hero__down { width: 34px; height: 34px; margin-top: 8px; }
  .hero__rail > :last-child { padding-right: 62px; }
}
/* Çok kısa ekranda ok yer kaplamasın; kaydırma zaten elle yapılabiliyor. */
@media (max-height: 600px) {
  .hero__down { display: none; }
}

/* --- Page head (inner pages) ---------------------------------------------- */
.pagehead {
  position: relative;
  isolation: isolate;
  background: var(--navy-800) 50% 45% / cover no-repeat;
  color: #fff;
  padding-block: clamp(62px, 8vw, 104px);
}
.pagehead::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, rgba(8, 24, 36, .95) 0%, rgba(17, 54, 74, .72) 100%);
}
.pagehead h1 { color: #fff; }
.pagehead__lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--on-dark);
}
.crumbs {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--on-dark-2);
}
.crumbs a { color: var(--on-dark-2); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--navy-400); }
.crumbs [aria-current="page"] { color: var(--on-dark); }

/* --- Section head --------------------------------------------------------- */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px 56px;
  align-items: end;
  margin-bottom: 46px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.shead__lead { margin: 0; max-width: 58ch; }
.band--alt .shead { border-bottom-color: #DCE4E9; }
@media (max-width: 860px) {
  .shead { grid-template-columns: 1fr; align-items: start; margin-bottom: 34px; }
}

/* --- Grade index (the catalogue table) ------------------------------------ */
.grades { border-top: 1px solid var(--rule); }
.band--alt .grades { border-top-color: #DCE4E9; }

.grades__family {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 26px 0 10px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}
.grades__family::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.grades__count { font-weight: 500; color: var(--muted); font-size: .8125rem; }

.grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 15rem) 8.5rem minmax(0, 12rem) minmax(0, 1fr) 1.5rem;
  gap: 12px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--body);
  transition: background-color .2s var(--ease);
}
/* The hover marker is drawn, not padded: animating padding-left reflowed the
   row every frame and could re-wrap the summary column mid-hover. */
.grade::before {
  content: "";
  position: absolute;
  left: -14px; top: 0; bottom: 0;
  width: 3px;
  background: var(--mark);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .22s var(--ease);
}
.band--alt .grade { border-bottom-color: #DCE4E9; }
.grade:hover, .grade:focus-visible { background: var(--paper); }
.grade:hover::before, .grade:focus-visible::before { transform: none; }
.band--alt .grade:hover { background: #fff; }

.grade__go svg { transition: transform .22s var(--ease); }
.grade:hover .grade__go svg { transform: translateX(4px); }

.grade__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}
.grade__spec {
  font-weight: 700;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.grade__range {
  font-size: .9375rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.grade__sum { font-size: .9375rem; color: var(--body); }
.grade__go { justify-self: end; color: var(--navy-400); }
.grade__go svg { width: 18px; height: 18px; fill: currentColor; }
.grade:hover .grade__go { color: var(--mark); }

@media (max-width: 1040px) {
  .grade { grid-template-columns: minmax(0, 13rem) 8rem minmax(0, 1fr) 1.5rem; }
  .grade__sum { display: none; }
}
@media (max-width: 680px) {
  .grade {
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 16px 0;
  }
  .grade__name { grid-column: 1; }
  .grade__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .grade__spec { grid-column: 1; }
  .grade__range { grid-column: 1; }
}

/* --- Featured product cards (home) ----------------------------------------
 * Four grades, photographed. The long grade table lives on the products page;
 * here the job is to show what the steel looks like and let someone pick one.
 * Four columns on a desktop, two on a tablet, one on a phone.
 */
.pcards {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1040px) { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pcards { grid-template-columns: 1fr; } }

.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:hover { border-color: var(--navy-400); box-shadow: 0 10px 28px rgba(17, 54, 74, .1); }
.pcard:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

.pcard__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-bar);
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img { transform: scale(1.06); }

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 22px;
  flex: 1;
}
.pcard__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
/* The hardness figure is what a buyer scans for, so it carries the one
   accent colour on the card. */
.pcard__spec {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
}
.pcard__range {
  font-size: .8125rem;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.pcard__sum {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--body);
  flex: 1;
}
.pcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy-700);
}
.pcard__go svg { width: 16px; height: 16px; fill: currentColor; transition: transform .25s var(--ease); }
.pcard:hover .pcard__go svg { transform: translateX(4px); }

.pcards__more { margin-top: 34px; }

/* --- Sector cards --------------------------------------------------------- */
.cards {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) {
  .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; }
}

.sector {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 310px;
  padding: 120px 24px 26px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-800);
  color: #fff;
}
/* A real <img> rather than a background: it can be lazy-loaded, it carries
   intrinsic dimensions, and it can take the one hover move these tiles earn. */
.sector > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.sector:hover > img, .sector:focus-visible > img { transform: scale(1.05); }
.sector::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 24, 36, .95) 8%,
                                      rgba(11, 34, 51, .62) 52%,
                                      rgba(11, 34, 51, .22) 100%);
  transition: opacity .3s var(--ease);
}
.sector:hover::after { opacity: .86; }
.sector h3 { color: #fff; }
.sector p {
  margin: 10px 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--on-dark);
}

/* --- Point list (quiet, icon-left) ---------------------------------------- */
.points { display: grid; gap: 30px 48px; grid-template-columns: repeat(2, 1fr); }
.points--4 { grid-template-columns: repeat(4, 1fr); gap: 34px 32px; }
@media (max-width: 980px) { .points--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .points, .points--4 { grid-template-columns: 1fr; } }

/* inside a half-width split column there is only room for one column */
.split__text .points { grid-template-columns: 1fr; gap: 24px; }

.point { display: flex; gap: 16px; align-items: flex-start; }
.point__icon { flex: none; color: var(--navy-700); padding-top: 2px; }
.point__icon svg { width: 26px; height: 26px; fill: currentColor; }
.point h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.point p { font-size: .9375rem; line-height: 1.6; margin: 0; }

/* --- Split (image + text) ------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.split--text-first > .split__text { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split__media { order: -1; }
}
.split__media img {
  width: 100%;
  /* The source photos run from 1.9:1 to 2.3:1, which made the seven sector
     rows visibly different heights. One ratio settles the rhythm. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Opt-out for a portrait source that 3:2 would crop to a slice. */
.split__media--tall img { aspect-ratio: auto; }
.split__text h2 { margin-bottom: 20px; }
.split__text .measure { max-width: 58ch; }

/* --- Facts list ----------------------------------------------------------- */
.facts { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.facts li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 6px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
}
.facts dt, .facts .facts__k { color: var(--muted); }
.facts .facts__v { color: var(--ink); font-weight: 600; }
@media (max-width: 540px) { .facts li { grid-template-columns: 1fr; } }

/* --- Prose (product detail copy) ------------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: 1.3rem;
  margin: 44px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose ul { margin: 0 0 1.05em; padding: 0; list-style: none; }
.prose li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 2px;
  background: var(--mark);
}

/* --- Spec strip ----------------------------------------------------------- */
.specstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.specstrip > div {
  flex: 1 1 180px;
  background: var(--paper);
  padding: 20px 22px;
}
.specstrip dt { font-size: .8125rem; color: var(--muted); margin-bottom: 5px; }
.specstrip dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.specstrip dd.is-mark { color: var(--mark); }

/* --- CTA band ------------------------------------------------------------- */
.cta {
  background: var(--navy-700);
  color: #fff;
  padding-block: clamp(56px, 6vw, 82px);
}
.cta__in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
}
@media (max-width: 900px) { .cta__in { grid-template-columns: 1fr; } }
.cta h2 { color: #fff; max-width: 18ch; }
.cta h2::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--mark);
  margin-top: 22px;
}
.cta p { margin: 20px 0 0; color: var(--on-dark); max-width: 50ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__actions .btn--primary { background: #fff; color: var(--navy-700); }
.cta__actions .btn--primary:hover { background: var(--paper-alt); }

/* --- Contact -------------------------------------------------------------- */
.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 940px) { .contactgrid { grid-template-columns: 1fr; gap: 44px; } }

.cinfo { margin: 0; padding: 0; list-style: none; }
.cinfo > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.cinfo > li:first-child { border-top: 1px solid var(--rule); }
.cinfo svg { width: 19px; height: 19px; fill: var(--navy-700); margin-top: 4px; }
.cinfo__k { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: 3px; }
.cinfo__v { display: block; color: var(--ink); font-weight: 600; }
.cinfo__v a { color: var(--ink); }
.cinfo__v a:hover { color: var(--mark); }
.cinfo__v + .cinfo__v { margin-top: 2px; }

.formcard {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 520px) { .formcard { padding: 22px; } }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(17, 54, 74, .14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--mark);
}
.field__error {
  display: none;
  margin-top: 6px;
  font-size: .8125rem;
  color: var(--mark-dk);
  font-weight: 600;
}
.field__error.is-shown { display: block; }

/* Sidebar list on the product pages. It used to borrow .footer__links, whose
   link colour is meant for a navy footer and fell to ~1.5:1 on white. */
.sidelist { margin: 0; padding: 0; list-style: none; }
.sidelist li + li { margin-top: 11px; }
.sidelist a { color: var(--navy-700); font-weight: 600; }
.sidelist a:hover { color: var(--mark); }

/* The product aside is short next to a long column of prose, so it follows
   the reader instead of leaving a void. */
.prodside { position: sticky; top: calc(var(--head-h) + 24px); }
@media (max-width: 900px) { .prodside { position: static; } }

.prodside__photo { margin: 0 0 24px; }
.prodside__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.formnote { margin-top: 16px; font-size: .8125rem; color: var(--muted); }
.formstatus {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  display: none;
}
.formstatus.is-ok { display: block; background: #E7F1EC; color: #1C5B41; }
.formstatus.is-err { display: block; background: #FBEAEA; color: var(--mark-dk); }

/* The map loads on request rather than on page load: it keeps Google's
   script off the critical path, and the panel below always renders even
   where the embed is blocked. */
.map {
  border-top: 1px solid var(--rule);
  background: var(--paper-alt);
}
/* Harita solda, adres ve iki bağlantı sağda. Bağlantılar haritanın kendisinden
   bağımsız: gömülü harita yüklenmeden de, yüklendikten sonra da yerinde
   duruyorlar ve engellendiğinde bile ziyaretçi adrese ulaşabiliyor. */
.map__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  align-items: stretch;
  padding-block: 0;
}
.map__canvas { background: var(--paper-bar); }
.map__facade {
  height: 100%;
  min-height: 300px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.map__facade svg { width: 34px; height: 34px; fill: var(--navy-400); }
.map__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 40px 0 40px 40px;
}
@media (max-width: 860px) {
  .map__in { grid-template-columns: 1fr; }
  .map__side { padding: 32px 0 40px; }
  .map__facade { min-height: 220px; }
}
.map__address {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
}
.map__address svg { width: 22px; height: 22px; flex: none; fill: var(--navy-700); margin-top: 3px; }
.map__actions { display: grid; gap: 12px; }

.map iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
}
@media (max-width: 860px) { .map iframe { height: 360px; } }
@media (max-width: 640px) {
  .map iframe { height: 300px; }
  .map__facade { padding: 34px var(--gutter); }
}

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: var(--navy-900);
  color: var(--on-dark);
  font-size: .9375rem;
}
.footer__in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: 44px;
  padding-block: 64px 52px;
}
@media (max-width: 1040px) { .footer__in { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 560px) { .footer__in { grid-template-columns: 1fr; gap: 34px; padding-block: 48px 36px; } }

.footer h2 {
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .005em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-dark);
}
/* The footer uses the white lockup, so it needs no plate behind it. */
.footer__brand img { height: 48px; width: auto; margin-bottom: 22px; }
.footer__brand p { max-width: 38ch; color: var(--on-dark-2); line-height: 1.6; }
.footer__brand a { color: #fff; font-weight: 600; }
.footer__brand a:hover { color: var(--mark); }

.footer ul { margin: 0; padding: 0; list-style: none; }
.footer__links li + li { margin-top: 11px; }
.footer__links a {
  color: var(--on-dark);
  display: inline-block;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer__links a:hover { color: #fff; transform: translateX(3px); }
.footer__plain li { color: var(--on-dark-2); }
.footer__plain li + li { margin-top: 11px; }

.footer__contact li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 12px;
  line-height: 1.55;
}
.footer__contact li + li { margin-top: 15px; }
.footer__contact svg { width: 17px; height: 17px; fill: var(--navy-400); margin-top: 4px; }
.footer__contact a { color: var(--on-dark); }
.footer__contact a:hover { color: #fff; }
.footer__contact strong { color: #fff; font-weight: 600; }

.footer__bar {
  border-top: 1px solid var(--rule-dark);
  font-size: .8125rem;
  color: var(--on-dark-2);
}
.footer__bar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding-block: 18px;
}

/* --- Floating quick contact ----------------------------------------------- */
.quick {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick a, .quick button {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.quick a:hover, .quick button:hover { transform: translateY(-3px); }
.quick svg { width: 24px; height: 24px; fill: #fff; }
.quick__wa { background: #25D366; }
.quick__wa:hover { background: #1DA851; }
.quick__tel { background: var(--navy-700); }
.quick__tel:hover { background: var(--navy-900); }
.quick__top {
  background: var(--paper);
  border: 1px solid var(--rule) !important;
  opacity: 0;
  pointer-events: none;
  /* visibility, not just opacity: an invisible button must also leave the
     tab order, or keyboard users hit it on every page. */
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease),
              transform .22s var(--ease), background-color .22s var(--ease);
}
.quick__top svg { fill: var(--navy-700); width: 20px; height: 20px; }
.quick__top.is-shown { opacity: 1; pointer-events: auto; visibility: visible; }

@media (max-width: 520px) {
  .quick { right: 12px; bottom: 12px; gap: 8px; }
  .quick a, .quick button { width: 46px; height: 46px; }
}

/* --- Reveal (one subtle entrance, respects reduced motion) ---------------- */
/* Guarded on .js: without it, a stylesheet that loads while site.js does not
   would leave every revealed element permanently invisible. */
.js .reveal { opacity: 0; transform: translateY(10px); }
.reveal { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .hero__photo img { transform: none; transition: none; }
  .hero.is-ready .hero__body > *,
  .hero.is-ready .hero__rail { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .topbar, .masthead, .quick, .cta, .map { display: none; }
  body { color: #000; font-size: 11pt; }
  .band { padding-block: 18pt; }
}