From aa7d2e27c0e7f2168405b818a3ce9a9bb16ef318 Mon Sep 17 00:00:00 2001
From: fatihalp <fatihalp89@gmail.com>
Date: Fri, 6 Mar 2026 02:15:13 +0300
Subject: [PATCH] Unify fonts and fix category seed

---
 Modules/Category/Models/Category.php          |    2 +-
 .../Listing/resources/views/index.blade.php   |    6 +-
 .../views/themes/default/index.blade.php      |    6 +-
 .../views/themes/otoplus/index.blade.php      |    6 +-
 public/theme.css                              |  781 -----------
 resources/css/app.css                         | 1203 +++++++++++++++++
 resources/views/errors/403.blade.php          |    4 +-
 resources/views/layouts/app.blade.php         |    7 +-
 resources/views/layouts/guest.blade.php       |    5 -
 resources/views/panel/listings.blade.php      |   58 +-
 tailwind.config.js                            |   26 +-
 11 files changed, 1272 insertions(+), 832 deletions(-)
 delete mode 100644 public/theme.css

diff --git a/Modules/Category/Models/Category.php b/Modules/Category/Models/Category.php
index 6f2a8bf16..1951abdb3 100644
--- a/Modules/Category/Models/Category.php
+++ b/Modules/Category/Models/Category.php
@@ -72,7 +72,7 @@ class Category extends Model
             ->active()
             ->whereNull('parent_id')
             ->with([
-                'children' => fn (Builder $query) => $query->active()->ordered(),
+                'children' => fn ($query) => $query->active()->ordered(),
             ])
             ->ordered()
             ->get();
diff --git a/Modules/Listing/resources/views/index.blade.php b/Modules/Listing/resources/views/index.blade.php
index a89c161b0..03e7c0543 100644
--- a/Modules/Listing/resources/views/index.blade.php
+++ b/Modules/Listing/resources/views/index.blade.php
@@ -23,13 +23,13 @@
 @endphp
 
 <div class="max-w-[1320px] mx-auto px-4 py-7 lg:py-8">
-    <h1 class="text-[30px] leading-tight font-extrabold text-slate-900 mb-6">{{ $pageTitle }}</h1>
+    <h1 class="text-3xl md:text-4xl leading-tight font-bold text-slate-900 mb-6">{{ $pageTitle }}</h1>
 
     <div class="grid grid-cols-1 lg:grid-cols-[260px,1fr] gap-4 lg:gap-5">
         <aside class="space-y-4">
             <section class="listing-filter-card p-4">
                 <div class="flex items-center justify-between gap-3 mb-3">
-                    <h2 class="text-[26px] font-extrabold text-slate-900 leading-none">Kategoriler</h2>
+                    <h2 class="text-2xl font-bold text-slate-900 leading-none">Kategoriler</h2>
                 </div>
 
                 <div class="space-y-1 max-h-[330px] overflow-y-auto pr-1">
@@ -273,7 +273,7 @@
 
                             <div class="px-3.5 py-3">
                                 <a href="{{ route('listings.show', $listing) }}" class="block">
-                                    <p class="text-[29px] leading-none font-extrabold text-slate-900">
+                                    <p class="text-3xl leading-none font-bold text-slate-900">
                                         @if(!is_null($priceValue) && $priceValue > 0)
                                             {{ number_format($priceValue, 0, ',', '.') }} {{ $listing->currency }}
                                         @else
diff --git a/Modules/Listing/resources/views/themes/default/index.blade.php b/Modules/Listing/resources/views/themes/default/index.blade.php
index a89c161b0..03e7c0543 100644
--- a/Modules/Listing/resources/views/themes/default/index.blade.php
+++ b/Modules/Listing/resources/views/themes/default/index.blade.php
@@ -23,13 +23,13 @@
 @endphp
 
 <div class="max-w-[1320px] mx-auto px-4 py-7 lg:py-8">
-    <h1 class="text-[30px] leading-tight font-extrabold text-slate-900 mb-6">{{ $pageTitle }}</h1>
+    <h1 class="text-3xl md:text-4xl leading-tight font-bold text-slate-900 mb-6">{{ $pageTitle }}</h1>
 
     <div class="grid grid-cols-1 lg:grid-cols-[260px,1fr] gap-4 lg:gap-5">
         <aside class="space-y-4">
             <section class="listing-filter-card p-4">
                 <div class="flex items-center justify-between gap-3 mb-3">
-                    <h2 class="text-[26px] font-extrabold text-slate-900 leading-none">Kategoriler</h2>
+                    <h2 class="text-2xl font-bold text-slate-900 leading-none">Kategoriler</h2>
                 </div>
 
                 <div class="space-y-1 max-h-[330px] overflow-y-auto pr-1">
@@ -273,7 +273,7 @@
 
                             <div class="px-3.5 py-3">
                                 <a href="{{ route('listings.show', $listing) }}" class="block">
-                                    <p class="text-[29px] leading-none font-extrabold text-slate-900">
+                                    <p class="text-3xl leading-none font-bold text-slate-900">
                                         @if(!is_null($priceValue) && $priceValue > 0)
                                             {{ number_format($priceValue, 0, ',', '.') }} {{ $listing->currency }}
                                         @else
diff --git a/Modules/Listing/resources/views/themes/otoplus/index.blade.php b/Modules/Listing/resources/views/themes/otoplus/index.blade.php
index a89c161b0..03e7c0543 100644
--- a/Modules/Listing/resources/views/themes/otoplus/index.blade.php
+++ b/Modules/Listing/resources/views/themes/otoplus/index.blade.php
@@ -23,13 +23,13 @@
 @endphp
 
 <div class="max-w-[1320px] mx-auto px-4 py-7 lg:py-8">
-    <h1 class="text-[30px] leading-tight font-extrabold text-slate-900 mb-6">{{ $pageTitle }}</h1>
+    <h1 class="text-3xl md:text-4xl leading-tight font-bold text-slate-900 mb-6">{{ $pageTitle }}</h1>
 
     <div class="grid grid-cols-1 lg:grid-cols-[260px,1fr] gap-4 lg:gap-5">
         <aside class="space-y-4">
             <section class="listing-filter-card p-4">
                 <div class="flex items-center justify-between gap-3 mb-3">
-                    <h2 class="text-[26px] font-extrabold text-slate-900 leading-none">Kategoriler</h2>
+                    <h2 class="text-2xl font-bold text-slate-900 leading-none">Kategoriler</h2>
                 </div>
 
                 <div class="space-y-1 max-h-[330px] overflow-y-auto pr-1">
@@ -273,7 +273,7 @@
 
                             <div class="px-3.5 py-3">
                                 <a href="{{ route('listings.show', $listing) }}" class="block">
-                                    <p class="text-[29px] leading-none font-extrabold text-slate-900">
+                                    <p class="text-3xl leading-none font-bold text-slate-900">
                                         @if(!is_null($priceValue) && $priceValue > 0)
                                             {{ number_format($priceValue, 0, ',', '.') }} {{ $listing->currency }}
                                         @else
