/* ===========================================================================
   IB English B — Text Type Rehberi ortak görsel dili
   ib-yazi-pratigi.html ile AYNI dil: main.css tokenleri (--cat-accent, font-*,
   --line, --bg-card, --bg-soft, --radius-*, --shadow-md). data-cat="ib" ile
   accent IB kategorisinin rengine oturur. Feather-stili line SVG ikonlar.
   =========================================================================== */

.ttw{max-width:1080px;margin:0 auto;padding:28px 1.5rem 90px}

/* breadcrumb */
.tt-crumb{font-family:var(--font-ui);font-size:.8rem;color:var(--text-muted)}
.tt-crumb a{color:var(--text-muted);text-decoration:none}
.tt-crumb a:hover{color:var(--cat-accent)}

/* ---------- HUB ---------- */
.tt-hub-hero{text-align:center;max-width:820px;margin:8px auto 6px}
.tt-hub-hero .eyebrow{display:inline-block;font-family:var(--font-ui);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cat-accent);font-weight:600;margin-bottom:.5rem}
.tt-hub-hero h1{font-family:var(--font-display);font-size:2.6rem;font-weight:600;letter-spacing:-.02em;line-height:1.14;margin:.2rem 0 .7rem;color:var(--text)}
.tt-hub-hero p{font-family:var(--font-body);font-size:1.05rem;color:var(--text-soft);line-height:1.7;margin:0 auto;max-width:64ch}

/* domain overview şerit */
.tt-dombar{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;max-width:760px;margin:1.6rem auto .4rem}
@media(max-width:640px){.tt-dombar{grid-template-columns:1fr}}
.tt-dombar .db{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-soft);padding:.9rem 1rem;text-align:center}
.tt-dombar .db .dt{font-family:var(--font-ui);font-weight:700;font-size:.85rem;letter-spacing:.02em;color:var(--cat-accent-deep,var(--cat-accent))}
.tt-dombar .db .dc{font-family:var(--font-body);font-size:.8rem;color:var(--text-muted);margin-top:3px}

.tt-domain{padding:1.6rem 0 .4rem}
.tt-domain .dh{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin:0 0 1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.6rem}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.tt-card{display:block;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.4rem 1.5rem;text-decoration:none;color:var(--text);transition:all .18s ease;position:relative;overflow:hidden}
.tt-card.active:hover{border-color:var(--cat-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tt-card.locked{opacity:.6;cursor:not-allowed}
.tt-card-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--cat-accent);margin-bottom:.8rem}
.tt-card-icon svg{width:24px;height:24px}
.tt-card h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:0 0 .35rem;letter-spacing:-.01em;color:var(--text)}
.tt-card .en{font-family:var(--font-body);font-size:.88rem;color:var(--text-soft);margin:0 0 .9rem}
.tt-card-tag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.3rem .6rem;border-radius:var(--radius-sm)}
.tt-card.active .tt-card-tag{background:var(--cat-accent-soft);color:var(--cat-accent)}
.tt-card.locked .tt-card-tag{background:var(--bg-soft);color:var(--text-muted);border:1px solid var(--line)}
.tt-card-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tt-hub-note{max-width:820px;margin:2.4rem auto 0;padding:1.3rem 1.6rem;background:var(--bg-soft);border-left:3px solid var(--cat-accent);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.95rem;line-height:1.65;color:var(--text-soft)}
.tt-hub-note b{color:var(--text)}

/* ---------- TÜR SAYFASI ---------- */
.tt-hero{margin:12px 0 22px}
.tt-hero .badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.3rem .7rem;border-radius:var(--radius-sm);background:var(--cat-accent-soft);color:var(--cat-accent)}
.tt-hero h1{font-family:var(--font-display);font-size:2.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:.5rem 0 .35rem;color:var(--text)}
.tt-hero .lead{font-family:var(--font-body);font-size:1.06rem;color:var(--text-soft);line-height:1.65;max-width:70ch;margin:0}

