/* novinet.tech — build/build.js tarafından prototip/index.html içinden üretildi */
:root{
  /* yeşil ana yüzey rengi, lacivert başlık mürekkebi */
  --g:#79C143; --g-d:#5FA232; --g-deep:#2E5220; --g-dark:#1E3715; --g-tint:#F1F8E9;
  --g-soft:#E6F1D8; --g-line:#C4DCA6;
  --navy:#3B3A5E; --ink:#26263A; --body:#54546B; --mute:#8A8A9B;
  --line:#E4E7DF; --bg:#FFFFFF; --bg2:#F7F9F4;
  --wrap:1200px;
  --hero-foto-kaydir:28px;   /* ana sayfa fotoğrafını aşağı kaydırma miktarı */
  --ff:'Barlow',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fh:'Barlow Semi-Condensed','Barlow',-apple-system,'Segoe UI',Arial,sans-serif;
}
html[dir=rtl]{ --ff:'Noto Kufi Arabic','Barlow',Tahoma,Arial,sans-serif; --fh:'Noto Kufi Arabic','Barlow Semi-Condensed',Tahoma,Arial,sans-serif; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff);color:var(--body);background:var(--bg);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fh);color:var(--navy);line-height:1.18;font-weight:600;letter-spacing:-.005em}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4{letter-spacing:0;line-height:1.45}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.sec{padding:92px 0}
.sec.tint{background:var(--g-tint)}
.sec.soft{background:var(--bg2)}
.sec.deep{background:var(--g-deep);color:#D3E4C6}
.sec.deep h1,.sec.deep h2,.sec.deep h3,.sec.deep h4{color:#fff}
.eyebrow{font-family:var(--fh);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-d);font-weight:700;margin-bottom:12px}
.sec.deep .eyebrow{color:var(--g)}
html[dir=rtl] .eyebrow{letter-spacing:0}
.shead{max-width:740px;margin-bottom:48px}
.shead h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:14px}
.shead p{font-size:17px}
.sec.deep .shead p{color:#C2D8B3}

/* ---------------- travers (rail) motifi ---------------- */
.track{height:14px;background:
  repeating-linear-gradient(90deg,var(--g) 0 12px,transparent 12px 26px);
  opacity:.85}
.track.thin{height:8px;background:repeating-linear-gradient(90deg,var(--g) 0 8px,transparent 8px 18px)}

/* ---------------- header ---------------- */
header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:24px;height:88px}
.logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo img{height:56px;width:auto;display:block}
.logo svg{height:40px;width:auto;display:block}
.logo b{font-family:var(--fh);font-size:13.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--navy);font-weight:700;white-space:nowrap}
html[dir=rtl] .logo b{letter-spacing:0;font-size:15px}
nav{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:wrap}
nav a{font-size:14.5px;padding:9px 12px;border-radius:3px;color:var(--body);white-space:nowrap;transition:.15s;position:relative}
nav a:hover{color:var(--g-d);background:var(--g-tint)}
nav a.on{color:var(--navy);font-weight:600}
nav a.on:after{content:"";position:absolute;inset-inline:10px;bottom:2px;height:3px;background:var(--g)}
.langs{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;flex:0 0 auto}
.langs a,.langs button{font-family:var(--ff);font-size:12.5px;font-weight:700;
  padding:6px 12px;border:0;background:none;color:var(--mute);cursor:pointer;
  letter-spacing:.06em;line-height:1.6;display:inline-flex;align-items:center;transition:.15s}
