/*
Theme Name: STK Modern
Theme URI: https://stkyakobus.ac.id
Author: Yohanes Hendro
Author URI: mailto:yohaneshenz@stkyakobus.ac.id
Description: Tema resmi Sekolah Tinggi Katolik Santo Yakobus Merauke. Latar terang, maroon sebagai aksen, emas dari lambang kampus.
Version: 3.0.0
License: GNU General Public License v2 or later
Text Domain: stk-modern
Tags: education, university, academic, responsive
*/

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
    /* Aksen — dipakai terukur, bukan sebagai latar dominan */
    --maroon:        #8c1d2c;
    --maroon-dark:   #6b1421;
    --maroon-deep:   #4d0d17;
    --maroon-soft:   #fdf2f3;
    --gold:          #f5b301;   /* diambil dari lambang kampus */
    --gold-dark:     #c98f00;
    --gold-soft:     #fff8e6;

    /* Netral sejuk — inti kenyamanan baca */
    --white:         #ffffff;
    --bg:            #f5f7fa;
    --bg-alt:        #eef1f6;
    --border:        #e2e6ec;
    --border-soft:   #eef0f4;
    --ink:           #17202e;
    --ink-2:         #384252;
    --muted:         #6b7688;
    --muted-2:       #94a0b1;

    /* Warna aksen bervariasi untuk ikon & kartu */
    --c-blue:   #2563eb;  --c-blue-bg:   #e8efff;
    --c-teal:   #0e9488;  --c-teal-bg:   #dcf5f2;
    --c-violet: #7c3aed;  --c-violet-bg: #f0e9ff;
    --c-rose:   #be123c;  --c-rose-bg:   #ffe8ee;
    --c-amber:  #b45309;  --c-amber-bg:  #fff2dc;
    --c-green:  #15803d;  --c-green-bg:  #e3f7e9;
    --c-cyan:   #0369a1;  --c-cyan-bg:   #e2f2fc;
    --c-plum:   #a21caf;  --c-plum-bg:   #fbe9fd;

    --font-display: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Skala naik — tidak ada teks di bawah 14px demi keterbacaan */
    --step--1: .875rem;    /* 14px */
    --step-0:  1rem;       /* 16px */
    --step-1:  1.125rem;   /* 18px */
    --step-2:  1.375rem;
    --step-3:  1.75rem;
    --step-4:  2.25rem;

    --sh-1: 0 1px 2px rgba(23, 32, 46, .06);
    --sh-2: 0 4px 14px rgba(23, 32, 46, .08);
    --sh-3: 0 14px 38px rgba(23, 32, 46, .13);

    --r:    8px;
    --r-lg: 14px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --wrap: 1240px;

    --h-top: 74px;
    --h-nav: 54px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Ganti kedipan highlight abu-abu/biru bawaan browser saat elemen
       diketuk di layar sentuh -- feedback sentuh sendiri diberikan lewat
       :active pada tombol/tautan supaya tetap terasa responsif tanpa
       kedipan bawaan yang tidak sesuai warna tema. */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink-2);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
ul, ol { list-style: none; }

a { color: var(--maroon); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--maroon-dark); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.22;
    color: var(--ink);
    text-wrap: balance;
}

button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--gold-soft); color: var(--maroon-deep); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.stk-i { flex-shrink: 0; vertical-align: middle; }

.stk-container { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* Bagian bersilang terang–sejuk agar tidak monoton putih.
   Tepi atas/bawah diberi gradasi tipis sebagai pembatas lembut. */
.stk-section { padding: 46px 0; position: relative; }
.stk-section--bg {
    background:
        linear-gradient(180deg, #eef1f6 0%, var(--bg) 12%, var(--bg) 88%, #eef1f6 100%);
    border-block: 1px solid var(--border);
}
.stk-section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }

/* Ornamen motif sebagai pemisah bagian */
.stk-motif-mark { color: var(--gold); opacity: .5; margin: 0 auto; }
.stk-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 34px; }
.stk-divider::before, .stk-divider::after {
    content: '';
    height: 1px;
    width: min(140px, 18vw);
    background: linear-gradient(90deg, transparent, var(--border-strong, #d6cabb));
}
.stk-divider::after { background: linear-gradient(270deg, transparent, var(--border-strong, #d6cabb)); }

/* Judul bagian */
.stk-shead { margin-bottom: 26px; }
.stk-shead--center { text-align: center; }
.stk-shead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--maroon);
    margin-bottom: 12px;
}
.stk-shead__eyebrow::before { content: ''; width: 24px; height: 3px; background: var(--gold); border-radius: 2px; }
.stk-shead--center .stk-shead__eyebrow::after { content: ''; width: 24px; height: 3px; background: var(--gold); border-radius: 2px; }
.stk-shead h2 { font-size: var(--step-4); letter-spacing: -.01em; margin-bottom: 7px; }
.stk-shead p { font-size: var(--step-1); color: var(--muted); max-width: 60ch; line-height: 1.6; }
.stk-shead--center p { margin-inline: auto; }

/* Tombol */
.stk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: var(--r);
    font-size: var(--step-0);
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: all .2s var(--ease);
    white-space: nowrap;
}
.stk-btn--primary { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.stk-btn--primary:hover { background: var(--maroon-dark); border-color: var(--maroon-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-2); }
.stk-btn--gold { background: var(--gold); border-color: var(--gold); color: #3d2b00; }
.stk-btn--gold:hover { background: #ffc21f; border-color: #ffc21f; color: #3d2b00; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 179, 1, .35); }
.stk-btn--light { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.95); color: var(--maroon); }
.stk-btn--light:hover { background: #fff; color: var(--maroon-dark); transform: translateY(-2px); }
.stk-btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(4px); }
.stk-btn--ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
/* Feedback saat ditekan (:active) -- terasa di semua perangkat, termasuk
   layar sentuh yang tidak pernah memicu :hover sama sekali. */
.stk-btn:active { transform: scale(.97); }
.stk-btn--outline { background: transparent; border-color: var(--border); color: var(--ink); }
.stk-btn--outline:hover { border-color: var(--maroon); color: var(--maroon); background: var(--maroon-soft); }

.stk-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--maroon); }
.stk-link .stk-i { transition: transform .18s var(--ease); }
.stk-link:hover .stk-i { transform: translateX(4px); }

/* =========================================================
   3. TOP BAR
   ========================================================= */
.stk-topbar {
    background: var(--maroon-deep);
    color: rgba(255,255,255,.7);
    font-size: var(--step--1);
    padding: 7px 0;
}
.stk-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.stk-topbar__group { display: flex; align-items: center; gap: 20px; }
.stk-topbar__item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.7); }
.stk-topbar a.stk-topbar__item:hover { color: var(--gold); }
.stk-topbar__item .stk-i { color: var(--gold); opacity: .9; }

/* =========================================================
   4. HEADER — dua baris agar menu tidak terpotong
   ========================================================= */
.stk-header {
    background: var(--white);
    box-shadow: var(--sh-1);
    position: relative;
    overflow: hidden;
}
/* Motif memenuhi pita dari tepi ke tepi, lapisan paling belakang */
.stk-header__motif {
    position: absolute;
    inset: 0;
    background-image: var(--motif-light);
    background-repeat: repeat;
    z-index: 0;
    pointer-events: none;
}
/* Cenderawasih ikut di belakang isi */
.stk-header__bird {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 92%;
    width: auto;
    max-width: none;
    opacity: .72;
    z-index: 1;
    pointer-events: none;
    animation: birdFloat 9s ease-in-out infinite;
}
/* Ayunan dijaga kecil agar burung tidak menyentuh tepi header */
@keyframes birdFloat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-51.5%, -51.5%) scale(1.02); }
}
.stk-header__spacer { flex: 1; }
.stk-header__tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Baris 1: identitas + pencarian + CTA */
.stk-header__top {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--h-top);
    padding: 12px 0;
    position: relative;
    z-index: 2;
}
/* Kabut putih tipis agar teks tetap tajam di atas motif */
.stk-brand, .stk-header__tools { position: relative; }
.stk-brand::before, .stk-header__tools::before {
    content: '';
    position: absolute;
    inset: -12px -22px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.94) 42%, rgba(255,255,255,0) 76%);
    z-index: -1;
}
.stk-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.stk-brand img { height: 56px; width: auto; }
.stk-brand__text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--maroon);
    line-height: 1.15;
    letter-spacing: -.01em;
}
.stk-brand__text span {
    display: block;
    font-size: .7rem;
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 3px;
}
.stk-header__search { flex-shrink: 0; }
.stk-header__search form {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 3px 3px 3px 16px;
    transition: border-color .18s var(--ease);
}
.stk-header__search form:focus-within { border-color: var(--maroon); background: var(--white); }
.stk-header__search input {
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: var(--step-0);
    color: var(--ink);
    width: 190px;
    padding: 6px 0;
}
.stk-header__search input::placeholder { color: var(--muted-2); }
.stk-header__search button {
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--maroon);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .18s var(--ease);
}
.stk-header__search button:hover { background: var(--maroon-dark); }

/* Tombol utama — satu-satunya penekanan di header */
.stk-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 20px 10px 12px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
    color: #fff;
    font-weight: 600;
    font-size: var(--step-0);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(140, 29, 44, .28);
    transition: all .22s var(--ease);
    position: relative;
    overflow: hidden;
}
.stk-header__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease);
}
.stk-header__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(140, 29, 44, .38); }
.stk-header__cta:hover::before { transform: translateX(120%); }
.stk-header__cta-ico {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.stk-header__cta-arrow { transition: transform .22s var(--ease); }
.stk-header__cta:hover .stk-header__cta-arrow { transform: translateX(4px); }

/* Baris 2: navigasi selebar halaman */
.stk-navbar {
    background: var(--maroon);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 10px rgba(77, 13, 23, .16);
}
.stk-navbar .stk-container { display: flex; align-items: center; justify-content: space-between; }
.stk-nav { display: flex; }
.stk-nav > ul { display: flex; align-items: stretch; flex-wrap: nowrap; }
.stk-nav > ul > li { position: relative; display: flex; }
.stk-nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    min-height: var(--h-nav);
    color: rgba(255,255,255,.95);
    font-size: 1.02rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: background .18s var(--ease);
}
.stk-nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: 15px; right: 15px; bottom: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
}
.stk-nav > ul > li > a:hover,
.stk-nav > ul > li.current-menu-item > a,
.stk-nav > ul > li.current-menu-ancestor > a { background: rgba(0,0,0,.14); color: #fff; }
.stk-nav > ul > li > a:hover::after,
.stk-nav > ul > li.current-menu-item > a::after,
.stk-nav > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.stk-nav > ul > li > a .stk-i { opacity: .75; transition: transform .2s var(--ease); }
.stk-nav > ul > li:hover > a .stk-i { transform: rotate(180deg); }

/* Dropdown — bergradasi lembut, tiap butir punya penanda warna */
.stk-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: linear-gradient(170deg, #ffffff 0%, #fdfaf5 55%, #fbf4ec 100%);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    border-top: 3px solid var(--gold);
    border-inline: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(23, 32, 46, .18);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 60;
    max-height: 78vh;
    overflow-y: auto;
}
/* HANYA level teratas (anak langsung .stk-nav > ul > li) yang digerbangi
   hover/opacity. Sebelumnya selector generik "li:hover > .sub-menu" ikut
   menyasar <li> level 3+ yang sengaja dibuat selalu visible (lihat aturan
   nested di bawah) -- akibatnya area itu tetap bisa di-hover walau panel
   induknya tertutup, menciptakan zona hover tak kasat mata yang meluas
   jauh ke bawah body dan membuat dropdown "muncul sendiri". */
.stk-nav > ul > li:hover > .sub-menu,
.stk-nav > ul > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Navbar bersifat sticky -- paksa tutup dropdown begitu halaman mulai
   digulir, supaya tidak "nyangkut" terbuka menutupi konten di bawahnya.
   KHUSUS DESKTOP (>900px) -- ini mekanisme untuk dropdown hover, kalau
   tidak dibatasi begini aturan !important-nya ikut menimpa accordion klik
   di seluler dan submenu jadi tidak pernah kelihatan walau class is-open
   sudah benar menyala. */
@media (min-width: 901px) {
    .stk-nav.is-scroll-lock > ul > li > .sub-menu { opacity: 0 !important; visibility: hidden !important; }
}

.stk-nav .sub-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--step-0);
    line-height: 1.4;
    color: var(--ink-2);
    border-radius: var(--r);
    position: relative;
    transition: background .16s var(--ease), color .16s var(--ease), padding-left .16s var(--ease);
}
/* Titik penanda — warnanya berputar sehingga tiap butir mudah dibedakan */
.stk-nav .sub-menu li a::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--c-blue);
    opacity: .55;
    transition: transform .16s var(--ease), opacity .16s var(--ease);
}
.stk-nav .sub-menu li:nth-child(8n+2) a::before { background: var(--c-teal); }
.stk-nav .sub-menu li:nth-child(8n+3) a::before { background: var(--c-violet); }
.stk-nav .sub-menu li:nth-child(8n+4) a::before { background: var(--c-amber); }
.stk-nav .sub-menu li:nth-child(8n+5) a::before { background: var(--c-rose); }
.stk-nav .sub-menu li:nth-child(8n+6) a::before { background: var(--c-green); }
.stk-nav .sub-menu li:nth-child(8n+7) a::before { background: var(--c-cyan); }
.stk-nav .sub-menu li:nth-child(8n+8) a::before { background: var(--c-plum); }

.stk-nav .sub-menu li a:hover {
    background: linear-gradient(90deg, var(--maroon-soft) 0%, rgba(253, 242, 243, .3) 100%);
    color: var(--maroon);
    padding-left: 18px;
}
.stk-nav .sub-menu li a:hover::before { transform: scale(1.5); opacity: 1; }

/* Garis pemisah halus antar butir di mega menu */
.stk-nav .sub-menu.is-mega li { border-bottom: 1px solid rgba(226, 230, 236, .6); }
.stk-nav .sub-menu.is-mega li:last-child { border-bottom: none; }

/* Mega menu — untuk submenu panjang (kelas ditambahkan oleh JS) */
.stk-nav .sub-menu.is-mega {
    column-count: 3;
    column-gap: 14px;
    width: min(920px, 94vw);
    padding: 16px;
}
.stk-nav .sub-menu.is-mega > li { break-inside: avoid; }
.stk-nav .sub-menu.is-mega.is-mega-2 { column-count: 2; width: min(640px, 92vw); }

/* Jaga agar dropdown tidak keluar layar */
.stk-nav > ul > li.is-flipped .sub-menu { left: auto; right: 0; }
.stk-nav > ul > li.is-centered .sub-menu { left: 50%; transform: translateX(-50%) translateY(6px); }
.stk-nav > ul > li.is-centered:hover .sub-menu { transform: translateX(-50%) translateY(0); }

/* Submenu tingkat 3+ (mis. Akademik > Prodi > VMTS) — tampil menjorok di
   dalam panel yang sama, bukan flyout terpisah yang bisa terpotong oleh
   overflow-y milik panel level 2. */
.stk-nav .sub-menu .sub-menu {
    position: static;
    /* opacity/visibility SENGAJA tidak diset visible di sini -- lihat
       aturan bersyarat di bawah. Tanpa syarat itu, level ini jadi bisa
       di-hover walau panel induknya tertutup (baris invisible yang
       meluas ke bawah body -- itulah bug "menu muncul sendiri"). */
    opacity: 0;
    visibility: hidden;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2px 0 2px 16px;
    margin: 0;
    min-width: 0;
    max-height: none;
    overflow: visible;
    z-index: auto;
}
/* Jarak sesudah sebuah blok bersarang ditutup diberikan HANYA sekali,
   lewat <li> pembukanya (bukan lewat padding/margin pada <ul> bersarang
   itu sendiri) -- supaya tidak menumpuk berkali-lipat saat nesting-nya
   dalam (mis. LPMI > Formulir Penjaminan Mutu > Formulir Tingkat Program
   Studi > Program Studi PPG, 4 level, dulu 4x8px+4px menumpuk jadi ~48px
   jarak kosong sebelum item berikutnya). */
.stk-nav .sub-menu li.menu-item-has-children { margin-bottom: 6px; }
.stk-nav .sub-menu li.menu-item-has-children:last-child { margin-bottom: 0; }
/* Level bersarang ikut tampil HANYA saat leluhur level teratasnya
   sedang di-hover/fokus -- jadi tidak pernah lepas dari gerbang panel
   induknya. */
.stk-nav > ul > li:hover .sub-menu .sub-menu,
.stk-nav > ul > li:focus-within .sub-menu .sub-menu {
    opacity: 1;
    visibility: visible;
}
.stk-nav .sub-menu .sub-menu li a { padding: 7px 12px; font-size: var(--step--1); }
.stk-nav .sub-menu .sub-menu li a::before { width: 5px; height: 5px; }

/* Item yang hanya berfungsi membuka submenu (href="#") — tampil sebagai
   judul bagian, bukan tautan yang bisa diklik. KHUSUS DESKTOP -- di
   seluler item ini justru bisa DIKETUK untuk expand/collapse (lihat
   aturan seluler terpisah di bawah), dan latarnya gelap (maroon) jadi
   warna maroon di sini akan nyaris tak terbaca kalau ikut dipakai. */
