/* AI üretimi süsler (img/art/KAYNAK.txt). Yalnız ek katman: style.css'e dokunmaz. */
#sidePanel { background-image: linear-gradient(180deg, rgba(34, 25, 16, .9), rgba(14, 10, 7, .94)), url(img/art/ui/leather.webp); background-size: auto, 384px; }
#dialog .card { background-image: linear-gradient(180deg, rgba(32, 24, 15, .9), rgba(14, 10, 7, .94)), url(img/art/ui/leather.webp); background-size: auto, 384px; }
/* Yükleme: başka oturumun eklediği orta kart (marka, başlık, süsler) kaldırıldı; tam ekran yükleme resmi, altta ipucu ve ince ilerleme çubuğu kalır */
#fade .loadCard { position: absolute !important; left: 50% !important; bottom: clamp(18px, 5vh, 44px) !important; top: auto !important; transform: translateX(-50%) !important; width: min(560px, 90vw) !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
#fade .loadCard::before, #fade .loadCard::after, #fade .loadBrand, #fade .loadOrnament, #fade #fadeTitle, #fade #fadeRegion, #fade .loadEdge { display: none !important; }
#fade .loadRule { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#fade #fadeTip { text-shadow: 0 1px 3px #000, 0 0 8px #000; }

/* Başlık altı süs: bronz telkâri (siyah zemin "screen" ile kaybolur) */
#sidePanel > header, #dialog .card h3 { position: relative; }
#sidePanel > header::after, #dialog .card h3::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 220px; height: 18px; transform: translateX(-50%); background: url(img/art/ui/filigree.webp) center / contain no-repeat; mix-blend-mode: screen; opacity: .85; pointer-events: none; }
#dialog .card h3 { padding-bottom: 8px; }

/* NPC panellerinde portre */
#sidePanel[data-npc="tuccar"] > header::before, #sidePanel[data-npc="simyaci"] > header::before, #sidePanel[data-npc="gizemli"] > header::before,
#sidePanel[data-k="smith"] > header::before, #sidePanel[data-k="petshop"] > header::before, #sidePanel[data-k="muhur"] > header::before, #sidePanel[data-k="camp"] > header::before {
  content: ""; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #c9974a; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .6); background: #142238 center / cover;
}
#sidePanel[data-npc="tuccar"] > header::before { background-image: url(img/art/npc/tuccar.webp); }
#sidePanel[data-npc="simyaci"] > header::before { background-image: url(img/art/npc/simyaci.webp); }
#sidePanel[data-npc="gizemli"] > header::before { background-image: url(img/art/npc/gizemli.webp); }
#sidePanel[data-k="smith"] > header::before { background-image: url(img/art/npc/demirci.webp); }
#sidePanel[data-k="muhur"] > header::before { background-image: url(img/art/npc/muhurcu.webp); }
#sidePanel[data-k="petshop"] > header::before { background-image: url(img/art/npc/terbiyeci.webp); }
/* Hayvan Terbiyecisi: satılık petler envanter gibi ızgara; yanındaki pet yeşil çerçeveli */
#sidePanel[data-k="petshop"] { width: min(820px, calc(100vw - var(--safeL, 0px) - 72px)); }
#sidePanel .grid.petShop { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); margin-bottom: 8px; }
#sidePanel .cell.pet.on { box-shadow: 0 0 10px rgba(127, 224, 138, .55); }
#sidePanel .cell.pet em.n { font-size: 10px; }
#sidePanel[data-k="camp"] > header::before { background-image: url(img/art/npc/avci.webp); }

/* Diyalog portresi: kare AI portre */
#dialog .card > img[src*="art/npc/"] { width: 96px; height: 96px; object-position: center; border-radius: 50%; border: 2px solid #c9974a; box-shadow: 0 3px 10px rgba(0, 0, 0, .6); }

/* Işınlanma kartları: resim daha görünür */
#sidePanel .tcard { background: linear-gradient(90deg, rgba(14, 10, 6, .88), rgba(14, 10, 6, .12) 70%), var(--bg) center / cover, #1e160e !important; min-height: 96px; }

