/* Filizden çınara — sağ kenarda kaydırmayla büyüyen çınar (js/cinar.js).
   Mürekkep ve kâğıt: gövde/dallar mürekkep çizgisi, taç saffran-zeytin tonlu kütleler.
   Sayfa açılınca küçük bir filiz görünür; 900 px'ten dar ya da 520 px'ten alçak ekranda yok. */
.cinar {
    --p: 0;
    position: fixed; right: 14px; bottom: 5vh; width: 72px; height: min(66vh, 460px);
    z-index: 5; pointer-events: none; opacity: 0;
    color: rgba(34, 28, 21, .72); transition: opacity 1.2s ease .4s, color .5s ease;
}
.cinar.is-in { opacity: 1; }
.cinar.on-dark { color: rgba(251, 247, 238, .6); }
.cinar.on-dark .cinar-mass-a { fill: rgba(238, 189, 43, .22); }
.cinar.on-dark .cinar-mass-b { fill: rgba(238, 189, 43, .3); }
.cinar.on-dark .cinar-mass-c { fill: rgba(245, 213, 99, .38); }
.cinar.on-dark .cinar-bark { fill: rgba(21, 17, 12, .5); }
.cinar svg { width: 100%; height: 100%; overflow: visible; }

/* Çizilen yollar: --a..--b aralığında (--p) ile uzar; kalınlık satır içinde */
.cinar-draw {
    fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: var(--len);
    stroke-dashoffset: calc(var(--len) * (1 - clamp(0, (var(--p) - var(--a)) / (var(--b) - var(--a)), 1)));
    /* başlamamış yol görünmesin (yuvarlak uç nokta bırakır) */
    opacity: clamp(0, (var(--p) - var(--a)) * 60, 1);
}
.cinar-ground { opacity: clamp(0, (var(--p) - var(--a)) * 60, .7); }
.cinar-sprout { opacity: clamp(0, 1 - (var(--p) - .3) * 6, 1); }
.cinar-seed { fill: #b8920f; opacity: clamp(0, 1 - (var(--p) - .08) * 14, 1); }

/* Çenek ve yapraklar: eşik (--t) geçilince büyür; çenekler gövde kalınlaşınca kaybolur */
.cinar-cotyl { fill: rgba(238, 189, 43, .4); stroke: currentColor; stroke-width: 1; transform-origin: 40px 424px;
    transform: scale(clamp(0, (var(--p) - var(--t)) * 12, 1)) scale(clamp(.0001, 1 - (var(--p) - .3) * 5, 1)); }
.cinar-leaf { fill: rgba(238, 189, 43, .28); stroke: currentColor; stroke-width: 1; stroke-linejoin: round;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(clamp(0, (var(--p) - var(--t)) * 10, 1)); }
.cinar-sprout-leaf { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(clamp(0, (var(--p) - var(--t)) * 10, 1)) scale(clamp(.0001, 1 - (var(--p) - .3) * 5, 1)); }

/* Taç kütleleri: dal ucundan büyür; üç ton derinlik verir */
.cinar-mass { stroke: currentColor; stroke-width: .7; stroke-opacity: .55;
    transform: translate(var(--x), var(--y)) scale(calc(var(--s) * clamp(0, (var(--p) - var(--t)) * 7, 1))); }
.cinar-mass-a { fill: rgba(107, 95, 48, .55); }
.cinar-mass-b { fill: rgba(150, 128, 50, .55); }
.cinar-mass-c { fill: rgba(205, 175, 70, .6); }

/* Çınar kabuğu: açık lekeler gövdede belirir */
.cinar-bark { fill: rgba(255, 253, 249, .75); transform: translate(var(--x), var(--y)) scale(clamp(0, (var(--p) - var(--t)) * 10, 1)); }

@media (max-width: 900px), (max-height: 520px) { .cinar { display: none; } }
@media (prefers-reduced-motion: reduce) { .cinar { transition: none; } }