/* ============================================================
   LogArşiv — logarsiv.com
   Tasarım konsepti: "arşiv dosyası".
   Sayfa arşiv kâğıdı üzerindedir. Makine konuştuğunda (mühür,
   log satırı, kapasite hesabı) koyu mürekkep paneli devreye
   girer. Koyu yüzey dekorasyon değil, anlam taşır.
   ============================================================ */

:root{
  /* ---- AÇIK TEMA (gündüz) ------------------------------------
     Zemin arşiv kâğıdı, yazı mürekkep. Marka yeşili koyu kalır ki
     kâğıt üzerinde okunsun.                                      */
  --ground:   #FAF9F6;
  --ground-2: #F2F0EA;
  --surface:  #FFFFFF;
  --fg:       #131A23;
  --fg-2:     #4A5462;
  --fg-3:     #78818E;
  --rule:     #E2DED5;
  --rule-2:   #CFCABF;

  /* Mühür = doğrulandı. Marka rengi ve durum rengi aynı ailede;
     ürünün tek vaadi zaten bu.                                   */
  --seal:      #0E6B47;
  --seal-700:  #0A5436;
  --seal-100:  #E4F3EC;
  --on-seal:   #FFFFFF;
  --verify:    #0E6B47;
  --verify-100:#E4F3EC;

  /* Makine yüzeyi: açık temada kâğıdın üzerindeki koyu panel,
     koyu temada zeminden bir tık yükselmiş yüzey.                */
  --panel:     #101823;
  --panel-2:   #17212E;
  --panel-rule:#26303E;
  --panel-tx:  #C9D2DD;
  --panel-side:#0A1018;
  --mint:      #9AE8C0;

  --shadow-lg: 0 18px 50px -22px rgba(19,26,35,.55), 0 2px 8px -2px rgba(19,26,35,.2);
  --shadow-xl: 0 30px 70px -30px rgba(19,26,35,.6), 0 3px 12px -3px rgba(19,26,35,.22);
  --nav-bg:    rgba(250,249,246,.88);
  --logo-bg:   #131A23;
  --logo-fg:   #FAF9F6;

  --ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', Inter, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --gutter: 24px;
}

/* ---- KOYU TEMA (gece) -----------------------------------------
   Aynı belirteçler, başka değerler. Kural gövdeleri değişmez.    */
:root[data-theme="dark"]{
  --ground:   #080E16;
  --ground-2: #0B121C;
  --surface:  #0D151F;
  --fg:       #EEF2F5;
  --fg-2:     #96A3B4;
  --fg-3:     #6E7C8D;
  --rule:     #1B2530;
  --rule-2:   #27323F;

  --seal:      #9AE8C0;
  --seal-700:  #B4EFD2;
  --seal-100:  rgba(154,232,192,.14);
  --on-seal:   #07211A;
  --verify:    #6EE7A8;
  --verify-100:rgba(110,231,168,.13);

  --panel:     #0D151F;
  --panel-2:   #131D29;
  --panel-rule:#212C39;
  --panel-tx:  #C5D0DC;
  --panel-side:#0A111A;

  --shadow-lg: 0 18px 50px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(154,232,192,.06);
  --shadow-xl: 0 34px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(154,232,192,.07);
  --nav-bg:    rgba(8,14,22,.86);
  --logo-bg:   #EEF2F5;
  --logo-fg:   #0B121C;
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --ground:   #080E16;
  --ground-2: #0B121C;
  --surface:  #0D151F;
  --fg:       #EEF2F5;
  --fg-2:     #96A3B4;
  --fg-3:     #6E7C8D;
  --rule:     #1B2530;
  --rule-2:   #27323F;

  --seal:      #9AE8C0;
  --seal-700:  #B4EFD2;
  --seal-100:  rgba(154,232,192,.14);
  --on-seal:   #07211A;
  --verify:    #6EE7A8;
  --verify-100:rgba(110,231,168,.13);

  --panel:     #0D151F;
  --panel-2:   #131D29;
  --panel-rule:#212C39;
  --panel-tx:  #C5D0DC;
  --panel-side:#0A111A;

  --shadow-lg: 0 18px 50px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(154,232,192,.06);
  --shadow-xl: 0 34px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(154,232,192,.07);
  --nav-bg:    rgba(8,14,22,.86);
  --logo-bg:   #EEF2F5;
  --logo-fg:   #0B121C;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  transition:background-color .2s ease,color .2s ease;
  color:var(--fg);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}

