/* --- Base Styles --- */
.tutorial-article { 
    padding: 80px 0; 
    color: var(--text-main, #333); 
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Breadcrumb & Header --- */
.breadcrumb {
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.tut-header { margin-bottom: 40px; }
.tut-header h1 { 
    font-size: 2.5rem; 
    margin-bottom: 8px; 
    color: var(--text-main, #111827); 
}
.tut-meta { color: var(--text-muted, #6b7280); }

/* --- Content Typography --- */
.tut-content { line-height: 1.8; }
.tut-content h2, .tut-content h3 {
    margin: 32px 0 16px;
    color: var(--text-main, #111827);
}
.tut-content p { margin-bottom: 20px; }

/* --- Styling List Pendaftaran --- */
.tut-content ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.tut-content ol li {
    margin-bottom: 25px; 
    padding-left: 10px;
    line-height: 1.8;
}

.tut-content ol li::marker {
    font-weight: bold;
    color: #3b82f6;
    font-size: 1.1rem;
}

.tut-content code {
    background: #f8f9fa;
    padding: 3px 6px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    color: #d63384;
    font-weight: 500;
}

/* --- BOX NOTIFIKASI --- */
.tut-box {
    padding: 15px;
    border-radius: 6px;
    margin: 18px 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.tut-box.green { 
    background-color: rgba(37, 211, 102, 0.08); 
    border-left: 3px solid #25d366; 
    color: #1a7d3f; 
}
.tut-box.yellow { 
    background-color: rgba(255, 193, 7, 0.08); 
    border-left: 3px solid #ffc107; 
    color: #856404; 
}
.tut-box.red { 
    background-color: rgba(220, 53, 69, 0.08); 
    border-left: 3px solid #dc3545; 
    color: #721c24; 
}

/* --- TOMBOL SHARE --- */
.share-container { 
    margin-top: 50px; 
    padding-top: 30px; 
    border-top: 1px solid #e5e7eb; 
}
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #3b82f6;
    color: #ffffff !important;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-share:hover { 
    background: #2563eb; 
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .tut-header h1 { font-size: 1.8rem; }
}