/* serbestis.com — Taslak D (onaylı) tasarımından; sayfa stilleri en altta */
/* Layout: sol tarafta geniş harfli başlık, sağda canlı "iş akışı" SVG'si (proje → web/mobil/yapay zekâ); altında animasyonlu el yapımı ikonlu kategori ızgarası, süreç + aşamalı ödeme, hizmetler, SSS */
:root {
  --bg: #f6faf7;
  --panel: #ffffff;
  --ink: #0b1a12;
  --muted: #56685d;
  --line: #d9e5dd;
  --brand: #00bd62;
  --brand-ink: #008548;
  --brand-tint: #ddf5e8;
  --signal: #0a7cff;        /* yapay zekâ / veri paketleri için soğuk ikinci renk, az kullanılır */
  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #08110c; --panel: #0f1b14; --ink: #e7f3eb; --muted: #97ad9f; --line: #1f3127;
  --brand: #22d982; --brand-ink: #5ee8a5; --brand-tint: #10301f; --signal: #5aa8ff; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #08110c; --panel: #0f1b14; --ink: #e7f3eb; --muted: #97ad9f; --line: #1f3127;
  --brand: #22d982; --brand-ink: #5ee8a5; --brand-tint: #10301f; --signal: #5aa8ff; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6 }
a { color: inherit }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 20px }
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.02; text-wrap: balance }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px }
.taslak-yok { font-family: var(--f-mono); font-size: 12px; background: var(--ink); color: var(--bg); text-align: center; padding: 7px 16px }
.taslak-yok b { color: var(--brand); font-weight: 500 }

header .wrap { display: flex; align-items: center; gap: 26px; height: 68px }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: 21px; letter-spacing: -.02em }
.logo svg { width: 30px; height: 30px }
.logo em { font-style: normal; color: var(--brand-ink) }
header nav { display: flex; gap: 20px; font-weight: 600; font-size: 15px; color: var(--muted) }
header nav a { text-decoration: none } header nav a:hover { color: var(--ink) }
header .sag { margin-left: auto; display: flex; gap: 10px; align-items: center }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 18px; font: 700 15px var(--f-body); text-decoration: none; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; transition: transform .2s, border-color .2s }
.btn:hover { transform: translateY(-2px); border-color: var(--ink) }
.btn.ana { background: var(--brand); border-color: var(--brand); color: #031409 }
.btn.ana:hover { border-color: var(--brand-ink); background: var(--brand-ink); color: #fff }
@media (max-width: 860px) { header nav, header .sag .gir { display: none } }

/* Hero */
.hero { padding-block: 52px 40px }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center }
.kod-etiket { font-family: var(--f-mono); font-size: 12.5px; color: var(--brand-ink); display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px }
.kod-etiket i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 var(--brand); animation: nabiz 2.2s infinite }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent) } 70% { box-shadow: 0 0 0 9px transparent } 100% { box-shadow: 0 0 0 0 transparent } }
.hero h1 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 3.9rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.035em; margin-block: 18px 16px }
.hero h1 .ince { font-weight: 500; font-stretch: 90%; color: var(--muted) }
.hero p.giris { color: var(--muted); font-size: 1.12rem; max-width: 32em; margin: 0 0 24px }
.komut { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 16px; padding: 7px 7px 7px 16px; max-width: 560px }
.komut:focus-within { border-color: var(--brand) }
.komut span { font-family: var(--f-mono); color: var(--brand-ink); font-size: 15px }
.komut input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 500 16.5px var(--f-body); color: var(--ink); padding-block: 9px }
.etiketler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px }
.etiketler a { font-family: var(--f-mono); font-size: 12.5px; text-decoration: none; color: var(--muted); border: 1px dashed var(--line); padding: 4px 10px; border-radius: 8px }
.etiketler a:hover { color: var(--brand-ink); border-color: var(--brand) }

