/* Tulpar Fab2 — tasarım dili: "ölçü". Teknik resim dünyası: lacivert mürekkep, mavi tek vurgu, milimetrik ızgara zemini,
   ölçü çizgileri. Yazı tipleri weerg.com ile aynı ve sitenin kendi dosyalarından yüklenir (dış sunucu yok):
   başlık Abel (Matthew Desmond, SIL OFL 1.1; Abel'da olmayan İ, Ğ, ğ, Ş, ş eklenmiş sürüm "Tulpar Baslik" adıyla),
   gövde, etiket ve değerler Roboto (Apache 2.0). */
@font-face {
  font-family: "Tulpar Baslik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fontlar/tulpar-baslik.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fontlar/roboto-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fontlar/roboto-latin-400-normal.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;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fontlar/roboto-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fontlar/roboto-latin-500-normal.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;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fontlar/roboto-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fontlar/roboto-latin-700-normal.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;
}

:root {
  /* Kâğıt ve zemin: kartlar, paneller beyaz "sayfa"; sayfa zemini mavi tonlu kanvas (saf beyaz yok) */
  --zemin: #FFFFFF;
  --kanvas: #F5F7F9;
  --kart-zemin: #F3F5F8;
  --ust-zemin: #EEF2F7;
  /* Mürekkep: nötr siyah yerine lacivert mürekkep; koyu bölümler aynı aileden daha derin lacivert */
  --murekkep: #121A26;
  --murekkep-hover: #26303D;
  --lacivert: #0C1521;
  --lacivert-acik: #13213A;
  --ikincil: #46525F;
  --soluk: #5F6B78;
  --cizgi: #D7DFE8;
  --cizgi-guclu: #B7C3D0;
  /* Marka mavisi tek vurgu: Teklif Al, bağlantılar, odak ve bölüm başlığındaki tek vurgu. Başka yerde mavi yok. */
  --vurgu: #1E6FD0;
  --vurgu-hover: #1860C2;
  --vurgu-acik: #8CC2FF;
  --vurgu-soluk: rgba(30, 111, 208, 0.10);
  --mavi: #1E6FD0;
  --beyaz: #FFFFFF;
  --giris-yazi: #C7D1DC;
  --giris-katman: rgba(255, 255, 255, 0.035);
  --giris-parilti: rgba(30, 111, 208, 0.34);
  --giris-hover: rgba(255, 255, 255, 0.10);
  --footer-yazi: #AEB9C6;
  --golge: rgba(12, 21, 33, 0.06);
  --golge-ince: rgba(12, 21, 33, 0.08);
  --golge-guclu: rgba(12, 21, 33, 0.13);
  --mavi-koyu: #124C94;
  --izgara: rgba(30, 111, 208, 0.10);
  --giris-ayrac: rgba(255, 255, 255, 0.16);
  --perde: rgba(12, 21, 33, 0.55);
  --hata: #B42318;
  --foto-perde-koyu: rgba(12, 21, 33, 0.94);
  --foto-perde-orta: rgba(12, 21, 33, 0.78);
  --foto-perde-acik: rgba(12, 21, 33, 0.34);

  --yazi-baslik: "Tulpar Baslik", "Abel", "Arial Narrow", system-ui, sans-serif;
  --yazi-govde: "Roboto", "Segoe UI", system-ui, sans-serif;
  --yazi-mono: "Roboto", "Segoe UI", system-ui, sans-serif;

  --icerik-genislik: 1240px;
  --kenar: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 3px;
  border-radius: 4px;
}

.sayfa {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sayfa > main { flex: 1 1 auto; }

.kapsayici {
  width: 100%;
  max-width: var(--icerik-genislik);
  margin-inline: auto;
  padding-left: max(var(--kenar), env(safe-area-inset-left, 0px));
  padding-right: max(var(--kenar), env(safe-area-inset-right, 0px));
}

/* Koyu zeminli bölümler: mavi vurgular ve odak çerçevesi açık tonda */
.giris,
.mat-giris,
.md-giris,
.mat-cta,
.md-ara-cagri,
.alt,
.alt-tanitim,
.teklif-sol { --mavi: var(--vurgu-acik); }

/* Butonlar */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 20px;
  border-radius: 4px;
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.dugme-koyu { background: var(--murekkep); color: var(--beyaz); }
.dugme-koyu:hover { background: var(--murekkep-hover); }

.dugme-vurgu { background: var(--vurgu); color: var(--beyaz); }
.dugme-vurgu:hover { background: var(--vurgu-hover); }

.dugme-beyaz-cizgi {
  border: 1px solid var(--beyaz);
  background: transparent;
  color: var(--beyaz);
}
.dugme-beyaz-cizgi:hover { background: var(--giris-hover); }

.giris-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Duyuru bandı */
.duyuru {
  background: linear-gradient(90deg, var(--mavi-koyu), var(--vurgu));
  color: var(--beyaz);
}

.duyuru .kapsayici {
  padding-block: 6px;
  text-align: center;
}

.duyuru p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  font-size: 15px;
  font-weight: 500;
}

.duyuru-ikon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.duyuru .telefon {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: none;
}

.duyuru .telefon:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.duyuru .dar { display: none; }

@media (max-width: 640px) {
  .duyuru .genis { display: none; }
  .duyuru .dar { display: inline; }
}

/* Menü bandı: sayfa kaydıkça üstte sabit durur, Teklif Al hep elin altında */
.ust {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ust-zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
}

/* Sabit başlık, sayfa içi bağlantılarda (#mjf gibi) hedefi örtmesin */
html { scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); }

.ust-teklif {
  min-height: 40px;
  padding-inline: 18px;
  font-size: 13px;
}

.ust-ic {
  min-height: 80px;
  padding-block: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.logo-baglanti {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* İstif logo (at solda, TULPAR üstte, FAB altta): en-boy oranı 3,85 */
.logo-baglanti img {
  display: block;
  height: 40px;
  width: auto;
}

.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

.menu > a,
.menu-ust {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-family: var(--yazi-govde);
  font-size: 15px;
  color: var(--murekkep);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 0.15s ease;
}

.menu > a:hover,
.menu-ust:hover { box-shadow: inset 0 -2px 0 var(--cizgi); }

.menu > a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--vurgu);
}

/* Açılır menü (Çözümler): masaüstünde içerik genişliğinde geniş panel.
   Solda koyu tanıtım alanı (başlık, kısa metin, baskı parçası), sağda başlıklı link sütunları;
   son sütun ince bir çizgiyle ayrılır. */
.acilir { position: relative; }

.menu-ust {
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-ust svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.acilir.acik .menu-ust { box-shadow: inset 0 -2px 0 var(--vurgu); }
.acilir.acik .menu-ust svg { transform: rotate(180deg); }

.alt-panel { display: none; }
.acilir.acik .alt-panel { display: block; }

.alt-tanitim { display: none; }

.alt-baslik {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--soluk);
}

.alt-kategori { min-width: 0; }

.alt-kategori ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.alt-kategori a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--murekkep);
  text-decoration: none;
  transition: color 0.15s ease;
}

.alt-kategori a:hover {
  color: var(--mavi-koyu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.alt-rozet {
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--ust-zemin);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mavi-koyu);
}

.alt-tumu {
  margin-top: 10px;
  font-weight: 600;
}

.alt-tumu svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.alt-tumu:hover svg { transform: translateX(3px); }

@media (min-width: 960px) {
  /* Panel, menü bandının altına içerik genişliğinde yerleşir */
  .acilir { position: static; }
  .alt-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    padding-left: max(var(--kenar), env(safe-area-inset-left, 0px));
    padding-right: max(var(--kenar), env(safe-area-inset-right, 0px));
  }
  /* Düğmeden panele inerken aradaki boşlukta menü kapanmasın */
  .acilir.acik .menu-ust { position: relative; }
  .acilir.acik .menu-ust::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 28px;
  }
  .alt-ic {
    max-width: calc(var(--icerik-genislik) - 2 * var(--kenar));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 1fr);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    background: var(--zemin);
    box-shadow: 0 1px 2px var(--golge-ince), 0 22px 48px rgba(17, 19, 21, 0.18);
  }
  .alt-tanitim {
    position: relative;
    min-height: 380px;
    padding: 36px 32px 0;
    overflow: hidden;
    background-color: var(--murekkep-hover);
    background-image: radial-gradient(ellipse 85% 55% at 50% 88%, var(--giris-parilti), transparent 72%);
    color: var(--beyaz);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .alt-tanitim-baslik {
    margin: 0;
    font-family: var(--yazi-baslik);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.05;
    text-transform: uppercase;
  }
  .alt-tanitim-metin {
    margin: 0;
    max-width: 22ch;
    font-size: 15px;
    line-height: 1.45;
    color: var(--giris-yazi);
  }
  .alt-tanitim img {
    position: absolute;
    left: 50%;
    bottom: -28px;
    width: min(78%, 250px);
    height: auto;
    transform: translateX(-50%);
  }
  .alt-kategori { padding: 40px 28px 36px; }
  .alt-baslik { margin-bottom: 14px; }
  .alt-kategori a { min-height: 34px; }
  .alt-yan { border-left: 1px solid var(--cizgi); }
}

.ust-sag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--murekkep);
  cursor: pointer;
}

.menu-dugme svg { width: 24px; height: 24px; }

@media (max-width: 959px) {
  .menu-dugme { display: inline-flex; }
  .ust-sag { margin-left: auto; }
  .menu {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-inline: 0;
    padding-top: 8px;
    border-top: 1px solid var(--cizgi);
  }
  /* Açık menü sabit başlığın içinde kendi içinde kayar */
  .ust.acik .menu {
    display: flex;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu-ust {
    width: 100%;
    justify-content: space-between;
  }
  .alt-ic {
    display: grid;
    gap: 18px;
    padding: 10px 0 18px 12px;
  }
  .alt-rozet { background: var(--zemin); }
}

@media (max-width: 560px) {
  .logo-baglanti img { height: 34px; }
  .ust-ic { min-height: 64px; padding-block: 10px; gap: 10px 16px; }
  .ust-teklif { min-height: 36px; padding-inline: 12px; font-size: 12px; letter-spacing: 0.06em; }
}

/* Çok dar telefonlarda logo, düğme ve menü tek satırda kalsın */
@media (max-width: 379px) {
  .logo-baglanti img { height: 30px; }
  .ust-ic { gap: 8px; }
  .ust-sag { gap: 2px; }
  .ust-teklif { padding-inline: 10px; font-size: 11px; letter-spacing: 0.04em; }
  .menu-dugme { width: 40px; }
}

/* Giriş alanı */
/* Arka planda tesis fotoğrafı; yazı tarafı koyu perdeyle okunur kalır */
.giris {
  position: relative;
  overflow: hidden;
  background-color: var(--murekkep);
  background-image:
    linear-gradient(90deg, var(--foto-perde-koyu) 0%, var(--foto-perde-orta) 48%, var(--foto-perde-acik) 100%),
    url("../assets/fabrika.jpg");
  background-size: cover;
  background-position: center 80%;
  background-repeat: no-repeat;
  color: var(--beyaz);
}

@media (max-width: 640px) {
  .giris {
    background-image:
      linear-gradient(180deg, var(--foto-perde-koyu) 0%, var(--foto-perde-orta) 70%, var(--foto-perde-acik) 100%),
      url("../assets/fabrika.jpg");
    background-position: center 70%;
  }
}

.giris-ic {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 9vw, 112px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.giris h1 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(40px, 5.4vw, 74px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* H1 altındaki tek cümlelik vaat */
.giris-vaat {
  margin: -8px 0 0;
  max-width: 46ch;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  color: var(--beyaz);
  text-wrap: pretty;
}

.artilar {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60ch;
  display: grid;
  gap: 8px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--giris-yazi);
}

.artilar li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.artilar svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  color: var(--vurgu-acik);
}

.artilar span { min-width: 0; }

.artilar strong {
  font-weight: 600;
  color: var(--beyaz);
}

/* Referans şeridi */
.ref-ic {
  padding-block: clamp(26px, 3.5vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 24px 48px;
}

.ref-giris h2 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Ortalı şerit. Geniş ekranda tek sıra; sığmadığında (tablet, telefon) satıra kırılır,
   böylece bütün logolar her ekranda görünür. */
.ref-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px clamp(18px, 2.2vw, 28px);
}

.ref-logo {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Her logonun yüksekliği (--h) en-boy oranına göre index.html'de verilir:
   uzun logolar alçak, kısa logolar yüksek durur, böylece hepsi aynı görsel alanı kaplar.
   Yuvarlak amblemler 44 px. */
.ref-logo img {
  display: block;
  width: auto;
  height: var(--h, 32px);
}

/* Logo dosyası gelene kadar yuvada duran yazı */
.ref-yer {
  font-family: var(--yazi-baslik);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--soluk);
}

@media (max-width: 639px) {
  .ref-liste { gap: 10px 20px; }
  .ref-logo { height: 44px; }
  .ref-logo img { height: calc(var(--h, 32px) * 0.8); }
}

/* Hizmet kartları */
.hizmetler { background: var(--kart-zemin); }

.hizmet-ic {
  padding-block: clamp(48px, 7vw, 88px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.hizmet-baslik {
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--yazi-baslik);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--murekkep);
}

/* Fabrikamız başlığında da ikinci yarı mavi (9 Kasım) */
.hizmet-baslik em,
.fabrika-baslik em {
  font-style: normal;
  color: var(--mavi);
}

/* Başlıktaki teknoloji adları aşağıdaki kartlara götürür */
.hizmet-baslik a {
  color: var(--mavi);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.hizmet-baslik a:hover { color: var(--murekkep); }

.hizmet-ust {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.hizmet-alt {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--ikincil);
  text-wrap: pretty;
}

/* Üretim kartları: masaüstünde 4'lü tek sıra, tablette 2'li, telefonda tek sütun */
.kartlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1099px) {
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .kartlar { grid-template-columns: minmax(0, 1fr); }
}

/* Yan yana kartlarda görsel, başlık, özet, maddeler ve link aynı hizada dursun */
@supports (grid-template-rows: subgrid) {
  .kartlar > .kart {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.kart {
  min-width: 0;
  padding: 20px 20px 24px;
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince), 0 10px 28px var(--golge);
  display: flex;
  flex-direction: column;
}

.kart-gorsel {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 4px;
  background: var(--kart-zemin);
  color: var(--mavi);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kart-gorsel svg {
  width: 72px;
  height: 72px;
}

.kart-gorsel span {
  padding-inline: 12px;
  font-size: 12px;
  text-align: center;
  color: var(--soluk);
}

/* Kart fotoğrafları: 4:3 kutuyu tam doldurur */
.kart-gorsel:has(img) { overflow: hidden; }

.kart-gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kart-baslik {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--cizgi);
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.kart-tek {
  font-size: 34px;
  color: var(--mavi);
}

.kart-tur {
  font-size: 22px;
  font-weight: 500;
  color: var(--murekkep);
}

.kart-ozet {
  margin: 14px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 16px;
  line-height: 1.45;
  color: var(--murekkep);
}

.kart-detay {
  margin: 16px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ikincil);
}

.kart-detay strong {
  font-weight: 600;
  color: var(--murekkep);
}

/* Kart altı: solda tek mavi Teklif Al, sağda küçük Detaylar linki */
.kart-dugmeler {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.kart-detay-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--murekkep);
  text-decoration: none;
  transition: color 0.15s ease;
}

.kart-detay-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.kart-detay-link:hover { color: var(--mavi); }
.kart-detay-link:hover svg { transform: translateX(3px); }

/* Mühendislik kartı (3D tarama): solda görsel, sağda metin; dar ekranda alt alta */
.kart-ust {
  margin: 0 0 6px;
  font-family: var(--yazi-baslik);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mavi);
}

.kart-yatay .kart-ust { display: none; }

@media (min-width: 700px) {
  .kart-yatay {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: 20px clamp(20px, 3vw, 40px) 20px 20px;
  }
  .kart-yatay-metin {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .kart-yatay .kart-ust { display: block; }
  .kart-yatay .kart-baslik {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    min-height: 0;
  }
  .kart-yatay .kart-gorsel { aspect-ratio: 16 / 10; }
  .kart-yatay .kart-ozet { margin-top: 14px; }
  .kart-yatay .kart-detay { max-width: 52ch; }
  .kart-yatay .kart-dugmeler { margin-top: 0; padding-top: 20px; }
}

/* İki geniş kart: masaüstünde yan yana, altında tek sütun */
.kartlar-genis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 1100px) {
  .kartlar-genis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Yarım genişlikte kart: görsel sabit 220 px kare, metin kalan alan */
  .kart-yatay {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    padding-right: 24px;
  }
  .kart-yatay .kart-gorsel { aspect-ratio: 1 / 1; }
  .kart-yatay .kart-tek { font-size: 29px; }
  .kart-yatay .kart-tur { font-size: 19px; }
}

.dugme-cizgi {
  min-height: 44px;
  border: 1px solid var(--murekkep);
  background: var(--zemin);
  color: var(--murekkep);
  font-size: 13px;
}

.dugme-cizgi:hover { background: var(--ust-zemin); }

/* Boş sayfa içeriği */
.bos .kapsayici { padding-block: clamp(40px, 7vw, 72px); }

.bos h1 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

/* İletişim bilgileri: telefon, WhatsApp, e-posta, Instagram, LinkedIn — simge + yazı, tek satır */
.iletisim-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.iletisim-liste li { min-width: 0; }

