/* =====================================================================
   ATİ KALIP İSKELE — web sitesi

   Aynı marka, ayrı tasarım. Katalog basılı bir nesne: soğuk beyaz
   kağıt, iki sütunlu sabit sayfa düzeni, sayfa numarası. Site ise
   ekranda okunuyor; burada kağıt sıcak kırık beyaz, bölümler
   numaralandırılmış, ürünler ızgara yerine dizin satırlarında
   duruyor ve sayfanın üstünde ilerleme çizgisi var. Ortak kalan:
   Archivo + Inter, tek vurgu rengi #F82800 ve fotoğrafa renk
   bulaştırmama kuralı.

   Hareket GPU dostu: yalnız transform ve opacity. prefers-reduced-motion
   açıkken tamamı kapanıyor.
   ===================================================================== */

/* ---------------- Yazı tipleri ---------------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("font/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("font/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("font/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("font/inter-latin.woff2") format("woff2");
}

/* ---------------- Değişkenler ---------------- */
:root {
  --turuncu:   #F82800;
  --turuncu-2: #FF4A24;

  --murekkep:  #16181A;
  --murekkep-2:#41444A;
  --murekkep-3:#72757B;
  --cizgi:     #E4E1DB;
  --zemin:     #F1EEE8;   /* sıcak kırık beyaz — katalogdaki soğuk griden ayrı */
  --kagit:     #FAF8F5;
  --kart:      #FFFFFF;

  --koyu:      #121416;
  --koyu-2:    #1C1F22;

  --en:        1280px;      /* içerik genişliği */
  --bosluk:    clamp(20px, 5vw, 64px);
  --bant:      68px;        /* üst bant yüksekliği */

  --yay:       cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--murekkep);
  background: var(--kagit);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.kap { width: min(100% - var(--bosluk)*2, var(--en)); margin-inline: auto; }

/* Ekran okuyucu için; görsel olarak gizli */
.gizli {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------- Tipografi ---------------- */
h1, h2, h3, h4 {
  font-family: "Archivo", sans-serif; font-weight: 800;
  line-height: 1.03; letter-spacing: -.03em; text-transform: uppercase;
}
.dev    { font-size: clamp(38px, 7.4vw, 92px); }
.buyuk  { font-size: clamp(30px, 4.6vw, 58px); }
.orta   { font-size: clamp(22px, 2.6vw, 34px); }
.kucuk  { font-size: clamp(17px, 1.6vw, 21px); }

.etiket {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--turuncu);
}
.giris { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.68; color: var(--murekkep-2); font-weight: 300; }
.giris strong { font-weight: 600; color: var(--murekkep); }

/* ---------------- Düğmeler ---------------- */
.dugme {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 28px; border: 1.5px solid transparent;
  transition: background .25s var(--yay), color .25s var(--yay),
              border-color .25s var(--yay), transform .25s var(--yay);
}
.dugme:hover { transform: translateY(-2px); }
.dugme-dolu   { background: var(--turuncu); color: #fff; }
.dugme-dolu:hover { background: #fff; color: var(--murekkep); }
.dugme-cizgi  { border-color: rgba(255,255,255,.45); color: #fff; }
.dugme-cizgi:hover { border-color: #fff; background: #fff; color: var(--murekkep); }
.dugme-koyu   { border-color: var(--murekkep); color: var(--murekkep); }
.dugme-koyu:hover { background: var(--murekkep); color: #fff; }
.dugme .ok { transition: transform .25s var(--yay); }
.dugme:hover .ok { transform: translateX(4px); }

/* =====================================================================
   ÜST BANT
   ===================================================================== */
.bant {
  position: fixed; inset: 0 0 auto; z-index: 90; height: var(--bant);
  display: flex; align-items: center;
  transition: background .35s var(--yay), box-shadow .35s var(--yay);
}
.bant::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,14,.72), rgba(10,12,14,0));
  transition: opacity .35s var(--yay);
}
.bant.sabit { background: var(--kagit); box-shadow: 0 1px 0 var(--cizgi); }
.bant.sabit::before { opacity: 0; }

.bant .kap { display: flex; align-items: center; gap: 28px; position: relative; }
.marka { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.marka img { height: 34px; width: auto; }
.marka .ad {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: .04em; color: #fff; line-height: 1;
  transition: color .35s var(--yay);
}
.marka .ad span { display: block; font-size: 8.5px; letter-spacing: .26em; font-weight: 600; opacity: .72; margin-top: 3px; }
.bant.sabit .marka .ad { color: var(--murekkep); }
.bant.sabit .marka img.beyaz { display: none; }
.marka img.renkli { display: none; }
.bant.sabit .marka img.renkli { display: block; }

.gezinme { display: flex; gap: 26px; align-items: center; }
.gezinme a {
  font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: #fff;
  position: relative; padding: 4px 0; transition: color .3s var(--yay);
}
.bant.sabit .gezinme a { color: var(--murekkep); }
.gezinme a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--turuncu); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--yay);
}
.gezinme a:hover::after, .gezinme a[aria-current]::after { transform: scaleX(1); }

