/* NACREBS Bilgi Merkezi — makale detay sistemi v1.0 */

.knowledge-article-page {
  background:
    radial-gradient(circle at 84% 4%, rgb(53 127 197 / 13%), transparent 32rem),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 34%, #f6fafe 100%);
  color: var(--color-ink);
  overflow: clip;
}

.article-hero {
  position: relative;
  padding-block: clamp(2.2rem, 4vw, 3.6rem) clamp(2.5rem, 4vw, 4.5rem);
}

.article-hero::before {
  position: absolute;
  top: -8rem;
  right: -10rem;
  width: 34rem;
  aspect-ratio: 1;
  border: 1px solid rgb(2 93 192 / 7%);
  border-radius: 50%;
  box-shadow: 0 0 0 6rem rgb(2 93 192 / 2.2%), 0 0 0 12rem rgb(2 93 192 / 1.2%);
  content: "";
  pointer-events: none;
}

.article-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  color: #73889b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.article-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.article-breadcrumbs a:hover,
.article-breadcrumbs a:focus-visible {
  color: var(--color-primary);
}

.article-breadcrumbs svg {
  width: 0.72rem;
  color: #a5b4c1;
}

.article-breadcrumbs path {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.7fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: end;
}

.article-hero__category {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--color-primary);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.article-hero__category::before {
  width: 1.7rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.article-hero h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(3rem, 5.8vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.066em;
  line-height: 0.96;
  text-wrap: balance;
}


.article-hero--long-title h1 {
  max-width: 19ch;
  font-size: clamp(2.75rem, 4.9vw, 5.4rem);
}

.article-hero__deck {
  max-width: 43rem;
  margin: 1.45rem 0 0;
  color: #526980;
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  line-height: 1.75;
}

.article-meta {
  display: grid;
  gap: 1.1rem;
  align-self: end;
  padding-top: 1.35rem;
  border-top: 1px solid rgb(4 24 47 / 11%);
}

.article-author {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.article-author__avatar {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgb(2 93 192 / 13%);
  border-radius: 50%;
  background: linear-gradient(145deg, #e9f5ff, #dbeeff);
  color: var(--color-primary);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.article-author__copy {
  display: grid;
  gap: 0.13rem;
}

.article-author__label {
  color: #8294a5;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-author strong {
  color: var(--color-ink);
  font-size: 0.9rem;
}

.article-meta__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  color: #73889b;
  font-size: 0.68rem;
  font-weight: 700;
}

.article-meta__facts span + span {
  position: relative;
  padding-left: 0.9rem;
}

.article-meta__facts span + span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #9eafbd;
  content: "";
  transform: translateY(-50%);
}

.article-cover {
  position: relative;
  z-index: 1;
  margin: clamp(2.4rem, 4vw, 4rem) 0 0;
}

.article-cover__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8.75;
  border: 1px solid rgb(4 24 47 / 9%);
  border-radius: clamp(1.3rem, 2vw, 2rem);
  background: #061b32;
  box-shadow: 0 2.5rem 5rem rgb(4 24 47 / 13%);
}

.article-cover__frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgb(2 15 31 / 18%));
  content: "";
  pointer-events: none;
}

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

.article-body-section {
  padding-block: clamp(4rem, 6vw, 6.5rem) clamp(6rem, 9vw, 9rem);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 48rem);
  gap: clamp(2.5rem, 7vw, 7rem);
  justify-content: center;
  align-items: start;
}

.article-toc {
  position: sticky;
  top: calc(var(--header-height-scrolled) + 2rem);
}

.article-toc__label {
  margin: 0 0 0.95rem;
  color: #8a9aa9;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-toc ol {
  display: grid;
  gap: 0.12rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc a {
  display: block;
  padding: 0.48rem 0;
  border-left: 1px solid rgb(4 24 47 / 11%);
  padding-left: 0.85rem;
  color: #718498;
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.42;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), padding-left var(--transition-fast);
}

