/* ========================================================================= 360 SOFT — 2026 UPGRADE LAYER style.css'ten SONRA yüklenir. Eski dosyaya dokunmadan; mobil menü, premium teklif formu, footer iletişim alanı ve hizmet sayfası bileşenlerini getirir. ========================================================================= */ :root{ --u-ink:#0B0D12; --u-ink-2:#12151d; --u-white:#ffffff; --u-line:rgba(11,13,18,.09); --u-line-d:rgba(255,255,255,.10); --u-grad:linear-gradient(120deg,var(--violet) 0%,#8B7BFF 38%,var(--cyan) 100%); --u-grad-soft:linear-gradient(120deg,rgba(110,91,255,.14),rgba(14,165,160,.12)); --u-shadow-s:0 2px 8px rgba(11,13,18,.05); --u-shadow-m:0 10px 30px -12px rgba(11,13,18,.18); --u-shadow-l:0 34px 80px -30px rgba(11,13,18,.38); --u-r-s:12px; --u-r-m:18px; --u-r-l:26px; --u-ease:cubic-bezier(.22,1,.36,1); } /* ========================================================================= 1) HEADER — MOBİL ÇUBUK ========================================================================= */ .navcta.navcta-head{display:none;} @media (max-width:860px){ header nav{display:flex;align-items:center;gap:8px;} header nav .brand{margin-right:auto;min-width:0;} header nav .navlinks{display:none !important;} header nav .lang-switch{display:none;} header nav .nav-tools .nav-search-toggle, header nav .nav-tools .nav-fav, header nav .nav-tools .nav-account{display:none;} header nav .nav-tools{gap:2px;margin:0;} header nav a.navcta.navcta-head{ display:inline-flex;align-items:center;justify-content:center; padding:10px 16px;font-size:13px;font-weight:600;line-height:1; border-radius:999px;color:#fff;text-decoration:none;white-space:nowrap; background:var(--u-grad); box-shadow:0 6px 18px -8px rgba(110,91,255,.85); transition:transform .25s var(--u-ease),box-shadow .25s var(--u-ease); } header nav a.navcta.navcta-head:active{transform:scale(.96);} header nav .mobile-toggle{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:42px;height:42px;padding:0 10px;border:1px solid var(--u-line); border-radius:12px;background:rgba(255,255,255,.7);cursor:pointer; } header nav .mobile-toggle span{ display:block;height:2px;width:100%;border-radius:2px;background:var(--u-ink); transition:transform .3s var(--u-ease),opacity .2s linear; } body.mnav-open header nav .mobile-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.mnav-open header nav .mobile-toggle span:nth-child(2){opacity:0;} body.mnav-open header nav .mobile-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} } @media (max-width:400px){ header nav a.navcta.navcta-head{padding:9px 12px;font-size:12px;} header nav .brand{font-size:15px;} } /* ========================================================================= 2) MOBİL MENÜ PANELİ (#mobileNav — altında, header dışında) ========================================================================= */ .mnav-backdrop{ position:fixed;inset:0;z-index:9998; background:rgba(6,8,13,.55); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;transition:opacity .35s var(--u-ease); } .mnav-backdrop.is-visible{opacity:1;} .mnav-backdrop[hidden]{display:none;} .mnav{ position:fixed;top:0;right:0;z-index:9999; width:min(92vw,400px);height:100vh;height:100dvh; display:flex;flex-direction:column; background:linear-gradient(165deg,#12151d 0%,#0B0D12 55%,#0e1119 100%); color:#fff; box-shadow:-30px 0 90px -40px rgba(0,0,0,.9); transform:translateX(102%); transition:transform .42s var(--u-ease); overscroll-behavior:contain; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); visibility:hidden; } .mnav.is-open{transform:translateX(0);visibility:visible;} .mnav::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(520px 300px at 108% -8%,rgba(110,91,255,.34),transparent 62%), radial-gradient(420px 280px at -20% 106%,rgba(14,165,160,.24),transparent 66%); } .mnav > *{position:relative;z-index:1;} .mnav-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 20px 14px;border-bottom:1px solid var(--u-line-d); } .mnav-brand{ display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none; font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em; } .mnav-brand .pandamark{width:26px;height:26px;flex:none;} .mnav-close{ flex:none;width:40px;height:40px;display:grid;place-items:center; border-radius:12px;border:1px solid var(--u-line-d); background:rgba(255,255,255,.06);color:#fff;cursor:pointer; transition:background .2s,transform .2s var(--u-ease); } .mnav-close:hover{background:rgba(255,255,255,.13);} .mnav-close:active{transform:scale(.93);} .mnav-cta{ margin:16px 20px 4px;padding:15px 20px;border-radius:16px; display:flex;align-items:center;justify-content:space-between;gap:10px; font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em; color:#fff;text-decoration:none;background:var(--u-grad); box-shadow:0 16px 40px -18px rgba(110,91,255,.95); transition:transform .25s var(--u-ease),box-shadow .25s var(--u-ease); } .mnav-cta:active{transform:scale(.98);} .mnav-cta svg{transition:transform .3s var(--u-ease);} .mnav-cta:hover svg{transform:translateX(4px);} .mnav-scroll{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding:10px 20px 28px; } .mnav-scroll::-webkit-scrollbar{width:6px;} .mnav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;} .mnav-list{list-style:none;margin:0;padding:0;} .mnav-list li{ position:relative;border-bottom:1px solid var(--u-line-d); opacity:0;transform:translateY(10px); } .mnav.is-open .mnav-list > li{ animation:mnavIn .5s var(--u-ease) forwards; } .mnav.is-open .mnav-list > li:nth-child(1){animation-delay:.06s;} .mnav.is-open .mnav-list > li:nth-child(2){animation-delay:.11s;} .mnav.is-open .mnav-list > li:nth-child(3){animation-delay:.16s;} .mnav.is-open .mnav-list > li:nth-child(4){animation-delay:.21s;} .mnav.is-open .mnav-list > li:nth-child(5){animation-delay:.26s;} .mnav.is-open .mnav-list > li:nth-child(6){animation-delay:.31s;} .mnav.is-open .mnav-list > li:nth-child(7){animation-delay:.36s;} @keyframes mnavIn{to{opacity:1;transform:translateY(0);}} .mnav-list li > a{ display:block;padding:15px 44px 15px 2px;color:#fff;text-decoration:none; font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em; transition:color .2s,padding-left .25s var(--u-ease); } .mnav-list li > a:hover,.mnav-list li > a:focus-visible{color:#B9AEFF;padding-left:8px;} .mnav-list .submenu-toggle{ position:absolute;top:6px;right:0;width:38px;height:38px; display:grid;place-items:center;border:1px solid var(--u-line-d); border-radius:10px;background:rgba(255,255,255,.05);cursor:pointer;padding:0; } .mnav-list .submenu-toggle span{ position:relative;display:block;width:13px;height:2px;border-radius:2px;background:#fff; } .mnav-list .submenu-toggle span::after{ content:"";position:absolute;left:0;top:0;width:13px;height:2px;border-radius:2px;background:#fff; transform:rotate(90deg);transition:transform .3s var(--u-ease); } .mnav-list li.submenu-open > .submenu-toggle{background:var(--u-grad);border-color:transparent;} .mnav-list li.submenu-open > .submenu-toggle span::after{transform:rotate(0deg);} .mnav-list .sub-menu{ list-style:none;margin:0;padding:0; display:block;overflow:hidden; max-height:0; transition:max-height .38s var(--u-ease); } .mnav-list li.submenu-open > .sub-menu{max-height:1600px;} .mnav-list .sub-menu li{opacity:1;transform:none;border:0;} .mnav-list .sub-menu li > a{ padding:11px 10px 11px 16px;font-size:14.5px;font-weight:500; font-family:inherit;color:rgba(255,255,255,.72); border-left:2px solid rgba(255,255,255,.14);margin-left:2px; } .mnav-list .sub-menu li > a:hover{color:#fff;border-left-color:var(--violet);padding-left:20px;} .mnav-list .sub-menu li:first-child > a{margin-top:2px;} .mnav-list .sub-menu li:last-child > a{margin-bottom:12px;} .mnav-contact{margin-top:26px;padding-top:20px;border-top:1px solid var(--u-line-d);} .mnav-contact-title{ font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.45);margin-bottom:12px; } .mnav-cc{ display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:8px; border-radius:13px;border:1px solid var(--u-line-d);background:rgba(255,255,255,.04); color:#fff;text-decoration:none;font-size:14.5px;font-weight:500; transition:background .2s,border-color .2s,transform .2s var(--u-ease); } .mnav-cc:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);} .mnav-cc:active{transform:scale(.985);} .mnav-cc-ico{ flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:10px; background:rgba(110,91,255,.22);color:#C4B9FF; } .mnav-cc-ico.is-wa{background:rgba(37,211,102,.18);color:#4ade80;} .mnav-lang{display:flex;gap:8px;margin-top:18px;} .mnav-lang a{ flex:1;text-align:center;padding:9px 0;border-radius:10px; border:1px solid var(--u-line-d);color:rgba(255,255,255,.7); text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.04em; } .mnav-lang a.active{background:rgba(255,255,255,.14);color:#fff;border-color:transparent;} body.mnav-open{overflow:hidden;} body.mnav-open .call-float, body.mnav-open .wa-float{opacity:0;pointer-events:none;transition:opacity .2s;} @media (min-width:861px){ .mnav,.mnav-backdrop{display:none !important;} } /* ========================================================================= 3) PREMIUM TEKLİF FORMU (.qf2) ========================================================================= */ .qf2-section{padding:0 0 20px;} .qf2-shell{ position:relative;max-width:1080px;margin:0 auto; border-radius:var(--u-r-l);overflow:hidden; background:linear-gradient(160deg,#0e1119 0%,#0B0D12 60%,#111524 100%); color:#fff;box-shadow:var(--u-shadow-l); display:grid;grid-template-columns:1.05fr .95fr; } .qf2-shell::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(680px 380px at 96% -10%,rgba(110,91,255,.35),transparent 60%), radial-gradient(560px 340px at -12% 108%,rgba(14,165,160,.26),transparent 64%); } .qf2-aside,.qf2-main{position:relative;z-index:1;} .qf2-aside{padding:44px 40px;border-right:1px solid var(--u-line-d);} .qf2-eyebrow{ display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px; background:rgba(255,255,255,.08);border:1px solid var(--u-line-d); font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8); } .qf2-eyebrow i{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);} .qf2-aside h2{ font-family:var(--display);font-size:clamp(26px,3.2vw,38px);line-height:1.08; letter-spacing:-.03em;font-weight:700;margin:20px 0 14px; } .qf2-aside h2 em{font-style:normal;background:var(--u-grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .qf2-aside p{color:rgba(255,255,255,.68);font-size:15px;line-height:1.65;margin:0 0 26px;} .qf2-points{list-style:none;margin:0;padding:0;display:grid;gap:12px;} .qf2-points li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:rgba(255,255,255,.86);} .qf2-points li::before{ content:"";flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%; background:var(--u-grad); -webkit-mask:url("data:image/svg+xml;utf8,") center/13px no-repeat,linear-gradient(#000,#000); -webkit-mask-composite:source-over; mask:url("data:image/svg+xml;utf8,") center/13px no-repeat; } .qf2-direct{margin-top:30px;padding-top:22px;border-top:1px solid var(--u-line-d);display:grid;gap:9px;} .qf2-direct a{ display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:14.5px; padding:10px 12px;border-radius:12px;border:1px solid var(--u-line-d);background:rgba(255,255,255,.04); transition:background .2s,border-color .2s; } .qf2-direct a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);} .qf2-main{padding:40px;} .qf2-progress{display:flex;align-items:center;gap:10px;margin-bottom:26px;} .qf2-progress .bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;} .qf2-progress .bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--u-grad);transition:width .5s var(--u-ease);} .qf2-progress .pct{font-size:12px;color:rgba(255,255,255,.55);min-width:34px;text-align:right;font-variant-numeric:tabular-nums;} .qf2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .qf2-field{position:relative;} .qf2-field.full{grid-column:1/-1;} .qf2-field input,.qf2-field textarea,.qf2-field select{ width:100%;padding:22px 14px 9px;border-radius:14px; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045); color:#fff;font-size:15px;font-family:inherit;outline:none; transition:border-color .22s,background .22s,box-shadow .22s; -webkit-appearance:none;appearance:none; } .qf2-field textarea{min-height:118px;resize:vertical;padding-top:26px;line-height:1.55;} .qf2-field select{cursor:pointer;padding-top:22px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 14px center;background-size:16px;} .qf2-field select option{background:#12151d;color:#fff;} .qf2-field input:focus,.qf2-field textarea:focus,.qf2-field select:focus{ border-color:rgba(110,91,255,.85);background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(110,91,255,.16); } .qf2-field label{ position:absolute;left:15px;top:16px;font-size:15px;color:rgba(255,255,255,.5); pointer-events:none;transition:all .2s var(--u-ease); } .qf2-field input:focus + label, .qf2-field input:not(:placeholder-shown) + label, .qf2-field textarea:focus + label, .qf2-field textarea:not(:placeholder-shown) + label, .qf2-field select:focus + label, .qf2-field select.has-value + label{ top:7px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55); } .qf2-field input::placeholder,.qf2-field textarea::placeholder{color:transparent;} .qf2-field .req{color:var(--coral);} .qf2-field.is-invalid input,.qf2-field.is-invalid textarea{border-color:rgba(244,87,58,.8);box-shadow:0 0 0 4px rgba(244,87,58,.14);} .qf2-err{display:none;margin:6px 2px 0;font-size:12.5px;color:#ff9b87;} .qf2-field.is-invalid .qf2-err{display:block;} .qf2-block{margin-top:26px;} .qf2-legend{ font-size:11.5px;letter-spacing:.13em;text-transform:uppercase; color:rgba(255,255,255,.5);margin-bottom:12px;display:block; } .qf2-chips{display:flex;flex-wrap:wrap;gap:9px;border:0;padding:0;margin:0;} .qf2-chip{position:relative;} .qf2-chip input{position:absolute;opacity:0;width:0;height:0;} .qf2-chip span{ display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05); font-size:13.5px;color:rgba(255,255,255,.82);cursor:pointer;user-select:none; transition:all .22s var(--u-ease); } .qf2-chip span::before{ content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:all .22s; } .qf2-chip input:checked + span{ background:var(--u-grad);border-color:transparent;color:#fff;font-weight:600; box-shadow:0 10px 26px -14px rgba(110,91,255,.95);transform:translateY(-1px); } .qf2-chip input:checked + span::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);} .qf2-chip input:focus-visible + span{outline:2px solid #B9AEFF;outline-offset:2px;} .qf2-submit{ margin-top:28px;width:100%;padding:17px 26px;border:0;border-radius:16px;cursor:pointer; font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:#fff; background:var(--u-grad);box-shadow:0 20px 44px -20px rgba(110,91,255,.95); display:flex;align-items:center;justify-content:center;gap:10px; transition:transform .25s var(--u-ease),box-shadow .25s var(--u-ease),opacity .2s; } .qf2-submit:hover{transform:translateY(-2px);box-shadow:0 26px 54px -20px rgba(110,91,255,1);} .qf2-submit:active{transform:translateY(0) scale(.99);} .qf2-submit[disabled]{opacity:.62;cursor:not-allowed;transform:none;} .qf2-submit .spin{ display:none;width:17px;height:17px;border-radius:50%; border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:qfSpin .7s linear infinite; } .qf2-form.is-busy .qf2-submit .spin{display:block;} .qf2-form.is-busy .qf2-submit .arw{display:none;} @keyframes qfSpin{to{transform:rotate(360deg);}} .qf2-note{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.45);text-align:center;line-height:1.6;} .qf2-note a{color:rgba(255,255,255,.7);} .qf2-status{margin-top:16px;padding:0;border-radius:14px;font-size:14.5px;line-height:1.6;} .qf2-status.success{padding:16px 18px;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:#bbf7d0;} .qf2-status.error{padding:16px 18px;background:rgba(244,87,58,.12);border:1px solid rgba(244,87,58,.4);color:#ffc4b6;} .qf2-done{display:none;text-align:center;padding:42px 10px;} .qf2-form.is-done + .qf2-done{display:block;animation:qfPop .5s var(--u-ease);} .qf2-form.is-done{display:none;} @keyframes qfPop{from{opacity:0;transform:scale(.94) translateY(10px);}to{opacity:1;transform:none;}} .qf2-done-ic{ width:70px;height:70px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center; background:var(--u-grad);box-shadow:0 20px 50px -18px rgba(110,91,255,.9); } .qf2-done h3{font-family:var(--display);font-size:24px;font-weight:700;margin:0 0 10px;letter-spacing:-.02em;} .qf2-done p{color:rgba(255,255,255,.66);font-size:15px;margin:0 0 22px;} .qf2-done .qf2-direct{border:0;padding:0;margin:0 auto;max-width:320px;} .hp-field{position:absolute !important;left:-9999px !important;opacity:0 !important;height:0 !important;} @media (max-width:900px){ .qf2-shell{grid-template-columns:1fr;} .qf2-aside{border-right:0;border-bottom:1px solid var(--u-line-d);padding:34px 26px;} .qf2-main{padding:30px 26px 34px;} .qf2-grid{grid-template-columns:1fr;} } @media (max-width:520px){ .qf2-shell{border-radius:22px;} .qf2-aside{padding:28px 20px;} .qf2-main{padding:24px 20px 28px;} .qf2-chip span{font-size:12.5px;padding:8px 13px;} } /* ========================================================================= 4) FOOTER — İLETİŞİM ŞERİDİ ========================================================================= */ .foot-contact{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px; margin:0 0 44px;padding:26px;border-radius:var(--u-r-l); background:linear-gradient(150deg,rgba(110,91,255,.16),rgba(14,165,160,.12)); border:1px solid var(--u-line-d); } footer .foot-contact-card{ display:flex;align-items:center;gap:13px;padding:16px 16px;border-radius:var(--u-r-m); background:rgba(255,255,255,.05);border:1px solid var(--u-line-d); text-decoration:none;color:inherit; transition:transform .25s var(--u-ease),background .25s,border-color .25s; } footer .foot-contact-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);} .foot-contact-ic{ flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center; background:var(--u-grad);color:#fff;box-shadow:0 12px 28px -14px rgba(110,91,255,.9); } .foot-contact-ic.is-wa{background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 12px 28px -14px rgba(37,211,102,.9);} .foot-contact-ic.is-mail{background:linear-gradient(135deg,var(--coral),#ff8a6b);box-shadow:0 12px 28px -14px rgba(244,87,58,.9);} .foot-contact-ic.is-pin{background:linear-gradient(135deg,#0EA5A0,#22d3ee);box-shadow:0 12px 28px -14px rgba(14,165,160,.9);} .foot-contact-tx{min-width:0;} .foot-contact-tx b{display:block;font-family:var(--display);font-size:11px;letter-spacing:.13em;text-transform:uppercase;opacity:.6;font-weight:600;margin-bottom:3px;} .foot-contact-tx span{display:block;font-size:14.5px;font-weight:600;line-height:1.35;word-break:break-word;} .foot-contact-tx small{display:block;font-size:12.5px;opacity:.62;margin-top:2px;} @media (max-width:1000px){.foot-contact{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){ .foot-contact{grid-template-columns:1fr;padding:18px;gap:10px;margin-bottom:34px;border-radius:20px;} footer .foot-contact-card{padding:14px;} } /* ========================================================================= 5) HİZMET SAYFALARI — ZENGİN BLOKLAR ========================================================================= */ .svc-hero{position:relative;overflow:hidden;} .svc-hero::before{ content:"";position:absolute;inset:-20% -10% auto -10%;height:520px;pointer-events:none;z-index:0; background: radial-gradient(600px 320px at 18% 0%,rgba(110,91,255,.20),transparent 62%), radial-gradient(520px 300px at 86% 12%,rgba(14,165,160,.18),transparent 64%); animation:auroraFloat 16s ease-in-out infinite alternate; } @keyframes auroraFloat{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-3%,2%,0) scale(1.08);}} .svc-hero > *{position:relative;z-index:1;} .u-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:44px;} .u-bento-card{ grid-column:span 2;position:relative;overflow:hidden; padding:26px;border-radius:var(--u-r-l);border:1px solid var(--u-line); background:var(--u-white);box-shadow:var(--u-shadow-s); transition:transform .35s var(--u-ease),box-shadow .35s var(--u-ease),border-color .3s; } .u-bento-card:hover{transform:translateY(-5px);box-shadow:var(--u-shadow-m);border-color:rgba(110,91,255,.35);} .u-bento-card.is-wide{grid-column:span 3;} .u-bento-card.is-full{grid-column:1/-1;} .u-bento-card.is-dark{background:linear-gradient(160deg,#12151d,#0B0D12);color:#fff;border-color:transparent;} .u-bento-card.is-dark p{color:rgba(255,255,255,.7);} .u-bento-ic{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px; background:var(--u-grad-soft);color:var(--violet);font-size:20px; } .u-bento-card.is-dark .u-bento-ic{background:rgba(255,255,255,.1);color:#B9AEFF;} .u-bento-card h3{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 9px;} .u-bento-card p{font-size:14.5px;line-height:1.65;color:var(--text-mid);margin:0;} .u-bento-card .u-kpi{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;background:var(--u-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;} @media (max-width:900px){.u-bento{grid-template-columns:repeat(2,1fr);}.u-bento-card,.u-bento-card.is-wide{grid-column:span 1;}.u-bento-card.is-full{grid-column:1/-1;}} @media (max-width:560px){.u-bento{grid-template-columns:1fr;gap:12px;}.u-bento-card,.u-bento-card.is-wide,.u-bento-card.is-full{grid-column:1/-1;}} .u-timeline{position:relative;margin-top:44px;padding-left:34px;} .u-timeline::before{ content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--violet),var(--cyan),transparent); } .u-tl-item{position:relative;padding:0 0 34px 8px;} .u-tl-item:last-child{padding-bottom:0;} .u-tl-item::before{ content:"";position:absolute;left:-29px;top:5px;width:20px;height:20px;border-radius:50%; background:var(--u-white);border:3px solid var(--violet);box-shadow:0 0 0 5px rgba(110,91,255,.12); } .u-tl-step{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);font-weight:700;} .u-tl-item h3{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;margin:6px 0 8px;} .u-tl-item p{font-size:15px;line-height:1.7;color:var(--text-mid);margin:0;} .u-sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:40px;} .u-sub-card{ position:relative;display:block;padding:22px;border-radius:var(--u-r-m); border:1px solid var(--u-line);background:var(--u-white);text-decoration:none;color:inherit; overflow:hidden;transition:transform .3s var(--u-ease),box-shadow .3s var(--u-ease),border-color .3s; } .u-sub-card::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;transform:scaleX(0);transform-origin:left; background:var(--u-grad);transition:transform .35s var(--u-ease); } .u-sub-card:hover{transform:translateY(-4px);box-shadow:var(--u-shadow-m);border-color:rgba(110,91,255,.3);} .u-sub-card:hover::after{transform:scaleX(1);} .u-sub-card h3{font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin:0 0 7px;} .u-sub-card p{font-size:13.8px;line-height:1.6;color:var(--text-mid);margin:0 0 12px;} .u-sub-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--violet);} .u-sub-card:hover .u-sub-go i{transform:translateX(4px);} .u-sub-go i{font-style:normal;transition:transform .3s var(--u-ease);} .u-quote{ margin-top:44px;padding:34px;border-radius:var(--u-r-l); background:linear-gradient(150deg,rgba(110,91,255,.09),rgba(14,165,160,.07)); border:1px solid var(--u-line);position:relative; } .u-quote p{font-family:var(--display);font-size:clamp(18px,2.2vw,24px);line-height:1.5;letter-spacing:-.02em;margin:0 0 14px;} .u-quote cite{font-style:normal;font-size:14px;color:var(--text-mid);} .u-checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px 26px;margin-top:34px;list-style:none;padding:0;} .u-checkgrid li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.6;} .u-checkgrid li::before{ content:"";flex:none;margin-top:4px;width:19px;height:19px;border-radius:6px;background:var(--u-grad); -webkit-mask:url("data:image/svg+xml;utf8,") center/13px no-repeat; mask:url("data:image/svg+xml;utf8,") center/13px no-repeat; } .u-cta-band{ margin-top:52px;padding:40px;border-radius:var(--u-r-l);text-align:center;position:relative;overflow:hidden; background:linear-gradient(160deg,#12151d,#0B0D12);color:#fff;box-shadow:var(--u-shadow-l); } .u-cta-band::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(560px 300px at 80% -20%,rgba(110,91,255,.4),transparent 62%),radial-gradient(460px 260px at 10% 120%,rgba(14,165,160,.28),transparent 66%); } .u-cta-band > *{position:relative;z-index:1;} .u-cta-band h2{font-family:var(--display);font-size:clamp(24px,3.4vw,36px);font-weight:700;letter-spacing:-.03em;margin:0 0 12px;} .u-cta-band p{color:rgba(255,255,255,.7);font-size:15.5px;margin:0 0 26px;} .u-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;} .u-btn{ display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:14px; font-family:var(--display);font-weight:700;font-size:15.5px;text-decoration:none; transition:transform .25s var(--u-ease),box-shadow .25s var(--u-ease); } .u-btn-primary{background:var(--u-grad);color:#fff;box-shadow:0 18px 40px -18px rgba(110,91,255,.95);} .u-btn-ghost{border:1px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.05);} .u-btn:hover{transform:translateY(-2px);} @media (max-width:560px){.u-cta-band{padding:28px 20px;}.u-btn{width:100%;justify-content:center;}} /* Ek: hizmet arşiv/detay içi küçük düzeltmeler */ .u-tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;} .u-tag{padding:7px 13px;border-radius:999px;border:1px solid var(--u-line);background:var(--surface);font-size:12.8px;font-weight:500;color:var(--text-mid);} /* ---- Açılır çoklu hizmet seçimi (.qf2-ms) ---- */ .qf2-ms{position:relative;} .qf2-ms-btn{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 16px;border-radius:14px;cursor:pointer;text-align:left; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045); color:rgba(255,255,255,.62);font-family:inherit;font-size:15px; transition:border-color .22s,background .22s,box-shadow .22s; } .qf2-ms-btn:hover{background:rgba(255,255,255,.07);} .qf2-ms.is-open .qf2-ms-btn,.qf2-ms-btn:focus-visible{ border-color:rgba(110,91,255,.85);box-shadow:0 0 0 4px rgba(110,91,255,.16);outline:none; } .qf2-ms.has-value .qf2-ms-btn{color:#fff;font-weight:600;} .qf2-ms-btn svg{flex:none;transition:transform .28s var(--u-ease);opacity:.7;} .qf2-ms.is-open .qf2-ms-btn svg{transform:rotate(180deg);} .qf2-ms-panel{ position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40; border-radius:16px;overflow:hidden; background:#141824;border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px -24px rgba(0,0,0,.85); animation:qfMsIn .22s var(--u-ease); } @keyframes qfMsIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} .qf2-ms-panel[hidden]{display:none;} .qf2-ms-search{ display:flex;align-items:center;gap:9px;padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.5); } .qf2-ms-search input{ flex:1;border:0;background:transparent;color:#fff;font-family:inherit;font-size:14.5px;outline:none; } .qf2-ms-search input::placeholder{color:rgba(255,255,255,.38);} .qf2-ms-list{ list-style:none;margin:0;padding:6px;max-height:274px;overflow-y:auto;overscroll-behavior:contain; } .qf2-ms-list::-webkit-scrollbar{width:8px;} .qf2-ms-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;} .qf2-ms-list li[hidden]{display:none;} .qf2-ms-list label{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer; font-size:14.5px;color:rgba(255,255,255,.82);transition:background .16s; } .qf2-ms-list label:hover{background:rgba(255,255,255,.07);color:#fff;} .qf2-ms-list input{position:absolute;opacity:0;width:0;height:0;} .qf2-ms-box{ flex:none;width:19px;height:19px;border-radius:6px; border:1.6px solid rgba(255,255,255,.32);background:rgba(255,255,255,.05); display:grid;place-items:center;transition:all .18s var(--u-ease); } .qf2-ms-box::after{ content:"";width:11px;height:11px;background:#fff;opacity:0;transform:scale(.5); transition:all .18s var(--u-ease); -webkit-mask:url("data:image/svg+xml;utf8,") center/11px no-repeat; mask:url("data:image/svg+xml;utf8,") center/11px no-repeat; } .qf2-ms-list input:checked + .qf2-ms-box{background:var(--u-grad);border-color:transparent;} .qf2-ms-list input:checked + .qf2-ms-box::after{opacity:1;transform:scale(1);} .qf2-ms-list input:focus-visible + .qf2-ms-box{outline:2px solid #B9AEFF;outline-offset:2px;} .qf2-ms-list input:checked ~ .qf2-ms-txt{color:#fff;font-weight:600;} .qf2-ms-empty{padding:16px;text-align:center;font-size:14px;color:rgba(255,255,255,.45);} .qf2-ms-empty[hidden]{display:none;} .qf2-ms-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;} .qf2-ms-tag{ display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;cursor:pointer; border:0;background:var(--u-grad);color:#fff;font-family:inherit;font-size:12.8px;font-weight:600; box-shadow:0 8px 22px -12px rgba(110,91,255,.95); transition:transform .2s var(--u-ease),opacity .2s; } .qf2-ms-tag::after{content:"×";font-size:15px;line-height:1;opacity:.8;} .qf2-ms-tag:hover{transform:translateY(-1px);opacity:.92;} @media (max-width:520px){ .qf2-ms-list{max-height:230px;} .qf2-ms-btn{font-size:14px;padding:14px;} } /* ========================================================================= 6) ERİŞİLEBİLİRLİK ========================================================================= */ @media (prefers-reduced-motion:reduce){ .mnav,.mnav-backdrop,.mnav-list li,.u-bento-card,.u-sub-card,.qf2-submit{transition-duration:.01ms !important;animation:none !important;} .mnav.is-open .mnav-list > li{opacity:1;transform:none;} .svc-hero::before{animation:none;} }