/**
 * Jeon Core — Frontend Styles
 * Countdown timer + kode bukti kerja
 *
 * Desain: Clean & trustworthy — memberi kesan profesional
 * kepada worker, mengurangi kebingungan, meningkatkan completion rate.
 */

/* ── Import Font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ── Root Variables ──────────────────────────────────────── */
:root {
    --jc-primary:     #1a56db;
    --jc-primary-dk:  #1e429f;
    --jc-accent:      #0e9f6e;
    --jc-danger:      #e02424;
    --jc-warn:        #d97706;
    --jc-bg:          #f8fafc;
    --jc-surface:     #ffffff;
    --jc-border:      #e2e8f0;
    --jc-text:        #1e293b;
    --jc-muted:       #64748b;
    --jc-radius:      14px;
    --jc-shadow:      0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    --jc-shadow-lg:   0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
    --jc-font:        'Sora', sans-serif;
    --jc-mono:        'JetBrains Mono', monospace;
    --jc-transition:  all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.jc-wrapper {
    font-family: var(--jc-font);
    color: var(--jc-text);
    margin: 32px 0 24px;
    position: relative;
}

/* ── Card Container ──────────────────────────────────────── */
.jc-card {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    box-shadow: var(--jc-shadow);
    overflow: hidden;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Card Header ─────────────────────────────────────────── */
.jc-header {
    background: linear-gradient(135deg, var(--jc-primary) 0%, var(--jc-primary-dk) 100%);
    padding: 20px 24px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.jc-header-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.jc-header-icon svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}
.jc-header-text h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.jc-header-text p {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,.75);
    font-weight: 400;
}

/* ── Progress Bar ────────────────────────────────────────── */
.jc-progress-bar-wrap {
    background: rgba(255,255,255,.2);
    height: 4px;
}
.jc-progress-bar {
    height: 4px;
    background: #fff;
    width: 100%;
    transition: width 1s linear;
    transform-origin: left;
}

/* ── Card Body ───────────────────────────────────────────── */
.jc-body {
    padding: 28px 24px 24px;
}

/* ── Steps Indicator ─────────────────────────────────────── */
.jc-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
}
.jc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}
.jc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 2px;
    background: var(--jc-border);
    z-index: 0;
    transition: background .4s ease;
}
.jc-step.done:not(:last-child)::after {
    background: var(--jc-accent);
}
.jc-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--jc-border);
    background: var(--jc-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--jc-muted);
    position: relative;
    z-index: 1;
    transition: var(--jc-transition);
}
.jc-step.active .jc-step-dot {
    border-color: var(--jc-primary);
    background: var(--jc-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(26,86,219,.15);
}
.jc-step.done .jc-step-dot {
    border-color: var(--jc-accent);
    background: var(--jc-accent);
    color: #fff;
}
.jc-step-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--jc-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.jc-step.active .jc-step-label  { color: var(--jc-primary); }
.jc-step.done  .jc-step-label   { color: var(--jc-accent); }

/* ── Phase: Countdown ────────────────────────────────────── */
#jc-phase-countdown { display: block; }
#jc-phase-code      { display: none; }
#jc-phase-done      { display: none; }

/* Countdown Display */
.jc-countdown-display {
    text-align: center;
    margin-bottom: 20px;
}
.jc-timer-ring-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
}
.jc-timer-ring {
    transform: rotate(-90deg);
    width: 140px;
    height: 140px;
}
.jc-timer-ring-bg {
    fill: none;
    stroke: var(--jc-border);
    stroke-width: 6;
}
.jc-timer-ring-fg {
    fill: none;
    stroke: var(--jc-primary);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 377; /* 2 * pi * 60 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke .5s ease;
}
.jc-timer-ring-fg.warning { stroke: var(--jc-warn); }
.jc-timer-ring-fg.urgent  { stroke: var(--jc-danger); }
.jc-timer-number {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.jc-timer-seconds {
    font-family: var(--jc-mono);
    font-size: 38px;
    font-weight: 700;
    color: var(--jc-text);
    line-height: 1;
    letter-spacing: -.03em;
    transition: color .5s ease;
}
.jc-timer-seconds.warning { color: var(--jc-warn); }
.jc-timer-seconds.urgent  { color: var(--jc-danger); }
.jc-timer-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--jc-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}

/* Page counter */
.jc-page-info {
    font-size: 13px;
    color: var(--jc-muted);
    margin-bottom: 16px;
}
.jc-page-info strong {
    color: var(--jc-primary);
    font-weight: 700;
}

/* Instruction */
.jc-instruction {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #1e40af;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}
.jc-instruction svg {
    flex-shrink: 0;
    margin-top: 1px;
    width: 16px;
    height: 16px;
    fill: #3b82f6;
}

/* ── Phase: Kode ─────────────────────────────────────────── */
.jc-code-reveal {
    text-align: center;
}
.jc-code-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--jc-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}
.jc-code-box {
    background: #f1f5f9;
    border: 2px dashed var(--jc-border);
    border-radius: 12px;
    padding: 20px 16px;
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
    transition: var(--jc-transition);
}
.jc-code-box:hover {
    border-color: var(--jc-primary);
    background: #eff6ff;
}
.jc-code-text {
    font-family: var(--jc-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--jc-text);
    letter-spacing: .08em;
    word-break: break-all;
    user-select: all;
}
.jc-copy-hint {
    font-size: 11px;
    color: var(--jc-muted);
    margin-top: 8px;
}
.jc-copy-hint svg {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: 3px;
}

/* Copy toast */
.jc-copy-toast {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--jc-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    white-space: nowrap;
}
.jc-copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Copy button */
.jc-btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jc-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 22px;
    font-family: var(--jc-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--jc-transition);
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}
.jc-btn-copy:hover {
    background: var(--jc-primary-dk);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,86,219,.3);
}
.jc-btn-copy:active {
    transform: translateY(0);
}
.jc-btn-copy.copied {
    background: var(--jc-accent);
}
.jc-btn-copy svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* Next article link */
.jc-next-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jc-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 0;
    transition: color .2s;
    width: 100%;
    justify-content: center;
}
.jc-next-link:hover {
    color: var(--jc-primary);
}
.jc-next-link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ── Phase: Done ─────────────────────────────────────────── */
.jc-done-wrap {
    text-align: center;
    padding: 8px 0;
}
.jc-done-icon {
    width: 64px;
    height: 64px;
    background: #ecfdf5;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jc-done-icon svg {
    width: 32px;
    height: 32px;
    fill: var(--jc-accent);
}
.jc-done-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--jc-text);
    margin: 0 0 6px;
}
.jc-done-sub {
    font-size: 13px;
    color: var(--jc-muted);
    margin: 0 0 20px;
}

