.elementor-15 .elementor-element.elementor-element-5480013{--display:flex;--min-height:590px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.5;}.elementor-15 .elementor-element.elementor-element-5480013:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-5480013 > .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-15 .elementor-element.elementor-element-5480013::before, .elementor-15 .elementor-element.elementor-element-5480013 > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-5480013 > .e-con-inner > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-5480013 > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-5480013 > .e-con-inner > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-5480013 > .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-15 .elementor-element.elementor-element-42acf4c .elementor-heading-title{font-family:"DM Serif Display", Sans-serif;font-size:90px;font-weight:500;color:#D4AF37;}.elementor-15 .elementor-element.elementor-element-55c63b0{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15 .elementor-element.elementor-element-55c63b0 .elementor-heading-title{font-family:"Fira Code", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-ff8890b{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15 .elementor-element.elementor-element-ff8890b .elementor-heading-title{color:#B5B5B5;}.elementor-15 .elementor-element.elementor-element-f1cb0e5{--display:flex;--justify-content:flex-start;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-15 .elementor-element.elementor-element-54be726{--grid-template-columns:repeat(0, auto);text-align:left;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-15 .elementor-element.elementor-element-fe0bd9e{--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;--margin-top:-11px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-406582a{--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-15 .elementor-element.elementor-element-406582a:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-406582a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-15 .elementor-element.elementor-element-17b83e2{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-15 .elementor-element.elementor-element-070b3c6{--display:flex;}.elementor-15 .elementor-element.elementor-element-13a6f47 .elementor-heading-title{font-family:"DM Serif Display", Sans-serif;font-size:50px;font-weight:600;color:#D4AF37;}.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-15 .elementor-element.elementor-element-d9e869b{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-33c8ae2{--display:flex;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-15 .elementor-element.elementor-element-582207d .elementor-counter{flex-direction:column-reverse;}.elementor-15 .elementor-element.elementor-element-582207d .elementor-counter-number-wrapper{color:#D4AF37;font-family:"DM Serif Display", Sans-serif;font-size:60px;font-weight:500;}.elementor-15 .elementor-element.elementor-element-582207d .elementor-counter-title{color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-497ae23{--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-15 .elementor-element.elementor-element-3517dc8{--display:flex;}.elementor-15 .elementor-element.elementor-element-bdad194 .elementor-counter-number-wrapper{color:#D4AF37;font-family:"DM Serif Display", Sans-serif;font-size:60px;font-weight:500;}.elementor-15 .elementor-element.elementor-element-bdad194 .elementor-counter-title{color:#54595F;}.elementor-15 .elementor-element.elementor-element-de2a374{--display:flex;}.elementor-15 .elementor-element.elementor-element-8226730 .elementor-counter-number-wrapper{color:#D4AF37;font-family:"DM Serif Display", Sans-serif;font-size:60px;font-weight:500;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-42acf4c .elementor-heading-title{font-size:75px;}.elementor-15 .elementor-element.elementor-element-13a6f47 .elementor-heading-title{font-size:40px;}}@media(min-width:1025px){.elementor-15 .elementor-element.elementor-element-5480013:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-5480013 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for container, class: .elementor-element-5480013 *//* =====================================================================
   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-15 .elementor-element.elementor-element-5480013 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-15 .elementor-element.elementor-element-5480013).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-15 .elementor-element.elementor-element-5480013).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-15 .elementor-element.elementor-element-5480013) > .elementor-element,
:where(.elementor-15 .elementor-element.elementor-element-5480013) > .e-con-inner > .elementor-element {
  position: relative;
  z-index: 2;
}

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


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

:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__subtitle.elementor-widget {
  width: 100%;
  margin-block-end: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__tagline.elementor-widget {
  width: 100%;
  margin-block-end: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title::before,
:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__icons.elementor-widget {
  width: auto;
  margin-block-end: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(1) { --ars-i: 0; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(2) { --ars-i: 1; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(3) { --ars-i: 2; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(4) { --ars-i: 3; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(5) { --ars-i: 4; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(6) { --ars-i: 5; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(7) { --ars-i: 6; }
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item:nth-child(8) { --ars-i: 7; }

:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-social-icon:hover,
:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-social-icon:hover::before,
:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-social-icon:focus-visible::before {
  transform: none;
}

:where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-social-icon:hover i,
:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-social-icon:hover svg,
:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-social-icons-wrapper:hover .elementor-grid-item:hover {
    opacity: 1;
  }
}

:where(.elementor-15 .elementor-element.elementor-element-5480013) .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-15 .elementor-element.elementor-element-5480013) .elementor-heading-title,
  :where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__social.e-con::before,
  :where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__social.e-con::after,
  :where(.elementor-15 .elementor-element.elementor-element-5480013) .ars-hero__icons .elementor-grid-item {
    animation: none;                         /* v1.1 */
  }

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


/* ---------------------------------------------------------------------
   9. TABLET (≤ 1024px)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :where(.elementor-15 .elementor-element.elementor-element-5480013).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-15 .elementor-element.elementor-element-5480013).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-15 .elementor-element.elementor-element-5480013) .ars-hero__tagline.elementor-widget-heading .elementor-heading-title {
    gap: 12px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-406582a *//* =====================================================================
   ABOUT US SECTION – PORTOFOLIO PHOTOGRAPHY  (v1.0)
   Tempel di: Container Utama > Advanced > Custom CSS

   Class yang harus dipasang (Advanced > CSS Classes):

   Container utama ................................ ars-about
   ├─ Container (foto) ............................ ars-about__media
   │   ├─ Image 1 (foto besar) .................... ars-about__img-main
   │   └─ Image 2 (foto kecil, menumpuk) .......... ars-about__img-float
   └─ Container (konten) .......................... ars-about__content
       ├─ Heading ................................. ars-about__title
       ├─ Text Editor ............................. ars-about__text
       ├─ Container (counter atas) ................ ars-about__stat ars-about__stat--main
       │   └─ Counter ............................. ars-about__counter
       └─ Container (baris 2 counter) ............. ars-about__stats-row
           ├─ Container (counter kiri) ............ ars-about__stat ars-about__stat--left
           │   └─ Counter ......................... ars-about__counter
           └─ Container (counter kanan) ........... ars-about__stat ars-about__stat--right
               └─ Counter ......................... ars-about__counter

   CATATAN: semua .elementor-15 .elementor-element.elementor-element-406582a dibungkus :where() supaya specificity rendah.
   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.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PENGATURAN UTAMA – ubah nilai di sini
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a).e-con {
  /* Warna (sama dengan hero & marquee) */
  --ars-bg: #0a0908;
  --ars-gold: #D4AF37;
  --ars-gold-light: #F0D98C;
  --ars-gold-rgb: 212, 175, 55;
  --ars-white: #ffffff;
  --ars-muted: rgba(255, 255, 255, .66);
  --ars-line: rgba(var(--ars-gold-rgb), .35);   /* garis pemisah counter */

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

  /* Layout section */
  --ars-pad-y: 130px;
  --ars-pad-x: 48px;
  --ars-content-max: 1240px;
  --ars-col-gap: 90px;               /* jarak kolom foto & kolom teks */
  --ars-media-width: 50%;            /* lebar kolom foto */

  /* Komposisi foto */
  --ars-media-ratio: 6 / 7;          /* rasio area foto (lebar / tinggi) */
  --ars-img-radius: 0px;             /* sudut foto, misal 6px */
  --ars-float-frame: 14px;           /* bingkai gelap di foto kecil */
  --ars-float-frame-color: var(--ars-bg);
  --ars-float-hairline: rgba(var(--ars-gold-rgb), .7);  /* garis emas di dalam bingkai */
  --ars-float-shadow: 0 30px 60px rgba(0, 0, 0, .55);

  --ars-block-color: var(--ars-gold);   /* blok emas kiri atas */
  --ars-block-w: 16%;
  --ars-block-h: 30%;
  --ars-block-top: 8%;

  --ars-outline-color: var(--ars-gold); /* bingkai garis emas kanan bawah */
  --ars-outline-w: 46%;
  --ars-outline-h: 38%;
  --ars-outline-offset: 22px;

  --ars-img-filter: saturate(.85) brightness(.92);        /* foto sedikit redup */
  --ars-img-filter-hover: saturate(1.05) brightness(1);   /* saat hover */
  --ars-float-lift: -8px;                                 /* foto kecil naik saat hover */

  /* Heading */
  --ars-title-size: clamp(36px, 4vw, 60px);
  --ars-title-weight: 500;
  --ars-title-color: var(--ars-white);
  --ars-title-lh: 1.08;
  --ars-title-ls: 0em;
  --ars-title-line: 64px;            /* garis emas di atas heading, 0 = hilang */
  --ars-title-gap: 26px;

  /* Paragraf */
  --ars-text-size: 16px;
  --ars-text-weight: 400;
  --ars-text-color: var(--ars-muted);
  --ars-text-lh: 1.85;
  --ars-text-max: 58ch;

  /* Counter */
  --ars-stats-top: 64px;             /* jarak paragraf ke area counter */
  --ars-num-main-size: clamp(64px, 6.5vw, 108px);   /* angka counter atas */
  --ars-num-size: clamp(48px, 4.6vw, 78px);         /* angka counter bawah */
  --ars-num-weight: 500;
  --ars-num-color: var(--ars-white);
  --ars-num-affix-color: var(--ars-gold);           /* warna "+" / prefix / suffix */
  --ars-label-size: 15px;
  --ars-label-weight: 400;
  --ars-label-color: var(--ars-muted);
  --ars-label-ls: .06em;
  --ars-label-transform: none;      /* none / uppercase */
  --ars-stat-pad: 34px;             /* ruang dalam tiap counter */
  --ars-bracket: 96px;              /* panjang siku emas, 0 = hilang */
  --ars-bracket-color: var(--ars-gold);

  /* ---- Pengaturan container (variabel bawaan Elementor) ---- */
  --flex-direction: row;
  --flex-wrap: nowrap;
  --align-items: center;
  --justify-content: center;
  --gap: var(--ars-col-gap);
  --column-gap: var(--ars-col-gap);
  --row-gap: 70px;
  --padding-top: var(--ars-pad-y);
  --padding-bottom: var(--ars-pad-y);
  --padding-left: var(--ars-pad-x);
  --padding-right: var(--ars-pad-x);

  background-color: var(--ars-bg);
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) > .e-con-inner {
  max-width: var(--ars-content-max);
}


/* ---------------------------------------------------------------------
   2. KOLOM FOTO – .ars-about__media
   Grid 12 x 12 untuk menata foto besar & foto kecil bertumpuk
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media.e-con {
  --width: var(--ars-media-width);
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  aspect-ratio: var(--ars-media-ratio);
  width: var(--ars-media-width);
  flex: none;
  position: relative;
  isolation: isolate;
}

/* Jika container foto masih "Boxed", inner-nya dilebur ke grid */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media > .e-con-inner {
  display: contents;
}

/* Pengaturan dasar kedua foto */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media .elementor-widget-image {
  position: relative;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media .elementor-widget-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: var(--ars-img-radius);
  filter: var(--ars-img-filter);
  transition: filter .6s ease;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media .elementor-widget-image:hover img {
  filter: var(--ars-img-filter-hover);
}


/* ---------- 2a. Foto besar – .ars-about__img-main ---------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-main.elementor-widget {
  grid-area: 1 / 4 / 12 / 13;
  z-index: 1;
}

/* Blok emas solid di kiri atas (menyembul di belakang foto) */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-main.elementor-widget::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--ars-block-top);
  right: 100%;
  width: var(--ars-block-w);
  height: var(--ars-block-h);
  background: var(--ars-block-color);
}

/* Bingkai garis emas di kanan bawah (bergeser keluar foto) */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-main.elementor-widget::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: calc(var(--ars-outline-offset) * -1);
  bottom: calc(var(--ars-outline-offset) * -1);
  width: var(--ars-outline-w);
  height: var(--ars-outline-h);
  border: 1px solid var(--ars-outline-color);
  pointer-events: none;
}


/* ---------- 2b. Foto kecil – .ars-about__img-float ---------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-float.elementor-widget {
  grid-area: 6 / 1 / 13 / 7;
  z-index: 2;
  background: var(--ars-float-frame-color);
  box-shadow: var(--ars-float-shadow);
  transition: transform .6s cubic-bezier(.22, .8, .25, 1);
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-float.elementor-widget img {
  inset: var(--ars-float-frame);
  width: calc(100% - var(--ars-float-frame) * 2);
  height: calc(100% - var(--ars-float-frame) * 2);
}

/* Garis emas tipis di tengah bingkai */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-float.elementor-widget::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: calc(var(--ars-float-frame) / 2);
  border: 1px solid var(--ars-float-hairline);
  pointer-events: none;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-float.elementor-widget:hover {
  transform: translateY(var(--ars-float-lift));
}


/* ---------------------------------------------------------------------
   3. KOLOM KONTEN – .ars-about__content
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__content.e-con {
  --flex-direction: column;
  --align-items: stretch;
  --justify-content: center;
  --gap: 0px;
  --row-gap: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;

  flex: 1 1 0;
  min-width: 0;
}


/* ---------------------------------------------------------------------
   4. HEADING – .ars-about__title
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__title.elementor-widget {
  margin-block-end: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__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);
}

/* Garis emas pendek di atas heading */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__title.elementor-widget-heading .elementor-heading-title::before {
  content: "";
  display: block;
  width: var(--ars-title-line);
  height: 1px;
  margin-bottom: 26px;
  background: linear-gradient(90deg, var(--ars-gold), transparent);
}


/* ---------------------------------------------------------------------
   5. PARAGRAF – .ars-about__text
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__text.elementor-widget {
  margin-block-end: 0;
  max-width: var(--ars-text-max);
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__text.elementor-widget-text-editor {
  font-family: var(--ars-font-body);
  font-size: var(--ars-text-size);
  font-weight: var(--ars-text-weight);
  line-height: var(--ars-text-lh);
  color: var(--ars-text-color);
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__text.elementor-widget-text-editor p {
  margin: 0 0 1em;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__text.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------
   6. AREA COUNTER – container & garis pemisah
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat.e-con {
  --flex-direction: column;
  --align-items: center;
  --justify-content: center;
  --gap: 0px;
  --row-gap: 0px;
  --padding-top: var(--ars-stat-pad);
  --padding-bottom: var(--ars-stat-pad);
  --padding-left: 16px;
  --padding-right: 16px;

  position: relative;
}

/* Counter atas */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat--main.e-con {
  --width: 100%;
  margin-top: var(--ars-stats-top);
}

/* Siku emas kiri atas */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat--main.e-con::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ars-bracket);
  height: var(--ars-bracket);
  border-top: 1px solid var(--ars-bracket-color);
  border-left: 1px solid var(--ars-bracket-color);
  pointer-events: none;
}

/* Baris 2 counter */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stats-row.e-con {
  --width: 100%;
  --flex-direction: row;
  --flex-wrap: nowrap;
  --align-items: stretch;
  --gap: 0px;
  --column-gap: 0px;
  --row-gap: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;

  position: relative;
}

/* Garis horizontal di atas baris (memudar di kedua ujung) */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stats-row.e-con::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ars-line) 15%, var(--ars-line) 85%, transparent);
  pointer-events: none;
}

