/* Belgeye özgü yerleşim. Bütün seçimler #main / #modal-body altında kapsamlıdır.
   Ortak header, footer, düğme, kart, dialog, gezinme ve form temeli yeniden tanımlanmaz. */

#main h2{font-size:17px;letter-spacing:.04em;margin:26px 0 10px;color:#282726}
#main h2:first-of-type{margin-top:2px}
#main h3{font-size:16px;margin:20px 0 10px;color:#282726}
#main .purpose{margin:0 0 12px;line-height:1.6}
#main .instructions{margin:0 0 16px;line-height:1.6;color:#4d4744}
#main .concept-title{margin:22px 0 10px;font-weight:800}
#main .context-text{margin:0 0 18px;line-height:1.7}

/* ---- BAŞLARKEN ---- */
#main .intro-content.lead p{margin:0 0 18px}

/* ---- Harf / D-Y listesi ---- */
#main .letter-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
#main .letter-item{display:grid;grid-template-columns:auto 62px minmax(0,1fr);gap:10px;align-items:center}
#main .letter-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fce0d3;color:#8a3a20;font-weight:700;font-size:14px}
#main .letter-item input{width:100%;min-height:48px;border:1px solid #c9b3a4;border-radius:6px;background:#fffefa;color:var(--ink);text-align:center;font-size:18px;font-weight:700;text-transform:uppercase}
#main .letter-item input:focus-visible{outline:3px solid #006e91;outline-offset:2px}
#main .letter-item input[readonly]{background:#f6f1ec}
#main .letter-text{display:block;background:#ecebed;border:1px solid #cfc7c1;border-radius:6px;padding:10px 14px;line-height:1.5;color:#33302e;cursor:text}
#main .fb-mark{display:inline-block;min-width:28px;text-align:center;font-weight:800;color:#8a1f0f}

/* ---- Sözlük ---- */
#main .glossary{margin:0;display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:0}
#main .glossary-row{display:contents}
#main .glossary dt{font-weight:700;padding:9px 12px 9px 0;border-bottom:1px solid #eae2dc}
#main .glossary dd{margin:0;padding:9px 0;border-bottom:1px solid #eae2dc;line-height:1.55}

/* ---- Gemiler ---- */
#main .ship-row{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#main .ship{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
#main .ship img{display:block;width:100%;height:auto}
#main .ship-label{display:flex;align-items:center;gap:6px;background:#ecebed;border-radius:4px;padding:7px 14px;font-weight:600;text-align:center;line-height:1.3}
#main .ship-quote{color:#f47f50;font-size:24px;line-height:1;font-weight:800}

/* ---- Açık uçlu yanıt ---- */
#main .answer-block{margin:0 0 8px}
#main .answer-label{margin:0 0 8px;font-weight:600;line-height:1.55}
#main .answer-block textarea{width:100%}

/* ---- Kavram bankası ---- */
#main .word-bank{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:12px;margin:0 0 18px;background:#faf7eb;border:1px solid #e6d6c8;border-radius:8px}
#main .word-bank li{border:1px solid #e0c9b6;background:#ecebed;border-radius:4px;padding:6px 14px;font-size:15px}
#main .puzzle-words li{text-transform:none}

/* ---- Kavram haritası ---- */
#main .map-figure{margin:0 0 14px}
#main .concept-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:
  "north north north"
  "nw hub e"
  "w hub se"
  "sw sw s"
  "c1 c1 c2";
  gap:16px 18px;background:#fbf8f2;border:1px solid #e6d6c8;border-radius:8px;padding:18px}
#main .map-hub{grid-area:hub;display:grid;place-items:center;background:#fff8e3;border:2px solid #a8391f;border-radius:16px;min-height:150px;margin:0;color:#a8391f;font-weight:800;font-size:24px;line-height:1.2;text-align:center}
#main .map-north{grid-area:north}
#main .map-nw{grid-area:nw}
#main .map-w{grid-area:w}
#main .map-e{grid-area:e}
#main .map-se{grid-area:se}
#main .map-sw{grid-area:sw}
#main .map-s{grid-area:s}
#main .map-cal{display:grid;gap:8px;align-content:start}
#main .map-cal.c1{grid-area:c1}
#main .map-cal.c2{grid-area:c2}
#main .map-hub+*{margin-top:0}
#main .map-caption{margin:0 0 6px;font-size:14px;line-height:1.4;color:#4a423d}
#main .map-list{margin:0;padding-left:18px;font-size:14px;line-height:1.5}
#main .map-list li{margin:0 0 3px}
#main .map-box{background:#e9e7e6;border:1px solid #8f8c8a;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45}
#main .map-box-sm{padding:8px 10px}
#main .map-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#main .map-two+.map-two{margin-top:8px}
#main .map-pill{margin:0;background:#fffdf1;border:1px dashed #b9ab8f;border-radius:999px;padding:6px 10px;text-align:center;font-size:14px}
#main .map-blank{display:inline-block;width:min(100%,190px);min-height:40px;border:1px solid #c9b3a4;border-radius:6px;background:#fffefa;color:var(--ink);padding:6px 8px;font-size:14px}
#main .inline-blank{width:min(100%,150px)}
#main .map-blank[readonly]{background:#f4efe9}
#main .fb-placements{margin:0;padding-left:20px;font-size:14px;line-height:1.6;columns:2}

