.artikel-grid-wrapper{max-width:1200px;margin:0 auto;padding:10px 0}.artikel-header{display:flex;align-items:center;justify-content:center;gap:20px;padding:18px 30px;background:linear-gradient(135deg,#0d7a3f 0%,#1a9e5a 50%,#0d7a3f 100%);border-radius:12px 12px 0 0;position:relative;overflow:hidden}.artikel-header::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:rgb(255 255 255 / .05);border-radius:50%;transform:rotate(25deg)}.artikel-header::after{content:'';position:absolute;bottom:-60%;left:-10%;width:250px;height:250px;background:rgb(255 255 255 / .04);border-radius:50%;transform:rotate(-15deg)}.artikel-header-line{flex:1;height:2px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .4),transparent);max-width:150px}.artikel-header-title{margin:0;font-size:28px;font-weight:800;color:#fff;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:14px;position:relative;z-index:1;text-shadow:0 2px 10px rgb(0 0 0 / .2)}.artikel-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:rgb(255 255 255 / .15);border-radius:50%;font-size:18px;color:#fff;border:2px solid rgb(255 255 255 / .2);backdrop-filter:blur(4px);transition:all 0.3s ease}.artikel-header:hover .artikel-icon{background:rgb(255 255 255 / .25);transform:rotate(-5deg) scale(1.05)}.artikel-header-badge{display:inline-block;background:rgb(255 255 255 / .18);color:#fff;font-size:10px;font-weight:700;padding:4px 14px;border-radius:30px;letter-spacing:1.5px;border:1px solid rgb(255 255 255 / .15);backdrop-filter:blur(4px);text-transform:uppercase}.artikel-grid{display:grid;gap:25px;margin:0;padding:30px 25px 25px 25px;background:linear-gradient(180deg,#e8f5ec 0%,#d4ece0 50%,#c8e4d8 100%);border-radius:0 0 12px 12px;border-left:1px solid #a8d0b8;border-right:1px solid #a8d0b8;border-bottom:1px solid #a8d0b8}.artikel-grid-col-1{grid-template-columns:1fr}.artikel-grid-col-2{grid-template-columns:repeat(2,1fr)}.artikel-grid-col-3{grid-template-columns:repeat(3,1fr)}.artikel-grid-col-4{grid-template-columns:repeat(4,1fr)}.artikel-grid-item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgb(13 74 44 / .1);border:1px solid #b8d8c8;transition:all 0.3s ease}.artikel-grid-item:hover{transform:translateY(-6px);box-shadow:0 12px 35px rgb(13 74 44 / .18);border-color:#1a9e5a}.artikel-card{display:flex;flex-direction:column;height:100%}.artikel-card-content{padding:20px 22px 20px;flex:1;display:flex;flex-direction:column;background:#fff}.artikel-card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}.artikel-category-tag{display:inline-block;background:#e8f5ec;color:#0d7a3f;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:4px 14px;border-radius:30px;text-decoration:none;transition:all 0.2s ease;border:1px solid #a8d0b8}.artikel-category-tag:hover{background:#0d7a3f;color:#fff;border-color:#0d7a3f}.artikel-card-date{font-size:12px;color:#4a7a5a;display:flex;align-items:center;gap:5px}.artikel-card-date i{font-size:11px;color:#6a9a7a}.artikel-card-title{font-size:17px;font-weight:700;line-height:1.4;color:#0d7a3f;margin:0 0 12px 0}.artikel-card-title a{text-decoration:none;color:inherit;transition:color 0.2s ease}.artikel-card-title a:hover{color:#0a5a2f}.artikel-card-excerpt{font-size:14px;color:#3d5a4d;line-height:1.7;margin-bottom:16px;flex:1}.artikel-card-footer{display:flex;justify-content:flex-end;align-items:center;border-top:2px solid #e8f5ec;padding-top:14px}.artikel-read-more{color:#0d7a3f;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all 0.25s ease;font-size:13px;background:#e8f5ec;padding:6px 20px;border-radius:30px;border:1px solid #a8d0b8}.artikel-read-more:hover{gap:14px;background:#0d7a3f;color:#fff;border-color:#0d7a3f}.artikel-read-more i{font-size:12px;transition:transform 0.25s ease}.artikel-read-more:hover i{transform:translateX(4px)}.artikel-grid-empty{text-align:center;padding:50px 20px;background:linear-gradient(180deg,#e8f5ec,#d4ece0);border-radius:12px;border:1px solid #a8d0b8;color:#3d5a4d;font-size:16px}@media (max-width:992px){.artikel-grid-col-4{grid-template-columns:repeat(2,1fr)}.artikel-grid-col-3{grid-template-columns:repeat(2,1fr)}.artikel-grid{padding:20px}}@media (max-width:768px){.artikel-header{padding:14px 20px;gap:12px;flex-wrap:wrap}.artikel-header-title{font-size:22px;gap:10px}.artikel-header-line{max-width:60px}.artikel-icon{width:34px;height:34px;font-size:15px}.artikel-grid{gap:18px;padding:16px}.artikel-card-title{font-size:16px}.artikel-card-content{padding:18px 18px 16px}}@media (max-width:576px){.artikel-grid-col-2,.artikel-grid-col-3,.artikel-grid-col-4{grid-template-columns:1fr}.artikel-grid{gap:16px;padding:14px}.artikel-header{padding:12px 16px;border-radius:8px 8px 0 0;gap:8px}.artikel-header-title{font-size:18px;gap:8px;flex-wrap:wrap;justify-content:center}.artikel-header-line{display:none}.artikel-icon{width:30px;height:30px;font-size:13px}.artikel-header-badge{font-size:8px;padding:3px 10px}.artikel-card-content{padding:16px}.artikel-card-title{font-size:15px}.artikel-card-meta{flex-direction:column;align-items:flex-start;gap:4px}}@media (prefers-color-scheme:dark){.artikel-grid{background:linear-gradient(180deg,#1a3a2a,#0a2a1a);border-left-color:#2a5a3a;border-right-color:#2a5a3a;border-bottom-color:#2a5a3a}.artikel-grid-item{background:#1a3a2a;border-color:#2a5a3a}.artikel-grid-item:hover{border-color:#3a8a5a;box-shadow:0 12px 35px rgb(13 122 63 / .3)}.artikel-card-content{background:#1a3a2a}.artikel-card-title{color:#7ac89a}.artikel-card-title a{color:#7ac89a}.artikel-card-title a:hover{color:#9ad8b0}.artikel-card-excerpt{color:#90b0a0}.artikel-card-footer{border-top-color:#2a5a3a}.artikel-card-date{color:#80a890}.artikel-card-date i{color:#609070}.artikel-category-tag{background:#2a5a3a;color:#7ac89a;border-color:#3a7a5a}.artikel-category-tag:hover{background:#3a8a5a;color:#fff;border-color:#3a8a5a}.artikel-read-more{background:#2a5a3a;color:#7ac89a;border-color:#3a7a5a}.artikel-read-more:hover{background:#3a8a5a;color:#fff;border-color:#3a8a5a}.artikel-grid-empty{background:#1a3a2a;border-color:#2a5a3a;color:#90b0a0}}