.elementor-373 .elementor-element.elementor-element-6e8b26c{--display:flex;--min-height:600px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-373 .elementor-element.elementor-element-6e8b26c:not(.elementor-motion-effects-element-type-background), .elementor-373 .elementor-element.elementor-element-6e8b26c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://ubuddigitalcreative.artsyanaid.com/wp-content/uploads/2026/09/just-married-stylish-happy-bride-and-groom-showing-hands-with-wedding-rings-e1612163516694.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-373 .elementor-element.elementor-element-6e8b26c::before, .elementor-373 .elementor-element.elementor-element-6e8b26c > .elementor-background-video-container::before, .elementor-373 .elementor-element.elementor-element-6e8b26c > .e-con-inner > .elementor-background-video-container::before, .elementor-373 .elementor-element.elementor-element-6e8b26c > .elementor-background-slideshow::before, .elementor-373 .elementor-element.elementor-element-6e8b26c > .e-con-inner > .elementor-background-slideshow::before, .elementor-373 .elementor-element.elementor-element-6e8b26c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-373 .elementor-element.elementor-element-b445c73{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-373 .elementor-element.elementor-element-b445c73 .elementor-heading-title{font-family:"DM Serif Display", Sans-serif;font-size:90px;font-weight:500;color:#D4AF37;}.elementor-373 .elementor-element.elementor-element-abea7cb{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-373 .elementor-element.elementor-element-abea7cb .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-weight:600;color:#B5B5B5;}.elementor-373 .elementor-element.elementor-element-b1de1f9{--display:flex;}.elementor-373 .elementor-element.elementor-element-1ec2116{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-373 .elementor-element.elementor-element-e843cb3{--display:flex;--justify-content:center;}.elementor-373 .elementor-element.elementor-element-6cd3ef1{--display:flex;--justify-content:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-373 .elementor-element.elementor-element-be8d53d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-373 .elementor-element.elementor-element-6a583ba{--display:flex;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-373 .elementor-element.elementor-element-85db444 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-373 .elementor-element.elementor-element-85db444 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-373 .elementor-element.elementor-element-85db444{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-373 .elementor-element.elementor-element-85db444 .elementor-icon-list-text{transition:color 0.3s;}.elementor-373 .elementor-element.elementor-element-028cda8{--display:flex;}.elementor-373 .elementor-element.elementor-element-fa419b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-373 .elementor-element.elementor-element-7845652{--display:flex;}.elementor-373 .elementor-element.elementor-element-990d550{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-373 .elementor-element.elementor-element-7e58004 .elementor-heading-title{font-family:"DM Serif Display", Sans-serif;font-size:50px;font-weight:500;}.elementor-373 .elementor-element.elementor-element-3660b47{font-family:"Roboto Slab", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-373 .elementor-element.elementor-element-085be32{--display:flex;}.elementor-widget-image-box .elementor-image-box-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
					 .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-373 .elementor-element.elementor-element-56164c4.elementor-position-right .elementor-image-box-img{margin-left:0px;}.elementor-373 .elementor-element.elementor-element-56164c4.elementor-position-left .elementor-image-box-img{margin-right:0px;}.elementor-373 .elementor-element.elementor-element-56164c4.elementor-position-top .elementor-image-box-img{margin-bottom:0px;}.elementor-373 .elementor-element.elementor-element-56164c4 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-373 .elementor-element.elementor-element-56164c4 .elementor-image-box-img img{height:100px;transition-duration:0.3s;}.elementor-373 .elementor-element.elementor-element-56164c4 .elementor-image-box-title{font-family:"DM Serif Display", Sans-serif;font-size:25px;font-weight:500;}.elementor-373 .elementor-element.elementor-element-56164c4 .elementor-image-box-description{font-family:"Roboto Slab", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-373 .elementor-element.elementor-element-676f21f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-373 .elementor-element.elementor-element-660342e{--display:flex;}.elementor-373 .elementor-element.elementor-element-859f311.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-373 .elementor-element.elementor-element-859f311.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-373 .elementor-element.elementor-element-859f311.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-373 .elementor-element.elementor-element-859f311 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-373 .elementor-element.elementor-element-859f311 .elementor-image-box-img img{height:100px;transition-duration:0.3s;}.elementor-373 .elementor-element.elementor-element-859f311 .elementor-image-box-title{font-family:"DM Serif Display", Sans-serif;font-size:25px;font-weight:500;}.elementor-373 .elementor-element.elementor-element-859f311 .elementor-image-box-description{font-family:"Roboto Slab", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-373 .elementor-element.elementor-element-aa90a7b{--display:flex;}.elementor-373 .elementor-element.elementor-element-c830ab2.elementor-position-right .elementor-image-box-img{margin-left:0px;}.elementor-373 .elementor-element.elementor-element-c830ab2.elementor-position-left .elementor-image-box-img{margin-right:0px;}.elementor-373 .elementor-element.elementor-element-c830ab2.elementor-position-top .elementor-image-box-img{margin-bottom:0px;}.elementor-373 .elementor-element.elementor-element-c830ab2 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-373 .elementor-element.elementor-element-c830ab2 .elementor-image-box-img img{height:100px;transition-duration:0.3s;}.elementor-373 .elementor-element.elementor-element-c830ab2 .elementor-image-box-title{font-family:"DM Serif Display", Sans-serif;font-size:25px;font-weight:500;}.elementor-373 .elementor-element.elementor-element-c830ab2 .elementor-image-box-description{font-family:"Roboto Slab", Sans-serif;font-weight:400;color:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:1025px){.elementor-373 .elementor-element.elementor-element-6e8b26c:not(.elementor-motion-effects-element-type-background), .elementor-373 .elementor-element.elementor-element-6e8b26c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:767px){.elementor-373 .elementor-element.elementor-element-6e8b26c{--min-height:650px;}.elementor-373 .elementor-element.elementor-element-b445c73{margin:-150px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-373 .elementor-element.elementor-element-b445c73 .elementor-heading-title{font-size:75px;}.elementor-373 .elementor-element.elementor-element-7e58004 .elementor-heading-title{font-size:40px;}.elementor-373 .elementor-element.elementor-element-56164c4 .elementor-image-box-img{margin-bottom:0px;}.elementor-373 .elementor-element.elementor-element-859f311 .elementor-image-box-img{margin-bottom:15px;}.elementor-373 .elementor-element.elementor-element-c830ab2 .elementor-image-box-img{margin-bottom:0px;}}/* Start custom CSS for container, class: .elementor-element-6e8b26c *//* =====================================================================
   HERO SECTION – PORTOFOLIO PHOTOGRAPHY  (v1.1)
   Tempel di: Container Utama > Advanced > Custom CSS

   Class yang harus dipasang (Advanced > CSS Classes):
   - Container utama ............ ars-hero
   - Heading 1 (judul besar) .... ars-hero__title
   - Heading 2 (sub judul) ...... ars-hero__subtitle
   - Heading 3 (tagline kecil) .. ars-hero__tagline
   - Container social ........... ars-hero__social
   - Widget Social Icons ........ ars-hero__icons
   - (opsional) tambah "ars-gold-gradient" di judul untuk efek emas gradasi

   CATATAN: semua .elementor-373 .elementor-element.elementor-element-6e8b26c dibungkus :where() supaya specificity rendah.
   Artinya pengaturan dari panel Elementor (Style tab) TETAP MENANG,
   jadi Anda bebas ubah font, ukuran, warna, dll dari panel atau dari
   variabel di bagian 1 di bawah ini.

   v1.1: warna gold #D4AF37, social icons horizontal (tidur ke samping),
         animasi masuk berurutan + efek hover isi emas.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PENGATURAN UTAMA – ubah nilai di sini
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c).e-con {
  /* Layout */
  --ars-hero-height: 100svh;
  --ars-content-max: 1100px;
  --ars-pad-x: 48px;
  --ars-pad-y: 120px;

  /* Overlay gelap di atas foto/video background */
  --ars-overlay: linear-gradient(180deg,
                   rgba(10, 8, 6, .55) 0%,
                   rgba(10, 8, 6, .30) 45%,
                   rgba(10, 8, 6, .80) 100%);
  --ars-vignette: radial-gradient(ellipse at center,
                   rgba(0, 0, 0, 0) 45%,
                   rgba(0, 0, 0, .55) 100%);

  /* Warna */
  --ars-gold: #D4AF37;                       /* v1.1 */
  --ars-gold-light: #F0D98C;                 /* v1.1 */
  --ars-gold-dark: #A8862A;                  /* v1.1 */
  --ars-gold-rgb: 212, 175, 55;              /* v1.1 – untuk efek glow transparan */
  --ars-white: #ffffff;
  --ars-muted: rgba(255, 255, 255, .72);

  /* Font (pilih font yang sama di panel Elementor agar Google Font ter-load) */
  --ars-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --ars-font-sans: "Jost", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ars-font-serif-small: "Cormorant Garamond", Georgia, serif;

  /* Judul besar (Heading 1) */
  --ars-title-size: clamp(64px, 9vw, 150px);
  --ars-title-weight: 600;
  --ars-title-color: var(--ars-gold);
  --ars-title-lh: .95;
  --ars-title-ls: -0.01em;
  --ars-title-gap: 28px;

  /* Sub judul (Heading 2) */
  --ars-subtitle-size: clamp(20px, 2.6vw, 44px);
  --ars-subtitle-weight: 300;
  --ars-subtitle-color: var(--ars-white);
  --ars-subtitle-ls: .42em;
  --ars-subtitle-gap: 26px;

  /* Tagline kecil (Heading 3) */
  --ars-tagline-size: 14px;
  --ars-tagline-weight: 500;
  --ars-tagline-color: var(--ars-muted);
  --ars-tagline-ls: .5em;
  --ars-tagline-line: 40px;          /* panjang garis kiri-kanan tagline, 0 = hilang */

  /* Social icons (pojok kiri bawah, horizontal) */                        /* v1.1 */
  --ars-social-left: 48px;
  --ars-social-bottom: 48px;
  --ars-social-gap: 18px;            /* v1.1 – jarak label, garis, dan icon */
  --ars-social-line: 60px;           /* v1.1 – garis horizontal sebelum icon, 0 = hilang */
  --ars-social-line-color: var(--ars-gold);                                 /* v1.1 */
  --ars-social-label: "Follow";      /* v1.1 – teks sebelum garis, isi "" untuk hilangkan */
  --ars-social-label-font: var(--ars-font-display);                         /* v1.1 */
  --ars-social-label-size: 17px;     /* v1.1 */
  --ars-social-label-weight: 500;    /* v1.1 */
  --ars-social-label-style: italic;  /* v1.1 – normal / italic */
  --ars-social-label-ls: .04em;      /* v1.1 */
  --ars-social-label-color: var(--ars-muted);                               /* v1.1 */

  --ars-icon-box: 44px;
  --ars-icon-size: 16px;
  --ars-icon-gap: 12px;
  --ars-icon-radius: 50%;
  --ars-icon-border-width: 1px;      /* v1.1 */
  --ars-icon-bg: rgba(255, 255, 255, .06);
  --ars-icon-border: rgba(255, 255, 255, .28);
  --ars-icon-color: var(--ars-white);
  --ars-icon-blur: 6px;              /* v1.1 – efek kaca, 0px = matikan */

  /* Hover social icons */                                                  /* v1.1 */
  --ars-icon-bg-hover: var(--ars-gold);
  --ars-icon-border-hover: var(--ars-gold);
  --ars-icon-color-hover: #14100b;
  --ars-icon-fill-from: translateY(101%);   /* v1.1 – arah isi emas: translateY(101%) = dari bawah, scale(0) = dari tengah, translateX(-101%) = dari kiri */
  --ars-icon-hover-lift: -4px;              /* v1.1 – naik saat hover, 0px = diam */
  --ars-icon-hover-icon-scale: 1.12;        /* v1.1 – icon membesar saat hover */
  --ars-icon-hover-rotate: 0deg;            /* v1.1 – misal 8deg untuk sedikit miring */
  --ars-icon-glow: 0 10px 28px rgba(var(--ars-gold-rgb), .35);              /* v1.1 */
  --ars-icon-ring: 0 0 0 5px rgba(var(--ars-gold-rgb), .15);                /* v1.1 – cincin tipis saat hover */
  --ars-icon-speed: .45s;                   /* v1.1 – kecepatan transisi hover */
  --ars-icon-ease: cubic-bezier(.22, .8, .25, 1);                           /* v1.1 */

  /* Animasi masuk (0s = matikan) */
  --ars-anim-duration: 1.2s;
  --ars-social-delay: .7s;           /* v1.1 – jeda sebelum social muncul */
  --ars-icon-stagger: .12s;          /* v1.1 – jeda antar icon muncul berurutan */
  --ars-icon-in-duration: .8s;       /* v1.1 */

  /* ---- Pengaturan container (pakai variabel bawaan Elementor) ---- */
  --min-height: var(--ars-hero-height);
  --flex-direction: column;
  --justify-content: center;
  --align-items: center;
  --gap: 0px;
  --row-gap: 0px;
  --padding-top: var(--ars-pad-y);
  --padding-bottom: var(--ars-pad-y);
  --padding-left: var(--ars-pad-x);
  --padding-right: var(--ars-pad-x);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background-color: #0d0a08;
  background-size: cover;
  background-position: center;
}


/* ---------------------------------------------------------------------
   2. OVERLAY & LAPISAN
   (Jika pakai overlay dari panel Elementor, set --ars-overlay: none)
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c).e-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--ars-vignette), var(--ars-overlay);
}

/* Konten di atas overlay (support container Boxed & Full Width) */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) > .elementor-element,
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) > .e-con-inner > .elementor-element {
  position: relative;
  z-index: 2;
}

/* Agar social icons menempel ke pojok container utama, bukan ke inner */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) > .e-con-inner {
  position: static;
  max-width: var(--ars-content-max);
}


/* ---------------------------------------------------------------------
   3. JUDUL BESAR – .ars-hero__title
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__title.elementor-widget {
  width: 100%;
  margin-block-end: 0;
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__title.elementor-widget-heading .elementor-heading-title {
  margin: 0 0 var(--ars-title-gap);
  font-family: var(--ars-font-display);
  font-size: var(--ars-title-size);
  font-weight: var(--ars-title-weight);
  line-height: var(--ars-title-lh);
  letter-spacing: var(--ars-title-ls);
  color: var(--ars-title-color);
  text-shadow: 0 6px 40px rgba(0, 0, 0, .35);
  animation: arsHeroFadeUp var(--ars-anim-duration) cubic-bezier(.2, .7, .2, 1) both;
}

/* Opsional: tambahkan class "ars-gold-gradient" pada widget judul */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__title.ars-gold-gradient .elementor-heading-title {
  background: linear-gradient(180deg,
              var(--ars-gold-light) 0%,
              var(--ars-gold) 55%,
              var(--ars-gold-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .35));
}


/* ---------------------------------------------------------------------
   4. SUB JUDUL – .ars-hero__subtitle
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__subtitle.elementor-widget {
  width: 100%;
  margin-block-end: 0;
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__subtitle.elementor-widget-heading .elementor-heading-title {
  margin: 0 0 var(--ars-subtitle-gap);
  /* padding-left = letter-spacing agar teks tetap presisi di tengah */
  padding-left: var(--ars-subtitle-ls);
  font-family: var(--ars-font-sans);
  font-size: var(--ars-subtitle-size);
  font-weight: var(--ars-subtitle-weight);
  line-height: 1.2;
  letter-spacing: var(--ars-subtitle-ls);
  text-transform: uppercase;
  color: var(--ars-subtitle-color);
  animation: arsHeroFadeUp var(--ars-anim-duration) cubic-bezier(.2, .7, .2, 1) .2s both;
}


/* ---------------------------------------------------------------------
   5. TAGLINE KECIL – .ars-hero__tagline
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__tagline.elementor-widget {
  width: 100%;
  margin-block-end: 0;
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  font-family: var(--ars-font-serif-small);
  font-size: var(--ars-tagline-size);
  font-weight: var(--ars-tagline-weight);
  line-height: 1.4;
  letter-spacing: var(--ars-tagline-ls);
  text-transform: uppercase;
  color: var(--ars-tagline-color);
  animation: arsHeroFadeUp var(--ars-anim-duration) cubic-bezier(.2, .7, .2, 1) .4s both;
}

/* Garis emas tipis kiri & kanan tagline */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title::before,
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title::after {
  content: "";
  flex: none;
  width: var(--ars-tagline-line);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ars-gold));
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title::after {
  background: linear-gradient(90deg, var(--ars-gold), transparent);
  /* kompensasi letter-spacing di huruf terakhir */
  margin-left: calc(var(--ars-tagline-ls) * -1);
}


/* ---------------------------------------------------------------------
   6. CONTAINER SOCIAL – .ars-hero__social (pojok kiri bawah, horizontal)
   Urutan tampilan: [Follow] ——— (icon) (icon) (icon)                v1.1
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__social.e-con {
  --width: auto;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --flex-direction: row;                     /* v1.1 – tidur ke samping */
  --align-items: center;                     /* v1.1 */
  --justify-content: flex-start;             /* v1.1 */
  --flex-wrap: nowrap;                       /* v1.1 */
  --gap: var(--ars-social-gap);              /* v1.1 */
  --row-gap: var(--ars-social-gap);          /* v1.1 */
  --column-gap: var(--ars-social-gap);       /* v1.1 */

  position: absolute;
  left: var(--ars-social-left);
  bottom: var(--ars-social-bottom);
  z-index: 3;
  width: auto;
  margin: 0;
  border: 0;
  background: transparent;
}