/* ---- Harf bulmaca ---- */
#main .puzzle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#main .puzzle-figure img{display:block;max-width:560px;width:100%;height:auto;margin:0 auto}

/* ---- Tarih şeridi ---- */
#main .timeline-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;background:#fbf8f2;border:1px solid #e6d6c8;border-radius:8px}
#main .timeline{min-width:640px;padding:16px 18px;display:grid;gap:10px}
#main .tl-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;text-align:center}
#main .tl-blank-holder{display:grid;place-items:center}
#main .tl-blank-holder .map-blank{width:100%}
#main .tl-head .map-blank{text-align:center}
#main .tl-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}
#main .tl-card{background:#fff8e3;border:1px solid #e6cf8f;border-radius:6px;min-height:64px;display:grid;place-items:center;padding:8px;text-align:center;font-size:13px;line-height:1.35}
#main .tl-card .map-blank{width:100%;min-height:38px;font-size:13px}
#main .tl-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;background:#a8391f;border-radius:4px;color:#fff;font-weight:700;text-align:center}
#main .tl-bar li{padding:7px 4px;font-size:14px}
#main .tl-bar li .map-blank{width:100%;min-height:34px;padding:2px 4px;font-size:13px}
#main .tl-base{grid-template-columns:1fr 2fr;font-size:13px;color:#403a36}
#main .tl-era{display:grid;place-items:center;background:#f4eee2;border-radius:6px;padding:8px}
#main .tl-era-wide{background:#fdf3e4}

/* ---- Eşleştirme (Değerlendiriyorum 1) ---- */
#main .match-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
#main .match-table{width:100%;border-collapse:collapse;min-width:560px}
#main .match-table th{padding:8px 10px;color:#6b5a53;font-weight:700;background:#faf7eb}
#main .match-table td,#main .match-table th{border:1px solid #e2d6cc}
#main .match-table td{padding:8px 10px;vertical-align:middle}
#main .match-table .num-cell{width:56px;text-align:center}
#main .match-table .def-cell{background:#ecebed;line-height:1.5;font-size:15px}
#main .match-table .pick-cell{width:112px;text-align:center}
#main .match-table select{width:100%;min-height:44px;border:1px solid #c9b3a4;border-radius:6px;background:#fffefa;color:var(--ink);padding:6px}
#main .round-num,#main .round-letter{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f4a17f;color:#fff;font-weight:800}
#main .round-letter{background:#f4bf94}
#main .match-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;margin:0 0 16px;font-size:14px}
#main .match-legend>div{display:flex;gap:6px;align-items:baseline}
#main .match-legend dt{font-weight:800;color:#a8391f;margin:0}
#main .match-legend dd{margin:0}

/* ---- EVET/HAYIR tablosu ---- */
#main .mark-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 12px}
#main .mark-table{width:100%;border-collapse:collapse;min-width:560px}
#main .mark-table th{background:#5d5d5d;color:#fff;text-align:center;font-weight:700;padding:12px 10px}
#main .mark-table th:first-child{background:#5d5d5d}
#main .mark-table th.mark-cell:first-of-type{background:#7ab62b}
#main .mark-table thead th.mark-cell{background:#7ab62b}
#main .mark-table thead th.mark-cell:last-child{background:#e0201b}
#main .mark-table td{border:1px solid #d8cfc7;padding:10px 11px;vertical-align:middle;background:#fff}
#main .mark-table .num-cell{width:52px;text-align:center;font-weight:700}
#main .mark-table td.mark-cell{text-align:center;width:80px;padding:4px}
#main .mark-table tbody td.mark-cell:nth-last-child(2){background:#dbeec3}
#main .mark-table tbody td.mark-cell:last-child{background:#f8c9c7}
#main .mark-table .cell-label{display:grid;place-items:center;min-height:48px;min-width:48px;cursor:pointer;margin:0}
#main .mark-table .cell-label input{width:22px;height:22px;accent-color:#9f3424;margin:0}
#main .mark-table .stmt{display:block;line-height:1.5}
#main .stmt-num{font-weight:700;color:#4a423d;margin-right:6px}
#main .fb-row{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e2d6cc}
#main .fb-row:last-child{border-bottom:0}

