/* ═══════════════════════════════════════════
   REFERANSLAR – Portfolyo & Müşteri Yorumları
   YTASoft | Navy × Gold
═══════════════════════════════════════════ */

/* ── HERO ─────────────────────────────── */
.ref-hero{position:relative;padding:160px 0 100px;overflow:hidden;text-align:center}
.ref-hero-bg{position:absolute;inset:0;pointer-events:none}
.rh-orb{position:absolute;border-radius:50%;filter:blur(100px)}
.rh-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(201,168,76,0.1) 0%,transparent 70%);top:-200px;right:-100px;animation:orbFloat 12s ease-in-out infinite}
.rh-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(26,58,110,0.5) 0%,transparent 70%);bottom:-100px;left:-50px;animation:orbFloat 10s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}
.rh-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}

.ref-hero-content{position:relative;z-index:2}
.ref-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.82rem;color:var(--text-muted);margin-bottom:24px}
.ref-breadcrumb a{color:var(--gold)}.ref-breadcrumb i{font-size:0.6rem}

.rh-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(201,168,76,0.15),rgba(201,168,76,0.05));border:1px solid rgba(201,168,76,0.3);color:var(--gold);padding:8px 20px;border-radius:50px;font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:28px}

.rh-title{font-size:clamp(2.4rem,5vw,3.8rem);color:var(--white);line-height:1.1;margin-bottom:20px;font-weight:800}
.rh-title span{background:linear-gradient(120deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.rh-desc{color:var(--text-muted);font-size:1.08rem;line-height:1.8;max-width:600px;margin:0 auto 48px}

/* Counters */
.rh-counters{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.rh-counter{text-align:center;position:relative;padding:0 24px}
.rh-counter:not(:last-child)::after{content:'';position:absolute;top:10%;right:0;height:80%;width:1px;background:linear-gradient(180deg,transparent,rgba(201,168,76,0.25),transparent)}
.rh-count{display:block;font-family:'Outfit',sans-serif;font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px}
.rh-counter span{font-size:0.8rem;color:var(--text-muted);letter-spacing:0.02em}

/* ── SECTION SHARED ──────────────────── */
.section-label{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.section-title-lg{font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--white);margin-bottom:16px}.section-title-lg span{color:var(--gold)}
.section-sub{color:var(--text-muted);font-size:1rem;max-width:560px;line-height:1.8}

/* ── PORTFOLIO ───────────────────────── */
.ref-portfolio{padding:100px 0}

/* Filter */
.pf-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:48px 0 40px}
.pf-filter-btn{background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-muted);padding:8px 20px;border-radius:50px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.3s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.pf-filter-btn:hover{border-color:rgba(201,168,76,0.3);color:var(--white);background:rgba(201,168,76,0.06)}
.pf-filter-btn.active{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy);border-color:transparent;box-shadow:0 4px 20px rgba(201,168,76,0.3)}

/* Grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* Card */
.pf-card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:all 0.4s;animation:pfReveal 0.6s ease both;position:relative}
.pf-card:hover{transform:translateY(-10px);border-color:rgba(201,168,76,0.35);box-shadow:0 30px 80px rgba(0,0,0,0.4),0 0 50px rgba(201,168,76,0.06)}
@keyframes pfReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.pf-img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:rgba(201,168,76,0.03)}
.pf-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.pf-card:hover .pf-img-wrap img{transform:scale(1.06)}

.pf-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(15,28,52,0.8),rgba(10,22,40,0.9));color:rgba(201,168,76,0.2);font-size:3rem}

.pf-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,13,26,0.9));display:flex;align-items:flex-end;justify-content:center;padding:20px;opacity:0;transition:opacity 0.4s}
.pf-card:hover .pf-overlay{opacity:1}
.pf-link{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy);padding:10px 22px;border-radius:50px;font-size:0.82rem;font-weight:700;text-decoration:none;transition:all 0.3s;box-shadow:0 4px 16px rgba(201,168,76,0.4)}
.pf-link:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,0.5);color:var(--navy)}

.pf-featured-tag{position:absolute;top:14px;left:14px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy);padding:4px 12px;border-radius:20px;font-size:0.68rem;font-weight:800;display:flex;align-items:center;gap:4px;box-shadow:0 2px 12px rgba(201,168,76,0.4)}
.pf-featured-tag i{font-size:0.6rem}

.pf-info{padding:22px 24px 26px}
.pf-cat{display:inline-block;font-size:0.7rem;font-weight:700;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px}
.pf-title{font-size:1.1rem;color:var(--white);margin-bottom:6px;font-weight:700;font-family:'Outfit',sans-serif}
.pf-client{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--text-muted);margin-bottom:8px}
.pf-client i{color:var(--gold);font-size:0.7rem}
.pf-desc{font-size:0.82rem;color:var(--text-muted);line-height:1.65}

/* Empty state */
.pf-empty{text-align:center;padding:80px 0}
.pf-empty-visual{position:relative;width:100px;height:100px;margin:0 auto 28px;display:flex;align-items:center;justify-content:center}
.pf-empty-ring{position:absolute;inset:0;border:2px dashed rgba(201,168,76,0.2);border-radius:50%;animation:emptyRingSpin 20s linear infinite}
@keyframes emptyRingSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.pf-empty-visual i{font-size:2.2rem;color:rgba(201,168,76,0.3)}
.pf-empty h3{font-size:1.3rem;color:var(--white);margin-bottom:8px;font-family:'Outfit',sans-serif}
.pf-empty p{color:var(--text-muted);font-size:0.92rem;max-width:400px;margin:0 auto}

