.ordu-page { background: #f4f7fc; }
.ordu-page .site-header { background: rgba(255,255,255,.96); }
.ordu-page .nav-link.active { color: var(--primary); background: var(--muted); }

.article-hero { position: relative; isolation: isolate; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.article-hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.article-hero-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3,24,58,.97) 0%, rgba(5,58,145,.87) 52%, rgba(7,88,213,.26) 100%); }
.article-hero-content { padding-top: 110px; padding-bottom: 88px; }
.breadcrumb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 36px; color: rgba(255,255,255,.92); font-size: .9rem; }
.breadcrumb-nav a { color: #fff; font-weight: 600; }
.article-kicker, .toc-kicker { margin-bottom: 10px; color: #9fc2ff; font-size: .76rem; font-weight: 700; letter-spacing: .18em; }
.article-hero h1 { max-width: 980px; margin: 0 0 20px; color: #fff; font-size: clamp(2.45rem, 5.2vw, 4.9rem); line-height: 1.04; }
.article-hero-content > p:not(.article-kicker) { max-width: 760px; margin-bottom: 28px; color: rgba(255,255,255,.92); font-size: 1.04rem; line-height: 1.7; text-shadow: 0 2px 16px rgba(0,0,0,.28); }
.article-hero-content a:not(.custom-btn) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; }
.article-hero-content a:not(.custom-btn):hover { color: #ffd1ae; }
.article-hero-content .custom-btn,
.article-hero-content .custom-btn:hover,
.article-hero-content .custom-btn:focus { color: #fff; }

.article-main { padding: 46px 0 54px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 26px; }
.post-card { overflow: hidden; padding: 18px 48px 52px; border: 1px solid #e1e9f5; border-radius: 34px; background: #fff; box-shadow: 0 24px 70px rgba(15,49,99,.08); }
.post-intro { margin: -18px -48px 8px; padding: 42px 48px 38px; color: #18314f; background: linear-gradient(135deg, #eef4ff, #f8fbff); border-bottom: 1px solid #dfe9f7; font-size: 1.08rem; }
.post-card section { position: relative; scroll-margin-top: 105px; padding: 38px 0 30px; border-bottom: 1px solid #e7edf6; }
.post-card section:last-child { border-bottom: 0; padding-bottom: 0; }
.post-card h2 { max-width: 760px; margin: 0 0 17px; color: var(--ink); font-size: clamp(1.65rem, 2.7vw, 2.35rem); line-height: 1.2; }
.post-card h3 { margin: 28px 0 12px; color: var(--ink); font-size: clamp(1.2rem, 1.8vw, 1.48rem); }
.post-card p { color: #44566e; line-height: 1.78; }
.post-card p + p { margin-top: 4px; }
.post-card a:not(.custom-btn) { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(7,88,213,.32); text-underline-offset: 3px; }
.post-card .article-social-link { margin-top: 12px; margin-bottom: 0; }
.article-steps { display: grid; gap: 9px; padding-left: 22px; color: #44566e; }
.article-steps li { padding-left: 5px; line-height: 1.65; }
.article-table-wrap { width: 100%; margin: 16px 0; overflow-x: auto; border: 1px solid #dce6f3; border-radius: 16px; }
.article-table { width: 100%; min-width: 620px; border-collapse: collapse; color: #40536c; background: #fff; font-size: .92rem; }
.article-table th, .article-table td { padding: 10px 12px; border-right: 1px solid #dce6f3; border-bottom: 1px solid #dce6f3; text-align: left; vertical-align: middle; line-height: 1.4; }
.article-table th:last-child, .article-table td:last-child { border-right: 0; }
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table th { color: #fff; background: #12396f; font-weight: 700; }
.article-table tbody tr:nth-child(even) { background: #f3f7fc; }
.post-figure { width: fit-content; max-width: 100%; margin: 28px auto 3px; overflow: hidden; border-radius: 26px; background: #e8eef7; }
.post-figure img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.post-figure figcaption { padding: 12px 16px; color: #63738a; background: #f1f5fb; font-size: .86rem; }
.article-callout { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 28px; padding: 26px; border-radius: 26px; background: #e9f1ff; }
.callout-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: var(--primary); font-size: 1.25rem; }
.article-callout h3 { margin-top: 2px; }
.brand-section { margin: 38px -24px 0; padding: 38px 24px 30px !important; border: 0 !important; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #0e213d, #0758d5); }
.brand-section h2, .brand-section p { color: #fff; }

.article-sidebar { position: sticky; top: 105px; display: grid; gap: 16px; }
.toc-card { padding: 24px; border: 1px solid #dfe8f5; border-radius: 28px; background: #fff; box-shadow: 0 14px 42px rgba(15,49,99,.07); }
.toc-kicker { color: var(--primary); }
.toc-card h2 { margin-bottom: 17px; font-size: 1.16rem; }
.toc-card ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc-card li { counter-increment: toc; }
.toc-card a { display: grid; grid-template-columns: 23px 1fr; gap: 8px; padding: 8px 9px; border-radius: 12px; color: #40536c; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.toc-card a::before { content: counter(toc, decimal-leading-zero); color: var(--primary); font-size: .7rem; font-weight: 700; padding-top: 3px; }
.toc-card a:hover { color: var(--primary); background: #eef4ff; }
.post-faq details { margin-bottom: 9px; padding: 0 18px; border: 1px solid #dde7f5; border-radius: 17px; background: #f8faff; }
.post-faq summary { display: flex; justify-content: space-between; gap: 14px; padding: 15px 0; color: var(--ink); cursor: pointer; list-style: none; font-weight: 700; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq details p { padding: 0 30px 16px 0; }
.post-faq details[open] summary i { transform: rotate(45deg); }
.post-faq summary i { color: var(--primary); transition: transform .2s ease; }

.ordu-final-cta { padding: 0 0 54px; }
.ordu-final-panel { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 36px; border-radius: 32px; color: #fff; background: var(--ink); box-shadow: var(--shadow); }
.ordu-final-panel > div:first-child { max-width: 720px; }
.ordu-final-panel h2 { margin-bottom: 12px; color: #fff; font-size: clamp(1.55rem, 2.5vw, 2.2rem); }
.ordu-final-panel p { color: rgba(255,255,255,.78); }

@media (max-width: 1099px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; grid-template-columns: 1fr; order: -1; }
  .toc-card ol { grid-template-columns: repeat(2, 1fr); }
  .ordu-final-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
  .article-table-wrap {
    margin: 12px 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .article-table { min-width: 0; background: transparent; }
  .article-table thead { display: none; }
  .article-table,
  .article-table tbody { display: block; width: 100%; }
  .article-table tr {
    display: grid;
    grid-template-columns: minmax(104px, .68fr) 1.32fr;
    width: 100%;
    margin-bottom: 7px;
    overflow: hidden;
    border: 1px solid #dce6f3;
    border-radius: 12px;
    background: #fff;
  }
  .article-table tbody tr:nth-child(even) { background: #fff; }
  .article-table td {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border-right: 0;
    border-bottom: 0;
    line-height: 1.35;
  }
  .article-table td:first-child {
    border-right: 1px solid #dce6f3;
    color: #12396f;
    background: #f3f7fc;
    font-weight: 700;
  }
  .article-table td::before { content: none; }
  .article-hero { min-height: 610px; }
  .article-hero-image { object-position: 64% center; }
  .article-hero-overlay { background: linear-gradient(90deg, rgba(3,24,58,.97) 0%, rgba(5,58,145,.88) 80%, rgba(7,88,213,.52) 100%); }
  .article-hero-content { padding-top: 78px; padding-bottom: 58px; }
  .breadcrumb-nav { margin-bottom: 24px; }
  .article-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .article-hero-content > p:not(.article-kicker) { font-size: 1rem; }
  .article-main { padding: 24px 0 34px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .toc-card ol { grid-template-columns: 1fr; }
  .post-card { padding: 10px 22px 34px; border-radius: 26px; }
  .post-intro { margin: -10px -22px 4px; padding: 30px 22px; font-size: 1rem; }
  .post-card section { padding: 30px 0 24px; }
  .article-callout { grid-template-columns: 1fr; padding: 22px; }
  .brand-section { margin-inline: -10px; padding-inline: 18px !important; }
  .ordu-final-panel { padding: 28px 23px; border-radius: 28px; }
  .ordu-final-panel .cta-actions, .ordu-final-panel .cta-button { width: 100%; }
}