/* ================================================================
   KONTAK — standalone CSS
   Warna mengikuti CSS variable tema dari head.php
   ================================================================ */

/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.ktk-bc-bar { background:#fff; border-bottom:1px solid #e8ede9; padding:10px 0; }
.ktk-bc { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; font-size:13px; color:#7a9487; }
.ktk-bc li+li::before { content:'/'; margin-right:6px; color:#b0c4ba; }
.ktk-bc li a { color:var(--green-main); text-decoration:none; }
.ktk-bc li a:hover { text-decoration:underline; }
.ktk-bc li.active { color:#4a6358; }
.ktk-bc li i { margin-right:4px; }

/* ─── WRAPPER ────────────────────────────────────────────────── */
.ktk-wrap { background:#f0f2f0; padding:32px 0 52px; min-height:60vh; overflow-x:hidden; }

/* ─── FORM CARD ──────────────────────────────────────────────── */
.ktk-form-card {
    background:#fff; border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    overflow:hidden; margin-bottom:20px;
}
.ktk-card-header {
    background:linear-gradient(135deg, var(--green-dark), var(--green-main));
    padding:18px 24px;
}
.ktk-card-header h2 {
    color:#fff; font-size:17px; font-weight:700; margin:0;
    display:flex; align-items:center; gap:10px;
}
.ktk-card-header h2 i { font-size:18px; }
.ktk-card-body { padding:24px; }

/* Flash message */
.ktk-flash {
    color:var(--green-dark); font-weight:600;
    background:rgba(var(--primary-mid-rgb),.08);
    border-left:4px solid var(--green-main);
    padding:10px 14px; border-radius:6px;
    margin-bottom:18px; font-size:14px;
}

/* Form elements */
.ktk-row { display:flex; gap:14px; margin-bottom:0; }
.ktk-row .ktk-form-group { flex:1; }
.ktk-form-group { margin-bottom:16px; }
.ktk-label {
    display:block; font-size:13px; font-weight:600;
    color:#4a6358; margin-bottom:6px;
}
.ktk-input,
.ktk-textarea {
    width:100%; padding:10px 14px;
    border:1px solid #d0dbd4; border-radius:8px;
    font-size:14px; color:#1a2b1f;
    background:#fafbfa; font-family:inherit;
    transition:border-color .18s, box-shadow .18s;
    outline:none; box-sizing:border-box;
}
.ktk-input:focus,
.ktk-textarea:focus {
    border-color:var(--green-main);
    box-shadow:0 0 0 3px rgba(var(--primary-mid-rgb),.12);
    background:#fff;
}
.ktk-textarea { resize:vertical; min-height:130px; }

.ktk-recaptcha-wrap { margin-bottom:16px; }

.ktk-btn {
    width:100%; padding:11px 20px;
    background:var(--green-main); color:#fff;
    border:none; border-radius:8px;
    font-size:14px; font-weight:700;
    font-family:inherit; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .18s;
}
.ktk-btn:hover:not(:disabled) { background:var(--green-dark); }
.ktk-btn:disabled { opacity:.45; cursor:not-allowed; }

/* ─── INFO CARD ──────────────────────────────────────────────── */
.ktk-info-card {
    background:#fff; border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    overflow:hidden;
}
.ktk-info-header {
    background:linear-gradient(135deg, var(--green-dark), var(--green-main));
    padding:18px 24px;
}
.ktk-info-header h3 {
    color:#fff; font-size:15px; font-weight:700; margin:0;
    display:flex; align-items:center; gap:10px;
}
.ktk-info-body { padding:18px 22px 10px; }

.ktk-info-item {
    display:flex; gap:14px; align-items:flex-start;
    padding:14px 0; border-bottom:1px solid #f0f2f0;
}
.ktk-info-item:last-child { border-bottom:none; }

.ktk-info-icon {
    flex-shrink:0; width:38px; height:38px;
    border-radius:50%;
    background:rgba(var(--primary-mid-rgb),.1);
    color:var(--green-main);
    display:flex; align-items:center; justify-content:center;
    font-size:15px;
}
.ktk-info-text { flex:1; }
.ktk-info-label {
    font-size:11.5px; color:#7a9487; font-weight:600;
    text-transform:uppercase; letter-spacing:.5px;
    margin:0 0 4px;
}
.ktk-info-value {
    font-size:13.5px; color:#1a2b1f;
    line-height:1.6; margin:0;
    word-break:break-word;
}
.ktk-info-empty { padding:20px; color:#7a9487; font-style:italic; font-size:13px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:767px) {
    .ktk-wrap { padding:20px 0 36px; }
    .ktk-row { flex-direction:column; gap:0; }
    .ktk-card-body { padding:18px; }
}