@media (min-width: 901px) {
    .stk-nav .sub-menu li.menu-item-has-children > a {
        font-weight: 700;
        color: var(--maroon);
        cursor: default;
    }
    .stk-nav .sub-menu li.menu-item-has-children > a:hover { background: transparent; padding-left: 14px; }
}
.stk-nav .sub-menu li.menu-item-has-children > a::before { display: none; }

/* Tombol menu seluler */
.stk-nav-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    padding: 0 4px;
    min-height: var(--h-nav);
}

/* =========================================================
   5. HERO — foto tampil apa adanya
   ========================================================= */
.stk-hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: #101722; }
.stk-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.stk-hero__slide.is-active { opacity: 1; }
.stk-hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Gradasi netral gelap — tidak mewarnai foto */
.stk-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(10, 15, 24, .88) 0%, rgba(10, 15, 24, .55) 34%, rgba(10, 15, 24, .12) 62%, rgba(10, 15, 24, 0) 100%),
        linear-gradient(to right, rgba(10, 15, 24, .55) 0%, rgba(10, 15, 24, .12) 55%, transparent 100%);
}

.stk-hero__body { position: relative; z-index: 3; width: 100%; padding: 64px 0 72px; }
.stk-hero__content { max-width: 680px; color: #fff; }

.stk-hero__accred {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(245, 179, 1, .16);
    border: 1px solid rgba(245, 179, 1, .5);
    color: #ffd66b;
    font-size: var(--step--1);
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 100px;
    margin-bottom: 22px;
    backdrop-filter: blur(6px);
}
.stk-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.15rem);
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
    letter-spacing: -.015em;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.stk-hero__motto { display: block; font-style: italic; color: var(--gold); }
.stk-hero__sub {
    font-size: var(--step-1);
    line-height: 1.65;
    color: rgba(255,255,255,.88);
    max-width: 54ch;
    margin: 18px 0 28px;
    text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.stk-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.stk-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 50%;
    color: #fff;
    backdrop-filter: blur(6px);
    transition: all .2s var(--ease);
}
.stk-hero__nav:hover { background: var(--gold); border-color: var(--gold); color: #3d2b00; }
.stk-hero__nav--prev { left: 22px; }
.stk-hero__nav--next { right: 22px; }

.stk-hero__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }
.stk-hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; padding: 0; transition: all .25s var(--ease); }
.stk-hero__dot.is-active { background: var(--gold); width: 28px; border-radius: 5px; }

/* =========================================================
   6. AUDIENCE STRIP
   ========================================================= */
.stk-audience { background: var(--white); border-bottom: 1px solid var(--border); }
.stk-audience__inner { display: grid; grid-template-columns: auto repeat(4, 1fr); align-items: stretch; }
.stk-audience__label {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 24px 18px 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.stk-audience__label .stk-i { color: var(--maroon); }
.stk-audience__item {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px;
    color: var(--ink-2);
    border-left: 1px solid var(--border);
    font-weight: 500;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.stk-audience__item:hover { background: var(--maroon-soft); color: var(--maroon); }
.stk-audience__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }

/* =========================================================
   7. STATISTIK
   ========================================================= */
.stk-stats { background: var(--bg); border-bottom: 1px solid var(--border); }
.stk-stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 0; }
.stk-stat { display: flex; align-items: center; gap: 12px; }
.stk-stat__icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.stk-stat__num {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stk-stat__label { font-size: var(--step--1); color: var(--muted); margin-top: 4px; }

/* =========================================================
   8. TICKER
   ========================================================= */
.stk-ticker { background: var(--gold-soft); border-bottom: 1px solid #f2e4c0; overflow: hidden; }
.stk-ticker__inner { display: flex; align-items: stretch; }
.stk-ticker__label {
    display: flex; align-items: center; gap: 9px;
    background: var(--maroon);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 11px 18px;
    white-space: nowrap;
    flex-shrink: 0;
}
.stk-ticker__label .stk-i { color: var(--gold); }
.stk-ticker__viewport {
    flex: 1; overflow: hidden; padding: 11px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.stk-ticker__track { display: flex; gap: 46px; white-space: nowrap; width: max-content; animation: tickerRun 20s linear infinite; }
.stk-ticker:hover .stk-ticker__track { animation-play-state: paused; }
.stk-ticker__item { display: inline-flex; align-items: center; gap: 10px; font-size: var(--step-0); font-weight: 500; color: #6b4a00; }
.stk-ticker__item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark); flex-shrink: 0; }
@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   9. SAMBUTAN
   ========================================================= */
.stk-welcome__grid { display: grid; grid-template-columns: 330px 1fr; gap: 38px; align-items: center; }
.stk-welcome__figure { position: relative; }
.stk-welcome__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.stk-welcome__figure::before {
    content: ''; position: absolute;
    left: -16px; bottom: -16px;
    width: 58%; height: 58%;
    border: 3px solid var(--gold);
    border-radius: var(--r-lg);
    z-index: -1;
}
.stk-welcome__quote {
    position: absolute; top: 20px; left: -20px;
    width: 54px; height: 54px;
    background: var(--gold); color: #3d2b00;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: var(--sh-2);
}
.stk-welcome__body h2 { font-size: var(--step-4); margin-bottom: 16px; }
.stk-welcome__body p { font-size: var(--step-1); line-height: 1.7; color: var(--ink-2); margin-bottom: 12px; }
.stk-welcome__body p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.3rem;
    line-height: .84;
    font-weight: 700;
    color: var(--maroon);
    padding: 6px 12px 0 0;
}
.stk-welcome__sign { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.stk-welcome__sign strong { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.stk-welcome__sign span { font-size: var(--step--1); color: var(--muted); }

.stk-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.stk-value { display: flex; gap: 13px; align-items: flex-start; }
.stk-value__icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.stk-value strong { display: block; font-family: var(--font-display); font-size: var(--step-0); color: var(--ink); margin-bottom: 2px; }
.stk-value p { font-size: var(--step--1); color: var(--muted); line-height: 1.5; margin: 0; }

/* =========================================================
   10. LAYANAN CEPAT
   ========================================================= */
.stk-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.stk-service {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--ink);
    transition: all .2s var(--ease);
}
.stk-service:hover { border-color: var(--maroon); box-shadow: var(--sh-2); transform: translateY(-3px); color: var(--maroon); }
.stk-service__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; transition: transform .2s var(--ease); }
.stk-service:hover .stk-service__icon { transform: scale(1.08); }
.stk-service__label { font-size: var(--step-0); font-weight: 600; line-height: 1.3; }
.stk-service__meta { display: block; font-size: var(--step--1); font-weight: 400; color: var(--muted); margin-top: 2px; }

/* =========================================================
   11. PROGRAM STUDI — 3 kolom
   ========================================================= */
.stk-prodi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stk-prodi-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 22px 20px;
    transition: all .22s var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.stk-prodi-card::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 4px;
    background: linear-gradient(90deg, var(--maroon), var(--gold));
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
}
.stk-prodi-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.stk-prodi-card:hover::after { transform: scaleX(1); }
.stk-prodi-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.stk-prodi-card__icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; }
.stk-prodi-card__jenjang {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    color: var(--maroon); background: var(--maroon-soft);
    border: 1px solid #f6dfe2;
    padding: 5px 12px; border-radius: 100px;
}
.stk-prodi-card__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--ink); line-height: 1.28; margin-bottom: 10px; }
.stk-prodi-card__desc { font-size: var(--step-0); color: var(--muted); line-height: 1.55; margin-bottom: 14px; flex: 1; }
.stk-prodi-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--border-soft); }
.stk-prodi-card__akred { display: inline-flex; align-items: center; gap: 7px; font-size: var(--step--1); font-weight: 600; color: var(--c-green); }
.stk-prodi-card__more { font-size: var(--step--1); font-weight: 600; color: var(--maroon); display: inline-flex; align-items: center; gap: 5px; }

/* =========================================================
   12. BERITA
   ========================================================= */
.stk-news { display: grid; grid-template-columns: 1fr 340px; gap: 38px; align-items: start; }

.stk-news-lead {
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    margin-bottom: 20px;
    transition: all .22s var(--ease);
}
.stk-news-lead:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.stk-news-lead__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.stk-news-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.stk-news-lead:hover .stk-news-lead__media img { transform: scale(1.04); }
.stk-news-lead__body { padding: 22px 24px 24px; }

