/* =========================================================
   RT17 PUBLIC — Responsive Luxury Polish v4
   Loaded after legacy styles. Purposefully conservative:
   preserves content/features while fixing mobile sizing,
   hover motion, gallery density, and education modal behavior.
   ========================================================= */
:root {
    --rt4-navy: #071a3d;
    --rt4-blue: #1d5fc7;
    --rt4-blue-2: #2a82df;
    --rt4-cyan: #24a7d9;
    --rt4-ink: #10213f;
    --rt4-muted: #63728a;
    --rt4-bg: #f5f8fd;
    --rt4-card: #ffffff;
    --rt4-border: rgba(30, 83, 168, .12);
    --rt4-shadow: 0 18px 50px rgba(15, 50, 110, .11);
    --rt4-shadow-hover: 0 24px 64px rgba(15, 50, 110, .16);
    --rt4-ease: cubic-bezier(.22, 1, .36, 1);
}

html, body { max-width: 100%; overflow-x: clip !important; }
body { background: #fff; }
img, video, iframe, svg { max-width: 100%; }

/* Smooth, controlled interactions. Avoid springy/fast motion. */
a, button, .rt-card, .edukasi-card, .pengumuman-card, .galeri-card,
.kkn-member-card, .member-card-wrapper, .member-card-front,
.pengurus-ketua-card, .pengurus-card, .kontak-card {
    transition-timing-function: var(--rt4-ease) !important;
}
.nav-link, .btn-login, .edukasi-btn, .btn-read-more,
.pengumuman-back-btn, .pengurus-card-btn, .btn-ketua-profil,
.btn-ketua-chat, .contact-btn, .modal-close {
    transition: transform .34s var(--rt4-ease), box-shadow .34s var(--rt4-ease),
                background-color .34s var(--rt4-ease), color .34s var(--rt4-ease),
                border-color .34s var(--rt4-ease), opacity .34s var(--rt4-ease) !important;
}

/* ===== Navigation ===== */
.navbar {
    min-height: 72px;
    padding: 10px 0 !important;
    animation-duration: .55s !important;
    box-shadow: 0 10px 34px rgba(16, 72, 160, .17) !important;
}
.navbar .container-lg { gap: 14px; }
.navbar-brand { gap: 10px !important; min-width: 0; }
.navbar-logo { flex: 0 0 auto; }
.navbar-toggler {
    width: 48px; height: 44px; padding: 8px 10px !important;
    border-radius: 13px !important; border: 1px solid rgba(255,255,255,.45) !important;
    box-shadow: none !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.14) !important; }
.nav-link:hover { transform: translateY(-1px) !important; }
.btn-login:hover { transform: translateY(-1px) !important; }

/* ===== Shared public section polish ===== */
.rt-v4-section, .edukasi-section { position: relative; isolation: isolate; }
.rt-v4-section-head {
    display: flex; justify-content: space-between; gap: 28px; align-items: flex-end;
    margin-bottom: 34px;
}
.rt-v4-section-copy { max-width: 760px; }
.rt-v4-summary-card {
    min-width: 180px; padding: 15px 18px; display: flex; align-items: center; gap: 13px;
    border-radius: 18px; background: rgba(255,255,255,.96); border: 1px solid var(--rt4-border);
    box-shadow: 0 12px 34px rgba(24,65,130,.08);
}
.rt-v4-summary-card .profile-value-icon { width: 46px !important; height: 46px !important; border-radius: 14px !important; flex: 0 0 46px; }
.rt-v4-summary-card span { display:block; font-size:.67rem; color:#8190a6; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.rt-v4-summary-card strong { display:block; color:#10234a; font-size:1.45rem; font-weight:900; line-height:1.2; }

.rt-card:hover, .profile-value-card:hover, .profile-info-card:hover,
.pengumuman-card:hover, .edukasi-card:hover, .galeri-card:hover,
.kkn-member-card:hover, .pengurus-card:hover, .kontak-card:hover {
    transform: translateY(-4px) !important;
}

/* ===== Education: lighter cards + guaranteed working modal ===== */
.edukasi-section { background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%) !important; }
.edukasi-grid { align-items: stretch !important; }
.edukasi-card {
    border-radius: 22px !important; border: 1px solid var(--rt4-border) !important;
    box-shadow: 0 14px 38px rgba(20,58,120,.09) !important;
    animation-delay: var(--rt-delay, 0ms) !important;
    transition: transform .42s var(--rt4-ease), box-shadow .42s var(--rt4-ease), border-color .42s var(--rt4-ease) !important;
}
.edukasi-card:hover { box-shadow: var(--rt4-shadow-hover) !important; border-color: rgba(31,103,208,.22) !important; }
.edukasi-card-image { height: 210px !important; min-height: 0 !important; }
.edukasi-icon { animation: none !important; transform: none !important; }
.edukasi-card:hover .edukasi-icon { animation: none !important; transform: scale(1.035) !important; }
.rt-v4-card-number {
    position:absolute; right:18px; bottom:14px; z-index:2; color:rgba(255,255,255,.5);
    font-size:1.9rem; font-weight:900; letter-spacing:-.06em;
}
.edukasi-card-content { padding: 26px !important; }
.edukasi-btn { min-height: 46px; }
.edukasi-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(37,99,235,.24) !important; }

