/* ziroo.net ürün tanıtım sayfaları (ziroo.net/tussle/, ziroo.net/kapis/, ziroo.net/diskort/): ortak şablon. hub.css'in üstüne gelir
   (sayfadan ../hub.css ve ../urun.css). Sayfanın rengi body sınıfıyla seçilir (.u-tussle / .u-kapis / .u-diskort); sahne
   çizimi (satır içi SVG) ve hareketleri de burada. Yeni ürün: index.html'i kopyala, .u-<ad> renklerini ekle,
   deploy-www.sh'deki own() listesine yeni sayfayı yaz.
   CSP: satır içi stil yok; hareket yalnız transform/opacity, hareket azaltma hub.css'te hepsini kapatır. */

/* Başlık yazı tipi: home.css'tekiyle aynı alt küme (ASCII + Türkçe harfler). Yalnız ürün adında kullanılır. */
@font-face {
  font-family: "Unbounded";
  src: url("unbounded-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Ürün renkleri ("r g b"): --a1 ana, --a2 ikinci, --ink-a açık yazı tonu ---------- */

/* Tussle: ikon mavisi ana, pembe ikinci vurgu (mobil-playus docs/VISUAL.md: --accent #4da3ff, --accent2 #ff7ac0) */
.u-tussle {
  --au-1: 77 163 255;
  --au-2: 255 122 192;
  --au-3: 46 211 245;
  --a1: 77 163 255;
  --a2: 255 122 192;
  --ink-a: 196 236 255;
  --on-a: #0b2433;
  --title: linear-gradient(95deg, #eaf5ff 0%, #9fd0ff 34%, #4da3ff 62%, #ff7ac0 100%);
}

/* Kapış: ana sayfadaki .d-kapis kapısının kırmızısı ve turuncusu */
.u-kapis {
  --au-1: 255 61 110;
  --au-2: 255 138 61;
  --au-3: 255 47 209;
  --a1: 255 61 110;
  --a2: 255 138 61;
  --ink-a: 255 190 205;
  --on-a: #2e0a16;
  --title: linear-gradient(95deg, #ffe6b0 0%, #ff8a3d 38%, #ff3d6e 72%, #ff2fd1 100%);
}
.u-kapis .chip.hot { color: #ffe6d6; }

/* Diskort: ana sayfadaki .d-diskort kapısının morları */
.u-diskort {
  --au-1: 124 92 246;
  --au-2: 129 140 248;
  --au-3: 167 139 250;
  --a1: 167 139 250;
  --a2: 129 140 248;
  --ink-a: 221 214 254;
  --on-a: #140c2e;
  --title: linear-gradient(95deg, #fff 0%, #ddd6fe 36%, #a78bfa 68%, #818cf8 100%);
}

/* ---------- Üst çubuk: geri bağlantısı ---------- */

.pill.back .chev { transform: scaleX(-1); }
.pill.back:hover .chev { transform: scaleX(-1) translateX(3px); }
.pill.back:hover {
  border-color: rgb(var(--a1) / .7);
  background: rgb(var(--a1) / .1);
  box-shadow: 0 0 22px -4px rgb(var(--a1) / .6);
}
.u .kicker .dot {
  background: rgb(var(--a1));
  box-shadow: 0 0 0 3px rgb(var(--a1) / .18), 0 0 14px rgb(var(--a1));
}

/* ---------- Açılış: ad, cümle, düğmeler; yanında sahne ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 48px);
  align-items: center;
  margin-top: clamp(30px, 6vw, 64px);
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px 5px;
  border: 1px solid rgb(var(--a1) / .32);
  border-radius: 999px;
  background: rgb(var(--a1) / .08);
  color: rgb(var(--ink-a));
  font: 600 12px/1.1 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chip.hot {
  border-color: rgb(var(--a2) / .5);
  background: rgb(var(--a2) / .12);
  color: #ffe1f0;
}
.u-diskort .chip.hot { color: #e0e7ff; }

/* Ürün adı: Unbounded geniş (7 harf ≈ 6.3em); tek sütunda ekran genişliğine, iki sütunda sütuna sığar */
.pname {
  width: fit-content;
  max-width: 100%;
  margin: 18px 0 0;
  font: 800 clamp(40px, 13.5vw, 104px)/1 "Unbounded", var(--display);
  letter-spacing: -.01em;
  color: var(--ink);
}
@media (min-width: 1000px) {
  .pname { font-size: clamp(56px, 6.2vw, 84px); }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pname {
    background: var(--title);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgb(var(--a1) / .35));
  }
}

.hero .lede { margin-top: 16px; }

/* ---------- Eylem düğmeleri ---------- */

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 20px 10px 16px;
  border: 1px solid rgb(var(--a1) / .5);
  border-radius: 16px;
  background: rgb(var(--a1) / .1);
  color: rgb(var(--ink-a));
  font: 700 16px/1.15 var(--display);
  letter-spacing: .03em;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s, background-color .3s, border-color .3s;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn .sub {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .05em;
  opacity: .78;
}
.btn:hover {
  border-color: rgb(var(--a1) / .9);
  background: rgb(var(--a1) / .18);
  box-shadow: 0 10px 30px -10px rgb(var(--a1) / .8);
}
.btn.main {
  border-color: transparent;
  background: linear-gradient(100deg, rgb(var(--a1)), rgb(var(--a2)));
  color: var(--on-a);
  box-shadow: 0 10px 30px -12px rgb(var(--a1) / .9), inset 0 1px 0 rgb(255 255 255 / .35);
}
.btn.main:hover { box-shadow: 0 14px 36px -10px rgb(var(--a1)), inset 0 1px 0 rgb(255 255 255 / .35); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); transition-duration: .1s; }

/* Küçük ikincil düğme (ör. Diskort "Giriş yap") */
.btn.mini {
  min-height: 44px;
  padding: 8px 14px;
  border-color: rgb(255 255 255 / .16);
  border-radius: 999px;
  background: rgb(255 255 255 / .03);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}
.btn.mini svg { width: 16px; height: 16px; }
.btn.mini:hover { color: var(--ink); box-shadow: none; }

.note {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}
.note strong { color: var(--ink-2); font-weight: 600; }
.note a, .panel a {
  color: rgb(var(--ink-a));
  text-decoration: underline;
  text-decoration-color: rgb(var(--a1) / .5);
  text-underline-offset: 3px;
}
.note a:hover, .panel a:hover { text-decoration-color: rgb(var(--a1)); }

/* ---------- Sahne (satır içi SVG) ---------- */

.stage {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  animation: rise .9s var(--ease) .2s both;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--a1) / .35), rgb(var(--a2) / .12) 60%, transparent);
  filter: blur(20px);
}
.scene { display: block; width: 100%; height: auto; }
.scene text { font-family: var(--display); }
.scene .t-b { font-weight: 700; }
.scene .t-m { font-weight: 600; }

/* ---------- Özellikler ---------- */

.sec {
  margin: clamp(48px, 8vw, 88px) 0 0;
  color: var(--ink-2);
  font: 600 13px/1 var(--display);
  letter-spacing: .32em;
  text-transform: uppercase;
}

.feats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 980px) {
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.feat {
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(var(--a1) / .06), rgb(255 255 255 / 0) 60%), var(--card);
  animation: rise .8s var(--ease) both;
}
.feat:nth-child(2) { animation-delay: .06s; }
.feat:nth-child(3) { animation-delay: .12s; }
.feat:nth-child(4) { animation-delay: .18s; }
.feat:nth-child(5) { animation-delay: .24s; }
.feat:nth-child(n+6) { animation-delay: .3s; }
.feat .ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgb(var(--a1) / .14);
  color: rgb(var(--ink-a));
  box-shadow: inset 0 0 0 1px rgb(var(--a1) / .3);
}
.feat:nth-child(even) .ico {
  background: rgb(var(--a2) / .14);
  box-shadow: inset 0 0 0 1px rgb(var(--a2) / .32);
}
.feat .ico svg { width: 22px; height: 22px; }
.feat h3 {
  margin: 14px 0 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: .01em;
}
.feat p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Bilgi panoları (katılma adımları, platformlar, kurulum) ---------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (min-width: 760px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

.panel {
  padding: 22px 22px 24px;
  border: 1px solid rgb(var(--a1) / .22);
  border-radius: 18px;
  background: rgb(var(--a1) / .05);
}
.panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 19px/1.2 var(--display);
}
.panel h3 svg { width: 20px; height: 20px; flex: none; color: rgb(var(--ink-a)); }
.panel p,
.panel li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.panel p { margin: 10px 0 0; }
.panel ol,
.panel ul {
  margin: 12px 0 0;
  padding-left: 1.3em;
}
.panel li + li { margin-top: 6px; }
.panel li::marker { color: rgb(var(--ink-a)); font-weight: 700; }
.panel .btn { margin-top: 16px; }
.sec + .panel { margin-top: 20px; }