/* Giriş, sınıf ve karakter seçimi arka planı: yeni yükleme görselleri (eski img/scene yerine) */
#auth { background: linear-gradient(rgba(6, 10, 18, .35), rgba(6, 10, 18, .8)), url(img/art/loading/koy.webp) center / cover, #0e0a07 !important; }
#classPick { background: linear-gradient(rgba(6, 10, 18, .55), rgba(6, 10, 18, .9)), url(img/art/loading/koy.webp) center / cover, #0e0a07 !important; }
#charSel { background: radial-gradient(ellipse at 50% 70%, rgba(40, 24, 10, .15), rgba(6, 8, 12, .82) 70%), linear-gradient(rgba(6, 8, 14, .45), rgba(6, 8, 14, .8)), url(img/art/loading/koy.webp) center / cover, #0e0a07 !important; }
/* Ana menü ve açılış ekranı: yeni görsel (eski bg_menu.webp yerine) */
#menu { background: linear-gradient(rgba(6, 14, 26, .55), rgba(6, 14, 26, .08) 34%, rgba(6, 14, 26, .12) 58%, rgba(6, 14, 26, .86)), url(img/art/loading/koy.webp) center / cover, #0e0a07 !important; }
#boot { background: linear-gradient(rgba(6, 10, 18, .45), rgba(6, 10, 18, .85)), url(img/art/loading/koy.webp) center / cover, #0e0a07 !important; }

/* Eski görsel → yeni görsel haritası (tek yer). Dosyalar silinmedi, yalnız ekranda ezilir.
   <img> için "content: url()", satır içi arka plan için [style*=] seçici kullanılır. */
/* Sınıf portreleri: img/icons/c_* → img/art/classes/* */
img[src*="icons/c_yeniceri"] { content: url(img/art/classes/yeniceri.webp); }
img[src*="icons/c_akinci"] { content: url(img/art/classes/akinci.webp); }
img[src*="icons/c_okcu"] { content: url(img/art/classes/okcu.webp); }
img[src*="icons/c_humbaraci"] { content: url(img/art/classes/humbaraci.webp); }
[style*="icons/c_yeniceri"] { background-image: url(img/art/classes/yeniceri.webp) !important; }
[style*="icons/c_akinci"] { background-image: url(img/art/classes/akinci.webp) !important; }
[style*="icons/c_okcu"] { background-image: url(img/art/classes/okcu.webp) !important; }
[style*="icons/c_humbaraci"] { background-image: url(img/art/classes/humbaraci.webp) !important; }
/* Mağaza vitrini: img/shop/*-collection.png → bölge görseli */
img[src$="shop/emerald-collection.png"] { content: url(img/art/loading/r0.webp); }
img[src$="shop/sapphire-collection.png"] { content: url(img/art/loading/r2.webp); }
/* img/ui/*.svg süsleri (madalyon, durum çerçevesi, görev/av bantları) → bronz degrade ve deri dokusu */
#game.run .ib:not(.hd):not(#btnPot):not(.potK) { background-image: var(--i, none), radial-gradient(circle at 50% 38%, #4a3a26 0 40%, #2a2016 62%, #c9974a 64% 68%, #3a2a18 70% 73%, transparent 74%) !important; }
#game.run #runBars { background: linear-gradient(180deg, rgba(20, 16, 12, .86), rgba(10, 8, 6, .92)), url(img/art/ui/leather.webp) center / 384px !important; border: 1.5px solid #c9974a !important; border-radius: 10px !important; }
#sidePanel .jBanner, #sidePanel .jBanner.haftalik, #sidePanel .jHead, #questTrack .qt.story { background-image: linear-gradient(90deg, rgba(10, 10, 12, .92), rgba(10, 10, 12, .7) 50%, rgba(10, 10, 12, .2)), url(img/art/loading/koy.webp) !important; background-size: cover !important; background-position: center !important; }
#sidePanel .jBanner.gunluk, #sidePanel .jBanner.bilet, #sidePanel .jq.hunt, #questTrack .qt.hunt { background-image: linear-gradient(100deg, rgba(8, 14, 11, .93), rgba(8, 14, 11, .72) 60%, rgba(8, 14, 11, .3)), url(img/art/loading/r0.webp) !important; background-size: cover !important; background-position: center !important; }