.tt-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1.3rem 0 .3rem}
.tt-strip .cell{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);padding:.75rem .9rem}
.tt-strip .lbl{font-family:var(--font-ui);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:4px}
.tt-strip .val{font-family:var(--font-body);font-size:.92rem;font-weight:600;color:var(--text)}

.tt-sec{margin:2.4rem 0 0}
.tt-sec>h2{font-family:var(--font-display);font-size:1.55rem;font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:.7rem;color:var(--text)}
.tt-sec>h2 .n{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--cat-accent);color:var(--bg-card);font-family:var(--font-ui);font-size:.95rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.tt-sec>.sub{font-family:var(--font-body);color:var(--text-muted);font-size:.92rem;margin:2px 0 1rem}
.tt-p{font-family:var(--font-body);font-size:1rem;line-height:1.75;margin:0 0 12px;max-width:72ch;color:var(--text-soft)}
.tt-p b{color:var(--text)}

/* konvansiyon kartları — SVG line ikonlu */
.tt-conv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.conv{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.1rem 1.2rem}
.conv h3{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin:0 0 .7rem;display:flex;align-items:center;gap:.55rem;color:var(--text)}
.conv h3 .ci{width:22px;height:22px;flex:0 0 auto;color:var(--cat-accent)}
.conv h3 .ci svg{width:22px;height:22px}
.conv ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:6px}
.conv li{font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:var(--text-soft)}
.conv li b{color:var(--cat-accent-deep,var(--cat-accent))}

/* checklist */
.tt-check{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--cat-accent);border-radius:var(--radius-md);padding:1.1rem 1.4rem}
.tt-check .ci{display:flex;align-items:flex-start;gap:.7rem;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.tt-check .ci:last-child{border-bottom:0}
.tt-check .bx{width:20px;height:20px;flex:0 0 auto;border-radius:6px;background:var(--cat-accent);position:relative;margin-top:1px}
.tt-check .bx::after{content:"✓";color:var(--bg-card);font-size:13px;font-weight:800;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tt-check .ct{font-family:var(--font-body);font-size:.94rem;line-height:1.5;color:var(--text)}
.tt-check .ct b{color:var(--cat-accent-deep,var(--cat-accent))}

/* SL / HL seviye sekmeleri */
.tt-lvltabs{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:4px;margin:2px 0 14px;gap:2px}
.tt-lvltabs button{font-family:var(--font-ui);font-size:.82rem;font-weight:600;border:0;background:transparent;color:var(--text-muted);padding:7px 16px;border-radius:100px;cursor:pointer;transition:.15s}
.tt-lvltabs button.on{background:var(--cat-accent);color:var(--bg-card)}
.tt-lvltabs button .wc{opacity:.7;font-size:.72rem;font-weight:500}
.tt-lvl-panel[hidden]{display:none!important}

/* açıklamalı örnek — metin + numaralı callout */
.tt-ex-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:1.3rem;align-items:start}
@media(max-width:820px){.tt-ex-wrap{grid-template-columns:1fr}}
.tt-ex{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.5rem 1.7rem;box-shadow:var(--shadow-sm,0 1px 2px rgba(30,25,10,.05))}
.tt-ex .ex-kicker{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cat-accent);font-weight:700}
.tt-ex h3.ex-title{font-family:var(--font-display);font-size:1.45rem;font-weight:600;margin:.2rem 0 .1rem;line-height:1.15;color:var(--text)}
.tt-ex .ex-byline{font-family:var(--font-body);font-size:.8rem;color:var(--text-muted);font-style:italic;margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.tt-ex p{font-family:var(--font-body);font-size:1rem;line-height:1.75;margin:0 0 .8rem;color:var(--text)}
.tt-ex p:lang(en){font-family:var(--font-body)}
.tt-ex .ex-cta{font-weight:600}
.mk{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 4px;background:var(--cat-accent);color:var(--bg-card);font-family:var(--font-ui);font-size:11px;font-weight:800;border-radius:100px;vertical-align:.15em;margin:0 1px;cursor:default}
.hl{background:var(--cat-accent-soft);border-radius:3px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tt-ann{display:flex;flex-direction:column;gap:.7rem;position:sticky;top:14px}
.ann{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--cat-accent);border-radius:var(--radius-sm);padding:.7rem .85rem}
.ann .an-h{display:flex;align-items:center;gap:.5rem;margin-bottom:4px}
.ann .an-n{width:19px;height:19px;flex:0 0 auto;border-radius:100px;background:var(--cat-accent);color:var(--bg-card);font-family:var(--font-ui);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ann .an-t{font-family:var(--font-ui);font-size:.82rem;font-weight:700;color:var(--cat-accent-deep,var(--cat-accent))}
.ann p{font-family:var(--font-body);font-size:.85rem;line-height:1.55;color:var(--text-soft);margin:0}
.ann .en{font-style:italic;color:var(--text-muted);font-size:.8rem}

/* hızlı şablon iskeleti */
.tt-tmpl{background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--radius-md);padding:1.2rem 1.4rem}
.tmpl-row{display:flex;gap:1rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.tmpl-row:last-child{border-bottom:0}
.tmpl-tag{flex:0 0 140px;font-family:var(--font-ui);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cat-accent-deep,var(--cat-accent));padding-top:2px}
.tmpl-desc{font-family:var(--font-body);font-size:.9rem;color:var(--text);line-height:1.55}
.tmpl-desc .skel{display:block;height:8px;background:var(--line);border-radius:4px;margin:5px 0}
.tmpl-desc .skel.s2{width:80%}.tmpl-desc .skel.s3{width:60%}

.tt-foot{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;padding-top:1.3rem;border-top:1px solid var(--line)}
.tt-btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:100px;font-family:var(--font-ui);font-weight:600;font-size:.9rem;padding:10px 20px;text-decoration:none;border:1px solid var(--line);background:var(--bg-card);color:var(--text)}
.tt-btn.primary{background:var(--cat-accent);color:var(--bg-card);border-color:var(--cat-accent)}

