/* =====================================================================
   TESTIMONIAL
   ===================================================================== */
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"], .aldi-testimonial-wrap {
  --fs-h: var(--fs-judul1);
  --fs-ct: var(--fs-judul2);
  --fs-cd: var(--fs-card-desc);
  --fs-sm: var(--fs-sm);
  --fs-xs: var(--fs-2xs);
 
  font-family: var(--font-body);
}
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] { isolation: isolate; contain: layout style; position: relative; z-index: 1; box-sizing: border-box; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] * { box-sizing: border-box; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-section { width: 100%; background: transparent; padding: 20px 0 0; margin: 0; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-content { text-align: center; max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-judul-testimoni { font-size: var(--fs-h); font-weight: var(--fw-black); color: var(--primary); margin: 0; padding: 0; letter-spacing: -0.5px; text-align: center; display: block; width: 100%; line-height: 1.2; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-judul-testimoni::after { content: ''; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--primary-border) 20%, var(--primary) 50%, var(--primary-border) 80%, transparent 100%); width: 120px; margin: 6px auto; display: block; }
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-description { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-sec); margin: 0; padding: 0; text-align: center; }

@keyframes aldi-testimonial-float { 0%,100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-6px) rotate(1deg); } 66% { transform: translateY(-3px) rotate(-0.5deg); } }
@keyframes aldi-testimonial-slide-in { 0% { transform: translateX(30px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

.aldi-testimonial-wrap { color: var(--text); position: relative; width: 100%; box-sizing: border-box; background: transparent; overflow-x: hidden; overflow-y: clip; container-type: inline-size; }
.aldi-testimonial-wrap * { margin: 0; padding: 0; box-sizing: border-box; }
.aldi-testimonial-container { max-width: var(--max-width); margin: 0 auto; padding: 56px 20px; display: grid; place-items: center; gap: var(--space-8); width: 100%; }
.aldi-testimonial-inner { max-width: 100%; width: 100%; }
.aldi-testimonial-grid { display: grid; grid-template-columns: 1.2fr 1.8fr; gap: var(--space-8); align-items: start; width: 100%; }
.aldi-testimonial-form-card, .aldi-testimonial-list-card { background: var(--surface); box-shadow: var(--card-shadow); border-radius: var(--card-radius); padding: var(--space-6) var(--space-8) var(--space-8); transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; overflow: hidden; block-size: 520px; display: flex; flex-direction: column; }
.aldi-testimonial-form-card:hover, .aldi-testimonial-list-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); }
.aldi-testimonial-form-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.aldi-testimonial-form-header, .aldi-testimonial-list-header { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-6); block-size: 40px; padding-block-start: 0; }
.aldi-testimonial-form-icon, .aldi-testimonial-list-icon { inline-size: 26px; block-size: 26px; color: var(--primary); flex-shrink: 0; animation: aldi-testimonial-float 6s ease-in-out infinite; }
.aldi-testimonial-form-title, .aldi-testimonial-list-title { font-size: var(--fs-ct); font-weight: var(--fw-bold); color: var(--primary); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.aldi-testimonial-form { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.aldi-testimonial-form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.aldi-testimonial-form-label { font-size: var(--fs-text2); font-weight: var(--fw-semibold); color: var(--text-sec); display: block; text-align: start; line-height: var(--lh-normal); }
.aldi-testimonial-form-input, .aldi-testimonial-form-textarea { inline-size: 100%; background: var(--surface); box-shadow: inset 3px 3px 6px var(--bg-shadow-dark), inset -2px -2px 4px var(--bg-shadow-light); border: none; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-regular); transition: all 0.4s ease; font-family: inherit; text-align: start; line-height: var(--lh-normal); }
.aldi-testimonial-form-input::placeholder, .aldi-testimonial-form-textarea::placeholder { color: var(--text-sec); font-weight: var(--fw-light); font-size: var(--fs-text4); }
.aldi-testimonial-form-input:focus, .aldi-testimonial-form-textarea:focus { outline: none; box-shadow: inset 4px 4px 8px var(--bg-shadow-dark), inset -3px -3px 6px var(--bg-shadow-light); transform: translateY(-1px); }
.aldi-testimonial-form-textarea { resize: vertical; min-block-size: 100px; }
.aldi-testimonial-form-button { background: var(--surface); box-shadow: var(--card-shadow); color: var(--primary); border: none; padding: 10px 22px; border-radius: var(--radius-pill); font-size: var(--fs-tombol); font-weight: var(--fw-semibold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: var(--transition-hover); position: relative; overflow: hidden; font-family: inherit; inline-size: fit-content; align-self: center; margin-block-end: 0; margin-block-start: auto; line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.aldi-testimonial-form-button:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.aldi-testimonial-form-button:active { box-shadow: var(--shadow-inset) !important; transform: translateY(2px) !important; }
.aldi-testimonial-send-icon { inline-size: 16px; block-size: 16px; flex-shrink: 0; transition: transform 0.4s ease; }
.aldi-testimonial-form-button:hover .aldi-testimonial-send-icon { transform: rotate(15deg) scale(1.1); }
.aldi-testimonial-list-content { position: relative; z-index: 2; block-size: 100%; display: flex; flex-direction: column; pointer-events: auto; }
.aldi-testimonial-count { font-size: calc(var(--fs-text2) - 1px); font-weight: var(--fw-semibold); color: var(--primary); margin-inline-start: auto; background: var(--surface); box-shadow: inset 2px 2px 4px var(--bg-shadow-dark), inset -1px -1px 3px var(--bg-shadow-light); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; min-inline-size: 32px; block-size: 22px; line-height: var(--lh-normal); }
.aldi-testimonial-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--primary) transparent; padding-inline-end: var(--space-1); pointer-events: auto; }
.aldi-testimonial-list::-webkit-scrollbar { width: 3px; height: 3px; }
.aldi-testimonial-list::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 99px; }
.aldi-testimonial-item { background: var(--surface); box-shadow: inset 3px 3px 6px var(--bg-shadow-dark), inset -2px -2px 4px var(--bg-shadow-light); border-radius: var(--radius-md); padding: 20px; margin: 0 3px var(--space-4); animation: aldi-testimonial-slide-in 0.5s ease-out; position: relative; overflow: hidden; pointer-events: auto; }
.aldi-testimonial-item:last-child { margin-block-end: var(--space-1); }
.aldi-testimonial-item-header { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-3); position: relative; z-index: 2; }
.aldi-testimonial-item-author { display: flex; align-items: center; }
.aldi-testimonial-item-meta { display: flex; flex-direction: column; align-items: flex-start; }
.aldi-testimonial-item-name { font-size: var(--fs-text2); font-weight: var(--fw-semibold); color: var(--text); display: flex; align-items: center; gap: var(--space-2); line-height: 1.2; }
.aldi-testimonial-item-email { font-size: var(--fs-text4); color: var(--text-sec); font-weight: var(--fw-light); line-height: 1.2; }
.aldi-testimonial-item-badge { font-size: var(--fs-text4); font-weight: var(--fw-medium); color: var(--primary); background: var(--surface); box-shadow: inset 2px 2px 4px var(--bg-shadow-dark), inset -1px -1px 3px var(--bg-shadow-light); border-radius: var(--radius-xs); padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; }
.aldi-testimonial-item-time { font-size: var(--fs-text4); color: var(--text-sec); font-weight: var(--fw-light); line-height: 1.2; position: absolute; inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%); }
.aldi-testimonial-item-text { font-size: var(--fs-text4); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-sec); position: relative; z-index: 2; text-align: start; }

@media (min-width: 1441px) {
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"], .aldi-testimonial-wrap { --fs-cd: var(--fs-card-desc); --fs-sm: var(--fs-sm); --fs-xs: var(--fs-2xs); }
  .aldi-testimonial-container { padding: 40px 100px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .aldi-testimonial-container { padding: 40px 50px; }
}
@media (max-width: 1024px) {
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"], .aldi-testimonial-wrap { --fs-cd: var(--fs-sm); --fs-sm: var(--fs-xs); --fs-xs: var(--fs-3xs); }
  .aldi-testimonial-grid { grid-template-columns: 1.3fr 1.7fr; gap: var(--space-6); }
  .aldi-testimonial-form-card, .aldi-testimonial-list-card { block-size: 520px; }
  .aldi-testimonial-container { padding: var(--space-6) var(--space-6); gap: var(--space-5); }
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-container { padding: 0 var(--space-6); }
}
@media (max-width: 768px) {
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"], .aldi-testimonial-wrap { --fs-cd: var(--fs-sm); --fs-sm: var(--fs-xs); --fs-xs: var(--fs-3xs); }
  .aldi-testimonial-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .aldi-testimonial-list-card { order: 1; block-size: 400px; }
  .aldi-testimonial-form-card { order: 2; block-size: auto; }
  .aldi-testimonial-container { padding: 20px 20px var(--space-6); gap: var(--space-5); }
  .aldi-testimonial-form-card, .aldi-testimonial-list-card { padding: var(--space-4) var(--space-4) 20px; }
  .aldi-testimonial-form-card:hover, .aldi-testimonial-list-card:hover { transform: none; }
  .aldi-testimonial-item { padding: 12px; margin: 3px 2px 10px; }
  .aldi-testimonial-form-button { padding: 10px 22px; min-inline-size: 110px; }
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-container { padding: 0 20px; }
}
@media (max-width: 480px) {
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"], .aldi-testimonial-wrap { --fs-cd: var(--fs-sm); --fs-sm: var(--fs-2xs); --fs-xs: var(--fs-3xs); }
  .aldi-testimonial-container { padding: 20px 20px; gap: var(--space-5); }
  .aldi-testimonial-form-card, .aldi-testimonial-list-card { padding: 18px 20px 20px; }
  .aldi-testimonial-list-card { block-size: 500px; }
  .aldi-testimonial-form-button { padding: 8px 18px; min-inline-size: 120px; }
  .aldi-testimonial-item { padding: 14px; margin: 2px 1px var(--space-3); }
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"] .aldi-testimoni-container { padding: 0 20px; }
}
