/*
Theme Name: AngkaNet Lottery
Theme URI: https://angkanet.com
Author: AngkaNet Team
Author URI: https://angkanet.com
Description: Theme profesional untuk situs keluaran angka/togel dengan fitur auto-update hasil, paito warna, dan artikel AI. Terintegrasi penuh dengan plugin AngkaNet Results dan AI Articles.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: angkanet
Tags: lottery, togel, results, angka, paito
*/

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red-primary: #c0392b;
  --header-h: 130px; /* tinggi header sticky (header+nav+ticker) */
  --red-dark: #96281b;
  --red-hover: #e74c3c;
  --bg-dark: #1a1a2e;
  --bg-card: #16213e;
  --bg-table-head: #c0392b;
  --bg-table-alt: #f9f9f9;
  --text-light: #ffffff;
  --text-muted: #b0b0b0;
  --border-color: #e0e0e0;
  --ball-blue: #2980b9;
  --ball-gray: #7f8c8d;
  --ball-red: #c0392b;
  --ball-green: #27ae60;
  --ball-gold: #f39c12;
  --shadow: 0 2px 15px rgba(0,0,0,0.1);
  --radius: 6px;
  --transition: all 0.3s ease;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f0f0f0;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--red-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--red-hover); }
img { max-width: 100%; height: auto; }

/* ==========================================
   LAYOUT WRAPPER
   ========================================== */
.angkanet-wrapper { max-width: 960px; margin: 0 auto; padding: 0 15px; }
.angkanet-container { display: flex; gap: 20px; padding: 20px 0; }
.angkanet-main { flex: 1; min-width: 0; }
.angkanet-sidebar {
  width: 280px;
  flex-shrink: 0;
  /* Sticky desktop: sidebar diam saat konten di-scroll */
  position: sticky;
  top: var(--header-h, 130px); /* offset sesuai tinggi header */
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}
.angkanet-sidebar::-webkit-scrollbar { display: none; } /* Chrome */

/* ==========================================
   HEADER
   ========================================== */
