:root[data-theme="light"]{
  --bg:#F2F6F8;--card:#FFFFFF;--ink:#08181F;--dim:#5F7A85;
  --line:#E2ECF0;--line-hi:#C8DAE1;
  --ecg:#00A76A;--spo2:#0E96C4;--resp:#D98A0B;--alarm:#E23E57;--iv:#7A5CD8;
  --paper-a:rgba(226,86,86,.13);--paper-b:rgba(226,86,86,.06);
  --sh-1:0 1px 2px rgba(8,24,31,.05),0 2px 8px rgba(8,24,31,.04);
  --sh-2:0 2px 6px rgba(8,24,31,.05),0 20px 46px -20px rgba(8,24,31,.24);
  --sh-3:0 30px 70px -30px rgba(8,24,31,.42);
  --scr:#FBFDFD;--tile-hi:rgba(255,255,255,.8);
  --glow-a:rgba(0,167,106,.12);--glow-b:rgba(14,150,196,.12);
}
:root[data-theme="dark"]{
  --bg:#04080C;--card:#0A141A;--ink:#E6F1F4;--dim:#7E94A0;
  --line:rgba(120,190,210,.15);--line-hi:rgba(120,190,210,.3);
  --ecg:#00E07A;--spo2:#35D6FF;--resp:#FFD23F;--alarm:#FF5C7A;--iv:#A78BFA;
  --paper-a:rgba(0,224,122,.07);--paper-b:rgba(0,224,122,.035);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 20px 46px -20px rgba(0,0,0,.85);
  --sh-3:0 30px 80px -30px #000;
  --scr:#07110F;--tile-hi:rgba(255,255,255,.06);
  --glow-a:rgba(0,224,122,.16);--glow-b:rgba(53,214,255,.14);
}
:root{
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(20px,4.4vw,72px);--r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ecg);outline-offset:3px}
.wrap{max-width:1300px;margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ===== ikon sistemi ===== */
.ic{display:grid;place-content:center;place-items:center;flex:none;padding:0;line-height:0;border-radius:16px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--ch) 22%,transparent),color-mix(in srgb,var(--ch) 7%,transparent));
  border:1px solid color-mix(in srgb,var(--ch) 28%,transparent);
  box-shadow:inset 0 1px 0 var(--tile-hi);transition:border-color .3s,background .3s}
.ic-xl{width:72px;height:72px;border-radius:19px}.ic-xl svg{width:38px;height:38px}
.ic-lg{width:64px;height:64px}.ic-lg svg{width:34px;height:34px}
.ic-md{width:52px;height:52px;border-radius:14px}.ic-md svg{width:28px;height:28px}
.ic-sm{width:42px;height:42px;border-radius:12px}.ic-sm svg{width:22px;height:22px}
.ic svg{stroke:var(--ch);stroke-width:1.55;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}
.ic svg .sf{fill:var(--ch);opacity:.2;stroke:none}
svg:not(.ic svg){fill:none;stroke-linecap:round;stroke-linejoin:round}
/* hover: ikon transform ile değil, vektör yeniden çizilerek büyür (netlik korunur) */
.ic svg{transition:width .3s cubic-bezier(.2,.7,.3,1),height .3s cubic-bezier(.2,.7,.3,1)}
.card:hover .ic-xl svg{width:42px;height:42px}
.plan:hover .ic-lg svg{width:37px;height:37px}
.sc:hover .ic-md svg,.mod:hover .ic-md svg,.wc:hover .ic-md svg,.dl:hover .ic-md svg{width:31px;height:31px}
.step:hover .ic-sm svg,.meta-row:hover .ic-sm svg{width:24px;height:24px}
.sc:hover .ic,.mod:hover .ic,.wc:hover .ic,.dl:hover .ic,.card:hover .ic,.plan:hover .ic{
  border-color:color-mix(in srgb,var(--ch) 52%,transparent);
  background:linear-gradient(155deg,color-mix(in srgb,var(--ch) 30%,transparent),color-mix(in srgb,var(--ch) 10%,transparent));
}

/* ===== zemin ===== */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(120px)}
.g1{width:56vw;height:48vw;background:radial-gradient(circle,var(--glow-a),transparent 68%);top:-18vw;left:-10vw;animation:d1 30s ease-in-out infinite}
.g2{width:48vw;height:44vw;background:radial-gradient(circle,var(--glow-b),transparent 68%);top:40vh;right:-14vw;animation:d2 36s ease-in-out infinite}
@keyframes d1{50%{transform:translate3d(6vw,5vh,0) scale(1.12)}}
@keyframes d2{50%{transform:translate3d(-8vw,-6vh,0) scale(.9)}}

/* ===== nav ===== */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .35s}
.nav.stuck{box-shadow:var(--sh-1)}
.nav-in{display:flex;align-items:center;gap:22px;height:78px}
.brand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand{gap:0;align-items:center}

