/* ===========================================================
   TRANSPARANSI KAS MASJID
   PROFESSIONAL PUBLIC WEBSITE
=========================================================== */

:root{

    --primary:#0f766e;
    --primary-dark:#115e59;
    --secondary:#16a34a;

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;
    --info:#3b82f6;

    --white:#ffffff;

    --dark:#0f172a;
    --dark-2:#1e293b;

    --text:#334155;
    --muted:#64748b;

    --border:#e5e7eb;

    --body:#f4f7fb;

    --footer-1:#081b33;
    --footer-2:#0b4b63;
    --footer-3:#0f766e;
    --footer-4:#16a34a;

    --gradient:
    linear-gradient(
    135deg,
    #0f766e,
    #16a34a);

    --gradient-dark:
    linear-gradient(
    135deg,
    var(--footer-1),
    var(--footer-2),
    var(--footer-3));

    --radius:18px;

    --radius-lg:28px;

    --shadow-sm:
    0 5px 15px rgba(15,23,42,.05);

    --shadow:
    0 15px 35px rgba(15,23,42,.08);

    --shadow-lg:
    0 30px 70px rgba(15,23,42,.14);

}

/* ===========================================================
RESET
=========================================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--body);

font-family:
'Inter',
sans-serif;

font-size:15px;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:.3s;

}

ul{

list-style:none;

padding:0;

margin:0;

}

section{

padding:90px 0;

}

.container{

max-width:1320px;

}

/* ===========================================================
SCROLLBAR
=========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eef2f7;

}

::-webkit-scrollbar-thumb{

background:#16a34a;

border-radius:30px;

}

/* ===========================================================
HEADER
=========================================================== */

.main-header{

position:sticky;

top:0;

z-index:9999;

background:
rgba(255,255,255,.94);

backdrop-filter:
blur(18px);

border-bottom:
1px solid rgba(0,0,0,.05);

transition:.35s;

}

.navbar{

padding:15px 0;

}

.logo-navbar{

width:58px;

height:58px;

border-radius:50%;

background:#fff;

padding:6px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

}

.navbar-brand{

display:flex;

align-items:center;

gap:16px;

}

.navbar-brand h4{

font-size:22px;

font-weight:800;

color:var(--primary);

margin:0;

}

.navbar-brand small{

color:#64748b;

}

.nav-link{

padding:12px 18px!important;

font-weight:600;

border-radius:14px;

color:#334155!important;

}

.nav-link:hover{

background:#ecfdf5;

color:#15803d!important;

}

.nav-link.active{

background:var(--gradient);

color:#fff!important;

box-shadow:

0 10px 30px

rgba(22,163,74,.25);

}

.navbar-toggler{

border:none;

font-size:28px;

}

.navbar-toggler:focus{

box-shadow:none;

}

/* ===========================================================
BUTTON
=========================================================== */

.btn{

border-radius:14px;

font-weight:600;

padding:12px 24px;

transition:.3s;

}

.btn-success{

border:none;

background:var(--gradient);

box-shadow:

0 15px 35px

rgba(22,163,74,.25);

}

.btn-success:hover{

transform:translateY(-3px);

}

.btn-light{

font-weight:700;

}

.btn-outline-success{

border:2px solid #16a34a;

color:#16a34a;

}

.btn-outline-success:hover{

background:#16a34a;

color:#fff;

}

/* ===========================================================
HERO
=========================================================== */

.hero-section{

position:relative;

overflow:hidden;

min-height:88vh;

display:flex;

align-items:center;

background:

radial-gradient(circle at top right,#22c55e20,transparent 30%),

radial-gradient(circle at bottom left,#2563eb20,transparent 35%),

linear-gradient(#ffffff,#f7fafc);

}

.hero-section::before{

content:"";

position:absolute;

right:-250px;

top:-250px;

width:700px;

height:700px;

border-radius:50%;

background:

rgba(22,163,74,.05);

}

.hero-section::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:450px;

height:450px;

border-radius:50%;

background:

rgba(37,99,235,.05);

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:50px;

background:#ecfdf5;

color:#15803d;

font-weight:700;

margin-bottom:25px;

}

.hero-section h1{

font-size:58px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

color:#0f172a;

}

.hero-section p{

font-size:19px;

color:#64748b;

max-width:700px;

}

.hero-card{

background:#fff;

border-radius:28px;

padding:35px;

box-shadow:var(--shadow-lg);

position:relative;

z-index:2;

}

.hero-title{

font-size:15px;

color:#64748b;

margin-bottom:10px;

}

.hero-saldo{

font-size:42px;

font-weight:800;

color:#16a34a;

margin-bottom:15px;

}

/* ===========================================================
CARD
=========================================================== */

.card{

background:#fff;

border:none;

border-radius:24px;

box-shadow:var(--shadow);

overflow:hidden;

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}

.card-header{

padding:22px 28px;

background:#fff;

border-bottom:1px solid var(--border);

font-size:18px;

font-weight:700;

}

.card-body{

padding:28px;

}

/* ===========================================================
STAT CARD
=========================================================== */

.stat-card{

position:relative;

overflow:hidden;

padding:30px;

background:#fff;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}

.stat-card::after{

content:"";

position:absolute;

right:-45px;

bottom:-45px;

width:150px;

height:150px;

border-radius:50%;

background:

rgba(22,163,74,.06);

}

.stat-card .icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

font-size:30px;

color:#fff;

margin-bottom:20px;

}

.stat-card .title{

font-size:15px;

color:#64748b;

margin-bottom:8px;

}

.stat-card .value{

font-size:34px;

font-weight:800;

color:#0f172a;

line-height:1.2;

}

.stat-card small{

display:block;

margin-top:10px;

color:#94a3b8;

}

/* ===========================================================
SECTION TITLE
=========================================================== */

.section-title{

margin-bottom:55px;

}

.section-title h2{

font-size:42px;

font-weight:800;

margin-bottom:10px;

color:#0f172a;

}

.section-title p{

font-size:17px;

color:#64748b;

}

/* ===========================================================
TABLE
=========================================================== */

.table{

margin:0;

}

.table thead{

background:var(--gradient);

color:#fff;

}

.table thead th{

padding:18px;

border:none;

font-weight:700;

white-space:nowrap;

}

.table tbody td{

padding:18px;

vertical-align:middle;

border-color:#edf2f7;

}

.table tbody tr{

transition:.25s;

}

.table tbody tr:hover{

background:#f0fdf4;

}

.table tfoot{

background:#f8fafc;

font-weight:700;

}

/* ===========================================================
FORM
=========================================================== */

.form-label{

font-weight:600;

margin-bottom:8px;

}

.form-control,

.form-select{

height:54px;

border-radius:14px;

border:1px solid var(--border);

box-shadow:none;

}

textarea.form-control{

height:auto;

padding-top:15px;

}

.form-control:focus,

.form-select:focus{

border-color:#16a34a;

box-shadow:

0 0 0 .2rem

rgba(22,163,74,.18);

}

/* ===========================================================
BADGE
=========================================================== */

.badge{

padding:8px 14px;

border-radius:50px;

font-size:12px;

font-weight:700;

}

/* ===========================================================
PROGRESS
=========================================================== */

.progress{

height:10px;

background:#e5e7eb;

border-radius:30px;

overflow:hidden;

}

.progress-bar{

border-radius:30px;

}

/* ===========================================================
CHART
=========================================================== */

.chart-box{

position:relative;

width:100%;

height:420px;

}

/* ===========================================================
ICON BOX
=========================================================== */

.icon-box{

display:flex;

gap:18px;

align-items:flex-start;

}

.icon-box i{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

background:#ecfdf5;

border-radius:18px;

font-size:28px;

color:#16a34a;

}

/* ===========================================================
CTA
=========================================================== */

.cta-box{

background:var(--gradient);

padding:60px;

border-radius:30px;

color:#fff;

box-shadow:var(--shadow-lg);

position:relative;

overflow:hidden;

}

.cta-box::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:280px;

height:280px;

border-radius:50%;

background:

rgba(255,255,255,.08);

}

.cta-box h2{

font-size:40px;

font-weight:800;

margin-bottom:18px;

}

.cta-box p{

font-size:18px;

opacity:.95;

}

.cta-box .btn{

background:#fff;

color:#16a34a;

border:none;

font-weight:700;

}

/* ===========================================================
ANIMATION
=========================================================== */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.fade-up.show{

opacity:1;

transform:none;

}

/* ===========================================================
UTILITY
=========================================================== */

.rounded-xl{

border-radius:24px;

}

.shadow-hover{

transition:.35s;

}

.shadow-hover:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}

.bg-gradient-success{

background:var(--gradient);

color:#fff;

}

.text-gradient{

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ===========================================================
FOOTER CTA
=========================================================== */

.footer-cta{

margin-top:80px;

padding:70px 0;

background:

linear-gradient(
135deg,
#16a34a,
#0f766e);

color:#fff;

position:relative;

overflow:hidden;

}

.footer-cta::before{

content:"";

position:absolute;

right:-150px;

top:-150px;

width:420px;

height:420px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.footer-cta::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:380px;

height:380px;

border-radius:50%;

background:rgba(255,255,255,.05);

}

.footer-cta h2{

font-size:42px;

font-weight:800;

margin-bottom:18px;

position:relative;

z-index:2;

}

.footer-cta p{

font-size:18px;

opacity:.95;

margin-bottom:0;

position:relative;

z-index:2;

}

.footer-cta .btn{

position:relative;

z-index:2;

background:#fff;

color:#0f766e;

border:none;

padding:16px 28px;

font-weight:700;

box-shadow:

0 15px 35px rgba(0,0,0,.18);

}

/* ===========================================================
FOOTER
=========================================================== */

.footer{

position:relative;

overflow:hidden;

background:

linear-gradient(

135deg,

var(--footer-1),

var(--footer-2),

var(--footer-3),

var(--footer-4)

);

color:#fff;

padding:90px 0 25px;

}

.footer::before{

content:"";

position:absolute;

right:-220px;

top:-220px;

width:550px;

height:550px;

border-radius:50%;

background:

rgba(255,255,255,.05);

}

.footer::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:450px;

height:450px;

border-radius:50%;

background:

rgba(255,255,255,.04);

}

.footer .container{

position:relative;

z-index:5;

}

/* ===========================================================
LOGO
=========================================================== */

.footer-logo{

width:82px;

margin-bottom:20px;

filter:

drop-shadow(

0 12px 25px

rgba(0,0,0,.25)

);

}

.footer h3{

font-size:28px;

font-weight:800;

margin-bottom:18px;

color:#fff;

}

.footer h5{

position:relative;

padding-bottom:14px;

margin-bottom:25px;

font-size:20px;

font-weight:700;

color:#fff;

}

.footer h5::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:60px;

height:4px;

border-radius:50px;

background:#22c55e;

}

.footer-desc{

color:#d9e5ef;

line-height:1.9;

}

/* ===========================================================
MENU
=========================================================== */

.footer-menu{

display:flex;

flex-direction:column;

gap:10px;

}

.footer-menu a{

display:flex;

align-items:center;

padding:12px 16px;

border-radius:14px;

color:#e2e8f0;

transition:.3s;

}

.footer-menu a:hover{

padding-left:24px;

background:

rgba(255,255,255,.10);

color:#fff;

}

/* ===========================================================
INFO
=========================================================== */

.footer-info{

display:flex;

flex-direction:column;

gap:18px;

}

.footer-info p{

display:flex;

align-items:flex-start;

gap:12px;

margin:0;

line-height:1.8;

color:#d9e5ef;

}

.footer-info i{

font-size:18px;

color:#4ade80;

margin-top:3px;

min-width:20px;

}

/* ===========================================================
STAT
=========================================================== */

.footer-stat{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-stat div{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

border-radius:18px;

background:

rgba(255,255,255,.08);

backdrop-filter:

blur(12px);

border:

1px solid

rgba(255,255,255,.08);

}

.footer-stat span{

color:#d9e5ef;

}

.footer-stat strong{

font-size:18px;

font-weight:800;

color:#fff;

}

/* ===========================================================
LINE
=========================================================== */

.footer-line{

margin:55px 0 25px;

border-color:

rgba(255,255,255,.08);

}

/* ===========================================================
BOTTOM
=========================================================== */

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

font-size:14px;

color:#d6e3ea;

}

/* ===========================================================
SOCIAL
=========================================================== */

.footer-social{

display:flex;

gap:12px;

margin-top:25px;

}

.footer-social a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

rgba(255,255,255,.10);

color:#fff;

transition:.3s;

}

.footer-social a:hover{

background:#22c55e;

transform:translateY(-4px);

}

/* ===========================================================
SCROLL TOP
=========================================================== */

#scrollTop{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

display:none;

align-items:center;

justify-content:center;

border:none;

border-radius:50%;

z-index:9999;

box-shadow:

0 20px 45px

rgba(22,163,74,.35);

}

/* ===========================================================
RESPONSIVE 1200
=========================================================== */

@media (max-width:1200px){

.hero-section h1{

font-size:48px;

}

.chart-box{

height:380px;

}

}

/* ===========================================================
RESPONSIVE 992
=========================================================== */

@media (max-width:992px){

section{

padding:70px 0;

}

.hero-section{

min-height:auto;

padding:90px 0;

text-align:center;

}

.hero-section h1{

font-size:42px;

}

.hero-section p{

margin:auto;

}

.hero-card{

margin-top:45px;

}

.navbar-collapse{

padding-top:20px;

}

.footer{

text-align:center;

}

.footer h5::after{

left:50%;

transform:translateX(-50%);

}

.footer-logo{

margin:auto auto 20px;

}

.footer-menu{

align-items:center;

}

.footer-info p{

justify-content:center;

}

.footer-stat div{

text-align:left;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.chart-box{

height:340px;

}

}

/* ===========================================================
RESPONSIVE 768
=========================================================== */

@media (max-width:768px){

.hero-section h1{

font-size:34px;

}

.hero-section p{

font-size:16px;

}

.card-body{

padding:22px;

}

.card-header{

padding:18px 22px;

}

.stat-card{

padding:24px;

}

.stat-card .value{

font-size:28px;

}

.cta-box{

padding:40px;

text-align:center;

}

.cta-box h2{

font-size:30px;

}

.footer-cta{

text-align:center;

}

.footer-cta h2{

font-size:32px;

}

.footer-cta .btn{

margin-top:25px;

width:100%;

}

.chart-box{

height:300px;

}

.table{

font-size:14px;

}

}

/* ===========================================================
RESPONSIVE 576
=========================================================== */

@media (max-width:576px){

section{

padding:55px 0;

}

.hero-section{

padding:70px 0;

}

.hero-section h1{

font-size:28px;

}

.hero-badge{

font-size:13px;

padding:10px 18px;

}

.hero-card{

padding:25px;

}

.hero-saldo{

font-size:32px;

}

.logo-navbar{

width:46px;

height:46px;

}

.navbar-brand h4{

font-size:17px;

}

.nav-link{

margin-bottom:8px;

}

.btn{

width:100%;

}

.table thead th{

font-size:13px;

}

.table tbody td{

font-size:13px;

padding:14px;

}

.chart-box{

height:260px;

}

.footer{

padding:70px 0 20px;

}

.footer h3{

font-size:24px;

}

.footer h5{

font-size:18px;

}

.footer-stat div{

padding:15px;

}

.footer-stat strong{

font-size:16px;

}

.footer-bottom{

font-size:13px;

}

#scrollTop{

width:50px;

height:50px;

right:15px;

bottom:15px;

}

}

