/* ============================================================================
   ANASAYFA — KURUMSAL / ACIK ZEMIN  (hc-*)
   ----------------------------------------------------------------------------
   Bu dosya YALNIZCA index.php tarafindan yuklenir. j-* (klasik acik) ve
   nx-* (eski koyu deneme) sistemlerine dokunmaz.

   Yonetim: acik zemin varsayilan, koyu tema html[data-theme="dark"] ile.
   Butun renkler --hc-* token uzerinden; koyu tema sadece token degerlerini
   degistirir, hicbir kural yazilmaz.

   Palet kurumsal: lacivert #0b2545 ana, #0b84d5 vurgu, yuzey #f6f8fb,
   kart #fff, kenarlik #e3e8ef. Golge yok, ayrim tonlu dolgu + ince
   kenarlik kullanilir (asagida "Kart gölgesi kullanılmaz").
   ========================================================================== */

.hc-page{
  /* yuzey */
  --hc-bg:#f6f8fb;
  --hc-bg-2:#eef2f7;
  --hc-card:#ffffff;
  --hc-card-2:#f8fafc;

  /* metin */
  --hc-ink:#0f172a;
  --hc-ink-2:#334155;
  --hc-ink-3:#5b6b80;
  --hc-ink-4:#64748b;

  /* kenarlik */
  --hc-line:#e3e8ef;
  --hc-line-2:#cbd5e1;

  /* marka — ana tema rengi #0b2545 kurumsal lacivert */
  --hc-navy:#0b2545;
  --hc-navy-2:#143a63;
  --hc-brand:#0b2545;
  --hc-brand-2:#1a4a7a;
  /* --hc-brand koyu temada ACIK bir maviye doner; dolgu olarak
     kullanildiginda uzerine beyazi yazi gelmez. Yazi rengi ayri
     bir token: acik zeminde beyaz, koyu zeminde koyu lacivert. */
  --hc-on-brand:#ffffff;
  --hc-tint:#eef3f9;
  --hc-ok:#0a5fa8;
  --hc-ok-tint:#e6f1fd;
  --hc-warn:#0a5fa8;

  --hc-r:10px;
  --hc-r-lg:14px;
  --hc-max:1200px;

  background:var(--hc-bg);
  color:var(--hc-ink);
}

/* Koyu tema — siyah / gri / beyaz + tek mavi vurgu.
   Değerler oyun sayfalarıyla (assets/css/games.css) ve
   oyun detay sayfalarıyla (custom.css --gm-*) birebir aynı. */
html[data-theme="dark"] .hc-page{
  --hc-bg:#05070b;
  --hc-bg-2:#080c13;
  --hc-card:#0c1119;
  --hc-card-2:#111826;
  --hc-ink:#eef3fa;
  --hc-ink-2:#c3cfe0;
  --hc-ink-3:#aab6c6;
  --hc-ink-4:#7c8899;
  --hc-line:rgba(255,255,255,.085);
  --hc-line-2:rgba(255,255,255,.16);
  --hc-navy:#05070b;
  --hc-navy-2:#0c1119;
  --hc-brand:#3d9bfd;
  --hc-brand-2:#7cc0ff;
  --hc-on-brand:#04101f;
  --hc-tint:#111826;
  --hc-ok:#7cc0ff;
  --hc-ok-tint:#12243a;
  --hc-warn:#3d9bfd;
}

.hc-wrap{ max-width:var(--hc-max); margin-inline:auto; padding-inline:20px; }
@media(min-width:768px){ .hc-wrap{ padding-inline:32px; } }

.hc-sec{ padding-block:clamp(46px,5.5vw,76px); }
.hc-sec--tight{ padding-block:clamp(28px,3.4vw,44px); }
.hc-sec--logos{ padding-top:14px; }
.hc-sec--white{ background:var(--hc-card); }
.hc-sec--tint{ background:var(--hc-bg-2); }

/* ---------------------------------------------------------------------------
   TIPOGRAFI
   ------------------------------------------------------------------------ */
