/*
Theme Name: TechGeek
Theme URI: https://techgeek.com
Author: TechGeek Team
Description: Modern software download & tech news portal — Yasir252-inspired 2-column layout.
Version: 4.0.0
License: GNU General Public License v2 or later
Text Domain: techgeek
Tags: software, downloads, games, news, technology, two-columns
*/

/* =============================================
   RESET
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================
   DESIGN TOKENS — Yasir252 Style
============================================= */
:root {
    --bg:       #323740;
    --bg-light: #f5f5f5;
    --white:    #ffffff;
    --card:     #ffffff;
    --border:   #e8e8e8;
    --border2:  #ddd;

    --text:     #333333;
    --text2:    #666666;
    --text3:    #999999;
    --text-w:   #ffffff;

    --accent:   #e74c3c;
    --accent2:  #c0392b;
    --blue:     #2980b9;
    --green:    #27ae60;
    --orange:   #e67e22;
    --purple:   #8e44ad;
    --dark:     #181d1f;
    --nav-bg:   #181d1f;

    --font:     'Inter', Arial, Helvetica, sans-serif;
    --heading:  'Inter', Arial, Helvetica, sans-serif;
    --mono:     'Consolas', 'Courier New', monospace;

    --shadow:   0 1px 3px rgba(0,0,0,.08);
    --shadow2:  0 2px 8px rgba(0,0,0,.12);
    --radius:   4px;
    --max-w:    1280px;
}

/* =============================================
   BASE
============================================= */
body {
    font-family: var(--font);
    background: var(--bg-light);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   HEADER
============================================= */
.tg-header {
    background: var(--dark);
    padding: 20px 0 0;
}
.tg-header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Logo */
.tg-logo { display: flex; align-items: center; gap: 0; text-decoration: none; flex-shrink: 0; }
.tg-logo:hover { text-decoration: none; }
.tg-logo-text { display: flex; flex-direction: column; line-height: 1; }
.tg-logo-name {
    font-size: 36px; font-weight: 900; color: var(--text-w);
    letter-spacing: -1px; font-family: var(--heading);
}
.tg-logo-name em { font-style: normal; color: var(--accent); }
.tg-logo-tag {
    font-size: 11px; color: var(--text3);
    margin-top: 2px;
}
.tg-logo-icon { display: none; }

/* Language switcher (top right) */
.tg-header-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text3);
}
.tg-header-meta a { color: var(--text3); }
.tg-header-meta a:hover { color: var(--text-w); }

/* Nav — colorful tabs like Yasir252 */
.tg-nav {
    background: var(--nav-bg);
    border-top: 1px solid rgba(255,255,255,.05);
}
.tg-nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.tg-nav-inner::-webkit-scrollbar { display: none; }
.tg-nav a {
    display: inline-flex; align-items: center;
    padding: 10px 16px;
    font-size: 13px; font-weight: 700;
    color: var(--text-w);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: background .15s;
}
.tg-nav a:hover { background: rgba(255,255,255,.08); }
.tg-nav a.active { background: var(--accent); }
.tg-nav-sep { display: none; }

/* Slogan / search */
.tg-slogan { display: none; }
.tg-search-bar {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 15px;
}
.tg-search-form {
    display: flex;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}
.tg-search-form input {
    flex: 1;
    border: none; outline: none;
    padding: 10px 15px;
    font-size: 14px; font-family: var(--font);
    color: var(--text);
    background: transparent;
}
.tg-search-form input::placeholder { color: var(--text3); }
.tg-search-form button {
    background: var(--accent); border: none;
    padding: 10px 24px;
    color: var(--text-w); font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: var(--font);
    transition: background .15s;
}
.tg-search-form button:hover { background: var(--accent2); }

/* =============================================
   LAYOUT — 2 columns (8/12 + 4/12)
============================================= */
.tg-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 15px;
}
.tg-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    padding: 20px 0;
}
.tg-left { display: none; }

