/* =========================================================
   GLOBAL TOKENS
========================================================= */
:root {

	/* STATIC */
	--link-gap: 14px;
	--profile-container-desktop-width: 580px;

	/* FALLBACK */
	--theme-color: #7c3aed;

	/* SHARED */
	--radius: 24px;
	--border: rgba(255,255,255,.06);
}


/* =========================================================
   THEME ENGINE
   AUTO GENERATED FROM --theme-color
========================================================= */

#profile-container-inner {

	/* ======================================
	   GENERATED COLORS
	====================================== */

	/* LIGHT SCALE */
	--theme-50:
		color-mix(in srgb, var(--theme-color) 8%, white);

	--theme-100:
		color-mix(in srgb, var(--theme-color) 16%, white);

	--theme-200:
		color-mix(in srgb, var(--theme-color) 28%, white);

	--theme-300:
		color-mix(in srgb, var(--theme-color) 42%, white);

	/* DARK SCALE */
	--theme-700:
		color-mix(in srgb, var(--theme-color) 78%, black);

	--theme-800:
		color-mix(in srgb, var(--theme-color) 86%, black);

	--theme-900:
		color-mix(in srgb, var(--theme-color) 92%, black);

	/* TRANSPARENCY */
	--theme-soft:
		color-mix(in srgb, var(--theme-color) 14%, transparent);

	--theme-soft-2:
		color-mix(in srgb, var(--theme-color) 20%, transparent);

	/* AUTO GRADIENT */
	--theme-gradient-light: linear-gradient(
		135deg,
		var(--theme-200) 0%,
		var(--theme-300) 40%,
		var(--theme-color) 100%
	);

	--theme-gradient-dark: linear-gradient(
		135deg,
		var(--theme-color) 0%,
		var(--theme-700) 45%,
		#0f172a 100%
	);
}


/* =========================================================
   LIGHT MODE
========================================================= */

#profile-container-inner[data-luminance="light"] {

	/* BASE */
	--profile-bg-color:
		color-mix(in srgb, var(--theme-color) 4%, white);

	/* TEXT */
	--text-color: #111827;
	--text-muted: rgba(17,24,39,.64);

	/* SURFACE */
	--surface-color: rgba(255,255,255,.72);
	--surface-secondary: rgba(255,255,255,.92);

	/* PILL */
	--pill-bg: var(--theme-700);
	--pill-text: #ffffff;

	/* BORDER */
	--border:
		color-mix(in srgb, var(--theme-color) 10%, transparent);

	/* BUTTON */
	--button-border: var(--theme-soft);

	/* ICON */
	--icon-color: var(--theme-700);

	/* ACCENT */
	--accent-color: var(--theme-700);

	/* GRADIENT */
	--accent-bg: var(--theme-gradient-light);
}


/* =========================================================
   DARK MODE
========================================================= */

#profile-container-inner[data-luminance="dark"] {

	/* BASE */
	--profile-bg-color:
		color-mix(in srgb, var(--theme-color) 12%, #050505);

	/* TEXT */
	--text-color: #f8fafc;
	--text-muted: rgba(248,250,252,.7);

	/* SURFACE */
	--surface-color: rgba(255,255,255,.05);
	--surface-secondary: rgba(255,255,255,.08);

	/* PILL */
	--pill-bg: var(--theme-200);
	--pill-text: #111827;

	/* BORDER */
	--border:
		color-mix(in srgb, var(--theme-color) 18%, transparent);

	/* BUTTON */
	--button-border: var(--theme-soft-2);

	/* ICON */
	--icon-color: var(--theme-200);

	/* ACCENT */
	--accent-color: var(--theme-200);

	/* GRADIENT */
	--accent-bg: var(--theme-gradient-dark);
}

/* =========================
   THEME UTILITIES
========================= */

.text-theme {
	color: var(--text-color) !important;
}

.text-theme-muted {
	color: var(--text-muted) !important;
}

.bg-theme-surface {
	background: var(--surface-color) !important;
}

.bg-theme-surface-2 {
	background: var(--surface-secondary) !important;
}

.border-theme {
	border-color: var(--button-border) !important;
}

.icon-theme {
	color: var(--icon-color) !important;
}

/* =========================
   BUTTON THEME
========================= */

.btn-theme {
	background: var(--pill-bg);
	color: var(--pill-text);
	border: none;
	transition: all .2s ease;
}

.btn-theme:hover {
	background: var(--pill-bg);
	color: var(--pill-text);
	opacity: .92;
	transform: translateY(-1px);
}

.btn-theme:active {
	transform: scale(.98);
}

.btn-theme:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--surface-secondary);
}

/* =========================
   OUTLINE
========================= */

.btn-theme-outline {
	background: transparent;
	color: var(--text-color);
	border: 1px solid var(--button-border);
	transition: all .2s ease;
}

.btn-theme-outline:hover {
	background: var(--surface-secondary);
	color: var(--text-color);
	border-color: var(--button-border);
}

.btn-theme-outline:active {
	transform: scale(.98);
}

.btn-theme-outline:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--surface-secondary);
}

/* =========================
   GHOST
========================= */

