/* =====================================================================
VEXORIA — WiseCP Theme
Premium dark + light · Linear/Apple aesthetic · Vexoria red accent
Author: design system v1.0
===================================================================== */
/* -----------------------------------------------------------
1. DESIGN TOKENS
----------------------------------------------------------- */
:root {
/* Dark (default) */
--vx-bg: #08080A;
--vx-bg-grad: radial-gradient(ellipse at 50% -20%, rgba(227,6,19,0.10) 0%, rgba(227,6,19,0) 50%), #08080A;
--vx-surface: #0E0E11;
--vx-surface-2: #16161B;
--vx-surface-hi: #1C1C22;
--vx-border: rgba(255,255,255,0.07);
--vx-border-strong:rgba(255,255,255,0.14);
--vx-text: #FAFAFA;
--vx-text-2: #A1A1AA;
--vx-text-3: #71717A;
--vx-text-4: #52525B;
--vx-accent: #E30613;
--vx-accent-hi: #FF1F2E;
--vx-accent-soft: rgba(227,6,19,0.12);
--vx-accent-border:rgba(227,6,19,0.35);
--vx-success: #22C55E;
--vx-warning: #EAB308;
--vx-danger: #EF4444;
/* Type */
--vx-font-sans: 'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--vx-font-mono: 'JetBrains Mono','SF Mono',Consolas,monospace;
/* Radii */
--vx-r-xs: 4px; --vx-r-sm: 6px; --vx-r-md: 8px; --vx-r-lg: 12px; --vx-r-xl: 16px;
/* Shadows */
--vx-shadow-sm: 0 1px 2px rgba(0,0,0,0.18);
--vx-shadow-md: 0 8px 24px rgba(0,0,0,0.32);
--vx-shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.60);
/* Layout */
--vx-container: 1320px;
--vx-gutter: 32px;
--vx-header-h: 72px;
--vx-topbar-h: 32px;
}
/* Light variant — toggled by body class */
body.vx-light, body[data-vx-mode="light"] {
--vx-bg: #FAFAFA;
--vx-bg-grad: radial-gradient(ellipse at 50% -20%, rgba(227,6,19,0.06) 0%, rgba(227,6,19,0) 50%), #FAFAFA;
--vx-surface: #FFFFFF;
--vx-surface-2: #F4F4F5;
--vx-surface-hi: #E4E4E7;
--vx-border: rgba(0,0,0,0.08);
--vx-border-strong:rgba(0,0,0,0.16);
--vx-text: #09090B;
--vx-text-2: #52525B;
--vx-text-3: #71717A;
--vx-text-4: #A1A1AA;
--vx-accent: #C20510;
--vx-accent-hi: #E30613;
--vx-accent-soft: rgba(195,5,16,0.08);
--vx-accent-border:rgba(195,5,16,0.25);
--vx-shadow-md: 0 8px 24px rgba(0,0,0,0.06);
--vx-shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.15);
}
/* -----------------------------------------------------------
2. RESET + BASE
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--vx-bg);
color: var(--vx-text);
font-family: var(--vx-font-sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: var(--vx-accent); color: #fff; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--vx-font-sans);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--vx-text);
margin: 0 0 .5em;
line-height: 1.1;
}
h1 { font-size: clamp(36px, 4.5vw, 60px); letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.03em; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vx-text-3); font-family: var(--vx-font-mono); font-weight: 500; }
p { margin: 0 0 1em; color: var(--vx-text-2); }
a { color: var(--vx-accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--vx-accent-hi); }
hr { border: none; border-top: 1px solid var(--vx-border); margin: 2em 0; }
strong, b { font-weight: 600; color: var(--vx-text); }
code, pre, .mono { font-family: var(--vx-font-mono); }
img { max-width: 100%; height: auto; }
input, button, select, textarea { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }
/* Custom scrollbar in dark */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vx-bg); }
::-webkit-scrollbar-thumb { background: var(--vx-surface-hi); border-radius: 5px; border: 2px solid var(--vx-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--vx-text-4); }
/* -----------------------------------------------------------
3. LAYOUT PRIMITIVES
----------------------------------------------------------- */
#wrapper, .wrapper, #bigcontent {
max-width: var(--vx-container);
margin: 0 auto;
padding: 0 var(--vx-gutter);
}
.vx-container { max-width: var(--vx-container); margin: 0 auto; padding: 0 var(--vx-gutter); }
.vx-section { padding: 96px 0; border-bottom: 1px solid var(--vx-border); }
.vx-section--lg { padding: 120px 0; }
.vx-grid-bg {
position: relative;
background-image: linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 64px 64px;
}
.vx-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--vx-font-mono);
font-size: 11px; color: var(--vx-text-3);
text-transform: uppercase; letter-spacing: 0.14em;
}
.vx-eyebrow::before {
content: ""; width: 24px; height: 1px; background: var(--vx-border-strong);
}
.vx-eyebrow .vx-num { color: var(--vx-accent); margin-right: -8px; }
.vx-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--vx-border);
background: var(--vx-surface);
font-family: var(--vx-font-mono); font-size: 11px; font-weight: 500;
color: var(--vx-text-2);
text-transform: uppercase; letter-spacing: 0.08em;
}
.vx-badge::before {
content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--vx-text-3);
}
.vx-badge--accent { border-color: var(--vx-accent-border); background: var(--vx-accent-soft); color: var(--vx-accent); }
.vx-badge--accent::before { background: var(--vx-accent); }
.vx-badge--success { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); color: var(--vx-success); }
.vx-badge--success::before { background: var(--vx-success); box-shadow: 0 0 8px var(--vx-success); }
.vx-badge--warning { border-color: rgba(234,179,8,0.35); background: rgba(234,179,8,0.10); color: var(--vx-warning); }
.vx-hairline { height: 1px; background: var(--vx-border); border: none; }
/* -----------------------------------------------------------
4. BUTTONS
----------------------------------------------------------- */
.vx-btn,
.gonderbtn, .lbtn, .yesilbtn, .mavibtn, .turuncubtn, .grayBtn, .login-btn, .signup-btn,
button.gonderbtn, a.gonderbtn, a.lbtn, a.yesilbtn, a.mavibtn, a.turuncubtn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 16px;
font-family: var(--vx-font-sans); font-size: 14px; font-weight: 600;
letter-spacing: -0.01em; line-height: 1;
background: var(--vx-accent); color: #fff !important;
border: 1px solid transparent; border-radius: var(--vx-r-md);
cursor: pointer; text-decoration: none;
transition: background .12s ease, border-color .12s ease, transform .08s ease;
white-space: nowrap;
}
.vx-btn:hover, .gonderbtn:hover, .yesilbtn:hover, .mavibtn:hover, .turuncubtn:hover { background: var(--vx-accent-hi); color: #fff !important; }
.vx-btn:active { transform: translateY(1px); }
.vx-btn--lg, .gonderbtn.lg { height: 52px; padding: 0 22px; font-size: 15px; border-radius: var(--vx-r-md); }
.vx-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.vx-btn--secondary, .grayBtn, .lbtn,
a.lbtn, a.grayBtn, button.lbtn, button.grayBtn,
input[type=button].lbtn, input[type=submit].lbtn {
background: var(--vx-surface-2) !important; color: var(--vx-text) !important;
border: 1px solid var(--vx-border) !important;
}
.vx-btn--secondary:hover, .grayBtn:hover, .lbtn:hover,
a.lbtn:hover, a.grayBtn:hover { background: var(--vx-surface-hi) !important; color: var(--vx-text) !important; }
.vx-btn--ghost {
background: transparent; color: var(--vx-text) !important;
border: 1px solid var(--vx-border);
}
.vx-btn--ghost:hover { background: var(--vx-surface-2); }
.vx-btn--full { width: 100%; }
/* -----------------------------------------------------------
5. FORMS
----------------------------------------------------------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=search], select, textarea {
width: 100%;
height: 44px; padding: 0 14px;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md);
color: var(--vx-text); font-size: 14px;
transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.55; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
background-image: url("data:image/svg+xml;charset=utf-8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
input::placeholder, textarea::placeholder { color: var(--vx-text-4); }
input:focus, textarea:focus, select:focus {
border-color: var(--vx-accent);
box-shadow: 0 0 0 3px var(--vx-accent-soft);
}
input[disabled], textarea[disabled], select[disabled] { opacity: .55; cursor: not-allowed; }
label { display: block; font-family: var(--vx-font-mono); font-size: 11px; color: var(--vx-text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--vx-accent); }
/* -----------------------------------------------------------
6. HEADER + TOPBAR
----------------------------------------------------------- */
.vx-topbar {
border-bottom: 1px solid var(--vx-border);
background: var(--vx-surface);
font-size: 12px; color: var(--vx-text-3);
font-family: var(--vx-font-mono);
}
.vx-topbar__inner {
max-width: var(--vx-container); margin: 0 auto;
padding: 0 var(--vx-gutter);
height: var(--vx-topbar-h);
display: flex; align-items: center; justify-content: space-between;
}
.vx-topbar__left, .vx-topbar__right { display: flex; align-items: center; gap: 14px; }
.vx-topbar__sep { color: var(--vx-text-4); }
.vx-status-dot {
display: inline-flex; align-items: center; gap: 6px;
}
.vx-status-dot::before {
content: ""; width: 6px; height: 6px; border-radius: 999px;
background: var(--vx-success); box-shadow: 0 0 10px var(--vx-success);
}
.vx-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--vx-bg) 72%, transparent);
backdrop-filter: saturate(140%) blur(20px);
-webkit-backdrop-filter: saturate(140%) blur(20px);
border-bottom: 1px solid var(--vx-border);
}
.vx-header__inner {
max-width: var(--vx-container); margin: 0 auto;
padding: 0 var(--vx-gutter);
height: var(--vx-header-h);
display: flex; align-items: center; justify-content: space-between;
}
.vx-header__left { display: flex; align-items: center; gap: 48px; }
.vx-header__right { display: flex; align-items: center; gap: 8px; }
.vx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.vx-logo img { height: 28px; width: auto; display: block; }
.vx-nav { display: flex; align-items: center; gap: 4px; }
.vx-nav a, .vx-nav__item {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 12px; border-radius: 8px;
color: var(--vx-text); font-size: 14px; font-weight: 500;
text-decoration: none;
transition: background .12s;
}
.vx-nav a:hover, .vx-nav__item:hover { background: var(--vx-surface-2); color: var(--vx-text); }
.vx-nav__caret { color: var(--vx-text-3); }
.vx-iconbtn {
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--vx-border); border-radius: 8px;
color: var(--vx-text); cursor: pointer; position: relative;
transition: background .12s;
}
.vx-iconbtn:hover { background: var(--vx-surface-2); }
.vx-iconbtn__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--vx-accent); border-radius: 999px; border: 2px solid var(--vx-surface); }
.vx-header__sep { width: 1px; height: 20px; background: var(--vx-border); margin: 0 4px; }
/* -----------------------------------------------------------
7. HERO + DOMAIN SEARCH
----------------------------------------------------------- */
.vx-hero {
position: relative; overflow: hidden;
background: var(--vx-bg-grad);
border-bottom: 1px solid var(--vx-border);
}
.vx-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
opacity: 0.7;
}
.vx-hero__inner {
position: relative;
max-width: var(--vx-container); margin: 0 auto;
padding: 96px var(--vx-gutter) 80px;
text-align: center;
}
.vx-hero__title {
font-size: clamp(48px, 7vw, 96px);
line-height: 0.96; letter-spacing: -0.045em;
margin: 28px 0 24px; font-weight: 700;
}
.vx-hero__title .accent { color: var(--vx-accent); }
.vx-hero__title .muted { color: var(--vx-text-2); font-weight: 500; }
.vx-hero__desc {
max-width: 640px; margin: 0 auto;
font-size: 18px; line-height: 1.55; color: var(--vx-text-2);
}
.vx-hero__cta { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
/* domain search box */
.homedomainarea-con, .vx-domain-search {
margin: 64px auto 0; max-width: 880px;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
padding: 6px;
box-shadow: var(--vx-shadow-lg);
}
.homedomainarea, .vx-domain-search__body { padding: 0; }
.vx-domain-search__form, #DomainCheck {
display: flex; gap: 8px; padding: 16px;
}
.vx-domain-search__form input[type=text],
#DomainCheck input[name=domain] {
flex: 1; height: 56px; padding: 0 18px;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: 10px;
color: var(--vx-text); font-size: 16px;
}
.vx-domain-search__form input[type=submit],
#DomainCheck input[type=submit] {
height: 56px; padding: 0 28px; min-width: 140px;
background: var(--vx-accent); color: #fff;
border: none; border-radius: 10px; cursor: pointer;
font-weight: 700; font-size: 15px;
}
.vx-domain-search__form input[type=submit]:hover,
#DomainCheck input[type=submit]:hover { background: var(--vx-accent-hi); }
/* popular TLDs (.popuzantilar) */
.popuzantilar, .vx-domain-popular {
padding: 0 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.popuzantilar .uzantibox, .vx-domain-popular__item {
padding: 4px 10px; border-radius: 6px;
font-family: var(--vx-font-mono); font-size: 12px;
background: var(--vx-surface-2); color: var(--vx-text-2);
border: 1px solid var(--vx-border); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.popuzantilar .uzantibox:hover { border-color: var(--vx-accent-border); color: var(--vx-accent); }
.popuzantilar .uzantibox h4 { margin: 0; font-size: 12px; font-weight: 500; font-family: var(--vx-font-mono); }
.popuzantilar .uzantibox h4 img { max-height: 16px; vertical-align: middle; }
.popuzantilar .uzantibox h5, .popuzantilar .uzantibox .dnewprice { margin: 0; color: var(--vx-text-3); font-family: var(--vx-font-mono); font-size: 11px; font-weight: 500; }
.popuzantilar .uzantibox .domdiscount { background: var(--vx-accent); color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-family: var(--vx-font-mono); letter-spacing: 0.04em; }
.popuzantilar .uzantibox.spotlight-tlds { border-color: var(--vx-accent-border); background: var(--vx-accent-soft); color: var(--vx-accent); }
.amount_spot_view { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--vx-font-mono); }
.amount_spot_view i { font-style: normal; color: var(--vx-text-3); }
/* -----------------------------------------------------------
8. PRODUCT GRID (.product-group-item)
----------------------------------------------------------- */
.wclientblockscon, #clientAreaIndex-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: var(--vx-container); margin: 96px auto 0;
padding: 0 var(--vx-gutter);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
background: var(--vx-surface);
overflow: hidden;
}
/* the homedomainarea-con sits at top inside #clientAreaIndex-wrapper -> needs full row */
#clientAreaIndex-wrapper > .homedomainarea-con { grid-column: 1 / -1; margin: 0; border-radius: 0; box-shadow: none; padding: 32px; }
.product-group-item {
position: relative;
padding: 32px 28px;
border-right: 1px solid var(--vx-border);
border-bottom: 1px solid var(--vx-border);
background: transparent;
transition: background .2s ease;
min-height: 220px;
display: flex; flex-direction: column;
}
.product-group-item:nth-child(4n) { border-right: none; }
.product-group-item:hover { background: var(--vx-surface-2); }
.product-group-item a { display: block; color: var(--vx-text); text-decoration: none; height: 100%; }
.product-group-item span {
display: flex; align-items: center; gap: 12px;
font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
color: var(--vx-text); margin-bottom: 12px;
}
.product-group-item span i, .product-group-item span img.product-group-icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: 8px;
font-size: 16px; color: var(--vx-text);
transition: color .2s ease;
}
.product-group-item:hover span i { color: var(--vx-accent); }
.product-group-item-desc {
color: var(--vx-text-3); font-size: 13px; line-height: 1.5; margin: 0; flex: 1;
}
.product-group-item a::after {
content: "→"; display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 999px;
border: 1px solid var(--vx-border); color: var(--vx-text-2);
font-family: var(--vx-font-mono); font-size: 14px;
margin-top: 20px; transition: all .2s ease;
}
.product-group-item:hover a::after { background: var(--vx-accent); color: #fff; border-color: var(--vx-accent); }
/* -----------------------------------------------------------
9. PLAN / PRICE CARDS (.tablopaket, packets)
----------------------------------------------------------- */
.tablopaket, .vx-plan, .pricing-table-item, .servicebox, .pricing-table {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
padding: 24px;
transition: border-color .2s ease, transform .2s ease;
display: flex; flex-direction: column;
}
.tablopaket:hover, .vx-plan:hover { border-color: var(--vx-border-strong); }
.tablopaket.populer, .vx-plan--popular {
background: var(--vx-surface-2);
border-color: var(--vx-accent-border);
position: relative;
}
.tablopaket.populer::before, .vx-plan--popular::before {
content: attr(data-badge,"POPULAR");
position: absolute; top: -12px; left: 24px;
background: var(--vx-accent); color: #fff;
padding: 4px 10px; border-radius: 999px;
font-size: 10px; font-family: var(--vx-font-mono);
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.tablopaket h3, .vx-plan__name {
font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
margin: 0 0 8px;
}
.tablopaket .price, .vx-plan__price {
font-size: 44px; font-weight: 700; letter-spacing: -0.04em;
color: var(--vx-text); line-height: 1; margin: 8px 0 16px;
display: flex; align-items: baseline; gap: 4px;
}
.tablopaket .price small, .vx-plan__price small {
font-family: var(--vx-font-mono); font-size: 12px; color: var(--vx-text-3); font-weight: 500;
}
.tablopaket ul, .vx-plan__features {
list-style: none; padding: 0; margin: 24px 0 0;
border-top: 1px solid var(--vx-border);
}
.tablopaket ul li, .vx-plan__features li {
padding: 12px 0;
border-bottom: 1px solid var(--vx-border);
font-size: 13px; color: var(--vx-text-2);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tablopaket ul li:last-child, .vx-plan__features li:last-child { border-bottom: none; }
.tablopaket ul li::before {
content: "✓"; flex-shrink: 0;
color: var(--vx-accent);
font-weight: 700;
}
/* -----------------------------------------------------------
10. SECTION HEADERS / HEADINGS
----------------------------------------------------------- */
.vx-section-head { margin-bottom: 56px; }
.vx-section-head h2 {
margin: 16px 0 0;
font-size: clamp(36px, 4.5vw, 60px);
letter-spacing: -0.035em; font-weight: 600;
line-height: 1; max-width: 800px;
}
.vx-section-head p { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--vx-text-2); max-width: 600px; }
/* -----------------------------------------------------------
11. FEATURE GRID
----------------------------------------------------------- */
.vx-features {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--vx-border);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl); overflow: hidden;
}
.vx-feature { background: var(--vx-surface); padding: 36px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.vx-feature__num {
font-family: var(--vx-font-mono); font-size: 11px;
color: var(--vx-accent); letter-spacing: 0.1em;
padding: 2px 8px; border-radius: 4px;
border: 1px solid var(--vx-accent-border);
background: var(--vx-accent-soft);
align-self: flex-start;
}
.vx-feature__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--vx-text); }
.vx-feature__desc { font-size: 14px; color: var(--vx-text-2); margin: 0; line-height: 1.6; }
/* -----------------------------------------------------------
12. STATS BAND
----------------------------------------------------------- */
.vx-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border-left: 1px solid var(--vx-border);
border-right: 1px solid var(--vx-border);
max-width: var(--vx-container); margin: 0 auto;
}
.vx-stat {
padding: 56px 32px;
border-right: 1px solid var(--vx-border);
}
.vx-stat:last-child { border-right: none; }
.vx-stat__value { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; color: var(--vx-text); line-height: 1; }
.vx-stat__label { margin-top: 14px; font-family: var(--vx-font-mono); font-size: 12px; color: var(--vx-text-3); letter-spacing: 0.12em; text-transform: uppercase; }
/* counterup compatibility */
.counter, .counter-up { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; color: var(--vx-text); line-height: 1; }
/* -----------------------------------------------------------
13. PARTNERS STRIP
----------------------------------------------------------- */
.vx-partners {
display: grid; grid-template-columns: repeat(8, 1fr);
align-items: center; max-width: var(--vx-container); margin: 0 auto;
border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border);
}
.vx-partner { padding: 28px 16px; text-align: center; border-right: 1px solid var(--vx-border); color: var(--vx-text-3); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.vx-partner:last-child { border-right: none; }
.vx-partner img { max-height: 28px; opacity: 0.5; filter: grayscale(1); transition: opacity .2s; }
.vx-partner:hover img { opacity: 0.85; }
/* -----------------------------------------------------------
14. TESTIMONIALS
----------------------------------------------------------- */
.vx-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vx-testimonial {
padding: 32px; background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-r-xl);
display: flex; flex-direction: column; gap: 20px;
}
.vx-testimonial__stars { display: flex; gap: 2px; color: var(--vx-accent); font-size: 14px; }
.vx-testimonial__quote { font-size: 16px; line-height: 1.55; color: var(--vx-text); margin: 0; letter-spacing: -0.005em; }
.vx-testimonial__author { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--vx-border); display: flex; align-items: center; gap: 12px; }
.vx-testimonial__avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--vx-surface-2); border: 1px solid var(--vx-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--vx-accent); }
.vx-testimonial__name { font-size: 14px; font-weight: 600; color: var(--vx-text); }
.vx-testimonial__role { font-size: 12px; color: var(--vx-text-3); font-family: var(--vx-font-mono); }
/* -----------------------------------------------------------
15. FAQ
----------------------------------------------------------- */
.vx-faq { border-top: 1px solid var(--vx-border); }
.vx-faq__item { border-bottom: 1px solid var(--vx-border); }
.vx-faq__q {
width: 100%; padding: 22px 0;
background: transparent; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; text-align: left;
color: var(--vx-text); font-family: var(--vx-font-sans);
font-size: 18px; font-weight: 500; letter-spacing: -0.015em;
}
.vx-faq__num { font-family: var(--vx-font-mono); font-size: 12px; color: var(--vx-text-3); margin-right: 16px; }
.vx-faq__toggle {
width: 32px; height: 32px; border-radius: 999px;
border: 1px solid var(--vx-border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--vx-text-2); transition: transform .2s;
}
.vx-faq__item.open .vx-faq__toggle { transform: rotate(45deg); background: var(--vx-accent-soft); border-color: var(--vx-accent-border); color: var(--vx-accent); }
.vx-faq__a { padding: 0 0 24px 32px; color: var(--vx-text-2); font-size: 15px; line-height: 1.65; max-width: 700px; display: none; }
.vx-faq__item.open .vx-faq__a { display: block; }
/* -----------------------------------------------------------
16. CTA BAND
----------------------------------------------------------- */
.vx-cta {
padding: 120px 0;
background: radial-gradient(ellipse at 50% 100%, var(--vx-accent-soft) 0%, transparent 60%), var(--vx-bg);
border-bottom: 1px solid var(--vx-border);
position: relative; overflow: hidden; text-align: center;
}
.vx-cta::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
opacity: 0.5;
}
.vx-cta__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 0 var(--vx-gutter); }
.vx-cta h2 { font-size: clamp(40px, 5.5vw, 76px); letter-spacing: -0.04em; font-weight: 600; line-height: 1; margin: 0; }
.vx-cta p { margin-top: 24px; font-family: var(--vx-font-mono); font-size: 13px; color: var(--vx-text-2); letter-spacing: 0.04em; }
.vx-cta__buttons { margin-top: 40px; display: flex; justify-content: center; gap: 12px; }
/* -----------------------------------------------------------
17. FOOTER
----------------------------------------------------------- */
.clean-theme-footer, .vx-footer {
border-top: 1px solid var(--vx-border);
background: var(--vx-bg);
padding-top: 72px;
}
.vx-footer__inner { max-width: var(--vx-container); margin: 0 auto; padding: 0 var(--vx-gutter); }
.vx-footer__top {
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px;
padding-bottom: 56px;
}
.vx-footer__brand { color: var(--vx-text-2); font-size: 14px; line-height: 1.6; max-width: 320px; margin-top: 20px; }
.vx-footer__col h4 { font-family: var(--vx-font-mono); font-size: 11px; color: var(--vx-text-3); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 20px; }
.vx-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.vx-footer__col a { color: var(--vx-text-2); font-size: 14px; }
.vx-footer__col a:hover { color: var(--vx-text); }
.vx-footer__bottom {
border-top: 1px solid var(--vx-border);
padding: 28px 0;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--vx-text-3); font-family: var(--vx-font-mono);
}
.vx-footer__wordmark {
padding: 32px 0 48px;
font-family: var(--vx-font-sans);
font-weight: 900; font-size: min(18vw, 260px); letter-spacing: -0.06em;
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 1px var(--vx-border);
text-align: center; user-select: none;
}
.vx-footer__wordmark .accent { -webkit-text-stroke: 1px var(--vx-accent-border); }
.clean-theme-footer-left, .clean-theme-footer-right { color: var(--vx-text-3); font-family: var(--vx-font-mono); font-size: 12px; }
/* -----------------------------------------------------------
18. CUSTOMER PANEL — Sidebar + topbar
----------------------------------------------------------- */
#mpanelleft, .mpanelleft, .ac-sidebar, .vx-side {
width: 260px;
border-right: 1px solid var(--vx-border);
background: var(--vx-surface);
padding: 16px 0;
min-height: calc(100vh - 72px);
}
#mpanelleft ul, .mpanelleft ul, .ac-sidebar ul {
list-style: none; padding: 0 12px; margin: 0;
}
#mpanelleft ul > li, .mpanelleft ul > li, .ac-sidebar ul > li { margin: 1px 0; }
#mpanelleft ul > li > a,
.mpanelleft ul > li > a,
.ac-sidebar ul > li > a {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; height: 34px;
border-radius: 6px;
color: var(--vx-text-2); text-decoration: none;
font-size: 13px; font-weight: 500;
transition: background .12s, color .12s;
position: relative;
}
#mpanelleft ul > li > a:hover,
.ac-sidebar ul > li > a:hover { background: var(--vx-surface-2); color: var(--vx-text); }
#mpanelleft ul > li.active > a,
#mpanelleft ul > li > a.active,
.ac-sidebar ul > li.active > a,
.ac-sidebar ul > li > a.active {
background: var(--vx-surface-2); color: var(--vx-text);
}
#mpanelleft ul > li.active > a::before,
#mpanelleft ul > li > a.active::before,
.ac-sidebar ul > li.active > a::before,
.ac-sidebar ul > li > a.active::before {
content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 2px;
background: var(--vx-accent); border-radius: 2px;
}
#mpanelleft ul > li > a i,
.ac-sidebar ul > li > a i { color: var(--vx-text-3); font-size: 14px; width: 16px; text-align: center; }
#mpanelleft ul > li.active > a i,
.ac-sidebar ul > li.active > a i { color: var(--vx-accent); }
/* panel inner ul (children) */
.ac-sidebar ul.inner, #mpanelleft ul.inner {
margin: 4px 0 8px 26px; padding-left: 12px;
border-left: 1px solid var(--vx-border);
background: none !important;
}
.ac-sidebar ul.inner li a { padding: 6px 10px; font-size: 12px; height: 28px; color: var(--vx-text-3); }
.ac-sidebar ul.inner li a:hover { color: var(--vx-text); }
/* panel topbar */
#header-info, #header-info2, .ac-header-info {
border-bottom: 1px solid var(--vx-border);
background: var(--vx-surface);
padding: 16px var(--vx-gutter);
display: flex; align-items: center; justify-content: space-between;
}
/* panel right content */
.mpanelright, #basic_client_rightcon { padding: 32px var(--vx-gutter) 64px; min-width: 0; }
/* dashboard stat cards (.ac-dashboard-statistics) */
.ac-dashboard-statistics, .dashboard-statistics, .vx-stats-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px;
}
.ac-dashboard-statistics > div, .vx-stat-card {
padding: 20px; background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-r-lg);
}
.vx-stat-card__label { font-family: var(--vx-font-mono); font-size: 10px; color: var(--vx-text-3); letter-spacing: 0.12em; text-transform: uppercase; }
.vx-stat-card__value { margin-top: 12px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--vx-text); line-height: 1; }
.vx-stat-card__delta { margin-top: 6px; font-family: var(--vx-font-mono); font-size: 11px; color: var(--vx-text-3); }
/* -----------------------------------------------------------
19. TABLES (.miotab DataTables)
----------------------------------------------------------- */
.miotab, table.dataTable, table.miotab, table.tab1 {
width: 100% !important;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
border-collapse: separate; border-spacing: 0;
overflow: hidden;
color: var(--vx-text);
}
.miotab thead th, table.dataTable thead th, table.tab1 thead th {
background: var(--vx-surface-2);
color: var(--vx-text-3);
font-family: var(--vx-font-mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 12px 16px; text-align: left;
border-bottom: 1px solid var(--vx-border);
}
.miotab tbody td, table.dataTable tbody td, table.tab1 tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--vx-border);
font-size: 13px; color: var(--vx-text);
}
.miotab tbody tr:last-child td, table.dataTable tbody tr:last-child td { border-bottom: none; }
.miotab tbody tr:hover td, table.dataTable tbody tr:hover td { background: var(--vx-surface-2); }
table.dataTable.no-footer { border-bottom-color: var(--vx-border); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { height: 32px; font-size: 12px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--vx-text-3); font-size: 12px; padding: 12px 16px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 6px 10px; margin: 0 2px;
border-radius: 6px; border: 1px solid var(--vx-border);
background: var(--vx-surface); color: var(--vx-text-2) !important;
font-family: var(--vx-font-mono); font-size: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--vx-accent) !important; color: #fff !important; border-color: var(--vx-accent) !important;
}
/* Status pills */
.statusbadge, .vx-status-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 8px; border-radius: 999px;
font-family: var(--vx-font-mono); font-size: 10px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
border: 1px solid var(--vx-border);
}
.statusbadge::before, .vx-status-pill::before {
content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor;
}
.statusbadge.active, .statusbadge.success, .vx-status-pill--success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); color: var(--vx-success); }
.statusbadge.warning, .statusbadge.pending, .vx-status-pill--warn { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.32); color: var(--vx-warning); }
.statusbadge.danger, .statusbadge.failed, .statusbadge.expired, .vx-status-pill--danger { background: var(--vx-accent-soft); border-color: var(--vx-accent-border); color: var(--vx-accent); }
/* -----------------------------------------------------------
20. SIGN IN / SIGN UP
----------------------------------------------------------- */
.vx-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.vx-auth__brand {
position: relative; overflow: hidden;
border-right: 1px solid var(--vx-border);
background: linear-gradient(180deg, var(--vx-surface) 0%, var(--vx-bg) 100%);
padding: 48px;
display: flex; flex-direction: column; justify-content: space-between;
}
.vx-auth__brand::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(circle at 30% 50%, black 0%, transparent 75%);
mask-image: radial-gradient(circle at 30% 50%, black 0%, transparent 75%);
opacity: 0.6;
}
.vx-auth__brand > * { position: relative; z-index: 1; }
.vx-auth__form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; }
.vx-auth__form-inner { width: 100%; max-width: 400px; }
.vx-auth__form h1 { font-size: 32px; letter-spacing: -0.025em; margin: 0; }
.vx-auth__sub { color: var(--vx-text-2); font-size: 14px; margin: 8px 0 32px; }
.vx-auth__divider { display: flex; align-items: center; gap: 12px; margin: 28px 0; }
.vx-auth__divider::before, .vx-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--vx-border); }
.vx-auth__divider span { font-family: var(--vx-font-mono); font-size: 10px; color: var(--vx-text-3); letter-spacing: 0.14em; text-transform: uppercase; }
.vx-auth__field { margin-bottom: 14px; }
/* compatibility with existing forms */
.uyeolgirisbg, .signbg { background: var(--vx-bg) !important; }
#Signin_Form, #Signup_Form, #Signforget_Form { padding: 0; }
.notverification { font-size: 12px; color: var(--vx-text-3); margin-top: 16px; }
/* -----------------------------------------------------------
21. PAGINATION
----------------------------------------------------------- */
.pagination, .pagebox {
display: flex; gap: 4px; align-items: center; justify-content: center; padding: 32px 0;
}
.pagination a, .pagination span, .pagebox a, .pagebox span {
padding: 8px 12px; border-radius: 8px;
border: 1px solid var(--vx-border);
background: var(--vx-surface);
color: var(--vx-text-2);
font-family: var(--vx-font-mono); font-size: 12px;
text-decoration: none;
}
.pagination a:hover, .pagebox a:hover { background: var(--vx-surface-2); color: var(--vx-text); }
.pagination .active, .pagebox .active, .pagination span.current { background: var(--vx-accent); border-color: var(--vx-accent); color: #fff !important; }
/* -----------------------------------------------------------
22. KNOWLEDGE BASE / NEWS / ARTICLES
----------------------------------------------------------- */
.kbcategory, .newslist, .articleslist {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.kbitem, .newsitem, .articleitem, .kb-item {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
padding: 24px;
transition: border-color .2s;
}
.kbitem:hover, .newsitem:hover, .articleitem:hover, .kb-item:hover { border-color: var(--vx-border-strong); }
.kbitem h3, .newsitem h3, .articleitem h3, .kb-item h3 { font-size: 18px; margin: 0 0 8px; }
.kbitem p, .newsitem p, .articleitem p, .kb-item p { font-size: 13px; color: var(--vx-text-2); margin: 0; }
/* -----------------------------------------------------------
23. BREADCRUMB / PANEL
----------------------------------------------------------- */
.breadcrumb, .panel-breadcrumb, .vx-breadcrumb {
display: flex; gap: 8px; align-items: center;
font-family: var(--vx-font-mono); font-size: 11px;
color: var(--vx-text-3); letter-spacing: 0.08em; text-transform: uppercase;
padding: 16px 0;
}
.breadcrumb a, .panel-breadcrumb a { color: var(--vx-text-3); }
.breadcrumb a:hover { color: var(--vx-text); }
.breadcrumb .current, .breadcrumb .active { color: var(--vx-accent); }
/* -----------------------------------------------------------
24. CARDS / GENERIC CONTAINERS
----------------------------------------------------------- */
.vx-card, .panel, .card, .padding20, .padding30, .padding40 {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
padding: 24px;
}
.padding30 { padding: 30px; }
.padding40 { padding: 40px; }
/* -----------------------------------------------------------
25. MODALS / iziModal compat
----------------------------------------------------------- */
.iziModal, .modal, .vx-modal {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
color: var(--vx-text);
}
.iziModal-header, .modal-header { background: transparent !important; color: var(--vx-text) !important; border-bottom: 1px solid var(--vx-border) !important; }
.iziModal-overlay { background: rgba(0,0,0,0.72) !important; backdrop-filter: blur(4px); }
/* -----------------------------------------------------------
26. SCROLL-TO-TOP
----------------------------------------------------------- */
.cd-top {
position: fixed; right: 24px; bottom: 24px;
width: 44px; height: 44px;
background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: 999px;
color: var(--vx-text); text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0; opacity: 0; visibility: hidden;
transition: opacity .2s, visibility .2s, background .15s;
z-index: 99;
}
.cd-top::after { content: "↑"; font-size: 18px; line-height: 1; color: var(--vx-text); }
.cd-top.cd-is-visible { opacity: 1; visibility: visible; }
.cd-top:hover { background: var(--vx-accent); border-color: var(--vx-accent); }
.cd-top:hover::after { color: #fff; }
/* -----------------------------------------------------------
27. UTILITY
----------------------------------------------------------- */
.clear { clear: both; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-mono { font-family: var(--vx-font-mono); }
.text-muted { color: var(--vx-text-3); }
.text-accent { color: var(--vx-accent); }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}.mt-6{margin-top:64px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-5{margin-bottom:48px}
.line { height: 1px; background: var(--vx-border); margin: 24px 0; }
.yuzde100{width:100%;} .yuzde70{width:70%;margin:0 auto;} .yuzde50{width:50%;margin:0 auto;} .yuzde30{width:30%;margin:0 auto;}
/* loader */
#wisecp { display: none !important; }
/* legacy compatibility overrides */
.headsabitbg, .domainheadbg, .hostingbg, .sunucubg, .corporatebg,
.muspanelbg, .nedenbizbg, .iletisinheadbg, .sayfaustbg, .seoheadbg, .header-background-404 {
background: var(--vx-bg-grad) !important;
border-bottom: 1px solid var(--vx-border);
}
/* -----------------------------------------------------------
28. RESPONSIVE
----------------------------------------------------------- */
@media (max-width: 1024px) {
.wclientblockscon, #clientAreaIndex-wrapper { grid-template-columns: repeat(2, 1fr); }
.product-group-item { border-right: 1px solid var(--vx-border) !important; }
.product-group-item:nth-child(2n) { border-right: none !important; }
.vx-features { grid-template-columns: repeat(2, 1fr); }
.vx-testimonials { grid-template-columns: 1fr; }
.vx-footer__top { grid-template-columns: repeat(2, 1fr); }
.vx-auth { grid-template-columns: 1fr; }
.vx-auth__brand { display: none; }
.vx-partners { grid-template-columns: repeat(4, 1fr); }
.vx-stats { grid-template-columns: repeat(2, 1fr); }
.ac-dashboard-statistics, .vx-stats-row { grid-template-columns: repeat(2, 1fr); }
#mpanelleft, .mpanelleft, .ac-sidebar { width: 100%; min-height: auto; }
}
@media (max-width: 640px) {
:root { --vx-gutter: 16px; }
.wclientblockscon, #clientAreaIndex-wrapper { grid-template-columns: 1fr; }
.product-group-item { border-right: none !important; }
.vx-features, .vx-stats, .ac-dashboard-statistics, .vx-stats-row { grid-template-columns: 1fr; }
.vx-hero__inner { padding: 64px 16px 48px; }
.vx-header__inner { height: 60px; }
.vx-nav { display: none; }
.vx-domain-search__form, #DomainCheck { flex-direction: column; }
.vx-footer__top { grid-template-columns: 1fr; }
.vx-partners { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================================
VEXORIA — LEGACY OVERRIDES
wisecp.css'in altında çalışır. Classic temadan miras kalan
sınıfları yeniden boyar/yerleştirir. Dark/light modda okunabilirlik
ve tasarım dilinin tüm iç sayfalara yayılması için.
===================================================================== */
/* -------------------------------------------------------------------
1. PADDING WRAPPERS — Classic her yerde .padding20 vs. kullanıyor
------------------------------------------------------------------- */
.padding5 { padding: 5px; }
.padding10 { padding: 10px; }
.padding15 { padding: 15px; }
.padding20 { padding: 20px; }
.padding25 { padding: 25px; }
.padding30 { padding: 30px; }
.padding40 { padding: 40px; }
.padding50 { padding: 50px; }
/* Padding wrapper'ları otomatik olarak kart yapma; biz açıkça istemediğimiz
yerlerde tekrar boyamasın diye background reset'liyoruz */
.sayfacontent, .clean-theme-signinup-con, .affiliate, .affiliate-getstarted {
background: transparent !important;
color: var(--vx-text);
}
/* -------------------------------------------------------------------
2. GENERIC HEADINGS RESET — koyu mode'da görünür kalsın
------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--vx-text); }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { color: var(--vx-text); font-weight: 700; }
.clean-theme-client h1,
.clean-theme-client h2,
.clean-theme-client h3,
.clean-theme-client h4,
.clean-theme-client h5,
.clean-theme-client h6 { color: var(--vx-text); }
/* Generic colored text classes from Classic */
.red, .text-red, .danger-text { color: var(--vx-accent) !important; }
.green, .text-green, .success-text { color: var(--vx-success) !important; }
.gray, .text-gray, .muted { color: var(--vx-text-3) !important; }
.orange, .text-orange { color: var(--vx-warning) !important; }
/* -------------------------------------------------------------------
3. SIGN IN / SIGN UP — auth layout
------------------------------------------------------------------- */
body#clean-theme-client { background: var(--vx-bg) !important; color: var(--vx-text); }
.uyeolgirisbg, .signbg { background: transparent !important; }
#wrapper > .clean-theme-signinup-con,
.clean-theme-signinup-con {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
background: transparent !important;
margin: 48px auto;
max-width: 1100px;
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
overflow: hidden;
}
/* Sol marka tarafı (sign-in iframe gradient olabilir; biz override edelim) */
.clean-theme-signinup-left, .imzabg, .imzabodybg, .signbg {
background: linear-gradient(180deg, var(--vx-surface) 0%, var(--vx-bg) 100%) !important;
border-right: 1px solid var(--vx-border);
padding: 48px !important; color: var(--vx-text);
position: relative; overflow: hidden;
}
.clean-theme-signinup-left::before, .imzabg::before, .imzabodybg::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(circle at 30% 50%, black 0%, transparent 75%);
mask-image: radial-gradient(circle at 30% 50%, black 0%, transparent 75%);
opacity: 0.6;
}
.clean-theme-signinup-left > *, .imzabg > *, .imzabodybg > * { position: relative; z-index: 1; }
.clean-theme-signinup-left h1, .imzabg h1, .imzabodybg h1 { font-size: 36px; letter-spacing: -0.03em; }
.clean-theme-signinup-right {
background: var(--vx-surface);
padding: 0 !important;
display: flex; align-items: center; justify-content: center;
min-height: 480px;
}
.clean-theme-signinup-right > form,
.clean-theme-signinup-right > .padding50 { width: 100%; max-width: 420px; padding: 48px !important; }
.clean-theme-signinup-right-title { margin-bottom: 28px; }
.clean-theme-signinup-right-title h4 {
font-size: 28px; letter-spacing: -0.025em; font-weight: 600;
color: var(--vx-text); margin: 0 0 8px;
}
/* Inputs inside auth forms */
#Signin_Form input[type=text],
#Signin_Form input[type=email],
#Signin_Form input[type=password],
#Signup_Form input[type=text],
#Signup_Form input[type=email],
#Signup_Form input[type=password],
#Signup_Form select,
#Signup_Form textarea,
#Signforget_Form input[type=text],
#Signforget_Form input[type=email] {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
margin-bottom: 12px;
}
#Signin_Form .yuzde100,
#Signup_Form .yuzde100,
#Signforget_Form .yuzde100 { width: 100%; margin: 0 0 4px; }
/* The standard submit button */
.clean-theme-btn,
button.clean-theme-btn,
a.clean-theme-btn {
display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
width: 100%; height: 48px; padding: 0 22px;
background: var(--vx-accent) !important; color: #fff !important;
border: none !important; border-radius: var(--vx-r-md);
font-family: var(--vx-font-sans); font-size: 15px; font-weight: 600; cursor: pointer;
margin-top: 16px;
transition: background .15s;
}
.clean-theme-btn:hover { background: var(--vx-accent-hi) !important; }
.forgotpasslink, .sifreunuttulink {
display: inline-block; margin-top: 12px;
color: var(--vx-accent) !important; font-size: 13px;
text-decoration: none; font-weight: 500;
}
.forgotpasslink:hover, .sifreunuttulink:hover { color: var(--vx-accent-hi) !important; }
/* Social connect strip */
.socialconnect {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 16px 0; margin-bottom: 16px;
border-bottom: 1px solid var(--vx-border);
}
.socialconnect > a, .socialconnect button {
flex: 1; min-width: 120px; height: 40px;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md);
color: var(--vx-text) !important;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-size: 13px; font-weight: 500;
text-decoration: none;
}
.socialconnect > a:hover { background: var(--vx-surface-hi) !important; }
/* Captcha block */
.captcha-content {
margin: 12px 0; padding: 12px;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md);
}
.captchainput { margin-top: 12px; }
/* Custom checkbox / radio */
.checkbox-custom, .radio-custom { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-custom + .checkbox-custom-label,
.radio-custom + .radio-custom-label {
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
font-size: 13px; color: var(--vx-text-2); user-select: none;
margin-right: 12px;
}
.checkbox-custom + .checkbox-custom-label::before,
.radio-custom + .radio-custom-label::before {
content: ""; width: 18px; height: 18px;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border-strong);
border-radius: 4px; flex-shrink: 0;
transition: background .12s, border-color .12s;
}
.radio-custom + .radio-custom-label::before { border-radius: 999px; }
.checkbox-custom:checked + .checkbox-custom-label::before,
.radio-custom:checked + .radio-custom-label::before {
background: var(--vx-accent); border-color: var(--vx-accent);
box-shadow: inset 0 0 0 3px var(--vx-surface);
}
.checkbox-custom:checked + .checkbox-custom-label::before {
background: var(--vx-accent) url("data:image/svg+xml;charset=utf-8,") center/12px no-repeat;
box-shadow: none;
}
.checktext { font-size: 13px; color: var(--vx-text-2); }
/* Form rows (.formcon / .yuzde*) */
.formcon {
display: grid; grid-template-columns: 1fr 2fr; gap: 16px;
align-items: start; padding: 14px 0;
border-bottom: 1px solid var(--vx-border);
}
.formcon:last-child { border-bottom: none; }
.formcon .yuzde30, .formcon .yuzde70 { width: auto !important; float: none !important; }
.formcon .yuzde30 { font-size: 13px; color: var(--vx-text-2); padding-top: 12px; }
.kinfo { font-size: 12px; color: var(--vx-text-3); margin-top: 6px; display: block; line-height: 1.5; }
/* 2FA / location verification modal-style cards */
.verificationcontent {
max-width: 420px; margin: 64px auto;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
padding: 32px !important; text-align: center;
}
.verificationcontent h1 {
font-size: 22px; margin: 0 0 12px;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.verificationcontent h1 i {
font-size: 28px; color: var(--vx-accent);
background: var(--vx-accent-soft);
width: 56px; height: 56px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
margin: 0 auto 8px;
}
.verificationcontent p { color: var(--vx-text-2); font-size: 14px; }
.verificationcontent strong { color: var(--vx-text); font-family: var(--vx-font-mono); letter-spacing: 0.04em; }
.notverification { font-size: 12px; color: var(--vx-text-3); margin-top: 24px; line-height: 1.6; }
.notverification a { color: var(--vx-accent); }
.secureoptions { text-align: left; padding: 16px 0; }
/* -------------------------------------------------------------------
4. KNOWLEDGE BASE
------------------------------------------------------------------- */
.bbankaara {
background: var(--vx-bg-grad);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
padding: 56px 32px !important;
text-align: center; margin: 48px 0 32px;
position: relative; overflow: hidden;
}
.bbankaara::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
opacity: 0.6;
}
.bbankaara > * { position: relative; z-index: 1; }
.bbankaara h3 { font-size: 36px; letter-spacing: -0.03em; margin: 0 0 12px; color: var(--vx-text); font-weight: 600; }
.bbankaara h4 { font-size: 16px; color: var(--vx-text-2); font-weight: 400; margin: 0 0 28px; }
.bbankaara #SearchForm {
display: flex; gap: 8px; max-width: 580px; margin: 0 auto;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg); padding: 6px;
}
.bbankaara #SearchForm input[type=text] {
flex: 1; height: 48px; width: auto !important;
background: transparent !important; border: none !important;
color: var(--vx-text); font-size: 15px; padding: 0 16px;
}
.bbankaara #SearchForm input[type=text]:focus { box-shadow: none !important; }
.bbankaara #SearchForm .lbtn {
height: 48px; padding: 0 24px;
background: var(--vx-accent) !important; color: #fff !important;
border: none !important; border-radius: var(--vx-r-md);
}
/* Section title in kb */
.bbbaslik, .encokokunanbasliklar > h4 {
font-size: 18px; font-weight: 600; margin: 0 0 20px;
display: flex; align-items: center; gap: 12px;
color: var(--vx-text);
}
.encokokunanbasliklar { padding-top: 16px; }
.encokokunanbasliklar h5 {
padding: 14px 0; border-bottom: 1px solid var(--vx-border);
font-size: 14px; font-weight: 500;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.encokokunanbasliklar h5 a { color: var(--vx-text); text-decoration: none; }
.encokokunanbasliklar h5 a:hover { color: var(--vx-accent); }
.encokokunanbasliklar h5 span { font-family: var(--vx-font-mono); font-size: 11px; color: var(--vx-text-3); }
/* Knowledge base category card */
.bbankakonu {
display: block; background: var(--vx-surface);
border: 1px solid var(--vx-border); border-radius: var(--vx-r-lg);
padding: 20px !important; margin: 0 0 12px;
transition: border-color .15s;
}
.bbankakonu:hover { border-color: var(--vx-border-strong); }
.bbankakonu .padding15 { padding: 0; display: flex; gap: 16px; align-items: start; }
.bbankakonu .padding15 > div:first-child {
width: 44px; height: 44px; flex-shrink: 0;
background: var(--vx-surface-2); border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md);
display: inline-flex; align-items: center; justify-content: center;
color: var(--vx-accent);
}
.bbankakonu .padding15 > div:first-child i { font-size: 18px; }
.bbankakonu .padding15 > div:last-child { width: auto !important; float: none !important; flex: 1; margin: 0 !important; }
.bbankakonu h4 { font-size: 15px; margin: 0 0 6px; color: var(--vx-text); }
.bbankakonu h4 strong { color: var(--vx-text); }
/* KB sidebar */
.sayfacontent { padding-top: 0 !important; }
#wrapper > .sidebar, .sayfacontent + .sidebar {
width: 280px; padding: 0 !important;
background: transparent;
}
.sidelinks {
background: var(--vx-surface); border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg); padding: 20px;
}
.sidelinks h4 {
font-family: var(--vx-font-mono); font-size: 11px;
color: var(--vx-text-3); letter-spacing: 0.14em; text-transform: uppercase;
margin: 0 0 16px;
}
.sidelinks > a {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-radius: 6px;
color: var(--vx-text-2); text-decoration: none; font-size: 13px;
transition: background .12s, color .12s;
}
.sidelinks > a:hover { background: var(--vx-surface-2); color: var(--vx-text); }
.sidelinks > a strong { font-family: var(--vx-font-mono); font-size: 11px; color: var(--vx-text-3); }
h4.error {
padding: 32px; text-align: center; color: var(--vx-text-3);
background: var(--vx-surface); border: 1px dashed var(--vx-border);
border-radius: var(--vx-r-lg); margin: 24px 0;
}
/* -------------------------------------------------------------------
5. AFFILIATE DASHBOARD
------------------------------------------------------------------- */
.dashboardboxs {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
margin: 24px 0;
}
.dashboardbox {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 0 !important;
position: relative; min-height: 160px;
color: var(--vx-text) !important;
}
.dashboardbox .padding10 { padding: 24px !important; }
.dashboardbox i {
font-size: 22px !important;
width: 36px; height: 36px;
display: inline-flex !important; align-items: center; justify-content: center;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md);
color: var(--vx-accent) !important;
line-height: 1 !important;
}
.dashboardbox h2 {
font-size: 28px !important; font-weight: 700; letter-spacing: -0.03em;
margin: 16px 0 4px !important; color: var(--vx-text) !important; line-height: 1;
display: flex; align-items: center; gap: 8px;
}
.dashboardbox h4 {
font-family: var(--vx-font-mono) !important; font-size: 11px !important;
color: var(--vx-text-3) !important; letter-spacing: 0.1em;
text-transform: uppercase; font-weight: 500; margin: 0 !important;
}
.dashboardbox .ablokbottom {
margin-top: 16px; padding-top: 12px;
border-top: 1px solid var(--vx-border);
font-size: 12px; color: var(--vx-text-3);
}
.dashboardbox .ablokbottom strong { color: var(--vx-text); font-family: var(--vx-font-mono); }
/* Each colored block — override the original hard hex backgrounds */
.dashboardbox#turuncublok { border-left: 2px solid var(--vx-warning) !important; }
.dashboardbox#turuncublok i { color: var(--vx-warning) !important; background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.32); }
.dashboardbox#yesilblok { border-left: 2px solid var(--vx-success) !important; }
.dashboardbox#yesilblok i { color: var(--vx-success) !important; background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.32); }
.dashboardbox#redblok { border-left: 2px solid var(--vx-accent) !important; }
.dashboardbox#redblok i { color: var(--vx-accent) !important; background: var(--vx-accent-soft); border-color: var(--vx-accent-border); }
.dashboardbox#maviblok { border-left: 2px solid #3B82F6 !important; }
.dashboardbox#maviblok i { color: #3B82F6 !important; background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.32); }
.dashboardbox-info {
display: inline-flex; align-items: center; justify-content: center;
width: 18px !important; height: 18px !important;
background: transparent !important; border: none !important;
color: var(--vx-text-3) !important;
font-size: 12px !important; cursor: help;
vertical-align: middle;
}
.withdrawal-request {
position: absolute; top: 16px; right: 16px;
background: var(--vx-accent) !important; color: #fff !important;
padding: 6px 12px !important; border-radius: 999px !important;
font-size: 11px !important; font-weight: 600 !important;
text-decoration: none; font-family: var(--vx-font-mono); letter-spacing: 0.04em;
}
.withdrawal-request:hover { background: var(--vx-accent-hi) !important; }
.refererurl {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
padding: 28px;
margin: 28px 0;
}
.refererurl h4 { font-size: 18px; margin: 0 0 6px; }
.refererurl h5 { font-size: 13px; color: var(--vx-text-2); font-weight: 400; margin: 0 0 16px; }
.refererurl h2 {
font-family: var(--vx-font-mono); font-size: 16px; font-weight: 500;
background: var(--vx-surface-2); border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md); padding: 12px 16px;
color: var(--vx-accent) !important; word-break: break-all;
margin: 0;
}
.green-info, .red-info {
border-radius: var(--vx-r-lg);
border: 1px solid var(--vx-border);
display: flex; gap: 16px; align-items: start;
background: var(--vx-surface);
margin: 16px 0;
}
.green-info .padding20, .red-info .padding20 { padding: 20px; display: flex; gap: 16px; align-items: start; width: 100%; }
.green-info { border-left: 3px solid var(--vx-success); }
.green-info i { color: var(--vx-success); }
.red-info { border-left: 3px solid var(--vx-accent); }
.red-info i { color: var(--vx-accent); }
.green-info i, .red-info i { font-size: 22px; flex-shrink: 0; }
.green-info p, .red-info p, .balanceinfo p { margin: 0; font-size: 14px; color: var(--vx-text-2); }
.balanceinfo h5 { margin: 0 0 8px; color: var(--vx-text); }
.commission-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.commission-rates-block {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg); padding: 0;
}
.commission-rates-block .padding20 { padding: 20px !important; }
.commission-rates-block h5 { font-size: 14px; color: var(--vx-text); margin: 0 0 12px; }
#show_product_commission { font-size: 18px; color: var(--vx-accent); font-family: var(--vx-font-mono); }
.affilia-tablelist, .affilia-tablelist.dataTables_wrapper { background: transparent !important; margin-top: 24px; }
/* Tabs (.tab .tablinks .tabcontent) */
ul.tab {
list-style: none; padding: 0; margin: 0 0 16px;
display: flex; gap: 4px;
border-bottom: 1px solid var(--vx-border);
}
ul.tab li { display: inline-flex; }
ul.tab .tablinks {
display: inline-flex; align-items: center; gap: 8px;
height: 36px; padding: 0 14px;
background: transparent; border: none;
color: var(--vx-text-3) !important; text-decoration: none;
font-size: 13px; font-weight: 500;
position: relative;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
ul.tab .tablinks:hover { color: var(--vx-text) !important; }
ul.tab .tablinks.active {
color: var(--vx-text) !important;
border-bottom-color: var(--vx-accent);
}
.tabcontent { padding: 16px 0; }
/* Listing status (affiliate transaction status) */
.listingstatus {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-family: var(--vx-font-mono);
color: var(--vx-text-2); text-transform: uppercase; letter-spacing: 0.04em;
}
/* -------------------------------------------------------------------
6. PANEL TITLE / BREADCRUMB
------------------------------------------------------------------- */
.mpaneltitle {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 0 0 24px; margin-bottom: 24px;
border-bottom: 1px solid var(--vx-border);
flex-wrap: wrap;
}
.mpaneltitle h4 {
font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
margin: 0; display: flex; align-items: center; gap: 12px;
}
.mpaneltitle h4 strong { color: var(--vx-text); font-weight: 600; }
.mpaneltitle h4 i { color: var(--vx-accent); font-size: 18px; }
.mpaneltitle .sayfayolu { width: 100%; }
.mpaneltitle a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--vx-text-2); text-decoration: none;
padding: 6px 10px; border-radius: 6px;
}
.mpaneltitle a:hover { background: var(--vx-surface-2); color: var(--vx-text); }
.mpaneltitle a i { color: var(--vx-text-3); font-size: 12px; }
.sayfayolu {
padding: 12px 0; font-family: var(--vx-font-mono); font-size: 11px;
color: var(--vx-text-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.sayfayolu a { color: var(--vx-text-3); text-decoration: none; }
.sayfayolu a:hover { color: var(--vx-text); }
.clearmob, .clear { clear: both; }
/* -------------------------------------------------------------------
7. TOOLTIPS
------------------------------------------------------------------- */
[data-tooltip] {
position: relative; cursor: help;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; left: 50%; transform: translateX(-50%) translateY(-4px);
bottom: calc(100% + 6px);
padding: 6px 10px; border-radius: 6px;
background: var(--vx-surface-hi); color: var(--vx-text);
border: 1px solid var(--vx-border);
font-size: 11px; font-family: var(--vx-font-mono); letter-spacing: 0.04em;
white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .15s, transform .15s;
z-index: 60;
max-width: 280px; white-space: normal; text-align: center;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.tooltip-top[data-tooltip]::after { bottom: calc(100% + 6px); top: auto; }
.tooltip-bottom[data-tooltip]::after { top: calc(100% + 6px); bottom: auto; transform: translateX(-50%) translateY(4px); }
.tooltip-bottom[data-tooltip]:hover::after { transform: translateX(-50%) translateY(0); }
.tooltip-right[data-tooltip]::after { left: calc(100% + 6px); top: 50%; bottom: auto; transform: translate(-4px,-50%); white-space: nowrap; }
.tooltip-right[data-tooltip]:hover::after { transform: translate(0,-50%); }
/* -------------------------------------------------------------------
8. GENERIC PANEL CARDS / WRAPPERS
------------------------------------------------------------------- */
.mpanelrightcon { background: transparent !important; padding: 32px 0 64px; }
.mpaneltitle + div, .sayfacontent > .padding20 {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
}
.sayfacontent > .padding20 { padding: 28px !important; }
/* Generic boxes used across panel pages */
.themeboxs, .dashboxs {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
}
/* -------------------------------------------------------------------
9. MOBILE / RESPONSIVE
------------------------------------------------------------------- */
@media (max-width: 980px) {
.clean-theme-signinup-con { grid-template-columns: 1fr; }
.clean-theme-signinup-left, .imzabg { display: none; }
.dashboardboxs { grid-template-columns: repeat(2, 1fr); }
.commission-rates { grid-template-columns: 1fr; }
.formcon { grid-template-columns: 1fr; }
.sayfacontent + .sidebar, #wrapper > .sidebar { width: 100%; margin-top: 24px; }
}
@media (max-width: 640px) {
.dashboardboxs { grid-template-columns: 1fr; }
.bbankaara { padding: 32px 16px !important; }
.bbankaara h3 { font-size: 24px; }
.clean-theme-signinup-right > form,
.clean-theme-signinup-right > .padding50 { padding: 32px 20px !important; }
}
/* -------------------------------------------------------------------
10. SCROLLBAR + GENERIC SAFETY OVERRIDES FOR DARK MODE
------------------------------------------------------------------- */
/* Anything hard-set white from Classic */
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#ffffff"],
[style*="background: #ffffff"] {
background: var(--vx-surface) !important;
color: var(--vx-text);
}
/* Headings inside table thead with hard background */
[style*="background:#ebebeb"], [style*="background: #ebebeb"],
[style*="background:#eeeeee"], [style*="background: #eeeeee"],
[style*="background:#f5f5f5"], [style*="background: #f5f5f5"] {
background: var(--vx-surface-2) !important;
color: var(--vx-text-2);
}
/* Anything hard black text on now-dark bg */
body[data-vx-mode="dark"] [style*="color:#000"],
body[data-vx-mode="dark"] [style*="color: #000"],
body[data-vx-mode="dark"] [style*="color:#333"],
body[data-vx-mode="dark"] [style*="color: #333"] {
color: var(--vx-text) !important;
}
/* Pull
/ .line elements into theme */
hr, .line { border: none; border-top: 1px solid var(--vx-border); height: 0; margin: 24px 0; }
/* Captcha images stay sharp */
.captcha-content img { max-width: 100%; border-radius: 6px; }
/* General table reset for tables without .miotab */
table { background: transparent; color: var(--vx-text); }
th[align], td[align] { vertical-align: middle; }
/* Force form titles inside Classic auth to be visible */
.clean-theme-signup-box {
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md);
padding: 16px; margin: 0 0 16px;
}
.clean-theme-signup-box-title {
font-family: var(--vx-font-mono); font-size: 11px;
color: var(--vx-text-3); letter-spacing: 0.12em;
text-transform: uppercase; margin-bottom: 12px;
}
/* Themepreview ribbon */
.themepreview {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
background: var(--vx-accent); color: #fff;
padding: 8px 16px; border-radius: 999px;
font-family: var(--vx-font-mono); font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; z-index: 100;
display: flex; align-items: center; gap: 12px;
box-shadow: var(--vx-shadow-md);
}
.themepreview h5 { margin: 0; color: #fff; font-weight: 500; }
.themepreview .lbtn {
background: rgba(255,255,255,0.18) !important; color: #fff !important;
border: 1px solid rgba(255,255,255,0.3) !important;
padding: 4px 10px !important; height: auto !important; font-size: 10px !important;
}
/* The mobile menu */
#mobmenu {
background: var(--vx-bg); color: var(--vx-text);
border-bottom: 1px solid var(--vx-border);
padding: 16px 24px;
}
#mobmenu .menuAc {
background: var(--vx-surface-2); border: 1px solid var(--vx-border);
color: var(--vx-text); width: 36px; height: 36px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
}
#mobmenu_wrap ul { list-style: none; padding: 0; margin: 16px 0 0; }
#mobmenu_wrap ul li a {
display: block; padding: 12px 0; color: var(--vx-text);
text-decoration: none; border-bottom: 1px solid var(--vx-border);
}
#mobmenu_wrap ul .inner { padding-left: 16px; }
/* Pulsate animation (used by withdrawal-request) */
@keyframes vx-pulsate-fwd {
0%,100% { box-shadow: 0 0 0 0 var(--vx-accent-soft); }
50% { box-shadow: 0 0 0 8px transparent; }
}
.pulsate-fwd { animation: vx-pulsate-fwd 2s ease-out infinite; }
/* -------------------------------------------------------------------
11. SAFETY OVERRIDES FOR INLINE STYLES THAT CLASSIC HARD-CODES
------------------------------------------------------------------- */
/* Classic frequently sets inline backgrounds (white, gray) on panel
content blocks. Force them into the dark theme. */
[bgcolor], [bgcolor=""] { background: var(--vx-surface) !important; color: var(--vx-text); }
/* Tables in light mode should stay light. Force-reset dark colors there. */
body[data-vx-mode="light"] [style*="color: #fff"],
body[data-vx-mode="light"] [style*="color:#fff"] {
color: var(--vx-text) !important;
}
/* Brand panel inside sign-in must render its text */
.clean-theme-signinup-left h1,
.clean-theme-signinup-left h2,
.clean-theme-signinup-left p,
.clean-theme-signinup-left span {
color: var(--vx-text) !important;
position: relative; z-index: 2;
}
.clean-theme-signinup-left img { position: relative; z-index: 2; max-width: 100%; }
/* Notification panel popover (.wclientnotification) needs solid bg in dark */
.wclientnotification, .wnotifitilist, .nonotification {
background: var(--vx-surface) !important; color: var(--vx-text) !important;
}
/* iziModal content area */
.iziModal-content { background: var(--vx-surface) !important; color: var(--vx-text) !important; }
/* Modal footer / button rows */
.iziModal-buttons, .modal-footer {
background: var(--vx-surface-2) !important;
border-top: 1px solid var(--vx-border) !important;
}
/* Tabs inside iziModal */
.miotabs { background: transparent; }
/* Sign-up box title (Classic uses these as section dividers) */
.clean-theme-signup-box,
.clean-theme-signup-row {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
}
/* Form fields in the sign-up step containers */
.clean-theme-signup-row input,
.clean-theme-signup-row select,
.clean-theme-signup-row textarea,
.clean-theme-signup-box input,
.clean-theme-signup-box select,
.clean-theme-signup-box textarea {
background: var(--vx-surface) !important;
border-color: var(--vx-border) !important;
color: var(--vx-text) !important;
}
/* Currency / amount displays */
.gerceltutar, .indirimstr, .promostr, .totalprice {
color: var(--vx-accent) !important; font-weight: 600;
}
/* Generic "info" / "alert" boxes Classic uses everywhere */
.alert, .infoblock, .warningblock, .errorblock, .successblock,
.cumblok-info, .cumblok-warning, .cumblok-error, .cumblok-success {
padding: 14px 18px; border-radius: var(--vx-r-md);
border: 1px solid var(--vx-border);
background: var(--vx-surface);
color: var(--vx-text-2);
margin: 12px 0;
display: flex; gap: 12px; align-items: start;
}
.alert i, .infoblock i, .warningblock i, .errorblock i, .successblock i { flex-shrink: 0; margin-top: 2px; }
.alert.info, .alert-info, .infoblock, .cumblok-info {
border-left: 3px solid #3B82F6; background: rgba(59,130,246,0.04);
}
.alert.success, .alert-success, .successblock, .cumblok-success {
border-left: 3px solid var(--vx-success); background: rgba(34,197,94,0.04);
}
.alert.warning, .alert-warning, .warningblock, .cumblok-warning {
border-left: 3px solid var(--vx-warning); background: rgba(234,179,8,0.04);
}
.alert.error, .alert.danger, .alert-error, .errorblock, .cumblok-error {
border-left: 3px solid var(--vx-accent); background: var(--vx-accent-soft);
}
/* Toastr / notification toasts (used by WiseCP) */
.toast { background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; color: var(--vx-text) !important; box-shadow: var(--vx-shadow-md) !important; }
.toast-success { border-left: 3px solid var(--vx-success) !important; }
.toast-error { border-left: 3px solid var(--vx-accent) !important; }
.toast-warning { border-left: 3px solid var(--vx-warning) !important; }
.toast-info { border-left: 3px solid #3B82F6 !important; }
/* "View as user" themepreview ribbon */
.themepreview { z-index: 100; }
/* News & article cards on home & subpages */
.haberlist, .makalelist, .destekreklamlist {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 24px !important;
margin: 0 0 16px;
}
.haberlist h4, .makalelist h4 { font-size: 16px; color: var(--vx-text); }
.haberlist p, .makalelist p { color: var(--vx-text-2); font-size: 13px; }
.haberlist h5, .makalelist h5 { font-family: var(--vx-font-mono); font-size: 11px; color: var(--vx-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
/* Domain check result page */
.domainsonuc {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
padding: 24px; margin: 16px 0;
}
.domainavailable, .alanaccess { color: var(--vx-success); font-weight: 600; }
.domainunavailable, .alandeny { color: var(--vx-accent); font-weight: 600; }
/* Service detail page action toolbar */
.bservicetabs, .productpaneltabs {
display: flex; gap: 4px; padding: 4px;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-md);
margin: 0 0 16px; flex-wrap: wrap;
}
.bservicetabs a, .productpaneltabs a {
padding: 8px 14px; border-radius: 6px;
font-size: 13px; color: var(--vx-text-2); text-decoration: none;
font-weight: 500;
}
.bservicetabs a:hover, .productpaneltabs a:hover { background: var(--vx-surface); color: var(--vx-text); }
.bservicetabs a.active, .productpaneltabs a.active { background: var(--vx-accent); color: #fff; }
/* Empty-state illustrations */
.empty, .nothing-here, .noresult {
text-align: center; padding: 64px 24px;
background: var(--vx-surface);
border: 1px dashed var(--vx-border);
border-radius: var(--vx-r-lg);
color: var(--vx-text-3);
}
.empty i, .nothing-here i, .noresult i {
font-size: 36px; margin-bottom: 16px;
color: var(--vx-text-4); display: block;
}
/* iziModal default close button — keep visible */
.iziModal-button-close {
background: transparent !important;
color: var(--vx-text-2) !important;
opacity: 0.7;
}
.iziModal-button-close:hover { opacity: 1; color: var(--vx-text) !important; }
/* =====================================================================
VEXORIA — HARD OVERRIDES
This sheet wins. Loaded LAST and uses !important to defeat
theme-default.css + plugin CSS that ships with WiseCP core.
===================================================================== */
/* ---------- 1. BODY + WRAPPERS ---------- */
html, body {
background: var(--vx-bg) !important;
color: var(--vx-text) !important;
}
body, body * { box-sizing: border-box; }
#bigcontent, #wrapper, .wrapper, .icerikbg, .midnavbg, .icbg,
.content, .sayfacontent, .sayfacontentin {
background: transparent !important;
}
.headsabitbg, .domainheadbg, .hostingbg, .sunucubg, .corporatebg,
.muspanelbg, .nedenbizbg, .iletisinheadbg, .sayfaustbg, .seoheadbg,
.header-background-404, .anasayfabg, .basket-area, .checkout-area {
background: var(--vx-bg-grad) !important;
color: var(--vx-text) !important;
border-bottom: 1px solid var(--vx-border);
}
/* All "big content" wrappers from Classic */
.wclientblockscon {
max-width: var(--vx-container) !important;
margin: 32px auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
float: none !important;
width: auto !important;
display: block !important;
}
/* Homepage product grid: 4-col grid ONLY when contains .product-group-item children */
.wclientblockscon:has(> .product-group-item) {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
overflow: hidden !important;
margin: 64px auto !important;
}
/* Dashboard layout: each .moderncliendblock takes full width (stacked) */
.wclientblockscon > .moderncliendblock {
display: block !important;
width: 100% !important;
margin: 0 0 16px !important;
float: none !important;
}
.product-group-item {
float: none !important;
width: auto !important;
height: auto !important;
min-height: 220px !important;
margin: 0 !important;
padding: 32px 28px !important;
background: transparent !important;
border: none !important;
border-right: 1px solid var(--vx-border) !important;
border-bottom: 1px solid var(--vx-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
text-align: left !important;
transition: background .2s ease !important;
}
.product-group-item:nth-child(4n) { border-right: none !important; }
.product-group-item:hover { background: var(--vx-surface-2) !important; }
.product-group-item > a {
display: flex !important; flex-direction: column !important;
height: 100% !important;
color: var(--vx-text) !important; text-decoration: none !important;
background: transparent !important;
}
.product-group-item span {
display: flex !important; align-items: center !important; gap: 12px !important;
font-size: 20px !important; font-weight: 600 !important;
letter-spacing: -0.02em !important;
color: var(--vx-text) !important;
margin: 0 0 12px !important;
text-align: left !important;
white-space: normal !important;
width: auto !important;
flex-direction: row !important;
}
.product-group-item span i,
.product-group-item span img.product-group-icon {
width: 36px !important; height: 36px !important;
display: inline-flex !important; align-items: center; justify-content: center;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 8px !important;
font-size: 16px !important; line-height: 1 !important;
color: var(--vx-text) !important;
transition: color .2s ease;
margin: 0 !important; padding: 0 !important;
flex-shrink: 0;
}
.product-group-item:hover span i { color: var(--vx-accent) !important; }
.product-group-item p, .product-group-item-desc {
color: var(--vx-text-3) !important;
font-size: 13px !important; line-height: 1.5 !important;
margin: 0 0 20px !important;
text-align: left !important;
}
.product-group-item br { display: none; }
/* ---------- 2. CUSTOMER PANEL DASHBOARD STATS ---------- */
/* Actual Classic markup: .muspanelbloks > .mpanelblok#green|blue|red|gray > > .mpanelblokicon + h1 + h2 + .mblokbtn */
.muspanelbloks {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
margin: 24px 0 !important;
float: none !important;
width: auto !important;
background: transparent !important;
}
.muspanelbloks::after { display: none !important; }
.muspanelbloks .mpanelblok {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
min-height: 180px !important;
float: none !important;
text-align: left !important;
color: var(--vx-text) !important;
position: relative !important;
overflow: hidden !important;
display: flex !important; flex-direction: column !important;
}
/* Color accent bar on left edge per status block */
.muspanelbloks .mpanelblok#green { border-left: 2px solid var(--vx-success) !important; }
.muspanelbloks .mpanelblok#blue { border-left: 2px solid #3B82F6 !important; }
.muspanelbloks .mpanelblok#red { border-left: 2px solid var(--vx-accent) !important; }
.muspanelbloks .mpanelblok#gray { border-left: 2px solid var(--vx-text-3) !important; }
.muspanelbloks .mpanelblok > a {
display: flex !important; flex-direction: column !important; flex: 1 !important;
padding: 24px !important;
text-decoration: none !important;
color: var(--vx-text) !important;
background: transparent !important;
}
.muspanelbloks .mpanelblokicon {
width: 36px !important; height: 36px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
margin: 0 0 16px !important;
padding: 0 !important;
float: none !important;
}
.muspanelbloks .mpanelblokicon i {
font-size: 16px !important; line-height: 1 !important;
margin: 0 !important;
}
.muspanelbloks .mpanelblok#green .mpanelblokicon i { color: var(--vx-success) !important; }
.muspanelbloks .mpanelblok#blue .mpanelblokicon i { color: #3B82F6 !important; }
.muspanelbloks .mpanelblok#red .mpanelblokicon i { color: var(--vx-accent) !important; }
.muspanelbloks .mpanelblok#gray .mpanelblokicon i { color: var(--vx-text-2) !important; }
.muspanelbloks .mpanelblok h1 {
font-size: 36px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
color: var(--vx-text) !important;
margin: 0 0 4px !important;
line-height: 1 !important;
text-align: left !important;
padding: 0 !important;
display: block !important;
border: none !important;
background: transparent !important;
}
.muspanelbloks .mpanelblok h2 {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
margin: 0 0 16px !important;
text-align: left !important;
padding: 0 !important;
display: block !important;
border: none !important;
background: transparent !important;
}
.muspanelbloks .mblokbtn {
margin-top: auto !important;
padding: 0 !important;
background: transparent !important;
border-top: 1px solid var(--vx-border) !important;
margin: 16px -24px -24px !important;
}
.muspanelbloks .mblokbtn .padding10 {
padding: 12px 24px !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-accent) !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
display: flex !important; align-items: center !important; gap: 6px !important;
}
.muspanelbloks .mblokbtn .padding10::after {
content: "\2192" !important; /* arrow */
margin-left: auto !important;
color: var(--vx-accent);
}
.muspanelbloks .mblokbtn:hover .padding10 { color: var(--vx-accent-hi) !important; }
/* Dashboard side blocks (welcome, balance) */
.dashboardleftcon, .dashboardleftblock, .dashboard-left,
.ac-dashboard-domain-panel, .dashboard-news {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 20px !important;
margin-bottom: 16px !important;
color: var(--vx-text) !important;
}
.dashboardleftcon h4, .dashboardleftblock h4 {
font-size: 14px !important; color: var(--vx-text) !important;
margin: 0 0 8px !important;
}
.dashboardleftcon p, .dashboardleftblock p {
color: var(--vx-text-2) !important; font-size: 13px !important;
}
.musteribilgisi { padding: 0 !important; background: transparent !important; }
.musteribilgisi h4 { font-size: 15px !important; color: var(--vx-text) !important; }
/* Domain check widget on dashboard */
.alanadisorgu {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 24px !important;
margin: 24px 0 !important;
}
.alanadisorgu h1 {
font-size: 20px !important; font-weight: 600 !important;
color: var(--vx-text) !important;
margin: 0 0 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.3 !important;
}
.alanadisorgu form, #checkForm {
display: flex !important; gap: 8px !important;
align-items: stretch !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
padding: 6px !important;
}
.alanadisorgu input[type=text], #checkForm input[type=text] {
flex: 1 !important;
background: transparent !important;
border: none !important;
color: var(--vx-text) !important;
height: 44px !important;
margin: 0 !important;
padding: 0 14px !important;
font-size: 14px !important;
width: auto !important;
}
.alanadisorgu .gonderbtn, #checkForm .gonderbtn, #checkButton {
height: 44px !important;
padding: 0 20px !important;
border-radius: var(--vx-r-md) !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
white-space: nowrap !important;
margin: 0 !important;
}
.alanadisorgu .amount_spot_view {
color: var(--vx-accent) !important;
font-weight: 600 !important;
font-family: var(--vx-font-mono);
}
/* ---------- 3. KNOWLEDGEBASE ---------- */
.bbankaara, .kb-search-area, .knowledgebase-header {
background: var(--vx-bg-grad) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
padding: 56px 32px !important;
text-align: center !important;
margin: 48px 0 32px !important;
color: var(--vx-text) !important;
}
.bbankaara h3, .kb-search-area h3 {
font-size: 36px !important;
letter-spacing: -0.03em !important;
margin: 0 0 12px !important;
color: var(--vx-text) !important;
font-weight: 600 !important;
}
.bbankaara h4, .kb-search-area h4 {
font-size: 16px !important;
color: var(--vx-text-2) !important;
font-weight: 400 !important;
margin: 0 0 28px !important;
}
.bbankaara form, .bbankaara #SearchForm,
.kb-search-area form {
display: flex !important; gap: 8px !important;
max-width: 640px !important; margin: 0 auto !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 6px !important;
}
.bbankaara form input[type=text],
.bbankaara #SearchForm input[type=text],
.kb-search-area input[type=text] {
flex: 1 !important;
height: 48px !important;
background: transparent !important;
border: none !important;
color: var(--vx-text) !important;
font-size: 15px !important;
padding: 0 16px !important;
width: auto !important;
margin: 0 !important;
}
.bbankaara form input:focus { box-shadow: none !important; }
.bbankaara form .lbtn, .bbankaara form .gonderbtn,
.bbankaara form a, .bbankaara form button,
.bbankaara form input[type=submit], .kb-search-area button {
height: 48px !important;
width: 48px !important;
padding: 0 !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--vx-r-md) !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
font-size: 14px !important;
}
/* KB main content area + sidebar columns
Actual structure: #wrapper > .sayfacontent (content) + .sidebar (right) */
#wrapper {
display: block !important;
max-width: var(--vx-container) !important;
margin: 0 auto !important;
padding: 0 var(--vx-gutter) !important;
}
/* When sayfacontent + sidebar both exist (KB layout), grid them */
#wrapper:has(> .sidebar) {
display: grid !important;
grid-template-columns: 1fr 280px !important;
gap: 32px !important;
padding-top: 32px !important;
padding-bottom: 64px !important;
}
#wrapper > .sayfacontent {
background: transparent !important;
padding: 0 !important;
min-width: 0 !important;
}
#wrapper > .sayfacontent > .padding20 {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
#wrapper > .sidebar {
background: transparent !important;
padding: 0 !important;
float: none !important;
width: 100% !important;
}
/* KB topic listing — "En Popüler Başlıklar" section */
.encokokunanbasliklar {
padding: 0 !important;
background: transparent !important;
margin: 0 0 24px !important;
}
.encokokunanbasliklar h4.bbbaslik, .encokokunanbasliklar > h4 {
font-size: 18px !important; font-weight: 600 !important;
color: var(--vx-text) !important;
margin: 0 0 16px !important;
padding: 0 !important;
background: transparent !important;
display: flex !important; align-items: center !important; gap: 12px !important;
border: none !important;
}
.encokokunanbasliklar h4.bbbaslik strong { color: var(--vx-text) !important; }
.encokokunanbasliklar h5 {
display: flex !important; align-items: center !important; justify-content: space-between !important;
padding: 14px 16px !important;
margin: 0 !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-top: none !important;
font-size: 14px !important; font-weight: 500 !important;
color: var(--vx-text-2) !important;
flex-wrap: wrap;
gap: 8px;
}
.encokokunanbasliklar h5:first-of-type {
border-top: 1px solid var(--vx-border) !important;
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
}
.encokokunanbasliklar h5:last-of-type {
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
.encokokunanbasliklar h5 a {
color: var(--vx-text) !important; text-decoration: none !important;
font-size: 14px !important; font-weight: 500 !important;
display: inline-flex !important; align-items: center !important; gap: 8px !important;
flex: 1 !important;
}
.encokokunanbasliklar h5 a:hover { color: var(--vx-accent) !important; }
.encokokunanbasliklar h5 a i { color: var(--vx-text-3) !important; font-size: 11px !important; }
.encokokunanbasliklar h5 span {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
white-space: nowrap;
}
/* Category cards inside KB body (.bbankakonu) */
a > .bbankakonu, .bbankakonu {
display: block !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 0 !important;
margin: 0 0 12px !important;
transition: border-color .15s, transform .15s !important;
}
.bbankakonu:hover { border-color: var(--vx-border-strong) !important; }
.bbankakonu .padding15 {
display: flex !important;
gap: 16px !important;
align-items: start !important;
padding: 20px !important;
}
.bbankakonu .padding15 > div:first-child {
width: 44px !important; height: 44px !important;
flex-shrink: 0 !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
color: var(--vx-accent) !important;
margin: 0 !important; padding: 0 !important;
float: none !important;
}
.bbankakonu .padding15 > div:first-child i { font-size: 18px !important; }
.bbankakonu .padding15 > div:last-child,
.bbankakonu .padding15 > div[style*="float:right"] {
width: auto !important;
float: none !important;
margin: 0 !important;
flex: 1 !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
.bbankakonu h4 {
font-size: 15px !important;
margin: 0 0 6px !important;
color: var(--vx-text) !important;
font-weight: 600 !important;
}
.bbankakonu h4 strong { color: var(--vx-text) !important; }
a:hover .bbankakonu h4 { color: var(--vx-accent) !important; }
/* KB sidebar (.sidelinks) — markup: label
Title (0) */
.sidebar {
background: transparent !important;
padding: 0 !important;
}
.sidelinks {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 16px !important;
margin: 0 0 16px !important;
float: none !important;
width: auto !important;
}
.sidelinks h4 {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
margin: 8px 8px 12px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
display: block !important;
}
.sidelinks > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 12px !important;
border-radius: 6px !important;
color: var(--vx-text-2) !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 500 !important;
background: transparent !important;
border: none !important;
margin: 1px 0 !important;
float: none !important;
width: auto !important;
}
.sidelinks > a:hover { background: var(--vx-surface-2) !important; color: var(--vx-text) !important; }
.sidelinks > a > span {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 !important;
color: inherit !important;
font-size: inherit !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
}
.sidelinks > a strong {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
font-weight: 500 !important;
padding: 1px 6px !important;
border-radius: 999px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
margin-left: auto !important;
}
/* ---------- 4. INPUTS / SELECTS / TEXTAREAS — force dark ---------- */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=url], input[type=search],
select, textarea {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
border-radius: var(--vx-r-md) !important;
}
input::placeholder, textarea::placeholder { color: var(--vx-text-4) !important; }
select option { background: var(--vx-surface-2) !important; color: var(--vx-text); }
/* Select2 widget (used heavily by WiseCP) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
height: 44px !important;
color: var(--vx-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--vx-text) !important;
line-height: 42px !important;
padding-left: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--vx-text-3) transparent transparent transparent !important;
}
.select2-dropdown {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
}
.select2-results__option {
color: var(--vx-text) !important;
padding: 10px 14px !important;
}
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
background: var(--vx-accent) !important; color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
}
/* ---------- 5. AFFILIATE PAGE FIX ---------- */
.green-info, .red-info, .balanceinfo {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
border-radius: var(--vx-r-lg) !important;
margin: 16px 0 !important;
}
.green-info { border-left: 3px solid var(--vx-success) !important; }
.red-info { border-left: 3px solid var(--vx-accent) !important; }
.balanceinfo { border-left: 3px solid var(--vx-warning) !important; }
.green-info .padding20, .red-info .padding20, .balanceinfo .padding20 {
display: flex !important; gap: 16px !important;
align-items: start !important;
padding: 20px !important;
}
.green-info h5, .red-info h5, .balanceinfo h5 {
color: var(--vx-text) !important;
font-size: 16px !important;
margin: 0 0 8px !important;
font-weight: 600 !important;
}
.green-info p, .red-info p, .balanceinfo p {
color: var(--vx-text-2) !important;
font-size: 14px !important;
margin: 0 !important;
line-height: 1.55;
}
.green-info i, .red-info i, .balanceinfo i {
font-size: 22px !important;
flex-shrink: 0;
margin-top: 2px;
}
.green-info i { color: var(--vx-success) !important; }
.red-info i { color: var(--vx-accent) !important; }
.balanceinfo i { color: var(--vx-warning) !important; }
/* Affiliate "Koşullar" list */
.padding20 ul, .sayfacontent ul:not(.tab):not(.vx-nav):not(.vx-submenu):not(.inner) {
list-style: disc !important;
padding-left: 24px !important;
margin: 16px 0 !important;
color: var(--vx-text-2);
}
.padding20 ul li, .sayfacontent ul:not(.tab):not(.vx-nav):not(.vx-submenu):not(.inner) li {
padding: 6px 0 !important;
color: var(--vx-text-2) !important;
font-size: 14px !important;
line-height: 1.55 !important;
border: none !important;
}
.padding20 ul li strong, .sayfacontent ul li strong { color: var(--vx-text) !important; }
/* Commission rate blocks */
.commission-rates-block {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
text-align: center !important;
}
.commission-rates-block h5 {
font-size: 16px !important;
color: var(--vx-text) !important;
font-weight: 600 !important;
margin: 16px 0 12px !important;
}
.commission-rates-block .padding20 { padding: 24px !important; }
.commission-rates-block hr {
border-top: 1px solid var(--vx-border) !important;
margin: 16px 0 !important;
}
#show_product_commission, .commission-rate-value {
font-size: 18px !important;
color: var(--vx-accent) !important;
font-weight: 600 !important;
}
.commission-rates-block select {
margin: 12px auto !important;
max-width: 320px !important;
display: block !important;
}
/* Breadcrumb */
.sayfayolu, .yolcrumb, .breadcrumb {
padding: 16px 0 !important;
margin: 0 0 16px !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--vx-text-3) !important;
background: transparent !important;
}
.sayfayolu a, .yolcrumb a {
color: var(--vx-text-3) !important;
text-decoration: none !important;
}
.sayfayolu a:hover, .yolcrumb a:hover { color: var(--vx-text) !important; }
.sayfayolu .active, .sayfayolu .current { color: var(--vx-accent) !important; }
.sayfayolu i { margin: 0 6px; color: var(--vx-text-4); font-size: 9px; }
/* ---------- 6. RICH-TEXT CONTENT WRAPPERS ---------- */
/* Generic content blocks Classic uses */
.content-detail, .article-detail, .news-detail, .page-detail,
.tab-content, .miotabs .tab-content, .icerikici, .pagecontent {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 32px !important;
margin: 16px 0 !important;
color: var(--vx-text-2) !important;
line-height: 1.7 !important;
}
.content-detail h1, .content-detail h2, .content-detail h3,
.article-detail h1, .article-detail h2, .article-detail h3,
.news-detail h1, .news-detail h2, .news-detail h3 {
color: var(--vx-text) !important;
margin-top: 1.5em !important;
}
.content-detail p, .article-detail p, .news-detail p { color: var(--vx-text-2) !important; }
.content-detail a, .article-detail a, .news-detail a { color: var(--vx-accent) !important; }
/* Inline code */
code:not(pre code) {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-accent) !important;
padding: 2px 6px;
border-radius: 4px;
font-family: var(--vx-font-mono) !important;
font-size: 0.9em;
}
pre {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
padding: 16px !important;
overflow-x: auto;
}
/* ---------- 7. FORCE TYPO INHERIT WHERE THEME-DEFAULT BLEW IT AWAY ---------- */
.sayfacontent *, .mpanelrightcon *, .ac-master-content *,
.icerikbg *, #bigcontent * {
font-family: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, span, a, div, button, input, select, textarea {
font-family: var(--vx-font-sans);
}
.mono, code, pre, .text-mono, [class*="font-mono"] { font-family: var(--vx-font-mono); }
/* Headings — make sure they always render in theme text color */
.sayfacontent h1, .sayfacontent h2, .sayfacontent h3,
.sayfacontent h4, .sayfacontent h5, .sayfacontent h6,
.mpanelrightcon h1, .mpanelrightcon h2, .mpanelrightcon h3,
.mpanelrightcon h4, .mpanelrightcon h5, .mpanelrightcon h6 {
color: var(--vx-text) !important;
}
/* Force common Classic class colors */
.kvurgu, .red-text, .text-danger { color: var(--vx-accent) !important; }
.gvurgu, .green-text, .text-success { color: var(--vx-success) !important; }
/* ---------- 8. CLASSIC PADDING WRAPPERS ---------- */
/* They should NOT auto-apply card background — only specific ones */
.padding5, .padding10, .padding15, .padding20, .padding25, .padding30, .padding40, .padding50 {
background: transparent;
color: inherit;
}
.padding5 { padding: 5px !important; }
.padding10 { padding: 10px !important; }
.padding15 { padding: 15px !important; }
.padding20 { padding: 20px !important; }
.padding25 { padding: 25px !important; }
.padding30 { padding: 30px !important; }
.padding40 { padding: 40px !important; }
.padding50 { padding: 50px !important; }
/* The PARENT containers (mpaneltitle, sayfacontent etc.) handle card styling */
.mpanelrightcon > .padding20,
.mpanelrightcon > .padding30,
.sayfacontent > .padding20,
.sayfacontent > .padding30 {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
}
/* ---------- 9. FLOATS RESET ---------- */
/* Anywhere classic uses `float: left/right`, neutralize on grid containers */
.statisticarea > *, .dashboardstatistics > *,
.wclientblockscon > *, .ac-dashboard-statistics > *,
.dashboardboxs > *, .commission-rates > * {
float: none !important;
}
/* clear hack containers */
.clear, .clearfix { clear: both !important; }
/* ---------- 16. DATATABLES (.dataTable, dtr-inline, no-footer) ---------- */
/* Ensure tbody rows themselves get dark bg — theme-default sets tr {background:#fff} */
table.dataTable tbody tr,
table.dataTable.no-footer tbody tr,
table.dataTable.dtr-inline tbody tr,
table.dataTable.stripe tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.row-border tbody tr,
table.dataTable.cell-border tbody tr,
table.dataTable.display tbody tr {
background: var(--vx-surface) !important;
background-color: var(--vx-surface) !important;
}
table.dataTable tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
background: var(--vx-surface-2) !important;
background-color: var(--vx-surface-2) !important;
}
.dataTables_wrapper {
padding: 20px !important;
background: transparent !important;
color: var(--vx-text) !important;
}
/* Filter + search controls row */
.dataTables_length, .dataTables_filter {
margin-bottom: 16px !important;
color: var(--vx-text-3) !important;
font-size: 12px !important;
font-family: var(--vx-font-mono) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.dataTables_length { float: left !important; }
.dataTables_filter { float: right !important; }
.dataTables_length label, .dataTables_filter label {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
color: var(--vx-text-3) !important;
text-transform: uppercase !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.dataTables_length select {
height: 32px !important;
padding: 0 28px 0 10px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 6px !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
width: auto !important;
min-width: 56px !important;
}
.dataTables_filter input {
height: 32px !important;
padding: 0 10px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 6px !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
width: 220px !important;
margin-left: 8px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* The table itself */
table.dataTable {
width: 100% !important;
background: transparent !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
overflow: hidden !important;
clear: both !important;
margin: 0 !important;
}
table.dataTable thead th, table.dataTable thead td {
background: var(--vx-surface-2) !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
padding: 12px 16px !important;
border-bottom: 1px solid var(--vx-border) !important;
border-top: none !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
position: relative;
cursor: pointer;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
content: "" !important; opacity: 0.5;
color: var(--vx-text-3) !important;
}
table.dataTable tbody td {
padding: 14px 16px !important;
border-bottom: 1px solid var(--vx-border) !important;
border-top: none !important;
background: transparent !important;
color: var(--vx-text) !important;
font-size: 13px !important;
vertical-align: middle !important;
}
table.dataTable tbody tr:last-child td {
border-bottom: none !important;
}
table.dataTable tbody tr:hover td {
background: var(--vx-surface-2) !important;
}
table.dataTable tbody td strong { color: var(--vx-text) !important; }
table.dataTable tbody td a { color: var(--vx-text) !important; text-decoration: none !important; }
table.dataTable tbody td a:hover { color: var(--vx-accent) !important; }
table.dataTable.row-border tbody td, table.dataTable.cell-border tbody td { border-color: var(--vx-border) !important; }
table.dataTable.stripe tbody tr.odd { background: transparent !important; }
/* DataTable info + pagination row */
.dataTables_info {
clear: both !important;
float: left !important;
padding: 12px 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.04em !important;
}
.dataTables_paginate {
float: right !important;
padding: 12px 0 !important;
display: flex !important;
gap: 4px !important;
align-items: center;
}
.dataTables_paginate .paginate_button {
padding: 6px 12px !important;
margin: 0 !important;
border-radius: 6px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text-2) !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
cursor: pointer !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 32px !important;
}
.dataTables_paginate .paginate_button:hover {
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
border-color: var(--vx-border-strong) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
background: transparent !important;
color: var(--vx-text-4) !important;
cursor: not-allowed !important;
border-color: var(--vx-border) !important;
}
/* Responsive datatable child controls */
table.dataTable.dtr-inline.collapsed tbody tr td.dtr-control::before,
table.dataTable.dtr-inline.collapsed tbody th.dtr-control::before {
background-color: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
box-shadow: none !important;
}
table.dataTable.dtr-inline.collapsed tbody tr.parent td.dtr-control::before,
table.dataTable.dtr-inline.collapsed tbody tr.parent th.dtr-control::before {
background-color: var(--vx-text-3) !important;
border-color: var(--vx-text-3) !important;
}
table.dataTable tr.child ul.dtr-details > li {
border-bottom: 1px solid var(--vx-border) !important;
padding: 8px 0 !important;
}
table.dataTable tr.child ul.dtr-details > li .dtr-title {
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* ---------- 17. STATUS / SITUATION BADGES (inline-styled by Classic) ---------- */
/* Classic uses inline style="color:#X;background:#Y;..." on for status badges.
Reset them with attribute selectors. */
[class*="situation"] > span,
.product_situation, .productSituation,
td span[style*="background"][style*="color"],
.statusbadge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 10px !important;
border-radius: 999px !important;
border: 1px solid var(--vx-border) !important;
background: var(--vx-surface-2) !important;
color: var(--vx-text-2) !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
}
/* Color-coded badges based on text content keywords (approximate but effective) */
/* Status: yanıtlandı / answered / replied = success */
td span[style*="green"], td span[style*="#4caf50"], td span[style*="#2e7d32"],
td span[style*="#5cb85c"], td span[style*="#5cb860"], td span[style*="#28a745"],
td span[style*="#43a047"], td span[style*="#388e3c"] {
background: rgba(34,197,94,0.10) !important;
border-color: rgba(34,197,94,0.35) !important;
color: var(--vx-success) !important;
}
td span[style*="green"]::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; display: inline-block; }
/* Status: çözümlendi / closed = neutral */
td span[style*="gray"], td span[style*="grey"], td span[style*="#9e9e9e"],
td span[style*="#999"], td span[style*="#777"], td span[style*="#6c757d"],
td span[style*="#757575"], td span[style*="#bdbdbd"], td span[style*="#616161"] {
background: var(--vx-surface-2) !important;
border-color: var(--vx-border) !important;
color: var(--vx-text-2) !important;
}
/* Status: bekliyor / pending / warning = warning */
td span[style*="orange"], td span[style*="#ff9800"], td span[style*="#ffc107"],
td span[style*="#f59e0b"], td span[style*="#ffa500"], td span[style*="#ffb300"],
td span[style*="#ff6f00"], td span[style*="#f57c00"] {
background: rgba(234,179,8,0.10) !important;
border-color: rgba(234,179,8,0.35) !important;
color: var(--vx-warning) !important;
}
/* Status: iptal / closed / error = danger */
td span[style*="red"], td span[style*="#f44336"], td span[style*="#e91e63"],
td span[style*="#dc3545"], td span[style*="#c62828"], td span[style*="#d32f2f"],
td span[style*="#ef4444"] {
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
}
/* Status: aktif / active / mavi info = info */
td span[style*="blue"], td span[style*="#2196f3"], td span[style*="#1976d2"],
td span[style*="#3b82f6"], td span[style*="#0d47a1"], td span[style*="#1e88e5"] {
background: rgba(59,130,246,0.10) !important;
border-color: rgba(59,130,246,0.35) !important;
color: #60A5FA !important;
}
/* ---------- 18. .moderncliendblock title icon ---------- */
/* The "Destek Sistemi" title h4 strong i should have visible icon */
.moderncliendblock .mpaneltitle h4 strong {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.moderncliendblock .mpaneltitle h4 strong i,
.moderncliendblock .mpaneltitle h4 i {
width: 24px !important;
height: 24px !important;
border-radius: 6px !important;
background: var(--vx-accent-soft) !important;
border: 1px solid var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
flex-shrink: 0 !important;
}
/* "+ Destek Talebi Oluştur" small button */
.moderncliendblock .mpaneltitle a.sbtn {
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
padding: 6px 12px !important;
font-family: var(--vx-font-sans) !important;
font-size: 12px !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-weight: 600 !important;
}
.moderncliendblock .mpaneltitle a.sbtn:hover {
background: var(--vx-accent-hi) !important;
color: #fff !important;
}
/* ---------- 19. NOTIFICATION ICON BUTTON + DROPDOWN ---------- */
/* The wnotifitibtn must keep dot visually anchored top-right */
.vx-iconbtn.wnotifitibtn, .wnotifitibtn {
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
background: transparent !important;
border: 1px solid var(--vx-border) !important;
border-radius: 8px !important;
color: var(--vx-text) !important;
cursor: pointer !important;
padding: 0 !important;
text-decoration: none !important;
vertical-align: middle !important;
line-height: 1 !important;
}
.vx-iconbtn.wnotifitibtn:hover, .wnotifitibtn:hover { background: var(--vx-surface-2) !important; }
.vx-iconbtn.wnotifitibtn i, .wnotifitibtn i, .wnotifitibtn .fa {
font-size: 14px !important;
color: var(--vx-text) !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
vertical-align: middle !important;
top: auto !important;
}
/* unread badge dot — top-right */
.wnotifitibtn .vx-iconbtn__dot, .wnotifitibtn[data-notif="1"]::after {
position: absolute !important;
top: 6px !important;
right: 6px !important;
width: 8px !important;
height: 8px !important;
background: var(--vx-accent) !important;
border-radius: 999px !important;
border: 2px solid var(--vx-surface) !important;
pointer-events: none;
}
/* Notification dropdown (Classic uses .wclientnotification, opens on click via JS) */
.wclientnotifi { position: relative !important; display: inline-block !important; }
.wclientnotification {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
width: 380px !important;
max-height: 480px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
box-shadow: var(--vx-shadow-md) !important;
z-index: 60 !important;
overflow: hidden !important;
display: none;
}
.wclientnotification.active, .wclientnotification.open,
.wclientnotification[style*="block"] {
display: block !important;
}
.wnotifititle {
background: var(--vx-surface-2) !important;
border-bottom: 1px solid var(--vx-border) !important;
padding: 14px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.wnotifititle h3 {
font-size: 14px !important;
margin: 0 !important;
color: var(--vx-text) !important;
font-weight: 600 !important;
}
.wnotifititle h5 {
font-size: 11px !important;
margin: 0 !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
letter-spacing: 0.04em !important;
}
.wnotifilist {
display: flex !important;
align-items: start !important;
gap: 12px !important;
padding: 14px 20px !important;
border-bottom: 1px solid var(--vx-border) !important;
background: var(--vx-surface) !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.5 !important;
text-decoration: none !important;
}
.wnotifilist:last-child { border-bottom: none !important; }
.wnotifilist:hover { background: var(--vx-surface-2) !important; }
.wnotifilist.read { background: var(--vx-accent-soft) !important; }
.wnotifilist strong { color: var(--vx-text) !important; }
.wnotifilisticon {
width: 32px !important; height: 32px !important;
border-radius: 8px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--vx-accent) !important;
flex-shrink: 0 !important;
}
.nonotification {
padding: 48px 20px !important;
text-align: center !important;
color: var(--vx-text-3) !important;
font-size: 13px !important;
}
.nonotification i {
font-size: 28px !important;
color: var(--vx-accent) !important;
display: block !important;
margin: 0 0 12px !important;
}
.allread {
padding: 12px 20px !important;
background: var(--vx-surface-2) !important;
border-top: 1px solid var(--vx-border) !important;
text-align: center !important;
}
.allread a {
color: var(--vx-accent) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
/* Cart icon — same alignment fix */
.vx-iconbtn i {
position: static !important;
vertical-align: middle !important;
margin: 0 !important;
line-height: 1 !important;
font-size: 14px !important;
}
.vx-iconbtn .vx-iconbtn__dot {
position: absolute !important;
top: 6px !important;
right: 6px !important;
width: 8px !important;
height: 8px !important;
background: var(--vx-accent) !important;
border-radius: 999px !important;
border: 2px solid var(--vx-surface) !important;
pointer-events: none !important;
}
/* ---------- 21. WRAPPER LAYOUT — align sidebar + right content ---------- */
/* Don't apply flex wrapper to auth pages (sign-in/sign-up) — they have their
own .clean-theme-signinup-con grid layout. */
#wrapper:has(> .clean-theme-signinup-con) {
display: block !important;
max-width: var(--vx-container) !important;
margin: 0 auto !important;
padding: 32px var(--vx-gutter) 64px !important;
}
#wrapper {
display: flex !important;
align-items: flex-start !important;
gap: 24px !important;
max-width: var(--vx-container) !important;
margin: 0 auto !important;
padding: 32px var(--vx-gutter) 64px !important;
}
#wrapper > .mpanelleft {
flex: 0 0 280px !important;
width: 280px !important;
margin: 0 !important;
padding: 0 !important;
position: sticky !important;
top: calc(var(--vx-header-h) + var(--vx-topbar-h) + 32px) !important;
align-self: flex-start !important;
}
#wrapper > .mpanelright,
#wrapper > #bigcontent,
#wrapper > #basic_client_rightcon {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
overflow: hidden !important;
}
/* Inner padding for the right-content card */
#wrapper > .mpanelright > *,
#wrapper > #bigcontent > *,
#wrapper > #basic_client_rightcon > * {
padding-left: 32px !important;
padding-right: 32px !important;
}
#wrapper > .mpanelright > .mpaneltitle,
#wrapper > #bigcontent > .mpaneltitle,
#wrapper > #basic_client_rightcon > .mpaneltitle {
padding: 24px 32px !important;
margin: 0 !important;
border-bottom: 1px solid var(--vx-border) !important;
}
#wrapper > .mpanelright > .sayfayolu,
#wrapper > #bigcontent > .sayfayolu,
#wrapper > #basic_client_rightcon > .sayfayolu {
padding: 20px 32px 0 !important;
margin: 0 !important;
}
/* DataTable wrapper inside the right content gets full bleed */
#wrapper > .mpanelright > .dataTables_wrapper,
#wrapper > #bigcontent > .dataTables_wrapper,
#wrapper > #basic_client_rightcon > .dataTables_wrapper {
padding: 20px 32px 32px !important;
}
/* Wide content + sidebar layout — when wide_content is true, no sidebar so full width */
#wrapper:not(:has(> .mpanelleft)) > .mpanelright,
#wrapper:not(:has(> .mpanelleft)) > #bigcontent {
width: 100% !important;
}
/* The "Hepsini Öde" button next to title shouldn't be cut off */
.mpaneltitle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.mpaneltitle h4 { flex: 1 1 auto !important; min-width: 0 !important; }
.mpaneltitle > a, .mpaneltitle > .sbtn {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Sidebar invoice reminder card spacing */
.mpanelleft .invoicereminleft { margin-top: 16px !important; }
/* Mobile: collapse sidebar above content */
@media (max-width: 1024px) {
#wrapper {
flex-direction: column !important;
gap: 16px !important;
}
#wrapper > .mpanelleft {
width: 100% !important;
flex: 0 0 auto !important;
position: static !important;
top: auto !important;
}
}
/* This page uses master_content_none and has its own inline styles like
body#muspanel style="background:#eee". Override aggressively. */
body#muspanel,
body#muspanel[style] {
background: var(--vx-bg) !important;
color: var(--vx-text) !important;
}
.invoicex {
background: transparent !important;
max-width: var(--vx-container) !important;
margin: 0 auto !important;
padding: 32px var(--vx-gutter) !important;
color: var(--vx-text) !important;
}
.invoicex .padding {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 32px !important;
margin: 0 0 24px !important;
color: var(--vx-text) !important;
}
/* Top split: customer info (left) + company info (right) */
.invoice-detail-left, .invoice-detail-right {
width: 50% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
color: var(--vx-text) !important;
}
.invoice-detail-left { float: left !important; padding-right: 24px !important; }
.invoice-detail-right { float: right !important; padding-left: 24px !important; text-align: right !important; }
.companybillinfo {
width: 100% !important;
background: transparent !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.6 !important;
margin-bottom: 16px !important;
}
.companybillinfo img {
max-height: 36px !important;
width: auto !important;
height: auto !important;
margin-bottom: 14px !important;
filter: brightness(1.1);
}
body[data-vx-mode="light"] .companybillinfo img { filter: none; }
.companybillinfo span { color: var(--vx-text-2) !important; font-size: 13px !important; }
.companybillinfo strong, .companybillinfo b { color: var(--vx-text) !important; }
.custbillinfo {
width: 100% !important;
background: transparent !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
.custbillinfo h5 {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
margin: 0 0 8px !important;
}
.custbillinfo .line { margin: 8px 0 16px !important; border-top: 1px solid var(--vx-border) !important; }
.custbillinfo strong, .custbillinfo b { color: var(--vx-text) !important; font-size: 15px !important; }
.invoice-detail-select-profile {
margin-bottom: 20px !important;
padding: 16px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
}
.invoice-detail-select-profile strong {
display: block;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
font-weight: 500 !important;
}
.invoice-detail-select-profile select {
width: 100% !important;
font-size: 13px !important;
}
/* Date times (.invoicetimes .formcon) */
.invoicetimes {
width: 100% !important;
margin-top: 16px !important;
border-top: 1px solid var(--vx-border) !important;
}
.invoicetimes .formcon {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
padding: 10px 0 !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
align-items: center !important;
}
.invoicetimes .formcon:last-child { border-bottom: none !important; }
.invoicetimes .formcon .yuzde50 {
width: auto !important;
float: none !important;
font-size: 13px !important;
color: var(--vx-text-3) !important;
text-align: left !important;
}
.invoicetimes .formcon .yuzde50:last-child {
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
text-align: right !important;
}
/* Action buttons (share, print, pdf) */
.otherincoivebtns {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 20px !important;
justify-content: flex-end !important;
}
.otherincoivebtns .sbtn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px !important;
height: 36px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.otherincoivebtns .sbtn:hover {
background: var(--vx-surface-hi) !important;
color: var(--vx-text) !important;
border-color: var(--vx-border-strong) !important;
}
.otherincoivebtns .sbtn i { color: var(--vx-accent) !important; font-size: 13px !important; }
/* Invoice number title */
.invoiceidx {
width: 100% !important;
font-size: 24px !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
color: var(--vx-text) !important;
margin: 24px 0 12px !important;
background: transparent !important;
}
/* Status badge (.invwait, .invpaid, .invnopay) */
.invoicestatus {
width: 100% !important;
margin-top: 0 !important;
background: transparent !important;
}
.invoicestatus .padding20 {
padding: 0 !important;
background: transparent !important;
border: none !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap;
}
.invwait, .invpaid, .invnopay {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
border-radius: 999px !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border: 1px solid var(--vx-border) !important;
}
.invwait::before, .invpaid::before, .invnopay::before {
content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.invpaid {
background: rgba(34,197,94,0.10) !important;
border-color: rgba(34,197,94,0.35) !important;
color: var(--vx-success) !important;
}
.invwait {
background: rgba(234,179,8,0.10) !important;
border-color: rgba(234,179,8,0.35) !important;
color: var(--vx-warning) !important;
}
.invnopay {
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
}
.invoicepaymethod {
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.04em !important;
font-weight: 400 !important;
margin-top: 0 !important;
}
/* Invoice description table (.invoicedesc + .formcon rows) */
.invoicedesc {
margin: 24px 0 !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
overflow: hidden !important;
}
/* Header row (description / amount) */
.invoicedesc > .formcon:first-child {
background: var(--vx-surface-2) !important;
border-bottom: 1px solid var(--vx-border) !important;
padding: 12px 20px !important;
display: grid !important;
grid-template-columns: 2fr 1fr !important;
gap: 16px !important;
}
.invoicedesc > .formcon:first-child .yuzde70,
.invoicedesc > .formcon:first-child .yuzde30 {
width: auto !important;
float: none !important;
padding: 0 !important;
background: transparent !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
color: var(--vx-text-3) !important;
}
.invoicedesc > .formcon:first-child .yuzde70 span,
.invoicedesc > .formcon:first-child .yuzde30 span { color: var(--vx-text-3) !important; }
.invoicedesc > .formcon:first-child .yuzde70 strong,
.invoicedesc > .formcon:first-child .yuzde30 strong {
color: var(--vx-text-3) !important;
font-weight: 500 !important;
}
.invoicedesc > .formcon:first-child .yuzde30 { text-align: right !important; }
/* All other rows (.formcon with inline style="background:white") */
.invoicedesc .formcon[style*="background"],
.invoicedesc .formcon {
background: var(--vx-surface) !important;
background-color: var(--vx-surface) !important;
display: grid !important;
grid-template-columns: 2fr 1fr !important;
gap: 16px !important;
padding: 14px 20px !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
align-items: center !important;
}
.invoicedesc .formcon:last-child { border-bottom: none !important; }
.invoicedesc .formcon .yuzde70,
.invoicedesc .formcon .yuzde30 {
width: auto !important;
float: none !important;
padding: 0 !important;
background: transparent !important;
font-size: 13px !important;
color: var(--vx-text) !important;
}
.invoicedesc .formcon .yuzde70 .padding10 { padding: 0 !important; }
.invoicedesc .formcon .yuzde30 { text-align: right !important; }
.invoicedesc .formcon .yuzde30 strong { color: var(--vx-text) !important; }
.invoicedesc .formcon .yuzde70 span,
.invoicedesc .formcon .yuzde30 span { color: var(--vx-text) !important; }
/* Subtotal / discount / tax / total rows — subtle styling */
.invoicedesc .formcon[style*="font-weight: bold"][style*="color: #4caf50"],
.invoicedesc .formcon[style*="color: #4caf50"] {
background: rgba(34,197,94,0.05) !important;
border-bottom: 1px solid rgba(34,197,94,0.20) !important;
}
.invoicedesc .formcon[style*="color: #4caf50"] .yuzde70,
.invoicedesc .formcon[style*="color: #4caf50"] .yuzde30,
.invoicedesc .formcon[style*="color: #4caf50"] strong {
color: var(--vx-success) !important;
}
/* Total row (id="total_wrap") */
.invoicedesc #total_wrap, .invoicedesc .formcon#total_wrap {
background: var(--vx-surface-2) !important;
border-top: 1px solid var(--vx-border-strong) !important;
border-bottom: none !important;
padding: 18px 20px !important;
}
#total_wrap .yuzde70 span { font-size: 14px !important; color: var(--vx-text) !important; }
#total_wrap .yuzde30 strong, #total_fee {
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: var(--vx-accent) !important;
}
/* Paid section / "Fatura ödendi" notice */
.faturaodenmis {
margin: 24px 0 !important;
padding: 24px !important;
background: rgba(34,197,94,0.06) !important;
border: 1px solid rgba(34,197,94,0.35) !important;
border-left: 3px solid var(--vx-success) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
}
.faturaodenmis h4 { color: var(--vx-success) !important; margin: 0 0 8px !important; font-size: 16px !important; }
.faturaodenmis h5 { color: var(--vx-text-2) !important; font-size: 13px !important; margin: 12px 0 !important; font-weight: 400 !important; }
/* "Faturayı Öde" accordion */
#accordion {
margin: 24px 0 !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
overflow: hidden !important;
}
#accordion .ui-accordion-header, #accordion h3 {
background: var(--vx-surface-2) !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
border-radius: 0 !important;
padding: 14px 20px !important;
margin: 0 !important;
color: var(--vx-text) !important;
font-size: 14px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
cursor: pointer !important;
letter-spacing: -0.01em !important;
}
#accordion .ui-accordion-header:hover { background: var(--vx-surface-hi) !important; }
#accordion .ui-accordion-header .ui-icon {
background: none !important;
text-indent: 0 !important;
width: auto !important;
height: auto !important;
margin: 0 8px 0 0 !important;
color: var(--vx-text-3) !important;
}
#accordion .ui-accordion-header .ui-icon::before {
content: "›";
font-family: var(--vx-font-sans);
font-size: 18px;
line-height: 1;
color: var(--vx-text-3);
display: inline-block;
transition: transform 0.2s;
}
#accordion .ui-accordion-header-active .ui-icon::before { transform: rotate(90deg); color: var(--vx-accent); }
#accordion .ui-accordion-content, #accordion h3 + div {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
padding: 24px !important;
color: var(--vx-text) !important;
height: auto !important;
}
#accordion > div:last-child, #accordion .ui-accordion-content:last-of-type { border-bottom: none !important; }
/* Payment method block */
.odemeyontem {
margin-bottom: 20px !important;
background: transparent !important;
}
.odemeyontem h5 {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
margin: 0 0 12px !important;
}
.odemeyontem h5 strong { color: var(--vx-text-3) !important; font-weight: 500 !important; }
#payment_methods {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
#payment_methods .checkbox-custom,
#payment_methods input[type=radio].checkbox-custom {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
#payment_methods label.checkbox-custom-label,
#payment_methods .checkbox-custom-label {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 18px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
cursor: pointer !important;
color: var(--vx-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
margin: 0 !important;
transition: border-color .15s, background .15s !important;
font-family: var(--vx-font-sans) !important;
}
#payment_methods .checkbox-custom-label::before {
content: "" !important;
width: 18px !important; height: 18px !important;
border-radius: 999px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border-strong) !important;
flex-shrink: 0 !important;
display: inline-block !important;
margin: 0 !important;
}
#payment_methods .checkbox-custom:checked + .checkbox-custom-label {
border-color: var(--vx-accent) !important;
background: var(--vx-accent-soft) !important;
}
#payment_methods .checkbox-custom:checked + .checkbox-custom-label::before {
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
box-shadow: inset 0 0 0 4px var(--vx-surface) !important;
}
#payment_methods .checkbox-custom-label strong {
color: var(--vx-text) !important;
font-weight: 600 !important;
}
/* Continue button under accordion */
#continue_button {
margin-top: 20px !important;
width: auto !important;
display: inline-flex !important;
background: var(--vx-accent) !important;
color: #fff !important;
height: 48px !important;
padding: 0 24px !important;
border-radius: var(--vx-r-md) !important;
font-size: 15px !important;
font-weight: 600 !important;
}
#continue_button:hover { background: var(--vx-accent-hi) !important; }
#continue_button.graybtn {
background: var(--vx-surface-2) !important;
color: var(--vx-text-3) !important;
}
.invoice-coupon-area {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
padding: 20px !important;
width: 100% !important;
max-width: 400px !important;
margin: 16px 0 0 auto !important;
float: none !important;
text-align: left !important;
}
.invoice-coupon-area h5 {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
margin: 0 0 12px !important;
}
.invoice-coupon-area input {
width: calc(100% - 100px) !important;
height: 40px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
border-radius: var(--vx-r-md) !important;
display: inline-block !important;
margin-right: 6px !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
}
.invoice-coupon-area .sbtn {
height: 40px !important;
padding: 0 14px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--vx-r-md) !important;
font-size: 13px !important;
}
/* Spinner inside payment methods loader */
#pmethods_loader { padding: 32px !important; }
.spinner {
width: 32px; height: 32px;
border: 3px solid var(--vx-surface-2);
border-top-color: var(--vx-accent);
border-radius: 999px;
animation: vx-spin 0.8s linear infinite;
margin: 0 auto !important;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }
/* Back link at bottom of invoice */
body#muspanel > div[style*="text-align:center"] {
padding: 24px !important;
margin: 0 !important;
}
body#muspanel > div[style*="text-align:center"] a {
color: var(--vx-accent) !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
body#muspanel > div[style*="text-align:center"] a:hover { color: var(--vx-accent-hi) !important; }
/* Share invoice modal area */
.share-invoice-link strong {
display: block !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
}
.share-invoice-link textarea {
width: 100% !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
padding: 12px !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
border-radius: var(--vx-r-md) !important;
}
/* Generic "gray-info" reset */
.gray-info {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
}
.gray-info .padding10, .gray-info .padding20 { padding: 14px !important; }
/* Responsive */
@media only screen and (max-width: 1024px) {
.invoice-detail-left, .invoice-detail-right {
width: 100% !important;
float: none !important;
padding: 0 !important;
text-align: left !important;
}
.invoice-detail-right { margin-bottom: 24px !important; }
.otherincoivebtns { justify-content: flex-start !important; }
.invoicex .padding { padding: 20px !important; }
}
/* ---------- 12. CUSTOMER SIDEBAR (.mpanelleft) ---------- */
/* Actual structure: .mpanelleft > .clean-theme-client-left-block > .clean-theme-client-left-block-title (header)
+ .padding20 (body) + .clean-theme-left-block-title (strong) */
.mpanelleft {
width: 280px !important;
float: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.clean-theme-client-left-block {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
margin: 0 0 16px !important;
overflow: hidden !important;
}
.clean-theme-client-left-block-title {
background: var(--vx-surface-2) !important;
border-bottom: 1px solid var(--vx-border) !important;
padding: 14px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: var(--vx-text) !important;
}
.clean-theme-client-left-block-title h4 {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-2) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.clean-theme-client-left-block-title span {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
}
.clean-theme-client-left-block .padding20 {
padding: 20px !important;
font-size: 13px !important;
color: var(--vx-text-2) !important;
line-height: 1.55 !important;
}
.clean-theme-left-block-title {
display: block !important;
margin: 0 0 6px !important;
font-size: 15px !important;
color: var(--vx-text) !important;
}
.clean-theme-left-block-title strong {
color: var(--vx-text) !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: -0.01em !important;
}
/* Buttons inside sidebar block need accent color */
.clean-theme-client-left-block .padding20 .gonderbtn,
.clean-theme-client-left-block .padding20 .yesilbtn,
.clean-theme-client-left-block .padding20 .mavibtn,
.clean-theme-client-left-block .padding20 .turuncubtn,
.clean-theme-client-left-block .padding20 a[class*="btn"]:not(.lbtn):not(.grayBtn):not(.sbtn) {
margin-top: 12px !important;
display: inline-flex !important;
}
/* Invoice reminder card in sidebar */
.invoicereminleft {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-accent-border) !important;
border-left: 3px solid var(--vx-accent) !important;
border-radius: var(--vx-r-lg) !important;
color: var(--vx-text) !important;
margin: 0 0 16px !important;
overflow: hidden !important;
}
.invoicereminleft .padding20 { padding: 20px !important; }
.invoicereminleft h4 {
font-size: 14px !important;
color: var(--vx-accent) !important;
font-weight: 600 !important;
margin: 0 0 6px !important;
}
.invoicereminleft span { color: var(--vx-text-2) !important; font-size: 12px; }
.invoicereminleft .lbtn {
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
margin-top: 12px !important;
font-size: 12px !important;
height: 32px !important;
padding: 0 12px !important;
}
.invoicereminleft .lbtn:hover {
background: var(--vx-accent) !important;
color: #fff !important;
border-color: var(--vx-accent) !important;
}
.invoicereminleft img { opacity: 0.08 !important; }
/* ---------- 13. DASHBOARD .moderncliendblock — full-width panels ---------- */
.moderncliendblock, .mclientlastblocks {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 0 !important;
margin: 0 0 16px !important;
width: 100% !important;
float: none !important;
display: block !important;
overflow: hidden !important;
}
.moderncliendblock .mpanelrightcon,
.mclientlastblocks .mpanelrightcon {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.moderncliendblock .mpaneltitle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 20px !important;
margin: 0 !important;
border-bottom: 1px solid var(--vx-border) !important;
background: var(--vx-surface-2) !important;
flex-wrap: wrap;
gap: 12px;
}
.moderncliendblock .mpaneltitle h4 {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
color: var(--vx-text) !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.moderncliendblock .mpaneltitle h4 a {
color: var(--vx-text) !important;
text-decoration: none !important;
display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
.moderncliendblock .mpaneltitle h4 a:hover { color: var(--vx-accent) !important; }
.moderncliendblock .mpaneltitle h4 strong { color: var(--vx-text) !important; }
.moderncliendblock .mpaneltitle h4 i { color: var(--vx-accent) !important; font-size: 13px !important; }
.moderncliendblock .mpaneltitle a.sbtn,
.mpaneltitle a.sbtn, a.sbtn {
background: transparent !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text-2) !important;
padding: 6px 12px !important;
font-size: 12px !important;
border-radius: 6px !important;
text-decoration: none !important;
font-family: var(--vx-font-mono) !important;
letter-spacing: 0.04em !important;
display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
.moderncliendblock .mpaneltitle a.sbtn:hover, a.sbtn:hover {
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
}
/* Tables inside dashboard panels */
.moderncliendblock table, .mclientlastblocks table {
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}
.moderncliendblock table th, .mclientlastblocks table th {
background: transparent !important;
border-bottom: 1px solid var(--vx-border) !important;
border-top: none !important;
padding: 10px 16px !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
}
.moderncliendblock table td, .mclientlastblocks table td {
padding: 14px 16px !important;
border-bottom: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
font-size: 13px !important;
background: transparent !important;
}
.moderncliendblock table tbody tr:last-child td,
.mclientlastblocks table tbody tr:last-child td { border-bottom: none !important; }
.moderncliendblock table tbody tr:hover td { background: var(--vx-surface-2) !important; }
.moderncliendblock table strong { color: var(--vx-text) !important; }
.moderncliendblock table a { color: var(--vx-text) !important; text-decoration: none !important; }
.moderncliendblock table a:hover { color: var(--vx-accent) !important; }
.moderncliendblock .productinfo {
display: block;
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
margin-top: 4px;
}
/* "Manage" pill button inside table */
.incelebtn {
display: inline-flex !important;
align-items: center !important; gap: 6px !important;
padding: 4px 10px !important;
border-radius: 6px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text-2) !important;
text-decoration: none !important;
font-size: 12px !important;
font-family: var(--vx-font-mono) !important;
letter-spacing: 0.04em !important;
}
.incelebtn:hover {
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
}
.incelebtn i { font-size: 11px !important; }
/* Empty-state inside dashboard blocks */
.noentryblock {
padding: 48px 24px !important;
text-align: center !important;
color: var(--vx-text-3) !important;
background: transparent !important;
}
.noentryblock i {
font-size: 36px !important;
color: var(--vx-text-4) !important;
display: block !important;
margin: 0 0 16px !important;
}
.noentryblock h2 {
font-size: 18px !important;
color: var(--vx-text) !important;
margin: 0 0 6px !important;
font-weight: 600 !important;
}
.noentryblock h4 {
font-size: 13px !important;
color: var(--vx-text-3) !important;
font-weight: 400 !important;
margin: 0 !important;
}
/* Activity / news feed inside dashboard */
.mpanelhaber {
display: flex !important;
gap: 16px !important;
padding: 16px 20px !important;
border-bottom: 1px solid var(--vx-border) !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.55 !important;
align-items: start !important;
}
.mpanelhaber:last-child { border-bottom: none !important; }
.mpanelhaber strong { color: var(--vx-text) !important; font-weight: 600 !important; }
.mpanelhaber img {
width: 80px !important; height: 80px !important;
border-radius: 8px !important;
border: 1px solid var(--vx-border) !important;
background: var(--vx-surface-2) !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
.mpanelhaber h5 { color: var(--vx-text) !important; margin: 0 0 8px !important; font-weight: 600 !important; }
.mpanelhaber span { color: var(--vx-text-2) !important; }
.mpanelhaber a { color: var(--vx-accent) !important; }
/* Status tabs for domain list etc. (.ac-domainlist-status) */
.ac-domainlist-status {
display: flex !important;
gap: 4px !important;
padding: 12px 20px !important;
background: transparent !important;
border-bottom: 1px solid var(--vx-border) !important;
flex-wrap: wrap;
}
.ac-domainlist-status a {
padding: 6px 12px !important;
border-radius: 6px !important;
background: transparent !important;
color: var(--vx-text-3) !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 500 !important;
font-family: var(--vx-font-sans) !important;
border: 1px solid transparent !important;
display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
.ac-domainlist-status a:hover {
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
}
.ac-domainlist-status a.active {
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
}
.ac-domainlist-status a strong {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
margin-left: 4px;
}
/* "Blue info" notice (used on dashboard domain verification block) */
.blue-info {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-left: 3px solid #3B82F6 !important;
border-radius: var(--vx-r-md) !important;
margin: 16px 20px !important;
}
.blue-info .padding15 {
padding: 14px 16px !important;
display: flex !important; gap: 12px !important; align-items: start !important;
}
.blue-info i {
color: #3B82F6 !important;
font-size: 18px !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
.blue-info p { margin: 0 !important; color: var(--vx-text-2) !important; font-size: 13px !important; line-height: 1.55 !important; }
/* ---------- 14. BUTTON HARD OVERRIDES ---------- */
/* Make sure WiseCP's theme-default.css can't beat our primary buttons */
.gonderbtn, .yesilbtn, .mavibtn, .turuncubtn,
a.gonderbtn, a.yesilbtn, a.mavibtn, a.turuncubtn,
button.gonderbtn, button.yesilbtn,
input[type=submit].gonderbtn, input[type=submit].yesilbtn,
.clean-theme-btn, button.clean-theme-btn, a.clean-theme-btn {
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 40px !important;
padding: 0 16px !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
letter-spacing: -0.01em !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background .12s ease !important;
text-shadow: none !important;
box-shadow: none !important;
}
.gonderbtn:hover, .yesilbtn:hover, .mavibtn:hover, .turuncubtn:hover,
.clean-theme-btn:hover {
background: var(--vx-accent-hi) !important;
color: #fff !important;
}
/* But the literal "secondary" button class group stays ghost */
.lbtn, .grayBtn,
a.lbtn, a.grayBtn,
button.lbtn, button.grayBtn,
input[type=submit].lbtn, input[type=button].lbtn {
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
border: 1px solid var(--vx-border) !important;
}
.lbtn:hover, .grayBtn:hover {
background: var(--vx-surface-hi) !important;
color: var(--vx-text) !important;
}
/* ---------- 15. .mpaneltitle ON PUBLIC PAGES ---------- */
.mpaneltitle, body .mpaneltitle {
background: transparent !important;
border-bottom: 1px solid var(--vx-border) !important;
padding: 0 0 20px !important;
margin: 24px 0 24px !important;
color: var(--vx-text) !important;
}
.mpaneltitle h4 {
font-size: 22px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
letter-spacing: -0.02em !important;
margin: 0 !important;
}
.mpaneltitle h4 strong { color: var(--vx-text) !important; }
.mpaneltitle h4 i {
color: var(--vx-accent) !important;
font-size: 18px !important;
margin-right: 8px;
}
.mpaneltitle a:not(.sbtn) {
color: var(--vx-text-2) !important;
text-decoration: none !important;
font-size: 13px !important;
}
.mpaneltitle a:not(.sbtn):hover { color: var(--vx-accent) !important; }
@media (max-width: 1100px) {
.vx-nav > li > a span { display: none; } /* iconize on tight screens */
}
@media (max-width: 980px) {
.wclientblockscon { grid-template-columns: repeat(2, 1fr) !important; }
.product-group-item:nth-child(4n) { border-right: 1px solid var(--vx-border) !important; }
.product-group-item:nth-child(2n) { border-right: none !important; }
.statisticarea, .dashboardstatistics, .ac-dashboard-statistics,
.dashboard-icerik, .statistic-container { grid-template-columns: repeat(2, 1fr) !important; }
.knowledgebasecon, .sayfacontent { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
.wclientblockscon { grid-template-columns: 1fr !important; }
.product-group-item { border-right: none !important; }
.statisticarea, .dashboardstatistics, .ac-dashboard-statistics,
.dashboard-icerik, .statistic-container { grid-template-columns: 1fr !important; }
.bbankaara form { flex-direction: row !important; }
}
/* ---------- 22. AUTH PAGES (sign-in / sign-up / forgot-password) ---------- */
/* Markup (Classic): #wrapper > .clean-theme-signinup-con > .clean-theme-signinup-left + .clean-theme-signinup-right
Form fields use .yuzde50, .yuzde100 etc. as legacy column widths. */
/* Auth pages override #wrapper flex layout (we want simple centered card) */
#wrapper:has(> .clean-theme-signinup-con) {
display: block !important;
max-width: var(--vx-container) !important;
margin: 0 auto !important;
padding: 48px var(--vx-gutter) 80px !important;
position: relative !important;
}
/* Public product pages (hosting/server) — wrapper is NOT a sidebar+content layout.
Force block so .pakettitle / .tablopaketler get full width. */
#wrapper:has(> .pakettitle),
#wrapper:has(> .tablopaketler),
#wrapper:has(> .categoriesproduct),
#wrapper:has(> .sss),
#wrapper:has(> .detail-products-features) {
display: block !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
#wrapper:has(> .pakettitle) > *,
#wrapper:has(> .tablopaketler) > * {
width: auto !important;
flex: none !important;
}
/* Decorative ambient backdrop for auth pages */
#wrapper:has(> .clean-theme-signinup-con)::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 600px 400px at 20% 30%, rgba(227,6,19,0.06), transparent 60%),
radial-gradient(ellipse 500px 400px at 80% 70%, rgba(227,6,19,0.04), transparent 60%);
z-index: 0;
}
.clean-theme-signinup-con {
display: grid !important;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
gap: 0 !important;
margin: 0 auto !important;
max-width: 1180px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
overflow: hidden !important;
float: none !important;
width: 100% !important;
position: relative !important;
z-index: 1 !important;
box-shadow: 0 24px 80px -20px rgba(0,0,0,0.6) !important;
}
/* Sign-up has many fields — use a wider, single-column layout with brand panel on right */
#clean-theme-sign-up {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
max-width: 1240px !important;
}
#clean-theme-sign-up .clean-theme-signinup-right > form { max-width: 560px !important; }
.clean-theme-signinup-con > * { min-width: 0 !important; }
/* ============ BRAND INFO SIDE (decorative panel) ============ */
.clean-theme-signinup-left, .imzabg, .imzabodybg {
position: relative !important;
background:
linear-gradient(135deg, rgba(227,6,19,0.06) 0%, transparent 50%),
linear-gradient(180deg, var(--vx-surface-2) 0%, var(--vx-bg) 100%) !important;
padding: 56px 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
color: var(--vx-text) !important;
overflow: hidden !important;
width: auto !important;
float: none !important;
min-height: 520px !important;
}
/* Grid texture backdrop */
.clean-theme-signinup-left::before, .imzabg::before, .imzabodybg::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
opacity: 0.6;
}
/* Decorative V watermark + status indicators */
.clean-theme-signinup-left::after, .imzabg::after, .imzabodybg::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 340px; height: 340px;
transform: translate(-50%, -50%);
background-image:
url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 0;
filter: drop-shadow(0 0 40px rgba(227,6,19,0.18));
animation: vx-auth-pulse 6s ease-in-out infinite;
}
@keyframes vx-auth-pulse {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
.clean-theme-signinup-left > *,
.imzabg > *, .imzabodybg > * { position: relative; z-index: 2; }
/* Brand panel decorative header — terminal-style eyebrow */
.clean-theme-signinup-left::before { z-index: 1; }
.clean-theme-signinup-left img, .imzabg img {
max-width: 60px !important;
height: auto !important;
margin: 0 auto 28px !important;
display: block !important;
filter: drop-shadow(0 4px 24px rgba(227,6,19,0.4)) !important;
position: relative !important;
z-index: 3 !important;
}
/* Brand panel headings */
.clean-theme-signinup-left h1, .clean-theme-signinup-left h2,
.imzabg h1, .imzabg h2, .imzabodybg h1, .imzabodybg h2 {
font-size: 28px !important;
letter-spacing: -0.03em !important;
color: var(--vx-text) !important;
margin: 0 0 16px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
text-align: center !important;
}
/* Brand panel description text — force neutral color, kill any inline teal/green */
.clean-theme-signinup-left p,
.clean-theme-signinup-left span:not(.checktext),
.clean-theme-signinup-left h5,
.clean-theme-signinup-left h6,
.clean-theme-signinup-left div,
.imzabg p, .imzabg span:not(.checktext), .imzabg h5, .imzabg div,
.imzabodybg p, .imzabodybg span:not(.checktext), .imzabodybg h5, .imzabodybg div {
color: var(--vx-text-2) !important;
font-size: 14px !important;
line-height: 1.7 !important;
margin: 0 0 28px !important;
max-width: 340px !important;
text-align: center !important;
display: block !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
background: transparent !important;
text-shadow: none !important;
font-style: normal !important;
}
/* Override inline color attribute (Classic theme uses inline teal/green styles) */
.clean-theme-signinup-left [style*="color"],
.imzabg [style*="color"], .imzabodybg [style*="color"] {
color: var(--vx-text-2) !important;
}
.clean-theme-signinup-left strong, .imzabg strong, .imzabodybg strong {
color: var(--vx-text) !important;
}
/* CTA inside brand panel */
.clean-theme-signinup-left a.gonderbtn,
.clean-theme-signinup-left a.lbtn,
.clean-theme-signinup-left a.yesilbtn,
.imzabg a.gonderbtn, .imzabg a.yesilbtn,
.imzabodybg a.gonderbtn, .imzabodybg a.yesilbtn {
display: inline-flex !important;
margin: 0 auto !important;
width: auto !important;
text-decoration: none !important;
padding: 0 24px !important;
height: 44px !important;
box-shadow: 0 8px 24px -8px rgba(227,6,19,0.5) !important;
}
/* Floating "feature chips" — added as decorative absolute pseudo-cards */
.clean-theme-signinup-left .feature-chip-1,
.clean-theme-signinup-left .feature-chip-2,
.clean-theme-signinup-left .feature-chip-3 {
display: none; /* placeholder */
}
/* Inject decorative status indicators via CSS — use the H1 as anchor */
.clean-theme-signinup-left h1 { position: relative !important; }
.clean-theme-signinup-left h1::before {
content: "v4.2 · ALTYAPI ONLINE";
position: absolute;
bottom: calc(100% + 18px);
left: 50%;
transform: translateX(-50%);
font-family: var(--vx-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--vx-accent);
text-transform: uppercase;
font-weight: 600;
padding: 4px 12px;
background: var(--vx-accent-soft);
border: 1px solid var(--vx-accent-border);
border-radius: 999px;
white-space: nowrap;
}
/* Bottom corner decoration — uptime indicator */
.clean-theme-signinup-left {
--vx-uptime-label: "99.99% UPTIME · TIER III";
}
.clean-theme-signinup-left::after {
/* fallback retained — keep the V watermark */
}
/* ============ FORM SIDE ============ */
.clean-theme-signinup-right {
background: var(--vx-surface) !important;
padding: 56px 48px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
width: auto !important;
float: none !important;
color: var(--vx-text) !important;
position: relative !important;
}
/* Decorative scan line on top of form */
.clean-theme-signinup-right::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--vx-accent), transparent);
opacity: 0.6;
}
.clean-theme-signinup-right > form, .clean-theme-signinup-right > .padding50 {
width: 100% !important;
max-width: 380px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Form title — eyebrow + main title */
.clean-theme-signinup-right-title {
margin-bottom: 28px !important;
padding: 0 0 20px !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
position: relative !important;
}
.clean-theme-signinup-right-title::before {
content: "// SECURE SESSION";
display: block;
font-family: var(--vx-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--vx-text-3);
text-transform: uppercase;
margin-bottom: 10px;
}
.clean-theme-signinup-right-title h4 {
font-size: 30px !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
color: var(--vx-text) !important;
margin: 0 !important;
line-height: 1.1 !important;
}
.clean-theme-signinup-right-title h4::after {
content: ".";
color: var(--vx-accent);
}
/* Social connect */
.socialconnect {
margin: 20px 0 !important;
padding: 0 0 20px !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
background: transparent !important;
position: relative !important;
}
.socialconnect::before {
content: "OR";
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
background: var(--vx-surface);
padding: 0 12px;
font-family: var(--vx-font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--vx-text-4);
}
.socialconnect > a, .socialconnect button, .socialconnect form button {
flex: 1 1 calc(50% - 4px) !important;
min-width: 0 !important;
height: 42px !important;
padding: 0 12px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 13px !important;
font-weight: 500 !important;
font-family: var(--vx-font-sans) !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all .15s !important;
}
.socialconnect > a:hover, .socialconnect button:hover {
background: var(--vx-surface-hi) !important;
border-color: var(--vx-border-strong) !important;
transform: translateY(-1px) !important;
}
/* Form inputs — enhanced with focus rings */
#Signin_Form input,
#Signup_Form input:not([type=checkbox]):not([type=radio]),
#Signup_Form select,
#Signup_Form textarea,
#Signforget_Form input {
width: 100% !important;
height: 46px !important;
padding: 0 16px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-size: 14px !important;
margin: 0 0 10px !important;
font-family: var(--vx-font-sans) !important;
transition: border-color .15s, box-shadow .15s, background .15s !important;
}
#Signin_Form input:focus,
#Signup_Form input:focus,
#Signup_Form select:focus,
#Signforget_Form input:focus {
border-color: var(--vx-accent) !important;
background: var(--vx-surface) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
#Signup_Form textarea { height: auto !important; min-height: 80px !important; padding: 12px 16px !important; }
/* Form row blocks */
#Signup_Form .yuzde50, #Signup_Form .yuzde100, #Signup_Form .yuzde70, #Signup_Form .yuzde30,
#Signin_Form .yuzde100,
.clean-theme-signinup-right .yuzde50,
.clean-theme-signinup-right .yuzde100 {
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 0 8px !important;
display: block !important;
}
/* Sign-up form — internal 2-column layout for tighter packing */
#Signup_Form .clean-theme-signup-box {
background: var(--vx-bg) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
padding: 20px !important;
margin: 0 0 14px !important;
position: relative !important;
}
#Signup_Form .clean-theme-signup-box > .yuzde50,
#Signup_Form .clean-theme-signup-box > .yuzde100,
#Signup_Form .clean-theme-signup-box > .kind-content {
display: inline-block !important;
width: calc(50% - 5px) !important;
vertical-align: top !important;
margin: 0 6px 8px 0 !important;
}
#Signup_Form .clean-theme-signup-box > .yuzde100,
#Signup_Form .clean-theme-signup-box > .yuzde100.kind-content {
width: 100% !important;
margin-right: 0 !important;
display: block !important;
}
#Signup_Form .clean-theme-signup-box > .yuzde50:nth-of-type(even) { margin-right: 0 !important; }
/* Notification/agreement section labels (BİLDİRİM İZİNLERİ, SÖZLEŞMELER) — make text readable */
#Signup_Form .clean-theme-signup-box label,
#Signup_Form .clean-theme-signup-box .checktext,
#Signup_Form .clean-theme-signup-box span:not(.checktext) {
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.55 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
#Signup_Form a {
color: var(--vx-accent) !important;
text-decoration: none !important;
font-weight: 500 !important;
}
#Signup_Form a:hover { color: var(--vx-accent-hi) !important; text-decoration: underline !important; }
.clean-theme-signup-box::before {
content: "";
position: absolute;
top: -1px; left: 16px;
width: 24px;
height: 2px;
background: var(--vx-accent);
border-radius: 999px;
}
.clean-theme-signup-box-title {
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
margin: 0 0 14px !important;
padding: 0 !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.clean-theme-signup-box-title::before {
content: ">_";
color: var(--vx-accent);
font-weight: 700;
}
/* Inside a box use 2-column grid for related fields */
.clean-theme-signup-box .yuzde50 {
display: inline-block !important;
width: calc(50% - 4px) !important;
vertical-align: top !important;
margin: 0 !important;
}
.clean-theme-signup-box .yuzde50:nth-child(odd) { margin-right: 6px !important; }
.clean-theme-signup-box .yuzde100 { display: block !important; width: 100% !important; }
/* Radio kind (Bireysel / Kurumsal) */
.clean-theme-signup-box .radio-custom + .radio-custom-label {
padding: 12px 18px !important;
border-radius: var(--vx-r-md) !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
margin: 4px 6px 0 0 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
transition: all .15s !important;
}
.clean-theme-signup-box .radio-custom + .radio-custom-label:hover {
border-color: var(--vx-border-strong) !important;
}
.clean-theme-signup-box .radio-custom:checked + .radio-custom-label {
border-color: var(--vx-accent) !important;
background: var(--vx-accent-soft) !important;
color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.checktext {
font-size: 13px !important;
color: var(--vx-text-2) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 600 !important;
}
.radio-custom:checked + .radio-custom-label .checktext { color: var(--vx-accent) !important; }
/* Password generator block */
.clean-theme-password-generator, .password-generator, #genrandpw {
background: var(--vx-surface-2) !important;
border: 1px dashed var(--vx-accent-border) !important;
border-radius: var(--vx-r-md) !important;
padding: 10px 14px !important;
margin: 0 0 12px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
color: var(--vx-accent) !important;
font-size: 12px !important;
font-family: var(--vx-font-mono) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
font-weight: 600 !important;
}
#genrandpw:hover { background: var(--vx-accent-soft) !important; }
/* "Beni Hatırla" + "Parolamı Unuttum" row */
#Signin_Form .yuzde100[style*="font-size"],
#Signin_Form .yuzde100:has(.checkbox-custom) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin: 12px 0 20px !important;
}
.checkbox-custom + .checkbox-custom-label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
font-size: 13px !important;
color: var(--vx-text-2) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
}
.checkbox-custom + .checkbox-custom-label::before {
content: "" !important;
width: 16px !important; height: 16px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border-strong) !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
display: inline-block !important;
transition: all .12s !important;
}
.checkbox-custom:checked + .checkbox-custom-label::before {
background: var(--vx-accent) url("data:image/svg+xml;charset=utf-8,") center/12px no-repeat !important;
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.forgotpasslink, .sifreunuttulink {
color: var(--vx-accent) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
margin: 0 !important;
display: inline !important;
position: relative !important;
}
.forgotpasslink:hover { color: var(--vx-accent-hi) !important; }
.forgotpasslink::after, .sifreunuttulink::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--vx-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s;
}
.forgotpasslink:hover::after { transform: scaleX(1); }
/* Submit button — full width, glowing on hover */
#Signin_Form .gonderbtn, #Signin_Form .clean-theme-btn,
#Signup_Form .gonderbtn, #Signup_Form .clean-theme-btn,
#Signforget_Form .gonderbtn, #Signforget_Form .clean-theme-btn {
width: 100% !important;
height: 50px !important;
margin-top: 12px !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-shadow: 0 8px 24px -8px rgba(227,6,19,0.45) !important;
position: relative !important;
overflow: hidden !important;
}
#Signin_Form .gonderbtn::after,
#Signup_Form .gonderbtn::after {
content: "→";
font-size: 18px;
font-weight: 500;
transition: transform .2s;
}
#Signin_Form .gonderbtn:hover::after,
#Signup_Form .gonderbtn:hover::after { transform: translateX(4px); }
/* Footer note under form — security badge */
#Signin_Form::after, #Signup_Form::after {
content: "🔒 TLS 1.3 ile şifrelendi · WebAuthn destekleniyor";
display: block;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--vx-border);
font-family: var(--vx-font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--vx-text-3);
text-align: center;
text-transform: uppercase;
}
body[lang="en"] #Signin_Form::after, body[lang="en"] #Signup_Form::after {
content: "🔒 Encrypted with TLS 1.3 · WebAuthn supported";
}
/* Tel input plugin compatibility */
.iti.iti--allow-dropdown { width: 100% !important; }
.iti__country-list {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text) !important;
}
.iti__country.iti__highlight { background: var(--vx-surface-2) !important; color: var(--vx-text) !important; }
.iti__dial-code { color: var(--vx-text-3) !important; }
.iti__selected-flag { background: var(--vx-surface-hi) !important; border-right: 1px solid var(--vx-border) !important; }
/* Make sure auth pages don't get accidental display-grid from .formcon */
#Signin_Form .formcon, #Signup_Form .formcon, #Signforget_Form .formcon {
display: block !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
grid-template-columns: none !important;
}
/* Responsive */
@media (max-width: 980px) {
.clean-theme-signinup-con {
grid-template-columns: 1fr !important;
max-width: 480px !important;
}
.clean-theme-signinup-left, .imzabg, .imzabodybg {
padding: 40px 32px !important;
order: 2 !important;
min-height: auto !important;
}
.clean-theme-signinup-right { order: 1 !important; padding: 40px 32px !important; }
.clean-theme-signinup-left::after { width: 200px; height: 200px; }
}
/* =====================================================================
VEXORIA — HOMEPAGE CONCEPT STYLES
New .vxh-* class scope to avoid colliding with .product-group-item /
.wclientblockscon overrides used elsewhere. Premium dark, Apple/Linear
feel — hairline grid, mono accents, ölçülü kırmızı vurgu.
===================================================================== */
/* ---------- HERO ---------- */
.vxh-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 900px 600px at 50% -10%, rgba(227,6,19,0.10) 0%, transparent 60%),
var(--vx-bg);
border-bottom: 1px solid var(--vx-border);
}
.vxh-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
opacity: 0.7;
}
.vxh-hero__inner {
position: relative;
max-width: var(--vx-container);
margin: 0 auto;
padding: 120px var(--vx-gutter) 88px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.vxh-hero__inner > * { width: 100%; }
.vxh-hero__cta { width: auto !important; }
.vxh-domain { width: 100%; max-width: 880px; }
.vxh-hero__badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 999px;
border: 1px solid var(--vx-accent-border);
background: var(--vx-accent-soft);
color: var(--vx-accent);
font-family: var(--vx-font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 32px;
}
.vxh-hero__badge::before {
content: ""; width: 6px; height: 6px; border-radius: 999px;
background: var(--vx-accent); box-shadow: 0 0 10px var(--vx-accent);
}
.vxh-hero__title {
font-size: clamp(48px, 7vw, 92px) !important;
line-height: 0.96 !important;
letter-spacing: -0.045em !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
margin: 0 0 12px !important;
max-width: 920px;
margin-left: auto; margin-right: auto;
text-align: center;
}
.vxh-hero__title .accent { color: var(--vx-accent); }
.vxh-hero__subtitle {
font-size: clamp(20px, 2.2vw, 28px);
color: var(--vx-text-3);
letter-spacing: -0.02em;
font-weight: 500;
margin: 0 0 28px;
text-align: center;
}
/* ---------- LOCATIONS MAP ---------- */
.vxh-locations-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 32px;
}
.vxh-loc-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: 8px;
}
.vxh-loc-item__dot {
width: 6px; height: 6px; border-radius: 999px;
background: var(--vx-success);
box-shadow: 0 0 8px var(--vx-success);
flex-shrink: 0;
animation: vxh-loc-pulse 2.4s ease-in-out infinite;
}
.vxh-loc-item__dot.is-primary {
background: var(--vx-accent);
box-shadow: 0 0 10px var(--vx-accent);
animation-delay: -1.2s;
}
@keyframes vxh-loc-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
.vxh-loc-item__name {
font-size: 13px;
color: var(--vx-text);
flex: 1;
}
.vxh-loc-item__ping {
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
}
.vxh-map {
position: relative;
aspect-ratio: 16 / 9;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
overflow: hidden;
color: var(--vx-text-4);
}
.vxh-map__dots {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.vxh-map__pin {
position: absolute;
width: 10px; height: 10px;
border-radius: 999px;
background: var(--vx-success);
box-shadow: 0 0 8px var(--vx-success), 0 0 0 2px var(--vx-surface);
transform: translate(-50%, -50%);
z-index: 2;
animation: vxh-pin-pulse 2.4s ease-in-out infinite;
}
.vxh-map__pin.is-primary {
background: var(--vx-accent);
box-shadow: 0 0 14px var(--vx-accent), 0 0 0 2px var(--vx-surface);
width: 12px; height: 12px;
}
@keyframes vxh-pin-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
.vxh-map__pulse {
position: absolute;
left: 50%; top: 50%;
width: 100%; height: 100%;
border-radius: 999px;
background: var(--vx-accent);
opacity: 0.5;
transform: translate(-50%, -50%);
animation: vxh-map-pulse 2.2s ease-out infinite;
pointer-events: none;
}
.vxh-map__pulse--2 { animation-delay: 1.1s; }
.vxh-map__pin:not(.is-primary) .vxh-map__pulse { background: var(--vx-success); }
@keyframes vxh-map-pulse {
0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.6; }
100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}
.vxh-map__legend {
position: absolute;
bottom: 16px; left: 16px;
background: color-mix(in srgb, var(--vx-bg) 78%, transparent);
backdrop-filter: blur(8px);
border: 1px solid var(--vx-border);
border-radius: 8px;
padding: 8px 12px;
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-2);
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.04em;
}
.vxh-status-dot {
width: 6px; height: 6px; border-radius: 999px;
background: var(--vx-success);
box-shadow: 0 0 8px var(--vx-success);
}
@media (max-width: 1024px) {
.vxh-section__head[style*="1.4fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
.vxh-locations-list { grid-template-columns: 1fr; }
}
.vxh-hero__desc {
max-width: 640px;
margin: 0 auto 40px;
font-size: 18px;
line-height: 1.6;
color: var(--vx-text-2);
}
.vxh-hero__cta {
display: flex; justify-content: center; gap: 12px; margin-bottom: 56px;
}
.vxh-hero__cta a {
height: 52px !important;
padding: 0 24px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: var(--vx-r-md) !important;
}
/* Domain search panel */
.vxh-domain {
max-width: 880px;
margin: 0 auto;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
padding: 6px;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
position: relative;
}
.vxh-domain__form {
display: flex; gap: 8px; padding: 16px;
}
.vxh-domain__form input[type=text] {
flex: 1 !important;
height: 56px !important;
padding: 0 18px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 10px !important;
color: var(--vx-text) !important;
font-size: 16px !important;
margin: 0 !important;
}
.vxh-domain__form input[type=text]:focus {
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.vxh-domain__form input[type=submit],
.vxh-domain__form button {
height: 56px !important;
padding: 0 28px !important;
min-width: 140px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
cursor: pointer !important;
font-weight: 700 !important;
font-size: 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.vxh-domain__form input[type=submit]:hover,
.vxh-domain__form button:hover { background: var(--vx-accent-hi) !important; }
.vxh-domain__tlds {
padding: 0 16px 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.vxh-domain__tlds-label {
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vxh-domain__tld {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 6px;
background: var(--vx-surface-2);
color: var(--vx-text-2);
border: 1px solid var(--vx-border);
cursor: pointer;
font-family: var(--vx-font-mono);
font-size: 12px;
font-weight: 500;
transition: all .15s;
text-decoration: none;
}
.vxh-domain__tld:hover {
border-color: var(--vx-accent-border);
color: var(--vx-accent);
background: var(--vx-accent-soft);
}
.vxh-domain__tld img { max-height: 14px; vertical-align: middle; }
.vxh-domain__tld-price { font-size: 11px; color: var(--vx-text-3); font-weight: 500; }
.vxh-domain__tld-promo {
background: var(--vx-accent); color: #fff;
padding: 1px 6px; border-radius: 3px;
font-size: 9px; letter-spacing: 0.04em;
}
.vxh-domain__hint {
padding: 0 16px 16px;
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
margin: 0;
}
/* Hero trust row */
.vxh-trust {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--vx-border);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.vxh-trust__item {
display: flex; align-items: center; gap: 14px;
justify-content: flex-start;
padding: 0 8px;
}
.vxh-trust__icon {
width: 40px; height: 40px;
border-radius: var(--vx-r-md);
background: var(--vx-surface);
border: 1px solid var(--vx-border);
display: inline-flex;
align-items: center; justify-content: center;
color: var(--vx-accent);
flex-shrink: 0;
font-size: 16px;
}
.vxh-trust__label {
font-size: 13px;
color: var(--vx-text-2);
font-weight: 500;
text-align: left;
}
/* ---------- SECTION SHELL ---------- */
.vxh-section {
padding: 120px 0;
border-bottom: 1px solid var(--vx-border);
}
.vxh-section__inner {
max-width: var(--vx-container);
margin: 0 auto;
padding: 0 var(--vx-gutter);
}
.vxh-section__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 64px;
}
.vxh-section__head--center {
display: block;
text-align: center;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.vxh-eyebrow {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.vxh-eyebrow__num { color: var(--vx-accent); font-weight: 600; }
.vxh-eyebrow__line { width: 28px; height: 1px; background: var(--vx-border-strong); display: inline-block; }
.vxh-section__title {
margin: 18px 0 0;
font-size: clamp(36px, 4.5vw, 56px) !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
max-width: 720px;
}
.vxh-section__desc {
max-width: 480px;
margin: 0;
font-size: 17px;
line-height: 1.6;
color: var(--vx-text-2);
}
/* ---------- PRODUCT GRID (4-up cards) ---------- */
.vxh-products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
overflow: hidden;
background: var(--vx-surface);
}
.vxh-product {
position: relative;
padding: 32px 28px;
border-right: 1px solid var(--vx-border);
border-bottom: 1px solid var(--vx-border);
background: transparent;
transition: background .2s;
cursor: pointer;
display: flex;
flex-direction: column;
min-height: 240px;
text-decoration: none;
color: var(--vx-text);
}
.vxh-product:nth-child(4n) { border-right: none; }
.vxh-product:hover { background: var(--vx-surface-2); }
.vxh-product__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 56px;
}
.vxh-product__tag {
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
letter-spacing: 0.12em;
font-weight: 500;
}
.vxh-product__icon {
width: 38px; height: 38px;
border-radius: 8px;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
display: inline-flex;
align-items: center; justify-content: center;
color: var(--vx-text);
transition: color .2s, background .2s, border-color .2s;
font-size: 16px;
}
.vxh-product:hover .vxh-product__icon {
color: var(--vx-accent);
background: var(--vx-accent-soft);
border-color: var(--vx-accent-border);
}
.vxh-product__title {
font-size: 22px !important;
letter-spacing: -0.02em !important;
margin: 0 0 8px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
}
.vxh-product__desc {
font-size: 13px !important;
color: var(--vx-text-3) !important;
margin: 0 0 24px !important;
line-height: 1.5 !important;
flex: 1;
}
.vxh-product__foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid var(--vx-border);
margin-top: auto;
}
.vxh-product__arrow {
width: 32px; height: 32px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--vx-border);
color: var(--vx-text-2);
display: inline-flex;
align-items: center; justify-content: center;
transition: all .2s;
}
.vxh-product:hover .vxh-product__arrow {
background: var(--vx-accent);
border-color: var(--vx-accent);
color: #fff;
transform: translateX(2px);
}
.vxh-product__cta-label {
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color .2s;
}
.vxh-product:hover .vxh-product__cta-label { color: var(--vx-accent); }
/* ---------- FEATURES GRID (3-up cells) ---------- */
.vxh-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--vx-border);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-xl);
overflow: hidden;
}
.vxh-feature {
background: var(--vx-surface);
padding: 40px 36px;
min-height: 260px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: background .2s;
}
.vxh-feature:hover { background: var(--vx-surface-2); }
.vxh-feature__num {
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-accent);
letter-spacing: 0.1em;
padding: 3px 10px;
border-radius: 4px;
border: 1px solid var(--vx-accent-border);
background: var(--vx-accent-soft);
align-self: flex-start;
font-weight: 600;
}
.vxh-feature__body { margin-top: 32px; }
.vxh-feature__title {
font-size: 22px !important;
letter-spacing: -0.02em !important;
margin: 0 0 12px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
}
.vxh-feature__desc {
font-size: 14px !important;
color: var(--vx-text-2) !important;
margin: 0 !important;
line-height: 1.65 !important;
}
/* ---------- STATS BAND ---------- */
.vxh-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: var(--vx-container);
margin: 0 auto;
border-left: 1px solid var(--vx-border);
border-right: 1px solid var(--vx-border);
}
.vxh-stat {
padding: 64px 32px;
border-right: 1px solid var(--vx-border);
}
.vxh-stat:last-child { border-right: none; }
.vxh-stat__value {
font-size: 56px;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--vx-text);
line-height: 1;
}
.vxh-stat__label {
margin-top: 16px;
font-family: var(--vx-font-mono);
font-size: 12px;
color: var(--vx-text-3);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ---------- PARTNERS STRIP ---------- */
.vxh-partners-section {
padding: 80px 0;
border-bottom: 1px solid var(--vx-border);
}
.vxh-partners-head {
text-align: center;
margin-bottom: 40px;
}
.vxh-partners {
display: grid;
grid-template-columns: repeat(8, 1fr);
align-items: center;
max-width: var(--vx-container);
margin: 0 auto;
border-top: 1px solid var(--vx-border);
border-bottom: 1px solid var(--vx-border);
}
.vxh-partner {
padding: 28px 16px;
text-align: center;
border-right: 1px solid var(--vx-border);
color: var(--vx-text-3);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.02em;
font-family: var(--vx-font-sans);
transition: color .2s;
}
.vxh-partner:last-child { border-right: none; }
.vxh-partner:hover { color: var(--vx-text); }
/* ---------- CTA BAND ---------- */
.vxh-cta {
padding: 140px 0;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 800px 500px at 50% 100%, rgba(227,6,19,0.16) 0%, transparent 60%),
var(--vx-bg);
border-bottom: 1px solid var(--vx-border);
}
.vxh-cta::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
opacity: 0.5;
}
.vxh-cta__inner {
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 0 var(--vx-gutter);
text-align: center;
}
.vxh-cta__title {
font-size: clamp(40px, 5.5vw, 76px) !important;
letter-spacing: -0.04em !important;
font-weight: 600 !important;
line-height: 1 !important;
margin: 0 !important;
color: var(--vx-text) !important;
}
.vxh-cta__title .accent { color: var(--vx-accent); }
.vxh-cta__desc {
margin: 28px 0 0;
font-family: var(--vx-font-mono);
font-size: 13px;
color: var(--vx-text-2);
letter-spacing: 0.06em;
}
.vxh-cta__buttons {
margin-top: 44px;
display: flex;
justify-content: center;
gap: 12px;
}
.vxh-cta__buttons a {
height: 52px !important;
padding: 0 26px !important;
font-size: 15px !important;
font-weight: 600 !important;
}
/* ---------- NEWS / KB CARDS (homepage news block) ---------- */
.vxh-news {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vxh-news__card {
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: var(--vx-r-lg);
padding: 24px;
transition: border-color .2s;
}
.vxh-news__card:hover { border-color: var(--vx-border-strong); }
.vxh-news__date {
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.vxh-news__title {
font-size: 18px;
margin: 0 0 10px;
font-weight: 600;
color: var(--vx-text);
}
.vxh-news__title a { color: var(--vx-text); text-decoration: none; }
.vxh-news__title a:hover { color: var(--vx-accent); }
.vxh-news__desc {
font-size: 13px;
color: var(--vx-text-2);
margin: 0;
line-height: 1.55;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.vxh-hero__inner { padding: 80px var(--vx-gutter) 60px; }
.vxh-section { padding: 80px 0; }
.vxh-section__head { grid-template-columns: 1fr; gap: 16px; }
.vxh-products { grid-template-columns: repeat(2, 1fr); }
.vxh-product:nth-child(4n) { border-right: 1px solid var(--vx-border); }
.vxh-product:nth-child(2n) { border-right: none; }
.vxh-features { grid-template-columns: repeat(2, 1fr); }
.vxh-stats { grid-template-columns: repeat(2, 1fr); }
.vxh-stat:nth-child(2n) { border-right: none; }
.vxh-partners { grid-template-columns: repeat(4, 1fr); }
.vxh-trust { grid-template-columns: repeat(2, 1fr); }
.vxh-news { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.vxh-hero__inner { padding: 56px 16px 40px; }
.vxh-products { grid-template-columns: 1fr; }
.vxh-product { border-right: none; }
.vxh-features { grid-template-columns: 1fr; }
.vxh-stats { grid-template-columns: 1fr; }
.vxh-stat { border-right: none; padding: 40px 24px; }
.vxh-stat__value { font-size: 40px; }
.vxh-partners { grid-template-columns: repeat(2, 1fr); }
.vxh-trust { grid-template-columns: 1fr; }
.vxh-domain__form { flex-direction: column; }
.vxh-domain__form input[type=submit],
.vxh-domain__form button { width: 100% !important; }
.vxh-cta { padding: 80px 0; }
.vxh-cta__buttons { flex-direction: column; }
}
/* =====================================================================
VEXORIA — PRODUCTS PAGES — ULTRA PREMIUM + HIGH-TECH
Hosting / VPS / Dedicated paket gösterimleri
===================================================================== */
/* ---------- Page title ---------- */
.pakettitle {
text-align: center !important;
padding: 80px var(--vx-gutter) 56px !important;
margin: 0 auto 40px !important;
background: transparent !important;
border: none !important;
position: relative !important;
overflow: hidden !important;
max-width: var(--vx-container) !important;
width: 100% !important;
}
.pakettitle::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 700px 350px at 50% 0%, var(--vx-accent-soft) 0%, transparent 70%);
}
.pakettitle::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
opacity: 0.4;
}
.pakettitle > * { position: relative; z-index: 1; }
.pakettitle h1 {
font-size: clamp(40px, 5.5vw, 72px) !important;
letter-spacing: -0.04em !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
margin: 0 auto 18px !important;
line-height: 1.05 !important;
max-width: 900px !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
.pakettitle h1 strong { color: var(--vx-text) !important; }
.pakettitle h2 {
font-size: 17px !important;
color: var(--vx-text-2) !important;
font-weight: 400 !important;
margin: 0 auto !important;
max-width: 640px !important;
line-height: 1.6 !important;
}
/* ---------- Category tabs ---------- */
.categoriesproduct {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 auto 56px !important;
padding: 6px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
width: fit-content !important;
max-width: calc(100% - 32px) !important;
position: relative !important;
z-index: 5 !important;
}
.categoriesproduct .lbtn, .categoriesproduct a {
height: 42px !important; padding: 0 20px !important;
background: transparent !important; border: 1px solid transparent !important;
color: var(--vx-text-2) !important; border-radius: 999px !important;
display: inline-flex !important; align-items: center !important; gap: 8px !important;
font-size: 13px !important; font-weight: 500 !important;
text-decoration: none !important; white-space: nowrap !important;
}
.categoriesproduct a:hover { background: var(--vx-surface-2) !important; color: var(--vx-text) !important; }
.categoriesproduct a#category-button-active, .categoriesproduct a.active {
background: var(--vx-accent) !important; border-color: var(--vx-accent) !important;
color: #fff !important;
box-shadow: 0 8px 24px -8px rgba(227,6,19,0.5) !important;
}
/* ====================================================================
HOSTING — ULTRA PREMIUM TIER CARDS
Gradient border + glassy interior + scanline + animated glow
==================================================================== */
body#clean-theme-client .tablopaketler {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 24px !important;
max-width: var(--vx-container) !important;
margin: 0 auto 64px !important;
padding: 8px var(--vx-gutter) 8px !important;
background: transparent !important;
float: none !important;
align-items: stretch !important;
overflow: visible !important;
}
/* Outer wrapper for gradient border effect */
.tablepaket {
background: transparent !important;
border: none !important;
border-radius: 22px !important;
padding: 0 !important;
width: auto !important;
margin: 0 !important;
float: none !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
min-height: 600px !important;
box-shadow: none !important;
isolation: isolate !important;
contain: layout !important;
/* The "gradient ring" using padded outer */
background:
linear-gradient(180deg, var(--vx-surface-2) 0%, var(--vx-surface) 30%, var(--vx-surface) 100%) !important;
outline: 1px solid var(--vx-border) !important;
outline-offset: -1px !important;
transition: transform .25s ease, outline-color .2s !important;
overflow: hidden !important;
}
/* Hex/circuit pattern in the background */
.tablepaket::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(circle at 50% 0%, var(--vx-accent-soft) 0%, transparent 50%),
url("data:image/svg+xml;utf8,");
background-size: 100% 100%, 90px 90px;
background-position: 50% 0%, 50% -10px;
background-repeat: no-repeat, repeat;
opacity: 0.6;
z-index: 0;
}
/* Top scan-line — animated for popular */
.tablepaket::after {
content: ""; position: absolute;
top: 0; left: 20%; right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--vx-border-strong), transparent);
z-index: 1;
}
.tablepaket:hover {
transform: translateY(-6px) !important;
outline-color: var(--vx-border-strong) !important;
}
/* POPULAR (.active) — full glow treatment */
.tablepaket.active {
outline: 1px solid var(--vx-accent-border) !important;
box-shadow:
0 0 0 1px rgba(227,6,19,0.12),
0 0 60px -20px rgba(227,6,19,0.55),
0 32px 80px -24px rgba(227,6,19,0.3) !important;
background:
radial-gradient(ellipse 400px 200px at 50% 0%, rgba(227,6,19,0.18), transparent 70%),
linear-gradient(180deg, var(--vx-surface-2) 0%, var(--vx-surface) 30%, var(--vx-surface) 100%) !important;
}
.tablepaket.active::after {
background: linear-gradient(90deg, transparent, var(--vx-accent), transparent);
height: 2px;
filter: drop-shadow(0 0 6px var(--vx-accent));
animation: vx-scan 3s ease-in-out infinite;
}
@keyframes vx-scan {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.tablepopular {
position: absolute !important;
top: 18px !important; right: 18px !important;
left: auto !important; transform: none !important;
background: var(--vx-accent) !important; color: #fff !important;
padding: 6px 14px !important; border-radius: 999px !important;
font-family: var(--vx-font-mono) !important; font-size: 10px !important;
letter-spacing: 0.14em !important; text-transform: uppercase !important;
font-weight: 700 !important; white-space: nowrap !important;
box-shadow: 0 8px 24px -6px rgba(227,6,19,0.6), 0 0 0 4px rgba(227,6,19,0.08) !important;
z-index: 3 !important;
}
.tablepaket > * { position: relative; z-index: 2; }
/* Plan eyebrow */
.tpakettitle {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
color: var(--vx-accent) !important;
margin: 36px 32px 4px !important;
text-align: left !important;
text-transform: uppercase !important;
font-family: var(--vx-font-mono) !important;
}
.tablepaket h4 {
display: none !important; /* hide raw period label */
}
/* Price block */
.tablepaket h3 {
font-size: 52px !important;
font-weight: 800 !important;
letter-spacing: -0.045em !important;
color: var(--vx-text) !important;
line-height: 1 !important;
margin: 16px 32px 8px !important;
text-align: left !important;
display: flex !important;
align-items: baseline !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
overflow: visible !important;
}
.tablepaket.active h3 { color: var(--vx-accent) !important; }
.tablepaket h3 .amount_spot_view {
display: inline-flex !important;
align-items: baseline !important;
gap: 4px !important;
white-space: nowrap !important;
}
.tablepaket h3 .amount_spot_view i {
font-style: normal !important;
font-size: 22px !important;
color: var(--vx-text-3) !important;
font-weight: 600 !important;
margin-right: 2px;
}
.tablepaket h3::after {
content: " / ay";
font-family: var(--vx-font-mono);
font-size: 12px;
color: var(--vx-text-3);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 8px;
align-self: center;
}
.paketline {
height: 1px !important;
background: linear-gradient(90deg, transparent, var(--vx-border), transparent) !important;
border: none !important;
margin: 20px 32px !important;
width: auto !important;
}
/* Feature rows */
.tablepaket > span {
display: flex !important;
align-items: center !important;
padding: 9px 32px !important;
font-size: 13px !important;
color: var(--vx-text-2) !important;
border: none !important;
margin: 0 !important;
position: relative !important;
line-height: 1.5 !important;
}
.tablepaket > span::before {
content: "";
width: 18px; height: 18px;
border-radius: 999px;
background: var(--vx-accent-soft);
border: 1px solid var(--vx-accent-border);
margin-right: 12px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;charset=utf-8,");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
}
.tablepaket > span strong {
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
font-weight: 600 !important;
margin-left: auto !important;
letter-spacing: 0.02em !important;
}
.tablepaket .products_features {
font-size: 14px !important;
color: var(--vx-text-2) !important;
line-height: 1.7 !important;
margin: 0 32px 16px !important;
padding: 16px 0 !important;
}
/* CTA */
.tablepaket .gonderbtn {
width: calc(100% - 64px) !important;
height: 52px !important;
margin: auto 32px 32px !important;
background: var(--vx-surface) !important;
color: var(--vx-text) !important;
border: 1px solid var(--vx-border-strong) !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
border-radius: 14px !important;
font-size: 13px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
transition: all .2s !important;
position: relative !important;
overflow: hidden !important;
z-index: 2 !important;
}
.tablepaket .gonderbtn::after { content: "→"; font-size: 18px; transition: transform .2s; }
.tablepaket .gonderbtn:hover {
background: var(--vx-text) !important;
border-color: var(--vx-text) !important;
color: var(--vx-bg) !important;
}
.tablepaket .gonderbtn:hover::after { transform: translateX(4px); }
.tablepaket.active .gonderbtn {
background: linear-gradient(180deg, var(--vx-accent) 0%, var(--vx-accent-hi) 100%) !important;
border: none !important;
color: #fff !important;
box-shadow:
0 14px 36px -10px rgba(227,6,19,0.65),
inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.tablepaket.active .gonderbtn:hover {
box-shadow:
0 18px 44px -10px rgba(227,6,19,0.85),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
/* ====================================================================
VPS / DEDICATED — HIGH-TECH SPEC PANEL (different from hosting)
==================================================================== */
.servercattitle {
font-size: clamp(22px, 2.8vw, 32px) !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
color: var(--vx-text) !important;
margin: 48px auto 24px !important;
padding: 0 var(--vx-gutter) !important;
max-width: var(--vx-container) !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.servercattitle::before {
content: ""; width: 36px; height: 2px;
background: var(--vx-accent); border-radius: 999px;
}
.servercattitle + .tablopaketler,
.servercattitle ~ .tablopaketler {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
max-width: var(--vx-container) !important;
margin: 0 auto 56px !important;
padding: 0 var(--vx-gutter) !important;
}
/* Each server: tech panel with 4 columns */
.servercattitle + .tablopaketler .tablepaket,
.servercattitle ~ .tablopaketler .tablepaket {
display: grid !important;
grid-template-columns: 280px 1fr 200px 160px !important;
gap: 24px !important;
min-height: auto !important;
padding: 24px 28px !important;
align-items: center !important;
background:
linear-gradient(135deg, rgba(227,6,19,0.04) 0%, transparent 30%),
var(--vx-surface) !important;
outline: 1px solid var(--vx-border) !important;
outline-offset: -1px !important;
border-radius: 16px !important;
border: none !important;
transition: outline-color .2s, transform .2s !important;
position: relative !important;
overflow: hidden !important;
}
.servercattitle + .tablopaketler .tablepaket::before,
.servercattitle ~ .tablopaketler .tablepaket::before {
display: block !important;
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--vx-border);
transition: background .2s;
}
.servercattitle + .tablopaketler .tablepaket::after,
.servercattitle ~ .tablopaketler .tablepaket::after { display: none !important; }
.servercattitle + .tablopaketler .tablepaket:hover,
.servercattitle ~ .tablopaketler .tablepaket:hover {
outline-color: var(--vx-accent-border) !important;
transform: translateX(2px) !important;
}
.servercattitle + .tablopaketler .tablepaket:hover::before,
.servercattitle ~ .tablopaketler .tablepaket:hover::before {
background: var(--vx-accent) !important;
box-shadow: 0 0 12px var(--vx-accent);
}
.servercattitle + .tablopaketler .tablepaket.active,
.servercattitle ~ .tablopaketler .tablepaket.active {
outline-color: var(--vx-accent-border) !important;
background:
linear-gradient(135deg, rgba(227,6,19,0.10) 0%, transparent 30%),
var(--vx-surface) !important;
box-shadow: 0 0 0 1px var(--vx-accent-border) !important;
}
.servercattitle + .tablopaketler .tablepaket.active::before,
.servercattitle ~ .tablopaketler .tablepaket.active::before {
background: var(--vx-accent) !important;
box-shadow: 0 0 16px var(--vx-accent);
}
/* Title column with rack icon */
.servercattitle + .tablopaketler .tablepaket .tpakettitle,
.servercattitle ~ .tablopaketler .tablepaket .tpakettitle {
text-align: left !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -0.02em !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
font-family: var(--vx-font-sans) !important;
text-transform: none !important;
}
.servercattitle + .tablopaketler .tablepaket .tpakettitle::before,
.servercattitle ~ .tablopaketler .tablepaket .tpakettitle::before {
content: "";
width: 48px; height: 48px;
background: var(--vx-bg);
border: 1px solid var(--vx-border);
border-radius: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.servercattitle + .tablopaketler .tablepaket .paketline,
.servercattitle ~ .tablopaketler .tablepaket .paketline { display: none !important; }
/* Spec cells — show 4 at most, hide overflow */
.servercattitle + .tablopaketler .tablepaket > span,
.servercattitle ~ .tablopaketler .tablepaket > span {
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 14px !important;
border: none !important;
border-left: 1px solid var(--vx-border) !important;
font-family: var(--vx-font-mono) !important;
font-size: 9px !important;
color: var(--vx-text-3) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
gap: 4px !important;
margin: 0 !important;
font-weight: 600 !important;
}
.servercattitle + .tablopaketler .tablepaket > span:nth-of-type(1),
.servercattitle ~ .tablopaketler .tablepaket > span:nth-of-type(1) { border-left: none !important; padding-left: 0 !important; }
.servercattitle + .tablopaketler .tablepaket > span::before,
.servercattitle ~ .tablopaketler .tablepaket > span::before { display: none !important; }
.servercattitle + .tablopaketler .tablepaket > span strong,
.servercattitle ~ .tablopaketler .tablepaket > span strong {
font-family: var(--vx-font-sans) !important;
font-size: 16px !important;
color: var(--vx-text) !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: -0.015em !important;
margin-left: 0 !important;
line-height: 1.2 !important;
}
/* Grid layout for spec columns */
.servercattitle + .tablopaketler .tablepaket,
.servercattitle ~ .tablopaketler .tablepaket {
grid-template-areas: "title specs price cta" !important;
}
.servercattitle + .tablopaketler .tablepaket .tpakettitle,
.servercattitle ~ .tablopaketler .tablepaket .tpakettitle { grid-area: title; }
/* Bundle all cells in a grid-wrapper-less hack: wrap with flex */
.servercattitle + .tablopaketler .tablepaket > span:first-of-type,
.servercattitle ~ .tablopaketler .tablepaket > span:first-of-type {
grid-area: specs;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
width: 100% !important;
padding: 0 !important;
position: relative !important;
}
/* Hide spans beyond first since we can't wrap them — use products_features instead */
/* Price column */
.servercattitle + .tablopaketler .tablepaket h3,
.servercattitle ~ .tablopaketler .tablepaket h3 {
grid-area: price !important;
font-size: 28px !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
color: var(--vx-text) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
text-align: left !important;
justify-content: flex-start !important;
display: flex !important;
align-items: baseline !important;
white-space: nowrap !important;
}
.servercattitle + .tablopaketler .tablepaket.active h3,
.servercattitle ~ .tablopaketler .tablepaket.active h3 { color: var(--vx-accent) !important; }
.servercattitle + .tablopaketler .tablepaket h3::after,
.servercattitle ~ .tablopaketler .tablepaket h3::after {
content: " /ay";
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-text-3);
font-weight: 500;
letter-spacing: 0.08em;
margin-left: 6px;
align-self: center;
}
.servercattitle + .tablopaketler .tablepaket h3 .amount_spot_view i,
.servercattitle ~ .tablopaketler .tablepaket h3 .amount_spot_view i {
font-size: 14px !important;
color: var(--vx-text-3) !important;
}
.servercattitle + .tablopaketler .tablepaket h4,
.servercattitle ~ .tablopaketler .tablepaket h4 { display: none !important; }
/* CTA pill */
.servercattitle + .tablopaketler .tablepaket .gonderbtn,
.servercattitle ~ .tablopaketler .tablepaket .gonderbtn {
grid-area: cta;
margin: 0 !important;
width: 100% !important;
height: 48px !important;
padding: 0 18px !important;
white-space: nowrap !important;
border-radius: 12px !important;
background: linear-gradient(180deg, var(--vx-accent) 0%, var(--vx-accent-hi) 100%) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 12px 28px -10px rgba(227,6,19,0.55), inset 0 1px 0 rgba(255,255,255,0.15) !important;
font-size: 12px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.servercattitle + .tablopaketler .tablepaket .gonderbtn::after,
.servercattitle ~ .tablopaketler .tablepaket .gonderbtn::after { content: "→"; }
.servercattitle + .tablopaketler .tablepaket .gonderbtn:hover,
.servercattitle ~ .tablopaketler .tablepaket .gonderbtn:hover {
box-shadow: 0 16px 36px -10px rgba(227,6,19,0.75), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
/* Stock label / out-of-stock */
.servercattitle + .tablopaketler .tablepaket .gonderbtn.stockout,
.servercattitle ~ .tablopaketler .tablepaket .gonderbtn.stockout {
background: var(--vx-surface-2) !important;
color: var(--vx-text-3) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* ====================================================================
FAQ — premium, NO LAYOUT SHIFT (jQuery accordion only one open)
==================================================================== */
.sss {
max-width: 920px !important;
margin: 80px auto !important;
padding: 0 var(--vx-gutter) !important;
contain: layout !important;
}
.sss h4 {
font-size: clamp(32px, 4vw, 52px) !important;
letter-spacing: -0.035em !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
margin: 0 0 40px !important;
text-align: center !important;
line-height: 1.05 !important;
}
.sss h4 strong { color: var(--vx-text) !important; }
.sss h4::before {
content: "// SSS";
font-family: var(--vx-font-mono);
font-size: 12px;
color: var(--vx-accent);
letter-spacing: 0.2em;
display: block;
margin-bottom: 16px;
font-weight: 600;
}
.sss #accordion {
background: transparent !important;
border: none !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.sss #accordion h3 {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 14px !important;
padding: 20px 24px !important;
margin: 0 !important;
color: var(--vx-text) !important;
font-size: 15px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
transition: background .15s, border-color .15s !important;
}
.sss #accordion h3:hover {
background: var(--vx-surface-2) !important;
border-color: var(--vx-border-strong) !important;
}
.sss #accordion h3.ui-accordion-header-active {
background: var(--vx-surface-2) !important;
border-color: var(--vx-accent-border) !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.sss #accordion h3 .ui-icon {
background: none !important;
text-indent: 0 !important;
width: 28px !important;
height: 28px !important;
margin: 0 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text-3) !important;
transition: transform .25s ease, background .2s, border-color .2s !important;
flex-shrink: 0 !important;
}
.sss #accordion h3 .ui-icon::before {
content: "+";
font-family: var(--vx-font-sans);
font-size: 18px;
line-height: 1;
color: var(--vx-text-2);
font-weight: 400;
}
.sss #accordion .ui-accordion-header-active .ui-icon {
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
transform: rotate(45deg) !important;
}
.sss #accordion .ui-accordion-header-active .ui-icon::before { color: #fff; }
.sss #accordion .ui-accordion-content {
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-accent-border) !important;
border-top: none !important;
border-radius: 0 0 14px 14px !important;
padding: 0 28px 24px !important;
margin-top: -10px !important;
color: var(--vx-text-2) !important;
font-size: 14px !important;
line-height: 1.75 !important;
height: auto !important;
/* keep layout stable */
overflow: hidden !important;
}
/* ====================================================================
DETAIL CONTENT AREA
==================================================================== */
.detail-products-features {
max-width: 920px !important;
margin: 64px auto 80px !important;
padding: 56px var(--vx-gutter) !important;
font-size: 16px !important;
line-height: 1.85 !important;
color: var(--vx-text-2) !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 20px !important;
position: relative !important;
}
.detail-products-features::before {
content: "";
position: absolute;
top: -1px; left: 56px;
width: 80px; height: 2px;
background: var(--vx-accent);
border-radius: 999px;
}
.detail-products-features h1,
.detail-products-features h2,
.detail-products-features h3,
.detail-products-features h4,
.detail-products-features h5,
.detail-products-features h6 {
color: var(--vx-text) !important;
letter-spacing: -0.025em !important;
font-weight: 600 !important;
}
.detail-products-features > *:first-child { margin-top: 0 !important; }
.detail-products-features h1 { font-size: clamp(32px, 3.5vw, 44px) !important; margin: 1.6em 0 0.5em !important; }
.detail-products-features h2 { font-size: 28px !important; margin: 1.8em 0 0.6em !important; }
.detail-products-features h3 { font-size: 22px !important; margin: 1.8em 0 0.6em !important; }
.detail-products-features h4 { font-size: 17px !important; font-family: var(--vx-font-mono) !important; color: var(--vx-accent) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin: 2em 0 0.8em !important; font-weight: 600 !important; }
.detail-products-features p { margin: 0 0 1em !important; color: var(--vx-text-2) !important; }
.detail-products-features p strong { color: var(--vx-text) !important; font-weight: 600 !important; }
.detail-products-features ul, .detail-products-features ol {
padding: 0 !important; margin: 16px 0 24px !important; list-style: none !important;
}
.detail-products-features ol { counter-reset: vx-li; }
.detail-products-features li {
padding: 10px 0 10px 32px !important;
color: var(--vx-text-2) !important;
position: relative !important;
border-bottom: 1px dashed var(--vx-border) !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
.detail-products-features li:last-child { border-bottom: none !important; }
.detail-products-features ul li::before {
content: "";
position: absolute;
left: 4px; top: 17px;
width: 14px; height: 14px;
background:
radial-gradient(circle, var(--vx-accent) 0%, var(--vx-accent) 35%, transparent 37%) center/contain no-repeat,
var(--vx-accent-soft);
border: 1px solid var(--vx-accent-border);
border-radius: 999px;
}
.detail-products-features ol li { counter-increment: vx-li; }
.detail-products-features ol li::before {
content: counter(vx-li, decimal-leading-zero);
position: absolute;
left: 0; top: 10px;
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-accent);
font-weight: 700;
letter-spacing: 0.08em;
}
.detail-products-features li strong { color: var(--vx-text) !important; }
.detail-products-features a {
color: var(--vx-accent) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: border-color .15s !important;
}
.detail-products-features a:hover { border-bottom-color: var(--vx-accent) !important; }
.detail-products-features img {
max-width: 100% !important;
border-radius: 14px !important;
margin: 24px 0 !important;
border: 1px solid var(--vx-border) !important;
display: block !important;
}
/* Responsive */
@media (max-width: 1100px) {
body#clean-theme-client .tablopaketler { grid-template-columns: repeat(2, 1fr) !important; }
.servercattitle + .tablopaketler .tablepaket,
.servercattitle ~ .tablopaketler .tablepaket {
grid-template-columns: 1fr !important;
grid-template-areas: "title" "specs" "price" "cta" !important;
gap: 16px !important;
}
.servercattitle + .tablopaketler .tablepaket > span:first-of-type,
.servercattitle ~ .tablopaketler .tablepaket > span:first-of-type {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
}
@media (max-width: 640px) {
body#clean-theme-client .tablopaketler { grid-template-columns: 1fr !important; }
.tablepaket h3 { font-size: 42px !important; }
.detail-products-features { padding: 32px 20px !important; }
}
/* =====================================================================
VEXORIA — DOMAIN REGISTER PAGE (domain.php)
===================================================================== */
/* Top form area — search + transfer buttons aligned, transfer code panel below */
.alanadisorgu, #alanadisorgubg, .domaincheckbox {
max-width: var(--vx-container) !important;
margin: 32px auto 0 !important;
padding: 28px 32px !important;
background: linear-gradient(180deg, var(--vx-surface-2) 0%, var(--vx-surface) 60%) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 18px !important;
position: relative !important;
}
.alanadisorgu::before {
content: ""; position: absolute;
top: 0; left: 20%; right: 20%; height: 1px;
background: linear-gradient(90deg, transparent, var(--vx-accent), transparent);
opacity: 0.5;
}
.alanadisorgu h1 {
text-align: center !important;
font-size: clamp(24px, 3vw, 36px) !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
color: var(--vx-text) !important;
margin: 0 0 20px !important;
line-height: 1.2 !important;
}
.alanadisorgu h1 strong { color: var(--vx-accent) !important; }
.alanadisorgu #domainInput,
.alanadisorgu input[name="domain"],
.alanadisorgu input[type="text"]:not(#transfer_code) {
width: 100% !important;
height: 56px !important;
padding: 0 20px !important;
background: var(--vx-bg) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 12px !important;
color: var(--vx-text) !important;
font-size: 16px !important;
margin-bottom: 12px !important;
}
.alanadisorgu #domainInput:focus {
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.alanadisorgu #checkButton, .alanadisorgu #transferbtn {
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
height: 48px !important;
padding: 0 28px !important;
border-radius: 12px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 6px 0 0 !important;
}
.alanadisorgu #transferbtn {
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
border: 1px solid var(--vx-border-strong) !important;
}
.alanadisorgu #transferbtn:hover {
background: var(--vx-text) !important;
color: var(--vx-bg) !important;
border-color: var(--vx-text) !important;
}
/* Transfer code panel */
#transfercode, .transfercode {
max-width: var(--vx-container) !important;
margin: 12px auto 0 !important;
padding: 24px 32px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-accent-border) !important;
border-radius: 14px !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: center !important;
display: none;
}
/* When jQuery slideDown removes display:none inline, switch to flex */
#transfercode[style*="block"], .transfercode[style*="block"],
#transfercode[style*="flex"], .transfercode[style*="flex"] {
display: flex !important;
}
/* If JS uses different show mechanism, fallback class */
#transfercode.is-open, .transfercode.is-open { display: flex !important; }
#transfercode h5, .transfercode h5 {
flex: 1 1 100% !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--vx-accent) !important;
margin: 0 0 4px !important;
font-weight: 600 !important;
}
#transfercode #transfer_code, .transfercode input {
flex: 1 1 auto !important;
height: 48px !important;
padding: 0 16px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 10px !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
margin: 0 !important;
}
#transferButton {
height: 48px !important;
padding: 0 24px !important;
border-radius: 10px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: none !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
#transferButton:hover { background: var(--vx-accent-hi) !important; color: #fff !important; }
/* TLD pricing table (.tescilucretleri) */
.tescilucretleri {
max-width: var(--vx-container) !important;
margin: 48px auto !important;
padding: 0 var(--vx-gutter) !important;
}
.tescilucretleri h4 {
font-size: clamp(24px, 3vw, 36px) !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
color: var(--vx-text) !important;
margin: 0 0 24px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--vx-border) !important;
position: relative !important;
}
.tescilucretleri h4 strong { color: var(--vx-text) !important; }
.tescilucretleri h4::before {
content: "// TARİFE";
display: block;
font-family: var(--vx-font-mono);
font-size: 11px;
color: var(--vx-accent);
letter-spacing: 0.18em;
margin-bottom: 10px;
font-weight: 600;
}
.tescilucretleri table {
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 14px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden !important;
}
.tescilucretleri thead th, .tescilucretleri thead th[bgcolor] {
background: var(--vx-surface-2) !important;
background-color: var(--vx-surface-2) !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
padding: 16px 20px !important;
border-bottom: 1px solid var(--vx-border) !important;
text-align: left !important;
}
.tescilucretleri thead th[align="center"] { text-align: center !important; }
.tescilucretleri thead th strong { color: var(--vx-text-3) !important; font-weight: 600 !important; }
.tescilucretleri tbody td {
padding: 14px 20px !important;
background: transparent !important;
border-bottom: 1px solid var(--vx-border) !important;
color: var(--vx-text-2) !important;
font-size: 14px !important;
vertical-align: middle !important;
}
.tescilucretleri tbody tr:last-child td { border-bottom: none !important; }
.tescilucretleri tbody tr:hover td { background: var(--vx-surface-2) !important; }
.tescilucretleri tbody tr[style*="#eeeeee5e"],
.tescilucretleri tbody tr[style*="background: #eeeeee"] {
background: var(--vx-accent-soft) !important;
background-color: transparent !important;
border-color: var(--vx-accent-border) !important;
}
.tescilucretleri tbody tr[style*="#eeeeee5e"] td {
background: transparent !important;
border-bottom: 1px solid var(--vx-accent-border) !important;
}
.tescilucretleri tbody td strong {
color: var(--vx-text) !important;
font-weight: 600 !important;
}
/* Override the hard-coded #8BC34A green promo color */
.tescilucretleri tbody td strong[style*="#8BC34A"],
.tescilucretleri tbody td div[style*="#8BC34A"] {
color: var(--vx-accent) !important;
font-family: var(--vx-font-mono) !important;
}
.tescilucretleri tbody td div[style*="line-through"] {
color: var(--vx-text-4) !important;
font-size: 13px !important;
font-family: var(--vx-font-mono) !important;
}
.tescilucretleri tbody td a[data-tooltip] {
color: var(--vx-text-3) !important;
}
.tescilucretleri tbody td a[data-tooltip]:hover { color: var(--vx-accent) !important; }
/* Domain check result list (.lookcolumlist, .lookcolum) */
.lookcolumlist {
display: grid !important;
grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
gap: 12px !important;
align-items: center !important;
padding: 14px 20px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 10px !important;
margin-bottom: 8px !important;
}
.lookcolumlist.tldlisthead {
background: var(--vx-surface-2) !important;
border-color: var(--vx-border-strong) !important;
}
.lookcolumlist.tldlisthead .lookcolum {
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--vx-text-3) !important;
}
.lookcolum {
font-size: 14px !important;
color: var(--vx-text) !important;
}
.lookcolum.tld-name, .lookcolum.tld-domain { font-weight: 600 !important; }
.lookcolum.tld-prices { color: var(--vx-accent) !important; font-family: var(--vx-font-mono) !important; font-weight: 600 !important; }
.lookcolumlist.tldlistfoot {
background: transparent !important;
border: none !important;
padding: 16px 0 !important;
justify-content: flex-end !important;
}
#ContinueButton {
background: var(--vx-accent) !important;
color: #fff !important;
border-radius: 12px !important;
height: 48px !important;
padding: 0 28px !important;
font-weight: 700 !important;
font-size: 14px !important;
}
#ContinueButton[style*="cursor:no-drop"] {
background: var(--vx-surface-2) !important;
color: var(--vx-text-3) !important;
opacity: 0.5 !important;
}
@media (max-width: 1024px) {
.alanadisorgu #checkButton, .alanadisorgu #transferbtn {
width: 100% !important;
margin: 0 0 8px !important;
}
#transfercode, .transfercode { flex-direction: column !important; align-items: stretch !important; }
#transferButton { width: 100% !important; }
.lookcolumlist { grid-template-columns: 1fr 1fr; gap: 8px; }
.tescilucretleri table { font-size: 12px !important; }
}
/* Vexoria — footer social icons */
.vx-footer__social {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--vx-surface);
border: 1px solid var(--vx-border);
border-radius: 999px;
color: var(--vx-text-2);
text-decoration: none;
margin-left: 6px;
transition: all .15s;
}
.vx-footer__social:hover {
background: var(--vx-accent); border-color: var(--vx-accent); color: #fff;
}
.vx-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vx-footer__col ul li a {
color: var(--vx-text-2); text-decoration: none; font-size: 14px;
display: inline-flex; align-items: center; gap: 8px;
}
.vx-footer__col ul li a:hover { color: var(--vx-text); }
.vx-footer__col h4 a { color: inherit; text-decoration: none; }
/* =====================================================================
VEXORIA — text-based logo with red VEX + shimmer animation
===================================================================== */
.vx-logo.vx-logo--text {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-sans);
}
.vx-logo__mark {
display: inline-flex; align-items: center; justify-content: center;
position: relative;
filter: drop-shadow(0 0 8px rgba(227,6,19,0.25));
transition: transform .35s cubic-bezier(.22,.61,.36,1), filter .25s;
}
.vx-logo.vx-logo--text:hover .vx-logo__mark {
transform: rotate(-6deg) scale(1.08);
filter: drop-shadow(0 0 14px rgba(227,6,19,0.6));
}
/* Subtle continuous breathing on the mark glow */
.vx-logo__mark::after {
content: ""; position: absolute; inset: -4px;
border-radius: 999px;
background: radial-gradient(circle, rgba(227,6,19,0.18), transparent 60%);
z-index: -1;
animation: vx-logo-pulse 3.2s ease-in-out infinite;
}
@keyframes vx-logo-pulse {
0%, 100% { opacity: 0.3; transform: scale(0.95); }
50% { opacity: 0.7; transform: scale(1.1); }
}
.vx-logo__text {
position: relative;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1;
color: var(--vx-text);
overflow: hidden;
}
.vx-logo__accent {
color: var(--vx-accent);
/* Shimmer sweep across the VEX text */
background: linear-gradient(
100deg,
var(--vx-accent) 0%,
var(--vx-accent) 40%,
#fff 50%,
var(--vx-accent) 60%,
var(--vx-accent) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: vx-logo-shimmer 4.5s ease-in-out infinite;
animation-delay: 0.5s;
}
@keyframes vx-logo-shimmer {
0%, 70%, 100% { background-position: 100% 0; }
85% { background-position: -100% 0; }
}
/* Footer brand: keep size slightly smaller */
.vx-footer .vx-logo__text { font-size: 18px; }
/* If JS-saved theme is light mode, still keep VEX accent red */
body[data-vx-mode="light"] .vx-logo__text { color: var(--vx-text); }
/* =====================================================================
VEXORIA — giant footer wordmark with shimmer animation
===================================================================== */
.vx-footer__wordmark {
padding: 48px 0 32px !important;
margin-top: 32px !important;
font-family: var(--vx-font-sans) !important;
font-weight: 900 !important;
font-size: min(18vw, 240px) !important;
letter-spacing: -0.06em !important;
line-height: 0.85 !important;
text-align: center !important;
user-select: none !important;
position: relative !important;
/* Outline with shimmer sweep across the strokes */
color: transparent !important;
-webkit-text-stroke: 1.5px var(--vx-border-strong) !important;
background: linear-gradient(
100deg,
var(--vx-border-strong) 0%,
var(--vx-border-strong) 40%,
var(--vx-text-2) 50%,
var(--vx-border-strong) 60%,
var(--vx-border-strong) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
animation: vx-wordmark-shimmer 6s ease-in-out infinite;
}
.vx-footer__wordmark .accent {
-webkit-text-stroke: 1.5px var(--vx-accent-border) !important;
background: linear-gradient(
100deg,
var(--vx-accent-border) 0%,
var(--vx-accent-border) 40%,
var(--vx-accent) 50%,
var(--vx-accent-border) 60%,
var(--vx-accent-border) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
animation: vx-wordmark-shimmer 6s ease-in-out infinite;
animation-delay: 0.4s;
}
@keyframes vx-wordmark-shimmer {
0%, 70%, 100% { background-position: 100% 0; }
85% { background-position: -100% 0; }
}
/* Pulse glow behind the wordmark */
.vx-footer__wordmark::before {
content: "";
position: absolute;
left: 50%; bottom: 20%;
width: 60%; height: 40%;
transform: translateX(-50%);
background: radial-gradient(ellipse, var(--vx-accent-soft), transparent 70%);
z-index: -1;
pointer-events: none;
animation: vx-wordmark-glow 4s ease-in-out infinite;
}
@keyframes vx-wordmark-glow {
0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.95); }
50% { opacity: 0.65; transform: translateX(-50%) scale(1.05); }
}
/* Footer wrapper must be block, not flex (global #wrapper rule was making it flex) */
.clean-theme-footer #wrapper,
.vx-footer #wrapper {
display: block !important;
max-width: var(--vx-container) !important;
margin: 0 auto !important;
padding: 64px var(--vx-gutter) 0 !important;
flex-direction: unset !important;
gap: 0 !important;
}
.clean-theme-footer #wrapper > * { width: 100% !important; flex: none !important; }
.vx-footer__top {
display: grid !important;
grid-template-columns: 1.4fr repeat(4, 1fr) !important;
gap: 48px !important;
padding-bottom: 56px !important;
}
.vx-footer__bottom {
border-top: 1px solid var(--vx-border) !important;
padding: 28px 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 12px !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
}
.vx-footer__wordmark {
display: block !important;
width: 100% !important;
flex: none !important;
clear: both !important;
}
@media (max-width: 1024px) {
.vx-footer__top { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
.vx-footer__top { grid-template-columns: 1fr !important; }
}
/* =====================================================================
VEXORIA — Mobile / responsive overrides
Tüm public + panel sayfaları için kapsamlı mobile uyumluluk.
Mevcut tasarımı bozmaz — sadece tight viewport'ta layout düzenler.
===================================================================== */
/* ---------- 1024px breakpoint (tablet) ---------- */
@media (max-width: 1024px) {
/* Header: hide horizontal nav, show hamburger area */
.vx-header__inner {
height: auto !important;
padding: 12px 16px !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.vx-header__left { gap: 16px !important; flex: 1 1 auto !important; }
.vx-nav {
display: none !important;
}
.vx-mobile-toggle {
display: inline-flex !important;
}
.vx-header__right > .lbtn, .vx-header__right > .gonderbtn {
padding: 0 12px !important;
font-size: 12px !important;
height: 36px !important;
}
.vx-topbar__inner {
height: auto !important;
padding: 6px 16px !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
font-size: 10px !important;
}
.vx-topbar__left, .vx-topbar__right {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* Wrapper grid sidebar+content collapses to single column */
#wrapper {
flex-direction: column !important;
gap: 16px !important;
padding: 16px !important;
}
#wrapper > .mpanelleft {
width: 100% !important;
flex: 0 0 auto !important;
position: static !important;
top: auto !important;
}
#wrapper > .mpanelright,
#wrapper > #bigcontent,
#wrapper > #basic_client_rightcon {
width: 100% !important;
}
#wrapper > .mpanelright > *,
#wrapper > #bigcontent > *,
#wrapper > #basic_client_rightcon > * {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Hero */
.vxh-hero__inner { padding: 56px 16px 40px !important; }
.vxh-hero__title { font-size: clamp(36px, 8vw, 52px) !important; }
.vxh-hero__cta { flex-wrap: wrap !important; }
.vxh-hero__cta a { flex: 1 1 auto !important; min-width: 140px !important; }
.vxh-trust { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.vxh-products { grid-template-columns: repeat(2, 1fr) !important; }
.vxh-product:nth-child(2n) { border-right: none !important; }
.vxh-features { grid-template-columns: repeat(2, 1fr) !important; }
.vxh-stats { grid-template-columns: repeat(2, 1fr) !important; }
.vxh-stat:nth-child(2n) { border-right: none !important; }
.vxh-partners { grid-template-columns: repeat(4, 1fr) !important; }
.vxh-section { padding: 64px 0 !important; }
.vxh-section__head { grid-template-columns: 1fr !important; gap: 16px !important; }
.vxh-section__head > * { max-width: 100% !important; }
/* Domain search hero */
.vxh-domain__form { flex-direction: column !important; padding: 12px !important; }
.vxh-domain__form input[type=text],
.vxh-domain__form input[type=submit] { width: 100% !important; }
.vxh-domain__tlds { padding: 12px !important; }
/* Locations map */
.vxh-section[data-locations] > *, .vxh-section .vxh-section__head[style*="1.4fr"] {
grid-template-columns: 1fr !important; gap: 24px !important;
}
.vxh-locations-list { grid-template-columns: 1fr !important; }
.vxh-map { aspect-ratio: 4 / 3 !important; }
/* Hosting / VPS / Dedicated paket cards */
body#clean-theme-client .tablopaketler {
grid-template-columns: repeat(2, 1fr) !important;
padding: 0 16px !important;
gap: 16px !important;
}
.tablepaket { min-height: auto !important; padding-bottom: 24px !important; }
.tablepaket h3 { font-size: 42px !important; }
/* VPS/Dedicated horizontal rows → stack */
.servercattitle + .tablopaketler .tablepaket,
.servercattitle ~ .tablopaketler .tablepaket {
grid-template-columns: 1fr !important;
grid-template-areas: "title" "specs" "price" "cta" !important;
gap: 14px !important;
padding: 18px 20px !important;
}
.servercattitle + .tablopaketler .tablepaket > span:first-of-type,
.servercattitle ~ .tablopaketler .tablepaket > span:first-of-type {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.servercattitle + .tablopaketler .tablepaket h3,
.servercattitle ~ .tablopaketler .tablepaket h3 {
border-right: none !important;
padding-right: 0 !important;
border-top: 1px solid var(--vx-border) !important;
padding-top: 12px !important;
}
.servercattitle + .tablopaketler .tablepaket .gonderbtn,
.servercattitle ~ .tablopaketler .tablepaket .gonderbtn {
width: 100% !important;
}
/* Footer columns 2-up */
.vx-footer__top { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
.vx-footer__bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
/* Auth pages */
.clean-theme-signinup-con {
grid-template-columns: 1fr !important;
max-width: 480px !important;
margin: 24px auto !important;
}
.clean-theme-signinup-left { display: none !important; }
.clean-theme-signinup-right { padding: 32px 24px !important; }
/* Invoice detail */
.invoice-detail-left, .invoice-detail-right { width: 100% !important; padding: 0 !important; }
.invoice-detail-right { text-align: left !important; margin-bottom: 24px !important; }
.invoicex .padding { padding: 20px !important; }
.otherincoivebtns { justify-content: flex-start !important; flex-wrap: wrap !important; }
/* Dashboard stat blocks */
.muspanelbloks { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.alanadisorgu form, .alanadisorgu #checkForm { flex-direction: column !important; padding: 8px !important; }
/* KB header */
.bbankaara { padding: 40px 20px !important; }
.bbankaara h3 { font-size: 28px !important; }
/* DataTables — make horizontal scrollable */
.dataTables_wrapper { padding: 12px !important; overflow-x: auto !important; }
.dataTables_length, .dataTables_filter { float: none !important; width: 100% !important; margin-bottom: 8px !important; }
.dataTables_filter input { width: 100% !important; margin-left: 0 !important; margin-top: 6px !important; }
table.dataTable { font-size: 12px !important; }
table.dataTable thead th, table.dataTable tbody td { padding: 10px 12px !important; }
.dataTables_info, .dataTables_paginate { float: none !important; padding: 8px 0 !important; }
.dataTables_paginate { justify-content: center !important; flex-wrap: wrap !important; }
/* Modal */
.iziModal { max-width: 92vw !important; }
/* Pakettitle */
.pakettitle { padding: 48px 20px 32px !important; }
/* Slider sections (vxf, vxv, vxd, vxdom) */
.vxf-slider__nav, .vxs-terminal__bar, .vxv-terminal__bar { padding: 10px 14px !important; }
.vxs-hw, .vxv-cases, .vxd-hw { grid-template-columns: repeat(2, 1fr) !important; }
.vxv-config { grid-template-columns: 1fr !important; gap: 32px !important; }
.vxd-rack { grid-template-columns: 1fr !important; gap: 32px !important; }
.vxdom-tlds { grid-template-columns: repeat(4, 1fr) !important; }
.vxdom-features { grid-template-columns: repeat(2, 1fr) !important; }
.vxdom-transfer { grid-template-columns: 1fr !important; }
/* SSS / FAQ */
.sss { max-width: 100% !important; padding: 0 16px !important; }
.sss h4 { font-size: 28px !important; }
/* Detail content */
.detail-products-features { padding: 32px 20px !important; margin: 32px 16px !important; }
/* Pages with cards */
.vxh-news { grid-template-columns: 1fr !important; }
.vxh-testimonials, .vx-testimonials { grid-template-columns: 1fr !important; }
/* Notification dropdown */
.wclientnotification { width: 92vw !important; right: 8px !important; }
}
/* ---------- 640px breakpoint (phone) ---------- */
@media (max-width: 640px) {
:root { --vx-gutter: 12px; }
/* Header — ultra compact */
.vx-topbar { display: none !important; }
.vx-header__inner { padding: 10px 12px !important; }
.vx-logo__text { font-size: 16px !important; }
.vx-header__right { gap: 4px !important; }
.vx-header__right > .lbtn,
.vx-header__right > .gonderbtn,
.vx-header__right > .vx-btn--sm { font-size: 11px !important; padding: 0 10px !important; height: 32px !important; }
.vx-iconbtn { width: 32px !important; height: 32px !important; }
.vx-header__sep { display: none !important; }
/* Hero */
.vxh-hero__inner { padding: 40px 12px 32px !important; }
.vxh-hero__title { font-size: clamp(28px, 10vw, 42px) !important; }
.vxh-hero__subtitle { font-size: 16px !important; }
.vxh-hero__desc { font-size: 14px !important; }
.vxh-hero__cta { flex-direction: column !important; }
.vxh-hero__cta a { width: 100% !important; height: 44px !important; font-size: 13px !important; }
.vxh-trust { grid-template-columns: 1fr !important; }
.vxh-products { grid-template-columns: 1fr !important; }
.vxh-product { border-right: none !important; }
.vxh-features { grid-template-columns: 1fr !important; }
.vxh-stats { grid-template-columns: 1fr !important; }
.vxh-stat { border-right: none !important; padding: 32px 16px !important; }
.vxh-stat__value { font-size: 36px !important; }
.vxh-partners { grid-template-columns: repeat(2, 1fr) !important; }
.vxh-section { padding: 48px 0 !important; }
/* Products */
body#clean-theme-client .tablopaketler { grid-template-columns: 1fr !important; padding: 0 12px !important; }
.tablepaket h3 { font-size: 36px !important; }
.tablepaket .gonderbtn { width: calc(100% - 32px) !important; margin: auto 16px 16px !important; }
.tpakettitle, .tablepaket h4, .tablepaket > span,
.tablepaket h3 { margin-left: 20px !important; margin-right: 20px !important; }
.paketline { margin: 16px 20px !important; }
.tablepaket .products_features { margin: 0 20px 12px !important; }
/* Domain page */
.vxdom-tlds { grid-template-columns: repeat(2, 1fr) !important; }
.vxdom-features { grid-template-columns: 1fr !important; }
.vxdom-console__body { padding: 16px !important; font-size: 11px !important; }
.alanadisorgu { padding: 20px 16px !important; }
.alanadisorgu h1 { font-size: 22px !important; }
.alanadisorgu #checkButton, .alanadisorgu #transferbtn { width: 100% !important; margin: 0 0 8px !important; }
#transfercode .transfercode { flex-direction: column !important; align-items: stretch !important; }
#transferButton { width: 100% !important; }
.tescilucretleri table { font-size: 11px !important; }
.tescilucretleri td { padding: 10px 12px !important; }
/* VPS/Server features section */
.vxs-hw, .vxv-cases, .vxd-hw { grid-template-columns: 1fr !important; }
.vxs-sla { grid-template-columns: 1fr !important; padding: 22px 18px !important; }
.vxs-terminal__body, .vxv-terminal__body { font-size: 10px !important; padding: 16px !important; }
/* Footer */
.vx-footer__top { grid-template-columns: 1fr !important; gap: 24px !important; padding-bottom: 32px !important; }
.vx-footer__wordmark { font-size: 22vw !important; padding: 32px 0 16px !important; }
/* Auth */
.clean-theme-signinup-right { padding: 24px 16px !important; }
.socialconnect { flex-direction: column !important; }
.socialconnect > a { width: 100% !important; }
/* Invoice */
.invoicex { padding: 16px !important; }
.invoicex .padding { padding: 16px !important; }
.invoicedesc > .formcon { grid-template-columns: 1.6fr 1fr !important; padding: 10px 14px !important; }
.invoicedesc > .formcon .yuzde70, .invoicedesc > .formcon .yuzde30 { font-size: 12px !important; }
/* Dashboard panel */
.muspanelbloks { grid-template-columns: 1fr !important; }
.muspanelbloks .mpanelblok h1 { font-size: 28px !important; }
.moderncliendblock .mpaneltitle { padding: 12px 16px !important; flex-direction: column !important; align-items: flex-start !important; }
.moderncliendblock table { font-size: 11px !important; }
.moderncliendblock table th, .moderncliendblock table td { padding: 8px 10px !important; }
.ac-domainlist-status { padding: 10px 16px !important; flex-wrap: wrap !important; }
/* Sidebar block content */
.clean-theme-client-left-block .padding20 { padding: 16px !important; font-size: 12px !important; }
/* DataTable mobile */
table.dataTable thead { display: none !important; }
table.dataTable tbody tr {
display: block !important;
margin-bottom: 8px !important;
border: 1px solid var(--vx-border) !important;
border-radius: 8px !important;
padding: 8px !important;
}
table.dataTable tbody td {
display: flex !important;
justify-content: space-between !important;
border: none !important;
padding: 6px 8px !important;
font-size: 12px !important;
text-align: right !important;
}
table.dataTable tbody td::before {
content: attr(data-label);
font-family: var(--vx-font-mono);
font-size: 10px;
color: var(--vx-text-3);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
table.dataTable tbody tr:hover td { background: transparent !important; }
/* Headings */
h1 { font-size: 28px !important; }
h2 { font-size: 22px !important; }
h3 { font-size: 18px !important; }
/* General padding */
.padding30, .padding40, .padding50 { padding: 16px !important; }
/* Knowledgebase */
.bbankaara { padding: 28px 16px !important; }
.bbankaara h3 { font-size: 22px !important; }
.bbankaara form { flex-direction: column !important; }
.bbankaara form input { width: 100% !important; }
.bbankaara form .lbtn { width: 100% !important; margin-top: 8px !important; }
/* Mode toggle */
#vxModeToggle { right: 12px !important; bottom: 12px !important; width: 40px !important; height: 40px !important; }
/* Notification icon dot */
.wclientnotification { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; }
}
/* ---------- 480px breakpoint (small phone) ---------- */
@media (max-width: 480px) {
.vxh-partners { grid-template-columns: 1fr !important; }
.vxh-partner:not(:last-child) { border-bottom: 1px solid var(--vx-border) !important; }
.vxh-cta { padding: 64px 0 !important; }
.vxh-cta__title { font-size: 32px !important; }
.vxh-cta__buttons { flex-direction: column !important; }
.vxh-cta__buttons a { width: 100% !important; }
}
/* ---------- Touch device niceties ---------- */
@media (hover: none) and (pointer: coarse) {
/* Enable submenu open on tap by adding :focus-within / :active */
.vx-nav > li:focus-within > .inner,
.vx-nav > li:focus-within > .vx-submenu,
.vx-nav > li:active > .inner,
.vx-nav > li:active > .vx-submenu {
opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}
/* Bigger tap targets */
.vx-iconbtn, .vx-nav > li > a, .lbtn, .gonderbtn { min-height: 44px !important; }
}
/* ---------- Mobile burger + full-width drawer ---------- */
.vx-mobile-toggle {
display: none;
width: 40px; height: 40px;
background: var(--vx-surface-2);
border: 1px solid var(--vx-border);
border-radius: 8px;
color: var(--vx-text);
cursor: pointer;
align-items: center; justify-content: center;
flex-shrink: 0;
}
.vx-mobile-toggle:hover { background: var(--vx-surface-hi); }
@media (max-width: 1024px) {
.vx-mobile-toggle { display: inline-flex !important; }
/* Show open-state X icon when drawer is open */
body.vx-menu-open .vx-mobile-toggle {
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
}
/* When .vx-menu-open: full-width drawer slides down from top, BELOW the header bar */
body.vx-menu-open .vx-nav {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
position: fixed !important;
top: 0 !important;
left: 0 !important; right: 0 !important;
width: 100% !important; max-width: 100% !important;
height: 100vh !important;
background: var(--vx-surface) !important;
border: none !important;
padding: 72px 0 24px !important;
overflow-y: auto !important;
z-index: 10001 !important;
gap: 0 !important;
box-shadow: none !important;
}
/* Top bar within drawer for close button alignment */
body.vx-menu-open .vx-nav::before {
content: "";
position: fixed; top: 0; left: 0; right: 0;
height: 64px;
background: var(--vx-surface);
border-bottom: 1px solid var(--vx-border);
z-index: 1;
}
body.vx-menu-open .vx-nav > li {
display: block !important;
width: 100% !important;
list-style: none !important;
border-bottom: 1px solid var(--vx-border) !important;
}
body.vx-menu-open .vx-nav > li:first-child { border-top: 1px solid var(--vx-border) !important; }
body.vx-menu-open .vx-nav > li > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
padding: 18px 24px !important;
background: transparent !important;
border-radius: 0 !important;
color: var(--vx-text) !important;
font-size: 15px !important;
font-weight: 500 !important;
text-decoration: none !important;
letter-spacing: -0.005em !important;
}
body.vx-menu-open .vx-nav > li > a:hover,
body.vx-menu-open .vx-nav > li.active > a {
background: var(--vx-surface-2) !important;
color: var(--vx-accent) !important;
}
body.vx-menu-open .vx-nav > li > a > span,
body.vx-menu-open .vx-nav > li > a span {
display: inline !important;
color: inherit !important;
flex: 1 1 auto !important;
text-align: left !important;
}
body.vx-menu-open .vx-nav > li > a > i,
body.vx-menu-open .vx-nav > li > a > svg {
color: var(--vx-text-2) !important;
font-size: 16px !important;
flex-shrink: 0 !important;
}
body.vx-menu-open .vx-nav__caret {
color: var(--vx-text-3) !important;
font-size: 12px !important;
transition: transform .2s !important;
}
body.vx-menu-open .vx-nav > li:hover > a .vx-nav__caret,
body.vx-menu-open .vx-nav > li:focus-within > a .vx-nav__caret { transform: rotate(180deg); }
/* Submenu — accordion, indented */
body.vx-menu-open .vx-nav .inner,
body.vx-menu-open .vx-nav .vx-submenu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
background: var(--vx-surface-2) !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
min-width: 0 !important;
width: 100% !important;
}
body.vx-menu-open .vx-nav .inner li,
body.vx-menu-open .vx-nav .vx-submenu li {
list-style: none !important;
border-bottom: 1px solid var(--vx-border) !important;
}
body.vx-menu-open .vx-nav .inner li:last-child,
body.vx-menu-open .vx-nav .vx-submenu li:last-child { border-bottom: none !important; }
body.vx-menu-open .vx-nav .inner li a,
body.vx-menu-open .vx-nav .vx-submenu li a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 14px 24px 14px 48px !important;
color: var(--vx-text-2) !important;
font-size: 14px !important;
text-decoration: none !important;
background: transparent !important;
border-radius: 0 !important;
}
body.vx-menu-open .vx-nav .inner li a:hover,
body.vx-menu-open .vx-nav .vx-submenu li a:hover {
background: var(--vx-surface-hi) !important;
color: var(--vx-text) !important;
}
body.vx-menu-open .vx-nav .inner li a span,
body.vx-menu-open .vx-nav .vx-submenu li a span {
color: inherit !important;
display: inline !important;
}
/* Backdrop hidden since drawer is full screen */
body.vx-menu-open::before { display: none !important; }
body.vx-menu-open { overflow: hidden !important; }
}
/* ---------- Drawer stacking context fix ----------
.vx-header has position: sticky + z-index: 50, creating its own stacking context.
The drawer (.vx-nav) inside it stacks RELATIVE to that header (z=50 in body flow),
while body::before backdrop sits at z=999 in body flow — covering the drawer.
Elevate the entire header layer above the backdrop when drawer is open. */
@media (max-width: 1024px) {
body.vx-menu-open .vx-header,
body.vx-menu-open .vx-header-wrap,
body.vx-menu-open .vx-topbar { z-index: 10000 !important; }
body.vx-menu-open .vx-nav {
z-index: 10001 !important;
background: var(--vx-surface) !important;
}
body.vx-menu-open::before { z-index: 9990 !important; }
/* Also raise the burger close button above everything */
body.vx-menu-open .vx-mobile-toggle {
z-index: 10002 !important;
}
}
/* ---------- Mobile: ensure customer panel content stays visible ---------- */
@media (max-width: 1024px) {
/* Right content always rendered, full width */
#basic_client_rightcon, .mpanelrightcon, #bigcontent, .mpanelright {
width: 100% !important;
min-width: 0 !important;
padding: 16px !important;
background: var(--vx-surface) !important;
}
.mpanelrightcon > *, #basic_client_rightcon > * { width: 100% !important; }
/* moderncliendblock = invoices / services list cards */
.moderncliendblock, .mclientlastblocks {
width: 100% !important;
padding: 0 !important;
overflow: visible !important;
}
.moderncliendblock .mpanelrightcon { padding: 0 !important; background: transparent !important; }
/* Tables — keep horizontally scrollable instead of hiding thead */
.moderncliendblock table, .mclientlastblocks table, table.dataTable {
display: table !important;
width: 100% !important;
min-width: 100% !important;
}
.moderncliendblock table thead, table.dataTable thead { display: table-header-group !important; }
.moderncliendblock table tbody tr, table.dataTable tbody tr { display: table-row !important; border: none !important; }
.moderncliendblock table tbody td, table.dataTable tbody td {
display: table-cell !important;
text-align: left !important;
padding: 10px !important;
font-size: 12px !important;
}
.moderncliendblock table tbody td::before, table.dataTable tbody td::before { display: none !important; }
/* Allow horizontal scroll on tables */
.dataTables_wrapper, .moderncliendblock { overflow-x: auto !important; }
.dataTables_scrollBody { overflow-x: auto !important; }
}
@media (max-width: 640px) {
/* On phones, KEEP tables but allow horizontal scroll — don't transform to cards */
table.dataTable thead { display: table-header-group !important; }
table.dataTable tbody tr { display: table-row !important; border: none !important; }
table.dataTable tbody td {
display: table-cell !important;
text-align: left !important;
padding: 8px !important;
font-size: 11px !important;
}
table.dataTable tbody td::before { display: none !important; }
.dataTables_wrapper, .moderncliendblock { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}
/* ---------- Mobile: defensive content visibility ---------- */
@media (max-width: 1024px) {
/* The desktop hard-override on #wrapper children sets overflow:hidden + flex: 1 1 0
which can collapse the content height on mobile when flex-direction stacks.
Force visibility + auto height. */
#wrapper > .mpanelright,
#wrapper > #bigcontent,
#wrapper > #basic_client_rightcon {
overflow: visible !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: auto !important;
border-radius: 0 !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
/* Make sure ALL section children render — but NEVER force-display script/style */
#wrapper > *:not(script):not(style),
.mpanelright > *:not(script):not(style),
#bigcontent > *:not(script):not(style),
#basic_client_rightcon > *:not(script):not(style) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Explicit: script/style tags must remain non-rendering */
#wrapper script, #wrapper style,
.mpanelright script, .mpanelright style,
#bigcontent script, #bigcontent style,
#basic_client_rightcon script, #basic_client_rightcon style {
display: none !important;
}
/* But preserve grid containers that need display:grid */
.vxh-products, .vxh-features, .vxh-stats, .vxh-trust, .vxh-partners,
.muspanelbloks, .wclientblockscon, .vx-footer__top {
display: grid !important;
}
/* Preserve flex containers */
.vxh-hero__cta, .vxh-section__head, .vx-header__inner, .vx-topbar__inner,
.vx-footer__bottom, .vxh-domain__form {
display: flex !important;
}
/* Section displays must be block (sections wrap blocks of content) */
section.vxh-hero, section.vxh-section, section.vxh-cta { display: block !important; }
}
/* ============================================================
ORDER STEPS — appended by Vexoria assistant
============================================================ */
/* ============================================================
VEXORIA — Order Steps CSS Override
Drop this into templates/Vexoria/css/wisecp.css (sonuna ekleyin)
veya ayrı dosya olarak include edin.
Hedef sayfalar:
- order-steps-software.php
- order-steps-hosting.php
- order-steps-server.php
- order-steps-sms.php
- order-steps-domain.php
- order-steps-special.php
Mevcut markup'a (Classic'ten devralınan) tasarım katmanı bindirir;
PHP/JS akışlarına dokunmaz.
============================================================ */
/* ===== Page wrapper ===== */
#wrapper:has(> .ilanasamalar),
#wrapper:has(> .pakettitle){
max-width: 1080px !important;
margin: 0 auto !important;
padding: 56px 32px 96px !important;
background: transparent !important;
float: none !important;
width: auto !important;
display: block !important;
}
/* Clearfix so any leftover .asamaline floats don't push content sideways */
#wrapper:has(> .ilanasamalar)::after,
#wrapper:has(> .pakettitle)::after{
content: "";
display: block;
clear: both;
}
/* ===== Steps progress indicator ===== */
.asamaline{display:none !important;}
.ilanasamalar{
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 12px !important;
margin: 0 0 56px !important;
padding: 0 !important;
background: transparent !important;
width: 100% !important;
position: relative;
}
.ilanasamalar::before{
content:"";
position: absolute;
top: 18px; left: 8%; right: 8%;
height: 1px;
background: var(--vx-border);
z-index: 0;
}
.ilanasamax{
position: relative;
z-index: 1;
background: transparent !important;
border: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
cursor: default;
}
.ilanasamax > div{
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
}
.ilanasamax > div .clear{display:none !important;}
.ilanasamax h3{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px !important;
height: 36px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: -.01em;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.ilanasamax{
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: .08em !important;
text-transform: uppercase;
}
/* Completed step (everything before active) */
.ilanasamax:not(#asamaaktif){
color: var(--vx-text-3) !important;
}
/* Active step */
#asamaaktif{
color: var(--vx-text) !important;
}
#asamaaktif h3{
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
box-shadow: 0 0 0 6px var(--vx-accent-soft);
transform: scale(1.08);
}
/* ===== Page title block ===== */
.pakettitle{
text-align: center !important;
margin: 0 0 48px !important;
padding: 0 !important;
background: transparent !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
.pakettitle h1{
font-size: clamp(32px,4.2vw,52px) !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
line-height: 1.05 !important;
color: var(--vx-text) !important;
margin: 0 0 14px !important;
text-shadow: none !important;
font-family: var(--vx-font-sans) !important;
}
.pakettitle h1 strong{font-weight: 700 !important; color: inherit !important;}
.pakettitle .line{display:none !important;}
.pakettitle h2{
font-size: 16px !important;
font-weight: 400 !important;
color: var(--vx-text-2) !important;
margin: 0 auto !important;
max-width: 580px;
line-height: 1.6 !important;
letter-spacing: -.005em !important;
font-family: var(--vx-font-sans) !important;
}
/* ===== Content wrapper ===== */
.siparisbilgileri{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
padding: 40px !important;
margin: 0 !important;
box-shadow: var(--vx-shadow-md);
/* Kill Classic's float layout — force full width block */
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
text-align: left !important;
}
.siparisbilgileri::after{content:""; display:block; clear:both;}
/* ============================================================
STEP 1 — Period selection cards
============================================================ */
.orderperiodblock-con{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
position: static !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
.orderperiodblock{
position: relative !important;
display: flex !important;
flex-direction: column;
gap: 4px;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 24px 20px 20px !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
min-height: 156px;
float: none !important;
clear: none !important;
cursor: pointer;
transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
overflow: visible !important;
text-align: left !important;
font-family: var(--vx-font-sans) !important;
box-sizing: border-box !important;
}
.orderperiodblock:hover{
border-color: var(--vx-border-strong) !important;
background: var(--vx-surface-hi) !important;
transform: translateY(-2px);
}
.orderperiodblock.active{
border: 1px solid var(--vx-accent) !important;
background: var(--vx-surface) !important;
box-shadow: 0 0 0 1px var(--vx-accent), 0 8px 24px rgba(227,6,19,.18);
}
.orderperiodblock.active::before{
content:"";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vx-accent) 0%, var(--vx-accent-hi) 100%);
border-radius: var(--vx-r-lg) var(--vx-r-lg) 0 0;
}
.orderperiodblock h3{
margin: 0 0 8px !important;
padding: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--vx-text-3) !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
border: none !important;
background: none !important;
text-shadow: none !important;
}
.orderperiodblock.active h3{
color: var(--vx-accent) !important;
}
.orderperiodblock h2{
margin: 0 !important;
padding: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.02em !important;
line-height: 1.1 !important;
border: none !important;
background: none !important;
text-shadow: none !important;
}
.setup-fee-period{
display: inline-block !important;
margin-top: 8px !important;
padding: 3px 8px !important;
background: var(--vx-surface-hi) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
color: var(--vx-text-3) !important;
letter-spacing: .04em !important;
}
/* Select check box (bottom-right corner indicator) */
.periodselectbox{
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 22px !important;
height: 22px !important;
background: transparent !important;
border: 1.5px solid var(--vx-border-strong) !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
color: transparent !important;
font-size: 10px !important;
transition: background .2s, border-color .2s, color .2s;
}
.orderperiodblock.active .periodselectbox{
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
color: #fff !important;
}
.orderperiodblock.active .periodselectbox i{color: #fff !important;}
/* Discount ribbon */
.ribbonperiod{
position: absolute !important;
top: -10px;
left: 16px;
z-index: 2;
}
.ribbonperiod span{
display: inline-flex !important;
align-items: center;
height: 22px !important;
padding: 0 10px !important;
background: var(--vx-accent) !important;
background-image: none !important;
color: #fff !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
border-radius: 999px !important;
box-shadow: 0 4px 10px rgba(227,6,19,.32);
}
.ribbonperiod span::before, .ribbonperiod span::after{display:none !important;}
/* ===== "Continue" button (.btn used as primary CTA) ===== */
.siparisbilgileri .btn,
.siparisbilgileri a.btn{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px !important;
padding: 0 28px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -.005em !important;
text-decoration: none !important;
text-transform: none !important;
transition: background .15s, transform .15s, box-shadow .15s !important;
float: none !important;
margin: 0 auto !important;
cursor: pointer;
}
.siparisbilgileri .btn:hover,
.siparisbilgileri a.btn:hover{
background: var(--vx-accent-hi) !important;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(227,6,19,.28);
}
.siparisbilgileri .btn strong{font-weight: 600 !important; color: inherit !important;}
.siparisbilgileri .btn i{font-size: 13px !important; transition: transform .15s;}
.siparisbilgileri .btn:hover i{transform: translateX(3px);}
/* Center the continue row */
.orderperiodblock-con > div[style*="margin-top:55px"],
.siparisbilgileri > div[style*="margin-top"]{
margin-top: 40px !important;
margin-bottom: 0 !important;
text-align: center !important;
width: 100% !important;
grid-column: 1 / -1 !important;
}
/* Gönder/secondary button (.gonderbtn) ===== */
.siparisbilgileri .gonderbtn,
.siparisbilgileri a.gonderbtn{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px !important;
padding: 0 22px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: -.005em !important;
text-decoration: none !important;
cursor: pointer;
transition: background .15s, transform .15s;
margin-left: 8px !important;
}
.siparisbilgileri .gonderbtn:hover{
background: var(--vx-accent-hi) !important;
transform: translateY(-1px);
}
/* ===== Error messages ===== */
.siparisbilgileri .error{
display: inline-block;
padding: 10px 16px !important;
background: var(--vx-accent-soft) !important;
border: 1px solid var(--vx-accent-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-accent) !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
margin-top: 16px !important;
}
/* ============================================================
DOMAIN / HOSTING / LICENSE — accordion + inputs
============================================================ */
.domainsec{
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.domainsec #accordion{
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
overflow: hidden;
background: var(--vx-surface-2) !important;
}
.domainsec #accordion h3{
margin: 0 !important;
padding: 18px 24px !important;
background: var(--vx-surface-2) !important;
border: none !important;
border-top: 1px solid var(--vx-border) !important;
font-family: var(--vx-font-sans) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
letter-spacing: -.01em !important;
cursor: pointer;
outline: none !important;
position: relative;
display: flex;
align-items: center;
gap: 12px;
border-radius: 0 !important;
}
.domainsec #accordion h3:first-of-type{border-top: none !important;}
.domainsec #accordion h3 strong{font-weight:600 !important; color: inherit !important;}
.domainsec #accordion h3::before{
content: "";
width: 6px; height: 6px;
border-radius: 999px;
background: var(--vx-text-3);
transition: background .15s, transform .15s;
}
.domainsec #accordion h3.ui-accordion-header-active::before,
.domainsec #accordion h3.ui-state-active::before{
background: var(--vx-accent);
transform: scale(1.4);
}
.domainsec #accordion h3 .ui-accordion-header-icon{display:none !important;}
.domainsec #accordion h3::after{
content:"\f078";
font-family:"Font Awesome 6 Free";
font-weight:900;
margin-left:auto;
font-size:11px;
color:var(--vx-text-3);
transition:transform .15s;
}
.domainsec #accordion h3.ui-accordion-header-active::after,
.domainsec #accordion h3.ui-state-active::after{
transform:rotate(180deg);
color:var(--vx-accent);
}
.domainsec #accordion > div{
background: var(--vx-bg) !important;
border-top: 1px solid var(--vx-border) !important;
padding: 28px 24px !important;
}
/* Domain input row */
.alanadisorgu{
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
align-items: center;
background: transparent !important;
padding: 0 !important;
border: none !important;
width: 100% !important;
}
.alanadisorgu input[type="text"],
.alanadisorgu input[type="search"]{
flex: 1 1 280px !important;
min-width: 0 !important;
height: 50px !important;
padding: 0 16px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-size: 14px !important;
font-family: var(--vx-font-sans) !important;
outline: none !important;
transition: border-color .15s, box-shadow .15s;
margin: 0 !important;
}
.alanadisorgu input[type="text"]:focus,
.alanadisorgu input[type="search"]:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.alanadisorgu input::placeholder{color: var(--vx-text-4) !important;}
.alanadisorgu select{
flex: 0 0 auto;
height: 50px !important;
padding: 0 14px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-size: 14px !important;
font-family: var(--vx-font-mono) !important;
outline: none !important;
margin: 0 !important;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 34px !important;
}
.alanadisorgu h5{
flex-basis: 100% !important;
margin: 12px 0 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: .04em !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
.alanadisorgu h5 strong{color: var(--vx-text) !important; font-weight: 500 !important;}
.order-stage-subdomain{
display: flex;
gap: 8px;
width: 100%;
flex-wrap: wrap;
}
.order-stage-subdomain input{flex: 1 1 200px;}
/* DNS info box (current domain step) */
#result_dns{
flex-basis: 100% !important;
margin-top: 16px !important;
padding: 16px 18px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
display: flex;
gap: 12px;
align-items: flex-start;
}
#result_dns > i.fa-info-circle{
color: var(--vx-accent) !important;
font-size: 16px;
margin-top: 2px;
flex-shrink: 0;
}
#result_dns p{
margin: 0 !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.6 !important;
flex: 1;
}
#dns_list{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
flex-basis: 100%;
}
#dns_list span{
display: inline-block !important;
padding: 5px 10px !important;
background: var(--vx-bg) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
font-family: var(--vx-font-mono) !important;
font-size: 12px !important;
color: var(--vx-accent) !important;
}
/* Domain check result panel */
.tescilsonuc{
margin-top: 20px !important;
padding: 24px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
text-align: center;
}
.tescilsonuc h4{
font-size: 18px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
margin: 0 0 12px !important;
}
.tescilsonuc .sadeckyinfo{
display: inline-block;
margin: 8px 0;
color: var(--vx-text-2) !important;
font-size: 14px !important;
}
.tescilsonuc table{margin: 0 auto !important;}
/* ============================================================
STEP "requirements" / "addons" — form tables
============================================================ */
.siparisbilgileri table{
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: transparent !important;
margin: 0 !important;
}
.siparisbilgileri table td{
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
padding: 18px 0 !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
line-height: 1.5;
vertical-align: top !important;
}
.siparisbilgileri table tr:last-child td{border-bottom: none !important;}
/* Table header rows (inline bgcolor="#ebebeb" override) */
.siparisbilgileri table td[bgcolor],
.siparisbilgileri table td[bgcolor="#ebebeb"]{
background: transparent !important;
border-bottom: 1px solid var(--vx-border-strong) !important;
padding-bottom: 12px !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
color: var(--vx-text-3) !important;
letter-spacing: .14em !important;
text-transform: uppercase;
}
.siparisbilgileri table td[bgcolor] strong{color: var(--vx-text-3) !important; font-weight: 600 !important;}
.siparisbilgileri table label{
display: block;
cursor: pointer;
margin: 0;
}
.siparisbilgileri table label strong{
display: inline-block;
color: var(--vx-text) !important;
font-weight: 500 !important;
font-size: 14px;
letter-spacing: -.005em;
}
.siparisbilgileri table label span{
display: block;
color: var(--vx-text-3) !important;
font-size: 12px !important;
margin-top: 4px;
font-family: var(--vx-font-sans) !important;
line-height: 1.55;
}
/* Required asterisk */
.zorunlu{
color: var(--vx-accent) !important;
font-weight: 700;
margin-right: 4px;
}
/* Form inputs inside table */
.siparisbilgileri table input[type="text"],
.siparisbilgileri table input[type="password"],
.siparisbilgileri table textarea,
.siparisbilgileri table select{
width: 100% !important;
min-height: 44px;
padding: 10px 14px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-size: 14px !important;
font-family: var(--vx-font-sans) !important;
outline: none !important;
transition: border-color .15s, box-shadow .15s;
margin: 0 !important;
box-sizing: border-box;
}
.siparisbilgileri table textarea{min-height: 100px; resize: vertical;}
.siparisbilgileri table input:focus,
.siparisbilgileri table textarea:focus,
.siparisbilgileri table select:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.siparisbilgileri table input::placeholder,
.siparisbilgileri table textarea::placeholder{color: var(--vx-text-4) !important;}
/* Radio + Checkbox custom labels */
.siparisbilgileri table input[type="radio"],
.siparisbilgileri table input[type="checkbox"]{
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.radio-custom-label,
.checkbox-custom-label{
display: inline-flex !important;
align-items: flex-start;
gap: 10px;
padding: 8px 0 !important;
margin: 0 !important;
margin-right: 24px !important;
font-size: 14px !important;
color: var(--vx-text-2) !important;
cursor: pointer !important;
position: relative;
line-height: 1.5;
font-family: var(--vx-font-sans) !important;
}
.radio-custom-label::before,
.checkbox-custom-label::before{
content: "";
display: inline-block;
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 1px;
background: var(--vx-surface) !important;
border: 1.5px solid var(--vx-border-strong) !important;
border-radius: 999px;
transition: background .15s, border-color .15s;
}
.checkbox-custom-label::before{border-radius: 4px;}
.radio-custom-label::after{
content: "";
position: absolute;
left: 6px;
top: 16px;
width: 6px; height: 6px;
background: #fff;
border-radius: 999px;
transform: scale(0);
transition: transform .15s;
}
.checkbox-custom-label::after{
content: "";
position: absolute;
left: 6px;
top: 13px;
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transform-origin: center;
transition: transform .15s;
}
input[type="radio"]:checked + .radio-custom-label::before,
input[type="checkbox"]:checked + .checkbox-custom-label::before{
background: var(--vx-accent) !important;
border-color: var(--vx-accent) !important;
}
input[type="radio"]:checked + .radio-custom-label::after{transform: scale(1);}
input[type="checkbox"]:checked + .checkbox-custom-label::after{transform: rotate(45deg) scale(1);}
.radio-custom-label strong,
.checkbox-custom-label strong{
color: var(--vx-text) !important;
font-weight: 600 !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
}
.checktext{color: var(--vx-text-2) !important;}
/* File input */
.siparisbilgileri table input[type="file"]{
width: 100%;
padding: 12px !important;
background: var(--vx-surface-2) !important;
border: 1px dashed var(--vx-border-strong) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
cursor: pointer;
}
.siparisbilgileri table input[type="file"]::file-selector-button{
margin-right: 12px;
padding: 6px 12px;
background: var(--vx-surface-hi);
color: var(--vx-text);
border: 1px solid var(--vx-border-strong);
border-radius: 6px;
font-family: var(--vx-font-sans);
font-size: 12px;
cursor: pointer;
transition: background .15s;
}
.siparisbilgileri table input[type="file"]::file-selector-button:hover{background: var(--vx-accent-soft); border-color: var(--vx-accent-border); color: var(--vx-accent);}
/* Continue row at bottom of forms */
.siparisbilgileri table tr:last-child td[colspan]{
padding: 28px 0 0 !important;
border-bottom: none !important;
text-align: center !important;
}
/* ============================================================
Misc — error states, hosting select etc
============================================================ */
.siparisbilgileri input[style*="border-bottom:2px solid red"],
.siparisbilgileri select[style*="border-bottom:2px solid red"],
.siparisbilgileri textarea[style*="border-bottom:2px solid red"]{
border: 1px solid var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
border-bottom: 1px solid var(--vx-accent) !important;
color: var(--vx-text) !important;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 900px){
#wrapper:has(> .ilanasamalar),
#wrapper:has(> .pakettitle){
padding: 32px 16px 64px !important;
}
.siparisbilgileri{padding: 24px !important;}
.ilanasamalar{gap: 6px !important;}
.ilanasamalar::before{display:none;}
.ilanasamax{font-size: 9px !important;}
.ilanasamax h3{width: 28px !important; height: 28px !important; font-size: 11px !important;}
.orderperiodblock-con{grid-template-columns: 1fr 1fr !important;}
.siparisbilgileri table td{display: block !important; width: 100% !important; padding: 12px 0 !important;}
.siparisbilgileri table tr td:first-child{padding-bottom: 6px !important; border-bottom: none !important;}
.alanadisorgu .gonderbtn,
.alanadisorgu .btn{width: 100%; margin-left: 0 !important;}
}
@media (max-width: 560px){
.orderperiodblock-con{grid-template-columns: 1fr !important;}
.pakettitle h1{font-size: 28px !important;}
}
/* ============================================================
BASKET — appended by Vexoria assistant
============================================================ */
/* ============================================================
VEXORIA — Sepet (basket.php) CSS Override
Drop into templates/Vexoria/css/wisecp.css (sonuna ekle)
Mevcut basket.php markup'ına (Classic'ten devralınan) tasarım
katmanı bindirir. PHP/JS akışlarına dokunmaz.
Hedef classlar:
.sepet, .sepetleft, .sepetright, .sepetrightshadow
.sepetbaslik, .sepetlist, .sepetlistcon, .sepetrightcon
.uhinfo, .uhperiyod, .uhtutar, .uhsil
#empty_list, #item_list, #basket_loader, #OrderSummary_loader
.sepetsipinfo, .totalamountinfo, #kuponkodu, #coupon_code, #coupon_result
.paymentlogos, .row-label, .green-label
#continue_go, #continue_block, #continueshopbtn
============================================================ */
/* ===== Wrapper ===== */
#wrapper:has(> .sepet){
max-width: 1320px !important;
margin: 0 auto !important;
padding: 56px 32px 96px !important;
background: transparent !important;
float: none !important;
display: block !important;
width: auto !important;
}
/* ===== Page hero (page title block above .sepet) ===== */
/* basket.php doesn't include .pakettitle; we synthesize one via .sepet::before */
.sepet{
display: grid !important;
grid-template-columns: 1fr 380px !important;
gap: 28px !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
position: relative;
align-items: start;
}
.sepet::before{
content: "Sepetim";
grid-column: 1 / -1;
display: block;
font-family: var(--vx-font-sans);
font-size: clamp(36px, 4vw, 52px);
font-weight: 700;
letter-spacing: -.035em;
line-height: 1.05;
color: var(--vx-text);
margin: 0 0 12px;
}
.sepet::after{
content: "Sepetinize eklediğiniz hizmetleri inceleyin, periyot ve indirim kodu uygulayın, güvenle ödemeye geçin.";
grid-column: 1 / -1;
display: block;
font-family: var(--vx-font-sans);
font-size: 16px;
color: var(--vx-text-2);
line-height: 1.6;
max-width: 640px;
margin: 0 0 36px;
}
/* ===== Left column ===== */
.sepetleft{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--vx-shadow-md);
}
/* Column header row */
.sepetleft > .sepetbaslik{
background: var(--vx-surface-2) !important;
border-bottom: 1px solid var(--vx-border) !important;
color: var(--vx-text-3) !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
.sepetleft > .sepetbaslik > div{
padding: 14px 24px !important;
display: grid !important;
grid-template-columns: 1fr 180px 140px 48px !important;
gap: 16px !important;
align-items: center;
}
.sepetleft > .sepetbaslik .uhinfo,
.sepetleft > .sepetbaslik .uhperiyod,
.sepetleft > .sepetbaslik .uhtutar{
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-weight: 600 !important;
font-size: 10px !important;
}
.sepetleft > .sepetbaslik .uhtutar{ text-align: right; }
/* Empty state */
#empty_list{
margin: 32px 24px !important;
padding: 56px 32px !important;
background: transparent !important;
border: 1px dashed var(--vx-border-strong) !important;
border-radius: var(--vx-r-lg) !important;
text-align: center !important;
color: var(--vx-text-2) !important;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 16px;
}
#empty_list > i.fa-info-circle{
width: 56px;
height: 56px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
color: var(--vx-text-3) !important;
font-size: 22px !important;
margin: 0 !important;
float: none !important;
}
#empty_list h4{
margin: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
letter-spacing: -.01em !important;
font-family: var(--vx-font-sans) !important;
text-align: center !important;
max-width: 460px;
line-height: 1.5;
}
#empty_list h4 strong{ color: var(--vx-text) !important; }
/* Loader (basket items loading) */
#basket_loader{
margin: 56px auto !important;
text-align: center !important;
}
#basket_loader .spinner,
#OrderSummary_loader .spinner{
display: inline-block !important;
width: 32px; height: 32px;
border: 2px solid var(--vx-border-strong);
border-top-color: var(--vx-accent);
border-radius: 999px;
animation: vx-spin 0.7s linear infinite;
background: transparent !important;
}
@keyframes vx-spin{ to { transform: rotate(360deg); } }
/* Item rows */
#item_list{
display: flex !important;
flex-direction: column;
margin: 0 !important;
padding: 0 !important;
}
.sepetlist{
position: relative;
display: block !important;
background: transparent !important;
border-top: 1px solid var(--vx-border) !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
transition: background .15s;
}
.sepetlist:first-child{ border-top: none !important; }
.sepetlist:hover{ background: var(--vx-surface-2) !important; }
.sepetlistcon{
display: grid !important;
grid-template-columns: 1fr 180px 140px 48px !important;
gap: 16px !important;
align-items: center !important;
padding: 20px 24px !important;
margin: 0 !important;
background: transparent !important;
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Product info column */
.sepetlistcon .uhinfo{
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
text-align: left !important;
font-family: var(--vx-font-sans) !important;
color: var(--vx-text) !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.sepetlistcon .uhinfo h5{
margin: 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
letter-spacing: -.01em !important;
font-family: var(--vx-font-sans) !important;
line-height: 1.3 !important;
}
.sepetlistcon .uhinfo h5 strong{ font-weight: 600 !important; color: inherit !important; }
.sepetlistcon .uhinfo h4{
margin: 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
font-family: var(--vx-font-mono) !important;
color: var(--vx-text-3) !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
.sepetlistcon .uhinfo h4 a{
color: var(--vx-text-3) !important;
text-decoration: none !important;
}
.sepetlistcon .uhinfo h4 a:hover{ color: var(--vx-accent) !important; }
.sepetlistcon .uhinfo > .clear{ display: none !important; }
.sepetlistcon .uhinfo p{
margin: 4px 0 0 !important;
font-size: 12px !important;
color: var(--vx-text-3) !important;
line-height: 1.6;
}
.sepetlistcon .uhinfo p span{
font-family: var(--vx-font-mono);
color: var(--vx-text-2);
}
/* Domain / IP secondary line */
.sepetlistcon .uhinfo > * + br + *,
.sepetlistcon .uhinfo:has(> .clear + br) {
/* no-op — kept to document the pattern */
}
/* Additional details (whois privacy, dns/whois edit links) */
.cart-additional-details{
display: flex !important;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 6px !important;
align-items: center;
}
.cart-additional-details a{
color: var(--vx-text-2) !important;
font-size: 12px !important;
text-decoration: none !important;
border-bottom: 1px dashed var(--vx-border-strong);
padding-bottom: 1px;
transition: color .15s, border-color .15s;
}
.cart-additional-details a:hover{
color: var(--vx-accent) !important;
border-color: var(--vx-accent-border);
}
.cart-additional-details a i{ margin-left: 4px; font-size: 10px; }
/* Period column */
.sepetlistcon .uhperiyod{
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
text-align: left !important;
font-family: var(--vx-font-sans) !important;
color: var(--vx-text-2) !important;
}
.sepetlistcon .uhperiyod h5,
.sepetlistcon .uhperiyod H5{
margin: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--vx-text-2) !important;
font-family: var(--vx-font-mono) !important;
letter-spacing: .04em !important;
}
.sepetlistcon .uhperiyod select{
width: 100% !important;
height: 38px !important;
padding: 0 32px 0 12px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-size: 13px !important;
font-family: var(--vx-font-mono) !important;
outline: none !important;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: border-color .15s;
}
.sepetlistcon .uhperiyod select:focus,
.sepetlistcon .uhperiyod select:hover{
border-color: var(--vx-border-strong) !important;
}
.sepetlistcon .uhperiyod span{
display: block;
margin-top: 4px;
font-family: var(--vx-font-mono);
font-size: 11px;
color: #10B981 !important;
letter-spacing: .04em;
}
/* Amount column */
.sepetlistcon .uhtutar{
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
text-align: right !important;
font-family: var(--vx-font-sans) !important;
}
.sepetlistcon .uhtutar h4{
margin: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.02em !important;
line-height: 1.2 !important;
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
gap: 4px;
}
.sepetlistcon .uhtutar h4 strong{ font-weight: 700 !important; color: inherit !important; }
.sepetlistcon .uhtutar h4 i{
font-style: normal;
font-size: 13px;
color: var(--vx-text-3);
font-weight: 500;
}
/* Delete button */
.sepetlistcon .uhsil{
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
text-align: right !important;
display: flex;
justify-content: flex-end;
}
.sepetlistcon .uhsil a{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text-3) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: background .15s, color .15s, border-color .15s;
}
.sepetlistcon .uhsil a:hover{
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
}
/* Promo / Reduced label */
.row-label{
display: inline-block;
margin: 12px 0 0 24px;
padding: 3px 10px;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.35);
color: #10B981 !important;
font-family: var(--vx-font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 999px;
}
.green-label{
background: rgba(16,185,129,0.12) !important;
border-color: rgba(16,185,129,0.35) !important;
color: #10B981 !important;
}
/* Continue shopping button (bottom of left column) */
.sepetleft > div[align="center"]{
padding: 24px !important;
border-top: 1px solid var(--vx-border) !important;
text-align: center !important;
background: var(--vx-surface-2);
}
.sepetleft #continueshopbtn,
.sepetleft a.lbtn.gonderbtn{
display: inline-flex !important;
align-items: center;
gap: 8px;
height: 42px !important;
padding: 0 18px !important;
background: var(--vx-surface) !important;
color: var(--vx-text) !important;
border: 1px solid var(--vx-border-strong) !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: -.005em !important;
transition: background .15s, border-color .15s !important;
margin: 0 !important;
}
.sepetleft #continueshopbtn:hover{
background: var(--vx-surface-hi) !important;
border-color: var(--vx-text-4) !important;
color: var(--vx-text) !important;
}
/* Payment logos block */
.paymentlogos{
padding: 24px !important;
background: var(--vx-bg) !important;
border-top: 1px solid var(--vx-border) !important;
text-align: center !important;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0 !important;
border-radius: 0 0 var(--vx-r-xl) var(--vx-r-xl);
}
.paymentlogos img{
display: inline-block !important;
height: 28px !important;
width: auto !important;
margin: 0 !important;
opacity: 0.85;
filter: grayscale(0.2) brightness(0.95);
}
.paymentlogos .plogos1{ max-height: 28px; }
.paymentlogos .plogos2{ max-height: 32px; }
.paymentlogos > .clear{ display: none !important; }
.paymentlogos span{
display: block !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: .04em !important;
line-height: 1.6 !important;
}
.paymentlogos span strong{ color: var(--vx-text-2) !important; font-weight: 600 !important; }
/* ============================================================
RIGHT COLUMN — Order summary
============================================================ */
.sepetright{
position: sticky;
top: 96px;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: 100% !important;
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box !important;
}
.sepetrightshadow{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border-strong) !important;
border-radius: var(--vx-r-xl) !important;
overflow: hidden;
box-shadow: var(--vx-shadow-md);
padding: 0 !important;
margin: 0 !important;
position: relative;
}
.sepetrightshadow::before{
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vx-accent) 0%, var(--vx-accent-hi) 100%);
}
.sepetright .sepetbaslik{
background: transparent !important;
border-bottom: 1px solid var(--vx-border) !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--vx-font-sans) !important;
text-transform: none !important;
}
.sepetright .sepetbaslik > div{
padding: 18px 22px !important;
text-align: left !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.01em !important;
}
.sepetrightcon{
padding: 18px 22px 22px !important;
background: transparent !important;
}
.sepetrightcon::after,
.sepetrightcon .clear{ display: none !important; }
/* Summary table */
.sepetsipinfo{
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
margin: 0 !important;
}
.sepetsipinfo td{
background: transparent !important;
border: none !important;
border-bottom: 1px dashed var(--vx-border) !important;
padding: 12px 0 !important;
color: var(--vx-text-2) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
vertical-align: middle !important;
}
.sepetsipinfo tr:last-child td{ border-bottom: none !important; }
.sepetsipinfo td strong{
color: var(--vx-text) !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: -.005em;
}
.sepetsipinfo td h5{
margin: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--vx-text) !important;
letter-spacing: -.01em !important;
}
.sepetsipinfo td h5 .amount_spot_view{
display: inline-flex;
align-items: baseline;
gap: 3px;
font-family: var(--vx-font-mono);
}
.sepetsipinfo td h5 .amount_spot_view i{
font-style: normal;
font-size: 11px;
color: var(--vx-text-3);
font-weight: 500;
}
/* Coupon code section */
.sepetsipinfo tr#use_coupon td{
border-bottom: 1px dashed var(--vx-border) !important;
padding: 16px 0 !important;
text-align: center !important;
}
.sepetsipinfo tr#use_coupon a{
color: var(--vx-text-2) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.sepetsipinfo tr#use_coupon a:hover{ color: var(--vx-accent) !important; }
.sepetsipinfo tr#use_coupon a i{
font-size: 10px;
margin-right: 6px;
color: var(--vx-text-3);
}
.kuponkodu{
margin-top: 12px !important;
padding: 0 !important;
}
.kuponkodu input{
width: 100% !important;
height: 42px !important;
padding: 0 14px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
outline: none !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
transition: border-color .15s, box-shadow .15s;
}
.kuponkodu input::placeholder{
color: var(--vx-text-4) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.kuponkodu input:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
.kuponkodu .error,
#coupon_result{
display: block !important;
margin-top: 8px !important;
padding: 8px 12px !important;
background: var(--vx-accent-soft) !important;
border: 1px solid var(--vx-accent-border) !important;
border-radius: var(--vx-r-sm) !important;
color: var(--vx-accent) !important;
font-size: 12px !important;
font-family: var(--vx-font-mono) !important;
}
/* Total amount payable row — highlighted */
.sepetsipinfo .totalamountinfo{
text-align: left !important;
padding: 20px 0 4px !important;
border-bottom: none !important;
border-top: 1px solid var(--vx-border-strong) !important;
display: flex;
flex-direction: column;
gap: 8px;
}
.sepetsipinfo .totalamountinfo strong{
font-family: var(--vx-font-mono) !important;
font-size: 10px !important;
color: var(--vx-text-3) !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.sepetsipinfo .totalamountinfo br{ display: none; }
.sepetsipinfo .totalamountinfo h5{
margin: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 32px !important;
font-weight: 700 !important;
color: var(--vx-accent) !important;
letter-spacing: -.02em !important;
line-height: 1 !important;
text-align: left;
}
.sepetsipinfo .totalamountinfo h5 .amount_spot_view{
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.sepetsipinfo .totalamountinfo h5 .amount_spot_view i{
font-style: normal;
font-size: 18px;
color: var(--vx-accent);
opacity: 0.7;
font-weight: 500;
}
/* Discount rows */
.sepetsipinfo #dealership_discounts td,
.sepetsipinfo #coupon_discounts td{
color: #10B981 !important;
font-size: 12px !important;
}
.sepetsipinfo #dealership_discounts td strong,
.sepetsipinfo #coupon_discounts td strong{
color: #10B981 !important;
font-weight: 600 !important;
}
.sepetsipinfo #dealership_discounts td h5,
.sepetsipinfo #coupon_discounts td h5{
color: #10B981 !important;
}
.sepetsipinfo #coupon_discounts a{
color: var(--vx-text-3) !important;
margin-left: 6px !important;
}
.sepetsipinfo #coupon_discounts a:hover{ color: var(--vx-accent) !important; }
/* Order summary loader */
#OrderSummary_loader{
padding: 40px !important;
text-align: center !important;
}
/* Continue / Disabled buttons */
.sepetright #continue_go,
.sepetright #continue_block{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100% !important;
height: 56px !important;
padding: 0 24px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: -.005em !important;
cursor: pointer !important;
margin: 0 !important;
box-sizing: border-box !important;
transition: background .15s, transform .15s, box-shadow .15s;
float: none !important;
}
.sepetright #continue_go::after{
content: "→";
font-size: 18px;
transition: transform .15s;
}
.sepetright #continue_go:hover{
background: var(--vx-accent-hi) !important;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(227,6,19,.28);
}
.sepetright #continue_go:hover::after{ transform: translateX(4px); }
.sepetright #continue_block{
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
color: var(--vx-text-3) !important;
cursor: not-allowed !important;
}
/* ============================================================
MODALS — Cart NS/Whois detail forms
============================================================ */
.padding20{ padding: 20px !important; }
.padding15{ padding: 15px !important; }
.red-info, .blue-info{
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-left: 3px solid var(--vx-accent) !important;
border-radius: var(--vx-r-md) !important;
padding: 0 !important;
margin: 0 0 20px !important;
display: flex;
align-items: flex-start;
}
.blue-info{ border-left-color: #2A6FDB !important; }
.red-info .padding15, .blue-info .padding15{
display: flex;
gap: 12px;
align-items: flex-start;
}
.red-info i, .blue-info i{
color: var(--vx-accent) !important;
font-size: 16px;
margin-top: 2px;
flex-shrink: 0;
}
.blue-info i{ color: #2A6FDB !important; }
.red-info p, .blue-info p{
margin: 0 !important;
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
.modal-foot-btn{
padding: 16px 20px !important;
background: var(--vx-surface-2) !important;
border-top: 1px solid var(--vx-border) !important;
text-align: right !important;
}
.modal-foot-btn a.lbtn.green{
display: inline-flex !important;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 20px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background .15s !important;
}
.modal-foot-btn a.lbtn.green:hover{ background: var(--vx-accent-hi) !important; }
/* Tabs (contact-type tabs in whois modal) */
.tab{
display: flex !important;
align-items: center;
gap: 4px !important;
padding: 0 !important;
margin: 0 0 16px !important;
border-bottom: 1px solid var(--vx-border) !important;
list-style: none !important;
}
.tab li{ list-style: none; }
.tablinks{
display: inline-flex !important;
align-items: center;
height: 40px;
padding: 0 14px !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.tablinks:hover{ color: var(--vx-text) !important; }
.tablinks.active{
color: var(--vx-accent) !important;
border-bottom-color: var(--vx-accent) !important;
}
/* Width util classes */
.yuzde30{ width: 30% !important; }
.yuzde33{ width: calc(33.333% - 8px) !important; }
.yuzde70{ width: 70% !important; }
.formcon{
display: flex;
gap: 16px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--vx-border);
}
.formcon:last-child{ border-bottom: none; }
.formcon .yuzde30{
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: .04em !important;
padding-top: 12px;
}
#tab-contact-type input[type="text"]{
margin: 8px 4px 0 0 !important;
padding: 10px 12px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
}
#tab-contact-type input[type="text"]:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
outline: none !important;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 980px){
#wrapper:has(> .sepet){ padding: 32px 16px 64px !important; }
.sepet{
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.sepetright{
position: static !important;
}
.sepetleft > .sepetbaslik > div,
.sepetlistcon{
grid-template-columns: 1fr 140px 110px 36px !important;
gap: 10px !important;
padding: 14px 16px !important;
}
}
@media (max-width: 640px){
.sepetleft > .sepetbaslik{ display: none !important; }
.sepetlistcon{
grid-template-columns: 1fr 36px !important;
grid-template-areas:
"info delete"
"period period"
"amount amount" !important;
gap: 8px 12px !important;
padding: 18px !important;
}
.sepetlistcon .uhinfo{ grid-area: info; }
.sepetlistcon .uhperiyod{ grid-area: period; }
.sepetlistcon .uhtutar{ grid-area: amount; justify-content: flex-start !important; text-align: left !important; }
.sepetlistcon .uhtutar h4{ justify-content: flex-start; }
.sepetlistcon .uhsil{ grid-area: delete; }
.sepet::before{ font-size: 28px; }
.sepetsipinfo .totalamountinfo h5{ font-size: 28px !important; }
}
/* ============================================================
LICENSE PAGE — appended by Vexoria assistant
============================================================ */
/* ============================================================
VEXORIA — Lisans Doğrulama (license.php) CSS Override
Drop into templates/Vexoria/css/wisecp.css (sonuna ekle)
Hedef classlar:
.license-verify, .license-verify-box, #checkingForm
.license-verification-result, .license-ok, .license-none
.padding30, #license_ok, #license_no, #report_button
============================================================ */
#wrapper:has(> .license-verify){
max-width: 1080px !important;
margin: 0 auto !important;
padding: 56px 32px 96px !important;
background: transparent !important;
float: none !important;
display: block !important;
width: auto !important;
}
.license-verify{
position: relative;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 0;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
text-align: center !important;
}
/* Title block — premium hero with grid backdrop */
.license-verify .pakettitle{
position: relative !important;
text-align: center !important;
margin: 0 0 40px !important;
padding: 64px 32px 56px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
width: 100% !important;
max-width: 720px;
overflow: hidden !important;
float: none !important;
box-sizing: border-box !important;
}
.license-verify .pakettitle::before{
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 80%);
opacity: 0.5;
pointer-events: none;
}
.license-verify .pakettitle::after{
content: "";
position: absolute; top: -60%; left: -10%; right: -10%; height: 120%;
background: radial-gradient(ellipse at 50% 100%, var(--vx-accent-soft) 0%, transparent 60%);
pointer-events: none;
}
.license-verify .pakettitle > *{ position: relative; z-index: 1; }
/* Tiny eyebrow above title */
.license-verify .pakettitle h1::before{
content: "01 / LİSANS DOĞRULAMA";
display: block;
margin-bottom: 18px;
font-family: var(--vx-font-mono);
font-size: 11px;
font-weight: 500;
color: var(--vx-text-3);
letter-spacing: .14em;
text-transform: uppercase;
}
.license-verify .pakettitle h1{
font-size: clamp(36px,4.2vw,52px) !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
line-height: 1.05 !important;
color: var(--vx-text) !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
font-family: var(--vx-font-sans) !important;
}
.license-verify .pakettitle h1 strong{
font-weight: 700 !important;
background: linear-gradient(180deg, var(--vx-text) 0%, var(--vx-text-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
.license-verify .pakettitle .line{display:none !important;}
.license-verify .pakettitle h2{
font-size: 15px !important;
font-weight: 400 !important;
color: var(--vx-text-2) !important;
margin: 20px auto 0 !important;
max-width: 520px;
line-height: 1.65 !important;
font-family: var(--vx-font-sans) !important;
text-align: center !important;
}
.license-verify .pakettitle h2 span{
display: block;
margin-top: 8px;
font-size: 13px !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono);
letter-spacing: .04em;
}
/* Form box — premium card */
.license-verify-box{
position: relative;
margin: 0 !important;
padding: 32px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border-strong) !important;
border-radius: var(--vx-r-xl) !important;
width: 100% !important;
max-width: 560px;
box-sizing: border-box !important;
float: none !important;
box-shadow: var(--vx-shadow-md);
overflow: hidden;
}
.license-verify-box::before{
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vx-accent) 0%, var(--vx-accent-hi) 60%, transparent 100%);
}
.license-verify-box::after{
content: "DOMAIN-CHECK · /security/license";
position: absolute; top: 14px; right: 16px;
font-family: var(--vx-font-mono);
font-size: 10px;
color: var(--vx-text-4);
letter-spacing: .08em;
text-transform: uppercase;
}
#checkingForm{
display: flex !important;
flex-direction: column;
gap: 14px;
margin: 24px 0 0 !important;
padding: 0 !important;
text-align: left !important;
width: 100% !important;
}
#checkingForm > .clear{display:none !important;}
#checkingForm input[name="domain"]{
width: 100% !important;
height: 52px !important;
padding: 0 18px 0 50px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 14px !important;
outline: none !important;
margin: 0 !important;
transition: border-color .15s, box-shadow .15s, background .15s;
letter-spacing: -.005em;
/* Globe icon as background */
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 18px center;
}
#checkingForm input[name="domain"]::placeholder{ color: var(--vx-text-4) !important; }
#checkingForm input[name="domain"]:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
/* Captcha block */
#checkingForm > div[align="center"]{
margin: 0 !important;
padding: 14px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
text-align: center !important;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
#checkingForm > div[align="center"] img{
border-radius: 6px;
background: #fff;
padding: 2px;
}
#checkingForm #requiredinput{
width: 100% !important;
height: 48px !important;
padding: 0 14px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 14px !important;
outline: none !important;
margin: 0 !important;
letter-spacing: .12em !important;
text-align: center !important;
text-transform: uppercase !important;
}
#checkingForm #requiredinput::placeholder{
color: var(--vx-text-4) !important;
text-align: center !important;
letter-spacing: .04em !important;
text-transform: none !important;
}
#checkingForm #requiredinput:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
/* Submit button */
#checkingForm_submit,
.license-verify-box .yesilbtn,
.license-verify-box .gonderbtn{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100% !important;
height: 52px !important;
padding: 0 24px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: -.005em !important;
cursor: pointer !important;
margin: 0 !important;
box-sizing: border-box !important;
float: none !important;
transition: background .15s, transform .15s, box-shadow .15s;
}
#checkingForm_submit::before{
content: "\f002"; /* fa-search */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 13px;
}
#checkingForm_submit:hover{
background: var(--vx-accent-hi) !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(227,6,19,.28);
}
/* ===== Result panels ===== */
.license-verification-result{
margin-top: 8px !important;
}
.license-ok, .license-none{
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.license-ok .padding30,
.license-none .padding30{
padding: 24px !important;
border-radius: var(--vx-r-lg) !important;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center !important;
position: relative;
}
/* OK panel */
.license-ok .padding30{
background: rgba(16,185,129,0.08) !important;
border: 1px solid rgba(16,185,129,0.32) !important;
}
.license-ok i.fa-check-square-o,
.license-ok i.fa-check-square,
.license-ok > .padding30 > i:first-child{
width: 56px !important;
height: 56px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: rgba(16,185,129,0.15) !important;
border: 1px solid rgba(16,185,129,0.4) !important;
border-radius: 999px !important;
color: #10B981 !important;
font-size: 26px !important;
margin: 0 !important;
}
.license-ok h4{
margin: 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #10B981 !important;
letter-spacing: -.01em !important;
font-family: var(--vx-font-sans) !important;
line-height: 1.5 !important;
}
/* Error panel */
.license-none .padding30{
background: var(--vx-accent-soft) !important;
border: 1px solid var(--vx-accent-border) !important;
}
.license-none i.fa-ban,
.license-none > .padding30 > i:first-child{
width: 56px !important;
height: 56px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: rgba(227,6,19,0.15) !important;
border: 1px solid var(--vx-accent-border) !important;
border-radius: 999px !important;
color: var(--vx-accent) !important;
font-size: 22px !important;
margin: 0 !important;
animation: licpulse 2s ease-out infinite;
}
@keyframes licpulse{
0% { box-shadow: 0 0 0 0 rgba(227,6,19,0.4); }
70% { box-shadow: 0 0 0 12px rgba(227,6,19,0); }
100% { box-shadow: 0 0 0 0 rgba(227,6,19,0); }
}
.license-none h4{
margin: 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--vx-accent) !important;
letter-spacing: -.01em !important;
font-family: var(--vx-font-sans) !important;
line-height: 1.5 !important;
}
/* Report button */
.license-none #report_button{
display: inline-flex !important;
align-items: center;
gap: 8px;
margin-top: 6px !important;
height: 42px !important;
padding: 0 18px !important;
background: var(--vx-accent) !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background .15s !important;
}
.license-none #report_button:hover{
background: var(--vx-accent-hi) !important;
}
.license-none #report_button::before{
content: "\f071"; /* exclamation triangle */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
}
@media (max-width: 640px){
#wrapper:has(> .license-verify){ padding: 32px 16px 64px !important; }
.license-verify .pakettitle{ padding: 48px 24px 40px !important; }
.license-verify .pakettitle h1{ font-size: 28px !important; }
.license-verify-box{ padding: 24px !important; }
.license-verify-box::after{ display: none; }
}
/* ============================================================
CONTACT PAGE — appended by Vexoria assistant
============================================================ */
/* ============================================================
VEXORIA — İletişim (contact.php) CSS Override
Drop into templates/Vexoria/css/wisecp.css (sonuna ekle)
Hedef classlar:
.iletisimpage, .iletisimslogan, .iletisimblok, #compnayinfo
.googlemap, .iletisimformu, .iletisimtitle, .bigmaplink
#ContactForm, #ContactForm_Success, .line
#contact_active_btn, #contact_inactive_btn
.intl-tel-input (plugin) restyle
============================================================ */
#wrapper:has(> .iletisimpage){
max-width: 1320px !important;
margin: 0 auto !important;
padding: 56px 32px 96px !important;
background: transparent !important;
float: none !important;
display: block !important;
width: auto !important;
}
.iletisimpage{
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
display: block !important;
}
/* ===== Hero / slogan ===== */
.iletisimslogan{
position: relative;
margin: 0 0 56px !important;
padding: 64px 32px 56px !important;
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
font-family: var(--vx-font-sans) !important;
font-size: clamp(28px,3.6vw,44px) !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.03em !important;
line-height: 1.15 !important;
text-align: center !important;
overflow: hidden;
max-width: 880px;
margin-left: auto !important;
margin-right: auto !important;
}
.iletisimslogan::before{
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(var(--vx-border) 1px, transparent 1px),
linear-gradient(90deg, var(--vx-border) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 80%);
opacity: 0.5;
pointer-events: none;
}
.iletisimslogan::after{
content: "";
position: absolute; top: -60%; left: -10%; right: -10%; height: 120%;
background: radial-gradient(ellipse at 50% 100%, var(--vx-accent-soft) 0%, transparent 60%);
pointer-events: none;
}
.iletisimslogan + .iletisimblok{ position: relative; z-index: 2; }
/* ===== Info blocks — 4-up grid ===== */
.iletisimpage{
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"slogan"
"info"
"main" !important;
gap: 0 !important;
}
.iletisimpage > .iletisimslogan{ grid-area: slogan; }
/* Wrap the 4 info blocks into a grid via :is selector + parent flex */
/* Since we can't add a wrapper, use display:contents-friendly grid on .iletisimpage */
.iletisimblok{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 28px !important;
margin: 0 !important;
width: 100% !important;
float: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column;
gap: 12px;
position: relative;
transition: border-color .15s, transform .15s, background .15s;
}
.iletisimblok:hover{
border-color: var(--vx-border-strong) !important;
background: var(--vx-surface-2) !important;
transform: translateY(-2px);
}
/* Use a custom 4-column wrapper via auto-fit grid — turn .iletisimpage into a grid container with .iletisimslogan spanning all */
.iletisimpage{
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
margin-bottom: 56px;
}
.iletisimslogan{
grid-column: 1 / -1 !important;
}
/* If less than 4 info blocks, they fill remaining columns auto */
.iletisimblok i{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px !important;
height: 40px !important;
background: var(--vx-accent-soft) !important;
border: 1px solid var(--vx-accent-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-accent) !important;
font-size: 16px !important;
margin: 0 !important;
flex-shrink: 0;
}
.iletisimblok h3{
margin: 0 !important;
padding: 0 !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--vx-text-3) !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-family: var(--vx-font-mono) !important;
border: none !important;
background: none !important;
}
.iletisimblok span{
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--vx-font-sans) !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--vx-text) !important;
line-height: 1.55 !important;
letter-spacing: -.005em;
word-break: break-word;
}
.iletisimblok span + span{
margin-top: 4px !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--vx-text-2) !important;
}
/* Company info block — wider (spans 2 columns since it usually has more text) */
.iletisimblok#compnayinfo{
grid-column: span 2;
}
.iletisimblok#compnayinfo::before{
content: "\f1ad"; /* fa-building */
font-family: "Font Awesome 6 Free";
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--vx-accent-soft);
border: 1px solid var(--vx-accent-border);
border-radius: var(--vx-r-md);
color: var(--vx-accent);
font-size: 16px;
}
/* ===== Divider ===== */
.iletisimpage > .line{
display: none !important;
}
/* ===== Main row — map + form ===== */
.googlemap, .iletisimformu{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden;
display: flex !important;
flex-direction: column;
box-shadow: var(--vx-shadow-md);
}
/* Re-grid the iletisimpage to add map+form row */
.iletisimpage:has(.googlemap):has(.iletisimformu){
grid-template-areas:
"slogan slogan slogan slogan"
"info1 info2 info3 info4"
"map map form form" !important;
}
.iletisimpage:has(.googlemap):has(.iletisimformu) > .iletisimslogan{ grid-area: slogan; }
.iletisimpage:has(.googlemap):has(.iletisimformu) > .googlemap{ grid-area: map; }
.iletisimpage:has(.googlemap):has(.iletisimformu) > .iletisimformu{ grid-area: form; }
.iletisimpage:has(.googlemap):has(.iletisimformu) > .iletisimblok#compnayinfo{ grid-column: span 2; }
/* When only map OR form */
.iletisimpage > .googlemap:only-of-type[style*="margin:auto"],
.iletisimpage > .iletisimformu:only-of-type[style*="margin:auto"]{
grid-column: 1 / -1;
}
.googlemap{ margin-top: 32px !important; }
.iletisimformu{ margin-top: 32px !important; }
/* Section title (used in both map + form) */
.iletisimtitle{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 !important;
padding: 20px 24px !important;
background: var(--vx-surface-2) !important;
border-bottom: 1px solid var(--vx-border) !important;
font-family: var(--vx-font-sans) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.01em !important;
text-transform: none !important;
}
.bigmaplink{
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 5px 10px !important;
background: transparent !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
text-decoration: none !important;
text-transform: none !important;
transition: background .15s, border-color .15s, color .15s;
}
.bigmaplink:hover{
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
}
.bigmaplink::after{
content: "\f08e";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 9px;
}
/* Map iframe */
.googlemap iframe,
.googlemap #map{
display: block !important;
width: 100% !important;
height: 380px !important;
border: none !important;
filter: grayscale(0.15) brightness(0.92);
}
/* ===== Contact form ===== */
#ContactForm{
display: flex !important;
flex-direction: column;
gap: 12px !important;
padding: 24px !important;
margin: 0 !important;
}
#ContactForm input[type="text"],
#ContactForm textarea{
width: 100% !important;
min-height: 48px !important;
padding: 12px 16px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
outline: none !important;
margin: 0 !important;
box-sizing: border-box !important;
transition: border-color .15s, box-shadow .15s, background .15s;
letter-spacing: -.005em;
}
#ContactForm input[type="text"]::placeholder,
#ContactForm textarea::placeholder{ color: var(--vx-text-4) !important; }
#ContactForm input[type="text"]:focus,
#ContactForm textarea:focus{
border-color: var(--vx-accent) !important;
box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
background: var(--vx-surface) !important;
}
#ContactForm textarea{
min-height: 130px !important;
resize: vertical !important;
line-height: 1.55 !important;
}
/* intlTelInput plugin restyle */
#ContactForm .iti{
width: 100% !important;
display: block !important;
}
#ContactForm .iti__flag-container{
background: var(--vx-surface-hi) !important;
border-right: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) 0 0 var(--vx-r-md) !important;
}
#ContactForm .iti__selected-flag{
padding: 0 14px !important;
background: transparent !important;
}
#ContactForm .iti__selected-flag .iti__country-code{
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
}
#ContactForm .iti__country-list{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border-strong) !important;
border-radius: var(--vx-r-md) !important;
box-shadow: var(--vx-shadow-md);
color: var(--vx-text);
}
#ContactForm .iti__country{ color: var(--vx-text-2) !important; }
#ContactForm .iti__country.iti__highlight{ background: var(--vx-surface-2) !important; color: var(--vx-text) !important; }
#ContactForm .iti__divider{ border-color: var(--vx-border) !important; }
#ContactForm input#phone{
padding-left: 92px !important;
}
/* Captcha */
#ContactForm > div[style*="float:left"]{
display: flex !important;
align-items: center;
gap: 10px;
margin: 6px 0 !important;
padding: 12px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
float: none !important;
}
#ContactForm > div[style*="float:left"] img{
border-radius: 4px;
background: #fff;
padding: 2px;
}
#ContactForm #requiredinput{
width: 100% !important;
height: 46px !important;
padding: 0 14px !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
color: var(--vx-text) !important;
font-family: var(--vx-font-mono) !important;
font-size: 14px !important;
outline: none !important;
margin: 0 !important;
letter-spacing: .04em !important;
}
/* GDPR checkbox */
#ContactForm #contact_contract + .checkbox-custom-label{
display: inline-flex !important;
align-items: flex-start;
gap: 10px !important;
padding: 6px 0 !important;
margin: 8px 0 !important;
font-size: 13px !important;
color: var(--vx-text-2) !important;
cursor: pointer !important;
font-family: var(--vx-font-sans) !important;
line-height: 1.5;
position: relative;
}
#ContactForm .kinfo{
color: var(--vx-text-2) !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
#ContactForm .kinfo a{
color: var(--vx-accent) !important;
text-decoration: underline !important;
text-decoration-color: var(--vx-accent-border) !important;
text-underline-offset: 2px;
}
/* Submit buttons */
#ContactForm #contact_active_btn,
#ContactForm #contact_inactive_btn,
#ContactForm a.yesilbtn.gonderbtn,
#ContactForm a.graybtn.gonderbtn{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px !important;
padding: 0 24px !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: -.005em !important;
margin: 12px 0 0 !important;
width: auto !important;
min-width: 200px;
float: none !important;
align-self: flex-end;
border: 1px solid transparent !important;
cursor: pointer !important;
transition: background .15s, transform .15s, box-shadow .15s !important;
}
#ContactForm #contact_active_btn,
#ContactForm a.yesilbtn.gonderbtn{
background: var(--vx-accent) !important;
color: #fff !important;
}
#ContactForm #contact_active_btn:hover,
#ContactForm a.yesilbtn.gonderbtn:hover{
background: var(--vx-accent-hi) !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(227,6,19,.28);
}
#ContactForm #contact_inactive_btn,
#ContactForm a.graybtn.gonderbtn{
background: var(--vx-surface-2) !important;
color: var(--vx-text-3) !important;
border: 1px solid var(--vx-border) !important;
cursor: not-allowed !important;
}
#ContactForm #contact_inactive_btn i,
#ContactForm a.gonderbtn i{ font-size: 12px; }
/* Success state */
#ContactForm_Success{
padding: 56px 32px !important;
text-align: center !important;
}
#ContactForm_Success > div{
margin: 0 !important;
padding: 40px !important;
background: rgba(16,185,129,0.08) !important;
border: 1px solid rgba(16,185,129,0.32) !important;
border-radius: var(--vx-r-lg) !important;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 16px;
}
#ContactForm_Success i{
width: 72px !important;
height: 72px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: rgba(16,185,129,0.15) !important;
border: 1px solid rgba(16,185,129,0.4) !important;
border-radius: 999px !important;
color: #10B981 !important;
font-size: 32px !important;
}
#ContactForm_Success h4{
margin: 0 !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #10B981 !important;
letter-spacing: -.02em !important;
}
#ContactForm_Success h5{
margin: 0 !important;
font-size: 14px !important;
color: var(--vx-text-2) !important;
font-weight: 400 !important;
line-height: 1.6 !important;
max-width: 420px;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1100px){
.iletisimpage{ grid-template-columns: repeat(2, 1fr) !important; }
.iletisimpage:has(.googlemap):has(.iletisimformu){
grid-template-areas:
"slogan slogan"
"info1 info2"
"info3 info4"
"map map"
"form form" !important;
}
.iletisimblok#compnayinfo{ grid-column: 1 / -1 !important; }
}
@media (max-width: 720px){
#wrapper:has(> .iletisimpage){ padding: 32px 16px 64px !important; }
.iletisimpage{ grid-template-columns: 1fr !important; gap: 12px !important; }
.iletisimpage:has(.googlemap):has(.iletisimformu){
grid-template-areas:
"slogan"
"info1"
"info2"
"info3"
"info4"
"map"
"form" !important;
}
.iletisimblok#compnayinfo{ grid-column: 1 / -1 !important; }
.iletisimslogan{ padding: 40px 24px 32px !important; font-size: 24px !important; }
.googlemap iframe, .googlemap #map{ height: 280px !important; }
}
/* ============================================================
PAGE DETAIL (legal/text) — appended by Vexoria assistant
============================================================ */
/* ============================================================
VEXORIA — Sayfa Detay (page-detail-normal.php) CSS Override
Drop into templates/Vexoria/css/wisecp.css (sonuna ekle)
Hizmet sözleşmeleri, gizlilik politikası, KVKK, çerez politikası
gibi tüm "metin sayfaları" için tipografi + layout düzeltmesi.
Hedef classlar:
.sayfacontent, .sidebar, .sidelinks
content içindeki h1-h6, p, ul, ol, strong, blockquote, table
============================================================ */
#wrapper:has(> .sayfacontent){
max-width: 1280px !important;
margin: 0 auto !important;
padding: 56px 32px 96px !important;
background: transparent !important;
float: none !important;
display: grid !important;
grid-template-columns: 1fr 280px !important;
gap: 48px !important;
align-items: start !important;
width: auto !important;
}
/* If no sidebar — make wrapper a single column */
#wrapper:has(> .sayfacontent:only-child),
#wrapper:has(> .sayfacontent[style*="width:100%"]){
display: block !important;
max-width: 880px !important;
}
/* ===== Main content card ===== */
.sayfacontent{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-xl) !important;
padding: 56px 64px !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-family: var(--vx-font-sans) !important;
font-size: 15px !important;
line-height: 1.75 !important;
color: var(--vx-text-2) !important;
letter-spacing: -.005em;
box-shadow: var(--vx-shadow-md);
}
.sayfacontent[style*="width:100%"]{ float: none !important; }
.sayfacontent > .clear{ display: none !important; }
/* Page title (Classic-only block above, but we keep style for safety) */
.sayfacontent .bbbaslik{
margin: 0 0 24px !important;
padding: 0 0 20px !important;
border-bottom: 1px solid var(--vx-border) !important;
font-family: var(--vx-font-sans) !important;
font-size: clamp(32px, 4vw, 44px) !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.03em !important;
line-height: 1.1 !important;
}
.sayfacontent .bbbaslik strong{ font-weight: 700 !important; color: inherit !important; }
.sayfacontent .breadcrumb{
margin: 0 0 24px !important;
padding: 0 !important;
background: transparent !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
color: var(--vx-text-3) !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.sayfacontent .breadcrumb a{ color: var(--vx-text-3) !important; text-decoration: none !important; }
.sayfacontent .breadcrumb a:hover{ color: var(--vx-accent) !important; }
.sayfacontent > .line{
display: block !important;
height: 1px !important;
background: var(--vx-border) !important;
border: none !important;
margin: 24px 0 32px !important;
}
/* ===== Typography inside content ===== */
.sayfacontent > div > *:first-child,
.sayfacontent > div > div > *:first-child{ margin-top: 0 !important; }
.sayfacontent h1,
.sayfacontent h2,
.sayfacontent h3,
.sayfacontent h4,
.sayfacontent h5,
.sayfacontent h6{
font-family: var(--vx-font-sans) !important;
color: var(--vx-text) !important;
letter-spacing: -.02em !important;
line-height: 1.2 !important;
font-weight: 700 !important;
text-transform: none !important;
margin-top: 40px !important;
margin-bottom: 16px !important;
background: none !important;
border: none !important;
padding: 0 !important;
position: relative;
}
.sayfacontent h1{
font-size: 30px !important;
font-weight: 700 !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--vx-border) !important;
margin-top: 48px !important;
}
/* Auto-numbered uppercase H1 style for legal docs (the screenshot shows "1. SÖZLEŞMENİN KONUSU" as H1) */
.sayfacontent h2{ font-size: 22px !important; }
.sayfacontent h3{ font-size: 18px !important; }
.sayfacontent h4{ font-size: 16px !important; }
.sayfacontent h5{ font-size: 14px !important; color: var(--vx-text-3) !important; font-family: var(--vx-font-mono) !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 600 !important; }
.sayfacontent h6{ font-size: 13px !important; color: var(--vx-text-3) !important; font-family: var(--vx-font-mono) !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 500 !important; }
/* "SÖZLEŞME TARİHİ:" / "TARAFLAR:" style intro lines */
.sayfacontent strong{ color: var(--vx-text) !important; font-weight: 600 !important; }
.sayfacontent b{ color: var(--vx-text) !important; font-weight: 600 !important; }
.sayfacontent p{
margin: 0 0 1.1em !important;
font-size: 15px !important;
line-height: 1.78 !important;
color: var(--vx-text-2) !important;
letter-spacing: -.005em;
}
.sayfacontent p:last-child{ margin-bottom: 0 !important; }
.sayfacontent ul,
.sayfacontent ol{
padding-left: 1.4em !important;
margin: 0 0 1.1em !important;
color: var(--vx-text-2) !important;
}
.sayfacontent li{
margin-bottom: .55em !important;
line-height: 1.7 !important;
}
.sayfacontent ul li::marker{ color: var(--vx-accent); }
.sayfacontent ol li::marker{ color: var(--vx-text-3); font-family: var(--vx-font-mono); font-size: .9em; }
.sayfacontent a{
color: var(--vx-accent) !important;
text-decoration: underline !important;
text-decoration-color: var(--vx-accent-border) !important;
text-underline-offset: 2px;
transition: text-decoration-color .15s, color .15s;
}
.sayfacontent a:hover{
color: var(--vx-accent-hi) !important;
text-decoration-color: var(--vx-accent) !important;
}
.sayfacontent blockquote{
margin: 24px 0 !important;
padding: 16px 20px !important;
background: var(--vx-surface-2) !important;
border-left: 3px solid var(--vx-accent) !important;
border-radius: 0 var(--vx-r-md) var(--vx-r-md) 0 !important;
color: var(--vx-text-2) !important;
font-style: normal !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
.sayfacontent hr{
border: none !important;
height: 1px !important;
background: var(--vx-border) !important;
margin: 32px 0 !important;
}
/* Inline code + pre */
.sayfacontent code{
font-family: var(--vx-font-mono) !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: 4px !important;
padding: 2px 6px !important;
font-size: .88em !important;
color: var(--vx-accent) !important;
}
.sayfacontent pre{
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
padding: 16px !important;
overflow-x: auto !important;
font-family: var(--vx-font-mono) !important;
font-size: 13px !important;
line-height: 1.55 !important;
color: var(--vx-text) !important;
margin: 20px 0 !important;
}
.sayfacontent pre code{
background: transparent !important;
border: none !important;
padding: 0 !important;
color: inherit !important;
}
/* Tables */
.sayfacontent table{
width: 100% !important;
border-collapse: collapse !important;
margin: 20px 0 !important;
background: var(--vx-surface-2) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-md) !important;
overflow: hidden !important;
}
.sayfacontent th,
.sayfacontent td{
padding: 12px 16px !important;
border: none !important;
border-bottom: 1px solid var(--vx-border) !important;
text-align: left !important;
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--vx-text-2) !important;
}
.sayfacontent th{
background: var(--vx-surface-hi) !important;
color: var(--vx-text-3) !important;
font-family: var(--vx-font-mono) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.sayfacontent tr:last-child td{ border-bottom: none !important; }
/* Images inside content */
.sayfacontent img{
max-width: 100% !important;
height: auto !important;
border-radius: var(--vx-r-md) !important;
border: 1px solid var(--vx-border) !important;
margin: 20px 0 !important;
}
/* ===== Sidebar (related pages) ===== */
.sidebar{
position: sticky;
top: 96px;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
font-family: var(--vx-font-sans) !important;
}
.sidebar .sidelinks{
background: var(--vx-surface) !important;
border: 1px solid var(--vx-border) !important;
border-radius: var(--vx-r-lg) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column;
overflow: hidden;
position: relative;
}
.sidebar .sidelinks::before{
content: "İlgili Belgeler";
display: block;
padding: 16px 20px;
font-family: var(--vx-font-mono);
font-size: 10px;
font-weight: 600;
color: var(--vx-text-3);
letter-spacing: .14em;
text-transform: uppercase;
border-bottom: 1px solid var(--vx-border);
background: var(--vx-surface-2);
}
.sidebar .sidelinks a{
position: relative;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 20px !important;
border-bottom: 1px solid var(--vx-border) !important;
background: var(--vx-surface) !important;
color: var(--vx-text-2) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
letter-spacing: -.005em;
line-height: 1.4;
transition: background .15s, color .15s, padding .15s;
}
.sidebar .sidelinks a:last-child{ border-bottom: none !important; }
.sidebar .sidelinks a:hover{
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
padding-left: 26px !important;
}
.sidebar .sidelinks a::after{
content: "\f054";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 10px;
color: var(--vx-text-4);
flex-shrink: 0;
transition: color .15s, transform .15s;
}
.sidebar .sidelinks a:hover::after{
color: var(--vx-accent);
transform: translateX(3px);
}
.sidebar .sidelinks a span{
display: inline !important;
background: none !important;
border: none !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
flex: 1;
}
/* Active link (if backend marks it) */
.sidebar .sidelinks a.active,
.sidebar .sidelinks a[class*="active"]{
background: var(--vx-surface-2) !important;
color: var(--vx-text) !important;
border-left: 3px solid var(--vx-accent) !important;
padding-left: 17px !important;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 980px){
#wrapper:has(> .sayfacontent){
grid-template-columns: 1fr !important;
gap: 24px !important;
padding: 32px 16px 64px !important;
}
.sidebar{ position: static; }
.sayfacontent{ padding: 32px 28px !important; }
.sayfacontent h1{ font-size: 24px !important; }
}
@media (max-width: 560px){
.sayfacontent{ padding: 24px 20px !important; font-size: 14px !important; }
.sayfacontent h1{ font-size: 22px !important; }
.sayfacontent h2{ font-size: 18px !important; }
.sayfacontent p{ font-size: 14px !important; }
}
/* ============================================================
COOKIE POPUP — appended by Vexoria assistant
============================================================ */
/* ============================================================
VEXORIA — Çerez Popup (#mio-cookie-popup) CSS Override
WiseCP core'unun inject ettiği popup'a CSS katmanı.
Doğru selector: #mio-cookie-popup .mio-cookie-popup__card
============================================================ */
#mio-cookie-popup,
#mio-cookie-popup *{ box-sizing: border-box !important; }
/* Backdrop / wrapper — keep transparent if any */
#mio-cookie-popup{
z-index: 9999 !important;
font-family: var(--vx-font-sans) !important;
background: transparent !important;
}
/* ---------- Card ---------- */
#mio-cookie-popup .mio-cookie-popup__card{
position: fixed !important;
z-index: 9999 !important;
bottom: 16px !important;
left: 16px !important;
top: auto !important;
right: auto !important;
background: var(--vx-surface) !important;
background-image: none !important;
background-color: var(--vx-surface) !important;
border: 1px solid var(--vx-border-strong) !important;
border-radius: var(--vx-r-xl) !important;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
padding: 28px 28px 24px !important;
font-family: var(--vx-font-sans) !important;
color: var(--vx-text) !important;
width: 380px !important;
max-width: calc(100vw - 32px) !important;
overflow: hidden !important;
text-align: left !important;
}
#mio-cookie-popup .mio-cookie-popup__card::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vx-accent) 0%, var(--vx-accent-hi) 60%, transparent 100%);
}
#mio-cookie-popup .mio-cookie-popup__card::after{
content: "POLICY · /cookies";
position: absolute;
top: 12px; right: 16px;
font-family: var(--vx-font-mono);
font-size: 9px;
font-weight: 500;
color: var(--vx-text-4);
letter-spacing: .12em;
text-transform: uppercase;
pointer-events: none;
}
/* ---------- Title ---------- */
#mio-cookie-popup .mio-cookie-popup__card h1,
#mio-cookie-popup .mio-cookie-popup__card h2,
#mio-cookie-popup .mio-cookie-popup__card h3,
#mio-cookie-popup .mio-cookie-popup__card h4,
#mio-cookie-popup .mio-cookie-popup__card .title{
display: block !important;
margin: 0 0 8px !important;
padding: 0 !important;
font-family: var(--vx-font-sans) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--vx-text) !important;
letter-spacing: -.02em !important;
line-height: 1.3 !important;
text-align: left !important;
text-transform: none !important;
background: none !important;
border: none !important;
}
#mio-cookie-popup .mio-cookie-popup__card h1::before,
#mio-cookie-popup .mio-cookie-popup__card h2::before,
#mio-cookie-popup .mio-cookie-popup__card h3::before,
#mio-cookie-popup .mio-cookie-popup__card h4::before,
#mio-cookie-popup .mio-cookie-popup__card .title::before{
content: "\f564";
font-family: "Font Awesome 6 Free";
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: var(--vx-accent-soft);
border: 1px solid var(--vx-accent-border);
border-radius: var(--vx-r-md);
color: var(--vx-accent);
font-size: 15px;
margin: 0 0 14px 0;
vertical-align: middle;
}
/* ---------- Body ---------- */
#mio-cookie-popup .mio-cookie-popup__card p,
#mio-cookie-popup .mio-cookie-popup__card > div,
#mio-cookie-popup .mio-cookie-popup__card > span{
margin: 0 0 14px !important;
padding: 0 !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
line-height: 1.6 !important;
color: var(--vx-text-2) !important;
letter-spacing: -.005em !important;
text-align: left !important;
background: none !important;
border: none !important;
}
/* ---------- Link ---------- */
#mio-cookie-popup .mio-cookie-popup__card a:not(button):not([class*="button"]):not([class*="btn"]){
color: var(--vx-accent) !important;
text-decoration: underline !important;
text-decoration-color: var(--vx-accent-border) !important;
text-underline-offset: 2px !important;
font-weight: 600 !important;
background: none !important;
transition: color .15s, text-decoration-color .15s;
}
#mio-cookie-popup .mio-cookie-popup__card a:not(button):not([class*="button"]):not([class*="btn"]):hover{
color: var(--vx-accent-hi) !important;
text-decoration-color: var(--vx-accent) !important;
}
/* ---------- Accept button ---------- */
#mio-cookie-popup .mio-cookie-popup__card button,
#mio-cookie-popup .mio-cookie-popup__card .mio-cookie-popup__btn,
#mio-cookie-popup .mio-cookie-popup__card [class*="cookie-popup__btn"],
#mio-cookie-popup .mio-cookie-popup__card [class*="cookie-popup-button"],
#mio-cookie-popup .mio-cookie-popup__card [class*="accept"],
#mio-cookie-popup .mio-cookie-popup__card a.btn,
#mio-cookie-popup .mio-cookie-popup__card a[onclick]{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
padding: 0 20px !important;
background: var(--vx-accent) !important;
background-image: none !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--vx-r-md) !important;
font-family: var(--vx-font-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -.005em !important;
text-transform: none !important;
text-decoration: none !important;
cursor: pointer !important;
margin: 8px 0 0 !important;
box-shadow: none !important;
text-shadow: none !important;
transition: background .15s, transform .15s, box-shadow .15s !important;
float: none !important;
}
#mio-cookie-popup .mio-cookie-popup__card button:hover,
#mio-cookie-popup .mio-cookie-popup__card .mio-cookie-popup__btn:hover,
#mio-cookie-popup .mio-cookie-popup__card [class*="cookie-popup__btn"]:hover,
#mio-cookie-popup .mio-cookie-popup__card [class*="cookie-popup-button"]:hover,
#mio-cookie-popup .mio-cookie-popup__card [class*="accept"]:hover{
background: var(--vx-accent-hi) !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(227,6,19,.28) !important;
color: #fff !important;
}
#mio-cookie-popup .mio-cookie-popup__card button::after{
content: "→";
font-size: 14px;
transition: transform .15s;
}
#mio-cookie-popup .mio-cookie-popup__card button:hover::after{ transform: translateX(3px); }
/* Reject / secondary if present */
#mio-cookie-popup .mio-cookie-popup__card [class*="reject"],
#mio-cookie-popup .mio-cookie-popup__card [class*="decline"],
#mio-cookie-popup .mio-cookie-popup__card button.secondary{
background: var(--vx-surface-2) !important;
color: var(--vx-text-2) !important;
border: 1px solid var(--vx-border-strong) !important;
}
#mio-cookie-popup .mio-cookie-popup__card [class*="reject"]:hover,
#mio-cookie-popup .mio-cookie-popup__card [class*="decline"]:hover{
background: var(--vx-surface-hi) !important;
color: var(--vx-text) !important;
}
/* Close icon if present */
#mio-cookie-popup .mio-cookie-popup__card .close,
#mio-cookie-popup .mio-cookie-popup__card [class*="__close"]{
position: absolute !important;
top: 14px !important;
right: 50px !important;
width: 24px !important;
height: 24px !important;
background: transparent !important;
border: 1px solid var(--vx-border) !important;
border-radius: 999px !important;
color: var(--vx-text-3) !important;
font-size: 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 2 !important;
}
#mio-cookie-popup .mio-cookie-popup__card .close:hover,
#mio-cookie-popup .mio-cookie-popup__card [class*="__close"]:hover{
background: var(--vx-accent-soft) !important;
border-color: var(--vx-accent-border) !important;
color: var(--vx-accent) !important;
}
/* Responsive */
@media (max-width: 480px){
#mio-cookie-popup .mio-cookie-popup__card{
width: calc(100vw - 24px) !important;
bottom: 12px !important;
left: 12px !important;
right: 12px !important;
padding: 20px 20px 18px !important;
}
#mio-cookie-popup .mio-cookie-popup__card h1,
#mio-cookie-popup .mio-cookie-popup__card h2,
#mio-cookie-popup .mio-cookie-popup__card h3,
#mio-cookie-popup .mio-cookie-popup__card h4{ font-size: 16px !important; }
#mio-cookie-popup .mio-cookie-popup__card p{ font-size: 12px !important; }
}