/* =========================================
   GRID SYSTEM MODERN (CSS GRID)
   Pengganti float Bootstrap yang lebih sakti
   ========================================= */

/* 1. Container Grid */
.t-grid {
    display: grid !important;
    width: 100% !important;
}

/* 2. Default Columns (Untuk HP / Mobile First) */
.t-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.t-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 3. RESPONSIVE BREAKPOINTS */

/* --- TABLET (sm: min-width 768px) --- */
/* Class ini hanya aktif jika layar > 768px */
@media (min-width: 766px) {
    .t-sm-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .t-sm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t-sm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .t-sm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- LAPTOP / DESKTOP (md: min-width 992px) --- */
/* Class ini hanya aktif jika layar > 992px (Standar Bootstrap 3) */
@media (min-width: 992px) {
    .t-lg-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .t-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .t-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}







/* 
------------------------------------------
                   HOME
------------------------------------------
*/

/* BRAND */
.t-brand-con{ height:60px; gap:30px; }
.t-brand{ padding: 20px 0; }

@media only screen and (max-width: 768px) {
    .t-brand-con{ height:22px; gap:10px; }
    .t-brand{ padding: 10px 0; }
}




/* SERVICES */
.t-services { padding: 30px 15px 0; }
.t-services > div { gap:20px; }

.t-services > div > div { display: flex; gap:12px; align-items:center; padding:12px; border:1px solid #ddd; border-radius:6px; }

.t-services > div > div > div { background-color:#25d366; display:inline-flex; width:42px; height:42px; border-radius:5px; justify-content:center; align-items:center;overflow:hidden; color:white; flex-shrink:0; padding:8px; }

@media only screen and (max-width: 768px) {
    .t-services { padding-top:20px; }
    .t-services > div { gap:10px; }
    .t-services > div div h6 { font-size:12px; }
    .t-services > div div { padding:8px; gap:8px; }
    .t-services > div div div { width:32px; height:32px; padding:6px; }
}





/* CATALOGUE */
.shop-catalogue h6 { letter-spacing:-0.2px; }
.catalogue > div > h3 { letter-spacing:-0.2px; text-transform:capitalize; }
.t-catalogue { gap:15px; }
.t-card { border: 1px solid #dddddd; border-radius: 5px; overflow: hidden; display:flex; flex-direction:column; }
.t-card > div > img { width:100%; height:200px; object-fit:cover; overflow:hidden; }
.t-card  > .caption { padding:10px; height:100%; display:flex; flex-direction:column; }
.t-card > .caption > p { font-weight:500; color:#222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal;}
.t-card > .caption > .t-ready { background:#e9f2e9; padding: 3px 8px; width:fit-content; border-radius:3px; color:#4bb748; font-weight:600; }
.t-card > .caption > .t-empty { background:#fae5e7; padding: 3px 8px; width:fit-content; border-radius:3px; color:#ed2023; font-weight:600; }
.t-card > .caption > h4 { margin:8px 0; letter-spacing:-0.5px; text-transform:none; color:black; flex-grow:1; }


/* FOR SINGLE PRODUCT - PRODUCT */
.t-card > .t-cproduct > .t-height { min-height:120px; margin:0; display:flex; flex-direction:column; gap:0; }
/* .t-card > .t-cproduct { max-height:320px; } */
.t-card > .t-cproduct > .t-height > p { flex-shrink:0; font-weight:500; color:#222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal;}
.t-card > .t-cproduct > .t-height > .t-ready { background:#e9f2e9; padding: 3px 8px; width:fit-content; border-radius:3px; color:#4bb748; font-weight:600; }
.t-card > .t-cproduct > .t-height > .t-empty { background:#fae5e7; padding: 3px 8px; width:fit-content; border-radius:3px; color:#ed2023; font-weight:600; }
.t-card > .t-cproduct > .t-height > h4 { margin:8px 0; letter-spacing:-0.5px; text-transform:none; color:black; flex-grow:1; }

@media only screen and (max-width: 768px) {
    .t-catalogue > div > div > img { height:120px; }
    .t-card > .t-cproduct > .t-height { min-height:100px; margin:0; display:flex; flex-direction:column; gap:0; }
    .t-card > .t-cproduct > .t-height > p { font-size:12px; line-height: 1.5em !important; }
    .t-card > .t-cproduct > .t-height > span { font-size:11px; }
    .t-card > .t-cproduct > .t-height > h4 { font-size:16px; }
    .t-card > .t-cproduct > .t-height > div { height:28px; gap:8px; }
    .t-card > .t-cproduct > .t-height > div > a:first-child { font-size:11px; border-radius:3px; }
    .t-card > .t-cproduct > .t-height > div > a:last-child { border-radius:3px; }
    .t-card > .t-cproduct > .t-height > div > a:last-child svg { width:16px; }
}





.t-card > .caption > div { display:flex; margin-top:10px; gap:10px; align-items:stretch; height:36px; flex-shrink:0; }
.t-card > .caption > div > a:first-child { display:flex; justify-content:center; align-items:center; border-radius:3px; font-weight:500; flex-grow:1; background:#f9961f; color:#ffffff; }
.t-card > .caption > div > a:last-child { display:flex; background:#25d366; aspect-ratio:1/1; height:100%; justify-content:center; align-items:center; border-radius:5px; flex-shrink: 0; color:white; }

@media only screen and (max-width: 768px) {
    .t-catalogue > div > div > img { height:120px; }
    .t-card > .caption > p { font-size:12px; line-height: 1.5em !important; }
    .t-card > .caption > span { font-size:11px; }
    .t-card > .caption > h4 { font-size:16px; }
    .t-card > .caption > div { height:28px; gap:8px; }
    .t-card > .caption > div > a:first-child { font-size:11px; border-radius:3px; }
    .t-card > .caption > div > a:last-child { border-radius:3px; }
    .t-card > .caption > div > a:last-child svg { width:16px; }
}






/* CATEGORY */
.t-category { margin:30px 0 60px 0; }
.t-category h3 { margin-bottom:20px; text-transform:capitalize; letter-spacing:-0.2px; }
.t-category ul { display:flex; gap: 10px; flex-wrap:wrap; }
.t-category ul li { border:1px solid #ccc; padding:4px 8px; border-radius:3px; }
.t-category ul li a { color:#111; }

@media only screen and (max-width: 768px) {
    .t-category { margin:15px 0 40px 0; }
    .t-category h3 { margin-bottom:12px; }
    .t-category ul { gap: 8px; }
    .t-category ul li { padding:3px 6px; font-size:12px; }
}





/* DISCOUNT */
.t-discount { padding: 20px 40px; height:210px; border-radius:10px; overflow:hidden; background:#f3fcf2; display:flex; justify-content:space-between; align-items:center; border: 1px solid #ddd; }
.t-discount > div > h2 { color:#111; text-transform:capitalize; letter-spacing:-0.5px; }
.t-discount > div > p { color:#111; margin-bottom:30px; }
.t-discount > div > a { background-color:#f9961f; padding: 10px 14px; border-radius:3px; color:white; }

.t-discount > div:last-child { width:140px; }
.t-discount > div:last-child > img { height:100%; aspect-ratio:1/1; object-fit:cover; object-position:center center; border-radius:5px; transform: rotate(6deg); }

@media only screen and (max-width: 992px) {
    .t-discount{ gap:20px; }
    .t-discount > div:last-child { width:120px; }
}

@media only screen and (max-width: 768px) {
    .t-discount { padding: 40px 30px; height:fit-content; }
    .t-discount > div > h2 { font-size:20px; }
    .t-discount > div:last-child { display:none; }
}







/* 
------------------------------------------
                FOOTER
------------------------------------------
*/
.t-footer {  border: solid #ddd; border-width: 1px 0; }
.t-footer .container { padding: 6rem 15px; display:flex; justify-content:space-between; gap:20px; }
.t-footer .container:before, .t-footer .container:after { display:none; }


/* FOOTER - ABOUT */
.t-fabout { width:40%; padding-right:30px; }
.t-fabout img { width:180px; }
.t-fabout p { font-weight:600; color:#111; margin: 25px 0 0 0; }
.t-fabout span { padding-bottom:10px; }
.t-fabout .t-fphone { padding-top:20px; display:flex; gap:10px; }
.t-fabout .t-fphone li a { padding: 10px 16px; background-color:#4bb748; color:#fff; border-radius:3px; }

.t-footer .t-fabout .t-fsocial { padding-top:25px; display:flex; gap:5px; }
.t-fabout .t-fsocial li { width:50px; aspect-ratio:1/1; flex-shrink:0; }


/* FOOTER - INFO */
.t-finfo { width:15%; }
.t-finfo h5, .t-fakun h5, .t-fproduk h5, .t-fresmi h5 { margin-bottom:16px; letter-spacing:-0.2px; text-transform:capitalize; font-weight:600; }
.t-finfo ul li, .t-fakun ul li { margin-bottom:8px; }
.t-finfo ul li a, .t-fakun ul li a, .t-fproduk ul li a { color:#333; }


/* FOOTER - AKUN */
.t-fakun { width:10%; }


/* FOOTER - PRODUK */
.t-fproduk { width:20%; }
.t-fproduk ul li { text-transform:capitalize !important; margin-bottom:8px; }

/* FOOTER - RESMI */
.t-fresmi { width:15%; }
.t-fresmi ul li { margin-bottom:8px; }
.t-fresmi ul li a img { border-radius:3px; overflow:hidden; }

.t-copyright { padding:20px 15px; text-align:center; }
.t-copyright > span { color:#111; }




@media only screen and (max-width: 992px) {
    .t-footer .container { flex-wrap:wrap; padding:4rem 16px 0;}
    .t-fabout { width:100%; padding:0 0 30px 0; }
    .t-fabout img { width:140px; }
    .t-finfo, .t-fakun, .t-fproduk, .t-fresmi { width:calc((100% - 20px)/2); margin:0 0 40px 0; }
    .t-finfo h5, .t-fakun h5, .t-fproduk h5, .t-fresmi h5 { font-size:15px; }

    .t-fresmi ul li a img { width:200px; }

    .t-footer a { font-size:12px; }
    .t-finfo ul li, .t-fakun ul li, t-fproduk ul li { margin-bottom:4px; }
    .t-fresmi ul li a img { width:100px; }
}


















/* 
------------------------------------------
                ARSIP
------------------------------------------
*/
.t-arsip { display:flex; gap:60px; }
.t-acategory { width:25%; }
.t-acategory label { display:flex; align-items:center; }
.t-acategory label input[type="radio"] { margin:0; }


.t-aproduk { width:75%; }


@media only screen and (max-width: 992px) {
    .t-acategory h3 { font-size:18px; }
    .t-acategory ul li a, .t-acategory label { font-size:12px; }
    .t-arsip { flex-direction:column-reverse; }
    .t-acategory { width:100%; padding: 0 10px }
    .t-aproduk { width:100%; }
}