diff --git a/public/theme.css b/public/theme.css
deleted file mode 100644
index 6c71c8437..000000000
--- a/public/theme.css
+++ /dev/null
@@ -1,781 +0,0 @@
-:root {
-    --oc-bg: #f5f5f7;
-    --oc-surface: #ffffff;
-    --oc-border: #d2d2d7;
-    --oc-text: #1d1d1f;
-    --oc-muted: #6e6e73;
-    --oc-primary: #0071e3;
-    --oc-primary-strong: #0066cc;
-    --oc-primary-soft: #e8f3ff;
-    --oc-primary-soft-border: #bfdcff;
-    --oc-chip: #f5f5f7;
-}
-
-html,
-body {
-    min-height: 100%;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: radial-gradient(circle at top right, #eef5ff 0%, var(--oc-bg) 30%);
-    color: var(--oc-text);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    letter-spacing: -0.01em;
-}
-
-.brand-logo {
-    position: relative;
-    width: 1.45rem;
-    height: 1.7rem;
-    display: inline-block;
-    border-radius: 60% 60% 55% 55% / 62% 62% 70% 70%;
-    background: var(--oc-text);
-    box-shadow: 0 5px 14px rgba(29, 29, 31, 0.18);
-    transform: translateY(1px);
-}
-
-.brand-logo::before {
-    content: "";
-    position: absolute;
-    top: -0.42rem;
-    right: 0.14rem;
-    width: 0.54rem;
-    height: 0.31rem;
-    border-radius: 100% 0;
-    background: var(--oc-text);
-    transform: rotate(-32deg);
-}
-
-.brand-logo::after {
-    content: "";
-    position: absolute;
-    top: 0.18rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0.16rem;
-    height: 0.2rem;
-    border-radius: 999px;
-    background: var(--oc-surface);
-}
-
-.brand-text {
-    font-size: 1.7rem;
-    font-weight: 600;
-    color: var(--oc-text);
-    letter-spacing: -0.03em;
-}
-
-.market-nav-surface {
-    background: rgba(251, 251, 253, 0.88);
-    backdrop-filter: saturate(180%) blur(18px);
-    border-bottom: 1px solid var(--oc-border);
-}
-
-.search-shell {
-    border: 1px solid var(--oc-border);
-    background: #ffffff;
-    border-radius: 999px;
-}
-
-.chip-btn {
-    border: 1px solid var(--oc-border);
-    background: var(--oc-chip);
-    border-radius: 999px;
-}
-
-.btn-primary {
-    background: linear-gradient(180deg, #0a84ff, var(--oc-primary));
-    color: #ffffff;
-    border-radius: 999px;
-    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.24);
-    transition: background 0.2s ease, box-shadow 0.2s ease;
-}
-
-.btn-primary:hover {
-    background: linear-gradient(180deg, var(--oc-primary), var(--oc-primary-strong));
-    box-shadow: 0 8px 18px rgba(0, 113, 227, 0.3);
-}
-
-.header-utility {
-    width: 2.75rem;
-    height: 2.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--oc-border);
-    background: #ffffff;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #4b5563;
-    transition: all 0.2s ease;
-}
-
-.header-utility:hover {
-    border-color: var(--oc-primary-soft-border);
-    color: var(--oc-primary);
-}
-
-.location-panel {
-    width: min(90vw, 360px);
-}
-
-.location-panel select {
-    border: 1px solid var(--oc-border);
-    border-radius: 0.75rem;
-    background: #f7f7f8;
-    color: #374151;
-    padding: 0.55rem 0.75rem;
-    font-size: 0.875rem;
-}
-
-summary::-webkit-details-marker {
-    display: none;
-}
-
-[dir="rtl"] {
-    text-align: right;
-}
-
-.listing-filter-card {
-    border: 1px solid var(--oc-border);
-    border-radius: 14px;
-    background: var(--oc-surface);
-}
-
-.listing-card {
-    border: 1px solid var(--oc-border);
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--oc-surface);
-    transition: box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.listing-card:hover {
-    box-shadow: 0 14px 28px rgba(29, 29, 31, 0.12);
-    transform: translateY(-2px);
-}
-
-.listing-title {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-}
-
-.lt-wrap {
-    max-width: 1320px;
-    margin: 0 auto;
-    padding: 24px 16px 46px;
-}
-
-.lt-breadcrumb {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    font-size: 13px;
-    color: var(--oc-muted);
-    margin-bottom: 14px;
-}
-
-.lt-breadcrumb a {
-    color: #4b5563;
-    text-decoration: none;
-}
-
-.lt-breadcrumb span:last-child {
-    color: var(--oc-text);
-    font-weight: 700;
-}
-
-.lt-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 352px;
-    gap: 18px;
-    align-items: start;
-}
-
-.lt-card {
-    border: 1px solid var(--oc-border);
-    border-radius: 14px;
-    background: #f7f7f8;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-}
-
-.lt-gallery-main {
-    position: relative;
-    border-radius: 10px;
-    background: #1f2937;
-    overflow: hidden;
-    min-height: 440px;
-}
-
-.lt-gallery-main img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    min-height: 440px;
-}
-
-.lt-gallery-main-empty {
-    min-height: 440px;
-    display: grid;
-    place-items: center;
-    color: #cbd5e1;
-    font-size: 14px;
-}
-
-.lt-gallery-nav {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 44px;
-    height: 44px;
-    border: 0;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.92);
-    color: #111827;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
-}
-
-.lt-gallery-nav[data-gallery-prev] {
-    left: 14px;
-}
-
-.lt-gallery-nav[data-gallery-next] {
-    right: 14px;
-}
-
-.lt-gallery-top {
-    position: absolute;
-    top: 12px;
-    left: 12px;
-    right: 12px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.lt-badge {
-    border-radius: 999px;
-    background: #ffd60a;
-    color: #111827;
-    font-size: 12px;
-    font-weight: 700;
-    padding: 6px 10px;
-}
-
-.lt-icon-btn {
-    width: 38px;
-    height: 38px;
-    border: 0;
-    border-radius: 999px;
-    background: rgba(17, 24, 39, 0.86);
-    color: #ffffff;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.lt-thumbs {
-    display: flex;
-    gap: 10px;
-    overflow-x: auto;
-    padding: 12px 0 2px;
-}
-
-.lt-thumb {
-    width: 86px;
-    min-width: 86px;
-    height: 64px;
-    border: 2px solid transparent;
-    border-radius: 10px;
-    overflow: hidden;
-    background: #d1d5db;
-    cursor: pointer;
-}
-
-.lt-thumb.is-active {
-    border-color: var(--oc-primary);
-}
-
-.lt-thumb img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.lt-media-card {
-    padding: 14px;
-}
-
-.lt-detail-card {
-    margin-top: 14px;
-    padding: 18px 20px;
-}
-
-.lt-price-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    justify-content: space-between;
-    align-items: flex-start;
-}
-
-.lt-price {
-    font-size: 46px;
-    line-height: 1;
-    font-weight: 900;
-    color: #0f172a;
-}
-
-.lt-title {
-    margin-top: 8px;
-    font-size: 21px;
-    font-weight: 700;
-    color: #111827;
-}
-
-.lt-meta {
-    text-align: right;
-    color: #4b5563;
-    font-size: 14px;
-}
-
-.lt-meta strong {
-    color: #111827;
-    font-weight: 700;
-}
-
-.lt-credit {
-    margin-top: 14px;
-    border: 1px solid #e3e7ee;
-    border-radius: 12px;
-    padding: 14px;
-    background: #fafafb;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.lt-credit h4 {
-    margin: 0;
-    font-size: 20px;
-    color: #0f172a;
-}
-
-.lt-credit p {
-    margin: 3px 0 0;
-    font-size: 14px;
-    color: #4b5563;
-}
-
-.lt-tag {
-    border-radius: 999px;
-    background: var(--oc-primary);
-    color: #ffffff;
-    font-size: 13px;
-    font-weight: 700;
-    padding: 7px 12px;
-}
-
-.lt-section-title {
-    margin: 18px 0 10px;
-    font-size: 30px;
-    font-weight: 900;
-    color: #111827;
-}
-
-.lt-features {
-    border-top: 1px solid #e2e8f0;
-    margin-top: 12px;
-}
-
-.lt-feature-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 14px;
-    border-top: 1px solid #e7ebf2;
-    padding: 12px 0;
-}
-
-.lt-feature-row:first-child {
-    border-top: 0;
-}
-
-.lt-f-item {
-    display: flex;
-    justify-content: space-between;
-    gap: 8px;
-    color: #334155;
-    font-size: 15px;
-}
-
-.lt-f-item strong {
-    color: #111827;
-    font-weight: 800;
-    text-align: right;
-}
-
-.lt-side-card {
-    position: sticky;
-    top: 96px;
-    padding: 16px;
-}
-
-.lt-seller-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.lt-avatar {
-    width: 44px;
-    height: 44px;
-    border-radius: 999px;
-    background: #f3f4f6;
-    color: #111827;
-    display: grid;
-    place-items: center;
-    font-weight: 800;
-}
-
-.lt-seller-name {
-    margin: 0;
-    font-size: 31px;
-    font-weight: 800;
-    color: #111827;
-    line-height: 1.1;
-}
-
-.lt-seller-meta {
-    margin-top: 2px;
-    font-size: 13px;
-    color: #6b7280;
-}
-
-.lt-actions {
-    margin-top: 14px;
-    display: grid;
-    gap: 10px;
-}
-
-.lt-row-2 {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-}
-
-.lt-btn {
-    height: 46px;
-    border-radius: 999px;
-    border: 1px solid var(--oc-primary-soft-border);
-    background: var(--oc-primary-soft);
-    color: var(--oc-primary);
-    font-size: 20px;
-    font-weight: 800;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    cursor: pointer;
-}
-
-.lt-btn:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-}
-
-.lt-btn-main {
-    border: 0;
-    background: var(--oc-primary);
-    color: #ffffff;
-    width: 100%;
-}
-
-.lt-btn-soft {
-    border-color: #d9e9ff;
-    background: #eef5ff;
-}
-
-.lt-btn-outline {
-    border-color: var(--oc-border);
-    background: #ffffff;
-    color: #334155;
-}
-
-.lt-report {
-    margin-top: 16px;
-    height: 54px;
-    border: 1px solid #dce9fa;
-    border-radius: 999px;
-    background: #f7fbff;
-    color: var(--oc-primary);
-    font-size: 16px;
-    font-weight: 700;
-    display: grid;
-    place-items: center;
-    text-decoration: none;
-}
-
-.lt-policy {
-    margin-top: 16px;
-    text-align: center;
-    color: #6b7280;
-    font-size: 13px;
-}
-
-.lt-related {
-    margin-top: 26px;
-}
-
-.lt-related-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.lt-related-title {
-    font-size: 30px;
-    font-weight: 900;
-    margin: 0;
-}
-
-.lt-scroll-wrap {
-    position: relative;
-    margin-top: 14px;
-}
-
-.lt-scroll-track {
-    display: flex;
-    gap: 12px;
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    padding: 2px 2px 8px;
-}
-
-.lt-rel-card {
-    min-width: 232px;
-    width: 232px;
-    border: 1px solid var(--oc-border);
-    border-radius: 10px;
-    background: #f7f7f8;
-    overflow: hidden;
-    text-decoration: none;
-    color: inherit;
-}
-
-.lt-rel-photo {
-    height: 168px;
-    background: #d1d5db;
-}
-
-.lt-rel-photo img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.lt-rel-body {
-    padding: 10px;
-}
-
-.lt-rel-price {
-    font-size: 32px;
-    font-weight: 900;
-    color: #111827;
-    line-height: 1.1;
-}
-
-.lt-rel-title {
-    margin-top: 4px;
-    font-size: 20px;
-    font-weight: 700;
-    color: #111827;
-    line-height: 1.3;
-    min-height: 52px;
-}
-
-.lt-rel-city {
-    margin-top: 6px;
-    font-size: 13px;
-    color: #6b7280;
-}
-
-.lt-scroll-btn {
-    position: absolute;
-    top: 42%;
-    transform: translateY(-50%);
-    width: 44px;
-    height: 44px;
-    border: 0;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.92);
-    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
-    display: grid;
-    place-items: center;
-    cursor: pointer;
-}
-
-.lt-scroll-btn.prev {
-    left: -16px;
-}
-
-.lt-scroll-btn.next {
-    right: -16px;
-}
-
-.lt-pill-wrap {
-    margin-top: 20px;
-}
-
-.lt-pill-title {
-    margin: 0 0 10px;
-    font-size: 30px;
-    font-weight: 900;
-}
-
-.lt-pills {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.lt-pill {
-    border: 1px solid var(--oc-border);
-    background: #f4f5f7;
-    border-radius: 999px;
-    padding: 8px 14px;
-    color: #374151;
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.text-rose-500,
-.text-rose-600,
-.text-rose-700 {
-    color: var(--oc-primary) !important;
-}
-
-.bg-rose-50 {
-    background-color: var(--oc-primary-soft) !important;
-}
-
-.bg-rose-100 {
-    background-color: #dcecff !important;
-}
-
-.bg-rose-500 {
-    background-color: var(--oc-primary) !important;
-}
-
-.bg-rose-600 {
-    background-color: var(--oc-primary-strong) !important;
-}
-
-.border-rose-200,
-.border-rose-300 {
-    border-color: var(--oc-primary-soft-border) !important;
-}
-
-.hover\:text-rose-500:hover,
-.hover\:text-rose-600:hover,
-.hover\:text-rose-700:hover {
-    color: var(--oc-primary) !important;
-}
-
-.hover\:bg-rose-50:hover {
-    background-color: var(--oc-primary-soft) !important;
-}
-
-.hover\:bg-rose-100:hover {
-    background-color: #dcecff !important;
-}
-
-.hover\:bg-rose-600:hover {
-    background-color: var(--oc-primary-strong) !important;
-}
-
-.focus\:ring-rose-200:focus {
-    --tw-ring-color: rgba(0, 113, 227, 0.24) !important;
-}
-
-.accent-rose-500 {
-    accent-color: var(--oc-primary) !important;
-}
-
-@media (max-width: 1080px) {
-    .lt-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .lt-side-card {
-        position: static;
-    }
-
-    .lt-scroll-btn {
-        display: none;
-    }
-
-    .lt-price {
-        font-size: 39px;
-    }
-
-    .lt-seller-name,
-    .lt-section-title,
-    .lt-related-title,
-    .lt-pill-title {
-        font-size: 24px;
-    }
-}
-
-@media (max-width: 640px) {
-    .lt-wrap {
-        padding: 16px 10px 30px;
-    }
-
-    .lt-detail-card,
-    .lt-media-card,
-    .lt-side-card {
-        padding: 12px;
-    }
-
-    .lt-gallery-main,
-    .lt-gallery-main img,
-    .lt-gallery-main-empty {
-        min-height: 260px;
-    }
-
-    .lt-feature-row {
-        grid-template-columns: 1fr;
-        gap: 10px;
-    }
-
-    .lt-price-row {
-        flex-direction: column;
-    }
-
-    .lt-meta {
-        text-align: left;
-    }
-
-    .lt-rel-card {
-        min-width: 196px;
-        width: 196px;
-    }
-
-    .lt-rel-photo {
-        height: 140px;
-    }
-}
diff --git a/resources/css/app.css b/resources/css/app.css
index b5c61c956..9018d2eb2 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,1206 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --oc-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --oc-bg: #f5f5f7;
+    --oc-surface: #ffffff;
+    --oc-border: #d2d2d7;
+    --oc-text: #1d1d1f;
+    --oc-muted: #6e6e73;
+    --oc-primary: #0071e3;
+    --oc-primary-strong: #0066cc;
+    --oc-primary-soft: #e8f3ff;
+    --oc-primary-soft-border: #bfdcff;
+    --oc-chip: #f5f5f7;
+}
+
+html,
+body {
+    min-height: 100%;
+}
+
+body {
+    font-family: var(--oc-font-sans);
+    background: radial-gradient(circle at top right, #eef5ff 0%, var(--oc-bg) 30%);
+    color: var(--oc-text);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    letter-spacing: -0.01em;
+}
+
+.brand-logo {
+    position: relative;
+    width: 1.45rem;
+    height: 1.7rem;
+    display: inline-block;
+    border-radius: 60% 60% 55% 55% / 62% 62% 70% 70%;
+    background: var(--oc-text);
+    box-shadow: 0 5px 14px rgba(29, 29, 31, 0.18);
+    transform: translateY(1px);
+}
+
+.brand-logo::before {
+    content: "";
+    position: absolute;
+    top: -0.42rem;
+    right: 0.14rem;
+    width: 0.54rem;
+    height: 0.31rem;
+    border-radius: 100% 0;
+    background: var(--oc-text);
+    transform: rotate(-32deg);
+}
+
+.brand-logo::after {
+    content: "";
+    position: absolute;
+    top: 0.18rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0.16rem;
+    height: 0.2rem;
+    border-radius: 999px;
+    background: var(--oc-surface);
+}
+
+.brand-text {
+    font-size: 1.7rem;
+    font-weight: 600;
+    color: var(--oc-text);
+    letter-spacing: -0.03em;
+}
+
+.market-nav-surface {
+    background: rgba(251, 251, 253, 0.88);
+    backdrop-filter: saturate(180%) blur(18px);
+    border-bottom: 1px solid var(--oc-border);
+}
+
+.search-shell {
+    border: 1px solid var(--oc-border);
+    background: #ffffff;
+    border-radius: 999px;
+}
+
+.chip-btn {
+    border: 1px solid var(--oc-border);
+    background: var(--oc-chip);
+    border-radius: 999px;
+}
+
+.btn-primary {
+    background: linear-gradient(180deg, #0a84ff, var(--oc-primary));
+    color: #ffffff;
+    border-radius: 999px;
+    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.24);
+    transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(180deg, var(--oc-primary), var(--oc-primary-strong));
+    box-shadow: 0 8px 18px rgba(0, 113, 227, 0.3);
+}
+
+.header-utility {
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 999px;
+    border: 1px solid var(--oc-border);
+    background: #ffffff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #4b5563;
+    transition: all 0.2s ease;
+}
+
+.header-utility:hover {
+    border-color: var(--oc-primary-soft-border);
+    color: var(--oc-primary);
+}
+
+.location-panel {
+    width: min(90vw, 360px);
+}
+
+.location-panel select {
+    border: 1px solid var(--oc-border);
+    border-radius: 0.75rem;
+    background: #f7f7f8;
+    color: #374151;
+    padding: 0.55rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+[dir="rtl"] {
+    text-align: right;
+}
+
+.listing-filter-card {
+    border: 1px solid var(--oc-border);
+    border-radius: 14px;
+    background: var(--oc-surface);
+}
+
+.listing-card {
+    border: 1px solid var(--oc-border);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--oc-surface);
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.listing-card:hover {
+    box-shadow: 0 14px 28px rgba(29, 29, 31, 0.12);
+    transform: translateY(-2px);
+}
+
+.listing-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+.lt-wrap {
+    max-width: 1320px;
+    margin: 0 auto;
+    padding: 24px 16px 46px;
+}
+
+.lt-breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--oc-muted);
+    margin-bottom: 14px;
+}
+
+.lt-breadcrumb a {
+    color: #4b5563;
+    text-decoration: none;
+}
+
+.lt-breadcrumb span:last-child {
+    color: var(--oc-text);
+    font-weight: 700;
+}
+
+.lt-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 352px;
+    gap: 18px;
+    align-items: start;
+}
+
+.lt-card {
+    border: 1px solid var(--oc-border);
+    border-radius: 14px;
+    background: #f7f7f8;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.lt-gallery-main {
+    position: relative;
+    border-radius: 10px;
+    background: #1f2937;
+    overflow: hidden;
+    min-height: 440px;
+}
+
+.lt-gallery-main img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    min-height: 440px;
+}
+
+.lt-gallery-main-empty {
+    min-height: 440px;
+    display: grid;
+    place-items: center;
+    color: #cbd5e1;
+    font-size: 14px;
+}
+
+.lt-gallery-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.92);
+    color: #111827;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+}
+
+.lt-gallery-nav[data-gallery-prev] {
+    left: 14px;
+}
+
+.lt-gallery-nav[data-gallery-next] {
+    right: 14px;
+}
+
+.lt-gallery-top {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    right: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.lt-badge {
+    border-radius: 999px;
+    background: #ffd60a;
+    color: #111827;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 6px 10px;
+}
+
+.lt-icon-btn {
+    width: 38px;
+    height: 38px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(17, 24, 39, 0.86);
+    color: #ffffff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.lt-thumbs {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+    padding: 12px 0 2px;
+}
+
+.lt-thumb {
+    width: 86px;
+    min-width: 86px;
+    height: 64px;
+    border: 2px solid transparent;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #d1d5db;
+    cursor: pointer;
+}
+
+.lt-thumb.is-active {
+    border-color: var(--oc-primary);
+}
+
+.lt-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.lt-media-card {
+    padding: 14px;
+}
+
+.lt-detail-card {
+    margin-top: 14px;
+    padding: 18px 20px;
+}
+
+.lt-price-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.lt-price {
+    font-size: 46px;
+    line-height: 1;
+    font-weight: 900;
+    color: #0f172a;
+}
+
+.lt-title {
+    margin-top: 8px;
+    font-size: 21px;
+    font-weight: 700;
+    color: #111827;
+}
+
+.lt-meta {
+    text-align: right;
+    color: #4b5563;
+    font-size: 14px;
+}
+
+.lt-meta strong {
+    color: #111827;
+    font-weight: 700;
+}
+
+.lt-credit {
+    margin-top: 14px;
+    border: 1px solid #e3e7ee;
+    border-radius: 12px;
+    padding: 14px;
+    background: #fafafb;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.lt-credit h4 {
+    margin: 0;
+    font-size: 20px;
+    color: #0f172a;
+}
+
+.lt-credit p {
+    margin: 3px 0 0;
+    font-size: 14px;
+    color: #4b5563;
+}
+
+.lt-tag {
+    border-radius: 999px;
+    background: var(--oc-primary);
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 700;
+    padding: 7px 12px;
+}
+
+.lt-section-title {
+    margin: 18px 0 10px;
+    font-size: 30px;
+    font-weight: 900;
+    color: #111827;
+}
+
+.lt-features {
+    border-top: 1px solid #e2e8f0;
+    margin-top: 12px;
+}
+
+.lt-feature-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+    border-top: 1px solid #e7ebf2;
+    padding: 12px 0;
+}
+
+.lt-feature-row:first-child {
+    border-top: 0;
+}
+
+.lt-f-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    color: #334155;
+    font-size: 15px;
+}
+
+.lt-f-item strong {
+    color: #111827;
+    font-weight: 800;
+    text-align: right;
+}
+
+.lt-side-card {
+    position: sticky;
+    top: 96px;
+    padding: 16px;
+}
+
+.lt-seller-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.lt-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 999px;
+    background: #f3f4f6;
+    color: #111827;
+    display: grid;
+    place-items: center;
+    font-weight: 800;
+}
+
+.lt-seller-name {
+    margin: 0;
+    font-size: 31px;
+    font-weight: 800;
+    color: #111827;
+    line-height: 1.1;
+}
+
+.lt-seller-meta {
+    margin-top: 2px;
+    font-size: 13px;
+    color: #6b7280;
+}
+
+.lt-actions {
+    margin-top: 14px;
+    display: grid;
+    gap: 10px;
+}
+
+.lt-row-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+.lt-btn {
+    height: 46px;
+    border-radius: 999px;
+    border: 1px solid var(--oc-primary-soft-border);
+    background: var(--oc-primary-soft);
+    color: var(--oc-primary);
+    font-size: 20px;
+    font-weight: 800;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    cursor: pointer;
+}
+
+.lt-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.lt-btn-main {
+    border: 0;
+    background: var(--oc-primary);
+    color: #ffffff;
+    width: 100%;
+}
+
+.lt-btn-soft {
+    border-color: #d9e9ff;
+    background: #eef5ff;
+}
+
+.lt-btn-outline {
+    border-color: var(--oc-border);
+    background: #ffffff;
+    color: #334155;
+}
+
+.lt-report {
+    margin-top: 16px;
+    height: 54px;
+    border: 1px solid #dce9fa;
+    border-radius: 999px;
+    background: #f7fbff;
+    color: var(--oc-primary);
+    font-size: 16px;
+    font-weight: 700;
+    display: grid;
+    place-items: center;
+    text-decoration: none;
+}
+
+.lt-policy {
+    margin-top: 16px;
+    text-align: center;
+    color: #6b7280;
+    font-size: 13px;
+}
+
+.lt-related {
+    margin-top: 26px;
+}
+
+.lt-related-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.lt-related-title {
+    font-size: 30px;
+    font-weight: 900;
+    margin: 0;
+}
+
+.lt-scroll-wrap {
+    position: relative;
+    margin-top: 14px;
+}
+
+.lt-scroll-track {
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    padding: 2px 2px 8px;
+}
+
+.lt-rel-card {
+    min-width: 232px;
+    width: 232px;
+    border: 1px solid var(--oc-border);
+    border-radius: 10px;
+    background: #f7f7f8;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+}
+
+.lt-rel-photo {
+    height: 168px;
+    background: #d1d5db;
+}
+
+.lt-rel-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.lt-rel-body {
+    padding: 10px;
+}
+
+.lt-rel-price {
+    font-size: 32px;
+    font-weight: 900;
+    color: #111827;
+    line-height: 1.1;
+}
+
+.lt-rel-title {
+    margin-top: 4px;
+    font-size: 20px;
+    font-weight: 700;
+    color: #111827;
+    line-height: 1.3;
+    min-height: 52px;
+}
+
+.lt-rel-city {
+    margin-top: 6px;
+    font-size: 13px;
+    color: #6b7280;
+}
+
+.lt-scroll-btn {
+    position: absolute;
+    top: 42%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+}
+
+.lt-scroll-btn.prev {
+    left: -16px;
+}
+
+.lt-scroll-btn.next {
+    right: -16px;
+}
+
+.lt-pill-wrap {
+    margin-top: 20px;
+}
+
+.lt-pill-title {
+    margin: 0 0 10px;
+    font-size: 30px;
+    font-weight: 900;
+}
+
+.lt-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.lt-pill {
+    border: 1px solid var(--oc-border);
+    background: #f4f5f7;
+    border-radius: 999px;
+    padding: 8px 14px;
+    color: #374151;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.text-rose-500,
+.text-rose-600,
+.text-rose-700 {
+    color: var(--oc-primary) !important;
+}
+
+.bg-rose-50 {
+    background-color: var(--oc-primary-soft) !important;
+}
+
+.bg-rose-100 {
+    background-color: #dcecff !important;
+}
+
+.bg-rose-500 {
+    background-color: var(--oc-primary) !important;
+}
+
+.bg-rose-600 {
+    background-color: var(--oc-primary-strong) !important;
+}
+
+.border-rose-200,
+.border-rose-300 {
+    border-color: var(--oc-primary-soft-border) !important;
+}
+
+.hover\:text-rose-500:hover,
+.hover\:text-rose-600:hover,
+.hover\:text-rose-700:hover {
+    color: var(--oc-primary) !important;
+}
+
+.hover\:bg-rose-50:hover {
+    background-color: var(--oc-primary-soft) !important;
+}
+
+.hover\:bg-rose-100:hover {
+    background-color: #dcecff !important;
+}
+
+.hover\:bg-rose-600:hover {
+    background-color: var(--oc-primary-strong) !important;
+}
+
+.focus\:ring-rose-200:focus {
+    --tw-ring-color: rgba(0, 113, 227, 0.24) !important;
+}
+
+.accent-rose-500 {
+    accent-color: var(--oc-primary) !important;
+}
+
+@media (max-width: 1080px) {
+    .lt-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .lt-side-card {
+        position: static;
+    }
+
+    .lt-scroll-btn {
+        display: none;
+    }
+
+    .lt-price {
+        font-size: 39px;
+    }
+
+    .lt-seller-name,
+    .lt-section-title,
+    .lt-related-title,
+    .lt-pill-title {
+        font-size: 24px;
+    }
+}
+
+@media (max-width: 640px) {
+    .lt-wrap {
+        padding: 16px 10px 30px;
+    }
+
+    .lt-detail-card,
+    .lt-media-card,
+    .lt-side-card {
+        padding: 12px;
+    }
+
+    .lt-gallery-main,
+    .lt-gallery-main img,
+    .lt-gallery-main-empty {
+        min-height: 260px;
+    }
+
+    .lt-feature-row {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+
+    .lt-price-row {
+        flex-direction: column;
+    }
+
+    .lt-meta {
+        text-align: left;
+    }
+
+    .lt-rel-card {
+        min-width: 196px;
+        width: 196px;
+    }
+
+    .lt-rel-photo {
+        height: 140px;
+    }
+}
+
+html {
+    font-family: var(--oc-font-sans);
+}
+
+body,
+button,
+input,
+select,
+textarea {
+    font-family: var(--oc-font-sans);
+}
+
+.site-main h1,
+.site-main h2,
+.site-main h3,
+.site-main h4 {
+    text-align: center;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+}
+
+.site-main h1 {
+    margin-inline: auto;
+}
+
+.listing-filter-card,
+.listing-card,
+.panel-surface,
+.panel-list-card {
+    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
+}
+
+.listing-filter-card,
+.listing-card {
+    border-color: #d9e2ef;
+}
+
+.listing-filter-card {
+    text-align: center;
+    border-radius: 18px;
+}
+
+.listing-card {
+    border-radius: 18px;
+    text-align: center;
+}
+
+.listing-card .listing-title {
+    max-width: 26ch;
+    margin-inline: auto;
+    line-height: 1.45;
+}
+
+.lt-card {
+    background: #ffffff;
+    border-color: #d9e2ef;
+}
+
+.lt-price-row {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.lt-price {
+    font-size: 2.25rem;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+}
+
+.lt-title {
+    margin-inline: auto;
+    max-width: 24ch;
+    font-size: 1.35rem;
+    text-align: center;
+}
+
+.lt-meta {
+    text-align: center;
+    font-size: 0.95rem;
+}
+
+.lt-credit {
+    flex-direction: column;
+    text-align: center;
+}
+
+.lt-credit h4 {
+    font-size: 1.15rem;
+}
+
+.lt-credit p {
+    font-size: 0.95rem;
+}
+
+.lt-section-title,
+.lt-related-title,
+.lt-pill-title {
+    font-size: 1.55rem;
+    text-align: center;
+}
+
+.lt-seller-head {
+    justify-content: center;
+    text-align: center;
+}
+
+.lt-seller-name {
+    font-size: 1.4rem;
+}
+
+.lt-actions {
+    justify-content: center;
+}
+
+.lt-btn {
+    height: 44px;
+    font-size: 1rem;
+}
+
+.panel-surface {
+    background: rgba(255, 255, 255, 0.94);
+    border: 1px solid #d9e2ef;
+    border-radius: 24px;
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.panel-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.panel-search {
+    position: relative;
+    width: 100%;
+    max-width: 42rem;
+}
+
+.panel-search-icon {
+    position: absolute;
+    top: 50%;
+    left: 1.15rem;
+    transform: translateY(-50%);
+    color: #94a3b8;
+}
+
+.panel-search-input {
+    width: 100%;
+    height: 3.25rem;
+    border-radius: 999px;
+    border: 1px solid #cfd8e3;
+    background: #ffffff;
+    padding: 0 1.25rem 0 3.1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #334155;
+    text-align: center;
+}
+
+.panel-search-input::placeholder {
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+.panel-filter-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.panel-filter-tab {
+    min-height: 2.75rem;
+    padding: 0.75rem 1.3rem;
+    border-radius: 999px;
+    border: 1px solid #cfd8e3;
+    background: #ffffff;
+    color: #475569;
+    font-size: 0.95rem;
+    font-weight: 600;
+    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.panel-filter-tab:hover {
+    background: #f8fafc;
+}
+
+.panel-filter-tab.is-active {
+    border-color: var(--oc-primary-soft-border);
+    background: var(--oc-primary-soft);
+    color: var(--oc-primary);
+}
+
+.panel-list-card {
+    border: 1px solid #d9e2ef;
+    border-radius: 24px;
+    background: #fbfcfe;
+    padding: 1.25rem;
+    text-align: center;
+}
+
+.panel-list-card-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+.panel-list-media {
+    width: 100%;
+    max-width: 16.25rem;
+    height: 11rem;
+    border-radius: 18px;
+    overflow: hidden;
+}
+
+.panel-list-main {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    align-items: center;
+}
+
+.panel-list-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.panel-list-price {
+    font-size: 1.9rem;
+    font-weight: 800;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+}
+
+.panel-status-badge {
+    display: inline-flex;
+    min-height: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+    border-radius: 999px;
+    font-size: 0.95rem;
+    font-weight: 700;
+}
+
+.panel-list-title {
+    max-width: 26ch;
+    margin-top: 0.35rem;
+    font-size: 1.2rem;
+    font-weight: 700;
+    line-height: 1.35;
+}
+
+.panel-list-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-top: auto;
+    padding-top: 1.25rem;
+}
+
+.panel-action-btn {
+    min-height: 2.75rem;
+    border-radius: 999px;
+    padding: 0.75rem 1.35rem;
+    font-size: 0.95rem;
+    font-weight: 700;
+    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.panel-action-btn-secondary {
+    border: 1px solid var(--oc-primary-soft-border);
+    background: #ffffff;
+    color: var(--oc-primary);
+}
+
+.panel-action-btn-secondary:hover {
+    background: var(--oc-primary-soft);
+}
+
+.panel-action-btn-primary {
+    border: 1px solid var(--oc-primary);
+    background: var(--oc-primary);
+    color: #ffffff;
+}
+
+.panel-action-btn-primary:hover {
+    border-color: var(--oc-primary-strong);
+    background: var(--oc-primary-strong);
+}
+
+.panel-list-aside {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.95rem;
+}
+
+.panel-stats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.panel-stat-box {
+    display: inline-flex;
+    min-width: 5.5rem;
+    min-height: 2.75rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: 1rem;
+    background: #e9eff6;
+    padding: 0.75rem 1rem;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #475569;
+}
+
+.panel-list-dates {
+    max-width: 24ch;
+    font-size: 0.95rem;
+    color: #64748b;
+    text-align: center;
+}
+
+.panel-inline-note {
+    margin-top: 1rem;
+    border-radius: 1rem;
+    background: #eef6ff;
+    padding: 0.9rem 1rem;
+    font-size: 0.95rem;
+    color: #334155;
+    text-align: center;
+}
+
+.panel-empty-state {
+    border: 1px dashed #cbd5e1;
+    border-radius: 1rem;
+    padding: 4rem 1rem;
+    text-align: center;
+    color: #64748b;
+}
+
+@media (min-width: 1280px) {
+    .panel-list-card-body {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .panel-list-main {
+        padding-inline: 1rem;
+    }
+
+    .panel-list-aside {
+        flex: 0 0 15rem;
+    }
+}
+
+@media (max-width: 1080px) {
+    .lt-price {
+        font-size: 2rem;
+    }
+
+    .lt-seller-name,
+    .lt-section-title,
+    .lt-related-title,
+    .lt-pill-title {
+        font-size: 1.35rem;
+    }
+}
+
+@media (max-width: 640px) {
+    .panel-surface {
+        padding: 1.1rem;
+        border-radius: 20px;
+    }
+
+    .panel-list-card {
+        padding: 1rem;
+        border-radius: 20px;
+    }
+
+    .panel-list-price {
+        font-size: 1.6rem;
+    }
+
+    .panel-list-title {
+        font-size: 1.05rem;
+    }
+
+    .lt-price {
+        font-size: 1.75rem;
+    }
+
+    .lt-title {
+        font-size: 1.15rem;
+    }
+
+    .lt-meta {
+        text-align: center;
+    }
+}
diff --git a/resources/views/errors/403.blade.php b/resources/views/errors/403.blade.php
index 5a47fa522..a438078cd 100644
--- a/resources/views/errors/403.blade.php
+++ b/resources/views/errors/403.blade.php
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>403 Forbidden</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="min-h-screen bg-gray-100 flex items-center justify-center p-6">
+<body class="min-h-screen font-sans antialiased bg-gray-100 flex items-center justify-center p-6">
     <div class="max-w-md w-full bg-white rounded-xl shadow p-6 text-center">
         <h1 class="text-2xl font-bold text-gray-900">403</h1>
         <p class="mt-2 text-gray-700">Bu sayfaya erişim izniniz yok.</p>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 25b9c0132..15fb945d1 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -41,11 +41,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>{{ $siteName }} @hasSection('title') - @yield('title') @endif</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="{{ asset('theme.css') }}">
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body class="min-h-screen">
+<body class="min-h-screen font-sans antialiased">
     <nav class="market-nav-surface sticky top-0 z-50">
         <div class="max-w-[1320px] mx-auto px-4 py-4">
             <div class="flex items-center gap-3 md:gap-4">
@@ -203,7 +202,7 @@
         <div class="bg-rose-100 border border-rose-300 text-rose-700 px-4 py-3 rounded-xl text-sm">{{ session('error') }}</div>
     </div>
     @endif
-    <main>@yield('content')</main>
+    <main class="site-main">@yield('content')</main>
     <footer class="mt-14 bg-slate-100 text-slate-600 border-t border-slate-200">
         <div class="max-w-[1320px] mx-auto px-4 py-12">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 11feb470a..b04797808 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -6,11 +6,6 @@
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
         <title>{{ config('app.name', 'Laravel') }}</title>
-
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
diff --git a/resources/views/panel/listings.blade.php b/resources/views/panel/listings.blade.php
index f5fce29da..31123d12b 100644
--- a/resources/views/panel/listings.blade.php
+++ b/resources/views/panel/listings.blade.php
@@ -7,30 +7,30 @@
     <div class="grid grid-cols-1 lg:grid-cols-[220px,1fr] gap-4">
         @include('panel.partials.sidebar', ['activeMenu' => 'listings'])
 
-        <section class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6">
-            <div class="flex flex-col xl:flex-row xl:items-center gap-3 xl:gap-4 mb-5">
-                <form method="GET" action="{{ route('panel.listings.index') }}" class="relative flex-1 max-w-xl">
-                    <svg class="w-6 h-6 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <section class="panel-surface">
+            <div class="panel-toolbar">
+                <form method="GET" action="{{ route('panel.listings.index') }}" class="panel-search">
+                    <svg class="panel-search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M21 21l-4.35-4.35m1.6-5.05a7.25 7.25 0 11-14.5 0 7.25 7.25 0 0114.5 0z"/>
                     </svg>
-                    <input type="text" name="search" value="{{ $search }}" placeholder="İlan başlığına göre ara" class="w-full h-14 rounded-2xl border border-slate-300 pl-14 pr-4 text-lg font-semibold text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-rose-200">
+                    <input type="text" name="search" value="{{ $search }}" placeholder="İlan başlığına göre ara" class="panel-search-input focus:outline-none focus:ring-2 focus:ring-rose-200">
                     <input type="hidden" name="status" value="{{ $status }}">
                 </form>
 
-                <div class="flex flex-wrap items-center gap-2">
-                    <a href="{{ route('panel.listings.index', ['search' => $search, 'status' => 'all']) }}" class="inline-flex items-center h-12 px-6 rounded-full border text-xl font-semibold {{ $status === 'all' ? 'border-rose-500 text-rose-500 bg-rose-50' : 'border-slate-300 text-slate-700 hover:bg-slate-100' }}">
+                <div class="panel-filter-tabs">
+                    <a href="{{ route('panel.listings.index', ['search' => $search, 'status' => 'all']) }}" class="panel-filter-tab {{ $status === 'all' ? 'is-active' : '' }}">
                         Tüm İlanlar ({{ $counts['all'] }})
                     </a>
-                    <a href="{{ route('panel.listings.index', ['search' => $search, 'status' => 'sold']) }}" class="inline-flex items-center h-12 px-6 rounded-full border text-xl font-semibold {{ $status === 'sold' ? 'border-rose-500 text-rose-500 bg-rose-50' : 'border-slate-300 text-slate-700 hover:bg-slate-100' }}">
+                    <a href="{{ route('panel.listings.index', ['search' => $search, 'status' => 'sold']) }}" class="panel-filter-tab {{ $status === 'sold' ? 'is-active' : '' }}">
                         Satıldı ({{ $counts['sold'] }})
                     </a>
-                    <a href="{{ route('panel.listings.index', ['search' => $search, 'status' => 'expired']) }}" class="inline-flex items-center h-12 px-6 rounded-full border text-xl font-semibold {{ $status === 'expired' ? 'border-rose-500 text-rose-500 bg-rose-50' : 'border-slate-300 text-slate-700 hover:bg-slate-100' }}">
+                    <a href="{{ route('panel.listings.index', ['search' => $search, 'status' => 'expired']) }}" class="panel-filter-tab {{ $status === 'expired' ? 'is-active' : '' }}">
                         Süresi Dolmuş ({{ $counts['expired'] }})
                     </a>
                 </div>
             </div>
 
-            <div class="space-y-4">
+            <div class="space-y-4 panel-list-section">
                 @forelse($listings as $listing)
                 @php
                     $listingImage = $listing->getFirstMediaUrl('listing-images');
@@ -53,9 +53,9 @@
                     $viewCount = (int) ($listing->view_count ?? 0);
                     $expiresAt = $listing->expires_at?->format('d/m/Y');
                 @endphp
-                <article class="rounded-2xl border border-slate-300 bg-slate-50 p-4 sm:p-5">
-                    <div class="flex flex-col xl:flex-row gap-4 xl:items-stretch">
-                        <div class="w-full xl:w-[260px] h-[180px] bg-slate-200 rounded-xl overflow-hidden shrink-0">
+                <article class="panel-list-card">
+                    <div class="panel-list-card-body">
+                        <div class="panel-list-media bg-slate-200">
                             @if($listingImage)
                             <img src="{{ $listingImage }}" alt="{{ $listing->title }}" class="w-full h-full object-cover">
                             @else
@@ -63,17 +63,17 @@
                             @endif
                         </div>
 
-                        <div class="flex-1 min-w-0 flex flex-col">
-                            <div class="flex flex-wrap items-center gap-3">
-                                <p class="text-4xl font-black text-slate-900">{{ $priceLabel }}</p>
-                                <span class="inline-flex items-center h-10 px-4 rounded-full text-lg font-bold {{ $statusBadgeClass }}">{{ $statusLabel }}</span>
+                        <div class="panel-list-main">
+                            <div class="panel-list-summary">
+                                <p class="panel-list-price text-slate-900">{{ $priceLabel }}</p>
+                                <span class="panel-status-badge {{ $statusBadgeClass }}">{{ $statusLabel }}</span>
                             </div>
-                            <h2 class="text-2xl font-semibold text-slate-800 mt-3 leading-tight break-words">{{ $listing->title }}</h2>
+                            <h2 class="panel-list-title text-slate-800">{{ $listing->title }}</h2>
 
-                            <div class="mt-auto pt-5 flex flex-wrap items-center gap-2">
+                            <div class="panel-list-actions">
                                 <form method="POST" action="{{ route('panel.listings.destroy', $listing) }}">
                                     @csrf
-                                    <button type="submit" class="h-12 px-6 rounded-full border-2 border-rose-500 text-rose-500 text-2xl font-bold hover:bg-rose-50 transition">
+                                    <button type="submit" class="panel-action-btn panel-action-btn-secondary">
                                         İlanı Kaldır
                                     </button>
                                 </form>
@@ -81,7 +81,7 @@
                                 @if((string) $listing->status !== 'sold')
                                 <form method="POST" action="{{ route('panel.listings.mark-sold', $listing) }}">
                                     @csrf
-                                    <button type="submit" class="h-12 px-6 rounded-full bg-rose-500 text-white text-2xl font-bold hover:bg-rose-600 transition">
+                                    <button type="submit" class="panel-action-btn panel-action-btn-primary">
                                         Satıldı İşaretle
                                     </button>
                                 </form>
@@ -90,7 +90,7 @@
                                 @if((string) $listing->status === 'expired')
                                 <form method="POST" action="{{ route('panel.listings.republish', $listing) }}">
                                     @csrf
-                                    <button type="submit" class="h-12 px-6 rounded-full border-2 border-rose-500 text-rose-500 text-2xl font-bold hover:bg-rose-50 transition">
+                                    <button type="submit" class="panel-action-btn panel-action-btn-secondary">
                                         Yeniden Yayınla
                                     </button>
                                 </form>
@@ -98,19 +98,19 @@
                             </div>
                         </div>
 
-                        <div class="xl:w-[260px] flex xl:flex-col items-start xl:items-end justify-between gap-3">
-                            <div class="flex items-center gap-3">
-                                <div class="h-12 min-w-24 px-4 rounded-2xl bg-slate-200 text-slate-500 text-xl font-bold inline-flex items-center justify-center gap-2">
+                        <div class="panel-list-aside">
+                            <div class="panel-stats">
+                                <div class="panel-stat-box">
                                     <span>👁</span>
                                     <span>{{ $viewCount }}</span>
                                 </div>
-                                <div class="h-12 min-w-24 px-4 rounded-2xl bg-slate-200 text-slate-500 text-xl font-bold inline-flex items-center justify-center gap-2">
+                                <div class="panel-stat-box">
                                     <span>♥</span>
                                     <span>{{ $favoriteCount }}</span>
                                 </div>
                             </div>
 
-                            <p class="text-lg text-slate-500 text-left xl:text-right">
+                            <p class="panel-list-dates">
                                 Yayın Tarihi & Bitiş Tarihi:
                                 <strong class="text-slate-700">
                                     {{ $listing->created_at?->format('d/m/Y') ?? '-' }} - {{ $expiresAt ?: '-' }}
@@ -120,13 +120,13 @@
                     </div>
 
                     @if((string) $listing->status === 'expired')
-                    <div class="mt-4 rounded-xl bg-sky-100 px-4 py-3 text-base text-slate-700">
+                    <div class="panel-inline-note">
                         <strong>Bu ilanın süresi doldu.</strong> Eğer sattıysan, lütfen satıldı olarak işaretle.
                     </div>
                     @endif
                 </article>
                 @empty
-                <div class="rounded-xl border border-dashed border-slate-300 py-16 text-center text-slate-500">
+                <div class="panel-empty-state">
                     Bu filtreye uygun ilan bulunamadı.
                 </div>
                 @endforelse
diff --git a/tailwind.config.js b/tailwind.config.js
index c29eb1a15..11af523a1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,9 @@ import forms from '@tailwindcss/forms';
 /** @type {import('tailwindcss').Config} */
 export default {
     content: [
+        './app/**/*.php',
+        './Modules/**/*.php',
+        './Modules/**/*.blade.php',
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
@@ -12,7 +15,28 @@ export default {
     theme: {
         extend: {
             fontFamily: {
-                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+                sans: [
+                    '-apple-system',
+                    'BlinkMacSystemFont',
+                    'SF Pro Text',
+                    'SF Pro Display',
+                    'Helvetica Neue',
+                    'Helvetica',
+                    'Arial',
+                    ...defaultTheme.fontFamily.sans,
+                ],
+            },
+            fontSize: {
+                xs: ['0.75rem', { lineHeight: '1rem' }],
+                sm: ['0.875rem', { lineHeight: '1.25rem' }],
+                base: ['1rem', { lineHeight: '1.55rem' }],
+                lg: ['1.0625rem', { lineHeight: '1.6rem' }],
+                xl: ['1.125rem', { lineHeight: '1.65rem' }],
+                '2xl': ['1.35rem', { lineHeight: '1.4' }],
+                '3xl': ['1.65rem', { lineHeight: '1.2' }],
+                '4xl': ['1.95rem', { lineHeight: '1.1' }],
+                '5xl': ['2.45rem', { lineHeight: '1.05' }],
+                '6xl': ['3.1rem', { lineHeight: '1' }],
             },
         },
     },