/*
Theme Name: Typeroom
Description: Dark font-store theme for WooCommerce with 4-column product cards.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
Author: Serbaneka Studio
License: GPLv2 or later
Text Domain: typeroom
*/
:root{--bg:#0f1116;--card:#181a20;--line:#2a2d36;--text:#f1f2f4;--muted:#9a9fac;--blue:#1547d4;--blue-h:#2158ee}
*{box-sizing:border-box;margin:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid #6b9bff;outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.page{padding:48px 24px 88px}
/* header */
.site-header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:600;font-size:20px;letter-spacing:-.02em}
.custom-logo{max-height:40px;width:auto}
.menu{display:flex;gap:28px;list-style:none;padding:0;font-size:15px;color:var(--muted)}
.menu a:hover{color:var(--text)}
.cart-link{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:8px 14px;font-size:15px}
.cart-link b{background:var(--blue);color:#fff;font-size:12px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:10px}
@media(max-width:800px){.menu{display:none}}
/* hero + titles */
.hero{padding:88px 0 8px;max-width:760px}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.hero p{margin-top:18px;color:var(--muted);font-size:18px;max-width:560px}
.section-title,.woocommerce-products-header__title,.page-title{font-weight:400;font-size:32px;text-align:center;padding-bottom:14px;position:relative;margin:64px 0 40px}
.section-title::after,.page-title::after{content:"";position:absolute;left:50%;bottom:0;width:240px;height:1px;background:var(--line);transform:translateX(-50%)}
.cats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 40px}
.cats a{font-size:14px;padding:8px 16px;border:1px solid var(--line);color:var(--muted)}
.cats a.on,.cats a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* product grid */
ul.products{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1000px){ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){ul.products{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column}
.card .art{display:block;aspect-ratio:1.55;overflow:hidden;background:#000}
.card .art img{width:100%;height:100%;object-fit:cover}
.card h3{font-weight:400;font-size:17px;margin:18px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{align-self:flex-start;background:var(--blue);color:#fff;font-size:13px;padding:5px 10px;margin-bottom:22px;line-height:1.5}
.buy{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);padding:16px 20px;font-size:15px;transition:background .15s,border-color .15s}
.buy:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.buy.added{background:#0e7a3f;border-color:#0e7a3f;color:#fff}
.buy.loading{opacity:.6}
.added_to_cart{display:none}
.more{text-align:center;margin:56px 0 88px}
.btn,.button,button[type=submit],input[type=submit]{display:inline-block;background:var(--blue);color:#fff;border:0;padding:16px 26px;font:inherit;font-size:15px;cursor:pointer}
.btn:hover,.button:hover,button[type=submit]:hover,input[type=submit]:hover{background:var(--blue-h)}
.woocommerce-pagination ul{display:flex;gap:8px;justify-content:center;list-style:none;padding:40px 0 0}
.woocommerce-pagination a,.woocommerce-pagination span{display:block;padding:8px 14px;border:1px solid var(--line)}
.woocommerce-pagination .current{background:var(--blue);border-color:var(--blue)}
/* single product */
.single-product div.product{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:800px){.single-product div.product{grid-template-columns:1fr}}
.single-product .related,.single-product .upsells,.woocommerce-tabs{grid-column:1/-1}
.product_title{font-weight:500;font-size:34px;letter-spacing:-.02em;margin-bottom:12px}
.summary .price{font-size:26px;margin:12px 0 20px;display:block}
.summary .price del{color:var(--muted);font-size:18px}
.summary .price ins{text-decoration:none}
.woocommerce-product-details__short-description{color:var(--muted);margin-bottom:24px}
.product_meta{margin-top:24px;color:var(--muted);font-size:14px;display:grid;gap:4px}
.woocommerce-tabs ul.tabs{display:flex;gap:8px;list-style:none;padding:0;border-bottom:1px solid var(--line);margin-bottom:24px}
.woocommerce-tabs ul.tabs a{display:block;padding:10px 16px;color:var(--muted)}
.woocommerce-tabs ul.tabs .active a{color:var(--text);border-bottom:2px solid var(--blue)}
.related>h2,.upsells>h2{font-weight:400;font-size:26px;margin:32px 0 24px}
/* forms, tables, notices */
input,select,textarea{background:var(--card);color:var(--text);border:1px solid var(--line);padding:12px 14px;font:inherit;max-width:100%}
.quantity input{width:80px}
form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
label{display:block;margin-bottom:6px;font-size:14px;color:var(--muted)}
table{border-collapse:collapse;width:100%;margin:16px 0}
th,td{border-bottom:1px solid var(--line);padding:14px 10px;text-align:left}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;background:var(--card);border-left:3px solid var(--blue);padding:14px 18px;margin-bottom:24px}
.woocommerce-error{border-color:#d33}
.entry h1{font-size:34px;font-weight:500;margin-bottom:20px}
.entry p{margin-bottom:16px}
.wc-block-components-totals-wrapper,.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{color:var(--text)}
.wc-block-components-text-input input,.wc-block-components-select select{background:var(--card);color:var(--text)}
/* footer */
.site-footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:28px 0}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.site-footer .credit{color:var(--muted);opacity:.8}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding:48px 0}
@media(max-width:700px){.perks{grid-template-columns:1fr}}
.perks h4{font-weight:500;margin-bottom:6px}.perks p{color:var(--muted);font-size:15px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== v1.1: background, header icons, single font page ===== */
body{background:#0b0c10}
.menu li{position:relative}
.menu .sub-menu{display:none;position:absolute;top:100%;left:-12px;background:var(--card);border:1px solid var(--line);list-style:none;padding:8px 0;min-width:170px;z-index:20}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.menu .sub-menu a{display:block;padding:8px 16px}
.hicons{display:flex;gap:16px;align-items:center}
.hicons a{position:relative;display:grid;place-items:center;color:var(--text)}
.hicons .cart-count{position:absolute;top:-8px;right:-10px;background:var(--blue);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center}
.sp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 32px;align-items:start}
.sp-gal{grid-column:1;grid-row:1}.sp-side{grid-column:2;grid-row:1/span 2;position:sticky;top:24px}.sp-rest{grid-column:1;grid-row:2}
@media(max-width:1000px){.sp{grid-template-columns:1fr}.sp-side,.sp-gal,.sp-rest{grid-column:1;grid-row:auto;position:static}.sp-side{margin:32px 0}}
.sp-main-img{background:#000;aspect-ratio:1.5;overflow:hidden}.sp-main-img img{width:100%;height:100%;object-fit:cover}
.sp-thumbs{position:relative;margin-top:8px;padding:0 36px}
.sp-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sp-strip::-webkit-scrollbar{display:none}
.sp-strip button{flex:0 0 calc(25% - 6px);aspect-ratio:1.55;padding:0;border:2px solid transparent;background:#000;opacity:.6;cursor:pointer;scroll-snap-align:start}
.sp-strip button.on,.sp-strip button:hover{opacity:1;border-color:var(--blue)}
.sp-strip img{width:100%;height:100%;object-fit:cover}
.sp-next,.sp-prev{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,17,22,.85);color:#fff;border:1px solid var(--line);width:32px;height:48px;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.sp-next:hover,.sp-prev:hover{background:var(--blue);border-color:var(--blue)}
.sp-next[hidden],.sp-prev[hidden]{display:none}
.sp-next{right:0}.sp-prev{left:0}
.sp-specs{display:flex;gap:16px;margin:36px 0;flex-wrap:wrap}
.sp-specs div{border:1px solid var(--line);padding:14px 18px;min-width:130px}.sp-specs small{display:block;color:var(--muted);font-size:13px}
.sp-h{font-weight:400;font-size:26px;margin:32px 0 20px}.sp-h.alt{margin-top:72px}
.tt{border:0}
.tt-tabs{display:flex;border:1px solid var(--line);padding:6px;gap:0}
.tt-tabs button{flex:1;background:none;border:0;color:var(--muted);padding:10px;font:inherit;font-size:13px;cursor:pointer}
.tt-tabs button.on{background:var(--blue);color:#fff}
.tt-ctl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:600px){.tt-ctl{grid-template-columns:1fr}}
.tt-ctl select{width:100%;height:64px}
.range{border:1px solid var(--line);padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:6px;font-size:14px}
.range input{grid-column:1/-1;padding:0;border:0;accent-color:#1d7fd6}
.tt textarea{width:100%;background:transparent;resize:vertical;min-height:64px}
.tt-msg{color:var(--muted);font-size:13px;margin:8px 0}
.tt-view{padding:20px 0;overflow-wrap:anywhere;line-height:1.15}.tt-view p{margin-bottom:.5em}
.tt-view[hidden]{display:none}
.glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.glyphs span{border:1px solid var(--line);aspect-ratio:1;display:grid;place-items:center;font-size:32px}
.tt-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.tt-foot button{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 14px;font-size:12px;cursor:pointer}
.sp-brand{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-top:56px}
.sp-detail{color:#dfe1e6;font-size:14.5px;max-width:78ch}.sp-detail ul{padding-left:22px;margin-bottom:16px}
.sp-detail hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.sp-side{border:1px solid var(--line);padding:20px;background:rgba(15,17,22,.6)}
.sp-side h1{font-size:20px;font-weight:400;margin-bottom:12px}
.sp-author{display:flex;gap:10px;align-items:center;margin-bottom:18px;font-size:14px}
.sp-author .av{width:32px;height:32px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:600}
.sp-author em{display:block;font-size:12px;color:var(--muted)}
.lic{border:1px solid var(--line);padding:16px}
.lic-top{text-align:center;font-size:24px;font-weight:500;margin-bottom:14px}
.lic-disc{background:#20242f;color:#7d9cff;text-align:center;font-size:13px;padding:12px;margin-bottom:8px}
.lic-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.lic-row label{display:flex;gap:10px;align-items:center;margin:0;color:var(--text);cursor:pointer}
.lic-row input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--blue)}
.lic-row select{grid-column:1/-1;font-size:13px;padding:12px}.lic-row select[hidden]{display:none}
.lic-sum{font-size:13px;color:var(--muted);margin:12px 0}
.lic-sum div{display:flex;justify-content:space-between;padding:3px 0}.lic-sum .t{color:var(--text);font-size:15px}
.btn.wide{display:block;width:100%;text-align:center;margin-top:10px;padding:14px}
.btn.light{background:#fff;color:var(--blue)}.btn:disabled{opacity:.5;cursor:not-allowed}
.quote{display:block;background:#e6efff;color:#12327a;font-size:12px;padding:14px;margin-top:14px}
.sp-help{margin-top:22px;font-size:14px;color:var(--muted)}.sp-contact{display:block;margin:12px 0 22px;font-size:14px}
.sp-share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}.sp-share span{width:100%}
.sp-share a{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--text)}
.sp-share a:hover{background:var(--blue);border-color:var(--blue)}
.sp-instant{margin-top:24px;font-size:14px;color:var(--muted)}.sp-instant b{font-weight:400;display:block;margin-bottom:6px}

/* ===== License page ===== */
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1000px){.lp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lp-grid{grid-template-columns:1fr}}
.lp-card{background:var(--card);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:24px}
.lp-card h3{font-size:19px;font-weight:500}.lp-card p{color:var(--muted);font-size:14.5px}.lp-card .ex b{color:var(--text);font-weight:500}
.lp-card table{margin-top:auto;font-size:14px}.lp-card th{font-size:12px;color:var(--muted);font-weight:400}
.lp-card td:last-child,.lp-card th:last-child{text-align:right;white-space:nowrap}
.lp-note{text-align:center;color:#7d9cff;margin-top:24px}
.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:700px){.lp-two{grid-template-columns:1fr}}
.lp-two>div{border:1px solid var(--line);padding:24px;background:var(--card)}.lp-two h3{font-weight:500;margin-bottom:12px}
.lp-two ul{padding-left:20px;color:var(--muted);display:grid;gap:8px;font-size:14.5px}
.lp-faq{max-width:820px;margin:0 auto}
.lp-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.lp-faq summary{cursor:pointer;font-size:17px}.lp-faq p{color:var(--muted);margin-top:10px;max-width:70ch}.lp-faq a{color:#7d9cff}
.lp-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--line);background:var(--card);padding:32px;margin-top:72px}
.lp-cta h3{font-weight:500;font-size:22px}.lp-cta p{color:var(--muted)}
.lic-more{display:block;text-align:center;font-size:13px;color:#7d9cff;margin-top:12px}

/* ===== Custom overrides added by Serbaneka Studio ===== */
/* Sembunyikan Site Title & Tagline / Main Hero Title secara mutlak di Homepage */
.home h1,
.home .site-title,
.home .site-description,
.home .site-branding,
.home .entry-title,
.home .hero-title,
.home .hero-description,
.home [class*="title"]:not(.product *),
.home [class*="tagline"],
.home [class*="description"]:not(.product *) {
    display: none !important;
}
/* Paksa sembunyikan semua paragraf/deskripsi header di homepage */
.home header p,
.home .site-branding + p,
.home .site-description,
.home p.site-description,
.home .tagline,
.home [class*="tagline"],
.home [class*="subtitle"],
.home .hero p,
.home [class*="hero"] p {
    display: none !important;
}
/* 1. Melengkungkan Gambar Produk (Atas & Bawah / Semua Sisi) */
.product img,
.woocommerce ul.products li.product img,
.wp-block-woocommerce-all-products img,
.woocommerce img {
    border-radius: 6px !important;
}

/* 3. Melengkungkan Kotak/Tombol "Buy now $23" dan Semua Komponennya */
.product div[class*="buy"],
.product div[class*="button"],
.product div[class*="price"],
.product .add_to_cart_button,
.product a.button,
.product button {
    border-radius: 6px !important;
}

/* Mengatur border radius pada kontainer kartu produk */
ul.products li.product,
.woocommerce .product,
.product-grid-item {
    border-radius: 12px !important; /* Sesuaikan angka ini (misal: 8px, 12px, atau 16px) */
    overflow: hidden !important;    /* Memastikan gambar/elemen di dalam mengikuti bentuk lengkungan */
}

/* Menargetkan semua elemen berlatar biru di dalam kartu produk */
ul.products li.product *,
.product-grid-item * {
    border-radius: 3px;
}