@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ============================================================
   Renex Software açılış sayfası — tek dosya, duyarlı.
   Kırılımlar container query ile: sayfa 100vw olduğunda
   media query ile aynı davranır; tasarım canvas'ında da
   çerçeve genişliğine göre çalışır.
   ≤640 telefon · 641–1023 tablet · 1024–1799 masaüstü · ≥1800 ultra geniş (≥2400, ≥3000 daha geniş içerik)
   Tokenlar RenexSoftware tasarım sistemi (Osiloskop paleti).
   ============================================================ */
:root{
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  --bg:#EBF3F3;--card:#FFFFFF;--sunken:#E0EBEB;
  --b1:#CBDADA;--b2:#A9BEBE;--b3:#6F8687;
  --t1:#121F21;--t2:#1E2E30;--t3:#47595A;--t4:#5C7274;
  --acc:#06697F;--acc-h:#044A5B;--acc-ink:#06697F;--acc-on:#FFFFFF;
  --run:#0A7742;--run-bg:#DEFAEA;--run-ink:#0A7742;
  --info:#06697F;--info-bg:#DFF2F6;--info-ink:#044A5B;
  --idle:#6F8687;--idle-bg:#E0EBEB;--idle-ink:#47595A;
  --warn:#FFB224;

  --gutter:16px;--wrap:1200px;
  --sec-y:56px;--sec-y-sm:40px;
  --h1:34px;--h2:28px;--h3:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg)}
.site{container-type:inline-size;container-name:site;width:100%;min-height:100%;background:var(--bg)}
.page{color:var(--t1);font-family:var(--font-sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--acc-ink)}a:hover{color:var(--acc-h)}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
h1,h2,h3,p{margin:0}
h1{font-size:var(--h1);font-weight:600;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
h2{font-size:var(--h2);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
h3{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sec--white{background:var(--card);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)}
.sec--sunken{background:var(--sunken)}
.intro{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-bottom:24px}
.lead{color:var(--t2);max-width:60ch;text-wrap:pretty}
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.label-sm{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}
.mono{font-family:var(--font-mono);font-size:11.5px;color:var(--t3)}
.small{font-size:13.5px;line-height:1.55;color:var(--t2)}
.desc{font-size:12.5px;line-height:1.5;color:var(--t3)}

/* Kontroller — köşe yarıçapı sıfır, yükseklik sabit */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;font-family:var(--font-sans);font-size:12.5px;font-weight:500;white-space:nowrap;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background 120ms cubic-bezier(.2,.6,.2,1),border-color 120ms cubic-bezier(.2,.6,.2,1)}
.btn--primary{background:var(--acc);color:var(--acc-on);border-color:var(--acc)}
.btn--primary:hover{background:var(--acc-h);border-color:var(--acc-h);color:var(--acc-on)}
.btn--secondary{background:transparent;color:var(--t2);border-color:var(--b2)}
.btn--secondary:hover{color:var(--t1);border-color:var(--b3)}
.btn--lg{height:56px;padding:0 24px;font-size:15.5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;background:currentColor}
.chip--run{background:var(--run-bg);color:var(--run-ink)}
.chip--info{background:var(--info-bg);color:var(--info-ink)}
.chip--idle{background:var(--idle-bg);color:var(--idle-ink)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}

/* Üst çubuk */
.nav{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--b1)}
.nav .wrap{height:56px;display:flex;align-items:center;gap:10px}
.wordmark{display:flex;align-items:center;flex:none}
.wordmark img{display:block;height:32px;width:auto}
.links{display:none;gap:22px;font-size:12.5px}
.links a{color:var(--t2);text-decoration:none}.links a:hover{color:var(--t1)}
.nav .btn{margin-left:auto;height:44px}
.menu{margin-left:auto;position:relative}
.lang{margin-left:auto;height:44px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--b2);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--t2);text-decoration:none}
.lang:hover{color:var(--t1);border-color:var(--b3)}
.nav .lang ~ .btn,.nav .lang ~ .menu{margin-left:0}
.menu summary{list-style:none;cursor:pointer;height:44px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid var(--b2);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--sunken)}
.menu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--card);border:1px solid var(--b1);box-shadow:0 2px 8px rgba(15,19,23,.12);display:flex;flex-direction:column}
.menu-list a{padding:12px 16px;font-size:13.5px;color:var(--t2);text-decoration:none;border-bottom:1px solid var(--b1)}
.menu-list a:last-child{border-bottom:0}
.menu-list a.sub{padding:8px 16px 8px 32px;font-size:12.5px;line-height:1.35;color:var(--t3)}
/* Projeler açılır listesi: üstüne gelince ya da klavye odağında açılır, JS gerekmez */
.dd{position:relative;display:flex;align-items:center}
.dd-menu{display:none;position:absolute;top:100%;left:-16px;padding-top:12px;z-index:11}
.dd-menu::before{content:"";position:absolute;inset:12px 0 0;background:var(--card);border:1px solid var(--b1);box-shadow:0 8px 24px rgba(15,19,23,.10);z-index:-1}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:flex;flex-direction:column}
.links .dd-menu a{white-space:nowrap;padding:10px 16px;border-bottom:1px solid var(--b1)}
.links .dd-menu a:last-child{border-bottom:0}

