/* ==========================================================
   Cloud.Net — Ürün sayfası temaları (VDS, oyunlar, hosting)
   ========================================================== */
.t-minecraft{--primary:#16a34a;--primary-2:#15803d;--primary-3:#14532d;--primary-soft:rgba(34,197,94,.14);--violet:#4ade80;--lilac:#86efac;--accent:#bbf7d0;--pink:#facc15;
  --grad:linear-gradient(135deg,#166534,#16a34a 50%,#4ade80);--grad-text:linear-gradient(100deg,#bbf7d0,#4ade80 40%,#facc15 70%,#bbf7d0)}
.t-fivem{--primary:#ea580c;--primary-2:#c2410c;--primary-3:#7c2d12;--primary-soft:rgba(249,115,22,.14);--violet:#fb923c;--lilac:#fdba74;--accent:#fed7aa;--pink:#f43f5e;
  --grad:linear-gradient(135deg,#9a3412,#ea580c 50%,#f43f5e);--grad-text:linear-gradient(100deg,#fed7aa,#fb923c 40%,#f43f5e 70%,#fed7aa)}
.t-rust{--primary:#c2410c;--primary-2:#9a3412;--primary-3:#7c2d12;--primary-soft:rgba(234,88,12,.15);--violet:#f97316;--lilac:#fdba74;--accent:#fed7aa;--pink:#dc2626;
  --grad:linear-gradient(135deg,#7c2d12,#c2410c 50%,#f97316);--grad-text:linear-gradient(100deg,#fed7aa,#f97316 45%,#dc2626 75%,#fed7aa)}
.t-unturned{--primary:#65a30d;--primary-2:#4d7c0f;--primary-3:#365314;--primary-soft:rgba(132,204,22,.14);--violet:#a3e635;--lilac:#bef264;--accent:#d9f99d;--pink:#facc15;
  --grad:linear-gradient(135deg,#365314,#65a30d 50%,#a3e635);--grad-text:linear-gradient(100deg,#d9f99d,#a3e635 45%,#facc15 75%,#d9f99d)}
.t-mta{--primary:#db2777;--primary-2:#be185d;--primary-3:#831843;--primary-soft:rgba(236,72,153,.14);--violet:#f472b6;--lilac:#f9a8d4;--accent:#fbcfe8;--pink:#f59e0b;
  --grad:linear-gradient(135deg,#831843,#db2777 50%,#f59e0b);--grad-text:linear-gradient(100deg,#fbcfe8,#f472b6 40%,#fbbf24 70%,#fbcfe8)}
.t-premium{--grad-text:linear-gradient(100deg,#fed7aa,#fb923c 35%,#a855f7 70%,#fed7aa)}
.t-minecraft .plan.featured{background:linear-gradient(180deg,#0f1f13,var(--bg-2)) padding-box,linear-gradient(160deg,#4ade80,#166534 40%,var(--border) 80%) border-box}
.t-fivem .plan.featured,.t-rust .plan.featured{background:linear-gradient(180deg,#1f120b,var(--bg-2)) padding-box,linear-gradient(160deg,#fb923c,#9a3412 40%,var(--border) 80%) border-box}
.t-unturned .plan.featured{background:linear-gradient(180deg,#151c0b,var(--bg-2)) padding-box,linear-gradient(160deg,#a3e635,#365314 40%,var(--border) 80%) border-box}
.t-mta .plan.featured{background:linear-gradient(180deg,#1f0b17,var(--bg-2)) padding-box,linear-gradient(160deg,#f472b6,#831843 40%,var(--border) 80%) border-box}

/* Ürün hero */
.prod-hero{position:relative;overflow:hidden;margin-top:-94px;padding:180px 0 110px;min-height:640px;display:flex;align-items:center}
.prod-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.prod-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,4,9,.82) 0%,rgba(6,4,9,.5) 42%,rgba(6,4,9,0) 75%);z-index:1;pointer-events:none}
.prod-hero::after{z-index:1;content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.prod-hero .container{position:relative;z-index:2;width:100%}
.prod-hero .ph-inner{max-width:720px}
.prod-hero .badge-line{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:40px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600;margin-bottom:22px}
.prod-hero .badge-line i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:12px}
.prod-hero h1{font-size:clamp(38px,6vw,76px);line-height:1.04;letter-spacing:-.045em;margin-bottom:20px;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.prod-hero p.lead{font-size:18px;color:#ddd5ee;max-width:600px;margin-bottom:30px;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.prod-hero .row{display:flex;gap:12px;flex-wrap:wrap}
.ph-chips{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.ph-chip{padding:12px 18px;border-radius:14px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);font-size:13px}
.ph-chip b{display:block;font-family:var(--font-head);font-size:20px;color:#fff}
.ph-chip span{color:#cfc6e4}
.t-minecraft .prod-hero h1{font-family:'Press Start 2P',var(--font-head);font-size:clamp(24px,4vw,48px);line-height:1.35;letter-spacing:0}

/* Plan bölümü başlığı (VDS alt grupları) */
.group-head{display:flex;align-items:center;gap:18px;margin:10px 0 26px}
.group-head .gh-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:var(--grad);color:#fff;box-shadow:0 12px 30px -10px var(--primary)}
.group-head h3{font-size:26px}
.group-head p{color:var(--text-2);font-size:14px}
.plan-group{margin-bottom:70px;scroll-margin-top:110px}
.plans.four{grid-template-columns:repeat(4,1fr)}
.plans.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}

/* Özellik ızgarası */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--border);border-radius:22px;padding:28px;transition:transform .5s var(--ease),border-color .3s,opacity .9s var(--ease)}
.feat:hover{transform:translateY(-6px);border-color:var(--border-2)}
.feat .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:20px;background:var(--primary-soft);color:var(--lilac);margin-bottom:18px;transition:transform .5s var(--ease)}
.feat:hover .ic{transform:scale(1.1) rotate(-8deg)}
.feat h5{font-size:18px;margin-bottom:8px}
.feat p{color:var(--text-2);font-size:14px}

/* Adımlar */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.steps::before{content:"";position:absolute;top:34px;left:16%;right:16%;height:2px;background:linear-gradient(90deg,var(--primary),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .3s}
.steps.in::before{transform:scaleX(1)}
.step{text-align:center;position:relative}
.step .num{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-size:24px;font-weight:800;background:var(--bg);border:2px solid var(--primary);color:#fff;box-shadow:0 0 0 8px var(--bg),0 0 30px -5px var(--primary);position:relative;z-index:1}
.step h5{font-size:18px;margin-bottom:6px}
.step p{color:var(--text-2);font-size:14px;max-width:280px;margin:0 auto}

/* Karşılaştırma tablosu */
.compare{overflow-x:auto;border:1px solid var(--border);border-radius:22px;background:var(--surface)}
.compare table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.compare th,.compare td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--border)}
.compare th{font-family:var(--font-head);font-size:15px;background:var(--bg-2)}
.compare tr:last-child td{border-bottom:0}
.compare td:first-child{color:var(--muted)}
.compare tbody tr{transition:background .2s}
.compare tbody tr:hover{background:var(--surface-2)}

/* Diğer oyunlar şeridi */
.other-games{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.og{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--border);transition:transform .4s var(--ease),border-color .3s,opacity .9s var(--ease)}
.og:hover{transform:translateY(-4px);border-color:var(--border-2)}
.og i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--lilac);font-size:18px}
.og b{display:block}
.og small{color:var(--muted)}

@media (max-width:1200px){.plans.four{grid-template-columns:1fr 1fr}.feat-grid{grid-template-columns:1fr 1fr}.other-games{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.plans.four,.plans.two{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
@media (max-width:700px){
  .prod-hero{padding:140px 0 80px;min-height:560px}
  .feat-grid,.steps,.other-games{grid-template-columns:1fr}
  .steps::before{display:none}
}