/* stickky — site stili.
 *
 * Tasarım yönü ui-ux-pro-max kataloğundan seçildi (product: meme sticker
 * marketplace / entertainment / consumer):
 *   stil       Vibrant & Block-based — bold, enerjik, blok yerleşim, yüksek kontrast
 *   renk       viral pembe #EC4899 + komedi sarısı #F59E0B + paylaşım mavisi #2563EB
 *   tipografi  Anton (display: brutal, shouty, meme) / Epilogue (gövde)
 *   ritim      büyük bölüm boşlukları, iri başlık, 200-300ms geçiş
 *   kaçın      karmaşık gölge, 3D, soluk renk, düşük enerji
 *
 * Önceki sürüm tam da o "kaçın" listesindeydi: koyu zemin + tek turkuaz vurgu,
 * soluk ve enerjisiz. Kullanıcı "direkt AI üretimi gözüküyor" dedi, haklıydı.
 *
 * Emoji ikon olarak KULLANILMIYOR (katalog kuralı) — kanal simgeleri satır içi
 * SVG. Sticker kartlarındaki emoji istisna: o ikon değil, ürünün kendi verisi
 * (Telegram'da aramanın eşleştiği emoji).
 */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');

:root {
  --pembe:      #EC4899;
  --pembe-koyu: #BE185D;
  --sari:       #F59E0B;
  --mavi:       #2563EB;
  --mavi-koyu:  #1D4ED8;

  --zemin:      #FFFFFF;
  --yazi:       #0F172A;
  --yazi-2:     #475569;
  --kart:       #FFFFFF;
  --yumusak:    #FDF4F8;
  --cizgi:      #FCE9F2;
  --cizgi-guc:  #0F172A;

  /* saydam sticker'ların kenarı görünsün */
  --dama: repeating-conic-gradient(#F1F5F9 0% 25%, #FFFFFF 0% 50%) 50% / 12px 12px;

  --r:    14px;
  --r-b:  20px;
  --gecis: 220ms cubic-bezier(.2,.8,.3,1);
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--zemin);
  color: var(--yazi);
  font: 16px/1.6 Epilogue, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------- üst bar */

.ust {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 36px);
  background: var(--zemin);
  border-bottom: 3px solid var(--cizgi-guc);
}
.marka {
  font-family: Anton, Impact, sans-serif; font-size: 26px;
  letter-spacing: .01em; text-decoration: none; text-transform: lowercase;
}
.marka span { color: var(--pembe); }

.sekmeler { display: flex; gap: 8px; }
.sekmeler a {
  text-decoration: none; color: var(--yazi);
  padding: 9px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; min-height: 44px;
  display: inline-flex; align-items: center;
  border: 2px solid transparent;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.sekmeler a:hover { background: var(--yumusak); border-color: var(--cizgi); }
.sekmeler a.etkin { background: var(--pembe); color: #fff; border-color: var(--pembe); }

/* ------------------------------------------------------------- karşılama */

.karsilama {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(48px, 10vh, 104px) 20px;
  gap: 26px;
  background:
    radial-gradient(1100px 460px at 50% -12%, #FDF4F8 0%, transparent 62%),
    var(--zemin);
}
.dev-logo {
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(64px, 16vw, 132px);
  line-height: .92; letter-spacing: .005em; text-transform: lowercase;
}
.dev-logo span { color: var(--pembe); }
.karsilama .slogan {
  font-size: clamp(19px, 3vw, 26px); font-weight: 600; max-width: 22ch;
}
.karsilama .slogan em { font-style: normal; color: var(--mavi); }
.karsilama .aciklama { color: var(--yazi-2); max-width: 44ch; font-size: 16.5px; }

.dugmeler { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.dugme {
  text-decoration: none; border-radius: 999px;
  padding: 15px 34px; font-size: 17px; font-weight: 700;
  min-height: 44px; display: inline-flex; align-items: center;
  background: var(--mavi); color: #fff;
  border: 3px solid var(--mavi);
  transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme:hover { background: var(--mavi-koyu); border-color: var(--mavi-koyu); transform: translateY(-2px); }

.kanallar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.kanallar span {
  background: var(--yumusak); border: 2px solid var(--cizgi);
  border-radius: 999px; padding: 7px 16px;
  font-size: 14px; font-weight: 600; color: var(--yazi-2);
}

/* ------------------------------------------------------------- mağaza */

.tuval {
  flex: 1; width: 100%;
  max-width: 1040px; margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 28px) 72px;
}
.sayfa-ust { margin-bottom: 34px; }
.sayfa-ust h1 {
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(38px, 7vw, 62px); line-height: 1; text-transform: lowercase;
}
.sayfa-ust p { color: var(--yazi-2); font-size: 16px; margin-top: 10px; }

.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }

/* Blok kart: kalın kenar + sert ofset gölge (katalog: bold, block-based;
   karmaşık/yumuşak gölge yasak). */
.satir {
  background: var(--kart);
  border: 3px solid var(--cizgi-guc);
  border-radius: var(--r-b);
  box-shadow: 6px 6px 0 var(--pembe);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.satir:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--pembe); }
.satir:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--sari); }
.satir:nth-child(3n+2):hover { box-shadow: 9px 9px 0 var(--sari); }
.satir:nth-child(3n+3) { box-shadow: 6px 6px 0 var(--mavi); }
.satir:nth-child(3n+3):hover { box-shadow: 9px 9px 0 var(--mavi); }

