* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;

font-family: Arial, Helvetica, sans-serif;

/* BACKGROUND SOFT PINK */
background:
    linear-gradient(
        180deg,
        #fff0f6 0%,
        #fff7fb 45%,
        #fdeff6 100%
    );

color: #3a2630;

min-height: 100vh;

}

/* =========================
CONTAINER
========================= */

.container {
width: min(1100px, 94%);
margin: auto;
}

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

header {
text-align: center;

padding: 34px 15px 20px;

}

header h1 {
margin: 0;

font-size: clamp(34px, 7vw, 62px);

color: #c94f7d;

letter-spacing: -2px;

text-shadow:
    0 2px 10px rgba(201, 79, 125, 0.08);

}

header p {
margin: 8px 0 0;

font-size: 19px;

color: #735763;

}

/* =========================
INTRO
========================= */

.intro {
text-align: center;

margin: 10px auto 28px;

}

.intro h2 {
margin: 0;

font-size: 25px;

color: #4b303b;

}

.intro p {
color: #866d78;

margin-top: 8px;

}

/* =========================
CATEGORY
========================= */

.category-grid {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 18px;

margin-bottom: 30px;

}

.category {
min-height: 190px;

border: 1px solid #efd1df;

border-radius: 24px;

background:
    rgba(255, 255, 255, 0.84);

padding: 25px;

cursor: pointer;

box-shadow:
    0 8px 24px rgba(170, 80, 120, 0.08);

transition: 0.25s ease;

}

.category:hover {
transform: translateY(-4px);

box-shadow:
    0 13px 30px rgba(170, 80, 120, 0.13);

border-color: #e5b4c9;

}

.category .icon {
font-size: 42px;
}

.category h3 {
margin: 10px 0 6px;

font-size: 23px;

color: #4b303b;

}

.category p {
margin: 0;

color: #856d78;

line-height: 1.5;

}

/* =========================
KOTA
========================= */

.city-list {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 14px;

margin-top: 25px;

}

.city {
display: block;

text-align: center;

text-decoration: none;

border: 1px solid #e6bfd0;

background:
    rgba(255, 255, 255, 0.84);

color: #a5225b;

padding: 16px;

border-radius: 18px;

font-weight: bold;

box-shadow:
    0 5px 16px rgba(170, 80, 120, 0.05);

transition: 0.2s ease;

}

.city:hover {
background: #ffe7f0;

transform: translateY(-2px);

box-shadow:
    0 8px 20px rgba(170, 80, 120, 0.08);

}

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

.page-card {
background:
rgba(255, 255, 255, 0.84);

border: 1px solid #efd1df;

border-radius: 24px;

padding: 25px;

box-shadow:
    0 8px 24px rgba(170, 80, 120, 0.08);

}

/* =========================
TOMBOL KEMBALI
========================= */

.back {
display: inline-block;

margin-bottom: 20px;

color: #a5225b;

text-decoration: none;

font-weight: bold;

}

.back:hover {
color: #c94f7d;
}

/* =========================
NOTICE KATALOG
========================= */

.notice {
margin: 0 0 25px;

padding: 15px 18px;

border: 1px solid #e8b6ca;

border-radius: 14px;

background:
    rgba(255, 235, 244, 0.9);

color: #b92b61;

font-weight: bold;

line-height: 1.5;

box-shadow:
    0 5px 15px rgba(170, 80, 120, 0.04);

}

.notice small {
display: block;

color: #735763;

font-weight: normal;

margin-top: 5px;

}

/* =========================
HASIL KATALOG
========================= */

.results h2 {
margin-bottom: 5px;

color: #4b303b;

}

.result-note {
color: #806873;

margin-top: 0;

}

/* =========================
GRID KARTU
========================= */

.cards {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 16px;

}

/* =========================
KARTU KATALOG
========================= */

