/* ════════════════════════════════════════════════════════════════════════════
   KARŞILAMA — girişten sonra, ana sayfa açılana kadar (js/karsilama.js).
   Giriş sayfasında kart çekilirken ortada belirir (zemini oradaki geçiş perdesi verir); ana sayfa aynı ekranla, kendi
   zeminiyle açılır, sayfa hazır olunca profil resmi üst çubuktaki yerine uçar ve zemin erir.
   Profil resmi tema renginde dönen halkanın içinde; ad el yazısıyla yazılır (SVG: önce kalemle çizilir, sonra mürekkep
   dolar, ucunda parlayan bir kalem ucu ilerler); altında kısa bilgiler ve gerçek indirmeyi gösteren ince ilerleme çizgisi.
   Hareketler transform / opacity üzerinde; hareket azaltmada hepsi kapalı (temel.css), ekran durağan görünür.
   ════════════════════════════════════════════════════════════════════════════ */

.karsilama {
    --k-zemin: #060914;
    --k-yazi: #eef1ff;
    --k-yazi-2: rgb(214 220 255 / .66);
    --k-yazi-3: rgb(214 220 255 / .42);
    --k-cip: rgb(255 255 255 / .06);
    --k-cip-kenar: rgb(255 255 255 / .1);
    --k-murekkep: #f5f7ff;
    --k-1: var(--tema-1, #0ea5e9);
    --k-2: var(--tema-2, #2563eb);
    --k-3: var(--tema-3, #22d3ee);
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    color: var(--k-yazi);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    pointer-events: none;
}
:root[data-tema="acik"] .karsilama {
    --k-zemin: #f3f4fa;
    --k-yazi: #161a33;
    --k-yazi-2: rgb(28 34 72 / .66);
    --k-yazi-3: rgb(28 34 72 / .45);
    --k-cip: rgb(255 255 255 / .8);
    --k-cip-kenar: rgb(28 32 74 / .1);
    --k-murekkep: color-mix(in srgb, var(--k-2) 70%, #10132e);
}
/* Zemin ayrı katman: çıkışta yalnız o erir, profil resmi üst çubuğa uçarken görünür kalır */
.karsilama-zemin { position: absolute; inset: 0; background: var(--k-zemin); }
.karsilama-zemin::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(42% 38% at 50% 40%, color-mix(in srgb, var(--k-1) 16%, transparent), transparent 70%),
        radial-gradient(30% 30% at 30% 75%, color-mix(in srgb, var(--k-3) 9%, transparent), transparent 70%);
}
.karsilama.zeminsiz .karsilama-zemin { display: none; }   /* giriş sayfasında zemini geçiş perdesi verir */

.karsilama-ic { position: relative; display: grid; justify-items: center; gap: 10px; width: min(560px, 100%); text-align: center; }

/* ── Profil resmi + halka ── */
.karsilama-resim { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 8px; animation: k-resim-gel .8s cubic-bezier(.2, .9, .25, 1.15) both; }
.karsilama-resim::before {   /* dönen halka */
    content: ""; position: absolute; inset: -9px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--k-1), var(--k-3), transparent 38%, var(--k-2) 62%, var(--k-1));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    animation: k-don 2.8s linear infinite;
}
.karsilama-resim::after {    /* yumuşak ışık */
    content: ""; position: absolute; inset: -26px; border-radius: 50%; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--k-1) 34%, transparent), transparent);
    animation: k-nabiz 2.6s ease-in-out infinite;
}
.karsilama-avatar {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
    background: linear-gradient(140deg, var(--k-2), var(--k-1) 55%, var(--k-3));
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6), inset 0 0 0 2px rgb(255 255 255 / .18);
    color: #fff; font-size: 44px; font-weight: 700; letter-spacing: .5px;
}
.karsilama-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Halkada dönen iki küçük ışık */
.karsilama-yorunge { position: absolute; inset: -9px; border-radius: 50%; animation: k-don 4.6s linear infinite reverse; }
.karsilama-yorunge i { position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--k-3); box-shadow: 0 0 12px 2px var(--k-3); }
.karsilama-yorunge i + i { top: auto; bottom: -3px; width: 6px; height: 6px; margin-left: -3px; background: var(--k-1); box-shadow: 0 0 10px 2px var(--k-1); }