/* ---------- Telefon ---------- */

@media (max-width: 520px) {
  .acts { gap: 10px; }
  .acts .btn:not(.mini) { flex: 1 1 100%; }
  .feat { padding: 18px; }
  .panel { padding: 20px 18px; }
}

/* ---------- Sahne hareketleri (yalnız transform/opacity) ---------- */

.scene .bob,
.scene .pulse,
.scene .wave rect,
.scene .pop {
  transform-box: fill-box;
  transform-origin: center;
}
.scene .bob { animation: u-bob 4.2s ease-in-out infinite; }
.scene .bob.b2 { animation-duration: 5s; animation-delay: -1.6s; }
.scene .bob.b3 { animation-duration: 4.6s; animation-delay: -3s; }
.scene .tw { animation: blink 3.2s ease-in-out infinite; }
.scene .tw.t2 { animation-duration: 4.4s; animation-delay: -1.5s; }
.scene .tw.t3 { animation-duration: 2.8s; animation-delay: -.7s; }
.scene .pulse { animation: u-pulse 1.6s ease-out infinite; }
.scene .pulse.p2 { animation-delay: -.8s; }
.scene .pop { animation: u-pop 3.6s var(--ease) infinite; }
.scene .wave rect { animation: u-wave 1.1s ease-in-out infinite alternate; }
.scene .wave rect:nth-child(2n) { animation-duration: .8s; animation-delay: -.3s; }
.scene .wave rect:nth-child(3n) { animation-duration: 1.3s; animation-delay: -.6s; }
.scene .wave rect:nth-child(5n) { animation-duration: .9s; animation-delay: -.9s; }
.scene .live { animation: blink 1.6s ease-in-out infinite; }

@keyframes u-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes u-pulse {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(1.35); opacity: 0; }
}
@keyframes u-pop {
  0%, 12% { transform: translateY(6px) scale(.85); opacity: 0; }
  22%, 70% { transform: translateY(0) scale(1); opacity: 1; }
  85%, 100% { transform: translateY(-6px) scale(1); opacity: 0; }
}
@keyframes u-wave {
  from { transform: scaleY(.35); }
  to { transform: scaleY(1); }
}