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

body{

font-family:Poppins,sans-serif;

background:#08111f;

overflow-x:hidden;

color:white;

}

.background{

position:fixed;

width:100%;

height:100%;

background:

radial-gradient(circle at top,#2563eb55,transparent 40%),

radial-gradient(circle at bottom,#06b6d455,transparent 35%),

#08111f;

z-index:-1;

}

.app{

    width:100%;
    max-width:470px;

    margin:auto;

    padding:25px;
    padding-bottom:100px; /* ruang untuk bottom navbar */

    min-height:100vh;

    box-sizing:border-box;

}

header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-icon{

width:55px;

height:55px;

border-radius:16px;

background:linear-gradient(135deg,#2563eb,#06b6d4);

display:flex;

justify-content:center;

align-items:center;

font-size:26px;

}

.logo h1{

font-size:22px;

font-weight:700;

}

.logo p{

font-size:13px;

opacity:.7;

}

.setting{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

border-radius:15px;

background:rgba(255,255,255,.06);

cursor:pointer;

}

.hero{

margin-bottom:30px;

}

.hero h2{

font-size:30px;

font-weight:700;

line-height:42px;

margin-bottom:10px;

}

.hero p{

opacity:.75;

line-height:26px;

}

.card{

background:rgba(255,255,255,.07);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:22px;

padding:20px;

margin-bottom:20px;

}

.title{

display:flex;

align-items:center;

gap:8px;

font-weight:600;

margin-bottom:15px;

}

button{

width:100%;

padding:15px;

border:none;

border-radius:15px;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.card button{

background:#17263d;

color:white;

}

.card button:hover{

background:#2563eb;

}

.selected-list{

margin-top:15px;

opacity:.7;

}

.love{

    font-size:28px;

    text-align:center;

    margin:22px 0;

    color:#fb7185;

    transition:.4s;

}

.love.active{

    animation:heartbeat .9s infinite;

    color:#ff3b5c;

    filter:drop-shadow(0 0 10px rgba(255,60,100,.7));

}

@keyframes heartbeat{

    0%{
        transform:scale(1);
    }

    20%{
        transform:scale(1.25);
    }

    40%{
        transform:scale(.9);
    }

    60%{
        transform:scale(1.18);
    }

    100%{
        transform:scale(1);
    }

}

#calculate{

margin-top:15px;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:white;

font-size:18px;

box-shadow:0 15px 35px rgba(37,99,235,.35);

}

#calculate:hover{

transform:translateY(-4px);

}

.result{

margin-top:30px;

}

.empty{

background:rgba(255,255,255,.06);

padding:35px;

border-radius:25px;

text-align:center;

}

.empty span{

font-size:60px;

margin-bottom:10px;

display:block;

}

.empty h3{

margin-bottom:10px;

}

.empty p{

opacity:.7;

line-height:24px;

}

/* =======================
MODAL
======================= */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

justify-content:center;

align-items:flex-end;

background:rgba(0,0,0,.65);

z-index:9999;

}

.modal.show{

display:flex;

animation:fade .25s;

}

.modal-box{

width:100%;

max-width:500px;

height:80vh;

background:#fff;

border-radius:30px 30px 0 0;

padding:25px;

overflow-y:auto;

animation:up .35s;

}

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.modal-header h2{

color:#111;

}

.modal-header span{

cursor:pointer;

font-size:30px;

}

#searchMutation{

width:100%;

padding:15px;

border-radius:15px;

border:none;

background:#f1f5f9;

font-size:16px;

margin-bottom:20px;

outline:none;

}

.mutation-item{

padding:15px;

border-radius:14px;

cursor:pointer;

transition:.25s;

margin-bottom:10px;

color:#111;

background:#f8fafc;

}

.mutation-item:hover{

background:#dbeafe;

transform:translateX(5px);

}

.selected-item{

display:inline-flex;

align-items:center;

padding:8px 14px;

margin:6px;

border-radius:30px;

background:#2563eb;

color:white;

font-size:14px;

font-weight:600;

}