.akis { width: 100%; max-width: 100%; height: auto; display: block }
.akis .kart-r { fill: var(--panel); stroke: var(--line); stroke-width: 1.5 }
.akis .yol { fill: none; stroke: var(--line); stroke-width: 2 }
.akis .yol-akan { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 6 10; animation: akis 1.4s linear infinite }
.akis .yol-akan.ai { stroke: var(--signal) }
@keyframes akis { to { stroke-dashoffset: -32 } }
.akis .dugum { fill: var(--panel); stroke: var(--ink); stroke-width: 1.8 }
.akis .dugum-ic { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.akis .yazi { font-family: var(--f-mono); font-size: 11px; fill: var(--muted) }
.akis .yazi-k { font-family: var(--f-body); font-weight: 700; font-size: 14px; fill: var(--ink) }
.akis .paket { fill: var(--brand) } .akis .paket.ai { fill: var(--signal) }
.akis .halka { fill: none; stroke: var(--brand); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: halka 2.6s ease-out infinite }
.akis .halka.ai { stroke: var(--signal); animation-delay: 1.3s }
@keyframes halka { 0% { transform: scale(.8); opacity: .9 } 100% { transform: scale(1.5); opacity: 0 } }
.akis .imlec { fill: var(--brand); animation: yanson 1s steps(1) infinite }
@keyframes yanson { 50% { opacity: 0 } }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr } }

/* Kategoriler + animasyonlu ikonlar */
section.blok { padding-block: 60px }
.bas { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap }
.bas h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.03em }
.bas p { margin: 6px 0 0; color: var(--muted); max-width: 40em }
.bas a { font-weight: 700; color: var(--brand-ink); text-decoration: none }
.kat-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.kat { background: var(--panel); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px; text-decoration: none; display: grid; gap: 12px; align-content: start; transition: border-color .2s, transform .2s }
.kat:hover { border-color: var(--ink); transform: translateY(-3px) }
.kat svg { width: 64px; height: 64px }
.kat svg .c { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.kat svg .y { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.kat svg .yd { fill: var(--brand) }
.kat svg .sd { fill: var(--signal) }
.kat h3 { font-size: 1.15rem; font-weight: 800; font-stretch: 105% }
.kat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5 }
.kat .kod { font-family: var(--f-mono); font-size: 11.5px; color: var(--brand-ink) }
/* ikon animasyonları */
.i-imlec { animation: yanson 1.1s steps(1) infinite }
.i-bildirim { transform-box: fill-box; transform-origin: center; animation: bildir 2.4s ease-in-out infinite }
@keyframes bildir { 0%, 55%, 100% { transform: translateY(0) } 65% { transform: translateY(-5px) } 75% { transform: translateY(0) } 82% { transform: translateY(-2px) } }
.i-noron { animation: noron 1.8s ease-in-out infinite } .i-noron.n2 { animation-delay: .3s } .i-noron.n3 { animation-delay: .6s } .i-noron.n4 { animation-delay: .9s }
@keyframes noron { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.i-bar { transform-box: fill-box; transform-origin: bottom; animation: bar 2.6s ease-in-out infinite }
.i-bar.b2 { animation-delay: .2s } .i-bar.b3 { animation-delay: .4s }
@keyframes bar { 0%, 100% { transform: scaleY(.55) } 50% { transform: scaleY(1) } }
.i-egri { stroke-dasharray: 90; stroke-dashoffset: 90; animation: ciz 3s ease-in-out infinite }
@keyframes ciz { 0% { stroke-dashoffset: 90 } 50%, 80% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -90 } }
.i-disli { transform-box: fill-box; transform-origin: center; animation: don 6s linear infinite }
.i-disli.ters { animation-direction: reverse; animation-duration: 4s }
@keyframes don { to { transform: rotate(360deg) } }
@media (max-width: 880px) { .kat-izgara { grid-template-columns: 1fr 1fr } }
@media (max-width: 540px) { .kat-izgara { grid-template-columns: 1fr } }

/* Süreç + ödeme */
.surec { background: var(--panel); border-block: 1px solid var(--line) }
.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: a }
.adim { counter-increment: a }
.adim::before { content: "0" counter(a); font-family: var(--f-mono); font-size: 13px; color: var(--brand-ink); display: block; margin-bottom: 8px }
.adim h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px }
.adim p { margin: 0; color: var(--muted) }
@media (max-width: 760px) { .adimlar { grid-template-columns: 1fr } }
.odeme { margin-top: 44px; padding-top: 36px; border-top: 1px dashed var(--line) }
.odeme h3 { font-size: 1.45rem; font-weight: 800 }
.odeme > p { margin: 6px 0 26px; color: var(--muted); max-width: 44em }
.asama { display: grid; grid-template-columns: repeat(4, 1fr) }
.asama div { padding: 20px 18px 0 0; border-top: 6px solid var(--line); position: relative }
.asama div.ok { border-color: var(--brand) }
.asama div::before { content: ""; position: absolute; top: -12px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 4px solid var(--line) }
.asama div.ok::before { border-color: var(--brand); background: var(--brand) }
.asama div.simdi::before { border-color: var(--brand); animation: nabiz 2.2s infinite }
.asama b { display: block; font-family: var(--f-display); font-size: 1.1rem }
.asama span { color: var(--muted); font-size: 14.5px; display: block }
.asama .tutar { font-family: var(--f-mono); color: var(--ink); font-size: 13px; margin-top: 6px }
.asama .tutar em { font-style: normal; color: var(--brand-ink) }
@media (max-width: 760px) { .asama { grid-template-columns: 1fr 1fr; row-gap: 30px } }