/* Devre: hero panosu site.js'te svg.hero-fx içine çizilir, izleri haritanın kenarında biter. Pano sabittir;
   fareye yakın bölgede .lit kopyası yuvarlak maskeyle belirir. Başlık çubuğunda alt çizgi soldan imlece kadar yanar. */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
/* Arka plan fotoğrafı: Hemant Kanojiya, Unsplash Lisansı (unsplash.com/photos/Ww5jTiOCcug), gri tonlu indirildi.
   Üstteki zemin rengi metnin olduğu tarafta tam örter; telefonda metin üstte olduğu için yukarıdan aşağı açılır. */
/* Dekoratif: CSS arka planı olarak kalır, alt metni gerekmez. image-set desteklemeyen tarayıcı bir önceki satırdaki JPEG'i kullanır. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat;
  background-image:linear-gradient(180deg,var(--bg) 0%,rgba(235,243,243,.96) 45%,rgba(235,243,243,.74) 75%,rgba(235,243,243,.64) 100%),url(/hero-bg.jpg?v=8518f8cc);
  background-image:linear-gradient(180deg,var(--bg) 0%,rgba(235,243,243,.96) 45%,rgba(235,243,243,.74) 75%,rgba(235,243,243,.64) 100%),image-set(url(/hero-bg-1280.webp?v=2f5e3e17) type("image/webp"),url(/hero-bg.jpg?v=8518f8cc) type("image/jpeg"))}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-fx .bd{fill:none;stroke:#C3D5D8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-fx .bp{fill:var(--bg);stroke:#A9BEBE;stroke-width:1.5}
.hero-fx .lit{opacity:0;transition:opacity 300ms cubic-bezier(.2,.6,.2,1)}
.hero-fx.on .lit{opacity:1}
.hero-fx .lit .bd{stroke:var(--acc)}
.hero-fx .lit .bp{stroke:var(--run)}
.nav::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--mx,0px);background:var(--acc);opacity:0;pointer-events:none;transition:width 180ms cubic-bezier(.2,.6,.2,1),opacity 300ms}
.nav::before{content:"";position:absolute;bottom:-4px;left:calc(var(--mx,0px) - 4px);width:8px;height:8px;border-radius:50%;background:var(--run);opacity:0;pointer-events:none;transition:left 180ms cubic-bezier(.2,.6,.2,1),opacity 300ms}
.nav.lit::after,.nav.lit::before{opacity:1}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero-copy .lead{max-width:54ch}
.cta{display:flex;flex-direction:column;gap:10px;margin-top:10px}

/* Hero: entegrasyon haritası (site.js sırayla bir departmanı vurgular) */
.device-col{display:flex;flex-direction:column;gap:10px}
.imap{background:var(--card);border:1px solid var(--b1);box-shadow:0 24px 48px -32px rgba(6,105,127,.35);display:flex;flex-direction:column}
.imap svg{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;cursor:default;background:radial-gradient(ellipse at 50% 45%,rgba(6,105,127,.06),transparent 60%)}
.imap .grid line{stroke:rgba(6,105,127,.06)}
.imap .grid .ax{stroke:rgba(6,105,127,.16);stroke-dasharray:2 4}
.imap .tr{fill:none;stroke:#C3D5D8;stroke-width:1.2;transition:stroke 400ms}
.imap .tr.on{stroke:var(--acc);stroke-width:2}
.imap .pks circle{fill:var(--run)}
.imap .nd .ring{fill:var(--card);stroke:var(--b2);stroke-width:1.2;transition:fill 400ms,stroke 400ms}
.imap .nd .ic{fill:none;stroke:#557479;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke 400ms}
.imap .nd .n{font-family:var(--font-sans);font-size:21px;font-weight:500;fill:var(--t1)}
.imap .nd .s{display:none;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;fill:var(--t4)}
.imap .nd.on .ring{fill:var(--info-bg);stroke:var(--acc);stroke-width:1.8}
.imap.pickable .nd{cursor:pointer;outline:none}
.imap.pickable .nd:hover .ring{stroke:var(--acc)}
.imap.pickable .nd:focus-visible .ring{stroke:var(--acc);stroke-width:3}
.imap .nd.on .ic{stroke:var(--acc)}
.imap .nd.on .n{fill:var(--acc-ink);font-weight:600}
.imap .nd.on .s{fill:var(--run-ink)}
.imap .core .disc{fill:var(--bg);stroke:var(--acc);stroke-width:1.6}
.imap .core .halo{fill:none;stroke:var(--acc);stroke-opacity:.3;transform-origin:300px 195px}
.imap .core .wave{fill:none;stroke:var(--run);stroke-width:1.8}
.imap .core .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;fill:var(--acc-ink)}
.imap .core .t{font-family:var(--font-sans);font-size:18px;font-weight:600;fill:var(--t1)}
.imap-cap{position:relative;border-top:1px solid var(--b1);background:var(--bg);padding:16px 18px 18px;min-height:124px;display:flex;flex-direction:column;gap:6px}
.imap-cap > *{transition:opacity 300ms}
.imap-cap.fade > :not(.imap-dots){opacity:0}
.imap-cap .who{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink)}
.imap-cap .q{font-size:16px;line-height:1.45;color:var(--t1)}
.imap-cap .sol{font-size:13.5px;color:var(--t3)}
.imap-cap .sol b{font-weight:600;color:var(--acc-ink)}
.imap-dots{position:absolute;top:18px;right:18px;display:flex;gap:5px}
.imap-dots i{width:14px;height:3px;background:var(--b1)}
.imap-dots i.on{background:var(--run)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}



