/* ============================================================
   farmer-face.css — Pixel-art avatar (yüz + boğaz + mavi elbise)
   Boyutlar: .farmer-face.size-lg / md / sm
   Mood: .happy .talking .surprised .blink
   HTML değişmez. Gövde için yüzün altına .farmer-body bloğu konur.
   ============================================================ */

.farmer-face {
    --hair:        #4a3b38;
    --skin:        #ffe4c4;
    --skin-shadow: #f0cb9e;
    --eye-blue:    #19527a;
    --eye-dark:    #112d44;
    --mouth:       #df6f8f;
    --mouth-dark:  #b85070;
    --lip:         #d98a93;
    --lip-dark:    #c2727c;
    --mouth-inner: #6e2330;
    --teeth:       #fff7f0;
    --tongue:      #e08494;
    --base-w:      320px;
    --base-h:      280px;

    width: var(--base-w);
    height: var(--base-h);
    position: relative;
    image-rendering: pixelated;
    transition: transform .25s ease;
    flex-shrink: 0;
}
.farmer-face.size-lg { transform: scale(1); }
.farmer-face.size-md { transform: scale(0.7); transform-origin: top center; margin-bottom: -84px; }
.farmer-face.size-sm { transform: scale(0.5); transform-origin: top center; margin-bottom: -140px; }

/* SAÇ */
.farmer-face .hair { position: absolute; top: -30px; left: 10px; width: 300px; height: 120px; z-index: 4; }
.farmer-face .hair-block { position: absolute; background: var(--hair); }
.farmer-face .h-top        { width: 120px; height: 60px;  left: 100px; top: 0; }
.farmer-face .h-top-left   { width: 60px;  height: 80px;  left: 40px;  top: 20px; }
.farmer-face .h-top-right  { width: 80px;  height: 70px;  left: 200px; top: 20px; }
.farmer-face .h-side-left  { width: 40px;  height: 100px; left: 10px;  top: 60px; }
.farmer-face .h-side-right { width: 40px;  height: 100px; left: 270px; top: 70px; }
.farmer-face .h-bangs      { width: 220px; height: 40px;  left: 50px;  top: 60px; }

/* YÜZ */
.farmer-face .face-inner {
    position: absolute; left: 40px; right: 40px; top: 60px; bottom: 20px;
    background: var(--skin); z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 10% 100%, 0 85%);
}
/* KULAKLAR */
.farmer-face .ears { position: absolute; top: 120px; left: 25px; right: 25px; z-index: 0; }
.farmer-face .ear { position: absolute; width: 15px; height: 35px; background: var(--skin-shadow); }
.farmer-face .ear.left  { left: 0; }
.farmer-face .ear.right { right: 0; }

/* GÖZLER */
.farmer-face .eyes { position: absolute; top: 110px; left: 0; width: 100%; display: flex; justify-content: center; gap: 40px; z-index: 5; }
.farmer-face .eye-wrap { width: 60px; height: 60px; position: relative; background: #fff; overflow: hidden; transition: height .2s ease, transform .2s ease; }
.farmer-face .brow { width: 100%; height: 25px; background: var(--hair); position: absolute; top: 0; left: 0; transition: transform .25s ease, height .25s ease; z-index: 6; }
.farmer-face .pupil { width: 20px; height: 20px; background: var(--eye-blue); position: absolute; left: 20px; top: 25px; transition: transform .08s linear; }

/* ============================================================
   AĞIZ (gerçekçi, ince dudaklar — şişkin değil)
   ============================================================ */
.farmer-face .mouth {
    position: absolute; left: 50%; bottom: 46px;
    width: 46px; height: 26px;
    transform: translateX(-50%);
    z-index: 5;
}
/* ÜST DUDAK */
.farmer-face .mouth::before {
    content: ""; position: absolute; left: 5px; right: 5px; top: 6px; height: 6px;
    background: var(--lip); border-radius: 8px 8px 4px 4px;
    z-index: 8; transition: transform .12s ease;
}
/* ALT DUDAK (ince) */
.farmer-face .mouth::after {
    content: ""; position: absolute; left: 7px; right: 7px; bottom: 4px; height: 6px;
    background: var(--lip); border-radius: 4px 4px 9px 9px;
    z-index: 8; transition: transform .12s ease;
}
/* AĞIZ İÇİ */
.farmer-face .mouth-shape {
    position: absolute; left: 9px; right: 9px; top: 11px; height: 4px;
    margin: 0; background: var(--mouth-inner);
    border-radius: 4px 4px 7px 7px; overflow: hidden; z-index: 6;
    transition: height .12s ease, top .12s ease, background .12s ease; animation: none;
}
/* DİŞLER */
.farmer-face .mouth-shape::before {
    content: ""; position: absolute; top: 0; left: 3px; right: 3px; height: 0;
    background: var(--teeth); border-radius: 0 0 3px 3px; transition: height .12s ease;
}
/* DİL */
.farmer-face .mouth-shape::after {
    content: ""; position: absolute; bottom: -1px; left: 50%; width: 18px; height: 0;
    transform: translateX(-50%); background: var(--tongue);
    border-radius: 10px 10px 6px 6px; transition: height .12s ease;
}

/* HAPPY / IDLE — kapalı, hafif gülümseme */
.farmer-face.happy .brow { height: 25px; }
.farmer-face.happy .mouth-shape { height: 4px; top: 11px; animation: none; }
.farmer-face.happy .mouth-shape::before { height: 0; }
.farmer-face.happy .mouth-shape::after  { height: 0; }
.farmer-face.happy .mouth::before { transform: none; }
.farmer-face.happy .mouth::after  { transform: none; }

/* SURPRISED — yuvarlak O */
.farmer-face.surprised .brow { height: 10px; transform: translateY(-5px); }
.farmer-face.surprised .eye-wrap { height: 70px; }
.farmer-face.surprised .mouth-shape { height: 18px; top: 6px; border-radius: 50%; animation: none; }
.farmer-face.surprised .mouth-shape::before { height: 4px; }
.farmer-face.surprised .mouth-shape::after  { height: 6px; }
.farmer-face.surprised .mouth::before { transform: translateY(-2px); }
.farmer-face.surprised .mouth::after  { transform: translateY(3px); }

/* TALKING — çene açılıp kapanır */
.farmer-face.talking .brow { height: 20px; transform: rotate(-5deg); }
.farmer-face.talking .mouth-shape,
#robotFace.talking .mouth-shape {
    background: var(--mouth-inner) !important;
    animation: talkJaw 0.30s infinite alternate ease-in-out !important;
    transition: none !important;
}
.farmer-face.talking .mouth-shape::before { animation: talkTeeth 0.30s infinite alternate ease-in-out !important; }
.farmer-face.talking .mouth-shape::after  { animation: talkTongue 0.30s infinite alternate ease-in-out !important; }
.farmer-face.talking .mouth::before { animation: talkUpperLip 0.30s infinite alternate ease-in-out !important; }
.farmer-face.talking .mouth::after  { animation: talkLowerLip 0.30s infinite alternate ease-in-out !important; }

@keyframes talkJaw      { 0% { height: 4px; top: 11px; } 100% { height: 20px; top: 8px; } }
@keyframes talkTeeth    { 0% { height: 0; } 100% { height: 6px; } }
@keyframes talkTongue   { 0% { height: 0; } 100% { height: 9px; } }
@keyframes talkUpperLip { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
@keyframes talkLowerLip { 0% { transform: translateY(0); } 100% { transform: translateY(5px); } }

/* BLINK */
.farmer-face.blink .eye-wrap { height: 5px; transform: translateY(30px); }

/* Welcome durum etiketi */
.farmer-status { margin-top: 18px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .8px; color: #555; text-transform: uppercase; transition: opacity .3s ease; }

/* ============================================================
   GÖVDE — boğaz + mavi elbise (üçgen boşluk yok, boğaz belirgin)
   <div class="farmer-body">
     <div class="neck"></div><div class="dress"></div><div class="collar"></div>
     <div class="placket"></div><div class="arm-line left"></div>
     <div class="arm-line right"></div><div class="cuff left"></div><div class="cuff right"></div>
   </div>
   ============================================================ */
.farmer-body {
    --dress:       #2f6db5;
    --dress-dark:  #234f86;
    --dress-light: #4a8fd6;
    --collar:      #eaf3fc;
    position: relative;
    width: 320px;
    height: 165px;
    margin: -30px auto 0;
    z-index: 0;
    image-rendering: pixelated;
}
/* BOĞAZ / BOYUN — belirgin, çeneyi gövdeye bağlar */
.farmer-body .neck {
    position: absolute; left: 120px; top: -8px;
    width: 80px; height: 74px;
    background: var(--skin, #ffe4c4);
    border-radius: 0 0 16px 16px;
    box-shadow: none;
    z-index: 3;
}
/* boğaz altı gölgesi (derinlik) */
.farmer-body .neck::after {
    content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 12px;
    background: var(--skin-shadow, #f0cb9e); opacity: .55; border-radius: 0 0 14px 14px;
}
/* ELBİSE — geniş düz omuzlar (üçgen arka plan boşluğu yok) */
.farmer-body .dress {
    position: absolute; left: 0; top: 44px; width: 320px; height: 121px;
    background: var(--dress); z-index: 2;
    clip-path: polygon(12% 12%, 88% 12%, 100% 38%, 100% 100%, 0 100%, 0 38%);
    box-shadow: inset 0 6px 0 rgba(255,255,255,.08);
}
/* YAKA — boğaz dibinde yatay bant (üçgen yok) */
.farmer-body .collar {
    display: none;
    position: absolute; top: 42px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 20px;
    background: var(--collar);
    border-radius: 11px 11px 6px 6px;
    z-index: 4;
}
/* ÖN DİKİŞ + DÜĞMELER */
.farmer-body .placket {
    position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 86px; background: var(--dress-dark); z-index: 3;
}
.farmer-body .placket::before,
.farmer-body .placket::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--dress-light);
}
.farmer-body .placket::before { top: 16px; }
.farmer-body .placket::after  { top: 46px; }
/* KOL ÇİZGİLERİ (omuz–koltukaltı dikişi) */
.farmer-body .arm-line {
    position: absolute; top: 56px; width: 6px; height: 80px;
    background: var(--dress-dark); z-index: 3;
}
.farmer-body .arm-line.left  { left: 64px;  transform: rotate(10deg);  transform-origin: top center; }
.farmer-body .arm-line.right { right: 64px; transform: rotate(-10deg); transform-origin: top center; }
/* KOL UÇLARI (manşet) */
.farmer-body .cuff {
    position: absolute; bottom: 0; width: 52px; height: 15px;
    background: var(--dress-light); z-index: 3;
}
.farmer-body .cuff.left  { left: 0; }
.farmer-body .cuff.right { right: 0; }