.hc-h1{
  font-size:clamp(30px,4.3vw,48px);
  line-height:1.1; font-weight:700; letter-spacing:-.032em;
  color:var(--hc-ink);
}
.hc-h1 em{ font-style:normal; color:var(--hc-brand); }

.hc-h2{
  font-size:clamp(23px,2.9vw,33px);
  line-height:1.16; font-weight:700; letter-spacing:-.026em;
  color:var(--hc-ink);
}
.hc-h2 em{ font-style:normal; color:var(--hc-ink-3); }

.hc-h3{ font-size:17.5px; line-height:1.38; font-weight:650; letter-spacing:-.014em; color:var(--hc-ink); }
.hc-h4{ font-size:15px; line-height:1.4; font-weight:650; color:var(--hc-ink); }

.hc-lead{ font-size:clamp(15px,1.4vw,17px); line-height:1.62; color:var(--hc-ink-3); max-width:60ch; }
.hc-p{ font-size:15px; line-height:1.7; color:var(--hc-ink-3); }
.hc-small{ font-size:13px; line-height:1.55; color:var(--hc-ink-4); }

.hc-kicker{
  display:inline-block; font-size:12.5px; font-weight:650;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--hc-brand); margin-bottom:12px;
}
.hc-head{ max-width:700px; }
.hc-head .hc-lead{ margin-top:12px; }
.hc-head--center{ margin-inline:auto; text-align:center; }

/* ---------------------------------------------------------------------------
   BUTONLAR
   ------------------------------------------------------------------------ */
.hc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:8px;
  font-size:14.5px; font-weight:650; line-height:1;
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.hc-btn--primary{ background:var(--hc-navy); color:#fff; }
.hc-btn--primary:hover{ background:var(--hc-navy-2); }
.hc-btn--brand{ background:var(--hc-brand); color:var(--hc-on-brand); }
.hc-btn--brand:hover{ background:var(--hc-brand-2); }
.hc-btn--outline{ background:var(--hc-card); color:var(--hc-ink); border-color:var(--hc-line-2); }
.hc-btn--outline:hover{ border-color:var(--hc-ink-2); }
.hc-btn--lg{ padding:16px 30px; font-size:15.5px; }
.hc-btn--block{ width:100%; }

.hc-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:650; color:var(--hc-brand); text-decoration:none;
}
.hc-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.hc-link svg{ transition:transform .16s ease; }
.hc-link:hover svg{ transform:translateX(3px); }

/* ---------------------------------------------------------------------------
   HERO — kurumsal: acik zemin, gercek fotograf, kanit rozetleri
   ------------------------------------------------------------------------ */
.hc-hero{
  position:relative; overflow:hidden;
  margin-inline:clamp(12px,2.4vw,36px);
  border:1px solid var(--hc-line);
  border-radius:16px;
  background:var(--hc-card);
}
.hc-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 88% -20%, rgba(11,132,213,.09), transparent 60%),
    radial-gradient(700px 420px at 4% 10%, rgba(11,37,69,.06), transparent 62%);
}
.hc-hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:48px; align-items:center;
  padding-block:clamp(40px,5vw,72px);
}
@media(max-width:980px){ .hc-hero__inner{ grid-template-columns:1fr; gap:34px; } }

.hc-hero__cta{ display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap; }

/* Dogrulanabilir ozellik satiri */
.hc-checks{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 20px; margin-top:26px; }
@media(max-width:520px){ .hc-checks{ grid-template-columns:1fr; } }
.hc-checks li{ display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; line-height:1.45; color:var(--hc-ink-2); }
.hc-checks li::before{
  content:''; flex:none; width:16px; height:16px; margin-top:1px;
  border-radius:50%; background:var(--hc-ok-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5fa8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px 11px; background-repeat:no-repeat; background-position:center;
}
html[data-theme="dark"] .hc-checks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cc0ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Kanit rozetleri — kurumsal guvenin en guclu sinyali */
.hc-badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--hc-line); }
.hc-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--hc-card-2); border:1px solid var(--hc-line);
  border-radius:999px; padding:6px 13px 6px 9px;
  font-size:12.5px; font-weight:600; color:var(--hc-ink-2);
}
.hc-badge svg{ color:var(--hc-brand); flex:none; }

/* Hero fotografi — gercek datacenter fotografi, cerceve icinde */
.hc-shot{ position:relative; border-radius:var(--hc-r-lg); overflow:hidden;
  border:1px solid var(--hc-line); background:var(--hc-bg-2); }
.hc-shot img{ display:block; width:100%; height:auto; }
.hc-shot__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 20px 16px;
  background:linear-gradient(to top, rgba(5,12,24,.88), rgba(5,12,24,0));
  color:#fff;
}
.hc-shot__cap b{ display:block; font-size:14.5px; font-weight:650; }
.hc-shot__cap span{ display:block; font-size:12.5px; color:rgba(255,255,255,.76); margin-top:2px; }

/* Hero altinda fiyat seridi */
.hc-hero__price{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:22px;
}
.hc-hero__price b{ font-size:25px; font-weight:700; letter-spacing:-.025em; color:var(--hc-ink); }
.hc-hero__price span{ font-size:13px; color:var(--hc-ink-4); }

/* ---------------------------------------------------------------------------
   LOGO DUVARI — kurumsal: acik zeminde logolar normal renkte

   Düzeltilenler:
     · "plettx" beyaz logoydu -> kırpılıp koyuya çevrildi (logos/plesk.webp).
     · "iyzico.webp" tamamen boş beyaz bir dosyaydı -> geçerli iyzico-mono
       kırpılarak kullanılıyor (logos/iyzico.webp).
     · "cloudflare.png" 3000x2000 tuvalde, logonun kendisi sağ altta
       küçüktü -> kırpıldı.
     · Kare işaretler ile geniş yazı markaları aynı ölçekleniyordu;
       .is-mark biraz daha yüksek alır.
     · Sabit duruyordu; artık yatay kayan seri.
   ------------------------------------------------------------------------ */
.hc-logos{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.hc-logos__track{
  display:flex; align-items:center; gap:30px 52px;
  width:max-content; padding-block:6px;
  animation:hc-marquee 40s linear infinite;
}
.hc-logos:hover .hc-logos__track{ animation-play-state:paused; }

@keyframes hc-marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Tüm logolar aynı yükseklikte; genişlik doğal orandan gelir */
.hc-logos img{
  flex:none;
  height:38px; width:auto; max-width:180px;
  object-fit:contain;
  filter:grayscale(1); opacity:.72;
  transition:opacity .2s ease, filter .2s ease;
}
.hc-logos img:hover{ opacity:1; filter:grayscale(0); }

/* Yuvarlak / tek renkli işaretler — gözleki kütle eşitlensin */
.hc-logos img.is-mark{ height:44px; max-width:56px; }

/* Alt alta yığılmış kilit (NorthShield: kalkan + yazı). Yazı, toplam
   yüksekliğin yarısını bile geçmediği için komşularından küçük kalıyor;
   biraz büyütülüyor. Genişlik sınırı yok — kilit en-boy oranı dar. */
.hc-logos img.is-stack{ height:48px; max-width:104px; }

/* ── Koyu tema ──────────────────────────────────────────────────────────
   Logoların hepsi saydam zeminli olduğu için tek tip beyaz siluet yeterli.
   (Daha önce "kutu arka planlı" logolar vardı; o ayrım gerek kalmadı.) */
html[data-theme="dark"] .hc-logos img{
  filter:grayscale(1) brightness(0) invert(1); opacity:.66;
}
html[data-theme="dark"] .hc-logos img:hover{ opacity:1; }
html[data-theme="dark"] .hc-logos img:hover{ opacity:1; }

/* ---------------------------------------------------------------------------
   RAKAMLAR
   ------------------------------------------------------------------------ */
.hc-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hc-line); border:1px solid var(--hc-line);
  border-radius:var(--hc-r); overflow:hidden;
}
.hc-stats > div{ background:var(--hc-card); padding:22px 20px; }
.hc-stats b{ display:block; font-size:26px; font-weight:700; letter-spacing:-.028em;
  color:var(--hc-ink); line-height:1.05; font-variant-numeric:tabular-nums; }
.hc-stats span{ display:block; font-size:12.5px; color:var(--hc-ink-4); margin-top:6px; }
@media(max-width:820px){ .hc-stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------------------------
   PAKET KARTI
   ------------------------------------------------------------------------ */
.hc-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:1000px){ .hc-plans{ grid-template-columns:1fr; } }

.hc-plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); padding:26px;
}
.hc-plan--hl{ border-color:var(--hc-brand); box-shadow:0 0 0 1px var(--hc-brand); }
.hc-plan__badge{
  position:absolute; top:-1px; right:18px; transform:translateY(-50%);
  background:var(--hc-navy); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px;
}
.hc-plan__tag{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--hc-brand); margin-bottom:9px; }
.hc-plan__for{ font-size:13.5px; color:var(--hc-ink-3); margin-top:4px; }
.hc-plan__price{ margin-top:20px; font-size:30px; font-weight:700; letter-spacing:-.03em;
  color:var(--hc-ink); line-height:1; }
.hc-plan__price small{ font-size:14px; font-weight:400; color:var(--hc-ink-4); letter-spacing:0; }
.hc-plan .hc-btn{ margin-top:24px; }

.hc-specs{ list-style:none; margin-top:20px; border-top:1px solid var(--hc-line); }
.hc-specs li{ display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--hc-line); font-size:13.5px; }
.hc-specs li > :first-child{ color:var(--hc-ink-3); }
.hc-specs li > :last-child{ font-weight:650; color:var(--hc-ink); text-align:right; }
.hc-specs li:last-child{ border-bottom:0; }

/* ---------------------------------------------------------------------------
   OZELLIK LISTESI
   ------------------------------------------------------------------------ */
.hc-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hc-line); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); overflow:hidden; }
@media(max-width:1000px){ .hc-features{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .hc-features{ grid-template-columns:1fr; } }
.hc-features > div{ background:var(--hc-card); padding:22px; }
.hc-features svg{ color:var(--hc-brand); display:block; margin-bottom:10px; }
.hc-features b{ display:block; font-size:14.5px; font-weight:650; color:var(--hc-ink); }
.hc-features span{ display:block; font-size:13.5px; color:var(--hc-ink-3); margin-top:4px; line-height:1.55; }

/* ---------------------------------------------------------------------------
   BELGELER / UYUUM (kurumsal kanit)
   ------------------------------------------------------------------------ */
.hc-docs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:900px){ .hc-docs{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .hc-docs{ grid-template-columns:1fr; } }
.hc-doc{
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); padding:18px; text-align:center;
}
.hc-doc img{
  height:96px; width:auto; max-width:100%; object-fit:contain; margin:0 auto;
}
.hc-doc b{ display:block; margin-top:12px; font-size:13.5px; font-weight:650; color:var(--hc-ink); }
.hc-doc span{ display:block; margin-top:3px; font-size:12px; color:var(--hc-ink-4); line-height:1.45; }

/* ---------------------------------------------------------------------------
   ALTYAPI / DONANIM — fotografli iki kolon
   ------------------------------------------------------------------------ */
.hc-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media(max-width:940px){ .hc-split{ grid-template-columns:1fr; gap:30px; } }
.hc-split--reverse > :first-child{ order:2; }
@media(max-width:940px){ .hc-split--reverse > :first-child{ order:0; } }

.hc-stack{ list-style:none; display:grid; gap:16px; }
.hc-stack li{ display:flex; gap:14px; align-items:flex-start; }
/* ÖNEMLİ: ikon kutusu, metin sarmalayıcısıyla aynı seviyede bir <span>.
   Once ".hc-stack span" kuralı (özgüllük 0,1,1) kutuyu da yakalayip
   brand mavisini gri metne ceviriyordu; ikonlar bu yuzden soluk
   gorunuyordu. Metin kurali yalnizca .hc-stack__tx'e hedeflenir. */
.hc-stack__ic{
  flex:none; width:38px; height:38px; border-radius:10px;
  background:var(--hc-tint); color:var(--hc-brand);
  border:1px solid color-mix(in srgb, var(--hc-brand) 22%, transparent);
  display:flex; align-items:center; justify-content:center;
}
.hc-stack__ic svg{ stroke-width:2.25; }
.hc-stack b{ display:block; font-size:14.5px; font-weight:650; color:var(--hc-ink); }
.hc-stack__tx{ min-width:0; }
.hc-stack__tx > span{ display:block; font-size:13.5px; color:var(--hc-ink-3); margin-top:3px; line-height:1.55; }

