/* ============================================================
DATASSL Modern Theme · v1
SSL2Buy-inspired commerce design
============================================================ */
:root {
--brand: #0D5EAF;
--brand-2: #084683;
--brand-3: #E7F0F9;
--brand-ink: #FFFFFF;
--cta: #22A45D;
--cta-dark: #1B8449;
--cta-soft: #E4F5EC;
--gold: #F5B831;
--gold-dark: #C48A17;
--gold-soft: #FEF3D7;
--danger: #D93C2B;
--star: #F5B831;
--bg: #F6F8FB;
--bg-alt: #EEF2F7;
--panel: #FFFFFF;
--hair: #E2E7EF;
--hair-soft: #ECF0F5;
--ink: #1A2740;
--ink-2: #4A5A75;
--ink-3: #74849E;
--ink-4: #A8B4C6;
}
/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.dm-body {
background: var(--bg); color: var(--ink);
font-family: "Inter", "Segoe UI", -apple-system, system-ui, sans-serif;
font-feature-settings: "cv11","ss01";
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
font-size: 15px; line-height: 1.5;
}
.dm a { color: inherit; text-decoration: none; }
.dm ::selection { background: var(--brand); color: white; }
.dm .tnum { font-variant-numeric: tabular-nums; }
.dm .mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.dm-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .dm-container { padding: 0 16px; } }
/* ─── TOP BAR (slim, refined) ─── */
.dm-topbar { background: #051E3A; color: rgba(255,255,255,0.72); font-size: 12.5px;
border-bottom: 1px solid rgba(255,255,255,0.06); font-weight: 500; }
.dm-topbar .dm-container { display: flex; justify-content: space-between; align-items: center;
height: 38px; gap: 24px; }
.dm-topbar .l, .dm-topbar .r { display: flex; gap: 22px; align-items: center; }
.dm-topbar a { color: rgba(255,255,255,0.72); transition: color .15s; display: inline-flex; align-items: center; gap: 6px; }
.dm-topbar a:hover { color: white; }
.dm-topbar a svg { opacity: 0.6; }
.dm-topbar .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.12); }
.dm-topbar .chip { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); }
.dm-topbar .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399;
box-shadow: 0 0 0 2px rgba(52,211,153,0.2); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.dm-lang-picker { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
border-radius: 4px; color: rgba(255,255,255,0.72); cursor: pointer;
transition: background .12s; font-weight: 500; }
.dm-lang-picker:hover { background: rgba(255,255,255,0.06); color: white; }
.dm-lang-picker svg { opacity: 0.5; }
@media (max-width: 720px) { .dm-topbar .l a:not(.chip), .dm-topbar .sep { display: none; } }
/* ─── HEADER (spacious, premium) ─── */
.dm-header { background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--hair);
position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px); }
.dm-head-main { display: flex; align-items: center; gap: 28px; height: 84px; }
.dm-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800;
font-size: 24px; color: var(--brand); letter-spacing: -0.025em; flex-shrink: 0;
transition: opacity .15s; }
.dm-brand:hover { opacity: 0.85; }
.dm-brand img { max-height: 40px; width: auto; }
.dm-brand svg { width: 34px; height: 34px; }
.dm-search { flex: 1; max-width: 440px; position: relative; }
.dm-search input { width: 100%; height: 42px; padding: 0 44px 0 44px;
border: 1px solid var(--hair); border-radius: 999px; background: var(--bg);
font-family: inherit; font-size: 13.5px; color: var(--ink); outline: 0;
transition: all .18s; }
.dm-search input:focus { border-color: var(--brand); background: white;
box-shadow: 0 0 0 4px rgba(13,94,175,0.12); }
.dm-search input::placeholder { color: var(--ink-3); }
.dm-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
color: var(--ink-3); pointer-events: none; }
.dm-search .kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-3);
padding: 2px 6px; border: 1px solid var(--hair); border-radius: 4px;
background: white; letter-spacing: 0.02em; }
.dm-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dm-head-actions .dm-link { display: inline-flex; align-items: center; gap: 8px;
color: var(--ink-2); font-size: 13px; font-weight: 500; transition: all .15s;
padding: 8px 12px; border-radius: 8px; }
.dm-head-actions .dm-link:hover { color: var(--brand); background: var(--brand-3); }
.dm-head-actions .dm-link .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.dm-head-actions .dm-btn { margin-left: 8px; height: 40px; border-radius: 999px; padding: 0 22px; }
.dm-cart { position: relative; }
.dm-cart .badge { position: absolute; top: 2px; right: 2px; background: var(--brand);
color: white; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
border: 2px solid white; }
/* ─── BUTTONS ─── */
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 42px; padding: 0 20px; border-radius: 6px; font-size: 14px; font-weight: 600;
letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer;
font-family: inherit; transition: all .15s; white-space: nowrap; text-decoration: none; }
.dm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dm-btn-primary { background: var(--brand); color: white; box-shadow: 0 1px 2px rgba(13,94,175,0.15); }
.dm-btn-primary:hover { background: var(--brand-2); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(13,94,175,0.4); color: white; }
.dm-btn-cta { background: var(--cta); color: white; box-shadow: 0 1px 2px rgba(34,164,93,0.2); }
.dm-btn-cta:hover { background: var(--cta-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(34,164,93,0.5); color: white; }
.dm-btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.dm-btn-outline:hover { background: var(--brand); color: white; }
.dm-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--hair); }
.dm-btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); background: var(--bg); }
.dm-btn-lg { height: 50px; padding: 0 28px; font-size: 15px; }
.dm-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
/* ─── MAIN NAV (white, elegant, underline hover) ─── */
.dm-mainnav { background: white; border-bottom: 1px solid var(--hair);
box-shadow: 0 4px 20px -12px rgba(26,39,64,0.06); }
.dm-mainnav .dm-container { display: flex; align-items: stretch; height: 54px; }
.dm-nav-item { position: relative; display: flex; align-items: center; }
.dm-nav-link { position: relative; display: flex; align-items: center; gap: 6px; height: 100%;
padding: 0 20px; color: var(--ink-2); font-size: 14px; font-weight: 500;
letter-spacing: -0.005em; transition: color .15s; }
.dm-nav-link::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0;
height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: center;
transition: transform .22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dm-nav-link:hover, .dm-nav-item:hover .dm-nav-link, .dm-nav-item.active .dm-nav-link {
color: var(--brand); }
.dm-nav-link:hover::after, .dm-nav-item:hover .dm-nav-link::after,
.dm-nav-item.active .dm-nav-link::after { transform: scaleX(1); }
.dm-nav-link .caret { font-size: 8px; opacity: 0.5; transition: transform .18s;
margin-left: 2px; }
.dm-nav-item:hover .caret, .dm-nav-item:focus-within .caret {
transform: rotate(180deg); opacity: 1; }
.dm-nav-cta-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
color: var(--gold-dark); font-size: 13px; font-weight: 700; padding: 0 20px;
letter-spacing: 0.02em; transition: color .15s; }
.dm-nav-cta-link:hover { color: var(--gold); }
.dm-mega { position: absolute; top: calc(100% + 1px); left: 0;
background: white; border: 1px solid var(--hair); border-radius: 12px;
box-shadow: 0 24px 60px -20px rgba(26,39,64,0.20), 0 2px 8px rgba(26,39,64,0.06);
padding: 28px; min-width: 720px; z-index: 100;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .18s, transform .18s, visibility .18s; margin-top: 6px; }
.dm-nav-item:hover .dm-mega, .dm-nav-item:focus-within .dm-mega {
opacity: 1; visibility: visible; transform: translateY(0); }
.dm-mega-grid { display: grid; gap: 28px; }
.dm-mega-col h6 { margin: 0 0 12px; font-size: 11px; color: var(--brand); font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 8px;
border-bottom: 2px solid var(--brand-3); }
.dm-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dm-mega-col a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 12px; border-radius: 6px; color: var(--ink); font-size: 13.5px;
transition: background .12s, color .12s; }
.dm-mega-col a:hover { background: var(--brand-3); color: var(--brand-2); }
.dm-mega-col a .name { display: flex; flex-direction: column; gap: 2px; }
.dm-mega-col a .name b { font-weight: 600; }
.dm-mega-col a .desc { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.dm-mega-col a:hover .desc { color: var(--brand); }
.dm-mega-col a .tag { font-family: "JetBrains Mono", monospace; font-size: 9.5px;
font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.06em;
text-transform: uppercase; background: var(--bg-alt); color: var(--ink-3); flex-shrink: 0; }
.dm-mega-col a .tag.hot { background: var(--danger); color: white; }
.dm-mega-col a .tag.new { background: var(--cta); color: white; }
.dm-mega-col a .tag.ev { background: var(--gold-dark); color: white; }
.dm-mega-featured { background: linear-gradient(135deg, var(--brand-3), white);
border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 8px;
border: 1px solid var(--hair-soft); }
.dm-mega-featured .k { font-size: 10.5px; color: var(--brand); font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; }
.dm-mega-featured .title { font-size: 16px; font-weight: 700; color: var(--ink); }
.dm-mega-featured p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.dm-mega-featured .price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.dm-mega-featured .price-row b { font-size: 22px; font-weight: 800; color: var(--brand); }
.dm-mega-featured .price-row small { font-size: 11px; color: var(--ink-3); }
.dm-mega-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dm-brand-tile { padding: 14px; border: 1px solid var(--hair);
border-radius: 8px; display: flex; flex-direction: column; gap: 4px; text-align: center;
color: var(--ink); transition: all .15s; background: var(--bg); }
.dm-brand-tile:hover { border-color: var(--brand); background: var(--brand-3);
transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(13,94,175,0.3); }
.dm-brand-tile b { font-weight: 700; font-size: 15px; color: var(--ink); }
.dm-brand-tile span { font-size: 11px; color: var(--ink-3); }
/* ─── MOBILE MENU ─── */
.dm-mobile-toggle { display: none; background: transparent; border: 1px solid var(--hair);
padding: 8px 10px; border-radius: 8px; color: var(--ink); cursor: pointer;
margin-right: 8px; align-items: center; gap: 6px; }
.dm-mobile-toggle svg { display: block; }
.dm-mobile-panel { display: none; position: fixed; inset: 0; z-index: 200;
background: rgba(11,22,33,0.5); backdrop-filter: blur(6px); }
.dm-mobile-panel.open { display: block; animation: dmFadeIn .2s; }
.dm-mobile-panel-inner { position: absolute; top: 0; left: 0; bottom: 0; width: 320px;
max-width: 88vw; background: white; overflow-y: auto;
animation: dmSlideIn .28s cubic-bezier(0.2,0.7,0.2,1); }
@keyframes dmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dmSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.dm-mp-head { display: flex; justify-content: space-between; align-items: center;
padding: 18px 20px; border-bottom: 1px solid var(--hair); }
.dm-mp-close { background: transparent; border: 0; padding: 6px; color: var(--ink); cursor: pointer; }
.dm-mp-body { padding: 12px 20px 32px; }
.dm-mp-search { margin-bottom: 16px; }
.dm-mp-search input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--hair);
border-radius: 8px; font-size: 14px; }
.dm-mp-section { padding: 12px 0; border-top: 1px solid var(--hair-soft); }
.dm-mp-section:first-child { border-top: 0; }
.dm-mp-section h6 { margin: 0 0 10px; font-size: 10.5px; color: var(--ink-3);
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.dm-mp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 8px; color: var(--ink); font-size: 15px; font-weight: 500;
border-radius: 8px; transition: background .12s; }
.dm-mp-item:hover { background: var(--bg); color: var(--brand); }
.dm-mp-item.parent { font-weight: 600; }
.dm-mp-details { padding: 4px 8px; }
.dm-mp-details summary { display: flex; align-items: center; justify-content: space-between;
padding: 12px 8px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
list-style: none; border-radius: 8px; }
.dm-mp-details summary::-webkit-details-marker { display: none; }
.dm-mp-details summary::after { content: "▾"; color: var(--ink-3); font-size: 11px; transition: transform .2s; }
.dm-mp-details[open] summary::after { transform: rotate(180deg); }
.dm-mp-details[open] summary { background: var(--bg); color: var(--brand); }
.dm-mp-sub { padding: 4px 0 4px 16px; display: grid; gap: 2px; }
.dm-mp-sub a { display: block; padding: 10px 12px; color: var(--ink-2); font-size: 14px;
border-radius: 6px; }
.dm-mp-sub a:hover { background: var(--bg); color: var(--brand); }
.dm-mp-cta { margin-top: 20px; display: grid; gap: 8px; }
.dm-mp-cta .dm-btn { width: 100%; }
@media (max-width: 980px) {
.dm-mobile-toggle { display: inline-flex; }
.dm-mainnav { display: none; }
.dm-search { display: none; }
.dm-head-actions .dm-link { padding: 8px; }
.dm-head-actions .dm-link span { display: none; }
.dm-head-actions .dm-btn { margin-left: 4px; padding: 0 14px; font-size: 13px; }
}
@media (max-width: 640px) {
.dm-head-main { height: 68px; gap: 12px; }
.dm-brand { font-size: 20px; }
.dm-brand svg { width: 28px; height: 28px; }
.dm-head-actions { gap: 4px; }
.dm-head-actions .dm-btn { display: none; }
.dm-head-actions .dm-link { padding: 6px; }
.dm-topbar .dm-container { height: auto; padding-top: 6px; padding-bottom: 6px; }
.dm-topbar .l { display: none; }
.dm-topbar .l .chip { display: inline-flex; }
.dm-topbar .l { display: flex; }
.dm-topbar .l a { display: none; }
}
/* ─── HERO ─── */
.dm-hero { padding: 48px 0 40px; background: linear-gradient(135deg, var(--brand-3) 0%, var(--bg) 60%);
position: relative; overflow: hidden; }
.dm-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .dm-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.dm-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
background: var(--gold-soft); color: var(--gold-dark); border-radius: 999px;
font-size: 12px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.02em; }
.dm-hero h1 { margin: 0 0 20px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1;
font-weight: 800; color: var(--ink); letter-spacing: -0.025em; text-wrap: balance; }
.dm-hero h1 .accent { color: var(--brand); }
.dm-hero p.lede { margin: 0 0 28px; font-size: 17px; color: var(--ink-2); max-width: 52ch; line-height: 1.55; }
.dm-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.dm-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--hair); }
.dm-trust-item { display: flex; align-items: center; gap: 10px; }
.dm-trust-item .val { font-size: 22px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.dm-trust-item .lbl { font-size: 12px; color: var(--ink-3); font-weight: 500; line-height: 1.2; }
.dm-deal-card { background: white; border: 1px solid var(--hair); border-radius: 12px;
padding: 24px; position: relative; box-shadow: 0 20px 40px -20px rgba(26,39,64,0.15); }
.dm-deal-flag { position: absolute; top: -12px; left: 20px; background: var(--gold);
color: var(--ink); font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 4px;
letter-spacing: 0.04em; text-transform: uppercase;
box-shadow: 0 4px 12px -2px rgba(245,184,49,0.5); }
.dm-deal-head { display: flex; align-items: center; justify-content: space-between;
padding-bottom: 16px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; }
.dm-deal-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
background: var(--brand-3); color: var(--brand-2); border-radius: 4px;
font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.dm-deal-tag { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
padding: 3px 8px; background: var(--gold-dark); color: white;
border-radius: 3px; letter-spacing: 0.06em; }
.dm-deal-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.dm-deal-card .sub { margin: 0 0 16px; font-size: 13px; color: var(--ink-3); }
.dm-deal-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.dm-deal-features li { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.dm-deal-features li svg { flex-shrink: 0; color: var(--cta); }
.dm-deal-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dm-deal-price .old { color: var(--ink-4); text-decoration: line-through; font-size: 15px; }
.dm-deal-price .now { font-size: 34px; font-weight: 800; color: var(--brand); letter-spacing: -0.03em;
font-variant-numeric: tabular-nums; }
.dm-deal-price .unit { font-size: 13px; color: var(--ink-3); }
.dm-deal-save { display: inline-block; margin-bottom: 16px; padding: 3px 8px;
background: var(--cta-soft); color: var(--cta-dark); border-radius: 4px;
font-size: 11.5px; font-weight: 700; }
.dm-deal-card .dm-btn-cta { width: 100%; height: 46px; font-size: 15px; }
/* ─── TRUST STRIP ─── */
.dm-trust-strip { background: white; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.dm-trust-strip .dm-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 32px; padding-bottom: 32px; }
@media (max-width: 720px) { .dm-trust-strip .dm-container { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.dm-trust-cell { display: flex; align-items: center; gap: 14px; }
.dm-trust-cell .ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
background: var(--brand-3); color: var(--brand); display: grid; place-items: center; }
.dm-trust-cell .ico svg { width: 22px; height: 22px; }
.dm-trust-cell .val { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.dm-trust-cell .lbl { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; font-weight: 500; }
.dm-trust-cell .stars { color: var(--star); font-size: 14px; letter-spacing: 1px; }
/* ─── SECTIONS ─── */
.dm-section { padding: 64px 0; }
.dm-section.alt { background: var(--bg-alt); }
@media (max-width: 720px) { .dm-section { padding: 48px 0; } }
.dm-sec-head { text-align: center; margin-bottom: 40px; }
.dm-sec-head .kicker { display: inline-block; font-size: 11.5px; color: var(--brand); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.dm-sec-head h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); font-weight: 800;
color: var(--ink); letter-spacing: -0.02em; text-wrap: balance; }
.dm-sec-head p { margin: 0 auto; max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
/* ─── AUTHORITIES ─── */
.dm-authorities { padding: 48px 0; background: white; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.dm-auth-lbl { text-align: center; margin-bottom: 24px; font-size: 12px; color: var(--ink-3);
letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.dm-auth-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: center; }
@media (max-width: 900px) { .dm-auth-row { grid-template-columns: repeat(3, 1fr); } }
.dm-auth-tile { padding: 18px; text-align: center; border-radius: 8px;
background: var(--bg); transition: all .15s; cursor: pointer; display: block; color: inherit; }
.dm-auth-tile:hover { background: var(--brand-3); transform: translateY(-2px); }
.dm-auth-tile img { max-height: 32px; width: auto; max-width: 100%; }
.dm-auth-tile b { display: block; font-size: 18px; font-weight: 700; color: var(--ink); }
.dm-auth-tile span { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 4px;
letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
/* ─── PRODUCT CARDS ─── */
.dm-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .dm-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dm-product-grid { grid-template-columns: 1fr; } }
.dm-pcard { background: white; border: 1px solid var(--hair); border-radius: 10px;
padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 14px;
position: relative; transition: all .18s; }
.dm-pcard:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 20px 40px -20px rgba(13,94,175,0.25); }
.dm-pcard-flag { position: absolute; top: 14px; right: 14px; padding: 3px 8px;
font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; z-index: 2; }
.dm-pcard-flag.hot { background: var(--danger); color: white; }
.dm-pcard-flag.new { background: var(--cta); color: white; }
.dm-pcard-flag.deal { background: var(--gold); color: var(--ink); }
.dm-pcard-brand { display: flex; align-items: center; gap: 8px; }
.dm-pcard-brand-logo { width: 32px; height: 32px; border-radius: 6px; background: var(--brand-3);
color: var(--brand); display: grid; place-items: center; font-weight: 800; font-size: 14px;
overflow: hidden; }
.dm-pcard-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dm-pcard-brand-name { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.dm-pcard-brand-name .tag { display: inline-block; margin-left: 6px; padding: 1px 6px;
background: var(--brand-3); color: var(--brand); border-radius: 3px;
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
font-family: "JetBrains Mono", monospace; }
.dm-pcard h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; line-height: 1.2; }
.dm-pcard .rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.dm-pcard .rating .stars { color: var(--star); letter-spacing: 1px; }
.dm-pcard ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.dm-pcard ul li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.dm-pcard ul li svg { flex-shrink: 0; color: var(--cta); margin-top: 2px; }
.dm-pcard-foot { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--hair);
display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.dm-pcard-price .from { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em;
text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 2px; }
.dm-pcard-price .row { display: flex; align-items: baseline; gap: 6px; }
.dm-pcard-price .row b { font-size: 24px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; }
.dm-pcard-price .row .old { color: var(--ink-4); text-decoration: line-through; font-size: 13px; }
.dm-pcard-price small { font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; }
/* ─── COMPARISON TABLE ─── */
.dm-cmp-wrap { background: white; border: 1px solid var(--hair); border-radius: 12px;
overflow: hidden; box-shadow: 0 4px 12px -6px rgba(26,39,64,0.08); }
.dm-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-cmp thead th { padding: 20px 18px 16px; text-align: center; vertical-align: bottom;
background: var(--bg); border-bottom: 2px solid var(--hair); border-left: 1px solid var(--hair-soft); }
.dm-cmp thead th:first-child { text-align: left; border-left: 0; }
.dm-cmp thead th .name { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 6px; }
.dm-cmp thead th .type { display: inline-block; font-size: 10px; font-weight: 700;
padding: 2px 8px; border-radius: 3px; letter-spacing: 0.06em; text-transform: uppercase;
font-family: "JetBrains Mono", monospace; }
.dm-cmp thead th .type.dv { background: var(--cta-soft); color: var(--cta-dark); }
.dm-cmp thead th .type.ov { background: var(--brand-3); color: var(--brand-2); }
.dm-cmp thead th .type.ev { background: var(--gold-soft); color: var(--gold-dark); }
.dm-cmp thead th .type.w { background: var(--bg-alt); color: var(--ink-2); }
.dm-cmp thead th.pop { background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold-soft) 40%, var(--bg) 100%); position: relative; }
.dm-cmp thead th.pop::before { content: "EN POPÜLER"; position: absolute; top: 0; left: 50%;
transform: translate(-50%, -50%); background: var(--gold); color: var(--ink);
padding: 3px 12px; border-radius: 3px; font-size: 10px; font-weight: 800;
letter-spacing: 0.08em; box-shadow: 0 3px 8px -2px rgba(245,184,49,0.5); white-space: nowrap; }
.dm-cmp tbody th { padding: 14px 18px; text-align: left; font-size: 13px; font-weight: 500;
color: var(--ink-2); background: var(--bg); border-bottom: 1px solid var(--hair-soft); width: 220px; }
.dm-cmp tbody td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--hair-soft);
border-left: 1px solid var(--hair-soft); color: var(--ink); font-weight: 500; }
.dm-cmp tbody td.pop { background: rgba(245,184,49,0.05); }
.dm-cmp .check { color: var(--cta); font-weight: 800; font-size: 15px; }
.dm-cmp .dash { color: var(--ink-4); }
.dm-cmp .price { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.dm-cmp .price b { font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dm-cmp .price small { font-size: 11px; color: var(--ink-3); }
.dm-cmp tfoot td { padding: 20px 18px; border-left: 1px solid var(--hair-soft); }
.dm-cmp tfoot td:first-child { border-left: 0; }
.dm-cmp tfoot .dm-btn { width: 100%; }
@media (max-width: 900px) {
.dm-cmp, .dm-cmp thead, .dm-cmp tbody, .dm-cmp tr, .dm-cmp th, .dm-cmp td, .dm-cmp tfoot { display: block; }
.dm-cmp thead { position: absolute; left: -9999px; }
.dm-cmp tbody th { background: var(--bg-alt); border-bottom: 0; padding-bottom: 4px; text-align: left; width: auto; }
.dm-cmp tbody td { text-align: left; border-left: 0; padding-top: 4px; padding-bottom: 14px; }
.dm-cmp tfoot td { padding: 12px 18px; border-left: 0; }
}
/* ─── WHY CARDS ─── */
.dm-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .dm-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .dm-why-grid { grid-template-columns: 1fr; } }
.dm-why-card { background: white; border: 1px solid var(--hair); border-radius: 10px;
padding: 26px 22px; text-align: center; transition: all .18s; }
.dm-why-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(26,39,64,0.18); border-color: var(--brand); }
.dm-why-card .ico { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 12px;
background: var(--brand-3); color: var(--brand); display: grid; place-items: center; }
.dm-why-card .ico svg { width: 28px; height: 28px; }
.dm-why-card h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dm-why-card p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
/* ─── TESTIMONIALS ─── */
.dm-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .dm-testi-grid { grid-template-columns: 1fr; } }
.dm-testi { background: white; border: 1px solid var(--hair); border-radius: 10px; padding: 24px; }
.dm-testi .stars { color: var(--star); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.dm-testi p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink); line-height: 1.6; font-style: italic; }
.dm-testi .who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hair-soft); }
.dm-testi .who .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-3);
color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.dm-testi .who b { display: block; font-size: 14px; color: var(--ink); font-weight: 700; }
.dm-testi .who span { display: block; font-size: 12px; color: var(--ink-3); }
/* ─── GUARANTEE ─── */
.dm-guarantee { background: var(--brand); color: white; padding: 40px 0; }
.dm-guarantee .dm-container { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
@media (max-width: 720px) { .dm-guarantee .dm-container { grid-template-columns: 1fr; text-align: center; gap: 20px; } }
.dm-guarantee .medal { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.15);
display: grid; place-items: center; flex-shrink: 0; }
.dm-guarantee .medal svg { width: 40px; height: 40px; }
.dm-guarantee h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.dm-guarantee p { margin: 0; font-size: 15px; color: rgba(255,255,255,0.85); max-width: 60ch; }
.dm-guarantee .dm-btn { background: white; color: var(--brand); }
.dm-guarantee .dm-btn:hover { background: var(--bg-alt); }
/* ─── FAQ ─── */
.dm-faq-list { max-width: 820px; margin: 0 auto; }
.dm-faq-item { background: white; border: 1px solid var(--hair); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.dm-faq-item summary { padding: 18px 24px; font-size: 15px; font-weight: 600; color: var(--ink);
cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.dm-faq-item summary::-webkit-details-marker { display: none; }
.dm-faq-item summary::after { content: "+"; color: var(--brand); font-size: 22px;
font-weight: 400; transition: transform .2s; flex-shrink: 0; }
.dm-faq-item[open] summary::after { transform: rotate(45deg); }
.dm-faq-item[open] { border-color: var(--brand); }
.dm-faq-item .body { padding: 0 24px 20px; font-size: 14px; color: var(--ink-2); line-height: 1.65; }
/* ─── FOOTER ─── */
.dm-footer { background: var(--brand-2); color: rgba(255,255,255,0.85); padding: 56px 0 24px; }
.dm-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; margin-bottom: 40px; }
@media (max-width: 900px) { .dm-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.dm-foot-brand h4 { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: white; letter-spacing: -0.02em; }
.dm-foot-brand p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; max-width: 34ch; color: rgba(255,255,255,0.7); }
.dm-foot-brand .contact { display: grid; gap: 8px; font-size: 13px; }
.dm-foot-brand .contact a { color: white; font-weight: 600; }
.dm-foot-col h5 { margin: 0 0 16px; font-size: 12px; color: white; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; }
.dm-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dm-foot-col a { font-size: 13.5px; color: rgba(255,255,255,0.75); transition: color .12s; }
.dm-foot-col a:hover { color: white; }
.dm-foot-bar { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15);
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
font-size: 12.5px; color: rgba(255,255,255,0.6); align-items: center; }
.dm-foot-bar a { color: rgba(255,255,255,0.8); }
.dm-foot-bar .socials { display: flex; gap: 12px; }
.dm-foot-bar .socials a { width: 32px; height: 32px; border-radius: 6px;
background: rgba(255,255,255,0.08); display: grid; place-items: center; color: white;
transition: background .12s; }
.dm-foot-bar .socials a:hover { background: rgba(255,255,255,0.16); }
.dm-foot-bar .payments { font-size: 11px; letter-spacing: 0.06em; }
/* ─── SUBPAGE COMMON ─── */
.dm-subpage { background: var(--bg); padding: 32px 0 64px; border-top: 4px solid var(--brand); }
.dm-crumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 20px; }
.dm-crumb a { color: var(--brand); font-weight: 500; }
.dm-crumb a:hover { text-decoration: underline; }
.dm-crumb .sep { margin: 0 8px; color: var(--ink-4); }
.dm-sub-h { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end;
padding-bottom: 24px; border-bottom: 1px solid var(--hair); margin-bottom: 28px; }
@media (max-width: 900px) { .dm-sub-h { grid-template-columns: 1fr; } }
.dm-sub-h h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.dm-sub-h p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 60ch; }
.dm-sub-toolbar { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.dm-sub-count { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.dm-sub-select { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
border: 1px solid var(--hair); border-radius: 6px; background: white; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.dm-sub-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .dm-sub-layout { grid-template-columns: 1fr; } }
.dm-filters { position: sticky; top: 138px; background: white; border: 1px solid var(--hair);
border-radius: 10px; padding: 20px; }
.dm-filters h5 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.dm-filters .cnt { font-size: 12px; color: var(--ink-3); margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--hair); }
.dm-fg { padding: 14px 0; border-bottom: 1px solid var(--hair-soft); }
.dm-fg:last-child { border-bottom: 0; }
.dm-fg h6 { margin: 0 0 10px; font-size: 12.5px; color: var(--ink); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dm-fg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dm-fg label { display: flex; align-items: center; justify-content: space-between;
padding: 4px 6px; border-radius: 4px; font-size: 13px; color: var(--ink); cursor: pointer;
transition: background .1s; }
.dm-fg label:hover { background: var(--bg); }
.dm-fg label input { accent-color: var(--brand); margin-right: 8px; }
.dm-fg label .n { font-size: 11px; color: var(--ink-3); font-family: "JetBrains Mono", monospace; }
/* ─── AUTH PAGES ─── */
.dm-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .dm-auth { grid-template-columns: 1fr; } }
.dm-auth-side { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
color: white; padding: 60px 48px; display: flex; flex-direction: column; justify-content: space-between;
position: relative; overflow: hidden; }
.dm-auth-side::before { content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 50%);
pointer-events: none; }
@media (max-width: 900px) { .dm-auth-side { display: none; } }
.dm-auth-side-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px;
font-weight: 800; color: white; text-decoration: none; position: relative; z-index: 1; }
.dm-auth-side-logo svg { width: 32px; height: 32px; }
.dm-auth-side-hero { position: relative; z-index: 1; max-width: 420px; }
.dm-auth-side-hero h2 { margin: 0 0 16px; font-size: 34px; font-weight: 800;
letter-spacing: -0.025em; line-height: 1.15; }
.dm-auth-side-hero p { margin: 0 0 32px; font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.6; }
.dm-auth-benefits { display: grid; gap: 14px; }
.dm-auth-benefit { display: flex; gap: 12px; align-items: flex-start; }
.dm-auth-benefit svg { flex-shrink: 0; color: #4ADE80; background: rgba(255,255,255,0.1);
padding: 4px; border-radius: 6px; }
.dm-auth-benefit b { display: block; font-size: 14px; margin-bottom: 2px; }
.dm-auth-benefit span { font-size: 13px; color: rgba(255,255,255,0.7); }
.dm-auth-side-foot { position: relative; z-index: 1; font-size: 12px;
color: rgba(255,255,255,0.6); display: flex; gap: 20px; }
.dm-auth-form-wrap { background: var(--bg); padding: 48px 40px; display: flex;
flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 640px) { .dm-auth-form-wrap { padding: 40px 20px; } }
.dm-auth-topbar { display: flex; justify-content: space-between; align-items: center;
width: 100%; max-width: 420px; margin-bottom: 40px; }
.dm-auth-topbar .brand { display: inline-flex; align-items: center; gap: 8px;
color: var(--brand); font-weight: 800; font-size: 20px; text-decoration: none; }
.dm-auth-topbar .brand svg { width: 26px; height: 26px; }
.dm-auth-topbar .back { font-size: 13px; color: var(--ink-3); text-decoration: none;
display: inline-flex; align-items: center; gap: 4px; transition: color .12s; }
.dm-auth-topbar .back:hover { color: var(--brand); }
@media (min-width: 901px) { .dm-auth-topbar .brand { display: none; } }
.dm-auth-card { width: 100%; max-width: 420px; background: white;
border: 1px solid var(--hair); border-radius: 14px; padding: 40px;
box-shadow: 0 30px 60px -30px rgba(26,39,64,0.15); }
@media (max-width: 640px) { .dm-auth-card { padding: 28px 24px; } }
.dm-auth-card h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
color: var(--ink); }
.dm-auth-card .sub { margin: 0 0 28px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.dm-auth-error { padding: 12px 14px; background: #FEE2E2; border: 1px solid #FCA5A5;
color: #991B1B; border-radius: 8px; font-size: 13.5px; margin-bottom: 20px;
display: flex; gap: 10px; align-items: flex-start; }
.dm-auth-success { padding: 12px 14px; background: var(--cta-soft); border: 1px solid var(--cta);
color: var(--cta-dark); border-radius: 8px; font-size: 13.5px; margin-bottom: 20px;
display: flex; gap: 10px; align-items: flex-start; }
.dm-auth-field { margin-bottom: 16px; }
.dm-auth-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink);
margin-bottom: 6px; }
.dm-auth-input-wrap { position: relative; }
.dm-auth-input-wrap svg.left { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--ink-3); pointer-events: none; }
.dm-auth-input-wrap .toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; padding: 4px; color: var(--ink-3); cursor: pointer;
border-radius: 4px; }
.dm-auth-input-wrap .toggle:hover { color: var(--brand); background: var(--bg); }
.dm-auth-field input { width: 100%; height: 44px; padding: 0 14px 0 42px;
border: 1px solid var(--hair); border-radius: 8px; background: var(--bg);
font-family: inherit; font-size: 14px; color: var(--ink); outline: 0;
transition: all .15s; }
.dm-auth-field input.no-icon { padding-left: 14px; }
.dm-auth-field input:focus { border-color: var(--brand); background: white;
box-shadow: 0 0 0 3px rgba(13,94,175,0.12); }
.dm-auth-field .hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.dm-auth-row { display: flex; justify-content: space-between; align-items: center;
margin: 20px 0; font-size: 13px; }
.dm-auth-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2);
cursor: pointer; user-select: none; }
.dm-auth-row label input { accent-color: var(--brand); }
.dm-auth-row a { color: var(--brand); font-weight: 600; text-decoration: none; }
.dm-auth-row a:hover { text-decoration: underline; }
.dm-auth-submit { width: 100%; height: 46px; }
.dm-auth-alt { text-align: center; margin-top: 24px; padding-top: 20px;
border-top: 1px solid var(--hair-soft); font-size: 13.5px; color: var(--ink-2); }
.dm-auth-alt a { color: var(--brand); font-weight: 600; text-decoration: none; margin-left: 4px; }
.dm-auth-alt a:hover { text-decoration: underline; }
.dm-2fa-input { text-align: center; font-family: "JetBrains Mono", monospace;
font-size: 22px; letter-spacing: 8px; padding-left: 14px !important; font-weight: 700; }
/* ============================================================
MOBILE-SAFETY & UNIVERSAL CONTENT STYLING (v2)
Legacy HTML iceriklerini modern gorunume cevirir + overflow duzeltir.
============================================================ */
/* Root-level overflow guard */
html, body.dm-body {
overflow-x: hidden;
max-width: 100%;
}
body.dm-body { position: relative; }
/* Image responsiveness (global) */
body.dm-body img, body.dm-body video, body.dm-body iframe {
max-width: 100%;
height: auto;
}
/* Long words / URLs should not break layout */
body.dm-body { overflow-wrap: break-word; word-break: break-word; }
body.dm-body pre, body.dm-body code { white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
/* All tables scroll horizontally on small screens */
body.dm-body table {
max-width: 100%;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
body.dm-body table.dm-cmp,
body.dm-body table.dm-pd-specs,
body.dm-body .dm-cmp-wrap table {
display: table;
}
}
/* Legacy container normalization */
body.dm-body .container,
body.dm-body .container-fluid,
body.dm-body .container-xl,
body.dm-body .container-lg,
body.dm-body .container-md {
max-width: 100%;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 720px) {
body.dm-body .container,
body.dm-body .container-xl,
body.dm-body .container-lg { max-width: 1240px; margin: 0 auto; }
}
@media (max-width: 720px) {
body.dm-body .container,
body.dm-body .container-fluid,
body.dm-body .container-xl,
body.dm-body .container-lg,
body.dm-body .container-md {
padding-left: 16px; padding-right: 16px;
}
}
body.dm-body .row { display: flex; flex-wrap: wrap; align-items: stretch; margin-left: 0; margin-right: 0; }
body.dm-body .dm-pcard-price .row { flex-wrap: nowrap; align-items: baseline; }
body.dm-body .row > * { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
/* Sections: consistent padding, no overflow */
body.dm-body section {
max-width: 100%;
overflow-x: hidden;
}
body.dm-body section > .container,
body.dm-body section > .container-fluid { overflow: visible; }
/* ── LEGACY TYPOGRAPHY ── */
body.dm-body h1, body.dm-body .h1 {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: var(--ink);
letter-spacing: -0.025em;
line-height: 1.15;
margin-top: 0;
text-wrap: balance;
}
body.dm-body h2, body.dm-body .h2 {
font-size: clamp(24px, 3vw, 34px);
font-weight: 800;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.2;
text-wrap: balance;
}
body.dm-body h3, body.dm-body .h3 {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.3;
}
body.dm-body h4, body.dm-body .h4 { font-size: 18px; font-weight: 700; color: var(--ink); }
body.dm-body h5, body.dm-body .h5 { font-size: 15px; font-weight: 700; color: var(--ink); }
body.dm-body p { color: var(--ink-2); line-height: 1.65; margin: 0 0 16px; }
body.dm-body p:empty { display: none; }
body.dm-body .text-muted, body.dm-body .text-secondary { color: var(--ink-3) !important; }
body.dm-body a { color: var(--brand); }
body.dm-body a:hover { color: var(--brand-2); }
body.dm-body header.dm-header a, body.dm-body .dm-mainnav a,
body.dm-body .dm-footer a, body.dm-body .dm-topbar a { color: inherit; }
/* ── LEGACY HERO SECTIONS ── */
body.dm-body .hero-section,
body.dm-body .page-hero,
body.dm-body .category-hero,
body.dm-body .about-header,
body.dm-body [class*="page-header"],
body.dm-body section[class*="hero"] {
background: linear-gradient(135deg, var(--brand-3) 0%, var(--bg) 60%) !important;
color: var(--ink) !important;
padding: 56px 0 !important;
border-bottom: 1px solid var(--hair);
}
body.dm-body .hero-section h1, body.dm-body .page-hero h1, body.dm-body .category-hero h1,
body.dm-body .about-header h1 { color: var(--ink) !important; }
body.dm-body .hero-section .lead, body.dm-body .page-hero p { color: var(--ink-2) !important; }
/* ── LEGACY CARDS ── */
body.dm-body .card {
background: white !important;
border: 1px solid var(--hair) !important;
border-radius: 12px !important;
box-shadow: none !important;
transition: transform .18s, box-shadow .18s;
}
body.dm-body .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(26,39,64,0.15) !important; }
body.dm-body .card-header {
background: var(--bg-alt) !important;
border-bottom: 1px solid var(--hair) !important;
font-weight: 700 !important;
color: var(--ink) !important;
padding: 16px 20px !important;
}
body.dm-body .card-body { padding: 20px !important; }
body.dm-body .card-title { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
/* ── LEGACY BUTTONS ── */
body.dm-body .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px;
border: 1px solid transparent; transition: all .15s; text-decoration: none; cursor: pointer;
}
body.dm-body .btn-primary, body.dm-body button.btn-primary {
background: var(--brand) !important;
border-color: var(--brand) !important;
color: white !important;
box-shadow: 0 1px 2px rgba(13,94,175,0.15);
}
body.dm-body .btn-primary:hover, body.dm-body button.btn-primary:hover {
background: var(--brand-2) !important;
border-color: var(--brand-2) !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px -6px rgba(13,94,175,0.4);
}
body.dm-body .btn-success, body.dm-body button.btn-success {
background: var(--cta) !important;
border-color: var(--cta) !important;
color: white !important;
}
body.dm-body .btn-success:hover, body.dm-body button.btn-success:hover {
background: var(--cta-dark) !important;
border-color: var(--cta-dark) !important;
}
body.dm-body .btn-warning { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
body.dm-body .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: white !important; }
body.dm-body .btn-outline-primary { color: var(--brand) !important; border-color: var(--brand) !important; background: transparent !important; }
body.dm-body .btn-outline-primary:hover { background: var(--brand) !important; color: white !important; }
body.dm-body .btn-outline-secondary { color: var(--ink-2) !important; border-color: var(--hair) !important; background: transparent !important; }
body.dm-body .btn-outline-secondary:hover { color: var(--ink) !important; border-color: var(--ink-3) !important; background: var(--bg) !important; }
body.dm-body .btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 8px; }
body.dm-body .btn-sm { padding: 7px 14px; font-size: 13px; }
/* ── LEGACY FORMS ── */
body.dm-body .form-control, body.dm-body .form-select,
body.dm-body input.form-control, body.dm-body textarea.form-control, body.dm-body select.form-select {
border: 1px solid var(--hair) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
background: var(--bg) !important;
color: var(--ink) !important;
font-size: 14px !important;
transition: all .15s !important;
}
body.dm-body .form-control:focus, body.dm-body .form-select:focus {
border-color: var(--brand) !important;
background: white !important;
box-shadow: 0 0 0 3px rgba(13,94,175,0.12) !important;
outline: 0 !important;
}
body.dm-body .form-label { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
body.dm-body .form-check-input { accent-color: var(--brand); }
/* ── LEGACY BADGES ── */
body.dm-body .badge {
padding: 4px 10px !important;
border-radius: 4px !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 0.02em;
}
body.dm-body .badge.bg-primary, body.dm-body .badge-primary { background: var(--brand-3) !important; color: var(--brand) !important; }
body.dm-body .badge.bg-success, body.dm-body .badge-success { background: var(--cta-soft) !important; color: var(--cta-dark) !important; }
body.dm-body .badge.bg-warning, body.dm-body .badge-warning { background: var(--gold-soft) !important; color: var(--gold-dark) !important; }
body.dm-body .badge.bg-danger, body.dm-body .badge-danger { background: #FEE2E2 !important; color: var(--danger) !important; }
body.dm-body .badge.bg-info, body.dm-body .badge-info { background: var(--brand-3) !important; color: var(--brand) !important; }
/* ── LEGACY ALERTS ── */
body.dm-body .alert {
border-radius: 10px !important;
padding: 14px 18px !important;
border: 1px solid transparent !important;
font-size: 14px !important;
}
body.dm-body .alert-primary, body.dm-body .alert-info {
background: var(--brand-3) !important; color: var(--brand-2) !important; border-color: var(--brand) !important;
}
body.dm-body .alert-success { background: var(--cta-soft) !important; color: var(--cta-dark) !important; border-color: var(--cta) !important; }
body.dm-body .alert-warning { background: var(--gold-soft) !important; color: var(--gold-dark) !important; border-color: var(--gold) !important; }
body.dm-body .alert-danger { background: #FEE2E2 !important; color: var(--danger) !important; border-color: var(--danger) !important; }
/* ── LEGACY TABLES ── */
body.dm-body .table {
border-collapse: collapse !important;
width: 100%;
}
body.dm-body .table thead th, body.dm-body .table-dark th, body.dm-body .thead-dark th {
background: var(--bg-alt) !important;
color: var(--ink) !important;
font-weight: 700 !important;
font-size: 12.5px !important;
letter-spacing: 0.02em;
text-transform: uppercase;
border-bottom: 2px solid var(--hair) !important;
padding: 12px 16px;
text-align: left;
}
body.dm-body .table tbody td { border-bottom: 1px solid var(--hair-soft) !important; padding: 12px 16px; }
body.dm-body .table tbody tr:hover { background: var(--brand-3) !important; }
/* ── DM COMPONENTS MOBILE ── */
@media (max-width: 720px) {
body.dm-body h1, body.dm-body .h1 { font-size: clamp(24px, 7vw, 30px); }
body.dm-body h2, body.dm-body .h2 { font-size: clamp(20px, 6vw, 26px); }
body.dm-body .btn-lg { padding: 12px 20px; font-size: 14px; width: 100%; justify-content: center; }
body.dm-body [class*="col-md-"], body.dm-body [class*="col-lg-"] { flex: 0 0 100% !important; max-width: 100% !important; }
body.dm-body .py-5 { padding-top: 32px !important; padding-bottom: 32px !important; }
body.dm-body .my-5, body.dm-body .mt-5 { margin-top: 24px !important; }
body.dm-body .mb-5 { margin-bottom: 24px !important; }
body.dm-body .p-5 { padding: 20px !important; }
body.dm-body .display-1, body.dm-body .display-2, body.dm-body .display-3,
body.dm-body .display-4, body.dm-body .display-5, body.dm-body .display-6 {
font-size: clamp(24px, 7vw, 32px) !important;
line-height: 1.15;
}
.dm-hero { padding: 32px 0 24px; }
.dm-hero h1 { font-size: clamp(24px, 7vw, 32px); }
.dm-hero-actions .dm-btn { width: 100%; justify-content: center; }
.dm-deal-card { padding: 20px; }
.dm-deal-price .now { font-size: 28px; }
.dm-sec-head h2 { font-size: clamp(22px, 6vw, 28px); }
.dm-container { padding: 0 16px; }
.dm-product-grid, .dm-why-grid, .dm-testi-grid { grid-template-columns: 1fr !important; }
.dm-pcard h3 { font-size: 17px; }
.dm-hero-trust { gap: 16px; }
.dm-trust-item .val { font-size: 18px; }
.dm-footer { padding: 40px 0 20px; }
.dm-foot-grid { gap: 24px; margin-bottom: 24px; }
.dm-foot-brand h4 { font-size: 20px; }
}
/* Product detail mobile */
@media (max-width: 900px) {
.dm-pd-grid { grid-template-columns: 1fr !important; }
.dm-pd-buy { position: static !important; }
.dm-pd-hero { padding: 24px; }
.dm-pd-hero h1 { font-size: clamp(22px, 5vw, 28px); }
.dm-pd-tab-nav { flex-wrap: wrap; }
.dm-pd-tab { flex: 1 1 50%; font-size: 12.5px; padding: 12px 8px; }
.dm-pd-tab-body { padding: 20px; }
.dm-pd-features { grid-template-columns: 1fr !important; }
}
/* Cart/Checkout mobile */
@media (max-width: 900px) {
.dm-cart-grid, .dm-checkout-grid { grid-template-columns: 1fr !important; }
.dm-cart-summary { position: static !important; }
.dm-cart-item { grid-template-columns: 44px 1fr !important; gap: 12px !important; padding: 16px !important; }
.dm-cart-item-price { grid-column: 1 / -1; text-align: left !important; padding-top: 8px; border-top: 1px dashed var(--hair-soft); margin-top: 8px; }
}
/* Filters panel mobile */
@media (max-width: 900px) {
.dm-sub-layout { grid-template-columns: 1fr !important; }
.dm-filters { position: static !important; margin-bottom: 20px; }
.dm-sub-h { grid-template-columns: 1fr !important; }
.dm-sub-toolbar { justify-content: flex-start !important; }
}
/* Auth pages mobile */
@media (max-width: 900px) {
.dm-auth { grid-template-columns: 1fr !important; min-height: auto; }
.dm-auth-side { display: none !important; }
.dm-auth-form-wrap { padding: 32px 20px !important; min-height: 100vh; }
.dm-auth-card { padding: 28px 20px !important; }
}
/* Top bar mobile */
@media (max-width: 720px) {
.dm-topbar { font-size: 11.5px; }
.dm-topbar .dm-container { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; height: auto; gap: 8px; }
.dm-topbar .l, .dm-topbar .r { gap: 14px; }
.dm-topbar .l a, .dm-topbar .sep { display: none; }
.dm-topbar .l .chip { display: inline-flex; }
.dm-topbar .r a:not(.dm-lang-picker) { display: none; }
}
/* Header mobile */
@media (max-width: 640px) {
.dm-head-main { height: 62px !important; gap: 10px !important; }
.dm-brand { font-size: 18px !important; }
.dm-brand svg { width: 26px !important; height: 26px !important; }
.dm-head-actions .dm-btn { display: none; }
}
/* Legacy features grids */
body.dm-body .features-grid, body.dm-body .feature-list,
body.dm-body .services-grid, body.dm-body .items-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
body.dm-body .feature-card, body.dm-body .feature-item, body.dm-body .service-item {
background: white;
border: 1px solid var(--hair);
border-radius: 12px;
padding: 20px;
transition: all .18s;
}
body.dm-body .feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(26,39,64,0.15); }
/* Full-width helpers */
body.dm-body .full-width, body.dm-body .img-full { width: 100%; height: auto; }
/* Bootstrap spacing overrides for reasonable defaults */
body.dm-body .mt-5, body.dm-body .my-5 { margin-top: 32px !important; }
body.dm-body .mb-5 { margin-bottom: 32px !important; }
body.dm-body .py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
/* Print stability */
@media print {
body.dm-body .dm-topbar, body.dm-body .dm-header, body.dm-body .dm-mainnav, body.dm-body .dm-footer { display: none !important; }
}
/* ============================================================
v3 — GORUNMEZ METIN DUZELTMELERI
Legacy hero'larda beyaz metin -> ink rengine cevir
============================================================ */
/* Legacy hero sections icin beyaz metni ink'e cevir */
body.dm-body .hero-section,
body.dm-body .page-hero,
body.dm-body .category-hero,
body.dm-body .about-header,
body.dm-body .contact-hero,
body.dm-body [class*="page-header"],
body.dm-body section[class*="hero"]:not(.dm-hero) {
color: var(--ink) !important;
}
/* Hero icindeki tum text uzurleri */
body.dm-body .hero-section *,
body.dm-body .page-hero *,
body.dm-body .category-hero *,
body.dm-body .about-header *,
body.dm-body .contact-hero *,
body.dm-body [class*="page-header"] *,
body.dm-body section[class*="hero"]:not(.dm-hero) * {
color: inherit;
}
/* Belirgin hero elemanlari - direkt ink */
body.dm-body .hero-title,
body.dm-body .hero-heading,
body.dm-body .hero-description,
body.dm-body .hero-desc,
body.dm-body .hero-subtitle,
body.dm-body .hero-lead,
body.dm-body .hero-badge,
body.dm-body .hero-stat-value,
body.dm-body .hero-stat-label,
body.dm-body .hero-stat,
body.dm-body .category-title,
body.dm-body .category-subtitle,
body.dm-body .about-title,
body.dm-body .breadcrumb-current,
body.dm-body .page-header .breadcrumb-current,
body.dm-body .contact-hero-stat-value,
body.dm-body .contact-hero-stat-label {
color: var(--ink) !important;
}
/* Muted text hero icinde */
body.dm-body .hero-description,
body.dm-body .hero-desc,
body.dm-body .hero-subtitle,
body.dm-body .hero-lead,
body.dm-body .hero-stat-label,
body.dm-body .breadcrumb a {
color: var(--ink-2) !important;
}
/* Hero rozet/badge - brand renginde */
body.dm-body .hero-badge,
body.dm-body .category-badge,
body.dm-body .page-badge {
color: var(--brand) !important;
background: var(--brand-3) !important;
border-color: var(--brand) !important;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
display: inline-block;
}
/* Hero istatistik degerleri - brand renginde ve buyuk */
body.dm-body .hero-stat-value,
body.dm-body .stat-value,
body.dm-body .contact-hero-stat-value {
color: var(--brand) !important;
font-weight: 800;
font-size: 28px;
letter-spacing: -0.02em;
}
/* Breadcrumb icindeki current oge - ink */
body.dm-body .breadcrumb .breadcrumb-current,
body.dm-body .breadcrumb-current,
body.dm-body .breadcrumb-item.active {
color: var(--ink) !important;
font-weight: 600;
}
/* Widget baslikleri */
body.dm-body .widget-title,
body.dm-body .sidebar-widget h4,
body.dm-body .sidebar-widget h3 {
color: var(--ink) !important;
}
/* Newsletter/CTA bloklari */
body.dm-body .widget-newsletter,
body.dm-body .newsletter-widget {
background: var(--brand) !important;
color: white !important;
padding: 20px;
border-radius: 10px;
}
body.dm-body .widget-newsletter *,
body.dm-body .newsletter-widget * {
color: white !important;
}
/* opacity: 0 baslayan animation elemanlari (scroll'da aciliyorlar ama fallback) */
body.dm-body .hero-description,
body.dm-body .hero-badge,
body.dm-body .fade-in,
body.dm-body [data-aos],
body.dm-body .animate-fade-in {
opacity: 1 !important;
transform: none !important;
}
/* btn-outline-light - koyu bg icin, acik bg'de gorunmez oluyordu */
body.dm-body .btn-outline-light {
color: var(--brand) !important;
border-color: var(--brand) !important;
background: transparent !important;
}
body.dm-body .btn-outline-light:hover {
background: var(--brand) !important;
color: white !important;
}
/* btn-light */
body.dm-body .btn-light {
background: white !important;
color: var(--brand) !important;
border-color: var(--hair) !important;
}
body.dm-body .btn-light:hover {
background: var(--bg-alt) !important;
color: var(--brand-2) !important;
}
/* text-white / text-light */
body.dm-body .text-white,
body.dm-body .text-light {
color: var(--ink) !important;
}
/* AMA koyu zeminde tut */
body.dm-body [style*="background"] .text-white,
body.dm-body [style*="background"] .text-light,
body.dm-body .bg-dark .text-white,
body.dm-body .bg-primary .text-white,
body.dm-body .bg-secondary .text-white,
body.dm-body .dm-guarantee .text-white,
body.dm-body .dm-footer .text-white,
body.dm-body .dm-cta .text-white,
body.dm-body .dm-auth-side * {
color: white !important;
}
/* text-primary artik brand */
body.dm-body .text-primary { color: var(--brand) !important; }
body.dm-body .text-success { color: var(--cta) !important; }
body.dm-body .text-warning { color: var(--gold) !important; }
body.dm-body .text-danger { color: var(--danger) !important; }
/* Modern api-docs sayfası için */
body.dm-body .docs-version-badge {
color: var(--brand) !important;
background: var(--brand-3) !important;
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
/* Genel feature list li - inherit yerine ink */
body.dm-body .feature-list li,
body.dm-body .features-list li,
body.dm-body .check-list li {
color: var(--ink-2) !important;
}
/* Auth-side bg'sini exception yap - beyaz metin orada dogru */
body.dm-body .dm-auth-side,
body.dm-body .dm-auth-side * {
color: white;
}
body.dm-body .dm-auth-side b { color: white !important; }
body.dm-body .dm-auth-side span { color: rgba(255,255,255,0.75) !important; }
body.dm-body .dm-auth-side h2 { color: white !important; }
body.dm-body .dm-auth-side p { color: rgba(255,255,255,0.85) !important; }
/* Footer beyaz metin korunsun */
body.dm-body .dm-footer,
body.dm-body .dm-footer * { color: rgba(255,255,255,0.85); }
body.dm-body .dm-footer h4,
body.dm-body .dm-footer h5 { color: white !important; }
body.dm-body .dm-footer .contact a,
body.dm-body .dm-footer a:hover { color: white !important; }
/* Topbar beyaz metin */
body.dm-body .dm-topbar,
body.dm-body .dm-topbar * { color: rgba(255,255,255,0.72); }
body.dm-body .dm-topbar .chip { color: rgba(255,255,255,0.85); }
/* dm-guarantee (mavi banner) beyaz metin */
body.dm-body .dm-guarantee,
body.dm-body .dm-guarantee * { color: white; }
body.dm-body .dm-guarantee .medal svg { color: white; }
/* Yardimci sekmeler (tab-nav) */
body.dm-body .tab-nav a,
body.dm-body .tab-nav button,
body.dm-body .nav-tabs a {
color: var(--ink-2);
}
body.dm-body .tab-nav a.active,
body.dm-body .nav-tabs .active {
color: var(--brand) !important;
}
/* ============================================================
v4 — Yuksek ozgullukte hero/badge metinlerini ink'e cevir
============================================================ */
/* TUM legacy hero konteynerleri icin: buton olmayan tum metin ink */
body.dm-body .hero-section h1, body.dm-body .hero-section h2, body.dm-body .hero-section h3,
body.dm-body .hero-section h4, body.dm-body .hero-section h5, body.dm-body .hero-section h6,
body.dm-body .hero-section p, body.dm-body .hero-section li,
body.dm-body .hero-section span:not(.btn *),
body.dm-body .hero-section div:not(.btn *):not([class*="btn-"]),
body.dm-body .page-hero h1, body.dm-body .page-hero h2, body.dm-body .page-hero h3,
body.dm-body .page-hero h4, body.dm-body .page-hero p, body.dm-body .page-hero li,
body.dm-body .page-hero span:not(.btn *), body.dm-body .page-hero div:not(.btn *),
body.dm-body .category-hero h1, body.dm-body .category-hero h2, body.dm-body .category-hero p,
body.dm-body .category-hero span, body.dm-body .category-hero div:not([class*="btn"]),
body.dm-body .about-header h1, body.dm-body .about-header h2, body.dm-body .about-header p,
body.dm-body .about-header span, body.dm-body .about-header div:not([class*="btn"]),
body.dm-body .contact-hero h1, body.dm-body .contact-hero p, body.dm-body .contact-hero span,
body.dm-body .contact-hero div:not([class*="btn"]),
body.dm-body [class*="page-header"] h1, body.dm-body [class*="page-header"] h2,
body.dm-body [class*="page-header"] p, body.dm-body [class*="page-header"] span:not(.btn *),
body.dm-body [class*="page-header"] div:not([class*="btn"]),
body.dm-body section[class*="hero"]:not(.dm-hero) h1,
body.dm-body section[class*="hero"]:not(.dm-hero) h2,
body.dm-body section[class*="hero"]:not(.dm-hero) h3,
body.dm-body section[class*="hero"]:not(.dm-hero) p,
body.dm-body section[class*="hero"]:not(.dm-hero) li,
body.dm-body section[class*="hero"]:not(.dm-hero) span:not(.btn *):not(.hero-badge):not(.hero-badge *),
body.dm-body section[class*="hero"]:not(.dm-hero) div:not(.btn *):not([class*="btn-"]):not(.hero-badge) {
color: var(--ink) !important;
}
/* Bunlarin muted secondaryleri */
body.dm-body .hero-section p, body.dm-body .hero-section .hero-description,
body.dm-body .hero-section .hero-subtitle, body.dm-body .hero-section .lead,
body.dm-body .page-hero p, body.dm-body .page-hero .lead,
body.dm-body .category-hero p, body.dm-body .about-header p,
body.dm-body .contact-hero p, body.dm-body section[class*="hero"]:not(.dm-hero) p {
color: var(--ink-2) !important;
}
/* Hero stat values - brand */
body.dm-body .hero-section .stat-value, body.dm-body .hero-section .hero-stat-value,
body.dm-body .hero-section .contact-hero-stat-value,
body.dm-body .page-hero .stat-value, body.dm-body .about-header .stat-value,
body.dm-body .about-header [class*="stat-value"],
body.dm-body .contact-hero [class*="stat-value"],
body.dm-body section[class*="hero"] [class*="stat-value"] {
color: var(--brand) !important;
}
/* Hero stat labels - ink-2 */
body.dm-body .hero-section [class*="stat-label"],
body.dm-body .page-hero [class*="stat-label"],
body.dm-body .about-header [class*="stat-label"],
body.dm-body .contact-hero [class*="stat-label"],
body.dm-body section[class*="hero"] [class*="stat-label"] {
color: var(--ink-2) !important;
}
/* Contact form button - button-modern */
body.dm-body .contact-form button, body.dm-body .contact-form .btn,
body.dm-body form.contact button[type=submit] {
background: var(--brand) !important;
color: white !important;
border: 0 !important;
}
/* btn-modern-outline (knowledgebase KB) */
body.dm-body .btn-modern-outline {
color: var(--brand) !important;
border: 1px solid var(--brand) !important;
background: transparent !important;
padding: 8px 20px;
border-radius: 6px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
body.dm-body .btn-modern-outline:hover {
background: var(--brand) !important;
color: white !important;
}
/* API docs sayfasi - genel .docs-* / .feature-list ink */
body.dm-body .docs-content li, body.dm-body .docs-content p,
body.dm-body .docs-content span, body.dm-body .docs-section li,
body.dm-body .docs-section p, body.dm-body .api-features li,
body.dm-body .api-features p, body.dm-body .integration-list li,
body.dm-body .feature-item p, body.dm-body .feature-item li,
body.dm-body .feature-item span,
body.dm-body .plan-features li, body.dm-body .plan-content li,
body.dm-body .service-list li, body.dm-body ul.checklist li {
color: var(--ink-2) !important;
}
/* Sayfa geneli listelerde metin ink */
body.dm-body ul li, body.dm-body ol li {
color: var(--ink-2);
}
/* Code-signing sayfasi - filter tab'lari */
body.dm-body .filter-tab, body.dm-body .tab-item, body.dm-body .category-tab,
body.dm-body .code-signing-tab, body.dm-body [class*="tab-btn"] {
color: var(--ink-2) !important;
background: var(--bg-alt) !important;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
display: inline-block;
border: 1px solid var(--hair);
}
body.dm-body .filter-tab.active, body.dm-body .tab-item.active,
body.dm-body .category-tab.active, body.dm-body [class*="tab-btn"].active {
color: white !important;
background: var(--brand) !important;
border-color: var(--brand) !important;
}
/* Kart badgeleri: "Tumu", "En Guvenli" gibi filter etiketleri */
body.dm-body .card-badge, body.dm-body .feature-badge, body.dm-body .plan-badge,
body.dm-body .category-badge-item {
color: var(--brand) !important;
background: var(--brand-3) !important;
padding: 4px 10px;
border-radius: 4px;
font-weight: 700;
font-size: 11.5px;
}
body.dm-body .card-badge.hot, body.dm-body .card-badge.popular {
color: white !important;
background: var(--danger) !important;
}
body.dm-body .card-badge.best, body.dm-body .card-badge.recommended {
color: white !important;
background: var(--cta) !important;
}
/* Diger yaygin karanlik-sini elementler */
body.dm-body .dark-section, body.dm-body .bg-dark {
background: #051E3A !important;
color: white !important;
}
body.dm-body .dark-section *, body.dm-body .bg-dark * {
color: inherit !important;
}
body.dm-body .dark-section h1, body.dm-body .dark-section h2,
body.dm-body .dark-section h3, body.dm-body .dark-section h4,
body.dm-body .bg-dark h1, body.dm-body .bg-dark h2, body.dm-body .bg-dark h3, body.dm-body .bg-dark h4 {
color: white !important;
}
/* Referanslarimiz "Urunleri Incele" btn-outline-light zaten duzeltildi ama guclu ekle */
body.dm-body .btn-outline-light,
body.dm-body a.btn-outline-light,
body.dm-body button.btn-outline-light {
color: var(--brand) !important;
border-color: var(--brand) !important;
background: transparent !important;
}
/* ============================================================
v5 — Profesyonel urun kartlari + kalan gorunurluk fix
============================================================ */
/* Contact submit button */
body.dm-body button.contact-submit-btn,
body.dm-body .contact-submit-btn {
background: var(--brand) !important;
color: white !important;
border: 0 !important;
padding: 14px 32px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 15px !important;
}
body.dm-body button.contact-submit-btn:hover {
background: var(--brand-2) !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(13, 94, 175, 0.4);
}
/* Stat labels genel duzeltme */
body.dm-body .stat-label, body.dm-body .stat-title,
body.dm-body [class*="stat-label"] {
color: var(--ink-2) !important;
font-weight: 500;
font-size: 13px;
}
/* Code signing sayfasi badgeleri */
body.dm-body .cs-badge, body.dm-body span.cs-badge {
color: var(--brand) !important;
background: var(--brand-3) !important;
padding: 4px 10px !important;
border-radius: 4px !important;
font-weight: 700 !important;
font-size: 11px !important;
border: 1px solid transparent !important;
}
body.dm-body .cs-badge.hot, body.dm-body .cs-badge.popular {
color: white !important;
background: var(--danger) !important;
}
body.dm-body .cs-badge.best, body.dm-body .cs-badge.recommended,
body.dm-body .cs-badge.premium {
color: white !important;
background: var(--cta) !important;
}
body.dm-body .cs-badge.ev, body.dm-body .cs-badge.gold {
color: white !important;
background: var(--gold-dark) !important;
}
/* ============================================================
PROFESYONEL URUN KARTLARI (v5)
============================================================ */
.dm-pcard {
background: white;
border: 1px solid var(--hair);
border-radius: 14px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: all .25s cubic-bezier(0.2, 0.7, 0.2, 1);
box-shadow: 0 1px 3px rgba(26, 39, 64, 0.04);
}
.dm-pcard::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
opacity: 0;
transition: opacity .25s;
z-index: 2;
}
.dm-pcard:hover {
transform: translateY(-6px);
border-color: var(--brand);
box-shadow: 0 24px 50px -20px rgba(13, 94, 175, 0.28);
}
.dm-pcard:hover::before { opacity: 1; }
/* Card header - brand section */
.dm-pcard-brand {
padding: 20px 22px 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--hair-soft);
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%);
}
.dm-pcard-brand-logo {
width: 44px;
height: 44px;
border-radius: 10px;
background: white;
color: var(--brand);
border: 1px solid var(--hair);
display: grid;
place-items: center;
font-weight: 800;
font-size: 18px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dm-pcard-brand-logo img {
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.dm-pcard-brand-name {
font-size: 13px;
font-weight: 800;
color: var(--ink);
letter-spacing: 0.03em;
text-transform: uppercase;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-pcard-brand-name .tag {
display: inline-block;
margin-left: 8px;
padding: 3px 8px;
background: var(--brand-3);
color: var(--brand);
border-radius: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
/* Product body */
.dm-pcard > h3 {
margin: 16px 22px 0;
font-size: 18px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.28;
min-height: 46px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dm-pcard > .rating {
margin: 8px 22px 0;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-3);
font-weight: 500;
}
.dm-pcard > .rating .stars {
color: var(--star);
letter-spacing: 1px;
font-size: 13px;
}
.dm-pcard > ul {
list-style: none;
padding: 0;
margin: 14px 22px 18px;
display: grid;
gap: 9px;
flex: 1;
}
.dm-pcard > ul li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.45;
font-weight: 500;
}
.dm-pcard > ul li svg {
flex-shrink: 0;
color: var(--cta);
background: var(--cta-soft);
padding: 3px;
border-radius: 4px;
width: 18px;
height: 18px;
margin-top: 1px;
}
/* Footer with price + CTA */
.dm-pcard-foot {
margin-top: auto;
padding: 16px 22px 20px;
border-top: 1px solid var(--hair-soft);
background: var(--bg-alt);
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
.dm-pcard-price {
display: flex;
flex-direction: column;
gap: 2px;
}
.dm-pcard-price .from {
font-size: 10.5px;
color: var(--ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
display: block;
}
.dm-pcard-price .row {
display: flex;
align-items: baseline;
gap: 6px;
}
.dm-pcard-price .row b {
font-size: 22px;
font-weight: 800;
color: var(--brand);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.dm-pcard-price .row .old {
color: var(--ink-4);
text-decoration: line-through;
font-size: 13px;
font-weight: 500;
}
.dm-pcard-price .row small {
font-size: 11.5px;
color: var(--ink-3);
font-weight: 500;
}
.dm-pcard-foot .dm-btn,
.dm-pcard-foot .dm-btn-cta {
height: 44px;
padding: 0 18px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 8px;
box-shadow: 0 4px 10px -3px rgba(34, 164, 93, 0.35);
}
.dm-pcard-foot .dm-btn-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -4px rgba(34, 164, 93, 0.5);
}
/* Ribbon-style flag (top-right corner, pill shape) */
.dm-pcard-flag {
position: absolute;
top: 14px;
right: 14px;
padding: 6px 14px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 20px;
z-index: 3;
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18);
}
.dm-pcard-flag.hot { background: linear-gradient(135deg, #EF4444, #DC2626); color: white; }
.dm-pcard-flag.new { background: linear-gradient(135deg, #22A45D, #16A34A); color: white; }
.dm-pcard-flag.deal { background: linear-gradient(135deg, #F5B831, #EAB308); color: var(--ink); }
.dm-pcard-flag.premium { background: linear-gradient(135deg, #7C3AED, #6D28D9); color: white; }
/* Responsive */
@media (max-width: 900px) {
.dm-pcard > h3 { font-size: 17px; min-height: 0; margin: 14px 18px 0; }
.dm-pcard-brand { padding: 16px 18px 10px; }
.dm-pcard > .rating { margin: 8px 18px 0; }
.dm-pcard > ul { margin: 12px 18px 16px; }
.dm-pcard-foot { padding: 14px 18px 16px; }
.dm-pcard-price .row b { font-size: 24px; }
}
/* Grid gap */
.dm-product-grid { gap: 22px; }
@media (max-width: 720px) { .dm-product-grid { gap: 16px; } }
/* ============================================================
v6 — HIT BLOKLAR: SSL Check + 3 Adimda Dogru Sertifika
============================================================ */
/* ── SSL DOMAIN CHECK SECTION ── */
.dm-ssl-check-section {
padding: 80px 0;
background: linear-gradient(135deg, #051E3A 0%, #0D5EAF 60%, #0A2A4A 100%);
color: white;
position: relative;
overflow: hidden;
}
.dm-ssl-check-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(59,139,214,0.15), transparent 50%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 30l30-30M30 30L0 60M30 30l30 30M30 30L0 0' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E");
pointer-events: none;
}
.dm-ssl-check-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.dm-ssl-check-inner { grid-template-columns: 1fr; gap: 32px; }
.dm-ssl-check-section { padding: 48px 0; }
}
.dm-ssl-check-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: white;
margin-bottom: 20px;
letter-spacing: 0.02em;
}
.dm-ssl-check-badge svg { color: #4ADE80; }
.dm-ssl-check-content h2 {
margin: 0 0 16px;
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
color: white !important;
letter-spacing: -0.025em;
line-height: 1.15;
}
.dm-ssl-check-content h2 .highlight {
color: #F5B831 !important;
font-weight: 800;
position: relative;
}
.dm-ssl-check-content p {
margin: 0 0 28px;
color: rgba(255,255,255,0.85) !important;
font-size: 16px;
line-height: 1.55;
max-width: 52ch;
}
.dm-ssl-check-form { display: flex; flex-direction: column; gap: 16px; }
.dm-ssl-check-input {
display: flex;
align-items: center;
background: white;
border-radius: 12px;
padding: 6px;
box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4);
gap: 8px;
}
.dm-ssl-check-input svg:first-of-type {
color: var(--brand);
margin-left: 14px;
flex-shrink: 0;
}
.dm-ssl-check-input input {
flex: 1;
height: 52px;
padding: 0 12px;
border: 0;
outline: 0;
font-family: inherit;
font-size: 15px;
color: var(--ink);
background: transparent;
min-width: 0;
}
.dm-ssl-check-input input::placeholder { color: var(--ink-3); }
.dm-ssl-check-input .dm-btn {
height: 46px;
padding: 0 22px;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
@media (max-width: 640px) {
.dm-ssl-check-input { flex-wrap: wrap; padding: 12px; gap: 12px; }
.dm-ssl-check-input input { width: 100%; padding-left: 40px; }
.dm-ssl-check-input svg:first-of-type { position: absolute; margin-left: 26px; }
.dm-ssl-check-input .dm-btn { width: 100%; }
}
.dm-ssl-check-hints {
display: flex;
gap: 18px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(255,255,255,0.75) !important;
}
.dm-ssl-check-hints span {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.dm-ssl-check-hints svg { color: #4ADE80; }
/* ── Visual right side (shield animation) ── */
.dm-ssl-check-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
position: relative;
}
.dm-ssl-check-shield {
position: relative;
width: 200px;
height: 230px;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}
.dm-ssl-check-shield svg {
position: relative;
z-index: 2;
animation: dm-shield-float 4s ease-in-out infinite;
}
@keyframes dm-shield-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.dm-ssl-check-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid rgba(59, 139, 214, 0.6);
border-radius: 50%;
animation: dm-pulse 2.5s ease-out infinite;
pointer-events: none;
}
.dm-ssl-check-pulse-2 { animation-delay: 1.25s; }
@keyframes dm-pulse {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.dm-ssl-check-shield svg, .dm-ssl-check-pulse { animation: none; }
}
.dm-ssl-check-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width: 100%;
max-width: 380px;
}
.dm-ssl-check-metric {
text-align: center;
padding: 14px 8px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
}
.dm-ssl-check-metric b {
display: block;
font-size: 20px;
font-weight: 800;
color: #F5B831;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.dm-ssl-check-metric span {
font-size: 11px;
color: rgba(255,255,255,0.75);
font-weight: 500;
}
/* ── 3 ADIMDA DOĞRU SERTİFİKA ── */
.dm-fit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .dm-fit-grid { grid-template-columns: 1fr; } }
.dm-fit-card {
background: white;
border: 1px solid var(--hair);
border-radius: 16px;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
transition: all .25s cubic-bezier(0.2, 0.7, 0.2, 1);
overflow: hidden;
}
.dm-fit-card:hover {
transform: translateY(-6px);
border-color: var(--brand);
box-shadow: 0 30px 60px -25px rgba(13, 94, 175, 0.3);
}
.dm-fit-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--brand);
transform: scaleX(0);
transform-origin: center;
transition: transform .3s;
}
.dm-fit-card:hover::before { transform: scaleX(1); }
.dm-fit-featured {
background: linear-gradient(180deg, #FFFCF5 0%, white 30%);
border: 2px solid var(--gold);
transform: scale(1.03);
box-shadow: 0 20px 40px -20px rgba(245, 184, 49, 0.35);
}
.dm-fit-featured::before {
background: linear-gradient(90deg, var(--gold), var(--gold-dark));
transform: scaleX(1);
height: 5px;
}
.dm-fit-featured:hover {
transform: scale(1.03) translateY(-6px);
box-shadow: 0 30px 60px -25px rgba(245, 184, 49, 0.45);
}
@media (max-width: 900px) {
.dm-fit-featured { transform: none; }
.dm-fit-featured:hover { transform: translateY(-6px); }
}
.dm-fit-badge {
position: absolute;
top: 14px;
right: 14px;
padding: 5px 12px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: white;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
border-radius: 999px;
box-shadow: 0 4px 10px -2px rgba(245, 184, 49, 0.5);
}
.dm-fit-icon {
width: 60px;
height: 60px;
border-radius: 14px;
display: grid;
place-items: center;
color: var(--brand);
background: var(--brand-3);
margin-bottom: 4px;
}
.dm-fit-icon-1 { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1D4ED8; }
.dm-fit-icon-2 { background: linear-gradient(135deg, #FEF3D7, #FDE68A); color: #B45309; }
.dm-fit-icon-3 { background: linear-gradient(135deg, #E4F5EC, #BBF7D0); color: #15803D; }
.dm-fit-lbl {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--brand);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dm-fit-card h3 {
margin: 0;
font-size: 26px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.025em;
line-height: 1.1;
}
.dm-fit-plus {
font-size: 15px;
color: var(--ink-3);
font-weight: 500;
letter-spacing: -0.01em;
}
.dm-fit-card p {
margin: 0;
color: var(--ink-2);
font-size: 14px;
line-height: 1.55;
min-height: 44px;
}
.dm-fit-features {
list-style: none;
padding: 0;
margin: 6px 0;
display: grid;
gap: 10px;
}
.dm-fit-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--ink-2);
font-weight: 500;
}
.dm-fit-features li svg {
color: var(--cta);
background: var(--cta-soft);
padding: 3px;
border-radius: 4px;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.dm-fit-price {
padding-top: 16px;
border-top: 1px dashed var(--hair);
margin-top: 8px;
}
.dm-fit-from {
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
display: block;
margin-bottom: 4px;
}
.dm-fit-price > div {
display: flex;
align-items: baseline;
gap: 6px;
}
.dm-fit-price b {
font-size: 32px;
font-weight: 800;
color: var(--brand);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.dm-fit-price small {
font-size: 13px;
color: var(--ink-3);
font-weight: 500;
}
.dm-fit-featured .dm-fit-price b { color: var(--gold-dark); }
.dm-fit-card .dm-btn {
margin-top: 8px;
width: 100%;
height: 46px;
font-size: 14px;
font-weight: 700;
border-radius: 10px;
}
/* Bottom CTA */
.dm-fit-cta {
margin-top: 40px;
padding: 24px 28px;
background: var(--bg-alt);
border: 1px dashed var(--brand);
border-radius: 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
}
@media (max-width: 720px) {
.dm-fit-cta { grid-template-columns: 1fr; text-align: center; gap: 14px; }
.dm-fit-cta .dm-fit-cta-icon { margin: 0 auto; }
}
.dm-fit-cta-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--brand);
color: white;
display: grid;
place-items: center;
}
.dm-fit-cta-text b {
display: block;
font-size: 16px;
color: var(--ink);
font-weight: 700;
margin-bottom: 2px;
}
.dm-fit-cta-text span {
font-size: 13.5px;
color: var(--ink-2);
}
/* ============================================================
v7 — HERO SLIDER
============================================================ */
.dm-hero-slider {
position: relative;
min-height: 420px;
display: flex;
flex-direction: column;
}
.dm-hero-slide {
position: absolute;
top: 0; left: 0; right: 0;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity .4s cubic-bezier(0.2, 0.7, 0.2, 1), transform .4s cubic-bezier(0.2, 0.7, 0.2, 1);
padding-bottom: 24px;
}
.dm-hero-slide.active {
position: relative;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
z-index: 2;
}
/* Trust row - always visible below slider */
.dm-hero-slider .dm-hero-trust {
margin-top: auto;
padding-top: 24px;
border-top: 1px solid var(--hair);
position: relative;
z-index: 3;
}
/* Slider controls */
.dm-hero-slider-nav {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--hair);
position: relative;
z-index: 3;
}
.dm-hero-slider-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: 1px solid var(--hair);
color: var(--ink-2);
cursor: pointer;
display: grid;
place-items: center;
transition: all .15s;
flex-shrink: 0;
}
.dm-hero-slider-arrow:hover {
background: var(--brand);
color: white;
border-color: var(--brand);
transform: scale(1.05);
}
.dm-hero-slider-dots {
display: flex;
gap: 8px;
flex: 1;
justify-content: center;
}
.dm-hero-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--hair);
background: transparent;
cursor: pointer;
padding: 0;
transition: all .2s;
}
.dm-hero-slider-dot:hover { border-color: var(--brand); }
.dm-hero-slider-dot.active {
background: var(--brand);
border-color: var(--brand);
width: 28px;
border-radius: 6px;
}
/* Hero slide h1 accent span (from admin) */
.dm-hero-slide h1 .accent {
color: var(--brand);
position: relative;
white-space: nowrap;
}
/* Mobile */
@media (max-width: 900px) {
.dm-hero-slider { min-height: auto; padding-bottom: 0; }
.dm-hero-slide { position: relative; opacity: 1; transform: none; pointer-events: auto; display: none; padding-bottom: 20px; }
.dm-hero-slide.active { display: block; }
.dm-hero-slider .dm-hero-trust { padding-top: 20px; margin-top: 8px; }
.dm-hero-slider-nav { margin-top: 16px; padding-top: 16px; }
.dm-hero-slider-arrow { width: 36px; height: 36px; }
}
/* ============================================================
v8 — Son gorunurluk duzeltmeleri
============================================================ */
/* dm-btn-* classlari a-tag olarak da kullanildiginda color'i garanti et */
body.dm-body a.dm-btn-primary,
body.dm-body a.dm-btn-cta,
body.dm-body a.dm-btn-primary:hover,
body.dm-body a.dm-btn-cta:hover {
color: white !important;
}
body.dm-body a.dm-btn-outline {
color: var(--brand) !important;
}
body.dm-body a.dm-btn-outline:hover {
color: white !important;
}
body.dm-body a.dm-btn-ghost {
color: var(--ink-2) !important;
}
body.dm-body a.dm-btn-ghost:hover {
color: var(--ink) !important;
}
body.dm-body .dm-guarantee a.dm-btn {
color: var(--brand) !important;
}
/* Product card flags - gradient bg + white text garanti (background-color fallback) */
body.dm-body .dm-pcard-flag {
color: white !important;
}
body.dm-body .dm-pcard-flag.hot { background-color: #DC2626 !important; }
body.dm-body .dm-pcard-flag.new { background-color: #16A34A !important; }
body.dm-body .dm-pcard-flag.deal { background-color: #EAB308 !important; color: var(--ink) !important; }
body.dm-body .dm-pcard-flag.premium { background-color: #6D28D9 !important; }
/* Code-signing recommended badge & section titles */
body.dm-body .recommended-badge {
color: white !important;
background: var(--cta) !important;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
}
/* Dark sections (koyu zeminli CTA veya sonuc bloklari) - h2 beyaz kalmali */
body.dm-body .cta-section h2, body.dm-body .cta-section h3, body.dm-body .cta-section p,
body.dm-body [class*="cta-dark"] h2, body.dm-body [class*="cta-dark"] p,
body.dm-body .newsletter-section h2, body.dm-body .newsletter-section p,
body.dm-body section[style*="background"][style*="gradient"]:not([style*="#f0f9ff"]):not([style*="#f8fafc"]):not([style*="#eff6ff"]):not([style*="#f9fafb"]):not([style*="#f1f5f9"]):not([style*="#fff 100%"]):not([style*="#ffffff 100%"]) :is(h2,h3,h4),
body.dm-body section[style*="background:#0"] :is(h2,h3,h4),
body.dm-body section[style*="background:#1"] :is(h2,h3,h4) {
color: white !important;
}
/* Koyu gradient section içi kart/adım başlıkları (inline style'lı h4'ler dahil) beyaz */
body.dm-body section[style*="#0f172a"] :is(h3,h4,h5),
body.dm-body section[style*="#1e293b"] :is(h3,h4,h5),
body.dm-body section[style*="#0f172a"] p,
body.dm-body section[style*="#1e293b"] p:not(.section-subtitle) {
color: rgba(255,255,255,0.92) !important;
}
/* Açık zeminli inline-gradient section başlıkları koyu kalsın (görünmezliği önle) */
body.dm-body section[style*="#f0f9ff"] h2,
body.dm-body section[style*="#f8fafc"] h2,
body.dm-body section[style*="#eff6ff"] h2,
body.dm-body section[style*="#f9fafb"] h2 {
color: var(--ink) !important;
}
/* Legacy .section-title on dark bg */
body.dm-body .dark-cta .section-title,
body.dm-body .dark-cta h2,
body.dm-body .dark-cta p,
body.dm-body .dark-cta * {
color: white !important;
}
/* about.php CTA — "Güvenliğinizi Birlikte Büyütelim" is inside dark section */
body.dm-body .about-cta, body.dm-body .about-cta * { color: white !important; }
body.dm-body .about-cta h2 { color: white !important; }
body.dm-body .about-cta .btn { color: var(--brand) !important; background: white !important; }
/* Genel guvence: h2/h3 hiçbir zaman rgba(0,0,0,0) veya inheritable white with light bg olmasin */
body.dm-body section:not(.dm-guarantee):not(.dm-cta):not(.dm-hero):not(.dm-footer):not(.dm-ssl-check-section):not(.dark-section):not(.bg-dark):not([class*="dark-"]) h1,
body.dm-body section:not(.dm-guarantee):not(.dm-cta):not(.dm-hero):not(.dm-footer):not(.dm-ssl-check-section):not(.dark-section):not(.bg-dark):not([class*="dark-"]) h2,
body.dm-body section:not(.dm-guarantee):not(.dm-cta):not(.dm-hero):not(.dm-footer):not(.dm-ssl-check-section):not(.dark-section):not(.bg-dark):not([class*="dark-"]) h3 {
color: var(--ink);
}
/* v9 — Gradient section solid bg fallback (gradient render yapmazsa bile metin okunur) */
.dm-ssl-check-section { background-color: #051E3A !important; }
.dm-hero { background-color: #E7F0F9; }
.dm-guarantee { background-color: #0D5EAF; }
/* Legacy dark-CTA / newsletter section fallback */
body.dm-body .cta-section, body.dm-body .newsletter-section,
body.dm-body [class*="cta-dark"], body.dm-body .about-cta,
body.dm-body section[class*="dark"] {
background-color: #051E3A;
}
body.dm-body .cta-section h1, body.dm-body .cta-section h2,
body.dm-body .cta-section h3, body.dm-body .cta-section p,
body.dm-body .newsletter-section h2, body.dm-body .newsletter-section p,
body.dm-body [class*="cta-dark"] h2, body.dm-body [class*="cta-dark"] p,
body.dm-body [class*="cta-dark"] *,
body.dm-body .about-cta *, body.dm-body .about-cta h2,
body.dm-body section[class*="dark"] h2,
body.dm-body section[class*="dark"] p {
color: white !important;
}
/* code-signing "Süreç" ve "Sertifikalarımız" section title'ları */
body.dm-body .cs-process-section h2, body.dm-body .cs-products-section h2 {
color: var(--ink) !important;
}
body.dm-body .cs-hero h2, body.dm-body .cs-hero p,
body.dm-body .cs-cta h2, body.dm-body .cs-cta p, body.dm-body .cs-cta * {
color: white !important;
}
/* v10 — Kod imzalama & Cloud CS sayfaları ozel duzeltmeler */
/* .section-title (h2) — acik zemin bekleyene ink */
body.dm-body h2.section-title,
body.dm-body h3.section-title,
body.dm-body .cs-products-section .section-title,
body.dm-body .cs-process-section .section-title,
body.dm-body .cs-ideal-section .section-title,
body.dm-body .cs-faq-section .section-title {
color: var(--ink) !important;
}
/* Sadece koyu zeminli explicit dark-bg section'larda .section-title beyaz */
body.dm-body .dark-section .section-title,
body.dm-body .bg-dark .section-title,
body.dm-body [class*="cta-dark"] .section-title,
body.dm-body .dark-cta .section-title {
color: white !important;
}
/* .step-number — gradient dolu daire, beyaz sayi */
body.dm-body .step-number {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
background-color: var(--brand) !important; /* fallback */
color: white !important;
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 20px;
font-weight: 800;
box-shadow: 0 8px 20px -8px rgba(13, 94, 175, 0.4);
margin-bottom: 16px;
}
/* .step-title / .process step h4 */
body.dm-body .step-title,
body.dm-body .process-step h4,
body.dm-body .step-card h4,
body.dm-body .process-card h4 {
color: var(--ink) !important;
font-weight: 700;
margin: 0 0 8px;
}
body.dm-body .step-card, body.dm-body .process-card, body.dm-body .process-step {
background: white;
border: 1px solid var(--hair);
border-radius: 12px;
padding: 24px;
text-align: center;
}
/* .cs-btn / .cloud-btn — gradient buton, beyaz metin */
body.dm-body .cs-btn, body.dm-body a.cs-btn,
body.dm-body .cloud-btn, body.dm-body a.cloud-btn {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
background-color: var(--brand) !important;
color: white !important;
padding: 12px 24px;
border-radius: 8px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all .15s;
border: 0;
text-decoration: none;
}
body.dm-body .cs-btn:hover, body.dm-body .cloud-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(13, 94, 175, 0.4);
color: white !important;
}
body.dm-body .cs-btn.ev-btn, body.dm-body .cloud-btn.ev-btn {
background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%) !important;
background-color: var(--gold-dark) !important;
color: white !important;
}
/* .platforms .platform-item / .platform-name span */
body.dm-body .platform-item,
body.dm-body .platforms > span,
body.dm-body [class*="platform"] > span {
color: var(--ink-2) !important;
padding: 4px 10px;
background: var(--bg-alt);
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
/* kod-imzalama-sertifikalari — h4 icindeki step baslıklar dark bg beklemis, acik zemin var */
body.dm-body h4:not(.dm-fit-card h3):not(.dm-pcard h3):not(.dm-footer h4):not(.dm-cart-item h3):not(.dark-section h4):not([style*="color"]) {
color: var(--ink) !important;
}
/* Ancak koyu zeminde beyaz kalsin */
body.dm-body .dark-section h4, body.dm-body .bg-dark h4,
body.dm-body [class*="cta-dark"] h4, body.dm-body .dm-guarantee h4,
body.dm-body .dm-footer h4, body.dm-body .dm-auth-side h4,
body.dm-body .dm-ssl-check-section h4 {
color: white !important;
}
/* Kalan span'lar */
body.dm-body h4 + span,
body.dm-body .step-card span,
body.dm-body .process-card span,
body.dm-body .process-step span {
color: var(--ink-2);
}
/* v11 — HARD RESET: tum h2/h3/h4 ink (koyu zeminler exception) */
body.dm-body section h2,
body.dm-body section h3,
body.dm-body section h4,
body.dm-body div h2,
body.dm-body div h3,
body.dm-body div h4 {
color: var(--ink) !important;
}
body.dm-body section p,
body.dm-body div p {
color: var(--ink-2);
}
/* Koyu zeminli bilinen elementlerde beyaz kalsin — tam ozel path'ler */
body.dm-body .dm-guarantee h1, body.dm-body .dm-guarantee h2, body.dm-body .dm-guarantee h3,
body.dm-body .dm-guarantee h4, body.dm-body .dm-guarantee p, body.dm-body .dm-guarantee span,
body.dm-body .dm-guarantee div,
body.dm-body .dm-footer h1, body.dm-body .dm-footer h2, body.dm-body .dm-footer h3,
body.dm-body .dm-footer h4, body.dm-body .dm-footer h5, body.dm-body .dm-footer p,
body.dm-body .dm-topbar *, body.dm-body .dm-topbar,
body.dm-body .dm-ssl-check-section h1, body.dm-body .dm-ssl-check-section h2,
body.dm-body .dm-ssl-check-section h3, body.dm-body .dm-ssl-check-section h4,
body.dm-body .dm-ssl-check-section p, body.dm-body .dm-ssl-check-section span,
body.dm-body .dm-ssl-check-section div:not(.dm-ssl-check-input):not(.dm-ssl-check-input *),
body.dm-body .dm-auth-side h1, body.dm-body .dm-auth-side h2, body.dm-body .dm-auth-side h3,
body.dm-body .dm-auth-side h4, body.dm-body .dm-auth-side p, body.dm-body .dm-auth-side span,
body.dm-body .dm-auth-side div, body.dm-body .dm-auth-side b,
body.dm-body .dark-section h1, body.dm-body .dark-section h2, body.dm-body .dark-section h3,
body.dm-body .dark-section h4, body.dm-body .dark-section p, body.dm-body .dark-section span,
body.dm-body .bg-dark h1, body.dm-body .bg-dark h2, body.dm-body .bg-dark h3,
body.dm-body .bg-dark h4, body.dm-body .bg-dark p, body.dm-body .bg-dark span,
body.dm-body .dark-cta *, body.dm-body .dark-cta h1, body.dm-body .dark-cta h2,
body.dm-body .about-cta *, body.dm-body [class*="cta-dark"] *,
body.dm-body .cs-hero h1, body.dm-body .cs-hero h2, body.dm-body .cs-hero h3,
body.dm-body .cs-hero h4, body.dm-body .cs-hero p,
body.dm-body .cs-cta *, body.dm-body .cs-cta-section * {
color: white !important;
}
/* .lead.opacity-90 (Bootstrap) — normalde beyaz varsayilir, ama parent koyu degilse ink */
body.dm-body p.lead {
color: var(--ink-2) !important;
}
body.dm-body .dark-section p.lead, body.dm-body .bg-dark p.lead,
body.dm-body .cs-hero p.lead, body.dm-body [class*="cta-dark"] p.lead,
body.dm-body .dm-ssl-check-section p.lead, body.dm-body .dm-auth-side p.lead {
color: rgba(255,255,255,0.9) !important;
}
/* ============================================================
v12 — Kategori sayfalarinin ORIJINAL tasarimini koru
category-hero KOYU (siyah gradient), metinler beyaz.
ssl-compare-card grid duzeltmesi.
============================================================ */
/* Kategori hero — orijinal koyu tasarima geri don */
body.dm-body section.category-hero,
body.dm-body .category-hero {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%) !important;
padding: 80px 0 60px !important;
color: white !important;
}
body.dm-body .category-hero h1,
body.dm-body .category-hero h2,
body.dm-body .category-hero h3,
body.dm-body .category-hero p,
body.dm-body .category-hero span,
body.dm-body .category-hero div:not(.dm-btn):not(.btn),
body.dm-body .category-hero .hero-title,
body.dm-body .category-hero .hero-description,
body.dm-body .category-hero .hero-stat-value,
body.dm-body .category-hero .hero-stat-label,
body.dm-body .category-hero .hero-badge,
body.dm-body .category-hero .hero-stat {
color: white !important;
}
body.dm-body .category-hero .hero-description,
body.dm-body .category-hero .hero-stat-label {
color: rgba(255,255,255,0.75) !important;
}
body.dm-body .category-hero .hero-badge {
color: white !important;
background: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
padding: 8px 16px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
}
body.dm-body .category-hero .hero-badge i {
color: #F5B831 !important;
}
body.dm-body .category-hero .hero-stat-value,
body.dm-body .category-hero .stat-value {
color: #F5B831 !important;
font-size: 28px !important;
font-weight: 800 !important;
}
body.dm-body .category-hero .hero-stats {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-top: 32px;
}
body.dm-body .category-hero .hero-btn,
body.dm-body .category-hero .btn {
background: #22A45D !important;
color: white !important;
border: 0 !important;
}
/* Breadcrumb section — kompakt beyaz */
body.dm-body .breadcrumb-section {
padding: 16px 0 !important;
background: white !important;
border-bottom: 1px solid var(--hair);
}
body.dm-body .breadcrumb-section .breadcrumb {
margin: 0;
padding: 0;
font-size: 13px;
}
body.dm-body .breadcrumb-section .breadcrumb-item a {
color: var(--brand) !important;
font-weight: 500;
}
body.dm-body .breadcrumb-section .breadcrumb-item.active {
color: var(--ink) !important;
font-weight: 600;
}
body.dm-body .breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
content: "›";
color: var(--ink-4);
padding: 0 8px;
}
/* ssl-compare-section — daha kompakt, kart grid duzelt */
body.dm-body .ssl-compare-section {
padding: 40px 0 60px !important;
background: var(--bg-alt) !important;
}
body.dm-body .ssl-compare-section .ssl-compare-table {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 20px !important;
max-width: 1240px;
margin: 0 auto;
}
body.dm-body .ssl-compare-card {
background: white !important;
border: 1px solid var(--hair) !important;
border-radius: 12px !important;
padding: 20px !important;
transition: all .18s !important;
position: relative;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
body.dm-body .ssl-compare-card:hover {
transform: translateY(-4px);
border-color: var(--brand) !important;
box-shadow: 0 20px 40px -20px rgba(13,94,175,0.25) !important;
}
body.dm-body .ssl-compare-card.popular {
border-color: var(--gold) !important;
border-width: 2px !important;
}
body.dm-body .ssl-compare-card.popular::before {
content: "POPÜLER";
position: absolute;
top: -10px;
right: 16px;
background: var(--gold);
color: var(--ink);
padding: 3px 10px;
border-radius: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
}
body.dm-body .ssl-compare-card h3, body.dm-body .ssl-compare-card h4 {
color: var(--ink) !important;
font-size: 16px !important;
font-weight: 700 !important;
margin: 0 !important;
}
body.dm-body .ssl-compare-card .price,
body.dm-body .ssl-compare-card .card-price {
color: var(--brand) !important;
font-size: 24px !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
}
body.dm-body .ssl-compare-card ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
}
body.dm-body .ssl-compare-card ul li {
font-size: 12.5px;
color: var(--ink-2);
padding-left: 20px;
position: relative;
}
body.dm-body .ssl-compare-card ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--cta);
font-weight: 700;
}
body.dm-body .ssl-compare-card .btn, body.dm-body .ssl-compare-card a.btn {
background: var(--brand) !important;
color: white !important;
padding: 10px 16px !important;
border-radius: 6px !important;
font-weight: 600 !important;
text-align: center;
display: block;
margin-top: auto;
transition: all .15s;
}
body.dm-body .ssl-compare-card .btn:hover {
background: var(--brand-2) !important;
transform: translateY(-1px);
}
/* Kategori CTA (dip) — koyu banner */
body.dm-body .cta-section {
background: linear-gradient(135deg, #051E3A 0%, #0D5EAF 100%) !important;
background-color: #051E3A !important;
padding: 60px 0 !important;
color: white !important;
text-align: center;
}
body.dm-body .cta-section h2, body.dm-body .cta-section h3, body.dm-body .cta-section p,
body.dm-body .cta-section span {
color: white !important;
}
body.dm-body .cta-section p {
color: rgba(255,255,255,0.85) !important;
}
body.dm-body .cta-section .btn, body.dm-body .cta-section a.btn {
background: #F5B831 !important;
color: var(--ink) !important;
padding: 12px 28px !important;
font-weight: 700 !important;
border-radius: 8px !important;
display: inline-block;
margin-top: 12px;
}
body.dm-body .cta-section .btn:hover {
background: #E8B04B !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px -6px rgba(245,184,49,0.5);
}
/* py-5 section'lari (mid-page) tut ama padding aza */
body.dm-body .ssl-compare-section .container,
body.dm-body .cta-section .container,
body.dm-body .breadcrumb-section .container,
body.dm-body .category-hero .container {
max-width: 1240px;
}
/* Section padding'ini tumu icin standardize et */
body.dm-body section.py-5 {
padding: 60px 0 !important;
}
@media (max-width: 720px) {
body.dm-body section.py-5 { padding: 40px 0 !important; }
body.dm-body .category-hero { padding: 48px 0 40px !important; }
body.dm-body .ssl-compare-section { padding: 32px 0 40px !important; }
body.dm-body .cta-section { padding: 40px 0 !important; }
body.dm-body .ssl-compare-section .ssl-compare-table {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
/* ============================================================
v13 — MODERN BREADCRUMB
============================================================ */
/* Legacy .breadcrumb-section (kategori sayfalari) */
body.dm-body .breadcrumb-section {
padding: 20px 0 !important;
background: linear-gradient(180deg, white 0%, var(--bg-alt) 100%) !important;
border-bottom: 1px solid var(--hair) !important;
position: relative;
}
body.dm-body .breadcrumb-section::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--brand);
border-radius: 3px 3px 0 0;
}
body.dm-body .breadcrumb-section .breadcrumb,
body.dm-body .breadcrumb-section ol.breadcrumb {
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
background: white;
border: 1px solid var(--hair);
border-radius: 999px;
padding: 8px 18px;
font-size: 13px;
box-shadow: 0 2px 8px -3px rgba(26,39,64,0.08);
list-style: none;
flex-wrap: wrap;
}
body.dm-body .breadcrumb-section .breadcrumb-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 !important;
}
body.dm-body .breadcrumb-section .breadcrumb-item a {
color: var(--ink-3) !important;
text-decoration: none;
padding: 4px 10px;
border-radius: 999px;
transition: all .15s;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
body.dm-body .breadcrumb-section .breadcrumb-item a:hover {
color: var(--brand) !important;
background: var(--brand-3);
}
body.dm-body .breadcrumb-section .breadcrumb-item.active,
body.dm-body .breadcrumb-section .breadcrumb-item.active span {
color: var(--ink) !important;
font-weight: 700;
padding: 4px 10px;
}
/* Home icon on first breadcrumb item */
body.dm-body .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
display: inline-block;
}
/* Chevron separator */
body.dm-body .breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
content: "" !important;
width: 6px;
height: 6px;
border-right: 2px solid var(--ink-4);
border-bottom: 2px solid var(--ink-4);
transform: rotate(-45deg);
padding: 0 !important;
margin: 0 2px;
display: inline-block;
}
/* ─── MODERN dm-crumb ─── */
body.dm-body .dm-crumb {
display: inline-flex;
align-items: center;
gap: 4px;
background: white;
border: 1px solid var(--hair);
border-radius: 999px;
padding: 8px 18px 8px 8px;
font-size: 13px;
margin-bottom: 24px;
box-shadow: 0 2px 8px -3px rgba(26,39,64,0.08);
flex-wrap: wrap;
color: var(--ink-3);
}
body.dm-body .dm-crumb > a,
body.dm-body .dm-crumb > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
transition: all .15s;
color: var(--ink-3);
text-decoration: none;
font-weight: 500;
}
body.dm-body .dm-crumb a:first-child {
padding-left: 12px;
}
body.dm-body .dm-crumb a:first-child::before {
content: "";
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
display: inline-block;
}
body.dm-body .dm-crumb a:hover {
color: var(--brand);
background: var(--brand-3);
}
body.dm-body .dm-crumb > span:not(.sep) {
color: var(--ink) !important;
font-weight: 700;
}
body.dm-body .dm-crumb .sep {
padding: 0 !important;
margin: 0 4px;
width: 6px;
height: 6px;
border-right: 2px solid var(--ink-4);
border-bottom: 2px solid var(--ink-4);
transform: rotate(-45deg);
border-radius: 0;
background: transparent !important;
font-size: 0 !important;
color: transparent !important;
}
body.dm-body .dm-crumb .sep::before, body.dm-body .dm-crumb .sep::after { content: none; }
/* Mobile */
@media (max-width: 640px) {
body.dm-body .dm-crumb,
body.dm-body .breadcrumb-section .breadcrumb {
padding: 6px 14px 6px 6px;
font-size: 12px;
}
body.dm-body .dm-crumb > a,
body.dm-body .dm-crumb > span:not(.sep),
body.dm-body .breadcrumb-section .breadcrumb-item a {
padding: 3px 8px;
}
}
/* ============================================================
v14 — TUM URUN KARTLARINI dm-pcard'a UYUMLA
.ssl-compare-card → anasayfa .dm-pcard gorunumu
============================================================ */
/* Grid — 3 kolon desktop, 2 tablet, 1 mobil */
body.dm-body .ssl-compare-section .ssl-compare-table {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
max-width: 1240px;
margin: 0 auto;
}
@media (max-width: 1000px) {
body.dm-body .ssl-compare-section .ssl-compare-table {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
body.dm-body .ssl-compare-section .ssl-compare-table {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* Card container — dm-pcard mimarisi */
body.dm-body .ssl-compare-card {
background: white !important;
border: 1px solid var(--hair) !important;
border-radius: 14px !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
position: relative;
transition: all .25s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
box-shadow: 0 1px 3px rgba(26, 39, 64, 0.04);
}
body.dm-body .ssl-compare-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
opacity: 0;
transition: opacity .25s;
z-index: 2;
}
body.dm-body .ssl-compare-card:hover {
transform: translateY(-6px) !important;
border-color: var(--brand) !important;
box-shadow: 0 24px 50px -20px rgba(13, 94, 175, 0.28) !important;
}
body.dm-body .ssl-compare-card:hover::before { opacity: 1; }
/* POPULER badge */
body.dm-body .ssl-compare-card.popular::before {
opacity: 1;
background: linear-gradient(90deg, var(--gold), var(--gold-dark)) !important;
height: 4px;
}
body.dm-body .ssl-compare-card.popular::after {
content: "POPÜLER";
position: absolute;
top: 16px;
right: 16px;
padding: 5px 12px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: white;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
border-radius: 999px;
box-shadow: 0 4px 10px -2px rgba(245, 184, 49, 0.5);
z-index: 3;
}
/* Card Header (top bar — brand logo + brand name) */
body.dm-body .ssl-card-header {
padding: 20px 22px 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
border-bottom: 1px solid var(--hair-soft) !important;
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%) !important;
}
body.dm-body .ssl-card-brand {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
body.dm-body .ssl-card-brand img {
max-width: 32px !important;
max-height: 32px !important;
width: auto !important;
height: auto !important;
border-radius: 8px;
padding: 2px;
background: white;
border: 1px solid var(--hair);
object-fit: contain;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.dm-body .ssl-card-brand-name {
font-size: 12px !important;
font-weight: 800 !important;
color: var(--ink) !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
body.dm-body .ssl-card-name {
margin: 0 !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.015em !important;
line-height: 1.28 !important;
min-height: 44px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.dm-body .ssl-card-name a {
color: var(--ink) !important;
text-decoration: none !important;
}
body.dm-body .ssl-card-name a:hover { color: var(--brand) !important; }
/* Card Features — check icons in green boxes */
body.dm-body .ssl-card-features {
padding: 16px 22px !important;
display: grid !important;
gap: 9px !important;
order: 2;
flex: 1;
}
body.dm-body .ssl-feature-item {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
font-size: 13px !important;
color: var(--ink-2) !important;
line-height: 1.45 !important;
font-weight: 500 !important;
padding: 0 !important;
border: 0 !important;
}
body.dm-body .ssl-feature-icon {
flex-shrink: 0 !important;
width: 22px !important;
height: 22px !important;
background: var(--cta-soft) !important;
color: var(--cta) !important;
border-radius: 5px !important;
display: grid !important;
place-items: center !important;
font-size: 11px !important;
margin-top: 1px;
}
body.dm-body .ssl-feature-icon i { font-size: 10.5px !important; }
body.dm-body .ssl-feature-icon.clock { background: var(--brand-3) !important; color: var(--brand) !important; }
body.dm-body .ssl-feature-icon.shield { background: var(--gold-soft) !important; color: var(--gold-dark) !important; }
body.dm-body .ssl-feature-text { color: var(--ink-2) !important; }
body.dm-body .ssl-feature-text strong { color: var(--ink) !important; font-weight: 700; }
/* Card Price → footer style (bottom) */
body.dm-body .ssl-card-price {
order: 3;
padding: 16px 22px !important;
border-top: 1px solid var(--hair-soft) !important;
background: var(--bg-alt) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
position: relative;
}
body.dm-body .ssl-price-main {
display: flex !important;
align-items: baseline !important;
gap: 4px !important;
color: var(--brand) !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
body.dm-body .ssl-price-currency {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--brand) !important;
}
body.dm-body .ssl-price-amount {
font-size: 28px !important;
font-weight: 800 !important;
color: var(--brand) !important;
font-variant-numeric: tabular-nums !important;
line-height: 1;
}
body.dm-body .ssl-price-period {
font-size: 12px !important;
color: var(--ink-3) !important;
font-weight: 500 !important;
}
body.dm-body .ssl-price-old {
color: var(--ink-4) !important;
text-decoration: line-through !important;
font-size: 12.5px !important;
font-weight: 500 !important;
margin: 0 !important;
}
body.dm-body .ssl-validation-badge {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 3px 8px !important;
background: var(--brand-3) !important;
color: var(--brand) !important;
border-radius: 4px !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border: 0 !important;
position: absolute;
top: 16px;
right: 22px;
}
body.dm-body .ssl-validation-badge.dv { background: var(--brand-3) !important; color: var(--brand) !important; }
body.dm-body .ssl-validation-badge.ov { background: var(--gold-soft) !important; color: var(--gold-dark) !important; }
body.dm-body .ssl-validation-badge.ev { background: var(--gold-dark) !important; color: white !important; }
body.dm-body .ssl-validation-badge.wildcard { background: #F0E7FE !important; color: #6B21A8 !important; }
body.dm-body .reseller-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 2px 7px !important;
background: var(--cta-soft) !important;
color: var(--cta-dark) !important;
border-radius: 4px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
/* Card Footer — CTA button */
body.dm-body .ssl-card-footer {
order: 4;
padding: 0 22px 20px !important;
border-top: 0 !important;
background: var(--bg-alt) !important;
}
body.dm-body .ssl-buy-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
height: 44px !important;
background: var(--cta) !important;
color: white !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 12.5px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: all .15s !important;
box-shadow: 0 4px 10px -3px rgba(34, 164, 93, 0.35) !important;
border: 0 !important;
}
body.dm-body .ssl-buy-btn:hover {
background: var(--cta-dark) !important;
transform: translateY(-1px);
box-shadow: 0 8px 18px -4px rgba(34, 164, 93, 0.5) !important;
color: white !important;
}
/* Order override — flex order to reorganize sections */
body.dm-body .ssl-compare-card {
display: flex !important;
}
body.dm-body .ssl-card-header { order: 1 !important; }
body.dm-body .ssl-card-features { order: 2 !important; }
body.dm-body .ssl-card-price { order: 3 !important; margin-top: auto !important; }
body.dm-body .ssl-card-footer { order: 4 !important; }
/* ============================================================
v15 — MOBIL EMIN GORUNUM (extra spesifik)
============================================================ */
@media (max-width: 900px) {
/* Kategori sayfalarinda kart grid'i tek kolon guclu */
body.dm-body .ssl-compare-section .ssl-compare-table,
body.dm-body .ssl-compare-table {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
max-width: 100%;
padding: 0 4px;
}
/* Kart mobil optimizasyon */
body.dm-body .ssl-compare-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
border-radius: 12px !important;
background: white !important;
border: 1px solid var(--hair) !important;
overflow: hidden !important;
box-shadow: 0 2px 6px rgba(26,39,64,0.06) !important;
}
/* Mobilde upper bar biraz kompakt */
body.dm-body .ssl-card-header { padding: 16px 18px 10px !important; }
body.dm-body .ssl-card-name { font-size: 16px !important; min-height: auto !important; }
body.dm-body .ssl-card-features { padding: 12px 18px !important; gap: 8px !important; }
body.dm-body .ssl-feature-item { font-size: 12.5px !important; }
body.dm-body .ssl-card-price { padding: 12px 18px !important; }
body.dm-body .ssl-price-amount { font-size: 24px !important; }
body.dm-body .ssl-card-footer { padding: 0 18px 16px !important; }
body.dm-body .ssl-buy-btn { height: 42px !important; font-size: 12px !important; }
body.dm-body .ssl-validation-badge { top: 12px !important; right: 18px !important; }
/* Anasayfa dm-pcard mobilde de emin gorunum */
body.dm-body .dm-pcard {
width: 100% !important;
max-width: 100% !important;
border-radius: 12px !important;
background: white !important;
border: 1px solid var(--hair) !important;
box-shadow: 0 2px 6px rgba(26,39,64,0.06) !important;
}
body.dm-body .dm-pcard-brand { padding: 16px 18px 10px !important; }
body.dm-body .dm-pcard > h3 { margin: 12px 18px 0 !important; font-size: 16px !important; min-height: auto !important; }
body.dm-body .dm-pcard > .rating { margin: 6px 18px 0 !important; }
body.dm-body .dm-pcard > ul { margin: 10px 18px 14px !important; gap: 7px !important; }
body.dm-body .dm-pcard > ul li { font-size: 12.5px !important; }
body.dm-body .dm-pcard-foot { padding: 14px 18px 16px !important; }
body.dm-body .dm-pcard-price .row b { font-size: 22px !important; }
body.dm-body .dm-pcard-foot .dm-btn,
body.dm-body .dm-pcard-foot .dm-btn-cta { height: 40px !important; font-size: 12px !important; }
}
/* v16 — PAGINATION */
.dm-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 40px 0 12px;
flex-wrap: wrap;
}
.dm-pg-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border: 1px solid var(--hair);
border-radius: 8px;
background: white;
color: var(--ink);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all .15s;
}
.dm-pg-btn:hover {
border-color: var(--brand);
color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 4px 10px -4px rgba(13,94,175,0.3);
}
.dm-pg-btn.disabled {
color: var(--ink-4);
cursor: not-allowed;
opacity: 0.6;
background: var(--bg-alt);
}
.dm-pg-nums {
display: inline-flex;
gap: 6px;
align-items: center;
}
.dm-pg-num {
display: inline-grid;
place-items: center;
min-width: 40px;
height: 40px;
padding: 0 8px;
border: 1px solid var(--hair);
border-radius: 8px;
background: white;
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: all .15s;
font-variant-numeric: tabular-nums;
}
.dm-pg-num:hover {
border-color: var(--brand);
color: var(--brand);
}
.dm-pg-num.active {
background: var(--brand);
border-color: var(--brand);
color: white;
box-shadow: 0 4px 12px -4px rgba(13,94,175,0.4);
}
.dm-pg-ellipsis {
color: var(--ink-3);
font-size: 16px;
padding: 0 4px;
}
.dm-pg-info {
text-align: center;
font-size: 12.5px;
color: var(--ink-3);
margin-bottom: 24px;
font-family: "JetBrains Mono", monospace;
}
@media (max-width: 640px) {
.dm-pagination { gap: 8px; }
.dm-pg-btn { padding: 8px 12px; font-size: 12px; }
.dm-pg-num { min-width: 34px; height: 34px; font-size: 12.5px; }
}
/* v17 — Daha Fazla Yukle butonu + inline pagination */
.dm-load-more-wrap {
text-align: center;
margin: 40px 0 24px;
}
.dm-load-more-wrap .dm-btn {
min-width: 240px;
padding: 14px 28px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.02em;
gap: 10px;
}
.dm-load-more-wrap .dm-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 12px 28px -10px rgba(13, 94, 175, 0.35);
}
.dm-load-more-wrap .dm-btn:disabled {
opacity: 0.7;
cursor: wait;
}
.dm-load-count {
padding: 4px 10px;
background: var(--brand-3);
color: var(--brand);
border-radius: 999px;
font-size: 11.5px;
font-family: "JetBrains Mono", monospace;
font-weight: 700;
margin-left: 4px;
}
.dm-load-more-wrap .dm-btn:hover .dm-load-count {
background: var(--brand);
color: white;
}
/* AJAX loading state */
#dmPGrid { transition: opacity .2s; }
/* v18 — BREADCRUMB SADELESTIRME VE KOMPAKT */
/* Legacy .breadcrumb-section — kompakt band */
body.dm-body .breadcrumb-section {
padding: 12px 0 !important;
background: white !important;
border-bottom: 1px solid var(--hair-soft) !important;
min-height: 0 !important;
}
body.dm-body .breadcrumb-section::after { display: none !important; }
body.dm-body .breadcrumb-section > .container,
body.dm-body .breadcrumb-section > * {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* .breadcrumb OL — sadelestirilmis inline seri */
body.dm-body .breadcrumb-section .breadcrumb,
body.dm-body .breadcrumb-section ol.breadcrumb,
body.dm-body ol.breadcrumb {
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
flex-wrap: wrap;
align-items: center;
gap: 2px;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 13px !important;
list-style: none !important;
}
body.dm-body .breadcrumb-section .breadcrumb-item {
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
gap: 6px;
color: var(--ink-3);
}
body.dm-body .breadcrumb-section .breadcrumb-item a {
color: var(--ink-3) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
transition: all .12s;
text-decoration: none !important;
font-weight: 500;
}
body.dm-body .breadcrumb-section .breadcrumb-item a:hover {
color: var(--brand) !important;
background: var(--brand-3) !important;
}
body.dm-body .breadcrumb-section .breadcrumb-item.active,
body.dm-body .breadcrumb-section .breadcrumb-item.active span {
color: var(--ink) !important;
font-weight: 600 !important;
padding: 4px 8px;
}
/* Home icon */
body.dm-body .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
margin-right: 6px;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Chevron ayirici - text > karakteri, ink-4 renk */
body.dm-body .breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
content: "›" !important;
color: var(--ink-4) !important;
font-size: 14px !important;
font-weight: 400 !important;
padding: 0 2px !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
border: 0 !important;
transform: none !important;
display: inline-block !important;
line-height: 1;
}
/* MODERN dm-crumb - inline pill kaldirildi, sade */
body.dm-body .dm-crumb {
display: inline-flex;
align-items: center;
gap: 2px;
background: transparent;
border: 0;
border-radius: 0;
padding: 12px 0;
font-size: 13px;
margin-bottom: 16px;
box-shadow: none;
color: var(--ink-3);
flex-wrap: wrap;
}
body.dm-body .dm-crumb > a,
body.dm-body .dm-crumb > span:not(.sep) {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 4px;
transition: all .12s;
color: var(--ink-3);
text-decoration: none;
font-weight: 500;
}
body.dm-body .dm-crumb a:first-child {
padding-left: 8px;
}
body.dm-body .dm-crumb a:first-child::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
body.dm-body .dm-crumb a:hover {
color: var(--brand);
background: var(--brand-3);
}
body.dm-body .dm-crumb > span:not(.sep) {
color: var(--ink) !important;
font-weight: 600;
}
/* Chevron sep — sadece > karakteri */
body.dm-body .dm-crumb .sep {
padding: 0 2px !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
border: 0 !important;
transform: none !important;
background: transparent !important;
color: var(--ink-4) !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 400 !important;
display: inline-block !important;
font-family: inherit !important;
}
/* Mobile - kompakt */
@media (max-width: 640px) {
body.dm-body .dm-crumb,
body.dm-body .breadcrumb-section .breadcrumb {
font-size: 12px !important;
padding: 8px 0 !important;
}
body.dm-body .dm-crumb a, body.dm-body .dm-crumb > span:not(.sep),
body.dm-body .breadcrumb-section .breadcrumb-item a {
padding: 3px 6px !important;
}
body.dm-body .breadcrumb-section { padding: 8px 0 !important; }
}
/* v19 — Kategori hero'da istenmeyen dekoratif ogeleri kaldir */
body.dm-body .category-hero .hero-stats,
body.dm-body .category-hero .hero-icon-box,
body.dm-body .category-hero > .col-lg-4,
body.dm-body .category-hero .col-lg-5.d-none.d-lg-block,
body.dm-body .category-hero .col-lg-4.d-none.d-lg-flex,
body.dm-body .category-hero .col-lg-4.d-lg-flex,
body.dm-body .hero-icon-box {
display: none !important;
}
/* Turuncu radial gradient ::before kaldir */
body.dm-body .category-hero::before {
display: none !important;
content: none !important;
background: none !important;
}
body.dm-body .category-hero::after {
display: none !important;
}
/* Content column full width olsun (sag col gizlendigi icin) */
body.dm-body .category-hero .col-lg-7,
body.dm-body .category-hero .col-lg-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: center;
}
/* Hero padding'i biraz azalt (stats yoksa daha kompakt) */
body.dm-body .category-hero {
padding: 60px 0 !important;
}
/* v20 — dm-fit-card ve dm-deal-card'i dm-pcard gorunumune yaklastir */
/* Fit cards (3 hedef) */
.dm-fit-card {
background: white !important;
border: 1px solid var(--hair) !important;
border-radius: 14px !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
transition: all .25s cubic-bezier(0.2, 0.7, 0.2, 1);
box-shadow: 0 1px 3px rgba(26, 39, 64, 0.04);
position: relative;
}
.dm-fit-card:hover {
transform: translateY(-6px);
border-color: var(--brand) !important;
box-shadow: 0 24px 50px -20px rgba(13, 94, 175, 0.28) !important;
}
.dm-fit-card::before { display: none !important; }
/* İç düzen - brand-header patternin taklit et */
.dm-fit-card .dm-fit-icon {
width: 100% !important;
height: auto !important;
padding: 20px 22px 12px !important;
margin: 0 !important;
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%) !important;
border-bottom: 1px solid var(--hair-soft) !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
color: var(--brand) !important;
}
.dm-fit-card .dm-fit-icon svg {
flex-shrink: 0;
width: 32px !important;
height: 32px !important;
padding: 4px !important;
background: white !important;
border: 1px solid var(--hair) !important;
border-radius: 8px !important;
}
.dm-fit-card .dm-fit-lbl {
color: var(--brand) !important;
font-size: 11.5px !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
padding: 14px 22px 0 !important;
margin-top: 0 !important;
position: relative;
z-index: 1;
}
.dm-fit-card h3 {
margin: 12px 22px 0 !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.015em !important;
line-height: 1.28 !important;
}
.dm-fit-card h3 .dm-fit-plus {
font-size: 12px !important;
color: var(--ink-3) !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.dm-fit-card p {
margin: 8px 22px 12px !important;
font-size: 13px !important;
color: var(--ink-2) !important;
line-height: 1.5 !important;
min-height: auto !important;
}
.dm-fit-features {
padding: 0 22px 16px !important;
display: grid !important;
gap: 9px !important;
border-bottom: 1px solid var(--hair-soft) !important;
}
.dm-fit-features li {
font-size: 13px !important;
color: var(--ink-2) !important;
gap: 10px !important;
}
.dm-fit-features li svg {
color: var(--cta) !important;
background: var(--cta-soft) !important;
padding: 3px !important;
border-radius: 4px !important;
width: 18px !important;
height: 18px !important;
}
.dm-fit-price {
padding: 16px 22px !important;
border-top: 0 !important;
background: var(--bg-alt) !important;
margin: 0 !important;
}
.dm-fit-from {
font-size: 10.5px !important;
color: var(--ink-3) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
}
.dm-fit-price > div {
gap: 4px !important;
}
.dm-fit-price b {
font-size: 28px !important;
font-weight: 800 !important;
color: var(--brand) !important;
letter-spacing: -0.025em !important;
font-variant-numeric: tabular-nums !important;
}
.dm-fit-featured .dm-fit-price b {
color: var(--brand) !important;
}
.dm-fit-price small {
font-size: 12px !important;
color: var(--ink-3) !important;
}
.dm-fit-card .dm-btn {
margin: 0 22px 20px !important;
padding: 0 18px !important;
height: 44px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 8px !important;
background: var(--cta) !important;
color: white !important;
border: 0 !important;
box-shadow: 0 4px 10px -3px rgba(34, 164, 93, 0.35) !important;
width: auto !important;
}
.dm-fit-card .dm-btn:hover {
background: var(--cta-dark) !important;
transform: translateY(-1px);
box-shadow: 0 8px 18px -4px rgba(34, 164, 93, 0.5) !important;
}
.dm-fit-featured .dm-btn {
background: var(--cta) !important;
color: white !important;
}
/* Featured kart altin border korunsun */
.dm-fit-featured {
border: 2px solid var(--gold) !important;
transform: scale(1.03) !important;
box-shadow: 0 20px 40px -20px rgba(245, 184, 49, 0.35) !important;
}
.dm-fit-featured:hover {
transform: scale(1.03) translateY(-6px) !important;
}
@media (max-width: 900px) {
.dm-fit-featured { transform: none !important; }
.dm-fit-featured:hover { transform: translateY(-6px) !important; }
}
/* Deal card (hero right side "Ayin Firsati") - dm-pcard'a benzet */
.dm-deal-card {
background: white !important;
border: 1px solid var(--hair) !important;
border-radius: 14px !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow: 0 20px 40px -20px rgba(26,39,64,0.15) !important;
position: relative;
}
.dm-deal-card .dm-deal-flag {
top: 14px !important;
right: 14px !important;
left: auto !important;
background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
color: white !important;
padding: 5px 12px !important;
border-radius: 999px !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
box-shadow: 0 4px 10px -2px rgba(245, 184, 49, 0.5) !important;
}
.dm-deal-head {
padding: 20px 22px 12px !important;
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%) !important;
border-bottom: 1px solid var(--hair-soft) !important;
margin-bottom: 0 !important;
}
.dm-deal-card h3 {
margin: 12px 22px 0 !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.015em !important;
}
.dm-deal-card .sub {
margin: 6px 22px 0 !important;
font-size: 13px !important;
color: var(--ink-3) !important;
}
.dm-deal-features {
margin: 12px 22px 16px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--hair-soft) !important;
}
.dm-deal-features li svg {
color: var(--cta) !important;
background: var(--cta-soft) !important;
padding: 3px !important;
border-radius: 4px !important;
width: 18px !important;
height: 18px !important;
}
.dm-deal-price {
padding: 16px 22px 0 !important;
background: var(--bg-alt) !important;
margin: 0 !important;
}
.dm-deal-price .now {
font-size: 28px !important;
color: var(--brand) !important;
}
.dm-deal-save {
margin: 0 22px 12px !important;
background: var(--cta-soft) !important;
color: var(--cta-dark) !important;
}
.dm-deal-card .dm-btn-cta {
margin: 0 22px 20px !important;
height: 44px !important;
width: auto !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
border-radius: 8px !important;
box-shadow: 0 4px 10px -3px rgba(34, 164, 93, 0.35) !important;
}
/* v21 — KOMPAKT MODERN KATEGORİ HERO */
/* Kompakt padding, azaltılmıs yukseklik */
body.dm-body .category-hero {
padding: 32px 0 28px !important;
background: linear-gradient(135deg, #0B1B2E 0%, #142845 50%, #0F2138 100%) !important;
position: relative !important;
overflow: hidden !important;
}
/* Ambient noise + dekoratif nokta pattern */
body.dm-body .category-hero {
background-image:
radial-gradient(ellipse at 15% 30%, rgba(59, 139, 214, 0.18), transparent 40%),
radial-gradient(ellipse at 85% 70%, rgba(13, 94, 175, 0.15), transparent 45%),
linear-gradient(135deg, #0B1B2E 0%, #142845 50%, #0F2138 100%) !important;
}
/* Icerik ortalama gerekmiyorsa sola yasla */
body.dm-body .category-hero .container,
body.dm-body .category-hero > .container,
body.dm-body .category-hero .row {
max-width: 1240px;
margin: 0 auto;
}
body.dm-body .category-hero .col-lg-7,
body.dm-body .category-hero .col-lg-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: left !important;
}
/* Badge — modern pill */
body.dm-body .category-hero .hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
background: rgba(59, 139, 214, 0.15) !important;
border: 1px solid rgba(59, 139, 214, 0.35) !important;
color: #7EC5FF !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 0 14px !important;
backdrop-filter: blur(8px) !important;
}
body.dm-body .category-hero .hero-badge::before {
content: "" !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #4ADE80 !important;
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25) !important;
}
/* H1 - beyaz, kompakt */
body.dm-body .category-hero h1 {
color: white !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
margin: 0 0 10px !important;
max-width: 720px;
}
body.dm-body .category-hero h1 span,
body.dm-body .category-hero h1 em {
color: #7EC5FF !important;
font-style: normal !important;
font-weight: 800 !important;
}
/* Description */
body.dm-body .category-hero .hero-description,
body.dm-body .category-hero .hero-desc,
body.dm-body .category-hero p {
color: rgba(255,255,255,0.72) !important;
font-size: 15px !important;
line-height: 1.55 !important;
margin: 0 !important;
max-width: 640px;
font-weight: 400 !important;
}
/* CTA button varsa modern */
body.dm-body .category-hero .btn,
body.dm-body .category-hero .hero-btn {
margin-top: 18px !important;
padding: 10px 22px !important;
height: 42px !important;
background: var(--cta) !important;
color: white !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 13.5px !important;
border: 0 !important;
box-shadow: 0 4px 12px -3px rgba(34, 164, 93, 0.45) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
body.dm-body .category-hero .btn:hover {
background: var(--cta-dark) !important;
transform: translateY(-1px);
}
/* Mobil — daha da kompakt */
@media (max-width: 720px) {
body.dm-body .category-hero {
padding: 24px 0 20px !important;
}
body.dm-body .category-hero h1 {
font-size: clamp(22px, 6vw, 28px) !important;
line-height: 1.15 !important;
}
body.dm-body .category-hero .hero-badge {
font-size: 11px !important;
padding: 5px 12px !important;
}
body.dm-body .category-hero p,
body.dm-body .category-hero .hero-description {
font-size: 14px !important;
}
}
/* v22 — v21 override guclendirmesi (v12'nin section.category-hero'sunu ez) */
body.dm-body section.category-hero,
body.dm-body .category-hero {
padding: 32px 0 28px !important;
background:
radial-gradient(ellipse at 15% 30%, rgba(59, 139, 214, 0.18), transparent 40%),
radial-gradient(ellipse at 85% 70%, rgba(13, 94, 175, 0.15), transparent 45%),
linear-gradient(135deg, #0B1B2E 0%, #142845 50%, #0F2138 100%) !important;
}
body.dm-body section.category-hero h1,
body.dm-body .category-hero h1,
body.dm-body section.category-hero .col-lg-7 h1,
body.dm-body section.category-hero .col-lg-8 h1 {
color: white !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
margin: 0 0 10px !important;
max-width: 720px;
text-shadow: none !important;
}
body.dm-body section.category-hero h1 span,
body.dm-body .category-hero h1 span {
color: #7EC5FF !important;
}
body.dm-body section.category-hero .hero-badge,
body.dm-body .category-hero .hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
background: rgba(126, 197, 255, 0.12) !important;
border: 1px solid rgba(126, 197, 255, 0.35) !important;
color: #7EC5FF !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 0 14px !important;
}
body.dm-body section.category-hero .hero-description,
body.dm-body section.category-hero .hero-desc,
body.dm-body section.category-hero p,
body.dm-body .category-hero .hero-description,
body.dm-body .category-hero p:not(.dm-crumb):not(.breadcrumb-item) {
color: rgba(255,255,255,0.72) !important;
font-size: 15px !important;
line-height: 1.55 !important;
margin: 0 !important;
max-width: 640px;
font-weight: 400 !important;
}
/* Sola yasla */
body.dm-body section.category-hero .col-lg-7,
body.dm-body section.category-hero .col-lg-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: left !important;
}
@media (max-width: 720px) {
body.dm-body section.category-hero,
body.dm-body .category-hero {
padding: 24px 0 20px !important;
}
body.dm-body section.category-hero h1 {
font-size: clamp(22px, 6vw, 28px) !important;
}
}
/* v23 — UNIFIED HERO: kompakt modern tum sayfalarda ayni gorunum */
body.dm-body section.category-hero,
body.dm-body .category-hero,
body.dm-body section.page-hero-modern,
body.dm-body .page-hero-modern,
body.dm-body section.lei-hero,
body.dm-body .lei-hero,
body.dm-body section.brand-hero,
body.dm-body .brand-hero,
body.dm-body section.contact-hero,
body.dm-body .contact-hero,
body.dm-body section.about-header,
body.dm-body .about-header,
body.dm-body section.cs-hero,
body.dm-body .cs-hero,
body.dm-body section.tools-hero,
body.dm-body .tools-hero,
body.dm-body section[class*="page-hero"]:not(.dm-hero),
body.dm-body section[class*="page-header"]:not(.dm-hero) {
padding: 32px 0 28px !important;
min-height: 0 !important;
background:
radial-gradient(ellipse at 15% 30%, rgba(59, 139, 214, 0.18), transparent 40%),
radial-gradient(ellipse at 85% 70%, rgba(13, 94, 175, 0.15), transparent 45%),
linear-gradient(135deg, #0B1B2E 0%, #142845 50%, #0F2138 100%) !important;
position: relative !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
/* Legacy hero'lardaki dekoratif ::before/::after temizle */
body.dm-body section.page-hero-modern::before,
body.dm-body section.page-hero-modern::after,
body.dm-body .page-hero-modern::before,
body.dm-body .page-hero-modern::after,
body.dm-body section.lei-hero::before,
body.dm-body section.lei-hero::after,
body.dm-body .lei-hero::before,
body.dm-body .lei-hero::after,
body.dm-body section.brand-hero::before,
body.dm-body section.brand-hero::after,
body.dm-body .brand-hero::before,
body.dm-body .brand-hero::after,
body.dm-body section.contact-hero::before,
body.dm-body section.contact-hero::after,
body.dm-body .contact-hero::before,
body.dm-body .contact-hero::after,
body.dm-body section.about-header::before,
body.dm-body section.about-header::after,
body.dm-body .about-header::before,
body.dm-body .about-header::after,
body.dm-body section.cs-hero::before,
body.dm-body section.cs-hero::after,
body.dm-body .cs-hero::before,
body.dm-body .cs-hero::after {
display: none !important;
content: none !important;
background: none !important;
}
/* Hero icindeki 3 kolonlu layout'lar full-width */
body.dm-body section.page-hero-modern .col-lg-7,
body.dm-body section.page-hero-modern .col-lg-8,
body.dm-body section.page-hero-modern .col-lg-4,
body.dm-body section.page-hero-modern .col-lg-5,
body.dm-body section.lei-hero .col-lg-7,
body.dm-body section.lei-hero .col-lg-8,
body.dm-body section.lei-hero .col-lg-4,
body.dm-body section.lei-hero .col-lg-5,
body.dm-body section.brand-hero .col-lg-4,
body.dm-body section.brand-hero .col-lg-5,
body.dm-body section.contact-hero .col-lg-4,
body.dm-body section.contact-hero .col-lg-5,
body.dm-body section.about-header .col-lg-4,
body.dm-body section.about-header .col-lg-5 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: left !important;
}
/* Sağ kolonlardaki dekoratif kutuları gizle */
body.dm-body section.page-hero-modern .col-lg-4.d-none.d-lg-flex,
body.dm-body section.page-hero-modern .col-lg-5.d-none.d-lg-block,
body.dm-body section.lei-hero .col-lg-4.d-none.d-lg-flex,
body.dm-body section.brand-hero .col-lg-4.d-none.d-lg-flex,
body.dm-body section.contact-hero .col-lg-4.d-none.d-lg-flex,
body.dm-body section.about-header .col-lg-4.d-none.d-lg-flex,
body.dm-body section[class*="hero"] .hero-image,
body.dm-body section[class*="hero"] .hero-visual,
body.dm-body section[class*="hero"] .hero-graphic,
body.dm-body [class*="hero"] .hero-stats,
body.dm-body [class*="hero"] .hero-icon-box,
body.dm-body [class*="hero"] .contact-hero-stats {
display: none !important;
}
/* Hero H1 - beyaz kompakt */
body.dm-body section.category-hero h1,
body.dm-body section.page-hero-modern h1,
body.dm-body section.lei-hero h1,
body.dm-body section.brand-hero h1,
body.dm-body section.contact-hero h1,
body.dm-body section.about-header h1,
body.dm-body section.cs-hero h1,
body.dm-body section.tools-hero h1,
body.dm-body section[class*="page-hero"] h1,
body.dm-body section[class*="page-header"] h1,
body.dm-body section.category-hero h2,
body.dm-body section.page-hero-modern h2,
body.dm-body section.lei-hero h2,
body.dm-body section.brand-hero h2,
body.dm-body section.contact-hero h2,
body.dm-body section.about-header h2 {
color: white !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
margin: 0 0 10px !important;
max-width: 720px;
text-shadow: none !important;
}
body.dm-body section[class*="hero"]:not(.dm-hero) h1 span,
body.dm-body section[class*="hero"]:not(.dm-hero) h1 em,
body.dm-body section.about-header h1 span,
body.dm-body section.about-header h1 em {
color: #7EC5FF !important;
font-style: normal !important;
font-weight: 800 !important;
}
/* Hero badge - camsi pill */
body.dm-body section.category-hero .hero-badge,
body.dm-body section.page-hero-modern .hero-badge,
body.dm-body section.lei-hero .hero-badge,
body.dm-body section.brand-hero .hero-badge,
body.dm-body section.contact-hero .hero-badge,
body.dm-body section.about-header .hero-badge,
body.dm-body section.cs-hero .hero-badge,
body.dm-body section[class*="hero"]:not(.dm-hero) .hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
background: rgba(126, 197, 255, 0.12) !important;
border: 1px solid rgba(126, 197, 255, 0.35) !important;
color: #7EC5FF !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 0 14px !important;
}
body.dm-body section[class*="hero"]:not(.dm-hero) .hero-badge::before {
content: "" !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #4ADE80 !important;
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25) !important;
display: inline-block !important;
}
/* Description */
body.dm-body section.category-hero .hero-description,
body.dm-body section.page-hero-modern .hero-description,
body.dm-body section.lei-hero .hero-description,
body.dm-body section.brand-hero .hero-description,
body.dm-body section.contact-hero .hero-description,
body.dm-body section.about-header .hero-description,
body.dm-body section.about-header p,
body.dm-body section.contact-hero p,
body.dm-body section.page-hero-modern p,
body.dm-body section.lei-hero p:not(.dm-crumb):not(.breadcrumb-item),
body.dm-body section.brand-hero p,
body.dm-body section[class*="hero"]:not(.dm-hero) .lead,
body.dm-body section[class*="hero"]:not(.dm-hero) .hero-desc {
color: rgba(255,255,255,0.75) !important;
font-size: 15px !important;
line-height: 1.55 !important;
margin: 0 !important;
max-width: 640px;
font-weight: 400 !important;
}
@media (max-width: 720px) {
body.dm-body section.category-hero,
body.dm-body section.page-hero-modern,
body.dm-body section.lei-hero,
body.dm-body section.brand-hero,
body.dm-body section.contact-hero,
body.dm-body section.about-header,
body.dm-body section[class*="page-hero"] {
padding: 24px 0 20px !important;
}
body.dm-body section[class*="hero"] h1 {
font-size: clamp(22px, 6vw, 28px) !important;
}
}
/* v24 — Hero override: hem section hem div matches */
body.dm-body .page-hero-modern h1,
body.dm-body .page-hero-modern h2,
body.dm-body .page-hero-modern h3,
body.dm-body .lei-hero h1,
body.dm-body .lei-hero h2,
body.dm-body .brand-hero h1,
body.dm-body .brand-hero h2,
body.dm-body .about-header h1,
body.dm-body .about-header h2,
body.dm-body .contact-hero h1,
body.dm-body .contact-hero h2,
body.dm-body .cs-hero h1,
body.dm-body .cs-hero h2,
body.dm-body .tools-hero h1,
body.dm-body .tools-hero h2,
body.dm-body [class*="page-hero"]:not(.dm-hero) h1,
body.dm-body [class*="page-hero"]:not(.dm-hero) h2,
body.dm-body [class*="page-header"]:not(.dm-hero) h1 {
color: white !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
margin: 0 0 10px !important;
text-shadow: none !important;
}
body.dm-body [class*="hero"]:not(.dm-hero) h1 span,
body.dm-body [class*="hero"]:not(.dm-hero) h1 em,
body.dm-body [class*="header"]:not(.dm-header) h1 span,
body.dm-body [class*="header"]:not(.dm-header) h1 em {
color: #7EC5FF !important;
font-style: normal !important;
}
body.dm-body .page-hero-modern .hero-badge,
body.dm-body .lei-hero .hero-badge,
body.dm-body .brand-hero .hero-badge,
body.dm-body .contact-hero .hero-badge,
body.dm-body .about-header .hero-badge,
body.dm-body .cs-hero .hero-badge,
body.dm-body [class*="page-hero"] .hero-badge,
body.dm-body [class*="page-header"] .hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
background: rgba(126, 197, 255, 0.12) !important;
border: 1px solid rgba(126, 197, 255, 0.35) !important;
color: #7EC5FF !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 0 14px !important;
}
body.dm-body .page-hero-modern .hero-badge::before,
body.dm-body .lei-hero .hero-badge::before,
body.dm-body .brand-hero .hero-badge::before,
body.dm-body .contact-hero .hero-badge::before,
body.dm-body .about-header .hero-badge::before,
body.dm-body .cs-hero .hero-badge::before {
content: "" !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #4ADE80 !important;
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25) !important;
display: inline-block !important;
}
body.dm-body .page-hero-modern p,
body.dm-body .page-hero-modern .hero-description,
body.dm-body .lei-hero p:not(.breadcrumb-item):not(.dm-crumb),
body.dm-body .lei-hero .hero-description,
body.dm-body .brand-hero p,
body.dm-body .brand-hero .hero-description,
body.dm-body .contact-hero p,
body.dm-body .about-header p,
body.dm-body .cs-hero p,
body.dm-body [class*="page-hero"]:not(.dm-hero) p,
body.dm-body [class*="page-hero"]:not(.dm-hero) .hero-description {
color: rgba(255,255,255,0.75) !important;
font-size: 15px !important;
line-height: 1.55 !important;
margin: 0 !important;
max-width: 640px;
font-weight: 400 !important;
}
/* v25 — hero h1 color: :not() chain ile MAX SPECIFICITY */
body.dm-body:not(#no) section.page-hero-modern:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) section.category-hero:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) section.lei-hero:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) section.brand-hero:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) section.contact-hero:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) section.about-header:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) section.cs-hero:not(#no):not(.dm-hero):not(.a) h1:not(#no),
body.dm-body:not(#no) .page-hero-modern:not(#no):not(.dm-hero):not(.a) h1.page-hero-title:not(#no),
body.dm-body:not(#no) [class*="page-hero"]:not(.dm-hero):not(#no):not(.a) h1:not(#no) {
color: #FFFFFF !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 800 !important;
}
/* Ayrica h1.page-hero-title (products-brands, blog) direkt hedef */
body.dm-body h1.page-hero-title,
body.dm-body .page-hero-title,
body.dm-body .page-hero-modern .page-hero-title,
body.dm-body .page-hero-modern h1[class],
body.dm-body section.page-hero-modern h1.page-hero-title {
color: #FFFFFF !important;
}
body.dm-body h1.page-hero-title span,
body.dm-body .page-hero-title span,
body.dm-body .page-hero-modern .page-hero-title span {
color: #7EC5FF !important;
}
/* Ayni ink kural :not() zincirini kategori-hero + page-hero-modern icin de exclude et */
body.dm-body section:not(.dm-guarantee):not(.dm-cta):not(.dm-hero):not(.dm-footer):not(.dm-ssl-check-section):not(.dark-section):not(.bg-dark):not([class*="dark-"]):not(.category-hero):not(.page-hero-modern):not(.lei-hero):not(.brand-hero):not(.contact-hero):not(.about-header):not(.cs-hero):not([class*="page-hero"]):not([class*="page-header"]) h1 {
color: var(--ink);
}
body.dm-body .page-hero-modern p,
body.dm-body .page-hero-modern .page-hero-desc,
body.dm-body .page-hero-modern .page-hero-subtitle,
body.dm-body .page-hero-modern .lead {
color: rgba(255,255,255,0.75) !important;
font-size: 15px !important;
max-width: 640px;
}
/* v26 — Kart baslik: [Logo] [BRAND eyebrow + Urun Adi stacked] */
/* dm-pcard yapisini yeniden duzenle */
.dm-pcard {
display: grid !important;
grid-template-columns: 1fr;
gap: 0 !important;
}
.dm-pcard-brand {
display: grid !important;
grid-template-columns: auto 1fr;
column-gap: 12px !important;
align-items: center !important;
padding: 18px 22px 14px !important;
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%) !important;
border-bottom: 1px solid var(--hair-soft) !important;
}
.dm-pcard-brand-logo {
grid-row: 1 / span 2;
align-self: start;
margin-top: 2px;
}
.dm-pcard-brand-name {
grid-column: 2;
font-size: 10.5px !important;
font-weight: 800 !important;
color: var(--ink-3) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin: 0 !important;
line-height: 1;
}
.dm-pcard-brand-name .tag {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
background: var(--brand-3);
color: var(--brand);
border-radius: 3px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
}
/* Aslinda h3 kartin icinde ayri element - onu brand-in altina kaydir */
.dm-pcard > h3 {
order: -1 !important; /* Not applicable in grid, use marj */
}
/* Yeni yapi: brand section'i grid, h3 brand'in altina */
.dm-pcard {
display: flex !important;
flex-direction: column !important;
}
.dm-pcard-brand {
order: 1;
}
.dm-pcard > h3 {
order: 2;
margin: -8px 22px 0 !important; /* Brand'e cok yakin, ust padding uygulanmasin */
padding: 0 0 14px !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.015em !important;
line-height: 1.25 !important;
min-height: 42px;
border-bottom: 1px solid var(--hair-soft);
background: white;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dm-pcard > .rating { order: 3; margin: 12px 22px 0 !important; }
.dm-pcard > ul { order: 4; }
.dm-pcard-foot { order: 5; }
/* Actually better: taşınabilir yapı - h3 brand-in DIREKT altında, arka plan bg-alt */
.dm-pcard-brand {
padding-bottom: 6px !important;
border-bottom: 0 !important;
}
.dm-pcard > h3 {
margin: 0 22px 0 !important;
padding: 4px 0 14px 0 !important;
background: linear-gradient(180deg, transparent 0%, var(--bg-alt) 100%);
background: transparent;
border-bottom: 1px solid var(--hair-soft);
}
/* Brand + h3 combined effect */
.dm-pcard-brand + h3 {
padding-left: 22px !important;
padding-right: 22px !important;
margin: 0 !important;
background: linear-gradient(0deg, transparent 0%, transparent 100%);
padding-bottom: 16px !important;
padding-top: 0 !important;
}
/* Ustki brand section h3 offset — sol paddingi logo genisligi + gap kadar bosluk */
.dm-pcard-brand ~ h3 {
padding-left: 62px !important; /* 40 logo + 12 gap + 10 spacing */
}
@media (max-width: 640px) {
.dm-pcard-brand ~ h3 { padding-left: 22px !important; }
}
/* v27 — Yeni kart yapisi: brand-info stacked (BRAND eyebrow + h3) */
.dm-pcard-brand {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 18px 22px 16px !important;
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%) !important;
border-bottom: 1px solid var(--hair-soft) !important;
}
.dm-pcard-brand-logo {
flex-shrink: 0;
width: 40px !important;
height: 40px !important;
margin-top: 2px;
}
.dm-pcard-brand-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.dm-pcard-brand-info .dm-pcard-brand-name {
font-size: 10.5px !important;
font-weight: 800 !important;
color: var(--ink-3) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
line-height: 1 !important;
margin: 0 !important;
}
.dm-pcard-brand-info .dm-pcard-brand-name .tag {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: var(--brand-3);
color: var(--brand);
border-radius: 3px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
font-family: "JetBrains Mono", monospace;
}
.dm-pcard-brand-info h3 {
margin: 0 !important;
padding: 0 !important;
font-size: 15.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.015em !important;
line-height: 1.28 !important;
min-height: auto !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
border: 0 !important;
background: transparent !important;
}
.dm-pcard-brand-info h3 a {
color: inherit !important;
text-decoration: none !important;
}
.dm-pcard-brand-info h3 a:hover {
color: var(--brand) !important;
}
/* Eski dis h3 gizle (yeni yapida brand-info icinde) */
.dm-pcard > h3 {
display: none !important;
}
/* Yeni yapida ic h3 gorunur olsun */
.dm-pcard-brand-info h3 {
display: -webkit-box !important;
}
/* v28 — Logo ve brand adi kaldirildi, urun adi + tip inline */
.dm-pcard-brand {
padding: 18px 22px 14px !important;
display: block !important;
border-bottom: 1px solid var(--hair-soft) !important;
background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 100%) !important;
}
.dm-pcard-brand-info {
display: block !important;
}
.dm-pcard-brand-info h3 {
margin: 0 !important;
padding: 0 !important;
font-size: 16.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.015em !important;
line-height: 1.35 !important;
min-height: 46px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.dm-pcard-brand-info h3 a {
color: inherit !important;
text-decoration: none !important;
}
.dm-pcard-brand-info h3 a:hover { color: var(--brand) !important; }
/* Dogrulama tipi (DV/OV/EV) inline pill - urun adinin yaninda */
.dm-pcard-vtype {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
font-family: "JetBrains Mono", monospace;
vertical-align: 2px;
margin-left: 4px;
white-space: nowrap;
line-height: 1.3;
}
.dm-pcard-vtype-dv { background: var(--brand-3); color: var(--brand); }
.dm-pcard-vtype-ov { background: var(--gold-soft); color: var(--gold-dark); }
.dm-pcard-vtype-ev { background: var(--gold-dark); color: white; }
.dm-pcard-vtype-wildcard { background: #F0E7FE; color: #6B21A8; }
.dm-pcard-vtype-multi, .dm-pcard-vtype-san { background: #FEE7F1; color: #9F1239; }
.dm-pcard-vtype-codesigning, .dm-pcard-vtype-cs { background: #E0F2FE; color: #075985; }
.dm-pcard-vtype-evcodesigning { background: var(--gold-dark); color: white; }
/* Logo + brand-name kalintilari gizle */
.dm-pcard .dm-pcard-brand-logo,
.dm-pcard .dm-pcard-brand-name { display: none !important; }
/* v29 — Hero desc/subtitle max-specificity fix (marka + kategori sayfaları koyu metin fix) */
body.dm-body section.page-hero-modern:not(#x) p.page-hero-desc,
body.dm-body section.page-hero-modern:not(#x) .page-hero-desc,
body.dm-body section.page-hero-modern:not(#x) p.page-hero-subtitle,
body.dm-body section.page-hero-modern:not(#x) .page-hero-subtitle,
body.dm-body section.brand-hero:not(#x) p.hero-description,
body.dm-body section.brand-hero:not(#x) p.page-hero-desc,
body.dm-body section.category-hero:not(#x) p.page-hero-desc,
body.dm-body section.category-hero:not(#x) .hero-description,
body.dm-body section.lei-hero:not(#x) p.page-hero-desc,
body.dm-body section.lei-hero:not(#x) .hero-description,
body.dm-body section.contact-hero:not(#x) p.page-hero-desc,
body.dm-body section.about-header:not(#x) p.page-hero-desc,
body.dm-body section.cs-hero:not(#x) p.page-hero-desc,
body.dm-body section[class*="page-hero"]:not(.dm-hero):not(#x) p.page-hero-desc,
body.dm-body section[class*="page-hero"]:not(.dm-hero):not(#x) .page-hero-desc {
color: rgba(255, 255, 255, 0.82) !important;
opacity: 1 !important;
}
/* v30 — Admin yönetilebilir sayfa blokları (page_blocks) */
.dm-page-block { padding: 48px 0; }
.dm-block-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.dm-block-head { text-align: center; margin-bottom: 28px; }
.dm-block-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 8px; }
.dm-block-sub { font-size: 15px; color: var(--ink-3); max-width: 640px; margin: 0 auto; line-height: 1.55; }
.dm-block-body { color: var(--ink-2); line-height: 1.7; }
.dm-block-body img { max-width: 100%; height: auto; border-radius: 10px; }
.dm-block-body h2, .dm-block-body h3 { color: var(--ink); font-weight: 700; }
.dm-block-body a { color: var(--brand); }
.dm-block-body ul, .dm-block-body ol { padding-left: 20px; }
.dm-block-body table { width: 100%; border-collapse: collapse; }
.dm-block-body table td, .dm-block-body table th { border: 1px solid var(--hair); padding: 8px 12px; }
.dm-blk-desktop-only { display: block; }
.dm-blk-mobile-only { display: none; }
@media (max-width: 720px) {
.dm-page-block { padding: 32px 0; }
.dm-blk-desktop-only { display: none; }
.dm-blk-mobile-only { display: block; }
}
/* v31 — Yıldız/rating kaldır (tüm dm-pcard'larda) + fiyatı biraz daha küçült */
.dm-pcard .rating { display: none !important; }
.dm-pcard-price .row b { font-size: 20px !important; }
/* ============================================================
v32 — BOOTSTRAP COMPAT SHIM
Bootstrap CSS sitede yüklü değil; .row/.col-*/.text-*/.bg-* gibi
yaygın sınıflar çalışmıyordu. Bu katman onları standart Bootstrap
davranışıyla sağlar. Grid sadece kolon içeren .row'lara uygulanır
(:has) — böylece .dm-pcard-price .row gibi özel kullanımlar bozulmaz.
============================================================ */
/* .row → flex (Bootstrap grid). Kolon içermeyen özel .row'lar (ör. .dm-pcard-price .row)
zaten kendi flex kuralına sahip; global flex onları bozmaz. */
body.dm-body .row {
display: flex; flex-wrap: wrap; align-items: stretch;
}
body.dm-body .row > [class*="col-"], body.dm-body .row > .col {
padding-left: 12px; padding-right: 12px; box-sizing: border-box;
}
body.dm-body .row > .col { flex: 1 0 0%; max-width: 100%; }
/* Fiyat satırı ve diğer inline .row kullanımlarını koru */
body.dm-body .dm-pcard-price .row { display: flex; flex-wrap: nowrap; align-items: baseline; }
.g-0{margin-left:0;margin-right:0;} .g-0>*{padding-left:0;padding-right:0;}
/* Kolon genişlikleri — mevcut body.dm-body [class*=col-] max-width:100% kuralını yenmek için body.dm-body öneki + !important.
Mobil stacking (@media max-width:720px, satır ~875) korunur çünkü bu kurallar min-width media içinde. */
body.dm-body .col-12{flex:0 0 100%!important;max-width:100%!important;}
body.dm-body .col-6{flex:0 0 50%!important;max-width:50%!important;}
body.dm-body .col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important;}
body.dm-body .col-3{flex:0 0 25%!important;max-width:25%!important;}
body.dm-body .col-auto{flex:0 0 auto!important;width:auto!important;max-width:100%!important;}
@media(min-width:768px){
body.dm-body .col-md-3{flex:0 0 25%!important;max-width:25%!important;}
body.dm-body .col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important;}
body.dm-body .col-md-6{flex:0 0 50%!important;max-width:50%!important;}
}
@media(min-width:992px){
body.dm-body .col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important;}
body.dm-body .col-lg-3{flex:0 0 25%!important;max-width:25%!important;}
body.dm-body .col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important;}
body.dm-body .col-lg-5{flex:0 0 41.6667%!important;max-width:41.6667%!important;}
body.dm-body .col-lg-6{flex:0 0 50%!important;max-width:50%!important;}
body.dm-body .col-lg-7{flex:0 0 58.3333%!important;max-width:58.3333%!important;}
body.dm-body .col-lg-8{flex:0 0 66.6667%!important;max-width:66.6667%!important;}
body.dm-body .col-lg-10{flex:0 0 83.3333%!important;max-width:83.3333%!important;}
body.dm-body .col-lg-12{flex:0 0 100%!important;max-width:100%!important;}
}
/* Flex utilities */
.d-flex{display:flex!important;}
.d-inline-flex{display:inline-flex!important;}
.d-block{display:block!important;}
.d-none{display:none!important;}
.d-grid{display:grid!important;}
@media(min-width:992px){.d-lg-block{display:block!important;}.d-lg-flex{display:flex!important;}.d-lg-none{display:none!important;}}
.flex-column{flex-direction:column!important;}
.flex-wrap{flex-wrap:wrap!important;}
.flex-shrink-0{flex-shrink:0!important;}
.align-items-center{align-items:center!important;}
.align-items-start{align-items:flex-start!important;}
.justify-content-center{justify-content:center!important;}
.justify-content-between{justify-content:space-between!important;}
.gap-2{gap:.5rem!important;}.gap-3{gap:1rem!important;}.gap-4{gap:1.5rem!important;}
/* Text utilities */
.text-center{text-align:center!important;}
.text-start{text-align:left!important;}
.text-end{text-align:right!important;}
.text-white{color:#fff!important;}
.text-white-50{color:rgba(255,255,255,.6)!important;}
.text-muted{color:#64748b!important;}
.text-dark{color:#1a2740!important;}
.text-primary{color:var(--brand)!important;}
.text-success{color:var(--cta)!important;}
.fw-bold{font-weight:700!important;}
.fw-semibold{font-weight:600!important;}
.fw-normal{font-weight:400!important;}
.lead{font-size:1.15rem;font-weight:400;}
.small{font-size:.875em;}
.text-nowrap{white-space:nowrap!important;}
/* Background & border */
.bg-white{background-color:#fff!important;}
.bg-light{background-color:#f8fafc!important;}
.bg-dark{background-color:#0f172a!important;}
.bg-primary{background-color:var(--brand)!important;}
.rounded{border-radius:.375rem!important;}
.rounded-3{border-radius:.5rem!important;}
.rounded-4{border-radius:.75rem!important;}
.rounded-circle{border-radius:50%!important;}
.border{border:1px solid #e2e8f0!important;}
.border-0{border:0!important;}
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;}
.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.1)!important;}
/* Sizing */
.w-100{width:100%!important;}
.h-100{height:100%!important;}
.mw-100{max-width:100%!important;}
.img-fluid{max-width:100%;height:auto;}
.mx-auto{margin-left:auto!important;margin-right:auto!important;}
/* Spacing (0-5 → 0,.25,.5,1,1.5,3rem) */
.p-0{padding:0!important;}.p-1{padding:.25rem!important;}.p-2{padding:.5rem!important;}.p-3{padding:1rem!important;}.p-4{padding:1.5rem!important;}.p-5{padding:3rem!important;}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important;}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important;}.py-3{padding-top:1rem!important;padding-bottom:1rem!important;}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}.py-5{padding-top:3rem!important;padding-bottom:3rem!important;}
.px-3{padding-left:1rem!important;padding-right:1rem!important;}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important;}
.m-0{margin:0!important;}.mx-auto{margin-left:auto!important;margin-right:auto!important;}
.mb-0{margin-bottom:0!important;}.mb-1{margin-bottom:.25rem!important;}.mb-2{margin-bottom:.5rem!important;}.mb-3{margin-bottom:1rem!important;}.mb-4{margin-bottom:1.5rem!important;}.mb-5{margin-bottom:3rem!important;}
.mt-1{margin-top:.25rem!important;}.mt-2{margin-top:.5rem!important;}.mt-3{margin-top:1rem!important;}.mt-4{margin-top:1.5rem!important;}.mt-5{margin-top:3rem!important;}
.me-1{margin-right:.25rem!important;}.me-2{margin-right:.5rem!important;}.me-3{margin-right:1rem!important;}
.ms-1{margin-left:.25rem!important;}.ms-2{margin-left:.5rem!important;}.ms-auto{margin-left:auto!important;}
/* v33 — Marka rengi tutarlılığı: --primary-color tanımsızdı (blog vb. mor #667eea fallback kullanıyordu) */
:root { --primary-color: #0D5EAF; --primary-dark: #0A4A8A; }
.bp-prose h2 { border-bottom-color: #0D5EAF !important; }
.bp-prose blockquote { border-left-color: #0D5EAF !important; }
/* ============================================================
v34 — HAZIR BLOK ŞABLONLARI MODERN POLISH (block_renderer.php)
============================================================ */
body.dm-body [class^="block-"], body.dm-body [class*=" block-"] { position: relative; }
body.dm-body [class^="block-"] .container { max-width: 1240px; }
/* Bölüm başlıkları */
body.dm-body [class^="block-"] h2:not(.display-5):not([class*="display"]) {
font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
}
body.dm-body [class^="block-"] .section-header,
body.dm-body [class^="block-"] > .container > .text-center:first-child { margin-bottom: 40px; }
/* Trust badges — sade ikonlar → marka renkli, hover'lı kartlar */
body.dm-body .block-trust-badges { padding: 32px 0 !important; background: var(--bg-alt) !important; border-color: var(--hair-soft) !important; }
body.dm-body .block-trust-badges .col-6 { transition: transform .18s; }
body.dm-body .block-trust-badges .col-6:hover { transform: translateY(-4px); }
body.dm-body .block-trust-badges i {
color: var(--brand) !important; opacity: 1 !important;
background: var(--brand-3); width: 64px; height: 64px; border-radius: 16px;
display: inline-flex !important; align-items: center; justify-content: center;
font-size: 24px !important; margin: 0 auto 12px !important;
}
body.dm-body .block-trust-badges small { color: var(--ink-2) !important; font-weight: 600; font-size: 13px; }
/* Trust stats — büyük, modern sayaçlar */
body.dm-body .block-trust-stats { background: linear-gradient(135deg, var(--brand) 0%, var(--cta) 100%) !important; border-radius: 0; }
body.dm-body .block-trust-stats h2, body.dm-body .block-trust-stats .display-5 {
font-size: clamp(32px, 5vw, 48px) !important; font-weight: 800 !important; letter-spacing: -0.02em;
}
body.dm-body .block-trust-stats p { font-size: 14px; font-weight: 500; }
/* Feature blokları — modern kartlar */
body.dm-body .block-features-icon-box,
body.dm-body .block-features-cards,
body.dm-body .block-features-4,
body.dm-body .block-features { padding: 56px 0 !important; }
body.dm-body .block-features-icon-box .col-md-6 > .d-flex,
body.dm-body .block-features-cards .col-md-6,
body.dm-body .block-features-cards .col-lg-4,
body.dm-body .block-features .col-md-6 {
background: #fff; border: 1px solid var(--hair); border-radius: 16px;
padding: 24px; transition: transform .2s, box-shadow .2s; height: 100%;
}
body.dm-body .block-features-icon-box .col-md-6 > .d-flex:hover,
body.dm-body .block-features-cards .col-md-6:hover,
body.dm-body .block-features-cards .col-lg-4:hover {
transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(13,94,175,0.28); border-color: var(--brand);
}
/* Feature ikon kutuları → gradient */
body.dm-body [class^="block-"] .rounded-3[style*="width:48px"],
body.dm-body [class^="block-"] .feature-icon,
body.dm-body [class^="block-"] .icon-box {
background: linear-gradient(135deg, var(--brand), var(--cta)) !important;
color: #fff !important; box-shadow: 0 8px 20px -8px rgba(13,94,175,.5);
}
/* CTA banner — modern gradient + buton */
body.dm-body .block-cta-banner, body.dm-body .block-cta-split {
padding: 56px 0 !important;
}
body.dm-body .block-cta-banner .btn, body.dm-body .block-cta-split .btn,
body.dm-body [class^="block-"] a.btn-light, body.dm-body [class^="block-"] a.btn-primary {
border-radius: 10px !important; font-weight: 700 !important; padding: 12px 24px !important;
transition: transform .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
body.dm-body [class^="block-"] a.btn:hover { transform: translateY(-2px); }
/* Hero blokları */
body.dm-body .block-hero-gradient, body.dm-body .block-hero-split, body.dm-body .block-hero-stats {
padding: 64px 0 !important;
}
/* FAQ blok — modern accordion görünümü */
body.dm-body .block-faq .accordion-item { border: 1px solid var(--hair) !important; border-radius: 12px !important; margin-bottom: 12px; overflow: hidden; }
body.dm-body .block-faq .accordion-button { font-weight: 600; }
body.dm-body .block-faq .accordion-button:not(.collapsed) { background: var(--brand-3) !important; color: var(--brand) !important; }
/* v35 — Ürün açıklaması HTML render (prose) */
.dm-pd-desc { color: var(--ink-2); line-height: 1.75; font-size: 15px; }
.dm-pd-desc h2, .dm-pd-desc h3, .dm-pd-desc h4 { color: var(--ink); font-weight: 700; margin: 22px 0 10px; line-height: 1.3; }
.dm-pd-desc h2 { font-size: 20px; } .dm-pd-desc h3 { font-size: 17px; } .dm-pd-desc h4 { font-size: 15px; }
.dm-pd-desc p { margin: 0 0 14px; }
.dm-pd-desc ul, .dm-pd-desc ol { padding-left: 22px; margin: 0 0 14px; }
.dm-pd-desc li { margin-bottom: 6px; }
.dm-pd-desc a { color: var(--brand); text-decoration: underline; }
.dm-pd-desc strong, .dm-pd-desc b { color: var(--ink); font-weight: 700; }
.dm-pd-desc table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.dm-pd-desc th, .dm-pd-desc td { border: 1px solid var(--hair); padding: 8px 12px; text-align: left; }
.dm-pd-desc img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }
.dm-pd-desc blockquote { border-left: 4px solid var(--brand); padding: 10px 18px; margin: 14px 0; background: var(--bg-alt); border-radius: 0 8px 8px 0; }
/* ============================================================
v36 — BOOTSTRAP ACCORDION (SSS) — Bootstrap yüklü değil, temiz stil
============================================================ */
body.dm-body .accordion { display: block; }
body.dm-body .accordion-item {
background: #fff !important; border: 1px solid var(--hair) !important;
border-radius: 12px !important; margin-bottom: 12px; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body.dm-body .accordion-header { margin: 0; }
body.dm-body .accordion-button {
width: 100%; text-align: left; border: 0 !important; outline: 0 !important;
background: #fff !important; color: var(--ink) !important;
padding: 18px 22px !important; font-size: 15.5px !important; font-weight: 600 !important;
cursor: pointer; display: flex !important; align-items: center; justify-content: space-between;
gap: 12px; box-shadow: none !important; -webkit-appearance: none; appearance: none;
font-family: inherit; line-height: 1.4; transition: background .15s, color .15s;
}
body.dm-body .accordion-button:hover { background: var(--bg-alt) !important; }
body.dm-body .accordion-button:not(.collapsed) { background: var(--brand-3) !important; color: var(--brand) !important; }
body.dm-body .accordion-button::after {
content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230D5EAF' stroke-width='2.5'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-position: center; background-size: 18px;
transition: transform .2s;
}
body.dm-body .accordion-button.collapsed::after { transform: rotate(-90deg); }
body.dm-body .accordion-collapse { display: block; }
body.dm-body .accordion-collapse:not(.show) { display: none; }
body.dm-body .accordion-body {
padding: 4px 22px 20px !important; color: var(--ink-2) !important;
font-size: 14.5px; line-height: 1.65;
}
body.dm-body .accordion-body strong, body.dm-body .accordion-body b { color: var(--ink); }
/* Mor/ziyaret link rengi ve alt çizgiyi ez */
body.dm-body .accordion-button:visited, body.dm-body .accordion-button:focus { color: var(--ink) !important; text-decoration: none !important; }
/* ============================================================
v37 — Dekoratif hero görsellerini kaldır (temiz, metin odaklı hero)
Kod-imzalama daire+ikon+tik görseli, hero-icon-box, hero-visual vb.
============================================================ */
body.dm-body .hero-illustration,
body.dm-body .hero-visual,
body.dm-body .hero-icon-box,
body.dm-body .code-signing-visual,
body.dm-body .cloud-cs-visual,
body.dm-body .code-signing-hero .code-signing-visual { display: none !important; }
/* Görsel kolonu (d-none d-lg-flex/block col-lg-5/4) gizle */
body.dm-body section[class*="hero"] .col-lg-5.d-none,
body.dm-body section[class*="hero"] .col-lg-4.d-none,
body.dm-body .category-hero .col-lg-5.d-none,
body.dm-body .category-hero .col-lg-4.d-none,
body.dm-body .page-hero-modern .col-lg-5.d-none,
body.dm-body .page-hero-modern .col-lg-4.d-none { display: none !important; }
/* Metin kolonunu tam genişlik yap */
body.dm-body section[class*="hero"] .row > .col-lg-7,
body.dm-body section[class*="hero"] .row > .col-lg-8,
body.dm-body .category-hero .row > .col-lg-7,
body.dm-body .page-hero-modern .row > .col-lg-7,
body.dm-body .page-hero-modern .row > .col-lg-8 { flex: 0 0 100% !important; max-width: 100% !important; }
/* v38 — Hero badge açık-mavi (koyu hero varyantlarında da okunur; category-hero dışı da) */
body.dm-body .page-hero-modern .hero-badge,
body.dm-body [class*="page-hero"] .hero-badge,
body.dm-body .code-signing-hero .hero-badge,
body.dm-body .lei-hero .hero-badge,
body.dm-body .brand-hero .hero-badge,
body.dm-body .contact-hero .hero-badge,
body.dm-body .about-header .hero-badge,
body.dm-body .cs-hero .hero-badge {
background: rgba(126,197,255,0.12) !important;
border: 1px solid rgba(126,197,255,0.35) !important;
color: #7EC5FF !important;
}
body.dm-body .page-hero-modern .hero-badge i,
body.dm-body [class*="page-hero"] .hero-badge i,
body.dm-body .code-signing-hero .hero-badge i,
body.dm-body .lei-hero .hero-badge i,
body.dm-body .brand-hero .hero-badge i,
body.dm-body .contact-hero .hero-badge i { color: #7EC5FF !important; }
/* v39 — Hero badge açık-mavi garantisi (ultra-spesifik, koyu hero span kuralını yener) */
body.dm-body section[class*="hero"]:not(.dm-hero) span.hero-badge,
body.dm-body section.page-hero-modern span.hero-badge,
body.dm-body section.code-signing-hero span.hero-badge,
body.dm-body section[class*="page-hero"] span.hero-badge {
color: #7EC5FF !important;
}
/* v40 — Kayıt/giriş formu mobil uyum: masaüstü 2/3 sütunlu inline gridleri
mobilde tek sütuna indir (inline style'ı ez), inputlar tam genişlik + dokunmatik */
@media (max-width: 600px) {
/* İki sütunlu alan grupları (ad+telefon, şifre+şifre tekrar, firma/vergi, şehir/posta/ülke) */
body.dm-body .dm-auth-card [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* Bireysel/Kurumsal radio satırı yine 2'li kalabilir ama sıkışmasın */
body.dm-body .dm-auth-card {
padding: 24px 18px !important;
max-width: 100% !important;
}
body.dm-body .dm-auth-field input:not([type="radio"]):not([type="checkbox"]),
body.dm-body .dm-auth-field select,
body.dm-body .dm-auth-input-wrap input {
width: 100% !important;
box-sizing: border-box !important;
font-size: 16px !important; /* iOS zoom engelle */
}
/* Radio/checkbox doğal boyutunda kalsın (hesap tipi kutuları kaymasın) */
body.dm-body .dm-auth-field input[type="radio"],
body.dm-body .dm-auth-field input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
/* Hesap tipi seçenekleri: iki kutu YAN YANA kalsın (collapse'i ez), ortalı ve okunaklı */
body.dm-body .dm-auth-field > div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
body.dm-body .dm-auth-field > div[style*="grid-template-columns:1fr 1fr"] > label {
justify-content: center !important;
font-size: 13.5px !important;
padding: 12px 8px !important;
}
body.dm-body .dm-auth-form-wrap { padding: 28px 16px !important; }
body.dm-body .dm-auth-topbar { flex-wrap: wrap; gap: 8px; }
}
/* v41 — Menü ikonları + rozet (modern nav, admin menüsü ile uyumlu) */
body.dm-body .dm-nav-ico {
font-size: 13px;
margin-right: 7px;
color: #7C93B0;
transition: color .15s ease;
width: 15px;
text-align: center;
}
body.dm-body .dm-nav-item:hover .dm-nav-ico,
body.dm-body .dm-nav-item.active .dm-nav-ico,
body.dm-body .dm-nav-link:hover .dm-nav-ico { color: var(--brand, #0D5EAF); }
body.dm-body .dm-nav-badge {
display: inline-block;
margin-left: 7px;
padding: 1px 7px;
font-size: 10px;
font-weight: 800;
line-height: 1.5;
letter-spacing: .3px;
color: #fff;
border-radius: 999px;
vertical-align: middle;
text-transform: uppercase;
}
/* Mobil panel grup (admin menüsü açılır alt liste) */
body.dm-body .dm-mp-group { border-bottom: 1px solid var(--hair, #e8eef5); }
body.dm-body .dm-mp-group > summary { list-style: none; cursor: pointer; }
body.dm-body .dm-mp-group > summary::-webkit-details-marker { display: none; }
body.dm-body .dm-mp-group[open] > summary { color: var(--brand, #0D5EAF); }
body.dm-body .dm-mp-sub { padding: 2px 0 8px 30px; display: flex; flex-direction: column; }
body.dm-body .dm-mp-sublink {
padding: 8px 4px; font-size: 14px; color: #44576e; text-decoration: none;
}
body.dm-body .dm-mp-sublink:hover { color: var(--brand, #0D5EAF); }
/* v42 — Menü taşma/kelime-kırılma fix: nowrap + kompakt padding + rozet düzelt
(DB menüsü ikon + uzun etiketlerle satır ortasından kırılıyordu) */
body.dm-body .dm-mainnav .dm-nav-link {
white-space: nowrap !important; /* "Anasay/fa" kırılmasını engelle */
padding: 0 8px !important; /* kompakt, çok öğe sığsın */
font-size: 12.5px;
gap: 3px !important;
}
body.dm-body .dm-mainnav .dm-nav-item { flex: 0 0 auto; }
body.dm-body .dm-mainnav .dm-nav-link::after { left: 8px !important; right: 8px !important; }
body.dm-body .dm-nav-ico { margin-right: 3px !important; font-size: 11.5px; }
body.dm-body .dm-nav-cta-link { padding: 0 8px !important; white-space: nowrap; font-size: 12.5px; }
/* Güvenlik ağı: çok öğe sığmazsa yatay kesme/kelime kırma yerine 2. satıra düzgün insin */
body.dm-body .dm-mainnav .dm-container {
flex-wrap: wrap;
height: auto !important;
min-height: 54px;
row-gap: 0;
}
/* Rozet: tek satır küçük pill (dev yeşil daireye dönmesin) */
body.dm-body .dm-nav-badge {
white-space: nowrap !important;
line-height: 1.4 !important;
padding: 1px 6px !important;
font-size: 9px !important;
margin-left: 6px !important;
}
/* Çok dar ekranlarda (ama hâlâ masaüstü) biraz daha sıkıştır */
@media (max-width: 1100px) {
body.dm-body .dm-mainnav .dm-nav-link { padding: 0 9px !important; font-size: 13px; }
body.dm-body .dm-nav-ico { margin-right: 4px !important; font-size: 12px; }
}
/* v43 — Mobil çekmece: düz linkleri (Anasayfa, İletişim, Blog, Destek…) accordion
satırlarıyla hizala. .dm-mp-details sarmalayıcısı 8px yatay padding'e sahip;
.dm-mp-item'da yoktu → 8px sola kayıyordu. margin ile eşitle. */
body.dm-body .dm-mp-item { margin-left: 8px !important; margin-right: 8px !important; }
/* v44 — Mobil çekmece: TÜM etiketleri ikonun hemen sağına sola-yasla (space-between
yerine flex-start), ok'u en sağa it; düz linkler (Anasayfa/İletişim) accordion
başlıklarıyla aynı koyu renk (mavi link rengi değil). */
body.dm-body .dm-mp-item,
body.dm-body .dm-mp-details > summary {
justify-content: flex-start !important;
}
body.dm-body .dm-mp-details > summary::after {
margin-left: auto !important;
}
body.dm-body .dm-mp-item {
color: var(--ink) !important;
font-weight: 600 !important;
}
/* v45 — Araç sayfaları (CSR, SSL Checker vb.): hero ile içerik arasında boşluk.
.tool-section hero'ya bitişikti; üstten nefes payı ver. */
body.dm-body .tool-section,
body .tool-section { padding-top: 44px; }
@media (max-width: 640px){
body.dm-body .tool-section, body .tool-section { padding-top: 28px; }
}
/* v46 — Ürün kartı fiyat/CTA: modern + kırılma fix.
Fiyat "$14,35" ve "/yıl" dar kartta buton yüzünden sıkışıp satır ortasından
kırılıyordu. Fiyatı üstte tek satır, HEMEN AL'ı tam genişlik altta yap. */
body.dm-body .dm-pcard-foot {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
body.dm-body .dm-pcard-price .row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: baseline;
gap: 5px;
white-space: nowrap;
}
body.dm-body .dm-pcard-price .row b,
body.dm-body .dm-pcard-price .row .tnum,
body.dm-body .dm-pcard-price .row small {
white-space: nowrap !important;
flex: 0 0 auto;
}
body.dm-body .dm-pcard-price .row b,
body.dm-body .dm-pcard-price .row .tnum {
font-size: 26px;
line-height: 1.05;
}
body.dm-body .dm-pcard-price .row small {
font-size: 12px;
color: var(--ink-3, #7C93B0);
font-weight: 600;
}
body.dm-body .dm-pcard-foot .dm-btn,
body.dm-body .dm-pcard-foot .dm-btn-cta { width: 100%; }
/* v47 — Hesabım açılır menüsü (modern dropdown) */
body.dm-body .dm-account { position: relative; display: inline-flex; }
body.dm-body .dm-account-toggle { display: inline-flex; align-items: center; gap: 6px; }
body.dm-body .dm-acc-caret { opacity: .5; transition: transform .2s ease; }
body.dm-body .dm-account:hover .dm-acc-caret,
body.dm-body .dm-account:focus-within .dm-acc-caret { transform: rotate(180deg); opacity: 1; }
body.dm-body .dm-account-menu {
position: absolute; top: 100%; right: 0; min-width: 216px;
background: #fff; border: 1px solid var(--hair, #e8eef5); border-radius: 12px;
box-shadow: 0 14px 38px -10px rgba(26,39,64,.22); padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 300;
}
/* görünmez köprü — toggle ile menü arası boşlukta hover kopmasın */
body.dm-body .dm-account-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
body.dm-body .dm-account:hover .dm-account-menu,
body.dm-body .dm-account:focus-within .dm-account-menu { opacity: 1; visibility: visible; transform: translateY(6px); }
body.dm-body .dm-account-menu a {
display: flex; align-items: center; gap: 11px; padding: 9px 12px;
border-radius: 8px; font-size: 13.5px; font-weight: 500;
color: var(--ink-2, #44576e); text-decoration: none; white-space: nowrap;
}
body.dm-body .dm-account-menu a:hover { background: var(--bg, #f4f7fb); color: var(--brand, #0D5EAF); }
body.dm-body .dm-account-menu a i { width: 16px; text-align: center; font-size: 13px; color: var(--ink-3, #7C93B0); }
body.dm-body .dm-account-menu a:hover i { color: var(--brand, #0D5EAF); }
body.dm-body .dm-account-sep { height: 1px; background: var(--hair, #e8eef5); margin: 6px 4px; }
body.dm-body .dm-account-menu a.dm-account-logout,
body.dm-body .dm-account-menu a.dm-account-logout i { color: #dc2626; }
body.dm-body .dm-account-menu a.dm-account-logout:hover { background: #fef2f2; }
/* v48 — Ürün Blokları (ürün detay zengin içerik) */
body.dm-body .dm-pd-blocks { margin-top: 40px; }
body.dm-body .dm-pd-block { margin-bottom: 40px; }
body.dm-body .dm-pd-block-title { font-size: 22px; font-weight: 800; color: var(--ink, #1a2740); margin: 0 0 18px; letter-spacing: -.01em; }
body.dm-body .dm-pd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
body.dm-body .dm-pd-card { border: 1px solid var(--hair, #e8eef5); border-radius: 12px; padding: 20px; background: #fff; }
body.dm-body .dm-pd-card-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--brand-3, #eaf2fb); color: var(--brand, #0D5EAF); display: grid; place-items: center; font-size: 18px; margin-bottom: 12px; }
body.dm-body .dm-pd-card h3 { font-size: 16px; font-weight: 700; color: var(--ink, #1a2740); margin: 0 0 6px; }
body.dm-body .dm-pd-card p { font-size: 13.5px; color: var(--ink-2, #44576e); margin: 0; line-height: 1.6; }
body.dm-body .dm-pd-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
body.dm-body .dm-pd-steps li { display: flex; gap: 14px; align-items: flex-start; }
body.dm-body .dm-pd-step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--brand, #0D5EAF); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
body.dm-body .dm-pd-steps li b { display: block; color: var(--ink, #1a2740); font-size: 15px; margin-bottom: 2px; }
body.dm-body .dm-pd-steps li span { display: block; color: var(--ink-2, #44576e); font-size: 13.5px; line-height: 1.6; }
body.dm-body .dm-pd-specs { width: 100%; border-collapse: collapse; border: 1px solid var(--hair, #e8eef5); border-radius: 12px; overflow: hidden; }
body.dm-body .dm-pd-specs th, body.dm-body .dm-pd-specs td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--hair, #e8eef5); }
body.dm-body .dm-pd-specs th { background: var(--bg, #f4f7fb); color: var(--ink, #1a2740); font-weight: 700; width: 40%; }
body.dm-body .dm-pd-specs td { color: var(--ink-2, #44576e); }
body.dm-body .dm-pd-specs tr:last-child th, body.dm-body .dm-pd-specs tr:last-child td { border-bottom: 0; }
body.dm-body .dm-pd-faq { display: flex; flex-direction: column; gap: 10px; }
body.dm-body .dm-pd-faq-item { border: 1px solid var(--hair, #e8eef5); border-radius: 10px; background: #fff; overflow: hidden; }
body.dm-body .dm-pd-faq-item > summary { padding: 14px 18px; cursor: pointer; font-weight: 700; color: var(--ink, #1a2740); font-size: 14.5px; list-style: none; }
body.dm-body .dm-pd-faq-item > summary::-webkit-details-marker { display: none; }
body.dm-body .dm-pd-faq-item > summary::after { content: "+"; float: right; color: var(--brand, #0D5EAF); font-size: 20px; line-height: 1; }
body.dm-body .dm-pd-faq-item[open] > summary::after { content: "−"; }
body.dm-body .dm-pd-faq-a { padding: 0 18px 16px; color: var(--ink-2, #44576e); font-size: 14px; line-height: 1.7; }
body.dm-body .dm-pd-cta { text-align: center; background: linear-gradient(135deg, #0D5EAF, #1a73c7); border-radius: 16px; padding: 40px 24px; color: #fff; margin-top: 8px; }
body.dm-body .dm-pd-cta h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 10px; }
body.dm-body .dm-pd-cta p { color: rgba(255,255,255,.9); font-size: 15px; margin: 0 0 20px; }
/* v49 — "Hedefe Göre Seç" kartlarında başlangıç fiyat etiketi */
body.dm-body .dm-fit-from { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #7C93B0); margin-bottom: 2px; }