/* Kustomisasi untuk Desktop: Atur lebar maksimum kontainer */
/* Aturan ini akan menimpa (override) class 'container' dari Tailwind CSS */
/* pada layar yang lebih lebar dari 1280px (breakpoint xl di Tailwind). */

/*** ###### TAMBAHAN STYLE ######## ******/
/* Mengatur size font secara global spesific */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th, .Xtext-sm {
  font-size: 97%!important;
}
.text-sm{ font-size: 85%!important; line-height: 1.1rem!important;}

/* Tambahan */
.pb-2 {
    padding-bottom: 0.2rem!important;
}
.px-3 {
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
}

/*** ###### END TAMBAHAN STYLE ######## ******/

/* Mengatur size font secara global 
* {
  font-size: 95%;
}
*/

/* Mengatur size font secara global spesific */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th, .Xtext-sm {
  font-size: 97%!important;
}
.text-sm{ font-size: 85%!important; line-height: 1.1rem!important;}

@media (min-width: 1280px) {
  .container {
    max-width: 1200px!important; /* Anda bisa mengubah nilai ini sesuai kebutuhan, misal: 1280px, 1536px */
  }
}


/* Global Styles & App Container */
#root {
  /* Style for the root container */
}

body {
  /* bg-gray-100 */
}

.min-h-screen { }
.font-sans { }
.text-gray-800 { }
.p-4 { }
.md\:p-8 {padding: 1rem 0rem!important; }





/* Header & Navigation */
header {
  /* bg-white shadow-sm sticky top-0 z-10 p-4 */
}

.sticky { }
.top-0 { }
.z-10 { }
.shadow-sm { }

h1.text-2xl {
  /* font-bold text-gray-700 mb-4 */
}

input[type="text"] {
  /* w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition */
}


/* Category Filter & Modal */
nav {
  /* flex flex-wrap gap-2 items-center */
}

.category-button {
  /* px-3 py-0.5 text-sm font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 */
}
.category-button.active {
  /* bg-gray-700 text-white shadow-md (for "Semua") */
  /* [color]-400 text-white shadow-lg scale-105 (for others) */
}
.category-button.inactive {
  /* bg-white hover:bg-gray-200 text-gray-600 border border-gray-200 */
  /* [color] hover:[color-200] text-gray-800 border border-black border-opacity-10 */
}
.more-categories-button {
  /* px-3 py-0.5 text-sm font-semibold rounded-lg transition-colors duration-200 bg-blue-50 text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 border border-blue-200 */
}

.modal-overlay {
  /* fixed inset-0 bg-black z-50 flex items-center justify-center p-4 transition-opacity duration-300 */
}
.modal-overlay.open {
  /* bg-opacity-60 backdrop-blur-sm */
}
.modal-overlay.closed {
  /* bg-opacity-0 */
}

.modal-content {
  /* bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col transform transition-all duration-300 */
}
.modal-content.open {
  /* scale-100 opacity-100 */
}
.modal-content.closed {
  /* scale-95 opacity-0 */
}

.modal-header {
  /* p-4 border-b flex justify-between items-center flex-shrink-0 */
}
.modal-title {
  /* text-xl font-bold text-gray-800 */
}
.modal-close-button {
  /* text-gray-400 hover:text-gray-800 transition-colors p-1 rounded-full */
}

.modal-body {
  /* p-6 overflow-y-auto */
}


/* Link Cards Grid */
.cards-grid {
  /* columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-6 space-y-6 */
}
.sm\:columns-2 { }
.md\:columns-3 { }
.lg\:columns-4 { }
.gap-6 { }
.space-y-6 { }


