/*
 * HeyRizki CMS 3.5 — Portfolio 2026
 * A focused visual layer for responsive depth, readable content, and embeds.
 */

html{scroll-padding-top:calc(var(--header-height) + 24px)}
body{overflow-x:hidden;background-color:var(--c-bg);background-image:radial-gradient(circle at 8% 10%,color-mix(in srgb,var(--c-primary) 11%,transparent),transparent 32rem),radial-gradient(circle at 92% 22%,color-mix(in srgb,var(--c-secondary) 10%,transparent),transparent 28rem);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.container{width:min(var(--layout-container),calc(100% - clamp(32px,7vw,88px)));margin-inline:auto}
.main-content{min-height:72vh}
.section{position:relative}
.section-head{max-width:780px;margin-inline:auto}
.section-title{letter-spacing:-.045em;text-wrap:balance}
.section-subtitle{text-wrap:pretty}

/* Navigation has a compact floating-shell feel without sacrificing touch size. */
.site-header{width:100%;padding:10px 0;background:transparent!important;border:0!important}
.site-header .header-inner{height:calc(var(--header-height) - 8px);padding:8px 10px 8px 14px;border:1px solid var(--c-border);border-radius:calc(var(--radius-lg) + 8px);background:color-mix(in srgb,var(--header-bg) 92%,transparent);box-shadow:0 14px 48px rgba(0,0,0,.10);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
.site-header.scrolled .header-inner{box-shadow:0 18px 60px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,var(--c-primary) 9%,transparent)}
.logo-mark{transform:rotate(-7deg);box-shadow:0 8px 22px color-mix(in srgb,var(--c-primary) 25%,transparent)}
.main-nav{padding:5px;border:1px solid color-mix(in srgb,var(--c-border) 72%,transparent);border-radius:999px;background:color-mix(in srgb,var(--c-surface) 60%,transparent)}
.nav-link{position:relative;padding:9px 14px!important;border-radius:999px}
.nav-link::after{display:none!important}
.nav-link:hover,.nav-link.active{background:var(--c-surface);box-shadow:0 4px 14px rgba(0,0,0,.08);color:var(--c-text)}
.header-order-btn{box-shadow:0 10px 24px color-mix(in srgb,var(--c-primary) 24%,transparent)}

/* Hero: layered depth with strong type hierarchy and controlled density. */
.hero-section{min-height:max(720px,100svh);display:grid;align-items:center;padding-top:calc(var(--header-height) + 54px)!important;overflow:hidden}
.hero-section::before{content:"";position:absolute;left:50%;top:48%;width:min(820px,82vw);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--c-primary) 18%,transparent);border-radius:44% 56% 63% 37%/42% 41% 59% 58%;box-shadow:inset 0 0 110px color-mix(in srgb,var(--c-primary) 8%,transparent);animation:hero-orbit 22s linear infinite;pointer-events:none}
.hero-inner{max-width:min(960px,calc(100% - 24px))!important;padding:clamp(30px,5vw,64px);border:1px solid color-mix(in srgb,var(--c-border) 88%,transparent);border-radius:clamp(28px,5vw,52px);background:linear-gradient(145deg,color-mix(in srgb,var(--c-surface) 72%,transparent),color-mix(in srgb,var(--c-surface-2) 52%,transparent));box-shadow:0 40px 110px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(18px);transform-style:preserve-3d}
.hero-badge{width:max-content;max-width:100%;margin-inline:auto;border-color:color-mix(in srgb,var(--c-accent) 35%,var(--c-border));background:color-mix(in srgb,var(--c-accent) 10%,var(--c-surface))}
.hero-avatar-wrap{transform:translateZ(34px)}
.hero-avatar{box-shadow:0 24px 54px rgba(0,0,0,.24)}
.hero-title{margin-top:20px;line-height:.96;letter-spacing:-.065em;transform:translateZ(42px)}
.hero-greeting{font-weight:500;letter-spacing:-.02em}
.hero-name{filter:drop-shadow(0 14px 22px color-mix(in srgb,var(--c-primary) 20%,transparent))}
.hero-subtitle{color:var(--c-text);font-weight:700;letter-spacing:.02em}
.hero-tagline{max-width:680px;margin-inline:auto}
.hero-stats{width:min(680px,100%);margin-inline:auto;padding:13px;border:1px solid var(--c-border);border-radius:999px;background:color-mix(in srgb,var(--c-bg) 30%,transparent);transform:translateZ(24px)}
.hero-stat-item{min-width:0}
.hero-stat-num{font-family:"Space Grotesk",var(--font);letter-spacing:-.04em}
.hero-cta{transform:translateZ(30px)}
.hero-social-link{border-color:var(--c-border);background:var(--c-surface);box-shadow:0 8px 20px rgba(0,0,0,.09)}
.hero-social-link:hover{transform:translateY(-4px) rotate(-4deg)}
@keyframes hero-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Shared components use one consistent depth language. */
.service-card,.services-offered-card,.work-card,.pricing-card,.process-step,.timeline-content,.contact-card,.embed-card,.about-meta{position:relative;overflow:hidden;border:1px solid var(--c-border)!important;border-radius:var(--radius-lg)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--c-surface) 96%,transparent),color-mix(in srgb,var(--c-surface-2) 72%,transparent))!important;box-shadow:0 18px 46px rgba(0,0,0,.10)!important;transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.service-card::before,.services-offered-card::before,.work-card::before,.pricing-card::before,.process-step::before,.embed-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(125deg,color-mix(in srgb,var(--c-primary) 10%,transparent),transparent 32%,transparent 68%,color-mix(in srgb,var(--c-secondary) 8%,transparent))}
.service-card>*,
.services-offered-card>*,
.work-card>*,
.pricing-card>*,
.process-step>*,
.embed-card>*{position:relative;z-index:1}
.service-card:hover,.services-offered-card:hover,.work-card:hover,.pricing-card:hover,.process-step:hover,.embed-card:hover{border-color:color-mix(in srgb,var(--c-primary) 42%,var(--c-border))!important;box-shadow:0 28px 70px rgba(0,0,0,.16),0 0 44px color-mix(in srgb,var(--c-primary) 10%,transparent)!important}
.service-icon,.services-offered-icon,.pricing-icon,.process-icon{transform:translateZ(26px);box-shadow:0 12px 24px color-mix(in srgb,var(--c-primary) 18%,transparent)}
.works-grid{gap:22px}
.work-card{min-height:100%;display:flex;flex-direction:column}
.work-image{aspect-ratio:16/10;min-height:0}
.work-image img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.work-card:hover .work-image img{transform:scale(1.055);filter:saturate(1.08)}
.work-content{flex:1}
.pricing-grid{align-items:stretch}
.pricing-popular{transform:translateY(-14px);box-shadow:0 32px 80px color-mix(in srgb,var(--c-primary) 17%,transparent)!important}
.timeline-content{overflow:visible}
.timeline-item:nth-child(even) .timeline-content{background:linear-gradient(145deg,color-mix(in srgb,var(--c-surface) 96%,transparent),color-mix(in srgb,var(--c-secondary) 6%,var(--c-surface-2)))!important}
.contact-right{border-radius:var(--radius-lg)}