/* ── TESTIMONIALS ────────────────────── */
.ref-testimonials{padding:100px 0;background:rgba(10,22,40,0.3);position:relative;overflow:hidden}
.ref-testimonials::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2),transparent)}

.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}

.tm-card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:32px 28px;position:relative;overflow:hidden;transition:all 0.4s;animation:pfReveal 0.6s ease both;display:flex;flex-direction:column}
.tm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.3),transparent);opacity:0;transition:opacity 0.4s}
.tm-card:hover{transform:translateY(-6px);border-color:rgba(201,168,76,0.3);box-shadow:0 24px 60px rgba(0,0,0,0.3),0 0 40px rgba(201,168,76,0.05)}
.tm-card:hover::before{opacity:1}

.tm-quote-icon{color:rgba(201,168,76,0.15);font-size:1.8rem;margin-bottom:12px}

.tm-stars{display:flex;gap:3px;margin-bottom:16px}
.tm-stars i{color:#facc15;font-size:0.75rem}

.tm-content{color:var(--text);font-size:0.9rem;line-height:1.8;flex:1;margin-bottom:24px;font-style:italic;position:relative}

.tm-author{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--border)}
.tm-avatar{width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,var(--gold),var(--gold-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy);font-family:'Outfit',sans-serif;font-weight:800;font-size:1.1rem}
.tm-info strong{display:block;color:var(--white);font-size:0.88rem;margin-bottom:2px}
.tm-info span{font-size:0.76rem;color:var(--text-muted)}

/* ── TEAM ─────────────────────────────── */
.ref-team{padding:100px 0;position:relative}
.ref-team::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2),transparent)}

.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin-top:60px}

.team-card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:32px 24px;text-align:center;transition:all 0.4s}
.team-card:hover{transform:translateY(-8px);border-color:rgba(201,168,76,0.3);box-shadow:0 24px 60px rgba(0,0,0,0.3),0 0 40px rgba(201,168,76,0.05)}

.team-avatar{width:80px;height:80px;margin:0 auto 18px;border-radius:50%;overflow:hidden;border:3px solid rgba(201,168,76,0.3);transition:border-color 0.3s}
.team-card:hover .team-avatar{border-color:var(--gold)}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-avatar span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy);font-family:'Outfit',sans-serif;font-weight:800;font-size:1.6rem}

.team-name{font-size:1rem;color:var(--white);font-family:'Outfit',sans-serif;font-weight:700;margin-bottom:4px}
.team-role{font-size:0.78rem;color:var(--gold);font-weight:600;display:block;margin-bottom:10px}
.team-bio{font-size:0.8rem;color:var(--text-muted);line-height:1.6;margin-bottom:14px}
.team-socials{display:flex;justify-content:center;gap:8px}
.team-socials a{width:32px;height:32px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:0.78rem;transition:all 0.3s}
.team-socials a:hover{background:rgba(201,168,76,0.15);border-color:var(--gold);color:var(--gold)}

/* ── BRANDS ──────────────────────────── */
.ref-brands{padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center}
.brands-label{font-size:0.78rem;color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;margin-bottom:24px}
.brands-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.brand-tag{background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.12);color:var(--text-muted);padding:8px 20px;border-radius:50px;font-size:0.82rem;font-weight:500;transition:all 0.3s}
.brand-tag:hover{border-color:rgba(201,168,76,0.35);color:var(--gold);background:rgba(201,168,76,0.1);transform:translateY(-2px)}

/* ── CTA ─────────────────────────────── */
.ref-cta{padding:100px 0}
.ref-cta .cta-inner{background:linear-gradient(135deg,rgba(26,58,110,0.4),rgba(15,32,64,0.6));border:1px solid rgba(201,168,76,0.25);border-radius:28px;padding:80px 60px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(20px)}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(201,168,76,0.06) 0%,transparent 70%);pointer-events:none}
.ref-cta .cta-inner h2{font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--white);margin-bottom:16px;position:relative;z-index:1}
.ref-cta .cta-inner h2 span{color:var(--gold)}
.ref-cta .cta-inner p{color:var(--text-muted);margin-bottom:40px;max-width:520px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;z-index:1}

.btn-wa{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;padding:14px 28px;border-radius:50px;font-weight:700;font-size:0.95rem;transition:all 0.3s;box-shadow:0 8px 24px rgba(37,211,102,0.3);text-decoration:none}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(37,211,102,0.4);color:#fff}
.btn-outline-gold{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(201,168,76,0.5);color:var(--gold);padding:14px 28px;border-radius:50px;font-weight:600;font-size:0.95rem;transition:all 0.3s;text-decoration:none}
.btn-outline-gold:hover{background:rgba(201,168,76,0.1);border-color:var(--gold);transform:translateY(-3px)}

/* ── RESPONSIVE ──────────────────────── */
@media (max-width:1024px){
    .pf-grid{grid-template-columns:repeat(2,1fr)}
    .tm-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    .ref-hero{padding:140px 0 80px}
    .rh-title{font-size:2.2rem}
    .rh-counters{gap:24px}
    .rh-counter{padding:0 16px}
    .rh-counter:not(:last-child)::after{display:none}
    .rh-count{font-size:2rem}
    .pf-grid{grid-template-columns:1fr}
    .tm-grid{grid-template-columns:1fr}
    .ref-cta .cta-inner{padding:48px 28px}
    .cta-btns{flex-direction:column;align-items:center}
}
@media (max-width:480px){
    .rh-counters{flex-direction:column;gap:20px}
    .pf-filter{gap:8px}
    .pf-filter-btn{padding:6px 14px;font-size:0.78rem}
}