/* ===== __baiMegaMenuCss ===== */ #ast-desktop-header .main-header-bar-navigation .menu-item-has-children{position: relative}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>.sub-menu{min-width: 340px;max-width: 720px;width: max-content;background: linear-gradient(175deg,#1D2C4E,var(--bai-paper,#16233F));border: 1px solid rgba(255,255,255,.17);border-radius: var(--r-lg,20px);box-shadow: 0 24px 60px -18px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.05) inset;padding: 20px;margin-top: 0;display: flex;gap: 1rem;left: 0;right: auto;opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(-8px) scale(.97);transform-origin: top left;transition: opacity .2s var(--e-out,ease-out),transform .2s var(--e-out,ease-out),visibility 0s linear .2s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open>.sub-menu{opacity: 1;visibility: visible;pointer-events: auto;transform: translateY(0) scale(1);transition: opacity .24s var(--e-out,ease-out),transform .24s var(--e-out,ease-out),visibility 0s linear 0s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>.sub-menu .bai-panel-grid{display: grid;grid-template-columns: repeat(2,minmax(220px,1fr));gap: 0.1rem 1.1rem;flex: 1;min-width: 0}#ast-desktop-header .main-header-bar-navigation #menu-item-1247>.sub-menu .bai-panel-grid,#ast-desktop-header .main-header-bar-navigation #menu-item-1268>.sub-menu .bai-panel-grid{grid-template-columns: minmax(260px,1fr)}#ast-desktop-header .main-header-bar-navigation #menu-item-1247>.sub-menu,#ast-desktop-header .main-header-bar-navigation #menu-item-1268>.sub-menu{min-width: 300px}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item{border: none !important;list-style: none !important}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link{position: relative;display: flex;align-items: flex-start;gap: .75rem;min-height: 46px;padding: .55rem .65rem !important;border-radius: var(--r-md,14px);text-decoration: none !important;transition: background var(--d-fast,.2s) var(--e-out,ease-out);overflow: hidden}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link:hover,#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link:focus-visible{background: rgba(255,255,255,.05)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-icon{flex: none;width: 34px;height: 34px;border-radius: 10px;position: relative;background: color-mix(in srgb,var(--bai-mi-c,var(--bai-gold,#B98A2E)) 14%,transparent);transition: background var(--d-fast,.2s) var(--e-out,ease-out),transform .25s var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link:hover .bai-mi-icon{background: var(--bai-mi-c,var(--bai-gold,#B98A2E));transform: scale(1.06)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-icon::before{content: "";position: absolute;inset: 8px;background: var(--bai-mi-c,var(--bai-gold,#B98A2E));-webkit-mask-image: var(--bai-mi-mask);mask-image: var(--bai-mi-mask);-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center;transition: background var(--d-fast,.2s) var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link:hover .bai-mi-icon::before{background: var(--bai-on-gold,#1A1206)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-sig-english{--bai-mi-c: var(--sig-english,#2F6F8F)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-sig-exam{--bai-mi-c: var(--sig-exam,#7A5A18)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-sig-abroad{--bai-mi-c: var(--sig-abroad,#2F7D72)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-sig-coach{--bai-mi-c: var(--sig-coach,#6B5BA6)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-sig-wellbeing{--bai-mi-c: var(--sig-wellbeing,#4E7A63)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-sig-creative{--bai-mi-c: var(--sig-creative,#B0603C)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-chat{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M4 5h16v11H9l-4 3v-3H4z'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-target{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-plane{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M2 12.5L21 3l-6.3 18-3-7.2-7.2-3z'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-compass{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M15.2 8.8l-2 4.4-4.4 2 2-4.4 4.4-2z'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-heart{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 20.3s-7.4-4.7-9.5-9C1 7.6 2.7 4.8 5.7 4.8c1.9 0 3.6 1.1 4.9 2.9C11.9 5.9 13.6 4.8 15.5 4.8c3 0 4.7 2.8 3.1 6.5-2 4.3-6.6 9-6.6 9z'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-palette{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 3a9 9 0 1 0 3 17.5c1-.4 1.2-1.7.4-2.4-.5-.4-.7-1-.5-1.6.2-.6.8-1 1.5-1H18a5 5 0 0 0 3-9c-1.7-2.1-5-3.5-9-3.5z'/%3E%3Ccircle cx='7.7' cy='10.8' r='1' fill='%23000'/%3E%3Ccircle cx='10.5' cy='7.6' r='1' fill='%23000'/%3E%3Ccircle cx='14.6' cy='8.2' r='1' fill='%23000'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-user{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-users{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8.3' r='3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9.2' r='2.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M15.3 14.4c2.6.5 4.4 2.6 4.4 5.6'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-package{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 8v9l9 5 9-5V8'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M12 13v9'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-sparkle{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-cap{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 4L2 9l10 5 10-5-10-5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M6 11.3V16c0 1.7 2.7 3 6 3s6-1.3 6-3v-4.7'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-briefcase{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='8' width='18' height='11' rx='1.6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 13.5h18'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-book{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M4 4.8A2.3 2.3 0 0 1 6.3 2.5H20V19H6.3A2.3 2.3 0 0 0 4 21.3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M8 6.5h9M8 9.3h9'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-download{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M12 3v12'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M7 10.5l5 5 5-5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M4 19.5h16'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-map{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M9 3.5l-6 2v16l6-2 6 2 6-2v-16l-6 2-6-2z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M9 3.5v16M15 5.5v16'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-award{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M9 12.3L7 21l5-2.8 5 2.8-2-8.7'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-help{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M9.1 9.6a2.9 2.9 0 1 1 4.1 2.6c-.9.5-1.2 1-1.2 2.1'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 17.3v.1'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-user-plus{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8.3' r='3.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M18.5 7.5v6M15.5 10.5h6'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-ic-mail{--bai-mi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E")}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-body{min-width: 0;display: flex;flex-direction: column;gap: 1px}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-title{font: 600 14px/1.3 var(--bai-font,inherit);color: var(--bai-ink-800,#FFFFFF);display: flex;align-items: center;gap: 5px}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-eyebrow{display: block;grid-column: 1 / -1;font: 700 11px/1 var(--bai-font,inherit);letter-spacing: .09em;text-transform: uppercase;color: var(--bai-gold-light,#E7C77E);margin: 0 0 10px 2px}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-desc{font: 400 12px/1.4 var(--bai-font,inherit);color: var(--bai-ink-300,#AEBBD4);white-space: normal}#ast-desktop-header .main-header-bar-navigation #menu-item-1247 .bai-mi-desc,#ast-desktop-header .main-header-bar-navigation #menu-item-1268 .bai-mi-desc{display: none}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link::after{content: "";flex: none;width: 14px;height: 14px;margin-left: auto;background: var(--bai-ink-300,#AEBBD4);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;opacity: 0;transform: translateX(-4px);transition: opacity .18s var(--e-out,ease-out),transform .18s var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link:hover::after{opacity: 1;transform: translateX(0)}#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link>.ast-icon{display: none}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature{flex: none;width: 208px;border-radius: var(--r-md,14px);padding: 1.1rem;background: radial-gradient(120px 90px at 88% -8%,color-mix(in srgb,var(--bai-gold,#B98A2E) 30%,transparent),transparent 70%),var(--bai-paper-2,#1D2C4E);border: 1px solid var(--bai-line,rgba(255,255,255,.14));position: relative;overflow: hidden;display: flex;flex-direction: column;gap: 8px;text-decoration: none !important;transition: transform .22s var(--e-out,ease-out),border-color .22s var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature:hover{transform: translateY(-2px);border-color: var(--bai-gold,#B98A2E)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature::before{content: "";position: absolute;top: 0;left: 1.1rem;right: 1.1rem;height: 2px;background: linear-gradient(90deg,var(--bai-gold,#B98A2E),transparent)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature-label{font: 700 10.5px/1 var(--bai-font,inherit);letter-spacing: .08em;text-transform: uppercase;color: var(--bai-gold-light,#E7C77E)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature-title{font: 600 18px/1.22 "Fraunces",Georgia,serif;color: var(--bai-ink-800,#FFFFFF)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature-desc{font: 400 12px/1.5 var(--bai-font,inherit);color: var(--bai-ink-300,#AEBBD4);flex: 1}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature-cta{display: inline-flex;align-items: center;gap: 5px;font: 700 12.5px/1 var(--bai-font,inherit);color: var(--bai-on-gold,#1A1206);background: linear-gradient(180deg,#FFE29B,var(--bai-gold,#B98A2E));padding: 9px 13px;border-radius: 999px;width: fit-content;transition: transform .2s var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature:hover .bai-mi-feature-cta{transform: translateY(-1px)}#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-panel-grid>.menu-item{opacity: 0;transform: translateY(6px);transition: opacity .22s var(--e-out,ease-out),transform .22s var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item{opacity: 1;transform: translateY(0)}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(1){transition-delay: .02s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(2){transition-delay: .05s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(3){transition-delay: .08s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(4){transition-delay: .11s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(5){transition-delay: .14s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(6){transition-delay: .17s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open .bai-panel-grid>.menu-item:nth-child(7){transition-delay: .2s}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>a.menu-link>.ast-icon,#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>.dropdown-menu-toggle .ast-icon{transition: transform .28s var(--e-out,ease-out)}#ast-desktop-header .main-header-bar-navigation .menu-item-has-children:hover>a.menu-link>.ast-icon,#ast-desktop-header .main-header-bar-navigation .menu-item-has-children:hover>.dropdown-menu-toggle .ast-icon,#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open>a.menu-link>.ast-icon,#ast-desktop-header .main-header-bar-navigation .menu-item-has-children.bai-mega-open>.dropdown-menu-toggle .ast-icon{transform: rotate(180deg)}@media (prefers-reduced-motion: reduce){#ast-desktop-header .main-header-bar-navigation .sub-menu .menu-item>a.menu-link,#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-icon,#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-mi-feature,#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>.sub-menu,#ast-desktop-header .main-header-bar-navigation .sub-menu .bai-panel-grid>.menu-item,#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>a.menu-link>.ast-icon{transition: none}}@media (max-width: 921px){#ast-desktop-header .main-header-bar-navigation .menu-item-has-children>.sub-menu{all: revert}}body:not(.ast-theme-transparent-header) .ast-primary-header-bar{background: var(--bai-paper,#16233F) !important} /* ===== __baiDarkSitewideCss ===== */ :root{--bai-paper: #16233F;--bai-paper-2: #16233F;--bai-paper-3: #16233F;--bai-line: rgba(255,255,255,.14);--bai-ink-800: #FFFFFF;--bai-ink-600: #D7DEEC;--bai-ink-500: #C9D4E8;--bai-ink-300: #AEBBD4;--bai-gold-ink: #E7C77E;--bai-success: #4FCB9A;--bai-warning: #E8B354;--bai-danger: #F0897A}.bai .skip-link:focus,.bai .skip-link:focus-visible{background: #16233F !important;color: #fff !important}.bai-section--dark{background: #16233F}.res .card,.res .rec{background: #16233F !important}label.opt{background: #1D2D4D !important}[class~="dark"],[class~="on-dark"]{background-color: #16233F !important}html,body{background-color: #16233F !important}body{color: #D7DEEC}.ast-footer-copyright,.ast-footer-copyright a,.site-below-footer-inner-wrap,.site-below-footer-inner-wrap a{color: #B4C2DA !important}.site-below-footer-wrap,.ast-builder-footer-grid-columns,.ast-small-footer-wrap{background: #16233F !important}.card--flagship{background: #16233F !important;border-color: rgba(185,138,46,.3) !important}.ast-mobile-popup-drawer,.ast-mobile-popup-content,.ast-mobile-popup-inner,#ast-mobile-header-drawer{background: #16233F !important}.ast-mobile-popup-drawer a,.ast-mobile-popup-drawer .menu-link,.ast-mobile-popup-drawer .menu-item{color: #fff !important}#bai-login-page{--bai-background: #16233F !important;--bai-surface: #16233F !important;--bai-primary: #16233F !important;--bai-text: #FFFFFF !important;--bai-muted: #C9D4E8 !important;--bai-border: rgba(255,255,255,.16) !important}#bai-login-page,#bai-login-page .bai-login-shell,#bai-login-page .bai-login-main,#bai-login-page input{background: #16233F !important;color: #FFFFFF !important}#bai-login-page .bai-role-label{background: #1B2A4A !important;color: #FFFFFF !important}#bai-login-page .bai-security-note{background: #1B2A4A !important;color: #C9D4E8 !important}#bai-login-page ::placeholder{color: #8FA0C2 !important;opacity: 1}.ast-builder-menu-1 .menu-item.current-menu-item>.menu-link,.ast-builder-menu-1 .inline-on-mobile .menu-item.current-menu-item>.ast-menu-toggle,.ast-builder-menu-1 .current-menu-ancestor>.menu-link,.ast-builder-menu-1 .menu-item.current-menu-item>.ast-menu-toggle{color: #E7C77E !important}.bai-shot>.wrap,.bai-shot>.bai-container{margin-inline: auto !important;width: 100% !important;max-width: var(--w-content,70rem) !important;padding-inline: var(--gutter,1.5rem) !important}.bai-shot__fig{border-radius: var(--r-xl,28px) !important}.bai-shot__img{aspect-ratio: 16 / 10 !important}@media (max-width: 700px){.bai-shot>.wrap,.bai-shot>.bai-container{max-width: 100% !important;padding-inline: 0 !important}.bai-shot__fig{border-radius: 0 !important}} /* ===== __baiNavHoverPill ===== */ #ast-desktop-header .main-header-menu{position: relative}#ast-desktop-header .main-header-menu>.menu-item{position: relative}#ast-desktop-header .main-header-menu>.menu-item>a.menu-link{position: relative;z-index: 1}#ast-desktop-header .bai-nav-pill{position: absolute;top: 4px;bottom: 4px;left: 0;width: 0;border-radius: var(--r-lg,20px);background: color-mix(in srgb,currentColor 8%,transparent);opacity: 0;pointer-events: none;z-index: 0;transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1),width 0.32s cubic-bezier(0.22,0.61,0.36,1),opacity 0.18s ease-out}#ast-desktop-header .bai-nav-pill.is-active{opacity: 1}@media (prefers-reduced-motion: reduce){#ast-desktop-header .bai-nav-pill{transition: opacity 0.12s ease-out}}@media (max-width: 921px){#ast-desktop-header .bai-nav-pill{display: none}} /* ===== __baiSectionBgHizmetler ===== */ body.page-id-1598,body.page-id-1613,body.page-id-1460,body.page-id-1384,body.page-id-1629,body.page-id-1622,body.page-id-1631,body.page-id-1636,body.page-id-3607{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1.3px,transparent 1.9px),repeating-linear-gradient(115deg,rgba(16,27,51,0) 0px,rgba(16,27,51,0) 90px,rgba(95,155,215,.30) 210px,rgba(130,185,230,.19) 260px,rgba(16,27,51,0) 380px,rgba(16,27,51,0) 600px) !important;background-size:26px 26px,auto !important;background-position:0 0,0 0 !important;background-repeat:repeat,repeat !important;background-attachment:scroll,scroll !important} /* ===== __baiSectionBgHizmetlerTransparent ===== */ body:is(.page-id-1598,.page-id-1613,.page-id-1460,.page-id-1384,.page-id-1629,.page-id-1622,.page-id-1631,.page-id-1636,.page-id-3607) :is(section.hero,section.bai-mstep,section.alt,section.dark,section.fin){background:transparent !important;background-image:none !important} /* ===== __baiMobileCss ===== */ #ast-mobile-header .ast-mobile-header-content{background: linear-gradient(175deg,#1D2C4E,var(--bai-paper,#16233F)) !important;padding: 8px 0 24px}#ast-mobile-header .main-header-bar-navigation,#ast-mobile-header .ast-main-header-bar-alignment,#ast-mobile-header .ast-builder-menu-mobile,#ast-mobile-header .main-navigation,#ast-mobile-header .site-navigation{background: transparent !important}#ast-mobile-header .main-header-menu .sub-menu{background: transparent !important}#ast-mobile-header .main-header-menu{padding: 0 16px;background: transparent !important}#ast-mobile-header .main-header-menu .menu-item{border-bottom: 1px solid rgba(255,255,255,.09) !important;align-items: flex-start !important}#ast-mobile-header .main-header-menu>.menu-item:last-child{border-bottom: none !important}#ast-mobile-header .main-header-menu>.menu-item>a.menu-link{display: flex;align-items: center;height: auto !important;min-height: 52px;padding: 0 !important;font: 600 16.5px/1.3 var(--bai-font,inherit);color: var(--bai-ink-800,#FFFFFF) !important}#ast-mobile-header .ast-menu-toggle{width: 44px;height: 44px;display: flex;align-items: center;justify-content: center}#ast-mobile-header .ast-menu-toggle .ast-arrow-svg{width: 13px;height: auto;fill: var(--bai-ink-300,#AEBBD4);transition: transform .28s var(--e-out,ease-out),fill .2s ease}#ast-mobile-header .menu-item.ast-submenu-expanded>.ast-menu-toggle .ast-arrow-svg{transform: rotate(180deg);fill: var(--bai-gold,#B98A2E)}#ast-mobile-header .main-header-menu>.menu-item>a.menu-link>.dropdown-menu-toggle{display: none}#ast-mobile-header .main-header-menu .sub-menu{display: block !important;overflow: hidden;max-height: 0;opacity: 0;transition:max-height .34s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)),opacity .24s ease;padding-left: 4px;border-left: 1px solid rgba(255,255,255,.1);margin-left: 8px}#ast-mobile-header .menu-item.ast-submenu-expanded>.sub-menu{max-height: 900px;opacity: 1;transition:max-height .34s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)),opacity .24s ease}@media (prefers-reduced-motion: reduce){#ast-mobile-header .main-header-menu .sub-menu,#ast-mobile-header .menu-item.ast-submenu-expanded>.sub-menu,#ast-mobile-header .ast-menu-toggle .ast-arrow-svg{transition: none}}#ast-mobile-header .sub-menu .menu-item>a.menu-link{display: flex;align-items: center;gap: .65rem;min-height: 46px;padding: .4rem .5rem !important;border-radius: var(--r-md,14px);font: 500 15px/1.3 var(--bai-font,inherit);color: var(--bai-ink-500,#C9D4E8) !important}#ast-mobile-header .sub-menu .menu-item>a.menu-link:active{background: rgba(255,255,255,.06)}#ast-mobile-header .sub-menu .menu-item>a.menu-link>.ast-icon{display: none}#ast-mobile-header .sub-menu .bai-mi-icon{flex: none;width: 30px;height: 30px;border-radius: 9px;position: relative;background: color-mix(in srgb,var(--bai-gold,#B98A2E) 15%,transparent)}#ast-mobile-header .sub-menu .bai-mi-icon::before{content: "";position: absolute;inset: 7px;background: var(--bai-gold,#B98A2E);-webkit-mask-image: var(--bai-mi-mask);mask-image: var(--bai-mi-mask);-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center}#ast-mobile-header .sub-menu .bai-ic-chat::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M4 5h16v11H9l-4 3v-3H4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M4 5h16v11H9l-4 3v-3H4z'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-target::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-plane::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M2 12.5L21 3l-6.3 18-3-7.2-7.2-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M2 12.5L21 3l-6.3 18-3-7.2-7.2-3z'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-map::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M9 3.5l-6 2v16l6-2 6 2 6-2v-16l-6 2-6-2z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M9 3.5v16M15 5.5v16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M9 3.5l-6 2v16l6-2 6 2 6-2v-16l-6 2-6-2z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M9 3.5v16M15 5.5v16'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-compass::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M15.2 8.8l-2 4.4-4.4 2 2-4.4 4.4-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M15.2 8.8l-2 4.4-4.4 2 2-4.4 4.4-2z'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-heart::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 20.3s-7.4-4.7-9.5-9C1 7.6 2.7 4.8 5.7 4.8c1.9 0 3.6 1.1 4.9 2.9C11.9 5.9 13.6 4.8 15.5 4.8c3 0 4.7 2.8 3.1 6.5-2 4.3-6.6 9-6.6 9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 20.3s-7.4-4.7-9.5-9C1 7.6 2.7 4.8 5.7 4.8c1.9 0 3.6 1.1 4.9 2.9C11.9 5.9 13.6 4.8 15.5 4.8c3 0 4.7 2.8 3.1 6.5-2 4.3-6.6 9-6.6 9z'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-palette::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 3a9 9 0 1 0 3 17.5c1-.4 1.2-1.7.4-2.4-.5-.4-.7-1-.5-1.6.2-.6.8-1 1.5-1H18a5 5 0 0 0 3-9c-1.7-2.1-5-3.5-9-3.5z'/%3E%3Ccircle cx='7.7' cy='10.8' r='1' fill='%23000'/%3E%3Ccircle cx='10.5' cy='7.6' r='1' fill='%23000'/%3E%3Ccircle cx='14.6' cy='8.2' r='1' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 3a9 9 0 1 0 3 17.5c1-.4 1.2-1.7.4-2.4-.5-.4-.7-1-.5-1.6.2-.6.8-1 1.5-1H18a5 5 0 0 0 3-9c-1.7-2.1-5-3.5-9-3.5z'/%3E%3Ccircle cx='7.7' cy='10.8' r='1' fill='%23000'/%3E%3Ccircle cx='10.5' cy='7.6' r='1' fill='%23000'/%3E%3Ccircle cx='14.6' cy='8.2' r='1' fill='%23000'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-cap::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 4L2 9l10 5 10-5-10-5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M6 11.3V16c0 1.7 2.7 3 6 3s6-1.3 6-3v-4.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M12 4L2 9l10 5 10-5-10-5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M6 11.3V16c0 1.7 2.7 3 6 3s6-1.3 6-3v-4.7'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-user::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-users::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8.3' r='3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9.2' r='2.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M15.3 14.4c2.6.5 4.4 2.6 4.4 5.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8.3' r='3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9.2' r='2.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M15.3 14.4c2.6.5 4.4 2.6 4.4 5.6'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-package::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 8v9l9 5 9-5V8'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M12 13v9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 8v9l9 5 9-5V8'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M12 13v9'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-sparkle::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-briefcase::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='8' width='18' height='11' rx='1.6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 13.5h18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='8' width='18' height='11' rx='1.6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 13.5h18'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-book::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M4 4.8A2.3 2.3 0 0 1 6.3 2.5H20V19H6.3A2.3 2.3 0 0 0 4 21.3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M8 6.5h9M8 9.3h9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M4 4.8A2.3 2.3 0 0 1 6.3 2.5H20V19H6.3A2.3 2.3 0 0 0 4 21.3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M8 6.5h9M8 9.3h9'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-download::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M12 3v12'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M7 10.5l5 5 5-5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M4 19.5h16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M12 3v12'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M7 10.5l5 5 5-5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M4 19.5h16'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-award::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M9 12.3L7 21l5-2.8 5 2.8-2-8.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M9 12.3L7 21l5-2.8 5 2.8-2-8.7'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-help::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M9.1 9.6a2.9 2.9 0 1 1 4.1 2.6c-.9.5-1.2 1-1.2 2.1'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 17.3v.1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M9.1 9.6a2.9 2.9 0 1 1 4.1 2.6c-.9.5-1.2 1-1.2 2.1'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 17.3v.1'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-user-plus::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8.3' r='3.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M18.5 7.5v6M15.5 10.5h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8.3' r='3.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M18.5 7.5v6M15.5 10.5h6'/%3E%3C/svg%3E")}#ast-mobile-header .sub-menu .bai-ic-mail::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E")}#ast-mobile-header .main-header-menu>.menu-item.menu-item-3702>a.menu-link,#ast-mobile-header .main-header-menu>.menu-item.menu-item-2095>a.menu-link{padding-right: 0}#ast-mobile-header .main-header-menu>.menu-item.menu-item-2097{margin-top: 10px;border-bottom: none !important}#ast-mobile-header .main-header-menu>.menu-item.menu-item-2097>a.menu-link{justify-content: center;background: linear-gradient(180deg,#FFE29B,var(--bai-gold,#B98A2E));color: var(--bai-on-gold,#1A1206) !important;border-radius: 999px;font-weight: 700;min-height: 48px} /* ===== __baiSkipLinkFix ===== */ .bai a.skip-link:focus,.bai a.skip-link:focus-visible{position:fixed!important;top:1rem!important;left:1rem!important;width:auto!important;height:auto!important;margin:0!important;padding:.75rem 1.25rem!important;clip:auto!important;clip-path:none!important;overflow:visible!important;background:#16233F!important;color:#FFFFFF!important;border:2px solid #FFFFFF!important;border-radius:10px!important;font-size:1rem!important;font-weight:600!important;text-decoration:none!important;line-height:1.2!important;z-index:200000!important;outline:3px solid #4C8DFF!important;outline-offset:2px!important;box-shadow:0 8px 24px rgba(0,0,0,.45)!important} /* ===== bai-faq-native: unclassed
FAQ blocks ===== 30 pages build their FAQs from bare
/, which the .bai-faq__* rules never match, so they fell back to the browser's default disclosure triangle. These rules give them the same look as the designed accordion: white question, gold on hover/open, circular gold + that turns into an x, and the same answer typography. Scoped to
and to :not([class]) so the footer sitemap
and any future classed accordion are untouched. */ .bai main details:not([class]){ border-bottom:1px solid var(--bai-line,rgba(255,255,255,.12)); } .bai main details:not([class]):first-of-type{ border-top:1px solid var(--bai-line,rgba(255,255,255,.12)); } .bai main details:not([class]) > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 2px; margin:0; font-size:16.5px; font-weight:600; line-height:1.45; letter-spacing:.01em; color:#FFFFFF; transition:color .2s ease; } .bai main details:not([class]) > summary::-webkit-details-marker{display:none} .bai main details:not([class]) > summary::marker{content:"";font-size:0} .bai main details:not([class]) > summary:hover, .bai main details:not([class]) > summary:focus-visible{color:#E7C77E} .bai main details:not([class]) > summary:focus-visible{ outline:3px solid #4C8DFF;outline-offset:3px;border-radius:6px; } .bai main details:not([class])[open] > summary{color:#E7C77E} .bai main details:not([class]) > summary::after{ content:""; flex:none; width:28px;height:28px; border-radius:50%; background-color:rgba(185,138,46,.12); background-image:linear-gradient(#E7C77E,#E7C77E),linear-gradient(#E7C77E,#E7C77E); background-size:12px 2px,2px 12px; background-position:center,center; background-repeat:no-repeat; transition:background-color .2s ease,transform .25s ease; } .bai main details:not([class]) > summary:hover::after, .bai main details:not([class])[open] > summary::after{ background-color:#B98A2E; background-image:linear-gradient(#1A1206,#1A1206),linear-gradient(#1A1206,#1A1206); } .bai main details:not([class])[open] > summary::after{transform:rotate(135deg)} .bai main details:not([class]) > *:not(summary){ padding:0 2px 18px; color:#C9D4E8; font-size:15.5px; line-height:1.75; } .bai main details:not([class]) > *:not(summary) p, .bai main details:not([class]) > *:not(summary) li{ color:#C9D4E8;font-size:15.5px;line-height:1.75; } @keyframes bai-faq-native-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .bai main details:not([class])[open] > *:not(summary){ animation:bai-faq-native-in .28s ease-out; } /* ===== reCAPTCHA fit ===== The v2 checkbox widget is a fixed 304px iframe. Inside the form column it overflowed its box on phones (measured: 304px iframe in a 237px box) and got clipped. Scale it down to fit, anchored left, with the height corrected so it does not leave a gap underneath. */ .g-recaptcha{max-width:100%} @media (max-width:600px){ .g-recaptcha{transform:scale(.86);transform-origin:left top;height:68px} } @media (max-width:430px){ .g-recaptcha{transform:scale(.76);transform-origin:left top;height:60px} } @media (max-width:340px){ .g-recaptcha{transform:scale(.68);transform-origin:left top;height:54px} } @media (prefers-reduced-motion:reduce){ .bai main details:not([class]) > summary, .bai main details:not([class]) > summary::after{transition:none} .bai main details:not([class])[open] > *:not(summary){animation:none} } /* ===================================================================== 2026-09-08 - reported visual defects Diagnosed live on the running site, not inferred. Each block records the measurement that identified it. ===================================================================== */ /* ---- (A) FAQ variant A: closed answers bled under their question ------- Homepage + /en/ use .bai-faq__q / .bai-faq__a with the grid 0fr->1fr collapse. An injected block set .bai-faq__a .bai-faq__inner{padding:0 2px 18px} putting the 18px on the very element the collapse animates. Padding is NOT clipped by overflow:hidden and is not removed by a 0fr track, so every CLOSED answer stayed 18px tall (measured: grid-template-rows resolved to 18px, not 0fr) and a clipped strip of answer text showed under each question - the "question and text mixed together" report. Move the spacing off the animated wrapper and onto the paragraph. */ .bai-faq__a .bai-faq__inner{padding-top:0 !important;padding-bottom:0 !important} .bai-faq__a .bai-faq__inner > *:last-child{margin-bottom:0} .bai-faq__a .bai-faq__inner p{padding-bottom:18px !important} /* ---- (B) FAQ variant B: question turned white on hover ----------------- 59 sublanding pages use .bai-faq-q and still carry a light palette island (measured: --bg:#F6F7FA / #F5F8FC / #FBF8F3 / #F4FAF9 on 53 of them, --ink:#16233F). Their rule is .bai-faq-q:hover{background:var(--bg) !important} The resting state is neutralised by the contrast guard, but a guard cannot repaint a :hover state, and the !important reinstated the near-white panel on hover - with the label falling back to var(--ink) navy or dark gold. Unreadable either way. Beaten here with higher specificity plus !important. */ .bai-accordion button.bai-faq-q, .bai-faq-item button.bai-faq-q{background:transparent !important;color:#FFFFFF !important} .bai-accordion button.bai-faq-q:hover, .bai-accordion button.bai-faq-q:focus-visible, .bai-faq-item button.bai-faq-q:hover, .bai-faq-item button.bai-faq-q:focus-visible, .bai-faq-item.is-open button.bai-faq-q{background:transparent !important;color:#E7C77E !important} .bai-faq-item button.bai-faq-q:focus-visible{outline:3px solid #4C8DFF;outline-offset:2px;border-radius:8px} /* the + / x glyph sits on a gold disc once open or hovered: keep it dark, the page rule painted it var(--bg) which is the same near-white. */ .bai-faq-item button.bai-faq-q:hover .bai-faq-icon::before, .bai-faq-item button.bai-faq-q:hover .bai-faq-icon::after, .bai-faq-item.is-open .bai-faq-icon::before, .bai-faq-item.is-open .bai-faq-icon::after{background:#1A1206 !important} /* separators were color-mix(var(--ink) 14%) = navy on navy = invisible */ .bai-accordion .bai-faq-item{border-bottom-color:rgba(255,255,255,.14) !important} .bai-accordion .bai-faq-a p{color:#C9D4E8 !important} /* ---- (C) forms: panel and fields were three different navies ---------- Measured on /iletisim/: page #16233F, form panel #1D2D4D, fields #16233F again, each with its own hairline. Flatten the panel to the page, make the field a transparent box defined by its border only, and raise the placeholder off the floor so it is actually readable. */ .srfm-form, .srfm-form-container, .srfm-single-form{background:transparent !important;box-shadow:none !important} .srfm-form input[type="text"], .srfm-form input[type="email"], .srfm-form input[type="tel"], .srfm-form input[type="url"], .srfm-form input[type="number"], .srfm-form input[type="date"], .srfm-form textarea, .srfm-form select, .srfm-form .srfm-input-common{ background-color:transparent !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.42) !important; border-radius:12px !important; } .srfm-form input:focus, .srfm-form textarea:focus, .srfm-form select:focus{ border-color:#E7C77E !important; outline:2px solid rgba(231,199,126,.45); outline-offset:1px; } .srfm-form ::placeholder{color:rgba(255,255,255,.62) !important;opacity:1} .srfm-form .srfm-block-label, .srfm-form label{color:#FFFFFF !important} /* the option list is drawn by the OS: it needs a real colour, not transparent */ .srfm-form select option{background-color:#16233F;color:#FFFFFF} /* ---- (D) image-beside-text rows left a void under the photo ----------- The *-media-row grids are align-items:center, so whichever column is shorter floats in the middle and the taller one dictates the height - when the copy runs long the photo sits high with dead space beneath it. Stretching the figure closes the void; it can only ever remove blank space, never add it. Capped so a very long column cannot produce an absurdly tall photo. Desktop only - the row is single-column on phones and already reads correctly there (verified at 390px). */ @media (min-width:900px){ [class*="media-row"] > .bai-container{align-items:stretch} [class*="media-fig"]{ align-self:stretch !important; height:100% !important; aspect-ratio:auto !important; max-height:640px; } [class*="media-fig"] > img{ width:100% !important; height:100% !important; object-fit:cover; } } /* ---- (E) two-tone panels: #1D2D4D bands on a #16233F page ------------- bai-flatten-panels. Measured across all 139 pages: #1D2D4D appears 304 times, 298 of them as a background. The dominant form is background:linear-gradient(160deg,var(--ink) 0%,#1d2d4d 100%) on .bai-hero (54 pages) and .bai-final (53 pages), which paints a slightly lighter band across an otherwise flat #16233F page - the "different colours between the boxes and the background" report. The same colour backs the split quiz/match sections and the FAQ block. Flattened to the page so the site reads as one surface. Section rhythm still comes from spacing, rules and the radial ::before glows, which are left untouched. */ .bai-hero, .bai-final, .bai-faq, .bai-hh, .bai-trial, .bai-service, .bai-svc .hero, .bai-svc .goal, .bai-iyilik .hero, [class*="bai-"].is-split{background:transparent !important} /* the card-like ones lose their fill too, so they keep a hairline to stay readable as discrete objects rather than dissolving into the page. */ .bai-svc .price-card, .bai-program-card, .bai-audience-item, .bai-step, .bai-faq details{ background:transparent !important; border:1px solid rgba(255,255,255,.12); } /* ---- (F) mobile parity ------------------------------------------------- bai-mobile-parity. Reported 2026-09-08: "mobile is much weaker than desktop". Three separate faults, each measured at 390px. */ /* 1. Footer sitemap columns never opened. They are
, but the open state is keyed on a .bai-open class that nothing ever applies, so tapping a column toggled the native [open] attribute while the list stayed max-height:0. Measured:
still 70px tall with 8 links inside it. Honour the native attribute as well as the class. */ .bai-sitemap__col[open] > .bai-sitemap__list{ max-height:640px !important; opacity:1 !important; } /* 2. Astra paints border-bottom:1px solid #EAEAEA - a near-white line - on mobile sub-menu links. Combined with the 14px radius those links carry, it drew a curved white swoosh under every sub-item. */ #ast-mobile-header .sub-menu .menu-item > a.menu-link{border-bottom:0 !important} /* 3. The header social links exist only in the desktop header, so the mobile drawer had no Instagram/YouTube at all. bai-motion.js clones them into the drawer and marks the row .bai-mobile-social; this styles it. */ #ast-mobile-header .bai-mobile-social{ display:flex; gap:12px; align-items:center; padding:16px 20px 4px; } #ast-mobile-header .bai-mobile-social a{ width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:background-color .2s ease; } #ast-mobile-header .bai-mobile-social a:active{background:rgba(255,255,255,.14)} #ast-mobile-header .bai-mobile-social svg{width:20px;height:20px} #ast-mobile-header .bai-mobile-social svg path{fill:#E7C77E !important} /* 4. Footer sitemap chevron pointed the wrong way when closed. The marker is a 9px box with border-right+border-bottom; open used rotate(180deg) and rendered a correct "^", but closed used rotate(45deg) and rendered a bare corner glyph instead of a "v". Verified in place before shipping. */ .bai-sitemap__col > summary::after{transform:rotate(0deg) !important} .bai-sitemap__col[open] > summary::after{transform:rotate(180deg) !important} /* ========================================================================== bai-auto-motion v2 -- "Kalibrasyon" (2026-09-12) -------------------------------------------------------------------------- v1 gave every element the same fade and the same static wash. That is what made it read as generic: a section heading, a card and an image all arrived identically, and the light never acknowledged the cursor. v2 is a TIERED system. Different kinds of things move differently, which is the whole reason Apple-grade motion reads as premium rather than decorated: tier 1 headings clip-path wipe from their own baseline tier 2 cards rise + a barely-there scale, scroll-linked tier 3 hover layered: surface -> content -> affordance, and a radial sheen that TRACKS THE POINTER Where the browser supports scroll-driven animation the reveal is linked to scroll position instead of fired by a trigger, so content flows in under the reader's own scrolling rather than popping at a threshold. Older browsers keep the IntersectionObserver path, unchanged. ========================================================================== */ :root{ /* Fast departure, long settle. This single curve is what makes the whole system feel like one instrument. */ --bai-e-settle:cubic-bezier(.16,.84,.44,1); --bai-e-wipe:cubic-bezier(.3,.9,.3,1); } /* superseded by the parameterised baiRise in the touch tier below */ /* The wipe ends on a NEGATIVE inset so the clip fully releases -- otherwise it shears descenders and crops the focus ring. */ @keyframes baiWipe{ from{opacity:0;clip-path:inset(0 0 104% 0);transform:translateY(16px)} to {opacity:1;clip-path:inset(-20% -12% -20% -12%);transform:none} } /* ----------------------------------------------------------- tier 1: type */ [data-bai-line].bai-r{ opacity:1 !important;transform:none !important;transition:none !important; clip-path:inset(0 0 104% 0); } [data-bai-line].bai-r.is-in{ animation:baiWipe .82s var(--bai-e-wipe) forwards; } /* ---------------------------------------------------------- tier 2: cards */ [data-bai-group].bai-r{ opacity:1 !important;transform:none !important;transition:none !important; will-change:auto; } [data-bai-group].bai-r > *{opacity:0} [data-bai-group].bai-r.is-in > *{ opacity:1; animation:baiRise .66s var(--bai-e-settle) backwards; animation-delay:calc(var(--bai-i,0) * 85ms); } /* Scroll-linked upgrade. Each card owns its own view progress, so a column of cards flows in continuously as you scroll instead of snapping in at one trigger line. The per-card range offset keeps siblings in a row from arriving in lockstep. */ @supports (animation-timeline: view()){ [data-bai-group].bai-r > *, [data-bai-group].bai-r.is-in > *{ opacity:1; animation:baiRise linear both; animation-timeline:view(); animation-range:entry calc(4% + var(--bai-i,0) * 6%) entry calc(56% + var(--bai-i,0) * 6%); animation-delay:0s; } [data-bai-line].bai-r, [data-bai-line].bai-r.is-in{ clip-path:none; animation:baiWipe linear both; animation-timeline:view(); animation-range:entry 2% entry 46%; } } /* --------------------------------------------------------- tier 3: hover Three layers on different clocks. Everything moving at once is what made v1 feel flat; the 40-70ms offsets are what make it feel considered. */ .bai-hv{ position:relative;isolation:isolate; transition: translate .34s var(--bai-e-settle), box-shadow .34s var(--bai-e-settle), border-color .34s var(--bai-e-settle); } /* The sheen follows the cursor: --mx/--my are written by initPointerLight() on pointermove, rAF-throttled, and only on real hover devices. With no JS it falls back to a fixed top-left light and still looks deliberate. */ .bai-hv::after{ content:"";position:absolute;inset:0;z-index:-1;opacity:0; border-radius:inherit;pointer-events:none; background: radial-gradient(260px circle at var(--mx,14%) var(--my,0%), rgba(231,199,126,.17), transparent 64%), linear-gradient(160deg, rgba(255,255,255,.05), transparent 46%); transition:opacity .32s var(--bai-e-settle); } /* A hairline that warms from the top edge down -- depth without a heavier border. */ .bai-hv::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:0; border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(231,199,126,.42),transparent 2px); transition:opacity .32s var(--bai-e-settle); } .bai-hv h2,.bai-hv h3,.bai-hv h4,.bai-hv strong,.bai-hv b{ transition:translate .34s var(--bai-e-settle) .04s; } .bai-hv svg{ transition:translate .32s var(--bai-e-settle) .07s, scale .32s var(--bai-e-settle) .07s; } @media (hover: hover) and (pointer: fine){ .bai-hv:hover::after, .bai-hv:hover::before{opacity:1} .bai-hv:hover{ translate:0 -6px; border-color:rgba(231,199,126,.42); box-shadow: 0 1px 1px rgba(0,0,0,.26), 0 22px 44px -24px rgba(0,0,0,.78), 0 0 0 1px rgba(231,199,126,.12); } .bai-hv:hover h2,.bai-hv:hover h3, .bai-hv:hover h4,.bai-hv:hover strong,.bai-hv:hover b{translate:0 -2px} .bai-hv:hover > svg:first-child, .bai-hv:hover > * > svg:first-child{translate:0 -3px;scale:1.07} } /* Keyboard parity -- a card reached by Tab gets the same affordance. */ .bai-hv:focus-within::after, .bai-hv:focus-within::before{opacity:1} .bai-hv:focus-within{border-color:rgba(231,199,126,.42)} @media (prefers-reduced-motion: reduce){ [data-bai-group].bai-r > *, [data-bai-group].bai-r.is-in > *, [data-bai-line].bai-r, [data-bai-line].bai-r.is-in{ opacity:1 !important;animation:none !important;clip-path:none !important; } .bai-hv,.bai-hv::after,.bai-hv::before, .bai-hv svg,.bai-hv h3,.bai-hv h4{transition:none !important} .bai-hv:hover{translate:none !important} } /* ========================================================================== bai-auto-motion v3 -- flow everywhere + image settle (2026-09-12) -------------------------------------------------------------------------- v2 brought scroll-linked flow, but only to the grids THIS pass tags. Most of the site already ships its own reveal system, so those pages kept their old trigger-based behaviour: content pops at a threshold line instead of arriving under the reader's scrolling. That pop is the thing that actually reads as cheap. The block below re-times every existing reveal target onto the scroll timeline. It does not invent a reveal anywhere -- it only takes elements that were ALREADY reveal targets and makes their arrival continuous. And because the animation carries fill:both, it is strictly safer than what it replaces: an element can no longer be left invisible by an observer callback that never fired. Done in CSS rather than JS deliberately. It needs no measurement, no tagging pass and no extra bytes of script -- and the equivalent JS was being rejected by the host WAF on save. ========================================================================== */ @supports (animation-timeline: view()){ body:not(.home) .entry-content [data-r], body:not(.home) .entry-content .bai-reveal, body:not(.home) .entry-content .reveal{ animation:baiRise linear both; animation-timeline:view(); animation-range:entry 4% entry 52%; } /* Components that run their own choreography keep it. */ /* NO component exclusions here, deliberately. The first version excluded .bai-quest with `animation: none` -- which did not just drop the scroll timeline, it removed the quest's OWN reveal animation and left its intro panel stuck at the opacity:0 its CSS starts from. Letting every reveal target take the same treatment is both simpler and strictly safer: the animation carries fill:both, so the end state is always visible. */ } /* ------------------------------------------------------------ image settle Nothing on this site moved its imagery. A slow scale-down as the picture enters is the cheapest honest depth cue there is -- and because it uses the independent scale property it can never fight an existing transform. initImageSettle() only tags images whose parent actually clips, so the scaled-up frame is never able to overlap the text beside it. */ @keyframes baiSettle{ from{scale:1.07} to {scale:1} } .bai-mv{scale:1;will-change:auto} @supports (animation-timeline: view()){ .bai-mv{ animation:baiSettle linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; } } @media (prefers-reduced-motion: reduce){ body:not(.home) .entry-content [data-r], body:not(.home) .entry-content .bai-reveal, body:not(.home) .entry-content .reveal, .bai-mv{animation:none !important;scale:1 !important;opacity:1 !important} } /* ========================================================================== bai-auto-motion v4 -- chapter rhythm (2026-09-12) -------------------------------------------------------------------------- After v3 every block flowed, but as ONE unit: heading, lede and content all arrived together. A block that arrives all at once still reads as a block arriving. What makes a page feel composed is a rhythm inside it. So each section now lands in three beats, offset on the same scroll range: block entry 4% -> 52% the surface arrives heading entry 22% -> 72% the title wipes up from its own baseline lede entry 30% -> 80% the supporting line follows it The ranges overlap on purpose. Sequential-but-overlapping reads as one considered movement; fully separated beats read as three animations. ========================================================================== */ @supports (animation-timeline: view()){ body:not(.home) .entry-content h2:not([data-r]):not(.bai-reveal):not(.reveal){ animation:baiWipe linear both; animation-timeline:view(); animation-range:entry 22% entry 72%; } body:not(.home) .entry-content h2 + p, body:not(.home) .entry-content .lede, body:not(.home) .entry-content .bai-lede{ animation:baiRise linear both; animation-timeline:view(); animation-range:entry 30% entry 80%; } /* Components that choreograph themselves keep their own timing. A heading inside the quest or the stepper is part of that component's sequence, not part of the page's chapter rhythm. */ } @media (prefers-reduced-motion: reduce){ body:not(.home) .entry-content h2, body:not(.home) .entry-content h2 + p, body:not(.home) .entry-content .lede, body:not(.home) .entry-content .bai-lede{ animation:none !important;clip-path:none !important;opacity:1 !important; } } /* ========================================================================== Astra global heading colour (2026-09-12) -------------------------------------------------------------------------- --ast-global-color-2 was never updated in the dark-navy conversion: it is still the light-era #1E293B, and Astra applies it to h1-h6 site-wide. Any heading whose own page CSS does not override it therefore renders at 1.07:1 on the navy ground -- invisible. Found on /nasil-calisir/, where 10 card titles were unreadable; pages like /kocluk/ were masked because their own CSS happens to set a colour. Fixed at the token, not per heading, because the token is the single source. Any page that sets its own heading colour still wins. */ :root{--ast-global-color-2:#EAF0FA} /* ========================================================================== Card icons -- .bai-icm (2026-09-12) -------------------------------------------------------------------------- One medallion, styled once here, so the pages themselves carry nothing but the glyph markup. Icons are chosen from each card's own title by tools/bai_icons.py, and a title that matches no rule gets no icon -- there is deliberately no fallback glyph. The nav's bai-ic-* mask set cannot be reused here: it is scoped to #ast-desktop-header and renders nothing inside .entry-content. */ .bai-icm{ display:inline-grid;place-items:center;flex:0 0 auto; width:38px;height:38px;border-radius:11px;margin:0 0 13px; background-color:rgba(185,138,46,.14); border:1px solid rgba(231,199,126,.22); color:var(--bai-gold-light,#E7C77E); transition:translate .3s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)), background-color .3s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)), border-color .3s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)); } .bai-icm svg{width:20px;height:20px;display:block} /* Reacts to the hover of whatever card directly contains it, so it needs no knowledge of that card's class name. */ @media (hover:hover) and (pointer:fine){ :hover > .bai-icm{ translate:0 -2px; background-color:rgba(185,138,46,.26); border-color:rgba(231,199,126,.42); } } @media (prefers-reduced-motion:reduce){ .bai-icm{transition:none} :hover > .bai-icm{translate:none} } /* ========================================================================== bai-auto-motion v5 -- touch tier (2026-09-12) -------------------------------------------------------------------------- Everything in the hover tier sits behind @media (hover: hover) and (pointer: fine) -- which is FALSE on a phone. That gate is right (on a touch screen :hover latches after a tap and leaves a card stuck lifted), but it meant mobile had no interaction feedback of any kind: scroll reveal and nothing else. Two additions, both aimed at how a phone is actually used. 1. PRESS. :active is the touch analogue of hover -- and unlike :hover it cannot latch, because it ends when the finger lifts. It is deliberately NOT gated to touch: press feedback on a desktop click is right too. Faster than the hover timings (.12s vs .34s) because a press should feel immediate, the way a native control does. 2. TRAVEL. On a phone one card fills most of the screen, so the desktop rise reads as almost nothing. Below 700px the distance and the scale both grow, and the reveal finishes earlier in the element's entry -- a short viewport means a card is fully on screen long before it reaches the desktop range's end. ========================================================================== */ /* The rise keyframe is parameterised so the travel can change per viewport without a second keyframe fighting the first. */ @keyframes baiRise{ from{opacity:0;transform:translateY(var(--bai-rise,20px)) scale(var(--bai-rise-s,.985))} to {opacity:1;transform:none} } /* ------------------------------------------------------------------ press */ .bai-hv,.bai-icm{-webkit-tap-highlight-color:transparent} .bai-hv:active{ scale:.982; transition-duration:.12s; } .bai-hv:active::after, .bai-hv:active::before{opacity:1;transition-duration:.12s} .bai-hv:active .bai-icm{ scale:1.06; background-color:rgba(185,138,46,.3); border-color:rgba(231,199,126,.5); transition-duration:.12s; } /* A card that is itself a link, or contains one, still presses. */ .bai-hv a:active, a.bai-hv:active{transition-duration:.12s} /* ----------------------------------------------------------- narrow screens */ @media (max-width: 700px){ :root{--bai-rise:28px;--bai-rise-s:.955} @supports (animation-timeline: view()){ body:not(.home) .entry-content [data-r], body:not(.home) .entry-content .bai-reveal, body:not(.home) .entry-content .reveal{ animation-range:entry 2% entry 42%; } [data-bai-group].bai-r > *, [data-bai-group].bai-r.is-in > *{ animation-range:entry calc(2% + var(--bai-i,0) * 5%) entry calc(44% + var(--bai-i,0) * 5%); } body:not(.home) .entry-content h2:not([data-r]):not(.bai-reveal):not(.reveal){ animation-range:entry 14% entry 58%; } body:not(.home) .entry-content h2 + p, body:not(.home) .entry-content .lede, body:not(.home) .entry-content .bai-lede{ animation-range:entry 20% entry 64%; } /* A picture arriving on a phone gets a touch more travel too. */ .bai-mv{animation-range:entry 0% cover 34%} } /* The medallion is the one thing that should NOT shrink on a phone -- it is the only visual anchor a card has once the hover sheen is gone. */ .bai-icm{width:40px;height:40px;border-radius:12px;margin-bottom:12px} .bai-icm svg{width:21px;height:21px} } @media (prefers-reduced-motion: reduce){ .bai-hv:active{scale:none} .bai-hv:active .bai-icm{scale:none} } /* -------------------------------------------------- press: the other cards .bai-hv only ever went on cards that had NO hover of their own. Every card that already had a desktop :hover therefore got nothing at all on a phone -- its whole interaction story was a rule that a touch device never matches. That is the majority of the cards on the site. The icon medallion is a reliable marker for "this is a card", so :has() is used to give those cards the same press response. Guarded by @supports so a browser without :has() simply keeps today's behaviour. */ @supports selector(:has(> *)){ .entry-content :has(> .bai-icm){ transition:scale .3s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)); } .entry-content :has(> .bai-icm):active{ scale:.985; transition-duration:.12s; } .entry-content :has(> .bai-icm):active > .bai-icm{ scale:1.06; background-color:rgba(185,138,46,.3); border-color:rgba(231,199,126,.5); transition-duration:.12s; } @media (prefers-reduced-motion: reduce){ .entry-content :has(> .bai-icm), .entry-content :has(> .bai-icm):active, .entry-content :has(> .bai-icm):active > .bai-icm{ scale:none;transition:none; } } } /* ========================================================================== Mobile drawer choreography, v2 (2026-09-12) -------------------------------------------------------------------------- v1's cascade was real but INVISIBLE, and the reason is worth writing down. Astra opens this panel with jQuery slideDown -- it writes inline styles to .main-header-bar-navigation and takes jQuery's default 400ms, with the container clipped while it grows. v1 ran its rows at 30-255ms delays, so every row finished animating WHILE IT WAS STILL CLIPPED. By the moment the growing panel uncovered a row, that row had already settled. The animation played perfectly and nobody could ever see it. Two changes fix it: 1. START AFTER THE SLIDE. The cascade now begins at 300ms, as the 400ms slide is finishing, so rows arrive into a panel that is already open. 2. MOVE SIDEWAYS, NOT DOWN. A row rising vertically is camouflaged by the panel itself growing vertically -- the two motions blur into one. Coming in from the left runs across the panel's own motion instead of along it, so it reads clearly. This is the one place on the site that deliberately departs from the shared baiRise vocabulary, and this is why. ========================================================================== */ @keyframes baiNavRow{ from{opacity:0;transform:translateX(-20px)} to {opacity:1;transform:none} } body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li{ animation:baiNavRow .46s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)) backwards; } body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(1){animation-delay:0.300s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(2){animation-delay:0.352s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(3){animation-delay:0.404s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(4){animation-delay:0.456s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(5){animation-delay:0.508s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(6){animation-delay:0.560s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(7){animation-delay:0.612s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(8){animation-delay:0.664s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(9){animation-delay:0.716s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(10){animation-delay:0.768s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(11){animation-delay:0.820s} body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li:nth-child(12){animation-delay:0.872s} /* A section unfurls behind a max-height transition, which is also vertical -- so its children get the same sideways entrance, and the same discipline: they must not start until that transition has essentially finished, or they animate inside the clip exactly as the top-level rows used to. BALANCE: step (52ms) and duration (460ms) are now IDENTICAL to the top-level cascade, so a section opening feels like the same instrument as the panel opening. Only the head start differs -- 260ms against 300ms -- because the max-height transition it waits on is shorter than Astra's 400ms panel slide. Previously the children ran at 46ms steps from 160ms, which both raced their own clip AND felt noticeably faster than the main menu. */ /* (the governing .sub-menu transition lives with the other mobile-nav rules above -- a second definition here only ever lost on specificity) */ body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li{ animation:baiNavRow .46s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)) backwards; } body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(1){animation-delay:0.260s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(2){animation-delay:0.312s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(3){animation-delay:0.364s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(4){animation-delay:0.416s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(5){animation-delay:0.468s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(6){animation-delay:0.520s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(7){animation-delay:0.572s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(8){animation-delay:0.624s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(9){animation-delay:0.676s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(10){animation-delay:0.728s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(11){animation-delay:0.780s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(12){animation-delay:0.832s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(13){animation-delay:0.884s} body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li:nth-child(14){animation-delay:0.936s} /* The chevron had transition:all with no duration, so it snapped. */ body.ast-header-break-point #ast-mobile-header .ast-menu-toggle{ transition:transform .4s var(--bai-e-settle,cubic-bezier(.16,.84,.44,1)), fill .3s ease, background-color .2s ease; border-radius:10px; } /* Press feedback -- a drawer row is the most-tapped thing on the phone. */ body.ast-header-break-point #ast-hf-mobile-menu > li > a:active, body.ast-header-break-point #ast-hf-mobile-menu .sub-menu > li > a:active{ background-color:rgba(231,199,126,.10); transition-duration:.1s; } body.ast-header-break-point #ast-mobile-header .ast-menu-toggle:active{ background-color:rgba(231,199,126,.16); scale:.92; } @media (prefers-reduced-motion: reduce){ body.ast-header-break-point.ast-main-header-nav-open #ast-hf-mobile-menu > li, body.ast-header-break-point #ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .sub-menu > li{ animation:none !important; } body.ast-header-break-point #ast-mobile-header .ast-menu-toggle:active{scale:none} }