/* ============================================
   IMIN Go-Print Material Design Styles
   ============================================ */

/* ============================================
   RESET & BASE STYLES
============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --bg-primary: #0b0b0c;
    --surface-variant: #151517;
    --accent-primary: #B8FF1B;
    --accent-secondary: #6CFF00;
    --text-primary: #E6E6E6;
    --border-subtle: #3A3A3D;
    
    /* Spacing */
    --sidebar-collapsed: 72px;
    --sidebar-expanded: 320px;
    
    /* Typography */
    --font-body: 'Roboto Flex', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ============================================
   SIDEBAR NAVIGATION RAIL
============================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    width: 260px;
    background-color: var(--surface-variant);
    display: flex;
    flex-direction: column;
    padding: 64px 12px 20px;
    z-index: 1001;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
}

.sidebar.expanded {
    left: 0;
}

/* Overlay backdrop */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
    z-index: 1000;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    background: var(--surface-variant);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: 1002;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
    transform: scale(1.05);
}

.sidebar-toggle .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.3s;
}

.sidebar.expanded ~ .sidebar-toggle .material-symbols-outlined {
    transform: rotate(90deg);
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
}

.sidebar-footer {
    margin-top: 16px;
    padding: 12px 8px 4px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    opacity: 0.45;
    line-height: 1.6;
    letter-spacing: 0.3px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-height: 40px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.nav-item .material-symbols-outlined {
    font-size: 20px;
    min-width: 20px;
}

.nav-item:hover {
    background: rgba(184, 255, 27, 0.1);
}

.nav-item.active {
    background: var(--surface-variant);
    color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Ripple Effect — span injected by main.js */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(184, 255, 27, 0.25);
    transform: scale(0);
    animation: ripple-anim 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-anim {
    to { transform: scale(2.5); opacity: 0; }
}

/* ============================================
   MAIN CONTENT AREA
============================================ */
.main-content {
    margin-left: 0;
    min-height: 100vh;
}

/* ============================================
   HERO SECTION
============================================ */
.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 20px 60px 60px;
    min-height: 90vh;
    align-items: center;
}

.hero-content h1 {
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 24px;
    letter-spacing: -2px;
}

.hero-content p {
    font-size: 20px;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 600px;
    margin-bottom: 32px;
}

.hero-subtitle {
    display: inline-block;
    background: linear-gradient(135deg, #B8FF1B 0%, #6CFF00 100%);
    color: var(--bg-primary);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.hero-visual {
    position: relative;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #87C717 0%, #B8FF1B 50%, #EFFF3B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background: linear-gradient(135deg, #87C717 0%, #B8FF1B 50%, #EFFF3B 100%);
    }
    50% {
        background: linear-gradient(135deg, #6CFF00 0%, #B8FF1B 50%, #FFFF00 100%);
    }
}

/* Animated Circle */
.hero-circle {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #EFFF3B 0%, #CDFF3B 50%, #B8FF1B 100%);
    border-radius: 50%;
    animation: pulseCircle 3s ease-in-out infinite;
    z-index: 2;
    box-shadow: 0 0 80px rgba(184, 255, 27, 0.4);
}

/* Colorful stripes on circle */
.hero-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 60deg,
        rgba(11, 11, 12, 0.7) 60deg 90deg,
        transparent 90deg 150deg,
        rgba(11, 11, 12, 0.7) 150deg 180deg,
        transparent 180deg 240deg,
        rgba(11, 11, 12, 0.7) 240deg 270deg,
        transparent 270deg 330deg,
        rgba(11, 11, 12, 0.7) 330deg 360deg
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rotateStripes 8s linear infinite;
}

@keyframes rotateStripes {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulseCircle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.08) rotate(2deg);
        opacity: 0.92;
    }
}

/* Animated Rectangles/Boxes */
.hero-box {
    position: absolute;
    background: linear-gradient(180deg, rgba(11, 11, 12, 0.7) 0%, rgba(11, 11, 12, 0.5) 100%);
    animation: floatBox 5s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.hero-box:nth-child(1) {
    width: 130px;
    height: 300px;
    top: 12%;
    left: 6%;
    border-radius: 65px;
    animation-delay: 0s;
}

.hero-box:nth-child(2) {
    width: 110px;
    height: 260px;
    top: 18%;
    right: 6%;
    border-radius: 55px;
    animation-delay: 0.8s;
}

.hero-box:nth-child(3) {
    width: 90px;
    height: 220px;
    bottom: 12%;
    right: 10%;
    border-radius: 45px;
    animation-delay: 1.6s;
}

@keyframes floatBox {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-20px) translateX(5px) rotate(2deg) scale(1.02);
    }
    50% {
        transform: translateY(-35px) translateX(-5px) rotate(-2deg) scale(1.05);
    }
    75% {
        transform: translateY(-20px) translateX(5px) rotate(1deg) scale(1.02);
    }
}

