/* ===========================
   Wedding Soft Romantic Theme
   Mobile First
=========================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Playfair Display", serif;
}

body {
	background: linear-gradient(180deg, #fff4f6, #fdeff2);
	color: #5d4a4a;
}

/* wrapper */
.wrapper {
	max-width: 480px;
	margin: 0 auto;
	padding: 20px 18px 40px;
	border-radius: 20px;
	background: #ffffffaa;
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
	margin-top: 20px;
}

/* ===========================
   Flower + Couple Photo Frame
=========================== */

.flower-frame {
	position: relative;
	width: 220px;
	height: 220px;
	margin: 0 auto 15px;
}

/* bunga */
.flower-bg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .95;
}

/* lingkaran foto */
.photo-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;

	border: 4px solid #ffe6ea;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
	background: white;
}

/* foto */
.photo-circle {
	box-shadow:
		0 8px 18px rgba(0, 0, 0, .15),
		0 0 20px rgba(255, 150, 170, .25);
}

.photo-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===========================
   Wedding Title
=========================== */

.wedding-title {
	text-align: center;
	margin-top: 10px;
	color: #c07a84;
	font-family: "Playfair Display", serif;
	font-size: 18px;
	letter-spacing: 1px;
}

/* Nama pengantin */
.wedding-title span {
	display: block;
	margin-top: 4px;
	font-size: 26px;
	font-weight: 600;
	color: #b16973;
	font-family: "Great Vibes", cursive;
	text-shadow: 0 2px 8px rgba(255, 180, 190, .35);
}

/* Judul / teks */
h2 {
	text-align: center;
	color: #b76e79;
	margin-bottom: 15px;
	font-size: 22px;
}

/* Form */
.frm label {
	font-size: 14px;
	color: #7a6363;
}

.frm input[type="text"],
.frm textarea {
	width: 100%;
	border-radius: 14px;
	border: 1px solid #e6c5cb;
	padding: 12px 14px;
	margin-top: 6px;
	background: #fff9fa;
	font-size: 14px;
}

.frm textarea {
	min-height: 70px;
	resize: none;
}

/* button */
.btn {
	width: 100%;
	padding: 12px;
	margin-top: 4px;
	border: none;
	border-radius: 20px;
	background: linear-gradient(135deg, #dfa3af, #c9828b);
	color: white;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .5px;
	box-shadow: 0 6px 14px rgba(191, 110, 122, .35);
}

.btn:active {
	transform: scale(.98);
}

/* hasil submit */
.result-box {
	background: #fff9fb;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid #f0d7dc;
	margin-top: 14px;
}

/* teks tengah */
.center {
	text-align: center;
}

/* animasi lembut */
.wrapper,
.btn,
.result-box {
	transition: .25s ease;
}

/* Animasi bunga berputar elegan */
.flower-bg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .95;

	animation: rotateFlower 28s linear infinite;
	transform-origin: center;
}

/* ===========================
   Success Wedding Theme Box
=========================== */

.success-box {
	background: #fff9fb;
	border: 1px solid #f3d6db;
	border-radius: 20px;
	padding: 18px 16px;
	margin-top: 16px;
	text-align: center;
	color: #735a5a;

	box-shadow: 0 10px 20px rgba(0, 0, 0, .07);
}

/* icon love */
.success-icon {
	font-size: 30px;
	margin-bottom: 6px;
}

/* judul */
.success-box h2 {
	color: #b76e79;
	font-family: "Playfair Display", serif;
	font-size: 18px;
	margin-bottom: 6px;
}

/* teks */
.success-box p {
	font-size: 14px;
}

/* nama ditebalkan */
.success-box strong {
	color: #b16973;
}

/* tombol kembali */
.back-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 16px;

	background: linear-gradient(135deg, #dfa3af, #c9828b);
	color: white;
	text-decoration: none;
	border-radius: 16px;

	font-size: 13px;
	box-shadow: 0 6px 12px rgba(191, 110, 122, .35);
}

.back-btn:active {
	transform: scale(.97);
}

/* Keyframes rotasi */
@keyframes rotateFlower {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* ===========================
   Responsive
=========================== */

@media (min-width:480px) {
	.wrapper {
		margin-top: 30px;
	}
}

@media (min-width:768px) {
	body {
		display: flex;
		justify-content: center;
	}
}

@media (max-width:390px) {
	.flower-frame {
		width: 190px;
		height: 190px;
	}
	.photo-circle {
		width: 105px;
		height: 105px;
	}
	.wedding-title {
		font-size: 16px;
	}
	.wedding-title span {
		font-size: 24px;
	}
	.success-box h2 {
		font-size: 17px;
	}
}