/* =============================================
   SECTION HEADING — Yasir252 style with colored left border
============================================= */
.tg-section-heading {
    display: flex; align-items: center;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent);
    padding-left: 12px;
}
.tg-section-heading h2 {
    font-size: 20px; font-weight: 800;
    color: var(--text);
    font-family: var(--heading);
}
.tg-section-heading .tg-sh-nav {
    margin-left: auto;
    display: flex; gap: 6px;
}
.tg-sh-nav button {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--text3);
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.tg-sh-nav button:hover { border-color: var(--accent); color: var(--accent); }

/* =============================================
   FEATURED / HERO SECTION (Artikel Terbaru)
============================================= */
.tg-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.tg-hero-big {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--dark);
    min-height: 320px;
}
.tg-hero-big img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.tg-hero-big-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.tg-hero-big-cat {
    display: inline-block;
    background: var(--accent);
    color: var(--text-w);
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.tg-hero-big-title {
    font-size: 18px; font-weight: 800;
    color: var(--text-w); line-height: 1.35;
    margin-bottom: 8px;
}
.tg-hero-big-title a { color: var(--text-w); }
.tg-hero-big-title a:hover { text-decoration: underline; }
.tg-hero-big-meta { font-size: 11px; color: rgba(255,255,255,.6); }
.tg-hero-big-excerpt {
    font-size: 12px; color: rgba(255,255,255,.7);
    line-height: 1.5; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Hero right: small posts list */
.tg-hero-list { display: flex; flex-direction: column; gap: 0; }
.tg-hero-list-item {
    display: flex; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.tg-hero-list-item:last-child { border-bottom: none; }
.tg-hero-list-thumb {
    width: 100px; height: 70px; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden;
    background: var(--bg-light);
}
.tg-hero-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-hero-list-body { flex: 1; min-width: 0; }
.tg-hero-list-cat {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.tg-hero-list-title {
    font-size: 13px; font-weight: 700;
    color: var(--text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tg-hero-list-title:hover { color: var(--accent); }
.tg-hero-list-meta { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* =============================================
   SOFTWARE LIST (Software Terbaru) — icon + info rows
============================================= */
.tg-sw-list { margin-bottom: 30px; }
.tg-sw-item {
    display: flex; gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.tg-sw-item:last-child { border-bottom: none; }
.tg-sw-icon-box {
    width: 80px; height: 80px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    background: var(--bg-light);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.tg-sw-icon-box img { width: 100%; height: 100%; object-fit: contain; }
.tg-sw-info { flex: 1; min-width: 0; }
.tg-sw-title {
    font-size: 18px; font-weight: 800;
    color: var(--text); line-height: 1.3;
    margin-bottom: 6px;
}
.tg-sw-title a { color: var(--text); }
.tg-sw-title a:hover { color: var(--accent); }
.tg-sw-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 12px; color: var(--text3);
    margin-bottom: 8px;
}
.tg-sw-cat {
    display: inline-block;
    background: var(--bg-light);
    color: var(--text2);
    font-size: 11px; font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}
.tg-sw-cat:hover { color: var(--accent); }
.tg-sw-excerpt {
    font-size: 13px; color: var(--text2);
    line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =============================================
   GAMES GRID (PC Game Terbaru) — 2-col with image overlay
============================================= */
.tg-games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
}
.tg-game-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--dark);
    aspect-ratio: 16/10;
}
.tg-game-card img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s;
}
.tg-game-card:hover img { transform: scale(1.05); }
.tg-game-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
}
.tg-game-title {
    font-size: 13px; font-weight: 700;
    color: var(--text-w); line-height: 1.3;
}
.tg-game-title a { color: var(--text-w); }
.tg-game-title a:hover { text-decoration: underline; }
.tg-game-meta { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 3px; }

/* =============================================
   SIDEBAR
============================================= */
.tg-right { }

/* Sidebar widget */
.tg-widget {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    overflow: hidden;
}
.tg-widget-title {
    background: var(--accent);
    color: var(--text-w);
    padding: 12px 16px;
    font-size: 15px; font-weight: 800;
    font-family: var(--heading);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.tg-widget-body { padding: 16px; }

/* Sidebar: image post widget (Cara Download style) */
.tg-widget-post {
    display: block; margin-bottom: 16px;
}
.tg-widget-post:last-child { margin-bottom: 0; }
.tg-widget-post img {
    width: 100%; border-radius: var(--radius);
    margin-bottom: 8px;
}
.tg-widget-post-cat {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 3px;
}
.tg-widget-post-title {
    font-size: 14px; font-weight: 700;
    color: var(--text); line-height: 1.4;
}
.tg-widget-post-title:hover { color: var(--accent); }
.tg-widget-post-meta { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* Sidebar: top list widget (numbered) */
.tg-top-list-item {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.tg-top-list-item:first-child { padding-top: 0; }
.tg-top-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.tg-top-num-circle {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: var(--text3);
}
.tg-top-list-item:nth-child(1) .tg-top-num-circle { background: var(--accent); color: var(--text-w); }
.tg-top-list-item:nth-child(2) .tg-top-num-circle { background: var(--blue); color: var(--text-w); }
.tg-top-list-item:nth-child(3) .tg-top-num-circle { background: var(--orange); color: var(--text-w); }
.tg-top-list-thumb {
    width: 60px; height: 45px; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden;
    background: var(--bg-light);
}
.tg-top-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-top-list-info { flex: 1; min-width: 0; }
.tg-top-list-title {
    font-size: 13px; font-weight: 700;
    color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tg-top-list-title a { color: var(--text); }
.tg-top-list-title a:hover { color: var(--accent); }
.tg-top-list-views { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* =============================================
   ENTRIES / LISTING (legacy compatibility)
============================================= */
.tg-entries {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}
.tg-date-header {
    background: var(--dark);
    color: var(--text-w);
    padding: 8px 16px;
    font-size: 14px; font-weight: 700;
}
.tg-date-header small { font-weight: 400; color: var(--text3); font-size: 12px; margin-left: auto; float: right; }

.tg-entry {
    display: flex; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.tg-entry:last-child { border-bottom: none; }
.tg-entry:hover { background: var(--bg-light); }
.tg-entry-arrow { display: none; }
.tg-entry-icon {
    width: 48px; height: 48px;
    border-radius: 8px; object-fit: contain;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.tg-entry-body { flex: 1; min-width: 0; }
.tg-entry-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tg-entry-name { font-size: 15px; font-weight: 700; color: var(--text); }
.tg-entry-name:hover { color: var(--accent); text-decoration: none; }
.tg-entry-ver { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.tg-os { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.os-win { color: var(--blue); } .os-mac { color: var(--text3); } .os-lin { color: var(--green); } .os-and { color: var(--green); }
.tg-pick { font-size: 9px; font-weight: 700; background: var(--orange); color: var(--text-w); padding: 1px 5px; border-radius: 2px; }
.tg-new { font-size: 9px; font-weight: 700; background: var(--accent); color: var(--text-w); padding: 1px 5px; border-radius: 2px; }
.tg-entry-desc { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 6px; }
.tg-entry-desc a { color: var(--blue); font-weight: 600; }
.tg-entry-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tg-stars { display: inline-flex; align-items: center; letter-spacing: -1px; font-size: 12px; }
.star-f { color: #f5a623; } .star-e { color: var(--border); }
.tg-lic { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; }
.lic-free  { background: rgba(39,174,96,.1); color: var(--green); }
.lic-paid  { background: rgba(230,126,34,.1); color: var(--orange); }
.lic-trial { background: rgba(241,196,15,.1); color: #f39c12; }
.tg-entry-size { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.tg-dl-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 14px;
    background: var(--accent); color: var(--text-w);
    font-size: 12px; font-weight: 700;
    border-radius: var(--radius);
    transition: background .15s;
}
.tg-dl-btn:hover { background: var(--accent2); color: var(--text-w); }

/* News item */
.tg-news-item {
    display: flex; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.tg-news-item:last-child { border-bottom: none; }
.tg-news-item:hover { background: var(--bg-light); }
.tg-news-thumb {
    width: 80px; height: 60px; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden;
    background: var(--bg-light);
}
.tg-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-news-body { flex: 1; min-width: 0; }
.tg-news-cat { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-bottom: 3px; display: block; }
.tg-news-cat-icon { font-size: 11px; }
.tg-news-title { display: block; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; }
.tg-news-title:hover { color: var(--accent); }
.tg-news-meta { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* =============================================
   SINGLE POST
============================================= */
.tg-single {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.tg-sw-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    display: flex; gap: 16px; align-items: flex-start;
}
.tg-sw-icon-wrap {
    width: 64px; height: 64px; border-radius: 12px;
    overflow: hidden; flex-shrink: 0;
    background: var(--white); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.tg-sw-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
.tg-sw-name { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.tg-sw-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tg-sw-content {
    padding: 24px;
    font-size: 15px; line-height: 1.75;
    color: var(--text2);
}
.tg-sw-content p { font-size: 15px; }
.tg-sw-content h2 { font-size: 18px; font-weight: 800; color: var(--text); margin: 24px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.tg-sw-content h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 16px 0 8px; }
.tg-sw-content p  { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 14px; }
.tg-sw-content ul, .tg-sw-content ol { padding-left: 24px; margin-bottom: 14px; }
.tg-sw-content li { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 4px; }
.tg-sw-content a { color: var(--blue); }
.tg-sw-content a:hover { text-decoration: underline; }
.tg-sw-content img { border-radius: var(--radius); margin: 10px 0; }
.tg-dl-section { background: var(--bg-light); border-top: 1px solid var(--border); padding: 20px; }
.tg-dl-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }
.tg-dl-version-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--border);
    background: var(--white); border-radius: var(--radius); margin-bottom: 8px;
}
.tg-dl-version-row:hover { border-color: var(--accent); }
.tg-dl-ver-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.tg-dl-ver-size { font-size: 12px; color: var(--text3); font-family: var(--mono); }
.tg-dl-ver-latest { font-size: 10px; font-weight: 700; background: var(--green); color: var(--text-w); padding: 2px 8px; border-radius: 3px; }
.tg-spec-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.tg-spec-table tr { border-bottom: 1px solid var(--border); }
.tg-spec-table tr:last-child { border-bottom: none; }
.tg-spec-table th { text-align: left; padding: 8px 12px; width: 28%; color: var(--text3); font-weight: 600; background: var(--bg-light); font-size: 12px; }
.tg-spec-table td { padding: 8px 12px; color: var(--text); }

/* =============================================
   TOC
============================================= */
.tg-toc {
    background: var(--bg-light); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 18px;
    margin: 20px 0;
}
.tg-toc-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.tg-toc-toggle {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2px 8px;
    font-size: 11px; cursor: pointer; font-family: var(--font);
    color: var(--text3);
}
.tg-toc-list { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.tg-toc-list li { list-style-type: decimal; }
.tg-toc-list a { color: var(--blue); font-size: 13px; }
.tg-toc-list a:hover { text-decoration: underline; }

/* =============================================
   BREADCRUMBS
============================================= */
.tg-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text3); padding: 8px 0 12px;
}
.tg-breadcrumb a { color: var(--text2); }
.tg-breadcrumb a:hover { color: var(--accent); }
.tg-bc-sep { color: var(--border2); }

/* =============================================
   PAGINATION
============================================= */
.tg-pagination {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 16px 0; flex-wrap: wrap;
}
.tg-pagination a, .tg-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; font-weight: 600; color: var(--text2);
    background: var(--white);
}
.tg-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.tg-pagination .current { background: var(--accent); border-color: var(--accent); color: var(--text-w); }

/* Page info MG-style (hide on yasir layout) */
.tg-page-info { display: none; }

/* =============================================
   INLINE NEWS WIDGET
============================================= */
.tg-inline-news-widget { display: none; }
.tg-featured-box { display: none; }

/* =============================================
   LANGUAGE SWITCHER
============================================= */
.tg-lang-wrap { position: relative; flex-shrink: 0; }
.tg-lang-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 10px;
    background: transparent; border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius); color: var(--text3);
    font-size: 12px; font-weight: 600; font-family: var(--font);
    cursor: pointer;
}
.tg-lang-btn:hover { border-color: rgba(255,255,255,.3); color: var(--text-w); }
.tg-lang-wrap.open .tg-lang-btn { border-color: var(--accent); color: var(--text-w); }
.tg-lang-chevron { transition: transform .18s; }
.tg-lang-wrap.open .tg-lang-chevron { transform: rotate(180deg); }
.tg-lang-panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); width: 420px; z-index: 500;
    opacity: 0; transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .16s, transform .16s;
    box-shadow: var(--shadow2);
}
.tg-lang-wrap.open .tg-lang-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tg-lang-search-wrap { padding: 8px; background: var(--bg-light); border-bottom: 1px solid var(--border); }
.tg-lang-search {
    width: 100%; padding: 6px 10px 6px 28px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 12px; outline: none; font-family: var(--font); color: var(--text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 8px center;
}
.tg-lang-search:focus { border-color: var(--accent); }
.tg-lang-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; padding: 8px; max-height: 280px; overflow-y: auto; }
.tg-lang-item {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 6px; border-radius: 3px;
    font-size: 12px; color: var(--text2);
}
.tg-lang-item:hover { background: var(--bg-light); }
.tg-lang-item.active { color: var(--accent); font-weight: 700; background: rgba(231,76,60,.05); }
.tg-lang-flag { width: 16px; height: 11px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.tg-lang-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-lang-code { font-size: 9px; font-weight: 700; color: var(--text3); font-family: var(--mono); }

/* =============================================
   NEWSLETTER SIDEBAR
============================================= */
.tg-newsletter-mini p { font-size: 13px; color: var(--text2); margin-bottom: 10px; line-height: 1.5; }
.tg-newsletter-mini form { display: flex; flex-direction: column; gap: 8px; }
.tg-newsletter-mini input[type="email"] {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 12px; font-size: 13px; font-family: var(--font); outline: none; color: var(--text);
}
.tg-newsletter-mini input[type="email"]:focus { border-color: var(--accent); }
.tg-newsletter-mini button {
    background: var(--accent); color: var(--text-w); border: none; border-radius: var(--radius);
    padding: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font);
}
.tg-newsletter-mini button:hover { background: var(--accent2); }

/* =============================================
   FOOTER
============================================= */
.tg-footer {
    background: var(--dark);
    margin-top: 30px;
    padding: 30px 0 0;
}
.tg-footer-inner {
    max-width: var(--max-w);
    margin: 0 auto; padding: 0 15px;
    text-align: center;
}
.tg-footer-bottom {
    max-width: var(--max-w);
    margin: 0 auto; padding: 16px 15px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12px; color: var(--text3);
    text-align: center;
}
.tg-footer-bottom a { color: var(--text3); }
.tg-footer-bottom a:hover { color: var(--text-w); }
/* Hide old footer grid */
.tg-footer-section { display: none; }
.tg-pageborder { max-width: 100%; min-width: 0; }

/* =============================================
   SINGLE POST ENHANCEMENTS (Yasir252 style)
============================================= */
.tg-post-meta-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 24px 12px;
    flex-wrap: wrap;
}
.tg-post-cat-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--text-w);
    font-size: 11px; font-weight: 700;
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 3px;
}
.tg-post-cat-sw { background: var(--blue); }
.tg-post-date { font-size: 13px; color: var(--text3); }

.tg-post-featured-img {
    margin: 0 24px 20px;
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 400px;
}
.tg-post-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.tg-post-featured-gen { max-height: 260px; background: var(--dark); }
.tg-post-featured-gen svg { width: 100%; height: 100%; }

.tg-sw-developer { font-size: 12px; color: var(--text3); margin-top: 4px; }

.tg-spec-wrap {
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
}

/* Big Download Box */
.tg-download-box {
    margin: 24px;
    background: var(--dark);
    border-radius: 8px;
    text-align: center;
    padding: 30px 24px;
    overflow: hidden;
}
.tg-download-box-header h3 {
    font-size: 18px; font-weight: 800;
    color: var(--text-w);
    margin-bottom: 6px;
}
.tg-download-box-header p {
    font-size: 13px; color: var(--text3);
    margin-bottom: 20px;
}
.tg-download-big-btn {
    display: inline-block;
    background: var(--accent);
    color: var(--text-w);
    font-size: 18px; font-weight: 900;
    padding: 14px 60px;
    border-radius: 50px;
    letter-spacing: 1px;
    transition: background .2s, transform .2s;
    text-transform: uppercase;
}
.tg-download-big-btn:hover {
    background: var(--accent2);
    transform: scale(1.03);
    color: var(--text-w);
}
.tg-download-info {
    margin-top: 16px;
    font-size: 12px; color: var(--text3);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex-wrap: wrap;
}
.tg-download-info strong { color: var(--text-w); }

/* Tags */
.tg-post-tags {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
}
.tg-post-tags-label { font-size: 13px; font-weight: 700; color: var(--text2); margin-right: 4px; }
.tg-tag {
    font-size: 12px; padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 3px; color: var(--text2);
    transition: all .15s;
}
.tg-tag:hover { border-color: var(--accent); color: var(--accent); }

/* Related Posts Grid */
.tg-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.tg-related-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.tg-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow2); }
.tg-related-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-light); }
.tg-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-related-thumb svg { width: 100%; height: 100%; }
.tg-related-title {
    padding: 10px 12px;
    font-size: 13px; font-weight: 700;
    color: var(--text); line-height: 1.4;
}

/* Post Navigation */
.tg-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.tg-post-nav-item {
    display: flex; flex-direction: column;
    padding: 16px;
    background: var(--dark);
    border-radius: var(--radius);
    color: var(--text-w);
    transition: background .15s;
}
.tg-post-nav-item:hover { background: #252a2e; }
.tg-post-nav-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: 6px; }
.tg-post-nav-title { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-w); }
.tg-post-nav-next { text-align: right; }

/* Author Box */
.tg-author-box {
    display: flex; gap: 16px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 24px;
    align-items: center;
}
.tg-author-avatar { flex-shrink: 0; }
.tg-author-avatar img { width: 80px; height: 80px; border-radius: 50%; }
.tg-author-label { font-size: 14px; color: var(--text2); margin-bottom: 6px; }
.tg-author-label strong { color: var(--text); font-size: 16px; }
.tg-author-bio { font-size: 13px; color: var(--text3); line-height: 1.5; }

/* Comments */
.tg-comments-wrap {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
}
.tg-comments-wrap h3, .tg-comments-wrap .comments-title {
    font-size: 18px; font-weight: 800; color: var(--text);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
}
.tg-comments-wrap .comment { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.tg-comments-wrap .comment:last-child { border-bottom: none; }
.tg-comments-wrap .comment-author { font-weight: 700; font-size: 14px; color: var(--text); }
.tg-comments-wrap .comment-content { font-size: 14px; color: var(--text2); line-height: 1.6; margin-top: 6px; }
.tg-comments-wrap .comment-respond { margin-top: 20px; }
.tg-comments-wrap label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.tg-comments-wrap input[type="text"],
.tg-comments-wrap input[type="email"],
.tg-comments-wrap textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 14px; font-family: var(--font);
    background: var(--white); color: var(--text);
    outline: none; margin-bottom: 12px;
    transition: border-color .15s;
}
.tg-comments-wrap input:focus, .tg-comments-wrap textarea:focus { border-color: var(--accent); }
.tg-comments-wrap .submit, .tg-comments-wrap input[type="submit"] {
    background: var(--accent); color: var(--text-w);
    border: none; border-radius: var(--radius);
    padding: 12px 28px; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: var(--font);
    transition: background .15s;
}
.tg-comments-wrap .submit:hover { background: var(--accent2); }

/* Comment section refined */
.tg-comments-section { }
.tg-comment-heading {
    font-size: 18px; font-weight: 800; color: var(--text);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
}
.tg-comment-list { list-style: none; padding: 0; margin: 0 0 20px; }
.tg-comment-list li { margin-bottom: 0; }
.tg-comment-body {
    display: flex; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.tg-comment-avatar { flex-shrink: 0; }
.tg-comment-avatar img { width: 48px; height: 48px; border-radius: 50%; }
.tg-comment-content { flex: 1; min-width: 0; }
.tg-comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.tg-comment-author { font-size: 14px; font-weight: 700; color: var(--text); }
.tg-comment-date { font-size: 12px; color: var(--text3); }
.tg-comment-reply a { font-size: 12px; color: var(--accent); font-weight: 600; }
.tg-comment-text { font-size: 14px; color: var(--text2); line-height: 1.6; }
.tg-comment-text p { margin-bottom: 8px; }

/* Category Grid Widget (sidebar) */
.tg-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tg-cat-grid-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 12px; font-weight: 600;
    color: var(--text);
    transition: all .15s;
}
.tg-cat-grid-item:hover { border-color: var(--accent); color: var(--accent); }
.tg-cat-grid-icon { font-size: 14px; }

/* Aplikasi Pilihan Widget */
.tg-app-pick-item {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.tg-app-pick-item:last-child { border-bottom: none; }
.tg-app-pick-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
}
.tg-app-pick-icon img { width: 100%; height: 100%; object-fit: contain; }
.tg-app-pick-info { flex: 1; }
.tg-app-pick-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.tg-app-pick-name a { color: var(--text); }
.tg-app-pick-name a:hover { color: var(--accent); }
.tg-app-pick-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* =============================================
   DOWNLOAD COUNTDOWN PAGE
============================================= */
.tg-dl-page {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.tg-dl-page-header {
    display: flex; gap: 16px; align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-light);
}
.tg-dl-page-icon {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border);
}
.tg-dl-page-icon img { width: 100%; height: 100%; object-fit: contain; }
.tg-dl-page-info { flex: 1; }
.tg-dl-page-name { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.tg-dl-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }

.tg-dl-page-countdown {
    text-align: center;
    padding: 40px 24px;
}
.tg-dl-ring-wrap {
    position: relative;
    display: inline-block;
    width: 100px; height: 100px;
    margin-bottom: 16px;
}
.tg-dl-countdown-num {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px; font-weight: 900;
    color: var(--accent);
    font-family: var(--heading);
}
.tg-dl-status {
    font-size: 15px; color: var(--text2);
    margin-bottom: 20px;
}
.tg-dl-page-btn {
    display: none;
    margin-bottom: 16px;
}
.tg-dl-fallback {
    display: none;
    font-size: 13px; color: var(--text3);
}
.tg-dl-fallback a { color: var(--accent); font-weight: 600; }

.tg-dl-other {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
}
.tg-dl-other h3 {
    font-size: 14px; font-weight: 700; color: var(--text);
    margin-bottom: 12px; text-transform: uppercase;
    letter-spacing: .3px;
}

.tg-dl-notice {
    padding: 14px 24px;
    background: var(--bg-light);
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text3);
    text-align: center;
}

