/**
 * --------------------------------------------------------------------------
 * INKRAH Web Design Open Source Project for Gallery Portal
 * --------------------------------------------------------------------------
 * 
 * This file is part of INKRAH Web Design (https://inkrah.com/web-design).
 * Specifically designed as part of the INKRAH ecosystem: 
 * https://inkrah.com
 * 
 * @package    LibraryVault
 * @author     INKRAH Web Design <webmaster@inkrah.com>
 * @copyright  Copyright (c) 2026 INKRAH Web Design. All rights reserved.
 * @link       https://inkrah.com/web-design/002
 * @support    Phone/WhatsApp: +62 811 1345 777
 * 
 * LICENCE & USAGE POLICY:
 * This is an open-source content management system (CMS) component. 
 * By using, modifying, or distributing this software, you strictly agree 
 * to use it exclusively for lawful content and purposes that are fully 
 * compliant with applicable laws and moral standards (Halal usage). 
 * Any unlawful, prohibited, or unethical utilization is strictly forbidden.
 * --------------------------------------------------------------------------
 */
 
/* =========================================================
   INKRAH CMS Gallery — light gold, elegant & modern theme
   ========================================================= */
:root{
  --gold-50:  #FBF7EC;
  --gold-100: #F5ECD5;
  --gold-200: #EADFB8;
  --gold-300: #DFC98A;
  --gold-400: #D4AF37;
  --gold-500: #C9A24B;
  --gold-600: #A67C1E;
  --gold-700: #8A6416;
  --ink-900:  #1F1B15;
  --ink-700:  #3A3327;
  --ink-500:  #6B6152;
  --paper:    #FFFDF8;
  --line:     #EAE1CC;
  --success:  #2F7A4D;
  --danger:   #B3402C;
  --radius:   14px;
  --shadow-sm: 0 1px 3px rgba(31,27,21,.08);
  --shadow-md: 0 8px 24px rgba(166,124,30,.14);
  --shadow-lg: 0 20px 48px rgba(31,27,21,.16);
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--gold-50) 0%, #FFFEFB 320px, #FFFEFB 100%);
  color: var(--ink-900);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color: var(--gold-700); text-decoration:none;}
