*
 { margin : 0px;
   padding : 0px;
   font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 }

.modal
 { display : none;
   position : fixed;
   z-index : 20001;
   left : 0;
   top : 0;
   width : 100%;
   height : 100%;
   overflow : auto;
   background-color : rgba(0, 0, 0, 0.85);
 }
.modal-content
 { background-color : #fefefe;
   margin-top : 40px;
   margin-left : auto;
   margin-right : auto;
   margin-bottom : 40px;
   border : 0px;
   width : calc(100% - 40px);
   max-width : 1100px;
   box-shadow : 0 15px 12px #434ffb33;
   background : transparent;

   transform : translateY(20px); /* posisi awal (di bawah) */
   opacity : 0;
   pointer-events : none;
   transition : transform 0.3s ease, opacity 0.3s ease;
 }
.modal-content.show
 { transform : translateY(0); /* naik ke atas */
   opacity : 1;
   pointer-events : auto;
 }
.modal-header
 { display : grid;
   grid-template-columns : 1fr auto;
   gap : 5px;
   font-size : 18px;
   padding : 20px;
   color : white;
   background : #1b2477;
   border-top-left-radius : 5px;
   border-top-right-radius : 5px;
 }
.modal-header.danger
 { background : #b30000;
 }
.modal-header.success
 { background : #1b7736;
 }
.modal-header.brown
 { background : #773e1b;
 }
.modal-header.dark-silver
 { background : #555;
 }
.modal-header.toska
 { background : #006f63;
 }
.modal-header .modal-title
 { font-weight : 500;
 }
.modal-body
 { 
 }
.modal-footer
 { padding : 20px;
   border-top : 1px solid silver;
   text-align : right;
 }
.modal-footer button
 { padding : 10px;
 }
.close
 { color : white;
   font-weight : bold;
   user-select : none;
 }
.close:hover, .close:focus
 { font-weight : 700;
   text-decoration : none;
   cursor : pointer;
 }
.btn-tutup
 { background : transparent;
   color : white;
   border : 1px solid white;
   padding : 10px;
   display : inline-block;
   border-radius : 5px;
   margin-bottom : 10px;
   float : right;
   clear : both;
   user-select : none;
   cursor : pointer;
 }

a.whatsapp
 { display : inline-block;
   position : fixed;
   bottom : 30px;
   right : 30px;
   z-index : 100;
 }

a.whatsapp img
 { width : 80px;
 }

.text-titik-titik
 { width : 100%;
   overflow : hidden;
   text-overflow : ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* Jumlah baris maksimal */
   -webkit-box-orient: vertical;
 }

body
 { background : #ecf0f5;
 }

.header
 { background : #1c2229;
   color : white;
   padding : 10px 0px 0px 0px;
   width : 100%;
 }

.header .grid
 { padding : 0px 30px;
   display : grid;
   grid-template-columns : auto auto 1fr;
   column-gap : 20px;
   row-gap : 10px;
   align-items : center;
 }

.header .grid.scroll
 { grid-template-columns : 1fr;
 }

.header .grid.scroll div:nth-child(1), .header .grid.scroll div:nth-child(2)
 { display : none;
 }

.header .grid .logo
 { width : 100%;
   max-height : 100px;
 }

.header .grid h1
 { font-size : 20px;
 }

.header .grid h2
 { font-size : 20px;
   font-weight : 100;
 }

.header .grid .pencarian
 { display : grid;
   grid-template-columns : auto 1fr auto;
 }

.header .grid .pencarian select
 { padding : 10px;
   background : white;
   border : 0px;
   border-right : 1px solid silver;
   border-top-left-radius : 5px;
   border-bottom-left-radius : 5px;
   height : 40px;
 }

.header .grid .pencarian input[type="text"]
 { border : 0px;
   background : white;
   outline : none;
   padding-left : 10px;
   padding-right : 10px;
   height : 40px;
   width : 100%;
 }

.header .grid .pencarian button
 { border : 0px;
   background : #6e6f71;
   color : white;
   padding-left : 10px;
   padding-right : 10px;
   border-top-right-radius : 5px;
   border-bottom-right-radius : 5px;
   height : 40px;
   font-weight : bold;
 }

.header .grid .pencarian button:active
 { background : #505152;
 }

.header hr
 { margin : 10px 0px 0px 0px;
   border : 0px;
   border-top : 1px solid #000;
   border-bottom : 1px solid #4c4c4c;
 }

.header nav
 { padding : 0px 30px;
 }

.banner
 { padding : 30px;
 }

.banner .grid
 { display : grid;
   grid-template-columns : 2.5fr 1fr;
   gap : 30px;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
 }

.banner .grid article h1
 { font-size : 16px;
   font-weight : 500;
   background : #1c2229;
   color : white;
   text-align : center;
   padding : 10px;
   border-bottom : 3px solid #6e6f71;
 }

.banner .grid .tentang-kami
 { border-left : 1px solid silver;
   border-right : 1px solid silver;
   border-bottom : 1px solid silver;
   padding : 0px;
   background : #fff;
   color : #555454;
   text-align : justify;
   font-size : clamp(13px, 0.94vw, 19px);
 }

.banner .grid .tentang-kami section
 { padding : 10px;
 }

.banner .grid .tentang-kami section ol
 { margin-left : 40px;
 }

.banner .grid .tentang-kami section p
 { text-indent : 20px;
 }

.sambungan
 { padding : 0px 30px;
   color : #555454;
   display : none;
   margin-bottom : 20px;
 }

.sambungan section
 { border : 1px solid silver;
   padding : 20px;
   background : white;
 }

.sambungan section p
 { text-indent : 30px;
   display : none;
 }

.visi-misi
 { padding : 0px 30px;
 }

.visi-misi .grid
 { display : grid;
   grid-template-columns : 1fr 1fr;
   gap : 30px;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
 }

.visi-misi .grid .visi, .visi-misi .grid .misi
 { background : white;
   border-left : 1px solid silver;
   border-right : 1px solid silver;
   border-bottom : 1px solid silver;
 }

.visi-misi .grid section
 { padding : 20px;
   text-align : justify;
 }

.visi-misi .grid ol
 { padding-left : 20px;
 }

.visi-misi .grid h1
 { font-size : 16px;
   font-weight : 500;
   background : #1c2229;
   color : white;
   text-align : center;
   padding : 10px;
   border-bottom : 3px solid #6e6f71;
 }

.produk
 { margin-top : 20px;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
   padding : 0px 30px;
 }

.tab-container
 { width : 100%;
 }

.tab-buttons
 { display : flex;
   flex-wrap : wrap;
   border : 1px solid #ddd;
   background : white;
 }

.tab-button
 { padding : 10px 20px;
   cursor : pointer;
   border : none;
   background : none;
   font-size : 14px;
   outline : none;
   transition : 0.3s;
 }

.tab-button.active
 { border-bottom : 2px solid #1c2229;
   font-weight : bold;
   color : #1c2229;
 }
 
.tab-content
 { display : none;
   padding : 15px 0;
   background : white;
   padding : 20px;
   border-left : 1px solid #ddd;
   border-right : 1px solid #ddd;
   border-bottom : 1px solid #ddd;
 }
 
.tab-content.active
 { display : block;
 }

.item-produk, .item-artikel
 { position : relative;
   padding : 10px;
   transition : border 1s ease;
   user-select : none;
   cursor : pointer;
 }

.item-artikel a
 { color : #000;
 }

.item-produk:hover, .item-artikel:hover
 { border : 1px solid silver;
 }

.item-produk a, .item-artikel a
 { text-decoration : none;
 }

.item-produk:hover h2, .item-artikel:hover h2
 { text-decoration : underline;
 }

.item-produk h1, .item-artikel h1
 { font-weight : 300;
   font-size : 14px;
   color : black;
   user-select : none;
   padding : 8px 0px;
   border-top : 1px solid silver;
 }