/* Link Card */
.link-card {
  /* rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden flex flex-col break-inside-avoid */
}
.break-inside-avoid { }
.link-card-header {
  /* px-4 py-3 border-b border-black border-opacity-10 */
}
.link-card-title {
  /* font-bold text-lg text-gray-700 flex items-center gap-2 */
}
.link-card-body {
  /* px-4 py-3 space-y-1 flex-grow */
}
.link-item {
  /* border-b border-black border-opacity-15 pb-2 last:border-b-0 last:pb-0 */
}
.link-anchor {
  /* relative inline-block text-[#454545] hover:text-blue-600 transition-all duration-300 ease-in-out hover:font-bold hover:translate-x-2 after:content-[''] after:absolute after:left-0 after:bottom-[-2px] after:w-0 after:h-[2px] after:bg-blue-600 after:transition-all after:duration-300 hover:after:w-full break-all */
}
.link-text-unlinked {
  /* text-gray-500 break-all */
}


/* Status Messages (Loading, Error, No Results) */
.status-message {
  /* text-center text-gray-500 text-lg */
}
.error-message {
  /* text-center bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg */
}
.warning-message {
  /* text-center bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg */
}


/* Icons */
.folder-icon {
  /* w-6 h-6 text-yellow-500 */
}
.close-icon {
  /* h-6 w-6 */
}


/* Utility Classes from Tailwind */
.bg-red-100 { }
.bg-orange-100 { }
.bg-yellow-100 { }
.bg-green-100 { }
.bg-teal-100 { }
.bg-blue-100 { }
.bg-indigo-100 { }
.bg-purple-100 { }
.bg-pink-100 { }

.flex { }
.flex-col { }
.flex-wrap { }
.items-center { }
.justify-center { }
.justify-between { }
.gap-2 { }
.gap-3 { }
.space-y-1 { }
.w-full { }
.max-w-2xl { }
.max-h-\[80vh\] { }
.rounded-lg { }
.rounded-xl { }
.rounded-full { }
.shadow-lg { }
.shadow-md { }
.shadow-2xl { }
.hover\:shadow-xl { }
.border { }
.border-b { }
.border-black { }
.border-gray-200 { }
.border-gray-300 { }
.border-blue-200 { }
.border-opacity-5 { }
.border-opacity-10 { }
.border-opacity-15 { }
.p-1 { }
.px-3 { }
.py-0\.5 { }
.px-4 { }
.py-2 { }
.py-3 { }
.p-6 { }
.m-0 { }
.mb-2 { }
.mb-4 { }
.mt-2 { }
.text-sm { }
.text-lg { }
.text-xl { }
.font-bold { }
.font-semibold { }
.text-white { }
.text-gray-400 { }
.text-gray-500 { }
.text-gray-600 { }
.text-gray-700 { }
.text-blue-700 { }
.text-left { }
.list-disc { }
.list-inside { }
.inline-block { }
.block { }
.sm\:inline { }
.fixed { }
.inset-0 { }
.relative { }
.absolute { }
.left-0 { }
.bottom-\[-2px\] { }
.z-50 { }
.overflow-hidden { }
.overflow-y-auto { }
.transition { }
.transition-all { }
.transition-colors { }
.transition-shadow { }
.transition-opacity { }
.duration-200 { }
.duration-300 { }
.ease-in-out { }
.transform { }
.scale-95 { }
.scale-100 { }
.scale-105 { }
.opacity-0 { }
.opacity-100 { }
.hover\:translate-x-2 { }
.focus\:outline-none { }
.focus\:ring-2 { }
.focus\:ring-offset-2 { }
.focus\:ring-blue-500 { }
.break-all { }
.last\:border-b-0 { }
.last\:pb-0 { }
.after\:content-\[\'\'\] { }
.after\:absolute { }
.after\:left-0 { }
.after\:bottom-\[-2px\] { }
.after\:w-0 { }
.after\:h-\[2px\] { }
.after\:bg-blue-600 { }
.after\:transition-all { }
.after\:duration-300 { }
.hover\:after\:w-full { }
.backdrop-blur-sm { }
.flex-grow { }
.flex-shrink-0 { }