* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Arial,
Helvetica,
sans-serif;
color: #1f2937;
background: #f8fafc;
}
/* ================= HEADER ================= */
.site-header {
background: #0f172a;
color: white;
position: sticky;
top: 0;
z-index: 1000;
}
.header-inner {
width: 92%;
max-width: 1250px;
margin: auto;
min-height: 72px;
display: flex;
align-items: center;
gap: 30px;
}
.logo {
color: white;
text-decoration: none;
display: flex;
align-items: baseline;
white-space: nowrap;
}
.irugur-footer-offers {
display: inline-block;
margin: 10px 0;
padding: 9px 16px;
border-radius: 7px;
background: #2563eb;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 13px;
}
.irugur-footer-offers:hover {
background: #1d4ed8;
}
.logo-irugur {
font-size: 28px;
font-weight: 800;
letter-spacing: 2px;
}
.logo-com {
font-size: 15px;
font-weight: 600;
}
.main-nav {
display: flex;
align-items: center;
gap: 25px;
margin-left: auto;
}
.main-nav a {
color: #e2e8f0;
text-decoration: none;
font-size: 14px;
}
.main-nav a:hover {
color: white;
}
.admin-button {
background: #f59e0b;
color: white;
text-decoration: none;
padding: 10px 18px;
border-radius: 7px;
font-weight: bold;
font-size: 14px;
}
/* ================= HERO ================= */
.hero {
min-height: 520px;
background:
linear-gradient(
120deg,
rgba(15, 23, 42, 0.58),
rgba(15, 23, 42, 0.18)
),
url('../images/irugur-hero.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
}
.hero-overlay {
width: 100%;
}
.hero-content {
width: 92%;
max-width: 1000px;
margin: auto;
text-align: center;
color: white;
}
.hero-small {
font-size: 13px;
letter-spacing: 3px;
font-weight: bold;
margin-bottom: 18px;
opacity: 0.85;
}
.hero h1 {
margin: 0;
font-size: 58px;
line-height: 1.1;
}
.hero h1 span {
color: #fbbf24;
}
.hero p {
max-width: 720px;
margin: 25px auto;
font-size: 19px;
line-height: 1.7;
color: #e2e8f0;
}
/* ================= SEARCH ================= */
.search-box {
max-width: 700px;
margin: 35px auto 0;
display: flex;
background: white;
padding: 6px;
border-radius: 10px;
box-shadow:
0 15px 35px rgba(0,0,0,0.25);
}
.search-box input {
flex: 1;
border: none;
outline: none;
padding: 16px;
font-size: 16px;
color: #111827;
}
.search-box button {
border: none;
background: #f59e0b;
color: white;
padding: 0 25px;
border-radius: 7px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.search-box button:hover {
background: #d97706;
}
/* ================= SECTIONS ================= */
.explore-section {
width: 92%;
max-width: 1250px;
margin: 75px auto;
}
.section-title {
text-align: center;
max-width: 700px;
margin: 0 auto 45px;
}
.section-label {
color: #2563eb;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 10px;
}
.section-title h2 {
font-size: 36px;
margin: 0 0 12px;
color: #0f172a;
}
.section-title p {
margin: 0;
color: #64748b;
line-height: 1.6;
}
/* ================= CATEGORY GRID ================= */
.category-grid {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(220px, 1fr)
);
gap: 22px;
}
.category-card {
background: white;
text-decoration: none;
color: #1f2937;
padding: 25px;
border-radius: 14px;
min-height: 225px;
border: 1px solid #e5e7eb;
box-shadow:
0 5px 20px rgba(15,23,42,0.05);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.category-card:hover {
transform: translateY(-6px);
box-shadow:
0 15px 30px rgba(15,23,42,0.12);
}
.category-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
font-size: 31px;
background: #eff6ff;
border-radius: 12px;
margin-bottom: 18px;
}
.category-card h3 {
margin: 0 0 9px;
font-size: 20px;
color: #0f172a;
}
.category-card p {
margin: 0;
min-height: 42px;
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
.explore-link {
display: inline-block;
margin-top: 16px;
color: #2563eb;
font-size: 13px;
font-weight: bold;
}
/* ================= ABOUT ================= */
.about-section {
background: #eaf2ff;
padding: 75px 0;
}
.about-inner {
width: 92%;
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns:
1.5fr
1fr;
gap: 70px;
align-items: center;
}
.about-content h2 {
font-size: 38px;
color: #0f172a;
margin: 0 0 20px;
}
.about-content p {
color: #475569;
line-height: 1.8;
font-size: 16px;
}
.about-box {
background: #0f172a;
color: white;
border-radius: 20px;
padding: 50px 30px;
text-align: center;
box-shadow:
0 20px 40px rgba(15,23,42,0.18);
}
.about-number {
font-size: 38px;
font-weight: 800;
letter-spacing: 3px;
}
.about-text {
margin-top: 12px;
color: #cbd5e1;
line-height: 1.6;
}
/* ================= CONTACT ================= */
.contact-section {
padding: 75px 20px;
background: white;
}
/* ================= FOOTER ================= */
.site-footer {
background: #0f172a;
color: white;
padding: 40px 0 20px;
}
.footer-inner {
width: 92%;
max-width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
gap: 30px;
}
.footer-logo {
font-size: 25px;
font-weight: 800;
letter-spacing: 2px;
}
.footer-logo span {
font-size: 14px;
}
.footer-inner p {
color: #94a3b8;
margin-top: 8px;
}
.footer-location {
text-align: right;
color: #cbd5e1;
line-height: 1.7;
}
.footer-bottom {
width: 92%;
max-width: 1100px;
margin: 30px auto 0;
padding-top: 20px;
border-top: 1px solid #334155;
color: #64748b;
font-size: 12px;
text-align: center;
}
/* ================= MOBILE ================= */
@media (max-width: 800px) {
.header-inner {
flex-wrap: wrap;
justify-content: center;
padding: 15px 0;
}
.main-nav {
order: 3;
width: 100%;
justify-content: center;
margin-left: 0;
gap: 15px;
flex-wrap: wrap;
}
.hero {
min-height: 500px;
}
.hero h1 {
font-size: 42px;
}
.hero p {
font-size: 16px;
}
.search-box {
flex-direction: column;
background: transparent;
box-shadow: none;
gap: 8px;
}
.search-box input {
border-radius: 7px;
}
.search-box button {
padding: 14px;
}
.about-inner {
grid-template-columns: 1fr;
gap: 35px;
}
.about-content h2 {
font-size: 30px;
}
.footer-inner {
flex-direction: column;
text-align: center;
}
.footer-location {
text-align: center;
}
}