/* Agenda One bu belgeyle birlikte dağıtılmıyor; ortak pdf.css icindeki
   woff2 yollarina dusmemek icin ayni agirliklar yerel kaynakla bildirilir.
   Kullanicinin sisteminde Agenda One varsa o kullanilir, yoksa Segoe UI. */
@font-face{font-family:'Agenda One';src:local('Agenda One Light'),local('AgendaOne-Light'),local('Segoe UI Light'),local('Segoe UI');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Agenda One';src:local('Agenda One Regular'),local('AgendaOne-Regular'),local('Agenda One'),local('Segoe UI');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Agenda One';src:local('Agenda One Medium'),local('AgendaOne-Medium'),local('Segoe UI Semibold'),local('Segoe UI');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Agenda One';src:local('Agenda One SemiBold'),local('AgendaOne-SemiBold'),local('Segoe UI Semibold'),local('Segoe UI');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Agenda One';src:local('Agenda One Bold'),local('AgendaOne-Bold'),local('Segoe UI Bold'),local('Segoe UI');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Agenda One';src:local('Agenda One ExtraBold'),local('AgendaOne-ExtraBold'),local('Segoe UI Black'),local('Segoe UI');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Agenda One';src:local('Agenda One Black'),local('AgendaOne-Black'),local('Segoe UI Black'),local('Segoe UI');font-weight:900;font-style:normal;font-display:swap}

/* biyoloji9.1.4 belge stilleri.
   Kural: bütün seçiciler #main veya #modal-body kökü altında tanımlanır;
   ortak kabuk dosyalarındaki bileşenler yeniden tanımlanmaz. */

/* ---------- Ortak metin yerleşimi ---------- */
#main .scene-content{animation:content-in .28s var(--ease) both}
#main .purpose p{margin:0}
#main .instructions{color:#5a504a;margin-bottom:18px}
#main .reading p:last-child{margin-bottom:0}
#main .prompt-line{display:flex;gap:12px;align-items:flex-start;margin:20px 0 16px}
#main .prompt-line .question-icon{flex:0 0 auto}
#main .prompt-line span{flex:1}
#main .fb-note{color:#6b5a4e;font-size:15px}
#main .answer-list{margin:10px 0 0;padding-left:24px}
#main .answer-list li{margin-bottom:8px;line-height:1.5}
#main .answer-list li:last-child{margin-bottom:0}
#main .answer-list.blanks li.blank-desc{list-style:none;margin-left:-24px;color:#4d4239}
#main .sub-question-list{margin:0 0 18px;padding-left:22px}
#main .sub-question-list li{margin-bottom:8px;line-height:1.5}
#main .sub-question-list li:last-child{margin-bottom:0}

/* ---------- Başlangıç ---------- */
/* Düğmenin kendi geometrisi ortak kitden gelir; yalnız yerleşimi ayarlanır. */
#main .start-action{margin-top:30px}

/* ---------- Hazırlanıyorum: foto şeridi + doğru/yanlış ---------- */
#main .photo-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
#main .photo-strip figure{margin:0}
#main .photo-strip img{display:block;width:100%;height:auto;aspect-ratio:491/285;object-fit:cover;border-radius:6px;border:1px solid #e0d3c6}
#main .photo-strip figcaption{text-align:center;font-size:13.5px;color:#5a504a;margin-top:5px}
#main .dy-instruction{font-weight:600;margin:0 0 12px}
#main .table-scroll{overflow-x:auto;margin-bottom:8px}
#main .dy-table th:first-child{width:auto}
#main .dy-table th:nth-child(2),#main .dy-table th:nth-child(3){width:112px;text-align:center}
#main .tf-num{width:34px;text-align:center;font-weight:700;color:#8a6d5c}
#main .tf-statement{line-height:1.5}
#main .tf-option-cell{width:120px;text-align:center}
#main .tf-options{justify-content:center}
#main .tf-options span{white-space:nowrap}
#main .dy-feedback{margin:0;background:#fff}
#main .dy-feedback p{margin:0 0 8px}
#main .dy-feedback p:last-child{margin-bottom:0}
#main .dy-choice{color:#6d5547;font-size:15px}
#main .dy-actions{display:flex;justify-content:flex-end;margin:6px 0 4px}
#main .dy-actions button{min-width:150px}
#main .intro-note{font-size:15px;color:#6b5a4e}

