/*
 * Referanslar bölümü paylaşılan tema — references.php ve anasayfadaki
 * kategori kartları bölümü tarafından ortak kullanılır.
 * referanslar.imzza.com.tr (React) ile birebir aynı görsel dil.
 *
 * Kapsam: sadece .rf sınıfı içinde geçerli, sitenin global :root
 * (mor/Manrope) kimliğine dokunmaz.
 */
.rf {
    --rf-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --rf-font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --rf-paper: #fdfcfa;
    --rf-surface: #ffffff;
    --rf-surface-soft: #f7f5f1;
    --rf-ink: #1c1a17;
    --rf-ink-soft: #6f6a62;
    --rf-ink-faint: #a39d92;
    --rf-border: #eae6dd;
    --rf-border-soft: #f1eee7;
    --rf-accent: #b8863d;
    --rf-accent-dark: #93692c;
    --rf-accent-soft: #f6ead4;
    --rf-accent-soft-2: #fbf4e7;
    --rf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    font-family: var(--rf-font-sans);
    color: var(--rf-ink);
}
.rf h1, .rf h2, .rf h3 { font-family: var(--rf-font-display); letter-spacing: -0.01em; }
.rf a { text-decoration: none; color: inherit; }

/* references.php ana <main> beyaz zemine oturur; anasayfa bölümünde
   .rf-section kendi zeminini taşır, gövdeyi değiştirmez. */
main.rf { background: var(--rf-paper); }

/* ===== HERO (references.php) ===== */
.rf-hero { position: relative; overflow: hidden; padding: 90px 0 20px; text-align: center; }
.rf-hero__orb {
    position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
    width: 620px; height: 620px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--rf-accent-soft) 0%, transparent 70%);
    opacity: .8;
}
.rf-kicker {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 999px; border: 1px solid var(--rf-border);
    background: var(--rf-surface); box-shadow: 0 1px 2px rgba(28,26,23,.04), 0 8px 24px -8px rgba(28,26,23,.08);
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--rf-accent-dark);
}
.rf-hero__title {
    position: relative; margin: 22px 0 16px; font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--rf-ink);
}
.rf-hero__lead {
    position: relative; max-width: 46ch; margin: 0 auto; font-size: 1.05rem;
    line-height: 1.6; color: var(--rf-ink-soft);
}

/* ===== KATEGORİ HIZLI GEÇİŞ BUTONLARI (references.php hero altı) ===== */
.rf-catnav {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; margin-top: 34px;
}
.rf-catnav__pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    background: var(--rf-surface); border: 1px solid var(--rf-border); color: var(--rf-ink);
    font-size: .85rem; font-weight: 600; transition: all .25s var(--rf-ease);
}
.rf-catnav__pill:hover { border-color: var(--rf-accent); background: var(--rf-accent-soft); color: var(--rf-accent-dark); }
.rf-catnav__count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--rf-surface-soft); color: var(--rf-ink-faint);
    font-size: .72rem; font-weight: 700; transition: all .25s var(--rf-ease);
}
.rf-catnav__pill:hover .rf-catnav__count { background: var(--rf-accent); color: #fff; }

/* ===== GRUP BAŞLIĞI (references.php) ===== */
.rf-section { padding: 56px 0 100px; }
.rf-group { margin-bottom: 64px; scroll-margin-top: 100px; }
.rf-group:last-child { margin-bottom: 0; }
.rf-group__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.rf-group__title { font-weight: 700; font-size: 1.6rem; color: var(--rf-ink); }
.rf-group__count { font-size: .8rem; font-weight: 600; color: var(--rf-ink-faint); }
.rf-group__empty {
    padding: 30px; border: 1px dashed var(--rf-border); border-radius: 16px;
    color: var(--rf-ink-faint); font-size: .9rem; text-align: center;
}

/* ===== FİRMA KARTI IZGARASI (references.php) ===== */
.rf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rf-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--rf-surface); border: 1px solid var(--rf-border); border-radius: 18px;
    box-shadow: 0 1px 3px rgba(28,26,23,.05), 0 16px 32px -16px rgba(28,26,23,.12);
    transition: transform .3s var(--rf-ease), box-shadow .3s var(--rf-ease), border-color .3s var(--rf-ease);
}
a.rf-card:hover { transform: translateY(-5px); border-color: rgba(184, 134, 61, .4); box-shadow: 0 4px 10px rgba(28,26,23,.06), 0 24px 48px -20px rgba(184,134,61,.35); }
.rf-card__logo { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 30px; }
/* Firmanın logosu koyu/şeffaf zeminde tasarlanmışsa (beyaz logo vb.) koyu kutu,
   aksi halde açık kutu kullanılır — logonun görünür kalması için (logo_bg alanı). */
.rf-card__logo--light { background: var(--rf-surface-soft); }
.rf-card__logo--dark  { background: #1a1a2e; }
.rf-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s var(--rf-ease); }
.rf-card:hover .rf-card__logo img { transform: scale(1.05); }
/* Sitesinin ekran görüntüsü olan kartlar: logo kutusu yerine görsel kutuyu doldurur.
   Mockup görselleri 4:3 üretildiği için kutuyla birebir oturur, kırpma olmaz. */
