/* ================================================================
   ALISOFT — referanslar.css  (Referanslarımız)
   Kayan bant stilleri: referans-bandi.css
   ================================================================ */

.rf {
    --rf-ink: var(--a-ink);
    --rf-text: var(--a-text);
    --rf-muted: var(--a-muted);
    --rf-line: var(--a-line);
    --rf-bg: var(--a-soft);
    --rf-accent: var(--a-accent);
    --rf-black: var(--a-black);

    background: #fff;
    color: var(--rf-ink);
    padding-bottom: 96px;
}

.rf-wrap {
    max-width: var(--a-wrap);
    margin: 0 auto;
    padding: 0 var(--a-gutter);
}

/* ── Başlık (bantla birleşen siyah alan) ────────────────── */
.rf-head {
    --rf-nav-h: 76px;
    /* şeffaf menü ve üst şeridin arkasına uzanır */
    margin-top: calc((var(--rf-nav-h) + 38px) * -1);
    padding: calc(var(--rf-nav-h) + 38px + 48px) 0 8px;
    color: #fff;
    text-align: center;
    background: var(--rf-black);
}

.rf-crumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .55);
}

.rf-crumb a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.rf-crumb a:hover { color: #fff; }
.rf-crumb [aria-current] { color: #fff; font-weight: 600; }

.rf-title {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .85);
}

.rf-lead {
    margin: 6px 0 0;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .55);
}

/* bandın üst boşluğu başlıkla birleşsin */
.rf .rb { padding-top: 48px; }

/* ── Bölümler ───────────────────────────────────────────── */
.rf-section { margin-top: 88px; }

.rf-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

.rf-section-head h2 {
    margin: 0;
    font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
    letter-spacing: -.03em;
}

.rf-section-head p { margin: 0; font-size: .9375rem; color: var(--rf-muted); }

/* ── Referans kartları ──────────────────────────────────── */
.rf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.rf-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rf-line);
    border-radius: 22px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.rf-card:hover {
    border-color: transparent;
    box-shadow: 0 28px 56px -32px rgba(16, 24, 40, .45), 0 0 0 1px var(--rf-line);
    transform: translateY(-4px);
}

.rf-logo {
    display: grid;
    place-items: center;
    height: 160px;
    padding: 28px;
    background:
        radial-gradient(260px 120px at 50% 0%, rgba(66, 99, 235, .1), transparent 70%),
        var(--rf-bg);
    border-bottom: 1px solid var(--rf-line);
}

.rf-logo img {
    max-width: 75%;
    max-height: 72px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .85;
    transition: filter .25s, opacity .25s;
}

.rf-card:hover .rf-logo img { filter: none; opacity: 1; }

.rf-logo span {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--rf-ink);
}

.rf-info { padding: 22px 24px 4px; }
.rf-info h3 { margin: 0 0 4px; font-size: 1.125rem; }
.rf-sector { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-accent); }
.rf-service { margin: 10px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--rf-text); }

.rf-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: auto 24px 0;
    padding: 16px 0 20px;
    border-top: 1px solid var(--rf-line);
}

.rf-links a { font-size: .875rem; font-weight: 700; color: var(--rf-ink); text-decoration: none; }
.rf-links a:hover { color: var(--rf-accent); }

.rf-card > :last-child:not(.rf-links) { padding-bottom: 24px; }

/* yerel önizleme kartı */
.rf-card--bos .rf-logo { border-bottom-style: dashed; }
.rf-card--bos .rf-logo span { font-size: 1rem; font-weight: 600; color: #98A2B3; }
.rf-card--bos h3 { color: #98A2B3; }

.rf-empty {
    margin-top: 72px;
    padding: 56px 32px;
    text-align: center;
    background: var(--rf-bg);
    border-radius: 24px;
}

.rf-empty h2 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.02em; }
.rf-empty p { margin: 0 0 24px; color: var(--rf-text); }

/* ── Yorumlar ───────────────────────────────────────────── */
.rf-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.rf-quote {
    margin: 0;
    padding: 32px;
    background: var(--rf-bg);
    border-radius: 22px;
}

.rf-quote-mark { width: 32px; height: 32px; fill: var(--rf-accent); }
.rf-quote blockquote { margin: 14px 0 24px; font-size: 1.125rem; line-height: 1.6; color: var(--rf-ink); }
.rf-quote figcaption strong { display: block; }
.rf-quote figcaption span { font-size: .875rem; color: var(--rf-muted); }

/* ── Düğmeler ───────────────────────────────────────────── */
.rf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: background .15s, color .15s;
}

.rf-btn--accent { color: #fff; background: var(--rf-accent); }
.rf-btn--accent:hover { color: var(--rf-ink); background: #fff; }
.rf-btn--line { color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.rf-btn--line:hover { background: rgba(255, 255, 255, .1); }
.rf-btn--dark { color: #fff; background: var(--rf-black); }
.rf-btn--dark:hover { background: var(--rf-accent); }
.rf-btn:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }

/* ── Çağrı ──────────────────────────────────────────────── */
.rf-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px;
    margin-top: 88px;
    padding: 48px 56px;
    color: #fff;
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(66, 99, 235, .4), transparent 70%),
        var(--rf-black);
    border-radius: 28px;
}

.rf-cta h2 { margin: 0 0 8px; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); letter-spacing: -.03em; }
.rf-cta p { margin: 0; font-size: 1.0625rem; color: rgba(255, 255, 255, .7); }
.rf-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Duyarlı ────────────────────────────────────────────── */
@media (max-width: 960px) {
    .rf-head { --rf-nav-h: 64px; }
}

@media (max-width: 1000px) {
    .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .rf-wrap { padding: 0 16px; }
    .rf-grid, .rf-quotes { grid-template-columns: 1fr; }
    .rf-section { margin-top: 64px; }
    .rf-cta { padding: 32px 22px; border-radius: 20px; }
    .rf-cta-actions, .rf-cta .rf-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rf * { transition: none !important; }
}

.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rf-head .rf-crumb { margin-bottom: 0; }

/* ── Referans kartları: oklarla yana kaydırma ───────────── */
.rf-section-head { align-items: flex-end; }

.rf-arrows { display: flex; gap: 10px; }

.rf-arrow {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background: var(--rf-black);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, opacity .2s, transform .2s;
}

.rf-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rf-arrow:hover:not(:disabled) { background: var(--rf-accent); transform: scale(1.06); }
.rf-arrow:disabled { opacity: .25; cursor: default; }
.rf-arrow:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }

.rf-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 40px) / 3);
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 4px 28px;
    margin: -4px -4px 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.rf-slider::-webkit-scrollbar { display: none; }
.rf-slider > .rf-card { scroll-snap-align: start; }
.rf-slider:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 4px; border-radius: 24px; }

@media (max-width: 1000px) {
    .rf-slider { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 680px) {
    .rf-slider { grid-auto-columns: 85%; }
    .rf-arrow { width: 44px; height: 44px; }
}