:root {
  --site-ust-renk: #1E3A66;
  --site-ust-hover: #294B7C;
  --site-ust-ic: #0A2A52;
  --site-ust-soluk: #586978;
  --site-ust-yazi: "Lufga", "Segoe UI", Arial, sans-serif;
  --site-ust-bosluk: 14px;
  --site-ust-yan: 40px;
  --site-ust-y: 76px;
  --site-ust-alt: 10px;
  --site-ust-logo: 48px;
  --site-ust-dugme: 42px;
  --site-ust-toplam: calc(var(--site-ust-bosluk) + var(--site-ust-y) + var(--site-ust-alt));
}

.site-ust { padding: var(--site-ust-bosluk) max(var(--site-ust-yan), env(safe-area-inset-right, 0px)) var(--site-ust-alt) max(var(--site-ust-yan), env(safe-area-inset-left, 0px)); background: #FFFFFF; font-family: var(--site-ust-yazi); }
.site-ust__bant {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px;
  max-width: 1304px; height: var(--site-ust-y); margin: 0 auto; padding: 0 14px 0 0;
  border-radius: 999px; background: linear-gradient(90deg, #FFFFFF 40px, transparent 40px) var(--site-ust-renk);
  box-shadow: 0 7px 22px rgba(20, 48, 84, .09);
}
.site-ust__bant::before {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(135, 174, 216, .46); border-radius: inherit; box-shadow: 0 0 10px rgba(108, 159, 213, .13);
}
.site-ust__isik {
  position: absolute; inset: -2px; z-index: 4; padding: 2px; pointer-events: none; border-radius: inherit; overflow: hidden;
  -webkit-mask: linear-gradient(#FFFFFF 0 0) content-box, linear-gradient(#FFFFFF 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#FFFFFF 0 0) content-box, linear-gradient(#FFFFFF 0 0); mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(157, 207, 250, .42));
}
.site-ust__isik::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 110%; aspect-ratio: 1; will-change: transform;
  background: conic-gradient(transparent 0deg 236deg, rgba(126, 182, 237, .20) 254deg, rgba(231, 245, 255, .92) 273deg, #FFFFFF 282deg, rgba(111, 179, 238, .60) 300deg, transparent 322deg);
  transform: translate(-50%, -50%); animation: siteUstParilti 6.8s linear infinite;
}
@keyframes siteUstParilti { to { transform: translate(-50%, -50%) rotate(360deg); } }

.site-ust__marka {
  position: relative; isolation: isolate; overflow: hidden; align-self: stretch;
  display: flex; align-items: center; gap: 12px; flex: 0 0 320px; min-width: 0; padding: 12px 34px 12px 14px;
  border-radius: 999px; background: linear-gradient(110deg, #FFFFFF 0 47%, #F2F7FC 61%, #FFFFFF 75%, #EDF4FB 100%);
  color: var(--site-ust-ic); text-decoration: none;
}
.site-ust__marka::before {
  content: ""; position: absolute; z-index: -1; top: -45%; bottom: -45%; left: -38%; width: 26%; pointer-events: none;
  transform: skewX(-17deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .94), rgba(190, 216, 240, .26), transparent);
  filter: blur(2px); will-change: transform, opacity; animation: siteUstInci 8s ease-in-out infinite;
}
.site-ust__marka::after {
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 78px; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse at 100% 50%, rgba(176, 207, 236, .30), transparent 68%);
}
@keyframes siteUstInci { 0%, 18% { transform: skewX(-17deg); opacity: 0; } 28% { opacity: .9; } 46% { transform: translateX(592.3%) skewX(-17deg); opacity: .55; } 56%, 100% { transform: translateX(592.3%) skewX(-17deg); opacity: 0; } }
.site-ust__marka:hover { color: var(--site-ust-ic); text-decoration: none; }
.site-ust__logo { display: block; width: var(--site-ust-logo); height: var(--site-ust-logo); flex: 0 0 var(--site-ust-logo); object-fit: contain; border-radius: 50%; background: #FFFFFF; }
.site-ust__ad { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.site-ust__kurum, .site-ust__sube { font: 500 10px/1.4 var(--site-ust-yazi); color: var(--site-ust-soluk); white-space: nowrap; }
.site-ust__sube { letter-spacing: .15px; }
.site-ust__ad b { font: 700 18px/1.25 var(--site-ust-yazi); letter-spacing: -.3px; color: var(--site-ust-renk); white-space: nowrap; }

.site-ust__nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.site-ust__nav > a, .site-ust__ajanda {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--site-ust-dugme); padding: 9px 8px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: #FFFFFF;
  font: 600 13px/1.4 var(--site-ust-yazi); white-space: nowrap; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.site-ust__nav > a:hover, .site-ust__nav > a[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #FFFFFF; text-decoration: none; }
.site-ust__nav > a[aria-current="page"] { border-color: rgba(255, 255, 255, .19); }
.site-ust__nav svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.site-ust__grup {
  display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: var(--site-ust-dugme); margin-left: 4px; padding: 0 3px 0 0;
  border: 1px solid rgba(255, 255, 255, .19); border-radius: 6px; background: rgba(255, 255, 255, .07);
}
.site-ust__ajanda { min-height: calc(var(--site-ust-dugme) - 2px); padding-right: 10px; border: 0; color: #FFFFFF; }
.site-ust__ajanda:hover { color: #FFFFFF; text-decoration: none; }
.site-ust__ajanda::after { content: ""; align-self: center; width: 1px; height: 18px; margin-left: 9px; background: rgba(255, 255, 255, .26); }
.site-ust__grup .menu__liste { display: flex; align-items: center; gap: 1px; margin: 0; padding: 0; list-style: none; }
.site-ust__grup .menu__liste a {
  position: relative; display: inline-flex; align-items: center; min-height: calc(var(--site-ust-dugme) - 10px); padding: 5px 8px;
  border-radius: 4px; color: rgba(255, 255, 255, .84); font: 500 13px/1.4 var(--site-ust-yazi); white-space: nowrap; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.site-ust__grup .menu__liste a:hover { background: rgba(255, 255, 255, .10); color: #FFFFFF; text-decoration: none; }
.site-ust__grup .menu__liste a[aria-current="true"] { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.site-ust__grup .menu__liste a[aria-current="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; border-radius: 2px; background: #91C9F3; }
.menu__kisa { display: none; }

.site-ust__takip, .site-ust__geri, .ust-kitap {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-height: var(--site-ust-dugme); margin-left: auto; padding: 10px 16px;
  border: 1px solid #DCE5ED; border-radius: 999px; background: #FFFFFF; color: var(--site-ust-renk);
  font: 600 14px/1.4 var(--site-ust-yazi); white-space: nowrap; text-decoration: none;
}
.site-ust__takip:hover, .site-ust__geri:hover { background: #E8EDF0; color: var(--site-ust-renk); text-decoration: none; }
.site-ust__takip-ok { font-size: 1.15em; line-height: 1; }
.site-ust__geri { padding: 10px 18px 10px 14px; }

.ust-kitap {
  position: relative; overflow: hidden; padding: 0 16px 0 10px;
  will-change: transform; animation: siteUstNabiz 2.6s ease-out 2s 4; transition: background-color .2s ease, transform .2s ease;
}
.ust-kitap::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(145, 201, 243, .45), transparent);
  animation: kartParilti 3.6s ease-in-out 1.5s 3;
}
.ust-kitap:hover { background: #E8EDF0; color: var(--site-ust-renk); text-decoration: none; transform: translateY(-1px); }
.ust-kitap .kitap-kart__ikon { flex: 0 0 30px; height: 22px; }
.ust-kitap .kitap-kart__sol, .ust-kitap .kitap-kart__sag, .ust-kitap .kitap-kart__yaprak, .mobil-menu__kitap .kitap-kart__sol, .mobil-menu__kitap .kitap-kart__sag, .mobil-menu__kitap .kitap-kart__yaprak { border-color: #4F8BCB; border-width: 1.5px; background: var(--site-ust-renk); }
.ust-kitap .kitap-kart__yaprak, .mobil-menu__kitap .kitap-kart__yaprak { background: #91C9F3; animation-iteration-count: 6; }
.ust-kitap:hover .kitap-kart__yaprak, .ust-kitap:focus-visible .kitap-kart__yaprak { animation-iteration-count: infinite; }
.ust-kitap__uzun { display: none; }
.ust-kitap__ok { color: #0054A6; font-size: 1.15em; line-height: 1; transition: transform .2s ease; }
.ust-kitap:hover .ust-kitap__ok { transform: translateX(3px); }
@keyframes siteUstNabiz { 0% { box-shadow: 0 0 0 0 rgba(145, 201, 243, .7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(145, 201, 243, 0); } }

.menu-dugme {
  display: none; place-items: center; flex: 0 0 var(--site-ust-dugme); width: var(--site-ust-dugme); height: var(--site-ust-dugme); margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #FFFFFF; cursor: pointer;
}
.menu-dugme .ikon { width: 20px; height: 20px; }
.menu-dugme:hover { background: rgba(255, 255, 255, .14); }
.menu-dugme[aria-expanded="true"] { border-color: #E8EDEF; background: #E8EDEF; color: var(--site-ust-renk); }

.site-ust :is(a, button):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--site-ust-renk), 0 0 0 4px #91C9F3; }
.site-ust .site-ust__marka:focus-visible { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #0054A6; }
.site-ust :is(.site-ust__marka, .site-ust__takip, .site-ust__geri, .ust-kitap, .menu-dugme):focus-visible { border-radius: 999px; }
.site-ust .site-ust__nav a:focus-visible { border-radius: 6px; }
.site-ust .site-ust__grup .menu__liste a:focus-visible { border-radius: 4px; }

.ust-bar { position: sticky; top: 0; z-index: var(--z-yapiskan, 100); background: #FFFFFF; transition: box-shadow .2s ease; }
.ust-bar.golgeli { box-shadow: 0 10px 24px -16px rgba(10, 42, 82, .42); }
.ust-bar:has(.menu-dugme[aria-expanded="true"]) { z-index: 961; }
html.bolum-acik .ust-bar { z-index: 1001; box-shadow: none; }

.mobil-menu {
  position: absolute; z-index: 1; top: calc(var(--site-ust-bosluk) + var(--site-ust-y) + 8px); right: max(var(--site-ust-yan), env(safe-area-inset-right, 0px));
  width: min(300px, calc(100vw - 2 * var(--site-ust-yan))); padding: 8px;
  border: 1px solid #D5DDE1; border-radius: 12px; background: #FFFFFF; box-shadow: 0 12px 36px rgba(32, 56, 63, .18);
  font-family: var(--site-ust-yazi);
  max-height: calc(100vh - var(--site-ust-bosluk) - var(--site-ust-y) - 20px); max-height: calc(100dvh - var(--site-ust-bosluk) - var(--site-ust-y) - 20px);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobil-menu ul { margin: 0; padding: 0; list-style: none; }
.mobil-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 6px;
  color: var(--site-ust-renk); font: 600 15px/1.35 var(--site-ust-yazi); text-decoration: none;
}
.mobil-menu a:hover, .mobil-menu a[aria-current="true"], .mobil-menu a[aria-current="page"] { background: #EDF1F2; color: var(--site-ust-renk); text-decoration: none; }
.mobil-menu a[aria-current="true"], .mobil-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 #0054A6; }
.mobil-menu a.mobil-menu__kitap { justify-content: center; margin-bottom: 4px; background: var(--site-ust-renk); color: #FFFFFF; box-shadow: none; }
.mobil-menu a.mobil-menu__kitap:hover { background: var(--site-ust-hover); color: #FFFFFF; }
.mobil-menu__kitap .kitap-kart__ikon { flex: 0 0 28px; height: 20px; }
.mobil-menu__baslik { margin: 0; padding: 10px 12px 4px; color: #586978; font: 600 11.5px/1.4 var(--site-ust-yazi); letter-spacing: .06em; text-transform: uppercase; }
.mobil-menu ul + .mobil-menu__baslik { margin-top: 4px; padding-top: 12px; border-top: 1px solid #E3E8EF; }
.mobil-menu a:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0054A6; }
.mobil-menu a.mobil-menu__kitap:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0054A6; }

.mod-serit {
  margin: 0; padding: 2px 16px; border-top: 1px solid #CBD5E1; background: #E9EEF4; color: #475569;
  font: 600 12px/1.5 var(--site-ust-yazi); text-align: center;
}

@media (max-width: 1359.98px) {
  .menu__uzun { display: none; }
  .menu__kisa { display: inline; }
}
@media (max-width: 1279.98px) {
  .ust-bar .site-ust__site { display: none; }
  .ust-bar .menu-dugme { display: grid; }
  .site-ust__grup { margin-left: 0; }
}
@media (max-width: 1240px) {
  :root { --site-ust-yan: 24px; }
  .site-ust__bant { gap: 10px; }
  .site-ust__marka { flex-basis: 296px; padding-right: 28px; }
  .site-ust__nav > a { padding-inline: 7px; }
}
@media (max-width: 1023.98px) {
  :root { --site-ust-dugme: 44px; }
  .site-ust__nav { display: none; }
}
@media (max-width: 767.98px) {
  :root { --site-ust-bosluk: 10px; --site-ust-yan: 16px; --site-ust-y: 64px; --site-ust-alt: 8px; --site-ust-logo: 40px; }
  .site-ust__bant { gap: 8px; padding-right: 10px; }
  .site-ust__marka { flex: 0 1 300px; gap: 8px; padding: 8px 20px 8px 10px; }
  .site-ust__ad b { font-size: 14px; letter-spacing: -.15px; }
  .site-ust__kurum, .site-ust__sube { font-size: 9px; }
  .site-ust__takip, .site-ust__geri { padding: 8px 12px; font-size: 12px; }
  .ust-kitap { padding: 0 14px 0 8px; font-size: 13px; }
  .ust-kitap .kitap-kart__ikon { flex-basis: 26px; height: 19px; }
  html:has(#mod-serit:not([hidden])) .mobil-menu { top: calc(var(--site-ust-bosluk) + var(--site-ust-y) + 30px); max-height: calc(100dvh - var(--site-ust-bosluk) - var(--site-ust-y) - 42px); }
}
@media (min-width: 768px) {
  .mod-serit { display: none !important; }
}
@media (max-width: 519.98px) {
  :root { --site-ust-bosluk: 8px; --site-ust-yan: 10px; --site-ust-y: 60px; --site-ust-alt: 6px; --site-ust-logo: 36px; }
  .site-ust__bant { gap: 6px; padding-right: 8px; }
  .site-ust__marka { flex: 1 1 auto; gap: 7px; padding: 6px 14px 6px 8px; }
  .site-ust__kurum, .site-ust__sube { font-size: 8px; }
  .site-ust__ad b { font-size: 13.5px; }
}
@media (max-width: 479.98px) {
  .site-ust__takip { display: none; }
  .site-ust__bant:has(.site-ust__geri) { padding-right: 8px; }
  .site-ust__geri-ek { display: none; }
  .site-ust__geri { padding-inline: 10px 12px; }
  .ust-kitap { width: var(--site-ust-dugme); padding: 0; border-radius: 50%; }
  .ust-kitap .kitap-kart__ikon { flex-basis: 24px; height: 18px; }
  .ust-kitap__kisa, .ust-kitap__ok { display: none; }
  .ust-kitap__uzun {
    display: inline; position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
@media (max-width: 359.98px) {
  .site-ust__ad b { font-size: 12.5px; letter-spacing: -.2px; }
  .site-ust__marka { padding-right: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --site-ust-bosluk: 6px; --site-ust-y: 56px; --site-ust-alt: 6px; --site-ust-logo: 34px; }
  .site-ust__marka { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-ust__isik::before { animation: none; transform: translate(-50%, -50%) rotate(35deg); }
  .site-ust__marka::before { animation: none; left: 62%; opacity: .36; }
  .site-ust__nav > a, .site-ust__grup .menu__liste a, .ust-bar { transition: none; }
  .ust-kitap, .ust-kitap::after { animation: none; }
}
@media print {
  .site-ust { padding: 0 0 12px; }
  .ust-bar { position: static; box-shadow: none; }
  .site-ust__bant { height: auto; background: none; box-shadow: none; }
  .site-ust__bant::before, .site-ust__isik, .site-ust__marka::before, .site-ust__marka::after, .site-ust__nav, .site-ust__takip, .site-ust__geri, .ust-kitap, .menu-dugme, .mobil-menu { display: none !important; }
  .site-ust__marka { padding: 0; background: none; }
}
@media (forced-colors: active) {
  .site-ust__bant, .site-ust__grup { border: 1px solid CanvasText; }
  .site-ust :is(a, button):focus-visible, .mobil-menu a:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .site-ust__grup .menu__liste a[aria-current="true"] { text-decoration: underline; }
}
