:root{
  --brand:#c62828;
  --text:#222;
  --muted:#666;
  --radius:12px;
  --container:1040px;
  --hero-h:40vh;   /* hero yüksekliği */
  --hero-pos:10%;  /* dikey hizalama: 5% daha yukarı, 30% daha aşağı gösterir */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#f7f7f8}

.topbar{background:var(--brand);color:#fff;text-align:center;padding:.9rem .75rem;font-weight:800;letter-spacing:.3px}

/* HERO */
.hero{
  height:var(--hero-h); min-height:260px; max-height:420px;
  position:relative;
  background:url("images/shop.jpg") center var(--hero-pos) / cover no-repeat;
  display:grid; place-items:center; padding:1rem;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.hero-box{position:relative;z-index:1;text-align:center;color:#fff;padding:1rem 1.2rem;border-radius:var(--radius);backdrop-filter:saturate(120%) blur(2px)}
.hero h1{margin:.2rem 0 .45rem;font-size:clamp(22px,3.2vw,32px);font-weight:900}
.addr{margin:0 0 .7rem;opacity:.95}
.hero-btns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:.55rem .9rem;border-radius:10px;background:#fff;color:var(--brand);text-decoration:none;font-weight:800}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:transparent;color:#fff;border:1.6px solid #fff}
.btn.dark{background:#111;color:#fff}
.btn.fb{background:#1877f2;color:#fff}

/* İçerikler */
.container{max-width:var(--container);margin:0 auto;padding:16px}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.06);padding:1.1rem 1rem;margin:16px 0}
h2{margin:.2rem 0 .7rem}

/* Galeri grid */
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;cursor:pointer;background:#ddd;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:transform .12s ease,box-shadow .12s ease}
.thumb:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12)}

.muted{color:var(--muted)}
.contact{list-style:none;padding:0;margin:.2rem 0 .8rem}
.contact li{margin:.25rem 0;font-size:1.05rem}
.pillrow{display:flex;gap:.5rem;flex-wrap:wrap}

/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.6rem}
.pg-btn{background:#eee;border:1px solid #ddd;padding:.45rem .75rem;border-radius:10px;cursor:pointer;font-weight:700}
.pg-btn:hover{background:#e6e6e6}
.pg-btn:disabled{opacity:.5;cursor:not-allowed}
.pg-info{color:var(--muted);min-width:64px;text-align:center;font-weight:700}

/* Lightbox */
footer{text-align:center;color:#555;padding:18px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox.open{display:flex}
.lb-img{max-width:95vw;max-height:92vh;object-fit:contain}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(0,0,0,.4);color:#fff;border:none;cursor:pointer;border-radius:10px;padding:.35rem .6rem;font-size:28px}
.lb-close{top:10px;right:12px}
.lb-prev{top:50%;left:12px;transform:translateY(-50%)}
.lb-next{top:50%;right:12px;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(0,0,0,.65)}