/* =========================================================
   3E POS TERMİNAL QUALITY V2

   - Paketler sayfasındaki arka büyük bilgisayar korunur.
   - Yalnızca öndeki restoran ekranı POS terminaline dönüşür.
   - Restoran ve indirme sayfalarındaki POS terminali iyileştirilir.
   - Ana sayfa restoran ve perakende cihazları temizlenir.
   ========================================================= */

:root {
  --pos-v2-black-1: #292e35;
  --pos-v2-black-2: #111419;
  --pos-v2-black-3: #050608;
  --pos-v2-edge: #515a64;
  --pos-v2-screen: #020305;
  --pos-v2-shadow: rgba(0, 0, 0, .36);
}

/* =========================================================
   PAKETLER SAYFASI
   ARKADAKİ BÜYÜK E-TİCARET BİLGİSAYARI ESKİ HALİNE DÖNER
   ========================================================= */

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-frame {
  position: relative !important;
  z-index: 2 !important;

  padding: 10px 10px 32px !important;

  border: 1px solid #8e969d !important;
  border-radius: 14px !important;

  background:
    linear-gradient(
      180deg,
      #eef0f1 0%,
      #c8cdd0 72%,
      #aeb5ba 100%
    ) !important;

  box-shadow:
    0 22px 44px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-frame::before,
body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-frame::after {
  display: none !important;
  content: none !important;
}

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-screen {
  aspect-ratio: 16 / 10 !important;

  overflow: hidden !important;

  border: 2px solid #090c10 !important;
  border-radius: 7px 7px 3px 3px !important;

  background: #f4f6f8 !important;
  box-shadow: none !important;
}

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: left top !important;
}

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-camera {
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  z-index: 5 !important;

  display: block !important;
  width: 5px !important;
  height: 5px !important;

  transform: translateX(-50%) !important;

  border-radius: 50% !important;
  background: #171a1d !important;

  box-shadow:
    0 0 0 1px #747b80 !important;
}

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-stand {
  position: absolute !important;
  left: 50% !important;
  bottom: -52px !important;
  z-index: 0 !important;

  display: block !important;
  width: 56% !important;
  height: 54px !important;

  transform: translateX(-50%) !important;

  border: 0 !important;
  border-radius: 0 0 9px 9px !important;

  background:
    linear-gradient(
      180deg,
      #a0a7ac,
      #d5d8da
    )
    center bottom / 100% 8px no-repeat,

    linear-gradient(
      102deg,
      transparent 18%,
      #d2d6d8 19%,
      #a8afb4 81%,
      transparent 82%
    )
    center top / 58% 49px no-repeat !important;

  box-shadow: none !important;

  filter:
    drop-shadow(
      0 7px 5px rgba(0, 0, 0, .25)
    ) !important;
}

body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-stand::before,
body.page-packages
.pkgv3-monitor-invoice
.pkgv3-monitor-stand::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   PAKETLER SAYFASI
   YALNIZCA ÖNDEKİ RESTORAN CİHAZI POS TERMİNALİ OLUR
   ========================================================= */

body.page-packages .pkgv3-monitor-restaurant {
  right: 0 !important;
  bottom: 42px !important;
  z-index: 4 !important;

  width: min(65%, 340px) !important;
}

body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-frame {
  position: relative !important;
  z-index: 4 !important;

  padding: 12px 12px 20px !important;

  overflow: visible !important;

  border: 1px solid var(--pos-v2-edge) !important;
  border-radius: 21px !important;

  background:
    linear-gradient(
      145deg,
      var(--pos-v2-black-1) 0%,
      var(--pos-v2-black-2) 46%,
      var(--pos-v2-black-3) 100%
    ) !important;

  box-shadow:
    0 28px 52px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(255, 255, 255, .035) !important;
}

/* Arka müşteri göstergesi */
body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-frame::before {
  content: "" !important;

  position: absolute !important;
  z-index: -1 !important;
  top: -31px !important;
  left: 50% !important;

  display: block !important;
  width: 54% !important;
  height: 36px !important;

  transform: translateX(-50%) !important;

  border: 1px solid #454c54 !important;
  border-radius: 12px 12px 3px 3px !important;

  background:
    linear-gradient(
      180deg,
      #262b31 0%,
      #080a0d 100%
    ) !important;

  box-shadow:
    0 7px 14px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Hafif cam yansıması */
body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-frame::after {
  content: "" !important;

  position: absolute !important;
  z-index: 8 !important;
  top: 12px !important;
  left: 12px !important;

  width: 46% !important;
  height: calc(100% - 32px) !important;

  pointer-events: none !important;

  clip-path:
    polygon(
      0 0,
      58% 0,
      100% 100%,
      45% 100%
    ) !important;

  border-radius: 12px 0 0 12px !important;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, .09) 0%,
      rgba(255, 255, 255, .02) 42%,
      transparent 70%
    ) !important;
}

body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-screen {
  position: relative !important;
  z-index: 5 !important;

  aspect-ratio: 16 / 9 !important;

  overflow: hidden !important;

  border: 2px solid var(--pos-v2-screen) !important;
  border-radius: 11px !important;

  background: #ffffff !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 7px 17px rgba(0,0,0,.22) !important;
}

body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;
}

body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-camera {
  position: absolute !important;
  z-index: 9 !important;
  top: 4px !important;
  left: 50% !important;

  display: block !important;
  width: 5px !important;
  height: 5px !important;

  transform: translateX(-50%) !important;

  border-radius: 50% !important;
  background: #010203 !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) !important;
}

/* POS cihaz boynu */
body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-stand {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  bottom: -55px !important;

  display: block !important;
  width: 35% !important;
  height: 63px !important;

  transform:
    translateX(-50%)
    skewX(-7deg) !important;

  border: 0 !important;
  border-radius: 9px !important;

  background:
    linear-gradient(
      100deg,
      #060709 0%,
      #2a2f35 38%,
      #101317 72%,
      #040506 100%
    ) !important;

  box-shadow:
    0 15px 23px rgba(0,0,0,.36),
    inset 1px 0 0 rgba(255,255,255,.06) !important;

  filter: none !important;
}

/* POS cihaz tabanı */
body.page-packages
.pkgv3-monitor-restaurant
.pkgv3-monitor-stand::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  bottom: -8px !important;

  display: block !important;
  width: 195% !important;
  height: 25px !important;

  transform:
    translateX(-50%)
    perspective(420px)
    rotateX(49deg) !important;

  border-radius: 46% !important;

  background:
    linear-gradient(
      180deg,
      #30353b 0%,
      #101317 55%,
      #040506 100%
    ) !important;

  box-shadow:
    0 16px 21px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* =========================================================
   RESTORAN VE KAFE SAYFASI
   ========================================================= */

.restaurant-site .r-panel-computer {
  position: relative !important;
  isolation: isolate !important;

  width: 100% !important;
  max-width: 650px !important;
  justify-self: end !important;

  margin: 0 0 105px !important;
  padding: 18px 18px 23px !important;

  overflow: visible !important;

  border: 1px solid var(--pos-v2-edge) !important;
  border-radius: 27px !important;

  background:
    linear-gradient(
      145deg,
      var(--pos-v2-black-1) 0%,
      var(--pos-v2-black-2) 46%,
      var(--pos-v2-black-3) 100%
    ) !important;

  box-shadow:
    0 35px 68px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12) !important;

  transform:
    perspective(1400px)
    rotateY(-3deg) !important;

  transform-origin: center bottom !important;
}

/* Arka müşteri ekranı */
.restaurant-site .r-panel-computer::before {
  content: "" !important;

  position: absolute !important;
  z-index: -1 !important;
  top: -50px !important;
  left: 50% !important;

  display: block !important;
  width: 52% !important;
  height: 59px !important;

  transform: translateX(-50%) !important;

  border: 1px solid #454c54 !important;
  border-radius: 17px 17px 4px 4px !important;

  background:
    linear-gradient(
      180deg,
      #262b31 0%,
      #080a0d 100%
    ) !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Cam yansıması */
.restaurant-site .r-panel-computer::after {
  content: "" !important;

  position: absolute !important;
  z-index: 8 !important;
  top: 18px !important;
  left: 18px !important;

  display: block !important;
  width: 45% !important;
  height: calc(100% - 41px) !important;

  pointer-events: none !important;

  clip-path:
    polygon(
      0 0,
      58% 0,
      100% 100%,
      45% 100%
    ) !important;

  border-radius: 14px 0 0 14px !important;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,.018) 43%,
      transparent 72%
    ) !important;
}