/* ===== format iskeleti: türün yerleşimini gösteren stilize çizim (ikon yerine) ===== */
.fmt-skel{border:1.5px solid var(--line);border-radius:12px;background:var(--bg-card);padding:1rem 1.1rem;max-width:360px;margin:1.2rem auto .4rem;box-shadow:var(--shadow-sm);font-family:var(--font-ui)}
.fmt-skel .fs-cap{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--cat-accent);margin-bottom:.7rem;display:flex;align-items:center;gap:.45rem}
.fmt-skel .fs-cap::before{content:"";width:13px;height:13px;border:1.5px solid var(--cat-accent);border-radius:3px;flex:none}
.fmt-skel .fs-row{margin:.55rem 0}
.fmt-skel .fs-tag{display:block;font-size:.57rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.26rem}
.fmt-skel .fs-bar{height:7px;border-radius:4px;background:var(--cat-accent-soft);margin:.16rem 0}
.fmt-skel .fs-bar.title{height:13px;width:66%;background:var(--cat-accent)}
.fmt-skel .fs-bar.sub{height:9px;width:80%}
.fmt-skel .fs-bar.w35{width:35%}.fmt-skel .fs-bar.w50{width:50%}.fmt-skel .fs-bar.w66{width:66%}.fmt-skel .fs-bar.w85{width:85%}.fmt-skel .fs-bar.full{width:100%}
.fmt-skel .fs-bar.right{margin-left:auto}
.fmt-skel .fs-txt .fs-bar{background:var(--line)}
.fmt-skel .fs-cols{display:flex;gap:.6rem}.fmt-skel .fs-cols>div{flex:1}
.fmt-cap-tr{text-align:center;font-size:.82rem;color:var(--text-muted);margin:.2rem auto 1rem;max-width:380px;line-height:1.55}