/* ============================================================
   Kalkulator Kubah Masjid v2 — Dark Gold Theme
   Semua class prefix "kmc-" agar tidak bentrok dengan tema WP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap');

/* ── Root ─────────────────────────────────────────────────── */
.kmc-wrap {
    --kmc-gold:      #c9a84c;
    --kmc-gold-lt:   #f0d080;
    --kmc-gold-dk:   #8a6a20;
    --kmc-bg:        #2b2b2b;
    --kmc-panel:     #1e1e1e;
    --kmc-field:     #141414;
    --kmc-border:    #3a3a3a;
    --kmc-text:      #e8e8e8;
    --kmc-muted:     #888;
    --kmc-green:     #4caf7d;
    --kmc-blue:      #5ba4d4;
    --kmc-orange:    #e8a040;

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    max-width: 680px;
    margin: 0 auto 32px;
    color: var(--kmc-text);
    background: var(--kmc-bg);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* ── Header ───────────────────────────────────────────────── */
.kmc-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2010 60%, #1a1a1a 100%);
    padding: 28px 32px 24px;
    border-bottom: 2px solid var(--kmc-gold-dk);
    position: relative;
    overflow: hidden;
}
.kmc-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 80% 50%, rgba(201,168,76,.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(201,168,76,.07) 0%, transparent 60%);
    pointer-events: none;
}
.kmc-eyebrow {
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    letter-spacing: 3px;
    color: var(--kmc-gold);
    margin: 0 0 8px;
    font-weight: 400;
    text-transform: uppercase;
}
.kmc-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--kmc-gold-lt);
    margin: 0;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

/* ── Panel ────────────────────────────────────────────────── */
.kmc-panel {
    padding: 26px 28px 28px;
    background: var(--kmc-panel);
}

/* ── Section label ────────────────────────────────────────── */
.kmc-section { margin-bottom: 18px; }
.kmc-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--kmc-gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

/* ── Model Grid ───────────────────────────────────────────── */
.kmc-model-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.kmc-model-btn {
    background: var(--kmc-field);
    border: 1.5px solid var(--kmc-border);
    border-radius: 6px;
    padding: 12px 6px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: border-color .2s, background .2s, transform .1s;
    color: var(--kmc-muted);
    font-family: inherit;
}
.kmc-model-btn:hover {
    border-color: var(--kmc-gold-dk);
    background: #242424;
    color: var(--kmc-gold-lt);
}
.kmc-model-btn--active {
    border-color: var(--kmc-gold) !important;
    background: #2a2010 !important;
    color: var(--kmc-gold-lt) !important;
}
.kmc-model-btn:active { transform: scale(.97); }

.kmc-model-svg {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kmc-model-svg svg {
    width: 100%;
    height: 100%;
    color: currentColor;
}
.kmc-model-name {
    font-size: .75rem;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.1;
}
.kmc-model-sub {
    font-size: .6rem;
    color: inherit;
    opacity: .65;
    text-align: center;
}

/* ── Inputs ───────────────────────────────────────────────── */
.kmc-inputs-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.kmc-input-group       { flex: 1; min-width: 150px; }
.kmc-input-group label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--kmc-text);
    margin-bottom: 6px;
}
.kmc-input-group input {
    width: 100%;
    background: var(--kmc-field);
    border: 1.5px solid var(--kmc-border);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: .95rem;
    color: var(--kmc-text);
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    -moz-appearance: textfield;
}
.kmc-input-group input::-webkit-outer-spin-button,
.kmc-input-group input::-webkit-inner-spin-button { -webkit-appearance: none; }
.kmc-input-group input:focus {
    border-color: var(--kmc-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}
.kmc-input-group input.kmc-error {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}
.kmc-input-group input::placeholder { color: #555; }

/* ── Auto-fill btn ────────────────────────────────────────── */
.kmc-auto-btn {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px dashed var(--kmc-gold-dk);
    border-radius: 4px;
    color: var(--kmc-gold);
    font-size: .74rem;
    cursor: pointer;
    margin-bottom: 16px;
    font-family: inherit;
    transition: background .2s;
}
.kmc-auto-btn:hover { background: rgba(201,168,76,.07); }

/* ── Divider ──────────────────────────────────────────────── */
.kmc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 18px;
}
.kmc-divider::before,
.kmc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--kmc-border);
}
.kmc-divider span {
    font-family: 'Oswald', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--kmc-gold);
    white-space: nowrap;
}

/* ── Output fields ────────────────────────────────────────── */
.kmc-outputs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

.kmc-output-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--kmc-text);
    margin-bottom: 6px;
}
.kmc-output-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.kmc-dot--galvalum  { background: var(--kmc-green); }
.kmc-dot--stainless { background: var(--kmc-blue); }
.kmc-dot--enamel    { background: var(--kmc-orange); }

.kmc-output-rate {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 400;
    color: var(--kmc-muted);
    font-style: italic;
}

.kmc-output-field {
    background: var(--kmc-field);
    border: 1.5px solid var(--kmc-border);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kmc-gold-lt);
    font-family: 'Oswald', sans-serif;
    letter-spacing: .5px;
    transition: border-color .3s, color .3s, background .3s;
}
.kmc-output-field.kmc-filled {
    border-color: var(--kmc-gold-dk);
    background: #1e1800;
}
.kmc-output-field.kmc-filled--galvalum  { border-color: var(--kmc-green);  background: #0e1e14; color: #7ddba0; }
.kmc-output-field.kmc-filled--stainless { border-color: var(--kmc-blue);   background: #0e1620; color: #90c8e8; }
.kmc-output-field.kmc-filled--enamel    { border-color: var(--kmc-orange); background: #1e1208; color: #f0c070; }

/* ── Luas info ────────────────────────────────────────────── */
.kmc-luas-info {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    font-size: .74rem;
    color: var(--kmc-muted);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 4px;
    border: 1px solid var(--kmc-border);
}
.kmc-luas-info strong { color: var(--kmc-gold-lt); font-size: .9rem; }

/* ── Catatan ──────────────────────────────────────────────── */
.kmc-catatan {
    font-size: .68rem;
    color: #555;
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 500px) {
    .kmc-panel  { padding: 18px 16px 22px; }
    .kmc-header { padding: 20px 18px 18px; }
    .kmc-model-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kmc-output-field { font-size: .88rem; }
}
@media (max-width: 340px) {
    .kmc-model-grid { grid-template-columns: repeat(2, 1fr); }
}