/* 
Lizar Business HTML Template 

*/
/************ TABLE OF CONTENTS ***************

1. Fonts
2. Reset
3. Global
4. Main Header / Two / Three
5. Main Slider / Two / Three
6. About One
7. Services One / Two / Three / Four
8. Project One / Two / Three
9. Testimonial One / Two / Three
10. Partners One
11. News One / Two
12. CTA One
13. Main Footer
14. Clients One / Two / Three
15. Counter One
16. News Three
17. InTouch One
18. Page Title
19. Banner One
20. Work One
21. Pricing One
22. Team One
23. Services Widgets
24. Services Detail
25. Our Projects
26. Projects Detail
27. Projects Widgets
28. Our Blog
29. Blog Widgets
30. Comment Form
31. Comment Box
32. Contact Info
33. Contact Form
34. Map

**********************************************/



/*** 
====================================================================
	Css Files
====================================================================
***/
@import url('01-global.css');
@import url('module-css/header.css');
@import url('module-css/footer.css');
@import url('module-css/feature.css');
@import url('module-css/solutions.css');
@import url('module-css/pricing.css');
@import url('module-css/brand.css');
@import url('module-css/collaboration.css');
@import url('module-css/testimonial.css');
@import url('module-css/faq.css');
@import url('module-css/free-trail.css');
@import url('module-css/copywriting-tool.css');
@import url('module-css/how-tool-work.css');
@import url('module-css/counter.css');
@import url('module-css/case.css');
@import url('module-css/banner.css');
@import url('module-css/gallery.css');
@import url('module-css/image-generator-tools.css');
@import url('module-css/art-and-image-tool.css');
@import url('module-css/amazing-art-tool.css');
@import url('module-css/create-something.css');
@import url('module-css/page-title.css');
@import url('module-css/about.css');
@import url('module-css/video.css');
@import url('module-css/team.css');
@import url('module-css/ai-product.css');
@import url('module-css/login.css');
@import url('module-css/reset-password.css');
@import url('module-css/contact.css');
@import url('module-css/blog.css');
@import url('module-css/career.css');
@import url('module-css/404.css');




@import url('02-bootstrap-select.min.css');
@import url('03-owl.css');
@import url('04-animate.css');
@import url('05-rtl.css');
@import url('06-custom-animate.css');
@import url('07-dark-body.css');
@import url('08-font-awesome.css');
@import url('09-icomoon.css');
@import url('10-jarallax.css');
@import url('11-preloader.css');
@import url('12-swiper.min.css');
@import url('13-odometer-theme-default.css');
@import url('14-jquery-ui.css');
@import url('15-magnific-popup.css');
@import url('../fonts/reey-font/stylesheet.css');



/*** 
====================================================================
	
====================================================================
***/


/* Sticy Header */
.want-sticky-header .main-header.fixed-header {
	position: relative !important;
	display: none;
}


/* Box Layout */
.box-layout .page-wrapper {
	max-width: 1390px;
	width: 100%;
	margin: 0 auto;
	padding: 15px;
	overflow: hidden;
	background-color: var(--thm-body-bg);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
}

.box-layout:before {
	position: fixed;
	content: '';
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/partners/thm-pattern-2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.box-layout .slider-one_social-icons {
	display: none;
}

.box-layout .main-header-two__inner {
	margin: 0 0px;
}

/* wrapper */
.tag-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 28px;
  background: radial-gradient(1200px 300px at 50% 0%, rgba(78, 90, 255, 0.18), transparent 60%),
              linear-gradient(180deg, #050615, var(--bg));
}

/* pill */
.tag-pill{
  /* KUNCI agar lebar mengikuti isi */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;       /* auto menyesuaikan konten */
  max-width: 100%;          /* aman di mobile */
  padding: 17px 17px;
  border-radius: 15px;

  background: var(--pill-bg);
  border: 2px solid var(--border);

  /* glow halus seperti contoh */
  box-shadow:
    0 0 0 1px rgba(118,131,255,0.18) inset,
    0 0 22px rgba(118,131,255,0.10),
    0 12px 30px rgba(0,0,0,0.35);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* teks */
.tag-title{
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;      /* biar 1 baris */
}

.tag-subtitle{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--subtitle);
  white-space: nowrap;      /* biar 1 baris */
}

/* Mobile: kalau teks kepanjangan, biar tidak overflow */
@media (max-width: 520px){
  .tag-title,
  .tag-subtitle{
    white-space: normal;    /* boleh turun baris di layar kecil */
  }
  .tag-pill{
    width: 100%;            /* opsional: full width di mobile */
  }
}

.row.benefit-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;                 /* penting: supaya tidak rely ke gutter col */
  align-items: stretch;
}

