@import url("bootstrap.css");
.scroll-container {
  overflow: hidden;
}
.scroll-content {
  background-color: var(--ribon-back);
  padding: 10px 0;
  display: flex;
  width: calc(200%);
  animation: scroll-left 20s linear infinite;
}
.scroll-content:hover {
  animation-play-state: paused;
}
.item {
  text-align: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.item .renkli {
  color: var(--scrollbar-parity-color);
}
/* Animasyon Tanımı */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
    /* İçeriğin yarısı kadar sola kay */
  }
}
.live-row {
  --icon-width: 26px;
  --icon-height: 26px;
  padding-right: calc(var(--icon-width) - 4px);
  position: relative;
  font-size: clamp(14px, 2vw, 17px);
}
.up.live-row {
  color: #027a2b;
}
.up.live-row:after {
  animation: slideUp 1s forwards;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  content: "";
  width: var(--icon-width);
  height: var(--icon-height);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-width) var(--icon-height);
  background-image: url("../icons/default.up.svg");
}
.down.live-row {
  color: #f61833;
}
.down.live-row:after {
  animation: slideDown 1s forwards;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  content: "";
  width: var(--icon-width);
  height: var(--icon-height);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-width) var(--icon-height);
  background-image: url("../icons/default.down.svg");
}
@keyframes slideUp {
  from {
    transform: translateY(5px);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-5px) rotateX(90deg);
    opacity: 0.7;
  }
  to {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}
* {
  box-sizing: border-box;
  user-select: none;
}
:root.default {
  --global-padding: 6px;
  --global-border-radius: 3px;
  --global-border-color: #747474;
  --section-1-color: white;
  --section-5-color: white;
  --body-bg-color: #27292d;
  --body-color: white;
  --body-line-height: 30px;
  --body-font-height: 20px;
  --logo: url("https://mobil.gencmetalrafineri.com/images/gmr.png");
  --box-border-color: var(--global-border-color);
  --box-back-color: #27292d;
  --ribon-back: #0f1114;
  --scrollbar-parity-color: #f7c109;
  --thema-border: 1px solid white;
  --thema-sun-icon: url("../icons/default.sun.svg");
  --thema-moon-icon: url("../icons/default.moon.svg");
  --iscilik-back: rgba(204, 204, 204, 0.42);
}
:root.white {
  --global-padding: 6px;
  --global-border-radius: 3px;
  --global-border-color: #1b2023;
  --section-1-color: white;
  --section-5-color: white;
  --body-bg-color: #f9fafc;
  --body-color: #252222;
  --body-line-height: 30px;
  --body-font-height: 20px;
  --logo: url("https://mobil.gencmetalrafineri.com/images/gmr.png");
  --ribon-back: #e7e9ec;
  --box-border-color: var(--global-border-color);
  --box-back-color: #f6f7f8;
  --scrollbar-parity-color: #f7c109;
  --thema-border: 1px solid rgba(0, 0, 0, 0.73);
  --thema-sun-icon: url("../icons/white.sun.svg");
  --thema-moon-icon: url("../icons/white.moon.svg");
  --iscilik-back: rgba(204, 204, 204, 0.42);
}
html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0 var(--global-padding);
  line-height: var(--body-line-height);
  font-size: var(--body-font-height);
  background-color: var(--body-bg-color);
  color: var(--body-color);
}
.time {
  font-size: 40px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.logo {
  width: 300px;
  height: 90px;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.3s ease;
}
/* Mobil cihazlar için */
@media (max-width: 767.98px) {
  .logo {
    width: 160px;
    height: 50px;
    background-size: contain;
  }
}
.thema .sun,
.thema .moon {
  width: clamp(26px, 5vw, 40px);
  height: clamp(26px, 5vw, 40px);
  background-size: clamp(16px, 3vw, 26px);
  cursor: pointer;
  border: var(--thema-border);
  border-radius: var(--global-border-radius);
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin: 0 6px;
  transition: all 0.3s ease;
}
.thema .sun {
  background-image: var(--thema-sun-icon);
}
.thema .moon {
  background-image: var(--thema-moon-icon);
}
.box {
  background-color: var(--box-back-color);
  box-shadow: 1px 1px 10px 4px var(--box-back-color);
  border: 1px solid var(--box-border-color);
}
.br {
  border-radius: var(--global-border-radius);
}
.-row {
  border-top: 0 solid var(--box-border-color);
  border-bottom: 1px solid var(--box-border-color);
  margin-bottom: 3px;
  min-height: 50px;
  padding: 8px 0;
  font-weight: bold;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--sub-back);
  border-radius: 10px;
  border: 3px solid var(--box-border-color);
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.loader {
  background-image: url("../icons/loader.svg");
  background-repeat: no-repeat;
  background-size: 28px 28px;
  width: 30px;
  height: 30px;
  background-position: center;
}
.small {
  font-size: 13px;
  padding-right: calc(var(--icon-width) - 12px);
  font-weight: bold;
}
.small:after {
  --icon-width: 18px !important;
  --icon-height: 18px !important;
}
@media only screen and (max-width: 768px) {
  :root.white {
    --body-line-height: 26px;
    --body-font-height: 16px;
  }
  :root.default {
    --body-line-height: 26px;
    --body-font-height: 16px;
  }
  .scroll-content {
    animation: scroll-left 8s linear infinite;
  }
}
.iscilik span {
  border: 1px solid var(--global-border-color);
  padding: 3px 6px;
  border-radius: var(--global-border-radius);
  font-size: calc(var(--body-font-height) / 1.4);
  font-weight: normal;
  background: var(--iscilik-back);
  line-height: calc(var(--body-line-height) / 1.4);
}
.iscilik:empty {
  display: none;
}
.x-box {
  width: 100%;
  max-height: calc(100vh - 400px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iOS için */
  position: relative;
  cursor: grab;
}
.x-box-content {
  user-select: none;
}
/* Tarayıcı scrollbar'ı gizle */
.x-box::-webkit-scrollbar {
  display: none;
}
.x-box {
  -ms-overflow-style: none;
  /* IE & Edge */
  scrollbar-width: none;
  /* Firefox */
}
/*# sourceMappingURL=common.css.map */