/* SemuaAda custom tweaks */
:root{
  --sa-blue: #1e40af;     /* deep blue */
  --sa-sky:  #60a5fa;     /* light blue */
  --sa-navy: #0b2a6f;     /* navy */
}

/* =========================
   NAVIGATION
   - Ghost top navigation (#gh-navigation)
   - Basic OPL nav (if used elsewhere)
   ========================= */

/* Ghost nav: sticky/frozen on top */
#gh-navigation{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
#gh-navigation .gh-navigation-logo,
#gh-navigation .gh-navigation-logo *{
  color: #111827 !important; /* near-black */
}
#gh-navigation .nav a{
  color: #111827 !important;
}
#gh-navigation .gh-icon-button{
  color: #111827 !important;
}

/* If Ghost adds a sticky class on scroll, keep readability */
#gh-navigation.is-sticky,
#gh-navigation.has-scrolled,
body.has-scrolled #gh-navigation{
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,64,175,0.18);
}
#gh-navigation.is-sticky .nav a,
#gh-navigation.has-scrolled .nav a,
body.has-scrolled #gh-navigation .nav a,
#gh-navigation.is-sticky .gh-icon-button,
#gh-navigation.has-scrolled .gh-icon-button,
body.has-scrolled #gh-navigation .gh-icon-button,
#gh-navigation.is-sticky .gh-navigation-logo,
#gh-navigation.has-scrolled .gh-navigation-logo{
  color: var(--sa-blue) !important;
}

/* Basic OPL NAVBAR (if present in template sections) */
.navbar-area{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.20);
}
.navbar-nav .nav-item a,
.navbar-btn .main-btn{ color: #ffffff !important; }
.navbar-toggler .toggler-icon{ background-color: #ffffff !important; }

.sticky{
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,64,175,0.18);
}
.sticky .navbar-nav .nav-item a,
.sticky .navbar-btn .main-btn{ color: var(--sa-blue) !important; }
.sticky .navbar-toggler .toggler-icon{ background-color: var(--sa-blue) !important; }

/* Optional: reduce padding a bit */
.navbar{ padding: 18px 0; }
.sticky .navbar{ padding: 10px 0; }


/* =========================
   CATEGORY MARQUEE (home)
   ========================= */
.kategori-marquee{
  overflow: hidden;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 16px;
  background: #ffffff;
  padding: 10px;
  margin-bottom: 18px; /* space after carousel */
}
.kategori-track{
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  animation: sa-marquee 42s linear infinite;
}
.kategori-marquee:hover .kategori-track{
  animation-play-state: paused;
}
@keyframes sa-marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.kategori-card{
  display:flex;
  flex-direction: column;
  align-items:stretch;
  gap:10px;
  padding: 12px;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: #111827;
  font-weight: 700;
  width: 220px;
}
.kategori-card:hover{
  border-color: rgba(30,64,175,0.35);
}
.kategori-photo{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}
.kategori-card span{
  display:block;
  padding: 0 4px;
  white-space: normal;
  line-height: 1.2;
}
.kategori-all{ justify-content:center; }

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .kategori-track{ animation: none; }
}

/* Widgets layout */
.widgets-layout{
  display:grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 18px;
  align-items:start;
  margin-top: 18px; /* space after category carousel */
}

