/**
 * BisnisonlineBGS - Mobile CSS
 * Styles untuk device dengan lebar < 768px
 */

/* ========================================
   MOBILE SPECIFIC VARIABLES
======================================== */
:root {
    --header-height-mobile: 60px;
    --navbar-height-mobile: 56px;
}

/* ========================================
   TYPOGRAPHY - MOBILE
======================================== */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

body {
    font-size: 0.9375rem;
}

/* ========================================
   HEADER - MOBILE
======================================== */
.site-header {
    padding: var(--spacing-xs) 0;
}

.header-top {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
}

.header-contact {
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.8125rem;
}

.header-contact a {
    justify-content: center;
}

.header-social {
    justify-content: center;
}

.header-social a {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
}

.lang-switcher {
    justify-content: center;
    margin-top: var(--spacing-xs);
}

.lang-switcher .btn-lang {
    padding: 2px 8px;
    font-size: 0.75rem;
}

/* ========================================
   NAVBAR - MOBILE MODERN
======================================== */
.site-navbar {
    padding: var(--spacing-xs) 0;
}

.site-navbar .container {
    padding: 0 var(--spacing-md);
}

.brand-logo img {
    height: 28px;
}

.site-navbar.navbar-scrolled .brand-logo img {
    height: 32px;
}

/* Mobile Menu Collapse - Sidebar Style */
.navbar-collapse {
    position: fixed;
    top: 0;
    right: -100%;
    left: auto;
    width: 100%;
    height: 100vh;
    background: var(--white);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex !important;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
    z-index: 1050;
    visibility: hidden;
    overflow-y: auto;
}

.navbar-collapse.collapsing {
    height: 100vh !important;
    right: -100%;
    left: auto;
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.navbar-collapse.show {
    right: 0;
    left: auto;
    visibility: visible;
}

/* Backdrop */
body.mobile-nav-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1040;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.navbar-nav {
    gap: 0;
}

.navbar-nav .nav-link {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-size: 1rem;
    justify-content: flex-start;
}

.navbar-nav .nav-link .nav-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    margin-right: var(--spacing-sm);
}

.navbar-nav .nav-link::before {
    display: none;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.03));
}

.navbar-nav .nav-link.active .nav-icon {
    background: var(--primary-color);
    color: var(--white);
}

/* Mobile Actions */
.navbar-actions {
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--gray-200);
}

.lang-switcher-modern {
    width: 100%;
    justify-content: center;
    padding: 8px 16px;
}


/* Mobile Toggle */
.navbar-toggler {
    width: 44px;
    height: 44px;
}

.toggler-line {
    width: 22px;
}

.toggler-icon-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggler-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s ease;
}

.toggler-chevron {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(180deg);
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    line-height: 1;
}

.navbar-toggler[aria-expanded="true"] .toggler-lines {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.navbar-toggler[aria-expanded="true"] .toggler-chevron {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
}

/* ========================================
   BANNER SECTION - MOBILE
======================================== */
.section-banner {
    min-height: 100vh;
}

.banner-picture {
    height: 100vh;
}

.banner-img {
    object-position: center center;
}

/* ========================================
   SECTIONS - MOBILE
======================================== */
.section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    margin-bottom: var(--spacing-lg);
}

.section-title h2 {
    font-size: 1.5rem;
}

.section-title h2::after {
    width: 60px;
    height: 3px;
}

.section-subtitle {
    font-size: 0.9375rem;
}

/* ========================================
   PROFILE SECTION - MOBILE
======================================== */
.profile-image-wrapper .experience-badge {
    bottom: -10px;
    right: -10px;
    padding: var(--spacing-md);
}

.profile-image-wrapper .experience-badge .years {
    font-size: 1.75rem;
}

/* ========================================
   MANAGEMENT SECTION - MOBILE
======================================== */
.management-card {
    margin-bottom: var(--spacing-lg);
}