.brand .marka-yazi{
  line-height:1;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.9vw,26px);letter-spacing:-.025em;white-space:nowrap;
  /* Logodaki M'nin optik tabanıyla hizala */
  position:relative;top:.06em;
}
.brand .marka-yazi b{font-weight:700}
.brand .marka-yazi .ince{font-weight:500;opacity:.72;margin-left:.28em}
.links{display:flex;gap:22px;margin-left:auto}
.links a{font-size:14.5px;font-weight:500;color:var(--dim);transition:color .25s}
.links a:hover{color:var(--ink)}
.tools{display:flex;gap:10px;align-items:center;flex:none}
.toggle{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-hi);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.25s}
.toggle:hover{border-color:var(--ecg)}
.toggle svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none}
.btn{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:13px 22px;border-radius:12px;border:1px solid var(--line-hi);display:inline-flex;align-items:center;gap:9px;transition:.26s;white-space:nowrap;cursor:pointer;background:var(--card);color:var(--ink)}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
.btn:hover{border-color:var(--ecg);transform:translateY(-1px)}
.btn-p{background:var(--ecg);color:#fff;border-color:var(--ecg);font-weight:600;box-shadow:0 10px 26px -10px var(--ecg)}
.btn-p:hover{filter:brightness(1.08)}
.burger{display:none;background:var(--card);border:1px solid var(--line-hi);border-radius:12px;padding:12px 15px;color:var(--ink);font-family:var(--mono);font-size:11px;cursor:pointer}

/* ===== hero ===== */
.hero{padding:clamp(40px,5.5vw,74px) 0 clamp(38px,5vw,64px)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 15px;border-radius:100px;border:1px solid var(--line-hi);background:var(--card);color:var(--dim);margin-bottom:26px;box-shadow:var(--sh-1)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--ecg);box-shadow:0 0 10px var(--ecg)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.8vw,74px);line-height:1.05;letter-spacing:-.035em;max-width:18ch}
.grad{background:linear-gradient(96deg,var(--ecg),var(--spo2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:24px;max-width:60ch;font-size:clamp(16px,1.45vw,19px);color:var(--dim)}
.cta{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}

/* ===== monitör ===== */
.device{margin-top:clamp(40px,5.5vw,68px);border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden}
.bezel{display:flex;align-items:center;gap:13px;padding:14px 20px;border-bottom:1px solid var(--line);color:var(--dim);flex-wrap:wrap}
.leds{display:flex;gap:6px}
.leds i{width:8px;height:8px;border-radius:50%;background:var(--line-hi)}
.leds i:first-child{background:var(--ecg);box-shadow:0 0 9px var(--ecg)}
.bezel .right{margin-left:auto}
.screen{display:grid;grid-template-columns:1fr 268px;background:var(--scr)}
.traces{position:relative;border-right:1px solid var(--line);
  background-image:linear-gradient(var(--paper-a) 1px,transparent 1px),linear-gradient(90deg,var(--paper-a) 1px,transparent 1px),
                   linear-gradient(var(--paper-b) 1px,transparent 1px),linear-gradient(90deg,var(--paper-b) 1px,transparent 1px);
  background-size:25px 25px,25px 25px,5px 5px,5px 5px}
#scope{width:100%;height:296px;display:block}
.chan{position:absolute;left:14px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;pointer-events:none;display:flex;align-items:center;gap:6px}
.chan svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;fill:none}
.readouts{display:flex;flex-direction:column;background:var(--card)}
.ro{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.ro:last-child{border-bottom:0;margin-top:auto}
.ro .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:6px}
.ro .k svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}
.ro .v{font-family:var(--mono);font-weight:600;font-size:clamp(21px,2.4vw,30px);font-variant-numeric:tabular-nums;line-height:1.18;display:flex;align-items:baseline;gap:6px}
.ro .u{font-size:11px;color:var(--dim)}
.st{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px}
.dot{width:10px;height:10px;border-radius:50%;flex:none;position:relative}
.dot.on{background:var(--ecg);box-shadow:0 0 12px var(--ecg)}
.dot.off{background:var(--resp);box-shadow:0 0 12px var(--resp)}
.dot.on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ecg);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.75);opacity:0}}

/* ===== dört hizmet ===== */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,4vw,44px)}
.sc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px 26px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--sh-1);transition:.3s;--ch:var(--ecg)}
.sc:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.sc h4{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:5px}
.sc p{font-size:13.5px;color:var(--dim);line-height:1.5}

/* ===== sektör şeridi ===== */
.marq{overflow:hidden;border-bottom:1px solid var(--line);background:var(--card);padding:13px 0;position:relative;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marq-in{display:flex;gap:16px;width:max-content;animation:slide 42s linear infinite}
.mi{display:flex;align-items:center;gap:10px;padding:8px 17px;border:1px solid var(--line);border-radius:100px;white-space:nowrap;font-size:14px;color:var(--dim);--ch:var(--spo2)}
.mi svg{width:19px;height:19px;stroke:var(--ch);stroke-width:1.6;fill:none}
.mi svg .sf{fill:var(--ch);opacity:.2;stroke:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===== bölüm ===== */
.sec{padding:clamp(62px,8vw,116px) 0}
.head{margin-bottom:44px}
.head .mono{color:var(--ecg);font-weight:500}
.head h2{font-family:var(--display);font-weight:700;font-size:clamp(27px,4.2vw,50px);letter-spacing:-.035em;line-height:1.08;margin-top:13px;max-width:20ch}
.head p{color:var(--dim);max-width:60ch;margin-top:15px}

/* ===== ürün kartları ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:22px}
.own{position:absolute;top:18px;right:20px;z-index:3;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;background:var(--ch);color:#fff;box-shadow:0 6px 16px -8px var(--ch)}
.own svg{width:12px;height:12px;stroke:#fff;stroke-width:2;fill:none}
.own.partner{background:transparent;color:var(--dim);border:1px solid var(--line-hi);box-shadow:none}
.own.partner svg{stroke:var(--dim)}
.card .wave{top:58px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 0 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--sh-1);transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s}
.card>*:not(.bar):not(.wave):not(.ic){padding-left:28px;padding-right:28px}
.card .ic{margin:30px 0 0 28px}
.bar{height:4px;background:var(--ch)}
.wave{position:absolute;top:32px;right:24px;width:88px;height:28px;opacity:.42}
.wave svg{width:100%;height:100%;stroke:var(--ch);stroke-width:1.8;fill:none}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-2);border-color:var(--ch)}
.card h3{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.025em;margin-top:20px}
.card>p{color:var(--dim);font-size:15px;margin-top:11px}
.feat{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px}
.feat li{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;color:var(--dim)}
.feat svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--ch);stroke-width:1.8;fill:none}
.more{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ch);display:inline-flex;gap:8px;align-items:center;margin-top:24px}
.more i{transition:transform .3s;font-style:normal}
.card:hover .more i{transform:translateX(6px)}
.who{margin-top:auto;padding-top:16px;color:var(--dim);font-size:13px;opacity:.85;display:flex;align-items:center;gap:9px;position:relative}
.who svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;flex:none}
.who::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}

/* ===== filtre sekmeleri ===== */
.tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-hi);background:var(--card);border-radius:100px;padding:10px 18px;color:var(--dim);cursor:pointer;transition:.24s;display:inline-flex;align-items:center;gap:8px}
.tab svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.tab:hover{border-color:var(--ecg);color:var(--ink)}
.tab.on{background:var(--ecg);border-color:var(--ecg);color:#fff}

/* ===== modüller ===== */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mod{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s,border-color .3s,opacity .3s}
.mod.hide{display:none}
.mod:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--ch) 55%,transparent)}
.mod h4{font-family:var(--display);font-weight:600;font-size:15.5px}
.mod span{font-size:13px;color:var(--dim);line-height:1.5}
.integr{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--line-hi);background:var(--card);border-radius:100px;padding:9px 16px;color:var(--dim);transition:.25s;display:inline-flex;align-items:center;gap:8px}
.pill svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.pill:hover{border-color:var(--spo2);color:var(--spo2)}

