/* =========================
   GOOGLE FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

/* =========================
   Base
========================= */

:root{
  --red:#b10f2e;
  --navy:#0c2d57;
  --navy2:#0a2546;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --light:#f3f6fb;
  --radius:18px;
  --shadow:0 14px 35px rgba(15,23,42,.12);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg) !important;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

/* =========================
   BOARD TITLE (Garantili)
========================= */

/* Class varsa */
.board-title{
  text-align:center !important;
  font-size:40px;
  font-weight:800;
  margin:80px 0 50px !important;
}

/* Class yoksa da çalışsın */
.pagehero h1,
.section h1,
body h1{
  text-align:center !important;
  font-weight:800 !important;
  margin-top:80px !important;
}

/* =========================
   Layout
========================= */

.site-container{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}

.section{
  padding:60px 0;
}

/* =========================
   BOARD – FINAL
========================= */

.boardFeatured{
  display:flex;
  justify-content:center;
  margin-bottom:60px;
}

.boardFeatured .member{
  width:300px;
  max-width:100%;
}

.boardGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.member{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--shadow);
  transition:.25s ease;
  position:relative;
}

.member:hover{
  transform:translateY(-6px);
}

.member__photo{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--light);
  position:relative;
}

.member--featured .member__photo{
  height:300px;
  aspect-ratio:auto;
}

.member__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.3s;
}

.member__info{
  padding:18px 14px 22px;
  text-align:center;
}

.member__info h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:700;
}

.member__info p{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}

/* =========================
   BOARD BIO OVERLAY
========================= */

.board-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.75);
  color:#fff;
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  font-size:14px;
  line-height:1.6;
  transition:.3s;
}

.member:hover .board-overlay{
  opacity:1;
}

.member:hover .member__photo img{
  filter:brightness(.45);
}

/* =========================
   Pagination
========================= */

.pagination{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:50px;
}

.pagination a{
  padding:10px 16px;
  border-radius:999px;
  background:#f1f5f9;
  font-weight:700;
  transition:.2s;
}

.pagination a.active{
  background:var(--navy);
  color:#fff;
}

.pagination a:hover{
  background:var(--navy);
  color:#fff;
}

/* =========================
   Responsive
========================= */

@media (max-width:1100px){
  .boardGrid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:860px){
  .boardGrid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:520px){
  .boardGrid{ grid-template-columns:1fr; }
}