/* 0.3.3 — shared banner-under-hero card surface for Vahşi Yaşam + Evcil Hayvanlar.
 * Loads after route skins so both pages share identical geometry and responsive behavior. */
body .site-main .dn-banner-card-surface.wildlife-topics{
  display:grid;grid-template-columns:minmax(190px,235px) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);align-items:stretch;
  margin:0 0 clamp(24px,3vw,38px);padding:16px;
  border:1px solid #405a45;border-radius:11px;background:#121b15;
}
body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro{min-width:0;align-self:center;padding:8px 4px 8px 8px}
body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro .eyebrow{
  margin:0 0 12px;color:#b7db9a;font-size:.64rem;letter-spacing:.22em;font-weight:800
}
body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro h2{
  margin:0;color:#f2f4ee;font-family:var(--wpia-serif);font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.08
}
body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro>p:not(.eyebrow){
  margin:12px 0 0;font-size:.8rem;line-height:1.5;color:#c5d0c3
}
body .site-main .dn-banner-card-surface .wildlife-topics__rule{
  display:block;width:25px;height:2px;margin-top:18px;background:#b7db9a
}
body .site-main .dn-banner-card-surface .dn-banner-card-surface__cards{
  min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;
}
body .site-main .dn-banner-card-surface .dn-banner-card{
  isolation:isolate;position:relative;display:block;min-width:0;min-height:184px;
  overflow:hidden;border:1px solid #435646;border-radius:8px;
  background:radial-gradient(ellipse at 55% 25%,#305037 0%,#203126 43%,#121b15 100%);
  color:#f2f4ee;text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
body .site-main .dn-banner-card-surface .dn-banner-card:nth-child(3n+2):not(.dn-banner-card--photo){
  background:radial-gradient(ellipse at 50% 25%,#24494a 0%,#1b3432 43%,#121b15 100%);
}
body .site-main .dn-banner-card-surface .dn-banner-card:nth-child(3n):not(.dn-banner-card--photo){
  background:radial-gradient(ellipse at 50% 25%,#3c4932 0%,#293327 43%,#121b15 100%);
}
body .site-main .dn-banner-card-surface .wildlife-topic-card__image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;
}
body .site-main .dn-banner-card-surface .wildlife-topic-card__shade{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,7,.10) 5%,rgba(5,12,7,.12) 35%,rgba(5,12,7,.92) 100%);
}
body .site-main .dn-banner-card-surface .wildlife-topic-card__label{
  position:absolute;inset:auto 7px 26px;display:flex;align-items:center;gap:6px;
  color:#f2f4ee;font-family:var(--wpia-serif);font-size:clamp(.68rem,.88vw,.87rem);line-height:1.13;
  text-shadow:0 1px 3px rgba(0,0,0,.54);
}
body .site-main .dn-banner-card-surface .wildlife-topic-card__label span{min-width:0;overflow-wrap:break-word}
body .site-main .dn-banner-card-surface .wildlife-topic-card .category-subtopics__icon{
  flex:0 0 24px;width:24px;height:24px;stroke:#c6e7ac;stroke-width:1.7;
}
body .site-main .dn-banner-card-surface .wildlife-topic-card__arrow{
  position:absolute;right:9px;bottom:6px;color:#c6e7ac;font-size:1.1rem;line-height:1;
}
body .site-main .dn-banner-card-surface .dn-banner-card:hover,
body .site-main .dn-banner-card-surface .dn-banner-card:focus-visible,
body .site-main .dn-banner-card-surface .dn-banner-card.is-current{
  border-color:#b7db9a;box-shadow:inset 0 0 0 1px rgba(183,219,154,.25),0 0 0 2px rgba(183,219,154,.14);
}
body .site-main .dn-banner-card-surface .dn-banner-card:focus-visible{outline:3px solid #d2f1b8;outline-offset:3px}
body .site-main .dn-banner-card-surface .dn-banner-card--photo:hover .wildlife-topic-card__image,
body .site-main .dn-banner-card-surface .dn-banner-card--photo:focus-visible .wildlife-topic-card__image{transform:scale(1.035)}

@media(max-width:1199px){
  body .site-main .dn-banner-card-surface.wildlife-topics{display:block;padding:15px}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro{padding:0 2px 13px}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro h2{font-size:1.5rem}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro>p:not(.eyebrow){margin-top:6px}
  body .site-main .dn-banner-card-surface .wildlife-topics__rule{margin-top:10px}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__cards{
    display:flex;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;
    scrollbar-width:thin;padding:3px 3px 7px;
  }
  body .site-main .dn-banner-card-surface .dn-banner-card{
    flex:0 0 clamp(140px,20vw,180px);min-height:181px;scroll-snap-align:start;
  }
  body .site-main .dn-banner-card-surface .wildlife-topic-card__label{font-size:.84rem}
}
@media(max-width:767px){
  body .site-main .dn-banner-card-surface.wildlife-topics{padding:12px;margin-bottom:24px;border-radius:9px}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro .eyebrow{margin-bottom:5px;font-size:.59rem}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro h2{font-size:1.4rem}
  body .site-main .dn-banner-card-surface .dn-banner-card-surface__intro>p:not(.eyebrow){font-size:.76rem}
  body .site-main .dn-banner-card-surface .dn-banner-card{flex-basis:clamp(142px,43vw,176px);min-height:clamp(158px,48vw,188px)}
  body .site-main .dn-banner-card-surface .wildlife-topic-card__label{font-size:.84rem}
}
@media(max-width:359px){
  body .site-main .dn-banner-card-surface.wildlife-topics{padding:10px}
  body .site-main .dn-banner-card-surface .dn-banner-card{flex-basis:clamp(132px,46vw,150px)}
}
@media(prefers-reduced-motion:reduce){
  body .site-main .dn-banner-card-surface .dn-banner-card,
  body .site-main .dn-banner-card-surface .wildlife-topic-card__image{transition:none}
}