/* Minecraft üretim masası aracı — /araclar/minecraft-uretim ve eşya detay sayfaları.
   Base = LIGHT (site varsayılanı data-theme="light"); dark override her blokta hemen altında. */

.mc-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 56px;
    --mc-accent: #5a8f3d;          /* Minecraft çimen yeşili, sitede okunur tona çekildi */
    --mc-accent-soft: rgba(90, 143, 61, .12);
    --mc-card: #ffffff;
    --mc-bg: rgba(0, 0, 0, .025);
    --mc-border: rgba(0, 0, 0, .10);
    --mc-text: rgba(18, 24, 38, .95);
    --mc-muted: rgba(18, 24, 38, .60);
    --mc-slot-frame: #8b8b8b;       /* masanın gri gövdesi (oyundaki gibi) */
    --mc-slot: #3a3a3a;
    --mc-tip-bg: #22262f;
    --mc-tip-text: #ffffff;
    color: var(--mc-text);
}

[data-theme="dark"] .mc-page {
    --mc-accent: #7cb85f;
    --mc-accent-soft: rgba(124, 184, 95, .16);
    --mc-card: rgba(255, 255, 255, .05);
    --mc-bg: rgba(255, 255, 255, .03);
    --mc-border: rgba(255, 255, 255, .12);
    --mc-text: rgba(255, 255, 255, .95);
    --mc-muted: rgba(255, 255, 255, .62);
    --mc-slot-frame: #5a5a5a;
    --mc-slot: #2b2b2b;
    --mc-tip-bg: #f2f3f5;
    --mc-tip-text: #14171d;
}

/* ⚠️ site.css'teki genel gece-modu kuralı
   ([data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.og-buy-btn))
   6 sınıf özgüllüğünde ve buradaki her bağlantıyı mercan kırmızısına çeviriyor: yeşil zeminli
   butonda ve kartlarda okunmuyordu. Araç kendi renk düzenini korur — bu yüzden !important şart,
   özgüllük yarışıyla kazanılmıyor. */
.mc-page a.mc-cta { color: #fff !important; }
.mc-page a.mc-tile,
.mc-page .mc-mats a,
.mc-page .mc-cat-links a,
.mc-page .mc-linkrow a { color: var(--mc-text) !important; }
.mc-page .mc-crumbs a { color: var(--mc-muted) !important; }

.mc-page a.mc-tile:hover,
.mc-page .mc-mats a:hover,
.mc-page .mc-cat-links a:hover,
.mc-page .mc-linkrow a:hover,
.mc-page .mc-crumbs a:hover { color: var(--mc-accent) !important; }

/* ---------------------------------------------------------------- başlık, kırıntı */

.mc-crumbs { font-size: .85rem; color: var(--mc-muted); margin-bottom: 16px; }
.mc-crumbs a { color: var(--mc-muted); text-decoration: none; }
.mc-crumbs a:hover { color: var(--mc-accent); }
.mc-crumb-sep { margin: 0 6px; opacity: .6; }
.mc-crumb-current { color: var(--mc-text); font-weight: 600; }

.mc-head { margin-bottom: 24px; }
.mc-head h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; margin: 0 0 10px; }
.mc-head p { color: var(--mc-muted); line-height: 1.65; margin: 0; max-width: 70ch; }
.mc-head-meta { margin-top: 10px; font-size: .82rem; color: var(--mc-muted); }
.mc-badge {
    display: inline-block; background: var(--mc-accent-soft); color: var(--mc-accent);
    border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700;
}

/* ---------------------------------------------------------------- üretim masası */

.mc-bench {
    display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
    background: var(--mc-bg); border: 1px solid var(--mc-border);
    border-radius: 16px; padding: 22px;
}

.mc-grid {
    display: grid; grid-template-columns: repeat(3, 56px); grid-auto-rows: 56px; gap: 5px;
    background: var(--mc-slot-frame); padding: 5px; border-radius: 8px;
}
.mc-grid-single { grid-template-columns: 56px; }