/* DDoS haritasi gibi genis gorsel */
.hc-wide{ border-radius:var(--hc-r-lg); overflow:hidden;
  border:1px solid var(--hc-line); background:var(--hc-card); }
.hc-wide img{ display:block; width:100%; height:auto; }
.hc-wide figcaption{ padding:12px 16px; font-size:12.5px; color:var(--hc-ink-4);
  border-top:1px solid var(--hc-line); }

/* Dikey kaynakli gorseller icin kadraj. 1122x1402 gibi dikey bir gorsel
   oldugu gibi birakilinca sutun cok uzuyor ve komsu liste havada kaliyor;
   yatay kadrajla liste yuksekligi esitleniyor. */
.hc-wide--art img{
  aspect-ratio:5/4; object-fit:cover; object-position:50% 44%;
}
@media(max-width:940px){ .hc-wide--art img{ aspect-ratio:16/10; } }

/* Tam genislikte banner (4:1 oranli gorseller icin).
   .hc-wide dar sutunda ~500px'e dustugunde icindeki yazilar okunmaz
   hale geldigi icin 4:1 görseller bu degilde tam genislikte kullanilir. */
.hc-banner{ border-radius:var(--hc-r-lg); overflow:hidden;
  border:1px solid var(--hc-line); background:var(--hc-card); }
.hc-banner img{ display:block; width:100%; height:auto; }
/* 4:1 banner dar ekrana sigdirilirsa icindeki yazilar okunmaz oluyor.
   Mobilde kucultmak yerine yatay kaydirma: kaynak olcekte gorunur,
   kullanici banner'in tamamini yatayda gezebilir. */
@media(max-width:940px){
  .hc-banner{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hc-banner img{ min-width:760px; }
}

/* ---------------------------------------------------------------------------
   OYUN SERIDI
   ------------------------------------------------------------------------ */
.hc-games{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }
.hc-games::-webkit-scrollbar{ height:6px; }
.hc-games::-webkit-scrollbar-thumb{ background:var(--hc-line-2); border-radius:99px; }

.hc-game{
  position:relative; flex:0 0 auto; width:236px; height:150px;
  scroll-snap-align:start; border-radius:var(--hc-r); overflow:hidden;
  background:var(--hc-bg-2); text-decoration:none;
  border:1px solid var(--hc-line);
}
.hc-game:hover{ border-color:var(--hc-line-2); }
.hc-game img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.hc-game:hover img{ transform:scale(1.05); }
.hc-game::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,10,20,.92) 0%, rgba(4,10,20,.22) 46%, transparent 72%); }
.hc-game__fb{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--hc-card-2); }
.hc-game__fb img{ width:44px; height:44px; object-fit:contain; opacity:.8; }
.hc-game__body{ position:absolute; left:14px; right:14px; bottom:11px; z-index:2; }
.hc-game__name{ color:#fff; font-size:14.5px; font-weight:650;
  text-shadow:0 1px 8px rgba(0,0,0,.7); }
.hc-game__from{ display:block; font-size:11.5px; font-weight:650; color:#a9c0d4; margin-top:2px;
  text-shadow:0 1px 8px rgba(0,0,0,.7); }

/* ---------------------------------------------------------------------------
   TABLO
   ------------------------------------------------------------------------ */
.hc-table-wrap{ border:1px solid var(--hc-line); border-radius:var(--hc-r-lg);
  overflow-x:auto; background:var(--hc-card); }
.hc-table{ width:100%; min-width:660px; border-collapse:collapse; font-size:14px; }
.hc-table th,.hc-table td{ padding:13px 18px; text-align:left; border-bottom:1px solid var(--hc-line); }
.hc-table thead th{ background:var(--hc-card-2); font-size:12.5px; font-weight:650; color:var(--hc-ink-3); }
.hc-table thead th.is-hl{ color:var(--hc-ink); }
.hc-table tbody td:first-child{ color:var(--hc-ink-3); }
.hc-table tbody td:not(:first-child){ font-weight:650; color:var(--hc-ink); }
.hc-table tbody tr:last-child td{ border-bottom:0; }
.hc-table tbody tr:hover td{ background:var(--hc-card-2); }

