/* ORTAK STİL — tüm sayfalar bu dosyayı kullanır */
:root {
  --zemin: #fdfbf6;      /* defter kâğıdı */
  --yazi: #2b2b2b;
  --soluk: #8a8a8a;
  --cizgi: #e7e2d6;
  --kart: #ffffff;
}

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

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--zemin);
  color: var(--yazi);
  min-height: 100vh;
}

/* ---------- ANASAYFA ---------- */
.ust {
  text-align: center;
  padding: 48px 16px 24px;
}
.ust h1 { font-size: 2rem; }
.ust p  { color: var(--soluk); margin-top: 6px; }

.dersler {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.ders {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  background: var(--kart);
  border: 2px solid var(--cizgi);
  border-left: 10px solid var(--renk);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.ders:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.ders .simge { font-size: 2.4rem; }
.ders .ad    { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.sinif {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--renk);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}

.ders.pasif { opacity: .45; pointer-events: none; }
.ders.pasif .sinif::after { content: " · Yakında"; }

.alt {
  text-align: center;
  color: var(--soluk);
  font-size: .85rem;
  padding: 32px 16px;
}

.uyari { max-width: 520px; margin: 60px auto; padding: 24px; text-align: center;
  background: #fff; border: 2px dashed var(--cizgi); border-radius: 14px; line-height: 1.8; }
.geri { color: inherit; text-decoration: none; font-weight: 600; opacity: .7; }
.geri:hover { opacity: 1; }

/* ---------- DERS SAYFASI ---------- */
.ders-ust { text-align: center; padding: 20px 16px 28px; border-bottom: 6px solid var(--renk); background: #fff; }
.ders-ust .geri { display: block; text-align: left; max-width: 760px; margin: 0 auto 8px; }
.d-simge { font-size: 2.6rem; }
.ders-ust h1 { font-size: 1.6rem; margin: 4px 0 8px; }


.konular { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
.birim h2 { font-size: 1.15rem; margin: 28px 0 10px; padding-left: 4px; }
.konu { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 8px;
  background: #fff; border: 2px solid var(--cizgi); border-radius: 12px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s; }
.konu:hover { border-color: var(--renk); transform: translateX(4px); }
.konu .no { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--renk); color: #fff; font-weight: 700; }
.konu .k-ad { flex: 1; font-weight: 600; }
.konu .k-kitap { color: var(--soluk); font-size: .85rem; white-space: nowrap; }
.konu.pasif { opacity: .45; pointer-events: none; }
.konu.pasif .no { background: var(--soluk); }

/* ---------- KONU OYNATICI ---------- */
.oynatici { display: flex; flex-direction: column; }
.o-ust { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #fff; }
.o-baslik { flex: 1; text-align: center; font-weight: 700; }
.o-sayac { color: var(--soluk); font-weight: 600; min-width: 60px; text-align: right; }
.ilerleme { height: 6px; background: var(--cizgi); }
.ilerleme div { height: 100%; width: 0; background: var(--renk); transition: width .3s; }

.sayfa { flex: 1; padding: 24px 16px 110px; }
.slayt { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 16px;
  padding: 28px 32px 32px 56px; position: relative; min-height: 420px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  background-image: repeating-linear-gradient(#fff 0 31px, #eef3fb 31px 32px); }
.slayt::before { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 2px; background: #f4b6b6; }
.slayt h2 { font-size: 1.7rem; margin: 6px 0 14px; color: var(--renk); }
.metin { font-size: 1.15rem; line-height: 1.6; margin-bottom: 18px; }

.etiket { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: .85rem; font-weight: 700; background: #eef; }
.e-bilgi { background: #e3f0ff; color: #1c5fbf; }
.e-ornek { background: #fff3d6; color: #9a6400; }
.e-uygulama { background: #ffe1e1; color: #b02a2a; }
.e-odev { background: #efe3ff; color: #6b2fb3; }
.e-test { background: #dcf5e4; color: #1b7a3d; }
.e-merak { background: #e0f4f7; color: #16707f; }

.not { margin-top: 20px; padding: 12px 16px; background: #fff8d9; border-left: 5px solid #f2c94c; border-radius: 8px; font-size: 1.05rem; }
.kitap { margin-top: 18px; color: var(--soluk); font-weight: 600; }

.o-alt { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between;
  gap: 12px; padding: 14px 20px; background: rgba(253,251,246,.95); border-top: 1px solid var(--cizgi); }
.o-alt button { font: inherit; font-weight: 700; font-size: 1.05rem; padding: 12px 26px; border-radius: 12px;
  border: 2px solid var(--renk); background: #fff; color: var(--renk); cursor: pointer; }
.o-alt #sonraki { background: var(--renk); color: #fff; }
.o-alt button:disabled { opacity: .3; cursor: default; }

/* ---------- GÖRSELLER ---------- */
.gorsel { margin: 18px 0; }
.g-akis { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.a-grup { display: flex; align-items: center; gap: 6px; }
.adim { min-width: 100px; padding: 12px 10px; text-align: center; background: #fff;
  border: 3px solid var(--r); border-radius: 14px; }
.a-simge { font-size: 2rem; }
.a-yazi { font-weight: 700; margin-top: 4px; }
.a-alt { font-size: .85rem; color: var(--soluk); }
.ok { font-size: 1.4rem; color: var(--soluk); }

.g-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kart { padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--r) 12%, #fff); border-top: 6px solid var(--r); }
.k-ust { font-weight: 800; font-size: 1.25rem; }
.k-alt { margin-top: 4px; }

.g-parcala { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px; }
.parca { text-align: center; }
.p-yazi { font-family: Consolas, monospace; font-size: 2.2rem; font-weight: 700; color: var(--r);
  padding: 8px 14px; border-bottom: 4px solid var(--r); }
.p-etiket { margin-top: 8px; font-size: .9rem; font-weight: 600; }
.ayrac { font-size: 2.2rem; font-weight: 700; padding-top: 8px; }

.g-resim img { max-width: min(100%, 560px); border: 2px solid var(--cizgi); border-radius: 10px; display: block; margin: 0 auto; }

/* ---------- KOD / HEDEF ---------- */
.yanyana { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kod { background: #1f2430; color: #e6e6e6; padding: 16px; border-radius: 12px; overflow-x: auto;
  font-family: Consolas, "Courier New", monospace; font-size: 1rem; line-height: 1.5; }
.k-etiket { color: #6cb6ff; font-weight: normal; }
.k-ozellik { color: #f2c94c; font-weight: normal; }
.k-deger { color: #9be38f; font-weight: normal; }
.k-yorum { color: #8a93a6; }
.sonuc, .hedef { border: 2px dashed var(--cizgi); border-radius: 12px; padding: 12px; background: #fff; }
.s-baslik { font-weight: 700; color: var(--soluk); margin-bottom: 8px; }
.adimlar { margin: 16px 0 0 22px; font-size: 1.1rem; line-height: 1.9; }

/* ---------- TEST ---------- */
.soru { margin: 14px 0 20px; }
.s-metin { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.secenek { font: inherit; padding: 8px 16px; border-radius: 10px; border: 2px solid var(--cizgi); background: #fff; cursor: pointer; }
.secenek:hover { border-color: var(--renk); }
.secenek.dogru { background: #27ae60; border-color: #27ae60; color: #fff; }
.secenek.yanlis { background: #eb5757; border-color: #eb5757; color: #fff; }
.cevaplandi .secenek { cursor: default; }

@media (max-width: 600px) {
  .slayt { padding: 20px 16px 24px 32px; }
  .slayt::before { left: 18px; }
  .slayt h2 { font-size: 1.35rem; }
  .konu .k-kitap { display: none; }
}

/* tarayıcı çerçevesi */
.g-tarayici { border: 1px solid #cfd4dc; border-radius: 10px; overflow: hidden; background: #fff; }
.t-cubuk { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #eef1f5; border-bottom: 1px solid #cfd4dc; }
.t-nokta { color: #c4c9d1; letter-spacing: 2px; font-size: 12px; }
.t-adres { flex: 1; background: #fff; border-radius: 12px; padding: 2px 10px; font-size: .8rem; color: #555; }
.t-cerceve { width: 100%; border: 0; display: block; min-height: 60px; background: #fff; }

/* ikili karşılaştırma */
.g-ikili { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.i-kutu { flex: 1; min-width: 220px; }
.i-baslik { font-weight: 700; text-align: center; margin-bottom: 6px; }
.i-ok { font-size: 1.6rem; color: var(--soluk); }
.i-kutu .gorsel { margin: 0; }
.secenek code { font-family: Consolas, monospace; font-size: 1rem; }

/* çok sayfalı site */
.g-sayfalar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.g-sayfalar figure { margin: 0; text-align: center; }
.g-sayfalar img { max-width: 100%; border: 2px solid var(--cizgi); border-radius: 8px; display: block; }
.g-sayfalar figcaption { font-size: .85rem; font-weight: 700; color: var(--soluk); margin-top: 4px; }
.s-ana { flex: 1 1 300px; }
.s-dallar { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.s-dal { display: flex; align-items: center; gap: 8px; }
.s-dal figure { flex: 1; }
.s-ok { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.s-buton { background: var(--renk); color: #fff; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.s-cizgi { font-size: 1.6rem; color: var(--renk); line-height: 1; }

/* veri tabanı tabloları */
.g-tablo, .g-tablolar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.vt { border: 2px solid #2d9cdb; border-radius: 10px; overflow: hidden; background: #fff; font-size: .92rem; }
.vt-ad { background: #2d9cdb; color: #fff; font-weight: 700; padding: 6px 12px; }
.vt table { border-collapse: collapse; }
.vt th { background: #e6f4fb; text-align: left; padding: 5px 10px; border-bottom: 1px solid #b9dff2; }
.vt td { padding: 5px 10px; border-bottom: 1px solid #eef2f5; }
.vt-ok { display: flex; flex-direction: column; align-items: center; color: #2d9cdb; font-size: 1.6rem; }
.vt-ok span { font-size: .8rem; font-weight: 700; }

.r-yazi { text-align: center; font-size: .9rem; color: var(--soluk); margin-top: 6px; }

/* iç içe kutular */
.g-agac { display: flex; justify-content: center; }
.ag-dugum { border: 2px solid var(--r); border-radius: 10px; padding: 6px 10px 10px; background: color-mix(in srgb, var(--r) 7%, #fff); min-width: 90px; }
.ag-ad { font-family: Consolas, monospace; font-weight: 700; color: var(--r); font-size: 1.05rem; }
.ag-alt { font-family: "Segoe UI", sans-serif; font-weight: 400; color: var(--soluk); font-size: .85rem; margin-left: 8px; }
.ag-cocuk { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ag-cocuk.yan { flex-direction: row; flex-wrap: wrap; }
.ag-cocuk.yan > .ag-dugum { flex: 1; }

/* terminal */
.g-terminal { background: #1f2430; border-radius: 10px; overflow: hidden; }
.tr-ust { background: #343a48; color: #aab; font-size: .8rem; padding: 4px 12px; }
.g-terminal pre { color: #e6e6e6; padding: 12px 14px; font-family: Consolas, monospace; font-size: .95rem; white-space: pre-wrap; }
.g-terminal b { color: #9be38f; font-weight: normal; }

/* api isteği */
.g-istek { border: 2px solid var(--cizgi); border-radius: 10px; padding: 10px; background: #fff; }
.is-satir { display: flex; gap: 8px; align-items: center; }
.is-metot { color: #fff; font-weight: 800; padding: 3px 10px; border-radius: 6px; font-size: .85rem; font-family: Consolas, monospace; }
.m-GET { background: #27ae60; } .m-POST { background: #f2994a; } .m-PUT { background: #2f80ed; } .m-DELETE { background: #eb5757; }
.is-adres { flex: 1; font-family: Consolas, monospace; background: #f3f5f8; padding: 4px 10px; border-radius: 6px; }
.is-etiket { font-size: .8rem; font-weight: 700; color: var(--soluk); margin: 8px 0 2px; }
.is-kutu { background: #f3f5f8; border-radius: 6px; padding: 8px 10px; font-family: Consolas, monospace; font-size: .9rem; white-space: pre-wrap; }
.is-kutu.cevap { background: #eaf7ee; }

/* malzeme bağlantıları */
.malzeme { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; }
.malzeme a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid var(--cizgi); border-radius: 8px; text-decoration: none; color: inherit; background: #fff; font-weight: 500; font-size: .9rem; }
.malzeme a:hover { border-color: var(--renk); }
.malzeme img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.hedef .gorsel + .gorsel { margin-top: 10px; }

.telefon { width: 150px; height: 220px; margin: 0 auto; border: 8px solid #2b2b2b; border-radius: 22px; padding: 14px 10px; background: #fff; font-family: "Times New Roman", serif; overflow: hidden; }
.etk { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.etk div { background: #fff; border: 2px solid var(--cizgi); border-radius: 10px; padding: 8px 10px; font-size: 1.05rem; }
.etk code { display: inline-block; min-width: 70px; font-family: Consolas, monospace; color: #1c5fbf; font-weight: 700; }
.etk span { font-family: "Times New Roman", serif; font-size: 1.15rem; }

/* Öğretmen modu */
#hoca-isaret { position: fixed; bottom: 86px; right: 14px; z-index: 50; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #c0392b; background: #fff; font-size: 1.3rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.e-hoca { background: #fde2e1; color: #a12b22; }
.h-bolum { margin: 14px 0; }
.h-bolum h3 { font-size: 1.05rem; margin: 0 0 6px; color: #a12b22; }
.h-bolum ul { margin: 0; padding-left: 22px; line-height: 1.6; }
.h-bolum details { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.h-bolum summary { cursor: pointer; font-weight: 600; }
.h-bolum details p { margin: 8px 0 0; line-height: 1.55; }
/* Kitap dışı konular */
.ek-etiket { display: block; font-size: .78rem; font-weight: 600; color: #8a5a00; margin-top: 2px; }
.konu.ek .no { background: #e0a800; }
.ek-uyari { background: #fff3cd; color: #7a5200; border: 1px solid #f2c94c; border-radius: 8px; padding: 6px 12px; font-size: .9rem; font-weight: 600; margin-bottom: 10px; }

/* Dar ekran taşma düzeltmeleri (v7) */
.ag-dugum { min-width: 0; }
.ag-ad { overflow-wrap: anywhere; }
.ag-alt { display: inline-block; }
.ag-cocuk.yan > .ag-dugum { flex: 1 1 140px; }
.secenek { max-width: 100%; text-align: left; }
.secenek code { white-space: pre-wrap; overflow-wrap: anywhere; }
.metin code, .not code, .h-bolum code, li code { overflow-wrap: anywhere; }
pre.kod { overflow-x: auto; max-width: 100%; }
.gorsel { max-width: 100%; }
.g-tablo, .g-tablolar, .g-html { overflow-x: auto; }
.s-metin code { white-space: pre-wrap; word-break: break-all; }
.kart, .k-ust, .k-alt { min-width: 0; overflow-wrap: anywhere; }

/* Blok tabanlı sahne ve kod blokları (sprog) */
.g-sahne { max-width: 480px; border: 2px solid #c9d2e3; border-radius: 10px; overflow: hidden; background: #fff; }
.sh-ust { display: flex; justify-content: space-between; gap: 8px; padding: 4px 10px; background: #e9eef6; font-size: .85rem; color: #445; }
.sh-tus { background: #333; color: #fff; border-radius: 6px; padding: 0 8px; }
.sh-svg { display: block; width: 100%; height: auto; }
.g-sahne .r-yazi { padding: 4px 10px; }
.g-bloklar { overflow-x: auto; }
.g-bloklar .sb-bekle, .g-bloklar .sb-hata { white-space: pre; font-family: Consolas, monospace; font-size: .85rem; color: #555; background: #f6f7f9; padding: 8px; border-radius: 6px; }
.g-ikili .g-sahne { margin: 0 auto; }
.g-bloklar .sb3-comment-label { fill: #5a4a00 !important; font-weight: 600; }

/* Oyun motoru olay sayfası */
.g-olaylar { max-width: 620px; border: 2px solid #c9d2e3; border-radius: 10px; overflow: hidden; background: #fff; font-size: .9rem; }
.ol-ust { background: #2e2b45; color: #fff; padding: 4px 10px; font-size: .85rem; }
.ol-baslik { display: grid; grid-template-columns: 1fr 1fr; background: #eef0f6; color: #556; font-size: .75rem; padding: 2px 8px; }
.ol-satir { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #dde; border-left: 4px solid #4f6bd8; min-width: 0; }
.ol-kosul { background: #f5f7ff; padding: 4px 8px; border-right: 1px solid #dde; min-width: 0; }
.ol-eylem { padding: 4px 8px; min-width: 0; }
.ol-k, .ol-e { padding: 2px 0; overflow-wrap: anywhere; }
.ol-k::before { content: "◆ "; color: #4f6bd8; }
.ol-e::before { content: "▸ "; color: #27ae60; }
.ol-bos { color: #889; font-style: italic; }
.ol-bos::before { content: ""; }
.ol-yorum { background: #fff6c4; color: #5a4a00; padding: 5px 10px; border-top: 1px solid #e8d77a; }

/* Windows penceresi */
.g-pencere { max-width: 560px; border: 1px solid #8aa4c8; border-radius: 8px; overflow: hidden; background: #fff; font-size: .88rem; box-shadow: 0 3px 10px #0002; }
.pw-ust { display: flex; justify-content: space-between; background: #fff; border-bottom: 1px solid #dde3ee; padding: 6px 10px; font-weight: 600; color: #223; gap: 8px; }
.pw-x { color: #889; letter-spacing: 4px; font-weight: 400; white-space: nowrap; }
.pw-menu { display: flex; gap: 14px; padding: 3px 10px; border-bottom: 1px solid #eef; font-size: .8rem; color: #445; flex-wrap: wrap; }
.pw-govde { display: flex; min-width: 0; }
.pw-sol { background: #f3f6fa; border-right: 1px solid #dde3ee; padding: 6px 0; min-width: 110px; max-width: 40%; font-size: .8rem; }
.pw-sol div { padding: 3px 10px; overflow-wrap: anywhere; }
.pw-sol .sec, .pw-liste .sec { background: #cce4f7; }
.pw-ic { padding: 8px 12px; flex: 1; min-width: 0; }
.pw-bb { font-weight: 600; color: #1a5fa8; margin: 6px 0 4px; }
.pw-alan { display: grid; grid-template-columns: minmax(90px, 40%) 1fr; gap: 8px; align-items: center; margin: 4px 0; }
.pw-kutu { border: 1px solid #a9b6c8; border-radius: 3px; padding: 2px 6px; min-height: 1.4em; font-family: Consolas, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.pw-sec { margin: 4px 0; }
.pw-metin { color: #556; font-size: .82rem; margin: 4px 0; }
.pw-liste { border: 1px solid #a9b6c8; margin: 4px 0; max-width: 100%; }
.pw-liste div { padding: 2px 8px; overflow-wrap: anywhere; }
.pw-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; background: #f3f3f3; border-top: 1px solid #e3e3e3; flex-wrap: wrap; }
.pw-d { border: 1px solid #adadad; background: #e1e1e1; padding: 3px 14px; border-radius: 3px; font-size: .82rem; }
.pw-d.v { border-color: #0078d7; background: #e5f1fb; box-shadow: inset 0 0 0 1px #0078d7; }
/* Disk yönetimi */
.g-disk { max-width: 620px; font-size: .78rem; }
.dk-satir { display: flex; border: 1px solid #c9d2e3; margin-bottom: 6px; background: #fff; min-width: 0; }
.dk-bas { display: flex; flex-direction: column; padding: 4px 8px; background: #f1f2f6; min-width: 78px; border-right: 1px solid #c9d2e3; }
.dk-serit { display: flex; flex: 1; min-width: 0; }
.dk-b { border-top: 8px solid var(--r); border-right: 1px solid #c9d2e3; padding: 3px 5px; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.dk-gen { border-top-color: #27ae60; padding: 0; outline: 2px solid #27ae60; outline-offset: -2px; }
.dk-icseri .dk-b { border-top-width: 6px; }
.dk-lej { display: flex; flex-wrap: wrap; gap: 10px; color: #445; }
.dk-lej i { display: inline-block; width: 12px; height: 10px; margin-right: 4px; vertical-align: middle; }
.slayt { overflow-wrap: break-word; }
.g-disk { overflow-x: auto; }
.g-disk .dk-b { min-width: 56px; overflow-wrap: normal; word-break: normal; }
.g-disk .dk-gen { min-width: 112px; }

/* ── pencere ek satırlar + telefon (sos) ── */
.pw-resim{background:var(--r);border-radius:8px;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:6px 0;font-size:2.2em}
.pw-resim small{font-size:.38em;color:#555;margin-top:4px;text-align:center;padding:0 6px}
.pw-dsatir{text-align:right;margin:6px 0}
.pw-ikonlar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.pw-ikonlar span{border:1px solid #ccd;border-radius:8px;padding:4px 8px;font-size:.85em;background:#fff}
.pw-ikonlar span.sec{outline:2px solid #e74c3c;background:#fff4f2}
.g-telefon{display:flex;justify-content:center}
.tf-cerceve{width:270px;max-width:100%;border:10px solid #222;border-radius:28px;background:#fff;overflow:hidden;font-family:Arial,sans-serif;font-size:13px;color:#222;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tf-durum{display:flex;justify-content:space-between;padding:4px 12px;font-size:11px;background:#f4f4f4}
.tf-ust{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #e5e5e5;font-weight:bold}
.tf-ust b{font-size:20px;line-height:1}.tf-ust span{flex:1}.tf-ust em{font-style:normal;background:#1a73e8;color:#fff;border-radius:4px;padding:2px 8px;font-size:11px}
.tf-ekran{padding:8px 12px;min-height:200px}
.tf-ekran .pw-alan{display:block}.tf-ekran .pw-alan span:first-child{display:block;font-size:11px;color:#666;margin-top:4px}
.tf-alt{display:flex;justify-content:space-around;border-top:1px solid #e5e5e5;padding:6px 0;font-size:18px}
.tf-alt span.sec{outline:2px solid #e74c3c;border-radius:6px}
.tf-cerceve.koyu{background:#181818;color:#eee}.tf-cerceve.koyu .tf-durum{background:#000;color:#ccc}.tf-cerceve.koyu .tf-ust,.tf-cerceve.koyu .tf-alt{border-color:#333}
.tf-cerceve.koyu .pw-liste div,.tf-cerceve.koyu .pw-sec,.tf-cerceve.koyu .pw-metin{color:#ddd}
/* ── grafik (sos) ── */
.g-grafik{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:10px;max-width:620px;margin-left:auto;margin-right:auto}
.g-grafik svg{width:100%;height:auto;display:block}
.gr-baslik{font-weight:bold;text-align:center;font-size:.95rem;margin-bottom:4px;color:#333}
.gr-kaynak{font-size:.75rem;color:#888;text-align:right}
.pw-ikonlar span{color:#222}
.tf-ekran .pw-kutu{display:block;width:auto;font-family:inherit;padding:4px 6px;border-radius:4px;margin-top:2px}
.tf-cerceve.koyu .pw-kutu,.tf-cerceve.koyu .pw-ikonlar span{background:#2a2a2a;color:#eee;border-color:#444}
.tf-cerceve.koyu .pw-alan span:first-child{color:#aaa}
.tf-cerceve.koyu .pw-resim small{color:#bbb}

/* ── proje adımı (yproj) ── */
.rozet{display:inline-block;background:#fff4d6;color:#8a5a00;border:1px solid #f0d48a;border-radius:20px;padding:2px 12px;font-size:.85rem;font-weight:600;margin:-4px 0 10px}
.ad-kitap{border:1px dashed #c9c2b2;border-radius:10px;padding:8px 12px;margin:10px 0;background:#fbfaf6}
.ad-kitap summary{cursor:pointer;font-weight:700;color:#6b5e3c}
.ad-kitap summary span{font-weight:400;color:var(--soluk)}
.ad-sen{border:2px solid var(--renk);border-radius:12px;padding:10px 14px;margin:12px 0}
.ad-teslim{background:#eef6ff;border-radius:10px;padding:10px 14px;margin:12px 0}
.ad-teslim code{display:inline-block;background:#fff;border:1px solid #c8dcf5;border-radius:6px;padding:2px 8px;margin:4px 0;word-break:break-all}
.ad-teslim ul{list-style:none;padding-left:0;margin:6px 0 0}
.ad-teslim li{margin:3px 0}
.ad-onay{background:#fdecea;color:#9b2c1f;border-radius:10px;padding:10px 14px;margin:12px 0;font-weight:700}
.ad-sen .s-baslik,.ad-teslim .s-baslik{color:#333;margin-bottom:6px}
.vr-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.vr-kutu{border:2px solid var(--r);border-radius:8px;background:#fff;overflow:hidden;font-size:.85rem}
.vr-ad{background:var(--r);color:#fff;font-weight:700;padding:4px 8px}
.vr-alan{padding:3px 8px;border-top:1px solid #eee;font-family:Consolas,monospace;font-size:.8rem;word-break:break-word}
.vr-iliski{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vr-iliski span{background:#f3f0e8;border-radius:12px;padding:2px 10px;font-size:.8rem}
.ad-teslim .s-baslik a{color:#1a66c9}