/* vardan.tech · tesis entegrasyon ve verimlilik sistemi · sayfa düzeni. Sahne içleri v/sahne/*.css'te.
   Görsel dil Vardan sitesiyle aynı: koyu zemin, petrol mavisi ışık, General Sans. Telefon önce; sayfa yazısı en az 16 px (sahne içi en az 15 px), dokunma hedefi en az 48 px. */
@font-face{font-family:"General Sans";src:url("GeneralSans-Variable.woff2") format("woff2");font-weight:200 700;font-display:swap}
:root{color-scheme:dark;--gece:#05090C;--yazi:#EAF2F4;--gri:#9AABB2;--soluk:#5F7178;--isik:#45B7CF;--yesil:#7CF2B0;--sari:#F2B84B;--kirmizi:#FF7A6B;--cizgi:rgba(234,242,244,.1);--yazi-tipi:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--kenar:clamp(16px,4vw,48px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gece);color:var(--yazi);font:17px/1.6 var(--yazi-tipi);word-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0} h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.03em}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--isik);outline-offset:3px;border-radius:4px}
p,li,dd{text-wrap:pretty}

/* üst bant */
.ust{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 6px) var(--kenar) 6px;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.ust.kaydi{background:rgba(5,9,12,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--cizgi)}
.ust .marka{display:flex;align-items:center;min-height:48px;line-height:0}
.ust .marka img{height:24px;width:auto}
.ust nav{display:flex;align-items:center;gap:clamp(4px,1.6vw,18px);font-size:16px;font-weight:500}
.ust nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;text-decoration:none;color:var(--gri);transition:color .2s}
.ust nav a:hover{color:var(--yazi)}
.ust nav .dil{justify-content:center;min-width:48px;color:var(--yazi);border:1px solid rgba(234,242,244,.22);border-radius:99px;padding:0 12px;letter-spacing:.06em;margin-left:4px}
@media (max-width:560px){.ust nav .genis{display:none}}

/* giriş */
.giris{position:relative;padding:calc(env(safe-area-inset-top,0px) + 120px) var(--kenar) clamp(24px,6vw,64px);background:radial-gradient(90% 70% at 70% 0%,rgba(22,74,94,.42) 0%,rgba(5,9,12,0) 70%)}
.giris-ic{max-width:1180px;margin:0 auto;display:grid;gap:clamp(48px,8vw,72px)}
.giris-metin{display:grid;gap:26px;align-content:center}
@media (min-width:960px){.giris{padding-top:calc(env(safe-area-inset-top,0px) + 84px)}.giris-ic{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.ust-yazi{font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--isik)}
.giris h1{font-size:clamp(2.7rem,11vw,6.2rem);line-height:.98;letter-spacing:-.045em;max-width:12ch}
.giris .on{font-size:clamp(1.12rem,3.6vw,1.4rem);line-height:1.5;color:var(--gri);max-width:38rem}
.bes{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:clamp(1.05rem,3.4vw,1.3rem);font-weight:600}
.bes li{display:flex;align-items:center;gap:10px}
.bes li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--isik);box-shadow:0 0 0 4px rgba(69,183,207,.16)}
.bes li:nth-child(2)::before{background:var(--sari);box-shadow:0 0 0 4px rgba(242,184,75,.16)}
.bes li:nth-child(5)::before{background:var(--yesil);box-shadow:0 0 0 4px rgba(124,242,176,.16)}
.eylemler{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.dugme{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:99px;font-weight:600;font-size:16px;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.dugme.ana{background:var(--isik);color:#04141A}
.dugme.ana:hover{background:#6CCBDD}
.dugme.ikinci{border:1px solid rgba(234,242,244,.24);color:var(--yazi)}
.dugme.ikinci:hover{border-color:rgba(69,183,207,.8)}
.durum-notu{font-size:16px;color:var(--gri);max-width:40rem;border-left:2px solid var(--sari);padding-left:14px}
@media (prefers-reduced-motion:no-preference){
  .giris-metin>*{animation:belir .9s cubic-bezier(.2,.7,.2,1) both}
  .giris-metin>*:nth-child(2){animation-delay:.08s}.giris-metin>*:nth-child(3){animation-delay:.16s}.giris-metin>*:nth-child(4){animation-delay:.24s}.giris-metin>*:nth-child(5){animation-delay:.32s}.giris-metin>*:nth-child(6){animation-delay:.4s}
}
@keyframes belir{from{opacity:0;transform:translateY(14px)}}

/* bölüm */
.bolum{padding:clamp(72px,12vw,136px) var(--kenar) 0}
.bolum>*{max-width:1180px;margin-inline:auto}
.bas{display:grid;gap:14px;margin-bottom:clamp(30px,6vw,56px)}
.etiket{font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gri)}
.etiket b{color:var(--isik);font-weight:600;margin-right:8px;font-variant-numeric:tabular-nums}
.bas h2{font-size:clamp(2rem,7vw,3.5rem);line-height:1.05;max-width:18ch}
.metin{display:grid;gap:18px;color:var(--gri);max-width:36rem}
.metin strong{color:var(--yazi);font-weight:600}
.metin a{color:var(--yazi);text-decoration-color:rgba(69,183,207,.7);text-underline-offset:3px}

/* metin + sahne düzeni */
@media (min-width:960px){.tekli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end}.tekli .bas{margin-bottom:0}}
.ikili{display:grid;gap:clamp(32px,6vw,72px);align-items:center}
@media (min-width:960px){
  .ikili{grid-template-columns:minmax(0,1fr) auto}
  .ikili.ters{grid-template-columns:auto minmax(0,1fr)}
  .ikili.ters>.an{order:-1}
}

/* sahne kabı (Vardan anlatım dili) */
.an{position:relative;width:min(100%,max(330px,72svh));margin-inline:auto;aspect-ratio:4/5;container-type:inline-size;overflow:hidden;border-radius:24px;background:#071017;isolation:isolate;font-family:var(--yazi-tipi);color:var(--yazi);word-spacing:.06em}
@media (min-width:960px){.an{width:min(560px,max(330px,72svh))}}
.an-zemin{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 55% at 55% 42%,rgba(22,74,94,.5),rgba(7,16,23,0) 72%),radial-gradient(rgba(234,242,244,.05) 1px,transparent 1.2px) 0 0/4cqw 4cqw}
.an-alt{display:block;margin-top:12px;font-size:16px;color:var(--gri);text-align:center}

/* listeler */
.istasyonlar{list-style:none;margin:clamp(36px,6vw,56px) auto 0;padding:0;display:grid;gap:0 48px;counter-reset:ist}
.istasyonlar li{display:grid;grid-template-columns:2.4em 1fr;gap:2px 10px;padding:14px 0;border-top:1px solid var(--cizgi);counter-increment:ist}
.istasyonlar li::before{content:counter(ist,decimal-leading-zero);grid-row:span 2;font-size:16px;font-weight:600;color:var(--isik);font-variant-numeric:tabular-nums;padding-top:2px}
.istasyonlar b{font-weight:600}
.istasyonlar span{color:var(--gri);font-size:16px}
@media (min-width:760px){.istasyonlar{grid-template-columns:1fr 1fr}}
.maddeler{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.maddeler li{position:relative;padding-left:22px}
.maddeler li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--isik)}

/* formül satırları (ERP, karbon) */
.formuller{display:grid;gap:0;margin-top:clamp(32px,5vw,48px)}
.formul{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--cizgi)}
.formul:last-child{border-bottom:1px solid var(--cizgi)}
.formul dt{font-weight:600;font-size:clamp(1.15rem,3.6vw,1.45rem);letter-spacing:-.01em}
.formul dd{margin:0;color:var(--gri)}
.formul dd b{color:var(--yazi);font-weight:500}
@media (min-width:860px){.formul{grid-template-columns:minmax(0,22rem) 1fr;gap:28px;align-items:baseline}}
.denklem{margin:clamp(30px,5vw,48px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;font-size:clamp(1.25rem,4.6vw,2.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.denklem span{padding:10px 18px;border-radius:16px;background:rgba(234,242,244,.05);border:1px solid rgba(234,242,244,.14)}
.denklem .sebeke{border-color:rgba(69,183,207,.55);color:#A8E8F3}
.denklem .faktor{border-color:rgba(242,184,75,.55);color:var(--sari)}
.denklem .sonuc{border-color:rgba(124,242,176,.6);color:var(--yesil)}
.denklem i{font-style:normal;color:var(--gri)}
.kaynak{margin-top:22px;font-size:16px;color:var(--gri);max-width:44rem}
.kaynak a{color:var(--yazi);text-decoration-color:rgba(69,183,207,.7);text-underline-offset:3px}

/* örnek pano */
.pano{border:1px solid rgba(234,242,244,.14);border-radius:24px;background:linear-gradient(180deg,#0A161D,#071017);overflow:hidden}
.pano-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:18px clamp(16px,3vw,28px);border-bottom:1px solid var(--cizgi)}
.pano-bas h3{font-size:1.1rem;font-weight:600;letter-spacing:0}
.ornek-rozet{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1A1203;background:var(--sari);border-radius:99px;padding:6px 14px}
.ornek-rozet::before{content:"";width:8px;height:8px;border-radius:50%;background:#1A1203}
.pano-ust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.gosterge{padding:16px clamp(16px,3vw,28px);border-bottom:1px solid var(--cizgi);display:grid;gap:4px;align-content:start}
.gosterge:nth-child(odd){border-right:1px solid var(--cizgi)}
.gosterge dt{font-size:16px;color:var(--gri);line-height:1.3}
.gosterge dd{margin:0;font-size:clamp(1.5rem,6vw,2.1rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.gosterge dd small{font-size:16px;font-weight:500;color:var(--gri);letter-spacing:0;margin-left:5px}
.gosterge.gunes dd{color:var(--sari)}
.gosterge.fire dd{color:var(--kirmizi)}
.gosterge.karbon dd{color:var(--yesil)}
@media (min-width:900px){.pano-ust{grid-template-columns:repeat(4,minmax(0,1fr))}.gosterge{border-right:1px solid var(--cizgi)}.gosterge:nth-child(4n){border-right:0}}
.pano-tablo{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pano-tablo caption{text-align:left;padding:18px clamp(16px,3vw,28px) 8px;font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gri)}
.pano-tablo th,.pano-tablo td{padding:11px clamp(8px,2vw,16px);text-align:right;border-bottom:1px solid var(--cizgi);font-size:16px;white-space:nowrap}
.pano-tablo th:first-child,.pano-tablo td:first-child{text-align:left;padding-left:clamp(16px,3vw,28px);white-space:normal}
.pano-tablo th:last-child,.pano-tablo td:last-child{padding-right:clamp(16px,3vw,28px)}
.pano-tablo thead th{font-size:16px;font-weight:500;color:var(--gri)}
.pano-tablo .cubuk{display:block;height:4px;margin-top:6px;border-radius:2px;background:rgba(234,242,244,.08);overflow:hidden}
.pano-tablo .cubuk i{display:block;height:100%;background:var(--sari);border-radius:2px;transition:width .8s ease}
.pano-tablo tbody th{font-weight:500}
.pano-tablo tfoot th,.pano-tablo tfoot td{font-weight:600;border-bottom:0}
.pano-tablo tfoot tr:first-child>*{border-top:1px solid rgba(234,242,244,.28)}
.pano-not{padding:16px clamp(16px,3vw,28px) 20px;font-size:16px;color:var(--gri);border-top:1px solid var(--cizgi)}
.pano-not b{color:var(--sari);font-weight:600}

/* uygulama adımları */
.adimlar{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:adim}
.adimlar li{position:relative;display:grid;gap:6px;padding:0 0 30px 58px;counter-increment:adim}
.adimlar li::before{content:counter(adim,decimal-leading-zero);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--isik);border:1px solid rgba(69,183,207,.55);background:var(--gece);font-variant-numeric:tabular-nums}
.adimlar li::after{content:"";position:absolute;left:20px;top:42px;bottom:4px;width:1px;background:linear-gradient(rgba(69,183,207,.5),rgba(69,183,207,.08))}
.adimlar li:last-child::after{display:none}
.adimlar h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;padding-top:6px}
.adimlar p{color:var(--gri);max-width:40rem}
@media (min-width:900px){.adimlar{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}.adimlar li{padding:58px 0 0 0}.adimlar li::after{left:48px;right:-24px;top:20px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(69,183,207,.5),rgba(69,183,207,.08))}}

/* iletişim */
.iletisim{display:grid;justify-items:center;gap:18px;text-align:center;padding-bottom:clamp(80px,12vw,140px)}
.iletisim h2{font-size:clamp(2.3rem,9vw,4.6rem);line-height:1}
.iletisim p{color:var(--gri);max-width:34rem}
.posta{display:inline-flex;align-items:center;min-height:48px;font-size:clamp(1.15rem,4.6vw,2rem);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(69,183,207,.7);word-break:break-word}
.posta:hover{color:var(--isik)}

/* alt bilgi */
.alt{border-top:1px solid var(--cizgi);padding:30px var(--kenar) calc(env(safe-area-inset-bottom,0px) + 30px);display:grid;gap:10px;justify-items:center;text-align:center;color:var(--gri);font-size:16px}
.alt img{height:26px;width:auto;opacity:.9}
.alt .slogan{font-weight:600;letter-spacing:-.01em;color:var(--gri);font-size:16px}
.alt .slogan b{color:var(--isik);font-weight:600}
.alt nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px}
.alt nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:var(--gri)}