/* ---------- Açık uçlu sorular ---------- */
#main .open-question:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
#main .open-question .question span{flex:1}
#main .open-question textarea{margin-bottom:12px}
#main .open-question textarea:disabled{background-color:#f4f0ea;color:#4a423c;cursor:not-allowed}
#main .example-toggle{display:inline-flex;align-items:center;gap:7px;min-height:44px;border:1px solid #c1a897;background:#fff;color:var(--rust);font-size:14px;font-weight:500;padding:9px 15px}
#main .example-toggle:hover{background:var(--peach)}
#main .open-question .feedback{margin-top:14px}
#main .open-question .feedback p:first-child{margin-top:0}

/* ---------- İlişkilendiriyorum: görsel soruları ---------- */
#main .image-question{display:flex;gap:16px;align-items:stretch;border:1px solid #f2b39a;background:#fdeee5;border-radius:8px;padding:14px;margin-bottom:18px}
#main .iq-figure{margin:0;flex:0 1 46%;min-width:0}
#main .iq-figure img{display:block;width:100%;height:auto;border-radius:5px}
#main .iq-answer{flex:1;display:flex;gap:8px;align-items:flex-start;min-width:0}
#main .iq-num{font-weight:700;color:#8a4a2c;padding-top:10px}
#main .iq-answer textarea{flex:1;min-width:0}

/* ---------- Uygulayarak Öğreniyorum: adımlar ---------- */
#main .step-block{background:var(--cream);border:1px solid #e0d3c6;border-left:5px solid var(--orange);border-radius:5px;padding:16px 18px;margin-bottom:18px}
#main .step-line{margin:0 0 10px;line-height:1.55}
#main .step-lead{font-weight:600;margin:0 0 8px}
#main .step-list{margin:0 0 20px;padding-left:24px}
#main .step-list li{margin-bottom:10px;line-height:1.55}
#main .step-list li:last-child{margin-bottom:0}
#main .goto-hint{margin:0;font-size:15px;color:#5a504a}
#main .goto-hint button{margin-left:6px;font-size:14px;padding:8px 14px}

/* ---------- Öz değerlendirme ---------- */
#main .form-title{font-size:21px;margin:6px 0 20px;padding-bottom:9px;border-bottom:2px solid var(--orange);letter-spacing:.01em}
#main .scale-title{font-size:16px;line-height:1.4;color:#4d4239;background:var(--cream);border-left:4px solid var(--orange);padding:11px 14px;margin:22px 0 12px}
#main .scale-list{margin:0 0 8px;padding-left:24px}
#main .scale-list li{margin-bottom:6px}
#main .assessment-list{margin-bottom:8px}
#main .assessment-row{padding:16px 0}
#main .segmented-scale{grid-template-columns:repeat(3,minmax(0,1fr));max-width:340px}
#main .segmented-scale.stacked{grid-template-columns:1fr;max-width:460px;gap:8px}
#main .tekrar-label{margin:18px 0 6px;font-weight:600}

/* ---------- Gözlem ve tahmin tabloları ---------- */
#main .gozlem-table{width:100%;min-width:880px;border-collapse:collapse;font-size:14.5px}
#main .gozlem-table th,#main .gozlem-table td{border:1px solid #c5bdb7;padding:8px 8px;vertical-align:top;text-align:center}
#main .gozlem-table thead th{background:var(--peach);color:#5c3a2a;font-weight:700;line-height:1.3}
#main .gozlem-table tbody th{background:#faf5ee;text-align:left;font-weight:600;line-height:1.35;min-width:110px}
#main .goz-cell{width:56px;min-height:38px;text-align:center;font:inherit;padding:6px 4px}
#main .fark-cell{display:flex;flex-direction:column;gap:8px;text-align:left}
#main .fark-group{display:grid;grid-template-columns:minmax(76px,auto) auto auto;gap:10px;align-items:center}
#main .fark-label{font-weight:600;color:#5c3a2a}
#main .cb{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px}
#main .gozlem-table.fb td.fb-mark{font-weight:700;font-size:16px}
#main .gozlem-table.fb .fark-group{grid-template-columns:minmax(76px,auto) auto auto}
#main .fb-check{white-space:nowrap;color:#4d4239}
#main .fb-check strong{color:#2f6d3a;margin-left:2px}
#main .form-legend{margin:8px 0 4px;font-size:14px;color:#6b5a4e;font-style:italic}
#main .tahmin-table{width:100%;border-collapse:collapse;font-size:15px}
#main .tahmin-table th,#main .tahmin-table td{border:1px solid #c5bdb7;padding:9px 12px;vertical-align:top;text-align:left}
#main .tahmin-table thead th{background:var(--peach);color:#5c3a2a;font-weight:700}
#main .tahmin-table tbody th{background:#faf5ee;font-weight:600;width:200px;line-height:1.4}
#main .tahmin-table textarea{width:100%;min-height:64px}
#main .tahmin-table.fb td.fb-text{line-height:1.55}

