@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(fonts/inter-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
:root {
  --zemin: #f4f6fa;
  --yazi: #14213d;
  --soluk: #55627a;
  --vurgu: #2f6be8;
  --cerceve: #1b1f27;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--zemin); color: var(--yazi); font-family: Inter, system-ui, sans-serif; }
.demo { max-width: 1120px; margin: 0 auto; padding: 16px 16px 20px; }

.secici { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.secici button {
  font: inherit; font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 999px;
  border: 1px solid #d6dce7; background: #fff; color: var(--yazi); cursor: pointer; min-height: 44px;
}
.secici button[aria-pressed="true"] { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.secici button:focus-visible, .ekstra:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 2px; }

/* Cihaz: 7 inc panel, ince siyah cerceve */
.cihaz {
  background: var(--cerceve); border-radius: 28px; padding: 22px;
  box-shadow: 0 30px 60px rgba(20, 33, 61, 0.25), inset 0 0 0 2px #2c313b;
  max-width: 1068px; margin: 0 auto;
}
.ekran {
  position: relative; width: 100%; aspect-ratio: 1024 / 600; overflow: hidden;
  border-radius: 6px; background: #000; user-select: none; -webkit-user-select: none;
}
.katman, .yazilar, .alanlar { position: absolute; inset: 0; }
.katman img.goruntu {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: transform 0.34s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease;
}
.katman img.sagdan { transform: translateX(100%); }
.katman img.soldan { transform: translateX(-100%); }
.katman img.soluk { opacity: 0; }
.katman img.yerinde { transform: none; opacity: 1; }
.katman img.solagit { transform: translateX(-100%); }
.katman img.sagagit { transform: translateX(100%); }

.alanlar .alan {
  position: absolute; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 14px; -webkit-tap-highlight-color: transparent;
}
.alanlar .alan:hover { background: rgba(47, 107, 232, 0.08); }
.alanlar .alan:active { background: rgba(20, 33, 61, 0.12); }
.alanlar .yama { position: absolute; pointer-events: none; }

.yazilar .yazi { position: absolute; display: flex; align-items: center; justify-content: center; color: #182842; font-weight: 600; white-space: nowrap; }

.ipucu {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  background: rgba(20, 33, 61, 0.86); color: #fff; font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; pointer-events: none;
  animation: nabiz 1.8s ease-in-out infinite;
}
.ipucu.gizli { display: none; }
@keyframes nabiz { 50% { opacity: 0.55; } }

.alt { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; margin-top: 22px; }
.bilgi { flex: 1 1 420px; }
.bilgi h2 { margin: 0 0 6px; font-size: 20px; }
.bilgi p { margin: 0 0 6px; color: var(--soluk); font-size: 15px; line-height: 1.5; }
.bilgi .aciklama { color: var(--yazi); font-weight: 500; }
.ekstra-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.ekstra {
  font: inherit; font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 12px; min-height: 44px;
  border: 0; background: #2bc4a4; color: #04241d; cursor: pointer;
}
.dipnot { text-align: center; color: var(--soluk); font-size: 13px; margin-top: 24px; }

@media (max-width: 600px) {
  .cihaz { padding: 10px; border-radius: 16px; }
  .ipucu { font-size: 12px; }
}

.yazilar .yazi.sol { justify-content: flex-start; padding-left: 0.4%; }
.yazilar .yazi.mavi { color: #296dd6; }
.alanlar .alan.basili { background: rgba(255, 255, 255, 0.18); }
.alanlar .alan .dolum {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: rgba(255, 255, 255, 0.35); animation: dolum linear forwards;
}
@keyframes dolum { to { width: 100%; } }
.alanlar .alan.yuvarlak { border-radius: 50%; overflow: hidden; }

html, body { background: transparent; }