/*──────────────────────────*

 |  BASE COLOUR VARIABLES – filled by JS

 *───────────────────────*/

:root {

  --background-top: #fff;

  --background-middle: #ccc;

  --background-bottom: #000;

  --detail-frame: #ddd;

  --button-font-color: #333;

  --font-color: #333;

  --buttons: #ccc;

  --hover: #bbb;

  --gear: #aaa;

  --logo-accent: #000;

  --center-solid: #fff;

  --buttons-rgb: 204,204,204;

  --shadow-rgb: 0,0,0;

  --separator-pos: 70%;

  --midband-center: 40%;

}



/*─────────────────────*

 |  MAIN CAROUSEL AREA

 *──────────────────────*/

#mecha-carousel-block {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: 120vh;

  background-size: 100% 69%, 100% 100%;

  background-repeat: no-repeat;

  background-position: top left;

  color: var(--font-color);

  transition: color 3s ease;

}

#mecha-carousel-block::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 69%;

  background: linear-gradient(to right,

    rgba(0,0,0,.15) 0%, rgba(255,255,255,.15) 100%);

  opacity: 0;

  transition: opacity .8s ease;

  pointer-events: none;

}

#mecha-carousel-block.sheen-on::before {

  opacity: 1;

}



/*─────────────────────*

 |  OVAL SHADOW (pseudo-elements)

 *──────────────────────*/

.carousel-image-wrapper::before,

.carousel-image-wrapper::after {

  content: "";

  position: absolute;

  pointer-events: none;

  z-index: 1;

  width: var(--left-shadow-width, 280px);

  height: var(--left-shadow-height, 100px);

  left: var(--left-shadow-left, 0);

  top: var(--left-shadow-top, 0);

  background: radial-gradient(ellipse at center,

    rgba(var(--shadow-rgb),.30) 0%,

    rgba(var(--shadow-rgb),.18) 55%,

    rgba(var(--shadow-rgb),0) 100%);

  transform-origin: right center;

  transform: scaleX(1.6);

  filter: blur(8px);

  opacity: 0;

  transition: opacity .8s ease;

}

.carousel-image-wrapper::after {

  width: var(--right-shadow-width, 280px);

  height: var(--right-shadow-height, 100px);

  left: var(--right-shadow-left, 0);

  top: var(--right-shadow-top, 0);

}

.carousel-image-wrapper.shadow-on::before,

.carousel-image-wrapper.shadow-on::after {

  opacity: 1;

}


.carousel-image-wrapper:not(.has-left-image)::before {

  display: none;

}

.carousel-image-wrapper:not(.has-right-image)::after {

  display: none;

}

.carousel-image-wrapper.no-images::before,

.carousel-image-wrapper.no-images::after {

  display: none;

}



/*──────────────────────*

 |  CENTER BOX

 *──────────────────────*/

#mecha-center-box {

  position: absolute;

  left: 50%;

  top: var(--separator-pos, 70%);

  transform: translate(-50%, -50%);

  max-width: 660px;

  width: 90%;

  padding: 0.5rem 0.5rem;

  border-radius: 10px;

  text-align: center;

  background: var(--center-solid);

  border: .5px solid var(--detail-frame);

  box-shadow: 0 0 25px rgba(0,0,0,.25);

  color: var(--font-color);

  z-index: 50;

  transition:

    top .8s cubic-bezier(.4,1.5,.5,1),

    opacity .8s ease,

    background 1.5s ease,

    border-color 1.5s ease,

    color 1.5s ease;

}



/*────────────────────*

 |  BUTTONS & AUDIO ICON

 *─────────────────────*/

.homepage-btn {

  display: inline-block;

  margin: .5rem;

  padding: .75rem 1.5rem;

  border-radius: 10px;

  border: none;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  background: var(--buttons);

  color: var(--button-font-color);

  transition: background .3s ease, transform .2s ease;

}

.homepage-btn:hover {

  background: var(--hover);

  transform: translateY(-4px);

}

.audio-toggle-btn {

  position: absolute;

  top: 15px;

  right: 15px;

  z-index: 10;

  background: var(--buttons);

  color: var(--button-font-color);

  border: none;

  border-radius: 50%;

  font-size: 1.5rem;

  padding: .5rem;

  cursor: pointer;

  transition: background .3s ease;

}

.audio-toggle-btn:hover {

  background: var(--hover);

}



/*─────────────────────*

 |  CAROUSEL IMAGES

 *─────────────────────*/

.carousel-image-wrapper {

  position: absolute;

  inset: 0;

}