.restaurant-site .r-panel-screen {
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  aspect-ratio: 16 / 10 !important;

  overflow: hidden !important;

  border: 2px solid var(--pos-v2-screen) !important;
  border-radius: 14px !important;

  background: #ffffff !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 9px 20px rgba(0,0,0,.24) !important;
}

.restaurant-site .r-panel-screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;
}

.restaurant-site .r-panel-camera {
  position: absolute !important;
  z-index: 10 !important;
  top: 6px !important;
  left: 50% !important;

  width: 6px !important;
  height: 6px !important;

  transform: translateX(-50%) !important;

  border-radius: 50% !important;
  background: #010203 !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.10) !important;
}

.restaurant-site .r-panel-stand {
  position: absolute !important;
  z-index: -2 !important;
  left: 50% !important;
  bottom: -82px !important;

  display: block !important;
  width: 175px !important;
  height: 138px !important;

  transform:
    translateX(-50%)
    skewX(-7deg) !important;

  border: 0 !important;
  border-radius: 17px !important;

  background:
    linear-gradient(
      100deg,
      #060709 0%,
      #2a2f35 38%,
      #101317 72%,
      #040506 100%
    ) !important;

  box-shadow:
    0 18px 28px rgba(0,0,0,.38),
    inset 1px 0 0 rgba(255,255,255,.06) !important;

  filter: none !important;
}

.restaurant-site .r-panel-stand::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  bottom: -14px !important;

  display: block !important;
  width: 235% !important;
  height: 59px !important;

  transform:
    translateX(-50%)
    perspective(620px)
    rotateX(55deg) !important;

  border-radius: 47% !important;

  background:
    linear-gradient(
      180deg,
      #30353b 0%,
      #101317 55%,
      #040506 100%
    ) !important;

  box-shadow:
    0 28px 32px rgba(0,0,0,.42),
    inset 0 2px 0 rgba(255,255,255,.07) !important;
}

/* =========================================================
   ADİSYON PROGRAMI İNDİR SAYFASI
   ========================================================= */

.ad-download-page .ad-pos-terminal-wrap {
  position: relative !important;

  width: min(650px, 100%) !important;
  min-height: 500px !important;

  margin: 0 auto !important;
  padding: 24px 20px 126px !important;

  perspective: 1400px !important;
}

.ad-download-page .ad-pos-terminal {
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  padding: 18px 18px 23px !important;

  overflow: visible !important;

  border: 1px solid var(--pos-v2-edge) !important;
  border-radius: 27px !important;

  background:
    linear-gradient(
      145deg,
      var(--pos-v2-black-1) 0%,
      var(--pos-v2-black-2) 46%,
      var(--pos-v2-black-3) 100%
    ) !important;

  box-shadow:
    0 35px 68px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12) !important;

  transform:
    rotateY(-3deg) !important;

  transform-origin: center bottom !important;
}

.ad-download-page .ad-pos-terminal::before {
  content: "" !important;

  position: absolute !important;
  z-index: -1 !important;
  top: -50px !important;
  left: 50% !important;

  display: block !important;
  width: 52% !important;
  height: 59px !important;

  transform: translateX(-50%) !important;

  border: 1px solid #454c54 !important;
  border-radius: 17px 17px 4px 4px !important;

  background:
    linear-gradient(
      180deg,
      #262b31 0%,
      #080a0d 100%
    ) !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ad-download-page .ad-pos-terminal::after {
  content: "" !important;

  position: absolute !important;
  z-index: 8 !important;
  top: 18px !important;
  left: 18px !important;

  display: block !important;
  width: 45% !important;
  height: calc(100% - 41px) !important;

  pointer-events: none !important;

  clip-path:
    polygon(
      0 0,
      58% 0,
      100% 100%,
      45% 100%
    ) !important;

  border-radius: 14px 0 0 14px !important;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,.018) 43%,
      transparent 72%
    ) !important;
}

