/* ==========================================================================
   Bal Ansiklopedisi — ÖN YÜZ
   Kenetlenen petek (interlocking honeycomb) — JS ile konumlandırılır.
   Yuvarlatılmış altıgen = marka SVG'si (CSS mask). Cevap ızgaranın altında açılır.
   ========================================================================== */

:root {
    --honey:       #F9C300;   /* marka rengi */
    --honey-soft:  #ffd233;
    --honey-deep:  #e6b400;
    --honey-50:    #FFFBEC;
    --ink:         #2A2410;
    --ink-soft:    #6A6248;
    --line:        #EFE7CF;
    --white:       #ffffff;
    --radius:      16px;
    /* Yuvarlatılmış altıgen (marka SVG'si) — CSS mask olarak kullanılır */
    --hex-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcgMjA4Ij48ZyBmaWxsPSJub25lIiBjbGFzcz0ibmMtaWNvbi13cmFwcGVyIj48cGF0aCBkPSJNLjUgNjQuMjU3djc5LjQ4NWMwIDguNTYyIDQuNTk3IDE2LjUwNyAxMi4wMDcgMjAuNzg4bDY4Ljk4NiAzOS43NTlhMjQuMTIgMjQuMTIgMCAwIDAgMjQuMDQ4IDBsNjguOTUyLTM5Ljc1OWM3LjQ0NC00LjI4MSAxMi4wMDctMTIuMjI2IDEyLjAwNy0yMC43ODhWNjQuMjU4YzAtOC41NjItNC41OTctMTYuNTA3LTEyLjAwNy0yMC43ODhMMTA1LjU0MSAzLjcxYTI0LjEyIDI0LjEyIDAgMCAwLTI0LjA0OCAwTDEyLjUwNyA0My40N0M1LjA5NyA0Ny43NS41IDU1LjY5Ni41IDY0LjI1N3oiIGZpbGw9ImN1cnJlbnRDb2xvciI+PC9wYXRoPjwvZz48L3N2Zz4=');
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-serif);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.enc { max-width: 1180px; margin: 0 auto; padding: 26px 20px 48px; }

/* ---------- Başlık + Arama ---------- */
.enc-head { margin-bottom: 24px; }
.enc-title {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700; margin: 0 0 20px; letter-spacing: -.3px;
}
.enc-toolbar { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; max-width: 920px; }
.enc-search { position: relative; flex: 1; min-width: 200px; }
.enc-actions { display: flex; gap: 12px; align-items: stretch; flex: 0 0 auto; }

/* Dil seçimi (TR/EN — ayrı sayfalar) */
.enc-lang {
    display: inline-flex; flex: 0 0 auto; align-items: stretch;
    background: #FFF7DD; border: 1.5px solid var(--honey); border-radius: 12px; padding: 3px;
}
.lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-size: 15px; font-weight: 700;
    color: var(--ink-soft); background: transparent; border: 0; cursor: pointer;
    padding: 8px 16px; border-radius: 9px; text-decoration: none;
    transition: background .15s, color .15s;
}
a.lang-btn:hover { background: #fdeec0; color: var(--ink); }
.lang-btn.is-active { background: var(--honey); color: #1c1503; }
.enc-ask-btn {
    flex: 0 0 auto;
    font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    color: #fff; background: #1b1b1b;
    border: 0; border-radius: 14px; padding: 0 30px; cursor: pointer;
    transition: background .15s, transform .05s;
}
.enc-ask-btn:hover { background: #000; }
.enc-ask-btn:active { transform: translateY(1px); }
.enc-search-ico {
    position: absolute; left: 18px; top: 50%;
    width: 22px; height: 22px; transform: translateY(-50%);
    color: var(--honey-deep); pointer-events: none;
}
#encSearch {
    width: 100%; font-family: var(--font-serif);
    font-size: 18px; color: var(--ink);
    padding: 15px 20px 15px 52px;
    border: 1.5px solid var(--line); border-radius: 14px; background: var(--white);
    outline: none; transition: border-color .18s, box-shadow .18s;
}
#encSearch:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(249, 195, 0, .18); }

/* ==========================================================================
   PETEK — JS konumlandırır (.hex absolute). Şekil = mask.
   ========================================================================== */
.comb {
    position: relative;
    width: 100%;
    margin: 6px auto 0;
    min-height: 120px;
}

.hex {
    position: absolute;
    border: 0; padding: 0; margin: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-serif);
    -webkit-tap-highlight-color: transparent;
}

.hex-bg {
    position: absolute; inset: 0;
    background: var(--honey);
    -webkit-mask: var(--hex-mask) no-repeat center / 100% 100%;
            mask: var(--hex-mask) no-repeat center / 100% 100%;
    filter: drop-shadow(0 4px 7px rgba(190, 150, 0, .28));
    transition: background .18s ease;
}

.hex-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 0 17%;
    color: var(--ink); font-weight: 600; line-height: 1.24;
}
.hex-text span {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}

