/**
 * AkuIslam Kiblat — gaya komponen.
 *
 * Semua selector dinamakan dalam namespace .ak-kiblat supaya tidak
 * membocorkan gaya ke bahagian lain halaman. Tiada font luar, tiada
 * imej luar, tiada @import.
 *
 * @package AkuIslam_Kiblat
 * @version 1.7.0
 */

/*
 * position dan z-index di sini BUKAN hiasan.
 *
 * Pada akuislam.com, widget Jetpack Instant Search dalam sidebar kanan
 * dirender kira-kira 65 piksel lebih tinggi daripada bekasnya sendiri pada
 * skrin sempit, lalu mengecat di atas bahagian bawah kandungan artikel.
 * Baris terakhir penafian kami hilang di bawahnya — kelihatan seperti teks
 * terpotong, sedangkan susun aturnya betul sepanjang masa.
 *
 * Itu isu tapak, bukan isu plugin, dan ia menjejaskan hujung setiap artikel
 * pada mudah alih. Menjadikan komponen ini elemen berposisi mengangkatnya
 * ke atas dalam susunan cat tanpa mengubah susun atur langsung, jadi
 * kandungan kami tidak menjadi mangsa.
 */
.ak-kiblat {
	position: relative;
	z-index: 1;

	--akk-bg: #ffffff;
	--akk-surface: #f6f8f7;
	--akk-border: #dfe5e2;
	--akk-text: #1d2521;
	--akk-muted: #5a6660;
	--akk-accent: #0f6b4f;
	--akk-accent-strong: #0b543e;
	--akk-accent-soft: #e6f2ed;
	--akk-needle: #b3311f;
	--akk-aligned: #0f6b4f;
	--akk-focus: #0b543e;
	--akk-btn-secondary-border: #c7ded4;
	--akk-btn-secondary-hover: #d8ebe3;
	--akk-btn-ghost-hover: #eceeed;
	--akk-note-bg: #fdf5e2;
	--akk-note-border: #f0dfae;
	--akk-note-text: #6b4a05;
	--akk-aligned-bg: var(--akk-accent-soft);
	--akk-aligned-border: #b6d8c9;
	--akk-aligned-text: #0b3d2c;
	--akk-radius: 14px;
	--akk-radius-sm: 10px;
	--akk-space: 16px;
	--akk-space-sm: 10px;
	--akk-font: inherit;

	box-sizing: border-box;
	max-width: 560px;
	margin: 0 0 24px;
	color: var(--akk-text);
	font-family: var(--akk-font);
	line-height: 1.55;
	text-align: left;
}

.ak-kiblat *,
.ak-kiblat *::before,
.ak-kiblat *::after {
	box-sizing: border-box;
}

.ak-kiblat [hidden] {
	display: none !important;
}

.ak-kiblat__inner {
	padding: var(--akk-space);
	background: var(--akk-bg);
	border: 1px solid var(--akk-border);
	border-radius: var(--akk-radius);
}

.ak-kiblat__title {
	margin: 0 0 6px;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--akk-text);
}

/* ---------------------------- Butang ---------------------------- */

.ak-kiblat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--akk-space-sm);
	margin: 0 0 var(--akk-space-sm);
}

.ak-kiblat__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 44px;
	padding: 12px 18px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--akk-radius-sm);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ak-kiblat__button--primary {
	width: 100%;
	color: #ffffff;
	background: var(--akk-accent);
	border-color: var(--akk-accent);
}

.ak-kiblat__button--primary:hover {
	background: var(--akk-accent-strong);
	border-color: var(--akk-accent-strong);
}

.ak-kiblat__button--secondary {
	color: var(--akk-accent-strong);
	background: var(--akk-accent-soft);
	border-color: var(--akk-btn-secondary-border);
}

.ak-kiblat__button--secondary:hover {
	background: var(--akk-btn-secondary-hover);
}

.ak-kiblat__button--ghost {
	color: var(--akk-text);
	background: var(--akk-surface);
	border-color: var(--akk-border);
}

.ak-kiblat__button--ghost:hover {
	background: var(--akk-btn-ghost-hover);
}

.ak-kiblat__button:focus-visible {
	outline: 3px solid var(--akk-focus);
	outline-offset: 2px;
}

.ak-kiblat__button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* -------------------- Nama tempat dan chip keadaan --------------- */

.ak-kiblat__place {
	margin: 0 0 var(--akk-space-sm);
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--akk-text);
}

.ak-kiblat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--akk-space-sm);
}

.ak-kiblat__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 999px;
	border: 1px solid var(--akk-border);
	background: var(--akk-bg);
	color: var(--akk-muted);
}

