/* ============================================================
   alan.css — Calisma alani sayfalarina eklenen bolumler
   Mevcut altin paletiyle uyumlu: --gold #b89060 · --dark #1a1710
   Sayfalarin kendi <style> blogundaki degiskenleri kullanir.
   ============================================================ */

/* ---- Uzun icerik bolumu ---- */
.alan-icerik { background: #fff; }
.alan-icerik .icerik-govde { max-width: 860px; margin: 0 auto; }
.alan-icerik h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--dark, #1a1710);
    line-height: 1.35;
    margin: 46px 0 18px;
}
.alan-icerik h2:first-of-type { margin-top: 0; }
.alan-icerik h3 {
    font-family: 'Jost', sans-serif;
    font-size: 18px; font-weight: 600;
    color: var(--dark, #1a1710);
    margin: 30px 0 12px;
}
.alan-icerik p {
    font-size: 15.5px; line-height: 1.85;
    color: var(--text, #4a4535);
    margin-bottom: 18px;
}
.alan-icerik ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.alan-icerik ul li {
    position: relative; padding-left: 26px; margin-bottom: 11px;
    font-size: 15.5px; line-height: 1.8; color: var(--text, #4a4535);
}
.alan-icerik ul li::before {
    content: ''; position: absolute; left: 4px; top: 11px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold, #b89060);
}
.alan-icerik strong { color: var(--dark, #1a1710); font-weight: 600; }
.alan-icerik a { color: var(--gold, #b89060); text-decoration: none; border-bottom: 1px solid rgba(184,144,96,.35); transition: border-color .25s ease; }
.alan-icerik a:hover { border-bottom-color: var(--gold, #b89060); }

/* Vurgu kutusu */
.alan-not {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--cream, #f5f0e8);
    border-left: 3px solid var(--gold, #b89060);
    border-radius: var(--radius-small, 6px);
    padding: 22px 26px; margin: 30px 0;
}
.alan-not i { color: var(--gold, #b89060); font-size: 16px; line-height: 1.7; flex: 0 0 auto; }
.alan-not p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-light, #7a7060); }

/* ---- Ilgili makaleler ---- */
.alan-makaleler { background: var(--cream, #f5f0e8); }
.makale-kartlari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.makale-kart {
    display: block; background: #fff; text-decoration: none;
    border: 1px solid var(--light-brown, #f0ebe0);
    border-radius: var(--radius-main, 12px); overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.makale-kart:hover {
    border-color: var(--gold-pale, #e8d5b5);
    box-shadow: 0 6px 24px rgba(184,144,96,.12);
    transform: translateY(-4px);
}
.makale-kart:focus-visible { outline: 2px solid var(--gold, #b89060); outline-offset: 3px; }
.makale-kart img { width: 100%; height: 170px; object-fit: cover; display: block; }
.makale-kart .kart-govde { padding: 20px 22px 24px; }
.makale-kart .kart-etiket {
    display: inline-block; font-size: 11px; font-weight: 500;
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--gold, #b89060); margin-bottom: 10px;
}
.makale-kart h3 {
    font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500;
    line-height: 1.5; color: var(--dark, #1a1710); margin: 0 0 10px;
    transition: color .25s ease;
}
.makale-kart:hover h3 { color: var(--gold, #b89060); }
.makale-kart .kart-devam {
    font-size: 13px; color: var(--text-light, #7a7060);
    display: inline-flex; align-items: center; gap: 6px;
}

/* ---- Baslik hiyerarsisi duzeltmesi ----
   Kart basliklari h4 idi; H2'den sonra H4 gelmesi hiyerarsi atlamasi
   yaratiyordu. Etiketler h3'e cekildi, gorunum birebir korunuyor. */
.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 600;
    color: var(--dark, #1a1710);
    margin-bottom: 12px; transition: color .3s;
}
.process-step h3 {
    font-family: 'Playfair Display', serif;
    font-size: 16px; color: #fff; margin-bottom: 12px;
}

/* ---- SSS erisilebilirligi ---- */
.faq-question:focus-visible { outline: 2px solid var(--gold, #b89060); outline-offset: -2px; }

/* ---- Duyarli ---- */
@media (max-width: 991px) {
    .makale-kartlari { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .makale-kartlari { grid-template-columns: 1fr; }
    .alan-icerik .icerik-govde { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .makale-kart { transition: none; }
    .makale-kart:hover { transform: none; }
}