/*!
  index.css - Pastel Soft Colorful Theme
  - Soft pastel gradient
  - Gentle contrast & friendly UI
  - Bootstrap-safe overrides
*/

/* -----------------------------
   Color variables (root)
----------------------------- */
:root {
    /* Pastel palette */
    --blue: #ffb3c6;              /* Soft pink-peach */
    --red: #ff9aa2;               /* Pastel coral */
    --secondary-blue: #a0e7e5;    /* Mint pastel */
    --secondary-red: #cdb4db;     /* Lavender */
    --cream: #fff7e6;             /* Soft cream */
    --light-brown: #fde2e4;       /* Soft blush */
    --brown: #ffd6a5;             /* Peach pastel */
    --darker-brown: #ffb703;      /* Warm pastel gold */
    --dark-brown: #6d6875;        /* Muted purple-grey */
    --dark: #4a4a4a;              /* Readable dark text */

    /* Gradient */
    --gradient-start: #ffd6e0;
    --gradient-end: #cdb4db;
}

/* -----------------------------
   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: #cdb4db;
}

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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-freude {
    font-family: "Freude", "Nunito", sans-serif;
}

.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: #4a4a4a !important;
}

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

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

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

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

/* -----------------------------
   Buttons (soft pastel)
----------------------------- */
.btn-primary {
    --bs-btn-color: #4a4a4a;
    --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 25px rgba(205,180,219,0.35);
}

.btn-outline-primary {
    color: var(--dark);
    border: 1px solid var(--secondary-red);
    background: transparent;
}

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

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

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

/* -----------------------------
   Circle progress
----------------------------- */
.circle-progress-value {
    stroke-width: 6px;
    stroke: var(--dark);
}

.circle-progress-circle {
    stroke-width: 6px;
    stroke: var(--secondary-blue);
}

.circle-progress-text {
    fill: var(--dark);
    font-size: 1.5em;
}

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

a {
    color: #8d6fd1;
    text-decoration: none;
}

a:hover {
    color: #6d5bd0;
    text-decoration: underline;
}

/* -----------------------------
   Navbar
----------------------------- */
.navbar {
    background: transparent;
    transition: .3s;
}

.navbar-light a {
    color: var(--dark);
}

/* -----------------------------
   Hero / cover sections
----------------------------- */
.cta-cover {
    background: linear-gradient(
        135deg,
        rgba(255, 214, 224, 0.6),
        rgba(205, 180, 219, 0.6)
    ),
    url('../../assets/img/lari2.png') no-repeat center center;
    background-size: cover;
    color: #4a4a4a;
}

.map-cover {
    background: radial-gradient(
        circle at 30% 30%,
        rgba(160,231,229,0.85),
        rgba(205,180,219,0.85)
    ),
    url('../../assets/img/dnatural.png');
    background-size: cover;
    background-position: center;
    color: #4a4a4a;
}

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

.link-icon:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(205,180,219,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: #4a4a4a;
    box-shadow: 0 8px 20px rgba(205,180,219,0.35);
}

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

    .scroll {
        bottom: 20%;
    }
}