/* =========================================================
   Kutu – tasarım sistemi
   Inter tipografi, mavi marka rengi, yumuşak yüzeyler,
   koyu hero, pill menü, bento ızgara, premium gölgeler.
   ========================================================= */

:root {
    --marka-50: #eef3ff;
    --marka-100: #dbe5ff;
    --marka-200: #b9ccff;
    --marka-300: #8aa9ff;
    --marka-400: #5b84ff;
    --marka-500: #2f63ff;
    --marka-600: #1f4ef0;
    --marka-700: #1a3fc4;
    --marka-800: #19359a;
    --marka-900: #172f78;

    --murekkep: #0b1220;
    --murekkep-2: #1f2937;
    --gri: #64748b;
    --gri-2: #94a3b8;
    --cizgi: rgba(15, 23, 42, 0.08);
    --zemin: #f6f8fc;
    --yuzey: #ffffff;
    --koyu: #07090f;
    --koyu-2: #0d1120;
    --cam-koyu: rgba(13, 17, 32, 0.72);

    --golge-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --golge-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --golge-md: 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
    --golge-lg: 0 30px 70px -30px rgba(23, 47, 120, 0.35), 0 10px 24px -14px rgba(15, 23, 42, 0.12);
    --golge-marka: 0 14px 34px -12px rgba(47, 99, 255, 0.55);

    --yuvarlak: 18px;
    --yuvarlak-lg: 28px;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--murekkep);
    background: var(--zemin);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}
::selection { background: var(--marka-200); color: var(--marka-900); }

