/* ============================================================
   AVX LITEBOX — TEASER ONLY (bottom-left, 9:16)
   FINAL v2025.11.07-r2 — volume üstte, mute altta, Elementor-proof
   ============================================================ */

:root{
  --avx-w: 200px;
  --avx-bl: 18px;
  --avx-br: 14px;
  --avx-shadow: 0 12px 36px rgba(0,0,0,.32);

  --avx-pad: 10px;
  --avx-gap: 10px;

  --avx-prog-h: 6px;

  --avx-pill-bg:#ffffff;
  --avx-pill-fg:#111111;
  --avx-brand:#695951;
  --avx-brand-fg:#ffffff;
}

/* Teaser card */
.avx-litebox.avx-litebox .avx-teaser{
  position:fixed; left:var(--avx-bl); bottom:var(--avx-bl);
  width:var(--avx-w); aspect-ratio:9/16;
  z-index:9999; border-radius:var(--avx-br); overflow:hidden;
  background:#000; box-shadow:var(--avx-shadow);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
  -webkit-user-select:none; user-select:none;
}
.avx-litebox.avx-litebox .avx-teaser.is-ready{ opacity:1; visibility:visible; }

.avx-litebox.avx-litebox .avx-teaser-frame{ position:relative; width:100%; height:100% }
.avx-litebox.avx-litebox .avx-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; pointer-events:none }

/* Shorts crop */
.avx-litebox.avx-litebox .avx-portrait iframe{
  top:0; left:50%; height:100%; width:316%; transform:translateX(-50%);
}

/* Üst kontroller */
/* Üst kontroller: PLAY/PAUSE butonu */
.avx-litebox.avx-litebox .avx-play{
  all:unset;
  position:absolute; top:var(--avx-pad); left:var(--avx-pad);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--avx-pill-bg) !important; color:var(--avx-pill-fg) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.26); z-index:200; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  line-height:0; font-size:0;
}
.avx-litebox.avx-litebox .avx-play:hover{
  background:var(--avx-brand) !important; color:var(--avx-brand-fg) !important;
}
/* Play/Pause SVG boyut ve renk */
.avx-litebox.avx-litebox .avx-play svg{
  width:20px; height:20px; fill:currentColor; display:block;
}
/* Görünürlük kuralları: oynarken pause, duruyorken play görünsün */
.avx-litebox.avx-litebox .avx-play .icon--play{ display:none; }
.avx-litebox.avx-litebox .avx-play.is-playing .icon--pause{ display:block; }
.avx-litebox.avx-litebox .avx-play.is-playing .icon--play{ display:none; }
.avx-litebox.avx-litebox .avx-play:not(.is-playing) .icon--pause{ display:none; }
.avx-litebox.avx-litebox .avx-play:not(.is-playing) .icon--play{ display:block; }

/* Üst kontroller: CLOSE (aynı, ama Elementor-proof için all:unset ekleyelim) */
.avx-litebox.avx-litebox .avx-close{
  all:unset;
  position:absolute; top:var(--avx-pad); right:var(--avx-pad);
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#1a1a1a !important; color:#fff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28); z-index:200; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  line-height:0; font-size:16px; font-weight:800;
}

/* Boş alana tık (progress & audio'yı kapatmaz) */
.avx-litebox.avx-litebox .avx-catch{
  position:absolute; left:0; right:0; top:0;
  bottom: calc(var(--avx-pad) + var(--avx-prog-h) + 48px);
  border:0; background:transparent; z-index:2; cursor:pointer;
}

/* Sol orta ses kümesi — volume ÜSTTE, mute altta  */
.avx-litebox.avx-litebox .avx-audio{
  position:absolute; left:8px; top:70%; transform:translateY(-50%);
  display:flex; flex-direction:column-reverse; /* << ters çevir: buton altta, slider üstte */
  align-items:center; gap:8px; z-index:180;
}

/* Mute/Unmute SVG buton (Elementor-proof) */
.avx-litebox.avx-litebox .avx-audio__btn{
  all:unset;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--avx-brand) !important; color:#fff !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22); cursor:pointer;
  line-height:0; font-size:0; -webkit-tap-highlight-color:transparent;
}
.avx-litebox.avx-litebox .avx-audio__btn:hover{
  background:#fff !important; color:var(--avx-brand) !important;
}
.avx-litebox.avx-litebox .avx-audio__btn::before,
.avx-litebox.avx-litebox .avx-audio__btn::after{ content:none !important; }
.avx-litebox.avx-litebox .avx-audio__btn svg{ width:22px; height:22px; fill:currentColor; display:block }