/* Bantta iletişim: e-posta üstte ince, telefon altta kalın.
   İkisi de tek tıkla açılıyor; mobilde yerini hamburger menüye
   bırakıyor (menünün içinde ikisi de var). */
.bant-iletisim { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.25; }
.bant-iletisim > a { white-space: nowrap; transition: color .25s var(--yay); }
.bant-iletisim > a:first-child {
  font-size: 11.5px; letter-spacing: .02em; color: #C7C9CB; font-weight: 400;
}
.bant-iletisim > a:first-child:hover { color: var(--turuncu); }
.bant.sabit .bant-iletisim > a:first-child { color: var(--murekkep-3); }
.bant-tel {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; color: #fff;
}
.bant-tel:hover { color: var(--turuncu); }
.bant.sabit .bant-tel { color: var(--murekkep); }

/* Menü içi iletişim yalnız mobil menüde açılır (aşağıdaki medya sorgusu) */
.menu-iletisim { display: none; }

.menu-dugme { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-dugme span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; transition: .3s var(--yay); }
.bant.sabit .menu-dugme span { background: var(--murekkep); }

@media (max-width: 960px) {
  .gezinme {
    position: fixed; inset: var(--bant) 0 auto; background: var(--koyu);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 20px;
    transform: translateY(-120%); transition: transform .4s var(--yay);
  }
  .gezinme.acik { transform: translateY(0); }
  .gezinme a { color: #fff !important; padding: 14px var(--bosluk); font-size: 16px; }
  .menu-dugme { display: block; }
  .bant-iletisim { display: none; }
}

/* =====================================================================
   KAHRAMAN — tam ekran video
   ===================================================================== */
.kahraman { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--koyu); }
/* Kahraman bir flex kutusu. Video ve perde zaten mutlak konumlu;
   sütun yönünde dizmek kabın kendi genişliğini ve orta hizasını
   korumasını sağlıyor (satır yönünde kap daralıyordu). */
.kahraman { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.kahraman-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  /* Yavaş yakınlaşma: sabit videoya hareket hissi katar */
  animation: yakinlas 28s ease-in-out infinite alternate;
}
@keyframes yakinlas { from { transform: scale(1.04); } to { transform: scale(1.14); } }

