@font-face{font-family:'PoppinsLocal';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-normal.woff2') format('woff2');}

@font-face{font-family:'PoppinsLocal';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-normal.woff2') format('woff2');}

@font-face{font-family:'PoppinsLocal';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-normal.woff2') format('woff2');}

@font-face{font-family:'PoppinsLocal';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-normal.woff2') format('woff2');}

@font-face{font-family:'PoppinsLocal';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-normal.woff2') format('woff2');}
/* ---- SEC landing page, styled after the company profile deck ---- */
body{--sec-teal:#34A0B9;--sec-deep:#1C6E80;--sec-ink:#4a5a60;--sec-mist:#E1F0F4;}
body,body h1,body h2,body h3,
body h4,body p,body a,body span,
body div{font-family:'PoppinsLocal','Poppins',-apple-system,'Segoe UI',sans-serif;}
body .container{max-width:1180px;}

/* Deck backgrounds are not a simple diagonal ramp: sampling the pages gives teal
   at top-left AND bottom-right with white through the middle, so two corner
   washes reproduce it far more faithfully than one linear-gradient. */
section.sec{position:relative;overflow:hidden;}
section.sec > .wrap{position:relative;z-index:3;}

/* Corner-anchored radial washes alone leave the middle of a section white: the deck
   pages are 16:9 so their corners nearly meet, whereas these sections are far taller
   than they are wide. A full-width diagonal ramp carries the tint across, with a
   corner accent layered on for depth. */
.sec-wash{background:
  radial-gradient(ellipse 60% 50% at 100% 100%,#B4DBE5 0%,rgba(180,219,229,0) 75%),
  linear-gradient(112deg,#FFFFFF 0%,#F2FAFC 40%,#DCEFF4 72%,#CBE6ED 100%);}
.sec-wash-alt{background:
  radial-gradient(ellipse 60% 50% at 0% 100%,#BCDFE7 0%,rgba(188,223,231,0) 75%),
  linear-gradient(248deg,#FFFFFF 0%,#F2FAFC 40%,#DCEFF4 72%,#CDE7EE 100%);}
.sec-wash-soft{background:
  radial-gradient(ellipse 55% 45% at 100% 100%,#CBE6ED 0%,rgba(203,230,237,0) 75%),
  linear-gradient(112deg,#FFFFFF 0%,#F7FCFD 45%,#E7F5F8 78%,#DCEFF4 100%);}

/* hero: cover wash + the city skyline sitting along the bottom edge */
.sec-hero{background:
  linear-gradient(118deg,#FFFFFF 0%,#F4FBFC 38%,#DFF1F5 70%,#C6E4EC 100%);}
.sec-hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;
  background:url(../img/skyline.png) bottom center/cover no-repeat;opacity:.9;z-index:1;pointer-events:none;
  /* Tepi atas skyline bertemu gradasi secara mendadak dan menyisakan garis
     melintang; mask ini melarutkannya. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 100%);}

/* the deck's oversized line-art, one per section */
.sec-deco:before{content:'';position:absolute;z-index:1;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;}
.deco-gears:before{right:-30px;top:6%;width:min(30vw,360px);height:64%;
  background-image:url(../img/decor-gears.png);background-position:right top;opacity:.62;}
.deco-chevrons:before{right:0;bottom:-20px;width:min(46vw,620px);height:42%;
  background-image:url(../img/decor-chevrons.png);background-position:right bottom;opacity:.5;}
.deco-trolley:before{left:-10px;bottom:0;width:min(22vw,260px);height:70%;
  background-image:url(../img/decor-trolley.png);background-position:left bottom;opacity:.55;}
.deco-hand:before{right:0;bottom:0;width:min(30vw,400px);height:62%;
  background-image:url(../img/decor-hand.png);background-position:right bottom;opacity:.5;}
.deco-arrows:before{right:0;bottom:0;width:min(34vw,460px);height:56%;
  background-image:url(../img/decor-arrows.png);background-position:right bottom;opacity:.42;}
@media only screen and (max-width:767px){
  .sec-deco:before{opacity:.28;}
}
.sec-eyebrow{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--sec-ink);margin:0 0 14px;}

/* Uppercase + heading colour come from Enfold's Theme Options stylesheet, which is
   generated and minified rather than living in the theme files. Note Enfold puts both
   #top and on <body>, so "#top" can never match - the
   wrapper div is the right descendant to hang this off. */
.sec-hero-title,
.sec-h2,
.sec-div h3,
.sec-list h4,
.sec-card h3{text-transform:none;letter-spacing:normal;}
.sec-hero-title,
.sec-h2,
.sec-div h3,
.sec-list h4{color:var(--sec-teal);}
.sec-h2.deep,
.sec-card h3{color:var(--sec-deep);}

.sec-hero-title{font-size:64px;line-height:1.06;font-weight:600;color:var(--sec-teal);margin:0 0 22px;}
.sec-badge{display:inline-block;background:var(--sec-teal);color:#fff;font-size:14px;
  padding:9px 22px;border-radius:40px;letter-spacing:.04em;}
.sec-tagline{font-size:19px;color:var(--sec-deep);font-weight:500;margin:26px 0 0;}
.sec-tagline em{font-style:italic;}
.sec-cta{display:inline-block;margin-top:30px;background:var(--sec-teal);color:#fff;
  padding:14px 34px;border-radius:4px;font-size:15px;font-weight:500;letter-spacing:.03em;
  text-decoration:none;transition:background .2s;}
.sec-cta:hover{background:var(--sec-deep);}

/* generic heading block */
.sec-h2{font-size:42px;line-height:1.15;font-weight:600;color:var(--sec-teal);margin:0 0 18px;}
.sec-h2.deep{color:var(--sec-deep);}
.sec-sub{font-size:16px;line-height:1.9;color:var(--sec-ink);margin:0 0 16px;}
.sec-rule{width:64px;height:4px;background:var(--sec-teal);border-radius:2px;margin:22px 0;}
.sec-center{text-align:center;}
.sec-center .sec-rule{margin:22px auto;}

/* about: two columns like deck page 2 */
.sec-about{display:flex;gap:56px;flex-wrap:wrap;align-items:flex-start;}
.sec-about>div{flex:1 1 380px;min-width:300px;}
.sec-tagline-label{font-size:14px;color:var(--sec-ink);margin:30px 0 4px;}
.sec-list{list-style:none;margin:0;padding:0;}
.sec-list li{display:flex;gap:20px;padding:14px 0;align-items:flex-start;}
.sec-list .n{flex:0 0 46px;height:46px;border-radius:50%;background:#fff;border:1px solid #dbeef3;
  color:#9fb9c2;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.sec-list h4{font-size:21px;color:var(--sec-teal);margin:6px 0 6px;font-weight:600;}
.sec-list p{font-size:14px;line-height:1.75;color:var(--sec-ink);margin:0;}

/* divisions: the deck's oversized numerals */
.sec-div{display:flex;gap:34px;align-items:flex-start;padding:38px 0;border-top:1px solid #e3f0f4;}
.sec-div:first-child{border-top:0;}
.sec-div .big{flex:0 0 150px;font-size:132px;line-height:.82;font-weight:700;
  color:var(--sec-teal);opacity:.32;text-align:center;}
.sec-div .body{flex:1 1 auto;}
.sec-div h3{font-size:34px;line-height:1.12;font-weight:600;color:var(--sec-teal);margin:0 0 12px;}
.sec-div p{font-size:15px;line-height:1.85;color:var(--sec-ink);margin:0 0 10px;max-width:760px;}

/* products: 3x3 cards echoing the deck's icon grid */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.sec-card{background:#fff;border:1px solid #e4f0f4;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 22px rgba(28,110,128,.07);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.sec-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,110,128,.13);}
.sec-card .shot{background:#fff;padding:0;line-height:0;border-bottom:1px solid #eef6f8;}
.sec-card .shot img{width:100%;height:auto;display:block;}
.sec-card .pad{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;}
.sec-card .ico{width:64px;height:64px;border-radius:14px;background:#fff;border:1px solid #edf6f8;
  box-shadow:0 3px 10px rgba(28,110,128,.08);margin:-52px 0 6px;position:relative;z-index:2;}
.sec-card h3{font-size:21px;font-weight:600;color:var(--sec-deep);margin:0;}
.sec-card p{font-size:14px;line-height:1.75;color:var(--sec-ink);margin:0;}
.sec-card.iconly .shot{padding:34px 0 10px;text-align:center;border-bottom:0;}
.sec-card.iconly .shot img{width:132px;margin:0 auto;}

/* merchants */
.sec-merch{background:#fff;border:1px solid #e4f0f4;border-radius:14px;padding:26px 30px;
  box-shadow:0 6px 22px rgba(28,110,128,.07);}
.sec-merch img{width:100%;height:auto;display:block;}

/* closing tagline strip */
.sec-strip{text-align:center;font-size:20px;color:var(--sec-deep);font-weight:500;letter-spacing:.01em;}

@media only screen and (max-width:989px){
  .sec-grid{grid-template-columns:repeat(2,1fr);}
  .sec-hero-title{font-size:46px;}
  .sec-div .big{flex:0 0 96px;font-size:86px;}
  .sec-h2{font-size:34px;}
}
@media only screen and (max-width:767px){
  .sec-grid{grid-template-columns:1fr;}
  .sec-hero-title{font-size:36px;}
  .sec-about{gap:30px;}
  .sec-div{flex-direction:column;gap:10px;}
  .sec-div .big{text-align:left;font-size:72px;}
  .sec-div h3{font-size:26px;}
}

/* ============================================================================
   Layout dasar.
   Di versi WordPress, kerangka halaman (reset, container, tipografi dasar)
   datang dari tema Enfold. Aplikasi ini berdiri sendiri, jadi bagian itu
   didefinisikan di sini.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  color:var(--sec-ink);
  font-family:'PoppinsLocal','Poppins',-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
  background:#fff;
}
img{max-width:100%;height:auto;}
a{color:var(--sec-teal);}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
section.sec{padding:86px 0;}
section.sec.sec-hero{padding:96px 0 120px;}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;}

/* ------------------------------------------------------------ form kontak */
.sec-form{max-width:760px;}
.sec-form form{margin-top:26px;}
.sec-form .row{display:flex;gap:20px;flex-wrap:wrap;}
.sec-form .row > label{flex:1 1 240px;}
.sec-form label{display:block;margin-bottom:18px;font-size:14px;color:var(--sec-deep);font-weight:500;}
.sec-form input,.sec-form textarea{
  display:block;width:100%;margin-top:7px;padding:12px 14px;
  font:inherit;font-size:15px;color:var(--sec-ink);
  background:#fff;border:1px solid #d6e9ef;border-radius:6px;
  transition:border-color .15s,box-shadow .15s;
}
.sec-form input:focus,.sec-form textarea:focus{
  outline:none;border-color:var(--sec-teal);
  box-shadow:0 0 0 3px rgba(52,160,185,.16);
}
.sec-form textarea{resize:vertical;min-height:140px;}
.sec-form button{border:0;cursor:pointer;font:inherit;margin-top:4px;}

.sec-alert{
  margin:22px 0 0;padding:13px 17px;border-radius:6px;
  font-size:15px;border:1px solid transparent;
}
.sec-alert.success{background:#e8f7f0;border-color:#b9e5d1;color:#1b6b4a;}
.sec-alert.danger {background:#fdecec;border-color:#f4c4c4;color:#8f2c2c;}

/* ----------------------------------------------------------------- footer */
.sec-footer{background:var(--sec-deep);color:#dcecf1;padding:38px 0;text-align:center;}
.sec-footer p{margin:0;font-size:15px;}
.sec-footer .kecil{margin-top:8px;font-size:13px;opacity:.72;}

@media only screen and (max-width:767px){
  section.sec{padding:56px 0;}
  section.sec.sec-hero{padding:64px 0 84px;}
  .wrap{padding:0 18px;}
  .sec-form .row{gap:0;}
}

/* ============================================================================
   Header.
   Transparan di atas hero lalu memadat saat digulir, mengikuti kesan bersih
   halaman sampul deck. Bagian ini tidak ada di versi WordPress karena
   headernya disediakan tema Enfold.
   ========================================================================= */

.sec-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px 0;
  transition:background .25s,box-shadow .25s,padding .25s;
}
.sec-nav > .wrap{display:flex;align-items:center;gap:28px;}

.sec-nav .brand{display:flex;align-items:center;line-height:0;flex:0 0 auto;}
.sec-nav .brand img{height:44px;width:auto;transition:height .25s;}

.sec-nav .menu{margin-left:auto;display:flex;align-items:center;gap:30px;}
.sec-nav .menu a{
  color:var(--sec-deep);text-decoration:none;font-size:15px;font-weight:500;
  letter-spacing:.01em;position:relative;padding:4px 0;transition:color .18s;
}
.sec-nav .menu a:not(.tombol):after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--sec-teal);transition:right .22s;
}
.sec-nav .menu a:not(.tombol):hover:after{right:0;}
.sec-nav .menu a:hover{color:var(--sec-teal);}

.sec-nav .menu a.tombol{
  background:var(--sec-teal);color:#fff;padding:10px 22px;border-radius:4px;
  font-weight:500;transition:background .18s;
}
.sec-nav .menu a.tombol:hover{background:var(--sec-deep);color:#fff;}
.sec-nav .menu a.tombol:after{display:none;}

/* keadaan setelah digulir */
.sec-nav.padat{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 2px 18px rgba(28,110,128,.1);
  padding:10px 0;
}
.sec-nav.padat .brand img{height:38px;}

/* tombol hamburger */
.sec-nav .burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:8px;width:42px;height:42px;
}
.sec-nav .burger span{
  display:block;height:2px;width:24px;margin:5px auto;border-radius:2px;
  background:var(--sec-deep);transition:transform .22s,opacity .22s;
}
.sec-nav.buka .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sec-nav.buka .burger span:nth-child(2){opacity:0;}
.sec-nav.buka .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Header fixed menempel di atas hero, jadi hero perlu ruang ekstra supaya
   judulnya tidak tertutup. */
section.sec.sec-hero{padding-top:150px;}

@media only screen and (max-width:900px){
  .sec-nav .burger{display:block;}
  .sec-nav .menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;box-shadow:0 12px 24px rgba(28,110,128,.12);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .sec-nav.buka .menu{max-height:340px;}
  .sec-nav .menu a{padding:14px 24px;border-top:1px solid #eef6f8;}
  .sec-nav .menu a:not(.tombol):after{display:none;}
  .sec-nav .menu a.tombol{border-radius:0;text-align:center;}
  .sec-nav:not(.padat){background:rgba(255,255,255,.94);}
  section.sec.sec-hero{padding-top:120px;}
}