/* Matematik Sınıfım — öğrenci sitesi Önce telefon. Tek marka rengi yok: genel sayfalar sade/beyaz; sınıf ve paket sayfaları ile o sınıfın pastel tonunu alır (değişkenler dosyanın sonunda, site/varliklar/renkler.json'dan üretilir). Yazı tipleri ortak/yazitipleri/'nden (OFL). */ @font-face { font-family: "Poppins"; src: url("/varliklar/yazitipleri/poppins-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Lobster Two"; src: url("/varliklar/yazitipleri/lobstertwo-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --zemin: #ffffff; --metin: #1f2330; --soluk: #555b6b; --cizgi: #e4e6ec; --koyu: #2c2e48; --koyu-ust: #3d4066; /* sınıf tonu (genel sayfalarda nötr) */ --ton-zemin: #f4f5f8; --ton-acik: #fafbfc; --ton-kenar: #d9dce4; --ton-yazi: #2c2e48; --ton-vurgu: #2c2e48; --ton-vurgu-ust: #3d4066; --yaricap: 18px; --golge: 0 1px 2px rgba(20, 22, 40, .06), 0 6px 18px rgba(20, 22, 40, .07); --yazi-govde: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --yazi-baslik: "Poppins", var(--yazi-govde); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--zemin); color: var(--metin); font: 400 1.0625rem/1.6 var(--yazi-govde); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } figure { margin: 0; } a { color: var(--ton-vurgu); text-underline-offset: .18em; } a:hover { color: var(--ton-vurgu-ust); } :focus-visible { outline: 3px solid var(--ton-vurgu); outline-offset: 3px; border-radius: 6px; } h1, h2, h3 { font-family: var(--yazi-baslik); font-weight: 600; line-height: 1.25; color: var(--ton-yazi); margin: 0 0 .5em; } h1 { font-size: clamp(1.6rem, 5.5vw, 2.4rem); } h2 { font-size: clamp(1.25rem, 4vw, 1.6rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; } .atla { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--koyu); color: #fff; padding: 12px 16px; border-radius: 10px; } .atla:focus { top: 12px; color: #fff; } .kap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; } .dar { max-width: 780px; } /* ---------- Üst şerit ---------- */ .ust { background: #fff; border-bottom: 1px solid var(--cizgi); } .ust .kap { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; } .logo { display: inline-flex; align-items: center; min-height: 48px; } .logo img { height: 44px; width: auto; } .siniflar-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .siniflar-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 12px; border-radius: 999px; font: 600 .95rem var(--yazi-baslik); text-decoration: none; color: var(--koyu); background: #f2f3f7; border: 1px solid transparent; } .siniflar-nav a:hover { background: #e7e9f0; color: var(--koyu); } .siniflar-nav a[aria-current="page"] { background: var(--ton-vurgu); color: #fff; } .siniflar-nav .kisa { display: inline; } .siniflar-nav .uzun { display: none; } /* ---------- Sayfa başı ---------- */ .bas { background: var(--ton-zemin); border-bottom: 1px solid var(--ton-kenar); } .bas .kap { padding-top: 22px; padding-bottom: 26px; } .bas p { color: var(--ton-yazi); font-size: 1.05rem; max-width: 62ch; } .yol { font-size: .95rem; margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--ton-yazi); } .yol li { display: inline-flex; align-items: center; padding: 6px 0; } .yol li + li::before { content: "›"; margin-right: 6px; opacity: .7; } .yol a { color: var(--ton-yazi); } .bas-rozetli { display: flex; gap: 16px; align-items: center; } .bas-rozetli img { width: 104px; flex: none; } .etiket { display: inline-block; font: 600 .85rem var(--yazi-baslik); letter-spacing: .01em; color: var(--ton-yazi); background: var(--ton-acik); border: 1px solid var(--ton-kenar); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; } /* ---------- Ana sayfa ---------- */ .karsilama { background: #fdf8ec; border-bottom: 1px solid #f1e8d2; } .karsilama .kap { display: grid; gap: 18px; padding-top: 26px; padding-bottom: 30px; align-items: center; } .karsilama h1 { color: var(--koyu); margin-bottom: .3em; } .karsilama p { color: #3a3d52; font-size: 1.1rem; } .hoca { display: flex; align-items: center; gap: 14px; } .hoca img { width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--golge); } .imza { font: 700 2rem/1 "Lobster Two", cursive; color: var(--koyu); } .dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .dugme { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 20px; border-radius: 14px; font: 600 1rem var(--yazi-baslik); text-decoration: none; background: var(--ton-vurgu); color: #fff; border: 0; cursor: pointer; } .dugme:hover { background: var(--ton-vurgu-ust); color: #fff; } .dugme.ikincil { background: #fff; color: var(--koyu); border: 1px solid var(--cizgi); } .dugme.ikincil:hover { background: #f4f5f8; color: var(--koyu); } .dugme svg { width: 22px; height: 22px; flex: none; } .bolum { padding: 28px 0 8px; } .sinif-kartlari { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .sinif-karti a { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 16px 10px 18px; border-radius: var(--yaricap); text-decoration: none; background: var(--ton-zemin); border: 1px solid var(--ton-kenar); color: var(--ton-yazi); box-shadow: var(--golge); transition: transform .15s ease; } .sinif-karti a:hover { transform: translateY(-2px); color: var(--ton-yazi); } .sinif-karti img { width: 100%; max-width: 150px; } .sinif-karti strong { font: 600 1.2rem var(--yazi-baslik); margin-top: 6px; } .sinif-karti span { font-size: .95rem; } .adimlar { list-style: none; counter-reset: adim; margin: 0; padding: 0; display: grid; gap: 12px; } .adimlar li { counter-increment: adim; display: flex; gap: 14px; align-items: flex-start; background: #f7f8fa; border-radius: 14px; padding: 14px 16px; } .adimlar li::before { content: counter(adim); flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 1rem var(--yazi-baslik); background: var(--koyu); color: #fff; } /* ---------- Sınıf sayfası ---------- */ .tema { padding: 26px 0 6px; } .tema h2 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .tema h2 small { font: 600 .9rem var(--yazi-baslik); color: var(--ton-yazi); background: var(--ton-zemin); padding: 3px 10px; border-radius: 999px; } .paket-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .paket-satiri > a, .paket-satiri > div { display: flex; gap: 14px; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--metin); } .paket-satiri > a { background: #fff; border: 2px solid var(--ton-kenar); box-shadow: var(--golge); } .paket-satiri > a:hover { border-color: var(--ton-vurgu); color: var(--metin); } .paket-satiri > div { background: var(--ton-acik); border: 1px dashed var(--ton-kenar); color: var(--soluk); } .paket-no { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 600 .95rem var(--yazi-baslik); background: var(--ton-zemin); color: var(--ton-yazi); } .paket-satiri > a .paket-no { background: var(--ton-vurgu); color: #fff; } .paket-adi { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; } .paket-adi small { display: block; font-weight: 400; color: var(--soluk); margin-top: 2px; font-size: .9rem; } .yakinda { flex: none; font: 600 .8rem var(--yazi-baslik); color: var(--soluk); background: #fff; border: 1px solid var(--cizgi); padding: 3px 10px; border-radius: 999px; } .ok { flex: none; width: 22px; height: 22px; color: var(--ton-vurgu); } /* ---------- Paket sayfası ---------- */ .icerik-bolumu { padding: 24px 0 4px; } .pdfler { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pdf-dugmesi { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 14px; text-decoration: none; background: var(--ton-vurgu); color: #fff; box-shadow: var(--golge); } .pdf-dugmesi:hover { background: var(--ton-vurgu-ust); color: #fff; } .pdf-dugmesi svg { width: 28px; height: 28px; flex: none; } .pdf-dugmesi .ad { flex: 1; font: 600 1.05rem var(--yazi-baslik); } .pdf-dugmesi .boyut { font-size: .9rem; opacity: .92; white-space: nowrap; } .bilgi-kutusu { background: var(--ton-acik); border: 1px solid var(--ton-kenar); border-radius: 14px; padding: 14px 16px; color: var(--ton-yazi); } .videolar { display: grid; gap: 16px; } .video figcaption { font: 600 1rem var(--yazi-baslik); color: var(--ton-yazi); margin-top: 8px; } .video-kutu { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ton-zemin); box-shadow: var(--golge); } .video-kutu iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-oynat { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--ton-zemin); display: block; } .video-oynat img { width: 100%; height: 100%; object-fit: cover; } .video-oynat .oynat-simgesi { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); border-radius: 16px; background: rgba(20, 20, 30, .78); display: grid; place-items: center; transition: background .15s ease; } .video-oynat:hover .oynat-simgesi, .video-oynat:focus-visible .oynat-simgesi { background: #e02424; } .video-oynat .oynat-simgesi svg { width: 30px; height: 30px; color: #fff; } .video-bekliyor { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--ton-yazi); font-weight: 600; } .liste { margin: 0; padding-left: 1.2em; } .liste li { margin: 0 0 .45em; } .kazanimlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .kazanimlar li { background: #f7f8fa; border-radius: 12px; padding: 10px 14px; } .kazanimlar b { font-family: var(--yazi-baslik); color: var(--ton-yazi); margin-right: 6px; } .komsular { display: grid; gap: 10px; padding: 28px 0 8px; } .komsular a { display: block; padding: 12px 16px; border: 1px solid var(--cizgi); border-radius: 14px; text-decoration: none; color: var(--metin); min-height: 48px; } .komsular a:hover { border-color: var(--ton-vurgu); color: var(--metin); } .komsular small { display: block; color: var(--soluk); font-size: .85rem; } /* ---------- Metin sayfaları ---------- */ .metin { padding: 24px 0 8px; } .metin h2 { margin-top: 1.2em; } /* ---------- Alt bilgi ---------- */ .alt { margin-top: 40px; background: #f6f7f9; border-top: 1px solid var(--cizgi); color: var(--soluk); font-size: .95rem; } .alt .kap { padding-top: 22px; padding-bottom: 26px; display: grid; gap: 12px; } .alt nav { display: flex; flex-wrap: wrap; gap: 4px 18px; } .alt a { color: var(--koyu); display: inline-block; padding: 8px 0; } .alt p { margin: 0; } @media (min-width: 640px) { .sinif-kartlari { grid-template-columns: repeat(4, 1fr); } .adimlar { grid-template-columns: repeat(3, 1fr); } .pdfler { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .komsular { grid-template-columns: 1fr 1fr; } .komsular .sonraki { text-align: right; grid-column: 2; } .bas-rozetli img { width: 132px; } .siniflar-nav .kisa { display: none; } .siniflar-nav .uzun { display: inline; } } @media (min-width: 880px) { .karsilama .kap { grid-template-columns: 1.3fr 1fr; } .karsilama .hoca { justify-content: center; } .hoca img { width: 150px; height: 150px; } .videolar.iki { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Sınıf tonları — site/varliklar/renkler.json (site/varliklari_uret.py) */ .sinif-5 { --ton-zemin: #d0f5eb; --ton-acik: #ecfbf7; --ton-kenar: #43d7af; --ton-yazi: #175847; --ton-vurgu: #1b8064; --ton-vurgu-ust: #176a54; } .sinif-6 { --ton-zemin: #c6cfdc; --ton-acik: #e8ecf1; --ton-kenar: #aab8ca; --ton-yazi: #2d3d50; --ton-vurgu: #4c6a90; --ton-vurgu-ust: #466184; } .sinif-7 { --ton-zemin: #dec8ea; --ton-acik: #f2e9f7; --ton-kenar: #ccabde; --ton-yazi: #512c66; --ton-vurgu: #9755bd; --ton-vurgu-ust: #8341a8; } .sinif-8 { --ton-zemin: #e1e3e8; --ton-acik: #f3f4f6; --ton-kenar: #b9bdc9; --ton-yazi: #41495b; --ton-vurgu: #657191; --ton-vurgu-ust: #55607a; }