/* Typography */
:root{
  --ff-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Elevated modern gradient palette */
  --accent: #5b6cff;      /* blue-violet */
  --accent-2: #7a5cff;    /* purple */
  --accent-3: #f06ea8;    /* pink accent for glow */
  --bg-subtle: #f6f7fb;   /* very light */
  --glass-rgb: 20, 24, 40;/* base rgb for glass (dark-blue) */
}

html,body{ scroll-behavior:smooth; }
body{ font-family:var(--ff-body); }

/* Headings */
h1,h2,h3,h4,h5,h6,.navbar-brand{ font-family:var(--ff-heading); }

.profile-photo {
  width: 320px;         /* atur ukuran lingkaran */
  height: 320px;
  object-fit: cover;    /* potong otomatis biar square */
  border-radius: 50%;   /* paksa bulat */
}


/* Accent overrides */
.text-primary{ color:var(--accent) !important; }
.btn-primary{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #4958ff;
  --bs-btn-hover-border-color:#4958ff;
  --bs-btn-active-bg:#3b49ff;
  --bs-btn-active-border-color:#3b49ff;
}
.btn-outline-primary{
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-border-color: var(--accent);
}

/* Brand gradient text */
.brand-gradient{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Global orbs (parallax-ish feel) */
.bg-orb{
  position: fixed; z-index:-1; border-radius:50%;
  filter: blur(80px); opacity:.35; pointer-events:none;
}
.orb-a{ width:600px; height:600px; background: radial-gradient(circle at 30% 30%, #9fa8ff, transparent 60%); top:-120px; left:-180px; }
.orb-b{ width:700px; height:700px; background: radial-gradient(circle at 60% 40%, #a07bff, transparent 60%); bottom:-220px; right:-220px; }
.orb-c{ width:520px; height:520px; background: radial-gradient(circle at 50% 50%, #ff8ec5, transparent 60%); top:40%; left:-160px; }

/* Sections */
.py-lg-6{ padding-top:6rem!important; padding-bottom:6rem!important; }
.section-gradient-strong{
  background: linear-gradient(135deg, #1f2347 0%, #2a2e60 40%, #3e2a6d 75%, #5a2a6d 100%);
  position: relative;
}

/* Hero */
.hero-section{
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f8 100%);
}
.hero-photo-wrap{ padding: 10px; border-radius: 999px; position: relative; }
.glow-ring{
  position: absolute; inset: -10px; border-radius: 999px;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  filter: blur(16px); opacity:.35; z-index:0;
}
.frosted{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Glass / frosted */
.glass{
  background: rgba(var(--glass-rgb), .12);
  border: 1px solid rgba(var(--glass-rgb), .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
}

/* Skill & Project card hover glow */
.skill-card, .project-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid rgba(var(--glass-rgb), .18);
}
.skill-card:hover, .project-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(16,24,40,.18), 0 0 0 1px rgba(91,108,255,.25);
  border-color: rgba(91,108,255,.45);
}

/* Project thumb */
.project-thumb{ aspect-ratio: 16/10; object-fit: cover; transition: transform .5s ease; }
.project-card:hover .project-thumb{ transform: scale(1.1); }

/* Typewriter */
.typewriter{
  overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent);
  animation: typing 3.2s steps(40, end), blink .9s step-end infinite alternate;
  max-width: 100%;
}
@keyframes typing{ from{ width:0 } to{ width:100% } }
@keyframes blink{ 50%{ border-color: transparent } }

/* Focus outline */
:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Rounded helpers */
.rounded-4{ border-radius: 1rem !important; }

/* =======================
   DARK MODE OVERRIDES
   ======================= */
[data-bs-theme="dark"] {
  background-color: #12141b;
  color: #e2e6f0;
}

[data-bs-theme="dark"] .text-secondary { color: #adb5bd !important; }
[data-bs-theme="dark"] .text-body-secondary { color: #9ca3af !important; }

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .bg-body {
  background-color: #1c1f2a !important;
  color: #e2e6f0 !important;
}

[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
  border-color: rgba(255,255,255,.1) !important;
}

/* Glass cards */
[data-bs-theme="dark"] .glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e6f0;
}

/* Skill & Project cards */
[data-bs-theme="dark"] .skill-card,
[data-bs-theme="dark"] .project-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .skill-card:hover,
[data-bs-theme="dark"] .project-card:hover {
  box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(91,108,255,.25);
}

/* Hero gradient */
[data-bs-theme="dark"] .hero-section {
  background: linear-gradient(180deg, #1c1f2a 0%, #12141b 100%);
}

/* Section gradients */
[data-bs-theme="dark"] .section-gradient-strong {
  background: linear-gradient(135deg, #0f111a 0%, #171a28 50%, #1f2238 100%);
}

/* Buttons */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--accent);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #e2e6f0;
  --bs-btn-border-color: #e2e6f0;
  --bs-btn-hover-bg: #e2e6f0;
  --bs-btn-hover-color: #12141b;
  --bs-btn-hover-border-color: #e2e6f0;
}

/* Project Modal (light mode) */
.project-modal {
  background: #ffffff; /* solid putih */
  color: #212529;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.1);
}

.project-modal .modal-header,
.project-modal .modal-footer {
  border-color: rgba(0,0,0,.1);
}

.project-modal .text-secondary {
  color: #495057 !important;
}

/* Project Modal (dark mode) */
[data-bs-theme="dark"] .project-modal {
  background: #1e2130; /* solid gelap */
  color: #f8f9fa;
  border: 1px solid rgba(255,255,255,.1);
}

[data-bs-theme="dark"] .project-modal .modal-header,
[data-bs-theme="dark"] .project-modal .modal-footer {
  border-color: rgba(255,255,255,.1);
}

[data-bs-theme="dark"] .project-modal .text-secondary {
  color: #cfd4da !important;
}

/* Contact Detail Icons - Light Mode */
#contact .bi {
  color: var(--accent) !important; /* pakai accent biru */
}

/* Contact Detail Icons - Dark Mode */
[data-bs-theme="dark"] #contact .bi {
  color: #f8f9fa !important; /* putih terang */
}