*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#e5e7eb;
  line-height:1.25;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ========== HERO ========== */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #2a0a0a 0%, #140505 50%, #000 100%);
  padding:36px 16px 32px;
  text-align:center;
  border-bottom:2px solid #3f1818;
  overflow:hidden;
}
.hero-inner{position:relative;z-index:1}

/* Arka planda yavaş hareket eden ışık */
.hero-glow{
  position:absolute;top:-50%;left:50%;transform:translateX(-50%);
  width:120%;height:200%;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(251,191,36,.12) 0%, transparent 40%),
    radial-gradient(ellipse at center, rgba(220,38,38,.08) 0%, transparent 55%);
  animation:heroPulse 5s ease-in-out infinite;
}
@keyframes heroPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.05)}
}

/* Üst ince etiket */
.brand-topline{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-bottom:8px;
}
.topline-dot{
  width:5px;height:5px;border-radius:50%;
  background:#fbbf24;
  box-shadow:0 0 8px rgba(251,191,36,.8);
}
.topline-text{
  font-size:10px;letter-spacing:4px;
  color:#fbbf24;font-weight:700;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(251,191,36,.5);
}

/* ========== MARKA LOGO ========== */
.brand{
  position:relative;
  margin:0;
  font-size:clamp(40px, 9vw, 80px);
  font-weight:900;
  letter-spacing:3px;
  line-height:1;
  font-family:"Georgia","Times New Roman",serif;
  background:linear-gradient(
    180deg,
    #fef3c7 0%,
    #fbbf24 25%,
    #d97706 50%,
    #fbbf24 75%,
    #fef3c7 100%
  );
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 1px 0 #b45309)
    drop-shadow(0 2px 0 #78350f)
    drop-shadow(0 4px 16px rgba(251,191,36,.4));
}
.brand::before{
  content:attr(data-text);
  position:absolute;inset:0;
  background:linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.9) 40%,
    rgba(255,255,255,.9) 50%,
    transparent 70%
  );
  background-size:200% 100%;
  background-position:-100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:brandShine 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes brandShine{
  0%,100%{background-position:-100% 0}
  50%,60%{background-position:200% 0}
}

/* Marka altı süs */
.brand-divider{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin:14px auto 20px;max-width:280px;
}
.divider-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent 0%,#b45309 50%,transparent 100%);
}
.divider-gem{
  color:#fbbf24;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.7));
  animation:gemSpin 6s ease-in-out infinite;
}
@keyframes gemSpin{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.15)}
}

/* ========== CTA BUTTON (minimal) ========== */
.cta{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#25D366 0%,#128C7E 100%);
  color:#fff !important;font-weight:700;
  padding:7px 16px;border-radius:999px;
  font-size:12px;letter-spacing:.4px;
  overflow:hidden;
  box-shadow:
    0 2px 8px rgba(37,211,102,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
  margin-top:4px;
}
.cta::before{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.45) 50%,
    transparent 100%
  );
  transform:skewX(-20deg);
  animation:ctaShine 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaShine{
  0%,60%{left:-120%}
  100%{left:180%}
}
.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(37,211,102,.5), inset 0 1px 0 rgba(255,255,255,.25);
}

.cta-icon{
  width:14px;height:14px;flex-shrink:0;
}
.cta-text{position:relative;z-index:1}
.cta-arrow{font-size:13px;font-weight:900;transition:transform .2s ease}
.cta:hover .cta-arrow{transform:translateX(3px)}

.cta-disabled{
  display:inline-block;padding:7px 16px;
  background:#374151;color:#9ca3af;border-radius:999px;
  font-weight:600;font-size:12px;
}


