/* Proje kartları stilleri bölümü başlangıcı */
.campaign-card {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8e5;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 30px rgba(29, 63, 59, 0.07);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}
.campaign-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}
.campaign-card.featured {
  transform: translateY(-12px);
  box-shadow: var(--shadow);
}
.campaign-card.featured:hover {
  transform: translateY(-18px);
}
.campaign-card.is-hidden {
  display: none;
}
.campaign-card.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.card-photo {
  position: relative;
  overflow: hidden;
  background-color: #d4dbd8;
}
.card-photo:empty {
  min-height: 140px;
}
.card-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.card-body {
  padding: 23px;
}
.card-body h3 {
  margin: 0 0 7px;
  font-size: 1.06rem;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-body p {
  /* 2026-09-25 düzeltme: min-height, -webkit-line-clamp ile aynı elementte
     çakışıyordu — kutu 2 satırlık doğal yüksekliğinden DAHA UZUN olmaya
     zorlanınca, kırpılan (3.+) satırın bir kısmı "..." ile birlikte hâlâ
     görünür kalıyordu (taşma gizlenmiyordu). Kart yükseklikleri zaten
     .projects-grid{align-items:start} ile eşitlenmiyor (bkz. yukarıdaki not),
     o yüzden min-height'a gerek yok, kaldırıldı. */
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.donate-input {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.donate-input span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  color: var(--muted);
  font-weight: 700;
  background: var(--ivory);
  border-inline-end: 1px solid var(--line);
}
.donate-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 11px 12px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  text-align: right;
  background: #fff;
  outline: none;
}
.donate-input input:focus {
  background: #f7faf9;
}
.donate-input input::placeholder {
  color: var(--muted);
}
.campaign-card input[type="number"]::-webkit-outer-spin-button,
.campaign-card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.campaign-card input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity-box {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.quantity-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.amount-field,
.quantity-field,
.quantity-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  white-space: nowrap;
}
.amount-field > span,
.quantity-field > span,
.quantity-total > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amount-field strong,
.amount-field b,
.quantity-total strong {
  flex: none;
}
.amount-field {
  grid-column: 1 / -1;
  padding-block: 5px;
  color: var(--muted);
  background: var(--ivory);
  font-size: 0.72rem;
  border-bottom: 1px solid var(--line);
}
.amount-field strong,
.amount-field b {
  color: var(--teal);
  font-size: 1.15rem;
}
.quantity-field {
  border-inline-end: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
}
.quantity-field input {
  width: 43px;
  min-width: 0;
  flex: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  outline: none;
}
.quantity-total {
  color: var(--muted);
  font-size: 0.65rem;
}
.quantity-total strong {
  color: var(--ink);
  font-size: 0.78rem;
}
.progress-box {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding-inline: 2px;
}
.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
}
.progress-info strong {
  flex: none;
  color: var(--teal);
  font-size: 0.88rem;
}
.progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efed;
  box-shadow: inset 0 1px 2px rgba(24, 38, 37, 0.08);
}
.progress-track span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0aa698, var(--teal));
}
.card-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.card-actions .button {
  flex: 1;
  min-width: 0;
  min-height: 43px;
  padding-inline: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.card-actions .button svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.card-cart-label,
.card-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-button {
  color: #fff;
  background: var(--teal);
}
.card-actions .button.card-cart {
  color: var(--teal);
  background: #fff;
  border: 1px solid var(--line);
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.card-actions .button.card-cart:hover {
  border-color: var(--teal);
  background: #eef7f5;
}
.card-actions .button.card-cart:disabled {
  cursor: default;
}
.card-actions .button.card-cart.is-added {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  animation: cardCartPop 0.45s ease;
}
.card-actions .button.card-cart svg {
  transition: transform 0.3s ease;
}
.card-actions .button.card-cart.is-added svg {
  transform: scale(1.15);
}

@keyframes cardCartPop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.93);
  }
  65% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Sepete uçma animasyonu bölümü başlangıcı */
.cart-soul {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
  background: #d4dbd8;
  box-shadow: 0 22px 50px rgba(8, 127, 122, 0.38);
  will-change: transform, opacity, filter;
}
.cart-soul img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-packing-stage {
  position: fixed;
  z-index: 9997;
  width: 240px;
  height: 240px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 253, 248, 0.82) 0%,
    rgba(255, 253, 248, 0.56) 28%,
    rgba(255, 253, 248, 0.2) 54%,
    rgba(255, 253, 248, 0) 76%);
  filter: blur(24px);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.cart-envelope {
  position: fixed;
  z-index: 9998;
  width: 96px;
  height: 96px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 8px 12px rgba(6, 63, 64, 0.22));
  will-change: transform, opacity;
}
.cart-envelope > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: none;
}
.cart-envelope-lid {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center top;
}
.cart-envelope-flaps {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.card-photo.is-releasing,
.detail-photo.is-releasing {
  animation: cardPhotoRelease 0.6s ease;
}
@keyframes cardPhotoRelease {
  0% {
    filter: brightness(1) saturate(1);
  }
  35% {
    filter: brightness(1.2) saturate(0.6);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}

.icon-btn.is-pulsed {
  animation: cartIconPulse 0.55s ease;
}
@keyframes cartIconPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(8, 127, 122, 0.45);
  }
  35% {
    transform: scale(1.16);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(8, 127, 122, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(8, 127, 122, 0);
  }
}
.cart-badge.is-bumped {
  animation: cartBadgePop 0.5s ease;
}
@keyframes cartBadgePop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.55);
  }
  70% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}
/* Sepete uçma animasyonu bölümü bitişi */

@media (prefers-reduced-motion: reduce) {
  .card-actions .button.card-cart.is-added,
  .card-actions .button.card-cart.is-added svg,
  .card-photo.is-releasing,
  .detail-photo.is-releasing,
  .icon-btn.is-pulsed,
  .cart-badge.is-bumped {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .card-actions .button {
    padding-inline: 6px;
    font-size: 0.72rem;
  }
}

/* Kart geni?li?ine duyarl? d?zen b?l?m? ba?lang?c? */
@container (max-width: 360px) {
  .card-body {
    padding: 18px;
  }
  .card-actions {
    gap: 6px;
  }
  .card-actions .button {
    padding-inline: 6px;
    font-size: 0.72rem;
  }
  .amount-field,
  .quantity-field,
  .quantity-total {
    padding-inline: 6px;
  }
}
@container (max-width: 260px) {
  .card-actions {
    flex-direction: column;
  }
  .card-actions .button {
    width: 100%;
  }
  .amount-field,
  .quantity-total {
    gap: 3px;
    padding-inline: 4px;
    font-size: 0.58rem;
  }
  .quantity-field {
    padding-inline: 4px;
    font-size: 0.6rem;
  }
  .amount-field strong,
  .amount-field b,
  .quantity-total strong {
    font-size: 0.68rem;
  }
}
/* Kart geni?li?ine duyarl? d?zen b?l?m? bitişi */
/* Proje kartları stilleri bölümü bitişi */

/* Parça yükleme (Projelerimiz + landing, 2026-10-12): grid altındaki "Daha Fazla Göster" alanı.
   Alan sayfa sonuna yaklaşınca kartlar kendiliğinden gelir (js/proje-parca-yeni.js); düğme yedektir. */
.projects-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.projects-more[hidden] { display: none; }
.projects-more-btn {
  min-width: 220px;
  background: #fff;
  color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.projects-more-btn:hover { color: var(--teal-dark); }
.projects-more-btn:disabled { cursor: progress; transform: none; }
.projects-more-spin {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: projeler-donus 0.7s linear infinite;
}
.projects-more.is-loading .projects-more-spin { display: inline-block; }
.projects-more.is-error .projects-more-btn { color: #c43228; box-shadow: inset 0 0 0 1px #c43228; }
.projects-grid.is-refreshing {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@keyframes projeler-donus { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .projects-more-spin { animation-duration: 2s; }
}