File: /home/muratemr/www/demo/demo1.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mars Kocaeli</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',-apple-system,sans-serif;background:#fff;color:#111;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;outline:none}a{text-decoration:none;color:inherit}
:root{--d:#111;--d2:#1e1e1e;--bg:#fff;--bg2:#f7f7f7;--bg3:#f0f0f0;--t1:#111;--t2:#555;--t3:#999;--bd:#e5e5e5;--bd2:#ccc;--grn:#16a34a;--grn-bg:#F0FDF4;--grn-bd:#BBF7D0;--red:#dc2626;--red-bg:#FEF2F2;--red-bd:#FECACA;--ylw:#d97706;--ylw-bg:#FEF3C7;--ylw-bd:#FDE68A;--blu:#1D4ED8;--blu-bg:#EFF6FF;--blu-bd:#BFDBFE}
/* DEMO BAR */
#db{position:fixed;top:0;left:0;right:0;height:42px;background:#111;display:flex;align-items:center;gap:4px;padding:0 10px;z-index:9999;overflow-x:auto;border-bottom:1px solid #1f1f1f}
#db::-webkit-scrollbar{height:3px}#db::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.dl{font-size:9px;font-weight:500;color:rgba(255,255,255,.25);white-space:nowrap;margin-right:2px;text-transform:uppercase;letter-spacing:.07em}
.ds{width:1px;height:18px;background:rgba(255,255,255,.1);flex-shrink:0;margin:0 3px}
.db-btn{font-size:11px;color:rgba(255,255,255,.48);padding:3px 9px;border-radius:4px;border:.5px solid transparent;background:transparent;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s;flex-shrink:0}
.db-btn:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.06)}.db-btn.active{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
/* VIEWS */
.vw{padding-top:42px}#pw{display:none}#pw .pp{display:none}#pw.on{display:block;padding-top:0}#pw .pp.on{display:block}#aw{display:none}#aw.on{display:flex;height:calc(100vh - 42px);margin-top:42px}
.ap{display:none;flex:1;flex-direction:column;overflow:hidden}.ap.on{display:flex}
/* PUB NAV */
.pnav{background:var(--d);height:52px;display:flex;align-items:center;padding:0 26px;gap:16px;position:sticky;top:42px;z-index:100;border-bottom:.5px solid rgba(255,255,255,.05)}
.nlg{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0}
.nm{width:26px;height:26px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--d)}
.nt{font-size:13px;font-weight:500;color:#fff;line-height:1.1}.ns{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:.02em}
.nl{display:flex;gap:2px;flex:1}
.nlink{font-size:12.5px;color:rgba(255,255,255,.5);padding:5px 10px;border-radius:4px;cursor:pointer;background:none;border:none;font-family:inherit}
.nlink:hover{color:rgba(255,255,255,.85)}.nlink.on{color:#fff;font-weight:500}
.nact{display:flex;gap:7px;align-items:center}
.ng{font-size:12px;color:rgba(255,255,255,.65);padding:5px 12px;border-radius:4px;border:.5px solid rgba(255,255,255,.15);background:transparent;cursor:pointer;font-family:inherit}
.ns2{font-size:12px;color:var(--d);padding:5px 12px;border-radius:4px;background:#fff;border:none;font-weight:500;cursor:pointer;font-family:inherit}
.ham{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px;margin-left:auto;background:none;border:none}
.ham span{display:block;width:18px;height:1.5px;background:rgba(255,255,255,.7);border-radius:1px}
.mmenu{display:none;position:fixed;top:42px;left:0;right:0;background:var(--d);padding:12px 22px 20px;z-index:98;border-bottom:.5px solid rgba(255,255,255,.07)}
.mmenu.on{display:block}
.ml{display:block;font-size:13px;color:rgba(255,255,255,.65);padding:10px 0;border-bottom:.5px solid rgba(255,255,255,.06);cursor:pointer}.ml.on{color:#fff;font-weight:500}
/* HERO */
.hero{background:var(--d);padding:42px 26px 34px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.03) 0%,transparent 70%);pointer-events:none}
.ey{font-size:10px;font-weight:500;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:11px}
.ht{font-size:clamp(22px,4.5vw,32px);font-weight:500;color:#fff;line-height:1.18;letter-spacing:-.025em;margin-bottom:10px}
.ht em{font-style:normal;font-weight:600}
.hs{font-size:13px;color:rgba(255,255,255,.35);line-height:1.65;max-width:500px;margin-bottom:22px}
.hbs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.bp{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--d);font-size:13px;font-weight:500;padding:9px 18px;border-radius:5px;border:none;cursor:pointer;font-family:inherit}
.bo{display:inline-flex;align-items:center;gap:6px;background:transparent;color:rgba(255,255,255,.55);font-size:13px;padding:9px 18px;border-radius:5px;border:.5px solid rgba(255,255,255,.2);cursor:pointer;font-family:inherit}
.hst{display:flex;gap:clamp(14px,4vw,28px);padding-top:20px;border-top:.5px solid rgba(255,255,255,.08);flex-wrap:wrap}
.sn{font-size:21px;font-weight:500;color:#fff;line-height:1}.sl{font-size:9.5px;color:rgba(255,255,255,.28);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
/* FLASH */
.flash{background:var(--d2);padding:9px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:.5px solid #2e2e2e}
.fl{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.72)}
.ft{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);font-size:9px;font-weight:500;padding:2px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.06em}
.fr{font-size:11px;color:rgba(255,255,255,.38);white-space:nowrap}
/* PAGE HEADER DARK */
.pdh{background:var(--d);padding:22px 26px;border-bottom:.5px solid rgba(255,255,255,.06)}
.pdt{font-size:20px;font-weight:500;color:#fff;letter-spacing:-.02em;margin-bottom:3px}
.pds{font-size:12px;color:rgba(255,255,255,.32)}
/* PUBLIC CONTENT */
.pc{max-width:1100px;margin:0 auto;padding:24px 26px}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.st{font-size:15px;font-weight:500;color:var(--t1)}
.sl2{font-size:12px;color:var(--t2);cursor:pointer;background:none;border:none;border-bottom:.5px solid var(--bd2);font-family:inherit;padding:0}
.divid{border:none;border-top:.5px solid var(--bd);margin:20px 0}
/* GRIDS */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* CAMP CARD (public) */
.cc{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.cc:hover{border-color:var(--bd2)}
.cth{height:62px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--bg2)}
.cb{padding:10px}
.cbg{display:inline-flex;font-size:9.5px;font-weight:500;padding:2px 6px;border-radius:3px;margin-bottom:5px;background:var(--d);color:#fff}
.cn{font-size:12.5px;font-weight:500;color:var(--t1);margin-bottom:2px}
.csub{font-size:10.5px;color:var(--t2);margin-bottom:7px}
.cf{display:flex;justify-content:space-between;align-items:center;font-size:10px}
.ctm{color:var(--red);font-weight:500}.cst{color:var(--t3)}
.ltip{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--t3);cursor:pointer;margin-top:7px;padding-top:7px;border-top:.5px solid var(--bd)}
.ltip:hover{color:var(--t1)}.ltip b{color:var(--t1);border-bottom:.5px solid var(--t1)}
/* OFFICE CARD */
.oc{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;padding:13px;display:flex;flex-direction:column;gap:9px;cursor:pointer;transition:border-color .15s}
.oc:hover{border-color:var(--bd2)}
.oct{display:flex;align-items:center;gap:10px}
.oav{width:36px;height:36px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0}
.on2{font-size:12.5px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op{font-size:11px;color:var(--t2);margin-top:1px}
.ocf{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:.5px solid var(--bd)}
.ol{font-size:10.5px;color:var(--t3)}
/* STORE CARD */
.sc{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.sc:hover{border-color:var(--bd2)}
.sth{height:60px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--bg2)}
.sb2{padding:9px 10px}
.sn2{font-size:12.5px;font-weight:500;color:var(--t1);margin-bottom:1px}
.stp{font-size:10.5px;color:var(--t2);margin-bottom:5px}
.open-s{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--grn)}
.opd{width:5px;height:5px;border-radius:50%;background:var(--grn)}
.clsd{width:5px;height:5px;border-radius:50%;background:var(--bd2)}
/* BADGES */
.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:500;padding:2px 7px;border-radius:3px;white-space:nowrap}
.bg{background:var(--grn-bg);color:var(--grn);border:.5px solid var(--grn-bd)}
.br{background:var(--red-bg);color:var(--red);border:.5px solid var(--red-bd)}
.by{background:var(--ylw-bg);color:var(--ylw);border:.5px solid var(--ylw-bd)}
.bb{background:var(--blu-bg);color:var(--blu);border:.5px solid var(--blu-bd)}
.bgr{background:var(--bg2);color:var(--t3);border:.5px solid var(--bd)}
.bdk{background:var(--d);color:#fff}
.bo2{background:#FFF7ED;color:#9A3412;border:.5px solid #FED7AA}
.cp{font-size:10px;font-weight:500;padding:2px 7px;border-radius:3px;background:var(--bg2);color:var(--t2);border:.5px solid var(--bd)}
/* SEARCH FILTER */
.srch{display:flex;align-items:center;gap:8px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;padding:8px 11px;font-size:12.5px;color:var(--t3)}
.srch input{flex:1;background:none;border:none;font-size:12.5px;color:var(--t1);font-family:inherit}
.srch input:focus{outline:none}
.ftags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ftag{font-size:11px;padding:4px 10px;border-radius:3px;border:.5px solid var(--bd);cursor:pointer;color:var(--t2);background:var(--bg);font-family:inherit;transition:all .1s}
.ftag:hover{border-color:var(--bd2);color:var(--t1)}.ftag.on{background:var(--d);color:#fff;border-color:var(--d);font-weight:500}
.vtog{display:flex;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;overflow:hidden}
.vb{display:flex;align-items:center;justify-content:center;width:34px;height:34px;cursor:pointer;color:var(--t3);font-size:15px;background:none;border:none}
.vb.on{background:var(--d);color:#fff}
/* TABLE */
.tw{overflow-x:auto}
.dtbl{width:100%;border-collapse:collapse;white-space:nowrap}
.dtbl th{font-size:10px;font-weight:500;color:var(--t3);text-align:left;padding:7px 14px;border-bottom:.5px solid var(--bd);text-transform:uppercase;letter-spacing:.05em;background:var(--bg2)}
.dtbl td{font-size:12px;padding:9px 14px;border-bottom:.5px solid var(--bd);color:var(--t1);vertical-align:middle}
.dtbl tr:last-child td{border-bottom:none}.dtbl tbody tr:hover td{background:var(--bg2)}
/* AUTH */
.auth-w{display:flex;min-height:calc(100vh - 94px)}
.auth-l{flex:1;background:var(--d);padding:50px 42px;display:flex;flex-direction:column;justify-content:center}
.auth-r{flex:1;background:var(--bg);padding:50px 42px;display:flex;flex-direction:column;justify-content:center;border-left:.5px solid var(--bd)}
.atabs{display:flex;border-bottom:.5px solid var(--bd);margin-bottom:20px}
.atab{font-size:13px;padding:9px 12px;cursor:pointer;color:var(--t3);border-bottom:2px solid transparent;margin-bottom:-.5px;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit}
.atab.on{color:var(--t1);font-weight:500;border-bottom-color:var(--d)}
.fg{margin-bottom:13px}.fl2{display:block;font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:5px}
.fi{display:block;width:100%;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;padding:9px 11px;font-size:13px;color:var(--t1);font-family:inherit}
.fi:focus{border-color:var(--d)}
.g2f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bsub{display:block;width:100%;background:var(--d);color:#fff;font-size:13.5px;font-weight:500;padding:10px;border-radius:5px;border:none;cursor:pointer;font-family:inherit}
.cbox-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;cursor:pointer}
.cbox-row input{margin-top:3px;width:14px;height:14px;cursor:pointer}
.cbox-label{font-size:12px;color:var(--t2);line-height:1.5}
.cbox-label a{color:var(--t1);border-bottom:.5px solid var(--bd2)}
.aperk{display:flex;align-items:flex-start;gap:11px;margin-bottom:18px}
.aico{width:30px;height:30px;border-radius:5px;background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.aptr{font-size:12px;color:#fff;font-weight:500;margin-bottom:2px}
.aps{font-size:11px;color:rgba(255,255,255,.33);line-height:1.45}
/* FOOTER */
.pubf{background:var(--d);padding:18px 26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.flink{font-size:11px;color:rgba(255,255,255,.28);cursor:pointer}
.fcp{font-size:10.5px;color:rgba(255,255,255,.18)}
/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:600px){.mo{align-items:center;padding:20px}}
.mo.on{display:flex}
.mb{background:var(--bg);border-radius:12px 12px 0 0;width:100%;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column}
@media(min-width:600px){.mb{border-radius:10px;max-width:520px;max-height:88vh}}
.mb.lg{max-width:720px}
.mh{padding:14px 18px;border-bottom:.5px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;background:var(--bg);z-index:2}
.mht{font-size:14px;font-weight:500;color:var(--t1)}
.mclose{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;font-size:16px;color:var(--t2);display:flex;align-items:center;justify-content:center}
.mbody{padding:18px;flex:1}
/* TOGGLE SWITCH */
.tog-w{display:flex;align-items:center;gap:10px}
.tog{position:relative;width:36px;height:20px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tslider{position:absolute;inset:0;background:var(--bd2);border-radius:20px;cursor:pointer;transition:background .2s}
.tslider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:white;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog input:checked + .tslider{background:var(--d)}
.tog input:checked + .tslider:before{transform:translateX(16px)}
.tog-sm{width:28px;height:16px}.tog-sm .tslider:before{width:10px;height:10px;left:3px;top:3px}.tog-sm input:checked + .tslider:before{transform:translateX(12px)}
.tog-label{font-size:12.5px;color:var(--t1)}
.tog-sub{font-size:10.5px;color:var(--t3)}
/* PROGRESS BAR */
.prog-wrap{margin:6px 0}
.prog-track{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.prog-fill{height:100%;border-radius:4px;background:var(--d);transition:width .3s}
.prog-lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t3);margin-bottom:4px}
/* QR CODE */
.qr-box{width:160px;height:160px;margin:0 auto;position:relative}
.qr-box svg{width:100%;height:100%}
/* SOCIAL LINKS */
.social-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.soc-btn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t2);padding:5px 10px;border-radius:4px;border:.5px solid var(--bd);background:var(--bg);cursor:pointer;transition:all .1s}
.soc-btn:hover{border-color:var(--bd2);color:var(--t1)}
/* UPLOAD ZONE */
.upz{border:1.5px dashed var(--bd);border-radius:6px;padding:20px;text-align:center;cursor:pointer;transition:border-color .15s}
.upz:hover{border-color:var(--bd2)}
.upz-icon{font-size:24px;margin-bottom:8px}
.upz-text{font-size:12.5px;color:var(--t2)}
.upz-sub{font-size:11px;color:var(--t3);margin-top:3px}
/* MATERIAL LIST */
.mat-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:.5px solid var(--bd)}
.mat-item:last-child{border-bottom:none}
.mat-name{flex:1;font-size:12px;color:var(--t1)}
.mat-qty{font-size:11.5px;color:var(--t2);padding:3px 8px;background:var(--bg2);border-radius:3px}
/* TASK TREE */
.task-node{border:.5px solid var(--bd);border-radius:6px;background:var(--bg);margin-bottom:6px;overflow:hidden}
.task-node-h{padding:10px 12px;display:flex;align-items:center;gap:9px;cursor:pointer}
.task-node-h:hover{background:var(--bg2)}
.task-expand{width:18px;height:18px;border-radius:3px;background:var(--bg2);border:none;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t3);flex-shrink:0}
.task-children{padding:0 12px 10px 30px;border-top:.5px solid var(--bd)}
.task-sub{padding:7px 0;border-bottom:.5px solid var(--bg3);font-size:12px;display:flex;align-items:center;gap:8px}
.task-sub:last-child{border-bottom:none}
/* CHANNEL LIST */
.ch-list{flex:1;overflow-y:auto}
.ch-item{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;border-radius:5px;margin:1px 6px;transition:background .1s}
.ch-item:hover{background:rgba(255,255,255,.05)}.ch-item.on{background:rgba(255,255,255,.09)}
.ch-ico{font-size:14px;width:20px;text-align:center;flex-shrink:0}
.ch-name{font-size:12px;color:rgba(255,255,255,.65);flex:1}.ch-item.on .ch-name{color:#fff;font-weight:500}
.ch-cnt{font-size:9.5px;background:var(--red);color:#fff;padding:1px 5px;border-radius:8px}
/* ADMIN SIDEBAR */
#aw .sb{width:192px;background:var(--d);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-top{padding:13px;border-bottom:.5px solid rgba(255,255,255,.07)}
.sblg{display:flex;align-items:center;gap:8px}
.sblm{width:26px;height:26px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--d)}
.sblt{font-size:12.5px;font-weight:500;color:#fff}.sbls{font-size:9px;color:rgba(255,255,255,.28)}
.sb-nav{flex:1;padding:5px 0;overflow-y:auto}
.sb-nav::-webkit-scrollbar{width:2px}.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.sbsec{font-size:9px;font-weight:500;color:rgba(255,255,255,.22);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px 4px}
.sbi{display:flex;align-items:center;gap:9px;padding:7px 14px;cursor:pointer;font-size:12px;color:rgba(255,255,255,.48);position:relative;background:none;border:none;width:100%;text-align:left;font-family:inherit;transition:all .1s}
.sbi:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.04)}.sbi.on{color:#fff;font-weight:500;background:rgba(255,255,255,.07)}
.sbi.on::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;background:#fff;border-radius:0 2px 2px 0}
.sbic{width:18px;text-align:center;font-size:14px;flex-shrink:0}
.sbbg{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:500;padding:1px 5px;border-radius:8px}
.sb-user{padding:11px 14px;border-top:.5px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px}
.sbuav{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:#fff;flex-shrink:0}
.sbun{font-size:11.5px;font-weight:500;color:#fff}.sbur{font-size:9px;color:rgba(255,255,255,.3)}
/* ADMIN MAIN */
.am{flex:1;display:flex;flex-direction:column;overflow:hidden}
.adh{background:var(--bg);border-bottom:.5px solid var(--bd);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
.aht{font-size:14px;font-weight:500;color:var(--t1)}.ahs{font-size:11px;color:var(--t3)}
.aha{display:flex;gap:7px;align-items:center;flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:5px 12px;border-radius:4px;cursor:pointer;font-family:inherit;font-weight:400;transition:all .1s;white-space:nowrap}
.bdk2{background:var(--d);color:#fff;border:none;font-weight:500}.bdk2:hover{background:#2a2a2a}
.bou{background:var(--bg);color:var(--t2);border:.5px solid var(--bd2)}.bou:hover{background:var(--bg2)}
.bgn{background:var(--grn-bg);color:var(--grn);border:.5px solid var(--grn-bd);font-weight:500}
.brd{background:var(--red-bg);color:var(--red);border:.5px solid var(--red-bd)}
.bsm{font-size:11px;padding:4px 9px}
.adb{flex:1;overflow-y:auto;padding:14px 18px;background:var(--bg2)}
.adtabs{display:flex;border-bottom:.5px solid var(--bd);background:var(--bg);padding:0 14px;flex-shrink:0;overflow-x:auto}
.adtab{font-size:12px;padding:9px 12px;cursor:pointer;color:var(--t3);border-bottom:2px solid transparent;margin-bottom:-.5px;white-space:nowrap;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit}
.adtab:hover{color:var(--t2)}.adtab.on{color:var(--t1);font-weight:500;border-bottom-color:var(--d)}
.tbc{display:none}.tbc.on{display:block}
/* KPI */
.kg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kc{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;padding:13px 14px}
.kt{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.ki{width:28px;height:28px;border-radius:5px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:14px}
.ktr{font-size:10px;font-weight:500}
.kn{font-size:22px;font-weight:500;color:var(--t1);letter-spacing:-.02em;line-height:1}
.kl{font-size:10.5px;color:var(--t3);margin-top:3px}
/* WIDGET */
.wg{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;overflow:hidden}
.wgh{padding:10px 14px;border-bottom:.5px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.wgt{font-size:12.5px;font-weight:500;color:var(--t1)}
.wgl{font-size:11px;color:var(--t2);cursor:pointer;border-bottom:.5px solid var(--bd2);background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;padding:0}
.tr-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:.5px solid var(--bd);cursor:pointer}
.tr-row:last-child{border-bottom:none}.tr-row:hover{background:var(--bg2)}
.tri{width:28px;height:28px;border-radius:5px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.trt{font-size:12px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trm{font-size:10.5px;color:var(--t3);margin-top:1px}.trd{font-size:10.5px;color:var(--t3);flex-shrink:0}
.pr-row{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:.5px solid var(--bd)}
.pr-row:last-child{border-bottom:none}
.pav{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;flex-shrink:0}
.pn{flex:1;font-size:12px;font-weight:500;color:var(--t1)}.ptk{font-size:10.5px;color:var(--t3);max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp{font-size:10px;padding:1.5px 6px;border-radius:3px;font-weight:500;flex-shrink:0}
.sdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
/* BAR CHART */
.bch{padding:12px 14px}
.br2{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.blbl{font-size:10.5px;color:var(--t3);width:26px;text-align:right;flex-shrink:0}
.btrk{flex:1;height:11px;background:var(--bg2);border-radius:2px;overflow:hidden}
.bfil{height:100%;border-radius:2px;background:var(--d)}
.bvl{font-size:10.5px;color:var(--t3);width:26px}
/* QUICK ACTIONS */
.qag{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px}
.qai{background:var(--bg);border:.5px solid var(--bd);border-radius:5px;padding:10px;display:flex;align-items:center;gap:9px;cursor:pointer;transition:all .1s}
.qai:hover{background:var(--bg2);border-color:var(--bd2)}
.qaico{width:28px;height:28px;border-radius:4px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.qat{font-size:12px;font-weight:500;color:var(--t1)}.qas{font-size:10.5px;color:var(--t3)}
/* CAMP ROW (admin) */
.car{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:.5px solid var(--bd)}
.car:last-child{border-bottom:none}
.cari{width:38px;height:38px;border-radius:5px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.carn{font-size:12.5px;font-weight:500;color:var(--t1);margin-bottom:2px}
.carm{font-size:10.5px;color:var(--t3)}
.cara{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.carnote{font-size:10.5px;color:var(--t3);text-align:right;margin-right:8px;flex-shrink:0}
/* APPROVAL FORM */
.apform{background:var(--bg);border:.5px solid var(--d);border-radius:6px;margin-bottom:10px;overflow:hidden;display:none}
.apform.on{display:block}
.apfh{padding:9px 14px;background:var(--bg2);border-bottom:.5px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.apfb{padding:14px}
.apins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.apin label{display:block;font-size:10px;font-weight:500;color:var(--t3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.apin input{background:var(--bg2);border:.5px solid var(--bd);border-radius:4px;padding:7px 10px;font-size:12px;color:var(--t1);width:100%;font-family:inherit}
/* TICKET SPLIT */
.tsplit{flex:1;display:flex;overflow:hidden}
.tlp{width:240px;flex-shrink:0;border-right:.5px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
.tls{padding:8px 10px;border-bottom:.5px solid var(--bd)}
.tli2{flex:1;overflow-y:auto}
.titem{padding:9px 12px;display:flex;gap:8px;cursor:pointer;border-bottom:.5px solid var(--bd);transition:background .1s}
.titem:last-child{border-bottom:none}.titem:hover:not(.on){background:var(--bg2)}.titem.on{background:var(--d)}
.tiii{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.titn{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titm{font-size:10px;margin-top:2px}
.cpane{flex:1;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.chd{padding:10px 14px;border-bottom:.5px solid var(--bd);display:flex;align-items:center;gap:10px;flex-shrink:0}
.chav{width:30px;height:30px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.cht{font-size:12.5px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chm{font-size:10.5px;color:var(--t3);display:flex;align-items:center;gap:6px}
.chact{display:flex;gap:6px;flex-shrink:0;margin-left:auto}
.cbdy{flex:1;padding:14px;overflow-y:auto}
.cds{text-align:center;font-size:10.5px;color:var(--t3);margin-bottom:14px;padding-bottom:10px;border-bottom:.5px solid var(--bd)}
.cmsg{margin-bottom:10px;display:flex}
.cmsg.u{justify-content:flex-end}.cmsg.a{justify-content:flex-start}
.cbbl{max-width:72%;padding:9px 11px;border-radius:6px;font-size:12px;line-height:1.55}
.bbu{background:var(--d);color:#fff}.bba{background:var(--bg2);color:var(--t1);border:.5px solid var(--bd)}
.ctm2{font-size:9.5px;color:var(--t3);margin-top:3px}
.cinp{padding:10px 14px;border-top:.5px solid var(--bd);display:flex;gap:8px;align-items:center;flex-shrink:0}
.cif{flex:1;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;padding:8px 10px;font-size:12.5px;color:var(--t1);font-family:inherit}
.cif:focus{border-color:var(--d);outline:none}
.csd{width:34px;height:34px;background:var(--d);color:#fff;border:none;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
/* DEPT CARD */
.dg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.dc{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;padding:13px 14px}
.dct{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.dci{width:28px;height:28px;border-radius:4px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:14px}
.dcn{font-size:12.5px;font-weight:500;color:var(--t1)}.dcc{font-size:11px;color:var(--t3);margin-bottom:9px}
.dcd{display:flex;gap:4px}
/* REPORT CHART */
.rpg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.rpc{background:var(--bg);border:.5px solid var(--bd);border-radius:6px;padding:14px}
.rpn{font-size:22px;font-weight:500;color:var(--t1);letter-spacing:-.02em;margin-bottom:3px}
.rpl{font-size:11px;color:var(--t3)}
.rpt{font-size:10px;font-weight:500;margin-top:4px}
.seg-bar{height:12px;border-radius:6px;display:flex;overflow:hidden;margin:6px 0}
.seg-item{height:100%;transition:width .3s}
.seg-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.seg-l{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--t2)}
.seg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* MOBILE ADMIN NAV */
.amn{display:none;background:var(--d);padding:6px 0 2px;border-top:.5px solid rgba(255,255,255,.07);flex-shrink:0}
.amni{display:flex;justify-content:space-around}
.amnb{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 8px;background:none;border:none;font-family:inherit}
.amns{font-size:20px}.amnl{font-size:9px;color:rgba(255,255,255,.38)}.amnb.on .amnl{color:#fff;font-weight:500}
/* INFO BANNER */
.ib{background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ibt{font-size:12px;color:var(--t2)}.ibt b{color:var(--t1)}
.iba{display:flex;gap:6px}
/* RESPONSIVE */
@media(max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}.kg{grid-template-columns:repeat(2,1fr)}.apins{grid-template-columns:1fr 1fr}.dg{grid-template-columns:1fr 1fr}.rpg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.adb{padding-bottom:60px}
.nl,.nact{display:none}.ham{display:flex}
.hero{padding:26px 18px 22px}.pc{padding:18px 16px}
.g4,.g3{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}
.auth-w{flex-direction:column}.auth-l,.auth-r{padding:28px 20px}.auth-r{border-left:none;border-top:.5px solid var(--bd)}
#aw .sb{display:none}.amn{display:block}
#aw{flex-direction:column}
.tsplit{flex-direction:column}
.tlp{width:100%;height:145px;flex-shrink:0;border-right:none;border-bottom:.5px solid var(--bd)}
.car{flex-wrap:wrap}.carnote{display:none}.cara{width:100%}
.fr{display:none}.kg{grid-template-columns:1fr 1fr}
.mb{max-width:100%}
}
@media(max-width:480px){.g4,.g3{grid-template-columns:1fr}.dg{grid-template-columns:1fr}.rpg{grid-template-columns:1fr 1fr}}
/* === CALENDAR === */
.cal-steps{display:flex;align-items:center;gap:6px;margin-bottom:16px;padding-bottom:14px;border-bottom:.5px solid var(--bd)}
.cst{font-size:11px;color:var(--t3);padding:4px 9px;border-radius:4px;white-space:nowrap}
.cst.on{color:var(--t1);font-weight:500;background:var(--bg2);border:.5px solid var(--bd)}
.cst.done{color:var(--grn);font-weight:500}
.cst-arr{color:var(--bd2);font-size:12px;flex-shrink:0}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav-btn{width:30px;height:30px;border-radius:5px;border:.5px solid var(--bd);background:var(--bg);cursor:pointer;font-size:18px;color:var(--t2);display:flex;align-items:center;justify-content:center;font-family:inherit;line-height:1}
.cal-nav-btn:hover{background:var(--bg2)}
.cal-nav-lbl{font-size:14px;font-weight:500;color:var(--t1)}
.cwday .cwdn{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.cwday .cwdd{font-size:15px;font-weight:500;color:var(--t1);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cwday.csel.ctoday .cwdd{background:rgba(255,255,255,.25)}
.cwday.csel .cwdn,
.cwday .cwds{font-size:9px;color:var(--grn)}
.cwday.cdis .cwdn,
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cdow{font-size:9px;font-weight:500;color:var(--t3);text-align:center;padding:5px 0;text-transform:uppercase;letter-spacing:.04em}
.cday{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:7px;cursor:pointer;transition:all .1s;position:relative}
.cday:hover:not(.cdis):not(.cempty):not(.cpast){background:var(--bg2)}
.cday.ctoday{font-weight:700}
.cday.ctoday::after{content:'';position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--d)}
.cday.csel{background:var(--d)!important;color:#fff!important}
.cday.csel::after{background:#fff}
.cday.cempty{pointer-events:none}
.cday.cpast{color:var(--bd2);cursor:default;pointer-events:none}
.cday.cdis{color:var(--bg3);cursor:default;pointer-events:none}
.cal-day-banner{background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:10px 13px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.cal-day-banner-t{font-size:13px;font-weight:500;color:var(--t1)}
.cal-day-banner-s{font-size:11px;color:var(--t3)}
.cal-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}
.cslot{padding:10px 4px;border-radius:5px;border:.5px solid var(--bd);text-align:center;font-size:12.5px;cursor:pointer;transition:all .1s;font-family:inherit;background:var(--bg)}
.cslot:hover:not(.ctaken){border-color:var(--d);background:var(--bg2)}
.cslot.ctaken{color:var(--bd2);cursor:default;text-decoration:line-through;font-size:11.5px;background:var(--bg2)}
.cslot.csel{background:var(--d);color:#fff;border-color:var(--d);font-weight:500}
.cal-summary{background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:12px 14px;margin-bottom:16px}
.cal-summary-row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.cal-summary-row .csr-k{color:var(--t3)}
.cal-summary-row .csr-v{font-weight:500;color:var(--t1)}
.cal-success{text-align:center;padding:24px 10px}
.tog[style*="32px"] .tslider:before{width:12px;height:12px;top:3px;left:3px}
.tog[style*="32px"] input:checked + .tslider:before{transform:translateX(14px)}
.tog-rg .tslider{background:var(--red)}
.tog-rg input:checked + .tslider{background:var(--grn)}
.tog-cell{text-align:center;padding:0 8px}
.tog-wrap-sm{display:flex;flex-direction:column;align-items:center;gap:2px}
.tog-wrap-sm span{font-size:9px;font-weight:500}
.tg-on{color:var(--grn)}.tg-off{color:var(--red)}
.tbl-toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:.5px solid var(--bd);flex-wrap:wrap;background:var(--bg)}
.tbl-search{display:flex;align-items:center;gap:7px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;padding:6px 10px;font-size:12px;flex:1;min-width:160px}
.tbl-search input{flex:1;background:none;border:none;font-size:12px;color:var(--t1);font-family:inherit}
.ftag-sm{font-size:10.5px;padding:3px 9px;border-radius:3px;border:.5px solid var(--bd);cursor:pointer;color:var(--t2);background:var(--bg);font-family:inherit}
.ftag-sm:hover{border-color:var(--bd2);color:var(--t1)}.ftag-sm.on{background:var(--d);color:#fff;border-color:var(--d)}
/* === HERO SLIDER === */
.hero-slider{position:relative;overflow:hidden;background:var(--d)}
.hero-slides{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hero-slide{min-width:100%;padding:40px 26px 48px;position:relative;overflow:hidden;flex-shrink:0}
.hero-slide::after{content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 65%);pointer-events:none}
.slider-nav{position:absolute;bottom:14px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:7px;z-index:5}
.slider-dot{width:6px;height:6px;border-radius:6px;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s}
.slider-dot.on{width:22px;background:#fff}
.slider-arr{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;background:rgba(255,255,255,.12);border:none;border-radius:50%;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .15s}
.slider-arr:hover{background:rgba(255,255,255,.22)}
.slider-prev{left:12px}.slider-next{right:12px}
.slide-tag{display:inline-block;font-size:9.5px;font-weight:500;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;background:rgba(255,255,255,.08);padding:3px 10px;border-radius:3px}
.slide-title{font-size:clamp(22px,4.5vw,32px);font-weight:500;color:#fff;line-height:1.18;letter-spacing:-.025em;margin-bottom:8px}
.slide-title em{font-style:normal;font-weight:600}
.slide-sub{font-size:13px;color:rgba(255,255,255,.38);line-height:1.65;max-width:500px;margin-bottom:20px}
.slide-btns{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:38px}
.slide-mini-cards{display:flex;gap:9px;margin-bottom:28px;flex-wrap:wrap}
.slide-mini{background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.12);border-radius:7px;padding:10px 12px;min-width:100px;flex:1}
.smc-ico{font-size:20px;margin-bottom:5px}
.smc-t{font-size:12px;font-weight:500;color:#fff}
.smc-s{font-size:10.5px;color:rgba(255,255,255,.4)}
/* Campaign card images */
.cth{height:120px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cth-emoji{font-size:44px;position:relative;z-index:1}
.cth-store{position:absolute;bottom:7px;right:8px;font-size:9.5px;font-weight:500;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:2px 7px;border-radius:3px;z-index:2;backdrop-filter:blur(2px)}
.cth-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:4px;z-index:2;backdrop-filter:blur(2px)}
/* Upload zone */
.upz2{border:1.5px dashed var(--bd);border-radius:8px;padding:18px;text-align:center;cursor:pointer;transition:border-color .15s;background:var(--bg2)}
.upz2:hover{border-color:var(--d)}
.upz2-ico{font-size:28px;margin-bottom:7px}
.upz2-t{font-size:12.5px;font-weight:500;color:var(--t2)}
.upz2-s{font-size:11px;color:var(--t3);margin-top:3px}
/* Social row */
.social-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0}
.si-row{display:flex;align-items:center;gap:8px}
.si-ico{font-size:18px;width:28px;text-align:center;flex-shrink:0}
</style>
</head>
<body>
<!-- DEMO BAR -->
<div id="db">
<span class="dl">Mars Kocaeli</span><div class="ds"></div>
<span class="dl" style="font-size:9px;color:rgba(255,255,255,.18)">PUBLIC</span>
<button class="db-btn on" onclick="sp('home')">Ana sayfa</button>
<button class="db-btn" onclick="sp('kamp')">Kampanyalar</button>
<button class="db-btn" onclick="sp('ofis')">Ofisler</button>
<button class="db-btn" onclick="sp('cadde')">Cadde</button>
<button class="db-btn" onclick="sp('giris')">Giriş / Üye ol</button>
<div class="ds"></div>
<span class="dl" style="font-size:9px;color:rgba(255,255,255,.18)">ADMIN</span>
<button class="db-btn" onclick="sa('dash')">Dashboard</button>
<button class="db-btn" onclick="sa('ofisadm')">Ofis</button>
<button class="db-btn" onclick="sa('caddeadm')">Cadde</button>
<button class="db-btn" onclick="sa('tickets')">Ticket</button>
<button class="db-btn" onclick="sa('gorev')">Görevler</button>
<button class="db-btn" onclick="sa('personel')">Personel</button>
<button class="db-btn" onclick="sa('chat')">Chat</button>
<button class="db-btn" onclick="sa('uyeler')">Üyeler</button>
<button class="db-btn" onclick="sa('kamps')">Kampanya</button>
<button class="db-btn" onclick="sa('kupon')">Kupon</button>
<button class="db-btn" onclick="sa('rapor')">Raporlar</button>
<button class="db-btn" onclick="sa('mesaj')">Toplu Mesaj</button>
<button class="db-btn" onclick="sa('ayar')">Ayarlar</button>
</div>
<!-- PUBLIC WRAPPER -->
<div id="pw" class="on">
<nav class="pnav">
<div class="nlg" onclick="sp('home')"><div class="nm">M</div><div><div class="nt">Mars</div><div class="ns">KOCAELİ</div></div></div>
<div class="nl">
<button class="nlink on" onclick="sp('home')">Ana sayfa</button>
<button class="nlink" onclick="sp('ofis')">Ofisler</button>
<button class="nlink" onclick="sp('cadde')">Cadde</button>
<button class="nlink" onclick="sp('kamp')">Kampanyalar</button>
</div>
<div class="nact">
<button class="ng" onclick="sp('giris')">Giriş yap</button>
<button class="ns2" onclick="sp('giris')">Üye ol</button>
</div>
<button class="ham" onclick="document.getElementById('mmen').classList.toggle('on')"><span></span><span></span><span></span></button>
</nav>
<div class="mmenu" id="mmen">
<a class="ml on" onclick="sp('home');document.getElementById('mmen').classList.remove('on')">Ana sayfa</a>
<a class="ml" onclick="sp('ofis');document.getElementById('mmen').classList.remove('on')">Ofisler</a>
<a class="ml" onclick="sp('cadde');document.getElementById('mmen').classList.remove('on')">Cadde</a>
<a class="ml" onclick="sp('kamp');document.getElementById('mmen').classList.remove('on')">Kampanyalar</a>
<div style="display:flex;gap:8px;margin-top:16px">
<button class="ng" style="flex:1" onclick="sp('giris')">Giriş yap</button>
<button class="ns2" style="flex:1" onclick="sp('giris')">Üye ol</button>
</div>
</div>
<!-- PAGE: ANA SAYFA -->
<div id="pp-home" class="pp on">
<div class="hero-slider" id="hero-slider" onmouseenter="sliderStop()" onmouseleave="sliderStart()">
<div class="hero-slides" id="hero-slides">
<!-- SLIDE 1: Karşılama -->
<div class="hero-slide">
<div class="slide-tag">Mars Kocaeli — AVM & İş Merkezi</div>
<div class="slide-title">Alışveriş, iş ve yaşamın<br><em>buluşma noktası.</em></div>
<div class="slide-sub">Kampanyaları keşfet, ofis rehberini kullan, destek al — hepsi tek platformda.</div>
<div class="slide-btns">
<button class="bp" onclick="sp('kamp')">Kampanyalara bak →</button>
<button class="bo" onclick="sp('ofis')">Ofis rehberi</button>
</div>
<div class="hst">
<div><div class="sn">8</div><div class="sl">Aktif kampanya</div></div>
<div><div class="sn">256</div><div class="sl">Ofis & mağaza</div></div>
<div><div class="sn">34+</div><div class="sl">Kafe & restoran</div></div>
</div>
</div>
<!-- SLIDE 2: Kampanyalar -->
<div class="hero-slide" style="background:linear-gradient(135deg,#111 0%,#1a1a1a 100%)">
<div class="slide-tag">Bu haftanın öne çıkanları</div>
<div class="slide-title">Kaçırmayın —<br><em>Bugün indirim fırsatları</em></div>
<div class="slide-sub">Üye olun, QR kupon alın, kasada anında kullanın.</div>
<div class="slide-mini-cards">
<div class="slide-mini"><div class="smc-ico">☕</div><div class="smc-t">Kahve Dünyası</div><div class="smc-s">%25 indirim · Flash</div></div>
<div class="slide-mini"><div class="smc-ico">🍔</div><div class="smc-t">Burger Lab</div><div class="smc-s">2 al 1 öde · Bugün</div></div>
<div class="slide-mini"><div class="smc-ico">🛍️</div><div class="smc-t">Macrocenter</div><div class="smc-s">%30 indirim · 3 gün</div></div>
<div class="slide-mini" style="display:none"></div>
</div>
<div class="slide-btns">
<button class="bp" onclick="sp('kamp')">Tüm kampanyalar →</button>
<button class="bo" onclick="sp('giris')">Üye ol, kupon al</button>
</div>
</div>
<!-- SLIDE 3: Ofis Rehberi -->
<div class="hero-slide" style="background:linear-gradient(135deg,#111 0%,#181818 100%)">
<div class="slide-tag">A1 & A2 Blok · 256 ofis</div>
<div class="slide-title">Ofis rehberi<br><em>tüm firmalar burada.</em></div>
<div class="slide-sub">Hukuk, sağlık, teknoloji ve daha fazlası. Randevu alın, mesaj gönderin.</div>
<div class="slide-mini-cards">
<div class="slide-mini"><div class="smc-ico">🏥</div><div class="smc-t">Sağlık</div><div class="smc-s">48 klinik & doktor</div></div>
<div class="slide-mini"><div class="smc-ico">⚖️</div><div class="smc-t">Hukuk</div><div class="smc-s">32 avukatlık bürosu</div></div>
<div class="slide-mini"><div class="smc-ico">💻</div><div class="smc-t">Teknoloji</div><div class="smc-s">27 yazılım şirketi</div></div>
</div>
<div class="slide-btns">
<button class="bp" onclick="sp('ofis')">Ofis rehberine git →</button>
</div>
</div>
<!-- SLIDE 4: Cadde -->
<div class="hero-slide" style="background:linear-gradient(135deg,#111 0%,#161616 100%)">
<div class="slide-tag">Kafeler · Restoranlar · Marketler</div>
<div class="slide-title">Mars Cadde —<br><em>34 mağaza, tek çatı.</em></div>
<div class="slide-sub">Rezervasyon yapın, mağazaya mesaj gönderin, kampanyaları takip edin.</div>
<div class="slide-mini-cards">
<div class="slide-mini"><div class="smc-ico">☕</div><div class="smc-t">Starbucks</div><div class="smc-s">Açık · 07:00–22:00</div></div>
<div class="slide-mini"><div class="smc-ico">🍽️</div><div class="smc-t">Gurme Mutfak</div><div class="smc-s">Açık · 11:00–23:00</div></div>
<div class="slide-mini"><div class="smc-ico">🛒</div><div class="smc-t">Migros</div><div class="smc-s">Açık · 09:00–22:00</div></div>
</div>
<div class="slide-btns">
<button class="bp" onclick="sp('cadde')">Cadde'ye git →</button>
<button class="bo" onclick="sp('giris')">Üye ol</button>
</div>
</div>
</div>
<!-- Arrows -->
<button class="slider-arr slider-prev" onclick="sliderPrev()">‹</button>
<button class="slider-arr slider-next" onclick="sliderNext()">›</button>
<!-- Dots -->
<div class="slider-nav">
<div class="slider-dot on" onclick="sliderGo(0)"></div>
<div class="slider-dot" onclick="sliderGo(1)"></div>
<div class="slider-dot" onclick="sliderGo(2)"></div>
<div class="slider-dot" onclick="sliderGo(3)"></div>
</div>
</div>
<div class="flash"><div class="fl"><span class="ft">Flash</span>Bugün seçili kafelerde %20 indirim — Sadece üyelere özel</div><div class="fr">⏰ 4s 22dk</div></div>
<div class="pc">
<div class="sh"><div class="st">Aktif kampanyalar</div><button class="sl2" onclick="sp('kamp')">Tümünü gör →</button></div>
<div class="g4" style="margin-bottom:22px">
<div class="cc" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#92400E,#d97706)">
<span class="cth-emoji" style="font-size:60px">☕</span>
<span class="cth-store">Kahve Dünyası</span>
<span class="cth-badge" style="background:#F59E0B">%15 indirim</span>
</div>
<div class="cb">
<div class="cn">Kahve Dünyası</div>
<div class="csub">%15 indirim</div>
<div class="cf"><span class="ctm">⏰ 2s 30dk</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 Kupon için <b>giriş yap</b></div>
</div>
</div>
<div class="cc" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#991B1B,#dc2626)">
<span class="cth-emoji" style="font-size:60px">🍔</span>
<span class="cth-store">Burger Lab</span>
<span class="cth-badge" style="background:#EF4444">2 al 1 öde</span>
</div>
<div class="cb">
<div class="cn">Burger Lab</div>
<div class="csub">2 al 1 öde</div>
<div class="cf"><span class="ctm">⏰ Bugün son</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 Kupon için <b>giriş yap</b></div>
</div>
</div>
<div class="cc" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#1e3a5f,#1D4ED8)">
<span class="cth-emoji" style="font-size:60px">🛍️</span>
<span class="cth-store">Macrocenter</span>
<span class="cth-badge" style="background:#3B82F6">%30 indirim</span>
</div>
<div class="cb">
<div class="cn">Macrocenter</div>
<div class="csub">%30 indirim</div>
<div class="cf"><span class="ctm">✓ 3 gün</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 Kupon için <b>giriş yap</b></div>
</div>
</div>
<div class="cc" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#6B21A8,#a855f7)">
<span class="cth-emoji" style="font-size:60px">🧴</span>
<span class="cth-store">Watsons</span>
<span class="cth-badge" style="background:#A855F7">%10 indirim</span>
</div>
<div class="cb">
<div class="cn">Watsons</div>
<div class="csub">%10 indirim</div>
<div class="cf"><span class="ctm">✓ 5 gün</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 Kupon için <b>giriş yap</b></div>
</div>
</div>
</div>
<hr class="divid">
<div class="sh"><div class="st">Ofis rehberi</div><button class="sl2" onclick="sp('ofis')">Tüm ofisler →</button></div>
<div class="srch" style="margin-bottom:10px"><span>🔍</span><input type="text" placeholder="Firma veya kişi ara..."></div>
<div class="ftags">
<button class="ftag on" onclick="tf(this)">Tümü</button>
<button class="ftag" onclick="tf(this)">A1 Blok</button>
<button class="ftag" onclick="tf(this)">A2 Blok</button>
<button class="ftag" onclick="tf(this)">Sağlık</button>
<button class="ftag" onclick="tf(this)">Hukuk</button>
</div>
<div class="g3" style="margin-bottom:22px">
<div class="oc" onclick="openOffice(1)"><div class="oct"><div class="oav" style="background:#EFF6FF;color:#1D4ED8">DK</div><div style="flex:1;min-width:0"><div class="on2">Dermatoloji Kliniği</div><div class="op">Dr. Fatma Demir</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 108</div><span class="cp">Sağlık</span></div></div>
<div class="oc" onclick="openOffice(2)"><div class="oct"><div class="oav" style="background:#FEF3C7;color:#92400E">AH</div><div style="flex:1;min-width:0"><div class="on2">Ahmet Hukuk Bürosu</div><div class="op">Avukatlık</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 104</div><span class="cp">Hukuk</span></div></div>
<div class="oc" onclick="openOffice(3)"><div class="oct"><div class="oav" style="background:#F0FDF4;color:#166534">MT</div><div style="flex:1;min-width:0"><div class="on2">Mars Teknoloji</div><div class="op">Yazılım & BT</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 112</div><span class="cp">Teknoloji</span></div></div>
</div>
<hr class="divid">
<div class="sh"><div class="st">Kafeler & restoranlar</div><button class="sl2" onclick="sp('cadde')">Cadde'ye git →</button></div>
<div class="g4">
<div class="sc" onclick="openStore(1)">
<div class="cth" style="background:linear-gradient(135deg,#064e3b,#10b981);height:240px">
<span class="cth-emoji">☕</span>
<span class="cth-badge" style="background:#059669">Kafe</span>
</div>
<div class="sb2"><div class="sn2">Starbucks</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>07:00–22:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(1)">
<div class="cth" style="background:linear-gradient(135deg,#1e3a5f,#1D4ED8);height:240px">
<span class="cth-emoji">🍽️</span>
<span class="cth-badge" style="background:#1D4ED8">Restoran</span>
</div>
<div class="sb2"><div class="sn2">Gurme Mutfak</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>11:00–23:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(1)">
<div class="cth" style="background:linear-gradient(135deg,#92400E,#d97706);height:240px">
<span class="cth-emoji">🥐</span>
<span class="cth-badge" style="background:#D97706">Pastane</span>
</div>
<div class="sb2"><div class="sn2">Simit Sarayı</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>08:00–21:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(1)">
<div class="cth" style="background:linear-gradient(135deg,#991B1B,#dc2626);height:240px">
<span class="cth-emoji">🍔</span>
<span class="cth-badge" style="background:#DC2626">Fast Food</span>
</div>
<div class="sb2"><div class="sn2">Burger Lab</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>10:00–22:00</span></div>
</div>
</div>
</div>
</div>
<div class="pubf"><div class="nlg"><div class="nm">M</div><span style="font-size:12px;font-weight:500;color:rgba(255,255,255,.7)">Mars Kocaeli</span></div><div style="display:flex;gap:14px"><span class="flink">Hakkımızda</span><span class="flink">İletişim</span><span class="flink">Gizlilik</span></div><span class="fcp">© 2026 Mars Kocaeli</span></div>
</div>
<!-- PAGE: KAMPANYALAR -->
<div id="pp-kamp" class="pp">
<div class="pdh"><div class="pdt">Kampanyalar</div><div class="pds">Üye ol, QR kuponla anında indirim kullan</div></div>
<div class="pc">
<div class="ib"><div class="ibt">Kampanyaları kullanmak için <b>üye ol</b> veya <b>giriş yap</b></div><div class="iba"><button class="btn bou" onclick="sp('giris')">Giriş yap</button><button class="btn bdk2" onclick="sp('giris')">Üye ol →</button></div></div>
<div class="adtabs" style="background:transparent;padding:0;border-bottom:.5px solid var(--bd);margin-bottom:14px">
<button class="adtab on" onclick="swt(this,'kf')">Flash ⚡ <span style="background:var(--red);color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;margin-left:3px">2</span></button>
<button class="adtab" onclick="swt(this,'ks')">Süreli 📅</button>
<button class="adtab" onclick="swt(this,'kk')">Sürekli ♾️</button>
</div>
<div id="kf" class="tbc on">
<div style="margin-bottom:8px;padding:9px 12px;background:var(--red-bg);border:.5px solid var(--red-bd);border-radius:5px;font-size:12px;color:var(--red)">⚡ Flash kampanyalar süreli indirimlerdir — süre dolmadan kuponunuzu alın!</div>
<div class="g3"><div class="cc" data-cat="kafe" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#92400E,#d97706)">
<span class="cth-emoji">☕</span>
<span class="cth-store">Kahve Dünyası</span>
<span class="cth-badge" style="background:#F59E0B">Flash %25</span>
</div>
<div class="cb"><div class="cn">Kahve Dünyası</div><div class="csub">Flash %25</div>
<div class="cf"><span class="ctm">⏰ 2s 14dk</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div>
<div class="cc" data-cat="kafe" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#064e3b,#10b981)">
<span class="cth-emoji">🥤</span>
<span class="cth-store">Starbucks</span>
<span class="cth-badge" style="background:#10b981">Flash 2al1öde</span>
</div>
<div class="cb"><div class="cn">Starbucks</div><div class="csub">Flash 2al1öde</div>
<div class="cf"><span class="ctm">⏰ 4s 08dk</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div></div>
</div>
<div id="ks" class="tbc">
<div class="g3"><div class="cc" data-cat="yemek" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#991B1B,#dc2626)">
<span class="cth-emoji">🍔</span>
<span class="cth-store">Burger Lab</span>
<span class="cth-badge" style="background:#EF4444">2 al 1 öde</span>
</div>
<div class="cb"><div class="cn">Burger Lab</div><div class="csub">2 al 1 öde</div>
<div class="cf"><span class="ctm">Bugün son</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div>
<div class="cc" data-cat="alisveris" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#1e3a5f,#1D4ED8)">
<span class="cth-emoji">🛍️</span>
<span class="cth-store">Macrocenter</span>
<span class="cth-badge" style="background:#3B82F6">%30 indirim</span>
</div>
<div class="cb"><div class="cn">Macrocenter</div><div class="csub">%30 indirim</div>
<div class="cf"><span class="ctm">3 gün kaldı</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div>
<div class="cc" data-cat="saglik" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#6B21A8,#a855f7)">
<span class="cth-emoji">🧴</span>
<span class="cth-store">Watsons</span>
<span class="cth-badge" style="background:#A855F7">%10 indirim</span>
</div>
<div class="cb"><div class="cn">Watsons</div><div class="csub">%10 indirim</div>
<div class="cf"><span class="ctm">5 gün kaldı</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div>
<div class="cc" data-cat="yemek" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#7f1d1d,#ef4444)">
<span class="cth-emoji">🍕</span>
<span class="cth-store">Pizza Mia</span>
<span class="cth-badge" style="background:#F97316">%20 indirim</span>
</div>
<div class="cb"><div class="cn">Pizza Mia</div><div class="csub">%20 indirim</div>
<div class="cf"><span class="ctm">7 gün kaldı</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div></div>
</div>
<div id="kk" class="tbc">
<div class="g3"><div class="cc" data-cat="kafe" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#111,#333)">
<span class="cth-emoji">☕</span>
<span class="cth-store">Tüm Kafeler</span>
<span class="cth-badge" style="background:#6B7280">%5 indirim</span>
</div>
<div class="cb"><div class="cn">Tüm Kafeler</div><div class="csub">%5 indirim</div>
<div class="cf"><span class="ctm">♾ Limitless</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div>
<div class="cc" data-cat="alisveris" onclick="openLoginPrompt()">
<div class="cth" style="background:linear-gradient(135deg,#1e3a5f,#374151)">
<span class="cth-emoji">🅿️</span>
<span class="cth-store">Otopark</span>
<span class="cth-badge" style="background:#6B7280">2 saat ücretsiz</span>
</div>
<div class="cb"><div class="cn">Otopark</div><div class="csub">2 saat ücretsiz</div>
<div class="cf"><span class="ctm">♾ Limitless</span></div>
<div class="ltip" onclick="event.stopPropagation();openLoginPrompt()">🔒 <b>Kupon al</b></div>
</div>
</div></div>
</div>
</div>
<div class="pubf"><div class="nlg"><div class="nm">M</div><span style="font-size:12px;font-weight:500;color:rgba(255,255,255,.7)">Mars Kocaeli</span></div><span class="fcp">© 2026</span></div>
</div>
<div id="pp-ofis" class="pp">
<div class="pdh"><div class="pdt">Ofis rehberi</div><div class="pds">256 ofis · A1 ve A2 Blok</div></div>
<div class="pc">
<div style="display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap">
<div class="srch" style="flex:1;min-width:200px"><span>🔍</span><input type="text" placeholder="Firma, kişi veya sektör ara..."></div>
<div class="vtog"><button class="vb on" id="vgrid" onclick="setV('grid')">▦</button><button class="vb" id="vtbl" onclick="setV('tbl')">☰</button></div>
</div>
<div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px">
<div><div style="font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px">Blok</div>
<div class="ftags" style="margin:0"><button class="ftag on" onclick="tf(this)">Tümü</button><button class="ftag" onclick="tf(this)">A1</button><button class="ftag" onclick="tf(this)">A2</button></div></div>
<div><div style="font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px">Kat</div>
<div class="ftags" style="margin:0"><button class="ftag" onclick="tf(this)">1</button><button class="ftag" onclick="tf(this)">2</button><button class="ftag" onclick="tf(this)">3</button><button class="ftag" onclick="tf(this)">4</button></div></div>
<div><div style="font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px">Kategori</div>
<div class="ftags" style="margin:0"><button class="ftag" onclick="tf(this)">Sağlık</button><button class="ftag" onclick="tf(this)">Hukuk</button><button class="ftag" onclick="tf(this)">Teknoloji</button><button class="ftag" onclick="tf(this)">Finans</button><button class="ftag" onclick="tf(this)">Mimarlık</button></div></div>
</div>
<div style="font-size:11px;color:var(--t3);margin-bottom:12px">256 SONUÇ</div>
<div id="ogv" class="g3">
<div class="oc" onclick="openOffice(1)"><div class="oct"><div class="oav" style="background:#EFF6FF;color:#1D4ED8">DK</div><div style="flex:1;min-width:0"><div class="on2">Dermatoloji Kliniği</div><div class="op">Dr. Fatma Demir</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 108</div><span class="cp">Sağlık</span></div></div>
<div class="oc" onclick="openOffice(2)"><div class="oct"><div class="oav" style="background:#FEF3C7;color:#92400E">AH</div><div style="flex:1;min-width:0"><div class="on2">Ahmet Hukuk Bürosu</div><div class="op">Avukatlık</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 104</div><span class="cp">Hukuk</span></div></div>
<div class="oc" onclick="openOffice(3)"><div class="oct"><div class="oav" style="background:#F0FDF4;color:#166534">MT</div><div style="flex:1;min-width:0"><div class="on2">Mars Teknoloji</div><div class="op">Yazılım & BT</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 112</div><span class="cp">Teknoloji</span></div></div>
<div class="oc" onclick="openOffice(4)"><div class="oct"><div class="oav" style="background:var(--bg2);color:var(--t2)">YM</div><div style="flex:1;min-width:0"><div class="on2">Yıldız Muhasebe</div><div class="op">Mali Müşavirlik</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 115</div><span class="cp">Finans</span></div></div>
<div class="oc" onclick="openOffice(5)"><div class="oct"><div class="oav" style="background:#EEEDFE;color:#3C3489">KM</div><div style="flex:1;min-width:0"><div class="on2">Kocaeli Mimarlık</div><div class="op">Mimari Tasarım</div></div></div><div class="ocf"><div class="ol">📍 A1 · 1.Kat · 118</div><span class="cp">Mimarlık</span></div></div>
<div class="oc" onclick="openOffice(6)"><div class="oct"><div class="oav" style="background:#FEF2F2;color:#991B1B">DZ</div><div style="flex:1;min-width:0"><div class="on2">Diş Kliniği Zirve</div><div class="op">Diş Hekimliği</div></div></div><div class="ocf"><div class="ol">📍 A1 · 2.Kat · 204</div><span class="cp">Sağlık</span></div></div>
</div>
<div id="otv" style="display:none">
<div class="tw"><table class="dtbl"><thead><tr><th></th><th>Firma / Yetkili</th><th>Kategori</th><th>Konum</th><th>Telefon</th><th></th></tr></thead>
<tbody>
<tr onclick="openOffice(1)" style="cursor:pointer"><td><div class="oav" style="width:28px;height:28px;background:#EFF6FF;color:#1D4ED8;border-radius:4px;font-size:10px">DK</div></td><td><div style="font-size:12.5px;font-weight:500">Dermatoloji Kliniği</div><div style="font-size:11px;color:var(--t3)">Dr. Fatma Demir</div></td><td><span class="cp">Sağlık</span></td><td style="color:var(--t2)">A1·1.Kat·108</td><td style="color:var(--t2)">0262 331 02 08</td><td>›</td></tr>
<tr onclick="openOffice(2)" style="cursor:pointer"><td><div class="oav" style="width:28px;height:28px;background:#FEF3C7;color:#92400E;border-radius:4px;font-size:10px">AH</div></td><td><div style="font-size:12.5px;font-weight:500">Ahmet Hukuk Bürosu</div><div style="font-size:11px;color:var(--t3)">Ahmet Demir</div></td><td><span class="cp">Hukuk</span></td><td style="color:var(--t2)">A1·1.Kat·104</td><td style="color:var(--t2)">0262 331 04 04</td><td>›</td></tr>
<tr onclick="openOffice(3)" style="cursor:pointer"><td><div class="oav" style="width:28px;height:28px;background:#F0FDF4;color:#166534;border-radius:4px;font-size:10px">MT</div></td><td><div style="font-size:12.5px;font-weight:500">Mars Teknoloji</div><div style="font-size:11px;color:var(--t3)">Kemal Öztürk</div></td><td><span class="cp">Teknoloji</span></td><td style="color:var(--t2)">A1·1.Kat·112</td><td style="color:var(--t2)">0262 331 01 12</td><td>›</td></tr>
<tr onclick="openOffice(4)" style="cursor:pointer"><td><div class="oav" style="width:28px;height:28px;background:var(--bg2);color:var(--t2);border-radius:4px;font-size:10px">YM</div></td><td><div style="font-size:12.5px;font-weight:500">Yıldız Muhasebe</div><div style="font-size:11px;color:var(--t3)">Müşavirlik</div></td><td><span class="cp">Finans</span></td><td style="color:var(--t2)">A1·1.Kat·115</td><td style="color:var(--t2)">0262 331 01 15</td><td>›</td></tr>
</tbody></table></div>
</div>
</div>
<div class="pubf"><div class="nlg"><div class="nm">M</div><span style="font-size:12px;font-weight:500;color:rgba(255,255,255,.7)">Mars Kocaeli</span></div><span class="fcp">© 2026</span></div>
</div>
<!-- PAGE: CADDE -->
<div id="pp-cadde" class="pp">
<div class="pdh"><div class="pdt">Cadde</div><div class="pds">34 mağaza · Kafe, restoran, market ve daha fazlası</div></div>
<div class="pc">
<div class="srch" style="margin-bottom:12px"><span>🔍</span><input type="text" placeholder="Mağaza veya kategori ara..."></div>
<div class="ftags" style="margin-bottom:14px">
<button class="ftag on" onclick="tf(this)">Tümü</button>
<button class="ftag" onclick="tf(this)">Kafe</button>
<button class="ftag" onclick="tf(this)">Restoran</button>
<button class="ftag" onclick="tf(this)">Market</button>
<button class="ftag" onclick="tf(this)">Tekstil</button>
<button class="ftag" onclick="tf(this)">Güzellik</button>
</div>
<div class="g4">
<div class="sc" onclick="openStore(1)">
<div class="cth" style="background:linear-gradient(135deg,#064e3b,#10b981);height:240px">
<span class="cth-emoji" style="font-size:64px">☕</span>
<span class="cth-badge" style="background:#059669;font-size:11px;padding:4px 10px">Kafe</span>
<span class="cth-store" style="font-size:11px">Starbucks</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Starbucks</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 07:00–22:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(2)">
<div class="cth" style="background:linear-gradient(135deg,#1e3a5f,#1D4ED8);height:240px">
<span class="cth-emoji" style="font-size:64px">🍽️</span>
<span class="cth-badge" style="background:#1D4ED8;font-size:11px;padding:4px 10px">Restoran</span>
<span class="cth-store" style="font-size:11px">Gurme Mutfak</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Gurme Mutfak</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 11:00–23:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(3)">
<div class="cth" style="background:linear-gradient(135deg,#92400E,#d97706);height:240px">
<span class="cth-emoji" style="font-size:64px">🥐</span>
<span class="cth-badge" style="background:#D97706;font-size:11px;padding:4px 10px">Pastane</span>
<span class="cth-store" style="font-size:11px">Simit Sarayı</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Simit Sarayı</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 08:00–21:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(4)">
<div class="cth" style="background:linear-gradient(135deg,#991B1B,#dc2626);height:240px">
<span class="cth-emoji" style="font-size:64px">🍔</span>
<span class="cth-badge" style="background:#DC2626;font-size:11px;padding:4px 10px">Fast Food</span>
<span class="cth-store" style="font-size:11px">Burger Lab</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Burger Lab</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 10:00–22:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(5)">
<div class="cth" style="background:linear-gradient(135deg,#7f1d1d,#ef4444);height:240px">
<span class="cth-emoji" style="font-size:64px">🍕</span>
<span class="cth-badge" style="background:#F97316;font-size:11px;padding:4px 10px">Restoran</span>
<span class="cth-store" style="font-size:11px">Pizza Mia</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Pizza Mia</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 11:00–22:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(6)">
<div class="cth" style="background:linear-gradient(135deg,#1e3a5f,#374151);height:240px">
<span class="cth-emoji" style="font-size:64px">🛒</span>
<span class="cth-badge" style="background:#374151;font-size:11px;padding:4px 10px">Market</span>
<span class="cth-store" style="font-size:11px">Migros</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Migros</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 09:00–22:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(7)">
<div class="cth" style="background:linear-gradient(135deg,#4c0519,#be185d);height:240px">
<span class="cth-emoji" style="font-size:64px">👗</span>
<span class="cth-badge" style="background:#be185d;font-size:11px;padding:4px 10px">Tekstil</span>
<span class="cth-store" style="font-size:11px">Defacto</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Defacto</div>
<div class="open-s" style="color:var(--grn)"><span class="opd"></span><span>Açık · 10:00–21:00</span></div>
</div>
</div>
<div class="sc" onclick="openStore(8)">
<div class="cth" style="background:linear-gradient(135deg,#4a044e,#a21caf);height:240px">
<span class="cth-emoji" style="font-size:64px">💄</span>
<span class="cth-badge" style="background:#a21caf;font-size:11px;padding:4px 10px">Güzellik</span>
<span class="cth-store" style="font-size:11px">Güzellik Merkezi</span>
</div>
<div class="sb2" style="padding:12px">
<div class="sn2" style="font-size:13.5px;font-weight:500;margin-bottom:4px">Güzellik Merkezi</div>
<div class="open-s" style="color:var(--t3)"><span class="clsd"></span><span>Kapalı · Kapalı · 10:00'da açılır</span></div>
</div>
</div>
</div>
</div>
<div class="pubf"><div class="nlg"><div class="nm">M</div><span style="font-size:12px;font-weight:500;color:rgba(255,255,255,.7)">Mars Kocaeli</span></div><span class="fcp">© 2026</span></div>
</div>
<!-- PAGE: GİRİŞ / ÜYE OL -->
<div id="pp-giris" class="pp">
<div class="auth-w">
<div class="auth-l">
<div style="display:flex;align-items:center;gap:9px;margin-bottom:26px"><div class="nm">M</div><span style="font-size:15px;font-weight:500;color:#fff">Mars Kocaeli</span></div>
<div style="font-size:22px;font-weight:500;color:#fff;line-height:1.2;margin-bottom:6px;letter-spacing:-.02em">Üye ol,<br>indirimleri<br>kaçırma.</div>
<div style="width:32px;height:1px;background:rgba(255,255,255,.18);margin:18px 0 22px"></div>
<div class="aperk"><div class="aico">📱</div><div><div class="aptr">QR ile anında indirim</div><div class="aps">Kampanya QR'ını göster, indirim anında uygulanır</div></div></div>
<div class="aperk"><div class="aico">🔔</div><div><div class="aptr">Push bildirimler</div><div class="aps">Yeni kampanyalardan ilk sen haberdar ol</div></div></div>
<div class="aperk"><div class="aico">🎧</div><div><div class="aptr">7/24 destek</div><div class="aps">Ticket aç, anlık takip et</div></div></div>
</div>
<div class="auth-r">
<div class="atabs">
<button class="atab on" onclick="swa('lg')">Giriş yap</button>
<button class="atab" onclick="swa('rg')">Üye ol</button>
</div>
<div id="alg">
<div class="fg"><label class="fl2">E-posta</label><input class="fi" type="email" placeholder="ornek@email.com"></div>
<div class="fg"><label class="fl2">Şifre</label><input class="fi" type="password" placeholder="••••••••"></div>
<div style="text-align:right;margin-bottom:16px;margin-top:-6px"><a style="font-size:11.5px;color:var(--t2);cursor:pointer;border-bottom:.5px solid var(--bd2)">Şifremi unuttum</a></div>
<button class="bsub">Giriş yap</button>
<div style="text-align:center;margin-top:14px;font-size:12px;color:var(--t3)">Hesabın yok mu? <a style="color:var(--t1);font-weight:500;cursor:pointer;border-bottom:.5px solid var(--d)" onclick="swa('rg')">Üye ol</a></div>
</div>
<div id="arg" style="display:none">
<div class="g2f">
<div class="fg"><label class="fl2">Ad</label><input class="fi" type="text" placeholder="Adınız"></div>
<div class="fg"><label class="fl2">Soyad</label><input class="fi" type="text" placeholder="Soyadınız"></div>
</div>
<div class="fg"><label class="fl2">E-posta</label><input class="fi" type="email" placeholder="ornek@email.com"></div>
<div class="fg"><label class="fl2">Telefon</label><input class="fi" type="tel" placeholder="05xx xxx xx xx"></div>
<div class="g2f">
<div class="fg"><label class="fl2">Doğum yılı</label><input class="fi" type="number" placeholder="1990" min="1940" max="2008"></div>
<div class="fg"><label class="fl2">Cinsiyet</label><select class="fi"><option value="">Seçiniz</option><option>Kadın</option><option>Erkek</option><option>Belirtmek istemiyorum</option></select></div>
</div>
<div class="fg"><label class="fl2">Şifre</label><input class="fi" type="password" placeholder="En az 8 karakter"></div>
<div style="margin-bottom:14px">
<label class="cbox-row"><input type="checkbox"><span class="cbox-label">Ticari elektronik ileti almayı kabul ediyorum (SMS, e-posta, push bildirim)</span></label>
<label class="cbox-row"><input type="checkbox" required><span class="cbox-label"><a href="#">KVKK Aydınlatma Metni</a>'ni okudum, kişisel verilerimin işlenmesine onay veriyorum.*</span></label>
<label class="cbox-row"><input type="checkbox" required><span class="cbox-label"><a href="#">Üyelik Sözleşmesi</a>'ni okudum ve kabul ediyorum.*</span></label>
</div>
<button class="bsub">Üye ol</button>
<div style="text-align:center;margin-top:14px;font-size:12px;color:var(--t3)">Zaten üye misin? <a style="color:var(--t1);font-weight:500;cursor:pointer;border-bottom:.5px solid var(--d)" onclick="swa('lg')">Giriş yap</a></div>
</div>
</div>
</div>
</div>
</div><!-- /pw -->
<!-- =================== MODALS =================== -->
<!-- OFFICE MODAL -->
<div class="mo" id="mo-office">
<div class="mb lg">
<div class="mh"><span class="mht" id="mo-office-title">Ofis Detayı</span><button class="mclose" onclick="cm('office')">✕</button></div>
<div class="mbody">
<div style="display:flex;gap:16px;margin-bottom:18px;flex-wrap:wrap">
<div id="mo-off-av" style="width:72px;height:72px;border-radius:10px;background:#EFF6FF;color:#1D4ED8;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;flex-shrink:0">DK</div>
<div style="flex:1;min-width:0">
<div id="mo-off-name" style="font-size:18px;font-weight:500;color:var(--t1);margin-bottom:3px">Dermatoloji Kliniği</div>
<div id="mo-off-cat" style="font-size:12px;color:var(--t2);margin-bottom:8px">Sağlık · Dermatoloji</div>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<span class="badge bb">📍 A1 Blok · 1.Kat · No:108</span>
<span class="badge bg">● Açık</span>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px">
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:12px">
<div style="font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">İletişim</div>
<div id="mo-off-phone" style="font-size:12.5px;color:var(--t1);margin-bottom:4px">📞 0262 331 02 08</div>
<div id="mo-off-email" style="font-size:12.5px;color:var(--t1);margin-bottom:4px">✉️ info@dermatoloji.com</div>
<div id="mo-off-web" style="font-size:12.5px;color:var(--blu);cursor:pointer">🌐 dermatoloji.com</div>
</div>
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:12px">
<div style="font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">Çalışma saatleri</div>
<div id="mo-off-hours" style="font-size:12px;color:var(--t2);line-height:1.8">Pzt–Cum: 09:00–18:00<br>Cmt: 09:00–14:00<br>Paz: Kapalı</div>
</div>
</div>
<div style="margin-bottom:16px">
<div style="font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Sosyal medya</div>
<div class="social-row">
<a class="soc-btn">📘 Facebook</a>
<a class="soc-btn">📸 Instagram</a>
<a class="soc-btn">🐦 Twitter</a>
<a class="soc-btn">💼 LinkedIn</a>
</div>
</div>
<div id="mo-off-actions" style="display:flex;gap:10px;flex-wrap:wrap">
<button class="btn bdk2" style="flex:1;justify-content:center" onclick="openApptModal()">📅 Randevu al</button>
<button class="btn bou" style="flex:1;justify-content:center" onclick="openMsgModal('office')">💬 Mesaj at</button>
</div>
<div style="margin-top:8px;text-align:center;font-size:10.5px;color:var(--t3)">Bu özellikler ofis sahibi tarafından yönetilmektedir</div>
</div>
</div>
</div>
<!-- CALENDAR MODAL (Randevu & Rezervasyon) -->
<div class="mo" id="mo-cal">
<div class="mb" style="max-width:500px">
<div class="mh">
<span class="mht" id="cal-title">Randevu Al</span>
<button class="mclose" onclick="cm('cal')">✕</button>
</div>
<div class="mbody">
<div class="cal-steps">
<div class="cst on" id="cst1">1 Gün seç</div>
<div class="cst-arr">›</div>
<div class="cst" id="cst2">2 Saat seç</div>
<div class="cst-arr">›</div>
<div class="cst" id="cst3">3 Bilgiler</div>
</div>
<!-- STEP 1: Calendar -->
<div id="cal-s1">
<div class="cal-nav">
<button class="cal-nav-btn" onclick="calPrev()">‹</button>
<span class="cal-nav-lbl" id="cal-nav-lbl">Haziran 2026</span>
<button class="cal-nav-btn" onclick="calNext()">›</button>
</div>
<div id="cal-grid"></div>
</div>
<!-- STEP 2: Time slots -->
<div id="cal-s2" style="display:none">
<div class="cal-day-banner">
<div><div class="cal-day-banner-t" id="cal-day-lbl">Pazartesi, 10 Haziran</div><div class="cal-day-banner-s" id="cal-type-lbl">Müsait saatler</div></div>
<button class="btn bou bsm" onclick="calGoStep(1)">‹ Değiştir</button>
</div>
<div class="cal-slots" id="cal-slots"></div>
<div style="font-size:10.5px;color:var(--t3);margin-top:4px"><span style="text-decoration:line-through">11:00</span> = Dolu</div>
</div>
<!-- STEP 3: Form -->
<div id="cal-s3" style="display:none">
<div class="cal-summary" id="cal-summary"></div>
<div class="g2f">
<div class="fg"><label class="fl2">Ad *</label><input class="fi" id="cal-ad" placeholder="Adınız"></div>
<div class="fg"><label class="fl2">Soyad *</label><input class="fi" id="cal-soyad" placeholder="Soyadınız"></div>
</div>
<div class="fg"><label class="fl2">Telefon *</label><input class="fi" id="cal-tel" type="tel" placeholder="05xx xxx xx xx"></div>
<div class="fg"><label class="fl2">Not (isteğe bağlı)</label><textarea class="fi" id="cal-not" rows="2" placeholder="Özel istek veya not..."></textarea></div>
<div style="display:flex;gap:8px;margin-top:4px">
<button class="btn bou" style="flex:1;justify-content:center" onclick="calGoStep(2)">‹ Geri</button>
<button class="bsub" style="flex:2" onclick="calSubmit()">Onayla →</button>
</div>
</div>
<!-- STEP 4: Success -->
<div id="cal-s4" style="display:none">
<div class="cal-success">
<div style="font-size:48px;margin-bottom:14px">✅</div>
<div style="font-size:17px;font-weight:500;color:var(--t1);margin-bottom:6px" id="cal-ok-title">Talebiniz alındı!</div>
<div class="cal-summary" id="cal-ok-summary" style="text-align:left;margin:14px 0"></div>
<div style="font-size:12px;color:var(--t3);margin-bottom:18px">Onay SMS'i kısa süre içinde gönderilecek.</div>
<button class="btn bdk2" style="width:100%;justify-content:center" onclick="cm('cal')">Tamam</button>
</div>
</div>
</div>
</div>
</div>
<!-- STORE MODAL -->
<div class="mo" id="mo-store">
<div class="mb lg">
<div class="mh"><span class="mht" id="mo-store-title">Mağaza Detayı</span><button class="mclose" onclick="cm('store')">✕</button></div>
<div class="mbody">
<div style="display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap">
<div id="ms-ico" style="width:64px;height:64px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0">☕</div>
<div style="flex:1">
<div id="ms-name" style="font-size:18px;font-weight:500;margin-bottom:3px">Starbucks</div>
<div id="ms-cat" style="font-size:12px;color:var(--t2);margin-bottom:6px">Kafe · A2 Blok</div>
<div class="open-s" style="margin-bottom:6px"><span class="opd"></span><span id="ms-hours">Açık · 07:00–22:00</span></div>
<div style="font-size:11.5px;color:var(--t3)">📞 0262 331 05 01</div>
</div>
</div>
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap">
<button class="btn bdk2" style="flex:1;justify-content:center" onclick="openResModal()">🍽️ Rezervasyon yap</button>
<button class="btn bou" style="flex:1;justify-content:center" onclick="openMsgModal('store')">💬 Mesaj at</button>
</div>
<div id="ms-camps" style="margin-bottom:4px">
<div style="font-size:11px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Bu mağazaya ait kampanyalar</div>
<div class="cc" style="margin-bottom:6px" onclick="openCamp('flash',1)"><div class="cb" style="display:flex;align-items:center;gap:10px"><div style="font-size:22px">☕</div><div><div class="cbg" style="background:var(--red)">Flash · %25</div><div class="cn">Sıcak içecekler</div><div class="csub">⏰ 2s 14dk kaldı</div></div></div></div>
</div>
<div style="margin-top:8px;text-align:center;font-size:10.5px;color:var(--t3)">Rezervasyon ve mesaj özellikleri admin tarafından kontrol edilir</div>
</div>
</div>
</div>
<!-- MESSAGE MODAL -->
<div class="mo" id="mo-msg">
<div class="mb">
<div class="mh"><span class="mht" id="mo-msg-title">Mesaj gönder</span><button class="mclose" onclick="cm('msg')">✕</button></div>
<div class="mbody">
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:10px;margin-bottom:14px;font-size:12px;color:var(--t3)">Mesajınız mağaza sahibine iletilecek. Yanıtı üye panelinizde görebilirsiniz.</div>
<div class="fg"><label class="fl2">Konu</label><input class="fi" placeholder="Mesajınızın konusu..."></div>
<div class="fg"><label class="fl2">Mesaj</label><textarea class="fi" rows="4" placeholder="Mesajınızı yazın..."></textarea></div>
<button class="bsub" onclick="alert('Mesajınız iletildi!');cm('msg')">Gönder</button>
</div>
</div>
</div>
<!-- CAMPAIGN / QR MODAL -->
<div class="mo" id="mo-qr">
<div class="mb">
<div class="mh"><span class="mht">Kampanya kuponunuz</span><button class="mclose" onclick="cm('qr')">✕</button></div>
<div class="mbody">
<div style="text-align:center;padding:10px 0 20px">
<div id="qr-title" style="font-size:16px;font-weight:500;color:var(--t1);margin-bottom:3px">Kahve Dünyası — %25 İndirim</div>
<div id="qr-sub" style="font-size:12px;color:var(--t3);margin-bottom:20px">Kasada gösterin veya kodu girin</div>
<div class="qr-box">
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" style="display:block">
<rect width="160" height="160" fill="white"/>
<!-- Corner TL -->
<rect x="10" y="10" width="42" height="42" rx="4" fill="none" stroke="#111" stroke-width="3"/>
<rect x="18" y="18" width="26" height="26" rx="2" fill="#111"/>
<!-- Corner TR -->
<rect x="108" y="10" width="42" height="42" rx="4" fill="none" stroke="#111" stroke-width="3"/>
<rect x="116" y="18" width="26" height="26" rx="2" fill="#111"/>
<!-- Corner BL -->
<rect x="10" y="108" width="42" height="42" rx="4" fill="none" stroke="#111" stroke-width="3"/>
<rect x="18" y="116" width="26" height="26" rx="2" fill="#111"/>
<!-- Data modules -->
<rect x="60" y="10" width="7" height="7" fill="#111"/><rect x="70" y="10" width="7" height="7" fill="#111"/>
<rect x="60" y="20" width="7" height="7" fill="#111"/><rect x="80" y="20" width="7" height="7" fill="#111"/>
<rect x="70" y="30" width="7" height="7" fill="#111"/><rect x="90" y="30" width="7" height="7" fill="#111"/>
<rect x="60" y="40" width="7" height="7" fill="#111"/><rect x="80" y="40" width="7" height="7" fill="#111"/>
<rect x="10" y="60" width="7" height="7" fill="#111"/><rect x="20" y="60" width="7" height="7" fill="#111"/>
<rect x="40" y="60" width="7" height="7" fill="#111"/><rect x="60" y="60" width="7" height="7" fill="#111"/>
<rect x="80" y="60" width="7" height="7" fill="#111"/><rect x="100" y="60" width="7" height="7" fill="#111"/>
<rect x="120" y="60" width="7" height="7" fill="#111"/><rect x="140" y="60" width="7" height="7" fill="#111"/>
<rect x="10" y="70" width="7" height="7" fill="#111"/><rect x="30" y="70" width="7" height="7" fill="#111"/>
<rect x="50" y="70" width="7" height="7" fill="#111"/><rect x="70" y="70" width="7" height="7" fill="#111"/>
<rect x="90" y="70" width="7" height="7" fill="#111"/><rect x="110" y="70" width="7" height="7" fill="#111"/>
<rect x="130" y="70" width="7" height="7" fill="#111"/>
<rect x="20" y="80" width="7" height="7" fill="#111"/><rect x="40" y="80" width="7" height="7" fill="#111"/>
<rect x="60" y="80" width="7" height="7" fill="#111"/><rect x="80" y="80" width="7" height="7" fill="#111"/>
<rect x="100" y="80" width="7" height="7" fill="#111"/><rect x="120" y="80" width="7" height="7" fill="#111"/>
<rect x="10" y="90" width="7" height="7" fill="#111"/><rect x="30" y="90" width="7" height="7" fill="#111"/>
<rect x="70" y="90" width="7" height="7" fill="#111"/><rect x="90" y="90" width="7" height="7" fill="#111"/>
<rect x="110" y="90" width="7" height="7" fill="#111"/><rect x="140" y="90" width="7" height="7" fill="#111"/>
<rect x="60" y="108" width="7" height="7" fill="#111"/><rect x="80" y="108" width="7" height="7" fill="#111"/>
<rect x="100" y="108" width="7" height="7" fill="#111"/><rect x="120" y="108" width="7" height="7" fill="#111"/>
<rect x="140" y="108" width="7" height="7" fill="#111"/>
<rect x="60" y="118" width="7" height="7" fill="#111"/><rect x="70" y="118" width="7" height="7" fill="#111"/>
<rect x="100" y="118" width="7" height="7" fill="#111"/><rect x="130" y="118" width="7" height="7" fill="#111"/>
<rect x="60" y="128" width="7" height="7" fill="#111"/><rect x="80" y="128" width="7" height="7" fill="#111"/>
<rect x="90" y="128" width="7" height="7" fill="#111"/><rect x="110" y="128" width="7" height="7" fill="#111"/>
<rect x="60" y="138" width="7" height="7" fill="#111"/><rect x="100" y="138" width="7" height="7" fill="#111"/>
<rect x="120" y="138" width="7" height="7" fill="#111"/><rect x="140" y="138" width="7" height="7" fill="#111"/>
</svg>
</div>
<div id="qr-code" style="font-size:22px;font-weight:600;letter-spacing:.15em;color:var(--t1);margin:14px 0 6px">MRS-K8X4-2026</div>
<div style="font-size:11px;color:var(--t3);margin-bottom:6px">Tek kullanımlık · Kasada gösterin</div>
<div id="qr-timer" style="display:inline-flex;align-items:center;gap:6px;background:var(--ylw-bg);border:.5px solid var(--ylw-bd);color:var(--ylw);font-size:12px;font-weight:500;padding:4px 12px;border-radius:4px">⏰ <span id="qr-countdown">02:14:08</span> kaldı</div>
</div>
</div>
</div>
</div>
<!-- LOGIN PROMPT MODAL -->
<div class="mo" id="mo-login">
<div class="mb">
<div class="mh"><span class="mht">Giriş gerekli</span><button class="mclose" onclick="cm('login')">✕</button></div>
<div class="mbody" style="text-align:center;padding:26px 20px">
<div style="font-size:36px;margin-bottom:12px">🔒</div>
<div style="font-size:16px;font-weight:500;color:var(--t1);margin-bottom:8px">Bu kampanyayı kullanmak için üye olun</div>
<div style="font-size:12.5px;color:var(--t3);margin-bottom:22px;line-height:1.6">Ücretsiz üye olun, QR kupon alın,<br>anında indirimi kullanın.</div>
<div style="display:flex;gap:10px">
<button class="btn bou" style="flex:1;justify-content:center" onclick="cm('login');sp('giris')">Giriş yap</button>
<button class="btn bdk2" style="flex:1;justify-content:center" onclick="cm('login');sp('giris')">Üye ol →</button>
</div>
</div>
</div>
</div>
<!-- ADMIN: EDIT OFFICE MODAL -->
<div class="mo" id="mo-edit-office">
<div class="mb lg" style="max-width:580px">
<div class="mh"><span class="mht" id="mo-eoff-title">Ofis Ekle</span><button class="mclose" onclick="cm('edit-office')">✕</button></div>
<div class="mbody">
<!-- Logo + main info -->
<div style="display:flex;gap:14px;align-items:flex-start;margin-bottom:16px">
<div class="upz2" style="width:80px;height:80px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0" onclick="alert('Logo seçici açıldı')">
<div style="font-size:26px">🏢</div>
<div style="font-size:9px;color:var(--t3)">Logo ekle</div>
</div>
<div style="flex:1">
<div class="fg" style="margin-bottom:8px"><label class="fl2">Firma adı *</label><input class="fi" id="eoff-name" placeholder="Firma adı"></div>
<div class="fg" style="margin:0"><label class="fl2">Yetkili kişi</label><input class="fi" placeholder="Ad Soyad"></div>
</div>
</div>
<div class="fg"><label class="fl2">Hakkımızda / Tanıtım</label><textarea class="fi" rows="2" placeholder="Firma veya ofis hakkında kısa tanıtım metni..."></textarea></div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:13px">
<div class="fg" style="margin:0"><label class="fl2">Blok *</label><select class="fi"><option>A1</option><option>A2</option></select></div>
<div class="fg" style="margin:0"><label class="fl2">Kat *</label><select class="fi"><option>1. Kat</option><option>2. Kat</option><option>3. Kat</option><option>4. Kat</option></select></div>
<div class="fg" style="margin:0"><label class="fl2">Ofis No *</label><input class="fi" placeholder="104"></div>
</div>
<div class="fg"><label class="fl2">Kategori</label><select class="fi"><option>Sağlık</option><option>Hukuk</option><option>Teknoloji</option><option>Finans</option><option>Mimarlık</option><option>Eğitim</option><option>Diğer</option></select></div>
<div class="g2f">
<div class="fg"><label class="fl2">Telefon</label><input class="fi" type="tel" placeholder="0262 xxx xx xx"></div>
<div class="fg"><label class="fl2">E-posta</label><input class="fi" type="email" placeholder="ofis@email.com"></div>
</div>
<div class="fg"><label class="fl2">Web sitesi</label><input class="fi" placeholder="www.firma.com"></div>
<div class="fg"><label class="fl2">Çalışma saatleri</label><input class="fi" placeholder="Pzt–Cum: 09:00–18:00"></div>
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:7px;padding:13px;margin-bottom:16px">
<div style="font-size:12px;font-weight:500;color:var(--t1);margin-bottom:11px">Özellikler</div>
<div style="display:flex;flex-direction:column;gap:10px">
<div class="tog-w"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Randevu al butonu</div><div class="tog-sub">Üyeler ofisten randevu alabilir</div></div></div>
<div class="tog-w"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Mesaj at butonu</div><div class="tog-sub">Üyeler ofise doğrudan mesaj gönderebilir</div></div></div>
</div>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('edit-office')">İptal</button>
<button class="btn bdk2" onclick="cm('edit-office');alert('Ofis kaydedildi!')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- ADMIN: EDIT STORE MODAL -->
<div class="mo" id="mo-edit-store">
<div class="mb lg" style="max-width:640px">
<div class="mh"><span class="mht" id="mo-estore-title">Mağaza Ekle</span><button class="mclose" onclick="cm('edit-store')">✕</button></div>
<div class="mbody">
<!-- Logo upload -->
<div style="display:flex;gap:14px;align-items:flex-start;margin-bottom:16px">
<div class="upz2" style="width:90px;height:90px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0" onclick="alert('Logo seçici açıldı')">
<div style="font-size:28px">🏪</div>
<div style="font-size:9.5px;color:var(--t3)">Logo ekle</div>
</div>
<div style="flex:1">
<div class="fg" style="margin-bottom:8px"><label class="fl2">Mağaza adı *</label><input class="fi" placeholder="Mağaza adı"></div>
<div class="g2f">
<div class="fg" style="margin:0"><label class="fl2">Tür *</label><select class="fi"><option>Kafe</option><option>Restoran</option><option>Fast Food</option><option>Market</option><option>Tekstil</option><option>Güzellik</option><option>Pastane</option><option>Diğer</option></select></div>
<div class="fg" style="margin:0"><label class="fl2">Blok / Konum *</label><select class="fi"><option>A1 Blok</option><option>A2 Blok</option><option>Cadde</option></select></div>
</div>
</div>
</div>
<div class="fg"><label class="fl2">Hakkımızda</label><textarea class="fi" rows="2" placeholder="Mağaza hakkında kısa tanıtım metni..."></textarea></div>
<div class="g2f">
<div class="fg"><label class="fl2">Telefon</label><input class="fi" type="tel" placeholder="0262 xxx xx xx"></div>
<div class="fg"><label class="fl2">E-posta</label><input class="fi" type="email" placeholder="magaza@email.com"></div>
</div>
<div class="fg"><label class="fl2">Web sitesi</label><input class="fi" placeholder="www.magazaadi.com"></div>
<!-- Social media -->
<div style="margin-bottom:13px">
<div class="fl2" style="margin-bottom:8px">Sosyal medya</div>
<div class="social-inputs">
<div class="si-row"><span class="si-ico">📸</span><input class="fi" placeholder="Instagram (@)"></div>
<div class="si-row"><span class="si-ico">📘</span><input class="fi" placeholder="Facebook URL"></div>
<div class="si-row"><span class="si-ico">▶️</span><input class="fi" placeholder="YouTube @kanal"></div>
<div class="si-row"><span class="si-ico">🎵</span><input class="fi" placeholder="TikTok @kanal"></div>
</div>
</div>
<!-- Working hours -->
<div class="fg">
<label class="fl2">Çalışma saatleri</label>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
<input class="fi" placeholder="Hafta içi: 09:00–22:00">
<input class="fi" placeholder="Hafta sonu: 10:00–22:00">
</div>
</div>
<div class="fg"><label class="fl2">Açıklama / Not</label><textarea class="fi" rows="2" placeholder="Yönetim notları, özel bilgiler..."></textarea></div>
<!-- Features -->
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:7px;padding:13px;margin-bottom:13px">
<div style="font-size:12px;font-weight:500;color:var(--t1);margin-bottom:11px">Özellikler</div>
<div style="display:flex;flex-direction:column;gap:10px">
<div class="tog-w"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Rezervasyon yap butonu</div><div class="tog-sub">Üyeler masa rezervasyonu yapabilir</div></div></div>
<div class="tog-w"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Mesaj at butonu</div><div class="tog-sub">Üyeler mağazaya doğrudan mesaj gönderebilir</div></div></div>
<div class="tog-w"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Kampanya QR okuma</div><div class="tog-sub">Mağaza panelinde QR kod okuyabilir</div></div></div>
</div>
</div>
<!-- Store owner assignment -->
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:7px;padding:13px;margin-bottom:16px">
<div style="font-size:12px;font-weight:500;color:var(--t1);margin-bottom:4px">Mağaza sahibi atama</div>
<div style="font-size:11px;color:var(--t3);margin-bottom:10px">Mağaza sahibi rolündeki üyelerden birini veya birkaçını bu mağazaya atayın</div>
<select class="fi" multiple style="height:88px;resize:none">
<option>Mehmet Ayhan (Burger Lab)</option>
<option>Selin Börek (Güzellik Merkezi)</option>
<option>Ahmet Çelik (Starbucks)</option>
<option>Fatma Kılıç (Pizza Mia)</option>
<option>Kerem Demir (Migros)</option>
</select>
<div style="font-size:10.5px;color:var(--t3);margin-top:5px">Ctrl/Cmd ile birden fazla seçebilirsiniz</div>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('edit-store')">İptal</button>
<button class="btn bdk2" onclick="cm('edit-store');alert('Mağaza kaydedildi!')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- ADMIN: TASK DETAIL MODAL -->
<div class="mo" id="mo-task">
<div class="mb lg">
<div class="mh"><span class="mht">Görev Detayı</span><button class="mclose" onclick="cm('task')">✕</button></div>
<div class="mbody">
<div style="display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap">
<span class="badge bb">İşlemde</span>
<span class="badge by">⚡ Öncelikli</span>
<span class="badge bgr">Ticket #1042</span>
<span style="font-size:11px;color:var(--t3);margin-left:auto">14 Haz 2026 · 14:00</span>
</div>
<div style="font-size:16px;font-weight:500;color:var(--t1);margin-bottom:6px">A1 Blok Ofis 104 — Klima Değişimi</div>
<div style="font-size:12.5px;color:var(--t2);margin-bottom:16px">A1 Blok 1. Kattaki 104 nolu ofisteki klima çalışmıyor. Filtre değişimi ve bakım yapılacak.</div>
<div class="prog-lbl"><span>İlerleme</span><span id="prog-pct">65%</span></div>
<div class="prog-track"><div class="prog-fill" id="prog-fill" style="width:65%"></div></div>
<input type="range" min="0" max="100" value="65" style="width:100%;margin:6px 0 16px;cursor:pointer" oninput="document.getElementById('prog-pct').textContent=this.value+'%';document.getElementById('prog-fill').style.width=this.value+'%'">
<div style="margin-bottom:16px">
<div style="font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:10px">Atanan personel</div>
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
<div style="display:flex;align-items:center;gap:6px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;padding:5px 10px">
<div class="pav" style="width:22px;height:22px;background:#EFF6FF;color:#1D4ED8;font-size:9px">HK</div>
<span style="font-size:12px">Hasan Koç</span><span class="badge bb bsm">Ana</span>
</div>
<div style="display:flex;align-items:center;gap:6px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px;padding:5px 10px">
<div class="pav" style="width:22px;height:22px;background:#F0FDF4;color:#166534;font-size:9px">OD</div>
<span style="font-size:12px">Osman Demir</span>
</div>
<button class="btn bou bsm">+ Kişi ekle</button>
</div>
</div>
<div style="margin-bottom:16px">
<div style="font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:8px">Alt görevler (katmanlı)</div>
<div class="task-node">
<div class="task-node-h" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">
<button class="task-expand">▾</button>
<span style="flex:1;font-size:12.5px;font-weight:500;color:var(--t1)">Eski klimayı söküm</span>
<span class="badge bg">Tamamlandı</span>
</div>
<div class="task-children">
<div class="task-sub"><input type="checkbox" checked><span style="flex:1;color:var(--t3);text-decoration:line-through">Elektriği kes ve klima bağlantılarını ayır</span></div>
<div class="task-sub"><input type="checkbox" checked><span style="flex:1;color:var(--t3);text-decoration:line-through">Eski klimayı indir ve ambalajla</span></div>
</div>
</div>
<div class="task-node">
<div class="task-node-h" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">
<button class="task-expand">▾</button>
<span style="flex:1;font-size:12.5px;font-weight:500;color:var(--t1)">Yeni klima montajı</span>
<span class="badge by">Devam ediyor</span>
</div>
<div class="task-children">
<div class="task-sub"><input type="checkbox" checked><span style="flex:1;color:var(--t3);text-decoration:line-through">Montaj braketini tak</span></div>
<div class="task-sub"><input type="checkbox"><span style="flex:1">Klima ünitesini bağla ve sabitle</span></div>
<div class="task-sub"><input type="checkbox"><span style="flex:1">Gaz dolumu ve test çalışması</span></div>
</div>
</div>
<button class="btn bou" style="width:100%;justify-content:center;margin-top:6px" onclick="alert('Alt görev eklendi!')">+ Alt görev ekle</button>
</div>
<div style="margin-bottom:16px">
<div style="font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:8px">Malzeme listesi</div>
<div style="border:.5px solid var(--bd);border-radius:6px;overflow:hidden">
<div class="mat-item" style="padding:8px 12px"><span class="mat-name">Klima filtre seti</span><span class="mat-qty">2 adet</span><span class="badge bg" style="margin-left:8px">Temin edildi</span></div>
<div class="mat-item" style="padding:8px 12px"><span class="mat-name">Bakır boru (3 metre)</span><span class="mat-qty">1 rulo</span><span class="badge bg">Temin edildi</span></div>
<div class="mat-item" style="padding:8px 12px;border-bottom:none"><span class="mat-name">R32 soğutucu gaz</span><span class="mat-qty">500 gr</span><span class="badge by" style="margin-left:8px">Bekliyor</span></div>
</div>
<button class="btn bou" style="margin-top:6px" onclick="alert('Malzeme eklendi!')">+ Malzeme ekle</button>
</div>
<div style="margin-bottom:16px">
<div style="font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:8px">Görev fotoğrafları</div>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<div style="width:80px;height:80px;border-radius:6px;background:#f0f0f0;border:.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:24px">📷</div>
<div style="width:80px;height:80px;border-radius:6px;background:#f0f0f0;border:.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:24px">📷</div>
<div class="upz" style="width:80px;height:80px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px" onclick="alert('Fotoğraf seçici açıldı!')"><div style="font-size:20px">+</div><div style="font-size:9px;color:var(--t3)">Fotoğraf</div></div>
</div>
</div>
<div style="font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:8px">Personel notu</div>
<textarea class="fi" rows="3" placeholder="Görev hakkında not ekleyin..." style="margin-bottom:12px"></textarea>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('task')">Kapat</button>
<button class="btn bdk2" onclick="alert('Görev güncellendi!');cm('task')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- ADD MEMBER MODAL -->
<div class="mo" id="mo-add-member">
<div class="mb">
<div class="mh"><span class="mht">Personel Ekle</span><button class="mclose" onclick="cm('add-member')">✕</button></div>
<div class="mbody">
<div class="g2f">
<div class="fg"><label class="fl2">Ad</label><input class="fi" placeholder="Ad"></div>
<div class="fg"><label class="fl2">Soyad</label><input class="fi" placeholder="Soyad"></div>
</div>
<div class="fg"><label class="fl2">Telefon</label><input class="fi" type="tel" placeholder="05xx xxx xx xx"></div>
<div class="fg"><label class="fl2">E-posta</label><input class="fi" type="email" placeholder="personel@mars.com"></div>
<div class="fg"><label class="fl2">Rol</label><select class="fi"><option>Teknik Personel</option><option>Yönetici</option><option>Mağaza Sahibi</option></select></div>
<div class="fg"><label class="fl2">Departman</label><select class="fi"><option>Elektrik</option><option>Mekanik</option><option>Temizlik</option><option>Yönetim</option></select></div>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('add-member')">İptal</button>
<button class="btn bdk2" onclick="alert('Personel eklendi!');cm('add-member')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- ====== ADMIN ====== -->
<div id="aw">
<nav class="sb">
<div class="sb-top"><div class="sblg"><div class="sblm">M</div><div><div class="sblt">Mars</div><div class="sbls">Admin Paneli</div></div></div></div>
<div class="sb-nav">
<div class="sbsec">Genel</div>
<button class="sbi on" id="sb-dash" onclick="sa('dash')"><span class="sbic">🏠</span>Dashboard</button>
<button class="sbi" id="sb-bildirim" onclick="sa('bildirim')"><span class="sbic">🔔</span>Bildirimler<span class="sbbg">3</span></button>
<div class="sbsec">Bina</div>
<button class="sbi" id="sb-ofisadm" onclick="sa('ofisadm')"><span class="sbic">🏢</span>Ofis Rehberi</button>
<button class="sbi" id="sb-caddeadm" onclick="sa('caddeadm')"><span class="sbic">☕</span>Cadde</button>
<div class="sbsec">Operasyon</div>
<button class="sbi" id="sb-tickets" onclick="sa('tickets')"><span class="sbic">🎫</span>Ticket'lar<span class="sbbg">4</span></button>
<button class="sbi" id="sb-gorev" onclick="sa('gorev')"><span class="sbic">✅</span>Görevler</button>
<button class="sbi" id="sb-personel" onclick="sa('personel')"><span class="sbic">👥</span>Personel</button>
<button class="sbi" id="sb-chat" onclick="sa('chat')"><span class="sbic">💬</span>Personel Chat</button>
<div class="sbsec">Üyelik</div>
<button class="sbi" id="sb-uyeler" onclick="sa('uyeler')"><span class="sbic">🪪</span>Üyeler</button>
<div class="sbsec">Kampanya</div>
<button class="sbi" id="sb-kamps" onclick="sa('kamps')"><span class="sbic">🏷️</span>Kampanyalar</button>
<button class="sbi" id="sb-kupon" onclick="sa('kupon')"><span class="sbic">📱</span>Kuponlar</button>
<button class="sbi" id="sb-rapor" onclick="sa('rapor')"><span class="sbic">📊</span>Raporlar</button>
<div class="sbsec">Sistem</div>
<button class="sbi" id="sb-mesaj" onclick="sa('mesaj')"><span class="sbic">📢</span>Toplu Mesaj</button>
<button class="sbi" id="sb-ayar" onclick="sa('ayar')"><span class="sbic">⚙️</span>Ayarlar</button>
</div>
<div class="sb-user"><div class="sbuav">A</div><div><div class="sbun">Admin</div><div class="sbur">Süper yönetici</div></div></div>
</nav>
<div class="am">
<div class="ap on" id="ap-dash">
<div class="adh"><div><div class="aht">Genel bakış</div><div class="ahs">Mars Kocaeli · 10 Haziran 2026</div></div><div class="aha"><button class="btn bou">📅 Bu hafta</button></div></div>
<div class="adb">
<div class="kg"><div class="kc"><div class="kt"><div class="ki">👥</div><span class="ktr" style="color:var(--grn)">↑ +12</span></div><div class="kn">1.284</div><div class="kl">Toplam üye</div></div>
<div class="kc"><div class="kt"><div class="ki">🎫</div><span class="ktr" style="color:var(--red)">4 açık</span></div><div class="kn">4</div><div class="kl">Bekleyen ticket</div></div>
<div class="kc"><div class="kt"><div class="ki">📱</div><span class="ktr" style="color:var(--grn)">↑ +34</span></div><div class="kn">247</div><div class="kl">Kupon kullanımı</div></div>
<div class="kc"><div class="kt"><div class="ki">🏷️</div><span class="ktr" style="color:var(--grn)">8 aktif</span></div><div class="kn">8</div><div class="kl">Aktif kampanya</div></div></div>
<div class="g2" style="margin-bottom:10px">
<div class="wg"><div class="wgh"><span class="wgt">Açık ticket'lar</span><button class="wgl" onclick="sa('tickets')">Tümü</button></div>
<div class="tr-row" onclick="sa('tickets')"><div class="tri">⚡</div><div style="flex:1;min-width:0"><div class="trt">Ofis kliması çalışmıyor</div><div class="trm">A Blok · 104</div></div><span class="badge bb">İşlemde</span><span class="trd">09:15</span></div>
<div class="tr-row" onclick="sa('tickets')"><div class="tri">🔧</div><div style="flex:1;min-width:0"><div class="trt">B Blok asansör arızası</div><div class="trm">B Blok</div></div><span class="badge bb">İşlemde</span><span class="trd">08:30</span></div>
<div class="tr-row" onclick="sa('tickets')"><div class="tri">📶</div><div style="flex:1;min-width:0"><div class="trt">İnternet kesiliyor</div><div class="trm">B Blok · 215</div></div><span class="badge by">Yeni</span><span class="trd">Dün</span></div>
<div class="tr-row" onclick="sa('tickets')"><div class="tri">🔒</div><div style="flex:1;min-width:0"><div class="trt">Kapı kilidi bozuk</div><div class="trm">Cadde · Burger Lab</div></div><span class="badge by">Yeni</span><span class="trd">Dün</span></div></div>
<div class="wg"><div class="wgh"><span class="wgt">Teknik personel</span><button class="wgl" onclick="sa('personel')">Tümü</button></div>
<div class="pr-row"><div class="pav" style="background:#EFF6FF;color:#1D4ED8">KU</div><div class="pn">Kemal Usta</div><div class="ptk">Pano kontrolü</div><span class="pdp" style="background:#EFF6FF;color:#1D4ED8;border:.5px solid #BFDBFE">Elektrik</span><div class="sdot" style="background:var(--grn)"></div></div>
<div class="pr-row"><div class="pav" style="background:#F0FDF4;color:#166534">HK</div><div class="pn">Hasan Koç</div><div class="ptk">Klima değişimi</div><span class="pdp" style="background:#F0FDF4;color:#166534;border:.5px solid #BBF7D0">Mekanik</span><div class="sdot" style="background:var(--grn)"></div></div>
<div class="pr-row"><div class="pav" style="background:#FEF3C7;color:#92400E">SA</div><div class="pn">Serkan Arslan</div><div class="ptk">Mola</div><span class="pdp" style="background:#EFF6FF;color:#1D4ED8;border:.5px solid #BFDBFE">Elektrik</span><div class="sdot" style="background:var(--ylw)"></div></div>
<div class="pr-row"><div class="pav" style="background:#F0FDF4;color:#166534">OD</div><div class="pn">Osman Demir</div><div class="ptk">Asansör bakımı</div><span class="pdp" style="background:#F0FDF4;color:#166534;border:.5px solid #BBF7D0">Mekanik</span><div class="sdot" style="background:var(--grn)"></div></div></div>
</div>
<div class="g2"><div class="wg"><div class="wgh"><span class="wgt">Kampanya kullanımı — bu hafta</span></div>
<div class="bch">
<div class="br2"><span class="blbl">Pzt</span><div class="btrk"><div class="bfil" style="width:62%"></div></div><span class="bvl">38</span></div>
<div class="br2"><span class="blbl">Sal</span><div class="btrk"><div class="bfil" style="width:47%"></div></div><span class="bvl">29</span></div>
<div class="br2"><span class="blbl">Çar</span><div class="btrk"><div class="bfil" style="width:77%"></div></div><span class="bvl">47</span></div>
<div class="br2"><span class="blbl">Per</span><div class="btrk"><div class="bfil" style="width:57%"></div></div><span class="bvl">35</span></div>
<div class="br2"><span class="blbl">Cum</span><div class="btrk"><div class="bfil" style="width:100%"></div></div><span class="bvl">61</span></div>
<div class="br2"><span class="blbl">Cmt</span><div class="btrk"><div class="bfil" style="width:82%"></div></div><span class="bvl">50</span></div>
</div></div>
<div class="wg"><div class="wgh"><span class="wgt">Hızlı işlemler</span></div><div class="qag">
<div class="qai" onclick="sa('mesaj')"><div class="qaico">📢</div><div><div class="qat">Toplu bildirim</div><div class="qas">Hedef kitle seç</div></div></div>
<div class="qai" onclick="sa('gorev')"><div class="qaico">✅</div><div><div class="qat">Görev ata</div><div class="qas">Tüm departmanlar</div></div></div>
<div class="qai" onclick="sa('kamps')"><div class="qaico">🏷️</div><div><div class="qat">Yeni kampanya</div><div class="qas">QR kupon oluştur</div></div></div>
<div class="qai" onclick="sa('rapor')"><div class="qaico">📊</div><div><div class="qat">Haftalık rapor</div><div class="qas">Kampanya & üye</div></div></div>
</div></div></div>
</div></div>
<div class="ap" id="ap-ofisadm">
<div class="adh"><div><div class="aht">Ofis Rehberi Yönetimi</div><div class="ahs">256 ofis · A1 & A2 Blok</div></div>
<div class="aha"><button class="btn bou" onclick="om('edit-office')">+ Ofis Ekle</button></div></div>
<div class="tbl-toolbar">
<div class="tbl-search"><span>🔍</span><input type="text" placeholder="Firma, yetkili veya sektör ara..." oninput="filterTbl('ofis-tbody',this.value)"></div>
<button class="ftag-sm on" onclick="filterTblTag(this,'ofis-tbody','')">Tümü</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','a1 blok')">A1 Blok</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','a2 blok')">A2 Blok</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','1. kat')">1. Kat</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','2. kat')">2. Kat</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','sağlık')">Sağlık</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','hukuk')">Hukuk</button>
<button class="ftag-sm" onclick="filterTblTag(this,'ofis-tbody','teknoloji')">Teknoloji</button>
</div>
<div class="adb"><div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th></th><th>Firma</th><th>Blok</th><th>Kat</th><th>No</th><th>Kategori</th><th>Yetkili</th>
<th style="text-align:center;min-width:72px">Randevu Al</th>
<th style="text-align:center;min-width:72px">Mesaj At</th>
<th></th></tr></thead>
<tbody id="ofis-tbody">
<tr data-s="dermatoloji kliniği dr. fatma demir sağlık a1 a1 blok 1. kat 108"><td><div class="oav" style="width:28px;height:28px;background:#EFF6FF;color:#1D4ED8;border-radius:4px;font-size:10px">DK</div></td><td><div style="font-size:12.5px;font-weight:500">Dermatoloji Kliniği</div></td><td><span class="badge bgr">A1</span></td><td style="color:var(--t2)">1. Kat</td><td style="color:var(--t2);font-weight:500">108</td><td><span class="cp">Sağlık</span></td><td style="color:var(--t2);font-size:11.5px">Dr. Fatma Demir</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="ahmet hukuk bürosu ahmet demir hukuk a1 a1 blok 1. kat 104"><td><div class="oav" style="width:28px;height:28px;background:#FEF3C7;color:#92400E;border-radius:4px;font-size:10px">AH</div></td><td><div style="font-size:12.5px;font-weight:500">Ahmet Hukuk Bürosu</div></td><td><span class="badge bgr">A1</span></td><td style="color:var(--t2)">1. Kat</td><td style="color:var(--t2);font-weight:500">104</td><td><span class="cp">Hukuk</span></td><td style="color:var(--t2);font-size:11.5px">Ahmet Demir</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="mars teknoloji kemal öztürk teknoloji a1 a1 blok 1. kat 112"><td><div class="oav" style="width:28px;height:28px;background:#F0FDF4;color:#166534;border-radius:4px;font-size:10px">MT</div></td><td><div style="font-size:12.5px;font-weight:500">Mars Teknoloji</div></td><td><span class="badge bgr">A1</span></td><td style="color:var(--t2)">1. Kat</td><td style="color:var(--t2);font-weight:500">112</td><td><span class="cp">Teknoloji</span></td><td style="color:var(--t2);font-size:11.5px">Kemal Öztürk</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="yıldız muhasebe mali müşavir finans a1 a1 blok 1. kat 115"><td><div class="oav" style="width:28px;height:28px;background:#f7f7f7;color:#555;border-radius:4px;font-size:10px">YM</div></td><td><div style="font-size:12.5px;font-weight:500">Yıldız Muhasebe</div></td><td><span class="badge bgr">A1</span></td><td style="color:var(--t2)">1. Kat</td><td style="color:var(--t2);font-weight:500">115</td><td><span class="cp">Finans</span></td><td style="color:var(--t2);font-size:11.5px">Mali Müşavir</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="kocaeli mimarlık mimar naci mimarlık a1 a1 blok 1. kat 118"><td><div class="oav" style="width:28px;height:28px;background:#EEEDFE;color:#3C3489;border-radius:4px;font-size:10px">KM</div></td><td><div style="font-size:12.5px;font-weight:500">Kocaeli Mimarlık</div></td><td><span class="badge bgr">A1</span></td><td style="color:var(--t2)">1. Kat</td><td style="color:var(--t2);font-weight:500">118</td><td><span class="cp">Mimarlık</span></td><td style="color:var(--t2);font-size:11.5px">Mimar Naci</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="diş kliniği zirve dr. zeynep k. sağlık a1 a1 blok 2. kat 204"><td><div class="oav" style="width:28px;height:28px;background:#FEF2F2;color:#991B1B;border-radius:4px;font-size:10px">DZ</div></td><td><div style="font-size:12.5px;font-weight:500">Diş Kliniği Zirve</div></td><td><span class="badge bgr">A1</span></td><td style="color:var(--t2)">2. Kat</td><td style="color:var(--t2);font-weight:500">204</td><td><span class="cp">Sağlık</span></td><td style="color:var(--t2);font-size:11.5px">Dr. Zeynep K.</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="onkoloji araştırma prof. tekin sağlık a2 a2 blok 1. kat 101"><td><div class="oav" style="width:28px;height:28px;background:#EFF6FF;color:#1D4ED8;border-radius:4px;font-size:10px">OA</div></td><td><div style="font-size:12.5px;font-weight:500">Onkoloji Araştırma</div></td><td><span class="badge bgr">A2</span></td><td style="color:var(--t2)">1. Kat</td><td style="color:var(--t2);font-weight:500">101</td><td><span class="cp">Sağlık</span></td><td style="color:var(--t2);font-size:11.5px">Prof. Tekin</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
<tr data-s="veri cephe yazılım burak yılmaz teknoloji a2 a2 blok 2. kat 208"><td><div class="oav" style="width:28px;height:28px;background:#f7f7f7;color:#555;border-radius:4px;font-size:10px">VC</div></td><td><div style="font-size:12.5px;font-weight:500">Veri Cephe Yazılım</div></td><td><span class="badge bgr">A2</span></td><td style="color:var(--t2)">2. Kat</td><td style="color:var(--t2);font-weight:500">208</td><td><span class="cp">Teknoloji</span></td><td style="color:var(--t2);font-size:11.5px">Burak Yılmaz</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-office')">✏</button><button class="btn brd bsm" onclick="confirm('Silinsin mi?')">🗑</button></div></td></tr>
</tbody></table></div></div></div></div>
<div class="ap" id="ap-caddeadm">
<div class="adh"><div><div class="aht">Cadde Yönetimi</div><div class="ahs">34 mağaza</div></div>
<div class="aha"><button class="btn bou" onclick="om('edit-store')">+ Mağaza Ekle</button></div></div>
<div class="tbl-toolbar">
<div class="tbl-search"><span>🔍</span><input type="text" placeholder="Mağaza adı veya kategori ara..." oninput="filterTbl('cadde-tbody',this.value)"></div>
<button class="ftag-sm on" onclick="filterTblTag(this,'cadde-tbody','')">Tümü</button>
<button class="ftag-sm" onclick="filterTblTag(this,'cadde-tbody','kafe')">Kafe</button>
<button class="ftag-sm" onclick="filterTblTag(this,'cadde-tbody','restoran')">Restoran</button>
<button class="ftag-sm" onclick="filterTblTag(this,'cadde-tbody','market')">Market</button>
<button class="ftag-sm" onclick="filterTblTag(this,'cadde-tbody','a1')">A1</button>
<button class="ftag-sm" onclick="filterTblTag(this,'cadde-tbody','a2')">A2</button>
</div>
<div class="adb"><div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th>Mağaza</th><th>Tür</th><th>Konum</th>
<th style="text-align:center;min-width:72px">Rezervasyon</th>
<th style="text-align:center;min-width:72px">Mesaj</th>
<th style="text-align:center;min-width:72px">QR Okuma</th>
<th>Durum</th><th></th></tr></thead>
<tbody id="cadde-tbody">
<tr data-s="starbucks kafe a2 blok kafe a2"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">☕</span><span style="font-size:12.5px;font-weight:500">Starbucks</span></div></td><td><span class="cp">Kafe</span></td><td style="color:var(--t2)">A2 Blok</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><span class="badge bg">Açık</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
<tr data-s="gurme mutfak restoran a1 blok restoran a1"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🍽️</span><span style="font-size:12.5px;font-weight:500">Gurme Mutfak</span></div></td><td><span class="cp">Restoran</span></td><td style="color:var(--t2)">A1 Blok</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td><span class="badge bg">Açık</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
<tr data-s="burger lab fast food cadde fast food cadde"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🍔</span><span style="font-size:12.5px;font-weight:500">Burger Lab</span></div></td><td><span class="cp">Fast Food</span></td><td style="color:var(--t2)">Cadde</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><span class="badge bg">Açık</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
<tr data-s="güzellik merkezi güzellik a2 blok güzellik a2"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">💄</span><span style="font-size:12.5px;font-weight:500">Güzellik Merkezi</span></div></td><td><span class="cp">Güzellik</span></td><td style="color:var(--t2)">A2 Blok</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><span class="badge bgr">Kapalı</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
<tr data-s="migros market a1 blok market a1"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🛒</span><span style="font-size:12.5px;font-weight:500">Migros</span></div></td><td><span class="cp">Market</span></td><td style="color:var(--t2)">A1 Blok</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td><span class="badge bg">Açık</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
<tr data-s="simit sarayı pastane a1 blok pastane kafe a1"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🥐</span><span style="font-size:12.5px;font-weight:500">Simit Sarayı</span></div></td><td><span class="cp">Pastane</span></td><td style="color:var(--t2)">A1 Blok</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-off">Kapalı</span></div></td><td><span class="badge bg">Açık</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
<tr data-s="pizza mia restoran cadde restoran cadde"><td><div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🍕</span><span style="font-size:12.5px;font-weight:500">Pizza Mia</span></div></td><td><span class="cp">Restoran</span></td><td style="color:var(--t2)">Cadde</td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td class="tog-cell"><div class="tog-wrap-sm"><label class="tog tog-rg" style="width:32px;height:18px"><input type="checkbox" checked onchange="var s=this.closest('.tog-wrap-sm').querySelector('span');s.textContent=this.checked?'Açık':'Kapalı';s.className=this.checked?'tg-on':'tg-off'"><span class="tslider"></span></label><span class="tg-on">Açık</span></div></td><td><span class="badge bg">Açık</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('edit-store')">✏</button><button class="btn brd bsm">🗑</button></div></td></tr>
</tbody></table></div></div></div></div>
<div class="ap" id="ap-tickets">
<div class="adh">
<div><div class="aht">Ticket'lar</div><div class="ahs">4 açık · 12 bu hafta çözüldü</div></div>
<div class="aha"><button class="btn bdk2">+ Yeni Ticket</button></div>
</div>
<div class="tbl-toolbar" style="gap:6px">
<span style="font-size:10px;color:var(--t3);white-space:nowrap">Tür:</span>
<button class="ftag-sm on" onclick="filterTickets(this,'type','')">Tümü</button>
<button class="ftag-sm" onclick="filterTickets(this,'type','elektrik')">⚡ Elektrik</button>
<button class="ftag-sm" onclick="filterTickets(this,'type','mekanik')">🔧 Mekanik</button>
<button class="ftag-sm" onclick="filterTickets(this,'type','internet')">📶 İnternet</button>
<button class="ftag-sm" onclick="filterTickets(this,'type','kilitli')">🔒 Kapı/Kilit</button>
<div style="width:1px;height:18px;background:var(--bd);flex-shrink:0"></div>
<span style="font-size:10px;color:var(--t3);white-space:nowrap">Aciliyet:</span>
<button class="ftag-sm" onclick="filterTickets(this,'urgency','yuksek')">🔴 Yüksek</button>
<button class="ftag-sm" onclick="filterTickets(this,'urgency','normal')">🟡 Normal</button>
<button class="ftag-sm" onclick="filterTickets(this,'urgency','dusuk')">🟢 Düşük</button>
<div style="width:1px;height:18px;background:var(--bd);flex-shrink:0"></div>
<span style="font-size:10px;color:var(--t3);white-space:nowrap">Tarih:</span>
<button class="ftag-sm on" onclick="filterTickets(this,'date','')">Tümü</button>
<button class="ftag-sm" onclick="filterTickets(this,'date','bugun')">Bugün</button>
<button class="ftag-sm" onclick="filterTickets(this,'date','hafta')">Bu hafta</button>
<button class="ftag-sm" onclick="filterTickets(this,'date','ay')">Bu ay</button>
</div>
<div class="tsplit">
<div class="tlp"><div class="tls"><div class="srch" style="padding:6px 10px;margin:0"><span>🔍</span><input type="text" placeholder="Ara..." style="flex:1;background:none;border:none;font-size:12px;color:var(--t1);font-family:inherit"></div></div>
<div class="tli2">
<div class="titem on" onclick="selT(1)"><div class="tiii" style="background:rgba(255,255,255,.1)">⚡</div>
<div style="flex:1;min-width:0"><div class="titn" style="color:#fff">Ofis kliması çalışmıyor</div><div class="titm" style="color:rgba(255,255,255,.4)">A Blok · İşlemde</div></div></div>
<div class="titem" onclick="selT(2)"><div class="tiii" style="background:var(--bg2)">🔧</div>
<div style="flex:1;min-width:0"><div class="titn" style="color:var(--t1)">B Blok asansör arızası</div><div class="titm" style="color:var(--t3)">B Blok · İşlemde</div></div></div>
<div class="titem" onclick="selT(3)"><div class="tiii" style="background:var(--bg2)">📶</div>
<div style="flex:1;min-width:0"><div class="titn" style="color:var(--t1)">İnternet bağlantısı</div><div class="titm" style="color:var(--t3)">Ofis 215 · Yeni</div></div></div>
<div class="titem" onclick="selT(4)"><div class="tiii" style="background:var(--bg2)">🔒</div>
<div style="flex:1;min-width:0"><div class="titn" style="color:var(--t1)">Kapı kilidi bozuk</div><div class="titm" style="color:var(--t3)">Cadde · Yeni</div></div></div>
</div></div>
<div class="cpane">
<div class="chd"><div class="chav" id="chav">⚡</div><div style="flex:1;min-width:0"><div class="cht" id="cht">Ofis kliması çalışmıyor</div><div class="chm" id="chm">A Blok · 104 · #1042 <span class="badge bb">İşlemde</span></div></div>
<div class="chact"><button class="btn bou bsm">Kemal Usta</button><button class="btn bdk2 bsm">✓ Kapat</button></div></div>
<div class="cbdy" id="cbdy">
<div class="cds">Bugün</div>
<div class="cmsg u"><div><div class="cbbl bbu">Merhaba, A blok 1. kattaki ofisimizin kliması sabahtan beri çalışmıyor.</div><div class="ctm2" style="text-align:right">08:42</div></div></div>
<div class="cmsg a"><div><div class="cbbl bba">Merhaba Ahmet Bey, talebinizi aldık. Teknik ekibimiz en kısa sürede ilgilenecek.</div><div class="ctm2">08:45</div></div></div>
<div class="cmsg a"><div><div class="cbbl bba">Teknisyenimiz bugün 14:00–15:00 arasında ofisinize uğrayacak. Uygun mudur?</div><div class="ctm2">08:52</div></div></div>
<div class="cmsg u"><div><div class="cbbl bbu">Evet, uygun. Teşekkürler.</div><div class="ctm2" style="text-align:right">09:10</div></div></div>
</div>
<div class="cinp"><input type="text" class="cif" id="cinf" placeholder="Mesaj yaz..." onkeydown="if(event.key==='Enter')sendChat()"><button class="csd" onclick="sendChat()">➤</button></div>
</div></div></div>
<div class="ap" id="ap-gorev">
<div class="adh">
<div><div class="aht">Görevler</div><div class="ahs">Bugün 9 görev · 3 rutin otomatik · 2 öncelikli</div></div>
<div class="aha"><button class="btn bou" onclick="om('gorev-ekle')">+ Görev Ekle</button></div>
</div>
<div class="adtabs" id="gorev-tabs">
<button class="adtab on" onclick="swt(this,'gt-gun')">Günlük</button>
<button class="adtab" onclick="swt(this,'gt-haf')">Haftalık</button>
<button class="adtab" onclick="swt(this,'gt-ayl')">Aylık</button>
<button class="adtab" onclick="swt(this,'gt-pers')">👤 Personel Bazlı</button>
</div>
<div class="adb">
<!-- GÜNLÜK TAB -->
<div id="gt-gun" class="tbc on">
<!-- Rutin Görevler (Otomatik) -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:7px">
<div style="font-size:11.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:7px">
<span style="background:var(--grn-bg);color:var(--grn);border:.5px solid var(--grn-bd);font-size:10px;padding:2px 7px;border-radius:3px">♻ Rutin · Otomatik</span>
Bugün için günlük rutin görevler
</div>
</div>
<div class="wg" style="margin-bottom:10px">
<div class="tw"><table class="dtbl"><thead><tr><th>Saat</th><th>Görev</th><th>Personel</th><th>Tekrar</th><th>İlerleme</th><th>Durum</th><th></th></tr></thead><tbody>
<tr><td style="color:var(--grn);font-weight:500">08:00</td><td><div style="font-weight:500">Sabah pano turu</div><div style="font-size:10.5px;color:var(--t3)">Tüm bloklar</div></td><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:20px;height:20px;background:#EFF6FF;color:#1D4ED8;font-size:8px">KU</div>Kemal U.</div></td><td><span class="cp" style="font-size:9.5px">Her gün</span></td><td><div class="prog-track" style="width:70px"><div class="prog-fill" style="width:100%"></div></div></td><td><span class="badge bg">✓ Tamam</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr><td style="color:var(--t3)">14:00</td><td><div style="font-weight:500">Kat temizlikleri</div><div style="font-size:10.5px;color:var(--t3)">A & B · 1–4. katlar</div></td><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:20px;height:20px;background:#F3E8FF;color:#6B21A8;font-size:8px">ZK</div>Zeynep K.</div></td><td><span class="cp" style="font-size:9.5px">Her gün</span></td><td><div class="prog-track" style="width:70px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr><td style="color:var(--t3)">17:00</td><td><div style="font-weight:500">Akşam güvenlik kontrolü</div><div style="font-size:10.5px;color:var(--t3)">Tüm bloklar · giriş/çıkışlar</div></td><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:20px;height:20px;background:#EFF6FF;color:#1D4ED8;font-size:8px">MA</div>Murat A.</div></td><td><span class="cp" style="font-size:9.5px">Her gün</span></td><td><div class="prog-track" style="width:70px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
</tbody></table></div>
</div>
<!-- Manuel Görevler -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:7px">
<div style="font-size:11.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:7px">
<span style="background:var(--blu-bg);color:var(--blu);border:.5px solid var(--blu-bd);font-size:10px;padding:2px 7px;border-radius:3px">✍ Manuel</span>
Bugün için manuel oluşturulan görevler
</div>
</div>
<div class="wg" style="margin-bottom:10px">
<div class="tw"><table class="dtbl"><thead><tr><th>Saat</th><th>Görev</th><th>Personel</th><th>İlerleme</th><th>Durum</th><th></th></tr></thead><tbody>
<tr style="background:#FFFBEB"><td style="color:var(--ylw);font-weight:500">10:30 🔔</td><td><div style="font-weight:500;color:var(--t1)">A1 Blok 3. kat pano kontrolü</div><div style="font-size:10.5px;color:var(--t3)">A1 · 3. kat · Alarm verdi</div></td><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:20px;height:20px;background:#EFF6FF;color:#1D4ED8;font-size:8px">KU</div>Kemal U.</div></td><td><div class="prog-track" style="width:70px"><div class="prog-fill" style="width:65%"></div></div></td><td><span class="badge by">Devam ediyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
</tbody></table></div>
</div>
<!-- Ticket'tan Gelen Görevler -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:7px">
<div style="font-size:11.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:7px">
<span style="background:var(--ylw-bg);color:var(--ylw);border:.5px solid var(--ylw-bd);font-size:10px;padding:2px 7px;border-radius:3px">🎫 Ticket'tan</span>
Ticket'lardan otomatik oluşturulan görevler
</div>
</div>
<div class="wg">
<div class="tw"><table class="dtbl"><thead><tr><th>Saat</th><th>Görev</th><th>Personel</th><th>Kaynak</th><th>İlerleme</th><th>Durum</th><th></th></tr></thead><tbody>
<tr><td style="color:var(--t3)">11:00</td><td><div style="font-weight:500">B Blok asansör bakımı</div><div style="font-size:10.5px;color:var(--t3)">B Blok tüm katlar</div></td><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:20px;height:20px;background:#F0FDF4;color:#166534;font-size:8px">OD</div>Osman D.</div></td><td><span class="badge bb" style="font-size:9px">Ticket #1039</span></td><td><div class="prog-track" style="width:70px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr><td style="color:var(--t3)">13:00</td><td><div style="font-weight:500">Klima filtre değişimi</div><div style="font-size:10.5px;color:var(--t3)">B Blok · 2.kat · 208</div></td><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:20px;height:20px;background:#F0FDF4;color:#166534;font-size:8px">HK</div>Hasan K.</div></td><td><span class="badge bb" style="font-size:9px">Ticket #1042</span></td><td><div class="prog-track" style="width:70px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
</tbody></table></div>
</div>
</div>
<!-- HAFTALIK TAB -->
<div id="gt-haf" class="tbc">
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px">
<div class="wg" style="flex:1;min-width:200px"><div class="wgh"><span class="wgt">♻ Haftalık rutin görevler</span></div>
<div class="pr-row"><div class="pdp" style="background:#EFF6FF;color:#1D4ED8;border:.5px solid #BFDBFE;font-size:10px;width:60px;text-align:center">Pazartesi</div><div class="pn" style="font-size:12px">Jeneratör test çalışması</div><div class="ptk">Kemal U.</div></div>
<div class="pr-row"><div class="pdp" style="background:#F0FDF4;color:#166534;border:.5px solid #BBF7D0;font-size:10px;width:60px;text-align:center">Salı</div><div class="pn" style="font-size:12px">Yangın sistemi kontrolü</div><div class="ptk">Osman D.</div></div>
<div class="pr-row"><div class="pdp" style="background:#EFF6FF;color:#1D4ED8;border:.5px solid #BFDBFE;font-size:10px;width:60px;text-align:center">Perşembe</div><div class="pn" style="font-size:12px">Su deposu bakımı</div><div class="ptk">Hasan K.</div></div>
<div class="pr-row"><div class="pdp" style="background:#F3E8FF;color:#6B21A8;border:.5px solid #E9D5FF;font-size:10px;width:60px;text-align:center">Cuma</div><div class="pn" style="font-size:12px">Genel temizlik + dezenfeksiyon</div><div class="ptk">Zeynep K.</div></div>
</div>
<div class="wg" style="flex:1;min-width:200px"><div class="wgh"><span class="wgt">✍ Manuel & 🎫 Ticket haftalık</span><button class="wgl" onclick="om('task')">Ekle</button></div>
<div style="padding:14px;color:var(--t3);font-size:12px;text-align:center">Bu hafta için manuel görev yok.<br><a style="color:var(--t1);cursor:pointer" onclick="om('task')">+ Görev ekle</a></div>
</div>
</div>
</div>
<!-- AYLIK TAB -->
<div id="gt-ayl" class="tbc">
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px">
<div class="wg" style="flex:1;min-width:200px"><div class="wgh"><span class="wgt">♻ Aylık rutin görevler</span></div>
<div class="pr-row"><div class="pdp" style="background:#EFF6FF;color:#1D4ED8;border:.5px solid #BFDBFE;font-size:10px;width:50px;text-align:center">1. gün</div><div class="pn" style="font-size:12px">Periyodik elektrik panosu bakımı</div><div class="ptk">Kemal U.</div></div>
<div class="pr-row"><div class="pdp" style="background:#F0FDF4;color:#166534;border:.5px solid #BBF7D0;font-size:10px;width:50px;text-align:center">5. gün</div><div class="pn" style="font-size:12px">Klima filtre yıkama/değişim</div><div class="ptk">Hasan K.</div></div>
<div class="pr-row"><div class="pdp" style="background:#FEF3C7;color:#92400E;border:.5px solid #FDE68A;font-size:10px;width:50px;text-align:center">15. gün</div><div class="pn" style="font-size:12px">Asansör periyodik muayenesi</div><div class="ptk">Osman D.</div></div>
<div class="pr-row"><div class="pdp" style="background:#F3E8FF;color:#6B21A8;border:.5px solid #E9D5FF;font-size:10px;width:50px;text-align:center">Son gün</div><div class="pn" style="font-size:12px">Aylık genel denetim & rapor</div><div class="ptk">Tüm ekip</div></div>
</div>
<div class="wg" style="flex:1;min-width:200px"><div class="wgh"><span class="wgt">Sözleşme & yenileme hatırlatıcıları</span></div>
<div style="padding:12px;color:var(--t3);font-size:12px">Haziran 30: Asansör bakım sözleşmesi yenileme<br>Temmuz 15: Yangın sistemi yıllık denetim</div>
</div>
</div>
</div>
<!-- PERSONEL BAZLI TAB -->
<div id="gt-pers" class="tbc">
<div style="margin-bottom:12px">
<div style="font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:8px">Personel seçin:</div>
<div style="display:flex;gap:7px;flex-wrap:wrap" id="pers-btns">
<button class="ftag on" onclick="filterGorevByPers(this,'hepsi')">Tüm Personel</button>
<button class="ftag" onclick="filterGorevByPers(this,'KU')">⚡ Kemal Usta</button>
<button class="ftag" onclick="filterGorevByPers(this,'MA')">⚡ Murat Aydın</button>
<button class="ftag" onclick="filterGorevByPers(this,'SA')">⚡ Serkan Arslan</button>
<button class="ftag" onclick="filterGorevByPers(this,'HK')">🔧 Hasan Koç</button>
<button class="ftag" onclick="filterGorevByPers(this,'OD')">🔧 Osman Demir</button>
<button class="ftag" onclick="filterGorevByPers(this,'ZK')">🧹 Zeynep Kaya</button>
</div>
</div>
<div class="wg">
<div class="wgh"><span class="wgt" id="pers-gorev-title">Tüm personelin bugünkü görevleri</span></div>
<div class="tw"><table class="dtbl"><thead><tr><th>Personel</th><th>Saat</th><th>Görev</th><th>Tür</th><th>İlerleme</th><th>Durum</th><th></th></tr></thead>
<tbody id="pers-gorev-tbody">
<tr data-pers="KU"><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:22px;height:22px;background:#EFF6FF;color:#1D4ED8;font-size:8px">KU</div>Kemal Usta</div></td><td style="color:var(--grn)">08:00</td><td>Sabah pano turu</td><td><span class="cp">Rutin</span></td><td><div class="prog-track" style="width:60px"><div class="prog-fill" style="width:100%"></div></div></td><td><span class="badge bg">Tamam</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr data-pers="KU"><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:22px;height:22px;background:#EFF6FF;color:#1D4ED8;font-size:8px">KU</div>Kemal Usta</div></td><td style="color:var(--ylw)">10:30</td><td>A1 Blok pano kontrolü</td><td><span class="cp">Manuel</span></td><td><div class="prog-track" style="width:60px"><div class="prog-fill" style="width:65%"></div></div></td><td><span class="badge by">Devam</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr data-pers="HK"><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:22px;height:22px;background:#F0FDF4;color:#166534;font-size:8px">HK</div>Hasan Koç</div></td><td style="color:var(--t3)">13:00</td><td>Klima filtre değişimi</td><td><span class="badge bb" style="font-size:9.5px">Ticket</span></td><td><div class="prog-track" style="width:60px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr data-pers="OD"><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:22px;height:22px;background:#F0FDF4;color:#166534;font-size:8px">OD</div>Osman Demir</div></td><td style="color:var(--t3)">11:00</td><td>B Blok asansör bakımı</td><td><span class="badge bb" style="font-size:9.5px">Ticket</span></td><td><div class="prog-track" style="width:60px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr data-pers="ZK"><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:22px;height:22px;background:#F3E8FF;color:#6B21A8;font-size:8px">ZK</div>Zeynep Kaya</div></td><td style="color:var(--t3)">14:00</td><td>Kat temizlikleri</td><td><span class="cp">Rutin</span></td><td><div class="prog-track" style="width:60px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
<tr data-pers="MA"><td><div style="display:flex;align-items:center;gap:5px"><div class="pav" style="width:22px;height:22px;background:#EFF6FF;color:#1D4ED8;font-size:8px">MA</div>Murat Aydın</div></td><td style="color:var(--t3)">17:00</td><td>Akşam güvenlik kontrolü</td><td><span class="cp">Rutin</span></td><td><div class="prog-track" style="width:60px"><div class="prog-fill" style="width:0%"></div></div></td><td><span class="badge bgr">Bekliyor</span></td><td><button class="btn bou bsm" onclick="om('task')">Detay</button></td></tr>
</tbody></table></div>
</div>
</div>
</div></div>
<div class="ap" id="ap-personel">
<div class="adh">
<div><div class="aht">Personel</div><div class="ahs">9 personel · 7 aktif sahada</div></div>
<div class="aha"><button class="btn bou" onclick="om('add-member')">+ Personel Ekle</button><button class="btn bdk2" onclick="om('task')">Görev Ata</button></div>
</div>
<div class="adtabs" id="pers-dep-tabs">
<button class="adtab on" onclick="filterPersonelDept(this,'')">Tümünü Göster</button>
<button class="adtab" onclick="filterPersonelDept(this,'elektrik')">⚡ Elektrik (3)</button>
<button class="adtab" onclick="filterPersonelDept(this,'mekanik')">🔧 Mekanik (3)</button>
<button class="adtab" onclick="filterPersonelDept(this,'temizlik')">🧹 Temizlik (3)</button>
</div>
<div class="adb">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px" id="dep-cards">
<div class="dc" style="cursor:pointer" onclick="filterPersonelDept(document.querySelector('[onclick*=elektrik]'),'elektrik')"><div class="dct"><div class="dci">⚡</div><div class="dcn">Elektrik</div></div><div class="dcc">3 personel · 2 aktif</div><div class="dcd"><div class="sdot" style="background:var(--grn)"></div><div class="sdot" style="background:var(--grn)"></div><div class="sdot" style="background:var(--ylw)"></div></div></div>
<div class="dc" style="cursor:pointer" onclick="filterPersonelDept(document.querySelector('[onclick*=mekanik]'),'mekanik')"><div class="dct"><div class="dci">🔧</div><div class="dcn">Mekanik</div></div><div class="dcc">3 personel · 2 aktif</div><div class="dcd"><div class="sdot" style="background:var(--grn)"></div><div class="sdot" style="background:var(--grn)"></div><div class="sdot" style="background:var(--bd2)"></div></div></div>
<div class="dc" style="cursor:pointer" onclick="filterPersonelDept(document.querySelector('[onclick*=temizlik]'),'temizlik')"><div class="dct"><div class="dci">🧹</div><div class="dcn">Temizlik</div></div><div class="dcc">3 personel · 3 aktif</div><div class="dcd"><div class="sdot" style="background:var(--grn)"></div><div class="sdot" style="background:var(--grn)"></div><div class="sdot" style="background:var(--grn)"></div></div></div>
</div>
<div class="wg">
<div class="wgh"><span class="wgt" id="pers-list-title">Tüm Personel</span></div>
<div class="tw"><table class="dtbl">
<thead><tr><th></th><th>Ad Soyad</th><th>Departman</th><th>Telefon</th><th>Çözülen Ticket</th><th>Ort. Süre</th><th>Durum</th><th></th></tr></thead>
<tbody id="personel-tbody">
<tr data-dep="elektrik"><td><div class="pav" style="width:28px;height:28px;background:#EFF6FF;color:#1D4ED8;font-size:10px">KU</div></td><td style="font-size:12.5px;font-weight:500">Kemal Usta</td><td><span class="cp">Elektrik</span></td><td style="color:var(--t2)">0555 111 22 33</td><td>47</td><td style="color:var(--grn)">1.2s</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="elektrik"><td><div class="pav" style="width:28px;height:28px;background:#EFF6FF;color:#1D4ED8;font-size:10px">MA</div></td><td style="font-size:12.5px;font-weight:500">Murat Aydın</td><td><span class="cp">Elektrik</span></td><td style="color:var(--t2)">0555 222 33 44</td><td>31</td><td style="color:var(--grn)">1.8s</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="elektrik"><td><div class="pav" style="width:28px;height:28px;background:#FEF3C7;color:#92400E;font-size:10px">SA</div></td><td style="font-size:12.5px;font-weight:500">Serkan Arslan</td><td><span class="cp">Elektrik</span></td><td style="color:var(--t2)">0555 999 88 77</td><td>18</td><td style="color:var(--ylw)">2.1s</td><td><span class="badge by">Mola</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="mekanik"><td><div class="pav" style="width:28px;height:28px;background:#F0FDF4;color:#166534;font-size:10px">HK</div></td><td style="font-size:12.5px;font-weight:500">Hasan Koç</td><td><span class="cp">Mekanik</span></td><td style="color:var(--t2)">0555 333 44 55</td><td>38</td><td style="color:var(--ylw)">2.4s</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="mekanik"><td><div class="pav" style="width:28px;height:28px;background:#F0FDF4;color:#166534;font-size:10px">OD</div></td><td style="font-size:12.5px;font-weight:500">Osman Demir</td><td><span class="cp">Mekanik</span></td><td style="color:var(--t2)">0555 444 55 66</td><td>29</td><td style="color:var(--grn)">1.5s</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="mekanik"><td><div class="pav" style="width:28px;height:28px;background:#f7f7f7;color:#555;font-size:10px">CB</div></td><td style="font-size:12.5px;font-weight:500">Cem Bulut</td><td><span class="cp">Mekanik</span></td><td style="color:var(--t2)">0555 777 88 99</td><td>12</td><td style="color:var(--t3)">—</td><td><span class="badge bgr">İzinli</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="temizlik"><td><div class="pav" style="width:28px;height:28px;background:#F3E8FF;color:#6B21A8;font-size:10px">ZK</div></td><td style="font-size:12.5px;font-weight:500">Zeynep Kaya</td><td><span class="cp">Temizlik</span></td><td style="color:var(--t2)">0555 555 66 77</td><td>5</td><td style="color:var(--t3)">—</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="temizlik"><td><div class="pav" style="width:28px;height:28px;background:#F3E8FF;color:#6B21A8;font-size:10px">AA</div></td><td style="font-size:12.5px;font-weight:500">Ayşe Arslan</td><td><span class="cp">Temizlik</span></td><td style="color:var(--t2)">0555 666 77 88</td><td>3</td><td style="color:var(--t3)">—</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
<tr data-dep="temizlik"><td><div class="pav" style="width:28px;height:28px;background:#F3E8FF;color:#6B21A8;font-size:10px">BT</div></td><td style="font-size:12.5px;font-weight:500">Berk Türk</td><td><span class="cp">Temizlik</span></td><td style="color:var(--t2)">0555 111 44 66</td><td>2</td><td style="color:var(--t3)">—</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">✏ Düzelt</button><button class="btn bou bsm" onclick="om('task')">Görev</button></div></td></tr>
</tbody></table></div>
</div>
</div></div>
<div class="ap" id="ap-chat">
<div style="display:flex;flex:1;overflow:hidden;height:100%">
<!-- CHANNEL SIDEBAR -->
<div style="width:210px;background:#111;display:flex;flex-direction:column;flex-shrink:0;border-right:.5px solid rgba(255,255,255,.08)">
<div style="padding:12px 14px;border-bottom:.5px solid rgba(255,255,255,.07)">
<div style="font-size:11.5px;font-weight:500;color:#fff;margin-bottom:9px;letter-spacing:-.01em">Personel Chat</div>
<button onclick="om('ch-settings')" style="width:100%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);border:.5px solid rgba(255,255,255,.12);font-size:11px;padding:6px;border-radius:5px;cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:7px">⚙️ Kanal ayarları</button>
</div>
<div style="flex:1;overflow-y:auto;padding:6px 0">
<div style="font-size:9px;color:rgba(255,255,255,.22);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px 4px">Kanallar</div>
<div class="ch-item on" id="chi-genel" onclick="selCh(this,'genel','#')"><span style="font-size:14px;width:18px;text-align:center">#</span><span class="ch-name">genel</span></div>
<div class="ch-item" id="chi-elektrik" onclick="selCh(this,'elektrik','#')"><span style="font-size:14px;width:18px;text-align:center">#</span><span class="ch-name">elektrik</span><span style="background:#dc2626;color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;margin-left:auto">2</span></div>
<div class="ch-item" id="chi-mekanik" onclick="selCh(this,'mekanik','#')"><span style="font-size:14px;width:18px;text-align:center">#</span><span class="ch-name">mekanik</span></div>
<div class="ch-item" id="chi-temizlik" onclick="selCh(this,'temizlik','#')"><span style="font-size:14px;width:18px;text-align:center">#</span><span class="ch-name">temizlik</span></div>
<div class="ch-item" id="chi-yonetim" onclick="selCh(this,'yönetim','🔒')"><span style="font-size:14px;width:18px;text-align:center">🔒</span><span class="ch-name">yönetim</span></div>
<div style="font-size:9px;color:rgba(255,255,255,.22);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px 4px">Direkt Mesaj</div>
<div class="ch-item" onclick="selCh(this,'Kemal Usta','dm')"><div style="width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:#fff;flex-shrink:0">KU</div><span class="ch-name">Kemal Usta</span><span style="width:7px;height:7px;border-radius:50%;background:#16a34a;margin-left:auto;flex-shrink:0"></span></div>
<div class="ch-item" onclick="selCh(this,'Hasan Koç','dm')"><div style="width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:#fff;flex-shrink:0">HK</div><span class="ch-name">Hasan Koç</span><span style="width:7px;height:7px;border-radius:50%;background:#16a34a;margin-left:auto;flex-shrink:0"></span></div>
<div class="ch-item" onclick="selCh(this,'Osman Demir','dm')"><div style="width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:#fff;flex-shrink:0">OD</div><span class="ch-name">Osman Demir</span><span style="width:7px;height:7px;border-radius:50%;background:#d97706;margin-left:auto;flex-shrink:0"></span></div>
</div>
<div style="padding:10px 14px;border-top:.5px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px">
<div style="width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:#fff;flex-shrink:0">A</div>
<div><div style="font-size:11.5px;font-weight:500;color:#fff">Admin</div><div style="font-size:9px;color:rgba(255,255,255,.3)">Süper Yönetici</div></div>
</div>
</div>
<!-- CHAT MAIN -->
<div style="flex:1;display:flex;flex-direction:column;background:#fff;overflow:hidden">
<!-- Chat Header -->
<div style="padding:10px 16px;border-bottom:.5px solid #e5e5e5;display:flex;align-items:center;gap:10px;background:#fff;flex-shrink:0">
<div style="font-size:16px;flex-shrink:0" id="ch-ico2">#</div>
<div style="flex:1;min-width:0">
<div style="font-size:13px;font-weight:500;color:#111" id="ch-name">genel</div>
<div style="font-size:10.5px;color:#999">9 üye · Herkese açık</div>
</div>
<button onclick="om('ch-settings')" style="padding:6px 12px;border-radius:4px;border:.5px solid #e5e5e5;background:#fff;font-size:11.5px;color:#555;cursor:pointer;font-family:inherit;white-space:nowrap">⚙️ Ayarlar</button>
</div>
<!-- Chat Body -->
<div style="flex:1;overflow-y:auto;padding:16px" id="ch-body">
<div style="text-align:center;font-size:10.5px;color:#999;margin-bottom:14px;padding-bottom:10px;border-bottom:.5px solid #e5e5e5">Bugün</div>
<div style="margin-bottom:12px;display:flex;justify-content:flex-start">
<div style="max-width:72%">
<div style="font-size:9.5px;color:#999;margin-bottom:3px">Kemal Usta — 08:12</div>
<div style="padding:9px 12px;border-radius:6px;font-size:12px;line-height:1.55;background:#f7f7f7;color:#111;border:.5px solid #e5e5e5">Günaydın ekip. Bugün A3 bloktaki pano kontrolü öncelikli.</div>
</div>
</div>
<div style="margin-bottom:12px;display:flex;justify-content:flex-start">
<div style="max-width:72%">
<div style="font-size:9.5px;color:#999;margin-bottom:3px">Hasan Koç — 08:20</div>
<div style="padding:9px 12px;border-radius:6px;font-size:12px;line-height:1.55;background:#f7f7f7;color:#111;border:.5px solid #e5e5e5">Anlaşıldı, 10:30'da başlıyorum.</div>
</div>
</div>
<div style="margin-bottom:12px;display:flex;justify-content:flex-start">
<div style="max-width:72%">
<div style="font-size:9.5px;color:#999;margin-bottom:3px">Admin — 09:05</div>
<div style="padding:9px 12px;border-radius:6px;font-size:12px;line-height:1.55;background:#f7f7f7;color:#111;border:.5px solid #e5e5e5">Ticket #1042 için A1 104 ofis klima değişimi eklendi. Hasan Koç 13:00'de bakacak.</div>
</div>
</div>
<div style="margin-bottom:12px;display:flex;justify-content:flex-end">
<div style="max-width:72%">
<div style="padding:9px 12px;border-radius:6px;font-size:12px;line-height:1.55;background:#111;color:#fff">Anlaşıldı, R32 gaz stoğu az. Sipariş gerekiyor.</div>
<div style="font-size:9.5px;color:#999;margin-top:3px;text-align:right">09:18</div>
</div>
</div>
</div>
<!-- Media buttons -->
<div style="padding:8px 14px 4px;display:flex;gap:6px;border-top:.5px solid #f0f0f0">
<button onclick="alert('🎤 Ses kaydı başlatıldı')" style="display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:4px;border:.5px solid #e5e5e5;background:#f7f7f7;font-size:11px;color:#555;cursor:pointer;font-family:inherit">🎤 Ses</button>
<button onclick="alert('📷 Fotoğraf seçici açıldı')" style="display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:4px;border:.5px solid #e5e5e5;background:#f7f7f7;font-size:11px;color:#555;cursor:pointer;font-family:inherit">📷 Fotoğraf</button>
<button onclick="alert('🎬 Video seçici açıldı')" style="display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:4px;border:.5px solid #e5e5e5;background:#f7f7f7;font-size:11px;color:#555;cursor:pointer;font-family:inherit">🎬 Video</button>
<button onclick="alert('📎 Dosya seçici açıldı')" style="display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:4px;border:.5px solid #e5e5e5;background:#f7f7f7;font-size:11px;color:#555;cursor:pointer;font-family:inherit">📎 Dosya</button>
</div>
<!-- Text input -->
<div style="padding:8px 14px 12px;display:flex;gap:8px;align-items:center">
<input type="text" id="ch-inp" placeholder="Mesaj yaz..." onkeydown="if(event.key==='Enter')sendChMsg()" style="flex:1;background:#f7f7f7;border:.5px solid #e5e5e5;border-radius:5px;padding:9px 12px;font-size:12.5px;color:#111;font-family:inherit">
<button onclick="sendChMsg()" style="width:36px;height:36px;background:#111;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0">➤</button>
</div>
</div>
</div>
</div>
<div class="ap" id="ap-uyeler">
<div class="adh">
<div><div class="aht">Üyeler</div><div class="ahs">1.284 toplam · 847 aktif bu ay</div></div>
<div class="aha" style="flex-wrap:wrap;gap:5px">
<button class="btn bou" onclick="om('add-uye')">+ Üye Ekle</button>
<button class="btn bou" onclick="om('add-member')">+ Personel Ekle</button>
<button class="btn bdk2" onclick="om('add-magaza-sahibi')">+ Mağaza Sahibi</button>
</div>
</div>
<div class="adtabs" id="uyeler-tabs">
<button class="adtab on" onclick="swt(this,'u-all')">Tüm Üyeler <span style="background:var(--bg3);color:var(--t3);font-size:9px;padding:1px 6px;border-radius:8px;margin-left:4px">1284</span></button>
<button class="adtab" onclick="swt(this,'u-per')">Teknik Personel <span style="background:var(--bg3);color:var(--t3);font-size:9px;padding:1px 6px;border-radius:8px;margin-left:4px">9</span></button>
<button class="adtab" onclick="swt(this,'u-yon')">Yönetim <span style="background:var(--bg3);color:var(--t3);font-size:9px;padding:1px 6px;border-radius:8px;margin-left:4px">3</span></button>
<button class="adtab" onclick="swt(this,'u-mag')">Mağaza Sahipleri <span style="background:var(--bg3);color:var(--t3);font-size:9px;padding:1px 6px;border-radius:8px;margin-left:4px">12</span></button>
<button class="adtab" onclick="swt(this,'u-uye')">Üyeler <span style="background:var(--bg3);color:var(--t3);font-size:9px;padding:1px 6px;border-radius:8px;margin-left:4px">1260</span></button>
</div>
<div class="adb">
<div style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap">
<div class="tbl-search" style="flex:1;min-width:200px"><span>🔍</span><input type="text" placeholder="Ad, e-posta veya telefon ara..." oninput="filterTbl('u-all-tbody',this.value)"></div>
<select class="fi" style="width:auto;padding:6px 10px;font-size:12px"><option>Tüm durumlar</option><option>Aktif</option><option>Pasif</option></select>
<button class="btn bou">Dışa aktar</button>
</div>
<div id="u-all" class="tbc on">
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th></th><th>Ad Soyad</th><th>Rol</th><th>Kayıt</th><th>Son giriş</th><th>Kupon</th><th>Durum</th><th></th></tr></thead>
<tbody id="u-all-tbody">
<tr data-s="ahmet kaya üye"><td><div class="pav" style="width:26px;height:26px;background:var(--bg2);color:var(--t2);font-size:10px">AK</div></td><td><div style="font-size:12.5px;font-weight:500">Ahmet Kaya</div><div style="font-size:10.5px;color:var(--t3)">ahmet@gmail.com</div></td><td><span class="cp">Üye</span></td><td style="color:var(--t2)">01 Oca 2025</td><td style="color:var(--t2)">Bugün</td><td>8</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
<tr data-s="kemal usta teknik personel elektrik"><td><div class="pav" style="width:26px;height:26px;background:#EFF6FF;color:#1D4ED8;font-size:10px">KU</div></td><td><div style="font-size:12.5px;font-weight:500">Kemal Usta</div><div style="font-size:10.5px;color:var(--t3)">kemal@mars.com</div></td><td><span class="cp" style="background:#EFF6FF;color:#1D4ED8;border:.5px solid #BFDBFE">Teknik Personel</span></td><td style="color:var(--t2)">15 Mar 2024</td><td style="color:var(--t2)">Bugün</td><td>—</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
<tr data-s="mehmet ayhan mağaza sahibi burger lab"><td><div class="pav" style="width:26px;height:26px;background:#FEF3C7;color:#92400E;font-size:9px">MAY</div></td><td><div style="font-size:12.5px;font-weight:500">Mehmet Ayhan</div><div style="font-size:10.5px;color:var(--t3)">m@burgerlab.com</div></td><td><span class="cp" style="background:var(--ylw-bg);color:var(--ylw);border:.5px solid var(--ylw-bd)">Mağaza Sahibi</span></td><td style="color:var(--t2)">20 Haz 2024</td><td style="color:var(--t2)">Dün</td><td>—</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
<tr data-s="fatma yıldız üye"><td><div class="pav" style="width:26px;height:26px;background:var(--bg2);color:var(--t2);font-size:10px">FY</div></td><td><div style="font-size:12.5px;font-weight:500">Fatma Yıldız</div><div style="font-size:10.5px;color:var(--t3)">fatma@email.com</div></td><td><span class="cp">Üye</span></td><td style="color:var(--t2)">12 Şub 2026</td><td style="color:var(--t2)">3 gün önce</td><td>12</td><td><span class="badge by">Pasif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
<tr data-s="ali yılmaz yönetici"><td><div class="pav" style="width:26px;height:26px;background:var(--red-bg);color:var(--red);font-size:10px">AY</div></td><td><div style="font-size:12.5px;font-weight:500">Ali Yılmaz</div><div style="font-size:10.5px;color:var(--t3)">ali@mars.com</div></td><td><span class="cp" style="background:var(--red-bg);color:var(--red);border:.5px solid var(--red-bd)">Yönetici</span></td><td style="color:var(--t2)">01 Jan 2024</td><td style="color:var(--t2)">Bugün</td><td>—</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
</tbody>
</table></div></div>
</div>
<div id="u-per" class="tbc">
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th></th><th>Ad</th><th>Departman</th><th>Telefon</th><th>Ticket</th><th>Durum</th><th></th></tr></thead>
<tbody>
<tr><td><div class="pav" style="width:26px;height:26px;background:#EFF6FF;color:#1D4ED8;font-size:10px">KU</div></td><td style="font-weight:500">Kemal Usta</td><td><span class="cp">Elektrik</span></td><td style="color:var(--t2)">0555 111 22 33</td><td>47</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">Düzenle</button><button class="btn brd bsm">Sil</button></div></td></tr>
<tr><td><div class="pav" style="width:26px;height:26px;background:#F0FDF4;color:#166534;font-size:10px">HK</div></td><td style="font-weight:500">Hasan Koç</td><td><span class="cp">Mekanik</span></td><td style="color:var(--t2)">0555 333 44 55</td><td>38</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">Düzenle</button><button class="btn brd bsm">Sil</button></div></td></tr>
<tr><td><div class="pav" style="width:26px;height:26px;background:#F3E8FF;color:#6B21A8;font-size:10px">ZK</div></td><td style="font-weight:500">Zeynep Kaya</td><td><span class="cp">Temizlik</span></td><td style="color:var(--t2)">0555 555 66 77</td><td>5</td><td><span class="badge bg">Aktif</span></td><td><div style="display:flex;gap:4px"><button class="btn bou bsm" onclick="om('add-member')">Düzenle</button><button class="btn brd bsm">Sil</button></div></td></tr>
</tbody>
</table></div></div>
</div>
<div id="u-yon" class="tbc">
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th></th><th>Ad</th><th>Rol</th><th>E-posta</th><th>Son giriş</th><th>Durum</th><th></th></tr></thead>
<tbody>
<tr><td><div class="pav" style="width:26px;height:26px;background:var(--red-bg);color:var(--red);font-size:10px">AY</div></td><td style="font-weight:500">Ali Yılmaz</td><td><span class="cp">Süper Admin</span></td><td style="color:var(--t2)">ali@mars.com</td><td style="color:var(--t2)">Bugün</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Düzenle</button></td></tr>
<tr><td><div class="pav" style="width:26px;height:26px;background:var(--ylw-bg);color:var(--ylw);font-size:10px">BK</div></td><td style="font-weight:500">Banu Koç</td><td><span class="cp">Yönetici</span></td><td style="color:var(--t2)">banu@mars.com</td><td style="color:var(--t2)">Dün</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Düzenle</button></td></tr>
<tr><td><div class="pav" style="width:26px;height:26px;background:var(--bg2);color:var(--t2);font-size:10px">TS</div></td><td style="font-weight:500">Taner Sert</td><td><span class="cp">Yönetici</span></td><td style="color:var(--t2)">taner@mars.com</td><td style="color:var(--t2)">3 gün önce</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Düzenle</button></td></tr>
</tbody>
</table></div></div>
</div>
<div id="u-mag" class="tbc">
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th></th><th>Ad</th><th>Mağaza</th><th>E-posta</th><th>Kampanya</th><th>Durum</th><th></th></tr></thead>
<tbody>
<tr><td><div class="pav" style="width:26px;height:26px;background:#FEF3C7;color:#92400E;font-size:9px">MAY</div></td><td style="font-weight:500">Mehmet Ayhan</td><td>Burger Lab</td><td style="color:var(--t2)">m@burgerlab.com</td><td>3 aktif</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
<tr><td><div class="pav" style="width:26px;height:26px;background:var(--bg2);color:var(--t2);font-size:9px">SB</div></td><td style="font-weight:500">Selin Börek</td><td>Güzellik Merkezi</td><td style="color:var(--t2)">s@guzellk.com</td><td>1 aktif</td><td><span class="badge bg">Aktif</span></td><td><button class="btn bou bsm">Detay</button></td></tr>
</tbody>
</table></div></div>
</div>
<div id="u-uye" class="tbc">
<div class="wg" style="padding:20px;text-align:center;color:var(--t3)">1.260 üye listeleniyor. Arama kutusunu kullanarak filtreleyin.</div>
</div>
</div></div>
<div class="ap" id="ap-kamps">
<div class="adh">
<div><div class="aht">Kampanyalar</div><div class="ahs">8 aktif · 3 onay bekliyor</div></div>
<div class="aha"><button class="btn bdk2" onclick="om('yeni-kamp')">+ Yeni Kampanya</button></div>
</div>
<div class="adtabs" id="kamps-tabs">
<button class="adtab" onclick="swt(this,'k-tum')">Tümü (11)</button>
<button class="adtab on" onclick="swt(this,'k-bkl')">Onay Bekliyor <span style="background:var(--ylw);color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;margin-left:3px">3</span></button>
<button class="adtab" onclick="swt(this,'k-yyn')">Yayında (8)</button>
<button class="adtab" onclick="swt(this,'k-red')">Reddedildi (2)</button>
<button class="adtab" onclick="swt(this,'k-son')">Sona Erdi</button>
</div>
<div class="adb">
<div id="k-tum" class="tbc"><div style="color:var(--t3);text-align:center;padding:32px;font-size:13px">Tüm kampanyalar bu sekmede listelenir.</div></div>
<div id="k-bkl" class="tbc on">
<!-- Approval form -->
<div class="apform on" id="afm1" style="margin-bottom:10px">
<div class="apfh">
<div><div style="font-size:12.5px;font-weight:500;color:var(--t1)">☕ Kahve Dünyası — Hafta sonu %25</div><div style="font-size:10.5px;color:var(--t3)">Onay detaylarını belirleyin</div></div>
<button style="font-size:11px;color:var(--t2);background:none;border:none;cursor:pointer;font-family:inherit" onclick="document.getElementById('afm1').classList.remove('on')">Kapat ✕</button>
</div>
<div class="apfb">
<div class="apins">
<div class="apin"><label>Başlangıç</label><input type="date" value="2026-06-14"></div>
<div class="apin"><label>Bitiş</label><input type="date" value="2026-06-16"></div>
<div class="apin"><label>Max kupon</label><input type="number" value="100"></div>
</div>
<div style="display:flex;gap:7px;justify-content:flex-end">
<button class="btn brd" onclick="document.getElementById('afm1').classList.remove('on')">✕ Reddet</button>
<button class="btn bdk2" onclick="document.getElementById('afm1').classList.remove('on');alert('Kampanya onaylandı ve yayına alındı!')">✓ Onayla & Yayınla</button>
</div>
</div>
</div>
<div class="wg">
<div class="car"><div class="cari">☕</div><div style="flex:1;min-width:0"><div class="carn">Kahve Dünyası — Hafta sonu %25</div><div class="carm">%25 indirim · Tüm ürünler · 2 saat önce</div></div><div class="cara"><button class="btn bgn bsm" onclick="document.getElementById('afm1').classList.add('on')">✓ Onayla</button><button class="btn bou bsm">✏</button><button class="btn brd bsm">✕</button></div></div>
<div class="car"><div class="cari">🍕</div><div style="flex:1;min-width:0"><div class="carn">Pizza Mia — Öğle menüsü</div><div class="carm">%15 indirim · Öğle menüsü · 5 saat önce</div></div><div class="cara"><button class="btn bgn bsm">✓ Onayla</button><button class="btn bou bsm">✏</button><button class="btn brd bsm">✕</button></div></div>
<div class="car"><div class="cari">💄</div><div style="flex:1;min-width:0"><div class="carn">Güzellik Merkezi — Bakım paketi</div><div class="carm">%40 indirim · Cilt bakım · Dün</div></div><div class="cara"><button class="btn bgn bsm">✓ Onayla</button><button class="btn bou bsm">✏</button><button class="btn brd bsm">✕</button></div></div>
</div>
</div>
<div id="k-yyn" class="tbc">
<div class="wg">
<div class="car"><div class="cari">☕</div><div style="flex:1;min-width:0"><div class="carn">Kahve Dünyası — %15 indirim</div><div class="carm">14–16 Haz · 100 kupon · 42 kullanıldı</div></div><div class="cara"><span class="badge bg">Yayında</span><button class="btn bou bsm">Detay</button></div></div>
<div class="car"><div class="cari">🍔</div><div style="flex:1;min-width:0"><div class="carn">Burger Lab — 2 al 1 öde</div><div class="carm">Bugün son · 73/80 kupon kullanıldı</div></div><div class="cara"><span class="badge bg">Yayında</span><button class="btn bou bsm">Detay</button></div></div>
<div class="car"><div class="cari">🛍️</div><div style="flex:1;min-width:0"><div class="carn">Macrocenter — %30 indirim</div><div class="carm">3 gün kaldı · 103/150 kupon kullanıldı</div></div><div class="cara"><span class="badge bg">Yayında</span><button class="btn bou bsm">Detay</button></div></div>
</div>
</div>
<div id="k-red" class="tbc"><div style="color:var(--t3);text-align:center;padding:32px;font-size:13px">Reddedilen kampanyalar burada listelenir.</div></div>
<div id="k-son" class="tbc"><div style="color:var(--t3);text-align:center;padding:32px;font-size:13px">Sona eren kampanyalar burada listelenir.</div></div>
</div></div>
<div class="ap" id="ap-kupon">
<div class="adh">
<div><div class="aht">Kuponlar</div><div class="ahs">247 bu hafta · 1.203 toplam</div></div>
<div class="aha"><button class="btn bou">Dışa aktar</button></div>
</div>
<div class="adtabs" id="kupon-tabs">
<button class="adtab on" onclick="swt(this,'kp-all')">Tümü</button>
<button class="adtab" onclick="swt(this,'kp-akt')">Aktif (156)</button>
<button class="adtab" onclick="swt(this,'kp-kul')">Kullanıldı</button>
<button class="adtab" onclick="swt(this,'kp-sur')">Süresi Doldu</button>
</div>
<div class="adb">
<div class="kg" style="margin-bottom:12px">
<div class="kc"><div class="kt"><div class="ki">📱</div><span class="ktr" style="color:var(--grn)">↑ +34</span></div><div class="kn">247</div><div class="kl">Bu hafta kullanılan</div></div>
<div class="kc"><div class="kt"><div class="ki">🎟️</div></div><div class="kn">156</div><div class="kl">Aktif kupon</div></div>
<div class="kc"><div class="kt"><div class="ki">📊</div></div><div class="kn">%78</div><div class="kl">Kullanım oranı</div></div>
<div class="kc"><div class="kt"><div class="ki">⏰</div><span class="ktr" style="color:var(--red)">23</span></div><div class="kn">23</div><div class="kl">Bugün son</div></div>
</div>
<div id="kp-all" class="tbc on">
<div style="display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap">
<div class="tbl-search" style="flex:1;min-width:160px"><span>🔍</span><input type="text" placeholder="Kod, üye veya kampanya..." oninput="filterTbl('kupon-tbody',this.value)"></div>
<select class="fi" style="width:auto;padding:6px 10px;font-size:12px" onchange="filterKuponByCamp(this.value)">
<option value="">Tüm kampanyalar</option>
<option>Kahve Dünyası %15</option>
<option>Burger Lab 2al1öde</option>
<option>Macrocenter %30</option>
<option>Watsons %10</option>
</select>
<select class="fi" style="width:auto;padding:6px 10px;font-size:12px"><option>Tüm tarihler</option><option>Bugün</option><option>Bu hafta</option><option>Bu ay</option></select>
</div>
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th>Kupon Kodu</th><th>Kampanya / Sıra</th><th>Üye</th><th>Oluşturma</th><th>Tür</th><th>Durum</th><th></th></tr></thead>
<tbody id="kupon-tbody">
<tr><td style="font-family:monospace;font-size:12px;font-weight:500">MRS-K8X4-2026</td>
<td>Kahve Dünyası %15<div style="font-size:10px;color:var(--t3)">23 / 100</div></td>
<td style="color:var(--t2)">Ahmet Kaya</td><td style="color:var(--t3)">Bugün 09:15</td>
<td><span class="badge bgr">QR</span></td><td><span class="badge bg">Kullanıldı</span></td>
<td><button class="btn bou bsm">Detay</button></td></tr>
<tr><td style="font-family:monospace;font-size:12px;font-weight:500">MRS-B7Z9-2026</td>
<td>Burger Lab 2al1öde<div style="font-size:10px;color:var(--t3)">74 / 80</div></td>
<td style="color:var(--t2)">Fatma Yıldız</td><td style="color:var(--t3)">Bugün 10:30</td>
<td><span class="badge bgr">QR</span></td><td><span class="badge bb">Aktif</span></td>
<td><button class="btn bou bsm">Detay</button></td></tr>
<tr><td style="font-family:monospace;font-size:12px;font-weight:500">MRS-W3M1-2026</td>
<td>Macrocenter %30<div style="font-size:10px;color:var(--t3)">104 / 150</div></td>
<td style="color:var(--t2)">Mehmet Çelik</td><td style="color:var(--t3)">Dün 14:22</td>
<td><span class="badge bgr">Kod</span></td><td><span class="badge bb">Aktif</span></td>
<td><button class="btn bou bsm">Detay</button></td></tr>
<tr><td style="font-family:monospace;font-size:12px;font-weight:500">MRS-P5T8-2026</td>
<td>Watsons %10<div style="font-size:10px;color:var(--t3)">12 / 120</div></td>
<td style="color:var(--t2)">Ayşe Güler</td><td style="color:var(--t3)">2 gün önce</td>
<td><span class="badge bgr">QR</span></td><td><span class="badge bgr">Süresi doldu</span></td>
<td><button class="btn bou bsm">Detay</button></td></tr>
</tbody>
</table></div></div>
</div>
<div id="kp-akt" class="tbc"><div style="color:var(--t3);text-align:center;padding:32px">156 aktif kupon</div></div>
<div id="kp-kul" class="tbc"><div style="color:var(--t3);text-align:center;padding:32px">Kullanılan kuponlar</div></div>
<div id="kp-sur" class="tbc"><div style="color:var(--t3);text-align:center;padding:32px">Süresi dolan kuponlar</div></div>
</div></div>
<div class="ap" id="ap-rapor">
<div class="adh">
<div><div class="aht">Raporlar</div><div class="ahs">Haziran 2026 · Güncel</div></div>
<div class="aha"><button class="btn bou">📅 Dönem seç</button><button class="btn bdk2">⬇ Dışa aktar</button></div>
</div>
<div class="adtabs" id="rapor-tabs">
<button class="adtab on" onclick="swt(this,'rp-gen')">Genel</button>
<button class="adtab" onclick="swt(this,'rp-kamp')">Kampanya</button>
<button class="adtab" onclick="swt(this,'rp-pers')">Personel</button>
<button class="adtab" onclick="swt(this,'rp-tkt')">Ticket</button>
</div>
<div class="adb">
<div id="rp-gen" class="tbc on">
<div class="kg" style="margin-bottom:12px">
<div class="kc"><div class="kt"><div class="ki">👥</div><span class="ktr" style="color:var(--grn)">↑ +12</span></div><div class="kn">1.284</div><div class="kl">Toplam üye</div></div>
<div class="kc"><div class="kt"><div class="ki">📱</div><span class="ktr" style="color:var(--grn)">↑ +34</span></div><div class="kn">247</div><div class="kl">Kupon kullanımı (hafta)</div></div>
<div class="kc"><div class="kt"><div class="ki">📊</div></div><div class="kn">%78</div><div class="kl">Kupon kullanım oranı</div></div>
<div class="kc"><div class="kt"><div class="ki">⚡</div><span class="ktr" style="color:var(--grn)">↓ 0.3s</span></div><div class="kn">1.2s</div><div class="kl">Ort. ticket çözüm</div></div>
</div>
<div class="g2" style="margin-bottom:10px">
<div class="wg">
<div class="wgh"><span class="wgt">Yaş grupları</span></div>
<div style="padding:12px 14px"><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>18–25</span><span style="font-weight:500">22%</span></div><div class="prog-track"><div class="prog-fill" style="width:22%;background:#6366f1"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>26–35</span><span style="font-weight:500">38%</span></div><div class="prog-track"><div class="prog-fill" style="width:38%;background:#0ea5e9"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>36–45</span><span style="font-weight:500">24%</span></div><div class="prog-track"><div class="prog-fill" style="width:24%;background:#10b981"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>46–55</span><span style="font-weight:500">11%</span></div><div class="prog-track"><div class="prog-fill" style="width:11%;background:#f59e0b"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>55+</span><span style="font-weight:500">5%</span></div><div class="prog-track"><div class="prog-fill" style="width:5%;background:#ef4444"></div></div></div>
</div>
</div>
<div class="wg">
<div class="wgh"><span class="wgt">Cinsiyet dağılımı</span></div>
<div style="padding:14px;display:flex;align-items:center;gap:16px">
<svg viewBox="0 0 120 120" style="width:90px;height:90px;flex-shrink:0">
<circle cx="60" cy="60" r="48" fill="none" stroke="#f0f0f0" stroke-width="16"/>
<circle cx="60" cy="60" r="48" fill="none" stroke="#111" stroke-width="16" stroke-dasharray="181 120" stroke-dashoffset="30"/>
<circle cx="60" cy="60" r="48" fill="none" stroke="#0ea5e9" stroke-width="16" stroke-dasharray="90 211" stroke-dashoffset="-151"/>
<text x="60" y="56" text-anchor="middle" font-size="17" font-weight="500" fill="#111">%60</text>
<text x="60" y="70" text-anchor="middle" font-size="9" fill="#999">Kadın</text>
</svg>
<div style="flex:1"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><div style="display:flex;align-items:center;gap:7px"><div style="width:8px;height:8px;border-radius:50%;background:#111;border:.5px solid var(--bd)"></div><span style="font-size:12px">Kadın</span></div><span style="font-size:12px;font-weight:500">60%</span></div><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><div style="display:flex;align-items:center;gap:7px"><div style="width:8px;height:8px;border-radius:50%;background:#0ea5e9;border:.5px solid var(--bd)"></div><span style="font-size:12px">Erkek</span></div><span style="font-size:12px;font-weight:500">38%</span></div><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><div style="display:flex;align-items:center;gap:7px"><div style="width:8px;height:8px;border-radius:50%;background:#f0f0f0;border:.5px solid var(--bd)"></div><span style="font-size:12px">Belirtmedi</span></div><span style="font-size:12px;font-weight:500">2%</span></div>
</div>
</div>
</div>
</div>
<div class="wg">
<div class="wgh"><span class="wgt">Haftalık kayıt trendi</span></div>
<div class="bch"><div class="br2"><span class="blbl">Pzt</span><div class="btrk"><div class="bfil" style="width:45%"></div></div><span class="bvl">9</span></div><div class="br2"><span class="blbl">Sal</span><div class="btrk"><div class="bfil" style="width:30%"></div></div><span class="bvl">6</span></div><div class="br2"><span class="blbl">Çar</span><div class="btrk"><div class="bfil" style="width:55%"></div></div><span class="bvl">11</span></div><div class="br2"><span class="blbl">Per</span><div class="btrk"><div class="bfil" style="width:40%"></div></div><span class="bvl">8</span></div><div class="br2"><span class="blbl">Cum</span><div class="btrk"><div class="bfil" style="width:100%"></div></div><span class="bvl">20</span></div><div class="br2"><span class="blbl">Cmt</span><div class="btrk"><div class="bfil" style="width:75%"></div></div><span class="bvl">15</span></div>
</div>
</div>
</div>
<div id="rp-kamp" class="tbc">
<div class="kg" style="margin-bottom:12px">
<div class="kc"><div class="kn">8</div><div class="kl">Aktif kampanya</div></div>
<div class="kc"><div class="kn">1.203</div><div class="kl">Toplam kupon</div></div>
<div class="kc"><div class="kn">%78</div><div class="kl">Kullanım oranı</div></div>
<div class="kc"><div class="kn">2.4</div><div class="kl">Kişi başı kampanya</div></div>
</div>
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th>Kampanya</th><th>Oluşturulan</th><th>Kullanılan</th><th>Oran</th><th>Kadın</th><th>Erkek</th><th>Ort. Yaş</th></tr></thead>
<tbody><tr><td style="font-weight:500">%15 indirim</td><td>100</td><td>42</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:42%"></div></div> 42%</td><td style="color:var(--t2)">%65</td><td style="color:var(--t2)">%35</td><td style="color:var(--t2)">29</td></tr><tr><td style="font-weight:500">2al1öde</td><td>80</td><td>73</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:91%"></div></div> 91%</td><td style="color:var(--t2)">%48</td><td style="color:var(--t2)">%52</td><td style="color:var(--t2)">26</td></tr><tr><td style="font-weight:500">%30 indirim</td><td>150</td><td>103</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:69%"></div></div> 69%</td><td style="color:var(--t2)">%55</td><td style="color:var(--t2)">%45</td><td style="color:var(--t2)">31</td></tr><tr><td style="font-weight:500">Flash %25</td><td>60</td><td>60</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:100%"></div></div> 100%</td><td style="color:var(--t2)">%70</td><td style="color:var(--t2)">%30</td><td style="color:var(--t2)">27</td></tr>
</tbody>
</table></div></div>
</div>
<div id="rp-pers" class="tbc">
<div class="kg" style="margin-bottom:12px">
<div class="kc"><div class="kn">9</div><div class="kl">Toplam personel</div></div>
<div class="kc"><div class="kn">156</div><div class="kl">Bu ay ticket</div></div>
<div class="kc"><div class="kn">1.4s</div><div class="kl">Ort. çözüm</div></div>
<div class="kc"><div class="kn">%94</div><div class="kl">Tamamlama oranı</div></div>
</div>
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th>Personel</th><th>Dept.</th><th>Çalışma</th><th>Ticket</th><th>Ort. Süre</th><th>Tamamlama</th></tr></thead>
<tbody><tr><td><div style="display:flex;align-items:center;gap:6px"><div class="pav" style="width:22px;height:22px;background:#EFF6FF;color:#1D4ED8;font-size:8px">KU</div>Kemal Usta</div></td><td><span class="cp">Elektrik</span></td><td>22</td><td>47</td><td style="color:var(--grn)">1.2s</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:96%"></div></div> 96%</td></tr><tr><td><div style="display:flex;align-items:center;gap:6px"><div class="pav" style="width:22px;height:22px;background:#F0FDF4;color:#166534;font-size:8px">HK</div>Hasan Koç</div></td><td><span class="cp">Mekanik</span></td><td>21</td><td>38</td><td style="color:var(--ylw)">2.4s</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:88%"></div></div> 88%</td></tr><tr><td><div style="display:flex;align-items:center;gap:6px"><div class="pav" style="width:22px;height:22px;background:#F0FDF4;color:#166534;font-size:8px">OD</div>Osman Demir</div></td><td><span class="cp">Mekanik</span></td><td>20</td><td>31</td><td style="color:var(--grn)">1.8s</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:93%"></div></div> 93%</td></tr><tr><td><div style="display:flex;align-items:center;gap:6px"><div class="pav" style="width:22px;height:22px;background:#EFF6FF;color:#1D4ED8;font-size:8px">MA</div>Murat Aydın</div></td><td><span class="cp">Elektrik</span></td><td>22</td><td>29</td><td style="color:var(--grn)">1.5s</td><td><div class="prog-track" style="width:60px;display:inline-block"><div class="prog-fill" style="width:91%"></div></div> 91%</td></tr>
</tbody>
</table></div></div>
</div>
<div id="rp-tkt" class="tbc">
<div class="kg" style="margin-bottom:12px">
<div class="kc"><div class="kn">168</div><div class="kl">Bu ay açılan</div></div>
<div class="kc"><div class="kn">156</div><div class="kl">Çözülen<div style="font-size:9.5px;color:var(--grn);margin-top:2px">%93 çözüm oranı</div></div></div>
<div class="kc"><div class="kn">4</div><div class="kl">Açık / bekleyen</div></div>
<div class="kc"><div class="kn">1.4s</div><div class="kl">Ort. çözüm süresi</div></div>
</div>
<div class="g2">
<div class="wg"><div class="wgh"><span class="wgt">Kategori dağılımı</span></div><div style="padding:12px 14px"><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>Elektrik & Aydınlatma</span><span style="font-weight:500">48%</span></div><div class="prog-track"><div class="prog-fill" style="width:48%;background:var(--d)"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>Mekanik & Klima</span><span style="font-weight:500">32%</span></div><div class="prog-track"><div class="prog-fill" style="width:32%;background:#0ea5e9"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>Temizlik</span><span style="font-weight:500">12%</span></div><div class="prog-track"><div class="prog-fill" style="width:12%;background:#10b981"></div></div></div><div style="margin-bottom:9px"><div style="display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:4px"><span>Diğer</span><span style="font-weight:500">8%</span></div><div class="prog-track"><div class="prog-fill" style="width:8%;background:#f59e0b"></div></div></div>
</div></div>
<div class="wg"><div class="wgh"><span class="wgt">Çözüm lider tablosu</span></div><div class="pr-row"><div class="pav" style="background:#EFF6FF;color:#1D4ED8">KU</div><div class="pn">Kemal Usta</div><div style="font-size:12px;font-weight:500">47 ticket</div><div style="font-size:10.5px;color:var(--grn);margin-left:6px">1.2s ort.</div></div><div class="pr-row"><div class="pav" style="background:#F0FDF4;color:#166534">HK</div><div class="pn">Hasan Koç</div><div style="font-size:12px;font-weight:500">38 ticket</div><div style="font-size:10.5px;color:var(--ylw);margin-left:6px">2.4s ort.</div></div><div class="pr-row"><div class="pav" style="background:#F0FDF4;color:#166534">OD</div><div class="pn">Osman Demir</div><div style="font-size:12px;font-weight:500">31 ticket</div><div style="font-size:10.5px;color:var(--grn);margin-left:6px">1.8s ort.</div></div><div class="pr-row"><div class="pav" style="background:#EFF6FF;color:#1D4ED8">MA</div><div class="pn">Murat Aydın</div><div style="font-size:12px;font-weight:500">29 ticket</div><div style="font-size:10.5px;color:var(--grn);margin-left:6px">1.5s ort.</div></div>
</div>
</div>
</div>
</div></div>
<div class="ap" id="ap-mesaj">
<div class="adh">
<div><div class="aht">Toplu Mesaj & Push Bildirim</div><div class="ahs">1.284 üye · 1.021 bildirim izni</div></div>
</div>
<div class="adtabs" id="mesaj-tabs">
<button class="adtab on" onclick="swt(this,'ms-push')">📱 Push Bildirim</button>
<button class="adtab" onclick="swt(this,'ms-msg')">💬 Uygulama Mesajı</button>
<button class="adtab" onclick="swt(this,'ms-gec')">📋 Geçmiş</button>
</div>
<div class="adb">
<div id="ms-push" class="tbc on">
<div class="g2">
<div class="wg">
<div class="wgh"><span class="wgt">Push Bildirim Oluştur</span></div>
<div style="padding:14px">
<div class="fg"><label class="fl2">Başlık *</label><input class="fi" placeholder="Bildirim başlığı (maks. 50 karakter)" maxlength="50"></div>
<div class="fg"><label class="fl2">Mesaj *</label><textarea class="fi" rows="3" placeholder="Bildirim metni (maks. 200 karakter)" maxlength="200"></textarea></div>
<div class="fg">
<label class="fl2">Kampanya ekle (opsiyonel)</label>
<select class="fi" id="push-camp-sel" onchange="toggleCampPreview()">
<option value="">— Kampanya seçme —</option>
<option value="kd">☕ Kahve Dünyası — %15</option>
<option value="bl">🍔 Burger Lab — 2al1öde</option>
<option value="mc">🛍️ Macrocenter — %30</option>
</select>
</div>
<div id="camp-preview" style="display:none;background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:10px;margin-bottom:13px">
<div style="font-size:10px;font-weight:500;color:var(--t3);margin-bottom:6px;text-transform:uppercase">Kampanya önizleme</div>
<div style="display:flex;align-items:center;gap:10px"><span style="font-size:22px">☕</span><div><div style="font-size:12.5px;font-weight:500">Kahve Dünyası — %15</div><div style="font-size:11px;color:var(--t3)">14–16 Haz · 100 kupon</div></div></div>
</div>
<div class="fg">
<label class="fl2">Hedef kitle</label>
<select class="fi">
<option>Tüm üyeler (1.284)</option>
<option>Bildirim izni verenler (1.021)</option>
<option>Aktif bu ay (847)</option>
<option>Kadınlar (771)</option>
<option>Erkekler (487)</option>
<option>18–35 yaş (769)</option>
</select>
</div>
<div class="fg">
<label class="fl2">Gönderim zamanı</label>
<div style="display:flex;gap:8px">
<select class="fi" style="flex:1"><option>Hemen gönder</option><option>Zamanla</option></select>
<input class="fi" type="datetime-local" style="flex:1">
</div>
</div>
<div style="background:var(--blu-bg);border:.5px solid var(--blu-bd);border-radius:5px;padding:10px;margin-bottom:14px;font-size:12px;color:var(--blu)">📊 Tahmini erişim: <b>1.021 cihaz</b> · 263 üye bildirim iznini kapatmış</div>
<button class="bsub" onclick="alert('Bildirim gönderildi! 1.021 cihaza ulaşıldı.')">📤 Gönder</button>
</div>
</div>
<div>
<div class="wg" style="margin-bottom:10px">
<div class="wgh"><span class="wgt">Mobil önizleme</span></div>
<div style="padding:20px;display:flex;justify-content:center">
<div style="width:240px;background:#1c1c1e;border-radius:20px;padding:16px">
<div style="width:60px;height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin:0 auto 12px"></div>
<div style="background:rgba(255,255,255,.95);border-radius:10px;padding:10px 12px">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
<div style="width:22px;height:22px;background:#111;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff">M</div>
<div><div style="font-size:10px;font-weight:500;color:#111">Mars Kocaeli</div><div style="font-size:9px;color:#999">şimdi</div></div>
</div>
<div style="font-size:12px;font-weight:500;color:#111;margin-bottom:3px">Bugün kafelerde %20!</div>
<div style="font-size:11px;color:#555">Üyelere özel indirim sizi bekliyor.</div>
</div>
</div>
</div>
</div>
<div class="wg">
<div class="wgh"><span class="wgt">Bildirim izin istatistikleri</span></div>
<div style="padding:12px 14px">
<div style="margin-bottom:8px"><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px"><span>iOS</span><span style="font-weight:500">524 üye</span></div><div class="prog-track"><div class="prog-fill" style="width:51%;background:#0ea5e9"></div></div></div>
<div style="margin-bottom:8px"><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px"><span>Android</span><span style="font-weight:500">497 üye</span></div><div class="prog-track"><div class="prog-fill" style="width:49%"></div></div></div>
<div style="font-size:11px;color:var(--t3);margin-top:10px">263 üye bildirim iznini iptal etmiş</div>
</div>
</div>
</div>
</div>
</div>
<div id="ms-msg" class="tbc">
<div style="max-width:500px">
<div class="wg">
<div class="wgh"><span class="wgt">Uygulama İçi Toplu Mesaj</span></div>
<div style="padding:14px">
<div class="fg"><label class="fl2">Başlık</label><input class="fi" placeholder="Duyuru başlığı"></div>
<div class="fg"><label class="fl2">Mesaj</label><textarea class="fi" rows="4" placeholder="Mesaj içeriği..."></textarea></div>
<div class="fg"><label class="fl2">Tür</label><select class="fi"><option>Yönetim duyurusu</option><option>Teknik bildirim</option><option>Kampanya bildirimi</option></select></div>
<div class="fg"><label class="fl2">Hedef</label><select class="fi"><option>Tüm üyeler</option><option>Teknik personel</option><option>Mağaza sahipleri</option></select></div>
<button class="bsub" onclick="alert('Mesaj gönderildi!')">Gönder</button>
</div>
</div>
</div>
</div>
<div id="ms-gec" class="tbc">
<div class="wg"><div class="tw"><table class="dtbl">
<thead><tr><th>Başlık</th><th>Tür</th><th>Hedef</th><th>Ulaşan</th><th>Açılma</th><th>Tarih</th></tr></thead>
<tbody>
<tr><td style="font-weight:500">Flash kampanya — Starbucks</td><td><span class="cp">Push</span></td><td>1.021</td><td style="color:var(--grn)">1.018</td><td>%72</td><td style="color:var(--t3)">Dün 14:00</td></tr>
<tr><td style="font-weight:500">Hafta sonu etkinliği</td><td><span class="cp">Mesaj</span></td><td>1.284</td><td style="color:var(--grn)">1.284</td><td>%58</td><td style="color:var(--t3)">2 gün önce</td></tr>
<tr><td style="font-weight:500">Macrocenter %30 indirim</td><td><span class="cp">Push</span></td><td>847</td><td style="color:var(--grn)">845</td><td>%81</td><td style="color:var(--t3)">3 gün önce</td></tr>
</tbody>
</table></div></div>
</div>
</div></div>
<div class="ap" id="ap-ayar">
<div class="adh">
<div><div class="aht">Ayarlar</div><div class="ahs">Sistem geneli yapılandırma</div></div>
<div class="aha"><button class="btn bdk2" onclick="alert('Tüm ayarlar kaydedildi!')">💾 Kaydet</button></div>
</div>
<div class="adtabs" id="ayar-tabs">
<button class="adtab on" onclick="swt(this,'ay-site')">🌐 Site</button>
<button class="adtab" onclick="swt(this,'ay-kamp')">🏷️ Kampanya</button>
<button class="adtab" onclick="swt(this,'ay-ticket')">🎫 Ticket</button>
<button class="adtab" onclick="swt(this,'ay-uye')">👤 Üyelik</button>
<button class="adtab" onclick="swt(this,'ay-bildirim')">🔔 Bildirim</button>
<button class="adtab" onclick="swt(this,'ay-sistem')">⚙️ Sistem</button>
</div>
<div class="adb">
<!-- SITE AYARLARI -->
<div id="ay-site" class="tbc on">
<div class="g2">
<div class="wg"><div class="wgh"><span class="wgt">Ofis özellikleri</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Randevu al butonu</div><div class="tog-sub">Ofis modalinde görünür</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Ofise mesaj at</div><div class="tog-sub">Üyeler doğrudan mesaj gönderebilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Ofis arama</div><div class="tog-sub">Ziyaretçiler ofis arayabilir</div></div></div></div></div>
<div class="wg"><div class="wgh"><span class="wgt">Cadde & mağaza özellikleri</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Rezervasyon yap</div><div class="tog-sub">Mağaza için masa rezervasyonu</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Mağazaya mesaj at</div><div class="tog-sub">Üyeler mağazalara mesaj gönderebilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Mağaza modalinde kampanya</div><div class="tog-sub">Aktif kampanyalar mağaza detayında görünür</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Cadde sayfası herkese açık</div><div class="tog-sub">Giriş yapmadan görüntülenebilir</div></div></div></div></div>
<div class="wg"><div class="wgh"><span class="wgt">Genel görünürlük</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Kampanya sayfası herkese açık</div><div class="tog-sub">Giriş yapmadan kampanya listesi görünür</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Ofis rehberi herkese açık</div><div class="tog-sub">Ziyaretçiler rehbere bakabilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Ana sayfa istatistikleri</div><div class="tog-sub">Hero kısımda sayılar görüntülenir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Bakım modu</div><div class="tog-sub">Site bakım sayfası gösterir</div></div></div></div></div>
<div class="wg"><div class="wgh"><span class="wgt">Üye paneli özellikleri</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">QR kupon görüntüleme</div><div class="tog-sub">Üye QR kuponlarını görebilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Ticket açma</div><div class="tog-sub">Üyeler destek talebi oluşturabilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Profil düzenleme</div><div class="tog-sub">Üyeler kendi bilgilerini güncelleyebilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Bildirim tercihleri</div><div class="tog-sub">Üye bildirim ayarlarını yönetebilir</div></div></div></div></div>
</div>
</div>
<!-- KAMPANYA AYARLARI -->
<div id="ay-kamp" class="tbc">
<div class="g2">
<div class="wg"><div class="wgh"><span class="wgt">Kampanya türleri</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Flash kampanyalar</div><div class="tog-sub">Saatlik süreli kampanya oluşturulabilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Süreli kampanyalar</div><div class="tog-sub">Tarih aralıklı kampanya</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Sürekli kampanyalar</div><div class="tog-sub">Sınırsız süreli (♾)</div></div></div></div></div>
<div class="wg"><div class="wgh"><span class="wgt">QR & kupon ayarları</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">QR kod ile kullanım</div><div class="tog-sub">Kampanya QR üretir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Manuel kod girişi</div><div class="tog-sub">Kodu elle girerek kullanım</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Çok kullanımlık kupon</div><div class="tog-sub">Sürekli kampanyalarda tekrar kullanım</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Kupon geçerlilik süresi (saat)</div><div class="tog-sub">0 = süresiz</div></div></div>
<div class="fg" style="margin:0"><label class="fl2">Varsayılan kupon geçerlilik (saat)</label><input class="fi" type="number" value="48" placeholder="48"></div>
</div>
</div>
<div class="wg"><div class="wgh"><span class="wgt">Onay akışı</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Onay zorunlu</div><div class="tog-sub">Mağaza kampanyaları yönetici onayı bekler</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Otomatik onay</div><div class="tog-sub">Belirli mağazalar için otomatik yayın</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Red bildirimi</div><div class="tog-sub">Reddedilince mağazaya bildirim</div></div></div></div></div>
</div>
</div>
<!-- TİCKET AYARLARI — Etiket yönetimi -->
<div id="ay-ticket" class="tbc">
<div class="g2">
<div class="wg">
<div class="wgh"><span class="wgt">Ticket kategorileri & etiketler</span><button class="btn bdk2 bsm" onclick="addTicketLabel()">+ Etiket Ekle</button></div>
<div id="ticket-labels" style="padding:10px 14px;display:flex;flex-direction:column;gap:7px">
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:16px">⚡</span><span style="flex:1;font-size:12.5px;font-weight:500">Elektrik & Aydınlatma</span>
<span class="badge bb bsm">Sistem</span>
<button class="btn bou bsm">✏</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:16px">🔧</span><span style="flex:1;font-size:12.5px;font-weight:500">Mekanik & Klima</span>
<span class="badge bb bsm">Sistem</span>
<button class="btn bou bsm">✏</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:16px">📶</span><span style="flex:1;font-size:12.5px;font-weight:500">İnternet & Ağ</span>
<span class="badge bb bsm">Sistem</span>
<button class="btn bou bsm">✏</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:16px">🔒</span><span style="flex:1;font-size:12.5px;font-weight:500">Kapı & Kilit</span>
<span class="badge bb bsm">Sistem</span>
<button class="btn bou bsm">✏</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:16px">🧹</span><span style="flex:1;font-size:12.5px;font-weight:500">Temizlik & Hijyen</span>
<span class="badge bg bsm">Özel</span>
<button class="btn bou bsm">✏</button>
<button class="btn brd bsm" onclick="this.parentElement.remove()">🗑</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:16px">🏗️</span><span style="flex:1;font-size:12.5px;font-weight:500">İnşaat & Tadilat</span>
<span class="badge bg bsm">Özel</span>
<button class="btn bou bsm">✏</button>
<button class="btn brd bsm" onclick="this.parentElement.remove()">🗑</button>
</div>
</div>
<div style="padding:8px 14px;font-size:11px;color:var(--t3);border-top:.5px solid var(--bd)">
<span class="badge bb bsm">Sistem</span> etiketler silinemez. <span class="badge bg bsm">Özel</span> etiketler eklenip çıkarılabilir.
</div>
</div>
<div class="wg"><div class="wgh"><span class="wgt">Ticket öncelik seviyeleri</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">🔴 Yüksek öncelik</div><div class="tog-sub">Kritik arızalar, acil durumlar</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">🟡 Normal öncelik</div><div class="tog-sub">Standart destek talepleri</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">🟢 Düşük öncelik</div><div class="tog-sub">Bilgi talepleri, iyileştirmeler</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Otomatik öncelik atama</div><div class="tog-sub">AI ile kategoriye göre öncelik ata</div></div></div></div></div>
</div>
</div>
<!-- ÜYELİK AYARLARI -->
<div id="ay-uye" class="tbc">
<div class="g2">
<div class="wg"><div class="wgh"><span class="wgt">Kayıt & doğrulama</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">E-posta doğrulaması</div><div class="tog-sub">Üyelik onayı için e-posta</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">SMS doğrulaması</div><div class="tog-sub">Telefon SMS ile doğrulanır</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">KVKK zorunlu</div><div class="tog-sub">Kayıt için KVKK onayı gerekli</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Üyelik sözleşmesi</div><div class="tog-sub">Kayıt için sözleşme onayı</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">İletişim izni göster</div><div class="tog-sub">Opsiyonel iletişim izni checkbox</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Yaş bilgisi iste</div><div class="tog-sub">Doğum yılı kayıt formunda</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Cinsiyet bilgisi iste</div><div class="tog-sub">Cinsiyet seçimi kayıt formunda</div></div></div></div></div>
<div class="wg"><div class="wgh"><span class="wgt">Üyelik kısıtlamaları</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Yeni üyeliğe izin ver</div><div class="tog-sub">Yeni üyelik kaydını aç/kapat</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Sosyal giriş</div><div class="tog-sub">Google/Apple ile giriş</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Üye silme</div><div class="tog-sub">Üye kendi hesabını silebilir</div></div></div>
<div class="fg" style="margin:0"><label class="fl2">Minimum kayıt yaşı</label><input class="fi" type="number" value="13" style="max-width:80px"></div>
</div>
</div>
</div>
</div>
<!-- BİLDİRİM AYARLARI -->
<div id="ay-bildirim" class="tbc">
<div class="g2">
<div class="wg"><div class="wgh"><span class="wgt">Push bildirim ayarları</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Push bildirim aktif</div><div class="tog-sub">Expo Push servisi açık/kapalı</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Yeni kampanya bildirimi</div><div class="tog-sub">Kampanya yayına girince bildir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Flash kampanya bildirimi</div><div class="tog-sub">Flash başlayınca anlık bildir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Kupon son dakika</div><div class="tog-sub">Kupon süresi dolmadan uyar</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Ticket güncelleme</div><div class="tog-sub">Ticket yanıtlandığında bildir</div></div></div></div></div>
<div class="wg"><div class="wgh"><span class="wgt">Admin bildirimleri</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Yeni ticket bildirimi</div><div class="tog-sub">Ticket açıldığında admina bildir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Yeni üye bildirimi</div><div class="tog-sub">Kayıt olduğunda bildir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Kampanya onay bekleniyor</div><div class="tog-sub">Onay kuyruğuna düştüğünde bildir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Ticket SLA uyarısı</div><div class="tog-sub">4 saat içinde yanıtlanmadıysa uyar</div></div></div></div></div>
</div>
</div>
<!-- SİSTEM AYARLARI -->
<div id="ay-sistem" class="tbc">
<div class="g2">
<div class="wg"><div class="wgh"><span class="wgt">Genel sistem</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Bakım modu</div><div class="tog-sub">Site bakım sayfası gösterir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">Debug modu</div><div class="tog-sub">Hata logları detaylı gösterilir</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">API logları</div><div class="tog-sub">Tüm API isteklerini kayıt eder</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Otomatik yedek</div><div class="tog-sub">Günlük otomatik veritabanı yedeği</div></div></div>
<div class="fg" style="margin-top:4px"><label class="fl2">Sistem adı (public)</label><input class="fi" value="Mars Kocaeli"></div>
<div class="fg"><label class="fl2">İletişim e-postası</label><input class="fi" type="email" value="info@marskocaeli.com"></div>
</div>
</div>
<div class="wg"><div class="wgh"><span class="wgt">Güvenlik</span></div><div style="padding:14px;display:flex;flex-direction:column;gap:13px"><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">2FA zorunlu (admin)</div><div class="tog-sub">Admin girişi için iki faktörlü doğrulama</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox"><span class="tslider"></span></label><div><div class="tog-label">IP kısıtlama (admin)</div><div class="tog-sub">Admin paneline sadece belirtilen IP'lerden erişim</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Session timeout</div><div class="tog-sub">30 dk hareketsizlikte otomatik çıkış</div></div></div><div class="tog-w"><label class="tog" style="width:36px;height:20px"><input type="checkbox" checked><span class="tslider"></span></label><div><div class="tog-label">Brute-force koruması</div><div class="tog-sub">5 hatalı girişte hesap kilitlenir</div></div></div>
<div class="fg" style="margin-top:4px"><label class="fl2">JWT token süresi (saat)</label><input class="fi" type="number" value="24"></div>
</div>
</div>
</div>
</div>
</div></div>
<div class="ap" id="ap-bildirim"><div class="adh"><div><div class="aht">Bildirimler</div></div></div><div class="adb" style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--t3)">Bildirimler ekranı</div></div>
<div class="amn"><div class="amni">
<button class="amnb" id="amn-dash" onclick="sa('dash')"><span class="amns">🏠</span><span class="amnl">Genel</span></button>
<button class="amnb" id="amn-kamps" onclick="sa('kamps')"><span class="amns">🏷️</span><span class="amnl">Kampanya</span></button>
<button class="amnb" id="amn-tickets" onclick="sa('tickets')"><span class="amns">🎫</span><span class="amnl">Ticket</span></button>
<button class="amnb" id="amn-gorev" onclick="sa('gorev')"><span class="amns">✅</span><span class="amnl">Görevler</span></button>
<button class="amnb" id="amn-rapor" onclick="sa('rapor')"><span class="amns">📊</span><span class="amnl">Rapor</span></button>
</div></div>
</div></div>
<script>
var ticketData={
1:{av:'⚡',t:'Ofis kliması çalışmıyor',m:'A Blok · Ofis 104 · #1042 ',bg:'bb',bl:'İşlemde',msgs:[{f:'u',txt:'Merhaba, A blok 1. kattaki ofisimizin kliması sabahtan beri çalışmıyor.',tm:'08:42'},{f:'a',txt:'Merhaba Ahmet Bey, talebinizi aldık. Teknik ekibimiz en kısa sürede ilgilenecek.',tm:'08:45'},{f:'a',txt:'Teknisyenimiz bugün 14:00-15:00 arasında ofisinize uğrayacak. Uygun mudur?',tm:'08:52'},{f:'u',txt:'Evet, uygun. Teşekkürler.',tm:'09:10'}]},
2:{av:'🔧',t:'B Blok asansör arızası',m:'B Blok · #1039 ',bg:'bb',bl:'İşlemde',msgs:[{f:'u',txt:'B blok asansörü çalışmıyor, saatlerdir bekliyoruz.',tm:'08:30'},{f:'a',txt:'Osman Demir ekibine bildirildi, 11:00 de müdahale edilecek.',tm:'08:48'}]},
3:{av:'📶',t:'İnternet bağlantısı kesiliyor',m:'B Blok · Ofis 215 · #1038 ',bg:'by',bl:'Yeni',msgs:[{f:'u',txt:'Sabahtan beri internetimiz 5 dakikada bir kesiliyor.',tm:'Dün 16:20'}]},
4:{av:'🔒',t:'Kapı kilidi bozuk',m:'Cadde · Burger Lab · #1037 ',bg:'by',bl:'Yeni',msgs:[{f:'u',txt:'Mağaza giriş kapısının kilidi açılmıyor.',tm:'Dün 17:05'}]}
};
var officeData={
1:{av:'DK',bg:'#EFF6FF',cl:'#1D4ED8',name:'Dermatoloji Kliniği',cat:'Sağlık · Dermatoloji',phone:'0262 331 02 08',email:'info@dermatoloji.com',web:'dermatoloji.com',hours:'Pzt-Cum: 09:00-18:00 / Cmt: 09:00-14:00 / Paz: Kapalı'},
2:{av:'AH',bg:'#FEF3C7',cl:'#92400E',name:'Ahmet Hukuk Bürosu',cat:'Hukuk · Avukatlık',phone:'0262 331 04 04',email:'info@ahukuk.com',web:'ahukuk.com',hours:'Pzt-Cum: 09:00-18:00'},
3:{av:'MT',bg:'#F0FDF4',cl:'#166534',name:'Mars Teknoloji',cat:'Teknoloji · Yazılım',phone:'0262 331 01 12',email:'info@marstech.com',web:'marstech.com',hours:'Pzt-Cum: 09:00-18:00'},
4:{av:'YM',bg:'#f7f7f7',cl:'#555',name:'Yıldız Muhasebe',cat:'Finans · Mali Müşavirlik',phone:'0262 331 01 15',email:'info@yildizm.com',web:'yildizm.com',hours:'Pzt-Cum: 09:00-17:00'},
5:{av:'KM',bg:'#EEEDFE',cl:'#3C3489',name:'Kocaeli Mimarlık',cat:'Mimarlık · Tasarım',phone:'0262 331 01 18',email:'info@kocaelim.com',web:'kocaelim.com',hours:'Pzt-Cum: 09:00-18:00'},
6:{av:'DZ',bg:'#FEF2F2',cl:'#991B1B',name:'Diş Kliniği Zirve',cat:'Sağlık · Diş Hekimliği',phone:'0262 332 02 04',email:'info@zirvedis.com',web:'zirvedis.com',hours:'Pzt-Cum: 09:00-18:00 / Cmt: 09:00-13:00'}
};
var storeData={
1:{ico:'☕',name:'Starbucks',cat:'Kafe · A2 Blok',hours:'Açık · 07:00-22:00',hasCamp:true},
2:{ico:'🍽️',name:'Gurme Mutfak',cat:'Restoran · A1 Blok',hours:'Açık · 11:00-23:00',hasCamp:false},
3:{ico:'🥐',name:'Simit Sarayı',cat:'Pastane · A1 Blok',hours:'Açık · 08:00-21:00',hasCamp:false},
4:{ico:'🍔',name:'Burger Lab',cat:'Fast Food · Cadde',hours:'Açık · 10:00-22:00',hasCamp:true},
5:{ico:'🍕',name:'Pizza Mia',cat:'Restoran · Cadde',hours:'Açık · 11:00-22:00',hasCamp:true},
6:{ico:'🛒',name:'Migros',cat:'Market · A1 Blok',hours:'Açık · 09:00-22:00',hasCamp:false},
7:{ico:'👗',name:'Defacto',cat:'Tekstil · A2 Blok',hours:'Açık · 10:00-21:00',hasCamp:false},
8:{ico:'💄',name:'Güzellik Merkezi',cat:'Güzellik · A2 Blok',hours:'Kapalı - 10:00 da açılır',hasCamp:true}
};
// ---- NAVIGATION ----
function sp(page){
document.getElementById('pw').classList.add('on');
document.getElementById('aw').classList.remove('on');
document.querySelectorAll('.pp').forEach(function(p){p.classList.remove('on')});
var el=document.getElementById('pp-'+page);
if(el) el.classList.add('on');
document.querySelectorAll('.db-btn').forEach(function(b){b.classList.remove('on')});
var dbMap={home:0,kamp:1,ofis:2,cadde:3,giris:4};
var btns=document.querySelectorAll('.db-btn');
if(dbMap[page]!==undefined) btns[dbMap[page]].classList.add('on');
document.querySelectorAll('.nlink').forEach(function(l){l.classList.remove('on')});
var lMap={home:0,ofis:1,cadde:2,kamp:3};
if(lMap[page]!==undefined) document.querySelectorAll('.nlink')[lMap[page]].classList.add('on');
window.scrollTo(0,0);
}
function sa(page){
document.getElementById('aw').classList.add('on');
document.getElementById('pw').classList.remove('on');
document.querySelectorAll('.ap').forEach(function(p){p.classList.remove('on')});
var el=document.getElementById('ap-'+page);
if(el) el.classList.add('on');
document.querySelectorAll('.sbi').forEach(function(b){b.classList.remove('on')});
var sb=document.getElementById('sb-'+page);
if(sb) sb.classList.add('on');
document.querySelectorAll('.amnb').forEach(function(b){b.classList.remove('on')});
var amn=document.getElementById('amn-'+page);
if(amn) amn.classList.add('on');
document.querySelectorAll('.db-btn').forEach(function(b){b.classList.remove('on')});
var dMap={dash:5,ofisadm:6,caddeadm:7,tickets:8,gorev:9,personel:10,chat:11,uyeler:12,kamps:13,kupon:14,rapor:15,mesaj:16,ayar:17};
var btns=document.querySelectorAll('.db-btn');
if(dMap[page]!==undefined && btns[dMap[page]]) btns[dMap[page]].classList.add('on');
}
// ---- MODALS ----
function om(id){document.getElementById('mo-'+id).classList.add('on')}
function cm(id){document.getElementById('mo-'+id).classList.remove('on')}
document.addEventListener('click',function(e){if(e.target.classList.contains('mo'))e.target.classList.remove('on')});
// ---- TAB SWITCHING (fixed) ----
function swt(btn, tid){
var tabBar = btn.parentElement;
tabBar.querySelectorAll('.adtab').forEach(function(t){t.classList.remove('on')});
btn.classList.add('on');
var page = btn.closest('.ap') || btn.closest('.pp') || document.body;
page.querySelectorAll('.tbc').forEach(function(t){t.classList.remove('on')});
var target = document.getElementById(tid);
if(target) target.classList.add('on');
}
// ---- AUTH ----
function swa(t){
document.querySelectorAll('.atab').forEach(function(a){a.classList.remove('on')});
if(t==='lg'){document.querySelectorAll('.atab')[0].classList.add('on');document.getElementById('alg').style.display='block';document.getElementById('arg').style.display='none';}
else{document.querySelectorAll('.atab')[1].classList.add('on');document.getElementById('alg').style.display='none';document.getElementById('arg').style.display='block';}
}
// ---- FILTERS ----
function tf(el){el.parentElement.querySelectorAll('.ftag').forEach(function(f){f.classList.remove('on')});el.classList.add('on')}
// ---- VIEW TOGGLE ----
function setV(t){
document.getElementById('ogv').style.display=t==='grid'?'grid':'none';
document.getElementById('otv').style.display=t==='tbl'?'block':'none';
document.getElementById('vgrid').classList.toggle('on',t==='grid');
document.getElementById('vtbl').classList.toggle('on',t==='tbl');
}
// ---- TICKET SELECT ----
function selT(id){
document.querySelectorAll('.titem').forEach(function(t){t.classList.remove('on');t.style.background='';});
var items=document.querySelectorAll('.titem');
if(items[id-1]) items[id-1].classList.add('on');
var d=ticketData[id];
if(!d) return;
document.getElementById('chav').textContent=d.av;
document.getElementById('cht').textContent=d.t;
document.getElementById('chm').innerHTML=d.m+'<span class="badge '+d.bg+'">'+d.bl+'</span>';
var body=document.getElementById('cbdy');
body.innerHTML='<div class="cds">Bugün</div>';
d.msgs.forEach(function(m){
var div=document.createElement('div');
div.className='cmsg '+m.f;
var ta=m.f==='u'?'text-align:right':'';
div.innerHTML='<div><div class="cbbl bb'+m.f+'">'+m.txt+'</div><div class="ctm2" style="'+ta+'">'+m.tm+'</div></div>';
body.appendChild(div);
});
body.scrollTop=body.scrollHeight;
}
// ---- CHAT ----
function sendChat(){
var f=document.getElementById('cinf'),txt=f.value.trim();
if(!txt) return;
var body=document.getElementById('cbdy');
var t=new Date(),tm=t.getHours().toString().padStart(2,'0')+':'+t.getMinutes().toString().padStart(2,'0');
var div=document.createElement('div');div.className='cmsg a';
div.innerHTML='<div><div class="cbbl bba">'+txt+'</div><div class="ctm2">'+tm+'</div></div>';
body.appendChild(div);body.scrollTop=body.scrollHeight;f.value='';
}
function selCh(el,name){
document.querySelectorAll('.ch-item').forEach(function(i){i.classList.remove('on')});
el.classList.add('on');
var chname = document.getElementById('ch-name');
if(chname) chname.textContent=(name==='Genel'||name==='Elektrik'||name==='Mekanik'||name==='Temizlik'||name==='Yönetim'?'#':'')+name.toLowerCase();
var body=document.getElementById('ch-body');
if(body) body.innerHTML='<div class="cds">Bugün</div><div class="cmsg a"><div><div style="font-size:9.5px;color:var(--t3);margin-bottom:3px">'+name+' - 09:00</div><div class="cbbl bba">'+name+' kanalına hoş geldiniz!</div></div></div>';
}
function createCh(){var n=prompt('Kanal adı:');if(n&&n.trim()) alert('#'+n.trim()+' kanalı oluşturuldu!')}
function sendChMsg(){
var f=document.getElementById('ch-inp'),txt=f.value.trim();
if(!txt) return;
var body=document.getElementById('ch-body');
var t=new Date(),tm=t.getHours().toString().padStart(2,'0')+':'+t.getMinutes().toString().padStart(2,'0');
var div=document.createElement('div');div.className='cmsg u';
div.innerHTML='<div><div class="cbbl bbu">'+txt+'</div><div class="ctm2" style="text-align:right">'+tm+'</div></div>';
body.appendChild(div);body.scrollTop=body.scrollHeight;f.value='';
}
// ---- OFFICE MODAL ----
function openOffice(id){
var d=officeData[id]; if(!d) return;
document.getElementById('mo-office-title').textContent=d.name;
document.getElementById('mo-off-av').style.background=d.bg;
document.getElementById('mo-off-av').style.color=d.cl;
document.getElementById('mo-off-av').textContent=d.av;
document.getElementById('mo-off-name').textContent=d.name;
document.getElementById('mo-off-cat').textContent=d.cat;
document.getElementById('mo-off-phone').textContent='📞 '+d.phone;
document.getElementById('mo-off-email').textContent='✉️ '+d.email;
document.getElementById('mo-off-web').textContent='🌐 '+d.web;
document.getElementById('mo-off-hours').innerHTML=d.hours;
om('office');
}
function openApptModal(){cm('office');setTimeout(function(){openCal('appt')},200)}
function openMsgModal(src){cm('office');cm('store');setTimeout(function(){document.getElementById('mo-msg-title').textContent=(src==='office'?'Ofise mesaj gönder':'Mağazaya mesaj gönder');om('msg')},200)}
// ---- STORE MODAL ----
function openStore(id){
var d=storeData[id]; if(!d) return;
document.getElementById('mo-store-title').textContent=d.name;
document.getElementById('ms-ico').textContent=d.ico;
document.getElementById('ms-name').textContent=d.name;
document.getElementById('ms-cat').innerHTML=d.cat;
document.getElementById('ms-hours').innerHTML=d.hours;
document.getElementById('ms-camps').style.display=d.hasCamp?'block':'none';
om('store');
}
function openResModal(){cm('store');setTimeout(function(){openCal('res')},200)}
// ---- CAMPAIGN QR ----
function openCamp(type,id){
var titles={flash:{1:'☕ Kahve Dünyası — Flash %25',2:'🥤 Starbucks — Flash 2al1öde'},sureli:{1:'🍔 Burger Lab — 2 al 1 öde',2:'🛍️ Macrocenter — %30',3:'🧴 Watsons — %10',4:'🍕 Pizza Mia — %20'},surekli:{1:'☕ Tüm Kafeler — %5',2:'🅿️ Otopark — 2 Saat Ücretsiz'}};
var codes=['MRS-K8X4-2026','MRS-B7Z9-2026','MRS-W3M1-2026','MRS-P5T8-2026','MRS-F2N6-2026','MRS-Q9R3-2026'];
document.getElementById('qr-title').textContent=(titles[type]&&titles[type][id])||'Kampanya Kuponu';
document.getElementById('qr-sub').textContent=type==='flash'?'Flash kampanya · Kasada gösterin':'Tek kullanımlık QR kupon · Kasada gösterin';
document.getElementById('qr-code').textContent=codes[(id-1)%codes.length];
document.getElementById('qr-timer').style.display=type==='flash'?'inline-flex':'none';
om('qr');
}
function openLoginPrompt(){om('login')}
// ---- PUSH CAMP PREVIEW ----
function toggleCampPreview(){
var sel=document.getElementById('push-camp-sel');
var prev=document.getElementById('camp-preview');
if(prev) prev.style.display=sel.value?'block':'none';
}
// ---- QR COUNTDOWN ----
(function(){
var secs=8048;
function tick(){secs--;if(secs<0) secs=0;var h=Math.floor(secs/3600),m=Math.floor((secs%3600)/60),s=secs%60;var el=document.getElementById('qr-countdown');if(el) el.textContent=h.toString().padStart(2,'0')+':'+m.toString().padStart(2,'0')+':'+s.toString().padStart(2,'0');}
setInterval(tick,1000);
})();
// ---- MOBILE MENU ----
document.addEventListener('click',function(e){
var menu=document.getElementById('mmen');var ham=document.querySelector('.ham');
if(menu&&menu.classList.contains('on')&&!menu.contains(e.target)&&ham&&!ham.contains(e.target)) menu.classList.remove('on');
});
// ---- INIT ----
sp('home');
// ============================================================
// CALENDAR ENGINE
// ============================================================
var CAL = {
view: 'month',
year: 2026, month: 5, // month 0-indexed: 5 = June
weekOffset: 0, // weeks relative to today
selDay: null, // {y,m,d}
selSlot: null, // '10:00'
step: 1,
type: 'appt', // 'appt' | 'res'
targetName: ''
};
var CAL_MONTHS = ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'];
var CAL_DAYS = ['Pzt','Sal','Çar','Per','Cum','Cmt','Paz']; // Mon=0...Sun=6
var CAL_TODAY = new Date(2026,5,10); // 10 June 2026 (demo date)
function openCal(type) {
CAL.type = type;
CAL.step = 1; CAL.selDay = null; CAL.selSlot = null;
CAL.view = 'month';
CAL.year = CAL_TODAY.getFullYear();
CAL.month = CAL_TODAY.getMonth();
CAL.targetName = type === 'appt'
? (document.getElementById('mo-off-name') ? document.getElementById('mo-off-name').textContent : 'Ofis')
: (document.getElementById('ms-name') ? document.getElementById('ms-name').textContent : 'Mağaza');
document.getElementById('cal-title').textContent = type === 'appt' ? 'Randevu Al' : 'Rezervasyon Yap';
calGoStep(1);
calRender();
om('cal');
}
function calGoStep(n) {
CAL.step = n;
[1,2,3,4].forEach(function(i) {
var el = document.getElementById('cal-s'+i);
if (el) el.style.display = (i === n) ? 'block' : 'none';
});
['cst1','cst2','cst3'].forEach(function(id,i) {
var el = document.getElementById(id);
if (!el) return;
el.className = 'cst';
if (i+1 < n) el.classList.add('done');
if (i+1 === n) el.classList.add('on');
});
}
function calSetView(v) {
CAL.view = v;
if (v === 'month') {
// reset to today's month
CAL.year = CAL_TODAY.getFullYear();
CAL.month = CAL_TODAY.getMonth();
} else {
CAL.weekOffset = 0;
}
calRender();
}
function calPrev() {
CAL.month--; if (CAL.month < 0) { CAL.month=11; CAL.year--; }
calRender();
}
function calNext() {
CAL.month++; if (CAL.month > 11) { CAL.month=0; CAL.year++; }
calRender();
}
// Returns true if date has available slots (not Sunday, not past)
function calHasSlots(d) {
if (d < CAL_TODAY) return false;
if (d.getDay() === 0) return false; // Sunday closed
return true;
}
// Get Monday of week containing d
function calWeekStart(d) {
var day = d.getDay(); // 0=Sun
var diff = (day === 0) ? -6 : 1 - day;
var mon = new Date(d); mon.setDate(d.getDate() + diff);
return mon;
}
function calRender() {
var grid = document.getElementById('cal-grid');
if (!grid) return;
calRenderMonth(grid);
}
function calRenderMonth(grid) {
document.getElementById('cal-nav-lbl').textContent = CAL_MONTHS[CAL.month]+' '+CAL.year;
var firstDay = new Date(CAL.year, CAL.month, 1);
// Get Monday-start offset
var startDow = firstDay.getDay(); // 0=Sun
var offset = (startDow === 0) ? 6 : startDow - 1;
var daysInMonth = new Date(CAL.year, CAL.month+1, 0).getDate();
var html = '<div class="cal-month-grid">';
// Headers
CAL_DAYS.forEach(function(d){ html += '<div class="cdow">'+d+'</div>'; });
// Empty cells
for (var i=0; i<offset; i++) html += '<div class="cday cempty"></div>';
// Days
for (var day=1; day<=daysInMonth; day++) {
var d = new Date(CAL.year, CAL.month, day);
var isToday = (d.toDateString() === CAL_TODAY.toDateString());
var isSel = CAL.selDay && (d.getFullYear()===CAL.selDay.y && d.getMonth()===CAL.selDay.m && d.getDate()===CAL.selDay.d);
var has = calHasSlots(d);
var isPast = d < CAL_TODAY;
var cls = 'cday';
if (isToday) cls += ' ctoday';
if (isSel) cls += ' csel';
if (!has && !isPast) cls += ' cdis';
if (isPast) cls += ' cpast';
var onclick_attr = (!isPast && has) ? 'onclick="calSelectDay('+CAL.year+','+CAL.month+','+day+')"' : '';
html += '<div class="'+cls+'" '+onclick_attr+' title="'+(!has&&!isPast?(d.getDay()===0?'Kapalı':'Dolu'):(isPast?'Geçmiş':''))+'" >'+day+'</div>';
}
html += '</div>';
grid.innerHTML = html;
}
function calSelectDay(y,m,d) {
CAL.selDay = {y:y,m:m,d:d};
CAL.selSlot = null;
calRender();
// Show time slots
var date = new Date(y,m,d);
var dayStr = CAL_DAYS[date.getDay()===0?6:date.getDay()-1]+', '+d+' '+CAL_MONTHS[m]+' '+y;
document.getElementById('cal-day-lbl').textContent = dayStr;
document.getElementById('cal-type-lbl').textContent = CAL.type==='appt' ? 'Randevu saatleri' : 'Rezervasyon saatleri';
calRenderSlots(date);
setTimeout(function(){ calGoStep(2); }, 120);
}
function calGetSlots(date) {
var dow = date.getDay();
if (dow === 0) return [];
var base = dow === 6
? ['09:00','09:30','10:00','10:30','11:00','11:30']
: ['09:00','09:30','10:00','10:30','11:00','11:30','14:00','14:30','15:00','15:30','16:00','16:30'];
if (CAL.type === 'res') {
base = dow === 6
? ['12:00','13:00','14:00','19:00','20:00']
: ['12:00','12:30','13:00','13:30','19:00','19:30','20:00','20:30','21:00'];
}
// Simulate taken based on day+month hash
var hash = date.getDate() + date.getMonth() * 31;
var taken = [base[hash%base.length], base[(hash+2)%base.length], base[(hash+4)%base.length]];
return base.map(function(t){ return {time:t, taken: taken.indexOf(t) > -1}; });
}
function calRenderSlots(date) {
var slots = calGetSlots(date);
var html = '';
if (!slots.length) { html = '<div style="color:var(--t3);text-align:center;padding:20px">Bu gün randevu alınamaz.</div>'; }
else {
slots.forEach(function(s){
var isSel = (CAL.selSlot === s.time);
var cls = 'cslot'+(s.taken?' ctaken':'')+(isSel?' csel':'');
var onclick = s.taken ? '' : 'onclick="calSelectSlot(\''+s.time+'\')"';
html += '<button class="'+cls+'" '+onclick+'>'+s.time+'</button>';
});
}
document.getElementById('cal-slots').innerHTML = html;
}
function calSelectSlot(t) {
CAL.selSlot = t;
// Re-render slots to show selection
var date = new Date(CAL.selDay.y, CAL.selDay.m, CAL.selDay.d);
calRenderSlots(date);
// Build summary
var dayStr = CAL_DAYS[date.getDay()===0?6:date.getDay()-1]+', '+CAL.selDay.d+' '+CAL_MONTHS[CAL.selDay.m]+' '+CAL.selDay.y;
var sumHtml = '<div class="cal-summary-row"><span class="csr-k">Yer</span><span class="csr-v">'+CAL.targetName+'</span></div>'
+ '<div class="cal-summary-row"><span class="csr-k">Tarih</span><span class="csr-v">'+dayStr+'</span></div>'
+ '<div class="cal-summary-row"><span class="csr-k">Saat</span><span class="csr-v">'+t+'</span></div>';
document.getElementById('cal-summary').innerHTML = sumHtml;
setTimeout(function(){ calGoStep(3); }, 120);
}
function calSubmit() {
var ad = document.getElementById('cal-ad').value.trim();
var soyad = document.getElementById('cal-soyad').value.trim();
var tel = document.getElementById('cal-tel').value.trim();
if (!ad || !soyad || !tel) { alert('Lütfen ad, soyad ve telefon alanlarını doldurun.'); return; }
var date = new Date(CAL.selDay.y, CAL.selDay.m, CAL.selDay.d);
var dayStr = CAL_DAYS[date.getDay()===0?6:date.getDay()-1]+', '+CAL.selDay.d+' '+CAL_MONTHS[CAL.selDay.m]+' '+CAL.selDay.y;
document.getElementById('cal-ok-title').textContent = CAL.type==='appt' ? 'Randevu talebiniz alındı!' : 'Rezervasyon talebiniz alındı!';
document.getElementById('cal-ok-summary').innerHTML =
'<div class="cal-summary-row"><span class="csr-k">Ad Soyad</span><span class="csr-v">'+ad+' '+soyad+'</span></div>'
+ '<div class="cal-summary-row"><span class="csr-k">Telefon</span><span class="csr-v">'+tel+'</span></div>'
+ '<div class="cal-summary-row"><span class="csr-k">Yer</span><span class="csr-v">'+CAL.targetName+'</span></div>'
+ '<div class="cal-summary-row"><span class="csr-k">Tarih</span><span class="csr-v">'+dayStr+'</span></div>'
+ '<div class="cal-summary-row"><span class="csr-k">Saat</span><span class="csr-v">'+CAL.selSlot+'</span></div>';
// Clear form
['cal-ad','cal-soyad','cal-tel','cal-not'].forEach(function(id){ var el=document.getElementById(id); if(el) el.value=''; });
calGoStep(4);
}
function confirmClearChat(){
if(confirm('Tüm mesajlar silinecek. Emin misiniz?')){
var el = document.getElementById('ch-body');
if(el) el.innerHTML='<div style="text-align:center;color:var(--t3);padding:20px">Sohbet temizlendi</div>';
cm('ch-settings');
}
}
function switchGorevType(t){
var mb=document.getElementById('gt-manuel-btn');
var rb=document.getElementById('gt-rutin-btn');
var rf=document.getElementById('gt-rutin-fields');
if(!mb||!rb||!rf) return;
if(t==='manuel'){
mb.style.background='var(--d)';mb.style.color='#fff';mb.style.borderColor='var(--d)';
rb.style.background='var(--bg)';rb.style.color='var(--t2)';rb.style.borderColor='var(--bd)';
rf.style.display='none';
} else {
rb.style.background='var(--d)';rb.style.color='#fff';rb.style.borderColor='var(--d)';
mb.style.background='var(--bg)';mb.style.color='var(--t2)';mb.style.borderColor='var(--bd)';
rf.style.display='block';
}
}
// ---- HERO SLIDER ----
var SIDX = 0, STOTAL = 4, STIMER = null;
function sliderGo(n){
SIDX = ((n%STOTAL)+STOTAL)%STOTAL;
var el=document.getElementById('hero-slides');
if(el) el.style.transform='translateX(-'+(SIDX*100)+'%)';
document.querySelectorAll('.slider-dot').forEach(function(d,i){d.classList.toggle('on',i===SIDX)});
}
function sliderNext(){ sliderGo(SIDX+1); }
function sliderPrev(){ sliderGo(SIDX-1); }
function sliderStart(){ if(!STIMER) STIMER=setInterval(sliderNext,4800); }
function sliderStop(){ clearInterval(STIMER); STIMER=null; }
sliderStart();
// ---- KAMPANYA FORM ----
function kampTurChange(){
var v=document.getElementById('kamp-tur-sel').value;
document.getElementById('kamp-flash-sure').style.display=(v==='flash')?'block':'none';
document.getElementById('kamp-tarih-aralik').style.display=(v==='sureli')?'block':'none';
}
function kampIndirimChange(){
var v=document.getElementById('kamp-indirim-sel').value;
var show=['yuzde','tutar'].includes(v);
document.getElementById('kamp-indirim-deger').style.display=show?'block':'none';
if(v==='yuzde'){document.getElementById('kamp-deger-lbl').textContent='İndirim yüzdesi (%) *';document.getElementById('kamp-deger-inp').placeholder='Örn: 25';}
if(v==='tutar'){document.getElementById('kamp-deger-lbl').textContent='İndirim tutarı (₺) *';document.getElementById('kamp-deger-inp').placeholder='Örn: 50';}
}
// ---- TABLE FILTER FUNCTIONS ----
function filterTbl(tbodyId, query) {
var rows = document.querySelectorAll('#'+tbodyId+' tr');
var q = query.toLowerCase().trim();
rows.forEach(function(row) {
var ds = row.getAttribute('data-s') || row.textContent;
row.style.display = (!q || ds.toLowerCase().includes(q)) ? '' : 'none';
});
}
function filterTblTag(btn, tbodyId, tag) {
// Update button states
var bar = btn.closest('.tbl-toolbar');
if (bar) bar.querySelectorAll('.ftag-sm').forEach(function(b){ b.classList.remove('on'); });
btn.classList.add('on');
filterTbl(tbodyId, tag);
}
function filterKuponByCamp(campName) {
var rows = document.querySelectorAll('#kupon-tbody tr');
rows.forEach(function(row) {
row.style.display = (!campName || row.textContent.includes(campName)) ? '' : 'none';
});
}
// ---- TICKET FILTER ----
var ticketFilters = {type:'', urgency:'', date:''};
function filterTickets(btn, filterType, val) {
ticketFilters[filterType] = val;
var bar = btn.closest('.tbl-toolbar');
if (bar) {
var sameGroup = bar.querySelectorAll('[onclick*="filterTickets(this,\''+filterType+'\'"]');
sameGroup.forEach(function(b){ b.classList.remove('on'); });
btn.classList.add('on');
}
var items = document.querySelectorAll('.titem');
items.forEach(function(item) {
var t = item.getAttribute('data-type') || '';
var u = item.getAttribute('data-urgency') || '';
var d = item.getAttribute('data-date') || '';
var show = true;
if (ticketFilters.type && !t.includes(ticketFilters.type)) show = false;
if (ticketFilters.urgency && !u.includes(ticketFilters.urgency)) show = false;
if (ticketFilters.date && !d.includes(ticketFilters.date)) show = false;
item.style.display = show ? '' : 'none';
});
}
// ---- PERSONEL DEPT FILTER ----
function filterPersonelDept(btn, dept) {
var tabs = document.querySelectorAll('#pers-dep-tabs .adtab');
tabs.forEach(function(t){ t.classList.remove('on'); });
if (btn) btn.classList.add('on');
var rows = document.querySelectorAll('#personel-tbody tr');
var title = dept ? dept.charAt(0).toUpperCase()+dept.slice(1)+' Departmanı' : 'Tüm Personel';
var el = document.getElementById('pers-list-title');
if (el) el.textContent = title;
rows.forEach(function(row) {
row.style.display = (!dept || row.getAttribute('data-dep') === dept) ? '' : 'none';
});
}
// ---- PERSONEL BAZLI GÖREV FILTER ----
function filterGorevByPers(btn, persCode) {
document.querySelectorAll('#pers-btns .ftag').forEach(function(b){ b.classList.remove('on'); });
btn.classList.add('on');
var rows = document.querySelectorAll('#pers-gorev-tbody tr');
var names = {KU:'Kemal Usta',MA:'Murat Aydın',SA:'Serkan Arslan',HK:'Hasan Koç',OD:'Osman Demir',ZK:'Zeynep Kaya'};
var title = persCode === 'hepsi' ? 'Tüm personelin bugünkü görevleri' : (names[persCode]||persCode)+' - bugünkü görevler';
var el = document.getElementById('pers-gorev-title');
if (el) el.textContent = title;
rows.forEach(function(row) {
row.style.display = (persCode === 'hepsi' || row.getAttribute('data-pers') === persCode) ? '' : 'none';
});
}
function addTicketLabel(){
var lbl = prompt('Etiket adı:');
if(!lbl||!lbl.trim()) return;
var ico = prompt('İkon (emoji):','📋') || '📋';
var container = document.getElementById('ticket-labels');
if(!container) return;
var row = document.createElement('div');
row.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px';
var span1 = document.createElement('span'); span1.style.fontSize='16px'; span1.textContent=ico;
var span2 = document.createElement('span'); span2.style.cssText='flex:1;font-size:12.5px;font-weight:500'; span2.textContent=lbl.trim();
var badge = document.createElement('span'); badge.className='badge bg bsm'; badge.textContent='Özel';
var btnE = document.createElement('button'); btnE.className='btn bou bsm'; btnE.textContent='✏';
var btnD = document.createElement('button'); btnD.className='btn brd bsm'; btnD.textContent='🗑';
btnD.addEventListener('click', function(){ this.parentElement.remove(); });
row.appendChild(span1); row.appendChild(span2); row.appendChild(badge); row.appendChild(btnE); row.appendChild(btnD);
container.appendChild(row);
alert(lbl.trim() + ' etiketi eklendi!');
}
</script>
<!-- ADD ÜYE MODAL -->
<div class="mo" id="mo-add-uye">
<div class="mb">
<div class="mh"><span class="mht">Yeni Üye Ekle</span><button class="mclose" onclick="cm('add-uye')">✕</button></div>
<div class="mbody">
<div class="g2f">
<div class="fg"><label class="fl2">Ad *</label><input class="fi" placeholder="Ad"></div>
<div class="fg"><label class="fl2">Soyad *</label><input class="fi" placeholder="Soyad"></div>
</div>
<div class="fg"><label class="fl2">E-posta *</label><input class="fi" type="email" placeholder="uye@email.com"></div>
<div class="fg"><label class="fl2">Telefon *</label><input class="fi" type="tel" placeholder="05xx xxx xx xx"></div>
<div class="g2f">
<div class="fg"><label class="fl2">Doğum yılı</label><input class="fi" type="number" placeholder="1990"></div>
<div class="fg"><label class="fl2">Cinsiyet</label><select class="fi"><option>Kadın</option><option>Erkek</option><option>Belirtmek istemiyorum</option></select></div>
</div>
<div class="fg"><label class="fl2">Durum</label><select class="fi"><option>Aktif</option><option>Pasif</option></select></div>
<div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px">
<button class="btn bou" onclick="cm('add-uye')">İptal</button>
<button class="btn bdk2" onclick="cm('add-uye');alert('Üye eklendi!')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- CHANNEL SETTINGS MODAL -->
<div class="mo" id="mo-ch-settings">
<div class="mb lg" style="max-width:540px">
<div class="mh"><span class="mht">Kanal Ayarları</span><button class="mclose" onclick="cm('ch-settings')">✕</button></div>
<div class="mbody">
<div class="adtabs" id="ch-settings-tabs" style="margin:-18px -18px 16px -18px;padding:0 14px">
<button class="adtab on" onclick="swt(this,'chs-genel')">Genel</button>
<button class="adtab" onclick="swt(this,'chs-uyeler')">Üyeler & İzinler</button>
<button class="adtab" onclick="swt(this,'chs-yonet')">Yönetim</button>
</div>
<!-- Genel -->
<div id="chs-genel" class="tbc on">
<div class="fg"><label class="fl2">Kanal adı</label><input class="fi" value="genel" placeholder="kanal-adi"></div>
<div class="fg"><label class="fl2">Kanal açıklaması</label><input class="fi" placeholder="Bu kanal hakkında kısa açıklama..."></div>
<div class="fg"><label class="fl2">Kanal türü</label>
<select class="fi"><option>Herkese açık (#)</option><option>Gizli / Kısıtlı (🔒)</option></select>
</div>
<hr style="border:.5px solid var(--bd);margin:14px 0">
<div style="font-size:12.5px;font-weight:500;color:var(--t1);margin-bottom:10px">Kanal listesi</div>
<div id="ch-list-edit" style="display:flex;flex-direction:column;gap:6px;margin-bottom:12px">
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:12px;color:var(--t2)">#</span>
<span style="flex:1;font-size:12.5px;font-weight:500">genel</span>
<span class="badge bg bsm">Aktif</span>
<button class="btn bou bsm">✏</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:12px;color:var(--t2)">#</span>
<span style="flex:1;font-size:12.5px;font-weight:500">elektrik</span>
<span class="badge bg bsm">Aktif</span>
<button class="btn bou bsm">✏</button>
<button class="btn brd bsm" onclick="confirm('Kanal silinsin mi?')">🗑</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:12px;color:var(--t2)">#</span>
<span style="flex:1;font-size:12.5px;font-weight:500">mekanik</span>
<span class="badge bg bsm">Aktif</span>
<button class="btn bou bsm">✏</button>
<button class="btn brd bsm" onclick="confirm('Kanal silinsin mi?')">🗑</button>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd);border-radius:5px">
<span style="font-size:12px;color:var(--t2)">🔒</span>
<span style="flex:1;font-size:12.5px;font-weight:500">yönetim</span>
<span class="badge bgr bsm">Kısıtlı</span>
<button class="btn bou bsm">✏</button>
<button class="btn brd bsm" onclick="confirm('Kanal silinsin mi?')">🗑</button>
</div>
</div>
<button class="btn bdk2" style="width:100%;justify-content:center" onclick="var n=prompt('Yeni kanal adı:');if(n) alert('#'+n+' kanalı oluşturuldu!')">+ Yeni Kanal Ekle</button>
</div>
<!-- Üyeler & İzinler -->
<div id="chs-uyeler" class="tbc">
<div style="font-size:12px;color:var(--t2);margin-bottom:12px">Seçili kanal: <b style="color:var(--t1)">#genel</b></div>
<table style="width:100%;border-collapse:collapse;font-size:12px">
<thead><tr style="border-bottom:.5px solid var(--bd)"><th style="padding:6px 0;text-align:left;color:var(--t3);font-size:10px;text-transform:uppercase">Personel</th><th style="text-align:center;color:var(--t3);font-size:10px;text-transform:uppercase">Okuma</th><th style="text-align:center;color:var(--t3);font-size:10px;text-transform:uppercase">Yazma</th></tr></thead>
<tbody><tr style="border-bottom:.5px solid var(--bd)"><td style="padding:8px 0;display:flex;align-items:center;gap:7px"><div style="width:22px;height:22px;border-radius:50%;background:#EFF6FF;color:#1D4ED8;font-size:9px;font-weight:500;display:flex;align-items:center;justify-content:center">KU</div>Kemal Usta</td><td style="text-align:center"><input type="checkbox" checked></td><td style="text-align:center"><input type="checkbox" checked></td></tr><tr style="border-bottom:.5px solid var(--bd)"><td style="padding:8px 0;display:flex;align-items:center;gap:7px"><div style="width:22px;height:22px;border-radius:50%;background:#EFF6FF;color:#1D4ED8;font-size:9px;font-weight:500;display:flex;align-items:center;justify-content:center">MA</div>Murat Aydın</td><td style="text-align:center"><input type="checkbox" checked></td><td style="text-align:center"><input type="checkbox" checked></td></tr><tr style="border-bottom:.5px solid var(--bd)"><td style="padding:8px 0;display:flex;align-items:center;gap:7px"><div style="width:22px;height:22px;border-radius:50%;background:#F0FDF4;color:#166534;font-size:9px;font-weight:500;display:flex;align-items:center;justify-content:center">HK</div>Hasan Koç</td><td style="text-align:center"><input type="checkbox" checked></td><td style="text-align:center"><input type="checkbox" checked></td></tr><tr style="border-bottom:.5px solid var(--bd)"><td style="padding:8px 0;display:flex;align-items:center;gap:7px"><div style="width:22px;height:22px;border-radius:50%;background:#F0FDF4;color:#166534;font-size:9px;font-weight:500;display:flex;align-items:center;justify-content:center">OD</div>Osman Demir</td><td style="text-align:center"><input type="checkbox" checked></td><td style="text-align:center"><input type="checkbox"></td></tr><tr style="border-bottom:.5px solid var(--bd)"><td style="padding:8px 0;display:flex;align-items:center;gap:7px"><div style="width:22px;height:22px;border-radius:50%;background:#F3E8FF;color:#6B21A8;font-size:9px;font-weight:500;display:flex;align-items:center;justify-content:center">ZK</div>Zeynep Kaya</td><td style="text-align:center"><input type="checkbox" checked></td><td style="text-align:center"><input type="checkbox"></td></tr></tbody></table>
</div>
<!-- Yönetim -->
<div id="chs-yonet" class="tbc">
<div style="display:flex;flex-direction:column;gap:12px">
<div style="background:var(--bg2);border:.5px solid var(--bd);border-radius:6px;padding:12px">
<div style="font-size:12.5px;font-weight:500;margin-bottom:8px">Sohbet yönetimi</div>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<button class="btn bou" onclick="alert('Sohbet JSON olarak yedeklendi!')">💾 Yedekle (JSON)</button>
<button class="btn bou" onclick="alert('Kanal arşivlendi!')">📦 Arşivle</button>
<button class="btn brd" onclick="confirmClearChat();cm('ch-settings')">🗑 Sohbeti Temizle</button>
</div>
</div>
<div style="background:var(--red-bg);border:.5px solid var(--red-bdr);border-radius:6px;padding:12px">
<div style="font-size:12.5px;font-weight:500;color:var(--red);margin-bottom:4px">Tehlikeli bölge</div>
<div style="font-size:11.5px;color:var(--t2);margin-bottom:8px">Bu kanalı tamamen silmek tüm mesajları siler ve geri alınamaz.</div>
<button class="btn brd" onclick="confirm('Kanal ve tüm mesajlar silinecek. Emin misiniz?') && alert('Kanal silindi!');cm('ch-settings')">Kanalı Sil</button>
</div>
</div>
</div>
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:.5px solid var(--bd)">
<button class="btn bou" onclick="cm('ch-settings')">İptal</button>
<button class="btn bdk2" onclick="cm('ch-settings');alert('Ayarlar kaydedildi!')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- GÖREV EKLE MODAL -->
<div class="mo" id="mo-gorev-ekle">
<div class="mb lg" style="max-width:560px">
<div class="mh"><span class="mht">Görev Ekle</span><button class="mclose" onclick="cm('gorev-ekle')">✕</button></div>
<div class="mbody">
<div style="display:flex;gap:8px;margin-bottom:16px">
<button id="gt-manuel-btn" onclick="switchGorevType('manuel')" style="flex:1;padding:12px;border-radius:7px;border:2px solid var(--d);background:var(--d);color:#fff;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500">✍️ Manuel Görev</button>
<button id="gt-rutin-btn" onclick="switchGorevType('rutin')" style="flex:1;padding:12px;border-radius:7px;border:2px solid var(--bd);background:var(--bg);color:var(--t2);cursor:pointer;font-family:inherit;font-size:12.5px">♻️ Rutin Görev</button>
</div>
<div class="fg"><label class="fl2">Görev başlığı *</label><input class="fi" placeholder="Görev adı / açıklama"></div>
<div class="fg"><label class="fl2">Konum / Alan</label><input class="fi" placeholder="Örn: A1 Blok, 3. Kat, Bodrum..."></div>
<div class="g2f">
<div class="fg"><label class="fl2">Atanan personel *</label>
<select class="fi"><option>— Personel seç —</option><option>Kemal Usta (Elektrik)</option><option>Murat Aydın (Elektrik)</option><option>Serkan Arslan (Elektrik)</option><option>Hasan Koç (Mekanik)</option><option>Osman Demir (Mekanik)</option><option>Zeynep Kaya (Temizlik)</option></select>
</div>
<div class="fg"><label class="fl2">Saat *</label><input class="fi" type="time" value="09:00"></div>
</div>
<div class="g2f">
<div class="fg"><label class="fl2">Tarih *</label><input class="fi" type="date"></div>
<div class="fg"><label class="fl2">Öncelik</label>
<select class="fi"><option>🟢 Normal</option><option>🟡 Yüksek</option><option>🔴 Acil</option></select>
</div>
</div>
<!-- Rutin fields (hidden by default) -->
<div id="gt-rutin-fields" style="display:none">
<div style="background:var(--grn-bg);border:.5px solid var(--grn-bd);border-radius:6px;padding:10px 12px;margin-bottom:13px;font-size:12px;color:var(--grn)">♻️ Rutin görev oluşturulduktan sonra her gün/hafta otomatik listelenecektir.</div>
<div class="fg"><label class="fl2">Tekrar sıklığı</label>
<select class="fi" onchange="document.getElementById('rg-gunler').style.display=this.value==='haftalik'?'block':'none'">
<option value="gunluk">Her gün (Günlük)</option>
<option value="haftalik">Belirli günler (Haftalık)</option>
<option value="aylik">Her ay (Aylık)</option>
</select>
</div>
<div id="rg-gunler" style="display:none" class="fg">
<label class="fl2">Hangi günler?</label>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Pzt</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Sal</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Çar</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Per</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Cum</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox">Cmt</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox">Paz</label>
</div>
</div>
</div>
<div class="fg"><label class="fl2">Açıklama / Not</label><textarea class="fi" rows="2" placeholder="Görev hakkında ek detaylar..."></textarea></div>
<!-- Second person -->
<div class="fg"><label class="fl2">2. Personel (opsiyonel)</label>
<select class="fi"><option>— Ek personel seç (opsiyonel) —</option><option>Kemal Usta</option><option>Murat Aydın</option><option>Hasan Koç</option><option>Osman Demir</option><option>Zeynep Kaya</option></select>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('gorev-ekle')">İptal</button>
<button class="btn bdk2" onclick="cm('gorev-ekle');alert('Görev oluşturuldu!')">Görevi Ekle</button>
</div>
</div>
</div>
</div>
<!-- GÖREV EKLE TYPE MODAL -->
<div class="mo" id="mo-gorev-ekle-type">
<div class="mb" style="max-width:440px">
<div class="mh"><span class="mht">Görev Ekle</span><button class="mclose" onclick="cm('gorev-ekle-type')">✕</button></div>
<div class="mbody">
<div style="font-size:12.5px;color:var(--t2);margin-bottom:16px">Eklemek istediğiniz görev türünü seçin:</div>
<div style="display:flex;flex-direction:column;gap:10px">
<div onclick="cm('gorev-ekle-type');om('task')" style="display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg2);border:.5px solid var(--bd);border-radius:8px;cursor:pointer;transition:border-color .15s" onmouseover="this.style.borderColor='#111'" onmouseout="this.style.borderColor=''">
<div style="width:42px;height:42px;border-radius:8px;background:#fff;border:.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">✍️</div>
<div><div style="font-size:13px;font-weight:500;color:var(--t1);margin-bottom:3px">Manuel Görev</div><div style="font-size:11.5px;color:var(--t3)">Personele tek seferlik özel görev ata</div></div>
</div>
<div onclick="cm('gorev-ekle-type');om('rutin-gorev')" style="display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg2);border:.5px solid var(--bd);border-radius:8px;cursor:pointer;transition:border-color .15s" onmouseover="this.style.borderColor='#111'" onmouseout="this.style.borderColor=''">
<div style="width:42px;height:42px;border-radius:8px;background:#fff;border:.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">♻️</div>
<div><div style="font-size:13px;font-weight:500;color:var(--t1);margin-bottom:3px">Rutin Görev</div><div style="font-size:11.5px;color:var(--t3)">Her gün/hafta/ay otomatik tekrarlanan görev ekle</div></div>
</div>
</div>
</div>
</div>
</div>
<!-- RUTİN GÖREV EKLE MODAL -->
<div class="mo" id="mo-rutin-gorev">
<div class="mb">
<div class="mh"><span class="mht">Rutin Görev Ekle</span><button class="mclose" onclick="cm('rutin-gorev')">✕</button></div>
<div class="mbody">
<div class="fg"><label class="fl2">Görev başlığı *</label><input class="fi" placeholder="Görev adı"></div>
<div class="fg"><label class="fl2">Konum / Açıklama</label><input class="fi" placeholder="Örn: Tüm bloklar, A1 Blok 3. kat..."></div>
<div class="g2f">
<div class="fg"><label class="fl2">Atanan personel *</label>
<select class="fi"><option>Kemal Usta</option><option>Murat Aydın</option><option>Hasan Koç</option><option>Osman Demir</option><option>Zeynep Kaya</option></select>
</div>
<div class="fg"><label class="fl2">Saat *</label><input class="fi" type="time" value="08:00"></div>
</div>
<div class="fg"><label class="fl2">Tekrar sıklığı *</label>
<select class="fi" onchange="document.getElementById('rutin-gun-sec').style.display=this.value==='haftalik'?'block':'none'">
<option value="gunluk">Her gün (Günlük)</option>
<option value="haftalik">Belirli günler (Haftalık)</option>
<option value="aylik">Her ay (Aylık)</option>
</select>
</div>
<div id="rutin-gun-sec" style="display:none" class="fg">
<label class="fl2">Hangi günler?</label>
<div style="display:flex;gap:6px;flex-wrap:wrap">
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Pzt</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Sal</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Çar</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Per</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox" checked>Cum</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox">Cmt</label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px"><input type="checkbox">Paz</label>
</div>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('rutin-gorev')">İptal</button>
<button class="btn bdk2" onclick="cm('rutin-gorev');alert('Rutin görev oluşturuldu! Yarından itibaren otomatik listelenecek.')">Rutin Görevi Ekle</button>
</div>
</div>
</div>
</div>
<!-- ADD MAĞAZA SAHİBİ MODAL -->
<div class="mo" id="mo-add-magaza-sahibi">
<div class="mb">
<div class="mh"><span class="mht">Mağaza Sahibi Ekle</span><button class="mclose" onclick="cm('add-magaza-sahibi')">✕</button></div>
<div class="mbody">
<div class="g2f">
<div class="fg"><label class="fl2">Ad *</label><input class="fi" placeholder="Ad"></div>
<div class="fg"><label class="fl2">Soyad *</label><input class="fi" placeholder="Soyad"></div>
</div>
<div class="fg"><label class="fl2">E-posta *</label><input class="fi" type="email" placeholder="magaza@email.com"></div>
<div class="fg"><label class="fl2">Telefon *</label><input class="fi" type="tel" placeholder="05xx xxx xx xx"></div>
<div class="fg"><label class="fl2">Mağaza / Ofis *</label>
<select class="fi"><option>Starbucks</option><option>Burger Lab</option><option>Pizza Mia</option><option>Gurme Mutfak</option><option>Güzellik Merkezi</option><option>Migros</option><option>Defacto</option></select>
</div>
<div class="fg"><label class="fl2">Rol</label>
<select class="fi"><option>Mağaza Sahibi</option><option>Mağaza Yöneticisi</option><option>Mağaza Personeli</option></select>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px">
<button class="btn bou" onclick="cm('add-magaza-sahibi')">İptal</button>
<button class="btn bdk2" onclick="cm('add-magaza-sahibi');alert('Mağaza sahibi eklendi!')">Kaydet</button>
</div>
</div>
</div>
</div>
<!-- YENİ KAMPANYA MODAL -->
<div class="mo" id="mo-yeni-kamp">
<div class="mb lg" style="max-width:560px">
<div class="mh"><span class="mht">Yeni Kampanya Oluştur</span><button class="mclose" onclick="cm('yeni-kamp')">✕</button></div>
<div class="mbody">
<!-- Campaign image -->
<div class="fg"><label class="fl2">Kampanya görseli</label>
<div class="upz2" onclick="alert('Görsel seçici açıldı')" style="display:flex;align-items:center;gap:16px;text-align:left;padding:12px 16px">
<div style="width:60px;height:60px;border-radius:8px;background:linear-gradient(135deg,#111,#333);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0" id="kamp-preview-img">☕</div>
<div>
<div class="upz2-t">Görsel yükle</div>
<div class="upz2-s">JPG, PNG veya GIF · Maks. 2MB · 800×600 önerilen</div>
<div style="display:flex;gap:6px;margin-top:7px">
<button class="btn bou bsm" onclick="event.stopPropagation();alert('Dosya seç')">📁 Dosya seç</button>
<button class="btn bou bsm" onclick="event.stopPropagation();var ic=prompt('Emoji kullan:','☕');if(ic) document.getElementById('kamp-preview-img').textContent=ic">😀 Emoji</button>
</div>
</div>
</div>
</div>
<div class="fg"><label class="fl2">Kampanya adı *</label><input class="fi" placeholder="Örn: Hafta sonu %25 indirim"></div>
<div class="fg"><label class="fl2">Mağaza *</label>
<select class="fi"><option>Seçin...</option><option>Starbucks</option><option>Burger Lab</option><option>Pizza Mia</option><option>Gurme Mutfak</option><option>Güzellik Merkezi</option><option>Migros</option><option>Macrocenter</option><option>Watsons</option><option>Defacto</option></select>
</div>
<div class="g2f">
<div class="fg"><label class="fl2">Kampanya türü *</label>
<select class="fi" id="kamp-tur-sel" onchange="kampTurChange()">
<option value="">Seçin...</option>
<option value="flash">⚡ Flash (saatlik)</option>
<option value="sureli">📅 Süreli (tarih aralıklı)</option>
<option value="surekli">♾️ Sürekli</option>
</select>
</div>
<div class="fg"><label class="fl2">İndirim türü *</label>
<select class="fi" id="kamp-indirim-sel" onchange="kampIndirimChange()">
<option value="">Seçin...</option>
<option value="yuzde">% Yüzde indirim</option>
<option value="tutar">₺ Tutar indirimi</option>
<option value="2al1">2 Al 1 Öde</option>
<option value="ucretsiz">🎁 Ücretsiz ürün/hizmet</option>
</select>
</div>
</div>
<div id="kamp-indirim-deger" style="display:none" class="fg">
<label class="fl2" id="kamp-deger-lbl">İndirim değeri *</label>
<input class="fi" id="kamp-deger-inp" type="number" placeholder="Örn: 25">
</div>
<div id="kamp-flash-sure" style="display:none" class="fg">
<label class="fl2">Flash süre (saat) *</label>
<div style="display:flex;gap:8px">
<input class="fi" type="number" placeholder="2" min="1" max="24" style="flex:1">
<select class="fi" style="flex:1"><option>Şimdi başlat</option><option>Zamanla</option></select>
</div>
</div>
<div id="kamp-tarih-aralik" style="display:none">
<div class="g2f">
<div class="fg"><label class="fl2">Başlangıç tarihi *</label><input class="fi" type="date"></div>
<div class="fg"><label class="fl2">Bitiş tarihi *</label><input class="fi" type="date"></div>
</div>
</div>
<div class="fg"><label class="fl2">Açıklama</label><textarea class="fi" rows="2" placeholder="Kampanya detayı, şartlar veya notlar..."></textarea></div>
<div class="g2f">
<div class="fg"><label class="fl2">Maksimum kupon adedi</label><input class="fi" type="number" placeholder="Sınırsız için boş bırakın"></div>
<div class="fg"><label class="fl2">Kampanya görseli (emoji)</label><input class="fi" placeholder="☕" maxlength="2"></div>
</div>
<div style="background:var(--ylw-bg);border:.5px solid var(--ylw-bd);border-radius:5px;padding:10px;font-size:12px;color:var(--ylw);margin-bottom:14px">⚠️ Kampanya yönetici onayına gönderilecek. Onaylandıktan sonra yayınlanır.</div>
<div style="display:flex;gap:8px;justify-content:flex-end">
<button class="btn bou" onclick="cm('yeni-kamp')">İptal</button>
<button class="btn bdk2" onclick="cm('yeni-kamp');alert('Kampanya onaya gönderildi!')">Onaya Gönder →</button>
</div>
</div>
</div>
</div>
</body>
</html>