/* ── Selam, el yazısıyla ad, firma ── */
.karsilama-selam { margin: 0; color: var(--k-yazi-2); font-size: 13px; font-weight: 650; letter-spacing: .32em; text-transform: uppercase; animation: k-belir .6s ease .35s both; }
.karsilama-ad { display: block; width: 100%; height: 96px; overflow: visible; }
.karsilama-ad text {
    font-family: "Segoe Script", "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: 64px;
}
.karsilama-ad .cizgi { fill: none; stroke: var(--k-murekkep); stroke-width: 1.1; stroke-linejoin: round; }
.karsilama-ad .murekkep { fill: var(--k-murekkep); opacity: 0; }
.karsilama-ad .uc { fill: #fff; filter: drop-shadow(0 0 6px var(--k-3)) drop-shadow(0 0 14px var(--k-1)); opacity: 0; }
.karsilama-alt { margin: -4px 0 0; color: var(--k-yazi-2); font-size: 14px; animation: k-belir .6s ease both; animation-delay: var(--k-gecikme, 1.6s); }
.karsilama-alt b { color: var(--k-yazi); font-weight: 650; }

/* ── Kısa bilgiler ── */
.karsilama-bilgiler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 32px; margin-top: 10px; }
.karsilama-cip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border-radius: 99px;
    background: var(--k-cip); box-shadow: inset 0 0 0 1px var(--k-cip-kenar); backdrop-filter: blur(6px);
    color: var(--k-yazi-2); font-size: 12.5px; white-space: nowrap;
    animation: k-cip-gel .55s cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: calc(var(--k-gecikme, 1.6s) + var(--i, 0) * .12s);
}
.karsilama-cip b { color: var(--k-yazi); font-weight: 700; font-variant-numeric: tabular-nums; }
.karsilama-cip svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--k-1); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hazırlanıyor ── */
.karsilama-hazirlik { display: grid; justify-items: center; gap: 8px; width: min(260px, 70%); margin-top: 18px; animation: k-belir .6s ease 1s both; }
.karsilama-cubuk { position: relative; width: 100%; height: 3px; overflow: hidden; border-radius: 99px; background: var(--k-cip-kenar); }
.karsilama-cubuk i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--oran, 0)); border-radius: inherit; background: linear-gradient(90deg, var(--k-2), var(--k-1), var(--k-3)); transition: transform .35s ease; }
.karsilama-cubuk i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); animation: k-isilti 1.4s ease-in-out infinite; }
.karsilama-durum { color: var(--k-yazi-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Ana sayfada: ekran giriştekinin bittiği haliyle durağan açılır (hareket baştan oynamaz) */
.karsilama.devam *, .karsilama.devam *::before, .karsilama.devam *::after { animation-delay: 0s !important; animation-duration: 0s !important; }
.karsilama.devam .karsilama-resim::before, .karsilama.devam .karsilama-yorunge { animation-duration: 2.8s !important; }
.karsilama.devam .karsilama-yorunge { animation-duration: 4.6s !important; }
.karsilama.devam .karsilama-resim::after { animation-duration: 2.6s !important; }
.karsilama.devam .karsilama-cubuk i::after { animation-duration: 1.4s !important; }

/* Ana sayfa karşılamanın arkasında hazırlanırken kendi giriş hareketleri bekler: perde kalkınca birlikte oynar */
html.karsilaniyor body > :not(.karsilama),
html.karsilaniyor body > :not(.karsilama) * { animation-play-state: paused !important; }

@keyframes k-don { to { transform: rotate(360deg); } }
@keyframes k-nabiz { 50% { opacity: .55; transform: scale(1.06); } }
@keyframes k-resim-gel { from { opacity: 0; transform: scale(.55); filter: blur(10px); } }
@keyframes k-belir { from { opacity: 0; transform: translateY(8px); } }
@keyframes k-cip-gel { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes k-isilti { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (max-width: 520px) {
    .karsilama-resim { width: 108px; height: 108px; }
    .karsilama-avatar { font-size: 36px; }
    .karsilama-ad { height: 78px; }
}

/* Çıkış: profil resmi üst çubuğa uçarken halka ve ışık söner */
.karsilama.ucuyor .karsilama-resim::before,
.karsilama.ucuyor .karsilama-resim::after,
.karsilama.ucuyor .karsilama-yorunge { opacity: 0; transition: opacity .3s ease; }

/* Karşılama sürerken üst çubuktaki avatar BOŞ ÇERÇEVE: baş harfler / resim görünmez. Profil resmi karşılamadan uçarak
   yerine konunca (js/karsilama.js → bitir) bu sınıf kalkar, çerçeve resimle dolar. */
html.avatar-bos #avatar { color: transparent; text-shadow: none; background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vurgu) 38%, transparent); }
html.avatar-bos #avatar > * { visibility: hidden; }