/* ============================================================
   Projeler — liste / grid / detay
   Figma: 2174:20606 (kanonik, 1440x2621) · 2174:19590 (grid)
          2174:19097 (liste) · 2174:19550 (detay)

   Olculer referans PNG'den dogrulandi:
     hero      1440x492, #041E42 %45
     baslik    y=244, Mont 600/36/43.88, ortali
     panel     x=96 w=1248 y=365 h=549, #041E42 %78 uzerine opacity .64
     cipler    y=422, 10x110x110, gap 8, satir ortali (kenarlarda 38px)
     filtre    y=580: arama 482 @135 · KONUM 240 @640 · DURUM 240 @896 · gorunum 85 @1212
     kart izgarasi y=950, 3 sutun, kart 400x218, gap 24
   ============================================================ */

/* ---------- Hero ---------- */
.projhero { position: relative; height: 488px; overflow: hidden; }
.projhero .bg-media { position: absolute; inset: 0; }
.projhero .bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projhero .bg-media::after {
  content: ""; position: absolute; inset: 0; background: rgba(4, 30, 66, .45);
}
.projhero__title {
  position: relative; margin: 0; padding-top: 244px; text-align: center;
  font-weight: 600; font-size: 36px; line-height: 43.88px; color: #fff;
}

/* ---------- Filtre paneli ----------
   Figma'da üç varyant var:
     2174:19590 (grid)  panel 1248x291 @ y=371 — VARSAYILAN
     2174:19097 (liste) panel 1248x291 @ y=371 — aynı
     2174:20606 (ana)   panel 1248x549 @ y=365 — filtre UYGULANMIŞ hal;
                        aktif filtre özeti + açık DURUM listesi için büyüyor
   Panel varsayılanda 291; JS filtre uygulandığında .is-filtered ekler ve
   panel 543'e (371 -> 914) çıkar, ızgara 950'ye iner — 20606 ile aynı. */
.projfilter {
  position: relative; margin-top: -117px; /* 488 - 371 */
  height: 291px; border-radius: 8px;
  background: rgba(4, 30, 66, .4992);     /* #041E42 %78 x opacity .64 */
  transition: height .22s ease;
}
.projfilter.is-filtered { height: 543px; }

/* Kategori cipleri */
.projchips {
  display: flex; justify-content: center; gap: 8px;
  margin: 0; padding: 51px 0 0; list-style: none;   /* 422 - 371 */
}
.projchips > li { flex: 0 0 110px; display: block; }
.projchip {
  position: relative; display: block; width: 110px; height: 110px; flex: 0 0 110px;
  border-radius: 8px; background: #fff; color: var(--color-navy);
  box-shadow: var(--shadow-md); text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.projchip:hover { transform: translateY(-3px); }
.projchip[aria-current="true"] { background: var(--color-navy); color: #fff; }
.projchip__icon { position: absolute; display: block; }
.projchip__icon svg { display: block; width: 100%; height: 100%; }
.projchip__label {
  position: absolute; display: block; text-align: center;
  font-weight: 500; font-size: 13px;
}

/* Filtre satiri */
.projbar {
  position: absolute; top: 209px; left: 39px; right: 39px; /* 580-371, 135-96 */
  display: block; height: 45px;
}
.projsearch {
  position: absolute; left: 0; top: 0; width: 482px; height: 45px;
  display: flex; align-items: center; gap: 9px;
  padding-left: 29px; background: #fff;
  border: 1px solid var(--color-navy); border-radius: 4px;
}
.projsearch svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--color-navy); }
.projsearch input {
  flex: 1 1 auto; min-width: 0; height: 43px; border: 0; background: none;
  font: inherit; font-weight: 300; font-size: 20px; line-height: 24.38px;
  color: var(--color-navy); padding: 0 16px 0 0;
}
.projsearch input::placeholder { color: #D7D7D7; opacity: 1; }
.projsearch input:focus { outline: none; }
.projsearch:focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-cyan); }

.projsel { position: absolute; top: 0; width: 240px; height: 45px; }
.projsel--konum { left: 505px; }   /* 640-135 */
.projsel--durum { left: 761px; }   /* 896-135 */
.projsel__btn {
  display: flex; align-items: center; width: 100%; height: 100%;
  padding: 0 17px; border: 1px solid var(--color-navy); border-radius: 4px;
  background: var(--color-navy); color: #fff; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 20px; line-height: 24.38px;
  text-align: left;
}
.projsel__btn span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projsel__btn svg { flex: 0 0 24px; width: 24px; height: 10px; transition: transform .18s ease; }
.projsel__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Acilan liste — Figma: x=913 (kutu + 17), y=648, satir araligi 36 */
.projsel__list {
  position: absolute; left: 17px; top: 68px; z-index: 3;
  margin: 0; padding: 0; list-style: none; min-width: 112px;
}
.projsel__list[hidden] { display: none; }
.projsel__list li + li { margin-top: 16px; }
.projsel__opt {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 16px; line-height: 19.5px;
  color: #fff; text-align: left; white-space: nowrap;
}
.projsel__opt[aria-selected="true"] { color: var(--color-blue); }
.projsel__opt:hover { text-decoration: underline; }

/* Gorunum degistirici — Figma: 85x45 @1212, aktif buton 45x45 lacivert */
.projview { position: absolute; left: 1077px; top: 0; display: flex; align-items: center; gap: 16px; }
.projview__btn {
  display: grid; place-items: center; width: 45px; height: 45px; padding: 0;
  border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--color-navy);
  transition: background-color .18s ease, color .18s ease;
}
.projview__btn[aria-pressed="true"] { background: var(--color-navy); color: #fff; }
.projview__btn svg { width: 24px; height: auto; }

/* Aktif filtre ozeti — Figma: y=660 ve y=707, x=136 */
.projactive {
  position: absolute; left: 40px; top: 289px; /* 136-96, 660-371 */
  margin: 0; font-weight: 600; font-size: 20px; line-height: 24.38px; color: var(--color-blue);
}
.projclear {
  position: absolute; left: 40px; top: 334px; /* 707-371 -2 */
  display: inline-flex; align-items: center; gap: 1px; padding: 0;
  border: 0; background: none; cursor: pointer; color: #fff;
  font: inherit; font-weight: 500; font-size: 16px; line-height: 19.5px;
}
.projclear svg { width: 24px; height: 24px; }
.projclear:hover { text-decoration: underline; }
.projactive[hidden], .projclear[hidden] { display: none; }

/* ---------- Kart izgarasi ---------- */
.projgrid { padding: 38px 0 114px; }  /* panel 662 -> izgara 700; izgara 1888 -> footer 2002 */
.projgrid__list {
  display: grid; grid-template-columns: repeat(3, 400px); gap: 24px;
  margin: 0; padding: 0; list-style: none; justify-content: space-between;
}

.projcard {
  display: flex; flex-direction: column; gap: 16px;
  width: 400px; min-height: 218px; padding: 24px;
  background: #fff; border-radius: 0; box-shadow: var(--shadow-md);
  color: var(--color-navy); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.projcard:hover { transform: translateY(-4px); box-shadow: 0 10px 18px rgba(0, 0, 0, .18); }
/* Figma: Frame 48095930 "row g15 center" — ikon ve metin bloğu dikeyde ortalı.
   Başlık yüksekliği max(ikon, 42) olur; kısa ikonlu kartlar 5px alçalır. */
.projcard__head { display: flex; align-items: center; gap: 15px; min-height: 42px; }
/* Kart ikonlari kategoriye gore 37-69px genisliginde; olcu satir ici stilden gelir. */
.projcard__icon { flex: 0 0 auto; display: block; }
.projcard__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.projcard__cat { font-weight: 500; font-size: 16px; line-height: 19.5px; color: var(--color-blue); }
.projcard__loc { font-weight: 500; font-size: 15px; line-height: 18.28px; color: var(--color-navy); }
.projcard__body {
  margin: 0; font-weight: 500; font-size: 18px; line-height: 21.94px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.projcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 24px; }
.projcard__status { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 15px; line-height: 18.28px; }
/* Figma'da "Devam Ediyor" 5 kartta #0033A0, 5 kartta #00AEEF — iki durumun
   ayrilabilmesi icin #00AEEF secildi (bkz. data/projeler.json).
   ERISILEBILIRLIK: #00AEEF beyaz uzerinde 2.53:1; WCAG AA icin asagidaki
   iki satiri acin (#00749E -> 4.54:1), tasarimdan sapar. */
.projcard__status--devam { color: var(--color-cyan); }
.projcard__status--tamamlandi { color: var(--color-blue); }
/* .projcard__status--devam { color: #00749E; } */
.projcard__status::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.projcard__more { display: inline-flex; align-items: center; gap: 0; font-weight: 500; font-size: 16px; line-height: 19.5px; text-decoration: underline; text-underline-offset: 2px; }
.projcard__more svg { width: 24px; height: 24px; }

/* Bos sonuc */
.projempty {
  grid-column: 1 / -1; margin: 0; padding: 64px 24px; text-align: center;
  font-size: 18px; line-height: 28px; color: var(--color-navy);
  background: #fff; box-shadow: var(--shadow-md);
}

/* ============================================================
   Proje detayı — Figma 2174:19550 (1440x2000)
   ============================================================ */
.pdhero { position: relative; height: 488px; overflow: hidden; }
.pdhero .bg-media { position: absolute; inset: 0; }
.pdhero .bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdhero .bg-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 30, 66, .62); }

/* Kırıntı yolu — Figma: 12px/500 @ (102,196).
   Ürünler grubundaki .crumbs 13px/400 @ y=132; ayrı bileşen. */
.projcrumbs { position: absolute; left: 102px; top: 196px; z-index: 2; }
.projcrumbs ol { display: flex; align-items: center; gap: 4px; }
.projcrumbs li { display: flex; align-items: center; gap: 4px; }
.projcrumbs a, .projcrumbs span {
  font-weight: 500; font-size: 12px; line-height: 14.63px; color: #fff; white-space: nowrap;
}
.projcrumbs a:hover { text-decoration: underline; }
.projcrumbs li + li::before { content: "›"; color: #fff; opacity: .8; }

.pdhero__inner { position: relative; padding-top: 212px; text-align: center; }
.pdhero__sector { display: block; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--color-cyan); }
.pdhero__title { margin: 0; font-weight: 600; font-size: 36px; line-height: 43.88px; color: #fff; }

/* Bilgi paneli — Figma: Rectangle 2215, 1248x208 @ (96,369) */
.pdinfo {
  position: relative; margin-top: -119px;      /* 488 - 369 */
  height: 208px; border-radius: 8px; background: var(--color-navy); color: #fff;
}
.pdinfo__inner { position: absolute; left: 163px; top: 47px; }  /* 259-96, 416-369 */
.pdbadges { display: flex; gap: 9px; margin: 0 0 19px; padding: 0; list-style: none; }
.pdbadges img { display: block; width: 30px; height: 26px; }
.pdfacts { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.pdfacts div { display: flex; align-items: baseline; gap: 7px; }
.pdfacts dt { font-weight: 500; font-size: 16px; line-height: 19.5px; }
.pdfacts dd { margin: 0; font-weight: 400; font-size: 16px; line-height: 19.5px; }
.pddates {
  position: absolute; left: 877px; top: 91px;  /* 973-96, 460-369 */
  display: flex; flex-direction: column; gap: 19px; margin: 0;
}
.pddates div { display: flex; align-items: baseline; gap: 8px; }
.pddates dt { font-weight: 500; font-size: 16px; line-height: 19.5px; }
.pddates dd { margin: 0; font-weight: 400; font-size: 16px; line-height: 19.5px; }

/* Metin blokları — Figma: 1248 genişlik, Mont 400/16/23 */
.pdtext { margin: 0; font-weight: 400; font-size: 16px; line-height: 23px; color: var(--color-navy); }
.pdtext--intro { padding-top: 55px; }    /* 577 -> 632 */
.pdtext--body { padding-top: 55px; }     /* 1264 -> 1319 */

/* Galeri — Figma: 2x 608x517, aralık 33, gölge(0,4,4) */
.pdgallery { padding-top: 46px; }        /* 701 -> 747 */
.pdgallery__row { display: flex; gap: 33px; }
.pdgallery__row figure { flex: 1 1 608px; margin: 0; box-shadow: var(--shadow-md); }
.pdgallery__row img { display: block; width: 100%; height: 517px; object-fit: cover; }

.pdtail { height: 123px; }               /* 1457 -> footer 1580 */

/* ---------- Liste görünümü — Figma 2174:19097 ----------
   Başlık satırı y=690, satırlar y=746'dan itibaren 15 x 61px.
   Sütun kenarları: 171 (ad+kategori) · 730 (konum) · 1122 (durum) · 1310 (ok).
   İç genişlik 1228 = 65 + 559 + 392 + 188 + 24; 106'dan başlayınca
   sütunlar tam bu koordinatlara oturuyor. */
.projtable { display: none; padding: 28px 0 135px; }   /* panel 662 -> başlık 690 */
.projgrid.is-list .projtable { display: block; }
.projgrid.is-list .projgrid__list { display: none; }
.projgrid.is-list { padding-top: 0; padding-bottom: 0; }

.projtable__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.projtable__row {
  /* Son sütun 1fr: 1px çerçeve + 10px dolgu ile toplam tam 1248 kalsın.
     Sabit 24px verilirse ızgara 1250'ye taşar. */
  display: grid; grid-template-columns: 65px 559px 392px 188px 1fr;
  align-items: center; padding: 10px;
}
.projtable thead { display: block; margin-bottom: 34px; }   /* başlık 690+22 -> satırlar 746 */
.projtable thead .projtable__row { padding: 0 10px; height: 22px; }
.projtable th {
  font-weight: 500; font-size: 18px; line-height: 21.94px; color: var(--color-navy);
  text-align: left; padding: 0;
}
.projtable tbody { display: block; }
.projtable tbody .projtable__row {
  box-sizing: border-box; width: 100%; height: 61px;
  background: #fff; border: 1px solid var(--color-navy);
  color: var(--color-navy); transition: background-color .18s ease;
}
.projtable tbody .projtable__row:hover { background: #F7F9FC; }
.projtable td { padding: 0; min-width: 0; }
.projtable a { color: inherit; text-decoration: none; }
.projtable a:hover .projrow__desc { text-decoration: underline; }

.projrow__icon { max-width: 55px; max-height: 41px; width: auto; height: auto; object-fit: contain; }
.projrow__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.projrow__cat { font-weight: 500; font-size: 14px; line-height: 17.07px; color: var(--color-blue); }
.projrow__desc {
  font-weight: 500; font-size: 16px; line-height: 19.5px; color: var(--color-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projrow__loc { font-weight: 400; font-size: 15px; line-height: 18.28px; }
.projrow__status { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 15px; line-height: 18.28px; }
.projrow__status::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.projrow__status--devam { color: var(--color-cyan); }
.projrow__status--tamamlandi { color: var(--color-blue); }
/* .projrow__status--devam { color: #00749E; }   erişilebilir varyant, bkz. .projcard__status */
.projrow__more { display: block; width: 24px; height: 24px; color: var(--color-navy); }
.projtable .projempty { margin-top: 24px; }

/* ============================================================
   Mobil — Figma 2174:21684 (grid, 390x3210) · 2174:21544 (liste, 390x2041)

   Masaüstündeki 10 kategori çipi mobilde "PROJE TÜRÜ" açılır menüsüne
   dönüşüyor; panel 306x360 olup kahramanın üzerine biniyor.
   ============================================================ */
.projsel--tur { display: none; }

@media (max-width: 767px) {
  .projhero { height: 431px; }
  .projhero .bg-media::after { background: rgba(4, 30, 66, .42); }
  .projhero__title {
    padding-top: 124px; font-size: 18px; line-height: 21.94px;
  }

  /* Panel — Figma: 306x360 @ (42,178), #041E42 opaklık .64 */
  .projfilter {
    width: 306px; margin-inline: auto; margin-top: -253px;  /* 431 - 178 */
    height: 360px; background: rgba(4, 30, 66, .64);
  }
  .projfilter.is-filtered { height: auto; padding-bottom: 30px; }
  .projchips { display: none; }

  .projbar {
    position: static; display: flex; flex-direction: column; align-items: center;
    gap: 16px; height: auto; padding-top: 30px;              /* 178 -> 208 */
  }
  .projsearch, .projsel { position: static; width: 240px; height: 45px; }
  .projsel--tur { display: block; }
  .projsel--durum { height: 40px; }                          /* Figma: 240x40 */
  .projsearch { padding-left: 29px; gap: 5px; }
  .projsearch input { font-size: 16px; line-height: 19.5px; height: 43px; }
  .projsel__btn { font-size: 16px; line-height: 19.5px; }
  .projsel__list {
    position: static; margin-top: 10px; padding: 10px 0 0 17px;
    border-top: 1px solid rgba(255, 255, 255, .25);
  }
  .projview { position: static; width: 240px; justify-content: flex-start; gap: 16px; }

  .projactive, .projclear { position: static; margin: 16px 0 0; padding-inline: 33px; }
  .projactive { font-size: 16px; line-height: 19.5px; }

  /* Kartlar — Figma: 353 genişlik @ x=20, aralık 19 */
  .projgrid { padding: 25px 0 57px; }                        /* panel 538 -> kart 563 */
  .projgrid__list {
    grid-template-columns: 353px; justify-content: start;
    gap: 19px; padding-left: 4px;                            /* 16 + 4 = 20 */
  }
  .projcard { width: 353px; min-height: 0; }
  .projcard__loc { font-weight: 400; }                       /* Figma mobilde 400, masaüstünde 500 */

  /* Liste — Figma 2174:21544: tam genişlik, açıklama sütunu yok.
     Sütun kenarları 20 · 56 · 166 · 264 · 374 */
  .projtable { margin-inline: -16px; padding: 26px 0 20px; } /* panel 538 -> başlık 564 */
  .projtable__row {
    grid-template-columns: 36px 110px 98px 110px 1fr;
    padding: 10px 10px 10px 20px;
  }
  .projtable thead { margin-bottom: 7px; }                   /* 564+34 -> 605 */
  .projtable thead .projtable__row {
    grid-template-columns: 0 146px 98px 110px 1fr;
    height: auto; padding: 0 10px 0 20px; align-items: start;
  }
  .projtable th { font-size: 14px; line-height: 17.07px; }
  .projtable tbody tr + tr { margin-top: 1px; }              /* Figma: col gap 1 */
  /* Figma: satırlar 391 genişlikte (ekrandan 1px taşıyor) beyaz + 1px lacivert
     çerçeve; yan çerçeveler ekran dışında kaldığı için yalnızca yatay çizgiler
     görünüyor. Aynı etkiyi yan çerçeveleri kaldırarak veriyoruz. */
  .projtable tbody .projtable__row {
    height: auto; min-height: 54px; align-items: start;
    border-left: 0; border-right: 0;
  }
  .projtable tbody .projtable__row:hover { background: #F7F9FC; }
  .projrow__icon { max-width: 28px; max-height: 28px; }
  .projrow__cat { font-size: 14px; line-height: 17.07px; }
  .projrow__desc { display: none; }                          /* mobil satırda açıklama yok */
  .projrow__loc { font-weight: 400; font-size: 13px; line-height: 15.85px; }
  .projrow__status { font-size: 12px; line-height: 14.63px; gap: 6px; }
  .projrow__status::before { flex-basis: 6px; width: 6px; height: 6px; }
  .projrow__more { width: 6px; height: 13px; }
  .projrow__more svg { width: 100%; height: 100%; }
}

/* ---------- Proje detayı — mobil ----------
   Figma'da bu sayfanın mobil çerçevesi YOK. Diğer mobil sayfaların
   ölçülerinden türetildi: kahraman 431, konteyner 358 @ x=16,
   başlık 18/21.94, gövde 14/20 (blog detayla aynı ölçek).
   ------------------------------------------ */
@media (max-width: 767px) {
  .pdhero { height: 431px; }
  .projcrumbs { left: 16px; top: 72px; }
  .pdhero__inner { padding-top: 200px; }
  .pdhero__sector { font-size: 16px; line-height: 19.5px; }
  .pdhero__title { font-size: 18px; line-height: 21.94px; }

  .pdinfo { height: auto; margin-top: -80px; padding: 24px 16px 28px; }
  .pdinfo__inner { position: static; }
  .pdbadges { margin-bottom: 16px; }
  .pdfacts { gap: 14px; }
  .pdfacts div, .pddates div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pdfacts dt, .pdfacts dd, .pddates dt, .pddates dd { font-size: 15px; line-height: 19.5px; }
  .pddates { position: static; margin-top: 14px; gap: 14px; }

  .pdtext { font-size: 14px; line-height: 20px; }
  .pdtext--intro { padding-top: 24px; }
  .pdtext--body { padding-top: 24px; }
  .pdgallery { padding-top: 24px; }
  .pdgallery__row { flex-direction: column; gap: 16px; }
  .pdgallery__row figure { flex: 0 0 auto; }
  .pdgallery__row img { height: 241px; }
  .pdtail { height: 40px; }
}

/* ============================================================
   Tablet / ara genişlikler (768-1439) — Figma'da TASARLANMADI.

   Masaüstü ölçüleri sabit (panel 1248, çip satırı 1172, kart 400x3,
   filtre satırı mutlak konumlu) ve 1440 altında taşıyordu. Bu katman
   ölçüleri akışkana çevirir; 1440'ta hiçbir şey değişmez.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1439px) {
  .projfilter { height: auto; padding-bottom: 28px; }
  .projfilter.is-filtered { height: auto; }
  .projchips { flex-wrap: wrap; padding-inline: 16px; }

  /* Filtre satırı mutlak konumdan akışa geçer */
  .projbar {
    position: static; display: flex; flex-wrap: wrap; align-items: center;
    gap: 16px; height: auto; padding: 24px 16px 0;
  }
  .projsearch, .projsel, .projview { position: static; }
  .projsearch { flex: 1 1 280px; width: auto; min-width: 240px; }
  .projsel { flex: 0 0 240px; }
  .projview { flex: 0 0 auto; margin-left: auto; }

  .projactive, .projclear { position: static; margin: 16px 16px 0; }
  .projclear { margin-top: 8px; }

  .projgrid__list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .projcard { width: auto; }

  /* Liste görünümü: sabit sütunlar akışkan */
  .projtable__row { grid-template-columns: 65px minmax(0, 2fr) minmax(0, 1fr) 150px 1fr; }
  .projtable thead .projtable__row { grid-template-columns: 65px minmax(0, 2fr) minmax(0, 1fr) 150px 1fr; }

  /* Proje detayı */
  .pdinfo { height: auto; padding: 24px 32px 32px; }
  .pdinfo__inner { position: static; }
  .pddates { position: static; margin-top: 18px; }
  .pdpanel-row { flex-wrap: wrap; }
  .pdgallery__row { flex-wrap: wrap; }
  .pdgallery__row figure { flex: 1 1 300px; }
  .pdgallery__row img { height: 380px; }
}

/* 390 altı: kart ızgarası `353px` sabit ize kilitliydi; liste tablosu da
   sabit sütunlarla taşıyordu. */
@media (max-width: 389px) {
  .projgrid__list { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .projcard { width: auto; max-width: 100%; }
  .projfilter { width: auto; max-width: calc(100% - 32px); }
  .projsearch, .projsel, .projview { width: auto; max-width: 100%; }
  .projtable__row { grid-template-columns: 28px minmax(0,1fr) 70px 78px 20px; padding-inline: 10px; }
  .projtable thead .projtable__row { grid-template-columns: 0 minmax(0,1fr) 70px 78px 20px; padding-inline: 10px; }
  .projtable__table { width: 100%; }
  .projtable { margin-inline: 0; }
}