/* Label "Follow" di paling kiri */                                          /* v1.1 */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__social.e-con::after {
  content: var(--ars-social-label);
  order: -2;
  font-family: var(--ars-social-label-font);
  font-size: var(--ars-social-label-size);
  font-weight: var(--ars-social-label-weight);
  font-style: var(--ars-social-label-style);
  letter-spacing: var(--ars-social-label-ls);
  line-height: 1;
  color: var(--ars-social-label-color);
  white-space: nowrap;
  animation: arsHeroFade var(--ars-anim-duration) ease var(--ars-social-delay) both;
}

/* Garis emas horizontal, tergambar dari kiri ke kanan */                   /* v1.1 */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__social.e-con::before {
  content: "";
  order: -1;
  display: block;
  flex: none;
  width: var(--ars-social-line);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ars-social-line-color));
  transform-origin: left center;
  animation: arsLineDraw var(--ars-icon-in-duration) var(--ars-icon-ease) var(--ars-social-delay) both;
}


/* ---------------------------------------------------------------------
   7. SOCIAL ICONS – .ars-hero__icons
   --------------------------------------------------------------------- */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons.elementor-widget {
  width: auto;
  margin-block-end: 0;
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icons-wrapper {
  display: flex;
  flex-direction: row;                       /* v1.1 */
  flex-wrap: nowrap;                         /* v1.1 */
  align-items: center;
  gap: var(--ars-icon-gap);
  font-size: 0;
  line-height: 1;
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons.elementor-widget-social-icons .elementor-grid-item {
  margin: 0;
  /* v1.1 – animasi masuk berurutan satu per satu */
  animation: arsIconIn var(--ars-icon-in-duration) var(--ars-icon-ease)
             calc(var(--ars-social-delay) + .25s + var(--ars-i, 0) * var(--ars-icon-stagger)) both;
}

/* v1.1 – nomor urut tiap icon untuk jeda animasi */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(1) { --ars-i: 0; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(2) { --ars-i: 1; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(3) { --ars-i: 2; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(4) { --ars-i: 3; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(5) { --ars-i: 4; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(6) { --ars-i: 5; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(7) { --ars-i: 6; }
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item:nth-child(8) { --ars-i: 7; }

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon {
  position: relative;                        /* v1.1 */
  overflow: hidden;                          /* v1.1 */
  isolation: isolate;                        /* v1.1 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ars-icon-box);
  height: var(--ars-icon-box);
  padding: 0;
  border: var(--ars-icon-border-width) solid var(--ars-icon-border);        /* v1.1 */
  border-radius: var(--ars-icon-radius);
  background-color: var(--ars-icon-bg);
  -webkit-backdrop-filter: blur(var(--ars-icon-blur));                      /* v1.1 */
  backdrop-filter: blur(var(--ars-icon-blur));                              /* v1.1 */
  transition: border-color var(--ars-icon-speed) var(--ars-icon-ease),
              transform var(--ars-icon-speed) var(--ars-icon-ease),
              box-shadow var(--ars-icon-speed) var(--ars-icon-ease);        /* v1.1 */
}

/* v1.1 – lapisan emas yang mengisi icon saat hover */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ars-icon-bg-hover);
  transform: var(--ars-icon-fill-from);
  transition: transform var(--ars-icon-speed) var(--ars-icon-ease);
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon i {
  position: relative;                        /* v1.1 */
  font-size: var(--ars-icon-size);
  color: var(--ars-icon-color);
  transition: color var(--ars-icon-speed) var(--ars-icon-ease),
              transform var(--ars-icon-speed) var(--ars-icon-ease);         /* v1.1 */
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon svg {
  position: relative;                        /* v1.1 */
  width: var(--ars-icon-size);
  height: var(--ars-icon-size);
  fill: var(--ars-icon-color);
  transition: fill var(--ars-icon-speed) var(--ars-icon-ease),
              transform var(--ars-icon-speed) var(--ars-icon-ease);         /* v1.1 */
}

/* Hover & fokus keyboard */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:hover,
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:focus-visible {
  border-color: var(--ars-icon-border-hover);
  transform: translateY(var(--ars-icon-hover-lift));                        /* v1.1 */
  box-shadow: var(--ars-icon-ring), var(--ars-icon-glow);                   /* v1.1 */
}

/* v1.1 – isi emas masuk */
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:hover::before,
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:focus-visible::before {
  transform: none;
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:hover i,
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:focus-visible i {
  color: var(--ars-icon-color-hover);
  transform: scale(var(--ars-icon-hover-icon-scale)) rotate(var(--ars-icon-hover-rotate));   /* v1.1 */
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:hover svg,
:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:focus-visible svg {
  fill: var(--ars-icon-color-hover);
  transform: scale(var(--ars-icon-hover-icon-scale)) rotate(var(--ars-icon-hover-rotate));   /* v1.1 */
}

/* v1.1 – icon lain sedikit meredup saat salah satu di-hover */
@media (hover: hover) {
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icons-wrapper:hover .elementor-grid-item {
    opacity: .55;
    transition: opacity var(--ars-icon-speed) var(--ars-icon-ease);
  }

  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icons-wrapper:hover .elementor-grid-item:hover {
    opacity: 1;
  }
}

:where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon:focus-visible {
  outline: 2px solid var(--ars-gold-light);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   8. ANIMASI
   --------------------------------------------------------------------- */
@keyframes arsHeroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes arsHeroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* v1.1 – garis tergambar dari kiri */
@keyframes arsLineDraw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* v1.1 – icon muncul dari kiri dengan sedikit membesar */
@keyframes arsIconIn {
  from { opacity: 0; transform: translateX(-16px) scale(.7); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .elementor-heading-title,
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__social.e-con::before,
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__social.e-con::after,
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-grid-item {
    animation: none;                         /* v1.1 */
  }

  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon,
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__icons .elementor-social-icon::before {
    transition: none;                        /* v1.1 */
  }
}


/* ---------------------------------------------------------------------
   9. TABLET (≤ 1024px)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c).e-con {
    --ars-pad-x: 32px;
    --ars-pad-y: 100px;
    --ars-title-size: clamp(56px, 11vw, 110px);
    --ars-title-gap: 22px;
    --ars-subtitle-size: clamp(18px, 3.2vw, 30px);
    --ars-subtitle-ls: .35em;
    --ars-subtitle-gap: 22px;
    --ars-tagline-size: 13px;
    --ars-tagline-ls: .42em;
    --ars-social-left: 32px;
    --ars-social-bottom: 32px;
    --ars-social-gap: 14px;                  /* v1.1 */
    --ars-social-line: 44px;                 /* v1.1 */
    --ars-social-label-size: 16px;           /* v1.1 */
    --ars-icon-box: 40px;
    --ars-icon-size: 15px;
  }
}


/* ---------------------------------------------------------------------
   10. MOBILE (≤ 767px)
   Social icons tetap di kiri bawah dan horizontal, ukuran diperkecil.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c).e-con {
    --ars-pad-x: 22px;
    --ars-pad-y: 90px;
    --ars-title-size: clamp(46px, 15vw, 72px);
    --ars-title-gap: 18px;
    --ars-subtitle-size: clamp(14px, 4.4vw, 20px);
    --ars-subtitle-ls: .3em;
    --ars-subtitle-gap: 18px;
    --ars-tagline-size: 11px;
    --ars-tagline-ls: .32em;
    --ars-tagline-line: 22px;
    --ars-social-left: 22px;
    --ars-social-bottom: 24px;
    --ars-social-gap: 10px;                  /* v1.1 */
    --ars-social-line: 28px;                 /* v1.1 */
    --ars-social-label-size: 15px;           /* v1.1 */
    --ars-icon-box: 38px;
    --ars-icon-size: 14px;
    --ars-icon-gap: 10px;
  }

  :where(.elementor-373 .elementor-element.elementor-element-6e8b26c) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title {
    gap: 12px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fa419b6 *//* =====================================================================
   OUR TEAM – UBUD DIGITAL CREATIVE  (v1.3)
   Tema gelap & emas, sama dengan section lain.
   v1.1: - sub judul di atas heading disamakan dengan "WHAT WE DO"
           (huruf kapital renggang, TANPA garis)
         - foto Image Box selalu penuh, nama & jabatan pindah ke
           BAWAH foto (tidak menimpa foto lagi)
         - tampilan HP dirapikan
   v1.2: - foto tampil UTUH setinggi potret (tidak terpotong jadi
           strip pendek lagi) & berwarna asli
         - deskripsi TIDAK lagi huruf kapital – mengikuti teks Anda
   v1.3: - foto LEBIH PENDEK (kotak 1:1, tidak terlalu tinggi)
         - kartu bertingkat seperti TANGGA lebih jelas di desktop &
           tablet, dan di HP tangga menyamping (kiri → kanan)
         Baris yang berubah ditandai komentar  (v1.1) / (v1.2) / (v1.3)
   Tempel di: Container PALING LUAR > Advanced > Custom CSS

   Class yang harus dipasang (Advanced > CSS Classes):

   Container paling luar ............................. ars-tm
   ├─ Container (baris 1) ............................ ars-tm__top
   │   ├─ Container (Heading + Text Editor) .......... ars-tm__head
   │   │   ├─ Heading ................................ ars-tm__title
   │   │   └─ Text Editor ............................ ars-tm__desc
   │   └─ Container (Image Box besar) ................ ars-tm__lead
   │       └─ Image Box .............................. ars-tm__card
   └─ Container (baris 2) ............................ ars-tm__row
       ├─ Container .................................. ars-tm__member
       │   └─ Image Box .............................. ars-tm__card
       └─ Container .................................. ars-tm__member
           └─ Image Box .............................. ars-tm__card

   Isi Image Box: Gambar = foto (potret), Judul = nama,
   Deskripsi = jabatan + 1 kalimat singkat (v1.2).

   Tampilan:
   - Label kecil emas "OUR TEAM", heading serif emas, deskripsi dengan
     garis emas vertikal, garis emas memudar di bawah judul.
   - 3 kartu potret bertingkat (foto utama paling besar, dua lainnya
     turun bertahap) dengan bingkai emas tipis di belakang foto.
   - Foto hitam-putih lembut → berwarna & zoom saat hover.
   - Nama emas + jabatan di bawah foto (v1.1), garis emas di atas
     nama memanjang saat hover.
   - Kartu utama punya label emas "Founder".
   - Tablet: 3 kartu bertingkat. HP: kartu bertumpuk seperti tangga
     menyamping – tiap kartu bergeser ke kanan (v1.3).

   TIDAK DIKUNCI: pengaturan panel (Heading, Text Editor, Image Box,
   padding & latar container) SELALU menang – kecuali lebar & posisi
   foto, yang dibuat selalu penuh di atas (ubah lewat --tm-img-width).
   AMAN: hanya memakai class di atas, tidak mengganggu elemen lain.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PENGATURAN – ubah nilai di sini
   --------------------------------------------------------------------- */
.ars-tm {
  /* Warna */
  --tm-bg: #0a0908;
  --tm-gold: #D4AF37;
  --tm-gold-light: #F0D98C;
  --tm-gold-rgb: 212, 175, 55;
  --tm-white: #ffffff;

  /* Font */
  --tm-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --tm-font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* ============ JARAK ============ */
  --tm-content-max: 1240px;
  --tm-pad-x: 48px;                            /* jarak kiri-kanan layar */
  --tm-pad-top: 120px;                         /* jarak atas section */
  --tm-pad-bottom: 140px;                      /* jarak bawah section */
  --tm-head-gap: 70px;                         /* jarak judul ke kartu */
  --tm-gap: 36px;                              /* jarak antar kartu */
  --tm-step: 90px;                             /* (v1.3) turunnya tiap anak tangga, 0px = sejajar */
  /* =============================== */

  /* Label kecil */
  --tm-eyebrow: "Our Team";                    /* "" = hilang */
  --tm-eyebrow-size: 14px;                     /* (v1.1) */
  --tm-eyebrow-ls: .34em;                      /* (v1.1) jarak antar huruf */
  --tm-lead-badge: "Founder";                  /* label kartu utama, "" = hilang */

  /* Heading & deskripsi */
  --tm-title-size: clamp(40px, 4.4vw, 64px);
  --tm-title-lh: 1.05;
  --tm-desc-size: 16px;
  --tm-desc-lh: 1.85;
  --tm-desc-max: 430px;

  /* Kartu */
  --tm-img-width: 100%;                        /* lebar foto di kartu */
  --tm-img-ratio: 1 / 1;                       /* (v1.3) bentuk foto: 1/1 kotak, 4/5 lebih tinggi, 4/3 lebih pendek */
  --tm-img-filter: none;                       /* (v1.2) warna asli; grayscale(.85) = hitam-putih */
  --tm-img-hover-scale: 1.05;                  /* (v1.2) zoom saat hover, 1 = mati */
  --tm-radius: 0px;                            /* sudut foto, mis. 18px */
  --tm-frame: rgba(var(--tm-gold-rgb), .45);   /* bingkai emas, transparent = hilang */
  --tm-frame-offset: 14px;                     /* geser bingkai */
  --tm-name-size: clamp(24px, 2.2vw, 32px);
  --tm-role-size: 15px;                        /* (v1.2) ukuran deskripsi */
  --tm-role-ls: normal;                        /* (v1.2) jarak huruf deskripsi */
  --tm-role-transform: none;                   /* (v1.2) none = sesuai teks Anda, uppercase = kapital */
  --tm-card-pad: 24px 26px 28px;               /* (v1.1) ruang teks di bawah foto */

  /* Animasi */
  --tm-speed: .6s;
  --tm-ease: cubic-bezier(.22, .8, .25, 1);
}


/* ---------------------------------------------------------------------
   2. CONTAINER PALING LUAR – grid: judul di atas, 3 kartu di bawah
   --------------------------------------------------------------------- */
.e-con.ars-tm {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);   /* (v1.3) */
  grid-template-areas:
    "head head head"
    "lead m1   m2";
  align-items: start;
  column-gap: var(--tm-gap);
  row-gap: var(--tm-head-gap);
  padding: var(--tm-pad-top) max(var(--tm-pad-x), calc((100% - var(--tm-content-max)) / 2)) var(--tm-pad-bottom);
  background-color: var(--tm-bg);
}

/* container pembungkus "diratakan" agar semua ikut grid di atas */
.e-con.ars-tm > .e-con-inner,
:where(.ars-tm) .ars-tm__top.e-con,
:where(.ars-tm) .ars-tm__top.e-con > .e-con-inner,
:where(.ars-tm) .ars-tm__row.e-con,
:where(.ars-tm) .ars-tm__row.e-con > .e-con-inner,
:where(.ars-tm) .ars-tm__head.e-con > .e-con-inner,
:where(.ars-tm) .ars-tm__lead.e-con > .e-con-inner,
:where(.ars-tm) .ars-tm__member.e-con > .e-con-inner {
  display: contents;
}

/* padding bawaan container dinolkan (padding dari panel tetap menang) */
:where(.ars-tm) .ars-tm__head.e-con,
:where(.ars-tm) .ars-tm__lead.e-con,
:where(.ars-tm) .ars-tm__member.e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  width: auto;
  min-width: 0;
}

/* posisi di grid */
:where(.ars-tm) .ars-tm__head.e-con { grid-area: head; }
:where(.ars-tm) .ars-tm__lead.e-con { grid-area: lead; }

/* kartu bertingkat: anggota 1 turun 1 langkah, anggota 2 turun 2 langkah */
:where(.ars-tm) .ars-tm__member.e-con {
  margin-top: var(--tm-step);
}

:where(.ars-tm) .ars-tm__member.e-con ~ .ars-tm__member.e-con {
  margin-top: calc(var(--tm-step) * 2);
}


/* ---------------------------------------------------------------------
   3. JUDUL – .ars-tm__head (heading kiri, deskripsi kanan)
   --------------------------------------------------------------------- */
:where(.ars-tm) .ars-tm__head.e-con {
  --padding-bottom: 44px;                      /* ruang untuk garis bawah */

  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}

/* garis emas memudar di bawah judul */
:where(.ars-tm) .ars-tm__head.e-con::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--tm-gold-rgb), .5), rgba(var(--tm-gold-rgb), .08) 70%, transparent);
  pointer-events: none;
}

/* ---------- Heading – .ars-tm__title ---------- */
:where(.ars-tm .ars-tm__title) {
  --e-global-color-primary: var(--tm-gold);
  --e-global-typography-primary-font-family: var(--tm-font-display);
  --e-global-typography-primary-font-size: var(--tm-title-size);
  --e-global-typography-primary-font-weight: 500;
  --e-global-typography-primary-line-height: var(--tm-title-lh);
}

:where(.ars-tm) .ars-tm__title.elementor-widget {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

:where(.ars-tm) .ars-tm__title .elementor-heading-title {
  margin: 0;
  font-family: var(--tm-font-display);
  font-size: var(--tm-title-size);
  font-weight: 500;
  line-height: var(--tm-title-lh);
  color: var(--tm-gold);
}

/* label kecil emas di atas heading */
:where(.ars-tm) .ars-tm__title .elementor-heading-title::before {
  content: var(--tm-eyebrow);
  display: block;
  margin-bottom: 20px;
  font-family: var(--tm-font-body);
  font-size: var(--tm-eyebrow-size);             /* (v1.1) */
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: var(--tm-eyebrow-ls);          /* (v1.1) */
  text-transform: uppercase;
  color: var(--tm-gold);
  /* (v1.1) garis di depan sub judul dihapus */
}

/* ---------- Deskripsi – .ars-tm__desc ---------- */
:where(.ars-tm .ars-tm__desc) {
  --e-global-color-text: rgba(255, 255, 255, .78);
  --e-global-typography-text-font-family: var(--tm-font-body);
  --e-global-typography-text-font-size: var(--tm-desc-size);
  --e-global-typography-text-line-height: var(--tm-desc-lh);
}

:where(.ars-tm) .ars-tm__desc.elementor-widget {
  flex: 0 1 var(--tm-desc-max);
  width: auto;
  max-width: var(--tm-desc-max);
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid var(--tm-gold);
}

:where(.ars-tm) .ars-tm__desc.elementor-widget-text-editor {
  font-family: var(--tm-font-body);
  font-size: var(--tm-desc-size);
  line-height: var(--tm-desc-lh);
  color: rgba(255, 255, 255, .78);
  text-align: left;
}

:where(.ars-tm) .ars-tm__desc p { margin: 0 0 1em; }
:where(.ars-tm) .ars-tm__desc p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------
   4. KARTU TIM – .ars-tm__card (Image Box)                    (v1.1)
   Foto penuh di atas, nama & jabatan di bawah foto.
   --------------------------------------------------------------------- */
:where(.ars-tm .ars-tm__card) {
  --e-global-color-primary: var(--tm-gold);
  --e-global-color-text: rgba(255, 255, 255, .7);
}

:where(.ars-tm) .ars-tm__card.elementor-widget {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
}

/* bingkai emas tipis di belakang kartu */
:where(.ars-tm) .ars-tm__card.elementor-widget::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--tm-frame-offset);
  left: var(--tm-frame-offset);
  right: calc(var(--tm-frame-offset) * -1);
  bottom: calc(var(--tm-frame-offset) * -1);
  border: 1px solid var(--tm-frame);
  border-radius: var(--tm-radius);
  transition: transform var(--tm-speed) var(--tm-ease), border-color var(--tm-speed) ease;
  pointer-events: none;
}

:where(.ars-tm) .ars-tm__card.elementor-widget:hover::before {
  transform: translate(calc(var(--tm-frame-offset) * -.5), calc(var(--tm-frame-offset) * -.5));
  border-color: var(--tm-gold);
}

/* (v1.1) susunan kartu: foto di atas, teks di bawah – selalu,
   walau "Image Position" di panel diatur kiri/kanan */
.ars-tm.ars-tm .ars-tm__card.ars-tm__card.elementor-widget-image-box .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

:where(.ars-tm) .ars-tm__card .elementor-image-box-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--tm-radius);
  background: #12100e;
  border: 1px solid rgba(var(--tm-gold-rgb), .14);
  text-align: left;
}

/* (v1.1) foto selalu penuh – mengalahkan lebar bawaan Image Box (30%) */
.ars-tm.ars-tm .ars-tm__card.ars-tm__card.elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
  display: block;
  flex: none;
  width: var(--tm-img-width);
  max-width: 100%;
  margin: 0;
  line-height: 0;
  overflow: hidden;
}

:where(.ars-tm) .ars-tm__card .elementor-image-box-img a {
  display: block;
}

/* (v1.2) foto potret utuh – mengalahkan tinggi/ukuran bawaan Image Box
   yang membuat foto terpotong jadi strip pendek */
.ars-tm.ars-tm .ars-tm__card.ars-tm__card.elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--tm-img-ratio);
  object-fit: cover;
  object-position: center 20%;
  border-radius: 0;
  filter: var(--tm-img-filter);
  transform: scale(1.001);
  transition: transform 1.1s var(--tm-ease), filter .8s ease;
}

.ars-tm.ars-tm .ars-tm__card.ars-tm__card.elementor-widget-image-box:hover .elementor-image-box-wrapper .elementor-image-box-img img {
  filter: none;
  transform: scale(var(--tm-img-hover-scale));
}

/* (v1.1) nama + jabatan di BAWAH foto */
:where(.ars-tm) .ars-tm__card .elementor-image-box-content {
  position: relative;
  width: 100%;
  padding: var(--tm-card-pad);
  text-align: left;
}

/* garis emas di atas nama, memanjang saat hover */
:where(.ars-tm) .ars-tm__card .elementor-image-box-content::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-bottom: 16px;
  background: var(--tm-gold);
  transition: width var(--tm-speed) var(--tm-ease);
}