/* Titik keadaan. Warna bukan satu-satunya isyarat — teks chip sendiri
   menyatakan keadaannya, jadi ia kekal difahami tanpa melihat warna. */
.ak-kiblat__chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
	flex: 0 0 auto;
}

.ak-kiblat__chip--ok {
	color: var(--akk-accent-strong);
	border-color: var(--akk-btn-secondary-border);
	background: var(--akk-accent-soft);
}

.ak-kiblat__chip--ok::before {
	opacity: 1;
}

.ak-kiblat__chip--warn {
	color: var(--akk-note-text);
	border-color: var(--akk-note-border);
	background: var(--akk-note-bg);
}

.ak-kiblat__chip--busy {
	color: var(--akk-text);
}

/* ---------------------------- Status ---------------------------- */

.ak-kiblat__status {
	margin: 0 0 var(--akk-space-sm);
	min-height: 1.5em;
	font-size: 0.95rem;
	color: var(--akk-muted);
}

.ak-kiblat__status[aria-busy="true"] {
	color: var(--akk-accent-strong);
}

/* ---------------------------- Keputusan -------------------------
 *
 * Dua kad statistik bersebelahan: sudut kiblat dan jarak. Nombor ialah
 * perkara yang pengguna datang untuk lihat, jadi ia diberi saiz dan
 * ruang yang sepadan dengan kepentingannya.
 * ------------------------------------------------------------------ */

.ak-kiblat__result {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--akk-space-sm);
	margin: 0 0 var(--akk-space);
}

/* Pada skrin paling sempit, dua kad bersebelahan masih muat asalkan
   nombornya mengecil sedikit. Bertindan menegak menolak nombor kedua
   terlalu jauh ke bawah. */
@media (max-width: 380px) {
	.ak-kiblat__stat {
		padding: 12px;
	}
}

.ak-kiblat__stat {
	padding: 14px 16px;
	background: var(--akk-surface);
	border: 1px solid var(--akk-border);
	border-radius: var(--akk-radius-sm);
}

.ak-kiblat__stat-label {
	margin: 0 0 4px;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--akk-muted);
}

.ak-kiblat__stat-value {
	margin: 0;

	/* nowrap dengan saiz yang menyesuaikan diri: "6,979 km" yang terbelah
	   kepada dua baris membaca seperti dua nombor berasingan. */
	white-space: nowrap;
	font-size: clamp(1.3rem, 5.8vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--akk-accent-strong);
	font-variant-numeric: tabular-nums;
}

.ak-kiblat__stat-sub {
	margin: 4px 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--akk-muted);
}

.ak-kiblat__meta {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--akk-muted);
}

/* Baris arahan satu ayat, gaya panel maklumat. */
.ak-kiblat__hint {
	margin: 0 0 var(--akk-space-sm);
	padding: 10px 12px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--akk-muted);
	background: var(--akk-surface);
	border: 1px solid var(--akk-border);
	border-radius: var(--akk-radius-sm);
}

/* Mesej keupayaan peranti. Nada amaran, bukan ralat — tiada yang rosak. */
.ak-kiblat__warning {
	margin: 0 0 var(--akk-space-sm);
	padding: 10px 12px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--akk-note-text);
	background: var(--akk-note-bg);
	border: 1px solid var(--akk-note-border);
	border-radius: var(--akk-radius-sm);
}

/* ----------------------------- Kompas ---------------------------
 *
 * Keadaan idle: muka kompas kelihatan sebaik halaman dibuka, tetapi
 * anak panah belum ada kerana lokasi belum diketahui. Ia memberitahu
 * pengguna apa alat ini tanpa berbohong tentang apa yang sudah diketahui.
 * ------------------------------------------------------------------ */