.ad-download-page .ad-pos-terminal-screen {
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  aspect-ratio: 16 / 10 !important;

  overflow: hidden !important;

  border: 2px solid var(--pos-v2-screen) !important;
  border-radius: 14px !important;

  background: #ffffff !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 9px 20px rgba(0,0,0,.24) !important;
}

.ad-download-page .ad-pos-terminal-screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;
}

.ad-download-page .ad-pos-terminal-camera {
  position: absolute !important;
  z-index: 10 !important;
  top: 6px !important;
  left: 50% !important;

  width: 6px !important;
  height: 6px !important;

  transform: translateX(-50%) !important;

  border-radius: 50% !important;
  background: #010203 !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.10) !important;
}

.ad-download-page .ad-pos-terminal-neck {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  bottom: 66px !important;

  display: block !important;
  width: 175px !important;
  height: 138px !important;

  transform:
    translateX(-50%)
    skewX(-7deg) !important;

  border-radius: 17px !important;

  background:
    linear-gradient(
      100deg,
      #060709 0%,
      #2a2f35 38%,
      #101317 72%,
      #040506 100%
    ) !important;

  box-shadow:
    0 18px 28px rgba(0,0,0,.38),
    inset 1px 0 0 rgba(255,255,255,.06) !important;
}

.ad-download-page .ad-pos-terminal-base {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  bottom: 25px !important;

  display: block !important;
  width: 405px !important;
  height: 73px !important;

  transform:
    translateX(-50%)
    perspective(620px)
    rotateX(55deg) !important;

  border-radius: 47% !important;

  background:
    linear-gradient(
      180deg,
      #30353b 0%,
      #101317 55%,
      #040506 100%
    ) !important;

  box-shadow:
    0 28px 32px rgba(0,0,0,.42),
    inset 0 2px 0 rgba(255,255,255,.07) !important;
}

/* =========================================================
   ANA SAYFA RESTORAN VE PERAKENDE
   Daha temiz; tüm ekranı bozan kaba şekiller kaldırılır.
   ========================================================= */

body.page-home
#panel-ekranlari
#home-solution-restaurant,

body.page-home
#panel-ekranlari
#home-solution-retail {
  position: relative !important;
  isolation: isolate !important;

  padding: 12px 12px 31px !important;

  overflow: visible !important;

  border: 1px solid var(--pos-v2-edge) !important;
  border-radius: 23px !important;

  background:
    linear-gradient(
      145deg,
      var(--pos-v2-black-1) 0%,
      var(--pos-v2-black-2) 46%,
      var(--pos-v2-black-3) 100%
    ) !important;

  box-shadow:
    0 28px 52px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}

body.page-home
#panel-ekranlari
#home-solution-restaurant::before,

body.page-home
#panel-ekranlari
#home-solution-retail::before {
  content: "" !important;

  position: absolute !important;
  z-index: -2 !important;
  left: 50% !important;
  bottom: -55px !important;

  display: block !important;
  width: 28% !important;
  height: 68px !important;

  transform:
    translateX(-50%)
    skewX(-7deg) !important;

  clip-path: none !important;

  border-radius: 10px !important;

  background:
    linear-gradient(
      100deg,
      #060709 0%,
      #2a2f35 38%,
      #101317 72%,
      #040506 100%
    ) !important;

  box-shadow:
    0 16px 24px rgba(0,0,0,.36),
    inset 1px 0 0 rgba(255,255,255,.05) !important;
}

body.page-home
#panel-ekranlari
#home-solution-restaurant::after,

body.page-home
#panel-ekranlari
#home-solution-retail::after {
  content: "" !important;

  position: absolute !important;
  z-index: -3 !important;
  left: 50% !important;
  bottom: -65px !important;

  display: block !important;
  width: 55% !important;
  height: 27px !important;

  transform:
    translateX(-50%)
    perspective(440px)
    rotateX(49deg) !important;

  border-radius: 46% !important;

  background:
    linear-gradient(
      180deg,
      #30353b 0%,
      #101317 55%,
      #040506 100%
    ) !important;

  box-shadow:
    0 17px 23px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.page-home