.iletisim-liste a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--murekkep);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.iletisim-liste svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--mavi-koyu);
}

/* Tek numara: önce arama ve WhatsApp simgeleri, sonra numara */
.iletisim-numara {
  display: flex;
  align-items: center;
}

.iletisim-numara .simge-baglanti { padding-right: 12px; }

.iletisim-numara .simge-baglanti svg { transition: color 0.15s ease; }
.iletisim-numara .simge-baglanti:hover svg { color: var(--murekkep); }
.iletisim-liste.koyu .iletisim-numara .simge-baglanti:hover svg { color: var(--beyaz); }

.iletisim-numara .numara {
  margin-left: -3px;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.iletisim-liste.koyu .numara { color: var(--beyaz); }

.iletisim-liste a:not(.simge-baglanti):hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Koyu zemindeki hâli (giriş alanı, alt çağrı bandı) */
.iletisim-liste.koyu a { color: var(--beyaz); }
.iletisim-liste.koyu svg { color: var(--vurgu-acik); }

.iletisim-ic {
  display: grid;
  gap: 20px;
}

.iletisim-giris {
  margin: 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ikincil);
}

/* İletişim sayfasında ve malzeme bandında alt alta */
.iletisim-ic .iletisim-liste,
.mat-cta .iletisim-liste {
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 559px) {
  .iletisim-liste {
    flex-direction: column;
    gap: 0;
  }
}

.dugme-ikonlu { gap: 8px; }

.dugme-ikonlu svg {
  width: 18px;
  height: 18px;
}

/* Footer: arka planın tamamı dönen konum haritası; üstünde solda adres, sağda hizmetler, kurumsal, iletişim; altta yasal satır */
.alt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--murekkep);
  color: var(--footer-yazi);
}

/* Bağlantı katmanı haritanın üstünde; harita çizgilerinin üzerinde yazı okunsun diye hafif gölge */
.alt-katman {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(5, 9, 14, 0.7);
}

.alt .kapsayici {
  padding-block: clamp(44px, 6vw, 64px) 28px;
  display: grid;
  gap: 36px;
}

.alt-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 36px clamp(28px, 4vw, 64px);
  align-items: start;
}

.alt-ust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(20px, 3vw, 48px);
}

.alt img {
  display: block;
  height: 36px;
  width: auto;
}

.alt-adres {
  margin: 0;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.55;
}

.alt-sutun { min-width: 0; }

.alt-baslik {
  margin: 0 0 14px;
  font-family: var(--yazi-baslik);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beyaz);
}

.alt-sutun ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.alt-sutun a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--footer-yazi);
  text-decoration: none;
  transition: color 0.15s ease;
}

.alt-sutun a:hover { color: var(--beyaz); }

.alt-sutun svg {
  width: 17px;
  height: 17px;
  color: var(--vurgu-acik);
}

.alt-alt {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.alt-alt p {
  margin: 0;
  font-size: 13.5px;
}

.alt-yasal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.alt-yasal a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  color: var(--footer-yazi);
  text-decoration: none;
}

.alt-yasal a:hover {
  color: var(--beyaz);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 959px) {
  .alt-govde { grid-template-columns: minmax(0, 1fr); }
}

/* Geniş ekran: footer en az 600 px; üstte adres ve bağlantılar, altta yasal satır, arada harita görünür */
@media (min-width: 960px) {
  .alt-katman { min-height: 600px; align-content: space-between; }
}

@media (max-width: 719px) {
  .alt-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .alt-ust { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .alt-sutun a { min-height: 32px; }
}

/* ===== Hakkımızda sayfası ===== */
.fabrika.hk-biz { background: var(--zemin); }

.hk-bolum { background: var(--kart-zemin); }
.hk-ilke { background: var(--zemin); }
.hk-ref { background: var(--kart-zemin); }

.hk-bolum-ic {
  padding-block: clamp(56px, 7vw, 88px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.hk-ust {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.hk-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--murekkep);
}

.hk-izgara {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.hk-kutu {
  min-width: 0;
  padding: 28px 24px;
  border-top: 3px solid var(--vurgu);
  border-radius: 0 0 6px 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
  display: grid;
  align-content: start;
  gap: 12px;
}

.hk-ilke .hk-kutu { background: var(--kart-zemin); box-shadow: none; }

.hk-kutu svg {
  width: 32px;
  height: 32px;
  color: var(--vurgu);
}

.hk-kutu h3 {
  margin: 4px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--murekkep);
}

.hk-kutu p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ikincil);
}

@media (max-width: 1099px) {
  .hk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
  .hk-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* Sık sorulan sorular: ortalı başlık, tek sütun liste, ince ayraçlar */
.sss { background: var(--kart-zemin); }

.sss-ic {
  padding-block: clamp(56px, 8vw, 96px);
  display: grid;
  justify-items: center;
  gap: 32px;
}

.sss-ust {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.sss-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--murekkep);
}

.sss-alt {
  margin: 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ikincil);
}

.sss-liste {
  width: 100%;
  max-width: 880px;
  border-top: 1px solid var(--cizgi);
}

.soru { border-bottom: 1px solid var(--cizgi); }

.soru summary {
  min-height: 44px;
  padding: 18px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--murekkep);
  list-style: none;
  cursor: pointer;
}

.soru summary::-webkit-details-marker { display: none; }

.soru summary:hover { color: var(--mavi); }

.soru summary:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
  border-radius: 4px;
}

.soru summary svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--mavi);
  transition: transform 0.2s ease;
}

.soru[open] summary svg { transform: rotate(180deg); }

.cevap { padding: 0 4px 20px; }

.cevap p {
  margin: 0;
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ikincil);
}

.sss-not {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
  color: var(--ikincil);
}

.sss-not a {
  white-space: nowrap;
  color: var(--murekkep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sss-not a:hover { color: var(--mavi); }

/* Kapanış çağrısı: düz koyu bant, solda metin, sağda Teklif Al ve iletişim */
.kapanis {
  --mavi: var(--vurgu-acik);
  background: var(--murekkep-hover);
  color: var(--beyaz);
}

.kapanis-ic {
  padding-block: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px clamp(32px, 5vw, 80px);
}

.kapanis-metin { min-width: 0; }

.kapanis-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.kapanis-aciklama {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--giris-yazi);
}

.kapanis-guven {
  margin: 18px 0 0;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--vurgu-acik);
}

.kapanis-eylem {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.kapanis-dugme {
  min-width: 220px;
  min-height: 52px;
  font-size: 15px;
}

.kapanis-iletisim {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.kapanis-iletisim a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--beyaz);
  text-decoration: none;
}

.kapanis-iletisim svg {
  width: 18px;
  height: 18px;
  color: var(--vurgu-acik);
}

.kapanis-iletisim a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 860px) {
  .kapanis-eylem { justify-self: end; justify-items: start; }
}

@media (max-width: 859px) {
  .kapanis-ic { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Malzemeler sayfası (Malzeme Sihirbazı) ===== */
.desenler {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

button.dugme { cursor: pointer; }

/* Giriş bandı: ana sayfadaki koyu katman çizgili alanın kısa hali */
.mat-giris {
  position: relative;
  overflow: hidden;
  background-color: var(--murekkep);
  background-image:
    radial-gradient(ellipse 55% 85% at 82% 45%, var(--giris-parilti), transparent 70%),
    repeating-linear-gradient(0deg, var(--giris-katman) 0 1px, transparent 1px 4px);
  color: var(--beyaz);
}

.mat-giris::after {
  content: "";
  position: absolute;
  right: -1%;
  bottom: -22%;
  width: min(400px, 42vw);
  aspect-ratio: 1;
  max-width: 100%;
  background: url("../assets/ikon.svg") center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.mat-giris-ic {
  position: relative;
  z-index: 1;
  padding-block: clamp(44px, 6vw, 76px);
  display: grid;
  justify-items: start;
  gap: 16px;
}

.ust-yazi {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vurgu-acik);
}

.mat-giris h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--yazi-baslik);
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 600;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

.giris-metin {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--giris-yazi);
}

.giris-sayilar {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
}

.giris-sayilar li {
  display: grid;
  gap: 4px;
  padding-right: clamp(18px, 3vw, 32px);
  margin-right: clamp(18px, 3vw, 32px);
  border-right: 1px solid var(--giris-ayrac);
}

.giris-sayilar li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.sayi {
  font-family: var(--yazi-baslik);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--beyaz);
}

.sayi-ad {
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--giris-yazi);
}

/* Sihirbaz: filtre paneli + malzeme ızgarası */
.sihirbaz { background: var(--kart-zemin); }

/* Malzeme Rehberi doğrudan liste ile açılır: üst boşluk sayfa girişi kadar, başlık h1 */
.sihirbaz.ilk .sihirbaz-ic { padding-top: clamp(28px, 4vw, 44px); gap: 20px; }
.sihirbaz.ilk .liste-ust { margin-bottom: 0; }
.liste-baslik em { font-style: normal; color: var(--mavi); }

.sihirbaz-ic {
  padding-block: clamp(28px, 4vw, 48px) clamp(48px, 7vw, 88px);
  display: grid;
  gap: 24px;
}

.filtre {
  min-width: 0;
  padding: 18px clamp(14px, 2.5vw, 22px);
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
  display: grid;
  gap: 14px;
}

.filtre-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.filtre-etiket {
  min-width: 84px;
  font-family: var(--yazi-baslik);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soluk);
}

.segment {
  display: inline-flex;
  border: 1px solid var(--murekkep);
  border-radius: 4px;
  overflow: hidden;
}

.segment button {
  min-height: 42px;
  padding-inline: 16px;
  border: 0;
  border-left: 1px solid var(--murekkep);
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.segment button:first-child { border-left: 0; }
.segment button:hover { background: var(--ust-zemin); }

.segment button[aria-pressed="true"] {
  background: var(--murekkep);
  color: var(--beyaz);
}

.segment .adet {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--soluk);
}

.segment button[aria-pressed="true"] .adet { color: var(--vurgu-acik); }

.sirala {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sirala label {
  font-size: 14px;
  color: var(--ikincil);
}

.sirala select {
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  background: var(--zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111315' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  appearance: none;
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 500;
  color: var(--murekkep);
  cursor: pointer;
}

.sirala select:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
}

.cipler {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cip {
  min-height: 40px;
  padding-inline: 14px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cip:hover { border-color: var(--mavi); }

.cip[aria-pressed="true"] {
  border-color: var(--vurgu);
  background: var(--vurgu);
  color: var(--beyaz);
  font-weight: 600;
}

.filtre-alt {
  padding-top: 12px;
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
}

.filtre-ipucu,
.sonuc-sayisi {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.filtre-ipucu {
  flex: 1 1 320px;
  color: var(--ikincil);
}

.sonuc-sayisi {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .filtre-etiket { flex-basis: 100%; }
  .sirala { margin-left: 0; }
}

/* Malzeme kartları */
.malzemeler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1099px) {
  .malzemeler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 799px) {
  .malzemeler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 519px) {
  .malzemeler { grid-template-columns: minmax(0, 1fr); }
}

.m-kart {
  min-width: 0;
  display: flex;
}

.m-dugme {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 14px 14px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--zemin);
  color: var(--murekkep);
  box-shadow: 0 1px 2px var(--golge-ince), 0 10px 28px var(--golge);
  font-family: var(--yazi-govde);
  text-align: left;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.m-dugme:hover {
  box-shadow: 0 1px 2px var(--golge-ince), 0 16px 36px var(--golge-guclu);
  transform: translateY(-2px);
}

/* Baskı tablası ızgarası üzerinde çekme numunesi */
.m-gorsel {
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border-radius: 4px;
  background-color: var(--kart-zemin);
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.m-gorsel svg {
  display: block;
  width: 90%;
  height: auto;
  transition: transform 0.25s ease;
}

.m-dugme:hover .m-gorsel svg { transform: translateY(-3px) rotate(-1.5deg); }

/* Örnek parça fotoğrafı (3:2, beyaz stüdyo zemini): ızgara yerine düz beyaz, ince çerçeve */
.m-gorsel.foto {
  aspect-ratio: 3 / 2;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

.m-gorsel.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.m-dugme:hover .m-gorsel.foto img { transform: scale(1.04); }
/* CNC kartı: yüzey dokusu (kare) 3:2 kutuyu kaplar */
.m-gorsel.foto.doku { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.m-deger b { overflow-wrap: anywhere; }

.md-gorsel.foto { box-shadow: inset 0 0 0 1px var(--cizgi), 0 24px 60px var(--perde); }

.md-parca-ad {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--giris-yazi);
}

.m-rozet {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  padding: 4px 8px 3px;
  border-radius: 3px;
  background: var(--murekkep);
  color: var(--beyaz);
  font-family: var(--yazi-baslik);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.m-rozet.bir {
  background: var(--vurgu);
  color: var(--beyaz);
}

.m-rozet.statik {
  position: static;
  display: inline-block;
}

.m-tek {
  display: block;
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mavi-koyu);
}

.m-ad {
  display: block;
  margin-top: 2px;
  font-family: var(--yazi-baslik);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.m-ozet {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ikincil);
}

/* Kartta kullanım yerleri: etiket + üç kısa madde */
.m-kullanim {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--cizgi);
}
.m-kullanim small {
  flex-basis: 100%;
  font-family: var(--yazi-baslik);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soluk);
}
.m-kullanim span {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--kart-zemin);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ikincil);
}

.m-alt {
  margin-top: auto;
  padding-top: 16px;
  display: grid;
  gap: 10px;
}

.m-degerler {
  padding-top: 12px;
  border-top: 1px solid var(--cizgi);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.m-deger {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.m-deger small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--soluk);
}

.m-deger b {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.m-ux {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mavi-koyu);
}

.m-incele {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.m-incele svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.m-dugme:hover .m-incele svg { transform: translateX(3px); }

.bos-sonuc {
  padding: 40px 20px;
  border-radius: 6px;
  background: var(--zemin);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.bos-sonuc p { margin: 0; }

.veri-notu {
  max-width: 80ch;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ikincil);
}

.veri-notu h2 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep);
}

.veri-notu p { margin: 0; }

/* Alt çağrı bandı */
.mat-cta {
  background-color: var(--murekkep);
  background-image: radial-gradient(ellipse 60% 120% at 12% 50%, var(--giris-parilti), transparent 70%);
  color: var(--beyaz);
}

.mat-cta-ic {
  padding-block: clamp(44px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}

.mat-cta-metin {
  flex: 1 1 420px;
  min-width: 0;
}

.mat-cta h2 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.mat-cta p {
  margin: 12px 0 0;
  max-width: 56ch;
  color: var(--giris-yazi);
}

.mat-cta .guven {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--vurgu-acik);
}


/* Teknik değer tablosu (malzeme detay sayfası) */
.d-ux {
  margin: 0;
  padding: 12px 14px;
  border-radius: 4px;
  background: var(--ust-zemin);
  font-size: 15px;
  line-height: 1.45;
}

.d-tablo-kap {
  min-width: 0;
  overflow-x: auto;
}

.d-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.4;
}

.d-tablo th,
.d-tablo td {
  padding: 9px 0;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

.d-tablo th[scope="row"] {
  padding-right: 16px;
  font-weight: 400;
  text-align: left;
  color: var(--ikincil);
}

.d-tablo td {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.d-grup th {
  padding: 18px 0 6px;
  border-bottom: 2px solid var(--murekkep);
  font-family: var(--yazi-baslik);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--mavi-koyu);
}

.d-tablo tbody tr:first-child th { padding-top: 0; }

.d-tablo tr.vurgu th,
.d-tablo tr.vurgu td {
  background: var(--ust-zemin);
  color: var(--mavi-koyu);
}

.d-tablo tr.vurgu th { padding-left: 8px; }
.d-tablo tr.vurgu td { padding-right: 8px; }

.d-kaynak {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--soluk);
}

@media (max-width: 559px) {
  /* Dar ekranda özellik adı üstte, değer altta */
  .d-tablo tr:not(.d-grup) {
    display: grid;
    gap: 2px;
    padding-block: 9px;
    border-bottom: 1px solid var(--cizgi);
  }
  .d-tablo tr:not(.d-grup) th,
  .d-tablo tr:not(.d-grup) td {
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }
  .d-tablo tr.vurgu {
    padding-inline: 8px;
    background: var(--ust-zemin);
  }
  .d-tablo tr.vurgu th,
  .d-tablo tr.vurgu td { padding: 0; }
  .d-tablo tr:not(.d-grup) th { font-size: 14px; }
}

/* Bölüm üstü küçük etiket (Fabrikamız, Nasıl çalışır?) */
.bolum-etiket {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mavi);
}

/* Süreç: dört adım tek sırada, aralarında ince çizgi; tablette 2'li, telefonda alt alta */
.surec { background: var(--zemin); }

.surec-ic {
  padding-block: clamp(56px, 8vw, 96px);
  display: grid;
  justify-items: center;
  gap: clamp(32px, 4vw, 48px);
}

.surec-ust {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.surec-baslik {
  margin: 0;
  max-width: 32ch;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--murekkep);
}

.surec-baslik em {
  font-style: normal;
  color: var(--mavi);
}

.adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}

.adim {
  min-width: 0;
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
}

.adim-ust {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adim-no {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 2px solid var(--vurgu);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yazi-baslik);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--vurgu);
  background: var(--zemin);
}

.adim-ust svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--ikincil);
}

