@charset "UTF-8";
/*-----------------------------------------------------------------------------------

   CSS untuk detil koleksi

-----------------------------------------------------------------------------------

/* Scope CSS khusus untuk halaman detil */
.detail__area {
   --bg-main: #ffffff;      
   --card: #f8fafc;         
   --accent: #0b5cff;
   --accent-hover: #ed1c24;
   --text-main: #1e293b;
   --text-muted: #64748b;
   --border: #e2e8f0;
   --success: #10b981;
   --danger: #ef4444;
   --radius: 16px;
}

.howtoborrow h3 {
    font-size: 14px;
    font-family: "ApercuMedium", "Apercu", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    margin-bottom: 0;
}

.info-icon {
    /* margin: auto; */
    background-repeat: no-repeat;
    display: inline-table;
    fill: currentColor;
    height: 24px;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
}

.howtoborrow p {
   font-size: 13px;
   line-height: 1.2em;
   margin-left: 28px;
}

.link-terkait-btn-sm {
    display: block;
    text-align: center;
    color: #ed1c24;
    font-size: 14px;
    font-weight: 500;
    margin-top: -5px;
    transition: color 0.2s;
}
/* Mengganti container-detil dengan container bawaan template agar lebarnya penuh/proporsional */

/* --- STYLE UNTUK KOTAK (CARD) KONTEN --- */
.detail-section {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 30px 40px;
   margin-bottom: 30px;
   transition: all 0.3s ease;
}

.detail-section:hover, .action-tools-action:hover {
   box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
   transform: translateY(-4px);
   border-color: #cbd5e1;
}

/* --- SIDEBAR KIRI (COVER BUKU) --- */
.book-cover-wrapper {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

/* Membuat cover tetap menempel di layar saat kolom kanan discroll */
@media (min-width: 992px) {
   .sticky-cover {
      position: -webkit-sticky;
      position: sticky;
      top: 120px; /* Sesuaikan dengan tinggi header Anda */
      z-index: 10;
   }
}

/* --- EFEK COVER BUKU DATAR (KOTAK TAJAM & SHADOW KIRI-ATAS) --- */

.book-realistic-flat {
   position: relative;
   width: 100%;
   aspect-ratio: 2/3;
   
   /* 1. Dibuat kotak murni tanpa lengkungan */
   border-radius: 0; 
   
   box-shadow: 
   0 1px 1px hsl(0deg 0% 0% / 0.075), 
   0 2px 2px hsl(0deg 0% 0% / 0.075), 
   0 4px 4px hsl(0deg 0% 0% / 0.075), 
   0 8px 8px hsl(0deg 0% 0% / 0.075), 
   0 16px 16px hsl(0deg 0% 0% / 0.075);

   /* box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
      
   overflow: hidden;
   background-color: #e2e8f0;
}

/* 3. Efek LIPATAN HITAM TAJAM di sebelah kiri */
/* .book-realistic-flat::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 30px; 
   background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%)
   );
   z-index: 2;
   pointer-events: none; 
} */

.book-realistic-flat::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   background-repeat: no-repeat;
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
   background-size: 50% 100%, 50% 100%;
   background-position: 0% top, 9% top;
}

/* Gambar cover aslinya */
.book-cover-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.btn-primary-action {
   background: var(--accent);
   color: white;
   border: none;
   padding: 14px;
   border-radius: 10px;
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
   text-align: center;
   transition: all 0.2s;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   width: 100%;
}
.btn-primary-action:hover { background: var(--accent-hover); transform: translateY(-2px); color: white;}

/* .link-terkait-btn {
   display: block;
   text-align: center;
   color: var(--text-muted);
   font-size: 14px;
   font-weight: 500;
   text-decoration: underline;
   margin-top: -5px;
   transition: color 0.2s;
}
.link-terkait-btn:hover { color: var(--accent); } */

/* --- KONTEN KANAN (INFO UTAMA) --- */
.gmd-badge {
   display: inline-block;
   background: #e0e7ff;
   color: var(--accent);
   padding: 6px 12px;
   border-radius: 50px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin-bottom: 16px;
}

.book-title {
   font-size: 32px;
   font-weight: 400;
   margin: 0 0 10px 0;
   line-height: 1.3;
   color: var(--text-main);
   letter-spacing: 0px !important;
}

.book-author {
   font-size: 18px;
   color: var(--text-muted);
   margin: 0 0 24px 0;
}
.book-author strong { color: var(--text-main); }

.book-abstract {
   
   line-height: 1.8;
   color: #475569;
   padding-top: 24px;
   border-top: 1px solid var(--border);
}

/* --- SPESIFIKASI GRID --- */
.section-title {
   font-size: 20px;
   font-weight: 700;
   margin: 0 0 24px 0;
   color: var(--text-main);
   display: flex;
   align-items: center;
   gap: 10px;
}

.section-title-A {
   font-size: 48px;
   font-weight: 100;
   /* margin: 0 0 24px 0; */
   color: var(--text-main);
   display: flex;
   align-items: center;
   gap: 10px;
}

.section-title-B {
   font-size: 32px;
   font-weight: 100;
   /* margin: 0 0 24px 0; */
   color: var(--text-main);
   display: flex;
   align-items: center;
   gap: 10px;
}

h3.section-title-B {
   font-size: 32px;
   font-weight: 100;
}

.meta-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 24px;
   
}

