body{font-family:sans-serif;margin:0;background:#f4f6f9;transition:0.3s}

.dark{background:#121212;color:#eee}

.navbar{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}
.navbar a{color:#fff;margin:0 10px;text-decoration:none}
.logo{font-weight:bold}
.dark-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer}

.products{display:flex;gap:20px;padding:20px;flex-wrap:wrap;justify-content:center}
.card{background:#fff;padding:15px;border-radius:15px;width:200px;text-align:center;box-shadow:0 6px 15px rgba(0,0,0,0.1);transition:0.3s;text-decoration:none;color:#000}

.dark .card{background:#1e1e1e;color:#fff}

.card img{width:100%;border-radius:12px;transition:0.4s}
.card:hover img{transform:scale(1.1)}
.card:hover{transform:translateY(-8px)}

.btn{margin-top:10px;padding:8px 15px;background:linear-gradient(45deg,#ff7e5f,#feb47b);border:none;color:#fff;border-radius:20px;cursor:pointer}

/* CLICK ANIMATION */
.btn:active{transform:scale(0.9)}

.order-page{padding:20px;max-width:400px;margin:30px auto;background:#fff;border-radius:15px}
.dark .order-page{background:#1e1e1e}

.order-page img{width:100%;border-radius:10px}
input,textarea{width:100%;margin:5px 0;padding:8px;border-radius:8px;border:1px solid #ccc}
button{width:100%;padding:10px;margin-top:10px;border:none;border-radius:10px;background:#667eea;color:#fff}

@media(max-width:768px){.products{flex-direction:column;align-items:center}}