/**
 * tunosite-shared.css
 * Shared styles — loaded by BOTH builder (newembedpage) and live pages.
 * Ensures builder preview = live output.
 */

/* ── Google Fonts preload ──────────────────────────────────────
   Semua font yang dipakai di segment content.
   Pastikan dimuat di kedua environment.
──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Markazi+Text:wght@400;500;600;700&family=Maven+Pro:wght@400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap');


/* ── Section wrapper ──────────────────────────────────────────── */
.ts-section {
  width: 100%;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.ts-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.ts-section .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.ts-section [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}


/* ── Alignment ──────────────────────────────────────────────────
   Dipakai oleh builder (align- class) dan live (text- class).
──────────────────────────────────────────────────────────────── */
.text-left,  .align-left  { text-align: left  !important; }
.text-right, .align-right { text-align: right !important; }
.text-center,.align-center{ text-align: center!important; }
.text-justify             { text-align: justify!important; }


/* ── Bootstrap col-lg grid untuk live pages ──────────────────── */
.col-lg-3  { width: 25%;   float: left; }
.col-lg-4  { width: 33.33%;float: left; }
.col-lg-6  { width: 50%;   float: left; }
.col-lg-8  { width: 66.66%;float: left; }
.col-lg-12 { width: 100%;  float: left; }
/* col-lg-13: custom 5-column grid (20% each) */
.col-lg-13 { width: 20%;   float: left; }

@media (max-width: 991px) {
  .col-lg-3, .col-lg-4, .col-lg-6,
  .col-lg-8, .col-lg-12, .col-lg-13 {
    width: 100%;
    float: none;
  }
}

/* Clearfix for rows */
.ts-section .row::after {
  content: '';
  display: table;
  clear: both;
}


/* ── Tuno Button System ───────────────────────────────────────── */
.tuno-btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height: 1.4;
}

/* Sizes */
.tuno-btn-xs  { padding: 4px 12px;  font-size: 12px; }
.tuno-btn-sm  { padding: 6px 16px;  font-size: 13px; }
.tuno-btn-md  { padding: 10px 24px; font-size: 15px; }
.tuno-btn-lg  { padding: 14px 32px; font-size: 17px; }

/* Colors */
.tuno-green-primary {
  background: #50d989;
  border-color: #50d989;
  color: #fff !important;
}
.tuno-green-primary:hover {
  background: #3ec476;
  border-color: #3ec476;
  color: #fff !important;
}

.tuno-green-nature {
  background: #2d9e5f;
  border-color: #2d9e5f;
  color: #fff !important;
}
.tuno-green-nature:hover {
  background: #228a50;
  border-color: #228a50;
  color: #fff !important;
}

.tuno-black {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff !important;
}
.tuno-black:hover {
  background: #333;
  border-color: #333;
  color: #fff !important;
}

.tuno-white {
  background: #fff;
  border-color: #ddd;
  color: #1a1a1a !important;
}
.tuno-white:hover {
  background: #f5f5f5;
  border-color: #ccc;
  color: #1a1a1a !important;
}

.tuno-blue-primary {
  background: #4a90e2;
  border-color: #4a90e2;
  color: #fff !important;
}
.tuno-blue-primary:hover {
  background: #357abd;
  border-color: #357abd;
  color: #fff !important;
}

.tuno-blue-pin {
  background: #0066cc;
  border-color: #0066cc;
  color: #fff !important;
}
.tuno-blue-pin:hover {
  background: #0055aa;
  border-color: #0055aa;
  color: #fff !important;
}

.tuno-red-primary {
  background: #e24b4a;
  border-color: #e24b4a;
  color: #fff !important;
}
.tuno-red-primary:hover {
  background: #c73b3a;
  border-color: #c73b3a;
  color: #fff !important;
}

/* Outline variants */
.tuno-outline-green {
  background: transparent;
  border-color: #50d989;
  color: #50d989 !important;
}
.tuno-outline-green:hover {
  background: #50d989;
  color: #fff !important;
}

.tuno-outline-black {
  background: transparent;
  border-color: #1a1a1a;
  color: #1a1a1a !important;
}
.tuno-outline-black:hover {
  background: #1a1a1a;
  color: #fff !important;
}


/* ── Typography normalization ─────────────────────────────────── */
.ts-section h1,
.ts-section h2,
.ts-section h3 {
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.ts-section p,
.ts-section div.lead {
  line-height: 1.7;
  margin-top: 0;
}

.ts-section img {
  max-width: 100%;
  height: auto;
}


/* ── Animate.css shorthand ────────────────────────────────────── */
.animate__animated {
  animation-duration: 0.6s;
  animation-fill-mode: both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.animate__fadeIn,
.animate__fadeInDown {
  animation-name: fadeIn;
}