/* ---- Geri bildirim ---- */
#main .answer-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
#main .locked-note{font-size:13px;color:#6d5a4e}
#main .feedback h4{margin:0 0 8px;color:#803c24;font-size:15px}
#main .feedback .fb-lede{margin:0 0 10px}
#main .feedback .fb-answer{font-weight:700;margin:0 0 10px;letter-spacing:.06em}
#main .feedback .fb-item{margin:0 0 10px;line-height:1.6}
#main .feedback .fb-item:last-child{margin-bottom:0}
#main .feedback img{display:block;width:100%;max-width:100%;height:auto}
#main .feedback .fb-note{margin:0;color:#5d5a57}
#main .link-button{display:inline;background:none;border:0;color:#803c24;text-decoration:underline;font-weight:600;padding:2px 4px;min-height:0}
#main .review-links{margin:0;padding-left:20px;line-height:1.9}

/* ---- Sıra Sizde ---- */
#main .sira-sizde{background:#fbf4e5;border:1px dashed #d9b98a;border-radius:8px;padding:16px 18px;margin:0 0 16px}
#main .sira-title{margin:0 0 8px;font-weight:800;letter-spacing:.05em}
#main .sira-lede{margin:0 0 14px;font-weight:600}
#main .sira-q{margin:0 0 12px}
#main .sira-question{margin:0 0 6px;font-weight:700;line-height:1.5}
#main .sira-q textarea{width:100%;min-height:74px}

/* ---- Öğrendiklerim ---- */
#main .concept-row{margin:0 0 12px}
#main .concept-label{display:block;font-weight:700;margin:0 0 5px}
#main .concept-area{width:100%;min-height:86px}
#main .self-check{border:1px solid #e2d6cc;border-radius:8px;padding:14px 16px;margin:18px 0 0;min-width:0}
#main .self-check legend{font-weight:800;padding:0 6px}
#main .self-items{display:grid;gap:8px}
#main .self-item{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer;line-height:1.45}
#main .self-item input{width:20px;height:20px;accent-color:#9f3424;margin-top:2px;flex-shrink:0}
#main .library-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#main .completion{margin:24px 0 0;padding:18px;background:#faf7eb;border:1px solid #e6d6c8}
#main .completion-status{margin:0 0 12px}
#main .done-banner{background:#eaf5ec;border-left:5px solid #3c7b45;padding:16px 18px;margin-top:14px}
#main .figure-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#main .figure-scroll img{display:block;width:100%;min-width:520px;max-width:760px;height:auto;margin:0 auto}
#main .infographic{background:#fff;border:0;padding:0}
#main .figure-block{margin:0 0 20px}

#main .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  #main .concept-map{grid-template-columns:1fr;grid-template-areas:"north" "nw" "w" "e" "se" "sw" "s" "hub" "c1" "c2"}
  #main .map-hub{min-height:110px;font-size:21px}
  #main .map-north,#main .map-nw,#main .map-w,#main .map-e,#main .map-se,#main .map-sw,#main .map-s,#main .map-cal{grid-area:auto}
  #main .map-north{order:-1}
}
@media(max-width:760px){
  #main .ship-row{grid-template-columns:1fr;gap:16px}
  #main .ship img{max-width:340px}
  #main .glossary{grid-template-columns:1fr}
  #main .glossary dt{padding-bottom:2px;border-bottom:0}
  #main .glossary dd{padding-top:0}
  #main .library-cards{grid-template-columns:1fr}
  #main .fb-placements{columns:1}
}
@media(max-width:430px){
  #main .letter-item{grid-template-columns:auto 52px minmax(0,1fr);gap:8px}
  #main .letter-text{padding:9px 10px;font-size:15px}
  #main .concept-map{padding:12px;gap:12px}
}

/* ---- Modal içeriği ---- */
#modal-body .topic-detail ul{padding-left:20px;margin:0 0 12px}
#modal-body .topic-detail li{margin:0 0 7px;line-height:1.55}
#modal-body .topic-detail p{margin:0 0 12px;line-height:1.65}
#modal-body .topic-detail .figure-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#modal-body .topic-detail img{display:block;width:100%;min-width:0;max-width:100%;height:auto}
#modal-body .topic-detail .topic-lead{font-weight:700;margin-top:16px}
#modal-body p:last-child{margin-bottom:0}