/* Social embeds: click-to-play cards remain useful before external scripts load. */
.embeds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.embed-card{display:grid;grid-template-rows:auto 1fr;min-width:0}
.embed-card-media{position:relative;display:grid;place-items:center;min-height:300px;overflow:hidden;border-bottom:1px solid var(--c-border);background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--c-primary) 18%,transparent),transparent 62%),var(--c-bg)}
.embed-card-media.has-poster{aspect-ratio:16/10;min-height:0}
.embed-card-media>img{width:100%;height:100%;object-fit:cover;transition:transform .55s,filter .35s}
.embed-card:hover .embed-card-media>img{transform:scale(1.035);filter:brightness(.8)}
.embed-platform-art{display:grid;place-items:center;gap:14px;color:var(--c-muted);text-transform:uppercase;font-size:.75rem;font-weight:800;letter-spacing:.12em}
.embed-platform-art i{font-size:4.5rem;color:var(--c-primary);filter:drop-shadow(0 18px 24px color-mix(in srgb,var(--c-primary) 24%,transparent))}
.embed-play-button{position:absolute;inset:auto 50% 50% auto;transform:translate(50%,50%);display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(12,16,25,.78);box-shadow:0 18px 44px rgba(0,0,0,.28);color:#fff;font:inherit;font-weight:800;cursor:pointer;backdrop-filter:blur(14px)}
.embed-play-button i{display:grid;place-items:center;width:34px;height:34px;padding-left:2px;border-radius:50%;background:var(--c-primary)}
.embed-play-button:hover{transform:translate(50%,calc(50% - 4px));background:rgba(12,16,25,.92)}
.embed-card-body,.embed-card-media>.embed-container{width:100%;height:100%;min-height:inherit}
.embed-card-media iframe{width:100%;height:100%;min-height:300px}
.embed-card-copy{display:flex;flex-direction:column;align-items:flex-start;padding:24px}
.embed-card-platform{display:flex;align-items:center;gap:8px;color:var(--c-primary);font-size:.74rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.embed-card-copy h3{margin:10px 0 8px;font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.03em}
.embed-card-copy p{margin:0 0 20px;color:var(--c-muted);line-height:1.72}
.embed-card-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto}

/* Long-form page and configurable sidebar. */
.content-page{padding-top:calc(var(--header-height) + 58px)!important}
.content-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:22px;color:var(--c-muted);font-size:.82rem}
.content-breadcrumb a:hover{color:var(--c-primary)}
.content-breadcrumb i{font-size:.58rem;opacity:.5}
.content-layout{display:grid;align-items:start;gap:clamp(24px,4vw,48px)}
.content-layout.no-sidebar{grid-template-columns:minmax(0,var(--content-width));justify-content:center}
.content-layout.has-sidebar{grid-template-columns:minmax(0,1fr) minmax(270px,340px)}
.content-layout.has-sidebar.sidebar-left{grid-template-columns:minmax(270px,340px) minmax(0,1fr)}
.content-layout.sidebar-left .content-sidebar{grid-column:1;grid-row:1}
.content-layout.sidebar-left .content-article{grid-column:2}
.content-article{min-width:0;padding:clamp(24px,4.5vw,58px);border:1px solid var(--c-border);border-radius:clamp(24px,4vw,42px);background:color-mix(in srgb,var(--c-surface) 88%,transparent);box-shadow:0 28px 80px rgba(0,0,0,.12);backdrop-filter:blur(14px)}
.post-header{margin:0 0 clamp(26px,5vw,52px);text-align:left}
.post-header h1{max-width:920px;margin:14px 0 18px;font-family:"Space Grotesk",var(--font);font-size:clamp(2.1rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.058em;text-wrap:balance}
.page-header h1{font-size:clamp(2.2rem,5vw,4.2rem)}
.post-lead{max-width:780px;margin:0 0 22px;color:var(--c-muted);font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.75;text-wrap:pretty}
.post-meta{display:flex;flex-wrap:wrap;gap:9px}
.post-meta span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--c-border);border-radius:999px;background:var(--c-surface-2);font-size:.76rem}
.post-meta i{color:var(--c-primary)}
.post-featured-image{aspect-ratio:16/9;margin:0 0 clamp(28px,5vw,52px);overflow:hidden;border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.post-featured-image img{width:100%;height:100%;object-fit:cover}
.rich-content{font-size:clamp(1rem,1.2vw,1.085rem);line-height:1.9;color:color-mix(in srgb,var(--c-text) 92%,var(--c-muted))}
.rich-content>*:first-child{margin-top:0}
.rich-content h2,.rich-content h3{scroll-margin-top:calc(var(--header-height) + 30px);font-family:"Space Grotesk",var(--font);letter-spacing:-.035em;line-height:1.2;color:var(--c-text)}
.rich-content h2{margin:2.3em 0 .7em;font-size:clamp(1.55rem,3vw,2.25rem)}
.rich-content h3{margin:1.8em 0 .6em;font-size:clamp(1.24rem,2.2vw,1.65rem)}
.rich-content p,.rich-content ul,.rich-content ol{margin:0 0 1.45em}
.rich-content img{max-width:100%;height:auto;border-radius:var(--radius);box-shadow:0 16px 42px rgba(0,0,0,.12)}
.rich-content blockquote{margin:2em 0;padding:22px 24px;border:0;border-left:4px solid var(--c-primary);border-radius:0 var(--radius) var(--radius) 0;background:linear-gradient(90deg,var(--c-primary-soft),transparent);font-size:1.08em}
.post-end{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:48px;padding-top:24px;border-top:1px solid var(--c-border)}
.post-end>div:first-child span,.post-end>div:first-child strong{display:block}
.post-end>div:first-child span{color:var(--c-muted);font-size:.76rem}
.content-sidebar{display:grid;gap:16px;min-width:0}
.content-sidebar.is-sticky{position:sticky;top:calc(var(--header-height) + 28px)}
.sidebar-card{overflow:hidden;padding:20px;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--c-surface) 88%,transparent);box-shadow:0 16px 42px rgba(0,0,0,.09);backdrop-filter:blur(14px)}
.sidebar-intro-card{padding:24px;background:linear-gradient(145deg,var(--c-primary-soft),color-mix(in srgb,var(--c-surface) 92%,transparent))}
.sidebar-kicker{color:var(--c-primary);font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.sidebar-intro-card h2{margin:8px 0;font-size:1.45rem;letter-spacing:-.035em}
.sidebar-intro-card p,.sidebar-custom-content{margin:0;color:var(--c-muted);font-size:.88rem;line-height:1.7}
.sidebar-card-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.sidebar-card-head i{color:var(--c-primary)}
.sidebar-toc ol{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.sidebar-toc a{display:block;padding:8px 10px;border-radius:10px;color:var(--c-muted);font-size:.83rem;line-height:1.4}
.sidebar-toc a:hover{background:var(--c-primary-soft);color:var(--c-primary)}
.sidebar-toc .toc-level-3 a{padding-left:24px;font-size:.78rem}
.toc-empty{color:var(--c-muted);font-size:.8rem}
.sidebar-recent-list{display:grid}
.sidebar-recent-list a{display:grid;gap:3px;padding:11px 0;border-top:1px solid var(--c-border)}
.sidebar-recent-list a:first-child{padding-top:0;border-top:0}
.sidebar-recent-list span{font-size:.86rem;font-weight:700;line-height:1.45}
.sidebar-recent-list small{color:var(--c-muted);font-size:.7rem}
.sidebar-chip-list{display:flex;flex-wrap:wrap;gap:7px}
.sidebar-chip-list a{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--c-border);border-radius:999px;font-size:.75rem}
.sidebar-chip-list a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.sidebar-chip-list span{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:var(--c-surface-2);font-size:.65rem}
.sidebar-share{display:flex;gap:8px}
.sidebar-share a,.sidebar-share button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--c-border);border-radius:13px;background:var(--c-surface-2);color:var(--c-text);cursor:pointer}
.sidebar-share a:hover,.sidebar-share button:hover{transform:translateY(-3px);border-color:var(--c-primary);color:var(--c-primary)}
.comments-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:58px 0 20px}
.comments-heading h2{margin:4px 0 0;font-size:2rem}
.comments-heading>span{color:var(--c-muted);font-size:.82rem}
.comments-list{display:grid;gap:12px}
.comment-item{display:grid;grid-template-columns:44px 1fr;gap:13px;padding:18px;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface-2)}
.comment-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--grad-main);color:#fff;font-weight:900}
.comment-header{display:flex;justify-content:space-between;gap:12px}
.comment-header span{color:var(--c-muted);font-size:.72rem}
.comment-item p{margin:6px 0 0;color:var(--c-muted);line-height:1.65}
.comments-empty{display:flex;align-items:center;gap:12px;padding:20px;border:1px dashed var(--c-border);border-radius:var(--radius);color:var(--c-muted)}
.comments-empty i{font-size:1.5rem}
.comment-form{margin-top:20px;padding:clamp(20px,4vw,34px)}