/* ---------------------------------------------------------------------------
   ADIMLAR
   ------------------------------------------------------------------------ */
.hc-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:860px){ .hc-steps{ grid-template-columns:1fr; } }
.hc-step{ background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); padding:24px; }
.hc-step__n{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px;
  font-weight:700; color:var(--hc-brand); letter-spacing:.05em; }
.hc-step h3{ margin:11px 0 0; }
.hc-step p{ margin:7px 0 0; font-size:14px; line-height:1.6; color:var(--hc-ink-3); }

/* ---------------------------------------------------------------------------
   MUSTERI YORUMLARI — kurumsal guven
   ------------------------------------------------------------------------ */
.hc-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:1000px){ .hc-reviews{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .hc-reviews{ grid-template-columns:1fr; } }
.hc-review{
  display:flex; flex-direction:column;
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); padding:22px;
}
.hc-review__stars{ display:flex; gap:2px; color:#f5a524; margin-bottom:12px; }
.hc-review h3{ font-size:14.5px; font-weight:650; color:var(--hc-ink); line-height:1.4; }
.hc-review p{ margin:9px 0 0; font-size:13.5px; line-height:1.62; color:var(--hc-ink-3); }
/* Yazar blogu karta dibe yaslanir: metni kisa olan kartlarda bosluk
   asagida birikir, kartlar arasindaki cizgi hep ayni hizada durur. */
.hc-review__by{ display:flex; align-items:center; gap:10px; margin-top:auto;
  padding-top:16px; border-top:1px solid var(--hc-line); }
.hc-review__av{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--hc-tint); color:var(--hc-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700;
}
/* min-width:0 olmazsa uzun "Rol · Hizmet" satiri karti tasirir. */
.hc-review__meta{ min-width:0; }
.hc-review__meta b{ display:block; font-size:13.5px; font-weight:650; color:var(--hc-ink); }
.hc-review__meta > span{ display:block; font-size:12px; color:var(--hc-ink-4); margin-top:1px;
  overflow-wrap:anywhere; }

/* ---------------------------------------------------------------------------
   BLOG
   ------------------------------------------------------------------------ */
.hc-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:1000px){ .hc-posts{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .hc-posts{ grid-template-columns:1fr; } }
.hc-post{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.hc-post:hover{ border-color:var(--hc-line-2); transform:translateY(-2px); }
.hc-post__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--hc-bg-2); }
.hc-post__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.hc-post:hover .hc-post__media img{ transform:scale(1.05); }
.hc-post__cat{
  position:absolute; left:12px; top:12px; z-index:2;
  background:#fff; border:1px solid var(--hc-line); border-radius:999px;
  padding:4px 11px; font-size:11px; font-weight:650; color:var(--hc-navy);
}
.hc-post__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.hc-post__meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--hc-ink-4); }
.hc-post__meta i{ width:3px; height:3px; border-radius:50%; background:currentColor; display:block; }
.hc-post h3{ margin:10px 0 0; font-size:16.5px; line-height:1.35; font-weight:650;
  letter-spacing:-.014em; color:var(--hc-ink); }
