/* Mini el okuma — ücretsiz analizler sayfasıyla aynı koyu gökyüzü dili */
.eo { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 4px 18px 70px; }
.eo-page .nav-brand { color: #f3ece3; }
.eo-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 0 10px; }
.eo-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 14px; color: #fff; }
.eo-hero h1 em { font-style: italic; background: linear-gradient(90deg, #f0c27b, #e3567f, #f0c27b); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ucShine 6s linear infinite; }
.eo-hero .uc-lead { margin: 0; text-align: left; }
.eo-privacy { margin-top: 16px; display: inline-flex; gap: .5rem; align-items: center; padding: 8px 14px; border-radius: 999px; background: #ffffff12; border: 1px solid #ffffff26; color: #efe3d1; font-size: .92rem; }
@keyframes eoSpin { to { transform: rotate(360deg); } }

.eo-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.eo-tip { display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 18px; background: linear-gradient(160deg, #ffffff14, #ffffff06); border: 1px solid #ffffff1f; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.eo-tip-i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 1.2rem; background: linear-gradient(135deg, #a3214a, #3f2a6b); margin-bottom: 6px; }
.eo-tip strong { color: #fff; }
.eo-tip span { color: #d8cdbf; font-size: .92rem; line-height: 1.5; }
.eo-tip b { color: #f0c27b; }

.eo-drop { position: relative; margin-top: 22px; border-radius: 26px; padding: 2px; background: conic-gradient(from var(--eoA, 0deg), #a3214a, #f0c27b, #6b4fcf, #a3214a); animation: eoBorder 8s linear infinite; }
@property --eoA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes eoSpin { to { transform: rotate(360deg); } }
@keyframes eoBorder { to { --eoA: 360deg; } }
.eo-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.eo-drop-in { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; border-radius: 24px; background: #1b1320f2; cursor: pointer; text-align: center; transition: background .25s; }
.eo-drop-in:hover, .eo-drop.is-over .eo-drop-in { background: #241a2bf2; }
.eo-file:focus-visible + .eo-drop-in { outline: 2px solid #f0c27b; outline-offset: 4px; }
.eo-drop-in strong { font-size: 1.2rem; color: #fff; }
.eo-drop-in > span:last-child { color: #bfae95; font-size: .92rem; }
.eo-drop-ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; background: radial-gradient(circle, #e3567f55, transparent 70%); border: 1px solid #f0c27b66; animation: eoPulse 2.4s ease-in-out infinite; }
.eo-drop-ring span { font-size: 2rem; color: #f0c27b; line-height: 1; }
@keyframes eoPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px #e3567f14; } }
.eo-steps { list-style: none; margin: 0; padding: 14px 18px 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; background: #1b1320f2; border-radius: 0 0 24px 24px; }
.eo-steps li { display: flex; align-items: center; gap: 8px; color: #8f8191; font-size: .9rem; transition: color .3s; }
.eo-steps li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
.eo-steps li.is-on { color: #f0c27b; } .eo-steps li.is-on::before { border-top-color: transparent; animation: eoSpin 0.8s linear infinite; }
.eo-steps li.is-done { color: #4fbf8f; } .eo-steps li.is-done::before { background: currentColor; }
.eo-msg { min-height: 1.4em; margin: 0; padding: 6px 18px 14px; text-align: center; color: #f0c27b; background: #1b1320f2; border-radius: 0 0 24px 24px; }
.eo-steps:not([hidden]) + .eo-msg { border-radius: 0 0 24px 24px; }
.eo-drop:has(.eo-steps:not([hidden])) .eo-drop-in { border-radius: 24px 24px 0 0; }

.eo-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; align-items: start; animation: eoIn .8s cubic-bezier(.2, .8, .2, 1); }
@keyframes eoIn { from { opacity: 0; transform: translateY(24px); } }
.eo-photo { border-radius: 22px; overflow: hidden; border: 1px solid #ffffff26; box-shadow: 0 30px 60px -30px #000; }
.eo-canvas { width: 100%; height: auto; display: block; background: #111; }
.eo-read { padding: 22px; border-radius: 22px; background: linear-gradient(160deg, #ffffff14, #ffffff06); border: 1px solid #ffffff1f; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.eo-lines { display: grid; gap: 12px; }
.eo-line { padding: 12px 14px; border-radius: 14px; background: #ffffff0a; border-left: 4px solid var(--c, #a3214a); color: #d8cdbf; line-height: 1.55; opacity: 0; transform: translateX(14px); animation: eoLine .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.eo-line:nth-child(2) { animation-delay: .15s; } .eo-line:nth-child(3) { animation-delay: .3s; }
@keyframes eoLine { to { opacity: 1; transform: none; } }
.eo-line strong { display: flex; align-items: center; gap: 8px; color: #fff; margin-bottom: 4px; }
.eo-line strong::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #a3214a); box-shadow: 0 0 10px var(--c, #a3214a); }
.eo-hand { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #f0c27b22, #e3567f18); border: 1px solid #f0c27b44; color: #efe3d1; line-height: 1.55; }
.eo-hand strong { color: #f0c27b; }
.eo-note { color: #bfae95; font-size: .92rem; line-height: 1.55; }
.eo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.eo-again { padding: .65rem 1.1rem; border-radius: 999px; border: 1px solid #ffffff40; background: transparent; color: #efe3d1; font: inherit; cursor: pointer; }
.eo-again:hover { border-color: #f0c27b; color: #fff; }
.eo-small { font-size: .8rem; color: #9f9083; margin-bottom: 0; }

@media (max-width: 820px) { .eo-hero, .eo-result { grid-template-columns: 1fr; } .eo-hero-art .hand3d { max-width: 240px; } .eo-tips { grid-template-columns: 1fr; } .eo-hero .uc-lead { text-align: left; } }
@media (prefers-reduced-motion: reduce) {
  .eo-hero h1 em, .eo-drop, .eo-drop-ring, .eo-result, .eo-line { animation: none; }
  .eo-line { opacity: 1; transform: none; }
}

.eo-hero-art .hand3d { max-width: 330px; filter: drop-shadow(0 24px 40px rgba(227, 86, 127, .25)); }
.eo-page .h3-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }