/* Base */
body {
  font-family: 'Poppins', sans-serif;
}

/* Bootstrap gradient variable fallback */
:root{
  --brand1:#000b76;
  --brand2:#22c55e;
  --brand3:#06b6d4;
  --bs-gradient: linear-gradient(135deg, var(--brand1) 0%, #1822aa 100%);
  --card-bg: rgba(255,255,255,0.75);
  --card-brd: rgba(0,0,0,0.08);
}
[data-bs-theme="dark"]{
  --card-bg: rgba(13,17,23,0.75);
  --card-brd: rgba(255,255,255,0.08);
}

/* Sections */
.jumbotron {
  padding: 2rem 1rem;
  background-image: var(--bs-gradient);
}
.bg-gradien { background-image: var(--bs-gradient); }
.jumbo{
  padding: 2rem 1rem;
  background-color: #ffffff;
  /* #background-color:  #ebedfa; */
}

/* Navbar modern */
.navbar-modern{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.navbar-modern.scrolled{
  background-color: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .navbar-modern{
  background-color: rgba(13,17,23,.6) !important;
  border-color: rgba(255,255,255,.08);
}

/* Cards modern */
.card-modern{
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-modern:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
  border-color: rgba(34,197,94,.28);
}
.top-accent{
  height:6px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background: linear-gradient(90deg, var(--brand2), var(--brand3));
}

.shadow-soft{ box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.rounded-2xl{ border-radius: 1rem; }

/* Dropdown hover (desktop) */
@media (min-width:576px) {
  .dropdown-menu { display: block; opacity: 0; transition: all 0.2s; }
  .dropdown:hover .dropdown-menu { display: block; margin-top: 0px; opacity: 1; }
}
.dropdown-menu li a:hover{
  background-color:blue;
  transition: background-color 200ms ease-in-out;
  border-radius:5px;
  color: white;
}

/* Navbar toggler focus (fix dari SCSS ke CSS murni) */
.navbar-toggler{ border:none; outline:none; }
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
  outline:none; box-shadow:none;
}

/* Dot (fix bug syntax & width double) */
.dot{
  display: inline-block;
  border-radius: 50%;
  background-color: green;
  height: 15px;
  width: 15px;
  margin: 0 2px;
}

/* Blinking (hapus quotes di keyframes) */
.blinking {
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
}
@keyframes blink { from, to { opacity:0; } 50% { opacity:1; } }
@-moz-keyframes blink { from, to { opacity:0; } 50% { opacity:1; } }
@-webkit-keyframes blink { from, to { opacity:0; } 50% { opacity:1; } }
@-ms-keyframes blink { from, to { opacity:0; } 50% { opacity:1; } }
@-o-keyframes blink { from, to { opacity:0; } 50% { opacity:1; } }

/* -------------------------
   File manager (as-is)
------------------------- */
.filemanager { width:75%; max-width:1340px; position: relative; }
@media all and (max-width: 400px) {
  .filemanager { margin: 30px auto 0; padding: 1px; }
}
.filemanager .breadcrumbs {
  margin-left:20px; color: #f80794; font-size: 24px; font-weight: 700; line-height: 35px;
}
.filemanager .breadcrumbs a:link, .breadcrumbs a:visited { color: #15075f; text-decoration: none; }
.filemanager .breadcrumbs a:hover { text-decoration: underline; }
.filemanager .breadcrumbs .arrow { color:  #6a6a72; font-size: 24px; font-weight: 700; line-height: 20px; }

.filemanager .data { margin-right:25px; margin-top: 50px; z-index: -6; }
.filemanager .data.animated { -webkit-animation: showSlowlyElement 700ms; animation: showSlowlyElement 700ms; }
.filemanager .data li {
  border-radius: 3px; background-color: #373743; width: 280px; height: 118px; list-style-type: none; margin: 10px;
  display: inline-block; position: relative; overflow: hidden; padding: 0.3em; z-index: 1; cursor: pointer; box-sizing: border-box;
  transition: 0.3s background-color;
}
.filemanager .data li:hover { background-color: #42424E; }
.filemanager .data li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.filemanager .data li .name {
  color: #ffffff; font-size: 15px; font-weight: 700; line-height: 20px; width: 150px; white-space: nowrap; display: inline-block;
  position: absolute; overflow: hidden; text-overflow: ellipsis; top: 40px;
}
.filemanager .data li .details {
  color: #b6c1c9; font-size: 13px; font-weight: 400; width: 55px; height: 10px; top: 64px; white-space: nowrap; position: absolute; display: inline-block;
}
.filemanager .nothingfound {
  background-color: #373743; width: 280px; height: 280px; margin: 0 auto; display: none; font-family: Arial;
  -webkit-animation: showSlowlyElement 700ms; animation: showSlowlyElement 700ms;
}
.filemanager .nothingfound .nofiles {
  margin: 20px auto; top: 3em; border-radius: 50%; position:relative; background-color: #d72f6e; width: 11em; height: 11em; line-height: 11.4em;
}
.filemanager .nothingfound .nofiles:after {
  content: '×'; position: absolute; color: #ffffff; font-size: 14em; margin-right: 0.092em; right: 0;
}
.filemanager .nothingfound span {
  margin: 0 auto auto 6.8em; color: #ffffff; font-size: 16px; font-weight: 700; line-height: 20px; height: 13px; position: relative; top: 2em;
}
@media all and (max-width:965px) {
  .filemanager .data li { width: 100%; margin: 5px 0; }
}
/* Animations */
@-webkit-keyframes showSlowlyElement { 100%{ transform: scale(1); opacity:1; } 0%{ transform: scale(1.2); opacity:0; } }
@keyframes showSlowlyElement { 100%{ transform: scale(1); opacity:1; } 0%{ transform: scale(1.2); opacity:0; } }
/* Icons */
.icon { font-size: 23px; }
.icon.folder { display: inline-block; margin: 1em; background-color: transparent; overflow: hidden; }
.icon.folder:before {
  content: ''; float: left; background-color: #7ba1ad; width: 1.5em; height: 0.45em; margin-left: 0.07em; margin-bottom: -0.07em;
  border-top-left-radius: 0.1em; border-top-right-radius: 0.1em; box-shadow: 1.25em 0.25em 0 0em #7ba1ad;
}
.icon.folder:after {
  content: ''; float: left; clear: left; background-color: #a0d4e4; width: 3em; height: 2.25em; border-radius: 0.1em;
}
.icon.folder.full:before { height: 0.55em; }
.icon.folder.full:after { height: 2.15em; box-shadow: 0 -0.12em 0 0 #ffffff; }
.icon.file {
  width: 2.5em; height: 3em; line-height: 3em; text-align: center; border-radius: 0.25em; color: #FFF; display: inline-block; margin: 0.9em 1.2em 0.8em 1.3em; position: relative; overflow: hidden;
  box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset;
}
.icon.file:first-line { font-size: 13px; font-weight: 700; }
.icon.file:after {
  content: ''; position: absolute; z-index: -1; border-width: 0; border-bottom: 2.6em solid #DADDE1; border-right: 2.22em solid rgba(0, 0, 0, 0);
  top: -34.5px; right: -4px;
}
.icon.file.f-avi, .icon.file.f-flv, .icon.file.f-mkv, .icon.file.f-mov, .icon.file.f-mpeg, .icon.file.f-mpg, .icon.file.f-mp4, .icon.file.f-m4v, .icon.file.f-wmv { box-shadow: 1.74em -2.1em 0 0 #7e70ee inset; }
.icon.file.f-avi:after, .icon.file.f-flv:after, .icon.file.f-mkv:after, .icon.file.f-mov:after, .icon.file.f-mpeg:after, .icon.file.f-mpg:after, .icon.file.f-mp4:after, .icon.file.f-m4v:after, .icon.file.f-wmv:after { border-bottom-color: #5649c1; }
.icon.file.f-mp2, .icon.file.f-mp3, .icon.file.f-m3u, .icon.file.f-wma, .icon.file.f-xls, .icon.file.f-xlsx { box-shadow: 1.74em -2.1em 0 0 #5bab6e inset; }
.icon.file.f-mp2:after, .icon.file.f-mp3:after, .icon.file.f-m3u:after, .icon.file.f-wma:after, .icon.file.f-xls:after, .icon.file.f-xlsx:after { border-bottom-color: #448353; }
.icon.file.f-doc, .icon.file.f-docx, .icon.file.f-psd{ box-shadow: 1.74em -2.1em 0 0 #03689b inset; }
.icon.file.f-doc:after, .icon.file.f-docx:after, .icon.file.f-psd:after { border-bottom-color: #2980b9; }
.icon.file.f-gif, .icon.file.f-jpg, .icon.file.f-jpeg, .icon.file.f-pdf, .icon.file.f-png { box-shadow: 1.74em -2.1em 0 0 #e15955 inset; }
.icon.file.f-gif:after, .icon.file.f-jpg:after, .icon.file.f-jpeg:after, .icon.file.f-pdf:after, .icon.file.f-png:after { border-bottom-color: #c6393f; }
.icon.file.f-deb, .icon.file.f-dmg, .icon.file.f-gz, .icon.file.f-rar, .icon.file.f-zip, .icon.file.f-7z { box-shadow: 1.74em -2.1em 0 0 #867c75 inset; }
.icon.file.f-deb:after, .icon.file.f-dmg:after, .icon.file.f-gz:after, .icon.file.f-rar:after, .icon.file.f-zip:after, .icon.file.f-7z:after { border-bottom-color: #685f58; }
.icon.file.f-html, .icon.file.f-rtf, .icon.file.f-xml, .icon.file.f-xhtml { box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset; }
.icon.file.f-html:after, .icon.file.f-rtf:after, .icon.file.f-xml:after, .icon.file.f-xhtml:after { border-bottom-color: #d65de8; }
.icon.file.f-js { box-shadow: 1.74em -2.1em 0 0 #d0c54d inset; }
.icon.file.f-js:after { border-bottom-color: #a69f4e; }
.icon.file.f-css, .icon.file.f-saas, .icon.file.f-scss { box-shadow: 1.74em -2.1em 0 0 #44afa6 inset; }
.icon.file.f-css:after, .icon.file.f-saas:after, .icon.file.f-scss:after { border-bottom-color: #30837c; }

/* Mobile spacing tweak */
@media (max-width: 575.98px){
  .slice.slice-lg{ padding-top:2.25rem; padding-bottom:2.25rem; }
  .jumbotron{ padding-top:2.5rem; padding-bottom:2.5rem; }
}