.mc-slot {
    background: var(--mc-slot); border-radius: 4px; position: relative;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .35), inset -1px -1px 0 rgba(255, 255, 255, .10);
}
.mc-slot img { width: 48px; height: 48px; image-rendering: pixelated; }
.mc-slot-empty { opacity: .85; }
.mc-slot-noimg { font-size: .55rem; color: #ddd; text-align: center; padding: 3px; line-height: 1.15; word-break: break-word; }

/* Tıklanabilir göz: malzemenin kendi tarif sayfasına gider. */
.mc-slot-link { cursor: pointer; text-decoration: none; }
.mc-slot-link:hover { outline: 2px solid var(--mc-accent); outline-offset: 1px; }
.mc-slot-link:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }

/* Bilgi balonu: gözün üstünde malzemenin adı. Dokunmatikte hover yok, orada bağlantı iş görür. */
.mc-slot[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    background: var(--mc-tip-bg); color: var(--mc-tip-text);
    font-size: .78rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
    padding: 6px 10px; border-radius: 7px; z-index: 20; pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
/* Balonun ucundaki üçgen bilerek yok: bir gözün iki sözde-elemanı var, ::after balon,
   ::before ise etiketli gözün noktası. Nokta ikonun ÜSTÜNDE görünmek zorunda (arka plana
   çizilince simgenin altında kalıyordu), üçgen ise sadece süs. */
/* Uzun etiketlerde ("herhangi bir meşe kütüğü · Meşe Kütüğü") dar ekranda balon taşmasın:
   içeriği kadar genişler, sığmazsa satır atlar. */
@media (max-width: 560px) {
    .mc-slot[data-tip]:hover::after {
        white-space: normal; width: max-content; max-width: 150px; text-align: center;
    }
}
.mc-slot-count {
    position: absolute; right: 3px; bottom: 0; font-size: .8rem; font-weight: 800;
    color: #fff; text-shadow: 1.5px 1.5px 0 #000;
}
/* Etiketli göz (ör. "herhangi bir tahta") — birden çok seçenek var, köşesinden işaretlenir.
   ⚠️ Nokta ::after ile ÇİZİLEMEZ: ::after'ı bilgi balonu kullanıyor, ikisi aynı sözde-elemanı
   paylaşınca noktanın width/height/top bildirimleri balonda kalıyor ve balon 6 pikselik bir
   kutuya sıkışıp yazısı zeminsiz taşıyordu. Koyu halka, dokusu ne olursa olsun noktayı ayırır. */
.mc-slot-any::before {
    content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--mc-accent);
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5);
    z-index: 2; pointer-events: none;
}

.mc-arrow { font-size: 2rem; color: var(--mc-muted); line-height: 1; }

.mc-out { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mc-out .mc-slot { width: 72px; height: 72px; }
.mc-out .mc-slot img { width: 48px; height: 48px; }
.mc-out-name { font-weight: 700; }
.mc-out-station { font-size: .82rem; color: var(--mc-muted); }

/* ---------------------------------------------------------------- arama + liste */

.mc-search-wrap { margin: 24px 0 12px; position: relative; }
.mc-search {
    width: 100%; padding: 13px 16px; font-size: 1rem;
    border: 1px solid var(--mc-border); border-radius: 12px;
    background: var(--mc-card); color: var(--mc-text);
}
.mc-search:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px var(--mc-accent-soft); }

.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.mc-chip {
    border: 1px solid var(--mc-border); background: transparent; color: var(--mc-text);
    border-radius: 999px; padding: 7px 14px; font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.mc-chip:hover { border-color: var(--mc-accent); }
.mc-chip[aria-pressed="true"] { background: var(--mc-accent); border-color: var(--mc-accent); color: #fff; }

.mc-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px;
}
.mc-tile {
    display: flex; align-items: center; gap: 10px; text-align: left;
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 10px;
    padding: 9px 11px; cursor: pointer; color: var(--mc-text); font: inherit; width: 100%;
    transition: border-color .15s, transform .1s;
}
.mc-tile:hover { border-color: var(--mc-accent); transform: translateY(-1px); }
.mc-tile img { width: 32px; height: 32px; image-rendering: pixelated; flex: 0 0 32px; }
.mc-tile-name { font-size: .88rem; font-weight: 600; line-height: 1.25; }
.mc-empty { color: var(--mc-muted); padding: 18px 4px; }
.mc-more { text-align: center; margin-top: 16px; }

/* ---------------------------------------------------------------- kartlar / bölümler */

.mc-section { margin-top: 40px; }
.mc-section h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 14px; }
.mc-section h3 { font-size: 1.05rem; font-weight: 700; margin: 22px 0 10px; }

