/* Gyro DNS + Bulut Yük Dengeleyici tanıtım sayfaları (landing-dns.tpl, landing-lb.tpl). gyro-s3.css + gyro-managed.css üstüne. Görsel yok, yalnız CSS. R2 alt ajanı 2026-11-10 */
.gyro-dnslb-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; background: #1f9d63; box-shadow: 0 0 0 3px rgba(31,157,99,.2); }
.gyro-dnslb-dot.is-down { background: #c2410c; box-shadow: 0 0 0 3px rgba(194,65,12,.2); }
@media (prefers-reduced-motion: no-preference) { .gyro-dnslb-dot.is-up { animation: gyro-dnslb-pulse 2.4s ease-in-out infinite; } }
@keyframes gyro-dnslb-pulse { 50% { box-shadow: 0 0 0 6px rgba(31,157,99,.08); } }

/* Neden ayrı DNS: metin + ad sunucusu kartları */
.gyro-dnslb-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 991.98px) { .gyro-dnslb-split { grid-template-columns: 1fr; } }
.gyro-dnslb-points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.gyro-dnslb-points li { display: flex; gap: .85rem; align-items: flex-start; }
.gyro-dnslb-points li > i { font-size: 1.35rem; color: #128788; margin-top: .1rem; }
.gyro-dnslb-points h3 { font-size: 1rem; font-weight: 750; margin: 0 0 .2rem; }
.gyro-dnslb-points p { margin: 0; color: var(--wstyle-muted-color, #5b6673); font-size: .93rem; }
.gyro-dns-ns { margin: 0; padding: 1.5rem; border-radius: 1.25rem; color: #fff; background: radial-gradient(120% 120% at 100% 0, #128788 0, #065174 55%, #04314a 100%); box-shadow: var(--gyro-shadow-lg, 0 20px 50px -20px rgba(0,0,0,.35)); }
.gyro-dns-ns-title { margin: 0 0 .9rem; font-weight: 800; font-size: 1.1rem; color: #fff; }
.gyro-dns-ns-card { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; margin-bottom: .7rem; border-radius: .9rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.gyro-dns-ns-card div { display: grid; flex: 1 1 auto; min-width: 0; }
.gyro-dns-ns-card strong { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; overflow-wrap: anywhere; }
.gyro-dns-ns-card span { font-size: .82rem; color: #cfe6ee; }
.gyro-dns-ns-card > i { color: #ffd27a; }
.gyro-dns-ns figcaption { margin-top: .4rem; font-size: .85rem; color: #d7e9f0; }

/* Bilgi Merkezi bağlantıları */
.gyro-dnslb-kb { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .75rem; }
.gyro-dnslb-kb a { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-radius: var(--gyro-radius-lg, 14px); border: 1px solid var(--wstyle-border-color, #e3e8ee); background: var(--wstyle-surface-bg, #fff); color: inherit; text-decoration: none; font-weight: 600; font-size: .93rem; transition: border-color .2s, transform .2s; }
.gyro-dnslb-kb a:hover, .gyro-dnslb-kb a:focus-visible { border-color: #128788; transform: translateY(-1px); }
.gyro-dnslb-kb a > i:first-child { color: #128788; font-size: 1.15rem; }
.gyro-dnslb-kb a > span { flex: 1 1 auto; }
.gyro-dnslb-kb a > i:last-child { color: #065174; }

/* LB hero diyagramı */
.gyro-lb-hero-art { position: relative; }
.gyro-lb-diagram { max-width: 32rem; margin-inline: auto; padding: 1.25rem; border-radius: 1rem; background: #0f1b24; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(0,0,0,.35); color: #d7e4ee; }
.gyro-lb-node { display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border-radius: .75rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.gyro-lb-node strong { color: #fff; }
.gyro-lb-node em { margin-inline-start: auto; font-style: normal; font-size: .75rem; color: #9fb3c4; }
.gyro-lb-node.is-down { opacity: .6; }
.gyro-lb-node-lb { justify-content: flex-start; background: linear-gradient(90deg, rgba(18,135,136,.35), rgba(6,81,116,.35)); border-color: rgba(79,209,197,.4); }
.gyro-lb-node-lb > i { font-size: 1.2rem; color: #4fd1c5; }
.gyro-lb-lines { display: flex; justify-content: space-around; height: 1.6rem; }
.gyro-lb-lines span { width: 2px; background: linear-gradient(#4fd1c5, rgba(79,209,197,.2)); }
.gyro-lb-lines span.is-down { background: repeating-linear-gradient(#c2410c 0 4px, transparent 4px 8px); opacity: .7; }
.gyro-lb-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gyro-lb-targets .gyro-lb-node { flex-direction: column; align-items: flex-start; gap: .3rem; }
.gyro-lb-targets .gyro-lb-node em { margin-inline-start: 0; }
.gyro-lb-code-grid { max-width: 60rem; margin-inline: auto; }

.chrome-dark .gyro-dnslb-kb a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.chrome-dark .gyro-dnslb-points p { color: #b8c4d2; }
.chrome-dark .gyro-dnslb-points h3 { color: #fff; }
.chrome-dark .gyro-dnslb-kb a > i:last-child { color: #7cc7d6; }
@media (max-width: 575.98px) { .gyro-lb-targets { grid-template-columns: 1fr; } .gyro-lb-lines { display: none; } .gyro-lb-targets { margin-top: .6rem; } }
.gyro-lb-hero-art .gyro-mail-chip-1 { top: auto; bottom: -7%; inset-inline-start: 2%; }
.gyro-lb-hero-art .gyro-mail-chip-2 { bottom: auto; top: -7%; inset-inline-end: 0; }
.gyro-dns-hero .gyro-mail-chip-1 { top: auto; bottom: -8%; inset-inline-start: 2%; }
@media (max-width: 991.98px) { .gyro-lb-hero-art .gyro-mail-chip, .gyro-dns-hero .gyro-mail-chip { display: none; } }