/* =========================================================
   SUNUCUHANE — Storage Server sayfası (gpu.css üzerine)
   ========================================================= */

/* ---------- Fotoğraflı üst bölüm ---------- */
.st-hero{position:relative;overflow:hidden;color:#fff;padding:56px 0 48px;background:#2e0120}
.st-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.st-hero:before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(61,2,41,.97) 0%,rgba(93,0,62,.90) 38%,rgba(93,0,62,.55) 68%,rgba(244,123,32,.25) 100%),
  linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(46,1,32,.85) 100%)}
.st-hero-in{position:relative;z-index:2}
.st-hero-t{max-width:640px}
.st-hero .crumb{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:22px}
.st-hero .crumb a{color:rgba(255,255,255,.85);text-decoration:none}
.st-hero h1{color:#fff;font-weight:800;font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.08;margin:18px 0 16px}
.st-hero h1 span{background:linear-gradient(90deg,#F47B20,#ffc83d);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-stats{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st-stats li{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.st-stats b{display:block;font-family:var(--f-head);font-size:24px;font-weight:800;color:#ffc83d;line-height:1.1}
.st-stats span{font-size:13.5px;color:rgba(255,255,255,.82)}

/* ---------- Paketler ---------- */
.st-pks{background:linear-gradient(180deg,#fff5ec 0%,#fdf2f7 60%,#fff 100%)}
.st-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.st-pk{--a:#F47B20;--b:#ffb347;--ink:#2b1400;position:relative;display:flex;flex-direction:column;border-radius:24px;background:#fff;overflow:hidden;
  box-shadow:0 18px 40px rgba(93,0,62,.12);border:1px solid rgba(93,0,62,.08);transition:transform .18s,box-shadow .18s}
.st-pk:hover{transform:translateY(-6px);box-shadow:0 28px 54px rgba(93,0,62,.2)}
.st-pk.c1{--a:#F47B20;--b:#ffc83d;--ink:#2b1400}
.st-pk.c2{--a:#e0287a;--b:#ff7a59;--ink:#fff}
.st-pk.c3{--a:#8a1263;--b:#d6336c;--ink:#fff}
.st-pk.c4{--a:#3d0229;--b:#7d1458;--ink:#fff}
.st-top{position:relative;padding:22px 22px 18px;color:var(--ink);background:radial-gradient(240px 160px at 100% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%),linear-gradient(140deg,var(--a),var(--b))}
.st-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:99px;padding:4px 10px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35)}
.st-pk.c1 .st-tag{background:rgba(255,255,255,.4);border-color:rgba(43,20,0,.15)}
.st-top h3{color:inherit;font-size:20px;font-weight:800;margin:12px 0 0;opacity:.9}
.st-cap{display:flex;align-items:flex-end;gap:8px;margin:2px 0 14px}
.st-cap b{font-family:var(--f-head);font-size:54px;font-weight:800;line-height:1;letter-spacing:-.03em}
.st-cap span{font-family:var(--f-head);font-size:22px;font-weight:800;line-height:1.05;padding-bottom:5px}
.st-cap small{display:block;font-family:-apple-system,system-ui,sans-serif;font-size:11.5px;font-weight:600;opacity:.8}
.st-vis{border-radius:12px;padding:0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
.st-bays{display:block;width:100%;height:auto}
.st-led{animation:stblink 2.2s ease-in-out infinite}
@keyframes stblink{0%,100%{opacity:1}50%{opacity:.25}}
.st-spec{list-style:none;margin:0;padding:8px 22px 0}
.st-spec li{display:flex;flex-direction:column;padding:9px 0;border-bottom:1px solid #f1e6ed}
.st-spec li:last-child{border-bottom:0}
.st-spec span{font-size:12.5px;color:#7a6a75}
.st-spec b{font-size:14.5px;color:#172033;font-weight:700;line-height:1.35}
.st-bot{margin-top:auto;padding:14px 22px 22px;border-top:1px dashed #ecdce6}
.st-price{font-family:var(--f-head);font-weight:800;font-size:15px;color:var(--a)}
.st-pk.c1 .st-price{color:#d4620e}
.st-price b{font-size:34px;letter-spacing:-.02em}
.st-price small{font-size:13px;font-weight:600;color:#7a6a75}
.st-bot .g-stock{margin:4px 0 0}
.st-buy{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-top:14px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;color:#fff;background:linear-gradient(140deg,var(--a),var(--b));box-shadow:0 10px 20px rgba(93,0,62,.18);transition:filter .15s}
.st-pk.c1 .st-buy{color:#2b1400}
.st-buy:hover{filter:brightness(1.08)}
.st-buy svg{width:18px;height:18px}
.st-pop{outline:3px solid #e0287a;outline-offset:-1px}
.st-rib{position:absolute;z-index:2;top:16px;right:-1px;background:#ffc83d;color:#2b1400;font-size:11.5px;font-weight:800;padding:5px 12px 5px 14px;border-radius:99px 0 0 99px;box-shadow:0 6px 14px rgba(0,0,0,.2)}

/* ---------- Kullanım alanları (fotoğraflı) ---------- */
.st-uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.st-use{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 18px 36px rgba(60,0,40,.18)}
.st-use img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.st-use:hover img{transform:scale(1.06)}
.st-use:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,2,41,0) 30%,rgba(61,2,41,.92) 78%)}
.st-use:nth-child(2):after{background:linear-gradient(180deg,rgba(138,18,99,0) 30%,rgba(138,18,99,.94) 78%)}
.st-use:nth-child(3):after{background:linear-gradient(180deg,rgba(214,51,108,0) 30%,rgba(190,40,95,.94) 78%)}
.st-use:nth-child(4):after{background:linear-gradient(180deg,rgba(244,123,32,0) 30%,rgba(214,98,14,.95) 78%)}
.st-use-t{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:20px;color:#fff}
.st-use-t span{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.03em;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);margin-bottom:10px}
.st-use-t b{display:block;font-family:var(--f-head);font-size:21px;font-weight:800;margin-bottom:4px}
.st-use-t p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88)}

/* ---------- Duyarlı ---------- */
@media (max-width:1180px){
  .st-cards,.st-uses{grid-template-columns:repeat(2,1fr)}
  .st-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .st-hero{padding:24px 0 28px}
  .st-hero:before{background:linear-gradient(180deg,rgba(61,2,41,.88) 0%,rgba(93,0,62,.92) 55%,rgba(46,1,32,.97) 100%)}
  .st-hero .crumb a{display:inline-block;padding:8px 0}
  .st-hero h1{font-size:2rem;margin:14px 0 12px}
  .st-stats{margin-top:26px;gap:10px}
  .st-stats li{padding:12px 14px}
  .st-stats b{font-size:20px}
  .st-stats span{font-size:12.5px}
  .st-cards,.st-uses{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0}
  .st-cards::-webkit-scrollbar,.st-uses::-webkit-scrollbar{display:none}
  .st-pk{min-width:0}
  .st-use{min-width:0;aspect-ratio:4/3}
  .st-pk:hover{transform:none}
  .st-cap b{font-size:46px}
}
@media (prefers-reduced-motion:reduce){
  .st-led{animation:none}
  .st-pk,.st-use img{transition:none}
  .st-pk:hover{transform:none}.st-use:hover img{transform:none}
}