.article-toc a:hover,
.article-toc a:focus-visible {
  padding-left: 1rem;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.article-content {
  min-width: 0;
  color: #263f57;
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.86;
}

.article-content > p:first-child {
  margin-top: 0;
  color: #18324e;
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  line-height: 1.82;
}

.article-content p {
  margin: 0 0 1.35rem;
}

.article-content h2 {
  scroll-margin-top: 7rem;
  margin: clamp(3.4rem, 6vw, 5rem) 0 1.15rem;
  color: var(--color-ink);
  font-size: clamp(1.75rem, 2.55vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.article-content h3 {
  scroll-margin-top: 7rem;
  margin: 2.5rem 0 0.9rem;
  color: var(--color-ink-soft);
  font-size: 1.23rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.article-content strong {
  color: var(--color-ink-soft);
}

.article-content ol,
.article-content ul {
  margin: 0 0 1.65rem;
  padding-left: 1.25rem;
}

.article-content li {
  margin: 0.68rem 0;
  padding-left: 0.25rem;
}

.article-content li::marker {
  color: var(--color-primary);
  font-weight: 800;
}

.article-steps {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem !important;
  padding: 0 !important;
  counter-reset: step;
  list-style: none;
}

.article-steps li {
  position: relative;
  margin: 0;
  padding: 1.05rem 1.1rem 1.05rem 3.55rem;
  border: 1px solid rgb(4 24 47 / 9%);
  border-radius: 1rem;
  background: #fbfdff;
  counter-increment: step;
}

.article-steps li::before {
  position: absolute;
  top: 0.95rem;
  left: 1rem;
  display: grid;
  width: 1.75rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #e7f3ff;
  color: var(--color-primary);
  content: counter(step);
  font-size: 0.68rem;
  font-weight: 800;
}

.article-figure {
  margin: clamp(2.3rem, 4vw, 3.4rem) 0;
}

.article-figure__media {
  overflow: hidden;
  border: 1px solid rgb(4 24 47 / 9%);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1.2rem 3rem rgb(4 24 47 / 7%);
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.article-figure figcaption {
  margin-top: 0.85rem;
  color: #718498;
  font-size: 0.72rem;
  line-height: 1.55;
}

.article-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
  border: 1px solid rgb(4 24 47 / 10%);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.9rem 2.5rem rgb(4 24 47 / 4.5%);
}

.article-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.55;
}

.article-table th,
.article-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgb(4 24 47 / 9%);
  text-align: left;
  vertical-align: top;
}

.article-table th {
  background: #edf5fc;
  color: var(--color-ink);
  font-size: 0.76rem;
  font-weight: 800;
}

.article-table tr:last-child td {
  border-bottom: 0;
}

.article-pathways,
.article-misconceptions {
  display: grid;
  gap: 0.85rem;
  margin: 1.4rem 0 1.8rem !important;
  padding: 0 !important;
  list-style: none;
}

.article-pathways li,
.article-misconceptions li {
  margin: 0;
  padding: 1rem 1.05rem;
  border-left: 3px solid rgb(2 93 192 / 35%);
  border-radius: 0 0.9rem 0.9rem 0;
  background: #f7fbff;
}

.article-note {
  margin: 2.5rem 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid rgb(2 93 192 / 13%);
  border-radius: 1rem;
  background: linear-gradient(135deg, #eef7ff, #f8fbff);
  color: #39546d;
  font-size: 0.92rem;
  line-height: 1.72;
}

.article-references {
  font-size: 0.86rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.article-back {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  margin-top: 3rem;
  padding: 0.78rem 1rem;
  border: 1px solid rgb(4 24 47 / 10%);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink-soft);
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0.8rem 2rem rgb(4 24 47 / 4%);
}

.article-back svg {
  width: 1rem;
}

.article-back path {
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-back:hover,
.article-back:focus-visible {
  color: var(--color-primary);
  border-color: rgb(2 93 192 / 22%);
}


@media (min-width: 42.01rem) and (max-width: 64rem) {
  .article-hero {
    padding-top: 2.4rem;
  }
}

@media (max-width: 64rem) {
  .article-hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .article-hero h1 {
    max-width: 17ch;
  }

  .article-meta {
    max-width: 38rem;
  }

  .article-layout {
    grid-template-columns: minmax(0, 46rem);
  }

  .article-toc {
    position: static;
    padding: 1rem 1.1rem;
    border: 1px solid rgb(4 24 47 / 9%);
    border-radius: 1rem;
    background: #fff;
  }

  .article-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 1rem;
  }
}

@media (max-width: 42rem) {
  .article-hero {
    padding-top: 1.6rem;
  }

  .article-hero h1 {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }

  .article-cover__frame {
    aspect-ratio: 4 / 3;
    border-radius: 1.15rem;
  }

  .article-toc ol {
    grid-template-columns: 1fr;
  }

  .article-content {
    font-size: 0.98rem;
  }

  .article-content h2 {
    margin-top: 3rem;
  }

  .article-steps li {
    padding-left: 3.25rem;
  }
}

/* Engineering article primitives */
.article-equation {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  justify-content: center;
  width: min(100%, 24rem);
  margin: 1.5rem 0 1.8rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgb(2 93 192 / 14%);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #edf7ff, #fbfdff);
  color: var(--color-ink);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.article-equation b {
  color: var(--color-primary);
  font-weight: 700;
}

.article-flowline {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem 0 1.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(4 24 47 / 9%);
  border-radius: 0.95rem;
  background: #fbfdff;
  color: #18324e;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.55;
}

.article-flowline--wrap {
  flex-wrap: wrap;
}

.article-flowline span {
  color: var(--color-primary);
}

@media (max-width: 42rem) {
  .article-flowline {
    width: 100%;
    align-items: flex-start;
  }
}


/* Bilgi Merkezi v1.1 — biyoistatistiksel çıkarım makale bileşenleri */
.article-lead {
  margin: 0 0 2rem !important;
  color: #18324e !important;
  font-size: clamp(1.08rem, 1.35vw, 1.24rem) !important;
  font-weight: 650;
  line-height: 1.8 !important;
}

.article-abstract {
  margin: 0 0 2.6rem;
  padding: 1.35rem 1.45rem 1.2rem;
  border: 1px solid rgb(2 93 192 / 12%);
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgb(237 247 255 / 94%), rgb(250 253 255 / 98%));
  box-shadow: 0 1rem 2.8rem rgb(4 24 47 / 4.5%);
}
.article-abstract__label {
  margin: 0 0 .55rem !important;
  color: var(--color-primary) !important;
  font-size: .62rem !important;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}
.article-abstract > p:not(.article-abstract__label) { margin-bottom: 1rem; }
.article-keywords { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.article-keywords span {
  padding: .42rem .62rem;
  border: 1px solid rgb(2 93 192 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  color: #536d85;
  font-size: .65rem;
  font-weight: 750;
}
.article-pullquote {
  position: relative;
  margin: 2rem 0 2.25rem;
  padding: 1.25rem 1.35rem 1.25rem 1.6rem;
  border: 1px solid rgb(4 24 47 / 8%);
  border-left: 3px solid rgb(2 93 192 / 52%);
  border-radius: 0 1rem 1rem 0;
  background: #f8fbfe;
  color: #193550;
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
  font-weight: 750;
  line-height: 1.65;
}
.article-cover__frame--science::after { background: linear-gradient(180deg, transparent 56%, rgb(2 15 31 / 35%)); }
.article-cover__science {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgb(73 177 231 / 24%), transparent 20rem),
    radial-gradient(circle at 28% 72%, rgb(20 106 171 / 20%), transparent 22rem),
    linear-gradient(135deg, #061a30 0%, #082944 52%, #041321 100%);
}
.article-cover__science-grid {
  position:absolute;
  inset:0;
  opacity:.44;
  background-image:linear-gradient(rgb(146 214 247 / 7%) 1px,transparent 1px),linear-gradient(90deg,rgb(146 214 247 / 7%) 1px,transparent 1px);
  background-size:3.2rem 3.2rem;
  mask-image:linear-gradient(90deg,#000,transparent 84%);
}
.article-cover__science-copy {
  position:absolute;
  z-index:2;
  top:50%;
  left:clamp(2rem,5vw,5rem);
  display:grid;
  max-width:32rem;
  transform:translateY(-50%);
}
.article-cover__science-copy > span { color:#76cafa; font-size:.62rem; font-weight:800; letter-spacing:.18em; }
.article-cover__science-copy strong { margin-top:.75rem; color:#f5fbff; font-size:clamp(1.85rem,3vw,3.25rem); letter-spacing:-.055em; line-height:1.02; }
.article-cover__science-copy strong b { color:#5dc5f5; font-weight:600; }
.article-cover__science-copy small { max-width:28rem; margin-top:1rem; color:rgb(218 238 250 / 68%); font-size:.77rem; line-height:1.65; }
.article-cover__science-plot { position:absolute; right:0; bottom:0; width:min(58%,48rem); height:auto; opacity:.88; }
.article-cover__science-plot path { fill:none; }
.science-axes path { stroke:rgb(180 229 252 / 14%); stroke-width:1; }
.science-ci path { stroke:#6acaf5; stroke-width:2; stroke-linecap:round; }
.science-ci circle { fill:#dff7ff; stroke:#1a9bd8; stroke-width:3; }
.science-curve path { stroke:rgb(132 222 255 / 48%); stroke-width:2.2; }
.science-dag path { stroke:rgb(159 226 255 / 32%); stroke-width:1.5; }
.science-dag circle { fill:#0d456b; stroke:#8bd8fb; stroke-width:2; }
.science-labels text { fill:rgb(199 232 248 / 42%); font-family:Manrope,sans-serif; font-size:12px; font-weight:800; letter-spacing:2px; }

@media(max-width:64rem){
  .article-cover__science-copy{max-width:27rem;}
  .article-cover__science-plot{width:64%;opacity:.62;}
}
@media(max-width:42rem){
  .article-cover__science-copy{top:35%;left:1.5rem;right:1.5rem;max-width:none;transform:none;}
  .article-cover__science-copy strong{font-size:clamp(1.7rem,8vw,2.35rem);}
  .article-cover__science-copy small{font-size:.68rem;}
  .article-cover__science-plot{right:-18%;bottom:-2%;width:105%;opacity:.54;}
  .article-keywords span{font-size:.61rem;}
  .article-pullquote{padding:1.05rem 1.1rem 1.05rem 1.25rem;}
}