/* ==========================================================================
   PLUS DATACENTER — MARKA KATMANI (brand.css)
   --------------------------------------------------------------------------
   Bu dosya SADECE görsel dili yeniden kurar. Hiçbir metin, link, başlık
   hiyerarşisi (h1/h2), meta veri veya yapısal işaretleme değiştirilmez.
   Sayfaların kendi <style> bloklarından SONRA yüklenir.

   Renkler logodan türetilmiştir:
     logotype mavisi  #0093DD
     "data" grisi     #435154
   ========================================================================== */

/* Font, sayfa <link>'inden bağımsız olarak burada da yüklenir; böylece
   font bağlantısı bulunmayan sayfalar da doğru karakterle gelir. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. MARKA TOKENLARI
   -------------------------------------------------------------------------- */
:root{
    /* Logodan gelen çekirdek palet */
    /* Logonun mavisi #0093DD kimliği taşır ama beyaz yazıyla kontrastı 3.38 —
       okunabilirlik eşiğinin altında. Bu yüzden metin taşıyan her yüzeyde bir
       kademe derin ton (5.35) kullanılır; parlak ton yalnızca dekoratif kalır. */
    --b-azure:        #0070ae;   /* birincil eylem rengi */
    --b-azure-deep:   #005b8d;   /* hover / basılı hâl */
    --b-azure-dark:   #004d76;   /* açık zeminde küçük metin */
    --b-azure-bright: #0093dd;   /* logo tonu — koyu zeminde çizgi/LED, yazı yok */
    --b-azure-light:  #5cbef0;   /* SADECE koyu zeminlerde */
    --b-azure-wash:   #eaf5fc;   /* çok açık dolgu */

    --b-graphite:     #1d282d;   /* başlıklar */
    --b-graphite-2:   #39474c;   /* ara ton */
    --b-body:         #55666c;   /* gövde metni */
    --b-faint:        #78878d;   /* etiket / yardımcı metin */

    --b-carbon:       #0e171c;   /* koyu bölüm zemini */
    --b-carbon-2:     #16232a;   /* koyu bölüm ikinci katman */

    --b-paper:        #f3f5f5;   /* sayfa zemini — mavi tonu yok */
    --b-card:         #ffffff;
    --b-rule:         #dce2e3;   /* saç teli çizgi */
    --b-rule-soft:    #e8ecec;

    --b-signal:       #00915f;   /* yalnızca durum/uptime */
    --b-amber:        #d99612;   /* yalnızca kampanya */
    --b-alert:        #c2413c;

    /* Tipografi */
    --b-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --b-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Yarıçap skalası — dört basamak, fazlası yok */
    --b-r-tag:  3px;   /* etiketler, rozetler */
    --b-r-ctl:  6px;   /* butonlar, inputlar */
    --b-r-card: 10px;  /* kartlar, paneller */
    --b-r-slab: 14px;  /* büyük koyu bloklar */

    /* Gölgeler — bulanık hâle yerine yerleşik his */
    --b-shadow-1: 0 1px 2px rgba(14,23,28,.06);
    --b-shadow-2: 0 1px 3px rgba(14,23,28,.08), 0 8px 20px -12px rgba(14,23,28,.22);
}

/* Sayfaların kendi değişkenlerini marka paletine bağla.
   Böylece yüzlerce satır sayfa içi CSS'e dokunmadan renk dili değişir. */
.box-container.limit-width,
.phx, .evx, .dnx, .rhx, .pdx-page{
    --ink:    var(--b-graphite);
    --ink2:   var(--b-graphite);
    --ink3:   var(--b-graphite-2);
    --deep:   var(--b-carbon);
    --sky:    var(--b-azure);
    --sky2:   var(--b-azure-light);
    --green:  var(--b-signal);
    --purple: #5b5fa8;
    --amber:  var(--b-amber);
    --yellow: var(--b-amber);
    --line:   var(--b-rule);
    --muted:  var(--b-body);
    --faint:  var(--b-faint);
    --soft:   #c3cdd1;
    --bg:     var(--b-paper);
    --card:   var(--b-card);
    --mono:   var(--b-mono);
    --font:   var(--b-sans);
    --shadow: var(--b-shadow-2);

    --pdx-ink:#1d282d; --pdx-ink2:#1d282d; --pdx-ink3:#39474c;
    --pdx-sky:var(--b-azure); --pdx-sky2:var(--b-azure-light);
    --pdx-yellow:var(--b-amber); --pdx-green:var(--b-signal);
    --pdx-text:#55666c; --pdx-muted:#55666c; --pdx-faint:#83949a;
    --pdx-line:var(--b-rule); --pdx-bg:var(--b-paper); --pdx-card:#fff;
    --pdx-mono:var(--b-mono);
    --pdx-shadow:var(--b-shadow-2);

    --dx-sky:var(--b-azure); --dx-sky2:var(--b-azure-light);
    --dx-ink:#1d282d; --dx-muted:#55666c; --dx-faint:#83949a;
    --dx-line:var(--b-rule); --dx-bg:var(--b-paper); --dx-mono:var(--b-mono);
}