@media (max-width: 1199.98px){ .row.benefit-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .row.benefit-grid{ grid-template-columns: 1fr; } }

.row.benefit-grid > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;     /* kalau kamu pakai gap */
}

/* kartu */
.row.benefit-grid .case-one__single{
  height: 100%;
  min-height: 200px;         /* turunkan dari 320 → 240–280 biasanya pas */
  padding: 40px 32px;        /* sesuaikan agar “balance” */
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-left:10px;
  margin-right:10px;
}





/* ===========================
   INTEGRATION TABLE (CLEAN)
   =========================== */

.integration-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* head + body padding konsisten */
.integration-table thead th,
.integration-table tbody td{
  padding: 18px 20px;
  vertical-align: middle;
  color: #A1AAC9;
  font-size: 14px;
  font-weight: 500;
}

/* border garis */
.integration-table thead th{
  border-top: 1px solid var(--thm-bdr-color);
  border-bottom: 1px solid var(--thm-bdr-color);
  white-space: nowrap;
}

.integration-table tbody tr{
  border-top: 1px solid var(--thm-bdr-color);
  border-bottom: 1px solid var(--thm-bdr-color);
}
.integration-table tbody tr:last-child{
  border-bottom: 1px solid var(--thm-bdr-color);
}

/* tinggi row body */
.integration-table tbody td{
  padding-top: 28px;
  padding-bottom: 28px;
}

/* kolom 2 & 3 */
.integration-table .service-col{
  width: 320px;
  white-space: nowrap; /* opsional: metode 1 baris */
}
.integration-table .desc-col{
  line-height: 1.6;
}

/* ===== KUNCI: Stakeholder cell 2-subkolom (logo + teks) ===== */
.integration-table .stakeholder-cell{
  display: grid;
  grid-template-columns: 80px 1fr; /* logo fixed, teks fleksibel */
  align-items: center;
  column-gap: 16px;
}

/* spacer untuk thead agar sama dengan ukuran logo */
.integration-table .stakeholder-logo-spacer{
  width: 80px;
  height: 1px;
  display: block;
}