.kahraman-perde {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,12,14,.92) 0%, rgba(10,12,14,.72) 42%, rgba(10,12,14,.34) 100%),
    linear-gradient(0deg, rgba(10,12,14,.88) 0%, rgba(10,12,14,0) 48%);
}
.kahraman .kap { position: relative; z-index: 2; padding: calc(var(--bant) + 60px) 0 72px; color: #fff; }

.kahraman h1 { color: #fff; max-width: 15ch; }
.kahraman h1 em { font-style: normal; color: var(--turuncu); }
.kahraman-alt { margin-top: 22px; max-width: 58ch; font-size: clamp(15px,1.5vw,19px); line-height: 1.66; color: #C7C9CB; font-weight: 300; }
.kahraman-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.kaydir {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.kaydir i { display: block; width: 1px; height: 36px; background: linear-gradient(180deg, rgba(255,255,255,.7), transparent); animation: inin 2s var(--yay) infinite; }
@keyframes inin { 0%,100% { transform: scaleY(.35); transform-origin: top; } 50% { transform: scaleY(1); } }

/* KAHRAMAN GİRİŞİ — SAF CSS

   Önceden bu animasyonu GSAP yapıyordu: JS önce opacity:0 yazıyor,
   sonra açıyordu. JS bir sebeple duraklarsa başlık SONSUZA KADAR
   görünmez kalıyordu — denemede tam bu oldu. Metni gizleyip
   göstermeyi JS'e bağlamak kırılgan.

   CSS animasyonu tarayıcının kendi işi; durdurulamaz. JS hiç
   yüklenmese bile başlık yerinde ve görünür. */
@keyframes gir-yukari {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
[data-kahraman] > * {
  animation: gir-yukari .9s cubic-bezier(.22,.61,.36,1) both;
}
[data-kahraman] > *:nth-child(1) { animation-delay: .20s; }
[data-kahraman] > *:nth-child(2) { animation-delay: .32s; }
[data-kahraman] > *:nth-child(3) { animation-delay: .44s; }
[data-kahraman] > *:nth-child(4) { animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  [data-kahraman] > * { animation: none; }
}

/* =====================================================================
   RAKAM ŞERİDİ
   ===================================================================== */
.rakamlar { background: var(--koyu); color: #fff; padding: 0; }
.rakamlar .kap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.1); }
.rakam { background: var(--koyu); padding: 38px 8px 34px; text-align: center; }
.rakam .s { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(26px,3.4vw,44px); line-height: 1; letter-spacing: -.02em; }
.rakam .s em { font-style: normal; color: var(--turuncu); }
.rakam .a { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8A8D91; margin-top: 10px; }
@media (max-width: 760px) { .rakamlar .kap { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   BÖLÜM ORTAK
   ===================================================================== */
.bolum { padding: clamp(64px, 9vw, 130px) 0; }
.bolum-koyu { background: var(--koyu); color: #fff; }
.bolum-gri  { background: var(--zemin); }
.bolum-bas { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.bolum-bas h2 { margin-top: 12px; }
.bolum-bas p  { margin-top: 18px; }
.bolum-koyu .bolum-bas p { color: #A9ACB0; }
.bolum-koyu h2 { color: #fff; }

/* =====================================================================
   İKİ ANA KOL
   ===================================================================== */
.kollar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .kollar { grid-template-columns: 1fr; } }
.kol { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: #fff; }
.kol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--yay); }
.kol::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,12,14,.94) 6%, rgba(10,12,14,.30) 62%, rgba(10,12,14,.10) 100%);
}
.kol:hover img { transform: scale(1.06); }
.kol-ic { position: relative; z-index: 2; padding: 34px; width: 100%; }
.kol-ic h3 { margin-top: 10px; color: #fff; }
.kol-ic p { margin-top: 12px; color: #C7C9CB; font-size: 15px; font-weight: 300; max-width: 46ch; }
.kol-ic .bag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--turuncu);
}
.kol-ic .bag .ok { transition: transform .25s var(--yay); }
.kol:hover .bag .ok { transform: translateX(5px); }

/* =====================================================================
   ÜRÜN IZGARASI
   ===================================================================== */
.izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .izgara { grid-template-columns: 1fr; } }

.urun-kart { position: relative; background: var(--kart); overflow: hidden; border: 1px solid var(--cizgi); transition: border-color .3s var(--yay), transform .4s var(--yay); display: flex; flex-direction: column; }
.urun-kart:hover { border-color: var(--turuncu); transform: translateY(-4px); }
.urun-kart .foto { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--zemin); }
.urun-kart .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--yay); }
.urun-kart:hover .foto img { transform: scale(1.07); }
.urun-kart .ic { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.urun-kart h3 { font-size: 19px; line-height: 1.12; }
.urun-kart p { font-size: 14px; line-height: 1.55; color: var(--murekkep-2); margin-top: 10px; font-weight: 300; flex: 1; }
.urun-kart .bag {
  margin-top: 16px; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--turuncu);
  display: inline-flex; align-items: center; gap: 7px;
}
.urun-kart:hover .bag .ok { transform: translateX(4px); }
.urun-kart .bag .ok { transition: transform .25s var(--yay); }

/* =====================================================================
   VİDEO BÖLÜMÜ
   ===================================================================== */
.video-bolum { position: relative; overflow: hidden; color: #fff; }
.video-bolum video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-bolum::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,12,14,.95) 0%, rgba(10,12,14,.80) 48%, rgba(10,12,14,.45) 100%);
}
.video-bolum .kap { position: relative; z-index: 2; padding: clamp(72px,10vw,140px) 0; }
.surec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); margin-top: 44px; }
@media (max-width: 900px) { .surec { grid-template-columns: 1fr 1fr; } }
.adim { background: #16181A; padding: 24px 20px 26px; }
.adim .n { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; color: var(--turuncu); letter-spacing: .1em; }
.adim h4 { font-size: 15px; margin-top: 10px; color: #fff; }
.adim p { font-size: 13px; line-height: 1.5; color: #9EA1A5; margin-top: 8px; font-weight: 300; }

/* =====================================================================
   KATALOG ŞERİDİ
   ===================================================================== */
.katalog-serit { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
@media (max-width: 900px) { .katalog-serit { grid-template-columns: 1fr; } }
.katalog-gorsel { position: relative; aspect-ratio: 297/210; background: var(--koyu); overflow: hidden; }
.katalog-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.katalog-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* =====================================================================
   ÜRÜN SAYFASI
   ===================================================================== */
/* Koyu başlık alanı üst bandın ALTINA uzanıyor; bant onun üzerinde
   yüzüyor. Önceden bant koyu alanın üstünde kalıyordu ve beyaz gövde
   üzerinde gri bir şerit olarak görünüyordu. */
.urun-kahraman { position: relative; background: var(--koyu); color: #fff; }
.urun-kahraman .kap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; padding: calc(var(--bant) + clamp(40px,5vw,72px)) 0 clamp(48px,6vw,80px); }
@media (max-width: 900px) { .urun-kahraman .kap { grid-template-columns: 1fr; } }
.urun-kahraman h1 { color: #fff; }
.urun-kahraman .ozet { margin-top: 18px; font-size: clamp(16px,1.5vw,20px); line-height: 1.6; color: #C7C9CB; font-weight: 300; }
.urun-kahraman .gorsel { aspect-ratio: 4/3; overflow: hidden; background: #0C0E10; }
.urun-kahraman .gorsel img { width: 100%; height: 100%; object-fit: cover; }

.kirinti { font-size: 12.5px; color: #8A8D91; margin-bottom: 18px; }
.kirinti a:hover { color: var(--turuncu); }

.urun-govde { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
@media (max-width: 900px) { .urun-govde { grid-template-columns: 1fr; } }
.urun-yazi p { font-size: 16px; line-height: 1.72; color: var(--murekkep-2); font-weight: 300; margin-bottom: 16px; }
.urun-yazi strong { font-weight: 600; color: var(--murekkep); }

.teknik-kutu { background: var(--zemin); padding: 28px; position: sticky; top: calc(var(--bant) + 20px); }
.teknik-kutu h3 { font-size: 14px; letter-spacing: .14em; color: var(--murekkep-3); }
table.teknik { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.teknik td { font-size: 13.5px; line-height: 1.45; padding: 11px 0; border-bottom: 1px solid #DDDEDD; vertical-align: top; }
table.teknik td:first-child { width: 42%; color: var(--murekkep-3); font-weight: 500; padding-right: 14px; }
table.teknik tr:last-child td { border-bottom: 0; }

.rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.rozet { font-size: 12px; padding: 7px 13px; background: var(--zemin); color: var(--murekkep-2); font-weight: 500; }
.rozet.vurgu { background: var(--turuncu); color: #fff; }

.galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .galeri { grid-template-columns: 1fr 1fr; } }
.galeri a { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--zemin); }
.galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--yay); }
.galeri a:hover img { transform: scale(1.06); }

/* =====================================================================
   FABRİKA ELEMANLARI
   ===================================================================== */
.fab-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px) { .fab-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .fab-izgara { grid-template-columns: 1fr; } }
.fab { background: var(--kart); border-top: 3px solid var(--turuncu); padding: 20px 18px 22px; transition: transform .3s var(--yay), box-shadow .3s var(--yay); }
.fab:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.fab h4 { font-size: 15px; line-height: 1.15; }
.fab p { font-size: 13px; line-height: 1.5; color: var(--murekkep-2); margin-top: 8px; font-weight: 300; }

/* =====================================================================
   İLETİŞİM
   ===================================================================== */
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px,5vw,72px); }
@media (max-width: 900px) { .iletisim-izgara { grid-template-columns: 1fr; } }
.bilgi-satir { padding: 20px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-satir .e { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--turuncu); }
.bilgi-satir .d { font-size: 19px; margin-top: 6px; font-weight: 500; }
.bilgi-satir .d:hover { color: var(--turuncu); }

form .alan { margin-bottom: 18px; }
form label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-3); margin-bottom: 7px; font-weight: 600; }
form input, form select, form textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--murekkep);
  padding: 14px 16px; border: 1px solid var(--cizgi); background: var(--kart);
  transition: border-color .25s var(--yay);
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--turuncu); }
form textarea { min-height: 130px; resize: vertical; }
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .alan-ikili { grid-template-columns: 1fr; } }

