/*
 Theme Name:   Astra Child
 Theme URI:    https://salmankonveksi.com
 Description:  Astra Child Theme untuk Salman Konveksi
 Author:       Salman Konveksi
 Author URI:   https://salmankonveksi.com
 Template:     astra
 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:  astra-child
*/

/* =====================================================
   SALMAN KONVEKSI — CUSTOM CSS
   ===================================================== */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* padding top khusus desktop untuk sticky header */
@media (min-width: 769px) {
    body {
        padding-top: 0;
    }
}

/* sticky topbar menu desktop */
.ast-primary-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Fix Header Layout Alignment - Universal Fix (Legacy + Builder) */
.ast-primary-header-bar .ast-container,
.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .main-header-bar-wrap,
.main-header-bar .ast-container {
    max-width: 1250px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Ensure background spans full width */
.ast-primary-header-bar {
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
}

/* Background Color & Blur */
.main-header-bar {
    backdrop-filter: blur(10px);
    background: rgba(173, 216, 230, .5) !important;
    width: 100%;
}

/* Adjust header inner content to fill the constrained container */
.main-header-bar .ast-container>* {
    width: 100%;
}

/* sticky bottom bar menu mobile */
@media (max-width: 768px) {
    .ast-primary-header-bar {
        top: auto;
        bottom: 0;
    }

    body {
        padding-top: 0;
        /* no top padding on mobile, header is at bottom */
        padding-bottom: 80px;
        /* space for sticky bottom bar */
    }
}


/* =====================================================
   HALAMAN ARTIKEL - PADDING KIRI KANAN (SEJAJAR HEADER)
   ===================================================== */
/* Target semua halaman yang berhubungan dengan artikel */
body[class*="artikel"] .site-content .ast-container,
body[class*="artikel"] #primary,
body.category-artikel .ast-container,
body.post-type-archive-artikel .ast-container {
    max-width: 1250px !important;
    /* Samakan dengan max-width header */
    margin: 0 auto !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
}

/* Responsive artikel page */
@media (max-width: 768px) {

    body[class*="artikel"] .site-content .ast-container,
    body[class*="artikel"] #primary {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/*atur jarak card artikel*/
@media (min-width: 993px) {
    .ast-separate-container #primary,
    .ast-separate-container.ast-left-sidebar #primary,
    .ast-separate-container.ast-right-sidebar #primary {
        margin: 0em 2em;
    }
}

/* Atur jarak sidebar blog */
.blog .sidebar-main {
    margin-top: 1px !important;
}

@media (min-width: 993px) {
    .ast-separate-container.ast-right-sidebar #secondary,
    .ast-separate-container.ast-left-sidebar #secondary {
        border: 0;
        margin-top: 1px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* sosmed footer */
.footer-social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-social img {
    width: 45px;
    height: 39px;
    padding: 5px;
    margin-left: -6px;
    margin-bottom: 30px;
}

/* scroll top mobile */
@media (max-width: 768px) {
    #ast-scroll-top {
        background: #00A39E;
        right: 22.5px;
        bottom: 105px;
        transform: scale(1.2);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    }
}

/* efek slide fade left dan right */
[data-aos="fade-left"],
[data-aos="fade-right"] {
    transition-duration: 1.2s !important;
}

.alignfull,
.wp-block-cover {
    overflow-x: hidden;
}

.footer-widget-area .widget>*:first-child {
    margin-bottom: 0;
}

.footer-widget-area .widget {
    margin-top: -25px;
}

/* ikon gif wa */
.btn-wa-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #003F4D;
    color: #fff;
    padding: 10px 18px;
    margin-bottom: 40px;
    margin-top: -5px;
    border-radius: 8px;
    font-weight: 400;
    text-decoration: none;
    will-change: background, transform;
    transition: all 0.08s ease-in-out,
        transform 0.12s cubic-bezier(.34, 1.56, .64, 1) !important;
    transform: translateY(0);
}

.btn-wa-inline:hover {
    background: #1ebe5d;
    transform: translateY(-3px) scale(1.03);
}

.wa-gif {
    width: 35px;
    height: 35px;
    display: inline-block;
}

