/* ─────────  kontakt stranica: otvara se skeniranjem QR sa vizit-karte  ───────── */

.kt-body {
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(55, 214, 122, .14), transparent 70%),
    var(--bg);
  min-height: 100dvh;
}

.kt {
  width: min(460px, 100%);
  margin-inline: auto;
  padding: 18px 20px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 22px;
}

.kt-lang { display: flex; justify-content: flex-end; }
.kt-lang .lang button { padding: 5px 10px; font-size: 12px; }

/* zaglavlje */
.kt-head { text-align: center; display: grid; gap: 10px; justify-items: center; }
.kt-logo { display: block; line-height: 0; }
.kt-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.035em; }
.kt-tag { color: var(--accent); font-size: 15px; font-weight: 600; }
.kt-about { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 38ch; }

/* broj telefona krupno */
.kt-phone {
  text-align: center; display: grid; gap: 5px;
  padding: 18px 16px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line2);
}
.kt-num {
  font-family: "JetBrains Mono", monospace; font-size: 25px; font-weight: 500;
  letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}
.kt-num:hover { color: var(--accent); }
.kt-hours { font-size: 12.5px; color: var(--dim); }

/* dugmad */
.kt-actions { display: grid; gap: 10px; }
.kt-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); transition: border-color .18s ease, transform .12s ease, background .18s ease;
}
.kt-btn:active { transform: scale(.99); }
.kt-btn:hover { border-color: var(--line2); }
.kt-btn-t { flex: 1; min-width: 0; }
.kt-btn-t b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.kt-btn-t i { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.kt-btn-t i.kt-mono { font-family: "JetBrains Mono", monospace; }
.kt-arrow { color: var(--dim); font-size: 17px; flex: none; }
.kt-btn:hover .kt-arrow { color: var(--accent); }

.kt-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line2);
}
.kt-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.kt-btn.wa { color: #4ee08a; }
.kt-btn.wa .kt-ico { background: rgba(78, 224, 138, .12); border-color: rgba(78, 224, 138, .35); }
.kt-btn.wa:hover { border-color: rgba(78, 224, 138, .5); background: rgba(78, 224, 138, .06); }

.kt-btn.vb { color: #a58bfa; }
.kt-btn.vb .kt-ico { background: rgba(165, 139, 250, .12); border-color: rgba(165, 139, 250, .35); }
.kt-btn.vb:hover { border-color: rgba(165, 139, 250, .5); background: rgba(165, 139, 250, .06); }

.kt-btn.accent { color: var(--accent2); }
.kt-btn.accent .kt-ico { background: rgba(40, 182, 201, .12); border-color: rgba(40, 182, 201, .35); }
.kt-btn.accent:hover { border-color: rgba(40, 182, 201, .5); background: rgba(40, 182, 201, .06); }

/* dugmad koja nose ime brenda ostaju bele, boja je samo na ikoni */
.kt-btn.wa .kt-btn-t b,
.kt-btn.vb .kt-btn-t b,
.kt-btn.accent .kt-btn-t b { color: var(--text); }

/* podnožje */
.kt-foot { text-align: center; display: grid; gap: 8px; color: var(--dim); font-size: 13px; margin-top: 4px; }
.kt-tm { font-size: 11.5px; line-height: 1.5; }