/* Template Barbershop: hitam arang + krem kertas + kuningan, huruf kapital kondensasi, garis tiang barber merah-putih-biru,
   menu harga bergaya papan dengan titik penuntun, kartu kapster bernomor, booking slot jam berbentuk tiket. */
:root{--latar:#F4EBDD;--latar-2:#EADDC8;--permukaan:#FFFBF4;--teks:#151311;--teks-2:#3F3A33;--teks-3:#6B6359;--garis:#D9CBB3;
  --utama:#151311;--utama-tua:#0A0908;--utama-muda:#EADDC8;--pada-utama:#FFFFFF;--aksen:#C9A227;--aksen-tua:#A8861A;--pada-aksen:#151311;
  --merah:#B91C1C;--biru:#1E3A8A;--gelap:#151311;--pada-gelap:#CFC4B2;--radius:4px;--radius-kecil:3px;--bayang:0 18px 36px -24px rgba(0,0,0,.6)}
h1,h2,h3,.br-alis,.br-btn,.br-btn-garis,.br-label{font-family:"Bebas Neue","Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif;font-stretch:condensed;text-transform:uppercase;letter-spacing:.02em}
h1,h2,h3{font-weight:800}
.serif{font-family:inherit;font-style:normal;color:var(--aksen)}

.kepala{background:rgba(21,19,17,.96)}
.kepala .merek{color:var(--aksen);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.kepala .menu a{color:#E9DFCF}
.kepala .btn-wa,.btn-wa,.btn-utama{background:var(--aksen);color:var(--pada-aksen)}
.kepala .btn-wa:hover,.btn-wa:hover,.btn-utama:hover{background:#E0B93A;color:var(--pada-aksen)}
.btn{border-radius:var(--radius)}
.menu a[aria-current],.menu a:hover{background:rgba(201,162,39,.16);color:var(--aksen)}

.br-alis,.alis{display:inline-block;margin-bottom:10px;font-size:15px;letter-spacing:.24em;color:var(--aksen)}
.kepala-bag.tengah{margin-left:auto;margin-right:auto;text-align:center}
.br-btn{background:var(--aksen);color:var(--pada-aksen);border:2px solid var(--aksen);font-size:19px;padding-left:26px;padding-right:26px}
.br-btn:hover{background:#E0B93A;border-color:#E0B93A;color:var(--pada-aksen)}
.br-btn-garis{background:transparent;color:#F4EBDD;border:2px solid #F4EBDD;font-size:19px}
.br-btn-garis:hover{background:#F4EBDD;color:var(--utama)}
.br-blok{width:100%;justify-content:center}
:focus-visible{outline:3px solid var(--aksen);outline-offset:3px}

/* Hero */
.br-hero{position:relative;display:flex;align-items:center;min-height:min(86vh,720px);padding:90px 0;color:#F4EBDD;background:var(--utama) var(--bg,none) center/cover no-repeat}
.br-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.92) 0,rgba(10,9,8,.7) 45%,rgba(10,9,8,.25) 100%)}
.br-tiang{position:absolute;left:0;top:0;bottom:0;width:18px;background:repeating-linear-gradient(-45deg,var(--merah) 0 14px,#fff 14px 28px,var(--biru) 28px 42px,#fff 42px 56px)}
.br-hero .wrap{position:relative;width:100%}
.br-hero h1{color:#F4EBDD;font-size:clamp(54px,9vw,120px);line-height:.88;margin:0 0 20px;max-width:780px}
.br-hero p{color:var(--pada-gelap);font-size:18px;max-width:480px}
.br-aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.br-jam{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:10px 16px;border:1px solid rgba(201,162,39,.5);color:#E9DFCF;font-size:15px}
.br-jam .ico{color:var(--aksen)}
.br-jam b{color:var(--aksen)}

/* Menu papan */
.br-menu{background:var(--latar)}
.br-papan{display:grid;gap:26px 48px;padding:40px;background:var(--utama);color:#F4EBDD;border:10px solid #3B2F22;box-shadow:inset 0 0 0 2px var(--aksen),var(--bayang)}
@media(min-width:900px){.br-papan{grid-template-columns:repeat(3,minmax(0,1fr))}}
.br-papan-kel h3{margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--aksen);font-size:26px;color:var(--aksen)}
.br-papan ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.br-baris{display:flex;align-items:baseline;gap:8px}
.br-baris b{font-size:16px;font-weight:700}
.br-baris i{flex:1;border-bottom:2px dotted rgba(244,235,221,.35);transform:translateY(-4px)}
.br-baris span{font-weight:800;color:var(--aksen);white-space:nowrap}
.br-papan small{display:block;margin-top:2px;font-size:13px;color:#B9AE9C}
.br-foto{display:grid;gap:12px;margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:800px){.br-foto{grid-template-columns:repeat(4,minmax(0,1fr))}}
.br-foto a{position:relative;display:block;overflow:hidden;text-decoration:none}
.br-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .3s,transform .3s}
.br-foto a:hover img{filter:none;transform:scale(1.04)}
.br-foto span{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#F4EBDD;font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-stretch:condensed;text-transform:uppercase;font-size:19px;letter-spacing:.04em}

/* Kapster */
.br-kapster{background:var(--utama);color:#F4EBDD}
.br-kapster h2{color:#F4EBDD}
.br-kapster-kisi{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.br-kapster-kisi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.br-kapster-kisi li{display:flex;flex-direction:column;padding:22px;border:1px solid rgba(201,162,39,.45);background:#1D1A17;position:relative}
.br-kapster-kisi li::before,.br-kapster-kisi li::after{content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--utama);transform:translateY(-50%)}
.br-kapster-kisi li::before{left:-10px}.br-kapster-kisi li::after{right:-10px}
.br-kapster-kisi img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:12px}
.br-no{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-stretch:condensed;font-size:64px;line-height:1;color:var(--aksen)}
.br-kapster-kisi b{font-size:20px;margin-top:6px}
.br-kapster-kisi span{color:var(--aksen);font-weight:700;font-size:14px}
.br-kapster-kisi small{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(244,235,221,.2);color:#B9AE9C;font-size:13px}

/* Galeri, testimoni, faq */
#galeri{background:var(--latar)}
#galeri .galeri figure{border-radius:0;overflow:hidden;border:6px solid var(--permukaan);box-shadow:var(--bayang)}
#galeri .galeri img{aspect-ratio:1/1;object-fit:cover;filter:sepia(.2)}
#testimoni{background:var(--latar-2)}
#testimoni .testi{background:var(--permukaan);border-radius:0;border:1px solid var(--garis);border-top:4px solid var(--utama)}
#testimoni .bintang{color:var(--aksen-tua)}
#faq .faq details{background:var(--permukaan);border-radius:0;border:1px solid var(--garis)}

/* Booking */
.br-ajakan{position:relative;padding:84px 0;color:#F4EBDD;background:var(--utama) var(--bg,none) center/cover no-repeat}
.br-ajakan::before{content:"";position:absolute;inset:0;background:rgba(10,9,8,.86)}
.br-ajakan .wrap{position:relative;display:grid;gap:32px;align-items:center}
@media(min-width:900px){.br-ajakan .wrap{grid-template-columns:.8fr 1.2fr;gap:56px}}
.br-ajakan h2{color:#F4EBDD;font-size:clamp(40px,6vw,72px);line-height:.95}
.br-ajakan p{color:var(--pada-gelap);font-size:17px}
.br-form{padding:26px;background:var(--permukaan);color:var(--teks);border-top:8px solid var(--aksen)}
.br-label{margin:0 0 8px;font-size:18px;letter-spacing:.08em}
.br-hari{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:16px}
.br-hari button{display:flex;flex-direction:column;align-items:center;padding:8px 2px;border:1.5px solid var(--garis);background:#fff;font:inherit;cursor:pointer;color:var(--teks)}
.br-hari button small{font-size:11px;color:var(--teks-3)}
.br-hari button b{font-size:20px}
.br-hari button[aria-pressed="true"]{background:var(--utama);border-color:var(--utama);color:#F4EBDD}
.br-hari button[aria-pressed="true"] small{color:var(--aksen)}
.br-slot{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-bottom:16px}
.br-slot button{min-height:40px;border:1.5px solid var(--garis);background:#fff;font:inherit;font-weight:800;cursor:pointer;color:var(--teks)}
.br-slot button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.br-slot button[aria-pressed="true"]{background:var(--aksen);border-color:var(--aksen)}
.br-form-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.br-form-dua>div{min-width:0}
.br-form label{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.br-form select,.br-form input{width:100%;min-height:46px;padding:8px 12px;margin-bottom:14px;border:1.5px solid var(--garis);border-radius:0;font:inherit;font-size:16px;background:#fff;color:var(--teks)}

.kaki{background:var(--utama-tua)}

@media(max-width:760px){
  .br-hero{min-height:auto;padding:70px 0}
  .br-aksi .btn{width:100%;justify-content:center}
  .br-papan{padding:24px 18px;border-width:6px}
  .br-hari{grid-template-columns:repeat(4,minmax(0,1fr))}
  .br-form{padding:18px}
}