/* ===== indirme merkezi ===== */
.dls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:15px;box-shadow:var(--sh-1);transition:.3s;position:relative;overflow:hidden}
.dl::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ch);opacity:0;transition:opacity .3s}
.dl:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--ch)}
.dl:hover::before{opacity:1}
.dl-top{display:flex;gap:15px;align-items:flex-start}
.dl h4{font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.015em;margin-bottom:5px}
.dl-top p{font-size:13.5px;color:var(--dim);line-height:1.5}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px}
.mtag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--dim);display:inline-flex;align-items:center;gap:6px}
.mtag svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
.dl .btn{margin-top:auto;justify-content:center;width:100%}
.dl-note{margin-top:24px;display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px dashed var(--line-hi);border-radius:14px;color:var(--dim);font-size:14px}
.dl-note svg{width:23px;height:23px;stroke:var(--resp);stroke-width:1.7;fill:none;flex:none;margin-top:2px}

/* ===== neden marta ===== */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wc{display:flex;gap:17px;align-items:flex-start;padding:26px 24px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);transition:.3s}
.wc:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.wc h4{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:6px}
.wc p{font-size:14px;color:var(--dim)}

/* ===== destek paketleri ===== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 32px;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:.3s;position:relative}
.plan:hover{transform:translateY(-7px);box-shadow:var(--sh-2);border-color:var(--ch)}
.plan.lead{border-color:var(--ch);box-shadow:var(--sh-2)}
.plan .badge{position:absolute;top:-11px;left:26px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--ch);color:#fff;padding:5px 12px;border-radius:100px}
.plan h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin:18px 0 8px}
.plan>p{color:var(--dim);font-size:14.5px;margin-bottom:20px}
.plan .feat{margin-top:0;flex:1}
.plan .feat li.no{opacity:.45}
.plan .btn{margin-top:24px;justify-content:center}

/* ===== SSS ===== */
.faq{display:flex;flex-direction:column;gap:12px;max-width:900px}
.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-1);transition:border-color .25s}
.qa.open{border-color:var(--ecg)}
.qa button{width:100%;background:none;border:0;text-align:left;padding:20px 22px;display:flex;align-items:center;gap:14px;cursor:pointer;color:var(--ink);font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.4}
.qa button svg{width:20px;height:20px;stroke:var(--ecg);stroke-width:2;fill:none;flex:none;margin-left:auto;transition:transform .3s}
.qa.open button svg{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa .a p{padding:0 22px 22px;color:var(--dim);font-size:15px}

/* ===== süreç ===== */
.steps{position:relative;padding-left:clamp(24px,4.5vw,52px)}
.rail{position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--line);border-radius:3px;overflow:hidden}
.rail i{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--ecg),var(--spo2));display:block}
.step{display:grid;grid-template-columns:62px 1fr 1.25fr;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:.3s;border-radius:12px;--ch:var(--ecg)}
.step:hover{padding-left:14px;background:color-mix(in srgb,var(--ecg) 6%,transparent)}
.step h3{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.1vw,24px);letter-spacing:-.025em}
.step h3 small{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ecg);display:block;letter-spacing:.14em;margin-bottom:3px}
.step p{color:var(--dim);font-size:15px}

/* ===== iletişim ===== */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:start}
.meta{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.meta-row{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center;--ch:var(--ecg)}
.meta-row:last-child{border-bottom:0}
.meta-row div{display:flex;flex-direction:column;gap:2px}
.meta-row .mono{color:var(--dim)}
.meta-row strong{font-family:var(--display);font-weight:600;font-size:17px}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);box-shadow:var(--sh-1)}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
input,select,textarea{font-family:var(--body);font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line-hi);border-radius:11px;padding:13px 14px;transition:.22s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ecg);box-shadow:0 0 0 4px color-mix(in srgb,var(--ecg) 15%,transparent)}
select option{background:var(--card);color:var(--ink)}
textarea{resize:vertical;min-height:110px}
.kvkk{grid-column:1/-1;font-size:12.5px;color:var(--dim)}
.kvkk a{border-bottom:1px solid var(--line-hi)}
form .btn-p{grid-column:1/-1;justify-self:start}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ===== footer ===== */
footer{border-top:1px solid var(--line);padding:40px 0;position:relative;z-index:2;background:var(--card)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .mono,.foot a{color:var(--dim)}
.foot a{display:inline-flex;align-items:center;gap:7px}
.foot a:hover{color:var(--ink)}
.foot svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

.rv{opacity:0;transform:translateY(26px);transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:1080px){
  .screen{grid-template-columns:1fr}
  .traces{border-right:0;border-bottom:1px solid var(--line)}
  .readouts{flex-direction:row;flex-wrap:wrap}
  .ro{flex:1 1 46%;border-right:1px solid var(--line)}
  .ro:last-child{margin-top:0}
  .strip,.why,.dls{grid-template-columns:repeat(2,1fr)}
  .cards,.plans{grid-template-columns:1fr}
  .mods{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
}
@media(max-width:820px){
  .links,.nav .btn-p{display:none}
  .burger{display:block}
  .links.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100px;
    left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);
    padding:22px var(--gut);gap:4px;box-shadow:var(--sh-2);height:auto}
  .links.open a{height:auto;padding:11px 0;width:100%;font-size:16px}
  .links.open a::after{display:none}
  .strip,.why,.dls{grid-template-columns:1fr}
  #scope{height:230px}
  .step{grid-template-columns:48px 1fr;gap:14px}
  .step p{grid-column:2}
  form{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}}

/* FontAwesome ikonları, SVG ikon sistemiyle aynı ölçüde görünsün */
.ic i{font-size:calc(var(--ic-boy, 28px));color:var(--ch);line-height:1;
      transition:font-size .3s cubic-bezier(.2,.7,.3,1)}
