/*!
  index.css - Dark Mode Blue Tosca Theme
  - Deep navy background
  - Blue to teal gradient
  - Modern sporty dark UI
  - Bootstrap-safe overrides
*/

/* -----------------------------
   Color variables (root)
----------------------------- */
:root {

    /* Dark blue–tosca palette */
    --blue: #3a86ff;              /* Bright blue accent */
    --red: #2ec4b6;               /* Tosca / teal accent */
    --secondary-blue: #4361ee;    /* Indigo blue */
    --secondary-red: #1abc9c;     /* Soft teal */
    --cream: #0f172a;             /* Main dark background */
    --light-brown: #1e293b;       /* Card background */
    --brown: #0ea5e9;             /* Sky blue */
    --darker-brown: #0284c7;      /* Deep blue */
    --dark-brown: #0a192f;        /* Dark navy */
    --dark: #e2e8f0;              /* Light text */

    /* Gradient */
    --gradient-start: #1d4ed8;
    --gradient-end: #14b8a6;
}

/* -----------------------------
   Fonts & reset
----------------------------- */
@font-face {
    font-family: "First Fun";
    src: url('../../assets/firstfun-webfont.woff');
}

@font-face {
    font-family: "Freude";
    src: url('../../assets/freude-webfont.woff');
}

* {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    color: #fff;
    background-color: #14b8a6;
}

body {
    font-family: "Nunito", sans-serif;
    overflow-x: hidden;
    color: var(--dark);
    background: var(--cream);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-freude {
    font-family: "Freude", "Nunito", sans-serif;
    color: #ffffff;
}

.font-default {
    font-family: "Nunito", sans-serif;
}

/* -----------------------------
   Background helpers
----------------------------- */
.bg-primary, .bg-blue {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) !important;
    color: #ffffff !important;
}

.bg-danger, .bg-red {
    background-color: var(--red) !important;
    color: #ffffff !important;
}

.bg-brown {
    background-color: var(--light-brown);
    color: var(--dark);
}

.tanggal-lama {
    font-style: italic;
    text-decoration: line-through;
    color: #94a3b8;
}

.text-brown {
    color: var(--dark);
}

/* -----------------------------
   Cards / sections
----------------------------- */
.card, .section-dark {
    background-color: var(--light-brown);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
}

/* -----------------------------
   Buttons
----------------------------- */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    --bs-btn-border-color: transparent;

    color: var(--bs-btn-color);
    background-image: var(--bs-btn-bg);
    border: none;
    transition: all .2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(20,184,166,0.35);
}

.btn-outline-primary {
    color: #14b8a6;
    border: 1px solid #14b8a6;
    background: transparent;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
}

/* Soft danger (teal style) */
.btn-danger, .btn-red {
    background-color: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-danger:hover {
    background-color: #0d9488;
}

/* -----------------------------
   Circle progress
----------------------------- */
.circle-progress-value {
    stroke-width: 6px;
    stroke: #14b8a6;
}

.circle-progress-circle {
    stroke-width: 6px;
    stroke: #1e293b;
}

.circle-progress-text {
    fill: #ffffff;
    font-size: 1.5em;
}

/* -----------------------------
   Glow & links
----------------------------- */
.glow-highlight,
.link-icon:hover,
a.glow,
.btn-primary:focus {
    box-shadow: 0 10px 30px rgba(20,184,166,0.35);
}

a {
    color: #38bdf8;
    text-decoration: none;
}

a:hover {
    color: #14b8a6;
    text-decoration: underline;
}

/* -----------------------------
   Navbar
----------------------------- */
.navbar {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    transition: .3s;
}

.navbar-light a {
    color: #e2e8f0;
}

/* -----------------------------
   Hero / cover sections
----------------------------- */
.cta-cover {
    background: linear-gradient(
        135deg,
        rgba(29, 78, 216, 0.8),
        rgba(20, 184, 166, 0.8)
    ),
    url('../../assets/img/lari2.png') no-repeat center center;
    background-size: cover;
    color: #ffffff;
}

.map-cover {
    background: radial-gradient(
        circle at 30% 30%,
        rgba(14,165,233,0.85),
        rgba(20,184,166,0.85)
    ),
    url('../../assets/img/sepasang-pelari.png');
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

/* -----------------------------
   Icons & buttons
----------------------------- */
.link-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.08);
    transition: .3s;
}

.link-icon:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(20,184,166,0.4);
}

/* -----------------------------
   Scroll / misc
----------------------------- */
#topbtn {
    position: fixed;
    right: 3%;
    bottom: 5%;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 12px;
    border: none;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(20,184,166,0.35);
}

/* -----------------------------
   Responsive tweaks
----------------------------- */
@media (max-width: 767px) {
    #topbtn {
        bottom: 3%;
        right: 5%;
    }

    .scroll {
        bottom: 20%;
    }
}