@keyframes up{

from{

transform:translateY(100%);

}

to{

transform:translateY(0);

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}


.close-btn{

border:none;

background:#f1f5f9;

width:45px;

height:45px;

border-radius:50%;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

}

/* ==========================
BADGE GEN
========================== */

.badge{

display:inline-block;

padding:5px 12px;

margin-top:8px;

border-radius:20px;

font-size:12px;

font-weight:600;

}

/* Dominant */

.badge.dominant{

background:#DCFCE7;

color:#15803D;

}

/* Recessive */

.badge.recessive{

background:#FCE7F3;

color:#BE185D;

}

/* Sex Linked */

.badge.sexlinked{

background:#DBEAFE;

color:#1D4ED8;

}

/* Combination */

.badge.combination{

background:#FEF3C7;

color:#92400E;

}

.status-option{

    padding:16px;

    margin-bottom:12px;

    border-radius:14px;

    background:#F8FAFC;

    cursor:pointer;

    transition:.3s;

    color:#111;

    font-weight:600;

    border:2px solid transparent;

}

.status-option:hover{

    border-color:#2563EB;

    background:#DBEAFE;

}

.chip{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 12px;

    margin:6px 6px 0 0;

    border-radius:999px;

    background:#2563EB;

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.chip-name{

    display:flex;
    align-items:center;
    gap:4px;

}

.chip-status{

    min-width:60px;

    text-align:center;

    padding:6px 14px;

    border-radius:999px;

    background:#2563EB;

    color:white;

    font-size:12px;

    font-weight:700;

}

.chip-remove{

    border:none;

    background:transparent;

    color:#fff;

    cursor:pointer;

    font-size:14px;

    padding:0;

    margin-left:2px;

}

.chip-remove:hover{

    opacity:.7;

}

.result-chip{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px;

    margin:12px 0;

    border-radius:18px;

    background:#1F2937;
	
	 transition:.25s;

}

.result-chip:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(37,99,235,.25);

}

.result-name{

    display:flex;

    flex-direction:column;

}

.result-name h2{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:white;

}

.result-name p{

    margin-top:4px;

    font-size:13px;

    color:#94A3B8;

}

.result-chip .chip-status{

    background:#2563EB;

    color:white;

    padding:4px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.ready-text{

    margin-top:20px;

    color:#22C55E;

    font-weight:600;

}

#resultContent h4{

    margin-top:20px;

    margin-bottom:10px;

}

/* ==========================
RESULT
========================== */

.result-header{

    text-align:center;

    margin-bottom:20px;

}

.result-header h2{

    color:#fff;

    margin:0;

    font-size:22px;

}

.result-header p{

    color:#b7bfd2;

    margin-top:5px;

    font-size:13px;

}

.result-card{

    background:#16233f;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:18px;

    margin-bottom:15px;

    transition:.3s;

}

.result-card:hover{

    transform:translateY(-3px);

    border-color:#3b82f6;

}

.result-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.result-title{

    color:#fff;

    font-size:18px;

    font-weight:700;

}

.result-percent{

    color:#fff;

    font-size:24px;

    font-weight:bold;

}

.progress{

    height:10px;

    background:#0b1528;

    border-radius:20px;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    border-radius:20px;

    transition:1s;

}

.result-bottom{

    margin-top:10px;

    color:#9ea8c7;

    font-size:13px;

}

.empty-result{

    text-align:center;

    color:#cbd5e1;

    padding:40px 20px;

}

.empty-icon{

    font-size:55px;

    margin-bottom:10px;

}
.explain-menu{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:16px;
	color:#111827;

    margin-bottom:12px;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

.explain-menu:hover{

    background:#f8fafc;

    border-color:#2563eb;

}

#explainContent{

    width:100%;

}

#explainModal .modal-content{

    width:calc(100% - 32px);

    max-width:420px;

    max-height:90vh;

    overflow-y:auto;

    margin:auto;

    background:#fff;

    border-radius:20px;

    padding:24px;

    box-sizing:border-box;

    position:relative;

    color:#111827;

}

#explainContent p{

    line-height:1.7;

    word-break:break-word;

    text-align:left;

}
.explain-page{

    color:#111827;

    padding-bottom:40px;

}

.explain-page h2{

    margin:0 0 18px;

    font-size:24px;

    font-weight:700;

}

.explain-page p{

    margin:12px 0;

    line-height:1.7;

}

.explain-page hr{

    border:none;

    border-top:1px solid #e5e7eb;

    margin:18px 0;

}

.back-btn{

    width:100%;

    margin-top:20px;

}

.punnett{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.punnett th{

    background:#2563eb;

    color:#fff;

    padding:12px;

    text-align:center;

}

.punnett td{

    border:1px solid #ddd;

    padding:14px;

    text-align:center;

    background:#fff;

}

.punnett-sex{

    font-size:22px;

    font-weight:bold;

    color:#2563eb;

}

.punnett-pheno{

    margin-top:6px;

    font-size:13px;

    font-weight:600;

}

.inherit-parent{

    background:#f8fafc;

    border-radius:14px;

    padding:16px;

    margin-top:18px;

}

.inherit-title{

    font-weight:700;

    font-size:15px;

    margin-bottom:12px;

}

.inherit-gametes{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.gamete-chip{

    background:#2563eb;

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.inherit-arrow{

    text-align:center;

    font-size:30px;

    color:#2563eb;

    margin:10px 0;

}

.inherit-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:16px;

    margin-top:20px;

}

.inherit-flow{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:14px;

    text-align:center;

    transition:.25s;

}

.inherit-flow:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.flow-top{

    display:flex;

    justify-content:center;

    gap:8px;

    font-weight:700;

    color:#2563eb;

}

.flow-arrow{

    margin:10px 0;

    font-size:22px;

}

.inherit-card{

    background:#f8fafc;

    border-radius:10px;

    padding:14px;

}

.inherit-sex{

    font-size:24px;

    color:#2563eb;

    font-weight:bold;

}

.inherit-name{

    margin-top:6px;

    font-weight:700;

}
.explain-btn{

    width:100%;

    margin-top:14px;

    padding:12px 16px;

    border:none;

    border-radius:12px;

    background:#1e3a8a;

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.explain-btn:hover{

    background:#2563eb;

    transform:translateY(-2px);

}

.explain-btn:active{

    transform:scale(.98);

}

.about-content{

    width:min(430px, calc(100% - 24px));

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:24px;

    padding:24px;

    box-sizing:border-box;

}

.about-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.about-header h2{

    font-size:24px;

}

.about-section{

    background:#F8FAFC;

    padding:18px;

    border-radius:16px;

    margin-bottom:18px;

}

.about-section h3{

    margin-bottom:10px;

    color:#2563EB;

}

.about-section p{

    line-height:1.7;

    color:#374151;

}

.flow{

    display:flex;

    flex-direction:column;

    gap:14px;

    color:#1E3A8A;

    font-weight:700;

    text-align:center;

}

.flow div{

    background:#EFF6FF;

    padding:12px;

    border-radius:12px;

}

.about-section ul{

    padding-left:18px;

}

.about-section li{

    margin:8px 0;

}

.about-table{

    width:100%;

    border-collapse:collapse;

}

.about-table td{

    padding:10px;

    border-bottom:1px solid #E5E7EB;

}

#aboutModal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    z-index:99999;

}

#aboutModal.show{

    display:flex;

}

/* ==========================
ABOUT ENGINE
========================== */

.about-content{

    color:#111827;

}

.about-content *{

    color:inherit;

}

.about-section{

    color:#111827;

}

.about-section p{

    color:#374151 !important;

}

.about-section li{

    color:#374151 !important;

}

.about-section ul{

    color:#374151 !important;

}

.about-table{

    color:#111827;

}

.about-table td{

    color:#111827 !important;

}

.about-table td:first-child{

    color:#64748B !important;

    font-weight:500;

}

.about-table td:last-child{

    color:#111827 !important;

    font-weight:700;

    text-align:right;

}

.flow{

    color:#1D4ED8 !important;

}

.flow div{

    color:#1D4ED8 !important;

}

.mutation-group{

    position:sticky;

    top:0;

    z-index:20;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 12px;

    margin:20px 0 10px;

    background:#f8fafc;

    border-left:5px solid #3b82f6;

    border-radius:8px;

    font-weight:700;

    font-size:15px;

    color:#1e293b;

}

.mutation-group span{

    background:#3b82f6;

    color:white;

    border-radius:999px;

    padding:2px 10px;

    font-size:12px;

    font-weight:600;

}

.toast{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%) translateY(100px);

    background:#ef4444;

    color:#fff;

    padding:14px 22px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    opacity:0;

    transition:.3s;

    z-index:99999;

}

.toast.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}


/* ===========================
   BREEDING ANIMATION
=========================== */

.breeding-animation{

    position:fixed;
    inset:0;

    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    z-index:99999;
    overflow:hidden;

    /* Background Glass */
    background:rgba(15,23,42,.35);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:.4s;

}

.breeding-animation.show{

    display:flex;

    animation:fadeIn .35s ease;

}

.bird{

    position:absolute;
    font-size:70px;

    transition:1s;

    filter:
        drop-shadow(0 0 8px rgba(255,80,120,.5))
        drop-shadow(0 0 20px rgba(255,80,120,.35));

}

.male{

    left:18%;

    transform:scaleX(1);

}

.female{

    right:18%;

    transform:scaleX(-1);

}

.breeding-animation.start .male{

    left:40%;
	
	  transform:translateX(0) scaleX(1);

}

.breeding-animation.start .female{

    right:40%;
	
	 transform:translateX(0) scaleX(-1);

}

.love-animation{

    position:absolute;

    font-size:55px;

    opacity:0;

    filter:drop-shadow(0 0 15px #ff4d6d);

}

.breeding-animation.start .love-animation{

    animation:pulseLove .8s infinite;

    opacity:1;

}

.egg{

    position:absolute;

    font-size:60px;

    opacity:0;

    filter:drop-shadow(0 0 18px rgba(255,255,255,.4));

}

.breeding-animation.egg-show .egg{

    opacity:1;

}

.dna{

    font-size:60px;

    margin-top:120px;

    opacity:0;

    filter:drop-shadow(0 0 20px #38bdf8);

}

.breeding-animation.dna-show .dna{

    opacity:1;

    animation:spinDNA 1s linear infinite;

}

.breeding-animation p{

    margin-top:22px;

    font-size:18px;

    font-weight:600;

    color:#fff;

    letter-spacing:.5px;

    text-shadow:0 2px 12px rgba(0,0,0,.4);

    opacity:0;

}

.breeding-animation.dna-show p{

    opacity:1;

}

@keyframes pulseLove{

    0%{transform:scale(1);}
    50%{transform:scale(1.25);}
    100%{transform:scale(1);}

}

@keyframes spinDNA{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================
BOTTOM NAV
========================== */

.bottom-nav{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 32px);

    max-width:430px;

    height:72px;

    display:flex;

    justify-content:space-around;
    align-items:center;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:22px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    z-index:9999;

}

.nav-btn{

flex:1;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:4px;

text-decoration:none;

color:#9ca3af;

transition:.25s;

}

.nav-btn span{

font-size:24px;

}

.nav-btn small{

font-size:11px;

font-weight:500;

}

.nav-btn.active{

color:#2563eb;

}

.nav-btn.active span{

font-variation-settings:
'FILL' 1,
'wght' 600,
'GRAD' 0,
'opsz' 24;

}

.nav-btn.active::before{

content:"";

position:absolute;

top:0;

width:34px;

height:4px;

background:#2563eb;

border-radius:999px;

}