/*
Theme Name: Tera Data
Theme URI: https://teradatanusantara.co.id/
Author: PT Tera Data Nusantara
Author URI: https://teradatanusantara.co.id/
Description: Theme WordPress untuk PT Tera Data Nusantara. Fokus layanan Web Development dan Web Hosting. Dibangun dari template HTML Tekup tanpa plugin pihak ketiga.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tera-data
Tags: business, custom-logo, custom-menu, featured-images, blog, translation-ready
*/

/* ==========================================================================
   Catatan: seluruh style utama template berada pada assets/css/*.
   File ini hanya menampung penyesuaian khusus WordPress
   (alignment, gallery, caption, widget, screen-reader, dsb).
   ========================================================================== */

/* --- WordPress core alignment --- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.entry-content img,
.wp-block-image img { max-width: 100%; height: auto; }
.entry-content .alignwide,
.entry-content .alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: 20px; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption-text,
.wp-element-caption,
figcaption { font-size: 14px; margin: 10px 0 0; opacity: .8; }

.sticky { display: block; }
.bypostauthor { display: block; }
.gallery-caption { display: block; }

/* --- Accessibility --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  clip: auto !important;
  clip-path: none;
  color: #0119FF;
  display: block;
  font-size: 15px;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
.skip-link:focus { outline: 2px solid #0119FF; }

/* --- Admin bar tidak menabrak sticky header --- */
body.admin-bar .site-header.sticky-menu { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header.sticky-menu { top: 46px; }
}

/* --- Logo header & footer ---------------------------------------------
   Template aslinya memakai SVG berukuran tetap 143x44 sehingga tidak
   menyertakan aturan ukuran untuk logo. Akibatnya logo unggahan admin
   dengan rasio berbeda ikut memakai atribut width/height bawaan berkas
   dan tampil gepeng. Tinggi dibatasi, width/height dipaksa auto, supaya
   proporsi gambar selalu terjaga berapa pun ukuran yang diunggah.
   -------------------------------------------------------------------- */
.brand-logo a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brand-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 230px;
  max-height: 52px;
  object-fit: contain;
}
.site-header.sticky-menu .brand-logo img { max-height: 46px; }

@media (max-width: 1199px) {
  .brand-logo img { max-width: 190px; max-height: 44px; }
}
@media (max-width: 991px) {
  .brand-logo img { max-width: 165px; max-height: 40px; }
}

.tekup-footer-textarea > a { display: inline-block; line-height: 0; }
.tekup-footer-textarea > a img {
  width: auto;
  height: auto;
  max-width: 250px;
  max-height: 60px;
  object-fit: contain;
}

/* --- Gambar dari Media Library ----------------------------------------
   Masalah yang sama dengan logo: pembungkus gambar pada template tidak
   menyetel height sama sekali karena asetnya sudah berukuran pas. Begitu
   admin mengunggah gambar berukuran lain, atribut height bawaan berkas
   tetap dipakai sementara lebarnya dipangkas max-width, sehingga gambar
   tampil gepeng. height:auto mengembalikan proporsinya.
   -------------------------------------------------------------------- */
.tekup-hero-thumb > img,
.tekup-thumb > img,
.tekup-pd-thumb > img,
.tekup-iconbox-icon3 img,
.tekup-iconbox-icon4 img,
.tekup-service-thumb img,
.tekup-service-data img,
.tekup-service-details-wrap img,
.tekup-portfolio-thumb img,
.tekup-single-thumb img,
.tekup-errors-content img {
  max-width: 100%;
  height: auto;
}

