/* 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}

/* Top nav */
.site-nav{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #e5e7eb}
.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:#0f172a; font-weight:800; letter-spacing:.2px; font-size:20px}
.nav-links{display:flex; align-items:center; gap:8px}
.nav-links a{color:#0f172a; padding:8px 10px; border-radius:10px; font-weight:600}
.nav-links a:hover{background:#f3f4f6}
.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:#fff; 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}

/* Landing hero */
.hero-landing{
  margin:16px 0; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb;
  background: radial-gradient(1200px 600px at 10% -10%, #e0f2fe 0%, transparent 60%),
              radial-gradient(900px 500px at 110% -20%, #fae8ff 0%, transparent 60%),
              linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; padding:28px}
.hero h1{font-size:32px; margin:0 0 8px 0}
.hero p{color:#475569; margin:0 0 16px 0}
.search-hero{display:flex; gap:8px; flex-wrap:wrap}
.search-hero input[type="text"]{flex:1; min-width:220px; background:#fff; border:1px solid #cbd5e1; border-radius:10px; padding:12px 14px; font-size:16px}
.search-hero button{padding:12px 16px; border-radius:10px; border:0; background:#2563eb; color:#fff; font-weight:700; cursor:pointer}
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.hero-illu{display:flex; align-items:center; justify-content:center}
.hero-illu div{height:220px; width:100%; border-radius:14px; background:
  repeating-linear-gradient(45deg, #e2e8f0 0, #e2e8f0 8px, #f1f5f9 8px, #f1f5f9 16px);
  border:1px dashed #cbd5e1; color:#64748b; display:flex; align-items:center; justify-content:center}

/* 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}