.stk-cat {
    display: inline-block;
    background: var(--maroon);
    color: #fff;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    padding: 4px 11px; border-radius: 4px;
    margin-bottom: 11px;
}
.stk-news-lead__title { font-size: var(--step-2); line-height: 1.3; margin-bottom: 9px; transition: color .18s var(--ease); }
.stk-news-lead:hover .stk-news-lead__title { color: var(--maroon); }
.stk-news-lead__excerpt { font-size: var(--step-0); color: var(--muted); line-height: 1.62; margin-bottom: 13px; }

.stk-meta { display: flex; gap: 16px; font-size: var(--step--1); color: var(--muted); flex-wrap: wrap; }
.stk-meta span { display: inline-flex; align-items: center; gap: 6px; }
.stk-meta .stk-i { color: var(--maroon); opacity: .65; }

.stk-news-list { display: flex; flex-direction: column; gap: 13px; }
.stk-news-item {
    display: grid; grid-template-columns: 130px 1fr; gap: 16px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    transition: all .2s var(--ease);
}
.stk-news-item:hover { box-shadow: var(--sh-2); transform: translateX(4px); }
.stk-news-item__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.stk-news-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.stk-news-item:hover .stk-news-item__media img { transform: scale(1.06); }
.stk-news-item__body { padding: 13px 16px 13px 0; display: flex; flex-direction: column; justify-content: center; }
.stk-news-item__cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--maroon); margin-bottom: 5px; }
.stk-news-item__title {
    font-family: var(--font-display);
    font-size: var(--step-0); font-weight: 700;
    color: var(--ink); line-height: 1.35; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stk-news-item:hover .stk-news-item__title { color: var(--maroon); }

/* Sidebar */
.stk-side { display: flex; flex-direction: column; gap: 20px; }
.stk-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.stk-box__head {
    display: flex; align-items: center; gap: 10px;
    background: var(--white);
    border-bottom: 2px solid var(--gold);
    color: var(--ink);
    padding: 15px 18px;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
}
.stk-box__head .stk-i { color: var(--maroon); }
.stk-box__body { padding: 15px 18px 18px; }

.stk-agenda { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.stk-agenda:first-child { padding-top: 0; }
.stk-agenda:last-child { border-bottom: none; padding-bottom: 0; }
.stk-agenda__date { background: var(--maroon); color: #fff; text-align: center; padding: 8px 10px; border-radius: var(--r); min-width: 50px; flex-shrink: 0; }
.stk-agenda__date strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stk-agenda__date span { display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--gold); margin-top: 3px; }
.stk-agenda__title { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; color: var(--ink); line-height: 1.34; margin-bottom: 3px; }
.stk-agenda__loc { font-size: var(--step--1); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.stk-agenda__loc .stk-i { color: var(--muted-2); }

.stk-annc { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.stk-annc:first-child { padding-top: 0; }
.stk-annc:last-child { border-bottom: none; padding-bottom: 0; }
.stk-annc__title { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 4px; display: block; }
.stk-annc:hover .stk-annc__title { color: var(--maroon); }
.stk-annc__date { font-size: var(--step--1); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.stk-annc__date .stk-i { color: var(--muted-2); }

.stk-box__link {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 15px; padding: 10px;
    font-size: var(--step--1); font-weight: 600;
    color: var(--maroon);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    transition: all .18s var(--ease);
}
.stk-box__link:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.stk-pmb {
    background: linear-gradient(155deg, var(--maroon) 0%, var(--maroon-deep) 100%);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.stk-pmb::before {
    content: ''; position: absolute; top: -40%; right: -30%;
    width: 230px; height: 230px;
    background: radial-gradient(circle, rgba(245,179,1,.24), transparent 68%);
    border-radius: 50%;
}
.stk-pmb__icon {
    width: 58px; height: 58px; margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(245,179,1,.18);
    border: 1.5px solid rgba(245,179,1,.5);
    color: var(--gold);
    display: grid; place-items: center;
    position: relative;
}
.stk-pmb h4 { color: #fff; font-size: var(--step-2); margin-bottom: 8px; position: relative; }
.stk-pmb p { font-size: var(--step-0); color: rgba(255,255,255,.78); line-height: 1.6; margin-bottom: 18px; position: relative; }
.stk-pmb .stk-btn { width: 100%; position: relative; }

/* =========================================================
   13. PORTAL — satu-satunya penekanan besar di halaman
   ========================================================= */
.stk-portal-feature {
    background: linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 55%, #a32637 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.stk-portal-feature::after {
    content: '';
    position: absolute;
    top: -25%; right: -8%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(245, 179, 1, .18), transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}
.stk-portal-feature__motif {
    position: absolute;
    inset: 0;
    background-image: var(--motif-gold);
    background-repeat: repeat;
    opacity: .15;
    pointer-events: none;
}

.stk-portal-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.stk-portal-feature h2 { color: #fff; font-size: var(--step-4); margin-bottom: 14px; }
.stk-portal-feature .stk-shead__eyebrow { color: var(--gold); }
.stk-portal-feature .stk-shead__eyebrow::before { background: var(--gold); }
.stk-portal-feature__lead { font-size: var(--step-1); color: rgba(255,255,255,.85); line-height: 1.65; margin-bottom: 20px; }
.stk-portal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 24px; }
.stk-portal-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: var(--step-0); color: rgba(255,255,255,.9);
}
.stk-portal-list .stk-i { color: var(--gold); }
.stk-portal-feature__figure img {
    width: 100%;
    border-radius: var(--r-lg);
    box-shadow: 0 22px 54px rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.16);
    transition: transform .4s var(--ease);
}
.stk-portal-feature__figure:hover img { transform: translateY(-6px) scale(1.01); }

.stk-btn--lg { padding: 15px 30px; font-size: var(--step-1); }

/* =========================================================
   14. GALERI
   ========================================================= */
.stk-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; gap: 14px; }
.stk-gallery__item { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-alt); }
.stk-gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.stk-gallery__item:nth-child(4) { grid-column: span 2; }
.stk-gallery__item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.stk-gallery__item:nth-child(8) { grid-column: span 2; }
.stk-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.stk-gallery__item:hover img { transform: scale(1.06); }
.stk-gallery__cap {
    position: absolute; inset: auto 0 0 0;
    padding: 28px 15px 13px;
    background: linear-gradient(to top, rgba(10,15,24,.85), transparent);
    color: #fff; font-size: var(--step--1); font-weight: 600;
    opacity: 0; transform: translateY(8px);
    transition: all .25s var(--ease);
}
.stk-gallery__item:hover .stk-gallery__cap { opacity: 1; transform: translateY(0); }
/* Di layar sentuh tidak ada hover permanen -- kalau dibiarkan, teks
   keterangan foto ini tidak akan pernah terlihat sama sekali. Tampilkan
   selalu untuk perangkat tanpa kapabilitas hover asli. */
@media (hover: none) {
    .stk-gallery__cap { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   15. BADGE AKREDITASI PRODI
   ========================================================= */
.stk-prodi-card__akred {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px;
    border-radius: var(--r);
    background: var(--bg);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}
.stk-prodi-card__akred.is-unggul { background: var(--gold-soft); border-color: #f2e4c0; }
.stk-prodi-card__peringkat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--c-green);
}
.stk-prodi-card__akred.is-unggul .stk-prodi-card__peringkat { color: #8a6100; }
.stk-prodi-card__sk { font-size: var(--step--1); color: var(--muted); line-height: 1.45; }

/* =========================================================
   16. TOMBOL KEMBALI KE ATAS
   ========================================================= */
.stk-totop {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--maroon);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(140, 29, 44, .34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .26s var(--ease);
    z-index: 800;
}
.stk-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.stk-totop:hover { background: var(--maroon-dark); transform: translateY(-3px); }

/* =========================================================
   17. FOOTER
   ========================================================= */
.stk-footer { background: #1b2330; color: rgba(255,255,255,.68); padding-top: 0; position: relative; }
.stk-footer__motif {
    height: 46px;
    border-top: 3px solid var(--gold);
    background-color: #141b26;
    background-image: var(--motif-gold);
    background-repeat: repeat;
    margin-bottom: 46px;
}
.stk-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 42px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.09); }
.stk-footer__brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; }
.stk-footer__brand-row img { height: 60px; width: auto; }
.stk-footer__brand-row strong { font-family: var(--font-display); font-size: var(--step-1); color: #fff; display: block; line-height: 1.2; }
.stk-footer__brand-row span { font-size: .72rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; }
.stk-footer__about { font-size: var(--step-0); line-height: 1.7; color: rgba(255,255,255,.56); margin-bottom: 20px; }
.stk-footer__social { display: flex; gap: 10px; }
.stk-footer__social a {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.72);
    display: grid; place-items: center;
    transition: all .2s var(--ease);
}
.stk-footer__social a:hover { background: var(--gold); border-color: var(--gold); color: #3d2b00; transform: translateY(-3px); }

.stk-footer__col h4 { font-size: var(--step-0); color: #fff; margin-bottom: 17px; padding-bottom: 9px; border-bottom: 2px solid var(--gold); display: inline-block; }
.stk-footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.stk-footer__col ul a { display: inline-flex; align-items: center; gap: 7px; font-size: var(--step-0); color: rgba(255,255,255,.58); }
.stk-footer__col ul a .stk-i { color: var(--gold); opacity: .7; }
.stk-footer__col ul a:hover { color: var(--gold); }

.stk-footer__contact { display: flex; flex-direction: column; gap: 13px; }
.stk-footer__contact-item { display: flex; gap: 11px; font-size: var(--step-0); color: rgba(255,255,255,.58); line-height: 1.55; }
.stk-footer__contact-item .stk-i { color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.stk-footer__contact-item a { color: rgba(255,255,255,.58); }
.stk-footer__contact-item a:hover { color: var(--gold); }

.stk-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: var(--step--1); color: rgba(255,255,255,.36); flex-wrap: wrap; }
.stk-footer__bottom a { color: rgba(255,255,255,.5); }
.stk-footer__bottom a:hover { color: var(--gold); }

/* =========================================================
   17. HALAMAN DALAM
   ========================================================= */
.stk-pagehead { background: linear-gradient(120deg, var(--maroon-deep), var(--maroon)); color: #fff; padding: 40px 0 34px; position: relative; overflow: hidden; }
.stk-pagehead::before {
    content: ''; position: absolute; top: -55%; right: -6%;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(245,179,1,.16), transparent 70%);
    border-radius: 50%;
}
.stk-pagehead h1 { color: #fff; font-size: var(--step-4); position: relative; }
.stk-pagehead p { color: rgba(255,255,255,.75); margin-top: 9px; font-size: var(--step-1); position: relative; }

.stk-crumb { font-size: var(--step--1); margin-bottom: 13px; position: relative; }
.stk-crumb ol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stk-crumb a { color: rgba(255,255,255,.7); }
.stk-crumb a:hover { color: var(--gold); }
.stk-crumb li:last-child { color: var(--gold); }
.stk-crumb .sep { color: rgba(255,255,255,.3); display: inline-flex; }

.stk-main { padding: 48px 0 68px; background: var(--bg); }
.stk-layout { display: grid; grid-template-columns: 1fr 320px; gap: 38px; align-items: start; }

.stk-article { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.stk-article__head { padding: 30px 36px 0; }
.stk-article__title { font-size: var(--step-3); line-height: 1.26; margin-bottom: 16px; }

.stk-byline { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.stk-byline__avatar { flex-shrink: 0; }
.stk-byline__avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--border); }
.stk-byline__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stk-byline__name {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--maroon);
}
.stk-byline__name:hover { color: var(--maroon-dark); }
.stk-byline__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; flex-shrink: 0;
    background: var(--maroon); color: #fff; border-radius: 50%;
}
.stk-byline__badge .stk-i { width: 11px; height: 11px; stroke-width: 3; }
.stk-byline__role { font-size: var(--step--2); color: var(--muted); }

.stk-article__meta { display: flex; gap: 18px; font-size: var(--step--1); color: var(--muted); flex-wrap: wrap; }
.stk-article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.stk-article__meta .stk-i { color: var(--maroon); opacity: .65; }
.stk-article__thumb { width: 100%; max-height: 430px; object-fit: cover; margin-top: 22px; display: block; }
.stk-article__thumb-wrap { position: relative; }
.stk-article__thumb-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px 20px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 55%, rgba(0,0,0,0));
    color: #fff; font-size: var(--step--1); line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

.stk-content { padding: 26px 36px 34px; font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
.stk-content > *:first-child { margin-top: 0; }
.stk-content h2 { font-size: var(--step-2); margin: 32px 0 13px; }
.stk-content h3 { font-size: var(--step-1); margin: 26px 0 11px; }
.stk-content p { margin-bottom: 17px; }
/* Banyak artikel ditulis dengan <br> tunggal sebagai pemisah paragraf
   (hasil copy-paste dari Word/Google Docs), bukan tag <p> terpisah --
   tanpa ini, margin-bottom di atas tidak pernah kena dan paragraf
   terlihat rapat menyatu. */
.stk-content br { display: block; content: ""; margin-bottom: 14px; }
.stk-content ul, .stk-content ol { margin: 0 0 17px 22px; }
.stk-content ul li { list-style: disc; margin-bottom: 7px; }
.stk-content ol li { list-style: decimal; margin-bottom: 7px; }
.stk-content img { border-radius: var(--r); margin: 18px 0; }

/* FAQ / akordeon (native <details>/<summary>) */
.stk-content details.stk-faq {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin: 10px 0;
    padding: 0;
    overflow: hidden;
}
.stk-content summary.stk-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: background .15s var(--ease);
}
.stk-content summary.stk-faq__q::-webkit-details-marker { display: none; }
.stk-content summary.stk-faq__q::after {
    content: '+';
    margin-left: auto;
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--maroon-soft);
    color: var(--maroon);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    transition: transform .2s var(--ease);
}
.stk-content details.stk-faq[open] summary.stk-faq__q::after { transform: rotate(45deg); }
.stk-content summary.stk-faq__q:hover { background: var(--bg); }
.stk-content details.stk-faq p.stk-faq__a {
    margin: 0;
    padding: 0 18px 16px;
    color: var(--ink-2);
}
.stk-content a { text-decoration: underline; text-underline-offset: 3px; }
.stk-content blockquote {
    border-left: 4px solid var(--gold);
    background: var(--gold-soft);
    padding: 14px 20px; margin: 22px 0;
    border-radius: 0 var(--r) var(--r) 0;
    font-family: var(--font-display); color: var(--ink);
    font-size: .8em; line-height: 1.4;
}
.stk-content blockquote p { margin-bottom: 8px; }
.stk-content blockquote p:last-child { margin-bottom: 0; }
.stk-content blockquote cite { display: block; margin-top: 8px; font-size: var(--step--1); font-style: normal; color: var(--muted); }
.stk-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: var(--step-0); }
.stk-content th { background: var(--maroon); color: #fff; text-align: left; padding: 11px 14px; font-weight: 600; }
.stk-content td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.stk-content tr:nth-child(even) td { background: var(--bg); }
.stk-table-scroll { overflow-x: auto; }

.stk-actionbar { padding: 16px 36px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.stk-actionbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stk-actionbar__sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.stk-actionbar__views { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--muted); }
.stk-actionbar__views .stk-i { color: var(--maroon); opacity: .65; }

.stk-like, .stk-share__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; flex-shrink: 0;
    border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
    color: var(--ink-2); cursor: pointer; font-family: inherit;
    transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.stk-like { width: auto; padding: 0 13px; gap: 6px; }
.stk-like__count { font-size: var(--step--1); font-weight: 700; }
.stk-like:hover, .stk-share__btn:hover { transform: translateY(-1px); }
.stk-like:active, .stk-share__btn:active { transform: scale(.94); }
.stk-like:hover { border-color: #e11d48; color: #e11d48; }
.stk-like.is-liked { background: #fff0f3; border-color: #e11d48; color: #e11d48; }
.stk-like.is-liked .stk-i { fill: currentColor; }

.stk-share__btn--whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.stk-share__btn--facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.stk-share__btn--twitter:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.stk-share__btn--telegram:hover { background: #26a5e4; border-color: #26a5e4; color: #fff; }
.stk-share__btn--copy:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.stk-share__btn--copy.is-copied { background: #15803d; border-color: #15803d; color: #fff; }
.stk-share__btn--copy .stk-icon-success { display: none; }
.stk-share__btn--copy.is-copied .stk-icon-default { display: none; }
.stk-share__btn--copy.is-copied .stk-icon-success { display: block; }

.stk-tags { padding: 17px 36px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stk-tags__label { font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.stk-tags a { font-size: var(--step--1); background: var(--bg); border: 1px solid var(--border); color: var(--ink-2); padding: 4px 12px; border-radius: 100px; }
.stk-tags a:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.stk-related { margin-top: 24px; }
.stk-related__head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-size: var(--step-1);
    color: var(--ink); margin-bottom: 14px;
}
.stk-related__head .stk-i { color: var(--maroon); }
.stk-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stk-related__item {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    transition: all .2s var(--ease);
}
.stk-related__item:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.stk-related__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.stk-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.stk-related__item:hover .stk-related__media img { transform: scale(1.06); }
.stk-related__body { padding: 14px 16px; }
.stk-related__title {
    font-family: var(--font-display);
    font-size: var(--step-0); font-weight: 700;
    color: var(--ink); line-height: 1.35; margin: 6px 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stk-related__item:hover .stk-related__title { color: var(--maroon); }
@media (max-width: 700px) {
    .stk-related__grid { grid-template-columns: 1fr; }
}

.stk-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; }
.stk-postnav a { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 18px; transition: all .2s var(--ease); }
.stk-postnav a:hover { border-color: var(--maroon); box-shadow: var(--sh-2); }
.stk-postnav__dir { font-size: var(--step--1); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.stk-postnav__title { font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; color: var(--ink); line-height: 1.35; }
.stk-postnav a.is-next { text-align: right; }
.stk-postnav a.is-next .stk-postnav__dir { flex-direction: row-reverse; }

.stk-archive { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.stk-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: all .22s var(--ease); }
.stk-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.stk-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.stk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.stk-card:hover .stk-card__media img { transform: scale(1.05); }
.stk-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.stk-card__title { font-size: var(--step-1); line-height: 1.34; margin-bottom: 9px; }
.stk-card:hover .stk-card__title { color: var(--maroon); }
.stk-card__excerpt { font-size: var(--step-0); color: var(--muted); line-height: 1.6; margin-bottom: 13px; flex: 1; }

.stk-pagination { display: flex; justify-content: center; margin-top: 32px; }
.stk-pagination .nav-links { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.stk-pagination .page-numbers {
    min-width: 40px; height: 40px; padding: 0 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--r); font-size: var(--step-0); font-weight: 600;
    color: var(--ink-2); transition: all .18s var(--ease);
}
.stk-pagination .page-numbers:hover { border-color: var(--maroon); color: var(--maroon); }
.stk-pagination .page-numbers.current { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.stk-searchform { display: flex; gap: 8px; }
.stk-searchform input[type="search"] {
    flex: 1; min-width: 0; padding: 11px 15px;
    font: inherit; font-size: var(--step-0);
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--white); color: var(--ink);
}
.stk-searchform input[type="search"]:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(140, 29, 44, .1); }
.stk-searchform button { padding: 11px 16px; background: var(--maroon); border: none; border-radius: var(--r); color: #fff; display: grid; place-items: center; }
.stk-searchform button:hover { background: var(--maroon-dark); }

.stk-empty { text-align: center; padding: 60px 24px; }
.stk-empty__icon { width: 82px; height: 82px; margin: 0 auto 18px; border-radius: 50%; background: var(--maroon-soft); color: var(--maroon); display: grid; place-items: center; }
.stk-empty h2 { font-size: var(--step-2); margin-bottom: 9px; }
.stk-empty p { color: var(--muted); max-width: 44ch; margin: 0 auto 20px; }

.stk-box__body ul li { padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--step-0); }
.stk-box__body ul li:last-child { border-bottom: none; }
.stk-box__body ul li a { color: var(--ink-2); }
.stk-box__body ul li a:hover { color: var(--maroon); }

/* WP core */
.aligncenter { display: block; margin: 20px auto; }
.alignleft { float: left; margin: 8px 24px 12px 0; max-width: 45%; }
.alignright { float: right; margin: 8px 0 12px 24px; max-width: 45%; }
.wp-caption { max-width: 100%; }
@media (max-width: 640px) {
    .alignleft, .alignright { float: none; max-width: 100%; margin: 16px 0; }
}

/* Palet warna & ukuran teks editor Gutenberg (add_theme_support di functions.php) --
   WordPress hanya menghasilkan class has-*-color, bukan inline style, jadi tema
   WAJIB sediakan CSS pencocoknya sendiri di sini. */
.has-maroon-color { color: #8c1d2c; }
.has-gold-color { color: #c98f00; }
.has-ink-color { color: #17202e; }
.has-muted-color { color: #6b7688; }
.has-blue-color { color: #2563eb; }
.has-teal-color { color: #0e9488; }
.has-white-color { color: #ffffff; }
.has-maroon-background-color { background-color: #8c1d2c; }
.has-gold-background-color { background-color: #c98f00; }
.has-ink-background-color { background-color: #17202e; }
.has-muted-background-color { background-color: #6b7688; }
.has-blue-background-color { background-color: #2563eb; }
.has-teal-background-color { background-color: #0e9488; }
.has-white-background-color { background-color: #ffffff; }
.has-background { padding: 14px 18px; border-radius: var(--r); }
.has-small-font-size { font-size: 14px; }
.has-normal-font-size { font-size: 16px; }
.has-medium-font-size { font-size: 18px; }
.has-large-font-size { font-size: 22px; }
.has-x-large-font-size { font-size: 28px; }
.wp-caption-text { font-size: var(--step--1); color: var(--muted); text-align: center; margin-top: 7px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 9999; background: var(--gold); color: #3d2b00; padding: 10px 18px; border-radius: var(--r); font-weight: 700; }
.skip-link:focus { left: 8px; }

.stk-center { text-align: center; }
.stk-mt { margin-top: 34px; }

/* =========================================================
   18. RESPONSIVE
   ========================================================= */
/* Laptop 16" dan sejenisnya */
@media (max-width: 1400px) {
    .stk-header__bird { height: 88%; opacity: .66; }
    .stk-header__search input { width: 150px; }
}

@media (max-width: 1240px) {
    .stk-nav > ul > li > a { padding: 0 14px; font-size: .96rem; }
    .stk-header__bird { height: 82%; opacity: .6; }
    .stk-header__search input { width: 120px; }
    .stk-header__cta { padding: 9px 16px 9px 10px; }
    .stk-header__cta-ico { width: 30px; height: 30px; }
}

@media (max-width: 1120px) {
    .stk-nav > ul > li > a { padding: 0 11px; font-size: .9rem; }
    .stk-header__bird { display: none; }
    .stk-header__spacer, .stk-header__top > .stk-header__tools { margin-left: auto; }
    .stk-welcome__grid { grid-template-columns: 330px 1fr; gap: 34px; }
    .stk-news { grid-template-columns: 1fr 300px; gap: 28px; }
    .stk-services { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */
@media (max-width: 1024px) {
    .stk-header__search { display: none; }
    .stk-services { grid-template-columns: repeat(2, 1fr); }
    .stk-prodi { grid-template-columns: repeat(2, 1fr); }
    .stk-prodi-card:last-child { grid-column: 1 / -1; max-width: 520px; margin-inline: auto; }
    .stk-portal-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .stk-section { padding: 52px 0; }
    .stk-topbar__group:first-child .stk-topbar__item:not(:first-child) { display: none; }

    .stk-header__top { min-height: 62px; padding: 10px 0; gap: 12px; }
    .stk-brand img { height: 46px; }
    .stk-brand__text strong { font-size: 1.02rem; }
    .stk-header__tools { margin-left: auto; }
    /* CTA tetap tampil di tablet/HP — hanya teksnya diringkas */
    .stk-header__cta { padding: 8px 14px 8px 8px; gap: 8px; }
    .stk-header__cta-ico { width: 30px; height: 30px; }
    .stk-header__cta-arrow { display: none; }
    .stk-prodi { grid-template-columns: 1fr; }
    .stk-prodi-card:last-child { max-width: none; }

    .stk-nav-toggle { display: flex; }
    .stk-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(350px, 88vw);
        background: var(--maroon-dark);
        flex-direction: column;
        padding: 74px 0 30px;
        transform: translateX(100%);
        transition: transform .28s var(--ease);
        overflow-y: auto;
        z-index: 950;
        box-shadow: -10px 0 40px rgba(0,0,0,.3);
    }
    .stk-nav.is-open { transform: translateX(0); }
    .stk-nav > ul { flex-direction: column; align-items: stretch; width: 100%; }
    .stk-nav > ul > li { display: block; }
    .stk-nav > ul > li > a { padding: 13px 22px; min-height: 0; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
    .stk-nav > ul > li > a:active,
    .stk-nav .sub-menu li a:active { background: rgba(255,255,255,.12); }
    .stk-nav > ul > li > a::after { display: none; }
    .stk-nav .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        background: rgba(0,0,0,.2); border-radius: 0; border-top: none;
        box-shadow: none; padding: 0; display: none; max-height: none;
        column-count: 1 !important; width: auto !important;
    }
    .stk-nav .sub-menu.is-open { display: block; }
    .stk-nav .sub-menu li a { color: rgba(255,255,255,.8); padding: 10px 22px 10px 36px; border-radius: 0; }
    .stk-nav .sub-menu li a:hover { background: rgba(255,255,255,.08); color: var(--gold); }
    /* Judul sub-kategori (mis. "Program Studi ...") yang berfungsi jadi
       tombol expand/collapse -- oranye saat tertutup (kontras jelas di
       latar maroon gelap), berubah emas begitu kelompoknya dibuka. */
    .stk-nav .sub-menu li.menu-item-has-children > a { color: #ff9800; font-weight: 700; }
    .stk-nav .sub-menu li.menu-item-has-children.is-expanded > a { color: var(--gold); }
    /* Aturan desktop ".sub-menu .sub-menu" (flyout level 3+) punya
       margin-bottom+padding-bottom sendiri yang IKUT TERPAKAI di sini
       karena spesifisitasnya lebih tinggi dari reset umum di atas.
       Pada accordion seluler, tiap level bersarang menumpuk nilai itu
       (4px+8px per level) sehingga makin dalam nesting-nya makin lebar
       jarak kosongnya. Nolkan supaya tidak menumpuk; indentasi kiri
       tetap dipertahankan lewat padding-left tiap tautan (baris atas). */
    .stk-nav .sub-menu .sub-menu { padding: 0; margin: 0; }

    /* z-index HARUS di bawah .stk-navbar (900) -- .stk-nav yang berisi
       panel menu seluler adalah anak dari .stk-navbar yang punya
       position:sticky+z-index sendiri, jadi ia membentuk "ruang stacking"
       terpisah. z-index 950 pada .stk-nav cuma berlaku LOKAL di dalam
       ruang itu (efektifnya tetap 900 di tingkat akar) -- kalau backdrop
       diberi angka lebih tinggi dari 900 seperti sebelumnya, ia akan
       menang tampil PALING ATAS walau terlihat di bawah menu secara
       visual, sehingga ketukan pada isi menu (mis. "Profil") malah kena
       backdrop dan menutup menu alih-alih membuka submenu-nya. */
    .stk-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: all .28s var(--ease); z-index: 890; }
    .stk-nav-backdrop.is-open { opacity: 1; visibility: visible; }

    .stk-hero { min-height: 480px; }
    .stk-hero__body { padding: 52px 0 62px; }
    .stk-hero__nav { display: none; }

    .stk-audience__inner { grid-template-columns: repeat(2, 1fr); }
    .stk-audience__label { grid-column: 1 / -1; padding: 15px 0 10px; justify-content: center; }
    .stk-audience__item { justify-content: center; border-top: 1px solid var(--border); }
    .stk-audience__item:nth-child(2), .stk-audience__item:nth-child(4) { border-left: none; }

    .stk-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .stk-welcome__grid { grid-template-columns: 1fr; gap: 36px; }
    .stk-welcome__figure { max-width: 380px; }
    .stk-values { grid-template-columns: 1fr; gap: 15px; }
    .stk-portal-feature__grid { grid-template-columns: 1fr; gap: 32px; }
    .stk-prodi { grid-template-columns: 1fr; }
    .stk-news { grid-template-columns: 1fr; }
    .stk-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .stk-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 165px; }
    .stk-gallery__item:nth-child(1), .stk-gallery__item:nth-child(4),
    .stk-gallery__item:nth-child(5), .stk-gallery__item:nth-child(8) { grid-column: span 2; }
    .stk-layout { grid-template-columns: 1fr; }
    .stk-archive { grid-template-columns: 1fr; }
    .stk-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .stk-portal-bar__dev { display: none; }
}

/* Ponsel */
@media (max-width: 620px) {
    /* Skala tetap terbaca — tidak turun di bawah 14px */
    :root { --step-4: 1.75rem; --step-3: 1.4rem; --step-2: 1.2rem; --step-1: 1.0625rem; }

    .stk-topbar { display: none; }
    .stk-brand__text span { display: none; }
    .stk-brand img { height: 42px; }
    .stk-brand__text strong { font-size: .98rem; }
    /* Di layar sempit tombol jadi ikon saja */
    .stk-header__cta-txt { display: none; }
    .stk-header__cta { padding: 6px; border-radius: 50%; }
    .stk-header__cta-ico { width: 36px; height: 36px; background: transparent; }
    .stk-totop { right: 14px; bottom: 14px; width: 42px; height: 42px; }

    .stk-hero { min-height: 430px; }
    .stk-hero__sub { font-size: var(--step-0); }
    .stk-hero__actions .stk-btn { flex: 1; }

    .stk-services { grid-template-columns: 1fr; }
    .stk-news-item { grid-template-columns: 104px 1fr; gap: 12px; }
    .stk-news-item__body { padding: 11px 12px 11px 0; }
    .stk-side { grid-template-columns: 1fr; }
    .stk-portal-list { grid-template-columns: 1fr; }
    .stk-portal-bar__inner { flex-direction: column; align-items: flex-start; gap: 15px; }
    .stk-portal-bar__link { flex-direction: column; align-items: flex-start; width: 100%; }
    .stk-portal-bar__sub { display: none; }
    .stk-gallery { grid-template-columns: 1fr; grid-auto-rows: 195px; }
    .stk-gallery__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
    .stk-article__head { padding: 24px 20px 0; }
    .stk-content { padding: 22px 20px 28px; font-size: var(--step-0); }
    .stk-tags { padding: 16px 20px; }

    /* Byline: baris meta (tanggal/waktu baca) turun ke bawah nama di layar
       sempit -- gap 18px yang cocok untuk 1 baris horizontal jadi terasa
       longgar saat item-nya numpuk vertikal, jadi dirapatkan khusus di sini. */
    .stk-byline { gap: 10px; padding-bottom: 16px; }
    .stk-byline__info { gap: 3px; }
    .stk-article__meta { gap: 3px 12px; }

    /* Action bar: ciutkan tombol supaya suka + share + salin-link + jumlah
       pelihat muat dalam 1 baris, bukan 3. */
    .stk-actionbar { padding: 14px 20px; gap: 6px; flex-wrap: nowrap; }
    .stk-actionbar__group { gap: 4px; flex-wrap: nowrap; }
    .stk-actionbar__sep { height: 18px; }
    .stk-actionbar__views { font-size: var(--step--2); gap: 4px; flex-shrink: 0; }
    .stk-like, .stk-share__btn { width: 32px; height: 32px; }
    .stk-like { width: auto; padding: 0 8px; gap: 4px; }
    .stk-like__count { font-size: var(--step--2); }
    .stk-like .stk-i, .stk-share__btn .stk-i, .stk-actionbar__views .stk-i { width: 15px; height: 15px; }
    .stk-postnav { grid-template-columns: 1fr; }
    .stk-footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .stk-footer__bottom { flex-direction: column; text-align: center; gap: 10px; }
}

/* =========================================================
   19. KARTU BERKARAKTER — tiap kartu punya identitas warna
   Variabel --tone / --tone-bg disetel per-elemen dari PHP.
   ========================================================= */

/* ---- Statistik: kartu, bukan sekadar baris ---- */
.stk-stats__inner { gap: 14px; padding: 18px 0; }
.stk-stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 13px 16px;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.stk-stat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tone, var(--maroon));
    transform: scaleY(.35);
    transform-origin: center;
    transition: transform .3s var(--ease);
}
.stk-stat::after {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--tone-bg, var(--bg));
    opacity: .55;
    transition: transform .35s var(--ease);
}
.stk-stat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--tone, var(--border)); }
.stk-stat:hover::before { transform: scaleY(1); }
.stk-stat:hover::after { transform: scale(1.25); }
.stk-stat__icon,
.stk-stat__num,
.stk-stat__label { position: relative; z-index: 2; }
.stk-stat__icon { transition: transform .3s var(--ease); }
.stk-stat:hover .stk-stat__icon { transform: scale(1.1) rotate(-6deg); }
.stk-stat__num { font-size: 1.6rem; letter-spacing: -.02em; }
.stk-stat__label { font-size: var(--step--1); color: var(--muted); font-weight: 500; line-height: 1.3; }

/* ---- Layanan: pembeda warna per SIM ---- */
.stk-service {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--tone, var(--maroon));
    padding: 15px 18px;
}
.stk-service__glow {
    position: absolute;
    inset: auto -20% -60% auto;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--tone-bg, var(--bg));
    opacity: 0;
    transform: scale(.5);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
    pointer-events: none;
}
.stk-service:hover { border-color: var(--tone, var(--maroon)); box-shadow: 0 10px 26px rgba(23,32,46,.12); }
.stk-service:hover .stk-service__glow { opacity: .8; transform: scale(1.15); }
.stk-service__icon,
.stk-service__label { position: relative; z-index: 2; }
.stk-service__icon { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.stk-service:hover .stk-service__icon {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tone) 32%, transparent);
}
.stk-service:hover .stk-service__label { color: var(--tone); }
.stk-service__label { font-size: var(--step-0); transition: color .22s var(--ease); }

/* ---- Program Studi: kartu berwarna khas ---- */
.stk-prodi-card { border-top: 4px solid var(--tone, var(--maroon)); }
.stk-prodi-card__wash {
    position: absolute;
    inset: auto -25% -45% auto;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: var(--tone-bg, var(--bg));
    opacity: .5;
    transform: scale(.7);
    transition: transform .5s var(--ease), opacity .4s var(--ease);
    pointer-events: none;
}
.stk-prodi-card:hover .stk-prodi-card__wash { transform: scale(1.15); opacity: .75; }
.stk-prodi-card > *:not(.stk-prodi-card__wash) { position: relative; z-index: 2; }
.stk-prodi-card::after { background: var(--tone, var(--maroon)); }
.stk-prodi-card__icon { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.stk-prodi-card:hover .stk-prodi-card__icon {
    transform: translateY(-4px) rotate(-5deg) scale(1.06);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tone) 34%, transparent);
}
.stk-prodi-card__jenjang { color: var(--tone); background: var(--tone-bg); border-color: transparent; }
.stk-prodi-card:hover .stk-prodi-card__name { color: var(--tone); }
.stk-prodi-card__name { transition: color .22s var(--ease); }
.stk-prodi-card__more { color: var(--tone); }

/* Cadangan untuk peramban tanpa color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .stk-service:hover .stk-service__icon,
    .stk-prodi-card:hover .stk-prodi-card__icon { box-shadow: var(--sh-2); }
}

/* =========================================================
   20. KONTEN HALAMAN — gaya kaya untuk isi yang sudah dibersihkan
   ========================================================= */

/* Paragraf pembuka */
.stk-content .lead {
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--ink);
    font-weight: 400;
    padding-left: 18px;
    border-left: 4px solid var(--gold);
    margin-bottom: 24px;
}

/* Kutipan menonjol di tengah teks */
.stk-content .pull {
    margin: 28px 0;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--maroon-soft), #fff);
    border-left: 4px solid var(--maroon);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-style: italic;
    line-height: 1.65;
    color: var(--maroon-deep);
}
.stk-content .pull cite {
    display: block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--step--1);
    color: var(--muted);
}

/* Kotak sorotan */
.stk-callout {
    display: flex;
    gap: 15px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    background: var(--gold-soft);
    border: 1px solid #f2e4c0;
    margin: 24px 0;
}
.stk-callout__icon { color: var(--gold-dark); flex-shrink: 0; margin-top: 2px; }
.stk-callout h4 { font-size: var(--step-1); margin-bottom: 5px; }
.stk-callout p:last-child { margin-bottom: 0; }

/* Gambar dengan keterangan */
.stk-content figure { margin: 26px 0; }
.stk-content figure img {
    width: 100%;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    margin: 0;
}
.stk-content figcaption {
    margin-top: 10px;
    font-size: var(--step--1);
    color: var(--muted);
    text-align: center;
    font-style: italic;
}
/* Bagan lebar — bisa digeser bila layar sempit */
.stk-figure-wide { margin: 26px 0; }
.stk-figure-wide__frame {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg);
    padding: 14px;
}
.stk-figure-wide img { min-width: 560px; border-radius: var(--r); box-shadow: none; }

/* Galeri dalam artikel */
.stk-content-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 26px 0;
}
.stk-content-gallery figure { margin: 0; }
.stk-content-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Kartu bernomor — untuk Visi/Misi/Tujuan */
.stk-cards { display: grid; gap: 16px; margin: 22px 0; }
.stk-cards--2 { grid-template-columns: repeat(2, 1fr); }
.stk-card-item {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    border-left: 4px solid var(--tone, var(--maroon));
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.stk-card-item:hover { box-shadow: var(--sh-2); transform: translateX(3px); }
.stk-card-item__no {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--tone-bg, var(--maroon-soft));
    color: var(--tone, var(--maroon));
    display: grid; place-items: center;
    font-weight: 700;
    font-size: var(--step--1);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.stk-card-item p { margin: 0; font-size: var(--step-0); line-height: 1.6; }

/* Blok pernyataan besar — untuk Visi */
.stk-statement {
    text-align: center;
    padding: 30px 28px;
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, var(--maroon) 0%, var(--maroon-deep) 100%);
    color: #fff;
    margin: 22px 0 28px;
    position: relative;
    overflow: hidden;
}
.stk-statement::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--motif-gold);
    background-repeat: repeat;
    opacity: .14;
}
.stk-statement__label {
    position: relative;
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.stk-statement p {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.24rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    color: #fff;
}

/* Peta tersemat */
.stk-map {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--sh-2);
    margin: 22px 0;
    aspect-ratio: 16 / 9;
}
.stk-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Daftar kontak ringkas */
.stk-infolist { display: grid; gap: 10px; margin: 20px 0; }
.stk-infolist__row {
    display: flex;
    gap: 13px;
    padding: 13px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.stk-infolist__row .stk-i { color: var(--maroon); flex-shrink: 0; margin-top: 3px; }
.stk-infolist__row strong { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 600; }
.stk-infolist__row span { font-size: var(--step-0); color: var(--ink); }

@media (max-width: 700px) {
    .stk-cards--2 { grid-template-columns: 1fr; }
    .stk-content .lead { font-size: 1.08rem; }
    .stk-statement { padding: 24px 20px; }
    .stk-statement p { font-size: 1.08rem; }
}

/* Formulir Hubungi Kami */
.stk-contact-form { margin: 22px 0; }
.stk-form-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stk-form-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.stk-form-field label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.stk-form-field input,
.stk-form-field select,
.stk-form-field textarea {
    font: inherit;
    font-size: var(--step-0);
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg);
    color: var(--ink);
    width: 100%;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.stk-form-field input:focus,
.stk-form-field select:focus,
.stk-form-field textarea:focus {
    outline: none;
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px var(--maroon-soft);
}
.stk-form-field small { color: var(--muted); font-size: var(--step--2); }
.stk-form-field--captcha { max-width: 320px; }
.stk-contact-form .stk-btn { border: none; cursor: pointer; }
@media (max-width: 700px) {
    .stk-form-row { grid-template-columns: 1fr; }
}

/* Daftar dokumen unduh (halaman Download) */
.stk-doclist { list-style: none; margin: 18px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stk-doclist li { margin: 0; }
.stk-doclist a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--step-0);
    line-height: 1.4;
    transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.stk-doclist a:hover { background: var(--maroon-soft); border-color: var(--maroon); color: var(--maroon); }
.stk-doclist a svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--maroon); opacity: .65; }
.stk-doclist a span { flex: 1; }
.stk-doclist a small { flex-shrink: 0; color: var(--muted); font-size: var(--step--2); }

/* Placeholder galeri -- kategori foto yang belum ada foto asli tersedia */
.stk-gallery-placeholder {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--maroon-soft) 0%, var(--bg) 100%);
    border: 1px dashed var(--border);
    border-radius: var(--r);
    color: var(--maroon);
    opacity: .8;
}
.stk-gallery-placeholder svg { width: 34px; height: 34px; opacity: .55; }

/* Direktori dosen / tenaga kependidikan -- avatar bulat kompak, pola
   standar direktori fakultas akademis (bukan foto besar dominan, karena
   sumber foto lama beresolusi kecil/tak seragam dan akan pecah/tampak
   tidak proporsional bila dipaksakan jadi potret besar). */
.stk-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
    margin: 20px 0;
    border-top: 1px solid var(--border);
}
.stk-staff-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
}
.stk-staff-card__photo {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    margin-top: 1px;
}
/* File sumber sudah di-crop persegi (top-anchored) & diseragamkan di
   server sebelum diupload -- lihat catatan build. Dengan file yang
   sudah proporsional, object-fit:cover aman dipakai lagi.
   margin:0 WAJIB -- override ".stk-content img { margin: 18px 0; }"
   (spesifisitas sama, tapi rule itu tidak pernah men-set margin jadi
   nilai 18px-nya tetap kepakai kalau tidak di-reset di sini; itulah
   yang membuat foto avatar 44px kelihatan "melayang"/terpotong,
   BUKAN masalah crop file). */
.stk-staff-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; border-radius: 0; }
.stk-staff-card__body { min-width: 0; flex: 1; }
.stk-staff-card__name { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.35; }
.stk-staff-card__role { font-size: 13px; color: var(--maroon); font-weight: 600; margin: 1px 0 0; line-height: 1.35; }
.stk-staff-card__meta { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 4px 0 0; }
.stk-staff-card__meta strong { color: var(--ink-2); font-weight: 600; }
.stk-staff-card__contact { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 4px; }
.stk-staff-card__link { font-size: 13px; font-weight: 600; color: var(--c-blue); word-break: break-word; }
@media (max-width: 640px) {
    .stk-staff-grid { grid-template-columns: 1fr; }
}