/*──────────────────────────*
 |  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;
  --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;
}

/*──────────────────────*
 |  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;
}

/*───────────────────────*
 |  SPECIAL-DAY BANNER
 *─────────────────────*/
#special-day-offer {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--buttons);
  color: var(--font-color);
  text-align: center;
  padding: .625rem;
  font-size: 1.125rem;
  z-index: 60;
  opacity: 0;
  animation: specialDayFade 2s forwards;
}
@keyframes specialDayFade { to { 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(--buttons);
  /* 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;
}
#mecha-center-box .col-3 .col-3-content > div {
  margin-bottom: .75rem;
}
/* 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 */



/*──────────────────────*
 |  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;
  }
}

 

/*────────────────────────────────────────────*
 | homepagev2: clickable product info + pricing meta
 *────────────────────────────────────────────*/
#mecha-center-box .col-3 .col-3-content{
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
#mecha-center-box .col-3 .col-3-content:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

#mecha-center-box .col-3 .price-sum{
  margin-bottom: 0;
}
#mecha-center-box .col-3 .price-sum .price-final{
  font-weight: 800;
  line-height: 1.1;
}
#mecha-center-box .col-3 .price-sum .price-meta{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .5rem;
  margin-top: .25rem;
  font-size: .95em;
}
#mecha-center-box .col-3 .price-sum .price-orig{
  text-decoration: line-through;
  opacity: .85;
}
#mecha-center-box .col-3 .price-sum .price-discount{
  font-weight: 800;
}

/*────────────────────────────────────────────*
 | homepagev2: mirror premade actions UI states
 *────────────────────────────────────────────*/

/* Make product info block behave like a link when JS marks it as such. */
#mecha-center-box .col-3 .col-3-content[role="link"],
#mecha-center-box .col-3 .col-3-content.is-link {
  cursor: pointer;
  user-select: none;
}

#mecha-center-box .col-3 .col-3-content[role="link"]:focus,
#mecha-center-box .col-3 .col-3-content[role="link"]:focus-visible,
#mecha-center-box .col-3 .col-3-content.is-link:focus,
#mecha-center-box .col-3 .col-3-content.is-link:focus-visible {
  outline: 2px solid var(--buttons);
  outline-offset: 3px;
}

/* Button state styles for POST actions (non-invasive; keeps existing palette). */
#mecha-center-box .col-3 .buy-btn[disabled],
#mecha-center-box .col-3 .buy-btn.is-disabled,
#mecha-center-box .col-3 .buy-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .75;
  transform: none;
}

#mecha-center-box .col-3 .buy-btn.is-loading {
  opacity: .85;
  transform: none;
}

#mecha-center-box .col-3 .buy-btn.is-added {
  filter: brightness(1.03);
}

#mecha-center-box .col-3 .buy-btn.is-error {
  filter: saturate(1.1);
}