.api-warn{
  max-width:1100px;margin:12px auto;
  background:#7f1d1d;color:#fee2e2;
  padding:10px 14px;border-radius:6px;font-size:13px;
}
.api-warn code{background:#450a0a;padding:2px 5px;border-radius:3px;color:#fecaca}

/* ========== MAIN ========== */
main{max-width:1280px;margin:0 auto;padding:4px 2px 30px}
.pkg{margin:0}

/* ========== GRID (sıkı bitişik) ========== */
.grid{display:grid;gap:3px;padding:3px}
.grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-portrait{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ========== CARD ========== */
.card{
  position:relative;display:block;overflow:hidden;
  background:#0a0a0a;
  border:1px solid rgba(0,0,0,.6);
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.7);
  z-index:1;
}

/* Görsel alanı */
.card-bg{
  width:100%;
  background-size:cover;
  background-position:center;
  background-color:#1a0e0e;
  position:relative;
}
.grid-wide .card-bg{aspect-ratio:16/6}
.grid-portrait .card-bg{aspect-ratio:3/5.8}   /* silver daha uzun */

/* Alt etiket — "Escort #N" */
.card-label{
  text-align:center;
  font-size:11px;
  font-weight:800;
  padding:3px 2px;
  letter-spacing:.6px;
  text-transform:uppercase;
}

/* ========== PLATINUM — LÜKS METALİK MAVİ ========== */
.pkg-platinum .card{
  border:1px solid #1e3a5f;
  box-shadow:inset 0 0 0 1px rgba(147,197,253,.15);
}
.pkg-platinum .card:hover{box-shadow:0 6px 20px rgba(59,130,246,.35), inset 0 0 0 1px rgba(147,197,253,.4)}
.pkg-platinum .card-bg-empty{
  background:
    /* parıltılar */
    radial-gradient(circle at 15% 30%, rgba(191,219,254,.18) 0%, transparent 10%),
    radial-gradient(circle at 80% 70%, rgba(191,219,254,.15) 0%, transparent 12%),
    radial-gradient(circle at 50% 20%, rgba(147,197,253,.2) 0%, transparent 8%),
    radial-gradient(circle at 25% 80%, rgba(147,197,253,.12) 0%, transparent 10%),
    /* metalik degrade */
    linear-gradient(135deg, #0a1929 0%, #1e3a5f 25%, #2563eb 50%, #1e3a5f 75%, #0a1929 100%);
  /* ince diyagonal çizgiler */
  position:relative;
}
.pkg-platinum .card-bg-empty::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(147,197,253,.04) 18px, rgba(147,197,253,.04) 19px);
}
.pkg-platinum .card-label{
  background:linear-gradient(180deg,#0a1929 0%,#1e3a5f 100%);
  color:#93c5fd;
  border-top:1px solid #3b6a8c;
}
.pkg-platinum .empty-line1,.pkg-platinum .empty-line3{color:#bfdbfe}
.pkg-platinum .empty-line2{
  color:#e0edff;
  text-shadow:0 0 12px rgba(147,197,253,.6), 0 2px 4px rgba(0,0,0,.8);
}
.pkg-platinum .empty-tikla{
  background:linear-gradient(180deg,#3b82f6 0%,#1d4ed8 100%);
  box-shadow:0 2px 8px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ========== GOLD — SARI/ALTIN METALİK ========== */
.pkg-gold .card{
  border:1px solid #78350f;
  box-shadow:inset 0 0 0 1px rgba(253,224,71,.15);
}
.pkg-gold .card:hover{box-shadow:0 6px 20px rgba(217,119,6,.35), inset 0 0 0 1px rgba(253,224,71,.4)}
.pkg-gold .card-bg-empty{
  background:
    radial-gradient(circle at 15% 30%, rgba(254,240,138,.18) 0%, transparent 10%),
    radial-gradient(circle at 80% 70%, rgba(254,240,138,.15) 0%, transparent 12%),
    radial-gradient(circle at 50% 20%, rgba(253,224,71,.2) 0%, transparent 8%),
    linear-gradient(135deg, #3d1d00 0%, #78350f 25%, #d97706 50%, #78350f 75%, #3d1d00 100%);
  position:relative;
}
.pkg-gold .card-bg-empty::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(253,224,71,.05) 18px, rgba(253,224,71,.05) 19px);
}
.pkg-gold .card-label{
  background:linear-gradient(180deg,#3d1d00 0%,#78350f 100%);
  color:#fde68a;
  border-top:1px solid #a16207;
}
.pkg-gold .empty-line1,.pkg-gold .empty-line3{color:#fde68a}
.pkg-gold .empty-line2{
  color:#fffbeb;
  text-shadow:0 0 12px rgba(253,224,71,.6), 0 2px 4px rgba(0,0,0,.8);
}
.pkg-gold .empty-tikla{
  background:linear-gradient(180deg,#f59e0b 0%,#b45309 100%);
  box-shadow:0 2px 8px rgba(217,119,6,.5), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ========== SILVER — KOYU BORDO (olduğu gibi) ========== */
.pkg-silver .card{border:1px solid #3f1818}
.pkg-silver .card:hover{box-shadow:0 4px 14px rgba(220,38,38,.4)}
.pkg-silver .card-bg-empty{
  background:
    radial-gradient(circle at 30% 30%, #3a1a1a 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, #2a0d0d 0%, transparent 55%),
    #1a0a0a;
}
.pkg-silver .card-label{
  background:linear-gradient(180deg,#000 0%,#2a0d0d 100%);
  color:#fbbf24;
  border-top:1px solid #3f1818;
}
.pkg-silver .empty-line1,.pkg-silver .empty-line3{color:#fcd34d}
.pkg-silver .empty-line2{color:#fde68a}
.pkg-silver .empty-tikla{background:#dc2626}

/* ========== EMPTY OVERLAY ========== */
.empty-text{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:4px;text-align:center;
  font-weight:900;line-height:1;
  overflow:hidden;
  z-index:1;
}
.empty-line1{font-size:clamp(9px,1.2vw,14px);font-weight:700}
.empty-line2{font-size:clamp(12px,2.2vw,22px);line-height:1}
.empty-line3{font-size:clamp(9px,1.2vw,14px);font-weight:700}
.empty-tikla{
  margin-top:3px;color:#fff;
  padding:3px 9px;border-radius:3px;
  font-size:clamp(10px,1.4vw,14px);font-weight:800;
  letter-spacing:1px;white-space:nowrap;
}

/* Wide kartlar (platinum/gold) — büyük yazılar */
.grid-wide .empty-line1,.grid-wide .empty-line3{font-size:clamp(12px,1.6vw,18px)}
.grid-wide .empty-line2{font-size:clamp(24px,3.2vw,42px)}
.grid-wide .empty-tikla{font-size:clamp(13px,1.8vw,18px);padding:5px 18px;letter-spacing:1.5px}
.grid-wide .empty-text{gap:6px}

/* Dolu kartta resim yoksa başlık overlay'i */
.card-text-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75));
  color:#fde68a;
}
.card-brand{
  font-weight:900;font-size:clamp(14px,2.4vw,28px);
  text-shadow:0 2px 8px rgba(0,0,0,.8);line-height:1.05;
}
.card-subline{font-size:clamp(10px,1.3vw,14px);color:#fbbf24;margin-top:4px;font-weight:600}

/* ========== RESPONSIVE ========== */
@media (max-width:720px){
  main{padding:3px 0 20px}
  .grid{gap:2px;padding:2px}

  /* WIDE (Platinum/Gold) — kart yüksekliğini artır, "Bu Alana" gizle */
  .grid-wide .card-bg{aspect-ratio:2/1}
  .grid-wide .empty-line1{display:none}           /* sadece "Bu Alana" gizli */
  .grid-wide .empty-text{gap:4px;padding:5px}
  .grid-wide .empty-line2{font-size:20px;line-height:1.05}
  .grid-wide .empty-line3{font-size:13px}
  .grid-wide .empty-tikla{font-size:13px;padding:4px 14px;letter-spacing:1px;margin-top:2px}

  /* SILVER (6 sütun portrait) — TIKLA taşmasın */
  .grid-portrait .empty-text{gap:3px;padding:3px}
  .grid-portrait .empty-line1{font-size:9px}
  .grid-portrait .empty-line2{font-size:12px;line-height:1.05}
  .grid-portrait .empty-line3{font-size:9px}
  .grid-portrait .empty-tikla{
    font-size:10px;padding:3px 7px;margin-top:3px;letter-spacing:.5px;
  }
  .grid-portrait .card-label{font-size:9px;padding:2px 1px;letter-spacing:.3px}
}

/* Mobil hero */
@media (max-width:560px){
  .hero{padding:26px 14px 24px}
  .topline-text{font-size:9px;letter-spacing:3px}
  .brand{letter-spacing:2px}
  .brand-divider{margin:10px auto 16px;max-width:220px}
  .cta{padding:6px 14px;font-size:11px;gap:6px}
  .cta-icon{width:12px;height:12px}
  .cta-arrow{font-size:12px}
}

/* Orta mobil — wide kartta yazı biraz daha küçük */
@media (max-width:480px){
  .grid-wide .empty-line2{font-size:17px}
  .grid-wide .empty-line3{font-size:11px}
  .grid-wide .empty-tikla{font-size:11px;padding:3px 11px}
}

/* Çok dar cihazlar */
@media (max-width:380px){
  .grid-wide .empty-line2{font-size:15px}
  .grid-wide .empty-line3{font-size:10px}
  .grid-wide .empty-tikla{font-size:10px;padding:2px 9px;letter-spacing:.5px}
  .grid-portrait .empty-line1,.grid-portrait .empty-line3{font-size:7px}
  .grid-portrait .empty-line2{font-size:9px}
  .grid-portrait .empty-tikla{font-size:8px;padding:1px 4px;letter-spacing:0}
  .grid-portrait .card-label{font-size:7px}
}

/* ========== FOOTER ========== */
.foot{
  text-align:center;padding:16px;color:#6b7280;
  border-top:1px solid #2a1a1a;
  font-size:12px;background:#0a0a0a;
}