/* Main CSS File for RPL Website */

/* Custom Scrollbar - Global */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0b0c10;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff4f59;
}

/* Utility Hide Scrollbar */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Gradient Text Helper */
.text-gradient {
  background: linear-gradient(to right, #ff4f59, #ff9057);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Grid Pattern - Lebih Halus */
.bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* Glass Card Base Style */
.glass-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Button System - Sass-like Approach */

/* Button Variables */
:root {
  --btn-primary-bg: linear-gradient(135deg, #ff4f59 0%, #ff9057 100%);
  --btn-primary-hover: linear-gradient(135deg, #ff6b71 0%, #ffa069 100%);
  --btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --btn-secondary-hover: rgba(255, 255, 255, 0.1);
  --btn-glass-bg: rgba(255, 255, 255, 0.05);
  --btn-glass-hover: rgba(255, 255, 255, 0.1);
  --btn-border-color: rgba(255, 255, 255, 0.1);
  --btn-border-hover: rgba(255, 255, 255, 0.3);
  --btn-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --btn-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  --btn-primary-shadow: 0 4px 15px rgba(255, 79, 89, 0.3);
  --btn-primary-shadow-hover: 0 8px 30px rgba(255, 79, 89, 0.5);
  --btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --btn-radius-sm: 0.5rem;
  --btn-radius-md: 0.75rem;
  --btn-radius-lg: 1rem;
  --btn-radius-full: 9999px;
  --btn-padding-xs: 0.5rem 1rem;
  --btn-padding-sm: 0.75rem 1.5rem;
  --btn-padding-md: 1rem 2rem;
  --btn-padding-lg: 1.25rem 2.5rem;
}

/* Base Button Mixin */
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: var(--btn-transition);
  position: relative;
  overflow: hidden;
  outline: none;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-base:focus-visible {
  outline: 2px solid rgba(255, 79, 89, 0.5);
  outline-offset: 2px;
}

.btn-base:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Size Variants */
.btn-xs {
  padding: var(--btn-padding-xs);
  font-size: 0.75rem;
  border-radius: var(--btn-radius-sm);
}

.btn-sm {
  padding: var(--btn-padding-sm);
  font-size: 0.875rem;
  border-radius: var(--btn-radius-md);
}

.btn-md {
  padding: var(--btn-padding-md);
  font-size: 1rem;
  border-radius: var(--btn-radius-lg);
}

.btn-lg {
  padding: var(--btn-padding-lg);
  font-size: 1.125rem;
  border-radius: var(--btn-radius-full);
}

/* Button Style Variants */
.btn-primary {
  background: var(--btn-primary-bg);
  color: white;
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--btn-primary-shadow);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: white;
  border-color: var(--btn-border-color);
  box-shadow: var(--btn-shadow);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover);
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow);
}

/* Glass Button - Enhanced */
.btn-glass {
  background: var(--btn-glass-bg);
  color: rgba(255, 255, 255, 0.8);
  border-color: var(--btn-border-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--btn-shadow);
}

.btn-glass:hover {
  background: var(--btn-glass-hover);
  color: white;
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.btn-glass:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow);
}

/* Outline Button */
.btn-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: var(--btn-border-color);
}

.btn-outline:hover {
  background: var(--btn-secondary-bg);
  color: white;
  border-color: var(--btn-border-hover);
  transform: translateY(-1px);
}

.btn-outline:active {
  transform: translateY(0);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--btn-secondary-bg);
  color: white;
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: translateY(0);
}

/* Icon Button */
.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--btn-radius-full);
}

.btn-icon-sm {
  width: 2rem;
  height: 2rem;
}

.btn-icon-lg {
  width: 3rem;
  height: 3rem;
}

/* Button with Icon */
.btn-with-icon {
  position: relative;
  padding-left: 2.5rem;
}

.btn-with-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Button Groups */
.btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-group-vertical {
  flex-direction: column;
}

/* Button Loading State */
.btn-loading {
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button Ripple Effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}

.btn-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Button Glow Effect */
.btn-glow {
  position: relative;
}

