diff --git a/footer.php b/footer.php
index e6120cb..5617cd6 100755
--- a/footer.php
+++ b/footer.php
@@ -20,5 +20,3 @@
-
-
-
-
-
-
-
-
-
- Responsive navbar with search and login - Bedimcode
-
-
-
-
-
diff --git a/style.css b/style.css
index e69de29..2d6b10a 100755
--- a/style.css
+++ b/style.css
@@ -0,0 +1,416 @@
+/* ==========================================================
+ RESET & BASIS
+ ========================================================== */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --bg-main: #f4f6f9;
+ --bg-card: #ffffff;
+ --bg-header: #1f2937;
+
+ --color-primary: #2563eb;
+ --color-primary-hover: #1d4ed8;
+ --color-accent: #10b981;
+
+ --text-main: #111827;
+ --text-muted: #6b7280;
+ --text-invert: #ffffff;
+
+ --border-color: #e5e7eb;
+
+ --radius-sm: 6px;
+ --radius-md: 10px;
+ --radius-lg: 16px;
+
+ --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
+ --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
+
+ --transition-fast: 150ms ease;
+ --transition-normal: 250ms ease;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, "Helvetica Neue", Arial, sans-serif;
+ background: var(--bg-main);
+ color: var(--text-main);
+ line-height: 1.45;
+}
+
+/* ==========================================================
+ HEADER
+ ========================================================== */
+.header {
+ background: var(--bg-header);
+ color: var(--text-invert);
+ padding: 1rem 2rem;
+}
+
+.header-inner {
+ max-width: 1400px;
+ margin: auto;
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+}
+
+.logo {
+ font-size: 1.4rem;
+ font-weight: 700;
+ letter-spacing: 0.3px;
+}
+
+.search {
+ flex: 1;
+ position: relative;
+}
+
+.search input {
+ width: 100%;
+ padding: 0.6rem 1rem;
+ border-radius: var(--radius-sm);
+ border: none;
+ outline: none;
+ font-size: 0.95rem;
+}
+
+/* ==========================================================
+ LAYOUT
+ ========================================================== */
+.container {
+ max-width: 1400px;
+ margin: 2rem auto;
+ padding: 0 2rem;
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 2rem;
+}
+
+/* ==========================================================
+ FILTER / SIDEBAR
+ ========================================================== */
+.sidebar {
+ background: var(--bg-card);
+ border-radius: var(--radius-md);
+ padding: 1.2rem;
+ box-shadow: var(--shadow-sm);
+}
+
+.sidebar h3 {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+}
+
+.filter-group {
+ margin-bottom: 1.2rem;
+}
+
+.filter-group label {
+ display: block;
+ font-size: 0.85rem;
+ color: var(--text-muted);
+ margin-bottom: 0.3rem;
+}
+
+.filter-group input,
+.filter-group select {
+ width: 100%;
+ padding: 0.45rem 0.6rem;
+ border-radius: var(--radius-sm);
+ border: 1px solid var(--border-color);
+ font-size: 0.9rem;
+}
+
+/* ==========================================================
+ PRODUCT GRID
+ ========================================================== */
+.product-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 1.6rem;
+}
+
+/* ==========================================================
+ PRODUCT CARD
+ ========================================================== */
+.product-card {
+ background: var(--bg-card);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
+ display: flex;
+ flex-direction: column;
+ transition: transform var(--transition-normal),
+ box-shadow var(--transition-normal);
+}
+
+.product-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-md);
+}
+
+.product-image {
+ height: 180px;
+ background: #f1f5f9;
+ border-top-left-radius: var(--radius-lg);
+ border-top-right-radius: var(--radius-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+.product-content {
+ padding: 1rem 1.1rem 1.2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.product-title {
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+
+.product-meta {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+.product-price {
+ margin-top: 0.6rem;
+ font-size: 1.4rem;
+ font-weight: 700;
+ color: var(--color-primary);
+}
+
+.product-actions {
+ margin-top: auto;
+ display: flex;
+ gap: 0.5rem;
+}
+
+.btn {
+ flex: 1;
+ padding: 0.5rem;
+ border-radius: var(--radius-sm);
+ font-size: 0.85rem;
+ cursor: pointer;
+ border: none;
+ transition: background var(--transition-fast);
+}
+
+.btn-primary {
+ background: var(--color-primary);
+ color: #fff;
+}
+
+.btn-primary:hover {
+ background: var(--color-primary-hover);
+}
+
+.btn-secondary {
+ background: #f3f4f6;
+ color: var(--text-main);
+}
+
+.btn-secondary:hover {
+ background: #e5e7eb;
+}
+
+/* ==========================================================
+ BADGES
+ ========================================================== */
+.badge {
+ display: inline-block;
+ padding: 0.2rem 0.5rem;
+ border-radius: var(--radius-sm);
+ font-size: 0.7rem;
+ font-weight: 600;
+}
+
+.badge-green {
+ background: #d1fae5;
+ color: #065f46;
+}
+
+/* ==========================================================
+ RESPONSIVE
+ ========================================================== */
+@media (max-width: 900px) {
+ .container {
+ grid-template-columns: 1fr;
+ }
+
+ .sidebar {
+ order: 2;
+ }
+}
+
+/* ==========================================================
+ NAVBAR
+ ========================================================== */
+
+/* ==========================================================
+ BASIS / VARIABLEN
+ ========================================================== */
+:root {
+ --header-bg: #1f2937;
+ --header-text: #ffffff;
+ --header-muted: #9ca3af;
+ --primary: #2563eb;
+ --primary-hover: #1d4ed8;
+
+ --radius: 8px;
+ --transition: 200ms ease;
+}
+
+/* ==========================================================
+ CONTAINER
+ ========================================================== */
+.container {
+ max-width: 1400px;
+ margin-inline: auto;
+ padding-inline: 1.5rem;
+}
+
+/* ==========================================================
+ HEADER
+ ========================================================== */
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ background: var(--header-bg);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+}
+
+/* ==========================================================
+ NAV
+ ========================================================== */
+.nav {
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+/* ==========================================================
+ LOGO
+ ========================================================== */
+.nav__logo {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--header-text);
+ text-decoration: none;
+}
+
+/* ==========================================================
+ MENU (DESKTOP)
+ ========================================================== */
+.nav__menu {
+ display: flex;
+}
+
+.nav__list {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav__link {
+ color: var(--header-muted);
+ font-size: 0.95rem;
+ font-weight: 500;
+ text-decoration: none;
+ transition: color var(--transition);
+}
+
+.nav__link:hover {
+ color: var(--header-text);
+}
+
+/* ==========================================================
+ ACTION ICONS
+ ========================================================== */
+.nav__actions {
+ display: flex;
+ align-items: center;
+ gap: 1.2rem;
+}
+
+.nav__search,
+.nav__login,
+.nav__toggle,
+.nav__close {
+ font-size: 1.3rem;
+ color: var(--header-text);
+ cursor: pointer;
+ transition: color var(--transition);
+}
+
+.nav__search:hover,
+.nav__login:hover {
+ color: var(--primary);
+}
+
+/* ==========================================================
+ TOGGLE / CLOSE
+ ========================================================== */
+.nav__toggle {
+ display: none;
+}
+
+.nav__close {
+ display: none;
+}
+
+/* ==========================================================
+ MOBILE NAV
+ ========================================================== */
+@media (max-width: 900px) {
+
+ .nav__toggle {
+ display: block;
+ }
+
+ .nav__menu {
+ position: fixed;
+ top: 0;
+ right: -100%;
+ width: 280px;
+ height: 100%;
+ background: #111827;
+ padding: 4rem 2rem;
+ transition: right 300ms ease;
+ flex-direction: column;
+ gap: 2rem;
+ }
+
+ .nav__menu.show-menu {
+ right: 0;
+ }
+
+ .nav__list {
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+
+ .nav__link {
+ font-size: 1.05rem;
+ color: #e5e7eb;
+ }
+
+ .nav__close {
+ display: block;
+ position: absolute;
+ top: 1.2rem;
+ right: 1.2rem;
+ }
+}