/* --------------------------------------------------------------------------
   2. TİPOGRAFİ
   IBM Plex Sans'ın en kalın kesimi 700'dür; bu, "her yer 900" sorununun
   kökten dönmesini engelleyen yapısal bir sınırdır.
   -------------------------------------------------------------------------- */
.box-container.limit-width,
.box-container.limit-width input,
.box-container.limit-width select,
.box-container.limit-width textarea,
.box-container.limit-width button{
    font-family: var(--b-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.box-container.limit-width{
    font-size: 15.5px;
    line-height: 1.65;
    background: var(--b-paper);
}
/* Gövde metni rengi de yalnızca varsayılan: koyu bölümlerin kendi renk
   tanımlarını ezmemesi için özgüllüğü sıfırlanır. */
:where(.box-container.limit-width){ color: var(--b-body); }

/* Metin rengi belirtmeden koyu zemin tanımlayan bloklar için açık varsayılan.
   Sayfanın kendi kuralları bunu her zaman ezebilir. */
:where(.box-container.limit-width) :where(
    [class$="-hero"], .hero-slider-section, .ds-panel,
    [class*="-cta-inner"], [class*="-ctaband"], [class*="-split-art"],
    [class*="-spec-hero"], [class*="-included"]
){ color: #c3cdd1; }

/* Karakter ve aralık her başlıkta zorlanır — şablon havasını veren asıl
   şey buydu ve sayfa kuralları bunu ezmemeli. */
.box-container.limit-width h1,
.box-container.limit-width h2,
.box-container.limit-width h3,
.box-container.limit-width h4,
.box-container.limit-width h5,
.box-container.limit-width h6{
    font-family: var(--b-sans);
    letter-spacing: 0;
}

/* Renk, kalınlık ve boyut YALNIZCA varsayılandır: :where() özgüllüğü sıfırlar,
   böylece sayfanın kendi kuralı (koyu bölümlerdeki color:#fff gibi) kazanır.
   Bu ayrım olmadan koyu zeminlerdeki başlıklar grafit renge düşüp kayboluyor. */
:where(.box-container.limit-width) :where(h1, h2, h3, h4, h5, h6){
    color: var(--b-graphite);
    font-weight: 600;
    line-height: 1.22;
}
:where(.box-container.limit-width) :where(h1){ font-size: 46px; line-height: 1.1; }
:where(.box-container.limit-width) :where(h2){ font-size: 30px; }
:where(.box-container.limit-width) :where(h3){ font-size: 22px; }
:where(.box-container.limit-width) :where(h4){ font-size: 18px; }
:where(.box-container.limit-width) :where(h5){ font-size: 15.5px; }

/* Degrade ile kesilmiş başlık metni — kaldırıldı, düz renge dönüyor. */
.box-container.limit-width h1 span,
.box-container.limit-width h2 span,
.box-container.limit-width .phx-h1 span,
.box-container.limit-width [class*="-h1"] span,
.box-container.limit-width [class*="-title"] span{
    -webkit-text-fill-color: currentColor;
    background: none;
}
/* Hero başlığı tek bir vurgu taşıyabilir; bölüm başlıkları taşımaz.
   Tüm hero'lar koyu zeminli olduğu için vurgu açık maviye çekilir. */
.box-container.limit-width [class$="-hero"] h1 span,
.box-container.limit-width [class$="-hero"] [class$="-h1"] span,
.box-container.limit-width .hero-slider-section h1 span,
.box-container.limit-width .hero-slider-section .phx-h1 span{
    color: var(--b-azure-light) !important;
}
/* Bölüm başlığındaki tek kelimelik renk vurgusu kaldırılır. */
.box-container.limit-width .sec-head h2 span{ color: inherit; }

/* Sayısal / teknik değerler mono kalır — dekorasyon değil, veri olduğu için. */
.box-container.limit-width .amt,
.box-container.limit-width .cur,
.box-container.limit-width .per,
.box-container.limit-width [class*="mono"],
.box-container.limit-width [class*="-val"],
.box-container.limit-width [class*="-price"] strong{
    font-family: var(--b-mono);
    font-weight: 500;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   3. BÖLÜM BAŞLIKLARI
   Ortalanmış blok + üstünde büyük harfli etiket, en yaygın şablon desenidir.
   Sola hizalı, cetvelli bir işaretleyiciye çevriliyor.
   -------------------------------------------------------------------------- */
.box-container.limit-width .sec-head{
    text-align: left;
    max-width: 720px;
    margin: 0 0 44px;
}
.box-container.limit-width .sec-eyebrow{
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--b-faint);
    margin: 0 0 14px;
    padding-left: 13px;
    border-left: 2px solid var(--b-azure);
    line-height: 1.4;
}
.box-container.limit-width .sec-head h2{
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0 0 12px;
}
.box-container.limit-width .sec-head p{
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0;
    max-width: 66ch;
}

/* --------------------------------------------------------------------------
   4. YARIÇAP SKALASI
   Her şeyin 20–28px yuvarlatıldığı görünüm, hiyerarşiyi siler.
   -------------------------------------------------------------------------- */
.box-container.limit-width [class*="card"],
.box-container.limit-width [class*="-panel"],
.box-container.limit-width [class*="-box"],
.box-container.limit-width [class*="-tile"]{
    border-radius: var(--b-r-card);
}
.box-container.limit-width [class*="chip"],
.box-container.limit-width [class*="badge"],
.box-container.limit-width [class*="-tag"],
.box-container.limit-width [class*="pill"]{
    border-radius: var(--b-r-tag);
}
.box-container.limit-width .btn,
.box-container.limit-width [class*="btn-"],
.box-container.limit-width button,
.box-container.limit-width input[type="text"],
.box-container.limit-width input[type="email"],
.box-container.limit-width input[type="search"],
.box-container.limit-width select,
.box-container.limit-width textarea{
    border-radius: var(--b-r-ctl);
}
.box-container.limit-width [class*="-ic"],
.box-container.limit-width .ic,
.box-container.limit-width .mi{
    border-radius: var(--b-r-ctl);
}

/* --------------------------------------------------------------------------
   5. BUTONLAR
   Sarı degrade + renkli hâle yerine düz dolgu ve net kenar.
   -------------------------------------------------------------------------- */
.box-container.limit-width .btn-hero,
.box-container.limit-width [class*="-btn-primary"],
.box-container.limit-width [class*="-cta-btn"],
.box-container.limit-width .pdx-btn,
.box-container.limit-width .btn-buy{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--b-azure) !important;
    background-image: none !important;
    color: #fff !important;
    font-family: var(--b-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    padding: 12px 22px;
    border: 1px solid var(--b-azure);
    border-radius: var(--b-r-ctl);
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.box-container.limit-width .btn-hero:hover,
.box-container.limit-width [class*="-btn-primary"]:hover,
.box-container.limit-width [class*="-cta-btn"]:hover,
.box-container.limit-width .pdx-btn:hover,
.box-container.limit-width .btn-buy:hover{
    background: var(--b-azure-deep) !important;
    border-color: var(--b-azure-deep);
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Dolgulu butonun içindeki ok işareti kaldırılır: dolgu zaten eylemi
   işaret ediyor. Ok, yalnızca metin linklerinde gezinme işareti olarak kalır. */
.box-container.limit-width .btn-hero > .fa-arrow-right,
.box-container.limit-width .pdx-btn > .fa-arrow-right,
.box-container.limit-width .btn-buy > .fa-arrow-right{ display: none; }

.box-container.limit-width .btn-hero:focus-visible,
.box-container.limit-width a:focus-visible,
.box-container.limit-width button:focus-visible{
    outline: 2px solid var(--b-azure);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. KARTLAR: GÖLGE YERİNE ÇİZGİ
   -------------------------------------------------------------------------- */
.box-container.limit-width [class*="card"],
.box-container.limit-width [class*="-panel"]{
    box-shadow: var(--b-shadow-1);
    border-color: var(--b-rule);
}
.box-container.limit-width [class*="card"]:hover{
    transform: none !important;
    box-shadow: var(--b-shadow-2);
    border-color: #c8d2d4;
}

/* --------------------------------------------------------------------------
   7. HAREKET
   Kayarak beliren bölümler ve süzülen rozetler kaldırılıyor.
   Hareket yalnızca kullanıcı bir şeye tıkladığında anlam taşır.
   -------------------------------------------------------------------------- */
/* Her bölümün kayarak belirmesi en yaygın "yapay zeka yapmış" işaretlerinden.
   Tamamen kapatılıyor; ayrıca JS yüklenmezse içeriğin görünmez kalma riskini de
   ortadan kaldırıyor. */
.box-container.limit-width [data-aos],
.box-container.limit-width [data-aos].aos-animate{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.box-container.limit-width [class*="float"]{ animation: none !important; }
.box-container.limit-width .phx-mon-status .dot,
.box-container.limit-width [class*="-status"] .dot{
    animation: none !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce){
    .box-container.limit-width *,
    .box-container.limit-width *::before,
    .box-container.limit-width *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   8. ANA SAYFA HERO — İMZA ÖĞE: 1U RACK PANELİ
   Sitedeki tek "cesur" nokta burası. Cam efektli yuvarlak kart yerine,
   veri merkezinde gerçekten karşılaşılan bir raf paneli: düz çerçeve,
   üst ray, LED şeridi, saç teli satır ayraçları, mono değerler.
   ========================================================================== */
.hero-slider-section,
.box-container.limit-width [class$="-hero"]{
    background: linear-gradient(180deg, #1a272e 0%, #131f25 42%, var(--b-carbon) 100%);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.hero-slider-section::before{
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(180deg,#000,transparent 70%);
    mask-image: linear-gradient(180deg,#000,transparent 70%);
}
.phx-glow{ display: none; }

#plusHeroSlider .carousel-item{ padding: 92px 0 84px; }

.phx-badge{
    display: inline-flex;
    background: none;
    border: 0;
    border-left: 2px solid var(--b-azure-light);
    border-radius: 0;
    padding: 2px 0 2px 13px;
    margin-bottom: 22px;
    color: #a8b7bd;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}
.phx-badge i{ display: none; }

.phx-h1{
    font-size: 46px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 18px;
}
.phx-lead{
    font-size: 16px;
    line-height: 1.68;
    color: #b3c0c5;
    max-width: 56ch;
    margin: 0 0 28px;
}
.phx-feats li{
    font-size: 14.5px;
    font-weight: 400;
    color: #cfd8db;
    gap: 10px;
}
.phx-feats li i{ color: var(--b-azure-light); font-size: 13px; }

.btn-hero{
    background: var(--b-azure) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: var(--b-r-ctl);
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: 0;
}
.btn-hero:hover{
    background: var(--b-azure-deep) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
.hero-price span{
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #8a999f;
}
.hero-price strong{
    font-family: var(--b-mono);
    font-weight: 500;
    font-size: 24px;
    color: #fff;
}
.hero-price strong small{ font-weight: 400; color: #a8b7bd; }

/* --- Raf paneli --- */
.phx-mon{
    background: #16232a;
    backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.1);
    border-top: 3px solid var(--b-azure-bright);
    border-radius: var(--b-r-slab);
    padding: 0;
    box-shadow: 0 24px 50px -24px rgba(0,0,0,.7);
    max-width: 440px;
    margin-left: auto;
    overflow: hidden;
}
.phx-mon-head{
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.phx-mon-title{ font-size: 14px; font-weight: 500; color: #e4eaec; }
.phx-mon-title i{ color: var(--b-azure-light); }
.phx-mon-status{
    background: none;
    border: 1px solid rgba(0,180,120,.35);
    border-radius: var(--b-r-tag);
    color: #4ecb9a;
    font-family: var(--b-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    padding: 3px 8px;
}
.phx-mon-status .dot{
    width: 6px; height: 6px;
    background: #4ecb9a;
    border-radius: 1px;   /* yuvarlak nokta değil, LED */
}

/* Satırlar: solda durum LED'i, ortada etiket, sağda mono değer */
.phx-mon-row{
    padding: 14px 20px;
    margin: 0;
    position: relative;
}
.phx-mon-row + .phx-mon-row{ border-top: 1px solid rgba(255,255,255,.055); }
.phx-mon-row::before{
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 2px;
    background: var(--b-azure-bright);
    opacity: .75;
}
.phx-mon-left{ gap: 12px; }
.phx-mon-ic{
    width: 34px; height: 34px;
    border-radius: var(--b-r-ctl);
    background: rgba(255,255,255,.05) !important;
    color: #96a6ac !important;
    font-size: 14px;
}
.phx-mon-tx h5{ font-size: 13.5px; font-weight: 500; color: #e4eaec; }
.phx-mon-tx p{ font-size: 12px; color: #7e8f95; }
.phx-mon-val{
    font-family: var(--b-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: #cfd8db;
    letter-spacing: .01em;
}
.phx-mon-val.ok{ color: #4ecb9a; }

/* Süzülen baloncuklar → panelin alt rayına gömülü iki hücreli durum şeridi.
   Panelin overflow'u kapalı olduğu için dışarı taşan konum kullanılmaz. */
.phx-mon{ padding: 0 0 43px; }
.phx-chip-float{
    animation: none !important;
    position: absolute;
    bottom: 0;
    height: 43px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.02);
    border: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-radius: 0;
    font-family: var(--b-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
    color: #b3c0c5;
    padding: 0 18px;
    box-shadow: none;
}
.phx-chip-float i{ color: var(--b-azure-light); font-size: 10px; }
.phx-chip-float.c1{ top: auto; left: 0; right: 50%; border-right: 1px solid rgba(255,255,255,.07); }
.phx-chip-float.c2{ bottom: 0; left: 50%; right: 0; }

/* Slider kontrolleri */
#plusHeroSlider .carousel-indicators [data-bs-target]{
    width: 20px; height: 2px; border-radius: 0;
    background-color: rgba(255,255,255,.24);
}
#plusHeroSlider .carousel-indicators .active{
    background-color: var(--b-azure-bright); width: 36px;
}
.ctrl-wrap{
    width: 40px; height: 40px;
    border-radius: var(--b-r-ctl);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: none;
}
.ctrl-wrap:hover{
    background: var(--b-azure);
    border-color: var(--b-azure);
    transform: none;
    box-shadow: none;
}

/* --- Hero altındaki metrik şeridi --- */
.phx-strip{ margin-top: -36px; }
.phx-strip-inner{
    border-radius: var(--b-r-card);
    border: 1px solid var(--b-rule);
    box-shadow: var(--b-shadow-2);
}
.phx-metric{ padding: 22px 24px; }
.phx-metric + .phx-metric{ border-left: 1px solid var(--b-rule-soft); }
.phx-metric .mi{
    width: 38px; height: 38px;
    border-radius: var(--b-r-ctl);
    background: var(--b-azure-wash);
    color: var(--b-azure-dark);
    font-size: 16px;
}
.phx-metric h4{
    font-family: var(--b-mono);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--b-graphite);
}
.phx-metric p{ font-size: 13px; font-weight: 400; color: var(--b-body); }

/* --------------------------------------------------------------------------
   9. MOBİL DÜZELTMELERİ
   -------------------------------------------------------------------------- */
@media (max-width: 991px){
    .box-container.limit-width h1,
    .phx-h1{ font-size: 34px; }
    .box-container.limit-width .sec-head h2{ font-size: 25px; }
    #plusHeroSlider .carousel-item{ padding: 64px 0 60px; }
    .phx-strip-inner{ grid-template-columns: repeat(2, 1fr); }
    .phx-metric:nth-child(3){ border-left: 0; }
    .phx-metric:nth-child(n+3){ border-top: 1px solid var(--b-rule-soft); }
}
@media (max-width: 575px){
    .box-container.limit-width h1,
    .phx-h1{ font-size: 29px; }
    .phx-feats{ grid-template-columns: 1fr; }
    .phx-strip-inner{ grid-template-columns: 1fr; }
    .phx-metric + .phx-metric{ border-left: 0; border-top: 1px solid var(--b-rule-soft); }
}