/* Pembalut dail: rujukan kedudukan untuk butang mula di tengah. */
.ak-kiblat__dial-wrap {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

.ak-kiblat__compass.is-idle .ak-kiblat__svg {
	opacity: 0.5;
}

/*
 * Butang mula: satu ketukan untuk keseluruhan alat.
 *
 * Ia diletakkan di tengah muka kompas, bukan di bawahnya, kerana di situlah
 * mata pengguna sudah berada. Kawasan sentuhnya bulat dan besar — jauh
 * melebihi 44 px — kerana ini satu-satunya tindakan pada skrin permulaan.
 */
.ak-kiblat__start {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* 46 peratus: cukup besar untuk sasaran sentuh yang selesa, cukup kecil
	   supaya label mata angin pada dail tidak terlindung. */
	width: 46%;
	aspect-ratio: 1 / 1;
	padding: 0;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: #ffffff;
	background: var(--akk-accent);
	border: 4px solid var(--akk-bg);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.ak-kiblat__start-inner {
	display: block;
	max-width: 8em;
}

.ak-kiblat__start:hover {
	background: var(--akk-accent-strong);
}

.ak-kiblat__start:focus-visible {
	outline: 3px solid var(--akk-focus);
	outline-offset: 3px;
}

.ak-kiblat__start[disabled] {
	opacity: 0.6;
	cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
	.ak-kiblat__start {
		transition: background-color 150ms ease;
	}
}

.ak-kiblat__compass.is-idle .ak-kiblat__needle,
.ak-kiblat__compass.is-idle .ak-kiblat__hub {
	visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.ak-kiblat__svg {
		transition: opacity 240ms ease;
	}
}

/* ---------------------------- Kompas ---------------------------- */

.ak-kiblat__compass {
	/* padding atas menempah ruang untuk lencana Kaabah yang duduk pada
	   puncak cincin. Ruang itu ditempah sepanjang masa, bukan hanya semasa
	   sejajar, supaya tiada anjakan susun atur pada saat pengguna sedang
	   memusingkan telefon. */
	padding-top: 16px;
	margin: 0 0 var(--akk-space);
	text-align: center;
}

.ak-kiblat__svg {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

.ak-kiblat__dial {
	fill: currentColor;
	fill-opacity: 0.06;
	stroke: currentColor;
	stroke-opacity: 0.22;
	stroke-width: 2;
}

.ak-kiblat__tick {
	stroke: currentColor;
	stroke-opacity: 0.32;
	stroke-width: 2;
	stroke-linecap: round;
}

.ak-kiblat__tick--major {
	stroke: currentColor;
	stroke-opacity: 0.62;
	stroke-width: 3;
}

.ak-kiblat__rose-label {
	fill: currentColor;
	fill-opacity: 0.75;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
}

.ak-kiblat__needle-head {
	fill: var(--akk-needle);
}

.ak-kiblat__needle-shaft {
	fill: currentColor;
	fill-opacity: 0.35;
}

.ak-kiblat__hub {
	fill: none;
	stroke: currentColor;
	stroke-opacity: 0.55;
	stroke-width: 2;
}

.ak-kiblat.is-aligned .ak-kiblat__needle-head {
	fill: var(--akk-aligned);
}

.ak-kiblat.is-aligned .ak-kiblat__needle-shaft {
	fill: var(--akk-aligned);
	fill-opacity: 0.45;
}

.ak-kiblat.is-aligned .ak-kiblat__dial {
	stroke: var(--akk-aligned);
	stroke-width: 3;
}

.ak-kiblat__live-readout {
	margin: 10px 0 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--akk-needle);
	font-variant-numeric: tabular-nums;
}

/* Hijau apabila sejajar. Warna bukan satu-satunya isyarat: teks status,
   ikon tanda betul dan warna anak panah turut berubah serentak. */
.ak-kiblat.is-aligned .ak-kiblat__live-readout {
	color: var(--akk-aligned);
}

/* ------------------ Isyarat sejajar: cincin dan lencana ----------
 *
 * Getaran ialah isyarat terbaik untuk alat ini kerana pengguna sedang
 * berdiri hendak solat dan tidak sepatutnya perlu memandang skrin. Tetapi
 * Safari iOS tidak menyokong Vibration API langsung. Untuk pengguna iPhone,
 * isyarat visual inilah satu-satunya pemberitahuan yang mereka dapat, jadi
 * ia mesti cukup kuat untuk ditangkap oleh penglihatan tepi.
 * ------------------------------------------------------------------ */

/* Cincin luar bercahaya. Kekal telus sepenuhnya sehingga sejajar. */
.ak-kiblat__glow {
	fill: none;
	stroke: var(--akk-aligned);
	stroke-width: 0;
	opacity: 0;
}

.ak-kiblat.is-aligned .ak-kiblat__glow {
	stroke-width: 4;
	opacity: 0.9;
	filter: drop-shadow(0 0 4px var(--akk-aligned));
}

@media (prefers-reduced-motion: no-preference) {
	.ak-kiblat__glow {
		transition: opacity 220ms ease, stroke-width 220ms ease;
	}

	.ak-kiblat.is-aligned .ak-kiblat__glow {
		animation: ak-kiblat-glow 2s ease-in-out infinite;
	}
}

@keyframes ak-kiblat-glow {
	0%,
	100% {
		opacity: 0.5;
		stroke-width: 3;
	}

	50% {
		opacity: 1;
		stroke-width: 5;
	}
}

/* Lencana Kaabah pada puncak cincin — hujung yang ditunjuk oleh anak panah
   apabila pengguna sudah menghadap kiblat. */
.ak-kiblat__kaaba {
	position: absolute;

	/* 3 peratus: dail berjejari 94 dalam viewBox 200, jadi garis cincin
	   berada pada 3 peratus dari puncak kotak SVG. Lencana duduk betul-betul
	   di atas garis itu pada setiap saiz skrin. */
	top: 3%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
	min-width: 34px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--akk-aligned);

	/* Cincin putih memisahkan lencana daripada garis dail supaya kedua-duanya
	   tidak bercantum menjadi satu bentuk yang kabur. */
	box-shadow: 0 0 0 3px var(--akk-bg);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.55);
	pointer-events: none;
}

