.articles-section{background:#f8fafc;width:100vw;padding:64px 0}.articles-container{max-width:1650px;margin:0 auto;padding:0 24px}.articles-title{color:#3d3c3a;text-align:center;letter-spacing:2px;margin-bottom:48px;font-family:Neue Montreal,sans-serif;font-size:2.6rem;font-weight:700}.article-featured{opacity:1;margin-bottom:32px;transition:all .3s;transform:translateY(0)}.featured-image-section{margin-bottom:24px;position:relative}.image-grid{gap:8px;width:100%;display:grid}.image-grid.single{grid-template-columns:1fr;height:300px}.image-grid.double{grid-template-columns:1fr 1fr;height:300px}.image-grid.triple{grid-template-columns:1fr 1fr 1fr;height:300px}.grid-image{object-fit:cover;object-position:center;border-radius:8px;width:100%;height:100%}.image-carousel{border-radius:8px;width:100%;height:300px;position:relative;overflow:hidden}.featured-image{object-fit:cover;object-position:center;border-radius:8px;width:100%;height:100%}.no-image{color:#9ca3af;background:#e5e7eb;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.2rem;display:flex}.category-badge{color:#fff;z-index:2;background:#ef3914f2;border-radius:24px;padding:8px 20px;font-family:Neue Montreal,sans-serif;font-size:.9rem;font-weight:600;position:absolute;top:20px;left:20px}.carousel-btn{color:#fff;cursor:pointer;z-index:2;background:#000000b3;border:none;border-radius:50%;width:50px;height:50px;font-size:24px;transition:all .3s;position:absolute;top:50%;transform:translateY(-50%)}.carousel-btn:hover{background:#000000e6;transform:translateY(-50%)scale(1.1)}.carousel-prev{left:20px}.carousel-next{right:20px}.carousel-dots{z-index:2;gap:8px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.dot{cursor:pointer;background:#ffffff80;border-radius:50%;width:12px;height:12px;transition:all .3s}.dot.active{background:#fff;transform:scale(1.3)}.meta-info{color:#64748b;gap:24px;margin-bottom:20px;font-family:Neue Montreal,sans-serif;font-size:.95rem;display:flex}.featured-title{text-align:left;min-height:2.8rem;margin:0 0 16px;font-size:2rem;font-weight:500;line-height:1.3}.featured-title a{color:#3d3c3a;font-family:Neue Montreal,sans-serif;text-decoration:none;transition:color .2s}.featured-title a:hover{color:var(--color-accent)}.featured-excerpt{color:#3d3c3a;word-spacing:2.5px;min-height:120px;margin-bottom:24px;font-family:Neue Montreal,sans-serif;font-size:1.1rem;font-weight:600;line-height:1.8;overflow:hidden}.grid-placeholder{color:#9ca3af;background:#f3f4f6;border:2px dashed #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;font-size:.9rem;display:flex}.more-photos-indicator{color:#fff;z-index:2;background:#000c;border-radius:12px;padding:4px 8px;font-size:.8rem;font-weight:600;position:absolute;bottom:10px;right:10px}.loading{text-align:center;color:#64748b;padding:64px 0;font-family:Neue Montreal,sans-serif;font-size:1.1rem}.error-message{text-align:center;padding:64px 0}.retry-button{background:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:8px;margin-top:16px;padding:12px 24px;font-weight:600;transition:all .3s}.retry-button:hover{background:#c72f10}.section-grid{grid-template-columns:3fr 1fr;align-items:start;gap:48px;display:grid}.left-column{width:100%;padding-right:0}.right-column{width:100%;padding-left:0}.section-title{color:#3d3c3a;letter-spacing:2px;margin-bottom:32px;font-family:Neue Montreal,sans-serif;font-size:1.5rem;font-weight:700}.article-meta{align-items:center;gap:8px;height:32px;margin-top:-50px;display:flex}.article-number{color:var(--color-accent);font-family:Neue Montreal,sans-serif;font-size:1.3rem;font-weight:700;line-height:1}.article-total{color:#6b7280;font-family:Neue Montreal,sans-serif;font-size:1rem;font-weight:400;line-height:1}.navigation-arrows{gap:16px;margin-top:24px;display:flex}.nav-arrow{cursor:pointer;background:0 0;border:2px solid #3d3c3a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .3s;display:flex}.nav-arrow:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.mechanism-content{flex-direction:column;gap:24px;display:flex}.mechanism-item{width:100%}.mechanism-image{cursor:pointer;background-position:50%;background-size:cover;border-radius:16px;justify-content:center;align-items:center;width:100%;height:200px;transition:all .3s;display:flex;position:relative;overflow:hidden}.mechanism-image:before{content:"";z-index:1;background:linear-gradient(#0006,#0006);transition:all .3s;position:absolute;inset:0}.mechanism-image:hover:before{background:linear-gradient(#504f4fb3,#4b4b4bb3)}.mechanism-image.design{background-image:url(/assets/images/rumah2.jpg)}.mechanism-image.build{background-image:url(/assets/images/rumah3.jpg)}.mechanism-label{color:#fff;text-shadow:2px 2px 4px #00000080;letter-spacing:2px;z-index:2;font-family:Neue Montreal,sans-serif;font-size:1.5rem;font-weight:700;transition:all .3s;position:relative;transform:translateY(0)}.mechanism-image:hover .mechanism-label{text-shadow:2px 2px 8px #000c;font-size:1.6rem;transform:translateY(-5px)}.article-carousel{min-height:600px;position:relative}.featured-content{min-height:200px;padding:24px 0}.navigation-arrows{justify-content:flex-start;gap:16px;margin-top:24px;display:flex}.nav-arrow{cursor:pointer;color:#9ca3af;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;transition:all .2s;display:flex}.nav-arrow:hover{color:#374151;transform:scale(1.2)}.nav-arrow:disabled{opacity:.3;cursor:not-allowed}.nav-arrow:disabled:hover{color:#9ca3af;transform:none}.articles-footer{border-top:1px solid #e5e7eb;justify-content:center;margin-top:48px;padding-top:32px;display:flex}.btn-view-all{color:#374151;border:2px solid #e5e7eb;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-family:Neue Montreal,sans-serif;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.btn-view-all:hover{border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px #ef391426}.read-more-btn{color:#374151;border-bottom:1px solid #0000;margin:16px 0;padding:8px 0;font-family:Neue Montreal,sans-serif;font-size:1rem;font-weight:400;text-decoration:none;transition:all .3s;display:inline-block}.read-more-btn:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}.article-nav-buttons{justify-content:flex-end;gap:32px;margin-top:16px;margin-bottom:24px;display:flex}.article-nav-btn{color:#000;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;font-size:3rem;transition:color .2s;display:flex}.article-nav-btn:hover{color:#9ca3af}.article-nav-btn:disabled{opacity:.2;cursor:not-allowed}.article-nav-btn:disabled:hover{color:#d1d5db}.article-progress{justify-content:center;margin:10px 0;display:flex}.progress-line{background:#e5e7eb;border-radius:1px;width:200px;height:2px;overflow:hidden}.progress-fill{background:var(--color-accent);border-radius:1px;height:100%;transition:width .3s}@media (max-width:768px){.article-nav-buttons{justify-content:center;gap:32px}.articles-title{margin-bottom:32px;font-size:2rem}.featured-image-section{height:300px}.featured-title{font-size:1.6rem}.meta-info{flex-direction:column;gap:8px}.carousel-btn{width:40px;height:40px;font-size:20px}.category-badge{padding:6px 14px;font-size:.85rem;top:12px;left:12px}}@media (max-width:1024px){.section-grid{grid-template-columns:1fr;gap:32px}.section-title{margin-bottom:24px;font-size:1.3rem}.mechanism-image{height:150px}.mechanism-label{font-size:1.2rem}}