.management-image {
    height: 220px;
}

/* ========================================
   LEGAL SECTION - MOBILE
======================================== */
.legal-card {
    padding: var(--spacing-lg);
}

.legal-icon {
    width: 60px;
    height: 60px;
}

/* ========================================
   AWARDS SECTION - MOBILE
======================================== */
.award-card {
    padding: var(--spacing-lg);
}

.award-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ========================================
   CHARITY SECTION - MOBILE
======================================== */
.charity-stat-item {
    flex-direction: column;
    text-align: center;
}

.charity-activities {
    justify-content: center;
}

/* ========================================
   PRODUCT SECTION - MOBILE
======================================== */
.product-card {
    margin-bottom: var(--spacing-lg);
}

.product-image img {
    max-height: 150px;
}

/* ========================================
   STEMCELL SECTION - MOBILE
======================================== */
.stemcell-image {
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   ADVANTAGE SECTION - MOBILE
======================================== */
.advantage-card {
    padding: var(--spacing-lg);
}

.advantage-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ========================================
   BUSINESS SECTION - MOBILE
======================================== */
.bonus-list .bonus-item {
    flex-direction: column;
    text-align: center;
}

.bonus-list .bonus-icon {
    margin: 0 auto;
}

/* ========================================
   BENEFIT SECTION - MOBILE
======================================== */
.benefit-card {
    padding: var(--spacing-lg);
}

.benefit-card .benefit-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
}

/* ========================================
   PARTNER SECTION - MOBILE
======================================== */
.partner-logo {
    height: 80px;
}

.partner-logo img {
    max-height: 40px;
}

/* ========================================
   START BUSINESS SECTION - MOBILE
======================================== */
.step-card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.step-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ========================================
   EVENT SECTION - MOBILE
======================================== */
.event-card.featured .event-image {
    height: 200px;
}

.event-card .event-image {
    height: 150px;
}

.event-card.horizontal {
    flex-direction: column;
}

.event-card.horizontal .event-image {
    width: 100%;
    height: 150px;
}

/* ========================================
   TESTIMONIAL SECTION - MOBILE
======================================== */
.testimonial-card {
    padding: var(--spacing-lg);
}

.testimonial-text {
    font-size: 0.9375rem;
}

