/*
4. Trik HEX 8-digit

Bisa juga langsung pakai hex dengan alpha (A):

:root {
  --main-color: #6FB1FC;
  --main-color-50: #6FB1FC80;  # 80 hex = ~50% transparan
}
Formatnya: #RRGGBBAA

Hex Alpha	Desimal	Opacity
00	0	0% (transparan penuh)
1A	26	10%
33	51	20%
4D	77	30%
66	102	40%
80	128	50%
99	153	60%
B3	179	70%
CC	204	80%
E6	230	90%
FF	255	100% (solid)
*/

:root, [data-bs-theme="light"]{
    --main-color        : #da1130;
    --main-color-strong : #da1130;
    --main-color-50     : #da113080;

    --blur-color-bg     : #fea71066;
    --blur-color-bg-2   : #fea710B3;
    
    --wave-fill         : #ffffffcc;
    --blur-glass-bg     : #FFFFFF33;
    --main-image-bg     : url("/templates/khitan-superhero/images/bg-home-desktop.webp");

    --color-heading     : #e4e4e4;
    --color-text        : #e4e4e4;
    --color-text-inverse: #e6e6e6;

    --animation-time    : 2s;
}

[data-bs-theme="dark"]{
    --blur-color-bg     : #000000B3;
    --blur-color-bg-2   : #000000B3;

    --wave-fill         : #a0a0a0cc;
    --blur-glass-bg     : #00000066;
    
    --color-heading     : #FFFFFF;
    --color-text        : #e6e6e6;
    --color-text-inverse: #e6e6e6;
}

html {
    scroll-behavior: smooth;
}

.wave { fill: var(--wave-fill); }

.btn-primary {
    --bs-btn-color: var(--color-heading) ;

    --bs-btn-bg: var(--main-color) ;
    --bs-btn-hover-bg: var(--main-color-strong);

    --bs-btn-border-color: var(--main-color-strong);
    --bs-btn-hover-border-color: var(--main-color-strong);

    --bs-btn-active-bg: var(--main-color-strong);
    --bs-btn-active-border-color: var(--main-color-strong);
}


body{
    font-family: Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.card-body, body{
    color: var(--color-text) !important;
}

section{
  position: relative;
  padding: 1.5rem;
}

section>div.container{
  margin-top: 125px;
  margin-bottom: 125px;
}

.main-bg{
    background: 
        var(--main-image-bg) no-repeat;
    background-size: cover;               
    background-repeat: no-repeat;
    background-position: center center;
}

#root{
  background-color: #17283b;
}

.opener-bg{
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    /* border: 0.25px solid var(--main-color-50); */
    top: 0;
    height: 100%;
    left: 50%;
    width: 25rem;
    transform: translate(-50%);
}

.master-bg-gradient{
    background: linear-gradient(var(--main-color-50),var(--blur-color-bg-2));
}

.master-bg-solid{
    background-color: var(--main-color);
}

.master-bg-inverse-gradient{
    background: linear-gradient(var(--blur-color-bg-2), var(--main-color-50));
}

.master-bg-solid-gradient{
    background: linear-gradient(var(--main-color),var(--blur-color-bg-2));
}

.master-bg-solid-inverse-gradient{
    background: linear-gradient(var(--blur-color-bg-2),var(--main-color));
}

.bride-frame{
    position: relative;
    height: 200px;
    margin: auto;
}


.bride-frame img{
    position: absolute;
    object-fit: cover;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.opener-bg{
    top: 0;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-custom {
    background: 
        linear-gradient(var(--main-color-50),var(--main-color-50)),
        url("/templates/khitan-superhero/images/bg-ornament.webp") no-repeat;
    background-size: cover;               
    background-repeat: no-repeat;
    background-position: center center;
}

.ornament{
    overflow: hidden; 
}

.corner {
  position: absolute;
  height: 200px;
  aspect-ratio: 1 / 1;
  overflow: hidden; /* jadi masker untuk img */
}

.top-left{
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(-1);
}

.top-right{
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(180deg);
}

.top-center{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.left-center{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.right-center{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}


.bottom-center{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-left{
    position: absolute;
    left: 0;
    bottom: 0;
}

.bottom-right{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: scaleX(-1);
}

.corner img {
  position: absolute;
}

section>.container{
  z-index: 99;
}


.glasses{
    background: var(--blur-glass-bg); /* semi-transparan */
    backdrop-filter: blur(20px); /* efek blur kaca */
    -webkit-backdrop-filter: blur(20px); /* untuk Safari */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.glasses-black{
    background: #00000080; /* semi-transparan */
    backdrop-filter: blur(20px); /* efek blur kaca */
    -webkit-backdrop-filter: blur(20px); /* untuk Safari */
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title-name{
  font-family: "Bevan", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--color-heading);
}


.heading-text, .title-text,.title-bride-home,.title-text-home{
  font-family: "Protest Guerrilla", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--color-heading);
}

            /* Navigasi Attr */
/*=========================================*/

a.nav-link{
    font-family: Verdana, Geneva, Tahoma, sans-serif, Arial, Helvetica
}

a.nav-link.active{
    font-weight: bold;
}


.glass-navbar {
    background: rgba(255, 255, 255, 0.1); /* semi-transparan */
    backdrop-filter: blur(20px); /* efek blur kaca */
    -webkit-backdrop-filter: blur(20px); /* untuk Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-fixed{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%; /* default (col full di xs) */
  z-index: 99;
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li.active>a {
    background: var(--main-color);
    color: #fff;
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li {
    border-color: var(--main-color-strong)
}


.listGuestBook>.card>.card-body, 
.listGuestBook>.card>.card-header>.card-title,
.listGuestBook>.card>.card-footer
{
  color: var(--color-text-inverse) !important;
}


.custom-shape {
  position: relative;
  width: 100%;

  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  overflow: hidden;
  background: linear-gradient(#edfd82cc,#FFFFFF00);
}


/* Tambahan efek bayangan halus biar terlihat lebih "ambient" */
.custom-shape {
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

.top-half-circle{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 10%;
}

.bottom-half-circle{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
}


/* sm breakpoint */
@media (min-width: 576px) {
  .custom-fixed {
    width: calc((100% / 12) * 7);
  }
}

/* md breakpoint */
@media (min-width: 768px) {
  .custom-fixed {
    width: calc((100% / 12) * 6);
  }
}

/* lg breakpoint */
@media (min-width: 992px) {
  .custom-fixed {
    width: calc((100% / 12) * 5);
  }
}

/* xl breakpoint */
@media (min-width: 1200px) {
  .custom-fixed {
    width: calc((100% / 12) * 4);
  }
}

/* xxl breakpoint */
@media (min-width: 1400px) {
  .custom-fixed {
    width: calc((100% / 12) * 3);
  }
}

/* auto hide */
.custom-navbar {
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}

.custom-navbar.navbar-hidden {
  transform: translateY(100%);
}

@media (min-width: 480px) { /* Mulai dari layar desktop (Bootstrap breakpoint lg) */
    .custom-navbar {
        transform: translateY(0); /* default muncul */
        transition: transform 0.3s ease-in-out;
    }
    .custom-navbar.navbar-hidden {
        transform: translateY(100%); /* sembunyi ke bawah */
    }
}
        /* End Of Navigasi Attr */
/*=========================================*/