/* — Bronz tema: tüm paneller tek renk ailesi. style.css'te kalan lacivert düğme, sekme, soluk yazı ve
   yapışkan alt şeritleri koyu bronz/altına çevirir (yalnız renk; yerleşime dokunmaz). — */
:root { --ui-glass: linear-gradient(180deg, rgba(34, 25, 16, .92), rgba(14, 10, 7, .95)); --ui-text: #f2e8d2; --ui-dim: #bfae8a;
  --bz-btn: linear-gradient(180deg, #5c442a, #33261a 55%, #241a10); --bz-btn-h: linear-gradient(180deg, #6e5233, #3d2d1d 55%, #2a1e13);
  --bz-line: rgba(201, 151, 74, .6); --bz-hi: inset 0 1px 0 rgba(255, 230, 170, .18), 0 1px 0 rgba(0, 0, 0, .55); }
button { background: var(--bz-btn); }
input, textarea, select { background: rgba(12, 9, 6, .86); }
#auth form { background: linear-gradient(180deg, rgba(34, 25, 16, .86), rgba(12, 9, 6, .92)) !important; }
.classes button { background: linear-gradient(180deg, rgba(34, 25, 16, .86), rgba(12, 9, 6, .94)) !important; }
#dialog .card p { color: #ece2cc; }
#dialog .card.questDetail { background: radial-gradient(ellipse at 15% 0%, rgba(91, 62, 28, .42), transparent 42%), linear-gradient(155deg, rgba(30, 22, 14, .98), rgba(12, 9, 6, .98)) !important; }

#sidePanel { color: #f2e8d2; }
#sidePanel :is(.row, .bagbar, .wares, .skills, .attrs, .beasts, .crafts, .cnav, .bagPages) button:not(.pri, .on, .store, .cell),
#sidePanel :is(.cq, .cup) > button:not(.pri, .on), #sidePanel .cturn:not(.pri, .on) {
  background: var(--bz-btn); border-color: var(--bz-line); color: #f4ead2; box-shadow: var(--bz-hi); }
#sidePanel :is(.row, .bagbar, .wares, .skills, .attrs, .beasts, .crafts, .cnav, .bagPages) button:not(.pri, .on, .store, .cell):hover:not(:disabled),
#sidePanel :is(.cq, .cup) > button:not(.pri, .on):hover:not(:disabled), #sidePanel .cturn:not(.pri, .on):hover:not(:disabled) {
  background: var(--bz-btn-h); border-color: #ffe08a; box-shadow: var(--bz-hi), 0 0 8px rgba(255, 216, 106, .22); }
#sidePanel button.pri { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 rgba(0, 0, 0, .6), 0 0 10px rgba(242, 207, 114, .25); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
#sidePanel button.pri:hover:not(:disabled) { filter: brightness(1.08); }
/* sekmeler: gömme bronz şerit, açık sekme altın */
#sidePanel .tabs { background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .25)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 230, 170, .07); }
#sidePanel .tabs button { color: #c9b48a; transition: color .12s, background .12s; }
#sidePanel .tabs button:hover:not(.on) { color: #f4e6c0; background: rgba(230, 192, 106, .07); }
#sidePanel .tabs button.on { background: linear-gradient(180deg, rgba(230, 192, 106, .28), rgba(230, 192, 106, .1)); text-shadow: 0 1px 2px #000; }
/* soluk yazılar: mavi-gri yerine sıcak parşömen tonları */
#sidePanel :is(.tip, .hero small, .card.hint, .card .ct small, .node em, .fname small, .cq p) { color: #bfae8a; }
#sidePanel :is(.attrs small, .skills small, .wares small, .beasts small, .fstep i, .cio > i, .rank small) { color: #a8977a; }
#sidePanel :is(.stats span, .bagbar, .bars span, .recs span, .gtog, .rank .rk) { color: #d8ccb0; }
#sidePanel .card.hint { border-color: rgba(230, 192, 106, .2); }
#sidePanel .sk { background: var(--i) center / cover no-repeat, radial-gradient(circle, #3e2c18, #140e08) !important; box-shadow: inset 0 0 6px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5); }
#sidePanel i.xp u, #sidePanel .bars i u { background: linear-gradient(90deg, #b8853f, #ffe08a); box-shadow: 0 0 4px rgba(255, 216, 106, .35); }
#sidePanel i.xp, #sidePanel .bars i { background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 0 0 1px rgba(230, 192, 106, .18); }
#sidePanel .cnav, #sidePanel .rfoot { background: linear-gradient(180deg, rgba(20, 15, 10, .6), rgba(16, 12, 8, .97)); }
#sidePanel .skills li, #sidePanel .wares li, #sidePanel .attrs li { background: linear-gradient(180deg, rgba(255, 230, 170, .05), rgba(0, 0, 0, .12)); border-color: rgba(230, 192, 106, .14); }
#sidePanel .skills li:hover, #sidePanel .wares li:hover { border-color: rgba(230, 192, 106, .38); }
/* yuva: üstüne gelince hafif parlar */
#sidePanel .cell:not(.empty, .slot):hover { filter: brightness(1.15) drop-shadow(0 0 4px rgba(255, 216, 106, .35)); }
/* İsim etiketleri: ince kenarlı koyu plaka, keskin yazı; NPC, seçkin ve boss ayrı çerçeve rengi */
#nameTags span { font: 700 9px/13px system-ui, "Segoe UI", sans-serif; letter-spacing: .2px; padding: 0 6px; border-radius: 3px; background: linear-gradient(180deg, rgba(20, 15, 10, .66), rgba(6, 4, 3, .58)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .08); text-shadow: 0 1px 1px #000, 0 0 2px #000; }
#nameTags .npc { font: 700 9px/13px Cinzel, Georgia, serif; letter-spacing: .4px; background: linear-gradient(180deg, rgba(58, 40, 16, .88), rgba(26, 18, 8, .85)); border: 1px solid rgba(230, 192, 106, .75); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .5); }
#nameTags .elite, #nameTags .gold { box-shadow: 0 0 0 1px rgba(230, 192, 106, .55); }
#nameTags .rare { box-shadow: 0 0 0 1px rgba(200, 140, 255, .5); }
#nameTags .boss { font-weight: 800; box-shadow: 0 0 0 1px rgba(255, 106, 80, .65), 0 0 6px rgba(200, 40, 20, .45); }
#nameTags span.say { font-weight: 600; border-radius: 6px; background: rgba(14, 10, 7, .82); box-shadow: 0 0 0 1px rgba(230, 192, 106, .35); }

/* Işınlan yüzüğü ve Arena düğmesi kaldırıldı: ışınlanma ve arena köydeki portaldan (kullanıcı isteği) */
.arenaBtn { display: none !important; } /* Işınlan düğmesi geri geldi (geçit kaldırıldı); arena Işınlan > Köyler'den */

/* Yükleme ipucu: alttaki yarı saydam koyu bantta süslü yazı (Cormorant Garamond, Türkçe harfler latin + latin-ext dosyasında), üstünde ince süs çizgisi; her geçişte süzülerek gelir (tips.js) */
@font-face { font-family: 'KD Tip'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/cormorant-600i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'KD Tip'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/cormorant-600i-latinext.woff2) format('woff2'); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1E9F; }
#fade { transition: opacity .42s ease !important; }
#fade #fadeTip { position: relative; max-width: none !important; min-height: 0 !important; margin: 0 0 12px !important; padding: 16px 18px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(8, 10, 16, .3), rgba(8, 10, 16, .72) 30%, rgba(8, 10, 16, .78)); box-shadow: 0 0 0 1px rgba(201, 151, 74, .22) inset;
  color: #f1e3c2 !important; font: italic 600 clamp(15px, 2.2vw, 20px)/1.35 'KD Tip', 'EB Garamond', Georgia, serif !important; letter-spacing: .2px; text-align: center; }
#fade #fadeTip::before { content: '❦'; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); padding: 0 46px; color: #d9b568; font: 13px/18px Georgia, serif; font-style: normal;
  background: linear-gradient(90deg, transparent, rgba(217, 181, 104, .7) 30%, transparent 46%, transparent 54%, rgba(217, 181, 104, .7) 70%, transparent) center / 100% 1px no-repeat; }
#fade #fadeTip.tipIn { animation: kdTipIn .7s ease-out both; }
@keyframes kdTipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }