<!-- DEBUG-VIEW START 5 APPPATH/Views/home/index.php -->
<!-- DEBUG-VIEW START 4 APPPATH/Views/front_layout/main.php -->
<!DOCTYPE html>
<html lang="id">

<head>
<script  id="debugbar_loader" data-time="1766918033.078121" src="https://bennisurbakti.com/?debugbar"></script><script  id="debugbar_dynamic_script"></script><style  id="debugbar_dynamic_style"></style><script class="kint-rich-script">"use strict";(()=>{function m(n){if(!(n instanceof Element))throw new Error("Invalid argument to dedupeElement()");let t=n.ownerDocument,e=E(n);for(let s of t.querySelectorAll(e))n!==s&&s.parentNode.removeChild(s)}function d(n){return n instanceof Element?n.ownerDocument.contains(n):!1}function E(n){if(!(n instanceof Element))throw new Error("Invalid argument to buildClassSelector()");return[n.nodeName,...n.classList].join(".")}function f(n){if(!(n instanceof Element))throw new Error("Invalid argument to selectText()");let t=n.ownerDocument,e=t.getSelection(),s=t.createRange();s.selectNodeContents(n),e.removeAllRanges(),e.addRange(s)}function I(n,t){let e;return function(...s){clearTimeout(e),e=setTimeout(function(){n(...s)},t)}}function x(n){if(!(n instanceof Element))throw new Error("Invalid argument to offsetTop()");return n.offsetTop+(n.offsetParent?x(n.offsetParent):0)}var u=class n{static#e=new Set;static toggleSearchBox(t,e){let s=t.querySelector(".kint-search"),i=t.parentNode;if(s)if(s.classList.toggle("kint-show",e)){if(s.focus(),s.select(),!n.#e.has(s)){let r=i.querySelectorAll("dl").length,o=200;r>1e4&&(o=700),s.addEventListener("keyup",I(n.#t.bind(null,s),o)),n.#e.add(s)}n.#t(s)}else i.classList.remove("kint-search-root")}static#t(t){let e=t.closest(".kint-parent")?.parentNode;if(e)if(t.classList.contains("kint-show")&&t.value.length){let s=e.dataset.lastSearch;if(e.classList.add("kint-search-root"),s!==t.value){e.dataset.lastSearch=t.value,e.classList.remove("kint-search-match");for(let i of e.querySelectorAll(".kint-search-match"))i.classList.remove("kint-search-match");n.#s(e,t.value.toUpperCase())}}else e.classList.remove("kint-search-root")}static#s(t,e){let s=t.cloneNode(!0);for(let c of s.querySelectorAll(".access-path"))c.remove();if(!s.textContent.toUpperCase().includes(e))return;t.classList.add("kint-search-match");let i=t.firstElementChild;for(;i&&i.tagName!=="DT";)i=i.nextElementSibling;if(!i)return;let r=a.getChildContainer(i);if(!r)return;let o,l;for(let c of r.children)c.tagName==="DL"?n.#s(c,e):c.tagName==="UL"&&(c.classList.contains("kint-tabs")?o=c.children:c.classList.contains("kint-tab-contents")&&(l=c.children));if(!(!o||o.length!==l?.length))for(let c=o.length;c--;){let k=!1,F=!1;o[c].textContent.toUpperCase().includes(e)&&(k=!0);let O=l[c].cloneNode(!0);for(let v of O.querySelectorAll(".access-path"))v.remove();if(O.textContent.toUpperCase().includes(e)&&(k=!0,F=!0),k&&o[c].classList.add("kint-search-match"),F)for(let v of l[c].children)v.tagName==="DL"&&n.#s(v,e)}}};var g=class{static sort(t,e){let s=t.dataset.kintTableSort,i=parseInt(s)===e?-1:1,r=t.tBodies[0];[...r.rows].sort(function(o,l){o=o.cells[e].textContent.trim().toLocaleLowerCase(),l=l.cells[e].textContent.trim().toLocaleLowerCase();let c=0;return!isNaN(o)&&!isNaN(l)?(o=parseFloat(o),l=parseFloat(l),c=o-l):isNaN(o)&&!isNaN(l)?c=1:isNaN(l)&&!isNaN(o)?c=-1:c=(""+o).localeCompare(""+l),c*i}).forEach(o=>r.appendChild(o)),i<0?t.dataset.kintTableSort=null:t.dataset.kintTableSort=e}};var a=class n{#e;#t;#s;constructor(t){if(!(t instanceof h))throw new Error("Invalid argument to Rich.constructor()");this.#e=t,this.#e.runOnInit(this.#i.bind(this));let e=new q(this,t);new b(this,t.window,e)}#i(){let t=this.#e.window.document;if(d(this.#t)||(this.#t=t.querySelector("style.kint-rich-style")),this.#t&&m(this.#t),t.querySelector(".kint-rich.kint-file")){this.setupFolder(t);let e=this.#s.querySelector("dd.kint-foldout"),s=Array.from(t.querySelectorAll(".kint-rich.kint-file"));for(let i of s)i.parentNode!==e&&e.appendChild(i);this.#s.classList.add("kint-show")}}addToFolder(t){let e=t.closest(".kint-rich");if(!e)throw new Error("Bad addToFolder");let s=this.#e.window.document;if(this.setupFolder(s),this.folder.contains(t))throw new Error("Bad addToFolder");let i=this.#s.querySelector("dd.kint-foldout"),r=t.closest(".kint-parent, .kint-rich"),o=Array.from(e.querySelectorAll(".kint-folder-trigger"));if(e===r||e.querySelectorAll(".kint-rich > dl").length===1){for(let l of o)l.remove();e.classList.add("kint-file"),i.insertBefore(e,i.firstChild)}else{let l=s.createElement("div");l.classList.add("kint-rich"),l.classList.add("kint-file"),l.appendChild(r.closest(".kint-rich > dl"));let c=e.lastElementChild;c.matches(".kint-rich > footer")&&l.appendChild(c.cloneNode(!0));for(let k of o)k.remove();i.insertBefore(l,i.firstChild)}n.toggle(this.#s.querySelector(".kint-parent"),!0)}setupFolder(t){if(this.#s)d(this.#s)||(this.#s=t.querySelector(".kint-rich.kint-folder"));else{let e=t.createElement("template");e.innerHTML='<div class="kint-rich kint-folder"><dl><dt class="kint-parent"><nav></nav>Kint</dt><dd class="kint-foldout"></dd></dl></div>',this.#s=e.content.firstChild,t.body.appendChild(this.#s)}}get folder(){return d(this.#s)||(this.#s=this.#e.window.document.querySelector(".kint-rich.kint-folder")),this.#s&&m(this.#s),this.#s}isFolderOpen(){let t=this.#s?.querySelector("dd.kint-foldout");if(t)return t.previousSibling.classList.contains("kint-show")}static getChildContainer(t){let e=t.nextElementSibling;for(;e&&!e.matches("dd");)e=e.nextElementSibling;return e}static toggle(t,e){let s=n.getChildContainer(t);s&&(e=t.classList.toggle("kint-show",e),n.#n(s,e))}static switchTab(t){t.parentNode.getElementsByClassName("kint-active-tab")[0].classList.remove("kint-active-tab"),t.classList.add("kint-active-tab");let e=t,s=0;for(;e=e.previousElementSibling;)s++;let i=t.parentNode.nextSibling.children;for(let r=i.length;r--;)r===s?(i[r].classList.add("kint-show"),n.#n(i[r],!0)):i[r].classList.remove("kint-show")}static toggleChildren(t,e){let s=n.getChildContainer(t);if(!s)return;e===void 0&&(e=t.classList.contains("kint-show"));let i=Array.from(s.getElementsByClassName("kint-parent"));for(let r of i)r.classList.toggle("kint-show",e)}static toggleAccessPath(t,e){let s=t.querySelector(".access-path");s?.classList.toggle("kint-show",e)&&f(s)}static#n(t,e){if(t.children.length===2&&t.lastElementChild.matches("ul.kint-tab-contents"))for(let s of t.lastElementChild.children)s.matches("li.kint-show")&&(t=s);if(t.children.length===1&&t.firstElementChild.matches("dl")){let s=t.firstElementChild.firstElementChild;s?.classList?.contains("kint-parent")&&n.toggle(s,e)}}},b=class{#e;#t;#s;#i=null;#n=null;#o=0;constructor(t,e,s){this.#e=t,this.#t=s,this.#s=e,this.#s.addEventListener("click",this.#a.bind(this),!0)}#r(){clearTimeout(this.#i),this.#i=setTimeout(this.#l.bind(this),250)}#l(){clearTimeout(this.#i),this.#i=null,this.#n=null,this.#o=0}#c(){let t=this.#n;if(!t.matches(".kint-parent > nav"))return;let e=t.parentNode;if(this.#o===1)a.toggleChildren(e),this.#t.onTreeChanged(),this.#r(),this.#o=2;else if(this.#o===2){this.#l();let s=e.classList.contains("kint-show"),i=this.#e.folder?.querySelector(".kint-parent"),r=Array.from(this.#s.document.getElementsByClassName("kint-parent"));for(let o of r)o!==i&&o.classList.toggle("kint-show",s);this.#t.onTreeChanged(),this.#t.scrollToFocus()}}#a(t){if(this.#o){this.#c();return}let e=t.target;if(!e.closest(".kint-rich"))return;if(e.tagName==="DFN"&&f(e),e.tagName==="TH"){t.ctrlKey||g.sort(e.closest("table"),e.cellIndex);return}if(e.tagName==="LI"&&e.parentNode.className==="kint-tabs"){if(e.className!=="kint-active-tab"){let i=e.closest("dl")?.querySelector(".kint-parent > nav")??e;a.switchTab(e),this.#t.onTreeChanged(),this.#t.setCursor(i)}return}let s=e.closest("dt");if(e.tagName==="NAV")e.parentNode.tagName==="FOOTER"?(this.#t.setCursor(e),e.parentNode.classList.toggle("kint-show")):s?.classList.contains("kint-parent")&&(a.toggle(s),this.#t.onTreeChanged(),this.#t.setCursor(e),this.#r(),this.#o=1,this.#n=e);else if(e.classList.contains("kint-access-path-trigger"))s&&a.toggleAccessPath(s);else if(e.classList.contains("kint-search-trigger"))s?.matches(".kint-rich > dl > dt.kint-parent")&&u.toggleSearchBox(s);else if(e.classList.contains("kint-folder-trigger")){if(s?.matches(".kint-rich > dl > dt.kint-parent"))this.#e.addToFolder(e),this.#t.onTreeChanged(),this.#t.setCursor(s.querySelector("nav")),this.#t.scrollToFocus();else if(e.parentNode.tagName==="FOOTER"){let i=e.closest(".kint-rich").querySelector(".kint-parent > nav, .kint-rich > footer > nav");this.#e.addToFolder(e),this.#t.onTreeChanged(),this.#t.setCursor(i),this.#t.scrollToFocus()}}else e.classList.contains("kint-search")||(e.tagName==="PRE"&&t.detail===3?f(e):e.closest(".kint-source")&&t.detail===3?f(e.closest(".kint-source")):e.classList.contains("access-path")?f(e):e.tagName!=="A"&&s?.classList.contains("kint-parent")&&(a.toggle(s),this.#t.onTreeChanged(),this.#t.setCursor(s.querySelector("nav"))))}},j=65,G=68,A=70,S=72,K=74,D=75,p=76,V=83,P=9,T=13,B=27,L=32,N=37,R=38,C=39,H=40,M=".kint-rich .kint-parent > nav, .kint-rich > footer > nav, .kint-rich .kint-tabs > li:not(.kint-active-tab)",q=class{#e=[];#t=0;#s=!1;#i;#n;constructor(t,e){this.#i=t,this.#n=e.window,this.#n.addEventListener("keydown",this.#c.bind(this),!0),e.runOnInit(this.onTreeChanged.bind(this))}scrollToFocus(){let t=this.#e[this.#t];if(!t)return;let e=this.#i.folder;if(t===e?.querySelector(".kint-parent > nav"))return;let s=x(t);if(this.#i.isFolderOpen()){let i=e.querySelector("dd.kint-foldout");i.scrollTo(0,s-i.clientHeight/2)}else this.#n.scrollTo(0,s-this.#n.innerHeight/2)}onTreeChanged(){let t=this.#e[this.#t];this.#e=[];let e=this.#i.folder,s=e?.querySelector(".kint-parent > nav"),i=this.#n.document;this.#i.isFolderOpen()&&(i=e,this.#e.push(s));let r=Array.from(i.querySelectorAll(M));for(let o of r)o.offsetParent!==null&&o!==s&&this.#e.push(o);if(s&&!this.#i.isFolderOpen()&&this.#e.push(s),this.#e.length===0){this.#s=!1,this.#r();return}t&&this.#e.indexOf(t)!==-1?this.#t=this.#e.indexOf(t):this.#r()}setCursor(t){if(this.#i.isFolderOpen()&&!this.#i.folder.contains(t)||!t.matches(M))return!1;let e=this.#e.indexOf(t);if(e===-1&&(this.onTreeChanged(),e=this.#e.indexOf(t)),e!==-1){if(e!==this.#t)return this.#t=e,this.#r(),!0;this.#e[e]?.classList.remove("kint-weak-focus")}else console.error("setCursor failed to find target in list",t),console.info("Please report this as a bug in Kint at https://github.com/kint-php/kint");return!1}#o(t){if(this.#e.length===0)return this.#t=0,null;for(this.#t+=t;this.#t<0;)this.#t+=this.#e.length;for(;this.#t>=this.#e.length;)this.#t-=this.#e.length;return this.#r(),this.#t}#r(){let t=this.#n.document.querySelector(".kint-focused");t&&(t.classList.remove("kint-focused"),t.classList.remove("kint-weak-focus")),this.#s&&this.#e[this.#t]?.classList.add("kint-focused")}#l(t){let e=t.closest(".kint-rich .kint-parent ~ dd")?.parentNode.querySelector(".kint-parent > nav");e&&(this.setCursor(e),this.scrollToFocus())}#c(t){if(this.#s&&t.keyCode===B&&t.target.matches(".kint-search")){t.target.blur(),this.#r();return}if(t.target!==this.#n.document.body||t.altKey||t.ctrlKey)return;if(t.keyCode===G){if(this.#s)this.#s=!1;else{if(this.#s=!0,this.onTreeChanged(),this.#e.length===0){this.#s=!1;return}this.scrollToFocus()}this.#r(),t.preventDefault();return}else if(t.keyCode===B){this.#s&&(this.#s=!1,this.#r(),t.preventDefault());return}else if(!this.#s)return;t.preventDefault(),d(this.#e[this.#t])||this.onTreeChanged();let e=this.#e[this.#t];if([P,R,D,H,K].includes(t.keyCode)){t.keyCode===P?this.#o(t.shiftKey?-1:1):t.keyCode===R||t.keyCode===D?this.#o(-1):(t.keyCode===H||t.keyCode===K)&&this.#o(1),this.scrollToFocus();return}if(e.tagName==="LI"&&[L,T,C,p,N,S].includes(t.keyCode)){t.keyCode===L||t.keyCode===T?(a.switchTab(e),this.onTreeChanged()):t.keyCode===C||t.keyCode===p?this.#o(1):(t.keyCode===N||t.keyCode===S)&&this.#o(-1),this.scrollToFocus();return}if(e.parentNode.tagName==="FOOTER"&&e.closest(".kint-rich")){if(t.keyCode===L||t.keyCode===T)e.parentNode.classList.toggle("kint-show");else if(t.keyCode===N||t.keyCode===S)if(e.parentNode.classList.contains("kint-show"))e.parentNode.classList.remove("kint-show");else{this.#l(e.closest(".kint-rich"));return}else if(t.keyCode===C||t.keyCode===p)e.parentNode.classList.add("kint-show");else if(t.keyCode===A&&!this.#i.isFolderOpen()&&e.matches(".kint-rich > footer > nav")){let i=e.closest(".kint-rich").querySelector(".kint-parent > nav, .kint-rich > footer > nav");this.#i.addToFolder(e),this.onTreeChanged(),this.setCursor(i),this.scrollToFocus()}return}let s=e.closest(".kint-parent");if(s){if(t.keyCode===j){a.toggleAccessPath(s);return}if(t.keyCode===A){!this.#i.isFolderOpen()&&s.matches(".kint-rich:not(.kint-folder) > dl > .kint-parent")&&(this.#i.addToFolder(e),this.onTreeChanged(),this.setCursor(e),this.scrollToFocus());return}if(t.keyCode===V){let i=s.closest(".kint-rich > dl")?.querySelector(".kint-search")?.closest(".kint-parent");if(i){e.classList.add("kint-weak-focus"),u.toggleSearchBox(i,!0);return}}if(t.keyCode===L||t.keyCode===T){a.toggle(s),this.onTreeChanged();return}if([C,p,N,S].includes(t.keyCode)){let i=s.classList.contains("kint-show");if(t.keyCode===C||t.keyCode===p){i&&a.toggleChildren(s,!0),a.toggle(s,!0),this.onTreeChanged();return}else if(i){a.toggleChildren(s,!1),a.toggle(s,!1),this.onTreeChanged();return}else{this.#l(s);return}}}}};var y=class{#e;#t;constructor(t){if(!(t instanceof h))throw new Error("Invalid argument to Plain.constructor()");this.#e=t.window,t.runOnInit(this.#s.bind(this))}#s(){d(this.#t)||(this.#t=this.#e.document.querySelector("style.kint-plain-style")),this.#t&&m(this.#t)}};var w=class{#e;constructor(t){if(!(t instanceof h))throw new Error("Invalid argument to Microtime.constructor()");this.#e=t.window,t.runOnInit(this.#t.bind(this))}#t(){let t={},e=this.#e.document.querySelectorAll("[data-kint-microtime-group]");for(let s of e){let i=s.querySelector(".kint-microtime-lap");if(!i)continue;let r=s.dataset.kintMicrotimeGroup,o=parseFloat(i.textContent),l=parseFloat(s.querySelector(".kint-microtime-avg").textContent);t[r]??={min:o,max:o,avg:l},t[r].min>o&&(t[r].min=o),t[r].max<o&&(t[r].max=o),t[r].avg=l}for(let s of e){let i=s.querySelector(".kint-microtime-lap");if(!i)continue;let r=parseFloat(i.textContent),o=t[s.dataset.kintMicrotimeGroup];if(s.querySelector(".kint-microtime-avg").textContent=o.avg,!(r===o.min&&r===o.max))if(s.classList.add("kint-microtime-js"),r>o.avg){let l=(r-o.avg)/(o.max-o.avg);i.style.background="hsl("+(40-40*l)+", 100%, 65%)"}else{let l=0;o.avg!==o.min&&(l=(o.avg-r)/(o.avg-o.min)),i.style.background="hsl("+(40+80*l)+", 100%, 65%)"}}}};var U=Symbol(),h=class n{static#e=null;#t;#s=[];#i=new Set;static init(t){return n.#e??=new n(t,U),n.#e.#n(),n.#e.runOnLoad(n.#r),n.#e}get window(){return this.#t}constructor(t,e){if(U!==e)throw new Error("Kint constructor is private. Use Kint.init()");if(!(t instanceof Window))throw new Error("Invalid argument to Kint.init()");this.#t=t,this.runOnInit(this.#o.bind(this)),new y(this),new a(this),new w(this)}runOnLoad(t){if(this.#t.document.readyState==="complete")try{t()}catch{}else this.#t.addEventListener("load",t)}runOnInit(t){this.#s.push(t)}#n(){this.#t.document.currentScript&&(this.#i.add(E(window.document.currentScript)),window.document.currentScript.remove())}#o(){for(let t of this.#i.keys())for(let e of this.#t.document.querySelectorAll(t))e.remove()}static#r(){for(let t of n.#e.#s)t()}};window.Kint||(window.Kint=h);window.Kint.init(window);})();
</script><style class="kint-rich-style">.kint-rich{--spacing: 4px;--nav-size: 15px;--backdrop-color: rgba(255, 255, 255, 0.9);--main-background: #e0eaef;--secondary-background: #c1d4df;--text-color: #1d1e1e;--variable-name-color: #1d1e1e;--variable-type-color: #0092db;--variable-type-color-hover: #5cb730;--border-color: #b6cedb;--border-color-hover: #0092db;--border: 1px solid var(--border-color);--foldout-max-size: calc(100vh - 100px);--foldout-zindex: 999999;--caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 150'><g stroke-width='2' fill='%23FFF'><path d='M1 1h28v28H1zm5 14h18m-9 9V6M1 61h28v28H1zm5 14h18' stroke='%23379'/><path d='M1 31h28v28H1zm5 14h18m-9 9V36M1 91h28v28H1zm5 14h18' stroke='%235A3'/><path d='M1 121h28v28H1zm5 5l18 18m-18 0l18-18' stroke='%23CCC'/></g></svg>");--ap-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g stroke='%23000' fill='transparent'><path d='M2 8h3m3 3v3M8 2v3m3 3h3M3 8' stroke-width='2' stroke-linecap='round'/><circle stroke-width='1.5' r='4.5' cx='8' cy='8'/></g></svg>");--folder-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2h4l2 2h6v9H2V2h2' stroke-width='2' stroke='%23000' fill='transparent' stroke-linejoin='round'/></svg>");--search-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g stroke='%23000' fill='transparent'><path d='M2 14l3-3' stroke-linecap='round' stroke-width='3'/><circle stroke-width='2' r='5' cx='9' cy='7'/></g></svg>");font-size:13px;overflow-x:auto;white-space:nowrap;background:var(--backdrop-color);direction:ltr;contain:content}.kint-rich.kint-folder{position:fixed;bottom:0;left:0;right:0;z-index:var(--foldout-zindex);width:100%;margin:0;display:block}.kint-rich.kint-folder dd.kint-foldout{max-height:var(--foldout-max-size);padding-right:calc(var(--spacing)*2);overflow-y:scroll;display:none}.kint-rich.kint-folder dd.kint-foldout.kint-show{display:block}.kint-rich::selection{background:var(--border-color-hover);color:var(--text-color)}.kint-rich .kint-focused{box-shadow:0 0 3px 3px var(--variable-type-color-hover)}.kint-rich .kint-focused.kint-weak-focus{box-shadow:0 0 3px 1px color-mix(in srgb, var(--variable-type-color-hover) 50%, transparent)}.kint-rich,.kint-rich::before,.kint-rich::after,.kint-rich *,.kint-rich *::before,.kint-rich *::after{box-sizing:border-box;border-radius:0;color:var(--text-color);float:none !important;font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;line-height:15px;margin:0;padding:0;text-align:left}.kint-rich{margin:calc(var(--spacing)*2) 0}.kint-rich dt,.kint-rich dl{width:auto}.kint-rich dt,.kint-rich div.access-path{background:var(--main-background);border:var(--border);color:var(--text-color);display:block;font-weight:bold;list-style:none outside none;overflow:auto;padding:var(--spacing)}.kint-rich dt:hover,.kint-rich div.access-path:hover{border-color:var(--border-color-hover)}.kint-rich>dl dl{padding:0 0 0 calc(var(--spacing)*3)}.kint-rich dt.kint-parent>nav,.kint-rich>footer>nav{background:var(--caret-image) no-repeat scroll 0 0/var(--nav-size) 75px rgba(0,0,0,0);cursor:pointer;display:inline-block;height:var(--nav-size);width:var(--nav-size);margin-right:3px;vertical-align:middle}.kint-rich dt.kint-parent:hover>nav,.kint-rich>footer>nav:hover{background-position:0 25%}.kint-rich dt.kint-parent.kint-show>nav,.kint-rich>footer.kint-show>nav{background-position:0 50%}.kint-rich dt.kint-parent.kint-show:hover>nav,.kint-rich>footer.kint-show>nav:hover{background-position:0 75%}.kint-rich dt.kint-parent.kint-locked>nav{background-position:0 100%}.kint-rich dt.kint-parent+dd{display:none;border-left:1px dashed var(--border-color);contain:strict}.kint-rich dt.kint-parent.kint-show+dd{display:block;contain:content}.kint-rich var,.kint-rich var a{color:var(--variable-type-color);font-style:normal}.kint-rich dt:hover var,.kint-rich dt:hover var a{color:var(--variable-type-color-hover)}.kint-rich dfn{font-style:normal;font-family:monospace;color:var(--variable-name-color)}.kint-rich pre{color:var(--text-color);margin:0 0 0 calc(var(--spacing)*3);padding:5px;overflow-y:hidden;border-top:0;border:var(--border);background:var(--main-background);display:block;word-break:normal}.kint-rich .kint-access-path-trigger,.kint-rich .kint-folder-trigger,.kint-rich .kint-search-trigger{background:color-mix(in srgb, var(--text-color) 80%, transparent);border-radius:3px;padding:2px;height:var(--nav-size);width:var(--nav-size);font-size:var(--nav-size);margin-left:5px;font-weight:bold;text-align:center;line-height:1;float:right !important;cursor:pointer;position:relative;overflow:hidden}.kint-rich .kint-access-path-trigger::before,.kint-rich .kint-folder-trigger::before,.kint-rich .kint-search-trigger::before{display:block;content:"";width:100%;height:100%;background:var(--main-background);mask:center/contain no-repeat alpha}.kint-rich .kint-access-path-trigger:hover,.kint-rich .kint-folder-trigger:hover,.kint-rich .kint-search-trigger:hover{background:var(--main-background)}.kint-rich .kint-access-path-trigger:hover::before,.kint-rich .kint-folder-trigger:hover::before,.kint-rich .kint-search-trigger:hover::before{background:var(--text-color)}.kint-rich .kint-access-path-trigger::before{mask-image:var(--ap-image)}.kint-rich .kint-folder-trigger::before{mask-image:var(--folder-image)}.kint-rich .kint-search-trigger::before{mask-image:var(--search-image)}.kint-rich input.kint-search{display:none;border:var(--border);border-top-width:0;border-bottom-width:0;padding:var(--spacing);float:right !important;margin:calc(var(--spacing)*-1) 0;color:var(--variable-name-color);background:var(--secondary-background);height:calc(var(--nav-size) + var(--spacing)*2);width:calc(var(--nav-size)*10);position:relative;z-index:100}.kint-rich input.kint-search.kint-show{display:block}.kint-rich .kint-search-root ul.kint-tabs>li:not(.kint-search-match){background:var(--secondary-background);filter:saturate(0);opacity:.5}.kint-rich .kint-search-root dl:not(.kint-search-match){opacity:.5}.kint-rich .kint-search-root dl:not(.kint-search-match)>dt{background:var(--main-background);filter:saturate(0)}.kint-rich .kint-search-root dl:not(.kint-search-match) dl,.kint-rich .kint-search-root dl:not(.kint-search-match) ul.kint-tabs>li:not(.kint-search-match){opacity:1}.kint-rich div.access-path{background:var(--secondary-background);display:none;margin-top:5px;padding:4px;white-space:pre}.kint-rich div.access-path.kint-show{display:block}.kint-rich footer{padding:0 3px 3px;font-size:9px;background:rgba(0,0,0,0)}.kint-rich footer>.kint-folder-trigger{background:rgba(0,0,0,0)}.kint-rich footer>.kint-folder-trigger::before{background:var(--text-color)}.kint-rich footer nav{height:10px;width:10px;background-size:10px 50px}.kint-rich footer>ol{display:none;margin-left:32px}.kint-rich footer.kint-show>ol{display:block}.kint-rich a{color:var(--text-color);text-shadow:none;text-decoration:underline}.kint-rich a:hover{color:var(--variable-name-color);border-bottom:1px dotted var(--variable-name-color)}.kint-rich ul{list-style:none;padding-left:calc(var(--spacing)*3)}.kint-rich ul:not(.kint-tabs) li{border-left:1px dashed var(--border-color)}.kint-rich ul:not(.kint-tabs) li>dl{border-left:none}.kint-rich ul.kint-tabs{margin:0 0 0 calc(var(--spacing)*3);padding-left:0;background:var(--main-background);border:var(--border);border-top:0}.kint-rich ul.kint-tabs>li{background:var(--secondary-background);border:var(--border);cursor:pointer;display:inline-block;height:calc(var(--spacing)*6);margin:calc(var(--spacing)/2);padding:0 calc(2px + var(--spacing)*2.5);vertical-align:top}.kint-rich ul.kint-tabs>li:hover,.kint-rich ul.kint-tabs>li.kint-active-tab:hover{border-color:var(--border-color-hover);color:var(--variable-type-color-hover)}.kint-rich ul.kint-tabs>li.kint-active-tab{background:var(--main-background);border-top:0;margin-top:-1px;height:27px;line-height:24px}.kint-rich ul.kint-tabs>li:not(.kint-active-tab){line-height:calc(var(--spacing)*5)}.kint-rich ul.kint-tabs li+li{margin-left:0}.kint-rich ul.kint-tab-contents>li{display:none;contain:strict}.kint-rich ul.kint-tab-contents>li.kint-show{display:block;contain:content}.kint-rich dt:hover+dd>ul>li.kint-active-tab{border-color:var(--border-color-hover);color:var(--variable-type-color-hover)}.kint-rich dt>.kint-color-preview{width:var(--nav-size);height:var(--nav-size);display:inline-block;vertical-align:middle;margin-left:10px;border:var(--border);background-color:#ccc;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="%23FFF" d="M0 0h1v2h1V1H0z"/></svg>');background-size:min(20px,100%)}.kint-rich dt>.kint-color-preview:hover{border-color:var(--border-color-hover)}.kint-rich dt>.kint-color-preview>div{width:100%;height:100%}.kint-rich table{border-collapse:collapse;empty-cells:show;border-spacing:0}.kint-rich table *{font-size:12px}.kint-rich table dt{background:none;padding:calc(var(--spacing)/2)}.kint-rich table dt .kint-parent{min-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kint-rich table td,.kint-rich table th{border:var(--border);padding:calc(var(--spacing)/2);vertical-align:center}.kint-rich table th{cursor:alias}.kint-rich table td:first-child,.kint-rich table th{font-weight:bold;background:var(--secondary-background);color:var(--variable-name-color)}.kint-rich table td{background:var(--main-background);white-space:pre}.kint-rich table td>dl{padding:0}.kint-rich table pre{border-top:0;border-right:0}.kint-rich table thead th:first-child{background:none;border:0}.kint-rich table tr:hover>td{box-shadow:0 0 1px 0 var(--border-color-hover) inset}.kint-rich table tr:hover var{color:var(--variable-type-color-hover)}.kint-rich table ul.kint-tabs li.kint-active-tab{height:20px;line-height:17px}.kint-rich pre.kint-source{margin-left:-1px}.kint-rich pre.kint-source[data-kint-filename]:before{display:block;content:attr(data-kint-filename);margin-bottom:var(--spacing);padding-bottom:var(--spacing);border-bottom:1px solid var(--secondary-background)}.kint-rich pre.kint-source>div:before{display:inline-block;content:counter(kint-l);counter-increment:kint-l;border-right:1px solid var(--border-color-hover);padding-right:calc(var(--spacing)*2);margin-right:calc(var(--spacing)*2)}.kint-rich pre.kint-source>div.kint-highlight{background:var(--secondary-background)}.kint-rich .kint-microtime-js .kint-microtime-lap{text-shadow:-1px 0 var(--border-color-hover),0 1px var(--border-color-hover),1px 0 var(--border-color-hover),0 -1px var(--border-color-hover);color:var(--main-background);font-weight:bold}input.kint-note-input{width:100%}.kint-rich{--main-background: #f8f8f8;--secondary-background: #f8f8f8;--variable-type-color: #06f;--variable-type-color-hover: #f00;--border-color: #d7d7d7;--border-color-hover: #aaa;--alternative-background: #fff;--highlight-color: #cfc;--caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 150'><path d='M6 7h18l-9 15zm0 30h18l-9 15zm0 45h18l-9-15zm0 30h18l-9-15zm0 12l18 18m-18 0l18-18' fill='%23555'/><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23555'/></svg>")}.kint-rich .kint-focused{box-shadow:0 0 3px 2px var(--variable-type-color-hover)}.kint-rich dt{font-weight:normal}.kint-rich dt.kint-parent{margin-top:4px}.kint-rich dl dl{margin-top:4px;padding-left:25px;border-left:none}.kint-rich>dl>dt{background:var(--secondary-background)}.kint-rich ul{margin:0;padding-left:0}.kint-rich ul:not(.kint-tabs)>li{border-left:0}.kint-rich ul.kint-tabs{background:var(--secondary-background);border:var(--border);border-width:0 1px 1px 1px;padding:4px 0 0 12px;margin-left:-1px;margin-top:-1px}.kint-rich ul.kint-tabs li,.kint-rich ul.kint-tabs li+li{margin:0 0 0 4px}.kint-rich ul.kint-tabs li{border-bottom-width:0;height:calc(var(--spacing)*6 + 1px)}.kint-rich ul.kint-tabs li:first-child{margin-left:0}.kint-rich ul.kint-tabs li.kint-active-tab{border-top:var(--border);background:var(--alternative-background);font-weight:bold;padding-top:0;border-bottom:1px solid var(--alternative-background) !important;margin-bottom:-1px}.kint-rich ul.kint-tabs li.kint-active-tab:hover{border-bottom:1px solid var(--alternative-background)}.kint-rich ul>li>pre{border:var(--border)}.kint-rich dt:hover+dd>ul{border-color:var(--border-color-hover)}.kint-rich pre{background:var(--alternative-background);margin-top:4px;margin-left:25px}.kint-rich .kint-source{margin-left:-1px}.kint-rich .kint-source .kint-highlight{background:var(--highlight-color)}.kint-rich .kint-parent.kint-show>.kint-search{border-bottom-width:1px}.kint-rich table td{background:var(--alternative-background)}.kint-rich table td>dl{padding:0;margin:0}.kint-rich table td>dl>dt.kint-parent{margin:0}.kint-rich table td:first-child,.kint-rich table td,.kint-rich table th{padding:2px 4px}.kint-rich table dd,.kint-rich table dt{background:var(--alternative-background)}.kint-rich table tr:hover>td{box-shadow:none;background:var(--highlight-color)}
</style>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>YUSRIL BOOK LIBRARY</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://bennisurbakti.com/front/css/plugins.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://bennisurbakti.com/front/css/main.css" />
    <!-- FAV ICON -->
    <link rel="icon" type="image/png" href="https://bennisurbakti.com/assets/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="https://bennisurbakti.com/assets/favicon/favicon.svg" />
    <link rel="shortcut icon" href="https://bennisurbakti.com/uploads/setting/1754274929_5c4d08420dbcb7895da2.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="https://bennisurbakti.com/assets/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="https://bennisurbakti.com/assets/favicon/site.webmanifest" />

</head>

<body>
    <div class="site-wrapper" id="top">

        <!-- DEBUG-VIEW START 1 APPPATH/Views/front_layout/top_menu.php -->
<div class="site-header d-none d-lg-block">
    <div class="header-middle pt--10 pb--10">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3 ">
                    <a href="https://bennisurbakti.com/" class="site-brand">
                        <img src="https://bennisurbakti.com/uploads/setting/1754734297_f70d5a05902aa03c0465.png" alt="">
                    </a>
                </div>
                <div class="col-lg-3">
                    <div class="header-phone ">
                        <div class="icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="text">
                            <p>Bantuan</p>
                            <p class="font-weight-bold number">+62 822 9495 9347</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-navigation flex-lg-right">
                        <ul class="main-menu menu-right ">
                            <li class="menu-item">
                                <a href="https://bennisurbakti.com/">Beranda </a>

                            </li>
                            <!-- Shop -->
                            <li class="menu-item mega-menu">
                                <a href="https://bennisurbakti.com/books">Koleksi Buku</a>

                            </li>
                            <!-- Blog -->
                            <li class="menu-item mega-menu">
                                <a href="https://bennisurbakti.com/about">Tentang Kami</a>

                            </li>
                            <li class="menu-item">
                                <a href="https://bennisurbakti.com/contact">Kontak</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-bottom pb--10">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <nav class="category-nav">
                        <div>
                            <a href="javascript:void(0)" class="category-trigger">
                                <i class="fa fa-bars"></i>Kategori
                            </a>
                            <ul class="category-menu" id="category-menu">
                                <!-- Akan diisi lewat AJAX -->
                            </ul>
                            <li id="more-category-btn" style="display: none;">
                                <a href="https://bennisurbakti.com/books">Lihat kategori lainnya</a>
                            </li>
                        </div>
                    </nav>

                </div>
                <div class="col-lg-7">
                    <div class="header-search-block">
                        <form action="https://bennisurbakti.com/book/search" method="get">
                            <input type="text" name="keyword" placeholder="Cari judul, pengarang, atau ISBN..." value="">
                            <button type="submit"><i class="fas fa-search"></i> Cari</button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="main-navigation flex-lg-right">
                        <div class="cart-widget">
                            <div class="login-block">
                                <a href="https://bennisurbakti.com/login" class="font-weight-bold">Masuk</a> <br>
                                <span>atau</span><a href="https://bennisurbakti.com/register">Daftar</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="sticky-init fixed-header common-sticky">
    <div class="container d-none d-lg-block">
        <div class="row align-items-center">
            <div class="col-lg-4">
                <a href="https://bennisurbakti.com/" class="site-brand">
                    <img src="https://bennisurbakti.com/uploads/setting/1754734297_f70d5a05902aa03c0465.png" alt="">
                </a>
            </div>
            <div class="col-lg-8">
                <div class="main-navigation flex-lg-right">
                    <ul class="main-menu menu-right ">
                        <li class="menu-item">
                            <a href="https://bennisurbakti.com/">Beranda </a>

                        </li>
                        <!-- Shop -->
                        <li class="menu-item mega-menu">
                            <a href="https://bennisurbakti.com/books">Koleksi Buku</a>

                        </li>
                        <!-- Blog -->
                        <li class="menu-item mega-menu">
                            <a href="https://bennisurbakti.com/about">Tentang Kami</a>

                        </li>
                        <li class="menu-item">
                            <a href="https://bennisurbakti.com/contact">Kontak</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- DEBUG-VIEW ENDED 1 APPPATH/Views/front_layout/top_menu.php -->

        <!-- DEBUG-VIEW START 2 APPPATH/Views/front_layout/site_mobile_menu.php -->
 <div class="site-mobile-menu">
     <header class="mobile-header d-block d-lg-none pt--10 pb-md--10">
         <div class="container">
             <div class="row align-items-sm-end align-items-center">
                 <div class="col-md-4 col-7">
                     <a href="https://bennisurbakti.com/" class="site-brand">
                         <img src="https://bennisurbakti.com/uploads/setting/1754734297_f70d5a05902aa03c0465.png" alt="">
                     </a>
                 </div>
                 <div class="col-md-5 order-3 order-md-2">
                     <nav class="category-nav">
                         <div class="header-search-block">
                             <form action="https://bennisurbakti.com/buku/pencarian" method="get">
                                 <input type="text" name="keyword" placeholder="Cari judul, pengarang, atau ISBN..." value="">
                                 <button type="submit"><i class="fas fa-search"></i> Cari</button>
                             </form>
                         </div>
                     </nav>
                 </div>
                 <div class="col-md-3 col-5  order-md-3 text-right">
                     <div class="mobile-header-btns header-top-widget">
                         <ul class="header-links">

                             <li class="sin-link">
                                 <a href="javascript:" class="link-icon hamburgur-icon off-canvas-btn"><i
                                         class="ion-navicon"></i></a>
                             </li>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
     </header>
     <!--Off Canvas Navigation Start-->
     <aside class="off-canvas-wrapper">
         <div class="btn-close-off-canvas">
             <i class="ion-android-close"></i>
         </div>
         <div class="off-canvas-inner">
             <!-- search box start -->
             <div class="search-box offcanvas">
                 <form>
                     <input type="text" placeholder="Search Here">
                     <button class="search-btn"><i class="ion-ios-search-strong"></i></button>
                 </form>
             </div>
             <!-- search box end -->
             <!-- mobile menu start -->
             <div class="mobile-navigation">
                 <!-- mobile menu navigation start -->
                 <nav class="off-canvas-nav">
                     <ul class="mobile-menu main-mobile-menu">
                         <li class="menu-item">
                             <a href="https://bennisurbakti.com/">Beranda </a>

                         </li>
                         <!-- Shop -->
                         <li class="menu-item mega-menu">
                             <a href="https://bennisurbakti.com/buku">Koleksi Buku</a>

                         </li>
                         <!-- Blog -->
                         <li class="menu-item mega-menu">
                             <a href="https://bennisurbakti.com/tentang">Tentang Kami</a>

                         </li>
                         <li class="menu-item">
                             <a href="https://bennisurbakti.com/kontak">Kontak</a>
                         </li>
                     </ul>
                 </nav>
                 <!-- mobile menu navigation end -->
             </div>

             <div class="off-canvas-bottom">
                 <div class="contact-list mb--10">
                     <a href="#" class="sin-contact"><i class="fas fa-mobile-alt"></i>+6282294959347</a>
                     <a href="#" class="sin-contact"><i class="fas fa-envelope"></i>yusril@gmail.com</a>
                 </div>
              
             </div>
         </div>
     </aside>
     <!--Off Canvas Navigation End-->
 </div>

 
<!-- DEBUG-VIEW ENDED 2 APPPATH/Views/front_layout/site_mobile_menu.php -->

        <!--=================================
        Hero Area
        ===================================== -->
<section class="hero-area hero-slider-1">
    <div class="container-fluid">
        <div class="sb-slick-slider" data-slick-setting='{
        "autoplay": true,
        "fade": true,
        "autoplaySpeed": 3000,
        "speed": 3000,
        "slidesToShow": 1,
        "dots":true
    }'>
            
                <div class="single-slide" style="background-image: url('https://bennisurbakti.com/uploads/banners/1754836363_f192a0b88783f00e5c89.jpg'); background-size: cover; background-position: center;">
                    <div class="container">
                        <div class="home-content text-center text-sm-left position-relative">
                            <div class="row align-items-center justify-content-start justify-content-md-end">
                                <div class="col-lg-6 col-xl-7 col-md-6 col-sm-7">
                                    <div class="home-content-inner content-right-side text-start">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <div class="single-slide" style="background-image: url('https://bennisurbakti.com/uploads/banners/1754836373_aaa6a754f64d5a9b5d70.jpg'); background-size: cover; background-position: center;">
                    <div class="container">
                        <div class="home-content text-center text-sm-left position-relative">
                            <div class="row align-items-center justify-content-start justify-content-md-end">
                                <div class="col-lg-6 col-xl-7 col-md-6 col-sm-7">
                                    <div class="home-content-inner content-right-side text-start">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <div class="single-slide" style="background-image: url('https://bennisurbakti.com/uploads/banners/1754836617_2281938ffcc7509dace9.jpg'); background-size: cover; background-position: center;">
                    <div class="container">
                        <div class="home-content text-center text-sm-left position-relative">
                            <div class="row align-items-center justify-content-start justify-content-md-end">
                                <div class="col-lg-6 col-xl-7 col-md-6 col-sm-7">
                                    <div class="home-content-inner content-right-side text-start">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>
    </div>
</section>
<!--=================================
        Home Features Section
        ===================================== -->

<!--=================================
        Promotion Section One
        ===================================== -->
<section class="section-margin">

    <div class="container">

    </div>
</section>

<!--=================================
        Deal of the day 
        ===================================== -->
<section class="section-margin">
    <div class="container-fluid">
        <div class="promo-section-heading">
            <h2>Buku Terbaru</h2>
        </div>
        <div class="product-slider with-countdown  slider-border-single-row sb-slick-slider" data-slick-setting='{
                "autoplay": true,
                "autoplaySpeed": 8000,
                "slidesToShow": 6,
                "dots":true
            }' data-slick-responsive='[
                {"breakpoint":1400, "settings": {"slidesToShow": 4} },
                {"breakpoint":992, "settings": {"slidesToShow": 3} },
                {"breakpoint":768, "settings": {"slidesToShow": 2} },
                {"breakpoint":575, "settings": {"slidesToShow": 2} },
                {"breakpoint":490, "settings": {"slidesToShow": 1} }
            ]'>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Dr. Nurcholish Madjid</a>
                            <h3><a href="https://bennisurbakti.com/books/kaki-langit-peradaban-islam-673">Kaki langit peradaban Islam</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Kaki langit peradaban Islam" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Ki Bagus Hadikusuma et al  penghimpun Imron Nasri.</a>
                            <h3><a href="https://bennisurbakti.com/books/meremajakan-pimpinan-muhammadiyah-266">Meremajakan pimpinan Muhammadiyah</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Meremajakan pimpinan Muhammadiyah" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Oriano Granella</a>
                            <h3><a href="https://bennisurbakti.com/books/meryem-ana-visitors-guide-to-the-meryem-ana-sanctuary-and-the-christian-history-of-ephesus-220">Meryem Ana : visitor&#039;s guide to the Meryem Ana sanctuary and the Christian history of Ephesus</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Meryem Ana : visitor&#039;s guide to the Meryem Ana sanctuary and the Christian history of Ephesus" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Oleh Syed Muhammad Naquib Al-Attas</a>
                            <h3><a href="https://bennisurbakti.com/books/rangkaian-rubaiyat-0">Rangkaian Ruba&#039;iyat.</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Rangkaian Ruba&#039;iyat." style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Syed Muhammad Naquib al-Attas</a>
                            <h3><a href="https://bennisurbakti.com/books/islam-the-covenants-fulfilled-575">Islam : the covenants fulfilled. </a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Islam : the covenants fulfilled. " style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Prof. Dr. H.  Sunardji Dahri Tiam M. Pd.</a>
                            <h3><a href="https://bennisurbakti.com/books/historiografi-filsafat-islam-corak-periodesasi-dan-aktualitas-679">Historiografi filsafat Islam : corak, periodesasi dan aktualitas </a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Historiografi filsafat Islam : corak, periodesasi dan aktualitas " style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Prof. Mr. Dr. Hazairin</a>
                            <h3><a href="https://bennisurbakti.com/books/pergolakan-penjesuaian-adat-kepada-hukum-islam-441">Pergolakan penjesuaian adat kepada hukum Islam</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Pergolakan penjesuaian adat kepada hukum Islam" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Syed Muhammad Naquib al-Attas and Wan Mohd Nor Wan Daud</a>
                            <h3><a href="https://bennisurbakti.com/books/the-iclif-leadership-competency-model-lcm-an-islamic-alternative-649">The ICLIF Leadership Competency Model (LCM) : an Islamic alternative</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="The ICLIF Leadership Competency Model (LCM) : an Islamic alternative" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Wisnu Tanggap Prabowo</a>
                            <h3><a href="https://bennisurbakti.com/books/naskah-laut-mati-dan-ashabul-kahfi-telaah-sejarah-berdasarkan-manuskrip-kuno-dan-kitab-suci-359">Naskah Laut Mati dan Ashabul kahfi: telaah sejarah berdasarkan manuskrip kuno dan kitab suci</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Naskah Laut Mati dan Ashabul kahfi: telaah sejarah berdasarkan manuskrip kuno dan kitab suci" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Imam Ghazali</a>
                            <h3><a href="https://bennisurbakti.com/books/bahaya-lisan-976">Bahaya lisan</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Bahaya lisan" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Herman L. Beck</a>
                            <h3><a href="https://bennisurbakti.com/books/fenomenologi-islam-modernis-kisah-perjumpaan-muhammadiyah-dengan-kebhinekaan-perilaku-beragama-375">Fenomenologi Islam modernis : kisah perjumpaan Muhammadiyah dengan kebhinekaan perilaku beragama</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Fenomenologi Islam modernis : kisah perjumpaan Muhammadiyah dengan kebhinekaan perilaku beragama" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Faidh Kasyani</a>
                            <h3><a href="https://bennisurbakti.com/books/etika-islam-menuju-evolusi-diri-541">Etika Islam menuju evolusi diri</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Etika Islam menuju evolusi diri" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Nasr Hamid Abu Zayd</a>
                            <h3><a href="https://bennisurbakti.com/books/dekonstruksi-gender-kritik-wacana-perempuan-dalam-islam-432">Dekonstruksi gender : kritik wacana perempuan dalam Islam</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Dekonstruksi gender : kritik wacana perempuan dalam Islam" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Nashr Hamid Abu Zayd</a>
                            <h3><a href="https://bennisurbakti.com/books/al-quran-hermeneutika-dan-kekuasaan-kontroversi-dan-penggugatan-hermeneutik-al-quran-779">Al-Quran, hermeneutika dan kekuasaan : kontroversi dan penggugatan hermeneutik Al-Quran</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Al-Quran, hermeneutika dan kekuasaan : kontroversi dan penggugatan hermeneutik Al-Quran" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Dr. Zubaedi M. Ag. M. Pd.</a>
                            <h3><a href="https://bennisurbakti.com/books/islam-benturan-antarperadaban-dialog-filsafat-barat-dengan-islam-dialog-peradaban-dan-dialog-agama-821">Islam, benturan &amp; antarperadaban : dialog filsafat barat dengan Islam, dialog peradaban, dan dialog agama </a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Islam, benturan &amp; antarperadaban : dialog filsafat barat dengan Islam, dialog peradaban, dan dialog agama " style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">Fazlur Rahman</a>
                            <h3><a href="https://bennisurbakti.com/books/islam-dan-modernitas-tentang-transformasi-intelektual-189">Islam dan modernitas, tentang transformasi intelektual</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Islam dan modernitas, tentang transformasi intelektual" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">oleh Nurcholish Madjid penerjemah Zaim Rofiqi</a>
                            <h3><a href="https://bennisurbakti.com/books/ibn-taimiyah-tentang-kalam-dan-falsafah-523">Ibn Taimiyah, tentang kalam dan falsafah</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Ibn Taimiyah, tentang kalam dan falsafah" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">oleh Nurcholish Madjid penerjemah Zaim Rofiqi</a>
                            <h3><a href="https://bennisurbakti.com/books/ibn-taimiyah-tentang-kalam-dan-falsafah-625">Ibn Taimiyah, tentang kalam dan falsafah</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Ibn Taimiyah, tentang kalam dan falsafah" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author">John L. Esposito</a>
                            <h3><a href="https://bennisurbakti.com/books/the-future-of-islam-815">The future of Islam</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="The future of Islam" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="single-slide">
                    <div class="product-card">
                        <div class="product-header">
                            <a href="#" class="author"> Nurcholish Madjid</a>
                            <h3><a href="https://bennisurbakti.com/books/islam-agama-kemanusiaan-membangun-tradisi-dan-visi-baru-islam-indonesia-709">Islam agama kemanusiaan : membangun tradisi dan visi baru Islam Indonesia</a></h3>
                        </div>
                        <div class="product-card--body">
                            <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                <img src="https://bennisurbakti.com/uploads/book_cover/default_cover.png" alt="Islam agama kemanusiaan : membangun tradisi dan visi baru Islam Indonesia" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                            </div>
                            <div class="price-block">
                                <span class="price">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            
        </div>
    </div>
</section>
<!--=================================
        Best Seller Product
        ===================================== -->
<section class="section-margin section-padding-top section-padding" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);">
    <div class="container">
        <div class="section-title section-title--bordered mb-0">
            <h2 style="color: #2d3a4b;">Buku Unggulan</h2>
        </div>
        <div class="best-seller-block">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-6">
                    <div class="author-image">
                        <img src="https://bennisurbakti.com/uploads/setting/1754732646_1e9fd0d1c3c7d879fdcb.png" alt="" style="border-radius: 12px; box-shadow: 0 4px 24px rgba(44,62,80,0.08); background: #fff; padding: 16px;">
                    </div>
                </div>
                <div class="col-lg-7 col-md-6">
                    <div class="sb-slick-slider product-slider product-list-slider multiple-row slider-border-multiple-row"
                        data-slick-setting='{
                                    "autoplay": false,
                                    "autoplaySpeed": 8000,
                                    "slidesToShow":2,
                                    "rows":2,
                                    "dots":true
                                }' data-slick-responsive='[
                                    {"breakpoint":1200, "settings": {"slidesToShow": 1} },
                                    {"breakpoint":992, "settings": {"slidesToShow": 1} },
                                    {"breakpoint":768, "settings": {"slidesToShow": 1} },
                                    {"breakpoint":575, "settings": {"slidesToShow": 1} },
                                    {"breakpoint":490, "settings": {"slidesToShow": 1} }
                                ]'>
                                                    <div class="single-slide">
                                <div class="product-card card-style-list" style="background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(44,62,80,0.06);">
                                    
                                    <div class="card-image" style="padding: 12px;">
                                        <img src="uploads/book_cover/default_cover.png" alt="" style="border-radius: 8px; max-height: 120px; object-fit: cover;">
                                    </div>

                                    <div class="product-card--body">
                                        <div class="product-header">
                                            <a href="#" class="author" style="color: #5c6bc0;">
                                                                                            </a>
                                            <a href="https://bennisurbakti.com/buku/detail/10-tahun-akademi-penerangan">
                                                <h3 style="color: #263238;">10 Tahun Akademi Penerangan</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                    <div class="single-slide">
                                <div class="product-card card-style-list" style="background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(44,62,80,0.06);">
                                    
                                    <div class="card-image" style="padding: 12px;">
                                        <img src="uploads/book_cover/IMAG0359.JPG.JPG" alt="" style="border-radius: 8px; max-height: 120px; object-fit: cover;">
                                    </div>

                                    <div class="product-card--body">
                                        <div class="product-header">
                                            <a href="#" class="author" style="color: #5c6bc0;">
                                                                                            </a>
                                            <a href="https://bennisurbakti.com/buku/detail/10-orang-indonesia-terbesar-sekarang-sepuluh-orang-indonesia-terbesar-sekarang">
                                                <h3 style="color: #263238;">10 ORANG INDONESIA TERBESAR SEKARANG = SEPULUH ORANG INDONESIA TERBESAR SEKARANG.</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                            </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section-margin">
    <div class="container-fluid">
        <div class="section-title section-title--bordered">
            <h2>Buku Populer</h2>
        </div>
                    <div class="product-slider with-countdown  slider-border-single-row sb-slick-slider" data-slick-setting='{
                "autoplay": true,
                "autoplaySpeed": 8000,
                "slidesToShow": 6,
                "dots":true
            }' data-slick-responsive='[
                {"breakpoint":1400, "settings": {"slidesToShow": 4} },
                {"breakpoint":992, "settings": {"slidesToShow": 3} },
                {"breakpoint":768, "settings": {"slidesToShow": 2} },
                {"breakpoint":575, "settings": {"slidesToShow": 2} },
                {"breakpoint":490, "settings": {"slidesToShow": 1} }
            ]'>
                                    <div class="single-slide">
                        <div class="product-card">
                            <div class="product-header">
                                <a href="#" class="author"></a>
                                <h3><a href="https://bennisurbakti.com/books/17-agustus-1945-1948">17 Agustus 1945-1948</a></h3>
                            </div>
                            <div class="product-card--body">
                                <div class="card-image" style="width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                                        <img src="https://bennisurbakti.com/uploads/book_cover/17%20Agustus%201945-1948.jpg" alt="17 Agustus 1945-1948" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                                </div>
                                <div class="price-block">
                                    <span class="price">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                
            </div>
            </div>
    
</section>



<!--=================================
        Footer
        ===================================== -->
<!-- Modal -->
<div class="modal fade modal-quick-view" id="quickModal" tabindex="-1" role="dialog"
    aria-labelledby="quickModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="product-details-modal">
                <div class="row">
                    <div class="col-lg-5">
                        <!-- Product Details Slider Big Image-->
                        <div class="product-details-slider sb-slick-slider arrow-type-two" data-slick-setting='{
                                    "slidesToShow": 1,
                                    "arrows": false,
                                    "fade": true,
                                    "draggable": false,
                                    "swipe": false,
                                    "asNavFor": ".product-slider-nav"
                                    }'>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-1.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-2.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-3.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-4.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-5.jpg" alt="">
                            </div>
                        </div>
                        <!-- Product Details Slider Nav -->
                        <div class="mt--30 product-slider-nav sb-slick-slider arrow-type-two"
                            data-slick-setting='{
            "infinite":true,
              "autoplay": true,
              "autoplaySpeed": 8000,
              "slidesToShow": 4,
              "arrows": true,
              "prevArrow":{"buttonClass": "slick-prev","iconClass":"fa fa-chevron-left"},
              "nextArrow":{"buttonClass": "slick-next","iconClass":"fa fa-chevron-right"},
              "asNavFor": ".product-details-slider",
              "focusOnSelect": true
              }'>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-1.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-2.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-3.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-4.jpg" alt="">
                            </div>
                            <div class="single-slide">
                                <img src="https://bennisurbakti.com/front/image/products/product-details-5.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 mt--30 mt-lg--30">
                        <div class="product-details-info pl-lg--30 ">
                            <p class="tag-block">Tags: <a href="#">Movado</a>, <a href="#">Omega</a></p>
                            <h3 class="product-title">Beats EP Wired On-Ear Headphone-Black</h3>
                            <ul class="list-unstyled">
                                <li>Ex Tax: <span class="list-value"> £60.24</span></li>
                                <li>Brands: <a href="#" class="list-value font-weight-bold"> Canon</a></li>
                                <li>Product Code: <span class="list-value"> model1</span></li>
                                <li>Reward Points: <span class="list-value"> 200</span></li>
                                <li>Availability: <span class="list-value"> In Stock</span></li>
                            </ul>
                            <div class="price-block">
                                <span class="price-new">£73.79</span>
                                <del class="price-old">£91.86</del>
                            </div>
                            <div class="rating-widget">
                                <div class="rating-block">
                                    <span class="fas fa-star star_on"></span>
                                    <span class="fas fa-star star_on"></span>
                                    <span class="fas fa-star star_on"></span>
                                    <span class="fas fa-star star_on"></span>
                                    <span class="fas fa-star "></span>
                                </div>
                                <div class="review-widget">
                                    <a href="#">(1 Reviews)</a> <span>|</span>
                                    <a href="#">Write a review</a>
                                </div>
                            </div>
                            <article class="product-details-article">
                                <h4 class="sr-only">Product Summery</h4>
                                <p>Long printed dress with thin adjustable straps. V-neckline and wiring under
                                    the Dust with ruffles
                                    at the bottom
                                    of the
                                    dress.</p>
                            </article>
                            <div class="add-to-cart-row">
                                <div class="count-input-block">
                                    <span class="widget-label">Qty</span>
                                    <input type="number" class="form-control text-center" value="1">
                                </div>
                                <div class="add-cart-btn">
                                    <a href="#" class="btn btn-outlined--primary"><span
                                            class="plus-icon">+</span>Add to Cart</a>
                                </div>
                            </div>
                            <div class="compare-wishlist-row">
                                <a href="#" class="add-link"><i class="fas fa-heart"></i>Add to Wish List</a>
                                <a href="#" class="add-link"><i class="fas fa-random"></i>Add to Compare</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="widget-social-share">
                    <span class="widget-label">Share:</span>
                    <div class="modal-social-share">
                        <a href="#" class="single-icon"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="single-icon"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="single-icon"><i class="fab fa-youtube"></i></a>
                        <a href="#" class="single-icon"><i class="fab fa-google-plus-g"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <!-- DEBUG-VIEW START 3 APPPATH/Views/front_layout/footer.php -->
   <!--=================================
    Footer Area
    ===================================== -->
   <footer class="site-footer">
       <div class="container">
          <div class="row section-padding">
    <!-- Kiri -->
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 mb-4">
        <div class="single-footer">
            <div class="brand-footer footer-title mb-3">
                <img src="https://bennisurbakti.com/uploads/setting/1754734297_f70d5a05902aa03c0465.png" alt="Logo">
            </div>
            <div class="footer-contact">
                <p><span class="label">Alamat:</span><br><span class="text">jakarta</span></p>
                <p><span class="label">Telepon:</span><br><span class="text">+6282294959347</span></p>
                <p><span class="label">Email:</span><br><span class="text">yusril@gmail.com</span></p>
            </div>
        </div>
    </div>

    <!-- Tengah -->
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 mb-4">
        <div class="single-footer">
            <div class="footer-title mb-3">
                <h3>Akses Cepat</h3>
            </div>
            <ul class="footer-list normal-list">
                <li><a href="https://bennisurbakti.com/">Beranda</a></li>
                <li><a href="https://bennisurbakti.com/buku">Koleksi Buku</a></li>
                <li><a href="https://bennisurbakti.com/tentang">Tentang Kami</a></li>
                <li><a href="https://bennisurbakti.com/kontak">Kontak</a></li>
            </ul>
        </div>
    </div>

    <!-- Kanan -->
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 mb-4">
        <div class="single-footer">
            <div class="footer-title mb-3">
                <h3>Stay Connected</h3>
            </div>
            <ul class="social-list list-inline">
                <li class="single-social facebook"><a href="#"><i class="ion ion-social-facebook"></i></a></li>
                <li class="single-social instagram"><a href="https://instagram.com/YUSRIL BOOK LIBRARY"><i class="ion ion-social-instagram"></i></a></li>
                <li class="single-social email"><a href="mailto:yusril@gmail.com"><i class="ion ion-email"></i></a></li>
                <li class="single-social youtube"><a href="https://youtube.com/YUSRIL BOOK LIBRARY"><i class="ion ion-social-youtube"></i></a></li>
            </ul>
        </div>
    </div>