.carousel-image {

  position: absolute;

  top: var(--midband-center, 40%);

  transform: translateY(-50%);

  max-width: 45%;

  max-height: 28vh;

  opacity: 0;

  transition: transform 1s ease, opacity 1s ease;

  z-index: 2;

}

.left-image { left: 0; }

.right-image { right: 0; }



/*────────────────────*

 |  DECORATIVE SHADOWS ON PNGs

 *────────────────────*/

.carousel-image::before,

.carousel-image::after {

  content: "";

  position: absolute;

  pointer-events: none;

  z-index: 1;

  display: block;

}

.carousel-image::before {

  top: 0; left: 0;

  width: 100%; height: 100%;

  background: radial-gradient(ellipse at top left,

    rgba(var(--shadow-rgb),.15) 0%,

    rgba(var(--shadow-rgb),0) 80%);

  filter: blur(6px);

  opacity: 1;

}

.carousel-image::after {

  bottom: -10%; left: -20%;

  width: 140%; height: 60%;

  background: radial-gradient(ellipse at bottom left,

    rgba(var(--shadow-rgb),.25) 0%,

    rgba(var(--shadow-rgb),.12) 60%,

    rgba(var(--shadow-rgb),0) 100%);

  transform: rotate(-6deg) scaleX(1.6);

  filter: blur(12px);

  opacity: 1;

}





/*───────────────────────*

 |  RESPONSIVE (≤ 768px)

 *─────────────────────*/

@media (max-width:768px) {

  #mecha-center-box {

    width: 80%;

    

  }

  .homepage-btn {

    width: 100%;

    margin: .25rem 0;

  }

  .carousel-image {

    max-width: 45%;

    max-height: 45vh;

  }

}



/*───────────────────*

 |  DRUPAL THEME FIX

 *───────────────────*/

#block-bootstrap-barrio-mechahomepageblock > .content {

  position: relative !important;

}



/* ─ Logo placement & spin ───────────────── */

.mw-logo {

  position: absolute;

  top: 7vh;

  left: 50%;

  transform: translateX(-50%);

  max-width: 660px;

  width: 90%;

  pointer-events: none;

  z-index: 20;

}

#gear-color, #gear-outline {

  transform-origin: 50% 50%;

  transition: transform .9s ease;

}



/*────────────────────────────*

 |  EDGE-TO-EDGE featured-top

 *───────────────────────────*/

.featured-top .featured-top__inner {

  width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;

  margin-right: calc(50% - 50vw) !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

}

.featured-top .block-mechawork-homepage .content {

  overflow: visible;

  position: relative;

}

.featured-top #mecha-carousel-block {

  width: 100%;

}



/*────────────────────────*

 |  3-COLUMN CENTER-GRID (50%|20%|30%)

 *────────────────────────*/

#mecha-center-box .center-grid {

  display: flex;

  justify-content: space-between; /* spread columns evenly */

  align-items: center;            /* vertical centering */

  width: 80%;                      /* 80% of the center-box inner width */

  gap: 2rem;                      /* breathing room */

  box-sizing: border-box;

}

/* fix each column’s width */

#mecha-center-box .center-grid .col-1 { flex: 0 0 50%; }

#mecha-center-box .center-grid .col-2 { flex: 0 0 20%; }

#mecha-center-box .center-grid .col-3 {

  flex: 0 0 30%;

  display: flex;

  flex-direction: column;

  align-items: center;           /* center its contents horizontally */

}

/* ensure every direct child of any .col fills its space */

#mecha-center-box .center-grid .col > * {

  width: 100%;

  box-sizing: border-box;

}



/*──────────────────────*

 |  COL 1: Special-Day Block

 *──────────────────────*/

/* Row1: image + discount side-by-side */

#mecha-center-box .col-1 .sd-row1 {

  display: grid;

  grid-template-columns: 40% 60%;

  gap: 1rem;

  align-items: center;

}

#mecha-center-box .col-1 .sd-row1 .sd-image img {

  width: 100%;

  height: auto;

  border: 3px solid var(--buttons);

  border-radius: 10px;

}

#mecha-center-box .col-1 .sd-row1 .sd-discount {

  font-family: "Trebuchet MS", sans-serif;

  font-weight: bold;

  color: var(--logo-accent, var(--font-color));

  /* JS sets font-size dynamically */

}

/* Row2: title + summary block */

#mecha-center-box .col-1 .sd-row2 {

  margin-top: 1rem;

  padding: .75rem;

  background: var(--detail-frame);

  color: var(--buttons);

  border-radius: 8px;

  text-align: left;

}

#mecha-center-box .col-1 .sd-row2 .sd-title {

  font-weight: bold;

  font-size: 1.2em;

  margin-bottom: .5rem;

}

