/* ==================================================================
   YAPTIGIMIZ ISLER (galeriler.php)
   ------------------------------------------------------------------
   Tailwind build'inden bagimsiz, elle yazilmis. Gerekcesi diger
   sayfa CSS'lerindekiyle ayni: bu sayfadaki bazi degerler PHP'den
   geliyor ve Tailwind tarayicisi onlari kaynakta goremiyor.

   Sayfa iki farkli veri durumuyla calisiyor:
     - Panelde calisma bilgisi GIRILMIS gorseller -> anlatili kart
     - Hic bilgi girilmemis gorseller             -> sade gorsel kart
   Ikisi ayni izgarada yan yana durabilir; tasarim buna gore kuruldu.
================================================================== */

.cal-kap{
  max-width:80rem;
  margin:0 auto;
  padding:0 1rem;
}
@media (min-width:640px){ .cal-kap{ padding:0 1.5rem; } }
@media (min-width:1024px){ .cal-kap{ padding:0 2rem; } }

/* ==================================================================
   GIRIS BOLUMU
================================================================== */

.cal-ust{
  position:relative;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 55%,#2563eb 100%);
  color:#fff;
  padding:3rem 0;
  overflow:hidden;
}
@media (min-width:1024px){ .cal-ust{ padding:4rem 0; } }

.cal-ust::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 80%);
  pointer-events:none;
}
.cal-ust > *{ position:relative; }

.cal-ust-govde{ max-width:44rem; }

