/* The space is rendered only when an area has an active creative. */
.spot-area { box-sizing: border-box; max-width: 100%; min-width: 0; overflow: hidden; margin: 1.1rem auto; padding: .6rem; border: 1px solid #e2e8f0; border-radius: .8rem; background: #f8fafc; text-align: center; }
.spot-area .spot-label { display: block; margin-bottom: .35rem; color: #64748b; font-size: .67rem; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }
.spot-area img, .spot-area iframe { display: block; max-width: 100%; margin: auto; }
.spot-area img { height: auto; }
.spot-area[data-spot-code] { min-height: 96px; }
.spot-footer-wrap { padding-top: 1rem; padding-bottom: 1rem; }
.spot-footer-wrap .spot-area { margin: 0; }
.spot-rails { display: none; }
.spot-wide { margin: 1.25rem 0; }
.spot-feed { width: 100%; }
.spot-feed .spot-area { margin: .15rem 0; }
.modal-backdrop.spot-popup-backdrop.show { opacity: 1; background: rgba(35, 18, 58, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.spot-popup-modal .modal-dialog { width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; }
.spot-popup-modal .modal-content { width: 100%; height: 100%; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.spot-popup-modal .modal-body { --spot-popup-vpad: clamp(28px, 6vh, 64px); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: none; padding: var(--spot-popup-vpad) clamp(18px, 6vw, 88px); overflow: auto; }
.spot-popup-modal .spot-popup-shell { position: relative; flex: 0 1 auto; min-width: 0; height: auto; max-width: min(1080px, 100%); max-height: calc(100dvh - var(--spot-popup-vpad) - var(--spot-popup-vpad)); margin: auto; }
.spot-popup-modal .spot-popup-shell--code { flex-basis: 1080px; width: 100%; }
.spot-popup-modal .spot-popup-shell--image { width: fit-content; }
.spot-popup-modal .btn-close { position: absolute; z-index: 5; top: 17px; right: 17px; width: 1rem; height: 1rem; padding: .85rem; border: 1px solid rgba(124, 58, 237, .16); border-radius: 50%; background-color: rgba(255, 255, 255, .96); box-shadow: 0 8px 25px rgba(65, 32, 100, .15); opacity: 1; }
.spot-popup-modal .btn-close:hover { background-color: #f5eaff; transform: scale(1.04); }
.spot-popup-modal .spot-area { position: relative; width: 100%; height: auto; max-height: calc(100dvh - var(--spot-popup-vpad) - var(--spot-popup-vpad)); margin: 0; border: 1px solid rgba(124, 58, 237, .19); border-radius: clamp(18px, 2vw, 28px); overflow: hidden; isolation: isolate; box-shadow: 0 30px 90px rgba(47, 20, 75, .23), 0 0 0 7px rgba(255, 255, 255, .24); background: radial-gradient(circle at 8% 5%, rgba(124, 58, 237, .15), transparent 36%), radial-gradient(circle at 92% 87%, rgba(190, 24, 93, .13), transparent 40%), #fff; }
.spot-popup-modal .spot-area[style*="--spot-image"]::before { content: ""; position: absolute; inset: -40px; background-image: var(--spot-image); background-position: center; background-size: cover; filter: blur(38px) brightness(.92); opacity: .55; pointer-events: none; }
.spot-popup-modal .spot-label { position: absolute; z-index: 3; top: 20px; left: 22px; margin: 0; padding: .45rem .85rem; border: 1px solid rgba(124, 58, 237, .14); border-radius: 99px; background: rgba(255, 255, 255, .95); color: #6d28d9; font-size: .7rem; font-weight: 700; letter-spacing: .08em; box-shadow: 0 5px 18px rgba(57, 25, 86, .09); }
.spot-popup-modal .spot-popup-shell--image .spot-area { display: block; width: fit-content; max-width: 100%; padding: 4rem 14px 14px; }
.spot-popup-modal .spot-popup-shell--image .spot-area > a, .spot-popup-modal .spot-popup-shell--image .spot-area > img { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100%; margin: auto; }
.spot-popup-modal .spot-popup-shell--image .spot-area img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - var(--spot-popup-vpad) - var(--spot-popup-vpad) - 80px); object-fit: contain; border-radius: 0 !important; }
.spot-popup-modal .spot-area[data-spot-code] { display: block; min-height: min(260px, calc(100dvh - var(--spot-popup-vpad) - var(--spot-popup-vpad))); padding: 4.8rem clamp(16px, 4vw, 48px) 1.5rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.spot-popup-modal .spot-area[data-spot-code] > :not(.spot-label):not(template) { position: relative; z-index: 1; max-width: 100%; }
.spot-popup-modal .spot-area[data-spot-code] > ins.adsbygoogle { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0 auto; }
.spot-popup-modal .spot-area[data-spot-code]:not(.spot-loaded)::after { content: "Reklam yükleniyor"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #816a98; font-size: .9rem; letter-spacing: .02em; pointer-events: none; }
@media (max-width: 600px) {
  .spot-popup-modal .modal-body { --spot-popup-vpad: clamp(20px, 5vh, 36px); padding-right: 18px; padding-left: 18px; }
  .spot-popup-modal .spot-area { border-radius: 20px; }
  .spot-popup-modal .spot-label { top: 14px; left: 14px; }
  .spot-popup-modal .btn-close { top: 12px; right: 12px; }
  .spot-popup-modal .spot-area[data-spot-code] { padding: 4.4rem 14px 1.2rem; }
}
@media (min-width: 992px) {
  .spot-mobile-only { display: none !important; }
}
@media (max-width: 991px) {
  .spot-desktop-only { display: none !important; }
}
@media (min-width: 1690px) {
  .spot-rails { display: block; }
  .spot-rail { position: fixed; top: 155px; z-index: 400; width: min(250px, calc((100vw - 1320px) / 2 - 24px)); max-height: calc(100vh - 170px); overflow: auto; scrollbar-width: thin; }
  .spot-rail--left { left: 12px; }
  .spot-rail--right { right: 12px; }
  .spot-rail .spot-area { margin: 0; }
  .spot-rail .spot-area[data-spot-code] { min-height: 200px; }
  .spot-rail img { width: 100%; object-fit: contain; }
}