/* Color accents per sidebar (unified) */
.widgets-layout > aside .widget-card{
  border-left: 4px solid rgba(30,64,175,0.40);
  background: linear-gradient(135deg, rgba(96,165,250,0.12), rgba(30,64,175,0.06));
  border-color: rgba(30,64,175,0.18);
}
.widgets-layout > aside .widget-card h3{ color:#0b2a6f; }
.widgets-layout > aside .widget-card a{ color:#0b2a6f; }

.widget-card{
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  margin-bottom: 14px;
}

/* Weather: keep stronger gradient for better icon contrast */
.widget-card[data-widget="weather"]{
  background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(30,64,175,0.10));
}
.widget-card[data-widget="weather"] .loc,
.widget-card[data-widget="weather"] .wx-desc{
  color: rgba(11,42,111,0.80);
}
.widget-card[data-widget="weather"] .temp{
  font-size: 30px;
  font-weight: 900;
  color:#0b2a6f;
}
.widget-card[data-widget="weather"] .weather-btn{
  background: rgba(255,255,255,0.75);
}
.widget-card h3{ margin: 0 0 10px; font-size: 16px; }
.crypto-list, .watchlist, .quick{ list-style:none; padding:0; margin:0; }
.crypto-list li{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid rgba(17,24,39,0.06);} 
.crypto-list li:last-child{ border-bottom:none; }
.crypto-list .sym{ font-weight:800; width:54px; }
.crypto-list .price{ font-variant-numeric: tabular-nums; }
.crypto-list .chg.pos{ color:#16a34a; }
.crypto-list .chg.neg{ color:#dc2626; }
.widget-card .updated{ font-size:12px; opacity:0.65; margin-top:8px; }
.weather-btn{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(17,24,39,0.14); background:#fff; font-weight:700; }
.weather-btn:hover{ border-color: rgba(30,64,175,0.35); }

@media (max-width: 1000px){
  .widgets-layout{ grid-template-columns: 1fr; }
}

/* Weather icon (CSS animated) */
.wx-row{display:flex; gap:12px; align-items:center;}
.wx-icon{width:56px; height:56px; position:relative;}
.wx-icon::before, .wx-icon::after{content:""; position:absolute; inset:0;}

/* Clear: sun */
.wx-clear::before{
  width:34px;height:34px;border-radius:50%;
  background: rgba(96,165,250,0.25);
  border: 4px solid rgba(30,64,175,0.65);
  left:10px; top:10px;
  animation: wx-pulse 2.6s ease-in-out infinite;
}

/* Cloudy: moving cloud */
.wx-cloudy::before{
  left:6px; top:18px; width:44px; height:24px; border-radius:16px;
  background: rgba(255,255,255,0.85);
  box-shadow: 10px -10px 0 0 rgba(255,255,255,0.85), 22px 0 0 0 rgba(255,255,255,0.85);
  animation: wx-drift 3.6s ease-in-out infinite;
}

/* Partly: sun behind cloud */
.wx-partly::before{
  width:26px;height:26px;border-radius:50%;
  background: rgba(96,165,250,0.18);
  border: 4px solid rgba(30,64,175,0.55);
  left:8px; top:8px;
  animation: wx-pulse 2.8s ease-in-out infinite;
}
.wx-partly::after{
  left:16px; top:24px; width:40px; height:22px; border-radius:16px;
  background: rgba(255,255,255,0.88);
  box-shadow: 10px -10px 0 0 rgba(255,255,255,0.88), 22px 0 0 0 rgba(255,255,255,0.88);
  animation: wx-drift 3.8s ease-in-out infinite;
}

/* Rain: cloud + drops */
.wx-rain::before{
  left:10px; top:16px; width:42px; height:24px; border-radius:16px;
  background: rgba(255,255,255,0.88);
  box-shadow: 10px -10px 0 0 rgba(255,255,255,0.88), 22px 0 0 0 rgba(255,255,255,0.88);
}
.wx-rain::after{
  left:18px; top:40px; width:36px; height:18px;
  background: radial-gradient(circle, rgba(96,165,250,0.75) 0 3px, transparent 4px) 0 0/12px 12px;
  animation: wx-rain 0.9s linear infinite;
}

@keyframes wx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes wx-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes wx-rain{0%{transform:translateY(0)}100%{transform:translateY(8px)}}


/* =========================
   GHOST HERO (tagline section)
   - force gradient background (hide default cover image)
   - bubble animation
   - white text
   ========================= */
.gh-header{
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 30% 20%, rgba(96,165,250,0.60), rgba(11,42,111,0.98)) !important;
}

/* hide default publication cover image so gradient is visible */
.gh-header-image{ display:none !important; }

/* animated bubbles layer */
.gh-header::before,
.gh-header::after{
  content: "";
  position: absolute;
  inset: -40% -20%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.55;
}

.gh-header::before{
  background-image:
    radial-gradient(circle at 10% 25%, rgba(255,255,255,0.20) 0 14px, transparent 15px),
    radial-gradient(circle at 18% 70%, rgba(255,255,255,0.16) 0 22px, transparent 23px),
    radial-gradient(circle at 30% 45%, rgba(255,255,255,0.14) 0 18px, transparent 19px),
    radial-gradient(circle at 42% 20%, rgba(255,255,255,0.12) 0 26px, transparent 27px),
    radial-gradient(circle at 55% 65%, rgba(255,255,255,0.10) 0 16px, transparent 17px),
    radial-gradient(circle at 68% 35%, rgba(255,255,255,0.12) 0 20px, transparent 21px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,0.10) 0 28px, transparent 29px),
    radial-gradient(circle at 90% 28%, rgba(255,255,255,0.12) 0 18px, transparent 19px);
  animation: sa-bubbles-float 12s linear infinite;
}

.gh-header::after{
  background-image:
    radial-gradient(circle at 12% 60%, rgba(255,255,255,0.10) 0 34px, transparent 35px),
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.10) 0 22px, transparent 23px),
    radial-gradient(circle at 48% 55%, rgba(255,255,255,0.10) 0 30px, transparent 31px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,0.08) 0 26px, transparent 27px),
    radial-gradient(circle at 74% 50%, rgba(255,255,255,0.08) 0 38px, transparent 39px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,0.08) 0 24px, transparent 25px);
  animation: sa-bubbles-float2 18s linear infinite;
}

@keyframes sa-bubbles-float{
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-6%, -8%, 0); }
  100% { transform: translate3d(-12%, -16%, 0); }
}

@keyframes sa-bubbles-float2{
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(8%, -6%, 0); }
  100% { transform: translate3d(16%, -14%, 0); }
}

/* keep content above bubbles */
.gh-header > *{
  position: relative;
  z-index: 1;
}

/* white typography */
.gh-header-title,
.gh-header-subtitle,
.gh-header a{
  color: #ffffff !important;
}

.gh-header-title{
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.gh-header-subtitle{
  opacity: 0.9;
}