/* ==========================================================================
   PROFIL PRODUK PAGE STYLES
   
   TABLE OF CONTENTS:
   
   1. Base Styles .............................. Line 30
   2. Sidebar Styling (AdminLTE) ............... Line 50
   3. Animations ............................... Line 195
   4. DateTime Container ....................... Line 230
   5. Product Card Styling ..................... Line 290
   6. Card Header .............................. Line 350
   7. Card Body & Image Container .............. Line 380
   8. Description Box .......................... Line 435
   9. Type Badges .............................. Line 480
   10. Document Buttons ........................ Line 560
   11. Header Color Variants ................... Line 640
   12. Responsive Styles ....................... Line 670
   
   USAGE:
   - ✅ REUSABLE: Sidebar, DateTime, Animations
   - ⚠️ PAGE SPECIFIC: Product cards, type badges
   
   DEPENDENCIES:
   - AdminLTE 3.2
   - Bootstrap 5.1.3
   - Font Awesome 5.15.4
   - Google Fonts (Inter)
   
   File Size: ~700 lines
   Created: 2025-01-XX
   Last Updated: 2025-01-XX
   ========================================================================== */


/* ==========================================================================
   1. BASE STYLES
   
   PURPOSE: Global reset and base element styling
   USED IN: All page elements
   REUSABLE: YES ✅
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
}


/* ==========================================================================
   2. SIDEBAR STYLING (AdminLTE)
   
   PURPOSE: Custom styling for AdminLTE sidebar component
   USED IN: Sidebar navigation
   REUSABLE: YES ✅✅
   DEPENDENCIES: AdminLTE 3.2 framework
   
   COMPONENTS:
   - Main sidebar container with gradient
   - Brand link (logo and text)
   - Search form
   - Navigation links with active states
   ========================================================================== */

/* Sidebar Container - Gradient Background */
.main-sidebar {
  background: linear-gradient(180deg, #230146ff 0%, #042de7ff 100%);
}

/* Brand Link - Logo Area */
.main-sidebar .brand-link {
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.8rem 0.8rem !important;
  min-height: 60px !important;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-sidebar .brand-link:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
}

.main-sidebar .brand-link img,
.main-sidebar .brand-link .brand-image {
  width: 35px !important;
  height: auto !important;
  max-width: 35px !important;
  max-height: none !important;
  object-fit: contain !important;
  margin-left: 0.2rem !important;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.main-sidebar .brand-link:hover img,
.main-sidebar .brand-link:hover .brand-image {
  opacity: 1;
  transform: scale(1.05);
}

.main-sidebar .brand-link .brand-text {
  margin-left: 0.5rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 300 !important;
  font-size: 1.05rem !important;
  transition: all 0.3s ease;
}

.main-sidebar .brand-link:hover .brand-text {
  color: white !important;
}

/* Sidebar Search Form */
.sidebar .form-control-sidebar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.sidebar .form-control-sidebar:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.sidebar .form-control-sidebar::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: normal !important;
}

.sidebar .btn-sidebar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.sidebar .btn-sidebar:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Sidebar Navigation Links */
.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.sidebar .nav-link:hover {
  background: rgba(102, 126, 234, 0.15);
  color: white;
}

/* Active Navigation Link - Green Gradient with Glow Effect */
.sidebar .nav-link.active {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: white !important;
  font-weight: 700;
  border-left: 5px solid #2f855a;
  box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3);
  animation: glow-active 2s ease-in-out infinite;
  position: relative;
}

.sidebar .nav-link.active .nav-icon {
  color: white !important;
  transform: scale(1.15);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.sidebar .nav-link.active p {
  color: white !important;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sidebar .nav-link.active::after {
  content: '●';
  position: absolute;
  right: 15px;
  font-size: 20px;
  color: white;
  animation: pulse-dot 1.5s ease-in-out infinite;
}


/* ==========================================================================
   3. ANIMATIONS
   
   PURPOSE: Reusable keyframe animations
   USED IN: Sidebar active states, product cards
   REUSABLE: YES ✅
   ========================================================================== */

/* Glow effect for active sidebar item */
@keyframes glow-active {
  0%, 100% {
    box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(72, 187, 120, 0.5);
  }
}

/* Pulsing dot animation */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

/* Scrolling text animation */
@keyframes scroll-text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}


/* ==========================================================================
   4. DATETIME CONTAINER
   
   PURPOSE: Date display with scrolling news ticker
   USED IN: Top of page below navbar
   REUSABLE: YES ✅✅✅
   
   NOTE: Similar to index.php and tentang_gapkindo.php datetime
   ========================================================================== */

.datetime-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0px;
  padding: 15px 25px;
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  margin: -2px 0 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.date-display {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.running-text-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 250px;
  max-width: 100%;
}

.running-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-text 25s linear infinite;
  font-weight: 500;
}


/* ==========================================================================
   5. PRODUCT CARD STYLING
   
   PURPOSE: Main card container for product displays
   USED IN: All product sections (SIR, RSS, Lateks)
   REUSABLE: MAYBE ⚠️
   
   FEATURES:
   - Gradient background
   - Hover lift effect
   - Glass morphism overlay
   - Shadow and border styling
   ========================================================================== */

.content-wrapper {
  background: transparent;
}

.product-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 30px;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.product-card:hover::before {
  opacity: 1;
}


/* ==========================================================================
   6. CARD HEADER
   
   PURPOSE: Header section of product cards
   USED IN: Product card headers
   REUSABLE: YES ✅
   ========================================================================== */

