:root {
  --mavi: #3D6A9E;
  --mavi-koyu: #2C4F78;
  --mavi-acik: #DCE7F3;
  --yesil: #2F8F5B;
  --zemin: #F6F8FB;
  --kart: #FFFFFF;
  --kutu: #EDF2F8;
  --cizgi: #DDE3EA;
  --yazi: #1B2430;
  --soluk: #5A6675;
  --golge: 0 1px 2px rgba(20,40,70,.06), 0 8px 24px rgba(20,40,70,.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --mavi: #84AADA;
    --mavi-koyu: #A9C5EA;
    --mavi-acik: #22324A;
    --yesil: #5CC28A;
    --zemin: #11161C;
    --kart: #18202A;
    --kutu: #1C2531;
    --cizgi: #2A3542;
    --yazi: #E7ECF2;
    --soluk: #9CA8B6;
    --golge: none;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font: 16px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mavi); }
img, svg { max-width: 100%; }
.sar { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ust menu */
.ust { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.ust .sar { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.marka { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--yazi); text-decoration: none; }
.marka svg { width: 28px; height: 28px; flex: none; }
.menu { display: flex; gap: 18px; font-size: .95rem; }
.menu a { color: var(--soluk); text-decoration: none; }
.menu a:hover { color: var(--mavi); }
@media (max-width: 640px) { .menu .gizle-mobil { display: none; } .menu { gap: 14px; } }

/* giris */
.giris { padding: 56px 0 40px; }
.giris .sar { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .giris .sar { grid-template-columns: 1fr; } .giris { padding-top: 32px; } }
.rozet { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--mavi-acik);
  color: var(--mavi-koyu); font-size: .85rem; font-weight: 600; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.15; margin: 14px 0 14px; letter-spacing: -.02em; }
h1 span { color: var(--mavi); }
.giris p.ozet { font-size: 1.12rem; color: var(--soluk); margin: 0 0 24px; max-width: 34em; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.dugme { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px;
  font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.dugme.ana { background: var(--mavi); color: #fff; }
.dugme.ana:hover { background: var(--mavi-koyu); }
.dugme.ikinci { border-color: var(--cizgi); color: var(--yazi); background: var(--kart); }
.not { font-size: .85rem; color: var(--soluk); margin-top: 14px; }

/* bolumler */
section.bolum { padding: 48px 0; }
section.bolum.koyu { background: var(--kutu); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; letter-spacing: -.01em; }
.bolum p.alt { color: var(--soluk); margin: 0 0 28px; max-width: 40em; }
.izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .izgara { grid-template-columns: 1fr; } }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px; box-shadow: var(--golge); }
.kart h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.kart p { margin: 0; color: var(--soluk); font-size: .96rem; }
.ikon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--mavi-acik); color: var(--mavi-koyu); }
.ikon svg { width: 22px; height: 22px; }

.adimlar { counter-reset: a; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; list-style: none; margin: 0; }
@media (max-width: 860px) { .adimlar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .adimlar { grid-template-columns: 1fr; } }
.adimlar li { counter-increment: a; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 18px; }
.adimlar li::before { content: counter(a); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mavi); color: #fff; font-weight: 700; margin-bottom: 10px; }

.fiyat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; }
@media (max-width: 640px) { .fiyat { grid-template-columns: 1fr; } }
.fiyat .kart strong { font-size: 1.6rem; display: block; color: var(--mavi); }

details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 2px; color: var(--soluk); }

ul.tik { list-style: none; padding: 0; margin: 0; }
ul.tik li { padding-left: 28px; position: relative; margin: 8px 0; }
ul.tik li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--yesil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
ul.carpi li::before { background: #B4483F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }

/* metin sayfalari */
.metin { max-width: 760px; margin: 0 auto; padding: 40px 16px 56px; }
.metin h1 { font-size: 2rem; }
.metin h2 { font-size: 1.2rem; margin: 28px 0 6px; color: var(--mavi); }
.metin p, .metin li { color: var(--yazi); }
.metin .tarih { color: var(--soluk); margin-top: -6px; }
.metin .kutu { background: var(--kutu); border-radius: 12px; padding: 16px 20px; margin-top: 28px; }

/* alt bilgi */
footer { border-top: 1px solid var(--cizgi); padding: 28px 0 40px; color: var(--soluk); font-size: .9rem; }
footer .sar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--soluk); }

/* ------- animasyon sahnesi ------- */
.sahne { width: 100%; aspect-ratio: 1 / .82; }
.sahne .telefon-govde { fill: var(--kart); stroke: var(--yazi); }
.sahne .ekran { fill: var(--kutu); }
.sahne .kablo { fill: none; stroke: var(--soluk); stroke-width: 5; stroke-linecap: round; }
.sahne .akis { fill: none; stroke: var(--mavi); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 28;
  animation: akis 1.1s linear infinite; opacity: 0; }
.sahne .okuyucu { fill: var(--yazi); }
.sahne .yazi { fill: var(--soluk); font: 600 13px system-ui, sans-serif; }

.sahne .kartg { animation: kartGir 6s cubic-bezier(.4,.1,.2,1) infinite; }
.sahne .akis { animation: akis 1.1s linear infinite, gorun 6s infinite; }
.sahne .led { animation: led 6s infinite; }
.sahne .pin { animation: pin 6s infinite; opacity: 0; }
.sahne .tamam { animation: tamam 6s infinite; opacity: 0; transform-origin: 160px 190px; }
.sahne .bekle { animation: bekle 6s infinite; }

@keyframes kartGir { 0% { transform: translate(90px,0); opacity: 0; } 12% { opacity: 1; }
  28%, 88% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(90px,0); opacity: 0; } }
@keyframes akis { to { stroke-dashoffset: -38; } }
@keyframes gorun { 0%, 30% { opacity: 0; } 34%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes led { 0%, 28% { fill: #8A96A3; } 32%, 88% { fill: #3CCB7F; } 92%, 100% { fill: #8A96A3; } }
@keyframes pin { 0%, 36% { opacity: 0; } 40%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tamam { 0%, 64% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); }
  74%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes bekle { 0%, 34% { opacity: 1; } 38%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sahne * { animation: none !important; }
  .sahne .akis, .sahne .tamam { opacity: 1; }
  .sahne .bekle, .sahne .pin { opacity: 0; }
}