:root{
  --navy:#151515; --navy-2:#0a0a0a; --amber:#d4a72c; --amber-d:#8f6a0c;
  --bg:#ffffff; --bg-alt:#f4f4f2; --ink:#141414; --muted:#5f5b52; --line:#e6e0d0; --card:#ffffff;
  --on-navy:#ffffff; --link:#141414;
  --hf:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --bf:'Inter',system-ui,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--bf);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--amber-d);outline-offset:2px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
h1,h2,h3,h4{font-family:var(--hf);line-height:1.15;margin:0}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700}
.sec{padding:76px 0}
.sec.alt{background:var(--bg-alt)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sec-head p{margin:8px 0 0;color:var(--muted);max-width:52ch}
.more{font-weight:600;color:var(--link);border-bottom:2px solid var(--amber);padding-bottom:2px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:6px;font-weight:600;border:2px solid transparent;cursor:pointer;font-family:var(--bf);font-size:15px}
.btn-amber{background:var(--amber);color:#1a1200}
.btn-amber:hover{background:var(--amber-d);color:#fff}

/* language buttons */

.lang button{width:32px;height:32px;border:1px solid rgba(217,211,195,.3);border-radius:50%;padding:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;overflow:hidden}
.lang button.on{border-color:var(--amber);box-shadow:0 0 0 2px rgba(212,167,44,.2)}
.lang button svg{width:100%;height:100%;display:block}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--hf);font-weight:700;font-size:1.25rem;color:var(--navy);height:auto;min-width:200px;padding:8px 0}
.brand-shield{height:50px;width:auto;object-fit:contain;display:block;flex-shrink:0}
.brand-text{height:50px;width:auto;max-width:320px;object-fit:contain;display:block;flex-shrink:0}

.brand i{width:38px;height:38px;border-radius:8px;background:var(--navy);display:grid;place-items:center}
.brand i svg{width:22px;height:22px}
.menu{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{display:block;padding:24px 14px;font:600 14.5px var(--bf);background:none;border:0;color:var(--ink);cursor:pointer;text-transform:capitalize}
.menu>li:hover>a,.menu>li:hover>button{color:var(--amber-d)}
.drop{position:absolute;left:0;top:100%;min-width:260px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--amber);box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px;display:none}
.menu>li:hover .drop,.menu>li:focus-within .drop{display:block}
.drop a{display:block;padding:9px 12px;border-radius:4px;font-size:14px}
.drop a:hover{background:var(--bg-alt);color:var(--link)}
.search{background:none;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;cursor:pointer;color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;width:42px;height:42px;font-size:20px;color:var(--ink);margin-left:auto;cursor:pointer}

/* hero */
.hero{position:relative;color:var(--on-navy);background:var(--navy-2);overflow:hidden}
.slides{display:grid}
.slide{grid-area:1/1;min-height:min(640px,82vh);display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s;
  background:
   linear-gradient(100deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.84) 45%,rgba(8,8,8,.3) 100%),
   var(--art)}
.slide.on{opacity:1;visibility:visible}
.slide .wrap{padding:70px 0}
.slide h1{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:700;letter-spacing:-.02em;max-width:14ch}
.slide p{max-width:52ch;font-size:1.08rem;color:#ddd7c6;margin:20px 0 30px}

/* slider dots */

.dots{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:10px}
.dots button{width:34px;height:5px;border:0;background:rgba(255,255,255,.35);cursor:pointer;border-radius:3px;padding:0}
.dots button.on{background:var(--amber)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:20px;cursor:pointer}
.arrow:hover{background:var(--amber);color:#1a1200}
.arrow.p{left:16px}.arrow.n{right:16px}

/* about */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.about .big{font-family:var(--hf);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;color:var(--navy)}
.about .big span{display:block;color:var(--amber-d)}
.about p{color:var(--muted)}

/* tabs */

.panel[hidden]{display:none}

/* customers */

.logos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.logo{
  border:1px dashed var(--line);
  border-radius:8px;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  background:var(--card);
  overflow:hidden;
}

.logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:60px;
  object-fit:contain;
}
/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:28px}
.cbox h3{font-size:1.1rem;margin-bottom:12px;padding-bottom:10px;border-bottom:3px solid var(--amber);display:inline-block}
.cbox address{font-style:normal;color:var(--muted);font-size:15px}
.cbox address b{color:var(--ink);display:block;margin-top:14px}
.cbox address b:first-child{margin-top:0}
form.msg{display:grid;gap:12px}
form.msg input,form.msg textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit}
form.msg textarea{resize:vertical}

/* footer */
footer{background:var(--navy-2);color:#b9b3a3;padding:56px 0 0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px}
footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14.5px}
footer a:hover{color:var(--amber)}

.fbot{margin-top:40px;border-top:1px solid rgba(255,255,255,.14);padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px}
.soc{display:flex;gap:14px}

/* responsive */
@media (max-width:1000px){
  .menu{display:none}.burger{display:block}
  
  
  .about{grid-template-columns:1fr}
  
  .cgrid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .sec{padding:56px 0}
  .cgrid,.fgrid{grid-template-columns:1fr}
  
  .logos{grid-template-columns:repeat(2,1fr)}
  
  .arrow{display:none}
  
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* tema emas-hitam-putih (sesuai logo) */
.btn-amber{background:linear-gradient(135deg,#ecd06e,#c9982b)}
.btn-amber:hover{background:#f0d572;color:#1a1200}
header.site{border-bottom:2px solid var(--amber)}
footer{border-top:3px solid var(--amber)}

.arrow:hover,.dots button.on{background:var(--amber)}

/* ===== TEMA PUTIH (semua latar terang, aksen emas) ===== */

.lang button{color:var(--muted)}
.lang button.on{color:var(--ink)}

.hero{background:#fff;color:var(--ink)}
.slide{background:linear-gradient(100deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,.35) 100%),var(--art)}

.slide p{color:var(--muted)}
.dots button{background:rgba(20,20,20,.22)}
.dots button.on{background:var(--amber)}
.arrow{background:rgba(20,20,20,.08);color:var(--ink)}
.arrow:hover{background:var(--amber);color:#1a1200}

/* footer hitam dengan aksen emas */
footer{background:#0f0f0f;color:#c9c5b8}
footer h4{color:#fff}
footer a:hover{color:#ecd06e}
.fbot{border-top-color:rgba(255,255,255,.14)}

/* ===== slider gambar (responsif, gambar tidak terpotong) ===== */
.hero{width:100%;margin:0;padding:0;border-radius:0;overflow:hidden;box-shadow:none;background:#0c0c0c}
.slide.pic{display:block;max-height:500px;background:#0c0c0c}
.hero .slides{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1);will-change:transform}
.slide.pic{flex:0 0 100%;min-width:0;opacity:1;visibility:visible;transition:none}
@media (prefers-reduced-motion:reduce){.hero .slides{transition:none!important}}
.slide.pic picture{display:block}
.slide.pic img{display:block;width:100%;height:100%;aspect-ratio:auto;max-height:none;min-height:0;object-fit:cover;object-position:center}
.hero .arrow{width:40px;height:40px;font-size:18px;background:rgba(0,0,0,.14);color:rgba(255,255,255,.8);backdrop-filter:blur(2px);transition:background .2s,color .2s}
.hero .arrow:hover,.hero .arrow:active,.hero .arrow:focus{background:rgba(0,0,0,.14);color:rgba(255,255,255,.8);outline:none}
.hero .dots{display:none}
.hero .dots button{width:28px;height:4px;background:rgba(255,255,255,.75);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hero .dots button.on{background:var(--amber)}
@media (max-width:1000px){
  .hero{width:100%}
}
/* Slider di HP: selebar layar, gambar tampil UTUH (tidak dipotong), tinggi mengikuti gambar */
@media (max-width:640px){
  .hero{width:100%;margin:0;border-radius:0;transition:height .35s ease}
  .hero .slides{align-items:flex-start}
  .slide.pic{min-height:0;max-height:none}
  .slide.pic img{height:auto;object-fit:contain}
  .hero .arrow{display:block;width:34px;height:34px;font-size:16px}
  .hero .arrow.p{left:6px}
  .hero .arrow.n{right:6px}
  .hero .dots{display:flex;bottom:8px}
  .hero .dots button{width:22px}
}

/* ===== mobile drawer ===== */
.drawer{position:fixed;inset:0;background:var(--bg);z-index:80;padding:calc(20px + env(safe-area-inset-top,0px)) 24px 24px;overflow:auto;display:none}
.drawer.open{display:block}
.drawer .x{float:right;background:none;border:1px solid var(--line);border-radius:6px;width:42px;height:42px;font-size:20px;color:var(--ink);cursor:pointer}
.drawer nav{clear:both;padding-top:14px}
.drawer nav a,.drawer summary{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;cursor:pointer;color:var(--ink)}
.drawer details a{padding-left:16px;font-weight:400;color:var(--muted)}
.drawer details a:hover{color:var(--ink)}

/* ===== Topbar: search + pilihan bahasa ===== */
.tools{display:flex;align-items:center;gap:14px;margin-left:8px}
.search{display:grid;place-items:center;transition:background .2s,border-color .2s}
.search:hover,.search[aria-expanded="true"]{background:var(--bg-alt);border-color:var(--amber)}
.ssearch{position:relative}
.spanel{position:absolute;right:0;top:calc(100% + 14px);width:min(380px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:0 0 8px 8px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:12px;display:none;z-index:70}
.spanel.open{display:block}
.spanel input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px}
.spanel input:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber)}
.sres{list-style:none;margin:0;padding:0}
.sres:not(:empty){margin-top:8px;max-height:320px;overflow:auto}
.sres a{display:block;padding:9px 12px;border-radius:6px}
.sres a:hover,.sres a:focus-visible{background:var(--bg-alt)}
.sres b{display:block;font:600 14.5px var(--bf)}
.sres span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.sres .none{padding:10px 12px;font-size:14px;color:var(--muted)}
.lang{display:flex;gap:8px;align-items:center}
.nav .lang button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;opacity:.55;transition:opacity .2s,box-shadow .2s,border-color .2s}
.nav .lang button:hover{opacity:1}
.nav .lang button.on{opacity:1;border-color:var(--amber);box-shadow:0 0 0 2px rgba(212,167,44,.35)}
@media (max-width:1000px){
  .tools{margin-left:auto}
  .burger{margin-left:0}
}
@media (max-width:640px){
  .nav{gap:10px}
  .tools{gap:10px}
  .brand{min-width:0}
  .brand-shield{height:38px}
  .brand-text{height:32px;max-width:36vw}
  .nav .lang button{width:32px;height:32px}
  .spanel{position:fixed;left:16px;right:16px;top:calc(72px + env(safe-area-inset-top,0px));width:auto;border-radius:0 0 8px 8px}
}

/* ===== Topbar (hanya index.html: <header class="site center">) =====
   Kiri   : logo AJS (mepet pojok kiri)
   Tengah : logo teks PT. Aloma Jaya Sejahtera (atas) + menu (bawah), satu bingkai menyatu
   Kanan  : search + bendera bahasa
   Ukuran: --ajs-h = tinggi logo kiri (logoAloma.png), --text-h = tinggi logo teks */
.site.center{--ajs-h:88px;--text-h:56px}
html{scroll-padding-top:calc(112px + env(safe-area-inset-top,0px))}
/* satu bingkai menyatu (tanpa garis pemisah):
   baris 1 = logo teks di tengah, baris 2 = menu di tengah,
   search + bahasa di pojok kanan (tengah vertikal) */
.site.center .nav{
  width:100%;max-width:none;margin:0;padding:0 14px;
  display:grid;grid-template-columns:1fr auto 1fr;
  grid-template-areas:"ajs brand tools" "ajs menu tools";
  height:auto;column-gap:16px;row-gap:0;align-items:center}
.site.center .brand-ajs{grid-area:ajs;justify-self:start;align-self:center;display:block;padding:4px 0;line-height:0}
.site.center .brand{grid-area:brand;justify-self:center;min-width:0;padding:6px 0 0;gap:0;line-height:0}
.site.center .brand-shield{height:var(--ajs-h);width:auto;display:block}
.site.center .brand-text{height:var(--text-h);width:auto;max-width:min(560px,52vw);display:block}
.site.center .tools{grid-area:tools;justify-self:end;align-self:center;margin:0}
.site.center .menu{grid-area:menu;justify-content:center;margin:0;gap:4px;border-top:0}
.site.center .menu>li>a,.site.center .menu>li>button{padding:10px 16px}
.site.center .burger{grid-area:burger}
@media (max-width:1000px){
  html{scroll-padding-top:calc(70px + env(safe-area-inset-top,0px))}
  .site.center{--ajs-h:44px;--text-h:44px}
  .site.center .nav{padding:0 10px;grid-template-columns:auto 1fr auto auto;grid-template-areas:"ajs brand tools burger";column-gap:10px}
  .site.center .burger{justify-self:end;margin:0}
}
@media (max-width:640px){
  .site.center{--ajs-h:38px;--text-h:36px}
  .site.center .nav{column-gap:6px;padding:0 8px}
  .site.center .brand-text{max-width:100%}
  .site.center .tools{gap:6px}
  .site.center .search{width:32px;height:32px}
  .site.center .nav .lang{gap:5px}
  .site.center .nav .lang button{width:28px;height:28px}
  .site.center .burger{width:36px;height:36px;font-size:18px}
}

/* halaman/bagian yang sedang dibuka di menu */
.site.center .menu>li>a.cur,
.site.center .menu>li>button.cur{color:var(--amber)}

/* ===== Banner judul halaman: hitam + emas + putih ===== */
/* BANNER JUDUL HALAMAN (Produk & detail produk)
   Ganti gambar: timpa file assets/img/brand/banner.webp
   (atau ubah nama file di baris url(...) di bawah). Angka .55 = gelap lapisan (0-1). */
.phead{
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../img/brand/banner.webp') center/cover no-repeat #0b0b0b;
  color:#fff;border-bottom:4px solid var(--amber)}
/* tinggi banner (naikkan angka tengah untuk memperbesar) */
.phead{min-height:clamp(240px,26vw,360px);display:flex;align-items:center}
.phead>.wrap{width:100%}
.phead h1{color:#fff}
.phead p{color:#d6d2c5}

/* ===== Tipografi modern: Plus Jakarta Sans (judul) + Inter (isi) ===== */
body{font-size:16px;line-height:1.7;font-optical-sizing:auto;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.022em;line-height:1.18}
h1{font-weight:800;letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.03em}
h3{letter-spacing:-.015em}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.sec-head p,.tmain>p,.phead p{font-size:1.05rem;line-height:1.7}
.menu>li>a,.menu>li>button{font-weight:600;letter-spacing:.005em}
.btn{font-weight:600;letter-spacing:.01em}
.more{letter-spacing:.005em}

footer h4{font-weight:700;letter-spacing:0}