.tekup-hero-thumb > img,
.tekup-thumb > img,
.tekup-pd-thumb > img {
  display: block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Batas tinggi hero mengikuti ukuran asli aset template (618x773),
   agar gambar potret tidak melebihi tinggi rancangan aslinya. */
.tekup-hero-thumb > img { max-height: 780px; }

/* Pembungkus menempel pada lebar foto supaya kartu aksesori yang
   diposisikan absolut menempel ke tepi foto, bukan ke tepi kolom. */
.tekup-hero-thumb {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .tekup-hero-thumb > img { max-height: none; }
}

/* --- Kartu aksesori di atas foto hero ---------------------------------
   Pengganti aset rating.png & Satisfaction.png bawaan template, dibangun
   dengan HTML agar teks dan fotonya dapat diubah dari Theme Settings.
   Posisi dan bayangan tetap mengikuti class asli template.
   -------------------------------------------------------------------- */
/*
 * Dua lapis: pembungkus luar menangani posisi + animasi masuk (AOS,
 * sama seperti section lain), kartu di dalamnya menangani tampilan dan
 * animasi melayang. Dipisah supaya transform AOS dan transform keyframe
 * tidak saling menimpa, dan kartu tetap terlihat walau animasi tidak
 * berjalan (opacity tidak pernah dipakai sebagai keadaan dasar).
 */
.tekup-client-satisfaction.tera-hero-card-outer,
.tekup-client-rating.tera-hero-card-outer {
  width: auto;
  box-shadow: none;
}

.tera-hero-card {
  background: var(--white-bg, #fff);
  /* Garis tipis menjaga kartu tetap terbaca saat foto berlatar putih. */
  border: 1px solid rgba(13, 14, 29, .06);
  border-radius: 10px;
  box-shadow: 0 16px 50px 0 rgba(13, 14, 29, .12);
}

.tera-hero-card__text {
  margin: 0;
  color: var(--heading-color, #0D0E1D);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}

/* Kartu sorotan (kanan) */
.tera-hero-card--badge {
  width: 190px;
  padding: 26px 24px 28px;
}
.tera-hero-card--badge .tera-hero-card__icon {
  display: block;
  margin-bottom: 22px;
  color: var(--accent-color, #0119FF);
  line-height: 0;
}
.tera-hero-card--badge .tera-hero-card__icon img {
  width: 56px;
  height: auto;
}

/* Kartu rating (kiri bawah) */
.tera-hero-card--rating {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 340px;
  padding: 16px 24px 16px 16px;
}
.tera-hero-card--rating .tera-hero-card__text { font-size: 16px; }

.tera-hero-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.tera-hero-avatars .tera-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white-bg, #fff);
  background: var(--light-bg1, #F5F5F5);
  margin-left: -14px;
  transition: transform .3s ease;
}
.tera-hero-avatars > .tera-hero-avatar:first-child { margin-left: 0; }
.tera-hero-avatars:hover .tera-hero-avatar { transform: translateY(-3px); }

.tera-hero-avatars .tera-hero-avatar--count {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-bg, #0D0E1D);
  color: var(--white-color, #fff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* --- Animasi --------------------------------------------------------- */
@keyframes tera-float-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes tera-float-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(12px); }
}
@keyframes tera-badge-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.08) rotate(-4deg); }
}

.tera-hero-float--up {
  animation: tera-float-up 6s ease-in-out infinite;
}
.tera-hero-float--down {
  animation: tera-float-down 7.5s ease-in-out .8s infinite;
}
.tera-hero-card--badge .tera-hero-card__icon svg {
  animation: tera-badge-pulse 4s ease-in-out infinite;
  transform-origin: 50% 60%;
}

@media (prefers-reduced-motion: reduce) {
  .tera-hero-float--up,
  .tera-hero-float--down,
  .tera-hero-card--badge .tera-hero-card__icon svg {
    animation: none;
    transform: none;
  }
}

/* --- Responsif ------------------------------------------------------- */
@media (max-width: 1399px) {
  .tekup-client-satisfaction { top: 200px; }
  .tekup-client-rating { bottom: 70px; }
}
@media (max-width: 1199px) {
  .tera-hero-card--badge { width: 165px; padding: 20px 18px 22px; }
  .tera-hero-card--badge .tera-hero-card__icon { margin-bottom: 16px; }
  .tera-hero-card--badge .tera-hero-card__icon img,
  .tera-hero-card--badge .tera-hero-card__icon svg { width: 46px; }
  .tera-hero-card__text { font-size: 15px; }
  .tera-hero-card--rating { max-width: 290px; gap: 14px; padding: 12px 18px 12px 12px; }
  .tera-hero-card--rating .tera-hero-card__text { font-size: 14px; }
  .tera-hero-avatars .tera-hero-avatar { width: 38px; height: 38px; }
}
/* Di bawah 768px kedua kartu disembunyikan oleh template (app.min.css),
   jadi tidak perlu penyesuaian ukuran untuk layar yang lebih kecil. */

/* --- Halaman Tentang --------------------------------------------------
   Memakai komponen template yang sudah ada (.tekup-iconbox-wrap2/3,
   .tekup-icon-list, .tekup-cta-wrap). Tambahan di bawah hanya untuk
   angka langkah kerja, karena template tidak menyediakan varian
   lingkaran tanpa ikon.
   -------------------------------------------------------------------- */
.tera-lead {
  font-size: 20px;
  line-height: 1.6;
}
.tera-step-no {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-color, #0119FF);
}
.tera-steps .tekup-iconbox-wrap2 { margin-bottom: 40px; }
.tera-steps .tekup-iconbox-icon2 { width: 120px; height: 120px; margin-bottom: 20px; }

/* Kartu & langkah memakai h3 (H2 dipakai judul section). */
.tera-about-page .tekup-iconbox-wrap3 h3,
.tera-about-page .tekup-iconbox-data2 h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.tera-about-page .tekup-icon-list ul { list-style: none; padding-left: 0; margin: 0; }
.tera-about-page .tekup-thumb img { width: 100%; height: auto; }

/* Section CTA di dalam konten halaman: latar melebar penuh viewport
   (background dipasang lewat inline CSS dari Theme Settings) supaya
   tampil sama dengan section CTA di homepage, bukan kotak di tengah. */
.tera-cta-cover { background-size: cover; background-position: center; }
.tera-cta-cover .tekup-cta-wrap { background: transparent; }

/* Kartu dalam satu baris dibuat sama tinggi agar barisnya rata. */
.tera-card-row > [class*="col-"] { display: flex; }
.tera-card-row .tekup-iconbox-wrap3 { flex: 1 1 auto; }

@media (max-width: 991px) {
  .tera-about-page .tekup-thumb { margin-bottom: 40px; }
}
@media (max-width: 767px) {
  .tera-steps .tekup-iconbox-icon2 { width: 96px; height: 96px; }
  .tera-step-no { font-size: 34px; }
}

/* --- Grid kartu blog: tinggi seragam ----------------------------------
   Kolom Bootstrap sudah sama tinggi, tetapi kartu di dalamnya mengikuti
   panjang judul sehingga barisnya terlihat bergerigi. Kartu dibuat
   mengisi penuh tinggi kolom, lalu meta (kategori & tanggal) didorong
   ke dasar kartu agar sejajar antar kolom.
   -------------------------------------------------------------------- */
.tera-blog-grid > [class*="col-"] {
  display: flex;
}
.tera-blog-grid .tekup-blog-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tera-blog-grid .tekup-blog-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tera-blog-grid .tekup-blog-content > a {
  display: block;
}
.tera-blog-grid .tekup-blog-meta {
  margin-top: auto;
  padding-top: 10px;
}

/* Gambar kartu dijaga rasionya agar tinggi thumbnail sama rata. */
.tera-blog-grid .tekup-blog-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tera-blog-grid .tekup-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Slider logo klien & partner --------------------------------------
   Template tidak menyetel ukuran gambar pada item slider karena asetnya
   sudah seragam (tinggi 52px). Logo unggahan admin bisa berbeda-beda,
   jadi tingginya dibatasi dan proporsinya dijaga.
   -------------------------------------------------------------------- */
.tekup-brand-slider .tekup-brand-slider-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 15px;
}
.tekup-brand-slider .tekup-brand-slider-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

/* --- Ikon layanan -----------------------------------------------------
   Ikon layanan berwarna putih dengan latar transparan. Pada kartu
   berlatar terang ikon diberi alas warna aksen supaya tetap terbaca;
   pada kartu layanan beranda ikon berada di atas gradien gelap sehingga
   bisa tampil apa adanya.
   -------------------------------------------------------------------- */
.tekup-iconbox-wrap3 .tekup-iconbox-icon3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 18px;
  background: var(--accent-color, #0119FF);
}
.tekup-iconbox-wrap3 .tekup-iconbox-icon3 img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.tekup-service-data img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.tekup-service-sidebar .tekup-service-menu li.active > a { font-weight: 600; }

/* --- Fallback logo teks bila custom logo belum diatur --- */
.tera-text-logo {
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--heading-color, #0D0E1D);
}
.tekup-footer-textarea .tera-text-logo,
.dark-bg .tera-text-logo { color: #fff; }

/* --- Menu WordPress: jaga struktur dropdown template --- */
.site-menu-main .nav-item-has-children > a > i,
.site-menu-main .sub-menu--item.nav-item-has-children > a > i { pointer-events: none; }
.site-menu-main .current-menu-item > a,
.site-menu-main .current_page_item > a,
.site-menu-main .current-menu-ancestor > a { color: var(--accent-color, #0119FF); }

/* --- Widget area blog sidebar (mengikuti style template) --- */
.tekup-blog-sidebar .widget { margin-bottom: 30px; }
.tekup-blog-sidebar .tekup-blog-widgets ul { list-style: none; padding: 0; margin: 0; }
.tekup-blog-sidebar .tekup-blog-widgets .children { padding-left: 15px; }
.tekup-blog-sidebar select { width: 100%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 6px; }
.tekup-blog-categorie ul li a span { float: right; }

/* --- Pagination native WordPress --- */
.tekup-navigation .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tekup-navigation .screen-reader-text { display: none; }

/* --- Form feedback (Tera Forms) --- */
.tera-form-response { margin: 0 0 15px; }
.tera-form-response p { margin: 0; padding: 12px 16px; border-radius: 6px; }
.tera-form-response.is-success p { background: rgba(25, 135, 84, .1); color: #198754; }
.tera-form-response.is-error p { background: rgba(220, 53, 69, .1); color: #dc3545; }
.tera-hp-field { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden; }

/* --- Comments (mengikuti markup template) --- */
.tekup-post-comment ul { list-style: none; padding: 0; }
.tekup-post-comment .children { list-style: none; }
.tekup-comment-box .logged-in-as { margin-bottom: 15px; }

/* --- Utility kecil --- */
.tera-no-result { padding: 40px 0; }

/* --- Konten detail layanan panjang (.tera-post-service) ---------------
   Dipakai halaman layanan yang isinya lebih panjang dari pola dasar
   (mis. Domain). CSS-nya ditaruh di sini, bukan di dalam konten, supaya
   tidak ada <style> ganda di editor dan semua halaman layanan memakai
   satu gaya: warna mengambil token template (--accent-color,
   --light-bg1, --heading-color) dan tipografi tetap milik
   .tekup-service-details-item, sama dengan layanan lain. */
.tera-post-service > *:last-child { margin-bottom: 0; }

.tera-post-intro,
.tera-post-note,
.tera-post-list li,
.tera-post-usecase-item { background: var(--light-bg1, #F5F5F5); }

.tera-post-intro {
  padding: 30px;
  margin-bottom: 35px;
  border-left: 4px solid var(--accent-color, #0119FF);
  border-radius: 8px;
}
.tera-post-intro > *:last-child { margin-bottom: 0; }

.tera-post-brand {
  margin: 30px 0;
  padding: 24px 26px;
  border: 1px solid var(--accent-color, #0119FF);
  border-radius: 10px;
}
.tera-post-brand strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-color, #0119FF);
}
.tera-post-brand > *:last-child { margin-bottom: 0; }

.tera-post-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 0;
  margin: 20px 0 35px;
  list-style: none;
}
.tera-post-list li {
  position: relative;
  padding: 17px 18px 17px 48px;
  margin: 0;
  border-radius: 8px;
}
.tera-post-list li i {
  position: absolute;
  left: 18px;
  top: 22px;
  color: var(--accent-color, #0119FF);
}

.tera-post-domain-ext {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 30px;
}
.tera-post-domain-ext span {
  padding: 9px 15px;
  border: 1px solid #ececec;
  border-radius: 6px;
  font-weight: 700;
}

.tera-post-usecase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0 35px;
}
.tera-post-usecase-item {
  display: flex;
  gap: 14px;
  padding: 20px;
  border-radius: 8px;
}
.tera-post-usecase-item i {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1.5;
  color: var(--accent-color, #0119FF);
}
.tera-post-usecase-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading-color, #0D0E1D);
}
.tera-post-usecase-item > *:last-child { margin-bottom: 0; }

.tera-post-steps {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tera-step;
}
.tera-post-steps li {
  position: relative;
  padding: 0 0 25px 65px;
  margin: 0;
  counter-increment: tera-step;
}
.tera-post-steps li::before {
  content: counter(tera-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  background: var(--accent-color, #0119FF);
  border-radius: 50%;
  color: var(--white-color, #ffffff);
  font-weight: 700;
}
.tera-post-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 53px;
  width: 1px;
  height: calc(100% - 53px);
  background: #e5e5e5;
}
.tera-post-steps strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading-color, #0D0E1D);
}
.tera-post-steps > li:last-child { padding-bottom: 0; }
.tera-post-steps p:last-child { margin-bottom: 0; }

.tera-post-note {
  margin-top: 30px;
  padding: 20px 22px;
  border-radius: 8px;
}
.tera-post-note i {
  margin-right: 8px;
  color: var(--accent-color, #0119FF);
}

@media (max-width: 767px) {
  .tera-post-intro { padding: 22px; }
  .tera-post-list,
  .tera-post-usecase { grid-template-columns: 1fr; }
}

/* Perapian .tera-post-service: teks di dalam kartu memakai skala kartu
   template (20px/30px, keterangan 18px/28px) supaya tidak setinggi teks
   paragraf utama, dan setiap h3 memperoleh jarak atas yang sama
   sehingga antar-bagian terlihat sejajar. */
.tera-post-service h3 { margin-top: 45px; }
.tera-post-service > h3:first-child,
.tera-post-intro h3 { margin-top: 0; }

.tera-post-list li,
.tera-post-usecase-item,
.tera-post-steps li,
.tera-post-note {
  font-size: 20px;
  line-height: 30px;
}

.tera-post-usecase-item span,
.tera-post-steps p {
  font-size: 18px;
  line-height: 28px;
}

.tera-post-usecase-item strong,
.tera-post-steps strong { font-size: 20px; }

.tera-post-list li {
  padding: 16px 20px 16px 52px;
}
.tera-post-list li i {
  top: 18px;
  left: 20px;
  font-size: 20px;
}

.tera-post-brand { border-radius: 8px; }

.tera-post-domain-ext span { font-size: 18px; }

.tera-post-steps li::before { font-size: 16px; }
.tera-post-steps li:not(:last-child)::after {
  top: 51px;
  height: calc(100% - 51px);
}

.tera-post-note i { font-size: 20px; }

@media (max-width: 767px) {
  .tera-post-service h3 { margin-top: 35px; }
  .tera-post-list li,
  .tera-post-usecase-item,
  .tera-post-steps li,
  .tera-post-note { font-size: 18px; line-height: 28px; }
}

/* Sentuhan akhir: chip ekstensi dirapatkan, dan pada layar kecil padding
   semua kotak dibuat sama agar tepinya sejajar. */
.tera-post-domain-ext span { line-height: 1.4; }

@media (max-width: 767px) {
  .tera-post-brand,
  .tera-post-note { padding: 22px; }
  .tera-post-steps li { padding-left: 58px; }
  .tera-post-steps li::before { width: 40px; height: 40px; }
  .tera-post-steps li:not(:last-child)::after {
    left: 20px;
    top: 46px;
    height: calc(100% - 46px);
  }
}

/* --- Form pencarian (.tekup-search-box) -------------------------------
   Template hanya memposisikan tombolnya lewat selektor ID
   (button#tekup-search-btn). Tema tidak memakai ID itu karena form
   pencarian bisa muncul lebih dari sekali dalam satu halaman (sidebar
   blog, hasil pencarian, 404) dan ID harus unik. Akibatnya tombol
   kehilangan position:absolute lalu jatuh ke bawah kolom input. Aturan
   berbasis class di bawah mengembalikan posisi ikon di dalam kolom,
   persis seperti tampilan template. */
.tera-search-form { margin: 0; }

.tekup-search-box input { width: 100%; }

.tekup-search-box button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
  color: var(--heading-color, #0D0E1D);
  transition: color 0.4s;
}
.tekup-search-box button:hover,
.tekup-search-box button:focus { color: var(--accent-color, #0119FF); }

.tekup-search-box button i {
  font-size: 20px;
  line-height: 1;
}

/* --- Komentar & artikel terkait pada detail post ----------------------
   Dua class dipakai tema tapi tidak punya aturan di CSS template:
   .tekup-related-post (tidak ada sama sekali, sehingga menempel pada
   blok komentar di atasnya) dan pembungkus tautan balas milik
   WordPress. Template memposisikan tautan balas lewat a.tekup-comment-reply
   sedangkan WordPress mencetak a.comment-reply-link, jadi tautannya
   kehilangan position:absolute lalu naik ke atas isi komentar. */
.tekup-post-comment-data {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 0;
}

.tekup-comment-reply-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 1;
}
.tekup-comment-reply-wrap .comment-reply-link {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--body-color, #0D0E1D);
  transition: all 0.4s;
}
.tekup-comment-reply-wrap .comment-reply-link i { margin-right: 10px; }
.tekup-comment-reply-wrap .comment-reply-link:hover { color: var(--accent-color, #0119FF); }

.tekup-post-comment-data > p:last-of-type { margin-bottom: 16px; }
.tekup-post-comment-data .comment-awaiting-moderation {
  margin-bottom: 10px;
  color: var(--accent-color, #0119FF);
}

/* Balasan bersarang: indent diberikan template lewat li.children, jadi
   ul.children cukup dibuat rapat agar tidak menambah indent ganda. */
.tekup-post-comment ul.children { margin-top: 40px; }
.tekup-post-comment li:last-child { margin-bottom: 0; }

/* Form komentar: jarak antar blok mengikuti .tekup-comment-form (24px),
   tombol kirim diberi jarak dari checkbox. */
.tekup-comment-submit { margin-top: 8px; }
.tekup-check label { margin-bottom: 24px; }

/* Artikel terkait: dipisahkan dari blok komentar di atasnya. */
.tekup-related-post {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #E7E7E8;
}
.tekup-related-post .tekup-section-title { margin-bottom: 30px; }
.tekup-related-post .tekup-section-title h3 { font-size: 36px; margin-bottom: 0; }

@media (max-width: 767px) {
  /* Di layar sempit tautan balas diletakkan mengalir agar tidak
     menimpa nama dan tanggal komentar. */
  /* Tautan balas ada di urutan pertama pada markup template, jadi saat
     tidak lagi absolute ia perlu didorong ke baris terakhir. */
  .tekup-post-comment-data { display: flex; flex-direction: column; }
  .tekup-comment-reply-wrap {
    position: static;
    order: 9;
    margin-top: 12px;
  }
  .tekup-post-comment-thumb { width: 56px; height: 56px; margin-right: 14px; }
  .tekup-post-comment .children { padding-left: 30px; }
  .tekup-related-post { margin-top: 40px; padding-top: 40px; }
}

/* --- Halaman Kontak ---------------------------------------------------
   Template aslinya meletakkan dua blok info berdampingan lewat flex
   tanpa batas lebar, sehingga alamat yang panjang membuat blok kedua
   membungkus ke bawah. Di sini keduanya memakai kolom Bootstrap dan
   tampil sebagai kartu, lalu form kontak diberi tampilan kartu yang
   lebih menonjol. */
.tera-contact-cards {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #E7E7E8;
}
.tera-contact-cards > [class*="col-"] { display: flex; min-width: 0; }

.tera-contact-cards .tekup-contact-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 26px;
  border: 1px solid #E7E7E8;
  border-radius: 12px;
  background-color: var(--white-bg, #ffffff);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.tera-contact-cards .tekup-contact-info:hover {
  border-color: var(--accent-color, #0119FF);
  box-shadow: 0 18px 40px rgba(1, 25, 255, 0.08);
  transform: translateY(-4px);
}
.tera-contact-cards .tekup-contact-info i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  color: var(--white-color, #ffffff);
  background-color: var(--accent-color, #0119FF);
}
.tera-contact-cards .tekup-contact-info p { margin-bottom: 6px; }
.tera-contact-cards .tekup-contact-info p:last-child { margin-bottom: 0; }
.tera-contact-cards .tera-contact-hours {
  margin-top: 10px;
  font-weight: 600;
  color: var(--heading-color, #0D0E1D);
}
.tera-contact-cards .tekup-contact-info a {
  margin-bottom: 6px;
  /* Email dan nomor panjang tidak boleh melebarkan kartu. */
  overflow-wrap: anywhere;
  transition: color 0.4s;
}
.tera-contact-cards .tekup-contact-info a:last-child { margin-bottom: 0; }
.tera-contact-cards .tekup-contact-info a:hover { color: var(--accent-color, #0119FF); }

/* Form kontak: kartu putih dengan sudut membulat dan bayangan lembut,
   kolom isian berlatar abu muda agar area input terlihat jelas. */
.tera-contact-section .tekup-main-form {
  padding: 44px;
  border: 1px solid #E7E7E8;
  border-radius: 16px;
  background-color: var(--white-bg, #ffffff);
  box-shadow: 0 24px 60px rgba(13, 14, 29, 0.07);
}

.tera-contact-section .tekup-main-field input,
.tera-contact-section .tekup-main-field textarea {
  width: 100%;
  padding: 16px 20px !important;
  border: 1px solid #E7E7E8 !important;
  border-radius: 10px;
  background-color: var(--light-bg1, #F5F5F5);
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.tera-contact-section .tekup-main-field input { height: 58px; }
.tera-contact-section .tekup-main-field textarea {
  height: 160px;
  resize: vertical;
}
.tera-contact-section .tekup-main-field input:focus,
.tera-contact-section .tekup-main-field textarea:focus {
  outline: none;
  border-color: var(--accent-color, #0119FF) !important;
  background-color: var(--white-bg, #ffffff);
  box-shadow: 0 0 0 3px rgba(1, 25, 255, 0.12);
}
.tera-contact-section .tekup-main-field input::placeholder,
.tera-contact-section .tekup-main-field textarea::placeholder {
  color: rgba(13, 14, 29, 0.5);
}
.tera-contact-section .tekup-main-field input:not(:placeholder-shown) {
  background-color: var(--white-bg, #ffffff);
}

.tera-contact-section .tera-form button[type="submit"],
.tera-contact-section .tera-form .tekup-default-btn {
  width: 100%;
  justify-content: center;
  border-radius: 10px;
}

.tera-contact-section .tera-form-response:not(:empty) {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 10px;
}

@media (max-width: 1199px) {
  .tera-contact-section .tekup-main-form { padding: 32px; }
}
@media (max-width: 991px) {
  .tera-contact-form-col { margin-top: 50px; }
}
@media (max-width: 575px) {
  .tera-contact-cards .tekup-contact-info { padding: 24px 22px; }
  .tera-contact-cards > [class*="col-"]:first-child { margin-bottom: 24px; }
  .tera-contact-section .tekup-main-form { padding: 24px; }
}

/* --- Kartu brand pada halaman Tentang Kami ----------------------------
   Logo brand berasal dari Media Library dengan rasio yang berbeda-beda,
   jadi area logonya dibuat tinggi tetap dan gambar diskalakan
   proporsional (object-fit: contain) agar tidak gepeng atau terpotong. */
.tera-brand-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border: 1px solid #E7E7E8;
  border-radius: 16px;
  background-color: var(--white-bg, #ffffff);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.tera-brand-card:hover {
  border-color: var(--accent-color, #0119FF);
  box-shadow: 0 18px 40px rgba(1, 25, 255, 0.08);
  transform: translateY(-4px);
}

.tera-brand-logo {
  display: flex;
  align-items: center;
  height: 88px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #E7E7E8;
}
.tera-brand-logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
}

.tera-brand-cards .tekup-iconbox-data3 h3 { margin-bottom: 10px; }
.tera-brand-cards .tekup-iconbox-data3 p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .tera-brand-cards > [class*="col-"]:first-child { margin-bottom: 24px; }
}
@media (max-width: 575px) {
  .tera-brand-card { padding: 28px 24px; }
  .tera-brand-logo { height: 72px; margin-bottom: 22px; padding-bottom: 22px; }
  .tera-brand-logo img { max-height: 50px; }
}