/* Decorative dots */
.hero-visual::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(11, 11, 12, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    animation: dotsMove 20s linear infinite;
}

@keyframes dotsMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 30px 30px;
    }
}

/* Pause Button */
.pause-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: rgba(11, 11, 12, 0.6);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

.pause-button:hover {
    background: rgba(11, 11, 12, 0.8);
    transform: scale(1.1);
}

.pause-button .material-symbols-outlined {
    color: #B8FF1B;
    font-size: 24px;
}

/* ============================================
   CARD GRID SECTION
============================================ */
.card-grid-section {
    padding: 60px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.card {
    background: var(--surface-variant);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(184, 255, 27, 0.2);
}

.card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #B8FF1B 0%, #6CFF00 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--bg-primary);
}

.card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.card p {
    font-size: 16px;
    opacity: 0.8;
    line-height: 1.6;
}

/* ============================================
   FOOTER
============================================ */
footer {
    background: var(--surface-variant);
    padding: 60px;
    border-top: 1px solid var(--border-subtle);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-brand h3 {
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 1.2;
}

.footer-brand p {
    opacity: 0.8;
    line-height: 1.8;
    margin-bottom: 24px;
    word-wrap: break-word;
    hyphens: auto;
    text-align: justify;
}

.footer-section h4 {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.footer-section a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 12px;
    opacity: 0.8;
    transition: all 0.2s;
    font-size: 15px;
}

.footer-section a:hover {
    opacity: 1;
    color: var(--accent-primary);
    padding-left: 8px;
}

.footer-section a .material-symbols-outlined {
    font-size: 20px;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    opacity: 0.6;
    font-size: 14px;
    line-height: 1.5;
}

.footer-bottom p {
    word-wrap: break-word;
    hyphens: auto;
    margin: 0;
}

.footer-logo-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 24px;
    flex-wrap: wrap;
}

.footer-logo-section span:first-child {
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s;
    padding: 12px 20px;
    border-radius: 12px;
    background: rgba(184, 255, 27, 0.05);
}

.footer-logo-link:hover {
    background: rgba(184, 255, 27, 0.15);
    transform: translateX(5px);
}

.footer-logo-link img {
    height: 40px;
    filter: brightness(0) invert(1);
}

.footer-logo-link span {
    font-weight: 600;
    font-size: 16px;
}

