#promoModal.award-modal .modal-dialog { width: calc(100% - 32px); max-width: 900px; margin: 16px auto; min-height: calc(100% - 32px); }
#promoModal .modal-content { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; border: 1px solid #d5e4f1; border-radius: 26px 26px 38px 26px; background: #fff; box-shadow: 0 28px 80px #061e3859; }
.award-modal-heading { position: relative; isolation: isolate; display: flex; align-items: center; flex-shrink: 0; gap: 12px; padding: 12px 20px; background: radial-gradient(ellipse 280px 140px at 100% 120%, transparent 58%, #a2daba26 58.5% 59%, transparent 59.5% 74%, #75bcb51c 74.5% 88%, transparent 88.5%), radial-gradient(ellipse at 100% 100%, #29766380, transparent 65%), linear-gradient(120deg, #12396a, #194e77); border-bottom: 2px solid #96cb76; color: #fff; }
.award-emblem { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 42px; height: 42px; border: 1px solid #ffffff38; border-radius: 12px; background: #ffffff0d; color: #c7eaa5; font-size: 1.35rem; }
.award-heading-copy { flex: 1; min-width: 0; }
.award-eyebrow { display: block; color: #c3dced; font-size: .6rem; font-weight: 700; letter-spacing: .12em; line-height: 1.6; }
.award-heading-copy h2 { margin: 3px 0 0; color: #fff; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; line-height: 1.3; }
.award-heading-copy p { margin: 0; color: #d2e5f2; font-size: .78rem; line-height: 1.6; }
.award-close { display: inline-flex; align-items: center; justify-content: center; align-self: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: 50%; background: #ffffff12; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s; }
.award-close:hover { background: #ffffff2e; }
#promoModal .award-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px; background: linear-gradient(135deg, #eef5fc, #f5f9f1); }
.award-certificate { display: block; padding: 10px; border: 1px solid #c6d9e9; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px #173f7514; cursor: zoom-in; }
.award-certificate img { display: block; width: 100%; height: auto; border-radius: 6px; }
.award-modal-footer { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 16px; padding: 18px 26px; border-top: 1px solid #e0eaf3; background: #fff; }
.award-view-original, .award-continue { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 16px; border: 1px solid #cbddec; border-radius: 11px; font-size: .78rem; font-weight: 600; line-height: 1.5; cursor: pointer; transition: background .2s, box-shadow .2s; }
.award-view-original { background: #f5f9ff; color: #235da8; }
.award-view-original:hover { background: #eaf3ff; color: #17477f; text-decoration: none; }
.award-continue { background: #235da8; border-color: #235da8; border-left: 3px solid #8bd553; color: #fff; box-shadow: 0 5px 12px #173f751a; }
.award-continue:hover { background: #17477f; }
#promoModal a:focus-visible, #promoModal button:focus-visible { outline: 3px solid #78a7d5; outline-offset: 3px; }
@media (max-width: 575px) { #promoModal.award-modal .modal-dialog { width: calc(100% - 20px); margin: 10px auto; min-height: calc(100% - 20px); } #promoModal .modal-content { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 20px; } .award-modal-heading { gap: 10px; padding: 10px 14px; } .award-emblem { display: none; } .award-eyebrow { font-size: .55rem; } .award-heading-copy p { font-size: .72rem; } #promoModal .award-modal-body { padding: 12px; } .award-certificate { padding: 5px; } .award-modal-footer { padding: 12px; gap: 8px; flex-wrap: wrap; } .award-view-original, .award-continue { flex: 1 1 180px; padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { #promoModal, #promoModal .modal-dialog, #promoModal button, #promoModal a { transition: none !important; animation: none !important; } }
body.aksesibilitas-mode #promoModal .modal-content, body.aksesibilitas-mode .award-modal-heading, body.aksesibilitas-mode #promoModal .award-modal-body, body.aksesibilitas-mode .award-modal-footer { background: #000; color: #ffd700; border-color: #ffd700; }
body.aksesibilitas-mode .award-eyebrow, body.aksesibilitas-mode .award-heading-copy p { color: #ffd700; }