body.yf-frontend-page-about .yf-brand-about {
    --yf-brand-orange: #ff642f;
    --yf-brand-orange-dark: #de4818;
    --yf-brand-ink: #172033;
    --yf-brand-muted: #667085;
    --yf-brand-soft: #fff6f1;
    display: grid;
    gap: 24px;
}

body.yf-frontend-page-about .yf-brand-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 34px;
    align-items: end;
    padding: clamp(34px, 6vw, 72px);
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 138, 80, .42), transparent 34%),
        linear-gradient(135deg, #111827 0%, #1f2937 58%, #3a241f 100%);
    border-radius: 32px;
    box-shadow: 0 24px 70px rgba(23, 32, 51, .16);
}

body.yf-frontend-page-about .yf-brand-hero::before {
    content: "";
    position: absolute;
    inset: auto -90px -130px auto;
    width: 340px;
    height: 340px;
    border: 58px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
    pointer-events: none;
}

body.yf-frontend-page-about .yf-brand-hero-copy,
body.yf-frontend-page-about .yf-brand-facts {
    position: relative;
    z-index: 1;
}

body.yf-frontend-page-about .yf-brand-since,
body.yf-frontend-page-about .yf-brand-eyebrow {
    margin: 0 0 10px;
    color: var(--yf-brand-orange);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.yf-frontend-page-about .yf-brand-since {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: #ffd7c8;
}

body.yf-frontend-page-about .yf-brand-since span {
    width: 28px;
    height: 2px;
    background: var(--yf-brand-orange);
}

body.yf-frontend-page-about .yf-brand-hero h1 {
    max-width: 800px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.045em;
}

body.yf-frontend-page-about .yf-brand-hero .yf-info-lead {
    max-width: 760px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.85;
}

body.yf-frontend-page-about .yf-brand-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
/* Tombol utama hero Tentang Yasta Fashion */
body.yf-frontend-page-about .yf-brand-hero-actions .btn-light {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--yf-brand-orange),
        var(--yf-brand-orange-dark)
    ) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px rgba(222, 72, 24, 0.28) !important;
}

body.yf-frontend-page-about .yf-brand-hero-actions .btn-light i {
    color: #ffffff !important;
}

body.yf-frontend-page-about .yf-brand-hero-actions .btn-light:hover,
body.yf-frontend-page-about .yf-brand-hero-actions .btn-light:focus-visible {
    color: #ffffff !important;
    background: #de4818 !important;
    border-color: #de4818 !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(222, 72, 24, 0.36) !important;
}
body.yf-frontend-page-about .yf-brand-hero-actions .btn-outline-light {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

body.yf-frontend-page-about .yf-brand-hero-actions .btn-outline-light:hover,
body.yf-frontend-page-about .yf-brand-hero-actions .btn-outline-light:focus-visible {
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

body.yf-frontend-page-about .yf-brand-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    backdrop-filter: blur(14px);
}

body.yf-frontend-page-about .yf-brand-facts div {
    min-height: 96px;
    padding: 18px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

body.yf-frontend-page-about .yf-brand-facts div:nth-child(2n) { border-right: 0; }
body.yf-frontend-page-about .yf-brand-facts div:nth-last-child(-n+2) { border-bottom: 0; }
body.yf-frontend-page-about .yf-brand-facts dt { color: rgba(255,255,255,.58);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
body.yf-frontend-page-about .yf-brand-facts dd { margin:6px 0 0;color:#fff;font-size:16px;font-weight:850; }

body.yf-frontend-page-about .yf-info-card {
    padding: clamp(26px, 4vw, 48px);
}

body.yf-frontend-page-about .yf-brand-section-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 26px;
}

body.yf-frontend-page-about .yf-brand-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--yf-brand-orange-dark);
    background: var(--yf-brand-soft);
    border: 1px solid #ffd8c8;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 900;
}

body.yf-frontend-page-about .yf-brand-section-head .yf-brand-eyebrow { margin-bottom: 6px; }
body.yf-frontend-page-about .yf-info-section-title { max-width: 790px;font-size:clamp(23px,3vw,34px);line-height:1.2; }

body.yf-frontend-page-about .yf-brand-reading-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 28px;
    align-items: start;
}

body.yf-frontend-page-about .yf-brand-prose p,
body.yf-frontend-page-about .yf-founder-copy > p {
    color: var(--yf-brand-muted);
    font-size: 14px;
    line-height: 1.95;
}

body.yf-frontend-page-about .yf-brand-prose p:last-child,
body.yf-frontend-page-about .yf-founder-copy > p:last-of-type { margin-bottom: 0; }

body.yf-frontend-page-about .yf-brand-quote {
    position: sticky;
    top: 110px;
    padding: 28px;
    color: #fff;
    background: linear-gradient(145deg, #202b3e, #111827);
    border-radius: 24px;
}

body.yf-frontend-page-about .yf-brand-quote i { color: var(--yf-brand-orange);font-size:36px; }
body.yf-frontend-page-about .yf-brand-quote blockquote { margin:10px 0 15px;font-size:17px;font-weight:800;line-height:1.65; }
body.yf-frontend-page-about .yf-brand-quote p { margin:0;color:rgba(255,255,255,.62);font-size:11px; }

body.yf-frontend-page-about .yf-founder-section { overflow: hidden; }
body.yf-frontend-page-about .yf-founder-layout {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

body.yf-frontend-page-about .yf-founder-figure { margin:0; }
body.yf-frontend-page-about .yf-founder-photo {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #0b0b0b;
    border-radius: 28px;
    box-shadow: 0 28px 60px rgba(17, 24, 39, .22);
}
body.yf-frontend-page-about .yf-founder-figure figcaption { margin-top:12px;color:var(--yf-brand-muted);font-size:11px;text-align:center; }
body.yf-frontend-page-about .yf-founder-copy .yf-info-section-title { margin-bottom:18px; }

body.yf-frontend-page-about .yf-founder-profile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 26px 0 0;
}
body.yf-frontend-page-about .yf-founder-profile div { padding:16px 18px;background:#f8fafc;border:1px solid #e8edf4;border-radius:16px; }
body.yf-frontend-page-about .yf-founder-profile dt { color:#8a94a6;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }
body.yf-frontend-page-about .yf-founder-profile dd { margin:5px 0 0;color:var(--yf-brand-ink);font-size:13px;font-weight:850; }

body.yf-frontend-page-about .yf-brand-value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
body.yf-frontend-page-about .yf-brand-value { padding:23px;border:1px solid #e8edf4;border-radius:20px;background:#fff; }
body.yf-frontend-page-about .yf-brand-value i { display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:18px;color:var(--yf-brand-orange);background:var(--yf-brand-soft);border-radius:13px;font-size:18px; }
body.yf-frontend-page-about .yf-brand-value h3,
body.yf-frontend-page-about .yf-brand-knowledge-grid h3 { margin:0 0 8px;color:var(--yf-brand-ink);font-size:15px;font-weight:900; }
body.yf-frontend-page-about .yf-brand-value p,
body.yf-frontend-page-about .yf-brand-knowledge-grid p { margin:0;color:var(--yf-brand-muted);font-size:12px;line-height:1.8; }

body.yf-frontend-page-about .yf-brand-knowledge-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
body.yf-frontend-page-about .yf-brand-knowledge-grid article { display:flex;flex-direction:column;min-height:230px;padding:25px;background:linear-gradient(180deg,#fff,#fbfcfe);border:1px solid #e8edf4;border-radius:21px; }
body.yf-frontend-page-about .yf-brand-knowledge-grid article > span { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:20px;color:#fff;background:linear-gradient(135deg,var(--yf-brand-orange),#ff8a50);border-radius:14px;font-size:18px;box-shadow:0 10px 24px rgba(255,100,47,.2); }
body.yf-frontend-page-about .yf-brand-knowledge-grid a { display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:22px;color:var(--yf-brand-orange-dark);font-size:12px;font-weight:850;text-decoration:none; }

body.yf-frontend-page-about .yf-brand-faq-list { display:grid;gap:10px; }
body.yf-frontend-page-about .yf-brand-faq details { overflow:hidden;border:1px solid #e8edf4;border-radius:17px;background:#fff; }
body.yf-frontend-page-about .yf-brand-faq summary { position:relative;padding:19px 52px 19px 20px;color:var(--yf-brand-ink);font-size:13px;font-weight:850;cursor:pointer;list-style:none; }
body.yf-frontend-page-about .yf-brand-faq summary::-webkit-details-marker { display:none; }
body.yf-frontend-page-about .yf-brand-faq summary::after { content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--yf-brand-orange);font-size:22px;font-weight:500; }
body.yf-frontend-page-about .yf-brand-faq details[open] summary::after { content:"−"; }
body.yf-frontend-page-about .yf-brand-faq details p { margin:0;padding:0 20px 19px;color:var(--yf-brand-muted);font-size:12px;line-height:1.8; }

body.yf-frontend-page-about .yf-brand-cta {
    display:flex;
    justify-content:space-between;
    gap:28px;
    align-items:center;
    padding:clamp(28px,5vw,52px);
    background:linear-gradient(135deg,#fff4ee,#fff);
    border:1px solid #ffd8c8;
    border-radius:28px;
}
body.yf-frontend-page-about .yf-brand-cta h2 { max-width:720px;margin:0 0 10px;color:var(--yf-brand-ink);font-size:clamp(24px,3.5vw,38px);font-weight:900;line-height:1.18;letter-spacing:-.03em; }
body.yf-frontend-page-about .yf-brand-cta p:not(.yf-brand-eyebrow) { max-width:720px;margin:0;color:var(--yf-brand-muted);font-size:13px;line-height:1.8; }
body.yf-frontend-page-about .yf-brand-cta-actions { display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto; }

@media (max-width: 991.98px) {
    body.yf-frontend-page-about .yf-brand-hero,
    body.yf-frontend-page-about .yf-brand-reading-grid,
    body.yf-frontend-page-about .yf-founder-layout { grid-template-columns:1fr; }
    body.yf-frontend-page-about .yf-brand-facts { max-width:560px; }
    body.yf-frontend-page-about .yf-brand-quote { position:static; }
    body.yf-frontend-page-about .yf-founder-figure { max-width:520px;margin-inline:auto; }
    body.yf-frontend-page-about .yf-brand-value-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body.yf-frontend-page-about .yf-brand-knowledge-grid { grid-template-columns:1fr; }
    body.yf-frontend-page-about .yf-brand-knowledge-grid article { min-height:unset; }
    body.yf-frontend-page-about .yf-brand-cta { align-items:flex-start;flex-direction:column; }
}

@media (max-width: 575.98px) {
    body.yf-frontend-page-about .yf-brand-about { gap:14px; }
    body.yf-frontend-page-about .yf-brand-hero { padding:30px 22px;border-radius:23px; }
    body.yf-frontend-page-about .yf-brand-hero h1 { font-size:34px; }
    body.yf-frontend-page-about .yf-brand-facts { grid-template-columns:1fr; }
    body.yf-frontend-page-about .yf-brand-facts div,
    body.yf-frontend-page-about .yf-brand-facts div:nth-child(2n),
    body.yf-frontend-page-about .yf-brand-facts div:nth-last-child(-n+2) { min-height:74px;border-right:0;border-bottom:1px solid rgba(255,255,255,.1); }
    body.yf-frontend-page-about .yf-brand-facts div:last-child { border-bottom:0; }
    body.yf-frontend-page-about .yf-info-card { padding:24px 20px; }
    body.yf-frontend-page-about .yf-brand-value-grid,
    body.yf-frontend-page-about .yf-founder-profile { grid-template-columns:1fr; }
    body.yf-frontend-page-about .yf-brand-section-number { width:38px;height:38px;flex-basis:38px; }
    body.yf-frontend-page-about .yf-founder-photo { border-radius:21px; }
    body.yf-frontend-page-about .yf-brand-cta { padding:28px 22px;border-radius:22px; }
    body.yf-frontend-page-about .yf-brand-cta-actions { width:100%; }
    body.yf-frontend-page-about .yf-brand-cta-actions .btn { flex:1 1 100%; }
}


body.yf-frontend-page-about .yf-marketplace-intro {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:20px;
}
body.yf-frontend-page-about .yf-marketplace-intro p { max-width:780px;margin:0;color:var(--yf-brand-muted);font-size:13px;line-height:1.85; }
body.yf-frontend-page-about .yf-marketplace-intro > span { display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 12px;color:#157347;background:#eaf8f0;border:1px solid #c7ebd5;border-radius:999px;font-size:10px;font-weight:850; }
body.yf-frontend-page-about .yf-marketplace-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px; }
body.yf-frontend-page-about .yf-marketplace-card { display:grid;grid-template-columns:48px minmax(0,1fr) 22px;gap:14px;align-items:center;padding:19px;color:inherit;background:linear-gradient(180deg,#fff,#fbfcfe);border:1px solid #e5eaf1;border-radius:19px;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
body.yf-frontend-page-about .yf-marketplace-card:hover { transform:translateY(-2px);border-color:#ffc7b0;box-shadow:0 14px 34px rgba(23,32,51,.08); }
body.yf-frontend-page-about .yf-marketplace-icon { display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;color:#fff;background:linear-gradient(135deg,var(--yf-brand-orange),#ff8a50);border-radius:15px;font-size:19px;box-shadow:0 10px 24px rgba(255,100,47,.2); }
body.yf-frontend-page-about .yf-marketplace-copy { min-width:0;display:flex;flex-direction:column; }
body.yf-frontend-page-about .yf-marketplace-copy small { margin-bottom:3px;color:var(--yf-brand-orange-dark);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
body.yf-frontend-page-about .yf-marketplace-copy strong { color:var(--yf-brand-ink);font-size:15px;font-weight:900; }
body.yf-frontend-page-about .yf-marketplace-copy span { margin-top:3px;overflow:hidden;color:var(--yf-brand-muted);font-size:10px;white-space:nowrap;text-overflow:ellipsis; }
body.yf-frontend-page-about .yf-marketplace-arrow { color:#98a2b3;font-size:14px; }
body.yf-frontend-page-about .yf-marketplace-empty { padding:18px;color:var(--yf-brand-muted);background:#f8fafc;border:1px dashed #d9e0ea;border-radius:16px;font-size:12px; }

@media (max-width: 767.98px) {
    body.yf-frontend-page-about .yf-marketplace-intro { flex-direction:column; }
    body.yf-frontend-page-about .yf-marketplace-grid { grid-template-columns:1fr; }
}