/* Sorun */
.gaps,.stds{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--b1);border:1px solid var(--b1)}
.gap{background:var(--card);padding:18px;display:flex;flex-direction:column;gap:8px}
.gap .code{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--t4)}
.gap .sol-label{margin-top:auto;padding-top:10px;border-top:1px solid var(--b1);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--info-ink)}
.gap .sol{color:var(--t1)}
/* Sorun kartları: başlık, metin, çözüm etiketi ve çözüm satırları kartlar arasında hizalı */
.gaps > .gap{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:8px}
.gaps > .gap .sol-label{margin-top:0;align-self:end}
.sub{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.std-block{margin-top:40px}
.std-title{font-size:22px;max-width:760px}
.std-block .sub .small{max-width:60ch}
.statement{margin-top:22px;background:var(--sunken);border:1px solid var(--b1);padding:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.statement .label{color:var(--info-ink)}
.statement p{color:var(--t1)}

/* Proje ve ürün panelleri */
.panels{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.panel{background:var(--card);border:1px solid var(--b1);display:flex;flex-direction:column}
/* Proje kartları: başlık, ekran, metin, modüller ve alt şerit kartlar arasında hizalı; hub kartında modül yok */
.panels > .panel{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.panels--hub > .panel{grid-row:span 4}
.panels > .panel .panel-foot{margin-top:0}
.panel-head{display:flex;flex-direction:column;gap:10px;padding:18px;border-bottom:1px solid var(--b1)}
.panel-head .chip{align-self:flex-start}
.panel > .small{padding:16px 18px}
.panel > .small p + p{margin-top:10px}
.ph-link{color:inherit;text-decoration:none}
.ph-link:hover{color:var(--acc-ink)}

/* Proje sayfası */
.crumbs{margin-bottom:18px}
.crumbs a{color:var(--t4);text-decoration:none}
.crumbs a:hover{color:var(--t1)}
.detail{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--b1);border:1px solid var(--b1)}
.detail h2{font-size:var(--h3);letter-spacing:-.02em;line-height:1.2}
.mods{display:flex;flex-direction:column;margin:0 18px}
.mods-head{padding:6px 0;border-bottom:2px solid var(--b3);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}
.mod{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--b1)}
.mod:last-child{border-bottom:0}
.mod b{font-size:13.5px;font-weight:500;color:var(--t1)}
.panel-foot{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding:14px 18px;background:var(--bg);border-top:1px solid var(--b1)}
.panel-foot .val{font-family:var(--font-mono);font-size:11.5px;color:var(--t2)}
.panel-foot a{font-family:var(--font-mono);font-size:11.5px;text-decoration:none;white-space:nowrap}

.product{background:var(--card);border:1px solid var(--b1);display:grid;grid-template-columns:minmax(0,1fr)}
.product-copy{padding:18px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--b1)}
.product-copy h3{font-size:22px}
.product-copy .cta{margin-top:auto}
.product-copy .btn{align-self:flex-start}
.product-shot{padding:18px;display:flex;align-items:center;background:var(--bg)}
.mod-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.mod-list li{padding:4px 8px;border:1px solid var(--b1);background:var(--bg);font-size:12.5px;color:var(--t2)}
.panel-foot .foot-links{display:flex;gap:16px;flex-wrap:wrap}
.hub-link{margin-top:20px;font-family:var(--font-mono);font-size:12px}
.hub-link a{text-decoration:none}
.meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.btn--ext{height:36px}

/* Ekran görüntüleri: küçük resim büyük dosyaya bağlıdır, site.js tıklamayı görüntüleyiciye çevirir */
.shot{margin:0}
.shot-link{display:block;position:relative;background:var(--card);border:1px solid var(--b1);cursor:zoom-in}
.shot-link img{display:block;width:100%;height:auto}
.shot-link::after{content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5 9 7M6.5 13.5h-4v-4M2.5 13.5 7 9'/%3E%3C/svg%3E") center/16px no-repeat;opacity:.85}
.shot-link:hover{border-color:var(--b3)}
.shot-link:hover::after{opacity:1}
.shot figcaption{margin-top:8px;font-size:13px;color:var(--t3)}
.shot--lead{margin-bottom:28px}
.shot--card .shot-link{border:0;border-bottom:1px solid var(--b1);overflow:hidden}
.shot--card img{aspect-ratio:3/2;object-fit:cover;object-position:left top}
.product-shot .shot{width:100%}
.shot-note{margin-top:18px;font-size:12px;color:var(--t3)}

/* Etiket ve kural çiftleri (QMS "Onay ve kayıt") */
.rules{margin-top:44px}
.rules h2{margin-bottom:14px;font-size:var(--h3)}
.rules dl{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--b1);border:1px solid var(--b1)}
.rules dt{padding:14px 18px 0;background:var(--card);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--info-ink)}
.rules dd{margin:0;padding:4px 18px 14px;background:var(--card);font-size:14px;color:var(--t1)}