/* Hizmetler */
.hizmetler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px }
.hizmet { background: var(--panel); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px; text-decoration: none; display: grid; gap: 12px; transition: border-color .2s }
.hizmet:hover { border-color: var(--ink) }
.hizmet .ust { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted) }
.hizmet h3 { font-family: var(--f-body); font-size: 1.08rem; font-weight: 700; line-height: 1.35 }
.hizmet .alt { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 12px; font-size: 14px }
.hizmet .alt b { font-family: var(--f-mono); font-weight: 500 }
.hizmet.yeni { border-style: dashed; background: transparent }

.sss { display: grid; gap: 10px; max-width: 820px }
.sss details { background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 4px 18px }
.sss summary { cursor: pointer; font-weight: 700; padding-block: 12px; list-style: none; display: flex; justify-content: space-between; gap: 12px }
.sss summary::-webkit-details-marker { display: none }
.sss summary::after { content: "+"; font-family: var(--f-mono); color: var(--brand-ink) }
.sss details[open] summary::after { content: "−" }
.sss p { margin: 0 0 14px; color: var(--muted) }

footer { border-top: 1px solid var(--line); padding-block: 34px; font-size: 14px; color: var(--muted) }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center }
footer nav { display: flex; flex-wrap: wrap; gap: 18px } footer a { text-decoration: none } footer a:hover { color: var(--ink) }