.rf-card__logo--shot { padding: 0; background: var(--rf-surface-soft); }
.rf-card__logo--shot img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.rf-card__avatar {
    width: 74px; height: 74px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-family: var(--rf-font-display); font-weight: 700; font-size: 1.3rem;
    transition: transform .3s var(--rf-ease);
}
.rf-card:hover .rf-card__avatar { transform: scale(1.05); }
.rf-card__overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(28,26,23,0); opacity: 0; transition: opacity .3s var(--rf-ease), background .3s var(--rf-ease);
}
.rf-card:hover .rf-card__overlay { opacity: 1; background: rgba(28,26,23,.05); }
.rf-card__pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
    background: #fff; color: var(--rf-ink); font-size: .78rem; font-weight: 600;
    box-shadow: 0 4px 10px rgba(28,26,23,.06), 0 24px 48px -20px rgba(184,134,61,.35);
    opacity: 0; transition: opacity .3s var(--rf-ease);
}
.rf-card:hover .rf-card__pill { opacity: 1; }
.rf-card__pill svg { width: 13px; height: 13px; }
.rf-card__body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--rf-border-soft); }
.rf-card__title { font-weight: 700; font-size: .92rem; color: var(--rf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-card__desc { margin-top: 2px; font-size: .76rem; color: var(--rf-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-card__linktype { flex-shrink: 0; color: var(--rf-ink-faint); display: flex; }
.rf-card__linktype svg { width: 15px; height: 15px; }

.rf-empty { text-align: center; padding: 90px 20px; color: var(--rf-ink-soft); font-family: var(--rf-font-display); font-style: italic; font-size: 1.3rem; }

/* ===== KATEGORİ KARTLARI (anasayfa bölümü) ===== */
.rf-catsection { padding: 100px 0; background: var(--rf-paper); position: relative; overflow: hidden; }
.rf-catsection__orb {
    position: absolute; top: -180px; right: -120px; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, var(--rf-accent-soft) 0%, transparent 70%); pointer-events: none; opacity: .7;
}
.rf-catsection__head { position: relative; max-width: 640px; margin: 0 auto 48px; text-align: center; }
.rf-catsection__title { margin: 20px 0 14px; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
.rf-catsection__title em { font-style: normal; color: var(--rf-accent-dark); }
.rf-catsection__lead { font-size: 1rem; color: var(--rf-ink-soft); line-height: 1.6; }

.rf-catgrid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rf-catcard {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--rf-surface); border: 1px solid var(--rf-border); border-radius: 20px;
    box-shadow: 0 1px 3px rgba(28,26,23,.05), 0 16px 32px -16px rgba(28,26,23,.12);
    transition: transform .3s var(--rf-ease), box-shadow .3s var(--rf-ease), border-color .3s var(--rf-ease);
}
.rf-catcard:hover { transform: translateY(-6px); border-color: rgba(184,134,61,.4); box-shadow: 0 4px 10px rgba(28,26,23,.06), 0 24px 48px -20px rgba(184,134,61,.35); }

/* Kart görseli — varsayılan siyah-beyaz, hover'da yavaşça renge döner (Pexels telifsiz fotoğraflar). */
.rf-catcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rf-surface-soft); }
.rf-catcard__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.02);
    transition: filter .5s var(--rf-ease), transform .5s var(--rf-ease);
}
.rf-catcard:hover .rf-catcard__media img { filter: grayscale(0%); transform: scale(1.06); }
.rf-catcard__media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(28,26,23,.28), transparent 55%);
}
.rf-catcard__icon {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    color: var(--rf-ink-faint);
}
.rf-catcard__icon svg { width: 30px; height: 30px; }
.rf-catcard__badge {
    position: absolute; left: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--rf-accent-dark);
    box-shadow: 0 4px 10px rgba(0,0,0,.12); backdrop-filter: blur(2px);
}
.rf-catcard__badge svg { width: 17px; height: 17px; }

.rf-catcard__body { position: relative; padding: 20px 22px 22px; }
.rf-catcard__title { font-weight: 700; font-size: 1.05rem; }
.rf-catcard__foot { position: relative; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.rf-catcard__count { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rf-ink-faint); }
.rf-catcard__arrow {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px;
    border: 1px solid var(--rf-border); color: var(--rf-ink-soft);
    transition: all .3s var(--rf-ease);
}
.rf-catcard__arrow svg { width: 15px; height: 15px; }
.rf-catcard:hover .rf-catcard__arrow { border-color: var(--rf-accent); background: var(--rf-accent); color: #fff; }
.rf-catsection__cta { position: relative; text-align: center; margin-top: 40px; }
.rf-catsection__cta a {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 999px;
    background: var(--rf-ink); color: #fff; font-size: .9rem; font-weight: 600; transition: background .3s var(--rf-ease);
}
.rf-catsection__cta a:hover { background: var(--rf-accent-dark); }

@media (max-width: 980px) { .rf-grid, .rf-catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
    .rf-grid, .rf-catgrid { grid-template-columns: 1fr; }
    .rf-hero { padding: 60px 0 10px; }
    .rf-catsection { padding: 70px 0; }
}