/* Numaradan sonraki ince çizgi, sonraki adıma uzanır */
.adim-ust::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 4px;
  background: var(--cizgi);
}

.adim:last-child .adim-ust::after { display: none; }

.adim-baslik {
  margin: 4px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--murekkep);
}

.adim-metin {
  margin: 0;
  max-width: 30ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ikincil);
  text-wrap: pretty;
}

.surec-dugme { min-width: 180px; }

@media (max-width: 959px) {
  .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adim:nth-child(2) .adim-ust::after { display: none; }
}

@media (max-width: 559px) {
  .adimlar { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .adim-ust::after { display: none; }
  .adim-metin { max-width: none; }
}

/* Fabrikamız: solda tanıtım metni ve rakamlar, sağda fabrika fotoğrafı; süreçten sonra açık gri zemin */
.fabrika { background: var(--kart-zemin); }

.fabrika-ic {
  padding-block: clamp(56px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.fabrika-metin {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 18px;
}

.fabrika-ust {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mavi);
}

.fabrika-baslik {
  margin: 0;
  max-width: 20ch;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--murekkep);
}

.fabrika-metin > p:not(.fabrika-ust) {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--ikincil);
  text-wrap: pretty;
}

.fabrika-sayilar {
  list-style: none;
  margin: 8px 0 6px;
  padding: 20px 0 0;
  width: 100%;
  border-top: 1px solid var(--cizgi);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 16px;
}

@media (max-width: 1099px) and (min-width: 480px) {
  .fabrika-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fabrika-sayilar li {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.fs-deger {
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1;
  color: var(--mavi);
  white-space: nowrap;
}

.fs-ad {
  font-size: 14px;
  line-height: 1.4;
  color: var(--soluk);
}

.fabrika-gorsel {
  margin: 0;
  min-width: 0;
}

/* Dikey drone fotoğrafında bina alt yarıda: kadraj binaya yaklaşır, gökyüzü dışarıda kalır */
.fabrika-gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 6px;
}

.fabrika-gorsel figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--soluk);
}

@media (max-width: 860px) {
  .fabrika-ic { grid-template-columns: minmax(0, 1fr); }
  .fabrika-gorsel img { aspect-ratio: 4 / 3; object-position: 50% 100%; }
}

@media (max-width: 479px) {
  .fabrika-sayilar { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fabrika-sayilar li { grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 12px; }
}

/* Ana sayfa malzeme kataloğu (Weerg düzeni): ortalı başlık, yazı sekmeler,
   3 sütunlu kutular; son sıradaki eksik kutular ortalanır */
.katalog { background: var(--zemin); }

.katalog-ic {
  padding-block: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--cizgi);
  display: grid;
  gap: 28px;
}

.katalog-ust {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.katalog-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--murekkep);
}

.katalog-alt {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 2.8vw, 37px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--murekkep);
}

.katalog-alt strong { font-weight: 700; }

/* Yazı sekmeler: seçili olanın altında mavi çizgi */
.katalog-sekmeler {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.katalog-sekmeler button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.katalog-sekmeler button:hover { color: var(--mavi); }

.katalog-sekmeler button[aria-pressed="true"] {
  border-bottom-color: var(--mavi);
  color: var(--mavi);
}

.katalog-liste {
  --katalog-sutun: 4;
  --katalog-bosluk: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--katalog-bosluk);
}

.katalog-kutu {
  flex: 0 0 calc((100% - (var(--katalog-sutun) - 1) * var(--katalog-bosluk)) / var(--katalog-sutun));
  min-width: 0;
}

/* Kutu: gri fotoğraf fonu üzerinde numune; yazı okunsun diye hafif koyu perde */
.katalog-baglanti {
  position: relative;
  display: block;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #D9DEE3 0%, #AEB6BE 100%);
  color: var(--beyaz);
  text-decoration: none;
}

.katalog-gorsel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.katalog-gorsel svg {
  display: block;
  width: 82%;
  height: auto;
}

/* Perde: beyaz yazı açık gri zemin üzerinde en az 4,5:1 okunsun */
.katalog-baglanti::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 19, 21, 0.42);
  transition: background-color 0.3s ease;
}

.katalog-yazi {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(17, 19, 21, 0.35), 0 2px 18px rgba(17, 19, 21, 0.5);
}

.katalog-ad {
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Kutunun alt satırı: ailedeki malzemelerin kısa adları */
.katalog-sayi {
  max-width: 24ch;
  font-family: var(--yazi-govde);
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* Kataloğun altında tam listeye giden bağlantı */
.katalog-tumu {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: var(--murekkep);
  text-decoration: none;
  transition: color 0.15s ease;
}

.katalog-tumu svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.katalog-tumu:hover { color: var(--mavi); }
.katalog-tumu:hover svg { transform: translateX(3px); }

.katalog-baglanti:hover .katalog-gorsel,
.katalog-baglanti:focus-visible .katalog-gorsel { transform: scale(1.1); }

.katalog-baglanti:hover::after,
.katalog-baglanti:focus-visible::after { background: rgba(17, 19, 21, 0.52); }

.katalog-baglanti:focus-visible {
  outline: 3px solid var(--mavi);
  outline-offset: 3px;
}

@media (max-width: 1099px) {
  .katalog-liste { --katalog-sutun: 3; }
}

@media (max-width: 899px) {
  .katalog-liste { --katalog-sutun: 2; --katalog-bosluk: 16px; }
}

@media (max-width: 519px) {
  .katalog-liste { --katalog-bosluk: 10px; }
  .katalog-ad { font-size: 22px; }
  .katalog-sayi { font-size: 12.5px; }
  .katalog-sekmeler { gap: 4px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .katalog-gorsel, .katalog-baglanti::after, .katalog-tumu svg { transition: none; }
  .soru summary svg { transition: none; }
  .katalog-tumu:hover svg { transform: none; }
  .katalog-baglanti:hover .katalog-gorsel,
  .katalog-baglanti:focus-visible .katalog-gorsel { transform: none; }
}

/* Sihirbaz: aile süzgecini kaldıran bağlantı görünümlü düğme */
.ipucu-temizle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--mavi);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.ipucu-temizle:hover { color: var(--murekkep); }

@media (prefers-reduced-motion: reduce) {
  .dugme, .menu a, .menu-ust, .menu-ust svg, .alt-tumu svg { transition: none; }
  .alt-tumu:hover svg { transform: none; }
  .kart-detay-link svg { transition: none; }
  .kart-detay-link:hover svg { transform: none; }
  .m-dugme, .m-gorsel svg, .m-incele svg, .segment button, .cip { transition: none; }
  .m-dugme:hover { transform: none; }
  .m-gorsel.foto img { transition: none; }
  .m-dugme:hover .m-gorsel svg,
  .m-dugme:hover .m-gorsel.foto img,
  .m-dugme:hover .m-incele svg { transform: none; }
}


/* ===== Malzeme detay sayfası =====
   Sıra: koyu giriş (ad, slogan, teklif, numune) → artılar / eksiler / ana özellikler →
   öne çıkanlar → galeri → genel bakış (içindekiler + yazı) → teknik değerler →
   karşılaştırma → sık sorulanlar → diğer malzemeler → alt çağrı. */
.md-yok-ic {
  padding-block: clamp(48px, 8vw, 96px);
  display: grid;
  justify-items: start;
  gap: 16px;
}

.md-yok h1,
.md-yok .md-yok-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
}

.md-yok p {
  margin: 0;
  max-width: 56ch;
  color: var(--ikincil);
}

/* Giriş */
.md-giris {
  background-color: var(--murekkep);
  background-image:
    radial-gradient(ellipse 55% 85% at 82% 45%, var(--giris-parilti), transparent 70%),
    repeating-linear-gradient(0deg, var(--giris-katman) 0 1px, transparent 1px 4px);
  color: var(--beyaz);
}

.md-giris-ic {
  padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 32px clamp(32px, 5vw, 72px);
}

.md-giris-metin {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 14px;
}

.md-yol ol {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--giris-yazi);
}

.md-yol li + li::before {
  content: "/";
  margin-inline: 8px;
  color: var(--footer-yazi);
}

.md-yol a {
  color: var(--giris-yazi);
  text-decoration: none;
}

.md-yol a:hover {
  color: var(--beyaz);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-yol [aria-current] { color: var(--beyaz); }

.md-giris h1 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 600;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.md-slogan {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--vurgu-acik);
}

.md-giris .giris-dugmeler { margin-top: 6px; }

.md-guven {
  margin: 2px 0 0;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--giris-yazi);
}

/* Baskı tablası üzerinde büyük numune */
.md-tabla {
  position: relative;
  min-width: 0;
}

.md-gorsel {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  box-shadow: 0 24px 60px var(--perde);
}

.md-gorsel svg { width: 88%; }

.md-tabla .m-rozet {
  top: 14px;
  left: 14px;
}

@media (max-width: 859px) {
  .md-giris-ic { grid-template-columns: minmax(0, 1fr); }
  .md-tabla { max-width: 460px; width: 100%; }
}

/* Küçük bölüm başlığı (Artıları, Eksileri, Ana özellikler, Bu sayfada) */
.md-kucuk-baslik {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--murekkep);
  font-family: var(--yazi-baslik);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--murekkep);
}

.md-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Artılar, eksiler, ana özellikler */
.md-ozet { background: var(--zemin); }

.md-ozet-ic {
  padding-block: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 36px clamp(24px, 3.5vw, 48px);
}

.md-liste-blok { min-width: 0; }

.md-artilar,
.md-eksiler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.md-artilar li,
.md-eksiler li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
}

.md-artilar svg,
.md-eksiler svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
}

.md-artilar svg { background: var(--vurgu); color: var(--beyaz); }
.md-eksiler svg { background: var(--cizgi); color: var(--murekkep); }

.md-ana {
  min-width: 0;
  padding: 20px 22px 6px;
  border-radius: 6px;
  background: var(--kart-zemin);
}

.md-ana-liste { margin: 0; }

.md-ana-liste div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  padding-block: 10px;
  border-bottom: 1px solid var(--cizgi);
}

.md-ana-liste div:last-child { border-bottom: 0; }

.md-ana-liste dt {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ikincil);
}

.md-ana-liste dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* Henüz girilmemiş bilgi */
.yer-tutucu {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed var(--soluk);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--soluk);
}

@media (max-width: 1023px) {
  .md-ozet-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-ana { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  .md-ozet-ic { grid-template-columns: minmax(0, 1fr); }
}

/* Öne çıkanlar */
.md-bant { background: var(--kart-zemin); }

.md-bant-ic {
  padding-block: clamp(44px, 6vw, 80px);
  display: grid;
  gap: 28px;
}

.md-one {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.md-one-kart {
  min-width: 0;
  padding: 22px 22px 24px;
  border-top: 3px solid var(--vurgu);
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
}

.md-one-kart h3 {
  margin: 0 0 8px;
  font-family: var(--yazi-baslik);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

.md-one-kart p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ikincil);
}

.md-ara-cagri {
  padding: 18px clamp(16px, 2.5vw, 24px);
  border-radius: 6px;
  background: var(--murekkep);
  color: var(--beyaz);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}

.md-ara-cagri p {
  margin: 0;
  min-width: 0;
  font-family: var(--yazi-baslik);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 859px) {
  .md-one { grid-template-columns: minmax(0, 1fr); }
}

/* Galeri: büyük kare solda, iki küçük sağda */
.md-galeri { background: var(--zemin); }

.md-galeri-ic {
  padding-block: clamp(44px, 6vw, 80px);
  display: grid;
  gap: 24px;
}

.md-galeri-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

.md-galeri-liste li {
  min-width: 0;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border-radius: 6px;
  background-color: var(--kart-zemin);
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 14px 14px;
  color: var(--mavi);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.md-galeri-liste li:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}

.md-galeri-liste svg {
  width: 40px;
  height: 40px;
}

.md-galeri-liste span {
  padding-inline: 10px;
  font-size: 12.5px;
  text-align: center;
  color: var(--soluk);
}

@media (max-width: 639px) {
  .md-galeri-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-galeri-liste li:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Genel bakış */
.md-genel {
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
}

.md-genel-ic {
  padding-block: clamp(44px, 6vw, 80px);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 32px clamp(32px, 5vw, 72px);
}

.md-icindekiler {
  position: sticky;
  top: 24px;
  min-width: 0;
}

.md-icindekiler .md-kucuk-baslik {
  margin-bottom: 10px;
  font-size: 15px;
}

.md-icindekiler ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--cizgi);
}

.md-icindekiler a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ikincil);
  text-decoration: none;
}

.md-icindekiler a:hover {
  border-left-color: var(--vurgu);
  color: var(--murekkep);
}

.md-yazi {
  min-width: 0;
  max-width: 70ch;
}

.md-yazi > section {
  padding-top: 32px;
  scroll-margin-top: 16px;
}

.md-yazi h3 {
  margin: 0 0 10px;
  font-family: var(--yazi-baslik);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

.md-yazi p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
}

.md-kullanim {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.md-kullanim li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.md-kullanim li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--vurgu);
  transform: translateY(-1px);
}

.md-sektorler {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.md-sektorler li {
  padding: 4px 10px 3px;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mavi-koyu);
}

.md-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep);
  text-decoration: none;
}

.md-baglanti svg {
  width: 16px;
  height: 16px;
}

.md-baglanti:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 899px) {
  .md-genel-ic { grid-template-columns: minmax(0, 1fr); }
  .md-icindekiler { display: none; }
}

@media (max-width: 519px) {
  .md-kullanim { grid-template-columns: minmax(0, 1fr); }
}

/* Teknik değerler */
.md-teknik {
  background: var(--kart-zemin);
  scroll-margin-top: 0;
}

.md-teknik-ic {
  padding-block: clamp(44px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 24px clamp(32px, 5vw, 72px);
}

.md-teknik-ust {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.md-teknik-govde {
  min-width: 0;
  padding: 22px clamp(16px, 3vw, 28px);
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
  display: grid;
  gap: 14px;
}

@media (max-width: 859px) {
  .md-teknik-ic { grid-template-columns: minmax(0, 1fr); }
}

/* Karşılaştırma tablosu */
.md-karsilastir { background: var(--zemin); }

.md-kars-ic {
  padding-block: clamp(44px, 6vw, 80px);
  display: grid;
  gap: 16px;
}

.md-kars-not {
  margin: 0;
  max-width: 76ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ikincil);
}

.md-kars-kap {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
}

.md-kars-kap:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 3px;
}

.md-kars {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.md-kars th,
.md-kars td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: top;
}

.md-kars tbody tr:last-child th,
.md-kars tbody tr:last-child td { border-bottom: 0; }

.md-kars thead th {
  background: var(--kart-zemin);
  font-family: var(--yazi-baslik);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  vertical-align: bottom;
}

.md-kars thead .etiket {
  display: block;
  margin-bottom: 4px;
  font-family: var(--yazi-govde);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mavi-koyu);
}

.md-kars tbody th {
  width: 26%;
  font-weight: 400;
  font-size: 14px;
  color: var(--ikincil);
}

.md-kars td { font-weight: 600; }

/* Bu sayfadaki malzemenin sütunu */
.md-kars .bu { background: var(--ust-zemin); }
.md-kars thead th.bu { background: var(--vurgu); color: var(--beyaz); }
.md-kars thead th.bu .etiket { color: var(--giris-yazi); }

/* Satır başlığı yatay kaydırmada solda kalır */
.md-kars tbody th,
.md-kars thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.md-kars tbody th { background: var(--zemin); }

.md-kars .bos-hucre {
  font-weight: 400;
  color: var(--soluk);
}

.md-kars a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mavi-koyu);
}

.md-kars .bu-yazi {
  font-size: 13px;
  font-weight: 500;
  color: var(--soluk);
}

/* Sık sorulanlar */
.md-sss { background: var(--kart-zemin); }

.md-sss-ic {
  padding-block: clamp(44px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 24px clamp(32px, 5vw, 72px);
}

.md-sss-liste {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.md-soru {
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
}

.md-soru summary {
  min-height: 44px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.md-soru summary::-webkit-details-marker { display: none; }

.md-soru summary:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
  border-radius: 6px;
}

.md-soru summary svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--mavi-koyu);
  transition: transform 0.2s ease;
}

.md-soru[open] summary svg { transform: rotate(45deg); }

.md-cevap { padding: 0 20px 20px; }

.md-cevap p {
  margin: 0;
  max-width: 68ch;
  line-height: 1.65;
  color: var(--ikincil);
}

@media (max-width: 859px) {
  .md-sss-ic { grid-template-columns: minmax(0, 1fr); }
}



/* Diğer malzemeler */
.md-diger { background: var(--zemin); }

.md-diger-ic { padding-block: clamp(36px, 5vw, 56px); }

.md-diger-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.md-diger-liste a {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--murekkep);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.md-diger-liste a:hover {
  border-color: var(--murekkep);
  background: var(--ust-zemin);
}

.md-diger-liste small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mavi-koyu);
}

@media (prefers-reduced-motion: reduce) {
  .md-soru summary svg, .md-diger-liste a { transition: none; }
}


/* ===== Yazıcılar sayfası =====
   Sıra: koyu giriş (sayılarla) → üç model kartı + ortak özellikler → karşılaştırma tablosu → alt çağrı. */
.y-modeller { background: var(--kart-zemin); }

.y-modeller-ic {
  padding-block: clamp(32px, 4vw, 56px) clamp(48px, 7vw, 88px);
  display: grid;
  gap: 20px;
}

