/* Reset بسيط */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0; width:100%; min-height:100vh;
  background:#1b1109;
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#f7f3ee;
}


.menu{
  max-width:1400px;
  min-height:800px;
  margin:40px auto;            /* ← كان ناقص ; */
  background:#140b05;
  border-radius:16px;
  padding:22px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  display:flex;                 /* ← أضف ; هنا */
  justify-content:center;
}


.slider{
  position: relative;
  overflow: hidden;

  max-width: clamp(320px, 92vw, 1050px);
  margin-inline: auto;
  border-radius: 14px;
  background: #1a120a;     
  padding: 8px;                
  direction: rtl;
}

.slides{
  display: flex;
  align-items: center;        
  transition: transform 1.5s  ease;
}


.slide{
  min-width: 100%;
  display: grid;
  place-items: center;         /* توسيط الصورة */
  user-select: none;
}


.slide img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 220px);
  object-fit: contain;              
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}


.slide img:hover{
  transform: scale(1.01);
  box-shadow: 0 14px 24px rgba(0,0,0,.45);
}


.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.45); color:#fff; border:0;
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  font-size: 20px; line-height: 42px;
  display:flex; align-items:center; justify-content:center; z-index: 5;
}
.prev{ inset-inline-start: 6px; }
.next{ inset-inline-end: 6px; }
.nav:hover{ background: rgba(0,0,0,.6); }

/* النقاط */
.dots{
  position:absolute; inset-inline:0; bottom: 8px;
  display:flex; gap:8px; justify-content:center; z-index:6
}
.dots button{ width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.4); cursor:pointer }
.dots button.active{ background:#fff }

/* لايت-بوكس */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; opacity:0; pointer-events:none; transition:opacity .25s ease
}
.lightbox.open{ opacity:1; pointer-events:auto }
.lightbox img{ max-width:90vw; max-height:90vh; border-radius:12px }
.lightbox .close{
  position:absolute; top:16px; inset-inline-end:16px;
  width:40px; height:40px; border-radius:999px; border:0; cursor:pointer;
  font-size:22px; background:rgba(255,255,255,.15); color:#fff
}

@media (max-width:640px){
  .nav{ width:38px; height:38px; font-size:18px }
}