</div>

       </div>
       <div class="footer-bottom">
           <div class="container">

               <p class="copyright-text">Copyrights © 2025 YUSRIL BOOK LIBRARY. All rights reserved.               </p>
           </div>
       </div>
   </footer>
<!-- DEBUG-VIEW ENDED 3 APPPATH/Views/front_layout/footer.php -->



    </div>

    <!-- Use Minified Plugins Version For Fast Page Load -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="https://bennisurbakti.com/front/js/plugins.js"></script>
    <script src="https://bennisurbakti.com/front/js/ajax-mail.js"></script>
    <script src="https://bennisurbakti.com/front/js/custom.js"></script>
    
<script>
    $.ajax({
        url: "https://bennisurbakti.com/api/categories-with-books",
        type: "GET",
        dataType: "json",
        success: function(response) {
            let categoryMenu = "";
            response.categories.forEach(function(cat) {
                categoryMenu += `
                <li class="cat-item">
                    <a href="https://bennisurbakti.com/buku?category=${cat.id}">
                        ${cat.name} (${cat.total_books})
                    </a>
                </li>`;
            });

            if (categoryMenu === "") {
                categoryMenu = '<li><a href="#">Tidak ada kategori</a></li>';
            }

            $("#category-menu").html(categoryMenu);

            // Tampilkan tombol lihat lainnya jika ada lebih dari 10
            if (response.has_more) {
                $("#more-category-btn").show();
            }
        },
        error: function() {
            $("#category-menu").html('<li><a href="#">Gagal memuat kategori</a></li>');
        },
    });