.card {
background:
rgba(255, 255, 255, 0.88);

border: 1px solid #efd5e0;

border-radius: 20px;

overflow: hidden;

box-shadow:
    0 7px 20px rgba(170, 80, 120, 0.07);

transition: 0.2s ease;

}

.card:hover {
transform: translateY(-3px);

box-shadow:
    0 11px 25px rgba(170, 80, 120, 0.11);

}

/* =========================
FOTO / AREA ATAS KARTU
========================= */

.photo {
height: 150px;

background:
    linear-gradient(
        135deg,
        #f6d5e3,
        #eadced
    );

display: grid;

place-items: center;

font-size: 42px;

}

/* =========================
ISI KARTU
========================= */

.card-body {
padding: 16px;
}

.card h3 {
margin: 0 0 7px;

color: #4b303b;

}

.card p {
margin: 5px 0;

color: #77626c;

font-size: 14px;

line-height: 1.45;

}

/* =========================
TOMBOL LINK RESMI
========================= */

.button {
display: inline-block;

margin-top: 10px;

text-decoration: none;

background: #c94f7d;

color: #ffffff;

padding: 10px 15px;

border-radius: 999px;

font-size: 14px;

font-weight: bold;

transition: 0.2s ease;

}

.button:hover {
background: #b84270;

transform: translateY(-1px);

}

/* =========================
FEEDBACK
========================= */

.feedback {
margin: 45px auto 25px;

background:
    rgba(255, 232, 242, 0.82);

border: 1px solid #efcbd9;

border-radius: 24px;

padding: 28px;

text-align: center;

box-shadow:
    0 6px 20px rgba(170, 80, 120, 0.05);

}

.feedback h2 {
margin: 0 0 8px;

color: #4b303b;

}

.feedback p {
color: #806873;
}

.feedback a {
display: inline-block;

margin-top: 8px;

color: #a5225b;

font-weight: bold;

text-decoration: none;

border-bottom: 1px dashed #a5225b;

}

.feedback a:hover {
color: #c94f7d;
}

/* =========================
KOMENTAR / SARAN
========================= */

.comment-box {
max-width: 720px;

margin: 0 auto;

background:
    rgba(255, 255, 255, 0.86);

border: 1px solid #efd1df;

border-radius: 24px;

padding: 25px;

box-shadow:
    0 8px 24px rgba(170, 80, 120, 0.08);

}

textarea {
width: 100%;

min-height: 150px;

border: 1px solid #e6bfd0;

border-radius: 16px;

padding: 15px;

font: inherit;

resize: vertical;

background: #fffafd;

color: #3a2630;

}

textarea:focus {
outline: none;

border-color: #d98aaa;

box-shadow:
    0 0 0 3px rgba(217, 138, 170, 0.12);

}

/* =========================
TOMBOL KIRIM
========================= */

.send {
border: 0;

margin-top: 12px;

background: #c94f7d;

color: #ffffff;

padding: 12px 22px;

border-radius: 999px;

font-weight: bold;

cursor: pointer;

transition: 0.2s ease;

}

.send:hover {
background: #b84270;

transform: translateY(-1px);

}

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

footer {
text-align: center;

color: #927985;

padding: 30px 15px 45px;

font-size: 13px;

}

footer strong {
color: #b45a7c;
}

footer a {
color: #927985;
}

/* =========================
TAMPILAN HP
========================= */

@media (max-width: 700px) {

.category-grid,
.cards,
.city-list {
    grid-template-columns: 1fr;
}

.category {
    min-height: 150px;

    padding: 22px;
}

.category .icon {
    font-size: 38px;
}

.category h3 {
    font-size: 21px;
}

.cards {
    gap: 14px;
}

.photo {
    height: 135px;
}

header {
    padding-top: 28px;
}

header h1 {
    letter-spacing: -1px;
}

header p {
    font-size: 17px;
}

.feedback {
    padding: 24px 18px;
}

}

/* =========================
REDUCE MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

html {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    transition: none !important;
    animation: none !important;
}

}