/* Siku emas kanan bawah */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stats-row.e-con::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--ars-bracket);
  height: var(--ars-bracket);
  border-right: 1px solid var(--ars-bracket-color);
  border-bottom: 1px solid var(--ars-bracket-color);
  pointer-events: none;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat--left.e-con,
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat--right.e-con {
  --width: 50%;
  flex: 1 1 50%;
}

/* Garis vertikal emas di antara 2 counter */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat--left.e-con::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--ars-line), var(--ars-gold) 50%, transparent);
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   7. COUNTER – .ars-about__counter
   --------------------------------------------------------------------- */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget {
  width: 100%;
  margin-block-end: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget-counter .elementor-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget-counter .elementor-counter-number-wrapper {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: var(--ars-font-display);
  font-size: var(--ars-num-size);
  font-weight: var(--ars-num-weight);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ars-num-color);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Angka counter atas lebih besar */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat--main .ars-about__counter.elementor-widget-counter .elementor-counter-number-wrapper {
  font-size: var(--ars-num-main-size);
}

/* Prefix & suffix (misal "+") berwarna emas */
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget-counter .elementor-counter-number-prefix,
:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget-counter .elementor-counter-number-suffix {
  flex-grow: 0;
  color: var(--ars-num-affix-color);
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget-counter .elementor-counter-number {
  flex-grow: 0;
}

:where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__counter.elementor-widget-counter .elementor-counter-title {
  font-family: var(--ars-font-body);
  font-size: var(--ars-label-size);
  font-weight: var(--ars-label-weight);
  line-height: 1.4;
  letter-spacing: var(--ars-label-ls);
  text-transform: var(--ars-label-transform);
  color: var(--ars-label-color);
}


/* ---------------------------------------------------------------------
   8. TABLET (≤ 1024px) – foto di atas, teks di bawah
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :where(.elementor-15 .elementor-element.elementor-element-406582a).e-con {
    --ars-pad-y: 100px;
    --ars-pad-x: 36px;
    --ars-col-gap: 80px;
    --ars-media-width: min(100%, 620px);
    --ars-float-frame: 12px;
    --ars-outline-offset: 16px;
    --ars-title-size: clamp(34px, 5.4vw, 50px);
    --ars-stats-top: 52px;
    --ars-num-main-size: clamp(60px, 10vw, 92px);
    --ars-num-size: clamp(44px, 7vw, 66px);
    --ars-bracket: 80px;

    --flex-direction: column;
    --flex-wrap: nowrap;
    --align-items: center;
    --gap: var(--ars-col-gap);
    --row-gap: var(--ars-col-gap);
  }

  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media.e-con {
    margin-left: 40px;                          /* ruang untuk blok emas kiri */
    width: calc(var(--ars-media-width) - 40px);
  }

  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__content.e-con {
    --width: 100%;
    width: 100%;
    max-width: 680px;
    flex: none;
  }
}


