/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Jun 18, 2025, 4:51:59 PM
    Author     : TOBA
*/

/*:root {
  --link-color: #0F5230;  Warna default (light mode)  #198754 
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-color: #60E2A5 ;  Warna untuk dark mode  #20C997 
  }
}*/
:root {
  --bs-link-color: #0F5230; /* Warna aksen Anda (hijau) */
  --bs-link-hover-color: #198754; /* Warna hover lebih gelap */
  --bg-highlight: #f5f5dc75;
}

/* Dark mode */
[data-bs-theme="dark"] {
  --bs-link-color: #e2c160; /* Warna aksen Anda (hijau) */
  --bs-link-hover-color: #e2a960; /* Warna hover lebih gelap */
  --bg-highlight: #ffffe017;
}

.highlight {
    background-color:  var(--bg-highlight);
}

a {
  color: var(--bs-link-color) !important;
  /*text-decoration: underline;  Tambahkan underline untuk aksesibilitas */
  transition: opacity 0.3s !important;
}

a:hover {
    color:var(--bs-link-hover-color) !important;
  opacity: 0.8 !important;
}

body{
    /*padding-top: 105px;*/
    padding-top: 77px;
    padding-bottom: 40px;
}

.lugrasimo{
    font-family: lugrasimo;
    font-weight: 400;
}

.gulzar{
    font-family: gulzar;
    font-weight: 400;
}
.sindelar{
    font-family: math;
    font-weight: 400;
}
.math{
    font-family: math;
    font-weight: 400;
}
.color-gold{
        color:#dcb34f; 
}
.rubik{
    font-family: rubik;
    font-weight: 365;
}
.charm{
    font-family: charm;
    font-weight: 400;
}

.number {
    justify-self: center;
    align-self: center;
    grid-area: number;
    width: 100%;
}

.reset-number {
    justify-self: center;
    align-self: center;
    grid-area: reset-number;
    width: 100%;
}

.add {
    justify-self: center;
    align-self: center;
    grid-area: add;
    width: 100%;
}

.myBtnAdd {
    position: fixed;
    bottom: 20px;
    right: 115px;
    z-index: 99;
    outline: none;
    background: rgb(153, 153, 153);
    background: linear-gradient(180deg, rgba(153, 153, 153, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /*border: solid darkolivegreen;*/
    /*background-color: #ff00008c;*/
    color: #fff;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 27px;
    /*box-shadow: 0 2px 2px -1px rgba(0,0,0,.4);*/
    box-shadow: 0 7px 14px -1px rgb(0 0 0 / 40%)
}

.myBtnAdd:active {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.myBtnRes {
    position: fixed;
    bottom: 3px;
    left: 69px;
    min-width: 94px;
     width: 14vw; 
    z-index: 99;
    background: rgb(153, 153, 153);
    background: linear-gradient(180deg, rgba(153, 153, 153, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* border: solid darkolivegreen; */
    /* background-color: #ffff008a; */
    /* color: #c1c1c1; */
    cursor: pointer;
    /* padding: 15px; */
    border-radius: 10px;
    font-size: 17px;
    height: 40px;
    /* box-shadow: 0 2px 2px -1px rgba(0,0,0,.4); */
    box-shadow: 0 7px 14px -1px rgb(0 0 0 / 40%);
    font-family: 'Font Awesome 6 Brands';
}

.myBtnRes:active {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.myBtnNum {
    position: fixed;
    bottom: 5px;
    left: 5px;
    z-index: 99;
    /* outline: none; */
    background: rgb(153, 153, 153);
    background: linear-gradient(180deg, rgba(153, 153, 153, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* border: solid #000000; */
    /* background-color: #188318ed; */
    color: #000000;
    cursor: pointer;
    padding: 0 10px 0 10px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bolder;
    width: 60px;
    text-align: center;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.4);
    /* box-shadow: 0 7px 14px -1px rgb(0 0 0 / 40%); */
}

.myBtnNum:active {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.tasbeeh{
    font-size: small;
    position: fixed;
    left: 0px;
    bottom: 0px;
    padding-left: 10px;
    z-index: 70;
    background-color: black;
    /* width: 119px; */
    padding-right: 10px;
    height: 58px;
    vertical-align: top;
    border-top-right-radius: 10px;
    /* color: currentColor; */
    font-family: monospace;
}

.tasbeeh-layer{
        height: 49px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    min-width:168px;
    width: 20vw;
    border-radius: 10px;
}

/*.arabic {
    font-family: 'Amiri', Arial, sans-serif;
    direction: rtl;
     font-size: 1.875em; 
    line-height: 2.5;
    display: block;
}*/
.arabic {
    font-family: indopak-neo;
    /*font-family: 'indopak-normal';*/
    /*font-family: 'indopak-normal', 'indopak-compact', 'indopak';*/
    direction: rtl;
    /* font-size: 1.875em; */
    line-height: 1.8;
    display: block;
}

.ayat {
    direction: rtl;
    /*font-family: 'Kemenag', 'Omar' !important;*/
    font-family: indopak-neo;
    /*font-family: 'indopak-normal', 'indopak-compact', 'indopak';*/
    /*font-family: 'indopak-compact';*/
/*    font-family: Omar;*/
    /*font-family: Amiri;*/
    /*font-family: 'utsmanicHafs', Arial, sans-serif;*/
    /*line-height: 2.5;*//*selain indopak */
    line-height: 1.8; /*indopak */
    display: block;
}

.ff-omar {
    direction: rtl;
    font-family: Omar;
    line-height: 1.8;
    display: block;
}

/*.row {
    padding: 9px;
}*/

.latin {
    font-style: italic;
    line-height: 2;
    margin-bottom: 15px;
    display: block;
}

.terjemah {
    /*font-family: charm;*/
    line-height: 1.7;
    display: block;
}

.show {
    display: block !important;
}

.hidethis {
    display: none !important;
}

.filter-white {
    filter: invert(100%) sepia(80%) saturate(194%) hue-rotate(164deg) brightness(117%) contrast(100%);
}

.tengah {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*p{
    margin-bottom: 0rem;
}*/

.rfs-1 {
    font-size: 1rem !important;
}
.rfs-2 {
    font-size: 1.25rem !important;
}
.rfs-3 {
    font-size: calc(1.275rem + 0.3vw) !important;
}
.rfs-4 {
    font-size: calc(1.3rem + 0.6vw) !important;
}
.rfs-5 {
    font-size: calc(1.325rem + 0.9vw) !important;
}
.rfs-6 {
    font-size: calc(1.375rem + 1.5vw) !important;
}
.rfs-7 {
    font-size: calc(1.5rem + 1.2vw) !important;
}
.rfs-8 {
    font-size: calc(1.75rem + 1.5vw) !important;
}
.rfs-9 {
    font-size: calc(2rem + 1.8vw) !important;
}
.rfs-10 {
    font-size: calc(2.5rem + 2vw) !important;
}

.config-hide{
    display: none;
}

.checkbox{
    opacity: 0;
    position: absolute;
    display: none;
}

.checkbox-label{
background-color: #111;
width: 50px;
height: 26px;
border-radius: 50px;
position: relative;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.fa-moon { color: #f1c40f; }
.fa-sun { color: #f39c12; }

.checkbox-label .ball {
background-color: #fff;
width: 22px;
height: 22px;
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
transform: translateX(24px);
}

#checkbox { display: none; }

.nomor_ayat{
    width: 34px;
    height: 40px;
    background-image: url(/img/U+06DD_Scheherazade.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

/* Blockquote from https://codepen.io/catalinred/pen/YzBPadm */
.blockquote {
  padding-left: 2rem;
  position: relative;
  overflow: hidden;
  margin: 24px 0 24px 0;
}
.blockquote::before, .blockquote::after {
  position: absolute;
  color: #777;
}
.blockquote p {
  margin: 0;
}
.blockquote p + p {
  margin-top: 1rem;
}
.blockquote--slashes::before {
  content: "//";
  transform: rotate(90deg);
  left: 0;
}
.blockquote--slashes::after {
  content: "";
  left: 5px;
  top: 25px;
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.blockquote--classic::before {
  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23777777'><path d='M9.983 3v7.391C9.983 16.095 6.252 19.961 1 21l-.995-2.151C2.437 17.932 4 15.211 4 13H0V3h9.983zM24 3v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151C16.437 17.932 18 15.211 18 13h-3.983V3H24z'/></svg>");
  left: 0;
}
.blockquote--classic::after {
  content: "";
  left: 5px;
  top: 25px;
  width: 1px;
  height: 100%;
  background-color: currentColor;
}

/* Blockquote from https://codepen.io/catalinred/pen/YzBPadm */

.pointer{
    cursor:pointer;
}

.weight-1{
    font-weight: 100;
}
.weight-2{
    font-weight: 200;
}
.weight-3{
    font-weight: 300;
}
.weight-4{
    font-weight: 400;
}
.weight-5{
    font-weight: 500;
}
.weight-6{
    font-weight: 600;
}
.weight-7{
    font-weight: 700;
}
.weight-8{
    font-weight: 800;
}
.weight-9{
    font-weight: 900;
}

#closeNavbarBtn { display: none; }
.navbar-collapse.show #closeNavbarBtn { display: block; }

.hero-img-home {
      background: url('/img/doa-dan-quran.jpg') no-repeat center center/cover;
    }
    
    .hero-img-quran {
      background: url('/img/membaca-quran.webp') no-repeat center center/cover;
    }
    .hero-img-doa {
      background: url('/img/doa-featured-image.jpg') no-repeat center center/cover;
    }
    
    /*.hero-section, .hero-img-home, .hero-img-quran, .hero-img-doa {*/
    .hero-section {
      position: relative;
      /*background: url('https://www.arabiantongue.com/wp-content/uploads/2022/12/Ramadan-reading-AlQuran-schedule.webp') no-repeat center center/cover;*/
      color: white;
      min-height: 90vh;
      display: flex;
      align-items: center;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }
    
    .dot:before{
        content: '•';
        margin: 0 0.25rem 0 0.25rem;
    }
    #sub-navbar {
      top: 56px; /* tinggi navbar utama */
      z-index: 1029;
    }