/* ===============================
   Technology Solution – Page CSS
   Namespace with .ts- to avoid conflicts
   =============================== */

.ts-hero{
  position:relative;
  padding: clamp(80px, 10vw, 140px) 0 80px;
  background: radial-gradient(1200px 400px at 10% -10%, rgba(37,99,235,.18), transparent),
              radial-gradient(800px 300px at 90% 10%, rgba(250,204,21,.18), transparent),
              #0f172a;
  color:#fff;
  overflow:hidden;
}
.ts-hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 5vw, 60px);
  align-items:center;
}
.ts-hero-copy h1{
  margin:0 0 14px;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height:1.15;
}
.ts-hero-copy h1 span{ color:#60a5fa; }
.ts-hero-copy p{
  margin: 6px 0 18px;
  font-size: clamp(16px, 1.3vw, 18px);
  opacity:.95;
}
.ts-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap }
.ts-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.ts-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  font-weight:700; font-size:12px
}
.ts-hero-art{ position:relative; min-height:240px }
.ts-hero-blob{
  position:absolute; inset:0;
  background: radial-gradient(320px 180px at 30% 30%, rgba(96,165,250,.25), transparent 70%),
              radial-gradient(240px 160px at 70% 60%, rgba(250,204,21,.25), transparent 70%);
  filter: blur(16px);
  border-radius: 28px;
}
.ts-hero-icon{ position:absolute; font-size:72px; opacity:.9; top:18%; left:18% }
.ts-hero-icon.t2{ top:45%; left:55%; font-size:64px; opacity:.8 }
.ts-hero-icon.t3{ top:68%; left:28%; font-size:56px; opacity:.7 }