a:hover{color: var(--gold-600);}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}
h1,h2,h3,h4{font-family: var(--font-head); color: var(--ink-900); margin:0 0 .5em;}
p{margin:0 0 1em;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.7em 1.4em; border-radius: 999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:.18s ease;
  font-family: var(--font-body);
}
.btn-gold{ background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color:#fff; box-shadow: var(--shadow-sm);}
.btn-gold:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); color:#fff;}
.btn-ghost{ background: transparent; border-color: var(--gold-300); color: var(--ink-700);}
.btn-ghost:hover{ background: var(--gold-100); color: var(--ink-900);}
.btn-outline{ background:#fff; border-color: var(--line); color: var(--ink-700);}
.btn-block{width:100%;}
.btn-wa{ background:#25D366; color:#fff;}
.btn-wa:hover{ filter:brightness(.95); color:#fff;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---- Header ---- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,253,248,.9); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px;}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ height:38px; width:auto; border-radius:8px; }
.brand-name{ font-family: var(--font-head); font-weight:700; font-size:1.25rem; color: var(--ink-900); letter-spacing:.2px;}
.site-nav{ display:flex; align-items:center; gap:18px; }
.site-nav a{ color: var(--ink-700); font-weight:500; font-size:.95rem;}
.nav-toggle{ display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; }

/* ---- Flash ---- */
.flash{ padding:12px 0; background: var(--gold-100); border-bottom:1px solid var(--gold-200); color: var(--ink-800);}
.flash-error{ background:#FBEAE6; border-color:#F2C6B9; color:#7A2A16;}
.flash-success{ background:#E8F4EC; border-color:#BFE1CB; color:#1F5734;}

/* ---- Hero ---- */
.hero{ padding: 64px 0 40px; text-align:center; }
.hero h1{ font-size: clamp(2rem, 4vw, 3rem); }
.hero p{ color: var(--ink-500); max-width:640px; margin:0 auto 1.5em; font-size:1.05rem;}
.hero-search{ max-width:520px; margin:0 auto; display:flex; gap:8px; }
.hero-search input{ flex:1; padding:.85em 1.1em; border-radius:999px; border:1px solid var(--line); font-size:1rem; background:#fff;}
.hero-search input:focus{ outline:2px solid var(--gold-400); }

/* ---- Filters ---- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px;}
.filters a{
  padding:.5em 1.1em; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:.9rem; font-weight:600; color: var(--ink-700);
}
.filters a.active, .filters a:hover{ background: var(--gold-500); border-color: var(--gold-500); color:#fff; }

/* ---- Grid & cards ---- */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:26px; padding: 10px 0 60px;}
.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm); transition:.2s ease; display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-300);}
.card-thumb{ position:relative; aspect-ratio: 3/4; background: var(--gold-100); overflow:hidden;}
.card-thumb img{ width:100%; height:100%; object-fit:cover;}
.badge{
  position:absolute; top:10px; left:10px; background: rgba(31,27,21,.75); color:#fff;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:.3em .7em; border-radius:999px;
}
.card-body{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-title{ font-family: var(--font-head); font-weight:700; font-size:1.05rem; line-height:1.3; color: var(--ink-900);}
.card-synopsis{ font-size:.88rem; color: var(--ink-500); flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.card-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.card-cta{ font-size:.85rem; font-weight:700; color: var(--gold-700);}

/* ---- Detail page ---- */
.detail-hero{ display:grid; grid-template-columns: 300px 1fr; gap:40px; padding:48px 0; align-items:start;}
.detail-thumb img{ border-radius: var(--radius); box-shadow: var(--shadow-lg); width:100%;}
.detail-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.chip{ background: var(--gold-100); color: var(--gold-700); font-size:.78rem; font-weight:700; padding:.3em .8em; border-radius:999px; text-transform:uppercase; letter-spacing:.4px;}
.detail-title{ font-size:clamp(1.6rem,3vw,2.4rem);}
.detail-synopsis{ color: var(--ink-700); font-size:1.05rem;}
.access-panel{
  margin-top:24px; padding:24px; border-radius: var(--radius); background: var(--paper);
  border:1px solid var(--line); box-shadow: var(--shadow-sm);
}
.access-panel h3{ margin-bottom:8px;}
.access-panel p{ color: var(--ink-500); font-size:.95rem;}
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem; padding:.4em .9em; border-radius:999px;}
.status-granted{ background:#E8F4EC; color:#1F5734;}
.status-pending{ background:#FDF3DC; color:#8A6416;}
.status-none{ background:#F2ECE0; color: var(--ink-700);}

/* ---- Forms (auth / admin) ---- */
.auth-wrap{ max-width:420px; margin:60px auto; padding:36px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);}
.auth-wrap h1{ text-align:center; font-size:1.6rem;}
.auth-wrap .sub{ text-align:center; color: var(--ink-500); margin-bottom:1.5em; font-size:.92rem;}
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color: var(--ink-700);}
.field input, .field select, .field textarea{
  width:100%; padding:.75em .9em; border:1px solid var(--line); border-radius:10px; font-size:.95rem; font-family:var(--font-body); background:#FFFEFB;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold-400); border-color: transparent;}
.field-hint{ font-size:.8rem; color: var(--ink-500); margin-top:4px;}
.form-error{ background:#FBEAE6; color:#7A2A16; padding:10px 14px; border-radius:10px; font-size:.88rem; margin-bottom:16px;}
.form-links{ text-align:center; margin-top:16px; font-size:.9rem;}

/* ---- Viewer ---- */
.viewer-shell{ background:#14110D; min-height:100vh; display:flex; flex-direction:column;}
.viewer-topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:#1F1B15; color:#EFE7D6; }
.viewer-topbar a{ color:#EFE7D6; }
.viewer-title{ font-family: var(--font-head); font-size:1.05rem;}
.viewer-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:0;}
#epub-area{ width:100%; max-width:900px; height:80vh; background:#fff; margin:20px auto; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-lg);}
#pdf-frame{ width:100%; height:calc(100vh - 58px); border:none; }
video#video-player{ width:100%; max-height:calc(100vh - 58px); background:#000;}

/* ---- Footer ---- */
.site-footer{ background: var(--ink-900); color:#D8CFBC; padding:36px 0; margin-top:20px;}
.footer-inner{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;}
.footer-logo{ height:30px; margin-bottom:8px; border-radius:6px;}
.footer-note{ text-align:right; font-size:.85rem; color:#B8AD93;}
.footer-note p{ margin:0 0 4px;}

/* ---- Misc ---- */
.empty-state{ text-align:center; padding:80px 20px; color: var(--ink-500);}
.pagination{ display:flex; justify-content:center; gap:8px; padding-bottom:60px;}
.pagination a, .pagination span{ padding:.5em .9em; border-radius:8px; border:1px solid var(--line); font-size:.9rem; background:#fff;}
.pagination .current{ background: var(--gold-500); color:#fff; border-color: var(--gold-500);}

@media (max-width: 820px){
  .detail-hero{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; text-align:left;}
  .footer-note{ text-align:left;}
}
@media (max-width: 640px){
  .site-nav{ position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:16px 20px; border-bottom:1px solid var(--line); display:none;}
  .site-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}