.detail-hero{background:#0a0a0f;padding:140px 0 40px;position:relative;overflow:hidden}.detail-hero-bg-grid{pointer-events:none;background-image:linear-gradient(#fc67230f 1px,#0000 1px),linear-gradient(90deg,#fc67230f 1px,#0000 1px);background-size:60px 60px;position:absolute;inset:0}.breadcrumb{z-index:2;align-items:center;gap:10px;font-size:.9rem;display:flex;position:relative}.breadcrumb a{color:#ffffff8c;text-decoration:none;transition:color .2s}.breadcrumb a:hover{color:#fc6723}.breadcrumb span{color:#ffffff4d}.breadcrumb .current{color:#fc6723;font-weight:600}.detail-main{background:#0d0d14;min-height:400px;padding:60px 0 80px}.detail-content{grid-template-columns:1.4fr 1fr;align-items:start;gap:48px;display:grid}.detail-image-wrap{background:#ffffff0a;border:1px solid #ffffff14;border-radius:16px;overflow:hidden}.detail-image{width:100%;height:auto;display:block}.detail-image-placeholder{aspect-ratio:4/3;color:#ffffff26;justify-content:center;align-items:center;font-size:3.5rem;display:flex}.detail-info{padding-top:8px}.detail-info h1{color:#fff;margin:0 0 20px;font-family:Space Grotesk,sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.2}.detail-tags{flex-wrap:wrap;gap:8px;margin-bottom:32px;display:flex}.detail-tag{text-transform:uppercase;letter-spacing:.06em;color:#fc6723;background:#fc67231a;border:1px solid #fc672340;border-radius:50px;padding:5px 14px;font-size:.75rem;font-weight:600}.detail-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.btn-visit-live{color:#fff;background:#fc6723;border-radius:50px;justify-content:center;align-items:center;gap:10px;padding:14px 32px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .2s,transform .2s;display:inline-flex}.btn-visit-live:hover{background:#e5571a;transform:translateY(-2px)}.btn-back-portfolio{color:#ffffffb3;background:0 0;border:1px solid #ffffff26;border-radius:50px;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.btn-back-portfolio:hover{color:#fc6723;background:#fc672314;border-color:#fc672380}.detail-not-found{text-align:center;padding:80px 20px}.detail-not-found i{color:#ffffff26;margin-bottom:20px;font-size:3rem}.detail-not-found h2{color:#fff;margin-bottom:10px;font-family:Space Grotesk,sans-serif;font-size:1.6rem}.detail-not-found p{color:#ffffff80;margin-bottom:28px;font-size:1rem}.btn-back{color:#fc6723;background:#fc67231f;border:1px solid #fc672380;border-radius:50px;align-items:center;gap:8px;padding:12px 28px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-back:hover{color:#fff;background:#fc6723}.related-section{background:#0a0a0f;border-top:1px solid #ffffff0f;padding:60px 0 80px}.related-title{color:#fff;margin:0 0 32px;font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:700}.related-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.related-card{background:#ffffff08;border:1px solid #ffffff12;border-radius:14px;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s;overflow:hidden}.related-card:hover{border-color:#fc672340;transform:translateY(-5px);box-shadow:0 12px 32px #0006}.related-card-img{aspect-ratio:4/3;background:#ffffff0a;overflow:hidden}.related-card-img img{object-fit:cover;width:100%;height:100%;transition:transform .4s}.related-card:hover .related-card-img img{transform:scale(1.05)}.related-card-placeholder{color:#ffffff26;justify-content:center;align-items:center;width:100%;height:100%;font-size:2rem;display:flex}.related-card-body{padding:16px 18px 18px}.related-card-body h4{color:#fff;margin:0 0 10px;font-family:Space Grotesk,sans-serif;font-size:.95rem;font-weight:600;line-height:1.3}.related-card-tags{flex-wrap:wrap;gap:6px;display:flex}.related-tag{text-transform:uppercase;letter-spacing:.06em;color:#fc6723;background:#fc67231a;border:1px solid #fc672340;border-radius:50px;padding:3px 9px;font-size:.65rem;font-weight:600}@media (max-width:960px){.detail-content{grid-template-columns:1fr;gap:32px}.related-grid{grid-template-columns:repeat(2,1fr);gap:20px}}@media (max-width:600px){.detail-hero{padding:120px 0 30px}.detail-main{padding:40px 0 60px}.detail-info h1{font-size:1.5rem}.related-grid{grid-template-columns:1fr;gap:16px}.related-section{padding:40px 0 60px}}
