/* =========================================================
   ALTUNBİZ – Projeler (sayfa stili) – RENK GÜNCEL
   ========================================================= */
:root{
  --accent:#e67e22;     /* Turuncu (marka) */
  --dark:#020c3a;       /* Marka lacivert */

  /* ▼ Sayfaya özgü ayrıştırılmış palet */
  --page-bg:#0B1024;
  --ink:#0c1f47;
  --card:#102459;
  --card-alt:#14306b;
  --badge:#1b2e5b;
  --muted:#a9b9d6;
  --radius:1.05rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body.projeler-body{
  background:var(--page-bg);
  color:#fff;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",Helvetica,"Apple Color Emoji","Segoe UI Emoji";
}

/* ---------- HERO ---------- */
.hero-projeler{ position: relative; isolation: isolate; }
.hero-projeler::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(140deg, rgba(6,14,42,.86), rgba(16,26,68,.86));
  z-index:0;
}
.hero-projeler .container{ position:relative; z-index:1; animation: fadeInUp .8s ease both }

/* Güncelleme şeridi */
.update-ribbon{
  width: fit-content;
  background: rgba(6,14,42,.45);
  border:1px solid rgba(255,255,255,.18);
  border-radius: .9rem;
  padding: .85rem 1.1rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.update-ribbon strong{ display:block; font-weight:800; letter-spacing:.3px; }
.update-ribbon small{ font-size:.9rem; }
.icon-spin-wrap{ display:inline-flex; gap:.6rem; margin-bottom:.35rem; align-items:center; justify-content:center; }
.icon-spin-wrap i{
  font-size: 1.05rem;
  opacity:.95;
  animation: wiggle 1.6s ease-in-out infinite;
}

/* Üst bilgi bandı */
.info-band{
  position: sticky; top:0; z-index: 1029;
  background: #0D2248;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.55rem 0;
}
.info-band i{ animation: ping 1.8s ease-in-out infinite; }
.info-band span{ color:#e8eeff }

/* ---------- KONTROLLER ---------- */
.projeler-controls{
  padding:1.1rem 0;
  background:#0D2248;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.controls-wrap{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.filters{display:flex; gap:.5rem; flex-wrap:wrap}
.filter-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:#e9eeff;
  padding:.5rem .9rem;
  border-radius:.7rem;
  font-weight:600;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
  will-change: transform;
}
.filter-btn:hover{border-color:var(--accent); color:#fff}
.filter-btn.active{background:var(--accent); border-color:var(--accent); color:#fff}
.search input{
  background:#0a1a3f;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:.55rem .85rem;
  border-radius:.7rem;
  min-width:260px;
  outline:none;
}
.search input::placeholder{color:#c9d1e6}

/* ---------- GRID ---------- */
.projeler-grid{ padding:2.2rem 0 3.1rem; content-visibility:auto; contain-intrinsic-size:1200px; }
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:1.1rem;
}
.card{
  grid-column: span 12;
  background: linear-gradient(180deg, var(--card), var(--card-alt));
  border:1px solid rgba(255,255,255,.05);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}
@media(min-width:576px){ .card{ grid-column: span 6; } }
@media(min-width:992px){ .card{ grid-column: span 4; } }
.card:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.34); }

/* Kartları display yerine sınıfla gizlemek için */
.card.is-hidden{ display:none; }

/* Görsel alanı */
.card-media{position:relative; aspect-ratio: 16/10; background:#0b163d; overflow: hidden;}
.card-media img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(.98) saturate(1.02)}
.card-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35));
  transition: opacity .28s ease;
  opacity: 1;
}
.card:hover .card-media::after{ opacity: 1; }

/* Rozetler */
.badge{
  position:absolute; left:.75rem; bottom:.75rem;
  background: var(--badge);
  color:#fff; border:1px solid rgba(255,255,255,.15);
  padding:.35rem .55rem; border-radius:.55rem; font-weight:700; font-size:.85rem;
}
.badge-alt{ background:#22407d; }

/* Durum etiketleri */
.status{
  position:absolute; right:.75rem; top:.75rem;
  font-size:.8rem; font-weight:800;
  padding:.28rem .55rem; border-radius:.5rem;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35); backdrop-filter: blur(3px);
}
.status.done{ color:#b6ffbd; border-color:rgba(182,255,189,.35) }
.status.wip{ color:#ffd6a6; border-color:rgba(255,214,166,.35) }

/* Yer tutucu kart */
.card.coming .placeholder{
  display:grid; place-items:center; aspect-ratio:16/10;
  background: repeating-linear-gradient(45deg, #0c1f47 0 14px, #123061 14px 28px);
}
.card.coming .placeholder-inner{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:#e9f0ff; text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.card.coming .placeholder-inner i{ font-size: 1.6rem; animation: floaty 2.4s ease-in-out infinite; }

/* İçerik */
.card-body{ padding:1rem 1rem 1.1rem; }
.card-title{ font-size:1.1rem; font-weight:800; margin:0 0 .25rem 0; color:#eaf1ff; }
.card-meta{ color:var(--muted); font-size:.95rem; margin:0 0 .6rem 0; }
.card-tags{ display:flex; gap:.4rem; flex-wrap:wrap; padding:0; margin:0; list-style:none; }
.card-tags li{
  font-size:.8rem; color:#e6ecff;
  border:1px dashed rgba(255,255,255,.18);
  padding:.25rem .5rem; border-radius:.55rem;
}

/* ---------- CTA ---------- */
.cta-band{
  padding:1.25rem 0;
  background: linear-gradient(135deg, #0E2A68, #0F2F7A);
  border-top:1px solid rgba(255,255,255,.06);
}
.btn-cta{
  background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; padding:.8rem 1.15rem; border-radius:.7rem; display:inline-block;
  border:1px solid rgba(0,0,0,.1);
}
.btn-cta:hover{ filter: brightness(.95); }

/* ---------- Animasyonlar ---------- */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes wiggle {
  0%,100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-2px) rotate(-8deg); }
  50%{ transform: translateY(0) rotate(0deg); }
  75%{ transform: translateY(2px) rotate(8deg); }
}
@keyframes ping {
  0%{ transform: scale(1); opacity: .9; }
  70%{ transform: scale(1.15); opacity: .3; }
  100%{ transform: scale(1); opacity: .9; }
}
@keyframes floaty {
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .search input{ min-width: 200px; }
  .info-band{ position: static; }
}

/* Hareket kısıtlama tercihi */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* Dinamik bağlantı (PHP) */
.card-title a{color:inherit; text-decoration:none;}
.card-title a:hover{text-decoration:underline;}