/* =========================================
   Hero Slider – OnePieceZone
   สไตล์หลักของสไลด์รูปใหญ่ด้านบน
   ========================================= */

/* ตัวครอบ Hero ทั้งบล็อก (เต็มความกว้างหน้าจอ) */
.hero-shell{
  width:100%;

/* กรอบด้านในของ Hero ให้กึ่งกลาง และมีระยะห่างซ้ายขวาเท่ากับหน้าเว็บหลัก */
.hero-viewport{
  max-width:1280px;                         /* กว้างสุดเท่ากับ container หลัก */
  margin-left:auto;                         /* จัดกึ่งกลางแนวนอน */
  margin-right:auto;
  padding-top:80px;                         /* เว้นระยะห่างด้านบนเล็กน้อย */
  padding-right:16px;
  padding-bottom:12px;
  padding-left:16px;
}

/* กล่องที่เก็บสไลด์ทั้งหมด (ภาพทุกภาพซ้อนอยู่ในนี้) */
.hero-wrap{
  position:relative;                        /* ให้ลูก (สไลด์ / ปุ่ม / แคปชัน) วางแบบ absolute ได้ */
  width:100%;
  overflow:hidden;                          /* ซ่อนส่วนที่ล้นออกจากกรอบ (ตอนเลื่อนสไลด์) */
  background-color:#000000;                 /* สีพื้นดำ เผื่อโหลดรูปช้า */
}

/* -------------------------
   Slide base
   สไลด์แต่ละรูป (ภาพ 1, 2, 3 ...)
   ------------------------- */

/* สไลด์ 1 ใบ (ค่าเริ่มต้นให้ทุกใบซ่อนอยู่ และเตรียมแอนิเมชันเลื่อนเข้ามา) */
.hero-slide{
  position:absolute;                        /* ซ้อนทับกันในตำแหน่งเดียว */
  inset:0;                                  /* top right bottom left = 0 (เต็มพื้นที่) */
  opacity:0;                                /* เริ่มต้นโปร่งใส (ไม่เห็น) */
  transform:translateX(100%);               /* เลื่อนไปอยู่ด้านขวานอกจอ */
  transition-property:opacity,
    transform;                              /* เมื่อสลับสไลด์ จะค่อย ๆ เปลี่ยนความโปร่งใส + ตำแหน่ง */
  transition-duration:0.4s;                 /* ระยะเวลาแอนิเมชัน 0.4 วินาที */
  transition-timing-function:ease-in-out;   /* การเร่ง/ชะลอแอนิเมชันให้ดูนุ่มนวล */
}

/* รูปภาพภายในแต่ละสไลด์ */
.hero-slide img{
  width:100%;                               /* ให้เต็มความกว้างกรอบ */
  height:100%;                              /* สูงเต็มกรอบ */
  object-fit:cover;                         /* ครอบรูปแบบเต็มกรอบ ไม่ให้ยืดผิดสัดส่วน */
  display:block;                            /* ป้องกันช่องว่างด้านล่างภาพ */
  border-radius: 15px;                      /* ขอบสี่เหลี่ยมปกติ (ไม่มีมุมโค้ง) */
}

/* สไลด์ที่กำลังแสดงอยู่ (มี class is-active) */
.hero-slide.is-active{
  opacity:1;                                /* มองเห็นเต็ม */
  transform:translateX(0);                  /* อยู่ตรงกลางภาพพอดี */
  z-index:2;                                /* ให้อยู่ด้านบนสุด */
}

/* สไลด์ก่อนหน้า (ใช้ตอนเลื่อนกลับไปสไลด์เก่า) */
.hero-slide.is-prev{
  opacity:0;                                /* ทำให้ค่อย ๆ หายไป */
  transform:translateX(-100%);              /* เลื่อนไปฝั่งซ้ายออกนอกกรอบ */
  z-index:1;
}

/* สำหรับ browser ที่ยังไม่มี JS – ให้สไลด์แรกแสดงเป็นภาพปกติ */
.hero-slide:first-child{
  position:relative;
}

/* -------------------------
   Caption
   กล่องตัวหนังสือ / ป้าย / ปุ่ม WATCH NOW
   ------------------------- */

/* กล่องคำอธิบายที่อยู่มุมซ้ายล่างของรูป */
.hero-caption{
  position:absolute;
  left:24px;                                /* ห่างจากขอบซ้าย 24px */
  bottom:24px;                              /* ห่างจากขอบล่าง 24px */
  max-width:360px;                          /* กว้างสุดประมาณกล่องข้อความ */
  display:flex;
  flex-direction:column;                    /* เรียงเนื้อหาแนวตั้ง (badge -> title -> ปุ่ม) */
  gap:8px;                                  /* ระยะห่างระหว่างแต่ละบรรทัด */
  padding-top:12px;
  padding-right:16px;
  padding-bottom:12px;
  padding-left:16px;
  border-radius:14px;                       /* มุมโค้งนุ่ม ๆ */
  background-color:rgba(0,0,0,0.55);        /* พื้นหลังดำโปร่งแสง เห็นรูปเล็กน้อย */
  color:#ffffff;                            /* ตัวหนังสือสีขาวอ่านง่าย */
}

/* ป้ายเล็ก ๆ ด้านบน (เช่น ANIME, ONE PIECE, SAGA) */
.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  padding-top:3px;
  padding-right:10px;
  padding-bottom:3px;
  padding-left:10px;
  border-radius:999px;                      /* ทำให้เป็นแคปซูลวงรี */
  background-color:var(--accent);           /* ใช้สีหลักของเว็บ (แดงชมพู) */
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;                     /* เว้นตัวอักษรให้รู้สึกเป็นป้าย */
}