/* ---------- Tipografi ---------- */
.baslik-mega { font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.baslik-dev { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.baslik-buyuk { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(2rem, 3.8vw, 3rem); }
.baslik-orta { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.metin-gradyan { background: linear-gradient(100deg, var(--marka-600) 0%, var(--marka-400) 45%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metin-beyaz-gradyan { color: #fff; }
.metin-neon { color: #7da3ff; }
.ustbilgi { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marka-600); }

/* ---------- Aurora (iç sayfalar) ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora::before, .aurora::after, .aurora .top { content: ""; position: absolute; border-radius: 9999px; filter: blur(90px); opacity: 0.5; animation: yuz 18s ease-in-out infinite alternate; }
.aurora::before { width: 60vw; height: 60vw; left: -18vw; top: -28vw; background: radial-gradient(circle, #9db7ff 0%, rgba(157, 183, 255, 0) 65%); }
.aurora::after { width: 50vw; height: 50vw; right: -14vw; top: -10vw; background: radial-gradient(circle, #d7c6ff 0%, rgba(215, 198, 255, 0) 65%); animation-delay: -7s; }
.aurora .top { width: 40vw; height: 40vw; left: 32vw; top: 12vw; background: radial-gradient(circle, #bfe4ff 0%, rgba(191, 228, 255, 0) 65%); animation-delay: -12s; opacity: .4; }
@keyframes yuz { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw, 3vw, 0) scale(1.08); } }

/* ---------- Pill menü ---------- */
.pill-nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(1120px, calc(100% - 24px)); }
.pill-nav .pill { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .55rem .45rem .9rem; border-radius: 999px;
    background: var(--cam-koyu); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 40px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); color: #fff; }
.pill-nav nav a { color: rgba(255,255,255,.72); transition: color .15s; } .pill-nav nav a:hover { color: #fff; }
.pill-nav .btn-hayalet { color: rgba(255,255,255,.8); } .pill-nav .btn-hayalet:hover { background: rgba(255,255,255,.08); color: #fff; }
.pill-nav .btn-beyaz { background: #fff; color: var(--koyu); border-color: transparent; }
.pill-nav .marka-logo { box-shadow: 0 0 0 4px rgba(47,99,255,.18); }
.pill-nav [data-dil-liste] { color: var(--murekkep); }
.pill-nav [data-dil-liste] a { color: var(--murekkep-2); }
body.ic-sayfa { padding-top: 84px; }

/* ---------- Cam üst çubuk (panel) ---------- */
.cam { background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(15,23,42,.06); }

/* ---------- Koyu hero ---------- */
.hero-koyu { position: relative; background: var(--koyu); color: #fff; overflow: hidden; isolation: isolate; }
.hero-koyu::before { content: ""; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(47,99,255,.55), transparent 60%),
        radial-gradient(700px 420px at 85% 20%, rgba(124,58,237,.35), transparent 60%),
        radial-gradient(600px 400px at 10% 30%, rgba(14,165,233,.22), transparent 60%); }
.hero-koyu::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 80%); }
.hero-koyu .gurultu { position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero-koyu .cizgi-isik { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent); transform: translateX(-50%); z-index: -1; opacity: .5; }
.hero-koyu .alt-gecis { position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; background: linear-gradient(180deg, transparent, var(--zemin)); z-index: 1; pointer-events: none; }

.rozet-cam { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.85); backdrop-filter: blur(10px); }
.rozet-cam .nokta { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.2); }

/* ---------- Yüzen yükleyici sahnesi ---------- */
.sahne { position: relative; }
.sahne .cihaz { transform: none; }
.sahne .cihaz .kart-lg { border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); }
.sahne .halo { position: absolute; inset: -12% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 40%, rgba(47,99,255,.45), transparent 70%); filter: blur(30px); }
.yuzen { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem .55rem .55rem; border-radius: 14px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: #fff; font-size: .8rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); animation: suzul 7s ease-in-out infinite; z-index: 2; }
.yuzen .dosya-ikon { width: 30px; height: 30px; border-radius: 8px; font-size: 9px; }
.yuzen small { display: block; color: rgba(255,255,255,.55); font-size: .7rem; }
.yuzen-1 { top: -6%; left: -14%; animation-delay: -1s; }
.yuzen-2 { top: 28%; right: -16%; animation-delay: -3s; }
.yuzen-3 { bottom: 4%; left: -10%; animation-delay: -5s; }
.yuzen .tik { width: 20px; height: 20px; border-radius: 50%; background: #10b981; display: grid; place-items: center; }
@keyframes suzul { 0%,100% { transform: translateY(0) rotate(-1deg);} 50% { transform: translateY(-14px) rotate(1deg);} }
@media (max-width: 1024px) { .yuzen { display: none; } .sahne .cihaz { transform: none; } }

/* ---------- Şerit (marquee) ---------- */
.serit { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.serit-ic { display: flex; gap: .75rem; width: max-content; animation: kay 40s linear infinite; }
.serit:hover .serit-ic { animation-play-state: paused; }
.serit .cip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); font-size: .8rem; font-weight: 600; color: var(--murekkep-2); white-space: nowrap; }
.serit .cip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@keyframes kay { to { transform: translateX(-50%); } }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento > * { grid-column: span 12; }
@media (min-width: 768px) { .b-6 { grid-column: span 6; } .b-4 { grid-column: span 4; } .b-8 { grid-column: span 8; } .b-12 { grid-column: span 12; } }
@media (min-width: 1024px) { .b-5 { grid-column: span 5; } .b-7 { grid-column: span 7; } }
.bento-kart { position: relative; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--cizgi); padding: 1.6rem; display: flex; flex-direction: column; min-height: 240px; transition: transform .3s ease, box-shadow .3s ease; }
.bento-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-md); }
.bento-kart .ust { font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; margin-bottom: .35rem; }
.bento-kart p { color: var(--gri); font-size: .9rem; line-height: 1.55; }
.bento-kart .gorsel { margin-top: auto; padding-top: 1.25rem; }
.bento-koyu { background: linear-gradient(160deg, #0d1120, #142a6b); color: #fff; border-color: transparent; }
.bento-koyu p { color: rgba(255,255,255,.7); }
.bento-mavi { background: linear-gradient(160deg, #eef3ff, #fff); }
.mini-satir { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); font-size: .8rem; }
.mini-satir + .mini-satir { margin-top: .4rem; }
.mini-link { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-family: ui-monospace, monospace; font-size: .78rem; }
.sayac-mini { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--marka-500) 70%, #e9eefb 0); position: relative; flex-shrink: 0; }
.sayac-mini::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.sayac-mini span { position: relative; font-weight: 800; font-size: 1.1rem; }
.kilit-cizgi { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--marka-300), var(--marka-500)); }

/* ---------- Zaman çizgisi ---------- */
.adimlar { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.adimlar::before { content: ""; position: absolute; left: 10%; right: 10%; top: 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(15,23,42,.15), rgba(15,23,42,.15), transparent); }
.adim .no { width: 56px; height: 56px; border-radius: 18px; background: #fff; border: 1px solid var(--cizgi); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; box-shadow: var(--golge-sm); position: relative; }
.adim .no::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1px dashed rgba(47,99,255,.35); }
@media (max-width: 767px) { .adimlar { grid-template-columns: 1fr; } .adimlar::before { display: none; } }

/* ---------- Scroll reveal ---------- */
.acil { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.acil.goster { opacity: 1; transform: none; }
.acil-2 { transition-delay: .1s; } .acil-3 { transition-delay: .2s; } .acil-4 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .acil { opacity: 1; transform: none; transition: none; } .yuzen, .serit-ic, .aurora::before, .aurora::after, .aurora .top { animation: none; } }

/* ---------- Kartlar ---------- */
.kart { color: var(--murekkep); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); box-shadow: var(--golge-sm); }
.kart-lg { color: var(--murekkep); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-lg); box-shadow: var(--golge-lg); }
.kart-hover { transition: transform .25s ease, box-shadow .25s ease; }
.kart-hover:hover { transform: translateY(-3px); box-shadow: var(--golge-md); }
.kart-koyu { background: linear-gradient(145deg, #0f1a3a 0%, #142a6b 55%, #1d3fb8 100%); color: #fff; border-radius: var(--yuvarlak-lg); box-shadow: var(--golge-lg); position: relative; overflow: hidden; }
.kart-koyu::after { content: ""; position: absolute; width: 60%; height: 140%; right: -20%; top: -20%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.fiyat-kart { border-radius: 24px; border: 1px solid var(--cizgi); background: #fff; padding: 1.75rem; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.fiyat-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-md); }
.fiyat-kart.one { background: var(--koyu); color: #fff; border-color: transparent; box-shadow: 0 30px 60px -30px rgba(7,9,15,.6); }
.fiyat-kart.one p, .fiyat-kart.one .sol { color: rgba(255,255,255,.65); }

/* ---------- Butonlar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: .925rem; line-height: 1; padding: .8rem 1.25rem; border-radius: 14px; border: 1px solid transparent; transition: all .18s ease; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-marka { background: linear-gradient(180deg, var(--marka-500), var(--marka-600)); color: #fff; box-shadow: var(--golge-marka), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-marka:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 40px -12px rgba(47,99,255,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-marka:active { transform: translateY(0); }
.btn-koyu { background: var(--murekkep); color: #fff; }
.btn-koyu:hover:not(:disabled) { background: #1b2740; transform: translateY(-1px); }
.btn-beyaz { background: #fff; color: var(--murekkep); border-color: var(--cizgi); box-shadow: var(--golge-xs); }
.btn-beyaz:hover:not(:disabled) { border-color: rgba(15,23,42,.18); transform: translateY(-1px); box-shadow: var(--golge-sm); }
.btn-hayalet { background: transparent; color: var(--murekkep-2); }
.btn-hayalet:hover:not(:disabled) { background: rgba(15,23,42,.05); }
.btn-tehlike { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.btn-tehlike:hover:not(:disabled) { background: #ffe4e6; }
.btn-neon { background: #fff; color: var(--koyu); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 20px 50px -16px rgba(47,99,255,.8); }
.btn-neon:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 28px 60px -16px rgba(47,99,255,.95); }
.btn-cam { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.btn-cam:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.btn-sm { padding: .55rem .9rem; font-size: .825rem; border-radius: 11px; }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.02rem; border-radius: 16px; }
.btn-tam { width: 100%; }

/* ---------- Form ---------- */
.etiket { display: block; font-size: .8rem; font-weight: 600; color: var(--murekkep-2); margin-bottom: .4rem; }
.giris { width: 100%; background: #fff; border: 1px solid rgba(15,23,42,.12); border-radius: 12px; padding: .75rem .95rem; font-size: .95rem; color: var(--murekkep); transition: border-color .15s, box-shadow .15s; outline: none; }
.giris::placeholder { color: var(--gri-2); }
.giris:focus { border-color: var(--marka-400); box-shadow: 0 0 0 4px rgba(47,99,255,.14); }
.giris-hata { border-color: #fb7185 !important; }
.hata-metin { font-size: .8rem; color: #e11d48; margin-top: .35rem; }
.yardim { font-size: .78rem; color: var(--gri); margin-top: .35rem; }
select.giris { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }
textarea.giris { min-height: 96px; resize: vertical; }

.anahtar { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar .ray { width: 44px; height: 26px; border-radius: 999px; background: #e2e8f0; transition: background .2s; position: relative; }
.anahtar .ray::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.anahtar input:checked + .ray { background: var(--marka-500); }
.anahtar input:checked + .ray::after { transform: translateX(18px); }
.anahtar input:focus-visible + .ray { box-shadow: 0 0 0 4px rgba(47,99,255,.2); }

.segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.segment label { cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; text-align: center; font-size: .8rem; font-weight: 600; padding: .55rem .4rem; border-radius: 10px; border: 1px solid rgba(15,23,42,.1); color: var(--murekkep-2); background: #fff; transition: all .15s; }
.segment input:checked + span { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.segment input:disabled + span { opacity: .4; cursor: not-allowed; }

/* ---------- Rozet ---------- */
.rozet { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px; line-height: 1; }
.rozet-emerald { background: #ecfdf5; color: #047857; }
.rozet-amber { background: #fffbeb; color: #b45309; }
.rozet-rose { background: #fff1f2; color: #be123c; }
.rozet-slate { background: #f1f5f9; color: #475569; }
.rozet-marka { background: var(--marka-50); color: var(--marka-700); }
.rozet-mor { background: #f5f3ff; color: #6d28d9; }

/* ---------- Yükleyici ---------- */
.birakma { position: relative; border: 1.5px dashed rgba(47,99,255,.35); border-radius: 20px; background: linear-gradient(180deg, #fbfcff, #f3f6ff); transition: all .2s ease; cursor: pointer; }
.birakma:hover, .birakma.surukleniyor { border-color: var(--marka-500); background: linear-gradient(180deg, #f3f6ff, #e9efff); box-shadow: inset 0 0 0 4px rgba(47,99,255,.08); }
.birakma.surukleniyor .birakma-ikon { transform: translateY(-4px) scale(1.06); }
.birakma-ikon { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(180deg, var(--marka-400), var(--marka-600)); color: #fff; display: grid; place-items: center; box-shadow: var(--golge-marka); transition: transform .2s; }

.dosya-satir { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); }
.dosya-ikon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #fff; text-transform: uppercase; flex-shrink: 0; }
.ikon-gorsel { background: linear-gradient(135deg, #f472b6, #db2777); }
.ikon-video { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ikon-ses { background: linear-gradient(135deg, #34d399, #059669); }
.ikon-arsiv { background: linear-gradient(135deg, #fbbf24, #d97706); }
.ikon-pdf { background: linear-gradient(135deg, #fb7185, #e11d48); }
.ikon-belge { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ikon-dosya { background: linear-gradient(135deg, #94a3b8, #475569); }

.ilerleme { height: 6px; border-radius: 999px; background: #e9eefb; overflow: hidden; }
.ilerleme > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marka-400), var(--marka-600)); transition: width .2s ease; }

.halka { --yuzde: 0; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--marka-500) calc(var(--yuzde) * 1%), #e9eefb 0); }
.halka::before { content: ""; position: absolute; inset: 12px; background: #fff; border-radius: 50%; box-shadow: inset 0 1px 4px rgba(15,23,42,.06); }
.halka > div { position: relative; text-align: center; }

/* ---------- Sayaç (indirme sayfası) ---------- */
.sayac { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--marka-500) calc(var(--yuzde, 0) * 1%), #e9eefb 0); }
.sayac::before { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%; }
.sayac span { position: relative; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.reklam { border: 1px dashed rgba(15,23,42,.14); border-radius: 14px; background: #fafbfe; min-height: 90px; display: grid; place-items: center; color: var(--gri-2); font-size: .75rem; overflow: hidden; }
.reklam:empty { display: none; }

/* ---------- Yan menü (panel) ---------- */
.yan { width: 264px; background: #fff; border-right: 1px solid var(--cizgi); }
.yan-link { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: 12px; font-size: .9rem; font-weight: 500; color: var(--murekkep-2); transition: all .15s; }
.yan-link:hover { background: rgba(15,23,42,.045); color: var(--murekkep); }
.yan-link.aktif { background: var(--marka-50); color: var(--marka-700); font-weight: 600; }
.yan-link svg { width: 19px; height: 19px; opacity: .8; }
.yan-link.aktif svg { opacity: 1; }

/* ---------- Tablo ---------- */
.tablo { width: 100%; font-size: .875rem; }
.tablo th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gri); font-weight: 600; padding: .75rem 1rem; border-bottom: 1px solid var(--cizgi); background: #fafbfe; }
.tablo td { padding: .85rem 1rem; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: #fafbff; }
.tablo-sar { overflow-x: auto; }

/* ---------- İstatistik ---------- */
.ist { padding: 1.25rem 1.4rem; }
.ist .deger { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.ist .ad { font-size: .8rem; color: var(--gri); margin-top: .5rem; font-weight: 500; }

/* ---------- Bildirim ---------- */
.bayrak { border-radius: 14px; padding: .85rem 1rem; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; }
.bayrak-basari { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bayrak-hata { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.bayrak-bilgi { background: var(--marka-50); color: var(--marka-800); border: 1px solid var(--marka-100); }

/* ---------- Sekmeler ---------- */
.sekmeler { display: flex; gap: .25rem; padding: .3rem; background: #eef2f9; border-radius: 14px; width: fit-content; max-width: 100%; overflow-x: auto; }
.sekmeler a { padding: .5rem .9rem; border-radius: 10px; font-size: .85rem; font-weight: 600; color: var(--gri); white-space: nowrap; }
.sekmeler a.aktif { background: #fff; color: var(--murekkep); box-shadow: var(--golge-xs); }

/* ---------- Animasyonlar ---------- */
@keyframes belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.belir { animation: belir .6s cubic-bezier(.2,.8,.2,1) both; }
.belir-2 { animation-delay: .1s; } .belir-3 { animation-delay: .2s; } .belir-4 { animation-delay: .3s; }
@keyframes nabiz { 0%,100% { box-shadow: 0 0 0 0 rgba(47,99,255,.35);} 70% { box-shadow: 0 0 0 14px rgba(47,99,255,0);} }
.nabiz { animation: nabiz 2s infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.don { animation: don 1s linear infinite; }

/* ---------- Yardımcı ---------- */
.kes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.kopyalandi { background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important; }
.marka-logo { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--marka-400), var(--marka-700)); display: grid; place-items: center; color: #fff; box-shadow: var(--golge-marka); }
.ozellik-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--marka-50); color: var(--marka-600); }

@media (max-width: 1024px) { .yan { display: none; } }

/* ---------- Kompakt yükleyici (hero) ---------- */
.kompakt .birakma { padding: 1.1rem 1rem; border-radius: 16px; }
.kompakt .birakma-ikon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: .5rem; }
.kompakt .birakma-ikon svg { width: 20px; height: 20px; }
.kompakt .giris { padding: .62rem .8rem; font-size: .875rem; border-radius: 10px; }
.kompakt textarea.giris { min-height: 52px !important; }
.kompakt .etiket { font-size: .74rem; margin-bottom: .3rem; }
.kompakt form { gap: .7rem; }
.kompakt form.space-y-4 > * + * { margin-top: .7rem; }
.kompakt .btn-lg { padding: .85rem 1.2rem; font-size: .95rem; border-radius: 13px; }