*{box-sizing:border-box}body{margin:0;color:#17263a;font-family:'DM Sans',sans-serif}a{text-decoration:none;color:inherit}.top{height:76px;border-bottom:1px solid #e8edf3;background:#fff;position:sticky;top:0;z-index:10}.navwrap{max-width:1160px;height:100%;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.brand{font:700 21px 'Space Grotesk';display:flex;gap:10px;align-items:center}.peng{background:#eaf0ff;border-radius:12px;padding:9px;font-size:23px}.blue{color:#3869f5}.brand small{display:block;font:700 8px 'DM Sans';letter-spacing:2px;color:#8996a7}.nav{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:600;color:#536176}.nav a:hover{color:#3869f5}.cta,.heroform button{background:#3869f5;color:white;border:0;border-radius:10px;padding:13px 18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.drop{position:relative}.drop button{border:0;background:none;font:inherit;color:inherit;cursor:pointer}.drop div{display:none;position:absolute;top:22px;left:-12px;background:white;padding:10px;border:1px solid #e5eaf0;border-radius:12px;min-width:170px;box-shadow:0 15px 30px #14243a18}.drop:hover div,.drop:focus-within div{display:block}.drop a{display:block;padding:10px}.toggle{display:none}.hero{background:#0d192b;color:white;min-height:520px;padding:65px max(calc((100vw - 1100px)/2),24px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;overflow:hidden}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#91b2ff;margin-bottom:18px}.dark{color:#3869f5}.hero h1,.pagehero h1,.detailhero h1{font:700 clamp(43px,6vw,68px)/1.05 'Space Grotesk';letter-spacing:-2px;margin:0 0 20px}.hero h1 em,.pagehero h1 em,.banner h2 em,.section h2 em{color:#91b2ff;font-style:normal}.hero p{color:#b7c4d6;line-height:1.8;max-width:560px}.heroform{display:flex;background:#fff;border-radius:12px;padding:7px;max-width:570px;margin-top:28px;color:#77869a}.heroform span{font-size:26px;padding:8px}.heroform input{border:0;outline:0;flex:1;min-width:0;font:14px 'DM Sans'}.heroform button{white-space:nowrap}.meta{font-size:11px;color:#8fa0b7;margin-top:22px}.heroart{height:350px;display:grid;place-items:center;position:relative}.ring{position:absolute;width:300px;height:300px;border:1px solid #ffffff24;border-radius:50%;box-shadow:0 0 0 50px #ffffff08,0 0 0 100px #ffffff05}.tux{font-size:150px;z-index:1;filter:drop-shadow(0 20px 20px #0007)}.float{position:absolute;background:#ffffff16;border:1px solid #ffffff28;border-radius:12px;padding:13px 17px;font-size:12px;backdrop-filter:blur(10px)}.float small{display:block;color:#adbbcf;font-size:10px;margin-top:4px}.f1{top:32px;right:5px}.f2{bottom:38px;left:0}.f2 b{font:700 23px 'Space Grotesk';color:#a5c0ff}.stats{max-width:1080px;margin:auto;padding:27px 20px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #e9edf2}.stats div{text-align:center;border-right:1px solid #e9edf2}.stats div:last-child{border:0}.stats b{display:block;font:700 25px 'Space Grotesk'}.stats small{font-size:11px;color:#8290a2}.section{max-width:1160px;margin:auto;padding:75px 22px}.head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.section h2,.banner h2{font:700 37px 'Space Grotesk';letter-spacing:-1px;margin:0 0 10px}.section p,.pagehero p{color:#718096;line-height:1.8}.link{color:#3869f5;font-size:13px;font-weight:700}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.card{border:1px solid #e6ebf1;border-radius:14px;padding:15px;display:flex;align-items:center;gap:12px;min-width:0;transition:.2s}.card:hover{transform:translateY(-3px);border-color:#b8caff;box-shadow:0 12px 28px #162b4c0d}.logo{width:43px;height:43px;flex-shrink:0;border-radius:12px;background:linear-gradient(135deg,#eaf0ff,#e0f8ef);display:grid;place-items:center;color:#3458ad;font:700 13px 'Space Grotesk'}.card div{min-width:0;flex:1}.card b{display:block;font:700 14px 'Space Grotesk';margin-bottom:5px}.card small{display:block;color:#8491a3;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.card>span:last-child{color:#9aa7b7}.banner{background:#172c4b;color:white;padding:55px max(calc((100vw - 1100px)/2),24px);display:flex;align-items:center;justify-content:space-between;gap:25px}.banner p{color:#b7c4d6;max-width:550px}.lightbtn{background:#fff;color:#1c355b;padding:14px 18px;border-radius:10px;font-weight:700;white-space:nowrap}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}.features article{border-top:1px solid #e5eaf0;padding-top:20px}.features b{font-size:10px;color:#3869f5;letter-spacing:1px}.features h3{font:700 20px 'Space Grotesk'}.features p{font-size:13px}.pagehero{background:#f5f7fb;padding:68px max(calc((100vw - 1100px)/2),24px)}.pagehero h1{font-size:54px;color:#17263a}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.search{display:flex;align-items:center;border:1px solid #e3e9f0;border-radius:10px;flex:1;min-width:230px;padding:0 10px}.search span{font-size:25px}.search input{border:0;outline:0;padding:15px 5px;flex:1;min-width:0;font:13px 'DM Sans'}.filters select{padding:14px;border:1px solid #e3e9f0;border-radius:10px;background:white;color:#536176;max-width:220px}.result{display:flex;justify-content:space-between;margin:24px 0 15px;font-size:12px;color:#8793a4}.result b{color:#17263a}.directory{grid-template-columns:repeat(3,1fr)}.empty{text-align:center;background:#f5f7fb;border-radius:15px;padding:50px}.detailhero{background:#0d192b;color:white;padding:40px max(calc((100vw - 1100px)/2),24px) 55px}.detailhero>a{font-size:12px;color:#aabbd0}.detailtitle{display:flex;gap:22px;align-items:center;margin-top:35px}.big{width:78px;height:78px;font-size:22px}.detailhero h1{font-size:45px;margin:0 0 8px}.detailhero p{color:#b4c3d7;margin:0}.detail{display:grid;grid-template-columns:1.5fr .8fr;gap:55px}.detail h2{font:700 31px 'Space Grotesk'}.detail h3,.prose h2{font:700 20px 'Space Grotesk';margin-top:30px}.detail article p,.prose p{font-size:14px;line-height:1.9;color:#63748a}.lead{font-size:16px!important}.notice{background:#f0f5ff;border-left:3px solid #3869f5;padding:16px;border-radius:8px;color:#596d87;font-size:12px;line-height:1.8;margin:24px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.secondary{padding:13px 17px;border-radius:10px;background:#eaf0fa;color:#31528e;font-weight:700}.detail aside{background:#f5f7fb;border-radius:15px;padding:24px;height:max-content}.detail aside h3{margin:0 0 20px}.detail aside small{display:block;color:#8996a7;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-top:15px}.detail aside b,.detail aside>a{display:block;font-size:13px;margin-top:5px}.detail aside>a{color:#3869f5}.prose{max-width:850px}.prose h2:first-child{margin-top:0}.footgrid{max-width:1100px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:50px 20px 35px}footer{background:#0b1625;color:white}.footbrand{font:700 20px 'Space Grotesk'}.footgrid p{color:#92a0b4;max-width:330px;line-height:1.8;font-size:13px}.footgrid b{display:block;margin-bottom:15px}.footgrid>div>a:not(.brand){display:block;color:#9ba9bb;font-size:12px;margin:12px 0}.copy{border-top:1px solid #ffffff19;text-align:center;color:#74849a;font-size:10px;padding:20px}.toggle{display:none}@media(max-width:900px){.hero{grid-template-columns:1fr}.heroart{height:260px}.tux{font-size:120px}.grid{grid-template-columns:repeat(2,1fr)}.directory{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.top{height:68px}.toggle{display:block;border:0;background:#edf2ff;border-radius:8px;padding:9px 12px}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:white;padding:22px;box-shadow:0 15px 25px #14243a18;flex-direction:column;align-items:stretch}.nav.open{display:flex}.drop div{position:static;box-shadow:none}.hero{padding:48px 22px 20px}.hero h1{font-size:47px}.heroart{height:235px}.ring{width:210px;height:210px}.tux{font-size:100px}.stats{grid-template-columns:repeat(2,1fr);gap:20px}.stats div:nth-child(2){border:0}.section{padding:52px 20px}.head{display:block}.head .link{display:inline-block;margin-top:10px}.section h2,.banner h2{font-size:30px}.grid,.directory{grid-template-columns:1fr}.banner{display:block;padding:42px 22px}.lightbtn{display:inline-block;margin-top:10px}.features{grid-template-columns:1fr}.pagehero{padding:48px 22px}.pagehero h1{font-size:42px}.filters{display:grid;grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.filters select{max-width:none;width:100%}.detail{grid-template-columns:1fr;gap:30px}.detailhero h1{font-size:34px}.big{width:60px;height:60px}.footgrid{grid-template-columns:1fr 1fr;gap:20px}.footgrid>div:first-child{grid-column:1/-1}}

/* Logo proyek dari favicon situs resmi dan fallback monogram */
.logo { position:relative; overflow:hidden; display:inline-grid; place-items:center; flex:0 0 auto; }
.logo .distro-logo-img { display:block; width:72%; height:72%; object-fit:contain; border-radius:7px; }
.logo .logo-fallback { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; font-weight:800; letter-spacing:-.04em; }
.logo.big .distro-logo-img { width:76%; height:76%; border-radius:10px; }