/* Isi homepage Design B. Header/footer ada di site.css. */
*{box-sizing:border-box}
body.koso-home{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:15.5px;line-height:1.6}
:where(.koso-home) a{color:inherit;text-decoration:none}
.koso-home button{font-family:var(--f)}
.koso-home img{max-width:100%}
.koso-home :focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.koso-home .wrap{max-width:1220px;margin-inline:auto;padding-inline:28px}
.center{text-align:center}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.dark .kicker{color:var(--gold)}
.h2{font-size:44px;line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:10px 0 14px;text-wrap:balance}
.sub{font-size:17px;color:var(--muted);max-width:62ch;margin:0 auto}
.dark{background:var(--night);color:var(--on-dark)}
.dark .sub{color:var(--on-dark-2)}
.sample{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#7a5b00;background:#fff3c2;padding:2px 8px;border-radius:4px;vertical-align:middle}
.circ{width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;flex-shrink:0;transition:background .2s,color .2s}
.circ svg{width:18px;height:18px}

/* Hero: banner tampil utuh selebar layar (opsi 2A) */
.hero{position:relative;background:var(--night);color:#fff}
.hero .stage{position:relative;max-width:1600px;margin-inline:auto;overflow:hidden}
/* Desktop: tinggi banner maks. layar dikurangi header + ~150px, supaya bagian berikutnya terlihat. Lebar ikut menyusut (banner utuh, tidak dipotong). */
@media (min-width:768px){.hero .stage{max-width:min(1600px,max(720px,calc((100svh - 230px) * 1182 / 635)))}}
/* Latar blur banner aktif di kiri-kanan stage (berganti bersama slide). */
.stage-wrap{position:relative;overflow:hidden}
.hero-bg{display:none}
@media (min-width:768px){
  .hero-bg{display:block;position:absolute;inset:0}
  .hero-bg span{position:absolute;inset:-60px;background:center/cover no-repeat;filter:blur(36px) saturate(1.15) brightness(.75);opacity:0;transition:opacity .8s}
  .hero-bg span.on{opacity:1}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,40,.35),transparent 30%,transparent 70%,rgba(10,22,40,.35))}
  .hero .stage{box-shadow:0 0 40px rgba(10,22,40,.35)}
}
@media (prefers-reduced-motion:reduce){.hero-bg span{transition:none}}
.hero .slides{display:flex;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.hero .slide{flex:0 0 100%;display:block}
.hero .slide img{display:block;width:100%;height:auto;aspect-ratio:1182/635;object-fit:cover}
.hero .arr{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(10,22,40,.4);color:#fff;cursor:pointer;z-index:3;display:grid;place-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s,color .2s,border-color .2s}
.hero .arr:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}
.hero .arr svg{width:22px;height:22px}
.hero .prev{left:24px}.hero .next{right:24px}
.hero .dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:3}
.hero .dots button{width:40px;height:4px;border:0;padding:0;border-radius:2px;background:rgba(10,22,40,.35);box-shadow:0 0 0 1px rgba(255,255,255,.35);cursor:pointer;position:relative;overflow:hidden}
.hero .dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;animation:fill var(--dur,6.5s) linear forwards}
.hero.paused .dots button[aria-current="true"]::after{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ticker{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;height:50px;overflow:hidden}
.ticker .tag{flex-shrink:0;background:var(--gold);color:var(--night);font-weight:800;font-size:12.5px;height:100%;display:flex;align-items:center;padding-inline:20px;letter-spacing:.04em}
.ticker .mask{flex:1;min-width:0;overflow:hidden}
.ticker .track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:run 45s linear infinite;font-size:14px;padding-left:24px}
.ticker .track a::before{content:"◆";color:var(--gold);font-size:9px;margin-right:12px;vertical-align:2px}
.ticker .track a:hover{color:var(--gold)}
.ticker:hover .track{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}

/* Menu cepat */
.quick{position:relative;z-index:2;background:var(--night)}
.qbar{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border-radius:20px;box-shadow:0 24px 50px -20px rgba(10,22,40,.45);transform:translateY(40px);overflow:hidden}
.qbar a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 8px;font-weight:700;font-size:14px;color:var(--ink);border-right:1px solid var(--line);transition:background .2s;text-align:center}
.qbar a:last-child{border-right:0}
.qbar a:hover{background:var(--wash)}
.qbar .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff6d1;color:var(--amber)}
.qbar a:nth-child(2n) .ic{background:#e3f3e8;color:var(--green2)}
.qbar svg{width:24px;height:24px}

/* Pimpinan */
.leaders{padding-block:120px 88px}
.lpanel{position:relative;background:var(--green);color:#fff;border-radius:6px;overflow:hidden;margin-top:40px}
.lpanel::before,.lpanel::after{content:"";position:absolute;width:260px;height:260px;background:rgba(255,255,255,.05);transform:rotate(45deg)}
.lpanel::before{left:-130px;top:40px}.lpanel::after{right:-120px;bottom:-60px}
.lslides{display:flex;transition:transform .6s cubic-bezier(.6,0,.2,1)}
.lslide{flex:0 0 100%;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:end;padding:56px 110px 0}
.lslide img{width:auto;max-width:100%;height:380px;object-fit:contain;object-position:center bottom;justify-self:center;display:block;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}
/* Foto Pendiri (slide pertama) sedikit dinaikkan, tidak menempel di dasar panel (permintaan user 16 Okt 2026). */
.lslide:first-child img{margin-bottom:36px}
.lslide .txt{padding-bottom:56px;position:relative;z-index:1;align-self:center}
.lslide h3{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px}
.lslide blockquote{margin:0 0 26px;font-size:17px;line-height:1.7;color:#e3f1e7;font-style:italic;padding:0;border:0}
.lslide hr{border:0;border-top:1px solid rgba(255,255,255,.35);margin:0 0 18px}
.lslide cite{font-style:normal;display:block}
.lslide cite b{display:block;font-size:18px}
.lslide cite span{font-size:14px;color:#cfe5d6}
.lmore{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:14px;color:var(--gold)}
.lmore svg{width:16px;height:16px}
.lnav{position:absolute;top:50%;width:64px;height:64px;margin-top:-32px;border-radius:50%;border:0;background:var(--night);color:#fff;cursor:pointer;z-index:2;display:grid;place-items:center}
.lnav:hover{background:var(--gold);color:var(--night)}
.lnav svg{width:22px;height:22px}
.lnav.prev{left:20px}.lnav.next{right:20px}

/* Fakultas */

/* Kegiatan */
.acts{padding-block:96px 72px;overflow:hidden}
.mos{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,250px);grid-auto-columns:320px;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;margin-top:48px;padding-inline:max(28px,calc((100vw - 1220px)/2 + 28px))}
.mos::-webkit-scrollbar{display:none}
.tile{position:relative;overflow:hidden;color:#fff;display:block;background:var(--night2)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.tile:hover img{transform:scale(1.07)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,22,40,.88),rgba(10,22,40,0) 60%)}
.tile div{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.tile b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px;line-height:1.3}
.tile span{font-size:12.5px;color:#d6deea}
.tile-more{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:28px;background:var(--night2);border:1.5px solid rgba(245,196,0,.35);transition:background .3s,border-color .3s}
.tile-more::after{display:none}
.tile-more .ic{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;margin-bottom:8px;transition:transform .3s}
.tile-more .ic svg{width:24px;height:24px}
.tile-more b{font-size:20px;-webkit-line-clamp:2}
.tile-more span{font-size:13.5px}
.tile-more:hover,.tile-more:focus-visible{background:var(--night);border-color:var(--gold)}
.tile-more:hover .ic{transform:translateX(6px)}
.mctl{display:flex;align-items:center;gap:20px;margin-top:28px}
.mctl button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink);padding:0}
.mctl button svg{width:16px;height:16px}
.mctl .bar{flex:1;height:5px;background:var(--line);border-radius:3px;position:relative}
.mctl .bar i{position:absolute;top:0;height:100%;width:18%;background:var(--ink);border-radius:3px;left:0}

/* Angka */
.stats{position:relative;padding-block:96px;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(245,196,0,.55) 1.4px,transparent 1.6px),radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:46px 46px,14px 14px;background-position:0 0,7px 7px;-webkit-mask-image:radial-gradient(ellipse at 25% 50%,#000 10%,transparent 65%);mask-image:radial-gradient(ellipse at 25% 50%,#000 10%,transparent 65%)}
.sgrid{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.sgrid .h2{font-size:40px}
.sgrid .sub{margin:0}
.nums{display:grid;grid-template-columns:repeat(2,1fr)}
.nums div{padding:22px 28px;border-left:1.5px solid rgba(255,255,255,.25)}
.nums b{display:block;font-size:52px;font-weight:800;color:var(--gold);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.nums span{color:#dfe7f3;font-size:15px}

/* Berita: 3 kolom kategori (Design E); HP: tab */
.news{padding-block:96px}
.news .tabs{display:none}
/* Subgrid: judul, 5 item, dan tautan bawah sebaris di ketiga kolom, jadi tinggi kolom dan tiap baris sama. */
.ncols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;margin-top:48px}
.ncol{min-width:0;display:grid;grid-template-rows:subgrid;grid-row:span 7;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px -18px rgba(10,22,40,.25)}
.ncol-h{margin:0;background:var(--night);color:#fff;font-size:17px;letter-spacing:-.01em;padding:16px 20px;border-bottom:3px solid var(--gold)}
.ncol ul{display:contents;list-style:none}
.nitem{position:relative;display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto 1fr;gap:12px 14px;margin-inline:20px;padding-block:16px;border-bottom:1px solid var(--line);align-content:start}
.nitem:last-child{border-bottom:0}
.nitem:not(:has(.sdg-foot)){grid-template-rows:auto}
.nitem>img,.nitem>.nph{width:96px;height:72px;object-fit:cover;display:block;border-radius:6px}
.nitem .nph{font-size:9px}
.nitem .nph img{width:46%!important;margin:0}
.nitem .nph::before{filter:blur(12px)}
.nbody{min-width:0;display:flex;flex-direction:column;gap:4px}
.nlink{font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nlink::after{content:"";position:absolute;inset:0;z-index:1}
.nitem:hover:not(:has(.sdg-foot:hover)) .nlink{color:var(--green2)}
.nbody time{font-size:12px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.nitem .sdg-foot{grid-column:1/-1;align-self:end;margin:0;padding-top:10px;border-top:1px dashed var(--line);flex-wrap:nowrap;gap:6px}
.nitem .sdg-sign{padding-right:8px;font-size:9.5px;gap:5px}
.nitem .sdg-wheel{width:18px;height:18px;-webkit-mask:radial-gradient(circle,transparent 5.5px,#000 6px);mask:radial-gradient(circle,transparent 5.5px,#000 6px)}
.nitem .sdg-badges{flex-wrap:nowrap;gap:4px}
.nitem .sdg-badge{min-width:24px;height:24px;padding:0 4px;font-size:12px}
.ncol-more{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--wash,#f3f6fa);font-size:13.5px;font-weight:700;border-top:1px solid var(--line)}
.ncol-more svg{width:16px;height:16px}
.ncol-more:hover{color:var(--green2)}
.tabs{display:flex;justify-content:center;gap:8px;margin-top:28px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--line);background:#fff;padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--night);border-color:var(--night);color:#fff}

/* Kata mereka: coverflow gambar utuh 4:5 (feed IG). Posisi tiap kartu diatur home.js (translateX + scale). */
.people{padding-block:96px 72px;overflow:hidden}
.cflow{--cw:360px;position:relative;height:calc(var(--cw) * 1.25);margin-top:48px;outline-offset:8px}
.cf-card{position:absolute;top:0;left:50%;width:var(--cw);aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--night2);box-shadow:0 20px 40px rgba(0,0,0,.35);transform:translateX(-50%);transition:transform .5s,opacity .5s,filter .5s;cursor:pointer}
.cf-card img{width:100%;height:100%;object-fit:cover;display:block}
.cf-arr{position:absolute;top:50%;z-index:20;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(10,22,40,.6);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.cf-arr svg{width:18px;height:18px}
.cf-arr:hover{background:#fff;color:var(--night)}
.cf-arr.prev{left:max(28px,calc((100% - 1220px)/2 + 28px))}.cf-arr.next{right:max(28px,calc((100% - 1220px)/2 + 28px))}
.cf-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.cf-dots button{width:28px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.25);cursor:pointer;padding:0}
.cf-dots button[aria-current="true"]{background:var(--gold)}

/* Mitra */
.partners{background:linear-gradient(180deg,var(--amber),#c38900);color:#fff;padding-block:88px;overflow:hidden}
.partners .sub{color:#fff6dc}
.marq{overflow:hidden;margin-top:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mtrack{display:flex;gap:16px;width:max-content;animation:run 40s linear infinite}
.marq:hover .mtrack{animation-play-state:paused}
.lt{width:200px;height:120px;padding:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lt img{max-width:100%;max-height:100%;object-fit:contain;display:block}

@media (max-width:1100px){
  .h2{font-size:36px}
  .qbar{grid-template-columns:repeat(3,1fr)}
  .qbar a:nth-child(3){border-right:0}
  .qbar a:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .lslide{grid-template-columns:1fr 1.3fr;padding:40px 88px 0}
  .sgrid{grid-template-columns:1fr}
  .ncols{gap:0 16px}
  .nitem{grid-template-columns:72px 1fr;margin-inline:14px}
  .nitem>img,.nitem>.nph{width:72px;height:56px}
  .nitem .sdg-foot{flex-wrap:wrap}
}
@media (max-width:640px){
  body.koso-home{font-size:15px}
  .koso-home .wrap{padding-inline:18px}
  .h2{font-size:30px}
  .sub{font-size:15.5px}
  .hero .arr{display:none}
  .hero .dots{bottom:8px}
  .hero .dots button{width:24px;height:3px}
  .ticker{height:44px}.ticker .tag{padding-inline:12px;font-size:11px}.ticker .track{font-size:13px;animation-duration:30s}
  .qbar{border-radius:16px;transform:translateY(32px)}
  .qbar a{padding:16px 4px;font-size:12px;gap:8px}
  .qbar .ic{width:40px;height:40px;border-radius:12px}
  .qbar svg{width:20px;height:20px}
  .leaders{padding-block:84px 56px}
  .lslide{grid-template-columns:1fr;gap:0;padding:32px 22px 0}
  /* HP: semua foto (termasuk Rektor) naik 36px seperti Pendiri, tidak menempel di dasar kartu/tombol panah */
  .lslide img{height:240px;max-width:100%;order:2;margin-top:8px;margin-bottom:36px}
  /* Foto Rektor lebih besar: mengisi ruang sisa (slide Pendiri lebih tinggi karena judul 2 baris), tinggi kartu tetap */
  .lslide:nth-child(2) img{height:290px}
  .lslide .txt{padding-bottom:0}
  .lslide h3{font-size:24px}
  .lslide blockquote{font-size:15px}
  .lnav{width:44px;height:44px;top:auto;bottom:16px;margin:0}
  .lnav.prev{left:auto;right:68px}.lnav.next{right:16px}
  .mos{grid-template-rows:repeat(2,190px);grid-auto-columns:250px;padding-inline:18px;margin-top:32px}
  .sgrid .h2{font-size:30px}
  .nums b{font-size:38px}.nums div{padding:16px 18px}
  .news .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:28px}
  .tabs button{padding:10px 4px;font-size:12.5px;white-space:normal;line-height:1.2;min-width:0}
  .ncols{grid-template-columns:1fr;margin-top:20px}
  .ncol{display:none;grid-row:auto;grid-template-rows:none}.ncol.on{display:block}
  .ncol-h{display:none}
  .nitem{grid-template-columns:104px 1fr;margin-inline:14px}
  .nitem>img,.nitem>.nph{width:104px;height:78px}
  .cflow{--cw:72vw;margin-top:32px}
  .cf-arr{display:none}
  .lt{width:140px;height:88px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .ticker .track,.mtrack{animation:none}
  .hero .slides,.lslides,.tile img,.cf-card,.tile-more .ic{transition:none}
  .mos{scroll-behavior:auto}
  .hero .dots button[aria-current="true"]::after{animation:none;transform:none}
}