/* Pengumuman Page Styles - ITSI Theme */
/* Based on template pengumuman.html */

/* Page Hero Section */
#phero{position:relative;overflow:hidden;background:var(--ink);padding:clamp(4rem,8vh,6.5rem) 0 clamp(2.5rem,4.5vh,4rem)}
.ph-bg{position:absolute;inset:0;background:radial-gradient(ellipse 65% 58% at 58% 30%,rgba(12,61,122,.48),transparent 62%),radial-gradient(ellipse 38% 45% at 6% 85%,rgba(8,39,79,.62),transparent 55%),linear-gradient(165deg,var(--ink),var(--navy))}
.ph-dots{position:absolute;inset:0;opacity:.022;background-image:radial-gradient(circle,rgba(117,192,245,1) 1px,transparent 1px);background-size:44px 44px}
.ph-blob{position:absolute;border-radius:50%;filter:blur(88px);pointer-events:none}
.ph-b1{width:460px;height:460px;background:radial-gradient(circle,rgba(20,89,179,.2),transparent 70%);top:-20%;right:-6%;animation:floatA 13s ease-in-out infinite}
.ph-b2{width:280px;height:280px;background:radial-gradient(circle,rgba(8,39,79,.28),transparent 70%);bottom:-8%;left:0;animation:floatB 10s ease-in-out infinite}
.ph-inner{position:relative;z-index:2}
.bc{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:rgba(255,255,255,.35);margin-bottom:1.2rem;flex-wrap:wrap}
.bc a{transition:color .2s}
.bc a:hover{color:rgba(255,255,255,.8)}
.ph-title{font-family:"Cormorant Garamond",serif;font-size:clamp(2.2rem,3.8vw,3.8rem);font-weight:700;color:#fff;line-height:1.08;margin-bottom:.65rem}
.ph-title em{font-style:italic;color:var(--gold-lt)}
.ph-sub{font-size:.95rem;color:rgba(255,255,255,.5);line-height:1.8;max-width:560px;margin-bottom:1.6rem}
/* Summary stats in hero */
.ph-stats{display:flex;gap:1rem;flex-wrap:wrap}
.ph-stat{display:flex;align-items:center;gap:.65rem;background:rgba(10,38,88,.52);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.65rem 1.1rem;backdrop-filter:blur(12px)}
.ph-stat-n{font-family:"Cormorant Garamond",serif;font-size:1.4rem;font-weight:700;color:var(--cerulean);line-height:1}
.ph-stat-l{font-size:.69rem;color:rgba(255,255,255,.42);line-height:1.3}
.ph-stat.red .ph-stat-n{color:#FF6B6B}
.ph-stat.gold .ph-stat-n{color:var(--gold-lt)}

/* Animations */
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* Layout */
.two-col{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start}
.sec-py-sm{padding:clamp(3rem,5vw,5rem)0}

/* Container centering fix */
.container{max-width:var(--max);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.8rem)}

/* Sidebar */
.sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:1.1rem}