/* Ürün sayfası modül galerisi: menüdeki grup sırasıyla, her modül bir ekran ve bir cümle */
.mgroup + .mgroup{margin-top:36px}
.mgroup-title{margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--b3);font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mtile{background:var(--card);border:1px solid var(--b1);display:flex;flex-direction:column}
.mtile h4{padding:12px 14px 0;font-size:15px;font-weight:600;color:var(--t1)}
.mtile .small{padding:4px 14px 14px;font-size:13px}
.shot--tile .shot-link{border:0;border-bottom:1px solid var(--b1);overflow:hidden}
.shot--tile img{aspect-ratio:3/2;object-fit:cover;object-position:50% top}

/* Proje sayfası: iki metin bloğu ve yanında ekranı */
.rows{display:flex;flex-direction:column;gap:32px}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.row-text{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--b1);border:1px solid var(--b1)}
.row-text h2{font-size:var(--h3);letter-spacing:-.02em;line-height:1.2}

/* Görüntüleyici: .site dışında olduğu için container query yerine @media */
.viewer{width:min(96vw,1800px);height:94vh;max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--b2);background:var(--card);color:var(--t1);font-family:var(--font-sans)}
.viewer-btn{font-family:var(--font-sans)}
.viewer[open]{display:flex;flex-direction:column}
.viewer::backdrop{background:rgba(8,15,17,.82)}
.viewer-open{overflow:hidden}
.viewer-bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-bottom:1px solid var(--b1)}
.viewer-cap{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-count{font-family:var(--font-mono);font-size:11.5px;color:var(--t4)}
.viewer-btn{width:44px;height:44px;border:1px solid var(--b1);background:var(--card);color:var(--t1);font-size:20px;line-height:1;cursor:pointer}
.viewer-btn:hover{border-color:var(--b3)}
.viewer-btn[hidden]{display:none}
.viewer-stage{flex:1;min-height:0;overflow:auto;display:flex;background:var(--bg);touch-action:pan-x pan-y pinch-zoom}
.viewer-img{display:block;margin:auto;max-width:100%;max-height:100%;cursor:zoom-in}
.viewer.zoomed .viewer-img{max-width:none;max-height:none;cursor:zoom-out}
@media (max-width: 640px){
  .viewer{width:100vw;height:100vh;border:0}
  .viewer-cap{white-space:normal;font-size:12.5px}
}


/* Çalışma modeli: telefonda aşama aşama, genişte kulvar tablosu */
.model{display:flex;flex-direction:column;gap:1px;background:var(--b1);border:1px solid var(--b1)}
.model > div{background:var(--card);padding:14px 16px}
.model .corner{display:none}
.model .ph{display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--b3)}
.model .rl{display:none;background:var(--bg)}
.model .rl span,.model .cell::before{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--info-ink)}
.model .cell{font-size:13.5px;line-height:1.55;color:var(--t2);display:flex;flex-direction:column;gap:4px}
.model .cell::before{content:attr(data-label)}
/* telefon sırası: aşama, tesis, renex */
.model .ph:nth-of-type(2){order:1}.model .cell.tesis:nth-of-type(7){order:2}.model .cell.renex:nth-of-type(12){order:3}
.model .ph:nth-of-type(3){order:4}.model .cell.tesis:nth-of-type(8){order:5}.model .cell.renex:nth-of-type(13){order:6}
.model .ph:nth-of-type(4){order:7}.model .cell.tesis:nth-of-type(9){order:8}.model .cell.renex:nth-of-type(14){order:9}
.model .ph:nth-of-type(5){order:10}.model .cell.tesis:nth-of-type(10){order:11}.model .cell.renex:nth-of-type(15){order:12}