.meta-item {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.meta-label {
   font-size: 13px;
   color: var(--text-muted);
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.meta-value {
   font-size: 15px;
   font-weight: 600;
   color: var(--text-main);
}

.bolder {
   font-weight: bold;
}

/* Subjek Badges */
.subject-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 8px;
}
.subject-tag {
   background: #ffffff;
   border: 1px solid var(--border);
   color: #475569;
   padding: 6px 14px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
   transition: 0.2s;
}
.subject-tag:hover, .tool-btn:hover { background: #e2e8f0; color: var(--text-main); }

/* --- TABEL KETERSEDIAAN --- */
.table-responsive { overflow-x: auto; }
.modern-table {
   width: 100%;
   border-collapse: collapse;
   text-align: left;
   background: #ffffff; 
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--border);
}
.modern-table th {
   background: #f1f5f9;
   color: var(--text-muted);
   font-weight: 600;
   font-size: 14px;
   padding: 16px;
   border-bottom: 2px solid var(--border);
}
.modern-table td {
   padding: 16px;
   font-size: 14px;
   border-bottom: 1px solid var(--border);
   color: var(--text-main);
}
.modern-table tr:last-child td { border-bottom: none; }

/* CSS Status Badge yang sudah ada */
.status-badge {
   padding: 5px 10px;
   border-radius: 5px;
   font-size: 14px;
   font-weight: 600;
   display: inline-block;
}
.status-tersedia { background: #dcfce7; color: #166534; }
.status-dipinjam { background: #2563eb; color: #ffffff; }

/* TAMBAHAN CSS BARU: Tandon & Perbaikan */
.status-tandon { background: #fef3c7; color: #92400e; } /* Warna kuning/oranye untuk Tandon */
.status-perbaikan { background: #ed1c24; color: #ffffff; } /* Warna merah untuk Perbaikan */

/* Responsive adjustments */
@media (max-width: 991px) {
   .detail-section { padding: 24px; }
   .book-title { font-size: 26px; }
   .book-cover-wrapper { max-width: 300px; margin: 0 auto 30px auto; }
}

/* --- PERBAIKAN TAMPILAN MOBILE (HP) --- */
@media (max-width: 768px) {
   /* 1. Kurangi padding luar (kotak putihnya) */
   .book-hero-card,
   .detail-info-card {
      padding: 15px !important; 
   }
   
   /* 2. Kurangi padding di dalam sel tabel & sesuaikan font */
   .modern-table th, 
   .modern-table td {
      padding: 10px 8px !important; 
      font-size: 13px;
   }

   /* 3. Perkecil ukuran badge status sedikit agar hemat tempat */
   .status-badge {
      padding: 5px 8px;
      font-size: 11px;
   }
}

/* --- LAYOUT SITASI KIRI-KANAN --- */
   .action-tools-section {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 30px 40px; /* Disamakan dengan detail-section */
      margin-bottom: 30px;
      transition: all 0.3s ease; /* Transisi standar detail-section */
      
      /* Animasi muncul dari bawah (Fade In Up) */
      opacity: 0; 
      animation: fadeInUp 0.6s ease-out forwards;
      animation-delay: 0.2s;
   }

    /* Efek Hover disamakan persis dengan detail-section */
   .action-tools-section:hover {
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      transform: translateY(-4px);
      border-color: #cbd5e1;
   }

    /* Keyframes untuk animasi dari bawah ke atas dengan efek pudar */
   @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
   }

   .action-tools-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
   }

   .tool-btn {
      background: transparent;
      border: 1px solid transparent;
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 8px;
      transition: all 0.2s ease;
   }

   .tool-btn.active { background: #e0e7ff; color: #2563eb; border-color: #c7d2fe !important; }

   /* --- TAMPILAN KHUSUS MOBILE (HP) --- */
   @media (max-width: 768px) {
      .action-tools-bar {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         width: 100%;
      }

      /* Targetkan semua tombol dan tombol yang aktif */
      .tool-btn {
         width: 100%;
         justify-content: center;
         padding: 10px 4px;
         
         /* Perubahan Warna Khusus Mobile */
         background: rgb(226, 232, 240);
         border: 1px solid var(--border);
      }
   }

   p.citation-text {
      font-size: 14px;
      font-weight: bold;
      line-height: 1.2em;
      margin-top: 10px;
   }
   .citation-link, .howtoborrow-link {
      color: #ed1c24;
      font-weight: 300 !important;
   }

    .tool-content-area {
        margin-top: 15px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 25px;
        display: none; 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .tool-content-box { display: none; animation: slideDown 0.3s ease; }
    .tool-content-box.active { display: block; }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .action-label {
        display: block; font-size: 13px; font-weight: 600; color: #64748b;
        margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
    }

    .copy-link-wrapper { display: flex; gap: 10px; }
    .copy-link-wrapper input {
        flex: 1; padding: 10px 15px; border: 1px solid #e2e8f0;
        border-radius: 6px; background: #f8fafc; color: #1e293b; font-size: 14px;
    }

    .btn-action-primary {
        background: #2563eb; color: white; border: none; padding: 10px 20px;
        border-radius: 6px;  font-weight: 600; cursor: pointer; transition: background 0.2s;
        display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    }
    .download {
        background: #0f172a; color: white; border: none; padding: 10px 20px;
        border-radius: 6px;  font-weight: 600; cursor: pointer; transition: background 0.2s;
        display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    }
    .btn-action-primary:hover { background: #ed1c24; color: white; }

    /* LAYOUT SITASI KIRI-KANAN */
    .citation-split-layout { display: flex; gap: 30px; align-items: flex-start; }
    .citation-left-panel {
        flex: 0 0 220px; display: flex; flex-direction: column;
        border-right: 1px solid #e2e8f0; padding-right: 15px;
    }

    .citation-format-btn {
        background: none; border: none; text-align: left; padding: 10px 12px;
        font-size: 14px; color: #1e293b; cursor: pointer; border-radius: 6px;
        transition: all 0.2s; margin-bottom: 2px;
    }

    .citation-format-btn:hover { background: #f8fafc; color: #2563eb; }
    .citation-format-btn.active {
        background: #f1f5f9; color: #2563eb; font-weight: 600;
        border-left: 3px solid #2563eb; border-radius: 0 6px 6px 0;
    }

    .citation-right-panel { flex: 1; }
    .citation-result {
        background: #f8fafc; border-left: 4px solid #2563eb; padding: 20px;
        border-radius: 0 6px 6px 0; margin-bottom: 15px; min-height: 100px;
        display: flex; align-items: center;
    }
    .citation-result p { margin: 0;  color: #1e293b; line-height: 1.6; }

    /* FORMAT BIBTEX */
    .bibtext-display {
        background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
        padding: 15px; font-family: monospace; font-size: 13px; color: #334155;
        white-space: pre-wrap; margin-bottom: 15px;
    }

    /* TAMPILAN MOBILE */
    @media (max-width: 768px) {
        .tool-btn { padding: 8px 12px; font-size: 13px; flex: 1; justify-content: center; }
        .copy-link-wrapper { flex-direction: column; }
        .citation-split-layout { flex-direction: column; gap: 15px; }
        .citation-left-panel { flex: none; width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; padding-right: 0; padding-bottom: 15px; }
    }