.rt-modal-open { overflow: hidden !important; }
.rt-edu-modal[hidden] { display: none !important; }
.rt-edu-modal {
    position: fixed; inset: 0; z-index: 20050; display: grid; place-items: center;
    padding: 22px; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.rt-edu-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.rt-edu-modal__backdrop {
    position:absolute; inset:0; background:rgba(3,14,35,.68); backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px); cursor:pointer;
}
.rt-edu-modal__dialog {
    position:relative; z-index:1; width:min(760px, 100%); max-height:min(82vh, 760px);
    display:flex; flex-direction:column; overflow:hidden; border-radius:24px;
    background:#fff; border:1px solid rgba(255,255,255,.5);
    box-shadow:0 36px 100px rgba(2,15,45,.38);
    transform: translateY(14px) scale(.985);
    transition: transform .28s var(--rt4-ease); outline:none;
}
.rt-edu-modal.is-open .rt-edu-modal__dialog { transform: translateY(0) scale(1); }
.rt-edu-modal__header {
    display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
    padding:26px 28px; color:#fff;
    background: linear-gradient(125deg, #0b2455 0%, #1e5fc5 62%, #1aa0d3 100%);
}
.rt-edu-modal__category { display:block; margin-bottom:6px; color:rgba(255,255,255,.72); font-size:.7rem; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.rt-edu-modal__header h2 { margin:0; font-size:clamp(1.3rem, 3vw, 1.8rem); line-height:1.25; font-weight:900; letter-spacing:-.035em; }
.rt-edu-modal__close {
    flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff;
    cursor:pointer; position:relative; z-index:3;
}
.rt-edu-modal__close:hover { background:rgba(255,255,255,.2); transform:rotate(4deg) scale(1.03); }
.rt-edu-modal__body {
    padding:28px; overflow:auto; overscroll-behavior:contain; color:#4f6079;
    font-size:1rem; line-height:1.9; white-space:pre-line; word-break:break-word;
}
.rt-edu-modal__footer { padding:18px 28px; display:flex; justify-content:flex-end; background:#f7faff; border-top:1px solid #e7edf7; }
.rt-edu-modal__done {
    border:0; border-radius:12px; min-height:44px; padding:10px 18px; color:#fff; font-weight:800;
    background:linear-gradient(135deg,#1e5ec4,#2a9edb); box-shadow:0 10px 22px rgba(37,99,235,.18);
}
.rt-edu-modal__done:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(37,99,235,.23); }

/* ===== Pengurus: preserve dark premium style but improve proportion ===== */
.pengurus-ketua-card {
    transition: transform .46s var(--rt4-ease), box-shadow .46s var(--rt4-ease), border-color .46s var(--rt4-ease), background .46s var(--rt4-ease) !important;
}
.pengurus-ketua-card:hover { transform: translateY(-5px) !important; }
.pengurus-ketua-card:hover .pengurus-img-large { transform: scale(1.035) !important; }
.pengurus-card { transition: transform .42s var(--rt4-ease), box-shadow .42s var(--rt4-ease), border-color .42s var(--rt4-ease) !important; }
.pengurus-card:hover { transform: translateY(-4px) !important; }
.pengurus-card:hover .pengurus-card-image img { transform: scale(1.035) !important; }

/* ===== Gallery: more editorial, less bulky ===== */
.galeri-container { background: linear-gradient(180deg,#07152f 0%,#0a1d3f 48%,#07152f 100%) !important; }
.galeri-header-premium { border-bottom:1px solid rgba(116,174,255,.16) !important; }
.galeri-section {
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018)) !important;
    border: 1px solid rgba(127,171,235,.10) !important;
    margin-top: 28px !important; margin-bottom: 28px !important;
}
.galeri-section .section-header { padding: 0 !important; }
.galeri-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important; padding: 0 !important; background: transparent !important; border:0 !important;
}
.kkn-members-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.kkn-member-card, .galeri-card { min-width:0; }
.member-card-wrapper { transition: transform .44s var(--rt4-ease) !important; }
.kkn-member-card:hover .member-card-wrapper { transform: translateY(-4px) !important; }
.member-card-front {
    min-height: 0 !important; border-radius: 21px !important;
    transition: background .42s var(--rt4-ease), border-color .42s var(--rt4-ease), box-shadow .42s var(--rt4-ease) !important;
}
.member-card-image { height: 240px !important; flex: 0 0 240px !important; margin: 14px 16px !important; }
.member-card-image img { transition: transform .5s var(--rt4-ease), filter .5s var(--rt4-ease) !important; }
.kkn-member-card:hover .member-card-image img { transform: scale(1.035) !important; }
.member-card-body { padding: 17px 20px 18px !important; }
.member-card-footer { padding: 12px 18px !important; }
.activity-img { height: 220px !important; }
.activity-img img { transition: transform .5s var(--rt4-ease), filter .5s var(--rt4-ease) !important; }
.galeri-card:hover .activity-img img { transform:scale(1.035) !important; }
.activity-info { padding: 22px !important; }
.galeri-card { transition: transform .44s var(--rt4-ease), box-shadow .44s var(--rt4-ease), border-color .44s var(--rt4-ease), background .44s var(--rt4-ease) !important; }
.galeri-card:hover { transform:translateY(-4px) !important; }
.galeri-separator { opacity:.38 !important; }
.modal-close { border:0; }

/* ===== Profile & announcement typography consistency ===== */
.profile-story-card, .profile-value-card, .profile-info-card,
.pengumuman-card { border:1px solid var(--rt4-border) !important; }
.profile-story-content p, .profile-value-card .profile-text, .profile-info-card p,
.pengumuman-card p { overflow-wrap:anywhere; }

/* ===== Tablet ===== */
@media (max-width: 991.98px) {
    body { padding-top: 68px !important; }
    .navbar { min-height:68px; }
    .navbar .container-lg { flex-wrap:wrap; }
    .navbar-brand { max-width: calc(100% - 66px) !important; }
    .navbar-brand span { font-size: 1rem !important; white-space: nowrap !important; overflow:hidden; text-overflow:ellipsis; }
    .navbar-logo { width:42px !important; height:42px !important; }
    .navbar-collapse {
        flex-basis:100%; width:100%; margin-top:10px !important; padding:10px !important;
        border-radius:18px; background:rgba(7,35,88,.96); border:1px solid rgba(255,255,255,.11);
        box-shadow:0 22px 50px rgba(7,28,70,.25); max-height:calc(100dvh - 90px) !important;
        overflow:auto; backdrop-filter:blur(14px);
    }
    .navbar-nav { gap:3px; }
    .navbar-nav .nav-link, .navbar-nav .btn-login {
        min-height:44px; width:100% !important; justify-content:flex-start !important;
        padding:10px 12px !important; margin:0 !important; border-radius:11px !important;
    }
    .navbar-nav .nav-link:hover, .navbar-nav .btn-login:hover { transform:none !important; }

    .rt-v4-section-head { align-items:stretch; }
    .galeri-grid, .kkn-members-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .pengurus-ketua-card { grid-template-columns: minmax(220px, 300px) 1fr !important; gap:34px !important; padding:36px !important; }
}

/* ===== Phone ===== */
@media (max-width: 767.98px) {
    body { padding-top: 64px !important; font-size:15px; }
    .container-lg, .container, .container-md, .container-sm { width:100% !important; max-width:100% !important; padding-left:16px !important; padding-right:16px !important; }
    .navbar { min-height:64px; padding:7px 0 !important; }
    .navbar-brand span { font-size:.94rem !important; }
    .navbar-logo { width:38px !important; height:38px !important; }
    .navbar-toggler { width:44px; height:42px; }

    .rt-page-hero, .pengumuman-header-section, .edukasi-header-premium,
    .galeri-header-premium, .pengurus-header-premium, .kontak-header-premium {
        padding: 54px 16px 48px !important;
        min-height:0 !important;
    }
    .rt-page-hero h1, .pengumuman-header-title, .edukasi-header-title,
    .galeri-header-content h1, .pengurus-header-title, .kontak-header-title {
        font-size: clamp(2rem, 10vw, 2.55rem) !important;
        line-height:1.08 !important; letter-spacing:-.045em !important;
        overflow-wrap:anywhere;
    }
    .edukasi-header-subtitle, .pengumuman-header-subtitle, .galeri-header-content p,
    .pengurus-header-subtitle, .kontak-header-subtitle { font-size:.94rem !important; line-height:1.65 !important; }

    .rt-section-title { font-size:clamp(1.65rem, 7.5vw, 2.05rem) !important; line-height:1.18 !important; }
    .rt-v4-section-head { display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:24px; }
    .rt-v4-summary-card { min-width:0; width:100%; }

    .edukasi-section { padding:46px 0 62px !important; }
    .edukasi-grid { display:grid !important; grid-template-columns:1fr !important; gap:18px !important; margin-top:0 !important; }
    .edukasi-card { width:100% !important; max-width:100% !important; border-radius:18px !important; }
    .edukasi-card-image { height:150px !important; }
    .edukasi-icon { width:58px !important; height:58px !important; border-radius:18px !important; font-size:1.45rem !important; }
    .edukasi-card-content { padding:20px !important; }
    .edukasi-title { font-size:1.08rem !important; }
    .edukasi-excerpt { margin:14px 0 18px !important; font-size:.92rem; line-height:1.65 !important; }
    .edukasi-btn { font-size:.78rem !important; min-height:44px; }

    .rt-edu-modal { padding: 10px; align-items:end; }
    .rt-edu-modal__dialog { width:100%; max-height:88dvh; border-radius:22px 22px 14px 14px; transform:translateY(30px); }
    .rt-edu-modal__header { padding:20px 18px; gap:12px; }
    .rt-edu-modal__close { width:40px; height:40px; flex-basis:40px; }
    .rt-edu-modal__body { padding:20px 18px; font-size:.94rem; line-height:1.75; }
    .rt-edu-modal__footer { padding:14px 18px max(14px, env(safe-area-inset-bottom)); }
    .rt-edu-modal__done { width:100%; }

    /* Pengurus: one compact card per row, no giant portrait block. */
    .pengurus-section-inti, .pengurus-section-lainnya, .pengurus-section-lembaga,
    .struktur-section, .lembaga-section { padding:50px 0 !important; }
    .pengurus-section-inti .section-header, .pengurus-container .section-header { margin-bottom:30px !important; padding:0 16px !important; }
    .pengurus-container .section-title { font-size:clamp(1.65rem,8vw,2.15rem) !important; margin-bottom:10px !important; }
    .pengurus-ketua-container { padding:0 14px !important; margin-bottom:48px !important; }
    .pengurus-ketua-card {
        display:grid !important; grid-template-columns:1fr !important; gap:20px !important;
        width:100% !important; max-width:520px !important; padding:16px !important; border-radius:22px !important;
    }
    .pengurus-image-container-large { width:100% !important; aspect-ratio:16/10 !important; max-height:240px !important; border-radius:16px !important; }
    .pengurus-ketua-info { padding:4px 4px 8px !important; }
    .pengurus-ketua-nama { font-size:1.8rem !important; line-height:1.15 !important; margin-bottom:9px !important; }
    .pengurus-ketua-jabatan { font-size:.72rem !important; padding:9px 16px !important; margin-bottom:18px !important; }
    .pengurus-ketua-deskripsi { font-size:.94rem !important; line-height:1.75 !important; padding:16px !important; margin-bottom:16px !important; }
    .pengurus-ketua-details { gap:10px !important; margin-bottom:18px !important; }
    .pengurus-ketua-details > div { min-width:0 !important; overflow-wrap:anywhere; }
    .pengurus-ketua-action { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
    .btn-ketua-profil, .btn-ketua-chat { width:100% !important; min-height:44px !important; justify-content:center !important; }
    .pengurus-grid { display:grid !important; grid-template-columns:1fr !important; gap:16px !important; padding:0 14px !important; }
    .pengurus-card { width:100% !important; max-width:520px !important; margin:0 auto !important; border-radius:20px !important; }
    .pengurus-card-image { height:210px !important; }
    .pengurus-card-info { padding:18px !important; }

    /* Gallery */
    .galeri-section { width:calc(100% - 28px) !important; margin:18px auto !important; padding:34px 14px !important; border-radius:22px !important; }
    .galeri-section .section-header { margin-bottom:25px !important; text-align:left !important; }
    .galeri-section .section-icon { width:48px !important; height:48px !important; border-radius:15px !important; font-size:1.2rem !important; margin-bottom:12px !important; }
    .galeri-section .section-header h2 { font-size:1.7rem !important; margin-top:10px !important; }
    .galeri-section .section-header p { font-size:.9rem !important; }
    .galeri-grid, .kkn-members-grid { grid-template-columns:1fr !important; gap:16px !important; }
    .kkn-member-card, .galeri-card { width:100% !important; max-width:520px !important; margin:0 auto !important; }
    .member-card-front { min-height:0 !important; border-radius:18px !important; }
    .member-card-header { padding:12px 16px !important; }
    .member-card-image { height:180px !important; flex:0 0 180px !important; margin:12px 14px !important; border-radius:14px !important; }
    .placeholder-photo { font-size:48px !important; }
    .member-card-body { padding:14px 18px 16px !important; }
    .member-card-body h3 { font-size:1.08rem !important; }
    .member-card-footer { font-size:.63rem !important; }
    .activity-img { height:185px !important; }
    .activity-info { padding:18px !important; }
    .activity-info h4 { font-size:1.05rem !important; }
    .galeri-separator { width:calc(100% - 32px) !important; }
    .galeri-modal.show { padding:8px !important; }
    .galeri-modal .modal-content { width:100% !important; max-width:100% !important; max-height:90dvh !important; border-radius:18px !important; }
    .member-modal-body, .gallery-modal-body { padding:16px !important; gap:16px !important; }
    .member-modal-img { max-width:180px !important; max-height:240px !important; }
    .modal-close { width:42px !important; height:42px !important; right:10px !important; top:10px !important; font-size:25px !important; }

    /* Profile / announcement cards */
    .profile-page, .pengumuman-content-section { padding-left:0 !important; padding-right:0 !important; }
    .profile-story-card { border-radius:20px !important; }
    .profile-story-content, .profile-value-card, .profile-info-card { padding:20px !important; }
    .profile-values-grid, .profile-info-grid { gap:16px !important; }
    .pengumuman-grid { grid-template-columns:1fr !important; gap:16px !important; }
    .pengumuman-card { width:100% !important; }

    footer { padding-left:0 !important; padding-right:0 !important; }
}

@media (max-width: 420px) {
    .navbar-brand span { max-width:220px; font-size:.88rem !important; }
    .container-lg, .container { padding-left:13px !important; padding-right:13px !important; }
    .pengurus-ketua-container, .pengurus-grid { padding-left:10px !important; padding-right:10px !important; }
    .galeri-section { width:calc(100% - 20px) !important; padding:28px 10px !important; }
    .rt-edu-modal { padding:6px; }
}

/* Touch devices should never simulate aggressive desktop hover motion. */
@media (hover: none), (pointer: coarse) {
    .rt-card:hover, .profile-value-card:hover, .profile-info-card:hover,
    .pengumuman-card:hover, .edukasi-card:hover, .galeri-card:hover,
    .kkn-member-card:hover, .pengurus-card:hover, .pengurus-ketua-card:hover,
    .kontak-card:hover, .member-card-wrapper, .kkn-member-card:hover .member-card-wrapper {
        transform:none !important;
    }
    .edukasi-card:hover .edukasi-icon,
    .galeri-card:hover img, .kkn-member-card:hover img,
    .pengurus-ketua-card:hover .pengurus-img-large,
    .pengurus-card:hover .pengurus-card-image img { transform:none !important; }
}

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

/* Gallery missing-photo fallback created by the V4 modal script. */
.member-image-fallback {
    width:100%; min-height:220px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:linear-gradient(145deg,#132f62,#174b8f); color:#dbeafe; border-radius:14px;
}
.member-image-fallback i { font-size:3.4rem; opacity:.72; }
.member-image-fallback span { font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; opacity:.78; }

/* Keep the full desktop navigation compact on 1024–1200px laptops. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand { margin-right:8px !important; }
    .navbar-brand span { font-size:1rem !important; }
    .navbar-logo { width:40px !important; height:40px !important; }
    .navbar .nav-link { font-size:.76rem !important; padding:7px 6px !important; margin:0 1px !important; }
    .navbar .btn-login { font-size:.75rem !important; padding:8px 10px !important; }
}

.edukasi-btn, .rt-edu-modal__close, .rt-edu-modal__done, .modal-close,
.navbar-toggler, .pengurus-card-btn, .btn-ketua-profil, .btn-ketua-chat {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}