/* kodend.com — iç sayfa görselleri: E-Ticaret vitrin mockup'ı, Pazaryeri kanal yörüngesi */

.page-hero--split .ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ph-copy { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Vitrin mockup'ı ---------- */
.store-mock { position: relative; padding: 30px 20px 40px 30px; }
.sm-win { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); }
.sm-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; background: #fff; color: #141A33; }
.sm-nav { display: flex; gap: 14px; align-items: center; font-size: .75rem; color: #5D6380; }
.sm-nav b { font: 800 1rem var(--kd-font-display); color: #141A33; margin-right: auto; }
.sm-cart { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; color: #141A33; }
.sm-cart i { font-style: normal; background: var(--red); color: #fff; border-radius: 999px; padding: 0 6px; font-size: .65rem; animation: ping-red 2s infinite; }
@keyframes ping-red { 0% { box-shadow: 0 0 0 0 rgba(203,34,40,.5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(203,34,40,0); } }
.sm-hero { position: relative; overflow: hidden; border-radius: 12px; padding: 22px; min-height: 130px; background: linear-gradient(120deg, #2F49D1, #7C3AED 60%, #F472B6); color: #fff; display: flex; align-items: center; }
.sm-hero div { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.sm-hero small { font-size: .7rem; opacity: .85; }
.sm-hero b { font: 800 1.4rem/1.1 var(--kd-font-display); }
.sm-hero span:not(.sm-sun) { align-self: flex-start; margin-top: 6px; font-size: .7rem; font-weight: 700; background: #fff; color: #2F49D1; padding: 5px 10px; border-radius: 6px; }
.sm-sun { position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,102,.95), rgba(255,214,102,0) 70%); animation: drift 10s ease-in-out infinite alternate; }
.sm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sm-grid .ps-item { padding: 12px 6px 8px; gap: 6px; transition: transform .25s var(--kd-ease); }
.sm-grid .ps-item:hover { transform: translateY(-4px); }
.sm-grid .ps-item svg { width: 40px; height: 40px; }
.sm-grid .ps-item small { font-size: .6rem; text-align: center; }
.sm-f1 { left: -6px; bottom: 6px; animation: bob 6s ease-in-out infinite; }
.sm-f2 { right: 0; top: 4px; animation: bob 7s -2s ease-in-out infinite; }
.sm-palette { position: absolute; right: 6px; bottom: 60px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--kd-line); box-shadow: var(--shadow-md); animation: bob 8s -4s ease-in-out infinite; }
.sm-palette i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sw-d { background: #7C3AED; }

/* ---------- Kanal yörüngesi ---------- */
.orbit { --size: 440px; --r1: 190px; --r2: 104px; position: relative; width: var(--size); height: var(--size); max-width: 100%; margin-inline: auto; }
.orbit-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.r1 { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); border: 1.5px dashed color-mix(in srgb, var(--kd-accent) 45%, var(--kd-line)); }
.r2 { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); border: 1.5px solid var(--kd-line); }
.orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 128px; height: 128px; border-radius: 50%; background: var(--kd-surface); box-shadow: var(--shadow-lg); display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; animation: ring 2.6s ease-out infinite; }
.orbit-core img { width: 34px; height: 34px; border-radius: 8px; }
.orbit-core b { font: 800 1rem var(--kd-font-display); }
.orbit-core small { color: var(--kd-muted); font-size: .7rem; }
.orbit-track { position: absolute; inset: 0; animation: spin 50s linear infinite; }
.orbit-track.t2 { animation-duration: 34s; animation-direction: reverse; }
.orbit-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.t1 .orbit-item { --r: var(--r1); }
.t2 .orbit-item { --r: var(--r2); }
.oi { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -50%); animation: counter 50s linear infinite; }
.t2 .oi { animation: counter-rev 34s linear infinite; }
@keyframes counter { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes counter-rev { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.oi .ch-dot { width: 48px; height: 48px; border-radius: 14px; font-size: .85rem; box-shadow: var(--shadow-md); }
.t2 .oi .ch-dot { width: 38px; height: 38px; border-radius: 12px; }
.oi small { font-size: .68rem; font-weight: 700; background: var(--kd-surface); padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(15,20,60,.1); white-space: nowrap; }
.o0 { --a: -90deg; } .o1 { --a: -30deg; } .o2 { --a: 30deg; } .o3 { --a: 90deg; } .o4 { --a: 150deg; } .o5 { --a: 210deg; }
.q0 { --a: -54deg; } .q1 { --a: 18deg; } .q2 { --a: 90deg; } .q3 { --a: 162deg; } .q4 { --a: 234deg; }

@media (max-width: 1020px) {
  .page-hero--split .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .store-mock, .orbit { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
  .sm-win { transform: none; }
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-palette { display: none; }
  .store-mock { padding: 24px 0 50px; }
  .orbit { --size: 320px; --r1: 136px; --r2: 76px; }
  .oi small { display: none; }
  .orbit-core { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-track, .oi, .orbit-core, .sm-f1, .sm-f2, .sm-palette, .sm-sun, .sm-cart i { animation: none !important; }
}