/* ========================================================= RuangDKV — Design tokens Palette: deep studio navy + violet→pink gradient (DKV identity) Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data) Signature: print "registration marks" (✛) at card corners — a nod to production/print marks used in graphic design work. ========================================================= */ :root{ --bg: #090c14; --bg-soft: #0c1120; --surface: #121a2c; --surface-2: #182238; --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.14); --text: #f2f4fa; --text-muted:#8b93ac; --text-dim: #5c6480; --violet: #a855f7; --pink: #ec4899; --cyan: #38bdf8; --teal: #16c79a; --amber: #fbbf24; --red: #f87171; --gradient: linear-gradient(135deg, var(--violet) 0%, var(--pink) 100%); --gradient-soft: linear-gradient(135deg, rgba(168,85,247,.14), rgba(236,72,153,.14)); --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --shadow: 0 20px 60px -20px rgba(0,0,0,.6); --shadow-glow: 0 10px 40px -8px rgba(168,85,247,.35); --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* --------------------------------------------------------- Mode terang — dipakai di Admin Panel & Portal Siswa lewat tombol toggle (atribut data-theme="light" di ). --------------------------------------------------------- */ :root[data-theme="light"]{ --bg: #f4f5fa; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #eef0f8; --border: rgba(20,24,45,.13); --border-2: rgba(20,24,45,.2); --text: #171b2e; --text-muted:#5c6178; --text-dim: #8a8fa3; --shadow: 0 12px 28px -12px rgba(30,34,60,.14); --shadow-glow: 0 10px 30px -8px rgba(168,85,247,.22); } /* Warna aksen (violet/pink/cyan/teal/amber/merah) sengaja terang/menyala supaya menonjol di atas latar gelap. Begitu dipakai sebagai TEKS di mode terang (badge status, ikon, label wajib isi, dsb), versi terang itu pudar & susah dibaca di atas putih — jadi di mode terang dipakai versi yang lebih gelap dari warna yang sama. Ini level token, jadi otomatis berlaku ke SEMUA badge/ikon/alert yang memakainya, tidak perlu di-override satu- satu per komponen. Catatan: --violet & --pink di sini HANYA dipakai untuk teks/ikon/border; tombol ber-gradient (var(--gradient)) tetap didefinisikan terpisah di bawah supaya warnanya tetap cerah & konsisten dengan brand di kedua mode. */ :root[data-theme="light"]{ --violet: #7e22ce; --pink: #be185d; --cyan: #0369a1; --teal: #0d6b5f; --amber: #92400e; --red: #b91c1c; --gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); } :root[data-theme="light"] .brand{ color:var(--text); } :root[data-theme="light"] .dropdown-menu, :root[data-theme="light"] .side-nav-dropdown{ box-shadow:0 12px 28px rgba(20,24,45,.12); } :root[data-theme="light"] .panel, :root[data-theme="light"] .filter-panel, :root[data-theme="light"] .stat-card, :root[data-theme="light"] .card{ box-shadow:var(--shadow); } :root[data-theme="light"] .panel-head, :root[data-theme="light"] thead tr{ background:var(--surface-2); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.dkv-ambient{ background-image: radial-gradient(60vw 60vw at 85% -10%, rgba(168,85,247,.16), transparent 60%), radial-gradient(50vw 50vw at -10% 25%, rgba(236,72,153,.12), transparent 60%), radial-gradient(40vw 40vw at 50% 100%, rgba(56,189,248,.08), transparent 60%); background-attachment:fixed; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; } p{ margin:0 0 1em; color:var(--text-muted); } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ::selection{ background:var(--violet); color:#fff; } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; } .container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); background:rgba(56,189,248,.09); border:1px solid rgba(56,189,248,.25); padding:6px 14px; border-radius:99px; } .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); } .gradient-text{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--gradient); color:#fff; box-shadow:var(--shadow-glow); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -10px rgba(236,72,153,.5); } .btn-dark{ background:var(--surface-2); color:var(--text); border-color:var(--border-2); } .btn-dark:hover{ background:#212c48; border-color:var(--violet); } .btn-outline{ background:transparent; color:var(--text); border-color:var(--border-2); } .btn-outline:hover{ border-color:var(--cyan); color:var(--cyan); } .btn-sm{ padding:9px 16px; font-size:13px; border-radius:9px; } .btn-block{ width:100%; } .btn-danger{ background:rgba(248,113,113,.12); color:var(--red); border-color:rgba(248,113,113,.35); } .btn-danger:hover{ background:rgba(248,113,113,.22); } .btn-teal{ background:rgba(22,199,154,.14); color:var(--teal); border-color:rgba(22,199,154,.35); } .btn-teal:hover{ background:rgba(22,199,154,.24); } .btn:disabled{ opacity:.5; cursor:not-allowed; } /* ---------- Navbar ---------- */ .navbar{ position:sticky; top:0; z-index:100; background:rgba(10,13,24,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border-2); } .navbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; } .brand-mark{ width:38px; height:38px; border-radius:10px; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex-shrink:0; box-shadow:var(--shadow-glow); } .brand small{ display:block; font-family:var(--font-body); font-weight:500; font-size:10.5px; color:#9aa3c2; letter-spacing:.03em; } .nav-links{ display:flex; align-items:center; gap:2px; } .nav-links a{ position:relative; display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:#c4cbe0; padding:10px 16px; border-radius:9px; transition:.18s ease; } .nav-links a .nav-ic{ font-size:15px; line-height:1; opacity:.75; transition:opacity .18s ease, transform .18s ease; } .nav-links a:hover .nav-ic, .nav-links a.active .nav-ic{ opacity:1; transform:translateY(-1px); } .nav-links a::after{ content:''; position:absolute; left:16px; right:16px; bottom:5px; height:2px; border-radius:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; } .nav-links a:hover{ color:#fff; background:var(--surface-2); } .nav-links a.active{ color:#fff; background:var(--gradient-soft); } .nav-links a.active::after{ transform:scaleX(1); } .nav-actions{ display:flex; gap:10px; align-items:center; } .nav-actions-login{ background:var(--gradient) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 8px 24px -8px rgba(236,72,153,.45); } .nav-actions-login:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -8px rgba(236,72,153,.6); } .nav-toggle{ display:none; background:none; border:1px solid var(--border-2); color:var(--text); width:42px; height:42px; border-radius:10px; } .nav-links-divider, .nav-links a.nav-links-cta{ display:none; } @media (max-width:900px){ .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--bg-soft); border-bottom:1px solid var(--border); padding:10px; display:none; max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .nav-links.open{ display:flex; } .nav-links a{ padding:13px 16px; } .nav-toggle{ display:flex; align-items:center; justify-content:center; } .nav-actions-login{ display:none; } .nav-links-divider{ display:block; height:1px; background:var(--border); margin:10px 6px; } .nav-links a.nav-links-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 6px; padding:12px 16px; background:var(--gradient); color:#fff; font-weight:600; border-radius:11px; } .nav-links a.nav-links-cta:hover{ background:var(--gradient); color:#fff; } .nav-links a.nav-links-cta-siswa{ background:transparent; color:var(--text); border:1px solid var(--border-2); } .nav-links a.nav-links-cta-siswa:hover, .nav-links a.nav-links-cta-siswa.active{ background:var(--surface-2); color:#fff; } } /* ---------- Registration-mark signature ---------- */ .crop{ position:relative; } .crop::before,.crop::after, .crop .crop-tl,.crop .crop-br{ content:''; } .crop-mark{ position:absolute; width:16px; height:16px; opacity:.55; pointer-events:none; } .crop-mark::before,.crop-mark::after{ content:''; position:absolute; background:var(--violet); } .crop-mark::before{ width:100%; height:1px; top:50%; left:0; } .crop-mark::after{ width:1px; height:100%; left:50%; top:0; } .crop-mark.tl{ top:-8px; left:-8px; } .crop-mark.tr{ top:-8px; right:-8px; } .crop-mark.bl{ bottom:-8px; left:-8px; } .crop-mark.br{ bottom:-8px; right:-8px; } /* ---------- Hero ---------- */ .hero{ padding:110px 0 70px; text-align:center; position:relative; } .hero-grid-bg{ position:absolute; inset:0; top:0; height:640px; z-index:-1; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 60% 55% at 50% 0%, black 20%, transparent 75%); opacity:.5; } .hero h1{ font-size:clamp(34px,5.4vw,60px); max-width:760px; margin:22px auto 18px; } .hero .lead{ max-width:600px; margin:0 auto 34px; font-size:16.5px; } .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; } .hero-floaters{ position:relative; max-width:980px; margin:0 auto; height:190px; pointer-events:none; } .floater{ position:absolute; background:var(--surface); border:1px solid var(--border-2); border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; box-shadow:var(--shadow); animation:float 6s ease-in-out infinite; pointer-events:auto; } .floater .ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; } @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} } @media (prefers-reduced-motion:reduce){ .floater{ animation:none; } html{ scroll-behavior:auto; } } @media (max-width:900px){ .hero-floaters{ display:none; } } /* ---------- Sections / cards ---------- */ .section{ padding:76px 0; } .section-head{ text-align:center; max-width:620px; margin:0 auto 44px; } .section-head h2{ font-size:clamp(26px,3.4vw,36px); } .grid{ display:grid; gap:22px; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-2{ grid-template-columns:repeat(2,1fr); } @media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; position:relative; transition:.2s ease; overflow:hidden; } .card:hover{ border-color:var(--border-2); transform:translateY(-3px); } .card .icon-box{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:16px; } .card h3{ font-size:17px; margin-bottom:8px; line-height:1.35; } .card p{ font-size:14px; margin:0; } .icon-teal{ background:rgba(22,199,154,.14); color:var(--teal); } .icon-violet{ background:rgba(168,85,247,.14); color:var(--violet); } .icon-pink{ background:rgba(236,72,153,.14); color:var(--pink); } .icon-cyan{ background:rgba(56,189,248,.14); color:var(--cyan); } .icon-amber{ background:rgba(251,191,36,.14); color:var(--amber); } /* content card (materi/video/kuis listing) */ .content-card{ display:flex; flex-direction:column; height:100%; } .content-card .thumb{ height:130px; border-radius:12px; margin:-26px -26px 16px; background:var(--gradient-soft); display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--violet); border-bottom:1px solid var(--border); overflow:hidden; position:relative; } .content-card .thumb.thumb-img{ background-size:cover; background-position:center; font-size:0; } .content-card .tags{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .content-card .foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; } .badge{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.03em; padding:5px 10px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; } .badge-violet{ background:rgba(168,85,247,.14); color:var(--violet); border:1px solid rgba(168,85,247,.3); } .badge-cyan{ background:rgba(56,189,248,.14); color:var(--cyan); border:1px solid rgba(56,189,248,.3); } .badge-teal{ background:rgba(22,199,154,.14); color:var(--teal); border:1px solid rgba(22,199,154,.3); } .badge-amber{ background:rgba(251,191,36,.14); color:var(--amber); border:1px solid rgba(251,191,36,.3); } .badge-red{ background:rgba(248,113,113,.14); color:var(--red); border:1px solid rgba(248,113,113,.3); } .badge-gray{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border-2); } /* ---------- Forms ---------- */ .form-group{ margin-bottom:20px; } label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--text); } label .req{ color:var(--pink); } label .hint{ font-weight:400; color:var(--text-dim); font-size:12px; } input[type=text],input[type=password],input[type=url],input[type=search], select, textarea{ width:100%; background:var(--bg-soft); border:1px solid var(--border-2); color:var(--text); padding:13px 15px; border-radius:11px; font-family:var(--font-body); font-size:14.5px; transition:.15s; } input[type=file]{ width:100%; background:var(--bg-soft); border:1px dashed var(--border-2); color:var(--text-muted); padding:13px 15px; border-radius:11px; font-size:13.5px; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(168,85,247,.16); } textarea{ resize:vertical; min-height:100px; } .form-hint{ font-size:12px; color:var(--text-dim); margin-top:6px; } .input-icon{ position:relative; } .input-icon .ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:14px; } .input-icon input, .input-icon select{ padding-left:38px; } .form-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px; } /* Kontrol pagination di halaman daftar (siswa, materi, dst.) */ .pagination{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 22px; border-top:1px solid var(--border); } .pagination .page-btn{ font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; border:1px solid var(--border); color:var(--text); text-decoration:none; background:var(--surface); } .pagination .page-btn:hover{ border-color:var(--accent,#38bdf8); color:var(--accent,#38bdf8); } .pagination .page-btn.disabled{ opacity:.4; cursor:not-allowed; } .pagination .page-info{ font-size:12.5px; color:var(--text-dim); } /* Konten materi hasil rich-text editor (admin) */ .materi-konten{ color:var(--text); line-height:1.75; font-size:15.5px; } .materi-konten h1,.materi-konten h2,.materi-konten h3{ color:#fff; margin:22px 0 10px; line-height:1.3; } .materi-konten h1{ font-size:26px; } .materi-konten h2{ font-size:22px; } .materi-konten h3{ font-size:18px; } .materi-konten p{ margin:0 0 14px; } .materi-konten ul,.materi-konten ol{ margin:0 0 14px; padding-left:22px; } .materi-konten li{ margin-bottom:6px; } .materi-konten a{ color:var(--accent,#38bdf8); text-decoration:underline; } .materi-konten img{ max-width:100%; border-radius:12px; border:1px solid var(--border); margin:12px 0; display:block; } .materi-konten blockquote{ border-left:3px solid var(--accent,#38bdf8); margin:0 0 14px; padding:6px 16px; color:var(--text-dim); font-style:italic; } .materi-konten pre,.materi-konten code{ background:rgba(255,255,255,.06); border-radius:8px; padding:2px 6px; font-family:'JetBrains Mono',monospace; font-size:13.5px; } .materi-konten pre{ padding:14px; overflow-x:auto; margin:0 0 14px; } .materi-konten pre code{ background:none; padding:0; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:600px){ .form-row{ grid-template-columns:1fr; } } .alert{ padding:14px 18px; border-radius:12px; font-size:14px; margin-bottom:20px; line-height:1.6; } .alert-success{ background:rgba(22,199,154,.12); border:1px solid rgba(22,199,154,.3); color:#7dead1; } .alert-error{ background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:#fda4a4; } /* ---------- Footer ---------- */ .footer{ border-top:1px solid var(--border); padding:50px 0 28px; text-align:center; } .footer-brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; margin-bottom:10px; } .footer p{ font-size:13.5px; margin:4px 0; } .footer .copyright{ font-size:12px; color:var(--text-dim); margin-top:22px; } /* ---------- Misc ---------- */ .empty-state{ text-align:center; padding:70px 20px; color:var(--text-muted); } .empty-state .ic{ font-size:38px; margin-bottom:14px; opacity:.7; } .pill-tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; } .pill-tab{ padding:10px 20px; border-radius:99px; border:1px solid var(--border-2); font-size:13.5px; font-weight:600; color:var(--text-muted); background:var(--surface); transition:border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; } .pill-tab:hover:not(.active){ border-color:var(--violet); color:var(--text); } .pill-tab.active{ background:var(--gradient); color:#fff; border-color:transparent; box-shadow:0 6px 18px -4px rgba(168,85,247,.55); transform:translateY(-1px); } /* Panel yang mengelompokkan filter kelas + mapel di halaman publik (Materi, Video, Kuis, LKPD) supaya rapi jadi satu blok, bukan dua baris pill yang menempel begitu saja. */ .filter-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px 18px; margin-bottom:40px; } .filter-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; } .filter-row .pill-tab:not(.active){ background:var(--bg-soft); } .filter-row + .filter-row{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); } .filter-row-sub .pill-tab{ padding:7px 15px; font-size:12px; font-weight:500; color:var(--text-dim); } .filter-row-sub .pill-tab.active{ color:#fff; font-weight:600; } /* Chip "+N lainnya" — dipakai kalau daftar kelas/mapel kepanjangan untuk ditampilkan langsung semua (lihat render_filter_pills() di functions.php). Menumpang komponen .dropdown yang sama dengan menu profil, jadi otomatis ke-handle oleh script dropdown-trigger yang sudah ada di main.js. */ .dropdown{ position:relative; } .filter-more-trigger{ cursor:pointer; color:var(--text-dim); font-family:inherit; } .filter-more-trigger:hover{ color:var(--text); } .dropdown-menu{ position:absolute; top:calc(100% + 8px); right:0; left:auto; min-width:190px; max-width:min(240px, calc(100vw - 48px)); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:0 16px 32px rgba(0,0,0,.35); display:none; flex-direction:column; gap:2px; z-index:50; } .dropdown-menu.open{ display:flex; } .dropdown-menu a{ padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text); font-weight:500; } .dropdown-menu a:hover{ background:var(--bg-soft); color:var(--violet); } .dropdown-menu a.active{ background:var(--gradient-soft); color:var(--violet); font-weight:600; } code, .mono{ font-family:var(--font-mono); } /* ---------- Kumpul Tugas — modern form ---------- */ @keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(168,85,247,.45); } 50%{ box-shadow:0 0 0 14px rgba(168,85,247,0); } } @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } .task-hero-icon{ width:64px; height:64px; margin:0 auto 18px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; background:var(--gradient); animation:pulseGlow 2.4s ease-in-out infinite, floatY 3.6s ease-in-out infinite; } .task-progress-wrap{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .task-progress-track{ flex:1; height:8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; } .task-progress-bar{ height:100%; width:0%; border-radius:99px; background:var(--gradient); transition:width .35s ease; } .task-progress-label{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); white-space:nowrap; min-width:38px; text-align:right; } .form-panel-modern{ position:relative; overflow:hidden; } .form-panel-modern::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); } .form-section{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px dashed var(--border); } .form-section:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; } .form-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } .step-num{ width:26px; height:26px; flex:0 0 26px; border-radius:8px; background:var(--gradient-soft); border:1px solid rgba(168,85,247,.35); color:var(--violet); font-family:var(--font-mono); font-weight:600; font-size:12.5px; display:flex; align-items:center; justify-content:center; } .form-section-head h3{ font-size:14.5px; font-family:var(--font-body); font-weight:700; color:var(--text); margin:0; } .form-section-head span.section-hint{ font-size:12px; color:var(--text-dim); font-weight:400; } .link-type-pills{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 14px; } .link-type-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:7px 13px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border-2); color:var(--text-muted); line-height:1; } .link-type-pill.drive{ background:rgba(22,199,154,.12); border-color:rgba(22,199,154,.3); color:#7dead1; } .link-type-pill.canva{ background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.3); color:#d4b3fb; } .link-type-pill.youtube{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.3); color:#fda4a4; } .char-counter{ text-align:right; font-size:11.5px; color:var(--text-dim); margin-top:6px; font-family:var(--font-mono); } .char-counter.warn{ color:var(--amber); } .btn-shimmer{ position:relative; overflow:hidden; } .btn-shimmer::after{ content:''; position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); } .btn-shimmer:hover::after{ animation:shimmerSweep 1s ease; } @keyframes shimmerSweep{ from{ left:-60%; } to{ left:120%; } } .field-ok{ border-color:rgba(22,199,154,.55) !important; } /* ---------- Responsive (mobile) ---------- */ @media (max-width:640px){ .section{ padding:52px 0; } .hero{ padding:80px 0 50px; } .hero .lead{ font-size:15px; } .hero-actions .btn{ width:100%; } .section-head{ margin-bottom:32px; } .form-panel{ padding:22px 18px; border-radius:16px; } .task-hero-icon{ width:54px; height:54px; font-size:22px; border-radius:16px; } h1{ font-size:24px; } .form-section{ padding-bottom:20px; margin-bottom:20px; } .form-section-head h3{ font-size:13.5px; } .link-type-pills{ gap:6px; } .link-type-pill{ font-size:11px; padding:6px 11px; } .card{ padding:20px; } .grid{ gap:16px; } .navbar-inner{ padding:13px 16px; } .container{ padding:0 16px; } .btn{ font-size:14px; padding:12px 20px; } .filter-panel{ padding:16px 14px 12px; } } @media (max-width:380px){ .form-panel{ padding:18px 14px; } .link-type-pills{ flex-direction:column; align-items:flex-start; } } /* --------------------------------------------------------------- Modal konfirmasi kustom (pengganti window.confirm() bawaan browser yang tampilannya polos/kaku) — dipakai lewat data-confirm di seluruh admin panel & portal siswa. Lihat assets/js/main.js. --------------------------------------------------------------- */ .confirm-overlay{ position:fixed; inset:0; z-index:10000; background:rgba(4,6,12,.65); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; visibility:hidden; } .confirm-overlay.show{ opacity:1; pointer-events:auto; visibility:visible; } .confirm-modal{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 24px 22px; text-align:center; transform:translateY(10px) scale(.97); transition:transform .18s ease; } .confirm-overlay.show .confirm-modal{ transform:translateY(0) scale(1); } .confirm-modal .ic{ width:52px; height:52px; margin:0 auto 14px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.3); } .confirm-modal h3{ font-size:16.5px; font-weight:600; margin-bottom:8px; color:var(--text); } .confirm-modal p{ font-size:13.5px; color:var(--text-dim); line-height:1.55; margin-bottom:22px; } .confirm-modal-actions{ display:flex; gap:10px; } .confirm-modal-actions .btn{ flex:1; justify-content:center; }