/* ============================================================
   SIMGETEK — Ürünler grubu
   Figma: Ürünler-Anasayfa 2151:10531 · Ü.Basınçlı Kaplar 2151:10996
          Air-Detay 2183:6914
   ============================================================ */

/* ------------------------------------------------------------
   ÜRÜN KAHRAMANI — kisa hero, baslik ortali
   Figma: gorsel 1440x538 + #041E42 @ %70
          baslik 1248x99 @ y=356 · Mont 600/36/43.88 · ortali
          kart menusu y=473 (kahramanin alt kenarina biner)
   ------------------------------------------------------------ */
.prodhero {
  position: relative;
  height: 538px;
  overflow: hidden;
  color: var(--color-white);
  --overlay: rgba(4, 30, 66, .7);
}
.prodhero__inner {
  position: relative;
  z-index: 1;
  padding-top: 356px;
}
/* Ic urun sayfalarinda kahraman 545 (anasayfada 538), baslik y=362 */
.prodhero--tall { height: 545px; }
.prodhero--tall .prodhero__inner { padding-top: 362px; }
.prod-inner .prodmenu { margin-top: -72px; }
.prodhero__title {
  font-size: 36px;
  line-height: 43.88px;
  font-weight: 600;
  text-align: center;
}
.crumbs {
  position: absolute;
  top: 132px;
  left: 0; right: 0;
  z-index: 2;
}
/* .crumbs TEMEL stilleri css/components.css icinde — Entegre Cozumler
   sayfalari urunler.css yuklemiyor ve kirinti yolu alt alta dusuyordu.
   Burada yalnizca Urunler sayfalarina ozgu KONUMLANDIRMA kaldi. */

/* Ürün detayda kirinti yolu kahraman icinde degil, beyaz zeminde akista.
   .crumbs ile AYNI ozgullukte oldugu icin ondan SONRA gelmeli. */
.crumbs--dark { position: static; padding-top: 43px; }
.crumbs--dark a, .crumbs--dark span { color: var(--color-navy); }
.crumbs--dark li + li::before { color: var(--color-navy); }


/* ------------------------------------------------------------
   ÜRÜN KATEGORI KART MENÜSÜ (tum Ürünler sayfalarinda ortak)
   Figma: 1250x130 @ (95, 473) · 9 kart 130x130 · aralik 10 · r8
     aktif kart #00AEEF · digerleri #041E42 + golge 0 4 4
     etiket Mont 500/15/18.28 · beyaz · ortali
   ------------------------------------------------------------ */
.prodmenu {
  position: relative;
  z-index: 3;
  /* Figma: 1250x130 @ x=95 -> sayfa kenarindan 95, standart 96 degil */
  width: 1250px;
  max-width: calc(100% - 190px);
  /* Menu her sayfada y=473'te; kahraman anasayfada 538, ic sayfalarda 545 */
  margin: -65px auto 0;
  display: flex;
  gap: 10px;
}
.prodmenu__item {
  flex: 0 0 130px;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px 18px 16px 19px;
  background: var(--color-navy);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  color: var(--color-white);
  text-align: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prodmenu__item:hover { background: var(--color-blue); transform: translateY(-3px); }
/* KONTRAST NOTU — aktif kart tasarimda #00AEEF zemin uzerine BEYAZ metin:
   2.53:1, WCAG AA icin gereken 4.5:1'in altinda. Gezinme etiketi oldugu icin
   gercek bir okunabilirlik sorunu. Tasarima birebir uyuluyor; asagidaki satiri
   acmak metni lacivert yapar ve 6.54:1'e cikarir (tasarimci onayi gerekir). */
.prodmenu__item[aria-current="page"] {
  background: var(--color-cyan);
  box-shadow: none;
}
/* .prodmenu__item[aria-current="page"] { color: var(--color-navy); } */
.prodmenu__icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex: 0 0 auto;
}
.prodmenu__item[aria-current="page"] .prodmenu__icon { width: 54px; height: 55px; }
.prodmenu__label {
  font-size: 15px;
  line-height: 18.28px;
  font-weight: 500;
}


/* ------------------------------------------------------------
   ÜRÜNLER ANASAYFA — aciklama blogu
   Figma: 1440x312 · pad 10/120 · ic 1180 · col gap 37 · ortali
     baslik Mont 600/32/39.01 navy · govde Mont 400/18/28 siyah
   ------------------------------------------------------------ */