.btn-theme-ghost {
	background: transparent;
	color: var(--text-color);
	border: none;
	transition: all .2s ease;
}

.btn-theme-ghost:hover {
	background: var(--surface-secondary);
	color: var(--text-color);
}

.btn-theme-ghost:active {
	transform: scale(.98);
}

/* =========================
   SOFT
========================= */

.btn-theme-soft {
	background: var(--surface-secondary);
	color: var(--text-color);
	border: none;
	transition: all .2s ease;
}

.btn-theme-soft:hover {
	opacity: .9;
	color: var(--text-color);
}

/* =========================
   ICON BUTTON
========================= */

.btn-theme-icon {
	width: 44px;
	height: 44px;
	padding: 0;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border: none;
	border-radius: 999px;

	background: var(--surface-secondary);
	color: var(--icon-color);

	transition: all .2s ease;
}

.btn-theme-icon:hover {
	transform: translateY(-1px);
	background: var(--surface-color);
	color: var(--icon-color);
}

/* =========================
   NAV THEME
========================= */

.nav-theme .nav-link {
	color: var(--text-color)!important;
	background: transparent;
	border: none;
	transition: all .2s ease;
}

.nav-theme .nav-link:hover {
	background: var(--surface-secondary)!important;
	color: var(--text-color)!important;
}

.nav-theme .nav-link.active,
.nav-theme .show > .nav-link {
	background: var(--pill-bg) !important;
	color: var(--pill-text) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* =========================
   BASE STYLES
========================= */
body {
	font-family: Arial, sans-serif;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a{
   text-decoration:none;
   color:var(--accent-color);
}

/* =========================
   UTILITIES
========================= */
.z-200 {
	z-index: 200;
}

.topbar{

   position:relative;

   top:12px;

   margin-left:12px;

   backdrop-filter:blur(18px);

   border:
   1px solid var(--border);

   border-radius:
   999px 0 0 999px;

   box-shadow:var(--shadow);

}

/* MASUK */
.topbar-show{

   animation:
   topbarSlideIn .7s cubic-bezier(.22,1,.36,1) forwards;

}

/* KELUAR */
.topbar-hide{

   animation:
   topbarSlideOut .7s cubic-bezier(.22,1,.36,1) forwards;

}

@keyframes topbarSlideIn{

   from{

      transform:
      translateX(100vw);

      opacity:0;

   }

   to{

      transform:
      translateX(0);

      opacity:1;

   }

}

@keyframes topbarSlideOut{

   from{

      transform:
      translateX(0);

      opacity:1;

   }

   to{

      transform:
      translateX(100vw);

      opacity:0;

   }

}

.topbar-avatar{

   width:38px;
   height:38px;

   border-radius:50%;

   object-fit:cover;
}

.badge-mx-online{

   font-size:.72rem;

   background: var(--surface-secondary);

   color:var(--status-online);
   
}

.transition {
	transition-property: transform, opacity;
}

.duration-300 {
	transition-duration: .3s;
}

.ease-out {
	transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

.max-w-profileContainer {
	max-width: var(--profile-container-desktop-width);
}

.shadow-layer {
	box-shadow: 0 24px 32px 0 rgba(0, 0, 0, .15);
}

.rounded-top-layer {
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
}

/* =========================
   LAYOUT / COMPONENT BASE
========================= */
#profile-container-inner {
	position: relative;
}

.bg-profile {
	position: fixed;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--profile-bg-color);
}

.h-profile-container {
	height: calc(100vw - 80px);
}

.w-profile-header {
	width: 100vw;
}

.h-profile-header {
	height: 100vw;
}

.z-n2 {
	z-index: -2;
}

.w-12 {
	width: 12rem;
}

/* =========================
   RESPONSIVE (SM ≥576px)
========================= */
@media (min-width: 576px) {

	.position-sm-absolute {
		position: absolute !important;
	}

	.min-h-container {
		min-height: calc(100vh - 2.5rem);
		min-height: calc(100lvh - 2.5rem);
	}

	.clip-container {
		-webkit-clip-path: inset(0 calc(50% - min(50%, 290px)) 0 calc(50% - min(50%, 290px)) round 24px 24px 0 0);
		clip-path: inset(0 calc(50% - min(50%, 290px)) 0 calc(50% - min(50%, 290px)) round 24px 24px 0 0);
	}

	.rounded-top-profile {
		border-top-left-radius: 1.5rem;
		border-top-right-radius: 1.5rem;
	}

	.h-profile-container {
		height: calc(var(--profile-container-desktop-width) - 80px);
	}

	.h-profile-header {
		height: var(--profile-container-desktop-width);
	}

	.w-profile-header {
		width: var(--profile-container-desktop-width);
	}

	.overflow-sm-hidden {
		overflow: hidden;
	}
}

@keyframes headerScrollFade_outer {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(100px) scale(1.01);
	}
}

@keyframes headerScrollFade_inner {
	0% {
		transform: translateY(0) scale(1);
	}

	100% {
		transform: translateY(-50px) scale(1.1);
	}
}