/* logo */
.integration-table .org-logo{
  width: 100px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* nama stakeholder */
.integration-table .org-name{
  color: #A1AAC9;
  font-size: 13px;
  font-weight: 500;
}

/* responsive */
@media (max-width: 768px){
  .integration-table thead th,
  .integration-table tbody td{
    padding: 12px 12px;
    font-size: 13px;
    white-space: normal;
  }

  .integration-table .org-logo{
  width: 100px !important;
}

  .integration-table .stakeholder-cell{
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
  }

  .integration-table .stakeholder-logo-spacer{ width: 56px; }
  .integration-table .org-logo{ width: 56px; }

  .integration-table .service-col{
    width: auto;
    white-space: normal;
  }
}


 /* =========================
   SDM PREFIXED STYLES ONLY
========================== */
:root{
  --sdm-bg0:#070817;
  --sdm-bg1:#081a3a;
  --sdm-text:rgba(255,255,255,.92);

  --sdm-glassA:rgba(255,255,255,.08);
  --sdm-glassB:rgba(255,255,255,.04);

  --sdm-stroke:rgba(255,255,255,.14);
  --sdm-stroke2:rgba(255,255,255,.26);
  --sdm-innerStroke:rgba(255,255,255,.12);

  --sdm-rail:rgba(120,170,255,.42);
  --sdm-pillBg:rgba(255,255,255,.06);

  /* wrapper + rail control */
  --sdm-wrapper-max: 1500px;

  /* (biarkan untuk komponen internal kalau Anda butuh) */
  --sdm-padX: clamp(14px, 3vw, 32px);

  /* TARGET ALIGNMENT: sejajar container max-width:1200 + gutter 15px */
  --sdm-container-max: 1200px;
  --sdm-gutter: 15px;
  --sdm-alignX: clamp(
    var(--sdm-gutter),
    calc((100vw - var(--sdm-container-max))/2 + var(--sdm-gutter)),
    9999px
  );

  /* jarak antar CARD (lebih rapat, stabil) */
  --sdm-gap-cards: 34px;

  /* ruang aman untuk logo & scale */
  --sdm-safeY: 62px;

  /* scale effect aman (tidak overlap) */
  --sdm-s-dim:.988;
  --sdm-s-active:1.010;
  --sdm-s-hover:1.012;

  --sdm-t: 240ms;
  --sdm-ease: cubic-bezier(.2,.85,.2,1);

  /* ukuran panel */
  --sdm-panel-h: 360px;
  --sdm-panel-r: 26px;

  --sdm-logo: 92px;
  --sdm-logo-r: 22px;

  --sdm-pad: 18px;
  --sdm-top-inset: 52px;

  --sdm-rail-h: 46px;
  --sdm-pill-h: 34px;

  /* glow aktif */
  --sdm-glowA: rgba(120,170,255,.42);
  --sdm-glowB: rgba(120,170,255,.14);

  /* chevron */
  --sdm-gap-node: 44px;
  --sdm-chev-size: 64px;
  --sdm-chev-bg: rgba(255,255,255,.10);
  --sdm-chev-stroke: rgba(255,255,255,.22);
  --sdm-chev-color: rgba(255,255,255,.95);
}

/* Hanya scope sdm */
.sdm-wrap{
  max-width: var(--sdm-wrapper-max);
  margin: 0 auto;

  /* FIX: jangan dorong horizontal di sini (biar start align hanya dari fullbleed) */
  padding: 18px 0 42px;

  position: relative;
  isolation: isolate;
}

.sdm-title{
  margin: 12px 0 14px;
  text-align:center;
  font-weight: 950;
  letter-spacing:.2px;
  font-size: clamp(26px, 4vw, 54px);
  color: var(--sdm-text);
}

/* =========================
   RAIL
========================== */
.sdm-rail{
  display:flex;
  align-items:flex-end;
  gap: var(--sdm-gap-cards);

  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;

  /* padding vertikal aman untuk logo melayang */
  padding: var(--sdm-safeY) 0 10px;

  scroll-snap-type:x mandatory;

  /* snap mengikuti garis container */
  scroll-padding-left: var(--sdm-alignX);
  scroll-padding-right: var(--sdm-alignX);

  position:relative;
  isolation:isolate;
}
.sdm-rail::-webkit-scrollbar{height:0}

/* OPTIONAL: buat card terlihat lebih "wide" tanpa bikin scroll area melebar */
.sdm-rail.sdm-rail-float{
  margin-left: calc(var(--sdm-alignX) * -1);
  margin-right: calc(var(--sdm-alignX) * -1);
  padding-left: var(--sdm-alignX);
  padding-right: var(--sdm-alignX);
}

/* =========================
   ITEM
========================== */
.sdm-item{
  flex:0 0 auto;
  width: clamp(450px, 62vw, 680px);
  scroll-snap-align:center;
  position:relative;
  z-index:1;

  transform: translateZ(0) scale(1);
  transform-origin:center;
  transition: transform var(--sdm-t) var(--sdm-ease), filter var(--sdm-t) var(--sdm-ease), opacity var(--sdm-t) var(--sdm-ease);
  will-change: transform;
  opacity:.96;
  filter:saturate(1);
}

/* hover proxy untuk anti flicker */
.sdm-item .sdm-hover{
  position:absolute;
  inset:-12px;
  z-index:5;
  border-radius: calc(var(--sdm-panel-r) + 14px);
}

.sdm-item:has(.sdm-hover:hover){
  transform: translateZ(0) scale(var(--sdm-s-hover));
  opacity:1;
  filter:saturate(1.03);
  z-index:30;
}

.sdm-rail:has(.sdm-item:has(.sdm-hover:hover)) .sdm-item:not(:has(.sdm-hover:hover)){
  transform: translateZ(0) scale(var(--sdm-s-dim));
  opacity:.90;
  filter:saturate(.98);
  z-index:1;
}

/* active manual (SATU-SATUNYA sumber active) */
.sdm-item.sdm-is-active{
  transform: translateZ(0) scale(var(--sdm-s-active));
  opacity:1;
  filter:saturate(1.02);
  z-index:25;
}

/* dim item lain jika ada active (dan tidak ada hover) */
.sdm-rail:has(.sdm-item.sdm-is-active):not(:has(.sdm-item:has(.sdm-hover:hover))) .sdm-item:not(.sdm-is-active){
  transform: translateZ(0) scale(var(--sdm-s-dim));
  opacity:.92;
  filter:saturate(.98);
}

/* =========================
   PANEL
========================== */
.sdm-panel{ position:relative; overflow:visible; }

.sdm-panel-clip{
  height: var(--sdm-panel-h);
  border-radius: var(--sdm-panel-r);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
  z-index:10;
}

/* glow minimal aktif (HANYA active class) */
.sdm-item.sdm-is-active .sdm-panel-clip{
  border-color: #3C3C77;
  box-shadow:
    0 26px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(#3C3C77),
    0 0 22px var(--sdm-glowB);
}



.sdm-panel-body{
  height:100%;
  padding: var(--sdm-pad);
  padding-top: var(--sdm-top-inset);
}

/* logo floating: tidak terpotong */
.sdm-logo{
  position:absolute;
  top: calc(var(--sdm-logo) * -0.36);
  left: 50%;
  transform: translateX(-50%);
  width: var(--sdm-logo);
  height: var(--sdm-logo);
  border-radius: var(--sdm-logo-r);
  background: rgba(255,255,255,.97);
  box-shadow: 0 16px 46px rgba(0,0,0,.30);
  display:grid;
  place-items:center;
  z-index: 80;
  overflow:hidden;
}
.sdm-logo img{
  width: 76%;
  height: 76%;
  object-fit:contain;
  display:block;
}

.sdm-subbox{
  width:100%;
  height:210px;
  border-radius:26px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--sdm-innerStroke);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);

  /* SELALU TENGAH */
  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden; /* kalau gambar kegedean, tidak keluar box */
}

.sdm-subbox img{
  display:block;
  object-fit:contain;

  /* opsional tapi sangat disarankan: biar gambar segede apa pun tetap muat */
  max-width:100%;
  max-height:100%;
}

.sdm-lbl{
  text-align:center;
  font-weight:normal;
  font-size:13px;
  margin-top:10px;
  padding-left:25px;
  padding-right:25px;
  color: rgba(255,255,255,.92);
}

/* =========================
   GAP NODE (chevron)
========================== */
.sdm-gap{
  flex: 0 0 var(--sdm-gap-node);
  height: calc(var(--sdm-panel-h) + var(--sdm-rail-h));
  position:relative;
  scroll-snap-align:center;
  pointer-events:none;
}
.sdm-gap::before{
  content:"";
  position:absolute;
  top: 8px;
  bottom: calc(var(--sdm-rail-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.55;
}
.sdm-chevron{
  position:absolute;
  left:50%;
  top: calc(var(--sdm-panel-h) * .4);
  transform: translate(-50%,-50%);
  width: var(--sdm-chev-size);
  height: var(--sdm-chev-size);
  border-radius: 999px;
  display:grid;
  place-items:center;
  opacity:.95;
}
.sdm-chevron svg{
  width: 30px;
  height: 30px;
  stroke: var(--sdm-chev-color);
  stroke-width: 3.6;
  fill: none;
  display:block;
}

/* =========================
   RAIL LINE + PILL per item
========================== */
.sdm-railbar{
  position:relative;
  height: var(--sdm-rail-h);
  margin-top: 40px;
  z-index: 20;
  overflow: visible;
}
.sdm-railbar .sdm-line{
  position:absolute;
  left:0; right:0;
  top: calc(var(--sdm-rail-h)/2);
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--sdm-rail), transparent);
  opacity:.95;
}
.sdm-pill{
  position:absolute;
  left:50%;
  top: calc(var(--sdm-rail-h)/2);
  transform: translate(-50%,-50%);
  height: var(--sdm-pill-h);
  padding: 0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: var(--sdm-pillBg);
  color: rgba(255,255,255,.82);
  font-weight:600;
  font-size:16px;
  letter-spacing:.15px;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: background var(--sdm-t) var(--sdm-ease), border-color var(--sdm-t) var(--sdm-ease), box-shadow var(--sdm-t) var(--sdm-ease), color var(--sdm-t) var(--sdm-ease);
}
.sdm-pill:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
}