#mecha-center-box .col-1 .sd-row2 .sd-summary {

  line-height: 1.4;

}



/*───────────────────*

 |  COL 2: Buttons

 *────────────────────*/

#mecha-center-box .col-2 .homepage-btn {

  width: 100%;

  margin: .5rem 0;

}



/*────────────────────*

 |  COL 3: Product Info

 *─────────────────────*/

/* unified background block */

#mecha-center-box .col-3 .col-3-content {
  background: var(--detail-frame);
  padding: .75rem;
  border-radius: 8px;
  color: var(--buttons);
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
#mecha-center-box .col-3 .col-3-content:hover,
#mecha-center-box .col-3 .col-3-content:focus {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(0,0,0,.18);
}
#mecha-center-box .col-3 .col-3-content > div {
  margin-bottom: .75rem;
}
#mecha-center-box .col-3 .col-3-content > div:last-child {
  margin-bottom: 0;
}
#mecha-center-box .col-3 .music-name,
#mecha-center-box .col-3 .musician-name,
#mecha-center-box .col-3 .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-height: 2.5em;
  word-break: normal;
  overflow-wrap: anywhere;
}
#mecha-center-box .col-3 .price-sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  font-weight: 700;
  white-space: nowrap;
}
#mecha-center-box .col-3 .price-sum .price-single,
#mecha-center-box .col-3 .price-sum .price-discounted {
  line-height: 1.1;
  font-size: 1.05rem;
  font-weight: 800;
}
#mecha-center-box .col-3 .price-sum.has-discount .price-discounted {
  font-size: 1.1rem;
}
#mecha-center-box .col-3 .price-sum .price-original {
  line-height: 1;
  font-size: .82rem;
  font-weight: 600;
  opacity: .72;
}
#mecha-center-box .col-3 .price-sum .price-original s {
  text-decoration-thickness: 1.5px;
}
/* buy button */


#mecha-center-box .col-3 .buy-btn {

  width: 100%;

  margin-top: 1rem;

}

 #mecha-carousel-block .carousel-image {

    top: 30% !important;

  }

  

  

  

  

  /* Overlay pseudo‐element for white flash */

#mecha-carousel-block {

  position: relative; /* ensure positioning context */

}

#mecha-carousel-block::after {

  content: "";

  position: absolute;

  inset: 0;

  background: #fff;

  pointer-events: none;

  opacity: 0;

  transition: opacity .5s ease-in-out;

  z-index: 100; /* above the carousel images but below the box & logo */

}



/* When .fade-bg is present, overlay goes fully opaque */

#mecha-carousel-block.fade-bg::after {

  opacity: 1;

}



/* Also fade the logo out alongside the carousel */

.mw-logo {

  transition: opacity .5s ease-in-out;

}

.mw-logo.fade-bg {

  opacity: 0;

}



/* yeni: oynatıcı kontrol tuşları */

.carousel-ctl-btn{

  position:absolute;

  top:15px;               /*  🔊 simgesinin hizasında  */

  z-index:25;             /*  image-wrapper (0) ve ses butonu (10) üstü  */

  background:var(--buttons);

  color:var(--button-font-color);

  border:none;

  border-radius:50%;

  font-size:1.35rem;

  width:46px; height:46px;

  display:flex; align-items:center; justify-content:center;

  cursor:pointer;

  transition:background .3s;

}

.carousel-ctl-btn:hover{ background:var(--hover); }



/* yerleşim – istediğiniz gibi oynayabilirsiniz  */

#mw-prev { left:75px;  }   /* ⏮️  – solunda */

#mw-pause{ left:125px; }   /* ⏸️ / ▶️ – ortada */

#mw-next { left:175px; }   /* ⏭️  – sağında */

.mw-popup-carousel-controls {

  position: fixed;

  left: 50%;

  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));

  z-index: 10005;

  display: flex;

  gap: .65rem;

  align-items: center;

  justify-content: center;

  transform: translateX(-50%) translateY(16px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;

}

.mw-popup-carousel-controls.is-visible {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

}

.mw-popup-carousel-control {

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--detail-frame);

  border-radius: 50%;

  background: var(--buttons);

  color: var(--button-font-color);

  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);

  cursor: pointer;

  font-size: 1.35rem;

  pointer-events: auto;

  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;

}

.mw-popup-carousel-control:hover,
.mw-popup-carousel-control:focus {

  background: var(--hover);

  transform: translateY(-2px);

  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);

}


















/*──────────────────────*

 |  ABOUT POPUP MODAL

 *──────────────────────*/

