/**
* =====================================================================
* 04-static-pages.css — Statik Sayfalar Ortak Stili
* altilineverir.com.tr
*
* KAYNAK: Her statik sayfada ayrı ayrı bloğu
* SİLİNECEK, header.php'ye şu eklenecek:
*
*
* Sayfaya özel küçük stiller varsa o sayfanın 'inde kalabilir
* ama yalnızca gerçekten o sayfaya özel olanlar.
* =====================================================================
*/
/* ── Sayfa Wrapper ───────────────────────────────────────────────── */
.page-wrap {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px 80px;
}
.page-wrap-wide {
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px 80px;
}
/* ── Sayfa Başlığı ───────────────────────────────────────────────── */
.page-hero {
text-align: center;
margin-bottom: 48px;
padding-bottom: 32px;
border-bottom: 1px solid var(--divider);
}
.page-hero h1 {
font-family: var(--font-display);
font-size: clamp(28px, 5vw, 48px);
color: var(--red);
letter-spacing: 2px;
margin-bottom: 12px;
}
.page-hero p {
font-size: 16px;
color: var(--ink-muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* ── İçerik Bölümleri ────────────────────────────────────────────── */
.page-section {
background: var(--card);
border: 1px solid var(--divider);
border-radius: var(--radius-md);
padding: 32px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.page-section h2 {
font-family: var(--font-cond);
font-size: 20px;
font-weight: 700;
color: var(--red);
letter-spacing: 1px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.page-section h3 {
font-size: 15px;
font-weight: 700;
color: var(--ink);
margin: 20px 0 10px;
}
.page-section p {
font-size: 14px;
color: var(--ink-mid);
line-height: 1.75;
margin-bottom: 12px;
}
.page-section ul,
.page-section ol {
padding-left: 20px;
margin-bottom: 12px;
}
.page-section li {
font-size: 14px;
color: var(--ink-mid);
line-height: 1.7;
margin-bottom: 6px;
}
/* ── Vurgu Kutuları ──────────────────────────────────────────────── */
.info-box {
background: rgba(201, 168, 76, .08);
border: 1px solid var(--gold-border);
border-left: 4px solid var(--gold);
border-radius: var(--radius-sm);
padding: 14px 18px;
margin: 16px 0;
font-size: 13px;
color: var(--ink-mid);
line-height: 1.6;
}
.warn-box {
background: rgba(124, 0, 0, .05);
border: 1px solid rgba(124, 0, 0, .2);
border-left: 4px solid var(--red);
border-radius: var(--radius-sm);
padding: 14px 18px;
margin: 16px 0;
font-size: 13px;
color: var(--ink-mid);
}
/* ── SSS Accordion ───────────────────────────────────────────────── */
.faq-item {
border: 1px solid var(--divider);
border-radius: var(--radius-sm);
margin-bottom: 8px;
overflow: hidden;
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
color: var(--ink);
background: var(--card);
user-select: none;
transition: background var(--transition-fast);
}
.faq-question:hover { background: #f8f5f0; }
.faq-item.open .faq-question {
background: var(--gold-pale);
color: var(--red);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
font-size: 14px;
color: var(--ink-mid);
line-height: 1.7;
}
.faq-item.open .faq-answer {
max-height: 500px;
padding: 14px 20px 20px;
}
/* ── Kart Grid ───────────────────────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin: 24px 0;
}
.feature-card {
background: var(--card);
border: 1px solid var(--divider);
border-radius: var(--radius-md);
padding: 24px;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.feature-card-icon {
font-size: 28px;
margin-bottom: 12px;
}
.feature-card h3 {
font-size: 15px;
font-weight: 700;
color: var(--ink);
margin-bottom: 8px;
}
.feature-card p {
font-size: 13px;
color: var(--ink-muted);
line-height: 1.6;
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
.page-wrap,
.page-wrap-wide { padding: 20px 16px 60px; }
.page-hero { margin-bottom: 28px; padding-bottom: 20px; }
.page-hero h1 { font-size: 26px; letter-spacing: 1px; }
.page-section { padding: 20px 16px; margin-bottom: 16px; }
.page-section h2 { font-size: 17px; }
.card-grid { grid-template-columns: 1fr; gap: 12px; }
.faq-question { padding: 14px 16px; font-size: 13px; }
.faq-item.open .faq-answer { padding: 12px 16px 16px; }
}