.card-header-product {
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.card-header-product h3 {
  margin: 0;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.8rem;
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   7. CARD BODY & IMAGE CONTAINER
   
   PURPOSE: Content area and product image display
   USED IN: Product card body
   REUSABLE: MAYBE ⚠️
   
   FEATURES:
   - Centered image container
   - Hover zoom effect
   - Drop shadow on images
   ========================================================================== */

.card-body-product {
  padding: 30px;
}

.image-container-product {
  width: 100%;
  max-width: 500px;
  height: 350px;
  margin: 0 auto 30px;
  position: relative;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.product-image {
  height: 100%;
  width: auto;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.product-card:hover .product-image {
  transform: scale(1.08);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
}


/* ==========================================================================
   8. DESCRIPTION BOX
   
   PURPOSE: Content description container
   USED IN: Product descriptions
   REUSABLE: YES ✅
   
   FEATURES:
   - Glassmorphism effect
   - Gradient background
   - Blur backdrop
   ========================================================================== */

.description-box {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.9) 100%);
  padding: 25px;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.3);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}

.desc-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 2px solid rgba(59, 130, 246, 0.2);
  padding-bottom: 10px;
}

.desc-text {
  font-size: 15px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 15px;
  text-align: justify;
}


/* ==========================================================================
   9. TYPE BADGES
   
   PURPOSE: Product type indicators (SIR-20, RSS 1, etc.)
   USED IN: Product specifications
   REUSABLE: YES ✅✅
   
   VARIANTS:
   - .blue: SIR products
   - .green: RSS products
   - .yellow: Lateks products
   ========================================================================== */

.product-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
  justify-content: center;
}

.type-badge {
  background: transparent;
  border: 2px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Blue Badge - SIR Products */
.type-badge.blue {
  color: #3b82f6;
  border-left: 4px solid #3b82f6;
}

.type-badge.blue:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
}

/* Green Badge - RSS Products */
.type-badge.green {
  color: #10b981;
  border-left: 4px solid #10b981;
}

.type-badge.green:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transform: scale(1.05);
}

/* Yellow Badge - Lateks Products */
.type-badge.yellow {
  color: #f59e0b;
  border-left: 4px solid #f59e0b;
}

.type-badge.yellow:hover {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  transform: scale(1.05);
}


/* ==========================================================================
   10. DOCUMENT BUTTONS
   
   PURPOSE: Download/view document buttons
   USED IN: Document links
   REUSABLE: YES ✅
   
   VARIANTS:
   - .blue: SIR documents
   - .green: RSS documents
   - .yellow: Lateks documents
   ========================================================================== */

.btn-document {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  background: transparent;
  border: 2px solid #e2e8f0;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.btn-document i {
  margin-right: 8px;
}

/* Blue Button - SIR */
.btn-document.blue {
  border-left: 4px solid #3b82f6;
  color: #3b82f6;
}

.btn-document.blue:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Green Button - RSS */
.btn-document.green {
  border-left: 4px solid #10b981;
  color: #10b981;
}

.btn-document.green:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* Yellow Button - Lateks */
.btn-document.yellow {
  border-left: 4px solid #f59e0b;
  color: #f59e0b;
}

.btn-document.yellow:hover {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}


/* ==========================================================================
   11. HEADER COLOR VARIANTS
   
   PURPOSE: Top border accent for product cards
   USED IN: Product card headers
   REUSABLE: YES ✅
   ========================================================================== */

.header-blue {
  border-top: 5px solid #3b82f6;
}

.header-green {
  border-top: 5px solid #10b981;
}

.header-yellow {
  border-top: 5px solid #f59e0b;
}


/* ==========================================================================
   12. RESPONSIVE STYLES
   
   PURPOSE: Mobile and tablet optimizations
   USED IN: All components above
   ========================================================================== */

/* Responsive: Tablet & Small Desktop (≤991.98px) */
@media (max-width: 991.98px) {
  .main-sidebar .brand-link {
    padding: 1rem 0.6rem !important;
    min-height: 70px !important;
  }
}

/* Responsive: Mobile (≤575.98px) */
@media (max-width: 575.98px) {
  /* DateTime Container Mobile Layout */
  .datetime-container {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    gap: 10px;
  }

  .date-display {
    font-size: 1rem;
    justify-content: center;
    width: 100%;
  }

  .running-text-container {
    width: 100%;
    min-width: 100%;
  }

  /* Product Image Mobile */
  .image-container-product {
    height: 250px;
  }

  /* Card Body Mobile */
  .card-body-product {
    padding: 20px;
  }
}


/* ==========================================================================
   END OF STYLESHEET
   
   MAINTENANCE NOTES:
   - Keep AdminLTE version synchronized (currently 3.2)
   - Test product cards on mobile devices
   - Badge colors match product categories (SIR=blue, RSS=green, Lateks=yellow)
   - DateTime container reusable across pages
   
   DEPENDENCIES:
   - AdminLTE 3.2
   - Bootstrap 5.1.3
   - Font Awesome 5.15.4
   - Google Fonts (Inter)
   
   PERFORMANCE:
   - Animations use GPU-accelerated properties (transform, opacity)
   - Minimal box-shadow usage for better mobile performance
   - Image hover effects optimized with transform
   
   ACCESSIBILITY:
   - Ensure sufficient color contrast (WCAG AA)
   - Add aria-labels to interactive elements
   - Test keyboard navigation
   - Support screen readers
   ========================================================================== */