/* ============================================
   PRINT STYLES
============================================ */
@media print {
    .sidebar,
    .sidebar-toggle,
    .sidebar-overlay,
    footer {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .hero-visual {
        display: none;
    }
}

/* ============================================
   RESPONSIVE
============================================ */

/* Tablet styles */
@media (max-width: 1200px) {
    .main-content {
        padding: 0 20px;
    }
    
    .hero-section {
        padding: 60px 40px;
    }
    
    .card-grid-section {
        padding: 60px 40px;
    }
}

@media (max-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr;
        padding: 50px 30px;
        gap: 40px;
    }

    .hero-content h1 {
        font-size: 64px;
        line-height: 1.1;
    }

    .hero-content p {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .hero-visual {
        height: 400px;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    /* Documentation specific */
    .docs-section {
        padding: 60px 40px;
    }
    
    .docs-title {
        font-size: 36px;
    }
    
    /* Command table responsive for tablet */
    .command-table .command-row {
        grid-template-columns: 180px 1fr 120px;
        gap: 12px;
        padding: 14px;
    }
    
    .command-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
    
    .command-list .command-item {
        gap: 12px;
        padding: 14px;
    }
    
    .command-item code {
        min-width: 150px;
        font-size: 13px;
    }
    
    .command-card {
        padding: 18px;
    }
    
    .command-preview {
        font-size: 13px;
    }
    
    /* Playground specific */
    .playground-section {
        padding: 60px 40px;
    }
    
    .demo-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .sidebar {
        width: 280px;
        left: -280px;
        padding: 60px 20px 20px;
    }

    .hero-section {
        padding: 40px 20px;
        gap: 30px;
    }

    .hero-content h1 {
        font-size: 42px;
        line-height: 1.1;
        letter-spacing: -1px;
    }

    .hero-content p {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .hero-subtitle {
        font-size: 12px;
        padding: 6px 16px;
        margin-bottom: 20px;
    }

    /* IMIN AppStore info responsive */
    .imin-appstore-info {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    .imin-appstore-info img {
        height: 20px !important;
        width: 20px !important;
    }

    .imin-appstore-info div:first-of-type {
        font-size: 14px !important;
    }

    .imin-appstore-info div:last-of-type {
        font-size: 12px !important;
    }

    .imin-appstore-section {
        padding: 40px 20px !important;
    }

    .imin-appstore-section p {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .imin-appstore-section .contact-buttons,
    .imin-appstore-section div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    .imin-appstore-section a {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    .hero-visual {
        height: 300px;
    }

    .hero-circle {
        width: 250px;
        height: 250px;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card {
        padding: 24px 20px;
    }

    .card h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .card p {
        font-size: 14px;
        line-height: 1.6;
    }

    .card-grid-section {
        padding: 40px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px;
    }

    .footer-brand h3 {
        font-size: 22px !important;
    }

    .footer-brand p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
        text-align: left !important;
        word-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }
    
    /* Fix untuk logo section di mobile */
    .footer-logo-section {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
        text-align: left;
        padding: 16px 0;
    }
    
    .footer-logo-section span:first-child {
        align-self: flex-start;
        margin-bottom: 8px;
        font-size: 13px;
    }
    
    .footer-logo-link {
        padding: 10px 16px;
        border-radius: 8px;
        width: auto;
        justify-content: flex-start;
        align-self: flex-start;
    }
    
    .footer-logo-link img {
        height: 32px;
    }
    
    .footer-logo-link span {
        font-size: 14px;
    }
    
    /* Footer brand styling lebih baik untuk mobile */
    .footer-brand div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    
    .footer-brand img {
        height: 48px !important;
        margin-bottom: 8px;
    }
    
    /* Footer bottom text responsive */
    .footer-bottom {
        font-size: 12px;
        line-height: 1.5;
        text-align: left;
        padding-top: 20px;
    }
    
    .footer-bottom p {
        margin: 0;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    /* Documentation specific */
    .docs-section {
        padding: 40px 20px;
    }
    
    .docs-title {
        font-size: 28px;
        gap: 12px;
    }
    
    .docs-title .material-symbols-outlined {
        font-size: 32px;
    }
    
    .docs-lead {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    /* Command table mobile responsive */
    .command-table .command-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .command-row.command-header {
        text-align: center;
        padding: 12px 8px;
    }
    
    .command-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .command-card {
        padding: 16px;
        text-align: left;
    }
    
    .command-list .command-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
        padding: 12px;
    }
    
    .command-item code {
        min-width: auto;
        width: 100%;
        word-break: break-all;
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .command-preview {
        font-size: 12px;
        white-space: pre-wrap;
        word-break: break-all;
    }
    
    .command-name {
        font-size: 14px;
    }
    
    .command-desc {
        font-size: 12px;
    }
    
    /* Code block responsive */
    .code-block-wrapper {
        margin: 20px 0;
        border-radius: 8px;
    }
    
    .code-block-header {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .code-block pre {
        padding: 12px;
        font-size: 12px;
        line-height: 1.4;
        overflow-x: auto;
    }
    
    /* Requirement box responsive */
    .requirement-box {
        padding: 16px !important;
        margin-bottom: 30px !important;
    }
    
    .requirement-box div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
    }
    
    .requirement-box img {
        height: 32px !important;
        width: 32px !important;
    }
    
    .requirement-box h3 {
        font-size: 18px !important;
    }
    
    .requirement-box h4 {
        font-size: 14px !important;
    }
    
    .requirement-box p {
        font-size: 13px !important;
    }
    
    .requirement-box div[style*="flex-wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .requirement-box div[style*="flex-wrap"] > div {
        text-align: center !important;
    }
    
    /* Playground specific */
    .playground-section {
        padding: 40px 20px;
    }
    
    .demo-card {
        padding: 24px 20px;
        border-radius: 16px;
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-visual {
        height: 250px;
    }
    
    .hero-circle {
        width: 200px;
        height: 200px;
    }
    
    .card {
        padding: 20px 16px;
    }
    
    .sidebar-toggle {
        top: 16px;
        left: 16px;
        width: 48px;
        height: 48px;
        padding: 10px;
    }

    /* IMIN AppStore info for small mobile */
    .imin-appstore-info {
        flex-direction: column !important;
        gap: 6px !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
        margin: 12px 0 !important;
    }

    .imin-appstore-info img {
        height: 18px !important;
        width: 18px !important;
    }

    .imin-appstore-info div:first-of-type {
        font-size: 12px !important;
    }

    .imin-appstore-info div:last-of-type {
        font-size: 10px !important;
    }

    .imin-appstore-section {
        padding: 30px 16px !important;
    }

    .imin-appstore-section p {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

    .imin-appstore-section a {
        font-size: 12px !important;
        padding: 10px 16px !important;
    }
    
    .hero-section {
        padding: 30px 16px;
    }
    
    .card-grid-section {
        padding: 30px 16px;
    }
    
    .docs-section {
        padding: 30px 16px;
    }
    
    .docs-title {
        font-size: 24px;
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .docs-title .material-symbols-outlined {
        font-size: 28px;
    }
    
    .docs-lead {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    /* Ultra mobile command table */
    .command-table .command-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px;
        border-radius: 6px;
    }
    
    .command-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .command-card {
        padding: 12px;
        border-radius: 8px;
    }
    
    .command-list .command-item {
        padding: 10px;
        border-radius: 6px;
    }
    
    .command-item code {
        font-size: 11px;
        padding: 3px 6px;
        border-radius: 4px;
    }
    
    .command-preview {
        font-size: 11px;
    }
    
    .command-name {
        font-size: 13px;
    }
    
    .command-desc {
        font-size: 11px;
    }
    
    .code-block-wrapper {
        margin: 16px 0;
        border-radius: 6px;
    }
    
    .code-block-header {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .code-block pre {
        padding: 10px;
        font-size: 11px;
        line-height: 1.3;
    }
    
    /* Requirement box for small mobile */
    .requirement-box {
        padding: 12px !important;
        margin-bottom: 24px !important;
        border-radius: 12px !important;
    }
    
    .requirement-box img {
        height: 28px !important;
        width: 28px !important;
    }
    
    .requirement-box h3 {
        font-size: 16px !important;
    }
    
    .requirement-box h4 {
        font-size: 13px !important;
    }
    
    .requirement-box p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    
    .requirement-box div[style*="padding: 20px"] {
        padding: 12px !important;
    }
    
    .requirement-box div[style*="padding: 16px"] {
        padding: 12px !important;
    }
    
    .playground-section {
        padding: 30px 16px;
    }
    
    .footer-content {
        padding: 30px 16px;
        gap: 24px;
    }
    
    .footer-brand h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-brand p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        text-align: left !important;
    }
    
    /* Perbaikan logo section untuk mobile kecil */
    .footer-logo-section {
        padding: 12px 0;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .footer-logo-section span:first-child {
        margin-bottom: 10px;
        font-size: 12px;
        align-self: flex-start;
    }
    
    .footer-logo-link {
        padding: 8px 12px;
        font-size: 13px;
        align-self: flex-start;
        width: auto;
    }
    
    .footer-logo-link img {
        height: 28px;
    }
    
    .footer-logo-link span {
        font-size: 13px;
    }
    
    /* Footer brand div styling untuk mobile kecil */
    .footer-brand div[style*="display: flex"] {
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    
    .footer-brand img {
        height: 40px !important;
    }
    
    /* Footer bottom untuk mobile kecil */
    .footer-bottom {
        font-size: 11px;
        padding-top: 16px;
        margin-top: 24px;
    }
    
    /* Styling khusus untuk span powered by */
    .footer-logo-section span[style*="opacity: 0.7"] {
        font-size: 12px !important;
        margin-bottom: 8px;
        display: block;
        width: 100%;
    }
}

/* ============================================
   INLINE STYLE OVERRIDES FOR RESPONSIVENESS
============================================ */

/* Override inline hero section styles */
.hero-section[style*="padding"] {
    padding: 120px 60px !important;
}

@media (max-width: 1024px) {
    .hero-section[style*="padding"] {
        padding: 60px 40px !important;
    }
}

@media (max-width: 768px) {
    .hero-section[style*="padding"] {
        padding: 40px 20px !important;
    }
}

@media (max-width: 480px) {
    .hero-section[style*="padding"] {
        padding: 30px 16px !important;
    }
}

/* Override inline h1 font sizes */
h1[style*="font-size: 64px"] {
    font-size: 64px !important;
    line-height: 1.1 !important;
    margin: 0 0 24px 0 !important;
}

@media (max-width: 768px) {
    h1[style*="font-size: 64px"] {
        font-size: 42px !important;
        line-height: 1.1 !important;
        margin: 0 0 20px 0 !important;
        letter-spacing: -1px !important;
    }
}

@media (max-width: 480px) {
    h1[style*="font-size: 64px"] {
        font-size: 36px !important;
        line-height: 1.1 !important;
        margin: 0 0 16px 0 !important;
    }
}

/* Override inline p styles for better responsiveness */
p[style*="font-size: 20px"] {
    font-size: 20px !important;
    line-height: 1.8 !important;
}

@media (max-width: 768px) {
    p[style*="font-size: 20px"] {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin: 0 0 24px 0 !important;
    }
}

@media (max-width: 480px) {
    p[style*="font-size: 20px"] {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 0 20px 0 !important;
    }
}

/* Override specific demo div styles */
div[style*="max-width: 1000px"] {
    max-width: 1000px !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    div[style*="max-width: 1000px"] {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 480px) {
    div[style*="max-width: 1000px"] {
        padding: 0 16px !important;
    }
}

/* Override hero subtitle with special background */
.hero-subtitle[style*="background: rgba"] {
    background: linear-gradient(135deg, rgba(184, 255, 27, 0.2) 0%, rgba(108, 255, 0, 0.15) 100%) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--accent-primary) !important;
}

/* Fix for demo grid responsiveness */
.demo-grid[style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.demo-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

@media (max-width: 768px) {
    .demo-grid[style*="grid-template-columns"],
    .demo-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 40px !important;
    }
}

@media (max-width: 480px) {
    .demo-grid[style*="grid-template-columns"],
    .demo-grid {
        gap: 16px !important;
        margin-top: 30px !important;
    }
}

/* Ensure images in footer stay responsive */
.footer-brand img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix for any overflow issues on mobile */
@media (max-width: 768px) {
    .main-content {
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html {
        overflow-x: hidden;
    }
}

/* ============================================
   ADDITIONAL RESPONSIVE FIXES
============================================ */

/* Better text handling for long footer content */
.footer-brand p,
.footer-bottom p {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

/* Documentation table and code responsive fixes */
@media (max-width: 768px) {
    /* Override any fixed table widths */
    .command-table,
    .command-grid,
    .command-list {
        width: 100%;
        overflow-x: auto;
    }
    
    /* Ensure code blocks are scrollable horizontally */
    .code-block pre,
    .command-preview,
    .command-item code {
        overflow-x: auto;
        white-space: pre;
        word-wrap: break-word;
        word-break: break-all;
        max-width: 100%;
    }
    
    /* Table cell responsive */
    .command-col {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    /* Command cards stack content */
    .command-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    /* Make sure long command names wrap */
    .command-name {
        word-break: break-all;
        overflow-wrap: break-word;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - make everything more compact */
    .command-table .command-row,
    .command-list .command-item {
        margin-bottom: 8px;
    }
    
    /* Ensure horizontal scroll for very long code */
    .code-block-wrapper {
        overflow-x: auto;
    }
    
    .command-preview {
        white-space: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* Ensure proper scaling for all interactive elements */
@media (max-width: 768px) {
    .pause-button {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    
    .hero-box {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Desktop optimizations to maintain quality */
@media (min-width: 1200px) {
    .hero-section {
        padding: 120px 80px;
        max-width: 1600px;
        margin: 0 auto;
    }
    
    .card-grid-section {
        padding: 120px 80px;
    }
    
    .docs-section {
        padding: 100px 80px;
    }
    
    .playground-section {
        padding: 100px 80px;
    }
    
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 50px;
    }
    
    /* Pastikan footer logo section tetap horizontal di desktop */
    .footer-logo-section {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    .footer-logo-section span:first-child {
        margin-bottom: 0 !important;
        font-size: 14px !important;
    }
}

/* Ultra-wide screen optimizations */
@media (min-width: 1600px) {
    .hero-section,
    .card-grid-section,
    .docs-section,
    .playground-section {
        max-width: 1800px;
        margin: 0 auto;
    }
}