.cal-etiket{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.cal-etiket i{ color:#93c5fd; font-size:.68rem; }

.cal-baslik{
  margin:.9rem 0 0;
  font-size:clamp(1.5rem,3.4vw,2.25rem);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.cal-alt{
  margin:.8rem 0 0;
  font-size:.975rem;
  line-height:1.72;
  color:rgba(255,255,255,.78);
}

/* Sayilar: hepsi veritabanindan gercek sayim.
   Uydurma "mutlu musteri" gibi bir rakam BULUNMUYOR. */
.cal-sayilar{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.cal-sayi{
  padding:.55rem .9rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.cal-sayi b{
  display:block;
  font-size:1.25rem;
  font-weight:800;
  line-height:1.1;
}
.cal-sayi span{
  font-size:.72rem;
  color:rgba(255,255,255,.62);
}

/* ==================================================================
   FILTRE
================================================================== */

.cal-govde{ background:#f8fafc; padding:2.5rem 0 3.5rem; }
@media (min-width:1024px){ .cal-govde{ padding:3rem 0 4.5rem; } }

.cal-filtre{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2rem;
}

.cal-filtre-btn{
  padding:.6rem 1.15rem;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#475569;
  font-size:.85rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.cal-filtre-btn:hover{ border-color:#cbd5e1; color:#0f172a; }
.cal-filtre-btn[aria-pressed="true"]{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
.cal-filtre-btn:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.cal-filtre-sayi{
  margin-left:.35rem;
  font-size:.75rem;
  opacity:.65;
}

/* ==================================================================
   IZGARA VE KARTLAR
================================================================== */

.cal-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
  gap:1.25rem;
  align-items:start;     /* kart yukseklikleri icerige gore degisir */
}

.cal-kart{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.cal-kart:hover{
  border-color:#cbd5e1;
  box-shadow:0 16px 34px -18px rgba(15,23,42,.35);
  transform:translateY(-3px);
}
.cal-kart[hidden]{ display:none; }

/* GORSELLER KIRPILMIYOR.
   Buradaki gorseller ekran goruntusu ve panel ciktisi; oranlari cok
   farkli (1920x1080'den 742x210'a). Eskiden 4:3 + object-cover ile
   zorlaniyordu ve genis ciktilar yanlardan %57-62 kirpiliyor,
   rakamlarin yarisi gorunmuyordu. Artik contain: gorsel tam sigiyor,
   artan bosluk notr zeminle doluyor. Oran 16/10 - hem genis ekran
   goruntusu hem panel ciktisi bu kalipta rahat duruyor. */
.cal-gorsel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#f8fafc;
}
.cal-gorsel img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cal-kart:hover .cal-gorsel img{ transform:scale(1.04); }

/* Buyutec dugmesi gorselin uzerine otursun diye referans KART DEGIL,
   gorsel sarmalayicisi. Karta verilseydi dugme en alta, baglantilarin
   uzerine dusuyordu. */
.cal-gorsel-sar{ position:relative; }

.cal-kat-rozet{
  position:absolute;
  left:.7rem;
  top:.7rem;
  padding:.28rem .65rem;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  font-size:.68rem;
  font-weight:700;
  color:#1d4ed8;
  box-shadow:0 4px 10px -4px rgba(15,23,42,.4);
}

.cal-icerik{ padding:1.15rem 1.2rem 1.25rem; }

.cal-kart-baslik{
  margin:0;
  font-size:1.02rem;
  line-height:1.35;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-.01em;
}

.cal-musteri{
  margin:.3rem 0 0;
  font-size:.78rem;
  font-weight:600;
  color:#64748b;
}

.cal-aciklama{
  margin:.65rem 0 0;
  font-size:.875rem;
  line-height:1.68;
  color:#64748b;
}

/* Sonuc kutusu: kartin en dikkat ceken parcasi olmali,
   "ne kazandirdi" sorusunun cevabi burada. */
.cal-sonuc{
  display:flex;
  gap:.55rem;
  margin-top:.9rem;
  padding:.7rem .8rem;
  border-radius:.7rem;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
}
.cal-sonuc i{ color:#16a34a; font-size:.78rem; margin-top:.18rem; flex:0 0 auto; }
.cal-sonuc-metin{
  margin:0;
  font-size:.82rem;
  line-height:1.6;
  color:#166534;
}

.cal-baglantilar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
  padding-top:.9rem;
  border-top:1px solid #f1f5f9;
}
.cal-baglanti{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .75rem;
  border-radius:.55rem;
  font-size:.78rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid #e2e8f0;
  color:#334155;
  background:#fff;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.cal-baglanti:hover{ border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
.cal-baglanti i{ font-size:.7rem; }

/* Bilgi girilmemis gorseller: sade kart, sadece kategori adi.
   Panelde metin doldurulunca kendiliginden anlatili karta doner. */
.cal-kart-sade .cal-icerik{ padding:.9rem 1rem 1rem; }
.cal-kart-sade .cal-kart-baslik{ font-size:.92rem; color:#334155; }

/* Filtre sonrasi hicbir kart kalmadiysa */
.cal-bos{
  padding:2.5rem 1rem;
  text-align:center;
  color:#94a3b8;
  font-size:.9rem;
}

/* ==================================================================
   KAPANIS CAGRISI
================================================================== */

.cal-cta{
  margin-top:2.5rem;
  padding:1.75rem 1.5rem;
  border-radius:1.15rem;
  background:linear-gradient(135deg,#0f172a,#2563eb);
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.cal-cta-metin{ max-width:34rem; }
.cal-cta-baslik{ margin:0; font-size:1.15rem; font-weight:800; }
.cal-cta-alt{ margin:.4rem 0 0; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.74); }
.cal-cta-btnler{ display:flex; flex-wrap:wrap; gap:.6rem; }

.cal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.75rem 1.25rem;
  border-radius:.7rem;
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .2s ease,background .2s ease;
}
.cal-btn:hover{ transform:translateY(-2px); }
.cal-btn-birincil{ background:#fff; color:#0f172a; }
.cal-btn-ikincil{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; }
.cal-btn-ikincil:hover{ background:rgba(255,255,255,.22); }

@media (max-width:639px){
  .cal-cta{ flex-direction:column; align-items:flex-start; }
  .cal-cta-btnler{ width:100%; }
  .cal-btn{ flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce){
  .cal-kart:hover,.cal-btn:hover{ transform:none; }
  .cal-gorsel img,.cal-kart{ transition:none; }
}

/* Vaka sayfasina giden baglantilar */
.cal-baslik-link{ color:inherit; text-decoration:none; }
.cal-baslik-link:hover{ color:#1d4ed8; }
.cal-baglanti-vaka{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.cal-baglanti-vaka:hover{ background:#dbeafe; }