.main.product3 {
overflow-x: clip;
background: var(--paper);
}
.main.product3 .container {
box-sizing: border-box;
padding-left: 16px;
padding-right: 16px;
}
.main.product3 .container > *:only-child {
width: 100%;
min-width: 0;
}
.main.product3 section {
border-bottom: 1px solid var(--rule);
}
.main.product3 .section-head3 {
display: block;
text-align: left;
padding-top: 64px;
padding-bottom: 36px;
}
.main.product3 .section-head3 .kicker {
display: inline-block;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
.main.product3 .section-head3 h2 {
font-size: 30px;
line-height: 38px;
font-weight: 600;
letter-spacing: -0.025em;
}
.main.product3 .section-head3 p {
margin: 10px 0 0;
max-width: 560px;
font-size: 14.5px;
line-height: 24px;
color: var(--muted);
}
.main.product3 .cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 24px;
border-radius: 8px;
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.main.product3 .cta.primary {
background: var(--brand);
color: #fff;
border: 1px solid var(--brand-hover);
}
.main.product3 .cta.primary:hover {
background: var(--brand-hover);
}
.main.product3 .cta.ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--rule);
}
.main.product3 .cta.ghost:hover {
border-color: var(--ink);
}
.main.product3 .phero {
position: relative;
padding: 72px 0 60px;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.main.product3 .aurora {
display: none;
}
.main.product3 .phero-inner {
position: relative;
display: block;
text-align: left;
}
@media (min-width: 1080px) {
.main.product3 .phero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 470px;
gap: 40px;
align-items: center;
}
}
.main.product3 .phero-figur {
display: none;
}
@media (min-width: 1080px) {
.main.product3 .phero-figur {
display: block;
}
}
.main.product3 .pbread {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 22px;
font-size: 13px;
color: var(--muted);
}
.main.product3 .pbread a {
color: var(--brand);
transition: opacity .2s ease;
}
.main.product3 .pbread a:hover {
opacity: .7;
}
.main.product3 .pbread span[aria-hidden] {
color: #CFCDD8;
}
.main.product3 .pbread .aktif {
color: var(--muted);
}
.main.product3 .phero .kicker {
display: inline-block;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 18px;
}
.main.product3 .phero h1 {
max-width: 780px;
margin: 0 0 16px;
font-size: 46px;
line-height: 54px;
font-weight: 600;
letter-spacing: -0.03em;
}
.main.product3 .phero .lead {
max-width: 620px;
margin: 0 0 24px;
font-size: 16px;
line-height: 27px;
color: var(--muted);
}
.main.product3 .phero .pbadges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
}
.main.product3 .phero .pbadges span {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-secondary);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 7px 11px;
background: #fff;
}
.main.product3 .phero .pbadges span i {
font-size: 11px;
color: var(--brand);
}
.main.product3 .phero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.main.product3 .phero-note {
font-family: var(--mono);
font-size: 12.5px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.main.product3 .puan-yildiz {
display: inline-flex;
gap: 2px;
color: #F0B429;
font-size: 13px;
}
.main.product3 .puan-yildiz .fa-regular {
color: #D6D3E1;
}
.main.product3 .phero-puan {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: 13px;
color: var(--color-secondary);
text-decoration: none;
font-variant-numeric: tabular-nums;
transition: color .2s;
}
.main.product3 .phero-puan:hover {
color: var(--brand);
}
.main.product3 .phero-puan b {
color: var(--ink);
font-weight: 600;
}
.main.product3 .puan-ozet {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
max-width: none;
color: var(--color-secondary);
}
.main.product3 .puan-ozet .puan-yildiz {
font-size: 16px;
}
.main.product3 .puan-ozet strong {
font-size: 18px;
color: var(--ink);
font-weight: 600;
}
.main.product3 .puan-ozet small {
flex-basis: 100%;
font-size: 12.5px;
color: var(--muted);
}
.main.product3 .yorum-izgara {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding-bottom: 12px;
}
.main.product3 .yorum-daha {
justify-content: center;
padding: 6px 0 12px;
}
.main.product3 .yorum-daha .cta {
font: inherit;
font-size: 14.5px;
font-weight: 500;
cursor: pointer;
}
.main.product3 .yorum-daha .cta small {
font-weight: 400;
opacity: .7;
margin-left: 4px;
}
.main.product3 .yorum-daha .cta.yukleniyor i {
animation: yorum-don 1s linear infinite;
}
.main.product3 .yorum-daha .cta:disabled {
opacity: .6;
cursor: progress;
}
@keyframes yorum-don {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.main.product3 .yorum-daha .cta.yukleniyor i { animation: none; }
}
.main.product3 .yorum-kart {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 24px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 16px;
transition: border-color .2s, box-shadow .2s;
}
.main.product3 .yorum-kart:hover {
border-color: #DDD8F0;
box-shadow: 0 10px 28px rgba(35, 32, 67, .06);
}
.main.product3 .yorum-kart header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.main.product3 .yorum-kart .yorum-yildiz {
display: inline-flex;
gap: 2px;
color: #F0B429;
font-size: 13px;
}
.main.product3 .yorum-kart .yorum-yildiz .fa-regular {
color: #D6D3E1;
}
.main.product3 .yorum-kart time {
font-family: var(--mono);
font-size: 11.5px;
color: var(--muted);
}
.main.product3 .yorum-kart p {
margin: 0;
font-size: 14px;
line-height: 23px;
color: var(--color-secondary);
white-space: pre-line;
flex: 1;
}
.main.product3 .yorum-kart footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 12px;
font-size: 12.5px;
font-weight: 500;
color: var(--ink);
padding-top: 10px;
border-top: 1px solid var(--rule);
}
.main.product3 .yorum-kart footer > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.main.product3 .yorum-kart footer > span i {
color: #1E9E62;
}
.main.product3 .yorum-kart .yorum-site {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 400;
color: var(--muted);
text-decoration: none;
transition: color .2s;
}
.main.product3 .yorum-kart .yorum-site:hover {
color: var(--brand);
}
@media (max-width: 991px) {
.main.product3 .yorum-izgara {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.main.product3 .yorum-izgara {
grid-template-columns: 1fr;
}
}
.main.product3 .phero-note b {
color: var(--ink);
font-weight: 600;
}
.main.product3 .indirim {
position: relative;
display: block;
width: min(1148px, calc(100% - 64px));
margin: 26px auto 0;
text-align: center;
background: #F1F0F4;
border: 1px solid var(--rule);
border-radius: 12px;
padding: 28px 20px 20px;
overflow: hidden;
}
.main.product3 .indirim strong {
display: block;
font-size: 19px;
line-height: 28px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink) !important;
margin-bottom: 4px;
}
.main.product3 .indirim p {
font-size: 13.5px;
line-height: 21px;
color: var(--muted);
margin-bottom: 10px;
}
.main.product3 .indirim .flipdown {
margin: 0 auto;
font-family: var(--mono);
font-weight: 600;
}
.main.product3 .indirim .flipdown .rotor-group-heading:before {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.main.product3 .indirim .flipdown .rotor,
.main.product3 .indirim .flipdown .rotor-top,
.main.product3 .indirim .flipdown .rotor-leaf-front {
color: var(--ink);
background-color: #fff;
}
.main.product3 .indirim .flipdown .rotor-bottom,
.main.product3 .indirim .flipdown .rotor-leaf-rear {
color: var(--ink);
background-color: #E7E5EC;
}
.main.product3 .indirim .flipdown .rotor:after {
border-top: solid 1px rgba(19, 17, 24, 0.14);
}
.main.product3 .indirim .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
.main.product3 .indirim .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
background-color: #C9C6D4;
}
.main.product3 .pricing {
padding-bottom: 64px;
}
.main.product3 .pricing .container {
flex-wrap: wrap;
}
#paket-karsilastirma {
scroll-margin-top: 96px;
}
.main.product3 .pricing-note {
display: block;
width: 100%;
text-align: left;
margin: 18px 0 0;
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.main.product3 .pricing-note.dev {
color: var(--brand);
margin-bottom: -8px;
}
.main.product3 .pricing-note.dev i {
color: var(--brand);
}
.main.product3 .cmp-foot strong.gizli {
color: var(--muted);
font-weight: 500;
letter-spacing: -0.01em;
}
.main.product3 .buy.sm.yakinda {
background: #fff;
border: 1px dashed var(--rule);
color: var(--muted);
cursor: default;
pointer-events: none;
}
.main.product3 .pricing-note i {
color: var(--brand);
margin-right: 6px;
}
.main.product3 .bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding-bottom: 64px;
border-top: 1px solid var(--rule);
border-left: 1px solid var(--rule);
}
.main.product3 .tile {
position: relative;
background: transparent;
border: none;
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
border-radius: 0;
padding: 26px;
transition: background-color .2s ease;
}
.main.product3 .tile:hover {
background: #fff;
box-shadow: none;
border-color: var(--rule);
}
.main.product3 .tile.w2 {
grid-column: span 2;
}
.main.product3 .tile.h2 {
grid-row: span 2;
}
.main.product3 .tile .tico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--brand-soft);
color: var(--brand);
font-size: 16px;
margin-bottom: 16px;
}
.main.product3 .tile h3 {
font-size: 16.5px;
line-height: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.main.product3 .tile p {
font-size: 14px;
line-height: 23px;
color: var(--muted);
}
.main.product3 .tile .chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.main.product3 .tile .chips span {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--brand);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 6px 10px;
background: #fff;
}
.main.product3 .tile.dark {
background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
display: flex;
flex-direction: column;
}
.main.product3 .tile.dark:hover {
background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
}
.main.product3 .tile.dark .tico {
background: rgba(255, 255, 255, 0.08);
color: var(--brand-bright);
}
.main.product3 .tile.dark h3 {
color: #fff;
}
.main.product3 .tile.dark p {
color: rgba(255, 255, 255, 0.6);
}
.main.product3 .tile.dark ul {
margin-top: auto;
padding-top: 18px;
list-style: none;
}
.main.product3 .tile.dark ul li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
padding: 9px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.main.product3 .tile.dark ul li i {
width: 16px;
text-align: center;
color: var(--brand-bright);
font-size: 12px;
}
.main.product3 .demo-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding-bottom: 64px;
}
.main.product3 .demo-card {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 10px;
padding: 16px 18px;
text-decoration: none;
transition: border-color .2s ease;
}
.main.product3 .demo-card:hover {
border-color: var(--ink);
box-shadow: none;
}
.main.product3 .demo-card img {
width: 42px;
height: 42px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.main.product3 .demo-card div {
flex: 1;
min-width: 0;
}
.main.product3 .demo-card strong {
display: block;
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
}
.main.product3 .demo-card span {
display: block;
font-size: 12.5px;
line-height: 18px;
color: var(--muted);
margin-top: 2px;
}
.main.product3 .demo-card > i {
color: var(--muted);
font-size: 12px;
transition: transform .2s ease, color .2s ease;
}
.main.product3 .demo-card:hover > i {
color: var(--brand);
transform: translateX(3px);
}
.main.product3 .refstrip {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
gap: 12px;
padding-bottom: 64px;
}
.main.product3 .refstrip a {
display: block;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--rule);
filter: grayscale(1);
opacity: .85;
transition: filter .25s ease, opacity .25s ease, border-color .25s ease;
}
.main.product3 .refstrip a:hover {
filter: grayscale(0);
opacity: 1;
border-color: var(--ink);
}
.main.product3 .refstrip img {
display: block;
width: 150px;
height: 79px;
object-fit: cover;
}
.main.product3 .refstrip .refstrip-more {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
filter: none;
opacity: 1;
font-size: 13.5px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
padding: 0 10px;
white-space: nowrap;
}
.main.product3 .sss3 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 40px;
padding-bottom: 64px;
border-top: 1px solid var(--rule);
}
.main.product3 .sss3 details {
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
border-radius: 0;
padding: 0 4px;
height: fit-content;
}
.main.product3 .sss3 details[open] {
border-color: var(--rule);
}
.main.product3 .sss3 summary {
display: flex;
align-items: center;
gap: 12px;
padding: 17px 0;
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.main.product3 .sss3 summary::-webkit-details-marker {
display: none;
}
.main.product3 .sss3 summary::before {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 6px;
border: 1px solid var(--rule);
color: var(--brand);
font-family: var(--mono);
font-weight: 500;
}
.main.product3 .sss3 details[open] summary::before {
content: '−';
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.main.product3 .sss3 details p {
padding: 0 0 18px 34px;
font-size: 13.5px;
line-height: 23px;
color: var(--color-secondary);
}
.main.product3 .cmp {
margin: 0 0 64px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 12px;
overflow: hidden;
box-shadow: none;
}
.main.product3 .cmp-head {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.main.product3 .cmp-head span {
padding: 15px 18px;
font-size: 14px;
font-weight: 600;
color: var(--ink);
text-align: center;
}
.main.product3 .cmp-head .cmp-bos {
text-align: left;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
align-self: center;
}
.main.product3 .cmp-head .cmp-paket {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 20px 16px 18px;
}
.main.product3 .cmp-head .cmp-ad {
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.main.product3 .cmp-head .cmp-paket del {
font-size: 12.5px;
font-weight: 400;
color: var(--muted);
text-decoration-thickness: 1px;
}
.main.product3 .cmp-head .cmp-fiyat {
font-style: normal;
font-size: 22px;
font-weight: 600;
line-height: 1.2;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.main.product3 .cmp-head .cmp-fiyat.gizli {
color: var(--muted);
}
.main.product3 .cmp-head .cmp-paket small {
font-size: 11.5px;
font-weight: 400;
line-height: 1.45;
color: var(--muted);
}
.main.product3 .cmp-head .cmp-paket form {
width: 100%;
margin-top: 12px;
}
.main.product3 .cmp-head .cmp-paket .buy {
width: 100%;
}
.main.product3 .cmp-head .cmp-paket.kapali .cmp-ad {
color: var(--muted);
}
.main.product3 .cmp .ozellik {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
border-bottom: 1px solid var(--rule);
}
.main.product3 .cmp .ozellik:last-of-type {
border-bottom: none;
}
.main.product3 .cmp .ozellik > span {
display: flex;
flex-direction: column;
justify-content: center;
padding: 11px 18px;
font-size: 13.5px;
line-height: 20px;
color: var(--color-secondary);
}
.main.product3 .cmp .ozellik > span + span {
align-items: center;
text-align: center;
font-weight: 500;
border-left: 1px solid var(--rule);
}
.main.product3 .cmp .ozellik small {
font-size: 11.5px;
line-height: 16px;
font-weight: 400;
color: var(--muted);
margin-top: 2px;
}
.main.product3 .cmp .ozellik strong {
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.main.product3 .cmp .ozellik i.fa-circle-check {
font-size: 24px;
color: var(--brand);
}
.main.product3 .cmp .ozellik i.fa-circle-xmark {
font-size: 24px;
color: #CFCDD8;
}
.main.product3 .cmp .subtitle {
display: flex;
align-items: baseline;
gap: 10px;
padding: 11px 18px;
background: var(--paper);
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brand);
border-bottom: 1px solid var(--rule);
border-top: 1px solid var(--rule);
}
.main.product3 .cmp .subtitle small {
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
.main.product3 .cmp .ozellik i.fa-clock {
font-size: 20px;
color: #B26A0E;
}
.main.product3 .cmp-foot {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
background: var(--paper);
border-top: 1px solid var(--rule);
}
.main.product3 .cmp-foot > span {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 2px;
padding: 20px 18px;
text-align: center;
border-left: 1px solid var(--rule);
font-variant-numeric: tabular-nums;
}
.main.product3 .cmp-foot > span:first-child {
border-left: none;
}
.main.product3 .cmp-foot del {
font-family: var(--mono);
font-size: 12.5px;
color: var(--muted);
}
.main.product3 .cmp-foot strong {
font-family: var(--mono);
font-size: 22px;
line-height: 28px;
font-weight: 600;
color: var(--ink);
}
.main.product3 .cmp-foot small {
font-size: 11.5px;
color: var(--muted);
}
.main.product3 .cmp-foot form {
width: 100%;
margin-top: 10px;
}
.main.product3 .buy.sm {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
border-radius: 8px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
padding: 0 10px;
color: #fff;
background: var(--brand);
border: 1px solid var(--brand-hover);
cursor: pointer;
transition: background-color .2s ease;
}
.main.product3 .buy.sm:hover {
background: var(--brand-hover);
}
.main.product3 .cmp.c3 .cmp-head,
.main.product3 .cmp.c3 .ozellik,
.main.product3 .cmp.c3 .cmp-foot {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.main.product3 .cmp.vs .cmp-head .vs-us {
color: var(--brand);
background: var(--brand-soft);
font-size: 14px;
letter-spacing: 0;
text-transform: none;
}
.main.product3 .cmp.vs .ozellik > span + span {
flex-direction: row;
justify-content: start;
gap: 9px;
font-weight: 400;
color: var(--muted);
align-items: center;
text-align: left;
}
.main.product3 .cmp.vs .ozellik .vs-us {
background: var(--brand-soft);
font-weight: 600;
color: var(--ink);
}
.main.product3 .cmp.vs .ozellik .vs-us i {
color: var(--brand);
font-size: 14px;
flex-shrink: 0;
}
.main.product3 .cmp.vs .ozellik > span + span i.fa-minus {
color: #CFCDD8;
font-size: 12px;
flex-shrink: 0;
}
@media (max-width: 1100px) {
.main.product3 .refstrip {
flex-wrap: wrap;
}
}
@media (max-width: 1024px) {
.main.product3 .phero h1 {
font-size: 36px;
line-height: 44px;
}
.main.product3 .bento-grid {
grid-template-columns: 1fr 1fr;
}
.main.product3 .tile.w2 {
grid-column: span 2;
}
.main.product3 .tile.h2 {
grid-row: auto;
}
.main.product3 .demo-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.main.product3 .phero {
padding-top: 48px;
}
.main.product3 .phero h1 {
font-size: 29px;
line-height: 37px;
}
.main.product3 .section-head3 {
padding-top: 48px;
}
.main.product3 .section-head3 h2 {
font-size: 24px;
line-height: 32px;
}
.main.product3 .bento-grid {
grid-template-columns: 1fr;
}
.main.product3 .tile.w2 {
grid-column: auto;
}
.main.product3 .sss3 {
grid-template-columns: 1fr;
}
.main.product3 .cmp-foot strong {
font-size: 18px;
}
}
@media (max-width: 760px) {
.main.product3 .cmp {
border-radius: 10px;
}
.main.product3 .cmp .cmp-head {
display: none;
}
.main.product3 .cmp .ozellik {
grid-template-columns: repeat(2, 1fr);
padding-bottom: 10px;
}
.main.product3 .cmp.c3 .ozellik {
grid-template-columns: repeat(3, 1fr);
}
.main.product3 .cmp.vs .ozellik {
grid-template-columns: 1fr;
padding-bottom: 0;
}
.main.product3 .cmp .ozellik > span {
min-width: 0;
}
.main.product3 .cmp .ozellik > span:first-child {
grid-column: 1 / -1;
padding: 13px 14px 9px;
font-size: 13.5px;
line-height: 19px;
font-weight: 600;
color: var(--ink);
}
.main.product3 .cmp .ozellik small {
font-size: 11.5px;
line-height: 16px;
}
.main.product3 .cmp .ozellik > span + span {
padding: 0 8px;
border-left: 1px solid var(--rule);
font-size: 12.5px;
line-height: 18px;
}
.main.product3 .cmp .ozellik > span:nth-child(2) {
border-left: none;
}
.main.product3 .cmp .ozellik > span + span::before,
.main.product3 .cmp-foot > span::before {
display: block;
margin-bottom: 3px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.main.product3 .cmp .ozellik > span:nth-child(2)::before,
.main.product3 .cmp-foot > span:nth-child(2)::before { content: var(--s1, ''); }
.main.product3 .cmp .ozellik > span:nth-child(3)::before,
.main.product3 .cmp-foot > span:nth-child(3)::before { content: var(--s2, ''); }
.main.product3 .cmp .ozellik > span:nth-child(4)::before,
.main.product3 .cmp-foot > span:nth-child(4)::before { content: var(--s3, ''); }
.main.product3 .cmp.vs .ozellik > span + span {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
padding: 10px 14px 12px;
border-left: none;
border-top: 1px solid var(--rule);
}
.main.product3 .cmp.vs .ozellik > span + span::before {
flex-shrink: 0;
margin-bottom: 0;
}
.main.product3 .cmp .cmp-foot,
.main.product3 .cmp.c3 .cmp-foot {
grid-template-columns: 1fr;
}
.main.product3 .cmp-foot > span:first-child {
display: none;
}
.main.product3 .cmp-foot > span {
align-items: stretch;
text-align: center;
padding: 16px 14px;
border-left: none;
border-top: 1px solid var(--rule);
}
.main.product3 .cmp-foot > span:nth-child(2) {
border-top: none;
}
.main.product3 .cmp-foot > span::before {
margin-bottom: 6px;
}
}
.main.yazilimlar {
background: var(--paper);
}
.main.yazilimlar .yz-list {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
.main.yazilimlar .yz-card {
display: flex;
align-items: center;
gap: 36px;
box-sizing: border-box;
padding: 28px 30px;
background: #fff;
border: 1px solid var(--rule-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow .3s var(--ease), transform .3s var(--ease),
border-color .3s var(--ease);
}
.main.yazilimlar .yz-card:hover {
border-color: var(--rule);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.main.yazilimlar .yz-main {
display: flex;
align-items: flex-start;
gap: 20px;
flex: 1.6;
min-width: 0;
}
.main.yazilimlar .yz-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: var(--r-md);
background: var(--brand-soft);
color: var(--brand);
font-size: 20px;
}
.main.yazilimlar .yz-ic.maskotlu {
width: 86px;
height: 86px;
background: none;
border-radius: 0;
}
.main.yazilimlar .yz-ic.maskotlu .figur3d {
width: 100%;
}
.main.yazilimlar .yz-body {
min-width: 0;
}
.main.yazilimlar .yz-body h3 {
font-size: 21px;
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 7px;
}
.main.yazilimlar .yz-body h3 a {
color: var(--ink);
text-decoration: none;
transition: color .25s var(--ease);
}
.main.yazilimlar .yz-body h3 a:hover {
color: var(--brand);
}
.main.yazilimlar .yz-body p {
font-size: 14.5px;
line-height: 1.7;
color: var(--muted);
max-width: 560px;
margin-bottom: 16px;
}
.main.yazilimlar .yz-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.main.yazilimlar .yz-tags span {
font-size: 10.5px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--brand);
border: none;
border-radius: var(--r-pill);
padding: 6px 12px;
background: var(--brand-soft);
}
.main.yazilimlar .yz-side {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
text-align: right;
}
.main.yazilimlar .yz-price em {
display: block;
font-style: normal;
font-size: 21px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.main.yazilimlar .yz-price em.soluk {
color: var(--muted);
font-weight: 500;
}
.main.yazilimlar .yz-price small {
display: block;
font-size: 12.5px;
color: var(--muted);
margin-top: 3px;
}
.main.yazilimlar .yz-count {
font-size: 11px;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
border: none;
border-radius: var(--r-pill);
padding: 6px 12px;
background: var(--brand-soft);
}
.main.yazilimlar .yz-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.main.yazilimlar .yz-actions .cta {
min-height: 42px;
padding: 0 22px;
font-size: 13.5px;
}
.main.yazilimlar .yz-empty {
padding: 64px 24px;
text-align: center;
color: var(--muted);
font-size: 14px;
background: #fff;
border: 1px solid var(--rule-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.main.yazilimlar .yz-empty i {
display: block;
font-size: 30px;
margin-bottom: 14px;
color: var(--brand);
opacity: .35;
}
@media (max-width: 860px) {
.main.yazilimlar .yz-card {
flex-direction: column;
align-items: stretch;
gap: 22px;
padding: 24px 22px;
}
.main.yazilimlar .yz-side {
align-items: center;
text-align: left;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.main.yazilimlar .yz-card:hover {
transform: none;
}
}
.main.product3 .phero {
position: relative;
overflow: hidden;
border-bottom: none;
background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 60%, var(--brand-soft) 100%);
}
.main.product3 .phero::before {
content: '';
position: absolute;
width: 560px;
height: 560px;
top: -240px;
right: -160px;
border-radius: 50%;
filter: blur(90px);
background: radial-gradient(circle, rgba(154, 140, 228, .34) 0%, rgba(154, 140, 228, 0) 70%);
pointer-events: none;
}
.main.product3 .phero-inner {
position: relative;
z-index: 1;
}
.main.product3 .pbread {
font-size: 13.5px;
}
.main.product3 .phero .kicker {
display: inline-block;
background: rgba(255, 255, 255, .82);
border: 1px solid var(--rule);
border-radius: var(--r-pill);
padding: 7px 16px;
letter-spacing: .08em;
box-shadow: var(--shadow-xs);
}
.main.product3 .phero h1 {
font-size: 44px;
line-height: 1.17;
letter-spacing: -0.015em;
}
.main.product3 .phero .lead {
line-height: 1.75;
}
.main.product3 .phero .pbadges span {
border: none;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, .8);
box-shadow: var(--shadow-xs);
letter-spacing: .06em;
padding: 8px 14px;
}
.main.product3 .cta {
border-radius: var(--r-pill);
font-weight: 500;
padding: 0 26px;
transition: background-color .25s var(--ease), color .25s var(--ease),
border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.main.product3 .cta.primary {
border-color: transparent;
box-shadow: var(--shadow-brand);
}
.main.product3 .cta.primary:hover {
box-shadow: 0 14px 30px rgba(74, 65, 146, .28);
}
.main.product3 .cta.ghost {
background: #fff;
border-color: var(--rule);
box-shadow: var(--shadow-xs);
}
.main.product3 .cta.ghost:hover {
border-color: var(--brand);
color: var(--brand);
box-shadow: var(--shadow-sm);
}
.main.product3 .indirim {
background: #fff;
border: 1px solid var(--rule-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.main.product3 .indirim .flipdown .rotor,
.main.product3 .indirim .flipdown .rotor-top,
.main.product3 .indirim .flipdown .rotor-leaf-front {
background-color: var(--brand-soft);
}
.main.product3 .indirim .flipdown .rotor-bottom,
.main.product3 .indirim .flipdown .rotor-leaf-rear {
background-color: #E6E2F6;
}
.main.product3 .buy {
border-radius: var(--r-pill);
font-weight: 500;
}
.main.product3 .buy:not(.yakinda) {
border-color: transparent;
box-shadow: var(--shadow-brand);
}
.main.product3 .buy.yakinda {
background: var(--brand-soft);
border-color: transparent;
color: var(--brand);
}
.main.product3 .bento-grid {
gap: 18px;
border-top: none;
border-left: none;
padding-bottom: 72px;
}
.main.product3 .tile {
border-right: none;
border-bottom: none;
border: 1px solid var(--rule-soft);
border-radius: var(--r-lg);
background: #fff;
box-shadow: var(--shadow-xs);
padding: 28px 26px;
transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.main.product3 .tile:hover {
background: #fff;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.main.product3 .tile.dark {
background: linear-gradient(165deg, var(--dark) 0%, var(--dark-2) 100%);
border-color: transparent;
box-shadow: var(--shadow-md);
}
.main.product3 .tile .tico {
border-radius: var(--r-md);
}
.main.product3 .tile .chips span {
border: none;
border-radius: var(--r-pill);
background: var(--brand-soft);
letter-spacing: .05em;
padding: 6px 12px;
}
.main.product3 .demo-cards {
gap: 16px;
}
.main.product3 .demo-card {
border: 1px solid var(--rule-soft);
border-radius: var(--r-lg);
background: #fff;
box-shadow: var(--shadow-sm);
transition: box-shadow .3s var(--ease), transform .3s var(--ease),
border-color .3s var(--ease);
}
.main.product3 .demo-card:hover {
border-color: var(--rule);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.main.product3 .refstrip .ref-item {
border: 1px solid var(--rule-soft);
border-radius: var(--r-md);
background: #fff;
box-shadow: var(--shadow-xs);
}
.main.product3 .sss3 {
border-top: none;
gap: 12px 24px;
}
.main.product3 .sss3 details {
border: 1px solid var(--rule-soft);
border-radius: var(--r-md);
background: #fff;
box-shadow: var(--shadow-xs);
padding: 0 18px;
transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.main.product3 .sss3 details[open] {
border-color: var(--rule);
box-shadow: var(--shadow-sm);
}
.main.product3 .sss3 summary::before {
border-radius: var(--r-pill);
background: var(--brand-soft);
color: var(--brand);
}
.main.product3 .cmp {
border: 1px solid var(--rule-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.main.product3 .cmp-head {
background: var(--brand-soft);
border-bottom: none;
}
.main.product3 .cmp-head span:first-child {
letter-spacing: .08em;
}
.main.product3 .cmp .ozellik {
border-bottom: 1px solid var(--rule-soft);
}
.main.product3 .cmp .ozellik > span + span {
border-left: 1px solid var(--rule-soft);
}
.main.product3 .cmp .subtitle {
background: var(--brand-soft);
letter-spacing: .07em;
color: var(--brand);
}
.main.product3 .cmp-foot {
background: var(--paper);
border-top: 1px solid var(--rule-soft);
}
.main.product3 .cmp-foot > span {
border-left: 1px solid var(--rule-soft);
}
.main.product3 .cmp.vs .cmp-head .vs-us,
.main.product3 .cmp.vs .ozellik .vs-us {
background: rgba(74, 65, 146, .07);
}
@media (max-width: 760px) {
.main.product3 .phero h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.main.product3 .tile:hover,
.main.product3 .demo-card:hover {
transform: none;
}
}
.main.product3 .urun-sahne {
position: relative;
width: 100%;
max-width: 470px;
margin: 0 auto;
aspect-ratio: 1;
animation: usGir .8s cubic-bezier(.2, .7, .3, 1) .06s both;
--zemin-gri: 0;
--zemin-solukluk: .4;
}
.main.product3 .us-zemin {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: flex-start;
justify-content: center;
}
.main.product3 .us-zemin .zemin3d {
width: 84%;
height: auto;
margin-top: 6%;
opacity: var(--zemin-solukluk, 1);
filter:
grayscale(var(--zemin-gri, 0))
drop-shadow(0 18px 30px rgba(26, 23, 38, .10));
}
.main.product3 .us-zemin::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -2%;
width: 84%;
aspect-ratio: 1;
margin: 0 auto;
border-radius: 50%;
background: radial-gradient(circle, rgba(154, 140, 228, .24) 0%, rgba(154, 140, 228, 0) 70%);
}
.main.product3 .us-nesne {
position: absolute;
z-index: 1;
left: var(--sol);
top: var(--ust);
width: var(--px);
margin: calc(var(--px) / -2) 0 0 calc(var(--px) / -2);
animation-duration: var(--sure);
animation-delay: var(--faz);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
will-change: transform;
}
.main.product3 .us-dikey  { animation-name: usDikey; }
.main.product3 .us-yatay  { animation-name: usYatay; }
.main.product3 .us-nesne .nesne3d {
width: 100%;
filter: drop-shadow(0 8px 16px rgba(26, 23, 38, .16));
}
.main.product3 .us-maskot {
position: absolute;
z-index: 2;
left: 50%;
bottom: 0;
width: 64%;
margin-left: -32%;
animation: usDikey 3.2s ease-in-out infinite alternate;
will-change: transform;
}
.main.product3 .us-maskot .figur3d {
width: 100%;
filter:
drop-shadow(0 2px 5px rgba(26, 23, 38, .28))
drop-shadow(0 20px 34px rgba(26, 23, 38, .22));
}
@keyframes usDikey {
from { transform: translate3d(0, -8px, 0); }
to   { transform: translate3d(0, 8px, 0); }
}
@keyframes usYatay {
from { transform: translate3d(-7px, 0, 0); }
to   { transform: translate3d(7px, 0, 0); }
}
@keyframes usGir {
from { opacity: 0; transform: translateY(18px) scale(.94); }
to   { opacity: 1; transform: none; }
}
@media (max-width: 1200px) {
.main.product3 .urun-sahne { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
.main.product3 .urun-sahne,
.main.product3 .us-nesne,
.main.product3 .us-maskot {
animation: none;
will-change: auto;
}
}
.main.kurumsal .kw-paket-alani {
width: 100%;
min-width: 0;
}
.main.kurumsal .kw-paketler {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.main.kurumsal .kw-paket {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 30px 28px 32px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: var(--kil);
}
.main.kurumsal .kw-paket.elit {
background: linear-gradient(180deg, var(--dark) 0%, #2A2547 100%);
box-shadow: var(--kil-renkli);
}
.main.kurumsal .kw-paket h3 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 6px;
}
.main.kurumsal .kw-paket.elit h3 { color: #fff; }
.main.kurumsal .kw-tanim {
font-size: 13.5px;
line-height: 21px;
color: var(--muted);
margin: 0 0 18px;
min-height: 42px;
}
.main.kurumsal .kw-paket.elit .kw-tanim { color: rgba(255, 255, 255, .65); }
.main.kurumsal .kw-fiyat {
padding: 14px 0 16px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin-bottom: 18px;
font-variant-numeric: tabular-nums;
}
.main.kurumsal .kw-paket.elit .kw-fiyat {
border-color: rgba(255, 255, 255, .14);
}
.main.kurumsal .kw-fiyat del {
display: block;
font-size: 13px;
color: var(--muted);
}
.main.kurumsal .kw-fiyat strong {
display: block;
font-size: 30px;
line-height: 36px;
font-weight: 600;
letter-spacing: -0.02em;
}
.main.kurumsal .kw-fiyat strong.gizli {
font-size: 22px;
color: var(--muted);
font-weight: 500;
}
.main.kurumsal .kw-paket.elit .kw-fiyat strong.gizli { color: var(--brand-bright); }
.main.kurumsal .kw-fiyat small {
display: block;
margin-top: 2px;
font-size: 12.5px;
color: var(--muted);
}
.main.kurumsal .kw-paket.elit .kw-fiyat small { color: rgba(255, 255, 255, .55); }
.main.kurumsal .kw-liste {
list-style: none;
margin: 0 0 22px;
padding: 0;
flex: 1;
}
.main.kurumsal .kw-liste li {
display: flex;
gap: 10px;
align-items: baseline;
font-size: 13.5px;
line-height: 20px;
padding: 5px 0;
color: var(--ink);
}
.main.kurumsal .kw-paket.elit .kw-liste li { color: rgba(255, 255, 255, .8); }
.main.kurumsal .kw-liste li i {
font-size: 12px;
color: var(--brand);
flex-shrink: 0;
}
.main.kurumsal .kw-paket.elit .kw-liste li i { color: var(--brand-bright); }
.main.kurumsal .kw-paket .buy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 46px;
box-sizing: border-box;
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
background: var(--brand);
color: #fff;
border: none;
cursor: pointer;
}
.main.kurumsal .kw-paket .buy:hover { background: var(--brand-hover); }
.main.kurumsal .kw-paket .buy.yakinda {
background: var(--paper);
color: var(--muted);
cursor: default;
pointer-events: none;
border: 1px dashed var(--rule);
}
.main.kurumsal .kw-sepet-notu {
margin: 18px 0 64px;
font-size: 13px;
color: var(--muted);
}
.main.kurumsal .kw-sepet-notu i { color: var(--brand); margin-right: 6px; }
.main.kurumsal .kw-surec {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
list-style: none;
margin: 0 0 72px;
padding: 0;
counter-reset: none;
}
.main.kurumsal .kw-surec li {
position: relative;
padding: 24px 22px 26px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: var(--kil);
}
.main.kurumsal .kw-gun {
display: inline-block;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--brand);
background: var(--brand-soft);
border-radius: var(--r-pill);
padding: 6px 12px;
margin-bottom: 14px;
box-shadow: var(--kil-kucuk);
}
.main.kurumsal .kw-surec h3 {
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 6px;
}
.main.kurumsal .kw-surec p {
font-size: 13px;
line-height: 20px;
color: var(--muted);
margin: 0;
}
.main.kurumsal .kw-sektor-alani {
width: 100%;
min-width: 0;
}
.main.kurumsal .kw-sektorler {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.main.kurumsal .kw-sektor {
padding: 18px 20px;
background: #fff;
border-radius: var(--r-md);
box-shadow: var(--kil-kucuk);
}
.main.kurumsal .kw-sektor h3 {
font-size: 14.5px;
line-height: 21px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: var(--ink);
}
.main.kurumsal .kw-sektor p {
font-size: 12.5px;
line-height: 19px;
color: var(--muted);
margin: 0;
}
.main.kurumsal .kw-sektor-not {
margin: 20px 0 64px;
font-size: 13.5px;
line-height: 22px;
color: var(--muted);
}
.main.kurumsal .kw-sektor-not a {
color: var(--brand);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 1024px) {
.main.kurumsal .kw-paketler { grid-template-columns: 1fr; }
.main.kurumsal .kw-surec { grid-template-columns: repeat(2, 1fr); }
.main.kurumsal .kw-tanim { min-height: 0; }
.main.kurumsal .kw-sektorler { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.main.kurumsal .kw-surec { grid-template-columns: 1fr; }
.main.kurumsal .kw-sektorler { grid-template-columns: 1fr; }
}
.main.product3 .ozellik-liste {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
padding-bottom: 12px;
}
.main.product3 .ozellik-oge {
position: relative;
overflow: hidden;
padding: 22px 22px 20px;
background: linear-gradient(180deg, #fff 0%, #FCFBFE 100%);
border: 1px solid var(--rule-soft, var(--rule));
border-radius: var(--r-lg, 16px);
box-shadow: var(--kil);
transition: transform .28s var(--ease, ease), box-shadow .28s var(--ease, ease),
border-color .28s ease;
}
.main.product3 .ozellik-oge::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand), #7A6FD1);
border-radius: 0 3px 3px 0;
transition: width .38s var(--ease, ease);
}
.main.product3 .ozellik-oge:hover {
transform: translateY(-4px);
box-shadow: var(--kil-belirgin);
border-color: #DDD8F0;
}
.main.product3 .ozellik-oge:hover::before { width: 62%; }
.main.product3 .ozellik-oge .oz-ikon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 12px;
border-radius: 13px;
background: var(--brand-soft);
box-shadow: var(--kil-kucuk);
color: var(--brand);
font-size: 17px;
transition: background-color .28s ease, color .28s ease, box-shadow .28s ease,
transform .35s var(--ease, ease);
}
.main.product3 .ozellik-oge:hover .oz-ikon {
background: var(--brand);
color: #fff;
box-shadow: var(--kil-renkli);
transform: rotate(-8deg) scale(1.06);
}
.main.product3 .ozellik-oge .oz-hayalet {
position: absolute;
right: -18px;
bottom: -26px;
font-size: 108px;
line-height: 1;
color: var(--brand);
opacity: .045;
pointer-events: none;
transition: transform .45s var(--ease, ease), opacity .45s ease;
}
.main.product3 .ozellik-oge:hover .oz-hayalet {
transform: translate(-6px, -6px) rotate(-6deg);
opacity: .085;
}
.main.product3 .ozellik-oge h3 {
position: relative;
margin: 0 0 7px;
font-size: 16px;
line-height: 23px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--ink);
}
.main.product3 .ozellik-oge p {
position: relative;
margin: 0;
font-size: 13.5px;
line-height: 21px;
color: var(--color-secondary);
}
.oz-anim .main.product3 .ozellik-oge {
opacity: 0;
transform: translateY(14px);
transition: opacity .5s var(--ease, ease) var(--gecikme, 0ms),
transform .5s var(--ease, ease) var(--gecikme, 0ms),
box-shadow .28s ease, border-color .28s ease;
}
.oz-anim .main.product3 .ozellik-oge.gorundu {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.main.product3 .ozellik-oge,
.main.product3 .ozellik-oge .oz-ikon,
.main.product3 .ozellik-oge .oz-hayalet { transition: none; }
.main.product3 .ozellik-oge:hover { transform: none; }
.oz-anim .main.product3 .ozellik-oge { opacity: 1; transform: none; }
}
.main.product3 .cmp .ozellik i.fa-circle-plus.opsiyon {
font-size: 20px;
color: var(--brand);
}
.main.product3 .cmp .ozellik i.fa-circle-plus.opsiyon + small {
color: var(--brand);
font-weight: 500;
}
.main.kurumsal .kw-opsiyon-notu {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 14px 0 0;
padding: 14px 16px;
background: var(--brand-soft);
border: 1px solid var(--rule);
border-radius: var(--r-md);
font-size: 13px;
line-height: 21px;
color: var(--color-secondary);
}
.main.kurumsal .kw-opsiyon-notu > i {
margin-top: 3px;
color: var(--brand);
}
.main.kurumsal .kw-opsiyon-notu a {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 4px;
color: var(--brand);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.main.kurumsal .kw-opsiyon-notu a:hover { text-decoration: underline; }
.main.product3 .guvence-seridi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
padding-top: 6px;
}
.main.product3 .guvence {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--rule-soft, var(--rule));
border-radius: var(--r-lg, 14px);
box-shadow: var(--kil-kucuk, var(--shadow-sm));
}
.main.product3 .guvence i {
color: var(--brand);
font-size: 17px;
margin-top: 3px;
}
.main.product3 .guvence b {
display: block;
font-size: 14px;
line-height: 20px;
color: var(--ink);
}
.main.product3 .guvence span {
font-size: 12.5px;
line-height: 18px;
color: var(--color-secondary, var(--muted));
}
.main.product3 .fiyat-sayfa-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 13.5px;
font-weight: 600;
color: var(--brand);
}
.main.product3 .maliyet-alani { width: 100%; }
.main.product3 .maliyet-tablo-sarici {
width: 100%;
overflow-x: auto;
background: #fff;
border: 1px solid var(--rule-soft, var(--rule));
border-radius: var(--r-lg, 14px);
box-shadow: var(--kil, var(--shadow-sm));
}
.main.product3 .maliyet-tablo {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-size: 14px;
}
.main.product3 .maliyet-tablo th,
.main.product3 .maliyet-tablo td {
padding: 13px 16px;
text-align: left;
border-bottom: 1px solid var(--rule-soft, var(--rule));
font-variant-numeric: tabular-nums;
vertical-align: top;
}
.main.product3 .maliyet-tablo tr:last-child td { border-bottom: none; }
.main.product3 .maliyet-tablo th {
font-size: 13px;
color: var(--brand);
}
.main.product3 .maliyet-tablo td small {
display: block;
font-size: 11.5px;
color: var(--color-secondary, var(--muted));
}
.main.product3 .maliyet-notu {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 12px 0 0;
font-size: 12.5px;
line-height: 19px;
color: var(--color-secondary, var(--muted));
max-width: 800px;
}
.main.product3 .maliyet-notu i { color: var(--brand); margin-top: 2px; }
.main.product3 .fiyat-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 30px;
}
.main.product3 .panel-ekranlar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.main.product3 .panel-ekran {
margin: 0;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.main.product3 .pe-gorsel {
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper);
border-bottom: 1px solid var(--rule-soft);
}
.main.product3 .pe-gorsel img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.main.product3 .panel-ekran figcaption {
padding: 14px 16px 16px;
font-size: 13.5px;
line-height: 1.55;
color: var(--muted);
}
.main.product3 .panel-ekran figcaption b {
display: block;
margin-bottom: 4px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
@media (max-width: 1100px) {
.main.product3 .panel-ekranlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.main.product3 .panel-ekranlar { grid-template-columns: 1fr; }
}
.main.product3 .bilinmesi-gerekenler {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
}
.main.product3 .bg-oge {
padding: 18px 20px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--r-lg);
}
.main.product3 .bg-oge h3 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.main.product3 .bg-oge p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
}
@media (max-width: 700px) {
.main.product3 .bilinmesi-gerekenler { grid-template-columns: 1fr; }
}
.main.product3 .phero-ekranli {
padding: 56px 0;
background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
border-bottom: 1px solid var(--rule);
}
.main.product3 .phero-ekranli::before {
display: none;
}
@media (min-width: 1080px) {
.main.product3 .phero-ekranli .phero-inner {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 56px;
}
}
.main.product3 .pbilgi {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0 0 26px;
}
.main.product3 .pbilgi div {
padding: 12px 14px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--r-md);
}
.main.product3 .pbilgi dt {
margin: 0 0 3px;
font-size: 12px;
color: var(--muted);
}
.main.product3 .pbilgi dd {
margin: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
}
.main.product3 .pbilgi dd small {
display: block;
margin-top: 2px;
font-size: 12px;
font-weight: 400;
color: var(--muted);
}
.main.product3 .pe-sahne {
position: relative;
margin: 0;
}
.main.product3 .pe-tarayici {
margin-right: 56px;
overflow: hidden;
background: #fff;
border: 1px solid var(--rule);
border-radius: 14px;
box-shadow: var(--shadow-lg);
}
.main.product3 .pe-cubuk {
display: flex;
align-items: center;
gap: 14px;
height: 36px;
padding: 0 14px;
background: #F4F3F8;
border-bottom: 1px solid var(--rule);
}
.main.product3 .pe-noktalar {
display: inline-flex;
gap: 6px;
}
.main.product3 .pe-noktalar i {
width: 10px;
height: 10px;
border-radius: 50%;
background: #D9D6E3;
}
.main.product3 .pe-adres {
flex: 1;
max-width: 280px;
margin: 0 auto;
padding: 4px 12px;
border: 1px solid var(--rule);
border-radius: var(--r-pill);
background: #fff;
font-size: 12px;
color: var(--muted);
text-align: center;
}
.main.product3 .pe-adres i {
margin-right: 4px;
font-size: 10px;
color: var(--color-success);
}
.main.product3 .pe-tarayici > img {
display: block;
width: 100%;
height: auto;
}
.main.product3 .pe-telefon {
position: absolute;
right: 0;
bottom: 40px;
width: 23%;
max-width: 168px;
overflow: hidden;
background: var(--ink);
border: 6px solid var(--ink);
border-radius: 26px;
box-shadow: var(--shadow-lg);
}
.main.product3 .pe-telefon img {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
}
.main.product3 .pe-sahne figcaption {
margin-top: 16px;
padding-right: 30%;
font-size: 13px;
line-height: 1.5;
color: var(--muted);
}
@media (max-width: 1079px) {
.main.product3 .pe-sahne {
max-width: 720px;
margin-top: 36px;
}
}
@media (max-width: 760px) {
.main.product3 .phero-ekranli {
padding: 36px 0 40px;
}
.main.product3 .pe-tarayici {
margin-right: 36px;
}
.main.product3 .pe-telefon {
width: 26%;
border-width: 4px;
border-radius: 18px;
}
.main.product3 .pe-telefon img {
border-radius: 14px;
}
.main.product3 .pe-sahne figcaption {
padding-right: 28%;
}
}