/* Fizik Bilimi — belge bileşenleri.
   Kitin ortak kabuğu (base.css, pdf.css, interaction.css) yerinde kalır; burada
   yalnız kartın kendi içerik bileşenleri tanımlanır. Ortak sınıf denetimine
   uymak için her kural #main (ve modal için #modal-body) altında kapsanır;
   düğme, gezinme ve odak sistemleri yeniden tasarlanmaz.
   Sahne girişine animasyon eklenmez; hareket duyarlılığı ayrıca gereksizdir. */

#main{padding-bottom:26px}

#main .source-subtitle{font-size:19px;font-weight:700;margin:26px 0 10px;color:inherit;line-height:1.35}
#main .source-subtitle:first-of-type{margin-top:14px}
#main .activity-title{font-size:17px;margin:30px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
#main .activity-title:first-of-type{border-top:0;padding-top:0}
#main .activity-name{font-size:19px;font-weight:700;margin:0 0 8px}

#main .purpose{margin:10px 0 14px;font-size:16px}
#main .purpose strong{color:#8f2a12}
#main .instruction{margin:12px 0 10px;font-size:16px}
#main .instruction b{font-weight:700}
#main .prompt{margin:10px 0;font-weight:700}
#main .source-note{font-size:15px;color:#6a5a4e;margin:18px 0 0;font-style:italic}

/* ---------- Açık uçlu yanıt bloğu ---------- */
#main .answer-block{margin:14px 0 20px}
#main .answer-block .q-label{display:block;font-weight:600;margin-bottom:6px;font-size:16px}
#main .q-control{width:100%}
#main .ans-area{display:block;width:100%;min-height:96px;resize:vertical;padding:10px 12px;
  border:1.5px solid #d2603a;border-radius:5px;background:#fff;line-height:1.5}
#main .ans-area:disabled{background:#f6f2ee;border-color:#cbbfb6;color:#4a423c}
#main .ans-line{width:100%;padding:8px 10px;border:1.5px solid #d2603a;border-radius:5px;background:#fff}
#main .ans-line:disabled{background:#f6f2ee;border-color:#cbbfb6;color:#4a423c}
#main .ans-line.inline-line{width:auto;min-width:130px;display:inline-block;padding:4px 8px}
#main .answer-block.compact{margin:8px 0 12px}

/* ---------- Amaç/yönerge kutusu ---------- */
#main .stage-note{border-left:4px solid var(--orange);background:#fbeee4;padding:2px 14px;margin:12px 0 18px}

/* ---------- Görsel ızgaraları ---------- */
#main .pic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px;margin:14px 0 6px}
#main .pic-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
#main .pic-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
#main .pic-card{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
#main .pic-card img{width:100%;max-width:100%;height:104px;object-fit:cover;display:block;border-radius:2px}
#main .pic-card figcaption{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.3;min-width:0}
#main .pic-card .pic-name{min-height:2.6em}
#main .pic-field{display:flex;align-items:center;gap:6px;min-width:0}
#main .pic-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--peach);
  color:#7a2a12;font-size:12px;font-weight:700;display:grid;place-items:center}
#main .pic-field .ans-line{padding:4px 7px;font-size:14px;min-width:0}

/* Etiketli görsel + metin sütunu */
#main .media-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start;margin:14px 0 6px}
#main .media-side{display:flex;flex-direction:column;gap:6px;min-width:0}
#main .item-label{font-weight:700;font-size:16px}
#main .media-row figure{margin:0}
#main .media-row img{width:100%;height:auto;display:block;border-radius:2px}
#main .media-row .graph-figure img{border:0;object-fit:contain}
#main .media-panel{border:1.5px solid #cdbfb4;border-radius:4px;padding:12px 14px;background:#fff;min-height:120px}
#main .media-panel .discipline-line{margin:10px 0 0;font-weight:600}
#main .media-label{font-weight:700;margin:0 0 4px}

/* ---------- Tablolar ---------- */
#main .table-scroll{overflow-x:auto;margin:12px 0 18px;-webkit-overflow-scrolling:touch}
#main .src-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
#main .src-table th,#main .src-table td{border:1px solid #cfc3b9;padding:8px 10px;text-align:left;vertical-align:top}
#main .src-table thead th{background:var(--peach);color:#7a2a12;font-weight:700;font-size:14px;line-height:1.25}
#main .src-table tbody tr:nth-child(even) td{background:#faf6f2}
#main .src-table td .ans-line,#main .src-table td select{width:100%;padding:5px 7px;border-width:1px;font-size:14px}

/* İşaretleme satırı */
#main .tick-row{display:flex;align-items:center;gap:8px;min-height:36px}
#main .tick-row input[type="checkbox"]{width:18px;height:18px;accent-color:#b44a24;flex:0 0 auto}
#main .tick-row label{cursor:pointer}

/* ---------- Geri Bildirim ---------- */
#main .feedback{margin:16px 0 22px;padding:14px 16px;background:#fbf0e6;border-left:4px solid var(--orange);border-radius:0 4px 4px 0}
#main .feedback[hidden]{display:none}
#main .feedback>strong{display:block;margin-bottom:8px;color:#8f2a12;font-size:16px}
#main .feedback p{margin:6px 0}
#main .feedback ul,#main .feedback ol{margin:6px 0;padding-left:22px}
#main .feedback li{margin:4px 0}
#main .fb-inline{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;gap:6px 18px}
#main .fb-blocks{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
#main .fb-blocks>div{min-width:0}
#main .fb-blocks h4{margin:0 0 6px;font-size:15px}
#main .activity-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
#main .check-btn{padding:.5rem 1rem;font-size:15px}

