body {
            font-family: Montserrat, sans-serif;
        }
        .testimonial-slider {
            transition: transform 0.5s ease-in-out;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

/* BerkahEsport API — visual system aligned with the main portfolio. */
:root {
    --be-bg: #16100a;
    --be-surface: #21160b;
    --be-card: rgba(48, 32, 13, .76);
    --be-text: #fffaf2;
    --be-muted: #c2b5a6;
    --be-line: rgba(255, 255, 255, .11);
    --be-primary: #ffb703;
    --be-secondary: #fb8500;
    --be-accent: #ff6b35;
    --be-gradient: linear-gradient(135deg, #ffca3a 0%, #fb8500 56%, #ff6b35 100%);
}

html { scroll-behavior: smooth; }
body.api-page {
    margin: 0;
    background: var(--be-bg) !important;
    color: var(--be-text) !important;
    font-family: Inter, Montserrat, system-ui, sans-serif;
    line-height: 1.6;
}
.api-shell {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 0%, rgba(251, 133, 0, .16), transparent 29rem),
        radial-gradient(circle at -7% 26%, rgba(255, 183, 3, .09), transparent 25rem),
        var(--be-bg) !important;
}
.api-hero {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 104px 24px 88px !important;
}
.api-hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 440px;
    height: 440px;
    top: -185px;
    right: -170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 183, 3, .15), transparent 67%);
    pointer-events: none;
}
.api-hero > * { position: relative; z-index: 1; }
.api-hero > img {
    width: 118px !important;
    height: 118px !important;
    margin-bottom: 27px !important;
    border: 4px solid transparent !important;
    background: linear-gradient(var(--be-bg), var(--be-bg)) padding-box, var(--be-gradient) border-box;
    box-shadow: 0 0 0 7px rgba(255, 183, 3, .06), 0 14px 35px rgba(0, 0, 0, .32) !important;
}
.api-eyebrow, .section-heading > p {
    margin: 0 0 11px !important;
    color: var(--be-primary) !important;
    font-size: .73rem !important;
    font-weight: 800 !important;
    letter-spacing: .15em;
}
.api-title {
    max-width: 770px;
    margin: 0 auto 16px !important;
    color: var(--be-text) !important;
    font-size: clamp(2.45rem, 6.2vw, 4.85rem) !important;
    line-height: 1.08;
    letter-spacing: -.065em;
}
.api-title span, .section-heading h2 span {
    color: transparent;
    background: var(--be-gradient);
    background-clip: text;
    -webkit-background-clip: text;
}
.api-lead {
    max-width: 640px;
    margin: 0 auto !important;
    color: var(--be-muted) !important;
    font-size: clamp(.97rem, 2vw, 1.12rem) !important;
    opacity: 1 !important;
}
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 29px 0 31px; }
.api-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 47px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.api-button:hover { transform: translateY(-3px); }
.api-button-primary { color: #2b1a00; background: var(--be-gradient); box-shadow: 0 12px 30px rgba(251, 133, 0, .25); }
.api-button-secondary { color: var(--be-text); border-color: var(--be-line); background: rgba(255, 255, 255, .04); }
.api-button-secondary:hover { border-color: rgba(255, 183, 3, .4); background: rgba(255, 183, 3, .08); }
.social-links { gap: 9px !important; }
.social-links a { border-radius: 7px; overflow: hidden; box-shadow: 0 5px 12px rgba(0, 0, 0, .16); }
.social-links a:hover { transform: translateY(-3px) scale(1.04) !important; }

.api-products {
    padding: 82px 24px 94px !important;
    background: linear-gradient(180deg, rgba(33, 22, 11, .96), var(--be-surface)) !important;
    border-top: 1px solid var(--be-line);
    border-bottom: 1px solid var(--be-line);
}
.section-heading { max-width: 650px; margin: 0 auto 37px; text-align: center; }
.section-heading h2 { margin: 0 0 8px !important; color: var(--be-text) !important; font-size: clamp(2rem, 4vw, 3rem) !important; letter-spacing: -.055em; }
.section-heading small { color: var(--be-muted); font-size: .95rem; }
.api-products .grid { max-width: 850px !important; gap: 18px !important; }
.product-card {
    border: 1px solid rgba(255, 183, 3, .27) !important;
    border-radius: 16px !important;
    color: var(--be-text) !important;
    background: linear-gradient(145deg, rgba(60, 41, 15, .96), rgba(31, 21, 10, .96)) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .21) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.product-card:hover { transform: translateY(-7px) !important; border-color: rgba(255, 202, 58, .65) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, .31), 0 0 24px rgba(251, 133, 0, .12) !important; }