/* ---------- Değerlendiriyorum Soru 1: kavram haritası ---------- */
#main .harita-scene .map-board{margin:6px 0 20px}
#main .map-root{width:min(430px,100%);margin:0 auto 18px;background:var(--rust);color:#fff;text-align:center;font-weight:600;font-size:16.5px;padding:13px 16px;border-radius:8px;box-shadow:0 3px 0 #70241725}
#main .map-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#main .map-col{background:#fbf6f0;border:1px solid #e0d3c6;border-radius:8px;padding:14px}
#main .map-col-title{text-align:center;font-size:15.5px;color:#5c3a2a;background:var(--peach);border-radius:5px;padding:9px 8px;margin:0 0 14px}
#main .map-slot{background:#fff;border:1px solid #d9cdc2;border-radius:6px;padding:12px;margin-bottom:14px}
#main .map-slot:last-child{margin-bottom:0}
#main .slot-label{display:block;text-align:center;color:#7c3a22;font-size:15.5px;margin-bottom:8px}
#main .slot-label-input{width:100%;text-align:center;font-weight:600;margin-bottom:8px}
#main .slot-desc{margin:0;font-size:14px;line-height:1.5;color:#4d4239;text-align:center}
#main .slot-desc-input{width:100%;font-size:14px;line-height:1.45;margin-bottom:2px}
#main .slot-label-input:disabled,#main .slot-desc-input:disabled{background-color:#f4f0ea;color:#4a423c;cursor:not-allowed}
#main .map-check{display:inline-flex;align-items:center;gap:8px;margin-top:10px;width:100%;justify-content:center;background:#fff;border:1px dashed #b9a695;color:#6b5a4e;font-size:13px;font-weight:500;min-height:40px;padding:7px 10px}
#main .map-check:hover:not(:disabled){background:#faf3ec}
#main .map-check .map-check-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;border:1px solid #cbb9a9;color:transparent;font-size:14px;line-height:1}
#main .map-check.is-on{border-style:solid;border-color:#5f8f4e;background:#eef5e9;color:#3c5c31}
#main .map-check.is-on .map-check-mark{background:#5f8f4e;border-color:#5f8f4e;color:#fff}
#main .map-fb-figure{margin:14px 0}
#main .map-fb-figure img{display:block;width:100%;height:auto;border:1px solid #e0d3c6;border-radius:6px}
#main .map-fb-check{margin:12px 0 0;font-size:15px}

/* ---------- Değerlendiriyorum Soru 2: dallanmış ağaç ---------- */
#main .tree-scene .instructions{margin-bottom:14px}
/* Bağlantı çizimleri 760x620 koordinat sisteminde üretilir; tahta tam bu
   genişlikte kalır, dar ekranda yalnız .tree-scroll yatay kaydırılır. */