/* ---------- Çizim alanı ---------- */
#main .draw-wrap{margin:4px 0 0}
#main .draw-canvas{display:block;width:100%;height:auto;border:1.5px solid #d2603a;border-radius:5px;
  background:#fff;touch-action:none;cursor:crosshair}
#main .draw-canvas:disabled{cursor:not-allowed;background:#f6f2ee;border-color:#cbbfb6}
#main .draw-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 0}
#main .draw-toolbar button{padding:.35rem .8rem;font-size:14px}
#main .draw-hint{font-size:13px;color:#6a5a4e;margin:4px 0 0}

/* ---------- Başlangıç ---------- */
#main .start-action{margin:26px 0 8px}
#main .start-button{display:inline-flex;align-items:center;gap:8px;font-size:17px;padding:.7rem 1.4rem}
#main .topic-list{margin:12px 0 0;padding-left:24px}
#main .topic-list li{margin:8px 0}

/* ---------- Kitap rulosu ---------- */
#main .scroll-box{background:var(--peach);border:1px solid #d8b49c;border-radius:8px;
  padding:20px 22px;margin:16px 0 18px;font-style:italic;line-height:1.6}
#main .scroll-box p{margin:0}
#main .scroll-box .scroll-caption{font-style:normal;font-weight:700;text-align:center;font-size:17px;margin:0 0 10px}

/* ---------- Öğrendiklerim ---------- */
#main .lead-paragraphs p{margin:0 0 14px}
#main .lead-paragraphs .quote-line{margin:14px 0;padding-left:16px;border-left:3px solid var(--peach);font-style:italic}
#main .lead-list{margin:10px 0 14px;padding-left:24px}
#main .lead-list li{margin:7px 0}
#main .example-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;margin:14px 0}
#main .example-row img{width:100%;height:auto;display:block;border-radius:2px}
#main .example-row .example-text{border:1.5px solid #cdbfb4;border-radius:4px;padding:12px 14px;background:#fff;min-height:70px;display:flex;align-items:center}
#main .results-table{max-width:420px}

/* ---------- Yansıtıcı Yazı ---------- */
#main .reflective-wrap{background:#fdeee5;padding:18px 20px;border-radius:6px;margin:14px 0}
#main .reflective-list{padding-left:22px}
#main .reflective-list li{margin:18px 0}
#main .reflective-list .ans-area{background:#fff;margin-top:8px}

/* ---------- Etkinlik 1 adımları ---------- */
#main .discipline-box{border:1.5px solid #d2603a;border-radius:5px;padding:12px 14px;margin:8px 0 18px}
#main .disc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}
#main .other-row{margin-top:8px;flex-wrap:wrap}
#main .other-row .ans-line{flex:1 1 160px;min-width:0}

/* ---------- Etkinlik 2 şifre şeridi ---------- */
#main .shift-strip{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;justify-content:center}
#main .shift-slot{width:34px;height:34px;border-radius:50%;background:var(--peach);border:1px solid #e0b9a5;
  display:grid;place-items:center;font-size:13px;color:#8a4a30}

/* ---------- Değerlendirme ---------- */
#main .score-note{margin:2px 0 14px;font-size:15px}
#main .cell-check{width:18px;height:18px;accent-color:#b44a24;display:block;margin:0 auto}
#main .letter-col{width:90px}
#main .casus-block{margin:14px 0 18px;padding-left:14px;border-left:3px solid var(--peach)}
#main .casus-q{margin:0 0 6px;font-style:italic}
#main .casus-q+.answer-block{margin-top:6px}
#main .sentence-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 6px}
#main .sentence-line .inline-line{flex:0 1 260px}
#main .sentence-line .inline-line.grow{flex:1 1 260px}

/* ---------- Öğrendiklerim modalı ---------- */
#modal-body .topic-detail h3{margin:0 0 10px;font-size:19px}
#modal-body .topic-detail h4{margin:18px 0 8px;font-size:16px}
#modal-body .topic-detail .quote-line{margin:14px 0;padding-left:16px;border-left:3px solid var(--peach);font-style:italic}
#modal-body .topic-detail p{margin:0 0 14px}
#modal-body .example-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;margin:14px 0}
#modal-body .example-row img{width:100%;max-width:150px;height:auto;display:block;border-radius:2px}
#modal-body .example-row .example-text{border:1.5px solid #cdbfb4;border-radius:4px;padding:12px 14px;background:#fff;min-height:70px;display:flex;align-items:center}
#modal-body .example-row .example-text p{margin:0}
@media(max-width:560px){
  #modal-body .example-row{grid-template-columns:1fr}
  #modal-body .example-row img{max-width:180px}
}

/* ---------- Mobil ---------- */
@media(max-width:850px){
  #main .pic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .media-row{grid-template-columns:1fr}
  #main .fb-blocks{grid-template-columns:1fr}
  #main .example-row{grid-template-columns:110px minmax(0,1fr)}
  #main .disc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  #main .pic-grid{gap:12px 10px}
  #main .pic-card img{height:84px}
  #main .src-table{font-size:14px}
  #main .scroll-box{padding:14px 15px}
  #main .reflective-wrap{padding:12px 13px}
  #main .example-row{grid-template-columns:1fr}
  #main .example-row img{max-width:180px}
  #main .disc-grid{grid-template-columns:1fr}
}