.ak-kiblat.is-aligned .ak-kiblat__kaaba {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
	.ak-kiblat__kaaba {
		transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.35);
	}
}

.ak-kiblat__kaaba-svg {
	display: block;
	width: 66%;
	height: auto;
}

.ak-kiblat__kaaba-body {
	fill: #ffffff;
}

/* Jalur kiswah dan pintu ialah potongan, bukan warna tersendiri: ia
   mengambil warna latar lencana supaya sentiasa sepadan. */
.ak-kiblat__kaaba-cut {
	fill: var(--akk-aligned);
}

/* ------------------------ Kawasan panduan -----------------------
 *
 * Satu tempat untuk semua mesej kompas: amaran condong, amaran ketepatan,
 * arahan penentukuran, dan status sejajar. Sehingga 1.6.0 mesej ini
 * bertaburan di dua kedudukan skrin yang berbeza, dan pengguna yang sedang
 * memusingkan telefon terpaksa mengimbas kedua-duanya serentak.
 *
 * Hanya satu mesej dipaparkan pada satu masa. Yang memilih ialah
 * renderGuide() dalam JavaScript, mengikut keutamaan tetap.
 * ------------------------------------------------------------------ */

.ak-kiblat__guide {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	/* 20 px, bukan --akk-space yang 16 px. Elemen ini muncul dan hilang
	   tepat di atas dua kad nombor. Tanpa ruang yang jelas, amaran kelihatan
	   seperti sebahagian daripada kad — dan kad itulah jawapan yang pengguna
	   datang untuk baca. */
	margin: 0 0 20px;
	padding: 12px 14px;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	color: var(--akk-text);
	background: var(--akk-surface);
	border: 1px solid var(--akk-border);
	border-radius: var(--akk-radius-sm);
}

.ak-kiblat__guide::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	border-radius: 50%;
	background-color: var(--akk-muted);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.6-6.4'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

/* Nada amaran: ada sebab untuk meragui bacaan. */
.ak-kiblat__guide--warn {
	font-weight: 500;
	color: var(--akk-note-text);
	background: var(--akk-note-bg);
	border-color: var(--akk-note-border);
}

.ak-kiblat__guide--warn::before {
	background-color: #a3760a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v7'/%3E%3Cpath d='M12 17.6v.01'/%3E%3C/svg%3E");
}

/* Nada berjaya: sejajar, dan bacaan dipercayai. Warna bukan satu-satunya
   isyarat — ikon tanda betul berubah serentak. */
.ak-kiblat__guide--ok {
	color: var(--akk-aligned-text);
	background: var(--akk-aligned-bg);
	border-color: var(--akk-aligned-border);
}

.ak-kiblat__guide--ok::before {
	background-color: var(--akk-aligned);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------- Details --------------------------- */

.ak-kiblat__details {
	margin: 0 0 var(--akk-space-sm);
	padding: 0;
	border: 1px solid var(--akk-border);
	border-radius: var(--akk-radius-sm);
	background: var(--akk-bg);
}

.ak-kiblat__summary {
	padding: 12px 14px;
	min-height: 44px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	list-style: revert;
}

.ak-kiblat__summary:focus-visible {
	outline: 3px solid var(--akk-focus);
	outline-offset: 2px;
}

.ak-kiblat__details-body {
	padding: 0 14px 12px;
	font-size: 0.9rem;
	color: var(--akk-muted);
}

.ak-kiblat__details-body p {
	margin: 0 0 8px;
}

.ak-kiblat__list {
	margin: 0;
	padding-left: 20px;
}

.ak-kiblat__list li {
	margin: 0 0 4px;
}

.ak-kiblat__tech-line {
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

/* ---------------------- Pemilih lokasi manual -------------------- */

.ak-kiblat__manual {
	margin: 0 0 var(--akk-space);
}

.ak-kiblat__field {
	margin: 0 0 var(--akk-space-sm);
}

.ak-kiblat__label {
	display: block;
	margin: 0 0 4px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--akk-text);
}

.ak-kiblat__select,
.ak-kiblat__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	min-height: 44px;
	padding: 10px 12px;
	font-family: inherit;

	/* 1rem ialah minimum yang disengajakan. Safari iOS melakukan zoom
	   automatik apabila medan input mempunyai saiz font di bawah 16px, dan
	   zoom itu merosakkan susun atur halaman selepas pengguna menaip. */
	font-size: 1rem;
	line-height: 1.3;
	color: var(--akk-text);
	background-color: var(--akk-bg);
	border: 1px solid var(--akk-border);
	border-radius: var(--akk-radius-sm);
}

/* Hanya pada input. Select mengekalkan penampilan natifnya supaya anak
   panah dropdown kekal kelihatan. */
.ak-kiblat__input {
	-webkit-appearance: none;
	appearance: none;
}

.ak-kiblat__select:focus-visible,
.ak-kiblat__input:focus-visible {
	outline: 3px solid var(--akk-focus);
	outline-offset: 2px;
}

.ak-kiblat__manual-count {
	margin: 0 0 var(--akk-space-sm);
	font-size: 0.85rem;
	color: var(--akk-muted);
}

.ak-kiblat__credit {
	margin: var(--akk-space-sm) 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--akk-muted);
}

.ak-kiblat__link {
	color: inherit;
	text-decoration: underline;
}

.ak-kiblat__distance {
	margin: 6px 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--akk-text);
	font-variant-numeric: tabular-nums;
}

/* --------------------- Privasi dan penafian --------------------- */

.ak-kiblat__disclaimer {
	margin: 10px 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--akk-muted);
}

.ak-kiblat__disclaimer {
	padding-top: 10px;
	border-top: 1px solid var(--akk-border);
}


/* ---------------------------- Skema gelap ----------------------------
 *
 * Warna SVG di atas sengaja menggunakan currentColor dengan opacity,
 * bukan nilai warna tetap.
 *
 * Sebabnya: plugin dark mode pihak ketiga (Dracula Dark Mode digunakan
 * pada akuislam.com) menulis semula nilai warna dalam stylesheet. Ia
 * mengendalikan background-color dan color dengan betul, tetapi ia
 * memaksa nilai fill pada SVG menjadi cerah tanpa mengira apa yang kita
 * tulis. Palet gelap statik yang kita takrifkan sendiri akan ditukar
 * semula menjadi cerah, jadi pendekatan itu tidak boleh dipercayai.
 *
 * currentColor pula mewarisi color elemen, yang sudah pun betul dalam
 * kedua-dua skema. Dail, tick, label dan shaft kini melaraskan diri
 * secara automatik kepada mana-mana tema atau plugin dark mode, tanpa
 * plugin ini perlu tahu apa-apa tentang plugin tersebut.
 *
 * Komponen ini sengaja TIDAK mempunyai palet gelapnya sendiri, dan
 * sengaja TIDAK menggunakan @media (prefers-color-scheme: dark).
 *
 * Sebabnya ditemui melalui ujian pada akuislam.com: apabila Dracula
 * ditukar kembali kepada mod terang, ia MEMBUANG atribut
 * data-dracula-scheme sepenuhnya. Jadi tiada cara dalam CSS untuk
 * membezakan "tiada plugin dark mode" daripada "ada plugin dark mode,
 * sedang mod terang". Blok prefers-color-scheme dengan guard
 * :not([data-dracula-scheme]) akan tetap terpakai dalam kes kedua, dan
 * menghasilkan kad gelap di atas halaman terang.
 *
 * Jadi komponen mengikut skema tapak, bukan memaksa skemanya sendiri.
 * Pada tapak dengan plugin dark mode, plugin itu menguruskan
 * background dan color, dan SVG mengikut secara automatik melalui
 * currentColor. Pada tapak tanpa dark mode, komponen kekal terang dan
 * konsisten dengan dirinya sendiri, yang sentiasa boleh dibaca.
 * ------------------------------------------------------------------ */

/* --------------------------- Responsif -------------------------- */

@media (min-width: 480px) {
	.ak-kiblat__inner {
		padding: 22px;
	}

	.ak-kiblat__button--primary {
		width: auto;
		min-width: 240px;
	}

	.ak-kiblat__stat-value {
		font-size: 2.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ak-kiblat__button {
		transition: none;
	}
}