.hc-post p{ margin:8px 0 0; font-size:13.5px; line-height:1.6; color:var(--hc-ink-3);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hc-post__more{ margin-top:auto; padding-top:15px; display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:650; color:var(--hc-brand); }
.hc-post__more svg{ transition:transform .16s ease; }
.hc-post:hover .hc-post__more svg{ transform:translateX(3px); }

/* ---------------------------------------------------------------------------
   SSS
   ------------------------------------------------------------------------ */
.hc-faq details{ background:transparent; border-bottom:1px solid var(--hc-line); }
.hc-faq details:first-child{ border-top:1px solid var(--hc-line); }
.hc-faq summary{ cursor:pointer; list-style:none; padding:19px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:15.5px; font-weight:650; color:var(--hc-ink); }
.hc-faq summary::-webkit-details-marker{ display:none; }
.hc-faq summary::after{ content:'+'; font-size:21px; font-weight:400; color:var(--hc-ink-4);
  flex:none; line-height:1; transition:color .16s ease; }
.hc-faq summary:hover::after{ color:var(--hc-brand); }
.hc-faq details[open] summary::after{ content:'−'; color:var(--hc-brand); }
.hc-faq details p{ padding-bottom:19px; font-size:14.5px; line-height:1.65;
  color:var(--hc-ink-3); max-width:72ch; }

/* ---------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------ */
.hc-cta{
  background:var(--hc-navy); color:#fff;
  border-radius:var(--hc-r-lg); padding:clamp(28px,3.6vw,42px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.hc-cta h2{ font-size:clamp(20px,2.3vw,27px); font-weight:700; letter-spacing:-.024em; margin:0; }
.hc-cta p{ margin:8px 0 0; font-size:14.5px; color:rgba(255,255,255,.74); }
.hc-cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hc-cta .hc-btn--outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.38); }
.hc-cta .hc-btn--outline:hover{ border-color:#fff; }

/* ---------------------------------------------------------------------------
   HOSTING — paket kartlari (fiyat + ozellik listesi + satin alma)
   ------------------------------------------------------------------------ */
.hc-hplans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
@media(max-width:1000px){ .hc-hplans{ grid-template-columns:1fr; } }

.hc-hplan{
  position:relative; display:flex; flex-direction:column;
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); padding:26px;
}
.hc-hplan--hl{ border-color:var(--hc-brand); box-shadow:0 0 0 1px var(--hc-brand); }
.hc-hplan__badge{
  position:absolute; top:-1px; left:50%; transform:translate(-50%,-50%);
  background:var(--hc-navy); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; white-space:nowrap;
}
.hc-hplan__name{ font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--hc-ink-4); }
.hc-hplan__old{ font-size:13px; color:var(--hc-ink-4); text-decoration:line-through; margin-top:6px; }
.hc-hplan__price{ margin-top:4px; display:flex; align-items:baseline; gap:6px; }
.hc-hplan__price b{ font-size:34px; font-weight:700; letter-spacing:-.03em;
  color:var(--hc-ink); line-height:1.05; }
.hc-hplan__price span{ font-size:13.5px; color:var(--hc-ink-4); }

/* Dört özellik kutusu (disk / bant / alan / e-posta) */
.hc-hplan__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin-top:20px; padding:14px; border-radius:var(--hc-r);
  background:var(--hc-card-2); border:1px solid var(--hc-line);
}
.hc-hplan__grid b{ display:block; font-size:14px; font-weight:650; color:var(--hc-ink); }
.hc-hplan__grid span{ display:block; font-size:11.5px; color:var(--hc-ink-4); margin-top:1px; }

.hc-hplan__list{ list-style:none; margin-top:20px; flex:1; display:grid; gap:9px; align-content:start; }
.hc-hplan__list li{ display:flex; align-items:flex-start; gap:9px;
  font-size:13px; line-height:1.45; color:var(--hc-ink-2); }
.hc-hplan__list svg{ flex:none; margin-top:2px; color:var(--hc-ok); }
.hc-hplan .hc-btn{ margin-top:22px; }

/* Ödeme / iade şeridi */
.hc-strip{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px;
  margin-top:18px; padding:14px 18px;
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r); font-size:12.5px; color:var(--hc-ink-3);
}
.hc-strip span{ display:inline-flex; align-items:center; gap:7px; }
.hc-strip svg{ color:var(--hc-ok); flex:none; }
.hc-strip__img{ margin-left:auto; }
.hc-strip__img img{ height:22px; width:auto; object-fit:contain; opacity:.85; }

/* ---------------------------------------------------------------------------
   HOSTING — teknoloji kartlari (gorsel + baslik + metin)
   ------------------------------------------------------------------------ */
