/* =============== RESET =============== */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
img,svg {display:block;max-width:100%}
ul{list-style:none}
button{
  background:none;
  border:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  padding:0;
}

.page {
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

/* =============== HEADLINE + ARROW =============== */
.demo-title {
  font-size: clamp(2rem, 1.2rem + 1.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
  color: #fff;
}
.arrow-wrap {
  width: 120px;
  height: 80px;
  margin: 0 auto 32px;
}
.arrow {
  width: 120px;
  height: 80px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}

/* =============== SHELF BLOCK =============== */
.shelf-block{
  width:100%;
  margin:0 auto 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.shelf-head{
  font-size:clamp(1rem,.8rem + .5vw,1.25rem);
  font-weight:600;
  color:#fff;
  margin-bottom:16px;
  opacity:.8;
  letter-spacing:-.02em;
}
.shelf-wrap{
  position:relative;
  width:100%;
  max-width:900px; /* raf uzunluğu sabit */
  padding-bottom:110px; /* raf + gölge + buton mesafesi için boşluk */
}

/* =============== MAG ROW LAYOUT =============== */
.mag-row{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center; /* ortala */
  gap:16px;
  padding:0 60px; /* soldan sağdan boşluk raf üstünde */
  flex-wrap:nowrap;
}

/* her varyant için genişlik davranışı */
.mag-row--1 .mag{ flex:0 1 260px; max-width:260px; margin-left:auto; margin-right:auto; }
.mag-row--2 .mag{ flex:0 1 240px; max-width:240px; }
.mag-row--3 .mag{ flex:0 1 200px; max-width:220px; }
.mag-row--4 .mag{ flex:0 1 170px; max-width:180px; }
.mag-row--5 .mag{ flex:0 1 140px; max-width:160px; }
.mag-row--6 .mag{ flex:0 1 120px; max-width:140px; }

/* ortak mag kutusu */
.mag{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .2s ease;
  transform-origin:center bottom;
}
.mag:hover{
  transform:translateY(-8px) scale(1.08);
}

/* link tüm kapağı tıklanabilir yapıyor */
.mag-link{
  text-decoration:none;
  color:inherit;
  display:block;
  width:100%;
}

/* kapak görseli */
.mag-cover{
  width:100%;
  aspect-ratio:3/4;
  min-height:180px;
  background:#000;
  border:2px solid rgba(0,0,0,.7);
  border-radius:2px;
  box-shadow:
    0 20px 30px rgba(0,0,0,.8),
    0 2px 4px rgba(0,0,0,.6),
    0 0 2px rgba(255,255,255,.15) inset;
  position:relative;
  overflow:hidden;
  padding:12px;
  color:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  font-family:'Inter', system-ui, sans-serif;
  background-size:cover;
  background-position:center;
}

/* kapak varyantları (placeholder) */
.cover1{ background: radial-gradient(circle at 30% 30%, #777 0%, #1a1a1a 60%); }
.cover2{ background: radial-gradient(circle at 30% 30%, #00d4ff 0%, #003c46 70%); }
.cover3{
  background:
    radial-gradient(circle at 30% 30%, #00c1ff 0%, #003 70%),
    radial-gradient(circle at 70% 70%, #6a00ff 0%, #001 60%);
  background-blend-mode: screen;
  background-color:#003;
}
.cover4{ background: radial-gradient(circle at 30% 30%, #fff 0%, #003c7a 60%); color:#0a1a3a; font-weight:600; }
.cover5{ background: radial-gradient(circle at 30% 30%, #fff 0%, #444 70%); color:#0a0a0a; font-weight:600; }
.cover6{ background: radial-gradient(circle at 30% 30%, #ffe29a 0%, #a86a1d 70%); color:#1a0f00; font-weight:600; }

/* üst sol label */
.label.red{
  background:#d9272a;
  color:#fff;
  font-size:10px;
  line-height:1.1;
  font-weight:700;
  padding:6px;
  text-align:center;
  width:48px;
  box-shadow:0 4px 4px rgba(0,0,0,.5);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.lion-head{
  font-size:48px;
  line-height:1;
  margin-left:auto;
  opacity:.9;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.8));
}

/* kapak alt textleri */
.mag-text{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  color:currentColor;
  text-align:left;
}
.mag-text.light{
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.mag-text .line.big{
  font-size:11px;
  font-weight:700;
  padding-left: 2px;
  line-height:1.2;
  display:inline-block;
  padding:4px 8px;
  margin-bottom:4px;
  background:rgba(0,0,0,.6);
  border-radius:999px;
  color:#fff;
}
.mag-text .line.small{
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  opacity:.9;
}
.mag-text .line.script{
  font-size:20px;
  font-style:italic;
  font-weight:600;
  margin-bottom:4px;
}

/* satın al butonu */
.buy-btn{
  margin-top:12px;
  background:linear-gradient(#ffffff,#dcdcdc);
  color:#1a1a1a;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  border-radius:6px;
  box-shadow:
    0 8px 16px rgba(0,0,0,.6),
    0 2px 2px rgba(255,255,255,.4) inset;
  border:1px solid rgba(0,0,0,.6);
  padding:10px 14px;
  min-width:100px;
  transition:all .15s ease;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.buy-btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 12px 20px rgba(0,0,0,.8),
    0 2px 2px rgba(255,255,255,.4) inset;
}

/* =============== WOOD SHELF =============== */
.wood-shelf{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:60px;
  border-radius:3px;
  background:
    repeating-linear-gradient(
      -10deg,
      rgba(110,60,15,.4) 0px,
      rgba(110,60,15,.4) 4px,
      rgba(255,205,120,.2) 4px,
      rgba(255,205,120,.2) 8px
    ),
    linear-gradient(#e4a764 0%, #c87a2d 100%);
  box-shadow:
    0 30px 30px rgba(0,0,0,.8),
    0 4px 6px rgba(0,0,0,.7),
    0 0 4px rgba(0,0,0,.8) inset;
}
.wood-leg{
  position:absolute;
  width:140px;
  height:70px;
  bottom:-60px;
  background:
    repeating-linear-gradient(
      -10deg,
      rgba(110,60,15,.4) 0px,
      rgba(110,60,15,.4) 4px,
      rgba(255,205,120,.2) 4px,
      rgba(255,205,120,.2) 8px
    ),
    linear-gradient(#c87a2d 0%, #8b4a16 100%);
  box-shadow:0 20px 20px rgba(0,0,0,.8);
  clip-path: polygon(0 0,100% 0,70% 100%,0% 100%);
}
.wood-leg--left{
  left:80px;
}
.wood-leg--right{
  right:80px;
  transform:scaleX(-1);
}

/* =============== RESPONSIVE =============== */
/* tablet ve altı */
@media (max-width:900px){
  .shelf-wrap{
    max-width:100%;
  }
  .mag-row{
    padding:0 32px;
  }

  .mag-row--1 .mag{ flex:0 1 60%; max-width:70%; }
  .mag-row--2 .mag{ flex:0 1 40%; max-width:45%; }
  .mag-row--3 .mag{ flex:0 1 28%; max-width:30%; }
  .mag-row--4 .mag{ flex:0 1 22%; max-width:24%; }
  .mag-row--5 .mag{ flex:0 1 18%; max-width:20%; }
  .mag-row--6 .mag{ flex:0 1 15%; max-width:16%; }

  .wood-leg--left{left:40px;}
  .wood-leg--right{right:40px;}
}

/* mobil dar ekran */
@media (max-width:560px){
  .mag-row{
    gap:12px;
    padding:0 16px;
  }

  /* mobilde hepsi aynı davranış: flex-wrap varsa sıkışmadan küçül */
  .mag-row{
    flex-wrap:wrap;
    justify-content:center;
  }

  .mag-row .mag{
    flex:0 1 calc(50% - 12px);
    max-width:calc(50% - 12px);
  }

  .mag-row--1 .mag{
    flex:0 1 80%;
    max-width:320px;
  }

  .mag-cover{
    padding:10px;
  }

  .lion-head{
    font-size:36px;
  }

  .mag-text .line.big{font-size:14px;}
  .mag-text .line.script{font-size:18px;}
  .mag-text .line.small{font-size:11px;}

  .buy-btn{
    font-size:13px;
    padding:9px 12px;
    min-width:auto;
  }

  .wood-leg{
    width:100px;
  }
  .wood-leg--left{left:24px;}
  .wood-leg--right{right:24px;}
}

/* ============ MAG / PDF COVER IMG ============ */
.mag-cover{
  position:relative;
  overflow:hidden;
}
.mag-cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.mag-cover > *:not(.mag-cover-img){
  position:relative;
  z-index:1;
}



/* =============== CUSTOM: MAG BUTTON GROUPS =============== */
.mag-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.mag-btn{
  background:linear-gradient(#ffffff,#dcdcdc);
  color:#1a1a1a;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  border-radius:6px;
  box-shadow:
    0 8px 16px rgba(0,0,0,.6),
    0 2px 2px rgba(255,255,255,.4) inset;
  border:1px solid rgba(0,0,0,.6);
  padding:10px 14px;
  min-width:110px;
  transition:all .15s ease;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  flex:1 1 calc(50% - 4px);
  text-align:center;
  white-space:nowrap;
}

.mag-btn--primary{
  background:linear-gradient(#ffdd66,#f4b400);
}

.mag-btn--secondary{
  background:linear-gradient(#ffffff,#e6e6e6);
}

.mag-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.7),
    0 2px 2px rgba(255,255,255,.6) inset;
}

.mag-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 4px 10px rgba(0,0,0,.7),
    0 1px 1px rgba(255,255,255,.4) inset;
}

/* =============== CUSTOM: SCROLLABLE SHELVES (1 & 5 MAG) =============== */
.shelf-wrap--scroll-1 .mag-row,
.shelf-wrap--scroll-5 .mag-row{
  overflow-x:auto;
  overflow-y:visible;
  justify-content:flex-start;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.4) transparent;
}

.shelf-wrap--scroll-1 .mag-row::-webkit-scrollbar,
.shelf-wrap--scroll-5 .mag-row::-webkit-scrollbar{
  height:8px;
}

.shelf-wrap--scroll-1 .mag-row::-webkit-scrollbar-track,
.shelf-wrap--scroll-5 .mag-row::-webkit-scrollbar-track{
  background:transparent;
}

.shelf-wrap--scroll-1 .mag-row::-webkit-scrollbar-thumb,
.shelf-wrap--scroll-5 .mag-row::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.35);
  border-radius:999px;
}

/* 1 dergi gösterilen raf: kart genişliğini sabitle, daha fazlası eklendikçe yana kaydır */
.shelf-wrap--scroll-1 .mag-row.mag-row--1 .mag{
  flex:0 0 260px;
  max-width:260px;
  margin-left:0;
  margin-right:16px;
}

/* 5 dergi gösterilen raf: kart genişliğini sabitle */
.shelf-wrap--scroll-5 .mag-row.mag-row--5 .mag{
  flex:0 0 140px;
  max-width:160px;
}

/* mobil uyumlu: butonlar ve scroll raflar */
@media (max-width:900px){
  .mag-actions{
    gap:6px;
  }
  .mag-btn{
    flex:1 1 100%;
    font-size:13px;
    padding:9px 10px;
    min-width:0;
  }

  .shelf-wrap--scroll-1 .mag-row.mag-row--1 .mag{
    flex:0 0 70%;
    max-width:80%;
    margin-right:12px;
  }
  .shelf-wrap--scroll-5 .mag-row.mag-row--5 .mag{
    flex:0 0 38%;
    max-width:42%;
  }
}



/* =============== DİNAMİK RAF (RANGE BAR İLE 1-6 ARASI) =============== */
.dynamic-shelf{
  margin-top:80px;
}

.dynamic-shelf__title{
  text-align:center;
  font-size:22px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.dynamic-control{
  max-width:480px;
  margin:0 auto 24px auto;
  text-align:left;
}

.dynamic-control__label{
  display:block;
  font-size:14px;
  margin-bottom:8px;
}

.dynamic-control__range-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.dynamic-control__value{
  min-width:32px;
  text-align:center;
  font-weight:700;
  font-size:16px;
}

/* Range input temel stil */
#magCountRange{
  flex:1 1 auto;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#f4b400,#ffdd66);
  outline:none;
}

#magCountRange::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(0,0,0,.5);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
  cursor:pointer;
}

#magCountRange::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(0,0,0,.5);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
  cursor:pointer;
}

/* Dinamik raf için scroll ayarları */
.shelf-wrap--scroll-dynamic .mag-row{
  overflow-x:auto;
  overflow-y:visible;
  justify-content:flex-start;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.4) transparent;
}

.shelf-wrap--scroll-dynamic .mag-row::-webkit-scrollbar{
  height:8px;
}

.shelf-wrap--scroll-dynamic .mag-row::-webkit-scrollbar-track{
  background:transparent;
}

.shelf-wrap--scroll-dynamic .mag-row::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.35);
  border-radius:999px;
}

/* Kart genişlikleri – 1..6 arası sayıda kartı yatayda taşır */
.shelf-wrap--scroll-dynamic .mag-row .mag{
  flex:0 0 140px;
  max-width:160px;
}

@media (max-width:900px){
  .dynamic-shelf{
    margin-top:56px;
  }

  .dynamic-shelf__title{
    font-size:18px;
  }

  .dynamic-control{
    max-width:100%;
    padding:0 24px;
  }

  .dynamic-control__range-wrap{
    gap:10px;
  }

  .dynamic-control__value{
    font-size:14px;
  }

  .shelf-wrap--scroll-dynamic .mag-row .mag{
    flex:0 0 42%;
    max-width:46%;
  }
}


/* =============== OVERRIDE: SCROLL BARLAR KALDIRILDI, RAF KARTLARI ORTALANDI =============== */

/* Tüm özel scroll'lu raflarda (1'li, 5'li ve dinamik) scrollbar kapalı, içerik ortalı */
.shelf-wrap--scroll-1 .mag-row,
.shelf-wrap--scroll-5 .mag-row,
.shelf-wrap--scroll-dynamic .mag-row{
  overflow-x:visible;
  overflow-y:visible;
  justify-content:center;
}