/* giriş */
.intro{display:grid;grid-template-columns:1fr 400px;gap:56px;padding-top:80px;align-items:end}
.intro h1{font-size:58px;font-weight:600;letter-spacing:-.045em;line-height:1}
.intro h1 .m{display:block;font-size:15px;font-weight:400;letter-spacing:0;color:var(--l2);margin-bottom:22px}
.intro p{margin-top:22px;font-size:18px;line-height:1.65;color:var(--mut);max-width:36em}
.intro p b{color:var(--ink);font-weight:500}
.intro .acts{display:flex;gap:10px;margin-top:30px}
.now{border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden}
.now .row{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12.5px}
.now .row:last-child{border-bottom:0}
.now .row span:first-child{color:var(--dim)}
.now .live{color:var(--l4)}
.now .head{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule);background:var(--panel2)}
.now .head .ph{width:44px;height:44px;border-radius:10px;background:url(/img/umut.jpg) center 25%/cover;filter:grayscale(.3)}
.now .head b{font-weight:500;font-size:15px;display:block}
.now .head small{font-family:var(--mono);font-size:11.5px;color:var(--mut)}

/* ürün şeridi */
.brandbar{display:flex;gap:18px;font-family:var(--mono);font-size:12px;color:var(--mut);margin-bottom:14px}
.brandbar i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}
.prow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.pc{border:1px solid var(--rule);border-radius:14px;background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:10px;min-height:196px;position:relative;transition:border-color .2s,transform .2s}
.pc:hover{border-color:var(--rule2);transform:translateY(-2px)}
.pc .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--bg)}
.pc h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.pc p{font-size:13px;line-height:1.45;color:var(--mut)}
.pc .ft2{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.pc.dg{background:linear-gradient(180deg,rgba(110,139,255,.08),transparent 60%),var(--panel)}
.pc.dg .ic{background:var(--l1)}
.pc.st .ic{background:var(--l4)}
.pc .sep{position:absolute;right:-6px;top:14px;bottom:14px;border-right:1px dashed var(--rule2)}

/* projeler */
.filt{display:flex;gap:4px;font-family:var(--mono);font-size:12px}
.filt a{padding:6px 10px;border-radius:7px;color:var(--mut);border:1px solid transparent}
.filt a.on{border-color:var(--rule2);color:var(--ink);background:var(--panel)}
.filt a small{color:var(--dim);margin-left:4px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pj{border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.pj .cv{aspect-ratio:16/10;background:center/cover;border-bottom:1px solid var(--rule);position:relative}
.pj .cv{filter:saturate(.25) brightness(.75) contrast(1.05);transition:filter .3s}
.pj:hover .cv{filter:none}
.pj .cv:before{content:"";position:absolute;inset:0;background:#1d3a8a;mix-blend-mode:color;opacity:.55}
.pj .cv:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,14,25,.9))}
.pj .cv .tag{position:absolute;left:12px;top:12px;z-index:1;font-family:var(--mono);font-size:10.5px;padding:3px 7px;border-radius:5px;background:rgba(5,7,13,.75);border:1px solid var(--rule2);color:var(--ink)}
.pj .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pj .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim)}
.pj h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.pj p{font-size:14px;line-height:1.5;color:var(--mut)}
.pj .chips{margin-top:auto;padding-top:6px}
.pj.wide{grid-column:span 2;flex-direction:row}
.pj.wide .cv{aspect-ratio:auto;flex:1.3;border-bottom:0;border-right:1px solid var(--rule)}
.pj.wide .bd{flex:1;padding:22px}
.pj.wide h3{font-size:24px}
.pj.wide ul{list-style:none;font-size:14px;color:var(--mut);line-height:1.75}
.pj.wide ul li:before{content:"+ ";font-family:var(--mono);color:var(--l2)}

.plg{width:30px;height:30px;border-radius:8px;background:#fff center/contain no-repeat;flex:none;box-shadow:0 0 0 1px var(--rule2)}
.pj .meta{align-items:center}
.pj .meta img.co{height:11px;width:auto;opacity:.85}
/* yol şeridi */
.road{border:1px solid var(--rule);border-radius:14px;background:var(--panel);padding:22px 22px 18px;position:relative;overflow:hidden}
.road svg{display:block;width:100%;height:auto}
.road .foot{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--mut)}

/* iletişim */
.cta{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border:1px solid var(--rule);border-radius:16px;padding:30px 32px;background:radial-gradient(80% 140% at 100% 0%,rgba(63,169,255,.12),transparent 60%),var(--panel)}
.cta h2{font-size:30px;letter-spacing:-.03em;font-weight:600}
.cta p{color:var(--mut);margin-top:6px}
.cta .acts{display:flex;gap:10px}

@media (max-width:820px){
  .intro{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .intro h1{font-size:40px}
  .prow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .pc{min-width:200px;scroll-snap-align:start}
  .grid{grid-template-columns:1fr}
  .pj.wide{grid-column:auto;flex-direction:column}.pj.wide .cv{aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--rule)}
  .sh{flex-wrap:wrap}
  .cta{grid-template-columns:1fr}
  .road{overflow-x:auto}.road svg{min-width:760px}
}
.pj[hidden]{display:none}
.plg{width:30px;height:30px;border-radius:8px;background:#fff center/contain no-repeat;flex:none;box-shadow:0 0 0 1px var(--rule2)}
.pj .meta{align-items:center}
.pj .meta img.co{height:11px;width:auto;opacity:.85}

.techf{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 16px}
.techf button{font-family:var(--mono);font-size:11px;color:var(--mut);background:transparent;border:1px solid var(--rule2);border-radius:6px;padding:4px 8px;cursor:pointer}
.techf button:hover{color:var(--ink)}
.techf button.on{color:var(--ink);background:var(--panel2);border-color:var(--l2)}

.sh h2 .atom{width:30px;height:30px;border-radius:8px;align-self:center}
/* ---------- uygulama listesi ---------- */
.apps .brandbar{margin-bottom:12px}
.apps + .apps{padding-top:44px}
.alist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ap{border:1px solid var(--rule);border-radius:14px;background:var(--panel);padding:18px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;transition:border-color .2s,transform .2s}
.ap:hover{border-color:var(--rule2);transform:translateY(-2px)}
.ap.dg{background:linear-gradient(180deg,rgba(110,139,255,.08),transparent 60%),var(--panel)}
.ap .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--bg);grid-row:span 2}
.ap.dg .ic{background:var(--l1)}.ap.st .ic{background:var(--l4)}
.ap h3{font-size:19px;font-weight:600;letter-spacing:-.02em;display:flex;gap:10px;align-items:baseline}
.ap h3 small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim)}
.ap p{font-size:14px;line-height:1.5;color:var(--mut);margin-top:6px}
.ap .chips{margin-top:12px}
.ap .st{grid-column:2;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:8px}
.ap .st .ok{color:var(--l4)}
@media (max-width:820px){.alist{grid-template-columns:1fr}}