/* Toggle görünürlük */
.avx-litebox.avx-litebox .icon--on{ display:none; }
.avx-litebox.avx-litebox .is-muted .icon--off{ display:block; }
.avx-litebox.avx-litebox .is-muted .icon--on{ display:none; }
.avx-litebox.avx-litebox .avx-audio__btn:not(.is-muted) .icon--on{ display:block; }
.avx-litebox.avx-litebox .avx-audio__btn:not(.is-muted) .icon--off{ display:none; }

/* Dikey volume yuvası */
.avx-litebox.avx-litebox .avx-audio__rot{
  width:26px; height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--avx-pill-bg); border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.20);
  padding:6px 0;
}
.avx-litebox.avx-litebox .avx-audio__range{
  -webkit-appearance:none; appearance:none;
  width:100px; height:4px; border-radius:999px; background:rgba(0,0,0,.22);
  outline:none; cursor:pointer; transform:rotate(-90deg);
}
.avx-litebox.avx-litebox .avx-audio__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:999px; background:var(--avx-brand); cursor:pointer;
}
.avx-litebox.avx-litebox .avx-audio__range::-moz-range-thumb{
  width:12px; height:12px; border:0; border-radius:999px; background:var(--avx-brand); cursor:pointer;
}

/* Alt ilerleme (click+drag) */
.avx-litebox.avx-litebox .avx-progress{
  position:absolute; left:var(--avx-pad); right:var(--avx-pad); bottom:var(--avx-pad);
  height:var(--avx-prog-h); border-radius:999px; background:rgba(255,255,255,.35);
  overflow:hidden; cursor:pointer; pointer-events:auto; z-index:220; touch-action:none;
}
.avx-litebox.avx-litebox .avx-progress__fill{
  position:absolute; left:0; top:0; bottom:0; width:0%; background:#fff; transition:width .2s linear;
}
/* === AVX · Mobile final alignment (mute bottom-left above progress) === */
@media (max-width:768px){

  /* Ses butonu sol altta, progress barın biraz üstünde */
  .avx-litebox.avx-litebox .avx-audio{
    position:absolute;
    left:10px; bottom:calc(var(--avx-prog-h) + 10px);
    transform:none;
    display:flex; flex-direction:row; align-items:center;
    gap:0;
  }

  /* Sadece mute/unmute ikon */
  .avx-litebox.avx-litebox .avx-audio__rot{ display:none!important; }

  /* Görünüm: küçük yuvarlak buton */
  .avx-litebox.avx-litebox .avx-audio__btn{
    width:36px; height:36px;
    background:var(--avx-brand)!important;
    color:#fff!important;
    border-radius:50%;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center;
  }
  .avx-litebox.avx-litebox .avx-audio__btn svg{
    width:20px; height:20px;
  }
  .avx-litebox.avx-litebox .avx-audio__btn:hover{
    background:#fff!important;
    color:var(--avx-brand)!important;
  }

  /* Alt ilerleme çubuğu konumu sabit kalsın */
  .avx-litebox.avx-litebox .avx-progress{
    bottom:10px;
  }

  /* Play/Pause küçültme (önceden ayarladığın gibi) */
  .avx-litebox.avx-litebox .avx-play{
    width:38px; height:38px;
    top:8px; left:8px;
  }
  .avx-litebox.avx-litebox .avx-play svg{
    width:18px; height:18px;
  }

  /* Close butonu da aynı hizalı kalsın */
  .avx-litebox.avx-litebox .avx-close{
    width:30px; height:30px;
    top:8px; right:8px;
  }
}


@media (max-width:480px){
  :root{ --avx-w:140px; --avx-bl:10px; }
  .avx-litebox.avx-litebox .avx-play,
  .avx-litebox.avx-litebox .avx-audio__btn{
    width:34px; height:34px;
  }
  .avx-litebox.avx-litebox .avx-play svg,
  .avx-litebox.avx-litebox .avx-audio__btn svg{
    width:17px; height:17px;
  }
}