#angkanet-header {
  background: linear-gradient(135deg, var(--red-dark) 0%, var(--red-primary) 50%, #e74c3c 100%);
  color: white;
  padding: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-top {
  background: rgba(0,0,0,0.2);
  padding: 6px 0;
  font-size: 12px;
  text-align: center;
  letter-spacing: 1px;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.site-logo .logo-icon {
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-primary);
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.site-tagline {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 400;
  display: block;
  letter-spacing: 0.5px;
}

/* ==========================================
   NAVIGATION
   ========================================== */
#angkanet-nav {
  background: var(--red-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
}

#angkanet-nav .angkanet-wrapper { padding: 0 15px; }

.nav-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.nav-menu > li > a {
  display: block;
  color: white;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: var(--transition);
  border-right: 1px solid rgba(255,255,255,0.1);
  text-transform: uppercase;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* ==========================================
   TICKER / MARQUEE
   ========================================== */
.angkanet-ticker {
  background: #333;
  color: #ffd700;
  padding: 8px 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}

.ticker-label {
  background: var(--red-primary);
  color: white;
  padding: 2px 12px;
  margin-right: 15px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

/* ==========================================
   KETERANGAN WARNA (Color Legend)
   ========================================== */
.keterangan-warna {
  background: white;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.keterangan-warna h3 {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  font-weight: 600;
}

.keterangan-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.badge-updated { background: var(--red-primary); color: white; padding: 5px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.badge-pending { background: #7f8c8d; color: white; padding: 5px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.badge-holiday { background: #e74c3c; color: white; padding: 5px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; }

/* ==========================================
   RESULTS TABLE
   ========================================== */
.results-section {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
}

.results-table thead th {
  background: var(--red-primary);
  color: white;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.results-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.results-table tbody tr:hover { background: #fff5f5; }

.results-table tbody tr:last-child { border-bottom: none; }

.col-market {
  width: 45%;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
}

.col-date {
  width: 25%;
  padding: 12px 10px;
  text-align: center;
  font-size: 13px;
  color: #555;
}

.col-result {
  width: 30%;
  padding: 12px 10px;
  text-align: center;
}

/* Market Button Style */
.market-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--red-primary);
  color: white;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--transition);
}

.market-btn:hover { background: var(--red-hover); }
.market-btn .arrow { font-size: 10px; opacity: 0.8; }

/* Status Colors */
.status-updated .market-btn { background: var(--red-primary); }
.status-pending .market-btn { background: #7f8c8d; }
.status-holiday .market-btn { background: #e74c3c; }

/* ==========================================
   LOTTERY BALLS
   ========================================== */
.lottery-balls {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.lottery-ball {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3);
  position: relative;
  flex-shrink: 0;
}

.ball-blue { background: radial-gradient(circle at 35% 35%, #5dade2, #1a5276); }
.ball-gray { background: radial-gradient(circle at 35% 35%, #aab7b8, #566573); }
.ball-red  { background: radial-gradient(circle at 35% 35%, #e74c3c, #7b241c); }
.ball-gold { background: radial-gradient(circle at 35% 35%, #f9ca24, #b7950b); }
.ball-green{ background: radial-gradient(circle at 35% 35%, #2ecc71, #1a6b3a); }
.ball-purple{ background: radial-gradient(circle at 35% 35%, #9b59b6, #4a235a); }

.draw-time {
  font-size: 11px;
  color: #888;
  display: block;
  margin-top: 3px;
}

/* ==========================================
   DATE FILTER
   ========================================== */
.date-filter-bar {
  background: white;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}

.date-filter-bar label { font-size: 13px; font-weight: 600; color: #555; }
.date-filter-bar input[type="date"] {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}

.btn-filter {
  background: var(--red-primary);
  color: white;
  border: none;
  padding: 7px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-filter:hover { background: var(--red-hover); }
.btn-today { background: #27ae60; }
.btn-today:hover { background: #1e8449; }

/* ==========================================
   LIVE INDICATOR
   ========================================== */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e74c3c;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.live-dot {
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
  display: inline-block;
}

/* ==========================================
   SIDEBAR
   ========================================== */
.sidebar-widget {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.widget-title {
  background: var(--red-primary);
  color: white;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.widget-body { padding: 15px; }

.sidebar-menu li {
  list-style: none;
  border-bottom: 1px solid #f0f0f0;
}

.sidebar-menu li:last-child { border-bottom: none; }

.sidebar-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  color: #333;
  font-size: 13px;
  transition: var(--transition);
}

.sidebar-menu li a:hover { color: var(--red-primary); padding-left: 5px; }
.sidebar-menu li a::before { content: "▶"; color: var(--red-primary); font-size: 8px; }

/* ==========================================
   ARTICLES / BLOG
   ========================================== */
.post-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  transition: var(--transition);
}

.post-card:hover { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(0,0,0,0.15); }

.post-card-header {
  background: var(--red-primary);
  padding: 3px 0;
}

.post-card-body { padding: 20px; }

.post-category {
  display: inline-block;
  background: var(--red-primary);
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.post-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.post-title a { color: #222; }
.post-title a:hover { color: var(--red-primary); }

.post-excerpt { color: #666; font-size: 14px; line-height: 1.7; margin-bottom: 15px; }

.post-meta { font-size: 12px; color: #999; display: flex; gap: 15px; align-items: center; }
.post-meta span { display: flex; align-items: center; gap: 4px; }

.btn-readmore {
  display: inline-block;
  background: var(--red-primary);
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  margin-top: 10px;
}
.btn-readmore:hover { background: var(--red-hover); color: white; }

/* ==========================================
   PAITO / COLOR TABLE
   ========================================== */
.paito-section { margin-bottom: 20px; }

.paito-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.paito-table th {
  background: var(--red-primary);
  color: white;
  padding: 8px 5px;
  text-align: center;
  font-size: 11px;
}

.paito-table td {
  padding: 5px;
  text-align: center;
  border: 1px solid #eee;
  font-weight: 700;
  font-size: 13px;
  cursor: default;
  transition: transform 0.1s;
}

.paito-table td:hover { transform: scale(1.1); }

/* Paito colors based on digit */
.p0 { background: #e74c3c; color: white; }
.p1 { background: #e67e22; color: white; }
.p2 { background: #f1c40f; color: #333; }
.p3 { background: #2ecc71; color: white; }
.p4 { background: #1abc9c; color: white; }
.p5 { background: #3498db; color: white; }
.p6 { background: #9b59b6; color: white; }
.p7 { background: #e91e63; color: white; }
.p8 { background: #795548; color: white; }
.p9 { background: #607d8b; color: white; }

/* ==========================================
   LOADING SPINNER
   ========================================== */
.angkanet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 10px;
  color: #888;
}

.spinner {
  width: 24px; height: 24px;
  border: 3px solid #ddd;
  border-top-color: var(--red-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================
   PAGINATION
   ========================================== */
.angkanet-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 20px 0;
}

.angkanet-pagination a,
.angkanet-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  transition: var(--transition);
}

.angkanet-pagination a:hover,
.angkanet-pagination .current {
  background: var(--red-primary);
  color: white;
  border-color: var(--red-primary);
}

/* ==========================================
   FOOTER
   ========================================== */
#angkanet-footer {
  background: #1a1a1a;
  color: #ccc;
  padding: 40px 0 0;
  margin-top: 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.footer-widget h4 {
  color: white;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red-primary);
}

.footer-widget ul { list-style: none; }
.footer-widget ul li { margin-bottom: 8px; }
.footer-widget ul li a { color: #aaa; font-size: 13px; transition: var(--transition); }
.footer-widget ul li a:hover { color: white; padding-left: 5px; }

.footer-bottom {
  background: #111;
  padding: 15px 0;
  text-align: center;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #333;
}

.footer-bottom a { color: var(--red-primary); }

/* ==========================================
   BREADCRUMB
   ========================================== */
.angkanet-breadcrumb {
  background: white;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #888;
  margin-bottom: 0;
}

.angkanet-breadcrumb a { color: var(--red-primary); }
.angkanet-breadcrumb span { margin: 0 5px; }

/* ==========================================
   ADMIN BAR ADJUSTMENT
   ========================================== */
.admin-bar #angkanet-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #angkanet-header { top: 46px; } }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  .angkanet-container { flex-direction: column; }
  .angkanet-sidebar {
    width: 100%;
    position: static; /* matikan sticky di mobile */
    max-height: none;
    overflow-y: visible;
    top: auto;
  }
  .header-main { flex-direction: column; gap: 8px; text-align: center; }
  .nav-menu { justify-content: center; }
  .nav-menu > li > a { padding: 10px 10px; font-size: 11px; }
  .lottery-ball { width: 30px; height: 30px; font-size: 12px; }
  .col-market { font-size: 12px; }
  .date-filter-bar { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .lottery-ball { width: 26px; height: 26px; font-size: 11px; }
  .results-table thead th { font-size: 12px; padding: 10px 8px; }
  .site-logo { font-size: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   WORDPRESS DEFAULT WIDGETS — FULL STYLED
   Menimpa semua tampilan polos default WP
   ========================================== */

/* ── Base: semua .widget di sidebar ── */
.angkanet-sidebar .widget,
#secondary .widget,
.widget_search,
.widget_recent_entries,
.widget_recent_comments,
.widget_categories,
.widget_archive,
.widget_tag_cloud,
.widget_nav_menu,
.widget_text,
.widget_rss,
.widget_calendar,
.widget_meta,
.widget_pages {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 18px;
    border: 1px solid #f0f0f0;
    position: relative;
}

/* ── Judul widget: bar merah di atas ── */
.angkanet-sidebar .widget-title,
.angkanet-sidebar .widgettitle,
#secondary .widget-title,
#secondary .widgettitle,
.widget_search .widget-title,
.widget_recent_entries .widget-title,
.widget_recent_comments .widget-title,
.widget_categories .widget-title,
.widget_archive .widget-title,
.widget_tag_cloud .widget-title,
.widget_nav_menu .widget-title,
.widget_text .widget-title,
.widget_rss .widget-title,
.widget_calendar .widget-title,
.widget_meta .widget-title,
.widget_pages .widget-title {
    background: linear-gradient(135deg, var(--red-dark) 0%, var(--red-primary) 100%);
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 11px 16px !important;
    margin: 0 !important;
    border-bottom: 2px solid rgba(0,0,0,0.12);
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Garis aksen kiri judul */
.angkanet-sidebar .widget-title::before,
.angkanet-sidebar .widgettitle::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Segitiga dekoratif sudut kanan bawah judul */
.angkanet-sidebar .widget-title::after,
.angkanet-sidebar .widgettitle::after {
    content: "";
    position: absolute;
    right: 0; bottom: -8px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--red-dark);
    display: none; /* aktifkan jika suka */
}

/* ── Padding konten widget ── */
.angkanet-sidebar .widget > *:not(.widget-title):not(.widgettitle),
#secondary .widget > *:not(.widget-title):not(.widgettitle) {
    padding: 12px 15px;
}

/* ==========================================
   WIDGET: SEARCH
   ========================================== */
.widget_search {
    position: relative;
}

.widget_search .search-form,
.widget_search form {
    display: flex;
    gap: 0;
    padding: 12px 14px !important;
}

.widget_search .search-field,
.widget_search input[type="search"],
.widget_search input[type="text"] {
    flex: 1;
    border: 1.5px solid #e0e0e0;
    border-right: none;
    border-radius: 5px 0 0 5px;
    padding: 9px 12px;
    font-size: 13px;
    outline: none;
    color: #333;
    transition: border-color 0.2s;
    background: #fafafa;
    min-width: 0;
}

.widget_search .search-field:focus,
.widget_search input[type="search"]:focus {
    border-color: var(--red-primary);
    background: #fff;
}

.widget_search .search-submit,
.widget_search button[type="submit"],
.widget_search input[type="submit"] {
    background: var(--red-primary);
    color: white;
    border: none;
    padding: 9px 16px;
    border-radius: 0 5px 5px 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.widget_search .search-submit:hover {
    background: var(--red-hover);
}

/* Icon search di tombol */
.widget_search .search-submit::before {
    content: "🔍 ";
}

/* ==========================================
   WIDGET: RECENT POSTS
   ========================================== */
.widget_recent_entries ul,
.widget_recent_entries .widget-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
}

.widget_recent_entries ul li {
    border-bottom: 1px dashed #f0f0f0 !important;
    padding: 8px 0 !important;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.widget_recent_entries ul li:last-child {
    border-bottom: none !important;
}

/* Bullet merah custom */
.widget_recent_entries ul li::before {
    content: "▶";
    color: var(--red-primary);
    font-size: 8px;
    flex-shrink: 0;
    margin-top: 4px;
}

.widget_recent_entries ul li a {
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: block;
}

.widget_recent_entries ul li a:hover {
    color: var(--red-primary) !important;
}

.widget_recent_entries ul li .post-date {
    display: block;
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
}

/* ==========================================
   WIDGET: RECENT COMMENTS
   ========================================== */
.widget_recent_comments ul,
#recentcomments {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
}

.widget_recent_comments ul li,
#recentcomments li {
    padding: 8px 0 !important;
    border-bottom: 1px dashed #f0f0f0 !important;
    font-size: 12px !important;
    color: #555;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.widget_recent_comments ul li:last-child,
#recentcomments li:last-child {
    border-bottom: none !important;
}

/* Icon komentar */
.widget_recent_comments ul li::before,
#recentcomments li::before {
    content: "💬";
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}

.widget_recent_comments ul li a,
#recentcomments li a {
    color: var(--red-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.widget_recent_comments ul li a:hover,
#recentcomments li a:hover {
    color: var(--red-hover) !important;
    text-decoration: underline;
}

/* ==========================================
   WIDGET: CATEGORIES
   ========================================== */
.widget_categories ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
}

.widget_categories ul li {
    border-bottom: 1px solid #f5f5f5;
    padding: 0 !important;
}

.widget_categories ul li:last-child {
    border-bottom: none;
}

.widget_categories ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    color: #333 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.widget_categories ul li a::before {
    content: "📂";
    font-size: 12px;
    margin-right: 6px;
}

.widget_categories ul li a:hover {
    color: var(--red-primary) !important;
    padding-left: 8px;
}

/* Jumlah post per kategori */
.widget_categories ul li a .count,
.widget_categories .cat-count {
    background: var(--red-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
}

/* Nested categories */
.widget_categories ul ul {
    padding-left: 16px !important;
}

/* ==========================================
   WIDGET: ARCHIVES
   ========================================== */
.widget_archive ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
}

.widget_archive ul li {
    border-bottom: 1px solid #f5f5f5;
}

.widget_archive ul li:last-child {
    border-bottom: none;
}

.widget_archive ul li a {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    color: #333 !important;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.widget_archive ul li a::before {
    content: "🗓️";
    font-size: 12px;
    margin-right: 7px;
}

.widget_archive ul li a:hover {
    color: var(--red-primary) !important;
    padding-left: 8px;
}

/* ==========================================
   WIDGET: TAG CLOUD
   ========================================== */
.widget_tag_cloud .tagcloud {
    padding: 12px 14px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.widget_tag_cloud .tagcloud a,
.widget_tag_cloud a.tag-cloud-link {
    display: inline-block !important;
    background: #f0f0f0 !important;
    color: #444 !important;
    padding: 4px 10px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s !important;
    border: 1px solid #e0e0e0;
    line-height: 1;
}

.widget_tag_cloud .tagcloud a:hover,
.widget_tag_cloud a.tag-cloud-link:hover {
    background: var(--red-primary) !important;
    color: white !important;
    border-color: var(--red-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(192,57,43,0.3);
}

/* ==========================================
   WIDGET: NAV MENU
   ========================================== */
.widget_nav_menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

.widget_nav_menu ul li {
    border-bottom: 1px solid #f5f5f5;
}

.widget_nav_menu ul li:last-child {
    border-bottom: none;
}

.widget_nav_menu ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: #333 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.widget_nav_menu ul li a::before {
    content: "▶";
    color: var(--red-primary);
    font-size: 8px;
    flex-shrink: 0;
}

.widget_nav_menu ul li a:hover {
    background: #fff5f5;
    color: var(--red-primary) !important;
    padding-left: 22px;
}

/* Sub menu indented */
.widget_nav_menu ul ul {
    padding-left: 12px !important;
    background: #fafafa;
}

.widget_nav_menu ul ul li a {
    font-size: 12px;
    padding: 7px 16px;
}

/* ==========================================
   WIDGET: TEXT / HTML
   ========================================== */
.widget_text .widget-body,
.widget_text .textwidget {
    padding: 14px 15px !important;
    font-size: 13px;
    line-height: 1.7;
    color: #555;
}

.widget_text p { margin-bottom: 8px; }
.widget_text p:last-child { margin-bottom: 0; }
.widget_text a { color: var(--red-primary); font-weight: 600; }
.widget_text a:hover { color: var(--red-hover); }

/* ==========================================
   WIDGET: CALENDAR
   ========================================== */
.widget_calendar .calendar_wrap {
    padding: 12px 14px !important;
}

.widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.widget_calendar caption {
    font-weight: 700;
    font-size: 13px;
    color: var(--red-primary);
    margin-bottom: 8px;
}

.widget_calendar thead th {
    background: var(--red-primary);
    color: white;
    padding: 5px 4px;
    text-align: center;
    font-size: 11px;
}

.widget_calendar tbody td {
    text-align: center;
    padding: 5px 4px;
    border: 1px solid #f0f0f0;
    color: #555;
}

.widget_calendar tbody td a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--red-primary);
    color: white !important;
    border-radius: 50%;
    font-weight: 700;
    text-decoration: none;
    font-size: 11px;
}

.widget_calendar tbody td#today {
    background: #fff5f5;
    font-weight: 700;
    color: var(--red-primary);
}

.widget_calendar tfoot td {
    padding: 5px;
    text-align: center;
}

.widget_calendar tfoot a {
    color: var(--red-primary);
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================
   WIDGET: RSS
   ========================================== */
.widget_rss ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
}

.widget_rss ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
}

.widget_rss ul li:last-child { border-bottom: none; }

.widget_rss ul li a.rsswidget {
    color: #333 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    margin-bottom: 3px;
}

.widget_rss ul li a.rsswidget:hover {
    color: var(--red-primary) !important;
}

.widget_rss .rssSummary {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

.widget_rss .rss-date {
    font-size: 10px;
    color: #aaa;
    display: block;
    margin-top: 3px;
}

/* ==========================================
   WIDGET: META (Login/Register)
   ========================================== */
.widget_meta ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
}

.widget_meta ul li {
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}

.widget_meta ul li:last-child { border-bottom: none; }

.widget_meta ul li a {
    color: #333 !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
}

.widget_meta ul li a::before { content: "🔑"; font-size: 12px; }
.widget_meta ul li a[href*="login"]::before { content: "🔐"; }
.widget_meta ul li a[href*="register"]::before { content: "📝"; }
.widget_meta ul li a[href*="feed"]::before { content: "📡"; }

.widget_meta ul li a:hover {
    color: var(--red-primary) !important;
}

/* ==========================================
   WIDGET: PAGES
   ========================================== */
.widget_pages ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

.widget_pages ul li a {
    display: block;
    padding: 8px 16px;
    color: #333 !important;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s;
}

.widget_pages ul li a::before {
    content: "📄 ";
    font-size: 12px;
}

.widget_pages ul li a:hover {
    background: #fff5f5;
    color: var(--red-primary) !important;
    padding-left: 22px;
}

/* ==========================================
   WIDGET ANGKANET CUSTOM (sidebar-widget)
   Pastikan override selalu berlaku
   ========================================== */
.angkanet-sidebar .sidebar-widget {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 18px;
    border: 1px solid #f0f0f0;
}

.angkanet-sidebar .widget-title {
    background: linear-gradient(135deg, var(--red-dark) 0%, var(--red-primary) 100%) !important;
    color: white !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Garis putih kiri */
.angkanet-sidebar .widget-title::before {
    content: "";
    width: 3px; height: 14px;
    background: rgba(255,255,255,0.45);
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.angkanet-sidebar .widget-body {
    padding: 12px 15px;
}

/* Sidebar menu links */
.sidebar-menu li {
    list-style: none;
    border-bottom: 1px solid #f5f5f5;
}

.sidebar-menu li:last-child { border-bottom: none; }

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 2px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-menu li a::before {
    content: "▶";
    color: var(--red-primary);
    font-size: 8px;
    flex-shrink: 0;
}

.sidebar-menu li a:hover {
    color: var(--red-primary);
    padding-left: 6px;
}

/* ==========================================
   SCROLLBAR CUSTOM (webkit)
   ========================================== */
.angkanet-sidebar ::-webkit-scrollbar { width: 4px; }
.angkanet-sidebar ::-webkit-scrollbar-track { background: #f1f1f1; }
.angkanet-sidebar ::-webkit-scrollbar-thumb {
    background: var(--red-primary);
    border-radius: 4px;
}

/* ================================================================
   ANW NEW STYLES — Widget Paito, Quick Links, Banner, Responsive
   ================================================================ */

/* ── Widget Paito Warna (sidebar) — mengikuti warna theme ── */
.anw-paito-widget {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
    border: 1px solid rgba(0,0,0,.08);
}
.anw-widget-head {
    /* Gradasi dari CSS variable theme — ikut customizer */
    background: linear-gradient(135deg, var(--red-dark, #922b21) 0%, var(--red-primary, #c0392b) 60%, var(--red-hover, #e74c3c) 100%);
    color: #fff;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3px;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.anw-paito-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
}
.anw-paito-list li {
    /* Border warna tema dengan opacity */
    border-bottom: 1px solid color-mix(in srgb, var(--red-primary, #c0392b) 8%, #f0f0f0);
}
.anw-paito-list li:last-child { border-bottom: none; }
.anw-paito-list li a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    /* Teks mengikuti warna primary theme */
    color: var(--red-primary, #c0392b) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s ease;
    background: transparent;
    position: relative;
}
.anw-paito-list li a::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--red-primary, #c0392b);
    opacity: 0;
    transition: opacity .15s;
}
.anw-paito-list li a:hover {
    /* Background tint dari warna theme */
    background: color-mix(in srgb, var(--red-primary, #c0392b) 6%, #fff);
    color: var(--red-dark, #922b21) !important;
    padding-left: 22px;
}
.anw-paito-list li a:hover::before { opacity: 1; }

/* ── Banner wrapper ── */
.anw-banner-wrap {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 14px;
    text-align: center;
}
.anw-sponsor-label {
    display: block;
    font-size: 9px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* ── Quick Links Frontpage ── */
.anw-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}
.anw-ql-btn {
    flex: 1 1 calc(25% - 8px);
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.anw-ql-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    color: #fff !important;
}

/* ── Artikel Grid ── */
.anw-article-grid-wrap {
    margin-top: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.anw-section-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--red-primary);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}
.anw-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.anw-article-card {
    display: block;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: #222 !important;
    transition: box-shadow .2s, transform .2s;
}
.anw-article-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    transform: translateY(-2px);
}
.anw-thumb-img { width:100%; height:110px; object-fit:cover; display:block; }
.anw-thumb-placeholder {
    width:100%; height:70px;
    background: linear-gradient(135deg, var(--red-dark), var(--red-primary));
    display:flex; align-items:center; justify-content:center;
    font-size:26px;
}
.anw-article-info { padding: 12px; }
.anw-article-info h3 { font-size:13px; font-weight:700; margin:0 0 6px; line-height:1.4; color:#222; }
.anw-article-info p  { font-size:11px; color:#888; margin:0; line-height:1.5; }

/* ================================================================
   RESPONSIVE IMPROVEMENTS
   ================================================================ */
@media (max-width: 900px) {
    .angkanet-container { flex-direction: column; }
    .angkanet-sidebar   { width: 100%; order: 2; }
    .angkanet-main      { order: 1; }
    .anw-paito-list { columns: 2; }
    .anw-paito-list li { break-inside: avoid; }
}
@media (max-width: 640px) {
    .anw-quicklinks { gap: 6px; }
    .anw-ql-btn { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 12px; padding: 9px 8px; }
    .anw-article-grid { grid-template-columns: 1fr; }
    .anw-paito-list { columns: 1; }
    .header-main { flex-direction: column; gap: 8px; }
    #angkanet-nav .nav-menu { flex-wrap: wrap; gap: 0; }
    #angkanet-nav .nav-menu li a { font-size: 11px; padding: 8px 10px; }
    .date-filter-bar { flex-wrap: wrap; gap: 6px; }
    .date-filter-bar label { width: 100%; }
    .date-filter-bar input[type=date] { flex: 1; }
}
@media (max-width: 380px) {
    .anw-ql-btn { flex: 1 1 100%; font-size: 12px; }
}