Şablon:Anasayfa/styles.css: Revizyonlar arasındaki fark
(Warm Editorial + Archive Premium CSS sistemi uygulandı) |
(Anasayfa hero bolumunu daha normal ve mobil uyumlu gosterim icin guncelle) |
||
| 48. satır: | 48. satır: | ||
.ana-brown { color: #2F241D; } | .ana-brown { color: #2F241D; } | ||
.ana-hero { | .ana-hero { | ||
border-radius: 20px; | border-radius: 20px; | ||
margin-bottom: 1.8em; | margin-bottom: 1.8em; | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.ana-hero-kicker { font-size: .8rem; letter-spacing: .18em; color: # | .ana-hero--normal { | ||
.ana-hero-title { color: # | background: linear-gradient(135deg, #fffdfb 0%, #f3e8d8 100%); | ||
border: 1px solid #dcc7a1; | |||
box-shadow: 0 16px 40px rgba(36,21,13,0.10); | |||
padding: 1.6em; | |||
} | |||
.ana-hero-layout { | |||
display: grid; | |||
grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.9fr); | |||
gap: 1.4em; | |||
align-items: center; | |||
} | |||
.ana-hero-copy { | |||
min-width: 0; | |||
} | |||
.ana-hero-kicker { | |||
font-size: .8rem; | |||
letter-spacing: .18em; | |||
color: #8a603d; | |||
text-transform: uppercase; | |||
margin-bottom: .9em; | |||
font-weight: 700; | |||
} | |||
.ana-hero-title { | |||
color: #2F241D; | |||
margin: 0 0 .45em 0; | |||
font-size: 2rem; | |||
line-height: 1.18; | |||
font-weight: 800; | |||
text-shadow: none; | |||
} | |||
.ana-hero-title-accent { color: #C89A5B; } | .ana-hero-title-accent { color: #C89A5B; } | ||
.ana-hero-text { color: | .ana-hero-text { | ||
.ana-chip { background: | color: #5b4738; | ||
.ana-chip-primary { background: #C89A5B; color: #24150D; font-weight: 700; border-color: transparent; } | font-size: 1rem; | ||
line-height: 1.8; | |||
max-width: 640px; | |||
margin: 0 0 1.2em 0; | |||
} | |||
.ana-hero-actions { | |||
display: flex; | |||
gap: 0.8em; | |||
flex-wrap: wrap; | |||
} | |||
.ana-chip { | |||
background: #fff7ec; | |||
color: #5c3e27; | |||
padding: .55em 1.1em; | |||
border-radius: 999px; | |||
font-size: .92rem; | |||
border: 1px solid #dcc7a1; | |||
display: inline-block; | |||
} | |||
.ana-chip a { | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
.ana-chip-primary { | |||
background: #C89A5B; | |||
color: #24150D; | |||
font-weight: 700; | |||
border-color: transparent; | |||
} | |||
.ana-hero-media { | |||
text-align: center; | |||
} | |||
.ana-hero-media .mw-file-element { | |||
display: inline-block; | |||
width: 100%; | |||
max-width: 360px; | |||
height: auto; | |||
border-radius: 18px; | |||
border: 1px solid rgba(200,154,91,0.28); | |||
background: #fffdfb; | |||
box-shadow: 0 18px 36px rgba(36,21,13,0.12); | |||
} | |||
.ana-stat-card { background: #FFFDFC; border: 1px solid #E6D7C3; border-radius: 16px; padding: 1.1em .9em; text-align: center; box-shadow: 0 8px 24px rgba(70, 45, 25, 0.045); } | .ana-stat-card { background: #FFFDFC; border: 1px solid #E6D7C3; border-radius: 16px; padding: 1.1em .9em; text-align: center; box-shadow: 0 8px 24px rgba(70, 45, 25, 0.045); } | ||
.ana-stat-number { font-size: 2rem; font-weight: 800; color: #2F241D; line-height: 1; } | .ana-stat-number { font-size: 2rem; font-weight: 800; color: #2F241D; line-height: 1; } | ||
.ana-stat-label { font-size: .78rem; color: #7A4E2D; margin-top: .35em; letter-spacing: .05em; text-transform: uppercase; } | .ana-stat-label { font-size: .78rem; color: #7A4E2D; margin-top: .35em; letter-spacing: .05em; text-transform: uppercase; } | ||
.ana-section-soft { background: linear-gradient(135deg, #FFFDFC 0%, #FBF6EF 100%); border: 1px solid #E6D7C3; border-radius: 16px; padding: 1.35em; margin-bottom: 1.75em; box-shadow: 0 8px 26px rgba(70,45,25,.04); } | .ana-section-soft { background: linear-gradient(135deg, #FFFDFC 0%, #FBF6EF 100%); border: 1px solid #E6D7C3; border-radius: 16px; padding: 1.35em; margin-bottom: 1.75em; box-shadow: 0 8px 26px rgba(70,45,25,.04); } | ||
@media (max-width: 900px) { | |||
.ana-hero-layout { | |||
grid-template-columns: 1fr; | |||
} | |||
.ana-hero-media { | |||
order: -1; | |||
} | |||
.ana-hero-title { | |||
font-size: 1.7rem; | |||
} | |||
} | |||
@media (max-width: 640px) { | |||
.ana-hero--normal { | |||
padding: 1.1em; | |||
} | |||
.ana-hero-kicker { | |||
letter-spacing: 0.1em; | |||
} | |||
.ana-hero-title { | |||
font-size: 1.45rem; | |||
} | |||
.ana-hero-text { | |||
font-size: 0.95rem; | |||
line-height: 1.7; | |||
} | |||
.ana-chip { | |||
width: 100%; | |||
text-align: center; | |||
box-sizing: border-box; | |||
} | |||
} | |||
15.03, 16 Temmuz 2026 itibarı ile sayfanın şu anki hâli
/* Warm Editorial + Archive Premium */
body { background: #F7F3EA; }
.anasayfa-moduler { color: #2F241D; }
.ana-kutu {
background: #FFFDFC;
border: 1px solid #E6D7C3;
border-radius: 16px;
padding: 1.35em;
margin-bottom: 1.75em;
box-shadow: 0 8px 26px rgba(70, 45, 25, 0.05);
}
.ana-baslik {
color: #2F241D;
font-size: 1.02rem;
font-weight: 700;
margin-bottom: 1em;
border-bottom: 1px solid #E6D7C3;
padding-bottom: 0.55em;
letter-spacing: 0.01em;
}
.ana-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1em; }
.ana-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1em; }
.ana-grid-tight { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .85em; }
.ana-card {
background: rgba(122,78,45,0.05);
border: 1px solid rgba(200,154,91,0.12);
border-radius: 14px;
padding: 1em;
box-shadow: 0 6px 18px rgba(70, 45, 25, 0.035);
}
.ana-card-white {
background: #fffdfb;
border: 1px solid #E6D7C3;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(70, 45, 25, 0.05);
}
.ana-card-head {
background: linear-gradient(135deg,#24150D,#3B2418);
color: #F7F3EA;
padding: 1em;
font-size: 1.05rem;
font-weight: 700;
text-align: center;
letter-spacing: .01em;
}
.ana-muted { color: #6E5A4B; font-size: .86rem; }
.ana-brown { color: #2F241D; }
.ana-hero {
border-radius: 20px;
margin-bottom: 1.8em;
position: relative;
overflow: hidden;
}
.ana-hero--normal {
background: linear-gradient(135deg, #fffdfb 0%, #f3e8d8 100%);
border: 1px solid #dcc7a1;
box-shadow: 0 16px 40px rgba(36,21,13,0.10);
padding: 1.6em;
}
.ana-hero-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.9fr);
gap: 1.4em;
align-items: center;
}
.ana-hero-copy {
min-width: 0;
}
.ana-hero-kicker {
font-size: .8rem;
letter-spacing: .18em;
color: #8a603d;
text-transform: uppercase;
margin-bottom: .9em;
font-weight: 700;
}
.ana-hero-title {
color: #2F241D;
margin: 0 0 .45em 0;
font-size: 2rem;
line-height: 1.18;
font-weight: 800;
text-shadow: none;
}
.ana-hero-title-accent { color: #C89A5B; }
.ana-hero-text {
color: #5b4738;
font-size: 1rem;
line-height: 1.8;
max-width: 640px;
margin: 0 0 1.2em 0;
}
.ana-hero-actions {
display: flex;
gap: 0.8em;
flex-wrap: wrap;
}
.ana-chip {
background: #fff7ec;
color: #5c3e27;
padding: .55em 1.1em;
border-radius: 999px;
font-size: .92rem;
border: 1px solid #dcc7a1;
display: inline-block;
}
.ana-chip a {
color: inherit;
text-decoration: none;
}
.ana-chip-primary {
background: #C89A5B;
color: #24150D;
font-weight: 700;
border-color: transparent;
}
.ana-hero-media {
text-align: center;
}
.ana-hero-media .mw-file-element {
display: inline-block;
width: 100%;
max-width: 360px;
height: auto;
border-radius: 18px;
border: 1px solid rgba(200,154,91,0.28);
background: #fffdfb;
box-shadow: 0 18px 36px rgba(36,21,13,0.12);
}
.ana-stat-card { background: #FFFDFC; border: 1px solid #E6D7C3; border-radius: 16px; padding: 1.1em .9em; text-align: center; box-shadow: 0 8px 24px rgba(70, 45, 25, 0.045); }
.ana-stat-number { font-size: 2rem; font-weight: 800; color: #2F241D; line-height: 1; }
.ana-stat-label { font-size: .78rem; color: #7A4E2D; margin-top: .35em; letter-spacing: .05em; text-transform: uppercase; }
.ana-section-soft { background: linear-gradient(135deg, #FFFDFC 0%, #FBF6EF 100%); border: 1px solid #E6D7C3; border-radius: 16px; padding: 1.35em; margin-bottom: 1.75em; box-shadow: 0 8px 26px rgba(70,45,25,.04); }
@media (max-width: 900px) {
.ana-hero-layout {
grid-template-columns: 1fr;
}
.ana-hero-media {
order: -1;
}
.ana-hero-title {
font-size: 1.7rem;
}
}
@media (max-width: 640px) {
.ana-hero--normal {
padding: 1.1em;
}
.ana-hero-kicker {
letter-spacing: 0.1em;
}
.ana-hero-title {
font-size: 1.45rem;
}
.ana-hero-text {
font-size: 0.95rem;
line-height: 1.7;
}
.ana-chip {
width: 100%;
text-align: center;
box-sizing: border-box;
}
}