/* =========================
   SkorLab – Compact Luxury UI (v1)
   ========================= */

/* ---- Theme Tokens ---- */
:root{
  --bg1:#0b0720; --bg2:#1a0a3a; --bg3:#09051e;         /* mor degrade */
  --glass1:rgba(28,16,68,.65); --glass2:rgba(18,10,48,.72);
  --text:#f0eaff; --muted:#b9add6;
  --accent:#b06afc; --accent2:#43d1ff;                /* mor + camgöbeği */
  --border:rgba(160,140,255,.35);
  --shadow:0 10px 28px rgba(6,3,18,.45);
}

/* ---- Resets ---- */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(176,106,252,.18), transparent 55%),
    linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* ---- Layout ---- */
.container{width:min(1200px,92%); margin-inline:auto}
.shell{
  background:linear-gradient(180deg,var(--glass1),var(--glass2));
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:8px 0;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ---- Header (logo + telegram) ---- */
.header{
  margin:12px 0; padding:8px 12px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,var(--glass1),var(--glass2));
  border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}
.brand{display:flex; align-items:center; gap:5px; font-weight:700; letter-spacing:.3px}
.brand img{height:50px; width:auto}
.brand .name{
  font-size:1rem;     /* yazıyı da büyüttük */
  font-weight:900;    /* daha kalın */
  letter-spacing:.5px;/* harf arası biraz açılır */
}
.brand .dotlab{color:var(--accent)}

