/* RUSCUS tanitim sitesi — ortak tasarim sistemi.
 *
 * Dort sayfa da bu dosyayi kullaniyor. Stil her sayfaya kopyalansaydi bir
 * renk degisikligi dort dosyada dort ayri duzeltme olurdu.
 *
 * Site yalniz KOYU tema. Acik varyant yok: sayfa yildiz alani ve isiltilar
 * uzerine kurulu, ayni duzen beyaz zeminde calismiyor. Yonetici paneli
 * (panel.ruscus.net) beyaz; iki yuzeyin ayri gorunmesi kasitli.
 */

:root {
  color-scheme: dark;
  --zemin:#070a14;
  --zemin2:#0c1120;
  --yuzey:rgba(255,255,255,.035);
  --yuzey2:rgba(255,255,255,.06);
  --cizgi:rgba(255,255,255,.08);
  --cizgi2:rgba(255,255,255,.14);
  --metin:#e9edf7;
  --metin2:#8d97ad;
  --mor:#8b7cf6;
  --mavi:#5b93f5;
  --cam:#3fd2e8;
  --gecis:linear-gradient(100deg,var(--mor),var(--mavi) 55%,var(--cam));
  --iyi:#37d399;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  /* Ana sayfanin govdesi bir ara `class="giris"` tasiyordu ve kahramandaki
     giris paragrafinin sinifi da `.giris`ti. Sonuc: `.giris{max-width:56ch}`
     KURALI GOVDEYE UYGULANIYORDU — sayfa 617 piksele (56ch) sikisip sola
     yigiliyordu; uc farkli tarayicida ayni deger goruldugu icin uzun sure
     disaridan gelen bir kisit sanildi. Govde sinifi `tam-ekran` oldu.
     `min-width` ders olsun diye duruyor: ucuz bir emniyet kemeri, cunku
     CSS'te `min-width`, `max-width`'i yener. */
  min-width:100%;
  margin:0;background:var(--zemin);color:var(--metin);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* Zemin: iki genis isilti ve ince bir yildiz alani. Yildizlar tek bir
   `radial-gradient` deseni — gorsel dosyasi indirmeden ayni etki. */
.fon{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fon::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(52vw 46vw at 78% 8%, rgba(123,108,246,.20), transparent 62%),
    radial-gradient(46vw 40vw at 8% 82%, rgba(63,210,232,.13), transparent 60%),
    radial-gradient(70vw 50vw at 50% 120%, rgba(91,147,245,.12), transparent 65%);
}
.fon::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 31% 68%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 47% 14%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px at 62% 47%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 74% 78%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 55% 92%, rgba(255,255,255,.35), transparent);
  background-size:520px 520px;
}

.kap{width:100%;max-width:1180px;margin:0 auto;padding:0 30px}

/* Duzen bir KAPSAYICI. Genislik kirilmalari `@container` ile yaziliyor,
   `@media` ile degil: pencere genis ama sayfanin kutusu dar oldugunda
   pencereye bakan kirilmalar tetiklenmiyor ve kahraman iki sutunu 600
   piksele sikistiriyor. Kapsayici sorgusu ogenin gercek genisligine bakar. */
.duzen{container-type:inline-size;container-name:duzen}

/* ------------------------------------------------------------------ logo */
/* Yazi yok, yalnizca isaret (7 Eylül 2026 karari). "RUSCUS" adi metinlerde
   ve sayfa basliklarinda geciyor; kilitte tekrarlamasi gereksiz. */
.marka{display:inline-flex;align-items:center;flex:none}
/* Isaretin ortasindaki arti `currentColor`. Beyaz yerine mavi: logonun
   kendi dosyasinda o arti koyu lacivert ve koyu zeminde kayboluyor. Bu deger
   sayfanin baslik gecisinden aliniyor (%35 noktasi), yani marka ile yuzey
   ayni renkte konusuyor. */
