/* ═══════════════════════════════════════════════════════════════ daha.net — WHMCS Child Theme (Nexus parent) Location (server): templates/vtheme/css/custom.css Nexus child theme auto-loads this file. KAPSAM (scope): - All header/footer rules are under the `.dn-scope` wrapper. Sebebi: daha.net'in .container/.btn/.nav/.nav-item/.nav-link classes carry the SAME names as WHMCS's Bootstrap 5. Scope without scoping, the panel content layout breaks. With .dn-scope these rules apply only to our header/footer markup. - :root tokens are global (only variable definitions, no conflict). Header/footer markup lives in header.tpl / footer.tpl
…
should be wrapped. ═══════════════════════════════════════════════════════════════ */ /* ════════ FONTS — Google Fonts (only the weights used) ════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@400;700;800&family=Plus+Jakarta+Sans:wght@600;700&display=swap'); /* ════════ TOKENS (global) ════════ */ :root{ --bg:#ffffff; --bg-soft:#f5f8fc; --bg-tint:#eef4fb; --bg-ink:#0b1220; --ink:#0b1220; --ink-2:#334155; --ink-soft:#64748b; --ink-faint:#94a3b8; --line:#e5eaf1; --line-2:#eef2f7; --blue:#0ea5e9; --blue-d:#0284c7; --blue-ink:#075985; --orange:#f97316; --orange-d:#ea580c; --green:#16a34a; --green-l:#22c55e; --purple:#7c3aed; --red:#ef4444; --amber:#f59e0b; --amber-d:#b45309; --amber-wash:#fef3c7; --red-d:#dc2626; --red-wash:#fee2e2; --green-d:#15803d; --purple-d:#6d28d9; --blue-wash:#e8f5fe; --orange-wash:#fff1e7; --green-wash:#e7f7ee; --purple-wash:#f1eafe; --r-xl:22px; --r-lg:16px; --r-md:11px; --r-sm:8px; --r-pill:100px; --sh-xs:0 1px 2px rgba(11,18,32,.05); --sh-sm:0 2px 8px rgba(11,18,32,.06); --sh-md:0 8px 24px rgba(11,18,32,.08); --sh-lg:0 18px 50px rgba(11,18,32,.12); --sh-blue:0 14px 40px rgba(14,165,233,.30); --sh-orange:0 14px 40px rgba(249,115,22,.28); --t-fast:.16s cubic-bezier(.4,0,.2,1); --t-mid:.28s cubic-bezier(.4,0,.2,1); --f-display:'Outfit',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-nav:'Plus Jakarta Sans',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --nav-h:66px; } /* ════════ SCOPE RESET ════════ */ .dn-scope,.dn-scope *,.dn-scope *::before,.dn-scope *::after{box-sizing:border-box} .dn-scope{font-family:var(--f-body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased} .dn-scope a{color:inherit;text-decoration:none} .dn-scope img,.dn-scope svg{max-width:100%;display:block} .dn-scope ul{list-style:none;margin:0;padding:0} .dn-scope button:where(:not(.btn)){font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} .dn-scope h1,.dn-scope h2,.dn-scope h3,.dn-scope h4{font-family:var(--f-display);line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0} .dn-scope strong{font-weight:700;color:var(--ink)} /* ════════ LAYOUT ════════ */ .dn-scope .container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px} /* ════════ BUTTONS ════════ */ .dn-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-nav);font-weight:700;font-size:.92rem;line-height:1;padding:12px 26px;border-radius:var(--r-md);cursor:pointer;transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),color var(--t-fast);white-space:nowrap} .dn-scope .btn:active{transform:translateY(0) scale(.98)} .dn-scope .btn:hover{transform:translateY(-2px)} .dn-scope .btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(14,165,233,.28)} .dn-scope .btn--primary:hover{background:var(--blue-d);box-shadow:var(--sh-blue)} .dn-scope .btn--orange{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;box-shadow:0 6px 18px rgba(249,115,22,.28)} .dn-scope .btn--orange:hover{box-shadow:var(--sh-orange)} .dn-scope .btn--soft{background:var(--blue-wash);color:var(--blue-d)} .dn-scope .btn--soft:hover{background:#d7eefe} .dn-scope .btn--sm{padding:9px 18px;font-size:.82rem} .dn-scope .btn--block{width:100%} .dn-scope .btn:focus-visible{outline:3px solid rgba(14,165,233,.45);outline-offset:2px;border-radius:var(--r-sm)} /* ════════ TOPBAR TICKER ════════ */ .dn-scope .topbar{background:var(--blue);padding:8px 0;overflow:hidden;position:relative} .dn-scope .ticker-track{display:flex;width:max-content;animation:dn-ticker 34s linear infinite} .dn-scope .topbar:hover .ticker-track{animation-play-state:paused} .dn-scope .ticker-item{white-space:nowrap;padding-inline:38px;font-family:var(--f-display);font-size:.8rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px} .dn-scope .ticker-item::after{content:'•';opacity:.55;margin-left:30px} @keyframes dn-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ════════ HEADER + MEGA MENU ════════ */ .dn-scope .hdr{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)} .dn-scope .hdr-inner{display:flex;align-items:center;gap:22px;height:var(--nav-h)} .dn-scope .logo{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);display:inline-flex;align-items:center} .dn-scope .logo em{color:var(--blue);font-style:normal} .dn-scope .logo img{height:44px;width:auto;display:block} @media(max-width:520px){.dn-scope .logo img{height:36px}} .dn-scope .nav{display:flex;align-items:center;gap:2px;margin-inline:auto} .dn-scope .nav-item{position:relative} .dn-scope .nav-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-nav);font-size:.9rem;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;transition:color var(--t-fast),background var(--t-fast)} .dn-scope .nav-link:hover,.dn-scope .nav-item:hover .nav-link,.dn-scope .nav-item.open .nav-link{color:var(--blue-d);background:var(--blue-wash)} .dn-scope .nav-link .caret{width:9px;height:9px;transition:transform var(--t-fast);opacity:.6} .dn-scope .nav-item:hover .nav-link .caret,.dn-scope .nav-item.open .nav-link .caret{transform:rotate(180deg)} .dn-scope .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-mid),transform var(--t-mid),visibility var(--t-mid);overflow:hidden;z-index:10;width:820px;max-width:calc(100vw - 32px)} .dn-scope .mega::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--purple),var(--orange))} .dn-scope .nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:18px} .dn-scope .nav-item:hover .mega,.dn-scope .nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .dn-scope .nav-item:nth-child(-n+2) .mega{left:0;transform:translateX(0) translateY(8px)} .dn-scope .nav-item:nth-child(-n+2):hover .mega,.dn-scope .nav-item:nth-child(-n+2).open .mega{transform:translateX(0) translateY(0)} .dn-scope .nav-item:nth-last-child(-n+2) .mega{left:auto;right:0;transform:translateX(0) translateY(8px)} .dn-scope .nav-item:nth-last-child(-n+2):hover .mega,.dn-scope .nav-item:nth-last-child(-n+2).open .mega{transform:translateX(0) translateY(0)} .dn-scope .mega-grid{display:grid;gap:0;grid-template-columns:1fr 230px} .dn-scope .mega-main{padding:24px 24px;display:flex;flex-direction:column;gap:18px} .dn-scope .mega-sec + .mega-sec{padding-top:18px;border-top:1px solid var(--line-2)} .dn-scope .mega-col-title{font-family:var(--f-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px} .dn-scope .mega-links{display:grid;grid-template-columns:1fr 1fr;gap:10px} .dn-scope .mega-link{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 30px 14px 16px;border-radius:13px;border:1px solid var(--line-2);background:#fff;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)} .dn-scope .mega-link:hover{background:var(--blue-wash);border-color:var(--blue);box-shadow:var(--sh-sm);transform:translateY(-2px)} .dn-scope .mega-link::after{content:'›';position:absolute;right:13px;top:50%;transform:translateY(-50%) translateX(-5px);font-size:1.15rem;font-weight:700;color:var(--blue-d);opacity:0;transition:opacity var(--t-fast),transform var(--t-fast)} .dn-scope .mega-link:hover::after{opacity:1;transform:translateY(-50%) translateX(0)} .dn-scope .mega-link .mi{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:transform var(--t-fast),box-shadow var(--t-fast)} .dn-scope .mega-link:hover .mi{transform:scale(1.09) rotate(-4deg);box-shadow:var(--sh-sm)} .dn-scope .mega-link .mi svg{width:21px;height:21px;display:block} .dn-scope .mi-blue{background:var(--blue-wash);color:var(--blue-d)} .dn-scope .mi-orange{background:var(--orange-wash);color:var(--orange-d)} .dn-scope .mi-green{background:var(--green-wash);color:var(--green)} .dn-scope .mi-purple{background:var(--purple-wash);color:var(--purple)} .dn-scope .mega-link .mtx{min-width:0;display:flex;flex-direction:column;padding-top:1px} .dn-scope .mega-link .mt{font-family:var(--f-nav);font-weight:700;font-size:.88rem;color:var(--ink);display:flex;align-items:center;gap:6px;line-height:1.2} .dn-scope .mega-link .md{font-size:.76rem;color:var(--ink-soft);line-height:1.45;margin-top:4px} .dn-scope .mega-link:hover .mt{color:var(--blue-d)} .dn-scope .navtag{position:absolute;top:-7px;left:11px;z-index:3;font-family:var(--f-mono);font-size:.54rem;font-weight:700;line-height:1;padding:3px 7px;border-radius:7px;letter-spacing:.05em;text-transform:uppercase;color:#fff;box-shadow:0 2px 7px rgba(2,8,23,.22);pointer-events:none;white-space:nowrap} .dn-scope .navtag-indirim{background:#ec4899} .dn-scope .navtag-kampanya{background:var(--orange)} .dn-scope .navtag-yeni{background:#10b981} /* cart counter badge — static position in header actions */ .dn-scope .dn-cart-count{position:static;box-shadow:none} .dn-scope .mega-main,.dn-scope .mega-promo{transform:translateY(6px);opacity:.4;transition:transform var(--t-mid),opacity var(--t-mid)} .dn-scope .nav-item:hover .mega .mega-main,.dn-scope .nav-item:hover .mega .mega-promo,.dn-scope .nav-item.open .mega .mega-main,.dn-scope .nav-item.open .mega .mega-promo{transform:translateY(0);opacity:1} .dn-scope .nav-item:hover .mega .mega-promo,.dn-scope .nav-item.open .mega .mega-promo{transition-delay:.05s} .dn-scope .mega-promo{background:linear-gradient(160deg,var(--bg-ink),#111c33);color:#fff;padding:24px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden} .dn-scope .mega-promo::before{content:'';position:absolute;inset:0;background:radial-gradient(120px 100px at 100% 0%,rgba(14,165,233,.35),transparent 70%);pointer-events:none} .dn-scope .mega-promo .pk{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#7dd3fc;margin-bottom:10px} .dn-scope .mega-promo h4{color:#fff;font-size:1.05rem;font-weight:800;line-height:1.25;margin-bottom:8px} .dn-scope .mega-promo p{font-size:.78rem;color:#cbd5e1;line-height:1.5;margin-bottom:16px} .dn-scope .mega-promo .btn{margin-top:auto} /* header right actions */ .dn-scope .hdr-actions{display:flex;align-items:center;gap:10px} .dn-scope .panel-btn{display:inline-flex;align-items:center;gap:7px} .dn-scope .panel-ico{display:none;width:18px;height:18px;flex-shrink:0} /* icon-only button (e.g. logout) — always square icon */ .dn-scope .dn-iconbtn{padding:0;width:38px;height:38px;justify-content:center;flex:none} .dn-scope .dn-iconbtn svg{width:18px;height:18px} /* hamburger */ .dn-scope .burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer} .dn-scope .burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:var(--t-fast)} /* ════════ MOBILE DRAWER ════════ */ .dn-scope .drawer{position:fixed;inset:0;z-index:400;background:rgba(11,18,32,.4);opacity:0;visibility:hidden;transition:opacity var(--t-mid),visibility var(--t-mid)} .dn-scope .drawer.open{opacity:1;visibility:visible} .dn-scope .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,88vw);background:#fff;box-shadow:-20px 0 60px rgba(11,18,32,.2);transform:translateX(100%);transition:transform var(--t-mid);display:flex;flex-direction:column;overflow-y:auto} .dn-scope .drawer.open .drawer-panel{transform:none} .dn-scope .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)} .dn-scope .drawer-close{font-size:1.5rem;color:var(--ink-soft);line-height:1;padding:4px} .dn-scope .drawer-body{padding:14px 12px;flex:1} .dn-scope .dr-group{border-bottom:1px solid var(--line-2)} .dn-scope .dr-head{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--ink);padding:15px 12px} .dn-scope .dr-head .caret{width:11px;height:11px;transition:transform var(--t-fast);opacity:.55} .dn-scope .dr-group.open .dr-head .caret{transform:rotate(180deg)} .dn-scope .dr-sub{max-height:0;overflow:hidden;transition:max-height var(--t-mid)} .dn-scope .dr-group.open .dr-sub{max-height:600px} .dn-scope .dr-sub a{display:block;padding:10px 12px 10px 24px;font-size:.88rem;color:var(--ink-soft)} .dn-scope .dr-sub a:hover{color:var(--blue-d)} .dn-scope .drawer-foot{padding:18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px} /* ════════ HEADER RESPONSIVE ════════ */ @media(max-width:880px){ .dn-scope .nav{display:none} .dn-scope .burger{display:flex} .dn-scope .hdr-actions{margin-left:auto} .dn-scope .panel-btn .btn-label{display:none} .dn-scope .panel-btn .panel-ico{display:block} .dn-scope .panel-btn{padding:0;width:40px;height:40px;justify-content:center;border-radius:12px} } @media(prefers-reduced-motion:reduce){ .dn-scope *{animation:none!important;transition-duration:.001ms!important} } /* ════════ FOOTER ════════ */ .dn-scope .ftr{background:var(--bg-ink);color:#cbd5e1;padding-block:56px 26px;border-top:1px solid rgba(255,255,255,.06)} .dn-scope .ftr .logo{color:#fff} .dn-scope .ftr .logo em{color:#38bdf8} .dn-scope .ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-bottom:38px;align-items:start} .dn-scope .ftr-col{display:flex;flex-direction:column;gap:30px;min-width:0} .dn-scope .f-group{margin:0} .dn-scope .f-head{margin:0 0 14px} .dn-scope .f-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:none;padding:0;color:#fff;font-family:var(--f-display);font-size:.95rem;font-weight:700;text-align:left;cursor:default} .dn-scope .f-ic{display:none;position:relative;width:18px;height:18px;flex-shrink:0} .dn-scope .f-ic::before,.dn-scope .f-ic::after{content:'';position:absolute;background:#94a3b8;border-radius:2px} .dn-scope .f-ic::before{top:8px;left:3px;right:3px;height:2px} .dn-scope .f-ic::after{left:8px;top:3px;bottom:3px;width:2px;transition:transform var(--t-fast),opacity var(--t-fast)} .dn-scope .f-group.open .f-ic::after{transform:scaleY(0);opacity:0} .dn-scope .f-group ul{list-style:none;display:flex;flex-direction:column;gap:9px} .dn-scope .f-group a{color:#94a3b8;font-size:.83rem;line-height:1.3;transition:color var(--t-fast)} .dn-scope .f-group a:hover{color:#fff} .dn-scope .ftr-brandbar{display:flex;align-items:center;gap:24px;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)} .dn-scope .ftr-brandbar .logo{flex-shrink:0;display:inline-block} .dn-scope .ftr-co{flex:1;color:#94a3b8;font-size:.85rem;line-height:1.5;padding-left:24px;border-left:1px solid rgba(255,255,255,.12)} .dn-scope .ftr-social{display:flex;gap:11px;flex-shrink:0} .dn-scope .social-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#94a3b8;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)} .dn-scope .social-btn svg{width:17px;height:17px} .dn-scope .social-btn:hover{color:#fff;border-color:var(--blue);background:rgba(56,189,248,.14)} .dn-scope .ftr-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;padding-top:22px;font-size:.78rem;color:#64748b;text-align:center} .dn-scope .ftr-strip .ftr-nap{flex-basis:100%;text-align:center} /* WHMCS language/currency trigger (opens modalChooseLanguage) */ .dn-scope .dn-locale{font-family:var(--f-mono);font-size:.76rem;color:#94a3b8;background:none;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:5px 13px;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)} .dn-scope .dn-locale:hover{color:#fff;border-color:var(--blue);background:rgba(56,189,248,.14)} @media(max-width:980px){.dn-scope .ftr-cols{grid-template-columns:repeat(2,1fr);gap:30px 28px}} @media(max-width:640px){ .dn-scope .ftr-cols{grid-template-columns:1fr;gap:0} .dn-scope .ftr-col{gap:0} .dn-scope .f-group{border-top:1px solid rgba(255,255,255,.08)} .dn-scope .f-head{margin:0} .dn-scope .f-toggle{cursor:pointer;padding:15px 2px} .dn-scope .f-ic{display:block} /* mobile accordion: groups start closed, open via f-toggle (footer.tpl JS) */ .dn-scope .f-group ul{max-height:0;overflow:hidden;transition:max-height var(--t-mid);gap:0} .dn-scope .f-group.open ul{max-height:1200px;padding-bottom:14px;gap:9px} .dn-scope .ftr-brandbar{flex-direction:column;align-items:flex-start;gap:18px} .dn-scope .ftr-co{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;width:100%} } /* ════════ LOGIN — Option A (split panel) ════════ */ .dn-scope .dn-login{padding:48px 24px;display:flex;justify-content:center} .dn-scope .dn-login-card{display:grid;grid-template-columns:1.05fr .95fr;width:100%;max-width:920px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden} .dn-scope .dn-login-form{padding:44px 42px;display:flex;flex-direction:column} .dn-scope .dn-login-title{font-family:var(--f-display);font-weight:800;font-size:1.65rem;color:var(--ink);margin:0 0 4px} .dn-scope .dn-login-sub{color:var(--ink-soft);font-size:.94rem;margin:0 0 22px} .dn-scope .dn-lab{font-family:var(--f-nav);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:block;margin:14px 0 6px} /* WHMCS Bootstrap input-group-merge → daha.net look (markup preserved) */ .dn-scope .dn-login .input-group.dn-inp{border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast);flex-wrap:nowrap} .dn-scope .dn-login .input-group.dn-inp:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,165,233,.12)} .dn-scope .dn-login .dn-inp .input-group-prepend,.dn-scope .dn-login .dn-inp .input-group-append{display:flex} .dn-scope .dn-login .dn-inp .input-group-text{background:transparent;border:0;color:var(--ink-faint);padding:0 12px} .dn-scope .dn-login .dn-inp .form-control{border:0;box-shadow:none;padding:12px 12px;height:auto;font-size:.95rem;font-family:var(--f-body);background:transparent;color:var(--ink)} .dn-scope .dn-login .dn-inp .form-control:focus{box-shadow:none;background:transparent} .dn-scope .dn-login .dn-inp .btn-reveal-pw{border:0;background:transparent;color:var(--ink-faint);padding:0 12px;box-shadow:none} .dn-scope .dn-login .dn-inp .btn-reveal-pw:hover{color:var(--ink-2)} .dn-scope .dn-login-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px;font-size:.86rem;gap:12px} .dn-scope .dn-remember{display:flex;align-items:center;gap:7px;color:var(--ink-soft);margin:0;cursor:pointer;font-weight:500} .dn-scope .dn-remember input{position:static;margin:0;accent-color:var(--blue);width:15px;height:15px;flex:none} .dn-scope .dn-link{color:var(--blue-d);font-weight:600;text-decoration:none} .dn-scope .dn-link:hover{text-decoration:underline} .dn-scope .dn-strong{font-weight:700} .dn-scope .dn-captcha{margin:16px 0 0} .dn-scope .dn-submit{width:100%;margin-top:18px;border:0;border-radius:var(--r-md);padding:14px;font-family:var(--f-nav);font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-d));box-shadow:0 10px 26px rgba(14,165,233,.30);transition:box-shadow var(--t-fast),transform var(--t-fast)} .dn-scope .dn-submit:hover{box-shadow:var(--sh-blue);color:#fff;transform:translateY(-1px)} .dn-scope .dn-login-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:.9rem;color:var(--ink-soft)} .dn-scope .dn-login .providerLinkingFeedback:empty{display:none} /* RIGHT brand panel (mega-promo gradient language) */ .dn-scope .dn-login-brand{position:relative;background:linear-gradient(160deg,#0b1220,#10203b 60%,#0b1726);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden} .dn-scope .dn-login-brand::before{content:'';position:absolute;inset:0;background:radial-gradient(420px 300px at 90% 0%,rgba(14,165,233,.30),transparent 62%),radial-gradient(360px 280px at 0% 100%,rgba(124,58,237,.22),transparent 60%);pointer-events:none} .dn-scope .dn-brand-pill{position:relative;align-self:center;display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:7px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#7dd3fc;margin-bottom:20px} .dn-scope .dn-brand-h{position:relative;font-family:var(--f-display);font-weight:800;font-size:1.55rem;line-height:1.22;margin:0 0 12px;color:#fff} .dn-scope .dn-brand-p{position:relative;color:#cbd5e1;font-size:.93rem;line-height:1.6;margin:0} .dn-scope .dn-brand-stats{position:relative;display:flex;gap:22px;margin-top:26px;justify-content:center} .dn-scope .dn-bstat .n{font-family:var(--f-display);font-weight:800;font-size:1.35rem;background:linear-gradient(90deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block} .dn-scope .dn-bstat .l{font-size:.72rem;color:#94a3b8;margin-top:2px;display:block} @media(max-width:760px){ .dn-scope .dn-login{padding:24px 14px} .dn-scope .dn-login-card{grid-template-columns:1fr;max-width:440px} .dn-scope .dn-login-form{padding:32px 26px} .dn-scope .dn-login-brand{display:none} } /* ════════ AUTH — single-card pages (password reset: email/security/new-password) ════════ */ .dn-scope .dn-auth{padding:48px 24px;display:flex;justify-content:center} .dn-scope .dn-auth-card{width:100%;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);padding:40px 38px} .dn-scope .dn-auth-card h1,.dn-scope .dn-auth-card h2,.dn-scope .dn-auth-card h3,.dn-scope .dn-auth-card h4,.dn-scope .dn-auth-card h5,.dn-scope .dn-auth-card h6,.dn-scope .dn-auth-card .h1,.dn-scope .dn-auth-card .h2,.dn-scope .dn-auth-card .h3{font-family:var(--f-display);font-weight:800;font-size:1.55rem;line-height:1.2;color:var(--ink);margin:0 0 4px} .dn-scope .dn-auth-card p,.dn-scope .dn-auth-card .text-muted{color:var(--ink-soft);font-size:.93rem;line-height:1.6} .dn-scope .dn-auth-card label{font-family:var(--f-nav);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:block;margin:14px 0 6px} /* standalone input (e.g. security question answer, new password) */ .dn-scope .dn-auth-card .form-control{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 14px;height:auto;font-size:.95rem;font-family:var(--f-body);color:var(--ink);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)} .dn-scope .dn-auth-card .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,165,233,.12);outline:none} /* input-group (email / password fields) */ .dn-scope .dn-auth-card .input-group{border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast);flex-wrap:nowrap} .dn-scope .dn-auth-card .input-group:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,165,233,.12)} .dn-scope .dn-auth-card .input-group .form-control{border:0;border-radius:0;box-shadow:none;background:transparent} .dn-scope .dn-auth-card .input-group .form-control:focus{border:0;box-shadow:none} .dn-scope .dn-auth-card .input-group-text{background:transparent;border:0;color:var(--ink-faint);padding:0 12px} .dn-scope .dn-auth-card .btn-reveal-pw{border:0;background:transparent;color:var(--ink-faint);padding:0 12px;box-shadow:none} .dn-scope .dn-auth-card .btn-reveal-pw:hover{color:var(--ink-2)} /* buton */ .dn-scope .dn-auth-card .btn-primary,.dn-scope .dn-auth-card .btn-default.btn-block,.dn-scope .dn-auth-card .btn.btn-block{width:100%;margin-top:18px;border:0;border-radius:var(--r-md);padding:14px;font-family:var(--f-nav);font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-d));box-shadow:0 10px 26px rgba(14,165,233,.30);transition:box-shadow var(--t-fast),transform var(--t-fast)} .dn-scope .dn-auth-card .btn-primary:hover{box-shadow:var(--sh-blue);color:#fff;transform:translateY(-1px)} .dn-scope .dn-auth-card .form-group{margin-bottom:6px} .dn-scope .dn-auth-card .text-center{text-align:center} .dn-scope .dn-auth-card .alert{border-radius:var(--r-md);font-size:.9rem} @media(max-width:560px){.dn-scope .dn-auth{padding:24px 14px}.dn-scope .dn-auth-card{padding:30px 24px}} /* ════════ REGISTER — step wizard ════════ */ .dn-scope .dn-reg{padding:40px 20px;display:flex;justify-content:center} .dn-scope .dn-reg-card{width:100%;max-width:900px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);padding:40px 44px;position:relative;overflow:hidden} .dn-scope .dn-reg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--purple),var(--orange))} .dn-scope .dn-reg-head h1{font-family:var(--f-display);font-weight:800;font-size:1.7rem;color:var(--blue-d);margin:0 0 4px} .dn-scope .dn-reg-head p{color:var(--ink-soft);font-size:.95rem;margin:0 0 24px} .dn-scope .dn-reg-err{margin-bottom:18px} /* account type tab */ .dn-scope .dn-acct{display:flex;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:5px;margin:0 auto 30px;max-width:620px} .dn-scope .dn-acct-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-nav);font-weight:700;font-size:.92rem;color:var(--ink-2);background:transparent;border:0;border-radius:var(--r-sm);padding:13px 16px;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)} .dn-scope .dn-acct-btn svg{width:18px;height:18px} .dn-scope .dn-acct-btn.is-active{background:linear-gradient(120deg,var(--blue),var(--blue-d));color:#fff;box-shadow:0 6px 16px rgba(14,165,233,.28)} .dn-scope .dn-acct-btn:not(.is-active):hover{color:var(--ink)} /* progress bar */ .dn-scope .dn-prog{margin-bottom:32px} .dn-scope .dn-prog-line{position:relative;height:3px;background:var(--line);border-radius:3px;margin:18px 7% 0} .dn-scope .dn-prog-fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--blue-d));width:0;transition:width var(--t-mid)} .dn-scope .dn-prog-steps{display:flex;justify-content:space-between;margin-top:-12px} .dn-scope .dn-prog-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;position:relative} .dn-scope .dn-prog-step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.82rem;background:#fff;border:2px solid var(--line);color:var(--ink-faint);transition:var(--t-fast)} .dn-scope .dn-prog-step .t{font-family:var(--f-nav);font-size:.74rem;font-weight:600;color:var(--ink-faint)} .dn-scope .dn-prog-step.is-active .n{border-color:var(--blue);color:var(--blue-d);box-shadow:0 0 0 4px rgba(14,165,233,.14)} .dn-scope .dn-prog-step.is-active .t{color:var(--ink)} .dn-scope .dn-prog-step.is-done .n{background:var(--blue);border-color:var(--blue);color:#fff} .dn-scope .dn-prog-step.is-done .t{color:var(--ink-2)} /* steps */ .dn-scope .dn-rstep[hidden]{display:none} .dn-scope .dn-step-title{font-family:var(--f-display);font-weight:800;font-size:1.25rem;color:var(--blue-d);margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--blue);display:inline-block} .dn-scope .dn-step-note{color:var(--ink-soft);font-size:.84rem;margin:0 0 18px} /* grid alanlar */ .dn-scope .dn-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:18px} .dn-scope .dn-row.one{grid-template-columns:1fr} .dn-scope .dn-row.three{grid-template-columns:1fr 1fr 1fr} .dn-scope .dn-field{display:flex;flex-direction:column;min-width:0} .dn-scope .dn-field-full{grid-column:1/-1} .dn-scope .dn-reg .dn-lab{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:700;color:var(--ink);margin:0 0 7px} .dn-scope .dn-reg .form-control,.dn-scope .dn-reg select.form-control{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 14px;height:auto;font-size:.95rem;font-family:var(--f-body);color:var(--ink);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)} .dn-scope .dn-reg .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,165,233,.12);outline:none} /* selects: remove native appearance, custom arrow (consistent Chrome/Firefox) */ .dn-scope .dn-reg select.form-control,.dn-scope .dn-auth-card select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;cursor:pointer;line-height:1.4} .dn-scope .dn-reg select.form-control::-ms-expand{display:none} .dn-scope .dn-reg .form-control[hidden]{display:none} .dn-scope .dn-help{font-size:.78rem;color:var(--ink-faint);margin-top:5px} .dn-scope .dn-company-only[hidden]{display:none} .dn-scope .dn-individual-only[hidden]{display:none} /* checkboxes */ .dn-scope .dn-optin{margin-top:18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px} .dn-scope .dn-check{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--ink-2);cursor:pointer;margin:0} .dn-scope .dn-check input{position:static;margin:3px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none} .dn-scope .dn-tos{margin-top:18px;justify-content:center} .dn-scope .dn-tos a{color:var(--blue-d);font-weight:600} /* password strength meter */ .dn-scope .dn-reg .password-strength-meter{padding-top:8px} .dn-scope .dn-reg .progress{height:6px;border-radius:6px;background:var(--line);overflow:hidden} .dn-scope .dn-reg .progress-bar{background:var(--blue)} .dn-scope .dn-reg .generate-password{border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:var(--r-md);padding:11px 16px;font-family:var(--f-nav);font-weight:600;font-size:.86rem;cursor:pointer;align-self:flex-end} .dn-scope .dn-reg .generate-password:hover{border-color:var(--blue);color:var(--blue-d)} /* navigasyon */ .dn-scope .dn-reg-nav{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line-2)} .dn-scope .dn-next,.dn-scope .dn-submit-reg{margin-left:auto;border:0;border-radius:var(--r-md);padding:14px 30px;font-family:var(--f-nav);font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-d));box-shadow:0 10px 26px rgba(14,165,233,.30);cursor:pointer;transition:box-shadow var(--t-fast),transform var(--t-fast)} .dn-scope .dn-next:hover,.dn-scope .dn-submit-reg:hover{box-shadow:var(--sh-blue);transform:translateY(-1px);color:#fff} .dn-scope .dn-back{border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:var(--r-md);padding:14px 24px;font-family:var(--f-nav);font-weight:700;font-size:.95rem;cursor:pointer} .dn-scope .dn-back:hover{border-color:var(--blue);color:var(--blue-d)} .dn-scope .dn-back[hidden],.dn-scope .dn-next[hidden],.dn-scope .dn-submit-reg[hidden]{display:none} @media(max-width:640px){ .dn-scope .dn-reg{padding:20px 12px} .dn-scope .dn-reg-card{padding:28px 20px} .dn-scope .dn-row,.dn-scope .dn-row.three{grid-template-columns:1fr} .dn-scope .dn-acct{flex-direction:column} .dn-scope .dn-prog-step .t{font-size:.66rem} .dn-scope .dn-prog-line{margin-inline:12%} } /* ═══════════════════════════════════════════════════════════════ PHASE 1 — PANEL GLOBAL SKIN (WHMCS Nexus content area) Applied only inside #main-body → header/footer (.dn-scope) and auth pages are preserved. Nexus CSS variables + Bootstrap components are pulled into the daha.net palette (blue #0ea5e9 / dark #0284c7). ID selector also overrides Nexus's element-chain rules. ═══════════════════════════════════════════════════════════════ */ /* — Geometry + page background: bind Nexus variables to daha values (harmless) — */ :root{ --rounding-md:11px; --rounding-sm:8px; --bg-muted:#f5f8fc; } /* — Content typography — */ #main-body{font-family:var(--f-body)} #main-body h1,#main-body h2,#main-body h3,#main-body h4,#main-body h5{font-family:var(--f-display);letter-spacing:-.01em} /* — Linkler — */ #main-body a:not(.btn){color:var(--blue-d)} #main-body a:not(.btn):hover{color:var(--blue-ink)} /* — Butonlar (ortak) — */ #main-body .btn{font-family:var(--f-nav);font-weight:700;border-radius:var(--r-md)} /* primary → daha mavi (Nexus'taki siyah/gri'yi ezer) */ #main-body .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff} #main-body .btn-primary:hover,#main-body .btn-primary:focus,#main-body .btn-primary:active,#main-body .show>.btn-primary.dropdown-toggle{background:var(--blue-d);border-color:var(--blue-d);color:#fff;box-shadow:0 0 0 .2rem rgba(14,165,233,.25)} #main-body .btn-primary:disabled,#main-body .btn-primary.disabled{background:var(--blue);border-color:var(--blue);opacity:.55} #main-body form.using-password-strength .btn-primary:disabled{background:#9fd4f1;border-color:#9fd4f1} /* success / danger / warning / info → daha color mapping */ #main-body .btn-success{background:var(--green);border-color:var(--green);color:#fff} #main-body .btn-success:hover,#main-body .btn-success:focus{background:#15803d;border-color:#15803d;color:#fff} #main-body .btn-danger{background:var(--red);border-color:var(--red);color:#fff} #main-body .btn-danger:hover,#main-body .btn-danger:focus{background:#dc2626;border-color:#dc2626;color:#fff} #main-body .btn-warning{background:var(--orange);border-color:var(--orange);color:#fff} #main-body .btn-warning:hover,#main-body .btn-warning:focus{background:var(--orange-d);border-color:var(--orange-d);color:#fff} #main-body .btn-info{background:#0891b2;border-color:#0891b2;color:#fff} #main-body .btn-info:hover,#main-body .btn-info:focus{background:#0e7490;border-color:#0e7490;color:#fff} /* secondary / default → neutral light (Nexus turned black on hover → blue-tint) */ #main-body .btn-secondary,#main-body .btn-default{background:#eef2f7;border-color:#cbd5e1;color:var(--ink)} #main-body .btn-secondary:hover,#main-body .btn-default:hover{background:var(--blue-wash);border-color:var(--blue);color:var(--blue-ink)} /* link / outline */ #main-body .btn-link{color:var(--blue-d)} #main-body .btn-link:hover{color:var(--blue-ink)} #main-body .btn-outline-primary{color:var(--blue-d);border-color:var(--blue)} #main-body .btn-outline-primary:hover{background:var(--blue);border-color:var(--blue);color:#fff} /* — Formlar — */ #main-body .form-control,#main-body .custom-select{border-color:var(--line);border-radius:var(--r-sm);color:var(--ink)} #main-body .form-control:focus,#main-body .custom-select:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(14,165,233,.18)} #main-body .input-group-text{background:var(--bg-soft);border-color:var(--line);color:var(--ink-soft)} #main-body .custom-control-input:checked~.custom-control-label::before{background:var(--blue);border-color:var(--blue)} /* — Kartlar / paneller — */ #main-body .card{border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)} #main-body .card-header{background:var(--bg-soft);border-bottom-color:var(--line);font-family:var(--f-display);color:var(--ink)} /* — Tablolar — */ #main-body .table thead th{background:var(--bg-soft);color:var(--ink);border-bottom-color:var(--line)} #main-body .table td,#main-body .table th{border-top-color:var(--line-2)} #main-body .table-hover tbody tr:hover{background:var(--blue-wash)} /* ═══════════ Responsive tables — horizontal scroll on mobile (instead of overflow) ═══════════ */ #main-body .table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} @media(max-width:820px){ #main-body .table-container .table{white-space:nowrap} #main-body table.table:not(.table-list){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%} } /* ═══════════ /responsive tablolar ═══════════ */ /* — Sekmeler (sayfa alt-navigasyonu) — */ #main-body .nav-tabs{border-bottom-color:var(--line)} #main-body .nav-tabs .nav-link{color:var(--ink-soft);border-radius:var(--r-sm) var(--r-sm) 0 0} #main-body .nav-tabs .nav-link:hover{color:var(--blue-d);border-color:transparent} #main-body .nav-tabs .nav-link.active{color:var(--blue-ink);border-color:var(--line) var(--line) #fff;font-weight:700} #main-body .nav-pills .nav-link.active,#main-body .nav-pills .show>.nav-link{background:var(--blue);color:#fff} /* — Alerts — */ #main-body .alert{border-radius:var(--r-md)} #main-body .alert-primary,#main-body .alert-info{color:var(--blue-ink);background:var(--blue-wash);border-color:#bfe6fb} #main-body .alert-success{color:#14532d;background:var(--green-wash);border-color:#bbf0cd} #main-body .alert-warning{color:#7c3a06;background:var(--orange-wash);border-color:#fed8b6} #main-body .alert-danger{color:#7f1d1d;background:#fdeaea;border-color:#f7c5c5} /* — Rozetler — */ #main-body .badge-primary,#main-body .badge-info{background:var(--blue)} #main-body .badge-success{background:var(--green)} #main-body .badge-danger{background:var(--red)} #main-body .badge-warning{background:var(--orange);color:#fff} /* — Breadcrumb / sayfalama — */ #main-body .breadcrumb{background:var(--bg-soft);border-radius:var(--r-md)} #main-body .breadcrumb-item.active{color:var(--ink-soft)} #main-body .page-link{color:var(--blue-d);border-color:var(--line)} #main-body .page-link:hover{background:var(--blue-wash);border-color:var(--line);color:var(--blue-ink)} #main-body .page-item.active .page-link{background:var(--blue);border-color:var(--blue);color:#fff} #main-body .page-link:focus{box-shadow:0 0 0 .2rem rgba(14,165,233,.2)} /* — Liste grubu / dropdown aktif — */ #main-body .list-group-item.active{background:var(--blue);border-color:var(--blue)} #main-body .dropdown-item.active,#main-body .dropdown-item:active{background:var(--blue)} /* — Progress bar — */ #main-body .progress-bar{background:var(--blue)} /* — Bootstrap color helpers (in content) — */ #main-body .text-primary{color:var(--blue-d)!important} #main-body .bg-primary{background:var(--blue)!important} /* — Language/currency modal (in footer, outside #main-body) — */ .modal-content .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff} .modal-content .btn-primary:hover,.modal-content .btn-primary:focus{background:var(--blue-d);border-color:var(--blue-d);color:#fff} /* ════════ UTILITY BAR (.ubar) — new site header ════════ */ .dn-scope .ubar{background:#0f1830} .dn-scope .ubar .uw{max-width:1200px;margin:0 auto;height:44px;padding:0 20px;display:flex;align-items:center;justify-content:space-between} .dn-scope .ubar nav{display:flex;align-items:center} .dn-scope .ubar nav a{display:flex;align-items:center;gap:6px;color:#cbd5e1;font-size:13px;text-decoration:none;padding:0 14px;transition:color .15s} .dn-scope .ubar nav a:first-child{padding-left:0} .dn-scope .ubar nav a:hover{color:#fff} .dn-scope .ubar nav a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} .dn-scope .ubar .uphone svg{stroke:#0ea5e9} .dn-scope .ubar .sep{width:1px;height:14px;background:rgba(255,255,255,.18)} .dn-scope .ubar .tk{display:flex;align-items:center;gap:7px;color:#fff;background:#16a34a;font-size:13px;font-weight:500;padding:7px 14px;border-radius:6px;text-decoration:none;transition:background .15s} .dn-scope .ubar .tk:hover{background:#15803d} .dn-scope .ubar .tk svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2} @media(max-width:680px){.dn-scope .ubar .uw{padding:0 14px}.dn-scope .ubar nav a span{display:none}} /* btn--ghost (new site — light/outlined button) */ .dn-scope .btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)} .dn-scope .btn--ghost:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-wash)} /* ════════ WHMCS BUTTONS — GLOBAL (including order form / modal / outside #main-body) ════════ */ /* Shell CTAs use .btn--primary (DOUBLE dash); these single-dash rules do NOT touch them. */ .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--blue-d);border-color:var(--blue-d);color:#fff} .btn-primary:disabled,.btn-primary.disabled{background:var(--blue);border-color:var(--blue);opacity:.55} .btn-success{background:var(--green);border-color:var(--green);color:#fff} .btn-success:hover,.btn-success:focus{background:#15803d;border-color:#15803d;color:#fff} .btn-danger{background:var(--red);border-color:var(--red);color:#fff} .btn-danger:hover,.btn-danger:focus{background:#dc2626;border-color:#dc2626;color:#fff} .btn-info{background:#0891b2;border-color:#0891b2;color:#fff} .btn-info:hover,.btn-info:focus{background:#0e7490;border-color:#0e7490;color:#fff} .btn-warning{background:var(--orange);border-color:var(--orange);color:#fff} .btn-warning:hover,.btn-warning:focus{background:var(--orange-d);border-color:var(--orange-d);color:#fff} .btn-default,.btn-secondary{background:#eef2f7;border-color:#cbd5e1;color:var(--ink)} .btn-default:hover,.btn-default:focus,.btn-secondary:hover,.btn-secondary:focus{background:var(--blue-wash);border-color:var(--blue);color:var(--blue-ink)} .btn-outline-primary{color:var(--blue-d);border-color:var(--blue)} .btn-outline-primary:hover{background:var(--blue);border-color:var(--blue);color:#fff} .btn-link{color:var(--blue-d)} .btn-link:hover{color:var(--blue-ink)} /* ════════ WHMCS CONTENT BUTTONS — DEFINITIVE SOLUTION ════════ ALL neutral/variantless buttons inside #main-body (plain .btn, .btn-default, .btn-secondary, .btn-block, .btn-lg…) turn into a visible branded button: white background + blue border + blue text; fills blue on hover. Colored variants (primary/success/danger/info/warning/link/outline) and EXCEPT auth (.dn-*), reveal-pw, .close. Shell outside #main-body → unaffected. */ #main-body .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-reveal-pw):not(.close):not([class*="dn-"]){background:#fff;border:1px solid var(--blue);color:var(--blue-d);border-radius:var(--r-md);font-weight:600} #main-body .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-reveal-pw):not(.close):not([class*="dn-"]):hover, #main-body .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-reveal-pw):not(.close):not([class*="dn-"]):focus{background:var(--blue);border-color:var(--blue);color:#fff} /* ════════ Order form "Pay" (checkout) — pinpoint (id+class) ════════ .btn-success but its background was overridden → solid daha green, prominent button. Only this element. */ a#checkout,a.btn-checkout{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;opacity:1!important} a#checkout:hover,a#checkout:focus,a.btn-checkout:hover,a.btn-checkout:focus{background:#15803d!important;border-color:#15803d!important;color:#fff!important} /* ════════ Store "Buy" buttons (.btn-order-now) — pinpoint ════════ .btn-success but store CSS was overriding → solid daha green, prominent. id per product changed, so the fixed .btn-order-now class is targeted. Only these buttons. */ .btn-order-now{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;opacity:1!important} .btn-order-now:hover,.btn-order-now:focus{background:#15803d!important;border-color:#15803d!important;color:#fff!important} /* ════════════════════════════════════════════════════════════ STAGE 1 — ORDER FORM POLISH (standard_cart / daha_cart) Scope: #main-body [id^="order-"] → order-form'un kendi #order-* CSS'ini applies AND covers both standard_cart and daha_cart clones. Visual only; markup/JS (purchase flow) preserved. ════════════════════════════════════════════════════════════ */ /* Headings */ #main-body [id^="order-"] .header-lined{border-color:var(--line)} #main-body [id^="order-"] .header-lined h1, #main-body [id^="order-"] h1.font-size-36{font-family:var(--f-display);color:var(--ink);letter-spacing:-.02em} #main-body [id^="order-"] .sub-heading, #main-body [id^="order-"] .sub-heading-borderless{font-family:var(--f-display);color:var(--ink);border-color:var(--line)} #main-body [id^="order-"] .sub-heading span, #main-body [id^="order-"] .sub-heading-borderless span{background:transparent;color:var(--ink-soft);font-weight:600} #main-body [id^="order-"] .cart-sidebar h3{font-family:var(--f-display);color:var(--ink)} /* Product info band → soft daha card */ #main-body [id^="order-"] .product-info{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;font-size:.9rem;color:var(--ink-2)} #main-body [id^="order-"] .product-info .product-title{font-family:var(--f-display);color:var(--ink);font-size:1.5rem} /* Field boxes */ #main-body [id^="order-"] .field-container{border-color:var(--line);border-radius:var(--r-md)} /* ORDER SUMMARY → daha card (white card instead of gray #666) */ #main-body [id^="order-"] .order-summary{background:#fff;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden} #main-body [id^="order-"] .order-summary h2{background:var(--bg-soft);color:var(--ink);font-family:var(--f-display);font-weight:700;text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:1.15rem} #main-body [id^="order-"] .summary-container{background:#fff;font-size:.9rem;padding:16px 18px;color:var(--ink-2)} #main-body [id^="order-"] .order-summary .product-name{font-family:var(--f-display);color:var(--ink);font-size:1.05rem} #main-body [id^="order-"] .order-summary .product-group{color:var(--ink-soft)} #main-body [id^="order-"] .order-summary .summary-totals{border-top-color:var(--line);border-bottom-color:var(--line)} #main-body [id^="order-"] .order-summary .total-due-today .amt{font-family:var(--f-display);color:var(--blue-ink);font-weight:800} /* Left menu (Categories/Actions/Currency) hidden on ALL order pages → full-width content. (WHMCS already does the same at ≤1199px; we apply to all widths.) Sticky summary REMOVED — "Continue" button was overlapping under the summary. */ #main-body .cart-body{width:100%!important;float:none!important;max-width:100%!important} /* order-form container stays centered (content centered without sidebar, full width not stuck to edge) */ #main-body .container{margin-left:auto;margin-right:auto} /* ════════ BILLING CYCLE — HORIZONTAL CARDS (monthly price emphasized) — daha_cart ════════ native select hidden; cards generated from price via JS (XSS-safe createElement). */ #main-body [id^="order-"] .dn-cyc-native{display:none} #main-body [id^="order-"] .dn-cyc-heading{font-family:var(--f-nav);font-weight:700;color:var(--ink);font-size:.95rem;margin:0 0 12px;display:block} #main-body [id^="order-"] .dn-cyc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px} @media(max-width:640px){#main-body [id^="order-"] .dn-cyc-grid{grid-template-columns:repeat(2,1fr)}} #main-body [id^="order-"] .dn-cyc-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px 12px 14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden} #main-body [id^="order-"] .dn-cyc-card:hover{border-color:#bcdcf0} #main-body [id^="order-"] .dn-cyc-card.sel{border-color:var(--blue);border-width:2px;background:var(--blue-wash)} #main-body [id^="order-"] .dn-cyc-check{position:absolute;top:-1px;right:-1px;width:30px;height:30px;background:var(--blue);color:#fff;font-weight:800;font-size:.85rem;border-radius:0 var(--r-lg) 0 var(--r-lg);display:none;align-items:center;justify-content:center;line-height:1} #main-body [id^="order-"] .dn-cyc-card.sel .dn-cyc-check{display:flex} #main-body [id^="order-"] .dn-cyc-name{font-family:var(--f-nav);font-weight:700;color:var(--ink-2);font-size:.9rem;margin-bottom:8px} #main-body [id^="order-"] .dn-cyc-permonth{font-family:var(--f-display);color:var(--ink);line-height:1} #main-body [id^="order-"] .dn-cyc-int{font-size:1.75rem;font-weight:800} #main-body [id^="order-"] .dn-cyc-dec{font-size:.78rem;font-weight:700;vertical-align:top;color:var(--ink-2)} #main-body [id^="order-"] .dn-cyc-card.sel .dn-cyc-int{color:var(--blue-ink)} #main-body [id^="order-"] .dn-cyc-per{display:block;font-size:.72rem;color:var(--ink-soft);font-weight:600;margin-top:3px} #main-body [id^="order-"] .dn-cyc-total{margin-top:8px;font-size:.72rem;color:var(--ink-soft)} #main-body [id^="order-"] .dn-cyc-total s{color:var(--ink-faint)} #main-body [id^="order-"] .dn-cyc-total b{color:var(--blue-ink);font-weight:800;font-size:.86rem} #main-body [id^="order-"] .dn-cyc-badge-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:3px;margin-top:10px} #main-body [id^="order-"] .dn-cyc-pct{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-family:var(--f-nav);font-weight:800;font-size:.72rem;padding:4px 12px;border-radius:var(--r-pill);box-shadow:0 3px 8px rgba(22,163,74,.28)} #main-body [id^="order-"] .dn-cyc-save{color:#15803d;font-weight:800;font-size:.74rem;font-family:var(--f-display)} /* ════════ STAGE 3 — CONFIGURATION OPTION CARDS (optiontype 1: OS/Panel) ════════ native select hidden; vertical radio cards via Smarty; click document-delegated (reload-resilient). */ #main-body [id^="order-"] .dn-opt-native{display:none} #main-body [id^="order-"] .dn-opt-label{font-family:var(--f-nav);font-weight:700;color:var(--ink);font-size:.9rem;margin:0 0 10px;display:block} #main-body [id^="order-"] .dn-opt-cards{display:flex;flex-direction:column;gap:8px} #main-body [id^="order-"] .dn-opt-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff} #main-body [id^="order-"] .dn-opt-card:hover{border-color:#bcdcf0} #main-body [id^="order-"] .dn-opt-card.sel{border-color:var(--blue);border-width:2px;background:var(--blue-wash);padding:10px 13px} #main-body [id^="order-"] .dn-opt-rdo{flex-shrink:0;width:18px;height:18px;border:2px solid #cbd5e1;border-radius:50%;position:relative} #main-body [id^="order-"] .dn-opt-card.sel .dn-opt-rdo{border-color:var(--blue)} #main-body [id^="order-"] .dn-opt-card.sel .dn-opt-rdo::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)} #main-body [id^="order-"] .dn-opt-name{flex:1;font-family:var(--f-body);font-weight:600;color:var(--ink);font-size:.92rem} #main-body [id^="order-"] .dn-opt-card.sel .dn-opt-name{color:var(--blue-ink)} /* Config option groups stacked (full width) — server details stay 2-col */ #main-body [id^="order-"] #productConfigurableOptions .col-sm-6{flex:0 0 100%;max-width:100%} /* ════════ PART 2 — BLUE SECTION HEADINGS + PAYMENT ICONS ════════ */ #main-body [id^="order-"] .sub-heading, #main-body [id^="order-"] .dn-cyc-heading, #main-body [id^="order-"] .dn-opt-label{display:flex;align-items:center;min-height:52px;height:auto;background:var(--blue-tint);border:1px solid #d5e8f6;border-radius:var(--r-md);text-align:left;line-height:1.3;margin:22px 0 14px;padding:12px 18px 12px 46px;position:relative;font-family:var(--f-display);color:var(--ink);font-size:1.02rem;font-weight:700} #main-body [id^="order-"] .sub-heading::before, #main-body [id^="order-"] .dn-cyc-heading::before, #main-body [id^="order-"] .dn-opt-label::before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") center/contain no-repeat} #main-body [id^="order-"] .sub-heading span{background:transparent;padding:0;color:inherit;font-weight:inherit;font-size:inherit;position:static;top:0;display:inline;line-height:inherit} #main-body [id^="order-"] .dn-pay{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap} #main-body [id^="order-"] .dn-pay-ic{border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-family:var(--f-nav);font-weight:800;font-size:.72rem;color:var(--ink-2);background:#fff} #main-body [id^="order-"] .dn-pay-note{text-align:center;font-size:.78rem;color:var(--ink-soft);margin-top:10px;line-height:1.5} /* ── Part 2b: config card icons (OS/panel) — JS fills color+abbrev; real logos as assets here ── */ #main-body [id^="order-"] .dn-opt-ico{flex-shrink:0;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-nav);font-weight:800;font-size:.64rem;line-height:1} #main-body [id^="order-"] .dn-opt-ico:empty{display:none} /* ── Part 2c: hidden server fields + real OS logos ── */ #main-body [id^="order-"] .dn-hide{display:none!important} #main-body [id^="order-"] .dn-full{flex:0 0 100%;max-width:100%} #main-body [id^="order-"] .dn-opt-ico.has-logo{background:#fff;border:1px solid var(--line);padding:3px} #main-body [id^="order-"] .dn-opt-logo{width:100%;height:100%;object-fit:contain;display:block} /* Breadcrumb (Cart) hidden on order/cart pages */ body:has([id^="order-"]) .master-breadcrumb{display:none} /* ════════ CART (viewcart) — card-based (Part 1) ════════ */ #main-body [id^="order-"] .view-cart-items{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:4px 20px} #main-body [id^="order-"] .view-cart-items-header{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 16px;margin-bottom:10px;font-family:var(--f-nav);font-weight:700;color:var(--ink-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em} #main-body [id^="order-"] .item{border-bottom:1px solid var(--line-2);padding:16px 0} #main-body [id^="order-"] .view-cart-items .item:last-child{border-bottom:0} #main-body [id^="order-"] .item-title{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:1.05rem} #main-body [id^="order-"] .item-group,#main-body [id^="order-"] .item-domain{color:var(--ink-soft);font-size:.85rem} #main-body [id^="order-"] .item-price{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.05rem} #main-body [id^="order-"] .item-price .cycle{display:block;font-family:var(--f-body);font-weight:600;color:var(--ink-soft);font-size:.78rem} #main-body [id^="order-"] .btn-remove-from-cart{color:var(--ink-faint)} #main-body [id^="order-"] .btn-remove-from-cart:hover{color:var(--red)} /* promo / vergi tahmini kutusu → kart */ #main-body [id^="order-"] .view-cart-gateway-checkout{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 20px;margin-top:18px} #main-body [id^="order-"] .view-cart-gateway-checkout .nav-tabs{border-bottom-color:var(--line)} #main-body [id^="order-"] .view-cart-promotion-code{font-weight:600;color:var(--ink-2)} /* ── Cart (viewcart) Part 2: description + feature detail box + Empty Cart ── */ #main-body [id^="order-"] .dn-cart-sub{color:var(--ink-soft);font-size:.95rem;margin:-4px 0 22px} #main-body [id^="order-"] .dn-item-specs{margin-top:10px;background:var(--blue-tint);border:1px solid #d5e8f6;border-left:3px solid var(--blue);border-radius:var(--r-md);padding:10px 14px;color:var(--ink-2);font-size:.82rem;line-height:1.9} #main-body [id^="order-"] .empty-cart{text-align:right;margin:14px 2px 0} #main-body [id^="order-"] #btnEmptyCart{color:var(--ink-soft);font-family:var(--f-nav);font-weight:600;text-decoration:none} #main-body [id^="order-"] #btnEmptyCart:hover{color:var(--red)} /* ════════ ORDER FORM — ALL INPUT/SELECT CLEAR BORDER (including checkout) ════════ */ #main-body [id^="order-"] .form-control{border:1.5px solid var(--line);border-radius:10px;box-shadow:none;height:auto;background:#fff;color:var(--ink)} #main-body [id^="order-"] .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.15);outline:none} #main-body [id^="order-"] .prepend-icon{position:relative} #main-body [id^="order-"] .prepend-icon>.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-faint);z-index:2;margin:0;padding:0} #main-body [id^="order-"] .prepend-icon>.form-control{padding-left:42px} /* ════════ CHECKOUT — Part 1 ════════ */ #main-body [id^="order-"] .dn-checkout-banner{display:flex;align-items:center;gap:14px;justify-content:center;background:var(--blue-tint);border:1px solid #d5e8f6;border-radius:var(--r-lg);padding:18px 24px;margin:0 0 22px;color:var(--blue-ink);font-weight:500} #main-body [id^="order-"] .dn-checkout-banner svg{width:28px;height:28px;flex-shrink:0} #main-body [id^="order-"] #frmCheckout{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:22px 26px} /* payment method radio → card */ #main-body [id^="order-"] #paymentGatewaysContainer .text-center{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px} #main-body [id^="order-"] .radio-inline:has(.payment-methods){display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 22px;cursor:pointer;margin:0;font-family:var(--f-nav);font-weight:600;color:var(--ink-2);transition:border-color .15s,background .15s} #main-body [id^="order-"] .radio-inline:has(.payment-methods:checked){border-color:var(--blue);border-width:2px;background:var(--blue-wash);color:var(--blue-ink);padding:11px 21px} /* Complete Order → green, prominent */ #main-body [id^="order-"] #btnCompleteOrder{background:var(--green);border-color:var(--green);color:#fff;font-family:var(--f-nav);font-weight:700;padding:14px 44px;border-radius:var(--r-md);font-size:1.02rem} #main-body [id^="order-"] #btnCompleteOrder:hover:not([disabled]){background:var(--green-d);border-color:var(--green-d)} /* terms checkbox */ #main-body [id^="order-"] .checkbox-inline{font-weight:500;color:var(--ink-2)} #main-body [id^="order-"] #accepttos{margin-right:4px} /* ── Checkout — login section card panel (like reference) ── */ #main-body [id^="order-"] #containerExistingUserSignin{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 24px 24px;margin-bottom:24px} #main-body [id^="order-"] #containerExistingUserSignin .sub-heading{margin-top:20px} #main-body [id^="order-"] #btnExistingLogin{background:var(--blue);border-color:var(--blue);color:#fff;font-family:var(--f-nav);font-weight:700;padding:11px 36px;border-radius:var(--r-md)} #main-body [id^="order-"] #btnExistingLogin:hover{background:var(--blue-d);border-color:var(--blue-d)} /* "Already Have an Account?" / "Register" toggle buttons more solid */ #main-body [id^="order-"] #btnAlreadyRegistered,#main-body [id^="order-"] #btnNewUserSignup{font-family:var(--f-nav);font-weight:700;border-radius:var(--r-md);padding:10px 20px} /* ── Checkout — inviting login prompt card (WHMCS toggle preserved) ── */ #main-body [id^="order-"] .dn-login-prompt{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#f2f8fd,#fff);border:1.5px solid #d5e8f6;border-radius:var(--r-lg);padding:16px 22px;margin:0 0 22px} #main-body [id^="order-"] .dn-lp-ic{width:42px;height:42px;border-radius:11px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0} #main-body [id^="order-"] .dn-lp-tx{flex:1;min-width:0} #main-body [id^="order-"] .dn-lp-tx b{font-family:var(--f-display);font-size:1.05rem;display:block;color:var(--ink)} #main-body [id^="order-"] .dn-lp-tx span{color:var(--ink-soft);font-size:.86rem} #main-body [id^="order-"] .dn-login-prompt .pull-right,#main-body [id^="order-"] .dn-login-prompt .float-right{margin:0;flex-shrink:0;float:none!important} #main-body [id^="order-"] .dn-login-prompt #btnAlreadyRegistered,#main-body [id^="order-"] .dn-login-prompt #btnNewUserSignup{background:var(--blue);border-color:var(--blue);color:#fff;font-family:var(--f-nav);font-weight:700;border-radius:var(--r-md);padding:11px 24px} #main-body [id^="order-"] .dn-login-prompt #btnAlreadyRegistered:hover,#main-body [id^="order-"] .dn-login-prompt #btnNewUserSignup:hover{background:var(--blue-d);border-color:var(--blue-d)} @media(max-width:600px){#main-body [id^="order-"] .dn-login-prompt{flex-wrap:wrap}#main-body [id^="order-"] .dn-login-prompt .pull-right{width:100%}} /* ── Checkout — "(* Required Fields.)" note (aligned, under pill) ── */ #main-body [id^="order-"] .dn-req-note{color:var(--ink-soft);font-size:.82rem;font-style:italic;margin:8px 0 16px 4px;line-height:1.4} #main-body [id^="order-"] .dn-req-note i{font-style:italic} /* ════════ DOMAIN SEARCH (configureproductdomain) — look (WHMCS logic preserved) ════════ */ #main-body .dn-domain-banner{text-align:center;background:var(--blue-tint);border:1px solid #d5e8f6;border-radius:var(--r-lg);padding:26px 24px;margin:0 0 24px} #main-body .dn-domain-banner svg{width:34px;height:34px;color:var(--blue-d);margin-bottom:8px} #main-body .dn-domain-banner h2{font-family:var(--f-display);font-size:1.5rem;color:var(--blue-ink);margin:0 0 4px} #main-body .dn-domain-banner p{margin:0;color:var(--ink-soft);font-size:.95rem} /* option cards */ #main-body .domain-selection-options .option{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px 22px;margin-bottom:16px} #main-body .domain-selection-options .option>label{font-family:var(--f-nav);font-weight:700;color:var(--ink);font-size:1rem;display:flex;align-items:center;gap:9px;margin-bottom:14px;cursor:pointer} /* arama input + buton */ #main-body .domains-row .form-control,#main-body #registersld,#main-body #registertld,#main-body #transferdomain input.form-control{border:1.5px solid var(--line);border-radius:10px;height:auto;padding:12px 14px;box-shadow:none} #main-body .domains-row .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.15)} #main-body #btnCheckAvailability{background:var(--blue-d);border-color:var(--blue-d);font-family:var(--f-nav);font-weight:700;border-radius:10px;padding:12px 8px} #main-body #btnCheckAvailability:hover{background:#036aa5} /* result headings */ #main-body .domain-available,#main-body .domain-checker-available{color:var(--green-d)!important;font-family:var(--f-display);font-size:1.15rem} #main-body .domain-unavailable,#main-body .domain-checker-unavailable{color:var(--red)!important;font-family:var(--f-display);font-size:1.15rem} #main-body .domain-price .price,#main-body .available.price,#main-body .price{font-family:var(--f-display);font-weight:800;color:var(--ink)} /* Add button (green, branded) */ #main-body .btn-add-to-cart.product-domain{background:var(--green);border-color:var(--green);color:#fff;font-family:var(--f-nav);font-weight:700;border-radius:8px} #main-body .btn-add-to-cart.product-domain:hover{background:var(--green-d);border-color:var(--green-d)} /* spotlight tld cards */ #main-body .spotlight-tld{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;text-align:center} /* ═══════════ DOMAIN SEARCH (domainregister) HERO SKIN ═══════════ */ /* Stock yellow .domain-checker-container + globe.png overridden → soft blue hero */ #main-body .domain-checker-container{ margin:26px 0 !important;padding:0 !important;border-radius:var(--r-xl) !important; border:1px solid #dce9f8 !important; background: radial-gradient(120% 150% at 88% 6%, rgba(14,165,233,.16), transparent 55%), radial-gradient(120% 140% at 6% 98%, rgba(2,132,199,.12), transparent 52%), linear-gradient(162deg,#f4faff 0%,#e9f4fe 48%,#e0eefb 100%) !important} #main-body .domain-checker-bg{position:relative;overflow:hidden;margin:0;padding:52px 24px 44px !important;background-image:none !important;text-align:center} #main-body .domain-checker-bg .dn-hero-head{position:relative;z-index:2;margin:0 0 22px} #main-body .domain-checker-bg .dn-hero-head h1{font-family:var(--f-display);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.12} #main-body .domain-checker-bg .dn-hero-head p{color:var(--ink-2);font-size:1.02rem;margin:12px auto 0;max-width:560px} /* search box (simple mode; :not(.domain-checker-advanced) so advanced AI search isn't broken) */ #main-body .domain-checker-container:not(.domain-checker-advanced) .input-group-box{position:relative;z-index:2;max-width:720px;margin:0 auto !important;padding:9px !important;background:#fff !important;border:1px solid #eaf3fb !important;border-radius:var(--r-lg) !important;box-shadow:0 16px 40px rgba(2,132,199,.16),0 2px 6px rgba(2,8,23,.05) !important;display:flex;gap:8px;align-items:stretch} #main-body .domain-checker-container:not(.domain-checker-advanced) .input-group-box .form-control{flex:1;min-width:0;height:52px !important;border:none !important;background:transparent !important;font-size:1.08rem;color:var(--ink);border-radius:0 !important;box-shadow:none !important} #main-body .domain-checker-container:not(.domain-checker-advanced) .input-group-box .input-group-btn, #main-body .domain-checker-container:not(.domain-checker-advanced) .input-group-box .input-group-append{display:flex} #main-body .domain-checker-container:not(.domain-checker-advanced) .domain-check-availability{width:auto !important;height:auto !important;padding:0 34px !important;border-radius:var(--r-md) !important;background:var(--blue) !important;border:none !important;font-family:var(--f-nav);font-weight:700;font-size:1rem;box-shadow:0 6px 18px rgba(14,165,233,.28);white-space:nowrap} #main-body .domain-checker-container:not(.domain-checker-advanced) .domain-check-availability:hover{background:var(--blue-d) !important} /* decor: orbit + floating TLD badges */ #main-body .dn-hero-decor{position:absolute;inset:0;z-index:1;pointer-events:none} #main-body .dn-hero-orbit{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:480px;height:480px;opacity:.42} #main-body .dn-float-tld{position:absolute;font-family:var(--f-display);font-weight:800;font-size:.86rem;color:var(--blue-d);background:rgba(255,255,255,.92);border:1px solid #d3e8fa;padding:7px 14px;border-radius:var(--r-pill);box-shadow:0 6px 16px rgba(2,132,199,.12);animation:dnFloaty 7s ease-in-out infinite} #main-body .dn-float-tld.t1{top:15%;left:6%} #main-body .dn-float-tld.t2{top:63%;left:10%;animation-delay:1.1s} #main-body .dn-float-tld.t3{top:20%;right:8%;animation-delay:.5s} #main-body .dn-float-tld.t4{top:66%;right:12%;animation-delay:1.8s} #main-body .dn-float-tld.t5{top:43%;left:2.5%;animation-delay:2.4s;opacity:.85} @keyframes dnFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* popular extension strip */ #main-body .dn-pop-tlds{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:20px;font-family:var(--f-nav);font-size:.82rem;color:var(--ink-soft)} #main-body .dn-pop-tlds .lbl{font-weight:600} #main-body .dn-pop-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);border:1px solid #dcebf8;border-radius:var(--r-pill);padding:6px 13px} #main-body .dn-pop-pill b{color:var(--ink);font-family:var(--f-display);font-weight:700} #main-body .dn-pop-pill .amt{color:var(--green-d,#15803d);font-family:var(--f-display);font-weight:800} /* responsive */ @media (max-width:768px){ #main-body .domain-checker-bg{padding:40px 16px 34px !important} #main-body .dn-hero-orbit{opacity:.26;right:-120px;width:360px;height:360px} #main-body .dn-float-tld{display:none} } @media (max-width:560px){ #main-body .domain-checker-container:not(.domain-checker-advanced) .input-group-box{flex-direction:column} #main-body .domain-checker-container:not(.domain-checker-advanced) .input-group-box .form-control{height:48px !important;text-align:center} #main-body .domain-checker-container:not(.domain-checker-advanced) .domain-check-availability{width:100% !important;padding:14px 0 !important} } @media (prefers-reduced-motion:reduce){#main-body .dn-float-tld{animation:none}} /* ═══════════ /DOMAIN ARAMA HERO ═══════════ */ /* ═══════════ DOMAIN CONFIGURATION (configuredomains) SKIN ═══════════ */ /* period + hosting alan etiketleri */ #main-body .dn-confdomains .form-group>label{font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px} #main-body .dn-confdomains .form-group{margin-bottom:22px} #main-body .dn-confdomains .col-sm-6 .form-group{text-align:center} /* hosting link/status (inline styles overridden with !important) */ #main-body .dn-confdomains a[style*="cc0000"]{color:var(--orange-d) !important;font-family:var(--f-nav);font-weight:700;text-decoration:none} #main-body .dn-confdomains a[style*="cc0000"]:hover{text-decoration:underline} #main-body .dn-confdomains span[style*="009900"]{color:var(--green-d) !important;font-weight:700} /* addon cards (panel-addon reskin — WHMCS JS structure preserved) */ #main-body .dn-confdomains .addon-products{margin:24px 0 4px} #main-body .dn-confdomains .panel-addon{display:flex;flex-direction:column;height:100%;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--t-fast),box-shadow var(--t-fast)} #main-body .dn-confdomains .panel-addon:hover{box-shadow:var(--sh-md)} #main-body .dn-confdomains .panel-addon.panel-addon-selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.16)} #main-body .dn-confdomains .panel-addon .panel-body{flex:1;padding:20px 20px 14px !important;background:transparent !important;font-size:.9rem;color:var(--ink-soft);line-height:1.55} #main-body .dn-confdomains .panel-addon .panel-body label{font-family:var(--f-display) !important;font-weight:700 !important;font-size:1.06rem !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:normal !important;display:inline-flex;align-items:center;gap:9px;cursor:pointer;margin:0 0 6px} #main-body .dn-confdomains .panel-addon .panel-body input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);cursor:pointer} #main-body .dn-confdomains .panel-addon .panel-price{background:var(--bg-soft) !important;border-top:1px solid var(--line-2);color:var(--ink) !important;font-family:var(--f-display);font-weight:800;font-size:.98rem;padding:11px 20px !important;text-align:left} #main-body .dn-confdomains .panel-addon .panel-add{background:var(--blue) !important;color:#fff !important;font-family:var(--f-nav);font-weight:700;font-size:.9rem;padding:12px !important;text-align:center;cursor:pointer;transition:background var(--t-fast)} #main-body .dn-confdomains .panel-addon .panel-add:hover{background:var(--blue-d) !important} #main-body .dn-confdomains .panel-addon.panel-addon-selected .panel-add{background:var(--blue-d) !important} /* nameserver 2×2 centered grid */ #main-body .dn-confdomains .dn-ns-note{text-align:center;color:var(--ink-soft);font-size:.94rem;max-width:720px;margin:14px auto 20px} #main-body .dn-confdomains .dn-ns-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;max-width:720px;margin:0 auto} #main-body .dn-confdomains .dn-ns-field label{font-family:var(--f-nav);font-size:.82rem;font-weight:600;color:var(--blue-ink);display:block;margin-bottom:7px} #main-body .dn-confdomains .dn-ns-field .form-control{width:100%;border:1.5px solid var(--line) !important;border-radius:var(--r-md) !important;padding:12px 15px !important;height:auto !important;font-size:.98rem;background:#fff !important;color:var(--ink)} #main-body .dn-confdomains .dn-ns-field .form-control:focus{border-color:var(--blue) !important;box-shadow:0 0 0 4px rgba(14,165,233,.14) !important} @media(max-width:680px){ #main-body .dn-confdomains .dn-ns-grid{grid-template-columns:1fr} } /* ═══════════ /configuredomains ═══════════ */ /* ═══════════ CLIENT AREA HOME — Account Health (clientareahome) ═══════════ */ /* Top strip */ .dn-clienthome .dn-hh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px} .dn-clienthome .dn-hh-head h1{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.01em} .dn-clienthome .dn-hh-head p{margin:4px 0 0;color:var(--ink-soft);font-size:.9rem} /* Manage My Account dropdown (on light background) — mechanics + JS preserved */ .dn-clienthome .dn-dd{position:relative} .dn-clienthome .dn-mbtn{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--r-md);font-family:var(--f-nav);font-weight:700;font-size:.88rem;cursor:pointer;transition:transform var(--t-fast),border-color var(--t-fast),background var(--t-fast),color var(--t-fast);white-space:nowrap;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);line-height:1} .dn-clienthome .dn-mbtn.ghost:hover{border-color:var(--blue);color:var(--blue-d);transform:translateY(-1px)} .dn-clienthome .dn-mbtn .chev{font-size:.66rem;transition:transform .2s;opacity:.6;margin-left:1px} .dn-clienthome .dn-dd.open .dn-mbtn .chev{transform:rotate(180deg)} .dn-clienthome .dn-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:262px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:8px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility .18s} .dn-clienthome .dn-dd.open .dn-menu{opacity:1;visibility:visible;transform:translateY(0)} .dn-clienthome .dn-menu::before{content:"";position:absolute;top:-6px;right:24px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)} .dn-clienthome .dn-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-family:var(--f-nav);font-weight:600;font-size:.9rem;transition:background .14s,color .14s} .dn-clienthome .dn-menu a:hover{background:var(--blue-wash);color:var(--blue-d);text-decoration:none} .dn-clienthome .dn-menu a .mi{width:34px;height:34px;border-radius:9px;background:var(--blue-wash);color:var(--blue-d);display:flex;align-items:center;justify-content:center;flex:none;font-size:.85rem;transition:background .14s} .dn-clienthome .dn-menu a:hover .mi{background:#fff} /* Health hero */ .dn-clienthome .dn-hero{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:24px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-bottom:18px} .dn-clienthome .dn-ring{--p:100;width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--line-2) 0);display:flex;align-items:center;justify-content:center;flex:none} .dn-clienthome .dn-ring.soon{background:conic-gradient(var(--amber) calc(var(--p)*1%),var(--line-2) 0)} .dn-clienthome .dn-ring.due{background:conic-gradient(var(--red) calc(var(--p)*1%),var(--line-2) 0)} .dn-clienthome .dn-ring-in{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center} .dn-clienthome .dn-ring-in b{font-family:var(--f-display);font-weight:800;font-size:1.6rem;line-height:1;color:var(--green-d)} .dn-clienthome .dn-ring.soon .dn-ring-in b{color:var(--amber-d)} .dn-clienthome .dn-ring.due .dn-ring-in b{color:var(--red-d)} .dn-clienthome .dn-ring-in s{font-size:.66rem;color:var(--ink-soft);text-decoration:none;font-family:var(--f-nav);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px} .dn-clienthome .dn-hero-txt h2{font-family:var(--f-display);font-weight:800;font-size:1.32rem;color:var(--ink);margin:0;line-height:1.2} .dn-clienthome .dn-hero-txt .lead{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:6px 0 14px} .dn-clienthome .dn-pills{display:flex;gap:9px;flex-wrap:wrap} .dn-clienthome .dn-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);font-family:var(--f-nav);font-weight:700;font-size:.78rem} .dn-clienthome .dn-pill.due{background:var(--red-wash);color:var(--red-d)} .dn-clienthome .dn-pill.soon{background:var(--amber-wash);color:var(--amber-d)} .dn-clienthome .dn-pill.ok{background:var(--green-wash);color:var(--green-d)} .dn-clienthome .dn-palert{display:inline-flex;align-items:stretch;border-radius:var(--r-pill);overflow:hidden;font-family:var(--f-nav);font-weight:700;font-size:.78rem;line-height:1} .dn-clienthome .dn-palert.due{background:var(--red-wash)} .dn-clienthome .dn-palert.soon{background:var(--amber-wash)} .dn-clienthome .dn-pa-t{display:inline-flex;align-items:center;gap:7px;padding:8px 13px} .dn-clienthome .dn-palert.due .dn-pa-t{color:var(--red-d)} .dn-clienthome .dn-palert.soon .dn-pa-t{color:var(--amber-d)} .dn-clienthome .dn-pa-b{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;color:#fff;text-decoration:none;transition:background var(--t-fast)} .dn-clienthome .dn-palert.due .dn-pa-b{background:var(--red-d)} .dn-clienthome .dn-palert.due .dn-pa-b:hover{background:#b91c1c;color:#fff;text-decoration:none} .dn-clienthome .dn-palert.soon .dn-pa-b{background:var(--orange-d)} .dn-clienthome .dn-palert.soon .dn-pa-b:hover{background:#c2410c;color:#fff;text-decoration:none} #main-body .dn-clienthome .dn-pa-b,#main-body .dn-clienthome .dn-pa-b:hover,#main-body .dn-clienthome .dn-pa-b:focus,#main-body .dn-clienthome .dn-pa-b i{color:#fff !important;text-decoration:none !important} @media(max-width:520px){ .dn-clienthome .dn-pills{flex-direction:column;align-items:stretch} .dn-clienthome .dn-pills>*{width:100%} .dn-clienthome .dn-palert{display:flex} .dn-clienthome .dn-pa-t{flex:1} } /* 4-stat counter */ .dn-clienthome .dn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px} .dn-clienthome .dn-stat{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-sm);text-decoration:none;transition:transform var(--t-fast),box-shadow var(--t-fast)} .dn-clienthome .dn-stat:hover{transform:translateY(-3px);box-shadow:var(--sh-md);text-decoration:none} .dn-clienthome .dn-stat .si{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.02rem;flex:none} .dn-clienthome .dn-stat .num{display:block;font-family:var(--f-display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--ink)} .dn-clienthome .dn-stat .lbl{display:block;font-family:var(--f-nav);font-weight:600;font-size:.74rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-top:3px} .dn-clienthome .dn-stat.b .si{background:var(--blue-wash);color:var(--blue-d)} .dn-clienthome .dn-stat.g .si{background:var(--green-wash);color:var(--green-d)} .dn-clienthome .dn-stat.pu .si{background:var(--purple-wash);color:var(--purple-d)} .dn-clienthome .dn-stat.o .si{background:var(--amber-wash);color:var(--amber-d)} /* ikon rozetleri */ .dn-clienthome .iw{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.02rem;flex:none} .dn-clienthome .iw-blue{background:var(--blue-wash);color:var(--blue-d)} .dn-clienthome .iw-green{background:var(--green-wash);color:var(--green-d)} .dn-clienthome .iw-amber{background:var(--amber-wash);color:var(--amber-d)} .dn-clienthome .iw-red{background:var(--red-wash);color:var(--red-d)} .dn-clienthome .iw-purple{background:var(--purple-wash);color:var(--purple-d)} /* kart ortak */ .dn-clienthome .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:18px} .dn-clienthome .dn-c-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)} .dn-clienthome .dn-c-h h3{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink);margin:0;display:flex;align-items:center;gap:8px} .dn-clienthome .dn-c-h h3 i{color:var(--blue-d)} .dn-clienthome .dn-c-lnk{color:var(--blue-d);font-family:var(--f-nav);font-weight:700;font-size:.82rem;text-decoration:none;display:inline-flex;gap:6px;align-items:center} .dn-clienthome .dn-c-lnk:hover{color:var(--blue-ink)} /* badge */ .dn-clienthome .dn-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pill);font-family:var(--f-nav);font-size:.7rem;font-weight:700;letter-spacing:.02em} .dn-clienthome .dn-badge.ok{background:var(--green-wash);color:var(--green-d)} .dn-clienthome .dn-badge.due{background:var(--red-wash);color:var(--red-d)} /* mini buton */ .dn-clienthome .dn-b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border-radius:var(--r-md);border:1.5px solid transparent;font-family:var(--f-nav);font-weight:700;font-size:.82rem;text-decoration:none;transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast),color var(--t-fast);white-space:nowrap} .dn-clienthome .dn-b:hover{transform:translateY(-1px);text-decoration:none} .dn-clienthome .dn-b.danger{background:var(--red);color:#fff} .dn-clienthome .dn-b.danger:hover{background:var(--red-d);color:#fff} .dn-clienthome .dn-b.primary{background:var(--blue-d);color:#fff} .dn-clienthome .dn-b.primary:hover{background:var(--blue-ink);color:#fff} .dn-clienthome .dn-b.ghost{background:#fff;color:var(--ink-2);border-color:var(--line)} .dn-clienthome .dn-b.ghost:hover{border-color:var(--blue);color:var(--blue-d)} /* g2: todo + quick */ .dn-clienthome .dn-g2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .dn-clienthome .dn-todo-item{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line-2)} .dn-clienthome .dn-todo-item:last-child{border-bottom:0} .dn-clienthome .dn-todo-item.ok{opacity:.9} .dn-clienthome .dn-todo-item .bd{flex:1;min-width:0} .dn-clienthome .dn-todo-item .tt{font-family:var(--f-nav);font-weight:700;font-size:.9rem;color:var(--ink)} .dn-clienthome .dn-todo-item .td{color:var(--ink-soft);font-size:.8rem;margin-top:2px} .dn-clienthome .dn-chk{width:28px;height:28px;border-radius:50%;border:2px solid var(--green);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-size:.72rem;flex:none} .dn-clienthome .dn-qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px} .dn-clienthome .dn-qa{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:13px;text-decoration:none;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)} .dn-clienthome .dn-qa:hover{border-color:var(--blue);background:var(--blue-wash);transform:translateY(-2px);text-decoration:none} .dn-clienthome .dn-qa .qi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:.92rem} .dn-clienthome .dn-qa .qi.g{background:var(--green-wash);color:var(--green-d)} .dn-clienthome .dn-qa .qi.pu{background:var(--purple-wash);color:var(--purple-d)} .dn-clienthome .dn-qa .qi.o{background:var(--amber-wash);color:var(--amber-d)} .dn-clienthome .dn-qa .qi.b{background:var(--blue-wash);color:var(--blue-d)} .dn-clienthome .dn-qa .qtx{display:flex;flex-direction:column;min-width:0} .dn-clienthome .dn-qa .qt{font-family:var(--f-nav);font-weight:700;font-size:.84rem;color:var(--ink-2);line-height:1.2} .dn-clienthome .dn-qa .qd{font-size:.72rem;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* hizmet listesi */ .dn-clienthome .dn-svc-body{padding:0} .dn-clienthome .dn-svc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line-2)} .dn-clienthome .dn-svc:last-of-type{border-bottom:0} .dn-clienthome .dn-svc.susp{background:linear-gradient(90deg,rgba(239,68,68,.09),transparent 55%)} .dn-clienthome .dn-svc-l{display:flex;align-items:center;gap:12px;min-width:0} .dn-clienthome .dn-svc-t{min-width:0} .dn-clienthome .dn-svc-nm{font-family:var(--f-nav);font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dn-clienthome .dn-svc-dm{color:var(--ink-soft);font-size:.8rem;font-family:var(--f-mono);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dn-clienthome .dn-svc-r{display:flex;align-items:center;gap:10px} .dn-clienthome .dn-svc-all{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;color:var(--blue-d);font-family:var(--f-nav);font-weight:700;font-size:.84rem;text-decoration:none;border-top:1px solid var(--line-2)} .dn-clienthome .dn-svc-all:hover{color:var(--blue-ink);background:var(--bg-soft);text-decoration:none} .dn-clienthome .dn-svc-empty{color:var(--ink-soft);font-size:.9rem;padding:18px 20px;margin:0} .dn-clienthome .dn-addon{margin-bottom:18px} /* mobile sticky payment bar */ .dn-mpay{display:none} /* responsive */ @media(max-width:860px){ .dn-clienthome .dn-hero{grid-template-columns:1fr;text-align:center;justify-items:center} .dn-clienthome .dn-pills{justify-content:center} .dn-clienthome .dn-g2{grid-template-columns:1fr} .dn-clienthome .dn-stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ .dn-clienthome .dn-hh-head{flex-direction:column} .dn-clienthome .dn-menu{right:auto;left:0} .dn-clienthome .dn-menu::before{right:auto;left:24px} .dn-mpay{display:flex;position:sticky;bottom:12px;z-index:40;margin:16px 0 0;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(120deg,#0b1220,var(--blue-d));color:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px rgba(11,18,32,.30);text-decoration:none} .dn-mpay .dn-mpay-tx b{display:block;font-family:var(--f-nav);font-weight:800;font-size:.9rem;color:#fff} .dn-mpay .dn-mpay-tx s{display:block;font-size:.72rem;opacity:.82;margin-top:2px;text-decoration:none;color:#fff} .dn-mpay .dn-mpay-btn{background:#fff;color:var(--blue-d);font-family:var(--f-nav);font-weight:700;font-size:.84rem;padding:9px 14px;border-radius:var(--r-md);white-space:nowrap;flex:none} } @media(max-width:560px){ .dn-clienthome .dn-qa-grid{grid-template-columns:1fr} .dn-clienthome .dn-svc{grid-template-columns:1fr;gap:11px} .dn-clienthome .dn-svc-r{padding-left:56px} .dn-clienthome .dn-svc-r .dn-b{flex:1} } @media(max-width:380px){ .dn-clienthome .dn-stats{grid-template-columns:1fr} .dn-clienthome .dn-hero{padding:20px} } /* ═══════════ /clientareahome ═══════════ */ /* ═══════════ STANDARD PANEL MENU (inner pages) ═══════════ */ #main-body .dn-pnav{background:#fff;border-bottom:1px solid var(--line);margin:0 0 4px;box-shadow:var(--sh-sm)} #main-body .dn-pnav-inner{display:flex;align-items:stretch;gap:4px;flex-wrap:nowrap} #main-body .dn-pn{position:relative} #main-body .dn-pn>a{display:flex;align-items:center;gap:10px;padding:14px 16px;font-family:var(--f-nav);font-weight:700;font-size:.86rem;color:var(--ink-2);border-bottom:3px solid transparent;transition:color var(--t-fast);white-space:nowrap;text-decoration:none} #main-body .dn-pn>a:hover,#main-body .dn-pn:hover>a{color:var(--blue-d);text-decoration:none} #main-body .dn-pn.active>a{color:var(--blue-d);border-bottom-color:var(--blue)} #main-body .dn-pn>a .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;font-size:.8rem} #main-body .dn-pn>a .cv{font-size:.62rem;opacity:.5;transition:transform var(--t-fast)} #main-body .dn-pn:hover>a .cv{transform:rotate(180deg)} #main-body .dn-pnav .ic-blue{background:var(--blue-wash);color:var(--blue-d)} #main-body .dn-pnav .ic-green{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-pnav .ic-orange{background:var(--orange-wash);color:var(--orange-d)} #main-body .dn-pnav .ic-purple{background:var(--purple-wash);color:var(--purple)} #main-body .dn-pnav .ic-slate{background:#eef2f7;color:var(--ink-2)} #main-body .dn-pd{position:absolute;top:100%;left:8px;min-width:238px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg,0 20px 55px rgba(11,18,32,.14));padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);z-index:120} #main-body .dn-pn:hover .dn-pd{opacity:1;visibility:visible;transform:translateY(0)} #main-body .dn-pd a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm,8px);font-family:var(--f-nav);font-weight:600;font-size:.86rem;color:var(--ink);text-decoration:none;transition:background .13s,color .13s} #main-body .dn-pd a:hover{background:var(--blue-wash);color:var(--blue-d);text-decoration:none} #main-body .dn-pd a i{width:26px;height:26px;border-radius:7px;background:var(--bg-soft);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:.7rem;flex:none} #main-body .dn-pd a:hover i{background:#fff;color:var(--blue-d)} #main-body .dn-pd .sep{height:1px;background:var(--line-2);margin:6px 8px} #main-body .dn-pd a.danger{color:var(--red)} #main-body .dn-pd a.danger:hover{background:var(--red-wash,#fee2e2);color:var(--red)} /* Panel menu — tablet/mobile: compact, touch horizontal scrollable strip + accordion submenu */ @media(max-width:1000px){ #main-body .dn-pnav{position:relative} #main-body .dn-pnav-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:2px} #main-body .dn-pnav-inner::-webkit-scrollbar{display:none} #main-body .dn-pd{display:none} #main-body .dn-pn>a{padding:12px 13px;font-size:.82rem;gap:8px} #main-body .dn-pn>a .ic{width:28px;height:28px;font-size:.72rem} #main-body .dn-pn>a .cv{font-size:.6rem;transition:transform var(--t-fast)} #main-body .dn-pn.open>a{color:var(--blue-d)} #main-body .dn-pn.open>a .cv{transform:rotate(180deg)} #main-body .dn-pnav::after{content:"";position:absolute;top:0;height:54px;right:0;width:26px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);z-index:5} #main-body .dn-pnav-mob{display:none;border-top:1px solid var(--line-2);background:#fff;padding:8px;position:relative;z-index:6} #main-body .dn-pnav.mob-open .dn-pnav-mob{display:block;animation:dnPnavMobIn .18s ease} #main-body .dn-pnav-mob a{display:flex;align-items:center;gap:11px;padding:12px;border-radius:var(--r-sm);font-family:var(--f-nav);font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none} #main-body .dn-pnav-mob a:active,#main-body .dn-pnav-mob a:hover{background:var(--blue-wash);color:var(--blue-d);text-decoration:none} #main-body .dn-pnav-mob a i{width:28px;height:28px;border-radius:8px;background:var(--bg-soft);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:.72rem;flex:none} #main-body .dn-pnav-mob a.danger{color:var(--red)} #main-body .dn-pnav-mob a.danger:active{background:var(--red-wash,#fee2e2)} #main-body .dn-pnav-mob .sep{height:1px;background:var(--line-2);margin:6px 8px} } @keyframes dnPnavMobIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(max-width:480px){ #main-body .dn-pn>a{padding:11px 10px;font-size:.79rem;gap:7px} #main-body .dn-pn>a .ic{width:26px;height:26px;font-size:.68rem} #main-body .dn-pnav::after{height:50px} } /* ═══════════ MY SUPPORT TICKETS (supportticketslist) ═══════════ */ #main-body .dn-tickets{padding-top:20px} #main-body .dn-ticket-head{display:flex;justify-content:flex-end;margin:0 0 20px} #main-body .dn-newticket{background:var(--blue) !important;border:none !important;color:#fff !important;font-family:var(--f-nav);font-weight:700;border-radius:var(--r-md) !important;padding:11px 22px !important} #main-body .dn-newticket:hover{background:var(--blue-d) !important} #main-body .dn-tickets .table-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);width:100%} #main-body .dn-tickets .table-list thead th{font-family:var(--f-nav);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--bg-soft);border-bottom:2px solid var(--line-2) !important;padding:14px 18px} #main-body .dn-tickets .table-list tbody td{padding:15px 18px;border-top:1px solid var(--line-2);font-size:.9rem;vertical-align:middle;color:var(--ink-2)} #main-body .dn-tickets .table-list thead th,#main-body .dn-tickets .table-list tbody td{text-align:left} #main-body .dn-tickets .table-list thead th:nth-child(3),#main-body .dn-tickets .table-list tbody td:nth-child(3),#main-body .dn-tickets .table-list thead th:nth-child(4),#main-body .dn-tickets .table-list tbody td:nth-child(4){text-align:center} #main-body .dn-tickets .table-list tbody tr{cursor:pointer;transition:background var(--t-fast)} #main-body .dn-tickets .table-list tbody tr:hover{background:var(--bg-soft)} #main-body .dn-tickets .ticket-number{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-soft);margin-right:6px} #main-body .dn-tickets .ticket-subject{font-family:var(--f-nav);font-weight:600;color:var(--ink)} #main-body .dn-tickets .ticket-subject.unread{font-weight:800} #main-body .dn-tickets a.border-left{border-left:none !important;text-decoration:none} #main-body .dn-tickets a.border-left:hover .ticket-subject{color:var(--blue-d)} /* durum etiketleri */ #main-body .dn-tickets .label.status{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:100px;background:#f1f5f9;color:var(--ink-soft)} #main-body .dn-tickets .label.status.status-Open,#main-body .dn-tickets .label.status.status-Answered{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-tickets .label.status.status-Customer-Reply,#main-body .dn-tickets .label.status.status-On-Hold{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-tickets .label.status.status-In-Progress{background:var(--blue-wash);color:var(--blue-d)} #main-body .dn-tickets .label.status.status-Closed{background:#f1f5f9;color:var(--ink-soft)} /* DataTable wrapper (arama / uzunluk / sayfalama) */ #main-body .dn-tickets .dataTables_filter{margin-bottom:14px} #main-body .dn-tickets .dataTables_filter label{margin-bottom:0} #main-body .dn-tickets .dataTables_filter label .form-control{border:1px solid var(--line) !important;border-radius:var(--r-md) !important;padding:10px 14px 10px 40px !important;height:auto !important;font-size:.9rem;margin-bottom:0 !important} #main-body .dn-tickets .dataTables_filter::after{top:50% !important;transform:translateY(-50%) !important;left:16px !important} #main-body .dn-tickets .dataTables_length label{display:inline-flex;align-items:center;gap:8px} #main-body .dn-tickets .dataTables_length select{border:1px solid var(--line);border-radius:var(--r-md);padding:7px 10px;height:auto;vertical-align:middle} #main-body .dn-tickets .dataTables_wrapper .dataTables_length{margin-bottom:14px} #main-body .dn-tickets .dataTables_wrapper .dataTables_paginate{margin-top:16px} #main-body .dn-tickets .dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--r-sm,8px) !important;font-family:var(--f-nav);font-weight:700} #main-body .dn-tickets .dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important} #main-body .dn-tickets .dataTables_wrapper .dataTables_info{color:var(--ink-soft);font-size:.86rem;padding-top:14px} /* ═══════════ /panel + tickets ═══════════ */ /* ── My Tickets: status counter cards ── */ #main-body .dn-st-tickets{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 22px} #main-body .dn-st-tickets .st{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);text-align:left;display:block;width:100%;font-family:var(--f-body)} #main-body .dn-st-tickets .st:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} #main-body .dn-st-tickets .st .num{display:block;font-family:var(--f-display);font-weight:800;font-size:2rem;line-height:1} #main-body .dn-st-tickets .st .lbl{display:block;font-family:var(--f-nav);font-weight:600;font-size:.82rem;color:var(--ink-soft);margin-top:3px} #main-body .dn-st-tickets .st .si{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:.9rem} #main-body .dn-st-tickets .st.g .si{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-st-tickets .st.g .num{color:var(--green-d,#15803d)} #main-body .dn-st-tickets .st.b .si{background:var(--blue-wash);color:var(--blue-d)} #main-body .dn-st-tickets .st.b .num{color:var(--blue-d)} #main-body .dn-st-tickets .st.a .si{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-st-tickets .st.a .num{color:#b45309} #main-body .dn-st-tickets .st.s .si{background:#eef2f7;color:var(--ink-soft)} #main-body .dn-st-tickets .st.s .num{color:var(--ink-2)} #main-body .dn-st-tickets .st.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.14)} @media(max-width:820px){#main-body .dn-st-tickets{grid-template-columns:1fr 1fr}} /* ── /status counter cards ── */ /* ══════════ viewticket.php — View Ticket (hybrid) ══════════ */ #main-body .dn-viewticket{max-width:1000px;margin:0 auto} /* heading band */ #main-body .dn-vt-banner{background:linear-gradient(120deg,var(--blue-ink,#075985),var(--blue-d) 55%,var(--blue));border-radius:var(--r-lg);padding:24px 26px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px;position:relative;overflow:hidden} #main-body .dn-vt-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:190px;height:190px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);border-radius:50%} #main-body .dn-vt-bhead .no{font-family:var(--f-mono);font-size:.82rem;opacity:.85} #main-body .dn-vt-bhead h1{font-family:var(--f-display);font-weight:800;font-size:1.5rem;margin-top:4px;color:#fff;line-height:1.2} #main-body .dn-vt-bactions{display:flex;gap:10px;align-items:center;position:relative;z-index:1;flex-wrap:wrap} #main-body .dn-vt-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-nav);font-weight:600;font-size:.74rem;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;text-transform:uppercase;letter-spacing:.03em} #main-body .dn-vt-status .fa-circle{font-size:.5rem;color:var(--green)} #main-body .dn-viewticket .btn.dn-btn-green{background:var(--green);color:#fff;border:1.5px solid transparent;font-family:var(--f-nav);font-weight:600;border-radius:var(--r-md);padding:9px 16px} #main-body .dn-viewticket .btn.dn-btn-green:hover{background:var(--green-d,#15803d)} #main-body .dn-viewticket .btn.dn-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.25);font-family:var(--f-nav);font-weight:600;border-radius:var(--r-md);padding:9px 16px} #main-body .dn-viewticket .btn.dn-btn-ghost:hover{background:rgba(255,255,255,.26)} #main-body .dn-viewticket .btn.dn-btn-ghost[disabled]{opacity:.7;cursor:default} /* mini kartlar */ #main-body .dn-vt-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px} #main-body .dn-vt-mini .mc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-sm)} #main-body .dn-vt-mini .mc .k{font-size:.7rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-family:var(--f-nav);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:6px} #main-body .dn-vt-mini .mc .k i{color:var(--blue-d)} #main-body .dn-vt-mini .mc .v{font-size:.92rem;color:var(--ink);font-weight:600} /* chat bubbles */ #main-body .dn-vt-threadbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-soft);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:8px} #main-body .dn-vt-tbhead{display:flex;align-items:center;gap:9px;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line);font-family:var(--f-nav);font-weight:700;font-size:.92rem;color:var(--ink)} #main-body .dn-vt-tbhead i{color:var(--blue-d)} #main-body .dn-vt-tbhead .cnt{margin-left:auto;font-family:var(--f-body);font-weight:500;font-size:.8rem;color:var(--ink-soft)} #main-body .dn-vt-thread{display:flex;flex-direction:column;gap:20px;padding:22px 20px} #main-body .dn-vt-msg{display:flex;gap:13px;max-width:82%} #main-body .dn-vt-msg.owner{align-self:flex-end;flex-direction:row-reverse} #main-body .dn-vt-av{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem} #main-body .dn-vt-msg.op .dn-vt-av{background:linear-gradient(135deg,var(--blue),var(--blue-d))} #main-body .dn-vt-msg.owner .dn-vt-av{background:linear-gradient(135deg,var(--green),var(--green-d,#15803d))} #main-body .dn-vt-bub{background:#fff;border:1px solid var(--line);border-radius:16px;border-top-left-radius:4px;padding:14px 17px;box-shadow:var(--sh-sm);min-width:0} #main-body .dn-vt-msg.owner .dn-vt-bub{background:var(--blue-wash);border-color:#cbeafb;border-top-left-radius:16px;border-top-right-radius:4px} #main-body .dn-vt-meta{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap} #main-body .dn-vt-meta .nm{font-family:var(--f-nav);font-weight:700;font-size:.88rem;color:var(--ink)} #main-body .dn-vt-meta .tm{font-size:.76rem;color:var(--ink-soft)} #main-body .dn-vt-role{font-family:var(--f-nav);font-weight:600;font-size:.66rem;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;background:#f1f5f9;color:var(--ink-soft)} #main-body .dn-vt-msg.op .dn-vt-role{background:var(--blue);color:#fff} #main-body .dn-vt-msg.owner .dn-vt-role{background:var(--green);color:#fff} #main-body .dn-vt-message{font-size:.9rem;color:var(--ink-2);word-wrap:break-word;overflow-wrap:break-word} #main-body .dn-vt-message p{margin:0 0 8px} #main-body .dn-vt-message p:last-child{margin-bottom:0} #main-body .dn-vt-message a{color:var(--blue-d);text-decoration:none} #main-body .dn-vt-message a:hover{text-decoration:underline} #main-body .dn-vt-message hr{border:0;border-top:1px solid var(--line-2);margin:12px 0} #main-body .dn-vt-ip{font-size:.8rem;color:var(--ink-soft)} #main-body .dn-vt-rating{margin-top:12px} #main-body .dn-vt-attach{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);font-size:.85rem} #main-body .dn-vt-attach strong{font-family:var(--f-nav);font-weight:600;color:var(--ink-2)} #main-body .dn-vt-attach .attachment-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} #main-body .dn-vt-attach .attachment-list a{color:var(--blue-d);text-decoration:none;display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 11px} #main-body .dn-vt-attach .attachment-list a:hover{border-color:var(--blue)} #main-body .dn-vt-attach figure{margin:0;display:inline} /* reply form */ #main-body .dn-vt-reply{margin-top:26px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px} #main-body .dn-vt-reply h3{font-family:var(--f-display);font-weight:700;font-size:1.1rem;margin-bottom:16px;color:var(--ink)} #main-body .dn-vt-reply h3 i{color:var(--blue-d);margin-right:8px} #main-body .dn-vt-reply label{font-family:var(--f-nav);font-weight:600;font-size:.8rem;color:var(--ink-soft);margin-bottom:6px} #main-body .dn-vt-reply .form-control{border:1px solid var(--line);border-radius:var(--r-md);font-family:var(--f-body);font-size:.9rem} #main-body .dn-vt-reply .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.12)} #main-body .dn-vt-rfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;margin-bottom:0} #main-body .dn-vt-rfoot .btn{border-radius:var(--r-md);font-family:var(--f-nav);font-weight:600;padding:9px 20px} @media(max-width:820px){ #main-body .dn-vt-mini{grid-template-columns:1fr 1fr} #main-body .dn-vt-msg{max-width:100%} } /* ══════════ /viewticket ══════════ */ /* ══════════ My Invoices (clientareainvoices) ══════════ */ /* status counter cards */ #main-body .dn-st-invoices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 22px} #main-body .dn-st-invoices .st{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);text-align:left;display:block;width:100%;font-family:var(--f-body)} #main-body .dn-st-invoices .st:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} #main-body .dn-st-invoices .st .num{display:block;font-family:var(--f-display);font-weight:800;font-size:2rem;line-height:1} #main-body .dn-st-invoices .st .lbl{display:block;font-family:var(--f-nav);font-weight:600;font-size:.82rem;color:var(--ink-soft);margin-top:3px} #main-body .dn-st-invoices .st .si{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:.9rem} #main-body .dn-st-invoices .st.g .si{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-st-invoices .st.g .num{color:var(--green-d,#15803d)} #main-body .dn-st-invoices .st.r .si{background:var(--red-wash,#fee2e2);color:#b91c1c} #main-body .dn-st-invoices .st.r .num{color:#b91c1c} #main-body .dn-st-invoices .st.s .si{background:#eef2f7;color:var(--ink-soft)} #main-body .dn-st-invoices .st.s .num{color:var(--ink-2)} #main-body .dn-st-invoices .st.a .si{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-st-invoices .st.a .num{color:#b45309} #main-body .dn-st-invoices .st.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.14)} /* tablo restyle */ #main-body .dn-invoices .table-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);width:100%} #main-body .dn-invoices .table-list thead th{font-family:var(--f-nav);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--bg-soft);border-bottom:2px solid var(--line-2) !important;padding:14px 18px} #main-body .dn-invoices .table-list tbody td{padding:15px 18px;border-top:1px solid var(--line-2);font-size:.9rem;vertical-align:middle;color:var(--ink-2)} #main-body .dn-invoices .table-list tbody tr{cursor:pointer;transition:background var(--t-fast)} #main-body .dn-invoices .table-list tbody tr:hover{background:var(--bg-soft)} /* invoice alignment: Invoice No + dates left, Total right (4), Status center (5) */ #main-body .dn-invoices .table-list thead th,#main-body .dn-invoices .table-list tbody td{text-align:left} #main-body .dn-invoices .table-list thead th:nth-child(4),#main-body .dn-invoices .table-list tbody td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)} #main-body .dn-invoices .table-list thead th:nth-child(5),#main-body .dn-invoices .table-list tbody td:nth-child(5){text-align:center} #main-body .dn-invoices .table-list tbody td:first-child{font-family:var(--f-mono);font-weight:600;color:var(--ink)} /* durum rozetleri */ #main-body .dn-invoices .label.status{display:inline-flex;align-items:center;font-family:var(--f-nav);font-weight:600;font-size:.72rem;padding:5px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;background:#f1f5f9;color:var(--ink-soft)} #main-body .dn-invoices .label.status.dn-badge-paid{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-invoices .label.status.dn-badge-refund{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-invoices .label.status.dn-badge-cancel{background:#f1f5f9;color:var(--ink-soft)} #main-body .dn-invoices .label.status.dn-badge-unpaid{background:var(--red);color:#fff} #main-body .dn-invoices .label.status.dn-badge-unpaid::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:7px;vertical-align:middle;animation:dnPulse 1.3s infinite} @keyframes dnPulse{0%,100%{opacity:1}50%{opacity:.25}} /* unpaid row highlight (reminder) */ #main-body .dn-invoices .table-list tbody tr.dn-inv-unpaid{background:#fff5f5} #main-body .dn-invoices .table-list tbody tr.dn-inv-unpaid:hover{background:#ffecec} #main-body .dn-invoices .table-list tbody tr.dn-inv-unpaid td:first-child{box-shadow:inset 3px 0 0 var(--red)} /* DataTable controls (same fixes as ticket page) */ #main-body .dn-invoices .dataTables_filter{margin-bottom:14px} #main-body .dn-invoices .dataTables_filter label{margin-bottom:0} #main-body .dn-invoices .dataTables_filter label .form-control{border:1px solid var(--line) !important;border-radius:var(--r-md) !important;padding:10px 14px 10px 40px !important;height:auto !important;font-size:.9rem;margin-bottom:0 !important} #main-body .dn-invoices .dataTables_filter::after{top:50% !important;transform:translateY(-50%) !important;left:16px !important} #main-body .dn-invoices .dataTables_length label{display:inline-flex;align-items:center;gap:8px} #main-body .dn-invoices .dataTables_length select{border:1px solid var(--line);border-radius:var(--r-md);padding:7px 10px;height:auto;vertical-align:middle} #main-body .dn-invoices .dataTables_wrapper .dataTables_length{margin-bottom:14px} #main-body .dn-invoices .dataTables_wrapper .dataTables_paginate{margin-top:16px} #main-body .dn-invoices .dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--r-sm,8px) !important;font-family:var(--f-nav);font-weight:700} #main-body .dn-invoices .dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important} #main-body .dn-invoices .dataTables_wrapper .dataTables_info{color:var(--ink-soft);font-size:.86rem;padding-top:14px} @media(max-width:820px){#main-body .dn-st-invoices{grid-template-columns:1fr 1fr}} /* ══════════ /My Invoices ══════════ */ /* ══════════ viewinvoice — Modern Document (standalone document page) ══════════ */ body.dn-invoice-page{background:#eef3f9;font-family:var(--f-body);color:var(--ink);padding:34px 0 40px} body.dn-invoice-page .invoice-container{max-width:900px;margin:0 auto;padding:0 18px} .dn-invoice{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl,22px);box-shadow:var(--sh-md,0 6px 20px rgba(15,23,42,.08));overflow:hidden} .dn-inv-strip{height:6px} .dn-inv-strip.st-red{background:var(--red)} .dn-inv-strip.st-green{background:var(--green)} .dn-inv-strip.st-amber{background:var(--amber)} .dn-inv-strip.st-gray{background:var(--ink-soft)} .dn-inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;padding:28px 36px 0} .dn-inv-logo{max-height:46px;margin-bottom:12px} .dn-inv-co{font-family:var(--f-display);font-weight:800;font-size:1.4rem;color:var(--ink);margin-bottom:6px} .dn-inv-title{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--ink);margin-top:6px} .dn-inv-head-r{text-align:right} .dn-inv-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-nav);font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em} .dn-inv-badge.st-red{background:var(--red);color:#fff} .dn-inv-badge.st-green{background:var(--green-wash);color:var(--green-d,#15803d)} .dn-inv-badge.st-amber{background:var(--amber-wash,#fef3c7);color:#b45309} .dn-inv-badge.st-gray{background:#f1f5f9;color:var(--ink-soft)} .dn-inv-badge .dn-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:dnPulse 1.3s infinite} .dn-inv-meta{font-size:.85rem;color:var(--ink-soft);margin-top:12px;line-height:1.7} .dn-inv-meta b{color:var(--ink-2)} .dn-inv-body{padding:24px 36px 34px} .dn-inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:24px} .dn-inv-grid.dn-inv-sub{margin-top:4px} .dn-inv-block h4{font-family:var(--f-nav);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:8px} .dn-inv-block address,.dn-inv-block .v{font-size:.9rem;color:var(--ink-2);line-height:1.7;font-style:normal;margin:0} .dn-inv-block.right{text-align:right} .dn-inv-sec{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--ink);margin:0 0 6px} .dn-inv-items{margin-top:8px;border-top:1px solid var(--line-2);padding-top:20px} .dn-items{width:100%;border-collapse:separate;border-spacing:0} .dn-items thead th{font-family:var(--f-nav);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:11px 14px;border-bottom:2px solid var(--line-2);text-align:left} .dn-items thead th.r{text-align:right} .dn-items tbody td{padding:13px 14px;border-bottom:1px solid var(--line-2);font-size:.9rem;color:var(--ink-2)} .dn-items tbody td.r{text-align:right;font-variant-numeric:tabular-nums} .dn-items tfoot td{padding:9px 14px;font-size:.9rem} .dn-items tfoot td.lbl{text-align:right;font-weight:600;color:var(--ink-2)} .dn-items tfoot td.val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);width:150px} .dn-items tfoot tr.grand td{border-top:2px solid var(--line);font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:var(--ink);padding-top:13px} .dn-inv-taxnote{font-size:.82rem;color:var(--ink-soft);margin:10px 0 0} .dn-proforma{display:flex;align-items:flex-start;gap:10px;background:var(--amber-wash,#fef3c7);border:1px solid #fde68a;border-radius:var(--r-md);padding:12px 16px;font-size:.85rem;color:#92620a;line-height:1.45;margin-top:20px} .dn-proforma i{color:#d97706;margin-top:2px} .dn-proforma b{color:#78500a} .dn-paybox{background:var(--bg-soft,#f5f8fc);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px} .dn-paybox .due .k{font-size:.8rem;color:var(--ink-soft);font-family:var(--f-nav);font-weight:600;text-transform:uppercase;letter-spacing:.02em} .dn-paybox .due .v{font-family:var(--f-display);font-weight:800;font-size:1.7rem;color:var(--red);margin-top:2px} .dn-paybox .due.paid .v{color:var(--ink)} .dn-pay-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .dn-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-nav);font-weight:600;font-size:.86rem;border-radius:var(--r-md);padding:9px 16px;text-decoration:none;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer} .dn-btn.ghost:hover{border-color:var(--blue);color:var(--blue-d)} .dn-inv-paybtn .btn,.dn-inv-paybtn button,.dn-inv-paybtn input[type=submit]{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;font-family:var(--f-nav) !important;font-weight:600 !important;border-radius:var(--r-md) !important;padding:9px 18px !important} .dn-inv-paybtn .btn:hover,.dn-inv-paybtn button:hover,.dn-inv-paybtn input[type=submit]:hover{background:#dc2626 !important;border-color:#dc2626 !important} .dn-inv-ledger{margin-top:28px;border-top:1px solid var(--line-2);padding-top:20px} .dn-ledger-empty{text-align:center;color:var(--ink-soft);padding:16px !important} .dn-inv-qr{margin-top:22px;text-align:center} .dn-inv-back{margin:22px 0 0} .dn-inv-back a{color:var(--blue-d);text-decoration:none;font-family:var(--f-nav);font-weight:600;font-size:.9rem} .dn-gw-form{margin:0} .dn-inv-block.right .dn-gw-form{display:flex;justify-content:flex-end} .dn-inv-paybtn{margin-top:10px;font-size:.9rem;color:var(--ink-2)} .dn-inv-block.right .dn-inv-paybtn{display:flex;justify-content:flex-end;flex-wrap:wrap} .dn-gw-form .custom-select{border:1px solid var(--line);border-radius:var(--r-sm);font-size:.86rem;padding:6px 10px} @media(max-width:640px){.dn-inv-grid{grid-template-columns:1fr}.dn-inv-block.right{text-align:left}.dn-inv-head-r{text-align:left}} @media print{body.dn-invoice-page{background:#fff;padding:0}.dn-invoice{border:0;box-shadow:none}.dn-proforma{border:1px solid #ccc}} /* ══════════ /viewinvoice ══════════ */ /* ══════════ Product/Service + Domain list pages (Concept 2) ══════════ */ #main-body .dn-stc-row{display:grid;gap:14px;margin:0 0 22px} #main-body .dn-st-services{grid-template-columns:repeat(5,1fr)} #main-body .dn-st-domains{grid-template-columns:repeat(4,1fr)} #main-body .dn-stc{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);text-align:left;display:block;width:100%;font-family:var(--f-body)} #main-body .dn-stc:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} #main-body .dn-stc .num{display:block;font-family:var(--f-display);font-weight:800;font-size:1.75rem;line-height:1} #main-body .dn-stc .lbl{display:block;font-family:var(--f-nav);font-weight:600;font-size:.8rem;color:var(--ink-soft);margin-top:4px} #main-body .dn-stc .si{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:.88rem} #main-body .dn-stc.g .si{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-stc.g .num{color:var(--green-d,#15803d)} #main-body .dn-stc.am .si{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-stc.am .num{color:#b45309} #main-body .dn-stc.o .si{background:var(--orange-wash);color:var(--orange-d)} #main-body .dn-stc.o .num{color:var(--orange-d)} #main-body .dn-stc.rd .si{background:var(--red-wash,#fee2e2);color:#b91c1c} #main-body .dn-stc.rd .num{color:#b91c1c} #main-body .dn-stc.sl .si{background:#eef2f7;color:var(--ink-soft)} #main-body .dn-stc.sl .num{color:var(--ink-2)} #main-body .dn-stc.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.16)} #main-body .dn-stc.g.on{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.16)} #main-body .dn-listpage .table-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);width:100%} #main-body .dn-listpage .table-list thead th{font-family:var(--f-nav);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--bg-soft);border-bottom:2px solid var(--line-2) !important;padding:13px 16px} #main-body .dn-listpage .table-list tbody td{padding:14px 16px;border-top:1px solid var(--line-2);font-size:.9rem;vertical-align:middle;color:var(--ink-2)} #main-body .dn-listpage .table-list tbody tr{cursor:pointer;transition:background var(--t-fast)} #main-body .dn-listpage .table-list tbody tr:hover{background:var(--bg-soft)} #main-body .dn-listpage .table-list td strong{color:var(--ink);font-family:var(--f-nav)} #main-body .dn-listpage .table-list td a[target]{color:var(--blue-d);text-decoration:none;font-size:.85rem} #main-body .dn-listpage .label.status{display:inline-flex;align-items:center;font-family:var(--f-nav);font-weight:600;font-size:.72rem;padding:5px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;background:#f1f5f9;color:var(--ink-soft)} #main-body .dn-listpage .label.status.dn-badge-active{background:var(--green-wash);color:var(--green-d,#15803d)} #main-body .dn-listpage .label.status.dn-badge-pending{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-listpage .label.status.dn-badge-expired{background:var(--amber-wash,#fef3c7);color:#b45309} #main-body .dn-listpage .label.status.dn-badge-suspended{background:var(--orange-wash);color:var(--orange-d)} #main-body .dn-listpage .label.status.dn-badge-terminated{background:var(--red-wash,#fee2e2);color:#b91c1c} #main-body .dn-listpage .label.status.dn-badge-cancelled{background:#f1f5f9;color:var(--ink-soft)} #main-body .dn-domains .table-list small{color:var(--ink-soft);font-size:.78rem} #main-body .dn-domains .table-list small .text-success{color:var(--green) !important} #main-body .dn-domains .domids{width:16px;height:16px;accent-color:var(--blue);cursor:pointer} #main-body .dn-domains .btn-group .btn-default{background:#fff;border:1.5px solid var(--line);color:var(--ink-2);font-family:var(--f-nav);font-weight:600;font-size:.82rem;border-radius:var(--r-md) !important;margin-right:6px} #main-body .dn-domains .btn-group .btn-default:hover{border-color:var(--blue);color:var(--blue-d)} #main-body .dn-listpage .dataTables_filter{margin-bottom:14px} #main-body .dn-listpage .dataTables_filter label{margin-bottom:0} #main-body .dn-listpage .dataTables_filter label .form-control{border:1px solid var(--line) !important;border-radius:var(--r-md) !important;padding:10px 14px 10px 40px !important;height:auto !important;font-size:.9rem;margin-bottom:0 !important} #main-body .dn-listpage .dataTables_filter::after{top:50% !important;transform:translateY(-50%) !important;left:16px !important} #main-body .dn-listpage .dataTables_length label{display:inline-flex;align-items:center;gap:8px} #main-body .dn-listpage .dataTables_length select{border:1px solid var(--line);border-radius:var(--r-md);padding:7px 10px;height:auto;vertical-align:middle} #main-body .dn-listpage .dataTables_wrapper .dataTables_length{margin-bottom:14px} #main-body .dn-listpage .dataTables_wrapper .dataTables_paginate{margin-top:16px} #main-body .dn-listpage .dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--r-sm,8px) !important;font-family:var(--f-nav);font-weight:700} #main-body .dn-listpage .dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important} #main-body .dn-listpage .dataTables_wrapper .dataTables_info{color:var(--ink-soft);font-size:.86rem;padding-top:14px} @media(max-width:900px){#main-body .dn-st-services,#main-body .dn-st-domains{grid-template-columns:repeat(2,1fr)}} /* ══════════ /list pages ══════════ */ /* ══════════ Hide SSL status indicators (list + detail pages) ══════════ */ /* List icons (services + domains): hide lock icon, keep column */ #main-body .ssl-info img{display:none !important} /* Detail pages (domain detail + product detail): SSL Status / Start / Issuer / End rows */ #main-body #tabOverview .row:has(#statusDisplayLabel), #main-body #tabOverview .row:has(#ssl-startdate), #main-body #tabOverview .row:has(#ssl-issuer), #main-body #tabOverview .row:has(#ssl-expirydate){display:none !important} /* ══════════ /SSL gizleme ══════════ */ /* ═══════════ Product / Domain Detail — bento hero ═══════════ */ #main-body .dn-pd-hero{background:radial-gradient(340px circle at 90% 130%,rgba(14,165,233,.4),transparent 60%),linear-gradient(125deg,#0b1220,#13233b 42%,#0284c7);border-radius:var(--r-xl);padding:26px 30px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px;box-shadow:0 16px 40px rgba(11,18,32,.28)} #main-body .dn-pd-l{min-width:0} #main-body .dn-pd-pkg{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--f-nav);font-weight:600;font-size:.82rem;color:rgba(255,255,255,.82)} #main-body .dn-pd-sso{display:contents} #main-body .dn-pd-nm{font-family:var(--f-display);font-weight:800;font-size:1.7rem;margin:4px 0 6px;color:#fff;display:flex;align-items:center;gap:10px;line-height:1.15} #main-body .dn-pd-dom{display:inline-flex;align-items:center;gap:7px;color:#7dd3fc !important;font-size:.92rem;text-decoration:none} #main-body .dn-pd-dom:hover{color:#bae6fd !important;text-decoration:none} #main-body .dn-dd-meta{opacity:.82;font-size:.88rem;margin-top:6px} #main-body .dn-pd-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px} #main-body .dn-pd-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-nav);font-weight:700;font-size:.72rem;padding:5px 13px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;background:rgba(255,255,255,.18);color:#fff} #main-body .dn-pd-badge-active{background:var(--green);color:#fff} #main-body .dn-pd-badge-suspended,#main-body .dn-pd-badge-terminated,#main-body .dn-pd-badge-cancelled,#main-body .dn-pd-badge-expired{background:var(--red);color:#fff} #main-body .dn-pd-badge-pending{background:var(--amber);color:#fff} #main-body .dn-pd-acts{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end} #main-body .dn-pd-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-nav);font-weight:600;font-size:.84rem;border-radius:var(--r-md);padding:9px 16px;text-decoration:none;border:1.5px solid transparent;transition:all var(--t-fast,.16s)} #main-body .dn-pd-btn.white{background:rgba(255,255,255,.16);color:#fff !important;border-color:rgba(255,255,255,.3)} #main-body .dn-pd-btn.white:hover{background:rgba(255,255,255,.26);color:#fff !important;text-decoration:none} #main-body .dn-pd-btn.primary{background:var(--blue);color:#fff !important;border-color:var(--blue)} #main-body .dn-pd-btn.primary:hover{background:var(--blue-d);color:#fff !important;text-decoration:none} #main-body .product-details .product-status{display:none} /* large icon/status block at top redundant when hero present */ @media(max-width:768px){ #main-body .dn-pd-hero{flex-direction:column;align-items:flex-start} #main-body .dn-pd-r{align-items:flex-start;width:100%} #main-body .dn-pd-acts{justify-content:flex-start} } /* ── Service detail toolbar (sidebar items horizontal) ── */ #main-body .dn-svc-toolbar{display:flex !important;flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px;border:0;background:transparent;padding:0} #main-body .dn-svc-toolbar .dn-svc-group{display:contents} #main-body .dn-svc-toolbar .dn-svc-tbtn.list-group-item{position:static;display:inline-flex !important;align-items:center;gap:6px;flex:0 0 auto;width:auto !important;margin:0 !important;background:#fff;border:1.5px solid var(--line) !important;border-radius:var(--r-md) !important;padding:11px 16px;font-family:var(--f-nav);font-weight:600;font-size:.85rem;color:var(--ink-2) !important;text-decoration:none;box-shadow:var(--sh-sm);transition:all var(--t-fast,.16s)} #main-body .dn-svc-toolbar .dn-svc-tbtn.list-group-item:hover{border-color:var(--blue) !important;color:var(--blue-d) !important;background:var(--blue-wash);transform:translateY(-1px);z-index:1} #main-body .dn-svc-toolbar .dn-svc-tbtn.list-group-item.active{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important} #main-body .dn-svc-toolbar .dn-svc-tbtn.list-group-item i{color:inherit} #main-body .dn-svc-toolbar .dn-svc-tbtn.list-group-item.disabled{opacity:.5;pointer-events:none} /* ── Product detail: hide "Package Addons" (cPanel module upsell) ── */ #main-body .card:has(select[name="aid"]), #main-body .panel:has(select[name="aid"]){display:none} /* ═══════════ Product detail — module overview (cPanel/Plesk) demo bento ═══════════ */ #main-body #tabOverview .panel.card{margin-bottom:18px} #main-body #tabOverview .panel-heading.card-header{background:var(--bg-soft);border-bottom:1px solid var(--line-2);padding:15px 20px} #main-body #tabOverview .panel-heading .card-title{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink)} #main-body #tabOverview .panel-body.card-body{padding:22px} /* Usage gauge labels (cPanel + Plesk) */ #main-body .cpanel-usage-stats strong,#main-body .plesk-usage-stats strong{font-family:var(--f-nav);font-weight:600;color:var(--ink-2);font-size:.92rem;display:block;margin-bottom:8px} #main-body .cpanel-usage-stats,#main-body .plesk-usage-stats{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} #main-body .cpanel-usage-stats .limit-near,#main-body .plesk-usage-stats .limit-near{color:var(--ink-soft) !important;font-size:.8rem;margin-top:12px} /* Shortcuts tiles (cPanel + Plesk) */ #main-body .cpanel-feature-row,#main-body .plesk-feature-row{margin:0 -6px} #main-body .cpanel-feature-row > [class*="col-"],#main-body .plesk-feature-row > [class*="col-"]{padding:6px;margin-bottom:0} #main-body .cpanel-feature-row a.d-block,#main-body .plesk-feature-row a.d-block{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 8px;margin:0 !important;border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink) !important;text-decoration:none;transition:all var(--t-fast,.16s);height:100%;font-family:var(--f-nav);font-weight:600;font-size:.82rem;text-align:center;background:#fff} #main-body .cpanel-feature-row a.d-block:hover,#main-body .plesk-feature-row a.d-block:hover{border-color:var(--blue);background:var(--blue-wash);transform:translateY(-2px);box-shadow:var(--sh-sm)} #main-body .cpanel-feature-row a.d-block img,#main-body .plesk-feature-row a.d-block img{width:38px;height:38px;object-fit:contain} /* Quick Email (cPanel) */ #main-body #cPanelQuickEmailPanel .form-control{border-radius:var(--r-sm);border:1.5px solid var(--line);font-size:.9rem} #main-body #cPanelQuickEmailPanel .input-group-text{background:var(--bg-soft);border:1.5px solid var(--line);border-left:0;color:var(--ink-soft)} #main-body #cPanelQuickEmailPanel .btn-primary{background:var(--blue) !important;border-color:var(--blue) !important;border-radius:var(--r-sm);font-family:var(--f-nav);font-weight:600} /* Billing clean rows (panel with firstPaymentAmount — cPanel + Plesk) */ #main-body #tabOverview .panel:has([id="firstPaymentAmount"]) .card-body > .row > [class*="col-md"] > .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);margin:0} #main-body #tabOverview .panel:has([id="firstPaymentAmount"]) .card-body > .row > [class*="col-md"] > .row > [class*="col-"]{padding:0;flex:0 1 auto;max-width:none;width:auto} #main-body #tabOverview .panel:has([id="firstPaymentAmount"]) .card-body > .row > [class*="col-md"] > .row > .text-right{color:var(--ink-soft);text-align:left !important;font-weight:400;font-size:.89rem} #main-body #tabOverview .panel:has([id="firstPaymentAmount"]) .card-body > .row > [class*="col-md"] > .row > [class*="col-"]:not(.text-right){color:var(--ink);font-weight:600;text-align:right;font-size:.89rem} /* Demo layout: hide Package + Usage/Billing side by side (module overview) */ #main-body #tabOverview.active:has(.usage-dial){display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch} #main-body #tabOverview:has(.usage-dial) > link,#main-body #tabOverview:has(.usage-dial) > script{display:none} #main-body #tabOverview.active:has(.usage-dial) > .row{display:contents} #main-body #tabOverview:has(.usage-dial) > .row > [class*="col-"]:has(.cpanel-package-details), #main-body #tabOverview:has(.usage-dial) > .row > [class*="col-"]:has(.plesk-package-details){display:none} #main-body #tabOverview:has(.usage-dial) > .row > [class*="col-"]:has(.usage-dial){grid-column:1;grid-row:1;max-width:none;flex:none;padding:0} #main-body #tabOverview:has(.usage-dial) > .row > [class*="col-"]:has(.usage-dial) > .panel{height:100%} #main-body #tabOverview:has(.usage-dial) > .panel:has([id="firstPaymentAmount"]), #main-body #tabOverview:has(.usage-dial) > .dn-billing-panel{grid-column:2;grid-row:1} #main-body #tabOverview:has(.usage-dial) > .panel:has(.cpanel-feature-row), #main-body #tabOverview:has(.usage-dial) > .panel:has(.plesk-feature-row){grid-column:1 / -1} #main-body #tabOverview:has(.usage-dial) > .panel:has(#frmCreateEmailAccount){grid-column:1 / -1} #main-body #tabOverview:has(.usage-dial) > .panel{margin-bottom:0} /* temiz halka gauge */ #main-body .dn-usage-ring{margin:4px auto 2px} #main-body .dn-usage-ring svg{max-width:120px} @media(max-width:820px){ #main-body #tabOverview.active:has(.usage-dial){grid-template-columns:1fr} #main-body #tabOverview:has(.usage-dial) > .row > [class*="col-"]:has(.usage-dial), #main-body #tabOverview:has(.usage-dial) > .panel:has([id="firstPaymentAmount"]), #main-body #tabOverview:has(.usage-dial) > .dn-billing-panel{grid-column:1;grid-row:auto} } /* Billing — demo 4-row (rebuilt via JS) */ #main-body .dn-bill{display:flex;flex-direction:column} #main-body .dn-bill-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2)} #main-body .dn-bill-row:last-child{border-bottom:0} #main-body .dn-bill-k{color:var(--ink-soft);font-size:.9rem;font-family:var(--f-body)} #main-body .dn-bill-v{color:var(--ink);font-weight:700;font-family:var(--f-nav);font-size:.92rem;text-align:right} /* ═══════════ SSL/Lisans (tema fallback) overview — demo bento ═══════════ */ #main-body .dn-svc-billing{margin-bottom:18px} #main-body .dn-svc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} #main-body .dn-svc-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-nav);font-weight:600;font-size:.86rem;border-radius:var(--r-md);padding:11px 18px;text-decoration:none;border:1.5px solid transparent;transition:all var(--t-fast,.16s)} #main-body .dn-svc-act.green{background:var(--green);color:#fff !important} #main-body .dn-svc-act.green:hover{background:var(--green-d);color:#fff !important;text-decoration:none} #main-body .dn-svc-act.blue{background:var(--blue);color:#fff !important} #main-body .dn-svc-act.blue:hover{background:var(--blue-d);color:#fff !important;text-decoration:none} #main-body .dn-svc-act.red{background:#fff;color:var(--red) !important;border-color:var(--red)} #main-body .dn-svc-act.red:hover{background:var(--red);color:#fff !important;text-decoration:none} #main-body .dn-svc-act.disabled{opacity:.6;pointer-events:none} /* Domain / Additional Info tabs */ #main-body #tabOverview .nav-tabs.responsive-tabs-sm{border-bottom:1px solid var(--line);gap:4px;margin-bottom:0;flex-wrap:wrap} #main-body #tabOverview .nav-tabs.responsive-tabs-sm .nav-link{border:0;border-bottom:2px solid transparent;color:var(--ink-soft);font-family:var(--f-nav);font-weight:600;font-size:.88rem;padding:11px 16px;background:transparent} #main-body #tabOverview .nav-tabs.responsive-tabs-sm .nav-link.active{color:var(--blue-d);border-bottom-color:var(--blue)} #main-body .product-details-tab-container{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);padding:20px 22px} #main-body .product-details-tab-container .row{display:flex;justify-content:center;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);margin:0} #main-body .product-details-tab-container .row:last-child{border-bottom:0} #main-body .product-details-tab-container [class*="col-"]{padding:0;flex:0 1 auto;max-width:none;width:auto} #main-body .product-details-tab-container .text-right{color:var(--ink-soft) !important;text-align:right !important;font-weight:400} #main-body .product-details-tab-container .text-left{text-align:left !important;font-weight:600;color:var(--ink)} #main-body .product-details-tab-container .btn{border:1.5px solid var(--line);border-radius:var(--r-md);color:var(--blue-d) !important;font-family:var(--f-nav);font-weight:600;background:#fff;margin-top:14px} #main-body .product-details-tab-container .btn:hover{border-color:var(--blue);background:var(--blue-wash);color:var(--blue-d) !important} /* ═══════════ Domain detay — overview giydirme ═══════════ */ #main-body #tabOverview .card-title{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:16px} /* info rows (h5 label + value) */ #main-body #tabOverview .card-body > .row.mb-3{margin:0} #main-body #tabOverview .card-body > .row.mb-3 > [class*="col-lg"]{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line-2)} #main-body #tabOverview .card-body > .row.mb-3 > [class*="col-lg"] h5{margin:0;color:var(--ink-soft);font-size:.9rem;font-weight:400;font-family:var(--f-body)} #main-body #tabOverview .card-body > .row.mb-3 > [class*="col-lg"] > *:not(h5){font-weight:600;color:var(--ink);text-align:right;font-family:var(--f-nav);font-size:.92rem} #main-body #tabOverview .card-body > .row.mb-3 > [class*="col-lg"] a{color:var(--blue-d) !important;text-decoration:none} /* "What's on today" list → action boxes */ #main-body #tabOverview .card-body > ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:10px} #main-body #tabOverview .card-body > ul > li{margin:0} #main-body #tabOverview .card-body > ul > li a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 15px;font-family:var(--f-nav);font-weight:600;font-size:.85rem;color:var(--ink-2) !important;text-decoration:none;transition:all var(--t-fast,.16s)} #main-body #tabOverview .card-body > ul > li a:hover{border-color:var(--blue);color:var(--blue-d) !important;background:var(--blue-wash)} /* module output buttons */ #main-body #tabOverview .moduleoutput .btn{border-radius:var(--r-md);font-family:var(--f-nav);font-weight:600;border:1.5px solid var(--line);color:var(--ink-2)} #main-body #tabOverview .moduleoutput .btn:hover{border-color:var(--blue);color:var(--blue-d)} /* ═══════════ Domain detay — bento overview (Konsept 1) ═══════════ */ #main-body .dn-dd-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:stretch;margin-bottom:18px} #main-body .dn-dd-info,#main-body .dn-dd-renew{margin-bottom:0;height:100%} #main-body .dn-dd-renew .card-body{display:flex;flex-direction:column;justify-content:center;height:100%} #main-body .dn-countdown{text-align:center;padding:10px 0 6px} #main-body .dn-cd-days{font-family:var(--f-display);font-weight:800;font-size:2.8rem;line-height:1;color:var(--green-d)} #main-body .dn-cd-lbl{font-size:.85rem;color:var(--ink-soft);margin-top:6px} #main-body .dn-cd-btn{width:100%;justify-content:center;margin-top:16px} #main-body .dn-dd-today{margin-bottom:0} #main-body .dn-dd-today .card-body > ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px} #main-body .dn-dd-today .card-body > ul > li{margin:0} #main-body .dn-dd-today .card-body > ul > li a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 15px;font-family:var(--f-nav);font-weight:600;font-size:.85rem;color:var(--ink-2) !important;text-decoration:none;transition:all var(--t-fast,.16s)} #main-body .dn-dd-today .card-body > ul > li a:hover{border-color:var(--blue);color:var(--blue-d) !important;background:var(--blue-wash)} @media(max-width:820px){#main-body .dn-dd-grid{grid-template-columns:1fr}} /* ── Domain detail — Management tile card (under bento) ── */ #main-body .dn-dd-mgmt{margin-bottom:0} #main-body .dn-mgmt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} #main-body .dn-mgmt-grid .dn-svc-group{display:contents} #main-body .dn-mgmt-tile.list-group-item{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 10px;margin:0 !important;width:auto !important;border:1px solid var(--line) !important;border-radius:var(--r-md) !important;background:#fff;color:var(--ink) !important;text-decoration:none;font-family:var(--f-nav);font-weight:600;font-size:.82rem;text-align:center;transition:all var(--t-fast,.16s)} #main-body .dn-mgmt-tile.list-group-item:hover{border-color:var(--blue) !important;background:var(--blue-wash);transform:translateY(-2px);box-shadow:var(--sh-sm);color:var(--blue-d) !important;z-index:1} #main-body .dn-mgmt-tile.list-group-item.active{border-color:var(--blue) !important;background:var(--blue-wash);color:var(--blue-d) !important} #main-body .dn-mgmt-ic{width:42px;height:42px;border-radius:12px;background:var(--blue-wash);color:var(--blue-d);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none} #main-body .dn-mgmt-tile.list-group-item:hover .dn-mgmt-ic,#main-body .dn-mgmt-tile.list-group-item.active .dn-mgmt-ic{background:var(--blue);color:#fff} #main-body .dn-mgmt-lbl{line-height:1.3} @media(max-width:820px){#main-body .dn-mgmt-grid{grid-template-columns:1fr 1fr}} /* ═══════════ Cancellation request page ═══════════ */ #main-body .dn-cancel-hero{background:linear-gradient(120deg,#7f1d1d 0%,#b91c1c 55%,#ef4444 100%)} #main-body .dn-cancel-wrap{max-width:720px;margin:0 auto} #main-body .dn-cancel-wrap .card{margin-top:0} #main-body .dn-cancel-wrap .form-group{margin-bottom:18px} #main-body .dn-cancel-wrap label{font-family:var(--f-nav);font-weight:600;color:var(--ink-2);font-size:.9rem;margin-bottom:7px;display:block} #main-body .dn-cancel-wrap .form-control{border:1.5px solid var(--line);border-radius:var(--r-md);font-size:.92rem;padding:11px 14px;background:#fff} #main-body .dn-cancel-wrap .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);outline:0} #main-body .dn-cancel-wrap textarea.form-control{min-height:120px;resize:vertical} #main-body .dn-cancel-wrap .alert-warning{border-radius:var(--r-md);border:1px solid #fde68a;background:#fffbeb;color:#92400e} #main-body .dn-cancel-wrap .form-check{display:flex;align-items:center;gap:8px;font-weight:500;margin-top:8px} #main-body .dn-cancel-wrap .form-check-input{width:auto;margin:0} #main-body .dn-cancel-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px} #main-body .dn-svc-act.ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink-2) !important} #main-body .dn-svc-act.ghost:hover{border-color:var(--blue);color:var(--blue-d) !important;background:var(--blue-wash);text-decoration:none} #main-body .dn-svc-act.red-solid{background:var(--red);color:#fff !important;border:1.5px solid var(--red)} #main-body .dn-svc-act.red-solid:hover{background:#dc2626;color:#fff !important;text-decoration:none} /* ═══════════ Domain subpages (EPP, Custom NS) — form skin ═══════════ */ #main-body .dn-form-page{max-width:760px;margin:0 auto} #main-body .dn-form-page .card{margin-bottom:18px} #main-body .dn-form-page .card-title{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink);margin-bottom:18px;display:flex;align-items:center} #main-body .dn-form-page .dn-form-intro{color:var(--ink-soft);font-size:.92rem;margin-bottom:0} #main-body .dn-form-page .form-group.row{align-items:center;margin-bottom:16px} #main-body .dn-form-page label,#main-body .dn-form-page .col-form-label{font-family:var(--f-nav);font-weight:600;color:var(--ink-2);font-size:.9rem} #main-body .dn-form-page .form-control{border:1.5px solid var(--line);border-radius:var(--r-md);font-size:.92rem;padding:10px 14px;background:#fff} #main-body .dn-form-page .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);outline:0} #main-body .dn-form-page .input-group .form-control{border-radius:var(--r-md) 0 0 var(--r-md)} #main-body .dn-form-page .input-group-text{background:var(--bg-soft);border:1.5px solid var(--line);border-left:0;color:var(--ink-soft);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--f-mono);font-size:.85rem} #main-body .dn-form-page .dn-form-actions{display:flex;justify-content:flex-end;margin-top:6px} #main-body .dn-form-page .btn-primary{background:var(--blue) !important;border:1.5px solid var(--blue) !important;border-radius:var(--r-md);font-family:var(--f-nav);font-weight:600;padding:10px 22px} #main-body .dn-form-page .btn-primary:hover{background:var(--blue-d) !important;border-color:var(--blue-d) !important} #main-body .dn-form-page .alert{border-radius:var(--r-md)} #main-body .dn-form-page .alert-info{border:1px solid #bae6fd;background:#f0f9ff;color:var(--blue-ink)} /* ── Profile (clientareadetails) — wide form ── */ #main-body .dn-form-page.dn-wide{max-width:1040px} #main-body .dn-form-page .btn-default,#main-body .dn-form-page input[type="reset"]{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);color:var(--ink-2);font-family:var(--f-nav);font-weight:600;padding:10px 22px;cursor:pointer} #main-body .dn-form-page .btn-default:hover,#main-body .dn-form-page input[type="reset"]:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-wash)} #main-body .dn-form-page .custom-select,#main-body .dn-form-page select.form-control{border:1.5px solid var(--line);border-radius:var(--r-md);font-size:.92rem;padding:10px 14px;background:#fff;height:auto} #main-body .dn-form-page .custom-select:focus,#main-body .dn-form-page select.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);outline:0} #main-body .dn-form-page .form-check label,#main-body .dn-form-page .controls label{font-weight:500;color:var(--ink-2);cursor:pointer} #main-body .dn-form-page .text-danger{color:var(--red)} #main-body .dn-form-page input[type="submit"].btn-primary{padding:11px 26px} /* ── Profile group — tables + payment/contact items ── */ #main-body .dn-form-page .table{width:100%;border-collapse:separate;border-spacing:0;margin:0} #main-body .dn-form-page .table thead th{background:var(--bg-soft);border-bottom:1px solid var(--line);font-family:var(--f-nav);font-weight:600;font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;padding:12px 14px;text-align:left} #main-body .dn-form-page .table tbody td{padding:13px 14px;border-bottom:1px solid var(--line-2);font-size:.9rem;vertical-align:middle;color:var(--ink)} #main-body .dn-form-page .table tbody tr:last-child td{border-bottom:0} #main-body .dn-form-page .table.table-list tbody tr,#main-body .dn-form-page #payMethodList tbody tr{cursor:pointer;transition:background var(--t-fast,.16s)} #main-body .dn-form-page .table tbody tr:hover{background:var(--bg-soft)} #main-body .dn-form-page .table-container{overflow-x:auto} /* small buttons (inside table) */ #main-body .dn-form-page .btn-sm{border-radius:var(--r-sm);font-family:var(--f-nav);font-weight:600;font-size:.8rem;padding:6px 12px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2)} #main-body .dn-form-page .btn-sm:hover:not(.disabled){border-color:var(--blue);color:var(--blue-d);background:var(--blue-wash)} #main-body .dn-form-page .btn-sm.disabled{opacity:.5;pointer-events:none} #main-body .dn-form-page .btn-info{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important} #main-body .dn-form-page .btn-info:hover{background:var(--blue-d) !important;color:#fff !important} #main-body .dn-form-page .btn-delete:hover{border-color:var(--red) !important;color:var(--red) !important;background:#fef2f2 !important} /* add payment method buttons */ #main-body .dn-form-page .card-title + p .btn,#main-body .dn-form-page [data-role="add-new-credit-card"]{margin-bottom:4px} /* SSO toggle / switch */ #main-body .dn-form-page .toggle-switch-success{accent-color:var(--green)} /* modal (delete confirmation) */ #main-body .modal-content{border:0;border-radius:var(--r-lg);overflow:hidden} #main-body .modal-header{background:var(--bg-soft);border-bottom:1px solid var(--line-2)} #main-body .modal-title{font-family:var(--f-display);font-weight:700;font-size:1.05rem} #main-body .modal-footer .btn-primary{background:var(--red) !important;border-color:var(--red) !important} #main-body .modal-footer .btn-primary:hover{background:#dc2626 !important} /* ── Tier 1 rest — prose / announcement / upgrade polish ── */ #main-body .dn-form-page p{line-height:1.7;color:var(--ink-2)} #main-body .dn-form-page .card p:last-child{margin-bottom:0} #main-body .dn-form-page h3:not(.card-title){font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:1.05rem} #main-body .dn-form-page .table-striped tbody tr:nth-child(even){background:transparent} #main-body .dn-form-page .product-to-be-upgraded{background:var(--blue-wash);border:1px solid #bae6fd;border-radius:var(--r-md);padding:14px 18px;margin-bottom:18px} #main-body .dn-form-page .btn-lg{padding:12px 26px;font-size:.95rem} #main-body .dn-form-page .alert-success{border-radius:var(--r-md);border:1px solid #bbf7d0;background:#f0fdf4;color:var(--green-d)} #main-body .dn-form-page .alert-danger,#main-body .dn-form-page .alert-error{border-radius:var(--r-md);border:1px solid #fecaca;background:#fef2f2;color:#b91c1c} #main-body .dn-form-page .badge{border-radius:999px;font-family:var(--f-nav);font-weight:600;padding:5px 11px;font-size:.75rem} /* ── Auth / error / redirect (Group B) ── */ #main-body .dn-auth-page{max-width:520px;margin:36px auto;text-align:center} #main-body .dn-auth-head{font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px} #main-body .dn-auth-head i{color:var(--blue)} #main-body .dn-auth-page .card{text-align:left;margin-bottom:16px} #main-body .dn-auth-page .form-control{border:1.5px solid var(--line);border-radius:var(--r-md);padding:11px 14px} #main-body .dn-auth-page .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);outline:0} #main-body .dn-auth-page .btn-primary{background:var(--blue) !important;border:1.5px solid var(--blue) !important;border-radius:var(--r-md);font-family:var(--f-nav);font-weight:600;padding:11px 24px} #main-body .dn-auth-page .btn-primary:hover{background:var(--blue-d) !important} /* ── Profile form — 2-column grid + phone widget fix ── */ #main-body .dn-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} #main-body .dn-fgrid .form-group{margin-bottom:16px} #main-body .dn-fgrid .control,#main-body .dn-fgrid .control .form-control{width:100%} @media(max-width:640px){#main-body .dn-fgrid{grid-template-columns:1fr}} /* intl-tel-input (telefon) */ #main-body .iti{width:100% !important;display:block;position:relative} #main-body .iti>input,#main-body .iti input[type="tel"],#main-body #inputPhone.form-control{width:100% !important;padding-left:86px !important;padding-right:12px} #main-body .iti__flag-container{border:0;position:absolute;top:1px;bottom:1px;left:1px;z-index:2} #main-body .iti__selected-flag{background:var(--bg-soft);border-radius:var(--r-md) 0 0 var(--r-md);padding:0 10px;height:100%;display:flex;align-items:center;border-right:1px solid var(--line)} #main-body .iti__selected-dial-code{margin-left:6px;color:var(--ink-2);font-family:var(--f-mono);font-size:.85rem} #main-body .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background:var(--line-2)} #main-body .iti__country-list{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md);font-size:.88rem;z-index:5} /* ══════════ SWITCH ACCOUNT (user-switch-account) ══════════ */ #main-body .dn-sw{max-width:720px;margin:0 auto} #main-body .dn-sw-intro{color:var(--ink-soft);font-size:.92rem;margin:0 0 16px;padding:0 2px} #main-body .select-account{display:grid;gap:12px} #main-body .select-account a{display:flex;align-items:center;gap:15px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-sm);text-decoration:none;color:var(--ink);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} #main-body .select-account a:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--blue);text-decoration:none;color:var(--ink)} #main-body .select-account a .av{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--blue-ink),var(--blue-d));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:.95rem;flex:none;letter-spacing:.02em;text-transform:uppercase} #main-body .select-account a .bd{flex:1;min-width:0} #main-body .select-account a .nm{display:block;font-family:var(--f-nav);font-weight:700;font-size:.93rem;line-height:1.35;color:var(--ink);word-break:break-word} #main-body .select-account a .mt{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap} #main-body .select-account a .mt:empty{display:none} #main-body .select-account a .go{width:34px;height:34px;border-radius:50%;background:var(--bg-soft);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex:none;font-size:.8rem;transition:background var(--t-fast),color var(--t-fast)} #main-body .select-account a:hover .go{background:var(--blue-d);color:#fff} #main-body .select-account a .label{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);font-family:var(--f-nav);font-size:.71rem;font-weight:700;letter-spacing:.02em;float:none;text-shadow:none} #main-body .select-account a .label-info{background:var(--blue-wash);color:var(--blue-d)} #main-body .select-account a .label-default{background:var(--bg-soft);color:var(--ink-soft)} #main-body .select-account a.disabled{opacity:.55;pointer-events:none;background:var(--bg-soft)} #main-body .select-account a.disabled .av{background:#cbd5e1} #main-body .dn-sw-empty{background:#fff;border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:34px 24px;text-align:center} #main-body .dn-sw-empty .ic{width:58px;height:58px;border-radius:50%;background:var(--blue-wash);color:var(--blue-d);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 14px} #main-body .dn-sw-empty p{color:var(--ink-soft);font-size:.9rem;margin:0 0 6px} #main-body .dn-sw-empty .dn-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-md);font-family:var(--f-nav);font-weight:700;font-size:.88rem;text-decoration:none;border:1.5px solid transparent} #main-body .dn-sw-empty .dn-b.primary{background:var(--blue-d);color:#fff} #main-body .dn-sw-empty .dn-b.primary:hover{background:var(--blue-ink);color:#fff;text-decoration:none} @media(max-width:560px){ #main-body .select-account a{padding:14px;gap:12px} #main-body .select-account a .av{width:40px;height:40px;border-radius:11px;font-size:.85rem} #main-body .select-account a .nm{font-size:.88rem} #main-body .select-account a .go{width:30px;height:30px;font-size:.72rem} } /* ════════════ /switch account ══════════ */ /* ══════════ QUANTITY SELECTOR (configurable option type 4 — order form) ══════════ */ .dn-qty{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm)} .dn-qty-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .dn-qty-lbl{display:block;font-family:var(--f-nav);font-weight:700;font-size:.95rem;color:var(--ink);margin:0} .dn-qty-hint{font-size:.78rem;color:var(--ink-soft);margin-top:3px} .dn-qty-ctl{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff} .dn-qty-btn{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--ink-2);font-size:.95rem;border:0;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);flex:none} .dn-qty-btn:hover:not(:disabled){background:var(--blue-d);color:#fff} .dn-qty-btn:disabled{opacity:.4;cursor:not-allowed} .dn-qty-in{width:86px;height:46px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-family:var(--f-display);font-weight:800;font-size:1.15rem;color:var(--ink);background:#fff;-moz-appearance:textfield;box-shadow:none;border-radius:0} .dn-qty-in::-webkit-outer-spin-button,.dn-qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .dn-qty-in:focus{outline:2px solid var(--blue);outline-offset:-2px;box-shadow:none} .dn-qty-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .dn-qty-quick:empty{display:none} .dn-qty-chip{padding:7px 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;font-family:var(--f-nav);font-weight:700;font-size:.8rem;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)} .dn-qty-chip:hover{border-color:var(--blue);color:var(--blue-d)} .dn-qty-chip.on{background:var(--blue-d);border-color:var(--blue-d);color:#fff} .dn-qty-range{margin-top:16px} .dn-qty-range input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--blue-d) var(--fill,0%),var(--line-2) var(--fill,0%));border-radius:99px;outline:0;padding:0;margin:0} .dn-qty-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--blue-d);box-shadow:var(--sh-sm);cursor:pointer} .dn-qty-range input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--blue-d);cursor:pointer} .dn-qty-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-soft);font-family:var(--f-mono);margin-top:6px} .dn-qty-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);flex-wrap:wrap} .dn-qty-unit{font-size:.85rem;color:var(--ink-soft)} .dn-qty-unit b{color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:1rem} @media(max-width:560px){ .dn-qty-top{flex-direction:column;align-items:stretch} .dn-qty-ctl{width:100%} .dn-qty-in{flex:1;width:auto} .dn-qty-btn{width:56px;height:50px} .dn-qty-sum{flex-direction:column;align-items:flex-start;gap:4px} } /* ══════════ /quantity selector ══════════ */ /* fix: overlay (id) overrides .w-hidden (class) — hide ONLY overlay by default, not DataTable tables */ #fullpage-overlay.w-hidden{display:none!important} /* ══════════ register: searchable dropdown (dn-combo) ══════════ */ .dn-combo{position:relative;width:100%} .dn-combo-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:9px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);font-size:.92rem;color:var(--ink);cursor:pointer;text-align:left;transition:border-color var(--t-fast)} .dn-combo-btn:hover{border-color:var(--blue)} .dn-combo-caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-2);margin-left:10px;flex:none} .dn-combo-panel{position:absolute;top:calc(100% + 6px);left:0;width:100%;max-height:270px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);z-index:60;display:flex;flex-direction:column;overflow:hidden} .dn-combo-panel[hidden]{display:none} .dn-combo-search{width:100%;padding:11px 14px;border:0;border-bottom:1px solid var(--line);font-size:.9rem;outline:none;background:transparent} .dn-combo-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1} .dn-combo-opt{padding:9px 12px;font-size:.9rem;color:var(--ink);border-radius:8px;cursor:pointer;line-height:1.35} .dn-combo-opt:hover{background:rgba(14,165,233,.08);color:var(--blue)} /* ══════════ register: newsletter (flat section) + signup note ══════════ */ .dn-newsletter{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2)} .dn-nl-title{font-family:var(--f-nav);font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 6px} .dn-nl-desc{margin:0 0 14px;font-size:.9rem;color:var(--ink-2);line-height:1.55} .dn-nl-check{margin:0 0 16px;font-weight:600;color:var(--ink)} .dn-nl-check input[type="checkbox"]{width:17px;height:17px;accent-color:var(--blue);margin-top:1px;flex:none} .dn-nl-privacy-head{font-size:.82rem;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.5} .dn-nl-privacy-body{margin:0;font-size:.82rem;color:var(--ink-2);line-height:1.6} .dn-signup-note{margin:16px 0 0;font-size:.82rem;color:var(--ink-2);text-align:center} .dn-signup-note a{color:var(--blue);text-decoration:underline} .dn-opt{font-weight:400;font-size:.78rem;color:var(--ink-2)} /* ══════════ register: phone (code combo + number) ══════════ */ .dn-phone{display:flex;gap:10px;align-items:stretch} .dn-phone .dn-combo.dn-phone-code{width:150px;flex:none} .dn-phone .dn-combo.dn-phone-code .dn-combo-btn{white-space:nowrap} .dn-phone .form-control{flex:1;margin:0} .dn-phone .dn-combo-panel{width:320px;max-width:90vw} @media(max-width:560px){ .dn-phone{flex-direction:column} .dn-phone .dn-combo.dn-phone-code{width:100%} } /* ══════════ register: validation + phone (intl-tel-input) ══════════ */ .is-invalid{border-color:#e11d48!important;box-shadow:0 0 0 1px rgba(225,29,72,.15)} .iti{width:100%;display:block} .iti .iti__flag-container, .iti .iti__selected-flag{background:transparent} .iti__country-list{max-width:340px} /* ══════════ register fix: native select text vertical centering ══════════ */ .dn-scope .dn-reg select.form-control{height:46px;padding:0 38px 0 14px;line-height:46px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* ══════════ register fix: flag images ══════════ */ .dn-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(11,18,32,.08);vertical-align:-2px;margin-right:8px;flex:none;display:inline-block} .dn-combo-btn{display:flex;align-items:center;gap:2px} .dn-combo-val{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dn-combo-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dn-combo-code{margin-left:6px;color:var(--ink-2);font-weight:600} .dn-combo-opt{display:flex;align-items:center;gap:2px} /* ══════════ ticket file attachment: custom buttons ══════════ */ #main-body .dn-file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} #main-body .dn-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} #main-body .dn-file-row .btn{border-radius:var(--r-md);padding:9px 16px;font-family:var(--f-nav);font-weight:600;font-size:.85rem;line-height:1.2;border:1.5px solid transparent;box-shadow:none} #main-body .btn.dn-file-browse{background:var(--blue);color:#fff} #main-body .btn.dn-file-browse:hover{background:var(--blue-d);color:#fff} #main-body .btn.dn-file-add{background:#fff;color:var(--blue-d);border-color:var(--blue)} #main-body .btn.dn-file-add:hover{background:var(--blue-wash)} #main-body .btn.dn-file-rm{background:#fff;color:var(--red);border-color:var(--red);padding:9px 14px} #main-body .btn.dn-file-rm:hover{background:var(--red);color:#fff} #main-body .dn-file-name{color:var(--ink-soft);font-size:.82rem;font-family:var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;line-height:1.2}