/* ========================================
   UMKMGo - Design System
   "Feminine Digital Empowerment"
   ======================================== */

/* ========================================
   DESIGN TOKENS
   ======================================== */

:root {
    /* Primary - Pink Identity */
    --pink-primary: #D4768A;
    --pink-soft: #F5E4E8;
    --pink-light: #F8EDF0;
    --pink-medium: #E8B4C2;
    --pink-deep: #B8546B;
    --pink-dark: #8A3D4F;
    
    /* Neutrals */
    --bg-warm: #FDF8F6;
    --surface: #FFFFFF;
    --text-primary: #2D2A2A;
    --text-secondary: #6B6363;
    --text-muted: #9A9191;
    --border-light: #EDE8E6;
    
    /* Status */
    --success: #6B9E7E;
    --success-light: #E8F2EC;
    --warning: #D4A76A;
    --warning-light: #F8F0E4;
    --danger: #C47A7A;
    --danger-light: #F5E8E8;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.10);
    
    /* Typography */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* ========================================
   RESET & BASE
   ======================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-warm);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

h1 { font-size: 3rem; line-height: 1.15; }
h2 { font-size: 2.25rem; line-height: 1.2; }
h3 { font-size: 1.75rem; line-height: 1.25; }
h4 { font-size: 1.25rem; line-height: 1.3; }
h5 { font-size: 1.1rem; line-height: 1.3; }
h6 { font-size: 0.95rem; line-height: 1.3; }

p {
    font-family: var(--font-sans);
    color: var(--text-secondary);
    line-height: 1.7;
}

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

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: var(--radius-full);
    padding: 0.6rem 1.6rem;
    transition: all var(--transition-base);
    letter-spacing: 0.01em;
}

.btn-primary {
    background-color: var(--pink-primary);
    border-color: var(--pink-primary);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--pink-deep);
    border-color: var(--pink-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    color: var(--pink-primary);
    border-color: var(--pink-primary);
}
.btn-outline-primary:hover {
    background-color: var(--pink-primary);
    border-color: var(--pink-primary);
    color: #fff;
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}
.btn-success:hover {
    background-color: #5A8A6C;
    border-color: #5A8A6C;
}

.btn-lg {
    padding: 0.8rem 2.4rem;
    font-size: 1.05rem;
}

/* ========================================
   CARDS
   ======================================== */

.card {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: var(--space-lg);
}

/* ========================================
   RIBBON / PITA
   ======================================== */

.ribbon {
    display: inline-block;
    padding: 0.15rem 1rem;
    background: var(--pink-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
}

.ribbon-soft {
    background: var(--pink-soft);
    color: var(--pink-deep);
}

.ribbon-gold {
    background: var(--warning-light);
    color: #A67C3A;
}

.ribbon-green {
    background: var(--success-light);
    color: var(--success);
}

/* Ribbon as underline */
.ribbon-underline {
    position: relative;
    display: inline-block;
}
.ribbon-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--pink-primary);
    border-radius: var(--radius-full);
}

/* ========================================
   SCORE VISUALIZATION
   ======================================== */

/* Circular Progress */
.circular-score {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}

.circular-score svg {
    transform: rotate(-90deg);
}

.circular-score .bg {
    fill: none;
    stroke: var(--pink-soft);
    stroke-width: 8;
}

.circular-score .progress {
    fill: none;
    stroke: var(--pink-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s ease;
}

.circular-score .score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.circular-score .score-number {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.circular-score .score-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

/* ========================================
   SCORE BARS
   ======================================== */

.score-bar {
    margin-bottom: var(--space-md);
}

.score-bar .label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.score-bar .label .value {
    color: var(--pink-primary);
    font-weight: 600;
}

.score-bar .track {
    width: 100%;
    height: 6px;
    background: var(--pink-soft);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.score-bar .track .fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--pink-primary);
    transition: width 1s ease;
}

/* ========================================
   RECOMMENDATION CARDS
   ======================================== */

.rec-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--pink-primary);
    transition: all var(--transition-base);
}

.rec-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.rec-card .rank {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--pink-soft);
    min-width: 40px;
    line-height: 1;
}

.rec-card .content {
    flex: 1;
}

.rec-card .name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.rec-card .score-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pink-primary);
}

.rec-card .tags {
    display: flex;
    gap: var(--space-sm);
    margin: var(--space-xs) 0 var(--space-sm);
}

.rec-card .tags .tag {
    padding: 0.1rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    background: var(--pink-soft);
    color: var(--pink-deep);
}