</script>
<script>
    document.getElementById('searchBook').addEventListener('input', function() {
        const query = this.value.trim();
        const suggestionBox = document.getElementById('suggestions');

        if (query.length < 2) {
            suggestionBox.style.display = 'none';
            suggestionBox.innerHTML = '';
            return;
        }

        fetch(`https://bennisurbakti.com/books/search?q=` + encodeURIComponent(query))
            .then(response => response.json())
            .then(data => {
                suggestionBox.innerHTML = ''; // Kosongkan isi sebelumnya

                if (data.length > 0) {
                    data.forEach(book => {
                        const item = document.createElement('a');
                        item.href = `https://bennisurbakti.com/admin/books/${book.slug}`;
                        item.className = 'list-group-item list-group-item-action';
                        item.textContent = `${book.title} (${book.year}) - ${book.author}`;
                        suggestionBox.appendChild(item);
                    });
                } else {
                    const notFound = document.createElement('div');
                    notFound.className = 'list-group-item text-muted';
                    notFound.textContent = 'Data tidak ditemukan';
                    suggestionBox.appendChild(notFound);
                }

                suggestionBox.style.display = 'block';
            });

    });
</script>
 <script>
     document.getElementById('searchBook').addEventListener('input', function() {
         const query = this.value.trim();
         const suggestionBox = document.getElementById('suggestions');

         if (query.length < 2) {
             suggestionBox.style.display = 'none';
             suggestionBox.innerHTML = '';
             return;
         }

         fetch(`https://bennisurbakti.com/books/search?q=` + encodeURIComponent(query))
             .then(response => response.json())
             .then(data => {
                 suggestionBox.innerHTML = ''; // Kosongkan isi sebelumnya

                 if (data.length > 0) {
                     data.forEach(book => {
                         const item = document.createElement('a');
                         item.href = `https://bennisurbakti.com/admin/books/${book.slug}`;
                         item.className = 'list-group-item list-group-item-action';
                         item.textContent = `${book.title} (${book.year}) - ${book.author}`;
                         suggestionBox.appendChild(item);
                     });
                 } else {
                     const notFound = document.createElement('div');
                     notFound.className = 'list-group-item text-muted';
                     notFound.textContent = 'Data tidak ditemukan';
                     suggestionBox.appendChild(notFound);
                 }

                 suggestionBox.style.display = 'block';
             });

     });
 </script>
     <!-- <script src="https://bennisurbakti.com/assets/js/jquery.min.js"></script> -->

</body>

</html>
<!-- DEBUG-VIEW ENDED 4 APPPATH/Views/front_layout/main.php -->

<!-- DEBUG-VIEW ENDED 5 APPPATH/Views/home/index.php -->
