.card-artikel a { color:#0e9e4a; text-decoration:underline; }
footer a[title] svg { transition:transform .2s, filter .2s; }
footer a[title]:hover svg { transform:scale(1.15) rotate(-6deg); filter:drop-shadow(0 2px 8px #0e9e4a44); }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
body { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; margin:0; padding:0; background:#f7fafc; color:#23272f; }
header { background:#fff; box-shadow:0 2px 8px #0001; padding:0; position:sticky; top:0; z-index:10; }
header .container { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:12px 32px; }
.logo img {
	height:48px;
	max-width:160px;
	width:auto;
	display:block;
	margin:0 auto;
	object-fit:contain;
	transition:transform .25s cubic-bezier(.4,2,.6,1), box-shadow .25s;
}
.logo img:hover {
	transform:scale(1.08) rotate(-2deg);
	box-shadow:0 4px 24px #0e9e4a33;
}
.logo { display:flex; align-items:center; min-height:48px; }
nav a { color:#0e9e4a; text-decoration:none; margin:0 18px; font-weight:600; font-size:1.1em; transition:.2s; position:relative; }
nav a::after { content:''; display:block; width:0; height:2px; background:#0e9e4a; transition:.3s; position:absolute; left:0; bottom:-4px; }
nav a:hover { color:#0b6e32; }
nav a:hover::after { width:100%; }
main { padding:40px 0; max-width:1200px; margin:0 auto; min-height:60vh; }
footer { background:#0e9e4a; color:#fff; text-align:center; padding:32px 0; margin-top:48px; font-size:1.1em; letter-spacing:0.5px; }
.slider { border-radius:18px; overflow:hidden; margin-bottom:32px; box-shadow:0 2px 12px #0001; }
.slider img { width:100%; height:260px; object-fit:cover; }
.filter-cepat, .artikel-tips { margin-top:32px; }
.filter-cepat form, aside form { background:#fff; border-radius:12px; box-shadow:0 2px 8px #0001; padding:20px; display:flex; gap:12px; flex-wrap:wrap; }
.filter-cepat select, .filter-cepat input, aside select, aside input { border:1px solid #c3e6cb; border-radius:6px; padding:8px; font-size:1em; background:#f7fafc; }
.filter-cepat button, aside button { background:linear-gradient(90deg,#0e9e4a 60%,#1a7e1a 100%); color:#fff; border:none; border-radius:6px; padding:8px 20px; font-weight:bold; cursor:pointer; transition:background .2s, box-shadow .2s, transform .2s; box-shadow:0 4px 16px #0e9e4a22; }
.filter-cepat button:hover, aside button:hover { background:linear-gradient(90deg,#1a7e1a 60%,#0e9e4a 100%); box-shadow:0 8px 24px #0e9e4a33; transform:translateY(-2px) scale(1.04); }
.grid-mobil { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:28px; }
.card-mobil { background:#fff; border-radius:14px; box-shadow:0 4px 18px #0e9e4a11; padding:18px; text-align:center; transition:box-shadow .2s, transform .2s; position:relative; }
.card-mobil:hover { box-shadow:0 12px 32px #0e9e4a22; transform:translateY(-6px) scale(1.03); }
.card-mobil img { border-radius:10px; margin-bottom:10px; }
.card-mobil h3 { margin:10px 0 4px 0; font-size:1.2em; }
.card-mobil a { display:inline-block; margin-top:10px; background:linear-gradient(90deg,#0e9e4a 60%,#1a7e1a 100%); color:#fff; padding:8px 20px; border-radius:6px; text-decoration:none; font-weight:600; transition:.2s; box-shadow:0 2px 8px #0e9e4a22; }
.card-mobil a:hover { background:linear-gradient(90deg,#1a7e1a 60%,#0e9e4a 100%); }
.card-artikel { background:#fff; border-radius:10px; box-shadow:0 2px 8px #0e9e4a11; padding:14px; margin-bottom:18px; }
.card-artikel h4 { margin:8px 0 4px 0; }
.card-artikel a { color:#0e9e4a; text-decoration:underline; }
@media (max-width: 900px) { main { padding:16px; } .container { padding:12px 8px; } .grid-mobil { grid-template-columns:1fr; } }