/*
Theme Name: Opseques Blog
Theme URI:
Author: Celebi Selli
Author URI: https://www.r10.net/wordpress-temalari/4202701-dunyanin-en-hizli-wordpress-temasi-v3-128640-300-000-tl-kazanmama-yardimci-olan-tema.html
Description: Seo compatible and fast wordpress blog/magazine theme.
Version: 4.0
*/

/* ===== Base Reset ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: #f5f5f5;
    margin: 0 auto !important;
    padding: 64px 0 0 0;
    color: #333;
    max-width: 100%;
}

a { text-decoration: none; color: #333; }
img { max-width: 100%; height: auto; }
ul { list-style: none; padding: 0; margin: 0; }
.icerik ul, .entry-content ul, #content ul, .post-text ul { padding: 0 15px; }
.icerik ul li::before, .entry-content ul li::before, #content ul li::before, .post-text ul li::before { content: "\2022"; color: #0db1e7; font-weight: 700; display: inline-block; width: 25px; font-size: 48px; position: relative; left: 0; top: 10px; }
iframe { max-width: 100%; }

/* ===== Typography ===== */
p {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #4b5563;
    line-height: 1.7;
    display: block;
}
h1 { font-size: 28px; margin: 20px 0; }
h2 { font-size: 25px; margin: 35px 0 15px; }
h3 { font-size: 22px; margin: 35px 0 15px; }
h4 { font-size: 19px; margin: 35px 0 15px; }
h5 { font-size: 16px; margin: 35px 0 15px; }
h6 { font-size: 14px; margin: 35px 0 15px; }
.icerik li, .entry-content li, #content li, .post-text li { line-height: 22px; margin: 15px 0; color: #2c2f34; }

/* Headings styling */
h2, h3, h4, h5, h6, .popularhaber, h3#reply-title, h3.relatedpost {
    display: flex;
    padding: 10px 0 10px 20px;
    border-left: 4px solid #0db1e7;
    background-color: #f8f9fa;
    max-width: 900px;
    box-shadow: none;
    font-weight: 600;
    color: #111827 !important;
    border-radius: 4px;
    margin: 1.5rem 0;
}

