/* ================================
   OMEGA | Sertifikalar – Son Hali
   ================================ */

/* Marka rengi */
:root { --brand:#01b6e9; }

/* -------------------------------------------------
   BANNER (Başlık bölümü – mevcut HTML: .about-hero)
   ------------------------------------------------- */
.about-hero{
  --ink:#0f172a;
  /* arka plan görseli istersen: 
     --hero:url('/Uploads/Images/your-hero.jpg'); */
  color:var(--ink);
  background:
    linear-gradient(180deg,#f6fbff 0%, #ffffff 100%)
    /* , var(--hero) center/cover no-repeat */ ;
  min-height:clamp(220px,38vh,320px);
  display:flex; align-items:center; text-align:center;
  border-bottom:1px solid #eef2f7;
}
.about-hero-content{ width:min(1200px,94%); margin:0 auto; padding:clamp(18px,4vw,32px) 0; }
.about-hero h1{
  margin:0; font-weight:900; letter-spacing:.01em; line-height:1.06;
  font-size:clamp(34px,6.5vw,64px);
}
.about-hero h1::after{
  content:""; display:block; width:140px; height:8px; border-radius:8px;
  background:var(--brand); margin:14px auto 0;
}
/* (Opsiyonel) karanlık görselli banner için:
.about-hero.about-hero--image{
  color:#fff;
  background:
    linear-gradient(180deg,rgba(8,22,30,.6),rgba(8,22,30,.5)),
    var(--hero) center/cover no-repeat;
  border-bottom-color:rgba(255,255,255,.15);
}
*/

/* -------------------------------------------------
   Başlık (sayfa içinde tekrar kullanmak istersen)
   ------------------------------------------------- */
.sertifika-baslik{
  margin:0 0 16px; text-align:center;
  font:900 clamp(22px,3.6vw,40px)/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.sertifika-baslik::after{
  content:""; display:block; width:120px; height:6px; border-radius:6px;
  background:var(--brand); margin:10px auto 0;
}

/* -------------------------------------------------
   Grid + Kartlar
   ------------------------------------------------- */

/* container ortalansın */
.sertifikalar-container{
  width:min(1200px,94%);
  margin-inline:auto;
  flex:1;
  padding-top:8px;
  margin-bottom:60px; /* footer boşluğu */
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Masaüstü: 3 sütun (isteğe göre 6’dan sadeleştirildi) */
.sertifika-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;               /* nefes */
  align-items:start;
}

/* Kart stili */
.sertifika-kart{
  background:#fff;
  padding:12px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  text-align:center;
  cursor:pointer;
  border:1px solid #edf1f6;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Görsel boyutu */
.sertifika-kart img{
  width:100%;
  height:340px;           /* 3 sütunda daha dolgun görünüm */
  object-fit:contain;
  border-radius:6px;
  background:#fff;
  transition:transform .18s ease;
}

/* Hover efekti */
.sertifika-kart:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  border-color:rgba(1,182,233,.35); /* #01b6e9 tonu */
}
.sertifika-kart:hover img{ transform:scale(1.03); }

/* -----------------
   LIGHTBOX
   ----------------- */
#lightbox{
  display:none; /* açılınca JS ile flex */
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.8);
  justify-content:center; align-items:center;
  padding:24px;
}
#lightbox[aria-hidden="false"]{ display:flex; }

#lightbox-img{
  max-width:90%; max-height:90%;
  border-radius:8px; background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.5);
}
#lightbox-close{
  position:fixed; top:20px; right:30px; z-index:10000;
  background:transparent; border:none; color:#fff;
  font-size:36px; line-height:1; cursor:pointer;
}

/* -----------------
   Breakpoints
   ----------------- */
@media (max-width:1024px){
  .sertifika-grid{ grid-template-columns:repeat(2,1fr); }
  .sertifika-kart img{ height:300px; }
}
@media (max-width:560px){
  .sertifika-grid{ grid-template-columns:1fr; }
  .sertifika-kart img{ height:200px; }
}