/* หัวเรื่องใหญ่ในสไลด์ */
.hero-title{
  font-size:20px;
  font-weight:700;
  line-height:1.3;                          /* ระยะห่างบรรทัดเพื่อให้อ่านง่าย */
}

/* ปุ่ม WATCH NOW */
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  padding-top:8px;
  padding-right:18px;
  padding-bottom:8px;
  padding-left:18px;
  border-radius:999px;                      /* ปุ่มกลมแบบแคปซูล */
  background-color:#ffffff;                 /* พื้นหลังขาว ตัดกับพื้นมืด */
  color:#000000;                            /* ตัวหนังสือสีดำ */
  font-size:14px;
  font-weight:700;
  text-decoration:none;                     /* ตัดเส้นใต้ลิงก์ */
  cursor:pointer;
  transition-property:background-color,
    transform;                              /* เวลา hover ให้สีและตำแหน่งเปลี่ยนเบา ๆ */
  transition-duration:0.16s;
  transition-timing-function:ease;
}

/* เอฟเฟ็กต์เวลาชี้เมาส์บนปุ่ม WATCH NOW */
.hero-btn:hover{
  background-color:var(--nav-hover);        /* เปลี่ยนเป็นสีชมพู hover */
  color:#ffffff;                            /* ตัวหนังสือสีขาว */
  transform:translateY(-1px);               /* ขยับขึ้นนิดหนึ่งให้ดูมีมิติ */
}

/* -------------------------
   Diamond Arrows
   ปุ่มเลื่อนซ้าย-ขวาทรงเพชร
   ------------------------- */

/* ตำแหน่งกล่องของปุ่มลูกศร (ซ้าย / ขวา) */
.hero-arrow{
  position:absolute;
  top:50%;                                  /* ให้อยู่กลางแนวตั้ง */
  transform:translateY(-50%);               /* ขยับขึ้นครึ่งนึง ให้กลางเป๊ะ ๆ */
  z-index:5;                                /* ให้อยู่บนสุดไม่โดนภาพบัง */
}

/* ให้ hero-wrap ไม่ตัดปุ่มเพชรที่ยื่นออก */
.hero-wrap{
  position:relative;
  width:100%;
  overflow:visible;        /* ← สำคัญที่สุด ทำให้ปุ่มยื่นออกได้ */
  border-radius:0;
  box-shadow:var(--shadow);
  background-color:#000000;
}

/* ปุ่มก่อนหน้า (ด้านซ้าย) */
.hero-arrow.prev{
  left:-27.5px;              /* ← ขยับออกจากกรอบให้เห็นเต็ม */
}

/* ปุ่มถัดไป (ด้านขวา) */
.hero-arrow.next{
  right:-27.5px;             /* ← ใช้ค่าติดลบเพื่อยื่นออกด้านนอก */
}