.langs > * + *{border-inline-start:1px solid var(--line)}
.langs a:hover,.langs button:hover{color:var(--g-d);background:var(--g-tint)}
.langs a.on,.langs button.on{background:var(--g);color:#173A06}
html[dir=rtl] .langs a,html[dir=rtl] .langs button{letter-spacing:0}
.burger{display:none;border:1px solid var(--line);background:none;border-radius:3px;width:42px;height:40px;cursor:pointer;font-size:18px;color:var(--g-deep)}

/* ---------------- butonlar ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fh);font-size:15.5px;font-weight:600;letter-spacing:.03em;padding:14px 26px;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:.15s}
html[dir=rtl] .btn{letter-spacing:0}
.btn i{font-style:normal}
html[dir=rtl] .btn i,html[dir=rtl] .go i{transform:scaleX(-1)}
.btn.p{background:var(--g);color:#153806}
.btn.p:hover{background:var(--g-d);color:#fff}
.btn.o{border-color:#C8D6BC;color:var(--g-deep)}
.btn.o:hover{background:var(--g-tint)}
.btn.w{border-color:rgba(255,255,255,.4);color:#fff}
.btn.w:hover{background:rgba(255,255,255,.12)}
.btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* ---------------- görsel yer tutucu ---------------- */
.ph{position:relative;overflow:hidden;background:var(--g-tint);border:1px dashed #B7CEA3;
    display:flex;align-items:center;justify-content:center;border-radius:3px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph figcaption{padding:20px;text-align:center;font-size:12.5px;color:#7C9468;line-height:1.55}
.ph figcaption b{display:block;font-family:var(--fh);font-size:13px;letter-spacing:.1em;color:var(--g-d);margin-bottom:5px}
html[dir=rtl] .ph figcaption b{letter-spacing:0}
.ph.has{border:0;background:none}
.ph.has figcaption{display:none}
.sec.deep .ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3)}
.sec.deep .ph figcaption{color:#B6CDA5}
.sec.deep .ph figcaption b{color:var(--g)}
.hero-art .ph{background:#fff;border-color:var(--g-line)}
.ph.fit{background:var(--g-tint);border:1px solid var(--g-line)}
.ph.fit img{object-fit:contain;padding:0}
.ph.fit.has{background:var(--g-tint);border:1px solid var(--g-line)}
.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}.r43{aspect-ratio:4/3}.r169{aspect-ratio:16/9}.r219{aspect-ratio:21/9}

/* ---------------- hero ---------------- */
.hero{position:relative;background:#fff;overflow:hidden}
.hero .in{max-width:var(--wrap);margin:0 auto;padding:0 30px;display:grid;
  grid-template-columns:1.32fr .68fr;column-gap:52px;align-items:stretch}
.hero .htop{grid-column:1;grid-row:1;padding-top:74px}
.hero .btns{grid-column:1;grid-row:2;padding-bottom:74px;margin-top:34px}
.kick{font-family:var(--fh);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--g-d);margin-bottom:20px;font-weight:700;
  display:inline-flex;align-items:center;gap:12px}
.kick:before{content:"";width:34px;height:3px;background:var(--g)}
html[dir=rtl] .kick{letter-spacing:0}
.hero h1{font-size:clamp(29px,4.1vw,50px);margin-bottom:26px;font-weight:600;color:var(--navy)}
.hero h1 em{font-style:normal;color:var(--g-d)}
.hero p{font-size:18px;max-width:610px}
.hero-art{grid-column:2;grid-row:1;position:relative;width:100%;max-width:400px;
  margin:calc(50px + var(--hero-foto-kaydir)) 0 calc(-24px + var(--hero-foto-kaydir));
  margin-inline-start:auto;background:var(--g-soft);padding:24px;display:flex}
.hero-art .ph{position:relative;width:100%;aspect-ratio:auto}
.hero-art .badge{position:absolute;bottom:0;inset-inline-start:-40px;background:var(--g);color:#153806;
  font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px}
html[dir=rtl] .hero-art .badge{letter-spacing:0}

/* ---------------- kpi ---------------- */
.kpi{background:var(--g)}
.kpi .in{max-width:var(--wrap);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:repeat(4,1fr)}
.kpi div{padding:34px 26px;border-inline-start:1px solid rgba(23,58,6,.18)}
.kpi div:first-child{border:0;padding-inline-start:0}
.kpi b{display:block;font-family:var(--fh);font-size:44px;color:#173A06;line-height:1;font-weight:700;margin-bottom:8px}
.kpi span{font-size:14px;color:#2C4E13;display:block;max-width:220px;line-height:1.45;font-weight:500}

/* ---------------- odak: raylı sistemler ---------------- */
.focus{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.focus .ph{aspect-ratio:4/3}
.focus .ph.r34{aspect-ratio:3/4;max-width:400px;margin-inline-start:auto}
.ticks{list-style:none;display:grid;gap:14px;margin-top:26px}
.ticks li{position:relative;padding-inline-start:30px;font-size:16px}
.ticks li:before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:12px;height:4px;background:var(--g)}
.sec.deep .ticks li{color:#DCEAD2}

/* ---------------- faaliyet tile ---------------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tiles.t3{grid-template-columns:repeat(3,1fr);gap:24px}
.tiles.t3 h3{font-size:22px}
.tile{border:1px solid var(--line);border-radius:3px;padding:0 0 34px;background:#fff;display:flex;flex-direction:column;transition:.18s}
.tile .bar{height:6px;background:var(--g)}
.tile .bd{padding:32px 34px 0}
.tile h3{font-size:25px;margin-bottom:14px}
.tile p{margin-bottom:24px}
.tile .go{margin-top:auto;padding:0 34px;font-family:var(--fh);font-weight:600;color:var(--g-d);font-size:15.5px;display:inline-flex;gap:8px;align-items:center}
.tile:hover{border-color:var(--g);box-shadow:0 10px 30px rgba(46,82,32,.1)}

/* ---------------- kart ızgaraları ---------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:30px}
.card h3{font-size:19.5px;margin-bottom:11px}
.card p{font-size:15.5px}
.card .num{font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--g-d);letter-spacing:.16em;display:block;margin-bottom:14px}
html[dir=rtl] .card .num{letter-spacing:0}
.sec.tint .card,.sec.soft .card{background:#fff}

/* ---------------- sistem listesi ---------------- */
.sys{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.sys .row{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.sec.deep .sys .row{border-color:rgba(255,255,255,.16)}
.sys .ab{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--g-d);
  flex:0 0 88px;padding-top:3px}
.sec.deep .sys .ab{color:var(--g)}
html[dir=rtl] .sys .ab{letter-spacing:0}
.sys h4{font-size:17px;margin-bottom:4px}
.sys p{font-size:14.5px;color:var(--mute);line-height:1.5}
.sec.deep .sys p{color:#AFC6A0}

/* ---------------- projeler ---------------- */
.proj{border:1px solid var(--line);border-radius:3px;padding:26px 30px;background:#fff;position:relative}
.proj:before{content:"";position:absolute;inset-inline-start:0;top:26px;bottom:26px;width:3px;background:var(--g)}
.proj .top{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.proj h3{font-size:19.5px}
.proj .meta{font-family:var(--fh);font-size:13.5px;color:var(--mute);letter-spacing:.07em;white-space:nowrap}
html[dir=rtl] .proj .meta{letter-spacing:0}
.proj .scope{font-size:15px;color:var(--g-deep);font-weight:500;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12.5px;background:var(--g-tint);color:var(--g-deep);padding:4px 10px;border-radius:2px;font-weight:500}
.subh{font-family:var(--fh);font-size:22px;color:var(--navy);margin:0 0 20px;display:flex;align-items:center;gap:14px}
.subh:after{content:"";flex:1;height:1px;background:var(--line)}
.note{font-size:14px;color:var(--mute);margin-top:26px;padding-inline-start:14px;border-inline-start:3px solid var(--g)}

/* ---------------- olgular / galeri ---------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.facts>div{background:#fff;padding:22px 24px}
.facts b{display:block;font-family:var(--fh);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-d);margin-bottom:6px;font-weight:700}
html[dir=rtl] .facts b{letter-spacing:0}
.facts span{font-size:16px;color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---------------- sertifikalar ---------------- */
.certwrap{margin-top:44px}
.certs{display:flex;gap:24px;flex-wrap:wrap}
.cert{display:flex;flex-direction:column;width:152px;color:var(--body);
  border:0;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:zoom-in}
.cert img{width:100%;border:1px solid var(--line);border-radius:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:.15s}
.cert:hover img{box-shadow:0 6px 18px rgba(0,0,0,.13);border-color:var(--g-line)}
.cert .cc{margin-top:11px;font-size:12.5px;line-height:1.45;color:var(--mute)}
.cert .cc b{display:block;font-family:var(--fh);color:var(--navy);font-size:13.5px;letter-spacing:.02em;margin-bottom:2px}
html[dir=rtl] .cert .cc b{letter-spacing:0}

/* sertifika büyütme (lightbox) */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,24,16,.82);padding:24px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:90vh;background:#fff;border-radius:2px;
  box-shadow:0 12px 50px rgba(0,0,0,.5)}

/* ---------------- sayfa başlığı ---------------- */
.phead{background:var(--g-deep);color:#C9DEBB;padding:70px 0 66px;position:relative;overflow:hidden}
.phead h1{color:#fff;font-size:clamp(29px,3.9vw,46px);margin-bottom:16px}
.phead p{font-size:17.5px;max-width:780px}
.phead .track{position:absolute;inset-inline:0;bottom:0}

/* ---------------- yazı ---------------- */
.prose p{font-size:17px;margin-bottom:18px;max-width:76ch}
.prose b{color:var(--navy);font-weight:600}

/* ---------------- form ---------------- */
.cform{display:grid;gap:14px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:5px;font-family:var(--fh);letter-spacing:.05em}
html[dir=rtl] .cform label{letter-spacing:0}
.cform input,.cform select,.cform textarea{width:100%;font-family:var(--ff);font-size:15.5px;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)}
.cform textarea{min-height:130px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--g);outline-offset:-1px;border-color:var(--g)}
.fnote{font-size:13.5px;color:var(--mute)}
.cinfo{display:grid;gap:20px;background:var(--g-tint);padding:32px;border-radius:3px}
.cinfo .it b{display:block;font-family:var(--fh);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-d);margin-bottom:5px;font-weight:700}
html[dir=rtl] .cinfo .it b{letter-spacing:0}
.cinfo .it span,.cinfo .it a{font-size:16px;color:var(--ink)}
.cinfo .it a.big{font-size:21px;font-family:var(--fh);font-weight:600;color:var(--g-deep);display:inline-block;margin-top:2px}
.cinfo .it a.big:hover{color:var(--g-d)}
.cinfo .it a:hover{color:var(--g-d)}
.cinfo .facts{border-color:#D9E5CD;background:#D9E5CD}

.xref{margin-top:56px;border:1px solid var(--line);border-inline-start:5px solid var(--g);
  border-radius:3px;padding:28px 32px;background:var(--bg2)}
.xref h3{font-size:19px;margin-bottom:9px}
.xref p{font-size:15.5px;max-width:78ch;margin-bottom:14px}
.xref p b{color:var(--navy);font-weight:600}
.xref a{font-family:var(--fh);font-weight:600;font-size:15.5px;color:var(--g-d);
  display:inline-flex;align-items:center;gap:8px}
.xref a:hover{color:var(--g-deep);text-decoration:underline}
.xref a i{font-style:normal}
html[dir=rtl] .xref a i{transform:scaleX(-1)}

/* ---------------- cta şeridi ---------------- */
.cta{background:var(--g-dark);color:#C6DCB6;padding:60px 0}
.cta .in{max-width:var(--wrap);margin:0 auto;padding:0 30px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:27px;margin-bottom:8px}
.cta p{max-width:620px}

/* ---------------- footer ---------------- */
footer{background:var(--g-dark);color:#A7BE97;padding:58px 0 0;font-size:14.5px;border-top:1px solid rgba(255,255,255,.09)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px;padding-bottom:44px}
footer h4{color:#fff;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-family:var(--fh)}
html[dir=rtl] footer h4{letter-spacing:0}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--g)}
footer .logo b{color:#fff}
footer .logo img{height:18px;width:auto;display:block}
footer .fbot{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8AA37A}

/* ---------------- responsive ---------------- */
@media(max-width:1080px){
  .grid4,.gal{grid-template-columns:repeat(2,1fr)}
  .tiles.t3{grid-template-columns:1fr}
  .kpi .in{grid-template-columns:repeat(2,1fr)}
  .kpi div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .sys{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .hero .in{grid-template-columns:1fr;gap:0;min-height:0}
  .hero .htop{grid-column:1;grid-row:1;padding-top:64px}
  .hero .btns{grid-column:1;grid-row:3;padding-bottom:64px;margin-top:30px}
  .hero-art{grid-column:1;grid-row:2;max-width:none;margin:34px 0 0;padding:20px}
  .hero-art .ph{aspect-ratio:4/3}
}
@media(max-width:860px){
  .burger{display:block;margin-inline-start:auto}
  nav{display:none;position:absolute;top:88px;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:12px 18px 18px;gap:2px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  nav.open{display:flex}
  nav a{padding:12px 8px;font-size:16px}
  nav a.on:after{inset-inline:8px;bottom:6px}
  .hbar{gap:12px}
  .grid2,.grid3,.grid4,.tiles,.tiles.t3,.focus,.facts,.cform .row{grid-template-columns:1fr}
  .focus{gap:34px}
  .sec{padding:62px 0}
  .kpi .in{grid-template-columns:1fr 1fr}
  .kpi b{font-size:34px}
}