/* highlight pill via class (diset oleh JS) */
.sdm-pill.is-active,
.sdm-mpill.is-active{
  background: rgba(120,170,255,.20);
  border-color: rgba(120,170,255,.58);
  box-shadow: 0 0 0 4px rgba(120,170,255,.10);
  color: rgba(255,255,255,.98);
}

/* =========================
   MOBILE NAV
========================== */
.sdm-mnav{ display:none; margin-top: 12px; position:relative; z-index: 40; }
.sdm-mnav .sdm-mline{
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--sdm-rail), transparent);
  opacity:.95; margin: 8px 0 10px;
}
.sdm-mnav .sdm-mscroll{
  display:flex; gap:10px; overflow-x:auto;
  padding: 0 6px 8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-top:20px;
  margin-bottom:20px;
}
.sdm-mnav .sdm-mscroll::-webkit-scrollbar{height:0}
.sdm-mpill{
  flex:0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight:750;
  font-size:13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  max-width: calc(100vw - 84px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   RESPONSIVE
========================== */
@media (max-width: 980px){
  :root{
    --sdm-panel-h: 340px;
    --sdm-logo: 84px;
    --sdm-top-inset: 50px;
    --sdm-gap-cards: 18px;
    --sdm-gap-node: 22px;
    --sdm-chev-size: 52px;
    --sdm-safeY: 56px;
  }
  .sdm-item{ width: min(92vw, 680px); }
  .sdm-subbox{ height: 190px; }

  /* di mobile: gap node boleh dimatikan agar swipe nyaman */
  .sdm-gap{ display:none; }

  .sdm-mnav{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  .sdm-item, .sdm-pill, .sdm-mpill{ transition:none; }
}

/* =========================
   FULLBLEED WRAPPER
========================== */
.container--fullbleed{
  width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding-left: var(--sdm-alignX);
  padding-right: var(--sdm-alignX);

  overflow: visible;
  position: relative;
}

/* chevron di tengah antar subbox (di dalam panel) */
.sdm-chevron.sdm-chevron--mid{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;

  z-index: 30;
  pointer-events:none;
}

/* pastikan svg ikut warna yang sudah Anda set */
.sdm-chevron.sdm-chevron--mid svg{
  stroke: var(--sdm-chev-color);
}

@media (max-width: 980px){

  /* biarkan isi panel bisa bertambah tinggi secara natural (tidak dipaksa 100%) */
  .sdm-panel-body .row.h-100{
    height: auto !important;
    min-height: 0 !important;
  }

  /* kecilkan subbox agar ruang teks cukup */
  .sdm-subbox{
    height: 160px; /* dari 190/210 -> 160 */
  }

  /* rapikan label/caption agar tidak “makan” ruang */
  .sdm-lbl{
    font-size: 13px;
    line-height: 1.25;
    margin-top: 8px;
  }

  /* jika Anda punya paragraf teks di bawah subbox (bukan .sdm-lbl),
     pakai ini untuk memastikan wrap & tidak kepotong */
  .sdm-panel-body p,
  .sdm-panel-body .sdm-desc{
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 1) Atur layout dalam panel: subbox + label punya area jelas */
.sdm-panel-body{
  display: grid;
  grid-template-rows: auto 1fr;  /* row (subbox) + row (label) */
  gap: 14px;
}

/* 2) Row (yang sebelumnya h-100) jangan memaksa tinggi */
.sdm-panel-body .row{
  height: auto !important;
  min-height: 0 !important;
}

/* 3) Subbox tetap fixed (seperti desain Anda) */
.sdm-subbox{
  height: 210px; /* desktop */
}

/* 4) Label: wrap + dibatasi agar tidak kepotong */
.sdm-lbl{
  margin-top: 10px;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;

  /* clamp 3 baris (ubah 2/3 sesuai kebutuhan) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 5) Mobile: kecilkan subbox + clamp lebih sedikit */
@media (max-width: 980px){
  .sdm-subbox{ height: 160px; }
  .sdm-lbl{ -webkit-line-clamp: 2; font-size: 13px; }
}

a.sdm-logo{
  display:grid;          /* jangan inline */
  line-height: 0;        /* hilangkan baseline gap */
  text-decoration:none;
  color: inherit;
}

.sdm-logo a.sdm-logo-link{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 0;
  text-decoration: none;
}

.sdm-logo a.sdm-logo-link img{
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}

/* =====================================================
   FIX SNAP-END: agar card terakhir bisa tampil utuh
   (scroll-snap center butuh end-space dinamis)
   ===================================================== */

/* 1) Definisikan "perkiraan" lebar item (samakan dengan .sdm-item) */
:root{
  --sdm-itemW: clamp(450px, 62vw, 680px); /* sama persis dg .sdm-item width */
  --sdm-edgeExtra: 72px;                  /* ruang untuk shadow + scale + glow */
  --sdm-endSpace: calc(50vw - (var(--sdm-itemW) / 2) + var(--sdm-edgeExtra));
}

/* 2) Rail float: tambah end-space secara dinamis */
.sdm-rail.sdm-rail-float{
  padding-right: calc(var(--sdm-alignX) + var(--sdm-endSpace));
}

/* 3) Tambahkan spacer sebagai lebar konten flex (ini kunci untuk snap) */
.sdm-rail.sdm-rail-float::after{
  content:"";
  flex: 0 0 var(--sdm-endSpace);
}

/* 4) Snap padding kanan juga harus ikut end-space,
      supaya snap point terakhir tidak berhenti "kepotong" */
.sdm-rail{
  scroll-padding-right: calc(var(--sdm-alignX) + var(--sdm-endSpace));
}

/* =====================================================
   SDM end-buffer responsive (media queries)
   Tujuan: ujung kanan rail tidak kepotong + tetap enak di semua resolusi
   ===================================================== */

.sdm-wrap .sdm-rail{
  --sdm-end-buffer: 520px; /* default (tablet/desktop kecil) */
  padding-right: var(--sdm-end-buffer) !important;
  scroll-padding-right: var(--sdm-end-buffer) !important;
}

.sdm-wrap .sdm-rail::after{
  content: "" !important;
  flex: 0 0 var(--sdm-end-buffer) !important;
}


/* Desktop */
@media (min-width: 1024px) and (max-width: 1279px){
  .sdm-wrap .sdm-rail{ --sdm-end-buffer: 1279px; }
}
@media (min-width: 1280px) and (max-width: 1535px){
  .sdm-wrap .sdm-rail{ --sdm-end-buffer: 1535px; }
}

/* Desktop besar (umumnya mulai muncul issue rounding/zoom) */
@media (min-width: 1536px) and (max-width: 1919px){
  .sdm-wrap .sdm-rail{ --sdm-end-buffer: 1919px; }
}
@media (min-width: 1920px) and (max-width: 2559px){
  .sdm-wrap .sdm-rail{ --sdm-end-buffer: 2559px; }
}

/* Ultra-wide */
@media (min-width: 2560px){
  .sdm-wrap .sdm-rail{ --sdm-end-buffer: 3000px; }
}