a{color:inherit}

::selection{background:var(--seal);color:var(--on-seal)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* Bölümler tek ve sürekli bir kâğıt yüzeyinde durur; aralarını
   arka plan değişimi değil, saç teli çizgi ayırır. */
.band{padding-block:clamp(64px,8vw,116px);border-top:1px solid var(--rule)}
.band:first-of-type{border-top:0}

h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}

h2{
  font-size:clamp(1.85rem,3.4vw,2.85rem);
  letter-spacing:-.022em;
  line-height:1.1;
  max-width:19ch;
}

h3{font-family:var(--ui);font-size:1.0625rem;font-weight:600;letter-spacing:-.005em}

p{margin:0}

.lede{color:var(--fg-2);max-width:62ch;margin-top:18px;font-size:1.0625rem}

.mono{font-family:var(--mono);font-variant-ligatures:none}

/* ---------------------------------------------------- düğmeler */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:.9375rem;font-weight:600;
  padding:14px 24px;border-radius:6px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-seal{background:var(--seal);color:var(--on-seal)}
.btn-seal:hover{background:var(--seal-700)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--fg);background:var(--surface)}
.btn-sm{padding:9px 17px;font-size:.875rem}

.tlink{
  color:var(--fg);text-decoration:none;font-weight:600;font-size:.9375rem;
  border-bottom:1.5px solid var(--rule-2);padding-bottom:2px;
}
.tlink:hover{border-color:var(--seal);color:var(--seal)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--seal);outline-offset:2px;border-radius:3px;
}

/* ---------------------------------------------------- üst çubuk */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav.stuck{border-bottom-color:var(--rule)}
.nav-in{display:flex;align-items:center;gap:32px;height:66px}

.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo-mk{width:26px;height:26px;flex:none}
.logo-tx{font-family:var(--display);font-weight:700;font-size:1.125rem;letter-spacing:-.03em}
.logo-tx i{font-style:normal;color:var(--rule-2);font-weight:400;margin-inline:1px}

.nav-links{display:flex;gap:26px;margin-inline-start:auto}
.nav-links a{
  text-decoration:none;font-size:.9375rem;color:var(--fg-2);font-weight:500;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--fg)}
.nav-cta{flex:none}

.burger{display:none;background:none;border:1px solid var(--rule-2);
  border-radius:6px;padding:7px 9px;cursor:pointer}
.burger svg path{stroke:var(--fg)}

/* Tema düğmesi: o an geçilecek temanın simgesini gösterir. */
.tema{
  flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;
  background:none;border:1px solid var(--rule-2);border-radius:8px;cursor:pointer;
  color:var(--fg-2);transition:color .15s ease,border-color .15s ease;
}
.tema:hover{color:var(--fg);border-color:var(--fg)}
.tema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.tema .gece{display:none}
:root[data-theme="dark"] .tema .gun{display:none}
:root[data-theme="dark"] .tema .gece{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema .gun{display:none}
  :root:not([data-theme="light"]) .tema .gece{display:block}
}

/* ---------------------------------------------------- kahraman */
.hero{padding-top:clamp(52px,6.5vw,86px);padding-bottom:clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,538px);gap:clamp(36px,5vw,72px);align-items:start}

.hero h1{
  font-size:clamp(2.2rem,4.3vw,3.55rem);
  line-height:1.06;
  letter-spacing:-.033em;
  font-weight:700;
}
.hero .lede{margin-top:24px;font-size:1.125rem;max-width:48ch}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}

.hero-note{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--rule);
  color:var(--fg-3);font-size:.9375rem;max-width:44ch;
}

/* ---------------------------------------------- koyu makine paneli */
.machine{
  max-width:100%;
  background:var(--panel);
  color:var(--panel-tx);
  border-radius:12px;
  padding:20px;
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.72;
  box-shadow:var(--shadow-lg);
}
50%{opacity:.35;transform:scale(.75)}}

}

/* ---------------------------------------------------- defter satırı */
.ledger{margin-top:clamp(36px,4.5vw,60px);border-top:1px solid var(--rule)}
.lrow{
  display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);
  padding:26px 0;border-bottom:1px solid var(--rule);
}
.ledger .lrow:last-child{border-bottom:0;padding-bottom:0}
.lrow h3{padding-top:1px}
.lrow p{color:var(--fg-2);font-size:1rem;max-width:64ch}