:where(.ars-tm) .ars-tm__card.elementor-widget:hover .elementor-image-box-content::before {
  width: 64px;
}

/* nama (Judul Image Box) */
:where(.ars-tm) .ars-tm__card .elementor-image-box-title {
  margin: 0;
  font-family: var(--tm-font-display);
  font-size: var(--tm-name-size);
  font-weight: 500;
  line-height: 1.15;
  color: var(--tm-gold);
}

:where(.ars-tm) .ars-tm__card .elementor-image-box-title a {
  color: inherit;
  text-decoration: none;
}

/* deskripsi (Deskripsi Image Box) – (v1.2) huruf mengikuti teks Anda */
:where(.ars-tm) .ars-tm__card .elementor-image-box-description {
  margin: 12px 0 0;
  font-family: var(--tm-font-body);
  font-size: var(--tm-role-size);
  font-weight: 400;                              /* (v1.2) */
  line-height: 1.7;                              /* (v1.2) */
  letter-spacing: var(--tm-role-ls);
  text-transform: var(--tm-role-transform);      /* (v1.2) */
  color: rgba(255, 255, 255, .72);
}

/* label "Founder" di kartu utama (di pojok foto) */
:where(.ars-tm) .ars-tm__lead .ars-tm__card.elementor-widget::after {
  content: var(--tm-lead-badge);
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 14px;
  font-family: var(--tm-font-body);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #14100b;
  background: var(--tm-gold);
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   5. ANIMASI MUNCUL SAAT DI-SCROLL (browser modern; lainnya langsung tampil)
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  :where(.ars-tm) .ars-tm__card.elementor-widget {
    animation: arsTmReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

@keyframes arsTmReveal {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------
   6. KURANGI ANIMASI
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ars-tm,
  .ars-tm * {
    animation: none !important;
    transition: none !important;
  }
}


/* ---------------------------------------------------------------------
   7. TABLET (≤ 1024px) – judul bertumpuk, kartu tetap 3 sejajar
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ars-tm {
    --tm-pad-x: 32px;
    --tm-pad-top: 96px;
    --tm-pad-bottom: 110px;
    --tm-head-gap: 56px;
    --tm-gap: 26px;
    --tm-step: 56px;                           /* (v1.3) */
    --tm-frame-offset: 10px;
    --tm-title-size: clamp(36px, 6vw, 52px);
    --tm-name-size: clamp(20px, 2.8vw, 26px);
    --tm-role-size: 14px;                      /* (v1.2) */
  }

  :where(.ars-tm) .ars-tm__head.e-con {
    --padding-bottom: 34px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  :where(.ars-tm) .ars-tm__desc.elementor-widget {
    flex: none;
    max-width: 600px;
  }

  .ars-tm {
    --tm-card-pad: 20px 18px 22px;             /* (v1.1) */
    --tm-role-ls: normal;                      /* (v1.2) */
  }
}


/* ---------------------------------------------------------------------
   8. MOBILE (≤ 767px) – foto utama penuh, dua lainnya berdampingan
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ars-tm {
    --tm-pad-x: 20px;
    --tm-pad-top: 80px;
    --tm-pad-bottom: 96px;
    --tm-head-gap: 44px;
    --tm-gap: 34px;                            /* (v1.1) jarak antar kartu bertumpuk */
    --tm-step: 0px;                            /* (v1.1) di HP tidak turun ke bawah */
    --tm-step-x: 9%;                           /* (v1.3) geser ke kanan tiap anak tangga di HP */
    --tm-card-w: 82%;                          /* (v1.3) lebar kartu di HP */
    --tm-frame-offset: 10px;
    --tm-title-size: clamp(34px, 9.5vw, 42px);
    --tm-desc-size: 15px;
    --tm-eyebrow-size: 12.5px;                 /* (v1.1) */
    --tm-eyebrow-ls: .3em;                     /* (v1.1) */
    --tm-name-size: 26px;
    --tm-role-size: 14.5px;                    /* (v1.2) */
    --tm-role-ls: normal;                      /* (v1.2) */
    --tm-card-pad: 20px 22px 24px;
    --tm-img-ratio: 1 / 1;                     /* (v1.3) */
  }

  /* (v1.1) semua kartu bertumpuk 1 kolom, tidak terlalu lebar */
  .e-con.ars-tm {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "lead";
  }

  /* (v1.3) tangga menyamping: kartu 1 kiri, kartu 2 tengah, kartu 3 kanan */
  :where(.ars-tm) .ars-tm__lead.e-con,
  :where(.ars-tm) .ars-tm__member.e-con {
    width: var(--tm-card-w);
    max-width: 440px;
    margin-left: 0;
    margin-right: auto;
    padding-right: var(--tm-frame-offset);     /* ruang untuk bingkai emas */
  }

  :where(.ars-tm) .ars-tm__member.e-con {
    margin-top: 0;
    margin-left: var(--tm-step-x);
  }

  :where(.ars-tm) .ars-tm__member.e-con ~ .ars-tm__member.e-con {
    margin-top: 0;
    margin-left: calc(var(--tm-step-x) * 2);
  }

  :where(.ars-tm) .ars-tm__desc.elementor-widget {
    padding-left: 16px;
  }

  :where(.ars-tm) .ars-tm__lead .ars-tm__card.elementor-widget::after {
    top: 14px;
    left: 14px;
    padding: 7px 11px;
    font-size: 9.5px;
  }
}/* End custom CSS */