.play-button {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ========================================
   REGISTRATION SECTION - MOBILE
======================================== */
.section-mulai-gabung {
    padding: var(--spacing-xl) 0;
}

.cta-content {
    padding-right: 0;
    margin-bottom: var(--spacing-xl);
}

.register-form-card {
    padding: var(--spacing-lg);
}

.contact-buttons {
    flex-direction: column;
}

.contact-buttons .btn {
    width: 100%;
}

/* ========================================
   CARDS - MOBILE
======================================== */
.card {
    margin-bottom: var(--spacing-md);
}

.card-body {
    padding: var(--spacing-md);
}

.card-img-top {
    height: 160px;
}

.service-card {
    padding: var(--spacing-lg);
}

.service-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ========================================
   FEATURES - MOBILE
======================================== */
.feature-item {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
}

.feature-icon {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
}

/* ========================================
   CTA SECTION - MOBILE
======================================== */
.cta-section {
    padding: var(--spacing-xl) 0;
}

.cta-section h2 {
    font-size: 1.5rem;
}

.cta-section p {
    font-size: 0.9375rem;
}

/* ========================================
   FOOTER - MOBILE
======================================== */
.site-footer {
    padding-top: var(--spacing-xl);
}

.footer-brand {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.footer-brand img {
    max-height: 40px;
}

.footer-title {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.footer-links li,
.footer-contact li {
    margin-bottom: var(--spacing-sm);
}

.footer-social {
    justify-content: center;
}

.footer-social a {
    width: 36px;
    height: 36px;
}

.footer-bottom {
    text-align: center;
    padding: var(--spacing-md) 0;
}

.footer-bottom .row {
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ========================================
   404 PAGE - MOBILE
======================================== */
.error-page {
    padding: var(--spacing-xl);
    min-height: 50vh;
}

.error-code {
    font-size: 5rem;
}

.error-message {
    font-size: 1rem;
}

/* ========================================
   FORMS - MOBILE
======================================== */
.form-control,
.form-select {
    font-size: 16px; /* Prevent iOS zoom */
}

.btn {
    padding: var(--spacing-sm) var(--spacing-md);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
}

/* ========================================
   UTILITIES - MOBILE
======================================== */
.container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

.col, [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Hide on mobile */
.hide-mobile {
    display: none !important;
}

/* Show only on mobile */
.show-mobile {
    display: block !important;
}

/* Text alignment mobile */
.text-center-mobile {
    text-align: center !important;
}

/* Spacing adjustments */
.py-mobile-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-mobile-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.my-mobile-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-mobile-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }

/* ========================================
   BREADCRUMB - MOBILE
======================================== */
.breadcrumb {
    font-size: 0.8125rem;
    padding: var(--spacing-sm) 0;
}

/* ========================================
   TABLE RESPONSIVE - MOBILE
======================================== */
.table-responsive-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   TOUCH OPTIMIZATIONS
======================================== */
a, button, .btn {
    min-height: 44px;
    min-width: 44px;
}

.nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* Improve tap targets */
.footer-links a,
.header-contact a {
    padding: var(--spacing-xs) 0;
    display: inline-block;
}

/* ========================================
   SWIPE INDICATORS
======================================== */
.swipe-indicator {
    display: block;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.75rem;
    padding: var(--spacing-sm) 0;
}

.swipe-indicator i {
    animation: swipeHint 1.5s ease-in-out infinite;
}

@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* ========================================
   VIDEO CARD MODERN - MOBILE
======================================== */
.video-card-modern {
    margin-bottom: var(--spacing-md);
}

.video-card-header {
    padding: var(--spacing-md);
    flex-direction: column;
    text-align: center;
}

.video-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

.video-card-header .video-title {
    font-size: 0.85rem;
}

.video-card-body {
    padding: var(--spacing-md);
}

/* ========================================
   OFFICE SECTION - MOBILE
======================================== */
.office-slide img {
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
}

.slide-counter {
    font-size: 0.75rem;
    padding: 4px 10px;
}

.carousel-nav-btn {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
}

/* ========================================
   MANAGEMENT SECTION - MOBILE
======================================== */
.management-card-modern {
    margin-bottom: var(--spacing-md);
}

.card-ribbon {
    font-size: 0.65rem;
    padding: 4px 35px;
    right: -38px;
    top: 15px;
}

.management-photo {
    height: 220px;
}

.management-content {
    padding: var(--spacing-md);
}

.management-content h4 {
    font-size: 1.1rem;
}

.position-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
}

.management-desc p {
    font-size: 0.8rem;
}

.management-stats {
    gap: var(--spacing-md);
}

.management-stats .stat-value {
    font-size: 1.25rem;
}

.management-stats .stat-label {
    font-size: 0.65rem;
}

/* ========================================
   LEGAL SECTION - MOBILE
======================================== */
.legal-card-modern {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.legal-icon-wrapper {
    width: 100%;
    height: 350px;
}

.legal-content h5 {
    font-size: 1rem;
}

.legal-badge {
    font-size: 0.7rem;
}

/* ========================================
   AWARDS SECTION - MOBILE
======================================== */
.award-slide-image img {
    max-height: 280px;
}

.award-slide-info {
    padding: var(--spacing-md);
}

.award-slide-info h5 {
    font-size: 0.95rem;
}

.carousel-nav-wrapper {
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.carousel-nav-wrapper .carousel-nav-btn {
    width: 35px;
    height: 35px;
}

/* ========================================
   CHARITY SECTION - MOBILE
======================================== */
.charity-stat-card {
    padding: var(--spacing-md);
}

.charity-stat-card .stat-icon {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
}

.charity-stat-card .stat-number {
    font-size: 1.25rem;
}

.charity-stat-card .stat-text {
    font-size: 0.75rem;
}

/* Mobile: 1 item per slide */
.charity-slide {
    width: 100%;
}

.gallery-card img {
    height: 280px;
}

.gallery-zoom {
    width: 45px;
    height: 45px;
    font-size: 1.15rem;
}

.charity-slider-controls {
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.slider-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
}

.carousel-controls-modern {
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.carousel-btn-modern {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}

/* ========================================
   PRODUCT SECTION - MOBILE
======================================== */
.category-tabs {
    gap: var(--spacing-xs);
}

.category-tab {
    padding: 10px 16px;
    font-size: 0.8rem;
}

.category-tab i {
    font-size: 1rem;
}

.category-tab span {
    display: none;
}

.category-tab.active span {
    display: inline;
}

/* Mobile: 2 items per row - Premium Full Image */
.product-card::before {
    padding-top: 100%;
}

.product-info {
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
}

.product-info h5 {
    font-size: 0.85rem;
}

.product-tagline {
    font-size: 0.65rem;
}

.product-tagline::before {
    width: 12px;
}

.product-badge {
    font-size: 0.55rem;
    padding: 4px 8px;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
}

.view-detail {
    padding: 10px 16px;
    font-size: 0.75rem;
}

/* Product Detail Panel - Mobile */
.product-detail-panel {
    padding: var(--spacing-sm);
}

.detail-panel-inner {
    border-radius: var(--border-radius-lg);
    max-height: 90vh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.detail-content {
    padding: var(--spacing-lg) var(--spacing-md);
    height: auto;
}

.panel-close {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

.detail-title {
    font-size: 1.5rem;
    margin-top: var(--spacing-sm);
}

.detail-desc {
    font-size: 0.9rem;
    line-height: 1.7;
}

.detail-benefits {
    padding: var(--spacing-md);
}

.benefit-icon {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.benefit-text {
    font-size: 0.8rem;
}

.benefit-value {
    font-size: 0.8rem;
}

.benefit-progress {
    margin-left: 38px;
    height: 6px;
}

.detail-actions {
    flex-direction: column;
}

.detail-actions .btn {
    width: 100%;
}

/* Apple Stemcell - Mobile */
.section-apple-stemcell {
    padding: var(--spacing-xl) 0;
}

.applesc-header {
    margin-bottom: var(--spacing-lg);
}

.applesc-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
}

.applesc-title {
    font-size: 1.75rem;
}

.applesc-subtitle {
    font-size: 0.95rem;
}

.applesc-banner {
    margin-bottom: var(--spacing-xl);
}

.applesc-banner-frame {
    border-radius: var(--border-radius-lg);
}

.applesc-single-card {
    padding: var(--spacing-md);
}

.applesc-single-card .applesc-image-wrap {
    margin-bottom: var(--spacing-md);
}

.applesc-card-text {
    padding: var(--spacing-lg);
}

.applesc-card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.applesc-card-title {
    font-size: 1.15rem;
}

.applesc-paragraph {
    font-size: 0.95rem;
    line-height: 1.8;
}

.applesc-image-wrap {
    padding: var(--spacing-md);
}

/* Patent Section - Mobile */
.applesc-patent {
    margin-top: var(--spacing-xl);
}

.patent-content {
    padding: var(--spacing-md);
}

.patent-title {
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.35;
}

.patent-item {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.patent-item-wide {
    padding: var(--spacing-lg);
}

.patent-images-2 {
    flex-direction: column;
}

.patent-images-2 img {
    max-width: 100%;
    min-width: 0;
}

.patent-benefits {
    font-size: 0.85rem;
}

.patent-benefits-4 {
    font-size: 0.8rem;
}