/* Portfolio archive is more scan-friendly on desktop and never overflows mobile. */
.portfolio-showcase-grid{gap:32px}
.portfolio-showcase-card{box-shadow:0 24px 68px rgba(0,0,0,.13)}
.portfolio-showcase-card:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(300px,.86fr)}
.portfolio-showcase-card:nth-child(even) .portfolio-showcase-visual{order:2}
.portfolio-showcase-card:hover{border-color:color-mix(in srgb,var(--c-primary) 38%,var(--c-border))}

@media(max-width:1100px){
  .main-nav{display:none!important}
  .menu-toggle{display:flex!important}
  .content-layout.has-sidebar,.content-layout.has-sidebar.sidebar-left{grid-template-columns:minmax(0,1fr) minmax(245px,290px);gap:24px}
  .content-article{padding:clamp(24px,4vw,42px)}
}
@media(max-width:860px){
  body{background-attachment:scroll}
  .container{width:min(var(--layout-container),calc(100% - 32px))}
  .site-header{padding:8px 0}
  .site-header .header-inner{border-radius:22px}
  .hero-section{min-height:auto;padding-top:calc(var(--header-height) + 62px)!important}
  .hero-inner{padding:42px 24px!important;border-radius:34px}
  .hero-title{letter-spacing:-.05em}
  .hero-stats{border-radius:24px}
  .embeds-grid{grid-template-columns:1fr}
  .content-layout.has-sidebar,.content-layout.has-sidebar.sidebar-left{grid-template-columns:1fr}
  .content-layout.sidebar-left .content-sidebar,.content-layout.sidebar-left .content-article{grid-column:auto;grid-row:auto}
  .content-layout.sidebar-left .content-sidebar{order:2}
  .content-sidebar.is-sticky{position:static}
  .portfolio-showcase-card,.portfolio-showcase-card:nth-child(even){grid-template-columns:1fr}
  .portfolio-showcase-card:nth-child(even) .portfolio-showcase-visual{order:0}
}
@media(max-width:640px){
  .container{width:min(var(--layout-container),calc(100% - 22px))}
  .site-header .header-inner{padding-inline:10px}
  .logo-text{max-width:132px}
  .desktop-action{display:none!important}
  .hero-section::before{width:110vw}
  .hero-inner{padding:34px 17px!important;border-radius:28px}
  .hero-avatar-wrap{width:104px;height:104px}
  .hero-title{margin-top:16px}
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:10px}
  .hero-stat-divider{display:none}
  .hero-stat-num{font-size:1.15rem}
  .hero-stat-label{font-size:.63rem;line-height:1.3}
  .hero-cta{display:grid;width:100%}
  .hero-cta .btn{width:100%}
  .section{padding-top:var(--section-pt,64px);padding-bottom:var(--section-pb,64px)}
  .section-style-glass>.container{width:calc(100% - 16px)!important}
  .pricing-popular{transform:none}
  .embed-card-media{min-height:230px}
  .embed-card-media.has-poster{aspect-ratio:4/3}
  .embed-play-button span{display:none}
  .embed-card-copy{padding:19px}
  .content-page{padding-top:calc(var(--header-height) + 40px)!important}
  .content-article{padding:22px 18px;border-radius:24px}
  .post-header h1{font-size:clamp(2rem,12vw,3.2rem)}
  .post-meta span{padding:6px 8px}
  .post-end{align-items:flex-start;flex-direction:column}
  .comment-item{grid-template-columns:36px 1fr;padding:14px}
  .comment-avatar{width:36px;height:36px;border-radius:11px}
  .portfolio-showcase-content{padding:19px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-3d-card],[data-3d-tilt]{transform:none!important}
  .hero-section::before{animation:none}
}