/* ---- Chip / CTA (Telegram) ---- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(30,18,76,.85), rgba(18,10,52,.92));
  border:1px solid rgba(140,120,255,.45);
  color:#e9e4ff; backdrop-filter: blur(6px);
  box-shadow:0 10px 28px rgba(67,209,255,.28), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .2s ease, filter .2s ease;
}
.chip:hover{transform:translateY(-1px); filter:brightness(1.06)}

/* ---- Hero ---- */
.hero h1{
  margin:0 0 4px;
  font-size:clamp(20px,4.2vw,30px);
  font-weight:900;
}
.hero h1 span{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{margin:0; color:var(--muted); font-size:.95rem}
.kicker{
  display:inline-block; padding:6px 10px; margin-bottom:8px;
  font-weight:800; font-size:.85rem; letter-spacing:.3px; text-transform:uppercase;
  color:#efe7ff;
  background:linear-gradient(180deg, rgba(40,24,100,.85), rgba(28,16,72,.92));
  border:1px solid var(--border); border-radius:10px;
  box-shadow:0 6px 18px rgba(8,4,24,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ---- Grid (compact) ---- */
.grid{display:grid; gap:16px}
@media (min-width:680px){ .grid{grid-template-columns:repeat(2,1fr)} }
/* 3 sütun istersen alttakini aç */
/* @media (min-width:1200px){ .grid{grid-template-columns:repeat(3,1fr)} } */

/* ---- Card (compact) ---- */
.card{
  position:relative; padding:12px; border-radius:14px;
  background:linear-gradient(180deg,var(--glass1),var(--glass2));
  border:1px solid var(--border);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}
.vip{
  position:absolute; top:8px; right:8px;
  background:linear-gradient(90deg,#ffd27a,#ffeeb0);
  color:#3a2a00; font-weight:900; font-size:.72rem;
  padding:4px 8px; border-radius:999px; box-shadow:0 6px 16px rgba(255,210,122,.35);
  z-index:2;
}

/* Banner: küçük vitrin (yükseklik sınırlı, kırpmalı) */
.banner-wrap{
  position: relative; overflow: hidden; border-radius:10px;
  margin-bottom:8px; background:#0b0b18;
  border:1px solid rgba(160,140,255,.25);
  /* mobil-first */
  aspect-ratio: 16/9;
  height: clamp(160px, 48vw, 240px);  /* mobil/tab için */
}
@media (min-width:680px){ .banner-wrap{ height:200px } }     /* tablet */
@media (min-width:1200px){ .banner-wrap{ height:220px } }    /* geniş */
.banner{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Başlık & logo */
.card-head{display:flex; align-items:center; gap:8px; margin:6px 0 4px}
.card-head img{height:48px; max-height:60px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.card-head h3{margin:0; font-size:.95rem; font-weight:800}

/* Bullet list */
.bullets{list-style:none; padding:0; margin:6px 0 10px}
.bullets li{margin:4px 0; font-size:.92rem; color:#e9e4ff}
.bullets li::before{content:"✦"; color:var(--accent); margin-right:6px}

/* Buttons */
.btn{
  display:block; width:100%; text-align:center;
  padding:10px; border-radius:10px; font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0a0f24; box-shadow:0 10px 24px rgba(67,209,255,.24);
  transition:filter .15s ease;
}
.btn.big{padding:12px; font-size:1.02rem}
.btn:hover{filter:brightness(1.07)}

/* ---- Telegram promo ---- */
.tg-card .btn.big{margin-top:8px}

/* ---- Sticky CTA (mobile-first) ---- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:10px; z-index:50;
  padding:0 10px; display:flex; justify-content:center;
}
.sticky-btn{
  display:block; width:100%; max-width:500px; text-align:center;
  padding:12px; border-radius:999px; font-weight:900;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0a0f24; box-shadow:0 12px 32px rgba(67,209,255,.30);
}

/* ---- Footer ---- */
.footer{margin:12px 0; text-align:center; color:var(--muted); font-size:.95rem}

/* ---- Forms & Tables (admin/auth) ---- */
.input,.check{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(30,18,76,.65), rgba(18,10,52,.7));
  color:#f0eaff;
}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border:1px solid var(--border); padding:8px; vertical-align:top}
.table th{background:rgba(32,20,84,.6)}
/* ===== Admin Panel Upgrade ===== */
.admin-wrap{margin-top:8px}
.admin-scroll{
  overflow:auto;       /* dar ekranda yatay kaydırma */
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* tablo düzeni */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;  /* colgroup genişlikleri uygulansın */
  min-width:1000px;    /* çok dar ekranlarda kaydırma */
}
.table th,.table td{
  border-bottom:1px solid var(--border);
  padding:10px;
  vertical-align:top;
}
.table th{
  position:sticky; top:0; z-index:1;
  background:rgba(32,20,84,.85);   /* sabit header */
  backdrop-filter:blur(6px);
  text-align:left; font-weight:800;
}
.table tr:nth-child(even) td{ background:rgba(255,255,255,.02) }

/* hücre içi elemanlar */
.input,.check{
  width:100%; padding:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(30,18,76,.65), rgba(18,10,52,.7));
  color:#f0eaff; font-size:14px;
}
.input::placeholder{color:#a79bc9}

/* küçük sütunlar */
.col-id    { width:90px }
.col-name  { width:180px }
.col-link  { width:280px }
.col-vip   { width:70px; text-align:center }
.col-b1,.col-b2,.col-b3 { width:180px }
.col-logo  { width:170px }
.col-banner{ width:190px }
.col-prev  { width:120px; text-align:center }

/* file input'lar daha belirgin olsun */
input[type="file"]{
  padding:8px; border-radius:10px; background:rgba(16,10,40,.6);
  border:1px dashed rgba(160,140,255,.5); color:#d9d2f5
}

/* küçük önizleme */
.preview-img{ height:36px; border-radius:6px; display:inline-block }
.preview-banner{ height:60px; border-radius:8px; display:block; margin-top:6px }

/* üst başlık + aksiyon çubuğu */
.admin-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin:8px 0 12px
}
/* Masaüstünde banner daha büyük ve dolu görünsün */
@media (min-width: 980px){
  .banner-wrap{
    height: 280px;          /* 260–320 arası deneyebilirsin */
    aspect-ratio: auto;     /* clamp sınırını kaldırıyoruz */
  }
}
@media (min-width: 1280px){
  .banner-wrap{ height: 320px; }
}
/* === Telegram: kompakt, gerçekçi alev efekti === */

 .chip.telegram{
  display: flex;               /* flexbox aç */
  align-items: center;         /* dikey ortala */
  justify-content: center;     /* yatay ortala */
  font-weight: 900;            /* kalın */
  font-size: 1.2rem;
  color: #b06afc;              /* mor */
  text-shadow: 
    0 0 4px rgba(176,106,252,0.8),
    0 0 8px rgba(255,80,0,0.7),
    0 0 12px rgba(255,0,0,0.6);
}
  border-radius: 999px;
  color: #b06afc; /* mor yazı */
  background: linear-gradient(180deg, rgba(30,18,76,.85), rgba(18,10,52,.92)) !important;
  border: 1px solid rgba(255,150,80,.35) !important;
  box-shadow: 0 0 14px rgba(255,90,0,.35), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Alev dili katmanı: turuncu/kırmızı diller aşağıdan yukarı akıyor */
.chip.telegram::before{
  content:"";
  position:absolute; inset:-10% -15% -35% -15%;
  background:
    /* orta büyük alev */
    radial-gradient(90% 140% at 50% 100%, rgba(255,140,0,.85) 0 35%, rgba(255,80,0,.7) 36% 60%, transparent 61%),
    /* sol dil */
    radial-gradient(70% 120% at 30% 100%, rgba(255,200,120,.85) 0 30%, rgba(255,120,0,.6) 31% 55%, transparent 56%),
    /* sağ dil */
    radial-gradient(70% 120% at 70% 100%, rgba(255,180,90,.8) 0 30%, rgba(255,70,0,.55) 31% 55%, transparent 56%),
    /* conic parıltı */
    conic-gradient(from 200deg at 50% 95%, transparent 0 15%, rgba(255,220,150,.6) 25%, rgba(255,120,0,.65) 40%, rgba(255,0,0,.4) 55%, transparent 70% 100%);
  filter: blur(10px) saturate(120%);
  mix-blend-mode: screen;
  animation: flameUp 1.8s ease-in-out infinite alternate, flameWave 6s linear infinite;
  pointer-events:none;
  z-index:0;
}

/* Kıvılcım parçacıkları */
.chip.telegram::after{
  content:"";
  position:absolute; left:50%; bottom:-6%;
  width:3px; height:3px; border-radius:50%;
  background: rgba(255,230,180,.95);
  box-shadow:
    -36px 0   0 2px rgba(255,200,120,.9),
    -14px -6px 0 1.8px rgba(255,170,80,.85),
     12px -4px 0 1.8px rgba(255,210,130,.9),
     30px  0   0 1.6px rgba(255,180,80,.85),
     48px  6px 0 1.6px rgba(255,220,150,.9),
    -50px  8px 0 1.6px rgba(255,140,70,.8);
  filter: blur(.2px);
  animation: sparksRise 1.6s linear infinite;
  pointer-events:none;
  z-index:1;
}

/* Yazı her zaman üstte kalsın ve ortalansın */
.chip.telegram > *{ position:relative; z-index:2 }

/* Animasyonlar */
@keyframes flameUp{
  0%   { transform: translateY(6%) scaleY(.95) skewX(-2deg); opacity:.95 }
  100% { transform: translateY(-4%) scaleY(1.05) skewX(2deg); opacity:1 }
}
@keyframes flameWave{
  0%   { background-position: 50% 100%, 30% 100%, 70% 100%, 50% 100% }
  100% { background-position: 50% 85%,  30% 90%,  70% 90%,  50% 90%  }
}
@keyframes sparksRise{
  0%   { transform: translate(-50%,0) scale(1);   opacity:.9 }
  100% { transform: translate(-50%,-120%) scale(.8); opacity:0 }
}
/* === Telegram Akıcı Degrade Wave === */
.chip.telegram{
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: linear-gradient(270deg,#b06afc,#43d1ff,#ff4db2) !important;
  background-size: 600% 600% !important;
  border: none !important;
  text-shadow: 0 0 6px rgba(0,0,0,.4) !important;
  animation: gradientFlow 6s ease infinite !important;
  box-shadow: 0 0 20px rgba(176,106,252,.6) !important;
}

@keyframes gradientFlow{
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}