.da6it-ai-article {
  --da6it-bg: #ffffff;
  --da6it-surface: #f7fbfd;
  --da6it-surface-2: #eef8fb;
  --da6it-border: #d8e8ef;
  --da6it-text: #18313d;
  --da6it-muted: #637983;
  --da6it-accent: #1296ae;
  --da6it-accent-2: #26b6c8;
  --da6it-accent-soft: #e7f7fa;
  --da6it-link: #087f98;
  --da6it-shadow: 0 12px 32px rgba(26, 71, 88, .08);
  color: var(--da6it-text);
}

.da6it-ai-article *, .da6it-ai-article *::before, .da6it-ai-article *::after { box-sizing: border-box; }
.da6it-ai-article a { color: var(--da6it-link); text-decoration-thickness: .08em; text-underline-offset: .16em; }

.da6it-ai-badges { display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 1rem; }
.da6it-ai-badge { display:inline-flex; align-items:center; min-height:30px; padding:.35rem .7rem; border:1px solid var(--da6it-border); border-radius:999px; background:var(--da6it-accent-soft); color:var(--da6it-link); font-size:.76rem; font-weight:750; letter-spacing:.055em; text-transform:uppercase; }

.da6it-ai-intro { margin:0 0 1.5rem; padding:1.25rem 1.35rem; border:1px solid var(--da6it-border); border-left:5px solid var(--da6it-accent); border-radius:16px; background:linear-gradient(135deg, rgba(18,150,174,.08), rgba(38,182,200,.025)), var(--da6it-bg); box-shadow:var(--da6it-shadow); }
.da6it-ai-intro p { margin:0; font-size:1.05rem; line-height:1.75; }

.da6it-ai-overview-title, .da6it-ai-links-title { margin:2rem 0 .9rem; font-size:1.15rem; font-weight:800; }
.da6it-ai-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0 0 2rem; }
.da6it-ai-card { min-width:0; padding:1.05rem 1.1rem; border:1px solid var(--da6it-border); border-radius:15px; background:var(--da6it-surface); box-shadow:0 7px 22px rgba(26,71,88,.055); }
.da6it-ai-card-label { margin:0 0 .35rem; color:var(--da6it-accent); font-size:.75rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.da6it-ai-card-value { margin:0; color:var(--da6it-text); font-size:.98rem; line-height:1.55; }

.da6it-ai-section { margin:0 0 1.35rem; padding:1.35rem 1.4rem; border:1px solid var(--da6it-border); border-radius:18px; background:var(--da6it-bg); box-shadow:0 8px 28px rgba(26,71,88,.055); }
.da6it-ai-section-head { display:flex; align-items:flex-start; gap:.85rem; margin:0 0 .85rem; }
.da6it-ai-section-no { flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; margin-top:.1rem; border-radius:10px; background:var(--da6it-accent-soft); color:var(--da6it-accent); font-size:.8rem; font-weight:850; }
.da6it-ai-section h2 { margin:0; color:var(--da6it-text); font-size:clamp(1.25rem,2.2vw,1.65rem); line-height:1.25; }
.da6it-ai-section h3 { margin-top:1.35rem; color:var(--da6it-text); }
.da6it-ai-section p, .da6it-ai-section li { line-height:1.75; }
.da6it-ai-section p:last-child, .da6it-ai-section ul:last-child, .da6it-ai-section ol:last-child { margin-bottom:0; }
.da6it-ai-section ul, .da6it-ai-section ol { padding-left:1.25rem; }
.da6it-ai-section blockquote { margin:1.2rem 0; padding:.9rem 1rem; border-left:4px solid var(--da6it-accent-2); border-radius:0 10px 10px 0; background:var(--da6it-surface-2); color:var(--da6it-text); }

.da6it-ai-section table { width:100%; margin:1rem 0; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--da6it-border); border-radius:12px; }
.da6it-ai-section th, .da6it-ai-section td { padding:.72rem .8rem; border-bottom:1px solid var(--da6it-border); text-align:left; vertical-align:top; }
.da6it-ai-section th { background:var(--da6it-surface-2); font-weight:800; }
.da6it-ai-section tr:last-child td { border-bottom:0; }