.isaret{display:block;color:#6C8BF5}
.yuklenen{display:none;width:auto;max-width:340px}
.ozel-logo .isaret{display:none}
.ozel-logo .yuklenen{display:block}

/* --------------------------------------------------------------- ust bar */
.ust{display:flex;align-items:center;gap:16px;padding:18px 0}
.ust .sag{margin-left:auto;display:flex;align-items:center;gap:10px}

.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s,opacity .15s;
}
.dugme:hover{transform:translateY(-1px)}
.d-dolu{background:var(--gecis);color:#0a0f1c}
.d-dolu:hover{opacity:.92}
.d-bos{border-color:var(--cizgi2);color:var(--metin);background:var(--yuzey)}
.d-bos:hover{border-color:rgba(255,255,255,.3)}
.d-duz{color:var(--metin2)}
.d-duz:hover{color:var(--metin)}

/* ---------------------------------------------------------------- ortak */
.rozet{
  display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--metin2);border:1px solid var(--cizgi);border-radius:999px;
  padding:7px 16px;background:var(--yuzey);backdrop-filter:blur(8px);
}
.rozet i{width:7px;height:7px;border-radius:99px;background:var(--iyi);flex:none;
  box-shadow:0 0 10px var(--iyi)}

h1{font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-.035em;
  margin:0;font-weight:700}
h2{font-size:clamp(26px,3.4vw,36px);line-height:1.14;letter-spacing:-.03em;margin:0 0 12px}
h3{font-size:17.5px;letter-spacing:-.015em;margin:0 0 8px}
.gecisli{background:var(--gecis);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.giris{color:var(--metin2);font-size:17.5px;max-width:56ch;margin:0}

.kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:18px;
  padding:24px;backdrop-filter:blur(6px)}
.kart p{color:var(--metin2);font-size:14.8px;margin:0}
.izgara{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}

.etiket{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  border:1px solid var(--cizgi2);border-radius:999px;padding:3px 10px;color:var(--metin2);
  white-space:nowrap}
.e-canli{color:var(--iyi);border-color:rgba(55,211,153,.4)}

/* --------------------------------------------------------------- terminal */
.terminal{background:rgba(6,10,20,.72);border:1px solid var(--cizgi);
  border-radius:16px;overflow:hidden;backdrop-filter:blur(10px);
  box-shadow:0 28px 70px rgba(0,0,0,.5)}
