html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible { outline: 2px solid #0769A0; outline-offset: 2px; }
[hidden] { display: none !important; }


html { scroll-padding-top: 96px; }
@media (max-width: 1000px) { html { scroll-padding-top: 92px; } }
.ust-yapiskan { transition: box-shadow .2s; }
@supports (animation-timeline: scroll()) {
  .ust-yapiskan { animation: ust-golge linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes ust-golge { from { box-shadow: 0 0 0 rgba(20,33,61,0); } to { box-shadow: 0 6px 18px rgba(20,33,61,.08); } }
}

html:has(#mobil-menu:not([hidden])), html:has(#mobil-menu:not([hidden])) body { overflow: hidden; }
.mm-panel { overscroll-behavior: contain; }


.btn-dolu, .btn-cerceve, .btn-cerceve-koyu {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-cerceve-koyu svg[stroke] { stroke: currentColor; transition: stroke .18s ease; }
.btn-dolu:focus-visible { --btn-bg: var(--btn-bg-h, #0769A0); }
.btn-cerceve:focus-visible { --btn-bg: var(--btn-bg-h, #14213D); --btn-fg: var(--btn-fg-h, #FFFFFF); --btn-bd: var(--btn-bg-h, #14213D); }
.btn-cerceve-koyu:focus-visible { --btn-bg: #FFFFFF; --btn-fg: #14213D; --btn-bd: #FFFFFF; outline-color: #7FD0FF; }
@media (hover: hover) {
  .btn-dolu:hover { --btn-bg: var(--btn-bg-h, #0769A0); box-shadow: 0 8px 20px rgba(20,33,61,.24); transform: translateY(-1px); }
  .btn-cerceve:hover { --btn-bg: var(--btn-bg-h, #14213D); --btn-fg: var(--btn-fg-h, #FFFFFF); --btn-bd: var(--btn-bg-h, #14213D); box-shadow: 0 8px 20px rgba(20,33,61,.20); transform: translateY(-1px); }
  .btn-cerceve-koyu:hover { --btn-bg: #FFFFFF; --btn-fg: #14213D; --btn-bd: #FFFFFF; box-shadow: 0 8px 20px rgba(0,0,0,.30); transform: translateY(-1px); }
}
.btn-dolu:active, .btn-cerceve:active, .btn-cerceve-koyu:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .06s; }


html .kart, html .kart-gece, html .yazi-kart { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
@media (hover: hover) {
  html a.kart:hover, html .yazi-kart:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,33,61,.10); }
  html a.kart-gece:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
}

a > span[aria-hidden="true"]:last-child, .ok { display: inline-block; transition: transform .18s ease; }
@media (hover: hover) {
  a:hover > span[aria-hidden="true"]:last-child, a:hover .ok { transform: translateX(3px); }
}
a:focus-visible .ok { transform: translateX(3px); }


a { transition: color .15s ease, text-decoration-color .15s ease; }
.nav-l { transition: color .15s ease, border-color .15s ease; }
.dark-link { text-decoration-color: transparent; text-underline-offset: 3px; }
.dark-link:hover { text-decoration: underline; text-decoration-color: currentColor; }


.sutun { position: relative; isolation: isolate; }
.sutun::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -20px; right: 12px; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--tip) 7%, transparent); opacity: 0; transition: opacity .2s ease; }
.sutun:focus-visible::after { opacity: 1; }
@media (hover: hover) { .sutun:hover::after { opacity: 1; } }
.sutun::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--tip); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.sutun-no, .sutun-cta { color: #0769A0; transition: color .18s ease; }
.sutun-ikon { stroke: #14213D; transform-origin: 50% 50%; transition: stroke .18s ease, transform .25s ease; }
.sutun:focus-visible { outline-offset: 4px; }
.sutun:focus-visible::before { transform: scaleX(1); }
.sutun:focus-visible .sutun-no, .sutun:focus-visible .sutun-cta { color: var(--koyu); }
.sutun:focus-visible .sutun-ikon { stroke: var(--koyu); transform: scale(1.08) rotate(-4deg); }
@media (hover: hover) {
  .sutun:hover::before { transform: scaleX(1); }
  .sutun:hover .sutun-no, .sutun:hover .sutun-cta { color: var(--koyu); }
  .sutun:hover .sutun-ikon { stroke: var(--koyu); transform: scale(1.08) rotate(-4deg); }
}


.logo-isaret { position: absolute; left: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; pointer-events: none; transform-origin: 50% 50%; }
.logo-acilis { animation: pusula-salin 1.3s cubic-bezier(.25,.6,.3,1) .3s both; }
@keyframes pusula-salin { 0% { transform: rotate(0); } 18% { transform: rotate(-16deg); } 38% { transform: rotate(10deg); } 58% { transform: rotate(-5deg); } 78% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes pusula-hover { 0% { transform: scale(1.08) rotate(0); } 30% { transform: scale(1.08) rotate(-9deg); } 60% { transform: scale(1.08) rotate(5deg); } 82% { transform: scale(1.08) rotate(-2deg); } 100% { transform: scale(1.08) rotate(0); } }
@media (hover: hover) { .logo-l:hover .logo-isaret { animation: pusula-hover .8s ease-out both; } }


.kadran-don { transform-box: view-box; transform-origin: 50% 50%; animation: kadran-don 90s linear infinite; }
.kadran.hareket-dur .kadran-don { animation-play-state: paused; }
@keyframes kadran-don { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, box-shadow, stroke, fill, text-decoration-color !important; }
  .btn-dolu:hover, .btn-cerceve:hover, .btn-cerceve-koyu:hover, .btn-dolu:active, .btn-cerceve:active, .btn-cerceve-koyu:active,
  html a.kart:hover, html .yazi-kart:hover, html a.kart-gece:hover, .ok, a > span[aria-hidden="true"]:last-child, .sutun-ikon, .logo-isaret { transform: none !important; }
  .sutun::before { transition: none; }
}