/* Sidebar card base */
.s-card{background:var(--white);border:1px solid #C8DEFF;border-radius:22px;overflow:hidden;box-shadow:var(--sh1)}
.s-head{background:linear-gradient(135deg,var(--navy),var(--royal));padding:.95rem 1.2rem;font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* Search Box */
.s-search{padding:1rem}
.search-box{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1.5px solid #C8DEFF;border-radius:11px;padding:.65rem .95rem;transition:border-color .2s}
.search-box:focus-within{border-color:var(--azure);box-shadow:0 0 0 3px rgba(30,114,212,.1)}
.search-box svg{color:var(--ts);flex-shrink:0;transition:color .2s}
.search-box:focus-within svg{color:var(--cobalt)}
.search-box input{border:none;background:transparent;font-family:inherit;font-size:.84rem;color:var(--tb);width:100%;outline:none}
.search-box input::placeholder{color:var(--ts)}

/* Category Filter */
.s-kat-list{padding:.5rem .75rem .75rem}
.kat-item{display:flex;align-items:center;justify-content:space-between;padding:.58rem .72rem;border-radius:9px;cursor:pointer;transition:all .2s;font-size:.83rem;font-weight:600;color:var(--tm)}
.kat-item:hover{background:var(--frost);color:var(--royal)}
.kat-item.on{background:linear-gradient(135deg,var(--cobalt),var(--azure));color:#fff}
.kat-item .kat-nm{display:flex;align-items:center;gap:.55rem}
.kat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kat-cnt{font-size:.72rem;font-weight:700;background:rgba(255,255,255,.22);padding:.12rem .48rem;border-radius:20px}
.kat-item:not(.on) .kat-cnt{background:var(--frost);color:var(--cobalt)}

/* Dot colors */
.dot-ka{background:#1E72D4}
.dot-km{background:#0a8a3e}
.dot-ku{background:#c0390c}
.dot-fa{background:#8B5CF6}
.dot-pn{background:#D97706}
.dot-pe{background:#0891B2}
.dot-um{background:#6B7280}

/* Badge colors */
.kat-ka{background:rgba(30,114,212,.1);color:#1459B3}
.kat-km{background:rgba(10,138,62,.1);color:#065f2c}
.kat-ku{background:rgba(192,57,12,.1);color:#a33010}
.kat-fa{background:rgba(139,92,246,.1);color:#6D28D9}
.kat-pn{background:rgba(217,119,6,.1);color:#92400E}
.kat-pe{background:rgba(8,145,178,.1);color:#0e6984}
.kat-um{background:rgba(107,114,128,.1);color:#374151}

.icon-ka{background:rgba(30,114,212,.12)}
.icon-km{background:rgba(10,138,62,.12)}
.icon-ku{background:rgba(192,57,12,.12)}
.icon-fa{background:rgba(139,92,246,.12)}
.icon-pn{background:rgba(217,119,6,.12)}
.icon-pe{background:rgba(8,145,178,.12)}
.icon-um{background:rgba(107,114,128,.12)}

/* Sidebar links box */
.s-links{padding:.5rem .75rem .75rem;display:flex;flex-direction:column;gap:.2rem}
.s-link{display:flex;align-items:center;gap:.65rem;padding:.62rem .8rem;border-radius:9px;font-size:.83rem;font-weight:600;color:var(--tm);transition:all .2s;text-decoration:none}
.s-link:hover{background:var(--frost);color:var(--royal)}
.s-link.cur{background:linear-gradient(135deg,var(--cobalt),var(--azure));color:#fff}

/* Pengumuman list */
.peng-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.peng-count{font-size:.84rem;color:var(--ts)}
.peng-count strong{color:var(--td)}
.sort-wrap{display:flex;align-items:center;gap:.5rem}
.sort-lbl{font-size:.78rem;color:var(--ts)}
.sort-sel{font-family:inherit;font-size:.8rem;font-weight:600;color:var(--tb);background:var(--white);border:1.5px solid #C8DEFF;border-radius:9px;padding:.42rem .85rem;cursor:pointer;outline:none;transition:border-color .2s}
.sort-sel:focus{border-color:var(--azure)}

/* Card list */
.peng-list{display:flex;flex-direction:column;gap:1.1rem}

/* Individual card */
.p-card{display:flex;gap:1.2rem;background:var(--white);border:1px solid #C8DEFF;border-radius:20px;padding:1.5rem;transition:all .28s var(--ease);position:relative;overflow:hidden}
.p-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cobalt),var(--cerulean));transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.p-card:hover{box-shadow:var(--sh3);transform:translateY(-2px);border-color:#ADDAFF}
.p-card:hover::before{transform:scaleY(1)}
.p-card.penting{border-color:#ADDAFF;background:linear-gradient(135deg,rgba(30,114,212,.03),var(--white))}

/* Card left – icon */
.p-card-left{flex-shrink:0}
.p-icon-wrap{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}

/* Card body */
.p-card-body{flex:1;min-width:0}
.p-card-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.62rem}
.p-kat{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.2rem .6rem;border-radius:6px}
.p-badge{font-size:.67rem;font-weight:800;color:#E53E3E;background:rgba(229,62,62,.1);padding:.2rem .6rem;border-radius:6px;animation:blink 2.5s ease-in-out infinite}
.p-id{font-size:.68rem;font-weight:700;color:var(--ts);font-family:monospace}
.p-sep{color:var(--pale);font-size:.75rem}
.p-tgl,.p-views{font-size:.72rem;color:var(--ts)}
.p-judul{font-size:1rem;font-weight:700;color:var(--td);line-height:1.45;margin-bottom:.65rem;cursor:pointer;transition:color .2s}
.p-judul:hover{color:var(--azure)}
.p-isi{font-size:.86rem;color:var(--tm);line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s}
.p-isi.expanded{-webkit-line-clamp:unset;display:block}
.p-card-foot{display:flex;align-items:center;gap:.65rem;margin-top:1rem;flex-wrap:wrap}
.btn-lamp{display:flex;align-items:center;gap:.42rem;font-size:.78rem;font-weight:700;color:var(--cobalt);background:var(--frost);border:1px solid var(--pale);padding:.42rem .95rem;border-radius:8px;transition:all .22s;text-decoration:none}
.btn-lamp:hover{background:var(--azure);border-color:var(--azure);color:#fff}
.btn-detail{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--tm);background:var(--surface);border:1px solid #C8DEFF;padding:.42rem .95rem;border-radius:8px;transition:all .22s}
.btn-detail:hover{border-color:var(--azure);color:var(--cobalt)}
.btn-arrow{transition:transform .3s var(--ease)}
.btn-detail.open .btn-detail-txt::after{content:" Sembunyikan";display:none}
.btn-detail.open .btn-arrow{transform:rotate(180deg)}
.btn-share{display:flex;align-items:center;gap:.42rem;font-size:.78rem;font-weight:600;color:var(--ts);background:transparent;border:1px solid #C8DEFF;padding:.42rem .88rem;border-radius:8px;transition:all .22s;margin-left:auto}
.btn-share:hover{border-color:var(--cerulean);color:var(--cobalt)}

/* Empty state */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--ts)}
.empty-icon{font-size:3.5rem;margin-bottom:1rem}
.empty-txt{font-size:1rem;font-weight:600;color:var(--tm);margin-bottom:.5rem}
.empty-sub{font-size:.84rem;color:var(--ts)}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-top:2rem}
.pag-btn{width:38px;height:38px;border-radius:9px;background:var(--white);border:1.5px solid #C8DEFF;color:var(--tm);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center}
.pag-btn:hover{background:var(--frost);border-color:var(--azure);color:var(--cobalt)}
.pag-btn.on{background:linear-gradient(135deg,var(--cobalt),var(--azure));border-color:transparent;color:#fff}
.pag-btn.arrow{width:auto;padding:0 1rem}
.pag-info{font-size:.78rem;color:var(--ts);padding:0 .5rem}

/* Responsive Design */
@media(max-width:1024px){
  .two-col{grid-template-columns:1fr}
  .sidebar{order:2}
  .main-col{order:1}
}

@media(max-width:580px){
  .ph-stats{flex-direction:column}
}

@media(max-width:768px){
  .p-card{flex-direction:column;gap:1rem}
  .p-card-left{width:100%;display:flex;justify-content:center}
  .p-card-meta{flex-direction:column;align-items:flex-start;gap:.3rem}
  .p-card-foot{flex-direction:column;align-items:stretch}
  .btn-share{margin-left:0}
  .pagination{gap:.2rem}
  .pag-btn{width:34px;height:34px;font-size:.75rem}
}