/*
* ═══════════════════════════════════════════════════════════════
* direktori_fj26.css
* "#program #left_panel" (direktori.html) — a two-section directory
* sidebar: "UMKM Unggulan Daerah" (regional UMKM, blue/cyan) and
* "Lembaga Mitra" (partner institutions, green/gold). Reuses the
* --fj26-* tokens (color_fj26_override.css). Loaded LAST in
* so nothing existing needs to change. Static markup, always
* visible — no scroll-reveal gating. On mobile/tablet (<=991px)
* #left_panel collapses into an accordion, closed by default;
* pairs with /asset_easy/js_town/direktori_fj26.js for that toggle
* (falls back to always-expanded if that script doesn't load).
* ═══════════════════════════════════════════════════════════════
*/
.fj26-dir-panel{
display:flex;
flex-direction:column;
gap:18px;
padding-right:10px;
}
.fj26-dir-section{
--dir-accent: var(--fj26-blue,#1E6FFF);
--dir-accent-2: var(--fj26-cyan,#35E1FF);
border-radius:16px;
padding:18px 16px;
background:linear-gradient(160deg, rgba(10,20,66,0.65), rgba(10,23,112,0.35));
border:1px solid rgba(53,225,255,0.14);
}
.fj26-dir-section-mitra{
--dir-accent: var(--fj26-green,#17C994);
--dir-accent-2: var(--fj26-gold,#E8C766);
}
.fj26-dir-section-head{
display:flex;
align-items:center;
gap:10px;
padding-bottom:12px;
margin-bottom:10px;
border-bottom:1px solid rgba(53,225,255,0.18);
}
.fj26-dir-section-icon{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:10px;
color:var(--fj26-navy-deepest,#050B22);
background:linear-gradient(135deg, var(--dir-accent), var(--dir-accent-2));
box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.fj26-dir-section-title{
margin:0;
font-family:'Exo', sans-serif;
font-weight:700;
font-size:14.5px;
line-height:1.3;
color:var(--fj26-white,#F3F7FF);
}
.fj26-dir-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:6px;
}
.fj26-dir-link{
position:relative;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
padding:10px 12px;
border-radius:10px;
background:rgba(53,225,255,0.05);
border:1px solid transparent;
text-decoration:none !important;
transition:background .25s ease, border-color .25s ease, transform .25s ease, padding-left .25s ease;
}
.fj26-dir-link-icon{
flex:0 0 auto;
width:18px;
height:18px;
object-fit:contain;
}
.fj26-dir-link-txt{
flex:1 1 auto;
font-family:'Barlow', Arial, sans-serif;
font-weight:600;
font-size:12.5px;
letter-spacing:0.01em;
color:rgba(230,240,255,0.8);
transition:color .25s ease;
}
.fj26-dir-link-arrow{
flex:0 0 auto;
display:flex;
color:var(--dir-accent-2);
opacity:0;
transform:translateX(-4px);
transition:opacity .25s ease, transform .25s ease;
}
.fj26-dir-link:hover{
background:rgba(53,225,255,0.1);
border-color:rgba(53,225,255,0.28);
padding-left:16px;
transform:translateX(2px);
}
.fj26-dir-link:hover .fj26-dir-link-txt{
color:var(--fj26-white,#F3F7FF);
}
.fj26-dir-link:hover .fj26-dir-link-arrow{
opacity:1;
transform:translateX(0);
}
.fj26-dir-link:focus-visible{
outline:2px solid var(--dir-accent-2);
outline-offset:2px;
}
@media (max-width:991px){
.fj26-dir-panel{
margin-bottom:24px;
padding-right:0;
}
}
@media (prefers-reduced-motion: reduce){
.fj26-dir-link{ transition:none !important; }
.fj26-dir-link-arrow{ transition:none !important; }
}
/* ══════════════════════════════════════════════════════
#right_panel — program items in a 3-column grid that
flows to further rows as more items are added; the
day-badge image and the "Day N" pill stay full-width
above the grid. Scoped to #right_panel only, so
program.html's own side-by-side day columns (no
#right_panel there) are unaffected.
══════════════════════════════════════════════════════ */
#right_panel .fj26-prog-daycol{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
margin:0 0 24px;
}
#right_panel .fj26-prog-daybadge,
#right_panel .fj26-prog-dayhead,
#right_panel .fj26-prog-province-title,
#right_panel .fj26-prog-province-underline{
grid-column:1 / -1;
}
@media (max-width:767px){
#right_panel .fj26-prog-daycol{
grid-template-columns:1fr;
}
}
/* ══════════════════════════════════════════════════════
Product/UMKM search bar — fills .fj26-prog-daybadge
══════════════════════════════════════════════════════ */
.fj26-dir-searchform{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:12px;
width:100%;
padding:18px 20px;
border-radius:16px;
background:linear-gradient(160deg, rgba(10,20,66,0.65), rgba(10,23,112,0.35));
border:1px solid rgba(53,225,255,0.16);
}
.fj26-dir-searchfield{
display:flex;
flex-direction:column;
gap:6px;
flex:1 1 20px;
min-width:140px;
}
.fj26-dir-searchfield label{
font-family:'Barlow', Arial, sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:0.03em;
text-transform:uppercase;
color:rgba(230,240,255,0.6);
}
.fj26-dir-searchfield input,
.fj26-dir-searchfield select{
height:40px;
padding:0 12px;
border-radius:10px;
background:rgba(5,11,34,0.55);
border:1px solid rgba(230,240,255,0.18);
color:var(--fj26-white,#F3F7FF);
font-family:'Barlow', Arial, sans-serif;
font-size:13px;
outline:none;
transition:border-color .25s ease, box-shadow .25s ease;
}
.fj26-dir-searchfield input::placeholder{
color:rgba(230,240,255,0.4);
}
.fj26-dir-searchfield input:focus,
.fj26-dir-searchfield select:focus{
border-color:var(--fj26-cyan,#35E1FF);
box-shadow:0 0 0 3px rgba(53,225,255,0.15);
}
.fj26-dir-searchfield select{
appearance:none;
-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2335E1FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:16px;
padding-right:32px;
}
.fj26-dir-searchfield select option{
background:#0A1442;
color:var(--fj26-white,#F3F7FF);
}
.fj26-dir-searchbtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
flex:0 0 auto;
height:40px;
padding:0 22px;
border:none;
border-radius:10px;
font-family:'Exo', sans-serif;
font-weight:700;
font-size:13px;
letter-spacing:0.02em;
color:var(--fj26-navy-deepest,#050B22);
background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF));
box-shadow:0 6px 16px rgba(30,111,255,0.28);
cursor:pointer;
transition:box-shadow .3s ease, transform .3s ease;
}
.fj26-dir-searchbtn:hover{
box-shadow:0 8px 22px rgba(53,225,255,0.4);
transform:translateY(-2px);
}
.fj26-dir-searchbtn:focus-visible{
outline:2px solid var(--fj26-cyan,#35E1FF);
outline-offset:2px;
}
@media (max-width:600px){
.fj26-dir-searchform{
flex-direction:column;
align-items:stretch;
}
.fj26-dir-searchbtn{
width:100%;
}
}
/* ══════════════════════════════════════════════════════
#right_panel item links — the thumb and the title both
navigate to the item's detail page (no more zoom modal)
══════════════════════════════════════════════════════ */
#right_panel .fj26-prog-thumb{
display:block;
}
.fj26-prog-title-link{
color:inherit;
text-decoration:none !important;
transition:color .25s ease;
}
.fj26-prog-title-link:hover{
color:var(--fj26-cyan,#35E1FF);
}
.fj26-prog-title-link:focus-visible{
outline:2px solid var(--fj26-cyan,#35E1FF);
outline-offset:2px;
}
/* ══════════════════════════════════════════════════════
CATEGORY TAG VARIANTS — 3 icon/color styles for
.fj26-prog-tag, matching the search form's Kategori
options. Usage:
Craft / Kerajinan
Fashion & Aksesori
Makanan & Minuman
(see the matching