/* ========================================================================= Portali — stili kryesor Organizuar si: variabla → bazë → paraqitje → komponentë → responsive ========================================================================= */ :root { --kuqe: #c8102e; --kuqe-erret: #9c0c23; --erret: #12171c; --teksti: #1b2228; --gri: #5f6b76; --gri-lehte: #8a949e; --vije: #e3e7ea; --sfond: #ffffff; --sfond-2: #f5f7f8; --serif: Georgia, 'Times New Roman', serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --hije: 0 1px 3px rgba(18, 23, 28, .08); --hije-lg: 0 8px 24px rgba(18, 23, 28, .12); --rrezja: 4px; } *, *::before, *::after { box-sizing: border-box; } html { /* Ndalon Safari-n në iPhone të fryjë tekstin kur telefoni rrotullohet */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--teksti); background: var(--sfond); -webkit-font-smoothing: antialiased; /* Titujt e gjatë dhe URL-të nuk e zgjerojnë dot faqen anash */ overflow-wrap: break-word; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--kuqe); } h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.25; margin: 0 0 .5em; } .kuti { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Shënim: `overflow-x: hidden` te do ta ndalonte rrëshqitjen anash, por prish njëkohësisht `position: sticky` te menuja dhe anësorja. Prandaj çdo element i gjerë (menu, tabela) rrëshqet brenda kutisë së vet. */ /* Vetëm për lexuesit e ekranit */ .vetem-lexues { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .kalo-tek-permbajtja { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--kuqe); color: #fff; padding: 12px 20px; } .kalo-tek-permbajtja:focus { left: 0; color: #fff; } /* ------------------------------------------------------------- Shiriti -- */ .shirit-lart { background: var(--erret); color: #c7ced5; font-size: 13px; } .shirit-lart__brenda { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; flex-wrap: wrap; } .shirit-lart__data { text-transform: capitalize; letter-spacing: .2px; } .shirit-lart__lidhje { display: flex; align-items: center; gap: 16px; } .shirit-lart__lidhje a:hover { color: #fff; } .shirit-lart__emri { color: #8d97a1; } /* Dalja është formë POST, por duhet të duket si lidhje */ .dil-forma { display: inline; } .dil-forma button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } .dil-forma button:hover { color: #fff; } /* ---------------------------------------------------------------- Koka -- */ .koka { border-bottom: 1px solid var(--vije); } .koka__brenda { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; } .logo__emri { display: flex; align-items: center; font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -1px; color: var(--erret); line-height: 1; white-space: nowrap; } .logo__kuqe { color: var(--kuqe); } .logo__shqiponja { height: 1.25em; width: auto; margin-left: 0.3em; display: inline-block; vertical-align: middle; } .logo__slogan { display: block; margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--gri-lehte); } .logo:hover .logo__emri { color: var(--erret); } /* ---------------------------------------------------------------- Menu -- */ .menu { background: var(--kuqe); position: sticky; top: 0; z-index: 50; } .menu__brenda { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .menu__brenda::-webkit-scrollbar { display: none; } .menu__lidhje { padding: 13px 16px; white-space: nowrap; color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; border-bottom: 3px solid transparent; } .menu__lidhje:hover { background: var(--kuqe-erret); color: #fff; } .menu__lidhje.eshte-aktive { border-bottom-color: #fff; color: #fff; } /* ------------------------------------------------------------ Njoftime -- */ .njoftim { margin: 20px 0; padding: 12px 16px; border-left: 4px solid; border-radius: var(--rrezja); font-size: 15px; } .njoftim--sukses { background: #edf7ee; border-color: #2e7d32; color: #1b4d1f; } .njoftim--gabim { background: #fdecea; border-color: #c62828; color: #7f1d1d; } .njoftim--info { background: #e8f2fb; border-color: #1565c0; color: #10406e; } /* ------------------------------------------------------------- Seksion -- */ .seksion { margin: 36px 0; } .seksion__titull { display: flex; align-items: center; gap: 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; font-family: var(--sans); font-weight: 700; color: var(--erret); margin-bottom: 20px; } .seksion__titull::after { content: ''; flex: 1; height: 1px; background: var(--vije); } /* --------------------------------------------------------------- Hero -- */ .hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; margin: 32px 0; padding-bottom: 32px; border-bottom: 3px solid var(--erret); } .hero__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rrezja); background: var(--sfond-2); } .hero__titull { font-size: 38px; margin: 16px 0 12px; } .hero__titull a:hover { color: var(--kuqe); } .hero__permbledhje { font-size: 18px; color: var(--gri); margin: 0; } .hero__ane { display: flex; flex-direction: column; gap: 20px; } /* --------------------------------------------------------------- Karta -- */ .rrjeti { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .karta { display: flex; flex-direction: column; } .karta__foto-mbajtes { position: relative; display: block; } .karta__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rrezja); background: var(--sfond-2); } .karta__titull { font-size: 19px; margin: 12px 0 8px; } .karta__permbledhje { font-size: 14.5px; color: var(--gri); margin: 0; } /* Kartë horizontale për listat anësore */ .karta--rresht { flex-direction: row; gap: 14px; align-items: flex-start; } .karta--rresht .karta__foto-mbajtes { flex: 0 0 104px; } .karta--rresht .karta__foto { aspect-ratio: 1 / 1; } .karta--rresht .karta__titull { font-size: 16px; margin: 0 0 6px; } .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--gri-lehte); } .etiketa { display: inline-block; padding: 3px 9px; background: var(--kuqe); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; border-radius: 2px; } .etiketa:hover { background: var(--kuqe-erret); color: #fff; } .etiketa--e-mbyllur { background: var(--erret); } /* Shenja mbi foto kur posti kërkon llogari */ .shenja-kyq { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 2px; background: rgba(18, 23, 28, .88); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } .shenja-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .shenja-video span { width: 52px; height: 52px; border-radius: 50%; background: rgba(200, 16, 46, .92); display: flex; align-items: center; justify-content: center; } .shenja-video span::after { content: ''; margin-left: 4px; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; } /* ------------------------------------------------------------ Artikull -- */ .faqja-lajm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; margin: 32px 0 56px; } /* `minmax(0, 1fr)`, jo `1fr` — përndryshe përmbajtja e gjerë (tabela, kod, foto) e zgjeron kolonën dhe faqja rrëshqet anash në telefon. */ @media (max-width: 900px) { .faqja-lajm { grid-template-columns: minmax(0, 1fr); } } .artikull__titull { font-size: 40px; margin: 12px 0 16px; } .artikull__permbledhje { font-size: 20px; line-height: 1.55; color: var(--gri); margin: 0 0 20px; padding-left: 16px; border-left: 3px solid var(--kuqe); } .artikull__meta { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 0; margin-bottom: 24px; border-top: 1px solid var(--vije); border-bottom: 1px solid var(--vije); font-size: 13px; color: var(--gri); } /* Vija nën titull: vijë e hollë gri me një cak të kuq në fillim */ .artikull__ndares { position: relative; height: 2px; border: 0; margin: 22px 0 26px; background: var(--vije); } .artikull__ndares::before { content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 2px; background: var(--kuqe); } .artikull__foto { width: 100%; border-radius: var(--rrezja); margin-bottom: 8px; } .artikull__legjenda { font-size: 12.5px; color: var(--gri-lehte); margin: 0 0 28px; } .artikull__trupi { font-family: var(--serif); font-size: 18.5px; line-height: 1.75; } .artikull__trupi p { margin: 0 0 1.15em; } .artikull__trupi h2 { font-size: 26px; margin: 1.4em 0 .5em; } .artikull__trupi h3 { font-size: 21px; margin: 1.3em 0 .5em; } .artikull__trupi a { color: var(--kuqe); text-decoration: underline; } .artikull__trupi blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--kuqe); font-style: italic; color: var(--gri); } .artikull__trupi ul, .artikull__trupi ol { padding-left: 1.3em; margin: 0 0 1.15em; } /* ---------------------------------------------------------- Video kuti -- */ .video-kuti { margin: 0 0 28px; } .video-kuti video { width: 100%; background: #000; border-radius: var(--rrezja); aspect-ratio: 16 / 9; display: block; } /* --- Luajtësi me butonin tonë --- */ .luajtes { position: relative; } /* Kopertina duhet të mbulojë kuadratin, jo të shtrembërohet nëse ka përmasa të tjera nga videoja. */ .luajtes video { object-fit: cover; } /* Rezervë për Chrome/Safari: edhe po të mbeten kontrollet për ndonjë arsye, butoni qendror i shfletuesit nuk shfaqet mbi tonin. */ .luajtes video::-webkit-media-controls-overlay-play-button { display: none; } .luajtes__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(200, 16, 46, .92); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease; } /* Trekëndëshi vizatohet me kufij — pa foto, pa font ikonash */ .luajtes__play::after { content: ''; margin-left: 6px; border-left: 21px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; } .luajtes__play:hover { background: var(--kuqe); transform: scale(1.07); } .luajtes__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .luajtes.po-luan .luajtes__play { display: none; } .luajtes.po-luan video { object-fit: contain; } @media (max-width: 600px) { .luajtes__play { width: 60px; height: 60px; } .luajtes__play::after { border-left-width: 17px; border-top-width: 10px; border-bottom-width: 10px; } } /* Perdja që zë vendin e videos kur vizitori s'është i kyçur */ .perdja { position: relative; overflow: hidden; border-radius: var(--rrezja); aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1d242b 0%, #12171c 100%); display: flex; align-items: center; justify-content: center; } .perdja__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.42); transform: scale(1.1); } .perdja__brenda { position: relative; text-align: center; color: #fff; padding: 28px 24px; max-width: 460px; } .perdja__ikona { font-size: 34px; line-height: 1; margin-bottom: 10px; } .perdja__titull { font-family: var(--sans); font-size: 20px; font-weight: 700; margin: 0 0 8px; color: #fff; } .perdja__tekst { font-size: 14.5px; color: #c7ced5; margin: 0 0 18px; } .perdja__butonat { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* --------------------------------------------------------------- Anësi -- */ .anesi { align-self: start; position: sticky; top: 68px; } .anesi__bllok { padding: 20px; margin-bottom: 24px; background: var(--sfond-2); border-radius: var(--rrezja); } .anesi__titull { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--erret); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--kuqe); } /* --- Hapësira e reklamave --- */ .reklama { margin-bottom: 24px; } .reklama__etiketa { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--gri-lehte); text-align: right; } .reklama__foto { width: 100%; height: auto; border-radius: var(--rrezja); border: 1px solid var(--vije); } /* Vendi bosh — duket qartë si hapësirë e lirë, jo si përmbajtje */ .reklama__bosh { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 6 / 5; /* përafron 300×250 */ padding: 20px; border: 2px dashed var(--vije); border-radius: var(--rrezja); background: var(--sfond-2); text-align: center; } .reklama__ikona { font-size: 26px; color: var(--gri-lehte); line-height: 1; } .reklama__titull { margin: 10px 0 2px; font-size: 14.5px; font-weight: 600; color: var(--gri); } .reklama__masa { margin: 0; font-size: 20px; font-weight: 700; font-family: var(--serif); color: var(--gri-lehte); } .reklama__ndihme { margin: 8px 0 0; font-size: 11.5px; color: var(--gri-lehte); } .reklama__ndihme code { font-size: 11px; } /* Lista e lajmeve nga burim i jashtëm */ .lista-jashtme { list-style: none; margin: 0; padding: 0; } .lista-jashtme li { padding: 11px 0; border-bottom: 1px solid var(--vije); } .lista-jashtme li:last-child { border-bottom: 0; padding-bottom: 0; } .lista-jashtme a { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; } .lista-jashtme time { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gri-lehte); } .lista-jashtme__burimi { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--vije); font-size: 11.5px; color: var(--gri-lehte); } .lista-jashtme__burimi a { font-weight: 600; color: var(--gri); } /* Ftesa për abonim në anësi */ .ftesa { padding: 24px 20px; border-radius: var(--rrezja); background: var(--erret); color: #fff; text-align: center; } .ftesa h3 { color: #fff; font-size: 20px; margin: 0 0 8px; } .ftesa p { font-size: 14px; color: #c7ced5; margin: 0 0 16px; } /* ------------------------------------------------------------- Butonat -- */ .butoni { display: inline-block; padding: 11px 22px; background: var(--kuqe); color: #fff; border: 0; border-radius: var(--rrezja); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; } .butoni:hover { background: var(--kuqe-erret); color: #fff; } .butoni--vogel { padding: 5px 12px; font-size: 12.5px; } .butoni--bardhe { background: #fff; color: var(--erret); } .butoni--bardhe:hover { background: #e6e9ec; color: var(--erret); } .butoni--kufi { background: transparent; border: 1px solid var(--vije); color: var(--teksti); } .butoni--kufi:hover { background: var(--sfond-2); color: var(--teksti); } .butoni--rrezik { background: #c62828; } .butoni--rrezik:hover { background: #a01f1f; } /* --- Facebook --- */ .fb-forma { display: block; } .butoni--fb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #1877f2; width: 100%; } .butoni--fb:hover { background: #145dbf; color: #fff; } .butoni--fb svg { flex: 0 0 auto; } /* Ndarësja "ose" mes hyrjes me email dhe asaj me Facebook */ .ndaresja { display: flex; align-items: center; gap: 14px; margin: 20px 0; font-size: 13px; color: var(--gri-lehte); text-transform: uppercase; letter-spacing: 1px; } .ndaresja::before, .ndaresja::after { content: ''; flex: 1; height: 1px; background: var(--vije); } /* Brenda kutive të errëta (perdja e videos, ftesa për abonim) */ .ftesa .butoni--fb, .perdja .butoni--fb { width: 100%; } .ftesa .ndaresja, .perdja .ndaresja { color: #8d97a1; } .ftesa .ndaresja::before, .ftesa .ndaresja::after, .perdja .ndaresja::before, .perdja .ndaresja::after { background: #3a444e; } /* --------------------------------------------------------------- Forma -- */ .forma-kuti { max-width: 440px; margin: 56px auto; padding: 36px; border: 1px solid var(--vije); border-radius: 6px; box-shadow: var(--hije); } .forma-kuti h1 { font-size: 28px; text-align: center; margin-bottom: 6px; } .forma-kuti__nen { text-align: center; color: var(--gri); font-size: 14.5px; margin: 0 0 26px; } .fusha { margin-bottom: 18px; } .fusha label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--erret); } .fusha input, .fusha select, .fusha textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--vije); border-radius: var(--rrezja); font: inherit; font-size: 15px; background: #fff; } .fusha input:focus, .fusha select:focus, .fusha textarea:focus { outline: 2px solid var(--kuqe); outline-offset: -2px; border-color: var(--kuqe); } .fusha textarea { resize: vertical; min-height: 110px; } .fusha__ndihme { font-size: 12.5px; color: var(--gri-lehte); margin: 6px 0 0; } .fusha--rresht { display: flex; gap: 16px; } .fusha--rresht > * { flex: 1; } .forma-fund { margin-top: 22px; text-align: center; font-size: 14px; color: var(--gri); } .forma-fund a { color: var(--kuqe); font-weight: 600; } /* ---------------------------------------------------------- Faqosje ---- */ .faqosja { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 40px 0; } .faqosja a, .faqosja span { min-width: 40px; padding: 9px 12px; text-align: center; border: 1px solid var(--vije); border-radius: var(--rrezja); font-size: 14px; } .faqosja a:hover { border-color: var(--kuqe); color: var(--kuqe); } .faqosja .eshte-aktive { background: var(--kuqe); border-color: var(--kuqe); color: #fff; } .bosh { padding: 60px 20px; text-align: center; color: var(--gri); background: var(--sfond-2); border-radius: var(--rrezja); } /* ---------------------------------------------------------------- Fund -- */ .fundi { margin-top: 60px; background: var(--erret); color: #a9b3bd; } .fundi__brenda { display: flex; justify-content: space-between; gap: 32px; padding-top: 40px; padding-bottom: 32px; flex-wrap: wrap; } .fundi__emri { display: flex; align-items: center; font-family: var(--serif); font-size: 26px; font-weight: 700; color: #fff; } .fundi__shqiponja { height: 0.95em; width: auto; margin-left: 0.28em; display: inline-block; vertical-align: middle; } .fundi__tekst { font-size: 14px; margin: 6px 0 0; } .fundi__lidhje { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; } .fundi__lidhje a:hover { color: #fff; } .fundi__fund { padding-top: 18px; padding-bottom: 24px; border-top: 1px solid #262f38; font-size: 13px; color: #78838e; } /* ========================================================================= Responsive Pikat ndarëse: 1024 (tablet i madh) → 820 (tablet) → 600 (telefon) → 380 (telefon i vogël). Çdo pikë vetëm rregullon atë që prishet. ========================================================================= */ /* -------------------------------------------------------- Tablet i madh -- */ /* | Kufiri i poshtëm (min-width: 901px) është i domosdoshëm, jo zbukurim. | Pa të, kjo rregull do të vlente edhe në telefon dhe — meqë ndodhet më | poshtë se rregulla `max-width: 900px` që e bën faqen njëkolonëshe — do ta | mbivendoste atë. Rezultati: anësorja 280px do ta shtypte artikullin në | pak dhjetëra piksela. */ @media (min-width: 901px) and (max-width: 1024px) { .faqja-lajm { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } .hero { gap: 24px; } .hero__titull { font-size: 32px; } } /* --------------------------------------------------------------- Tablet -- */ @media (max-width: 820px) { .hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; margin: 24px 0; } .hero__titull { font-size: 28px; } .hero__permbledhje { font-size: 16px; } .artikull__titull { font-size: 29px; } .artikull__permbledhje { font-size: 17px; } .artikull__trupi { font-size: 17px; } .koka__brenda { padding-top: 16px; padding-bottom: 16px; gap: 14px; } .logo__emri { font-size: 32px; } /* Anësorja pushon së ndjekuri rrëshqitjen — nën njëra-tjetrën s'ka kuptim */ .anesi { position: static; } .rrjeti { gap: 24px; } } /* -------------------------------------------------------------- Telefon -- */ @media (max-width: 600px) { .kuti { padding: 0 16px; } /* --- Shiriti i sipërm: data hiqet, mbeten vetëm veprimet --- */ .shirit-lart__data { display: none; } .shirit-lart__brenda { justify-content: flex-end; gap: 14px; min-height: 44px; } /* Teksti është 13px, pra vetëm ~21px i lartë. Pa mbushje vertikale këto lidhje janë tepër të vogla për t'u prekur me gisht. */ .shirit-lart__lidhje a:not(.butoni), .dil-forma button { padding: 12px 2px; } .shirit-lart__lidhje .butoni { padding: 8px 14px; } .shirit-lart__emri { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Koka: logo dhe kërkimi njëri mbi tjetrin --- */ .koka__brenda { flex-direction: column; align-items: stretch; gap: 12px; } .logo { text-align: center; } .logo__emri { font-size: 30px; justify-content: center; } .fundi__emri { justify-content: center; } .logo__slogan { font-size: 11px; letter-spacing: 1.4px; } /* | Fontet nën 16px e detyrojnë Safari-n në iPhone të bëjë zoom sapo | preket fusha, dhe faqja mbetet e zmadhuar. 16px e ndalon këtë. */ .fusha input, .fusha select, .fusha textarea { font-size: 16px; } .menu__lidhje { padding: 12px 14px; font-size: 13px; } /* --- Titujt --- */ .hero__titull { font-size: 24px; } .hero__permbledhje { font-size: 15.5px; } .artikull__titull { font-size: 25px; } .artikull__permbledhje { font-size: 16px; padding-left: 12px; } .artikull__trupi { font-size: 16.5px; line-height: 1.7; } .artikull__trupi h2 { font-size: 22px; } .artikull__trupi h3 { font-size: 19px; } .seksion { margin: 28px 0; } /* --- Kartat: një kolonë, pa minmax që detyron rrëshqitje anash --- */ .rrjeti { grid-template-columns: 1fr; gap: 22px; } .karta--rresht .karta__foto-mbajtes { flex: 0 0 92px; } .karta__titull { font-size: 18px; } /* --- Artikulli --- */ .faqja-lajm { gap: 32px; margin: 20px 0 40px; } .artikull__meta { gap: 10px; font-size: 12.5px; } /* --- Perdja e videos: teksti dhe butonat duhet të hyjnë në ekran --- */ .perdja__brenda { padding: 20px 16px; } .perdja__titull { font-size: 17px; } .perdja__tekst { font-size: 13.5px; margin-bottom: 14px; } .perdja__butonat { flex-direction: column; } .perdja__butonat .butoni { width: 100%; } /* --- Format --- */ .forma-kuti { margin: 28px auto; padding: 24px 20px; border: 0; box-shadow: none; /* korniza s'ka kuptim kur zë gjithë gjerësinë */ } .forma-kuti h1 { font-size: 24px; } .fusha--rresht { flex-direction: column; gap: 0; } /* --- Butonat: cak prekjeje së paku 44px --- */ .butoni { padding: 12px 20px; min-height: 44px; } .butoni--vogel { min-height: 0; padding: 6px 12px; } /* --- Faqosja: numra më të vegjël që të hyjnë në një rresht --- */ .faqosja { margin: 28px 0; gap: 5px; } .faqosja a, .faqosja span { min-width: 36px; padding: 8px 9px; font-size: 13.5px; } /* --- Fundi --- */ .fundi { margin-top: 40px; } .fundi__brenda { flex-direction: column; gap: 20px; padding-top: 28px; padding-bottom: 24px; } .fundi__lidhje { gap: 12px 18px; } .bosh { padding: 40px 16px; } .anesi__bllok { padding: 18px 16px; } } /* ------------------------------------------------------ Telefon i vogël -- */ @media (max-width: 380px) { .kuti { padding: 0 12px; } .logo__emri { font-size: 26px; } .hero__titull { font-size: 21px; } .artikull__titull { font-size: 22px; } .karta--rresht { gap: 11px; } .karta--rresht .karta__foto-mbajtes { flex: 0 0 78px; } .karta--rresht .karta__titull { font-size: 15px; } .shirit-lart__emri { display: none; } /* hapësira i takon butonit "Dil" */ } /* ------------------------------------------------------------- Prekja --- */ /* | Në pajisje me prekje, `:hover` "ngec" pas klikimit — ngjyra e kuqe mbetet | derisa të preket diku tjetër. Prandaj efektet e hover vlejnë vetëm aty ku | ka vërtet kursor. */ @media (hover: none) { a:hover { color: inherit; } .karta__titull a:hover { color: inherit; } .tabela tr:hover td { background: transparent; } } /* Për ata që kanë kërkuar më pak lëvizje në cilësimet e sistemit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }