/* Tampilan menu: bentuk, dimensi (2D/3D), gaya. Kelas dipasang di <body> (halaman depan) atau pembungkus pratinjau (admin). */
.kb-skin { --hxw: 104px; --kb-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --kb-okt: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%); }
@media (max-width: 575.98px) { .kb-skin { --hxw: min(96px, 27vw); } }

/* warna aksen mengikuti tema langit */
.kb-skin .kb-m, .kb-skin .kb-t { --kb-ac: var(--clr); }
.kb-skin.sunrise .kb-m, .kb-skin.sunrise .kb-t { --kb-ac: var(--clr3); }
.kb-skin.siang .kb-m, .kb-skin.siang .kb-t { --kb-ac: var(--clr2); }
.kb-skin.sunset .kb-m, .kb-skin.sunset .kb-t { --kb-ac: var(--clr4); }
.kb-skin .kb-shp, .kb-skin .kb-shp:hover { border: 0 !important; }
.kb-skin .kb-shp { transition: transform .35s ease, filter .35s ease, background .35s ease !important; }

/* ===== BENTUK: menu utama ===== */
.kb-skin.kb-b-kotak .kb-shp:not(.kb-wide) { border-radius: 4px !important; }
.kb-skin.kb-b-kotak .kb-shp.kb-wide { border-radius: 4px !important; }
.kb-skin.kb-b-bulat .kb-shp:not(.kb-wide) { border-radius: 50% !important; }
.kb-skin.kb-b-bulat .kb-shp.kb-wide { border-radius: 999px !important; }
.kb-skin.kb-b-heksagon .kb-shp:not(.kb-wide), .kb-skin.kb-b-lebah .kb-shp:not(.kb-wide) {
  clip-path: var(--kb-hex); border-radius: 0 !important; width: var(--hxw) !important; height: auto !important; aspect-ratio: 1.1547; }
.kb-skin.kb-b-heksagon .kb-shp.kb-wide, .kb-skin.kb-b-lebah .kb-shp.kb-wide {
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%); border-radius: 0 !important; }
.kb-skin.kb-b-potong .kb-shp:not(.kb-wide) { clip-path: var(--kb-okt); border-radius: 0 !important; }
.kb-skin.kb-b-potong .kb-shp.kb-wide { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); border-radius: 0 !important; }
.kb-skin .kb-shp::before { border-radius: inherit; }
.kb-skin.kb-b-heksagon .kb-shp.kb-wide::before, .kb-skin.kb-b-lebah .kb-shp.kb-wide::before { display: none; }

/* sarang lebah: heksagon atas datar, tersusun rapat (kolom ganjil turun setengah). Segi enam biasa berjejer rapi di baris lurus. */
.kb-skin.kb-b-lebah { --hg: 5px; --hxw: 118px; --hcol: var(--kb-cols, 5);
  --hpx: calc(var(--hxw) * .75 + var(--hg) * .866); --hpy: calc(var(--hxw) * .866 + var(--hg)); }
.kb-skin.kb-b-lebah #kb-menu .kb-grid{ display: grid; grid-template-columns: repeat(var(--hcol), var(--hpx)); grid-auto-rows: var(--hpy); gap: 0;
  justify-content: start; width: calc(var(--hpx) * var(--hcol) + var(--hxw) * .25 - var(--hg) * .866); max-width: 100%; margin-inline: auto; padding-bottom: calc(var(--hpy) / 2); }
.kb-skin.kb-b-lebah .kb-m{ justify-content: flex-start; align-items: flex-start; width: var(--hxw); height: var(--hpy); justify-self: start; }
.kb-skin.kb-b-lebah .kb-m[data-o="1"]{ transform: translateY(calc(var(--hpy) / 2)); }
.kb-skin.kb-b-lebah .kb-m .text-center{ padding-top: 0 !important; }
@media (min-width: 576px) and (max-width: 700px) { .kb-skin.kb-b-lebah { --hcol: min(var(--kb-cols, 5), 3); } }
@media (max-width: 575.98px) { .kb-skin.kb-b-lebah { --hcol: var(--kb-cols-hp, 3); --hxw: min(112px, calc((100vw - 2 * var(--kb-pad, 12px)) / (var(--hcol) * .75 + .25))); } }

