/* Ana sayfa "Ürünlerimizden Bazıları": sonradan eklenen ürün kartlarının görselleri (OTP, Yurt Dışı SMS, Kısa Link, E-postadan SMS, İYS, e-İmza) */
.product-motion-visual[class*="pm-"] { padding: 38px 28px 22px; }
.pm-card { position: relative; z-index: 2; padding: 18px; background: #ffffffd9; border: 1px solid #6f350014; border-radius: 16px; box-shadow: 0 24px 50px #7338001a; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); }
.pm-head { display: flex; align-items: center; gap: 8px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid #09090912; color: #73685e; font-size: 12px; }
.pm-head-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff0dc; color: var(--orange-deep); }
.pm-head strong { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-head em { margin-left: auto; padding: 5px 8px; border-radius: 999px; background: #fff0dc; color: var(--orange-deep); font-style: normal; font-weight: 800; white-space: nowrap; }
.pm-status { display: flex; align-items: center; gap: 5px; margin-top: 12px; color: #6f665e; font-size: 12px; }
.pm-status svg { padding: 2px; border-radius: 50%; background: #36aa70; color: #fff; }
.pm-status b { margin-left: auto; color: #36aa70; }

/* Koyu kartlarda iç kart opak olsun */
:is(.pm-otp, .pm-iys) .pm-card { background: #fffaf3; }

/* OTP SMS (koyu kart) */
.pm-otp { background: radial-gradient(circle at 78% 12%, #f2790c59, #0000 40%), linear-gradient(150deg, #2a211a, #141110 70%); }
.pm-otp-label { margin: 0 0 12px; color: #8b8178; font-size: 12px; }
.pm-otp-digits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pm-otp-digits span { display: grid; animation-direction: alternate; place-items: center; min-width: 0; height: 40px; border: 1px solid #eadccd; border-radius: 10px; background: #fff; font-size: calc(17px + 2pt); font-weight: 800; animation: pm-digit 4.8s ease-in-out infinite; }
.pm-otp-digits span:nth-child(2) { animation-delay: .15s; } .pm-otp-digits span:nth-child(3) { animation-delay: .3s; }
.pm-otp-digits span:nth-child(4) { animation-delay: .45s; } .pm-otp-digits span:nth-child(5) { animation-delay: .6s; } .pm-otp-digits span:nth-child(6) { animation-delay: .75s; }
@keyframes pm-digit { 0% { opacity: .35; transform: translateY(4px); border-color: #eadccd; } 14%, 100% { opacity: 1; transform: none; border-color: var(--orange); } }
.pm-otp-timer { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #f6f1eb; color: #73685e; font-size: 12px; }
.pm-otp-timer b { margin-left: auto; color: var(--orange-deep); font-variant-numeric: tabular-nums; }

/* Yurt Dışı SMS */
.pm-intl { background: radial-gradient(circle at 80% 20%, #ffe2c2, #0000 45%), linear-gradient(160deg, #fffaf3, #f8eee2); }
.pm-intl-orbit { position: absolute; z-index: 1; right: -70px; top: -60px; width: 230px; height: 230px; border: 1px dashed #f2790c55; border-radius: 50%; animation: pm-spin 26s linear infinite; }
.pm-intl-orbit::before { content: ""; position: absolute; top: 28px; left: 34px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px #f2790c2e; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-intl-row { display: grid; grid-template-columns: 34px 1fr auto 10px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eadccd; font-size: 12px; }
.pm-intl-code { display: grid; place-items: center; height: 24px; border-radius: 7px; background: #171411; color: #fff; font-weight: 800; letter-spacing: .06em; font-size: 12px; }
.pm-intl-row small { color: #8b8178; }
.pm-intl-row i { width: 8px; height: 8px; border-radius: 50%; background: #d9c6b3; animation: pm-deliver 3.6s step-end infinite; }
.pm-intl-row:nth-of-type(3) i { animation-delay: .6s; } .pm-intl-row:nth-of-type(4) i { animation-delay: 1.2s; }
@keyframes pm-deliver { 0% { background: #d9c6b3; } 30%, 100% { background: #36aa70; box-shadow: 0 0 0 4px #36aa7026; } }

/* Kısa Link (turuncu kart) */
.pm-link { background: radial-gradient(circle at 20% 10%, #ffffff40, #0000 40%), linear-gradient(150deg, #ff9a3d, var(--orange) 55%, #e05a00); }
.pm-link-url { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px dashed #f2790c80; border-radius: 10px; background: #fff7ee; color: var(--orange-deep); font-weight: 800; font-size: calc(10px + 2pt); }
.pm-link-chart { display: flex; align-items: flex-end; gap: 7px; height: 46px; margin: 12px 0 10px; }
.pm-link-chart i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(#ffb36b, var(--orange)); transform-origin: bottom; animation: pm-grow 3.2s ease-in-out infinite alternate; }
.pm-link-chart i:nth-child(odd) { animation-delay: .4s; }
.pm-bar-38 { height: 38%; } .pm-bar-52 { height: 52%; } .pm-bar-44 { height: 44%; } .pm-bar-70 { height: 70%; } .pm-bar-61 { height: 61%; } .pm-bar-86 { height: 86%; } .pm-bar-100 { height: 100%; }
@keyframes pm-grow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.pm-link-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-link-stats span { padding: 6px 10px; border-radius: 10px; background: #f6f1eb; }
.pm-link-stats small { display: block; color: #8b8178; font-size: 12px; }
.pm-link-stats b { font-size: calc(13px + 2pt); }

/* E-postadan SMS */
.pm-mail { background: radial-gradient(circle at 76% 15%, #ffffffe6, #0000 34%), linear-gradient(150deg, #ffc986, #ffe7cb 62%); }
.pm-mail-card p { display: flex; gap: 10px; margin: 0; padding: 6px 0; font-size: 12px; }
.pm-mail-card small { width: 34px; color: #8b8178; }
.pm-mail-card span { font-weight: 700; }
.pm-mail-arrow { position: relative; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; margin: -10px auto -10px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 10px 24px -8px #e96000a6; animation: pm-bounce 1.8s ease-in-out infinite; }
@keyframes pm-bounce { 50% { transform: translateY(5px); } }
.pm-mail-sms { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 18px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #171411; color: #fff; box-shadow: 0 20px 40px -20px #000000a6; animation: pm-pop 3.6s ease-in-out infinite; }
.pm-mail-sms svg { flex: 0 0 auto; color: var(--orange); }
.pm-mail-sms small { display: block; color: #ffffff99; letter-spacing: .08em; font-size: 12px; }
.pm-mail-sms strong { font-size: calc(10px + 2pt); }
@keyframes pm-pop { 0%, 15% { opacity: 0; transform: translateY(10px) scale(.96); } 25%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* İYS (koyu kart) */
.pm-iys { background: radial-gradient(circle at 20% 15%, #f2790c45, #0000 40%), linear-gradient(150deg, #241c16, #121010 70%); }
.pm-iys-row { display: grid; grid-template-columns: 1fr auto 34px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #eadccd; font-size: 12px; }
.pm-iys-chip { padding: 4px 8px; border-radius: 999px; background: #e7f6ee; color: #23885a; font-weight: 800; font-size: 12px; }
.pm-toggle { position: relative; height: 18px; border-radius: 999px; background: #36aa70; }
.pm-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.pm-iys-row.is-off .pm-iys-chip { background: #fdeaea; color: #c43c3c; }
.pm-iys-row.is-off .pm-toggle { background: #d9c6b3; }
.pm-iys-row.is-off .pm-toggle::after { right: auto; left: 2px; }

/* e-İmza */
.pm-sign { background: radial-gradient(circle at 80% 18%, #ffe2c2, #0000 45%), linear-gradient(160deg, #fffaf3, #f6ece0); }
.pm-sign-lines { display: grid; gap: 7px; }
.pm-sign-lines i { height: 6px; border-radius: 4px; background: #efe5da; }
.pm-sign-lines i:nth-child(2) { width: 82%; } .pm-sign-lines i:nth-child(3) { width: 64%; }
.pm-sign-box { margin-top: 14px; padding: 8px 10px 6px; border-top: 1px dashed #d9c6b3; color: var(--orange-deep); }
.pm-sign-box span { display: block; color: #8b8178; font-size: 12px; }
.pm-sign-path { display: block; width: 100%; height: 44px; stroke-dasharray: 420; stroke-dashoffset: 420; animation: pm-draw 4.2s ease-in-out infinite; }
@keyframes pm-draw { 0%, 10% { stroke-dashoffset: 420; } 60%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pm-sign-pen { position: absolute; right: 26px; bottom: 54px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #171411; color: #fff; transform: rotate(-10deg); }
.pm-sign-badge { position: absolute; z-index: 3; left: 46px; bottom: 16px; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; background: #171411; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 14px 30px -14px #000000a6; }
.pm-sign-badge svg { color: #4fd18f; }

@media (prefers-reduced-motion: reduce) { [class*="pm-"], [class*="pm-"] * { animation: none !important; } .pm-sign-path { stroke-dashoffset: 0; } }
@media (width <= 560px) { .product-motion-visual[class*="pm-"] { padding: 30px 16px 18px; } }

/* Kaydırmalı ürün alanı: kenarda yarım kart kalmasın, kartlar alana tam sığsın (3 / 2 / 1 sütun) */
.product-motion-grid { scroll-padding-inline: 2px; }
.product-motion-grid > .product-motion-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; }
@media (width <= 1100px) { .product-motion-grid > .product-motion-card { flex-basis: calc((100% - 16px) / 2); } }
@media (width <= 680px) { .product-motion-grid > .product-motion-card { flex-basis: 100%; } }

/* "Ürünlerimizden Bazıları" ile altındaki Çözümler bölümü art arda beyaz kalıp tek büyük
   beyaz alan oluşturuyordu: ürünler bölümü Referanslar gibi sıcak tonlu yuvarlak bir panele alındı */
.products-showcase { background: #f6f1ea; border-radius: 30px; margin: 20px 20px 0; }
/* Karusel ekran genişliğine göre boyutlanıyor (100vw - 32px); panelin kenarına dayanmasın diye
   panel iç genişliğinden (100vw - 40px) her iki yanda 24px boşluk bırakılır */
.products-showcase .product-motion-wrap { width: min(1240px, 100vw - 88px); }
@media (max-width: 760px) {
  .products-showcase { border-radius: 22px; margin: 10px 10px 0; }
  .products-showcase .product-motion-wrap { width: calc(100vw - 52px); }
}