tambahan (img ada di dalam div itu, bukan langsung di .ph), jadi TIDAK kena aturan ini — logo tetap bisa dicenter oleh flexbox pembungkusnya sendiri tanpa ditimpa position:absolute di sini. */ .ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .ph svg{ position:relative; } .ph::after{ content: attr(data-label); position:absolute; bottom:10px; left:12px; font-size:10.5px; font-family:'Inter',sans-serif; background:rgba(255,255,255,0.85); padding:3px 9px; border-radius:20px; color:var(--ink-soft); letter-spacing:.02em; } /* Khusus label berformat "Foto: nama kegiatan" disembunyikan (mis. "Foto: gedung sekolah"). Label lain (mis. "Logo Polytron", "Praktik TAV") tetap tampil sebagai penanda admin. */ .ph[data-label^="Foto:"]::after{ content:none; display:none; } .ph svg{ width:34%; height:34%; opacity:.5; } /* ---------- blobs ---------- Semua dekorasi visual (blob hero, ring foto, ring outline & corner bracket .deco-dots, blob kuning di pojok kartu) DIHAPUS sesuai permintaan — di-nonaktifkan lewat display:none di sini supaya elemen

yang masih ada di markup PHP tetap aman (kosong, tidak terlihat), tanpa perlu edit satu per satu tiap file PHP. */ .blob{ display:none; } .ring{ display:none; } /* ================= HEADER ================= */ .topbar{ background:var(--blue-deep); color:#fff; font-size:12.5px; } .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; } .topbar .items{ display:flex; gap:22px; opacity:.9; } header.main{ position:sticky; top:0; z-index:50; background:rgba(251,250,246,0.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(14,79,66,0.08); } .header-row{ display:flex; align-items:center; justify-content:space-between; height:84px; } /* Grup kanan: menu, tombol Daftar PPDB, dan toggle mobile dikelompokkan jadi satu supaya semuanya menempel rapi di kanan, sementara logo tetap di kiri. !important dipakai karena tema induk Hestia sering punya CSS lama untuk .btn-primary (float/position/margin) yang menang lawan CSS ini kalau tidak dipaksa. */ .header-actions{ display:flex !important; align-items:center !important; gap:32px !important; float:none !important; position:static !important; margin:0 !important; width:auto !important; } .header-actions nav, .header-actions .btn.btn-primary, .header-actions .nav-toggle{ float:none !important; position:static !important; margin:0 !important; } .brand{ display:flex; align-items:center; gap:12px; } .brand .logo{ width:48px; height:48px; border-radius:14px; background:var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); overflow:hidden; } .brand .logo .muspla-school-logo-img{ width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box; } .brand .logo.logo-img{ width:60px; height:60px; background:none; box-shadow:none; border-radius:0; } .brand .logo.logo-img .muspla-school-logo-img{ padding:0; } .brand-name{ font-weight:700; font-size:16px; color:var(--blue-deep); line-height:1.2; } .brand-tag{ font-size:11.5px; color:var(--blue); font-weight:600; letter-spacing:.02em; } /* Nav desktop: hanya level-1 (ul > li > a langsung) yang dibuat baris horizontal. Di-scope pakai ">" supaya .sub-menu di dalamnya TIDAK ikut jadi flex-row — tanpa scoping ini, semua item sub-menu akan "tumpah" sejajar dengan menu utama. */ .header-actions nav > ul{ display:flex; align-items:center; gap:30px; height:44px; } .header-actions nav > ul > li{ display:flex; align-items:center; height:100%; position:relative; } .header-actions nav > ul > li > a{ display:flex; align-items:center; gap:5px; height:100%; font-weight:600; font-size:14.5px; color:var(--ink); } .header-actions nav > ul > li > a:hover{ color:var(--blue); } .header-actions nav > ul > li:has(> .sub-menu) > a::after{ content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.6; } /* Dropdown: tersembunyi diam-diam, muncul begitu item level-1 di-hover/fokus */ .header-actions nav .sub-menu{ position:absolute; top:100%; left:0; min-width:235px; background:var(--white); border-radius:14px; box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index:60; } .header-actions nav > ul > li:hover > .sub-menu, .header-actions nav > ul > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .18s ease, transform .18s ease; } .header-actions nav .sub-menu li{ height:auto; } .header-actions nav .sub-menu a{ display:block; height:auto; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink); } .header-actions nav .sub-menu a:hover{ background:var(--cream); color:var(--blue-deep); } /* Nav di panel mobile: item utama tebal + garis pemisah, sub-menu selalu terbuka (tanpa accordion) tapi diberi indent & gaya lebih kecil supaya hierarkinya tetap kebaca alih-alih rata semua seperti menu utama. */ .mobile-panel nav > ul{ display:flex; flex-direction:column; gap:2px; } .mobile-panel nav > ul > li > a{ display:block; padding:14px 4px; font-size:16px; font-weight:700; color:var(--blue-deep); border-bottom:1px solid rgba(0,0,61,.08); } .mobile-panel nav > ul > li > a:hover{ color:var(--blue); } .mobile-panel nav .sub-menu{ display:flex; flex-direction:column; padding:2px 0 10px 18px; } .mobile-panel nav .sub-menu a{ display:block; padding:9px 4px; font-size:13.5px; font-weight:600; color:var(--ink-soft); border-bottom:none; } .mobile-panel nav .sub-menu a:hover{ color:var(--blue); } .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:0 26px; height:44px; border-radius:100px !important; box-shadow:var(--shadow-sm); } /* !important dipakai di SEMUA baris berikut (bukan cuma warna) karena tema induk Hestia punya CSS Bootstrap lama untuk ".btn-primary" yang kadang masih "menang" terutama di layar kecil/mobile — bikin warnanya berubah jadi pink/merah muda dan sudutnya kurang bulat. Ini berlaku di MANA PUN class "btn btn-primary" dipakai (hero, CTA, footer, dst), tidak cuma yang di dalam header. */ .btn-primary{ background:var(--blue-deep) !important; color:#fff !important; border-radius:100px !important; text-transform:uppercase !important; letter-spacing:.03em !important; } .btn-primary:hover{ background:#000027 !important; } .btn-outline{ border:2px solid var(--blue); color:var(--blue); background:transparent; padding:0 24px; height:44px; border-radius:100px !important; } .btn-outline:hover, .btn-outline:hover *{ background:var(--blue) !important; color:#fff !important; } /* Tombol khusus "Teaching Factory" di hero homepage — sengaja dibuat beda dari .btn-primary/.btn-outline supaya lebih menonjol/terhighlight (kuning solid + glow lembut + sedikit animasi denyut halus). */ .btn-tefa{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; padding:0 26px; height:44px; border-radius:100px !important; background:var(--yellow); color:var(--blue-deep); box-shadow:0 0 0 0 rgba(245,197,24,.55), var(--shadow-sm); position:relative; animation:tefaPulse 2.4s ease-in-out infinite; } .btn-tefa .ic{ font-size:15px; line-height:1; } .btn-tefa:hover{ background:#FFF066; } @keyframes tefaPulse{ 0%{ box-shadow:0 0 0 0 rgba(245,197,24,.55), var(--shadow-sm); } 70%{ box-shadow:0 0 0 10px rgba(245,197,24,0), var(--shadow-sm); } 100%{ box-shadow:0 0 0 0 rgba(245,197,24,0), var(--shadow-sm); } } @media(prefers-reduced-motion:reduce){ .btn-tefa{ animation:none; } } /* Penguat khusus: memastikan tombol Daftar di header menang lawan CSS tema Hestia lama yang kadang masih nyangkut (bikin warnanya jadi pink & sudutnya kurang bulat, dan posisinya nyangkut di tengah/kiri alih-alih ikut pindah ke kanan). KHUSUS layar desktop (>1000px) — supaya tidak bentrok dengan aturan ".header-row .btn-primary{display:none}" di bagian mobile (lebih bawah) yang sengaja menyembunyikan tombol ini di HP supaya tombol hamburger tidak berdesakan/kepotong. */ @media(min-width:1001px){ .header-row .btn.btn-primary{ display:inline-flex !important; align-items:center !important; background:var(--blue-deep) !important; color:#fff !important; border-radius:100px !important; height:44px !important; float:none !important; position:static !important; margin:0 !important; } .header-row .btn.btn-primary:hover{ background:#000027 !important; } } /* Tombol Daftar di dalam PANEL MOBILE (menu slide-out hamburger) — beda konteks dari tombol header di atas, jadi TIDAK dibatasi ke desktop (drawer ini memang cuma pernah tampil di layar kecil, dan tidak ada aturan lain yang menyembunyikannya, jadi aman dipaksa di semua lebar). */ .mobile-panel .btn.btn-primary{ display:inline-flex !important; align-items:center !important; background:var(--blue-deep) !important; color:#fff !important; border-radius:100px !important; height:44px !important; float:none !important; position:static !important; margin:0 !important; } .mobile-panel .btn.btn-primary:hover{ background:#000027 !important; } /* ================= HERO ================= */ .hero{ position:relative; padding:0 0 72px; overflow:hidden; } .hero .blob-1{ top:120px; right:-120px; width:480px; height:480px; background:radial-gradient(circle,var(--blue-light) 0%, transparent 70%); border-radius:50%; } .hero .blob-2{ bottom:-160px; left:-120px; width:420px; height:420px; background:radial-gradient(circle,var(--yellow-mid) 0%, transparent 68%); border-radius:50%; opacity:0.6; } /* ===== SLIDER PENUH LEBAR LAYAR (edge-to-edge), di paling atas halaman ===== */ .hero-slider-shell{ position:relative; z-index:2; width:100%; margin-bottom:44px; } .hero-content{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; } .pill{ display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid rgba(14,79,66,.12); padding:8px 16px 8px 8px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--blue-deep); box-shadow:var(--shadow-sm); margin-bottom:26px; } .pill .dot{ width:22px; height:22px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:11px; } .hero h1{ font-size:clamp(30px,4.2vw,50px); font-weight:800; line-height:1.14; color:var(--blue-deep); margin-bottom:20px; } .hero h1 span{ color:var(--blue-deep); border-bottom:4px solid var(--yellow); padding-bottom:2px; } .hero p.lede{ font-size:16.5px; color:var(--ink-soft); max-width:560px; margin:0 auto 32px; } .hero-cta{ display:flex; gap:14px; margin-bottom:36px; justify-content:center; flex-wrap:wrap; } .hero-stats{ display:flex; gap:0; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:22px 6px; max-width:520px; margin:0 auto; } .hero-stats .stat{ flex:1; text-align:center; padding:0 10px; border-right:1px solid rgba(14,79,66,.08); } .hero-stats .stat:last-child{ border-right:none; } .hero-stats .num{ font-size:24px; font-weight:800; color:var(--blue-deep); } .hero-stats .lbl{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; } /* Kartu akreditasi sekarang duduk tenang di bawah statistik, bukan di atas foto — jadi tidak akan pernah menimpa slider maupun tombol/indikatornya. */ .badge-float{ position:relative; margin:22px auto 0; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:14px 22px; display:inline-flex; align-items:center; gap:14px; } .badge-float .ic{ width:40px; height:40px; border-radius:12px; background:var(--yellow-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .badge-float .t1{ font-size:13px; font-weight:700; color:var(--blue-deep); text-align:left; } .badge-float .t2{ font-size:11.5px; color:var(--ink-soft); text-align:left; } /* ================= SECTION HEAD ================= */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--blue-light); color:var(--blue-deep); font-size:12px; font-weight:700; padding:7px 16px; border-radius:100px; margin-bottom:16px; } .eyebrow.yellow{ background:var(--yellow-light); color:var(--blue-deep); border:1.5px solid var(--yellow-deep); } .section-head{ text-align:center; max-width:640px; margin:0 auto 56px; } .section-head h2{ font-size:clamp(26px,3vw,38px); font-weight:800; color:var(--blue-deep); margin-bottom:14px; } .section-head p{ color:var(--ink-soft); font-size:15.5px; } .section{ padding:96px 0; } .section.tint{ /* Default: section kuning berdiri sendiri di antara section putih — tepi atas & bawah di-fade PANJANG & HALUS ke putih (30% dari tinggi section di tiap sisi) supaya tidak ada garis patahan yang terlihat. */ background:linear-gradient(180deg, #fff 0%, var(--cream) 30%, var(--cream) 70%, #fff 100%); } /* Modifier: dipakai kalau section kuning ini BERSEBELAHAN LANGSUNG dengan section kuning lain (kuning-ketemu-kuning tidak perlu di-fade, karena warnanya sama saja — fade cuma perlu di sisi yang ketemu putih). */ .section.tint.fade-top-only{ background:linear-gradient(180deg, #fff 0%, var(--cream) 30%, var(--cream) 100%); } .section.tint.fade-bottom-only{ background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 70%, #fff 100%); } .section.tint.fade-none{ background:var(--cream); } /* ================= DEKORASI (dihapus) ================= Semua dekorasi .deco-dots (ring outline + corner bracket) sudah dihapus sesuai permintaan. .wrap tetap perlu z-index supaya konten section ini konsisten dengan section lain, meski tidak ada lagi elemen dekorasi di belakangnya. */ .deco-dots{ position:relative; overflow:hidden; } .deco-dots > .wrap{ position:relative; z-index:1; } .section.tint-blue{ background:var(--blue-light); } /* ================= SAMBUTAN ================= */ .sambutan{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center; } .sambutan-photo{ position:relative; } .sambutan-photo .ph{ height:420px; border-radius:var(--radius-lg); box-shadow:var(--shadow); } .sambutan-photo .ring{ display:block; /* dikembalikan lagi — dekorasi khusus section Sambutan, beda dari .ring lain yang tetap dihapus */ position:absolute; width:140px; height:140px; border:18px solid var(--yellow); border-radius:50%; top:-34px; right:-34px; opacity:.6; z-index:-1; } .quote-mark{ font-size:64px; color:var(--yellow); -webkit-text-stroke:2px var(--blue-deep); font-weight:800; line-height:.6; margin-bottom:12px; font-family:'Plus Jakarta Sans',sans-serif;} .sambutan-text h3{ font-size:26px; font-weight:800; color:var(--blue-deep); margin-bottom:16px; } .sambutan-text p{ color:var(--ink-soft); font-size:15px; margin-bottom:14px; } .sambutan-sign{ display:flex; align-items:center; gap:14px; margin-top:24px; } .sambutan-sign .av{ width:52px; height:52px; border-radius:50%; } .sambutan-sign .name{ font-weight:700; color:var(--blue-deep); font-size:14.5px; } .sambutan-sign .role{ font-size:12.5px; color:var(--ink-soft); } /* ================= KEUNGGULAN (numbered value cards) ================= */ .value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .value-card{ background:var(--white); border-radius:var(--radius-md); padding:30px 26px; box-shadow:var(--shadow-sm); position:relative; transition:transform .2s ease; overflow:hidden; } .value-card:hover{ transform:translateY(-6px); } .value-card .n{ position:absolute; top:22px; right:24px; font-size:13px; font-weight:800; color:rgba(14,79,66,.18); } .value-card .ic{ width:52px; height:52px; border-radius:14px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; z-index:1; } .value-card:nth-child(even) .ic{ background:var(--yellow-light); } .value-card h4{ font-size:16px; font-weight:700; color:var(--blue-deep); margin-bottom:8px; position:relative; z-index:1; } .value-card p{ font-size:13.5px; color:var(--ink-soft); position:relative; z-index:1; } /* hiasan blob kuning di pojok kartu — dihapus sesuai permintaan */ /* ================= QUICK PORTAL ================= */ .portal-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .portal-card{ background:var(--white); border-radius:var(--radius-md); padding:26px 18px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; } .portal-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); } .portal-card .ic{ width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; } .portal-card .ic{ background:var(--blue-light); } .portal-card:nth-child(odd) .ic{ background:var(--yellow-light); } .portal-card h4{ font-size:13.5px; font-weight:700; color:var(--blue-deep); } /* ================= MEDIA SOSIAL (homepage, sebelum Berita) ================= */ .medsos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .medsos-card{ background:var(--white); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:16px; transition:transform .2s ease, box-shadow .2s ease; border:1px solid rgba(0,0,61,.06); } .medsos-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); } .medsos-card .ic{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--blue-deep); } .medsos-card .ic svg{ width:24px; height:24px; } .medsos-card .ic.yt{ background:#FFE1E1; color:#D8001B; } .medsos-card .ic.ig{ background:#FFE3F1; color:#C0147A; } .medsos-card .ic.fb{ background:var(--blue-light); color:var(--blue); } .medsos-card h4{ font-size:15px; font-weight:700; color:var(--blue-deep); margin-bottom:2px; } .medsos-card p{ font-size:12.5px; color:var(--ink-soft); } /* ================= PROGRAM KEAHLIAN (image cards) ================= */ .program-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .program-card{ background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; } .program-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); } .program-card .ph{ height:190px; } .program-card .body{ padding:24px; } .program-card .partner-tag{ display:inline-block; font-size:11px; font-weight:700; color:var(--blue-deep); background:var(--white); border:1.5px solid var(--yellow); padding:4px 12px; border-radius:100px; margin-bottom:12px; } .program-card .partner-tag-logo{ display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; min-height:20px; } .program-card .partner-tag-logo .muspla-logo-img{ height:18px; width:auto; max-width:110px; object-fit:contain; display:block; } .program-card h4{ font-size:17px; font-weight:700; color:var(--blue-deep); margin-bottom:8px; } .program-card p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; } /* ---------- Mitra Industri (strip logo, di antara Program & Ekskul) ---------- */ .mitra-strip-section{ /* Sisi atas TIDAK di-fade (bersebelahan langsung dgn section #program yg juga kuning — kuning ketemu kuning tidak perlu gradasi). Sisi bawah di-fade panjang & halus ke putih karena ketemu section putih. */ background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 70%, #fff 100%); } /* Pakai flexbox (bukan grid kolom 1fr) + justify-content:center supaya: 1) tiap kotak logo punya lebar tetap & proporsional (tidak melebihi batas/terlalu lebar), dan 2) kalau jumlah logo ganjil/sisa di baris terakhir, logo tersebut tetap di TENGAH — bukan "molor" memenuhi satu baris penuh. */ .mitra-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:20px; margin-top:8px; max-width:100%; } .mitra-logo-card{ background:var(--white); border-radius:var(--radius-md); border:1px solid rgba(0,0,61,0.08); display:flex; align-items:center; justify-content:center; width:clamp(120px,22vw,160px); height:120px; padding:20px; max-width:100%; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .mitra-logo-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:rgba(0,0,61,0.16); } .mitra-logo-card img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(1) opacity(.72); transition:filter .25s ease; } .mitra-logo-card:hover img{ filter:grayscale(0) opacity(1); } .mitra-logo-card .no-logo{ font-weight:700; font-size:14px; color:var(--ink-soft); text-align:center; } /* Ukuran mitra-logo-card untuk mobile diatur terpusat di blok @media(max-width:640px) bagian bawah supaya tidak dobel/konflik. */ .program-card .more{ font-size:13px; font-weight:700; color:var(--blue); display:flex; align-items:center; gap:6px; } .program-card.wide{ grid-column:span 1; } .program-6{ margin-top:28px; } /* ================= EKSTRAKURIKULER ================= */ .ekskul-scroll{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; } .ekskul-card{ background:var(--white); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-sm); text-align:center; transition:transform .2s ease, box-shadow .2s ease; } .ekskul-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); } .ekskul-card .ic{ width:50px; height:50px; border-radius:14px; background:var(--blue-light); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; } .ekskul-card .ic .muspla-logo-img{ width:30px; height:30px; object-fit:contain; } .ekskul-card:nth-child(3n+2) .ic{ background:var(--yellow-light); } .ekskul-card h4{ font-size:14.5px; font-weight:700; color:var(--blue-deep); margin-bottom:4px; } .ekskul-card .tag{ font-size:11px; color:var(--blue); font-weight:600; } /* ================= BERITA ================= */ .berita-grid{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:26px; } /* Grid arsip (halaman "Lihat Semua Berita") pakai kolom rata, tidak ada kartu besar */ .muspla-berita-archive .berita-grid{ grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .muspla-berita-archive .berita-grid{ grid-template-columns:repeat(2,1fr); overflow:visible; } } @media (max-width:600px){ .muspla-berita-archive .berita-grid{ grid-template-columns:1fr; overflow:visible; } } /* Navigasi halaman (Sebelumnya/Berikutnya) di arsip berita */ .navigation.pagination{ margin-top:44px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } .navigation.pagination .nav-links{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .navigation.pagination a.page-numbers, .navigation.pagination span.page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius:100px; background:var(--white); color:var(--blue-deep); font-weight:700; font-size:14px; box-shadow:var(--shadow-sm); text-decoration:none; } .navigation.pagination span.page-numbers.current{ background:var(--blue-deep); color:#fff; } .navigation.pagination a.page-numbers:hover{ background:var(--blue); color:#fff; } .berita-card{ background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease; } .berita-card:hover{ transform:translateY(-5px); } /* Kotak foto pakai aspect-ratio (bukan height tetap dalam px), supaya proporsinya selalu sebanding di layar mana pun — tidak lonjong panjang ke bawah saat lebar kartu mengecil di HP. */ .berita-card .ph{ aspect-ratio:4/3; height:auto; } .berita-card.feat .ph{ aspect-ratio:16/10; height:auto; } .berita-card .body{ padding:22px; } .berita-card .cat{ font-size:11px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; display:block; } .berita-card h4{ font-size:16px; font-weight:700; color:var(--blue-deep); line-height:1.35; margin-bottom:10px; } .berita-card.feat h4{ font-size:20px; } .berita-card .meta{ font-size:11.5px; color:var(--ink-soft); } /* Khusus tampilan HP DI HOMEPAGE: Berita jadi kartu yang bisa di-slide/geser horizontal (bukan ditumpuk vertikal ke bawah) supaya lebih ringkas dan enak digulir dengan jari. Di desktop/tablet besar tetap grid biasa. Halaman arsip "/berita/" (.muspla-berita-archive) SENGAJA dikecualikan di sini supaya tetap tampil sebagai grid kotak rapi, bukan geser horizontal — lihat blok .muspla-berita-archive di bawah. */ @media(max-width:1000px){ body:not(.muspla-berita-archive) .berita-grid{ display:flex; grid-template-columns:none; overflow-x:auto; gap:16px; padding-bottom:10px; /* Tidak pakai trik margin negatif — cukup andalkan padding bawaan .wrap (32px) supaya kartu pertama & terakhir otomatis punya jarak yang sama dengan konten lain di halaman, tidak nempel ke tepi layar dan tidak dobel/berlebihan. */ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } body:not(.muspla-berita-archive) .berita-grid::-webkit-scrollbar{ height:5px; } body:not(.muspla-berita-archive) .berita-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,61,.15); border-radius:10px; } body:not(.muspla-berita-archive) .berita-card{ flex:0 0 78%; scroll-snap-align:start; } } @media(max-width:640px){ body:not(.muspla-berita-archive) .berita-card{ flex:0 0 82%; } } @media(max-width:480px){ body:not(.muspla-berita-archive) .berita-card{ flex:0 0 86%; } } /* Halaman arsip "/berita/": tetap grid kotak (bukan geser horizontal) di semua ukuran layar, cuma jumlah kolomnya yang menyesuaikan. */ .muspla-berita-archive .berita-card{ width:100%; } /* ================= CTA PPDB BANNER ================= */ .cta-banner{ background:linear-gradient(120deg,var(--blue-deep),var(--blue)); border-radius:var(--radius-lg); padding:56px 60px; display:flex; justify-content:space-between; align-items:center; position:relative; overflow:hidden; color:#fff; border-bottom:6px solid var(--yellow); } .cta-banner .blob{ background:rgba(245,197,24,.35); width:320px; height:320px; border-radius:50%; top:-110px; right:-50px; } .cta-banner::after{ content:''; position:absolute; width:90px; height:90px; background:var(--yellow); opacity:.5; left:8%; bottom:-40px; border-radius:55% 45% 60% 40%/45% 60% 40% 55%; } .cta-banner h3{ font-size:28px; font-weight:800; margin-bottom:10px; position:relative; z-index:1; } .cta-banner p{ opacity:.85; font-size:14.5px; max-width:400px; position:relative; z-index:1; } .cta-banner .btn-primary{ background:var(--yellow) !important; color:var(--blue-deep) !important; position:relative; z-index:1; border-radius:100px !important; } .cta-banner .btn-primary:hover{ background:#FFF066 !important; } /* ================= BANNER TEFA (homepage, versi highlight dari cta-banner) ================= */ .tefa-banner{ background:linear-gradient(120deg,var(--blue),var(--blue-deep)); border-radius:var(--radius-lg); padding:clamp(24px,5vw,52px) clamp(20px,6vw,56px); display:grid; grid-template-columns:1fr auto; gap:clamp(20px,4vw,40px); align-items:center; position:relative; overflow:hidden; color:#fff; border-bottom:6px solid var(--yellow); } .tefa-banner .blob{ background:rgba(245,197,24,.35); width:clamp(160px,40vw,320px); height:clamp(160px,40vw,320px); border-radius:50%; top:-110px; right:-50px; } .tefa-banner::after{ content:''; position:absolute; width:90px; height:90px; background:var(--yellow); opacity:.5; left:8%; bottom:-40px; border-radius:55% 45% 60% 40%/45% 60% 40% 55%; } .tefa-banner-text{ position:relative; z-index:1; max-width:600px; min-width:0; } .tefa-banner-text h3{ font-size:clamp(19px,4.2vw,28px); font-weight:800; margin-bottom:10px; line-height:1.25; } .tefa-banner-text p{ opacity:.85; font-size:clamp(12.5px,2.6vw,14.5px); margin-bottom:clamp(16px,3vw,26px); } .tefa-banner-cta{ display:flex; gap:14px; flex-wrap:wrap; max-width:100%; } .tefa-banner-cta .btn{ font-size:clamp(12px,3.2vw,14px); padding:0 clamp(14px,4vw,26px); height:clamp(38px,9vw,44px); white-space:nowrap; max-width:100%; flex:0 1 auto; } @media(max-width:520px){ /* Di HP sempit, tombol dibuat menumpuk penuh selebar box TeFa supaya tidak menabrak/kepotong tepi kotak (teks tombol "Kunjungi Teaching Factory" cukup panjang untuk lebar layar kecil). */ .tefa-banner-cta{ flex-direction:column; align-items:stretch; } .tefa-banner-cta .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; } } .tefa-banner-stats{ position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.1); border-radius:var(--radius-md); overflow:hidden; min-width:0; width:100%; } .tefa-stat{ padding:clamp(10px,2.4vw,16px) clamp(10px,3vw,22px); border-bottom:1px solid rgba(255,255,255,.14); } .tefa-stat:last-child{ border-bottom:none; } .tefa-stat .num{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(16px,3.6vw,22px); font-weight:800; color:var(--yellow); } .tefa-stat .lbl{ display:block; margin-top:2px; font-size:clamp(9.5px,2vw,12px); color:rgba(255,255,255,.75); font-weight:600; } @media(max-width:900px){ .tefa-banner{ grid-template-columns:1fr; text-align:left; } .tefa-banner-stats{ flex-direction:row; } .tefa-stat{ flex:1; border-bottom:none; border-right:1px solid rgba(255,255,255,.14); text-align:center; min-width:0; } .tefa-stat:last-child{ border-right:none; } } /* ================= FOOTER ================= */ footer{ background:var(--blue-deep); color:#fff; padding-top:0; position:relative; overflow:hidden; } footer::before{ content:''; position:absolute; top:-90px; right:-60px; width:260px; height:260px; background:var(--yellow); opacity:.08; border-radius:55% 45% 60% 40%/45% 60% 40% 55%; z-index:0; } footer .wrap{ position:relative; z-index:1; } footer .footer-inner-top{ padding-top:80px; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); } .footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } .footer-brand .logo{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); border:1.5px solid var(--yellow); color:var(--yellow); display:flex; align-items:center; justify-content:center; overflow:hidden; } .footer-brand .logo .muspla-school-logo-img{ width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; } .footer-brand .logo.logo-img{ width:56px; height:56px; background:none; border:none; border-radius:0; } .footer-brand .logo.logo-img .muspla-school-logo-img{ padding:0; } .footer-brand .name{ font-weight:700; font-size:15px; } footer p{ font-size:13.5px; color:rgba(255,255,255,.65); } footer h5{ font-size:13.5px; font-weight:700; margin-bottom:18px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.9); } footer .flinks li{ margin-bottom:11px; } footer .flinks a{ font-size:13.5px; color:rgba(255,255,255,.7); } footer .flinks a:hover{ color:var(--yellow); } .social-row{ display:flex; gap:10px; margin-top:18px; } .social-row a{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; } .social-row a:hover{ background:var(--yellow); } .social-row a:hover *{ filter: none; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 20px; padding:24px 0; font-size:12.5px; color:rgba(255,255,255,.55); } .footer-kkn-credit{ display:inline-flex; align-items:center; gap:8px; } .footer-kkn-credit img{ height:20px; width:auto; max-width:90px; object-fit:contain; opacity:.9; } @media (max-width:640px){ .footer-bottom{ justify-content:center; text-align:center; } } /* ================= HAMBURGER BUTTON ================= */ .nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1.5px solid rgba(0,0,61,.14); background:var(--white); cursor:pointer; flex-shrink:0; padding:0; } .nav-toggle span{ display:block; width:20px; height:2px; background:var(--blue-deep); border-radius:2px; position:relative; transition:background .2s ease .1s; } .nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:0; width:20px; height:2px; background:var(--blue-deep); border-radius:2px; transition:transform .25s ease, top .25s ease, opacity .2s ease; } .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; } .nav-toggle.is-active span{ background:transparent; } .nav-toggle.is-active span::before{ top:0; transform:rotate(45deg); } .nav-toggle.is-active span::after{ top:0; transform:rotate(-45deg); } /* ================= MOBILE NAV OVERLAY + PANEL ================= */ .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,61,.45); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s; z-index:90; } .nav-overlay.is-active{ opacity:1; visibility:visible; transition:opacity .28s ease; } .mobile-panel{ position:fixed; top:0; right:0; height:100%; width:min(84vw,340px); background:var(--white); z-index:95; box-shadow:-16px 0 40px -12px rgba(0,0,61,.35); padding:26px 26px 32px; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); overflow-y:auto; } .mobile-panel.is-active{ transform:translateX(0); } .mobile-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; gap:10px; } .mobile-panel-head .brand-name{ font-size:14.5px; text-align:right; } /* Tombol "Kembali" (panah + teks) — dibuat jelas terlihat, bukan cuma ikon X kecil, supaya pengguna langsung tahu ini tombol utk menutup/ keluar dari panel navigasi mobile. */ .mobile-panel-close{ display:flex; align-items:center; gap:7px; height:38px; padding:0 14px 0 12px; border-radius:100px; border:1.5px solid rgba(0,0,61,.14); background:var(--cream); cursor:pointer; color:var(--blue-deep); font-size:13.5px; font-weight:700; flex-shrink:0; } .mobile-panel-close svg{ flex-shrink:0; } .mobile-panel-close:hover{ background:var(--blue-light); } .mobile-panel nav{ display:block; } .mobile-panel .btn-primary{ margin-top:26px; justify-content:center; } body.nav-lock{ overflow:hidden; } @media(max-width:1000px){ header.main nav{ display:none; } .nav-toggle{ display:flex; } .sambutan{ grid-template-columns:1fr; } .portal-grid{ grid-template-columns:repeat(2,1fr); } .medsos-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } .cta-banner{ flex-direction:column; gap:24px; text-align:center; align-items:center; } .header-row .btn-primary{ display:none; } /* Keunggulan Pendidikan Kami & Program Keahlian: jadi kartu yang bisa di-slide/geser horizontal di HP & tablet (sama seperti Berita), bukan ditumpuk/grid vertikal. */ .value-grid{ display:flex; grid-template-columns:none; overflow-x:auto; gap:16px; padding-bottom:10px; margin:0 -32px; padding-left:32px; padding-right:32px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .value-grid::-webkit-scrollbar{ height:5px; } .value-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,61,.15); border-radius:10px; } .value-card{ flex:0 0 78%; scroll-snap-align:start; } .program-grid{ display:flex; grid-template-columns:none; overflow-x:auto; gap:16px; padding-bottom:10px; margin:0 -32px; padding-left:32px; padding-right:32px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .program-grid::-webkit-scrollbar{ height:5px; } .program-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,61,.15); border-radius:10px; } .program-card{ flex:0 0 78%; scroll-snap-align:start; } } @media(max-width:640px){ .portal-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } .footer-grid{ grid-template-columns:1fr; } .hero-stats{ flex-wrap:wrap; } .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ justify-content:center; } .badge-float{ display:flex; text-align:left; } /* Kartu Ekstrakurikuler ikut 2 kolom rapi (bukan minimal 200px yang cuma muat 1 kolom di layar sempit). */ .ekskul-scroll{ grid-template-columns:repeat(2,1fr); gap:14px; } .ekskul-card{ padding:16px 14px; } .value-grid, .program-grid{ margin:0 -20px; padding-left:20px; padding-right:20px; } .value-card{ padding:22px 20px; flex-basis:82%; } .portal-card{ padding:18px 12px; } .program-card{ flex-basis:82%; } .program-card .ph{ height:170px; } .sambutan-photo .ph{ height:260px; } /* Kemitraan: logo dibuat lebih kecil (tetap otomatis di tengah lewat flexbox di atas, tidak perlu atur jumlah kolom manual lagi). */ .mitra-grid{ gap:10px; } .mitra-logo-card{ width:clamp(90px,26vw,120px); height:84px; padding:12px; } } @media(max-width:480px){ .sambutan-photo .ph{ height:220px; } .mitra-logo-card{ width:clamp(84px,28vw,104px); height:74px; padding:10px; } .value-card{ flex-basis:86%; } .program-card{ flex-basis:86%; } } /* ================= HERO SLIDER ================= */ .hero-slider{ position:relative; width:100%; height:560px; border-radius:0; box-shadow:none; overflow:hidden; } .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; } .hero-slide.is-active{ opacity:1; z-index:1; } .hero-slide .ph{ height:100%; border-radius:0; } .hero-slide .caption{ position:absolute; left:0; right:0; bottom:0; z-index:2; background:linear-gradient(0deg, rgba(0,0,139,0.75) 0%, rgba(0,0,139,0) 100%); color:#fff; padding:70px 26px 30px; font-size:14.5px; font-weight:600; } @media (max-width:768px){ .hero-slider{ height:320px; } .hero-slide .caption{ padding:46px 18px 18px; font-size:13px; } } @media (max-width:480px){ .hero-slider{ height:240px; } } .hero-slider-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; } .hero-slider-dots button{ width:9px !important; height:9px !important; min-width:0 !important; border-radius:50% !important; background:rgba(255,255,255,.55); border:none; cursor:pointer; padding:0 !important; margin:0; box-sizing:border-box; line-height:1; box-shadow:none; transition:background .2s ease, width .2s ease; } .hero-slider-dots button.is-active{ background:var(--yellow); width:24px !important; border-radius:6px !important; } .hero-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:38px !important; height:38px !important; min-width:0 !important; max-width:38px; border-radius:50% !important; box-sizing:border-box; line-height:1; padding:0 !important; margin:0; background:rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; color:var(--blue-deep); font-size:17px; box-shadow:var(--shadow-sm); transition:background .2s ease, color .2s ease; } .hero-slider-arrow.prev{ left:14px; } .hero-slider-arrow.next{ right:14px; } .hero-slider-arrow:hover{ background:var(--blue-deep); color:#fff; } /* ================= FOOTER CONTACT + WA MESSAGE BOX ================= */ .footer-contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:rgba(255,255,255,0.04); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:56px; border:1px solid rgba(255,255,255,.12); } .footer-contact-info{ padding:40px; } .footer-contact-info h3{ font-size:20px; font-weight:800; color:#fff; margin-bottom:18px; } .fc-item{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; } .fc-item .ic{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); border:1.5px solid var(--yellow); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--yellow); } .fc-item .t{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.55); margin-bottom:3px; } .fc-item .v{ font-size:14px; color:#fff; line-height:1.5; } .footer-wa-box{ background:var(--white); padding:40px; color:var(--blue-deep); position:relative; overflow:hidden; } .footer-wa-box::before{ content:''; position:absolute; width:130px; height:130px; background:var(--yellow); opacity:.14; border-radius:58% 42% 63% 37%/45% 55% 45% 55%; top:-40px; left:-40px; z-index:0; } .footer-wa-box > *{ position:relative; z-index:1; } .footer-wa-box h3{ font-size:19px; font-weight:800; margin-bottom:6px; color:var(--blue-deep); } .footer-wa-box p{ font-size:13px; color:var(--ink-soft); margin-bottom:22px; } .wa-form{ display:flex; flex-direction:column; gap:12px; } .wa-form input, .wa-form textarea{ background:var(--cream); border:1.5px solid var(--blue-light); border-radius:10px; padding:12px 14px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); } .wa-form input:focus, .wa-form textarea:focus{ outline:none; border-color:var(--yellow); } .wa-form input::placeholder, .wa-form textarea::placeholder{ color:var(--ink-soft); } .wa-form button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--blue-deep); color:#fff; border:none; padding:14px 20px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; margin-top:4px; transition:background .2s ease; } .wa-form button:hover{ background:#000027; } .wa-form .note{ font-size:11px; color:var(--ink-soft); margin-top:2px; } @media(max-width:900px){ .footer-contact-wrap{ grid-template-columns:1fr; } } @media(max-width:640px){ /* Padding dikecilkan supaya kotak kontak & form WA di HP tidak terasa kosong/lonjong terlalu tinggi. */ .footer-contact-info, .footer-wa-box{ padding:26px 22px; } .footer-contact-info h3, .footer-wa-box h3{ font-size:18px; } .fc-item{ margin-bottom:16px; } } /* ================= HALAMAN DALAM (Profil, Program Keahlian, dll) ================= */ .page-hero{ background:var(--blue-deep); color:#fff; padding:56px 0 64px; position:relative; overflow:hidden; } .page-hero::after{ content:''; position:absolute; top:-50px; right:-70px; width:220px; height:220px; background:var(--yellow); opacity:.18; border-radius:60% 40% 55% 45%/40% 60% 40% 60%; } .page-hero::before{ content:''; position:absolute; bottom:-60px; left:6%; width:140px; height:140px; background:var(--yellow); opacity:.12; border-radius:45% 55% 40% 60%/55% 45% 55% 45%; } .page-breadcrumb{ font-size:13px; color:rgba(255,255,255,.65); margin-bottom:14px; position:relative; z-index:1; } .page-breadcrumb a{ color:rgba(255,255,255,.85); } .page-breadcrumb a:hover{ color:var(--yellow); } .page-breadcrumb span{ margin:0 8px; } .page-hero h1{ font-size:clamp(28px,3.6vw,42px); font-weight:800; position:relative; z-index:1; } .page-hero-lede{ margin-top:12px; color:rgba(255,255,255,.8); max-width:560px; position:relative; z-index:1; } .page-content-grid{ display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; } .entry-content h2{ font-size:24px; font-weight:800; color:var(--blue-deep); margin:34px 0 14px; } .entry-content h3{ font-size:19px; font-weight:700; color:var(--blue-deep); margin:26px 0 10px; } .entry-content p{ font-size:15px; color:var(--ink-soft); margin-bottom:16px; } .entry-content ul, .entry-content ol{ margin:0 0 16px 22px; color:var(--ink-soft); font-size:15px; } .entry-content li{ margin-bottom:6px; } .entry-content img{ border-radius:var(--radius-md); box-shadow:var(--shadow-sm); margin:20px 0; } .entry-content a{ color:var(--blue); font-weight:600; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; } .entry-content blockquote{ background:var(--cream); padding:16px 22px; border-radius:10px; position:relative; font-style:italic; color:var(--blue-deep); margin:20px 0 20px 6px; } .entry-content blockquote::before{ content:''; position:absolute; top:-8px; left:-6px; width:18px; height:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F5C518' d='M12 1.5 L14.6 9.4 L22.5 12 L14.6 14.6 L12 22.5 L9.4 14.6 L1.5 12 L9.4 9.4 Z'/%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; } .entry-content table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; } .entry-content table th{ background:var(--blue-deep); color:#fff; padding:10px 14px; text-align:left; } .entry-content table td{ padding:10px 14px; border-bottom:1px solid var(--blue-light); } .page-sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:100px; } .sidebar-card{ background:var(--white); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); border-top:4px solid var(--blue-deep); } .sidebar-card.alt{ position:relative; overflow:hidden; } .sidebar-card.alt::after{ content:''; position:absolute; width:60px; height:60px; background:var(--yellow); opacity:.16; top:-18px; right:-18px; border-radius:55% 45% 60% 40%/45% 55% 45% 55%; } .sidebar-card h4{ font-size:15px; font-weight:800; color:var(--blue-deep); margin-bottom:8px; } .sidebar-card p{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; } .sidebar-links li{ padding:9px 0; border-bottom:1px dashed var(--blue-light); font-size:13.5px; } .sidebar-links li:last-child{ border-bottom:none; } .sidebar-links a{ color:var(--ink); font-weight:500; } .sidebar-links a:hover{ color:var(--blue-deep); } @media(max-width:900px){ .page-content-grid{ grid-template-columns:1fr; } .page-sidebar{ position:static; } } /* ================= NAVBAR: LOGO LEBIH KE KIRI, MENU/TOMBOL LEBIH KE KANAN ================= */ /* .header-row sebelumnya ikut memakai lebar & padding bawaan ".wrap" (max-width:1220px; padding:0 32px) — sama seperti section konten biasa. Supaya logo+nama sekolah bisa lebih menempel ke kiri dan menu+tombol "Daftar SPMB" lebih menempel ke kanan (menyisakan lebih banyak ruang kosong di tengah), navbar dibuat memakai lebar lebih besar & padding lebih kecil daripada wrap biasa — TAPI hanya di layar desktop (kalau di HP tetap seperti semula, supaya menu hamburger tidak jadi terlalu mepet ke pinggir layar). */ @media (min-width:1001px){ .header-row{ max-width:1520px; padding-left:20px; padding-right:20px; } }