.item-produk h2
 { font-weight : 400;
   font-size : 14px;
   color : #414141;
   padding : 8px 0px;
   max-height : 29px;
 }

.item-artikel h2
 { font-weight : 400;
   font-size : 16px;
   color : #414141;
   padding : 8px 0px;
   max-height : 29px;
   border-top : 1px solid silver;
 }

.item-artikel div
 { font-size : 14px;
 }

.item-produk h3, .item-artikel h3
 { font-weight : 500;
   font-size : 16px;
   color : black;
 }

.item-produk small, .item-artikel small
 { color : silver;
   font-size : 14px;
   text-decoration : line-through;
 }

.item-produk hr, .item-artikel hr
 { margin : 0px 0px;
   padding : 0px 0px;
   border : 0px;
   border-bottom : 1px solid silver;
 }

.item-produk .gambar, .item-artikel .gambar
 { position : relative;
 }

.item-produk .gambar .action, .item-artikel .gambar .action
 { position : absolute;
   bottom : -1px;
   left : 50%;
   transform : translateX(-50%);
   background : white;
   color : #000;
   border-left : 1px solid silver;
   border-right : 1px solid silver;
   border-top : 1px solid silver;
   border-top-left-radius : 3px;
   border-top-right-radius : 3px;
   font-size : 14px;
   overflow : hidden;
   height : 0px;
   transition : height 0.3s ease;
 }

.item-produk .gambar .action a, .item-artikel .gambar .action a
 { padding : 5px;
   text-decoration : none;
   display : inline-block;
   color : #414141;
 }

.item-produk:hover .gambar .action, .item-artikel:hover .gambar .action
 { height : 25px;
 }

.daftar-produk, .daftar-artikel
 { margin-top : 20px;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
   padding : 0px 30px;
 }

.daftar-produk>h1, .daftar-artikel>h1
 { font-size : 16px;
   font-weight : 500;
   background : #1c2229;
   color : white;
   padding : 10px 20px;
   border-bottom : 3px solid #6e6f71;
 }

.daftar-produk .item-produk, .daftar-artikel .item-artikel
 { border-color : silver;
 }

.daftar-produk section, .daftar-artikel section
 { background : white;
   padding : 20px;
   border-left : 1px solid silver;
   border-right : 1px solid silver;
   border-bottom : 1px solid silver;
 }

.daftar-produk section .grid
 { display : grid;
   grid-template-columns : repeat(7, 1fr);
   gap : 20px;
 }

.daftar-artikel section .grid
 { display : grid;
   grid-template-columns : repeat(4, 1fr);
   gap : 20px;
 }

.daftar-produk section .halaman, .daftar-artikel section .halaman
 { display : flex;
   flex-wrap : wrap;
   gap : 10px;
   justify-content : center;
   color : #414141;
 }

.daftar-produk section .halaman a, .daftar-artikel section .halaman a
 { padding : 5px 10px;
   border-radius : 5px;
   cursor : pointer;
   user-select : none;
   text-decoration : none;
 }

.daftar-produk section .halaman a.active, .daftar-produk section .halaman a.active:hover, .daftar-artikel section .halaman a.active, .daftar-artikel section .halaman a.active:hover
 { background : #414141;
   color : white;
 }

.daftar-produk section .halaman a:hover, .daftar-artikel section .halaman a:hover
 { background : #eaf5ff;
 }

.partner-bisnis
 { margin-top : 20px;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
   padding : 0px 30px;
   cursor : pointer;
   user-select : none;
 }

.partner-bisnis>h1
 { text-align : center;
   color : #414141;
   padding : 20px 0px;
 }

.partner-bisnis .grid
 { display : grid;
   grid-template-columns : repeat(4, 1fr);
   gap : 30px;
   margin-top : 20px;
 }

.partner-bisnis .grid .item-partner
 { overflow : hidden;
   border-radius : 20px;
   box-shadow : 0 10px 30px rgba(0,0,0,0.15);
   background : white;
 }

.partner-bisnis .grid .item-partner:hover h2
 { text-decoration : underline;
 }

.partner-bisnis .grid .item-partner a
 { text-decoration : none;
 }

.partner-bisnis .grid .item-partner img
 { width : 100%;
 }

.partner-bisnis .grid .item-partner h2
 { padding : 10px 20px 0px 20px;
   color : #4f4f4f;
 }

.partner-bisnis .grid .item-partner section
 { color : #414141;
   padding : 20px;
   padding : 10px 20px 30px 20px;
 }

.sertifikat
 { margin-top : 20px;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
   padding : 0px 30px;
   cursor : pointer;
   user-select : none;
 }

.sertifikat>h1
 { text-align : center;
   color : #414141;
   padding : 20px 0px;
 }

.sertifikat .grid
 { display : grid;
   grid-template-columns : repeat(5, 1fr);
   gap : 0px;
 }

.sertifikat .grid img
 { width : 100%;
 }

.sertifikat .grid div:nth-child(1), .sertifikat .grid div:nth-child(2)
 { grid-row : span 2;
 }

footer .grid
 { display : grid;
   grid-template-columns : repeat(3, 1fr);
   background : #232425;
   max-width : 1660px;
   margin-left : auto;
   margin-right : auto;
   margin-top : 30px;
   padding : 30px;
   color : white;
   gap : 30px;
   font-weight : 200;
 }

footer .grid>div>h1
 { font-size : 18px;
   padding-bottom : 10px;
   border-bottom : 1px solid white;
 }

footer .grid>div>ol
 { margin-left : 20px;
   margin-top : 10px;
 }

footer .grid .address
 { display : grid;
   grid-template-columns : 100px 1fr;
   gap : 20px;
   line-height : 1.5em;
 }

footer .grid .address h1
 { font-size : 18px;
 }

footer .grid .address h2
 { font-size : 16px;
 }

footer .copyright
 { background : #000;
   color : white;
   text-align : center;
   padding : 20px;
 }

footer .copyright a
 { color : white;
   text-decoration : none;
 }

footer .copyright a:hover
 { text-decoration : underline;
 }

@media only screen and (max-width : 1400px)
 { .daftar-artikel section .grid
    { grid-template-columns : repeat(3, 1fr);
    }
 }

@media only screen and (max-width : 1100px)
 { .daftar-artikel section .grid
    { grid-template-columns : repeat(2, 1fr);
    }
 }

@media only screen and (max-width : 800px)
 { .daftar-artikel section .grid
    { grid-template-columns : 1fr;
    }
 }

@media only screen and (max-width : 1500px)
 { .partner-bisnis .grid
    { grid-template-columns : repeat(4, 1fr);
    }
   .sertifikat .grid
    { grid-template-columns : repeat(5, 1fr);
    }
 }

@media only screen and (max-width : 1300px)
 { .sertifikat .grid
    { grid-template-columns : repeat(4, 1fr);
    }
 }

@media only screen and (max-width : 1100px)
 { .sertifikat .grid
    { grid-template-columns : repeat(3, 1fr);
    }
 }

@media only screen and (max-width : 1140px)
 { footer .grid
    { grid-template-columns : repeat(2, 1fr);
    }
 }

@media only screen and (max-width : 1000px)
 { .partner-bisnis .grid
    { grid-template-columns : repeat(3, 1fr);
    }
 }

@media only screen and (max-width : 900px)
 { .sertifikat .grid
    { grid-template-columns : repeat(2, 1fr);
    }
   .sertifikat .grid div:last-child
    { grid-column : span 2;
    }
 }

@media only screen and (max-width : 770px)
 { footer .grid
    { grid-template-columns : repeat(1, 1fr);
    }
 }

@media only screen and (max-width : 800px)
 { .partner-bisnis .grid
    { grid-template-columns : repeat(2, 1fr);
    }
 }

@media only screen and (max-width : 700px)
 { .sertifikat .grid
    { grid-template-columns : repeat(1, 1fr);
    }
   .sertifikat .grid div:last-child
    { grid-column : span 1;
    }
 }

@media only screen and (max-width : 600px)
 { .partner-bisnis .grid
    { grid-template-columns : repeat(1, 1fr);
    }
 }

@media only screen and (max-width : 560px)
 { footer .grid .address
    { grid-template-columns : repeat(1, 1fr);
    }
   footer .grid .address div:nth-child(1)
    { display : none;
    }
 }

@media only screen and (min-width: 768px) and (max-width : 1621px)
 { .banner .grid .tentang-kami
    { font-size : clamp(13px, 1.055vw, 19px);
    }
   .tentang-kami section p:nth-child(3)
    { display : none;
    }
   .sambungan
    { display : block;
      font-size : clamp(13px, 1.055vw, 19px);
    }
   .sambungan section p:nth-child(3)
    { display : block;
    }
 }

@media only screen and (min-width: 768px) and (max-width : 1472px)
 { .banner .grid .tentang-kami
    { font-size : clamp(13px, 1.3vw, 19px);
    }
   .tentang-kami section p:nth-child(2)
    { display : none;
    }
   .sambungan
    { display : block;
      font-size : clamp(13px, 1.3vw, 19px);
    }
   .sambungan section p:nth-child(2)
    { display : block;
    }
 }

@media only screen and (max-width : 1296px)
 { .banner .grid .tentang-kami
    { font-size : clamp(13px, 1.25vw, 19px);
    }
 }

@media only screen and (max-width : 1161px)
 { .banner .grid .tentang-kami
    { font-size : clamp(13px, 1.22vw, 19px);
    }
 }

@media only screen and (max-width : 1075px)
 { .banner .grid
    { grid-template-columns : 1fr;
    }
   .banner .grid .tentang-kami
    { font-size : 15px;
    }
   .tentang-kami section p:nth-child(2), .tentang-kami section p:nth-child(3)
    { display : block;
    }
   .sambungan
    { display : none;
    }
 }

@media only screen and (max-width : 900px)
 { .header .grid
    { grid-template-columns : 50px auto 1fr;
    }
   .header .grid h1
    { font-size : 20px;
    }
   .header .grid h2
    { font-size : 18px;
    }
 }

@media only screen and (max-width : 800px)
 { .visi-misi .grid
    { grid-template-columns : 1fr;
    }
   .header .grid
    { grid-template-columns : 50px 1fr;
    }
   .header .grid div:nth-child(3)
    { grid-column : span 2;
    }
 }

@media only screen and (max-width : 767px)
 { .header .grid .pencarian
    { grid-template-columns : auto 1fr auto auto;
    }
   .tentang-kami section p:nth-child(2), .tentang-kami section p:nth-child(3)
    { display : block;
    }
 }

@media only screen and (max-width : 744px)
 { .header .grid div:nth-child(1)
    { grid-row : span 2;
    }

   .header .grid
    { padding : 0px 15px;
    }

   .banner
    { padding : 20px 15px 15px 15px;
    }

   .banner .grid
    { gap : 15px;
    }

   .sambungan
    { padding : 0px 15px;
    }

   .visi-misi .grid ol
    { padding-left : 10px;
    }
 }

@media only screen and (max-width : 1200px)
 { .daftar-produk section .grid
    { grid-template-columns : repeat(6, 1fr);
    }
 }

@media only screen and (max-width : 1000px)
 { .daftar-produk section .grid
    { grid-template-columns : repeat(5, 1fr);
    }
 }

@media only screen and (max-width : 800px)
 { .daftar-produk section .grid
    { grid-template-columns : repeat(4, 1fr);
    }
 }

@media only screen and (max-width : 600px)
 { .daftar-produk section .grid
    { grid-template-columns : repeat(3, 1fr);
    }
 }

@media only screen and (max-width : 400px)
 { .daftar-produk section .grid
    { grid-template-columns : repeat(2, 1fr);
    }
 }

@media only screen and (max-width : 300px)
 { .daftar-produk section .grid
    { grid-template-columns : 1fr;
    }
 }