/* ThemaWordpress Marketplace 1.2.0 — desain model nomor 7 (red/navy) */
:root { --tm-deep: #0d1b33; --tm-red: #ec1730; --tm-ink: #11213b; --tm-mist: #f7f9fc; }
.container { width: min(1230px, calc(100% - 58px)); }
body { color: var(--tm-ink); font-size: 14px; }
.tm-announcement { background: linear-gradient(90deg,#ed1630,#d80b24); color: white; }
.tm-announcement .container { min-height: 33px; }
.tm-announcement-links { display: flex; align-items: center; gap: 18px; font-size: 11px; }
.tm-announcement-links a { color: #fff; opacity: .95; }
.tm-announcement-links a:hover { text-decoration: underline; }
.tm-announcement-register { padding: 4px 12px; background: white; border-radius: 5px; font-weight: 850; color: #c7142f !important; }
.tm-site-header { box-shadow: 0 1px 0 #e6eaf1; }
.tm-site-header .header-inner { min-height: 66px; gap: 25px; }
.tm-site-header .site-logo { margin-right: auto; }
.tm-site-header .brand-image { display: flex; align-items: center; }
.tm-site-header .brand-image img { width: 210px; height: auto; max-height: 54px; object-fit: contain; }
.tm-site-header .custom-logo { width: auto; max-width: 210px; max-height: 54px; }
.tm-site-header .primary-navigation { margin-right: 8px; }
.tm-site-header .nav-items { gap: 26px; }
.tm-site-header .nav-items a { font-size: 12px; padding: 23px 0; }
.tm-site-header .current-menu-item > a { border-bottom: 2px solid var(--tm-red); }
.tm-site-header .cart-link { width: 36px; color: #111d34; }
.tm-site-header .header-login { border-radius: 6px; }
.tm-site-header .header-signup { background: var(--tm-red); border-radius: 6px; min-height: 33px; }

/* Hero: the sample has left-aligned copy and overlapping template previews on the right. */
.tm-hero { background: radial-gradient(ellipse at 93% 14%,rgba(228,32,62,.30),transparent 36%),linear-gradient(110deg,#071b35 0%,#13223d 53%,#41132c 100%); min-height: 351px; padding: 34px 0 30px; isolation: isolate; }
.tm-hero:before { content:""; position:absolute; width:280px; height:270px; left:-210px; top:80px; transform:rotate(36deg); border-radius:52px; background:#c31a45; opacity:.36; }
.tm-hero:after { content:""; position:absolute; width:320px; height:200px; right:-135px; top:-95px; transform:rotate(-22deg); border-radius:45px; background:rgba(238,23,52,.16); }
.tm-hero-layer { position:absolute; pointer-events:none; inset:0; opacity:.45; background-image:linear-gradient(135deg,transparent 44%,rgba(255,255,255,.035) 44% 50%,transparent 50%); background-size:360px 360px; }
.tm-hero-inner { display:grid; grid-template-columns:52% 48%; position:relative; align-items:center; min-height:290px; }
.tm-hero-content { position:relative; z-index:4; padding:0 2px 4px 0; }
.tm-hero .tm-hero-badge { background:#293b55; font-size:10px; letter-spacing:0; text-transform:none; color:#f0f4fa; padding:5px 12px; margin-bottom:13px; border-color:#40516a; }
.tm-hero h1 { font-size: clamp(30px,3.3vw,47px); line-height:1.12; font-weight: 900; letter-spacing:-.042em; color:white; margin-bottom:12px; }
.tm-hero h1 span { display:inline; color:#ff354e; }
.tm-hero .hero-desc { color:#e4e8f0; max-width:530px; font-size:13.3px; line-height:1.6; margin-bottom:21px; }
.tm-hero .tb-search { height:53px; max-width:720px; border-radius:7px; box-shadow:0 9px 35px #020d2444; }
.tm-hero .tb-search input[type=search] { font-size:12px; min-width:20px; }
.tm-hero .tb-search .tb-category-select { width:142px; flex:0 0 142px; border:0; border-left:1px solid #e5e9ef; background:#fff; padding:0 7px; font-size:11px; color:#344152; outline:none; height:34px; }
.tm-hero .tb-search button { padding:0 18px; background:var(--tm-red); }
.tm-hero .tb-search button:hover { background:#c90f25; }
.tm-hero .popular-tags { gap:5px; margin-top:11px; }
.tm-hero .popular-tags strong { color:#fff; font-size:11px; font-weight:600; margin-right:3px; }
.tm-hero .popular-tags a { padding:4px 12px; font-size:10px; border-color:#526075; color:#f6f7fb; }
.tm-hero-collage { position:relative; width:100%; height:296px; overflow:visible; z-index:1; }
.tm-hero-collage:before { content:""; position:absolute; width:400px; height:250px; right:15px; top:20px; background:radial-gradient(ellipse,#92143777,transparent 65%); filter:blur(18px); }
.tm-mockup { position:absolute; overflow:hidden; background:#fdfefe; border:5px solid #fcfdff; border-radius:6px; box-shadow:0 19px 39px rgba(0,0,0,.43); }
.tm-mockup img { display:block; width:100%; height:100%; object-fit:cover; }
.tm-mockup-main { width:64%; height:204px; top:41px; right:10%; z-index:3; transform:rotate(-6deg); }
.tm-mockup-main .tm-mockup-bar { height:11px; padding-left:8px; display:flex; gap:3px; align-items:center; background:#fff; }
.tm-mockup-bar b { width:3px; height:3px; border-radius:100%; background:#e62b48; }
.tm-mockup-main img { height:calc(100% - 11px); object-fit:cover; }
.tm-mockup-top { width:40%; height:146px; top:0; right:41%; z-index:2; transform:rotate(-15deg); }
.tm-mockup-side { width:41%; height:175px; top:5px; right:-6%; z-index:1; transform:rotate(11deg); }
.tm-mockup-bottom { width:48%; height:150px; bottom:0; right:0; z-index:4; transform:rotate(7deg); }
.tm-hero-stamp { position:absolute; top:110px; right:-21px; z-index:6; width:136px; height:88px; display:grid; place-content:center; transform:rotate(-9deg); text-align:center; border-radius:12px; box-shadow:0 12px 28px #0004; background:#f01830; color:#fff; font-size:11px; font-weight:700; line-height:1.2; }
.tm-hero-stamp strong { font-size:16px; }

.tm-benefits { background:#fff; }
.tm-benefits .point-grid { padding:21px 0; }
.tm-benefits .point-grid > div { gap:15px; }
.tm-benefits .point-grid > div > .tb-icon { width:48px; height:48px; padding:13px; background:var(--tm-red); color:#fff; flex-shrink:0; }
.tm-benefits .point-grid > div:nth-child(even) > .tb-icon { background:var(--tm-deep); color:#fff; }
.tm-benefits .point-grid strong { color:#102038; font-size:12.5px; }
.tm-benefits .point-grid small { color:#66738a; }

.tm-catalog { background:#f8fafc; padding:35px 0 38px; }
.tm-section-head { display:flex; justify-content:space-between; gap:22px; align-items:center; margin-bottom:20px; }
.tm-section-head h2 { margin:0 0 4px; font-size:28px; letter-spacing:-.04em; font-weight:900; }
.tm-section-head h2 span { color:var(--tm-red); }
.tm-section-head p { color:#6d788c; font-size:12px; margin:0; }
.tm-text-arrow { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; color:var(--tm-red); font-size:12px; font-weight:800; }
.tm-text-arrow .tb-icon { width:16px; height:16px; }
.tm-product-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.tm-product-grid .tb-product-card, .tm-example-product { background:#fff; border:1px solid #e9edf3; border-radius:10px; box-shadow:0 9px 21px rgba(22,34,56,.045); overflow:hidden; min-width:0; }
.tm-product-grid .tb-product-media, .tm-example-image { display:block; height:auto; aspect-ratio: 1.33; position:relative; overflow:hidden; background:#dfe8f2; }
.tm-product-grid .tb-product-media > img, .tm-example-image img { object-fit:cover; width:100%; height:100%; display:block; }
.tm-product-grid .tb-product-body { padding:12px; }
.tm-product-grid .tb-product-body h3 { font-size:14px; line-height:1.25; margin-bottom:5px; }
.tm-product-grid .product-cats { font-size:10px; margin:4px 0 0; }
.tm-product-grid .product-price { margin:12px 0 10px; font-size:15px; }
.tm-product-grid .product-actions { display:flex; gap:5px; }
.tm-product-grid .product-actions .btn { font-size:11px; min-height:35px; border-radius:5px; padding:8px; }
.tm-product-grid .product-actions .demo-small { flex:0 0 47px; }
.tm-product-grid .product-actions .btn-red { background:var(--tm-red); }
.tm-example-body { padding:12px; }
.tm-example-body > strong { display:block; font-size:13px; line-height:1.4; }
.tm-example-body p { font-size:11px; margin:0 0 8px; }
.tm-example-note { font-size:10px; color:#64748b; padding-bottom:12px; display:block; }
.tm-example-action { display:block; background:var(--tm-red); color:white; border-radius:5px; text-align:center; font-weight:800; font-size:11px; padding:9px; }
.tm-example-action:hover { color:white; background:#c80f28; }
.tm-empty-hint { margin:15px 0 0; font-size:11px; color:#7c8798; }

.tm-reseller-section { padding:17px 0 28px; background:white; }
.tm-reseller-banner { position:relative; display:grid; grid-template-columns:26% 1fr 210px; gap:16px; align-items:center; overflow:hidden; border-radius:13px; min-height:188px; padding:15px 24px 15px 14px; background:radial-gradient(circle at 12% 50%,#fff 0,#ffe7eb 37%,#fff5f5 65%,#ffedf2 100%); }
.tm-reseller-art { height:170px; position:relative; align-self:end; }
.tm-reseller-box { display:flex; position:absolute; width:95%; height:160px; left:-10px; bottom:-15px; filter:drop-shadow(0 10px 14px #6a293e33); }
.tm-reseller-box img { border-radius:6px; border:5px solid #071b32; box-shadow:0 6px 16px #09214055; object-fit:cover; position:absolute; width:55%; height:132px; transform:rotate(-11deg); left:2px; bottom:0; }
.tm-reseller-box img:nth-child(2) { transform:rotate(8deg); left:37%; bottom:14px; }
.tm-reseller-emblem { position:absolute; right:0; top:-5px; background:var(--tm-red); border-radius:50%; padding:12px 9px; color:white; text-align:center; font-size:10px; font-weight:900; transform:rotate(12deg); box-shadow:0 4px 17px #cf0a3266; }
.tm-ribbon { display:inline-block; background:#e81730; border-radius:4px; color:#fff; padding:4px 12px; font-size:10px; font-weight:800; }
.tm-reseller-copy h2 { margin:10px 0 5px; font-size:26px; }
.tm-reseller-copy p { font-size:13px; max-width:510px; line-height:1.55; margin-bottom:12px; }
.tm-reseller-features { display:flex; gap:10px; flex-wrap:wrap; }
.tm-reseller-features span { display:inline-flex; align-items:center; gap:5px; font-size:10px; color:#243046; font-weight:700; background:#fff9; border-radius:5px; padding:5px; }
.tm-reseller-features .tb-icon { width:16px; height:16px; }
.tm-reseller-side { display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding-left:8px; }
.tm-small-badge { font-size:10px; color:white; background:#ed1c35; padding:4px 10px; border-radius:5px; font-weight:900; }
.tm-reseller-side small { font-size:11px; color:#526078; }
.tm-reseller-side strong { font-size:24px; color:#10213b; line-height:1; }
.tm-reseller-side .btn { margin-top:7px; background:var(--tm-red); font-size:11px; width:100%; border-radius:6px; padding:11px 8px; }

.tm-testimonials { padding:31px 0 28px; background:#fbfcfe; }
.tm-testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tm-testimonial-card { position:relative; border:1px solid #e9edf4; border-radius:10px; background:white; padding:20px; box-shadow:0 5px 20px #142c4b08; }
.tm-quote-icon { font-size:45px; line-height:.5; color:#c7ceda; font-family:Georgia,serif; }
.tm-testimonial-card p { font-size:12px; color:#526078; margin:14px 0 19px; min-height:60px; }
.tm-reviewer { display:flex; gap:11px; align-items:center; }
.tm-reviewer img, .tm-review-initial { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; object-fit:cover; background:#e8f1fa; font-weight:900; }
.tm-reviewer strong { display:block; font-size:12px; }
.tm-reviewer small { display:block; font-size:11px; color:#7d8a9b; }
.tm-testimonial-empty { padding:25px 20px; border:1px solid #e9edf4; border-radius:10px; background:white; text-align:center; }
.tm-testimonial-empty .tm-quote-icon { display:block; margin-top:15px; }
.tm-testimonial-empty strong { display:block; font-size:15px; margin:9px 0; }
.tm-testimonial-empty p { font-size:12px; margin:0; }

.tm-faq-section { padding:32px 0 43px; background:#f9fafc; }
.tm-faq-section .faq-grid { gap:11px 17px; }
.tm-faq-section .faq-item { background:#fff; padding:0 14px; border-radius:7px; box-shadow:0 2px 10px #10204005; }
.tm-faq-section .faq-item summary { display:flex; justify-content:flex-start; padding:14px 0; gap:9px; font-size:12px; }
.tm-faq-prefix { display:grid; place-items:center; border-radius:50%; width:18px; height:18px; flex-shrink:0; border:2px solid #12203b; font-size:10px!important; color:#152544!important; font-weight:900!important; }
.tm-faq-plus { font-size:19px!important; margin-left:auto; color:#1a2844!important; }
.tm-faq-section .faq-item[open] .tm-faq-plus { transform:rotate(45deg); }
.tm-faq-section .faq-item p { padding-left:26px; }

.tm-footer { padding:34px 0 0; background:#0a172d; }
.tm-footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.35fr; gap:30px; }
.tm-footer .brand-image img { width:175px; height:auto; }
.tm-footer .footer-intro p { margin:14px 0 10px; font-size:11px; color:#bdc7d6; }
.tm-footer h3 { margin:0 0 13px; font-size:13px; color:#fff; }
.tm-footer ul { padding:0; margin:0; list-style:none; }
.tm-footer li { padding:0 0 6px; }
.tm-footer li a { color:#aebccd; font-size:11px; }
.tm-footer li a:hover { color:#fff; }
.tm-footer-grid > div > p { color:#acbbcd; font-size:11px; }
.tm-footer-social { display:flex; gap:9px; margin-top:15px; }
.tm-footer-social a { display:grid; place-items:center; border:1px solid #3e4960; color:white; width:28px; height:28px; border-radius:50%; }
.tm-footer-social .tb-icon { width:14px; height:14px; }
.tm-newsletter-form { display:flex; align-items:stretch; position:relative; margin-top:12px; min-height:36px; }
.tm-newsletter-form input[type=email] { min-width:0; width:100%; border:0; border-radius:5px 0 0 5px; font-size:11px; padding:0 10px; }
.tm-newsletter-form button { border:0; padding:5px 13px; border-radius:0 5px 5px 0; background:var(--tm-red); font-size:10px; color:white; font-weight:850; }
.tm-newsletter-trap { position:absolute; left:-10000px; opacity:0; pointer-events:none; }
.tm-footer-feedback { color:#e7f2ff!important; }
.tm-footer-bottom { border-top:1px solid #2a3953; display:flex; justify-content:space-between; gap:18px; padding:13px 0 18px; margin-top:33px; color:#9eabbd; font-size:10px; }

@media(max-width:1100px) {
  .tm-site-header .nav-items { gap:15px; }
  .tm-site-header .site-logo img { width:170px; }
  .tm-hero h1 { font-size:36px; }
  .tm-hero-stamp { right:-4px; width:107px; font-size:9px; }
  .tm-hero-stamp strong { font-size:12px; }
  .tm-reseller-banner { grid-template-columns:24% 1fr 190px; }
  .tm-footer-grid { gap:18px; }
}
@media(max-width:850px) {
  .container { width:min(100% - 34px,720px); }
  .tm-announcement .tm-announcement-links { display:none; }
  .tm-site-header .header-inner { min-height:66px; flex-wrap:wrap; }
  .tm-site-header .mobile-toggle { display:block; margin-left:auto; order:3; }
  .tm-site-header .site-logo { order:0; margin-right:0; }
  .tm-site-header .header-actions { margin-left:auto; order:1; }
  .tm-site-header .primary-navigation { order:4; flex:0 0 100%; display:none; margin:0; }
  .tm-site-header .primary-navigation.is-open { display:block; padding-bottom:14px; }
  .tm-site-header .nav-items { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .tm-site-header .nav-items a { padding:12px 5px; border-bottom:1px solid #eef1f5; display:block; }
  .tm-site-header .nav-items .sub-menu { display:block; position:static; box-shadow:none; border:0; padding-left:14px; }
  .tm-hero { padding:44px 0; }
  .tm-hero-inner { grid-template-columns:1fr; }
  .tm-hero-content { max-width:650px; }
  .tm-hero h1 { font-size:clamp(32px,6vw,46px); }
  .tm-hero-collage { height:290px; max-width:510px; width:100%; margin:24px auto 0; }
  .tm-benefits .point-grid { grid-template-columns:repeat(2,1fr); gap:15px; }
  .tm-benefits .point-grid > div:nth-child(2) { border-right:0; }
  .tm-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tm-reseller-banner { grid-template-columns:30% 1fr; }
  .tm-reseller-side { grid-column:1/-1; flex-direction:row; align-items:center; gap:10px; padding:0 0 7px; }
  .tm-reseller-side .btn { width:auto; margin:0 0 0 auto; }
  .tm-testimonial-grid { grid-template-columns:repeat(2,1fr); }
  .tm-footer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:26px; }
}
@media(max-width:560px) {
  .tm-site-header .header-inner { gap:7px; }
  .tm-site-header .site-logo img { width:155px; }
  .tm-site-header .header-login { display:none; }
  .tm-site-header .header-signup { padding:8px 10px; font-size:11px; }
  .tm-site-header .cart-link { width:28px; }
  .tm-hero { padding:38px 0 23px; }
  .tm-hero h1 { font-size:34px; }
  .tm-hero .tb-search { flex-wrap:wrap; height:auto; border-radius:8px; overflow:visible; padding:3px; }
  .tm-hero .tb-search > .tb-icon { margin-left:9px; }
  .tm-hero .tb-search input[type=search] { min-height:43px; width:calc(100% - 43px); flex:1 1 75%; }
  .tm-hero .tb-search .tb-category-select { flex:1 1 auto; width:55%; border-left:0; height:40px; }
  .tm-hero .tb-search button { height:40px; flex:0 0 40%; border-radius:5px; }
  .tm-hero-collage { height:225px; margin-top:20px; }
  .tm-mockup-main { height:163px; }
  .tm-mockup-top { height:112px; }
  .tm-mockup-side { height:122px; }
  .tm-mockup-bottom { height:118px; }
  .tm-hero-stamp { top:80px; right:0; width:94px; height:62px; font-size:8px; }
  .tm-hero-stamp strong { font-size:11px; }
  .tm-benefits .point-grid { gap:10px; padding:16px 0; }
  .tm-benefits .point-grid > div { border:0; gap:9px; }
  .tm-benefits .point-grid > div > .tb-icon { width:36px; height:36px; padding:9px; }
  .tm-benefits .point-grid strong { font-size:11px; }
  .tm-benefits .point-grid small { font-size:10px; }
  .tm-section-head { align-items:flex-start; }
  .tm-section-head h2 { font-size:23px; }
  .tm-text-arrow { font-size:10px; }
  .tm-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tm-reseller-banner { display:block; padding:14px 18px 22px; }
  .tm-reseller-art { float:right; width:40%; height:130px; margin:0 0 10px 10px; }
  .tm-reseller-box { height:140px; }
  .tm-reseller-copy h2 { font-size:22px; }
  .tm-reseller-side { display:flex; clear:both; flex-wrap:wrap; }
  .tm-reseller-side .btn { width:100%; }
  .tm-testimonial-grid, .tm-faq-section .faq-grid { grid-template-columns:1fr; }
  .tm-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tm-footer-grid > div:first-child, .tm-footer-grid > div:last-child { grid-column:1/-1; }
  .tm-footer-bottom { flex-direction:column; }
}

.tm-faq-section .faq-item[open] .tm-faq-prefix { transform: none; }