.ic-xl{--ic-boy:34px}.ic-lg{--ic-boy:30px}.ic-md{--ic-boy:24px}.ic-sm{--ic-boy:19px}
.card:hover .ic-xl i{font-size:38px}
.plan:hover .ic-lg i{font-size:33px}
.sc:hover .ic-md i,.mod:hover .ic-md i,.wc:hover .ic-md i,.dl:hover .ic-md i{font-size:27px}
.feat li i,.who i,.mi i,.btn i,.more i.fa-solid{color:var(--ch,var(--ecg));flex:none}
.feat li i{margin-top:4px;font-size:14px}
.who i{font-size:14px;color:currentColor}
.mi i{font-size:16px;color:var(--ch)}
.btn i{font-size:13px}
.own i{font-size:10px;margin-right:2px}
.foot a i{font-size:13px}
.links a i{font-size:13px;margin-right:6px;opacity:.75}

@media(max-width:520px){ .brand{--logo-boy:50px} .brand .marka-yazi{font-size:18px} }

/* Koyu temada logonun koyu gri parçası zeminle kaynaşmasın diye hafif aydınlatılır */
:root[data-theme="dark"] 

/* ---- indirme kartı durumları ---- */
.dl.yakinda{opacity:.72}
.dl.yakinda .ic{filter:grayscale(.65)}
.dl-butonlar{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto}
.dl-butonlar .btn{flex:1 1 auto;justify-content:center;min-width:112px}
.yakinda-rozet{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:11px 20px;border-radius:100px;
  background:color-mix(in srgb,var(--dim) 14%,transparent);color:var(--dim);
  display:inline-flex;align-items:center;gap:8px}

/* ===== destek talepleri (müşteri paneli) ===== */
.talep-duzen{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:start}
.talep-liste{display:flex;flex-direction:column;gap:10px}
.talep-satir{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 18px;
  box-shadow:var(--sh-1);transition:.25s}
.talep-satir:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--ecg)}
.talep-satir strong{display:block;font-size:15px;margin-bottom:3px}
.talep-basi{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.konusma{display:flex;flex-direction:column;gap:14px}
.balon{max-width:min(620px,86%);border:1px solid var(--line);border-radius:16px;padding:16px 20px;
  background:var(--card);box-shadow:var(--sh-1)}
.balon.musteri{align-self:flex-end;border-color:color-mix(in srgb,var(--ecg) 34%,transparent);
  background:color-mix(in srgb,var(--ecg) 7%,var(--card))}
.balon.marta{align-self:flex-start;border-left:3px solid var(--spo2)}
.balon-ust{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.balon-ust strong{font-family:var(--display);font-size:14.5px}
.balon-ust span{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.balon p{font-size:15px;color:var(--ink);line-height:1.6}
.duz{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--dim)}
.etiket{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;display:inline-block;white-space:nowrap;margin-right:6px}
.e-aktif{background:color-mix(in srgb,var(--ecg) 16%,transparent);color:var(--ecg)}
.e-uyari{background:color-mix(in srgb,var(--resp) 18%,transparent);color:var(--resp)}
.e-pasif{background:color-mix(in srgb,var(--alarm) 14%,transparent);color:var(--alarm)}
.e-notr {background:color-mix(in srgb,var(--dim) 14%,transparent);color:var(--dim)}
@media(max-width:900px){
  .talep-duzen{grid-template-columns:1fr}
  .balon{max-width:100%}
}


/* ==========================================================================
   MARKA RENGİ — logodaki turuncu
   Monitördeki kanal renkleri (yeşil EKG, mavi SpO2, sarı solunum) tıbbi
   kodlamadır, bu yüzden değişmez. Arayüz vurguları markaya bağlanır.
   ========================================================================== */
:root[data-theme="light"]{--marka:#E07B22;--marka-2:#B85C15;--marka-yumusak:rgba(224,123,34,.12)}
:root[data-theme="dark"] {--marka:#F59440;--marka-2:#E07B22;--marka-yumusak:rgba(245,148,64,.16)}

:focus-visible{outline-color:var(--marka)}
.btn-p{background:var(--marka);border-color:var(--marka);box-shadow:0 10px 26px -10px var(--marka)}
.btn-p:hover{background:var(--marka-2);border-color:var(--marka-2)}
.btn:hover{border-color:var(--marka)}
.toggle:hover{border-color:var(--marka)}
.head .mono{color:var(--marka)}
.chip i{background:var(--marka);box-shadow:0 0 10px var(--marka)}
.grad{background:linear-gradient(96deg,var(--marka),var(--spo2));-webkit-background-clip:text;background-clip:text}
.links a::after{background:var(--marka)}
.links a:hover{color:var(--marka)}
.step-n,.step h3 small{color:var(--marka)}
.step:hover{background:var(--marka-yumusak)}
.rail i{background:linear-gradient(180deg,var(--marka),var(--spo2))}
.qa.open{border-color:var(--marka)}
.qa button svg{stroke:var(--marka)}
.tab:hover{border-color:var(--marka);color:var(--ink)}
.tab.on{background:var(--marka);border-color:var(--marka)}
input:focus,select:focus,textarea:focus{border-color:var(--marka);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--marka) 16%,transparent)}
.pill:hover{border-color:var(--marka);color:var(--marka)}
.talep-satir:hover{border-color:var(--marka)}

/* ---- üst menü ikonları ---- */
.links a i{font-size:12.5px;opacity:.6;transition:opacity .25s,color .25s}
.links a:hover i,.links a[aria-current="page"] i{opacity:1;color:var(--marka)}

/* ---- monitör altındaki eylem çubuğu ---- */
.monitor-eylem{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.monitor-eylem a{display:flex;align-items:center;justify-content:center;gap:11px;
  padding:18px 20px;background:var(--card);font-family:var(--display);font-weight:600;
  font-size:15.5px;letter-spacing:-.01em;transition:.25s}
.monitor-eylem a i{font-size:19px}
.monitor-eylem a.ara{color:var(--marka)}
.monitor-eylem a.ara:hover{background:var(--marka);color:#fff}
.monitor-eylem a.wa{color:#1FA855}
.monitor-eylem a.wa:hover{background:#1FA855;color:#fff}
.monitor-eylem small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.65;font-weight:400;margin-top:2px}

/* ---- referans şeridi ---- */
.ref-bant{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--card);padding:clamp(30px,4vw,48px) 0;position:relative;z-index:2}
.ref-baslik{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);text-align:center;margin-bottom:26px}
.ref-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.ref-kart{display:flex;align-items:center;gap:15px;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:var(--bg);transition:.28s}
.ref-kart:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--marka)}
.ref-kart img{width:52px;height:52px;object-fit:contain;flex:none;border-radius:9px;background:#fff;padding:5px}
.ref-harf{width:52px;height:52px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--marka),var(--marka-2));color:#fff;
  font-family:var(--display);font-weight:700;font-size:21px}