.da6it-ai-link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; margin:0 0 1.75rem; }
.da6it-ai-link-card { position:relative; display:block; min-height:100%; padding:1rem 3rem 1rem 1rem; border:1px solid var(--da6it-border); border-radius:14px; background:var(--da6it-surface); color:var(--da6it-text); text-decoration:none; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.da6it-ai-link-card:hover { transform:translateY(-2px); border-color:var(--da6it-accent-2); box-shadow:var(--da6it-shadow); }
.da6it-ai-link-card::after { content:"↗"; position:absolute; right:1rem; top:1rem; color:var(--da6it-accent); font-size:1.1rem; font-weight:800; }
.da6it-ai-link-name { display:block; margin-bottom:.25rem; font-weight:800; color:var(--da6it-text); }
.da6it-ai-link-meta { display:block; color:var(--da6it-muted); font-size:.88rem; line-height:1.45; overflow-wrap:anywhere; }

.da6it-ai-endbox { margin-top:2rem; padding:1.2rem 1.3rem; border:1px solid var(--da6it-border); border-radius:16px; background:linear-gradient(135deg, rgba(18,150,174,.10), rgba(38,182,200,.04)), var(--da6it-bg); }
.da6it-ai-endbox strong { color:var(--da6it-text); }
.da6it-ai-article code { padding:.12em .35em; border-radius:6px; background:var(--da6it-surface-2); }
.da6it-ai-article pre { overflow-x:auto; padding:1rem; border:1px solid var(--da6it-border); border-radius:12px; background:#11232c; color:#eef9fc; }

@media (max-width:860px) {
  .da6it-ai-card-grid { grid-template-columns:1fr; }
  .da6it-ai-link-grid { grid-template-columns:1fr; }
}

@media (prefers-color-scheme: dark) {
  .da6it-ai-article {
    --da6it-bg:#14252d; --da6it-surface:#182c35; --da6it-surface-2:#1d3440; --da6it-border:#31505e;
    --da6it-text:#edf7fa; --da6it-muted:#a8bec7; --da6it-accent:#57c9d8; --da6it-accent-2:#77d8e3;
    --da6it-accent-soft:#173b45; --da6it-link:#77d8e3; --da6it-shadow:0 12px 32px rgba(0,0,0,.18);
  }
}

body.dark-mode .da6it-ai-article,
body.wp-dark-mode-active .da6it-ai-article,
html[data-theme="dark"] .da6it-ai-article,
body[data-theme="dark"] .da6it-ai-article {
  --da6it-bg:#14252d; --da6it-surface:#182c35; --da6it-surface-2:#1d3440; --da6it-border:#31505e;
  --da6it-text:#edf7fa; --da6it-muted:#a8bec7; --da6it-accent:#57c9d8; --da6it-accent-2:#77d8e3;
  --da6it-accent-soft:#173b45; --da6it-link:#77d8e3; --da6it-shadow:0 12px 32px rgba(0,0,0,.18);
}


/* ==========================================================
   1.1.0 – compatibility with current V6.4 editorial renderer
   ========================================================== */

/*
 * Fix for PRE/CODE combinations produced by technical articles.
 * The old rules gave PRE white text but every nested CODE element a light
 * background. That resulted in the light, unreadable bars seen in articles.
 */
.da6it-ai-article pre code,
.da6it-ai-content pre code,
.da6it-ai-content .wp-block-preformatted code {
  display:inline;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-family:inherit;
}

.da6it-ai-content pre,
.da6it-ai-content .wp-block-preformatted {
  overflow-x:auto;
  padding:1rem 1.1rem;
  border:1px solid var(--da6it-border, #d8e8ef);
  border-radius:14px;
  background:#11232c;
  color:#eef9fc;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* Current V6.4 uses .da6it-ai-content instead of the older .da6it-ai-section. */
.da6it-ai-content .wp-block-table {
  width:100%;
  margin:1rem 0 1.5rem;
  overflow-x:auto;
}
.da6it-ai-content table {
  width:100%;
  margin:1rem 0;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--da6it-border, #d8e8ef);
  border-radius:12px;
  background:var(--da6it-bg, #fff);
  color:var(--da6it-text, #18313d);
}
.da6it-ai-content th,
.da6it-ai-content td {
  padding:.72rem .8rem;
  border-bottom:1px solid var(--da6it-border, #d8e8ef);
  text-align:left;
  vertical-align:top;
  color:inherit;
}
.da6it-ai-content th {
  background:var(--da6it-surface-2, #eef8fb);
  font-weight:800;
}
.da6it-ai-content tr:last-child td {
  border-bottom:0;
}

/*
 * AI articles already have their own hero. Hide redundant category/meta
 * elements such as "GUIDE / ARTIKEL" and reclaim their vertical space.
 * Everything is scoped to the Core's AI-article body class.
 */
body.da6it-ai-article-page .wp-block-post-terms,
body.da6it-ai-article-page .taxonomy-category,
body.da6it-ai-article-page .taxonomy-post_tag,
body.da6it-ai-article-page .entry-taxonomies,
body.da6it-ai-article-page .entry-meta,
body.da6it-ai-article-page .post-meta,
body.da6it-ai-article-page .post-categories,
body.da6it-ai-article-page .cat-links {
  display:none !important;
}

/* Pull the dedicated AI hero upwards without touching normal posts/pages. */
body.da6it-ai-article-page .wp-block-post-content {
  padding-top:0 !important;
}
body.da6it-ai-article-page .wp-block-post-content > .wp-block-spacer,
body.da6it-ai-article-page .wp-block-post-content > .wp-block-separator {
  display:none !important;
}
body.da6it-ai-article-page .wp-block-post-content > .da6it-ai-single {
  margin-top:0 !important;
}
body.da6it-ai-article-page .da6it-ai-single-hero {
  margin-top:0 !important;
}

/* Let the hero use a little more horizontal room on desktop. */
body.da6it-ai-article-page .wp-block-post-content > .da6it-ai-single {
  width:min(1420px,100%) !important;
  max-width:1420px !important;
}

@media (max-width:760px) {
  body.da6it-ai-article-page .wp-block-post-content > .da6it-ai-single {
    margin-top:-1rem !important;
  }
}


/* ==========================================================
   1.1.1 – theme-independent cleanup above the AI hero
   ========================================================== */

/*
 * The site's single-post template renders a small "Guide / Artikel" label
 * outside the standard post-terms block. JavaScript removes that exact label
 * on AI articles only. These rules collapse any wrapper marked by that cleanup.
 */
body.da6it-ai-article-page .da6it-ai-hidden-template-meta {
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  height:0 !important;
}

/* 1.1.2: no aggressive negative offset. Once the redundant template
   wrapper is removed, the hero naturally moves into the correct position. */
@media (min-width:761px) {
  body.da6it-ai-article-page .wp-block-post-content > .da6it-ai-single {
    margin-top:0 !important;
  }
}


/* ==========================================================
   1.1.3 – hero image box fits the featured image exactly
   ========================================================== */

/*
 * The Core hero image card can become taller than the actual image, which
 * leaves a white strip at the bottom. The featured images are currently all
 * generated in the same ratio, so we can safely normalize the figure and let
 * the image fill it completely.
 */
body.da6it-ai-article-page .da6it-ai-single-grid {
  align-items:center !important;
}

body.da6it-ai-article-page .da6it-ai-single-image {
  display:block !important;
  line-height:0 !important;
  overflow:hidden !important;
  align-self:center !important;
  aspect-ratio:1400 / 788 !important;
  min-height:0 !important;
}

body.da6it-ai-article-page .da6it-ai-single-image img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center !important;
}