/**
 * @file
 * Sayfa iskeleti: üst alan, ana içerik, kenar çubuğu ve alt alan.
 */

.kalem-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.kalem-main {
  flex: 1 0 auto;
  padding-block: var(--kalem-space-6);
}

@media (min-width: 992px) {
  .kalem-main {
    padding-block: var(--kalem-space-7);
  }
}

/* "Dar" genişlik seçeneği: uzun yazılar için satır uzunluğunu kısaltır. */
.kalem-container--narrow {
  max-width: 860px;
}

/* Kenar çubuğu yokken içerik ortalanır ve okunabilir bir genişlikte kalır. */
.kalem-width-narrow .kalem-content > * {
  margin-inline: auto;
  max-width: var(--kalem-reading-measure);
}

.kalem-subhead {
  border-bottom: 1px solid var(--kalem-border);
  padding-block: var(--kalem-space-3);
}

.kalem-hero {
  background-color: var(--kalem-bg-subtle);
  border-bottom: 1px solid var(--kalem-border);
}

.kalem-content-above,
.kalem-content-below {
  padding-block: var(--kalem-space-5);
}

.kalem-sidebar {
  /* Masaüstünde kenar çubuğu kaydırırken üstte asılı kalır; mobilde
     içeriğin altına düştüğü için yapışkanlık kapatılır. */
  align-self: flex-start;
}

@media (min-width: 992px) {
  .kalem-sidebar {
    position: sticky;
    top: calc(var(--kalem-header-height) + var(--kalem-space-4));
  }

  .kalem-has-sticky-header .kalem-sidebar {
    max-height: calc(100vh - var(--kalem-header-height) - var(--kalem-space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Yukarı çık düğmesi. */
.kalem-to-top {
  align-items: center;
  background-color: var(--kalem-bg-raised);
  border: 1px solid var(--kalem-border);
  border-radius: 50%;
  bottom: var(--kalem-space-5);
  box-shadow: var(--kalem-shadow);
  color: var(--kalem-text-muted);
  display: flex;
  height: 44px;
  inset-inline-end: var(--kalem-space-5);
  justify-content: center;
  opacity: 0;
  position: fixed;
  transform: translateY(8px);
  transition: opacity var(--kalem-transition), transform var(--kalem-transition),
    color var(--kalem-transition), border-color var(--kalem-transition);
  width: 44px;
  z-index: 1030;
}

.kalem-to-top[hidden] {
  display: none;
}

.kalem-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.kalem-to-top:hover {
  border-color: var(--kalem-accent);
  color: var(--kalem-accent-text);
}