/*
Theme Name: Magazine Musik - By Prayoga Web
Theme URI: https://example.com/
Author: Prayoga Web
Author URI: https://example.com/
Description: Tema editorial monochrome untuk portal media musik dengan homepage modular dan alignment yang rapi.
Version: 5.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: magazine-musik-by-prayoga-web
*/

:root{
  --mm-black:#111111;
  --mm-text:#111111;
  --mm-gray:#777777;
  --mm-border:#dcdcdc;
  --mm-light:#f7f7f7;
  --mm-max:1280px;
  --mm-content:1200px;
  --mm-gap:28px;
  --mm-title: clamp(2rem, 5vw, 4rem);
  --mm-heading: clamp(1.4rem, 3vw, 2.3rem);
  --mm-body: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  color:var(--mm-text);
  background:#fff;
  line-height:1.6;
  font-size:var(--mm-body);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
.mm-container{width:min(calc(100% - 48px), var(--mm-content));margin:0 auto}
.mm-container-wide{width:min(calc(100% - 48px), var(--mm-max));margin:0 auto}
.mm-divider{height:1px;background:var(--mm-border);margin:0}
.mm-screen-reader-text{position:absolute;left:-9999px}

.admin-bar .mm-site-header{top:32px}
@media (max-width:782px){
  .admin-bar .mm-site-header{top:46px}
}

.mm-topbar{
  border-bottom:1px solid var(--mm-border);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mm-topbar-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:46px;
}
.mm-social-nav,
.mm-secondary-nav{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.mm-social-nav a,
.mm-secondary-nav a{font-weight:700}
.mm-branding{
  padding:36px 0 34px;
  border-bottom:1px solid var(--mm-border);
}
.mm-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.mm-logo-wrap img{
  max-width:460px;
  width:100%;
}
.mm-site-title{
  font-size:56px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mm-site-title small{
  display:block;
  font-size:20px;
  font-weight:700;
  margin-top:10px;
}
.mm-main-nav{
  border-bottom:1px solid var(--mm-border);
  position:sticky;
  top:0;
  background:#fff;
  z-index:30;
}
.mm-main-nav-row{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:72px;
  position:relative;
}
.mm-menu-toggle{
  display:none;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  padding:10px 14px;
  border:1px solid var(--mm-border);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  text-transform:uppercase;
}
.mm-primary-menu{
  list-style:none;
  display:flex;
  gap:42px;
  padding:0;
  margin:0;
  flex-wrap:wrap;
  justify-content:center;
}
.mm-primary-menu a{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:16px;
}
.mm-section{
  padding:40px 0 8px;
}
.mm-section-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.mm-section-title{
  margin:0;
  font-size:clamp(1.8rem, 4vw, 3rem);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:900;
}
.mm-section-rule{
  border:0;
  border-top:4px solid var(--mm-black);
  margin:0;
}
.mm-grid{
  display:grid;
  gap:var(--mm-gap);
}
.mm-grid-hero{
  grid-template-columns:1.5fr 1fr;
}
.mm-grid-3{
  grid-template-columns:repeat(3,1fr);
}
.mm-grid-4{
  grid-template-columns:repeat(4,1fr);
}
.mm-grid-2{
  grid-template-columns:repeat(2,1fr);
}
.mm-card{
  display:flex;
  flex-direction:column;
}
.mm-card-thumb{
  background:#efefef;
  aspect-ratio: 16/10;
  overflow:hidden;
}
.mm-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.mm-card-meta{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:14px 0 8px;
  color:var(--mm-gray);
  font-weight:700;
}
.mm-card-title{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
}
.mm-card-title.is-xl{font-size:clamp(2rem, 4vw, 3.6rem)}
.mm-card-title.is-lg{font-size:clamp(1.4rem, 2.4vw, 2rem)}
.mm-card-title.is-md{font-size:clamp(1.2rem, 2vw, 1.55rem)}
.mm-card-excerpt{
  color:#333;
  font-size:16px;
  margin:0;
}
.mm-stack{
  display:grid;
  gap:24px;
}
.mm-list{
  display:grid;
  gap:24px;
}
.mm-list-item{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:22px;
  align-items:start;
}
.mm-list-item .mm-card-thumb{
  aspect-ratio:16/10;
}
.mm-category-section{
  padding:34px 0 10px;
}
.mm-category-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--mm-gap);
}
.mm-archive-header{
  padding:30px 0 16px;
}
.mm-breadcrumb{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mm-gray);
  margin-bottom:12px;
}
.mm-archive-title{
  margin:0;
  font-size:clamp(2.2rem, 5vw, 4rem);
  font-weight:900;
  letter-spacing:-.03em;
}
.mm-post-wrap{
  display:grid;
  grid-template-columns:minmax(0, 760px) 320px;
  gap:46px;
  padding:36px 0 60px;
}
.mm-post-title{
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:1;
  letter-spacing:-.04em;
  margin:0 0 14px;
  font-weight:900;
}
.mm-post-deck{
  font-size:22px;
  color:#333;
  margin:0 0 24px;
}
.mm-post-meta{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mm-gray);
  margin-bottom:18px;
}
.mm-post-content p{
  margin:0 0 1.2em;
}
.mm-sharebar{
  display:flex;
  gap:10px;
  margin:18px 0 26px;
  flex-wrap:wrap;
}
.mm-sharebar a{
  border:1px solid var(--mm-border);
  padding:10px 12px;
  font-size:12px;
  text-transform:uppercase;
  font-weight:700;
}
.mm-sidebar-card{
  border-top:4px solid var(--mm-black);
  padding-top:14px;
  margin-bottom:36px;
}
.mm-sidebar-card h3{
  margin:0 0 16px;
  font-size:18px;
  font-weight:900;
}
.mm-sidebar-list{
  display:grid;
  gap:18px;
}
.mm-sidebar-list a{
  font-weight:700;
}
.mm-page-wrap{
  padding:40px 0 60px;
}
.mm-page-title{
  font-size:clamp(2rem, 5vw, 4rem);
  font-weight:900;
  letter-spacing:-.03em;
  margin:0 0 22px;
}
.mm-footer{
  border-top:1px solid var(--mm-border);
  padding:32px 0 40px;
  margin-top:40px;
}
.mm-footer-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
}
.mm-footer-nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mm-empty{
  padding:24px 0 12px;
  color:#444;
}
@media (max-width:980px){
  .mm-grid-hero,
  .mm-category-layout,
  .mm-post-wrap,
  .mm-list-item{
    grid-template-columns:1fr;
  }
  .mm-grid-3{grid-template-columns:1fr 1fr}
  .mm-grid-4{grid-template-columns:1fr 1fr}
  .mm-main-nav-row{
    justify-content:flex-start;
    min-height:64px;
    padding-left:72px;
  }
  .mm-menu-toggle{display:block}
  .mm-primary-menu{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    background:#fff;
    padding:20px 24px;
    border-bottom:1px solid var(--mm-border);
    justify-content:flex-start;
    gap:18px 28px;
  }
  .mm-primary-menu.is-open{display:flex}
}
@media (max-width:680px){
  .mm-container,.mm-container-wide{width:min(calc(100% - 28px), var(--mm-max))}
  .mm-topbar-row{flex-direction:column;align-items:flex-start;padding:12px 0}
  .mm-site-title{font-size:40px}
  .mm-grid-3,.mm-grid-4,.mm-grid-2{grid-template-columns:1fr}
  .mm-footer-grid{grid-template-columns:1fr}
  .mm-footer-nav{justify-content:flex-start}
}