/*=============================================
  SIMNANGKIS - Responsive Utilities
  Mobile-First Responsive Design
=============================================*/

/* ===== Extra Small Devices (Portrait Phones) ===== */
@media (max-width: 575.98px) {
  
  /* Typography */
  .hero-title {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
  
  .hero-subtitle {
    font-size: 0.95rem !important;
  }
  
  .section-title {
    font-size: 1.5rem !important;
  }
  
  .section-subtitle {
    font-size: 0.95rem !important;
  }
  
  /* Navigation */
  .navbar-brand {
    gap: 0.5rem;
  }
  
  .logo-main {
    height: 40px !important;
  }
  
  .brand-text {
    display: none !important;
  }
  
  /* Hero Section */
  .hero-section {
    min-height: auto;
    padding: 80px 0 40px;
  }
  
  .hero-badge {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .bratasena-logo {
    width: 100px !important;
  }
  
  .hero-text {
    text-align: center;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .btn-hero {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
  
  /* Statistics Cards */
  .stats-cards {
    margin-top: 2rem;
  }
  
  .stats-cards .col-md-4 {
    margin-bottom: 1rem;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-icon img {
    width: 50px;
    height: 50px;
  }
  
  .stat-info h3 {
    font-size: 1.5rem;
  }
  
  .stat-info p {
    font-size: 0.85rem;
  }
  
  /* Hero Illustration */
  .hero-image {
    margin-top: 2rem;
    display: none; /* Hide on mobile to save space */
  }
  
  /* Sections */
  .section-padding {
    padding: 40px 0;
  }
  
  .section-badge {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }
  
  /* About Section */
  .about-content h3 {
    font-size: 1.5rem;
  }
  
  .about-content .lead {
    font-size: 1rem;
  }
  
  .feature-item {
    gap: 0.75rem;
  }
  
  .feature-item i {
    font-size: 1.25rem;
  }
  
  .feature-item h5 {
    font-size: 1rem;
  }
  
  .feature-item p {
    font-size: 0.9rem;
  }
  
  .partner-logos {
    padding: 1.5rem 1rem;
  }
  
  .partner-logos h5 {
    font-size: 1rem;
  }
  
  .partner-logos-container {
    gap: 1rem;
  }
  
  .partner-item {
    flex: 0 1 auto;
  }
  
  .partner-logo {
    max-width: 120px;
    max-height: 70px;
  }
  
  /* Contact Section */
  .contact-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .contact-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }
  
  .contact-icon i {
    font-size: 1.5rem;
  }
  
  .contact-card h5 {
    font-size: 1.1rem;
  }
  
  .contact-card p {
    font-size: 0.9rem;
  }
  
  /* Footer */
  .footer-modern {
    padding: 2rem 0;
    text-align: center;
  }
  
  .footer-modern .text-md-right {
    text-align: center !important;
    margin-top: 1rem;
  }
  
  .footer-logo img {
    height: 50px;
  }
  
  /* Modern Login Modal */
  .modal-login .modal-dialog {
    max-width: 95%;
    margin: 0.5rem auto;
  }
  
  .login-container {
    padding: 2.5rem 1.5rem 2rem;
  }
  
  .login-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1.25rem;
  }
  
  .login-icon i {
    font-size: 2rem;
  }
  
  .login-header h3 {
    font-size: 1.5rem;
  }
  
  .login-header p {
    font-size: 0.9rem;
  }
  
  .form-control-modern {
    padding: 0.875rem 1rem 0.875rem 3rem;
    font-size: 0.95rem;
  }
  
  .input-icon {
    left: 1rem;
  }
  
  .input-icon i {
    font-size: 1rem;
  }
  
  .btn-login {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
  
  .captcha-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .captcha-input-wrapper {
    order: 2;
  }
  
  .captcha-img-wrapper {
    order: 1;
  }
  
  .close-modal {
    width: 36px;
    height: 36px;
    top: 0.75rem;
    right: 0.75rem;
  }
  
  .close-modal i {
    font-size: 1.1rem;
  }
  
  /* Back to Top */
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
  }
  
  .back-to-top i {
    font-size: 1rem;
  }
  
  /* Wave Divider */
  .wave-divider svg {
    height: 40px;
  }
}

/* ===== Small Devices (Landscape Phones) ===== */
@media (min-width: 576px) and (max-width: 767.98px) {
  
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .bratasena-logo {
    width: 140px;
  }
  
  .hero-image {
    margin-top: 2rem;
  }
  
  .section-padding {
    padding: 50px 0;
  }
  
  /* Service Cards */
  .service-card {
    padding: 2rem 1.5rem;
  }
  
  .service-icon {
    width: 75px;
    height: 75px;
  }
  
  .service-icon i {
    font-size: 1.85rem;
  }
  
  /* Data Menu */
  .data-menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  
  .data-category {
    padding: 1.75rem;
  }
  
  .data-category h3 {
    font-size: 1.4rem;
  }
  
  .data-category h3 i {
    width: 45px;
    height: 45px;
    font-size: 1.35rem;
  }
}

/* ===== Medium Devices (Tablets) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  
  .hero-title {
    font-size: 2.25rem;
  }
  
  .hero-subtitle {
    font-size: 1.15rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .bratasena-logo {
    width: 160px;
  }
  
  .hero-buttons {
    gap: 1rem;
  }
  
  .btn-hero {
    padding: 0.875rem 1.75rem;
  }
  
  .stats-cards {
    margin-top: 2.5rem;
  }
  
  .hero-image {
    margin-top: 2rem;
  }
  
  .section-padding {
    padding: 60px 0;
  }
  
  .contact-card {
    padding: 1.75rem;
  }
  
  /* Data Menu */
  .data-menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* ===== Large Devices (Desktops) ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  
  .hero-title {
    font-size: 2.75rem;
  }
  
  .hero-subtitle {
    font-size: 1.35rem;
  }
  
  .section-title {
    font-size: 2.25rem;
  }
  
  .bratasena-logo {
    width: 180px;
  }
  
  .section-padding {
    padding: 70px 0;
  }
}

/* ===== Extra Large Devices (Large Desktops) ===== */
@media (min-width: 1200px) {
  
  .container {
    max-width: 1140px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
}

/* ===== Landscape Orientation ===== */
@media (max-height: 600px) and (orientation: landscape) {
  
  .hero-section {
    min-height: auto;
    padding: 100px 0 60px;
  }
  
  .hero-illustration {
    max-width: 400px;
    margin: 0 auto;
  }
  
  .stats-cards {
    margin-top: 1.5rem;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-icon img {
    width: 50px;
    height: 50px;
  }
}

/* ===== Print Styles ===== */
@media print {
  
  .navbar,
  .back-to-top,
  #preloader,
  .hero-buttons,
  .btn,
  .social-links {
    display: none !important;
  }
  
  .hero-section {
    min-height: auto;
    page-break-after: always;
  }
  
  .section-padding {
    padding: 20px 0;
  }
  
  * {
    background: white !important;
    color: black !important;
  }
}

/* ===== High Resolution Displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Optimize for retina displays */
  .logo-main,
  .bratasena-logo,
  .partner-logo {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ===== Accessibility - Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animated {
    animation: none !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* ===== Dark Mode Support (Future Enhancement) ===== */
@media (prefers-color-scheme: dark) {
  
  /* Uncomment when implementing dark mode
  body.modern-theme {
    background: #1a1a1a;
    color: #e5e5e5;
  }
  
  #mainNav {
    background: rgba(26, 26, 26, 0.95);
  }
  
  .nav-link {
    color: #e5e5e5 !important;
  }
  */
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  
  /* Larger touch targets */
  .btn,
  .nav-link,
  .social-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects on touch devices */
  .stat-card:hover,
  .contact-card:hover,
  .feature-item:hover {
    transform: none;
  }
  
  /* Disable parallax on touch devices */
  .hero-background {
    transform: none !important;
  }
}

/* ===== Internet Explorer 11 Support ===== */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  
  .hero-section {
    display: block;
  }
  
  .animated {
    opacity: 1;
    transform: none;
  }
  
  /* Fallback for grid layouts */
  .stats-cards,
  .hero-buttons {
    display: block;
  }
}