/*
Theme Name: iGlass Portal
Theme URI: https://iglass-portal.blogspot.com/
Author: TechTeo
Author URI: https://iglass-portal.blogspot.com/
Description: Portal teknologi premium dengan desain frosted glass terinspirasi iOS 26. Dikonversi dari halaman statis menjadi tema WordPress tanpa mengubah tampilan sama sekali.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iglass-portal
Tags: blog, custom-background, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   CSS DI BAWAH INI ADALAH CSS ASLI DARI DESAIN, TIDAK DIUBAH.
   Hanya dipindahkan dari tag <style> di file HTML ke style.css
   agar mengikuti standar tema WordPress.
   ========================================================= */
    /* Scrollbar halus */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 99px; }

    /* Frosted Glass */
    .glass-card {
      background: rgba(255,255,255,0.45);
      backdrop-filter: blur(20px) saturate(190%);
      -webkit-backdrop-filter: blur(20px) saturate(190%);
      border: 1.5px solid rgba(255,255,255,0.6);
      box-shadow: 0 8px 32px 0 rgba(194,213,240,0.2);
    }
    .dark .glass-card {
      background: rgba(13,19,34,0.45);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1.5px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3);
    }
    .glass-input {
      background: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.5);
    }
    .dark .glass-input {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
    }

    /* ===== READING PROGRESS BAR ===== */
    #reading-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 3px;
      background: linear-gradient(90deg, #38bdf8, #6366f1, #818cf8);
      z-index: 9999;
      transition: width 0.1s linear;
      border-radius: 0 99px 99px 0;
    }

    /* ===== SKELETON LOADING ===== */
    @keyframes shimmer {
      0% { background-position: -800px 0; }
      100% { background-position: 800px 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 75%);
      background-size: 800px 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 12px;
    }
    .dark .skeleton {
      background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
      background-size: 800px 100%;
      animation: shimmer 1.5s infinite;
    }

    /* ===== BACK TO TOP ===== */
    #back-to-top {
      position: fixed;
      bottom: 90px;
      right: 20px;
      z-index: 500;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.3s ease;
      pointer-events: none;
    }
    #back-to-top.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* ===== FLOATING CTA ===== */
    #floating-cta {
      position: fixed;
      bottom: 24px;
      right: 20px;
      z-index: 500;
      animation: floatPulse 3s ease-in-out infinite;
    }
    @keyframes floatPulse {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    /* ===== COOKIE BANNER ===== */
    #cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9998;
      transform: translateY(100%);
      transition: transform 0.4s ease;
    }
    #cookie-banner.show { transform: translateY(0); }

    /* ===== FONT SIZE CONTROL ===== */
    body { font-size: var(--base-font, 14px); }

    /* ===== LIKE BUTTON ANIM ===== */
    @keyframes likePoP {
      0% { transform: scale(1); }
      50% { transform: scale(1.4); }
      100% { transform: scale(1); }
    }
    .like-pop { animation: likePoP 0.3s ease; }

    /* ===== CATEGORY TAB ACTIVE ===== */
    .cat-tab.active {
      background: linear-gradient(135deg, #38bdf8, #6366f1);
      color: white !important;
      border-color: transparent !important;
    }

    /* ===== SUDAH DIBACA BADGE ===== */
    .read-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 99px;
      background: rgba(34,197,94,0.15);
      color: #22c55e;
    }

    /* ===== EXIT INTENT POPUP ===== */
    #exit-popup {
      position: fixed;
      inset: 0;
      z-index: 9997;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #exit-popup.show {
      opacity: 1;
      pointer-events: auto;
    }

    /* ===== NEWSLETTER WIDGET ===== */
    #newsletter-section {
      position: relative;
      overflow: hidden;
    }

    /* ===== PULL TO REFRESH ===== */
    #ptr-indicator {
      position: fixed;
      top: 3px;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      z-index: 9000;
      transition: transform 0.3s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 700;
    }
    #ptr-indicator.visible {
      transform: translateX(-50%) translateY(8px);
    }

    /* ===== SWIPE SLIDER TOUCH AREA ===== */
    #slider-container { touch-action: pan-y; user-select: none; }

    /* ===== PRINT MODE ===== */
    @media print {
      #sidebar, #floating-cta, #back-to-top, #cookie-banner,
      #reading-progress, .ad-slot, header, #load-more-btn { display: none !important; }
      main { margin: 0 !important; }
      .glass-card { background: white !important; border: 1px solid #ddd !important; backdrop-filter: none !important; }
    }

    /* Smooth transition for article cards */
    .article-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .article-card:hover { transform: translateY(-2px); }

    /* View count badge */
    .view-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 10px;
      color: #94a3b8;
    }