.kf-media-hero{ padding:170px 5% 50px; text-align:center; position:relative; z-index:10; }
.kf-media-hero h1{ font-size:clamp(30px,4.2vw,48px); font-weight:900; color:var(--primary); margin:0 0 12px; }
.kf-media-hero p{ font-size:15.5px; color:var(--text-muted); font-weight:600; max-width:640px; margin:0 auto; }

.kf-media-wrap{ max-width:1500px; margin:0 auto 100px; padding:0 5%; position:relative; z-index:10; }

.kf-media-year-title{ display:flex; align-items:center; gap:14px; margin:44px 0 22px; }
.kf-media-year-title h2{ font-size:1.7rem; font-weight:900; color:var(--primary); margin:0; white-space:nowrap; }
.kf-media-year-title::after{ content:''; flex:1; height:2px; background:linear-gradient(to left, rgba(11,94,101,.15), transparent); }

.kf-media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:26px; }

.kf-media-album-card{
  background:#fff; border-radius:20px; overflow:hidden; border:1px solid rgba(11,94,101,.08);
  box-shadow:0 10px 26px rgba(11,94,101,.06); transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; cursor:pointer;
}
.kf-media-album-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(11,94,101,.12); }
.kf-media-album-cover{ height:190px; position:relative; background:#e2ecec; background-size:cover; background-position:center; }
.kf-media-album-count{
  position:absolute; top:14px; inset-inline-start:14px; background:rgba(11,94,101,.82); color:#fff;
  font-size:12px; font-weight:800; padding:5px 12px; border-radius:20px; display:flex; align-items:center; gap:6px;
}
.kf-media-album-body{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.kf-media-album-body h3{ font-size:16.5px; font-weight:800; color:var(--text-dark); margin:0; line-height:1.5; }
.kf-media-album-btn{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--primary); color:#fff; border:none; border-radius:12px; padding:10px; font-weight:700;
  font-size:13.5px; font-family:inherit; cursor:pointer; transition:background .25s ease;
}
.kf-media-album-btn:hover{ background:var(--primary-light); }

.kf-media-empty{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.kf-media-empty i{ font-size:54px; color:rgba(212,175,55,.4); margin-bottom:18px; display:block; }

/* ألبوم مفتوح */
#kf-media-album-view{ display:none; }
.kf-media-album-header{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.kf-media-album-header h2{ font-size:1.9rem; color:var(--primary); font-weight:900; margin:0; }
.kf-media-album-header span{ color:var(--secondary); font-size:1.1rem; font-weight:700; }
.kf-media-back-btn{
  background:transparent; border:1px solid var(--secondary); color:var(--primary); padding:9px 20px;
  border-radius:30px; font-weight:700; font-size:13.5px; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:background .25s ease, color .25s ease;
}
.kf-media-back-btn:hover{ background:var(--secondary); color:#fff; }

.kf-media-item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.kf-media-item{
  position:relative; height:190px; border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.08); background:#000;
  opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;
}
.kf-media-item.is-in{ opacity:1; transform:translateY(0); }
.kf-media-item img, .kf-media-item video{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.kf-media-item:hover img, .kf-media-item:hover video{ transform:scale(1.08); }
.kf-media-item-overlay{
  position:absolute; inset:0; background:rgba(11,94,101,.55); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:#fff; opacity:0; transition:opacity .3s ease;
}
.kf-media-item:hover .kf-media-item-overlay{ opacity:1; }
.kf-media-item-overlay i{ font-size:1.8rem; color:var(--secondary); }
.kf-media-item-overlay span{ font-size:13px; font-weight:700; }

/* الفياور (المشغل) */
#kf-media-lightbox{
  position:fixed; inset:0; z-index:100000; background:rgba(8,20,23,.88);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
#kf-media-lightbox.open{ opacity:1; visibility:visible; }
.kf-media-lb-stage{ width:100%; max-width:1050px; display:flex; flex-direction:column; align-items:center; }
.kf-media-lb-frame{ width:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.kf-media-lb-frame img, .kf-media-lb-frame video{ max-width:100%; max-height:72vh; border-radius:14px; object-fit:contain; }
.kf-media-lb-caption{
  margin-top:18px; color:#fff; font-weight:700; font-size:15px; text-align:center; opacity:.9; min-height:22px;
}
.kf-media-lb-btn{
  position:absolute; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; transition:background .25s ease, transform .25s ease; z-index:5;
}
.kf-media-lb-btn:hover{ background:var(--secondary); color:var(--primary-dark); }
.kf-media-lb-close{ top:-64px; inset-inline-end:0; position:fixed; top:26px; inset-inline-end:30px; }
.kf-media-lb-prev{ inset-inline-start:-64px; top:50%; transform:translateY(-50%); }
.kf-media-lb-next{ inset-inline-end:-64px; top:50%; transform:translateY(-50%); }
.kf-media-lb-count{ position:fixed; top:34px; inset-inline-start:30px; color:rgba(255,255,255,.65); font-weight:700; font-size:14px; letter-spacing:1px; }

@media (max-width:900px){
  .kf-media-lb-prev{ inset-inline-start:6px; }
  .kf-media-lb-next{ inset-inline-end:6px; }
}
@media (max-width:640px){
  .kf-media-hero{ padding-top:140px; }
  .kf-media-album-header{ flex-direction:column; align-items:flex-start; }
  .kf-media-lb-close{ top:16px; inset-inline-end:16px; width:42px; height:42px; }
  .kf-media-lb-count{ top:22px; }
}