/* ============================================================
   OfferSniper — görsel dil v2 "Mürekkep & Şafak"
   ------------------------------------------------------------
   NEDEN DEĞİŞTİ (2026-09-13): birinci tasarım siyah zemin + altın vurgu idi.
   O kombinasyon booster/gaming araçlarında fazlasıyla yaygın; ürün "herkesin
   yaptığı şey" gibi duruyordu. Yeni dil üç şeye dayanıyor:
     1. Mürekkep moru zemin + geniş, yumuşak şafak ışıkları (düz siyah değil).
     2. Tek parlak vurgu yerine SOĞUK bir menekşe→camgöbeği geçişi; birincil
        düğme ise fildişi beyaz — pahalı aletler böyle görünür, sarı değil.
     3. Gerçek içerik: 55 oyunun ikonu ve kendi çizdiğimiz kademe armaları.
        "Her oyun, her kategori" iddiası yazıyla değil GÖRSELLE kanıtlanıyor.
   KURAL: satır içi stil YOK (katı CSP: style-src 'self'). Her şey burada.
   ============================================================ */
:root {
  --bg: #07060f;
  --bg2: #0a0915;
  --kart: #100f1d;
  --kart2: #16142594;
  --çizgi: #ffffff12;
  --çizgi2: #ffffff22;
  --metin: #f3f1fb;
  --sönük: #a5a2c0;
  --sönük2: #726f93;
  /* Vurgu: menekşe → camgöbeği. Tek başına asla büyük alan kaplamaz. */
  --mor: #8b7bff;
  --mor2: #b7acff;
  --cam: #3fe0d0;
  --mercan: #ff7a59;
  /* Eski değişken adları başka sayfalarda geçiyor — kırılmasın diye duruyorlar */
  --altın: #b7acff;
  --altın2: #ddd7ff;
  --yeşil: #35d399;
  --kırmızı: #ff7a90;
  --mavi: #7cc4ff;
  --gölge: 0 40px 90px -40px #000000f0;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--metin);
  font: 16px/1.65 ui-sans-serif, "Segoe UI", Inter, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── ZEMİN: şafak ışıkları + film grenii ─────────────────────────────────
   Üç geniş renk lekesi çok yavaş kayıyor. Amaç fark edilmek değil, sayfanın
   "düz" hissettirmemesi. Gren katmanı gradyanlardaki bantlanmayı da siliyor. */
body::before {
  /* inset 0: lekeler GÖRÜNEN alana göre konumlanmalı. Kutuyu ekranın dışına
     taşırınca "at 16% 6%" ekranın üstünde kalıyor ve ışık görünmüyordu. */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 40% at 12% 14%, #6d4bff66, transparent 72%),
    radial-gradient(46% 38% at 90% 8%, #1fb6d866, transparent 74%),
    radial-gradient(40% 30% at 52% 32%, #a855f73d, transparent 70%),
    radial-gradient(60% 45% at 50% 104%, #ff5c8a2b, transparent 72%);
  /* KAYDIRMA PERFORMANSI (2026-09-15, ölçüldü: 40 tekerlek adımında 125 düşen
     kare → 4). Bu katman tam ekran ve sabit: üstündeki blur + scale animasyonu
     her kaydırma karesinde yeniden çizdiriyordu. Gradyanlar zaten yumuşak,
     blur görünür fark yaratmıyordu; animasyon yalnız kaydırma (compositor). */
  will-change: transform;
  animation: safak 26s ease-in-out infinite alternate;
}
@keyframes safak {
  50% { transform: translate3d(2%, -3%, 0); }
  100% { transform: translate3d(-2%, 2%, 0); }
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  /* Gren karışım kipi (overlay) sabit katmanı her kaydırma karesinde kayan
     içerikle yeniden harmanlatıyordu; düz düşük opaklık aynı dokuyu verir. */
  opacity: .07; will-change: transform;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
a { color: var(--mor2); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em;
  color: var(--cam); background: #ffffff0d; padding: 1px 6px; border-radius: 5px;
}

/* ── görünürken belirme ── */
.belir { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.belir.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .belir { opacity: 1; transform: none; transition: none; }
  body::before { animation: none; }
}

/* ── üst bar ── */
header.nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);   /* 18px+saturate her kaydırmada yeniden bulanıklaştırıyordu */
  background: #07060fcc;
  border-bottom: 1px solid var(--çizgi);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
.brand { font-weight: 700; font-size: 18.5px; letter-spacing: -.025em; color: var(--metin); display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
/* ── MARKA İŞARETİ: /marka.css (panelle ortak, yalnız opaklık/transform animasyonu —
   filter/background-position animasyonu kaydırmada kare düşürüyordu, 2026-09-14). Sitede biraz büyük: */
.brand i.simsek { width: 22px; height: 28px; vertical-align: 0; }
.brand span { background: linear-gradient(100deg, var(--mor2), var(--cam)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav nav { margin-left: auto; display: flex; gap: 26px; align-items: center; font-size: 14.5px; }
.nav nav a { color: var(--sönük); font-weight: 500; }
.nav nav a:hover { color: var(--metin); text-decoration: none; }
@media (max-width: 860px) { .nav nav a:not(.btn) { display: none; } }

/* Dil seçici — menünün başında, sade. */
.dil-secici {
  background: #ffffff0a; color: var(--sönük); border: 1px solid var(--çizgi);
  border-radius: 9px; padding: 6px 8px; font: inherit; font-size: 13.5px; cursor: pointer;
  color-scheme: dark;
}
.dil-secici:hover { color: var(--metin); border-color: var(--çizgi2); }
/* AÇILAN LİSTE DE KOYU OLMALI: varsayılanda tarayıcı beyaz zemine beyaz yazı
   çiziyor ve diller yalnız fareyle üzerine gelince okunuyordu. */
.dil-secici option { background: #14131f; color: #f3f1fb; }
.dil-secici option:checked { background: #221f38; }
@media (max-width: 700px) { .dil-secici { display: none; } }

/* ── düğmeler ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 13px; padding: 13px 24px; font-size: 15px; font-weight: 560;
  border: 1px solid var(--çizgi2); background: #ffffff0a; color: var(--metin);
  cursor: pointer; font-family: inherit; white-space: nowrap; position: relative; overflow: hidden;
  backdrop-filter: blur(8px);
  transition: transform .16s, box-shadow .2s, border-color .2s, background .2s;
}
.btn:hover { border-color: #ffffff38; background: #ffffff14; transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
/* BİRİNCİL DÜĞME: fildişi beyaz. Sayfadaki en parlak şey bu olsun —
   göz otomatik oraya gider ve renkli bir düğmeden daha pahalı durur. */
.btn.gold {
  background: linear-gradient(180deg, #ffffff, #ddd8f5);
  border: none; color: #0a0913; font-weight: 700;
  box-shadow: 0 14px 40px -14px #b7acffcc, 0 0 0 1px #ffffff30 inset;
}
.btn.gold:hover { box-shadow: 0 22px 54px -16px #b7acffee; }
.btn.gold::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(90deg, transparent, #8b7bff44, transparent);
  transform: skewX(-18deg); animation: parilti 5s ease-in-out infinite;
}
@keyframes parilti { 0%, 62% { left: -60%; } 88%, 100% { left: 130%; } }
.btn.hayalet { background: transparent; border-color: var(--çizgi2); }
.btn.sm { padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.btn.blok { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn.gold::after { animation: none; } }

/* ── kahraman ── */
.hero { padding: 96px 0 40px; text-align: center; position: relative; }
/* Başlığın arkasında yumuşak bir ışık havuzu: metin zeminden ayrılsın,
   sayfa "siyah dikdörtgene yazı yazılmış" gibi durmasın. */
.hero::before {
  content: ""; position: absolute; inset: -40px -20% auto -20%; height: 620px; z-index: -1;
  background: radial-gradient(42% 52% at 50% 34%, #8b7bff26, transparent 72%);
  pointer-events: none;
}
.göz {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650;
  color: var(--mor2); background: #ffffff08; border: 1px solid var(--çizgi2);
  padding: 7px 16px; border-radius: 30px; backdrop-filter: blur(8px);
}
.göz b { color: var(--cam); font-size: 9px; animation: nabiz 1.8s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .25; } }
.hero h1 {
  font-size: clamp(42px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -.045em;
  font-weight: 700; margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--mor2) 0%, var(--cam) 55%, var(--mercan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 19.5px; line-height: 1.62; color: var(--sönük); max-width: 700px; margin: 0 auto 34px; }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.not { font-size: 13.5px; color: var(--sönük2); margin-top: 18px; }

/* ── ürün görseli ── */
.vitrin { margin: 66px auto 0; max-width: 1080px; position: relative; }
.vitrin::after {
  content: ""; position: absolute; inset: auto 4% -50px 4%; height: 110px;
  background: radial-gradient(60% 100% at 50% 0%, #8b7bff4d, transparent 70%); filter: blur(34px);
}
.çerçeve {
  border: 1px solid var(--çizgi2); border-radius: 20px; overflow: hidden;
  background: var(--kart); box-shadow: var(--gölge);
  transform: perspective(1600px) rotateX(6deg); transform-origin: top center;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.vitrin:hover .çerçeve { transform: perspective(1600px) rotateX(0deg); }
.çerçeve .bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; background: #0b0a16; border-bottom: 1px solid var(--çizgi); }
.çerçeve .bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2740; display: block; }
.çerçeve .bar i:first-child { background: #ff7a5966; }
.çerçeve .bar i:nth-child(2) { background: #ffd27a55; }
.çerçeve .bar i:nth-child(3) { background: #3fe0d055; }
.çerçeve .bar span { margin-left: 10px; font-size: 12px; color: var(--sönük2); }
.çerçeve img { width: 100%; display: block; }

/* UÇUŞAN ROZETLER: ekran görüntüsünün kenarına iliştirilmiş cam kartlar.
   Ürünün ne yaptığını tek bakışta anlatıyorlar. Küçük ekranda gizleniyorlar —
   görselin üstünü kapatmasınlar. */
.rozetler { position: absolute; inset: 0; pointer-events: none; }
.uçan {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: #12101fd9; border: 1px solid var(--çizgi2); border-radius: 14px;
  padding: 11px 15px; font-size: 13.5px; backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -22px #000; animation: suzul 7s ease-in-out infinite alternate;
}
.uçan b { font-weight: 650; }
.uçan small { display: block; color: var(--sönük2); font-size: 11.5px; }
.uçan .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--cam); box-shadow: 0 0 12px var(--cam); flex: none; }
.uçan.sol { left: -46px; top: 26%; }
.uçan.sağ { right: -40px; top: 58%; animation-delay: -3.5s; }
@keyframes suzul { to { transform: translateY(-14px); } }
@media (max-width: 1120px) { .uçan { display: none; } }
@media (prefers-reduced-motion: reduce) { .uçan { animation: none; } }

.sayılar { display: flex; gap: 58px; justify-content: center; flex-wrap: wrap; margin-top: 76px; }
.sayı b {
  display: block; font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(120deg, #ffffff, var(--mor2) 70%, var(--cam));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sayı span { font-size: 13.5px; color: var(--sönük2); }

/* ── bölümler ── */
section { padding: 104px 0; position: relative; }
section + section { border-top: 1px solid #ffffff0a; }
.bölüm-baş { max-width: 740px; margin-bottom: 52px; }
.bölüm-baş.orta { margin-left: auto; margin-right: auto; text-align: center; }
.etiket {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--mor2), var(--cam));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2.sec { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; margin-bottom: 14px; }
h2.sec em { font-style: normal; background: linear-gradient(100deg, var(--mor2), var(--cam)); -webkit-background-clip: text; background-clip: text; color: transparent; }
p.sub { color: var(--sönük); font-size: 17px; }

.kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .kartlar { grid-template-columns: 1fr; } }
.kart {
  background: linear-gradient(180deg, #ffffff0b, #ffffff04);
  border: 1px solid var(--çizgi); border-radius: 18px; padding: 30px;
  position: relative; overflow: hidden; backdrop-filter: blur(10px);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.kart:hover { border-color: var(--çizgi2); transform: translateY(-5px); box-shadow: 0 30px 60px -34px #000; }
.kart::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mor2), var(--cam), transparent);
  opacity: 0; transition: opacity .3s;
}
.kart:hover::before { opacity: .85; }
.kart .ikon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 21px; margin-bottom: 18px;
  background: linear-gradient(135deg, #8b7bff2e, #3fe0d012); border: 1px solid #ffffff1a;
}
.kart h3 { font-size: 18px; font-weight: 660; margin-bottom: 10px; letter-spacing: -.015em; }
.kart p { color: var(--sönük); font-size: 15px; }
.kart .adım { position: absolute; top: 26px; right: 28px; font-size: 13px; color: var(--sönük2); font-variant-numeric: tabular-nums; }
/* Yer tutucu örnekleri: cümlenin içinde değil altında dursunlar (çeviri
   metni parçalara bölmesin diye ayrıldılar). */
.kod-satir { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   OYUN VİTRİNİ — "şu oyunlar"
   İki kayan ikon şeridi (dikkat çeken kısım) + altında aranabilir tam ızgara
   (iddiayı kanıtlayan kısım). İkonlar sitenin kendi sunucusundan geliyor.
   ============================================================ */
.serit-kutu { position: relative; margin: 0 -24px 46px; overflow: hidden; }
/* Kenarlarda erime: şerit ekranın dışına doğru sönsün, kesilmiş görünmesin */
.serit-kutu::before, .serit-kutu::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.serit-kutu::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.serit-kutu::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.serit { display: flex; gap: 14px; width: max-content; padding: 7px 0; animation: kay 64s linear infinite; }
.serit.ters { animation-direction: reverse; animation-duration: 78s; }
@keyframes kay { to { transform: translateX(-50%); } }
.serit-kutu:hover .serit { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .serit { animation: none; } }
.serit-oyun {
  display: flex; align-items: center; gap: 11px; flex: none;
  background: #ffffff08; border: 1px solid var(--çizgi); border-radius: 14px;
  padding: 11px 18px 11px 12px; font-size: 14.5px; font-weight: 560; white-space: nowrap;
}
.serit-oyun img { width: 30px; height: 30px; border-radius: 8px; display: block; }

.oyun-arama { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
/* [type=text] açıkça yazılı: aşağıdaki genel form kuralı (input[type=text]
   { width:100% }) aynı özgüllükte ve DAHA SONRA geldiği için kutuyu sayfa
   genişliğine yayıyordu. */
.oyun-arama input[type=text] {
  flex: 0 0 auto; width: min(360px, 100%); background: #ffffff08;
  border: 1px solid var(--çizgi2); border-radius: 12px;
  padding: 12px 16px; color: var(--metin); font: inherit; font-size: 15px;
}
.oyun-arama input[type=text]:focus { outline: none; border-color: #8b7bff88; box-shadow: 0 0 0 3px #8b7bff22; }
.oyun-arama .sayaç { color: var(--sönük2); font-size: 14px; }

.oyun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.oyun-kart {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  min-width: 0;
  background: linear-gradient(180deg, #ffffff0a, #ffffff03);
  border: 1px solid var(--çizgi); border-radius: 15px; position: relative; overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.oyun-kart:hover { transform: translateY(-3px); border-color: var(--çizgi2); box-shadow: 0 22px 44px -28px #000; }
/* İkonun rengi karta sızsın: her oyun kendi kimliğini getirsin, kartlar
   tekdüze bir liste gibi durmasın. */
.oyun-kart .hale {
  position: absolute; inset: -30px auto auto -30px; width: 110px; height: 110px;
  filter: blur(26px); opacity: .5; transform: scale(1.6); pointer-events: none;
}
.oyun-kart img.ikon { width: 38px; height: 38px; border-radius: 10px; flex: none; position: relative; }
/* Metin sütunu daralabilmeli (min-width:0), yoksa uzun oyun adları rozeti
   iterek "7 request types"i üç satıra bölüyordu. */
.oyun-kart .metin { position: relative; flex: 1; min-width: 0; }
.oyun-kart .ad { font-size: 14.5px; font-weight: 570; letter-spacing: -.012em; line-height: 1.25; }
.oyun-kart .tip { font-size: 12px; color: var(--sönük2); white-space: nowrap; }
.oyun-kart .rank-im {
  flex: none; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--cam); border: 1px solid #3fe0d033; border-radius: 20px; padding: 2px 7px;
  position: relative; align-self: flex-start; margin-top: 2px;
}
.oyun-yok { color: var(--sönük2); text-align: center; padding: 26px; grid-column: 1 / -1; }

/* ============================================================
   KİŞİSELLEŞTİRME VİTRİNİ — "full customizable"
   Paneldeki gerçek kademe armaları burada da çiziliyor: satıcı daha satın
   almadan neyi ayarlayacağını görüyor.
   ============================================================ */
.ozel-duzen { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px) { .ozel-duzen { grid-template-columns: 1fr; } }
.ozel-panel {
  background: linear-gradient(180deg, #ffffff0c, #ffffff04); border: 1px solid var(--çizgi);
  border-radius: 20px; padding: 24px; backdrop-filter: blur(10px);
}
.ozel-panel h3 { font-size: 16px; font-weight: 640; margin-bottom: 4px; letter-spacing: -.012em; }
.ozel-panel .alt-not { color: var(--sönük2); font-size: 13.5px; margin-bottom: 18px; }
.rank-sira { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.rank-hücre {
  border: 1px solid var(--çizgi); border-radius: 13px; padding: 12px 10px; text-align: center;
  background: #ffffff06; cursor: pointer; transition: opacity .2s, border-color .2s, transform .2s;
}
.rank-hücre:hover { transform: translateY(-2px); border-color: var(--çizgi2); }
/* KAPALI KADEME: panelde olduğu gibi sönüyor. "Bu rankı almıyorum" demek. */
.rank-hücre.kapalı { opacity: .32; }
.rank-hücre.kapalı .rank-fiyat { text-decoration: line-through; }
.rank-hücre .arma { display: block; margin: 0 auto 7px; }
.rank-hücre .rank-ad { font-size: 12.5px; font-weight: 570; }
.rank-hücre .rank-fiyat { font-size: 13.5px; color: var(--cam); font-weight: 650; margin-top: 3px; }
.rank-ipucu { color: var(--sönük2); font-size: 12.5px; margin-top: 14px; }

.ornek-satır { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--çizgi); font-size: 14.5px; }
.ornek-satır:last-child { border-bottom: none; }
.ornek-satır span { color: var(--sönük); }
.ornek-satır b { font-weight: 620; }
.ornek-toplam { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--çizgi2); }
.ornek-toplam b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; background: linear-gradient(100deg, #fff, var(--cam)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── fiyat ── */
.planlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 920px) { .planlar { grid-template-columns: 1fr; } }
.plan {
  background: linear-gradient(180deg, #ffffff0c, #ffffff04);
  border: 1px solid var(--çizgi); border-radius: 22px; padding: 34px 30px 30px;
  position: relative; display: flex; flex-direction: column; backdrop-filter: blur(10px);
  transition: transform .25s, box-shadow .25s;
}
.plan:hover { transform: translateY(-4px); }
.plan.öne {
  border-color: #8b7bff55;
  box-shadow: 0 0 0 1px #8b7bff22, 0 44px 90px -40px #8b7bff77;
}
.plan .rozet {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(100deg, var(--mor2), var(--cam)); color: #0a0913;
  font-size: 11px; font-weight: 760; letter-spacing: .07em; padding: 5px 15px; border-radius: 30px;
  box-shadow: 0 10px 24px -10px #8b7bffaa;
}
.plan h3 { font-size: 13px; color: var(--sönük); text-transform: uppercase; letter-spacing: .13em; font-weight: 680; margin-bottom: 16px; }
.plan .tutar { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan .tutar b { font-size: 52px; font-weight: 700; letter-spacing: -.045em; }
.plan .tutar span { color: var(--sönük2); font-size: 15px; }
.plan .hız { color: var(--cam); font-size: 14.5px; font-weight: 620; margin-bottom: 22px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan li { padding: 8px 0 8px 28px; position: relative; color: var(--sönük); font-size: 15px; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--cam); font-weight: 700; font-size: 13px; }
.plan li b { color: var(--metin); font-weight: 650; }
.plan.tek { max-width: 470px; margin: 0 auto; grid-column: 1 / -1; }
.plan-not { margin-top: 14px; text-align: center; color: var(--sönük2); font-size: 13px; }

/* ── SSS ── */
.sss { max-width: 820px; }
details { border-bottom: 1px solid var(--çizgi); padding: 22px 0; }
details summary { cursor: pointer; font-weight: 620; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--mor2); font-size: 24px; font-weight: 300; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { color: var(--sönük); margin-top: 12px; font-size: 15.5px; }

/* ── kapanış ── */
.kapanış {
  text-align: center; padding: 86px 30px; border-radius: 28px;
  background: linear-gradient(180deg, #ffffff0d, #ffffff03);
  border: 1px solid var(--çizgi2); position: relative; overflow: hidden;
}
.kapanış::before {
  content: ""; position: absolute; inset: -60% -10% auto -10%; height: 380px;
  background: radial-gradient(50% 100% at 50% 60%, #8b7bff3a, transparent 70%);
}
.kapanış h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.035em; margin-bottom: 14px; position: relative; }
.kapanış p { color: var(--sönük); margin-bottom: 30px; position: relative; }
.kapanış .btn { position: relative; }

/* ── formlar / hesap ── */
.kutu {
  background: linear-gradient(180deg, #ffffff0c, #ffffff04);
  border: 1px solid var(--çizgi); border-radius: 22px; padding: 34px;
  max-width: 450px; margin: 76px auto; box-shadow: var(--gölge); backdrop-filter: blur(10px);
}
.kutu.geniş { max-width: var(--max); margin: 22px auto; }
.kutu h1 { font-size: 23px; letter-spacing: -.025em; margin-bottom: 7px; }
.kutu .alt { color: var(--sönük); font-size: 14.5px; margin-bottom: 22px; }
label { display: block; font-size: 13px; color: var(--sönük); margin: 16px 0 6px; font-weight: 500; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; background: #07060fb0; border: 1px solid var(--çizgi2); border-radius: 12px;
  padding: 13px 15px; color: var(--metin); font: inherit; font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: #8b7bff99; box-shadow: 0 0 0 3px #8b7bff26; }
input::placeholder { color: #55527a; }
.hata { color: var(--kırmızı); font-size: 14px; margin-top: 14px; min-height: 20px; }
.iyi { color: var(--yeşil); }
.satır { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dim { color: var(--sönük); font-size: 14px; }
.rozet-durum { font-size: 11.5px; font-weight: 680; letter-spacing: .07em; padding: 5px 13px; border-radius: 30px; border: 1px solid var(--çizgi2); color: var(--sönük); }
.rozet-durum.aktif { background: #35d3991f; color: var(--yeşil); border-color: #35d39955; }
.rozet-durum.pasif { color: var(--kırmızı); border-color: #ff7a9055; background: #ff7a901a; }

/* ── kurulum sihirbazı ── */
.adımlar { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.adım-çip {
  display: flex; align-items: center; gap: 11px; padding: 12px 17px; border-radius: 14px;
  border: 1px solid var(--çizgi); background: #ffffff06; font-size: 14px; color: var(--sönük); flex: 1; min-width: 210px;
  transition: border-color .25s, background .25s, color .25s;
}
.adım-çip .no {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: #221f38; color: var(--sönük2); flex: none;
}
.adım-çip.aktif { border-color: #8b7bff66; background: #8b7bff12; color: var(--metin); }
.adım-çip.aktif .no { background: linear-gradient(135deg, var(--mor2), var(--cam)); color: #0a0913; }
.adım-çip.bitti { border-color: #35d39944; color: var(--metin); }
.adım-çip.bitti .no { background: #35d39926; color: var(--yeşil); }
.adım-çip.bitti .no::after { content: "✓"; }
.adım-çip.bitti .no b { display: none; }

.ipucu-kutu {
  background: #07060fa0; border: 1px solid var(--çizgi); border-radius: 14px;
  padding: 17px 19px; margin: 16px 0; font-size: 14.5px; color: var(--sönük);
}
.ipucu-kutu ol { margin: 10px 0 0 18px; padding: 0; }
.ipucu-kutu li { margin: 7px 0; }
.ipucu-kutu b { color: var(--metin); font-weight: 620; }

/* eşleştirme kodu */
.kod-kutu {
  margin-top: 16px; padding: 20px; border-radius: 15px; text-align: center;
  background: #07060fa0; border: 1px dashed #8b7bff66;
}
.kod-kutu span:first-child {
  display: block; font: 700 32px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .18em; color: var(--mor2);
}
.kod-kutu .dim { display: block; margin-top: 7px; font-size: 13px; }

table.olaylar { width: 100%; border-collapse: collapse; font-size: 14px; }
table.olaylar td { padding: 9px 10px; border-bottom: 1px solid var(--çizgi); color: var(--sönük); }
table.olaylar td:first-child { white-space: nowrap; width: 170px; color: var(--sönük2); }

footer { border-top: 1px solid #ffffff0a; padding: 46px 0; color: var(--sönük2); font-size: 14px; margin-top: 40px; }
footer .wrap { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
footer .wrap .sağ { margin-left: auto; }
footer b { color: var(--mor2); font-weight: 600; }

/* ── destek sohbeti ── */
.destek-dugme {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #ffffff, #ddd8f5); color: #0a0913;
  border: none; border-radius: 30px; padding: 13px 20px; font: inherit; font-weight: 650; font-size: 14.5px;
  cursor: pointer; box-shadow: 0 18px 44px -16px #b7acffcc; transition: transform .18s, box-shadow .2s;
}
.destek-dugme:hover { transform: translateY(-2px); box-shadow: 0 24px 54px -18px #b7acffee; }
.destek-dugme.acik .destek-etiket { display: none; }
.destek-panel {
  position: fixed; right: 22px; bottom: 84px; z-index: 60; width: min(380px, calc(100vw - 44px));
  background: #12101fee; border: 1px solid var(--çizgi2);
  border-radius: 20px; box-shadow: var(--gölge); display: flex; flex-direction: column; overflow: hidden;
  backdrop-filter: blur(18px); animation: yukselt .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes yukselt { from { opacity: 0; transform: translateY(12px); } }
.destek-baslik {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--çizgi); font-weight: 620;
}
.destek-kapat { background: none; border: none; color: var(--sönük); font-size: 22px; cursor: pointer; line-height: 1; }
.destek-govde { padding: 14px 16px; max-height: 340px; min-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.destek-bos { color: var(--sönük2); font-size: 14px; }
.destek-mesaj { max-width: 86%; }
.destek-mesaj.musteri { align-self: flex-end; text-align: right; }
.destek-metin {
  display: inline-block; padding: 9px 13px; border-radius: 14px; font-size: 14.5px;
  background: #221f38; color: var(--metin); text-align: left; white-space: pre-wrap; word-break: break-word;
}
.destek-mesaj.musteri .destek-metin { background: linear-gradient(135deg, #8b7bff, #6b5ce0); color: #f7f5ff; }
.destek-zaman { font-size: 11px; color: var(--sönük2); margin-top: 3px; }
.destek-alt { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--çizgi); align-items: flex-end; }
.destek-giris {
  flex: 1; resize: none; background: #07060fb0; border: 1px solid var(--çizgi2); border-radius: 12px;
  padding: 10px 12px; color: var(--metin); font: inherit; font-size: 14.5px;
}
.destek-giris:focus { outline: none; border-color: #8b7bff99; }
.destek-ipucu { padding: 0 16px 14px; font-size: 12.5px; color: var(--sönük2); }
.destek-ipucu b { color: var(--mor2); }

/* ── yönetici ekranı ── */
.admin-duzen { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .admin-duzen { grid-template-columns: 1fr; } }
.konusma-liste { max-height: 70vh; overflow-y: auto; }
.konusma {
  padding: 12px 14px; border-radius: 13px; cursor: pointer; border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 3px;
}
.konusma:hover { background: #ffffff08; }
.konusma.sec { background: #ffffff0d; border-color: var(--çizgi2); }
.konusma .ust { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.konusma .son { color: var(--sönük2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konusma .yeni { background: var(--mor); color: #0a0913; border-radius: 20px; padding: 0 8px; font-size: 11px; font-weight: 700; }

/* ── yardımcılar (satır içi stil yerine) ── */
.gizli { display: none; }
.w100 { width: 100%; }
.center { text-align: center; }
.ml-auto { margin-left: auto; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-28 { margin-top: 28px; }
.mt-40 { margin-top: 40px; }
.mb-10 { margin-bottom: 10px; }
.pb-60 { padding-bottom: 60px; }
.h-alt { font-size: 19px; letter-spacing: -.015em; }

/* ── DENEME vs ABONELİK KIYASI ─────────────────────────────────────────
   Kullanıcı (2026-09-14): "kullanıcı trial ile aboneliğin farkını çok net
   hissetmeli... üyelikte 0 ms delay, sınırsız offer gibi iyice
   ballandırmalıyız." Abone sütunu görsel olarak KAZANIYOR: deneme sütunu
   sönük, abone sütunu vurgulu. Rakamlar sunucudan geliyor (plans.js). */
.kiyas {
  max-width: 760px; margin: 42px auto 0; text-align: center;
}
.kiyas-bas {
  font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 10px; color: var(--metin);
}
.kiyas-alt {
  color: var(--sönük); font-size: 15px; line-height: 1.65; margin: 0 auto 26px; max-width: 620px;
}
.kiyas-tablo {
  border: 1px solid var(--çizgi); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff08, #ffffff03); text-align: left;
}
.kiyas-satir {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; padding: 13px 20px; border-top: 1px solid var(--çizgi);
  align-items: center; font-size: 14.5px;
}
.kiyas-satir:first-child { border-top: 0; }
.kiyas-bas-satir {
  font-size: 11.5px; font-weight: 720; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sönük2); background: #ffffff06; white-space: nowrap;
}
.kiyas-bas-satir .vurgu {
  color: var(--mor2);
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, var(--mor2), var(--cam));
  -webkit-background-clip: text; background-clip: text;
}
.kiyas-ad { color: var(--sönük); }
/* Deneme sütunu bilerek sönük: göz doğrudan sağ sütuna gidiyor. */
.kiyas-deneme { color: var(--sönük2); }
.kiyas-abone { color: var(--metin); font-weight: 680; }
.kiyas-not { color: var(--sönük2); font-size: 13.5px; margin: 16px 0 0; }
@media (max-width: 620px) {
  .kiyas-satir { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 11px 14px; font-size: 13.5px; }
}


/* ═══ ŞİMŞEK — DERİNLİK VE HALE (2026-09-14) ════════════════════════════
   Kullanıcı: "güzel ama çok sade ve klişe." Tek düz şekil yerine üç katman:
   arkada yavaşça dönen renkli bir hale, altında koyu bir gölge kopyası
   (derinlik), üstte gradyanlı yıldırım. Çakma/süpürme animasyonları duruyor. */
.brand i.simsek { overflow: visible; }
.brand i.simsek::before {
  content: ""; position: absolute; inset: -9px -11px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #8b7bff00, #8b7bff66, #3fe0d066, #ff7a5944, #8b7bff00);
  filter: blur(9px); opacity: .75; animation: haleDon 9s linear infinite; will-change: transform;
}
@keyframes haleDon { to { transform: rotate(360deg); } }
.brand i.simsek svg { filter: drop-shadow(0 0 6px #8b7bff88) drop-shadow(2px 3px 0 #2a2350); }
.brand:hover i.simsek::before { opacity: 1; animation-duration: 2.5s; }
.brand { text-shadow: 0 0 22px #8b7bff33; }
.brand span { background: linear-gradient(90deg, #b7acff, #3fe0d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .brand i.simsek::before { animation: none; } }

/* ═══ CANLI DEMO ═══════════════════════════════════════════════════════ */
.canli-nokta { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--yeşil); box-shadow: 0 0 10px var(--yeşil); animation: nabiz 1.6s ease-in-out infinite; }
.canli-demo {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; min-height: 360px; text-align: left;
  background: linear-gradient(180deg, #0f0e1c, #0b0a16);
}
.demo-sol { padding: 20px; border-right: 1px solid var(--çizgi); display: flex; flex-direction: column; gap: 10px; }
.demo-akis { display: flex; flex-direction: column; gap: 10px; }
.demo-kart {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--çizgi); background: #ffffff05;
  opacity: 0; transform: translateY(-10px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
}
.demo-kart.geldi { opacity: 1; transform: none; }
.demo-kart.gonderildi { border-color: #35d39966; box-shadow: 0 0 0 1px #35d39933, 0 14px 40px -24px #35d399aa; }
.demo-kart:not(:first-child) { opacity: .45; }
.demo-ikon { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: none; background: #1a1830; }
.demo-orta { flex: 1; min-width: 0; }
.demo-orta b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-orta small { color: var(--sönük2); font-size: 12px; }
.demo-fiyat { font-weight: 700; color: var(--mor2); text-shadow: 0 0 16px #8b7bff66; flex: none; }
.demo-sag { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.demo-zaman { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.demo-zaman .etiket { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sönük2); }
.demo-zaman b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #ddd7ff, #3fe0d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.demo-adimlar { display: flex; flex-direction: column; gap: 8px; }
.demo-adim { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--sönük2); transition: color .3s; }
.demo-adim em { font-style: normal; color: var(--metin); }
.demo-adim small { font-size: 11.5px; color: var(--sönük2); }
.demo-adim i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--çizgi2); display: block; transition: background .3s, border-color .3s, box-shadow .3s; }
.demo-adim.simdi i { border-color: var(--mor2); box-shadow: 0 0 0 4px #8b7bff33; }
.demo-adim.oldu { color: var(--metin); }
.demo-adim.oldu i { background: var(--yeşil); border-color: var(--yeşil); box-shadow: 0 0 12px #35d39988; }
.demo-sohbet { margin-top: auto; min-height: 74px; display: flex; flex-direction: column; justify-content: flex-end; }
.demo-balon {
  align-self: flex-end; max-width: 100%; padding: 10px 13px; border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, #8b7bff33, #3fe0d022); border: 1px solid #8b7bff55; font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.demo-balon.geldi { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .canli-demo { grid-template-columns: 1fr; }
  .demo-sol { border-right: none; border-bottom: 1px solid var(--çizgi); }
}
/* "Offer" ile "Sniper" arasına flex boşluğu girmesin: boşluk yalnız işaretle yazı arasında. */
.brand { gap: 0; }
.brand i.simsek { margin-right: 10px; }
/* Demo ikonu, çerçevedeki genel "img { width:100% }" kuralından etkilenmesin. */
.çerçeve .demo-ikon { width: 34px; height: 34px; }
/* Uçan rozetler canlı demonun üstüne binmesin: köşelere. */
.uçan.sol { top: 82%; }
.uçan.sağ { top: 6%; }
/* Sağ rozet sayacın üstüne binmesin: çerçevenin üst kenarına otursun. */
.uçan.sağ { top: -34px; right: -28px; }

/* ═══ GOOGLE İLE GİRİŞ (2026-09-15) ═══════════════════════════════════ */
.ayrac { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--sönük2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.ayrac::before, .ayrac::after { content: ""; flex: 1; height: 1px; background: var(--çizgi2); }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn.google svg { flex: none; }

/* ═══ PANEL VİTRİNİ (2026-09-15) ═══════════════════════════════════════
   Uygulama panelinin (dashboard/app.css) küçültülmüş kopyası. Aynı renkler,
   aynı yerleşim: sol durum + sayaçlar, ortada istek akışı, sağda sohbet. */
.pv-vitrin { margin-top: 0; max-width: 1120px; }
.pv-vitrin .çerçeve { transform: none; }
.pv { background: linear-gradient(180deg, #0f0e1c, #0b0a16); text-align: left; font-size: 13.5px; }
.pv-oyunlar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--çizgi); overflow-x: auto; scrollbar-width: none; }
.pv-oyunlar::-webkit-scrollbar { display: none; }
.pv-oyun {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 7px 12px 7px 8px; border-radius: 10px;
  background: #ffffff06; border: 1px solid var(--çizgi); color: var(--sönük); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.pv-oyun img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.pv-oyun:hover { color: var(--metin); border-color: var(--çizgi2); }
.pv-oyun.sec { color: var(--metin); border-color: #8b7bff88; background: #8b7bff1a; box-shadow: 0 0 0 3px #8b7bff22; }
.pv-govde { display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; min-height: 420px; }
.pv-yan { padding: 16px; border-right: 1px solid var(--çizgi); display: flex; flex-direction: column; gap: 12px; }
.pv-durum { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #ffffff05; border: 1px solid var(--çizgi); }
.pv-durum b { display: block; font-size: 15px; }
.pv-durum p { color: var(--sönük); font-size: 12.5px; margin-top: 2px; }
.pv-isik { width: 12px; height: 12px; border-radius: 50%; background: var(--yeşil); box-shadow: 0 0 14px var(--yeşil); flex: none; animation: nabiz 2.2s ease-in-out infinite; }
.pv-mod { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #ffffff05; border: 1px solid var(--çizgi); transition: border-color .3s, background .3s; }
.pv-mod.canli { border-color: #35d39955; background: #35d3990d; }
.pv-mod b { display: block; font-size: 13.5px; }
.pv-mod p { color: var(--sönük); font-size: 12px; margin-top: 2px; }
.pv-ana {
  margin-left: auto; flex: none; border: none; border-radius: 10px; padding: 8px 13px;
  background: linear-gradient(135deg, #b7acff, #6b5ce0); color: #0a0913; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pv-mod.canli .pv-ana { background: #17152a; color: var(--sönük); border: 1px solid var(--çizgi2); font-weight: 500; }
.pv-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-sayilar div { background: #ffffff05; border: 1px solid var(--çizgi); border-radius: 12px; padding: 10px 8px; text-align: center; }
.pv-sayilar b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv-sayilar span { font-size: 11px; color: var(--sönük2); }
.pv-bosum {
  background: #17152a; color: var(--sönük); border: 1px solid var(--çizgi2); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 13px; cursor: pointer; transition: all .25s;
}
.pv-bosum.acik { color: #ffe7a3; border-color: #ffd27a88; background: #ffd27a14; box-shadow: 0 0 22px -6px #ffd27a99; }
.pv-not { font-size: 12px; color: var(--sönük2); margin-top: -4px; }
.pv-orta { padding: 16px; min-width: 0; }
.pv h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--sönük2); margin-bottom: 10px; font-weight: 600; }
.pv-akis { display: flex; flex-direction: column; gap: 8px; }
.pv-kart {
  display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--çizgi); background: #ffffff04;
  opacity: 0; transform: translateY(-12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, filter .3s;
}
.pv-kart.geldi { opacity: 1; transform: none; }
.pv-kart.gitti { border-color: #35d39955; box-shadow: 0 0 0 1px #35d39922, 0 14px 36px -24px #35d399aa; }
.pv-kart.pv-solgun { opacity: .35; filter: saturate(.4); }
.pv-ikon { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; background: #1a1830; }
.pv-kart-orta { flex: 1; min-width: 0; }
.pv-kart-ust { display: flex; align-items: baseline; gap: 10px; }
.pv-kart-ust > b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-fiyat { color: var(--sönük2); font-weight: 700; font-size: 15px; transition: color .3s; }
.pv-fiyat.var { color: var(--mor2); text-shadow: 0 0 16px #8b7bff66; }
.pv-kart-alt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--sönük2); margin-top: 3px; }
.pv-teslim:empty { display: none; }
.pv-teslim::before { content: "⏱ "; }
.pv-rozet { margin-left: auto; font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--çizgi2); transition: all .3s; }
.pv-rozet.yeni { color: var(--mor2); border-color: #8b7bff66; }
.pv-rozet.fiyat { color: var(--altın2); border-color: #ddd7ff55; }
.pv-rozet.gitti { color: var(--yeşil); border-color: #35d39966; background: #35d3991a; }
.pv-sag { padding: 16px; border-left: 1px solid var(--çizgi); min-width: 0; }
.pv-sohbet { display: flex; flex-direction: column; gap: 10px; }
.pv-balon {
  padding: 10px 12px; border-radius: 14px 14px 4px 14px; font-size: 12.5px; line-height: 1.45;
  background: linear-gradient(135deg, #8b7bff33, #3fe0d022); border: 1px solid #8b7bff55;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.pv-balon.geldi { opacity: 1; transform: none; }
.pv-balon small { display: block; color: var(--sönük2); font-size: 11px; margin-bottom: 4px; }
.pv-balon:not(:first-child) { opacity: .5; }
.pv-notlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.pv-notlar div { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--çizgi); background: #ffffff04; }
.pv-notlar b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.pv-notlar span { color: var(--sönük); font-size: 13.5px; }
@media (max-width: 960px) {
  .pv-govde { grid-template-columns: 1fr; }
  .pv-yan, .pv-sag { border: none; border-bottom: 1px solid var(--çizgi); }
  .pv-notlar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .pv-notlar { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pv-isik { animation: none; } }

/* ═══ PANEL VİTRİNİ — SABİT YÜKSEKLİK (2026-09-15, kullanıcı: "sayfa yukarı
   aşağı gidiyormuş gibi buglanıyor, takılmalar; sonuna doğru düzeliyor").
   Sebep: kart eklenip silindikçe ve mesaj harf harf yazıldıkça vitrin
   büyüyüp küçülüyor, altındaki tüm sayfa kayıyordu (tarayıcının kaydırma
   çıpası da buna karşı düzeltme yapıp zıplatıyordu). Artık her kutu sabit
   boyda, taşan kısım kesilir; vitrin dışarıya hiç düzen değişikliği taşımaz. */
.pv { overflow-anchor: none; contain: layout paint; }
.pv-govde { height: 470px; min-height: 0; }
.pv-yan, .pv-orta, .pv-sag { overflow: hidden; min-height: 0; }
.pv-akis { height: 292px; overflow: hidden; }
.pv-kart { flex: none; }
.pv-kart-alt { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.pv-sohbet { height: 260px; overflow: hidden; justify-content: flex-start; }
.pv-balon { flex: none; overflow: hidden; max-height: 92px; }
@media (max-width: 960px) {
  .pv-govde { height: auto; }
  .pv-akis { height: 292px; }
  .pv-sohbet { height: 200px; }
}

/* ═══ BAĞLI BİLGİSAYARLAR (2026-09-15) ═══════════════════════════════════ */
.cihaz-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--çizgi); font-size: 14px; }
.cihaz-satir b { font-weight: 600; }
.cihaz-satir .btn { margin-left: auto; }
/* Deneme kilidi: tam sürüm reklamı */
.kilit-not {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-top: 10px;
  background: linear-gradient(135deg, #8b7bff1f, #3fe0d012); border: 1px solid #8b7bff55; font-size: 13.5px; line-height: 1.45;
}
.kilit-not b { display: block; font-weight: 650; color: var(--metin); }
.kilit-not span { color: var(--sönük); }
.kilit-not a { color: var(--mor2); font-weight: 600; white-space: nowrap; }

/* ═══ HUKUK SAYFALARI (koşullar, gizlilik) ═══════════════════════════════ */
.hukuk { max-width: 780px; padding-top: 56px; padding-bottom: 80px; }
.hukuk h1 { font-size: 34px; letter-spacing: -.03em; margin-bottom: 8px; }
.hukuk h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -.015em; }
.hukuk p, .hukuk li { color: var(--sönük); font-size: 15.5px; line-height: 1.7; }
.hukuk ul { padding-left: 22px; }
.hukuk li { margin: 6px 0; }
.hukuk b { color: var(--metin); }