.slideTitle h2 {
    color: #fff !important;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* =====================================================
   SALMAN KONVEKSI — ABOUT PAGE (FINAL CLEAN VERSION)
   ===================================================== */

/* ---------- BRAND COLOR ---------- */
:root {
    --tosca: #0aa39a;
    --tosca-dark: #078a83;
    --gold: #f5b041;
    --dark: #0f172a;
    --text: #475569;
    --bg: #f8fafc;
}


/* ---------- PAGE RESET ---------- */
#content,
.site-content,
.ast-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---------- MAIN WRAPPER ---------- */
.salman-about {
    background: linear-gradient(180deg, var(--tosca), var(--tosca-dark));
    padding: 96px 20px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* ---------- CONTAINER ---------- */
.salman-wrap {
    max-width: 1200px;
    margin: auto;
}

/* ---------- HERO ---------- */
.salman-hero {
    color: #fff;
    margin-bottom: 72px;
}

.salman-hero h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 400;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

.salman-hero p {
    font-size: 18px;
    line-height: 1.8;
    max-width: 720px;
    opacity: .95;
}

/* ---------- CARD (CLEAN, MATTE) ---------- */
.salman-card {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(245, 247, 249, 0.65) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 24px;
    padding: 64px;
    margin-bottom: 56px;
    position: relative;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .6);

    border: 1px solid rgba(255, 255, 255, .35);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.salman-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .18);
}

/* ---------- GOLD ACCENT ---------- */
.salman-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 6px;
    background: var(--gold);
    border-radius: 0 0 12px 12px;
}

/* ---------- CARD TITLE ---------- */
.salman-card h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--dark);
}

/* ---------- TEXT ---------- */
.salman-card p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text);
    margin-bottom: 18px;
}

/* ---------- GRID ---------- */
.salman-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 32px;
}

/* ---------- GRID ITEM ---------- */
/* =========================================
   PRO GLOSSY CARD — SUBTLE & CORPORATE
   ========================================= */

/* CARD BASE */
.salman-item {
    position: relative;
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f9fafb 55%,
            #f3f6f9 100%) !important;

    border-radius: 18px !important;
    padding: 28px 28px 30px !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .08) !important;

    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        box-shadow .35s ease !important;

    overflow: hidden;
}

/* GLOSSY LIGHT SHEEN (VERY SOFT) */
.salman-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, .25) 35%,
            rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* HOVER = ELEVATION */
.salman-item:hover {
    transform: translateY(-6px);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, .14) !important;
}

/* ICON GOLD — LEBIH NYATU */
.salman-icon {
    background: linear-gradient(135deg,
            #f5b041 0%,
            #ffd27a 60%,
            #f0b429 100%) !important;

    box-shadow:
        0 6px 16px rgba(245, 176, 65, .45),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.salman-item h3 {
    font-size: 18px;
    margin: 0 0 8px;
    color: var(--dark);
}

.salman-item p {
    font-size: 15px;
    margin: 0;
    color: var(--text);
}

/* ===== ICON GOLD BADGE ===== */
.salman-item h3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.salman-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5b041, #ffd27a);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 6px 16px rgba(245, 176, 65, .45),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}

.salman-icon svg {
    width: 18px;
    height: 18px;
    stroke: #0f172a;
    stroke-width: 2;
    fill: none;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px) {
    .salman-about {
        padding: 72px 16px;
    }

    .salman-hero h1 {
        font-size: 30px;
    }

    .salman-card {
        padding: 40px 28px;
    }
}

/* =====================================================
   FORCE H2 STYLE — SALMAN SECTION (ANTI THEME OVERRIDE)
   ===================================================== */

/* H2 KHUSUS DI CARD */
.salman-about .salman-card h2 {
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;

    text-transform: none !important;
    letter-spacing: -0.3px !important;

    color: #0f172a !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

/* JAGA KALO THEME PAKE :before / :after */
.salman-about .salman-card h2::before,
.salman-about .salman-card h2::after {
    content: none !important;
}

/*tombol read-more di card blog*/
.ast-read-more-container a {
  display: inline-block;
  padding: 10px 18px;
  background: var(--ast-global-color-0);
  color: #fff !important;
  font-weight: 300;
  border-radius: 6px;
  text-decoration: none;
  transition: all .25s ease;
}

.ast-read-more-container a:hover {
  background: var(--ast-global-color-1);
  transform: translateY(-2px);
}

/*share social media single page*/
.post-share {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.post-share span {
  font-weight: 600;
  margin-right: 8px;
}

.post-share a {
  padding: 8px 14px;
  background: var(--ast-global-color-0);
  color: #fff !important;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
}

.post-share a:hover {
  background: var(--ast-global-color-1);
}

@media (max-width: 992px) {
    .ast-separate-container #primary,.ast-separate-container.ast-left-sidebar #primary,.ast-separate-container.ast-right-sidebar #primary {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    
    .single .post-navigation .nav-next a, .single .post-navigation .nav-previous a {
    color: white;
    max-width: 95%;
    width: 100%;
    }
    
    .ast-separate-container.ast-two-container #secondary {
    margin-top: -20px;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    }
}

@media (max-width: 768px) {
.ast-separate-container .ast-blog-layout-4-grid .ast-article-post {
    padding: 20px 20px 0 !important;
}
}