/* =============================================
   404
============================================= */
.tg-404 { text-align: center; padding: 60px 20px; }
.tg-404 h1 { font-size: 80px; font-weight: 900; color: var(--accent); line-height: 1; }
.tg-404 h2 { font-size: 22px; color: var(--text); font-weight: 700; margin-bottom: 12px; }
.tg-404 p  { font-size: 14px; color: var(--text2); margin-bottom: 24px; }
.tg-404 a  { display: inline-flex; padding: 10px 28px; background: var(--accent); color: var(--text-w); font-weight: 700; border-radius: var(--radius); font-size: 14px; }
.tg-404 a:hover { background: var(--accent2); }

/* =============================================
   RESPONSIVE
============================================= */
/* Mobile hamburger button */
.tg-mobile-toggle {
    display: none;
    background: none; border: none;
    color: var(--text-w); font-size: 24px;
    cursor: pointer; padding: 8px;
    line-height: 1;
}

@media (max-width: 980px) {
    .tg-layout { grid-template-columns: 1fr; }
    .tg-hero   { grid-template-columns: 1fr; }
    .tg-hero-big { min-height: 240px; }
    .tg-right  { display: none; }
    .tg-lang-panel { width: calc(100vw - 40px); right: -10px; }
}

@media (max-width: 768px) {
    /* Tablet adjustments */
    .tg-games-grid { grid-template-columns: 1fr 1fr; }
    .tg-related-grid { grid-template-columns: 1fr 1fr; }
    .tg-section-heading h2 { font-size: 18px; }
    .tg-sw-title { font-size: 16px; }
    .tg-nav a { padding: 8px 10px; font-size: 12px; }
}