/* Buttons */
.ts-btn-primary{
  background:#3b82f6; color:#fff; border:none; border-radius:10px;
  padding:12px 18px; font-weight:700; text-decoration:none; display:inline-block;
  box-shadow: 0 10px 24px rgba(59,130,246,.28);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.ts-btn-primary:hover{ transform: translateY(-2px); background:#2563eb; box-shadow:0 14px 28px rgba(37,99,235,.30) }
.ts-btn-ghost{
  background:transparent; color:#dbeafe; border:1px solid rgba(255,255,255,.45);
  border-radius:10px; padding:12px 18px; font-weight:700; text-decoration:none; display:inline-block;
}
.ts-btn-ghost:hover{ background:rgba(255,255,255,.08) }

/* Sections */
.ts-section{ padding: clamp(64px, 8vw, 100px) 0; background:#fff }
.ts-section-alt{ background:#f8fafc }

.ts-lead{
  max-width: 920px; margin: 0 auto; text-align:center;
  font-size: clamp(16px, 1.25vw, 18px); color:#4b5563; line-height:1.8
}

/* Stats */
.ts-stats{
  margin-top:28px; display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr));
}
.ts-stat{ 
  background:#0f172a; color:#fff; border-radius:14px; padding:20px; text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.ts-stat strong{ display:block; font-size: clamp(18px, 2.4vw, 26px) }
.ts-stat span{ opacity:.9; font-size:14px }

/* Cards & grids */
.ts-grid-4{ display:grid; gap:20px; grid-template-columns: repeat(4, minmax(0,1fr)) }
.ts-grid-5{ display:grid; gap:16px; grid-template-columns: repeat(5, minmax(0,1fr)) }

.ts-card{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; padding:22px;
  box-shadow:0 8px 20px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .2s ease;
}
.ts-card:hover{ transform: translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.10) }
.ts-card-icon{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
  background:#eff6ff; color:#2563eb; font-size:26px; margin-bottom:12px
}

/* Rich cards with image */
.ts-card-rich{ padding:0; overflow:hidden }
.ts-card-img{ width:100%; height:170px; object-fit:cover; display:block; border-bottom:1px solid #e5e7eb }
.ts-card-body{ padding:18px 18px 14px }
.ts-card-body h3{ margin:6px 0 10px; font-size:20px; color:#1f2937 }
.ts-card-body p{ margin:0 0 12px; color:#4b5563 }
.ts-feats{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.ts-feats li{ display:flex; gap:10px; align-items:flex-start; color:#374151; font-size:14px }
.ts-feats i{ color:#16a34a; margin-top:2px }

/* Industries */
.ts-industries .ts-industry{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between; text-align:center;
  font-weight:700; color:#1f2937
}
.ts-industries .ts-industry i{ color:#2563eb; font-size:20px }

.industry-label {width: 120px; text-align: end;}

/* CTA */
.ts-cta-row{ display:flex; gap:12px; justify-content:center; margin-top:20px }
.ts-final-cta{ background: linear-gradient(90deg, #0f172a, #111827); color:#fff; padding: 40px 0 }
.ts-final-wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px }
.ts-final-copy h2{ margin:0 0 6px; font-size: clamp(22px, 3vw, 30px); color:#fff;}
.ts-final-copy p{ margin:0; opacity:.92 }

/* Responsive */
@media (max-width: 1108px){
  .ts-hero-inner{ grid-template-columns: 1fr }
  .ts-hero-art{ min-height: 180px; order:-1 }
  .ts-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .ts-grid-5{ grid-template-columns: repeat(3, minmax(0,1fr)) }
  .ts-final-wrap{ flex-direction:column; text-align:center }
}
@media (max-width: 768px){
  .ts-grid-4{ grid-template-columns: 1fr }
  .ts-grid-5{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 480px){
  .ts-grid-5{ grid-template-columns: 1fr }
}

/* ====== Technology Solution additions ====== */

.ts-section { padding: clamp(64px, 8vw, 100px) 0; background: #fff; }
.ts-section-alt { background: #f8fafc; }

.ts-lead {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(16px, 1.25vw, 18px);
  color: #4b5563;
  line-height: 1.8;
}

/* Stats small cards */
.ts-stats { margin-top: 28px; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.ts-stat {
  background: #0f172a; color: #fff; border-radius: 14px; padding: 20px; text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.ts-stat strong { display:block; font-size: clamp(18px, 2.4vw, 26px); }
.ts-stat span { opacity: .9; font-size: 14px; }

/* Badges grid (uses existing .badge style from style.css) */
.ts-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
  justify-items: center;
  margin-top: 8px;
}
.ts-badge {
  /* .badge from global already: keep look consistent */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}
.ts-badge i { font-size: 14px; }

/* Industries and CTA reuse */
.ts-grid-5 { display:grid; gap:16px; grid-template-columns: repeat(5, minmax(0,1fr)); }
.ts-industries .ts-industry{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between; text-align:center;
  font-weight:700; color:#1f2937
}
.ts-industries .ts-industry i{ color:#2563eb; font-size:20px }

.ts-final-cta{ background: linear-gradient(90deg, #0f172a, #111827); color:#fff; padding: 40px 0 }
.ts-final-wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px }
.ts-final-copy h2{ margin:0 0 6px; font-size: clamp(22px, 3vw, 30px) }
.ts-final-copy p{ margin:0; opacity:.92 }
.ts-cta-row{ display:flex; gap:12px; justify-content:center; margin-top:20px }

/* Responsive tweaks */
@media (max-width: 1108px){
  .ts-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ts-grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ts-final-wrap{ flex-direction:column; text-align:center }
}
@media (max-width: 768px){
  .ts-grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .ts-grid-5 { grid-template-columns: 1fr; }
}

/* ===== Our Solutions Badges (Presence) ===== */

/* Grid container */
.ts-badges-grid.ts-badges-presence{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: stretch;
  justify-items: stretch;
  margin-top: 10px;
}

/* Base look inherits from .badge; enhance with .tsp */
.badge.ts-badge.tsp{
  /* ukuran kompak */
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  padding: 12px 14px;
  border-radius: 14px;

  /* presence tanpa terlalu besar */
  display: flex;
  align-items: center;
  gap: 10px;

  /* pakai nuansa gelap seperti .badge global, tambah depth */
  background: #0f213d;                 /* konsisten dengan .badge global */
  border: 1px solid #1b3053;
  color: #cfe9f1;

  /* subtle elevation */
  box-shadow:
    0 8px 18px rgba(15, 33, 61, .18),
    inset 0 0 0 1px rgba(59, 130, 246, .10);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Icon bubble for presence, small size */
.badge.ts-badge.tsp .ts-badge-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  /* aksen kuning brand yang soft */
  background: rgba(250, 204, 21, .12);      /* var(--secondary-color) 12% */
  border: 1px solid rgba(250, 204, 21, .35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.badge.ts-badge.tsp .ts-badge-icon i{
  font-size: 15px;
  color: var(--secondary-color); /* kuning */
}

/* Text */
.badge.ts-badge.tsp .ts-badge-text{
  letter-spacing: .2px;
  transform: translateY(0.5px); /* optical alignment kecil */
}

/* Hover/focus states — lebih hidup tapi tetap elegan */
.badge.ts-badge.tsp:hover{
  transform: translateY(-2px);
  background: #112446;
  border-color: #264a7a;
  box-shadow:
    0 12px 26px rgba(15, 33, 61, .25),
    inset 0 0 0 1px rgba(59, 130, 246, .20);
}
.badge.ts-badge.tsp:focus-visible{
  outline: 2px solid rgba(59,130,246,.55);  /* biru brand */
  outline-offset: 2px;
}

/* Responsive sizing — tetap kompak */
@media (max-width: 768px){
  .ts-badges-grid.ts-badges-presence{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .badge.ts-badge.tsp{
    font-size: 13.5px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .badge.ts-badge.tsp .ts-badge-icon{
    width: 26px; height: 26px;
  }
}
@media (max-width: 480px){
  .ts-badges-grid.ts-badges-presence{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}