/* Live GYS Akademi visual theme.
   Matched against https://www.gysakademi.com on 2026-09-14.
   Core colors: #0077b5, #005582, #30363a, #9db3c2, #e4eaee, #f2f6f9, #fff. */

:root,
:root[data-theme="dark"] {
  color-scheme: light;
  --c-primary: #0077b5;
  --c-primary-dark: #005582;
  --c-primary-light: #1994cf;
  --c-secondary: #30363a;
  --c-surface: #f2f6f9;
  --c-on-surface: #30363a;
  --c-on-surface-variant: #657985;
  --c-surface-lowest: #ffffff;
  --c-surface-low: #f2f6f9;
  --c-surface-container: #eef3f6;
  --c-surface-high: #e4eaee;
  --c-surface-highest: #d7e1e8;
  --c-outline: #9db3c2;
  --c-outline-variant: #e4eaee;
  --c-primary-container: #dceff8;
  --c-on-primary-container: #005582;
  --c-primary-fixed: #dceff8;
  --c-primary-fixed-dim: #a8d8ee;
  --c-secondary-container: #e4eaee;
  --c-on-secondary-container: #30363a;
  --line: #e4eaee;
  --brand: #0077b5;
  --brand-ink: #005582;
  --surface: #ffffff;
  --surface-2: #f2f6f9;
  --ink: #30363a;
  --ink-2: #657985;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body,
:root[data-theme="dark"] body {
  color: #30363a;
  background: #f2f6f9;
  background-attachment: initial;
}

.headline,
h1,
h2,
h3,
h4 {
  font-family: inherit !important;
}

/* Live site header: white, 115px high, centered navigation and 8px controls. */
.site-header {
  border-block-end: 1px solid #e4eaee;
  box-shadow: 0 4px 18px rgb(48 54 58 / 0.06);
}

.site-header::before,
:root[data-theme="dark"] .site-header::before {
  background: rgb(255 255 255 / 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header > .container {
  inline-size: 100%;
  max-inline-size: 1424px !important;
  margin-inline: auto !important;
  padding-inline: 8px !important;
}

.site-header nav a {
  position: relative;
  color: #9db3c2 !important;
  font-weight: 500;
}

.site-header nav a:hover,
.site-header nav a.text-primary {
  color: #0077b5 !important;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 0.25rem;
  block-size: 2px;
  background: #0077b5;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s linear;
}

.site-header nav a:hover::after,
.site-header nav a.text-primary::after {
  transform: scaleX(1);
}

.site-header input[aria-label="Ara"] {
  inline-size: 204px;
  block-size: 55px;
  color: #30363a;
  background: #fff;
  border: 1px solid #0077b5;
  border-radius: 55px;
}

.site-header input[aria-label="Ara"]::placeholder {
  color: #30363a;
  opacity: 1;
}

.theme-toggle--bar {
  display: none !important;
}

.auth-nav {
  gap: 0;
}

.auth-nav__btn {
  min-block-size: 50px;
  padding-inline: 20px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #0077b5;
  font-size: 1rem;
  font-weight: 500;
}

.auth-nav__btn:hover {
  color: #fff;
  background: #005582;
}

.auth-nav__btn--ghost {
  color: #30363a;
  background: transparent;
  border: 0;
}

.auth-nav__btn--ghost:hover {
  color: #0077b5;
  background: transparent;
}

@media (min-width: 1024px) {
  .site-header > .container > .flex {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) auto minmax(300px, 1fr);
    block-size: 115px !important;
  }

  .site-header > .container > .flex > a {
    position: relative;
    justify-self: start;
    padding-inline-end: 32px;
  }

  .site-header > .container > .flex > a::after {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-end: 0;
    inline-size: 2px;
    background: #e4eaee;
  }

  .site-header > .container > .flex > a img {
    block-size: 48px !important;
  }

  .site-header > .container > .flex > nav {
    justify-self: center;
  }

  .site-header > .container > .flex > div:last-child {
    justify-self: end;
  }

  [data-konu-calis] .kc-aside__toggle,
  [data-konu-calis] .kc-layout.is-sidebar-collapsed .kc-aside__toggle {
    inset-block-start: 12px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 12px !important;
    transform: none !important;
  }

  [data-konu-calis] .lesson-rail__head {
    padding-inline-end: 4rem;
  }

  [data-konu-calis] > .container > .max-w-3xl > h1,
  [data-konu-calis] > .container > .max-w-3xl > p {
    transform: translateX(-160px) !important;
  }
}

/* Page structure and GYS Akademi card treatment. */
[data-konu-calis] > .container > .max-w-3xl {
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
}

[data-konu-calis] > .container > .max-w-3xl > h1,
[data-konu-calis] > .container > .max-w-3xl > p {
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-wrap: wrap !important;
}

[data-konu-calis] .profile-shell {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 92rem;
  margin-inline: auto;
}

[data-konu-calis] .profile-content {
  min-inline-size: 0;
}

[data-konu-calis] .profile-sidebar,
[data-konu-calis] #kc-materials,
[data-konu-calis] .lr-feed,
[data-konu-calis] #panel1,
[data-konu-calis] label[for="lt1"] {
  display: none !important;
}

[data-konu-calis] .rounded-2xl,
[data-konu-calis] .lesson-video,
[data-konu-calis] .lesson-rail,
[data-konu-calis] textarea,
[data-konu-calis] select,
[data-konu-calis] .lesson-note {
  border-radius: 8px !important;
}

[data-konu-calis] .rounded-2xl,
[data-konu-calis] .lesson-rail,
[data-konu-calis] textarea,
[data-konu-calis] select,
[data-konu-calis] .lesson-note {
  border-color: #e4eaee !important;
  background: #fff !important;
  box-shadow: none !important;
}

[data-konu-calis] .lesson-video {
  --lv: #0077b5 !important;
  box-shadow: none;
}

[data-konu-calis] .lesson-row.is-active,
[data-konu-calis] .lesson-item.is-active {
  color: #005582;
  background: #dceff8;
}

[data-konu-calis] #lt3:checked ~ .lesson-tabs__nav label[for="lt3"] {
  color: #0077b5;
  border-block-end-color: #0077b5;
}

[data-konu-calis] button,
[data-konu-calis] a[class*="btn"] {
  border-radius: 8px;
}

footer {
  background: #0077b5 !important;
}

@media (width < 1024px) {
  .site-header > .container > .flex {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 64px 66px;
    block-size: 130px !important;
  }

  #mobile-menu-btn {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 0;
    z-index: 2;
  }

  .site-header > .container > .flex > a {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .site-header > .container > .flex > a img {
    block-size: 48px !important;
  }

  .site-header > .container > .flex > div:last-child {
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }

  .auth-nav__btn {
    min-block-size: 44px;
    padding-inline: 18px;
    font-size: 0.875rem;
  }
}

@media (width <= 430px) {
  .auth-nav__btn {
    min-block-size: 42px;
    padding-inline: 16px;
    font-size: 0.84rem;
  }
}