html.mw-about-popup-open,
body.mw-about-popup-open {

  overflow: hidden;

}

.mw-about-popup {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: none;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, .62);

  padding: 2rem;

  box-sizing: border-box;

}

.mw-about-popup.is-open {

  display: flex;

}

.mw-about-popup__panel {

  position: relative;

  width: 70vw;

  height: 80vh;

  max-width: 1100px;

  max-height: calc(100vh - 2rem);

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius: 18px;

  border: 1px solid var(--detail-frame);

  background: var(--center-solid);

  color: var(--font-color);

  box-shadow: 0 22px 70px rgba(0, 0, 0, .42);

}

.mw-about-popup__close {

  position: absolute;

  top: .75rem;

  right: .75rem;

  z-index: 2;

  width: 42px;

  height: 42px;

  border: 1px solid var(--detail-frame);

  border-radius: 50%;

  background: var(--buttons);

  color: var(--button-font-color);

  font-size: 2rem;

  line-height: 1;

  cursor: pointer;

  transition: background .2s ease, transform .2s ease;

}

.mw-about-popup__close:hover,
.mw-about-popup__close:focus {

  background: var(--hover);

  transform: scale(1.04);

}

.mw-about-popup__header {

  flex: 0 0 auto;

  padding: 1.25rem 4rem 0 1.5rem;

  border-bottom: 1px solid var(--detail-frame);

}

.mw-about-popup__tabs {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem;

  padding-bottom: 1rem;

}

.mw-about-popup__tab {

  border: 1px solid var(--detail-frame);

  border-radius: 999px;

  background: transparent;

  color: var(--font-color);

  padding: .55rem 1rem;

  font-size: .95rem;

  font-weight: 700;

  cursor: pointer;

  transition: background .2s ease, color .2s ease, transform .2s ease;

}

.mw-about-popup__tab:hover,
.mw-about-popup__tab:focus {

  background: var(--hover);

  color: var(--button-font-color);

  transform: translateY(-1px);

}

.mw-about-popup__tab.is-active {

  background: var(--buttons);

  color: var(--button-font-color);

}

.mw-about-popup__body {

  flex: 1 1 auto;

  overflow: auto;

  padding: 1.5rem;

  text-align: left;

  color: var(--buttons);

}

.mw-about-popup__article {

  max-width: 860px;

  margin: 0 auto;

  padding: .75rem;

  background: var(--detail-frame);

  color: var(--buttons);

  border-radius: 8px;

  text-align: left;

}

.mw-about-popup__article-body {

  line-height: 1.7;

  font-size: 1rem;

}

.mw-about-popup__article-body img {

  max-width: 100%;

  height: auto;

  border-radius: 12px;

}

.mw-about-popup__article-body a {

  color: var(--buttons);

  text-decoration-thickness: 2px;

}

.mw-about-popup__article-body h1,
.mw-about-popup__article-body h2,
.mw-about-popup__article-body h3,
.mw-about-popup__article-body h4 {

  color: var(--buttons);

  line-height: 1.25;

}

.mw-about-popup__status {

  min-height: 40vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-weight: 700;

  color: var(--buttons);

}

.mw-about-popup__status.is-error {

  color: var(--buttons);

}

@media (max-width:768px) {

  .mw-about-popup {

    padding: 1rem;

  }

  .mw-about-popup__panel {

    width: 92vw;

    height: 80vh;

  }

  .mw-about-popup__header {

    padding: 1rem 3.5rem 0 1rem;

  }

  .mw-about-popup__tabs {

    gap: .4rem;

  }

  .mw-about-popup__tab {

    padding: .5rem .75rem;

    font-size: .85rem;

  }

  .mw-about-popup__body {

    padding: 1rem;

  }

  .mw-popup-carousel-controls {

    bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));

    gap: .5rem;

  }

  .mw-popup-carousel-control {

    width: 42px;

    height: 42px;

    font-size: 1.1rem;

  }

}


/*──────────────────────*

 |  MOBILE FALLBACK

 *──────────────────────*/

@media (max-width:768px) {

  #mecha-center-box .center-grid {

    flex-direction: column;

    width: 100%;

    gap: 1rem;

  }

   #mecha-carousel-block {

    height: 1150px !important;

  }

  #mecha-center-box .center-grid .col {

    flex: none;

    width: 100%;

  }

  #mecha-carousel-block .carousel-image {

    top: 22% !important;

  }

  #mecha-carousel-block::before {



  height: 69%;

  }

  #mecha-center-box  {

    top: 65% !important;

  }

  .mw-logo {

  position: absolute;

  top: 10vh;

  }

}