/* ---------------------------------------------------------------------
   9. MOBILE (≤ 767px)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  :where(.elementor-15 .elementor-element.elementor-element-406582a).e-con {
    --ars-pad-y: 80px;
    --ars-pad-x: 22px;
    --ars-col-gap: 60px;
    --ars-media-ratio: 5 / 6;
    --ars-float-frame: 9px;
    --ars-block-w: 12%;
    --ars-block-h: 26%;
    --ars-outline-offset: 12px;
    --ars-float-lift: 0px;
    --ars-title-size: clamp(30px, 8.5vw, 40px);
    --ars-title-line: 48px;
    --ars-title-gap: 20px;
    --ars-text-size: 15px;
    --ars-text-lh: 1.8;
    --ars-stats-top: 44px;
    --ars-num-main-size: clamp(54px, 17vw, 76px);
    --ars-num-size: clamp(38px, 11vw, 52px);
    --ars-label-size: 13px;
    --ars-label-ls: .04em;
    --ars-stat-pad: 26px;
    --ars-bracket: 56px;
  }

  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media.e-con {
    margin-left: 18px;
    width: calc(100% - 30px);
  }

  /* Foto kecil sedikit lebih besar agar tetap jelas di layar kecil */
  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-float.elementor-widget {
    grid-area: 6 / 1 / 13 / 8;
  }

  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__stat.e-con {
    --padding-left: 8px;
    --padding-right: 8px;
  }
}


/* ---------------------------------------------------------------------
   10. KURANGI ANIMASI
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__media .elementor-widget-image img,
  :where(.elementor-15 .elementor-element.elementor-element-406582a) .ars-about__img-float.elementor-widget {
    transition: none;
  }
}/* End custom CSS */