.hex:hover .hex-bg { background: var(--honey-soft); }
.hex:focus-visible { outline: none; }
.hex:focus-visible .hex-bg { filter: drop-shadow(0 0 0 3px rgba(230,180,0,.9)); }
.hex.is-open .hex-bg { background: var(--honey-deep); }
.hex.is-hidden { display: none; }

/* ---------- Açılan cevap (tıklanan satırın altında, tam genişlik) ---------- */
.answer {
    position: absolute;            /* JS satır-altına konumlar */
    top: 0; left: 0;
    background: var(--honey-50);
    border: 1.5px solid var(--honey);
    border-radius: var(--radius);
    padding: 26px 28px;
    box-shadow: 0 10px 26px -14px rgba(190, 150, 0, .5);
    animation: ans-in .26s ease;
    z-index: 5;
}
.answer[hidden] { display: none; }
@keyframes ans-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.answer-q {
    font-size: clamp(19px, 2.4vw, 25px); font-weight: 700;
    margin: 0 0 14px; padding-right: 96px; color: var(--ink);
}
.answer-body { font-size: 17px; color: var(--ink); }
.answer-close {
    position: absolute; top: 20px; right: 20px;
    font-family: var(--font-serif); font-size: 14px; font-weight: 600;
    color: var(--ink); background: var(--white);
    border: 1.5px solid var(--honey); border-radius: 999px;
    padding: 6px 14px; cursor: pointer; transition: background .15s;
}
.answer-close:hover { background: var(--honey-soft); }

.enc-noresult, .enc-empty {
    text-align: center; color: var(--ink-soft); font-size: 18px; padding: 40px 0;
}

/* SEO içeriği: görsel olarak gizli ama DOM'da taranabilir */
.seo-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SORU SOR — modal
   ========================================================================== */
.ask-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 16, 4, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
    animation: ask-fade .2s ease;
}
.ask-overlay[hidden] { display: none; }
@keyframes ask-fade { from { opacity: 0; } to { opacity: 1; } }

.ask-modal {
    position: relative;
    width: 100%; max-width: 560px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
    padding: 30px 32px 32px;
    animation: ask-pop .22s ease;
}
@keyframes ask-pop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ask-x {
    position: absolute; top: 14px; right: 16px;
    width: 36px; height: 36px; border: 0; background: transparent;
    font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer;
    border-radius: 8px;
}
.ask-x:hover { background: #F3EEDD; }

.ask-title {
    text-align: center; font-size: 24px; font-weight: 700;
    margin: 0 0 22px; color: var(--ink);
}

#askForm label {
    display: block; font-weight: 700; font-size: 15px;
    margin: 0 0 7px; color: var(--ink);
}
#askForm input[type=text], #askForm textarea {
    width: 100%; font-family: var(--font-serif); font-size: 16px; color: var(--ink);
    border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
    margin-bottom: 18px; outline: none; background: var(--white);
    transition: border-color .15s, box-shadow .15s;
}
#askForm input:focus, #askForm textarea:focus {
    border-color: var(--honey); box-shadow: 0 0 0 3.5px rgba(249,195,0,.18);
}
#askForm textarea { resize: vertical; }

/* honeypot gizle */
.ask-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.ask-submit {
    width: 100%; font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    color: #fff; background: #1b1b1b; border: 0; border-radius: 10px;
    padding: 14px; cursor: pointer; transition: background .15s;
}
.ask-submit:hover { background: #000; }
.ask-submit:disabled { opacity: .6; cursor: default; }

.ask-msg { border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: 15px; }
.ask-msg[hidden] { display: none; }
.ask-msg.ok  { background: #E9F6EA; color: #1E5E22; border: 1px solid #BFE3C2; }
.ask-msg.err { background: #FDECEA; color: #922; border: 1px solid #F5C6C0; }

@media (max-width: 760px) {
    .ask-overlay { padding: 16px; align-items: flex-start; }
    .ask-modal { padding: 26px 20px 24px; }
}

/* ---------- Mobil: aynı petek stili (kapat butonu çakışmaz) ---------- */
@media (max-width: 760px) {
    .enc { padding: 18px 14px 36px; }
    /* Toolbar: arama tam satır; altında TR/EN + Sor yan yana */
    .enc-search { flex-basis: 100%; min-width: 0; }
    .enc-actions { width: 100%; }
    .enc-ask-btn { flex: 1; padding: 12px 20px; }
    .enc-lang { flex: 0 0 auto; }
    .answer { padding: 20px 18px 22px; }
    .answer-q { padding-right: 0; font-size: 19px; }
    .answer-close { position: static; display: inline-block; margin-top: 16px; }
}