.ref-kart strong{display:block;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.3}
.ref-kart span{font-size:12.5px;color:var(--dim);line-height:1.4}

/* ---- footer sosyal ikonları ---- */
.foot-links{gap:12px;align-items:center}
.foot-links a{width:auto;padding:10px 16px;border:1px solid var(--line);border-radius:100px;
  transition:.25s;font-size:13px}
.foot-links a i{font-size:17px}
.foot-links a:hover{border-color:var(--marka);color:var(--marka);transform:translateY(-2px)}
.foot-links a.sosyal{width:46px;height:46px;padding:0;justify-content:center;border-radius:50%}
.foot-links a.sosyal i{font-size:19px}
.foot-links a.sosyal:hover{background:var(--marka);border-color:var(--marka);color:#fff}

@media(max-width:640px){
  .monitor-eylem{grid-template-columns:1fr}
}


/* ==========================================================================
   ÜST BAR — yeniden
   Tek satır, taşma yok, dar ekranda kademeli sadeleşir.
   ========================================================================== */
.nav-in{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);height:auto;min-height:88px;
  padding-top:10px;padding-bottom:10px;flex-wrap:nowrap}
.brand{flex:0 0 auto}

.links{
  display:flex;align-items:center;gap:clamp(6px,1vw,18px);
  margin-left:auto;height:auto;flex:1 1 auto;justify-content:flex-end;
  min-width:0;flex-wrap:nowrap;overflow:visible;
}
.links a{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  height:auto;padding:9px 2px;font-size:14.2px;font-weight:500;
  color:var(--dim);white-space:nowrap;line-height:1;position:relative;
  transition:color .22s;
}
.links a span{white-space:nowrap}
.links a::after{bottom:2px;height:2px}
.links a i{font-size:12.5px;opacity:.55;flex:none}
.links a:hover i,.links a[aria-current="page"] i{opacity:1;color:var(--marka)}

/* giriş / kayıt ayrımı */
.menu-ayrac{width:1px;height:22px;background:var(--line-hi);flex:none;margin:0 4px}
.links a.menu-hesap{padding:9px 14px;border:1px solid var(--line-hi);border-radius:100px;
  color:var(--ink);font-weight:600;font-size:13.5px}
.links a.menu-hesap::after{display:none}
.links a.menu-hesap:hover{border-color:var(--marka);color:var(--marka)}
.links a.menu-hesap.vurgu{background:var(--marka-yumusak);border-color:transparent;color:var(--marka)}
.links a.menu-hesap.vurgu:hover{background:var(--marka);color:#fff}
.links a.menu-hesap i{opacity:1;font-size:13px}

.tools{flex:0 0 auto;gap:9px}
.burger{display:none}
.burger i{font-size:15px}

/* 1420px altında menü ikonları düşer — yazılar sıkışmasın */
@media(max-width:1420px){ .links a i{display:none} .links a.menu-hesap i{display:inline-block} }
/* 1240px altında giriş/kayıt yazıları rozete iner */
@media(max-width:1240px){
  .links a.menu-hesap span{display:none}
  .links a.menu-hesap{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
  .links a.menu-hesap i{display:inline-block;font-size:14px}
  .menu-ayrac{margin:0 2px}
}
/* 1080px altında hamburger devreye girer */
@media(max-width:1080px){
  .links{display:none}
  .nav .btn-p{display:inline-flex}
  .burger{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;padding:0;border-radius:12px}
  .links.open{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;
    top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);
    padding:16px var(--gut) 22px;gap:2px;box-shadow:var(--sh-2);z-index:70;
  }
  .links.open a{padding:13px 4px;font-size:16px;width:100%}
  .links.open a i{display:inline-block;width:22px;text-align:center;font-size:15px}
  .links.open .menu-ayrac{width:100%;height:1px;margin:10px 0}
  .links.open a.menu-hesap{width:100%;height:auto;padding:13px 16px;border-radius:12px;justify-content:flex-start}
  .links.open a.menu-hesap span{display:inline}
}
@media(max-width:560px){
  .nav .btn-p span,.nav .btn-p{font-size:10.5px;padding:11px 14px}
  .nav-in{min-height:74px}
}

/* ==========================================================================
   YÜZEN İLETİŞİM DÜĞMELERİ
   ========================================================================== */
.yuzen{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:12px}
.yuzen a{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--marka);color:#fff;font-size:23px;position:relative;
  box-shadow:0 10px 28px -8px rgba(224,123,34,.75);transition:.25s;
}
.yuzen a:hover{background:var(--marka-2);transform:translateY(-3px) scale(1.05)}
.yuzen a::after{
  content:attr(data-etiket);position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--ink);color:var(--bg);font-family:var(--body);font-size:12.5px;
  font-weight:600;white-space:nowrap;padding:7px 12px;border-radius:8px;
  opacity:0;pointer-events:none;transition:.22s;
}
.yuzen a:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.yuzen a::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--marka);opacity:.55;animation:yuzen-nabiz 2.6s ease-out infinite;
}
@keyframes yuzen-nabiz{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.yuzen a.wa::before{animation-delay:1.3s}
@media(max-width:600px){
  .yuzen{right:14px;bottom:14px;gap:10px}
  .yuzen a{width:50px;height:50px;font-size:20px}
  .yuzen a::after{display:none}
}
@media(prefers-reduced-motion:reduce){ .yuzen a::before{animation:none;opacity:0} }

/* ==========================================================================
   YEŞİL VURGULARI MARKAYA ÇEVİR
   (monitördeki EKG/SpO2/solunum renkleri tıbbi kodlama olduğu için korunur)
   ========================================================================== */
.step{--ch:var(--marka)}
.step .ic{--ch:var(--marka)}
.monitor-eylem a.wa{color:var(--marka)}
.monitor-eylem a.wa:hover{background:var(--marka);color:#fff}
.chip i{background:var(--marka)}
.dot.on{background:var(--marka);box-shadow:0 0 12px var(--marka)}
.dot.on::after{border-color:var(--marka)}
.leds i:first-child{background:var(--marka);box-shadow:0 0 9px var(--marka)}
.foot-links a.sosyal:hover{background:var(--marka);border-color:var(--marka)}

.foot-ayrac{width:1px;height:26px;background:var(--line-hi);flex:none;margin:0 4px}
@media(max-width:560px){ .foot-ayrac{display:none} }


/* ==========================================================================
   TURUNCU TEMA — TAM GEÇİŞ
   Arayüzdeki her yeşil vurgu markaya döner. Monitördeki dalga formları
   ayrı değişkenlere taşındı (--ekg-iz / --spo2-iz / --resp-iz) ki tıbbi
   kanal kodlaması bozulmasın.
   ========================================================================== */
:root[data-theme="light"]{
  --ekg-iz:#00A76A; --spo2-iz:#0E96C4; --resp-iz:#D98A0B;
  --ecg:#E07B22;                    /* arayüzdeki "yeşil" artık turuncu */
}
:root[data-theme="dark"]{
  --ekg-iz:#00E07A; --spo2-iz:#35D6FF; --resp-iz:#FFD23F;
  --ecg:#F59440;
}

/* İletişim kutusu, paketler, SSS, adım ikonları — hepsi marka rengine */
.meta-row{--ch:var(--marka)}
.plan.lead{border-color:var(--marka)}
.qa button svg{stroke:var(--marka)}
.dl-note svg,.dl-note i{color:var(--marka)}
.balon.musteri{border-color:color-mix(in srgb,var(--marka) 34%,transparent);
  background:color-mix(in srgb,var(--marka) 7%,var(--card))}
.e-aktif{background:color-mix(in srgb,var(--marka) 16%,transparent);color:var(--marka)}

/* ==========================================================================
   ÜST BAR — taşma ve üst üste binme düzeltmesi
   ========================================================================== */
.brand{gap:0}

.nav-in{gap:clamp(8px,1.2vw,22px)}
.links{min-width:0;overflow:hidden}

/* Menü ikonları daha erken düşsün */
@media(max-width:1560px){ .links a i{display:none} .links a.menu-hesap i{display:inline-block} }
/* Giriş/Kayıt daha erken rozete insin */
@media(max-width:1380px){
  .links a.menu-hesap span{display:none}
  .links a.menu-hesap{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
  .links a.menu-hesap i{display:inline-block;font-size:14px}
}
/* Hamburger eşiği yükseldi: menü asla logonun üstüne binmesin */
@media(max-width:1260px){
  .links{display:none}
  .burger{display:inline-flex}
  .links.open{display:flex}
}

/* ==========================================================================
   FOOTER İÇİNDEKİ REFERANSLAR
   ========================================================================== */
footer{padding-top:0}
.foot-ref{padding:clamp(30px,4vw,46px) 0;border-bottom:1px solid var(--line)}
.foot-ref h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:22px}
.foot-ref-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.foot-ref-kart{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);
  border-radius:13px;background:var(--bg);transition:.26s}
.foot-ref-kart:hover{border-color:var(--marka);transform:translateY(-3px);box-shadow:var(--sh-1)}
.foot-ref-kart img{width:46px;height:46px;object-fit:contain;flex:none;border-radius:9px;background:#fff;padding:4px}
.foot-ref-harf{width:46px;height:46px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--marka),var(--marka-2));color:#fff;
  font-family:var(--display);font-weight:700;font-size:19px}
