/* ===================================================
   KhabarFast News Aggregator - Public Styles
   =================================================== */
:root {
  --kf-red:     #e8002d;
  --kf-dark:    #111111;
  --kf-gray-bg: #f5f5f5;
  --kf-border:  #e0e0e0;
  --kf-text:    #222222;
  --kf-muted:   #777777;
  --kf-white:   #ffffff;
  --kf-shadow:  0 2px 8px rgba(0,0,0,.08);
  --kf-radius:  6px;
}

/* === NEWS LIST === */
.kf-section-header {
  font-size: 20px; font-weight: 700; color: var(--kf-text);
  border-left: 4px solid var(--kf-red); padding: 6px 12px;
  margin-bottom: 16px; background: var(--kf-white);
}
.kf-star { color: #f5a623; }
.kf-news-list { display:flex; flex-direction:column; gap:0; }

.kf-news-card {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; background:var(--kf-white);
  border:1px solid var(--kf-border); border-bottom:none; transition:background .15s;
}
.kf-news-card:last-child { border-bottom:1px solid var(--kf-border); }
.kf-news-card:hover { background:#fafafa; }

.kf-card-thumb {
  flex-shrink:0; width:90px; height:65px; overflow:hidden;
  border-radius:var(--kf-radius); display:block;
}
.kf-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.kf-card-body { flex:1; min-width:0; }
.kf-card-title {
  display:block; font-size:15px; font-weight:600; color:var(--kf-text);
  text-decoration:none; line-height:1.4; margin-bottom:6px;
}
.kf-card-title:hover { color:var(--kf-red); }
.kf-card-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--kf-muted); }
.kf-meta-publisher {
  color:var(--kf-red); text-decoration:none; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.kf-pub-icon { height:14px; width:auto; vertical-align:middle; }

/* === SIDEBAR WIDGET === */
.kf-sidebar-widget { background:var(--kf-white); border-radius:var(--kf-radius); overflow:hidden; box-shadow:var(--kf-shadow); }
.kf-sidebar-title {
  background:var(--kf-dark); color:var(--kf-white); font-size:15px; font-weight:700;
  padding:12px 16px; text-transform:uppercase; letter-spacing:.5px;
}
.kf-publisher-list { list-style:none; margin:0; padding:0; }
.kf-pub-item { border-bottom:1px solid var(--kf-border); }
.kf-pub-link {
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  text-decoration:none; color:var(--kf-text); font-size:14px; font-weight:500; transition:background .15s,color .15s;
}
.kf-pub-link:hover, .kf-pub-item.kf-active .kf-pub-link { background:var(--kf-red); color:var(--kf-white); }
.kf-pub-logo { height:18px; width:auto; }

.kf-sidebar-news { background:var(--kf-white); }
.kf-sidebar-news-header {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#f0f0f0; border-bottom:1px solid var(--kf-border);
}
.kf-sidebar-back { background:none; border:none; cursor:pointer; color:var(--kf-red); font-weight:700; font-size:16px; }
.kf-sidebar-pub-name { font-weight:600; font-size:13px; }
.kf-sidebar-item { border-bottom:1px solid var(--kf-border); }
.kf-sidebar-item-link { display:flex; gap:10px; padding:10px 12px; text-decoration:none; align-items:flex-start; }
.kf-sidebar-item-link:hover { background:#f9f9f9; }
.kf-sidebar-item-img { width:56px; height:40px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.kf-sidebar-item-info { flex:1; min-width:0; }
.kf-sidebar-item-title { display:block; font-size:12px; font-weight:600; color:var(--kf-text); line-height:1.4; margin-bottom:3px; }
.kf-sidebar-item-time { font-size:11px; color:var(--kf-muted); }

/* === SINGLE NEWS PAGE === */
.kf-single-wrap {
  display:flex; gap:24px; max-width:1100px; margin:20px auto; padding:0 16px; align-items:flex-start;
}
.kf-single-sidebar { width:220px; flex-shrink:0; position:sticky; top:80px; }
.kf-single-main { flex:1; min-width:0; }
.kf-single-card { background:var(--kf-white); border-radius:var(--kf-radius); box-shadow:var(--kf-shadow); overflow:hidden; padding:0 0 20px; }

.kf-ad-slot { background:#f8f8f8; border:1px dashed #ccc; text-align:center; padding:28px 16px; margin:16px 0; }
.kf-ad-label { font-size:12px; color:#aaa; }

.kf-single-publisher-badge { display:flex; align-items:center; gap:8px; padding:16px 20px 4px; font-size:13px; color:var(--kf-red); font-weight:600; }
.kf-badge-logo { height:20px; width:auto; }
.kf-single-title { font-size:22px; font-weight:800; color:var(--kf-dark); line-height:1.35; padding:8px 20px 12px; margin:0; }
.kf-single-image-wrap { width:100%; max-height:420px; overflow:hidden; }
.kf-single-image { width:100%; height:auto; max-height:420px; object-fit:cover; display:block; }
.kf-single-content { padding:16px 20px; font-size:15px; line-height:1.7; color:#333; }
.kf-single-content p { margin:0 0 10px; }

/* Redirect Box */
.kf-redirect-box {
  display:flex; align-items:center; gap:20px; margin:16px 20px; padding:16px 20px;
  border:2px solid var(--kf-border); border-radius:10px; background:#fff8f8;
}
.kf-countdown-ring { position:relative; width:72px; height:72px; flex-shrink:0; }
.kf-ring-svg { width:72px; height:72px; transform:rotate(-90deg); }
.kf-ring-bg { fill:none; stroke:#eee; stroke-width:6; }
.kf-ring-progress {
  fill:none; stroke:var(--kf-red); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:213.6; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear;
}
.kf-countdown-num {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:20px; font-weight:800; color:var(--kf-red);
}
.kf-redirect-msg { font-size:14px; font-weight:500; color:var(--kf-text); margin:0 0 4px; }
.kf-redirect-sub { font-size:12px; color:var(--kf-muted); margin:0; }

.kf-read-now-btn {
  display:block; margin:0 20px 8px; padding:16px 24px; background:var(--kf-red);
  color:var(--kf-white) !important; text-align:center; font-size:17px; font-weight:700;
  text-decoration:none; border-radius:8px; transition:background .2s,transform .1s;
}
.kf-read-now-btn:hover { background:#c8001f; transform:translateY(-1px); }

@media(max-width:768px){
  .kf-single-wrap { flex-direction:column; }
  .kf-single-sidebar { width:100%; position:static; }
  .kf-single-title { font-size:18px; }
  .kf-card-thumb { width:72px; height:52px; }
}