/* İletişim (koyu bant) */
.contact{--bg:#080F11;--card:#121F21;--b1:#17323A;--b2:#22454F;--t1:#EBF3F3;--t2:#CBDADA;--t3:#A9BEBE;--t4:#8AA0A1;--acc:#17A0BE;--acc-ink:#5CC0D6;--acc-on:#02262F;background:var(--bg);color:var(--t1)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.contact h2{color:var(--t1);font-size:30px}
.contact .lead{color:var(--t3)}
.contact-copy{display:flex;flex-direction:column;gap:14px}
.info{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:baseline;gap:10px 14px;margin-top:8px;padding-top:22px;border-top:1px solid var(--b1)}
.info .v{font-family:var(--font-mono);font-size:13px;color:var(--t1)}
.info a.v,.v-mail a{color:var(--acc-ink);text-decoration:none}
.v-mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.copy{height:44px;padding:0 12px;border:1px solid var(--b2);background:transparent;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);cursor:pointer;transition:color 120ms cubic-bezier(.2,.6,.2,1),border-color 120ms cubic-bezier(.2,.6,.2,1)}
.copy:hover{color:var(--t1);border-color:var(--b3)}
.copy[hidden]{display:none}
.form{background:var(--card);border:1px solid var(--b1);padding:18px;display:flex;flex-direction:column;gap:14px;margin:0}
.form .btn--primary{height:56px;font-size:15.5px}
.mail-pre{background:var(--bg);border:1px solid var(--b2);padding:12px 14px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--t2);white-space:pre-line}
.note{font-size:12.5px;line-height:1.5;color:var(--t3)}
section[id]{scroll-margin-top:80px}

