/* ── PAGE HERO ─────────────────────────
   Resme birebir: kompakt, mor radial bg,
   küçük kare 3D kart stack tam ortada
──────────────────────────────────────*/
.ref-hero{
  position:relative;
  padding:52px 0 50px;
  overflow:hidden;
  text-align:center;
}
.ref-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 130% at 50% -5%,rgba(65,45,175,.60) 0%,transparent 58%),
    radial-gradient(ellipse 40% 55%  at 18% 88%,rgba(28,16,85,.38) 0%,transparent 55%),
    radial-gradient(ellipse 38% 50%  at 86% 82%,rgba(38,20,105,.32) 0%,transparent 52%);
}
.ref-hero-bg::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:110px;
  background:linear-gradient(to bottom,transparent,rgba(8,10,18,1));
}

/* 3D Kart stack — tam ortada, kare, istiflenmiş
   Resimde: 3 kart üst üste, hafif sağa döndürülmüş blok görünümü */
.ref-hero-deco{
  position:relative;
  width:148px;height:148px;
  margin:0 auto 32px;
  z-index:2;
}
.rh-card{
  position:absolute;
  top:50%;left:50%;
  width:128px;height:128px;
  border-radius:22px;
  border:1px solid rgba(120,115,240,.28);
}
/* Arka kart */
.rh-card-1{
  transform:translate(-50%,-50%) rotate(-10deg) translateY(6px);
  background:linear-gradient(150deg,rgba(38,28,100,.72),rgba(18,12,55,.88));
  box-shadow:0 24px 55px rgba(0,0,0,.65);
  z-index:1;
}
/* Orta kart */
.rh-card-2{
  transform:translate(-50%,-50%) rotate(-3deg) translateY(3px);
  background:linear-gradient(150deg,rgba(52,40,135,.80),rgba(26,18,70,.92));
  box-shadow:0 18px 45px rgba(0,0,0,.58);
  border-color:rgba(125,120,245,.30);
  z-index:2;
}
/* Ön kart — en parlak, hafif sağa */
.rh-card-3{
  transform:translate(-50%,-50%) rotate(5deg);
  background:linear-gradient(150deg,rgba(70,55,175,.88),rgba(38,28,100,.96));
  box-shadow:0 14px 38px rgba(0,0,0,.52);
  border-color:rgba(145,140,255,.42);
  z-index:3;
}
/* Ön kart üst parlak şerit */
.rh-card-3::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.40),transparent);
  border-radius:1px;
}
/* Ön kart sol-üst parlak köşe reflection */
.rh-card-3::after{
  content:'';position:absolute;
  top:0;left:0;width:50%;height:50%;
  border-radius:22px 0 0 0;
  background:radial-gradient(ellipse at 20% 20%,rgba(255,255,255,.08),transparent 65%);
}

.ref-hero-content{ position:relative;z-index:2 }

/* ── KART İÇİ BROWSER MOCKUP ──────────
   Gerçek bir web sitesi önizlemesi hissi
──────────────────────────────────────*/
.rh-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* Tarayıcı başlık çubuğu */
.rhc-bar{
  flex-shrink:0;
  height:20px;
  background:rgba(0,0,0,.30);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;
  padding:0 10px;gap:5px;
}
.rhc-dot{
  width:6px;height:6px;border-radius:50%;
  display:inline-block;opacity:.80;
}
/* Sayfa içeriği alanı */
.rhc-body{
  flex:1;padding:8px 10px 10px;
  display:flex;flex-direction:column;gap:6px;
  overflow:hidden;
}
/* Görsel placeholder */
.rhc-img{
  border-radius:8px;
  height:48px;flex-shrink:0;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;padding:0 10px;
}
.rhc-img-lines{
  width:100%;display:flex;flex-direction:column;gap:4px;
}
.rhc-il{
  height:5px;border-radius:3px;
  background:rgba(255,255,255,.55);
}
/* Hero metin alanı */
.rhc-hero-text{
  display:flex;flex-direction:column;gap:4px;width:100%;
}
/* Metin çizgileri */
.rhc-line{
  height:4px;border-radius:2px;
  background:rgba(255,255,255,.18);
  flex-shrink:0;
}
/* Nav bar (sadece ön kartta) */
.rhc-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 4px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px;flex-shrink:0;
}
.rhc-nav-logo{
  width:28px;height:5px;border-radius:2px;
  background:rgba(255,255,255,.45);
}
.rhc-nav-links{
  display:flex;gap:5px;
}
.rhc-nav-links span{
  width:16px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.20);display:block;
}
/* Mini kart satırı (ön kartta alt) */
.rhc-cards-row{
  display:flex;gap:5px;margin-top:auto;
}
.rhc-mini-card{
  flex:1;height:20px;border-radius:5px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}