/* Satırın gövdesi tek düğme: önizlemeyi açar. Kanal bağlantıları AYRI —
   iç içe etkileşim (düğme içinde bağlantı) hem geçersiz hem klavyede tuzak. */
.satir-ac {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; font: inherit; color: inherit;
  padding: 20px 22px 14px;
}
.satir-bilgi { flex: 1 1 220px; min-width: 0; display: block; }
.satir-ad {
  font-family: Anton, Impact, sans-serif; font-size: 27px; line-height: 1.12;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rozet {
  font-family: Epilogue, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--sari); color: #0F172A;
  border-radius: 999px; padding: 4px 10px;
}
.satir-alt { display: block; color: var(--yazi-2); font-size: 14.5px; margin-top: 6px; }
.satir .sayi {
  display: block; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--pembe-koyu);
  text-transform: uppercase; letter-spacing: .05em;
}

.mini { display: flex; align-items: center; gap: 7px; flex: none; }
.mini img {
  width: 58px; height: 58px; object-fit: contain; padding: 3px;
  background: var(--dama); border: 2px solid var(--cizgi-guc); border-radius: 11px;
}
.mini .kalan { font-size: 14px; font-weight: 700; color: var(--yazi-2); padding-left: 2px; }
@media (max-width: 760px) { .mini img:nth-child(n+4) { display: none; } }

/* eylem çubuğu — tek "Ekle" + fiyat */
.satir-eylem {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 0 22px 20px;
}
.ekle {
  border: 3px solid var(--cizgi-guc); border-radius: 999px;
  padding: 11px 30px; font: inherit; font-size: 15px; font-weight: 700;
  min-height: 44px; cursor: pointer;
  background: var(--pembe); color: #fff;
  transition: background var(--gecis), transform var(--gecis);
}
.ekle:hover { background: var(--pembe-koyu); transform: translateY(-2px); }
.ekle.buyuk { padding: 13px 36px; font-size: 16px; }

/* seçim panosu */
.pano {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, #0F172A 58%, transparent);
  backdrop-filter: blur(6px);
  padding: 0;
  animation: acil 200ms ease;
}
.pano.gizli { display: none; }
@media (min-width: 640px) { .pano { align-items: center; padding: 30px; } }

.pano-govde {
  width: min(520px, 100%);
  background: var(--zemin);
  border: 3px solid var(--cizgi-guc);
  border-radius: var(--r-b) var(--r-b) 0 0;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  animation: kalk 240ms cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 640px) { .pano-govde { border-radius: var(--r-b); padding-bottom: 22px; } }
@keyframes kalk { from { transform: translateY(22px); opacity: 0 } }

.pano-govde h3 { font-family: Anton, Impact, sans-serif; font-size: 30px; line-height: 1.05; }
.pano-alt { color: var(--yazi-2); font-size: 14.5px; margin-top: 6px; }