footer{background:#080F11;border-top:1px solid #17323A;color:#8AA0A1;font-size:12.5px}
footer .wrap{display:flex;flex-direction:column;gap:8px;padding-top:22px;padding-bottom:22px}
footer .wordmark img{height:24px}
footer .label-sm{color:#8AA0A1}
footer a{color:#5CC0D6}

/* Hareket ve etkileşim — sınıfları site.js ekler; JS yoksa sayfa son haliyle görünür */
.links a{padding:4px 0;border-bottom:2px solid transparent;transition:color 120ms cubic-bezier(.2,.6,.2,1),border-color 120ms cubic-bezier(.2,.6,.2,1)}
.links a[aria-current]{color:var(--t1);border-bottom-color:var(--acc)}
.menu-list a[aria-current]{color:var(--t1);box-shadow:inset 3px 0 0 var(--acc)}
.btn:active{transform:translateY(1px)}
.btn--lg.btn--primary::after,.form .btn--primary::after{content:"";flex:none;width:7px;height:7px;margin-left:12px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform 160ms cubic-bezier(.2,.6,.2,1)}
.btn--lg.btn--primary:hover::after,.form .btn--primary:hover::after{transform:translateX(3px) rotate(45deg)}
.gap,.panel{transition:box-shadow 160ms cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){.gap:hover,.panel:hover{box-shadow:inset 0 2px 0 var(--acc)}}
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity 700ms cubic-bezier(.2,.6,.2,1),transform 700ms cubic-bezier(.2,.6,.2,1)}
.model .ph{position:relative}
.model .ph::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left}
.model .ph.on::after{transform:none;transition:transform 800ms cubic-bezier(.2,.6,.2,1) var(--fill-delay,0ms)}
@keyframes halo{from{transform:scale(1);opacity:1}to{transform:scale(1.45);opacity:0}}
/* Menü: liste yukarıdan aşağı açılır, satırlar sırayla gelir; negatif inset gölgeyi kesmez */
@keyframes menu-in{from{opacity:0;transform:translateY(-6px);clip-path:inset(-24px -24px 100% -24px)}to{opacity:1;transform:none;clip-path:inset(-24px)}}
@keyframes menu-item{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes menu-out{to{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  .imap .core .halo{animation:halo 2600ms ease-out infinite}
  .imap.done .core .halo{animation:none}
  .menu[open] .menu-list{animation:menu-in 480ms cubic-bezier(.2,.6,.2,1) both}
  .menu[open] .menu-list a{animation:menu-item 420ms cubic-bezier(.2,.6,.2,1) both}
  .menu[open] .menu-list a:nth-child(2){animation-delay:45ms}.menu[open] .menu-list a:nth-child(3){animation-delay:90ms}
  .menu[open] .menu-list a:nth-child(4){animation-delay:135ms}.menu[open] .menu-list a:nth-child(5){animation-delay:180ms}
  .menu[open] .menu-list a:nth-child(6){animation-delay:225ms}.menu[open] .menu-list a:nth-child(7){animation-delay:270ms}
  .menu[open] .menu-list a:nth-child(8){animation-delay:315ms}.menu[open] .menu-list a:nth-child(9){animation-delay:360ms}
  .menu.closing .menu-list{animation:menu-out 220ms cubic-bezier(.4,0,1,1) both}
  .menu summary{transition:background 200ms cubic-bezier(.2,.6,.2,1)}
}

/* ---------- ≥641: tablet ---------- */
@container site (min-width: 641px){
  .page{--gutter:32px;--sec-y:72px;--h1:44px;--h2:32px}
  .cta{flex-direction:row}
  .imap .nd .n{font-size:13px}
  .imap .nd .s{display:inline}
  .imap .core .k{font-size:10px}
  .imap .core .t{font-size:13px}
  .gaps,.stds,.detail,.row--text .row-text,.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gap{padding:22px}
  .statement{padding:22px;grid-template-columns:140px minmax(0,1fr);gap:22px;align-items:start}
  .statement .label{padding-top:4px}
  .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panels .panel:nth-child(3){grid-column:1 / -1}
  .panel-head,.panel > .small{padding-left:22px;padding-right:22px}
  .mods{margin:0 22px}
  .panel-foot{flex-direction:row;align-items:flex-end;justify-content:space-between;padding-left:22px;padding-right:22px}
  .panel-foot .col{display:flex;flex-direction:column;gap:4px}
  .product{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .product-copy{padding:22px;border-bottom:0;border-right:1px solid var(--b1)}
  .product-copy h3{font-size:24px}
  .product-mods{padding:22px}
  .product-mods .mod{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px}
  .contact .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .contact h2{font-size:38px}
  .info{grid-template-columns:120px minmax(0,1fr);gap:10px 22px}
  .form{padding:22px}
  .form .btn--primary{height:44px}
  footer .wrap{flex-direction:row;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:24px}
}

/* ---------- ≥1024: masaüstü ---------- */
@container site (min-width: 1024px){
  .page{--sec-y:96px;--h1:52px;--h2:34px}
  .nav .wrap{height:64px;gap:32px}
  .nav .btn,.lang,.copy{height:36px}
  .links{display:flex}
  .menu{display:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(420px,600px);gap:56px;padding-top:88px;padding-bottom:88px}
  .hero::before{background-image:linear-gradient(90deg,var(--bg) 0%,rgba(235,243,243,.97) 30%,rgba(235,243,243,.73) 65%,rgba(235,243,243,.64) 100%),url(/hero-bg.jpg?v=8518f8cc);
    background-image:linear-gradient(90deg,var(--bg) 0%,rgba(235,243,243,.97) 30%,rgba(235,243,243,.73) 65%,rgba(235,243,243,.64) 100%),image-set(url(/hero-bg.webp?v=f6dc7b61) type("image/webp"),url(/hero-bg.jpg?v=8518f8cc) type("image/jpeg"))}
  .gaps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stds{grid-template-columns:repeat(5,minmax(0,1fr))}
  .detail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px}
  .row--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .row--flip .shot{order:2}
  .row--text{grid-template-columns:minmax(0,1fr)}
  .rows{gap:44px}
  .mgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rules dl{grid-template-columns:220px minmax(0,1fr)}
  .rules dt{padding:16px 18px}
  .rules dd{padding:16px 18px}
  .panels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .panels .panel:nth-child(3){grid-column:auto}
  .model{display:grid;grid-template-columns:150px repeat(4,minmax(0,1fr))}
  .model .corner{display:block;background:var(--sunken)}
  .model .rl{display:flex;align-items:flex-start}
  .model .cell::before{display:none}
  .model > div{order:0 !important}
  .contact .wrap{gap:56px;padding-top:104px;padding-bottom:104px}
  /* RenexBase giriş ekranındaki devre deseni; sağ altta, form kartının arkasında kalır, metnin altına girmez */
  .contact{background-image:url(/circuit-pattern-dark.svg?v=734c64f4);background-position:right bottom;background-repeat:no-repeat}
  .sec--sunken{background-image:url(/circuit-pattern.svg?v=d9b29a32);background-position:left bottom;background-repeat:no-repeat}
}

/* ---------- ≥1800: ultra geniş ---------- */
@container site (min-width: 1800px){
  .page{--wrap:1360px;--h1:60px;--h2:38px;font-size:16.5px}
  .hero .wrap{grid-template-columns:minmax(0,1fr) 680px;gap:80px;padding-top:112px;padding-bottom:112px}
  .hero-copy .lead{max-width:58ch}
  .small{font-size:14.5px}
  .desc{font-size:13.5px}
  .model{grid-template-columns:170px repeat(4,minmax(0,1fr))}
}
@container site (min-width: 2400px){
  .page{--wrap:1600px}
}
@container site (min-width: 3000px){
  .page{--wrap:1800px}
  .hero .wrap{grid-template-columns:minmax(0,1fr) 760px}
}

/* ---------- ≤420: dar telefon — başlıktaki dört öğe tek satıra sığar ---------- */
@container site (max-width: 420px){
  .nav .wrap{gap:8px}
  .nav .wordmark img{height:28px;width:auto}
  .nav .btn{padding:0 12px}
  .menu summary{padding:0 10px}
}
/* ≤360: başlıkta buton yerine hero'daki büyük "Proje talebi" butonu ve menüdeki İletişim kalır */
@container site (max-width: 360px){
  .nav .btn{display:none}
  .nav .lang{margin-left:auto}
}

@media (prefers-reduced-motion: reduce){.btn,.btn::after,.links a,.gap,.panel,.model .ph.on::after,.imap *,.nav::after,.nav::before,.hero-fx .lit{transition:none}.btn:active{transform:none}}
@media print{.nav,.menu,.cta,.form,.hero-fx,.hero::before,.viewer,.shot-link::after{display:none}.rv{opacity:1;transform:none}}