.rec-card .reason {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

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

.hero {
    padding: var(--space-3xl) 0;
    background: linear-gradient(135deg, #FDF8F6 0%, #F8EDF0 50%, #F5E4E8 100%);
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(212, 118, 138, 0.06);
    pointer-events: none;
}

.hero .ribbon-hero {
    display: inline-block;
    padding: 0.15rem 1.2rem;
    background: var(--pink-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    font-family: var(--font-sans);
}

.hero h1 {
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.hero h1 .highlight {
    color: var(--pink-primary);
}

.hero .subheadline {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

/* ========================================
   STEP INDICATOR
   ======================================== */

.step-indicator {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.step-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.step-item .circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--transition-base);
}

.step-item.active .circle {
    border-color: var(--pink-primary);
    background: var(--pink-primary);
    color: #fff;
}

.step-item.done .circle {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.step-item.active {
    color: var(--text-primary);
}

.step-item.done {
    color: var(--success);
}

/* ========================================
   UPLOAD AREA
   ======================================== */

.upload-area {
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-warm);
}

.upload-area:hover {
    border-color: var(--pink-primary);
    background: var(--pink-light);
}

.upload-area.dragover {
    border-color: var(--pink-primary);
    background: var(--pink-soft);
}

.upload-area .icon {
    font-size: 2.4rem;
    color: var(--pink-primary);
    margin-bottom: var(--space-sm);
}

.upload-area .title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.upload-area .hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ========================================
   PROCESSING SCREEN
   ======================================== */

.processing-steps {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}

.processing-steps .step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    opacity: 0.5;
    transition: all var(--transition-base);
}

.processing-steps .step.done {
    opacity: 1;
}

.processing-steps .step.done .check {
    color: var(--success);
}

.processing-steps .step.active {
    opacity: 1;
}

.processing-steps .step .check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.processing-steps .step.done .check {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.processing-steps .step.active .check {
    border-color: var(--pink-primary);
    border-style: solid;
    animation: pulse-border 1.2s ease infinite;
}

@keyframes pulse-border {
    0%, 100% { border-color: var(--pink-primary); }
    50% { border-color: var(--pink-soft); }
}

/* ========================================
   BADGES / LEVEL
   ======================================== */

.badge-level {
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-sans);
}

.badge-level.pemula {
    background: var(--warning-light);
    color: #A67C3A;
}
.badge-level.bertumbuh {
    background: var(--pink-soft);
    color: var(--pink-deep);
}
.badge-level.berkembang {
    background: var(--success-light);
    color: var(--success);
}
.badge-level.mahir {
    background: #D4E8E0;
    color: #3D7A5A;
}

/* ========================================
   NAVBAR
   ======================================== */

.navbar {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    padding: 0.6rem 0;
}

.navbar .brand {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
}

.navbar .brand .pink {
    color: var(--pink-primary);
}

.navbar .brand .dark {
    color: var(--text-primary);
}

.nav-link {
    font-weight: 500;
    color: var(--text-secondary) !important;
    transition: color var(--transition-fast);
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--radius-sm);
}

.nav-link:hover {
    color: var(--pink-primary) !important;
}

.nav-link.active {
    color: var(--pink-primary) !important;
    background: var(--pink-soft);
}

/* ========================================
   MOBILE BOTTOM NAV
   ======================================== */

.bottom-nav {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-light);
    padding: 0.4rem 0 0.6rem;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.bottom-nav .nav-item i {
    font-size: 1.3rem;
}

.bottom-nav .nav-item.active {
    color: var(--pink-primary);
}

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

.section-heading {
    margin-bottom: var(--space-xl);
}

.section-heading .ribbon {
    margin-bottom: var(--space-sm);
}

.section-heading h2 {
    margin-bottom: var(--space-xs);
}

.section-heading p {
    color: var(--text-secondary);
    max-width: 520px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Mobile First - sudah diatur di atas */

/* Tablet */
@media (min-width: 768px) {
    h1 { font-size: 3.6rem; }
    h2 { font-size: 2.6rem; }
    
    .circular-score {
        width: 160px;
        height: 160px;
    }
    .circular-score .score-number {
        font-size: 2.8rem;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .hero h1 {
        font-size: 4.4rem;
    }
    
    .hero .subheadline {
        font-size: 1.3rem;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .hero h1 {
        font-size: 5rem;
    }
}

/* Mobile Small */
@media (max-width: 375px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    .circular-score {
        width: 110px;
        height: 110px;
    }
    .circular-score .score-number {
        font-size: 1.8rem;
    }
    .btn-lg {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
}

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

.text-pink { color: var(--pink-primary); }
.text-pink-deep { color: var(--pink-deep); }
.bg-pink-soft { background: var(--pink-soft); }
.bg-pink-light { background: var(--pink-light); }

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.section-spacing {
    padding: var(--space-2xl) 0;
}

.section-spacing-sm {
    padding: var(--space-xl) 0;
}

/* ========================================
   DIVIDER
   ======================================== */

.divider {
    width: 60px;
    height: 3px;
    background: var(--pink-primary);
    border-radius: var(--radius-full);
    margin: var(--space-md) 0 var(--space-lg);
}

.divider-center {
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   MISC
   ======================================== */

.avatar-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pink-soft);
    color: var(--pink-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.avatar-initial-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.rounded-12 { border-radius: var(--radius-md); }
.rounded-16 { border-radius: var(--radius-lg); }

.shadow-hover {
    transition: box-shadow var(--transition-base);
}
.shadow-hover:hover {
    box-shadow: var(--shadow-md);
}

.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }