/* ============================================================
   FİDELİK YÖNETİM SİSTEMİ — Login Premium CSS v2
   3D logo animasyonu + sıralı bilgi kartları
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --g900:#0a1a0c; --g800:#152a18; --g700:#1e4228;
    --g600:#2a5c38; --g500:#368a4c; --g400:#52b06e; --g300:#80cc96;
    --gold:#c9a84c; --cream:#f5f0e8; --white:#fff;
    --txt:#1c2e1f; --txm:#4a6b52; --txl:#8aab90;
    --shadow-card:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

html,body { width:100%;height:100%;overflow:hidden;font-family:'Poppins',sans-serif;background:var(--g900); }

/* ── BACKGROUND ── */
.gradient-background {
    position:fixed;inset:0;z-index:0;
    background:linear-gradient(140deg,#091509 0%,#122118 50%,#0a1a0c 100%);
    overflow:hidden;
}
.gradient-orb { position:absolute;border-radius:50%;filter:blur(90px);animation:orbFloat 9s ease-in-out infinite; }
.orb-1 { width:480px;height:480px;background:radial-gradient(circle,#2a5c38,transparent 65%);top:-160px;left:-120px;opacity:.5; }
.orb-2 { width:360px;height:360px;background:radial-gradient(circle,#368a4c,transparent 65%);bottom:-120px;right:-80px;opacity:.4;animation-delay:-4s; }
.orb-3 { width:260px;height:260px;background:radial-gradient(circle,#c9a84c22,transparent 65%);top:45%;left:48%;transform:translate(-50%,-50%);opacity:.6;animation-delay:-7s; }
@keyframes orbFloat {
    0%,100%{transform:translate(0,0)} 40%{transform:translate(25px,-18px)} 70%{transform:translate(-15px,22px)}
}

/* ── PARTICLES (leaf-shaped) ── */
.particles { position:fixed;inset:0;z-index:1;pointer-events:none; }
.particle {
    position:absolute;width:5px;height:9px;
    border-radius:60% 0 60% 0;background:rgba(82,176,110,.2);
    opacity:0;animation:leafFloat linear infinite;
}
.particle:nth-child(1){left:8%;animation-duration:14s;animation-delay:0s}
.particle:nth-child(2){left:18%;animation-duration:18s;animation-delay:-3s;width:7px;height:12px}
.particle:nth-child(3){left:32%;animation-duration:12s;animation-delay:-6s}
.particle:nth-child(4){left:50%;animation-duration:16s;animation-delay:-2s;width:4px;height:8px}
.particle:nth-child(5){left:68%;animation-duration:20s;animation-delay:-8s;width:8px;height:14px}
.particle:nth-child(6){left:82%;animation-duration:13s;animation-delay:-4s}
.particle:nth-child(7){left:25%;animation-duration:15s;animation-delay:-1s}
.particle:nth-child(8){left:60%;animation-duration:11s;animation-delay:-5s}
.particle:nth-child(9){left:44%;animation-duration:17s;animation-delay:-9s}
.particle:nth-child(10){left:90%;animation-duration:14s;animation-delay:-3.5s}
@keyframes leafFloat {
    0%{bottom:-20px;opacity:0;transform:rotate(0deg) translateX(0)}
    10%{opacity:.7} 90%{opacity:.3}
    100%{bottom:105vh;opacity:0;transform:rotate(360deg) translateX(30px)}
}

/* ── WRAPPER ── */
.login-wrapper {
    position:relative;z-index:10;
    width:100%;height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:14px;
}

/* ── CARD ── */
.login-container {
    display:flex;width:100%;max-width:980px;
    height:calc(100vh - 28px);max-height:690px;
    border-radius:26px;overflow:hidden;
    box-shadow:var(--shadow-card);
    animation:cardIn .7s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:none} }

/* ════════════════════════════
   LEFT PANEL
════════════════════════════ */
.info-panel {
    flex:1.1;
    background:linear-gradient(160deg,var(--g700) 0%,var(--g800) 55%,var(--g900) 100%);
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding:28px 24px;
}
.info-panel::before {
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:40px 40px;pointer-events:none;
}
.info-panel::after {
    content:'';position:absolute;width:280px;height:280px;border-radius:50%;
    border:1px solid rgba(255,255,255,.05);top:-100px;right:-100px;pointer-events:none;
}
.ring-deco {
    position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.04);
    pointer-events:none;width:200px;height:200px;bottom:-80px;left:-60px;
}

.info-content {
    position:relative;z-index:2;
    width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;
}

/* ── 3D LOGO ── */
.brand-logo { display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; }
.logo-stage { perspective:600px;position:relative;display:flex;justify-content:center; }

.logo-3d {
    width:80px;height:80px;
    transform-style:preserve-3d;
    animation:logo3dSpin 3.2s cubic-bezier(.25,.46,.45,.94) forwards;
}
.logo-face {
    position:absolute;inset:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    backface-visibility:hidden;
}
.logo-face-front {
    background:linear-gradient(135deg,var(--g400),var(--g500));
    box-shadow:0 12px 40px rgba(82,176,110,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.logo-face-back { background:linear-gradient(135deg,var(--g600),var(--g700));transform:rotateY(180deg); }
.logo-face-front i { font-size:30px;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }

@keyframes logo3dSpin {
    0%  {transform:rotateY(0deg) rotateX(0deg) scale(.4);opacity:0}
    15% {opacity:1}
    60% {transform:rotateY(540deg) rotateX(22deg) scale(1.1)}
    80% {transform:rotateY(700deg) rotateX(-8deg) scale(.97)}
    100%{transform:rotateY(720deg) rotateX(0deg) scale(1)}
}
.logo-3d.logo-settled { animation:logoFloat 4s ease-in-out infinite; }
@keyframes logoFloat {
    0%,100%{transform:rotateY(720deg) translateY(0)} 50%{transform:rotateY(740deg) translateY(-8px)}
}

/* glow rings */
.logo-glow, .logo-glow-outer {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    border-radius:50%;border:2px solid rgba(82,176,110,.3);
    opacity:0;pointer-events:none;transition:opacity .4s;
}
.logo-glow { width:104px;height:104px; }
.logo-glow-outer { width:128px;height:128px;border-width:1px;border-color:rgba(82,176,110,.12);transition-delay:.2s; }

.logo-glow.logo-glow-active   { opacity:1;animation:glowPulse 2.5s ease-in-out infinite; }
.logo-glow-outer.logo-glow-active { opacity:1;animation:glowPulse 2.5s ease-in-out infinite .4s; }
@keyframes glowPulse {
    0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(82,176,110,.45)}
    50%    {transform:translate(-50%,-50%) scale(1.14);box-shadow:0 0 0 14px rgba(82,176,110,0)}
}

/* brand text */
.brand-name {
    font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1.2;
    opacity:0;animation:fadeUp .6s ease .8s both;
}
.brand-tagline {
    font-size:.7rem;color:var(--g300);font-weight:300;letter-spacing:.1em;text-transform:uppercase;margin-top:2px;
    opacity:0;animation:fadeUp .6s ease .95s both;
}
.brand-divider {
    width:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
    margin:6px auto 0;border-radius:2px;animation:dividerGrow .7s ease 1.1s both;
}
@keyframes dividerGrow { from{width:0;opacity:0} to{width:44px;opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── FEATURE CARDS ── */
.features-list { display:flex;flex-direction:column;gap:9px;width:100%; }

.feature-card {
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
    border-radius:14px;padding:11px 14px;
    opacity:0;transform:translateX(-28px);
    transition:opacity .45s ease,transform .45s ease,background .3s ease;
}
.feature-card.feat-visible { opacity:1;transform:none; }
.feature-card:hover { background:rgba(255,255,255,.1);transform:translateX(5px)!important;cursor:default; }

.feature-icon {
    width:38px;height:38px;flex-shrink:0;border-radius:10px;
    background:linear-gradient(135deg,var(--g500),var(--g400));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(82,176,110,.3);
}
.feature-icon i { font-size:14px;color:#fff; }
.feature-text h3 { font-size:.8rem;font-weight:600;color:#fff;margin-bottom:2px; }
.feature-text p  { font-size:.69rem;color:var(--g300);font-weight:300; }

/* ── STATS ── */
.stats-row {
    display:flex;justify-content:space-around;width:100%;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
    border-radius:14px;padding:12px 8px;
    opacity:0;transition:opacity .5s ease;
}
.stats-row.stats-visible { opacity:1; }
.stat-item { text-align:center; }
.stat-number { font-size:1.35rem;font-weight:700;color:var(--g300);line-height:1; }
.stat-label { font-size:.6rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;margin-top:3px; }

/* ════════════════════════════
   RIGHT PANEL
════════════════════════════ */
.form-panel { flex:1;background:var(--cream);display:flex;flex-direction:column;overflow:hidden; }

.form-content {
    flex:1;display:flex;flex-direction:column;justify-content:center;
    padding:32px 38px 16px;overflow:hidden;
}

.welcome-section { margin-bottom:22px;opacity:0;animation:fadeUp .6s ease .3s both; }
.welcome-title { font-size:1.65rem;font-weight:700;color:var(--txt); }
.welcome-subtitle { font-size:.8rem;color:var(--txm);margin-top:4px; }

.login-form { display:flex;flex-direction:column;gap:14px; }
.form-group-modern { opacity:0;animation:fadeUp .5s ease both; }
.form-group-modern:nth-child(1){animation-delay:.45s}
.form-group-modern:nth-child(2){animation-delay:.58s}
.form-group-modern:nth-child(3){animation-delay:.70s}
.form-group-modern:nth-child(4){animation-delay:.82s}
.form-group-modern:nth-child(5){animation-delay:.94s}
.form-group-modern:nth-child(6){animation-delay:1.05s}

.form-label { font-size:.7rem;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:5px;margin-bottom:5px; }
.form-label i { color:var(--g500);font-size:.65rem; }

.input-wrapper { position:relative; }
.form-input {
    width:100%;height:44px;padding:0 14px;
    background:#fff;border:2px solid #ddd8cc;border-radius:12px;
    font-size:.86rem;font-family:'Poppins',sans-serif;color:var(--txt);
    outline:none;transition:all .3s;
}
.form-input::placeholder { color:#c0bbb0; }
.form-input:focus { border-color:var(--g500);box-shadow:0 0 0 3px rgba(54,138,76,.12); }

.password-wrapper .form-input { padding-right:44px; }
.password-toggle {
    position:absolute;right:13px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:var(--txl);font-size:.82rem;transition:color .2s;padding:4px;
}
.password-toggle:hover { color:var(--g500); }

.form-options { display:flex;align-items:center;justify-content:space-between; }
.checkbox-modern { display:flex;align-items:center;gap:7px;cursor:pointer; }
.checkbox-modern input[type="checkbox"] { display:none; }
.checkmark { width:17px;height:17px;border:2px solid #ccc;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0; }
.checkbox-modern input:checked+.checkmark { background:var(--g500);border-color:var(--g500); }
.checkbox-modern input:checked+.checkmark::after { content:'✓';font-size:10px;color:#fff;font-weight:700; }
.checkbox-label { font-size:.75rem;color:var(--txm); }
.forgot-link { font-size:.75rem;color:var(--g500);text-decoration:none;font-weight:500;transition:color .2s; }
.forgot-link:hover { color:var(--g700); }

.btn-submit {
    width:100%;height:46px;background:linear-gradient(135deg,var(--g600),var(--g500));
    border:none;border-radius:12px;color:#fff;
    font-family:'Poppins',sans-serif;font-size:.88rem;font-weight:600;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
    transition:all .3s;position:relative;overflow:hidden;
    box-shadow:0 6px 20px rgba(42,92,56,.4);letter-spacing:.04em;
}
.btn-submit::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--g500),var(--g400));opacity:0;transition:opacity .3s; }
.btn-submit:hover { transform:translateY(-1px);box-shadow:0 10px 28px rgba(42,92,56,.5); }
.btn-submit:hover::before { opacity:1; }
.btn-submit:active { transform:translateY(0); }
.btn-text,.btn-icon { position:relative;z-index:1; }
.btn-icon i { font-size:.82rem;transition:transform .3s; }
.btn-submit:hover .btn-icon i { transform:translateX(4px); }

.security-badge { display:flex;align-items:center;justify-content:center;gap:5px;font-size:.68rem;color:var(--txl); }
.security-badge i { color:var(--g400);font-size:.65rem; }

.form-footer { padding:11px 38px;background:#edeadf;border-top:1px solid #ddd8cc;text-align:center; }
.form-footer p { font-size:.68rem;color:var(--txl); }

/* ── LOADING ── */
.loading-overlay {
    display:none;position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
    align-items:center;justify-content:center;
}
.loading-overlay[style*="display: block"],.loading-overlay[style*="display:block"] { display:flex!important; }
.loading-spinner { text-align:center;color:#fff; }
.loading-spinner p { margin-top:14px;font-size:.88rem;color:rgba(255,255,255,.8); }
.spinner-ring { width:46px;height:46px;border-radius:50%;border:3px solid transparent;border-top-color:var(--g400);animation:spin 1s linear infinite;margin:0 auto; }
.spinner-ring:nth-child(2){width:34px;height:34px;margin-top:-40px;border-top-color:var(--gold);animation-duration:.75s;animation-direction:reverse}
.spinner-ring:nth-child(3){width:22px;height:22px;margin-top:-28px;border-top-color:#fff;animation-duration:.55s}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── RESPONSIVE ── */
@media(max-width:768px){
    .login-wrapper{padding:8px}
    .login-container{flex-direction:column;max-height:none;height:calc(100vh - 16px)}
    .info-panel{flex:0 0 auto;padding:14px 18px}
    .info-content{gap:11px}
    .brand-logo{flex-direction:row;text-align:left;gap:12px}
    .logo-3d{width:52px;height:52px}
    .logo-face-front i{font-size:20px}
    .logo-glow{width:66px;height:66px}
    .logo-glow-outer{width:84px;height:84px}
    .brand-name{font-size:.95rem}
    .features-list{flex-direction:row;gap:7px}
    .feature-card{flex-direction:column;align-items:center;text-align:center;padding:9px 7px;flex:1;gap:5px}
    .feature-text p{display:none}
    .feature-text h3{font-size:.68rem}
    .feature-icon{width:30px;height:30px}
    .feature-icon i{font-size:12px}
    .stats-row{padding:8px 4px}
    .stat-number{font-size:1.05rem}
    .form-panel{flex:1;overflow:hidden}
    .form-content{padding:18px 22px 10px}
    .welcome-section{margin-bottom:14px}
    .welcome-title{font-size:1.3rem}
    .login-form{gap:10px}
    .form-input{height:40px}
    .btn-submit{height:42px}
}
@media(max-width:400px){
    .features-list,.stats-row{display:none}
    .logo-3d{width:44px;height:44px}
    .logo-face-front i{font-size:17px}
    .brand-tagline{display:none}
    .form-content{padding:14px 16px 10px}
    .welcome-title{font-size:1.1rem}
}
@media(max-height:500px) and (orientation:landscape){
    .login-container{flex-direction:row}
    .info-panel{flex:0 0 200px;padding:12px 14px}
    .features-list,.stats-row{display:none}
    .brand-logo{flex-direction:column}
    .logo-3d{width:46px;height:46px}
    .logo-face-front i{font-size:18px}
    .brand-tagline{display:none}
    .form-content{padding:12px 22px 8px}
    .welcome-section{margin-bottom:10px}
    .welcome-title{font-size:1.05rem}
    .login-form{gap:8px}
    .form-input{height:36px}
    .btn-submit{height:38px}
    .security-badge{display:none}
}
@media(prefers-reduced-motion:reduce){
    .gradient-orb,.particle,.logo-3d,.logo-3d.logo-settled,
    .login-container,.feature-card,.brand-name,.brand-tagline,
    .brand-divider,.welcome-section,.form-group-modern{animation:none!important;opacity:1!important;transform:none!important}
    .logo-glow,.logo-glow-outer{animation:none!important;opacity:.5!important}
}