.terminal .cubuk{display:flex;align-items:center;gap:8px;padding:12px 15px;
  border-bottom:1px solid var(--cizgi);color:var(--metin2);font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.terminal .cubuk b{width:11px;height:11px;border-radius:99px;background:var(--cizgi2);
  display:inline-block}
.terminal pre{margin:0;padding:20px;overflow-x:auto;
  font:13px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c9d4e6;
  /* Dokuz satirlik yer bastan ayriliyor. Yukseklik yazarken olculseydi
     (denendi) yazi tipi yuklenmeden ya da kart gorunur olmadan olcum sifir
     donuyor ve kart bos bir kutuya duruyordu. Satir sayisi degisirse bu
     sayi da degismeli. */
  min-height:calc(9 * 1.85em + 40px)}
/* Yazma animasyonu. Kutu once tam metinle olculup `min-height` aliyor;
   olcmeden yazdirmak, satirlar eklendikce kartin buyumesine ve kahramanin
   her karakterde yeniden yerlesmesine yol acardi. */
.terminal .imlec{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;
  background:var(--cam);margin-left:2px;animation:yanip-son 1s steps(2) infinite}
@keyframes yanip-son{50%{opacity:0}}
/* Hareketi azaltilmis kullanicida animasyon hic baslamiyor (betikte
   denetleniyor); imlec de yanip sonmuyor. */
@media (prefers-reduced-motion:reduce){
  .terminal .imlec{animation:none}
}
.terminal .y{color:var(--metin2)}
.terminal .a{color:var(--cam)}
.terminal .m{color:var(--mor)}
.terminal .s{color:#9bd1a0}

/* -------------------------------------------------------------- sayilar */
.sayilar{display:flex;gap:48px;flex-wrap:wrap}
.sayilar .deger{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  background:var(--gecis);-webkit-background-clip:text;background-clip:text;color:transparent}
.sayilar .ad{color:var(--metin2);font-size:13.5px;margin-top:2px}

/* ------------------------------------------------------------ ikon dugme */
/* Alttaki dock kaldirildi (7 Eylül 2026 karari). Gezinme sag ustte iki
   ikon: Projects ve Panel. Hakkinda/iletisim alt bilgide — ana sayfada bile,
   cunku sayfa kaydirmasiz ve alt bilgi ekranin icinde duruyor. */
.ikonlar{display:flex;gap:8px;align-items:center}
.ikon{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 15px;border-radius:15px;color:var(--metin2);font-size:11.5px;
  font-weight:600;white-space:nowrap;border:1px solid var(--cizgi);
  background:var(--yuzey);transition:color .15s,border-color .15s,background .15s}
.ikon:hover{color:var(--metin);border-color:var(--cizgi2);background:var(--yuzey2)}
.ikon.secili{color:#fff;background:var(--gecis);border-color:transparent}
.ikon svg{width:19px;height:19px}

/* ------------------------------------------------------------ urun karti */
/* Panel secim sayfasi. Kart komple tiklanabilir: bayi "hangi kapi benim"
   sorusunu bir bakista cevaplayabilmeli, kucuk bir baglantiyi aramamali. */
.urun-kart{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:26px;transition:border-color .15s,transform .15s,background .15s}
a.urun-kart:hover{border-color:var(--cizgi2);transform:translateY(-2px);
  background:var(--yuzey2)}
.urun-kart.pasif{opacity:.5}
.urun-isaret{width:52px;height:52px;border-radius:14px;display:grid;
  place-items:center;margin:0 0 14px}
.urun-isaret svg{width:30px;height:30px}
/* Ember kendi uygulamasinin renklerinde: koyu zemin, gok mavisi vurgu.
   Bayi paneli acildiginda ayni renkleri gorecek. */
.urun-isaret.ember{background:#080B12;color:#38BDF8;
  border:1px solid rgba(56,189,248,.28)}
.urun-isaret.bekleyen{background:var(--yuzey2);color:var(--metin2);
  border:1px solid var(--cizgi)}
.urun-ad{font-size:20px;font-weight:670;letter-spacing:-.02em}
.urun-alt{color:var(--metin2);font-size:14px}
.urun-not{color:var(--metin2);font-size:12.5px;margin-top:8px;max-width:40ch;
  line-height:1.5}
.urun-yol{margin-top:12px;font-size:13px;color:var(--cam);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.urun-kart.pasif .urun-yol{color:var(--metin2)}

/* ---------------------------------------------------------- ember sayfasi */
/* Ember'in kendi paleti. Tanitim sayfasindaki maketler uygulamanin gercek
   renklerinde: ziyaretci indirdiginde ayni yuzeyi gorsun. */
.ember{--e-zemin:#080B12;--e-yuzey:#0F1622;--e-cizgi:#1C2634;--e-vurgu:#38BDF8;
  --e-metin:#E6EDF5;--e-metin2:#8494A8}

/* Isaret marka adiyla ayni agirlikta: `clamp` degerleri h2 ile ayni olcekte
   buyuyup kuculuyor ki iki oge her ekranda ayni satirda dursun. */
.ember-kilit{display:flex;align-items:center;gap:20px;margin:18px 0 0}
.ember-kilit .urun-isaret{margin:0;
  width:clamp(52px,7.2vw,74px);height:clamp(52px,7.2vw,74px)}
.ember-kilit .urun-isaret svg{width:58%;height:58%}
.ember-yuklenen{display:none;height:clamp(38px,5.2vw,54px);width:auto;
  max-width:200px;object-fit:contain}

.uyari-serit{display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08);
  color:#7dd3fc;border-radius:999px;padding:7px 16px;font-size:12.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* Uygulama maketi: yatay cerceve. Ember yalnizca yatay calisiyor, maket de
   oyle olmali — dikey bir telefon cizmek urunu yanlis tanitirdi. */
.maket{background:var(--e-zemin);border:1px solid var(--e-cizgi);border-radius:14px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);color:var(--e-metin);
  font-size:12px;line-height:1.5}
.maket .m-ust{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--e-cizgi)}
.maket .m-ust .m-ad{font-weight:700;letter-spacing:-.01em;font-size:13px}
.maket .m-ust .m-sag{margin-left:auto;display:flex;gap:6px}
.maket .m-dugme{border:1px solid var(--e-cizgi);border-radius:8px;padding:4px 9px;
  color:var(--e-metin2);font-size:11px}
.maket .m-govde{padding:18px 16px;min-height:150px}
.maket .m-orta{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:14px 10px}
.maket .m-baslik{font-size:14px;font-weight:650}
.maket .m-alt{color:var(--e-metin2);max-width:38ch}
.maket .m-kimlik{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--e-cizgi);border-radius:8px;padding:6px 12px;
  color:var(--e-vurgu);background:rgba(56,189,248,.07);letter-spacing:.04em}
.maket .m-rozet{display:inline-block;border:1px solid rgba(224,163,58,.4);
  color:#e0a33a;border-radius:999px;padding:2px 10px;font-size:11px}

.m-diller{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m-diller span{border:1px solid var(--e-cizgi);border-radius:8px;padding:6px 9px;
  color:var(--e-metin2)}
.m-diller span.acik{border-color:var(--e-vurgu);color:var(--e-vurgu);
  background:rgba(56,189,248,.09)}

.m-ayar{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.m-ayar div{border:1px solid var(--e-cizgi);border-radius:9px;padding:9px 11px}
.m-ayar b{display:block;font-weight:600;font-size:12px;margin:0 0 2px}
.m-ayar span{color:var(--e-metin2);font-size:11px}
.m-anahtar{float:right;width:26px;height:15px;border-radius:99px;
  background:var(--e-vurgu);position:relative}
.m-anahtar.kapali{background:var(--e-cizgi)}
.m-anahtar::after{content:"";position:absolute;top:2px;right:2px;width:11px;
  height:11px;border-radius:99px;background:#fff}
.m-anahtar.kapali::after{right:auto;left:2px;background:var(--e-metin2)}

.m-bolumler{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-bolumler div{border:1px solid var(--e-cizgi);border-radius:10px;padding:11px;
  text-align:center}
.m-bolumler b{display:block;font-size:17px;color:var(--e-vurgu);font-weight:700}
.m-bolumler span{color:var(--e-metin2);font-size:11px}

.maket-ad{color:var(--metin2);font-size:12.5px;margin:9px 2px 0;text-align:center}

/* ------------------------------------------------------------- alt bilgi */
.altbilgi{border-top:1px solid var(--cizgi);padding:20px 0;color:var(--metin2);
  font-size:13.5px}
.altbilgi .sira{display:flex;gap:14px 30px;align-items:center;flex-wrap:wrap}
.altbilgi b{color:var(--metin);font-weight:650}
.altbilgi .adres{font-style:normal;line-height:1.5}
.altbilgi .baglar{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.altbilgi a:hover{color:var(--metin)}
.altbilgi .vurgulu{color:var(--cam)}

/* ------------------------------------------------------- sayfa duzenleri */
/* Ana sayfa kaydirmasiz — AMA yalnizca sigdigi yerde.
   `100dvh` mobil tarayici cubuklari icin; `100vh` orada sayfayi cubugun
   altina tasiriyor.

   Kaydirmayi kosulsuz kapatmak, kisa pencerede (yatay telefon, bolunmus
   ekran, 450 piksellik bir onizleme) basligi ve dugmeleri kirpiyordu:
   goruntulenemeyen icerik, kaydirilabilir icerikten kotudur. Bu yuzden
   kilit yalnizca 720 pikselden uzun pencerelerde. */
body.tam-ekran .duzen{display:flex;flex-direction:column;min-height:100dvh}
/* IZGARA, esnek kutu degil. `display:flex` iken `.kap` bir esnek oge oluyor
   ve `width:100%` + `max-width` beklendigi gibi cozulmuyordu: kahraman genis
   ekranda ~650 pikselde kalip sola yapisiyordu. Izgarada ogeler varsayilan
   olarak satiri dolduruyor, `.kap`in `margin:0 auto`si ortaliyor. */
body.tam-ekran main{flex:1;display:grid;align-content:center;min-height:0;
  padding:20px 0 12px}

/* `overflow:hidden` ile kilitlemek denendi, GERI ALINDI: icerik kutuya
   sigmadiginda ortalanan blok yukari tasip ust barin altina giriyor ve
   basligin ilk satiri kirpiliyordu. Kaydirma yoklugu artik SIGDIRARAK
   saglaniyor — asagidaki olcek kademeleri kahramani alcak pencerelerde
   kucultuyor, sigmadigi uc durumda sayfa birkac piksel kayiyor.
   Gorulemeyen icerik, kaydirilabilir icerikten kotudur.
   `safe center` de bunun icin: yer kalmadiginda ortalamayi birakip
   ust kenardan basliyor. */

/* Alcak pencerede yazi ve bosluklar kuculuyor ki kilit devreye girdiginde
   kirpacak bir sey kalmasin. */
@media (max-height:900px){
  body.tam-ekran h1{font-size:clamp(29px,3.9vw,42px)}
  body.tam-ekran .giris{font-size:16px}
  body.tam-ekran .kahraman{gap:38px}
  body.tam-ekran .kahraman .sol{gap:18px}
  body.tam-ekran .sayilar{gap:34px}
  body.tam-ekran .sayilar .deger{font-size:24px}
  body.tam-ekran .ust{padding:15px 0}
  body.tam-ekran .isaret{width:66px;height:66px}
  body.tam-ekran .yuklenen{height:60px}
  body.tam-ekran main{padding:12px 0}
}
@media (max-height:760px){
  body.tam-ekran h1{font-size:clamp(27px,3.4vw,36px)}
  body.tam-ekran .kahraman .sol{gap:15px}
  body.tam-ekran .rozet{padding:5px 13px;font-size:12.5px}
  body.tam-ekran .sayilar .deger{font-size:21px}
  body.tam-ekran .terminal pre{padding:15px;font-size:12px;line-height:1.7}
}

/* Ic sayfalar kaydiriliyor; dock'un altinda kalmasin diye alt bosluk. */
body.ic main{padding:16px 0 46px}

.kahraman{display:grid;gap:52px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);width:100%}
.kahraman .sol{display:flex;flex-direction:column;gap:26px;align-items:flex-start}

/* Bolum ayraci: canli / yapim asamasinda / musteri isi. Kartlarin hepsi ayni
   izgarada dururken ziyaretci hangisinin bugun kullanilabildigini
   ayirt edemiyordu. */
.bolum-etiket{display:flex;align-items:center;gap:14px;margin:0 0 16px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--metin2)}
.bolum-etiket::after{content:"";flex:1;height:1px;background:var(--cizgi)}
.bolum-etiket .nokta{width:7px;height:7px;border-radius:99px;background:var(--metin2);
  flex:none}
.bolum-etiket .nokta.canli{background:var(--iyi);box-shadow:0 0 10px var(--iyi)}

.sayfa-basi{max-width:62ch;margin:0 0 34px}
.sayfa-basi p{color:var(--metin2);font-size:17px;margin:12px 0 0}

dl.kunye{display:grid;gap:18px;margin:0}
dl.kunye dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--metin2)}
dl.kunye dd{margin:4px 0 0;font-size:16px}

ul.duz{list-style:none;margin:0;padding:0;display:grid;gap:12px}
ul.duz li{display:flex;gap:12px;color:var(--metin2);font-size:15px;line-height:1.6}
ul.duz svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--cam)}
ul.duz b{color:var(--metin);font-weight:600}

/* ---------------------------------------------------------------- daralma */
@container duzen (max-width:940px){
  .kahraman{grid-template-columns:1fr;gap:34px}
  /* Dar alanda terminal karti cizilmiyor: ana sayfa kaydirmasiz oldugu icin
     ikinci sutun ekrani tasiriyor. */
  body.tam-ekran .kahraman .sag{display:none}
  .sayilar{gap:30px}
}
@container duzen (max-width:640px){
  .kap{padding:0 20px}
  body.tam-ekran main{padding-bottom:8px}
  .altbilgi .baglar{margin-left:0}
  .altbilgi .sira{gap:10px 22px}
}