:root{
      --bg:#070b0d;
      --panel:#0b1114;
      --panel-2:#0e1519;
      --line:#10231a;
      --fg:#f4fff6;
      --muted:#9fe0b3;
      --accent:#52ff75;   /* neon green */
      --accent-2:#baff3b; /* lime */
      --accent-3:#00ffd0; /* mint cyan */
      --glow:#5cff7a;
      --danger:#ff2e63;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      background: transparent;           /* önceki body background'unu kaldır */
  position: relative;
      color: var(--fg);
      line-height:1.6;
      letter-spacing:.2px;
    }
	body::before{
  content:"";
  position: fixed;
  inset: 0;                           /* tam ekran */
  z-index: -1;
  pointer-events: none;
  background:
    /* soldaki geniş eliptik parlama */
    radial-gradient(ellipse farthest-side at 20% -10%,
      #0f2b21 0 35%, transparent 70%),
    /* sağ üst parlama */
    radial-gradient(ellipse farthest-side at 100% 10%,
      #0b1c16 0 40%, transparent 70%),
    /* ana düşey degrade */
    linear-gradient(180deg, #050708 0%, #090e10 100%);
  background-repeat: no-repeat;
}
	
    .container{max-width:1100px;margin-inline:auto;padding:24px}

    /* ===== Hero / Header ===== */
    .header{
      position:relative; padding:48px 20px 24px; border-radius:20px;
      background:linear-gradient(180deg,rgba(12,24,18,.65),rgba(8,13,11,.6));
      outline:1px solid rgba(146,255,185,.08);
      box-shadow:0 0 0 1px rgba(146,255,185,.05) inset, 0 0 35px rgba(82,255,117,.08);
      overflow:hidden
    }
    .header:before{
      content:""; position:absolute; inset:-2px; 
      background: conic-gradient(from 0deg at 50% 50%, rgba(82,255,117,.12), transparent 30%, rgba(186,255,59,.12) 45%, transparent 70%, rgba(0,255,208,.12) 85%, transparent 100%);
      filter: blur(18px); z-index:0; opacity:.9; pointer-events:none;
      -webkit-mask: radial-gradient(circle at 50% 50%, black 35%, transparent 60%);
              mask: radial-gradient(circle at 50% 50%, black 35%, transparent 60%);
    }
    .brand{display:flex;align-items:center;gap:14px;margin-bottom:8px;position:relative;z-index:1}
    .brand .logo{width:50px;height:50px;border-radius:36px;background: radial-gradient(100% 100% at 30% 20%, var(--accent-2), var(--accent)); box-shadow: 0 0 22px var(--accent); position:relative; overflow:hidden}
    .brand .logo:after{content:""; position:absolute; inset:1px; border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25))}
    .brand h1{font-family:"Orbitron", ui-rounded, system-ui, sans-serif; font-weight:800; letter-spacing:.5px; margin:0; font-size: clamp(28px, 6vw, 44px); background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 40%, var(--accent-3) 80%); -webkit-background-clip:text; background-clip:text; color: transparent; text-shadow: 0 0 12px rgba(82,255,117,.35)}
    .header p{margin:6px 0 0; color: #b0eac3; max-width: 70ch}

    .controls{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; position:relative; z-index:1}
    .control{
      background: linear-gradient(180deg, rgba(10,18,14,.8), rgba(6,10,8,.9));
      border:1px solid rgba(146,255,185,.18);
      box-shadow: 0 0 0 1px rgba(146,255,185,.05) inset, 0 10px 40px rgba(0,0,0,.25);
      color: var(--fg);
      border-radius:14px;
      padding:10px 14px;
      display:flex; align-items:center; gap:10px; min-height:44px
    }
    input[type="search"]{border:none; outline: none; background: transparent; color: var(--fg); width: 220px; font-size: 15px}
    .sort{cursor:pointer; user-select:none}
    .sort svg{width:18px;height:18px;opacity:.85}
    .badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(146,255,185,.25); background: linear-gradient(180deg, rgba(14,24,18,.9), rgba(10,16,13,.95)); color: #c8ffd8; text-transform: uppercase; letter-spacing:.8px; display:inline-flex; gap:8px; align-items:center}

    /* ===== Grid ===== */
    .grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; margin-top:26px}

    .brand-card{
      position:relative; overflow:hidden; border-radius:18px;
      background: linear-gradient(180deg, rgba(10,16,13,.9), rgba(6,10,8,.95) 60%, rgba(6,10,8,.98));
      border:1px solid rgba(146,255,185,.14);
      box-shadow: 0 0 0 1px rgba(146,255,185,.06) inset, 0 0 28px rgba(82,255,117,.1);
      transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s, border-color .35s;
    }
    .brand-card:before{
      content:""; position:absolute; inset:-2px; border-radius:20px;
      background: conic-gradient(from 0deg at 50% 50%, rgba(82,255,117,.18), transparent 20%, rgba(0,255,208,.16) 45%, transparent 60%, rgba(186,255,59,.16) 75%, transparent 90%, rgba(82,255,117,.18) 100%);
      filter: blur(18px); opacity:.6; transition: opacity .35s
    }
    .brand-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(82,255,117,.15); border-color: rgba(146,255,185,.28)}
    .brand-card:hover:before{ opacity:.95}

    .card-inner{position:relative; z-index:1; padding:18px}
    .tag-row{display:flex; justify-content:space-between; align-items:center}
    .tag-row .hot{background: radial-gradient(100% 100% at 30% 0%, #fffb91, #f3ff38); color:#0b0d00; box-shadow:0 0 12px rgba(255,255,120,.5)}
    .tag-row .rank{font-size:12px; opacity:.9}

    .brand-title{display:flex; align-items:center; gap:12px; margin:14px 0 8px}
    .brand-avatar{width:40px; height:40px; border-radius:12px; background: radial-gradient(100% 100% at 30% 30%, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(82,255,117,.5)}
    .brand-title h3{margin:0; font-family:"Orbitron", ui-rounded, system-ui, sans-serif; font-size:22px; letter-spacing:.5px}

    .bonus{margin:8px 0 14px; display:flex; align-items:baseline; gap:8px}
    .bonus strong{font-size:26px; line-height:1; letter-spacing:.2px}
    .bonus span{font-size:13px; color:#b4f4c4}

    .meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
    .meta .chip{font-size:12px; border:1px solid rgba(146,255,185,.25); padding:6px 10px; border-radius:999px; color:#c8ffd8; background: linear-gradient(180deg, rgba(12,22,18,.95), rgba(8,14,11,.98))}

    .cta-row{display:flex; gap:10px; margin-top:6px}
    a.btn{
      flex:1; text-align:center; text-decoration:none; color: #001a09; font-weight: 700; padding:12px 14px; border-radius:12px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 48%, var(--accent-3) 100%);
      box-shadow: 0 8px 28px rgba(82,255,117,.35), inset 0 0 0 1px rgba(255,255,255,.25);
      position:relative; overflow:hidden
    }
    a.btn:after{content:""; position:absolute; top:-50%; left:-20%; width:50%; height:200%; transform: rotate(25deg); background: linear-gradient( to right, rgba(255,255,255,.0), rgba(255,255,255,.3), rgba(255,255,255,.0)); filter: blur(8px); transition: left .6s}
    a.btn:hover:after{left:110%}
    a.ghost{flex:0 0 auto; border:1px solid rgba(146,255,185,.35); color:#bff8d0; background: linear-gradient(180deg, rgba(12,22,18,.95), rgba(8,14,11,.98)); text-decoration:none; padding:12px 14px; border-radius:12px; font-weight:700}

    .footer{margin:38px auto 14px; text-align:center; color:#8bd4a4; font-size:13px}
    .search-empty{display:none; text-align:center; color:#81e5a7; padding:30px 0}

    @media (max-width:520px){ .controls{flex-direction:column}}

    /* tiny sparkles background */
    .spark{ position:fixed; pointer-events:none; inset:0; background-image: radial-gradient(2px 2px at 10% 20%, rgba(131,255,187,.45) 40%, transparent),
      radial-gradient(1.5px 1.5px at 50% 40%, rgba(186,255,59,.45) 40%, transparent),
      radial-gradient(1.5px 1.5px at 80% 70%, rgba(0,255,208,.4) 40%, transparent);
      opacity:.25; z-index:0}

/* BONUS EVRENI — Logo (PNG) */
img.logo{
  display:block;
  width: clamp(160px, 22vw, 320px); /* responsive */
  height:auto;
  object-fit:contain;
  /* Neon yeşil ışıltı (#52ff75) — mevcut değişken yoksa fallback */
  --glow: var(--accent, #52ff75);
  filter:
    drop-shadow(0 0 2px rgba(82,255,117,.75))
    drop-shadow(0 0 14px rgba(82,255,117,.45))
    drop-shadow(0 0 36px rgba(82,255,117,.25));
  transition: transform .35s cubic-bezier(.2,.6,.2,1), filter .35s ease;
  will-change: transform, filter;
  image-rendering: -webkit-optimize-contrast;
}

img.logo:hover{
  transform: translateY(-1px) scale(1.02);
  filter:
    drop-shadow(0 0 3px rgba(82,255,117,.9))
    drop-shadow(0 0 20px rgba(82,255,117,.55))
    drop-shadow(0 0 44px rgba(82,255,117,.35));
}

/* Karanlık zeminlerde parlaklığı biraz artır */
@media (prefers-color-scheme: dark){
  img.logo{ filter:
    drop-shadow(0 0 3px rgba(82,255,117,.85))
    drop-shadow(0 0 18px rgba(82,255,117,.5))
    drop-shadow(0 0 40px rgba(82,255,117,.3));
  }
}

/* Animasyon istemeyen kullanıcılar için */
@media (prefers-reduced-motion: reduce){
  img.logo{ transition: none }
}
/* Brand card içi: kare logo üstte */
.brand-card .brand-logo{
 
  aspect-ratio: 1 / 1;               /* daima kare */
  margin: 10px auto 6px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(100% 100% at 30% 30%, var(--accent, #52ff75), #2a3b31);
  border: 1px solid rgba(146,255,185,.25);
  box-shadow:
    0 0 6px rgba(82,255,117,.45),
    0 0 22px rgba(82,255,117,.25);
}

.brand-card .brand-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;                   /* kareye sığdır, oranı bozma */
  image-rendering:-webkit-optimize-contrast;
  transition: transform .25s ease, filter .25s ease;
}

.brand-card:hover .brand-logo img{
  transform: scale(1.02);
  filter: drop-shadow(0 0 10px rgba(82,255,117,.35));
}

/* Başlık hizası (artık avatar yok) */
.brand-card .brand-title{
  justify-content:center;
}
.brand-card .brand-title .brand-avatar{ display:none; } /* eskisini gizle */