.kb-skin.kb-b-heksagon { --hxw: 112px; --hcol: var(--kb-cols, 5); --hgp: 6px; }
.kb-skin.kb-b-heksagon #kb-menu .kb-grid { display: grid; grid-template-columns: repeat(var(--hcol), var(--hxw)); gap: var(--hgp); justify-content: center; }
.kb-skin.kb-b-heksagon .kb-m { align-items: center; justify-content: center; width: var(--hxw); }
@media (min-width: 576px) and (max-width: 700px) { .kb-skin.kb-b-heksagon { --hcol: min(var(--kb-cols, 5), 3); } }
@media (max-width: 575.98px) { .kb-skin.kb-b-heksagon { --hcol: var(--kb-cols-hp, 3); --hgp: 5px; --hxw: min(112px, calc((100vw - 2 * var(--kb-pad, 12px) - (var(--hcol) - 1) * 5px) / var(--hcol))); } }

/* ===== GAYA ===== */
/* kaca: kaca asap (frosted) agar tetap terbaca sebagai kaca di langit terang maupun gelap */
.kb-skin.kb-g-kaca .kb-shp { background: linear-gradient(145deg, rgba(255,255,255,.36), rgba(255,255,255,.07) 58%), rgba(24,44,76,.24) !important;
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -10px 18px rgba(0,0,0,.10) !important; }
.kb-skin.kb-g-kaca .kb-shp:hover { background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.12) 58%), rgba(24,44,76,.30) !important; }

/* neon: panel gelap dengan garis tepi bercahaya mengikuti bentuk */
.kb-skin.kb-g-neon .kb-shp { background: rgba(4,12,26,.66) !important; }
.kb-skin.kb-g-neon .kb-m, .kb-skin.kb-g-neon .kb-t {
  filter: drop-shadow(1px 0 0 var(--kb-ac)) drop-shadow(-1px 0 0 var(--kb-ac)) drop-shadow(0 1px 0 var(--kb-ac)) drop-shadow(0 -1px 0 var(--kb-ac))
          drop-shadow(0 0 7px var(--kb-ac)); }
.kb-skin.kb-g-neon .kb-m:hover, .kb-skin.kb-g-neon .kb-t:hover { filter: drop-shadow(1px 0 0 var(--kb-ac)) drop-shadow(-1px 0 0 var(--kb-ac)) drop-shadow(0 1px 0 var(--kb-ac)) drop-shadow(0 -1px 0 var(--kb-ac)) drop-shadow(0 0 14px var(--kb-ac)); }

/* tech: panel HUD dengan kisi halus dan siku sudut */
.kb-skin.kb-g-tech .kb-shp { background-color: rgba(5,20,42,.78) !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background-image:
    linear-gradient(var(--kb-ac), var(--kb-ac)), linear-gradient(var(--kb-ac), var(--kb-ac)),
    linear-gradient(var(--kb-ac), var(--kb-ac)), linear-gradient(var(--kb-ac), var(--kb-ac)),
    linear-gradient(var(--kb-ac), var(--kb-ac)), linear-gradient(var(--kb-ac), var(--kb-ac)),
    linear-gradient(var(--kb-ac), var(--kb-ac)), linear-gradient(var(--kb-ac), var(--kb-ac)),
    linear-gradient(rgba(120,200,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(120,200,255,.07) 1px, transparent 1px) !important;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 12px 12px, 12px 12px !important;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat !important; }
.kb-skin.kb-g-tech .kb-m, .kb-skin.kb-g-tech .kb-t { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--kb-ac) 80%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--kb-ac) 45%, transparent)); }
.kb-skin.kb-g-tech .kb-shp p { text-transform: uppercase; letter-spacing: .06em; font-size: 11px !important; }
.kb-skin.kb-g-tech .kb-shp h5 { text-transform: uppercase; letter-spacing: .05em; }
.kb-skin.kb-g-tech .kb-shp:hover { background-color: rgba(10,40,78,.88) !important; }

/* gradien */
.kb-skin.kb-g-gradien .kb-shp { background: linear-gradient(135deg, var(--kb-ac), color-mix(in srgb, var(--kb-ac) 35%, #6a4cff)) !important; }

/* warna isi pada gaya gelap/berwarna */
.kb-skin.kb-g-neon .kb-shp p, .kb-skin.kb-g-tech .kb-shp p, .kb-skin.kb-g-gradien .kb-shp p,
.kb-skin.kb-g-neon .kb-shp h5, .kb-skin.kb-g-tech .kb-shp h5, .kb-skin.kb-g-gradien .kb-shp h5, .kb-skin.kb-g-kaca .kb-shp p, .kb-skin.kb-g-kaca .kb-shp h5 { color: #fff !important; }
.kb-skin.kb-g-neon .kb-shp .a_menu, .kb-skin.kb-g-tech .kb-shp .a_menu,
.kb-skin.kb-g-neon .kb-shp .icon_tombol, .kb-skin.kb-g-tech .kb-shp .icon_tombol { color: color-mix(in srgb, var(--kb-ac) 55%, #fff) !important; }
.kb-skin.kb-g-gradien .kb-shp .a_menu, .kb-skin.kb-g-gradien .kb-shp .icon_tombol,
.kb-skin.kb-g-kaca .kb-shp .a_menu, .kb-skin.kb-g-kaca .kb-shp .icon_tombol { color: #fff !important; }
.kb-skin.kb-g-gradien .kb-shp svg, .kb-skin.kb-g-kaca .kb-shp svg { fill: currentColor; }
.kb-skin.kb-g-neon .kb-shp svg, .kb-skin.kb-g-tech .kb-shp svg { fill: currentColor; }

/* ===== DIMENSI 3D ===== */
.kb-skin.kb-d-3d .kb-shp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,255,255,.06) 42%, rgba(0,0,0,.22)) !important; z-index: 1; }
.kb-skin.kb-d-3d .kb-shp .a_menu, .kb-skin.kb-d-3d .kb-shp .content_tombol { position: relative; z-index: 5; }
.kb-skin.kb-d-3d .kb-m, .kb-skin.kb-d-3d .kb-t { perspective: 500px; }
.kb-skin.kb-d-3d:not(.kb-g-neon):not(.kb-g-tech):not(.kb-g-kaca) .kb-m,
.kb-skin.kb-d-3d:not(.kb-g-neon):not(.kb-g-tech):not(.kb-g-kaca) .kb-t {
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.30)) drop-shadow(0 12px 10px rgba(0,0,0,.28)); }
.kb-skin.kb-d-3d.kb-g-neon .kb-m, .kb-skin.kb-d-3d.kb-g-neon .kb-t {
  filter: drop-shadow(1px 0 0 var(--kb-ac)) drop-shadow(-1px 0 0 var(--kb-ac)) drop-shadow(0 1px 0 var(--kb-ac)) drop-shadow(0 -1px 0 var(--kb-ac)) drop-shadow(0 6px 0 rgba(0,0,0,.45)) drop-shadow(0 0 8px var(--kb-ac)); }
.kb-skin.kb-d-3d.kb-g-tech .kb-m, .kb-skin.kb-d-3d.kb-g-tech .kb-t {
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--kb-ac) 80%, transparent)) drop-shadow(0 6px 0 rgba(0,0,0,.45)) drop-shadow(0 12px 10px rgba(0,0,0,.3)); }
.kb-skin.kb-d-3d.kb-g-kaca .kb-shp { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65), inset 0 3px 0 rgba(255,255,255,.75), inset 0 -4px 0 rgba(255,255,255,.22), inset 0 10px 18px rgba(255,255,255,.18), 0 10px 22px rgba(0,30,60,.28) !important; }
.kb-skin.kb-d-3d.kb-g-kaca .kb-shp::after { background: linear-gradient(160deg, rgba(255,255,255,.46), rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.14) 100%) !important; }
.kb-skin.kb-d-3d .kb-shp:hover { transform: rotateX(10deg) rotateY(-10deg) translateY(-6px) scale(1.04) !important; }
.kb-skin.kb-d-3d .kb-shp.kb-wide:hover { transform: rotateX(8deg) translateY(-4px) !important; }
.kb-skin.kb-d-3d .kb-shp:active { transform: translateY(3px) scale(.98) !important; }


/* ===== GAYA HOLOGRAM ===== */
@property --kbg { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes kbGHolo { 0% { background-position: 160% 0, 0 0, 0 0; } 100% { background-position: -60% 0, 0 0, 0 0; } }

/* holo: kaca iridesen dengan kilau yang bergerak pelan */
.kb-skin.kb-g-holo .kb-shp {
  background-color: rgba(8,16,48,.40) !important;
  background-image: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%),
    linear-gradient(135deg, rgba(60,240,255,.55), rgba(130,100,255,.50) 50%, rgba(255,90,210,.48)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px) !important;
  background-size: 260% 100%, 100% 100%, 100% 100% !important; background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: 160% 0, 0 0, 0 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 22px rgba(120,230,255,.28) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.6); backdrop-filter: blur(8px) saturate(1.6);
  animation: kbGHolo 5.5s ease-in-out infinite; }
