/* Page background and container spacing for soft card look */
body {
  background: #f6f7f9;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 12px;
}

/* Article soft-card styling: blend with page background (remove stark white) */
.post-main main article.post-article {
  background: transparent !important;
  border-radius: 14px;
  padding: 28px;
  border: 1px solid rgba(15, 23, 42, 0.02) !important;
  box-shadow: none !important;
  max-width: 100%;
}

/* Ensure container/section wrappers also don't show white backgrounds */
.post-main,
.post-main main,
.post-main aside,
.post-main > main > article.post-article,
article.post-article {
  background: transparent !important;
  background-image: none !important;
}

main article h1 {
  font-size: 1.9rem;
  margin-top: 0;
}

.post-content {
  font-size: 1.03rem;
  line-height: 1.75;
  color: #263145;
}

/* Make the main content area slightly narrower for better readability */
.post-main {
  grid-template-columns: 1fr !important;
  gap: 28px;
  align-items: start;
  display: grid;
}

/* Desktop: 2 column grid */
@media (min-width: 881px) {
  .post-main {
    grid-template-columns: 1fr 320px !important;
    display: grid !important;
    flex-direction: row;
    padding: 0 !important;
  }

  .post-main > main {
    padding: 0 !important;
  }

  .post-main > aside {
    padding: 0 !important;
  }
}

/* Sidebar: Smart Sticky - JavaScript ile kontrol edilecek */
.post-main > aside {
  position: relative;
  align-self: start;
  will-change: transform;
}

.post-main > aside.sticky-top {
  position: sticky;
  top: 80px;
}

.post-main > aside.sticky-bottom {
  position: sticky;
  bottom: 20px;
  top: auto;
}

.post-main > aside.fixed-bottom {
  position: relative;
  margin-top: auto;
}

/* Improve typography spacing */
.post-article p {
  margin: 0 0 1rem 0;
}

/* FAQ styles will reuse --rcard3-primary if available */
:root {
  --page-bg: #f6f7f9;
}

/* hide global hero area on single post page */
.hero-content,
.hero-content-inner {
  display: none !important;
}

/* Responsive Design - Tablet and below */
@media (max-width: 880px) {
  html, body {
    overflow-x: hidden !important;
  }

  .post-main {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .post-main > main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 6px !important;
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
  }

  .post-main > main article.post-article {
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    border-radius: 8px;
  }

  .post-main > aside {
    width: 100% !important;
    max-width: none !important;
    padding: 0 6px !important;
    order: 2;
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto;
    min-width: 0;
  }
}