.hero-grid > * { min-width: 0 }
.yelpaze { overflow: hidden; margin: 0 0 18px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); max-width: 620px }
.yelpaze-ic { display: flex; gap: 10px; width: max-content; animation: kay 26s linear infinite }
.yelpaze span { font-family: var(--f-mono); font-size: 13px; color: var(--brand-ink); background: var(--brand-tint); border-radius: 999px; padding: 4px 12px; white-space: nowrap }
@keyframes kay { to { transform: translateX(-50%) } }
.i-oynat { transform-box: fill-box; transform-origin: center; animation: oynat 1.8s ease-in-out infinite; fill: color-mix(in srgb, var(--brand) 25%, transparent) }
@keyframes oynat { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) } }
.i-sayfa { transform-box: view-box; transform-origin: 32px 32px; animation: sayfa 3.4s ease-in-out infinite }
@keyframes sayfa { 0%, 30% { transform: scaleX(1) } 50% { transform: scaleX(-1) } 70%, 100% { transform: scaleX(1) } }
.kat-izgara { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1060px) { .kat-izgara { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 540px) { .kat-izgara { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { .yelpaze-ic { flex-wrap: wrap; width: auto } .yelpaze-ic span[aria-hidden] { display: none } .yelpaze { mask-image: none; -webkit-mask-image: none } }

/* ---- D: uzman + ajan ---- */
.arti { display: inline-block; width: .74em; height: .74em; vertical-align: -.02em; margin-inline: .04em; animation: arti 3.2s ease-in-out infinite }
.arti rect { fill: var(--brand) } .arti path { stroke: #031409; stroke-width: 3.4; stroke-linecap: round }
@keyframes arti { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.12) } }
.sahne { position: relative; width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 560 / 440 }
.sahne svg.zemin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.sahne .platform { fill: color-mix(in srgb, var(--brand) 9%, var(--panel)); stroke: var(--line); stroke-width: 1.5 }
.sahne .bag { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 5 9; animation: akis 1.2s linear infinite }
.sahne .bag.ai { stroke: var(--signal) }
.uzman-kart { position: absolute; left: 4%; top: 2%; width: 38%; min-width: 150px; background: var(--panel); border: 1.5px solid var(--ink); border-radius: 16px; padding: 12px; display: flex; gap: 10px; align-items: center; box-shadow: 5px 5px 0 var(--brand) }
.uzman-kart .yuz { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 800 }
.uzman-kart b { display: block; font-size: 14px; line-height: 1.2 }
.uzman-kart small { font-family: var(--f-mono); font-size: 10.5px; color: var(--brand-ink) }
.ajan { position: absolute; width: 23%; max-width: 128px; animation: suzul 3.6s ease-in-out infinite }
.ajan.a1 { left: 6%; top: 40% } .ajan.a2 { left: 39%; top: 50%; animation-delay: -1.2s } .ajan.a3 { right: 5%; top: 38%; animation-delay: -2.4s }
@keyframes suzul { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
.ajan svg { width: 100%; height: auto; display: block; overflow: visible }
.ajan .govde { stroke: var(--ink); stroke-width: 2.2 }
.ajan .ekran { fill: var(--ink) }
.ajan .goz { fill: var(--bg); transform-box: fill-box; transform-origin: center; animation: kirp 4.5s infinite }
.ajan.a2 .goz { animation-delay: 1.4s } .ajan.a3 .goz { animation-delay: 2.6s }
@keyframes kirp { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
.ajan .anten { fill: var(--brand); animation: nabiz 2s infinite }
.ajan .etiket { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; font-family: var(--f-mono); font-size: 10.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px }
.cip { position: absolute; font-family: var(--f-mono); font-size: 11px; background: var(--panel); border: 1.5px solid var(--ink); border-radius: 10px; padding: 5px 9px; display: flex; gap: 6px; align-items: center; white-space: nowrap; animation: cip 9s ease-in-out infinite }
.cip i { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 9px; color: #fff; background: var(--brand) }
.cip.c1 { left: 1%; bottom: 1% } .cip.c2 { right: 0; top: 3%; animation-delay: -3s } .cip.c3 { right: 1%; bottom: 1%; animation-delay: -6s }
.cip.c2 i { background: var(--signal) }
@keyframes cip { 0%, 100% { transform: translateY(0); opacity: 1 } 45% { transform: translateY(-6px) } 50% { opacity: .55 } 55% { opacity: 1 } }
@media (max-width: 600px) { .sahne { overflow: hidden; padding-bottom: 4px } .cip { font-size: 9px; padding: 3px 6px } .cip.c2, .cip.c1 { display: none } .ajan .etiket { font-size: 8.5px; padding: 2px 5px } .uzman-kart { width: 52%; padding: 8px } .uzman-kart small { font-size: 9px } }

.ekip { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start }
.teklif-k { background: var(--panel); border: 1.5px solid var(--ink); border-radius: 20px; padding: 22px; box-shadow: 8px 8px 0 var(--brand); min-width: 0 }
.teklif-k .ust { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted) }
.teklif-k h3 { font-size: 1.35rem; font-weight: 800; margin: 8px 0 14px }
.uyeler { display: grid; gap: 8px }
.uye { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px }
.uye .yuz { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 14px }
.uye .mini { width: 38px; height: 38px }
.uye b { display: block; font-size: 14.5px; line-height: 1.25 }
.uye span { font-size: 13.5px; color: var(--muted) }
.uye code { font-family: var(--f-mono); font-size: 11px; color: var(--brand-ink); background: var(--brand-tint); padding: 1px 6px; border-radius: 5px }
.uye.insan { border-color: var(--ink) }
.fiyatlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px }
.fiyatlar div { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px }
.fiyatlar div.secili { border: 1.5px solid var(--brand); background: var(--brand-tint) }
.fiyatlar small { display: block; color: var(--muted); font-size: 12.5px }
.fiyatlar b { font-family: var(--f-mono); font-weight: 500; font-size: 16px }
.ilke { display: grid; gap: 12px }
.ilke div { background: var(--panel); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px }
.ilke h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 4px }
.ilke p { margin: 0; color: var(--muted); font-size: 14.5px }
@media (max-width: 860px) { .ekip { grid-template-columns: 1fr } }

.veri { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center }
.secenek { display: grid; gap: 10px }
.secenek label { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer }
.secenek input { margin-top: 4px; accent-color: var(--brand) }
.secenek label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint) }
.secenek b { display: block } .secenek span { font-size: 14px; color: var(--muted) }
@media (max-width: 860px) { .veri { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { .ajan, .cip, .arti { animation: none !important } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .akis .paket { display: none }
  .i-egri { stroke-dashoffset: 0 }
}