.catatan-detail{background-color:var(--bg-light,#fdfbfd);min-height:100vh;padding-bottom:5rem}.catatan-hero{width:100vw;height:75vh;min-height:480px;max-height:700px;padding-bottom:80px;padding-top:calc(var(--navbar-height,80px) + 20px);color:#fff;background-color:var(--primary);align-items:flex-end;margin-left:calc(50% - 50vw);display:flex;position:relative;overflow:hidden}.catatan-hero-image{object-fit:cover;z-index:1;width:100%;height:100%;position:absolute;inset:0}.catatan-hero-placeholder{background:linear-gradient(135deg,var(--primary)0%,#6b3a6b 100%);z-index:1;width:100%;height:100%;position:absolute;inset:0}.catatan-hero-overlay{z-index:2;background:linear-gradient(#0006 0%,#0009 50%,#000000f2 100%);position:absolute;inset:0}.catatan-hero-content{z-index:3;text-shadow:1px 2px 15px #000000b3;text-align:center;width:100%;max-width:900px;margin:0 auto;padding:0 clamp(1.5rem,4vw,2rem);position:relative}.catatan-back{color:#ffffffd9;margin-bottom:1.5rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.catatan-back:hover{color:#fff;transform:translate(-4px)}.catatan-meta{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;margin-bottom:1rem;display:flex}.catatan-category{background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:1px;border-radius:4px;padding:6px 16px;font-size:.82rem;font-weight:700;display:inline-block;box-shadow:0 4px 10px #0000004d}.catatan-date{opacity:.9;font-size:.95rem;font-weight:500}.catatan-title{font-size:clamp(2rem,5vw,3.5rem);line-height:1.25;font-family:var(--font-heading);margin:.8rem 0 1.5rem;font-weight:800;color:#fff!important}.catatan-body{z-index:10;background:#fff;border-radius:12px;max-width:860px;margin:-60px auto 50px;padding:clamp(2rem,5vw,40px);position:relative;box-shadow:0 10px 40px #0000000d}.catatan-excerpt{color:var(--primary-dark);font-size:1.25rem;font-family:var(--font-heading);text-align:center;border-bottom:1px solid #eee;margin-bottom:30px;padding-bottom:30px;font-weight:500;line-height:1.6}.catatan-tags{border-top:1px solid #eee;flex-wrap:wrap;align-items:center;gap:10px;margin-top:3rem;padding-top:2rem;display:flex}.tag-label{color:#555;margin-right:5px;font-weight:600}.catatan-tags .tag{color:var(--primary);background:#96559614;border-radius:50px;padding:6px 16px;font-size:.85rem;font-weight:600;transition:all .3s;display:inline-block}.catatan-tags .tag:hover{background:var(--primary);color:#fff}.catatan-footer{text-align:center;margin-top:3rem}.btn-back{border:2px solid var(--primary);color:var(--primary);background:0 0;border-radius:50px;justify-content:center;align-items:center;padding:12px 30px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.btn-back:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #96559633}.article-content{color:#333;font-size:1.12rem;line-height:1.9}.article-content h1,.article-content h2,.article-content h3,.article-content h4{font-family:var(--font-heading);color:var(--text-dark);margin-top:2.5rem;margin-bottom:1.2rem;font-weight:700}.article-content h1{font-size:2.2rem}.article-content h2{font-size:1.8rem}.article-content h3{font-size:1.4rem}.article-content p{margin-bottom:1.5rem}.article-content ul{margin-bottom:1.5rem;padding-left:1.8rem;list-style:outside}.article-content ol{margin-bottom:1.5rem;padding-left:1.8rem;list-style:decimal}.article-content li{margin-bottom:.6rem}.article-content img{border-radius:12px;width:100%;max-width:100%;height:auto;margin:2.5rem 0;box-shadow:0 4px 20px #0000000f}.article-content iframe{aspect-ratio:16/9;border-radius:12px;width:100%;margin:2.5rem 0;box-shadow:0 4px 20px #0000000f}.article-content blockquote{border-left:5px solid var(--primary);color:#444;background:#9655960a;border-radius:0 8px 8px 0;margin:2.5rem 0;padding:1.2rem 2rem;font-size:1.2rem;font-style:italic}.article-content .ql-align-center{text-align:center}.article-content .ql-align-right{text-align:right}.article-content .ql-align-justify{text-align:justify}@media (max-width:768px){.catatan-hero{height:auto;min-height:480px;padding-top:calc(var(--navbar-height,80px) + 40px);padding-bottom:60px}.catatan-title{font-size:clamp(1.8rem,6vw,2.4rem)}.catatan-body{border-radius:10px;margin-top:-30px;padding:1.5rem}.catatan-excerpt{font-size:1.1rem}}