/* ปุ่มจริง ๆ (หมุน 45 องศาให้เป็นรูปเพชร) */
.hero-arrow button{
  width:56px;                               /* ปุ่มใหญ่ชัดแบบในภาพ */
  height:56px;
  border:none;
  outline:none;
  padding:0;
  border-radius:12px;                       /* มุมโค้งเล็กน้อยให้เพชรดูนุ่ม */
  background-color:var(--diamond);          /* สีน้ำเงินเข้มเหมือนปุ่มในภาพ */
  color:#ffffff;
  cursor:pointer;
  transform:rotate(45deg);                  /* หมุนสี่เหลี่ยมให้เป็นเพชร */
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  transition-property:background-color,
    transform,
    box-shadow;
  transition-duration:0.16s;
  transition-timing-function:ease;
}

/* ----------------------------------------
   ลูกศรด้านใน (ตัวอักษร) — ปุ่มซ้าย
   ---------------------------------------- */
.hero-arrow.prev button::before{
  content: "‹";                     /* ลูกศรซ้าย */
  transform: rotate(-45deg)
             translateX(-3px)
             translateY(-5%);      /* ดันเข้าขวาเล็กน้อย */
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

/* ----------------------------------------
   ลูกศรด้านใน (ตัวอักษร) — ปุ่มขวา
   ---------------------------------------- */
.hero-arrow.next button::before{
  content: "›";                     /* ลูกศรขวา */
  transform: rotate(-45deg)
             translateX(3px)
             translateY(-5%);      /* ดันเข้าซ้ายเล็กน้อย */
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

/* ----------------------------------------
   เอฟเฟ็กต์ Hover ของปุ่มเพชร
   ---------------------------------------- */
.hero-arrow button:hover{
  background-color: var(--diamond-hover);
  transform:
    rotate(45deg)
    translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}


/* -------------------------
   Dots
   จุดสถานะสไลด์ด้านล่าง
   ------------------------- */

.hero-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;                                  /* ระยะห่างระหว่างจุด */
  margin-top:10px;
  margin-bottom:10px;
}

/* จุดแต่ละจุด (ปกติเป็นวงกลมเล็ก ๆ) */
.hero-dot{
  width:14px;
  height:14px;
  border-radius:999px;                      /* ทำให้กลม */
  border:none;
  background-color:var(--capsule);          /* สีดำโปร่ง ๆ */
  opacity:0.6;
  cursor:pointer;
  transition-property:background-color,
    opacity,
    transform;
  transition-duration:0.16s;
  transition-timing-function:ease;
}

/* จุดของสไลด์ที่กำลังแสดงอยู่ (ยาวเป็นแคปซูล) */
.hero-dot.is-active{
  width:32px;                               /* ทำให้ยาวขึ้นเป็นเม็ดแคปซูล */
  opacity:1;
  background-color:var(--accent);           /* ใช้สีหลักของเว็บ */
  transform:translateY(-1px);               /* ขยับขึ้นนิดนึงให้เด่นขึ้น */
}

/* -------------------------
   Responsive
   ปรับให้เข้ากับหน้าจอเล็ก
   ------------------------- */

@media (max-width:992px){
  /* ลด padding ขอบซ้ายขวาของ hero เมื่อหน้าจอเล็ก */
  .hero-viewport{
    max-width:85%;
    ma
    padding-right:8px;
    padding-left:8px;
  }

  /* กล่อง caption ขยายกว้างขึ้น (ใช้พื้นที่ทั้งด้านล่าง) */
  .hero-caption{
    left:16px;
    right:16px;
    max-width:none;                         /* ไม่จำกัดความกว้าง */
  }
}

@media (max-width:600px){
  /* hero อยู่กลางจอ และกินเต็มความกว้างเท่าที่จอมี */
  .hero-viewport{
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
    padding-right:8px;
    padding-left:8px;
  }

  .hero-caption{
    left:12px;
    right:12px;
    bottom:16px;
    padding-top:10px;
    padding-right:14px;
    padding-bottom:10px;
    padding-left:14px;
  }

  .hero-title{
    font-size:16px;
  }

  .hero-arrow button{
    width:36px;
    height:36px;
  }
}