/* Reset-ish & base */
*{box-sizing:border-box} 

body{
  margin:0; color:#0f172a; background:#f8fafc;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.container{margin:0 auto; max-width: 1100px; padding: 10px 16px;}
a{text-decoration:none}

 header {
      background: #0a1733;
      color: #fff;
      padding: 1rem 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .navbar-brand {
      font-weight: 700;
      font-size: 1.4rem;
      letter-spacing: 0.5px;
    }
    .navbar-nav .nav-link {
      color: #fff !important;
      margin: 0 10px;
      font-weight: 500;
    }

/* Top nav */
.site-nav{position:sticky; top:0; z-index:1000;}
.site-nav .wrap{max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand a{color:#fff; font-weight:800; letter-spacing:.2px; font-size:20px}
.nav-links{display:flex; align-items:center; gap:8px}
.nav-links a{color:#fff; padding:8px 10px; border-radius:10px; font-weight:600}
.nav-links a:hover{background:#0a1733;}
.nav-cta{background:#111827; color:#fff !important; border-radius:10px; padding:8px 12px}
.nav-toggle{display:none; background:#e5e7eb; border:1px solid #cbd5e1; padding:8px 10px; border-radius:10px; font-weight:700; cursor:pointer}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute; left:0; right:0; top:56px;
    display:none; flex-direction:column; gap:6px; background:#0a1733; border-bottom:1px solid #e5e7eb; padding:10px 16px 14px;
  }
  .nav-links.open{display:flex}
}

/* Buttons & chips */
.btn{display:inline-block; background:#2563eb; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700}
.btn.light{background:#e5e7eb; color:#111827}
.chip{display:inline-block; background:#eef2ff; color:#3730a3; padding:4px 8px; border-radius:999px; font-size:12px}

/* Cards & grid */
.card{background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 4px 16px rgba(15,23,42,.05)}
.pad{padding:12px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px}
.card img{width:100%; height:220px; object-fit:cover; border-top-left-radius:14px; border-top-right-radius:14px}


/* Section header */
.section-head{display:flex; align-items:center; justify-content:space-between; margin:10px 0 12px}
.section-head h2{margin:0}
.section-head a{font-weight:700; color:#2563eb}

/* Gallery overlay card */
.card.media{position:relative}
.card.media .overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px; background:linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 100%);
  color:#fff; font-size:13px; border-bottom-left-radius:14px; border-bottom-right-radius:14px
}
.card.media .title{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card.media:hover img{transform:scale(1.02)}
.card.media img{transition:transform .25s ease}

/* Pager */
.pager{display:flex; gap:8px; align-items:center; justify-content:center; margin:16px 0}
.pager a,.pager span{padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; color:#111827}
.pager .active{background:#111827; color:#fff; border-color:#111827}

/* Photo modal rails (vasak/parem/all) */
:root{--railW: 180px; --railW-lg: 280px; --railBottomH: 120px}
@media (min-width:1280px){ :root{ --railW: var(--railW-lg); --railBottomH: 140px } }
.modal-fullscreen{position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); color:#fff}
.modal-center{position:absolute; top:16px; bottom:calc(var(--railBottomH) + 16px); left:calc(var(--railW) + 16px); right:calc(var(--railW) + 16px); display:flex; flex-direction:column; gap:10px}
.viewer-stage{flex:1; background:#000; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid #334155}
.viewer-stage img{max-width:100%; max-height:100%; object-fit:contain}
.arrow-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(15,23,42,.7); border:1px solid #475569; color:#fff; padding:10px 12px; border-radius:12px; font-weight:700}
.arrow-left{left:24px} .arrow-right{right:24px}
.ad-rail{position:fixed; top:16px; bottom:calc(var(--railBottomH) + 16px); width:var(--railW); background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center}
.ad-rail.left{left:16px} .ad-rail.right{right:16px}
.ad-bottom{position:fixed; left:16px; right:16px; bottom:16px; height:var(--railBottomH); background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center}
.ad-slot{width:100%; height:100%; background:repeating-linear-gradient(45deg,#0f172a 0,#0f172a 10px,#111827 10px,#111827 20px); color:#94a3b8; display:flex; align-items:center; justify-content:center; border-radius:10px; text-align:center; padding:8px}
@media (max-width:980px){ .ad-rail{display:none} .modal-center{left:16px; right:16px} }
.btn-close{background:#ef4444; color:#fff; padding:8px 12px; border-radius:10px; font-weight:700}
.small{font-size:12px; color:#64748b}