/* Figma: kart menusu 603'te bitiyor, aciklama 658'de basliyor (55),
   aciklama 970'te bitiyor, footer 1024'te basliyor (54).
   Ic dolgu 20 = 10 (dis cerceve) + 10 (ic cerceve). */
.prodintro {
  background: var(--color-white);
  padding: 20px 0;
  margin: 55px 0 54px;
}
.prodintro__inner {
  width: 1180px;
  max-width: calc(100% - var(--page-pad) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 37px;
  text-align: center;
}
.prodintro__title { font-size: 32px; line-height: 39.01px; font-weight: 600; color: var(--color-navy); }
.prodintro__body  { font-size: 18px; line-height: 28px; font-weight: 400; color: #000; white-space: pre-line; }


/* ------------------------------------------------------------
   ÜRÜN KART LISTESI — Basınçlı Kaplar
   Figma: liste 1248x1310 @ (96,668) · 4 satir · satir araligi 10
     satir 1248x320 · golge 0 4 4 · iki kart 618x320 · aralik 10
     kart: gorsel 300x175 solda · gap 37 · sag blok 246
       baslik Mont 600/24/29.26 · govde Mont 400/16/19.5 · gap 14
       buton 81x36 pad 8/16
   ------------------------------------------------------------ */
/* Figma: liste 668..1978, footer 2085 -> alt bosluk 107 */
.prodlist { background: var(--color-white); padding: 65px 0 107px; }
.prodlist__grid {
  display: grid;
  grid-template-columns: repeat(2, 618px);
  justify-content: space-between;
  gap: 10px;
}
.prodcard {
  display: flex;
  align-items: center;
  gap: 37px;
  width: 618px;
  height: 320px;
  padding: 44px 20px 43px;
  background: var(--color-white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  color: var(--color-navy);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.prodcard:hover { transform: translateY(-3px); box-shadow: 0 8px 14px rgba(4, 30, 66, .2); }
.prodcard__figure { flex: 0 0 300px; width: 300px; height: 175px; overflow: hidden; }
.prodcard__figure img { width: 100%; height: 100%; object-fit: cover; }
.prodcard__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prodcard__title { font-size: 24px; line-height: 29.26px; font-weight: 600; }
.prodcard__text  { font-size: 16px; line-height: 19.5px; font-weight: 400; }
/* Figma: 81x36, dolgu YOK, 1px #041E42 kontur, metin Mont 400/16 #041E42 */
.prodcard__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  color: var(--color-navy);
  box-shadow: inset 0 0 0 1px var(--color-navy);
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 400;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.prodcard:hover .prodcard__cta { background: var(--color-navy); color: var(--color-white); }


/* ------------------------------------------------------------
   Duyarli davranis
   ------------------------------------------------------------ */
@media (max-width: 1439px) {
  .prodmenu {
    width: auto;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .prodmenu::-webkit-scrollbar { display: none; }
}

@media (max-width: 1439px) {
  .prodlist__grid { grid-template-columns: 1fr; }
  .prodcard { width: auto; }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .prodhero { height: auto; padding: 200px 0 90px; }
  .prodhero__inner { padding-top: 0; }
  .prodhero__title { font-size: 30px; line-height: 36px; }
  .prodintro { padding: 40px 0; margin: 32px 0; }
  .prodintro__title { font-size: 26px; line-height: 32px; }
  .prodintro__body { font-size: 16px; line-height: 26px; }
}

@media (max-width: 767px) {
  /* --- ÜRÜNLER mobil  Figma 2151:11859 (390x2077)
         kahraman gorsel seridi 198px (image 31: -69,0 528x198); sayfa basligi
         cizilmemis. Kategori menusu bandin son 33px'ine BINIYOR (y=165):
         4 sutun x 80px, aralik 8. Aciklama blogu y=378 · pad 0/20 · col gap 31
         129 yaziyordu; band erken bitip kartlarin arkasi beyaz kaliyordu. --- */
  .prodhero { height: 198px; padding: 0; }
  /* Figma: ürün grubu sayfalarının mobil bandı 199 (2151:11927), liste 129. */
  .prodhero--tall { height: 199px; }
  .prodhero__inner, .prodhero--tall .prodhero__inner { padding-top: 0; }
  /* Basligi tasarima uymak icin gorsel olarak gizliyoruz; HTML'de kaliyor.
     Gorunur olmasi istenirse bu blogu kaldirmak yeterli. */
  .prodhero__title {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .crumbs { top: 67px; }
  .crumbs a, .crumbs span { font-size: 12px; line-height: 14.63px; }

  /* Kart menusu: 4 sutunlu izgara, kartlar 80x80 */
  .prodmenu {
    margin: -33px auto 0;                  /* 198 - 33 = 165 */
    width: 344px;
    max-width: calc(100% - 46px);
    display: grid;
    grid-template-columns: repeat(4, 80px);
    justify-content: space-between;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }
  /* Figma: menü 199px'lik bandın üzerine biniyor (y=165). */
  .prod-inner .prodmenu { margin-top: -34px; }
  .prodmenu__item {
    flex: none;
    width: 80px; height: 80px;
    padding: 8px 4px;
    gap: 5px;
    justify-content: center;
  }
  .prodmenu__icon,
  .prodmenu__item[aria-current="page"] .prodmenu__icon { width: 34px; height: 34px; }
  .prodmenu__label { font-size: 10px; line-height: 12px; }

  /* Aciklama — Figma: y=378, pad 0/20, col gap 31, baslik 20/24.38, govde 18/28 */
  .prodintro { padding: 0; margin: 49px 0 96px; }
  .prodintro__inner {
    width: auto;
    max-width: calc(100% - 40px);
    gap: 31px;
    text-align: left;
  }
  .prodintro__title { font-size: 20px; line-height: 24.38px; }
  .prodintro__body  { font-size: 18px; line-height: 28px; }

  /* --- ÜRÜN KARTLARI mobil  Figma 2151:11927
         liste 358 genislik @ y=369 · kart araligi 15
         kart 358x541 · ic dolgu 33/29 · gorsel 300x175 ustte
         gap 10 · metin blogu (col gap 14) · gap 37 · buton 81x36 --- */
  .prodlist { padding: 36px 0 40px; }
  .prodlist__grid { grid-template-columns: 1fr; gap: 15px; }
  .prodcard {
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    /* Figma kart yuksekligi 541; Lorem metinleri gercek metinden kisa
       oldugu icin min-height ile kart geometrisi sabitleniyor */
    min-height: 541px;
    gap: 10px;
    padding: 33px 29px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  }
  .prodcard__figure { flex: 0 0 auto; width: 300px; max-width: 100%; height: 175px; }
  .prodcard__body { width: 300px; max-width: 100%; gap: 14px; }
  .prodcard__title { font-size: 24px; line-height: 29.26px; }
  .prodcard__text  { font-size: 16px; line-height: 19.5px; }
  .prodcard__cta   { margin-top: 23px; }   /* 37 - 14 */
}


/* ============================================================
   ÜRÜN DETAY — Air Receiver (Figma 2183:6914, 1440x2642)
   ============================================================ */

/* Galeri + teknik panel — Figma: gorsel 853x421 @ (98,180),
   panel 368x371 @ (976,180) · #9BCBEB @ %12
   panel basligi 368x60 · #9BCBEB · Mont 600/24/29.26 · pad 13/23 */
/* Figma: header 89, kirinti 132..152, galeri 180 -> 28px ara */
.pdetail { position: relative; background: var(--color-white); padding: 28px 0 0; }
/* Figma: satir x=98'de basliyor (98+853+25+368 = 1344 = konteyner sag kenari) */
.pdetail__top { display: flex; gap: 25px; align-items: flex-start; padding-left: 2px; }

.pgallery { position: relative; flex: 0 0 853px; width: 853px; }
.pgallery__frame { position: relative; height: 421px; overflow: hidden; }
.pgallery__frame img { width: 100%; height: 100%; object-fit: cover; }
.pgallery__nav {
  position: absolute;
  top: 204px;                       /* 384 - 180 */
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.pgallery__nav button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--color-sky);
  pointer-events: auto;
  transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.pgallery__nav button:hover { color: var(--color-white); }
.pgallery__nav button:first-child:hover { transform: translateX(-3px); }
.pgallery__nav button:last-child:hover  { transform: translateX(3px); }
.pgallery__nav svg { width: 12px; height: 21px; }

.pgallery__dots {
  position: absolute;
  top: 451px;                       /* 631 - 180 */
  left: 405px;                      /* 503 - 98 */
  display: flex;
  gap: 4px;
}
.pgallery__dots button {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #C9C9C9;
  box-shadow: inset 0 0 0 1px #949494;
  transition: background var(--dur) var(--ease);
}
.pgallery__dots button[aria-current="true"] { background: var(--color-navy); box-shadow: none; }

.pspec {
  flex: 0 0 368px;
  width: 368px;
  /* Figma'da panel 371 sabit; icerik kutusu 271 ama metin tasiyor */
  height: 371px;
  overflow: hidden;
  background: rgba(155, 203, 235, .12);
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pspec__head {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 13px 23px 10px;
  background: var(--color-sky);
}
.pspec__title { font-size: 24px; line-height: 29.26px; font-weight: 600; color: var(--color-navy); }
.pspec__body { padding: 0 24px; display: flex; flex-direction: column; gap: 30px; }
.pspec__group { display: flex; flex-direction: column; gap: 16px; }
.pspec__label { font-size: 16px; line-height: 19.5px; font-weight: 600; color: var(--color-navy); }
.pspec__list { display: flex; flex-direction: column; gap: 19.5px; }
.pspec__list li { font-size: 16px; line-height: 19.5px; font-weight: 400; color: var(--color-navy); }
/* Figma: 120x36, #0033A0 zemin, Mont 400/16/19.5 beyaz */
.pspec .btn { align-self: flex-start; background: var(--color-blue); font-weight: 400; padding: 8px 16px; }

/* Aciklama — Figma: 1248x140 @ (94,709) · Mont 400/16/19.5 · iki yana yasli */
.pdetail__desc {
  margin-top: 108px;                /* 709 - 601 */
  min-height: 140px;                /* Figma kutusu 1248x140 */
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 400;
  color: var(--color-navy);
  text-align: justify;
  white-space: pre-line;
}


/* ------------------------------------------------------------
   ÜRETİM AKIŞI — "Bu Ürün Nasıl Hayat Buluyor?"
   Figma: 1440x679 · zemin #1C293C
     80px araliklı teknik izgara (1px #00AEEF) + mavi isilti
     8 dugum ve 7 ok mutlak konumlu (Figma koordinatlari birebir)
   ------------------------------------------------------------ */
.flow {
  position: relative;
  height: 679px;
  background: #1C293C;
  overflow: hidden;
  color: var(--color-white);
  margin-top: 30px;                 /* aciklama 849'da bitiyor, akis 879'da basliyor */
}
/* Izgara: dikeyde 80px, yatayda 85px */
.flow__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,174,239,.35) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(180deg, rgba(0,174,239,.35) 0 1px, transparent 1px 85px);
  pointer-events: none;
}
/* Isilti — Figma: 599x593 @ (960,-127), #00AEEF, blur 107.6, %10 */
.flow__glow {
  position: absolute;
  left: 960px; top: -127px;
  width: 599px; height: 593px;
  border-radius: 50%;
  background: var(--color-cyan);
  opacity: .1;
  filter: blur(108px);
  pointer-events: none;
}
.flow__canvas {
  position: relative;
  width: 1440px;
  height: 679px;
  margin-inline: auto;
}
.flow__head { position: absolute; left: 98px; top: 35px; width: 363px; }
.flow__title { font-size: 24px; line-height: 29.26px; font-weight: 600; }
.flow__sub   { font-size: 20px; line-height: 24.38px; font-weight: 400; margin-top: 16px; opacity: .9; }

.flow__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  color: var(--color-white);
}
.flow__icon { width: 70px; height: 70px; object-fit: contain; }
.flow__label { font-size: 16px; line-height: 19.5px; font-weight: 500; }
.flow__cta {
  font-size: 12px;
  line-height: 14.63px;
  font-weight: 400;
  color: var(--color-sky);
  transition: color var(--dur-fast) var(--ease);
}
a.flow__node:hover .flow__cta { color: var(--color-white); text-decoration: underline; }
a.flow__node:hover .flow__icon { transform: translateY(-2px); }
.flow__icon { transition: transform var(--dur) var(--ease); }

.flow__std { position: absolute; left: 98px; top: 277px; width: 186px; display: flex; flex-direction: column; gap: 6px; }
.flow__std li { font-size: 11px; line-height: 13.41px; font-weight: 400; color: var(--color-sky); }

.flow__arrow { position: absolute; pointer-events: none; }
.flow__arrow img { width: 100%; height: 100%; }


/* ------------------------------------------------------------
   İLGİLİ PROJELER — Figma: 1440x664 @ y=1558
     baslik 152x29 @ (96,1615) Mont 500/24/29.26
     kartlar 1248x440 @ (96,1686) · row gap 24
   ------------------------------------------------------------ */
.relprojects { background: rgba(255, 255, 255, .06); padding: 57px 0 0; height: 664px; }
.relprojects__bar { display: flex; align-items: center; justify-content: space-between; }
.relprojects__title { font-size: 24px; line-height: 29.26px; font-weight: 500; color: var(--color-navy); }
.relprojects__more { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 16px; line-height: 19.5px; color: var(--color-navy); }
.relprojects__more:hover { text-decoration: underline; }
/* Figma: 3 kart x 400px, aralik 24 (400*3 + 24*2 = 1248) */
.relprojects__grid { display: flex; gap: 24px; margin-top: 42px; }
.relcard {
  position: relative;
  flex: 0 0 400px;
  width: 400px;
  height: 440px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
  transition: transform var(--dur) var(--ease);
}
.relcard:hover { transform: translateY(-4px); }
.relcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Figma: duz ortu #041E42 @ %71 (gradyan degil) */
.relcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 30, 66, .71);
  z-index: -1;
}
/* Rozetler — Figma: 45x45 #041E42, aralik 10, sol ust (19,26) */
.relcard__badges { position: absolute; left: 19px; top: 26px; display: flex; gap: 10px; }
.relcard__badge {
  width: 45px; height: 45px;
  display: grid; place-items: center;
  background: var(--color-navy);
}
.relcard__badge img { position: static; width: 29px; height: 20px; object-fit: contain; }
.relcard__body { position: absolute; left: 27px; right: 27px; top: 276px; display: flex; flex-direction: column; gap: 11px; }
.relcard__title { font-size: 20px; line-height: 24.38px; font-weight: 500; }
.relcard__text  { font-size: 14px; line-height: 17.07px; font-weight: 400; }
.relcard__cta   { position: absolute; left: 19px; top: 390px; font-size: 14px; line-height: 17.07px; font-weight: 500; }


@media (max-width: 1439px) {
  .pdetail { padding-top: 150px; }
  .pdetail__top { flex-wrap: wrap; }
  .pgallery { flex: 1 1 100%; width: auto; }
  .pgallery__frame { height: 44vw; max-height: 421px; }
  .pgallery__dots { left: 50%; transform: translateX(-50%); top: auto; bottom: -32px; }
  .pspec { flex: 1 1 100%; width: auto; margin-top: 48px; }
  .pdetail__desc { margin-top: 48px; }

  .flow { height: auto; margin-top: 64px; padding: 32px 0 48px; }
  .flow__canvas { width: auto; height: auto; display: flex; flex-direction: column; gap: 32px; }
  .flow__head { position: static; width: auto; padding-inline: var(--page-pad); }
  .flow__node {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding-inline: var(--page-pad);
  }
  .flow__node .flow__body { display: flex; flex-direction: column; gap: 4px; }
  .flow__std { position: static; width: auto; padding-inline: var(--page-pad); }
  .flow__arrow { display: none; }

  .relprojects { height: auto; padding: 40px 0 56px; }
  .relprojects__grid { flex-direction: column; }
  .relcard { flex: 0 0 auto; width: auto; height: 320px; }
}

@media (max-width: 767px) {
  .pdetail { padding-top: 120px; }
  .pspec__title { font-size: 18px; line-height: 21.94px; }
  .pdetail__desc { font-size: 14px; line-height: 20px; text-align: left; }
  .flow__title { font-size: 18px; line-height: 21.94px; }
  .flow__sub { font-size: 16px; line-height: 19.5px; }
  .relprojects__title { font-size: 18px; line-height: 21.94px; }
}


/* ------------------------------------------------------------
   ÜRÜN DETAY — mobil (Figma 2151:11756, 390x3845)
     kirinti 67 · gorsel 359x269 @ y=113 · gezinme 221
     noktalar (173,406) · panel 359x421 @ y=448
     aciklama 358x220 @ y=913 · akis 362x1158 @ y=1157 (DIKEY)
     ilgili projeler 359x484 @ y=2348 (tek kart) · footer 2881
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Figma: header 52, kirinti 67, gorsel 113 */
  .crumbs--dark { padding-top: 15px; }
  .pdetail { padding: 26px 0 0; }
  .pdetail__top { flex-direction: column; gap: 0; padding-left: 0; }

  .pgallery { flex: 0 0 auto; width: 100%; }
  .pgallery__frame { height: 269px; }
  .pgallery__nav { top: 108px; }
  .pgallery__dots { top: 293px; left: 157px; }

  .pspec {
    flex: 0 0 auto;
    width: 100%;
    height: 421px;
    margin-top: 66px;                /* gorsel 382'de bitiyor, panel 448'de basliyor */
    gap: 16px;
  }
  .pspec__head { height: 60px; padding: 19px 23px; }
  .pspec__title { font-size: 18px; line-height: 21.94px; }
  .pspec__body { padding: 0 20px; gap: 30px; }
  .pspec__group { gap: 4px; }
  .pspec__label { font-size: 16px; line-height: 19.5px; }
  .pspec .btn { padding: 6px 16px; font-size: 15px; }

  .pdetail__desc { margin-top: 44px; min-height: 220px; font-size: 16px; line-height: 19.5px; text-align: left; }

  /* AKIS — dikey liste, solda baglanti cizgisi (Figma "Line 31" x=45) */
  /* Figma: aciklama 1133'te bitiyor, akis 1157'de basliyor */
  .flow { height: auto; margin-top: 24px; padding: 0 0 40px; background: #1C293C; }
  .flow__canvas {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 13px 0;
  }
  .flow__canvas::before {
    content: "";
    position: absolute;
    left: 45px;
    top: 150px;
    bottom: 40px;
    width: 1px;
    background: rgba(0, 174, 239, .5);
  }
  .flow__head { position: static; width: auto; padding-inline: 10px; }
  .flow__node {
    position: static;
    width: auto !important;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 10px;
    z-index: 1;
  }
  .flow__node .flow__body { display: flex; flex-direction: column; gap: 6px; }
  .flow__icon { flex: 0 0 auto; width: 64px; height: 64px; }
  .flow__std { position: static; width: auto; padding: 0 10px 0 90px; }
  .flow__arrow { display: none; }

  /* ILGILI PROJELER — mobilde tek kart */
  .relprojects { height: auto; padding: 44px 0 0; }
  .relprojects__title { font-size: 18px; line-height: 21.94px; }
  .relprojects__grid { flex-direction: column; gap: 24px; margin-top: 12px; }
  .relcard { flex: 0 0 auto; width: auto; height: 440px; }
}


/* Icerigi henuz eklenmemis urun grubu sayfalari icin */
.prodempty {
  padding: 96px 0 120px;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-muted);
}
@media (max-width: 767px) {
  .prodempty { padding: 48px 0 64px; font-size: 14px; }
}

/* Tablet / ara genişlikler (768-1439) — Figma'da tasarlanmadı.
   Ürün kategori menüsü 9 x 130 + 8 x 10 = 1250 sabit; sarmalı yapıldı. */
@media (min-width: 768px) and (max-width: 1439px) {
  /* Çipler .prodmenu'nun doğrudan çocuğu; ara .__list katmanı yok. */
  .prodmenu { width: auto; max-width: 100%; margin-inline: var(--page-pad);
              flex-wrap: wrap; justify-content: center; }
  .prodmenu__item { flex: 0 0 130px; }
  .prodlist__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .prodcard { width: auto; }
  /* Kart yatay flex (görsel + metin + CTA); dar sütunda CTA karttan taşıyordu. */
  .prodcard { flex-wrap: wrap; height: auto; min-height: 320px; gap: 20px 24px; }
  .prodcard__figure { flex: 0 0 120px; }
  .prodcard__body { flex: 1 1 180px; }
  .prodcard__cta { flex: 0 0 auto; align-self: flex-start; }
  .gallery__row, .relprojects__grid { flex-wrap: wrap; }
  .relcard { flex: 1 1 260px; }
  .flow { overflow: hidden; }
  .flow__glow { display: none; }
}

/* 390 altı tasarlanmadı; 390 düzeni akışkan küçülmeli. Kategori menüsü
   `repeat(4, 80px)` ile 320'de viewport dışına taşıp yatay kaydırma
   üretiyordu (scrollWidth 367). İzler oranı koruyarak akışkan. */
@media (max-width: 389px) {
  .prodmenu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prodmenu__item { width: auto; }
  .prodmenu__label { font-size: 9px; line-height: 11px; }
}

/* 390 altı: ürün kartının görsel sütunu (300px) izgara izini min-content'e
   kilitliyor ve kart 358'de kalıp taşıyordu. */
@media (max-width: 389px) {
  .prodlist__grid { grid-template-columns: minmax(0, 1fr); }
  .prodcard, .prodcard__figure, .prodcard__figure img { max-width: 100%; }
}