.home-actions {
  width: min(960px, 100%);
}

.duo-btn {
  min-height: 136px;
  border: 0;
  border-radius: 1rem;
  background: linear-gradient(145deg, #0aa66f, #08724e);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 0 #075f42;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

.duo-btn i {
  font-size: 2rem;
}

.duo-btn:hover,
.duo-btn:focus {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #075f42;
}

.duo-btn:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #075f42;
}

.learning-path,
.lesson-intro,
.lesson-complete,
.archive-card {
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  background: #fff;
}

.learning-path {
  width: min(960px, 100%);
  padding: 1rem;
}

.path-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-step {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem;
  border-radius: .8rem;
  background: #f8f9fa;
  color: #1f2933;
  font-weight: 700;
}

.path-step i {
  color: #08724e;
  font-size: 1.45rem;
}

.lesson-shell {
  width: min(860px, 100%);
}

.lesson-intro {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  text-align: left;
}

.lesson-card {
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}

.lesson-media {
  display: grid;
  place-items: center;
  min-height: 280px;
  border-radius: .75rem;
  background: #f8f9fa;
  overflow: hidden;
}

.lesson-media img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
}

.lesson-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lesson-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ced4da;
}

.lesson-dots button.active {
  background: #198754;
  transform: scale(1.2);
}

.lesson-complete {
  margin-top: 1rem;
  padding: 1rem;
  text-align: left;
}

.archive-grid,
.about-points {
  display: grid;
  gap: 1rem;
}

.archive-grid {
  grid-template-columns: repeat(3, 1fr);
}

.about-points {
  grid-template-columns: repeat(3, 1fr);
}

.archive-card,
.about-point {
  padding: 1rem;
}

.archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.archive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(145deg, rgba(5, 107, 149, .92), rgba(7, 135, 189, .78) 52%, rgba(44, 195, 242, .66)),
    url("../assets/img/gokturk-fon.jpg");
  background-repeat: no-repeat, repeat;
  background-size: auto, 520px auto;
  background-position: center, center;
}

.archive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .22), transparent 32%);
}

.archive-card h2,
.archive-card p {
  color: #fff;
}

.archive-card p {
  opacity: .92;
}

.archive-card .btn-success {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--damgalik-primary-dark) !important;
}