/* ── Saving Indicator ────────────────────────────────────── */
.jc-saving {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--jc-muted);
}
.jc-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--jc-border);
    border-top-color: var(--jc-primary);
    border-radius: 50%;
    animation: jc-spin .7s linear infinite;
}
@keyframes jc-spin {
    to { transform: rotate(360deg); }
}

/* ── Entrance Animations ─────────────────────────────────── */
@keyframes jc-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes jc-scale-in {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
.jc-card {
    animation: jc-fade-up .5s cubic-bezier(.4,0,.2,1) both;
}
#jc-phase-code {
    animation: jc-scale-in .4s cubic-bezier(.4,0,.2,1) both;
}

/* ── Pulse saat kode muncul ──────────────────────────────── */
@keyframes jc-pulse-border {
    0%   { box-shadow: 0 0 0 0 rgba(26,86,219,.4); }
    70%  { box-shadow: 0 0 0 10px rgba(26,86,219,0); }
    100% { box-shadow: 0 0 0 0 rgba(26,86,219,0); }
}
.jc-code-box.pulse {
    animation: jc-pulse-border .8s ease;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .jc-card { border-radius: 10px; }
    .jc-body { padding: 20px 16px 18px; }
    .jc-timer-ring-wrap { width: 120px; height: 120px; }
    .jc-timer-ring { width: 120px; height: 120px; }
    .jc-timer-seconds { font-size: 32px; }
    .jc-code-text { font-size: 20px; }
    .jc-step-label { display: none; }
}