/* ===========================================================
PRINT
=========================================================== */

@media print{

.main-header,

.footer,

.footer-cta,

#scrollTop,

.btn,

form,

.navbar{

display:none !important;

}

body{

background:#fff;

color:#000;

}

section{

padding:0;

margin:0;

}

.card{

border:1px solid #ddd;

box-shadow:none;

}

.table{

font-size:12px;

}

}

/* ===========================================================
HELPER
=========================================================== */

.text-success{

color:#16a34a !important;

}

.text-danger{

color:#dc2626 !important;

}

.text-warning{

color:#f59e0b !important;

}

.bg-success{

background:#16a34a !important;

}

.bg-primary{

background:#2563eb !important;

}

.bg-danger{

background:#dc2626 !important;

}

.bg-warning{

background:#f59e0b !important;

}

/* ===========================================================
SELECTION
=========================================================== */

::selection{

background:#16a34a;

color:#fff;

}

/* ===========================================================
SMOOTH HOVER
=========================================================== */

.card,
.btn,
.nav-link,
.footer-menu a,
.footer-social a,
.stat-card{

transition:all .3s ease;

}

/* ===========================================================
IMAGE
=========================================================== */

img{

user-select:none;

-webkit-user-drag:none;

}

/* ===========================================================
END OF FILE
=========================================================== */