.btn-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.btn-glow:hover::before {
  opacity: 0.7;
}

/* Button Gradient Text */
.btn-gradient-text {
  background: linear-gradient(to right, #ff4f59, #ff9057);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Button with Badge */
.btn-with-badge {
  position: relative;
}

.btn-badge {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  background: #ff4f59;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
}

/* Button Social Variants */
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--btn-radius-full);
  background: var(--btn-glass-bg);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--btn-border-color);
  transition: var(--btn-transition);
}

.btn-social:hover {
  background: var(--btn-glass-hover);
  color: white;
  border-color: var(--btn-border-hover);
  transform: translateY(-2px) scale(1.05);
}

.btn-social-instagram:hover {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  border-color: transparent;
}

.btn-social-github:hover {
  background: #333;
  border-color: #333;
}

.btn-social-linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
}

.btn-social-youtube:hover {
  background: #ff0000;
  border-color: #ff0000;
}

.btn-social-tiktok:hover {
  background: #000000;
  border-color: #000000;
}

/* Button Floating Action */
.btn-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: white;
  border: none;
  box-shadow: var(--btn-primary-shadow);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: var(--btn-transition);
}

.btn-fab:hover {
  background: var(--btn-primary-hover);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-2px) scale(1.05);
}

.btn-fab:active {
  transform: translateY(0) scale(0.95);
}

/* Legacy Button Classes for Compatibility */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: var(--btn-transition);
  position: relative;
  overflow: hidden;
  outline: none;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent;
  padding: var(--btn-padding-md);
  font-size: 1rem;
  border-radius: var(--btn-radius-lg);
  background: var(--btn-primary-bg);
  color: #fff;
  box-shadow: var(--btn-primary-shadow);
}

/* Gradient Mask */
.mask-gradient-x {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
}

/* Animations */
.typing-dot {
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Chat window animation */
.chat-enter {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bento Card Spotlight Effect */
.bento-card {
  position: relative;
  overflow: hidden;
}

.spotlight-effect {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bento-card:hover .spotlight-effect {
  opacity: 1;
}

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Tech Tag Component */
.tech-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #cbd5e1;
  transition: all 0.3s ease;
}

.tech-tag:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

/* Float Animation */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }

  .show-desktop {
    display: block !important;
  }
}

/* Base Button Surface */
.btn-base {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-base:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.07) 100%
  );
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 34px rgba(0, 0, 0, 0.4);
}

.btn-base:active {
  transform: translateY(0) scale(0.98);
}

/* Unified Design System */
:root {
  --rpl-bg: #0b1020;
  --rpl-surface: #121a2b;
  --rpl-surface-soft: #0f1726;
  --rpl-text: #eaf0ff;
  --rpl-muted: #9fb0d0;
  --rpl-accent: #22d3ee;
  --rpl-accent-2: #3b82f6;
  --rpl-border: rgba(255, 255, 255, 0.1);
  --rpl-card-radius: 1.25rem;
  --rpl-shadow: 0 12px 34px rgba(3, 7, 18, 0.45);
  --btn-primary-bg: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  --btn-primary-hover: linear-gradient(135deg, #67e8f9 0%, #60a5fa 100%);
  --btn-primary-shadow: 0 4px 15px rgba(34, 211, 238, 0.3);
  --btn-primary-shadow-hover: 0 8px 30px rgba(37, 99, 235, 0.45);
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--rpl-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: "Sora", sans-serif;
  letter-spacing: -0.02em;
}

p,
li,
small {
  color: var(--rpl-muted);
}

.text-gradient {
  background: linear-gradient(
    135deg,
    var(--rpl-accent) 0%,
    var(--rpl-accent-2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass-card,
.bento-card,
.student-card,
.teacher-card,
.skills-globe-panel {
  border-radius: var(--rpl-card-radius);
  border: 1px solid var(--rpl-border);
  background: linear-gradient(
    160deg,
    rgba(18, 26, 43, 0.92),
    rgba(15, 23, 38, 0.9)
  );
  box-shadow: var(--rpl-shadow);
}