.foot-ref-kart strong{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.3}
.foot-ref-kart span{font-size:12px;color:var(--dim);line-height:1.4}
.foot{padding-top:34px}


/* ==========================================================================
   TİPOGRAFİ — bir tık büyük ve kalın
   ========================================================================== */
body{font-size:17px;font-weight:450;line-height:1.62}
p,li,.lede,.card p,.mod span,.wc p,.svc-item p,.dl-top p{font-weight:450}
.lede{font-size:clamp(17px,1.5vw,20px)}
.card>p,.wc p,.mod span{font-size:15.4px}
.feat li{font-size:15px}
.head p{font-size:16.5px}
.who{font-size:13.5px}
.btn{font-weight:600}
.links a{font-size:15px;font-weight:600}
.links a.menu-hesap{font-size:14px;font-weight:700}
.meta-row strong{font-size:18px}
.qa button{font-size:17px}
.step p{font-size:15.5px}
input,select,textarea{font-size:15.5px}

/* ==========================================================================
   LOGO — kutu oranı düzeltmesi
   Kare width/height verildiğinde tarayıcı yanlara saydam boşluk koyuyordu.
   ========================================================================== */


/* ==========================================================================
   KALAN MAVİ VURGULAR → MARKA
   (monitör kanalları --ekg-iz/--spo2-iz/--resp-iz ile korunuyor)
   ========================================================================== */
.mi{--ch:var(--marka)}
.svc-item{--ch:var(--marka)}
.wc{--ch:var(--marka)}
/* DİKKAT: 'background' bir kısayol özelliktir ve background-clip'i başlangıç
   değerine (border-box) döndürür. Yalnızca arka planı değiştirince yazı
   turuncu bir bloğa dönüşüyordu; clip ve color birlikte yazılmak zorunda. */
.grad{
  background:linear-gradient(96deg,var(--marka),var(--marka-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.rail i{background:linear-gradient(180deg,var(--marka),var(--marka-2))}
.balon.marta{border-left-color:var(--marka)}
.pill:hover{border-color:var(--marka);color:var(--marka)}

/* ===== ödeme / dekont ===== */
.odeme-duzen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:start}
@media(max-width:900px){ .odeme-duzen{grid-template-columns:1fr} }


/* ==========================================================================
   LOGO — "MARTA" tek kelime gibi okunsun
   viewBox işaretin sınırına kırpıldı; kalan tek boşluk yazının kendi
   sol boşluğu, onu da negatif kenar boşluğuyla kapatıyoruz.
   ========================================================================== */
.brand{gap:0 !important}
.brand img{
  height:var(--logo-boy,72px);width:auto;
  aspect-ratio:74.6 / 38.5;object-fit:contain;
  margin-right:-3px;display:block;flex:none;
}
.brand .marka-yazi{margin-left:0;letter-spacing:-.03em}

/* ==========================================================================
   ÜST BAR — sığmama düzeltmesi
   Menü kırpılmaktansa hamburgere insin.
   ========================================================================== */
.links{overflow:visible}

/* İkonlar daha erken düşsün */
@media(max-width:1700px){ .links a i{display:none} .links a.menu-hesap i{display:inline-block} }

/* Giriş/Kayıt yazıları rozete insin */
@media(max-width:1520px){
  .links a.menu-hesap span{display:none}
  .links a.menu-hesap{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
  .links a.menu-hesap i{display:inline-block;font-size:14px}
}

/* Hamburger eşiği: 1400px altında menü tamamen katlanır */
@media(max-width:1400px){
  .links{display:none}
  .burger{display:inline-flex}
  .links.open{display:flex}
}


/* ==========================================================================
   AÇILIR MENÜ — hamburger eşiğiyle aynı genişlikte geçerli olmalı
   (biçimlendirme eski 1080px bloğunda kalmıştı; arada biçimsiz açılıyordu)
   ========================================================================== */
@media(max-width:1400px){
  .links.open{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:16px var(--gut) 22px;gap:2px;box-shadow:var(--sh-2);z-index:70;
    height:auto;overflow:visible;
  }
  .links.open a{
    padding:13px 6px;font-size:16.5px;width:100%;height:auto;
    justify-content:flex-start;border-radius:10px;
  }
  .links.open a::after{display:none}
  .links.open a i{display:inline-block;width:24px;text-align:center;font-size:15px;opacity:.8}
  .links.open a:hover{background:var(--marka-yumusak)}
  .links.open .menu-ayrac{width:100%;height:1px;margin:10px 0}
  .links.open a.menu-hesap{
    width:100%;height:auto;padding:13px 16px;border-radius:12px;
    justify-content:flex-start;margin-top:4px;
  }
  .links.open a.menu-hesap span{display:inline}
}


/* ==========================================================================
   ÜST BAR — taşma kontrolü
   .links hem esneyip hem sağa hizalandığı için sığmayan içerik SOLA taşıp
   markanın üstüne biniyordu. Kırpma + JS ölçümü ile katlanma.
   ========================================================================== */
.links{overflow:hidden;min-width:0}
.nav-katla .links{display:none}
.nav-katla .burger{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:12px}
.nav-katla .links.open{
  display:flex;flex-direction:column;align-items:stretch;
  position:absolute;top:100%;left:0;right:0;
  background:var(--card);border-bottom:1px solid var(--line);
  padding:16px var(--gut) 22px;gap:2px;box-shadow:var(--sh-2);z-index:70;
  height:auto;overflow:visible;
}
.nav-katla .links.open a{
  padding:13px 6px;font-size:16.5px;width:100%;height:auto;
  justify-content:flex-start;border-radius:10px;
}
.nav-katla .links.open a::after{display:none}
.nav-katla .links.open a i{display:inline-block;width:24px;text-align:center;font-size:15px;opacity:.8}
.nav-katla .links.open a:hover{background:var(--marka-yumusak)}
.nav-katla .links.open .menu-ayrac{width:100%;height:1px;margin:10px 0}
.nav-katla .links.open a.menu-hesap{
  width:100%;height:auto;padding:13px 16px;border-radius:12px;
  justify-content:flex-start;margin-top:4px;
}
.nav-katla .links.open a.menu-hesap span{display:inline}


/* ==========================================================================
   ÜST BAR — son düzen
   Giriş/Kayıt artık menünün içinde değil, sağdaki araç grubunda.
   Menü yalnızca gezinme bağlantılarını taşır; sığmazsa hamburgere katlanır.
   ========================================================================== */
.brand{gap:0 !important;flex:0 0 auto}
.brand img{margin-right:-4px !important}
.brand .marka-yazi{margin-left:0;letter-spacing:-.03em}

.links{gap:clamp(6px,0.9vw,16px);overflow:hidden;min-width:0;flex:1 1 auto;
  justify-content:flex-end;margin-left:auto}
.links a{font-size:14.5px;padding:9px 3px}
.menu-ayrac{display:none}

/* hesap butonları */
.hesap-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;
  padding:10px 15px;border:1px solid var(--line-hi);border-radius:100px;
  font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--ink);
  transition:.22s;line-height:1}
.hesap-btn i{font-size:13px}
.hesap-btn:hover{border-color:var(--marka);color:var(--marka)}
.hesap-btn.vurgu{background:var(--marka-yumusak);border-color:transparent;color:var(--marka)}
.hesap-btn.vurgu:hover{background:var(--marka);color:#fff}

/* Dar ekranda önce ikonlar, sonra hesap yazıları düşer */
@media(max-width:1500px){ .links a i{display:none} }
@media(max-width:1180px){
  .hesap-btn span{display:none}
  .hesap-btn{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .hesap-btn i{font-size:15px}
}
@media(max-width:760px){
  .nav .btn-p span{display:none}
  .nav .btn-p{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .nav .btn-p i{font-size:16px}
}
/* Açılır menüde hesap butonu yok, o yüzden ayraç da yok */
.nav-katla .links.open .menu-ayrac{display:none}


/* ==========================================================================
   ÜST BAR — ızgara düzeni (kesin çözüm)

   Flex'te .links hem esneyip hem sağa yaslandığı için sığmayan içerik
   markanın üstüne biniyor, marka da ezilip 70 piksele düşüyordu.
   Izgarada üç sütun var: marka | menü | araçlar.
   Orta sütun minmax(0,1fr) olduğu için yalnızca O daralır; marka ve
   araçlar auto genişlikte, asla ezilmez.
   ========================================================================== */
.nav-in{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(10px,1.4vw,24px);
  min-height:84px;height:auto;
  padding-top:8px;padding-bottom:8px;
}

/* Kenarlara yaklaş: logo sola, butonlar sağa */
.nav .wrap{
  max-width:1560px;
  padding-left:clamp(14px,1.6vw,30px);
  padding-right:clamp(14px,1.6vw,30px);
}

.brand{grid-column:1;justify-self:start;flex:none;min-width:0}
.links{grid-column:2;justify-self:end;margin-left:0;flex:none;
  display:flex;align-items:center;gap:clamp(5px,0.8vw,15px);
  max-width:100%;overflow:hidden;white-space:nowrap}
.tools{grid-column:3;justify-self:end;flex:none;display:flex;align-items:center;gap:8px}

.links a{padding:9px 4px;font-size:14.5px;flex:none}

/* Katlandığında menü ızgaradan çıkar, hamburger görünür */
.nav-katla .links{display:none}
.nav-katla .links.open{display:flex}

/* ==========================================================================
   TURUNCU BUTONLARIN İKONLARI
   .btn i kuralı ikona --ch (turuncu) veriyordu; turuncu zeminde turuncu
   ikon görünmez oluyordu. Dolu butonlarda ikon her zaman beyaz.
   ========================================================================== */
.btn-p i,.btn-p svg{color:#fff !important;stroke:#fff !important;opacity:1 !important}
.btn-p:hover i,.btn-p:hover svg{color:#fff !important;stroke:#fff !important}
.yuzen a i{color:#fff !important;opacity:1}
.hesap-btn.vurgu i{color:var(--marka);opacity:1}
.hesap-btn.vurgu:hover i{color:#fff}
.foot-links a.sosyal:hover i{color:#fff}
.own i{color:#fff !important;opacity:1}
.own.partner i{color:var(--dim) !important}
.tab.on i,.tab.on svg{color:#fff !important;stroke:#fff !important;opacity:1}


/* ==========================================================================
   ÜST BAR — marka artık ezilemez

   Hata: .brand üzerinde min-width:0 vardı. Izgarada "auto" sütunun asgari
   genişliği normalde içeriğin min-content boyutudur; min-width:0 bu korumayı
   kaldırıyor ve marka logonun genişliğine kadar büzülüp yazıyı dışarı
   taşırıyordu. Çözüm: asgari genişliği içeriğe sabitlemek.
   ========================================================================== */
.nav-in{
  grid-template-columns:max-content minmax(0,1fr) max-content !important;
}
.brand{
  min-width:max-content !important;
  overflow:visible;
  grid-column:1;justify-self:start;
}
.brand .marka-yazi{white-space:nowrap;flex:none}
.tools{min-width:max-content !important;grid-column:3;justify-self:end}

/* Menü sütunu: sığdığı kadarını göster, sığmazsa JS hamburgere katlar.
   overflow:hidden burada güvenlik ağı — JS çalışmasa bile marka üstüne binmez. */
.links{
  grid-column:2;justify-self:end;
  min-width:0;max-width:100%;
  overflow:hidden;flex-wrap:nowrap;
}

/* Dar alanda menü daha da sıkışabilsin diye kademeli daraltma */
@media(max-width:1600px){ .links{gap:clamp(4px,0.6vw,12px)} .links a{padding:9px 3px;font-size:14px} }
@media(max-width:1400px){ .links a i{display:none} }


/* ==========================================================================
   ÜST BAR — menü ortada, iki yöne büyür
   Sağa yaslı menüde logo ile menü arasında kullanılmayan boşluk kalıyordu.
   Menü artık orta sütunu kaplayıp ortalanıyor: bağlantı eklendikçe hem sola
   hem sağa doğru açılıyor, boşluk kendiliğinden dengeleniyor.
   ========================================================================== */
.links{
  justify-self:stretch !important;
  justify-content:center !important;
  margin:0 !important;
  gap:clamp(6px,.9vw,18px) !important;
}


/* ==========================================================================
   MOBİL PERFORMANS
   En pahalı iki iş: 120px bulanıklık filtreleri ve ekran dışındaki
   bölümlerin sürekli yeniden boyanması. Küçük ekranda ikisini de kısıyoruz.
   ========================================================================== */

/* Ekran dışındaki bölümler çizilmesin. Tarayıcı yalnızca görünür alanı
   düzenler; kaydırma sırasında ihtiyaç oldukça çizer. */
.sec{content-visibility:auto;contain-intrinsic-size:auto 620px}

@media(max-width:900px){
  /* Bulanık degrade katmanları mobil GPU'da kare düşürüyor.
     Yerine düz, çok hafif bir degrade zemin bırakıyoruz. */
  .bg .glow{display:none}
  body{background:linear-gradient(180deg,#F6F9FA 0%,var(--bg) 42%)}

  /* Kaydırmada sabit katman yeniden boyanmasın */
  .bg{position:absolute;height:60vh}

  /* Kart gölgeleri sadeleşsin */
  .card,.mod,.dl,.wc,.sc,.plan{box-shadow:0 1px 3px rgba(8,24,31,.07)}
  .card:hover,.mod:hover,.dl:hover,.wc:hover,.sc:hover,.plan:hover{transform:none}

  /* Kayan şerit animasyonu mobilde dursun: sürekli düzen hesabı yapıyor */
  .marq-in{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marq{padding:14px 0}
  .mi{font-size:13px;padding:7px 13px}
}

/* Hareket azaltma tercihi zaten her şeyi durduruyor */
@media(prefers-reduced-motion:reduce){
  .marq-in{animation:none}
}


/* ==========================================================================
   MOBİL TAŞMA — hiçbir öge ekrandan geniş olmasın
   ========================================================================== */
html{overflow-x:hidden}
img,svg,canvas,video{max-width:100%}
.wrap{width:100%}

@media(max-width:820px){
  /* Kayan şerit sarmalandığı için genişliği serbest bırakılmalı */
  .marq-in{width:auto !important;max-width:100%}
  .marq{overflow:hidden}

  /* Monitör ve tablolar taşmasın */
  .device,.monitor{max-width:100%}
  .tablo-sar{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Uzun anahtar/e-posta gibi kırılmayan metinler satırı genişletmesin */
  .mono,.duz,.anahtar{overflow-wrap:anywhere;word-break:break-word}

  /* Yüzen düğmeler içeriğin üstünü kapatmasın */
  footer{padding-bottom:86px}
}

@media(max-width:520px){
  :root{--gut:16px}
  .hero{padding-top:26px}
  h1{font-size:clamp(28px,8.4vw,40px)}
  .lede{font-size:16px}
  .device{border-radius:16px}
  #scope{height:190px}
  .ro .v{font-size:20px}
  .yuzen{right:12px;bottom:12px}
  .yuzen a{width:48px;height:48px;font-size:19px}
}