@supports (animation-timeline: scroll(root)) and (not (prefers-reduced-motion: reduce)) {

	.lt-outer {
		animation: headerScrollFade_outer ease-out forwards;
		animation-timeline: scroll(root);
		animation-range: 40px min(50vh, 600px);
	}

	.lt-inner {
		animation: headerScrollFade_inner ease-out forwards;
		animation-timeline: scroll(root);
		animation-range: 40px min(70vh, 900px);
	}
}

.h-profile-header.w-profile-header {
	opacity: 0;
	transition: opacity .2s ease-out;
}

.h-profile-header.w-profile-header.is-ready {
	opacity: 1;
}

/*
==================================================
HERO
==================================================
*/

.hero-card{

   position:relative;

   overflow:hidden;

   border-radius:36px;

   padding:32px;

   min-height:340px;

   background:var(--accent-bg);

   box-shadow:
   0 20px 60px rgba(0,0,0,.35);
   
   transition:
   transform .35s ease,
   opacity .35s ease;
}

/* KELUAR */
.hero-out-left{
   opacity:0;
   transform:translateX(-60px);
}

.hero-out-right{
   opacity:0;
   transform:translateX(60px);
}

/* MASUK */
.hero-in-left{
   opacity:0;
   transform:translateX(60px);
}

.hero-in-right{
   opacity:0;
   transform:translateX(-60px);
}

/*
==================================================
CONTENT
==================================================
*/

.hero-content{

   position:relative;

   z-index:2;

   max-width:260px;
}

.hero-badge{

   display:inline-flex;

   align-items:center;

   gap:8px;

   padding:
   10px 16px;

   border-radius:999px;

   background:
   rgba(255,255,255,.12);

   backdrop-filter:blur(12px);

   color:var(--text-color);

   font-size:.8rem;
}

.hero-title{

   margin-top:22px;

   font-size:3rem;

   line-height:.95;

   font-weight:800;

   letter-spacing:-.06em;

   color:var(--text-color);
   
   display: -webkit-box;
  -webkit-line-clamp: 3; /* jumlah baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-desc{

   margin-top:18px;

   line-height:1.8;

   color:var(--text-muted);
}

.hero-btn{

   margin-top:24px;

   height:54px;

   padding:
   0 22px;

   border:none;

   border-radius:18px;

   font-weight:700;

   transition:.3s;
}

.hero-btn:hover{

   transform:
   translateY(-2px);
}

/*
==================================================
VISUAL
==================================================
*/

.hero-visual{

   position:absolute;

   top:18px;
   right:18px;

   width:180px;
   height:180px;

   z-index:1;
}

/*
==================================================
ORB
==================================================
*/

.hero-orb{

   position:absolute;

   inset:0;

   border-radius:50%;

   background:
   radial-gradient(
      circle,
      rgba(255,255,255,.25),
      transparent 70%
   );

   filter:blur(10px);

   transform:scale(1.2);
}

/*
==================================================
IMAGE
==================================================
*/

.hero-visual img{

   position:relative;

   width:100%;
   height:100%;

   object-fit:cover;

   border-radius:50%;

   border:
   4px solid rgba(255,255,255,.18);

   box-shadow:
   0 20px 50px rgba(0,0,0,.35);
}

/*
==================================================
SECTION
==================================================
*/

.section-title{

   font-size:1rem;

   font-weight:700;

   margin-bottom:10px;
   
   display: -webkit-box;
  -webkit-line-clamp: 2; /* jumlah baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
==================================================
STORY RAIL
==================================================
*/

.story-rail{

   display:flex;

   gap:14px;

   overflow-x:auto;

   scrollbar-width:none;

   padding-bottom:2px;
}

.story-rail::-webkit-scrollbar{
   display:none;
}

.story-card{

   min-width:200px;

   background:
   var(--surface-color);

   border:
   1px solid var(--border);

   border-radius:24px;

   overflow:hidden;

   transition:.3s;
}

.story-card:hover{

   transform:
   translateY(-3px);
}

.story-card img{

   width:100%;

   aspect-ratio:1/1;

   object-fit:cover;
}

.story-content{

   padding:16px;
}

.story-content [data-role="description"]{

   display:-webkit-box;

   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;

   overflow:hidden;
}

/*
==================================================
LINK LIST
==================================================
*/

.link-list{

   display:flex;
   flex-direction:column;
   gap:14px;
}

.link-card{

   background:
   var(--surface-color);

   border:
   1px solid var(--border);

   border-radius:24px;

   padding:10px;

   transition:.3s;
}

.link-card:hover{

   transform:
   translateY(-2px);

   background:
   var(--surface-secondary);
}

.arrow{

   width:44px;
   height:44px;

   border-radius:16px;

   background:var(--surface-color);

   display:flex;

   align-items:center;
   justify-content:center;
}

.link-card .min-w-0{
   flex:1;
   min-width:0;
   max-width:250px;
}

.link-card [data-role="title"]{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

.link-card [data-role="description"]{

   display:-webkit-box;

   -webkit-line-clamp:2;
   -webkit-box-orient:vertical;

   overflow:hidden;
}

.link-card [data-role="image"]{
    
   width:56px;
   height:56px;
   border-radius:16px;
   overflow:hidden;
   flex-shrink:0;
}