.product-card .p-4 { padding: 29px !important; background: transparent !important; }
.product-card h3 { margin: 0 0 14px !important; color: var(--be-text); font-size: 1.38rem !important; }
.product-card .text-gray-600 { color: var(--be-muted) !important; }
.product-card .text-gray-500 { color: #9e9080 !important; }
.product-card .text-red-600 { color: #ffbd64 !important; }
.product-card button { border-radius: 9px !important; background: var(--be-gradient) !important; color: #2d1a00 !important; font-weight: 800; }
.product-card button:hover { filter: brightness(1.08); }
.product-card .bg-yellow-400 { background: #ffca3a !important; color: #3a2500 !important; }.product-card .bg-red-500 { background: #dc5530 !important; }

.api-testimonials { padding: 82px 24px 94px !important; background: var(--be-bg) !important; }
.api-testimonials .section-heading h2 { color: var(--be-text) !important; }
.api-testimonials .section-heading > p { color: var(--be-primary) !important; }
.api-testimonials .max-w-4xl { max-width: 850px !important; }
.api-testimonials .relative.h-48 { height: min(50vw, 380px) !important; min-height: 205px; border: 1px solid var(--be-line); border-radius: 16px !important; box-shadow: 0 16px 35px rgba(0, 0, 0, .26); }
.api-testimonials img { filter: saturate(.88) contrast(1.04) brightness(.82); }
.api-testimonials .testimonial-dot { background: var(--be-primary) !important; box-shadow: 0 0 11px rgba(255, 183, 3, .46); }

.api-footer { padding: 28px 24px !important; background: #120d08 !important; border-top: 1px solid var(--be-line); }.api-footer p { color: var(--be-muted); font-size: .81rem; }
.ad-overlay { background: rgba(10, 6, 2, .76) !important; backdrop-filter: blur(7px); }
.ad-dialog { padding: 9px; border: 1px solid rgba(255, 183, 3, .35); border-radius: 17px; background: #2a1a0c !important; box-shadow: 0 22px 70px rgba(0, 0, 0, .53), 0 0 36px rgba(251, 133, 0, .17); animation: modal-in .35s ease both !important; }
.ad-dialog > .absolute.inset-0 { display: none; }.ad-dialog > .relative.bg-white { padding: 0 !important; overflow: hidden; border-radius: 11px !important; background: transparent !important; }.ad-dialog img { display: block; max-width: min(82vw, 385px) !important; }.ad-dialog button { z-index: 4; display: grid; place-items: center; width: 29px; height: 29px; padding: 5px !important; border: 2px solid var(--be-bg); background: var(--be-accent) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 640px) { .api-hero { padding: 75px 18px 60px !important; }.api-hero > img { width: 96px !important; height: 96px !important; }.api-title { font-size: 2.55rem !important; }.api-products, .api-testimonials { padding: 63px 16px 70px !important; }.product-card .p-4 { padding: 23px !important; }.ad-dialog img { max-width: 82vw !important; }.social-links img { height: 24px !important; } }

/* Native documentation page */
.docs-page { min-height: 100vh; background: radial-gradient(circle at 82% 0%, rgba(251, 133, 0, .13), transparent 28rem), var(--be-bg); }
.docs-nav { width: min(1120px, calc(100% - 40px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--be-line); }
.docs-brand { display: inline-flex; gap: 8px; align-items: center; color: var(--be-text); font-size: .85rem; font-weight: 800; letter-spacing: .065em; }.docs-brand > span:first-child { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #2b1a00; background: var(--be-gradient); font-size: .66rem; }.docs-brand > span:last-child { color: var(--be-primary); }.docs-back { color: var(--be-muted); font-size: .8rem; font-weight: 600; }.docs-back:hover { color: var(--be-primary); }
.docs-hero { width: min(1120px, calc(100% - 40px)); padding: 80px 0 53px; margin: 0 auto; }.docs-hero h1 { max-width: 700px; margin: 0 0 13px; color: var(--be-text); font-size: clamp(2.45rem, 5vw, 4.15rem); line-height: 1.08; letter-spacing: -.06em; }.docs-hero h1 span { color: transparent; background: var(--be-gradient); background-clip: text; -webkit-background-clip: text; }.docs-hero > p:last-child { max-width: 630px; color: var(--be-muted); font-size: 1.02rem; }.docs-hero code, .docs-section code { padding: 2px 5px; border-radius: 4px; color: #ffd071; background: rgba(255, 183, 3, .1); }
.docs-content { width: min(1120px, calc(100% - 40px)); display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 52px; margin: 0 auto; padding-bottom: 96px; }.docs-side { position: sticky; top: 22px; align-self: start; display: grid; gap: 5px; padding: 19px 0; }.docs-side p { margin: 0 0 8px; color: #9e8f80; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }.docs-side a { padding: 7px 10px; border-radius: 7px; color: var(--be-muted); font-size: .82rem; }.docs-side a:hover { color: var(--be-primary); background: rgba(255, 183, 3, .07); }
.docs-main { display: grid; gap: 21px; }.docs-section { padding: 29px; border: 1px solid var(--be-line); border-radius: 16px; background: rgba(255, 255, 255, .025); }.docs-section .api-eyebrow { margin-bottom: 7px !important; }.docs-section h2 { margin: 0 0 17px; color: var(--be-text); font-size: 1.45rem; letter-spacing: -.035em; }.docs-section p, .docs-section li { color: var(--be-muted); font-size: .87rem; }.docs-section ol { padding-left: 20px; margin: 0 0 22px; }.docs-section li + li { margin-top: 6px; }.docs-code { padding: 16px 17px; border: 1px solid rgba(255, 183, 3, .18); border-radius: 10px; color: #b5d68f; background: #1a120a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; overflow-x: auto; }.docs-code span, .endpoint-grid b { color: #ffce5b; }.endpoint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.endpoint-grid a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 10px; padding: 14px; border: 1px solid var(--be-line); border-radius: 10px; background: rgba(0, 0, 0, .13); transition: .2s ease; }.endpoint-grid a:hover { transform: translateY(-2px); border-color: rgba(255, 183, 3, .42); background: rgba(255, 183, 3, .06); }.endpoint-grid b { font-size: .66rem; }.endpoint-grid span { color: var(--be-text); font-family: ui-monospace, monospace; font-size: .76rem; }.endpoint-grid small { grid-column: 2; color: #a69787; font-size: .67rem; }
@media (max-width: 720px) { .docs-nav, .docs-hero, .docs-content { width: min(100% - 32px, 1120px); }.docs-hero { padding: 58px 0 37px; }.docs-content { grid-template-columns: 1fr; gap: 21px; }.docs-side { position: static; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0; }.docs-side p { grid-column: 1 / -1; }.docs-side a { padding: 6px; font-size: .74rem; }.docs-section { padding: 22px; }.endpoint-grid { grid-template-columns: 1fr; } }

.endpoint-catalog { display: grid; gap: 17px; margin-top: 24px; }.endpoint-category { padding: 17px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: rgba(0, 0, 0, .12); }.endpoint-category h3 { margin: 0 0 12px; color: var(--be-primary); font-size: .77rem; letter-spacing: .05em; }.endpoint-list { display: flex; flex-wrap: wrap; gap: 7px; }.endpoint-list code { padding: 5px 7px; color: #dacbbb; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); font-size: .69rem; white-space: nowrap; }

/* Apache/XAMPP entry pages: /api-be/ and /api-be/docs.php */
.apache-api-shell { min-height: 100vh; }.apache-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }.apache-nav { position: relative; z-index: 2; border-bottom: 1px solid var(--be-line); background: rgba(22, 16, 10, .8); backdrop-filter: blur(16px); }.apache-nav-content, .apache-footer > div { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.apache-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--be-text); font-size: .86rem; font-weight: 800; letter-spacing: .065em; }.apache-brand > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #281800; background: var(--be-gradient); font-size: .66rem; }.apache-brand em { color: var(--be-primary); font-style: normal; }.apache-nav-links { display: flex; align-items: center; gap: 22px; }.apache-nav-links > a:not(.apache-nav-cta) { color: var(--be-muted); font-size: .8rem; font-weight: 600; }.apache-nav-links > a:hover { color: var(--be-primary); }.apache-nav-cta { padding: 9px 13px; border: 1px solid rgba(255, 183, 3, .32); border-radius: 9px; color: var(--be-primary); background: rgba(255, 183, 3, .07); font-size: .8rem; font-weight: 700; }
.apache-hero { position: relative; padding: 98px 0 88px; overflow: hidden; }.apache-hero::before { content: ''; position: absolute; top: -210px; right: -170px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 183, 3, .17), transparent 66%); pointer-events: none; }.apache-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 58px; }.api-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #8ddd4c; box-shadow: 0 0 0 4px rgba(141, 221, 76, .13); }.apache-hero h1 { max-width: 680px; margin: 0 0 20px; color: var(--be-text); font-size: clamp(2.7rem, 5vw, 4.5rem); line-height: 1.06; letter-spacing: -.065em; }.apache-hero h1 span, .apache-section-head h2 span, .apache-how h2 span { color: transparent; background: var(--be-gradient); background-clip: text; -webkit-background-clip: text; }.apache-lead, .apache-section-head > p:last-child, .apache-how > div > p { max-width: 570px; color: var(--be-muted); font-size: 1rem; }.apache-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 29px; color: #aa9b8c; font-size: .76rem; }.apache-code-window { overflow: hidden; border: 1px solid rgba(255, 183, 3, .22); border-radius: 17px; background: linear-gradient(150deg, rgba(62, 41, 14, .94), rgba(27, 19, 10, .94)); box-shadow: 0 18px 50px rgba(0, 0, 0, .3), 0 0 65px rgba(251, 133, 0, .09); }.apache-window-bar { display: flex; align-items: center; gap: 7px; min-height: 45px; padding: 0 15px; border-bottom: 1px solid var(--be-line); }.apache-window-bar b { width: 8px; height: 8px; border-radius: 50%; background: #ed6c5c; }.apache-window-bar b:nth-child(2) { background: #f2bd4c; }.apache-window-bar b:nth-child(3) { background: #62c553; }.apache-window-bar span { margin-left: 7px; color: #b8aa9a; font: .7rem ui-monospace, monospace; }.apache-code-window pre { padding: 23px; color: #d8ccbf; }.apache-code-window code small { color: #897c70; }.apache-code-window code strong { color: #ffd06c; }.apache-code-window code em { color: #f2b49d; font-style: normal; }.apache-code-window code mark { color: #ffc05c; background: none; }.apache-code-window code u { color: #f7d07c; text-decoration: none; }.apache-code-window code i { color: #b8d791; font-style: normal; }.apache-code-window code b { color: #97c9e7; }.apache-code-window footer { display: flex; justify-content: space-between; padding: 13px 17px; border-top: 1px solid var(--be-line); color: #948575; font-size: .69rem; }.apache-code-window footer i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #74c44d; }
.apache-stats { border-top: 1px solid var(--be-line); border-bottom: 1px solid var(--be-line); background: rgba(0, 0, 0, .1); }.apache-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.apache-stats-grid div { position: relative; padding: 29px 23px; }.apache-stats-grid div + div::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--be-line); }.apache-stats-grid b { display: block; color: var(--be-primary); font-size: 1.6rem; letter-spacing: -.045em; }.apache-stats-grid span { color: var(--be-muted); font-size: .77rem; }.apache-features { padding: 100px 0; background: var(--be-surface); }.apache-section-head { max-width: 670px; margin-bottom: 40px; }.apache-section-head h2, .apache-how h2 { margin: 0 0 13px; color: var(--be-text); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.15; letter-spacing: -.055em; }.apache-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.apache-feature-grid article { min-height: 266px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--be-line); border-radius: 15px; background: rgba(255, 255, 255, .025); transition: .25s ease; }.apache-feature-grid article:hover { transform: translateY(-7px); border-color: rgba(255, 183, 3, .4); background: rgba(255, 183, 3, .045); }.apache-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 21px; border-radius: 12px; font-size: 1.25rem; font-weight: 800; }.apache-icon.amber { color: #ffce5b; background: rgba(255, 183, 3, .14); }.apache-icon.orange { color: #ffad5c; background: rgba(251, 133, 0, .14); }.apache-icon.gold { color: #ffd37a; background: rgba(255, 202, 58, .11); }.apache-icon.coral { color: #ff9b79; background: rgba(255, 107, 53, .13); }.apache-feature-grid h3 { margin: 0 0 8px; font-size: 1.04rem; }.apache-feature-grid p { color: var(--be-muted); font-size: .81rem; }.apache-feature-grid a { margin-top: auto; color: var(--be-primary); font-size: .77rem; font-weight: 700; }.apache-how { padding: 100px 0; background: radial-gradient(circle at 82% 55%, rgba(251, 133, 0, .11), transparent 24rem), var(--be-bg); }.apache-how-grid { display: grid; grid-template-columns: 1fr .86fr; align-items: center; gap: 76px; }.apache-how ol { display: grid; gap: 18px; margin: 31px 0 0; padding: 0; list-style: none; }.apache-how li { display: flex; gap: 13px; }.apache-how li > b { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; color: #2d1a00; background: var(--be-gradient); border-radius: 50%; font-size: .72rem; }.apache-how li strong { font-size: .87rem; }.apache-how li p { margin: 2px 0 0; color: var(--be-muted); font-size: .79rem; }.apache-how code { padding: 2px 4px; color: #ffce72; background: rgba(255, 183, 3, .1); border-radius: 4px; }.apache-how aside { padding: 24px; border: 1px solid rgba(255, 183, 3, .2); border-radius: 16px; background: linear-gradient(150deg, rgba(62, 41, 14, .88), rgba(28, 20, 11, .92)); }.apache-how aside > p { margin: 0 0 11px; color: var(--be-primary); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }.apache-how aside pre { margin: 0 0 25px; padding: 19px; border-radius: 10px; color: #b6d78f; background: #171009; white-space: pre-wrap; }.apache-how aside .api-button { width: 100%; }.apache-cta { padding: 0 0 96px; }.apache-cta > div { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px 47px; border: 1px solid rgba(255, 183, 3, .22); border-radius: 19px; background: linear-gradient(100deg, rgba(255, 183, 3, .1), rgba(251, 133, 0, .06)); }.apache-cta h2 { max-width: 640px; margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.18; letter-spacing: -.05em; }.apache-footer { border-top: 1px solid var(--be-line); background: #120d08; }.apache-footer p { margin: 0; color: var(--be-muted); font-size: .77rem; }.apache-footer a:last-child { color: var(--be-primary); font-size: .78rem; font-weight: 700; }
.apache-docs-page .docs-hero code { overflow-wrap: anywhere; }.php-endpoint-list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 6px; background: rgba(255, 255, 255, .035); transition: .2s ease; }.php-endpoint-list a:hover { border-color: rgba(255, 183, 3, .4); background: rgba(255, 183, 3, .07); }.php-endpoint-list a b { color: var(--be-primary); font-size: .62rem; }.php-endpoint-list a code { padding: 0; border: 0; background: none; color: #dbccbb; }
@media (max-width: 900px) { .apache-hero-grid, .apache-how-grid { grid-template-columns: 1fr; gap: 42px; }.apache-feature-grid { grid-template-columns: repeat(2, 1fr); }.apache-code-window { max-width: 620px; }.apache-cta > div { padding: 34px; } }
@media (max-width: 600px) { .apache-container { width: min(100% - 32px, 1120px); }.apache-nav-content { min-height: 67px; }.apache-brand { font-size: .75rem; }.apache-brand > span { width: 29px; height: 29px; }.apache-nav-links > a:not(.apache-nav-cta) { display: none; }.apache-hero { padding: 64px 0; }.apache-hero h1 { font-size: 2.55rem; }.apache-lead { font-size: .95rem; }.hero-actions .api-button { width: 100%; }.apache-trust { display: grid; gap: 7px; }.apache-stats-grid { grid-template-columns: repeat(2, 1fr); }.apache-stats-grid div { padding: 22px 13px; }.apache-stats-grid div + div::before { display: none; }.apache-stats-grid div:nth-child(even)::before { display: block; }.apache-features, .apache-how { padding: 68px 0; }.apache-feature-grid { grid-template-columns: 1fr; }.apache-feature-grid article { min-height: 215px; }.apache-cta { padding-bottom: 68px; }.apache-cta > div, .apache-footer > div { flex-direction: column; align-items: flex-start; }.apache-cta > div { padding: 27px; }.apache-cta .api-button { width: 100%; }.apache-footer > div { min-height: auto; padding: 23px 0; gap: 12px; } }

/* ========================================
   TEMA API — selaras dengan halaman utama htdocs
======================================== */
body.api-page {
    transition: background-color .25s ease, color .25s ease;
}

/* Tombol ini memakai ukuran, bentuk, dan animasi yang sama dengan htdocs. */
.theme-toggle {
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    color: var(--be-text);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--be-line);
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease;
}
.theme-toggle:hover {
    background: rgba(255, 183, 3, .1);
    border-color: var(--be-primary);
    box-shadow: 0 0 20px rgba(255, 183, 3, .25);
    transform: scale(1.1);
}
.theme-toggle:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(255, 183, 3, .58);
    outline-offset: 3px;
}
.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
    position: absolute;
    color: currentColor;
    transition: all .3s ease;
}
.theme-toggle .sun-icon { opacity: 0; transform: scale(0) rotate(-90deg); }
.theme-toggle .moon-icon { opacity: 1; transform: scale(1) rotate(0); }
body.light-theme .theme-toggle {
    color: #16100a;
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .1);
}
body.light-theme .theme-toggle:hover {
    background: rgba(255, 183, 3, .12);
    border-color: #ffb703;
    box-shadow: 0 0 20px rgba(255, 183, 3, .25);
}
body.light-theme .theme-toggle .sun-icon { opacity: 1; transform: scale(1) rotate(0); }
body.light-theme .theme-toggle .moon-icon { opacity: 0; transform: scale(0) rotate(90deg); }

