:root{--primary:#005c86;--wa:#25d366;--text:#0f172a;--muted:#64748b;--bg:#ffffff;--radius:18px;--bar-h:76px}
*{box-sizing:border-box} html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;}
.page{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.header{background:var(--primary)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:1080px;margin:0 auto}
.logo{height:28px;display:block}
.menu-btn{background:transparent;border:0;padding:6px}
.menu-btn svg{width:28px;height:28px}
.menu{display:none;background:#fff;border-top:1px solid #e5e7eb}
.menu.open{display:block}
.menu-item,.menu a.menu-item{width:100%;text-align:left;background:#fff;border:0;color:#0f172a;text-decoration:none;display:block;padding:12px 16px;border-bottom:1px solid #eef2f6;font-weight:600}
.menu-item:last-child{border-bottom:0}

/* geniş en üçün */
.content{flex:1;display:flex;flex-direction:column;gap:10px;max-width:100%;margin:0 auto;padding:12px 16px;overflow:hidden}

.slider{display:flex;flex-direction:column;gap:8px;overflow:hidden}
.slider-frame{
  position:relative;
  width:100%;
  aspect-ratio:900/1080; /* şəkil nisbəti */
  max-height:1080px;
  border-radius:20px;
  background:#e7f4fb;
  border:1px solid #dbe8ef;
  padding:8px;
  display:flex;
  overflow:hidden
}
.slides{position:relative;flex:1;border-radius:14px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background:#e1f0f7}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.dots{display:flex;gap:8px;justify-content:center}
.dots .dot{width:8px;height:8px;border-radius:999px;background:#cbd5e1;cursor:pointer}
.dots .dot.active{width:28px;background:var(--primary)}

.btn.full{width:100%;justify-content:center;margin-top:6px;font-size:18px;padding:16px 20px}
.btn.primary{background:var(--primary)}
.bottom-bar{position:fixed;left:0;right:0;bottom:0;background:#ffffff;box-shadow:0 -8px 30px rgba(2,6,23,.08)}
.bottom-wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.bottom-spacer{height:calc(var(--bar-h) + env(safe-area-inset-bottom))}
.btn{display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:24px;text-decoration:none;color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn.wa{background:#25d366}.btn.call{background:var(--primary)}
.modal{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.35)}
.modal.show{display:flex}
.sheet{width:100%;max-width:520px;background:#fff;border-radius:16px 16px 0 0;padding:16px;box-shadow:0 -8px 30px rgba(0,0,0,.15)}
.sheet h3{margin:0 0 8px;color:var(--primary)} .sheet p{margin:0 0 12px;color:var(--muted)}
.modal-actions{display:flex;gap:10px}
.close{margin-top:8px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:12px;padding:10px 14px;font-weight:700}

/* Mobil hündürlük */
@media(max-width:768px){
  .slider-frame{min-height:430px}
}

/* ===== DESKTOP-ONLY: vertical, kəsilməsin ===== */
@media (min-width: 1024px){
  .content{
    max-width: 1200px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .slider{
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }
  .slider-frame{
    width: clamp(820px, 60vw, 1100px);  /* EN */
    aspect-ratio: 900 / 1080;           /* vertical nisbət */
    min-height: auto;
    max-height: none;
    padding: 12px;
    border-radius: 24px;
  }
  .slides{ border-radius: 20px; }
  .slide img{
    width: 100%;
    height: 100%;
    object-fit: contain !important;                /* şəkil kəsilməsin */
    background: #000;                   /* boş yerlərin rəngi */
  }
  .btn.full{ font-size: 18px; padding: 16px 24px; }
}


/* === Burger (Hamburger -> X) === */
.menu-btn{
  position: relative;
  width: 40px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.menu-btn .bar{
  position: absolute; left: 8px; right: 8px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.menu-btn .bar:nth-child(1){ top: 8px; }
.menu-btn .bar:nth-child(2){ top: 15px; }
.menu-btn .bar:nth-child(3){ bottom: 8px; }

.menu-btn.open .bar:nth-child(1){
  top: 15px; transform: rotate(45deg);
}
.menu-btn.open .bar:nth-child(2){
  opacity: 0;
}
.menu-btn.open .bar:nth-child(3){
  bottom: auto; top: 15px; transform: rotate(-45deg);
}

/* Menyu itemlərinin şriftini böyüt */
.menu .menu-item, .menu a.menu-item{
  font-size: 18px;
}

/* Aşağı bar düymələrində mətni tam mərkəzlə */
.bottom-wrap .btn{ justify-content: center; }


/* Center menu items when menu is open */
.menu{ text-align:center; }
.menu.open{
  display:flex !important;
  flex-direction:column;
  align-items:center;
}
.menu.open .menu-item{
  display:inline-flex;
  justify-content:center;
  text-align:center;
  width:100%;
}


@media (min-width: 1024px){
  /* Remove any frame/padding/border around slider on desktop */
  .slider-frame{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    aspect-ratio:auto !important;
    max-height:none !important;
  }
  .slides{
    border-radius:0 !important;
    overflow:visible !important;
    background:transparent !important;
  }
  .slide{
    background:transparent !important;
  }
  .slide img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:80vh !important;
    object-fit:contain !important;
    background:transparent !important;
    display:block;
    margin: 0 auto; /* keep centered */
  }
}


/* === Desktop slider fix: ensure visible area for absolute slides === */
@media (min-width: 1024px){
  .slider-frame{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    aspect-ratio:auto !important;
  }
  .slides{
    position: relative !important;
    min-height: 80vh !important;      /* <-- parent gets height */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow: hidden !important;
    background:transparent !important;
    border-radius:0 !important;
  }
  .slide{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
  }
  .slide img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    background:transparent !important;
    margin:0 auto !important;
    display:block !important;
  }
}