#main .tree-board{width:760px;min-width:760px;height:620px;margin:0 auto}
/* Kök önerme uzundur: PDF'teki gibi geniş ve iki-üç satırlık kutu. */
#main .tree-board .node-0{left:18%;width:64%;top:0;height:104px}
#main .tree-board .node-1,#main .tree-board .node-2{top:148px;height:132px}
#main .tree-board .node-3,#main .tree-board .node-4,
#main .tree-board .node-5,#main .tree-board .node-6{top:308px;height:168px}
#main .tree-board .tree-node{font-size:13.5px;line-height:1.38;padding:11px 12px}
#main .tree-board .tree-node.ok{border-color:#5f8f4e;background:#eef5e9}
#main .tree-board .tree-node.hata{border-color:#c2684f;background:#fbeae4}
#main .tree-connections path{stroke-width:1.2}
#main .tree-connections .traced{stroke:var(--rust);stroke-width:2.6}
#main .tree-exits{gap:6px}
#main .tree-exits .exit{font-size:12.5px;padding:9px 1px}
#main .tree-exits{top:576px}
#main .tree-connections{height:620px}
#main .tree-exits .exit.exit-ok[aria-pressed="true"]{background:#5f8f4e;border-color:#5f8f4e;outline-color:#5f8f4e}
#main .tree-exits .exit.exit-hata[aria-pressed="true"]{background:#b3402b;border-color:#b3402b;outline-color:#b3402b}
#main .tree-legend{font-size:14px;color:#6b5a4e;margin:14px 0 0;line-height:1.5}
#main .tree-action{margin-top:18px}
#main .tree-action-btns{display:flex;gap:10px;flex-wrap:wrap}
#main .tree-action-btns button{font-size:14px}
#main .exit-feedback{margin-top:18px}
#main .exit-feedback.ok{border-color:#5f8f4e;background:#f3f8ef}
#main .exit-feedback-heading{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#main .exit-verdict{font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px}
#main .exit-verdict.ok{background:#eef5e9;color:#3c5c31;border:1px solid #5f8f4e}
#main .exit-verdict.hata{background:#fbeae4;color:#8c2f1c;border:1px solid #c2684f}
#main .path-text{line-height:1.5}
#main .pdf-tree-quote{position:relative;margin:20px 22px}
#main .pdf-tree-quote p{margin:0 0 10px}
#main .pdf-tree-quote p:last-child{margin-bottom:0}
#main .tree-fb-figure{margin:18px 22px 4px}
#main .tree-fb-figure img{display:block;width:100%;height:auto;border:1px solid #e0d3c6;border-radius:6px}
#main .tree-scene .tree-board .branch-label text{font-size:12.5px}

/* ---------- Öğrendiklerim ---------- */
#main .ogrendiklerim-intro{font-weight:700;font-size:18px;color:#3f3630;margin:4px 0 16px}
#main .library-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#main .library-cards .card{position:relative;min-height:120px;padding:0;border:2px dashed #b7a99c}
#main .library-cards .card .card-text{height:100%;justify-content:center;gap:6px;padding:22px 20px}
#main .library-cards .card strong{font-size:17px;line-height:1.4;letter-spacing:.01em}
#main .library-cards .open-label{margin-top:0;font-size:14px;display:inline-flex;align-items:center;gap:7px}
#main .library-cards .card.is-reviewed .open-label{color:#4d7440}
#main .reviewed-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#5f8f4e;color:#fff;font-size:12px;line-height:1}
/* Kart renkleri kaynak sayfa paletinden (zemin + kesikli çerçeve). */
#main .library-cards .card[data-tone="hucresel"]{background:#ffffff;border-color:#f4784e}
#main .library-cards .card[data-tone="homeostazi"]{background:#fef7f9;border-color:#e3abce}
#main .library-cards .card[data-tone="organizasyon"]{background:#fef4f5;border-color:#f58b8c}
#main .library-cards .card[data-tone="buyume"]{background:#fffbf0;border-color:#fde15e}
#main .library-cards .card[data-tone="beslenme"]{background:#f4f6ef;border-color:#79b760}
#main .library-cards .card[data-tone="enerji"]{background:#eff8f8;border-color:#7bc1c2}
#main .library-cards .card[data-tone="metabolizma"]{background:#ffffff;border-color:#03558b}
#main .library-cards .card[data-tone="bosaltim"]{background:#f7eef3;border-color:#9753a1}
#main .library-cards .card[data-tone="ureme"]{background:#fff5f5;border-color:#f58b8c}
#main .library-cards .card[data-tone="uyarilar"]{background:#ffefe5;border-color:#f4784e}
#main .library-cards .card[data-tone="varyasyon"]{background:#f4f6ef;border-color:#79b760}
#main .library-cards .card[data-tone="virusler"]{background:#ebecec;border-color:#f38355}
#main .library-cards .card.is-reviewed{border-style:solid;border-top-width:6px;border-top-color:#5f8f4e}
#main .completion-panel{margin-top:26px;background:var(--cream);border:1px solid #e0d3c6;border-left:5px solid var(--orange);border-radius:5px;padding:20px 22px}
#main .completion-panel p{margin:0 0 14px}
#main .completion-panel p:last-child{margin-bottom:0}
#main .completion-panel button{min-width:200px}