.hc-tech{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:1000px){ .hc-tech{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .hc-tech{ grid-template-columns:1fr; } }
.hc-techcard{
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-radius:var(--hc-r-lg); overflow:hidden; text-decoration:none;
  transition:border-color .18s ease;
}
.hc-techcard:hover{ border-color:var(--hc-line-2); }
/* Bu kartlarda gorseller saydam zeminli degil; koyu temada
   kutuya donusmesin diye zemin koyu temada koyulaştirilir. */
.hc-techcard__media{
  position:relative; height:132px; overflow:hidden;
  background:var(--hc-card-2); border-bottom:1px solid var(--hc-line);
}
.hc-techcard__media img{ width:100%; height:100%; object-fit:contain; padding:18px 24px; }
html[data-theme="dark"] .hc-techcard__media{ background:#0d1626; }
/* Koyu temada marka renkleri koyu zeminde kaybolur (CloudLinux mavisi,
   cPanel turuncusu). Ayni islem ana sayfa logosundaki gibi: siluete
   cevir. Yalnizca marka kutusunda gecerli, icerik gorsellerinde degil. */
html[data-theme="dark"] .hc-techcard__media img{
  filter:grayscale(1) brightness(0) invert(1); opacity:.85;
}
.hc-techcard__body{ padding:18px 20px 20px; }
.hc-techcard h3{ margin:0; font-size:15.5px; font-weight:650; color:var(--hc-ink); }
.hc-techcard p{ margin:8px 0 0; font-size:13.5px; line-height:1.6; color:var(--hc-ink-3); }

/* ---------------------------------------------------------------------------
   HOSTING — adim listesi (sayili)
   ------------------------------------------------------------------------ */
.hc-numlist{ list-style:none; display:grid; gap:1px; background:var(--hc-line);
  border:1px solid var(--hc-line); border-radius:var(--hc-r-lg); overflow:hidden; }
.hc-numlist li{ background:var(--hc-card); padding:20px 22px; display:flex; gap:16px; }
.hc-numlist__n{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--hc-tint); color:var(--hc-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace;
}
.hc-numlist b{ display:block; font-size:15px; font-weight:650; color:var(--hc-ink); }
.hc-numlist span{ display:block; font-size:13.5px; color:var(--hc-ink-3); margin-top:4px; line-height:1.6; }

/* ---------------------------------------------------------------------------
   HOSTING — yorum vurgusu (kritik yorumlar da gosterilir)
   ------------------------------------------------------------------------ */
.hc-rcrit{
  background:var(--hc-card); border:1px solid var(--hc-line);
  border-left:3px solid var(--hc-warn, #3d9bfd);
  border-radius:var(--hc-r); padding:18px 20px;
}
.hc-rcrit b{ display:block; font-size:14px; font-weight:650; color:var(--hc-ink); }
.hc-rcrit p{ margin:7px 0 0; font-size:13.5px; line-height:1.62; color:var(--hc-ink-3); }
.hc-rcrit__by{ display:block; margin-top:10px; font-size:12px; color:var(--hc-ink-4); }

/* ---------------------------------------------------------------------------
   HOSTING — karsilastirma tablosu vurgu sutunu
   ------------------------------------------------------------------------ */
.hc-table th.is-hl-col,
.hc-table td.is-hl-col{ background:var(--hc-tint); }
/* Koyu temada --hc-navy neredeyse siyah; bir koyu yüzeyin ÜSTÜNDE
   metin olarak kullanılınca kaybolur. Öne çıkan sütun yazısı ve
   vurgu çerçevesi bu yüzden --hc-ink / --hc-brand kullanıyor. */
.hc-table thead th.is-hl-col{ color:var(--hc-ink); }

/* ---------------------------------------------------------------------------
   ERISILEBILIRLIK
   ------------------------------------------------------------------------ */
.hc-page a:focus-visible,
.hc-page summary:focus-visible,
.hc-page button:focus-visible{ outline:2px solid var(--hc-brand); outline-offset:3px; border-radius:4px; }

@media(prefers-reduced-motion:reduce){
  .hc-btn:hover,.hc-post:hover{ transform:none; }
  .hc-game img,.hc-post__media img{ transition:none; }
  .hc-logos__track{ animation:none; }
}