.archive-card .btn-success:hover,
.archive-card .btn-success:focus {
  background-color: var(--damgalik-active, #bfeeff) !important;
  border-color: var(--damgalik-active, #bfeeff) !important;
  color: var(--damgalik-primary-dark) !important;
}

.archive-card.is-disabled {
  opacity: .72;
}

.practice-grid {
  width: min(960px, 100%);
}

.home-seo-copy {
  width: min(960px, 100%);
  padding: 1.25rem;
  border: 1px solid var(--damgalik-border, #d9edf5);
  border-radius: .75rem;
  background: var(--damgalik-surface, #fff);
  text-align: left;
}

.home-seo-copy p {
  margin: 0 0 1rem;
  color: var(--damgalik-text, #20272e);
  line-height: 1.75;
}

.home-seo-copy p:last-child {
  margin-bottom: 0;
}

.blog-grid {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 auto;
}

.blog-card,
.blog-empty,
.blog-alert,
.blog-article {
  border: 1px solid var(--damgalik-border, #d9edf5);
  border-radius: .85rem;
  background: var(--damgalik-surface, #fff);
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.blog-cover {
  display: block;
  aspect-ratio: 16 / 9;
  background: #eef8fb;
  overflow: hidden;
}

.blog-cover img,
.blog-article-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .65rem;
  padding: 1rem;
  text-align: left;
}

.blog-card time,
.blog-article time {
  color: var(--damgalik-muted, #61737f);
  font-size: .9rem;
  font-weight: 700;
}

.blog-card h2 a {
  color: var(--damgalik-text, #20272e);
  text-decoration: none;
}

.blog-card p {
  color: var(--damgalik-muted, #61737f);
  line-height: 1.65;
}

.blog-empty,
.blog-alert,
.blog-article {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 1.25rem;
  text-align: left;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  color: var(--damgalik-primary, #0788b0);
  font-weight: 700;
  text-decoration: none;
}

.blog-article-cover {
  max-height: 460px;
  margin: 1.25rem 0;
  border-radius: .75rem;
}

.blog-content {
  color: var(--damgalik-text, #20272e);
  font-size: 1.05rem;
  line-height: 1.8;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: .65rem;
}

.blog-content h2,
.blog-content h3 {
  margin-top: 1.5rem;
}

.dropdown-menu {
  border: 1px solid var(--damgalik-border, #d9edf5);
  border-radius: .65rem;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--damgalik-primary, #0788b0);
}

.worldcup-panel {
  position: relative;
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
  padding: clamp(.85rem, 2.5vw, 1.2rem);
  border: 1px solid var(--damgalik-border, #d9edf5);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 250, 255, .94)),
    var(--damgalik-surface, #fff);
  box-shadow: 0 18px 42px rgba(4, 85, 111, .12);
  overflow: hidden;
  text-align: left;
}

.worldcup-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--damgalik-primary), #2cc3f2, var(--damgalik-primary-dark));
}

.worldcup-copy {
  display: grid;
  gap: .35rem;
  text-align: center;
}

.worldcup-eyebrow {
  margin: 0;
  color: var(--damgalik-primary-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
}

.worldcup-match {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.worldcup-flag {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--damgalik-border);
  border-radius: 999px;
  background: #fff;
  font-size: 1.05rem;
  line-height: 1;
}

.worldcup-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  color: var(--damgalik-muted);
}

.worldcup-date {
  margin: 0;
  color: var(--damgalik-muted);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
}

.worldcup-countdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.worldcup-countdown span {
  display: grid;
  place-items: center;
  min-height: 68px;
  padding: .55rem .4rem;
  border: 1px solid rgba(7, 135, 189, .14);
  border-radius: .7rem;
  background: #fff;
  color: var(--damgalik-text);
  text-align: center;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 rgba(7, 135, 189, .08);
}

.worldcup-countdown strong {
  display: block;
  color: var(--damgalik-primary-dark);
  font-size: clamp(1.25rem, 3.3vw, 1.8rem);
  line-height: 1;
}

.worldcup-support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.worldcup-support-button,
.worldcup-support-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.25rem;
  min-height: 2.9rem;
  padding: .6rem .85rem;
  border-radius: 999px;
  text-align: center;
}

.worldcup-support-button {
  gap: .45rem;
  border: 0;
  background: var(--damgalik-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(7, 135, 189, .2);
}

.worldcup-support-button span {
  display: block;
  font-size: .95rem;
}

.worldcup-support-count {
  gap: .4rem;
  border: 1px solid var(--damgalik-border);
  background: var(--damgalik-surface-soft);
  color: var(--damgalik-text);
}

.worldcup-support-count strong {
  color: var(--damgalik-primary-dark);
  font-size: 1.2rem;
  line-height: 1;
}

.worldcup-support-count span {
  font-size: .9rem;
  font-weight: 700;
}

.worldcup-support-button:disabled {
  opacity: .75;
  cursor: not-allowed;
}

.youtube-reminder {
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(7, 135, 189, .16);
  border-radius: .85rem;
  background:
    linear-gradient(135deg, rgba(5, 107, 149, .94), rgba(7, 135, 189, .86)),
    var(--damgalik-primary);
  color: #fff;
}

.youtube-reminder-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .65rem;
}

.youtube-reminder strong {
  font-size: .98rem;
}

.youtube-reminder span:not(.badge) {
  color: rgba(255, 255, 255, .86);
  font-size: .92rem;
}

.youtube-reminder .badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
}

.youtube-reminder-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.youtube-reminder .btn {
  color: var(--damgalik-primary-dark);
  font-weight: 700;
}

.youtube-reminder-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.youtube-reminder-close:hover,
.youtube-reminder-close:focus {
  background: rgba(255, 255, 255, .26);
}

.archive-card i,
.about-point i {
  color: #08724e;
  font-size: 1.6rem;
}

.archive-card i {
  color: #fff;
}

.about-point {
  border-radius: 1rem;
  background: rgba(255, 255, 255, .12);
}

.navbar .nav-link.active {
  background: rgba(255, 255, 255, .16);
}

.contact-frame {
  width: 100%;
  min-height: 540px;
  border: 0;
}

@media (max-width: 768px) {
  .path-steps,
  .archive-grid,
  .about-points {
    grid-template-columns: 1fr;
  }


  .lesson-media {
    min-height: 220px;
  }

  .duo-btn {
    min-height: 112px;
  }

  .masthead-heading {
    font-size: 2rem;
    text-align: center;
  }

  .lesson-card .d-flex.justify-content-between {
    justify-content: center !important;
  }

  .worldcup-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .worldcup-countdown {
    gap: .35rem;
  }

  .worldcup-countdown span {
    min-height: 58px;
    padding: .45rem .25rem;
    font-size: .78rem;
  }

  .worldcup-countdown strong {
    font-size: 1.25rem;
  }

  .worldcup-support-button,
  .worldcup-support-count {
    min-width: 5.7rem;
    min-height: 2.65rem;
    padding: .5rem .7rem;
    font-size: .85rem;
  }

  .youtube-reminder {
    align-items: stretch;
    flex-direction: column;
  }

  .youtube-reminder .btn {
    width: 100%;
  }

  .youtube-reminder-actions {
    width: 100%;
  }

  .youtube-reminder-close {
    flex: 0 0 auto;
  }
}

:root {
  --damgalik-bg: #edfaff;
  --damgalik-surface: #ffffff;
  --damgalik-surface-soft: #d7f0ff;
  --damgalik-primary: #0787bd;
  --damgalik-primary-dark: #056c99;
  --damgalik-accent: #03a9df;
  --damgalik-text: #20272e;
  --damgalik-muted: #66727c;
  --damgalik-border: #d9edf5;
}

body {
  background: var(--damgalik-bg);
  background-image: linear-gradient(rgba(238, 250, 255, .88), rgba(238, 250, 255, .94)), url("../assets/img/gokturk-fon.jpg");
  background-repeat: repeat;
  background-size: auto, 520px auto;
  background-position: center top;
  background-attachment: fixed;
  color: var(--damgalik-text);
}

.bg-primary,
.bg-secondary,
.footer,
.copyright {
  background-color: var(--damgalik-primary) !important;
}

.navbar {
  box-shadow: 0 2px 12px rgba(7, 135, 189, .18);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: rgba(255, 255, 255, .18);
}

.archive-card,
.lesson-card,
.lesson-intro,
.lesson-complete {
  border-color: var(--damgalik-border);
  background: var(--damgalik-surface);
}

.archive-card i,
.about-point i,
.lesson-dots button.active {
  color: var(--damgalik-primary);
}

.lesson-media {
  background: #f6fcff;
  min-height: clamp(280px, 52vw, 520px);
}

.progress-bar.bg-success,
.btn-success {
  background-color: var(--damgalik-primary) !important;
  border-color: var(--damgalik-primary) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--damgalik-primary-dark) !important;
  border-color: var(--damgalik-primary-dark) !important;
}

.text-secondary {
  color: var(--damgalik-text) !important;
}

.text-muted {
  color: var(--damgalik-muted) !important;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-left: .75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.theme-toggle:hover,
.theme-toggle:focus {
  background: rgba(255, 255, 255, .28);
}

html.theme-dark,
body.theme-dark {
  --damgalik-bg: #071922;
  --damgalik-surface: #102a36;
  --damgalik-surface-soft: #153745;
  --damgalik-primary: #047dad;
  --damgalik-primary-dark: #036086;
  --damgalik-accent: #31c1f0;
  --damgalik-text: #eaf7fb;
  --damgalik-muted: #a8bfca;
  --damgalik-border: #244655;
}

html.theme-dark body,
body.theme-dark {
  background-image: linear-gradient(rgba(7, 25, 34, .86), rgba(7, 25, 34, .94)), url("../assets/img/gokturk-fon.jpg");
  background-repeat: repeat;
  background-size: auto, 520px auto;
}

html.theme-dark .archive-card,
html.theme-dark .home-seo-copy,
html.theme-dark .lesson-card,
html.theme-dark .lesson-intro,
html.theme-dark .lesson-complete {
  color: var(--damgalik-text);
  box-shadow: none !important;
}

html.theme-dark .lesson-media {
  background: #0c202b;
}

html.theme-dark .badge.text-bg-light {
  background: var(--damgalik-surface-soft) !important;
  color: var(--damgalik-text) !important;
}

html.theme-dark .text-body {
  color: var(--damgalik-text) !important;
}

html.theme-dark .btn-outline-secondary {
  color: var(--damgalik-text);
  border-color: var(--damgalik-border);
}

html.theme-dark .worldcup-panel {
  background:
    linear-gradient(180deg, rgba(8, 34, 48, .96), rgba(5, 24, 34, .98)),
    #071922;
  border-color: #1c4b60;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

html.theme-dark .worldcup-eyebrow,
html.theme-dark .worldcup-countdown strong,
html.theme-dark .worldcup-support-count strong {
  color: var(--damgalik-accent);
}

html.theme-dark .worldcup-flag,
html.theme-dark .worldcup-countdown span,
html.theme-dark .worldcup-support-count {
  background: #0d2a38;
  border-color: #244f62;
  color: var(--damgalik-text);
}

html.theme-dark .worldcup-date,
html.theme-dark .worldcup-separator {
  color: var(--damgalik-muted);
}

html.theme-dark .youtube-reminder {
  background:
    linear-gradient(135deg, rgba(8, 34, 48, .96), rgba(4, 96, 134, .88)),
    #071922;
  border-color: #244f62;
}

.practice-carousel {
  padding: 1rem;
  border: 1px solid var(--damgalik-border);
  border-radius: .85rem;
  background: var(--damgalik-surface);
}

.lesson-carousel {
  padding: 1rem 0 0;
}

.lesson-indicators {
  position: static;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 1rem 1rem;
}

.lesson-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--damgalik-muted);
  opacity: .45;
}

.lesson-indicators .active {
  background-color: var(--damgalik-primary);
  opacity: 1;
}

.lesson-carousel-frame {
  min-height: clamp(320px, 62vw, 680px);
  border-radius: .75rem;
  background: #f6fcff;
  overflow: hidden;
}

.lesson-carousel-frame .carousel-item {
  min-height: clamp(320px, 62vw, 680px);
  padding: 0 1rem 1rem;
  text-align: center;
}

.lesson-carousel-frame .carousel-item.active,
.lesson-carousel-frame .carousel-item-next,
.lesson-carousel-frame .carousel-item-prev {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lesson-carousel-frame img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
}

.lesson-slide-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .75rem;
  margin-bottom: .75rem;
}

.practice-frame {
  min-height: clamp(320px, 62vw, 680px);
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
}

.practice-frame .carousel-item {
  min-height: clamp(320px, 62vw, 680px);
  text-align: center;
}

.practice-frame .carousel-item.active,
.practice-frame .carousel-item-next,
.practice-frame .carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
}

.practice-frame img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.practice-indicators {
  position: static;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1rem;
}

.practice-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--damgalik-muted);
  opacity: .45;
}

.practice-indicators .active {
  background-color: var(--damgalik-primary);
  opacity: 1;
}

.practice-controls {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
}

html.theme-dark .practice-carousel,
html.theme-dark .lesson-carousel-frame,
html.theme-dark .practice-frame {
  background: var(--damgalik-surface);
}

@media (max-width: 991px) {
  .theme-toggle {
    margin-left: auto;
    margin-right: .5rem;
  }
}

:root {
  --damgalik-bg: #eefaff;
  --damgalik-surface: #ffffff;
  --damgalik-surface-soft: #d8f2ff;
  --damgalik-primary: #0787bd;
  --damgalik-primary-dark: #056b95;
  --damgalik-section: #0896c9;
  --damgalik-footer: #04556f;
  --damgalik-footer-dark: #03394c;
  --damgalik-active: #bfeeff;
  --damgalik-text: #20272e;
  --damgalik-muted: #66727c;
  --damgalik-border: #d9edf5;
  --bs-primary: var(--damgalik-section);
  --bs-secondary: var(--damgalik-primary);
  --bs-success: var(--damgalik-primary);
  --bs-link-color: var(--damgalik-primary);
  --bs-link-hover-color: var(--damgalik-primary-dark);
}

.bg-secondary,
#mainNav {
  background-color: var(--damgalik-primary) !important;
}

.bg-primary {
  background-color: var(--damgalik-section) !important;
}

.footer {
  background-color: var(--damgalik-footer) !important;
}

.copyright {
  background-color: var(--damgalik-footer-dark) !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #fff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: rgba(191, 238, 255, .22) !important;
}

.navbar .nav-link.active {
  background: rgba(191, 238, 255, .34) !important;
}

a {
  color: var(--damgalik-primary);
}

a:hover,
a:focus {
  color: var(--damgalik-primary-dark);
}

.lesson-dots button.active,
.progress-bar.bg-success,
.btn-success {
  background-color: var(--damgalik-primary) !important;
  border-color: var(--damgalik-primary) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--damgalik-primary-dark) !important;
  border-color: var(--damgalik-primary-dark) !important;
}

.archive-card i,
.about-point i {
  color: var(--damgalik-primary) !important;
}

.archive-card i {
  color: #fff !important;
}

html.theme-dark,
body.theme-dark {
  --damgalik-bg: #071922;
  --damgalik-surface: #102a36;
  --damgalik-surface-soft: #153745;
  --damgalik-primary: #0b8fc4;
  --damgalik-primary-dark: #04729d;
  --damgalik-section: #066f98;
  --damgalik-footer: #052c3a;
  --damgalik-footer-dark: #031f2a;
  --damgalik-active: #2cc3f2;
  --damgalik-text: #eaf7fb;
  --damgalik-muted: #a8bfca;
  --damgalik-border: #244655;
}

.lesson-alphabet-toggle {
  min-width: 12rem;
}

.lesson-alphabet {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: .75rem;
  clear: both;
}

.lesson-alphabet-panel {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--damgalik-border);
  border-radius: .85rem;
  background: var(--damgalik-surface);
}

.lesson-alphabet-panel img {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

html.theme-dark .lesson-alphabet-panel {
  background: var(--damgalik-surface);
}

@media (max-width: 576px) {
  .practice-controls {
    flex-direction: column;
  }

  .practice-controls .btn {
    width: 100%;
  }
}

.admin-body,
.admin-login-body {
  min-height: 100vh;
  background:
    linear-gradient(rgba(238, 248, 251, .86), rgba(238, 248, 251, .86)),
    url("../assets/img/gokturk-fon.jpg");
  background-repeat: repeat;
  background-size: auto, 520px auto;
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.admin-sidebar {
  padding: 1.25rem;
  background: #04556f;
  color: #fff;
}

.admin-brand {
  display: block;
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-sidebar nav {
  display: grid;
  gap: .45rem;
}

.admin-sidebar nav a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem;
  border-radius: .5rem;
  color: #fff;
  text-decoration: none;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a:focus {
  background: rgba(255, 255, 255, .12);
}

.admin-content {
  padding: 1.5rem;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-panel,
.admin-login-card {
  border: 1px solid var(--damgalik-border, #d9edf5);
  border-radius: .85rem;
  background: #fff;
  padding: 1.25rem;
}

.admin-login-body {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.admin-login-card {
  width: min(420px, 100%);
}

.analytics-consent {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  width: min(560px, calc(100% - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .85rem;
  background: linear-gradient(135deg, #04556f, #0787bd);
  color: #fff;
}

.analytics-consent p {
  margin: .25rem 0;
  color: rgba(255, 255, 255, .9);
  line-height: 1.45;
}

.analytics-consent a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.analytics-consent-actions {
  display: inline-flex;
  gap: .5rem;
  flex: 0 0 auto;
}

.analytics-consent .btn-light {
  color: var(--damgalik-primary-dark);
  font-weight: 700;
}

.admin-session-list {
  display: grid;
  gap: 1rem;
}

.admin-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-event-flow {
  display: grid;
  gap: .6rem;
  max-height: 360px;
  margin: 0;
  padding-left: 1.25rem;
  padding-right: .5rem;
  overflow-y: auto;
}

.admin-event-flow::-webkit-scrollbar {
  width: 8px;
}

.admin-event-flow::-webkit-scrollbar-track {
  background: #eef8fb;
  border-radius: 999px;
}

.admin-event-flow::-webkit-scrollbar-thumb {
  background: #0787bd;
  border-radius: 999px;
}

.admin-event-flow li {
  line-height: 1.5;
}

.admin-event-time {
  display: inline-block;
  min-width: 4.5rem;
  color: #66727c;
  font-weight: 700;
}

.admin-event-target {
  display: block;
  margin-top: .15rem;
  color: #33434d;
}

@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .admin-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-consent {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-consent-actions {
    width: 100%;
  }

  .analytics-consent-actions .btn {
    width: 100%;
  }
}