/* ============================================
   Steam Sistem Gereksinimleri Kontrolü
   "Can I Run It?" - BilgisayarX
   LIGHT THEME
   ============================================ */

:root {
    --steam-bg: #f0f2f5;
    --steam-card: rgba(255,255,255,0.92);
    --steam-border: rgba(0,0,0,0.08);
    --steam-blue: #1a73e8;
    --steam-blue-light: #e8f0fe;
    --steam-blue-glow: rgba(26,115,232,0.15);
    --steam-green: #1e8e3e;
    --steam-green-light: #e6f4ea;
    --steam-yellow: #f9ab00;
    --steam-yellow-light: #fef7e0;
    --steam-orange: #e8710a;
    --steam-red: #d93025;
    --steam-red-light: #fce8e6;
    --steam-purple: #7c3aed;
    --steam-purple-light: #f3e8ff;
    --steam-text: #1f2937;
    --steam-muted: #6b7280;
    --steam-input-bg: #f9fafb;
    --steam-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    --steam-shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 8px 30px rgba(0,0,0,0.06);
}

body {
    background: var(--steam-bg) !important;
    background-image: linear-gradient(135deg, #e8f0fe 0%, #f0f2f5 40%, #f3e8ff 100%) !important;
    color: var(--steam-text);
}

/* HERO */
.steam-hero { text-align:center; padding:55px 20px 35px; position:relative; }
.steam-hero::after { content:''; position:absolute; bottom:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--steam-blue),transparent); opacity:0.3; }
.steam-hero h1 { font-size:2.6rem; font-weight:800; margin-bottom:12px; background:linear-gradient(135deg, var(--steam-blue) 0%, var(--steam-purple) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.steam-hero h1 i { -webkit-text-fill-color: var(--steam-blue); margin-right:8px; }
.steam-hero p { font-size:1.05rem; color:var(--steam-muted); max-width:620px; margin:0 auto; line-height:1.6; }
.steam-hero .steam-badge { display:inline-flex; align-items:center; gap:8px; margin-top:15px; padding:6px 16px; background:var(--steam-blue-light); border:1px solid rgba(26,115,232,0.2); border-radius:20px; font-size:0.85rem; color:var(--steam-blue); font-weight:600; }

/* CONTAINER */
.steam-container { max-width:1100px; margin:0 auto; padding:0 20px 60px; }

/* SECTION TITLES */
.steam-section-title { display:flex; align-items:center; gap:10px; font-size:1.3rem; font-weight:700; margin:35px 0 20px; color:var(--steam-text); }
.steam-section-title i { color:var(--steam-blue); font-size:1.1rem; }

/* CARDS */
.steam-card { background:var(--steam-card); backdrop-filter:blur(12px); border:1px solid var(--steam-border); border-radius:16px; padding:24px; box-shadow:var(--steam-shadow); transition:transform .25s,box-shadow .25s; }
.steam-card:hover { transform:translateY(-2px); box-shadow:var(--steam-shadow-hover); }

/* GRID */
.steam-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; }
.steam-grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }

/* FORM */
.steam-label { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:.88rem; color:var(--steam-muted); font-weight:500; }
.steam-input, .steam-select {
    width:100%; padding:11px 14px; background:var(--steam-input-bg); border:1px solid rgba(0,0,0,0.1);
    border-radius:10px; color:var(--steam-text); font-size:.95rem; font-family:inherit; transition:border-color .3s,box-shadow .3s;
}
.steam-input:focus, .steam-select:focus { outline:none; border-color:var(--steam-blue); box-shadow:0 0 0 3px var(--steam-blue-glow); }
.steam-select option { background:#fff; color:var(--steam-text); }
.steam-form-group { margin-bottom:18px; }

/* INPUT WITH BUTTON */
.steam-input-row { display:flex; gap:8px; align-items:stretch; }
.steam-input-row .steam-select { flex:1; }
.steam-detect-btn {
    padding:0 14px; border:1px solid rgba(26,115,232,0.3); background:var(--steam-blue-light); color:var(--steam-blue);
    border-radius:10px; cursor:pointer; font-size:.78rem; font-weight:600; white-space:nowrap;
    display:flex; align-items:center; gap:5px; transition:all .25s;
}
.steam-detect-btn:hover { background:var(--steam-blue); color:#fff; border-color:var(--steam-blue); }
.steam-detect-btn.detected { background:var(--steam-green-light); color:var(--steam-green); border-color:rgba(30,142,62,0.3); }
.steam-detect-btn.detecting { opacity:.7; cursor:wait; }

/* SEARCH */
.steam-search-wrap { position:relative; }
.steam-search-wrap i.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--steam-muted); pointer-events:none; z-index:1; }
.steam-search-wrap .steam-input { padding-left:40px; }
.steam-search-results { position:absolute; top:100%; left:0; right:0; z-index:100; max-height:350px; overflow-y:auto; background:rgba(255,255,255,0.98); border:1px solid var(--steam-border); border-top:none; border-radius:0 0 12px 12px; display:none; box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.steam-search-results.active { display:block; }
.steam-search-item { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background .2s; border-bottom:1px solid rgba(0,0,0,0.04); }
.steam-search-item:hover { background:var(--steam-blue-light); }
.steam-search-item img { width:120px; height:45px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.steam-search-item span { font-size:.92rem; color:var(--steam-text); font-weight:500; }
.steam-search-loading { padding:20px; text-align:center; color:var(--steam-muted); }

/* POPULAR GAMES */
.steam-popular-item { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; border:1px solid var(--steam-border); border-radius:12px; cursor:pointer; transition:all .25s; }
.steam-popular-item:hover { background:var(--steam-blue-light); border-color:rgba(26,115,232,0.3); transform:translateY(-2px); box-shadow:var(--steam-shadow); }
.steam-popular-item img { width:90px; height:34px; object-fit:cover; border-radius:5px; }
.steam-popular-item span { font-size:.85rem; font-weight:500; color:var(--steam-text); }

/* SELECTED GAME CARD */
.steam-selected-game { display:none; animation:steamFadeIn .4s ease; }
.steam-selected-game.active { display:block; }
.steam-game-banner { position:relative; border-radius:12px; overflow:hidden; margin-bottom:18px; }
.steam-game-banner img { width:100%; height:200px; object-fit:cover; }
.steam-game-banner .game-overlay { position:absolute; bottom:0; left:0; right:0; padding:18px; background:linear-gradient(transparent,rgba(0,0,0,0.75)); }
.steam-game-banner .game-name { font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:4px; }
.steam-game-banner .game-meta { font-size:.82rem; color:rgba(255,255,255,0.8); display:flex; flex-wrap:wrap; gap:12px; }
.steam-game-banner .game-meta span { display:inline-flex; align-items:center; gap:4px; }
.steam-game-genres { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.steam-game-genres span { padding:3px 10px; background:var(--steam-blue-light); border:1px solid rgba(26,115,232,0.15); border-radius:12px; font-size:.75rem; color:var(--steam-blue); font-weight:600; }

/* REQUIREMENTS TABLE */
.steam-req-box { background:var(--steam-input-bg); border:1px solid var(--steam-border); border-radius:10px; padding:16px; margin-bottom:14px; }
.steam-req-box h4 { font-size:.95rem; font-weight:600; margin-bottom:10px; color:var(--steam-blue); display:flex; align-items:center; gap:6px; }
.steam-req-content { font-size:.85rem; line-height:1.7; color:var(--steam-muted); }
.steam-req-content strong { color:var(--steam-text); }

/* BTN */
.steam-btn {
    width:100%; padding:14px; font-size:1.1rem; font-weight:700; color:#fff;
    background:linear-gradient(135deg,var(--steam-blue),#4285f4); border:none; border-radius:12px;
    cursor:pointer; text-transform:uppercase; letter-spacing:.5px; transition:all .3s;
    box-shadow:0 4px 14px var(--steam-blue-glow); display:flex; align-items:center; justify-content:center; gap:8px;
}
.steam-btn:hover { transform:scale(1.02); box-shadow:0 6px 24px rgba(26,115,232,0.3); }
.steam-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* RESULT */
.steam-result-section { display:none; animation:steamFadeIn .5s ease; }
.steam-result-section.active { display:block; }

.steam-verdict { text-align:center; padding:30px 20px; }
.steam-verdict-icon { font-size:4rem; margin-bottom:10px; }
.steam-verdict-text { font-size:2rem; font-weight:900; margin-bottom:8px; }
.steam-verdict-sub { font-size:1.05rem; color:var(--steam-muted); max-width:500px; margin:0 auto 20px; line-height:1.6; }
.steam-verdict-humor { font-style:italic; color:var(--steam-purple); font-size:1rem; padding:12px 20px; background:var(--steam-purple-light); border-left:3px solid var(--steam-purple); border-radius:0 8px 8px 0; max-width:550px; margin:0 auto; }

/* SCORE BARS */
.steam-bar-track { background:rgba(0,0,0,0.06); border-radius:10px; overflow:hidden; }
.steam-bar-track.big { height:24px; }
.steam-bar-track.small { height:16px; }

/* COMPARISON TABLE */
.steam-compare-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem; }
.steam-compare-table th { background:var(--steam-blue-light); color:var(--steam-blue); font-weight:600; padding:10px 14px; text-align:left; }
.steam-compare-table th:first-child { border-radius:10px 0 0 0; }
.steam-compare-table th:last-child { border-radius:0 10px 0 0; }
.steam-compare-table td { padding:10px 14px; border-bottom:1px solid rgba(0,0,0,0.05); color:var(--steam-text); vertical-align:top; }
.steam-compare-table tr:last-child td:first-child { border-radius:0 0 0 10px; }
.steam-compare-table tr:last-child td:last-child { border-radius:0 0 10px 0; }
.steam-compare-table tr:hover td { background:rgba(26,115,232,0.03); }
.steam-status-pass { color:var(--steam-green); font-weight:600; }
.steam-status-warn { color:var(--steam-orange); font-weight:600; }
.steam-status-fail { color:var(--steam-red); font-weight:600; }

/* SEO URL */
.steam-seo-url { background:var(--steam-input-bg); padding:14px; border-radius:10px; text-align:center; font-size:.85rem; border:1px dashed rgba(0,0,0,0.15); margin-top:20px; word-break:break-all; }
.steam-seo-url a { color:var(--steam-blue); text-decoration:none; font-weight:600; }
.steam-seo-url a:hover { text-decoration:underline; }

/* SHARE */
.steam-share-btns { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.steam-share-btn { padding:8px 16px; border-radius:10px; border:none; cursor:pointer; font-size:.82rem; font-weight:600; color:#fff; display:flex; align-items:center; gap:6px; transition:transform .2s; }
.steam-share-btn:hover { transform:scale(1.05); }
.steam-share-btn.tw { background:#1da1f2; }
.steam-share-btn.wa { background:#25d366; }
.steam-share-btn.cp { background:var(--steam-text); }

/* DETECTED INFO */
.steam-detected-info { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--steam-green-light); border:1px solid rgba(30,142,62,0.2); border-radius:8px; font-size:.8rem; color:var(--steam-green); margin-top:6px; font-weight:500; }
.steam-detected-info i { font-size:.75rem; }

/* ANIMATION */
@keyframes steamFadeIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes steamPulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.steam-loading-pulse { animation:steamPulse 1.5s infinite; }
@keyframes steamSpin { to{transform:rotate(360deg)} }
.steam-spin { animation:steamSpin .8s linear infinite; }

/* RESPONSIVE */
@media(max-width:768px) {
    .steam-hero h1 { font-size:1.8rem; }
    .steam-grid-2 { grid-template-columns:1fr; }
    .steam-grid-3 { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
    .steam-game-banner img { height:140px; }
    .steam-verdict-text { font-size:1.5rem; }
    .steam-compare-table { font-size:.8rem; }
    .steam-compare-table th, .steam-compare-table td { padding:8px 10px; }
    .steam-input-row { flex-direction:column; }
    .steam-detect-btn { justify-content:center; padding:10px; }
}