/* Mobile portal inspired by the supplied Pusaka reference; desktop keeps its layout. */
.mobile-account,.mobile-app-banner,.mobile-service-tabs{display:none}
@media(max-width:640px){
 html:not([data-theme=dark]){--canvas:#fff;--surface:#fff;--ink:#25343b;--muted:#68747d;--line:#eef0f4;--green:#087b5a;--green-soft:#e9f8f2}
 body{background:var(--canvas);padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 .topbar{position:relative;top:auto;height:88px;padding:22px 20px 12px;background:linear-gradient(180deg,#eeedff,#f4f6fc);border:0;backdrop-filter:none}
 .topbar .brand,.topbar .header-register,.topbar .top-actions>.button{display:none}
 .topbar .top-actions{width:100%;justify-content:space-between;margin:0}
 .topbar .mobile-account{display:inline-flex;align-items:center;gap:7px;width:auto;min-height:40px;padding:8px 13px;border:1px solid #fff;border-radius:30px;background:#ffffffed;color:#267762;box-shadow:0 4px 15px #52508608;font-size:11px;font-weight:700;cursor:pointer}
 .mobile-account svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
 .topbar .theme-toggle{height:40px;min-height:40px;width:40px;min-width:40px;border:1px solid #fff;border-radius:50%;background:#ffffffd9;color:#2a8d78;box-shadow:none}
 main#beranda{display:flex;flex-direction:column;width:100%;padding:0}
 #beranda>.hero{display:none}
 .mobile-app-banner{position:relative;display:block;order:0;min-height:206px;padding:23px 25px 40px;margin:0;overflow:hidden;isolation:isolate;border:0;border-radius:0;background:linear-gradient(180deg,#f4f6fc,var(--canvas));box-shadow:none}
 .mobile-app-banner::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 44%,#fffffff2 5%,#ffffffd9 42%,#ffffff40 100%);pointer-events:none}
 .mobile-app-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/banner-kampus-uin-palopo.png') center center/cover no-repeat;mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 58%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 58%,transparent 100%);pointer-events:none}
 .mobile-banner-copy{position:relative;z-index:2;width:100%;text-align:center}
 .mobile-banner-eyebrow{display:block;margin:0 0 12px;color:#568677;font-size:8px;font-weight:750;letter-spacing:.2em}
 .mobile-banner-copy img{display:block;float:none;object-fit:contain;width:36px;height:36px;margin:0 auto 8px;border-radius:9px}
 .mobile-banner-copy h1{margin:0;color:#203b35;font-size:29px;line-height:1.05;letter-spacing:-.055em}
 .mobile-banner-copy h1 span{display:block;margin-top:3px;font-size:16px;font-weight:650;letter-spacing:-.02em}
 .mobile-banner-copy p{clear:both;margin:13px 0 10px;font-size:11px;color:#5c7470}
 .mobile-banner-copy button{display:inline-flex;gap:10px;align-items:center;min-height:36px;padding:7px 12px;border:1px solid #d2e8df;border-radius:20px;background:#f4fff9;color:#176c51;font-size:10px;font-weight:700;cursor:pointer}
 .mobile-banner-caption{position:absolute;z-index:2;right:20px;bottom:8px;color:#5c7470;font-size:7px;letter-spacing:.04em}
 .mobile-banner-art{position:absolute;right:-8px;bottom:32px;width:126px;height:120px;color:#b1c9d9;opacity:.25;z-index:0}
 .campus-orbit{position:absolute;width:100px;height:100px;right:4px;top:0;border:1px solid #b9c9de;border-radius:50%}
 .campus-tower{position:absolute;left:32px;bottom:0;width:27px;height:91px;background:linear-gradient(90deg,#c1d1e4,#d8e3ef);border-radius:14px 14px 0 0;border-bottom:5px solid #b7cfca}
 .campus-tower::before{content:"";position:absolute;left:12px;top:-15px;width:2px;height:18px;background:#9fb7d0}
 .campus-tower::after{content:"";position:absolute;left:10px;top:23px;width:7px;height:50px;background:repeating-linear-gradient(180deg,#a6bfd5 0 7px,transparent 7px 13px);border-radius:4px}
 .campus-hall{position:absolute;right:0;bottom:0;width:66px;height:54px;background:#cbdbe5;clip-path:polygon(0 23%,50% 0,100% 23%,100% 100%,0 100%)}
 .campus-hall::after{content:"";position:absolute;inset:21px 8px 0;background:repeating-linear-gradient(90deg,#a5c1d2 0 6px,transparent 6px 15px)}
 .campus-tree{position:absolute;left:4px;bottom:0;width:20px;height:53px;border-bottom:22px solid #afcdbd;border-radius:50%;background:#b6d7c3;box-shadow:11px 12px 0 -2px #bfdccc}
 #beranda>.menu-section{order:1;padding:24px 16px 22px}
 .menu-section>.section-heading{margin:0 0 12px}
 .menu-section>.section-heading .eyebrow{display:none}
 .menu-section>.section-heading h2{font-size:15px;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
 .mobile-service-tabs{display:none}
 .mobile-services-ready .mobile-service-tabs{display:flex;gap:4px;padding:4px;margin-bottom:16px;border:1px solid #f3f3f7;border-radius:30px;background:#f4f5f8}
 .mobile-service-tabs button{flex:1;min-width:0;min-height:39px;padding:8px 5px;border:0;border-radius:24px;background:transparent;color:#717681;font:inherit;font-size:11px;font-weight:650;cursor:pointer}
 .mobile-service-tabs button.is-selected{background:var(--surface);color:#087b5a;box-shadow:0 2px 8px #30344f08}
 .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 9px;min-height:208px;align-content:start}
 .menu-grid>.menu-card,.menu-grid>.menu-card.featured,.menu-grid>.menu-card.dark{min-height:94px;padding:6px 2px;gap:9px;background:transparent;border:0;border-radius:12px;box-shadow:none;color:var(--ink)}
 .menu-grid>.menu-card[hidden]{display:none!important}
 .menu-grid .menu-icon{width:52px;height:52px;flex-basis:52px;border-radius:17px;color:#fff;box-shadow:0 5px 12px #434c7b0b}
 .menu-grid .menu-card .menu-icon{color:#fff}
 .menu-grid .menu-icon svg{width:27px;height:27px;stroke-width:1.65}
 .menu-grid .menu-icon.mint{background:linear-gradient(145deg,#33c9ad,#20b6a5)}
 .menu-grid .menu-icon.cyan{background:linear-gradient(145deg,#6d9aeb,#5c7fd7)}
 .menu-grid .menu-icon.violet{background:linear-gradient(145deg,#a893ed,#8775d7)}
 .menu-grid .menu-icon.amber{background:linear-gradient(145deg,#f5c878,#efb657)}
 .menu-grid .menu-icon.green{background:linear-gradient(145deg,#35c5a0,#1caa8e)}
 .menu-grid .menu-icon.blue{background:linear-gradient(145deg,#7da4f3,#688ade)}
 .menu-grid .menu-icon.coral{background:linear-gradient(145deg,#f0a1a8,#db8497)}
 .menu-grid .menu-icon.soft{background:linear-gradient(145deg,#b09be9,#8b83d0)}
 .menu-grid .menu-card strong{font-size:11px;font-weight:550;line-height:15px;max-width:98px}
 #beranda>.admission-status{order:2;padding:22px 16px;border-top:7px solid #f6f7fa}
 .admission-status .section-heading h2{font-size:19px;line-height:26px}
 .admission-status .section-heading .eyebrow{font-size:9px}
 .status-summary{border-radius:18px;box-shadow:none}
 .site-footer{width:calc(100% - 32px);padding-bottom:20px}
 .dock{min-height:70px;padding:8px 5px calc(8px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;border-top:1px solid #f0f1f6;background:#ffffffed;box-shadow:0 -5px 24px #4b55730b}
 .dock a,.dock button{flex:1;max-width:68px;min-width:0;width:auto;color:#718078;border-radius:14px}
 .dock small{font-size:9px;font-weight:550;white-space:nowrap}
 .dock .active{background:transparent;color:#087b5a}
 .dock .dock-main{flex:0 0 76px;max-width:none;width:76px;height:76px;min-height:76px;margin-top:-30px;border:6px solid var(--canvas);background:linear-gradient(145deg,#7b69bf,#5b60a7);box-shadow:0 5px 18px #7a7cce30}
 .dock .dock-main:hover{background:#777bca}
 .dock .dock-main small{font-size:9px}
 .dock .dock-main svg{width:27px;height:27px}
 .mobile-account:focus-visible,.mobile-service-tabs button:focus-visible,.mobile-banner-copy button:focus-visible{outline:3px solid #087b5a;outline-offset:3px}
 html[data-theme=dark] .topbar{background:linear-gradient(180deg,#171b35,#0b1727)}
 html[data-theme=dark] .topbar .mobile-account,html[data-theme=dark] .topbar .theme-toggle{background:#172b39;border-color:#29404d;color:#84dfc5}
 html[data-theme=dark] .mobile-app-banner{background:linear-gradient(180deg,#0b1727,var(--canvas))}
 html[data-theme=dark] .mobile-app-banner::after{opacity:.5}
 html[data-theme=dark] .mobile-app-banner::before{background:radial-gradient(ellipse at 50% 44%,#07111fc7 5%,#07111f88 42%,#07111f22 100%)}
 html[data-theme=dark] .mobile-banner-caption{color:#a4c6bf}
 html[data-theme=dark] .mobile-banner-copy h1{color:#ecfff9}
 html[data-theme=dark] .mobile-banner-copy p,html[data-theme=dark] .mobile-banner-eyebrow{color:#a4c6bf}
 html[data-theme=dark] .mobile-banner-copy button{background:#193c34;border-color:#2b5b4d;color:#b3efda}
 html[data-theme=dark] .mobile-service-tabs{background:#142336;border-color:#203147}
 html[data-theme=dark] .mobile-service-tabs button{color:#b5c1d2}
 html[data-theme=dark] .menu-grid>.menu-card,html[data-theme=dark] .menu-grid>.menu-card.featured,html[data-theme=dark] .menu-grid>.menu-card.dark{background:transparent}
 html[data-theme=dark] .mobile-service-tabs button.is-selected{background:#244436;color:#c2f8db}
 html[data-theme=dark] #beranda>.admission-status{border-color:#102033}
 html[data-theme=dark] .dock{background:#0d1d2ded;border-color:#263747}
 html[data-theme=dark] .dock .active{color:#85dec1}
}