@media (max-width: 680px) {
    /* Mobile toggle visible */
    .tg-mobile-toggle { display: block; }

    /* Nav hidden by default, shown when toggled */
    .tg-nav { display: none; }
    .tg-nav.open { display: block; }
    .tg-nav.open .tg-nav-inner { flex-wrap: wrap; }
    .tg-nav.open a { padding: 10px 14px; flex: 0 0 50%; text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); }

    /* Header */
    .tg-logo-name { font-size: 24px; }
    .tg-logo-tag { font-size: 9px; }
    .tg-header-inner { flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }

    /* Layout */
    .tg-container { padding: 0 10px; }
    .tg-layout { gap: 16px; }

    /* Hero */
    .tg-hero-big { min-height: 200px; }
    .tg-hero-big-title { font-size: 16px; }
    .tg-hero-list-item { padding: 8px 0; }

    /* Software list */
    .tg-sw-item { flex-direction: row; gap: 12px; }
    .tg-sw-icon-box { width: 56px; height: 56px; border-radius: 8px; }
    .tg-sw-title { font-size: 15px; }
    .tg-sw-meta { font-size: 11px; }
    .tg-sw-excerpt { font-size: 12px; -webkit-line-clamp: 2; }

    /* Games grid */
    .tg-games-grid { grid-template-columns: 1fr; }

    /* Single post */
    .tg-sw-name { font-size: 18px; }
    .tg-sw-header { flex-direction: column; padding: 16px; }
    .tg-sw-content { padding: 16px; font-size: 14px; }
    .tg-sw-content h2 { font-size: 16px; }
    .tg-post-meta-bar { padding: 12px 16px 8px; }
    .tg-post-featured-img { margin: 0 16px 16px; }
    .tg-spec-wrap { padding: 0 16px; }
    .tg-post-tags { padding: 12px 16px; }

    /* Download box */
    .tg-download-box { margin: 16px; padding: 24px 16px; }
    .tg-download-big-btn { padding: 12px 36px; font-size: 15px; }

    /* Related & nav */
    .tg-related-grid { grid-template-columns: 1fr; }
    .tg-post-nav { grid-template-columns: 1fr; }
    .tg-author-box { flex-direction: column; text-align: center; padding: 16px; }

    /* Download page */
    .tg-dl-page-header { flex-direction: column; text-align: center; padding: 16px; }
    .tg-dl-page-name { font-size: 18px; }

    /* Language panel */
    .tg-lang-panel { width: calc(100vw - 20px); right: -5px; }
    .tg-lang-list { grid-template-columns: 1fr 1fr; }

    /* Category grid */
    .tg-cat-grid { grid-template-columns: 1fr; }

    /* Comment form: stack name/email */
    .tg-comments-wrap { padding: 16px; }
    #commentform > div[style*="grid-template-columns"] { display: block !important; }
    #commentform > div[style*="grid-template-columns"] > div { margin-bottom: 12px; }

    /* Footer */
    .tg-footer-bottom { font-size: 11px; padding: 12px; }

    /* Search */
    .tg-search-form button { padding: 10px 16px; }
}