.secenekler { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 16px; }
.secenek {
  /* minmax(0,1fr): düz `1fr` min-content altına inemiyor ve uzun açıklama
     ("512×512 dosyalar — Discord, Signal, klavye") panoyu telefonda
     taşırıyordu. Izgaranın klasik tuzağı. */
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center;
  column-gap: 14px; row-gap: 2px;
  text-decoration: none; color: var(--yazi);
  border: 2px solid var(--cizgi-guc); border-radius: var(--r);
  padding: 13px 16px; min-height: 44px;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.secenek svg { width: 24px; height: 24px; fill: currentColor; grid-row: 1 / 3; }
.k-ad  { font-size: 16px; font-weight: 700; }
.k-not { font-size: 13px; color: var(--yazi-2); min-width: 0; }
.secenek:hover { transform: translateX(3px); }
.secenek.tg:hover  { background: #229ED9; border-color: #229ED9; color: #fff; }
.secenek.wa:hover  { background: #128C4A; border-color: #128C4A; color: #fff; }
.secenek.zip:hover { background: var(--mavi); border-color: var(--mavi); color: #fff; }
.secenek:hover .k-not { color: inherit; opacity: .85; }
/* Henüz olmayan kanal: görünür ama tıklanamaz — alıcı neyin geleceğini
   görsün, olmayan şeye tıklayıp hüsrana uğramasın. */
.secenek.yok {
  border-color: var(--cizgi); color: var(--yazi-2);
  background: var(--yumusak); cursor: not-allowed;
}
.secenek.yok:hover { transform: none; }

.pano-kapat {
  width: 100%; border: 0; background: none; color: var(--yazi-2);
  font: inherit; font-size: 15px; font-weight: 600; padding: 12px; min-height: 44px;
  cursor: pointer; border-radius: 999px;
}
.pano-kapat:hover { background: var(--yumusak); color: var(--yazi); }

.al {
  text-decoration: none; border-radius: 999px;
  padding: 11px 22px; font-size: 14.5px; font-weight: 700; min-height: 44px;
  display: inline-flex; align-items: center;
  background: var(--mavi); color: #fff; border: 2px solid var(--mavi);
  transition: background var(--gecis), transform var(--gecis);
}
.al:hover { background: var(--mavi-koyu); transform: translateY(-2px); }
.al.bekliyor {
  background: var(--yumusak); color: var(--yazi-2);
  border-color: var(--cizgi); cursor: default;
}
.al.bekliyor:hover { transform: none; background: var(--yumusak); }

.bos {
  border: 3px dashed var(--cizgi-guc); border-radius: var(--r-b);
  padding: 56px 24px; text-align: center;
}
.bos b { display: block; font-family: Anton, Impact, sans-serif; font-size: 26px; margin-bottom: 8px; }
.bos p { font-size: 15px; color: var(--yazi-2); }

/* ------------------------------------------------------------- önizleme */

.onizleme {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  background: color-mix(in srgb, #0F172A 55%, transparent);
  backdrop-filter: blur(6px);
  padding: clamp(14px, 4vw, 44px);
  animation: acil 200ms ease;
}
@keyframes acil { from { opacity: 0 } }
.onizleme.gizli { display: none; }

.onizleme-govde {
  max-width: 920px; margin: 0 auto;
  background: var(--zemin);
  border: 3px solid var(--cizgi-guc); border-radius: var(--r-b);
  padding: clamp(22px, 4vw, 34px);
}
.onizleme-ust { margin-bottom: 26px; padding-right: 44px; }
.onizleme-ust h3 {
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.05;
}
.onizleme-ust p { color: var(--yazi-2); font-size: 15.5px; margin-top: 8px; }
.oz-kanallar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.kare {
  position: relative; border: 2px solid var(--cizgi-guc); background: var(--dama);
  border-radius: var(--r); padding: 6px; cursor: zoom-in;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.kare:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pembe); }
.kare img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.kare-emoji {
  position: absolute; right: 7px; top: 7px;
  background: #fff; border: 2px solid var(--cizgi-guc);
  border-radius: 9px; padding: 0 5px; font-size: 15px; line-height: 1.45;
}

.kapat {
  position: fixed; top: 20px; right: 20px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--cizgi-guc); background: #fff; color: var(--yazi);
  font-size: 17px; font-weight: 700; cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.kapat:hover { background: var(--pembe); border-color: var(--pembe); color: #fff; }

/* tek sticker */
.tekli {
  position: fixed; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: clamp(12px, 4vw, 40px);
  background: color-mix(in srgb, #0F172A 72%, transparent);
  backdrop-filter: blur(8px);
}
.tekli.gizli { display: none; }
.tekli figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sahne {
  background: var(--dama); border: 3px solid var(--cizgi-guc); border-radius: var(--r-b);
  padding: 12px; width: min(540px, 76vw);
  display: flex; align-items: center; justify-content: center;
}
.sahne img { width: 100%; height: auto; max-height: 66vh; object-fit: contain; display: block; }
.tekli figcaption {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 3px solid var(--cizgi-guc); border-radius: 999px;
  padding: 8px 20px; font-size: 15px; font-weight: 600;
}
.tekli figcaption span:first-child { font-size: 22px; }
.ok {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 3px solid var(--cizgi-guc); background: #fff; color: var(--yazi);
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.ok:hover { background: var(--pembe); border-color: var(--pembe); color: #fff; transform: scale(1.07); }
@media (max-width: 640px) { .ok { width: 44px; height: 44px; font-size: 21px; } }

/* ------------------------------------------------------------- dip */

.dip {
  border-top: 3px solid var(--cizgi-guc);
  padding: 26px 20px 34px; text-align: center;
  color: var(--yazi-2); font-size: 14px; font-weight: 500;
}
.dip a { color: var(--pembe-koyu); font-weight: 700; }