/* Kanun/ürün karşılaştırması: sol sütun kanunun dili, sağ sütun ürünün cevabı */
.duty .k{color:var(--fg);font-weight:600;font-size:1.0625rem;font-family:var(--display);letter-spacing:-.01em}
.duty .k span{display:block;margin-top:5px;font-family:var(--mono);font-size:.6875rem;
  color:var(--fg-3);letter-spacing:.02em;font-weight:400}

/* ---------------------------------------------------- adımlar (gerçek sıra) */
.steps{margin-top:clamp(36px,4.5vw,58px);border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:44px minmax(150px,230px) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding:30px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.steps .step:last-child{border-bottom:0;padding-bottom:0}
.step .n{
  font-family:var(--display);font-size:1.5rem;font-weight:600;
  color:var(--rule-2);line-height:1;padding-top:1px;
}
.step p{color:var(--fg-2);font-size:1rem;max-width:58ch}
.step .machine{margin-top:16px;font-size:.75rem;padding:15px 17px;overflow-x:auto}
.step .machine .c{color:#8FA0B4}
.step .machine .c b{color:var(--mint);font-weight:400}

/* ---------------------------------------------------- mühür zinciri */
.chain-band{background:var(--panel);color:var(--panel-tx);border-top:0}
.chain-band h2{color:#F4F7FA}
.chain-band .lede{color:#9AA7B6}
.chain{
  margin-top:clamp(34px,4.5vw,54px);
  display:grid;gap:0;border-top:1px solid var(--panel-rule);
}
.link{
  display:grid;grid-template-columns:118px minmax(0,1fr) auto;
  gap:clamp(14px,3vw,32px);align-items:center;
  padding:16px 0;border-bottom:1px solid var(--panel-rule);
}
.link .day{font-family:var(--mono);font-size:.8125rem;color:#EAF0F6}
.link .day small{display:block;color:#7F8CA0;font-size:.6875rem;margin-top:2px}
.link .hsh{font-family:var(--mono);font-size:.75rem;color:#7F8CA0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link .hsh b{color:var(--mint);font-weight:400}
.link .vf{
  font-family:var(--ui);font-size:.8125rem;font-weight:600;color:#6EE7A8;
  display:inline-flex;align-items:center;gap:6px;flex:none;
}
.chain .link:last-child{border-bottom:0}
.chain-foot{margin-top:26px;color:#8895A6;font-size:.9375rem;max-width:66ch}
.chain-foot code{font-family:var(--mono);font-size:.8125rem;color:var(--mint);
  overflow-wrap:anywhere}

/* ---------------------------------------------------- hesaplayıcı */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(32px,5vw,64px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.calc-ctl{padding-top:6px}
.calc-ctl label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:6px}
.calc-val{font-family:var(--mono);font-size:1.75rem;letter-spacing:-.02em;margin-bottom:14px}
.calc-val small{font-family:var(--ui);font-size:.875rem;color:var(--fg-3);font-weight:500;margin-left:6px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:var(--rule-2);border-radius:2px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--seal);cursor:grab;border:3px solid var(--ground);
  box-shadow:0 1px 6px rgba(19,26,35,.3);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--seal);cursor:grab;
  border:3px solid var(--ground);box-shadow:0 1px 6px rgba(19,26,35,.3);
}
.calc-scale{display:flex;justify-content:space-between;margin-top:9px;
  font-family:var(--mono);font-size:.6875rem;color:var(--fg-3)}
.calc-note{margin-top:24px;color:var(--fg-2);font-size:.9375rem;max-width:46ch}

.calc-out{padding:22px 24px}
.calc-out .o{display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--panel-rule)}
.calc-out .o:last-of-type{border-bottom:0}
.calc-out .o .lbl{font-family:var(--ui);font-size:.875rem;color:#9AA7B6}
.calc-out .o .num{font-size:1.0625rem;color:#EAF0F6}
.calc-out .o.tot .lbl{color:#EAF0F6;font-weight:600}
.calc-out .o.tot .num{color:var(--mint);font-size:1.375rem}
.calc-out .hint{margin-top:14px;padding-top:14px;border-top:1px solid var(--panel-rule);
  font-family:var(--ui);font-size:.8125rem;color:#8895A6;line-height:1.5}

/* ---------------------------------------------------- teknik tablo */
.spec{width:100%;border-collapse:collapse;margin-top:clamp(30px,4vw,46px)}
.spec th,.spec td{text-align:left;padding:15px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:.9375rem}
.spec th{font-weight:600;width:min(300px,42%);padding-inline-end:28px}
.spec td{font-family:var(--mono);font-size:.8125rem;color:var(--fg-2);line-height:1.6}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--rule)}

/* ---------------------------------------------------- fiyat */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:clamp(34px,4.5vw,54px);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
.plan{padding:30px 28px;border-inline-start:1px solid var(--rule)}
.plan:first-child{border-inline-start:0}
.plan.pick{background:var(--ground-2)}
.plan-nm{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.plan-for{color:var(--fg-3);font-size:.875rem;margin-top:5px;min-height:2.6em}
.plan-pr{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--display);font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.plan-pr span{font-family:var(--ui);font-size:.875rem;font-weight:500;color:var(--fg-3);
  letter-spacing:0;display:block;margin-top:7px}
.plan .btn{width:100%;margin-top:22px}
.plan ul{list-style:none;margin:22px 0 0;padding:0}
.plan li{position:relative;padding-inline-start:22px;margin-bottom:10px;font-size:.9375rem;color:var(--fg-2)}
.plan li::before{content:"";position:absolute;inset-inline-start:0;top:.52em;width:11px;height:6px;
  border-left:1.8px solid var(--verify);border-bottom:1.8px solid var(--verify);
  transform:rotate(-45deg)}
.plan-slot{height:24px;margin-bottom:8px}
.plan-tag{display:inline-block;background:var(--seal-100);color:var(--seal-700);
  font-size:.75rem;font-weight:600;padding:0 9px;border-radius:4px;line-height:24px}
.plans-foot{margin-top:20px;color:var(--fg-3);font-size:.875rem}

/* ---------------------------------------------------- SSS */
.faq{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:flex-start;gap:16px;padding:21px 0;cursor:pointer;
  font-weight:600;font-size:1.0625rem;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;margin-inline-start:auto;margin-top:.45em;width:9px;height:9px;
  border-right:1.8px solid var(--fg-3);border-bottom:1.8px solid var(--fg-3);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 22px;color:var(--fg-2);max-width:68ch;font-size:1rem}

/* ---------------------------------------------------- form */
.cta-band{background:var(--ground-2)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:clamp(34px,5vw,72px);align-items:start}
.cta-grid h2{max-width:16ch}
.cta-pts{margin:26px 0 0;padding:0;list-style:none}
.cta-pts li{position:relative;padding-inline-start:24px;margin-bottom:11px;color:var(--fg-2);font-size:1rem}
.cta-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:12px;height:6px;
  border-left:1.8px solid var(--verify);border-bottom:1.8px solid var(--verify);transform:rotate(-45deg)}

.form{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:26px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:var(--ui);font-size:.9375rem;color:var(--fg);
  padding:11px 13px;border:1px solid var(--rule-2);border-radius:6px;background:var(--surface);
  transition:border-color .15s ease;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--fg)}
.fld textarea{resize:vertical;min-height:78px}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form .btn{width:100%;margin-top:6px}
.form-note{margin-top:13px;color:var(--fg-3);font-size:.8125rem;line-height:1.5}
.form-msg{margin-top:14px;padding:13px 15px;border-radius:7px;font-size:.9375rem;display:none}
.form-msg.ok{display:block;background:var(--verify-100);color:var(--verify)}
.form-msg.err{display:block;background:var(--seal-100);color:var(--seal-700)}

/* ---------------------------------------------------- alt bilgi */
.foot{border-top:1px solid var(--rule);padding-block:44px;font-size:.875rem;color:var(--fg-3)}
.foot-in{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot .sp{margin-inline-start:auto}

/* ---------------------------------------------------- duyarlı */
@media(max-width:960px){
  .hero-grid,.calc,.cta-grid{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan{border-left:0;border-top:1px solid var(--rule)}
  .plan:first-child{border-top:0}
}
@media(max-width:760px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--ground);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 16px;
  }
  .nav-links.open a{padding:11px 0;border-bottom:1px solid var(--rule)}
  .burger{display:block}
  .tema{margin-left:auto}
  .nav-cta{display:none}
  .lrow,.step{grid-template-columns:minmax(0,1fr);gap:8px}
  .steps .step:last-child{border-bottom:0;padding-bottom:0}
.step .n{font-size:1.125rem}
  .link{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .link .hsh{grid-column:1/-1}
  .fld-2{grid-template-columns:1fr}
}
@media(max-width:420px){
  body{font-size:16px}
  .machine{font-size:.75rem;padding:16px}
}

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

@media print{
  .nav,.form,.hero-cta{display:none}
  body{background:#fff}
}

/* ============================================================
   KAHRAMAN GÖRSELİ — kayıtların kasaya akışı
   FortiGate'ten çıkan paket, mühürlenip kasaya giriyor; kalkan
   bütünlüğü, yüzen kartlar da olup biteni anlatıyor. Sahne her iki
   temada da koyudur: makine konuşurken hep koyu konuşur.
   ============================================================ */
.stage{
  position:relative;height:490px;border-radius:14px;overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow-lg);
  isolation:isolate;
}
.art{position:absolute;top:0;bottom:0;left:50%;width:530px;margin-left:-265px;
  perspective:1000px}
.art::before{content:"";position:absolute;inset:15%;background:#69cfad1c;
  filter:blur(60px);border-radius:50%}

.art-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(#293a3e33 1px,transparent 1px),
                   linear-gradient(90deg,#293a3e33 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse,#000,transparent 68%);
          mask-image:radial-gradient(ellipse,#000,transparent 68%);
}

.orbit{position:absolute;border:1px solid #45665940;border-radius:50%;
  width:380px;height:380px;top:45px;left:95px;transform:rotateX(53deg) rotateZ(-25deg)}
.orbit-two{width:480px;height:480px;top:-5px;left:45px}
.orbit-three{width:270px;height:270px;top:100px;left:150px;border-style:dashed;
  animation:yorunge 45s linear infinite}
.orbit-dot{position:absolute;width:5px;height:5px;background:var(--mint);border-radius:50%;
  box-shadow:0 0 15px var(--mint)}
.orbit-dot.d1{top:112px;left:436px}
.orbit-dot.d2{top:330px;left:78px}

.float-card{
  position:absolute;z-index:3;display:flex;align-items:center;gap:12px;
  border:1px solid #314238;border-radius:9px;
  background:linear-gradient(125deg,#19252a,#0b161c);
  box-shadow:0 15px 40px #0004;color:#E4EBE7;
}
.float-card small{display:block;color:#93a39f;font-size:9px;letter-spacing:.4px}
.float-card strong{display:block;font-size:13px;font-weight:500}

.f-source{left:20px;top:80px;padding:14px 18px;animation:suzul 7s ease-in-out infinite}
.f-source small{font-size:8px;letter-spacing:1.5px;margin-bottom:4px}
.f-source .pip{margin-left:16px}
.tiny-icon{font-size:26px;color:#b3c5bf;line-height:1}

.pip{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;
  box-shadow:0 0 12px #9ae8c077;animation:atim 3s infinite;flex:none}
@keyframes atim{50%{opacity:.45;box-shadow:0 0 16px #9ae8c0}}

.packet{position:absolute;top:160px;left:90px;font-family:var(--mono);font-size:9px;
  color:#78988b;transform:rotate(20deg);animation:paket 4s infinite}
.packet b{color:var(--mint);margin-left:20px;font-weight:400}

.vault{position:absolute;left:195px;top:146px;width:195px;height:192px;
  transform:rotate(-8deg);animation:suzul 8s ease-in-out infinite}
.vault-top{position:absolute;width:190px;height:65px;top:-21px;left:10px;
  background:linear-gradient(140deg,#354d50,#1a2c33);
  transform:skewY(-10deg) skewX(-22deg);
  border:1px solid #4a6961;border-radius:18px 18px 4px 4px}
.vault-face{position:absolute;inset:12px 0 0;
  background:linear-gradient(135deg,#273a40,#111e27 60%);
  border:1px solid #527164;border-radius:19px;
  box-shadow:inset 2px 2px 10px #80b7a21c,20px 23px 35px #0008;
  transform:skewY(-10deg)}
.vault-bottom{position:absolute;inset:30px -13px -8px auto;width:18px;background:#152830;
  transform:skewY(-43deg);border:1px solid #355b4c;border-radius:0 12px 12px 0;z-index:-1}
.vault-logo{display:block;text-align:center;padding-top:12px;font-size:100px;line-height:1;
  color:#bdebd9;text-shadow:0 0 28px #9ae8c030}
.vault-lines{position:absolute;bottom:24px;left:22px;display:flex;gap:5px}
.vault-lines i{width:28px;height:3px;background:#4c6866;border-radius:4px}
.vault-led{position:absolute;right:24px;bottom:23px;width:6px;height:6px;
  background:var(--mint);border-radius:50%;box-shadow:0 0 12px var(--mint)}

.shield{position:absolute;top:260px;left:355px;z-index:4;
  display:grid;place-items:center;width:64px;height:76px;
  font-size:26px;color:#b1f4d2;
  background:linear-gradient(145deg,#426c58,#173c2f);
  clip-path:polygon(50% 0,95% 18%,90% 70%,50% 100%,10% 70%,5% 18%);
  filter:drop-shadow(0 0 15px #9ae8c0);animation:suzul 6s infinite}

.f-seal{top:354px;left:250px;padding:14px 18px;animation:suzul 7s -3s infinite}
.f-seal small{margin-top:5px;font-size:9px}
.seal-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  border:1px solid #5e9277;color:var(--mint);flex:none}
.f-live{top:283px;left:0;padding:13px 14px;font-size:9px;gap:8px;color:#A9B7B1}
.f-live b{color:var(--mint);font-size:10px;font-weight:500;font-variant-numeric:tabular-nums}

.art-caption{position:absolute;bottom:7px;left:52px;right:3px;display:flex;
  justify-content:space-between;color:#6f817e;
  font:8px/1 var(--mono);letter-spacing:1.3px}

@keyframes suzul{50%{translate:0 -12px}}
@keyframes yorunge{to{transform:rotateX(53deg) rotateZ(335deg)}}
@keyframes paket{0%{opacity:0;translate:-10px -5px}50%{opacity:1}100%{opacity:0;translate:45px 20px}}

/* ---------------------------------------------------- güven şeridi */
.trust{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:28px;
}
.trust>span{font-size:.875rem;color:var(--fg-3);max-width:15ch}
.trust div{display:flex;flex-direction:column;gap:5px}
.trust b{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
.trust small{font-size:.8125rem;color:var(--fg-3)}

/* ------------------------------------------------- kahraman metni */
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px;
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;color:var(--fg-3)}
.eyebrow .tag{border:1px solid var(--rule-2);color:var(--seal);border-radius:4px;
  padding:3px 7px;font-size:.625rem;letter-spacing:.08em}
.mint{color:var(--seal)}
.hero-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;
  font-size:.8125rem;color:var(--fg-3)}
.hero-checks span{display:inline-flex;align-items:center;gap:7px}
.hero-checks svg{width:12px;height:7px;flex:none;stroke:var(--verify);stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.play{display:grid;place-items:center;width:23px;height:23px;flex:none;
  border:1px solid var(--rule-2);border-radius:50%;font-size:8px;color:var(--fg-2)}
.tlink.with-play{display:inline-flex;align-items:center;gap:10px;border-bottom:0}
.tlink.with-play:hover .play{border-color:var(--seal);color:var(--seal)}

@media(max-width:1080px){ .art{scale:.86;transform-origin:top center} }
@media(max-width:960px){
  .stage{height:430px;max-width:530px}
  .art{scale:.8;transform-origin:top center}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .trust>span{grid-column:1/-1;max-width:none}
}
@media(max-width:560px){
  .stage{height:360px}
  .art{scale:.66;transform-origin:top center}
}
@media(prefers-reduced-motion:reduce){
  .orbit-three,.f-source,.vault,.shield,.f-seal,.packet,.pip{animation:none}
  .packet{opacity:1}
}


/* ============================================================
   ÇOK SAYFA / ÇOK DİL — eklenen bileşenler
   ============================================================ */

/* İkinci satır: başlığın devamı, sesi kısık */
.muted{color:var(--fg-3)}

/* Ana sayfadaki büyük kart başlıkları */
h3.big{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.14}

/* ------------------------------------------------- dil menüsü */
.dil{position:relative;flex:none}
.dil summary{
  display:flex;align-items:center;gap:6px;height:36px;padding:0 11px;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:8px;color:var(--fg-2);list-style:none;
  font-size:.8125rem;font-weight:600;transition:color .15s ease,border-color .15s ease;
}
.dil summary::-webkit-details-marker{display:none}
.dil summary:hover{color:var(--fg);border-color:var(--fg)}
.dil summary svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.dil[open] summary{color:var(--fg);border-color:var(--fg)}
.dil-menu{
  position:absolute;top:calc(100% + 7px);inset-inline-end:0;z-index:70;min-width:158px;
  display:flex;flex-direction:column;padding:6px;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 14px 36px -14px rgba(0,0,0,.3);
}
.dil-menu a{
  padding:9px 12px;border-radius:6px;text-decoration:none;font-size:.9375rem;
  color:var(--fg-2);transition:background-color .12s ease,color .12s ease;
}
.dil-menu a:hover{background:var(--ground-2);color:var(--fg)}
.dil-menu a[aria-current]{color:var(--seal);font-weight:600}

/* ------------------------------------------- ortalanmış çağrı */
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center h2{max-width:none;margin-inline:auto}
.center .lede{margin-inline:auto}
.center .btn{margin-top:30px}
.cta-small{margin-top:16px;color:var(--fg-3);font-size:.875rem}

/* ============================================================
   SAĞDAN SOLA (Arapça)
   Makine verisi — hash, IP, komut, protokol — her zaman soldan
   sağa okunur; unicode-bidi:plaintext her parçanın yönünü kendi
   ilk harfinden çıkarır.
   ============================================================ */
[dir=rtl] .mono,
[dir=rtl] code,
[dir=rtl] .packet,
[dir=rtl] .machine .c,
[dir=rtl] .spec td,
[dir=rtl] .link .hsh,
[dir=rtl] .link .day,
[dir=rtl] .chain-foot code,
[dir=rtl] .art-caption,
[dir=rtl] .con-side-foot,
[dir=rtl] .res-row .bd,
[dir=rtl] .res-row .tm,
[dir=rtl] .top-row .nm,
[dir=rtl] .stream .sl,
[dir=rtl] .arc-row .hs,
[dir=rtl] .arc-row .dy,
[dir=rtl] .thr-row .sg,
[dir=rtl] .usr-row .who,
[dir=rtl] .if-row .nm,
[dir=rtl] .if-row .ip,
[dir=rtl] .if-row .tp,
[dir=rtl] .vpn-row .u,
[dir=rtl] .vpn-row .m,
[dir=rtl] .det dd,
[dir=rtl] .srch-in input{unicode-bidi:plaintext}

/* Kasa görseli mutlak konumludur; aynalanmaz, olduğu gibi durur. */
[dir=rtl] .art{direction:ltr}
[dir=rtl] .art .float-card strong,
[dir=rtl] .art .float-card small,
[dir=rtl] .art .float-card span{direction:rtl;unicode-bidi:plaintext}

[dir=rtl] .logo-tx{direction:ltr}
[dir=rtl] .con-brand b{direction:ltr}

/* Sayı + birim birlikte yazılan hücreler: yön sabit, hizalama serbest.
   "829,5 MB" hiçbir dilde "MB 829,5" olmaz. */
[dir=rtl] .tile .val,
[dir=rtl] .tile .sub,
[dir=rtl] .con-live,
[dir=rtl] .top-row .n,
[dir=rtl] .usr-row .vol b,
[dir=rtl] .usr-row .num,
[dir=rtl] .res-row .ac,
[dir=rtl] .arc-row .ct,
[dir=rtl] .if-row .tp,
[dir=rtl] .vpn-row .m,
[dir=rtl] .chart-hd span,
[dir=rtl] .calc-val,
[dir=rtl] .calc-out .num,
[dir=rtl] .calc-scale,
[dir=rtl] .thr-row .ct{direction:ltr}
[dir=rtl] .top-row .n,
[dir=rtl] .usr-row .num,
[dir=rtl] .res-row .ac,
[dir=rtl] .arc-row .ct,
[dir=rtl] .if-row .tp,
[dir=rtl] .vpn-row .m.r,
[dir=rtl] .thr-row .ct{text-align:left}
[dir=rtl] .chart-hd span{margin-inline-start:auto}