.ref-hero-title{
  font-size:clamp(1.85rem,3.5vw,2.75rem);
  font-weight:900;letter-spacing:-.5px;
  margin-bottom:14px;line-height:1.1;
}
.ref-hero-desc{
  font-size:clamp(13px,1.35vw,15px);
  color:rgba(255,255,255,.46);
  line-height:1.76;
  max-width:540px;
  margin:0 auto;
}

/* ── REFERANSLAR ANA BÖLÜM ─────────── */
.ref-section{
  padding:60px 0 100px;
  position:relative;
}

/* ── FİLTRE PANELİ (sol, desktop) ──── */
.ref-filter-panel{
  background:rgba(14,16,32,.85);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:22px 14px;
  position:sticky;top:88px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.ref-filter-title{
  font-size:13px;font-weight:700;
  color:rgba(255,255,255,.55);
  letter-spacing:.5px;
  padding:0 8px;margin-bottom:14px;
}
.ref-filter-btn{
  display:block;width:100%;
  text-align:left;
  background:transparent;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.42);
  cursor:pointer;
  transition:all .2s;
  margin-bottom:3px;
}
.ref-filter-btn:hover{
  background:rgba(109,111,245,.08);
  color:rgba(255,255,255,.80);
}
.ref-filter-btn.active{
  background:rgba(109,111,245,.18);
  color:#fff;font-weight:600;
  border:1px solid rgba(109,111,245,.30);
}

/* ── MOBİL FİLTRE ─────────────────── */
.ref-filter-mobile{
  margin-bottom:24px;
  overflow-x:auto;
  padding-bottom:4px;
}
.ref-filter-mobile::-webkit-scrollbar{display:none}
.ref-filter-scroll{
  display:flex;gap:8px;
  padding:2px 4px;
  width:max-content;
}
.ref-filter-pill{
  flex-shrink:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:50px;
  padding:7px 16px;
  font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.50);
  cursor:pointer;transition:all .2s;
  white-space:nowrap;
}
.ref-filter-pill:hover{
  background:rgba(109,111,245,.12);
  border-color:rgba(109,111,245,.28);
  color:rgba(255,255,255,.80);
}
.ref-filter-pill.active{
  background:rgba(109,111,245,.22);
  border-color:rgba(109,111,245,.45);
  color:#fff;font-weight:600;
}

/* ── PROJE GRID ────────────────────── */
.ref-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding-left:28px;
}
@media(max-width:991px){
  .ref-grid{padding-left:0}
}
@media(max-width:575px){
  .ref-grid{grid-template-columns:1fr;gap:16px}
}

/* ── PROJE KARTI ───────────────────── */
.ref-card{
  position:relative;
  border-radius:18px;overflow:hidden;
  background:#0e1020;
  border:1px solid rgba(255,255,255,.07);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s,border-color .35s,opacity .35s;
}
.ref-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 60px rgba(0,0,0,.60);
  border-color:rgba(109,111,245,.28);
}
/* Filtre animasyonu için */
.ref-card.hidden{
  opacity:0;
  pointer-events:none;
  transform:scale(.96) translateY(8px);
}

.ref-thumb{
  position:relative;height:220px;overflow:hidden;
}
.ref-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  display:block;
}
.ref-card:hover .ref-thumb img{transform:scale(1.06)}

.ref-thumb-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,12,22,.05) 0%,
    rgba(10,12,22,.42) 65%,
    rgba(10,12,22,.78) 100%
  );
}
.ref-card-logo{
  position:absolute;
  bottom:16px;left:50%;transform:translateX(-50%);
  z-index:2;
  font-size:18px;font-weight:900;
  color:rgba(255,255,255,.90);
  letter-spacing:3px;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
  white-space:nowrap;pointer-events:none;
}
.ref-ext-btn{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:rgba(255,255,255,.88);
  text-decoration:none;transition:all .22s;z-index:3;
}
.ref-card:hover .ref-ext-btn{
  background:#6d6ff5;border-color:#6d6ff5;
  color:#fff;transform:scale(1.08);
}

.ref-card-info{
  padding:20px 18px 40px;
  text-align:center;
}
.ref-card-info h4{
  font-size:15.5px;font-weight:700;
  margin-bottom:4px;letter-spacing:-.15px;
  color:#fff;
}
.ref-card-info span{
  font-size:12px;color:rgba(255,255,255,.75);
  font-weight:400;
}