.y-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.y-kart {
  min-width: 0;
  padding: 14px 14px 20px;
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince), 0 10px 28px var(--golge);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 16px;
}

/* Baskı tablası ızgarası üzerinde yazıcı; tabanda hafif gölge */
.y-gorsel {
  position: relative;
  aspect-ratio: 5 / 4;
  max-width: 100%;
  padding: 22px 22px 18px;
  border-radius: 4px;
  background-color: var(--kart-zemin);
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: center;
  overflow: hidden;
}

.y-gorsel::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10px;
  height: 18px;
  background: radial-gradient(ellipse at center, var(--golge-guclu), transparent 70%);
}

.y-gorsel img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.25s ease;
}

.y-kart:hover .y-gorsel img { transform: translateY(-3px); }

.y-ad {
  margin: 2px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
}

.y-ozet {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ikincil);
}

.y-degerler {
  margin: 16px 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--cizgi);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.y-degerler div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.y-degerler dt {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--soluk);
}

.y-degerler dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.y-degerler .y-yok {
  font-weight: 500;
  color: var(--soluk);
}

.y-dugme {
  margin-top: auto;
  width: 100%;
}

/* Ortak özellikler şeridi */
.y-ortak {
  min-width: 0;
  padding: 20px clamp(16px, 2.5vw, 24px) 22px;
  border-radius: 6px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
}

.y-ortak-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 24px;
}

.y-ortak-liste li {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
}

.y-ortak-liste li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--vurgu);
  transform: translateY(-1px);
}

/* Karşılaştırma tablosu: model sütunları eşit */
.y-kars { min-width: 720px; }
.y-kars thead th:not(:first-child),
.y-kars td { width: 24.6%; }
.y-kars thead th { font-size: 26px; }

.y-metin-baglanti {
  color: var(--mavi-koyu);
  font-weight: 600;
  text-underline-offset: 3px;
}

@media (max-width: 1099px) {
  .y-ortak-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .y-liste {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
  .y-ortak {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
  .y-ortak-liste { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .y-gorsel img { transition: none; }
  .y-kart:hover .y-gorsel img { transform: none; }
}


/* ===== Teklif penceresi =====
   Solda koyu alan (başlık, kısa açıklama, telefon ve e-posta), sağda form (dosya yükleme, e-posta, gönder). */
html:has(dialog.teklif[open]) { overflow: hidden; }

dialog.teklif {
  width: min(880px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: auto;
  background: var(--zemin);
  color: var(--murekkep);
  box-shadow: 0 30px 80px rgba(17, 19, 21, 0.35);
}

dialog.teklif::backdrop {
  background: var(--perde);
  backdrop-filter: blur(2px);
}

.teklif-ic {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 100%;
}

.teklif-sol {
  min-width: 0;
  padding: 40px 32px 32px;
  background-color: var(--murekkep-hover);
  background-image: radial-gradient(ellipse 90% 60% at 20% 100%, var(--giris-parilti), transparent 72%);
  color: var(--beyaz);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.teklif-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.teklif-metin {
  margin: 0;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--giris-yazi);
}

.teklif-iletisim {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--giris-ayrac);
  display: grid;
  gap: 4px;
}

.teklif-etiket {
  margin: 0;
  font-size: 13.5px;
  color: var(--giris-yazi);
}

.teklif-iletisim .iletisim-liste {
  flex-direction: column;
  gap: 0;
}

.teklif-form {
  min-width: 0;
  padding: 40px 32px 32px;
  display: grid;
  align-content: start;
  gap: 18px;
}

/* align-content: yan yana iki alandan birinin altında hata yazısı çıkınca diğerinin kutusu uzamaz */
.alan {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.alan-etiket {
  font-size: 14px;
  font-weight: 600;
  color: var(--murekkep);
}

/* Dosya alanı: düz zemin, kesik çizgi, sade ikon. Kareli desen kaldırıldı (kullanıcı kareli zeminleri istemiyor);
   teklif penceresinde ve İletişim sayfasındaki formda aynı görünür. */
.yukle-alan {
  position: relative;
  min-height: 150px;
  padding: 22px 18px;
  border: 1.5px dashed var(--cizgi-guclu);
  border-radius: 6px;
  background-color: var(--kart-zemin);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.yukle-alan:hover,
.yukle-alan.surukleniyor {
  border-color: var(--mavi);
  background-color: var(--ust-zemin);
}

.yukle-alan:focus-within {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
}

.yukle-alan svg {
  width: 30px;
  height: 30px;
  color: var(--mavi-koyu);
}

.yukle-ana {
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.45;
}

.yukle-sec {
  font-weight: 600;
  color: var(--mavi-koyu);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yukle-alt {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--soluk);
}

.dosya-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.dosya-liste li {
  min-width: 0;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.dosya-ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.dosya-boyut {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--soluk);
}

.dosya-sil {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ikincil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dosya-sil:hover { background: var(--ust-zemin); color: var(--murekkep); }
.dosya-sil svg { width: 16px; height: 16px; }

/* Dosya eklenince listenin altında görünür: talep e-postayla gittiği için dosyaları ziyaretçi ekler.
   Form bir sunucuya bağlanınca bu not kaldırılır. */
.dosya-not {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ikincil);
}

.dosya-liste:empty + .dosya-not,
.dosya-liste[hidden] + .dosya-not { display: none; }

.girdi {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 16px;
}

.girdi::placeholder { color: var(--soluk); }

textarea.girdi {
  min-height: 108px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.alan-istege {
  font-weight: 400;
  color: var(--soluk);
}

.girdi:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 1px;
  border-color: var(--mavi);
}

.girdi[aria-invalid="true"] { border-color: var(--hata); }

.alan-hata {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hata);
}

/* Gönder alanı: telefonda pencerenin altına yapışır; altında e-posta uygulamasının açılacağını söyleyen not */
.teklif-gonder-alan {
  display: grid;
  gap: 8px;
}

.teklif-gonder {
  width: 100%;
  min-height: 50px;
  cursor: pointer;
  border: 0;
}

.teklif-not {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--ikincil);
}

/* E-posta ve telefon yan yana; dar ekranda alt alta */
.alan-ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

/* Dokunmatik cihazda "sürükleyin" yerine "dosya seçin ya da fotoğraf çekin" */
.yukle-dar { display: none; }
@media (hover: none) and (pointer: coarse) {
  .yukle-genis { display: none; }
  .yukle-dar { display: inline; }
}

/* Sol panel: yanıt süresi ve üç güvence */
.teklif-sure {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--beyaz);
}

.teklif-sure svg,
.teklif-guvence svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--vurgu-acik);
}

.teklif-guvence {
  list-style: none;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--giris-ayrac);
  display: grid;
  gap: 14px;
}

.teklif-guvence li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--giris-yazi);
}

.teklif-guvence strong {
  font-weight: 600;
  color: var(--beyaz);
}

/* Gönderimden sonra: üç adım ve e-posta uygulaması açılmazsa yedek yollar */
.teklif-sonuc {
  min-width: 0;
  padding: 40px 32px 32px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.teklif-sonuc:focus { outline: none; }

.teklif-sonuc-ikon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vurgu-soluk);
  color: var(--vurgu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.teklif-sonuc-ikon svg { width: 26px; height: 26px; }

.teklif-sonuc-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--murekkep);
}

.teklif-adimlar {
  list-style: none;
  counter-reset: adim;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.teklif-adimlar li {
  counter-increment: adim;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ikincil);
}

.teklif-adimlar li::before {
  content: counter(adim);
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--vurgu);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yazi-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--vurgu);
}

.teklif-adimlar strong {
  display: block;
  font-weight: 600;
  color: var(--murekkep);
}

.teklif-yedek {
  padding: 16px;
  border-radius: 6px;
  background: var(--ust-zemin);
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.teklif-yedek p { margin: 0; }
.teklif-yedek-baslik { font-weight: 600; color: var(--murekkep); }
.teklif-yedek-not { color: var(--ikincil); }
.teklif-yedek-not a { color: var(--mavi-koyu); font-weight: 600; }

.teklif-yedek-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ikincil-dugme {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: 4px;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ikincil-dugme svg { width: 17px; height: 17px; color: var(--mavi-koyu); }
.ikincil-dugme:hover { border-color: var(--vurgu); }

.teklif-yeni {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--yazi-govde);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mavi-koyu);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.teklif-kapat {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--zemin);
  color: var(--murekkep);
  box-shadow: 0 1px 3px var(--golge-guclu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.teklif-kapat svg { width: 18px; height: 18px; }
.teklif-kapat:hover { background: var(--ust-zemin); }

@media (max-width: 719px) {
  .teklif-ic { grid-template-columns: minmax(0, 1fr); }
  .teklif-sol { padding: 28px 20px 22px; gap: 12px; }
  .teklif-metin { padding-right: 36px; font-size: 15px; }
  /* Telefonda güvenceler tek satırlık başlıklarına iner; form ekrana daha erken gelir */
  .teklif-guvence { gap: 8px; padding-top: 12px; }
  .teklif-guvence .g-ac { display: none; }
  .teklif-iletisim { padding-top: 14px; }
  .teklif-form { padding: 24px 20px 0; }
  .teklif-sonuc { padding: 28px 20px 24px; }
  .yukle-alan { min-height: 120px; }
  dialog.teklif .teklif-gonder-alan {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 -20px;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--zemin);
    box-shadow: 0 -10px 18px rgba(12, 21, 33, 0.07);
  }
}

@media (max-width: 479px) {
  .alan-ikili { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .yukle-alan { transition: none; }
}

/* ===== Tipografi: büyük harf yalnızca sayfa ve bölüm başlıklarında, kart ve kutu başlıkları normal yazım ===== */
.kart-baslik,
.adim-baslik,
.hk-kutu h3,
.katalog-ad,
.katalog-alt,
.m-ad,
.y-ad,
.md-one-kart h3,
.md-yazi h3 { text-transform: none; }

.kart-tur { font-size: 23px; }
.adim-baslik { font-size: 25px; }
.hk-kutu h3 { font-size: 25px; }

/* ===== Hareket: fısıltı düzeyinde ===== */
/* Kaydırdıkça belirme (site.js "belir" ve "gorundu" sınıflarını ekler; JS yoksa her şey görünür kalır) */
.belir {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--gecikme, 0ms);
}

.belir.gorundu {
  opacity: 1;
  transform: none;
}

/* Kart görselleri üzerine gelince hafifçe yaklaşır */
.kart-gorsel img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.kart:hover .kart-gorsel img { transform: scale(1.04); }

/* Referans logoları üzerine gelince hafifçe kalkar */
.ref-logo img { transition: transform 0.25s ease; }
.ref-logo:hover img { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .belir { opacity: 1; transform: none; transition: none; }
  .kart-gorsel img, .ref-logo img { transition: none; }
  .kart:hover .kart-gorsel img, .ref-logo:hover img { transform: none; }
}

/* ===== Telefon: hizmet kartları daha kısa ===== */
@media (max-width: 599px) {
  .kartlar, .kartlar-genis { gap: 14px; }
  .kart { padding: 14px 14px 16px; }
  .kart-gorsel { aspect-ratio: 16 / 9; }
  .kart-baslik { margin-top: 14px; padding-top: 12px; }
  .kart-tek { font-size: 29px; }
  .kart-tur { font-size: 20px; }
  .kart-ozet { margin-top: 8px; padding-bottom: 12px; font-size: 15px; }
  .kart-detay { margin-top: 12px; gap: 6px; font-size: 14px; line-height: 1.45; }
  .kart-dugmeler { padding-top: 8px; }
  .hizmet-ic { gap: 24px; }
}

/* ===== Footer konum haritası: kuzeyi yukarıda, tepeden bakan düz koyu şehir haritası ===== */
.alt-harita {
  position: relative;
  min-width: 0;
}

/* Harita katmanı: footer'ın tamamını kaplar. --isaret-x / --isaret-y: tesisin konacağı nokta
   (0–1 arası oran ya da px); harita.js aynı değerleri okuyup harita merkezini oraya kaydırır. */
.harita-ekran {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0F1722;
  isolation: isolate;
  --isaret-x: 0.3;
  --isaret-y: 0.64;
}

/* Seçici bilerek güçlü: MapLibre'in kendi CSS'i (.maplibregl-map { position: relative })
   sonradan yüklenir ve bu kuralı ezmemeli */
.harita-ekran .harita-tuval,
.harita-ekran .harita-tuval.maplibregl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.harita-ekran.harita-hazir .harita-tuval { opacity: 1; }

.harita-ekran .harita-tuval .maplibregl-canvas { outline: none; }

/* Harita gelmeden önce (ve gelemezse) görünen zemin: düz pafta ızgarası */
.harita-izgara {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 183, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 183, 255, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 1;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.harita-hazir .harita-izgara { opacity: 0; }

/* Karartma: üst ve alt kenar footer zeminine erir; sağ yarı (bağlantı sütunları) daha koyu, tesisin çevresi açık */
.harita-vinyet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 17, 27, 0.9) 0%, rgba(10, 17, 27, 0.25) 18%, rgba(10, 17, 27, 0.2) 72%, rgba(10, 17, 27, 0.9) 100%),
    linear-gradient(90deg, rgba(10, 17, 27, 0.12) 0%, rgba(10, 17, 27, 0.12) 36%, rgba(10, 17, 27, 0.78) 56%, rgba(10, 17, 27, 0.84) 100%);
}

/* Harita gelmeden konumu gösteren sabit işaret; harita hazır olunca kaybolur */
.harita-bekleme {
  position: absolute;
  left: calc(var(--isaret-x) * 100%);
  top: calc(var(--isaret-y) * 100%);
  transform: translate(-50%, -100%);
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.harita-hazir .harita-bekleme { opacity: 0; }

/* İşaretçi: mavi disk içinde beyaz Tulpar atı, altında ince çubuk, zeminde nokta */
.harita-isaret {
  display: grid;
  justify-items: center;
  width: 48px;
  pointer-events: none;
}

.harita-isaret-disk {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #2F86EA, #1860C2);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 6px rgba(30, 111, 208, 0.22),
    0 10px 28px rgba(30, 111, 208, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.5);
  animation: harita-isaret-nefes 2.8s ease-in-out infinite;
}

.harita-isaret-at {
  display: block;
  width: 30px;
  height: 28px;
  background: #fff;
  -webkit-mask: url("../assets/ikon.svg") center / contain no-repeat;
  mask: url("../assets/ikon.svg") center / contain no-repeat;
}

.harita-isaret-cubuk {
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(125, 183, 255, 0.2));
}

.harita-isaret-taban {
  width: 8px;
  height: 4px;
  border-radius: 50%;
  background: rgba(125, 183, 255, 0.9);
  box-shadow: 0 0 12px 3px rgba(125, 183, 255, 0.55);
}

@keyframes harita-isaret-nefes {
  0%, 100% { box-shadow: 0 0 0 6px rgba(30, 111, 208, 0.22), 0 10px 28px rgba(30, 111, 208, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 11px rgba(30, 111, 208, 0.10), 0 12px 34px rgba(30, 111, 208, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5); }
}

/* MapLibre'in işaretçi sarmalayıcısı kendi dönüşümünü kullanır; ek boşluk bırakmasın */
.harita-tuval .maplibregl-marker { will-change: transform; }

/* Bilgi kartı: arkasında yumuşak koyu hale, sokak adları adres yazısına karışmasın */
.harita-kart {
  position: relative;
  margin-top: 0;
  color: var(--footer-yazi);
}

.harita-kart::before {
  content: "";
  position: absolute;
  inset: -26px -40px -30px;
  z-index: -1;
  border-radius: 28px;
  background: rgba(10, 17, 27, 0.78);
  filter: blur(24px);
  pointer-events: none;
}

.harita-etiket {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vurgu-acik);
}

.harita-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vurgu-acik);
  box-shadow: 0 0 0 0 rgba(125, 183, 255, 0.6);
  animation: harita-nokta 2s ease-out infinite;
}

@keyframes harita-nokta {
  0% { box-shadow: 0 0 0 0 rgba(125, 183, 255, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(125, 183, 255, 0); }
}

.harita-ad {
  margin: 0 0 6px;
  font-family: var(--yazi-baslik);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--beyaz);
}

.harita-adres {
  margin: 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: #C9D1D8;
}

.harita-koordinat {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--yazi-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #6F7B87;
}

.harita-dugmeler {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.harita-dugme {
  gap: 8px;
  min-height: 38px;
  padding-inline: 16px;
  border-radius: 6px;
  box-shadow: 0 8px 24px -8px rgba(30, 111, 208, 0.7);
}

.harita-dugme svg {
  width: 16px;
  height: 16px;
}

.harita-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 13px;
  color: var(--footer-yazi);
  text-decoration: none;
}

.harita-link svg {
  width: 14px;
  height: 14px;
  color: var(--vurgu-acik);
}