/* ===== Layout Container ===== */
.icerikler {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
.icerik {
    max-width: 900px;
    width: 100%;
    float: left;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
}
div#primary { display: flex; }

/* Content wrapper for homepage */
.icerikler {
    float: none !important;
    max-width: 1200px;
}

/* Header spacing is set in body above (padding-top: 64px) */

/* ===== Post List (Category/Homepage) ===== */
.post-wrap {
    display: flex !important;
    align-items: center;
    gap: 15px;
    height: auto !important;
    max-height: none !important;
    padding: 15px !important;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 10px 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s;
    clear: both;
    width: inherit;
}
.post-wrap:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.post-wrap .fipost {
    float: none;
}
.post-wrap .post-text {
    flex: 1;
    min-width: 0;
}
.post-wrap .post-text .h2tit {
    display: block;
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}
.post-wrap .post-text .postdesc {
    margin-bottom: 8px;
}
.post-wrap .post-text .postdesc p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

/* Brand logo thumbnail */
.fipost {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.fipost img.brand-logo-thumb {
    width: 130px;
    height: 90px;
    object-fit: contain;
}
img.attachment-post-thumb.size-post-thumb.wp-post-image {
    max-width: 100%;
    height: auto;
}

/* ===== Featured Image ===== */
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image { max-width: 100%; }

/* ===== Read More Button ===== */
a.more-link {
    background: #0db1e7;
    padding: 6px 14px;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.2s;
    margin: 0;
}
a.more-link:hover {
    background: #0a9dd0;
}

/* ===== Pagination ===== */
.page-nav-container { clear: both; text-align: center; margin: 25px 0 30px; }
span.page-numbers.current {
    background-color: #0db1e7;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    margin: 15px 3px;
    display: inline-block;
}
a.page-numbers {
    color: #333;
    padding: 6px 12px;
    border-radius: 4px;
    margin: 15px 3px;
    display: inline-block;
    border: 1px solid #ddd;
    transition: border-color 0.2s;
}
a.page-numbers:hover {
    border-color: #0db1e7;
    color: #0db1e7;
}

/* ===== Breadcrumb ===== */
.breadcrumb { font-size: 13px; line-height: 20px; padding: 10px 2px 10px 0; }
a.breada { color: #0db1e7; }
a.breadcrumb { color: #666; }

/* ===== Back to Top ===== */
.top {
    --offset: 50px;
    position: sticky;
    bottom: 70px;
    margin-left: 100%;
    place-self: end;
    margin-top: calc(100vh + var(--offset));
    text-decoration: none;
    padding: 8px 10px;
    font-family: sans-serif;
    color: #fff;
    background: #000;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 16px;
    z-index: 50;
}

/* ===== Sidebar ===== */
.sidebar { float: right; width: 320px; margin: 0 0 0 20px; display: block !important; }
.right-sidebar { margin: 8px 0 0; }
h2.widget-title {
    box-shadow: none;
    font-size: 16px;
    margin: 1.5rem 0 1rem;
    border-left-color: #0db1e7;
    background: #f8f9fa;
}
.custom-selected-posts-widget {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.custom-selected-posts-widget .widget-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #333; }
.custom-selected-posts { list-style: none; margin: 21px 0 0; padding: 0; }
.custom-selected-posts li {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
    padding-bottom: 12px;
    display: block;
    align-items: center;
    transition: background-color 0.2s;
}
.custom-selected-posts li:hover { background-color: #f8f9fa; }
.custom-selected-posts .selected-post-thumbnail { margin-right: 15px; flex-shrink: 0; float: left; }
.custom-selected-posts .selected-post-thumbnail img { width: 110px; height: 75px; border-radius: 4px; object-fit: cover; }
.custom-selected-posts .selected-post-content { flex: 1; display: block; }
.custom-selected-posts .selected-post-title { font-family: system-ui; font-size: 13px; font-weight: 500; display: block; margin-bottom: 5px; }
.custom-selected-posts .selected-post-title:hover { text-decoration: underline; }
.custom-selected-posts .selected-post-date { font-size: 12px; color: #666; text-align: left; }
li.xx::before { display: none; }

/* ===== Comments ===== */
.comment { margin: 20px 0; border: 1px solid #e5e7eb; padding: 10px; border-radius: 6px; }
ol.comment-list { padding: 0; }
.comment-meta.commentmetadata { display: none; }
.comment-author.vcard { margin: 5px 0 0; }
img.avatar { max-width: 30px; max-height: 30px; margin: -8px 0; }
h3#reply-title { padding: 10px 0 10px 20px; border-radius: 4px; background-color: #f8f9fa !important; }
a.comment-reply-link { background-color: #0db1e7; color: #fff; padding: 5px 10px; border-radius: 4px; margin: 0 0 10px; display: inline-block; }
span.says { display: none; }
a.url { color: #111827 !important; font-size: 20px; font-weight: 200; }
textarea#comment { width: 80%; border: 1px solid #ddd; border-radius: 4px; }
p.comment-notes { font-size: 13px; line-height: 30px; }
p.comment-form-cookies-consent { font-size: 13px; display: flex; line-height: 30px; }
p.comment-form-author, p.comment-form-email, p.comment-form-url, p.form-submit { margin: 15px 0; }
input#submit {
    background-color: #0db1e7;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    display: inline-block;
    border: none;
    font-size: initial;
    height: 45px !important;
    cursor: pointer;
}
#respond > p > a, p.must-log-in { color: #333; }
label { display: block; }
input { height: 26px; border: 1px solid #ddd; border-radius: 4px; }

/* ===== Table ===== */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5em; border-radius: 8px; overflow: hidden; }
thead { background-color: #111827; color: #fff; text-align: center; }
th { font-weight: 700; padding: 12px 16px; border: 1px solid #ddd; }
tbody { background-color: #fff; }
tr { border: 1px solid #ddd; transition: background-color 0.2s; }
tr:nth-child(even) { background: rgba(0,0,0,0.02); }
tr:hover { background-color: #f0f2f5 !important; }
table td, table th { padding: .5em; text-align: left; border-right: 1px dotted rgba(0,0,0,0.1); }
table tbody td, .entry table tbody th { border: 1px solid rgba(0,0,0,0.1); }
.wp-block-table table { margin: 20px auto; }

/* ===== Misc ===== */
.postdesc { color: #666; padding: 0; line-height: 20px; font-size: 13px; }
.postdesc p { color: #666; padding: 0; line-height: 22px; font-size: 14px; display: block; margin: 8px 0; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
span.entry-date { font-size: 13px; color: #999; display: inherit; margin: 10px 0; }
img.custom-logo { max-width: 300px; max-height: 100px; float: left; margin: 20px 0 10px 5px; }
.saat { width: 16px; height: 16px; margin: 0 5px -2px 0; }
.homeic { width: 14px; height: 14px; margin: 0 5px -1px 0; }
.alignright { float: right; margin: 0 0 10px 20px; }
.alignleft { float: left; margin: 0 20px 10px 0; }
.aligncenter { display: block; margin: 0 auto 1px; clear: both; }
.wp-caption { max-width: 100%; }
.wp-caption p.wp-caption-text { font-size: 12px; font-style: italic; line-height: 20px; padding: 0 5px; margin: 5px 0; }
.post-wrap .post-text { text-align: left; }
.js-rmp-rating-item:before { content: unset; }
.menu-item { text-transform: uppercase !important; font-size: 15px; font-weight: 600; }
.menu-item::before { display: none; }
button.searchbutton { display: contents; }
img.searchicon { margin: 4px 0 -8px -33px; position: absolute; width: 20px; height: 20px; border: none; }
input#search { height: 26px; border: 1px solid rgba(0,0,0,.1); border-radius: 5px; }
form.searchbox { margin: auto; float: right; }

/* Old footer (hidden - replaced by tr-footer) */
.footerc { display: none; }

/* ===== Inline Related Post ===== */
.inline-related-post {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-left: 4px solid #0db1e7;
    padding: 10px 15px;
    margin: 20px 0;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-radius: 0 6px 6px 0;
}
.inline-related-post .related-toggle { font-weight: 700; color: #333; margin-right: 10px; }
.inline-related-post .related-link { color: #0db1e7; text-decoration: none; font-weight: 700; transition: color 0.2s; }
.inline-related-post .related-link:hover { color: #0a9dd0; text-decoration: underline; }

/* ===== Ad Containers ===== */
.ad-middle-content, .ad-before-content, .ad-in-content, .after-content-ad, .header-ad {
    max-height: 300px;
    overflow: hidden;
    margin: 15px 0;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
.opseques-reklam-header { margin: 10px 0; }

/* Share buttons */
.pysdiv { height: 36px; max-width: 900px; }
.paylasbuton { padding: 3px; display: flex; width: 32px; float: left; margin: -4px 10px 0 0; }
.xtwt { margin: 3px 0 3px 2px; }
.paylas { margin: 0 10px; padding: 3px 5px; display: table-caption; }
.whatsp { padding: 0; display: flex; width: 38px; float: left; margin: -4px 10px 0 0; }
.spandivshare { border: 1px solid #e0e0e0; padding: 6px; display: flex; width: 96px; float: left; margin: -4px 10px 0 0; }

/* Related posts */
.relatedpost { padding: 15px 10px; border-radius: 4px; background-color: #f8f9fa !important; }
h3.relatedpost { margin: 40px 0 20px 5px !important; }
.related-post { width: 274px; height: unset; margin: 7px 5px; padding: 7px 7px 13px; display: inline-grid; }
.rposts { max-width: 900px; }
.rand-title { margin: 8px 0 0; font-size: 17px; display: block; font-weight: 600; }
.default-content-display { display: flex; flex-direction: column; gap: 0; }

/* Print */
@media only print and (min-width: 1px) {
    .tr-header, .breadcrumb { display: none; }
}

/* ===== Responsive ===== */
@media only screen and (min-width: 972px) {
    a.footertext { padding: 0 1px 0 106px; }
    .post-wrap { margin: 8px 0; }
    div#respond { border: 1px solid #e5e7eb; margin: 20px 0; padding: 10px 25px; border-radius: 8px; }
    .h2tit { margin: 10px 0 0; font-size: 18px; font-weight: 600; display: inline-block; max-width: 600px; text-overflow: ellipsis; overflow: hidden; }
    div#content { border: 1px solid #e5e7eb; padding: 10px 20px; margin: 10px 0 25px; max-width: 900px; border-radius: 8px; }
    .rposts { max-width: 900px; float: left; }
    div#comments { max-width: 900px; float: left; }
    .fipost { margin: 0; }
}

@media only screen and (max-width: 971px) {
    .top { margin-left: 90%; }
    .titlecat { margin: 20px 10px; }
    form.searchbox { margin: 25px 0 35px 10px; height: 20px; float: initial; text-align: center; }
}

@media only screen and (max-width: 1250px) {
    .sidebar { float: inherit !important; margin: 20px auto !important; width: 100%; max-width: 900px; }
}

@media only screen and (max-width: 1300px) {
    .post-wrap { margin: 8px auto !important; max-width: 100% !important; }
    .icerikler { margin: 0 auto; }
    .h2tit { white-space: unset !important; }
}

@media only screen and (max-width: 768px) {
    body { padding-top: 58px; }
    .featured-image[style*="float: right;"] { float: unset !important; }
    .post-wrap { display: flex !important; height: unset !important; max-height: fit-content !important; }
    .icerikler { text-align: center; }
    .icerik { padding: 15px; }
    .fipost { width: 120px; height: 120px; }
    .custom-selected-posts li { flex-direction: column; align-items: flex-start; }
    .inline-related-post { flex-direction: column; align-items: flex-start; }
    .inline-related-post .related-toggle { margin-bottom: 5px; }
    .relatedpost { padding: 15px 10px; max-width: 90%; margin: 30px 10px 20px 13px; }
    .related-post { width: 274px; margin: 15px 0; padding: 0; border: none; }
    .rposts { max-width: 274px; margin: 0 auto; float: initial; }
    table td, table th { padding: 10px; overflow-wrap: anywhere; }
    h3#reply-title { display: inline-block !important; width: 277px; }
}

@media only screen and (max-width: 480px) {
    .post-wrap { flex-direction: column; }
    .fipost { width: 100%; height: 140px; }
    .icerik { margin: 0; width: 100%; }
}

@media only screen and (max-width: 320px) {
    body { width: 100% !important; }
    .right-sidebar { display: inline-block !important; max-width: 90% !important; }
    .sidebar { max-width: 90% !important; }
}

@media only screen and (min-width: 769px) {
    .featured-image[style*="float: left;"] { margin: 0 15px 0 0; }
    .featured-image[style*="float: right;"] { margin: 0 0 0 15px; }
    li.menu-item.menu-item-type-taxonomy.menu-item-object-category.searchhhh { margin: auto; }
    form.searchbox { margin: 0 auto; }
}

@media only screen and (min-width: 1236px) {
    body { padding: 64px 0 0; }
}

@media only screen and (max-width: 1236px) {
    .icerikler { float: unset !important; margin: 0 auto !important; }
}

/* Grid layout */
@media (min-width: 1300px) {
    .ozel-icerik-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 10px 0 50px; }
}

@media screen and (max-width: 600px) {
    table { width: 100%; overflow-x: auto; }
    th, td { padding: 8px 12px; }
}

aside#search-2 { display: grid; }
ul.sub-menu { max-width: 100%; }

/* ===== Hero Section ===== */
.hero-section {
    background: #000;
    color: #fff;
    padding: 50px 20px 45px;
    text-align: center;
}
.hero-inner {
    max-width: 700px;
    margin: 0 auto;
}
.hero-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block;
    max-width: none;
}
.hero-subtitle {
    font-size: 16px;
    color: #adb5bd;
    margin: 0 0 28px;
    line-height: 1.5;
}
.hero-search {
    display: flex;
    max-width: 500px;
    margin: 0 auto 20px;
}
.hero-search input {
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 15px;
    outline: none;
    height: auto;
}
.hero-search button {
    padding: 12px 24px;
    background: #0db1e7;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}
.hero-search button:hover {
    background: #0a9dd0;
}
.hero-popular {
    font-size: 14px;
    color: #6c757d;
}
.hero-popular a {
    color: #0db1e7;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.hero-popular a:hover {
    color: #fff;
}
.hero-sep {
    margin: 0 6px;
    color: #555;
}

/* ===== Section Titles ===== */
.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827 !important;
    margin: 0 0 20px;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    max-width: none;
}

/* ===== Featured Brands Grid ===== */
.featured-brands {
    margin: 30px 0;
}
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.featured-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.featured-card-logo {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    padding: 16px;
}
.featured-card-logo img {
    max-height: 80px;
    max-width: 140px;
    object-fit: contain;
}
.featured-card-info {
    padding: 16px;
}
.featured-card-info h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    display: block;
    max-width: none;
}
.featured-card-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
}
.featured-score {
    color: #22c55e;
    font-weight: 700;
}
.featured-tires {
    color: #6b7280;
}
.featured-cta {
    color: #0db1e7;
    font-weight: 600;
    font-size: 13px;
}

/* ===== Tier Sections ===== */
.tier-sections {
    margin: 30px 0 35px;
}
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.tier-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
}
.tier-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    max-width: none;
}
.tier-count {
    color: #6b7280;
    font-weight: 400;
    font-size: 14px;
}
.tier-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.tier-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    margin: 0;
}
.tier-list li::before {
    display: none !important;
}
.tier-list li a {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.tier-list li a:hover {
    color: #0db1e7;
}
.tier-view-all {
    display: inline-block;
    color: #0db1e7;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.tier-view-all:hover {
    text-decoration: underline;
}

/* ===== Article Two-Column Layout ===== */
.article-layout {
    display: flex;
    gap: 24px;
    max-width: 1060px;
    margin: 0 auto;
}
.article-main {
    flex: 1;
    min-width: 0;
    max-width: 720px;
}
.article-sidebar {
    width: 280px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 80px;
}
.sidebar-widget {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.sidebar-widget h4 {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 2px solid #0db1e7;
    border-left: none;
    background: none;
    box-shadow: none;
    display: block;
    max-width: none;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.stat-row:last-child {
    border-bottom: none;
}
.stat-label {
    color: #6b7280;
    font-weight: 500;
}
.stat-value {
    font-weight: 600;
    color: #111827;
}
.score-badge {
    color: #22c55e;
    font-weight: 700;
}
.tier-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.tier-premium { background: #fef3c7; color: #92400e; }
.tier-midrange { background: #dbeafe; color: #1e40af; }
.tier-budget { background: #d1fae5; color: #065f46; }

.sidebar-competitors ul,
.sidebar-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-competitors li,
.sidebar-related li {
    margin: 0;
    padding: 0;
}
.sidebar-competitors li::before,
.sidebar-related li::before {
    display: none !important;
}
.sidebar-competitors li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}
.sidebar-competitors li:last-child a {
    border-bottom: none;
}
.sidebar-competitors li a:hover {
    color: #0db1e7;
}
.comp-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    background: #f8f9fa;
}
.sidebar-related li a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}
.sidebar-related li:last-child a {
    border-bottom: none;
}
.sidebar-related li a:hover {
    color: #0db1e7;
}

/* ===== Performance Bars ===== */
.perf-bars {
    margin: 1.5rem 0;
}
.perf-bars h2 {
    max-width: none;
}
.perf-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}
.perf-bar-label {
    width: 120px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    flex-shrink: 0;
}
.perf-bar-track {
    flex: 1;
    height: 24px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.perf-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.perf-bar-fill.green { background: #22c55e; }
.perf-bar-fill.yellow { background: #f59e0b; }
.perf-bar-fill.red { background: #ef4444; }
.perf-bar-value {
    width: 40px;
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: #111827;
    flex-shrink: 0;
}

/* ===== Category Grid Cards ===== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    text-align: center;
}
.cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.cat-card-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px;
}
.cat-card-logo img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}
.cat-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.cat-card-country {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}
.cat-card-score {
    font-size: 14px;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 4px;
}
.cat-card-tires {
    font-size: 12px;
    color: #9ca3af;
}

/* Filter Pills */
.filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
.filter-pill {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s;
    background: #fff;
}
.filter-pill:hover,
.filter-pill.active {
    background: #0db1e7;
    color: #fff;
    border-color: #0db1e7;
}

/* ===== Responsive: Featured/Hero/Tier ===== */
@media (max-width: 768px) {
    .hero-section { padding: 35px 16px 30px; }
    .hero-title { font-size: 24px; }
    .hero-subtitle { font-size: 14px; }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .tier-grid { grid-template-columns: 1fr; }
    .article-layout { flex-direction: column; }
    .article-sidebar { width: 100%; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .perf-bar-label { width: 90px; font-size: 12px; }
}
@media (max-width: 480px) {
    .featured-grid { grid-template-columns: 1fr; }
    .hero-search { flex-direction: column; }
    .hero-search input { border-radius: 6px; margin-bottom: 8px; }
    .hero-search button { border-radius: 6px; }
    .cat-grid { grid-template-columns: 1fr; }
}