/* Oyun sunucusu web sitesi ornekleri (oyun-sunucu-paneli.php) - 2026-11-09 */
.od-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.od-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(32,45,97,.1);border-radius:22px;background:#fff;box-shadow:0 14px 40px rgba(32,45,97,.07)}
.od-shot{position:relative;display:block;aspect-ratio:16/9;background:#0b0b0f;overflow:hidden}
.od-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.od-shot:hover img{transform:scale(1.04)}
.od-tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;background:rgba(10,10,13,.78);color:#fff;font:800 11.5px Manrope,sans-serif;letter-spacing:.06em}
.od-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fd66b;box-shadow:0 0 0 0 rgba(47,214,107,.6);animation:odping 1.8s infinite}
@keyframes odping{70%{box-shadow:0 0 0 9px rgba(47,214,107,0)}100%{box-shadow:0 0 0 0 rgba(47,214,107,0)}}
.od-body{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px}
.od-body h3{margin:0;color:#202d61;font:800 24px/1.2 Manrope,sans-serif}
.od-game{margin:0;color:#9f388f;font:800 12px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.od-body p{margin:0;color:#5d6679;line-height:1.65;font-size:15px}
.od-body{flex:1}.od-actions{margin-top:auto;padding-top:8px}.od-chips{margin-bottom:0}
.od-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;padding:0}
.od-chips li{padding:5px 12px;border-radius:99px;background:#eef1fb;color:#3b3f8f;font:700 12.5px Manrope,sans-serif}
.od-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.od-actions .public-btn{width:auto;margin-top:0}
.od-side{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:22px;background:linear-gradient(160deg,#202d61,#4a2f77);color:#fff}
.od-side h3{margin:0;font:800 22px/1.25 Manrope,sans-serif;color:#fff}
.od-side p{margin:0;color:rgba(255,255,255,.82);line-height:1.6;font-size:15px}
.od-links{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.od-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:700;transition:background .2s,transform .2s}
.od-links a:hover{background:rgba(255,255,255,.18);transform:translateX(3px)}
.od-links small{display:block;color:rgba(255,255,255,.7);font-weight:500;font-size:12.5px;margin-top:2px}
.od-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.od-contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:11px;font-weight:800;font-size:14px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.od-contact a:not(.wa):not(.dc):hover{background:rgba(255,255,255,.2)}
.od-contact a.wa{background:#1fa855;border-color:#1fa855}
.od-contact a.dc{background:#5865f2;border-color:#5865f2}
.od-contact a:hover{filter:brightness(1.1)}
.od-note{font-size:12.5px!important;color:rgba(255,255,255,.62)!important}
.od-more{margin:22px 0 0;color:#5d6679;font-size:14.5px}
@media (max-width:1060px){.od-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.od-grid{grid-template-columns:1fr}}
@media (max-width:560px){.od-body{padding:20px}.od-actions .public-btn{width:100%}}

/* Alt çağrı bölümü: iki düğme yan yana, sağa yaslı */
.public-cta .od-cta-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.public-cta .od-cta-actions .public-btn{width:auto;margin:0;min-height:54px;padding:0 24px;gap:10px;white-space:nowrap}
.public-cta .od-cta-actions .od-wa{background:#fff;color:#202d61}
.public-cta .od-cta-actions .od-discord{background:#5865f2;color:#fff;border:0}
.public-cta .od-cta-actions .public-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
@media (max-width:760px){.public-cta .od-cta-actions{justify-content:stretch;width:100%}.public-cta .od-cta-actions .public-btn{flex:1 1 100%;justify-content:center}}

/* Discord topluluk kartı */
.od-community{padding-top:8px}
.od-dc{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:36px 38px;border-radius:26px;background:linear-gradient(135deg,#1a2352 0%,#3a2a6e 58%,#5865f2 135%);color:#fff;box-shadow:0 22px 60px rgba(32,45,97,.22);overflow:hidden}
.od-dc::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(88,101,242,.45),transparent 68%);pointer-events:none}
.od-dc.no-live{grid-template-columns:1fr}
.od-dc-main,.od-dc-live{position:relative;z-index:1}
.od-dc-eyebrow{display:inline-block;margin-bottom:10px;color:#c9cffc;font:800 12px Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.od-dc h2{margin:0 0 10px;color:#fff;font:800 clamp(26px,3.4vw,36px)/1.15 Manrope,sans-serif}
.od-dc-main p{margin:0 0 22px;max-width:520px;color:rgba(255,255,255,.84);font-size:16px;line-height:1.65}
.od-dc .od-dc-btn{display:inline-flex;align-items:center;gap:10px;width:auto;min-height:52px;margin:0;padding:0 26px;border-radius:13px;background:#fff;color:#202d61;font-weight:800;border:0;transition:transform .2s,filter .2s}
.od-dc .od-dc-btn:hover{transform:translateY(-2px);filter:brightness(.97)}
.od-dc-live{padding:20px 22px;border-radius:18px;background:rgba(10,12,28,.42);border:1px solid rgba(255,255,255,.14)}
.od-dc-live[hidden]{display:none}
.od-dc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.od-dc-name{font:800 16px/1.3 Manrope,sans-serif;color:#fff}
.od-dc-online{display:inline-flex;align-items:center;gap:8px;color:#bff3d2;font:700 13.5px Manrope,sans-serif}
.od-dc-online i{width:8px;height:8px;border-radius:50%;background:#2fd66b;box-shadow:0 0 0 0 rgba(47,214,107,.6);animation:odping 1.8s infinite}
.od-dc-avatars{display:flex;flex-wrap:wrap;margin:18px 0 0 10px;min-height:38px}
.od-dc-avatars:empty{display:none}
.od-dc-avatars img{width:38px;height:38px;margin-left:-10px;border-radius:50%;border:2.5px solid #2a2f6a;background:#2a2f6a;object-fit:cover}
.od-dc-avatars img.st-online{border-color:#2fd66b}
.od-dc-avatars img.st-idle{border-color:#f0b232}
.od-dc-avatars img.st-dnd{border-color:#f23f43}
.od-dc-chan{margin-top:16px}
.od-dc-chan[hidden]{display:none}
.od-dc-chan small{display:block;margin-bottom:8px;color:rgba(255,255,255,.62);font:700 11.5px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.od-dc-channels{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.od-dc-channels li{padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;font:700 12.5px Manrope,sans-serif}
@media (max-width:860px){.od-dc{grid-template-columns:1fr;gap:24px;padding:28px 22px}.od-dc .od-dc-btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.od-dc-online i{animation:none}.od-dc .od-dc-btn{transition:none}}