/* Variabel terang menjaga seluruh beranda dan dokumentasi menggunakan kontras yang konsisten. */
body.api-page.light-theme {
    --be-bg: #fffdf8;
    --be-surface: #f6f1e9;
    --be-card: #ffffff;
    --be-text: #24180d;
    --be-muted: #5b4d40;
    --be-line: rgba(79, 59, 35, .16);
    background: var(--be-bg) !important;
    color: var(--be-text) !important;
}
body.light-theme .api-shell {
    background: radial-gradient(circle at 82% 0%, rgba(251, 133, 0, .14), transparent 29rem), radial-gradient(circle at -7% 26%, rgba(255, 183, 3, .11), transparent 25rem), var(--be-bg) !important;
}
body.light-theme .apache-nav,
body.light-theme .api-theme-nav {
    background: rgba(255, 253, 248, .88);
    border-color: var(--be-line);
}
body.light-theme .docs-page {
    background: radial-gradient(circle at 82% 0%, rgba(251, 133, 0, .11), transparent 28rem), var(--be-bg);
}
body.light-theme .apache-brand,
body.light-theme .docs-brand,
body.light-theme .api-title,
body.light-theme .section-heading h2,
body.light-theme .apache-hero h1,
body.light-theme .apache-section-head h2,
body.light-theme .apache-how h2,
body.light-theme .docs-hero h1,
body.light-theme .docs-section h2,
body.light-theme .endpoint-grid span {
    color: var(--be-text) !important;
}
body.light-theme .api-lead,
body.light-theme .apache-lead,
body.light-theme .apache-section-head > p:last-child,
body.light-theme .apache-how > div > p,
body.light-theme .docs-hero > p:last-child,
body.light-theme .docs-section p,
body.light-theme .docs-section li,
body.light-theme .section-heading small,
body.light-theme .product-card .text-gray-600,
body.light-theme .apache-feature-grid p,
body.light-theme .apache-how li p,
body.light-theme .apache-trust,
body.light-theme .apache-footer p,
body.light-theme .docs-back,
body.light-theme .docs-side a {
    color: var(--be-muted) !important;
}
body.light-theme .api-button-secondary {
    color: #352416;
    background: rgba(255, 255, 255, .8);
    border-color: rgba(79, 59, 35, .2);
}
body.light-theme .api-button-secondary:hover {
    color: #6f3900;
    border-color: rgba(196, 112, 0, .55);
    background: #fff4df;
}
body.light-theme .api-products,
body.light-theme .apache-features {
    background: linear-gradient(180deg, #f8f4ed, #f3ede4) !important;
    border-color: var(--be-line);
}
body.light-theme .api-testimonials,
body.light-theme .apache-how {
    background: radial-gradient(circle at 82% 55%, rgba(251, 133, 0, .1), transparent 24rem), var(--be-bg) !important;
}
body.light-theme .product-card,
body.light-theme .apache-feature-grid article,
body.light-theme .docs-section {
    background: #ffffff !important;
    border-color: rgba(86, 65, 36, .16) !important;
    box-shadow: 0 10px 28px rgba(72, 51, 24, .08) !important;
}
body.light-theme .product-card:hover,
body.light-theme .apache-feature-grid article:hover {
    background: #ffffff !important;
    border-color: rgba(196, 112, 0, .46) !important;
    box-shadow: 0 18px 38px rgba(72, 51, 24, .14) !important;
}
body.light-theme .product-card h3,
body.light-theme .apache-feature-grid h3,
body.light-theme .apache-how li strong {
    color: #302317;
}
body.light-theme .apache-stats {
    background: rgba(255, 255, 255, .62);
    border-color: var(--be-line);
}
body.light-theme .apache-code-window,
body.light-theme .apache-how aside {
    background: linear-gradient(150deg, #fffaf2, #f7ecdc);
    border-color: rgba(196, 112, 0, .27);
    box-shadow: 0 18px 45px rgba(72, 51, 24, .12);
}
body.light-theme .apache-window-bar,
body.light-theme .apache-code-window footer {
    border-color: var(--be-line);
}
body.light-theme .apache-window-bar span,
body.light-theme .apache-code-window footer,
body.light-theme .apache-code-window code small {
    color: #765f4a;
}
body.light-theme .apache-code-window pre,
body.light-theme .apache-how aside pre,
body.light-theme .docs-code {
    color: #3f362c;
    background: #f6eee2;
    border-color: rgba(196, 112, 0, .2);
}
body.light-theme .docs-hero code,
body.light-theme .docs-section code,
body.light-theme .apache-how code {
    color: #7a3c00;
    background: #fff0d3;
}
body.light-theme .endpoint-grid a,
body.light-theme .endpoint-category,
body.light-theme .php-endpoint-list a {
    background: #fffdf9;
    border-color: rgba(86, 65, 36, .15);
}
body.light-theme .endpoint-grid a:hover,
body.light-theme .php-endpoint-list a:hover {
    background: #fff4df;
    border-color: rgba(196, 112, 0, .46);
}
body.light-theme .endpoint-list code,
body.light-theme .php-endpoint-list a code {
    color: #5d4630;
    background: #fff8ec;
    border-color: rgba(86, 65, 36, .14);
}
body.light-theme .apache-cta > div {
    background: linear-gradient(100deg, rgba(255, 183, 3, .15), rgba(251, 133, 0, .08));
    border-color: rgba(196, 112, 0, .3);
}
body.light-theme .apache-footer {
    background: #f4ede3;
    border-color: var(--be-line);
}
body.light-theme .ad-overlay { background: rgba(41, 29, 17, .48) !important; }

@media (max-width: 600px) {
    .theme-toggle { flex-basis: 42px; width: 42px; height: 42px; }
    .docs-nav { gap: 12px; }
    .docs-back { text-align: right; }
    .docs-back { font-size: 0; }
    .docs-back::after { content: '←'; font-size: 1.1rem; }
    .api-theme-nav .apache-nav-cta { padding: 10px; font-size: 0; }
    .api-theme-nav .apache-nav-cta span { font-size: .9rem; }
}