/* =====================================================================
   ALT BİLGİ
   ===================================================================== */
.altbilgi { background: var(--koyu); color: #fff; padding: clamp(48px,6vw,80px) 0 28px; }
.altbilgi-ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 860px) { .altbilgi-ust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .altbilgi-ust { grid-template-columns: 1fr; } }
.altbilgi img.logo { height: 44px; width: auto; }
.altbilgi p { font-size: 14px; line-height: 1.65; color: #9EA1A5; margin-top: 16px; max-width: 42ch; font-weight: 300; }
.altbilgi h4 { font-size: 12px; letter-spacing: .18em; color: var(--turuncu); margin-bottom: 14px; }
.altbilgi ul { list-style: none; }
.altbilgi li { margin-bottom: 9px; }
.altbilgi li a { font-size: 14px; color: #C7C9CB; transition: color .25s var(--yay); }
.altbilgi li a:hover { color: var(--turuncu); }
.altbilgi-alt { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: 12px; color: #72757B; flex-wrap: wrap; }

/* =====================================================================
   HAREKET — ortaya çıkma
   JS yoksa her şey görünür kalır (aşağıdaki .js koşulu sayesinde).
   ===================================================================== */
.js [data-gir] { opacity: 0; }
.js [data-gir="yukari"] { transform: translateY(30px); }
.js [data-gir="olcek"]  { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .js [data-gir] { opacity: 1 !important; transform: none !important; }
  .kahraman-video { animation: none; }
  .kaydir i { animation: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   TEK KOLON BAŞLIK ALANI
   Ürünler, blog ve iletişim sayfalarında görsel yok; başlık alanı
   iki kolona bölünmüyor.
   ===================================================================== */
.urun-kahraman .kap.tek { grid-template-columns: 1fr; }

/* =====================================================================
   DİL DÜĞMESİ
   Menünün sonunda duruyor; çerçeveli olduğu için bağlantı değil
   düğme olduğu anlaşılıyor.
   ===================================================================== */
.dil-dugme {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 11.5px; letter-spacing: .12em;
  border: 1px solid rgba(255,255,255,.35); padding: 6px 11px;
  transition: background .25s var(--yay), color .25s var(--yay), border-color .25s var(--yay);
}
.dil-dugme::after { display: none; }                 /* alt çizgi animasyonu olmasın */
.dil-dugme:hover { background: #fff; color: var(--murekkep); border-color: #fff; }
.bant.sabit .dil-dugme { border-color: var(--cizgi-koyu, #CFD1D3); }
.bant.sabit .dil-dugme:hover { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }

/* =====================================================================
   FOTOĞRAFI OLMAYAN ÜRÜNLER
   Saha fotoğrafı henüz olmayan gruplarda kart boş görünmesin diye
   tipografik bir alan kullanılıyor. Boş çerçeve ya da "görsel yok"
   ikonundan daha kurumsal duruyor.
   ===================================================================== */
.urun-kart .foto-yok {
  display: flex; align-items: flex-end; padding: 22px;
  background: var(--koyu);
  background-image:
    linear-gradient(180deg, rgba(248,40,0,.12) 0%, rgba(248,40,0,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
}
.urun-kart .foto-yok .fy-ad {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(17px, 2.2vw, 24px); line-height: 1.06;
  letter-spacing: -.015em; color: #fff; text-transform: uppercase;
  max-width: 18ch;
}
.urun-kart .foto-yok::after {
  content: ""; position: absolute; left: 22px; top: 22px;
  width: 26px; height: 2px; background: var(--turuncu);
}
.urun-kart:hover .foto-yok { background-color: #1B1E21; }

/* Ürün sayfasında görsel yerine geçen alan */
.urun-kahraman .gorsel-yok {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px; padding: clamp(24px,3vw,38px); background: #0C0E10;
  border-left: 3px solid var(--turuncu);
}
.gorsel-yok .gy-ad {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(24px,3.4vw,40px); line-height: 1.04;
  letter-spacing: -.02em; text-transform: uppercase; color: #fff;
}
.gorsel-yok .gy-not { font-size: 14px; line-height: 1.6; color: #9EA1A5; font-weight: 300; max-width: 42ch; }

/* =====================================================================
   BLOG
   ===================================================================== */
.yazi-kart .foto { aspect-ratio: 16/10; }
.yazi-ust {
  display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--turuncu); font-weight: 600; margin-bottom: 10px;
}
.urun-kahraman .yazi-ust { color: #8A8D91; margin-top: 22px; margin-bottom: 0; }

.yazi-govde { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: clamp(32px,5vw,72px); align-items: start; }
@media (max-width: 980px) { .yazi-govde { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .yazi-yan { order: -1; } }

/* Yazı gövdesi — okunabilirlik için satır uzunluğu sınırlı */
.yazi { max-width: 72ch; }
.yazi > *:first-child { margin-top: 0; }
.yazi p, .yazi ul, .yazi ol, .yazi blockquote { font-size: 16.5px; line-height: 1.78; color: var(--murekkep-2); font-weight: 300; }
.yazi p { margin-bottom: 20px; }
.yazi strong { font-weight: 600; color: var(--murekkep); }
.yazi em { font-style: italic; }
.yazi h2 {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(22px,2.6vw,31px); line-height: 1.12; letter-spacing: -.015em;
  margin: 46px 0 16px; padding-top: 4px; scroll-margin-top: calc(var(--bant) + 24px);
}
.yazi h3 {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(17px,1.8vw,21px); line-height: 1.2;
  margin: 32px 0 12px; scroll-margin-top: calc(var(--bant) + 24px);
}
.yazi h4 { font-size: 15px; margin: 24px 0 10px; letter-spacing: .02em; }
.yazi ul, .yazi ol { margin: 0 0 22px 22px; }
.yazi li { margin-bottom: 9px; padding-left: 4px; }
.yazi ul { list-style: none; margin-left: 0; }
.yazi ul li { position: relative; padding-left: 20px; }
.yazi ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--turuncu); }
.yazi ol { list-style: decimal; }
.yazi ol li::marker { color: var(--turuncu); font-weight: 700; font-family: "Archivo", sans-serif; }
.yazi a { color: var(--turuncu); text-decoration: underline; text-underline-offset: 3px; }
.yazi code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; background: var(--zemin); padding: 2px 6px; }
.yazi hr { border: 0; border-top: 1px solid var(--cizgi); margin: 40px 0; }
.yazi blockquote {
  margin: 28px 0; padding: 18px 24px; background: var(--zemin);
  border-left: 3px solid var(--turuncu); font-size: 17px; color: var(--murekkep);
}
.yazi img { width: 100%; height: auto; margin: 28px 0; }

/* Yazı içi tablo — telefonda yatay kaydırılabilir */
.tablo-kutu { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
table.yazi-tablo { width: 100%; border-collapse: collapse; min-width: 440px; }
table.yazi-tablo th {
  text-align: left; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--murekkep); padding: 12px 14px; white-space: nowrap;
}
table.yazi-tablo td { font-size: 14px; line-height: 1.55; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: top; color: var(--murekkep-2); }
table.yazi-tablo tr:nth-child(even) td { background: var(--zemin); }
table.yazi-tablo td:first-child { font-weight: 500; color: var(--murekkep); }

.yazi-son { margin-top: 48px; padding-top: 30px; border-top: 2px solid var(--murekkep); }
.yazi-son p { font-size: 18px; color: var(--murekkep); font-weight: 400; margin-bottom: 18px; }

/* İçindekiler — geniş ekranda kaydırmayla birlikte geliyor */
.yazi-yan { position: sticky; top: calc(var(--bant) + 24px); }
.icindekiler { background: var(--zemin); padding: 24px; }
.icindekiler h3 { font-size: 11.5px; letter-spacing: .16em; color: var(--murekkep-3); margin-bottom: 14px; }
.icindekiler ul { list-style: none; }
.icindekiler li { margin-bottom: 11px; }
.icindekiler a { font-size: 13.5px; line-height: 1.45; color: var(--murekkep-2); display: block; border-left: 2px solid var(--cizgi); padding-left: 12px; transition: color .25s var(--yay), border-color .25s var(--yay); }
.icindekiler a:hover { color: var(--turuncu); border-color: var(--turuncu); }

/* =====================================================================
   PERFORMANS

   GSAP, ScrollTrigger ve Lenis kaldırıldı (~90 KB indirme + her
   kaydırma karesinde JavaScript işi). Yerine tarayıcının kendi
   IntersectionObserver'ı kullanılıyor; kaydırmada hiç iş yapmıyor.

   Aşağıdaki containment, kart ve bölme içindeki yeniden düzen
   hesabının o kutunun dışına taşmasını engelliyor: 35 ürün kartı
   olan sayfada fark hissediliyor.
   ===================================================================== */
.urun-kart, .adim, .fab, .galeri a, .rakam { contain: layout paint; }

/* Kart görselleri kompozisyon katmanında ölçeklensin — ölçek
   animasyonu düzen hesabı tetiklemesin. */
.urun-kart .foto img, .galeri img, .kol img { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .urun-kart .foto img, .galeri img, .kol img { will-change: auto; transition: none; }
}

/* Telefonda arka plan videosu hiç indirilmiyor (bkz. hareket.js);
   geriye poster görseli kalıyor, alan boş görünmüyor. */
@media (max-width: 899px) {
  .kahraman-video, .video-bolum video {
    background-size: cover; background-position: center;
  }
}

/* Mobil menüde dil düğmesi, menü bağlantılarıyla aynı hizada dursun */
@media (max-width: 960px) {
  .dil-dugme {
    margin: 12px var(--bosluk) 0; padding: 12px !important;
    text-align: center; border-color: rgba(255,255,255,.3);
  }
  /* Bantta gizlenen iletişim bilgileri menünün içinde görünüyor */
  .menu-iletisim { display: flex; flex-direction: column; gap: 2px; padding: 16px var(--bosluk) 4px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 12px; }
  .menu-iletisim a { padding: 6px 0 !important; font-size: 15px !important; }
  .menu-iletisim a:first-child { color: #9EA1A5 !important; font-size: 13.5px !important; }
}

/* =====================================================================
   SİTEYE ÖZGÜ ÖĞELER
   Katalogda karşılığı olmayan, yalnız ekranda anlamlı parçalar.
   ===================================================================== */

/* İlerleme çizgisi — sayfanın ne kadarının okunduğu.
   Basılı katalogda sayfa numarası bu işi görüyor; ekranda bu. */
.ilerleme {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--turuncu); z-index: 60; pointer-events: none;
}

/* Bölüm numarası — başlığın soluna düşen iri, içi boş rakam */
.bolum-bas { position: relative; }
.bolum-bas .bno {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(42px, 7vw, 86px); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.4px var(--cizgi);
  margin-bottom: 14px; user-select: none;
}
.bolum-koyu .bolum-bas .bno, .video-bolum .bolum-bas .bno {
  -webkit-text-stroke-color: rgba(255,255,255,.22);
}
@supports not (-webkit-text-stroke: 1px red) {
  .bolum-bas .bno { color: var(--cizgi); }
}

/* Kahramanın altındaki künye şeridi */
.kahraman-serit {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 44px;
}
.kahraman-serit > div { background: rgba(10,12,14,.55); padding: 16px 18px; }
.kahraman-serit .e {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--turuncu);
}
.kahraman-serit .d { font-size: 14px; color: #E6E7E8; margin-top: 5px; font-weight: 400; }
@media (max-width: 760px) { .kahraman-serit { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   ÜRÜN DİZİNİ
   Ürünler sayfası ızgara değil, dizin. Otuz yedi grubu tek ekranda
   taranabilir kılıyor; katalogdaki iki sütunlu sayfa düzeninden de
   açıkça ayrışıyor.
   ===================================================================== */
.dizin { border-top: 1px solid var(--cizgi); }
.dizin-satir {
  display: grid; grid-template-columns: 56px 92px minmax(0, 1.05fr) minmax(0, 1.25fr) 40px;
  gap: 20px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--cizgi);
  transition: background .25s var(--yay), padding-inline .25s var(--yay);
}
.dizin-satir:hover { background: var(--zemin); padding-inline: 14px; }
.dizin-no {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 12px;
  color: var(--murekkep-3); letter-spacing: .06em;
}
.dizin-foto {
  width: 92px; height: 69px; object-fit: cover; background: var(--zemin); display: block;
}
.dizin-foto-yok {
  width: 92px; height: 69px; background: var(--murekkep); display: block; position: relative;
}
.dizin-foto-yok::after {
  content: ""; position: absolute; left: 10px; top: 10px; width: 18px; height: 2px;
  background: var(--turuncu);
}
.dizin-ad {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 16px;
  line-height: 1.15; letter-spacing: -.005em;
}
.dizin-satir:hover .dizin-ad { color: var(--turuncu); }
.dizin-ozet { font-size: 13.5px; line-height: 1.5; color: var(--murekkep-2); font-weight: 300; }
.dizin-ok { justify-self: end; color: var(--murekkep-3); transition: transform .25s var(--yay), color .25s var(--yay); }
.dizin-satir:hover .dizin-ok { color: var(--turuncu); transform: translateX(5px); }

@media (max-width: 860px) {
  .dizin-satir { grid-template-columns: 40px 68px minmax(0,1fr) 28px; gap: 14px; }
  .dizin-foto, .dizin-foto-yok { width: 68px; height: 51px; }
  .dizin-ozet { display: none; }
}

/* Dizin başlığı — bölüm adı ve kaç grup olduğu */
.dizin-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 2px solid var(--murekkep);
}
.dizin-bas h2 { font-size: clamp(19px, 2vw, 26px); }
.dizin-bas .adet {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .14em; color: var(--murekkep-3);
}

/* Dil düğmesi: bayrak + kod */
.dil-dugme { display: inline-flex; align-items: center; gap: 7px; }
.dil-dugme .bayrak { display: block; border-radius: 1.5px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
@media (max-width: 960px) {
  .dil-dugme { justify-content: center; }
}

/* 404 */
.hata .kap { padding-block: calc(var(--bant) + clamp(56px,8vw,110px)) clamp(48px,7vw,96px); }
.urun-kahraman .hata-kod, .hata-kod {
  font-size: clamp(76px, 15vw, 190px); line-height: .82; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 2px var(--turuncu);
}
@supports not (-webkit-text-stroke: 1px red) { .hata-kod { color: var(--turuncu); } }
.hata-satir { grid-template-columns: 56px minmax(0,1fr) minmax(0,1.3fr) 40px; }
@media (max-width: 860px) { .hata-satir { grid-template-columns: 40px minmax(0,1fr) 28px; } }

/* Teklif sayfası: başlığın altındaki hızlı iletişim */
.iletisim-hizli { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 28px; }
.iletisim-hizli a { display: block; }
.iletisim-hizli span {
  display: block; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--turuncu);
}
.iletisim-hizli strong {
  display: block; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px); color: #fff; margin-top: 4px;
  transition: color .25s var(--yay);
}
.iletisim-hizli a:hover strong { color: var(--turuncu); }

/* Üçlü fotoğraf şeridi — süreç anlatımı */
.serit-uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .serit-uclu { grid-template-columns: 1fr; } }
.serit-uclu figure { margin: 0; }
.serit-uclu img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--cizgi); }
.serit-uclu figcaption {
  font-size: 13.5px; line-height: 1.55; color: var(--murekkep-2);
  font-weight: 300; margin-top: 12px; padding-left: 14px;
  border-left: 2px solid var(--turuncu);
}

/* Yazının altında, metinde geçen ürün gruplarına bağlantı.
   Okuyucuyu ürün sayfasına taşıyor; arama motoru için de blog ile
   ürün sayfaları arasında iç bağlantı kuruyor. */
.yazi-urunler { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--cizgi); }
.yazi-urunler h3 {
  font-size: 11.5px; letter-spacing: .16em; color: var(--murekkep-3); margin-bottom: 18px;
}
.yazi-urunler .izgara { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.yazi-urunler .urun-kart h3 { font-size: 15px; letter-spacing: 0; color: var(--murekkep); margin: 0; }
.yazi-urunler .urun-kart p { font-size: 12.5px; }
.yazi-urunler .urun-kart .ic { padding: 16px 16px 18px; }
@media (max-width: 760px) { .yazi-urunler .izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .yazi-urunler .izgara { grid-template-columns: 1fr; } }

/* =====================================================================
   SIKÇA SORULAN SORULAR
   <details>/<summary> kullanılıyor: JavaScript olmadan da açılıp
   kapanıyor ve arama motoru içeriği gizli saymıyor.
   ===================================================================== */
.sss { max-width: 860px; border-top: 1px solid var(--cizgi); }
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge summary {
  display: flex; align-items: baseline; gap: 16px; cursor: pointer;
  padding: 20px 36px 20px 0; position: relative; list-style: none;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-no {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 12px;
  color: var(--murekkep-3); flex: 0 0 auto; padding-top: 3px;
}
.sss-soru {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.3;
}
.sss-oge summary:hover .sss-soru { color: var(--turuncu); }
/* Artı / eksi işareti */
.sss-oge summary::after,
.sss-oge summary::before {
  content: ""; position: absolute; right: 4px; top: 50%;
  background: var(--turuncu); transition: transform .3s var(--yay);
}
.sss-oge summary::before { width: 15px; height: 2px; margin-top: -1px; }
.sss-oge summary::after  { width: 2px; height: 15px; margin-top: -7.5px; right: 10.5px; }
.sss-oge[open] summary::after { transform: rotate(90deg); opacity: 0; }
.sss-cevap { padding: 0 48px 24px 42px; }
.sss-cevap p { font-size: 15.5px; line-height: 1.75; color: var(--murekkep-2); font-weight: 300; }
.sss-cevap strong { font-weight: 600; color: var(--murekkep); }
@media (max-width: 560px) {
  .sss-cevap { padding: 0 36px 20px 0; }
  .sss-oge summary { gap: 12px; }
}

/* İki kartlık ızgara — ürün sayfasındaki ilgili yazılar */
.izgara-ikili { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (max-width: 620px) { .izgara-ikili { grid-template-columns: 1fr; } }

/* =====================================================================
   WHATSAPP DÜĞMESİ
   Sağ altta sabit. Alıcıların çoğu formu doldurmadan yazmak istiyor;
   bu düğme olmadığında o ziyaretçi kayıp demek.
   ===================================================================== */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .25s var(--yay), box-shadow .25s var(--yay);
}
.wa:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.wa:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 3px; }
@media (max-width: 560px) { .wa { right: 14px; bottom: 14px; width: 50px; height: 50px; } }
@media print { .wa { display: none; } }

/* Form durum satırı */
.form-durum { margin-top: 14px; font-size: 14.5px; line-height: 1.55; display: none; }
.form-durum.gorunur { display: block; }
.form-durum.tamam { color: #1B7F3B; font-weight: 500; }
.form-durum.hata  { color: var(--turuncu); font-weight: 500; }
.dugme[disabled] { opacity: .6; pointer-events: none; }
/* Bot tuzağı: insanlar görmez, doldurursa gönderim iptal edilir */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mühendislik hizmetleri kartları */
.hizmet-kart { background: var(--kart); border-top: 3px solid var(--turuncu); padding: 24px 22px 26px; transition: transform .3s var(--yay), box-shadow .3s var(--yay); }
.hizmet-kart:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.hizmet-kart .n { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; color: var(--turuncu); letter-spacing: .1em; }
.hizmet-kart h3 { font-size: 17px; line-height: 1.18; margin-top: 10px; }
.hizmet-kart p { font-size: 13.5px; line-height: 1.6; color: var(--murekkep-2); margin-top: 10px; font-weight: 300; }

/* Numaralı süreç listesi */
.surec-liste { list-style: none; counter-reset: adim; margin: 0; }
.surec-liste li { counter-increment: adim; position: relative; padding-left: 42px; margin-bottom: 16px; font-size: 15.5px; line-height: 1.65; color: var(--murekkep-2); font-weight: 300; }
.surec-liste li::before {
  content: counter(adim, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; color: var(--turuncu);
}