#panel-ekranlari
#home-solution-restaurant
.three-home-solution-panel-label,

body.page-home
#panel-ekranlari
#home-solution-retail
.three-home-solution-panel-label {
  border-radius: 12px 12px 0 0 !important;
}

body.page-home
#panel-ekranlari
#home-solution-restaurant
> img {
  border-radius: 0 0 12px 12px !important;
}

body.page-home
#panel-ekranlari
#home-solution-retail
.three-home-retail-app {
  border-radius: 0 0 12px 12px !important;
}

/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 1040px) {
  .restaurant-site .r-panel-computer {
    justify-self: center !important;
  }
}

@media (max-width: 700px) {
  body.page-packages
  .pkgv3-monitor-invoice
  .pkgv3-monitor-frame {
    padding: 7px 7px 22px !important;
    border-radius: 10px !important;
  }

  body.page-packages
  .pkgv3-monitor-invoice
  .pkgv3-monitor-stand {
    bottom: -39px !important;
    height: 41px !important;
  }

  body.page-packages .pkgv3-monitor-restaurant {
    bottom: 38px !important;
    width: 63% !important;
  }

  body.page-packages
  .pkgv3-monitor-restaurant
  .pkgv3-monitor-frame {
    padding: 7px 7px 13px !important;
    border-radius: 14px !important;
  }

  body.page-packages
  .pkgv3-monitor-restaurant
  .pkgv3-monitor-frame::before {
    top: -20px !important;
    height: 24px !important;
    border-radius: 8px 8px 2px 2px !important;
  }

  body.page-packages
  .pkgv3-monitor-restaurant
  .pkgv3-monitor-screen {
    border-radius: 7px !important;
  }

  body.page-packages
  .pkgv3-monitor-restaurant
  .pkgv3-monitor-stand {
    bottom: -39px !important;
    height: 45px !important;
  }

  .restaurant-site .r-panel-computer,
  .ad-download-page .ad-pos-terminal {
    padding: 10px 10px 14px !important;
    border-radius: 19px !important;

    transform:
      perspective(1000px)
      rotateY(-1deg) !important;
  }

  .restaurant-site .r-panel-computer {
    margin-bottom: 80px !important;
  }

  .restaurant-site .r-panel-computer::before,
  .ad-download-page .ad-pos-terminal::before {
    top: -34px !important;
    height: 40px !important;
    border-radius: 11px 11px 3px 3px !important;
  }

  .restaurant-site .r-panel-screen,
  .ad-download-page .ad-pos-terminal-screen {
    border-radius: 10px !important;
  }

  .restaurant-site .r-panel-stand {
    bottom: -59px !important;
    width: 102px !important;
    height: 91px !important;
  }

  .restaurant-site .r-panel-stand::after {
    width: 225% !important;
    height: 40px !important;
  }

  .ad-download-page .ad-pos-terminal-wrap {
    min-height: 365px !important;
    padding: 16px 3px 91px !important;
  }

  .ad-download-page .ad-pos-terminal-neck {
    bottom: 47px !important;
    width: 102px !important;
    height: 91px !important;
  }

  .ad-download-page .ad-pos-terminal-base {
    bottom: 20px !important;
    width: 235px !important;
    height: 43px !important;
  }

  body.page-home
  #panel-ekranlari
  #home-solution-restaurant,

  body.page-home
  #panel-ekranlari
  #home-solution-retail {
    padding: 8px 8px 22px !important;
    border-radius: 16px !important;
  }

  body.page-home
  #panel-ekranlari
  #home-solution-restaurant::before,

  body.page-home
  #panel-ekranlari
  #home-solution-retail::before {
    bottom: -42px !important;
    height: 50px !important;
  }

  body.page-home
  #panel-ekranlari
  #home-solution-restaurant::after,

  body.page-home
  #panel-ekranlari
  #home-solution-retail::after {
    bottom: -50px !important;
    height: 21px !important;
  }
}