/* Keep the desktop card stack; use an aligned, readable list on phones. */
@media (max-width: 767px) {
  section:has(.dc-reveal) .dc-reveal:has(> div > a[href$="/web-gelistirme/"]) { min-width: 0; }
  section:has(.dc-reveal) .dc-reveal > div:has(> a[href$="/web-gelistirme/"]) {
    width: 100%; max-width: none; gap: 12px;
  }
  section:has(.dc-reveal) .dc-reveal > div > a[href*="/hizmetler/"] {
    width: 100%; min-width: 0; margin: 0;
  }
  section:has(.dc-reveal) .dc-reveal > div > a[href*="/hizmetler/"] > div {
    width: 100%; height: auto; min-height: 124px; margin: 0;
    translate: none !important; transform: none !important; filter: none !important;
    padding: 18px; border: 1px solid rgba(242,183,5,.2); background: #101016;
    gap: 10px;
  }
  section:has(.dc-reveal) .dc-reveal > div > a[href*="/hizmetler/"] > div::before { display: none; }
  section:has(.dc-reveal) .dc-reveal > div > a[href*="/hizmetler/"] > div > div > p { margin-top: 0; color: #f2b705; }
  section:has(.dc-reveal) .dc-reveal > div > a[href*="/hizmetler/"] > div > p { color: rgba(255,255,255,.75); }
  /* The second AI column is decorative. It should not reserve another phone screen. */
  section:has(.ai-path) { padding-top: 48px !important; padding-bottom: 48px !important; }
  section:has(.ai-path) > div:has(.ai-path) { gap: 0; }
  section:has(.ai-path) > div > div:has(> svg .ai-path) { display: none; }
  section:has(.ai-path) .home-node-network { opacity: .35; }
  section:has(.ai-path) h2 { margin-top: 16px; font-size: clamp(1.75rem, 7.5vw, 2.25rem); line-height: 1.15; }
  section:has(.ai-path) ul { margin-top: 24px; gap: 12px; }
  section:has(.ai-path) ul + div { margin-top: 28px; }
  section:has(.ai-path) + section { padding-top: 48px; }
}