.mc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mc-cat-card {
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 12px; padding: 16px;
}
.mc-cat-card h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.mc-cat-count { font-size: .8rem; color: var(--mc-muted); }
.mc-cat-links { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.mc-cat-links a { font-size: .85rem; color: var(--mc-text); text-decoration: none; border-bottom: 1px solid var(--mc-border); }
.mc-cat-links a:hover { color: var(--mc-accent); border-bottom-color: var(--mc-accent); }

.mc-prose { line-height: 1.75; }
.mc-prose p { margin: 0 0 14px; }
.mc-prose p:last-child { margin-bottom: 0; }

.mc-mats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-mats li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.mc-mats img { width: 32px; height: 32px; image-rendering: pixelated; }
.mc-mats b { min-width: 34px; }
.mc-mats a { color: var(--mc-text); text-decoration: none; border-bottom: 1px solid var(--mc-border); }
.mc-mats a:hover { color: var(--mc-accent); border-bottom-color: var(--mc-accent); }
.mc-mats .mc-mat-tag { color: var(--mc-muted); }

.mc-linkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-linkrow a {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 999px;
    padding: 6px 13px; font-size: .87rem; font-weight: 600; color: var(--mc-text); text-decoration: none;
}
.mc-linkrow a:hover { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-linkrow img { width: 24px; height: 24px; image-rendering: pixelated; }

.mc-note {
    background: var(--mc-accent-soft); border: 1px solid var(--mc-border); border-left: 3px solid var(--mc-accent);
    border-radius: 8px; padding: 12px 14px; font-size: .88rem; color: var(--mc-muted); margin-top: 18px;
}

.mc-recipe-block { margin-bottom: 26px; }
.mc-recipe-block > h3 { margin-top: 0; }

.mc-cta {
    display: inline-block; background: var(--mc-accent); color: #fff; border-radius: 10px;
    padding: 10px 18px; font-weight: 700; text-decoration: none; margin-top: 8px;
}
.mc-cta:hover { color: #fff; opacity: .92; }

/* ---------------------------------------------------------------- rehber köprüsü */

.mc-guide-card {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0 0;
    padding: 14px 16px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-left: 3px solid var(--mc-accent);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, transform .1s;
}
.mc-guide-card:hover { border-color: var(--mc-accent); transform: translateY(-1px); }

.mc-guide-cover {
    width: 76px; height: 50px; object-fit: cover; border-radius: 7px; flex: 0 0 76px;
}
.mc-guide-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-guide-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--mc-accent);
}
.mc-guide-title { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.mc-guide-sub { font-size: .82rem; color: var(--mc-muted); line-height: 1.4; }
.mc-guide-go { margin-left: auto; font-size: 1.3rem; color: var(--mc-accent); flex: 0 0 auto; }

/* site.css'in gece-modu link kuralı bu kartın yazılarını da mercan kırmızısına çeviriyor
   (bkz. yukarıdaki not); kart kendi renk düzenini korur. */
.mc-page a.mc-guide-card,
.mc-page a.mc-guide-card .mc-guide-title { color: var(--mc-text) !important; }
.mc-page a.mc-guide-card .mc-guide-sub { color: var(--mc-muted) !important; }
.mc-page a.mc-guide-card .mc-guide-label,
.mc-page a.mc-guide-card .mc-guide-go { color: var(--mc-accent) !important; }

@media (max-width: 460px) {
    .mc-guide-cover { display: none; }
}

.mc-faq { margin: 0; }
.mc-faq details {
    border: 1px solid var(--mc-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
    background: var(--mc-card);
}
.mc-faq summary { cursor: pointer; font-weight: 700; }
.mc-faq p { margin: 10px 0 0; color: var(--mc-muted); line-height: 1.7; }

@media (max-width: 560px) {
    .mc-bench { gap: 12px; padding: 16px; }
    .mc-grid { grid-template-columns: repeat(3, 48px); grid-auto-rows: 48px; }
    .mc-grid-single { grid-template-columns: 48px; }
    .mc-slot img { width: 32px; height: 32px; }
    .mc-arrow { transform: rotate(90deg); }
    .mc-results { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}