.kb-skin.kb-g-holo .kb-shp:hover { background-color: rgba(20,34,74,.6) !important; }

/* warna isi untuk gaya hologram */
.kb-skin.kb-g-holo .kb-shp p, .kb-skin.kb-g-holo .kb-shp h5 { color: #fff !important; text-shadow: none !important; }
.kb-skin.kb-g-holo .kb-shp .a_menu, .kb-skin.kb-g-holo .kb-shp .icon_tombol { color: #fff !important; }
.kb-skin.kb-g-holo .kb-shp svg { fill: currentColor; }

/* ===== BENTUK MODERN: squircle, lengkung, daun, sudut miring, tiket ===== */
.kb-skin.kb-b-squircle .kb-shp:not(.kb-wide) { border-radius: 34% !important; }
.kb-skin.kb-b-squircle .kb-shp.kb-wide { border-radius: 24px !important; }
.kb-skin.kb-b-lengkung .kb-shp:not(.kb-wide) { border-radius: 50% 50% 16% 16% / 44% 44% 16% 16% !important; }
.kb-skin.kb-b-lengkung .kb-shp.kb-wide { border-radius: 30px 30px 10px 10px !important; }
.kb-skin.kb-b-daun .kb-shp:not(.kb-wide) { border-radius: 52% 10% 52% 10% !important; }
.kb-skin.kb-b-daun .kb-shp.kb-wide { border-radius: 30px 8px 30px 8px !important; }
.kb-skin.kb-b-miring .kb-shp:not(.kb-wide) { clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%); border-radius: 0 !important; }
.kb-skin.kb-b-miring .kb-shp.kb-wide { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); border-radius: 0 !important; }
.kb-skin.kb-b-tiket .kb-shp { border-radius: 14px !important;
  -webkit-mask: radial-gradient(circle 8px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 8px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.kb-skin.kb-b-tiket .kb-shp.kb-wide { border-radius: 12px !important; }

/* ===== GAYA ELEGAN: emas, porselen, garis, pastel, satin ===== */
.kb-skin.kb-g-emas .kb-shp { --gs: inset 0 0 0 1px rgba(228,194,126,.8), inset 0 0 0 5px rgba(0,0,0,0), inset 0 0 0 6px rgba(228,194,126,.28); --gt: #f7e9c8; --gi: #e8c47a; --gl: 0 8px 20px rgba(0,0,0,.28); }
.kb-skin.kb-g-emas .kb-shp { background: linear-gradient(160deg, rgba(38,31,22,.86), rgba(17,13,9,.9)) !important; box-shadow: var(--gs), var(--gl) !important; }
.kb-skin.kb-g-emas .kb-shp:hover { background: linear-gradient(160deg, rgba(52,43,30,.9), rgba(24,18,12,.92)) !important; }
.kb-skin.kb-g-porselen .kb-shp { --gs: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7); --gt: #1f3448; --gi: color-mix(in srgb, var(--kb-ac) 78%, #000); --gl: 0 6px 16px rgba(20,40,70,.2); }
.kb-skin.kb-g-porselen .kb-shp { background-color: #f3f6f9 !important; background-image: linear-gradient(160deg, #fff, #e9eef3), linear-gradient(var(--kb-ac), var(--kb-ac)) !important;
  background-size: 100% 100%, 38% 3px !important; background-position: 0 0, 50% calc(100% - 7px) !important; background-repeat: no-repeat !important; box-shadow: var(--gs), var(--gl) !important; }
.kb-skin.kb-g-porselen .kb-shp:hover { background-image: linear-gradient(160deg, #fff, #f6f9fc), linear-gradient(var(--kb-ac), var(--kb-ac)) !important; }
.kb-skin.kb-g-garis .kb-shp { --gs: inset 0 0 0 1.5px color-mix(in srgb, var(--kb-ac) 65%, #fff); --gt: #fff; --gi: color-mix(in srgb, var(--kb-ac) 40%, #fff); --gl: 0 4px 14px rgba(0,0,0,.18); }
.kb-skin.kb-g-garis .kb-shp { background: rgba(10,26,46,.34) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: var(--gs), var(--gl) !important; }
.kb-skin.kb-g-garis .kb-shp:hover { background: color-mix(in srgb, var(--kb-ac) 32%, rgba(10,26,46,.5)) !important; }
.kb-skin.kb-g-pastel .kb-shp { --gs: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55); --gt: color-mix(in srgb, var(--kb-ac) 40%, #14202e); --gi: color-mix(in srgb, var(--kb-ac) 75%, #000); --gl: 0 8px 18px color-mix(in srgb, var(--kb-ac) 28%, transparent); }
.kb-skin.kb-g-pastel .kb-shp { background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--kb-ac) 26%, #fff)) !important; box-shadow: var(--gs), var(--gl) !important; }
.kb-skin.kb-g-pastel .kb-shp:hover { background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--kb-ac) 38%, #fff)) !important; }
.kb-skin.kb-g-satin .kb-shp { --gs: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22); --gt: #eef3f9; --gi: color-mix(in srgb, var(--kb-ac) 55%, #fff); --gl: 0 8px 20px rgba(0,0,0,.3); }
.kb-skin.kb-g-satin .kb-shp { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.11) 50%, transparent 62%), linear-gradient(135deg, rgba(44,52,68,.9), rgba(17,21,31,.94)) !important; box-shadow: var(--gs), var(--gl) !important; }
.kb-skin.kb-g-satin .kb-shp:hover { background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 50%, transparent 66%), linear-gradient(135deg, rgba(54,63,82,.92), rgba(24,29,42,.95)) !important; }
.kb-skin.kb-d-3d:is(.kb-g-emas, .kb-g-porselen, .kb-g-garis, .kb-g-pastel, .kb-g-satin) .kb-shp { box-shadow: var(--gs), 0 5px 0 rgba(0,0,0,.28), 0 12px 10px rgba(0,0,0,.22) !important; }
.kb-skin:is(.kb-g-emas, .kb-g-porselen, .kb-g-garis, .kb-g-pastel, .kb-g-satin) .kb-shp p,
.kb-skin:is(.kb-g-emas, .kb-g-porselen, .kb-g-garis, .kb-g-pastel, .kb-g-satin) .kb-shp h5 { color: var(--gt) !important; text-shadow: none !important; letter-spacing: .02em; }
.kb-skin:is(.kb-g-emas, .kb-g-porselen, .kb-g-garis, .kb-g-pastel, .kb-g-satin) .kb-shp .a_menu,
.kb-skin:is(.kb-g-emas, .kb-g-porselen, .kb-g-garis, .kb-g-pastel, .kb-g-satin) .kb-shp .icon_tombol { color: var(--gi) !important; }
.kb-skin:is(.kb-g-emas, .kb-g-porselen, .kb-g-garis, .kb-g-pastel, .kb-g-satin) .kb-shp svg { fill: currentColor; }

/* animasi gaya berhenti bila pengunjung memilih kurangi gerakan */
@media (prefers-reduced-motion: reduce) { .kb-skin[class*="kb-g-"] .kb-shp { animation: none !important; } }
html.kb-a-diam .kb-skin[class*="kb-g-"] .kb-shp { animation: none !important; }

/* kaca mengikuti skema widget (jadwal salat dan kalender): terang di tema terang, gelap di tema malam, tulisan kontras */
.kb-skin.kb-g-kaca { --kc-bg: rgba(255,255,255,.52); --kc-fg: #123; --kc-edge: rgba(255,255,255,.75); --kc-hi: rgba(255,255,255,.55); }
.kb-skin.kb-g-kaca.sunset { --kc-bg: rgba(255,255,255,.42); --kc-fg: #3a1a05; }
.kb-skin.kb-g-kaca.dark { --kc-bg: rgba(12,30,52,.62); --kc-fg: #eaf3ff; --kc-edge: rgba(255,255,255,.28); --kc-hi: rgba(255,255,255,.16); }
.kb-skin.kb-g-kaca .kb-shp { background: linear-gradient(145deg, var(--kc-hi), rgba(255,255,255,0) 60%), var(--kc-bg) !important;
  box-shadow: inset 0 0 0 1.5px var(--kc-edge), inset 0 1px 0 var(--kc-edge) !important; }
.kb-skin.kb-g-kaca .kb-shp:hover { background: linear-gradient(145deg, var(--kc-hi), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--kc-bg) 82%, #fff) !important; }
.kb-skin.kb-g-kaca.dark .kb-shp:hover { background: linear-gradient(145deg, var(--kc-hi), rgba(255,255,255,0) 60%), rgba(24,52,86,.72) !important; }
.kb-skin.kb-g-kaca .kb-shp p, .kb-skin.kb-g-kaca .kb-shp h5, .kb-skin.kb-g-kaca .kb-shp .a_menu, .kb-skin.kb-g-kaca .kb-shp .icon_tombol { color: var(--kc-fg) !important; }
.kb-skin.kb-d-3d.kb-g-kaca .kb-shp { box-shadow: inset 0 0 0 1.5px var(--kc-edge), inset 0 3px 0 var(--kc-edge), inset 0 -4px 0 rgba(255,255,255,.12), 0 10px 22px rgba(0,20,40,.26) !important; }
.kb-skin.kb-d-3d.kb-g-kaca .kb-shp::after { background: linear-gradient(160deg, var(--kc-hi), rgba(255,255,255,0) 55%) !important; }


/* segi enam dan sarang lebah: tulisan lebih kecil dan fleksibel mengikuti ukuran sel */
.kb-skin:is(.kb-b-heksagon, .kb-b-lebah) .kb-m .a_menu p { font-size: clamp(9.5px, calc(var(--hxw) * .093), 11.5px) !important; line-height: 1.2; }
.kb-skin:is(.kb-b-heksagon, .kb-b-lebah) .kb-m .a_menu svg { width: clamp(22px, calc(var(--hxw) * .25), 28px); height: clamp(22px, calc(var(--hxw) * .25), 28px); }
.kb-skin:is(.kb-b-heksagon, .kb-b-lebah) .kb-m .a_menu { padding: 0 !important; max-width: 78%; }

/* desktop: segi enam melebar sampai sejajar dengan tepi tombol atas (lebar 624px) */
@media (min-width: 701px) { .kb-skin.kb-b-heksagon { --hxw: calc((624px - (var(--hcol) - 1) * var(--hgp)) / var(--hcol)); } }
@media (min-width: 701px) { .kb-skin:is(.kb-b-heksagon, .kb-b-lebah) .kb-m .a_menu p { font-size: 12.5px !important; } .kb-skin:is(.kb-b-heksagon, .kb-b-lebah) .kb-m .a_menu svg { width: 28px; height: 28px; } }
/* tablet kecil (576-700px): kolom penuh seperti desktop, segi enam mengisi lebar tombol atas */
@media (min-width: 576px) and (max-width: 700px) { .kb-skin.kb-b-heksagon { --hcol: var(--kb-cols, 5); --hxw: calc((100vw - 2 * var(--kb-pad, 12px) - (var(--hcol) - 1) * var(--hgp)) / var(--hcol)); }
  .kb-skin:is(.kb-b-heksagon, .kb-b-lebah) .kb-m .a_menu p { font-size: 11px !important; } }
/* sarang lebah di tablet: melebar mengikuti lebar tombol atas */
@media (min-width: 576px) and (max-width: 999.98px) {
  .kb-skin.kb-b-lebah { --hcol: var(--kb-cols, 5); --kw: min(624px, calc(100vw - 2 * var(--kb-pad, 12px)));
    --hxw: calc((var(--kw) - var(--hg) * .866 * (var(--hcol) - 1)) / (var(--hcol) * .75 + .25)); }
}
/* sarang lebah dan segi enam: lebar penuh sejajar tombol atas di semua layar */
@media (min-width: 1000px) { .kb-skin.kb-b-lebah { --hcol: var(--kb-cols, 5); --kw: 624px; --hxw: calc((var(--kw) - var(--hg) * .866 * (var(--hcol) - 1)) / (var(--hcol) * .75 + .25)); } }
@media (max-width: 575.98px) {
  .kb-skin.kb-b-lebah { --kw: calc(100vw - 2 * var(--kb-pad, 20px)); --hxw: calc((var(--kw) - var(--hg) * .866 * (var(--hcol) - 1)) / (var(--hcol) * .75 + .25)); }
  .kb-skin.kb-b-heksagon { --hxw: calc((100vw - 2 * var(--kb-pad, 20px) - (var(--hcol) - 1) * var(--hgp)) / var(--hcol)); }
}