/* * ================================================================
 * PROJECT      : Style Admin Journal An-Nahdlah (The Complete Master)
 * VERSION      : 9.0.0 (Luxury Themes + Sidebar Utilities)
 * DESCRIPTION  : Premium 3-tone gradients with active Shimmer & Logo Grid.
 * ================================================================
 */

:root {
    --yts-gold: #D4AF37;
    --yts-silver: #C0C0C0;
    --transition-bounce: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ----------------------------------------------------------------
   1. CORE JOURNAL POLICY (Luxury 3-Tone Logic)
   ---------------------------------------------------------------- */
.journal-policy-yts a.hvr-sweep {
    display: block !important;
    position: relative;
    padding: 12px 15px;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    z-index: 1;
    overflow: hidden;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Shimmer Effect */
.journal-policy-yts a.hvr-sweep::after {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
}

.journal-policy-yts a.hvr-sweep:hover::after {
    left: 150%;
    transition: 0.8s ease;
}

.journal-policy-yts a.hvr-sweep:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    filter: brightness(1.15);
}

.journal-policy-yts a.hvr-sweep .fa {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* ----------------------------------------------------------------
   2. 20 LUXURY THEMES (Triple-Tone Gradients)
   ---------------------------------------------------------------- */
.tema1 a.hvr-sweep { background: linear-gradient(135deg, #001a35, #004b91, #001a35) !important; color: #fff !important; border-left: 6px solid var(--yts-gold) !important; }
.tema2 a.hvr-sweep { background: linear-gradient(135deg, #006666, #00b3b3, #006666) !important; color: #fff !important; border-left: 6px solid #00ffff !important; }
.tema3 a.hvr-sweep { background: linear-gradient(135deg, #114014, #2e7d32, #114014) !important; color: #fff !important; border-left: 6px solid #8bc34a !important; }
.tema4 a.hvr-sweep { background: linear-gradient(135deg, #4a0000, #930000, #4a0000) !important; color: #fff !important; border-left: 6px solid var(--yts-gold) !important; }
.tema5 a.hvr-sweep { background: linear-gradient(135deg, #013c6b, #0288d1, #013c6b) !important; color: #fff !important; border-left: 6px solid #4fc3f7 !important; }
.tema6 a.hvr-sweep { background: linear-gradient(135deg, #00332c, #00796b, #00332c) !important; color: #fff !important; border-left: 6px solid #26a69a !important; }
.tema7 a.hvr-sweep { background: linear-gradient(135deg, #2a127a, #5e35b1, #2a127a) !important; color: #fff !important; border-left: 6px solid #b39ddb !important; }
.tema8 a.hvr-sweep { background: linear-gradient(135deg, #1a2327, #455a64, #1a2327) !important; color: #fff !important; border-left: 6px solid #90a4ae !important; }
.tema9 a.hvr-sweep { background: linear-gradient(135deg, #bf4300, #ff9800, #bf4300) !important; color: #fff !important; border-left: 6px solid #ffe0b2 !important; }
.tema10 a.hvr-sweep { background: linear-gradient(135deg, #254d15, #689f38, #254d15) !important; color: #fff !important; border-left: 6px solid #dce775 !important; }
.tema11 a.hvr-sweep { background: linear-gradient(135deg, #6a0d3d, #ad1457, #6a0d3d) !important; color: #fff !important; border-left: 6px solid #f48fb1 !important; }
.tema12 a.hvr-sweep { background: linear-gradient(135deg, #004d50, #0097a7, #004d50) !important; color: #fff !important; border-left: 6px solid #80deea !important; }
.tema13 a.hvr-sweep { background: linear-gradient(135deg, #2d1d1a, #5d4037, #2d1d1a) !important; color: #fff !important; border-left: 6px solid #d7ccc8 !important; }
.tema14 a.hvr-sweep { background: linear-gradient(135deg, #0d1252, #3f51b5, #0d1252) !important; color: #fff !important; border-left: 6px solid #9fa8da !important; }
.tema15 a.hvr-sweep { background: linear-gradient(135deg, #7f0000, #d32f2f, #7f0000) !important; color: #fff !important; border-left: 6px solid #ff8a80 !important; }
.tema16 a.hvr-sweep { background: linear-gradient(135deg, #212121, #616161, #212121) !important; color: #fff !important; border-left: 6px solid #bdbdbd !important; }
.tema17 a.hvr-sweep { background: linear-gradient(135deg, #310062, #7b1fa2, #310062) !important; color: #fff !important; border-left: 6px solid #e1bee7 !important; }
.tema18 a.hvr-sweep { background: linear-gradient(135deg, #002d26, #006064, #002d26) !important; color: #fff !important; border-left: 6px solid #4db6ac !important; }
.tema19 a.hvr-sweep { background: linear-gradient(135deg, #872500, #e64a19, #872500) !important; color: #fff !important; border-left: 6px solid #ffab91 !important; }
.tema20 a.hvr-sweep { background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728) !important; color: #333 !important; border-left: 6px solid #aa771c !important; }
.tema20 a.hvr-sweep .fa { color: #333 !important; }

/* ----------------------------------------------------------------
   3. SIDEBAR UTILITIES (Logo Grid)
   ---------------------------------------------------------------- */
.sidebar-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.tool-box {
    flex: 0 0 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-bounce);
    border: none !important;
    background: transparent !important;
}

.tool-box:hover { transform: scale(1.15); }

.tool-box img {
    width: 100% !important;
    height: auto !important;
    max-height: 55px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

/* ----------------------------------------------------------------
   4. JOURNAL TEMPLATE
   ---------------------------------------------------------------- */
.btn-yts-template {
    transition: all var(--transition-bounce) !important;
}

.btn-yts-template:hover {
    filter: brightness(110%) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important;
}

/* ----------------------------------------------------------------
   5. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    .tool-box { flex: 0 0 48%; }
    .tool-box img { max-height: 45px !important; }
}

/* ----------------------------------------------------------------
   6. Text Home
   ---------------------------------------------------------------- */
.page_index_site .about_site p {
    text-align: justify !important;
    line-height: revert !important;
}

.has_thumb .body .description p {
    text-align: justify !important;
    line-height: normal !important;
}

.has_site_logo header #headerNavigationContainer {
    background: linear-gradient(135deg, #114014, #2e7d32, #114014) !important;
}

/* 
.has_thumb .body h3 {
    font-size: 1.3rem !important;
    text-align: justify !important;
    line-height: 2rem !important;
    margin-top: 0rem !important;
}

.has_thumb .body h3 a {
    color: #055d20 !important;
}

.has_thumb .body h3 a:hover, .has_thumb .body h3 a:focus {
    color: #22a709 !important;
}
*/