/* ---------- Modal içerikleri ---------- */
#modal-body .pdf-library-page h3{color:#3f3630}
#modal-body .pdf-library-page .card-list{margin:0 0 16px;padding-left:24px}
#modal-body .pdf-library-page .card-list li{margin-bottom:12px;line-height:1.55}
#modal-body .pdf-library-page .card-list li:last-child{margin-bottom:0}
#modal-body .pdf-library-page .card-figure{margin:18px 0;text-align:center}
#modal-body .pdf-library-page .card-figure img{max-width:100%;height:auto;max-height:340px;border-radius:5px}
#modal-body .pdf-library-page .card-figure figcaption{font-size:14px;color:#5a504a;margin-top:8px;line-height:1.45}
#modal-body .pdf-library-page .card-figure-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0;align-items:start}
#modal-body .pdf-library-page .card-figure-row .card-figure{margin:0}
#modal-body .pdf-library-page .fig-text{font-size:14px;line-height:1.5;color:#4d4239;margin-top:6px;text-align:left}
/* Kart tonu modale ince bir üst şerit olarak yansır. */
#modal-body[data-tone="hucresel"] .pdf-library-page,
#modal-body[data-tone="uyarilar"] .pdf-library-page{border-top:4px solid #f4784e;padding-top:14px}
#modal-body[data-tone="homeostazi"] .pdf-library-page{border-top:4px solid #e3abce;padding-top:14px}
#modal-body[data-tone="organizasyon"] .pdf-library-page,
#modal-body[data-tone="ureme"] .pdf-library-page{border-top:4px solid #f58b8c;padding-top:14px}
#modal-body[data-tone="buyume"] .pdf-library-page{border-top:4px solid #fde15e;padding-top:14px}
#modal-body[data-tone="beslenme"] .pdf-library-page,
#modal-body[data-tone="varyasyon"] .pdf-library-page{border-top:4px solid #79b760;padding-top:14px}
#modal-body[data-tone="enerji"] .pdf-library-page{border-top:4px solid #7bc1c2;padding-top:14px}
#modal-body[data-tone="metabolizma"] .pdf-library-page{border-top:4px solid #03558b;padding-top:14px}
#modal-body[data-tone="bosaltim"] .pdf-library-page{border-top:4px solid #9753a1;padding-top:14px}
#modal-body[data-tone="virusler"] .pdf-library-page{border-top:4px solid #f38355;padding-top:14px}

@media(max-width:1000px){
  #main .library-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
  #main .tf-table{font-size:15px}
  #main .tree-board .tree-node{font-size:12.5px;padding:9px 9px}
  #main .map-cols{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* Yalnız sütun genişlikleri daraltılır; radio/label geometrisi ortak kitden gelir. */
  #main .dy-table th:nth-child(2),#main .dy-table th:nth-child(3){width:66px;padding:8px 3px;line-height:1.2}
  #main .tf-option-cell{width:66px}
  #main .tf-options{padding:6px 2px}
  #main .tf-num{width:22px;padding:8px 4px}
  #main .tf-statement{padding:8px 7px}
  #main .photo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .image-question{flex-direction:column}
  #main .iq-figure{flex:0 1 auto}
  #main .library-cards{grid-template-columns:1fr}
  #main .library-cards .card{min-height:96px}
  #main .library-cards .card .card-text{padding:18px 16px}
  #main .form-title{font-size:18px}
  #main .completion-panel{padding:17px 16px}
  #main .completion-panel button{width:100%;min-width:0}
  #main .tree-action-btns{flex-direction:column;width:100%}
  #main .tree-action-btns button{width:100%}
  #main .pdf-tree-quote{margin:18px 14px}
  #main .tree-fb-figure{margin:16px 14px 4px}
}