/* =====================================================================
   RADR — Karşılama (landing) sayfası
   Bağımsız (Metronic gerektirmez). İki dilli: html[lang=tr|en].
   ===================================================================== */

:root {
    --l-primary: #5b7cfa;
    --l-primary-2: #7b5bf2;
    --l-accent: #ffb020;
    --l-teal: #14b8a6;
    --l-ink: #0b1020;
    --l-ink-2: #151b31;
    --l-text: #e9edfa;
    --l-muted: #a5b0cc;
    --l-surface: #ffffff;
    --l-surface-2: #f5f7fd;
    --l-line: rgba(255, 255, 255, .12);
    --l-radius: 20px;
    --l-radius-lg: 30px;
    --l-shadow: 0 30px 70px -30px rgba(6, 10, 30, .8);
    --l-font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --l-grad: linear-gradient(120deg, #6a8bff 0%, #5b7cfa 40%, #7b5bf2 100%);
    --l-grad-accent: linear-gradient(120deg, #ffd071 0%, #ffb020 60%, #f59e0b 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.radr-landing {
    margin: 0;
    font-family: var(--l-font);
    color: var(--l-text);
    background: var(--l-ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.radr-landing a { color: inherit; text-decoration: none; }

/* Arka plan */
.radr-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1000px 700px at 12% -5%, rgba(106, 139, 255, .35), transparent 60%),
        radial-gradient(900px 620px at 95% 0%, rgba(123, 91, 242, .32), transparent 58%),
        radial-gradient(900px 700px at 60% 110%, rgba(20, 184, 166, .22), transparent 60%),
        var(--l-ink);
}

.radr-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
    animation: radr-orb 18s ease-in-out infinite;
}

.radr-orb.o1 { width: 420px; height: 420px; top: 8%; left: -120px; background: radial-gradient(circle, #5b7cfa, transparent 65%); }
.radr-orb.o2 { width: 360px; height: 360px; top: 40%; right: -120px; background: radial-gradient(circle, #ffb020, transparent 65%); animation-delay: -6s; }
.radr-orb.o3 { width: 300px; height: 300px; bottom: 6%; left: 30%; background: radial-gradient(circle, #14b8a6, transparent 65%); animation-delay: -12s; }

@keyframes radr-orb {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(30px, -40px, 0) scale(1.08); }
}

/* Grid dokusu */
.radr-grid-lines {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    pointer-events: none;
}

.landing-wrap { max-width: 1220px; margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------------
   Dil değiştirme (görünürlük)
   --------------------------------------------------------------------- */
html[lang="tr"] [data-lang-block="en"],
html[lang="en"] [data-lang-block="tr"] { display: none !important; }

/* ---------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------- */
.radr-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    background: rgba(11, 16, 32, .55);
    border-bottom: 1px solid var(--l-line);
}

.radr-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 74px;
}

.radr-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }

    .radr-brand img { height: 40px; width: auto; display: block; }

.radr-nav-links { display: flex; align-items: center; gap: 26px; }

    .radr-nav-links a {
        color: var(--l-muted);
        font-weight: 600;
        font-size: .92rem;
        transition: color .18s ease;
    }

        .radr-nav-links a:hover { color: #fff; }

.radr-nav-actions { display: flex; align-items: center; gap: 12px; }

.radr-lang {
    display: inline-flex;
    border: 1px solid var(--l-line);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
}

    .radr-lang button {
        border: 0;
        background: transparent;
        color: var(--l-muted);
        font-weight: 700;
        font-size: .78rem;
        padding: 7px 13px;
        cursor: pointer;
        transition: background-color .18s ease, color .18s ease;
    }

        .radr-lang button.active { background: var(--l-grad); color: #fff; }

.radr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    padding: 12px 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
    white-space: nowrap;
}

.radr-btn-primary { background-image: var(--l-grad); color: #fff; box-shadow: 0 16px 34px -16px rgba(91, 124, 250, .95); }

.radr-btn-accent { background-image: var(--l-grad-accent); color: #3a2700; box-shadow: 0 16px 34px -16px rgba(255, 176, 32, .95); }

.radr-btn-ghost { border-color: var(--l-line); color: #fff; background: rgba(255, 255, 255, .04); }

.radr-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }

.radr-btn-lg { padding: 15px 30px; font-size: 1rem; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.radr-hero { padding: 86px 0 70px; }

.radr-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }

.radr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--l-line);
    background: rgba(255, 255, 255, .05);
    color: var(--l-muted);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .radr-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #38f07a; box-shadow: 0 0 0 4px rgba(56, 240, 122, .22); }

.radr-hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 22px 0 18px;
    font-weight: 800;
}

.radr-grad-text { background-image: var(--l-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.radr-hero p.lead { color: var(--l-muted); font-size: 1.12rem; line-height: 1.7; max-width: 560px; margin: 0 0 30px; }

.radr-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.radr-hero-meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 38px; }

    .radr-hero-meta .item { display: flex; flex-direction: column; }

    .radr-hero-meta .num { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

    .radr-hero-meta .lbl { color: var(--l-muted); font-size: .82rem; font-weight: 600; }

/* Hero görsel kutusu */
.radr-hero-visual { position: relative; }

.radr-device {
    position: relative;
    border-radius: var(--l-radius-lg);
    border: 1px solid var(--l-line);
    background: linear-gradient(160deg, rgba(30, 38, 66, .96), rgba(15, 20, 40, .96));
    box-shadow: var(--l-shadow);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
    transition: transform .5s ease;
}

    .radr-device:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }

    .radr-device .bar {
        height: 38px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 16px;
        border-bottom: 1px solid var(--l-line);
        background: rgba(255, 255, 255, .04);
    }

        .radr-device .bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }

    .radr-device .bar i:nth-child(1) { background: #ff5f57; }
    .radr-device .bar i:nth-child(2) { background: #febc2e; }
    .radr-device .bar i:nth-child(3) { background: #28c840; }

.radr-device .body { padding: 20px; }

/* Sahte mini dashboard */
.radr-mock { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }

.radr-mock .panel {
    border-radius: 14px;
    border: 1px solid var(--l-line);
    background: rgba(255, 255, 255, .035);
    padding: 14px;
}

.radr-mock .kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.radr-mock .kpi .box {
    border-radius: 12px;
    padding: 12px;
    background-image: var(--l-grad);
    color: #fff;
    box-shadow: 0 14px 30px -18px rgba(91, 124, 250, .9);
}

    .radr-mock .kpi .box.alt { background-image: var(--l-grad-accent); color: #3a2700; }

    .radr-mock .kpi .box .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }

    .radr-mock .kpi .box .t { font-size: .74rem; opacity: .9; font-weight: 600; }

.radr-spark { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 6px; }

    .radr-spark span { flex: 1; border-radius: 6px 6px 3px 3px; background-image: var(--l-grad); opacity: .85; animation: radr-bar 2.6s ease-in-out infinite; }

        .radr-spark span:nth-child(2n) { background-image: linear-gradient(180deg, #ffb020, #f59e0b); }

@keyframes radr-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }

.radr-donut {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 6px auto;
    background: conic-gradient(#5b7cfa 0 46%, #ffb020 46% 72%, #14b8a6 72% 100%);
    position: relative;
    box-shadow: inset 0 0 0 14px rgba(11, 16, 32, .85);
}

    .radr-donut::after {
        content: "";
        position: absolute;
        inset: 34px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(30, 38, 66, .95), rgba(15, 20, 40, .95));
    }

.radr-float-card {
    position: absolute;
    bottom: -22px;
    left: -18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(19, 26, 43, .92);
    border: 1px solid var(--l-line);
    box-shadow: var(--l-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: radr-bob 4s ease-in-out infinite;
}

@keyframes radr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.radr-float-card .ring {
    width: 42px; height: 42px; border-radius: 50%;
    background-image: var(--l-grad);
    display: grid; place-items: center; color: #fff; font-weight: 800;
}

/* ---------------------------------------------------------------------
   Bölüm başlıkları
   --------------------------------------------------------------------- */
.radr-section { padding: 72px 0; }

.radr-section-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }

    .radr-section-head .kicker {
        color: var(--l-accent);
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-size: .76rem;
    }

    .radr-section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.02em; margin: 12px 0 12px; font-weight: 800; }

    .radr-section-head p { color: var(--l-muted); font-size: 1.02rem; line-height: 1.7; margin: 0; }

/* ---------------------------------------------------------------------
   Özellik kartları
   --------------------------------------------------------------------- */
.radr-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.radr-feature {
    position: relative;
    padding: 26px 24px;
    border-radius: var(--l-radius);
    border: 1px solid var(--l-line);
    background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    overflow: hidden;
}

    .radr-feature::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(140deg, rgba(106, 139, 255, .55), transparent 45%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .28s ease;
        pointer-events: none;
    }

    .radr-feature:hover { transform: translateY(-6px); box-shadow: var(--l-shadow); border-color: rgba(106, 139, 255, .4); }

        .radr-feature:hover::after { opacity: 1; }

.radr-feature .fi {
    width: 52px; height: 52px;
    border-radius: 15px;
    display: grid; place-items: center;
    font-size: 1.35rem;
    background-image: var(--l-grad);
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 16px 32px -18px rgba(91, 124, 250, .95);
}

.radr-feature:nth-child(3n+2) .fi { background-image: var(--l-grad-accent); color: #3a2700; }
.radr-feature:nth-child(3n+3) .fi { background-image: linear-gradient(120deg, #34d3c2, #14b8a6); }

.radr-feature h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }

.radr-feature p { margin: 0; color: var(--l-muted); font-size: .92rem; line-height: 1.65; }

.radr-feature .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.radr-feature .tag {
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--l-muted);
    border: 1px solid var(--l-line);
}

/* ---------------------------------------------------------------------
   Mimari
   --------------------------------------------------------------------- */
.radr-arch {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}

.radr-arch .node {
    border-radius: var(--l-radius);
    border: 1px solid var(--l-line);
    background: rgba(255, 255, 255, .04);
    padding: 20px 18px;
    text-align: center;
    position: relative;
    transition: transform .25s ease, background-color .25s ease;
}

    .radr-arch .node:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .07); }

    .radr-arch .node .ni { font-size: 1.5rem; margin-bottom: 10px; display: block; }

    .radr-arch .node h4 { margin: 0 0 6px; font-size: .98rem; font-weight: 700; }

    .radr-arch .node p { margin: 0; color: var(--l-muted); font-size: .82rem; line-height: 1.5; }

.radr-arch .layer-label { grid-column: 1 / -1; color: var(--l-accent); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; margin-top: 8px; }

.radr-stack-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }

.radr-chip {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--l-line);
    background: rgba(255, 255, 255, .05);
    font-weight: 700;
    font-size: .82rem;
    color: var(--l-text);
}

/* ---------------------------------------------------------------------
   CTA
   --------------------------------------------------------------------- */
.radr-cta {
    border-radius: var(--l-radius-lg);
    border: 1px solid var(--l-line);
    background:
        radial-gradient(700px 300px at 12% 0%, rgba(106, 139, 255, .35), transparent 60%),
        radial-gradient(600px 320px at 95% 100%, rgba(255, 176, 32, .28), transparent 60%),
        linear-gradient(160deg, rgba(30, 38, 66, .96), rgba(15, 20, 40, .96));
    padding: 56px 44px;
    text-align: center;
    box-shadow: var(--l-shadow);
}

    .radr-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); letter-spacing: -.02em; margin: 0 0 14px; font-weight: 800; }

    .radr-cta p { color: var(--l-muted); font-size: 1.02rem; margin: 0 auto 28px; max-width: 560px; line-height: 1.7; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.radr-footer {
    border-top: 1px solid var(--l-line);
    padding: 42px 0 34px;
    color: var(--l-muted);
    font-size: .88rem;
}

.radr-footer-grid { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }

.radr-footer .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; }

    .radr-footer .brand img { height: 32px; }

.radr-footer a:hover { color: #fff; }

.radr-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------------------------------------------------------------
   Duyarlılık
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .radr-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .radr-device { transform: none; }
    .radr-features { grid-template-columns: repeat(2, 1fr); }
    .radr-arch { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .radr-nav-links { display: none; }
    .radr-features { grid-template-columns: 1fr; }
    .radr-arch { grid-template-columns: 1fr; }
    .radr-hero { padding: 56px 0 48px; }
    .radr-mock { grid-template-columns: 1fr; }
    .radr-float-card { display: none; }
    .radr-cta { padding: 40px 24px; }
}