.harita-link:hover {
  color: var(--beyaz);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Pusula: haritayla birlikte döner */
.harita-pusula {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(17, 19, 21, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  z-index: 2;
  pointer-events: none;
}

.harita-pusula-igne {
  width: 24px;
  height: 24px;
  transition: transform 0.1s linear;
}

/* Konuma dön: kullanıcı haritayı oynattıysa görünür */
.harita-ortala {
  position: absolute;
  right: 12px;
  bottom: 30px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(17, 19, 21, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--beyaz);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
  z-index: 2;
}

.harita-tasindi .harita-ortala {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.harita-ortala:hover { background: rgba(30, 111, 208, 0.85); }

.harita-ortala svg {
  width: 18px;
  height: 18px;
}

/* Veri kaynağı (zorunlu atıf) */
.harita-kaynak {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
}
.alt-alt-sol { min-width: 0; }

.harita-kaynak a {
  color: inherit;
  text-decoration: none;
}

.harita-kaynak a:hover { color: rgba(255, 255, 255, 0.7); }

/* MapLibre'in kendi logosu ve el ile kaydırma uyarısı kutusu: markaya uydur */
.harita-tuval .maplibregl-ctrl-bottom-left,
.harita-tuval .maplibregl-ctrl-bottom-right { display: none; }

.harita-tuval .maplibregl-cooperative-gesture-screen {
  background: rgba(14, 18, 22, 0.78);
  color: var(--beyaz);
  font-family: var(--yazi-govde);
  font-size: 14px;
}

/* Telefon ve küçük tablet: tek sütun; footer üstte 200 px'lik açık harita şeridiyle başlar, tesis orada görünür */
@media (max-width: 959px) {
  .alt .kapsayici { padding-top: 220px; }
  .harita-ekran { --isaret-x: 0.5; --isaret-y: 130px; }
  .harita-vinyet {
    background:
      linear-gradient(180deg, rgba(10, 17, 27, 0.85) 0%, rgba(10, 17, 27, 0.15) 60px, rgba(10, 17, 27, 0.15) 150px, rgba(10, 17, 27, 0.7) 240px, rgba(10, 17, 27, 0.72) 92%, rgba(10, 17, 27, 0.92) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harita-isaret-disk, .harita-nokta { animation: none; }
  .harita-ekran .harita-tuval, .harita-izgara, .harita-bekleme, .harita-ortala, .harita-pusula-igne { transition: none; }
}

/* ===== SSS sayfası ===== */
/* Malzeme Rehberi ve Sık Sorulan Sorular: her konunun kendi rengi var (--renk), bölüm etiketi, simge, chevron ve
   kart kenarları o renkten; zeminler rengin çok açık tonuyla boyanır. Kurumsal için dar açılır menü. */

/* ---- Kurumsal: dar açılır menü (Çözümler'in geniş paneli yerine küçük liste) ---- */
.menu-ust[data-current] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--vurgu); }

@media (min-width: 960px) {
  .acilir.acilir-dar { position: relative; }
  .acilir-dar .alt-panel {
    left: 0;
    right: auto;
    padding: 0;
    min-width: 230px;
  }
  .acilir-dar .alt-ic {
    display: block;
    max-width: none;
    margin: 0;
    padding: 10px 0;
    border-radius: 6px;
  }
  .acilir-dar .alt-kategori { padding: 0; }
  .acilir-dar .alt-kategori a {
    width: 100%;
    min-height: 40px;
    padding: 0 20px;
  }
  .acilir-dar .alt-kategori a:hover {
    text-decoration: none;
    background: var(--kart-zemin);
    color: var(--murekkep);
  }
  .acilir-dar .alt-kategori a[aria-current="page"] {
    font-weight: 600;
    color: var(--vurgu);
  }
}

/* ---- Cevap içi liste, paragraf, kod ve bağlantılar ---- */
.cevap p + p,
.cevap ul + p,
.cevap p + ul { margin-top: 10px; }

.cevap ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ikincil);
}

.cevap p, .cevap ul { max-width: none; }
.cevap li::marker { color: var(--renk, var(--mavi)); }
.cevap strong { color: var(--murekkep); font-weight: 600; }

.cevap code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ust-zemin);
  color: var(--murekkep);
}

.cevap a {
  color: var(--renk, var(--mavi));
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cevap a:hover { color: var(--murekkep); }

.cevap .ayrinti {
  margin-top: 12px;
  font-size: 14px;
  color: var(--soluk);
}

/* Soru listesi: renkli chevron ve hover */
.soru summary svg { color: var(--renk, var(--mavi)); }
.soru summary:hover { color: var(--renk, var(--mavi)); }
.soru[open] summary { color: var(--renk, var(--murekkep)); }
.soru { scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px) + 12px); }

/* Renkli bölüm etiketi ve simge */
.bolum-etiket.renkli { color: var(--renk); }

.grup-ikon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--renk);
  color: var(--beyaz);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--renk) 30%, transparent);
}

.grup-ikon svg { width: 28px; height: 28px; }

/* ---- Giriş bandı: koyu zemin, sağda renk çubukları ---- */
.reh-giris {
  position: relative;
  overflow: hidden;
  background-color: var(--murekkep);
  background-image:
    radial-gradient(ellipse 60% 90% at 85% 40%, rgba(30, 111, 208, 0.42), transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 110%, rgba(124, 58, 237, 0.28), transparent 70%),
    repeating-linear-gradient(0deg, var(--giris-katman) 0 1px, transparent 1px 4px);
  color: var(--beyaz);
}

.reh-giris-ic {
  position: relative;
  z-index: 1;
  padding-block: clamp(44px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}

.reh-giris-metin {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.reh-giris h1 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--yazi-baslik);
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

.reh-giris .giris-metin a {
  color: var(--vurgu-acik);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reh-renkler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.reh-renkler li {
  width: 14px;
  height: 120px;
  border-radius: 7px;
  background: var(--renk);
  opacity: 0.9;
}

.reh-renkler li:nth-child(odd) { height: 150px; }
.reh-renkler li:nth-child(3n) { height: 96px; }

/* SSS giriş: bölüm atlama düğmeleri */
.ks-atla {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ks-atla a {
  min-height: 42px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--renk);
  color: var(--beyaz);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.ks-atla a:hover { filter: brightness(1.12); }
.ks-atla svg { width: 18px; height: 18px; }

/* ---- Kısa SSS: üç renkli bölüm ---- */
.ks-grup {
  background: color-mix(in srgb, var(--renk) 5%, white);
  border-top: 4px solid var(--renk);
  scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px));
}

.ks-grup-ic {
  padding-block: clamp(40px, 5vw, 64px);
  display: grid;
  gap: 24px;
}

.ks-grup-ust {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ks-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--renk);
}

.ks-giris {
  margin: 4px 0 0;
  font-size: 15.5px;
  color: var(--ikincil);
}

.ks-grup .sss-liste {
  max-width: none;
  border-top-color: color-mix(in srgb, var(--renk) 25%, transparent);
}

.ks-grup .soru { border-bottom-color: color-mix(in srgb, var(--renk) 25%, transparent); }

/* ---- Sorunuz yok mu ---- */
.sss-yok { background: var(--kart-zemin); }

.sss-yok-ic {
  padding-block: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: center;
}

.sss-yok .hk-baslik { text-align: left; }
.sss-yok .sss-alt { margin-top: 10px; }
.sss-yok-metin { display: grid; justify-items: start; }
.sss-yok-dugme { margin-top: 22px; }

.sss-yok-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.sss-yok-liste a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--murekkep);
  text-decoration: none;
}

.sss-yok-liste a:hover { color: var(--mavi); }
.sss-yok-liste svg { width: 18px; height: 18px; color: var(--vurgu); }

@media (max-width: 899px) {
  .sss-yok-ic { grid-template-columns: minmax(0, 1fr); }
  .reh-giris-ic { grid-template-columns: minmax(0, 1fr); }
  .reh-renkler { display: none; }
}

@media (max-width: 559px) {
  .ks-grup .soru summary { font-size: 16px; }
  .ks-grup-ust { align-items: flex-start; }
  .grup-ikon { width: 44px; height: 44px; }
  .grup-ikon svg { width: 24px; height: 24px; }
}


/* ===== Malzeme Rehberi ===== */
.konu-ikon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--renk);
  color: var(--beyaz);
}

.konu-ikon svg { width: 24px; height: 24px; }

/* 1 · Koşul kartları */
.ihtiyaclar { background: var(--zemin); }

.ihtiyaclar-ic {
  padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.ihtiyac-izgara {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ihtiyac {
  min-width: 0;
  padding: 22px 22px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--renk) 25%, transparent);
  border-top: 4px solid var(--renk);
  background: color-mix(in srgb, var(--renk) 7%, white);
  display: grid;
  align-content: start;
  gap: 10px;
}

.ihtiyac h3 {
  margin: 4px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--murekkep);
}

.ihtiyac p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ikincil);
}

.ihtiyac-malzeme {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ihtiyac-malzeme a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--renk);
  color: var(--beyaz);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ihtiyac-malzeme a:hover { filter: brightness(1.12); }

.ihtiyac-filtre {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--renk);
  text-decoration: none;
}

.ihtiyac-filtre svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.ihtiyac-filtre:hover svg { transform: translateX(3px); }

/* 2 · MJF mi FDM mi */
.tek-kars { background: var(--kart-zemin); }

.tek-kars-ic {
  padding-block: clamp(48px, 6vw, 80px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.tek-kutular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tek-kutu {
  min-width: 0;
  padding: 28px 28px 24px;
  border-radius: 12px;
  border-top: 5px solid var(--renk);
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
  display: grid;
  align-content: start;
  gap: 12px;
}

.tek-kutu h3 {
  margin: 6px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--renk);
}

.tek-ozet {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--murekkep);
}

.tek-ozet a { color: var(--renk); font-weight: 500; }

.tek-kutu ul {
  margin: 4px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ikincil);
}

.tek-kutu li::marker { color: var(--renk); }
.tek-kutu strong { color: var(--murekkep); font-weight: 600; }

.tek-icin {
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--renk) 9%, white);
  font-size: 15px;
  line-height: 1.5;
  color: var(--murekkep);
}

/* 3 · Liste başlığı */
.liste-ust { margin-bottom: 8px; }

/* 4 · Beş soru */
.bes-soru { background: var(--zemin); }

.bes-soru-ic {
  padding-block: clamp(48px, 6vw, 80px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.bes-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.bes-liste li {
  min-width: 0;
  padding: 22px 20px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--renk) 7%, white);
  border: 1px solid color-mix(in srgb, var(--renk) 22%, transparent);
  display: grid;
  align-content: start;
  gap: 10px;
}

.bes-no {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--renk);
  color: var(--beyaz);
  font-family: var(--yazi-baslik);
  font-size: 22px;
  font-weight: 600;
}

.bes-liste h3 {
  margin: 4px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--murekkep);
}

.bes-liste p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ikincil);
}

@media (max-width: 1099px) {
  .ihtiyac-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .tek-kutular { grid-template-columns: minmax(0, 1fr); }
  .bes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bes-liste li { padding: 16px; }
}

@media (max-width: 559px) {
  .ihtiyac-izgara { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bes-liste { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ihtiyac-filtre svg { transition: none; }
  .ihtiyac-filtre:hover svg { transform: none; }
}

/* ===================================================================
   Teknoloji sayfaları (mjf.html, fdm.html, lfam.html)
   Kısa sayfalar: giriş (metin + parça fotoğrafı), numaralı süreç,
   iki değer tablosu, malzeme çipleri, yüzey listesi, 4'lü örnek,
   tek sıralık yöntem karşılaştırması, SSS, kapanış.
   =================================================================== */

/* Giriş: solda metin, sağda parça fotoğrafı */
.tek-giris-ic {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 5.5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: 32px clamp(28px, 4vw, 56px);
}

.tek-giris-metin {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 16px;
}

.tek-giris-metin h1 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

.tek-maddeler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tek-maddeler li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--giris-yazi);
}

.tek-maddeler strong { color: var(--beyaz); font-weight: 600; }

.tek-maddeler svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: var(--vurgu);
  color: var(--beyaz);
}

.tek-giris-metin .giris-sayilar { margin-top: 4px; }
.tek-giris-metin .giris-sayilar li {
  padding-right: clamp(14px, 1.6vw, 22px);
  margin-right: clamp(14px, 1.6vw, 22px);
}
.tek-giris-metin .sayi { font-size: clamp(24px, 2.2vw, 30px); }

/* Koyu zeminde yer tutucu okunur kalsın */
.mat-giris .yer-tutucu,
.mat-cta .yer-tutucu {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--giris-yazi);
}

.tek-foto {
  margin: 0;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 48px rgba(0, 0, 0, 0.35);
}

.tek-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Bölüm kabı: sırayla beyaz ve açık gri zemin */
.tek-bolum { background: var(--zemin); }
.tek-bolum.gri { background: var(--kart-zemin); }

.tek-bolum-ic {
  padding-block: clamp(44px, 5.5vw, 68px);
  display: grid;
  gap: clamp(22px, 3vw, 32px);
}

.tek-ust {
  display: grid;
  gap: 8px;
  max-width: 760px;
}

.tek-aciklama {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--ikincil);
  text-wrap: pretty;
}

.tek-not {
  margin: 0;
  max-width: 76ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ikincil);
}

.tek-not strong { color: var(--murekkep); }

.tek-metin-link {
  color: var(--mavi-koyu);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Süreç: beş adım tek sırada */
.adimlar.bes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tek-bolum .adimlar { gap: 24px 20px; }
.tek-bolum .adim-ust svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
  background: var(--ust-zemin);
  color: var(--mavi-koyu);
}
.tek-bolum.gri .adim-ust svg { background: var(--zemin); }
.tek-bolum .adim-ust .adim-no { width: 40px; height: 40px; font-size: 20px; }
.tek-bolum .adim-baslik { font-size: 22px; }
.tek-bolum .adim-metin { max-width: none; font-size: 15px; }

/* Teknik değerler ve tasarım kuralları: iki kutu yan yana */
.tek-iki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px clamp(20px, 3vw, 40px);
}

.tek-kutu {
  min-width: 0;
  padding: 20px 22px 18px;
  border-radius: 8px;
  background: var(--zemin);
  box-shadow: 0 1px 2px var(--golge-ince);
}

.tek-bolum:not(.gri) .tek-kutu { background: var(--kart-zemin); box-shadow: none; }

.tek-kutu .md-ana-liste div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.tek-kutu .md-ana-liste dd .yer-tutucu { margin-right: 4px; }

.tek-kutu-not {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ikincil);
}

/* TULPAR yazıcılar (FDM sayfası) */
.tek-yazicilar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tek-yazici {
  min-width: 0;
  padding: 14px 14px 16px;
  border-radius: 8px;
  background: var(--kart-zemin);
  display: grid;
  align-content: start;
  gap: 6px;
}

.tek-yazici-gorsel {
  height: 190px;
  border-radius: 6px;
  background: var(--ust-zemin);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 12px;
  overflow: hidden;
}

.tek-yazici-gorsel img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.tek-yazici h3 {
  margin: 6px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.tek-yazici p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ikincil);
}

.tek-yazici a,
.tek-kiyas-kart a {
  justify-self: start;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mavi-koyu);
}

.tek-yazici a svg,
.tek-kiyas-kart a svg { width: 16px; height: 16px; }
.tek-yazici a:hover,
.tek-kiyas-kart a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Malzeme çipleri */
.tek-malzeme-gruplar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.tek-malzeme-gruplar.tek { grid-template-columns: minmax(0, 560px); }

.tek-malzeme-grup {
  min-width: 0;
  padding: 16px 18px 18px;
  border-radius: 8px;
  background: var(--kart-zemin);
  display: grid;
  align-content: start;
  gap: 10px;
}

.tek-bolum.gri .tek-malzeme-grup { background: var(--zemin); box-shadow: 0 1px 2px var(--golge-ince); }

.tek-malzeme-grup h3 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tek-malzeme-grup p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ikincil);
}

.tek-cipler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tek-cip {
  min-height: 38px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--murekkep);
  text-decoration: none;
  background: var(--zemin);
}

a.tek-cip:hover { border-color: var(--vurgu); color: var(--mavi-koyu); }

.tek-cip i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--renk);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* Yüzey ve son işlem: renk noktası, başlık, bir cümle */
.tek-pullar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tek-pul {
  min-width: 0;
  padding-top: 14px;
  border-top: 2px solid var(--cizgi);
  display: grid;
  align-content: start;
  gap: 6px;
}

.tek-pul-renk {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--renk);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  margin-bottom: 4px;
}

.tek-pul h3 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.tek-pul p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ikincil);
}

/* Parça örnekleri */
.tek-galeri-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tek-parca {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.tek-parca-gorsel {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ust-zemin);
  color: var(--soluk);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tek-bolum.gri .tek-parca-gorsel { background: var(--zemin); }

.tek-parca-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tek-parca-gorsel svg { width: 30px; height: 30px; }

.tek-parca-gorsel span {
  font-size: 12.5px;
  color: var(--soluk);
}

.tek-parca h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.tek-parca-bilgi {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tek-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--ust-zemin);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ikincil);
  text-decoration: none;
}

a.tek-etiket { color: var(--mavi-koyu); font-weight: 600; }
a.tek-etiket:hover { background: var(--cizgi); }

.tek-etiket i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--renk);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Hangi yöntem: dört yöntem tek sırada, üç satır değer */
.tek-kiyas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tek-kiyas-kart {
  min-width: 0;
  padding: 16px 18px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: var(--zemin);
  display: grid;
  align-content: start;
  gap: 8px;
}

.tek-kiyas-kart.bu {
  border-color: var(--vurgu);
  box-shadow: inset 0 3px 0 var(--vurgu);
}

.tek-kiyas-ad {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-family: var(--yazi-baslik);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.tek-kiyas-ad span {
  font-family: var(--yazi-govde);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soluk);
}

.tek-kiyas-kart.bu .tek-kiyas-ad span { color: var(--vurgu); }

.tek-kiyas-kart .md-ana-liste div {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  padding-block: 8px;
}

.tek-kiyas-kart .md-ana-liste dt { font-size: 13px; }
.tek-kiyas-kart .md-ana-liste dd { font-size: 14px; }

.tek-kiyas-alt {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 15.5px;
  font-weight: 500;
}

.tek-sss-alt {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 15px;
  color: var(--ikincil);
}

/* Dar ekranlar */
@media (max-width: 1099px) {
  .tek-giris-ic { grid-template-columns: minmax(0, 1fr); }
  .tek-foto { max-width: 640px; width: 100%; }
  .adimlar.bes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adimlar.bes .adim:nth-child(3) .adim-ust::after { display: none; }
  .tek-galeri-liste,
  .tek-yazicilar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tek-pullar,
  .tek-kiyas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
  .adimlar.bes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adimlar.bes .adim:nth-child(3) .adim-ust::after { display: flex; }
  .adimlar.bes .adim:nth-child(2n) .adim-ust::after { display: none; }
}

@media (max-width: 799px) {
  .tek-iki { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 699px) {
  .tek-galeri-liste {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .tek-parca { scroll-snap-align: start; }
  .tek-yazicilar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 559px) {
  .adimlar.bes { grid-template-columns: minmax(0, 1fr); }
  .tek-pullar,
  .tek-kiyas { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================================
   TULPAR FAB2 TASARIM KATMANI
   Tasarım dili "ölçü": sayfa bir teknik resim paftası gibi okunur. Mürekkep lacivert, mavi
   yalnızca tek vurgu (Teklif Al, bağlantı, odak, bölüm başlığındaki tek vurgulu söz),
   zemin milimetrik ızgaralı kanvas, beyaz "pafta" bölümleri, mono etiketler ve kendini
   çizen ölçü çizgileri. Aşağıdaki kurallar yukarıdaki temel kuralların üstüne yazılır.
   ===================================================================================== */

/* 1. Ortam: belli belirsiz, sabit soyut kompozisyon (assets/desen-soyut.svg: büyük daire, eğik dikdörtgen, tek diyagonal) ve soğuk beyaz kanvas üzerinde çok yumuşak bir ışık geçişi, ağır ağır kayar.
   Üstünde silik Tulpar atı gezer (aşağıda). */
html { background: var(--kanvas); }

body {
  background: transparent;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--kanvas);
  background-image:
    url("../assets/desen-soyut.svg"),
    radial-gradient(ellipse 48% 42% at 22% 18%, rgba(255, 255, 255, 0.9), transparent 70%);
  background-size: cover, 100% 100%;
  background-position: center;
}

@keyframes fab2-katman {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-10%, -7%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* Tulpar atı: ekranın tam ortasında, orta karar görünürlükte; yerinden çok az oynayarak nefes alır gibi süzülür */
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 50%;
  left: 50%;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  margin: calc(min(58vw, 760px) / -2) 0 0 calc(min(58vw, 760px) / -2);
  background:
    url("../assets/desen-at.svg") center / 82% no-repeat,
    radial-gradient(circle at 50% 48%, rgba(30, 111, 208, 0.16), rgba(30, 111, 208, 0.05) 45%, transparent 68%);
  opacity: 0.10;
  animation: fab2-at 60s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes fab2-at {
  from { transform: translate3d(-2vw, -1.5vh, 0); }
  to { transform: translate3d(2vw, 1.5vh, 0); }
}

@media (max-width: 700px) {
  body::after {
    width: 96vw;
    margin: -48vw 0 0 -48vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* 2. Bölüm ritmi: açık bölümler ya kanvas (ızgara görünür) ya da beyaz pafta. Art arda iki pafta gelmez. */
.hizmetler,
.fabrika,
.hk-bolum,
.hk-ref,
.sss,
.sihirbaz,
.md-bant,
.md-sss,
.y-modeller,
.tek-bolum.gri { background: transparent; }

.referanslar,
.surec,
.katalog {
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}

/* 3. Üst bantlar: duyuru lacivert ve sessiz; menü yarı saydam beyaz, kaydırınca arkası buğulanır */
.duyuru {
  background: var(--lacivert);
  color: var(--giris-yazi);
}

.duyuru .kapsayici { padding-block: 7px; }

.duyuru p {
  font-size: 13.5px;
  font-weight: 400;
}

.duyuru .telefon {
  font-family: var(--yazi-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--beyaz);
}

.duyuru-ikon { color: var(--vurgu-acik); }

.ust {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
  border-bottom: 1px solid var(--cizgi);
}

.menu > a,
.menu-ust {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* 4. Düğmeler: biraz daha yumuşak köşe, daha sakin harf aralığı; mavi düğme hafif parıltı taşır */
.dugme {
  border-radius: 6px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dugme-vurgu { box-shadow: 0 8px 18px -10px rgba(30, 111, 208, 0.7); }
.dugme-vurgu:hover { box-shadow: 0 10px 22px -10px rgba(30, 111, 208, 0.8); }

/* 5. Ana sayfa girişi: fotoğraf lacivert perdeyle, üstünde ince baskı katmanı dokusu; metin tek sütunda, ölçülü */
.giris { background-color: var(--lacivert); }

.giris::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
}

.giris-ic {
  gap: 22px;
  padding-block: clamp(64px, 9vw, 124px) clamp(36px, 5vw, 56px);
}

.giris h1 {
  max-width: 11em;
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.005em;
}

.giris-vaat {
  margin-top: 0;
  max-width: 44ch;
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--giris-yazi);
}

.artilar { font-size: clamp(15px, 1.4vw, 17px); }

.giris .giris-sayilar {
  width: 100%;
  margin-top: clamp(22px, 3vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--giris-ayrac);
}

.sayi { font-weight: 700; }

.sayi-ad {
  font-family: var(--yazi-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 6. Bölüm etiketi: mono yazı, önünde kısa mavi çizgi — bölüm başına tek mavi doz */
.bolum-etiket,
.fabrika-ust,
.kart-ust,
.ust-yazi,
.filtre-etiket,
.m-tek,
.harita-etiket,
.md-kucuk-baslik {
  font-family: var(--yazi-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.bolum-etiket,
.fabrika-ust,
.kart-ust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--soluk);
}

.bolum-etiket::before,
.fabrika-ust::before,
.kart-ust::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--vurgu);
}

.fabrika-ust { max-width: none; }

/* 7. Başlık hiyerarşisi: H1 büyük harf ve kalın; bölüm başlıkları normal yazım, yarı kalın Barlow Condensed */
.hizmet-baslik,
.surec-baslik,
.fabrika-baslik,
.katalog-baslik,
.katalog-alt,
.kapanis-baslik,
.hk-baslik,
.md-baslik,
.ks-baslik,
.teklif-baslik,
.ref-giris h2,
.y-ad {
  text-transform: none;
  letter-spacing: -0.012em;
  line-height: 1.02;
}

.hizmet-baslik,
.surec-baslik,
.fabrika-baslik,
.katalog-baslik,
.hk-baslik,
.md-baslik {
  font-size: clamp(32px, 3.9vw, 52px);
  font-weight: 600;
}

.katalog-alt { font-weight: 500; }

.mat-giris h1,
.tek-giris-metin h1,
.giris h1 { font-weight: 700; }

/* 8. Ölçü çizgisi: bölüm başlığının altında kendini çizen imza öğesi (|———|) */
.hizmet-baslik::after,
.surec-baslik::after,
.fabrika-baslik::after,
.katalog-baslik::after,
.hk-baslik::after,
.md-baslik::after {
  content: "";
  display: block;
  width: 96px;
  height: 9px;
  margin: 18px 0 0;
  background:
    linear-gradient(var(--cizgi-guclu), var(--cizgi-guclu)) left center / 100% 1px no-repeat,
    linear-gradient(var(--murekkep), var(--murekkep)) left center / 1px 100% no-repeat,
    linear-gradient(var(--murekkep), var(--murekkep)) right center / 1px 100% no-repeat;
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.hizmet-baslik::after,
.surec-baslik::after,
.katalog-baslik::after,
.hk-baslik::after { margin-inline: auto; transform-origin: center; }

.belir:not(.gorundu) .hizmet-baslik::after,
.belir:not(.gorundu) .surec-baslik::after,
.belir:not(.gorundu) .katalog-baslik::after,
.belir:not(.gorundu) .hk-baslik::after,
.belir:not(.gorundu) .md-baslik::after,
.fabrika-baslik.belir:not(.gorundu)::after,
.md-baslik.belir:not(.gorundu)::after { transform: scaleX(0); }

.katalog-baslik::after { margin-top: 14px; margin-bottom: 14px; }

/* 9. Kartlar: beyaz pafta, ince çerçeve, köşede mono sıra numarası; başlıklar mürekkep (mavi değil) */
.kart {
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  box-shadow: 0 1px 2px var(--golge-ince);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.kart:hover {
  border-color: var(--cizgi-guclu);
  box-shadow: 0 18px 36px -16px var(--golge-guclu);
}

.kart-gorsel {
  position: relative;
  border-radius: 6px;
}

.kart-baslik { border-top-color: var(--cizgi); }

.kart-tek {
  font-size: 32px;
  font-weight: 700;
  color: var(--murekkep);
}

.kart-tur {
  font-family: var(--yazi-govde);
  font-size: 15px;
  font-weight: 500;
  color: var(--soluk);
}

.kart-detay-link { color: var(--vurgu); }
.kart-detay-link:hover { color: var(--vurgu-hover); }

/* Ana sayfa kartlarında Detaylar: kartın ortasında, mavi çerçeveli beyaz hap; ucunda dolu mavi dairede ok.
   Üzerine gelince hap maviye dolar, daire beyaza döner, ok sağ yukarıdan sağa çevrilir. */
.hizmetler .kartlar .kart-dugmeler { justify-content: center; }

.hizmetler .kart-detay-link {
  flex: 0 0 auto;
  gap: 14px;
  min-height: 46px;
  padding: 0 5px 0 24px;
  border: 1.5px solid var(--vurgu);
  border-radius: 999px;
  background: var(--beyaz);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--murekkep);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.hizmetler .kart-detay-link svg {
  box-sizing: border-box;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: var(--vurgu);
  color: var(--beyaz);
  stroke-width: 2.2;
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, color 0.25s ease;
}

.hizmetler .kart-detay-link:hover,
.hizmetler .kart-detay-link:focus-visible {
  background: var(--vurgu);
  color: var(--beyaz);
  box-shadow: 0 14px 24px -14px rgba(30, 111, 208, 0.9);
  transform: translateY(-1px);
}

.hizmetler .kart-detay-link:hover svg,
.hizmetler .kart-detay-link:focus-visible svg {
  background: var(--beyaz);
  color: var(--vurgu);
  transform: rotate(0deg);
}

.hizmetler .kart-detay-link:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hizmetler .kart-detay-link,
  .hizmetler .kart-detay-link svg { transition: none; }
  .hizmetler .kart-detay-link:hover,
  .hizmetler .kart-detay-link:focus-visible { transform: none; }
}

/* 10. Süreç: ölçü zinciri — mono numaralar, ince çizgiyle birbirine bağlı dört adım */
.surec-ust { gap: 12px; }

.adim-no {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--cizgi-guclu);
  font-family: var(--yazi-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--murekkep);
}

.adim-ust svg { color: var(--ikincil); }
.adim-ust::after { background: var(--cizgi-guclu); }
.adim-baslik { font-size: 24px; font-weight: 600; }

/* 11. Fabrika rakamları ve genel değer etiketleri */
.fs-deger {
  font-weight: 700;
  color: var(--murekkep);
}

.fs-ad {
  font-family: var(--yazi-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 12. Referanslar: logolar kendi renklerinde, karartma yok */
.ref-logo img {
  filter: none;
  opacity: 1;
  transition: transform 0.25s ease;
}

/* 13. Koyu bölümler aynı ortamın gece hâli: lacivert zemin, çok silik ızgara */
.kapanis,
.mat-cta,
.md-ara-cagri {
  background-color: var(--lacivert);
  background-image: radial-gradient(ellipse 60% 120% at 12% 50%, var(--giris-parilti), transparent 70%);
}

.mat-giris,
.md-giris,
.tek-giris { background-color: var(--lacivert); }

.alt { background: #0A111B; }

.alt-tanitim { background: var(--lacivert); }

/* 14. Odak: her yerde marka mavisi, koyu zeminde açık mavi */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 3px;
}

/* 15. Hareket azaltma: ölçü çizgileri ve ışık sabit durur */
@media (prefers-reduced-motion: reduce) {
  .hizmet-baslik::after,
  .surec-baslik::after,
  .fabrika-baslik::after,
  .katalog-baslik::after,
  .hk-baslik::after,
  .md-baslik::after { transition: none; transform: none !important; }
}

/* 16. Hakkımızda kutuları: mavi üst şerit yerine mürekkep başlık çizgisi; ince çerçeve, kartlarla aynı köşe */
.hk-kutu {
  border: 1px solid var(--cizgi);
  border-top: 2px solid var(--murekkep);
  border-radius: 8px;
}

.hk-ilke .hk-kutu { background: var(--zemin); }

/* 17. Açılır menü sütun başlıkları: footer'daki beyaz başlık kuralı menüye sızıyordu (beyaz üstüne beyaz); menüde mono etiket */
.alt-panel .alt-baslik {
  margin: 0 0 12px;
  font-family: var(--yazi-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soluk);
}

/* Satır yüksekliği soldaki "Üretim tesisi" etiketiyle aynı (20 px): sütun başlıkları etiketle aynı hizada durur */
.alt-sutun .alt-baslik {
  font-family: var(--yazi-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.12em;
  color: var(--beyaz);
}

/* 18. Kapanış çağrıları ve SSS başlığı da bölüm başlığı kuralına uyar: normal yazım */
.mat-cta h2,
.md-ara-cagri h2,
.sss-baslik {
  text-transform: none;
  letter-spacing: -0.012em;
  line-height: 1.02;
}

.mat-cta h2 { font-size: clamp(32px, 3.9vw, 48px); }

/* 20. Giriş: "Bize ulaşın" — düğmenin altından açılan kartvizit: numara büyük ve kopyalanabilir,
   altında Ara / WhatsApp, en altta e-posta. Koyu buzlu cam, düğmeden büyüyerek açılır. */
.ulas { position: relative; }

.ulas-dugme { gap: 8px; }

.ulas-ok {
  width: 16px;
  height: 16px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ulas.acik .ulas-dugme { background: var(--giris-hover); }
.ulas.acik .ulas-ok { transform: rotate(180deg); }

.ulas-kart {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 6;
  width: min(372px, calc(100vw - 2 * var(--kenar)));
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 21, 33, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 36px 70px -24px rgba(0, 0, 0, 0.7);
  color: var(--beyaz);
  text-align: left;
  display: grid;
  gap: 12px;
  transform-origin: 28px 0;
  transform: translateY(-8px) scale(0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.08),
    opacity 0.26s ease,
    visibility 0s linear 0.42s;
}

.ulas.acik .ulas-kart {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.08),
    opacity 0.22s ease,
    visibility 0s;
}

/* Kart içeriği sırayla belirir */
.ulas-kart > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ulas.acik .ulas-kart > * { opacity: 1; transform: none; }
.ulas.acik .ulas-kart > :nth-child(2) { transition-delay: 0.08s; }
.ulas.acik .ulas-kart > :nth-child(3) { transition-delay: 0.14s; }
.ulas.acik .ulas-kart > :nth-child(4) { transition-delay: 0.2s; }
.ulas.acik .ulas-kart > :nth-child(5) { transition-delay: 0.26s; }
.ulas-eylemler { margin-top: 4px; }

.ulas-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ulas-etiket {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--yazi-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--giris-yazi);
}

.ulas-etiket::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--vurgu-acik);
}

.ulas-kapat {
  width: 32px;
  height: 32px;
  margin: -6px -6px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--giris-yazi);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ulas-kapat svg { width: 16px; height: 16px; }
.ulas-kapat:hover { background: rgba(255, 255, 255, 0.1); color: var(--beyaz); }

.ulas-satir {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ulas-satir + .ulas-satir {
  margin-top: -2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ulas-deger {
  min-width: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(27px, 2.3vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--beyaz);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}

.ulas-deger:hover { color: var(--vurgu-acik); }

.ulas-kopyala {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--giris-yazi);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ulas-kopyala svg { width: 17px; height: 17px; }
.ulas-kopyala:hover { background: rgba(255, 255, 255, 0.12); color: var(--beyaz); border-color: rgba(255, 255, 255, 0.3); }
.ulas-kopyala.kopyalandi { background: var(--vurgu); border-color: var(--vurgu); color: var(--beyaz); }

.ulas-bilgi {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--vurgu);
  color: var(--beyaz);
  font-family: var(--yazi-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ulas-bilgi.goster { opacity: 1; transform: none; }

.ulas-eylemler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ulas-eylem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--beyaz);
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.ulas-eylem svg { width: 19px; height: 19px; }

.ulas-ara {
  background: var(--vurgu);
  box-shadow: 0 10px 22px -12px rgba(30, 111, 208, 0.9);
}

.ulas-wa {
  background: #1FA855;
  box-shadow: 0 10px 22px -12px rgba(31, 168, 85, 0.9);
}

.ulas-eylem:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Telefonda kart düğme satırının altında tam genişlikte açılır */
@media (max-width: 640px) {
  .giris-dugmeler { position: relative; width: 100%; }
  .ulas { position: static; }
  .ulas-kart { width: 100%; transform-origin: 50% 0; }
  .ulas-deger { font-size: clamp(25px, 7.6vw, 31px); }
}

@media (prefers-reduced-motion: reduce) {
  .ulas-kart, .ulas-kart > *, .ulas-ok, .ulas-bilgi { transition: none; }
}

/* Kart giriş alanının alt kenarından taşabilsin (giriş alanı artık taşanı kırpmaz) */
.giris { overflow: visible; }
.giris-ic { z-index: 2; }

/* 21. Ana sayfa malzeme kataloğu: ürün fotoğrafları (assets/malzemeler, koyu grafit fon, 7:5).
   Fotoğraflı kutuda tam perde yok; ürün görünür kalır, ad ve alt satır alt kenardaki koyu geçişin üstünde durur.
   Fotoğrafı olmayan aileler (sekmelerde) numune çizimiyle eski görünümü korur. */
.katalog-baglanti { border-radius: 10px; }

.katalog-baglanti.foto { background: #242A31; }

.katalog-baglanti.foto .katalog-gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.katalog-baglanti.foto::after {
  background: linear-gradient(to top, rgba(12, 21, 33, 0.82) 0%, rgba(12, 21, 33, 0.35) 30%, rgba(12, 21, 33, 0) 52%);
  transition: opacity 0.3s ease;
}

.katalog-baglanti.foto:hover::after,
.katalog-baglanti.foto:focus-visible::after {
  background: linear-gradient(to top, rgba(12, 21, 33, 0.9) 0%, rgba(12, 21, 33, 0.45) 34%, rgba(12, 21, 33, 0.06) 60%);
}

.katalog-baglanti.foto .katalog-yazi {
  justify-content: flex-end;
  padding: 12px 12px clamp(12px, 1.4vw, 18px);
  text-shadow: 0 1px 2px rgba(12, 21, 33, 0.6);
}

.katalog-baglanti.foto:hover .katalog-gorsel,
.katalog-baglanti.foto:focus-visible .katalog-gorsel { transform: scale(1.05); }

@media (max-width: 519px) {
  .katalog-baglanti.foto .katalog-yazi { padding: 8px 8px 10px; }
  .katalog-baglanti.foto .katalog-ad { font-size: 20px; }
  .katalog-baglanti.foto .katalog-sayi { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .katalog-baglanti.foto:hover .katalog-gorsel,
  .katalog-baglanti.foto:focus-visible .katalog-gorsel { transform: none; }
}

/* 22. Ana sayfa H1: "Endüstriyel 3D Baskı" her ekranda tek satır */
.giris h1 {
  max-width: none;
  font-size: clamp(32px, 10.8vw, 88px);
}
.giris h1 .tek-satir { display: inline-block; white-space: nowrap; }

/* Mühendislik ve son işlem kartları: iki dikey fotoğraf kırpılmadan, aynı yükseklikte;
   görsel sütunu iki kartta aynı genişlikte, böylece metinler de aynı hizada */
#tarama .kart-gorsel,
#post .kart-gorsel {
  height: var(--dikey-h, 520px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
#tarama .kart-gorsel { aspect-ratio: 768 / 2048; }
#post .kart-gorsel { aspect-ratio: 768 / 2048; }

@media (min-width: 700px) {
  #tarama, #post {
    --dikey-h: 520px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
  }
  #tarama .kart-gorsel, #post .kart-gorsel { align-self: center; margin-inline: 0; }
  /* Başlıklar iki kartta da üstte, Detaylar bağlantısı altta */
  #tarama .kart-yatay-metin, #post .kart-yatay-metin { padding-block: 8px 0; }
  #tarama .kart-dugmeler, #post .kart-dugmeler { margin-top: auto; }
}
@media (min-width: 1100px) {
  #tarama, #post {
    --dikey-h: 460px;
  }
}

/* Kapanış bandı: Tulpar atı amblemi, metinle eylemler arasında büyük ve silik */
.kapanis {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kapanis::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 63%;
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 69.7 / 66.3;
  transform: translate(-50%, -50%);
  background: url("../assets/ikon.svg") center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
@media (max-width: 859px) {
  .kapanis::before {
    left: auto;
    right: -40px;
    width: 240px;
    transform: translateY(-50%);
    opacity: 0.12;
  }
}

/* Footer logosu: sağ altta, yasal bağlantıların yanında, %10 küçük */
.alt-alt-sag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.alt-logo { display: inline-flex; }
.alt .alt-logo img { height: 32.4px; width: auto; }
@media (max-width: 719px) {
  .alt-alt-sag { width: 100%; justify-content: flex-start; }
  .alt-logo { margin-left: auto; }
}

/* 23. Ana sayfa kapağı: tesis fotoğrafı img olarak öncelikli yüklenir (arka plan görseli geç keşfedilir);
   üstünde eskisiyle aynı lacivert perde. H1'in üstünde anahtar kelimeli küçük satır, altında üç satırlık vaat. */
.giris { background-image: none; }
.giris-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
}
.giris-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--foto-perde-koyu) 0%, var(--foto-perde-orta) 48%, var(--foto-perde-acik) 100%);
}
.giris h1 .tek-satir { display: block; }
.giris-h1-ust {
  display: block;
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  color: var(--vurgu-acik);
}
@media (max-width: 640px) {
  .giris-foto { object-position: 50% 70%; }
  .giris-perde { background: linear-gradient(180deg, var(--foto-perde-koyu) 0%, var(--foto-perde-orta) 70%, var(--foto-perde-acik) 100%); }
}
@media (max-width: 479px) {
  .giris-h1-ust { font-size: 14px; letter-spacing: 0.12em; margin-bottom: 12px; }
}

/* 24. İletişim sayfası: kurallar iletisim.css dosyasında (önek ilt-); eski .il- kuralları kaldırıldı. */

/* 25. Post-process: beş yüzey seviyesi sayfanın kendi yazısıyla; görsel altında örnek olarak durur */
.tek-pullar.bes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dt-seviye-gorsel { margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 1099px) { .tek-pullar.bes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tek-pullar.bes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Koyu giriş bandındaki metin içi bağlantılar */
.mat-giris .giris-metin a { color: var(--beyaz); font-weight: 600; text-underline-offset: 3px; }

/* 26. Değer şeritleri: değer tek başına alt satıra düşmez.
   Hizmet sayfalarında eşit sütunlu ızgara, her değerin solunda ince çizgi; sığmazsa düzenli satırlara geçer.
   Telefonda ana sayfa dahil 2 × 2. */
.tek-giris-metin .giris-sayilar {
  display: grid;
  width: 100%;
  align-self: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 18px 0;
}
.tek-giris-metin .giris-sayilar li,
.tek-giris-metin .giris-sayilar li:last-child {
  margin: 0;
  padding: 0 14px 0 16px;
  border-right: 0;
  border-left: 1px solid var(--giris-ayrac);
}
@media (max-width: 639px) {
  .giris-sayilar {
    display: grid;
    width: 100%;
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }
  .giris-sayilar li,
  .giris-sayilar li:last-child {
    margin: 0;
    padding: 0 12px 0 14px;
    border-right: 0;
    border-left: 1px solid var(--giris-ayrac);
  }
}
.tek-giris-metin .giris-sayilar .sayi { white-space: nowrap; font-size: clamp(22px, 2vw, 28px); }

/* 27. Referans şeridi: başlıksız; logolar her zaman kendi renklerinde (gri filtre ve üstündeki yazı kaldırıldı).
   Renk ve geçiş 12. maddeden gelir. */

/* 28. Okunabilirlik: gövde ve etiket yazıları 13 px'in altına inmez; büyük harfli mono etiketler 12,5 px */
.sayi-ad,
.fs-ad,
.ulas-etiket { font-size: 12.5px; }
.m-kullanim small,
.m-kullanim span,
.katalog-sayi,
.katalog-baglanti.foto .katalog-sayi,
.md-sektorler li,
.md-diger-liste small,
.y-degerler dt,
.yukle-alt,
.dosya-boyut,
.tek-etiket,
.ulas-bilgi,
.m-deger small { font-size: 13px; }

/* 29. Telefonda karşılaştırma tablosunun yana kaydığını söyleyen ipucu */
.md-kars-ipucu { display: none; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--mavi-koyu); }
@media (max-width: 719px) { .md-kars-ipucu { display: block; } }

/* 30. Erişilebilirlik: klavyeyle gelen için "İçeriğe atla" (yalnız odaklanınca görünür); telefonda dokunma hedefleri en az 40 px */
.atla {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 4px;
  background: var(--vurgu);
  color: var(--beyaz);
  font-weight: 600;
  text-decoration: none;
}
.atla:focus { top: 12px; }
main:focus { outline: none; }
@media (max-width: 719px) {
  .alt-sutun li a { display: inline-flex; align-items: center; min-height: 40px; }
  .md-yol a { display: inline-block; padding-block: 10px; }
  .duyuru .telefon { display: inline-block; padding-block: 9px; }
}

/* 31. Telefon menüsü açıkken arkadaki sayfa kaymaz */
@media (max-width: 959px) {
  html:has(.ust.acik) { overflow: hidden; }
}

/* 32. Yazdırma: menü, alt bilgi, harita ve düğmeler basılmaz; içerik beyaz kâğıtta siyah */
@media print {
  .duyuru, .ust, .alt, dialog, .atla, .giris-dugmeler, .kart-dugmeler, .md-ara-cagri, .kapanis, .mat-cta, .harita-ekran, .giris-foto, .giris-perde { display: none !important; }
  body { background: #fff; color: #000; }
  .giris, .mat-giris, .md-giris, .tek-giris, .lf-kapak { background: #fff !important; color: #000 !important; }
  .giris *, .mat-giris *, .md-giris * { color: #000 !important; }
  a { color: #000; text-decoration: none; }
  .belir { opacity: 1 !important; transform: none !important; }
}

/* Giriş başlığı: dar ekranda ilk satır ikiye bölünür */
.giris h1 .dar-kir { display: none; }
@media (max-width: 1023px) { .giris h1 .dar-kir { display: inline; } }

/* Giriş (geniş ekran): fotoğraf sağ yarıda perdesiz durur, fabrika binası ve tabelası bütün olarak görünür.
   Yazı solda düz lacivert zeminde kalır; fotoğrafın sol kenarı zemine, alt kenarı sayı şeridine doğru kararır. */
@media (min-width: 1200px) {
  .giris-foto {
    inset: 0 0 0 auto;
    width: 46%;
    object-position: 50% 88%;
  }
  .giris-perde {
    background:
      linear-gradient(0deg, rgba(12, 21, 33, 0.88) 0%, rgba(12, 21, 33, 0.55) 22%, rgba(12, 21, 33, 0) 42%),
      linear-gradient(90deg, var(--lacivert) 0%, var(--lacivert) 54%, rgba(12, 21, 33, 0.55) 62%, rgba(12, 21, 33, 0.08) 74%, rgba(12, 21, 33, 0) 100%);
  }
  .giris h1 { font-size: clamp(64px, 5.4vw, 84px); }
}

/* 33. Giriş: yaptığımız işler listesi. H1'in altında dört madde; her maddenin başında altın sarısı ikon,
   yanında kalın iş adı ve tek satırlık açıklaması. Eski tek cümlelik vaadin (.giris-vaat) yerini alır. */
:root { --altin: #F2B632; }
.giris-isler {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  width: 100%;
  max-width: 660px;
  display: grid;
  gap: 16px;
}
.giris-isler li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
.giris-isler svg { width: 34px; height: 34px; color: var(--altin); }
.giris-isler .gi-dolgu { fill: currentColor; fill-opacity: 0.2; }
.giris-isler .gi-yazi { display: grid; gap: 1px; min-width: 0; }
.giris-isler strong { font-size: clamp(17px, 1.4vw, 19px); font-weight: 400; line-height: 1.3; color: var(--beyaz); }
.giris-isler .gi-ac { font-size: 15.5px; line-height: 1.45; color: var(--giris-yazi); text-wrap: pretty; }
/* Alçak ekranlı dizüstülerde liste, Teklif Al düğmesini ekranın altına itmesin */
@media (min-width: 1200px) and (max-height: 820px) { .giris-ic { padding-top: 64px; } }
@media (min-width: 1200px) and (max-height: 700px) { .giris-ic { padding-top: 44px; } }
@media (max-width: 479px) {
  .giris-isler { gap: 14px; }
  .giris-isler li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 13px; align-items: start; }
  .giris-isler svg { width: 28px; height: 28px; margin-top: 2px; }
  .giris-isler .gi-ac { font-size: 14.5px; }
}


/* ============ MALZEME SİHİRBAZI (malzemeler.html) ============
   Mavi başlıkta sihirbazın adı ve üç adım; altında tek soru ve tek satır renkli seçenek. Her seçeneğin kendi rengi var. */
.sb {
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--zemin);
  box-shadow: 0 0 0 1px rgba(30, 111, 208, 0.22), 0 18px 40px -22px rgba(18, 76, 148, 0.5);
  scroll-margin-top: 110px;
}

/* Başlık: düz marka mavisi geçişi (kareli desen kullanıcı isteğiyle kaldırıldı) */
.sb-bas {
  padding: 14px clamp(16px, 2.5vw, 26px);
  background-color: var(--vurgu);
  background-image: linear-gradient(100deg, var(--mavi-koyu) 0%, var(--vurgu) 55%, #3B95F2 100%);
  color: var(--beyaz);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.sb-simge {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--beyaz);
  color: var(--vurgu);
  display: grid;
  place-items: center;
}
.sb-simge svg { width: 24px; height: 24px; }
.sb-kimlik { flex: 1 1 260px; min-width: 0; display: grid; gap: 1px; }
.sb-ad {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--beyaz);
}
.sb-tanim { margin: 0; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }

.sb-adimlar { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.sb-adimlar li { display: flex; align-items: center; gap: 6px; }
.sb-adimlar li + li::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.4); }
.sb-adim {
  min-height: 36px;
  padding: 0 12px 0 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--beyaz);
  font-family: var(--yazi-govde);
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sb-adim-no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  font-family: var(--yazi-mono);
  font-size: 13px;
  display: grid;
  place-items: center;
}
.sb-adim-no svg { width: 14px; height: 14px; }
.sb-adim:not(:disabled):hover { background: rgba(255, 255, 255, 0.28); }
.sb-adim.simdi { background: var(--beyaz); color: var(--mavi-koyu); }
.sb-adim.simdi .sb-adim-no { background: var(--vurgu); color: var(--beyaz); }
.sb-adim:disabled { cursor: default; opacity: 0.6; }
.sb-adim:focus-visible { outline: 2px solid var(--beyaz); outline-offset: 2px; }

.sb-govde {
  padding: 18px clamp(16px, 2.5vw, 26px) 18px;
  display: grid;
  gap: 14px;
}
.sb-govde.gecis > * { animation: sb-gir 0.22s ease both; }
@keyframes sb-gir {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

.sb-soru-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sb-soru {
  margin: 0;
  min-width: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--murekkep);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sb-soru:focus { outline: none; }
.sb-soru em { font-style: normal; color: var(--mavi); }
.sb-no {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vurgu);
  color: var(--beyaz);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}
.sb-no.tik { background: #15803D; }
.sb-no svg { width: 18px; height: 18px; }
.sb-sayac {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--vurgu-soluk);
  color: var(--mavi-koyu);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sb-sayac b { font-size: 16px; font-weight: 700; }

/* Seçenekler: hap biçimli, her biri kendi renginde */
.sb-secenekler { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb-sec {
  --renk: var(--vurgu);
  min-width: 0;
  min-height: 54px;
  padding: 0 12px 0 7px;
  border: 1.5px solid var(--cizgi-guclu);
  border-color: color-mix(in srgb, var(--renk) 38%, #fff);
  border-radius: 999px;
  background: var(--zemin);
  background: color-mix(in srgb, var(--renk) 7%, #fff);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.sb-sec-ikon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--renk);
  color: var(--beyaz);
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sb-sec-ikon svg { width: 23px; height: 23px; }
.sb-sec-ad { min-width: 0; line-height: 1.2; }
.sb-sec-adet {
  flex: none;
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--beyaz);
  color: var(--renk);
  font-family: var(--yazi-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sb-sec:not(:disabled):hover {
  border-color: var(--renk);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -12px var(--renk);
}
.sb-sec[aria-pressed="true"] { border-color: var(--renk); background: var(--renk); color: var(--beyaz); }
.sb-sec[aria-pressed="true"] .sb-sec-ikon { background: var(--beyaz); color: var(--renk); }
.sb-sec[aria-pressed="true"] .sb-sec-adet { background: rgba(255, 255, 255, 0.24); color: var(--beyaz); }
.sb-sec:disabled { cursor: not-allowed; border-color: var(--cizgi); background: var(--kart-zemin); color: var(--soluk); }
.sb-sec:disabled .sb-sec-ikon { background: var(--cizgi-guclu); }
.sb-sec:disabled .sb-sec-adet { color: var(--soluk); }

.sb-devam { margin-left: auto; min-height: 54px; padding-inline: 22px; border: 0; border-radius: 999px; gap: 8px; }
.sb-devam svg { width: 18px; height: 18px; }

.sb-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px; }
.sb-yardim { margin: 0; font-size: 14px; line-height: 1.45; color: var(--soluk); }
.sb-baglar { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.sb-bag {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ikincil);
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.sb-bag:hover { color: var(--vurgu); text-decoration: underline; text-underline-offset: 0.2em; }
.sb-bag svg { width: 15px; height: 15px; }

/* Sonuç özeti: solda başlık ve yanıt etiketleri, sağda teklif düğmesi */
.sb-ozet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.sb-ozet-metin { flex: 1 1 420px; min-width: 0; display: grid; gap: 12px; }
.sb-yanitlar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sb-ozet-eylem { display: grid; justify-items: center; gap: 4px; }
.sb-yanit {
  --renk: var(--vurgu);
  min-height: 36px;
  padding: 0 13px 0 4px;
  border: 0;
  border-radius: 999px;
  background: var(--renk);
  color: var(--beyaz);
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.sb-yanit:hover { filter: brightness(1.12); }
.sb-yanit-ikon { width: 28px; height: 28px; border-radius: 50%; background: var(--beyaz); color: var(--renk); display: grid; place-items: center; }
.sb-yanit-ikon svg { width: 17px; height: 17px; }

/* Büyük format önerisi: lacivert bant, solda fotoğraf */
.sb-lfam {
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--lacivert);
  color: var(--beyaz);
  text-decoration: none;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 clamp(18px, 3vw, 32px);
}
.sb-lfam img { width: 100%; height: 100%; min-height: 132px; object-fit: cover; display: block; }
.sb-lfam-metin { min-width: 0; padding-block: 18px; display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--giris-yazi); }
.sb-lfam-etiket {
  font-family: var(--yazi-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vurgu-acik);
}
.sb-lfam strong {
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--beyaz);
}
.sb-lfam-git {
  margin-right: clamp(18px, 3vw, 32px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb-lfam-git svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.sb-lfam:hover .sb-lfam-git svg { transform: translateX(3px); }

/* Liste başlığı: solda başlık, sağda adet */
.liste-ustu {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.sonuc-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--murekkep);
}
.liste-ipucu { margin: 0; font-size: 14px; }
.liste-ipucu:empty { display: none; }
.liste-adet {
  margin: 0 0 0 auto;
  font-family: var(--yazi-mono);
  font-size: 13px;
  color: var(--soluk);
  font-variant-numeric: tabular-nums;
}

/* Kartta seçilen koşulların karşılığı */
.m-uyum { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; }
.m-uyum > span:not(.gizli) {
  padding: 3px 8px 3px 6px;
  border-radius: 4px;
  background: var(--vurgu-soluk);
  color: var(--mavi-koyu);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.m-uyum svg { flex: none; width: 12px; height: 12px; }

.bos-sonuc p { max-width: 52ch; }
.bos-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 899px) {
  .sb-lfam { grid-template-columns: 150px minmax(0, 1fr); }
  .sb-lfam-git { grid-column: 2; margin: -8px 0 18px; }
  .sb-devam { margin-left: 0; }
}
@media (max-width: 559px) {
  .sb-bas { padding-block: 12px; }
  .sb-simge { width: 38px; height: 38px; }
  .sb-ad { font-size: 23px; }
  .sb-tanim { font-size: 14px; }
  .sb-adimlar { width: 100%; }
  .sb-adimlar li { flex: 1 1 auto; }
  .sb-adimlar li + li::before { flex: 1 1 8px; width: auto; }
  .sb-adim { padding: 0 10px 0 4px; font-size: 13px; }
  .sb-govde { padding-block: 16px; gap: 12px; }
  .sb-soru { align-items: flex-start; }
  .sb-no { width: 30px; height: 30px; font-size: 19px; }
  /* Seçenekler iki sütun; uzun ad iki satıra iner */
  .sb-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sb-sec { min-height: 52px; padding: 5px 8px 5px 5px; border-radius: 26px; gap: 7px; font-size: 14px; }
  .sb-sec-ikon { width: 36px; height: 36px; }
  .sb-sec-ikon svg { width: 21px; height: 21px; }
  .sb-sec-adet { margin-left: auto; min-width: 0; padding: 2px 6px; font-size: 12px; }
  .sb-devam { grid-column: 1 / -1; min-height: 50px; }
  .sb-ozet-eylem { width: 100%; }
  .sb-ozet .dugme { width: 100%; }
  .sb-lfam { grid-template-columns: minmax(0, 1fr); }
  .sb-lfam img { height: 150px; min-height: 0; }
  .sb-lfam-metin { padding: 16px 16px 0; }
  .sb-lfam-git { grid-column: 1; margin: 12px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-govde.gecis > * { animation: none; }
  .sb-adim, .sb-sec, .sb-sec-ikon, .sb-yanit, .sb-lfam-git svg { transition: none; }
  .sb-sec:not(:disabled):hover, .sb-lfam:hover .sb-lfam-git svg { transform: none; }
}

/* 34. Çözümler menüsü: "Öne çıkan malzemeler" sütunu kaldırıldı. Panel üç sütun (tanıtım + iki liste),
   içerik alanının sol kenarına hizalı ve daha dar; böylece iki kısa liste boşlukta kaybolmaz. */
@media (min-width: 960px) {
  .acilir:not(.acilir-dar) .alt-ic {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(0, 1fr);
    max-width: 880px;
    margin-left: max(0px, calc((100% - (var(--icerik-genislik) - 2 * var(--kenar))) / 2));
    margin-right: auto;
  }
  .acilir:not(.acilir-dar) .alt-tanitim { min-height: 360px; }
}

/* 35. Çözümler menüsü (masaüstü): tek parça koyu mavi yüzey. Solda çivit mavisi, sağa doğru kraliyet mavisi;
   sağ üst köşede gök mavisi ışık, parçanın arkasında sahne ışığı, üst kenarda menü bandının gölgesi.
   Sağ altta çok soluk Tulpar atı (assets/ikon.svg, %7 opaklık). Bağlantılar beyaz; üzerine gelinen ve
   bulunulan sayfa açık altın, önünde kısa altın çizgi. Panel beyaz menü bandından, lacivert girişten ve
   açık sayfa zemininden ayrışır. Telefondaki açılır menü ve Kurumsal menüsü beyaz kalır. */
@media (min-width: 960px) {
  .acilir:not(.acilir-dar) .alt-ic {
    --menu-altin: #FFCC5C;
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(ellipse 48% 78% at 106% -10%, rgba(120, 184, 255, 0.36), transparent 72%),
      radial-gradient(ellipse 36% 60% at 17% 96%, rgba(84, 160, 245, 0.6), transparent 74%),
      linear-gradient(112deg, #10255A 0%, #163F8C 46%, #1B58B6 100%);
    box-shadow: inset 0 12px 16px -14px rgba(3, 10, 26, 0.6), 0 1px 2px var(--golge-ince), 0 28px 60px -10px rgba(8, 22, 52, 0.5);
    outline: 1px solid rgba(255, 255, 255, 0.14);
    outline-offset: -1px;
  }
  /* Tulpar atı: sağ alt köşede, panelin kenarından taşarak kırpılır */
  .acilir:not(.acilir-dar) .alt-ic::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -30px;
    bottom: -64px;
    width: 350px;
    aspect-ratio: 69.7 / 66.3;
    background: url("../assets/ikon.svg") center / contain no-repeat;
    opacity: 0.07;
    pointer-events: none;
  }
  .acilir:not(.acilir-dar) .alt-tanitim {
    z-index: 1;
    background: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .acilir:not(.acilir-dar) .alt-tanitim-metin { color: rgba(255, 255, 255, 0.82); }
  .acilir:not(.acilir-dar) .alt-kategori { position: relative; z-index: 1; }
  .acilir:not(.acilir-dar) .alt-panel .alt-baslik {
    color: #D6E7FF;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .acilir:not(.acilir-dar) .alt-kategori a {
    position: relative;
    color: var(--beyaz);
    font-weight: 500;
    transition: color 0.15s ease, padding-left 0.18s ease;
  }
  .acilir:not(.acilir-dar) .alt-kategori a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background: var(--altin);
    transition: width 0.18s ease;
  }
  .acilir:not(.acilir-dar) .alt-kategori a:hover,
  .acilir:not(.acilir-dar) .alt-kategori a:focus-visible,
  .acilir:not(.acilir-dar) .alt-kategori a[aria-current="page"] {
    color: var(--menu-altin);
    text-decoration: none;
    padding-left: 18px;
  }
  .acilir:not(.acilir-dar) .alt-kategori a:hover::before,
  .acilir:not(.acilir-dar) .alt-kategori a:focus-visible::before,
  .acilir:not(.acilir-dar) .alt-kategori a[aria-current="page"]::before { width: 12px; }
  .acilir:not(.acilir-dar) .alt-kategori a:focus-visible { outline-color: var(--beyaz); }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  .acilir:not(.acilir-dar) .alt-kategori a,
  .acilir:not(.acilir-dar) .alt-kategori a::before { transition: none; }
}

/* Sayfa yolu (Ana sayfa / … / sayfa): telefonda bağlantılar dokunma payı aldığı için son öğe yukarıda kalıyordu */
.md-yol ol { align-items: center; }

/* Kapanış bandı (teknoloji, mühendislik, malzeme ve yazıcı sayfaları): ana sayfadaki gibi soluk Tulpar atı */
.mat-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mat-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 63%;
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 69.7 / 66.3;
  transform: translate(-50%, -50%);
  background: url("../assets/ikon.svg") center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
@media (max-width: 859px) {
  .mat-cta::before {
    left: auto;
    right: -40px;
    width: 240px;
    transform: translateY(-50%);
    opacity: 0.12;
  }
}

/* Yazı tipleri weerg.com ile aynı (6 Kasım): başlık Abel ("Tulpar Baslik", tek ağırlık 400), gövde Roboto.
   Abel'ın tek ağırlığı var; kalın (600+) istenen başlıklar ve büyük rakamlar tarayıcının kalınlaştırmasıyla belirgin durur. */
/* Abel ince bir yazı tipi: başlıkları biraz daha dolgun ve belirgin göstermek için harflere ince bir dış çizgi */
h1, h2, h3, h4 { -webkit-text-stroke: 0.018em currentColor; paint-order: stroke fill; }
h2, h3, h4 { letter-spacing: 0.012em; }

/* Koyu (siyah-mavi) giriş başlıkları LFAM sayfasındaki başlıkla aynı: Abel, kalın, büyük harf, aynı ölçü ve aralık */
.mat-giris h1, .tek-giris-metin h1, .reh-giris h1, .yz-giris h1, .bos h1 {
  font-family: var(--yazi-baslik);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* 36. 7 Kasım denetim düzeltmeleri */
/* Telefonda 5 adımlı süreçlerde 3. adımın bağlantı çizgisi kalıyordu: 959 px kuralı (nth-child(3) display:flex)
   559 px'teki genel gizlemeden daha özgül olduğu için kazanıyordu. Tek sütunda hiçbir adımda çizgi yok. */
@media (max-width: 559px) {
  .adimlar.bes .adim:nth-child(3) .adim-ust::after { display: none; }
}
/* Çözümler menüsü: soldaki parça fotoğrafı panelin alt kenarında kesilmesin; parça panelin tabanına oturur */
@media (min-width: 960px) {
  .alt-tanitim img { bottom: 0; width: min(72%, 232px); }
}
/* Referans şeridi: logolar renkli kalır (kullanıcı kararı); yalnız görsel ağırlık dengelendi.
   Yuvarlak amblemler biraz büyük (okunsun), geniş renkli yazı logoları biraz alçak. */
.ref-logo.yuvarlak img { height: calc(var(--h, 44px) + 4px); }
.ref-logo.genis img { height: calc(var(--h, 31px) - 5px); }
@media (max-width: 639px) {
  .ref-logo.yuvarlak img { height: calc((var(--h, 44px) + 4px) * 0.8); }
  .ref-logo.genis img { height: calc((var(--h, 31px) - 5px) * 0.8); }
}
/* Malzeme karşılaştırma tablosundaki "3D · FDM" etiketi 11,5 px'ti; alt sınır 12,5 px */
.md-kars thead .etiket { font-size: 12.5px; }

/* Malzeme sayfasında gizli "bulunamadı" başlığı h1 değil (sayfada tek h1 kalsın) */
.md-yok .md-yok-baslik { margin: 0; }

/* 37. Kurumsal tek sayfa (8 Kasım): Hakkımızda + Belgelerimiz + SSS aynı sayfada; menüde Kurumsal tek bağlantı.
   SSS'te üç kategori yan yana, sitenin kendi dilinde: renkli kart ve ikon kutusu yok; ince çizgiler, mono numara,
   mürekkep başlık; mavi yalnız üzerine gelince ve açık soruda. */
.hk-atla { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14.5px; }
.hk-atla span { font-family: var(--yazi-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--giris-yazi); }
.hk-atla a { color: var(--beyaz); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.hk-atla a:hover { text-decoration-color: var(--beyaz); }
.hk-biz, .hk-belgeler, .hk-sss { scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px)); }
.hk-belgeler .bl-sayfa-ic { gap: clamp(20px, 2.6vw, 32px); }
.hk-sss-giris { margin: 10px auto 0; max-width: 70ch; text-align: center; font-size: 16px; line-height: 1.6; color: var(--ikincil); }
.hk-sss-giris a { color: var(--mavi); font-weight: 500; }
.ks-sutunlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 56px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px); }
.ks-sutun { min-width: 0; scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px) + 12px); }
.ks-sutun + .ks-sutun { padding-left: clamp(28px, 3.4vw, 56px); margin-left: calc(-1 * clamp(28px, 3.4vw, 56px)); border-left: 1px solid var(--cizgi); }
.ks-sutun-ust { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 2px solid var(--murekkep); }
.ks-sutun-baslik { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(24px, 2vw, 28px); font-weight: 600; line-height: 1.1; color: var(--murekkep); }
.ks-sutun .ks-giris { margin: 0; font-size: 14.5px; color: var(--soluk); }
.ks-sutun .sss-liste { max-width: none; border-top: 0; }
.ks-sutun .soru { border-bottom: 1px solid var(--cizgi); }
.ks-sutun .soru summary { font-size: 15.5px; font-weight: 500; padding: 14px 0; gap: 14px; }
.ks-sutun .soru summary svg { color: var(--soluk); }
.ks-sutun .soru summary:hover, .ks-sutun .soru summary:hover svg { color: var(--mavi); }
.ks-sutun .soru[open] summary { color: var(--murekkep); font-weight: 600; }
.ks-sutun .soru[open] summary svg { color: var(--mavi); }
.ks-sutun .soru .cevap { font-size: 14.5px; }
@media (max-width: 1099px) {
  .ks-sutunlar { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ks-sutun + .ks-sutun { padding-left: 0; margin-left: 0; border-left: 0; }
}

/* 38. Kurumsal girişi = Biz kimiz (8 Kasım): solda metin, sağda tesis fotoğrafı; Yetkinlikler bölümü kaldırıldı */
.hk-giris::after { display: none; }
@media (min-width: 1000px) {
  .hk-giris-ic { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; column-gap: clamp(32px, 4vw, 64px); }
}
.hk-giris-metin { min-width: 0; display: grid; justify-items: start; gap: 16px; }
.hk-giris-metin .giris-metin + .giris-metin { margin-top: -4px; }
.hk-giris-foto { margin: 0; min-width: 0; width: 100%; }
.hk-giris-foto img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 100%; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 28px 60px -24px rgba(0, 0, 0, 0.7); }
@media (max-width: 999px) {
  .hk-giris-foto { max-width: 640px; }
  .hk-giris-foto img { aspect-ratio: 16 / 10; }
}

/* 36. Ana sayfa üretim kartları 4'ten 6'ya çıktı (CNC, SLM, LFAM / MJF, FDM, SLA).
   Masaüstünde 3 + 3: kartlar 4'lü sıradan daha geniş, görsel kutusu daha büyük; tablette 2'li, telefonda tek sütun.
   Alt yapı (subgrid) aynı: her sıradaki görsel, başlık, özet, maddeler ve Detaylar hizalı kalır. */
.kartlar.kartlar-alti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 1099px) {
  .kartlar.kartlar-alti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 599px) {
  .kartlar.kartlar-alti { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Görsel yer tutucu (SLM ve SLA kartları): fotoğraf gelene kadar kesik çizgili pafta kutusu, mono etiket.
   Fotoğraf eklenince .kart-gorsel-yer sınıfı kaldırılıp diğer kartlardaki <img> kalıbı kullanılır. */
.kart-gorsel-yer {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(30, 111, 208, 0.045) 14px 15px),
    linear-gradient(180deg, #F6F8FA, #DAE0E6);
  outline: 1px dashed var(--cizgi-guclu);
  outline-offset: -8px;
}

.kart-gorsel-yer span {
  font-family: var(--yazi-mono);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ikincil);
}

/* Malzeme Rehberi: fotoğrafı henüz gelmemiş SLM/SLA kartı (10 Kasım). Diğer kartlardaki parça fotoğrafıyla aynı beyaz 3:2 kadraj;
   kesik çizgili iç çerçeve, ortada mono etiket. Fotoğraf gelince malzeme-veri.js'te yer yerine foto yazılır. */
.m-gorsel.m-yer { display: grid; place-items: center; text-align: center; padding: 16px; color: var(--ikincil);
  background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi); outline: 1px dashed var(--cizgi-guclu); outline-offset: -10px; }
.m-gorsel.m-yer > span { font-family: var(--yazi-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; max-width: 26ch; }
.m-gorsel.m-yer b { display: block; font-weight: 500; color: var(--murekkep); margin-bottom: 4px; }