:root {
  --ink: #1f2233; --ink2: #3b3f57; --krem: #fff8ee; --krem2: #f3e9da;
  --turuncu: #ff6a3d; --turuncu2: #d9481f; --sari: #ffc83d; --yesil: #33c48a; --mavi: #4a7dff; --mor: #7b5cff; --kirmizi: #ef4b4b;
  --golge: 0 5px 0 rgba(20, 18, 35, .28), 0 10px 24px rgba(20, 18, 35, .22);
  --yaz: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #191a26; font-family: var(--yaz); color: var(--ink); user-select: none; -webkit-user-select: none; }
body { background: radial-gradient(ellipse at 50% 40%, #3a3552 0%, #221f33 55%, #15141f 100%); }
#sahne { position: fixed; inset: 0; }
#sahne canvas { display: block; }
.gizli { display: none !important; }
button { font-family: var(--yaz); cursor: pointer; }
svg { fill: currentColor; }

/* Ortak kart */
.kart { background: var(--krem); border-radius: 18px; box-shadow: var(--golge); border: 3px solid var(--ink); }
.kucuk-baslik { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8298; line-height: 1; }
.buyuk-sayi { font-size: 26px; font-weight: 800; line-height: 1.05; }
.orta-sayi { font-size: 20px; font-weight: 800; line-height: 1.05; }

.dugme { background: var(--turuncu); color: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 20px; font-size: 18px; font-weight: 800;
  box-shadow: 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.dugme:hover { transform: translateY(-1px); filter: brightness(1.06); }
.dugme:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.dugme.ikincil { background: var(--krem); color: var(--ink); }
.dugme.yesil { background: var(--yesil); }
.dugme.buyuk { font-size: 22px; padding: 10px 34px; }
.dugme:disabled { background: #b9b3c2; color: #efeaf3; cursor: not-allowed; transform: none; }

/* HUD yerleşimi */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#ust-sol { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; }
.para-ikon { width: 42px; height: 42px; border-radius: 50%; background: var(--sari); border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 22px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
#h-para.degisti-arti { animation: parla-yesil .9s; }
#h-para.degisti-eksi { animation: parla-kirmizi .9s; }
@keyframes parla-yesil { 0% { color: var(--yesil); transform: scale(1.15); } 100% { color: var(--ink); transform: none; } }
@keyframes parla-kirmizi { 0% { color: var(--kirmizi); transform: scale(1.12); } 100% { color: var(--ink); transform: none; } }

#ust-orta { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 18px; }
.saat { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.gun { font-size: 13px; font-weight: 700; color: #7c7489; }
.mevsim-rozet { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; border: 3px solid var(--ink); }
.mevsim-rozet.m0 { background: #ffd1e3; } .mevsim-rozet.m1 { background: #ffe07a; } .mevsim-rozet.m2 { background: #ffb36b; } .mevsim-rozet.m3 { background: #cfe6ff; }
.hiz-dugmeler { display: flex; gap: 4px; background: var(--krem2); padding: 4px; border-radius: 12px; }
.hiz-dugmeler button { width: 34px; height: 30px; border: none; background: transparent; border-radius: 9px; color: #8a8298; display: grid; place-items: center; }
.hiz-dugmeler button svg { width: 17px; height: 17px; }
.hiz-dugmeler button.aktif { background: var(--ink); color: #fff; }
.hiz-dugmeler button:hover:not(.aktif) { background: #e6dccb; color: var(--ink); }

#ust-sag { position: absolute; right: 16px; top: 16px; display: flex; gap: 10px; }
.istat { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; }
.istat-ikon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 19px; border: 2.5px solid var(--ink); }
.istat-ikon svg { width: 18px; height: 18px; }
.istat-ikon.yildiz { background: var(--sari); color: var(--ink); }
.istat-ikon.kisi { background: var(--mavi); }
.istat-ikon.tisort { background: var(--turuncu); }

#alt-sol { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px 12px; width: 230px; }
.oyuncu-ad { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.ihtiyac { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ih-ikon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; border: 2.5px solid var(--ink); }
.ih-ikon svg { width: 15px; height: 15px; }
.ih-ikon.enerji { background: var(--sari); }
.ih-ikon.tokluk { background: #ff9a5c; color: var(--ink); }
.bar { flex: 1; height: 14px; border-radius: 8px; background: #e2d7c6; border: 2.5px solid var(--ink); overflow: hidden; }
.dolgu { height: 100%; border-radius: 4px; transition: width .3s; }
.dolgu.enerji { background: linear-gradient(#ffe07a, #ffc83d); }
.dolgu.tokluk { background: linear-gradient(#ffb37c, #ff8a45); }
.dolgu.dusuk { background: linear-gradient(#ff8c8c, #ef4b4b); animation: nabiz 1s infinite; }
@keyframes nabiz { 50% { opacity: .55; } }
.durum-yazi { margin-top: 6px; font-size: 13px; font-weight: 700; color: #7c7489; min-height: 16px; }

#gorev { position: absolute; left: 16px; top: 96px; width: 290px; padding: 10px 14px 12px; border-color: var(--turuncu2); animation: gorev-gir .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes gorev-gir { from { transform: translateX(-30px); opacity: 0; } }
.gorev-ust { display: flex; justify-content: space-between; align-items: center; }
.gorev-rozet { background: var(--turuncu); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .1em; padding: 2px 9px; border-radius: 8px; }
#g-sayac { font-size: 12px; font-weight: 700; color: #a39aae; }
.gorev-metin { font-size: 19px; font-weight: 800; line-height: 1.2; margin-top: 6px; }
.gorev-ipucu { font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 600; color: #6d6679; margin-top: 4px; line-height: 1.35; }
#gorev.tamam { animation: gorev-tamam .6s; }
@keyframes gorev-tamam { 30% { transform: scale(1.06); background: #d7ffe9; } }

#menu-dugme { position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer; border-radius: 16px; }
#menu-dugme svg { width: 24px; height: 24px; }
#menu-dugme:hover { background: #fff; }

/* 3B işaret */
#isaret { position: fixed; left: 0; top: 0; width: 40px; height: 48px; pointer-events: none; transform: translate(-50%, -100%); animation: zipla 1s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
#isaret svg { width: 100%; height: 100%; fill: var(--turuncu); stroke: var(--ink); stroke-width: 3; }
#isaret svg .ok { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes zipla { 50% { margin-top: -10px; } }

#ipucu { position: fixed; pointer-events: none; background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 12px; font-size: 15px; white-space: nowrap; transform: translate(14px, 14px); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#ipucu b { font-weight: 800; margin-right: 8px; }
#ipucu span { color: var(--sari); font-weight: 700; }

#bildirimler { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; pointer-events: none; z-index: 30; }
.bildirim { background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 14px; font-size: 16px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: bil-gir .35s cubic-bezier(.2, 1.4, .4, 1); display: flex; gap: 10px; align-items: center; }
.bildirim.iyi { background: #1d7a55; } .bildirim.kotu { background: #b33a3a; }
.bildirim.cik { animation: bil-cik .4s forwards; }
@keyframes bil-gir { from { transform: translateY(20px) scale(.9); opacity: 0; } }
@keyframes bil-cik { to { transform: translateY(10px); opacity: 0; } }

/* Uyku */
#uyku { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(10,12,40,.35), rgba(5,6,20,.82)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 5; animation: sol .8s; }
@keyframes sol { from { opacity: 0; } }
.zzz { font-size: 64px; font-weight: 800; color: #cfd8ff; display: flex; gap: 6px; }
.zzz span { animation: zz 1.8s infinite; } .zzz span:nth-child(2) { animation-delay: .3s; font-size: .8em; } .zzz span:nth-child(3) { animation-delay: .6s; font-size: .6em; }
@keyframes zz { 50% { transform: translateY(-14px); opacity: .5; } }
.uyku-saat { color: #fff; font-size: 26px; font-weight: 700; }

/* Bilgisayar */
#pc { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10; background: rgba(12, 10, 20, .45); animation: sol .35s; }
.crt { width: min(1040px, 96vw); height: min(680px, 90vh); background: #d9d0b8; border-radius: 26px; padding: 22px; border: 4px solid var(--ink); box-shadow: 0 12px 0 #a99f86, 0 30px 60px rgba(0,0,0,.5); animation: crt-ac .45s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes crt-ac { from { transform: scale(.85); opacity: 0; } }
.masaustu { position: relative; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #2a8f8a, #1d5f78); border: 3px solid #1a1a1a; font-family: 'Nunito', sans-serif; }
.duvar-kagidi { position: absolute; inset: 0 0 44px 0; display: grid; place-items: center; pointer-events: none; }
.dk-logo { font-family: var(--yaz); font-size: 64px; font-weight: 800; color: rgba(255,255,255,.14); letter-spacing: .02em; }
.dk-logo b { color: rgba(255,210,80,.25); margin-left: 4px; }
.ikonlar { position: absolute; left: 14px; top: 14px; display: grid; gap: 10px; }
.ikon { width: 92px; background: transparent; border: 2px solid transparent; border-radius: 12px; padding: 6px 4px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.5); position: relative; }
.ikon:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.ik { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.ik svg { width: 40px; height: 40px; }
.ik-alisveris { background: #fff; } .ik-yemek { background: #e8373f; } .ik-piyasa { background: #7b5cff; } .ik-site { background: #1f9d62; }
.ikon.kilitli .ik { filter: grayscale(1) brightness(.8); }
.ikon.kilitli::after { content: '🔒'; position: absolute; right: 12px; top: 2px; font-size: 16px; }
.ikon.hedef .ik { animation: ikon-hedef 1s infinite; }
@keyframes ikon-hedef { 50% { transform: translateY(-5px); box-shadow: 0 0 0 5px var(--sari), 0 8px 0 rgba(0,0,0,.25); } }
.gorev-cubugu { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: rgba(20, 22, 34, .92); display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.kalk-dugme { display: flex; align-items: center; gap: 6px; background: var(--turuncu); color: #fff; border: none; border-radius: 10px; padding: 5px 14px; font-weight: 800; font-size: 15px; font-family: var(--yaz); }
.kalk-dugme svg { width: 16px; height: 16px; fill: none; }
.kalk-dugme:hover { filter: brightness(1.1); }
.pc-gorevler { flex: 1; display: flex; gap: 6px; }
.pc-gorevler button { background: rgba(255,255,255,.1); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-weight: 700; font-family: 'Nunito', sans-serif; }
.pc-gorevler button.aktif { background: rgba(255,255,255,.25); }
.pc-tepsi { color: #fff; font-weight: 800; font-size: 14px; padding: 0 8px; font-family: var(--yaz); }

.pencere { position: absolute; left: 130px; top: 18px; right: 18px; bottom: 62px; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: pen-ac .25s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes pen-ac { from { transform: scale(.94) translateY(10px); opacity: 0; } }
.pen-baslik { height: 36px; display: flex; align-items: center; padding: 0 6px 0 14px; color: #fff; font-weight: 800; font-family: var(--yaz); font-size: 16px; gap: 8px; flex: none; }
.pen-baslik .kapat { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: none; background: rgba(0,0,0,.2); color: #fff; font-weight: 800; }
.pen-baslik .kapat:hover { background: var(--kirmizi); }
.pen-icerik { flex: 1; overflow: auto; }

/* Hepsiorada */
.ho-ust { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #fff5ec; border-bottom: 2px solid #ffe2cc; }
.ho-logo { font-family: var(--yaz); font-weight: 800; font-size: 26px; color: #ff6000; letter-spacing: -.02em; }
.ho-logo span { color: #1f2233; }
.ho-ara { flex: 1; background: #fff; border: 2px solid #ffd2b0; border-radius: 10px; padding: 7px 12px; color: #aaa; font-size: 14px; }
.urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 16px 18px; }
.urun { border: 2px solid #eee; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; position: relative; background: #fff; }
.urun.hedef { border-color: var(--turuncu); box-shadow: 0 0 0 4px rgba(255,106,61,.25); animation: urun-hedef 1.2s infinite; }
@keyframes urun-hedef { 50% { box-shadow: 0 0 0 7px rgba(255,106,61,.15); } }
.urun-resim { height: 120px; border-radius: 10px; background: #f5f2ee; display: grid; place-items: center; overflow: hidden; }
.urun-resim img { width: 100%; height: 100%; object-fit: contain; }
.urun-ad { font-weight: 800; font-size: 15px; line-height: 1.2; }
.urun-aciklama { font-size: 12.5px; color: #777; line-height: 1.3; min-height: 32px; }
.urun-alt { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.urun-fiyat { font-family: var(--yaz); font-weight: 800; font-size: 20px; color: #ff6000; }
.urun-al { background: #ff6000; color: #fff; border: none; border-radius: 9px; padding: 6px 14px; font-weight: 800; font-family: 'Nunito', sans-serif; }
.urun-al:disabled { background: #ccc; }
.urun-etiket { position: absolute; top: 8px; left: 8px; background: #1f2233; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.urun-kilit { font-size: 12px; font-weight: 800; color: #999; }

/* Yemek */
.ys-ust { padding: 14px 18px; background: #e8373f; color: #fff; font-family: var(--yaz); }
.ys-ust b { font-size: 24px; }
.yemekler { padding: 14px 18px; display: grid; gap: 10px; }
.yemek { display: flex; align-items: center; gap: 14px; border: 2px solid #f1e6e6; border-radius: 14px; padding: 10px 14px; }
.yemek-ikon { font-size: 34px; width: 52px; height: 52px; border-radius: 12px; background: #fff1ea; display: grid; place-items: center; }
.yemek-bilgi { flex: 1; }
.yemek-ad { font-weight: 800; font-size: 16px; }
.yemek-ek { font-size: 13px; color: #888; }
.yemek-fiyat { font-family: var(--yaz); font-weight: 800; font-size: 18px; color: #e8373f; margin-right: 8px; }
.yemek button { background: #e8373f; color: #fff; border: none; border-radius: 9px; padding: 7px 14px; font-weight: 800; font-family: 'Nunito', sans-serif; }
.yemek button:disabled { background: #ccc; }

/* Piyasa */
.py-ust { padding: 14px 18px; background: #7b5cff; color: #fff; }
.py-ust b { font-family: var(--yaz); font-size: 24px; display: block; }
.py-ust span { font-size: 13.5px; opacity: .85; }
.markalar { padding: 14px 18px; display: grid; gap: 10px; }
.marka-satir { display: grid; grid-template-columns: 150px 1fr 110px 110px; align-items: center; gap: 14px; border: 2px solid #eee; border-radius: 14px; padding: 10px 14px; }
.marka-satir.sen { border-style: dashed; border-color: #ccc; background: #fafafa; }
.marka-logo { font-family: var(--yaz); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.marka-tan { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #777; }
.marka-tan .bar { height: 10px; border-width: 2px; }
.marka-tan .dolgu { background: #7b5cff; }
.marka-fiyat { text-align: right; }
.marka-fiyat b { font-family: var(--yaz); font-size: 18px; display: block; line-height: 1; }
.marka-fiyat span { font-size: 11.5px; color: #999; font-weight: 700; }

.bos-sayfa { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; color: #666; }
.bos-sayfa b { font-family: var(--yaz); font-size: 24px; color: #333; }

/* Diyalog */
#diyalog { position: fixed; inset: 0; background: rgba(15, 12, 28, .55); display: grid; place-items: center; z-index: 70; animation: sol .25s; }
.diyalog-kutu { width: min(520px, 92vw); background: var(--krem); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--golge); padding: 22px 26px; animation: crt-ac .35s cubic-bezier(.2, 1.3, .4, 1); }
.d-baslik { font-size: 28px; font-weight: 800; line-height: 1.1; }
.d-metin { font-family: 'Nunito', sans-serif; font-size: 16.5px; font-weight: 600; line-height: 1.5; margin-top: 10px; color: #4a4558; }
.d-metin p { margin: 0 0 10px; }
.d-dugmeler { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Açılış */
#acilis { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(25,20,45,.25), rgba(12,10,22,.85)); }
.acilis-ic { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.oyun-logo { display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); }
.oyun-logo .l1 { font-size: clamp(64px, 12vw, 130px); font-weight: 800; color: #fff; line-height: .9; letter-spacing: -.02em; text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 8px 0 var(--turuncu2), 3px 8px 0 var(--turuncu2), -3px 8px 0 var(--turuncu2), 0 12px 0 var(--ink), 0 24px 40px rgba(0,0,0,.5); }
.oyun-logo .l2 { margin-top: 18px; background: var(--sari); border: 3px solid var(--ink); padding: 2px 18px; border-radius: 12px; font-size: 22px; font-weight: 800; box-shadow: 0 4px 0 var(--ink); }
.acilis-dugmeler { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.acilis-alt { color: rgba(255,255,255,.55); font-size: 14px; font-weight: 600; text-align: center; padding: 0 20px; }

/* Karakter oluşturma */
#yarat { position: fixed; right: 4vw; top: 50%; transform: translateY(-50%); z-index: 20; }
.yarat-kart { width: 320px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.yarat-baslik { font-size: 28px; font-weight: 800; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a8298; }
.alan input { font-family: var(--yaz); font-size: 20px; font-weight: 700; border: 3px solid var(--ink); border-radius: 12px; padding: 5px 12px; background: #fff; outline: none; }
.alan input:focus { border-color: var(--turuncu); }
.secenekler { display: flex; flex-wrap: wrap; gap: 6px; }
.secenekler button { border: 3px solid var(--ink); border-radius: 11px; background: #fff; font-weight: 800; font-size: 15px; padding: 4px 12px; }
.secenekler button.secili { background: var(--ink); color: #fff; }
.secenekler.renkli button { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.secenekler.renkli button.secili { box-shadow: 0 0 0 3px var(--krem), 0 0 0 6px var(--turuncu); }

#menu { position: fixed; inset: 0; z-index: 45; background: rgba(15, 12, 28, .55); display: grid; place-items: center; }
.menu-kart { padding: 20px 26px; display: flex; flex-direction: column; gap: 12px; min-width: 260px; text-align: center; }

@media (max-width: 900px) {
  #ust-sag .kucuk-baslik { display: none; }
  #ust-sag { top: 84px; }
  #gorev { top: 150px; width: 250px; }
  .marka-satir { grid-template-columns: 110px 1fr 90px; }
  .marka-satir .marka-fiyat:last-child { display: none; }
}

/* ================= Yeni ekranlar ================= */
.crt { width: min(1240px, 97vw); height: min(800px, 94vh); }
.pencere.genis { left: 118px; top: 10px; right: 10px; bottom: 54px; }
.ikonlar { gap: 4px; }
.ik-fotogram { background: linear-gradient(45deg, #f9a825, #e1306c 50%, #8e3bd8); }
.yildiz-renk { color: #f2a900; letter-spacing: .05em; }
.not { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 9px; margin-top: 5px; font-family: 'Nunito', sans-serif; }
.not.n-1 { background: #ffe8e6; color: #b3261e; } .not.n0 { background: #fff4d6; color: #8a6200; } .not.n1 { background: #dcf7ea; color: #13714a; }
.envanter { display: flex; gap: 14px; margin-top: 8px; font-size: 14px; font-weight: 700; color: #6d6679; }
.envanter b { color: var(--ink); font-size: 16px; }
.renk-secici { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.renk-secici button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); padding: 0; }
.renk-secici button.secili { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--turuncu); }
.renk-secici button.seffaf { background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0/10px 10px; }
.renk-secici input[type=color] { width: 30px; height: 26px; border: none; padding: 0; background: none; cursor: pointer; }

/* Üretim çipi */
#uretim-cip { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); background: var(--krem); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--golge); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; z-index: 4; min-width: 330px; }
.cip-ikon { font-size: 26px; animation: nabiz 1s infinite; }
.cip-bilgi { flex: 1; display: flex; flex-direction: column; }
.cip-baslik { font-size: 11px; font-weight: 800; color: #8a8298; letter-spacing: .08em; text-transform: uppercase; }
.cip-ad { font-weight: 800; font-size: 16px; line-height: 1.1; }
.cip-bar { height: 9px; background: #e2d7c6; border-radius: 6px; margin-top: 4px; overflow: hidden; border: 2px solid var(--ink); }
.cip-dolgu { height: 100%; background: linear-gradient(90deg, var(--turuncu), var(--sari)); }
#cip-durdur { border: 2.5px solid var(--ink); background: #fff; border-radius: 10px; font-weight: 800; padding: 5px 12px; }

/* Oto / gardırop listesi */
.oto-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.oto-m { text-align: left; border: 2.5px solid #d9cfc0; background: #fff; border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 15px; font-family: var(--yaz); }
.oto-m small { color: #8a8298; font-weight: 700; margin-left: 6px; }
.oto-m.secili { border-color: var(--turuncu); background: #fff1e8; }

/* ---------- Dikiş atölyesi ---------- */
#atolye { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(14, 12, 24, .45); animation: sol .3s; }
.at-kutu { width: min(1180px, 96vw); max-height: 92vh; background: #f6efe3; border: 4px solid var(--ink); border-radius: 24px; box-shadow: var(--golge); display: flex; flex-direction: column; overflow: hidden; animation: crt-ac .35s cubic-bezier(.2, 1.3, .4, 1);
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.5px); background-size: 14px 14px; }
.at-ust { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 3px dashed #d8cbb6; }
.at-ust h2 { margin: 0; font-size: 28px; flex: 1; }
.at-kumas { font-weight: 800; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 5px 12px; }
.at-kumas.yok { background: #ffe8e6; color: #b3261e; }
.at-devam { margin: 12px 18px 0; background: #dcf7ea; border: 2.5px solid #1f9d62; border-radius: 14px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.at-devam .dugme { margin-left: auto; font-size: 15px; padding: 5px 14px; }
.at-liste { padding: 16px 18px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; overflow: auto; }
.at-model { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 10px; display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto auto; gap: 4px 12px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.at-model.hedef { box-shadow: 0 0 0 4px var(--sari), 0 4px 0 rgba(0,0,0,.15); }
.at-resim { grid-row: span 3; display: grid; place-items: center; background: #2f6b57; border-radius: 12px; }
.at-resim canvas { width: 100px; height: auto; }
.at-bilgi b { font-size: 18px; }
.at-kucuk { font-size: 13px; color: #6d6679; font-weight: 700; font-family: 'Nunito', sans-serif; }
.at-uret { display: flex; gap: 6px; }
.at-uret button { flex: 1; border: 2.5px solid var(--ink); background: var(--turuncu); color: #fff; border-radius: 11px; font-weight: 800; font-size: 15px; padding: 5px 0; box-shadow: 0 3px 0 var(--ink); }
.at-uret button:first-child { flex: 1.6; }
.at-uret button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.at-ek { display: flex; gap: 6px; }
.at-ek button { flex: 1; border: 2px solid #cfc3b0; background: #fff; border-radius: 10px; font-weight: 700; font-size: 13px; padding: 4px 0; }
.at-yeni-kart { border: 3px dashed #bfae94; background: transparent; border-radius: 18px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #8a7a62; gap: 4px; }
.at-yeni-kart span { font-size: 40px; line-height: 1; }
.at-yeni-kart:hover { background: rgba(255,255,255,.6); color: var(--ink); border-color: var(--ink); }
.at-ilk { max-width: 560px; }
.at-ilk-ic { padding: 28px 30px; text-align: center; }
.at-ilk-resim { background: #2f6b57; border-radius: 18px; padding: 12px; width: 200px; margin: 0 auto 10px; }
.at-ilk h2 { margin: 6px 0; font-size: 28px; }
.at-ilk p { font-family: 'Nunito', sans-serif; font-weight: 600; color: #5a5468; }
.at-dugmeler { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.at-tasarim { width: min(1240px, 97vw); height: min(820px, 94vh); max-height: none; }

/* ---------- Tişört tasarlayıcı ---------- */
.te { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr); height: 100%; }
.te-sol { position: relative; background: #2f6b57; display: flex; align-items: center; justify-content: center; border-right: 4px solid var(--ink); min-height: 0; }
.te-masa { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.te-tuval { max-width: 100%; max-height: 100%; }
.te-yuz { position: absolute; top: 14px; left: 14px; display: flex; background: rgba(0,0,0,.35); border-radius: 12px; padding: 4px; gap: 4px; }
.te-yuz button { border: none; background: transparent; color: #fff; font-weight: 800; padding: 5px 14px; border-radius: 9px; }
.te-yuz button.secili { background: #fff; color: var(--ink); }
.te-sag { display: flex; flex-direction: column; padding: 14px 16px; gap: 10px; min-height: 0; }
.te-ad { font-family: var(--yaz); font-size: 22px; font-weight: 800; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; outline: none; }
.te-sekmeler { display: flex; gap: 5px; background: #e8dcc8; padding: 4px; border-radius: 12px; }
.te-sekmeler button { flex: 1; border: none; background: transparent; border-radius: 9px; font-weight: 800; padding: 6px 4px; font-size: 14px; color: #6d6679; }
.te-sekmeler button.secili { background: var(--ink); color: #fff; }
.te-icerik { flex: 1; overflow: auto; min-height: 0; padding-right: 4px; }
.te-alt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a8298; margin: 10px 0 6px; }
.te-alt small { text-transform: none; letter-spacing: 0; font-weight: 700; }
.te-secenekler { display: flex; gap: 6px; flex-wrap: wrap; }
.te-secenekler button { flex: 1; min-width: 110px; border: 2.5px solid #cfc3b0; background: #fff; border-radius: 12px; font-weight: 800; padding: 7px 8px; display: flex; flex-direction: column; font-size: 15px; }
.te-secenekler button small { font-weight: 700; color: #8a8298; font-size: 12px; }
.te-secenekler button.secili { border-color: var(--turuncu); background: #fff1e8; }
.te-renkler { display: flex; flex-wrap: wrap; gap: 6px; }
.te-renkler button { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,.18); padding: 0; }
.te-renkler button.secili { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--turuncu); }
.te-renkler button.bos { width: auto; border-radius: 15px; padding: 0 10px; background: #fff; font-weight: 800; font-size: 12px; }
.te-detaylar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.te-detaylar button { border: 2.5px solid #cfc3b0; background: #fff; border-radius: 12px; font-weight: 800; padding: 7px 10px; display: grid; grid-template-columns: 20px 1fr; text-align: left; font-size: 14px; align-items: center; column-gap: 8px; }
.te-detaylar button small { grid-column: 2; font-size: 12px; color: #8a8298; font-weight: 700; }
.te-detaylar .kutu { grid-row: span 2; width: 18px; height: 18px; border: 2.5px solid var(--ink); border-radius: 6px; }
.te-detaylar button.secili { border-color: var(--turuncu); background: #fff1e8; }
.te-detaylar button.secili .kutu { background: var(--turuncu); box-shadow: inset 0 0 0 2px #fff; }
.te-baskilar { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.te-baski { background: #fff; border: 2.5px solid #d9cfc0; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.te-baski-ust { display: flex; align-items: center; gap: 8px; }
.te-baski-ust b { flex: 1; }
.te-baski-ust select { font-family: var(--yaz); font-weight: 700; border: 2px solid #cfc3b0; border-radius: 8px; padding: 2px 6px; }
.te-baski-ust .sil { border: none; background: #ffe8e6; color: #b3261e; border-radius: 8px; width: 28px; height: 28px; font-weight: 800; }
.te-satir { display: flex; gap: 5px; flex-wrap: wrap; }
.te-satir button, .te-fontlar button { border: 2px solid #cfc3b0; background: #fff; border-radius: 9px; padding: 3px 10px; font-weight: 800; font-size: 13px; }
.te-satir button.secili, .te-fontlar button.secili { background: var(--ink); color: #fff; border-color: var(--ink); }
.te-fontlar { display: flex; gap: 4px; flex-wrap: wrap; }
.te-fontlar button { font-weight: 400; font-size: 15px; }
.te-baski .metin { font-family: var(--yaz); font-size: 16px; font-weight: 700; border: 2px solid #cfc3b0; border-radius: 9px; padding: 4px 10px; outline: none; }
.te-baski-ekle { align-self: flex-start; margin-top: 10px; font-size: 15px; padding: 5px 16px; }
.te-ozet { border-top: 3px dashed #d8cbb6; padding-top: 10px; }
.te-rakamlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.te-rakamlar > div { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 5px 10px; display: flex; flex-direction: column; }
.te-rakamlar span { font-size: 11px; font-weight: 800; color: #8a8298; text-transform: uppercase; letter-spacing: .05em; }
.te-rakamlar b { font-size: 19px; line-height: 1.2; }
.te-notlar { min-height: 20px; }
.te-trend { font-size: 13px; font-weight: 700; color: #6d6679; margin-top: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.te-trend span, .py-trend span { display: inline-flex; align-items: center; gap: 5px; }
.te-trend i, .py-trend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid rgba(0,0,0,.2); }
.te-dugmeler { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Sitem uygulaması ---------- */
.st { display: flex; flex-direction: column; height: 100%; }
.st-ust { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 2px solid #eee; font-family: var(--yaz); }
.st-logo { width: 36px; height: 36px; }
.st-ust > b { font-size: 20px; margin-right: 10px; }
.st-sekmeler { display: flex; gap: 4px; flex: 1; }
.st-sekmeler button { border: none; background: #f1efe9; border-radius: 10px; padding: 6px 14px; font-weight: 800; font-size: 14px; color: #555; }
.st-sekmeler button.secili { background: #1f9d62; color: #fff; }
.st-durum { font-weight: 800; font-size: 14px; color: #999; }
.st-durum.acik { color: #1f9d62; }
.st-govde { flex: 1; min-height: 0; overflow: auto; }
.st-site { display: flex; flex-direction: column; height: 100%; }
.st-site-ed { flex: 1; min-height: 0; }
.st-site-alt { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding: 8px 14px; border-top: 2px solid #eee; }
.st-puan-yazi { font-weight: 700; color: #666; font-size: 14px; }
.st-site-alt .dugme { font-size: 16px; padding: 6px 18px; }
.st-logo-duzen { display: flex; flex-direction: column; height: 100%; }
.st-logo-ust { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-weight: 700; color: #666; }
.st-logo-ust .dugme { font-size: 15px; padding: 5px 16px; }

/* Marka kurulumu */
.mk { height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, #f4fff9, #e7f5ee); }
.mk-kart { width: min(460px, 90%); background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 22px 26px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 10px; }
.mk-adim { font-weight: 800; color: #1f9d62; font-size: 13px; letter-spacing: .1em; }
.mk h2, .mk-logo h2 { margin: 0; font-size: 26px; font-family: var(--yaz); }
.mk p, .mk-logo p { margin: 0; color: #666; font-weight: 600; }
.mk label { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 14px; color: #555; }
.mk label small { font-weight: 600; color: #999; }
.mk input { font-family: var(--yaz); font-size: 22px; font-weight: 800; border: 3px solid var(--ink); border-radius: 12px; padding: 5px 12px; outline: none; }
.mk input:focus { border-color: #1f9d62; }
.mk .dugme { align-self: flex-end; margin-top: 6px; }
.mk-logo { display: flex; flex-direction: column; height: 100%; }
.mk-logo-ust { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px 6px; }
.mk-editor { flex: 1; min-height: 0; }

/* Logo editörü */
.le { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 10px 16px 14px; height: 100%; font-family: 'Nunito', sans-serif; }
.le-sol { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.le-tuval-kap { border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.le-tuval { width: min(380px, 44vh); height: min(380px, 44vh); display: block; cursor: grab; touch-action: none; }
.le-ipucu { font-size: 12.5px; color: #888; font-weight: 700; }
.le-arka { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: #666; }
.le-onizlemeler { display: flex; gap: 8px; }
.le-on { width: 64px; height: 64px; border-radius: 12px; border: 2px solid #ddd; display: grid; place-items: center; overflow: hidden; }
.le-on canvas { width: 60px; height: 60px; }
.le-on.koyu { background: #1f2233; } .le-on.acik { background: #fff; } .le-on.tisortlu { background: #9cae8c; }
.le-sag { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.le-baslik { font-family: var(--yaz); font-weight: 800; font-size: 18px; }
.le-semboller { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.le-semboller button { aspect-ratio: 1; border: 2px solid #ddd; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 0; }
.le-semboller button:hover { border-color: var(--turuncu); background: #fff5ee; }
.le-semboller canvas { width: 32px; height: 32px; }
.le-yazi-ekle { border: 3px dashed #bbb; background: #fafafa; border-radius: 12px; padding: 8px; font-weight: 800; font-size: 15px; font-family: var(--yaz); }
.le-yazi-ekle:hover { border-color: var(--turuncu); }
.le-ozellik { background: #f7f5f1; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border: 2px solid #eee; }
.le-bos { color: #999; font-weight: 700; }
.le-metin { font-family: var(--yaz); font-size: 20px; font-weight: 800; border: 2.5px solid var(--ink); border-radius: 10px; padding: 3px 10px; outline: none; }
.le-fontlar { display: flex; flex-wrap: wrap; gap: 4px; }
.le-fontlar button { border: 2px solid #ddd; background: #fff; border-radius: 9px; padding: 2px 9px; font-size: 16px; }
.le-fontlar button.secili, .le-satir button.secili { background: var(--ink); color: #fff; border-color: var(--ink); }
.le-satir { display: flex; flex-wrap: wrap; gap: 5px; }
.le-satir button { border: 2px solid #ddd; background: #fff; border-radius: 9px; padding: 3px 10px; font-weight: 800; font-size: 13px; }
.le-satir .le-sil { color: #b3261e; }
.le-alt-baslik { font-size: 12px; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: .06em; }
.le-kaydirici { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: #666; }
.le-kaydirici input { flex: 1; accent-color: var(--turuncu); }

/* Site editörü */
.se { display: grid; grid-template-columns: 320px 1fr; height: 100%; font-family: 'Nunito', sans-serif; }
.se-sol { border-right: 2px solid #eee; display: flex; flex-direction: column; min-height: 0; }
.se-sekmeler { display: flex; gap: 4px; padding: 8px; }
.se-sekmeler button { flex: 1; border: none; background: #f1efe9; border-radius: 9px; padding: 5px; font-weight: 800; }
.se-sekmeler button.secili { background: var(--ink); color: #fff; }
.se-panel { flex: 1; overflow: auto; padding: 0 10px 12px; min-height: 0; }
.se-liste { display: flex; flex-direction: column; gap: 4px; }
.se-oge { display: flex; align-items: center; gap: 3px; background: #f7f5f1; border: 2px solid #eee; border-radius: 10px; padding: 3px 4px 3px 10px; }
.se-oge.secili { border-color: #1f9d62; background: #e9f8f0; }
.se-ad { flex: 1; font-weight: 800; font-size: 14px; cursor: pointer; padding: 3px 0; }
.se-oge button { width: 26px; height: 26px; border: none; background: #fff; border-radius: 7px; font-weight: 800; color: #555; }
.se-oge button:disabled { opacity: .3; }
.se-oge .sil:hover { background: #ffe8e6; color: #b3261e; }
.se-ekle { margin-top: 8px; }
.se-ekle summary { cursor: pointer; font-weight: 800; background: #1f9d62; color: #fff; border-radius: 10px; padding: 7px 12px; list-style: none; text-align: center; }
.se-ekle-liste { display: grid; gap: 4px; margin-top: 6px; }
.se-ekle-liste button { text-align: left; border: 2px solid #eee; background: #fff; border-radius: 10px; padding: 5px 10px; display: flex; flex-direction: column; }
.se-ekle-liste button b { font-size: 14px; }
.se-ekle-liste button small { color: #888; font-size: 12px; font-weight: 600; }
.se-ekle-liste button:hover:not(:disabled) { border-color: #1f9d62; }
.se-ekle-liste button:disabled { opacity: .45; }
.se-notlar { margin-top: 8px; }
.se-ayar { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.se-ayar-baslik { font-family: var(--yaz); font-weight: 800; font-size: 17px; border-top: 2px dashed #ddd; padding-top: 8px; }
.se-ayar label, .se-ayar .alan-s { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 800; color: #777; }
.se-ayar input:not([type=checkbox]):not([type=color]), .se-ayar textarea { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; border: 2px solid #ddd; border-radius: 9px; padding: 5px 8px; outline: none; resize: vertical; color: #222; }
.se-ayar input:focus, .se-ayar textarea:focus { border-color: #1f9d62; }
.se-ayar label.onay { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: #444; }
.se-secim { display: flex; flex-wrap: wrap; gap: 4px; }
.se-secim button { border: 2px solid #ddd; background: #fff; border-radius: 8px; padding: 3px 9px; font-weight: 800; font-size: 13px; }
.se-secim button.secili { background: var(--ink); color: #fff; border-color: var(--ink); }
.se-secim.ikon button { font-size: 17px; padding: 2px 6px; }
.se-ipucu { color: #999; font-weight: 700; font-size: 13px; margin-top: 6px; }
.se-sag { display: flex; flex-direction: column; background: #d9dce3; min-height: 0; }
.se-tarayici { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #eceef2; border-bottom: 1px solid #ccc; }
.se-tarayici .nokta { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.se-tarayici .nokta:nth-child(2) { background: #febc2e; } .se-tarayici .nokta:nth-child(3) { background: #28c840; }
.se-adres { flex: 1; background: #fff; border-radius: 8px; padding: 3px 12px; font-size: 13px; color: #555; font-weight: 700; margin-left: 8px; }
.se-puan { font-size: 13px; font-weight: 800; color: #555; }
.se-puan b { font-size: 17px; }
.se-onizleme { flex: 1; overflow: auto; min-height: 0; }

/* Önizlenen site */
.site { min-height: 100%; font-size: 14px; }
.s-blok { position: relative; cursor: pointer; }
.s-blok:hover::after { content: ''; position: absolute; inset: 0; outline: 2px dashed rgba(31,157,98,.7); outline-offset: -2px; pointer-events: none; }
.s-blok.secili::after { content: ''; position: absolute; inset: 0; outline: 3px solid #1f9d62; outline-offset: -3px; pointer-events: none; }
.site h1 { font-size: 34px; margin: 0 0 8px; line-height: 1.05; }
.site h2 { font-size: 22px; margin: 0 0 12px; }
.site p { margin: 0 0 10px; line-height: 1.45; }
.site header { display: flex; align-items: center; gap: 18px; padding: 10px 22px; }
.s-marka { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.s-marka img { width: 38px; height: 38px; }
.site nav { display: flex; gap: 16px; flex: 1; justify-content: center; font-weight: 700; opacity: .85; }
.s-sepet { font-size: 18px; }
.s-duyuru { overflow: hidden; white-space: nowrap; padding: 6px 0; text-align: center; font-weight: 700; font-size: 13px; }
.s-duyuru .kay { display: inline-block; animation: kay 12s linear infinite; padding-left: 100%; }
@keyframes kay { to { transform: translateX(-100%); } }
.s-afis { display: flex; align-items: center; gap: 20px; padding: 34px 30px; min-height: 200px; }
.s-afis.orta { flex-direction: column; text-align: center; }
.s-afis-yazi { flex: 1; }
.s-afis-gorsel { width: 190px; height: 190px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.s-afis-gorsel.logo { object-fit: contain; box-shadow: none; }
.s-dugme { display: inline-block; padding: 9px 20px; font-weight: 800; text-decoration: none; color: #fff; }
.s-vitrin { padding: 26px 24px; }
.s-izgara { display: grid; gap: 14px; }
.s-urun { padding: 8px; }
.s-urun.golge { box-shadow: 0 6px 20px rgba(0,0,0,.12); background: rgba(255,255,255,.6); }
.s-urun.cerceve { border: 2px solid currentColor; }
.s-urun-foto { position: relative; overflow: hidden; aspect-ratio: 1; background: #eee; }
.s-urun-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-rozet { position: absolute; top: 8px; left: 8px; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.s-tukendi { position: absolute; inset: 0; background: rgba(255,255,255,.7); display: grid; place-items: center; font-weight: 800; color: #b3261e; letter-spacing: .1em; }
.s-urun-ad { font-weight: 800; margin-top: 8px; }
.s-urun-fiyat { font-weight: 800; font-size: 17px; }
.s-bos { opacity: .6; font-weight: 700; padding: 20px; text-align: center; grid-column: 1 / -1; }
.s-ozellik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 24px; text-align: center; }
.s-ozellik div { display: flex; flex-direction: column; gap: 3px; }
.s-ozellik span { font-size: 30px; }
.s-ozellik small { opacity: .75; }
.s-hakkinda { display: flex; align-items: center; gap: 22px; padding: 28px; color: #222; }
.s-hakkinda img { width: 110px; height: 110px; }
.s-yorumlar { padding: 24px; }
.s-yorum-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.s-yorum { background: rgba(0,0,0,.04); padding: 12px; }
.s-yildiz { color: #f2a900; }
.s-yorum small { opacity: .6; }
.s-sayac { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; font-size: 16px; }
.s-sayac span { font-family: monospace; font-size: 22px; font-weight: 800; background: rgba(0,0,0,.2); padding: 2px 10px; border-radius: 8px; }
.s-sosyal { padding: 24px; text-align: center; }
.s-hesap { display: inline-flex; align-items: center; gap: 12px; }
.s-fg { font-size: 26px; color: #d6247a; }
.s-hesap small { opacity: .6; }
.s-bulten { padding: 28px; text-align: center; color: #fff; }
.s-eposta { display: inline-flex; gap: 8px; }
.s-eposta span { background: #fff; color: #999; padding: 9px 16px; min-width: 200px; text-align: left; }
.s-yazi { padding: 22px 28px; }
.s-yazi.orta { text-align: center; }
.s-yazi.k p { font-size: 13px; } .s-yazi.b p { font-size: 19px; } .s-yazi.b h2 { font-size: 30px; }
.s-ayirici { height: 36px; position: relative; }
.s-ayirici.cizgi::before { content: ''; position: absolute; left: 30px; right: 30px; top: 50%; border-top: 2px solid var(--ana); opacity: .5; }
.s-ayirici.dalga::before { content: ''; position: absolute; inset: 8px 30px; background: radial-gradient(circle at 10px -4px, transparent 10px, var(--ana) 11px, transparent 13px) 0 0/20px 20px repeat-x; opacity: .6; }
.site footer { display: flex; align-items: center; gap: 12px; padding: 18px 24px; font-size: 13px; }
.site footer img { width: 30px; height: 30px; }

/* Ürünler */
.ur { padding: 12px 16px; font-family: 'Nunito', sans-serif; }
.ur-rakip { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 700; color: #777; background: #f7f5f1; padding: 8px 12px; border-radius: 10px; }
.ur-rakip b { font-family: var(--yaz); font-size: 15px; }
.ur-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ur-kart { display: grid; grid-template-columns: 120px 1fr 230px; gap: 14px; border: 2.5px solid #eee; border-radius: 16px; padding: 10px; align-items: center; }
.ur-kart.satista { border-color: #1f9d62; background: #f3fcf7; }
.ur-foto { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; }
.ur-ad { font-family: var(--yaz); font-size: 20px; font-weight: 800; }
.ur-kucuk { font-size: 13px; color: #666; font-weight: 700; }
.ur-foto-sec { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; font-size: 12px; font-weight: 800; color: #888; }
.ur-foto-sec button { border: 2px solid #ddd; background: #fff; border-radius: 8px; padding: 2px 8px; font-weight: 700; font-size: 12px; }
.ur-foto-sec button.secili { background: var(--ink); color: #fff; border-color: var(--ink); }
.ur-foto-sec button:disabled { opacity: .4; }
.ur-fiyat label { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; color: #888; gap: 3px; }
.ur-fiyat-kutu { display: flex; align-items: center; border: 2.5px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff; }
.ur-fiyat-kutu input { flex: 1; border: none; font-family: var(--yaz); font-size: 22px; font-weight: 800; padding: 2px 10px; width: 100px; outline: none; }
.ur-fiyat-kutu span { padding: 0 10px; font-weight: 800; font-size: 18px; }
.ur-ipucu { font-size: 12px; color: #888; font-weight: 700; margin-top: 3px; }
.ur-kar { font-size: 13px; font-weight: 800; color: #1f9d62; }
.ur-kar.eksi { color: #b3261e; }
.ur-satis { width: 100%; margin-top: 6px; border: 2.5px solid var(--ink); background: var(--turuncu); color: #fff; border-radius: 10px; font-weight: 800; padding: 6px; font-family: var(--yaz); font-size: 15px; }
.ur-satis.acik { background: #1f9d62; }

/* Satışlar */
.sl { padding: 14px 16px; font-family: 'Nunito', sans-serif; display: flex; flex-direction: column; gap: 14px; }
.sl-kutular { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sl-kutular div { background: #f7f5f1; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; }
.sl-kutular span { font-size: 12px; font-weight: 800; color: #888; }
.sl-kutular b { font-family: var(--yaz); font-size: 22px; }
.sl-kutular small { font-size: 12px; color: #888; font-weight: 700; }
.sl-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sl h3 { margin: 0 0 8px; font-family: var(--yaz); }
.sl-cubuklar { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 16px; }
.sl-cubuklar div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.sl-cubuklar i { width: 100%; background: linear-gradient(#33c48a, #1f9d62); border-radius: 6px 6px 2px 2px; }
.sl-cubuklar b { font-size: 13px; }
.sl-cubuklar small { font-size: 11px; color: #999; font-weight: 700; }
.sl-yorum { border-bottom: 1px solid #eee; padding: 6px 0; }
.sl-yorum p { margin: 2px 0; font-weight: 700; }
.sl-yorum small { color: #999; font-weight: 700; }
.sl-bos { color: #999; font-weight: 700; padding: 10px 0; }

/* Piyasa ekleri */
.marka-satir.benim { border-color: #7b5cff; background: #f6f3ff; }
.marka-satir.benim .marka-logo { display: flex; align-items: center; gap: 8px; }
.marka-satir.benim .marka-logo img { width: 30px; height: 30px; }
.py-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 18px 16px; }
.py-kutu { border: 2px solid #eee; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.py-kutu > span { font-size: 12px; font-weight: 800; color: #888; }
.py-kutu b { font-family: var(--yaz); font-size: 20px; }
.py-kutu small { color: #888; font-weight: 600; font-size: 12px; }
.py-trend { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 800; }

/* Fotogram */
.fg { padding: 16px 20px; font-family: 'Nunito', sans-serif; display: flex; flex-direction: column; gap: 14px; }
.fg-profil { display: flex; align-items: center; gap: 18px; }
.fg-profil img { width: 84px; height: 84px; border-radius: 50%; border: 3px solid #d6247a; padding: 4px; background: #fff; }
.fg-profil b { font-size: 20px; }
.fg-sayilar { display: flex; gap: 18px; margin: 4px 0; }
.fg-sayilar b { font-size: 16px; }
.fg-slogan { color: #777; font-weight: 600; }
.fg-yeni { background: #fdf2f7; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fg-yeni h3 { margin: 0; font-family: var(--yaz); }
.fg-secim { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fg-secim button { border: 3px solid transparent; background: #fff; border-radius: 12px; padding: 4px; display: flex; flex-direction: column; align-items: center; width: 96px; flex: none; }
.fg-secim button img { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; }
.fg-secim button span { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 86px; }
.fg-secim button.secili { border-color: #d6247a; }
.fg-yazi { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; border: 2px solid #f0c9dc; border-radius: 10px; padding: 8px; resize: none; height: 56px; outline: none; }
.fg-paylas { align-self: flex-end; background: #d6247a; font-size: 16px; padding: 6px 20px; }
.fg-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.fg-gonderi { border: 2px solid #eee; border-radius: 12px; overflow: hidden; }
.fg-gonderi img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fg-alt { display: flex; justify-content: space-between; padding: 5px 8px; font-weight: 800; font-size: 13px; }
.fg-gonderi p { margin: 0; padding: 0 8px 8px; font-size: 12.5px; color: #555; }
.dk-logo img { width: 220px; height: 220px; opacity: .22; }

/* ================= Tur 3: Gezgin, ürün ayarları, Fotogram 2 ================= */
.ik-gezgin { background: #2e5fb8; }

/* Ürün kartı: üst satır + açılır site ayarları */
.ur-kart { display: block; }
.ur-ust { display: grid; grid-template-columns: 26px 120px 1fr 230px; gap: 14px; align-items: center; }
.ur-sira { display: flex; flex-direction: column; gap: 4px; }
.ur-sira button { width: 26px; height: 26px; border: 2px solid #ddd; background: #fff; border-radius: 7px; font-weight: 800; }
.ur-sira button:disabled { opacity: .3; }
.ur-ayar-ac { margin-top: 8px; border: none; background: #f1efe9; border-radius: 9px; padding: 5px 10px; font-weight: 800; font-size: 13px; color: #444; font-family: 'Nunito', sans-serif; }
.ur-etki { margin-left: 8px; color: #1f9d62; }
.ur-etki.eksi { color: #b3261e; }
.ur-ayar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed #e6e1d8; }
.ur-aciklama { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 800; color: #777; }
.ur-aciklama small { font-weight: 600; color: #999; }
.ur-aciklama textarea { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; border: 2px solid #ddd; border-radius: 10px; padding: 7px 9px; resize: vertical; min-height: 84px; outline: none; }
.ur-aciklama textarea:focus { border-color: #1f9d62; }
.ur-ayar-sag { display: flex; flex-direction: column; gap: 8px; }
.ur-ayar-sag .alan-s { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 800; color: #777; }
.ur-rozet-yazi { font-family: var(--yaz); font-weight: 800; border: 2px solid #ddd; border-radius: 8px; padding: 3px 8px; width: 160px; outline: none; }
.ur-uyari { color: #b36b00; font-weight: 700; }
.ur-one { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: #444; }
.ur-one small { color: #999; font-weight: 600; }

/* Site: indirim, ürün sayfası, misafir modu */
.s-urun-fiyat del, .s-detay-fiyat del { opacity: .5; font-weight: 600; margin-right: 4px; }
.s-indirim { position: absolute; top: 8px; right: 8px; background: #d93025; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.s-indirim.buyuk { font-size: 18px; padding: 4px 12px; }
.s-rozet.duz { position: static; display: inline-block; margin-bottom: 8px; }
.site.misafir .s-blok { cursor: default; }
.site.misafir .s-blok:hover::after { display: none; }
.site.misafir .s-urun { cursor: pointer; transition: transform .15s; }
.site.misafir .s-urun:hover { transform: translateY(-3px); }
.site.misafir .s-marka, .site.misafir .s-dugme { cursor: pointer; }
.s-geri { padding: 12px 24px 0; font-weight: 700; cursor: pointer; opacity: .7; }
.s-detay { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 18px 28px 26px; align-items: start; }
.s-detay-foto { position: relative; overflow: hidden; aspect-ratio: 1; background: #eee; }
.s-detay-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-detay-bilgi h1 { font-size: 30px; margin: 0 0 6px; }
.s-detay-fiyat { font-size: 26px; font-weight: 800; margin: 8px 0 12px; }
.s-beden { display: flex; gap: 8px; margin: 12px 0 16px; }
.s-beden span { border: 2px solid currentColor; padding: 5px 12px; font-weight: 800; opacity: .8; }
.s-detay .s-dugme { font-size: 16px; padding: 11px 28px; }
.s-stok { display: block; margin-top: 8px; opacity: .7; font-weight: 700; }

/* Gezgin */
.gz { display: flex; flex-direction: column; height: 100%; }
.gz-ust { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #eceef2; border-bottom: 1px solid #d4d7dd; }
.gz-ust button { width: 32px; height: 30px; border: none; background: #fff; border-radius: 8px; font-size: 16px; font-weight: 800; }
.gz-ust button:disabled { opacity: .35; }
.gz-adres { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 16px; padding: 5px 14px; font-size: 14px; font-weight: 700; color: #444; font-family: 'Nunito', sans-serif; }
.gz-kilit { font-size: 12px; }
.gz-yer { display: flex; gap: 4px; padding: 5px 10px; background: #f6f7f9; border-bottom: 1px solid #e3e5ea; overflow-x: auto; }
.gz-yer button { border: none; background: transparent; border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; color: #555; white-space: nowrap; font-family: 'Nunito', sans-serif; }
.gz-yer button:hover { background: #e6e8ee; }
.gz-yer button.secili { background: #dfe7fb; color: #2e5fb8; }
.gz-sayfa { flex: 1; overflow: auto; min-height: 0; background: #fff; }
.gz-serit { background: #ffc83d; color: #1f2233; font-weight: 800; text-align: center; padding: 5px; font-size: 13px; position: sticky; top: 0; z-index: 2; }
.gz-hata { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #777; font-family: 'Nunito', sans-serif; font-weight: 600; text-align: center; padding: 30px; }
.gz-hata b { font-size: 22px; color: #333; font-family: var(--yaz); }
.gz-giris { max-width: 820px; margin: 0 auto; padding: 36px 24px; font-family: 'Nunito', sans-serif; }
.gz-bulgel { font-family: var(--yaz); font-size: 64px; font-weight: 800; text-align: center; letter-spacing: -.02em; }
.gz-ara { margin: 10px auto 26px; max-width: 520px; border: 2px solid #e3e5ea; border-radius: 26px; padding: 10px 18px; color: #555; font-weight: 700; box-shadow: 0 3px 12px rgba(0,0,0,.06); }
.gz-giris h3 { font-family: var(--yaz); margin: 18px 0 8px; }
.gz-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gz-kart { border: 2px solid #eceef2; background: #fff; border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gz-kart:hover { border-color: #2e5fb8; transform: translateY(-2px); }
.gz-kart img { width: 64px; height: 64px; }
.gz-kart b { font-size: 15px; }
.gz-kart small { color: #888; font-weight: 700; font-size: 12px; }

/* Fotogram 2 */
.fg2 { display: grid; grid-template-columns: 190px 1fr; height: 100%; font-family: 'Nunito', sans-serif; }
.fg-nav { border-right: 2px solid #f1e3ea; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; background: #fffafc; }
.fg-logo { font-family: 'Pacifico', cursive; font-size: 26px; padding: 0 8px 10px; background: linear-gradient(45deg, #f9a825, #e1306c 50%, #8e3bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fg-nav button { display: flex; align-items: center; gap: 10px; border: none; background: transparent; border-radius: 12px; padding: 9px 12px; font-weight: 800; font-size: 15px; text-align: left; color: #333; font-family: 'Nunito', sans-serif; }
.fg-nav button span { width: 22px; text-align: center; }
.fg-nav button:hover { background: #fbeef4; }
.fg-nav button.secili { background: #fbe0ec; color: #d6247a; }
.fg-rozet { margin-left: auto; background: #d6247a; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.fg-nav-alt { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 2px solid #f1e3ea; }
.fg-nav-alt img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #d6247a; background: #fff; }
.fg-nav-alt b { font-size: 13px; display: block; }
.fg-nav-alt small { color: #888; font-weight: 700; }
.fg-icerik { overflow: auto; min-height: 0; padding: 16px 20px; }
.fg-profil2 { display: flex; gap: 22px; align-items: flex-start; }
.fg-avatar { width: 110px; height: 110px; border-radius: 50%; border: 3px solid #d6247a; padding: 5px; background: #fff; }
.fg-profil-bilgi { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fg-handle { font-size: 22px; font-weight: 800; }
.fg-ad { font-weight: 800; }
.fg-bio { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; border: 2px solid #f0d6e3; border-radius: 10px; padding: 7px 9px; resize: none; height: 52px; outline: none; }
.fg-link { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; color: #444; }
.fg-link.pasif { opacity: .55; }
.fg-hikayeler { display: flex; gap: 10px; margin: 14px 0; align-items: center; color: #999; font-weight: 700; }
.fg-hikaye-daire { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e1306c; }
.fg-izgara2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fg-kare { position: relative; border: none; padding: 0; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #eee; }
.fg-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-kare-ust { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-weight: 800; font-size: 12px; padding: 16px 8px 6px; text-align: left; }
.fg-detay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; }
.fg-geri { border: none; background: #f1efe9; border-radius: 9px; padding: 5px 12px; font-weight: 800; margin-bottom: 8px; }
.fg-detay-sol img { width: 100%; border-radius: 12px; display: block; }
.fg-detay-sol p { font-weight: 600; color: #444; }
.fg-istat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fg-istat div { background: #fdf2f7; border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; }
.fg-istat span { font-size: 11.5px; font-weight: 800; color: #999; }
.fg-istat b { font-size: 19px; font-family: var(--yaz); }
.fg-detay h4, .fg-tanitim h4, .fg-bildirimler h4 { font-family: var(--yaz); font-size: 17px; margin: 14px 0 6px; }
.fg-yorumlar { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.fg-yorum { background: #fafafa; border-radius: 10px; padding: 7px 10px; font-size: 14px; }
.fg-yorum.spam { opacity: .7; }
.fg-yanitlar { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.fg-yanitlar button { border: 1.5px solid #f0c9dc; background: #fff; border-radius: 12px; padding: 2px 9px; font-size: 12.5px; font-weight: 700; }
.fg-yanitlar button:hover { background: #fbe0ec; }
.fg-yanit { margin-top: 4px; color: #d6247a; font-size: 13px; }
.fg-reklam-kutu { margin-top: 10px; }
.fg-paketler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fg-paketler button { border: 2px solid #f0c9dc; background: #fff; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; font-weight: 800; font-size: 14px; }
.fg-paketler button b { color: #d6247a; font-size: 12px; }
.fg-paketler button small { font-size: 11px; color: #888; font-weight: 700; }
.fg-paketler button:disabled { opacity: .4; }
.fg-psekme { display: flex; gap: 5px; background: #fdf2f7; padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.fg-psekme button { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 7px; font-weight: 800; font-size: 14px; color: #777; }
.fg-psekme button.secili { background: #d6247a; color: #fff; }
.fg-form { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.fg-onizleme img { width: 100%; border-radius: 14px; display: block; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.fg-tahmin { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.fg-tahmin div { background: #fdf2f7; border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; }
.fg-tahmin span { font-size: 11px; font-weight: 800; color: #999; }
.fg-tahmin b { font-family: var(--yaz); font-size: 18px; }
.fg-saat { margin-top: 8px; font-size: 13px; font-weight: 700; color: #666; }
.fg-urunler { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.fg-urunler button { flex: none; width: 86px; border: 3px solid transparent; background: #fff; border-radius: 12px; padding: 3px; display: flex; flex-direction: column; align-items: center; }
.fg-urunler button img { width: 74px; height: 74px; border-radius: 8px; object-fit: cover; }
.fg-urunler button span { font-size: 11px; font-weight: 800; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-urunler button.secili { border-color: #d6247a; }
.fg-filtreler { display: flex; gap: 6px; overflow-x: auto; }
.fg-filtreler button { flex: none; border: 3px solid transparent; background: #fff; border-radius: 10px; padding: 2px; display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 800; }
.fg-filtreler img { width: 58px; height: 58px; border-radius: 7px; object-fit: cover; }
.fg-filtreler button.secili { border-color: #d6247a; }
.fg-yazi2 { width: 100%; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; border: 2px solid #f0c9dc; border-radius: 10px; padding: 8px; resize: none; height: 64px; outline: none; }
.fg-etiketler { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0 10px; font-size: 12px; font-weight: 800; color: #999; }
.fg-etiketler button { border: none; background: #f1efe9; border-radius: 10px; padding: 2px 8px; font-weight: 700; font-size: 12.5px; color: #555; }
.fg-etiketler button.trend { background: #fbe0ec; color: #d6247a; }
.fg-gonder { background: #d6247a; }
.fg-not { font-size: 13px; color: #777; font-weight: 600; margin: 4px 0 8px; }
.fg-hikaye-onizleme { position: relative; aspect-ratio: 9/16; max-height: 420px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #f9a825, #e1306c 55%, #8e3bd8); display: flex; align-items: center; justify-content: center; }
.fg-hikaye-onizleme img { width: 90%; border-radius: 12px; }
.fg-hk-anket { background: #fff; border-radius: 16px; padding: 14px; width: 80%; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.fg-hk-anket span { padding: 8px; border-radius: 10px; font-weight: 800; color: #1f2233; border: 2px solid rgba(0,0,0,.15); }
.fg-hk-atolye { color: #fff; font-size: 60px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; }
.fg-hk-atolye b { font-family: var(--yaz); font-size: 26px; }
.fg-hk-atolye small { font-size: 14px; font-weight: 700; }
.fg-hk-indirim { position: absolute; top: 18%; background: #fff; color: #d93025; font-family: var(--yaz); font-weight: 800; font-size: 24px; padding: 4px 16px; border-radius: 10px; transform: rotate(-6deg); }
.fg-hk-link { position: absolute; bottom: 12%; background: #fff; color: #2e5fb8; font-weight: 800; padding: 5px 14px; border-radius: 14px; }
.fg-hk-turler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fg-hk-turler button { border: 2px solid #f0c9dc; background: #fff; border-radius: 12px; padding: 8px; display: grid; grid-template-columns: 30px 1fr; text-align: left; align-items: center; column-gap: 6px; }
.fg-hk-turler button span { grid-row: span 2; font-size: 22px; }
.fg-hk-turler button small { color: #888; font-size: 11.5px; font-weight: 600; }
.fg-hk-turler button.secili { border-color: #d6247a; background: #fdf2f7; }
.fg-cekilis-ust { display: flex; gap: 14px; align-items: center; font-size: 40px; background: #fdf2f7; border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; }
.fg-cekilis-ust b { font-size: 18px; }
.fg-cekilis-ust p { margin: 2px 0 0; font-size: 13.5px; color: #666; font-weight: 600; }
.fg-cekilis .fg-tahmin { grid-template-columns: repeat(4, 1fr); margin: 12px 0; }
.fg-kesfet-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-weight: 700; color: #666; font-size: 13.5px; }
.fg-kesfet-ust > b { font-family: var(--yaz); font-size: 20px; color: #222; }
.fg-akis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.fg-akis-kart { border: 2px solid #f1e3ea; border-radius: 14px; overflow: hidden; background: #fff; }
.fg-akis-ust { display: flex; align-items: center; gap: 8px; padding: 7px 9px; }
.fg-akis-ust img { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #eee; }
.fg-akis-ust b { font-size: 13px; display: block; }
.fg-akis-ust small { color: #999; font-size: 11px; font-weight: 700; }
.fg-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; flex: none; }
.fg-av.buyuk { width: 50px; height: 50px; font-size: 26px; }
.fg-takip { margin-left: auto; border: none; background: #d6247a; color: #fff; border-radius: 9px; padding: 4px 10px; font-weight: 800; font-size: 12px; }
.fg-takip.on { background: #f1efe9; color: #555; }
.fg-akis-foto { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fg-akis-alt { display: flex; gap: 6px; padding: 6px 9px 0; }
.fg-akis-alt button { border: none; background: #f7f5f1; border-radius: 9px; padding: 4px 9px; font-weight: 800; font-size: 12.5px; }
.fg-akis-alt button.on { background: #fbe0ec; color: #d6247a; }
.fg-akis-kart p { margin: 6px 9px 9px; font-size: 13px; color: #444; font-weight: 600; }
.fg-aktif { background: #fdf2f7; border-radius: 14px; padding: 4px 14px 12px; }
.fg-aktif-satir { display: grid; grid-template-columns: 180px 1fr 140px; gap: 10px; align-items: center; margin-top: 6px; font-size: 13px; }
.fg-aktif-satir small { color: #777; font-weight: 700; }
.fg-inf-model { align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: #777; }
.fg-inf-liste { display: flex; flex-direction: column; gap: 8px; }
.fg-inf { display: flex; align-items: center; gap: 12px; border: 2px solid #f1e3ea; border-radius: 14px; padding: 8px 12px; }
.fg-inf-bilgi { flex: 1; display: flex; flex-direction: column; }
.fg-inf-bilgi small { color: #777; font-weight: 700; font-size: 12.5px; }
.fg-inf .dugme { background: #d6247a; font-size: 15px; padding: 6px 16px; }
.fg-kilit { color: #999; font-weight: 800; font-size: 13px; max-width: 200px; text-align: right; }
.fg-bil { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #f3eaee; font-weight: 700; font-size: 14px; }
.fg-bil.yeni { background: #fdf2f7; }
.fg-inf .dugme:disabled, .fg-gonder:disabled { background: #cfc8d3; box-shadow: 0 4px 0 #a9a1ae; }
.te-tipler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.te-tipler button { border: 2.5px solid #cfc3b0; background: #fff; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.te-tipler button span { font-size: 24px; }
.te-tipler button b { font-size: 14px; }
.te-tipler button small { font-size: 11.5px; color: #8a8298; font-weight: 700; }
.te-tipler button i { display: flex; gap: 3px; font-style: normal; margin-top: 3px; }
.te-tipler em { font-style: normal; font-size: 10px; font-weight: 800; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: #f3d9a4; color: #7a5a00; }
.te-tipler em.yuksek { background: #c8f0dc; color: #13714a; } .te-tipler em.dusuk { background: #ffd9d6; color: #b3261e; }
.te-tipler em.simdi { outline: 2px solid var(--ink); }
.te-tipler button.secili { border-color: var(--turuncu); background: #fff1e8; }
.py-talep { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 13px; }
.py-talep div { display: flex; justify-content: space-between; gap: 8px; }
.py-talep b { font-size: 14px !important; }

/* Kayıt yuvaları */
#a-devam { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
#a-devam small { font-size: 13px; font-weight: 700; opacity: .85; }
#yuvalar { position: fixed; inset: 0; z-index: 60; background: rgba(15, 12, 28, .6); display: grid; place-items: center; animation: sol .25s; }
.yuva-kart { width: min(760px, 94vw); max-height: 90vh; display: flex; flex-direction: column; padding: 18px 20px; gap: 12px; }
.yuva-ust { display: flex; align-items: center; justify-content: space-between; }
.yuva-ust .dugme { font-size: 15px; padding: 5px 16px; }
.yuva-liste { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.yuva { display: grid; grid-template-columns: 30px 64px 1fr auto; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 8px 12px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.yuva.bos { background: transparent; border-style: dashed; border-color: #bfb3a0; box-shadow: none; }
.yuva.aktif { border-color: var(--turuncu); }
.yuva-no { font-weight: 800; font-size: 22px; color: #a39aae; text-align: center; }
.yuva-resim { width: 60px; height: 60px; border-radius: 12px; background: #f3ede3; display: grid; place-items: center; font-size: 28px; overflow: hidden; }
.yuva-resim img { width: 56px; height: 56px; }
.yuva-bilgi b { font-size: 19px; display: block; line-height: 1.1; }
.yuva-bilgi small { display: block; color: #6d6679; font-weight: 700; font-size: 13px; font-family: 'Nunito', sans-serif; }
.yuva-dugmeler { display: flex; gap: 6px; }
.yuva-dugmeler .dugme { font-size: 15px; padding: 5px 14px; }
.yuva-dugmeler .kucuk { width: 38px; padding: 5px 0; }
.yuva-alt { display: flex; align-items: center; gap: 12px; }
.yuva-alt .dugme { font-size: 15px; padding: 5px 14px; flex: none; }
.yuva-alt span { font-size: 12.5px; color: #8a8298; font-weight: 700; font-family: 'Nunito', sans-serif; }
.menu-alt { font-size: 12.5px; color: #8a8298; font-weight: 700; }

/* ================= Kulüpler (futbol) ================= */
.ikonlar { grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 82px); max-height: calc(100% - 64px); }
.ik-kulupler { background: #1f7a3a; }
.te-takim { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #d9cfc0; border-radius: 12px; padding: 6px 10px; font-weight: 800; font-size: 13px; color: #6d6679; }
.te-takim i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); }
.te-takim button { margin-left: auto; border: 2px solid var(--ink); background: var(--sari); border-radius: 9px; font-weight: 800; font-size: 12.5px; padding: 3px 10px; }
.te-rakamlar > .te-uyum { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
.te-uyum span { font-size: 11px; font-weight: 800; color: #8a8298; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.te-uyum .bar { flex: 1; }

.kl { display: flex; flex-direction: column; height: 100%; font-family: 'Nunito', sans-serif; }
.kl-ust { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 2px solid #e8efe9; background: linear-gradient(90deg, #eef8f0, #fff); }
.kl-baslik { font-family: var(--yaz); font-weight: 800; font-size: 20px; }
.kl-sekmeler { display: flex; gap: 4px; flex: 1; }
.kl-sekmeler button { border: none; background: #edf1ee; border-radius: 10px; padding: 6px 14px; font-weight: 800; font-size: 14px; color: #555; font-family: var(--yaz); }
.kl-sekmeler button.secili { background: #1f7a3a; color: #fff; }
.kl-sezon { font-weight: 800; color: #1f7a3a; font-size: 13px; }
.kl-govde { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }
.kl-ligsec { display: flex; gap: 6px; margin-bottom: 10px; }
.kl-ligsec button { border: 2.5px solid var(--r); background: #fff; color: var(--r); border-radius: 12px; padding: 6px 14px; font-weight: 800; font-family: var(--yaz); font-size: 15px; }
.kl-ligsec button.secili { background: var(--r); color: #fff; }
.kl-ligsec small { font-size: 11px; opacity: .8; }
.kl-tablo { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.kl-tablo th { text-align: left; font-size: 11.5px; color: #888; font-weight: 800; padding: 4px 6px; border-bottom: 2px solid #eee; }
.kl-tablo td { padding: 5px 6px; border-bottom: 1px solid #f1f1f1; }
.kl-tablo tr[data-k] { cursor: pointer; }
.kl-tablo tr[data-k]:hover { background: #f4faf5; }
.kl-tablo tr.benim { background: #fff4e6; }
.kl-ad { display: flex; align-items: center; gap: 8px; }
.kl-arma { display: inline-block; vertical-align: middle; }
.kl-form i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 800; color: #fff; margin-right: 2px; }
.kl-form i.G { background: #33c48a; } .kl-form i.B { background: #b9b3c2; } .kl-form i.M { background: #ef4b4b; }
.kl-spn { white-space: nowrap; font-size: 12.5px; color: #666; font-weight: 700; }
td.kl-spn img { width: 30px; height: 30px; vertical-align: middle; margin-right: 4px; }
.kl-ipucu { margin-top: 10px; color: #999; font-weight: 700; font-size: 13px; }
.kl-kulup .kl-geri, .kl-geri { border: none; background: #edf1ee; border-radius: 9px; padding: 5px 12px; font-weight: 800; margin-bottom: 8px; }
.kl-kulup-ust { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, var(--r1), var(--r2)); border-radius: 18px; padding: 14px 18px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.kl-kulup-ust h2 { margin: 0; font-family: var(--yaz); font-size: 30px; }
.kl-etiketler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kl-etiketler span { background: rgba(0,0,0,.35); border-radius: 9px; padding: 2px 10px; font-weight: 800; font-size: 13px; text-shadow: none; }
.kl-kulup-govde { display: grid; grid-template-columns: 220px 1fr; gap: 16px; margin-top: 12px; }
.kl-forma-kutu { background: #2f6b57; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 12.5px; text-align: center; }
.kl-kulup-bilgi { display: flex; flex-direction: column; gap: 8px; }
.kl-kart { background: #f7f9f7; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; }
.kl-kart > span { font-size: 12px; font-weight: 800; color: #888; }
.kl-kart b { font-family: var(--yaz); font-size: 20px; }
.kl-kart i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; border: 2px solid rgba(0,0,0,.2); }
.kl-kart small { color: #999; font-weight: 700; }
.kl-ara { background: #1f7a3a; align-self: flex-start; }
.kl-ara small { font-size: 12px; opacity: .8; }

.kl-gorusme { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; height: 100%; }
.kl-video { position: relative; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r1) 55%, #222), #111); border-radius: 18px; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; }
.kl-video-ust { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; font-weight: 800; background: rgba(0,0,0,.35); }
.kl-canli { color: #ff5a5a; font-size: 12px; animation: nabiz 1.2s infinite; }
.kl-baskan { position: relative; margin: 18px auto 6px; width: 170px; height: 170px; border-radius: 50%; background: linear-gradient(160deg, var(--r1), var(--r2)); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255,255,255,.15); }
.kl-bk-ikon { font-size: 80px; }
.kl-bk-yuz { position: absolute; right: -6px; bottom: 6px; font-size: 44px; background: #fff; border-radius: 50%; width: 60px; height: 60px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.kl-baskan .kl-arma { position: absolute; left: -8px; bottom: 0; }
.kl-konusma { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 70px; justify-content: flex-end; }
.kl-balon { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-weight: 700; font-size: 14px; }
.kl-balon.o { background: #fff; color: #222; align-self: flex-start; border-bottom-left-radius: 4px; }
.kl-balon.sen { background: #dcf7ea; color: #13714a; align-self: flex-end; border-bottom-right-radius: 4px; }
.kl-sen { position: absolute; right: 12px; bottom: 12px; width: 84px; height: 84px; border-radius: 14px; background: #2a2a33; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.3); color: #ccc; }
.kl-sen img { width: 54px; height: 54px; }
.kl-teklif { display: flex; flex-direction: column; gap: 10px; }
.kl-teklif h3 { margin: 0; font-family: var(--yaz); }
.kl-teklif .alan-s { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 800; color: #777; }
.kl-kaydir { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: #555; }
.kl-kaydir input[type=range] { accent-color: #1f7a3a; }
.kl-kaydir small { font-weight: 600; color: #999; font-size: 12px; }
.kl-hizli { display: flex; gap: 4px; align-items: center; }
.kl-hizli button { border: 2px solid #ddd; background: #fff; border-radius: 8px; padding: 2px 8px; font-weight: 800; font-size: 12px; }
.kl-hesap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kl-hesap div { background: #f7f9f7; border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; }
.kl-hesap span { font-size: 11px; font-weight: 800; color: #999; }
.kl-hesap b { font-family: var(--yaz); font-size: 17px; }
.kl-hesap b.eksi, .kl-sp-satir b.eksi { color: #b3261e; }
.kl-gonder { background: #1f7a3a; }
.kl-kabul { font-size: 16px; }
.kl-imza { height: 100%; display: grid; place-items: center; }
.kl-imza-kart { text-align: center; max-width: 480px; background: linear-gradient(160deg, color-mix(in srgb, var(--r1) 18%, #fff), #fff); border: 3px solid var(--ink); border-radius: 22px; padding: 24px; box-shadow: var(--golge); }
.kl-imza-kart img { vertical-align: middle; }
.kl-arti { font-size: 34px; font-weight: 800; margin: 0 12px; vertical-align: middle; color: #999; }
.kl-imza-kart h2 { font-family: var(--yaz); margin: 10px 0 4px; }
.kl-imza-kart .dugme { background: #1f7a3a; }
.kl-editor { height: 100%; margin: -12px -16px; }
.kl-editor .te { height: 100%; }
.kl-sp-liste { display: flex; flex-direction: column; gap: 10px; }
.kl-sp { display: grid; grid-template-columns: 240px 100px 1fr 250px; gap: 14px; align-items: center; border: 2.5px solid #e3ebe5; border-left: 10px solid var(--r1); border-radius: 16px; padding: 10px 14px; background: #fff; }
.kl-sp.bitti { opacity: .6; }
.kl-sp-sol { display: flex; align-items: center; gap: 10px; }
.kl-sp-sol b { font-family: var(--yaz); font-size: 17px; display: block; }
.kl-sp-sol small { color: #888; font-weight: 700; }
.kl-sp-forma { background: #2f6b57; border-radius: 12px; display: grid; place-items: center; padding: 4px; }
.kl-sp-forma canvas { width: 88px; height: auto; }
.kl-sp-bilgi { display: flex; flex-direction: column; gap: 5px; }
.kl-sp-satir { display: grid; grid-template-columns: 140px 1fr; align-items: center; font-size: 13px; font-weight: 700; color: #666; }
.kl-sp-satir .bar { height: 11px; border-width: 2px; }
.kl-sp-dugmeler { display: flex; flex-direction: column; gap: 6px; }
.kl-sp-dugmeler .dugme { font-size: 14px; padding: 5px 12px; }
.kl-tanit { background: #1f7a3a; }
.kl-fiyat { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; color: #888; gap: 2px; }
.kl-fiyat small { font-weight: 700; }
.kl-sonuclar { display: flex; flex-direction: column; gap: 6px; }
.kl-sonuclar h4 { font-family: var(--yaz); margin: 12px 0 4px; }
.kl-mac { background: #f7f9f7; border-radius: 12px; padding: 6px 12px; font-size: 14px; }
.kl-mac.benim { background: #fff4e6; border: 2px solid #ffc27a; }
.kl-mac small { color: #999; font-weight: 700; }
.kl-mac > div { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 8px; font-weight: 700; }
.kl-mac .ev { text-align: right; } .kl-mac b { text-align: center; font-family: var(--yaz); font-size: 18px; }
.kl-tepki { display: flex; gap: 14px; align-items: center; }
.kl-tepki img { width: 130px; background: #2f6b57; border-radius: 14px; padding: 6px; }
.kl-tepki p { margin: 4px 0; }

.kl-hesap .kl-net { grid-column: 1 / -1; }
.te-rakamlar span { font-size: 11px; font-weight: 800; color: #8a8298; text-transform: uppercase; letter-spacing: .05em; }

/* ================= Futbolcular ve kramponlar ================= */
.fb-filtre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: #777; margin-bottom: 6px; }
.fb-filtre label { display: flex; align-items: center; gap: 5px; margin-right: 12px; color: #444; }
.fb-filtre button { border: 2px solid #ddd; background: #fff; border-radius: 8px; padding: 2px 9px; font-weight: 800; font-size: 12.5px; }
.fb-filtre button.secili { background: var(--ink); color: #fff; border-color: var(--ink); }
.fb-bilgi { background: #fff8e8; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; color: #7a5a00; }
.fb-tablo td { font-size: 13px; }
.fb-ad { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fb-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 2px solid rgba(0,0,0,.15); flex: none; }
.fb-pot { white-space: nowrap; color: #888; font-weight: 700; }
.fb-pot.kesin { color: #1f7a3a; font-weight: 800; }
.fb-gozlem, .fb-ara { border: 2px solid #ddd; background: #fff; border-radius: 8px; padding: 1px 7px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.fb-ara { border-color: #1f7a3a; color: #1f7a3a; }
.fb-ara:hover { background: #1f7a3a; color: #fff; }
.yukari { color: #1f9d62; font-weight: 800; }
.fb-kart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 16px; }
.fb-kart div { background: rgba(0,0,0,.35); border-radius: 10px; padding: 5px 8px; color: #fff; display: flex; flex-direction: column; }
.fb-kart span { font-size: 10.5px; font-weight: 800; opacity: .75; }
.fb-kart b { font-size: 15px; }
.kl-golcu { display: block; margin-top: 2px; color: #777 !important; }
.kl-golcu b { color: #ff6a3d; }
.kr-ust { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, #1b1e26, #3b4150); color: #fff; border-radius: 16px; padding: 12px 16px; }
.kr-ust b { font-family: var(--yaz); font-size: 22px; }
.kr-ust p { margin: 2px 0 0; font-size: 13px; opacity: .85; }
.kr-ust .dugme { flex: none; }
.kr-bekleyen { margin-top: 8px; background: #eef5ff; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 13px; color: #2e5fb8; }
.kr-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kr-kart { display: grid; grid-template-columns: 140px 1fr auto; gap: 14px; align-items: center; border: 2.5px solid #e6e6ea; border-radius: 16px; padding: 8px 12px; background: #fff; }
.kr-resim { background: #2a2e38; border-radius: 12px; display: grid; place-items: center; height: 100px; overflow: hidden; }
.kr-resim canvas { width: 130px; height: auto; }
.kr-bilgi > b { font-family: var(--yaz); font-size: 18px; display: block; }
.kr-bilgi small { display: block; color: #777; font-weight: 700; font-size: 13px; }
.kr-siparis { display: flex; gap: 6px; }
.kr-siparis button { border: 2.5px solid var(--ink); background: var(--turuncu); color: #fff; border-radius: 11px; padding: 5px 10px; font-weight: 800; display: flex; flex-direction: column; align-items: center; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }
.kr-siparis button small { font-size: 11px; opacity: .9; }
.kr-siparis button:disabled { background: #cfc8d3; box-shadow: 0 3px 0 #a9a1ae; }
.kr-masa { background: radial-gradient(ellipse at center, #3b4150, #1b1e26); }
.ik-banka { background: #0f5e9c; }
.borc-yazi { font-size: 12px; font-weight: 800; color: var(--kirmizi); line-height: 1; }
.yemek.anne { background: #fff8e8; border-color: #ffd98a; }
.yemek.anne button { background: #e0a100; }
.bk { padding: 16px 20px; font-family: 'Nunito', sans-serif; }
.bk-ust b { font-family: var(--yaz); font-size: 26px; color: #0f5e9c; display: block; }
.bk-ust span { color: #777; font-weight: 700; font-size: 13px; }
.bk-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.bk-kutular div { background: #eef5fb; border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.bk-kutular div.borc { background: #ffe8e6; }
.bk-kutular span { font-size: 12px; font-weight: 800; color: #777; }
.bk-kutular b { font-family: var(--yaz); font-size: 22px; }
.bk-kutular small { color: #999; font-weight: 700; font-size: 11.5px; }
.bk h3 { font-family: var(--yaz); margin: 14px 0 4px; }
.bk-not { margin: 0 0 8px; color: #777; font-weight: 600; font-size: 13px; }
.bk-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-dugmeler .dugme { font-size: 16px; padding: 6px 16px; }
.bk-dugmeler .dugme:not(.ikincil):not(.yesil) { background: #0f5e9c; }

.ikonlar { grid-template-rows: repeat(auto-fill, 76px); gap: 2px; }
.ik { width: 48px; height: 48px; }
.ik svg { width: 36px; height: 36px; }
.ikon { padding: 4px; font-size: 12.5px; }