.project-card.has-image {
  background-image: var(--project-image);
  background-position: center;
  background-size: cover;
}

.project-card.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 27, 47, .90), rgba(8, 38, 66, .46) 62%, rgba(10, 28, 44, .68));
  transition: background .32s ease;
}

.project-card.has-image:hover::before {
  background: linear-gradient(135deg, rgba(6, 27, 47, .72), rgba(8, 38, 66, .29) 62%, rgba(10, 28, 44, .55));
}

.project-card-overlay,
.project-card-top,
.project-card-content,
.project-gallery-open {
  position: relative;
  z-index: 1;
}

.project-card-top { min-height: 30px; }

.project-card-content {
  margin-top: 35px;
  padding-right: 4px;
}

.project-card-content .project-client { margin: 0 0 8px; }

.project-card-content h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.08;
}

.project-description {
  max-width: 390px;
  margin: 13px 0 0;
  color: rgba(255, 255, 255, .79);
  font-size: 12px;
  line-height: 1.58;
}

.project-card--paper .project-description { color: #62788b; }

/* Sayı/durum alanı kartın metin akışından bağımsız kalır. */
.project-meta {
  position: absolute;
  z-index: 1;
  left: 27px;
  bottom: 52px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.project-status-public {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px;
  background: rgba(7, 29, 51, .32);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

.project-status-public.starting { border-color: #cbd7e0; background: #eef3f7; color: #365269; }
.project-status-public.ongoing { border-color: #ffcb52; background: rgba(255, 186, 19, .18); color: #ffe3a0; }
.project-status-public.completed { border-color: #92d6ac; background: rgba(30, 123, 74, .30); color: #d5f7df; }
.project-status-public.cancelled { border-color: #f2a09b; background: rgba(168, 65, 56, .30); color: #ffe0dd; }
.project-card--paper .project-status-public { border-color: #d5e0e8; background: #fff; color: #405c72; }
.project-card--paper .project-status-public.ongoing { border-color: #efd17b; background: #fff7db; color: #926400; }
.project-card--paper .project-status-public.completed { border-color: #b9dfc5; background: #eff9f2; color: #287348; }
.project-card--paper .project-status-public.cancelled { border-color: #edc4c1; background: #fdf0ef; color: #a3453d; }

.project-gallery-open {
  position: absolute;
  right: 25px;
  bottom: 19px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 800 10px Arial, sans-serif;
  letter-spacing: .03em;
  cursor: pointer;
}

.project-gallery-open span { color: #ffba13; font-size: 14px; }
.project-card--paper .project-gallery-open { color: #193c57; }

.projects-empty {
  display: grid;
  justify-items: center;
  padding: 72px 25px;
  border: 1px dashed #cbd8e1;
  border-radius: 18px;
  background: #f8fafc;
  text-align: center;
}

.projects-empty span {
  display: grid;
  place-items: center;
  width: 59px;
  height: 59px;
  border-radius: 16px;
  background: #fff0c8;
  color: #bc8000;
  font-size: 27px;
}

.projects-empty h3 { margin: 19px 0 8px; color: #17344f; font-size: 23px; }
.projects-empty p { max-width: 430px; margin: 0 0 20px; color: #667a8b; font-size: 14px; line-height: 1.6; }

.project-gallery-modal {
  position: fixed;
  z-index: 99;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 20, 34, .78);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.project-gallery-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }

.project-gallery-dialog {
  position: relative;
  width: min(950px, 100%);
  max-height: calc(100vh - 48px);
  padding: 27px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 19px;
  background: #0a2846;
  color: #fff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .38);
}

.project-gallery-kicker { margin: 0 0 8px; color: #ffba13; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.project-gallery-dialog h2 { max-width: 85%; margin: 0 0 19px; font-size: 25px; line-height: 1.1; }
.project-gallery-main { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 12px; background: #061b2d; }
.project-gallery-thumbs { display: flex; gap: 9px; overflow: auto; margin-top: 13px; padding-bottom: 2px; }
.project-gallery-thumbs button { flex: 0 0 auto; width: 72px; height: 54px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #1d3d58; cursor: pointer; }
.project-gallery-thumbs button.active { border-color: #ffba13; }
.project-gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-gallery-close { position: absolute; right: 17px; top: 15px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff0c8; color: #152d45; font-size: 24px; line-height: 1; cursor: pointer; }
.gallery-open { overflow: hidden; }

@media (max-width: 650px) {
  .project-card-content { margin-top: 30px; }
  .project-card-content h3 { font-size: 23px; }
  .project-card { min-height: 320px; }
  .project-gallery-dialog { padding: 20px 15px; }
  .project-gallery-dialog h2 { font-size: 21px; }
  .project-gallery-main { max-height: 48vh; }
  .project-gallery-open { right: 20px; }
  .project-meta { left: 20px; }
}